/* =========================================================
   FLEXSLIDER.CSS (Optimized)
   Mobile First · Touch Friendly · Desktop Enhanced
   Based on jQuery FlexSlider v2.2.0
   ========================================================= */

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

/* ---------------------------------------------------------
   Icon Font (Optional)
   ⚠ Ensure FontAwesome is loaded, or replace with SVG
--------------------------------------------------------- */
@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
       url('fonts/flexslider-icon.woff') format('woff'),
       url('fonts/flexslider-icon.ttf') format('truetype'),
       url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------------------------------------------
   Core FlexSlider Styles (Mobile First)
--------------------------------------------------------- */
.flexslider {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}

.flexslider .slides img {
  width: 100%;
  height: auto;
  display: block;
}

.flex-pauseplay span {
  text-transform: capitalize;
}

/* Clearfix */
.slides:after {
  content: "";
  display: block;
  clear: both;
}

.no-js .slides > li:first-child {
  display: block;
}

/* ---------------------------------------------------------
   Viewport & Animation
--------------------------------------------------------- */
.flex-viewport {
  -webkit-transition: height 0.6s ease;
  transition: height 0.6s ease;
}

.loading .flex-viewport {
  min-height: 200px;
}

/* ---------------------------------------------------------
   Direction Navigation (Touch Friendly)
--------------------------------------------------------- */
.flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 48px;
  height: 48px;
  line-height: 48px;

  text-align: center;
  cursor: pointer;

  color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.3);

  opacity: 1; /* Mobile default: always visible */
}

.flex-direction-nav .flex-prev { left: 10px; }
.flex-direction-nav .flex-next { right: 10px; }

.flex-direction-nav a:before {
  font-family: 'FontAwesome';
  font-size: 28px;
  display: inline-block;
  content: '\f104';
}

.flex-direction-nav a.flex-next:before {
  content: '\f105';
}

.flex-direction-nav .flex-disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---------------------------------------------------------
   Pause / Play
--------------------------------------------------------- */
.flex-pauseplay a {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;

  width: 32px;
  height: 32px;
  line-height: 32px;

  opacity: 0.8;
  cursor: pointer;
  color: #000;
}

.flex-pauseplay a:before {
  font-family: 'FontAwesome';
  font-size: 18px;
  content: '\f004';
}

.flex-pauseplay a.flex-play:before {
  content: '\f003';
}

/* ---------------------------------------------------------
   Control Navigation (Dots)
--------------------------------------------------------- */
.flex-control-nav {
  width: 100%;
  text-align: center;
  margin-top: 12px;
}

.flex-control-nav li {
  display: inline-block;
  margin: 0 6px;
}

.flex-control-paging li a {
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  text-indent: -9999px;
}

.flex-control-paging li a:hover {
  background: rgba(0,0,0,0.6);
}

.flex-control-paging li a.flex-active {
  background: rgba(0,0,0,0.85);
}

/* ---------------------------------------------------------
   Thumbnails
--------------------------------------------------------- */
.flex-control-thumbs {
  margin-top: 8px;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: 0.6;
  cursor: pointer;
}

.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active {
  opacity: 1;
}

/* ---------------------------------------------------------
   Desktop Enhancements
--------------------------------------------------------- */
@media (min-width: 768px) {
  .flex-direction-nav a {
    opacity: 0;
    background: transparent;
  }

  .flexslider:hover .flex-direction-nav a {
    opacity: 1;
  }

  .flex-direction-nav .flex-prev { left: 40px; }
  .flex-direction-nav .flex-next { right: 40px; }
}