/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

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

	* {box-sizing: border-box;}

	body, html {
	  height: 100%;
	  padding: 0;
	  margin: 0;
	}

	/******************************* LEAD VIDEO *************************************/

	/*container*/
	.video-container{
		/*border: 1px solid lightblue;*/
		width: 100%;
		padding: 0;
		float: left;
		position: relative;
		margin: 0px 0 0 0;
	}

		#lead-image{
			width: 100%;
			height: 100%;
			margin: 0 auto;
			float: left;
			vertical-align: bottom;
		}
		#mobile1{
			display: block;
		}
		#mobile2{
			display: none;
		}
		#tab{
			display: none;
		}
	video{
		/*border: 1px solid lightblue;*/
		width: 100%;
		vertical-align: top;
	}
		.video-teaser{
			/*border: 1px solid lightblue;*/
			font-family: "Roboto";
			font-size: 1.25em;
			line-height: 1.25em;
			font-weight: 700;
			color: white;
			padding: 20px;
			width: 70%;
			text-shadow: 2px 2px 5px rgba(0,0,0,.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			float: left;
		}

	/******************************* SLIDE SHOW *************************************/
	
	/* Slideshow container */
	.slideshow-container {
		width: 100%;
		padding: 5px 5px 0 5px;
		margin: 0 auto;
		float: left;
		position: relative;
		background-color: #53575f;
	}
		.prev, .next {
			font-family: "Roboto"; /*NA*/
			font-size: 2em; /*NA*/
			font-weight: 900; /*NA*/
			color: white; /*NA*/
			cursor: pointer; /*XX*/
			position: absolute; /*XX*/
			top: 50%; /*XX*/
			width: 35px; /*ADDED*/
			height: 35px; /*ADDED*/
			margin-top: -22px; /*ADDED*/
			text-align: center;
			transition: 0.6s ease; /*XX*/
			border-radius: 50%; /*XX*/
			user-select: none; /*XX*/
		}
		.prev {
			left: 2%; /*ADDED*/
		}
		.next {
			right: 2%; /*XX*/
		}
		/* On hover, add a black background color with a little bit see-through */
		.prev:hover, .next:hover { /*XX*/
			background-color: rgba(0,0,0,0.8); /*XX*/
		}
		/* Number text (1/4) */
		.numbertext {
			font-family: "Roboto";
			font-size: .8em;
			font-weight: 300;
			color: black;
			position: absolute;
			bottom: 3%;
			left: 5%;
		}
		/* Dots/bullets/indicators */
		.dots_container {
			/*border: 1px solid lightblue;*/
			width: 23%;
			text-align: center;
			position: absolute;
			bottom: 3%;
			left: 50%;
			margin-left: -12%;
			overflow: hidden;
			padding: 0 0;
			height: 17px;
			z-index: 1;

		}
			.dot {
				cursor: pointer;
				height: 10px;
				width: 10px;
				line-height: 2em;
				margin: 0 2px;
				background-color: rgba(255,255,255,.7);
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				transition: background-color 0.6s ease;
			}
			.active, .dot:hover {
				background-color: #344960;
			}
			/* Fading animation */
			.fade {
				-webkit-animation-name: fade;
				-webkit-animation-duration: 1.5s;
				animation-name: fade;
				animation-duration: 1.5s;
			}
				@-webkit-keyframes fade {
					from {opacity: .4}
					to {opacity: 1}
				}

				@keyframes fade {
					from {opacity: .4}
					to {opacity: 1}
				}

	.mySlides {
		/*border: 1px solid red;*/
		width: 100;
		margin: 0 0;
		display: none;
		float: left;
	}
		.mySlides img {
			width: 100%;
			vertical-align: bottom;		
		}
			.mySlides img#mobile320 {
				width: 100%;
				float: left;
				display: block;
			}
			.mySlides img#mobile480 {
				width: 100%;
				float: left;
				display: none;
			}
			.mySlides img#tab768 {
				width: 100%;
				float: left;
				display: none;
			}
		.slide_content {
			font-family: "Roboto";
			color: black;
			text-align: center;
			position: absolute;
			top: 5%;			
			left: 0;
			width: 100%;
			margin: 0;
			padding: 0 20px;
			display: block;
			z-index: 1; 
		}
			.slide_hed {
				/*border: 1px solid lightblue;*/
				font-size: 1em;
				font-weight: 700;
				width: 100%;
			}
			.slide_text {
				/*border: 1px solid lightblue;*/
				margin-top: .5em;
				font-size: .9em;
				font-weight: 300;
				width: 100%;
			}

	/******************************* TEASERS *************************************/

	/*MOBILEPHONE*/	
	.container_home{
		width: 100%;
		float: left;
		background-color: rgba(0,0,0,1);	
	}
		.teaser_box{
			width: 100%;
			margin: 0 0;
			padding: 0;
			float: left;
		}
		.black_type{
			display: none;
		}
			#reverse{
				color: white;
			}
		.white_type{
			display: block;
		}
		.drkgrey{
			background-color: #53575f;
		}
			/*teaser_artwork*/
			#mobile_art{
				width: 100%;
				display: block;
			}
			#desktop_art{
				width: 100%;
				display: none;
			}
			.teaser-content{
				/*border: 1px solid lightblue;*/
				padding: 20px;
			}
				.white{
					color: white;
				}
				.label{
					font-family: "Roboto";
					font-size: .7em;
					font-weight: 300;
					line-height: 1.5em;
					text-transform: uppercase;
					margin: 1.5em 0 .7em 0;
					/*color: white*/
				}
					.label_white{
						font-family: "Roboto";
						font-size: .8em;
						font-weight: 300;
						line-height: 1.5em;
						margin: 1em 0 .7em 0;
						color: white;
						text-transform: uppercase;
					}
				.hed{
					font-family: "Roboto";
					font-size: 1em;
					line-height: 1.75em;
					font-weight: 500;
					/*color: white;*/
				}
					.hed_white{
						font-family: "Roboto";
						font-size: 1.5em;
						font-weight: 500;
						line-height: 1.25em;
						margin: 0em 0 .7em 0;
						color: white;
					}
				.teaser{
					font-family: "Roboto";
					font-size: .9em;
					line-height: 1.25em;
					font-weight: 300;
					margin-top: 1em;
					/*color: white;*/
				}
					.teaser_white{
						font-family: "Roboto";
						font-size: 1em;
						font-weight: 300;
						line-height: 1.25;
						color: white;
					}
				.hotbutton{
					font-family: "Roboto";
					line-height: 1.5em;
					text-transform: uppercase;
					border: 1px solid black;
					padding: 5px 10px;
					margin: 2em 0 1em 0;
					display: inline-block;
				}
					.hotbutton a{
						text-decoration: none;
					}
				.hotbutton:hover{
					background-color: rgba(255,255,255,.5);
					color: black;
					font-weight: 900;
				}
				#b_button{
					font-size: .7em;
					padding: 5px 15px;
					margin-top: 2em;
					color: black;
					border-color: black;
				}
				#b_button a{
					color: black;
					font-weight: 300;
				}
				#w_button{
					font-size: .7em;
					padding: 5px 15px;
					margin-top: 2em;
					color: white;
					border-color: white;
				}
				#w_button a{
					color: white;
					font-weight: 300;
				}				#b_button:hover{
					background-color: rgba(255,255,255,.5);
					color: black;
					font-weight: 900;
				}
				#w_button:hover{
					background-color: rgba(255,255,255,.5);
					color: white;
					font-weight: 900;
				}
}

