/*****************************
 * Andrea Giaccobe 2016
 *
 * © www.kurtzdev.com
 *****************************/

@font-face {
    font-family: 'futura_hv';
    src: url('../fonts/futura_heavy_font-webfont.eot');
    src: url('../fonts/futura_heavy_font-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futura_heavy_font-webfont.woff2') format('woff2'),
         url('../fonts/futura_heavy_font-webfont.woff') format('woff'),
         url('../fonts/futura_heavy_font-webfont.ttf') format('truetype'),
         url('../fonts/futura_heavy_font-webfont.svg#futura_hv_btheavy') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
	/*height: 100% !important;*/
	width: 100%;
	margin:0;
	padding:0;
	background: transparent url(../img2016/metalFonce2.jpg) center 0 repeat;
}

body {
	background: transparent;
	height: 100%;
	width: 100%;
	margin:0;
	padding:0;
	color: #fff;
}
a,
a:hover {
	text-decoration: none !important;
}

#header {
	min-height:90px;
	/*height:90px;*/
	margin-bottom: 45px;
}
.lienMenuTop  {
	position: relative;
	font: 38px/38px futura_hv;
	text-transform: uppercase;
	color: #cecece;
	display: inline-block;
	padding-top:15px;
  	text-shadow: rgba(255, 255, 255, .3) -1px -1px 1px,
  				 rgba(0, 0, 0, 1) 2px 2px 2px;
}
.lien {
	position: relative;
	color: #cecece;
	display: inline-block;
  	text-shadow: rgba(255, 255, 255, .3) -1px -1px 1px,
  				rgba(0, 0, 0, 1) 2px 2px 2px;
}

.lien:focus, .lien.actif,
.lienMenuTop:focus, .lienMenuTop.actif,
.lien:hover,
.lienMenuTop:hover {
	color: #fff;
  	text-shadow: 1px 1px 2px #999,
  	            -3px -3px 15px #aaf,
  	             3px 3px 30px #fff,
  	             6px 6px 60px #fff;

}

#logo_header {
	height:50px;
	margin-top:15px;
	background: transparent url(../img2016/logo_75.png) center left no-repeat;
	background-size:contain;
	padding-left: 60px;
}

#logo_header.actif,
#logo_header:hover {
	background: transparent url(../img2016/logo_75halo.png) center left no-repeat;
	background-size:contain;

}
#logo_header.actif a,
#logo_header:hover a{
	color: #fff;
  	text-shadow: 1px 1px 2px #999,
  	            -3px -3px 15px #aaf,
  	             3px 3px 30px #fff,
  	             6px 6px 40px #fff;

}
#logo_header  a {
	display: inline-block;
	position: relative;
	font: 18px/18px Arial;
	text-transform: none;
	}

#titre_rubriques a {
	text-align: center;
	margin: auto;
	padding-top:24px;
}

#titre_rubriques {
	 display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}


#titre_about {
	text-align:right;
	padding-top:24px;
}
.about p {
	margin-bottom: 3px;
}


#titre_about a {
	font: 12px/12px futura_hv;
	color: #cecece;
}
#titre_about a:hover {
	color: #fff;
  	text-shadow: 1px 1px 2px #999,
  	            -3px -3px 15px #aaf,
  	             3px 3px 30px #fff,
  	             6px 6px 40px #fff;
}





footer {
	margin-top:45px;
	padding-bottom:30px;
}
#footer_about {
	text-align: right;
	padding: 0;
}
#footer_contact {
	text-align: center;
	padding: 0;
}
#footer_credits {
	text-align: left;
	padding: 0;
}







footer a {

}
footer a:hover {
	color: #fff;
  	text-shadow: 1px 1px 2px #999,
  	            -3px -3px 15px #aaf,
  	             3px 3px 30px #fff,
  	             6px 6px 40px #fff !important;
}







