*{
    margin: 0;
    padding: 0;
    user-select: none;
}
html{
    font-size: 62.5%;
}
img{
    -webkit-user-drag: none;
}
body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #ffa;
    background-size: 700px;
    overflow-x: hidden;
}
header{
    background-image: url(img/bg/carnival.png);
    background-size: 500px;
    height: 13em;
    border-bottom: .2em solid #000;
    position: fixed;
    width: 100%;
    z-index: 100;
    animation: bg_animado 900000s linear infinite alternate;
}
@keyframes bg_animado{
    0%{
        background-position-y: center;
    }100%{
        background-position-y: 51849203px;
    }
}
.logo{
    position: absolute;
    float: left;
    left: 2em;
    top: 50%;
    transform: translateY(-50%);
    height: 5em;
}
/* .account {
    display: none;
} */
.opcoes {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 17px;
    float: right;
    right: 1em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8em;
}
.opcoes button{
    padding: .3em;
    border: none;
    font-size: 1em;
    line-height: 1em;
    background: #fd0;
    border-radius: 20%;
    border-bottom: .16em solid transparent;
    transition: all .2s;
    cursor: pointer;
    font-weight: bold;
}
.opcoes button:hover{
    border-bottom: .16em solid #000;
    transition: all .2s;
}
a{
    text-decoration: none;
    color: #000;
}
.parede {
    height: 2em;
    width: .15em;
    background: #000;
}
.conteudo-1 {
    margin-top: 2em;
}
picture img {
    width: 100%;
}
.linha1 {
    height: .3em;
}
section{
    padding-top: 4em;
    padding-bottom: 4em;
    width: 100%;
    background-size: 120%;
    background-attachment: fixed;
    background-image: url(img/bg/bg\ azul.png);
    top: 13em;
    position: relative;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    gap: 3em;
}
section h1{
    font-size: 3em;
}
#sec2{
    background-image: url(img/bg/bg\ roxo.png);
    background-color: #d0d;
    border-top: 1em double #fff;
    border-bottom: 1.3em groove #fff;
}
#sec3{
    background-image: linear-gradient(#000, #c6c6c6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
#div2, #div3, #div4, #div5{
    top: 13em;
    position: relative;
    width: 100%;
    height: .5em;
    background-image: url(img/bg/2.png);
    background-attachment: fixed;
    background-size: 100%;
}
#div2{
    background-color: #000;
}
#div3{
    background-color: #c6c6c6;
}
#div4{
    background-color: #a57600;
    height: 1.1em;
}
#div5{
    background-color: #4d3700;
    height: .7em;
    filter: drop-shadow(0 0 1em #fd0);
}
#div4, #div5{
    background-attachment: fixed;
    background-size: 80em;
    background-position: center;
}
#sec4{
    background-color: #ffbb00;
    background-image: url(img/bg/bgcow.png);
    border-top: 1em double #000;
}
#sec4 h1{
    color: #fff;
    text-shadow: -.1em -.1em .1em #000, .1em -.1em .1em #000, -.1em .1em .1em #000, .1em .1em .1em #000;
    font-size: 3.3em;
}
.carrossel{
    position: relative;
    width: 80%;
    overflow: hidden;
}
.carrossel-ct{
    display: flex;
    transition: transform .5s ease-in-out;
}
.carrossel-slide {
    min-width: 100%;
    text-align: center;
    height: 29em;
}
.carrossel-slide img{
    height: 28em;
    width: auto;
}
.legenda{
    margin-top: 1em;
    font-size: 3em;
    color: #fff;
    font-weight: bold;
}
.carrossel-indicadores{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4em;
    height: 7em;
}
.carrossel-indicadores div{
    width: 1em;
    height: 1em;
    margin: 0 .5em;
    margin-top: 2em;
    background-color: #ccc;
    border-radius: 50%;
    transition: all .3s ease-in-out;
}
.carrossel-indicadores .ativo{
    background-color: #fff;
    transform: scale(1.3);
}
.carrossel-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #00000080;
    border: none;
    color: #fff;
    font-size: 5rem;
    cursor: pointer;
    z-index: 1;
    padding: 2rem 1.5rem;
    border-radius: .5em;
}
.carrossel-btn.ante{
    left: 0;
}
.carrossel-btn.prox{
    right: 0;
}
.carrossel-btn:hover{
    background: #000000b3;
}
.relogio img{
    height: 3em;
}
.dia, .dia_v, .dia_e{
    color: #fff;
    font-weight: bold;
    font-size: 2.7em;
    text-shadow: -.1em -.1em .1em #000, .1em -.1em .1em #000, -.1em .1em .1em #000, .1em .1em .1em #000;
}
.dia_v{
    color: #fff36b;
}
.dia_e{
    color: #ff0;
}
.letra_v{
    font-size: 2.2em;
    letter-spacing: -.04em;
    margin-top: .39em;
    margin-bottom: .39em;
}
.horarios-h{
    display: flex;
    flex-direction: column;
    gap: .05em;
}
.horarios div, .horarios-h div{
    display: flex;
    flex-direction: row;
    gap: 2em;
}
.horario-g{
    display: flex;
    flex-direction: row;
    gap: 3em;
}
.brilho {
    background-color: #fb0;
    border-radius: 1em;
}
.brilho_v{
    background: #e00000;
    border-radius: 1em;
}
iframe{
    width: 100%;
    height: 29em;
    border: none;
}
.sobrenos-txt{
    color: #000;
    font-size: 2.2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
.sobrenos-img img{
    height: 45em;
}
.sobrenos-c{
    display: flex;
    flex-direction: row;
    margin: .8em;
    padding: .6em;
    gap: 15.5em;
    max-width: 120em;
    justify-content: center;
    align-items: center;
}
#whats{
    background-image: linear-gradient(green, #00ae00);
    color: #e0e0e0;
    text-shadow: 0 0 .1em #fff;
    font-weight: bold;
    font-size: 1.1em;
    padding: .6em;
    padding-left: 1.4em;
    padding-right: 1.4em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .7em;
    border-radius: 3em;
    border: .11em solid #e0e0e0;
    transition: all .3s;
}
#whats:hover{
    background-image: linear-gradient(#009100, #1dff1d);
    transition: all .3s;
}
#whats:active{
    background-image: linear-gradient(#004e00, green);
    transition: none;
}
#whatsapp{
    position: relative;
    top: .19em;
    filter: drop-shadow(0 0 .1em #fff);
}
#whatsapp svg{
    fill: #e0e0e0;
}
#whats_btn button{
    cursor: pointer;
}
footer{
    position: relative;
    top: 8em;
    background: #000;
    background-image: url(img/bg/3.png);
    background-size: 80em;
    background-attachment: fixed;
    background-position: center;
    color: #fd0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 4em;
    z-index: 5000;
    border-top: .1em solid #fff;
}
footer #svg svg{
    fill: #fd0;
    position: relative;
}
footer p{
    position: relative;
    top: -2em;
}
.desc_empresa{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.desc_empresa::before{
    content: '';
    background: #fed700;
    width: calc(100% + 50px);
    height: 2px;
    margin: 10px;
    position: relative;
    top: -10px;
}
#wpp svg, #insta svg, #email svg{
    fill: #fd0;
}
#email svg{
    position: relative;
    top: -.05em;
}
.redes{
    display: flex;
    flex-direction: row;
    gap: 1em;
}
hr{
    border-top: .3px solid #fd0;
    width: 30em;
    position: relative;
    top: -4em;
}
.creditos{
    position: relative;
    top: 3em;
    font-size: 1em;
}
.creditos a{
    color: #fd0;
}
#escuro_ct, #escuro_imp{
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: fixed;
    z-index: 0;
    display: block;
    transition: all .7s;
}
#contatos{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20em;
    height: 30em;
    z-index: 0;
    transition: all 1s;
}
.whatsapp svg, .instagram svg{
    fill: #fff;
}
.whatsapp, .instagram{
    color: #fff;
}
.whatsapp, .instagram, .email{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 2.1em;
    text-align: center;
    transition: all 1s;
}
.whatsapp{
    background-image: linear-gradient(green, lime);
    transform: rotate(-3deg);
    animation: wpp 1s ease-in-out 1 alternate;
    z-index: 779;
}
.whatsapp button{
    background: transparent;
    border: 4.5px solid #fff;
    border-radius: 3.5em;
    padding: 7px;
    color: #fff;
    font-size: .7em;
    font-weight: 800;
    cursor: pointer;
}
.instagram{
    background-image: linear-gradient(45deg, #f58529, #ffbb00, #dd2a7b, #8134af, #515bd4);
    transform: rotate(20deg);
    animation: ig 1s ease-in-out 1 alternate;
    left: 130px;
}
.instagram img{
    height: 120px;
}
.email{
    background-image: linear-gradient(#fff, #c3c3c3);
    transform: rotate(-10deg);
    animation: em 1s ease-in-out 1 alternate;
    left: -16em;
}
@keyframes wpp{
    0%{
        transform: translate(0, 0) rotate(0deg);
    }100%{
        transform: translate(0, 0) rotate(-3deg);
    }
}
@keyframes ig {
    0%{
        transform: translate(0, 0) rotate(0deg);
        left: 0;
    }100%{
        transform: translate(0, 0) rotate(20deg);
        left: 130px;
    }
}
@keyframes em{
    0%{
        transform: translate(0, 0px) rotate(0deg);
        left: 0;
    }100%{
        transform: translate(0, 0) rotate(-10deg);
        left: -160px;
    }
}
@media screen and (max-width: 600px){
    .instagram, .whatsapp, .email{
        transform: rotate(0deg);
        left: 0;
        animation: none;
        transition: all .5s;
    }
    .instagram, .email{
        top: 0;
    }
}
#escuro{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 0;
    transition: all .5s;
}
#menu{
    background: #fd0;
    background-image: url(img/bg/bgh.png);
    background-size: 60em;
    background-position: center;
    height: 100%;
    width: 30em;
    position: fixed;
    z-index: 9999;
    color: #000;
    padding: 10px;
    padding-left: 0; /*300 + 10 + 5*/
    border-right: 10px double #000;
    left: -32em;
    transition: all .5s;
}
#menu ul{
    margin-left: .5em;
    font-size: 2.5em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 2.3em;
}
#menu ul li{
    cursor: pointer;
}
#menu ul li:hover{
    color: #303030;
}
#menu ul li:active{
    color: #3e3600;
}
#imprimir{
    position: fixed;
    z-index: 4999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #0000005a;
    color: #fff;
    border-radius: 4em;
    border: groove #fff 2.2px;
    padding: .6em;
    font-weight: 800;
    bottom: 0;
    margin-bottom: 2em;
    float: right;
    right: 0;
    margin-right: 1em;
    filter: drop-shadow(0 0 .03em #fff);
    font-size: 2.3em;
    cursor: pointer;
    transition: all 1s;
    animation: escala 2s ease-in-out infinite alternate;
}
@keyframes escala{
    0%{
        transform: scale(1);
        background: #00000095;
    }100%{
        transform: scale(1.05);
        background: #000;
    }
}
@media screen and (max-width: 700px) {
    #imprimir{
        font-size: 1.9em;
        letter-spacing: -.04em;
        font-weight: 600;
    }
}
#imprimir svg{
    position: relative;
    top: .2em;
}
#carregando{
    color: red;
    text-align: center;
    opacity: 0;
    transition: all 1s;
}
#info{
    color: #f00;
    font-size: 1.2em;
    text-align: center;
}
#menu_imprimir{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5001;
    background: #fff;
    padding: 0;
    height: 0;
    width: 0;
    border: none;
    border-radius: 4em;
    transition: all 1s;
}
#menu_imprimir form{
    flex-direction: column;
    gap: .8em;
    display: none;
    opacity: 0;
    transition: all 1s;
}
.configs{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.configs div{
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    align-items: center;
}
input[type="file"]{
    display: none;
}
.est_input{
    font-size: 2em;
    padding: .6em;
    background-image: linear-gradient(#ff0, #fb0);
    cursor: pointer;
    transition: all .3s;
    text-align: center;
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
}
.est_input:hover{
    background-image: linear-gradient(#ffff4f, #ffe927);
    transition: all .3s;
}
.est_input:active{
    background-image: none;
    background: #ffff4f;
}
input[type="submit"]{
    padding: 6px;
    font-size: 17px;
    background-image: linear-gradient(#c3c3c3, #818181);
    border: none;
    cursor: pointer;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}
.inputs-pes{
    display: flex;
    flex-direction: column;
    gap: .5em;
}
input[type="text"]:focus, input[type="email"]:focus{
    outline: none;
}
input[type="text"], input[type="email"]{
    padding: .6em;
    border: .1em solid #000;
}
input::placeholder{
    font-style: italic;
}
input:nth-child(4){
    padding: 0;
    border: none;
    cursor: default;
    text-align: center;
    letter-spacing: -.03em;
    color: #4d3700;
}
  /*cookies*/
#fechar-cookies{
    position: absolute;
    top: 10px;
    right: 0;
    margin-right: 110px;
    cursor: pointer;
}
#fechar-cookies:hover{
    color: #ff8181;
}
#cookie-banner{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #000000ee;
    color: white;
    padding: 4.5em;
    display: none;
    justify-content: space-between;
    align-items: center;
    z-index: 6000;
}
#cookie-banner button{
    margin-left: 1em;
    padding: .8em 1.2em;
    background-color: #46b84a;
    color: #000;
    border: none;
    border-radius: .5em;
    cursor: pointer;
    margin-right: 1em;
    font-weight: 600;
  }
