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

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

	html{
		background-color: #4a4a47;
	}

	body{
		/*background-color: lightblue;*/
		overflow: scroll;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	/********************************  COLORS ************************************/

	#seafoam1{
		background-color: #C7E4E6;
	}
	#seafoam2{
		background-color: #A3D5D8;
	}
	#skyblue{
		background-color: #849FCE;
	}
	#lightblue{
		background-color: #A8B9DD;
	}
	#lightblue2{
		background-color: #B9DFF9;
	}
	#bluegray{
		background-color: #E7F0F8;
	}
	#darkblue{
		background-color: #172F57;
	}
	#gray2{
		background-color: #BCBEC0; 
	}
	#gray3{
		background-color: #A7A9AC;
	}
	.lightblue2{
		color: #B9DFF9;
	}
	/*AUTO_RED #8f2327*/
	/*AUTO_BLUE #253357*/
	/*AUTO_GREY-BLUE #e2e5ed*/
	
	/*dropcap color
	color: #0b6bac;*/

	/********************************  ART ************************************/

	/*mainart all pages*/

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid lime;*/
		width: 100%;
		margin: 50px 0 0 0;
		overflow: hidden;
		background-color: rgba(255,255,255,1);
		position: relative;
		float: left;

		/*margin-top: 4px;*/
	}
	.art-container_mainart{
			/*border: 1px solid pink;*/
			width: 100%;
			float: left;
			margin-bottom: 1em;
			position: relative;
			z-index: 1;
		}
			#autonodyne_logo{
				/*border: 1px solid lime;*/
				width: 30%; 
				display: block;
				margin: 3em 35% 1em 35%;
			}
			#arthead1{
				/*border: 1px solid lightblue;*/
				font-size: 1.5em;
				line-height: 1.25;
				color: black;
				position: relative;
				top: 0;
				left: 0;
				text-shadow: none;
				width: 90%;
				margin: 0 0 0 0;
				padding: 0 5% 0 2.5%;
				z-index: 2;
				float: left;
			}

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


			.container_article{
				/*border: 1px solid red;*/
				width: 100%;
				margin: 0 auto;
				padding: 0;
				/*padding-top: 2em;*/
				float: left;
			}
				.column_left{
					/*border: 1px solid purple;*/
					/*width: 20%;*/ 
					float: none;
					display: none;
				}
				.column_middle{
					/*border: 1px solid lime;*/
					width: 100%; 
					float: left;
					padding: 0 15px;
				}
				.column_right{
					/*border: 1px solid pink;*/
					/*width: 20%;*/ 
					float: left;
					display: none;
				}
					#auto_icon{
						/*border: 1px solid lime;*/
						width: 40%;
						margin-left: 7%;
						margin-top: 1em;
					}
				.text_wrapper{
					/*border: 1px solid lightblue;*/
					width: 100%;
					padding: 0 15px;
					margin: 0 auto;
					display: block;
				}

				/*Graphics container*/
				#two_threew{
				    width: 80%;
				    /*border: .5px solid pink;*/
				    float: left;
				    margin: 1em 10% 1em 10%;
				}


	/********************************  RULING ************************************/

	/*FULL COLUMN RULE*/
	.rule_fullw{
		/*border: 1px solid cyan;*/
	    /*width: 80%;
	    border-bottom: 1px solid lightgrey;
	    float: left;
	    margin: 2em 10% 2em 10%;*/
	    width: 100%;
	    margin: 2em 0% 2em 0%;
		background: linear-gradient(to right, rgba(97,182,253,0), #61b6fd, rgba(97,182,253,0));
	    background-image: linear-gradient(to right, rgba(97, 182, 253, 0), rgb(97, 182, 253), rgba(97, 182, 253, 0));
	    height: 1px;
	    float: left;
	}

	/*2/3s RULE*/
	.rule_two-thirds{
		/*border: 1px solid cyan;*/
	    border-bottom: 1px solid lightgrey;
		width: 60%; 
		margin: 1em 20% 1em 20%; 
		float: left;
	}

	/******************************** HOTLINKS, EMAIL LINKS ************************************/


	/*IN TEXT and EMAIL LINKS*/
	.hotlinks, .email-links{
		font-family: "Roboto";
		color: #187ec6; 
		font-weight: 700;
	}
	a.hotlinks, a.email-links{
		text-decoration: none; 

	}
	a.hotlinks:hover, a.email-links:hover{
		color: #172F57; 
		text-decoration: none; 
		cursor: pointer; 
		font-weight: 900;
	}

	/******************************** EDITOR NOTES ************************************/

	.red{
		color: #a61e22;
	}


	/********************************* ART CONTAINERS ***********************************/

	.art-container{
		/*border: 1px solid red;*/
		width: 100%;
		float: left;
		margin: 0 0 0 0;
	}
	.art-container_full{
		/*border: 1px solid lime;*/
		width: 100%;
		float: left;
		margin: 0 0;
	}
	.art-container_three-quarters{
		/*border: 1px solid pink;*/
		width: 75%;
		margin: 0 12.5% 1em 12.5%;
		float: left;
		display: block;
	}
	.art-container_inline{
		/*border: 1px solid red;*/
		margin: 0 0 1em 1em;
		float: left;
	}
	.art-container_inline-right{
		/*border: 1px solid red;*/
		padding: 0;
		margin: 0 0 .5em 1em;
		float: right;
		width: 45%;
	}

	/******************************* PHOTO CREDITS/CUTLINES *************************************/


	.art_credit{
		/*border: 1px solid red;*/
		font-family: "Roboto";
		font-size: .7em;
		font-weight: 300;
		text-transform: uppercase;
		text-align: right;
		margin-top: 3px;
		margin-bottom: 0px;
		display: block;	
		padding-right: 15px;
	}
	.art_cutline{
		/*border: 1px solid red;*/
		font-family: "Roboto";
		font-size: .9em;
		font-weight: 400;
		padding-left: 15px;
		line-height: 1.25em;
		display: block;
	}

	.sourceline{
		/*border: 1px solid red;*/
		font-size: .7em;
	}

	.photowrapper-80pct{
		width: 80%;
		margin: 0 auto;
		display: block;
		/*border: 1px solid red;*/
	}
	.photo-credit{font-size: .7em; text-align: right; margin-bottom: 0}
	.photo-source{text-align: right; text-transform: uppercase; font-size: .7em; margin-top: 10px;}
	.cutline{text-align: left; margin: 10px 0 0 0; display: block;}


	/******************************** GRAPHICS ************************************/


	.graphic_head{
		font-family: "Roboto";
		font-size: 1em;
		font-weight: 900;
		color: black;
		margin-top: 1em;
		text-transform: uppercase;
		display: block;
		width: 100%;
		float: left;
	}
	.graphic_chatter{
		font-size: .9em;
	}

	/****************************** QUOTES **************************************/


	/*INLINE*/
	.quote{
		width: 100%;
		padding: 20px 20px 5px 20px;
		background-color: #172F57;
	}
		.quote_inline-text{
			font-family: "Roboto";
			font-size: 1em;
			font-weight: 700;
			color: white;
		}
		.quote_inline-attribution{
			font-family: "Roboto";
			font-size: .7em;
			font-weight: 300;
			color: #56ACFB;
			text-align: right;	
		}	
	.footnote{
		font-family: "Roboto";
		font-size: .7em;
		font-weight: 300;
		color: #58595B;
		text-align: left;	
	}


	/****************************** TYPOGRAPHY **************************************/

	html{font-size: 1em;}

	h1{
		/*border: 1px solid cyan;*/
		font-family: "Roboto";
		font-weight: 700;
		font-size: 2em;
		line-height: 1.25em;
		color: #3e3e3f;
		margin-top: 1.5em;
		margin-bottom: 1em;
		width: 100%;
		float: left;
	}
	h2{
		/*border: 1px solid cyan;*/
		font-family: "Roboto";
		font-weight: 900;
		font-size: 1.25em;
		line-height: 1.25em;
		text-transform: uppercase;
		text-align: center;
		color: #3e3e3f;
		margin-top: 1em;
		margin-bottom: .5em;
		width: 100%;
		float: left;
	}
	h3{
		/*border: 1px solid cyan;*/	
		font-family: "Roboto";
		font-weight: 900;
		font-size: 1.5em;
		line-height: 1.25em;
		text-align: center;
		color: #3e3e3f;
		margin-top: 1em;
		margin-bottom: 1em;
		/*border: 1px solid red;*/
		width: 100%;
		float: left;
	}
	h4{
		font-family: "Roboto";
		font-weight: 900;
		font-size: 1.25em;
		line-height: 1.25em;
		margin-top: 1em;
		margin-bottom: 1em;
		text-transform: none;
		color: #3e3e3f;
		width: 100%;
		float: left;
		/*border: 1px solid red;*/
	}
	h5{
		font-family: "Roboto";
		font-weight: 500;
		font-size: .9em;
		line-height: 1.25em;
		margin-bottom: 1em;
		text-transform: uppercase;
		text-align: left;
		color: #3e3e3f;
		width: 100%;
		float: left;
		/*border: 1px solid red;*/
	}
	h6{
		font-family: "Roboto";
		font-weight: 500;
		font-size: .9em;
		line-height: 1.25em;
		color: #3e3e3f;
		margin-bottom: 1em;
		width: 100%;
		float: left;
		/*border: 1px solid red;*/
	}

	p{
		font-family: "Roboto";
		font-weight: 300;
		font-size: 1em;
		line-height: 1.5em;
		margin-bottom: 1em;
		color: rgba(0,0,0,1);
	}
	.leadin{
		font-family: "Roboto";
		font-weight: 300;
		font-size: 1.125em;
		line-height: 1.25em;
		color: #3e3e3f;
		margin-bottom: 1em;
		width: 100%;
		float: left;
		/*border: 1px solid red;*/

	}

	/******************************* ACCORDION *************************************/

	.accordion {
		/*border: 1px solid lightblue;*/
		font-size: .8em;
		line-height: 1.5em;
		font-weight: 500;
		/*letter-spacing: 10px;*/
		text-transform: uppercase;
		color: #2E639D;
		background-color: #E7F0F8;
		text-align: left;
		padding: 18px 18px 18px 18px;
		width: 95%;
		margin: 0 2.5%;
		display: block;
		border: none;
		outline: none;
		transition: 0.4s;
	}
	.more_content{
		max-height: 0;
		overflow: hidden;
		/*display: none;*/
		transition: max-height 0.3s ease-out;
	}
	.accordion:after {
 		content: '\02795'; /* Unicode character for "plus" sign (+) */
		font-size: 1em;
		/*color: #777;*/
		float: right;
		margin-left: 5px;
		z-index: 1;
		padding: 0;
	}
	.active:after {
		content: "\2796"; /* Unicode character for "minus" sign (-) */
		z-index: 1;
		padding: 0;
	}


	/******************************* SPANS *************************************/

	.dropcap{
		color: #6F6E88;
		font-weight: 400;
	  	float: left;
	  	font-family: "roboto slab";
	  	font-size: 50px;
	  	line-height: 45px;
	  	padding-top: 0px;
	  	padding-right: 8px;
	  	padding-left: 3px;
	}
	.bold{
		font-weight: 500;
		/*color: #414042;*/
	}
	.bolder{
		font-weight: 700;
		/*color: #414042;*/
	}

	.italic{
		font-style: italic;
	}
	sup {
	  vertical-align: text-top;
	  font-size: .7em;
	  line-height: 1em;
	}
	 .bullet {
		color: #A5D9DE;
		font-size: 1.75em;
		margin-right: 5px;
		vertical-align: middle;
	}
	.black{font-weight: 900;}
	.light{color: #acc2fa;}
	.bf-leadin{font-weight: 700;}
	.time_stamp{text-align: center; text-transform: uppercase; color: #8f2327; padding-bottom: 1em;}
	.white{color: white; font-size: 1.25em;}
	.blue{color: #56ACFB;}

}


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

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

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

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid orange;*/
		width: 100%;
		margin: 0 0 0 0;
	}
	#arthead1{
		/*border: 1px solid lime;*/
		font-size: 1.5em;
		color: black;
		text-shadow: none;
		width: 70%;
		margin: 1em 15% 0em 15%;
		padding: 0 0 0 0;
		position: relative;
	}
	.container_article{
		width: 100%;
		margin: 0 auto;
		display: block;
	}
		.column_left{
			/*border: 1px solid purple;*/
			width: 25%; 
			float: left;
			display: none;
		}
		.column_middle{
			/*border: 1px solid lime;*/
			width: 70%;
			margin: 0 15%;
			display: block;
			padding: 0 0 0 0;
		}
		.column_right{
			/*border: 1px solid pink;*/
			width: 25%; 
			float: left;
			display: none;
		}
	.text_wrapper{
		/*border: 1px solid lime;*/
		width: 70%;
		margin: 0 15%;
		padding: 0 0;
		display: block;
		float: left;
	}
	.accordion {
		/*border: 1px solid red;*/
		font-size: .8em;
		line-height: 1.5em;
		font-weight: 500;
		text-transform: uppercase;
		color: #2E639D;
		background-color: #E7F0F8;
		text-align: left;
		padding: 18px;
		width: 70%;
		margin: 0 15%;
		display: block;
		border: none;
		outline: none;
		transition: 0.4s;
	}
	.more_content{
		max-height: 0;
		overflow: hidden;
		/*display: none;*/
		transition: max-height 0.3s ease-out;
	}
	.accordion:after {
 		content: '\02795'; /* Unicode character for "plus" sign (+) */
		font-size: 1em;
		/*color: #777;*/
		float: right;
		margin-left: 5px;
	}
	.active:after {
		content: "\2796"; /* Unicode character for "minus" sign (-) */
	}
}

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

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


	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid orange;*/
		width: 100%;
		margin: 50px 0 0 0;

	}
	#arthead1{
		/*border: 1px solid pink;*/
		color: white;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		position: absolute;
		left: 20px;
		top: 30px;
		text-shadow: 2px 2px 5px rgba(0,0,0,.6);
	}
	.art-container{
			/*border: 1px solid pink;*/
			width: 100%;
			float: left;
			background-color: white;
			margin-bottom: 0em;
			position: relative;
			z-index: -2;

		}
			#autonodyne_logo{
				display: none;
			}
	.container_article{
		/*border: 1px solid orange;*/
		width: 100%;
		margin: 0 auto;
		display: block;
	}
		.column_left{
			/*border: 1px solid purple;*/
			width: 25%; 
			float: left;
			display: block;
		}
		.column_middle{
			/*border: 1px solid lime;*/
			width: 50%;
			margin: 0 auto;
			float: left;
			padding: 0 0px;
		}
		.column_right{
			/*border: 1px solid pink;*/
			width: 25%; 
			float: left;
			display: block;
		}
	.text_wrapper{
		/*border: 1px solid pink;*/
		width: 50%;
		margin: 0 25%;
		padding: 0 0;
		display: block;
		float: left;
	}
	.accordion {
		font-size: .8em;
		width: 50%;
		margin: 0 25%;
	}
}

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

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

	body{
		/*background-color: lightyellow;*/
	}

	.text_wrapper{
		/*border: 1px solid yellow;*/
	}	

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid orange;*/
		width: 100%;
		margin: 50px 0 0 0;

	}
	#arthead1{
		/*border: 1px solid yellow;*/
		font-size: 2em;
		color: white;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		position: absolute;
		left: 40px;
		top: 30px;
		text-shadow: 2px 2px 5px rgba(0,0,0,.6);
	}
	.art-container{
			/*border: 1px solid pink;*/
			width: 100%;
			float: left;
			/*background-color: white;*/
			margin-bottom: 0em;
			position: relative;
			z-index: -2;
		}
			#autonodyne_logo{
				display: none;
			}
	.container_article{
		/*border: 1px solid orange;*/
		width: 100%;
		margin: 0 auto;
		display: block;
	}
		.column_left{
			/*border: 1px solid purple;*/
			width: 25%; 
			float: left;
			display: block;
		}
		.column_middle{
			/*border: 1px solid lime;*/
			width: 50%;
			margin: 0 auto;
			float: left;
			padding: 0 0px;
		}
		.column_right{
			/*border: 1px solid pink;*/
			width: 25%; 
			float: left;
			display: block;
		}
	.accordion {
		font-size: 1em;
		width: 50%;
		margin: 0 25%;
	}
}   

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

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


	.text_wrapper{
		/*border: 1px solid orange;*/
	}

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid orange;*/
		width: 90%;
		margin: 50px 5% 0 5%;
	}
	#arthead1{
		/*border: 1px solid orange;*/
		font-size: 2em;
		color: white;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		position: absolute;
		left: 40px;
		top: 30px;
		text-shadow: 2px 2px 5px rgba(0,0,0,.6);
	}
}

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

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

	.text_wrapper{
		/*border: 1px solid cyan;*/
	}

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid cyan;*/
		width: 80%;
		margin: 50px 10% 0 10%;
	}
	#arthead1{
		/*border: 1px solid cyan;*/
		font-size: 2.5em;
		color: white;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		position: absolute;
		left: 40px;
		top: 30px;
		text-shadow: 2px 2px 5px rgba(0,0,0,.6);
	}
}

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

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

	.text_wrapper{
		/*border: 1px solid red;*/
	}

	#homepage, #overview_page, #core-areas_page, #autonomy_page, #products_page, #behaviors_page, #about-us_page, #contact-us_page, #features_page, #join-us_page, #news_page, #privacy_page{
		/*border: 1px solid orange;*/
		width: 70%;
		margin: 50px 15% 0 15%;
	}
	#arthead1{
		/*border: 1px solid red;*/
		font-size: 2em;
		color: white;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		position: absolute;
		left: 40px;
		top: 30px;
		text-shadow: 2px 2px 5px rgba(0,0,0,.6);
	}
}