/*
 * 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
 */

/* Browser Resets */
.flex-container a,
.flex-container a:active,
.flex-container a:focus,
.flexslider a,
.flexslider a:active,
.flexslider a:focus { outline:none;}
.flex-control-nav,
.flex-direction-nav,
.slides { margin:0; padding:0; list-style:none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider { coloor:#FFF; line-height:1; margin:0; padding:0;}
.flexslider .slides li { display:none; -webkit-backface-visibility:hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides a { position:relative; display:block;}
.flexslider .slides p {
position:absolute; left:0; right:0; bottom:0;
display:none;
background:rgba(0,0,0,0.75);
font-size:16px; color:#FFF; text-align:center;
padding:0.5em 1em;
}
@media screen and ( max-width:768px ){ .flexslider .slides p { font-size:14px;}}
@media screen and ( max-width:480px ){ .flexslider .slides p { font-size:12px;}}
.flexslider .slides img { max-width:100%; display:block;}
.flexslider .slides .out p { display:block;}
.flexslider .slides .out img { filter:brightness(50%);}

.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 {
background:#FFF;
position:relative;
margin:0 30px 40px;
}
.flexslider .slides > li { position:relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container { position:relative;}

/* Caption style */
.flex-caption {/* IE rgba() hack */
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom:1;
}
.flex-caption {
position:absolute; left:0; bottom:0;
width:96%; padding:2%; margin:0;
background:rgba(0,0,0,0.5);
color:#FFF; text-shadow:0 -1px 0 rgba(0,0,0,0.5); font-size:14px; line-height:18px;
}

/* Direction Nav */
.flex-direction-nav a {
position:absolute; top:50%;
display:block; width:52px; height:52px; overflow:hidden;
background:url('../image/bg_direction_nav.png') no-repeat;
font-size:0;
transform:translateY(-50%);
cursor:pointer;
}
.flex-direction-nav .flex-next { background-position:-52px 0; right:-21px;}
.flex-direction-nav .flex-prev { left:-21px;}
.flex-direction-nav .flex-disabled { opacity:0.5; filter:alpha(opacity=50); cursor:default;}

/* Control Nav */
.flex-control-nav {
position:absolute; left:0; right:0; top:calc(100% + 4px);
text-align:center; padding:2px;
}
.flex-control-nav li { padding:2px; display:inline-block;}
.flex-control-nav a {
width:16px; height:16px; display:block;
background:#FFF;
box-shadow:inset 0 1px 3px rgba(0,17,17,0.5), 0 0 3px #899;
border-radius:50%;
font-size:0; text-indent:-999em;
cursor:pointer;
}
.flex-control-nav a:hover { background:#8CE;}
.flex-control-nav a.flex-active { background:linear-gradient(#3CF,#069); cursor:default;
}

@media screen and ( max-width:926px ) {
.flexslider { margin:0 0 60px;}
.flex-direction-nav a {
width:36px;
background:url('../image/mobile_bg_direction_nav.png') no-repeat;
}
.flex-direction-nav .flex-next { background-position:-36px 0; right:0;}
.flex-direction-nav .flex-prev { left:0;}
}
