/* TYPOGRAPHY ------------ */

h1, h2, h3, h4, p, button, label, input {
	color: white;
	text-align: center;
	font-family: 'National-Regular', 'National', Helvetica;
}
	
h3 {
	font-size: 8px;}

h4 {
    font-size: 18px;
    letter-spacing: .5px;
    text-transform: capitalize;
    line-height: 36px;}
/* 
.italics {
	font-family: 'National-BoldItalic';}
 */
 
 .med-stat h1 {
 	font-size: 43px !important;}
	
.long-stat h1 {
	font-size: 36px !important;
	line-height: 46px;}
	
form {
	font-size: 18px;}

.required-message {
	display: none;}
	
.white {
	color: white !important;}

/* GENERAL LAYOUT ------------ */

/* 
#container {
	display:none;}
 */

	
a:link, a:visited {
	color: white;
	}
	
a:link, a:visited {
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-ms-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;}

a:hover {
	opacity: .75;
	text-decoration:none;
    zoom: 1;
    filter: alpha(opacity=75);
    }	

a:link, a:hover, a:visited, a:active {
	text-decoration: none;}   
    
.background {
	position: relative;
	}

.dim-overlay {
    background-color: black;
    opacity: .15;
    position: fixed;
    width: 100%;
    top: 0;
    height: 100vh;
    z-index: 997;
    left: 0;
}

.navbar {
	padding: 35px 0px;}

.navbar, footer {
	height: 25vh;
	z-index: 1000;}

.mobile {
	height: 100vh;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding:0;
	}
    	
.twitter-share-button {
    position: absolute !important;
    bottom: 2vh;
    left: 0;
    right: 0;
    margin: auto;}

.mute-button img, .sound-button img {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 3%;
    z-index: 999;
    cursor: pointer;
    background: none;
    width: 40px;
	}

.mute-button:hover, .sound-button:hover {
    background: none;
	}
	
.mute-button img, .sound-button img {
    height: 30px;
	}
	
.sound-button {
	display: none;}

.first-screen .twitter-share-button {
    position: absolute !important;
    bottom: -25vh;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9999;
}

.slick-initialized .slick-slide {
    display: flex;
    height: 100vh;
}
		
.first-screen .mobile {
    background: url('/bg-videos/first-screen-mobile.gif')no-repeat fixed;
}

.second-screen .mobile {
    background: url('/bg-videos/second-screen-mobile.gif') no-repeat;
    background-position-y: -55px;

}
.third-screen .mobile {
    background: url('/bg-videos/third-screen-mobile.gif')no-repeat fixed;
}
/* HEADER ------------ */

.logo h1 {
    color: white;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 1px;
    font-family: 'National-Bold';
    }
    
.da-nav-alt div{
	float: left;
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'National-Bold';
    text-align: center;
    color: white !important;}

.da-nav-alt div a {color: white;}

.da-nav-alt div:first-child, .da-nav-alt div:last-child {
	padding: 20px 0;}

.logo h2 {
	font-size:  16px;
    letter-spacing: .5px;
    font-family: 'National-Light', 'National', Helvetica;}
.overlay {
    z-index: 999;
    margin: 0 auto;
    display: block;
    padding: 0 10%;
    position: absolute;
    top: 30vh;
    display: block;
  }

/* First Screen ------------ */

.first-screen, .third-screen {
	display: block;}
	
/* STATS Design ------------ */	

.stats {
	outline: none;
	z-index:999;}

.stats h1 {
	font-size: 48px;
	line-height: 54px;
	font-weight: 600;
}

.stats h2, .source, .third-screen h2 {
    font-size: 15px;
    text-transform: initial;
    letter-spacing: 1.25px;
    width: 85%;
    margin: 24px auto;
    line-height: 25px;
    width: 65%;
    font-style: normal;
    }

.third-screen h2 {
	letter-spacing: .5px;}
.stats h2 {
    margin: 0 auto 24px;
    }

