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

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

	/****************************** STRUCTURE ************************************/

	#outer-wrapper{
		/*border: 1px solid lightblue;*/
		width: 95%;
		margin: 0 2.5%; 
		float: left;
	}
		.outer_box1, .outer_box2{
			width: 100%;
			margin: 0 0%;
			float: left;
		}
			#outer_wrapper img{
				/*border: 1px solid #E2E2E2;*/
				width: 100%;
			}

	/****************************** WEB PROMO ************************************/


		.web_promo{
			/*border: 1px solid #c7c7c7;*/
			width: 100%;
			padding: 40px 40px 40px 40px;
			margin-top: 1em;
			float: left;
		}		
			#outer_promo{
				background-color: rgba(123,125,166,.2);
			}
			#outer_promo a{
				text-decoration: none;
				color: #C7C7C7;
			}
			a#outer_promo:hover{
				background-color: rgba(123,125,166,.5);
				font-weight: 300;
				color: white;
			}
		img#frontier_promo-art{
			width: 70%;
			margin: 3em 15% 0 15%;
			float: left;
		}
		.web_promo img#web_icon{
			width: 40px;
			margin-left: 15px;
		}	
}

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

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


	#outer_wrapper{
		/*border: 1px solid lime;*/
		width: 90%;
		margin: 0 5%;
		float: left;
	}
		.outer_box1, .outer_box2{
			width: 100%;
			margin: 0 0%;
			float: left;
		}
			#outer_wrapper img{
				/*border: 1px solid #E2E2E2;*/
				width: 100%;
			}
	
	.web_promo{
		background-color: rgba(123,125,166,.2);
	}		
		#outer_promo{
			/*border: 1px solid #c7c7c7;*/
			width: 60%;
			margin: 1em 20% 1em 20%;
			padding: 20px 20px 20px 20px;
			float: left;
		}
		#outer_promo a{
			text-decoration: none;
			color: #C7C7C7;
		}
		a#outer_promo:hover{
			background-color: rgba(123,125,166,.5);
			font-weight: 300;
			color: white;
		}
	img#frontier_promo-art{
		width: 100%;
		margin: 1em 0% 0em 0%;
		float: left;
	}
	.web_promo img#web_icon{
		width: 30px;
		margin-left: 10px;
	}
}

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

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


	#outer_wrapper{
		/*border: 1px solid pink;*/
		width: 90%;
		margin: 0 5%;
		float: left;
	}
		.outer_box1, .outer_box2{
			width: 48%;
			margin: 0 1%;
			float: left;
		}
			#outer_wrapper img{
				/*border: 1px solid #E2E2E2;*/
				width: 100%;
			}
	
	.web_promo{
		background-color: rgba(123,125,166,.2);
	}		
		#outer_promo{
			/*border: 1px solid #c7c7c7;*/
			width: 100%;
			padding: 40px 40px 40px 40px;
			margin: 1em 0 0 0;
			float: left;
		}
		#outer_promo a{
			text-decoration: none;
			color: #C7C7C7;
		}
		a#outer_promo:hover{
			background-color: rgba(123,125,166,.5);
			font-weight: 300;
			color: white;
		}
	img#frontier_promo-art{
		width: 100%;
		margin: 1em 0% 0 0%;
		float: left;
	}
	.web_promo img#web_icon{
		width: 40px;
		margin-left: 10px;
	}
}

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

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


	#outer_wrapper{
		/*border: 1px solid yellow;*/
		width: 90%;
		margin: 0 5%;
		float: left;
	}
	.web_promo img#web_icon{
		width: 40px;
		margin-left: 15px;
	}
}

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

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


	#outer_wrapper{
		/*border: 1px solid orange;*/
		width: 80%;
		margin: 0 10%;
		float: left;
	}
}

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

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

	#outer_wrapper{
		/*border: 1px solid cyan;*/
		width: 80%;
		margin: 0 10%;
		float: left;
	}
}

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

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


}