/* Most of these styles could be removed but are for the demo to look better */


* {
  box-sizing: border-box;
}

:root {
  --red: #aa1665;
  --black: #19020e;
  --white: #fff;
}

img {max-width:100vw;}

@font-face {
    font-family: 'Centra No2';
    src: url('../fonts/CentraNo2-Hairline.woff2') format('woff2'),
        url('../fonts/CentraNo2-Hairline.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Centra No2 Thin';
    src: url('../fonts/CentraNo2-Thin.woff2') format('woff2'),
        url('../fonts/CentraNo2-Thin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
   
}

body {
	height: calc(var(--vh, 1vh) * 100);
	background-color: var(--black);
	overflow: hidden;
	visibility:hidden;
	font-family: "Centra No2", sans-serif !important;
	color: var(--red);
	scroll-behavior: smooth;
}

a {font-family: 'Centra No2';}

#maincontainner {scroll-snap-type: y mandatory;overflow-y: scroll;height: calc(var(--vh, 1vh) * 100);scroll-behavior: smooth;scroll-snap-stop: always;scroll-snap-align: start;}

.pulse {
  -webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
}

.pulseheavy {
    -webkit-animation: glowheavy 2s ease-in-out infinite alternate;
    -moz-animation: glowheavy 2s ease-in-out infinite alternate;
    animation: glowheavy 2s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {text-shadow: 0px 0px 5px var(--red),0px 0px 10px var(--red)}
  to {text-shadow: 0px 0px 10px var(--red),0px 0px 15px var(--red)}
}

@-webkit-keyframes glowheavy {
    from {text-shadow: var(--red) 0px 0px 5px, var(--red) 0px 0px 10px, var(--red) 0px 0px 15px, var(--red) 0px 0px 20px, var(--red) 0px 0px 30px, #FF2D95 0px 0px 40px;}
    to {text-shadow: var(--red) 0px 0px 5px, var(--red) 0px 0px 10px}
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}


@keyframes arrowbounce_up {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-10px);}
	60% {transform: translateY(-5px);}
}

@keyframes arrowbounce_down {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(10px);}
	60% {transform: translateY(5px);}
}


h1 {font-size:8vw;text-transform:uppercase;font-weight:500;margin:0px 0px 30px;}
.cheers h1 {font-size:5.2vw;text-transform:uppercase;font-weight:500;margin:0px 0px 30px;opacity:0;width: 100%;text-align: center;}
h2 {font-size:3vw;text-transform:uppercase;font-weight:500;margin:0px;text-align:center;}
h2 span {font-size:2vw;}
h3 {font-size:3vw;text-shadow: 2px 2px 10px var(--red);}
h3 span {font-size:2vw;}

.subheaders {position:relative;text-align:center;width:100%;margin:30px 0px 0px;}
.subheader1 {position:absolute;top:50%; left:50%; transform:translate(-50%, -50%);width:100%;}
.subheader2 {width:100%;letter-spacing:2px;}

.close {width:36px;position:absolute;z-index:99999;cursor:pointer;line-height:0px;}
.reelvideo .close {top:-60px;right:-5px;}
.cheers .close {opacity:0;top: 36%;transform: translateY(-50%);right:0px;-webkit-animation: 4.25s ease 0s normal forwards 1 fadein;animation: 4.25s ease 0s normal forwards 1 fadein;}
.people .close {top:-30px;right:0px;}

.class_arrow {transition:all 0.5s ease-out;}
.class_arrow:hover {cursor:pointer;opacity:0.5;}
.arrow_up {animation: arrowbounce_up 2s ease infinite;}
.arrow_down {animation: arrowbounce_down 2s ease infinite;}

#downarrow {width:20px;height:auto;position:absolute;bottom:50px;cursor:pointer; z-index:999;}
#downarrow #path1586 {fill:var(--red);}
.email #env {fill:var(--red);}
.email {width:50px;position:absolute;top:50px;right:50px;z-index:999;cursor:pointer;line-height:0px;}
.reel {width:50px;position:absolute;top:50px;left:50px;z-index:999;cursor:pointer;line-height:0px;}
.about {width:50px;position:absolute;top:50px;left:calc(50% - 25px);z-index:999;cursor:pointer;line-height:0px;}

