/*============================================================================
#FlexSlider
- jQuery FlexSlider v2.2.2 | http://www.woothemes.com/flexslider/
- Contributing author: Tyler Smith (@mbmufffin)
==============================================================================/
.flexslider {
margin: 0 0 $gutter1.5;
padding: 0;
}
.flexslider li { margin: 0; max-width: 100%; }
.flexslider .slides > li {
display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */
margin: 0;
position: relative;
@include backface();
.slide-hide {
visibility: hidden;
}
}
.flexslider .slides img {
max-width: 100%;
margin: 0 auto;
display: block;
}
.flexslider .slides .placeholder-noblocks {
height: auto;
width: 100%;
max-height: 100%;
@include at-query ($min, $large) {
height: 430px;
}
@include at-query ($max, $medium) {
height: 30vh;
}
}
.slides { @include clearfix; }
html[xmlns] .slides { display: block; }
- html .slides { height: 1%; }
/================ No JS Fallback ================/
.no-js .slides > li:first-child { display: block; }
.flexslider { position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }
/================ Direction Nav ================/
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-direction-nav { *height: 0; }
.flex-direction-nav a {
display: block;
width: 45px;
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
@include transition(all .3s ease);
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-direction-nav a {
text-indent: -9999px;
background: {
color: transparent;
repeat: no-repeat;
size: 20px auto;
}
&.flex-prev {
background-image: url(“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0xOC43LDBMMCwxOS43TDE4LjcsNDBjMCwwLDUuMi0xLDMuMS0zLjFTNS43LDE5LjcsNS43LDE5LjdzMTQtMTQuNSwxNi4xLTE2LjZTMTguNywwLDE4LjcsMHoiLz4NCjwvc3ZnPg0K”);
background-position: center left;
}
&.flex-next {
background-image: url(“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0wLjUsMy4xYzIuMSwyLjEsMTYuMSwxNi42LDE2LjEsMTYuNlMyLjYsMzQuOCwwLjUsMzYuOVMzLjYsNDAsMy42LDQwbDE4LjctMjAuM0wzLjYsMEMzLjYsMC0xLjYsMSwwLjUsMy4xDQoJeiIvPg0KPC9zdmc+DQo=”);
background-position: center right;
}
}
/================ Control Nav ================/
.flex-control-nav {
position: absolute;
bottom: -$gutter;
width: 100%;
text-align: center;
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0 4px;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
}
}
.flex-control-paging li a {
width: 12px;
height: 12px;
display: block;
background-color: $colorBorder;
cursor: pointer;
text-indent: -9999px;
border-radius: 20px;
border: 2px solid $colorBody;
@include transition(all 0.1s ease-in-out);
&:hover {
background-color: darken($colorBorder, 10%);
}
&.flex-active {
background-color: $colorBody;
border-color: $colorPrimary;
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;}
@include at-query ($max, $medium) {
.flex-direction-nav a {
opacity: 1;
width: 25px;
}
.flex-direction-nav a.flex-prev {
left: 0;
background-position: center right;
}
.flex-direction-nav a.flex-next {
right: 0;
background-position: center left;
}
}
@include at-query ($min, $large) {
.flex-direction-nav .flex-prev { left: 10px; }
.flex-direction-nav .flex-next { right: 10px; }
.flexslider:hover .flex-prev { opacity: 1; left: (-$gutter)+5; }
.flexslider:hover .flex-next { opacity: 1; right: (-$gutter)+5; }
}
@include at-query ($min, $maxWidthBp) {
.flex-direction-nav .flex-prev { left: 20px; }
.flex-direction-nav .flex-next { right: 20px; }
.flexslider:hover .flex-prev { opacity: 1; left: -45px; }
.flexslider:hover .flex-next { opacity: 1; right: -45px; }
}
/================ Custom Flexslider Styles ================/
.flexslider .slides {
margin: 0;
padding: 0;
list-style-type: none;
}
.slide-link {
display: block;
img {
display: block;
}
}
/============================================================================
#Magnific Popup
http://dimsemenov.com/plugins/magnific-popup/
==============================================================================/
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: ‘’;
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }