/*
	Notes:
	=====
	DO NOT change the values from em. We're using em for more flexibility for responsive browsers, allowing people to use zoom.
	=====
	Min-width applies to that break and bigger (or from the break to infinity).
	Max-width applies to that break and lower (or from 0 to the break).
	-----
	Major breakpoints
	-----
	1000px = 62.5em
	640px = 40em
	
	1000 divided by 16 = 62.5em this is the formula for figuring out the px to em conversion for the widths
	=====
*/

/* 1780px = 111.25em */
@media screen and (max-width:111.25em) {
	
	/*.content { width:95%; }*/
	.photo .content img { width:100%; height:auto; }
	
}

/* 1440px = 90em */
@media screen and (max-width:90em) {
	
	.shadow img { width:100%; height:auto; }
}


/* 1180px = 73.75em */
@media screen and (max-width:73.75em) {

	.content p { width:90%; }

}

/* 1050px = 62.625em */
@media screen and (max-width:65.625em) { .content { padding:0 0 0 1em; } }


/* 980px = 61.25em */
@media screen and (max-width:61.25em) {
	
	.info-left,
	.info-right { margin:18em 2em 0 0; }

}


/* 880px = 55 */
@media screen and (max-width:55em) {
	
	#right-pane { width:60%; margin:0 0 0 4em; }
	
	.footer { text-align:center; }
	
}


/* 860px = 53.75em */
@media screen and (max-width:53.75em) {


	.about { background-image:none; width:98%; }
	
	.about p { text-align:left; background:none; opacity:1.0; width:90%; }
	
	.info-left,
	.info-right { width:90%; margin:4em 3em; float:none; text-align:left; }


}

/* 760px = 47.5em */
@media screen and (max-width:47.5em) {
	
	#left-pane { width:100%; position:relative; text-align:center; }
	#left-pane h2 { padding:0; }
	#left-pane h1 a { float: none; margin:0 auto; padding:48px 0 5px 0; }
	
	.nav ul .spacer { padding:0.5em 0; }
	#left-pane h3 { padding:0; }

	#right-pane { width:100%; left:auto; margin:0; }
	
	.block { width:100%; margin:0 auto; padding:4em 0 4em 0; text-align:center; }
	
	.examples .work { float:none; margin:2em auto; }
	
}

/* 700px = 43.75em */
@media screen and (max-width:43.75em) {
	
	.header { margin:2em 0 0; }
	
	.box { width:100%; min-height:120px; position:relative; left:0; float:none; margin:0 0 4px; }
	.box a { min-height:60px; padding:60px 0 0; }
	
	.one,
	.two,
	.three,
	.four { background-position:10% 50%; }
	
	.about { min-height:inherit; padding:2em 0 4em; margin:0; }
	.about .image { display:none; }
	.about-content { width:90%; margin:0; padding:0 0 0 1em; }
	
	.info-left { margin:0 0 2em; }
	.info-right { margin:0; }
	
	.examples .work img,
	.example img,
	.example .shadow-sm-img img,
	.logo img,
	.content .example a img,
	.notxt img { width:100%; height:auto; }


}

/* 600px = 37.5em */
@media screen and (max-width:37.5em) {

	.header h1 a { display:none; }
	
	.content { padding:0 1em; width: 90%; }
	

}


/* 540px = 33.75em */
@media screen and (max-width:33.75em) {


	.header h2 { font-size:4em; text-align:center; }


}


/* 450px = 28.125em */
@media screen and (max-width:28.125em) {
	
	.content .logo { width:100%; margin:4em 0; }
	
	.examples .work { width:100%; height:auto; margin:1em 0; }


}