@charset "utf-8";

/* --------------------------------------------------------------------------------------
   Responsive Styles
----------------------------------------------------------------------------------------- */


/* Landscape phones and down */
@media screen and (max-width: 480px) { 
	html, body							{ min-width:0; }
	#menu 								{ display:none; }
	#res-menu 							{ display:block; margin-top:20px; }
	.wrapper							{ width:94%; padding:0 3% 0 3%; }
	.container 							{ min-width:0px; width:100%; }
	#header-container 					{ min-width:0px; width:100%; background:url('/images/header-phone-bg.png') top center no-repeat; }
	#header 							{ height:198px; }
	#slider-container 					{ min-width:0px; width:100%; }
	.slider .text 						{ text-align:center; margin:0 0 0 60px; }
	.slider .text h2 					{ font-size:22px;line-height:28px; }
	.slider .text h2 a					{ font-size:22px;line-height:28px; }
	#footer-container 					{ min-width:0px; width:100%; }
	#background 						{ right:0px; }
	.content .left 						{ width:96%; margin:10px 0 10px 0; padding:0 2% 0 2%; border:none; }
	.content .right						{ width:96%; margin:10px 0 40px 0; padding:0 2% 0 2%; float:left; }
	.gallery img 						{ width:200px; height:117px; }
	#footer .column 					{ width:96%; margin:0 2% 40px 2%; }
	#footer .column:nth-of-type(3) 		{ margin:0 2% 20px 2%; }
	.phone 								{ width:100%; margin:24px 0 0 0; }
	.logo 								{ width:50%; margin:50px 0 0 10px; }
	.content h1 						{ font-size:16px; line-height:28px; }
	.project .text 						{ width:100%; }
	.project .gallery 					{ width:100%; float:left; }
	.project .gallery img 				{ width:100%; height:auto; margin:0 0 10px 0; }
	#contact .form 						{ width:97%; margin:0 0 40px 0;}
	#contact .info 						{ width:97%; float:left;}
	#contact .form-item 				{ width:100%; margin:0 0 20px 0; }
	#contact .form-input 				{ width:97% !important; }
	dt 									{ width:100%; }
	dd 									{ width:100%; margin-bottom:20px; }

}

/* Landscape phone to portrait tablet */
@media screen and (min-width: 481px) and (max-width: 767px) { 
	html, body							{ min-width:0; }
	#menu 								{ display:none; }
	#res-menu 							{ display:block; }
	.wrapper							{ width:96%; padding:0 2% 0 2%; }
	.container 							{ min-width:0px; width:100%; }
	#header-container 					{ min-width:0px; width:100%; background:url('/images/header-res-bg.png') top left no-repeat; }
	#header 							{ height:198px; }
	#slider-container 					{ min-width:0px; width:100%; }
	#footer-container 					{ min-width:0px; width:100%; }
	#background 						{ right:0px; }
	.slider .text 						{ margin:0 0 0 60px; }
	.content .left 						{ width:96%; margin:10px 0 10px 0; padding:0 2% 0 2%; border:none; }
	.content .right						{ width:96%; margin:10px 0 40px 0; padding:0 2% 0 2%; float:left; }
	.gallery img 						{ width:200px; height:117px; }
	#footer .column 					{ width:96%; margin:0 2% 40px 2%; }
	#footer .column:nth-of-type(3) 		{ margin:0 2% 20px 2%; }
	.phone 								{ width:100%; margin:24px 0 0 0; }
	.logo 								{ width:50%; margin:50px 0 0 10px; }
	.project .text 						{ width:100%; }
	.project .gallery 					{ width:100%; float:left; text-align: left; }
	.project .gallery img 				{ width:200px; height:117px; }
	#contact h2 						{ font-size:30px; }
	#contact .form 						{ width:52%; }
	#contact .info 						{ width:42%; }
	#contact .form-item 				{ width:100%; margin:0 0 20px 0; }
	#contact .form-input 				{ width:97% !important; }
	dt 									{ width:100%; }
	dd 									{ width:100%; margin-bottom:20px; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	html, body							{ min-width:0; }
	#menu 								{ display:none; }
	#res-menu 							{ display:block; }
	.wrapper							{ width:96%; padding:0 2% 0 2%; }
	.container 							{ min-width:0px; width:100%; }
	#header-container 					{ min-width:0px; width:100%; background:url('/images/header-res-bg.png') top left no-repeat; }
	#header 							{ height:198px; }
	#slider-container 					{ min-width:0px; width:100%; }
	#footer-container 					{ min-width:0px; width:100%; }
	#background 						{ right:0px; }
	.slider .text 						{ margin:0 0 0 60px; }
	#contact .form-item 				{ width:100%; margin:0 0 20px 0; }
	#contact .form-input 				{ width:97% !important; }
	dt 									{ width:100%; }
	dd 									{ width:100%; margin-bottom:20px; }

}

@media screen and (min-width: 1024px) and (max-width: 1150px) {
	.slider .text 						{ margin:0 0 0 60px; }
	#background 						{ right:10px; }
}

@media screen and (min-width: 1151px) and (max-width: 1220px) {
	#background 						{ right:-50px; }
}