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

/*= Resets
=======================================================*/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}



/*= FlexSlider Necessary Styles
=======================================================*/
.flexslider { width: 100%; margin: 0 20px; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { display: block; padding: 0px; margin:0 auto; text-align:center; }
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; 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 { width: 91.7%; background: #fff url("/images/layout/loading.gif") no-repeat center center; padding: 10px 4.16%; margin: 0; border: 1px solid #ededed;  position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; zoom: 1; }

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

/* Direction Nav */
.flex-direction-nav { height: 0; }
.flex-direction-nav li a {width: 52px; height: 52px; margin: -17px 0 0; display: block; background: url("/images/layout/bg-slider-direction-nav.png"); position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
.flex-direction-nav li .next {background-position: -52px 0; right:0px;}
.flex-direction-nav li .prev {left: 0px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: -30px; left: -10px; text-align: center; }
.flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline; }
.flex-control-nav li:first-child { margin: 0; }
.flex-control-nav li a { width: 20px; height: 20px; display: block; background: url("/images/layout/bg-slider-controls.png") no-repeat; cursor: pointer; text-indent: -999em; }
.flex-control-nav li a:hover { background-position: 0 -20px; }
.flex-control-nav li a.active { background-position: 0 -42px; cursor: default; }


/*= FlexSlider Default Theme
=======================================================*/
.slides { width: 100%; }

.slides .left { width: 49%; float: left; }

.slides h2 { color: #8a8c8f; font-size: 2.5em; margin: 50px 0 20px; padding: 0 5% 0 5%; font-style: italic; font-weight: 300; font-variant: light italic; }

.slides p, .slides figure { color: #afb1b4; font-size: 1em; padding: 0 5% 0 5%; line-height: 1.375em; font-style: italic; font-weight: 300; font-variant: light italic; }

.slides figure { margin: 0 !important; }

/* 
   This is so that the linked and non-linked slider posts remain sized the exact same size.
   When left as inline-block there is extra space following the anchor that makes the border
   jump around and feels awful on mobile. (The following change.)
*/
.slides a { display: block !important; }

.slides .right { width: 49%; border: none; float: right; margin:0; }

.slides img { padding: 0; }

.slides .slider-button { margin: 30px 0 0 20px; }

.slides .slider-button a { width: auto; background: #98baf6; text-align: center; color: #ffffff; font-size: 1.125em; font-weight: 700; padding: 7px 25px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; border: none; cursor: pointer; }

.slides .slider-button a:hover { background: #377bf2; }

.slides .full-width { width: 100%; text-align: center; }

.slides .full-width h2 { display: none; }


/*= Mobile
=======================================================*/
@media only screen and (max-width: 767px) {

.flexslider { width: 96%; height: auto; min-height: 0px; margin: 5px 10px; padding: 5px; background: #fff none no-repeat center center;}

.flexslider .slides > li { background: none; }

.slides h2 { margin:0 0 7px 0; line-height:1.2em; font-size:1.4em; padding:0;}

.slides .slider-button { margin: 30px 20px 10px 20px; float: right; }

.slides .slider-button a { width: auto; background: #98baf6; text-align: center; color: #ffffff; font-size: 1.25em; }

.slides p { font-size: .85em; padding:0 5px; line-height:1em;}

.slides figure { padding: 0 5px; }

}