x* {
  border: 1px solid red;
}

.body {
	-webkit-font-smoothing: antialiased;
}


/* TOP TOP */

.case .top_text {
  width: 94%;
  margin: auto;
}

.h1 {
	font-family: "CormorantGaramond-Regular", Georgia, Arial;
	color: #fff;
	font-size: 24vw;
	line-height: 0.8;
    letter-spacing: -0.02em;
    text-align: left;
}

.outline {
	text-align: right;
	 -webkit-text-stroke: 2px #fff;
	 color: transparent;
}

.hat {
	font-family: Helvetica, Arial;
	font-weight: 300;
	font-size: 2vw;
	line-height: 1;
	color: #fff;
	text-align: center;
	letter-spacing: 0.05em;
	margin-top: 2.5rem;
}

.top {
	width: 100%;
	height: 100vh;
	background-color: #111;
	top: 0;
	position: relative;
}



@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.pelicula_56 { 
	position: absolute;
	z-index: 3;
  	height: 100%;
  	width: 100%;
  	background-color: rgba(24, 24, 24, 0.56);
}

.pelicula_40 { 
	position: absolute;
	z-index: 3;
  	height: 100%;
  	width: 100%;
  	background-color: rgba(24, 24, 24, 0.4);
}

.pelicula_24 { 
	position: absolute;
	z-index: 3;
  	height: 100%;
  	width: 100%;
  	background-color: rgba(24, 24, 24, 0.24);
}

.pelicula_16 { 
	position: absolute;
	z-index: 3;
  	height: 100%;
  	width: 100%;
  	background-color: rgba(24, 24, 24, 0.16);
}

