/************************
******* Slideshow *******
**** Version: 0.0.1 *****
*************************/


/* Slideshow
================================================== */
/*! Modified from http://responsiveslides.com v1.54 by @viljamis */


/* Variables
========================= */

 $rslides_tabs: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1);
 $inset_shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);


/* Build
========================= */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;

  li {
    -webkit-backface-visibility: hidden;
    @include abs-pos($top: 0, $left: 0);
    display: none;
    width: 100%;

    &:first-child {
      position: relative;
      display: block;
      float: left;
    }

  }

  img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
  }

}

.rslides {
  margin: 0 auto em(40);
}

/* Main SlideShow Themes
------------------------------------- */
.rslides_container {
  margin-bottom: em(50);
  position: relative;
  float: left;
  width: 100%;
}

.centered-btns_nav {
  z-index: 3;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  @include abs-pos($top: 50%, $left: 0, $right: auto);
  @include linkTextOffscreen();
  opacity: .7;
  height: em(61);
  width: em(38);
  background: transparent url('#{$imagePath}/themes/themes.gif') no-repeat left top;
  margin-top: em(-45);

  &:active {
    opacity: 1.0;
  }

  &.next {
    @include abs-pos($left: auto, $right: 0);
    left: auto;
    background-position: right top;
    right: 0;
  }

}

.transparent-btns_nav {
  z-index: 3;
  @include abs-pos($top: 0, $left: 0, $right: auto);
  @include linkTextOffscreen();
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: block;
  background: #fff;
  /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity = 1);
  width: 48%;
  height: 91%;

  &.next {
    @include abs-pos($left: auto, $right: 0);
  }

}

.large-btns_nav {
  z-index: 3;
  @include abs-pos($top: 0, $left: 0, $bottom: 0, $right: auto);
  @include linkTextOffscreen();
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0.6;
  background: black url('#{$imagePath}/themes/themes.gif') no-repeat left 50%;
  width: em(38);

  &:active {
    opacity: 1.0;
  }

  &.next {
    @include abs-pos($left: auto, $right: 0);
    background-position: right 50%;
  }

}

.centered-btns_nav:focus, 
.transparent-btns_nav:focus, 
.large-btns_nav:focus {
  outline: none;
}

.centered-btns_tabs, 
.transparent-btns_tabs, 
.large-btns_tabs {
  margin-top: em(10);
  text-align: center;

  li {
    display: inline;
    float: none;
    _float: left;
    *float: left;
    margin-right: em(5);
  }

  a {
    @include linkTextOffscreen();
    @include border-radius(em(15));
    background: #ccc;
    background: rgba(0, 0, 0, .2);
    display: inline-block;
    _display: block;
    *display: block;
    @include vendorize(box-shadow, $inset_shadow);
    width: em(9);
    height: em(9);
  }
  
}

.centered-btns_here a, 
.transparent-btns_here a, 
.large-btns_here a {
  background: #222;
  background: rgba(0, 0, 0, .8);
}

/* Other Theme Options
---------------------------------- */

#slider2, 
#slider3 {
  @include vendorize(box-shadow, none);
  margin: 0 auto;
}

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(0, 0, 0, .25);
  @include vendorize(box-shadow, $rslides_tabs);
  font-size: em(18);
  list-style: none;
  margin: 0 auto em(50);
  max-width: em(540);
  padding: em(10) 0;
  text-align: center;
  width: 100%;

  li {
    display: inline;
    float: none;
    margin-right: em(1);

    &:first-child {
      margin-left: 0;
    }

  }

  a {
    width: auto;
    line-height: em(20);
    padding: em(9) em(20);
    height: auto;
    background: transparent;
    display: inline;
  }

  .rslides_here a {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: bold;
  }

}

a {
  color: #fff;
  text-decoration: none;
}

.footer {
  font-size: em(11);
}

/* Callback example */

.events {
  list-style: none;
}

.callbacks_container {
  margin-bottom: em(50);
  position: relative;
  float: left;
  width: 100%;
}

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;

  li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
  }

  img {
    display: block;
    position: relative;
    z-index: 1;
    height: auto;
    width: 100%;
    border: 0;
  }

  .caption {
    display: block;
    @include abs-pos($left:0, $right: 0, $bottom: 0);
    z-index: 2;
    font-size: em(20);
    text-shadow: none;
    color: #fff;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    padding: em(10) em(20);
    margin: 0;
    max-width: none;
  }

}

