/* FRONTEND CSS
*********************************************/

html {
	/* scrollbar fix (prevent ugly left pull for lower content sites) */
	overflow-y: scroll;
}

body {
	font-family: 'Fjalla One', sans-serif;
	font-size:18px;
	color:#283b7e;
	font-weight:400;
	font-style:normal;
	background-image:url(../images/full-bg.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-attachment: fixed;
}
a{
	text-decoration:none;
	outline:none;
}
a:focus,a:active{
	outline:none;
}
img.map, map area{
    outline: none;
}
h3{
	font-size:18px;
}
.wrapper{
	width:1200px;
	margin:50px auto 0px auto;
	position:relative;

}
#main{
	width:977px;
	display:table;
	z-index:2;
	position:relative;
}
#header{
	height:215px;
	background-image:url(../images/bg-header.png);
	background-repeat:no-repeat;
	position:relative;
	z-index:2;
}

#content{
	background:rgb(251,251,251);
	background:rgba(251,251,251,0.95);
	box-shadow:0px 2px 10px #535353;
	z-index:1;
	position:relative;
	padding-top:15px;
	padding-bottom:30px;
}
#logo{
	width: 223px;
	height: 178px;
	margin: 30px 5px 0 5px;
	position:relative;
}
#logo a{display:block;width:223px;height:178px;}
.mask a::after{
	width:223px;height:178px;
    content: '';
    position: absolute;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background: radial-gradient(
                     circle farthest-side at 0 0,
                     rgba(255,255,255,0) 90%,
                     rgba(255,255,255,.4) 98%,
                     rgba(255,255,255,0) 100%
                 ) no-repeat;
    background-position: -200px 0;
	-webkit-mask: url('../images/logo-bild-blanc.png');
    mask: url('#logo-mask');
}
.mask a:hover::after,
.mask a:focus::after{
    transition: background-position 1.5s;
    background-position: 100px 0;
}
#baseline{
	width:728px;
	height:66px;
	background-image:url(../images/bg-baseline.jpg);
	background-repeat:no-repeat;
	text-align:center;
	margin-top:94px;
}
#baseline h1{
	font-size:25px;
	text-transform:uppercase;
	text-align:center;
 	/*-webkit-filter: url('#inset-shadow');
            filter: url('#inset-shadow');*/
}
#onglet{
	position:absolute;
	z-index:0;
	width:41px;
	height:88px;
	right:0px;
	top:82px;
}
.left-shadow{
	width:22px;
	height:597px;
	position:absolute;
	z-index:1;
	left:161px;
	top:8px;
	background:url(../images/content-left-shadow.png) no-repeat;
}
.right-shadow{
	width:20px;
	height:487px;
	position:absolute;
	z-index:1;
	right:20px;
	top:24px;
	background:url(../images/content-right-shadow.png) no-repeat;
}
#navigation{
	width:183px;
	margin-top:205px;
}
#navigation ul.nav{
	list-style-type:none;
	padding:0;
	margin:0;
}
#navigation ul.nav li{
	list-style-type:none;
	height:82px;
	width:183px;
	padding-bottom:8px;
	margin-bottom:7px;
	background:url(../images/shadow-menu.png) no-repeat center bottom;
	overflow:hidden;
	position: relative;
}
#navigation ul.nav li a{
	display: block;
	width: 165px;
	height: 57px;
	background: rgb(1,86,126);
	background: rgba(1,86,126,0.9);
	color: #ffffff;
	text-align: right;
	padding-right: 18px;
	padding-top: 25px;
	font-size: 25px;
	box-shadow:-2px 2px 5px #535353;
}
#navigation ul.nav li.current a{
	background:rgb(185,213,63);
	background:rgba(185,213,63,0.9);
}

