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

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


	/****************************** CONTAINERS ************************************/


	#auto-main{
		/*border: 1px solid lightblue;*/
		width: 95%;
		margin: 1em 2.5% 0 2.5%;
		float: left;
	}

	/*displays*/
	#auto_box1{
		width: 100%;
		float: left;
	}
	#auto_box1 img{
		width: 95%;
		margin: 0 2.5% 1em 2.5%;
		float: left;
	}
			#stop1{
				position: absolute;
				top: 31%;
				left: 1.4%;
				z-index: 3;
			}
	/*videos*/
	.video_container{
		width: 100%;
		margin-bottom: 0em;
		float: left;
	}
	#auto_box2{
		width: 100%;
		margin: 1em 0 1em 0 ;
		float: left;
	}
		.behaviors_video{
			width: 95%;
			margin: 0 2.5% 0 2.5%;
			float: left;
		}
	/*secenario interactive*/
	#auto_box3{
		width: 100%;
		margin-bottom: 1em;
		float: left;
	}
		#auto_box3 img{
			width: 95%;
			margin: 0 2.5% 1em 2.5%;
			float: left;
		}

	/*slide decks*/
	#auto_box4{
		margin-top: 1em;
		width: 100%;
		float: left;
	}
	#auto_box4 img{
		width: 95%;
		margin: 0 2.5% 1em 2.5%;
		float: left;
	}

		/****************************** TOOLTIP ************************************/

		.tooltip {
			cursor: pointer;
			font-family: "Roboto Slab", serif;
			font-weight: 1.25em;
			line-height: 1.5em;
			text-align: center;
			vertical-align: center;
			font-weight: 700;
			background-color: #F2DB68;
			width: 25px;
			height: 25px;
			position: relative;
			display: inline-block;
			z-index: 1;
		}
			.tooltip_text{
				text-align: left;
				padding: 0 20px;
			}
		.tooltip-content {
			display: none;
			position: absolute;
			margin-top: 5px;
			background-color: #f9f9f9;
			min-width: 300px;
			opacity: .9;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			z-index: 1;
		}
			#right{
				right: 0;
			}
			#left{
				left: 0;
			}
			#middle{
				left: -170px;
			}
		.tooltip:hover .tooltip-content {
			display: block;
		}


		/*span*/
		.bold{
			font-weight: 500;
		}
	
	/****************************** WEB PROMO ************************************/

	.web_promo{
		width: 40%;
		font-family: "Roboto";
        font-weight: 300;
        font-size: 1em;
		background-color: #f7f7f7;
        padding: 20px 10px 10px 10px;
        text-align: center;
        border-radius: 15px;
        margin: 0 30%;
        float: left;
	}
	.web_promo a{
		text-decoration: none;
		cursor: pointer;
        color: rgba(106, 135, 162, 1);
		vertical-align: middle;
	}
	.web_promo a:hover{
        font-weight: 700;
	}
	#learn_icon4{
		width: 40px;
		height: 40px;
		margin: 0 auto 1em auto;
		display: block;
	}

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

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

	#auto-main{
		/*border: 1px solid lime;*/
		width: 90%;
		margin: 0 5%;
		float: left;
	}
	/*displays*/
	#auto_box1{
		width: 50%;
		float: left;
	}
	#auto_box1 img{
		width: 95%;
		margin: 0 2.5% 1em 2.5%;
		float: left;
	}
			#stop1{
				position: absolute;
				top: 31%;
				left: 1.4%;
				z-index: 3;
			}
	/*videos*/
	#auto_box2{
		width: 50%;
		margin: 1em 0;
		float: left;
	}
		.behaviors_video{
			width: 95%;
			margin: 0 2.5% 1em 2.5%;
			float: left;
		}
	/*secenario interactive*/
	#auto_box3{
		width: 100%;
		margin-bottom: 1em;
		float: left;
	}
		#auto_box3 img{
			width: 95%;
			margin: 0 2.5% 1em 2.5%;
			float: left;
		}

	/*slide decks*/
	#auto_box4{
		margin-top: 1em;
		width: 50%;
		float: left;
	}
	#auto_box4 img{
		width: 95%;
		margin: 0 2.5% 1em 2.5%;
		float: left;
	}
	.web_promo{
		width: 50%;
        padding: 20px 10px 10px 10px;
        margin: 0 25%;
	}
}

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

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


		#auto-main{
			/*border: 1px solid pink;*/
			width: 90%;
			margin: 0 5%;
			float: left;
		}
}

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

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

		#auto-main{
			/*border: 1px solid yellow;*/
			width: 80%;
			margin: 0 10%;
			float: left;
		}

}

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

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

		#auto-main{
			/*border: 1px solid orange;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}

}

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

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

		#auto-main{
			/*border: 1px solid cyan;*/
			width: 60%;
			margin: 0 20%;
			float: left;
		}

}

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

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

		#auto-main{
			/*border: 1px solid red;*/
			width: 70%;
			margin: 0 15%;
			float: left;
		}

}