@import "reset.css";
body{ background: #620092; font-family: 'Averia Serif Libre'; font-size: 14px; color: #fff; font-weight: normal; overflow-x: hidden; padding-top: 100px; }
.container{ width: 1400px; margin: 0 auto; position: relative; }
.container-small{ width: 1110px; margin: 0 auto; position: relative; }
.margin{ margin: 0 150px; }
h1, h2, h3{ font-family: 'Pangolin'; font-weight: bold; line-height: 120%; }
.menu-mobile{ display: none; }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.050);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* acessibilidade: respeitar redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

.modal{ background: #000; position: fixed; top: 0; right: 0; width: 100%; height: 100%; display: none;}
.modal .box{ background: #fff; left: 50%; height: 50%; transform: translate(-50%, -50%); font-size: 30px; color: #4c0010; padding: 50px; }

.modal-sucesso{ background: #f00236; position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 9999; }
.modal-sucesso .box{ overflow: hidden; position: absolute; top: 50%; background: #fff; left: 50%; transform: translate(-50%, -50%); text-align: center;width: 400px; border-radius: 30px; color: #4c0010; padding: 70px 80px; display: flex; align-items: center; justify-content: center; }
.modal-sucesso .box h2{ color: #620092; text-transform: uppercase; font-size: 36px; }
.modal-sucesso .box a{font-family: 'Pangolin'; font-weight: bold; background: #620092; color: #fedb60; font-size: 16px; text-transform: uppercase; position: absolute; right: 0; top: 0; padding: 10px 30px; }

.topo{ position: fixed; width: 100%; left: 0; top: 0; background: #620092; padding: 20px 0; z-index: 9999; }
.topo .container{ display: flex; justify-content: space-between; align-items: center;  }
.topo .marca img{ width: 60px; height: auto; animation: spin 7s linear infinite; }
.topo .menu{ display: flex; }
.topo .menu ul{ display: flex; align-items: center; justify-content: center; }
.topo .menu ul li{ margin: 0 40px 0 0; }
.topo .menu ul li a {  color: #fff; text-transform: uppercase; font-family: 'Pangolin'; }
.topo .menu ul li a:hover{ color: #fedb60; }
.topo .menu .catalogo{ display: flex; background: #f00236; padding: 7px 15px; color: #fedb60; text-transform: uppercase; font-family: 'Pangolin'; align-items: center; }
.topo .menu .catalogo:before{ content: ""; background: url(../img/down.png) no-repeat; width: 17px; height: 18px; background-size: 17px 18px; display: block; margin: 0 10px 0 0; }
.topo .menu .catalogo:hover{ transform: scale(1.020); }
.topo .icon-menu{ display: none; }

.banner{ width: 100%; height: auto; background:#fedb60; display:flex; justify-content: center;  }
.banner img{ max-width: 100%; height: auto; display: block; }


.cadastro{  background: #f00236; width: 100%; height: auto; position: relative; padding: 100px 0 0 0;  }
.cadastro:before{ content: ""; background: url(../img/tarja.png) top left repeat-x; width: 100%; height: 10px; display: block; position: absolute; top: -5px; left: 0; }
.cadastro .container-small{ display: flex; justify-content: space-between; align-items: start; }
.cadastro .title{ width: 35%; }
.cadastro .title h1{  color: #fedb60; text-transform: uppercase; font-size: 71px;  }
.cadastro .title .ilustre1{ max-width: 100%; height: auto; margin-top: 80px; }
.cadastro .form{ width: 42%; background: url(../img/bg-form.png) top center no-repeat; background-size: cover; padding: 40px 40px; }
.cadastro .form input{ background: none; width: 100%; border: none; margin-bottom: 20px; padding: 15px 0; text-transform: uppercase; border-bottom: #59028d solid 2px; color: #620092;  font-family: 'Pangolin'; font-weight: bold; font-size: 16px; }
.cadastro .form input::placeholder { color: #620092; }
.cadastro .form .radio{ margin: 20px 0 40px 0; display: flex; align-items: center;  }
.cadastro .form .radio span{ color: #620092; text-transform: uppercase; font-family: 'Pangolin'; font-weight: bold; font-size: 16px; line-height: 130%; width: 100%;  }
.cadastro .form .radio input[type="radio"]{ margin: 0 10px 0 0; width: 20px; height: 20px; }
.cadastro .form .radio input[type="checkbox"]{ margin: 0 10px 0 0; width: 20px; height: 20px; }
.cadastro .form .radio label{ display: flex; align-items: center; margin: 0 0 0 20px; font-family: 'Pangolin'; font-weight: bold; font-size: 16px; color: #620092; text-transform: uppercase; }
.cadastro .form .check{display: flex; align-items: center; width: 100%; }
.cadastro .form .check input[type="checkbox"]{ margin: 0 10px 0 0; width: 32px; height: 32px; }
.cadastro .form .check span{ color: #f00236; font-family: 'Pangolin'; font-weight: bold; font-size: 16px; line-height: 130%; width: 100%;  }
.cadastro .form button{ background: #620092; border: none; transition: .5s; color: #fedb60; text-transform: uppercase; font-family: 'Pangolin'; font-weight: bold; font-size: 20px; padding: 10px 30px;  }
.cadastro .form .flex{ align-items: start; margin: 20px 0 0 0;  justify-content: space-between; }
.cadastro .form button:hover{ background: #f00236; }
.cadastro .politica{background: #f00236; display: block; text-align: center; margin: 0 0 30px 0; border: none; transition: .5s; color: #fedb60; text-transform: uppercase; font-family: 'Pangolin'; font-weight: bold; font-size: 20px; padding: 10px 30px; width: calc(100% - 60px); }
.cadastro .politica:hover{ background: #620092; }


.insta{ background: #f00236; width: 100%; height: auto; position: relative; padding: 100px 0 0 0; }
.insta .container{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
.insta .box{ padding:60px 80px; background: url(../img/bg-insta.png) top center no-repeat; width: 960px; height: 500px; background-size: 100%; }
.insta .box .title{ display: flex; align-items: center; margin-bottom: 10px;  }
.insta .box .title img{ margin: 0 14px 0 0; border-radius: 50px; width: 50px; height: auto; }
.insta .box .title h3{ color: #f00236; text-transform: uppercase; font-size: 14px; font-weight: bold; }
.insta .chinelo{ position: absolute; bottom: 20px; left: 0; }
.insta .sol{ position: absolute; bottom: -160px; right: 0; z-index: 20; }

.artista{ background: #f00236; width: 100%; height: auto; position: relative; padding: 0 0 240px 0; }
.artista .container-small{ display: flex; }
.artista .imagem{ width: 50%; margin: 0 100px 0 0; }
.artista .imagem img{ width: 100%; height: auto; }
.artista .text{ width: 50%; margin-top: 80px; }
.artista .text h2{ color: #fedb60; text-transform: uppercase; font-size: 56px; margin: 0 0 26px 0; }
.artista .text p{ margin: 0 0 26px 0; font-size: 18px; }
.artista .olho{ position: absolute; top: 150px; right: 200px; z-index: 20; }
.artista .coracao{ position: absolute; bottom: 60px; right: 120px; z-index: 20; }
.artista .cadeiras{ width: 200px; height: auto; position: absolute; top: 200px; left: -150px; z-index: 20; }

.exposicao{ background: #eba7cb; width: 100%; height: auto; position: relative; padding: 100px 0; }
.exposicao:before{ content: ""; background: url(../img/tarja1.png) top left repeat-x; width: 100%; height: 10px; display: block; position: absolute; top: -5px; left: 0; }
.exposicao .flex{ display: flex; }
.exposicao .text{ width: 50%; margin-right: 100px; }
.exposicao .text h2{ color: #620092; text-transform: uppercase; font-size: 56px; margin: 0 0 26px 0; }
.exposicao .text p{ margin: 0 0 26px 0; font-size: 18px; color: #4c0010; }
.exposicao .imagem{ width: 50%;  margin-top: -200px; position: relative; z-index: 20; }
.exposicao .imagem img{ width: 100%; height: auto; }
.exposicao .box-image{ position: relative; width: 100%; margin-top: -30px; z-index: 10; display: flex; align-items: center; justify-content: center; }
.exposicao .box-image img{ width: 100%; height: auto; }
.exposicao .flor-maior{ position: absolute; top: -118px; left: 0; }
.exposicao .flor1{ position: absolute; bottom: -120px; right: 0; z-index: 5; width: 300px; height: auto; }

.exposicao .passos{ display: flex; align-items: center; justify-content: center;  margin-top: 50px; }
.exposicao .passos img{ max-width: 100%; height: auto; }

.curadoria{  width: 100%; height: auto; position: relative; padding: 100px 0 0 0; }
.curadoria .flex{ display: flex; position: relative; }
.curadoria .imagem{ width: 50%; margin: 0 100px 0 0; }
.curadoria .imagem img{ width: 100%; height: auto; }
.curadoria .text{ width: 50%; }
.curadoria .text h2{ color: #fedb60; text-transform: uppercase; font-size: 56px; margin: 0 0 26px 0; }
.curadoria .text p{ margin: 0 0 26px 0; font-size: 18px; }
.curadoria .quadro{ width: 160px; height: auto; position: absolute; bottom: -40px; left: -90px; z-index: 20; }
.curadoria .ilustre{ width: 700px; height: auto; position: absolute; bottom: -40px; right: 0; z-index: 20; }

.rodape{ margin-top: 100px; background: url(../img/rodape.png) top center no-repeat; width: 100%; background-size: cover; padding-top: 300px;  }
.rodape .text{ margin: 0 0 30px 0; }
.rodape .text h2{ color: #f00236; text-transform: uppercase; font-size: 65px; margin: 0 0 30px 0; display: flex; align-items: baseline; }
.rodape .text .blocos{ display: flex; }
.rodape .text .blocos p{ line-height: 140%; width: calc(100% / 2 - 100px); font-size: 20px; color: #620092; margin: 0 100px 0 0; font-weight: 900; }
.rodape .bottom{ display: flex; align-items: baseline; justify-content: space-between; padding: 100px 0 50px 0; }
.rodape .bottom .redes{ display: flex; align-items: center; }
.rodape .bottom .redes a{ margin: 0 16px 0 0; }
.rodape .bottom .redes a img{ width: 50px; height: auto; animation: .5s; display: block; }
.rodape .bottom .marca-rodape img{ max-width: 100%; }
.rodape .bottom .marcas{ margin: 0 90px; }
.rodape .bottom .marcas img{ max-width: 100%; }
.rodape .bottom .redes a:hover{ margin-top: -10px; }

.qrcode{ margin-bottom: -200px; }
.qrcode .container-small{ display: flex; align-items: center; justify-content: center; } 
.qrcode img{ max-width: 100%; height: auto; } 

/* Responsivos */
@media (max-width: 1450.98px) { 
    .container{ width: 1200px; } 
    .insta .sol{ width: 150px; }
    .insta .chinelo{ width: 100px; }
    .artista .cadeiras{ width: 100px; top: 370px; left: -50px; }
    .artista .olho{ width: 80px; }
    .artista .coracao{ width: 100px; bottom: 160px; }
    .exposicao .flor-maior{ width: 140px; top: -60px; }
    .exposicao .flor1{ width: 160px; }
    .curadoria .ilustre{ width: 600px; bottom: -70px; }
    .curadoria .text p{ font-size: 16px;  }
}

 @media (max-width: 1199.98px) {
    .container{ width: 90%; }
    .container-small{ width: 90%; }
    .margin{ margin: 0; }
    .insta .box{ width: 90%; padding:10% 5%; height: auto; background-size: 100% 100%; }
    .insta .sol{ bottom: -100px; }
    .insta .box .title{ margin-bottom: 20px; }
    .artista .olho{ top: 150px; right: 30px; }
    .artista .imagem{ margin-right: 50px; }
    .artista .cadeiras{ display: none; }
    .exposicao .box-image{ margin-top: 20px; }
    .curadoria .quadro{ left: -40px; width: 140px; }
    .exposicao .text{ margin-right: 50px; }
    .curadoria .imagem{ margin-right: 50px; }
    .cadastro .container-small{ width: 90%; }
    .cadastro .title h1{ font-size: 59px; }
}

@media (max-width: 991.98px) { 
    
    .topo .marca{ position: relative; z-index: 9999; }
    .topo .marca img{ width: 40px; }
    .topo .icon-menu{ display: block; z-index: 9999; position: relative; cursor: pointer; }
    .topo .icon-menu img{ width: 30px; height: auto; }
    .topo .menu{ display: none; }

    .menu-mobile { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #620092; z-index: 999; padding-top: 100px;  }     
    .menu-mobile ul{ display: flex; align-items: center; justify-content: center; flex-direction: column; }
    .menu-mobile ul li{ margin: 20px 0 20px 0; }
    .menu-mobile ul li a {  color: #fff; text-transform: uppercase; font-family: 'Pangolin'; font-size: 18px; text-align: center; }
    .menu-mobile ul li a:hover{ color: #fedb60; }
    .menu-mobile .catalogo{ display: flex; max-width: 200px; justify-content: center; margin: 0 auto; background: #f00236;  padding: 12px 15px; margin-top: 20px; font-size: 18px; color: #fedb60; text-transform: uppercase; font-family: 'Pangolin'; align-items: center; }
    .menu-mobile .catalogo:before{ content: ""; background: url(../img/down.png) no-repeat; width: 17px; height: 18px; background-size: 17px 18px; display: block; margin: 0 10px 0 0; }
    .insta{ padding-top: 50px; }
    .artista { padding: 50px 0; }
    .artista .container-small{ flex-direction: column; }
    .artista .imagem{ width: 100%; margin: 0 0 0 0; }
    .artista .text{ width: 100%; margin-top: 40px; }
    .artista .olho{  display: none; }
    .artista .coracao{  display: none; }

    .exposicao{ padding: 50px 0; }
    .exposicao .imagem{ margin-top: 0; }
    .exposicao .flor-maior{ display: none; }
    .exposicao .flex{ flex-direction: column; }
    .exposicao .text{ width: 100%; }
    .exposicao .imagem{ width: 100%; }

    .curadoria{ padding: 50px 0; }
    .curadoria .flex{flex-direction: column; }
    .curadoria .imagem{ width: 100%; margin: 0 0 40px 0; }
    .curadoria .text{ width: 100%; margin: 0; }
    .curadoria .quadro{ display: none; }
    .curadoria .ilustre{ width: 100%; bottom: -70px; }

    .qrcode{ margin-bottom: 0; }

    .rodape{background: #fedb60; padding: 50px 0; margin-top: 0; }
    .rodape .text .blocos{ flex-direction: column; }
    .rodape .text .blocos p{ width: 100%; margin: 0 0 20px 0; }
    .rodape .bottom{ padding: 30px 0 0 0; }

    .cadastro{ padding: 50px 0; }
    .cadastro .container-small{ flex-direction: column; }
    .cadastro .title{ width: 100%; }
    .cadastro .title .ilustre1{ max-width: 60%; margin: 20px 0 40px 0; }
    .cadastro .form{ width: calc(100% / 1 - 80px); }
 
}

@media (max-width: 767.98px) { 
    .rodape .bottom{ flex-direction: column; justify-content: center; align-items: center; }
    .rodape .bottom .marcas{ margin: 40px 0; }
    .insta .sol{ display: none; }
    .insta .chinelo{ display: none; }
    .exposicao .flor1{ display: none; }
    .cadastro .form .flex{ flex-direction: column;  }
    .cadastro .form .check{ width: 100%; margin-bottom: 20px; }
    .cadastro .form button{ margin-left: auto; }
    .cadastro .form .radio span{font-size: 12px; }
    .cadastro .form .radio label{ font-size: 11px; }
    .cadastro .form .radio input[type="radio"]{ margin: 0 5px 0 0; }
    .modal-sucesso .box{ width: 50%; }
    .modal-sucesso .box h2{ font-size: 24px; }
}

@media (max-width: 575.98px) { 
    .cadastro .title h1{ font-size: 36px; }
    .exposicao .text h2{ font-size: 36px; }
    .artista .text h2{ font-size: 36px; }
    .curadoria .text h2{ font-size: 36px; }
    .rodape .text h2{ font-size: 36px; }

}