/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap');
/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900
*/
.orbitron-<uniquifier> {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
*/
.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* reset */
*{margin:0; padding:0; border:0;}

	#btnTrigger{
		display:none;
		text-align: right;
		color:#fff;
		text-decoration: none;
	}

body{
	background: #000;
	font-size:10px;
}

h1, p, ul li a{
	color:#fff;
	font-weight: 200;
}

h1, h2{
    font-family: "Orbitron", sans-serif;
	color:#fff;
}

h1{
    font-size: 4.5em;
    margin: 1em 0 .5em 0;
}

h2{
	font-size: 4em;
	font-weight: 100;
}

p, li a{
	font-size:1.6em;
	font-family: "Montserrat", sans-serif;
}

.content p{
    margin: 1em 0;
    line-height: 1.5em;
    letter-spacing: .02em;
}

a.light-btn{
	color: #000;
    text-decoration: none;
    border: solid 2px #000;
    border-radius: 2em;
    padding: 1em 5em;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .8em;
	transition: 0.3s;
}

a.light-btn:hover{
	background-color:#000;
	color:#fff;
}

a.dark-btn{
	color: #fff;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 2em;
    padding: 1em 5em;
    font-weight: 500;
    text-transform: uppercase;
    font-size: .8em;
	transition: 0.3s;
}

a.dark-btn:hover{
	background-color:#fff;
	color:#000;
}



hr{
    display: block;
    clear: both;
    margin: 7em 0;
    border-top: solid 1px #fff;
    opacity: .2;
    float: left;
    width: 100%;
}


.headerH1{
	margin:30vh 0;
}


/* section */

section.content{
	background-size: cover;
	padding: 10em 0;
}

section.glitch-video{
    background: url(../img/glitch-video-compressed.gif) fixed;

}

section.light-parallax{
    background: url("../img/bgwhite.png") fixed;
	text-align: center;
}

section.light-parallax h1{
	color:#000;
}





/* container */

.container{
	display:table;
	width:80%;
	margin:0 auto;
}

.container.level2{
	width:40%;
}



/* col */

.col-2, .col-1-3, .col-2-3{
	display:table;
	float:left;
}

.col-2{
	width:50%;
}

.col-1-3{
	width:33%;
}

.col-2-3{
	width: 66%;
}







/* nav */

#navBar{
    display: table;
    width: 100%;
    position: fixed;
    background: #000;
    z-index: 1;}

.logo{
	display:block; 
	float:left;
	width:150px;
	height: auto;
}

nav.menu{
	display:block;
}

nav.menu ul{
	text-align: center;
	padding-top: 3em;
}

nav.menu li{
	display:inline;
	margin:2em 1%;
}

nav.menu li a{
    padding: .5em .5%;
    display: inline-block;
	text-transform: capitalize;
	text-decoration: none;
}

nav.menu li.lang a{
	text-transform: uppercase;
}

nav.menu li.active a{
	font-weight: 600;
	color:#39ca4e;
}


li.lang a{
	opacity:.5;
	font-weight: 600;
}



/* banner */


#banner{
	height: 770px;
    overflow: hidden;
    width: 100%;
}

.videoBanner{
	opacity:.5;
	display:block;
}

span.contentVideoOverlay{
	display:block;
	margin-top:-970px;
    text-align: center;
    position: relative;
    z-index: 0;
}

.logoBanner{
	width: 700px;
}

span.contentVideoOverlay span{
    display: block;
	margin-top: -100px;
    font-size: 1.2em;
    letter-spacing: .2em;
}







.videoCases{

}

.videoCase{
	width: 300px;
}

.videoCase2{
	width: 100%;
}



.servicos{
	width: 800px;
}



.casting{
	text-align: center;
}

.thumbs{
	padding:2em;
}

.thumbs img{
	height:400px;
	margin:1em;
}


.marcas{
	display: table;
	width:100%;
}

.marcas img{
	width:150px;
	margin:.7em;
}



.castingSection p{
	margin-top: 0;
}

.casesSection video.videoCase, .casesSection div img{
	width:100%;
}

.casesSection .brand{
	width:50%;
}

.casesSection h2, .casesSection p{
	margin:20px;
}



#footer{
	background-color: #fff;
	text-align: center;
	padding:5em 0;
}

.logoFooter{
	width:400px;
}

#footer p{
    color: #000;
    font-size: 1.4em;
    font-weight: 400;	
}