@import 'sanitize.css';
/* 	
	If I am using foundation
	sanitize is no longer needed
	because foundation has their own resets already
	@import 'foundation-gridandresetonly.min.css';
*/
/* @import 'foundation-gridandresetonly.min.css'; */


/* Foundation Resets xresets */
a:hover, a:focus, a:active, a:visited {
	color:inherit;	
}

body, html {
	font-family: sans-serif;
	margin:0px;
	padding:0px;	
	-ms-text-size-adjust: 100%; /* 5 */
  	-webkit-text-size-adjust: 100%; /* 5 */
  	word-break: break-word; /* 6 */
	color:#ffffff;
	text-align: center;
	font-size: 14px;

	background-color: #190a00;

	/* resetting foundations font soothing antialiasing */
	-webkit-font-smoothing: auto;
  	-moz-osx-font-smoothing: auto;

  	/* Makes iphone scrolling smooth on itmes this is applied to */
  	-webkit-overflow-scrolling: touch;

}
	
	@media only screen and (min-width: 40em) {

			body, html {
				font-size: 16px !important;
			}
	}
	@media only screen and (min-width: 64em) {
			body, html {
				font-size: 19px !important;
			}
	}
	@media only screen and (min-width: 80em) and (max-aspect-ratio: 2/1) {
			body, html {
				font-size: 22px !important;
			}
	}

/*
[data-whatinput="mouse"] a {
	-webkit-transition: border-color 300ms;
	-moz-transition: border-color 300ms;
	transition: border-color 300ms;	
}
	[data-whatinput="mouse"] a:hover {
		-webkit-transition: background-color 300ms, color 300ms;
		-moz-transition: background-color 300ms, color 300ms;
		transition: background-color 300ms, color 300ms;	
	}
*/


/* FONTS xfont xfonts*/
/*
@font-face {
    font-family: 'din_condensedbold';
    src: url('../font/din-condensed_bold-webfont/din_condensed_bold-webfont.woff2') format('woff2'),
         url('../font/din-condensed_bold-webfont/din_condensed_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*/

/* Typography xtypeography */

h1, h2, h3 {
	font-family: sans-serif;
	font-size:4.4em;
	text-align:center;
	font-weight: normal;
    font-style: normal;
    margin:0px;
    padding:0px;
    line-height: 0.9;

    /*
    -webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	*/
}

	h1 {
		font-size:5.5em;
		display: none;


	}
	.onelifelogo {
		width:17em;
	}	
	h2 {

		font-size: 2.2em;
		margin-top: 0.05em;
	}
	h3 {
		font-size:1.2em;
	}
	h1 span {
		/* Fixes the L1 letter spacing in ONEL1FE */
		/* letter-spacing: -0.055em; */
	}
	h2 span {
		font-size:30%;
		line-height: 0 !important;
	}

	/* Medium Screens */
	@media only screen and (min-width: 40em) {
		h2 {
			font-size: 2em;
			margin-top: 0.1em;
		}
	}
	@media only screen and (min-width: 50em) {
		h1 {
			font-size:6.2em;
		}
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
		.onelifelogo {
			width:19em;
		}
		h2 {
			font-size: 1.8em;
			margin-top: 0.1em;
		}
		p {
			font-size:16px;
		}
	}
	/* XLarge Screens */
	@media only screen and (min-width: 80em) {
		h1 {
			font-size:6.2em;
		}
		.onelifelogo {
			width:19em;
		}
		h2 {
			font-size: 1.8em;
			margin-top: 0.1em;
		}
	}
	@media only screen and (min-width: 80em) and (max-aspect-ratio: 2/1) {
		h1 {
			font-size:7.5em;
			letter-spacing: -0.01em;
		}
		h1 span {
			letter-spacing: -0.065em;
		}
	}



#container {
		width: 90%;
  		margin: auto;
  		position: absolute;
  		top: 50%; left: 50%;
  		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
    	-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);	
		z-index: 2;    
}



/*   Header  xheader */
	
	header, section {
		
		/* scroll-snap-align: center;
		-webkit-overflow-scrolling: touch; */
	}
	header {
		height: 100%;
	}

	video, #video {
			width:auto;
			height:100vh;
			margin:0px;
			padding:0px;
			display:block;
			position:fixed;
			top:50%;
			left:50%;
			-webkit-transform: translate(-50%,-50%);
			-moz-transform: translate(-50%,-50%);
	    	-ms-transform: translate(-50%,-50%);
			-o-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			
			background-color: #190a00;
			
			/* -webkit-clip-path: polygon(0 0%, 100% 0, 150% 0%, 0% 100%);
	 		clip-path: polygon(0 0%, 100% 0, 150% 0%, 0% 100%);	*/


			-webkit-touch-callout: none; 
			  -webkit-user-select: none;  
			  -khtml-user-select: none;   
			  -moz-user-select: none;    
			  -ms-user-select: none;  
			  -o-user-select: none;      
			  user-select: none;  
			  -webkit-user-drag: none;
			  -khtml-user-drag: none;
			  -moz-user-drag: none;
			  -o-user-drag: none;
			  user-drag: none;   

			  -webkit-overflow-scrolling: touch;      

	}
		


		/* the video was a weird size, so i changed it from 16/9 to a 1.9/1 4k film ratio = 19/10 */
		@media (min-aspect-ratio: 19/10) {
		    video, #video {
		        width:100vw;
		        height: auto;
		    }
		}
		


	
		




	section {
	
		width: 90%;
  		margin: auto;
  		position: absolute;
  		padding:20px 0px;
  		top: 50%; left: 50%;
  		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
    	-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);	

	}

	header a, section a {

		color:#fff;
		text-decoration: none;
	}
	header a.button {

		font-size: 13px !important;
	}
	
	/* tablet and smaller */
	@media only screen and (max-width: 40em) {
		body {
			scroll-snap-type: none;
			scroll-snap-points-y: none;
			scroll-snap-type: none;
		}
		
	}
	/* Large Screens */
	@media only screen and (min-width: 64em) { 
	
	}


.button {
	color:#000 !important;
	background-color: #fff !important;
	padding:1.1em 2.8em;
	text-align: center;
	display: inline-block;
	text-decoration: none !important;
	width:auto;
}
	



	
/* Youtube and Videos xvideos xyoutube xvideo */	
	.youtube {
		position:relative;
		padding-bottom: 56%;
		margin-bottom:2em;
		overflow: hidden; 
		max-width: 100%;
	}
		.youtube iframe,
		.youtube embed,
		.youtube object {
				height:100%;	
				width:100%;
				position:absolute;
				top:0;
				left:0;
			}
			
			
.noselect {
  -webkit-touch-callout: none; 
  -webkit-user-select: none;  
  -khtml-user-select: none;   
  -moz-user-select: none;    
  -ms-user-select: none;  
  -o-user-select: none;      
  user-select: none;  
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;        
}	
.rounded {			
	-webkit-border-radius:3px;	
	-moz-border-radius:3px;	
	-ms-border-radius:3px;	
	-o-border-radius:3px;	
	border-radius:3px;	
}