#header .links .language abody, html {width:100% !important; height:100% !important; background:#fafafa;}
body {padding:0; margin:0; color:#404040; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif;}

#wrapper {width: 100%; height: 100%; color: #232323; margin: 0 auto; overflow-x: hidden;}
.block {width:1000px; margin:0 auto; padding:0; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; overflow-x: hidden;}
.clear {clear: both;}
 h1{width:100%; margin:0 0 60px 0; color:#242424; font-size:50px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-weight:300; text-align:center;}
 h2{width:100%; margin:0 0 40px 0; color:#656565; font-size:38px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-weight:300; text-align:left;}
 h3{width:100%; margin:0 0 40px 0; color:#656565; font-size:24px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-weight:300; text-align:left;}



#header{width:97%; height:160px; padding:14px 0 0 3%; float:left; position:absolute; z-index:999; overflow:hidden; }
#header .logo{width:25%; margin:10px 0 0 0; text-align:center; float:left;}
#header .logo img{width:100%; height:auto; display:block;}
#header .navigation{width:75%; margin:0; text-align:center; float:left;}


	
#content {width:100%; padding:0; margin:0 auto; overflow:hidden; float:left;}


.sub-banner {width: 100%; display: block; position: relative; float:left; }
#banner {overflow: hidden; width: 100%;  min-height:495px;  display: -webkit-box;}


.sub-page{width:100%; margin:0 0 40px 0; padding:0; float:left;}
.about-bg{background:url(../images/page-bg.png) no-repeat center center; background-size:contain;}
.contact-bg{background:url(../images/page-bg.png) no-repeat 0 50px; background-size:contain;}

.about{width:56%; margin:5% auto; position:relative;}
.contact{width:56%; margin:5% auto; position:relative;}
.about .detail{width:100%; margin:0; padding:0; color:#404040; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; text-align:justify; line-height:30px; }

.quality-pic{width:94%; margin:40px 0 20px 0; padding:20px; border:1px solid#b2b2b2; float:left; }
.quality-pic img{width:100%; height:auto; display:block;}


.contact .detail{width:100%; height:330px;  margin:0; padding:0; color:#404040; font-size:16px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; text-align:justify; line-height:30px; float:left;}
.contact .detail .phone{width:92%; margin:0 0 0 8%; padding:0; text-align:left; float:left;}
.contact-map{width:100%; height:350px; margin:50px 0 0 0; float:left;}

.products{width:86%; margin:5% auto; position:relative;}
.products .sub-menu{width:22%; margin:0 20px 0 0; display:inline-block; list-style:none; float:left;}
.products .sub-menu li{width:100%; margin:5px 0; padding:0; text-align:right; float:left;}
.products .sub-menu li a{padding:8px 14px; color:#404040; font-size:18px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; text-align:right; display:block;}
.products .sub-menu li a:hover, .products .sub-menu li a.active{color:#fff; background: url(../images/sub-menu-bg.png) no-repeat top left; transition: all 0.5s ease;}

.products .products-list{width:76%; display:inline-block; list-style:none; color:#404040; font-size:16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; text-align:justify; line-height:34px; float:left;}
.products .products-list li{width:29%; margin:0 2% 10px 0; min-height: 300px; background:#edf6f9; border:1px solid #dadada; position:relative; float:left;}
.products .products-list li a:hover, .products .products-list li .name:hover{color:#1d2d33;}
.products .products-list li .pic{width:92%; margin:30px 0 20px 0; padding:10px; float:left;}
.products .products-list li .pic img{width:100%; height:auto; display:block;}
.products .products-list li .name{width:100%; padding:8px 0; color:#fff; background:#00aeef; font-size:16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; text-align:center; line-height:16px; position:absolute; bottom:0; z-index:999; -webkit-clip-path: polygon(12% 12%, 90% 12%, 100% 100%, 0% 100%); clip-path: polygon(12% 12%, 90% 12%, 100% 100%, 0% 100%);}
.products .products-list li .top-bg{width:100%; padding:8px 0; color:#fff; background:#b9e6f7; font-size:16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; text-align:center; line-height:20px; position:absolute; top:0; z-index:999;-webkit-clip-path: polygon(0 0, 100% 0, 90% 64%, 12% 64%); clip-path: polygon(0 0, 100% 0, 90% 64%, 12% 64%);}


.product-detail{width:72%; margin:0 0 0 4%; float:left;}
.product-detail .product-pic{width:100%; margin:20px 0; padding:0; text-align:center; float:left;}
.product-detail .product-description{width:100%; margin:20px 0; padding:0; float:left;}
.product-detail .product-table{width:100%; margin:20px 0; padding:0; float:left;}
.tech_table {border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd;}
.tech_table .title{font-weight: bold;}
.tech_table th, td {text-align: left; padding: 8px;}
tr:nth-child(even){background-color: #f2f2f2}




.sub-menu {width:16%; margin:0 40px 0 0; padding:0; float:left;}

#nav {float: left; width: 100%;}
#nav li a {display: block; padding: 10px 15px; margin:0 0 10px 0; text-decoration: none; color: #fff; font-weight:400; background: #00aeef; border-radius: 20px 20px 20px 20px; transition: all 0.5s ease;}
#nav li a:hover, #nav li a.active {background: #00aeef; border-radius: 20px 20px 20px 20px; transition: all 0.5s ease;}
#nav li ul {display: none; margin:0 0 0 20px;}
#nav li ul li a {padding: 5px 10px; color:#404040; background:none;}
#nav li ul li a:hover {color:#fff;}
#nav li ul li a.active{color:#fff; background:#00aeef; border-radius:20px 20px 20px 20px; transition: all 0.5s ease;}
#nav .active{background:none;}



#footer {width:100%; margin:0 auto; padding:0; float:left;}

.footer-top{width:100%; margin:0; float:left;}
#footer .phone{width:54%; padding:60px 0; font-size:44px; font-family:'Raleway', Calibri, Tahoma, Sans-Serif; font-weight:300; color:#494949; text-align:center; float:left;} 
#footer .phone .fa-phone-volume {width: 48px; height: 48px; text-align: center; padding:10px; margin:0 20px -12px 80px; color:#242424; font-size:80px; border:2px solid #242424; border-radius: 50%; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}

#footer .social{width:46%; margin:0; padding:70px 0 0 0; font-size:24px; text-align:center; float:left;}
#footer .social .fa-facebook-f, #footer .social .fa-instagram, #footer .social .fa-youtube, #footer .social .fa-twitter{width: 24px; height: 24px; text-align: center; padding:6px; margin:0 20px; color:#fff; background:#00aeef; font-size:30px; border-radius: 50%; text-align:center;}
#footer .fa-facebook-f:hover, #footer .fa-instagram:hover, #footer .social .fa-youtube:hover, #footer .social .fa-twitter:hover{color:#fff; background:#0087ab; display: inline-block; }



.footer-content{width:96%; margin:0; padding:50px 2%; background: url(../images/footer-bg.jpg) no-repeat; float:left;}
.footer-content .left{width:50%; margin:0 5%; color:#fff; font-size:16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-weight:400; text-align:left; line-height:22px; display:inline-block; list-style:none; float:left;}
.footer-content .right{width:30%; margin:0 5%; color:#fff; font-size:16px; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-weight:400; text-align:left; line-height:22px; display:inline-block; list-style:none; float:left;}
.footer-content .right a{color:#fff; text-decoration:none; }
.footer-content .right a:hover, .footer-content .right a.active{color:#00aeef; transition: all 0.5s ease;}
.footer-content .title{width:100%; padding:0; margin-bottom:20px; color:#fff; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-size:20px; font-weight:400; line-height:20px; text-align:left; float:left;}


#footer-bottom {width:100%; margin:0; padding:20px 0; background:#0b0b0b; float:left;}
.copyright{width:100%; margin:0; color:#fff; font-size:14px; font-family: 'Raleway', Calibri, Tahoma, Sans-Serif; text-align:center; float:left;}
.copyright a{color:#fff; text-decoration:none;}
.copyright a:hover{color:#00aeef; text-decoration:none;}




/* navigation */
.topnav{width:100%; padding:0; margin:0  0 0 20%; z-index:5; text-align:right; overflow: hidden; position:relative; float:left;}
.topnav a {width:10%; height:60px; display:inline-block; color: #fff; text-align: center; padding:14px 10px; margin:0 16px; text-decoration: none; font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-size: 16px; font-weight:300; letter-spacing:1px; line-height:60px; float:left; }
.topnav a.active, .topnav a:hover, .dropdown:hover .dropbtn {color:#fff; background:#00aeef; -webkit-clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0); transition: all 0.5s ease;}


.topnav .icon {display: none;}
.dropdown {float: left; overflow: hidden;}
.dropdown .dropbtn {font-family: 'Play', Calibri, Tahoma, Sans-Serif; font-size: 16px; font-weight:300; letter-spacing:1px; border: none; outline: none; color: #242424; padding:8px 10px 10px  10px; background-color: inherit; display:block; cursor:pointer;}
.dropdown-content {width:180px;  padding:10px; margin:0; display: none; position: absolute; background-color: rgba(0,59,97,1);  z-index: 1; top:92px; left:44%; border-radius:10px 10px 10px 10px;}
.dropdown-content a {width:90%; float: left; color: #fff; padding: 10px 5%; margin:5px 0; text-decoration: none; display: inline-block; text-align: left;}
.dropdown-content a:hover {color: #fff; background:#0087ab;}
.dropdown:hover .dropdown-content {display: block;}


@media screen and (max-width: 768px) {
  .topnav{margin:2% 0 0 2%;}

  .topnav a:not(:first-child), .dropdown .dropbtn, .topnav a{ display: none;}
  .topnav a.icon {float: right; font-size:30px; display: block; right: 0px; top: 0px; position: fixed;}

  .topnav.responsive {width: 200px; padding: 10px; background: #00aeef; position: relative; z-index: 9999; right: 196px; top: 0px; margin: 0;}
  .topnav.responsive a.icon {width: 25px; position: fixed; right: 4px; top: 15px;}
  .topnav.responsive a {width:100%; height:32px; padding:10px; color: #fff; float: none; display: block; text-align: left;}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {top:0; left:0; position: relative;}
  .topnav.responsive .dropdown .dropbtn { padding:18px 10px 5px 10px !important; color:#fff; display: block;width: 100%; text-align: left;}
  .topnav a.active, .active{color: #fff; background:#0087ab; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);}

  .topnav a.active, .topnav a:hover, .dropdown:hover .dropbtn {color:#fff; background:#00aeef; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: all 0.5s ease;}


}


@media screen and (max-width: 1024px) {
    .topnav a {padding: 10px; margin: 0 5px;}
    .dropdown .dropbtn {padding: 8px 10px 10px 10px;}
    .dropdown-content a {width:80%;}
}


@media screen and (max-width: 414px) {
.topnav a.icon{top:0; right: 0;}
.topnav.responsive {right: 0px; top: 10px;}
.topnav.responsive a {padding:5px 0;}
}
/* navigation */





@media screen and (min-width: 1367px) 
{    
    #header .logo {width:20%;}
    #header .navigation {width: 80%;}

	.topnav {width: 70%; margin:0 0 0 14%; margin:20px 0 20px 30%;}
    .topnav a{margin: 0 26px;}

       
	.about, contact{width:60%;}

    /*#banner{min-height: 696px;}*/

    .products .sub-menu {width:16%}
    .products .products-list {width:82%;}
    .products .products-list li{width:21%;}
    
    		
	.copyright{font-size:16px;}

}


@media screen and (max-width: 1024px) 
{    
    h1 {font-size: 50px;}

    #header .navigation{width:70%; margin:0 0 0 4%;}     
    #header .logo {margin: 40px 0 0 0;}

    .topnav {width: 100%; margin:20px 0 20px 0;}
    .topnav a{width: 14%; margin: 0 10px;}

    #banner{min-height:376px;}

    .contact .detail { width: 100%; }

    .products {width: 96%;}
    .products .sub-menu {width: 24%;}
    .products .products-list {width: 73%;}
    .products .products-list li{width: 31%;}
    .products .products-list li .name {font-size: 14px;}

    .product-detail { width: 69%;}
    .tech_table th, td {text-align: left; padding: 8px 2px;}

}


    
@media screen and (max-width: 768px) 
{
    #header{height:280px;}
    #header .logo{width:40%;}
    #header .navigation {width: 5%; float:right; }
    #header .Paralel Metal-logo {width: 16%; position: absolute;  right: 40px;  top: 10px;}
    
    .topnav a {width: 4%; margin: 0 10px;}


    #banner{min-height:280px;}

    .about, .contact, .dealers {width:94%;}
    .about .detail, .contact .detail{width:70%; margin: 20px 0 0 15%;}
    .contact-bg {background: url(../images/page-bg.png) no-repeat 0 150px; background-size: contain;}
    
    .sub-menu{margin: 0 10px 0 0;} 

    .products{width:96%;}
    .products .products-list li {width: 47%; min-height: 200px;}
    .products .sub-menu li a {text-align:left;}

     #footer .phone {font-size:28px;}
     #footer .social{padding: 86px 0 0 0;}
     #footer .social .fa-facebook-f, #footer .social .fa-instagram, #footer .social .fa-youtube, #footer .social .fa-twitter{margin: 0 10px;}
    .footer-menu .links {width: 30%; padding:0; margin: 0 5%;}
    .footer-menu{width:100%; margin:0; padding:50px 0; text-align:center;}
}



@media screen and (max-width: 414px) {
    #header{width: 96%; height: 256px;}
    #header .logo{width:48%; margin: 0;}
    #header .navigation{width:40%;}
    #header .Paralel Metal-logo {width: 16%; position: absolute;  right: 30px;  top: 2px;}

    .topnav a {width:6%;}
    .topnav.responsive a.icon {top: 24px;}

    .main-products .btn-white a {width: 28%; left: 32%;}
    .main-phone {font-size: 24px;}
    .main-phone .fa-phone-volume {width: 28px; height: 28px; margin: 0 20px -12px 46px;}
    
    .about .detail, .contact .detail{width:100%; margin: 20px 0 0 0;}
    .about-bg{background:none; background-size:contain;}
    .contact-bg{background:none; background-size:contain;}
       
    .sub-menu {width: 100%;}

    .products .sub-menu {width:100%; margin:0 0 20px 0;}
    .products .sub-menu li {width:50%;}
    .products .products-list {width:103%}
    .products .products-list li {width: 47%;}

    .product-detail { width: 100%; margin:0;}
    .tech_table th, td {text-align: left; padding: 8px 2px; font-size: 12px;}

    


    .footer-content {background: #1b2a31}
    .footer-content .left, .footer-content .right {width:100%; margin:10px 0;}
    
    #footer-bottom{margin:0 auto; padding:20px 1%; }
    .footer-menu { width: 96%; padding: 50px 2%;}
    .footer-menu .links { width: 50%; margin: 0 0 30px 0;}
    #footer .phone{width:100%; padding:40px 0; text-align:center;}
    #footer .social{width:100%; padding:20px 0;}
    #footer .phone .fa-phone-volume{margin: 0 20px -12px 0px;}

}