#navigation ul.nav li a span{
	position:relative;
	z-index:2;
}
#navigation ul.nav li a::after{
	content:"";
	width:183px;
	height:82px;
	position:absolute;
	left:183px;
	top:0px;
	background:rgb(185,213,63);
	z-index:1;
	transition: left 0.3s ease-in-out;
}
#navigation ul.nav li a:hover::after{
	left:0px;
}
#navigation ul.nav li.item-101 a{
	padding:0;
	width:183px;
	height:82px;
}
#navigation ul.nav li.item-101 a span{
	text-indent:1000px;
	display:block;
	background-image:url(../images/btn-home.png);
	background-repeat:no-repeat;
	background-position:center center;
	height:83px;
	margin-left:8px;

}
body.accueil #navigation li.item-101{visibility:hidden;}
#footer{
	position:relative;
	z-index:1;
	color:#b8d43f;
	height:28px;
	border-top:12px solid #014363;
	font-size:18px;
	text-align:center;
	padding-bottom:5px;
	width:323px;
	background-color:#01567f;
	margin-bottom:20px;
	margin-right:60px;
	padding-top:10px;
	font-family:Arial;
	background-image:url(../images/citron-givre.png);
	background-repeat:no-repeat;
	background-position:24px center;
}
#footer::after{
	content:"";
	width:323px;
	height:5px;
	background:url(../images/shadow-footer.png) no-repeat 0 bottom;
	position:absolute;
	top:43px;
	left:0px;
}
#footer a{
	color:#ffffff;
	transition:color 0.3s ease-in-out;
}
#footer a:hover{
	color:#b8d43f;
}
body.equipe .item-page, body.contact-acces .item-page{
	width:793px;
	margin:0 auto;
	position:relative;
	display:table;
}
body.savoir-faire .item-page, body.mentions-legales .item-page{
	width:918px;
	padding:0 10px 10px 10px;
	margin:0 auto;
	position:relative;
	display:table;
	border-bottom:2px solid #ffffff;
}
body.references .item-page{width:900px;margin:0 auto;}
.slider-wrapper{width:900px;margin: 0 auto;}
.hide-content{
	height:394px;
	overflow:hidden;
	position:relative;
	display:block;
	width:938px;
	margin:0 auto;
	box-shadow: inset 0px 5px 14px 0px #000000;
	background-color:#ffffff;
	background-image:url(../images/bild-filigrane.jpg);
	background-repeat:no-repeat;
	background-position:center 38px;
}
h2{
	font-size:23px;
	text-align:left;
	display:block;
	margin:15px 0 10px 0;
	padding:4px;
	background-color:#1f79a6;
	border-top:1px solid #165575;
	border-left:1px solid #165575;
	color:#b9d53f;
	line-height:35px;
	font-weight:normal;
}
h2 strong{
	color:#ffffff;
	font-weight:normal;
}
.item-page ul{
	list-style-type:none;
	font-family: Arial;
	color:#003665;
}
.item-page ul li{
	list-style-type:none;
	background:url(../images/square-bullet.jpg) no-repeat 0 5px;
	padding-left:18px;
	margin-bottom:10px;
	text-align:left;
}
.item-page ul.disc li, .laureat ul.disc li{
	background:url(../images/disc-bullet.jpg) no-repeat 0 5px;
}
.item-page ul ul{
	padding-top:10px;
}
span.bold{
	font-weight:bold;
}
a#read_more{
	float:right;
	margin-top:20px;
	margin-right:15px;
}
.eq{
	width:158px;
	text-align:center;
	font-size:14px;
}
.eq + .eq{
	width:120px;
}

.eq span{
	font-size:23px;
}
.item-page p{
	font-family:Arial;
}
.personne{
	width:793px;
	height:480px;
	position:absolute;
	display:none;
	top:15px;
	left:0;
}



.fonction{
	position:absolute;
	bottom:10px;
	left:20px;
	color:#ffffff;
	text-transform:uppercase;
	font-size:24px;
}
.ggmap{
	margin-bottom:30px;
	box-shadow:0px 2px 10px #535353;
}
.button{
	border:0;
	width:160px;
	padding-top:8px;
	padding-right:24px;
	height:39px;
	display:block;
	color:#ffffff;
	text-transform:uppercase;
	font-size:22px;
	text-align:center;
	background-color:transparent;
	background-image:url(../images/button.png);
	background-repeat:no-repeat;
	background-position:0px 0;
	box-sizing:inherit;
	overflow:hidden;
	position:relative;
	transition : background-image 0.3s ease-in-out;
}
.button:active{
	outline:none;
}
.button:hover{
	border:0;
	background-image:url(../images/button-over.png);
}
.blog{
	width:100%;
	height:500px;
	margin:0 auto;
	display:table;
}
/* slider accueil
*********************************************/
.desoslide-wrapper {
  position: relative;
  text-align: center;
}
.desoslide-controls-wrapper {
  position: relative;
  float: right;
  height: 36px;
  line-height: 41px;
  bottom: 8px;
  z-index: 100;
  opacity: 1;
}
.desoslide-controls-wrapper a:hover {
  opacity: 0.7;
}
.desoslide-overlay {
  height: 28px;
  position: absolute;
  z-index: 10;
  text-align: left;
  color: white;
  font-weight: bold;
  padding: 0px;
  opacity: 0;
}
.desoslide-overlay > a {
  position: relative;
  top: -1px;
  color: white;
}
.desoslide-overlay .desoslide-caption-title {
  display: inline-block;
  position: relative;
  top: -1px;
  max-width: 90%;
  max-height: 24px;
  font-size: 14px;
  overflow: hidden;
}
.desoslide-controls {
  display: inline-block;

}

