/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
#slidercontainer {width: 100%;overflow: hidden;max-height: 273px;}
@media screen and (max-width: 767px) {
  #slidercontainer {
    height:26vw;
    margin-bottom: 24px;
    overflow: visible;
  }
}
.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{margin: 0;padding: 0;}
.flexslider .slides>li{ transition: 1s;display: none;-webkit-backface-visibility: hidden;background:#888;}
.flexslider .slides>li img{ -webkit-transition: 1s;transition: 1s;-ms-filter: "alpha( opacity=20 )";
filter: alpha( opacity=20 );
opacity: 0.2;box-shadow:inset -60px 0 100px #fff;}
.flexslider .slides>li.flex-active-slide{background-image: none;}
.flexslider .slides>li.flex-active-slide img{-ms-filter: "alpha( opacity=100 )";
filter: alpha( opacity=100 );
;opacity:1;}
.flexslider .slides a img{ border:none;}
.flexslider .slides img{width: 100%; display: block; max-height: 273px !important;}
@media screen and (min-width: 768px) {
  .flexslider .slides img{
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .flexslider .slides img{height: auto;}
}
.flex-pauseplay span{text-transform: capitalize;}
.slides:after{content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
html[xmlns] .slides{display: block;}
*html .slides{height: 1%;}
.no-js .slides>li:first-child{display: block;}
.flexslider{margin: 0 0 0px;background: #000;position: relative;zoom: 1;}
.flex-viewport{max-height: 2000px;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;transition: all 1s ease;overflow:visible !important;}
.loading .flex-viewport{max-height: 300px;}
.flexslider .slides{zoom: 1;}
.carousel li{margin-right: 5px;}
.flex-direction-nav{*height: 0;}

.flex-direction-nav a{transition: .3s;width: 30px;height: 30px;margin: -20px 0 0;display: block;position: absolute;top: 50%;cursor: pointer;text-indent: -9999px;-webkit-transition: all .3s ease;}

.flex-direction-nav .flex-next::before{
  content: "";
  width: 30px;
  height: 30px;
  background: #fff;
  position: absolute;
  bottom: -5px;
  right: calc(50% - 1033px);
  border-radius: 50%;
  opacity: .7;
}
.flex-direction-nav .flex-next::after{
  content: "";
  width: 40px;
  height: 40px;
  background: url(../images/top/arr-right.svg);
  background-size: contain;
  position: absolute;
  bottom: -10px;
  right: calc(50% - 1040px);
}
.flex-direction-nav .flex-prev::before{
  content: "";
  width: 30px;
  height: 30px;
  background: #fff;
  position: absolute;
  bottom: -5px;
  right: calc(50% - -2px);
  border-radius: 50%;
  opacity: .7;
}
.flex-direction-nav .flex-prev::after{
  content: "";
  width: 40px;
  height: 40px;
  background: url(../images/top/arr-left.svg);
  background-size: contain;
  position: absolute;
  bottom: -10px;
  right: calc(50% - 2px);
}

@media screen and (max-width: 767px) {
  .mainslider-box {
    overflow: hidden;
  }
}

.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity: .5;}
.flex-direction-nav .flex-disabled{opacity: .3!important;filter: alpha(opacity=30);cursor: default;}
.flex-control-nav{width: 100%;position: absolute;bottom: 0px;text-align: center;padding-bottom: 10px;}
@media screen and (max-width: 767px) {
  .flex-control-nav
  {padding-bottom: 0;    bottom: -26px;}
}
.flex-control-nav li{margin: 0 6px;display: inline-block;zoom: 1;*display: inline;}
.flex-control-nav li a {
  width: 13px;
  height: 13px;
  background: #fff;
  display: block;
  cursor: pointer;
  text-indent: -9999px;
  border-radius: 50%;
  filter: drop-shadow(1px 1px 1px #999);
}
@media screen and (max-width: 767px) {
  .flex-control-nav li a {
    width: 10px;
    height: 10px;
  }
  .flex-direction-nav {
    display: none;
  }
}

.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.flex-active {background:#333; cursor: default;}

.flex-control-thumbs{margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li{width: 25%; float: left; margin: 0;}
.flex-control-thumbs img{width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover{opacity: 1;}
.flex-control-thumbs .flex-active{opacity: 1; cursor: default;}

@media screen and (max-width: 767px) {
  .flex-direction-nav .flex-prev{opacity: 1; left: 0;}
  .flex-direction-nav .flex-next{opacity: 1; right: 0;}
}

@media screen and (min-width: 768px) {
  #keyvisual {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 1032px;
    display: block;
  }
}