/*   
Theme Name: No Ar Coquetel Molotov 19
Description: Tema para o site do No Ar Coquetel Molotov, edição 19.
Author: Camila Lins
Author URI: http://camilalins.co
Version: 1
*/

@charset "utf-8";

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; *vertical-align:baseline;}
input:focus, textarea:focus, button:focus {outline:0;}
a:hover, a:active {outline:0;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#dbdd86; color:#b8231e; text-shadow:none;}
::selection {background:#dbdd86; color:#b8231e; text-shadow:none;}

::-webkit-input-placeholder {color:#CCC; opacity:1;}
::-moz-placeholder {color:#CCC; opacity:1;}
::placeholder {color:#CCC; opacity:1;}

/* Toolbox */
.hide {display:none !important;}
.flex {display:flex;}

/* Variáveis */
:root {
    --cor-vermelho:#b8231e;
    --cor-amarelo:#dbdd86;
    --cor-mostarda:#cfa113;
}

/* Fontes */
@font-face {font-family:'Grotesk'; src:url('fonts/Grotesk.eot'); src:local('Grotesk'), url('fonts/Grotesk.eot?#iefix') format('embedded-opentype'), url('fonts/Grotesk.woff2') format('woff2'), url('fonts/Grotesk.woff') format('woff'), url('fonts/Grotesk.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face {font-family:'Ribes'; src:url('fonts/Ribes-Black.eot'); src:local('Ribes Black'), local('Ribes-Black'), url('fonts/Ribes-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Ribes-Black.woff2') format('woff2'), url('fonts/Ribes-Black.woff') format('woff'), url('fonts/Ribes-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap;}

/* Preload images */
body:after {display:none;
content: url(img/layout/paint/menu-open-middle.png)
        url(img/layout/paint/menu-open-left.png)
        url(img/layout/paint/menu-open-right.png);}

/* Page style */
html {overscroll-behavior:none; overflow-x:hidden;}
body.blue {background:#21248f url(img/layout/background-blue.jpg) repeat-y top center; background-size:100% auto;}
body.light-blue {background:#8ddbe6 url(img/layout/background-light-blue.jpg) repeat-y top center; background-size:100% auto; color:#000;}
body {font:16px 'Roboto', sans-serif; color:#FFF; background:#b8231e url(img/layout/background.jpg) repeat-y top center; background-size:100% auto; min-height:100vh; overflow-x:hidden;}

a {color:var(--cor-amarelo); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all 150ms ease-out;}
a:hover {color:#FFF;}

.mobile-check {display:none;}

.video-embed {position:relative; width:100%; padding-bottom:56.3%; height:0;}
.video-embed iframe {position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}

.underline {background:url(img/layout/underline.png) repeat-x left bottom;}

/* Geral */
nav {display:flex; flex-wrap:wrap; width:100%; position:fixed; justify-content:space-between; padding:50px 50px 0; font:42px/0.85em 'Grotesk', sans-serif; z-index:999;}
nav .burger {display:block; cursor:pointer; position:relative; color:#FFF;}
nav .burger span {display:block; font-size:45px; font-weight:400; position:relative; z-index:2;}
nav .burger:hover {color:#000;}
nav .burger:after {content:''; background:url(img/layout/paint/menu.png) no-repeat left center; background-size:100%; position:absolute; width:165%; height:165%; top:43%; left:57%; transform:translate(-50%, -50%); pointer-events:none;}
nav .burger:hover:after {background-image:url(img/layout/paint/menu-hover.png);}

nav.opened .burger {display:block;}
nav.opened .burger span {opacity:0;}
nav.opened .burger:before {content:'Fechar'; font-size:34px; position:absolute; z-index:2;}

nav .menu {opacity:0; pointer-events:none; visibility:hidden; height:0; width:100%;}
nav.opened .menu {display:flex; flex-direction:column; align-items:flex-start; width:100%; position:absolute; top:140%; margin-left:35px; opacity:1; pointer-events:all; visibility:visible;}

nav .menu a {transform:translateX(-200%); opacity:0; transition:transform ease-out 250ms;}
nav.opened .menu a {transform:translateX(0); opacity:1;}
nav.opened .menu a:nth-child(1){transition-delay:0ms;}
nav.opened .menu a:nth-child(2){transition-delay:50ms;}
nav.opened .menu a:nth-child(3){transition-delay:100ms;}
nav.opened .menu a:nth-child(4){transition-delay:150ms;}
nav.opened .menu a:nth-child(5){transition-delay:200ms;}
nav.opened .menu a:nth-child(6){transition-delay:250ms;}
nav.opened .menu a:nth-child(7){transition-delay:300ms;}

nav .menu a {padding:28px 0; font-size:50px; font-weight:700; line-height:40px; color:#FFF; background:url(img/layout/paint/menu-open-middle.png) repeat-x 0 9px; position:relative;}
nav .menu a:before {content:''; position:absolute; left:-42px; top:0; bottom:0; width:45px; background:url(img/layout/paint/menu-open-left.png) no-repeat 0 9px; z-index:-1;}
nav .menu a:after {content:''; position:absolute; right:-68px; top:0; bottom:0; width:68px; background:url(img/layout/paint/menu-open-right.png) no-repeat 0 9px; z-index:-1;}
nav .menu a:nth-child(1):before {left:-30px;}
nav .menu a:nth-child(3):before {left:-35px;}
nav .menu a:nth-child(4):before {left:-38px;}
nav .menu a:nth-child(6):before {left:-30px;}

#body nav.opened .menu a:hover {background-image:url(img/layout/paint/menu-open-middle-hover.png); transition-delay:0ms; color:#000;}
nav .menu a:hover:before {background-image:url(img/layout/paint/menu-open-left-hover.png);}
nav .menu a:hover:after {background-image:url(img/layout/paint/menu-open-right-hover.png);}

nav .main-link {position:relative; color:#FFF;}
nav .main-link:hover {color:#000;}
nav .main-link:after {content:''; background:url(img/layout/paint/main-link.png) no-repeat; position:absolute; width:165%; height:165%; top:37%; left:63%; transform:translate(-50%, -50%); pointer-events:none; z-index:-1;}
nav .main-link:hover:after {background-image:url(img/layout/paint/main-link-hover.png);}

/* Footer */
footer {padding:30px 40px 20px; position:relative; z-index:50; font-size:13px; display:flex; flex-wrap:wrap; justify-content:space-between; background:#000;}
footer .regua {width:100%; margin-bottom:15px;}
footer .regua img {width:100%; height:auto;}

footer .flex {justify-content:space-between; width:100%;}
footer .social {display:flex;}
footer .social a {color:var(--cor-amarelo); text-transform:uppercase; padding:0 4px; font-weight:600; font-size:12px;}
footer .social a:after {content:'/'; padding-left:8px; pointer-events:none;}
footer .social a:first-child {padding-left:0;}
footer .social a:last-child {padding-right:0;}
footer .social a:last-child:after {display:none;}
footer .social a:hover {color:#FFF;}

footer .dev {padding:0 0 0 50px; font-size:10px; cursor:default;  color:var(--cor-amarelo);}
footer .dev a {font-weight:700; color:var(--cor-amarelo); text-transform:uppercase;}
footer .dev a:hover {color:#FFF;}

/* Home */
#body.home .main {overflow:hidden; padding-bottom:9%; position:relative;}
#body.home .main .info {position:relative; z-index:50; width:42.35%; left:42.8%; margin-top:19.29%;}
#body.home .main h1 {background:url(img/layout/logo.png) no-repeat; background-size:100%; text-indent:-99999px; width:100%; height:0; padding-bottom:68.23%; transform:scale(1); opacity:1; transition:all 800ms cubic-bezier(0.34, 1.56, 0.64, 1); position:relative;}
#body.home .main h2 {color:var(--cor-amarelo); font-family:'Ribes', sans-serif; text-transform:uppercase; margin-left:22%; margin-top:11%; opacity:1;}
#body.home .main h2 strong {font-size:100px; font-weight:400; letter-spacing:-0.05em; transition:opacity 400ms ease-out; transition-delay:500ms;}
#body.home .main h2 span {font-size:50px; display:block; font-weight:400; letter-spacing:0.1em; margin-left:0.3em; transition:opacity 400ms ease-out; transition-delay:600ms;}

#body.home .main h1:after {content:''; width:40%; height:58%; background:url(img/layout/logo-shine.png) no-repeat center; background-size:100%; position:absolute; top:-24%; right:-18%; pointer-events:none; animation:sparkle 7s linear infinite;}

#body.home .main .background {position:absolute; top:0; left:0; right:0;}
#body.home .main .background img {position:absolute; transition:all 350ms ease-out; opacity:1;}
#body.home .main .background .pavao {width:53.35%; z-index:5; transition-delay:350ms;}
#body.home .main .background .cano-pavao {width:45.64%; margin-top:20.17%; transition-delay:220ms;}
#body.home .main .background .bonequinho1 {width:4.29%; margin-top:39.52%; left:4%; transition-delay:350ms;}
#body.home .main .background .mola1 {width:25.93%; right:0; z-index:1; transition-delay:220ms;}
#body.home .main .background .cano1 {width:14.45%; right:0; margin-top:8%; transition-delay:350ms;}
#body.home .main .background .boias1 {width:12.34%; right:0; margin-top:30%; transition-delay:500ms;}

#body.home .line-up {text-align:center; font:700 50px/80px 'Grotesk', sans-serif; position:relative; z-index:5; letter-spacing:-2px;}
#body.home .line-up p {transition:all 300ms ease-out;}
#body.home .line-up p:nth-child(2) {transition-delay:100ms;}
#body.home .line-up p:nth-child(3) {transition-delay:200ms;}
#body.home .line-up p:nth-child(4) {transition-delay:300ms;}
#body.home .line-up p:nth-child(5) {transition-delay:400ms;}
#body.home .line-up p:nth-child(6) {transition-delay:500ms;}

#body.home .about {max-width:1300px; margin:9% auto; padding:0 50px;}
#body.home .about .video {width:73%; transition:all 300ms ease-out; opacity:1; transition-delay:100ms;}
#body.home .about .text {width:50%; border:2px solid #000; padding:40px 35px; color:#FFF; font-size:24px; font-weight:500; line-height:36px; text-align:justify; margin-top:-30px; z-index:2; position:relative; margin-left:auto; transition:all 300ms ease-out; opacity:1; transition-delay:300ms;}

#body.home .elementos-middle {position:relative; height:1px;}
#body.home .elementos-middle img {position:absolute; transition:all 300ms ease-out; opacity:1;}
#body.home .elementos-middle .boias2 {width:13.23%; margin-top:-31.17%; transition-delay:300ms;}
#body.home .elementos-middle .bolinhas {width:8%; right:12%; margin-top:-39.6%; transition-delay:550ms;}
#body.home .elementos-middle .cano-boias {width:17.75%; right:0; margin-top:-25%; transition-delay:450ms;}

#body.home .elementos-footer {position:relative; height:1px; z-index:60;}
#body.home .elementos-footer .elem {position:absolute; transition:all 300ms ease-out; opacity:1; pointer-events:none;}
#body.home .elementos-footer .mola2 {width:23.29%; bottom:0; z-index:5; transition-delay:300ms;}
#body.home .elementos-footer .antena {width:21.52%; bottom:0; margin-bottom:6.2%; transition-delay:500ms;}
#body.home .elementos-footer .bichinhos {width:16%; right:6.5%; bottom:-35px; margin-top:-25%; transition-delay:600ms; /*animation:bichinhos 6000ms linear infinite;*/}
#body.home .elementos-footer .beam {width:14%; bottom:0; margin-bottom:39%; left:13.5%; transition-delay:850ms;}

/* Home: Inactive state */
#body.home .main.loading h1 {transform:scale(.3); opacity:0;}
#body.home .main.loading h2 strong, #body.home .main.loading h2 span {opacity:0;}

#body.home .main.loading .background img {opacity:0;}
#body.home .main.loading .background .cano-pavao {transform:translateY(-150px);}
#body.home .main.loading .background .pavao {transform:translateY(-100px);}
#body.home .main.loading .background .bonequinho1 {transform:translateY(-60px);}
#body.home .main.loading .background .mola1 {transform:translateY(-100px);}
#body.home .main.loading .background .cano1 {transform:translate(100px, -50px);}
#body.home .main.loading .background .boias1 {transform:translateX(100px);}

#body.home .line-up.inactive p {opacity:0; transform:translateY(-20px);}
#body.home .elementos-middle.inactive img {opacity:0;}
#body.home .elementos-middle.inactive .boias2 {transform:translateX(-50px);}
#body.home .elementos-middle.inactive .cano-boias {transform:translateX(50px);}
#body.home .elementos-middle.inactive .bolinhas {transform:translate(30px, 30px);}

#body.home .about.inactive .video {transform:translateX(-200px); opacity:0;}
#body.home .about.inactive .text {transform:translateX(150px); opacity:0;}

#body.home .elementos-footer.inactive .elem {opacity:0;}
#body.home .elementos-footer.inactive .mola2 {transform:translateY(80px);}
#body.home .elementos-footer.inactive .antena {transform:translate(-80px, 80px);}
#body.home .elementos-footer.inactive .bichinhos {transform:translate(80px, 50px);}
#body.home .elementos-footer.inactive .beam {transform:translate(-30px, 30px);}


/* Internas */
#inner {display:flex; padding:140px 40px 225px; position:relative;}
#inner .aside {max-width:202px; width:16vw; flex-shrink:0; position:fixed; z-index:99;}

#inner .aside h1 a {display:block; width:100%; height:0; padding-bottom:162.5%; background:url(img/layout/logo-vertical.png) no-repeat center top; background-size:100%; text-indent:-99999px; position:relative;}
#inner .aside h1 a:after {content:''; width:60%; height:78%; background:url(img/layout/logo-shine.png) no-repeat center; background-size:100%; position:absolute; top:-36.5%; left:-26%; pointer-events:none; animation:sparkle 7s linear infinite;}

#inner .main {padding-left:250px; padding-right:9vw; flex-grow:1;}
#inner .content {max-width:1200px; margin:0 auto; position:relative; z-index:99;}
#inner .content h2 {font:105px/105px 'Ribes', sans-serif; color:var(--cor-amarelo); text-transform:uppercase; text-align:center; margin-bottom:60px;}

#inner .content h3 {display:flex; justify-content:center; margin-bottom:40px;}
#inner .content h3 span {font:60px/60px 'Grotesk', sans-serif; color:var(--cor-amarelo); display:inline-block; margin:0 auto; background:url(img/layout/paint/menu-open-middle.png) repeat-x 0 9px; position:relative; padding:18px 0;}
#inner .content h3 span:before {content:''; position:absolute; left:-42px; top:0; bottom:0; width:45px; background:url(img/layout/paint/menu-open-left.png) no-repeat 0 9px;}
#inner .content h3 span:after {content:''; position:absolute; right:-68px; top:0; bottom:0; width:68px; background:url(img/layout/paint/menu-open-right.png) no-repeat 0 9px;}

#inner .content .text-box {border:3px solid #000; padding:35px 40px; font-size:24px; line-height:36px; margin-bottom:190px; text-align:justify;}

#inner .elementos .elem {position:absolute; transition:all 300ms ease-out; opacity:1; pointer-events:none;}
#inner .elementos .mola1 {width:25.93%; right:0; top:0; z-index:1; max-width:650px;}
#inner .elementos .canos {width:14.45%; right:0; top:0; margin-top:8%; max-width:400px;}
#inner .elementos .bolhas {width:6%; right:11%; top:0; margin-top:16.8%;}
#inner .elementos .boias-inner {width:10.47%; top:0; margin-top:520px; left:0; max-width:230px;}
#inner .elementos .cobrinha {width:54.3%; bottom:-55px; right:0; max-width:950px; z-index:99;}
#inner .elementos .olhos-inner {width:31%; bottom:0; left:0; max-width:600px;}
#inner .elementos .olhos-animacao {width:15%; bottom:7vw; left:13%; max-width:300px;}

/* O Festival */
#inner.festival .video {width:84%;}
#inner.festival .about {display:flex; align-items:center; margin-bottom:190px;}
#inner.festival .about .text-box {width:58%; margin:-30px 0 0 auto; position:relative; z-index:10;}
#inner.festival .about .button {display:block; margin:0 auto; background:url(img/layout/button-bg.png) no-repeat; background-size:100%; font:700 26px/36px 'Grotesk', sans-serif; letter-spacing:-2px; text-align:center; display:flex; justify-content:center; align-items:center; height:147px; width:337px; padding-right:22px; color:#FFF;}
#inner.festival .about .button:hover {color:#000; background-image:url(img/layout/button-bg-hover.png);}

#inner .text-box p {margin-bottom:35px;}
#inner .text-box p:last-child {margin-bottom:0;}

/* Feira na Laje */
#inner.feira .logos {display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:190px;}
#inner.feira .logos * {width:24%; margin-bottom:1.4%;}

/* Line-up */
#inner.line-up h4 a {display:block; margin:0 10% 35px auto; background:url(img/layout/paint/timetable.png) no-repeat; background-size:100%; font:700 30px/36px 'Grotesk', sans-serif; letter-spacing:-2px; text-align:center; display:flex; justify-content:center; align-items:center; height:125px; width:287px; color:#FFF;}
#inner.line-up h4 a:hover {color:#000; background-image:url(img/layout/paint/timetable-hover.png);}

#inner.line-up .artistas {max-width:940px; margin:0 auto;}
#inner.line-up .artista .left {width:51%; position:relative;}
#inner.line-up .artista .right {width:64.25%; margin:-135px 0 0 auto; position:relative; z-index:5;}
#inner.line-up .artista h3 {margin:0 0 0 25.5%; position:absolute; bottom:101%; font:48px/50px 'Grotesk', sans-serif; letter-spacing:-2px; word-break: break-word;}
#inner.line-up .artista h4 {position:absolute; color:var(--cor-amarelo); font:24px/30px 'Grotesk', sans-serif; width:70%; top:102%; word-break: break-word;}

/* Negócios */
#inner.negocios .aside h1 a {display:block; width:100%; height:0; padding-bottom:52.21%; background:url(img/layout/logo-negocios.png) no-repeat center top; background-size:100%; text-indent:-99999px;}
.inner-nav {margin-top:40px;}
.inner-nav a {display:block; color:var(--cor-amarelo); font-size:24px; line-height:36px; font-weight:500; letter-spacing:2px; text-transform:uppercase; position:relative;}
.inner-nav a:before {content:''; position:absolute; top:50%; margin-top:-12px; left:-30px; width:25px; height:25px; background:url(img/layout/asterisco1.png) no-repeat;}
.inner-nav a:nth-child(2):before {background:url(img/layout/asterisco2.png) no-repeat;}
.inner-nav a:nth-child(3):before {background:url(img/layout/asterisco3.png) no-repeat;}
.inner-nav a:nth-child(5):before {background:url(img/layout/asterisco2.png) no-repeat;}
.inner-nav a:hover {color:#FFF;}

.text-box ul.list li {color:var(--cor-amarelo); font-size:30px; line-height:45px; margin-bottom:40px;}
.text-box ul.list li strong {color:#FFF; font-size:40px; font-weight:500;}
.text-box ul.list li:last-child {margin-bottom:0;}

.form-embed {height:600px;}

#inner.negocios .artista .left {width:26.66%; position:relative;}
#inner.negocios .artista .right {width:80%; margin:-135px 0 0 auto; position:relative; z-index:5;}
#inner.negocios .artista h4 {margin:0 0 0 11%; position:absolute; bottom:102%; font:70px/70px 'Grotesk', sans-serif; letter-spacing:-2px; word-break:break-word;}
#inner.negocios .artista h4 span {color:var(--cor-amarelo); font:500 40px/70px 'Roboto', sans-serif; display:block;}

#inner.negocios .artista a img {transition:all 200ms ease-out;}
#inner.negocios .artista a:hover img {transform:scale(1.1);}

#inner.negocios .pitchings .pitch {display:flex; margin-bottom:50px; }
#inner.negocios .pitchings .pitch img {max-width:215px; margin-right:35px; aspect-ratio:1/1; align-self:center;}
#inner.negocios .pitchings .pitch div {display:flex; justify-content:space-around; flex-direction:column; padding:2.5% 0;}
#inner.negocios .pitchings .pitch p {font-size:40px; font-weight:600; color:var(--cor-amarelo);}
#inner.negocios .pitchings .pitch h4 {font:50px/50px 'Grotesk', sans-serif; letter-spacing:-0.05em;  word-break:break-word;}
#inner.negocios .pitchings .pitch a {font-size:18px; font-weight:600; word-break:break-all;}

/* Belo Jardim */
#inner.belo-jardim .aside h1 a {display:block; width:100%; height:0; padding-bottom:84.80%; background:url(img/layout/logo-belo-jardim.png) no-repeat center top; background-size:100%; text-indent:-99999px;}
#inner.belo-jardim .content h2 {color:var(--cor-mostarda);}

#inner.belo-jardim .text-box ul.list li {color:var(--cor-mostarda);}
#inner.belo-jardim .text-box ul.list li strong {color:#000;}

#inner.belo-jardim .line-up {text-align:center; font:700 50px/80px 'Grotesk', sans-serif; position:relative; z-index:5; letter-spacing:-2px; margin-bottom:11vw;}

/* 404 */
#inner.error404 {min-height:72vh;}
#inner.error404 .main {text-align:center; display:flex; justify-content:center; align-items:center;}
#inner.error404 h3 {margin:0 0 50px; word-break:break-word; font:30px/25px 'Grotesk', sans-serif;}
#inner.error404 a {display:block; text-transform:uppercase; letter-spacing:1px; font-size:20px; font-weight:700;}


/* Animações */
@keyframes bichinhos {
    0% {transform:rotate(0deg);}
    25% {transform:rotate(4deg);}
    75% {transform:rotate(-4deg);}
    100% {transform:rotate(0deg);}
}

@keyframes sparkle {
    0% {transform:rotate(0deg) scale(1);}
    25% {transform:scale(0.7) rotate(90deg);} 
    75% {transform:scale(1.2) rotate(260deg);} 
    100% {transform:rotate(365deg) scale(1);}
}


/* Media Queries*/
@media screen and (min-width:2300px){
    #body.home .elementos-footer .bichinhos {right:10%;}
}
@media screen and (max-width:1820px){
    #body.home .elementos-footer .bichinhos {right:1.5%; width:15%;}
}
@media screen and (max-width:1600px){
    #body.home .elementos-footer .bichinhos {right:0.5%; width:13.5%;}
}
@media screen and (max-width:1500px){
    nav.opened .menu a {font-size:4.2vw;}
    #body.home .main h2 strong {font-size:6.65vw;}
    #body.home .main h2 span {font-size:3.33vw;}
    #body.home .line-up, #inner.belo-jardim .line-up {font-size:3.33vw; line-height:5.4vw;}
}
@media screen and (max-width:1350px){
    #body.home .about .video {width:82%;}
    #body.home .about .text {z-index:99; width:70%;}

    #inner.festival .about .button {width:35%; height:auto; padding:1vw 2vw 1vw 0; font-size:1.95vw; line-height:2.5vw;}
    #inner.festival .about .text-box {width:65%;}

    #inner.negocios .artista .left {width:35%;}
    #inner.negocios .artista .right {margin-top:-12%;}
    #inner.negocios .artista h4 {font-size:60px; line-height:55px; margin-left:21%;}
    #inner.negocios .artista h4 span {font-size:35px;}
}
@media screen and (max-width:1200px){
    #inner .content h2 {font-size:8.8vw; line-height:7vw; margin-bottom:7vw;}
    #inner .content .text-box, #inner.feira .logos {margin-bottom:12vw;}
    #inner .elementos .boias-inner {margin-top:40vw;}
    #inner.negocios .elementos .boias-inner {margin-top:50vw;}

    #inner.festival .about {margin-bottom:12vw;}

    #inner.line-up .artista h3 {font-size:44px; letter-spacing:-4px;}
    #inner.negocios .pitchings .pitch h4 {font-size:44px; letter-spacing:-4px;}
}
@media screen and (max-width:1080px){
    nav {padding:35px 35px 0;}
    nav .burger span {font-size:4.2vw;}
    nav.opened .burger:before {font-size:3vw;}
    nav .main-link {font-size:4vw;}
    nav .main-link:after {background-size:90%; background-position:left 70%;}

    #inner {padding:13vw 35px 23vw;}
    #inner .main {padding-left:calc(16vw + 50px); padding-right:4vw;}
    #inner .content h3 span {font-size:5.5vw; line-height:6vw;}

    #inner.line-up .artista .left, #inner.line-up .artista .left img {width:100%;}
    #inner.line-up .artista .right {width:100%; margin-top:10px;}
    #inner.line-up .artista h3 {position:static; width:100%; margin:0 0 10px; display:block; text-align:center;}
    #inner.line-up .artista h4 {position:static; width:100%; margin:15px 0 0; text-align:center;}

    .inner-nav a {font-size:2.1vw; letter-spacing:1px; line-height:3.5vw;}

    #inner.line-up h4 a {margin:0 auto 8vw;}
}
@media screen and (max-width:950px){
    #inner .content .text-box {font-size:20px; line-height:32px; padding:25px 30px;}
    #inner.feira .logos * {width:32.3%;}

    #inner .content h3 span {background-position:0; font-size:5.2vw; line-height:6vw;}
    #inner .content h3 span:before {background-position:0;}
    #inner .content h3 span:after {background-position:0;}

    .text-box ul.list li {font-size:24px; line-height:38px;}
    .text-box ul.list li strong {font-size:30px;}
}
@media screen and (max-width:850px){
    nav.opened .menu {margin-left:10px; margin-top:-20px;}
    nav.opened .menu a {padding:20px 0; background-position-y:2px;}
    nav.opened .menu a:before, nav.opened .menu a:after {background-position-y:2px;}

    #body.home .about .text {width:82%; font-size:2.9vw; line-height:4.4vw;}

    #inner.festival .about {flex-direction:column;}
    #inner.festival .video {width:100%;}
    #inner.festival .about .button {order:2; width:56%; padding:2.5vw 3vw 2vw 0; font-size:2.95vw; line-height:3.5vw;}
    #inner.festival .about .text-box {order:1; width:100%; margin:35px 0;}

    #inner.negocios .artista h4 {font-size:6.5vw; line-height:6.2vw; letter-spacing:-0.1em;}
    #inner.negocios .artista h4 span {font-size:28px; line-height:50px; letter-spacing:0;}

    #inner.negocios .pitchings .pitch h4 {font-size:5.5vw; line-height:5.8vw; letter-spacing:-0.15em;}
    #inner.negocios .pitchings .pitch p {font-size:28px; line-height:50px;}
    #inner.negocios .pitchings .pitch img {margin-right:20px; width:40%;}
}
@media screen and (max-width:750px){
    footer {padding:30px 30px 20px;}
    footer .flex {flex-wrap:wrap;}
    footer .social {width:100%; justify-content:space-between;}
    footer .dev {margin-left:auto;}

    #inner .content h3 span {font-size:5vw; line-height:6vw;}

    .inner-nav {margin-top:25px;}
    .inner-nav a:before {width:15px; height:15px; left:-20px; margin-top:-7px; background-size:100% !important;}
}
@media screen and (max-width:650px){
    nav {padding:20px 30px 0;}
    nav.opened .menu a {background-size:auto 92%; background-position-y:30%; padding:1.5% 0;}
    nav.opened .menu a:before {left:-22px !important;}
    nav.opened .menu a:before, nav.opened .menu a:after {background-size:auto 92%; background-position-y:30%;}
    #body.home .main h2 {margin-left:10%;}
    #body.home .main h2 strong {font-size:8.35vw;}
    #body.home .main h2 span {font-size:4.2vw;}
    #body.home .about .text {padding:6% 4% 4%; z-index:2;}

    #inner {padding:11.5vw 30px;}

    #inner .content .text-box {font-size:18px; line-height:28px; padding:20px 25px;}
    #inner.feira .logos * {width:49.3%;}

    #inner .content h2 {margin:0 auto 7vw; max-width:70%; font-size:11vw; line-height:10vw; word-break:break-word;}

    #inner.line-up .artista h3 {font-size:6.5vw; line-height:6vw;}
    #inner.line-up .artista h4 {font-size:4vw; line-height:4vw;}

    .text-box ul.list li {font-size:22px; line-height:35px;}
    .text-box ul.list li strong {font-size:26px;}

    #inner.negocios .artista .left {width:100%;}
    #inner.negocios .artista .left img {width:100%;}
    #inner.negocios .artista .right {width:100%; margin-top:15px;}
    #inner.negocios .artista h4 {margin:0 0 15px; text-align:center; position:static; font-size:7.5vw;}

    #inner.belo-jardim .line-up {font-size:6vw; line-height:10vw;}

    #inner.negocios .pitchings .pitch {display:block; text-align:center;}
    #inner.negocios .pitchings .pitch h4 {font-size:6.5vw; line-height:6.8vw; letter-spacing:0;}
    #inner.negocios .pitchings .pitch img {margin:0; width:100%; max-width:100%;}

    #inner.line-up h4 a {font-weight:400; letter-spacing:-4px; font-size:28px; line-height:32px; width:245px; height:108px;}
}
@media screen and (max-width:500px){
    #body.home .about {padding:0 35px;}
    #body.home .about .video {width:86%;}

    footer {padding:25px 25px 20px;}
    footer .social a {font-size:10px;}

    #inner {padding:15vw 20px;}
    #inner .aside {width:15vw;}
    #inner .main {padding:0 0 0 20vw; overflow:hidden;}
    #inner .content .text-box {font-size:18px; line-height:28px; padding:20px 25px;}
    #inner.feira .logos * {width:100%;}

    #inner.negocios .elementos .boias-inner {margin-top:65vw;}

    .inner-nav a {padding:5px 0;}
    .text-box ul.list li {font-size:18px; line-height:24px;}
    .text-box ul.list li strong {font-size:22px;}
}
@media screen and (max-width:400px){
    footer .social a, footer .dev {font-size:8px;}
}


@media screen and (max-height:750px) and (orientation:landscape){
    nav.opened .menu a {margin:-10px 0; padding: 14px 0;}
}

@media screen and (max-height:420px) and (orientation:landscape){
    /*nav.opened .menu a:last-child {display:none;}*/
}