/* 
 * Responsive Layout declarations
 * Author: Sebastien Marchal
 *
 * Mainly used to set font and layout changes between sizes.
 *
 */

/* General
----------------------- */

@media only screen 
and (min-width: 801px) {
	
	/* This restores the menus when going from mobile view to desktop view */
	.main-menu { display: inline-block !important; }

}

/* Large Desktop
----------------------- */

@media only screen 
and (min-width : 1601px) {
	
	/* Global layout */
	.sub-container { width: 1305px; }
	body { font-size: 1.3em; }
	#content .entry-content .content { width: 60%; }
		
}

/* Desktop
----------------------- */

@media only screen 
and (min-width : 1215px) and (max-width: 1600px)  { /* for anything above n, do this. This screen size is the primary size for the site. It is defined in style.css */
	
	/* Global layout */
	.sub-container { width: 1040px; }
	body { font-size: 1.1em; }
	#content .entry-content .content { width: 60%; }
}

/* Tablet
----------------------- */

@media only screen 
and (min-width : 801px) and (max-width: 1214px) { /* previously 691px min */
	
	/* Global layout */
	.sub-container { width: 775px; }
	#content .entry-content .content { width: 75%; }

}


/* Mobile
----------------------- */

@media only screen 
and (max-width: 800px) { /*  */

	/* Global layout */
	.sub-container { width: 85%; }
	body { font-size: .9em; }
	#content .entry-content .content { width: 100%; }
	
}