@font-face {
    font-family: din;
    src: url('../fonts/din/DIN-Light.otf');
	font-weight:200;
}  
@font-face {
    font-family: din;
    src: url('../fonts/din/DIN-Regular.otf'); 
} 
@font-face {
    font-family: din;
    src: url('../fonts/din/DIN-Bold.otf');
	font-weight:bold;
} 


body{margin:0px; font-family: Din, serif !important; background-color: #fff !important}
body a, .link{cursor:pointer; color:#5182bb}  
body a:hover, .link:hover{text-decoration: underline;}  

.content-wrapper{width: 1100px; max-width:94%; margin:auto;  padding:0 1em;   } 

*:focus {  outline: none !important; }
.user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.show-mobile{display:none !important}
.hide-mobile{display:inherit}  

/* default table */ 
.div-table{display:table}
.div-table-caption {display: table-caption}
.div-table-col{display:table-cell; vertical-align:top;}
.div-table-col-5{display:table-cell; padding:0.5em; vertical-align:top;}
.div-table-col-3{display:table-cell; padding:0.3em; vertical-align:top;#05396f}
.div-table-col-2{display:table-cell; padding:0.2em; vertical-align:top;}
.div-table-row{display:table-row;} 

#header{position:relative; background-color: #042b54; height: 450px; background-image: url("../img/bg-header.png"); background-repeat: no-repeat; background-position: right top} 

#header .company-address-panel{ text-align: right; margin-right: 1.5em}
.top-menu-bar {color :#fff ; font-size:1em; width:100%; padding: 1em } 
.top-menu-bar a, .top-menu-bar a:active, .top-menu-bar a:link  {  color :#fff ; text-decoration: none; border-top:5px solid transparent} 
.top-menu-bar a:hover {color:#ffa44b}

.main-menu { float: right; list-style:none;  padding:0; margin:0; margin-right: 1em }
.main-menu > li {  margin:0; display:inline-block; float:left; margin:0em 0.5em; } 
.main-menu > li a.selected {border-color: #ffa44b; color: #ffa44b}
 
.dummy-margin { clear:both; height: 5em} 

.index-overview .overview {text-align:justify; vertical-align: top}
.index-overview .certificate {padding-left:2em; width:20em; vertical-align: top}

.company-logo .logo{float:left; margin-left: 1em; height:3em;  width:3em;  background-size: contain ; background-repeat: no-repeat; background-position: center;  }
.company-logo a, .company-logo a:hover {color:#fff;}
.company-information-panel {float:left; margin-left: 1.5em}
.company-information-panel .company-name {font-size: 1.3em;  letter-spacing: 2px;}
.company-information-panel .company-tagline {font-size: 0.9em}
 
.mobile-logo {position: relative; top: 0.5em; left: 2em}
.mobile-logo  .company-logo .logo {height: 2em}
.mobile-logo  .company-information-panel {font-size:0.8em}

.vision, .mission {padding: 1em; color: #fff; margin-bottom:0.5em; text-align: center; width: 20em}
.vision .title, .mission .title {font-size: 2em}
.vision {background-color: #05396f}
.mission {background-color: #00749f}

#btn-side-menu { position: fixed; z-index: 99999; display: none; font-size: 1.7em; left: 0.5em; top: 0.2em; color: #fff }


.certificate-image-list {margin: 0; padding: 0; list-style: none;  }
.certificate-image-list li {width: 20em; height: 12em; display: inline-block; float:left; margin: 0.5em;  background-size: contain; background-repeat: no-repeat; background-position: center}
.customer-image-list {text-align: center; width:auto}
.customer-image-list .logo {width: 10em; height: 6em; display: inline-block;   margin: 0.5em 0.8em;  background-size: contain; background-repeat: no-repeat; background-position: center}

.core-business {list-style: none; margin: 0; padding: 0}
.core-business li {width: 33.3333%;  position: relative; float: left; display: inline-block; padding: 0.5em}
.core-business li .business-panel{border:1px solid #dedede; width: 100%; height: 100%; padding: 0.5em}
.core-business li .business-panel .description {margin-top:5em}
.core-business li h2 {font-size: 2em; color: #042b54}
.core-business li .short-description {font-size: 0.8em}

.page {clear:both; margin-top:1em; list-style:none;margin:0px; padding:0px;text-align:center;  } 
.page li{padding:0.2em 0.5em !important; font-size:0.9em; margin:0 0.3em !important;  text-align:center !important;width:30px;  display:inline-block; }
.page li:hover{ border-bottom: 2px solid #5182bb } 
.page .ellipsis:hover { border-bottom:0 !important;}
.page-active{text-decoration:none !important; border-bottom: 2px solid #5182bb } 
	
.prev-next-page {display:none; padding:0; text-align:center}  
.prev-next-page a > li, .prev-next-page .inactive-prev-next-page {width:22%; background-color:#FFF; border:1px solid #5182bb; color:#5182bb; margin:1% !important;text-decoration:none !important; display:inline-block; padding:0.5em 0;}
.prev-next-page a > li:hover {background-color:#5182bb; color:#fff;}
.prev-next-page .inactive-prev-next-page, .prev-next-page .inactive-prev-next-page:hover { background-color:#FFF !important; border:1px solid #dedede !important;  color:#dedede !important;}
 
.scrollToTop {color:#999 !important; text-decoration:none !important; line-height:1em; text-align:center;}
.scrollToTop:hover  {color:#333 !important;  text-decoration:none; }
.scrollToTop .arrow {width: 0;  height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #999; margin:auto; margin-bottom:0.5em;}
.scrollToTop:hover .arrow {border-bottom: 10px solid #333;}
 
/* TEXT COLOR SET */
.text-white {color:#FFF !important;}
.text-green-avocado  {color:#568203 !important;}
.text-red-cardinal  {color:#C41E3A !important;}
.text-yellow-mikado  {color:#FFC40C !important;}
.text-blue-munsell {color:#0093AF !important;}
.text-purple-purpureus{color:#9A4EAE !important;}
.text-black-jet{color:#343434 !important;}
.text-gray-dim{color:#696969 !important}
.text-gainsboro{color:#F00 !important}
.text-cobalt-blue{color:#0047AB !important;} 


/* BG COLOR SET */
.bg-green-avocado {background-color:#568203  !important;}
.bg-red-cardinal {background-color:#C41E3A  !important;}
.bg-yellow-mikado {background-color:#FFC40C  !important;}
.bg-blue-munsell {background-color:#0093AF  !important ;}
.bg-blue-steel {background-color:#4682b4  !important ;}
.bg-purple-purpureus{background-color:#9A4EAE !important;} 
.bg-gray-dim{background-color:#696969 !important;} 
.bg-silver{background-color:#C0C0C0 !important;} 
 
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


/* BOOTSTRAP OVERRIDE */
.container {width:100%; padding: 0 !important} 
.form-control:focus { border-color: inherit !important;  -webkit-box-shadow: none !important;  box-shadow: none !important;} 

.form-horizontal .control-label {text-align: left}

.navbar.navbar-default {background: none; border:0} 
.nav.navbar-nav a{padding: 0; color :#fff !important; border:0}
.nav.navbar-nav a .caret {margin-left: 0.5em; position: relative; top: -0.2em}
.nav.navbar-nav a:hover {color:#ffa44b !important}    
.navbar-collapse.collapse {padding: 0}
.navbar .dropdown.open a {background: none !important;}
.dropdown-menu {background-color: rgba(102,102,102,0.2)}
.dropdown-menu li a{padding: 0.5em !important;}

/* BOOTSTRAP OVERRIDE */


.mobile-menu {display: inline-block; float:left; padding: 0.5em} 

/* ============================ SCROLL TO TOP ========================= */  
/* core */
.scrollToTop {position: fixed;right: 20px;bottom: -100px;opacity: 0;overflow: hidden;outline: none;} 
.scrollToTop_show {opacity: 1;bottom: 40px;} 
@-webkit-keyframes scrollToTop_fade {0%	 {opacity: 0;}100% {opacity: 1;}}
@keyframes scrollToTop_fade {0%   {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes scrollToTop_slide {0%   {bottom: -100px;}100% {bottom: 20px;}}
@keyframes scrollToTop_slide {0%   {bottom: -100px;}100% {bottom: 20px;}}
 
.scrollToTop_animating,.scrollToTop_animating * {pointer-events: none !important;}

.scrollToTop {width: 50px;height: 50px;color: #000; font-size: 12px;text-decoration: none;text-transform: uppercase;text-indent: 100%;white-space: nowrap;background: no-repeat center center transparent;}
.scrollToTop_default {display: block;width: auto;height: auto;padding: 10px;text-indent: 0; border-radius: 10px;}
.scrollToTop_default:hover {}

/* skin(cycle) */
.scrollToTop_cycle {background-image: url("../img/cycle.png");}
.scrollToTop_cycle:hover {background-image: url("../img/cycle-hover.png");}

/* skin(square) */
.scrollToTop_square {background-image: url("../img/square.png");}
.scrollToTop_square:hover {background-image: url("../img/square-hover.png");}

/* skin(text) */
.scrollToTop_text {background-image: url("../img/text.png");}
.scrollToTop_text:hover {background-image: url("../img/text-hover.png");}

/* skin(triangle) */
.scrollToTop_triangle {background-image: url("../img/triangle.png");}
.scrollToTop_triangle:hover {background-image: url("../img/triangle-hover.png");}
/* ============================ SCROLL TO TOP ========================= */ 


/* ============================= CONTENT ============================== */ 

.medsos-panel ul {list-style: none; padding: 0; margin: 0; }
.medsos-panel ul li {display: inline-block; color:#666; float: left; margin: 0; margin-right: 0.6em; font-size: 1.8em}
.medsos-panel ul a:hover  li {color:#333}

  
#banner-galleria{height: 350px; width: 1100px; margin:auto; max-width: 94%;  }   
#banner-galleria .galleria-stage {bottom:0; border:1px solid #fff; background-color: #000} 
#banner-galleria .galleria-bar {display:none;}
#banner-galleria .galleria-thumbnails-container{display:none} 
 

.content-title {width:100%; margin-bottom: 1em; }
.content-title .line {border-top: 5px solid #c90c0c; width: 5em}
.content-title .title {padding-right: 1em; display: inline-block; max-width: 90%; }   
.content-title .title h1 {font-size: 1.5em}

h1 { font-size:2em;  font-weight: 200 !important; color: #c90c0c} 
.content-title h2 { font-size:1.5em;  font-weight: 200 !important;} 
.content-title .tag a { color: #9d2829; text-decoration: underline} 
  
.form-information {margin: 1em 0}
  
.scroll-to-top {cursor:pointer; background-position:0px -25px; }
   
.gallery-detail{ width:100% }
  
.form-default  {min-width:30em; width:50%; margin:auto;}   

.notification-msg{color:#fff; padding:0.3em 0;}
.notification-msg > ul{margin:0; padding:0; padding-left:2em}
 
.btn-primary .loading-icon{display: none}

#form-payment-confirmation .btn-submit input{margin-right: 0.5em;}

.galleria-theme-twelve .galleria-progress {  background: #d89333 !important; }

.contact-us-table {width:80%; margin: auto}
.contact-us-table .h1 {font-size: 1.5em}
.contact-us-company-address {min-width: 20em;}
 
.news {list-style: none; width: 100%; margin: 0; padding: 0}
.news li {float: left; width: 33.333%; display: inline-block; padding: 0.5em;}
.news li .content-panel {border:1px solid #dedede;}
.news li .content-panel .information {padding: 1em}
.news li .content-panel h2 {color: #0093AF; font-size: 1em; line-height: normal}
.news li .content-panel .image{ height: 15em; background-color: #dedede; background-position: center; background-repeat: no-repeat; background-size:cover; }
.news li .publishdate {color: #999; font-style: italic}
.news li .shortdesc {text-align: justify}

.news-detail img {max-width: 100%}
.news-detail .publishdate{color:#999; margin-bottom: 1em; font-style: italic}

.footer {background-color: #042b54; color: #fff; padding: 2em 3em; background-image: url("../img/bg-header.png"); background-repeat: no-repeat; background-position: right top}
.footer .footer-col {padding: 0 2em; float:left;  vertical-align: top; width:33.3333%; color: #ccc}
.footer .footer-col .title {font-size: 1.5em; margin-bottom: 0.5em; color: #fff;}
.footer .footer-col a{color: #ccc} 
.footer .footer-col a:hover{color: #fff} 
.footer .footer-menu {list-style: none; padding: 0; margin: 0}
.footer .footer-menu li {margin-bottom: 0.5em; color: #dedede}  

.free-page img{max-width: 100% !important; height: auto !important;}
 
.contact-channel {font-family: sans-serif}

.service-list {padding: 0; margin: 0;}
.service-list li {width:50%; display: inline-block; float:left; padding: 0.5em}
.service-list li .panel {border:1px solid #dedede; width: 100%; height: 100%; padding:0.5em; height: auto; margin: 0}
.service-list li .panel .name {font-weight: bold}

/* responsive */ 

@media screen and (max-width: 1050px){   
   
}
@media screen and (max-width: 1000px){   
    .footer .footer-col { width:50%; margin-bottom: 2em;} 
}


@media screen and (max-width: 950px){    
    .contact-us-table {width:90%} 
    .company-logo .logo { height:2.5em;  }
    .company-information-panel .company-name  {letter-spacing: normal; font-size: 1.2em}
    .company-information-panel .company-tagline {font-size: 0.7em}
    .company-information-panel {margin-left:0.8em}
    .main-menu {font-size: 0.9em}
    .navbar {top:-0.1em}
    .top-menu-bar {padding: 1em 0}
}
 

@media screen and (max-width: 767px){    
    .hide-mobile{display:none !important}
	.show-mobile{display:initial !important} 
    
    #btn-side-menu {display:block;}
    #header {height: 3em; width: 100%; position: fixed; z-index: 99999; top:0}
    #banner-galleria {display: none}
    .dummy-margin { clear:both; height: 3em }
     
    .core-business li {width: 100%}
    
    .mobile-table , .mobile-table> .div-table-row, .mobile-table > .div-table-row > .div-table-col {  display: inherit; width:100%}
    .vision{margin-top:2em}
    .vision, .mission  {width: 100%} 
    
    .mobile-search-bar {display:block}
     
    #header .content-wrapper {padding: 0; margin: 0} 
    .news li {width:50%}
    
	.form-default {width:94% !important;min-width:0;} 
	.form-default  .btn-primary, #form-cart .btn-primary {width:100% !important}  
	 
    .contact-us-table , .contact-us-table > .div-table-row, .contact-us-table > .div-table-row > .div-table-col-5 {  display: inline-block; width:100%}
    .contact-us-company-address {text-align: center; }
    .contact-us-company-address .div-table, .contact-us-company-address .div-table-row, .contact-us-company-address .div-table-col {width:auto !important; text-align: left; margin: auto;}
    .contact-us-company-address .div-table-col:first-child {padding: 0 0.5em;}
    .contact-us-table .medsos-panel {width: 100%; text-align: center} 
    .contact-us-table .medsos-panel ul {display: inline-block; margin: auto; }
    .contact-us-table .medsos-panel ul li {margin: 0 0.3em}  
}

@media screen and (max-width: 600px){  
    .footer .footer-col {float:none; width:100%; margin: 0 0 2em 0;  padding: 0;}  
    .index-overview, .index-overview .div-table-row, .index-overview .div-table-col{display: inherit}  
    .index-overview .overview, .index-overview .certificate, .service-list li{ width: 100%;}
    
}


@media screen and (max-width: 500px){     
    .content-title h1 { font-size:1.5em;  font-weight: 200 !important;}
  
	.page, .scrollToTop , .footer .panel {display:none !important}
	.prev-next-page {display:inline !important} 
	
    .news li {width:100%}  
}

/* iphone */
@media screen and (max-width: 375px){   
.g-recaptcha {transform:scale(0.95);transform-origin:0;-webkit-transform:scale(0.95);transform:scale(0.95);-webkit-transform-origin:0 0;transform-origin:0 0; 0}
}