/*
 * 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 auto; padding:0; list-style:none; }

  /* Viewport Height Set for Lazy Load */

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


  /* FlexSlider Necessary Styles
  *********************************/
  .feature {position:relative; width:100%; margin:0 0 2em; background:#ccc; }

  .flexslider { position:absolute; top:0; left:0; width:100%; 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 {width:100%; display:block; }
  .flex-pauseplay span {text-transform:capitalize;}

  /* 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; overflow:hidden; background-color:#000;}
  .flexslider .slides {zoom:1;}
  .flexslider .slides > li {position:relative;}
  .flexslider .image-right {float:none; margin:0;}
  /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
  .flex-container {zoom:1; position:relative;}

  /* Caption style */
  .slides,
  .flex-caption {
    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 {overflow:hidden; width:100%; zoom:1; margin:0; padding:1em; color:#fff; border:1px solid #111;}

  .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;
    }

  /* 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; }
}

/* 530px
   ----------------------------------------------------*/
@media only screen and (min-width:33.125em) {
  .flexslider {}
  .flex-direction-nav { display:block; position:relative; z-index:11; height:auto; 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;}
}

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

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

@media only screen and (min-width:60em) {
  .flexslider {background-color:transparent;}
  .flex-caption { top:3em; width:35%;}
    .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; background:url(images/diagnol-black50.png) rgba(26,65,108,0.6); }
}



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