.close svg,.email svg,.reel svg,.about svg { filter: drop-shadow(0px 0px 5px rgb(170 32 103 / 0.75));}
.close:hover svg,.email:hover svg,.reel:hover svg,.about:hover svg { filter: drop-shadow(0px 0px 0px rgb(170 32 103 / 0.666));}

.martini {width:30% !important;height:auto;max-width:300px;}
.pencils {width:70% !important;height:auto;max-width:500px;position:absolute;top:50%; left:50%; transform:translate(-50%, -50%);}

.content {text-align:center;position:absolute;top:50%; 
    left:50%; 
    transform:translate(-50%, -50%);
	width:80%;}
	
	
	#reelvideoscarousel .owl-prev,#reelvideoscarousel .owl-next,#reelvideoscarousel2 .owl-prev,#reelvideoscarousel2 .owl-next {display:none;}
	
	#reelvideoscarousel. .owl-dots,#reelvideoscarousel2 .owl-dots {
	       bottom: calc(50% - 300px);}
		   
		   .subvideo {}
	
	#reelvideoscarousel .owl-item {}


@-webkit-keyframes borderglow {
  from {box-shadow: 0 0 20px var(--red),inset 0 0 20px var(--red);}
  to {box-shadow: 0 0 10px var(--red),inset 0 0 10px var(--red);}
}


.cheers {
  height:  calc(var(--vh, 1vh) * 100 - 170px);
  overflow:hidden;
  display:flex;
  align-items: center;
   justify-content: center;
}

#cheers2,#cheers3,#cheers13,#cheers14 {display:none;}
.cheers h1{height:calc((var(--vh, 1vh) * 100 - 170px)/9);line-height:calc((var(--vh, 1vh) * 100 - 170px)/9);;margin:0px;padding:0px;}

.box {
  height:  calc(var(--vh, 1vh) * 100 - 50px);
  width:  calc(100% - 50px);
  display: block;
 background:none;
 border: var(--red) solid 1px;
 box-shadow: 0 0 10px var(--red),inset 0 0 10px var(--red);
 -webkit-animation: borderglow 2s ease-in-out infinite alternate;
 -moz-animation: borderglow 2s ease-in-out infinite alternate;
 animation: borderglow 2s ease-in-out infinite alternate;
 position:absolute;
 z-index:1;
}

.people {
	width:  calc(var(--vw, 1vw) * 100 - 170px);
  height:  calc(var(--bw) - 170px);
  display:flex;
  align-items: center;
   justify-content: center;
   opacity:0;
   position:absolute;
   z-index:9;
   text-align:left;
}

.people h2{
font-size: 4vw;
    text-shadow: 2px 2px 10px var(--red);
	display: inline;
	    margin-right: 20px;
		font-style: italic;
}

.people h3{
display: inline;
font-size: 2.5vw;
}

.people h4{
background: #be5b8e none repeat scroll 0 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #0e0011;
display: inline;
 font-family: 'Centra No2 Thin';
font-size: 1.8vw;
line-height: 1.4;
padding: 0 7px;
}

.people .spacer {height:65px;}
.people .small_spacer {height:15px;}

section {
	width:100%;
	position:relative;
	overflow: hidden;
	height: calc(var(--vh, 1vh) * 100);
	scroll-behavior: smooth;
	scroll-snap-align: start;
	 scroll-snap-stop: always;
}

.wrapper {
  overscroll-behavior: none;
  width: 500%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}
  
  
  .mobile {display:none;}
  .desktop {display:block;}

  .blocker {clear:both;}
  
  .lock-scroll {
      overflow: hidden;
      position: fixed;
      height: 100%;
      width: 100%;
  }
  
  .panel {
  display: flex;
  align-items: center;
   justify-content: center;
}
  
  .panel img {width:100%;height:auto;}


#intro{background:#1a020f;}
#intro img {width:100%;}


.panel img {opacity:1;}

#intro .level1{opacity:0;}
#intro .level2,#intro .pencils{opacity:0.6;}

.frame {
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
	align-items: center;
	   justify-content: center;
	   display: flex;
	       position: relative;
}