.desoslide-controls.prev,#mcts1 .navPrev, .bx-wrapper .bx-prev {
  width: 21px;
  height: 24px;
  background: url('../images/left-arrow.png') no-repeat 0 0;
  position: absolute;
  top: 215px;
  left: 8px;
  z-index: 2;
  display:block;
  cursor:pointer;
  transition:background 0.3s ease-in-out;
  text-indent:-9000px;
}
#mcts1 .navPrev, .bx-wrapper .bx-prev{
	left:-32px;
}
.desoslide-controls.prev:hover,#mcts1 .navPrev:hover, .bx-wrapper .bx-prev:hover{
	background:url(../images/left-arrow-over.png) no-repeat 0 0;
}
.desoslide-controls.next,#mcts1 .navNext, .bx-wrapper .bx-next {
  width: 21px;
  height: 24px;
  background: url('../images/right-arrow.png') no-repeat 0 0;
  position:absolute;
  top:215px;
  right:8px;
  z-index:2;
  display:block;
  cursor:pointer;
  text-indent:-9000px;
  transition:background 0.3s ease-in-out;
}
#mcts1 .navNext, .bx-wrapper .bx-next{
	right:-32px;
}
.desoslide-controls.next:hover, #mcts1 .navNext:hover, .bx-wrapper .bx-next:hover{
	background:url(../images/right-arrow-over.png) no-repeat 0 0;
}
.thumbs{
	display:none;
}
#slider{
	width:900px;
	height:445px;
	margin:0 auto;
	position:relative;
	background:url(../images/bg-slider.jpg) no-repeat center top;
	overflow:hidden;
	border-bottom:2px solid #ffffff;
}
#slider::after{
	content:"";
	width:900px;
	height:445px;
	position:absolute;
	top:0;
	left:0;
	box-shadow: inset 0px 5px 14px 0px #000000;
}
.bg-gray{
	background:#1f79a6;
	margin:10px 0;
	color:#ffffff;
	padding-bottom:10px;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
}
.bg-gray:first-letter {
	font-size:34px;
}
.bg-gray h2{
	border:0;
	padding:20px 20px 0 20px;
}
.bg-gray p{
	padding:20px 20px 0 20px;
	margin: 0;
}
hr{
	border: 0;
	height: 3px;
	background-color: #01567f;
	border-top:1px solid #000;
	border-right : 1px solid #000;
}
.laureat{
	padding:8px 8px 0 8px;
	background : rgba(255,255,255,0.9);
	font-weight:normal;
	border-top:1px solid #535353;
	border-right:1px solid #535353;
	margin-top:5px;
}
.laureat ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
.laureat ul li{
	color:#535353;
	padding-left:16px;
	padding-top:0;
	padding-bottom:8px;
}
span.ref{
	color:#535353;
	font-size:20px;
}
span.green{
	color:#ff6c00;
}
span.blue{
	color : #283b7e;
}

/* slider references
**********************************************/
#mcts1
{
    width:900px;
    height:480px;
    margin: 0 auto;
    padding:0;
    background: url(../images/loading.gif) no-repeat 50% 50%;
    box-shadow:0px 2px 10px #535353;
    /* Do not alter the below settings */
    /*white-space:nowrap;*/
    position:relative;
    font-size:0px;
}
/*#mcts1>* {display:none;}*/

/*-------- div.item is each thumbnail's wrapper created by the javascript ------*/
#mcts1 div.item
{
    padding:0;
    margin-right:0; /* this specifies the distance between each thumbnail */
    border:none;
    text-align:left;
    position:relative;
}

/*-------- style of user defined class ---------*/
#mcts1 div.slide
{

    padding:0;
    width:900px;
    margin:0 auto;
    height:480px;
    overflow:hidden;
    background:#ffffff;
}

