* {margin: 0; padding: 0;  box-sizing: border-box}

body {background: #fff6ee; border: none; margin: none}

p {font-family: calibri}
h1 {font-family: calibri}
h2 {font-family: calibri}
h3 {font-family: calibri}


/* ------------------ CABEÇALHO  ------------------ */


.cabecalho {display: flex; align-items: center; background-image: url("icones/caback.png"); padding:30px; background-size: 100%}
@media only screen and (max-width: 246px) {.cabecalho {display: block}}

.cabecalho img {}
@media only screen and (max-width: 680px) {.cabecalho img {width: 223.2px; height: 27px}}
@media only screen and (max-width: 596px) {.cabecalho img {width: 200px; height: 24.3px}}
@media only screen and (max-width: 525px) {.cabecalho img {width: 180px; height: 21.8px}}
@media only screen and (max-width: 432px) {.cabecalho img {width: 162px; height: 19.9px}}
@media only screen and (max-width: 356px) {.cabecalho img {width: 145.8px; height: 17.9px}}
@media only screen and (max-width: 329px) {.cabecalho img {width: 130.5px; height: 16.11px}}
@media only screen and (max-width: 312px) {.cabecalho img {width: 117.4px; height: 14.49px}}
@media only screen and (max-width: 276px) {.cabecalho img {width: 105.66px; height: 13.041px}}
@media only screen and (max-width: 246px) {.cabecalho img {display: block; margin-left: auto; margin-right: auto}}


.nome {flex-basis: 40%; margin-left:20%}
@media only screen and (max-width: 680px) {.nome {margin-left:15%}}
@media only screen and (max-width: 596px) {.nome {margin-left:10%}}
@media only screen and (max-width: 525px) {.nome {margin-left:5%}}
@media only screen and (max-width: 432px) {.nome {margin-left:2%}}


.subcabecalho {margin-left:16%}
@media only screen and (max-width: 680px) {.subcabecalho {margin-left:21%}}
@media only screen and (max-width: 596px) {.subcabecalho {margin-left:29%}}
@media only screen and (max-width: 525px) {.subcabecalho {margin-left:32%}}
@media only screen and (max-width: 432px) {.subcabecalho {margin-left:32%}}
@media only screen and (max-width: 380px) {.subcabecalho {margin-left:26%}}
@media only screen and (max-width: 356px) {.subcabecalho {margin-left:25%}}
@media only screen and (max-width: 329px) {.subcabecalho {margin-left:26%}}
@media only screen and (max-width: 312px) {.subcabecalho {margin-left:26%}}
@media only screen and (max-width: 288px) {.subcabecalho {margin-left:22%}}
@media only screen and (max-width: 276px) {.subcabecalho {margin-left:18%}}

.subcabecalho a {font-family: Calibri; color: white; text-decoration:none; font-size: 16px}
@media only screen and (max-width: 596px) {.subcabecalho a {font-size: 14px}}
@media only screen and (max-width: 432px) {.subcabecalho a {font-size: 12px}}
@media only screen and (max-width: 312px) {.subcabecalho a {font-size: 10px}}
@media only screen and (max-width: 276px) {.subcabecalho a {font-size: 8px}}
@media only screen and (max-width: 246px) {.subcabecalho a {display: inline; margin-left: auto; margin-right: auto}}

.subcabecalho a:hover {text-decoration: underline}

#barra {font-family: Calibri; color: white; font-size: 16px}
@media only screen and (max-width: 596px) {#barra {font-size: 14px}}
@media only screen and (max-width: 432px) {#barra {font-size: 12px}}
@media only screen and (max-width: 312px) {#barra {font-size: 10px}}
@media only screen and (max-width: 276px) {#barra {font-size: 8px}}
@media only screen and (max-width: 246px) {#barra {display: inline; margin-left: auto; margin-right: auto}}



/* ------------------ NAVEGADOR ------------------ */


.navegador {overflow: hidden; background-color: #807c8d; position: -webkit-sticky; position:sticky; top:0; z-index:10}
@media only screen and (max-width: 1007px) {.navegador {display: none}}

.subnav {margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1350px) {.subnav {text-align:center}}
@media only screen and (max-width: 1007px) {.subnav {margin-right:0%; margin-left:0%}}


#nav {border:2px; border-radius:8px; padding:5px; font-family: Calibri; font-size: 16px;
              float: center; display: inline-block; color: white;
              text-align: center; padding: 13px 30px;
              text-decoration: none;  transition: padding 0.3s, color 0.3s, background-color 0.3s}
@media only screen and (max-width: 1685px) {#nav {font-size: 16px; padding: 13px 28px}}
@media only screen and (max-width: 1579px) {#nav {font-size: 16px; padding: 13px 26px}}
@media only screen and (max-width: 1479px) {#nav {font-size: 14px; padding: 13px 20px}}
@media only screen and (max-width: 1350px) {#nav {float: none}}
@media only screen and (max-width: 1007px) {#nav {display: none}}

#nav:hover {background-color: #ddd; color: black;}

#linksocial {border:2px; padding:5px; float: right; display: inline-block; text-align: center; padding: 10px 14.2px}
@media only screen and (max-width: 1685px) {#linksocial {padding: 10px 10px}}
@media only screen and (max-width: 1579px) {#linksocial {padding: 10px 6px}}
@media only screen and (max-width: 1479px) {#linksocial {padding: 10px 3px}}
@media only screen and (max-width: 1350px) {#linksocial {display: none}}

#linksize {width: 28px; height: 20px;  align-vertical: middle}


.navegador2 {background-color: #807c8d; position: -webkit-sticky; position:sticky; top:0; margin:none; z-index: 5}
.subnav2 {text-align: center; margin:none}
@media only screen and (min-width: 1008px) {.navegador2 {display: none}}

#nav2 {font-family: Calibri; font-size: 18px; display: inline-block; color: white; padding: 8px 50px;
        text-decoration: none; transition: color 0.3s, background-color 0.3s; border:2px; border-radius:15px}
@media only screen and (max-width: 525px) {#nav2 {font-size: 16px; padding: 9px 28px}}
@media only screen and (max-width: 432px) {#nav2 {font-size: 15px; padding: 9px 24px}}
@media only screen and (max-width: 356px) {#nav2 {font-size: 14px; padding: 9px 20px}}
@media only screen and (max-width: 312px) {#nav2 {font-size: 13.5px; padding: 9px 18px}}
@media only screen and (max-width: 276px) {#nav2 {font-size: 12px; padding: 9px 14px}}
@media only screen and (max-width: 228px) {#nav2 {font-size: 10px; padding: 9px 10px}}
@media only screen and (max-width: 182px) {#nav2 {font-size: 10px; padding: 9px 5px}}

#nav2:hover {background-color: #ddd; color: black;}

.dropbtn {background-color: #343041; color: white; font-family: Calibri; font-size: 18px; padding: 8px 50px;
          border: 2px white; cursor: pointer; display: inline-block; border:2px; border-radius:15px}
@media only screen and (max-width: 525px) {.dropbtn {font-size: 16px; padding: 9px 28px}}
@media only screen and (max-width: 432px) {.dropbtn {font-size: 15px; padding: 9px 24px}}
@media only screen and (max-width: 356px) {.dropbtn {font-size: 14px; padding: 9px 20px}}
@media only screen and (max-width: 312px) {.dropbtn {font-size: 13.5px; padding: 9px 18px}}
@media only screen and (max-width: 276px) {.dropbtn {font-size: 12px; padding: 9px 14px}}
@media only screen and (max-width: 228px) {.dropbtn {font-size: 10px; padding: 9px 10px}}
@media only screen and (max-width: 182px) {.dropbtn {font-size: 10px; padding: 9px 5px}}


.dropdown {position: relative; display: inline-block}
.dropdown-content {display: none;position: absolute;background-color: #343041;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dropdown:hover .dropdown-content {display: block; z-index: 10}
.dropdown:hover .dropbtn {background-color: #ddd; color: black;}


.descricao {position: relative; display: inline-block}
.descricao .text {visibility: hidden; width: 150px; background-color: red; color: #fff;
                  text-align: center; border-radius: 8px;
  padding: 5px 0px; position: absolute; z-index: 1; top: -5px; right: 120%; opacity: 0; transition: opacity 0.2s;}
.descricao:hover .text {visibility: visible; opacity:1;}




/* ------------------ SLIDESHOW 'INÍCIO' ------------------ */




.slideshow {width: 100%; height: 400px; display:flex; align-itens: flex-start; flex-wrap: wrap}
.slideshow img {width:100%; height: 400px; object-fit: cover; position: absolute}

.boxinfo {background-color:white; opacity: 0.6; width: 400px; height:50px; padding: 1%; z-index:4;
        margin: 100px 0 0 270px; display:table}
@media only screen and (max-width: 1685px) {.boxinfo{margin: 100px 0 0 260px}}
@media only screen and (max-width: 1579px) {.boxinfo {margin: 100px 0 0 250px}}
@media only screen and (max-width: 1479px) {.boxinfo {margin: 100px 0 0 230px}}
@media only screen and (max-width: 1350px) {.boxinfo {margin: 100px 0 0 200px}}
@media only screen and (max-width: 1007px) {.boxinfo {margin: 270px 0 0 50px; width: 350px; height:50px}}
@media only screen and (max-width: 680px) {.boxinfo {margin: 270px 0 0 20px; width: 300px; height:45px}}
@media only screen and (max-width: 412px) {.boxinfo {margin: 280px 0 0 0px; width: 230px; height:40px}}
@media only screen and (max-width: 276px) {.boxinfo {display:none}}

.boxinfo p {color: black; font-size: 23px; display:table-cell; text-align: center; vertical-align: middle}
@media only screen and (max-width: 680px) {.boxinfo p {font-size: 20px}}
@media only screen and (max-width: 412px) {.boxinfo p {font-size: 16px}}

.subbox {background-color: black; opacity: 0.8; width: 100px; height:50px; padding: 1%; z-index:4;
        margin: 155px 0 0 -160px; display:table}
@media only screen and (max-width: 1685px) {.subbox {margin: 150px 0 0 -160px}}
@media only screen and (max-width: 1579px) {.subbox {margin: 148px 0 0 -155px}}
@media only screen and (max-width: 1479px) {.subbox {margin: 145px 0 0 -150px}}
@media only screen and (max-width: 1350px) {.subbox {margin: 145px 0 0 -145px}}
@media only screen and (max-width: 1007px) {.subbox {margin: 310px 0 0 -140px}}
@media only screen and (max-width: 680px) {.subbox {margin: 305px 0 0 -110px; width: 95px; height:40px}}
@media only screen and (max-width: 412px) {.subbox {margin: 312px 0 0 -100px; width: 90px; height:30px}}
@media only screen and (max-width: 276px) {.subbox {display:none}}



.subbox p {color: white; font-size: 17px; display:table-cell; text-align: center; vertical-align: middle}
@media only screen and (max-width: 680px) {.subbox p {font-size: 15.5px}}
@media only screen and (max-width: 412px) {.subbox p {font-size: 14px}}

#foto1 {z-index: 3; animation-name: pic1; animation-duration: 17s; animation-iteration-count: infinite}
@keyframes pic1 {0% {opacity:1} 16.6% {opacity: 1} 33.2% {opacity:0} 83% {opacity:0} 100% {opacity:1}}
#foto2 {z-index: 2; animation-name: pic2; animation-duration: 17s; animation-iteration-count: infinite}
@keyframes pic2 {16.6% {opacity: 0} 33.2% {opacity:1} 49.8% {opacity:1} 66.4% {opacity:0}}
#foto2 {z-index: 1;  animation-name: pic3; animation-duration: 17s; animation-iteration-count: infinite}
@keyframes pic3 {49.8% {opacity:0} 66.4% {opacity: 1} 83% {opacity:1} 100% {opacity:0}}





/* ------------------ CORPO DE TEXTO 'INÍCIO' ------------------ */




.bloco1 {background-color:#fff6ee; width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
@media only screen and (max-width: 1007px) {.bloco1 {padding-top: 80px; padding-bottom: 130px}}
@media only screen and (max-width: 680px) {.bloco1 {padding-top: 60px; padding-bottom: 80px}}
@media only screen and (max-width: 412px) {.bloco1 {padding-top: 55px; padding-bottom: 65px}}
@media only screen and (max-width: 276px) {.bloco1 {padding-top: 40px; padding-bottom: 40px}}

.bloco1 p {color: black; font-size: 20px; line-height: 150%; text-align: left; margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1007px) {.bloco1 p {font-size: 19px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.bloco1 p {font-size: 18px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.bloco1 p {font-size: 17.5px; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.bloco1 p {font-size: 16px; margin-right:1%; margin-left: 1%}}

.bloco1 h1 {color: black; font-size: 40px; line-height: 150%; text-align: center; margin-right:20%; margin-left:20%; margin-bottom: 60px}
@media only screen and (max-width: 1007px) {.bloco1 h1 {font-size: 35px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.bloco1 h1 {font-size: 30px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.bloco1 h1 {font-size: 28px; line-height: 130%; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.bloco1 h1 {font-size: 25px; margin-right:1%; margin-left: 1%}}

.bloco1 img {width: 60%; margin-right:20%; margin-left:20%; margin-top: 40px; margin-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px}
@media only screen and (max-width: 1007px) {.bloco1 img {width: 80%; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {.bloco1 img {width: 90%; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {.bloco1 img {width: 92%; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {.bloco1 img {width: 98%; margin-right:1%; margin-left:1%}}

.bloco1 video {width: 60%; margin-right:20%; margin-left:20%; margin-top: 3%}
@media only screen and (max-width: 1007px) {.bloco1 video {width: 80%; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {.bloco1 video {width: 90%; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {.bloco1 video {width: 92%; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {.bloco1 video {width: 98%; margin-right:1%; margin-left:1%}}

#bloco1_refer {color: black; font-size: 16px; text-align: center; margin-top: 10px; margin-bottom: 40px; margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1007px) {#bloco1_refer {font-size: 15px; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {#bloco1_refer {font-size: 14px; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {#bloco1_refer {font-size: 13.5px; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {#bloco1_refer {font-size: 13px; margin-right:1%; margin-left:1%}}

.bloco2 {background-color:#343041; width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
@media only screen and (max-width: 1007px) {.bloco2 {padding-top: 80px; padding-bottom: 130px}}
@media only screen and (max-width: 680px) {.bloco2 {padding-top: 60px; padding-bottom: 80px}}
@media only screen and (max-width: 412px) {.bloco2 {padding-top: 55px; padding-bottom: 65px}}
@media only screen and (max-width: 276px) {.bloco2 {padding-top: 40px; padding-bottom: 40px}}
.bloco2 a {color: #c1b3ff}

.bloco2 p {color: white; font-size: 20px; line-height: 150%; text-align: left; margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1007px) {.bloco2 p {font-size: 19px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.bloco2 p {font-size: 18px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.bloco2 p {font-size: 17.5px; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.bloco2 p {font-size: 16px; margin-right:1%; margin-left: 1%}}

.bloco2 h1 {color: white; font-size: 40px; line-height: 150%; text-align: center; margin-right:20%; margin-left:20%; margin-bottom: 60px}
@media only screen and (max-width: 1007px) {.bloco2 h1 {font-size: 35px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.bloco2 h1 {font-size: 30px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.bloco2 h1 {font-size: 28px; line-height: 130%; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.bloco2 h1 {font-size: 25px; margin-right:1%; margin-left: 1%}}

.bloco2 img {width: 60%; margin-right:20%; margin-left:20%; margin-top: 40px; margin-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px}
@media only screen and (max-width: 1007px) {.bloco2 img {width: 80%; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {.bloco2 img {width: 90%; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {.bloco2 img {width: 92%; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {.bloco2 img {width: 98%; margin-right:1%; margin-left:1%}}

.bloco2 video {width: 60%; margin-right:20%; margin-left:20%; margin-top: 3%}
@media only screen and (max-width: 1007px) {.bloco2 video {width: 80%; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {.bloco2 video {width: 90%; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {.bloco2 video {width: 92%; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {.bloco2 video {width: 98%; margin-right:1%; margin-left:1%}}

#bloco2_refer {color: white; font-size: 16px; text-align: center; margin-top: 10px; margin-bottom: 40px; margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1007px) {#bloco2_refer {font-size: 15px; margin-right:10%; margin-left:10%}}
@media only screen and (max-width: 680px) {#bloco2_refer {font-size: 14px; margin-right:5%; margin-left:5%}}
@media only screen and (max-width: 412px) {#bloco2_refer {font-size: 13.5px; margin-right:4%; margin-left:4%}}
@media only screen and (max-width: 276px) {#bloco2_refer {font-size: 13px; margin-right:1%; margin-left:1%}}





/* ------------------ RODAPÉ ------------------ */




.rodape {background-color: #303031; background-size: 100%; padding: 10px; width: 100%; height:150px}
@media only screen and (max-width: 512px) {.rodape {height:180px}}

.rodape p {color: #cccbcd}
.rodape h1 {color: #cccbcd; font-size:20px}

.coluna0 {display: inline-block; float:left; width:20%; text-align: left; margin-top: 30px;padding: 20px}
@media only screen and (max-width: 1450px) {.coluna0 {width:14%; padding: 10px}}
@media only screen and (max-width: 1230px) {.coluna0 {width:10%; padding: 5px}}
@media only screen and (max-width: 1007px) {.coluna0 {display: none}}

.coluna11 {display: inline-block; float:left; width:20%; text-align: left; margin-top: 30px;padding: 20px}
@media only screen and (max-width: 1450px) {.coluna11 {width:24%}}
@media only screen and (max-width: 1230px) {.coluna11 {width:26.6%}}
@media only screen and (max-width: 1007px) {.coluna11 {width:33.3%}}
@media only screen and (max-width: 760px) {.coluna11 {display: none}}

.coluna1 {display: inline-block; float:left; width:20%; text-align: left; margin-top: 30px;padding: 20px}
@media only screen and (max-width: 1450px) {.coluna1 {width:24%}}
@media only screen and (max-width: 1230px) {.coluna1 {width:26.6%}}
@media only screen and (max-width: 1007px) {.coluna1 {width:33.3%}}
@media only screen and (max-width: 760px) {.coluna1 {width:50%}}
@media only screen and (max-width: 512px) {.coluna1 {width:100%; float:none; text-align: center; margin-top: 30px; padding: 0px}}


.coluna2 {display: inline-block; float:left; width:20%; text-align: center; padding-top: 55px}
@media only screen and (max-width: 1450px) {.coluna2 {width:24%}}
@media only screen and (max-width: 1230px) {.coluna2 {width:26.6%}}
@media only screen and (max-width: 1007px) {.coluna2 {width:33.3%}}
@media only screen and (max-width: 760px) {.coluna2 {width:50%}}
@media only screen and (max-width: 512px) {.coluna2 {width:100%; float:none; padding-top: 30px}}
@media only screen and (max-width: 270px) {.coluna2 {}}

.linksize_foot {width: 28px; height: 20px;  align-vertical: middle}
@media only screen and (max-width: 512px) {.linksize_foot {width: 22.4px; height: 16px}}
@media only screen and (max-width: 270px) {.linksize_foot {width: 17.92px; height: 12.8px}}

#footlink {padding:15px; text-decoration: none}



/* ------------------ PÁGINA DA BIO ------------------ */


.bloco_bio_titulo {background-color:#343041; width: 100%; padding-top: 100px}
@media only screen and (max-width: 1007px) {.bloco_bio_titulo {padding-top: 80px}}
@media only screen and (max-width: 680px) {.bloco_bio_titulo {padding-top: 60px}}
@media only screen and (max-width: 412px) {.bloco_bio_titulo {padding-top: 55px}}
@media only screen and (max-width: 276px) {.bloco_bio_titulo {padding-top: 40px}}

.bloco_bio_titulo h1 {width:100%; color: white; font-size: 40px; text-align: center; padding-right:20%; padding-left:35%}
@media only screen and (max-width: 1007px) {.bloco_bio_titulo h1 {font-size: 35px; padding-right:0%; padding-left: 0%}}
@media only screen and (max-width: 680px) {.bloco_bio_titulo h1 {font-size: 30px}}
@media only screen and (max-width: 412px) {.bloco_bio_titulo h1 {font-size: 28px}}
@media only screen and (max-width: 276px) {.bloco_bio_titulo h1 {font-size: 25px}}

.bloco_bio {background-color:#343041; width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
@media only screen and (max-width: 1007px) {.bloco_bio {padding-top: 80px; padding-bottom: 130px}}
@media only screen and (max-width: 680px) {.bloco_bio {padding-top: 60px; padding-bottom: 80px}}
@media only screen and (max-width: 412px) {.bloco_bio {padding-top: 55px; padding-bottom: 65px}}
@media only screen and (max-width: 276px) {.bloco_bio {padding-top: 40px; padding-bottom: 40px}}

.bloco_bio a {color: #c1b3ff}

.bloco_bio p {color: white; font-size: 20px; line-height: 150%; text-align: left; margin-right:20%; margin-left:35%}
@media only screen and (max-width: 1007px) {.bloco_bio p {font-size: 19px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.bloco_bio p {font-size: 18px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.bloco_bio p {font-size: 17.5px; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.bloco_bio p {font-size: 16px; margin-right:1%; margin-left: 1%}}

#padding {padding-bottom: 20px}

.bio_foto {background-color:#343041; width: 20%; float: left; margin-left:8%; margin-top:100px}
@media only screen and (max-width: 1007px) {.bio_foto {width: 30%; margin-left: 10%; margin-right: 20px; margin-bottom: 20px; margin-top:88px}}
@media only screen and (max-width: 680px) {.bio_foto {display:none}}

.bio_foto p {color: white; font-size: 14px; text-align: center; padding-bottom: 20px}
.bio_foto img {width: 100%; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px}

.bio_foto2 {background-color:#343041; width: 100%; padding-right:5%; padding-left: 5%; padding-top:10px; display:none}
@media only screen and (max-width: 680px) {.bio_foto2 {display: inline-block}}
@media only screen and (max-width: 412px) {.bio_foto2 {padding-right:4%; padding-left: 4%}}
@media only screen and (max-width: 276px) {.bio_foto2 {padding-right:1%; padding-left: 1%}}

.bio_foto2 p {color: white; font-size: 14px; text-align: center; padding-bottom: 20px}
.bio_foto2 img {width: 100%; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px}

.galeria_titulo {width:100%; background-color: #504a64; font-family: Calibri; color: #e9e8ee; font-size: 26px;
                 text-align: center; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #3f3b4f; border-top: 1px solid #3f3b4f}
@media only screen and (max-width: 1007px) {.galeria_titulo {font-size: 22px; padding-right:0%; padding-left: 0%}}
@media only screen and (max-width: 680px) {.galeria_titulo {font-size: 20px}}
@media only screen and (max-width: 412px) {.galeria_titulo {font-size: 18px}}
@media only screen and (max-width: 276px) {.galeria_titulo {font-size: 16px}}

.galeria_fundo {width:100%; height: 360px; background-color:#343041; padding-top: 30px; padding-bottom: 30px}
.galeria {width:33.3%; height: 300px; display: inline-block; float:left}
.galeria img:hover {opacity:0.7}
.galeria img {width:33%; height: 300px; padding: 10px; object-fit: cover; position: absolute; opacity:1; transition: opacity 0.3s}



/* ------------------ PÁGINA "MÚSICA" ------------------ */

.selecionar_secao_fundo {width:100%; height: 750px; background-color:#343041; padding-top: 24px; padding-bottom: 30px}
@media only screen and (max-width: 1007px) {.selecionar_secao_fundo {height: 500px}}
@media only screen and (max-width: 300px) {.selecionar_secao_fundo {display: none}}


.selecionar_secao {width:49.9%; height: 300px; display: inline-block; float:left}
.selecionar_secao img {width:50%; height: 700px; padding-left: 40px; padding-right: 40px; object-fit: cover;
                        position: absolute; opacity:1; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; object-position: 100% 75%}
@media only screen and (max-width: 1007px) {.selecionar_secao img {height: 450px; padding-left: 0px; padding-right: 0px}}
@media only screen and (max-width: 400px) {.selecionar_secao img {object-position: 50% 100%}}


.texto_flutuante1 {background-color:black; opacity:0.9; font-size:20px; width:120px; height: 40px; text-align: center;
                    padding-top:9px; margin-top: 360px; display: block; margin-left: auto; margin-right: auto}
@media only screen and (max-width: 1007px) {.texto_flutuante1 {margin-top: 216px; font-size:18px}}
@media only screen and (max-width: 400px) {.texto_flutuante1 {font-size:16px; width:100px; height: 38px}}

.texto_flutuante1 a {font-family: calibri; color: white; transition: color 0.2s}
.texto_flutuante1 a:hover {font-family: calibri; color: #ff8a24}

.texto_flutuante2 {background-color:white; opacity:0.9; font-size:20px; width:130px; height: 40px; text-align: center;
                   padding-top:9px; margin-top: 360px; display: block; margin-left: auto; margin-right: auto}
@media only screen and (max-width: 1007px) {.texto_flutuante2 {margin-top: 216px; font-size:18px}}
@media only screen and (max-width: 400px) {.texto_flutuante2 {font-size:16px; width:110px; height: 36px}}

.texto_flutuante2 a {font-family: calibri; color: black; transition: color 0.2s}
.texto_flutuante2 a:hover {font-family: calibri; color: #6d5da2}

#comp_sec {}
#inter_sec {}

.mus_diagram {width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
.mus_diagram h1 {padding-top: 20px; padding-bottom:70px; text-align:center}
.mus_diagram h2 {text-size: 30px; padding-bottom:10px}
.mus_diagram h3 {text-size: 26px; padding-bottom:0px; padding-top: 20px}
.mus_diagram p {padding-top:3px; padding-bottom: 3px}
.mus_diagram a {text-decoration: none}

.mus_caixa {padding:10px; margin-left:25%; margin-right:25%}
@media only screen and (max-width: 1007px) {.mus_caixa {margin-left:10%; margin-right:10%}}
.mus_caixa img {margin-top: 8px; margin-left:10px; height: 20px; opacity:1}
.mus_caixa img:hover {padding:1px}

.grupos_caixa {background-color: grey; padding:20px; margin-left:25%; margin-right:25%; margin-top: 50px}
@media only screen and (max-width: 1007px) {.grupos_caixa {margin-left:10%; margin-right:10%}}
.grupos_caixa img {margin-top: 8px; margin-left:10px; height: 20px; opacity:1}
.grupos_caixa img:hover {padding:1px}



/* ------------------ PÁGINA "PUBLICAÇÕES" ------------------ */

.publi_diagram {background-color:#343041; color:white; width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
.publi_diagram h1 {padding-top: 20px; padding-bottom:70px; text-align:center}
.publi_diagram h2 {text-size: 30px; padding-bottom:10px}
.publi_diagram h3 {text-size: 26px; padding-bottom:0px; padding-top: 20px}
.publi_diagram p {padding-top:3px; padding-bottom: 12px; line-height: 140%}
.publi_diagram a {color: white; transition: color 0.2s}
.publi_diagram a:hover {color: blue}


.publi_caixa {background-color: grey; padding:20px; margin-left:25%; margin-right:25%; margin-top: 50px}
@media only screen and (max-width: 1007px) {.publi_caixa {margin-left:10%; margin-right:10%}}
.publi_caixa img {margin-top: 8px; margin-left:10px; height: 20px; opacity:1; transition: opacity 0.2s}
.publi_caixa img:hover {opacity:0.5}


/* ------------------ PÁGINA "AULAS" ------------------ */

.selecionar_secao_fundo1 {width:100%; height: 750px; background-color:#fff6ee; padding-top: 24px; padding-bottom: 30px}
@media only screen and (max-width: 1007px) {.selecionar_secao_fundo1 {height: 500px}}
@media only screen and (max-width: 300px) {.selecionar_secao_fundo1 {display: none}}


.selecionar_secao1 {width:49.9%; height: 300px; display: inline-block; float:left}
.selecionar_secao1 img {width:50%; height: 700px; padding-left: 40px; padding-right: 40px; object-fit: cover;
                        position: absolute; opacity:1; object-position: 100% 75%}
@media only screen and (max-width: 1007px) {.selecionar_secao1 img {height: 450px; padding-left: 0px; padding-right: 0px}}
@media only screen and (max-width: 400px) {.selecionar_secao1 img {object-position: 50% 100%}}


.texto_flutuante3 {background-color:#1e222b; opacity:0.9; font-size:20px; width:120px; height: 40px; text-align: center;
                    padding-top:9px; margin-top: 360px; display: block; margin-left: auto; margin-right: auto}
@media only screen and (max-width: 1007px) {.texto_flutuante3 {margin-top: 216px; font-size:18px}}
@media only screen and (max-width: 400px) {.texto_flutuante3 {font-size:16px; width:100px; height: 38px}}

.texto_flutuante3 a {font-family: calibri; color: white; transition: color 0.2s}
.texto_flutuante3 a:hover {font-family: calibri; color:#7d6736}

.texto_flutuante4 {background-color:#d1cd78; opacity:0.9; font-size:20px; width:130px; height: 40px; text-align: center;
                   padding-top:9px; margin-top: 360px; display: block; margin-left: auto; margin-right: auto}
@media only screen and (max-width: 1007px) {.texto_flutuante4 {margin-top: 216px; font-size:18px}}
@media only screen and (max-width: 400px) {.texto_flutuante4 {font-size:16px; width:110px; height: 36px}}

.texto_flutuante4 a {font-family: calibri; color: black; transition: color 0.2s}
.texto_flutuante4 a:hover {font-family: calibri; color: #797cb8}

.cursos_caixa {background-color: #d1cd78; padding:20px; margin-left:25%; margin-right:25%; margin-top: 50px}
@media only screen and (max-width: 1007px) {.cursos_caixa {margin-left:10%; margin-right:10%}}
.cursos_caixa img {margin-top: 8px; margin-left:10px; height: 20px; opacity:1}
.cursos_caixa img:hover {padding:1px}


.cursos_drop {position: relative; font-family: calibri; margin-top: 10px; text-decoration:underline;}
.cursos_drop_conteudo {display:none; position: absolute; background-color:#807c8d; color:white; padding:10px;
                       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1}
.cursos_drop:hover .cursos_drop_conteudo {display:block}

/* ------------------ PÁGINA "CONTATO" ------------------ */

.form_fundo {background-image: url("fotos/palimpsesto_p18.jpg"); width: 100%; display: block; padding-top: 100px; padding-bottom: 150px}
@media only screen and (max-width: 1007px) {.form_fundo {padding-top: 80px; padding-bottom: 130px}}
@media only screen and (max-width: 680px) {.form_fundo {padding-top: 60px; padding-bottom: 80px}}
@media only screen and (max-width: 412px) {.form_fundo {padding-top: 55px; padding-bottom: 65px}}
@media only screen and (max-width: 276px) {.form_fundo {padding-top: 40px; padding-bottom: 40px}}
.form_fundo h1 {color: black; font-size: 40px; line-height: 150%; text-align: center; margin-right:20%; margin-left:20%; margin-bottom: 60px}
@media only screen and (max-width: 1007px) {.form_fundo h1 {font-size: 35px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.form_fundo h1 {font-size: 30px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.form_fundo h1 {font-size: 28px; line-height: 130%; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.form_fundo h1 {font-size: 25px; margin-right:1%; margin-left: 1%}}
.form_fundo p {color: White; font-size: 20px; line-height: 150%; text-align: left; margin-right:20%; margin-left:20%}
@media only screen and (max-width: 1007px) {.form_fundo p {font-size: 19px; margin-right:10%; margin-left: 10%}}
@media only screen and (max-width: 680px) {.form_fundo p {font-size: 18px; margin-right:5%; margin-left: 5%}}
@media only screen and (max-width: 412px) {.form_fundo p {font-size: 17.5px; margin-right:4%; margin-left: 4%}}
@media only screen and (max-width: 276px) {.form_fundo p {font-size: 16px; margin-right:1%; margin-left: 1%}}

.formulario_contato {background-color:#343041; padding: 10px 10px 100px 10px; margin:auto; width: 50%; color:white}
@media only screen and (max-width: 1007px) {.formulario_contato {width: 70%}}
@media only screen and (max-width: 680px) {.formulario_contato {width: 80%}}
@media only screen and (max-width: 412px) {.formulario_contato {width: 90%}}
@media only screen and (max-width: 276px) {.formulario_contato {width: 95%}}

.formulario_contato h1 {color:white; padding-top: 50px}

.formulario_contato form {font-family: calibri; padding: 20px; margin:auto; width: 50%}
@media only screen and (max-width: 1007px) {.formulario_contato form {padding: 10px; margin:auto; width: 70%}}
@media only screen and (max-width: 680px) {.formulario_contato form {padding: 8px; margin:auto; width: 80%}}
@media only screen and (max-width: 412px) {.formulario_contato form {padding: 6px; margin:auto; width: 90%}}
@media only screen and (max-width: 276px) {.formulario_contato form {padding: 4px; margin:auto; width: 95%}}

input[type=text] {background-color: white; padding: 8px 20px 8px 6px; display: block; width: 100%; transition: background-color 0.5s}
input[type=text]:focus {background-color: #e9e7be}
input[type=email] {background-color: white; padding: 8px 20px 8px 6px; display: block; width: 100%; transition: background-color 0.5s}
input[type=email]:focus {background-color: #e9e7be}
input[type=submit] {background-color: white; padding: 15px; width:90px; transition: width 0.1s, background-color 0.2s}
input[type=submit]:hover {background-color: #e9e7be}
input[type=submit]:focus {width:90px}
textarea {background-color: white; font-family:calibri; padding: 8px 20px 8px 6px; display: block; width: 100%; height:200px; transition: background-color 0.5s}
textarea:focus {background-color: #e9e7be}