.owl-dots {bottom: 50px;
    position: absolute;
    z-index: 9999;
left:50%; 
transform:translateX(-50%);
border-radius: 20px;
line-height: 0px;
padding: 7px;
       display: inline-flex;
     
       border: var(--red) solid 1px;
       box-shadow: 0 0 5px var(--red),inset 0 0 5px var(--red);
	   background-color: var(--black);
	}

.owl-dot{
	width: 20px;
    height: 20px;
    border-radius: 20px;
    border: none;
    margin: 0px 10px;
line-height: 0px;
    cursor: pointer;
    background: none;
    border: var(--red) solid 1px;
    box-shadow: 0 0 5px var(--red),inset 0 0 5px var(--red);
}
	
	.owl-dot.active{ background: none;
       border: var(--white) solid 1px;
       box-shadow: 0 0 5px var(--white),inset 0 0 5px var(--white);}
		

.frame .blocker {position:absolute;z-index:0;background:var(--black);}
.frame .stack0 {position:absolute;z-index:1;background:var(--black);}
.frame .stack1 {position:absolute;z-index:1;opacity:0;background:var(--black);}
.frame .stack2 {position:absolute;z-index:2;opacity:0;}
.frame .stack3 {position:absolute;z-index:3;opacity:0;}
.frame .stack4 {position:absolute;z-index:4;opacity:0;}

.frame h4 {font-style: italic;position:absolute;z-index:5;opacity:0;font-size:3vw;-webkit-animation: glow 2s ease-in-out infinite alternate;
  -moz-animation: glow 2s ease-in-out infinite alternate;
  animation: glow 2s ease-in-out infinite alternate;
  font-weight:300;left:5%;bottom: calc(50% - 23vw);
  display:none;
  text-transform: uppercase;}
  
 


#commercial .owl-dots,#narrative .owl-dots,#television .owl-dots,#doc .owl-dots {opacity:1;}