#cookie-banner button.ignore{
    background-color: #ff1a09;
    margin-right: 7em;
}
@media screen and (max-width: 600px) {
    #cookie-banner{
        justify-content: center;
        flex-direction: column;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        gap: 3em;
    }
    #cookie-banner button, #cookie-banner button.ignore{
        margin: 0;
    }
}
#politicas a{
    font-size: 1.2em;
    color: #fd0;
    text-decoration: underline;
}

/* antigo contatos_cel css */

#contatos_cel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 100px;
    z-index: 0;
    transition: all 1s;
}
.whatsapp-cel svg, .instagram-c svg{
    fill: #fff;
}
.whatsapp-cel, .instagram-c{
    color: #fff;
}
.whatsapp-cel, .instagram-c, .email-c {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: all 1s;
}
.whatsapp-cel {
    background-image: linear-gradient(green, lime);
    transform: rotate(-3deg);
    animation: wpp 1s ease-in-out 1 alternate;
    z-index: 779;
}
#whatsApp_cel button{
    background: transparent;
    border: 4.5px solid #fff;
    border-radius: 35px;
    padding: 7px;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}
.instagram-c {
    background-image: linear-gradient(45deg, #f58529, #ffbb00, #dd2a7b, #8134af, #515bd4);
    transform: rotate(20deg);
    animation: igc 1s ease-in-out 1 alternate;
}
.instagram-c img{
    height: 90px;
}
.email-c {
    background-image: linear-gradient(#fff, #c3c3c3);
    transform: rotate(-10deg);
    animation: emc 1s ease-in-out 1 alternate;
}
@keyframes wpp {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(0, 0) rotate(-3deg);
    }
}
@keyframes igc {
    0% {
        transform: translate(0, 0) rotate(0deg);
        top: 0;
    }
    100% {
        transform: translate(0, 0) rotate(20deg);
        top: -140px;
    }
}
@keyframes emc {
    0% {
        transform: translate(0, 0px) rotate(0deg);
        top: 0;
    }
    100% {
        transform: translate(0, 0) rotate(-10deg);
        top: 170px;
    }
}

/* REPONSIVIDADE 1 */

@media screen and (max-width: 1430px) {
    #sec1{
        background-size: 130%;
    }
}
@media screen and (max-width: 1330px) {
    .sobrenos-txt{
        font-size: 19px;
    }
    .sobrenos-img img{
        height: 370px;
    }
}
@media screen and (max-width: 1260px) {
    #sec4 h1{
        font-size: 28px;
    }
    .sobrenos-c{
        margin: 15px;
        max-width: 1030px;
    }
}
@media screen and (max-width: 1125px) {
    .sobrenos-c{
        max-width: 860px;
        gap: 100px;
    }
    .sobrenos-img img{
        height: 430px;
    }
}
@media screen and (max-width: 1095px) {
    #sec1{
        background-size: 200%;
    }
}
@media screen and (max-width: 940px) {
    .sobrenos-c{
        max-width: 720px;
        gap: 100px;
    }
    .sobrenos-txt{
        font-size: 16px;
    }
    .sobrenos-img img{
        height: 330px;
    }
}
@media screen and (max-width: 800px) {
    .sobrenos-c{
        max-width: 610px;
    }
    #sec4 h1{
        z-index: 120;
    }
    .sobrenos-txt{
        font-size: 18px;
        z-index: 120;
        gap: 35px;
    }
    .sobrenos-img{
        position: absolute;
        top: 20px;
        z-index: 119;
    }
    .sobrenos-img img{
        opacity: 60%;
        height: 430px;
    }
}
@media screen and (max-width: 710px) {
    #sec1{
        background-size: 230%;
    }
    .sobrenos-c{
        max-width: 510px;
    }
    #sec4 h1{
        text-align: center;
        font-size: 25px;
        margin-left: 50px;
        margin-right: 50px;
    }
    header{
        border-bottom: 7px double #000;
    }
}
@media screen and (max-width: 625px) {
    #sec1{
        background-size: 320%;
    }
    #sec1 h1{
        text-shadow: 0 0 3px #fff;
    }
    .sobrenos-img{
        top: 45px;
    }
    .sobrenos-img img{
        height: 550px;
        opacity: 40%;
    }
    .carousel-slide{
        height: 230px;
    }
    .carousel-slide img{
        height: 210px;
        filter: drop-shadow(0 0 10px #0af);
    }
    .caption{
        font-size: 1.5em;
        text-shadow: 0 0 10px #0af;
    }
}
@media screen and (max-width: 500px) {
    .sobrenos-c{
        max-width: 390px;
    }
    .sobrenos-txt{
        font-size: 17px;
    }
    .sobrenos-img{
        top: 65px;
    }
}
@media screen and (max-width: 470px) {
    .sobrenos-img{
        top: 85px;
    }
}