.top_video { 
	z-index: 2;
 	background: no-repeat;
  	transition: 1s opacity;
  	position: absolute; 
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.top_video video {
    min-width: 100%; 
    min-height: 100%;
  	position: relative;
  	left: 50%;
  	transform: translateX(-50%);
  	z-index: 5;
}


.top_video img {
	z-index: 2;
    min-width: 100%; 
    min-height: 100%;
  	position: relative;
  	left: 50%;
  	transform: translateX(-50%);
 } 	

 .preload img{
    position: absolute;
    top: 0;
    z-index: 2;
}




/* CASE */

.content {
	width: 100%;
	background-color: #FFF;
	padding-top: 1rem;
}


/* TEXT TEXT TEXT TEXT TEXT TEXT*/

.text_block {
	position: relative;
	margin: auto;
	width: 80%;
	max-width: 1600px;
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.legenda .text_block {
	width: 96%;
	margin-top: 1rem;
	margin-bottom: 20vh;
	text-align: right;
	max-width: none;
}

.legenda .text {
	font-family: helvetica, arial;
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 2.25rem;
	color: #555;
	text-align: left;
}

.right .text {
	text-align: right;
}


.mega {
	font-family: "CormorantGaramond-Bold", Georgia, Arial;
	color: #fff;
	text-align: left;
	font-size: 30vw;
	line-height: 0.8;
	letter-spacing: -0.02em;
	margin-left: 1vw;
	margin-top: 32vh;
	margin-bottom: -16vh;
 	-webkit-text-stroke: 1px #0333FF;
	opacity: 0;
}


.footer .mega  {
	color: #000;
 	-webkit-text-stroke: 1px #033FFF;
	margin-top: 0;
	padding-top: 20vh;
	margin-bottom: -16vh;
}

.h2 {
	color: #000;
	font-family: "CormorantGaramond-Regular", Georgia, Arial;
	line-height: 1.25;
	margin-bottom: 12vh;
	font-size: 4vw;
	margin-top: -2rem;
	z-index: 1;
}

.brand {
	font-family: "CormorantGaramond-Medium", Georgia, Arial;
	border-bottom: 2px solid #000;
	position: relative;
	text-decoration: none;
	cursor: pointer;
	z-index: 1;
}

/* BRAND HOVERS */

.osklen {
    cursor: url("../img/osklen_hover.png"), auto;
	border-bottom: 2px solid #111;  
}    

.osklen:hover  {
	 color: #0333FF;
	border-bottom: 2px solid #0333FF;
}

.haight {
    cursor: url("../img/haight_hover.png"), auto;
	border-bottom: 2px solid #111;  
}    

.haight:hover  {
	 color: #0333FF;
	border-bottom: 2px solid #0333FF;
}

.gilda {
    cursor: url("../img/gilda_hover.png"), auto;
	border-bottom: 2px solid #111;  
}    

.gilda:hover  {
	 color: #0333FF;
	border-bottom: 2px solid #0333FF;
}

.lenny {
    cursor: url("../img/lenny_hover.png"), auto;
	border-bottom: 2px solid #111;  
}    

.lenny:hover  {
	 color: #0333FF;
	border-bottom: 2px solid #0333FF;
}


.footer .h2 {
	color: #fff;
}

.intertitle {
	font-family: "CormorantGaramond-Bold", Georgia, Arial;
	color: #000;
	text-align: left;
	font-size: 2.4vw;
	line-height: 1.25;
	letter-spacing: 0;
}



.avatar {
	position: absolute;
	top:134vh;
	right: 10vw;
	opacity: 0;
}

.footer .avatar {
	position: absolute;
	top:8vh;
	right: 10vw;
	opacity: 0;
}

.avatar img {
	width: 12vw;
}

.left_column {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	margin-right: 9%;

}

.right_column {
	display: inline-block;
	width: 45%;
	vertical-align: top;|

}

.bold {
	font-family: "Roboto-Bold";
}

.text_hat {
	letter-spacing: 0.02em;
	font-family: "RobotoSlab-Regular";
	font-size: 2rem;
	line-height: 1.25;
	margin-bottom: 1.5rem;
}

.text {
	font-family: helvetica, arial;
	font-weight: 300;
	font-size: 1.375rem;
	line-height: 1.5;
	color: #333;
	text-align: left;
}


.text_bold {
	font-family: helveticabold;
}

.text a {
text-decoration: underline;
color: #000;
}

a:hover {
color: #033FFF;
}

.h2 a {
border-bottom: 1px solid #fff;
color: #fff;
}

.h2 a:hover {
border-bottom: 1px solid #033FFF;
color: #033FFF;
}



/* IMAGE */

.body_img {
	z-index: 5;	
}

.body_img img {
    width:100%;
    margin-bottom: -4px;
}

.media_wrapper {
	position: relative;
	margin: auto;
	width: 80%;
	margin-top: 12vh;
}

.full .media_wrapper {
	width: 100%;
	padding: 0;
}




/* VIDEO */

.body_video {
	position: relative;
   z-index: 5;
}


.body_video video {
    width:100%;
    margin-bottom: -4px;
}

.fallback img {
    display: none;
}

.product {
    position: relative;
}

.product .body_img {
    z-index: 5;
    position: relative;
}


.product .body_video{
	top: 0;
	position: absolute;

	z-index: 2; 
}

.product .fallback{
	top: 0;
	position: absolute;
	z-index: 2; 
}

/* SINGLE MOBILE VIDEO */


.mobile_video .body_video{
	position: absolute;
	z-index: 3;
	top: 12%;
	width: 22.1%;
	left: 38.9%;
}

.full .mobile_video .body_video{
	top: 9.1%;
	width: 22%;
	left: 39.1%;
}

.pocket .mobile_video .body_video{
	left: 54%;
}

.case-study .mobile_video .body_video{
	width: 26.6%;
	left: 36.5%;
	top: 7.9%;
}


.mobile_video .body_img{
	position: relative;
	z-index: 5;	
}


/* EMBED */

.video_embed {
    background-color: #111;
    text-align: center;
}

.media_wrapper_iframe {
	position: relative;
	margin: 0 auto;
    padding-bottom: 56.25%; /* 16:9 */
}

.media_wrapper_iframe iframe {
    position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
 }



/* FOOTER FOOTER FOOTER */

.footer {
  margin-top: 16vh;
  background-color: #000;
  height: 100vh;
  position: relative;
}




/* CENTRALIZAR
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 */




/* TELA 10124 */

@media only screen and (max-width: 1024px) {
   

.left_column {
	display: block;	
	width: 100%;
	margin-bottom: 
}	

.right_column {
display: block;
width: 100%;
}

.intertitle {
font-size: 2rem;
}

.text {
	margin-top: 1.5rem;
}

.hat {
	font-size: 1.25rem;
	margin-left: 0;
}


}



/* MOBILE MOBILE MOBILE MOBILE MOBILE MOBILE*/

@media only screen and (max-width: 768px) {


.mega {
	margin-bottom: -64px;

}


.case .top_text {
  margin: auto;
  width: 85%
}

.title { 
font-size: 20vw;
line-height: 1;
letter-spacing: 0;
}

.outline {
	 -webkit-text-stroke: 1px #fff;
}

.top_video { 
	display: none;
	}
   
.hat {
	font-size: 1rem;
}

.h2 {
	line-height: 1.25;
	margin-bottom: 12vh;
	font-size: 1.5rem;
	margin-top: -2rem;
	z-index: 1;
}

 .intertitle {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-bottom: 0;
  }


  .text_hat {
  	font-size: 1.25rem;
  	margin-bottom: 2.5rem;
  }

  .text {
  	font-size: 1.125rem;
  	line-height: 1.68;
	margin-top: 1rem;
}

 .text_block {
 	width: 88%;
	margin: auto;
	margin-top: 2.5rem;
	}

.h2 {
	margin-bottom: 2.5rem;
	}

.media_wrapper {
	width: 100%;
	margin-top: 2.5rem;
	position: relative;
}

.full .media_wrapper {
	margin-top: 2.5rem;

}

.i1600 .body_img {
	padding: 0;
}

.dark .media_wrapper {
	padding: 2.5rem 0.5rem 2.5rem 0.5rem;
}

.grey .media_wrapper {
	padding: 2.5rem 0 2.5rem 0;
}

.body_video {
    display: none;
}

.mosaic_mobile {
	display: none;
}

.mosaic2 .media_wrapper {
	padding: 0;
}

.row .body_img {
  float: none;
  width: 100%;
  padding: 1rem 0 0 0;
}


.fallback img {
		display: inherit;
		margin-bottom: 4px;
	}

.mobile_video {
	display: none;
}	


.content {
	padding-top: 2.5rem;
}

  }

}