.callbacks_nav {
  @include abs-pos($top: 52%, $left: 0);
  @include linkTextOffscreen();
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0.7;
  z-index: 3;
  height: em(61);
  width: em(38);
  background: transparent url('#{$imagePath}/themes/themes.gif') no-repeat left top;
  margin-top: em(-45);

  &:active {
    opacity: 1.0;
  }

  &.next {
    @include abs-pos($left: auto, $right: 0);
    background-position: right top;
  }

  @media (max-width: em(600)) {

    top: 47%;
    @include abs-pos($top: 47%);
  }

}

#slider3-pager {

  a {
    display: inline-block;
    padding: 0;
  }

  img {
    float: left;
  }

  .rslides_here a {
    background: transparent;
    box-shadow: 0 0 0 2px #666;
  }

}



/*
 * jQuery FlexSlider v2.2.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
*********************************/
.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 Fonts
*********************************/
/* Font-face Icons */
@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;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
  margin: 0; padding: 0;

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

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

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

/* Clearfix for the .slides element */
.slides:after {
  content: "\0020"; 
  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 { 
  margin: 0 0 60px; 
  background: #fff; 
  border: 4px solid #fff; 
  position: relative;
  @include vendorize(border-radius, 4px);
  @include vendorize(box-shadow, 0 1px 4px rgba(0, 0, 0, .2));
  zoom: 1; 
}

.flex-viewport { 
  max-height: 2000px;
  @include vendorize(transition, all 1s ease);
}

.loading .flex-viewport { 
  max-height: 300px; 
}

.flexslider .slides { 
  zoom: 1; 
}

.carousel li { 
  margin-right: 5px; 
}

/* Direction Nav */
.flex-direction-nav {
  *height: 0;

  a {
    text-decoration:none; 
    display: block; 
    width: 40px; 
    height: 60px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; 
    z-index: 10; 
    overflow: hidden; 
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0, 0, 0, .8)!important; 
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .3); 
    @include vendorize(transition, all .3s ease);

    &:before {
      font-family: "icomoon"; 
      font-size: 40px; 
      display: inline-block; 
      content: '\e736';
    }

    .flex-next {

      &:before {
        content: '\e732';  
      }

    }

  }

  .flex-prev { 
    left: -50px;

    @media(max-width: 860px) {
      opacity: 1; 
      left: 10px;
    } 

  }

  .flex-next { 
    right: -50px; 
    text-align: right;

    @media(max-width: 860px) {
      opacity: 1; 
      right: 10px;
    } 

  }

  .flex-disabled { 
    opacity: 0!important; 
    filter:alpha(opacity=0); 
    cursor: default; 
  }

}

.flexslider:hover {

  .flex-prev { 
    opacity: .7; 
    left: 10px; 
  }
  
  .flex-next { 
    opacity: .7; 
    right: 10px; 
  }

} 


/* Pause/Play */
.flex-pauseplay a { 
  display: block; 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  bottom: 5px; 
  left: 10px; 
  opacity: .8; 
  z-index: 10; 
  overflow: hidden; 
  cursor: pointer; 
  color: #000;

  &:before {
    font-family: "icomoon"; 
    font-size: 20px; 
    display: inline-block; 
    content: '\e706';
  }
  
  &:hover {
    opacity: 1;
  }

  &.flex-play {

    &:before {
      content: '\e732';  
    }
  }

}

/* Control Nav */
.flex-control-nav {
  width: 100%; 
  position: absolute; 
  bottom: -40px; 
  text-align: center;

  li {
    margin: 0 6px; 
    display: inline-block; 
    zoom: 1; 
    *display: inline;
  }

}
.flex-control-paging li a {
  width: 11px; 
  height: 11px; 
  display: block; 
  background: #666; 
  background: rgba(0, 0, 0,.5); 
  cursor: pointer; 
  text-indent: -9999px;
  @include vendorize(border-radius, 20px);
  @include vendorize(box-shadow, inset 0 0 3px rgba(0, 0, 0, .3)); 

  &:hover {
    background: #333; 
    background: rgba(0, 0, 0, .7);
  }

  &.flex-active {
    background: #000; 
    background: rgba(0, 0, 0, .9); 
    cursor: default;
  }

}

.flex-control-thumbs {
  margin: 5px 0 0; 
  position: static; 
  overflow: hidden;
  
  li {
    width: 25%; 
    float: left; 
    margin: 0;
  }

  img {
    width: 100%; 
    display: block; 
    opacity: .7; 
    cursor: pointer;

    &:hover {
      opacity: 1;
    }

  }

  .flex-active {
    opacity: 1; 
    cursor: default;
  }

}
