/*  
	Kairios  - Casset layout.css  
	
	01)  General
	02)  Header
	03)	 Home
	04)  Footer
	**)  Transition
*/

@font-face {
	font-family: 'HelveticaNeueLTCom-Cn';
	src: url('/fonts/HelveticaNeueLTCom-Cn.eot');
	src: url('/fonts/HelveticaNeueLTCom-Cn.woff') format('woff'), url('/fonts/HelveticaNeueLTCom-Cn.ttf') format('truetype'), url('/fonts/HelveticaNeueLTCom-Cn.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'HelveticaNeueLTStd35Thin';
	src: url('/fonts/helveticaneueltstd-th-webfont.eot');
	src: url('/fonts/helveticaneueltstd-th-webfont.woff') format('woff'), url('/fonts/helveticaneueltstd-th-webfont.ttf') format('truetype'), url('/fonts/helveticaneueltstd-th-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* 01 - GENERAL
================================================== */
#alert{
	position:absolute;
	width:100%;
	top:0;
	left:0;
}

#alert p{
	padding:0.8em 0;
	color:#FFF;
	font-size:24px;
	font-weight:bold;
	font-family: 'HelveticaNeueLTCom-Cn';
	text-align:center;
	margin:0;
}

.error{background:red;}
.succeed{background:green;}

.web{display:block;}
.ipad{display:none;}
.iphone{display:none;}

.btn{
	color:#FFF;
	font-size:1em;
	text-align:center;
	padding:0.3em 0;
	text-decoration:none;
	background:#940e16;
	background-image: linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -o-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -moz-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -webkit-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -ms-linear-gradient(bottom, #940e16  %, #b9121c 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #940e16),
		color-stop(1, #b9121c)
	);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.btn:hover{
	background:#b9121c;
	background-image: linear-gradient(bottom, #b9121c 0%, #940e16 100%);
	background-image: -o-linear-gradient(bottom, #b9121c 0%, #940e16 100%);
	background-image: -moz-linear-gradient(bottom, #b9121c 0%, #940e16 100%);
	background-image: -webkit-linear-gradient(bottom, #b9121c 0%, #940e16 100%);
	background-image: -ms-linear-gradient(bottom, #b9121c  %, #940e16 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #b9121c),
		color-stop(1, #940e16)
	);
}

section h1{
	font-family:'HelveticaNeueLTStd35Thin';
	font-size:2.5em;
	color:#666;
	font-weight:normal;
	padding:0.8em 0 0 0;
}

section h1 span{
	color:#D2232A;
}

section h2{
	font-family:'HelveticaNeueLTStd35Thin';
	font-size:1.5em;
	color:#666;
	font-weight:normal;
	padding:0.6em 0 0 0;
	margin:0px;
}

section em{
	font-family:'HelveticaNeueLTStd35Thin';
	font-size:1em;
	color:#666;
	font-weight:normal;
	padding:1em 0;
	font-style:normal;
}

/* 02 - HEADER
================================================== */
img{
	display:block;
	width:100%;
}

header .flexslider{
	width:100%;
	clear:both;
	overflow:hidden;
}


#header-bottom img{
	margin-top:1.5em;
}

#header-bottom p{
	color:#666666;
	margin-top:1.5em;
	margin-bottom:1.5em;
	line-height:1.2em;
	font-size:0.9em;
}

#header-page{
	margin-bottom:0.5em;
}

#header-page a{
	border-bottom:dashed 1px #cccccc;
}

nav {
	margin-bottom:0.5em;
}

nav ul{
	text-align:center;
	background:#d1c287;
	background-image: linear-gradient(bottom, #d1c287 0%, #baad77 100%);
	background-image: -o-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
	background-image: -moz-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
	background-image: -webkit-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
	background-image: -ms-linear-gradient(bottom, #d1c287  %, #baad77 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #d1c287),
		color-stop(1, #baad77)
	);
}

nav ul li{
	display:inline-block;
	color:#FFF;
	padding:0.3em 0 0.3em 0.3em;
}

nav ul li a{
	color:#FFF;
	text-decoration:none;
	padding:0 0.5em 0 0;
	border-right:solid 1px #FFF;
}

nav ul li.no-border a{
	border:none;
}

nav ul li.last{
	background:#940e16;
	background-image: linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -o-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -moz-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -webkit-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -ms-linear-gradient(bottom, #940e16  %, #b9121c 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #940e16),
		color-stop(1, #b9121c)
	);
}

nav ul li.last a{
	border:none;
}

nav ul li a:hover{
	color:#666;
}	


/* 03 - HOME
================================================== */
#home{

}

#home a.grid_8 span{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
}

#home a.grid_8 span:hover{
	background:rgba(0,0,0,0.3);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000);
}

/* 04 - PAGES
================================================== */
.content{
	margin-bottom:4em;
}

.content p,
.content strong,
.content ul li{
	color:#666;
	text-align:left;
}

.content .btn{
	margin-bottom:2em;
}

.content .grid_14 .grid_7{
	margin-bottom:0.6em;
}

#realisations .grid_22{
	margin-top:3em;
	margin-bottom:3em;
}

#realisations #legende > div{
	display:none;
}

#realisations #legende .clearfix{
	margin-bottom:0.5em;
}