#mcts1 .slide .slide-text
{
    position:absolute;
    padding:10px;
    top:0;
    right:0;
    width:300px;
    height:460px;
    background:rgba(255,255,255,0.75);
    font-size:15px;
    overflow:hidden;
}
#mcts1 .slide img
{
    border:none;
    width:100%;
}


#mcts1 .navPause, #mcts1 .navPlay {display:none;}

.navPrev, .navPlay, .navPause, .navNext
{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}


/*---------built-in navigation bullets--------*/

/* Note: the navBullets won't be available when the "scrollByEachThumb" option was set to false in the Javascript.*/
#mcts1 .navBullets
{
    /*display:none;*/ /*set it display:none when you don't need it*/
	display:table;
	cursor:pointer;
	/*Specify its position that is relative to the div#mcts1 */
	position:absolute;
	bottom:-36px;
	margin:0 auto;
	width:auto;height:20px;
	z-index:5;
}
/* Below defines the style of each bullet*/
#mcts1 .navBullets a
{
    display:inline-block;
    width:13px; height:13px;
    background:transparent url(../images/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:6px;/*margin-right determines the distance between each bullets*/
}
#mcts1 .navBullets a:hover {background-position:0 -13px;}
#mcts1 .navBullets .active {background-position:0 -26px;}
#mcts1 .navBullets a.active:hover {background-position:0 -26px;}



/* --------- Others ------- */
#mcts1
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}

/* bx slider
**************************************************/
.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}


/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0px 2px 10px #535353;
	-webkit-box-shadow: 0px 2px 10px #535353;
	box-shadow: 0px 2px 10px #535353;


	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	width: auto;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
	display:table;
	margin: 0 auto;
	width: auto;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
	float:left;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: rgb(1,86,126);
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: rgb(185,213,63);
}


/* DIRECTION CONTROLS (NEXT / PREV) */
/*
.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}
*/
/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}
/* Formulaire
**********************************************/
label{
	float: left;
	text-align: right;
	display: block;
	width: 170px;
	margin-right: 15px;
	text-transform: uppercase;
	font-size: 20px;
	line-height:33px;
}
input[type=text], textarea{
	float:left;
	width:547px;
	border:0;
	box-shadow:-2px 2px 5px #aaa;
	background:#ffffff;
	padding:6px;
	font-size:16px;
	-moz-transition: box-shadow 0.3s ease;
	-webkit-transition: box-shadow 0.3s ease;
	-o-transition: box-shadow 0.3s ease;
	-ms-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
}

input[type=text]:hover, textarea:hover{
	box-shadow: 0px 0px 3px #aaa;
}
input[type=text]:focus, textarea:focus{
	outline:none;
	box-shadow: 0px 0px 5px #383838;
}
textarea{
	height:60px;
}
.form-ctrl{
	margin-bottom:14px;
	display:table;
}
.error{
	display:none;
	float:left;
	margin-left:10px;
	margin-top:3px;
}
#contact_success{
	display:none;
	margin-top:40px;
}
#contact_success p{
	color:#b9d640;
	text-align:center;
}
#adcou_contact{
	margin-top:57px;
}
.submit{
	margin-right:9px;
	margin-top:12px;
	padding-top:4px;
	padding-left:0;
}
.submit:active{
	outline:none;
	border:0;
}
#loading{
	display:none;
	margin-right:9px;
	margin-top:12px;
}

/* Float
*********************************************/
.float-left{
	float:left;
}
.float-right{
	float:right;
}
.clearfix{
	clear:both;
}
.table-style{
	width:100%;
	display:table;
}
.list-savoirfaire{ margin-bottom: 0; }
.list-savoirfaire li +li{ margin-top: 0; }
.list-savoirfaire li:first-child{ background: url(../images/square-bullet.jpg) no-repeat 0 25px; }
.list-savoirfaire li:last-child{ background: url(../images/square-bullet-orange.png) no-repeat 0 42px; margin-top: -2px; margin-bottom: 0; }


/* //voeux 2018 */
body.voeux-2018 #navigation,body.voeux-2018 #main #header, body.voeux-2018 #footer,  body.voeux-2018 #onglet, body.voeux-2018 .left-shadow, body.voeux-2018 .right-shadow{ display: none; }
body.voeux-2018 img{ max-width: 100%; }
body.voeux-2018 #main{ float: none; margin: 0 auto; }
body.voeux-2018 #content{ padding-top: 0px; }


/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {

}