/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; } 

/* FlexSlider Necessary Styles */ 
.flexslider { width: 100%; /*max-height: 250px;  This style varies */ padding: 0; margin: 0; }
.flexslider .slides > li { display: none; /* Hide the slides before the JS is loaded. Avoids image jumping */ }
.flexslider .slides img { max-width: 100%; display: block; margin: 0 auto; }
.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 { zoom: 1; position: relative; /*background: #fff;*/ /*border: 2px solid #fff; border-radius: 12px;*/ }

.flexslider .slides { zoom: 1; /* Preloading image  while slideshow is not loaded */ background: url(../images/loading_project.gif) no-repeat 50% 50%; /*min-height: 230px;*/ }

.flexslider .slides > li { position: relative; }

/* For Smartphone devices use the small thumb that appears on home */

/* Have to try first the Adaptive technique to deliver different images sizes with javascript solution, if doesn't work use this below.

.unique-image-smartphone{
	
	width: 90%;
	
	margin: 1.6em auto 0 auto;
	padding: 0.5em;
	
	background: url(../images/background_bordatop.png) repeat-x top,
					url(../images/background_bordaright.png) repeat-y right,
					url(../images/background_bordabot.png) repeat-x bottom,
					url(../images/background_bordaleft.png) repeat-y left,
					url(../images/background.gif);
}
*/

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */

.flex-container{ zoom: 1; position: relative; width: 100%; height: auto; margin: 0; padding: 0; }

/* RESPONSIVENESS */

@media screen and (max-device-width: 1024px),
screen and (max-width: 1024px) {

	.flex-container { margin: 0 auto 4em auto; }
	
}

@media screen and (min-width: 1025px){

	.flex-container { margin: 0 auto 4em auto; /* Project header is fixed on top */}
	
}

/* Caption style */
/* IE rgba() hack */

/*
.flex-caption {
	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 {
	width: 96%;
	padding: 2%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.3);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	font-size: 14px;
	line-height: 18px;
}
*/

/* Direction Nav */

.flex-direction-nav li a {
	margin: 0;
	position: absolute;
    margin-top: -2em;
	top: 50%;
	cursor: pointer;
	text-indent: -9999px;
    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.flex-direction-nav li a.next { right: 2%; }
.flex-direction-nav li a.prev { left: 2%; }
.flex-direction-nav li a.next:hover { right: 1%; }
.flex-direction-nav li a.prev:hover { left: 1%; }

.flex-direction-nav li .disabled { opacity: .5; filter: alpha(opacity=30); cursor: default; }

/* Custom */

@media screen and (max-device-width: 1080px),
screen and (max-width: 1080px) {

	.flex-direction-nav li a.prev,
    .flex-direction-nav li a.next{

        width: 92px;
        height: 92px;
        background-color: #000;
        border-radius: 50%;

        background-repeat: no-repeat;
        background-size: 60% auto;
        background-position: 50% 50%; 
    
    }

}

@media screen and (min-width: 1081px){

	.flex-direction-nav li a.prev,
    .flex-direction-nav li a.next{

        width: 48px;
        height: 48px;
        background-color: #000;
        border-radius: 50%;

        background-repeat: no-repeat;
        background-size: 60% auto;
        background-position: 50% 50%; 

    }

}

.flex-direction-nav li a.prev{ background-image: url(images/icons/arrow-left.svg); }
.flex-direction-nav li a.next{ background-image: url(images/icons/arrow-right.svg); }


/* Control Nav */

.flex-control-nav { width: 100%; position: absolute; z-index: 219; text-align: center; }

.flex-control-nav-thumbs{ width: 100%; position: absolute; z-index: 971; bottom: 4em; text-align: center; display: none; }

.flex-control-nav-thumbs li,
.flex-control-nav li { margin: 0; display: inline-block; zoom: 1; *display: inline; }

.flex-control-nav-thumbs li a,
.flex-control-nav li a { }

/* Custom */

@media screen and (max-device-width: 1080px),
screen and (max-width: 1080px) {
    
    .flex-control-nav { bottom: -4em; }
    
    .flex-control-nav-thumbs li a,
    .flex-control-nav li a,
    .flex-control-nav-thumbs li a.active,
    .flex-control-nav li a.active,
    .flex-control-nav-thumbs li a:hover,
    .flex-control-nav li a:hover{

        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #000;

        margin: 0 0.6em;

        text-indent: -9999px;
        cursor: pointer;
        display: block;

        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 50% 50%; 

    }
    
    .flex-control-nav-thumbs li a,
    .flex-control-nav li a{ border: 4px solid #fff; }

}

@media screen and (min-width: 1081px){
    
    .flex-control-nav { bottom: -3em; }
    
    .flex-control-nav-thumbs li a,
    .flex-control-nav li a,
    .flex-control-nav-thumbs li a.active,
    .flex-control-nav li a.active,
    .flex-control-nav-thumbs li a:hover,
    .flex-control-nav li a:hover{

        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: #000;

        margin: 0 0.2em;

        text-indent: -9999px;
        cursor: pointer;
        display: block;

        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 50% 50%; 

    }
    
    .flex-control-nav-thumbs li a,
    .flex-control-nav li a{ border: 2px solid #fff; }
    
}
    
.flex-control-nav-thumbs li a.active,
.flex-control-nav li a.active{ background-image: url(images/icons/slide-nav-active.svg); border: 2px solid #000; }
    
.flex-control-nav-thumbs li a:hover,
.flex-control-nav li a:hover{ background-image: url(images/icons/slide-nav-active.svg); border: 2px solid #000; }