@charset "utf-8";

/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) {

	h2 										{ font-size: 1.6em; margin-bottom: 1.2em; }
	section									{ padding: 40px 0;}

	.summary 								{ font-size: 1.05em; }

	#header-wrapper							{ padding: 40px 0; }
	#header-inner h1						{ width: 280px; }
	#header-inner nav li 					{ margin-left: 60px;}
	#header-inner nav li a					{ font-size: 1.1em;}
	
	#footer-inner							{ padding: 30px 0 60px 0;}

	#mosaic img 							{ width: 19.6%; margin-bottom: .5%; }
	#mosaic img:nth-last-child(-n+4)		{ display: none;}

	#features								{ margin-top: 60px;}

}


/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) { 

	#section-contact dl						{ margin-top: 30px;}

}


/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {
	
	h2 										{ font-size: 1.5em; margin-bottom: 1em; }
	section									{ padding: 30px 0;}

	.column-4 .col-item				     	{ width:48%; margin-right:4%; margin-top:5%; }
	.column-4 .col-item:nth-child(4n)	 	{ margin-right:4%; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:5%; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:4%; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:5%; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:0; }
	
	.paragraph 								{ display: block; margin-bottom: 30px;}
	.paragraph .text 						{ width: 100%; padding: 30px 0 0 0;}
	.paragraph .image 						{ width: 100%;}
	.paragraph.bg-light .text				{ padding: 30px 4%;}

	
	#header-wrapper							{ padding: 30px 0; }
	#header-inner h1						{ width: 250px; }
	#header-inner nav li 					{ margin-left: 50px;}

	#footer-inner							{ padding: 20px 0; font-size: 12px;}

	#mosaic img 							{ width: 24.625%; margin-bottom: .5%; }

	#features .icon							{ height: 40px;}

}


/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) { 
	 
	#header-wrapper							{ padding: 20px 0;}
	#header-inner nav li:nth-child(-n+3) 	{ display: none; }

}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {
	
	h2 										{ font-size: 1.4em; margin-bottom: .6em; }

	/** Column layout **/
	.column-4 .col-item 				 	{ width:100%; margin-right:0; margin-top:30px; }
	.column-4 .col-item:nth-child(4n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:30px; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:30px; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:30px; }
	.column-4 .col-item:nth-child(1) 		{ margin-top:0; }

	#mosaic 								{ margin-bottom: 30px;}
	#mosaic img 							{ width: 33%; margin-bottom: .5%; }
	#mosaic img:nth-last-child(-n+6)		{ display: none;}

	#features 								{ margin-top: 40px;}	
	#features .icon 						{ width: 40px; height: 40px; float: left; margin-bottom: 10px; margin-right: 10px;}
	#features .fr-view 						{ clear: left;}
}

/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) { 

	dt,
	dd										{ margin-bottom: 10px; }

	.summary br 							{ display: none;}

	.button-wrapper .button 				{ width: 100%; font-size: 1.05em;}

	.dropdown .menu 						{ width: 100%;}

	#header-wrapper							{ padding: 15px 0;}
	#header-inner h1						{ width: 240px; }
}

/*
-----------------------------
For 360px or less
-----------------------------
*/

@media screen and (max-width: 360px) {

	#footer-inner p 						{ width: 100%; text-align: center;}
	#footer-inner p:nth-child(2) 			{ display: none;}

}