/* ===========================
   ====== Media Queries ====== 
   =========================== */
   
   
/* ===========================
   ====== normal screens ====== 
   =========================== */
@media screen and (max-width: 1000px) 
{
	.body 
	{
		clear: both; 
		margin: 0 auto; 
		width: 100%;
		font-size: 90%;
	}	
	
	#header .logo
	{
		width:30%;
		height: auto;
		float:left;
		padding:0;
		margin: 3% 0;
	}
	
	#header .logo img
	{
		width: 100%;
		height: auto;
		padding:0;
		margin:0;
	}
	
	#header nav
	 {	
		font-size:1.143em;
		text-align:center;
		height:40px;
		line-height:30px;
		float:right;
		margin:7% 0 0 auto;	
		background: #666;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
		
	#header nav ul {
		list-style: none; 
		margin: 0 auto;
	}

	#header nav ul li {
		float: left; 
		display: inline; 
	}
		
	#header nav a:link, #header nav a:visited 
	{
		color: #fff;
		display: inline-block;
		height: 30px;
		padding: 5px 23px;
		text-decoration: none;
	}
	#header nav a:hover, #header nav a:active,
	#header nav .active a:link, #header nav .active a:visited 
	{
		background: #CF5C3F;
		color: #fff;
		text-shadow: none !important;
	}
		
	#header nav li a 
	{
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	#box-wrapper ul
	{
		list-style:none;
		padding:0;
		margin:1% 0;		
		float:left;
	}

	#box-wrapper ul li
	{
		width:24%;
		height: 320px;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		padding: 2% 3%;
	}

	#box-wrapper .middle-box
	{
		margin-left:5%;
	}

	#box-wrapper .right-box
	{
		float:right;
	}
	
	#box-wrapper li article img
	{
		width:95%;
		height:auto;
		float:none;
		padding:0;
		margin:2.5%;
	}
	
	
	#box-wrapper li article h2
	{
		font:150% arial,sans-serif;
		font-weight:bold;
	}
}
   
/* ===========================
   ====== Tablets ====== 
   =========================== */
