@charset "UTF-8";
/* CSS Document */
body{
	margin:0px;
	padding:0px;
	font-family: 'Open Sans', sans-serif;
	font-size:13px;	
	color:#666;
}

.clear1{
	clear:both;
	height:1px;	
}

.clear15{
	clear:both;
	height:15px;	
}

.clear25{
	clear:both;
	height:25px;	
}

.clear150{
	clear:both;
	height:150px;	
}

.toolbar{
	width:100%;
	height:20px;
	padding:10px;
	box-sizing:border-box;
	text-align:right;	
}

.toolbar a{
	color:#666;
	text-decoration:none;
	font-size:14px;
}

/**Pre home**/
.wrap{
	width:100%;
	min-height:100vh;	
	    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}

.pg_home{
	width: 90%;
    max-width: 800px;
    height: 100vh;
    margin: auto;
}

.pg_home .col-100{
	width:100%;
	height:auto;
	text-align:center;	
}

.pg_home .col-50{
	width:50%;	
	height:auto;
	float:left;
}

.pg_home .col-30{
	width:33%;	
	height: 100vh;
	float:left;
	box-sizing:border-box;
	padding:10px;
	text-align:center;
}
.pg_home .col-30 .base_img{
	height:48vh;	
	position:relative;
}

.pg_home .col-30 .base_img .content1{
	bottom:0px;
	position:absolute;
	height:auto;
}

.pg_home .col-30 img.photo{
	width:100%;
}

.pg_home .col-30 img.logo{
	height:82px;	
}

.pg_home .bg_gris{
	background:#f2f3f5	;
	padding-top:40vh;
}

/**Pre home**/



.header{
	width:100%;
	height:110px;	
}

.header .logo{
	width:50%;
	max-width:350px;
	height:110px;	
	margin:auto;
}

.header .logo img{
	width:100%;
}

.header .logo2{
	width:50%;
	max-width:300px;
	height:110px;	
	margin:auto;
}

.header .logo2 img{
	width:100%;
}



.slider{
	width:100%;
	height:auto;	
	max-height:400px;
	position:relative;
		overflow:hidden;
}

.slider_base{
	width:100%;
	height:auto;	
	max-height:400px;
	position:relative;

}

.slider .nav{
	width:100%;
	height:30px;
	background:rgba(0,0,0,0.62);
	position:absolute;
	top:0px;	
	z-index:20;
}


.nav ul{
	margin:0px;
	padding:0px;
	    width: 95%;
		display: table;
		margin:auto;
		max-width:1280px;

}

.nav ul li{
	list-style:none;
	float:none;
	position:static;
	font-size:15px;
	text-align:center;
	display: table-cell;
}

.width20{
	width:20%;	
}

.nav ul li a{
	    display: block;
    color: #FFF;
    padding: 5px;
    height: 20px;
    font-size: 14px;
    position: relative;
    text-decoration: none;
    font-weight: 300;
}

.contenu_txt{
	width:90%;
	max-width:800px;
	margin:auto;	
}

.contenu_txt .title{
	font-size:15px;
	color:#152190;
}

.contenu_txt .title2{
	font-size:15px;
	text-transform:uppercase;
	font-weight:bold;
}

.align_center{
	text-align:center;	
}


.col50{
	width:50%;
	min-width:250px;
	height:315px;
	box-sizing:border-box;
	padding:20px;	
	float:left;
}

.bleu{
	background:#040af7	;
}

.jaune{
	background:#fbd547	;
}

.rouge{
	background:#da3832	;
}

.vert{
	background:#00a6a3	;
}

.col50 .content{
	width:100%;
	margin:auto;	
}

.col50 .content a{
	text-decoration:none;
	color:#FFF;
	text-transform:uppercase;
}

.col50 .content .title{
	font-size:16px;
	color:#FFF;
	margin-bottom:5px;	
	text-align:center;
	text-transform:uppercase;
}

.col50 .content .img{
	width:100%;
	margin-bottom:5px;		
}


.col50 .content .img img{
	width:100%;	
}

.col50 .content .plus{
	width:60%;
	height:30px;
	margin:auto;	
	background:#000;
	text-align:center;
	padding-top:10px;
}





.pieces{
	width:92%;
	min-height:300px;
	height:auto;
	margin:auto;
		color:#192b73;
}

.pieces ul{
	margin:0px;
	padding:0px;
}

.pieces ul li{
	list-style:none;
}

.pieces ul li{
	list-style:none;
	width:32%;
	max-width:330px;
	height:246px;
	margin-right:1%;
	margin-bottom:20px;
	overflow:hidden;
	position:relative;
	float:left;
}

.pieces ul li .img{
	width:100%;
	height:246px;
	position:absolute;
	top:0px;
		z-index:1;
}

.pieces ul li .img img{
	width:100%;
	height:246px;
}

.pieces ul li .hover{
	width:100%;
	height:246px;
	background:rgba(0,0,0,0.64);
	box-sizing:border-box;
	padding:20px;
	color:#FFF;
	position:absolute;
	top:0px;
	z-index:2;
	text-align:center;
	font-size:16px;
}


.pieces ul li .hover{
	width:100%;
	height:246px;
	background:rgba(0,0,0,0.64);
	box-sizing:border-box;
	padding:20px;
	color:#FFF;
	position:absolute;
	top:0px;
	z-index:2;
	text-align:center;
	font-size:16px;
	left:-130%;
	top:-30%;
	 -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
	 -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}


.pieces ul li:hover .hover{
	width:100%;
	height:246px;
	background:rgba(0,0,0,0.64);
	box-sizing:border-box;
	padding:20px;
	color:#FFF;
	position:absolute;
	top:0px;
	z-index:2;
	text-align:center;
	font-size:16px;
	left:0px;
	top:0px;
	 -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
}




.pieces ul li .hover .plus_info{
	width:180px;
	height:35px;
	box-sizing:border-box;
	padding:5px;
	background:#ec86b1;
	color:#FFF;
	font-size:14px;
	margin:auto;
}

.pieces .titleBlue{
	width:100%;
	height:52px;
		box-sizing:border-box;
	padding:8px;	
	position:absolute;
	bottom:0px;
	color:#FFF;
	text-align:center;
	background:#002d66;
	z-index:3;
	left:0px;
	font-size:13px;
}

.pieces a{
	text-decoration:none;	
}








/*************/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
  .prev{
	position: absolute;
    top: 40%;
    z-index: 200;
    left: 2%; 
	text-indent:-1000px; 
	width:40px;
	height:80px;
		overflow:hidden;
				background:url("../img/fleche-gauche.png") no-repeat;


  }
  
  .next{
	position: absolute;
    top: 40%;
    z-index: 200;
    right: 2%;  
		text-indent:-1000px; 
		width:40px;
	height:80px;
	
	overflow:hidden;
		background:url("../img/fleche-droit.png") no-repeat;

  }
/*************/