/******************************* MEDIA QUERIES *************************************/

/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

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

	.video-container{
		position: relative;
		margin: 50px 0 0 0;
	}
		#mobile1{display: block;}
		#mobile2{display:none;}
		#tab{display: none;}
	.video-teaser{
			/*border: 1px solid lightblue;*/
			font-family: "Roboto";
			font-size: 1.75em;
			line-height: 1.5em;
			font-weight: 700;
			color: white;
			padding: 0;
			width: 70%;
			text-shadow: 2px 2px 5px rgba(0,0,0,.5);
			position: absolute;
			top: 20px;
			left: 20px;
			z-index: 2;
			float: left;
		}

	.slideshow-container {
		width: 100%;
		padding: 20px 20px 0 20px;
		margin: 0 auto;
		float: left;
		position: relative;
		background-color: #53575f;
	}
	.slide_content {
		top: 8%;
		padding: 0 30px;
	}
		.slide_hed {
			/*border: 1px solid lime;*/
			font-size: 1.25em;
			width: 100%;
		}
		.slide_text {
			/*border: 1px solid lime;*/
			margin-top: .5em;
			font-size: 1em;
			width: 100%;
		}
		.numbertext {
			left: 7%;
		}
		.prev {
			left: 4%;
		}
		.next {
			right: 4%;
		}
		/* Dots/bullets/indicators */
		.dots_container {
			/*border: 1px solid lime;*/			
			margin-left: -9%;
		}
	/*slideshow artwork*/
	.mySlides img#mobile320 {display: none;}
	.mySlides img#mobile480 {display: block;}
	.mySlides img#tab768 {display: none;}
		/*teaser artwork*/
		#mobile_art{display: block;}
		#desktop_art{display: none;}
	/*teasers*/
	.teaser_box{
		padding: 20px;
	}
		.teaser-content{
			/*border: 1px solid lime;*/
			padding: 0;
		}
			.label_white{
				font-size: .8em;
				font-weight: 300;
				margin: 2em 0 .7em 0;
			}
			#w_button{
				font-size: .8em;
				padding: 5px 20px;
				margin-top: 2em;
				border-color: white;
			}
}


