@charset "UTF-8";
//
// OE media + video slider
//

/*------------------------------------*\

    Only for demostration purposes
    For this example we used FlexSlider, feel free to implement your own/other slider. It's the result that counts
  
\*------------------------------------*/

/* standard declaration FlexSlider */
body{background-image:none;}
		
/*------------------------------------*\

    Only for demostration purposes
    For this example we used FlexSlider, feel free to implement your own/other slider. It's the result that counts
  
\*------------------------------------*/

/* standard declaration FlexSlider */
.flexslider a:active,
.flanders-slider a:focus  {outline: none;}
.slides{margin: 0; padding: 0; list-style: none;}
.flanders-slider {margin: 0; padding: 0;}
.flanders-slider .slides > li {
  display: none; -webkit-backface-visibility: hidden;
  position: relative;height:386px;background-color:#39b9be;
}
.flanders-slider .slides img {display: block;}

.flanders-slider{width:556px;max-width:100%;position: relative;}
.flanders-slider ul{padding:0;}

/* controls */
ul.flex-direction-nav{position: absolute;bottom:1.5em;right:1.2em;list-style: none;}
ul.flex-direction-nav li{float:left;} 
ul.flex-direction-nav li a{text-decoration: none;} 
ul.flex-direction-nav li a i{
  display:block;line-height:38px;width:40px;
  text-align:center;font-size:1.2em;
  padding-bottom:2px;color:#ffffff;
  -moz-transition: all 0.2s ease 0s;
  -webkit-transition: all 0.2s ease 0s;
  -o-transition: all 0.2s ease 0s;
  transition: all 0.2s ease 0s;
} 

ul.flex-direction-nav li a.flex-prev i{background-color:#379da1;} 
ul.flex-direction-nav li a.flex-next i{background-color:#35878a;} 
ul.flex-direction-nav li a:hover i{background-color:#ffffff;color:#35878a;} 

/* inner content */
.flanders-slider li footer{
  position: absolute;bottom:0;padding:1.5em 10em 1.5em 1.2em;
  background-color:rgba(57,185,190,0.76);
  width:100%;box-sizing: border-box;color:#ffffff;
}
.flanders-slider li footer h4{
  color:#ffffff;font-family: 'Flanders Art Sans Bold', sans-serif;
  display:inline;font-size:1.2em;
}
.flanders-slider li h2{
  color:#ffffff;font-family: 'Flanders Art Sans Light', sans-serif;
  font-size:3em;padding:0.7em  0.4em;font-weight:200;
}

/* counter */
.slider-counter{
  position: absolute;bottom:2em;right:7.2em;z-index:20;font-size:1em;
  color:#ffffff;font-family: 'Flanders Art Sans Bold', sans-serif;  
}		









/* video */


.flanders-video {width:556px;height:auto;max-width:100%;position: relative;overflow:hidden;}
.flanders-video > img {display:block;}
.flanders-video footer{
  position: absolute;bottom:0;left:0;padding:1.5em 10em 1.5em 1.2em;
  background-color:#C03;
  width:100%;box-sizing: border-box;z-index:10000;
}
.flanders-video footer h4 {color:#ffffff;font-family: 'Flanders Art Sans Bold', sans-serif;font-size:1.2em;}
.flanders-video .play-btn{
  position: absolute;bottom:10px;right:10px;cursor:pointer;
  color:#ffffff;border:2px solid rgba(255,255,255,0.6);margin:0 0.4em 0.6em 0;
  padding-left:4px;width:44px;height:48px;text-align: center;
  border-radius: 50%;transition: all 0.2s ease 0s;
}

.flanders-video .play-btn:hover{border:2px solid rgba(255,255,255,1);}
.flanders-video .play-btn i{line-height:48px;}
.flanders-video iframe{position: absolute;width:100% !important;height:100% !important;left:0;top:0;}




