@charset "utf-8";
/* CSS Document */

header {
	padding-top: 20px;
	padding-left: 80px;
	padding-right: 80px;
	float: none;
}


/*NAVS e LINKS*/

ul {
    list-style-type: none;
	text-decoration: none;
	margin: 0;
    padding: 0;
	float: right;
	font-family: 'Merriweather Sans', 500;
	font-size: 0.8em;
}

.menu-principal li {
	display: inline-block;
	padding: 9px;
	font-family: 'Merriweather Sans';
	text-transform: uppercase;
	letter-spacing: 0.2em;}

a:link {
    color: #696969; text-decoration: none;}

a:hover {
    font-family: 'Merriweather Sans'; color: #a5b919; 
	width: fit-content;}

a:active {
    color: #a5b919;}

a:visited {
	color: #909090; text-decoration: none;}

.minibio-link:hover {
    font-family: 'Merriweather'; font-weight: 900;}

.minibio-link:active {
    color: #e55515; font-family: 'Merriweather';}



.logo-topo {
	float:left;}

.hero-image {
	min-height: 333px;
	background-image: url("imagens/imagem-de-capa-2022.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	align-content: center;
	margin: 80px;
	margin-top: 150px;
	margin-bottom: 150px;
	padding: 20px;
	float: inherit;
}


.o-que-e {width: 55%; background-color: #FFFFFF; margin: auto;}


h2 {font-family: 'Trevor'; color: #e55515; font-size: 2.2em; line-height: 2.5em; letter-spacing: 0.04em; display: block;
}

h3 {font-family: 'Merriweather Sans'; color: #a5b919; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; margin-top: 28px; margin-bottom: 20px; display: block;
}

h4 {font-family: 'Merriweather', serif; color: white; font-size: 16px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-top: 28px; margin-bottom: -20px; display: block;
}

h5 {font-family: 'Trevor'; color: #000000; font-size: 2.2em; line-height: 2.5em; letter-spacing: 0.04em; display: block;
}

p {font-family: 'Merriweather Sans'; color: #757575; font-size: 1.1em; line-height: 1.9em;
}

p2 {font-family: 'Merriweather Sans'; color: #FFFFFF; font-weight: 300; letter-spacing: 0.02em; font-size: 1.1em; line-height: 1.9em;
}

.btn {
  background-color: black;
  color: white;
  font-family: 'Trevor'; font-size: 1.2em;
  padding: 14px 28px;
  border-radius: 33px; 
  cursor: pointer;
  border-top-style: none;
}

.btn:hover {
  background-color: #E55515;
  font-family: 'Trevor'; font-size: 1.2em;
  cursor: pointer;
  border-top-style: none;
}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: white; /* Set a background color */
  color: #E55515; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 12px; /* Rounded corners */
  font-size: 12px; /* Increase font size */
  font-family: 'Trevor Light'; letter-spacing: 1px;
}

#myBtn:hover {
  background-color: #000000; /* Add a dark-grey background on hover */
}


.minibio {font-family: 'Merriweather Sans'; color: #696969; font-size: 17px; line-height: 34px; 
	-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
	-webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; 
	padding-bottom: 72px; 
}

#italica {font-style: italic;}


.fotos-paragrafo {width: 100%; margin-top: 48px; margin-bottom: 48px;}

.img-colunas {width: 55%; margin: auto; margin-top: 64px;}

.img-colunas-sobre {width: 48%; display: inline;}

.fotos-cursos {width: 60%; margin-top: 8px; margin-bottom: 12px;}

.img-perfis {width: 240px; display: inline-block; float:left; padding-right: 24px; padding-top: 8px;}



.o-que-fazemos {width: 55%; background-color: #FFFFFF; margin: auto;}



.LOJA {background-color: #a5b919; border: none;
	margin-top: 48px; margin-bottom: 48px; padding-top: 48px;}

.Loja {width: 55%; margin: auto; padding-bottom: 120px;}



.Artistas {width: 66%; background-color: #FFFFFF; margin: auto; padding-top: 48px; padding-bottom: 120px;}
.Luciana {padding-top: 48px;}


.Contato {background-color: #000000; margin: auto; padding-top: 48px; padding-bottom: 120px;}
.email {width: 55%; margin: auto;}



footer {height: 240px; 
	background-color: #FFFFFF; background-image: url("imagens/rodape_final.jpg"); background-repeat: no-repeat; background-size: 520px; background-position: bottom; 
	padding-top: 96px; padding-bottom: 0px; margin-bottom: 0px;  
	font-family: 'Merriweather Sans'; color: #757575; font-size: 9px; 
	text-transform: uppercase; letter-spacing: 3px; line-height: 28px;
}  

.rodape {width: 60%; align-content: center; margin: auto}




/*NOTEBOOK*/ 
@media (max-width: 1320px) {.minibio
	{-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}



	
/*TABLET*/ 
@media (max-width: 768px) {.o-que-e 
	{width: 88%; padding-left: 36px; padding-right: 12px}

@media (max-width: 768px) {.menu-principal li 
	{display: block;
	font-size: 0.66em;
	line-height: 0.4em;}
	
@media (max-width: 768px) {.a:hover
	{padding-top: -20px;
	border-top-style: none;
	border-top-width: 0px;}
	
@media (max-width: 768px) {.hero-image
	{width: 100%; margin: 0px; margin-top: 150px; margin-bottom: 5px;
	background-image: url("imagens/imagem-de-capa-2022_mobile.jpg")}
	
@media (max-width: 768px) {.img-colunas 
	{width: 100%;}
	
@media (max-width: 768px) {.o-que-fazemos 
	{width: 88%; padding-left: 36px; padding-right: 12px}
	
@media (max-width: 768px) {.Loja 
	{width: 88%; margin: auto}

@media (max-width: 768px) {.minibio
	{-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
	
@media (max-width: 768px) {.img-perfis 
	{width: 160px; display: block; float:none; padding-bottom: 24px;}
	
	
	
/*MOBILE*/ 
	
@media (max-width: 480px) {header
	{padding-left: 20px;
	padding-right: 20px;}
	
@media (max-width: 480px) {.hero-image
	{margin: 0px; margin-top: 150px; margin-bottom: 75px;
	padding: 20px; width: 90%;}
	
@media (max-width: 480px) {.O.QUE.E 
	{width: 88%; margin-left: 20px}

@media (max-width: 480px) {.img-colunas 
	{width: 100%; margin: 0px; margin-top: 20px;}
	
@media (max-width: 480px) {.img-colunas-sobre 
	{width: 100%; margin: 0px; display: block;}
		
@media (max-width: 480px)	{h2 
		{font-size: 36px; line-height: 36px;}

@media (max-width: 480px)	{h1 
		{font-size: 51px;}
	
@media (max-width: 480px) {.O.QUE.FAZEMOS 
	{width: 88%;}
		
@media (max-width: 480px) {.Loja 
	{width: 88%; margin: auto}
	
@media (max-width: 480px) {.fotos-cursos 
	{width: 80%; margin-top: 0px; margin-bottom: 0px;}
	
@media (max-width: 480px) {.Artistas 
	{width: 88%; margin-left: 20px}

	
/*MOBILE 360*/ 
	
@media (max-width: 360px) {header
	{padding-left: 12px;
	padding-right: 12px;}
	
@media (max-width: 360px) {ul
	{font-size: 18px;}
	
@media (max-width: 360px)	{h1 
		{font-size: 42px;}