#realisations #legende #legende1{
	display:block;
}

#realisations #carousel img {
    cursor: pointer;
    display: block;
    opacity: 0.5;
	filter:alpha(opacity=50);
}

#realisations #carousel img:hover {
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#realisations #carousel .slides > li{
	margin:0;
}

#realisations .grid_8 h3{
	margin-top:0.5em;
	line-height:1em;
}

#realisations .grid_8 a{
	color:#D2232A;
	text-decoration:none;
}

#mentions-legales a{
	color:#B9121C;
	text-decoration:none;
}

#mentions-legales a:hover{
	text-decoration:underline;
}

#mentions-legales #retour-home{
	text-align:center;
	display:block;
}

#formContact sup{
	color:#D2232A;
}

#formContact label{
	display:block;
	margin-bottom:3px;
	font-size:16px;
	font-weight:normal;
	font-family:helcetica, arial;
}

#formContact input{
	height:22px;
	border:solid 1px #ccc; 
}

#formContact textarea{
	height:100px;
	width:98%;
	border:solid 1px #ccc; 
}

#formContact button{
	float:right;
	margin-right:0.5em;
}

#formContact #loaderContact{
	float:right;
	width:16px;
	height:16px;
	margin:7px;
	display:none;
}

#acces-plan #map{
	margin:1em 0;
	height:20em;
	border:5px solid #FFF;
	box-shadow: 1px 1px 8px 1px #D2232A;
	-moz-box-shadow: 1px 1px 8px 1px #D2232A;
	-webkit-box-shadow: 1px 1px 8px 1px #D2232A;
}

#acces-plan #map_canvas{
	width:100%;
	height:100%;
	display:block;
}

#acces-plan a{
	color:#D2232A;
	text-decoration:none;
}

#acces-plan a:hover{
	text-decoration:underline;
}




/* 05 - FOOTER
================================================== */
footer{
	margin-top:0.5em;
	padding-top:2em;
	padding-bottom:2em;
	background:#940e16;
	background-image: linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -o-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -moz-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -webkit-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -ms-linear-gradient(bottom, #940e16  %, #b9121c 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #940e16),
		color-stop(1, #b9121c)
	);
}
footer ul{
	margin-bottom:1em;
}

footer li,
footer li a{
	color:#FFF;
	text-decoration:none;
	font-size:1em;
	line-height:1.2em;
	font-family:helvetica,arial;
}

footer li{
	margin-bottom:0.3em;
}

footer li.title{
	font-weight:bold;
}

footer li a:hover{
	text-decoration:underline;
}

footer p{
	color:#FFF;
	text-align:center;
}


footer p a{
	color:#FFF;
}

/* ** - EXTRANET
================================================== */
#extranet{
	min-height:400px;
}

#nav-extranet{
	display:none;
}

#cnx{
	width:100%;
	background:#940e16;
	background-image: linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -o-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -moz-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -webkit-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
	background-image: -ms-linear-gradient(bottom, #940e16  %, #b9121c 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #940e16),
		color-stop(1, #b9121c)
	);
	margin:4em 0;
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow:  0px 0px 10px #888;
	box-shadow:  0px 0px 10px #888;
}

#cnx h1{
	color:#FFF;
	text-align:center;
}

#cnx form{
	width:90%;
	margin:0 auto 2em;
	clear:both;
	overflow:hidden;
}

#cnx form p{
	clear:both;
	overflow:hidden;
}

#cnx form label{
	color:#FFF;
	font-size:15px;
	font-family: 'HelveticaNeueLTCom-Cn';
}

#cnx form button{
	float:right;
}
#cnx em{
	float:right;
	color:#999;
}

