*{ margin:0px; padding:0px;}


.heading1{ font-size:36px; font-weight:bold; color:#012b63; margin-bottom:20px; letter-spacing:1px;}

.hdr{ width:100%; height:100%; float:left; position:relative;}

.logo{ float:left; position:absolute; z-index:9999; top:0px; left:0px;}
.logo img{ max-width:100%;}

.navigation{ width:100%; float:left; position:absolute; z-index:8888; top:0; left:0px;}

.right-logo{ float:right; padding:10px 0 0;}
.right-logo img{ max-width:100%;}

.certify{ float:left; position:absolute; z-index:9999; top:450px; left:0px;}
.certify img{ max-width:100%;}


.watch-video a{ float:right; position:absolute; z-index:9999; top:450px; right:0px; cursor: pointer;}
.watch-video a img{ max-width:100%; cursor: pointer;}

.inr-watch-video a{ float:right; position:absolute; z-index:9999; top:450px; right:0px; cursor: pointer;}
.inr-watch-video a img{ max-width:100%; cursor: pointer;}






.content{ padding:40px 0;}

.product-box{}
.product-box h4{ float:left; font-size:16px; font-weight:bold; color:#022b63; text-transform:uppercase; letter-spacing:2px;}
.product-box ul{ list-style:none; float:left !important; margin-bottom:0px !important;}
.product-box ul li{}
.product-box ul li a{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#555555; text-decoration:none; line-height:30px; text-transform:uppercase; letter-spacing:0; word-spacing:0;}
.product-box ul li a:hover{ color:#555555; text-decoration:underline;}
.product-box img{ margin:0px 10px 10px 0px; float:left;}


.specialized-products{ padding:0px 0px 40px 0px;}
.special-bg{ background:#022b63; text-align:center; font-size:36px; font-weight:normal; color:#ffffff; letter-spacing:2px; padding:0 0 10px; margin:0 0 20px;}

.special .hdng-brdr{ width:100px; height:3px; background:#aaa; display:inline-block; margin:0px auto; position:absolute; z-index:2; bottom:-2px; left:0; right:0;}
.special-box{ text-align:left;}
.special-box .ha a{ display:block; font-size:16px; color:#022b63; font-weight:bold; border-bottom:2px solid #022b63; margin-bottom:15px; padding-bottom:10px; text-decoration:none;}
	.special-box .ha a:hover{ font-size:16px; color:#000000; border-bottom:2px solid #000000;  text-decoration:none;}
.special-box-cont{}
.special-box-cont img{ float:left; margin:0px 10px 5px 0px;}
.special-box-cont p{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#555555; line-height:18px; margin-bottom:10px;}

.ftr{ background:#022b63; padding:30px 0;}
.ftr-box{ font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-weight:normal; margin:0px 0; line-height:24px;}
.ftr-box h3{ font-size:26px; font-family:Arial, Helvetica, sans-serif; color:#fff; padding:0 0 10px; border-bottom:1px solid #ffffff; margin-bottom:15px;}
.ftr-box p{ padding:0; margin:0;}
.ftr-box a{ display:block; font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; text-decoration:none; font-weight:normal; margin:5px 0;}
	.ftr-box a:hover{ text-decoration:none;}
.ftr-btm{ background:#211e1e; padding:15px 0; text-align:center; font-size:12px; color:#fff;}

.inr-pages{ width:100%; float:left; padding:40px 0;}
.inr-pages h1{ width:100%; float:left; text-align:center; font-size:42px; font-family:abel; font-weight:bold; text-transform:capitalize; color:#022b63; letter-spacing:5px; padding:0 0 10px; margin:0;}

.left-side{ width:100%; float:left;}
.left-side ul{ margin:0px; padding:0px;}
.left-side ul li{ width:100%; float:left; list-style:none;}
.left-side ul li a{ width:100%; float:left; text-decoration:none; border-right:3px solid #ebebeb; padding:10px 20px; font-size:18px; letter-spacing:2px; font-family:abel; font-weight:bold; color:#333; transition:all .3s ease-in-out; margin:3px 0;}
.left-side ul li a:hover, .left-side ul li a:focus, .left-side ul li a.active{ text-decoration:none; border-right:3px solid #074790; background:#3774bd; color:#fff; transition:all .3s 
ease-in-out;}

.inr-products{ width:100%; float:left; border:3px solid #022b63; padding:10px;}

.left-products{ width:100%; height:400px; float:left; overflow-y:scroll;}

.left-products-box-inner2{ width:97%;}
		.left-products-box-inner2 a{ background:#e5e6e8; border:2px solid #b3b3b3; display:block; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; padding:2px 0px}
		.left-products-box-inner2 a img{ margin-right:5px;}
		.left-products-box-inner2 a:hover{ background:#e5e6e8; border:2px solid #b3b3b3; color:#333333;}
		.left-products-box-inner2 a.select{ background:#022b63; border:2px solid #022b63; color:#ffffff;}
		
.left-products h4{ width:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-transform:capitalize; background:#e5e6e8; border:2px solid #b3b3b3;}
.left-products h4 span{ font-size:16px; color:#444; letter-spacing:1px; padding:14px 0; margin:0; display:inline-block;}
.left-products h4 img{ float:left; padding:0 10px 0 0; margin:0;}
.left-products ul{ margin:0px; padding:0px;}
.left-products ul li{ width:100%; float:left; list-style:none;}
.left-products ul li a{ width:100%; float:left; text-decoration:none; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; transition:all .3s ease-in-out; margin:2px 0;}
.left-products ul li a:hover, .left-products ul li a:focus, .left-products ul li a.active{ text-decoration:none; color:#000; transition:all .3s ease-in-out; font-weight:normal; text-decoration:underline;}

.right-products{ width:100%; height:400px; float:left; overflow-y:scroll;}

.right-products-bnr{ width:100%; float:left; border:2px solid #022b63; padding:10px;}
.right-products .text-top{ width:100%; float:left; text-decoration:none; font-size:11px; font-family:Arial, Helvetica, sans-serif; color:#022b63; transition:all .3s ease-in-out; margin:0; font-weight:normal; line-height:14px; margin-bottom:8px;}
.right-products-box{ width:100%; float:left; padding:0 15px;}
.right-products-box ul{ margin:0px; padding:0px;}
.right-products-box ul li{ width:100%; float:left; list-style:none; border-bottom:2px solid #022b63; padding:10px 0;}
.right-products-box ul a{ font-size: 12px; font-weight: bold; text-decoration: underline; color: #022b63; margin-bottom: 10px;}
.right-box-hdng{ width:100%; float:left; font-family:Arial, Helvetica, sans-serif; font-weight:bold; text-transform:capitalize; color:#333; font-size:16px;}
.right-box-text{ width:100%; float:left; font-family:Arial, Helvetica, sans-serif; text-transform:capitalize; color:#333;}

.grade{ width:60%; float:left; font-size:14px; font-weight:bold;}

.size{ width:40%; float:right; font-size:13px;}
.size span{ width:100%; float:left;}

.inr-bnr{ width:100%; float:left; height:410px;}
.inr-bnr img{ width:100%; float:left; height:410px;}
.inr-certify{ float:left; position:absolute; z-index:7777; top:300px; left:0px;}
.inr-watch-video a{ float:right; position:absolute; z-index:7777; top:300px; right:0px; cursor: pointer;}

.pro-box{ width:100%; float:left; padding:0 0 20px 10px;}
.pro-box ul{ margin:0px; padding:0px;}
.pro-box ul li{ float:left; list-style:none; padding:0 5px;}
.pro-box ul li a{ float:left; text-decoration:none; padding:0 10px 0 0; background:#e5e6e8; color:#333; font-size:14px; border:2px solid #b3b3b3; font-weight:bold; transition:all .3s ease-in-out;}
.pro-box ul li a:hover, .pro-box ul li a:focus, .pro-box ul li a.active{ text-decoration:none; background:#022b63; color:#fff; border:2px solid #022b63; transition:all .3s ease-in-out;}

.inr-textbox{ width:100%; float:left; background:#fff; padding:20px; border-bottom:4px solid #022b63; margin:40px 0 0;}

.contact{ width:900px; max-width:100%; display:block; margin:0 auto;}
.contact-adres{ width:100%; float:left; margin:-80px 0 80px; background:#fff; padding:40px 20px; box-shadow:3px 3px 10px #ccc;}
.contact-adres-box { width:100%; float:left; padding:40px 0; color:#bcbcbc; text-align:center;}
.contact-adres-box p{ width:100%; float:left; text-align:center; font-size:15px; color:#666; padding-top:30px;}
.contact-adres-box p a{ text-decoration:none; color:#666;}
.contact-adres-box i{ width:40px; height:40px; display:inline-block; padding:9px 0 0; color:#666; border:1px solid #f3f3f3; background:#fff; border-radius:50%; font-size:20px; transition:ease-in-out .3s all;}
.contact-adres-box i:hover{ color:#fff; background:#022b63; text-decoration:none; transition:ease-in-out .3s all;}

.contact_hdng{ width:100%; float:left; padding:10px 0px 30px; font-size:20px; color:#333; text-align:center;}


.contact_text{ float:left; font-size:12px; color:#333; padding:5px 7px; font-family:Arial, Helvetica, sans-serif;}
.contact_input{ float:left; padding:2px 15px; width:100%; border:none; height:50px; color:#333; font-size:15px; border-radius:3px; background:#f3f3f3;}
.contact_textarea{ float:left; padding:15px; width:100%; border:none; height:130px; color:#333; font-size:15px; border-radius:3px; background:#f3f3f3;}
.contact_btn{ cursor: pointer; border : none; font-size:16px; color:#fff; background:#222; padding:10px 25px; margin:20px 0; text-decoration:none; float:left; font-family:'OpenSans-Regular'; border-radius:3px; text-transform:uppercase; transition:ease-in-out .3s all;}
.contact_btn:hover, .contact_btn:focus{ font-size:16px; color:#fff; background:#022b63; padding:10px 25px; text-decoration:none; float:left; font-family:'OpenSans-Regular'; border-radius:5px; transition:ease-in-out .3s all;}

.contact_box{ float:left;}
.contact_box_text{ width:100%; float:left; padding:0 0 10px 0; font-size:16px; color:#666; text-align:justify;}
.contact_box_text i{ float:left; padding:6px 10px 0 0; font-size:15px; color:#022b63;}
.contact_box_text span{ float:left; padding:0;}
.contact_box_text2{ width:100%; float:left; padding:20px 0 20px; font-size:15px; color:#666; text-align:justify;}
.contact_box_text2 span{ float:left; padding:5px 10px 5px 0;}

.project_detail{ width:100%; background:#fff; border-bottom:4px solid #022b63; float:left; padding:15px; margin:0 0 20px;}





.list{ color:#7d7d7d;}
.list ul{ list-style:none;}
.list ul li{ display:block; font-size:14px; line-height:34px;}


.h-color{ color:#022b63 !important;}

.table-cont .heading{ font-size:13px; font-weight:bold; color:#ffffff; line-height:18px;}
.table-cont .heading2{ font-size:18px; font-weight:bold; color:#ffffff; line-height:18px; padding:10px; letter-spacing:3px;}

.table-cont{ text-align:left; margin-bottom:25px;}
.table-cont td{ padding:5px;}


.grid-box-cont{ margin-bottom:20px;}
.grid-box-cont h3{ font-size:18px; font-weight:bold; margin-bottom:15px; color:#022b63;}
.grid-box-cont p{ line-height:24px; margin-bottom:8px;}

.grid-box-height{ height:350px;}

ul.group-network{ min-height:200px;}

ul.group-network li{
	display: inline-block;
    color: #555555;
    font-size: 13px;
    margin: 12px 0;
    letter-spacing: 1px;
	margin-bottom:0px !important;
}
ul.group-network li a{
	display:inline-block;
	color:#022b63;
}
.group-network i{
	margin-right: 5px;
    font-size: 14px;
    color: #022b63;
}
ul.group-network h3{
	margin-bottom:0px !important;
	color:#000000 !important;
	font-weight:bold;
	text-decoration:underline;
}


.bdr-b{ border-bottom:1px solid #999999; padding-top:10px; margin-bottom:25px;}





/*-- gallery-page --*/
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container .gallery .gallery-cont{
  float: left;
  width: 24.333%;
  height: auto;
  margin-bottom:25px;
}
.container .gallery .gallery-cont h4{
	font-size:1em;
	text-align:left;
	margin-left:6px;
	font-weight:300px;
}

.container .gallery .gallery-cont a img {
  float: left;
  width: 100%;
  height: auto;
  border: 6px solid #fff;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  position: relative;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
.container .gallery .gallery-cont a:hover img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  z-index: 5;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -o-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -ms-transition: 0.5s all;
}
/*-- for big image
.container .gallery a.big img {
  width: 40%;
}--*/
/*-- //gallery-page --*/


@media (max-width: 600px){
	.container .gallery .gallery-cont{
	  float: left;
	  width: 50%;
	  height: auto;
	  margin-bottom:25px;
	}
	.container .gallery .gallery-cont h4{
		font-size:0.8em !important;
		text-align:left;
		margin-left:6px;
		font-weight:200px !important;
	}
	
	.container .gallery .gallery-cont a img {
	  width: 100%;
	}
}

@media (max-width: 320px){
	.container .gallery .gallery-cont{
	  float: left;
	  width: 100%;
	  height: auto;
	  margin-bottom:25px;
	}
	.container .gallery .gallery-cont h4{
		font-size:0.8em !important;
		text-align:left;
		margin-left:6px;
	}
	
	.container .gallery .gallery-cont a img {
	  width: 100%;
	}
}

@media only screen and (max-width:1366px){
	.certify{ top:450px;}
	.watch-video a{ top:450px; cursor: pointer;}
	.inr-watch-video a{ top:; cursor: pointer;}
}



@media only screen and (max-width:1024px){
	.logo{ width:15%;}
	.certify{ top:370px;}
	.watch-video a{ top:370px; cursor: pointer;}
	.inr-watch-video a{ top:; cursor: pointer;}
    
}


@media only screen and (max-width:990px){
	.ftr-box h3{ width:100%; float:left; font-size:20px; padding:0 0 10px;}
}
@media only screen and (max-width:840px){
	.navigation{ width:100%; float:left; position:absolute; z-index:8888; top:0; left:0px;}
	
	.logo{ width:20%; left:15px;}
	.right-logo{ width:35%; padding:15px;}
	.inr-bnr{ width:100%; float:left; height:260px;}
	.inr-bnr img{ height:260px;}
.inr-certify{ float:left; position:absolute; z-index:7777 !important; top:175px; left:0px;}
.inr-watch-video a{ float:right; position:absolute; z-index:7777 !important; top:175px; right:0px; cursor: pointer;}
}


@media only screen and (max-width:768px){
.certify{ width:20%; top:370px;}
.watch-video a{ width:20%; top:370px; cursor: pointer;}
.inr-watch-video a{ width:20%; top:; cursor: pointer;}
.content h1{ font-size:30px; letter-spacing:2px; padding:0 0 10px; margin:0 0 10px;}
.product-box h3{ font-size:16px; padding:0 0 10px;}
.special h1{ font-size:30px; letter-spacing:2px; padding:0 0 10px; margin:0 0 10px;}
.special-box h3{ font-size:16px; letter-spacing:2px;}
.ftr-box h3{ font-size:18px; padding:0 0 10px;}
.inr-pages h1{ font-size:30px; letter-spacing:3px;}
.grade{ width:60%; float:left; font-size:12px;}
.size{ width:40%; float:right; font-size:12px;}

}


@media only screen and (max-width:568px){
.content h1{ font-size:24px; letter-spacing:2px; padding:0 0 10px; margin:0 0 10px;}
.special h1{ font-size:24px; letter-spacing:2px; padding:0 0 10px; margin:0 0 10px;}
.inr-pages h1{ font-size:24px; letter-spacing:2px;}

}


@media only screen and (max-width:480px){
.certify{ width:25%; top:235px; left:10px;}
.watch-video a{ width:25%; top:235px; right:10px; cursor: pointer;}
	.navigation{ width:100%; float:left; position:absolute; z-index:8888 !important; top:0; left:0px;}
.inr-certify{ float:left; position:absolute; z-index:7777 !important; top:175px; left:0px;}
.inr-watch-video a{ float:right; position:absolute; z-index:7777 !important; top:175px; right:0px; cursor: pointer;}

}

@media only screen and (max-width:375px){
}







/*---------Video mp4----------*/


#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}

#light {
  display: none;
  position: fixed;
  top: 50%;
  left: 43%;
  max-width: 800px;
  max-height: 460px;
  margin-left: -300px;
  margin-top: -180px;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002000;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 1002;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

#fade:hover ~ #boxclose {
  display:none;
}

.test:hover ~ .test2 {
  display: none;
}