@charset "utf-8";
/* CSS Document */
body{background:url(../images/bg.jpg) repeat-x; font-family: 'Open Sans', sans-serif; font-size:13px; line-height:20px; margin:0px;}
img{border:0px; margin-top: 5px!important;}
a{text-decoration:none; color:#000;}
p, ul, li, h1, h2, h3, h4, h5, h6, input, select, textarea{padding:0px; margin:0px; list-style:none; font-weight:normal;}
div{display:block;}

.top{width:974px; height:123px; position:relative; margin:auto;}
.top div{position:absolute;}

.logo{width:163px; height:63px; top:10px; left:380px;}
.logo a{width:163px; height:63px; float:left; background:url(../images/logo.jpg) no-repeat;}

/*
.logo{
	width:262px; height:51px;
	top: 19px;
	left: 350px;
}
.logo a{width:262px; height:51px; float:left; background:url(../images/logo.jpg) no-repeat;}*/

.sendenquiry{width:212px; height:34px; top:0px; right:0px;}
.sendenquiry a{width:212px; height:34px; float:left; background:url(../images/send-enquiry.jpg) no-repeat;}

.topsocial{right:42px; top:47px;}
.topsocial img{margin-left:8px;}

.call{
	position: absolute;
	top: 49px;
	right: 861px;
	line-height: 20px;
}
.call img{float:left; margin-right:3px;}
.email{
	position: absolute;
	top: 49px;
	right: 615px;
	line-height: 20px;
}
.email img{float:left; margin-right:3px;}



.nav{left:0px; bottom:0px; line-height:42px; height:42px; width:977px;} 
.nav li{float:left; display:block; position:relative; text-transform:uppercase; margin:0px 5px;  z-index:999;}
.nav li a{padding:13px 11px; color:#fff;}
.nav li:hover a{color:#000; background:#efefef;}

.nav li ul{display:none; position:absolute; top:39px; background:#efefef; width:250px;}
.nav li:hover ul{display:block;}
.nav li ul li{border-bottom:1px solid #dbdbdb; width:250px; border-left:0px; margin:0px 0px;}
.nav li ul li a{display:block; padding:0px 10px;}
.nav li ul li a:hover{background:#01abeb; color:#fff;}

.nav li ul li ul{width:500px; background:#fff; border:1px solid #efefef;}
.nav li ul li ul li{width:230px; border-bottom:1px solid #dbdbdb; margin:0px 10px;}
.nav li ul li ul li a{background:#fff!important;}
.nav li ul li ul li a:hover{color:#dc0009;}

.wrapper{width:974px; margin:auto; overflow:hidden;}
.wrappad{padding-top:20px;}

.col1{width:485px; height:406px; float:left;}
.col2{width:243px; height:406px; float:left; margin:0px 1px;}
.col3{width:244px; height:406px; float:left;}

.content h1{font-size:24px; color:#0090c5; font-weight:bold;}
.content h1 span{color:#000000; font-size:18px;}
.content p{margin-top:15px; font-size: 14px!important;}
.content li{list-style:inside;}


.midline{background:url(../images/mid-line.jpg) repeat-x; height:8px; margin:20px auto;}

.midhading{margin-bottom:20px; font-size:22px; text-align:center;}

.productdiv{width:100%;}
.pdiv{width:170px; height:220px; background:#f8f6f6; border-bottom:5px solid #00acec; padding:9px; margin:10px 3px; float:left;}
.pimg{width:170px; height:136px;}
.pcontent{width:170px; height:84px; text-align:center;}
.pcontent h1{font-size:16px; text-align:center; margin:5px 0px;}
.pcontent p{font-size:13px;}


.footer{background:#191919; margin-top:20px; width:100%; padding:15px 0px 5px 0px;}

.footleft{width:450px; float:left; text-transform:uppercase;}
.footleft h3{font-size:15px; color:#fff; border-bottom:1px solid #3a3a3a; padding-bottom:7px; margin-bottom:10px;}
.footleft li{width:225px; float:left; font-size:11px;line-height: 2.5}
.footleft li a{color:#c0c0c0;}
.footleft li a:hover{color:#fff;}

.footright{display:block; float:right; text-align:right; font-size:10px; color:#c0c0c0; text-transform:uppercase;}
.footright a{color:#c0c0c0;}
.footright a:hover{color:#fff;}


.photo-grid{text-align:left; } 

.photo-grid img {display:block;} 
.photo-grid figure {display:block; overflow:hidden; position:relative;  margin:0px;} 
.photo-grid figcaption { background:#000; opacity:0.6; color:white; display:table; height:100%; left:0;  position:absolute; right:0; top:0; z-index:100;}
 
.photo-grid figcaption p {display:table-cell; font-size:1.5em; position:relative; top:-40px; width:289px; vertical-align:middle;}

.photo-grid div:hover figcaption {opacity:0.7;}

.photo-grid img {display:block; height:auto; -webkit-transition:all 300ms; -moz-transition:all 300ms; transition:all 300ms; max-width:100%;}
 

.photo-grid figcaption p {display:table-cell; position:relative; -webkit-transition:all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; vertical-align:middle; font-size:13px; padding:5px;  opacity:1.7; }
 
.photo-grid div:hover figcaption p {-moz-transform: translateY(40px); -webkit-transform:translateY(40px); transform:translateY(40px); line-height:15px; text-shadow:1px 1px #000;}

.photo-grid figcaption {color:white; display:table; height:100%; left:0; opacity:0; position:absolute; right:0; top:0; -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms; -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; transition-delay: 100ms; z-index: 100;}





.brodcam{margin:0px auto; border-bottom:1px solid #00ACEC; height:30px; line-height:30px; font-size:15px;}
.brodcam li{float:left; margin:0px 5px;}
.brodcam li a{color:#000;}
.brodcam li a:hover{color:#004D54;}
.brodcam li strong{color:#00923f;}


.innerproduct {padding:0px; width:100%; height:auto; text-align:justify; margin-top:15px;  }

.detailimgdiv{width:400px;  float:left; text-align:center; padding:0px 0px;}
.detailright{width:500px; float:right;}
.detailheading{font-size:20px; color:#515151; font-family:Georgia, "Times New Roman", Times, serif; line-height:26px;}
.detailheading strong{font-size:11px; color:#515151;}
.detailrunning{font-size:12px; color:#4A4A4A; line-height:20px;}

.easyFrame {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  /*  box-sizing: border-box;*/
    margin: 0 0 15px 10px;
    padding: 10px;
}

.inmenu{background:#F5F5F5; text-transform:uppercase; font-size:13px; padding:4px 0px; margin-top:15px; overflow:hidden;  font-family:Century Gothic;}
.inmenu li{float:left;  margin:0px 10px; border-bottom:1px solid #fff; list-style:none;}
.inmenu li a{color:#5A5957; padding:4px 10px; line-height:25px;}
.inmenu li a:hover{color:#fff; background:#02ABEC;}
.selectli a{color:#fff!important; background:#02ABEC;}

.detailleft{width:450px; float:left;}
.detailright{width:500px; float:right;}
.detailright h2{ font-size:15px; color:#BEA55D; font-family:Century Gothic; margin-bottom:10px;}
.detailright p{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#2C2C2C; line-height:20px; margin:15px 0px;}


.gallery {
    float: left;
    margin: 5px;
    padding: 20px;
    width: 255px;
    height: 300px;
    border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 


@media screen and (min-width:320px) {
.top{width:99%; height:81px;}
.wrapper{width:99%;}
.logo{top:20px; left:10px;}
.logo a{ background-size:120px 46px;}
.sendenquiry{display:none;}
.topsocial{right:10px; top:52px;}
.nav{display:none;}

.call{top:10px; right:0px;}
.email{top:30px; right:0px;}


.col1{display:none;}

.col2{width:49%; height:auto; float:left; margin:0px 1px;}
.col3{width:49%; height:auto; float:left;}

.pdiv{width:140px; padding:5px;}
.pimg{width:140px;}
.pimg img{width:140px}
.pcontent{width:140px;}



.accordian{width:100%; margin:auto; display:block;}
.accordiannav {width:100%;	padding:0px; }
ul.accordiannav {line-height: 0.5em; list-style: none;}
ul.accordiannav li {background:#01abeb;}
ul.accordiannav li a {line-height:10px; font-size:15px; font-weight:bold; text-transform:uppercase; padding:10px 5px; color:#fff; display:block;}
ul.accordiannav li a:hover{background-color:#01abeb; color:white;}
ul.accordiannav ul{margin:0; padding:0;	display:none;}
ul.accordiannav ul li{margin:0;	padding:0;	clear:both; border-bottom:1px solid #005575;}
ul.accordiannav ul li a{padding-left:20px;	font-size:12px;	font-weight:normal;	outline:0;}
ul.accordiannav ul li a:hover{background-color:#202020;	color:#fff;}
ul.accordiannav ul ul li{border-bottom:0px;}
ul.accordiannav ul ul li a {color:#fff; padding-left:40px; text-transform:capitalize;}
ul.accordiannav ul ul li a:hover{background-color:#202020; color:#fff;}
ul.accordiannav span{float:right;}


.gallery {
   
    margin: 5px;
    padding: 20px;
    width: 90%;
     border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 



}


@media screen and (min-width:360px) {
.pdiv{width:150px; padding:9px;}
.pimg{width:150px;}
.pimg img{width:150px}
.pcontent{width:150px;}


.gallery {
   
    margin: 5px;
    padding: 20px;
    width: 90%;
     border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 



}


@media screen and (min-width:480px) {
.logo{top:10px;}
.logo a{background-size:163px; height:63px;}
.pdiv{width:170px; padding:9px;}
.pimg{width:170px;}
.pimg img{width:170px}
.pcontent{width:170px;}


.gallery {
    margin: 5px;
    padding: 20px;
    width: 220px;
    height: 300px;
    border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 


}

@media screen and (min-width:640px) {
.col2{width:315px; height:auto; float:left; margin:0px 1px;}
.col2 img{width:315px;}
.col3{width:315px; height:auto; float:left;}
.col3 img{width:315px;}	

.gallery {
    float: left;
    margin: 5px;
    padding: 20px;
    width: 220px;
    height: 300px;
    border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 

}

@media screen and (min-width:1024px) {
.top{width:974px; height:123px;}
.wrapper{width:974px;}
.accordian{display:none;}
.nav{display:block;}
.sendenquiry{display:block;}
.logo{left:380px}

.col1{display:block;}
.col2{width:243px; height:auto; float:left; margin:0px 1px;}
.col2 img{width:243px;}
.col3{width:244px; height:auto; float:left;}
.col3 img{width:244px;}	


.topsocial{right:42px; top:47px;}

.call{top:49px;	right:861px; width:120px;}
.email{top:49px; right:660px;}


.gallery {
    float: left;
    margin: 5px;
    padding: 20px;
    width: 255px;
    height: 300px;
    border: 1px solid #00ACEC;
	text-align:center;
	color:#000;
} 


}



.left {
 float: left;
   width: 50%;
   }
   
.right {
        float: right;
        width: 50%;
    }
.img{
width:100%;
height:auto;
}
.group:after {
        content:"";
        display: table;
        clear: both;
    }
@media screen and (max-width: 480px) {
.left, .right {
            float: none;
            width: auto;
        }
    }
	
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 278px;
    height: 250px;
    border: 1px solid black;
	text-align:center;
}