/*
 * jQuery FlexSlider v1.8
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

@media screen,projection {
/* Browser Resets */
.flex-container a,
.flexslider a,
.flexslider-container a:active,
.flexslider a:active,
.flexslider-container a:focus,
.flexslider a:focus  {outline:none;}
.slides,
.flex-control-nav,
.flex-direction-nav { /* margin:0; */ margin:0 auto; padding:0; list-style:none; }

/* Viewport Height Set for Lazy Load */

.flex-viewport {overflow:hidden; float:left; height:100%; width:100%; /* height:720px; */}


/* FlexSlider Necessary Styles
*********************************/
.flexslider-container {position:relative; overflow:hidden; /* margin:0 0 25px; */ margin:0; /* min-height:10em; */ background:#ccc; }
/* .flexslider-container {max-width:971px;} */
.flexslider-container { /* width:auto; max-width:116%; */ width:100%; margin:0; }


.flexslider { position:absolute; top:0; left:0; overflow:hidden; width:100%; /* height:382px; */ margin:0; padding:0;}
.flexslider .slides {width:100%; height:100%;}
.flexslider .slides > li {display:none; width:100%; margin:0; padding:0; -webkit-backface-visibility:hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { /* max-width:100%; */ width:100%; display:block; }
.flexslider .slides .lazy {width:auto;}
.flex-pauseplay span {text-transform:capitalize;}

.sustainability .flexslider-container {margin:0 0 2em; background:url(images/diagnol-black50.png) #273c53;}
.sustainability .flexslider {border:1px solid #333;}

/*
.flexslider > *,
.flexslider .slides > li {
  -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;
}
*/

/* Clearfix for the .slides element */
.slides:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
html[xmlns] .slides {display:block;}
* html .slides {height:1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display:block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position:relative; zoom:1; background-color:#000;}
.flexslider .slides {zoom:1;}
.flexslider .slides > li {position:relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom:1; position:relative;}

/* Caption style */
.flex-caption { overflow:hidden; width:100%; zoom:1; margin:0; padding:1em; /* right:3.125em; */ /* font-size:90%; */ color:#fff; border:1px solid #111;
  background:url(images/feature-stripes-bg.png);
  background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100% ), url(images/feature-stripes-bg.png);
  background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100% ), url(images/feature-stripes-bg.png);
  background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100% ), url(images/feature-stripes-bg.png);
  background:linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100% ), url(images/feature-stripes-bg.png);
  -webkit-box-shadow:0 1px 7px rgba(0,0,0,0.45), 0 1px rgba(255,255,255,0.1) inset, 0 0 0.5em rgba(0,0,0,0.25) inset;
     -moz-box-shadow:0 1px 7px rgba(0,0,0,0.45), 0 1px rgba(255,255,255,0.1) inset, 0 0 0.5em rgba(0,0,0,0.25) inset;
          box-shadow:0 1px 7px rgba(0,0,0,0.45), 0 1px rgba(255,255,255,0.1) inset, 0 0 0.5em rgba(0,0,0,0.25) inset;
}

.flex-caption a, .flex-caption a:link, .flex-caption a:visited { color:#fff; font-size:1.25em; }
.flex-caption a:hover { text-decoration:none; }
.flex-caption h2 { margin:0 0 0.5em; color:#dcb439; font-size:1.75em; text-shadow:0 1px 3px #000; }
.flex-caption h2 + p { margin:0 0 2em; }
.flex-caption .more { float:right;}

  /* Control Nav */
  .flex-control-nav {position:relative; z-index:10; width:100%; /* max-width:970px; */ max-width:100%; margin:0; padding:0; text-align:center; line-height:1em; border-top:1px solid #000; border-bottom:1px solid #000; background:url(images/diagnol-black50.png) #273c53;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5), 0 1px rgba(101,117,135,0.4) inset;
       -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5), 0 1px rgba(101,117,135,0.4) inset;
            box-shadow:0 1px 3px rgba(0,0,0,0.5), 0 1px rgba(101,117,135,0.4) inset;
  }

  .sustainability .flex-caption {padding:0.65em 0.85em 0.85em;}
  .sustainability .flex-control-nav {background:none; border:none;
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
  }
  .sustainability .flex-caption p {margin:0; text-shadow:0 1px #000; line-height:1.25em; font-size:0.95em}

/* Direction Nav */
.flex-direction-nav { display:none; }

  .flex-control-nav li {margin:0; padding:16px 10px; display:inline-block; zoom:1; *display:inline;}
  .flex-control-nav li a { display:block; width:0.75em; height:0.75em; display:block; cursor:pointer; text-indent:-999em; border-radius:50%;
    background:#fff;
    background:rgba(255,255,255,0.5);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
       -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
            box-shadow:0 1px 3px rgba(0,0,0,0.5);
  }
  .flex-control-nav li a:hover { background:rgba(255,255,255,0.75); }
  .flex-control-nav li a:active { border:1px solid #fff; background:rgba(255,255,255,0.5);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.9);
       -moz-box-shadow:0 1px 3px rgba(0,0,0,0.9);
            box-shadow:0 1px 3px rgba(0,0,0,0.9);
  }
  .flex-control-nav li a.flex-active { background:rgba(255,255,255,1); cursor:default; }
  .lt-ie9 .flex-control-nav li a.flex-active { background:#dcb439; }


  .sustainability .flex-control-nav li a { display:block; width:0.75em; height:0.75em; display:block; cursor:pointer; text-indent:-999em; border-radius:50%; border:1px solid #777;
    background:#fff;
    background:rgba(255,255,255,0.75);
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.85);
       -moz-box-shadow:0 1px 4px rgba(0,0,0,0.85);
            box-shadow:0 1px 4px rgba(0,0,0,0.85);
  }
  .sustainability .flex-control-nav li a:hover { background:rgba(255,255,255,0.75); }
  .sustainability .flex-control-nav li a:active { border:1px solid #999; background:rgba(255,255,255,0.5);
    -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.9);
       -moz-box-shadow:0 1px 5px rgba(0,0,0,0.9);
            box-shadow:0 1px 5px rgba(0,0,0,0.9);
  }
  .sustainability .flex-control-nav li a.flex-active { background:#ddb250; cursor:default; border:1px solid #77602b; }


}

/* 530px
   ----------------------------------------------------*/
@media only screen and (min-width:33.125em) {
/*   .flex-caption {position:absolute; right:5px; top:5px; width:50%;} */
  .flexslider {/* height:400px; */}
/* Direction Nav */
.flex-direction-nav { display:block; position:relative; z-index:11; height:auto; /* width:100%; */ width:60%; }
  .flex-direction-nav li { margin:0; }
  .flex-direction-nav li a {position:absolute; bottom:5px; width:42px; height:36px; margin:0; display:block; cursor:pointer; text-indent:-999em; overflow:hidden; background:url(images/bg_direction_nav.png) no-repeat;}
  .flex-direction-nav li .flex-prev {left:0; background-position:12px center;}
  .flex-direction-nav li .flex-next {right:4px; background-position:-75px center;}
  .flex-direction-nav li .disabled {opacity:.3; filter:alpha(opacity=30); cursor:default;}

  .sustainability .flex-direction-nav {display:none;}
}

/* 700px
   ----------------------------------------------------*/
@media only screen and (min-width:43.75em) {
  .flexslider {/* height:340px; */}
  .flex-caption { position:absolute; top:2em; width:30%; }
    .flex-caption.flex-left { left:1em; }
    .flex-caption.flex-right { right:1em; }
  .flex-caption h2 {}
  .sustainability .flexslider {border:1px solid #333;}
}

/* 960px
   ----------------------------------------------------*/

@media only screen and (min-width:60em) {
  .flexslider {/* height:454px;  */background-color:transparent;}
  .flex-caption { top:5em; width:35%; /* font-size:100%; */ }
  .sustainability .flex-caption {top: 2.5em;}
    .flex-caption.flex-left { left:3em; }
    .flex-caption.flex-right { right:3em; }
  .flex-caption h2 {font-size:2em;}
  .flex-control-nav { position:absolute; bottom:0; /* height:2.75em; margin:-2.75em 0 0; */ background:url(images/diagnol-black50.png) rgba(26,65,108,0.6); }
}



/* 1200px
   ----------------------------------------------------*/
@media only screen and (min-width:75em) {
  .flex-caption {width:30%;}
  .sustainability .flex-caption {width:35%;}
  .flex-caption h2 {font-size:2.5em;}
}