@media screen and (max-width: 720px) 	
{
	.body 
	{
		clear: both; 
		margin: 0 auto; 
		width: 100%;
		font-size: 90%;
	}	
	
	#header .logo
	{
		width:50%;
		height: auto;
		float:left;
		padding:0;
		margin: 3% 0;
	}
	
	#header .logo img
	{
		width: 100%;
		height: auto;
		padding:0;
		margin:0;
	}
	
	 
	#header nav
	 {	
		font-size:1.143em;
		text-align:center;
		width:100%;
		height:40px;
		line-height:30px;
		float:left;
		margin:2% 0 2% 0;	
		background: #666;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
		
	#header nav ul 
	{
		list-style: none; 
		margin: 0 auto;
	}

	#header nav ul li {
		float: left; 
		display: inline; 
	}
		
	#header nav a:link, #header nav a:visited
	{
		color: #fff;
		display: inline-block;
		height: 30px;
		padding: 5px 23px;
		text-decoration: none;
	}
	#header nav a:hover, #header nav a:active,
	#header nav .active a:link, #header nav .active a:visited
	{
		background: #CF5C3F;
		color: #fff;
		text-shadow: none !important;
	}
		
	#header nav li a 
	{
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	#box-wrapper ul
	{
		list-style:none;
		padding:0;
		margin:1% 0;		
		float:left;
	}

	#box-wrapper ul li
	{
		width:24%;
		height: 320px;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		padding: 2% 3%;
	}

	#box-wrapper .middle-box
	{
		margin-left:5%;
	}

	#box-wrapper .right-box
	{
		float:right;
	}
	
	
	/* ====== CONTACT PAGE ====== */	
	#content .contact-info
	{
		width:100%;
		height:auto;
		float:left;
		padding:0;
		margin:2%;
		list-style:none;
	}
	
	
	#content .contact-info article
	{
		width:30%;
		float:left;
		padding:0;
		margin:0 3% 0 0;
		display:inline;
	}
	
	#content .contact-form
	{
		width:92%;
		height:auto;
		float:left;
		padding:0;
		margin:4% 2%;
		list-style:none;
	}
	
		
	#content .contact-form  article
	{		
		width:100%;
		float:left;
		padding:0;
		margin:0;
		display:inline;
	}
	
	#content .contact-form  article content input
	{
		width:100%;
		height:auto;
		float:left;
		border:1px solid #ddd;
		padding:2%;
		margin:3% 0;
		background-image: url('images/inputbg.jpg');
		background-repeat: repeat-x;
		border-radius:4px;
	}
	
		
	#content .contact-form .email-message
	{
		text-align:left;
		width:100%;
		height:auto;
		float:left;
		border:1px solid #ddd;
		padding:2% 2% 5% 2%;
		margin:0 0 2% 0;
		background-image: url('images/inputbg.jpg');
		background-repeat: repeat-x;
		border-radius:4px;
	}
	
		
	#content .contact-form input
	{
		float:right;
		padding:0.7% 2%;
		margin:1% 0;
	}
		
	#box-wrapper li article img
	{
		width:90%;
		height:auto;
		float:none;
		padding:0;
		margin:2.5%;
	}
	
	
	#box-wrapper li article h2
	{
		font:150% arial,sans-serif;
		font-weight:bold;
	}
}
   
/* ===========================
   ====== Phones ====== 
   =========================== */
@media screen and (max-width: 480px) 
{
	.body 
	{
		clear: both; 
		margin: 0 auto; 
		width: 90%;
		font-size: 90%;
	}	
	
	#header .logo
	{
		width: 100%;
		height: auto;
		float:left;
		padding:0;
		margin: 3% 0;
	}
	
	#header .logo img
	{
		width: 100%;
		height: auto;
		padding:0;
		margin:0;
	}
	
	/* menu */
	
	
	.mainContent 
	{
		margin-top: 4%;
		margin-bottom: 2%;
		overflow: hidden;
		line-height: 25px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;		
	}
	
	.topcontent 
	{			
		padding: 2% 5%;
		margin-bottom: 4%;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;
	}
	
	#content 
	{
		width: 100%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}	

	.post-info 
	{
		display: none;
	}
	
	#box-wrapper li article img
	{
		
		margin:0 5.5%;
	}
	
	#box-wrapper li article
	{
		margin:5.5%;
	}
	
	#box-wrapper ul li 
	{
		width: 86%;
		float: right;				
		padding: 0 7%;
		margin-top: 4%;	
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
	}
	
	#box-wrapper ul li p 
	{
		width: 90%;
		margin:3% 0;
	}
	
	
	/* ====== SERVICES PAGE ====== */
	#services
	{
		float:left;
		padding:0;
		margin:2%;
		list-style:none;
	}

	#services li
	{
		width:100%;
		float:left;
		padding:0;
		margin-right:3.3%;
		display:inline;
	}

	#services fieldset
	{
		width:auto;
		float:left;
		border:none;
		border-top:1px solid #e5e4e3;
		background: linear-gradient(to bottom, #f5f5f5 , white);
	}

	#services fieldset img
	{
		width:100%;
		height:130px;
		float:left;
	}

	#services fieldset legend
	{
		font-weight:bold;
	}

	#services article 
	{	
		padding:2%;	
		float:left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;		
		background-color:#fff;
	}
	
	/* ====== CONTACT PAGE ====== */	
	#content .contact-info
	{
		width:100%;
		height:auto;
		float:left;
		padding:0;
		margin:2%;
		list-style:none;
	}
	
	
	#content .contact-info article
	{
		width:100%;
		float:left;
		padding:0;
		margin:0 3% 0 0;
		display:inline;
	}
	
	
	#content .contact-form
	{
		width:92%;
		height:auto;
		float:left;
		padding:0;
		margin:4% 2%;
		list-style:none;
	}
	
		
	#content .contact-form  article
	{		
		width:100%;
		float:left;
		padding:0;
		margin:0;
		display:inline;
	}
	
	#content .contact-form  article content input
	{
		width:100%;
		height:auto;
		float:left;
		border:1px solid #ddd;
		padding:2%;
		margin:3% 0;
		background-image: url('images/inputbg.jpg');
		background-repeat: repeat-x;
		border-radius:4px;
	}
	
		
	#content .contact-form .email-message
	{
		text-align:left;
		width:100%;
		height:auto;
		float:left;
		border:1px solid #ddd;
		padding:2% 2% 5% 2%;
		margin:0 0 2% 0;
		background-image: url('images/inputbg.jpg');
		background-repeat: repeat-x;
		border-radius:4px;
	}
	
		
	#content .contact-form input
	{
		float:left;
		padding:0.7% 2%;
		margin:1% 0;
	}

	
	/* ====== ABOUT PAGE ====== */		
	#content .about-info img
	{
		width:100%;
		height:auto;
		float:left;
		margin:0;
	}
	
	
	#content .about-info p
	{
		width:100%;
		padding:0 2%;
		float:left;
	}
		
	#our-team 
	{
		width:100%;
		float:left;
		padding:0;
		margin:2%;
	}

	#our-team article
	{
		width:100%;
		height:auto;
		float:left;	
		padding:0;
		margin:0;
	}

	#our-team article header
	{
		font-size:1.5em;
	}

	#our-team article img 
	{
		width:50%;
		height:50%;
		padding:1%;
		float:left;	
	}
	
	#our-services
	{
		float:left;
		padding:0;
		margin:2%;
		list-style:none;
	}

	#our-services li
	{
		width:100%;
		float:left;
		padding:0;
		margin-right:3.3%;
		display:inline;
	}

	#our-services fieldset
	{
		width:auto;
		float:left;
		border:none;
		border-top:1px solid #e5e4e3;
		background: linear-gradient(to bottom, #f5f5f5 , white);
	}

	#our-services fieldset img
	{
		width:100%;
		height:130px;
		float:left;
	}

	#our-services fieldset legend
	{
		font-weight:bold;
	}

	#our-services article 
	{	
		padding:2%;	
		float:left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;		
		background-color:#fff;
	}

	
	
	/* ====== FOOTER PAGE ====== */
	.footer 
	{
		color: #FFF;
		width: 100%;
		float: left;
		margin: 2% 0;
		padding-left: 0;
		background-color: #666;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;				
	}
	
	.footer p 
	{
		width: 86%;
		margin: 2% auto;
	}
}