#mes-projets{
	margin-top:8em;
	margin-bottom:8em;
}

#mes-projets #return{
	text-align:center;
}

#mes-projets #return a{
	color:#D2232A;
	text-decoration:none;
}

#mes-projets #return  a:hover{
	text-decoration:underline;
}

#mes-projets h1{
	text-align:center;
	margin:0;
	padding:0;
}

#mes-projets h1 a{
	text-decoration:none;
    color: #808185;
}

#mes-projets h1 a:hover{
	text-decoration:underline;
}

#mes-projets-content > div{
	display:none;
}

#mes-projets-content > div > div{
	border-bottom:solid 1px #ddd;
	padding-bottom:2em;
}

#mes-projets-content h2{
	font-family:'HelveticaNeueLTStd35Thin';
	font-size:1.8em;
	color:#808185;
	font-weight:normal;
	padding:0.8em 0 0 0;
}

#mes-projets-content h2 span{
	color:#D2232A;
}

#mes-projets-content h3{
	font-family:'HelveticaNeueLTStd35Thin';
	font-size:1.4em;
	color:#808185;
	font-weight:normal;
	padding-top:0.8em;
}

#mes-projets-content h3 span{
	color:#D2232A;
}

#diaporama.flexslider > div{
	-moz-box-shadow: 0px 0px 10px #888;
	-webkit-box-shadow:  0px 0px 10px #888;
	box-shadow:  0px 0px 10px #888;
	border:10px solid #FFF;
}

#diaporama .flexslider > ol{
	margin-top:10px;
}

#avancement #fabrication{
	background: url(../img/border.gif) repeat-y 0 0;
}

#avancement .content-avancement{
	background: #eee; /* Old browsers */
	background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
	background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
	background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
	background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
	background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
	background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	border: 1px solid #aaa;
	height:44px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:3px;
}

#avancement .content-avancement > div{
	background:#008c00;
	background-image: linear-gradient(bottom, #008c00 0%, #296902 100%);
	background-image: -o-linear-gradient(bottom, #008c00 0%, #296902 100%);
	background-image: -moz-linear-gradient(bottom, #008c00 0%, #296902 100%);
	background-image: -webkit-linear-gradient(bottom, #008c00 0%, #296902 100%);
	background-image: -ms-linear-gradient(bottom, #008c00  %, #296902 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #008c00),
		color-stop(1, #296902)
	);
	height:44px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#avancement  h4{
	display:block;
	text-align:center;
	font-size:2em;
	color: #D2232A;
	font-weight:bold;
	clear:both;
	overflow:hidden;
	margin-top:1.5em;
}

#docutheque p{
	color:#666;
	font-size:0.8em;
	text-align:center;
}

#docutheque li a{
	text-decoration:none;
}

#docutheque li.grid_2{
	height:160px;
}

#docutheque li a:hover p{
	text-decoration:underline;
}

#mes-projets-content > div #mon-compte{
	border:none;
}

#mon-compte form p{
	clear:both;
	overflow:hidden;
}

#mon-compte form label{
	color:#888;
	font-size:18px;
	font-family: 'HelveticaNeueLTCom-Cn';
}

#mon-compte input{
	border:1px solid #ccc;
}

#mon-compte form button{
	width:100%;
	display:block;
}
#mon-compte em{
	float:right;
	color:#999;
}


/*** BACK TOP  ***/
#back-top {
    bottom:60px;
    right: 40px;
    position: fixed;
    z-index: 9999;
}
#back-top a {
    color: #ddd;
    display: block;
    font: 11px/100% Arial,Helvetica,sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 80px;
}
#back-top a:hover {
    color: #aaa;
}
#back-top span {
    background: url(../img/up-arrow.png) no-repeat scroll center center #ddd;
    display: block;
    height: 80px;
    margin-bottom: 7px;
    width: 80px;
}
#back-top a:hover span {
    background-color: #aaa;
}


/* ** - MEDIA QUERIES
================================================== */
@media screen and (max-width: 1279px) {
	/*** GENERALE -  HOME ***/
	nav ul li{	padding-left:0.1em;}
	nav ul li a{padding:0 0.4em 0 0;}
}

@media screen and (max-width: 959px) {	
	/*** GENERALE -  HOME ***/
	nav ul li{	padding-left:0.5em;}
	nav ul li a{padding:0 0.7em 0 0;}
	
	/*** PAGE  ***/
	#realisations .grid_8 h3{
		margin-top:2em;
	}
	#realisations #nav-slider #prev,
	#realisations #nav-slider #next {
		top:38%;
	}
}