.stats h3 {
	margin: 0;
	font-size: 15px;}

.second-screen .stats h1 {
	font-size: 48px;
    line-height: 1.2em;
    font-weight: 700;}   
    
.last-slide .buttons {
	bottom: 0;}

.last-slide .slick-next .slick-arrow {
	display:none;}
	
/* BTN ------------ */
	
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	margin: 0 auto;
	height: 52px;
	width: 20%;
	border: none;
	display: block;
	outline: none;
	text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;}

button.slick-next.slick-arrow {
	height: 52px;
	}	
	
button, .landing-btn, button.slick-next.slick-arrow {
	background: #2e2e2e;
	-webkit-transition: background 0.25s linear;
	-moz-transition: background 0.25s linear;
	-ms-transition: background 0.25s linear;
	-o-transition: background 0.25s linear;
	transition: background 0.52s linear;
	border-radius: 2px;}
	
button:hover, .landing-btn:hover, button.slick-next.slick-arrow:hover {
	background: #191919;}
	
.overlay button {
	height: 52px;
	width: 35%;
	margin: 25px auto 0;
	background-color: #d72d2d;
	}

button.slick-next.slick-arrow, swiped-out-btn {
    left: 0;
    right: 0;
    bottom: 120px;
    position: fixed;
}

.first-screen .landing-btn, .third-screen .landing-btn {
    margin: 15px auto;
    z-index: 999;
    float: none;
    position: absolute;
    left: 0;
    right: 0;
	}
		
.first-screen .swiped-out-btn, .third-screen .swiped-out-btn  {
    background-color: white !important;
    color: #2e2e2e;
    margin: 75px auto;
    z-index: 999;
    float: none;
    position: absolute;
    left: 0;
    right: 0;
  
	}
	
.second-screen .swiped-out-btn {
    background-color: white !important;
    color: #171616;
    padding: 0;
    margin: 75px auto 5px;
    z-index: 999;
    float: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 57px;
    letter-spacing: 1px;
	}
	
.first-screen .landing-btn {
	margin: 75px auto 0;}

.landing .swiped-out-btn {
	bottom:-10vh;}
	
.primary-btn {
	background-color: #ce5252;
}

.secondary-btn {
	background-color: #ce5252;
}

.buttons {
	position: relative;
	z-index: 999;}
	
.third-screen .stats {
	height: 40vh;}
	
.third-screen button{
	margin: 5px auto;
	z-index: 999;
	float: none;}

.third-screen .email-signup-btn{
	background-color: white;
    color: #2e2e2e;
	}

/* FORMS ------------ */	

button html input[type="button"], input[type="reset"], input[type="submit"] {
	width: 100%;}
	
.email-signup {
	display:block;
	z-index: 999;
}
    
.submitted {
	z-index: 999;}

.email-signup table {
	width: 100%;}
		
.email-signup input, .email-signup button  {	
    width: 33%;
    margin: 0 auto;
    display: block;
    height: 50px;
    margin-bottom: 15px;
    }

.email-signup button {
	padding: 0 20px;}

.ss-form-question, .ss-item {
	padding: 0 ;}

.ss-form-entry {
	padding: 0 5px;}

#ss-submit {
	padding: 0;}
	
::-webkit-input-placeholder {
   color: white;
}

:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

:-ms-input-placeholder {  
   color: white;  
}
    
.email-signup input{
    color: white;
    border: none;
    border-radius: 2px;
    text-align: left;
    padding-left: 16px;
    background: rgba(255, 255, 255, .15);
    border: 2px solid white;
    }

#ss-submit {
    background-color: white;
    color: #2e2e2e;
    }

.close {
    float: right;
    position: absolute;
    z-index: 3;
    opacity: 1;
    top: 0;
    right: 0;
    padding: 0;
    margin: 5%;
    width: 35px;
    z-index: 9999999999;
	cursor:pointer;}