/*************************************
 *                        Accueil 2016
**/
.accueil .tabletteTop {
}














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




}





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

	.lienMenuTop {
		font: 30px/30px futura_hv;
	}

	#logo_header  a {
		font: 21px/21px Arial;
	}

	#titre_about a {
		font: 14px/14px futura_hv;
	}

	#titre_about {
		text-align: center;

	}

	#titre_about p {
		display: inline-block;
		text-align: center;
		padding: 0 15px;
	}
}


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

	#logo_header  a {
		font: 18px/21px Arial;
	}
	#titre_rubriques {
		text-align: center;
		font: 30px/38px futura_hv;
	}


}


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

	#titre_still {
		padding-left: 0;
		padding-right: 0;
		font: 38px/38px futura_hv !important;
	}

	#titre_motion {
		padding-left: 0;
		padding-right: 0;
		font: 38px/38px futura_hv !important;
	}

}














#content {
}

.tablette {
	border-radius: 45px;
	padding: 45px;
	background-color: hsl(0,0%,1%);
  	border: 3px solid hsla(0,0%,0%,1),;

  	box-shadow:
  		inset 0 15px 15px -6px hsla(0,0%,100%,.7),
  		inset 0 -5px 10px 3px rgba(250,250,250,.3),

  		1px 1px 1px 1px rgba(250,250,250,.9),
  		8px 10px 2px hsla(0,0%,0%,.3),
  		0 15px 15px -5px hsla(0,0%,100%,.3),

    inset hsla(210,10%,15%, .3) 0 -1px 5px 4px, /* soft SD */
    inset hsla(210,10%,20%,.15) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(210,10%,100%,.1) 0  2px 1px 7px /* top HL */

    ;
}





.thumb01,
.thumb02,
.thumb03,
.thumb04 {
	overflow: hidden;
}

.thumb01,
.thumb02 {
	margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
.imageBig {
	margin-bottom: 30px;
}
}



img {
	width:100%;
	height:100%;
}
.infoSup {
	position: absolute;
}















/*****************************
 *                       STILL
**/
/* une galerie */
#galeriesPhoto {
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* une photo */
.galleriePhoto {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    margin-bottom: 30px;
    position: relative;

    background-size: cover;
    background-position: center;
}
.galleriePhoto img {
	width: 100%;
  	box-shadow: rgba(255, 255, 255, .45) -1px -1px 1px, rgba(255, 255, 255, .24) 2px 2px 2px;
	    -webkit-transition: all .45s ease-in;
    -moz-transition: all .45s ease-in;
    -o-transition: all .45s ease-in;
    transition: all .45s ease-in;
    cursor: pointer;
}

.infosGalerie {
	position: absolute;
	bottom: -30px;
	left: 0;
	background-color: rgba(0, 0, 0, 0.8);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#000000',GradientType=0 );
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	opacity:0;
	font: 14px/18px futura_hv;
    padding: 6px 0 50px 10px;
    width: 96%;
	    -webkit-transition: all .15s ease-in;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    transition: all .15s ease-in;

}

.galleriePhoto img:hover {
	box-shadow: rgba(255, 255, 255, .45) -1px -1px 1px,
				rgba(255, 255, 255, .24) 2px 2px 2px,
				0px 0px 9px 6px rgba(255,255,255,.3);
}

.galleriePhoto:hover .infosGalerie {
	bottom: 0;
	opacity: 1;
}
.infoSup {
	display: inline-block;
	padding-left: 15px;
}

.idGallerie { display: none; }






#projecteur {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin:0;
	padding:0;
	background: rgba(0,0,0,1);
	z-index: 999;
	display: none;
	overflow: hidden;
    max-height: 100% !important;
}

#diaporama {
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
	background: #000;
    max-height: 100% !important;
}
#diaporama img {
	/*max-width: 100%;
	max-height: 100%;*/
}




#controlleurGallerie {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	color:#ffffff;

}

#slidesGallerie {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #000000;
	color:#ffff00;
	z-index: 999999999;
    max-height: 100% !important;
}
	.slick-prev {
	color: #ffffff;
	background: yellow;
	z-index: 999999;
	width:40px;
	height:40px;
	left: 25px;
	}
	.slick-next {
	color: #ffffff;
	background: yellow;
	z-index: 999999;
	width:40px;
	height:40px;
	right: 25px;
}
.btn_fermer {
	background: url("../images/sprites-1.png") no-repeat scroll -1px -59px transparent;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 20px;
    display: block;
    height: 20px;
    text-indent: 1000px;
    width: 20px;
    z-index: 999999999;
}

