@charset "utf-8";
/* CSS Document */

@media(min-width:0px) and (max-width:767px) { 
    #wraper, #header, #menu, .contain-part,  .welcome,  .footer,.part, .inquiry_now {width:auto !important;}
    .inner-page-tital, .pera-full, .im, .products {width:100% !important;}
     #header, .top-header-menu, #banner, .welcome, .welcome_para  {height: auto !important;}
     .contain-part { margin-top: 0px !important;}
     #banner{width: 94% !important;}
     .product-section{width: 100% !important;margin-bottom: 17px; margin-right: 0px !important;}
     .urbangreymenu {width: 100% !important;}
     .urbangreymenu ul li a{padding: 10px 10px !important;}
     .toggle-menu {display: block !important;margin: -21px 0px 27px;}
     #header .logo{float: none !important; margin: 0px auto;width:100% !important;}
      #header .logo img {width:280px !important;margin: 0px auto;display: block;}
    #menu {height: auto !important;display:none;}
    #menu {height: auto !important;position: absolute;z-index: 11;background: #22d9eb;margin: 0px -16px;padding: 4px 0px 15px;width: 115% !important;}
    #menu ul li {display: block !important;text-align: left;margin:0px !important;border-bottom: 1px solid #eee !important;}
    #menu ul li a{display: block;padding:10px 18px;}
     .welcome_para {width:94% !important;}
    #slider li {width:100% !important;}
    #slider li img {width:100% !important;}
     #slider li .caption{width:92.5% !important;height: auto !important;position: initial !important;padding: 5px 10px 5px 10px !important;font-size: 10px  !important;}
     .part { margin:15px 0px !important;width: 100% !important;}
     .content2{width: 91% !important;}
     .welcome{margin: 10px 0px !important;}
     .inquiry-class, .inquiry-text{width: 95%;}
     .footer-left, .footer-mid, .footer-right{width: auto !important;padding: 20px 0px !important; text-align: center !important;float: none !important;}
     .im{height: auto !important;width:94% !important;}
     .im img{height: auto !important;width: 100% !important;}
     #inner-contain {width: 100% !important; padding: 0px 0px 25px !important;}
     .inner-bg{ background-size: 160px;}
     .products p, .pera-full p {margin:0px 0px 0px !important; text-indent: initial !important;}
     .products {margin:0px 0px 25px !important;}
     .thumbnail {  width: 42% !important;    height:auto !important;}
     .thumbnail img{  width:100%;    height: 120px;}
     .inner-page-tital-l{    font-size: 33px !important;    padding-top: 41px !important;}
     .inquiry-main,.inquiry-input-c, .inquiry-input{   width: 99%  !important;}
     .inquiry-inputarea-c{ width: 99%  !important;}
     .urbangreymenu .headerbar {background: #22D9EB url(../images/arrow_down_med.png) no-repeat 9px 10px  !important; padding: 11px 0 11px 31px  !important;border-bottom: 1px solid #fff;}
}

#wraper{width:980px; padding: 0px 15px;margin:auto; height:auto;}

#header{width:980px; height:175px; position:relative; }

#header .logo{width:331px; height:137px; margin-top:10px; float:left;}

.top-header-menu{width:auto; float:right; height:25px; margin-top:8px;}
.top-header-menu ul{margin:0; padding:0; color:#000;}
.top-header-menu ul li{list-style:none; display:inline; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-transform:uppercase; margin:5px;}
.top-header-menu ul li a{color:#000; text-decoration:none;font-weight:bold;}
.top-header-menu ul li a:hover{color:#FF0000; text-decoration:none;font-weight:bold;}
.products p span
{
color: #000;
line-height:22px;
line-height: 18px !important;
    font-size:13px !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
.MsoNormal span
{
color: #000;
line-height:22px;
line-height: 18px !important;
    font-size: 13px !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
.pera-full p 
{
color: #000;
line-height:22px;
line-height: 18px !important;
    font-size:13px !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
.pera-full span
{
color: #000;
line-height:22px;
line-height: 18px !important;
    font-size:13px !important;
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
}
#menu{width:980px; position:relative; height:35px; text-align:right; margin-top:10px;}
#menu ul
{
margin:0;
padding:0;
}
#menu ul li
{
list-style:none;
line-height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
display:inline;
margin-left:8px;
margin-right:8px;

}

#menu ul li a
{
color:#000;
text-decoration:none;
font-weight:bold;
}
#menu ul li a:hover
{
color:#FF0000;
text-decoration:none;
font-weight:bold;
}



/*================ banner part ==============================*/
#banner{width:960px; height:351px; padding:10px; background-color:#fff;overflow: hidden; margin-top:10px; position:relative; /* -webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75); -moz-box-shadow:0px 0px 8px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);*/}

/*#banner .img
{
width:960;
height:351;

}*/
/*=============== finish banner part ============================*/

/*=============== banner part ===================================*/

.contain-part{width:980px; margin-top:20px; position:relative; padding-top:30px;}
.products  {
    float: left;
    width: 64%;
}
.MsoNormalTable { width:100% !important;}
.products b {font-weight: normal;}
.products p {text-align: justify;color: #333;}
.product-section{width:280px; margin-right:55px; float:left;}
.product-section ul{margin:0; padding:0 !important;width: 100%;}
.product-section ul li{list-style:none; line-height:36px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#55addb; border-bottom-color:#999999; border-bottom-style:dotted; border-bottom-width:thin; display:block; text-transform:uppercase; }
.product-section ul li a{ color:#55addb; text-decoration:none;}
.product-section ul li a:hover{color:#666666; text-decoration:none;margin-top:20px;}

.welcome
{
width:640px;
height:235px;
background:#f5f5f5;
float:left;
margin-left:5px;
}

.product
{
width:600px;
height:auto;
background:#f5f5f5;
float:left;
margin-left:5px;
}



.welcome_para
{
font-size:12px;
width:400px;
height:235px;
float:left;
line-height:18px;
padding:10px;
margin-right:10px;    text-align: justify;
}

.welcome_img
{
width:203px;
height:233px;
float:right;
}


.welcome_img img
{width:203px; height:233px;}

.content2
{

width:950px;
height:auto;
background:#F2F4F3;
padding:15px;
float:left;
border-top:#c4c4c4;  border-top-style:solid; border-top-width:thin;}

.part{width:280px; margin:8px; height:307px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#707070; line-height:18px; text-align:justify; margin-right:45px; overflow:hidden;}

.why_us
{
width:300px;
height:250px;
float:left;
overflow:hidden;
margin:8px;
}
.infrastructure
{
width:320px;
height:400px;
float:left;
margin-right:10px;
}
.infrastructure .img
{
width:325PX;
height:200PX;
margin-top:10px;

}
.infrastructure p
{
font-size:12px;
margin-top:10px;
}


.inquiry_now
{
width:280px;
height:auto;
float:right;
border-bottom:#000000;
}
.inquiry_now .inquiry
{
width:250px;
height:30px;
font-family: Arial, Helvetica, sans-serif;
margin:3px;
border-radius:5px;
padding:5px;

}


/*==================== footer ==========================*/


.footer
{
width:980px;
height:100px;
background:#F2F4F3;
background-image:url(../images/footer-bg.jpg); background-repeat:repeat-x;
padding-top:10px;

}
.footer ul
{
margin:0px;
padding:0 0 0 37px;
}
.footer ul li
{
line-height:20px;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#756E6E;
list-style:none;
display: inline;
margin:16px 14px 16px 14px;
}
.footer ul li a
{
color:#756E6E;
text-decoration:none;
}
.footer ul li a:hover
{
color:#000;
text-decoration:none;
}

.footer-left{width:390px; float: left; padding-top: 18px;padding-left: 20px;}
.footer-mid{width:210px;float: left;}
.footer-right{width:350px;float: left; padding-top: 36px;text-align:right; }
.footer-right a{color:gray;text-decoration: none;}
.footer-right a:hover{color:#22D9EB;text-decoration: none;}




/*========================== finish footer ========================>



/*--------------button--------------*/

.read-more{width:auto; float:left; height:auto; background-color:#21d9ea; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#fff; text-transform:uppercase; text-align:center; padding:5px;-moz-border-radius:3px;
border-radius:3px; margin-top:10px; border:none;}
.read-more a{color:#fff; text-decoration:none;}
.read-more:hover{background-color:#6d6c6b; text-decoration:none; }



.inner-page-tital{width:940px; float:left; height:100px;}
.inner-page-tital-f {
    background-color: #22D9EB;
    color: #FFFFFF;
    float: left;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 54px;
    height: 44px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 38px;
    text-align: center;
    text-transform: uppercase;
    width: auto;
}
.inner-page-tital-l{color: #626262;
    float: left;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 36px;
    padding-right: 8px;
    padding-top: 47px;
}

#inner-contain{width:940px; padding:20px; height:auto; float:left; min-height:350px;}
#inner-contain ul { padding: 0px 0px 0px 18px; display: table;color: #000;}
.pera-full{width:940px; float:left; height:auto; font-family:Verdana, Geneva, sans-serif; font-size:12px; line-height:23px; text-align:justify;}


.im{width:200px; height:250px; padding:10px; border:#22D9EB; border-style:double; border-width:thin; margin-right:20px; float:left; margin-bottom:20px;}
.im img{width:200px; height:250px;}

.sub-title{font-family:Verdana, Geneva, sans-serif; font-size:20px; color:#626262; text-transform:uppercase; margin-bottom:8px;}

.footer-logo{width:154px; height:58px; margin:auto; text-align:center; background-position:center; margin-top:15px;}

/*------------------------photo-gallery-------------------------*/

.photo-gallery{width:190px; height:190px; border:#21d9ea; border-style:solid; border-width:thin; margin:5px; padding:5px;}

.inquiry-main{width:940px; float:left; height:auto; margin-bottom:8px;}
.inquiry-text1{width:127px; float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:left; }
.inquiry-input{width:300px; height:25px; float:left;}

.inquiry-inputh{width:267px; height:25px; float:left;}


.inquiry-input-c{width:294px; height:19px; border:#22D9EB; border-style:solid; border-width:thin; padding:3px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; }

.inquiry-inputarea{width:300px; height:50px; float:left;}

.inquiry-inputarea-c{width:294px; height:50px; border:#22D9EB; border-style:solid; border-width:thin; padding:3px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; }

.button-part{width:300px; float:left; margin-left:127px; height:50px; margin-top:10px;}

.button-send{width:auto; float:left; margin-left:8px;}

.contact-us-box{width:300px; float:left; background-color:#d0faff; padding:10px; margin-right:20px;}

#menu1 ul
{
margin:0;
padding:0;
}
#menu1 ul li
{
list-style:none;
line-height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:8px;
margin-right:8px;
}
#menu1 ul li a
{
color:#333;
text-decoration:none;

}
#menu1 ul li a:hover
{
color:#333;
text-decoration:none;

}

.scrolling{height:35px; width:980px; margin-top:12px; float:left;}