/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

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

	.video-container{
		margin: 0 0 0 0;
		position: relative;
	}
		#mobile1{display: none;}
		#mobile2{display: none;}
		#tab{display: block;}
		video{
			vertical-align: bottom;
		}
		.video-teaser{
			/*border: 1px solid pink;*/
			font-size: 1.25em;
			line-height: 1.25em;
			position: absolute;
			top: 30px;
			left: 30px;
			width: 240px;
			padding: 0;
			background-color: rgba(0,0,0,0);
		}	
	.slideshow-container {
		width: 100%;
		padding: 0;
		margin: 0;
		float: left;
		position: relative;
		background-color: none;
	}
		.numbertext {
			left: 3%;
		}
		.prev {
			left: 37%;
		}
		.next {
			right: 4%;
		}
		.dots_container {
			/*border: 1px solid pink;*/
			width: 10%;
			position: absolute;
			bottom: 3%;
			left: 50%;
			margin-left: -5%;
			z-index: 1;
		}
		.mySlides {
			/*border: 1px solid red;*/
			width: 100%;
			margin: 0;
			display: none;
			float: left;
		}
		/*slideshow artwork*/
		.mySlides img#mobile320 {display: none;}
		.mySlides img#mobile480 {display: none;}
		.mySlides img#tab768 {width: 100%; display: block;}

		/*slideshow content*/	
		.slide_content {
			/*border: 1px solid pink;*/
			position: absolute;
			top: 5%;			
			left: 42.5%;
			width: 50%;
			margin: 0;
			padding: 0 20px;
			display: block;
			z-index: 1; 
		}
		/*slideshow typography*/
		.slide_hed {
			/*border: 1px solid pink;*/
			font-size: 1em;
			font-weight: 700;
			width: 100%;
		}
		.slide_text {
			/*border: 1px solid pink;*/
			margin-top: .5em;
			font-size: .9em;
			font-weight: 300;
			width: 100%;
		}

		/* slide teaser */
		.slideteaser_box{
			position: relative;
		}
			.slideteaser-content{
				/*border: 1px solid pink;*/
				position: absolute;
				margin-top: 5%;
			}
			#overview{
				max-width: 230px;
			}
		.teaser_box{
			/*border: 1px solid pink;*/
			width: 100%;
			margin: 0 0;
			padding: 0px;
			position: relative; 
			float: left;
			background-color: rgba(0,0,0,.0);	
		}
		.hideme{display: none;}
		/*artwork*/
		#mobile_art{display: none;}
		#desktop_art{display: block;}

		.white_type{display: none;}
		.black_type{display: block;}
		.teaser-content{
			/*border: 1px solid pink;*/
			background-color: rgba(0,0,0,0);
			padding: 0px;
		}
			.left{
				position: absolute;
				top: 10%;
				left: 5%;
				z-index: 1;
			}
			.right{
				position: absolute;
				top: 10%;
				right: 5%;
				z-index: 1;
			}
		/*width of teaser content*/
			#core{
				max-width: 210px;
			}
			#auto{
				max-width: 220px;
			}
			#products{
				max-width: 180px;
			}
			#behave{
				max-width: 260px;
			}
			#about{
				max-width: 220px;
			}
			#talk{
				max-width: 240px;
			}
			#features{
				max-width: 240px;
			}
			#join{
				max-width: 150px;
			}
		/*teaser content typography*/
			.label{
				font-size: .9em;
				line-height: 1.5em;
				margin: 0em 0 .7em 0;
			}
				.label_white{
					font-size: .8em;
					font-weight: 300;
					margin: 0em 0 .7em 0;
				}
			.hed{
				font-size: 1.5em;
				line-height: 1.25em;
			}
				.hed_white{
					font-size: 1.5em;
					font-weight: 400;
					margin: 0em 0 .7em 0;
				}
			.teaser{
				font-size: 1em;
				font-weight: 300;
				line-height: 1.25em;
			}
				.teaser_white{
					font-size: 1em;
					font-weight: 300;
				}
}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

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

	/*container*/
	.video-container{
		position: relative;
		margin: 0 0 0 0;
	}
		#mobile1{display: none;}
		#mobile1{display: none;}
		#tab{display: block;}
	.video-teaser{
		/*border: 1px solid yellow;*/
		font-size: 1.75em;
		line-height: 1.15em;
		width: 330px;
		position: absolute;
		top: 50px;
		left: 50px;
	}
		.slide_hed {
			/*border: 1px solid pink;*/
			font-size: 1.5em;
			font-weight: 700;
			width: 100%;
		}
		.slide_text {
			/*border: 1px solid pink;*/
			margin-top: .5em;
			font-size: 1.25em;
			font-weight: 300;
			width: 100%;
		}
		.dots_container {
			/*border: 1px solid yellow;*/
		}
	.container_home{
		display: block;
	}
	.teaser_box{
		/*border: 1px solid yellow;*/
	}
		.teaser-content_right{
			/*border: 1px solid yellow;*/
		}

		.teaser-content_left{
			/*border: 1px solid yellow;*/
		}
			#overview{
				max-width: 350px;
			}
			#core{
				max-width: 310px;
			}
			#auto{
				max-width: 310px;
			}
			#products{
				max-width: 250px;
			}
			#behave{
				max-width: 375px;
			}
			#about{
				max-width: 310px;
			}
			#talk{
				max-width: 330px;
			}
			#features{
				max-width: 360px;
			}
			#join{
				max-width: 330px;
			}
		.label{
			font-size: .9em;
			line-height: 1.5em;
			margin-bottom: 1em;
		}
			.label_white{
				font-size: .7em;
			}
		.hed{
			font-size: 2.25em;
			line-height: 1.25em;
		}
			.hed_white{
				font-size: 1.75em;
			}
		.teaser{
			font-size: 1.25em;
			line-height: 1.5em;
		}
			.teaser_white{
				font-weight: 300;
				font-size: 1em;
			}
		.hotbutton_b{
			font-size: .9em;
			padding: 5px 10px;
			margin-top: 2em;
		}
		.hotbutton_w{
			font-size: .7em;
			padding: 5px 10px;
			margin-top: 2em;
		}
}  	

/* LARGE: DESKTOP: ORANGE; ************************************/

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

		#overview{
			max-width: 370px;
		}
}

/* X-LARGE: DESKTOP: CYAN; ************************************/

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


}

/* XX-LARGE: DESKTOP: RED; ************************************/

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


}