﻿html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
body { margin: 0;  font-family: 'Raleway', sans-serif; }
.container { margin: 0 auto; }

.clear { clear: both; }
.header { background-color: rgba(255, 255, 255, 0.9); position: absolute; text-align: center; width: 100%; z-index: 999; }
.header-in { padding: 10px 0px 10px 0px; }
.header-in ul { margin: 45px 0 0 0; padding: 0; list-style-type: none; float: right; }
.header-in ul li { float: left; margin-right: 35px; }
.header-in ul li a { text-transform: uppercase; font-size: 15px; color: #696969; text-decoration: none; }
.header-in ul li a:hover { color: #258dca; }
.social { float: left; font-size: 13px; margin:0px; padding:0px; color: #696969; text-transform: uppercase; text-align:left; }
.social a { margin: 15px 0 0 15px; }
.social li { float:left; width:40%; list-style:none; margin:0px 0px 10px 0px; padding:0px; }
.active { color: #258dca!important; }
.logo { float: left; }
.banner { text-align: center; position: absolute; top: 40%; left: 0px; right: 0px; margin: 0 auto; z-index: 2; }
.banner h1 { margin: 0; color: #1a4079; font-size: 3em; font-weight: normal; }
.banner h1 span { color: #258dca; }
.banner h3 { margin: 0 0 30px 0; font-size: 30px; color: #4d4d4d; font-weight: normal; }
.btn1 { background-color: #258DCA; color: white; text-transform: uppercase; width: 150px; line-height:50px; height: 50px; border: none; border-radius: 3px; font-size: 16px; font-weight: bold; margin: 0 20px 0 0; cursor: pointer; display:inline-block; text-decoration:none; }
.btn1:hover { background-color: #1A4079; }
.btn2 { background-color: #696969; color: white; text-transform: uppercase; width: 150px; line-height:50px; height: 50px; border: none; border-radius: 3px; font-size: 16px; font-weight: bold; cursor: pointer; display:inline-block; text-decoration:none; }
.btn2:hover { background-color: #1A4079; }
.footer { font-size:13px; padding:40px 0px; }
.footer h3 { font-size:15px; text-transform:uppercase }
.copyright { background-color: #252d3a; border-top: 1px solid #787878; padding:15px 0px; text-align:center; color:#c9c9c9; }

.punchline { color: #f7b648; z-index: 999; position: absolute; top:200px; text-align: center; left:0px; right:0px; margin:0 auto; max-width:550px; width:100%;  font-size: 36px; font-weight:300;  line-height:66px; font-family: 'Raleway', sans-serif; font-size:55px; }
.punchline .small { font-size:22px; color:#fff; letter-spacing:1px;}


/*extra*/
.img { max-width:100%;}
#videobcg { position: relative; top:0px; left: 0px; z-index: -100; overflow: hidden; width: 100%; height:auto; max-width: 100%; max-height: 100%; background-position:center; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; }
#video-pat { background: url(../images/grid-pattern.png) repeat; position: absolute; top: 0; z-index: 100; height: 100%; display: block; width: 100%; }
* { margin:0px; padding:0px; }
video { width:100%; max-width:100%; /* min-width:960px; /* background:url(images/vid-poster.jpg) no-repeat; */ min-height:480px; height:100%; }
.new-header-frame { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; position: relative; }
.inner-header-frame { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; position: relative; }
.video-frame-outside { position: relative; z-index: 0; }

.logo span { color:#fff; text-transform:uppercase; }
.logo { color: #fff; z-index: 999; position: absolute; top: 20px; left:20px; font-size: 24px; text-transform: uppercase; line-height: 30px; font-family: 'Raleway', sans-serif; letter-spacing:2px}


.txt { position: absolute; z-index: 1000; font-size:36px; text-transform:uppercase; color:#fff; font-weight:normal; text-align:center; ; top:30%; width:700px; margin:0 auto; left:0px; right:0px; }
.txt p { padding:30px 0px 30px }
.btn-blue { display:inline-block; padding:15px 30px; text-align:center; color:#fff; background:#09F; text-decoration:none; text-transform:uppercase; font-size:18px; border-radius:30px; margin:0 5px; }
.btn-blk { display:inline-block; padding:15px 30px; text-align:center; color:#fff; background:#000; text-decoration:none; text-transform:uppercase; font-size:18px; border-radius:30px; margin:0 5px; }
#owl-demo .img1 { background: url(../images/img1.jpg) no-repeat top center; background-size: cover; position: relative; }
#owl-demo .img2 { background: url(../images/img2.jpg) no-repeat top center; background-size: cover; position: relative; }
#owl-demo .pattern { width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background: url(../images/grid-pattern.png); }
.menu-top-res { display: none; position:absolute; top:15px; right:0px; }
/*Services*/
.logistic-banner { background: url('../images/service-banner.html') no-repeat right #0388d1; padding: 90px 0 28px 0; }
.logistic-banner h3 { font-size: 30px; color: white; font-weight: normal; margin: 0 0 0 43px; }
.header2 { background-color: rgba(255, 255, 255, 0.9); text-align: center; width: 100%; z-index: 999; }
.sidebar { float: right; width: 28.25%; padding: 22px 30px 0 30px; }
.border-none { border: none!important; }
.customer-service { background: url('../images/customer-service.html') no-repeat; background-size: cover; padding: 40px 0 25px 27px; }
.customer-service h4 { font-weight: 100; font-size: 18px; color: #272727; margin: 20px 0 0 0; }
.customer-service h3 { font-weight: normal; font-size: 24px; color: #272727; margin: 0; }
.mr0 { margin: 0!important; }


.slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; font-size: 18px; }
.slicknav_no-text { margin: 0 }
.slicknav_icon-bar { display: block; width: 1.35em; height: 0.20em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_icon-bar { background-color: #fff; }
.slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
#owl-demo .item { display: block; width: 100%; height: 100vh; }
.inner-header-frame #owl-demo .item { display: block; width: 100%; height: 600px; }

.home h2 { font-size:22px; color:#000;  line-height:36px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:400; }
.home { font-size:16px; line-height:21px; padding:30px 0px; background:url(../images/home-bg.jpg) no-repeat left bottom #252d3a; background-size:cover; }
.home p { padding-bottom:20px; text-align:justify; color:#000; line-height:26px; font-weight:500; font-size:15px; position:relative; padding-left:30px; }
.home p img { vertical-align:middle; margin-right:10px; position:absolute; left:0px; top:5px;}
.aboutus h2 { font-size:72px; line-height:60px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:300; color:#fbba48; }
.aboutus h3 { font-size:24px; line-height:30px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:300; color:#fff; }
.aboutus { font-size:15px; line-height:21px; padding:40px 0px; background:url(../images/about-bg.jpg) no-repeat 0 0 #252d3a; background-size:auto 100%;  color:#c9c9c9; }
.aboutus p { padding-bottom:20px; text-align:center;  }

.overbox {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+60,ffffff+60&0+0,1+60 */
background:#efefef;
 
}

#services { font-size:15px;   line-height:21px; padding:60px 0px 0; color:#fff; background:#fff; overflow:hidden; }
#services .wrap { max-width:90%; margin:0 auto;}
#services h2 { font-size:72px;   line-height:60px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:300; color:#1b2026; }
#services p { padding-bottom:20px; text-align:center; }
#services li { list-style:none; }
#services li .h3 { width:100%; z-index:999; padding:20px 0px 30px; display:block; color:#000; font-size:20px; text-align:left; font-weight:normal; margin:0px; z-index:2; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
#services li h4 { font-size:20px; text-align:center; font-weight:normal; margin:0px 0px 10px 0px; padding:0px;  }
#services li .more { position:absolute; top:30px; left:0px; width:100%; padding:15px; z-index:2; font-size:14px; line-height:21px; text-align:justify;  color:#000; }
#services li .more li { padding:0px 20px 10px 20px; }
#services .servImg { margin:0px 0 20px; padding:0px; position:relative; width:100%; padding:0px; overflow:hidden; cursor:pointer; }
#services .servImg img { width:100%; padding:0px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
#services .servImg .overbox { position: absolute; top: 0; border:1px solid #efefef; left: 0; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; width: 100%; height: 100%; z-index:1 }
#services .servImg:hover .overbox { opacity: 1; }
#services .servImg .more { opacity: 0; transition-delay: 0.1s; transition-duration: 0.2s; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; transform: translateY(40px); -webkit-transform: translateY(40px); }
#services .servImg:hover .more, .servImg:focus .more { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); }
#services .servImg:hover .h3 { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; display:none }

.applications { font-size:15px; line-height:21px; padding:0px 0px 40px; color:#fff; background:#252d3a; overflow:hidden; }
.applications h2 { font-size:72px; line-height:80px; text-align:center; margin:0px 0px 40px; padding-top:60px; font-weight:300; color:#fbba48;   }
.applications p { padding-bottom:20px; text-align:center; max-width: 1000px; margin: 20px auto;}
.applications li { list-style:none; padding:0; color:#8a8c8e; font-size:14px; padding:20px 50px;  }
.applications li h4 { text-align:center; font-weight:normal; line-height:21px; margin:20px 0px 20px 0px; padding:0px; color:#fbba48; font-size:25px; }
.applications li .more li {display:inline-block; padding:0 0px;}
.applications .contain { margin:0 auto; width:90%;}


.applications .row { margin:0px; }
.applications .servImg { margin:0px 0 0px; position:relative; width:100%; padding:0 0px; overflow:hidden; cursor:pointer; text-align:center }
.applications .servImg img {  padding:0px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
.applications .servImg .overbox { background-color: #000; position: absolute; top: 0; left: 0; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; width: 100%; height: 100%; z-index:1 }


#expertise { font-size:15px; line-height:21px; padding:00px 0px 60px; background:#fff; overflow:hidden; }
#expertise h2 { font-size:72px; line-height:80px; text-align:center; margin:0px 0px 40px; padding-top:60px; font-weight:300; color:#1b2026; }
#expertise h4 { font-size:36px; line-height:40px; text-align:center; margin:0px 0px 40px; padding-top:60px; font-weight:400; color:#1b2026; }
#expertise .stxt { display: block; font-size: 35px; color: #fff; clear: both; text-align: left; position: absolute; bottom: 20px; left: 35px; }
#border img { margin-left:260px; }

.services h3 { margin-top: 0px; font-size: 24px; margin-bottom: 15px; color:#fbba48; }
.services .serv-block2 ul { margin-bottom:30px;}
.services .serv-block2 li { line-height:21px; font-size: 15px; font-weight: 500; color: #000; margin:10px 0; list-style:none; background:url(../images/bullet-txt.png) no-repeat 0 3px; padding-left:30px;  }

#box1 h2 { font-size: 20px; line-height: 0; text-align: center; margin: 0px 0px 40px; font-weight: 400; }
#box1 { font-size:15px; line-height:21px; padding:20px 0px; margin:0 auto; }
#box1 p { padding: 0px; text-align: center; }
#box1 p:last-child { padding:0px 0; text-align:center; padding-top:0px; }
#box1 ul { margin-top:0px; width:200px; margin:0 auto; margin-bottom:10px;}
#box1 li { list-style: none; float: none; padding-left: 20px; font-size: 15px; background: url(../images/bullet_black.png) no-repeat; background-position:0px 12px; line-height: 28px;  }
#box2 h2 { font-size:28px; line-height:35px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:400; }
#box2 { font-size:15px; line-height:21px; padding:20px 0px; }
#box2 p { padding:0px 0; text-align:center; }
#box2 p:last-child { padding:0px 0; text-align:center; padding-top:20px; }
#box2 ul { margin-top:20px; }
#box2 li { list-style: none; float: left; padding-left: 57px; font-size: 18px; background: url(../images/bullet.png) no-repeat; background-position: 40px 9px; }
.contactform h2 { font-size:48px; line-height:60px; text-align:center; margin:0px 0px 40px; padding-top:20px; font-weight:400; }
.contactform { font-size:15px; line-height:21px; padding:60px 0px; background:url(../images/contact.jpg) no-repeat; background-size:cover; }
.contactform p { padding-bottom:20px; text-align:center }
.contactform .contact_focus { max-width:400px; margin:0 auto;}
.contactform .col-lg-12 { margin-bottom:10px;}
.contactform textarea { height:120px;}
.btn_form { margin-top: 30px; padding: 10px 20px; color: #fff; background: #fbba48; border: none; border-radius:20px; font-size:21px; letter-spacing:1px;}


a#back-top { background: url("../images/top.png") no-repeat scroll 0 0px; border-radius: 5px; bottom: 80px; display: none; height: 50px; position: fixed; right: 10px; text-indent: -99999em; width: 50px; z-index: 99; cursor: pointer; }


@media only screen 
  and (min-width: 320px) 
  and (max-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	  
.punchline { margin-top: 50px !important;}	
	
.btn-blue { margin-left: 50px !important; }
	  
}
  
  

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px){
	  
.home {background: none;
	   background-color: #bfccdf !important;}	 
	   
.home p {color:#333 !important;}	

.applications li .more li {	background : none !important;}  

}


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
	  
.home {background: url(../images/home-bg.jpg) no-repeat center center;
	   background-color: #bfccdf !important;
	   background-size: 110%;}
	   
.home p {color:#333 !important;}

.applications li .more li {	background : none !important;} 



}

@media only screen 
  and (min-device-width: 1025px) 
  and (max-device-width: 1720px) {
	  
.home {background: url(../images/home-bg.jpg) no-repeat center center;
	   background-color: #bfccdf !important;
	   background-size: 110%;}	  
	  
	  
 }
 
@media only screen 
  and (min-device-width: 640px) 
  and (max-device-width: 1023px) {
	  
	  
#services .col-sm-6 {width: 55% !important; margin-left: 170px !important;}

#applications .col-sm-6 {width: 55% !important; margin-left: 190px !important;}	  
	  
}
