#popup{height: 200px; width: 80%;
	margin-right: 10%;
	float: right;
	background-color: fuchsia;
	position: absolute;
	top:50px;
	left: 50px;
}

.phonehero{height:400px;}
.phonelogoimg{height:80px;}

		.phonelogo{height:80px;}	

.small{display:none;}
.big{display: block;}

.left{text-align: right;}



.layout{background-color: #f5f5f5; }

.hide{display: none;}

.logo{float:left; margin: 0; padding: 0; padding-top: 5px; }


body{margin: 0; padding: 0; }

  

/*Base Grid */




.hidephone{display:block;}


.servicegrid{width:23.5%; height:auto;float:left; margin-left:2%; overflow:hidden;}


.smallgrid{float: left; padding: 10px; width: 205px; display: inline-block; overflow: hidden; padding-bottom: 0; padding-top: 0;margin: 0; height: auto; }

.grid{height: 200px;float: left; padding: 10px; width: 300px; display: inline-block; overflow: hidden;}
.grid2{height: 200px;float: left; padding:10px; width: 280px; display: inline-block; overflow: hidden; }

.phone{display: none;}

.row{margin-bottom: 20px; width: 100%;}
.main{margin:auto; padding: 0; width: 900px; padding-top: 40px;  }


 .push{padding-top: 180px;	
 }
 #popup { display: none; }

.share{display: block;}
	
.bottom{position:fixed; bottom: 0px;  width: 100%;  background-color: #ffffff; height: 35px; }

 #footer{margin:auto; padding: 0; width: 900px;   }

.top{position:fixed; top: 0; width: 100% ; background-color: #ffffff;  }




.column{min-height: 1px; float: left; margin-left: 10px; margin-right: 10px; }



.one 	{ width:55px }
.two 	{ width:130px }
.three	{ width:205px }
.four	{ width:280px }
.five	{ width:355px }
.six	{ width:430px }
.seven	{ width:505px }
.eight	{ width:580px }
.nine	{ width:655px }
.ten	{ width:730px }
.eleven	{ width:805px }
.twelve	{ width:880px }





 .first{margin-left:0;}
.last{margin-right:0;}

 
  



 /* Nicolas Gallagher's micro clearfix */
	 .row:before, .row:after, .clearfix:before, .row:after { content:""; display:table; }
	 .row:after, .clearfix:after { clear: both; }
	 .row, .clearfix { zoom: 1; }
	 
	 
	 /* <!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	/* */
	 
	 
	 											/* up to first thingy max size on screen 960 ~= 1000*/
	 							 
	 								
	 								
	 @media only screen and (max-width: 960px) {
									  #popup { display: block; }


.share{display: block;}
	
.bottom{position:fixed; bottom: 0px;  width: 100%;  background-color: #ffffff; height: 35px; }

 #footer{margin:auto; padding: 0; width: 900px;   }

.top{position:fixed; top: 0; width: 100% ; background-color: #ffffff;  }


.phone{display: none;}



.hidephone{display:block;}

 
 
 
 
	 				.logo{float:left; margin: 0; padding: 0;}
				
	 								.main{margin:auto; padding: 0; width: 720px; padding-top: 30px; }
	 								
.push{padding-top: 180px; }


#footer{margin:auto; padding: 0; width: 900px;   }

	 						.layout{background-color:#e63232;}
			.column{min-height: 1px; float: left; margin-left: 10px; margin-right: 10px; }

	
									
.servicegrid{width:48%; height:230px;float:left; margin:1%; overflow:hidden;}



.one 	{ width:40px }
.two 	{ width:100px }
.three	{ width:160px }
.four	{ width:220px }
.five	{ width:280px }
.six	{ width:340px }
.seven	{ width:400px }
.eight	{ width:460px }
.nine	{ width:520px }
.ten	{ width:580px }
.eleven	{ width:640px }
.twelve	{ width:700px }



 
	 								.grid2{height: 220px; float: left; padding: 10px; width: 340px; display: inline-block; margin-bottom: 10px; overflow: hidden; }
	 								

	 			 

	 								
	 						} 		
	 								
	 		
 
	  
	
	 /* up to second thingy========== BIgger iphone and smaller Size ============*/
	  
	 @media screen and (max-width: 720px) {
		 
		 	.layout{background-color:#73dee5; }
		 	


.hidephone{visibility:hidden;}

.phonehero{height:280px;}
.main{width: 100%; padding-top: 30px; padding: 0; overflow: hidden; }
.column{min-height: 1px; float: left; margin-left: 7%; overflow: hidden; }

 
.grid2{ float: left; width:86%; display:block; margin-bottom: 10px; background-color: black; padding:0; margin-left: 7%; overflow: hidden; height: auto; }


.share{display: none;}

.lightlist{display: none;}

.phone{display: block;}


.push {padding-top: 0px;}

.top{width: 100% ; background-color: #ffffff; position: inherit; margin-top: 20px; margin-bottom: 0px; padding-bottom: 20px;}

.bottom{width: inherit;  background-color: #ffffff; height: 35px; position: inherit; }

#footer{margin:auto; padding: 0; width: auto;   }



		 .one,
		 .two,
		 .three,
		 .four,
		.five,
		.six,
		.seven,
		.eight,
		.nine,
		.ten,
		.eleven,
		.twelve {width:86%; overflow: hidden; }		
		
		.special{width: 170%;overflow: hidden;} 
		 
.logo{ margin-left: 40%;}

		 					


.small{display: block;}
.big{display: none;}
 
  
  
 
 .phonelogo{width:40%;padding-top:20px;padding-bottom:15px;}	

.phonelogoimg{height:80px;}
 
.first	{margin-left: 0;}
.last	{margin-right: 0;}


.servicegrid{width:48%; height:230px;float:left; margin:1%; overflow:hidden;}

.row{width: 100%; margin-bottom:0;padding-bottom:0;}

 

	 }

	 
@media screen and (max-width: 980px) {}
@media screen and (max-width: 650px) {}
@media screen and (max-width: 480px) {}

 
/******  Mobile  ********


.one
.two
.three
.four
.five
.six
.seven
.eight
.nine
.ten
.eleven
.twelve	

*/
/*
[class^="grid-"]{
	float:left;
	margin:0 20px 0 0;
	
	[class~="column"] {min-height: 1px; float: left; background-color: black; margin-left: 10px; margin-right: 10px; }
*/