@media screen and (max-width: 768px)  {
	/*** GENERALE -  HOME ***/
	nav ul li{	padding-left:0.2em;}
	nav ul li a{padding:0 0.4em 0 0;}
	#home .grid_8{
		width:32%;
		margin:0 0.666665%;
	}
	
	#header-bottom .grid_5{
		width:40%;
		margin:0 30%;
	}
	
	#header-bottom .grid_16{
		width:80%;
		margin:0 10%;
	}
	
	.container_24 .btn{
		width:140px;
		float:left;
		padding:0.3em 0;
	}
	
	.container_24 .flag{
		width:140px;
		float:right;
		padding:0 0 1em 0; 
	}
	
	/*** PAGE  ***/
	.content .grid_14 .grid_7{
		width:46%;
		margin-left: 2%;
		margin-right: 2%;
		padding:0px;
	}
	#realisations #content-thumbs{
		width:100%%;
		/*margin-left:21%;
		margin-right:21%;*/
	}
	#realisations .grid_8 h3{
		margin-top:1em;
	}
	#realisations #nav-slider #prev,
	#realisations #nav-slider #next {
		top:50%;
	}
	#realisations .grid_2{
		width:21%;
		margin-left:2%;
		margin-right:2%;
	}
	
	#mes-projets-content #avancement #fabrication{
		background:none;
	}
	#mon-compte input {
		height:26px;
	}
	#mon-compte form button{
		width:140px;
		float:right;
	}
	
	#docutheque li.grid_2{
		width:21%;
		margin-left: 2%;
		margin-right: 2%;
	}
	
	#footer-top a{
		margin-top:8px;
	}
}

@media screen and (max-width : 480px){
	/*** GENERALE -  HOME ***/
	.web{
		display:none;
	}
	.iphone{
		display:block;
	}
	#home .grid_8{
		width:94%;
		margin:0 3% 1em 3%;
	}
	nav ul{
		background:none;
	}
	
	#header-bottom .grid_5{
		width:60%;
		margin:0 20%;
	}
	
	#header-bottom .grid_16{
		width:90%;
		margin:0 0 0 5%;
	}
	
	nav ul li{
		width:96%;
		margin:0 0 0.2em 0; 
		background:#d1c287;
		background-image: linear-gradient(bottom, #d1c287 0%, #baad77 100%);
		background-image: -o-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
		background-image: -moz-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
		background-image: -webkit-linear-gradient(bottom, #d1c287 0%, #baad77 100%);
		background-image: -ms-linear-gradient(bottom, #d1c287  %, #baad77 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, #d1c287),
			color-stop(1, #baad77)
		);
		text-align:left;
	}
	
	nav ul li.last{
		background:#940e16;
		background-image: linear-gradient(bottom, #940e16 0%, #b9121c 100%);
		background-image: -o-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
		background-image: -moz-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
		background-image: -webkit-linear-gradient(bottom, #940e16 0%, #b9121c 100%);
		background-image: -ms-linear-gradient(bottom, #940e16  %, #b9121c 100%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0, #940e16),
			color-stop(1, #b9121c)
		);
	}
	
	nav ul li a{
		border:none;
		display:block;
	}
	
	footer li a{
		padding-left:1em;
		display:block;
	}
	
	footer #ul-2 li{
		padding-left:1em;
	}
	footer #ul-2 li.title,
	footer #ul-2 a{
		padding-left:0em;
	}

	
	/*** PAGE  ***/
	.content .grid_14 .grid_7,
	.content h1,
	.content p,
	.content strong,
	#realisations .grid_8,
	#realisations .grid_12{
		width:96%;
		margin-left: 2%;
		margin-right: 2%;
	}
	
	#realisations .grid_8 h3{
		margin-top:0;
	}
	
	#realisations #nav-slider #prev,
	#realisations #nav-slider #next {
		top:44%;
	}
}

@media screen and (max-width : 320px) { 

}

/* ** - TRANSITION
================================================== */
nav ul li a,
#home a.grid_8 span,
.btn,
#back-top a{
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

/*
 * jQuery FlexSlider v2.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;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.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 {margin: 0 0 20px; zoom: 1;position:relative;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-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 a {width: 30px; height: 30px; margin: -15px 0 0; display: block; background: url(../img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav 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,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); 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 .active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}