@charset "UTF-8";
/* CSS Document */

/* BOOTSTRAP RESETS / MODS BROWSER BUG FIXES
* -------------------------------------------------- */

/* USE if using full screen banners */
html, body {
    height: 100%;
    margin: 0;
}


/* Safari Font Fix */
body {
    -webkit-font-smoothing: subpixel-antialiased;
}



/* GLOBAL STYLES
* -------------------------------------------------- */

body {
	font-family: Roboto, Arial, sans-serif;
	font-size:18px;
	color: #565656;
}



/* GLOBAL COLOURS
* -------------------------------------------------- */
.bkg-etl-blue{background:#0C2A62; color:#fff;}
.bkg-etl-teal{background:#4CB6B3; color:#fff;}
.bkg-black{background:#000; color:#fff;}
.bkg-white{background:#FFF}
.bkg-grey{background:#565656}

.txt-etl-blue{color:#0C2A62;}
.txt-etl-teal{color:#4CB6B3;}
.txt-black{color:#000;}
.txt-white{color:#FFF}
.txt-grey{color:#565656}



/* GLOBAL LINKS
-------------------------------------------------- */
a:hover{text-decoration:none;}

/* Default Content Link */
section a{color:#4CB6B3;}
section a:hover{color:#0C2A62;}

/* Link on Teal Bkg */
section.bkg-etl-teal a{color:#565656;}
section.bkg-etl-teal a:hover{color:#0C2A62;}

/* Link on BLUE Bkg */
section.bkg-etl-blue a{}
section.bkg-etl-blue a:hover{color:#eee;}



/* GLOBAL BUTTONS
-------------------------------------------------- */

.btn{font-family: "Roboto Condensed"; font-weight:600; border-radius:0; border:none; transition: all 0.5s ease 0s;}
.btn:hover{}


.btn-lg{padding: 18px 29px 18px 29px; font-size:1.1em;}

@media (min-width:768px){
.btn-lg{padding: 18px 34px 18px 34px; font-size:1.2em;}
}

.btn-default{
	border:3px solid #4CB6B3;
	background:#4CB6B3;
	color:#FFF;
}

.btn-default:hover{
	border:3px solid #0C2A62;
	background:#FFF;
	color:#0C2A62;
}	

/* Button on Blue Bkg */
.bkg-etl-blue .btn-default{background:#4CB6B3; border:3px solid #4CB6B3;}
.bkg-etl-blue .btn-default:hover{background:#0C2A62; color:#FFF; border:3px solid #FFF;}

/* Button on Teal Bkg */
.bkg-etl-teal .btn-default{background:#0C2A62; border:3px solid #0C2A62;}
.bkg-etl-teal .btn-default:hover{background:#4CB6B3; color:#FFF; border:3px solid #FFF;}






/* GLOBAL FONT FORMATTING
-------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {margin-bottom:20px;}

h1{font-size:2.5em; font-weight:bold;}
h2{font-size:1.8em; font-weight:bold;}
h3{font-weight:500;}
h4{font-weight:500;}

h2.section-title{text-transform:uppercase; margin:0; padding-bottom:30px; text-transform:uppercase;}

p{margin-bottom:20px;}
p.lead{font-size:1.2em; font-weight:500;}

.condensed{font-family:"Roboto Condensed";}





@media (min-width: 768px) {
h1{font-size:5em; }
h2{font-size:3.5em;}
p.lead{}
}

@media (min-width: 992px) {       
h1{font-size:5em; }
h2{font-size:3.5em; }
p.lead{}     
}

@media (min-width: 1200px) {       
h1{font-size:5em; }
h2{font-size:3.5em; }
p.lead{}    
}






/* HEADER BAR
* -------------------------------------------------- */

header{}

@media (min-width: 768px) {
header{border-top:#0C2A62 5px solid;}
}


/* HEADER LOGO
* -------------------------------------------------- */
a.navbar-logo{margin:0px; padding:0px; display:block;}

.etl-logo{width:auto; height:81px; margin:0px; padding:0px; margin-top:5px; margin-left:10px; padding-right:0px;}

@media (min-width: 768px) {
	.etl-logo{height:96px; margin-top:6px; margin-left:-20px;}
}

@media (min-width: 992px) {       
   .etl-logo{height:110px; margin-left: 0px;}      
}

@media (min-width: 1200px) {       
   .etl-logo{height:114px;}      
}



/* HEADER NAVBAR
-------------------------------------------------- */

.navbar-wrapper {
  z-index: 20; 
  background: #565678; 
  border-bottom:1px solid #eee;
}
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;
}
.navbar-wrapper .navbar {
  padding-right: 0px;
  padding-left: 0px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}

.navbar-wrapper .navbar-right{background:#0C2A62;}




/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  .navbar-wrapper{background: transparent url('../img/nav-bkg-3400x52-01-min.png') top center no-repeat; border-bottom:1px solid #eee;}
  
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0px;
    padding-left: 0px;
  }
}



@media (min-width: 1402px) {
   .navbar-wrapper .container {
    width: 1370px;
  }
}




/* Bootstrap reset */
.navbar-inverse {
    background: #fff;
    border: none;
    margin-bottom: 0px;
}

.nav li {background-color:transparent;}
.nav > li.active > a {background-color:transparent!important;}





/* Default Navbar Link States */
.navbar a {transition: all 0.5s ease 0s;}

.nav li span.edge {
	width:4px; height:24px; display:inline-block; margin-top:8px; display:inline; margin-right:25px; background:#FFF; float:left;
}


@media all and (max-width: 768px) {
.nav li{padding-top:10px; padding-bottom:10px;}	
	
}


ul.nav > li > a {
    color: #eee !important;
}

ul.nav > li:hover {
    background-color:#4CB6B3;
}

ul.nav > li > a:hover {
    color: #FFF !important;
}

ul.nav > li.active > a {
    color: #FFF !important;
}




/* Desktop Mode */
@media all and (min-width: 768px) {
.nav li span.edge {display:none;}

	ul.nav > li:hover {
		background-color:#0C2A62;
	}
	
	ul.nav > li > a:hover {
		color: #4CB6B3 !important;
	}
}



/* Bootstrap 768 SM*/
@media all and (min-width: 768px) {
	.navbar-right{font-size:12px;}
}

/* Bootstrap 992 MD*/
@media all and (min-width: 992px) {
	.navbar-right{font-size:14px;}	
}

/* Bootstrap 1200 LG*/
@media all and (min-width: 1200px) {
	.navbar-right{}
}









/* Toggle */
button.navbar-toggle {
    background: #0C2A62;
    border: none;
    border-radius: 0;
	height:88px;
	width:88px;
    margin: 0;
}

button.navbar-toggle:hover {
    background: #0C2A62 !important;
}
button.navbar-toggle:hover span.icon-bar {	
	background: #fff!important;
}

button.navbar-toggle span {
    margin-left: auto;
    margin-right: auto;
}

button.navbar-toggle span.icon-bar {	
	background:#FFF !important;
	width:34px; height:3px;
}










/* HEADER STYLES
* -------------------------------------------------- */
li.corner{height:52px; width:52px; display:block; overflow:hidden; margin-right:0px;}
li.corner span.diagonal {display:block; background: #fff; width: 52px; height: 52px; position: relative; float: left;}
li.corner span.diagonal:before {content: ''; position: absolute; top: 0; left: 0; border-top: 52px solid #0C2A62; border-left: 52px solid transparent; width: 0;}         


#lower-nav{text-align:center;}
#lower-nav ul{ margin:0; padding:0;}
#lower-nav ul li{padding:0;}



/* Mega Button */
.btn-mega{/*font-size:1.5em;*/ font-size:1em; margin-right:15px; margin-left:15px;}

.btn-mega{
	padding: 16px 0px 16px 0px;
	background:#fff;
	border-radius:0;
	border:none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	color:#0C2A62;
}

.btn-mega:hover{
	background:#fff;
	border:none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #0C2A62;
	color:#0C2A62;
}	
	
.btn-mega span{color:#4CB6B3}	

.active .btn-mega{border-bottom: 3px solid #4CB6B3;}

/* Quote Button */
.btn-quote{
	padding: 16px 32px 16px 32px;
	margin-right:0px;
	background: #4CB6B3;
	color:#fff;
}

.btn-quote:hover{
	background: #0C2A62;
	border-bottom: 3px solid #fff;
	color:#fff;
}	



/* Bootstrap 768 SM*/
@media all and (min-width: 768px) {
	#lower-nav {position:relative; float:right; clear:right; text-align:right;}
	.btn-mega{font-size:1em; margin-right:20px; margin-left:0px;}
	.btn-quote{margin-right:0px; padding: 16px 22px 16px 22px;}
}

/* Bootstrap 992 MD*/
@media all and (min-width: 992px) {
	
	.btn-mega{font-size:1.45em;}
	.btn-quote{margin-right:0px; padding: 16px 22px 16px 22px;}
	
}

/* Bootstrap 1200 LG*/
@media all and (min-width: 1200px) {
	li.corner{margin-right:15px;}
	.btn-mega{font-size:1.5em; margin-right:32px;}
	.btn-quote{margin-right:0px; padding: 16px 32px 16px 32px;}
}









/* HERO CAROUSEL STYLES
* -------------------------------------------------- */

/**** Hero - Bootstrap Overides ****/
.carousel .item{height:100%!important;}
.carousel-indicators {bottom: 0;}
.carousel-control.right,
.carousel-control.left {display:none;}


@media only screen and (max-width:768px){
	/* colour indicators on mobile */
	.carousel-indicators{margin-bottom:3px;}
	.carousel-indicators li{border-color: #fff;}
	.carousel-indicators .active{background-color: #fff;}	
}

@media (min-width:1200px){
.carousel-control.right,
.carousel-control.left {background-image: none; display:block;}
}



/**** Hero - Hero Carousel ****/
#hero-carousel{
		height:80%; /* Set Height of Carousel Here */
		display:block; background:#000;  width:100%;  padding:0px; margin:0px; position:relative;
}

@media screen and (orientation:portrait){
#hero-carousel{	
		height:70%; /* Set Height of Carousel Here */
}
}


#hero-carousel .carousel-inner{display:block; height:100%; width:100%; padding:0px; margin:0px;}



/**** Hero - Slide ****/

.slider-hero {
    position: relative;
    z-index: 0;
	overflow:hidden;
	height:100%;
}


/**** Hero - Backgrounds ****/

.slider-hero .hero-bg-wrapper{}
.slider-hero .hero-bg {
    width: 100%;
    height: 100%;
    margin: 0 auto;
	position: absolute;
	z-index: 0;
	
    background-size: cover;
	background-repeat: no-repeat;
	
}


/* Inline Backgrounds In HTML */




/* HERO SLOGAN FUNCTION
* -------------------------------------------------- */


.slogan{position:absolute; height:100%; width:100%;  z-index:2;}
.slogan .container{height:100%; padding:0;}



.slogan .section-content {
    position: relative;
    padding: 0;
    
	z-index: 4;
	display:table;  
	margin:0; 
	height:100%;
}



.slogan .section-content .outer{
	display:table-cell; 
	vertical-align:middle; 
	padding:0;
}


.slogan .section-content .inner{
	padding:0; 
	width:100%; 
}



.slogan h1{font-weight: 900; font-size: 1.8em; line-height: 1.1em; color:#fff; text-shadow: 2px 2px 10px #000; padding-left:30px;}

@media (min-width: 500px) {
.slogan h1{font-size: 2.2em; text-shadow: 2px 2px 15px #000;}
}

@media (min-width: 768px) { 
.slogan h1{font-size: 4em; text-shadow: 2px 2px 18px #000;}
}

@media (min-width:992px){
.slogan h1{font-size: 5em; text-shadow: 2px 2px 18px #000; padding-left:60px;}
}

@media (min-width:1200px){
.slogan h1{font-size: 6em; text-shadow: 2px 2px 22px #000; padding-left:100px;}
}

@media (min-width:1400px){
.slogan h1{font-size: 7.0em; padding-left:20px;}
}

@media (min-width:1600px){
.slogan h1{font-size: 7.3em; padding-left:0px;}
}



.slogan .mast{position:relative;}
.slogan .leader{display:inline; padding-right:10px;}
.slogan .tail{display:inline; width:100%; color:#6FF;}

.slogan .ml1, .slogan .ml2, .slogan .ml3, .slogan .ml4, .slogan .ml5{float:left; position:absolute; bottom:0;}








/* CAROUSEL FADE FUNCTION
* -------------------------------------------------- */
/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity;}
.carousel-fade .carousel-inner .active { opacity: 1;}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1;}
.carousel-fade .carousel-control { z-index: 2;}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}












/* SECTION STYLES
* -------------------------------------------------- */
section{padding-bottom:60px; padding-top:60px;}


section .seperator-bar{width:60%; height:6px; display:block; margin:auto; margin-top:50px; margin-bottom:70px; background:#4CB6B3;}


/* Image Placement */
section .insert-img-left{}
section .insert-img-right{}

section .insert-img-left img, 
section .insert-img-right img{margin-top:15px; margin-bottom:15px;}

@media (min-width:768px){
section .insert-img-left{padding-right:40px;}
section .insert-img-right{padding-left:40px;}	
}





/* Inline Icon Spacing (Font Awesome */
section a i.fa{margin-right:0.3em;}

/* H3 Extra Padding on Formal Pages */
section.formal h3{padding-top:20px;}

/* Sectioned Info-List */
section ul.list-information{font-size:1.1em; line-height:2em;}



/* Secion - Testimonial */
section.testimonial{color:#FFF;}
section.testimonial h2{font-weight:normal; font-style:italic;}


/* Secion - Careers */
section.careers{
	background:#000 url(../img/bkg-careers-2500x500-min.jpg) no-repeat; 
	background-position:center center;
	background-size:cover;
	color:#fff;
}

section.careers a:hover{
	color:#fff;
}


/* Secion - Services > Air Cargo */
section.services-air-cargo{}



/* OUTSIDE SECTION STYLES
* -------------------------------------------------- */

/* HR's Not Contaned */
hr.no-container{margin-left:15px; margin-right:15px;}

@media (min-width:768px){
hr.no-container{max-width:1170px; margin:auto;}
}







/* FOOTER STYLES
* -------------------------------------------------- */
footer{}
footer .inner-wrapper{/*background:#C36;*/ padding-top:60px;}
footer .inner-wrapper .container{padding-bottom:30px;}
footer .footer-logo{width:350px; height:210px; background:#ccc; margin-bottom:60px;}
footer .inner-border{width:100%; padding-bottom:10px;}

footer h4{font-size:1.2em}


footer .base-logos{text-align:left; padding-top:40px;}


footer .socials{margin-bottom:30px;}
footer .socials a{color:#4CB6B3!important;}
footer .socials a:hover{color:#0C2A62!important; text-decoration:none;}


footer .legalbar a{color:#fff!important;}
footer .legalbar a:hover{color:#4CB6B3!important; text-decoration:none;}

footer .legalbar{padding-top:30px; padding-bottom:30px; font-size:14px; background:#000; color:#FFF;}
footer .legalbar span.inline-spacer{margin-left:15px; margin-right:15px;}
footer .legalbar .forcenine{width:240px; height:auto; display:block; position:relative; float:left; margin-top:20px;} 


@media all and (min-width: 768px) {
footer .inner-border{border-right:7px solid #4CB6B3; width:90%; padding-bottom:0px;}
}


@media all and (min-width: 992px) {
footer .base-logos{text-align:right; padding-top:40px;}	
footer .legalbar .forcenine{width:240px; height:auto; float:right;} 
}