*{margin:0; padding:0;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {overflow-y: scroll;}
body {color:#fff; height:100%; background: #fff;}
body, input, textarea {font-family: 'Kanit', sans-serif;}
img {border:0; }
a {color:inherit; text-decoration:none; width: 100%;}
a:hover {text-decoration:none;}
:focus {outline:0;}

html, #wrapper {height:100%;}

body > #wrapper {height:auto; min-height:100vh; margin:0; font-family: 'Din Pro', sans-serif;}
p { font-style: normal; margin: 0; font-weight: 400; }

img { display: block; width: 100%;}
/* CLEAR FIX*/
.clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
*html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.show{display: block;}
.hide{display: none;}

h2,h3,h4,h5,h6,p {font-weight:bold; margin: 0; padding: 0;}

ul, li {list-style:none; margin: 0;} fieldset {border:0;} textarea {resize:none;}
img { display: block; max-width: 100%; }


#wrapper { background: #FFF;} 

.wrap-loading {width: 100%; height: 100%; top: 0; left: 0; position: fixed; background: rgba(0,0,0,.6) url(../images/loading.svg) center no-repeat; z-index: 10000; display: none;}
.indent { max-width: 90%; width: 1668px; margin: auto; }

#hamburger{display: none;}

.mobile {display: none;}
.desktop {display: block;}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-Bold.eot');
    src: url('./../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Bold.woff2') format('woff2'),
        url('./../fonts/DINPro-Bold.woff') format('woff'),
        url('./../fonts/DINPro-Bold.ttf') format('truetype'),
        url('./../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-BlackItalic.eot');
    src: url('./../fonts/DINPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-BlackItalic.woff2') format('woff2'),
        url('./../fonts/DINPro-BlackItalic.woff') format('woff'),
        url('./../fonts/DINPro-BlackItalic.ttf') format('truetype'),
        url('./../fonts/DINPro-BlackItalic.svg#DINPro-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

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

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro.eot');
    src: url('./../fonts/DINPro.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro.woff2') format('woff2'),
        url('./../fonts/DINPro.woff') format('woff'),
        url('./../fonts/DINPro.ttf') format('truetype'),
        url('./../fonts/DINPro.svg#DINPro') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondBlack';
    src: url('./../fonts/DINPro-CondBlack.eot');
    src: url('./../fonts/DINPro-CondBlack.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondBlack.woff2') format('woff2'),
        url('./../fonts/DINPro-CondBlack.woff') format('woff'),
        url('./../fonts/DINPro-CondBlack.ttf') format('truetype'),
        url('./../fonts/DINPro-CondBlack.svg#DINPro-CondBlack') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-BoldItalic.eot');
    src: url('./../fonts/DINPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-BoldItalic.woff2') format('woff2'),
        url('./../fonts/DINPro-BoldItalic.woff') format('woff'),
        url('./../fonts/DINPro-BoldItalic.ttf') format('truetype'),
        url('./../fonts/DINPro-BoldItalic.svg#DINPro-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-Cond';
    src: url('./../fonts/DINPro-Cond.eot');
    src: url('./../fonts/DINPro-Cond.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Cond.woff2') format('woff2'),
        url('./../fonts/DINPro-Cond.woff') format('woff'),
        url('./../fonts/DINPro-Cond.ttf') format('truetype'),
        url('./../fonts/DINPro-Cond.svg#DINPro-Cond') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondBold';
    src: url('./../fonts/DINPro-CondBold.eot');
    src: url('./../fonts/DINPro-CondBold.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondBold.woff2') format('woff2'),
        url('./../fonts/DINPro-CondBold.woff') format('woff'),
        url('./../fonts/DINPro-CondBold.ttf') format('truetype'),
        url('./../fonts/DINPro-CondBold.svg#DINPro-CondBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-Bold.eot');
    src: url('./../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Bold.woff2') format('woff2'),
        url('./../fonts/DINPro-Bold.woff') format('woff'),
        url('./../fonts/DINPro-Bold.ttf') format('truetype'),
        url('./../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondBlackIta';
    src: url('./../fonts/DINPro-CondBlackIta.eot');
    src: url('./../fonts/DINPro-CondBlackIta.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondBlackIta.woff2') format('woff2'),
        url('./../fonts/DINPro-CondBlackIta.woff') format('woff'),
        url('./../fonts/DINPro-CondBlackIta.ttf') format('truetype'),
        url('./../fonts/DINPro-CondBlackIta.svg#DINPro-CondBlackIta') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondMediIta';
    src: url('./../fonts/DINPro-CondMediIta.eot');
    src: url('./../fonts/DINPro-CondMediIta.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondMediIta.woff2') format('woff2'),
        url('./../fonts/DINPro-CondMediIta.woff') format('woff'),
        url('./../fonts/DINPro-CondMediIta.ttf') format('truetype'),
        url('./../fonts/DINPro-CondMediIta.svg#DINPro-CondMediIta') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondBoldIta';
    src: url('./../fonts/DINPro-CondBoldIta.eot');
    src: url('./../fonts/DINPro-CondBoldIta.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondBoldIta.woff2') format('woff2'),
        url('./../fonts/DINPro-CondBoldIta.woff') format('woff'),
        url('./../fonts/DINPro-CondBoldIta.ttf') format('truetype'),
        url('./../fonts/DINPro-CondBoldIta.svg#DINPro-CondBoldIta') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondIta';
    src: url('./../fonts/DINPro-CondIta.eot');
    src: url('./../fonts/DINPro-CondIta.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondIta.woff2') format('woff2'),
        url('./../fonts/DINPro-CondIta.woff') format('woff'),
        url('./../fonts/DINPro-CondIta.ttf') format('truetype'),
        url('./../fonts/DINPro-CondIta.svg#DINPro-CondIta') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondLightIta';
    src: url('./../fonts/DINPro-CondLightIta.eot');
    src: url('./../fonts/DINPro-CondLightIta.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondLightIta.woff2') format('woff2'),
        url('./../fonts/DINPro-CondLightIta.woff') format('woff'),
        url('./../fonts/DINPro-CondLightIta.ttf') format('truetype'),
        url('./../fonts/DINPro-CondLightIta.svg#DINPro-CondLightIta') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondMedium';
    src: url('./../fonts/DINPro-CondMedium.eot');
    src: url('./../fonts/DINPro-CondMedium.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondMedium.woff2') format('woff2'),
        url('./../fonts/DINPro-CondMedium.woff') format('woff'),
        url('./../fonts/DINPro-CondMedium.ttf') format('truetype'),
        url('./../fonts/DINPro-CondMedium.svg#DINPro-CondMedium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro-CondLight';
    src: url('./../fonts/DINPro-CondLight.eot');
    src: url('./../fonts/DINPro-CondLight.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-CondLight.woff2') format('woff2'),
        url('./../fonts/DINPro-CondLight.woff') format('woff'),
        url('./../fonts/DINPro-CondLight.ttf') format('truetype'),
        url('./../fonts/DINPro-CondLight.svg#DINPro-CondLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-Italic.eot');
    src: url('./../fonts/DINPro-Italic.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Italic.woff2') format('woff2'),
        url('./../fonts/DINPro-Italic.woff') format('woff'),
        url('./../fonts/DINPro-Italic.ttf') format('truetype'),
        url('./../fonts/DINPro-Italic.svg#DINPro-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-LightItalic.eot');
    src: url('./../fonts/DINPro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-LightItalic.woff2') format('woff2'),
        url('./../fonts/DINPro-LightItalic.woff') format('woff'),
        url('./../fonts/DINPro-LightItalic.ttf') format('truetype'),
        url('./../fonts/DINPro-LightItalic.svg#DINPro-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-MediumItalic.eot');
    src: url('./../fonts/DINPro-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-MediumItalic.woff2') format('woff2'),
        url('./../fonts/DINPro-MediumItalic.woff') format('woff'),
        url('./../fonts/DINPro-MediumItalic.ttf') format('truetype'),
        url('./../fonts/DINPro-MediumItalic.svg#DINPro-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('./../fonts/Gotham-Ultra.eot');
    src: url('./../fonts/Gotham-Ultra.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/Gotham-Ultra.woff2') format('woff2'),
        url('./../fonts/Gotham-Ultra.woff') format('woff'),
        url('./../fonts/Gotham-Ultra.ttf') format('truetype'),
        url('./../fonts/Gotham-Ultra.svg#Gotham-Ultra') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-Medium.eot');
    src: url('./../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Medium.woff2') format('woff2'),
        url('./../fonts/DINPro-Medium.woff') format('woff'),
        url('./../fonts/DINPro-Medium.ttf') format('truetype'),
        url('./../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DINPro';
    src: url('./../fonts/DINPro-Light.eot');
    src: url('./../fonts/DINPro-Light.eot?#iefix') format('embedded-opentype'),
        url('./../fonts/DINPro-Light.woff2') format('woff2'),
        url('./../fonts/DINPro-Light.woff') format('woff'),
        url('./../fonts/DINPro-Light.ttf') format('truetype'),
        url('./../fonts/DINPro-Light.svg#DINPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* CSS VARIABLES */
:root {
	--orange: #FF9100;
	--black: #000000;
	--white: #FFF;
}

/* GENERAL STYLES */
h1,
h2 {font-family: 'DINPro-CondBlack', sans-serif; font-weight: 900!important; -webkit-text-stroke: 2px #F09637; color: transparent!important;}
h3,
h4,
h5,
h6 {font-family: 'DINPro', sans-serif; font-weight: bold;}

p {color: var(--black); font-weight: 400; margin-bottom: 0; line-height: 1.3; font-size: clamp(14px, 1.4583333333333333vw, 28px);}
p + p {margin-top: 25px;}
b {font-weight: bold!important;}
mark {background-color: var(--orange); font-weight: bold;}
button {cursor: pointer; box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); outline: none; border: none; transition: 0.2s all;}
button:active {transform: scale(0.98); box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); }
img {max-width: 100%; width: 100%; height: 100%; display: block; height: 100%;}
label.error {font-size: 13px; color: #FF3131; font-weight: 400;}
.bg {background-color: #FFF; padding: 5px 20px; margin-bottom: 25px; width: fit-content; font-size: clamp(22px, 1.6666666666666667vw,32px); font-weight: bold; text-transform: uppercase; color: var(--black)}
html {
    scroll-behavior: smooth;
}
/* HEADER STYLES */
#header {position: absolute; background-color: transparent; width: 100%; max-width: 100%; padding: 85px 0 0; z-index: 99;}
#header .container {display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; max-width: 100%; width: 100%;}
#header .container > div:first-child {max-width: 338px; width: 17.604166666666668vw; height: auto; flex: 1 1 0;}
#header .container > div:nth-child(2) {max-width: 558px; width: 29.0625vw; height: auto; flex: 1 1 0;}
#header .container > nav {max-width: 385px; width: 20.052083333333332vw; flex: 1;}
#header .container > nav ul {display: flex; align-items: center; justify-content: space-between; gap: 1.2916666666666665vw; margin: 0 0 0 0;}
#header .container > nav ul li {cursor: pointer;}
#header .container > nav ul li a {display: block; padding: 10px; transition: all .4s; text-transform: uppercase; font-weight: bold; color: var(--white); font-size: 20px; white-space: nowrap;}
#header .container > nav ul li.active a{background-color: var(--orange);}
#header .container > nav ul li:hover a{background-color: var(--white);}
#header .container > nav ul li:hover a{color: var(--black);}

/* CAROUSEL GALERIA */
#galeria-fotos {display: none; z-index: 999; padding: 0 30px;}
#galeria-fotos.active {background-color: rgba(255,255,255, .85); position: fixed; left: 0; top: 0; width: 100%; max-width: 100%; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; min-height: 100vh; transition: all .4s;}
#galeria-fotos .container {max-width: 1240px; width: 100%; position: relative;}
#galeria-fotos .owl-carousel .owl-stage {padding-left: 0!important;}
#galeria-fotos .owl-carousel .owl-dots {display: flex; align-items: center; gap: 15px; position: absolute; left: 0; bottom: -70px;}
#galeria-fotos .owl-carousel button.owl-dot {width: 25px; height: 10px; background-color: transparent; border: 1px solid var(--orange);}
#galeria-fotos .owl-carousel button.owl-dot.active {background-color: var(--orange);}
#galeria-fotos .owl-carousel .owl-nav {position: absolute; right:  4.166666666666667vw; bottom: -97px;}
#galeria-fotos .owl-carousel .owl-nav button.owl-next {width: 35px; height: 66px; background: url(./../images/next.svg) center center no-repeat; background-size: 100% 100%; box-shadow: none;}
#galeria-fotos .container #close {position: absolute; top: -80px; right: 0; font-size: 50px; color: var(--black);}

/* MAIN CONTENT STYLES */
#content {background: url(./../images/bg-home.svg) #F4F4F4 center center repeat; background-size: 100% auto; overflow-x: hidden;}
#content h2 {font-size: clamp(30px, 7.020833333333334vw, 120px); margin: 0 0 50px; white-space: nowrap;}

/* VIDEO */
#content .video-banner {width: 100%; max-width: 100%; max-height: 100vh; height: 56.25vw; position: relative;}
#content .video-banner video {height: 100%; width: 100%; max-width: 100%; display: block; object-fit: fill;}
#content .video-banner #play {display: none;}
#content .video-banner #play.active {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(128, 128, 128, 0.4)); position: absolute; left: 0; top: 0;}
#content .video-banner #play > div {max-width: 140px; width: 100%; height: auto;}

/* O PROJETO */
#content #projeto {padding: 105px 0 140px;}
#content #projeto h1 {font-size: 0; line-height: 0; color: transparent; margin: 0; width: 0;}
#content #projeto mark {background-color: var(--white); color: var(--black);}
#content #projeto mark.orange {background-color: var(--orange); color: var(--black);}
#content #projeto .container {display: flex; align-items: flex-start; justify-content: center; gap: 38px;}
#content #projeto .container > div:first-child {max-width: 954px; width: 100%;}
#content #projeto .container > div:last-child {max-width: 680px; width: 100%;}

/* TIMELINE */
#content #timeline {padding: 0 0 56px;}
#content #timeline > div:nth-child(2) {height: fit-content; max-width: 1301px; width: 68.22916666666667vw; margin: 0 auto; margin-top: 47px;}
#content #timeline .container {display: flex; align-items: flex-start; justify-content: center; gap: 41px;}
#content #timeline .container > div:first-child {max-width: 496px; width: 25.833333333333332vw; height: auto; max-height: 22.96875vw;}
#content #timeline .container > div:nth-child(2) {display: flex; flex-direction: column; gap: 10px;}
#content #timeline .container > div:nth-child(2) h2,
#content #timeline .container > div:nth-child(2) p {margin: 0;}
#content #timeline .container > div:nth-child(2) p,
#content #timeline .container > div:nth-child(2) .bg{font-size: clamp(14px, 1.2583333333333333vw, 27px); padding: 5px 8px; text-transform: lowercase;}
#content #timeline .container > div:last-child {max-width: 38.28125vw; width: 100%; height: auto; max-height: 22.96875vw;}

/* GRAVAÇÕES */
#content #gravacoes {padding: 0 0 128px;}
#content #gravacoes .container {display: flex; gap: 51px; justify-content: space-between; align-items: flex-end;}
#content #gravacoes .container > div:first-child {max-width: 647px; width: 33.697916666666664vw; height: auto; max-height: 20.260416666666668vw; position: relative;}
#content #gravacoes .container > div:first-child:after {content: ''; display: block; max-width: 419px; width: 21.822916666666668vw; max-height: 331px; height: 17.239583333333332vw; background: url(./../images/140.svg) center center no-repeat; background-size: 100% 100%; position: absolute; right: -9.895833333333334vw; top: -7.8125vw;}
#content #gravacoes .container > div:last-child {max-width: 718px; width: 37.395833333333336vw;}

/* GALERIA DE IMAGENS */
#content #galeria {padding: 0 0 148px;}
#content #galeria .container { display: flex; align-items: center; justify-content: center; gap: 35px;}
#content #galeria .container > div:first-child,
#content #galeria .container > div:last-child {max-width: 601px; width: 100%; height: auto; flex: 1 1 0;}
#content #galeria .container > div:nth-child(2) #carousel {display: flex; cursor: pointer; align-items: center; gap: 28px; color: var(--black); font-weight: 600; font-size: clamp(14px,1.3541666666666667vw,26px); text-transform: uppercase; position: relative; z-index: 2; white-space: nowrap;}
#content #galeria .container > div:nth-child(2) #carousel img {max-width: 92px; width: 100%;}
#content #galeria .container > div:nth-child(2) #carousel::after {content: ''; display: block; width: 100%; height: 50px; background-color: var(--orange); position: absolute; left: -5px; top: 5px; z-index: -1; transition: all .4s;}
#content #galeria .container > div:nth-child(2) #carousel:hover::after {display: none;}

/* SÉRIE */
#content #serie {padding:  0 0 112px;}
#content #serie .container {display: flex; align-items: flex-start; gap: 73px; justify-content: center;}
#content #serie .container > div:first-child {max-width: 637px; width: 100%;}
#content #serie .container > div:first-child h3 {color: var(--black); font-size: clamp();}
#content #serie .container > div:first-child .bg {background-color: var(--orange);}
#content #serie .container > div:first-child a {display: flex; align-items: center; width: fit-content; margin-top: 53px; gap: 10px; color: var(--black); font-weight: 600; font-size: clamp(14px,1.3541666666666667vw,22px); text-transform: uppercase; position: relative; z-index: 2; white-space: nowrap;}
#content #serie .container > div:first-child a img {max-width: 62px; width: 100%;}
#content #serie .container > div:first-child a::after {content: ''; display: block; width: 105%; height: 50px; background-color: var(--orange); position: absolute; left: -5px; top: 5px; z-index: -1; transition: all .4s;}
#content #serie .container > div:first-child a:hover::after {display: none;}

/* CAROUSEL SÉRIE */
#content #serie-carousel {padding: 0 0 198px;}
#content #serie-carousel .container {display: flex; flex-direction: column; gap: 44px;}
#content #serie-carousel .container h5 {color: var(--black); font-size: 18px; text-transform: uppercase; text-align: left; font-weight: 400;}
#content #serie-carousel .container .container-carousel {position: relative; width: 100%;}
#content #serie-carousel .container .container-carousel::after {content: ''; display: block; height: 100%; max-width: 200px; width: 100%;  background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(255,255,255, 1)); position: absolute; top: 0; right: 0; z-index: 2;}
#content #serie-carousel .container .container-carousel.active::after {display: none;}
#content #serie-carousel .container .container-carousel .item .content {display: flex; flex-direction: column; gap: 29px; max-width: 440px; width: 100%;}
#content #serie-carousel .container .container-carousel .item .content > div:first-child {max-width: 440px; width: 100%; height: auto; position: relative;}
#content #serie-carousel .container .container-carousel .item .content > div:first-child::after {content: ''; display: none; width: 62px; height: 62px; background: url(./../images/icon-play.svg) center center no-repeat; background-size: 100% 100%; position: absolute; transform: translateX(-50%); left: 50%; top: 100px; transition: all .4s;}
#content #serie-carousel .container .container-carousel .item .content > div:first-child:hover:after {display: block;}
#content #serie-carousel .container .container-carousel .item .content > div:first-child .after {content: '1'; display: block; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--orange); color: var(--black); font-size: 29px; font-weight: bold; position: absolute; left: 0; bottom: -20px;}
#content #serie-carousel .container .container-carousel .item .content > div:last-child h6 {font-size: clamp(22px, 1.3541666666666667vw, 26px); color: var(--black); font-weight: bold; margin-bottom: 30px;}
#content #serie-carousel .container .container-carousel .item .content > div:last-child p {font-size: clamp(16px, 1.1458333333333333vw, 22px);}
#content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-next {position: absolute; top: -70px; right: 6.489583vw; width: 38px; height: 44px; background: url(./../images/next.svg) center center no-repeat; background-size: 100% 100%; box-shadow: none;}
#content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-prev {position: absolute; top: -70px; right: 20.489583333333332vw; width: 38px; height: 44px; background: url(./../images/next.svg) center center no-repeat; background-size: 100% 100%; box-shadow: none; transform: rotate(180deg);}
#content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-next.disabled, 
#content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-prev.disabled{opacity: .2;}


/* CAROUSEL SÉRIE SECOND */
#content #lancamento-carousel {padding: 0 0 108px;}
#content #lancamento-carousel .container {display: flex; align-items: center; flex-direction: row; justify-content: center; gap: 86px;}
#content #lancamento-carousel .container .container-carousel {max-width: 1018px; width: 100%; flex: 1 1 0;}
#content #lancamento-carousel .container .container-carousel .owl-item,
#content #lancamento-carousel .container .container-carousel .item,
#content #lancamento-carousel .container .container-carousel .item > div {max-width: 486px; width: 100%; height: 100%; flex: 1;} 
#content #lancamento-carousel .container > div:last-child {max-width: 542px; width: 100%;}
#content #lancamento-carousel .container > div:last-child b {font-weight: 600!important;}
#content #lancamento-carousel .container .owl-carousel .owl-dots {position: absolute; transform: translateX(-50%); left: 50%; bottom: -41px;display: flex; align-items: center;}
#content #lancamento-carousel .container .owl-carousel button.owl-dot {width: 50px; height: 10px; border: 1px solid var(--orange); background-color: transparent; box-shadow: none;}
#content #lancamento-carousel .container .owl-carousel button.owl-dot.active {background-color: var(--orange);}

/* REPERCUSSÃO */
#content #repercussao {padding: 0 0 110px;}
#content #repercussao .container {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 56px;}
#content #repercussao .container > div:nth-child(2) {max-width: 1665px; width: 100%;}
#content #repercussao .container > div:last-child {width: 100%; display: flex; align-items: center; justify-content: center; gap: 49px; transform: translateY(-70px);}
#content #repercussao .container > div:last-child > div:first-child {max-width: 716px; width: 100%; height: auto;}
#content #repercussao .container > div:last-child > div:last-child {max-width: 827px; width: 100%; height: auto;}


/* INFOS */
#content #analytics {padding: 0 0 129px;}
#content #analytics .container {display: flex; align-items: center; justify-content: center;}
#content #analytics .container > div:nth-child(2) {margin: 0 28px 0 47px;}

/* AÇÕES */
#content #acoes {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 74px; position: relative; z-index: 2;}
#content #acoes::after {content: ''; display: block; width: 93.48958333333333vw; height: 97.5vw; position: absolute; top: 0; left: -48.177083333333336vw; background: url(./../images/mapa.svg) center center no-repeat; background-size: 100% 100%; z-index: -1;}
#content #acoes .container {display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 100%;}
#content #acoes .container > div picture {display: block;}
#content #acoes .container > div picture:first-child {max-width: 1528px; width: 79.58333333333333vw; height: auto;}
#content #acoes .container > div picture:nth-child(2) {max-width: 994px; width: 51.770833333333336vw; height: auto; margin: 120px 0 60px auto;}
#content #acoes .container > div picture:last-child {max-width: 1321px; width: 68.80208333333333vw; height: auto; margin: 0 auto;}


/* HOSPITAL */
#content #hospital {transform: translateY(-75px);}
#content #hospital mark {background-color: var(--white); color: var(--black); font-weight: 400;}
#content #hospital .container {display: flex; justify-content: center; gap: 62px;}
#content #hospital .container > div:first-child {max-width: 766px; width: 39.895833333333336vw; max-height: 723px; height: 37.65625vw; position: relative;}
#content #hospital .container > div:first-child a {text-transform: uppercase; text-align: center; font-size: 22px; position: absolute; bottom: 8.322916666666666vw; right: 3.8541666666666665vw; transition: all .4s;}
#content #hospital .container > div:first-child .bg {background-color: var(--orange);}
#content #hospital .container > div:first-child .bg:hover {background-color: var(--white);}
#content #hospital .container > div:last-child {max-width: 794px; width: 41.354166666666664vw; padding-top: 240px;}
#content #hospital .container > div:last-child .bg {background: var(--orange);}


/* FOOTER */
#footer {background: url(./../images/bg-home.svg) #F4F4F4 center center; background-size: 100% 100%;}
#footer > div:first-child {width: 100%; height: 8px; background-color: #004F92;}
#footer .container {display: flex; align-items: flex-start; justify-content: space-between; gap: 50px;  padding: 38px 0;}
#footer .container > div:first-child {display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; max-width: 1105px; width: 100%;}
#footer .container > div:first-child .box {display: flex; flex-direction: column; gap: 28px;} 
#footer .container > div:first-child .box:first-child {gap: 16px;} 
#footer .container > div:first-child .box h6 {text-transform: uppercase; color: #898B8E; text-align: left; font-weight: 400; font-size: 14px;}
#footer .container > div:first-child .box > div {display: flex; align-items: center; justify-content: flex-start; gap: 65px;}
#footer .container .social-medias {display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 42px; max-width: 215px; width: 100%; flex: 1;}
#footer .container .social-medias > div {display: flex; align-items: center; justify-content: space-between; gap: 50px; width: 100%; max-width: 100%;}
#footer .container .social-medias > div > a {max-width: 32px; max-height: 31px; width: 100%; height: auto; display: block; white-space: nowrap;}
#footer .container .social-medias > div > a img {width: auto; height: auto;}
#footer .container .social-medias > div:last-child {gap: 8px; justify-content: center;}
#footer .container .social-medias > div:last-child a {max-width: fit-content; max-height: fit-content; text-decoration: underline;}
#footer .container .social-medias > div:last-child a, 
#footer .container .social-medias > div:last-child span{color: #898B8E; font-size: 14px;}


/* BREAKPOINTS */ 

@media(max-width: 1500px) {
    /* CAROUSEL PRÉ-LANÇAMENTO */
    #content #lancamento-carousel .container .container-carousel {max-width: 620px; width: 100%;}
    #content #lancamento-carousel .container .container-carousel .owl-item,
    #content #lancamento-carousel .container .container-carousel .item,
    #content #lancamento-carousel .container .container-carousel .item > div {max-width: 286px; width: 100%; height: 100%;} 
}

@media(max-width: 1300px) {
    /* HEADER */
    #header .container {gap: 20px;}
    #header .container > div:first-child {max-width: 180px;}
    #header .container > div:nth-child(2) {max-width: 220px;}
    #header .container > nav {max-width: 280px;}
    #header .container > nav ul {gap: 10px;}
    #header .container > nav ul li a {font-size: 14px;}
}

@media(max-width: 1150px) {
    #content h2 {margin:  0 0 10px;}

    /* VIDEO BANNER */
    #content .video-banner video {object-position: center -50px;}

    /* O PROJETO */
    #content #projeto .container {flex-direction: column; align-items: center; gap: 25px;}
    #content #projeto .container > div:first-child h2 {font-size: 45px;}
    #content #projeto .container > div:first-child p {font-size: 18px;}

    /* GALERIA */
    #content #galeria .container {gap: 20px;}
    #content #galeria .container > div:nth-child(2) #carousel img {max-width: 62px;}
    #content #galeria .container > div:nth-child(2) #carousel::after {width: 105%; top: 7px; height: 30px;}

    /* CAROUSEL PRÉ-LANÇAMENTO */
    #content #lancamento-carousel .container {flex-direction: column;}
    #content #lancamento-carousel .container .container-carousel {max-width: 100%;}
    #content #lancamento-carousel .container > div:last-child {max-width: 100%;}
    #content #lancamento-carousel .container .container-carousel .owl-item,
    #content #lancamento-carousel .container .container-carousel .item  {max-width: unset; width: auto; height: auto;} 
    #content #lancamento-carousel .container .container-carousel .item > div {max-width: 475px; width: 100%; height: 100%;} 

    /* FOOTER */
    #footer .container {flex-direction: column;}
    #footer .container > div:first-child {flex-direction: column;}
    #footer .container .social-medias {max-width: 100%;}
    #footer .container .social-medias > div {justify-content: center;}
}

@media(max-width: 800px) {
    .mobile {display: block;}
    .desktop {display: none;}
    /* HEADER */
    #header {background: url(./../images/bg-home.svg) #F4F4F4 center center; background-size: 100% 100%; padding: 28px 0 21px; position: inherit;}
    #header .container {flex-direction: column; align-items: center; justify-content: center; gap: 35px; position: relative;}
    #header .container::before {content: ''; display: block; background: url(./../images/retratos_pandemia_mobile.svg) center center no-repeat; background-size: 100% 100%; width: 250px; height: 78px; position: absolute; bottom: -130px; transform: translateX(-50%); left: 50%; z-index: 5;}

    #header .container > div:first-child {max-width: 264px; width: 100%;}
    #header .container > div:nth-child(2) {display: none;}
    #header .container > nav {max-width: 100%; width: 100%;}
    #header .container > nav ul {justify-content: center; gap: 36px;}
    #header .container > nav ul li a {color: var(--black); white-space: nowrap;}
    #header .container > nav ul li.active a {color: var(--white);}
    #header .container > nav ul li.active:hover a {color: var(--black);}

    /* GALERIA FOTOS */
    #galeria-fotos .owl-carousel .owl-nav {bottom: -82px;}
    #galeria-fotos .owl-carousel .owl-nav button.owl-next {width: 25px; height: 35px;}
    #galeria-fotos .owl-carousel .owl-dots {gap: 8px;}
    #galeria-fotos .owl-carousel button.owl-dot {width: 15px;}
    #galeria-fotos .container #close {top: -45px; font-size: 25px;}

    /* VIDEO BANNER */
    #content .video-banner {position: relative; max-height: 100vh; min-height: 100vh;}
    #content .video-banner video {object-fit: cover; position: relative;}
    #content .video-banner::before {content: 'Portraits of a Pandemic Series – The front lines of the fight against COVID-19'; display: none; width: 100%; max-width: 100%; padding: 5px 10px; background: var(--white); color: #2B2E34; font-size: 14px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 56px; z-index: 5; text-align: center;}
    #content .video-banner.active::before {display: block;} 
    #content .video-banner::after {content: ''; display: block; background: url(./../images/vire-o-celular.svg) var(--orange) center center no-repeat; background-size: 196px 33px; position: absolute; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 56px;}

    /* O PROJETO */
    #content #projeto {padding: 30px 0;}

    /* TIMELINE */
    #content #timeline {padding: 0 0 95px;}
    #content #timeline .container {gap: 25px;}
    #content #timeline .container > div:last-child {display: none;}
    #content #timeline .container > div:first-child {width: 100%; max-height: fit-content;}
    #content #timeline .container > div:nth-child(2) h2 {font-size: clamp(45px, 19.375vw, 155px); line-height: .9;}

    /* GRAVAÇOES */
    #content #gravacoes {padding: 0 0 45px;}
    #content #gravacoes .container {flex-direction: column; align-items: center; justify-content: center; gap: 40px;}
    #content #gravacoes .container > div:first-child {max-width: 279px; width: 100%; max-height: fit-content;}
    #content #gravacoes .container > div:last-child {max-width: 100%; width: 100%;}
    #content #gravacoes .container > div:first-child:after {max-width: 191px; width: 23.875vw; max-height: 184px; height: 23vw; right: -10.875vw; top: -11.25vw;}

    /* GALERIA */
    #content #galeria {padding: 0 0 60px;}
    #content #galeria .container {flex-direction: column;}
    #content #galeria .container > div:last-child {display: none;}
    #content #galeria .container > div:nth-child(2) #carousel {font-size: 24px; gap: 25px;}

    /* A SÉRIE */
    #content #serie {padding: 0 0 56px;}
    #content #serie .container {flex-direction: column-reverse; align-items: center; gap: 46px;}
    #content #serie .container > div:first-child {max-width: 1005;}
    #content #serie .container > div:first-child a {font-size: 22px; margin: 53px auto 0;}
    #content #serie .container > div:first-child a::after {height: 45px; top: 9px;}

    #content #lancamento-carousel {padding: 0 0 58px;}
    #content #serie-carousel {padding: 0 0 50px;}
    #content #serie-carousel .container .container-carousel {width: 100%;}
    #content #serie-carousel .container .container-carousel::after {max-width: 80px; right: 0;}

    
    /* CAROUSEL PRÉ-LANÇAMENTO */
    #content #lancamento-carousel .container .container-carousel .item > div {margin: 0 auto;} 

    /* REPERCUSSÃO */
    #content #repercussao {padding: 0 0 30px;}
    #content #repercussao .container {gap: 45px;}
    #content #repercussao .container > div:last-child {flex-direction: column; gap: 27px; transform: translateY(0);}

    /* ANALYTICS */
    #content #analytics {padding: 0 0 55px;}
    #content #analytics .container {flex-direction: column; gap: 25px;}
    #content #analytics .container > div:nth-child(2) {margin: 0;}

    /* AÇÕES */
    #content #acoes::after {content: ''; display: block; width: 116.25vw; height: 118.5vw; position: absolute; top: 410px; left: -34.375vw; background: url(./../images/mapa.svg) center center no-repeat; background-size: 100% 100%; z-index: -1;}
    #content #acoes .container > div picture:first-child {width: 100%;}
    #content #acoes .container > div picture:nth-child(2) {margin: 265px 0 30px auto; width: 100%;}
    #content #acoes .container > div picture:last-child {width: 100%;}

    /* HOSPITAL */
    #content #hospital {transform: translateY(0); padding: 30px 0 75px;}
    #content #hospital .container {flex-direction: column; gap: 30px;}
    #content #hospital .container > div:first-child {width: 100%; height: auto;}
    #content #hospital .container > div:first-child a {margin-bottom: 0; font-size: 12px; bottom: 22vw; right: 17px;}
    #content #hospital .container > div:last-child {padding-top: 0; width: 100%;}

}

@media(max-width: 475px) {
    /* GALERIA */
    #content #galeria .container > div:nth-child(2) #carousel {font-size: 16px; gap: 15px;}
    #galeria-fotos .owl-carousel .owl-dots {gap: 5px;}
    #galeria-fotos .owl-carousel button.owl-dot {width: 10px;}
}

@media(max-width: 375px) {
    /* HEADER */
    #header .container > nav ul {gap: 15px;}

    .bg {font-size: 18px; padding: 5px 15px;}

    /* GRAVAÇOES */
    #content #gravacoes .container > div:first-child:after {max-width: 141px; width: 100%; max-height: 134px; height: 134px; right: 0; top: -90px;}

    /* A SÉRIE */
    #content #serie .container > div:first-child a {font-size: 16px;}
    #content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-next {right: 0; width: 28px; height: 34px;}
    #content #serie-carousel .container .container-carousel .owl-carousel .owl-nav button.owl-prev {right: 45px; width: 28px; height: 34px;}

     /* AÇÕES */
     #content #acoes::after {top: 390px;}

     /* HOSPITAL */
     #content #hospital .container > div:first-child a {bottom: 60px;}
     #content #hospital .container > div:last-child .bg 
   
}