*{margin:0;padding:0;border:0;outline:none;}

@viewport{ width:device-width;}
@-ms-viewport{width:devide-width;} /* for microsoft device */
@-o-viewport{width:devide-width;} /* for old opera device */

/* 320px-480px */
@media only screen and (max-width:480px)
{
h1 {text-align:center; color:#222; font-size:28px; font-weight: bold; letter-spacing: 0.01em;  text-transform: uppercase; font-family: 'Roboto Slab', serif; padding:10px 0px;}
#hd, #footer{width:100%; height:auto; margin:0 auto; display:block; float:none;}
#wrap{width:90%; margin:0 auto;}
#wrap1{width:90%;  margin:0 auto; float:none;}
#head {width:100%; height:auto; margin:0 auto;}
.logo { float:none;	display:block; margin:0 auto; text-align:center; margin-top:10px;}
.logo img{margin:0px auto;}
.call{margin:0 auto; display:block; float:none; width:98%;}
#menu { margin:0 auto; display:block; width:90%; float:none;}
#flash{ margin:0 auto; width:100%; height:auto;}
.box{ width:90%; float:left; padding:5px; display:block; margin:0 auto;}
#portbg{width:100%; margin:0 auto;} 
#port{width:90%; margin:0 auto;} 
.port1 {width:203px; height:161px; float:none; margin:0 auto;}
.pagepicright { margin:0 auto;  width:98%; float:none;}
.pagepicright img { margin:0 auto;  width:100%; float:none;}
.pagepicright2 { margin:0 auto;  width:98%; float:none; }
.pagepicright2 img{ margin:0 auto;  width:100%; float:none; }
.media{ margin:0 auto; width:98%; height:auto;}
.media img{ margin:0 auto; width:98%; height:auto;}
#footbg{width:100%; margin:0 auto; background:#656565; } 
#foot{width:96%; margin:0 auto; padding:20px 0px;} 
.footer-co{width:90%;color:#fff; font-size:13px; line-height:20px; text-align:left;  margin:10px 15px; float:left;}
#smo{ margin:0 auto; width:98%; float:none; display:block;}
iframe { margin:0 auto; width:90%; float:none; display:block;}
#why-us{width:90%; margin:0 auto;}
.support, .co2 {width:90%; margin:0 auto; margin-top:30px;}
.support2 {width:90%; margin:0 auto;  margin-top:30px;}
.street {float: none; margin:0 auto;}
.street img {width:100%;}
}
@media only screen and (min-width:481px) and (max-width:768px)
{
h1 {text-align:center; color:#222; font-size:28px; font-weight: bold; letter-spacing: 0.01em;  text-transform: uppercase; font-family: 'Roboto Slab', serif; padding:10px 0px;}
#hd, #footer{width:100%; height:auto; margin:0 auto; display:block; float:none;}
#wrap{width:90%; margin:0 auto;}
#wrap1{width:90%;  margin:0 auto; float:none;}
#head {width:100%; height:auto; margin:0 auto;}
.logo { float:none;	display:block; margin:0 auto; text-align:center; margin-top:10px;}
.logo img{margin:0px auto;}
.call{margin:0 auto; display:block; float:none; width:98%;}
#menu { margin:0 auto; display:block; width:90%; background:#EFEFEF; margin-top:15px;}
#flash{ margin:0 auto; width:100%; height:auto;}
.box{ width:90%; float:left; padding:5px; display:block; margin:0 auto;}
#portbg{width:100%; margin:0 auto;} 
#port{width:90%; margin:0 auto;} 
.port1 {width:203px; height:161px; float:none; margin:0 auto;}
.pagepicright { margin:0 auto;  width:98%; float:none;}
.pagepicright img { margin:0 auto;  width:100%; float:none;}
.pagepicright2 { margin:0 auto;  width:98%; float:none; }
.pagepicright2 img{ margin:0 auto;  width:100%; float:none; }
.media{ margin:0 auto; width:98%; height:auto;}
.media img{ margin:0 auto; width:98%; height:auto;}
#footbg{width:100%; margin:0 auto; background:#656565; } 
#foot{width:96%; margin:0 auto; padding:20px 0px;} 
#foot p{font-family: 'Open Sans', sans-serif; font-size:13px; color:#f5f5f5; line-height:24px; padding:5px 10px; text-align:center;} 
.footer-co{width:48%;color:#fff; font-size:13px; line-height:20px; text-align:left;  margin:10px 15px; float:left;}
#smo{ margin:0 auto; width:98%; float:none; display:block;}
iframe { margin:0 auto; width:90%; float:none; display:block;}
#why-us{width:90%; margin:0 auto;}
.support, .co2 {width:90%; margin:0 auto; margin-top:30px;}
.support2 {width:90%; margin:0 auto;  margin-top:30px;}
.street {float: none; margin:0 auto; width:462px;}

}
@media only screen and (min-width:769px) and (max-width:1024px)
{
	h1 {text-align:center; color:#222; font-size:28px; font-weight: bold; letter-spacing: 0.01em;  text-transform: uppercase; font-family: 'Roboto Slab', serif; padding:10px 0px;}
#hd, #footer{width:100%; height:auto; margin:0 auto; display:block; float:none;}
#wrap{width:90%; margin:0 auto;}
.page{ width:96%; margin:0 auto; padding:20px 0px;}
#wrap1{width:98%;  margin:0 auto; float:none;}
#head {width:100%; height:auto; margin:0 auto;}
.call{ float:left; margin:30px 0px 0px 20px; color:#DD127B; font-size:21px; font-weight:normal;letter-spacing: 0.02em; line-height:30px; text-transform: uppercase; font-family: 'Roboto Slab', serif; text-align:center; width:60%;}
#menu { margin:0 auto; display:block; width:90%; float:none;}
#flash{ margin:0 auto; width:100%; height:auto;}
.box{ width:40%; float:left; padding:5px;}
#portbg{width:100%; margin:0 auto;} 
#port{width:90%; margin:0 auto;} 
.port1 {width:203px; height:161px; float:left;}
.pagepicright { margin:0 auto;  width:40%; float:right;}
.pagepicright img { margin:0 auto;  width:100%; float:none;}
.pagepicright2 { width:40%; float:left;  }
.pagepicright2 img{ margin:0 auto;  width:100%; float:none; }
.media{ margin:0 auto; width:98%; height:auto;}
.media img{ margin:0 auto; width:98%; height:auto;}
#footbg{width:100%; margin:0 auto; background:#656565; } 
#foot{width:96%; margin:0 auto; padding:20px 0px;} 
#foot p{font-family: 'Open Sans', sans-serif; font-size:13px; color:#f5f5f5; line-height:24px; padding:5px 10px; text-align:center;} 
.footer-co{width:48%;color:#fff; font-size:13px; line-height:20px; text-align:left;  margin:10px 15px; float:left;}
#smo{ margin:0 auto; width:96%; display:block;}
iframe { margin:0 auto; width:90%; float:none; display:block;}
#why-us{width:90%; margin:0 auto;}
.support {width:48%; margin:0 auto; margin-top:20px;}
.support2 {width:48%; margin:0 auto; margin-top:30px;}
}