/* RESPONSIVIDADE 2 */

@media screen and (max-width: 950px){
    .opcoes{
        display: none;
    }
    .logo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    header{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 14em;
    }
    .burger{
        display: flex;
        flex-direction: column;
        gap: 7px;
        border-radius: 10px;
        cursor: pointer;
        position: absolute;
        left: 10px;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
    }
    .burger span{
        height: 4px;
        background-color: #000;
        width: 30px;
        border-radius: 30px;
    }
    /*.account{
        display: block;
        position: absolute;
        top: 25px;
        float: right;
        right: 10px;
    }*/
    section h1{
        font-size: 2.3em;
    }
    section#sec2 h1{
        font-size: 2em;
    }
    .carrossel{
        width: 85%;
    }
    .carrossel-slide{
        min-width: 100%;
        text-align: center;
        height: 25em;
    }
    .carrossel-slide img{
        height: 25em;
    }
    .legenda{
        margin-top: 1.3em;
        font-size: 2.5em;
    }
    .carrossel-btn{
        font-size: 4rem;
        padding: 1.6rem 1.1rem;
        border-radius: .5em;
    }
    #sec1{
        padding-bottom: 0;
    }
    .relogio img{
        height: 2.3em;
    }
    .dia, .dia_v, .dia_e{
        font-size: 2.3em;
    }
    .horarios-h{
        gap: .03em;
    }
    .horarios div, .horarios-h div{
        gap: 1em;
    }
    .horario-g{
        gap: 2em;
    }
}

/*máscaras - carnaval*/

.mascara{
    position: absolute;
    top: -140px;
    z-index: 999;
}
.mascara img{
    height: 200px;
}
.masc1{
    animation: mascara 1s ease-in-out infinite alternate;
    float: right;
    right: 0;
    margin-right: 20px;
}
@keyframes mascara {
    0%{
        transform: rotate(-25deg);
    }100%{
        transform: rotate(0deg);
    }
}
@keyframes mascara_x {
    0%{
        transform: rotate(0deg);
    }100%{
        transform: rotate(25deg);
    }
}
.masc2{
    animation: mascara_x 1s ease-in-out infinite alternate;
    float: right;
    left: 0;
    margin-left: 20px;
}
/*o masc 3 é para diferenciar imagens maiores*/
.masc3{
    top: -60px;
}
.masc3 img{
    height: 100px;
}
@media screen and (max-width: 600px) {
    .mascara img{
        height: 100px;
    }
    .masc3 img{
        height: 60px;
    }
    .mascara{
        top: -70px;
        z-index: 999;
    }
    .masc3{
        top: -40px;
    }
}