.owl-stage {display: flex;width: 100%;height: calc(var(--vh, 1vh) * 100);}

   .frame img{
       width: 100%;
       height: auto;
   }
   
    .frame img.stack0,.frame img.stack1,.blocker{
   border-top: 20px var(--black) solid;
   border-bottom: 20px var(--black) solid;
}
   
 
   .owl-nav{z-index: 999;
    position: absolute;
    top: 75px;
    width: 100%;}
	
	.owl-nav button{    
	    height: calc(100vh - 200px);
	    width: calc(50% - (256px / 2));
    opacity: 0;
	cursor:pointer;}
	
	.owl-nav button.disabled {cursor:auto;}
	.owl-nav.disabled {display:none;}
	
	.owl-next {float:right;}
	
	/* .owl-nav.disabled {display:none;} */
	

	.casetop {width:90% !important;margin: 0 auto;max-width:1200px;top:1%;}
	.casecenter {width:90% !important;margin: 0 auto;max-width:700px;}
	.casebottom {width:90% !important;margin: 0 auto;max-width:1200px;text-align:center;bottom:9%;}

	.framed {max-width:90%;}
	

	
	.cheers {opacity:0;position:absolute;z-index:9;}
	
	.reelvideo { 
		opacity:0;
		width: calc(80vw - 2px);
	    height: 45vw;
	    padding: 0px;
	    box-shadow: 0 0 30px 10px var(--red);
		margin-bottom:100px;
		position:absolute;
		z-index:999;
	}
	
	#reelvideoscarousel, #reelvideoscarousel2 {overflow:hidden;}
	
	
	#reelvideo,#reelvideo2,#cheers,#cheersbottom,#people,#people2 {display:none;}
	
	#video {
	    width: 80vw;
	    height: 45vw;
	    padding: 0px;
		margin:0px;
	}
	
	.flex-video {position: relative;
    left: -1px;}

	.theweekend {margin-top: 1%;}
	
	
	
	#topline {position:absolute;z-index:2;top: 25px;width:100%;opacity:0;z-index:-1;left:0;height: auto;display: block;}
	
	#bottomline {position:absolute;z-index:2;bottom:25px;;width:100%;opacity:0;z-index:-1;left:0;height: auto;display: block;}
	
    #intro img.biothumb, #outro img.biothumb {width:100px; box-shadow: 0 0 20px 5px var(--red);margin: -30px 20px -10px 5px;cursor:pointer;transition:all 0.5s ease;}
	
	#intro img.biothumb:hover, #outro img.biothumb:hover {box-shadow: 0 0 20px 1px var(--red);}
	
	.modal {
	  display: none;
	  position: fixed;
	  z-index: 1;
	  padding-top: 100px;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	  background-color: #19020e;
	  z-index: 9999999999;
	  -webkit-animation: fadein 1s ease-in-out;
	  -moz-animation: fadein 1s ease-in-out;
	  animation: fadein 1s ease-in-out;
	}

	.modal-content {
	  position: relative;
	  background-color: #19020e;
	  margin: auto;
	  padding: 0;
	  max-width: 100%;
	}
	
	.modal img{
		width:30%;
		margin:0px 35%;
		 box-shadow: 0 0 20px 5px var(--red);
		 cursor: pointer;
	}

	.modal .close {
	  color: white;
	  position: absolute;
	  top: 10px;
	  right: 10px;
	  font-size: 35px;
	  font-weight: bold;
	  transition:all 0.75s ease;
	}

	.modal .close:hover,
	.modal .close:focus {
	  color: #999;
	  text-decoration: none;
	  cursor: pointer;
	  opacity:0.75;
	}

	
	
	
	
	
	.innerline {
	  width:  calc(100% - 50px);
	 height:1px;
	  margin: 0px 25px;
	  display: block;
	 background:var(--red);
	 box-shadow: 0 0 10px 1px var(--red),0 0 10px 1px var(--red);
	 -webkit-animation: lineglow 2s ease-in-out infinite alternate;
	 -moz-animation: lineglow 2s ease-in-out infinite alternate;
	 animation: lineglow 2s ease-in-out infinite alternate;
	 z-index:1;
	}
	
	
	
	@-webkit-keyframes lineglow {
	  from {box-shadow: 0 0 20px 1px var(--red),0 0 20px 1px var(--red);}
	  to {box-shadow: 0 0 10px 1px var(--red),0 0 10px 1px var(--red);}
	}
	
	
	
	
	
	
	
	
	
	#bottomline .glowblocker {    
		width: 100%;
    height: 40px;
    position: absolute;
    top: -20px;
    background-color: var(--black);}
	
	#topline .glowblocker {    
		width: 100%;
    height: 40px;
    position: absolute;
    top: 20px;
    background-color: var(--black);}
	
	
	.cheers h1 a {color:unset;text-decoration:none;transition:opacity 1s;font-family: 'Centra No2';}
	.cheers h1 a:hover {opacity:.75;}

	
	.metaheader {padding:5vw;}
	.vaynerheader {padding:7vw;}
	
	.class_arrow {z-index:99999;width:37.5px;height:25px;position:absolute;}
	.class_arrow.arrow_down {bottom:100px;}
	.class_arrow.arrow_up {top:50px;}
	.class_arrow.arrow_up img {transform: rotate(180deg);}
	
	
	

	
	
	
	@media only screen and (max-width: 1230px) {
		
		.people h3 {font-size: 2.25vw;}
		
		.modal img{
			width:40%;
			margin:0px 30%;
		}
	
	#reelvideoscarousel .owl-dots, #reelvideoscarousel2 .owl-dots {
	    bottom: calc(50% - 23vw - 120px);
	}
	
	}
	
	@media only screen and (min-width: 1231px) {
	#reelvideoscarousel .owl-dots, #reelvideoscarousel2 .owl-dots { bottom: calc(50% - 23vw - 40px);}
	.reelvideo, #video { width: calc(60vw - 2px);height: 34vw;}
	}
	

@media only screen and (min-width: 1600px) {
	#reelvideoscarousel .owl-dots, #reelvideoscarousel2 .owl-dots { bottom: calc(50% - 23vw - 0px);}

	
}

@media only screen and (min-width: 1700px) {
	#reelvideoscarousel .owl-dots, #reelvideoscarousel2 .owl-dots { bottom: calc(50% - 21vw);}
	.people .close {top: 55px;}	
}



@media only screen and (min-width: 1920px) {
	.reelvideo, #video { width: 50vw;height: 28vw;}
	#reelvideoscarousel .owl-dots, #reelvideoscarousel2 .owl-dots { bottom: calc(50% - 20vw);}
	
}