.diapo {
	width:100%;
	height:100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}


.slick-list, .slick-track {
	height: 100%;
}

.infosDiapo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	margin: 0;
	padding: 20px;
	color: #ffffff;
	font: 14px/14px futura_hv;
	background: transparent url(../img2016/logo_blanc.png) 10px 5px no-repeat;
	background-size:50px;
	padding-left: 75px;
}

.infosDiapo:hover {
	background: rgba(0,0,0, .15) url(../img2016/logo_blanc.png) 10px 5px no-repeat;
	background-size:50px;
	}
.titreGallerie {
	display: inline-block;
}
.infoLecture {
	font: 12px/12px futura_hv;
}



iframe {
	width: 90% !important; height: 90% !important;
	margin: 5%;
}

#contact h1 {
	font: 22px/28px futura_hv;
	text-transform: uppercase;
	color: #ffffff;

}

.contenu p {
	font: 16px/24px Arial;
	color: #ffffff;
}
label {
	font: 16px/24px Arial;
	color: #ffffff;
	display: inline-block;

}
.input-group {
	max-width: 450px;
	margin: 0 auto 30px;
}
.form-control {
	margin-bottom: 30px;
	display: inline-block;

}


.uneActu {
	margin-bottom: 30px;
}
.pagination {
	text-align: center;
}

.pagination a {
	font: 16px/16px Arial;
	color: #ffffff;
	padding: 10px;
}
.ditto_currentpage {
	font: 16px/16px Arial;
	color: #dddddd;

}
.ditto_previous_off {
	margin-right: 30px;
	display: inline-block;
}
.ditto_next_link,
.ditto_next_off {
	margin-left: 30px;
	display: inline-block;

}


/* Styles added by Jonathan Verrecchia */

.lien.actif {
	color: white !important;
}

.tablette .diapo {
	background-size: cover;
}

@media only screen  and (min-width : 800px) {
	/* .tablette .diapo { background-size: cover;} */
}

#titre_about {
	padding-top: 22px;
}

@media screen and (max-width: 992px) {
	#titre_about {
		padding-bottom: 22px;
	}
}

#logo_header {
	letter-spacing: 1px;
	margin-top: 19px;
}

#header {
	margin-bottom: 0;
}

footer {
	margin-top: 30px;
}

.diapo {
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.slick-list {
	border-radius: 45px;
}

.accueil .tablette {
	padding: 5px;
}

/*@media only screen  and (max-width : 740px) { */

.ios.accueil .tablette {
	padding-top: 45px;
	padding-bottom: 45px;
}

.ios .slick-list {
	border-radius: 0;
}

/*}*/

.tablette {
	box-shadow:
	inset 0 16px 14px -17px hsla(0,0%,100%,1),
	inset 0 0px 0px 2px rgba(250,250,250,.3),
	1px 1px 1px 1px rgba(250,250,250,.9),
	12px 10px 2px hsla(0,0%,0%,.3),
	0 0px 15px -5px hsla(0,0%,100%,.3),
	inset hsla(210,10%,15%, .3) 0 -1px 5px 4px, /* soft SD */
	inset hsla(210,10%,20%,.15) 0 -1px 0px 7px, /* bottom SD */
	inset hsla(210,10%,100%,.1) 0 2px 1px 7px /* top HL */
}

/* Also replaced all 'text-shadow: 1px 1px 2px #000' in :hovers
by 'text-shadow: 1px 1px 2px #999' for glare effect */


/* White background TEXT page */

#page_10,
#page_10 .contenu p,
#page_10 .pagination a {
	color: #333;
}

#page_10 .tablette {
	background: white;
}

#page_10 .ditto_currentpage {
	padding: 10px;
	color: black;
	font-weight: bold;
}


#bt_continuer {
	display: block;
background: #000;
border: none;
}

div.menuSite.row {
	overflow: hidden;
}