@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'gotham_bold';
    src: url('fonts/gotham-bold-webfont.woff2') format('woff2'),
         url('fonts/gotham-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gothambook';
    src: url('fonts/gotham-book-webfont.woff2') format('woff2'),
         url('fonts/gotham-book-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_medium';
    src: url('fonts/gotham-medium-webfont.woff2') format('woff2'),
         url('fonts/gotham-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gotham_light';
    src: url('fonts/gotham-light-webfont.woff2') format('woff2'),
         url('fonts/gotham-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'roboto';
    src: url('fonts/roboto-variablefont_wdthwght-webfont.woff2') format('woff2'),
         url('fonts/roboto-variablefont_wdthwght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*,*:after,*:before {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
*{outline:none;-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: left; padding:15px 15px 20px 15px;transition: all 0.3s ease 0.3s;}
.col-12 {width: 100%;}
.col-11 {width: 91.66666667%;}
.col-10 {width: 83.33333333%;}
.col-9 {width: 75%;}
.col-8 {width: 66.66666667%;}
.col-7 {width: 58.33333333%;}
.col-6 {width: 50%;}
.col-5 {width: 41.66666667%;}
.col-4 {width: 33.33333333%;}
.col-3 {width: 25%;}
.col-2 {width: 16.66666667%;}
.col-1 {width: 8.33333333%;}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media all and (max-width: 760px){
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {float: left; width: 50%;}}
@media all and (max-width: 540px){
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {float: left; width: 100%;}}
	
.mobilelink{display: none;}
@media screen and (max-width:780px){.mobilelink{display: block;position:fixed;z-index: 9999;right: 0;top: 25%;-moz-border-radius-topleft: 8px;-webkit-border-top-left-radius: 8px; border-top-left-radius: 8px;-moz-border-radius-bottomleft: 8px;-webkit-border-bottom-left-radius: 8px;border-bottom-left-radius: 8px;float: right;color: #FFF;background: #124984;padding: 15px;font-size: 24px;-webkit-box-shadow: -3px 4px 5px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow:    -3px 4px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow:         -3px 4px 5px 0px rgba(0, 0, 0, 0.25);}.mobilelink a{color: #FFF;text-decoration: none;line-height:140%;}}
.aligncenter{text-align: center;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.iTable{  
    display:table;
    width:100%;  
    margin:auto;  
    border-collapse:collapse;  
}  
.iCaption{  
    display:table-caption; 
    caption-side:top;  
    text-align:center;  
}  
.iRow{
    display:table-row;
}  
.iTd{  
    display:table-cell;
  border-bottom:1px solid #DDD;  
    padding:5px 10px; vertical-align:middle;
}
.iTd h4{padding:0; margin:0;}
.bottonlink{position: relative; float: left;padding: 6px 16px;border-radius: 14px;border: #555 solid 1px;margin: 0 15px 0 0;}

html,body{margin:0; padding:0; min-height:100%; font-family:'gothambook','Noto Sans Thai',Arial, Helvetica, sans-serif; font-size:16px; color:#333; outline:none;line-height: 160%;}
p{margin:0; padding:0;}
a{color:#0994d7; text-decoration:none; outline:none;}
a:hover{text-decoration:underline;}
h1{font-family:'gotham_medium',Arial, Helvetica, sans-serif; font-size:56px; margin:0 0 30px 0; padding:0; color:#000;line-height: normal;}
h2{font-family:'gotham_medium',Arial, Helvetica, sans-serif; font-size:42px; margin:0 0 25px 0; padding:0; color:#000;line-height: normal;}
h3{font-family:'gotham_medium',Arial, Helvetica, sans-serif; font-size:26px; margin:0 0 15px 0; padding:0;line-height: normal;}
h1.prod{padding: 10px 20px;color: #FFF;background: -moz-linear-gradient(-45deg,  #12549b 70%, #12549b 70%, #124984 70%, #124984 70%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #12549b 70%,#12549b 70%,#124984 70%,#124984 70%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #12549b 70%,#12549b 70%,#124984 70%,#124984 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12549b', endColorstr='#124984',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.center{text-align:center;}
.hproduct{color:#b84019;background: linear-gradient(to bottom, #952e0d 0%, #ec8b66 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
img{max-width:100%; width:auto;}
.row{width:100%; padding:70px 0; float:left;}
.rownopad{width:100%; float:left;}
.row.linebot{border-bottom: #DDD solid 1px;}
.bggray{background:#ecf0f1;}
.bgbl{background: #0056d7;}
.bgblk{background: #194c85;}
.bgrblk{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0d475e+0,124984+99 */
  background: #0d475e; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #0d475e 0%, #124984 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #0d475e 0%,#124984 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #0d475e 0%,#124984 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d475e', endColorstr='#124984',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.bgdark{background: #323a45; color: #f2f2f2;}
.bgdkgray{background:#35383e;}
.bgrdkgray{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d3dce2+0,ecf0f1+100 */
  background: #d3dce2; /* Old browsers */
  background: -moz-linear-gradient(top,  #d3dce2 0%, #ecf0f1 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #d3dce2 0%,#ecf0f1 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #d3dce2 0%,#ecf0f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3dce2', endColorstr='#ecf0f1',GradientType=0 ); /* IE6-9 */

}
.bg-g-b{ background: #54e07e; /* Old browsers */
  background: -moz-linear-gradient(left,  #54e07e 0%, #2b84e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #54e07e 0%,#2b84e2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #54e07e 0%,#2b84e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54e07e', endColorstr='#2b84e2',GradientType=1 ); /* IE6-9 */
}
.bg_3{background: url(../images/BG-3.png) center;}
.bg_4{background: url(../images/BG-4.png) center;}
.white{color:#FFF;}
.blue{color:#018fd5;}
.green{color:#3e8400;}
.clear{clear:both;}
.model{color:#0087e5;}
.model:hover{color:#ffc700;}
.cord{color:#e70000;}
.container{width:1170px; margin:0 auto;}
@media all and (min-width: 1960px){.container{width: 80%;}}
@media screen and (max-width:960px){.container{width:96%; padding:0 2%;}}
@media screen and (max-width:760px){
h1{font-size:38px;}
h2{font-size:26px;}
h3{font-size:20px;}
}
iframe{max-width: 100%; width: auto;}
.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.map-responsive{
    overflow:hidden;
    padding-bottom:36.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

header{width:100%; float:left; position:relative; z-index:9999; -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20); -moz-box-shadow:0px 4px 4px 0px rgba(50, 50, 50, 0.20); box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20);background: #000;
}
header .left{float:left;}
header .right{float:right;}
header .right a{color: #dc8136;text-decoration: none;}

header .logo{float:left;margin: 10px 0;}
header .logo img{border:none;}
header .tel{float:right; text-align:right; color:#dc8136; font-size:16px; margin:5px 0 0 0; font-weight:bold;}
header .call{float:right; text-align:right; color:#dc8136; font-size:16px; margin:30px 0 0 0; clear:right;}
header .icontel{font-size: 14px;color: #dc8136;}
header .right{float:right;clear: right;font-size: 14px;}
header a{color: #dc8136; text-decoration: none;transition: all .2s ease-in-out;}
header a:hover{color: #ee9656; text-decoration: none;}

.mainmenu{width:auto; float:right; margin:20px 0 0 0; padding:0; list-style:none; clear: right;}
.mainmenu li{float:left; margin:0; padding:0 0 0 5px; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
.mainmenu li:hover{background:;}
.mainmenu li a{display:block; color:#000; padding:8px 10px; font-family:'Prompt-Regular',Arial, Helvetica, sans-serif; font-size:16px;-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
.mainmenu li:hover a{color:#FFF; text-decoration:none;background:#006BD6;}

.mainmenu li .subnav{position:absolute; display:none; background:#ddd;-webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.30); -moz-box-shadow:0px 6px 6px 0px rgba(50, 50, 50, 0.30); box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.30);}
.mainmenu li:hover .subnav{display:block; width:280px; background:#ddd; color:#000; margin:0; padding:0; position:absolute; z-index:99; float:left; list-style:none; font-size:14px;}
.mainmenu li:hover .subnav li{margin:0; padding:0; border-right:none; border-top:#CCC solid 1px; height:auto; width:100%; background:#f2f2f2;}
.mainmenu li:hover .subnav li:hover{background:#006BD6;}
.mainmenu li:hover .subnav li a{padding:8px 15px; color:#000; display:block;background:none;}
.mainmenu li:hover .subnav li a:hover{color:#FFF;background:none;}

#menutoggle{display: none;}
#menudropdown{display: none;}

.sticky{position:fixed; background:url(../images/bg_menu.png); -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.40); -moz-box-shadow:0px 4px 4px 0px rgba(50, 50, 50, 0.40); box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.40);}
.sticky li{background:none;}

@media screen and (max-width:960px){.mainmenu li a{padding:7px 10px;}}
@media screen and (max-width:860px){.mainmenu li a{padding:7px 7px;}}
@media screen and (max-width:840px){header .mainhead .logo{float: none;margin: 0 auto;}header .mainhead .logo img{height: 60px;} header .tophead{text-align:center;} header header .tophead .left,header .tophead .right{width:100%;}}
@media screen and (max-width:780px){header .mainhead{background: #133157; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #bdddea 0%, #71a9cc 19%, #407cb0 49%, #1b426d 78%, #133157 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #bdddea 0%,#71a9cc 19%,#407cb0 49%,#1b426d 78%,#133157 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #bdddea 0%,#71a9cc 19%,#407cb0 49%,#1b426d 78%,#133157 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdddea', endColorstr='#133157',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
header .mainhead .call{width:100%; text-align:center; margin-top:8px;color: #FFF;} header .mainhead .tel{ display:none;}header .mainhead .icontel{color: #FFF;}header .mainhead a{color: #FFF;}}
@media screen and (max-width:670px){header .mainhead .logo img{height: 65px;text-align: center;} header .tophead{display:none;}.mainmenu{background: #2e3647; /* Old browsers */
  background: -moz-linear-gradient(top,  #2e3647 0%, #515d72 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #2e3647 0%,#515d72 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #2e3647 0%,#515d72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3647', endColorstr='#515d72',GradientType=0 ); /* IE6-9 */
}.mainmenu li{padding: 0;border-bottom: #4f5b70 solid 1px;}.mainmenu li:hover .subnav li{background: #f2f2f2;padding: 0;} .mainmenu li:hover .subnav{display:none;}.mainmenu li a{font-size: 16px;margin:0 10px;padding: 0;color: #FFF;}}
@media screen and (max-width:414px){header .mainhead .logo img{height: 60px;} .sticky{position:static;font-size: 14px;}.mainmenu li{width:50%;font-size: 16px;} .mainmenu li a{width:94%; padding:7px 3%;font-size: 16px;} header .mainhead .call{margin:12px 0 0 0;} .mainmenu li:hover .subnav{display:none;}}

.slidecontainer{width:100%; float:left;}

.mainserviesbox{width:31%; padding:0 1.16%; float:left; text-align:center; font-family:'Prompt-Regular',Arial, Helvetica, sans-serif; font-size:20px;color: #FFF;}
.mainserviesbox img{margin:0 0 15px 0; height:108px;}

@media screen and (max-width:780px){.mainserviesbox{font-size:18px;} .mainserviesbox img{height:98px;}.bottonlink{padding: 5px 14px;border-radius: 12px;border: #555 solid 1px;margin: 0 5px 0 0;}}
@media screen and (max-width:414px){.mainserviesbox{font-size:18px;} .mainserviesbox img{height:88px;}}

.fourboxed{width:23%; float:left; background:#f2f2f2; margin:0 1% 0 1%; padding:40px 30px; text-align:center;position: relative;}
.fourboxed h1{font-size:22px; padding:0; margin:15px 0;}
.fourboxed a.go{display:block; width:100px; margin:30px 0 0 -50px;left:50%;float:left;transition: all 0.3s ease 0s;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius:8px; padding:7px 15px; color:#FFF;background: #4793d4;position: relative;}
.fourboxed a.go:hover{color:#FFF; background:#2e629f;}

.threeboxed{width:31.33%; float:left; margin:0 1% 0 1%; padding:40px 30px; text-align:center;position: relative;border-radius:6px;color: #111;background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ededed 0%, #ffffff 50%, #eaeaea 51%, #fcfcfc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ededed 0%,#ffffff 50%,#eaeaea 51%,#fcfcfc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ededed 0%,#ffffff 50%,#eaeaea 51%,#fcfcfc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.threeboxed h2{font-size:22px; padding:0; margin:15px 0 0 0;color: #111;}
.threeboxed a.go{display:block; width:100px; margin:30px 0 0 -50px;left:50%;float:left;transition: all 0.3s ease 0s;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius:8px; padding:7px 15px; color:#FFF;background: #4793d4;position: relative;}
.threeboxedoxed a.go:hover{color:#FFF; background:#2e629f;}

.threeboxed1{width:31.33%; float:left; margin:0 1% 0 1%; padding:40px 15px;color: #FFF;}
.threeboxed1 h2{font-size:22px; padding:0; margin:15px 0 0 0;color: #FFF;}

.brand{width:232px; height:140px; float:left; margin:2% 2.5%; border:#b3b3b3 solid 1px; display:table; text-align:center; -webkit-transition:box-shadow .15s ease-in-out; -moz-transition:box-shadow .15s ease-in-out; -o-transition:box-shadow .15s ease-in-out; transition:box-shadow .15s ease-in-out; position:relative;}
.brand:hover{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 0.35);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 0.35);}
.brand p{display:table-cell; vertical-align:middle;}
.brand p img{max-height:80px; max-width:80%; width:auto;}
.brand span{display:block; width:100%; padding:5px 0; text-align:center; position:absolute;  margin:110px 0 0 0; background:#0077d3; color:#FFF; font-size:14px;}

.prods {padding: 0px;float: left;width: 33%;background-color: #FFF;display: block;transition: all 0.3s ease 0s;color: #000; box-shadow: 
    1px 0 0 0 #ccc, 
    0 1px 0 0 #ccc, 
    1px 1px 0 0 #ccc,   /* Just to fix the corner */
    1px 0 0 0 #ccc inset, 
    0 1px 0 0 #ccc inset;margin: 1%;}
.prods img{margin-bottom: 15px;}
.prods:hover{position:relative;-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 0.55);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 0.55);}

.serv {padding: 20px;float: left;width: 100%;background-color: #FFF;display: block;transition: all 0.3s ease 0s;margin-bottom: 20px;}
.serv:hover{position:relative;}

.prodsleft {padding: 20px;float: left;width: 100%;background-color: #FFF;display: block;transition: all 0.3s ease 0s; box-shadow: 
    1px 0 0 0 #ccc, 
    0 1px 0 0 #ccc, 
    1px 1px 0 0 #ccc,   /* Just to fix the corner */
    1px 0 0 0 #ccc inset, 
    0 1px 0 0 #ccc inset;}
    
.catpro {padding: 0px;float: left;width: 46%;background-color: #FFF;display: block;color: #000;margin:2%;text-decoration: none;}
.catpro img{float: left;border: none;}
.catpro .des{width: 100%;float: left;padding: 30px 0 25px 0;text-align: left;color: #000;transition: all 0.4s ease 0s;}
.catpro .des h2{font-size: 28px;margin: 0;padding: 0 0 20px 0;}
.catpro:hover{text-decoration: none;}
.catpro:hover .des{text-decoration: none;}
.catpro .button{display: block;float: left;padding:15px 20px;font-size: 18px;color: #FFF;background: #000;border: #000 solid 1px;transition: all 0.3s ease 0s;margin: 0 0 30px 0;font-family:'gotham_medium';text-decoration: none;}
.catpro:hover .button{color: #000;background: #FFF;font-family:'gotham_medium';text-decoration: none;}

.backbutton{display: block;position: relative;float: left;padding:15px 20px;font-size: 18px;color: #FFF;background: #000;border: #000 solid 1px;transition: all 0.3s ease 0s;font-family:'gotham_medium';text-decoration: none;}
.backbutton:hover {color: #000;background: #FFF;font-family:'gotham_medium';text-decoration: none;}

.leftnav{width:19.8%; margin:0 2% 0 0; padding:0 2% 0 0;background-image: url(../images/bg_left.jpg);background-position: right top;background-repeat: no-repeat; float:left;border-right: #f2f2f2 solid 1px;}
.leftnav .brand{width:100%; height:88px;background: #FFF;}
.leftnav .brand img{max-height:70px; max-width:80%; width:auto;}

.productscontainer{width:76%; float:left;}
.productscontainer .listproducts{width:100%; float:left; padding:0 0 20px 0; margin:0 0 40px 0; border-bottom:#CCC solid 1px;}
.productscontainer .listproducts .picture{display:table; width:40%; float:left; margin:0 3% 0 0; text-align:center; height:auto;}
.productscontainer .listproducts .picture img{vertical-align:middle;display:table-cell; border:none; width:100%;}
.productscontainer .listproducts .shortdetail{width:57%; float:left; font-size:14px;}
.productscontainer .listproducts .shortdetail h2{font-size:22px; margin:0 0 15px 0;}
.productscontainer .listproducts .htd{background:#006BD6;color: #FFF;}
.productscontainer .listproducts .biTd{background: #FFF;}
.readmore{color:#FFF; background:#0080e2; border:#0080e2 solid 1px; padding:6px 20px; text-align:center; display:table; font-size:16px; margin:15px 0 20px 0; -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; -webkit-transition:all .15s ease-in-out; -moz-transition:all .15s ease-in-out; -o-transition:all .15s ease-in-out; transition:all .15s ease-in-out;}
.readmore:hover{color:#FFF; text-decoration:none; background:#ffc700; border:#ffc700 solid 1px;}

@media screen and (max-width:1170px){.mainmenu li a{padding:8px 8px;}}
@media screen and (max-width:960px){.brand{margin:1% 1.3%; width:22%;} .brand img{max-width:78%;}.fourboxed{width:48%; margin:0 1% 1% 1%;}.mainmenu li{padding:0 0 0 1px;}
.mainmenu li a{padding:8px 8px;}}
@media screen and (max-width:780px){.brand{margin:1%; width:31%;}.notm{display: none;}}
@media screen and (max-width:680px){.brand{margin:1%; width:30%;} .leftnav{display:none;} .productscontainer{width:100%;}.threeboxed1{padding:15px;}.threeboxed1 h2{font-size:18px;}}
@media screen and (max-width:500px){.brand{margin:1.5%; width:47%;}
.productscontainer .listproducts .picture{ width:100%;}
.productscontainer .listproducts .picture img{ max-width:100%;}
.productscontainer .listproducts .shortdetail{ width:100%;}
.fourboxed a{margin:30px 0 0 0;padding:5px 12px;}
.col-3.picpro{width: 50%;}
.row{padding:40px 0;}}
@media screen and (max-width:380px){.brand{margin:1%; width:45%;}}

.articles{width:100%; float:left; margin:0 0 20px 0; padding:0 0 20px 0; border-bottom:#CCC solid 1px;}
.runno{text-align:right; width:100%; font-size:14px; display:table;}

.career{width:100%; float:left; margin:0 0 20px 0; padding:0 0 20px 0; border-bottom:#CCC solid 1px;}

.port{display:table; width:100%; margin:0; padding:0; list-style:none;}
.port section{display:table-row;}
.port li{margin:0; padding:0; display:table-cell; width:48%; padding:1%;}
.port li:hover{background:#f1f1f1;}
.port li img{width:40%; max-height:140px; float:left; margin:0 2% 0 0; border:none;}
.port li p{margin:0; padding:0; float:left; width:58%;}
.galpic{width: 100%; height: 500px;}

.footerabout{width:100%; float:left; background:url(../images/img_footer.jpg) left top no-repeat;}
.footerabout span{display:block; margin:40px 0 40px 50%; width:50%; color:#FFF;}

.gmap {
        position: relative;
        padding-bottom: 55%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .gmap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.contactleft{width:50%; float:left;}
.contactright{width:50%; float:left;}

.overfoot{width: 100%;text-decoration: none;text-align: center;padding: 15px 0;color: #FFF;background: #333;float: left;font-size: 14px;} .overfoot a{color: #FFF;text-decoration: none;}
footer{float:left; width:100%; background:#222428; color:#FFF; padding:30px 0; font-size:14px;}
footer .logo{width: 200px;display: block;}
footer a{color:#FFF;}
footer .left{float:left;}
footer .right{float:right; text-align:right;}

@media screen and (max-width:960px){.prods{width: 23%;}}
@media screen and (max-width:780px){.footerabout span{width:50%; margin-left:300px; width:55%;}.prods .promane{font-size:22px;}.prods{width: 31.33%;}.map-responsive{padding-bottom:56.25%;}}
@media screen and (max-width:680px){.footerabout{background:none;}.footerabout span{margin-left:0px; width:100%; text-align:center;}footer .left,footer .right{width:100%; text-align:center;}.prods{width: 48%;}.threeboxed{width:48%;margin-bottom: 10px;}
}
@media screen and (max-width:580px){
header{padding-bottom: 15px;}
header .call{margin: 5px 0 0 0;}
#menutoggle{width: 100%;color: #000;background: #CCC;padding: 15px 20px;cursor: pointer;float: left;display: block;font-family:'gotham_medium';position:relative; z-index:999; -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20); -moz-box-shadow:0px 4px 4px 0px rgba(50, 50, 50, 0.20); box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20);border-bottom: #bbbbbb solid 1px;}
#menudropdown{width: 100%;float: left;background: #f2f2f2;padding: 0;margin: 0;-webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20); -moz-box-shadow:0px 4px 4px 0px rgba(50, 50, 50, 0.20); box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.20);}
#menudropdown a{display: block; float: left;padding: 15px 20px 15px 45px;background: #f2f2f2;color: #000;text-decoration: none;width: 100%;border-bottom: #CCC solid 1px;}
#menudropdown a:hover{background: #f2f2f2;color: #000;text-decoration: none;}
.contactleft{width:100%;}
.contactright{width:100%; clear:both;}
.port li img{width:100%;  margin:0 0 2% 0; border:none;}
.port li p{margin:0; padding:0; width:100%;}
.catpro {width: 100%;margin:0%;}
.catpro .button{margin-bottom: 60px;}
}

.cd-top {
  display: inline-block;
  height: 30px;
  width: 30px;
  position: fixed;
  bottom: 60px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(33, 33, 33, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #333;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 40px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 45px;
    width: 45px;
    right: 30px;
    bottom: 60px;
  }
}
.closed {   position: fixed;   z-index: 9999;right: 0;top: 0; }
@media only all and (min-width: 768px) { .closed { width: auto; } }
.linewidth{width: 100%;float: left;height: 1px;background: #DDD;}
.picpro img{border: #CCC solid 1px;}