@media only screen and (max-width: 940px) {
.people h2 {display: inline-block;}
.people h3 {display: block;margin-top: 0px;}
#intro img.biothumb, #outro img.biothumb {width: 80px;float:left;margin: -20px 30px -10px 5px;}
.people .small_spacer {height: 30px;clear: both;}
.modal img{
	width:70%;
	margin:0px 15%;
}
}





@media only screen and (max-width: 767px) {
	
	
	#intro img.biothumb, #outro img.biothumb {width: 80px;float:left;margin: -30px 30px -20px 5px;}
	.people .spacer {height: 50px;display: block;}
    .people .close {top: -60px;}
	.people h2 {font-size: 20px;}
	.people h3 {font-size: 14px;}
	
	body, .cheers h1 a, a {
		font-family: "Centra No2 Thin", sans-serif !important;
	}
	
	.modal img{
		width:80%;
		margin:0px 10%;
	}
	
	.desktop{display:none;}
	.mobile{display:block;}
	.frame h4 {display:block;}
	
	#cheers8 {font-family: 'Centra No2 Thin';}
	
	.box {
	  height:  calc(var(--vh, 1vh) * 100 - 30px);
	  width:  calc(100% - 30px);}
 
	h1 {font-size:12vw;}
	h2 {font-size:5vw;}
	h2 span {font-size:4vw;}
	h3 {font-size:5vw;}
	h3 span {font-size:4vw;}
	
	
	.casebottom {bottom:20%;}
	.casetop {top:3%;}
	
	#case #stacked3 .casetop {top:6%;}
	#case #stacked4 .casetop {top:7%;}
	#case #meta .casetop {top:3%;}
	#case #vayner .casetop {top:12%;}
	
	#case .casebottom {bottom: 14%;}
	
	.owl-dot {
		width: 18px;
		    height: 18px;
		    border-radius: 18px;
		    margin: 0px 10px;
		    padding: 0px;
		    box-sizing: border-box;
		    line-height: 0px;
			    float: left;
	}
	
	.kevindurant,.theweekend {margin-top: -6%;}
	
	#cheers2,#cheers3,#cheers13,#cheers14 {display:block;}
	.cheers h1{height:calc((var(--vh, 1vh) * 100 - 170px)/13);line-height:calc((var(--vh, 1vh) * 100 - 170px)/13);;margin:0px;padding:0px;}
	
	.frame h4,#nina h4, #mozart h4 {left:unset;bottom: calc(50% - 45vw);font-size:5vw;}
	
	#topline {top: calc(50% - 50vw);}
	#bottomline {bottom: calc(50% - 50vw);}
		
		.people h4{font-size: 12px;}
	
	.reel {top:30px;left:30px;}
	.email {top:30px;right:30px;}
	.about {top:30px;}
	
	.people {
		width:  calc(var(--vw, 1vw) * 100 - 80px);
	  height:  calc(var(--bw) - 80px);
  }
  
  .people h2 {
      display: block;
      margin-right: 0px;
      text-align: left;
  }
	  
	

}



@media only screen and (max-width: 400px) {
.people h4 {font-size: 11px;letter-spacing: -.25px;}
.about, .email, .reel {width:44px;}
.about {left:calc(50% - 22px)}
.people h2 {font-size: 17px;}
.people h3 {font-size: 12px;}
#intro img.biothumb, #outro img.biothumb {width: 60px;margin: -22px 25px -20px 5px;}
.people .spacer {height: 65px;}
}


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

#intro img.biothumb, #outro img.biothumb {
    width: 50px;
	}
	
	
    .people .small_spacer {
        height: 5px;
		}
		
		
	    .people h4 {
	        font-size: 10px;
			margin-bottom: 0px;
	    }
		
		
		.people h4 {
		    line-height: 1.2;
		    padding: 5px 7px;
			display: inline-block;
		}
		
	    .people .spacer {
	        height: 45px;
	    }
		
		
	    .people .close {
	        top: -40px;
	    }

}


@media (min-aspect-ratio: 16/9) and (min-width: 1440px) {
 .reelvideo, #video {width:calc(45vw - 2px);height:25vw;}
 h3 {font-size: 2vw;}
 .people h2 {font-size: 4vw;}
 .people h4 {font-size:1.4vw;}
 .people .close {top: 25px;}
}