.email-signup .back-link, #ss-submit {
	font-size: 14px;
	cursor: pointer;
	text-align: center;}
	
.back-link-btn, .back-link-btn:hover {
	margin: 50px auto 0 !important;
	background: white;
	color: #2e2e2e;
	}

/* BG VIDEOS ------------ */	
		
video.bg-video.desktop, poster { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.first-screen video.bg-video.desktop {
	background: transparent url('/bg-videos/fallback/first-screen.jpg') 0% 0% / cover no-repeat ;

}

.second-screen video.bg-video.desktop {
    background: url('/bg-videos/fallback/second-screen.jpg') no-repeat;
    background:black;

}

.third-screen video.bg-video.desktop {
    background: url('/bg-videos/fallback/third-screen.jpg') no-repeat;
	background:black;

}
video.bg-video.mobile {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
}

/* BG VIDEOS ------------ */

.mobile {
	display:none;}

.desktop {
	display: block;}
	
@-webkit-keyframes fadeIn-hero { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn-hero { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn-hero { from { opacity:0; } to { opacity:1; } }


.first-screen, .logo{
	opacity:0; 
  	-webkit-animation:fadeIn-hero ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  	-moz-animation:fadeIn-hero ease-in 1;
  	animation:fadeIn-hero ease-in 1;

  	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  	-moz-animation-fill-mode:forwards;
  	animation-fill-mode:forwards;

  	-webkit-animation-duration:3s;
  	-moz-animation-duration:3s;
  	animation-duration:3s;
  	
  	animation-delay: 0s;
  	-webkit-animation-delay:0s;
  	-moz-animation-delay:0s;}


/* 
.first-screen video {
	animation-delay: 5s;}
 */



/* SLICK STAT SLIDER ------------ */

.first-screen, .second-screen, .third-screen, .intro-video {
	height: 100vh;
    display: flex;
    align-items: center;
    
    display: -webkit-flex;
	-webkit-align-items: center;
    
    }
    
.third-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;

    display: -webkit-flex;
    -webkit-flex-direction: column;
	-webkit-justify-content: center;
}
    
.slick-prev {
	display: none !important;}
	

	
.stats, .intro-video {
	margin: 0 auto;
	padding: 0 10vw;
	
	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	
  	display: -webkit-flex;
	-webkit-align-items: center;
	-webkit-flex-direction: column;
	 -webkit-justify-content: center; 
	 }
	
.stats-slider {
	z-index: 999;
	}

.music-container {
	display: block;}	

	
/* RESPONSIVENESS ------------ */


@media (max-width: 950px) { 		
	video.bg-video.desktop { 
		width: 1000px;
	}
	
	.second-screen	video.bg-video.desktop { 
		width: 960px;
	}
	
	.overlay {
		top: 27vh;}

}

@media (max-width: 800px) { 
	
	.overlay .stats {
		padding: 0 1%;}
		

}

@media (max-width: 700px) { 		

	.second-screen	video.bg-video.desktop { 
		left: 60%;
	}
	
	.second-screen .stats h1 {
		font-size: 40px;
		line-height: 1.2em;
	}
	
	.stats h2, .source {
		font-size: 14px;
		width: 100%;
		line-height: 20px;
   		margin-top: 18px;
	}	
}	

@media (max-width: 700px) { 

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

}

@media (min-width: 768px) and (max-width: 768px) { 
	.mobile{display:block;}
	.desktop{display:none;}
}

@media (max-width: 1024px) { 

	.first-screen video.bg-video.desktop, poster {
		width: 105% !important;
	}
	
	.first-screen video.bg-video.desktop {
		background: black;
	}
	
	video.bg-video.desktop, poster {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 106%;
}


@media (max-width: 800px) { 

	
	
	.first-screen {
    	height: 85vh !important;
	}

	.second-screen {
    	height: 85vh;
	}

	.overlay {
		padding: 0 1%;}
		
	.stats h1 {
		font-size: 36px !important;
		line-height: 44px;
		font-weight: 900;
	}

	.long-stat {
		font-size: 30px;
		line-height: 38px;}

		
	.stats {
		padding: 0;}
		

	.second-screen video.bg-video.mobile {
	    top: -200px;}


	.stats h1 {
		font-size: 28px !important;
	}
		
	.third-screen .stats h1 {
		font-size: 35px !important;
    	line-height: 42px !important;}

}

@media (max-width: 475px) { 

	h1, h2, button {
		margin-top: 10px;
		margin-bottom: 4px;
		font-family: 'National-Bold';

	}
	.twitter-share-button {
		position: static !important;}
	
	.mute-button, .sound-button  {
		display: none;
		}

	.sound-button {
		display: none;}
		
	.slick-initialized .slick-slide {
		display: flex;
		height: auto;
		overflow: hidden;
	}
	
	.long-stat h1 {
		font-size: 24px !important;
		line-height: 34px;}
	
	.stats .long-stat h2 {
		font-size: 12px;
		line-height: 16px;}
	
	h2.long-src  {
		font-size: 14px;
		line-height: 18px;
		margin-top: 10px;}

	.second-screen video.bg-video.mobile {
	    top: 0px;}
	    
	.stats-slider {
	    height: 40vh;
	}
	    
	.navbar {
		height: 15vh;
		z-index: 1000;
	}
    	
    .stats {
    	height: initial;
    	left: 0;
    	right: 0;
    	top: 0;
    	bottom: 0;
    	z-index: 998;
    	}
    
    .first-screen, .second-screen {
    	padding: 0;}
    
    .first-screen > div, .second-screen > div{
    	padding: 0;}
    	
	.first-screen .stats {
		top: 5vh;}    
    .third-screen .stats {
    	padding: 0 25px !important;
    	}
    
    .buttons {
		position: fixed;
		z-index: 999;
		bottom: 25vh;
		left: 0;
	}
	
	.third-screen .buttons {
		bottom: 5vh;}
    	
	.stats h1 {
		letter-spacing: 0px;
		line-height: 36px;}
		
	.second-screen .swiped-out-btn {
		position: fixed;}
		
	button.slick-next.slick-arrow{
    	bottom: 75px;
	}
	
	.second-screen .swiped-out-btn {
    	bottom: 15px;
	}
	
	.email-signup input, .email-signup button {
		width: 100%;
	}
	

	.third-screen button {
		width: 75%;
	}
	.email-signup .back-link, #ss-submit {
		width: 92%;
	}
	
	button:hover, .landing-btn:hover, button.slick-next.slick-arrow:hover {
	background: #171616;}

	button, .landing-btn, button.slick-next.slick-arrow {
		background: #2e2e2e;
		
		-webkit-transition: none !important;
  		-moz-transition: none !important;
  		-ms-transition: none !important;
  		-o-transition: none !important;
  		transition: none !important;}
  	
  	button:hover, .landing-btn:hover, button.slick-next.slick-arrow:hover {
		background: #2e2e2e;}


	.first-screen .twitter-share-button {
		position: absolute !important;
		bottom: -25%;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 9999;
	}
	

    
}

@media (max-width: 320px) { 
	.first-screen .twitter-share-button {
		bottom: -15vh;
	}

	.long-stat-xs h1 {
		font-size: 18px !important;}
		
	.long-stat-xs h2 {
		font-size: 12px !important;}
	
	.small-stat h1{
		font-size: 16px !important;}

	.small-stat h2{
		font-size: 10px !important;
		line-height: 12px;
		;}

		
	.stats h1 {
		font-size: 18px !important;
		line-height: 20px;}
	
	.stats h2 {
		font-size: 10px;
		line-height: 12px;
		margin-top: 4px;
		letter-spacing: .5px}
	
		
	.first-screen .stats h1  {
		font-size: 20px !important;
		line-height: initial;}
	
	.logo h2 {
		font-size: 14px;}
	
	

}