html {
	overflow: hidden; 	/* Version Mobile par défaut*/
	height: 100%;
}
body {
  overflow:hidden;
  height: 100%;
  padding:0;
  margin:0;
  font-family: "Cabin",Serif;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: black;
  /* Version Mobile par défaut*/
  /* overflow: scroll; 	 */
  color : white;
  font-size: 22px;
}
@font-face {
    font-family: "Podkova";
    src: url('../fonts/podkova/Podkova-Regular.ttf') format('woff2');
}
@font-face {
    font-family: "OptimusPrinceps";
    src: url('../fonts/optimusprinceps/OptimusPrinceps.ttf');
}
@font-face {
    font-family: "cinzel";
    src: url('../fonts/cinzel/Cinzel-Regular.otf');
}
@font-face {
    font-family: "cinzel-bold";
    src: url('../fonts/cinzel/Cinzel-Bold.otf');
}
a:link {
	font-family: "Cabin",Serif;
    color:  #99ccff;
	opacity: .8;
	text-decoration: underline;
	//font-weight: bold;
    transition: all 0.4s ease-in-out 0s;
}
a:visited {
	color:  #99ccff;
	opacity: .8;
}
a:hover {
    opacity: 1;
	color:white;
}
a:active {
	color:#c24525;
    opacity: 1;
}
#events {
	font-family: "Cabin",Serif;
	font-weight: normal;
	color:  #99ccff;
}
li.active {
  background-color: #c24525;
  opacity: 1;
}
.nav a{
	text-decoration: none;
	font-size: 20px;
}
.navbar-header a{
	text-decoration: none;
	font-size: 22px;
}
.navbar-inverse .navbar-nav > li > a {
    opacity: .85;
}
.navbar-inverse .navbar-nav > li.active > a {
    opacity: 1;
}
h1 {
	font-size: 52px;
	font-family: "Podkova";
}
h2 {
	font-size: 38px;
	font-family: "Podkova";
}
/* *************************************************************************** */
/*!
 * Start Bootstrap - Full Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
.carousel,
.item,
.active {
    height: 100%;
}
.carousel-inner {
    height: 100%;
}
/* Background images of carousels are set within the id CSS, not here */
.carousel-fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
/* *************************************************************************** */
.adresse-large {
	text-align: left;
	padding-top: 25px;
	border: 0px;
	/* width: 215px; */
	padding-right: 0px;
	padding-left: 0px;
}
/* Pour permettre d'activer les liens sous le div contact_large en position fixed */
.adresse-large a {
	pointer-events: all;
}
.height40 {
	height:40px;
}
#menu_logo,
#menu_home {
    display: none;
}
.menu_logo {
	padding-bottom: 17px;
	max-height:40px;
	min-height:40px;
}
.menu_home {
	max-height:20px;
}
.logo_contact {
	max-height:45px;
	margin-top: 25px;
}
.logo_partenaires {
	padding-top:12px;
	max-height:120px;
	min-height:120px;
	text-align: middle;
}
.bg-dark{
	background-color: rgba(25, 25, 25, 0.8);
}
.border0{
	border:0;
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.copyright {
    /* color: #919191; */
    font-size: 14px;
    text-align: center;
	margin-left: 25px;
	margin-right: 25px;
}
.desktop-contact-footer {
    box-sizing: border-box;
    margin-left: 25px;
    margin-right: 25px;
}
.horaires-responsive-panel,
.adresse-responsive-panel {
    height: 455px;
    text-align: center;
}

.ft {
	font-size:14px;
	padding-top: 40px;
}
.horaires-large {
	text-align: left;
	border: 0px;
	padding: 0px;
}
.horaires-large a {
	pointer-events: all;
}
.horaires-large h1 {
	padding-bottom: 20px;
}
.horaires-large p {
	/* width : 160px;
	margin-left : 20px; */
	width : 230px; /* période de vacances */
	padding-left : 3px;
}
/* .horaires-large .jours-align { display: inline-block; width: 85px; } */


.icon-location {
	height : 22px;
/*	 padding-bottom : 2px; */
}
.icon-vcard {
	height : 22px;
/*	 padding-bottom : 2px; */
	padding-left : 10px;
}
.modal-title {
	font-family: "Podkova";
	font-size: 26px;
}
.modal-body p {
    margin-bottom: 3px;
	font-size: 20px;
    font-family: "Cabin",Serif;
}
.modal-content{
    background-image:url(../img/background/small_fond_gris_noir_beton.jpg);
	background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: black;
}
// Bouton de la modal
.close {
	color: white;
}
.partenaires-xs {
	text-align: center;
	height: 320px;
	/* display: block; */
}
.partenaires-large {
    text-align: center;
}
.partenaires-large h1 {
    padding-top: 12px;
}
.partenaires-large a {
    pointer-events: all;
}
/* Pour permettre d'activer les liens sous le div contact_large en position fixed */
.partenaires-xs a {
	pointer-events: all;
}
.partenaire-responsive {
    text-align: center;
}
.partenaire-responsive > p {
    padding : 50px;
    padding-top : 0px;
}
.row {
	margin-right: 0px;
	margin-left: 0px;
}
.social {
	padding-bottom: 15px;
}
.social_responsive {
    padding-bottom: 15px;
    pointer-events: all;
}
.today {
    background-color: #5e0000;
}

.vacances {
	color: #00d036;
	font-weight: bold;
}
#contact_large {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	padding-right: 50px;
	padding-left: 50px;
	font-size: 17px;
	bottom: 30px;
	height: 450px;
	/* z-index: -1; */
	/* Pour permettre le scroll depuis le contact_large */
	pointer-events: none;
}
#contact_large .partenaires-xs {
	/* border : 0px; */
	padding : 15px;
}
#contact_large .partenaires-large h1 {
    margin-top: 8px;
}
#cure {
	padding-top: 60px;
}
#home {
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
#galerie {
    text-align: center;
	z-index: 10;
}
#Latelier-DIV {
		height: 100%;
		width: 100%;
		overflow-y: scroll;
		/* position:relative; */
		-webkit-overflow-scrolling: touch;
}
#main_logo {
	position: relative;
	left: 10px;
    top: 60px;
	z-index: 1;
	display: block;
	max-width: 100%;
	height: auto;
	width: 35%;
}
#prestations {
	text-align: center;
}

@media screen and (max-width: 716px) {
    #menu_logo {
        display: block;
    }
}
@media screen and (min-device-width:0px){
       /* styles for mobile browsers */
	body {
		background-image:url(../img/background/small_fond_gris_noir_beton.jpg);
	}
	li.active {
		padding-bottom: 0px; /* Pour effacer le petit complément la celllule du petit menu en rouge  */
	}
	#coiffure1 {
		background-image:url(../img/carousel/coiffure_1XS.jpg);
	}
	#coiffure2 {
		background-image:url(../img/carousel/coiffure_2XS.jpg);
	}
	#coiffure3 {
		background-image:url(../img/carousel/coiffure_3XS.jpg);
	}
	#coiffure4 {
		background-image:url(../img/carousel/coiffure_4XS.jpg);
	}
	#coiffure5 {
		background-image:url(../img/carousel/coiffure_5XS.jpg);
	}
	#coiffure6 {
		background-image:url(../img/carousel/coiffure_6XS.jpg);
	}
	#coiffure7 {
		background-image:url(../img/carousel/coiffure_7XS.jpg);
	}
	#contact_blank {
		height: 0px;
	}
	#contact_large {
		display: none;
	}
	#home {
		background-image:url(../img/background/small_main.jpg);
	}
	#menu_adresse {
	  display: block;
	}
	#menu_contact {
	  display: none;
	}
	#menu_horaires {
	  display: block;
	}
	.logo_contact {
		margin-top: 25px;
	}
	.logo_contact_large {
		margin-bottom: 60px;
	}
	#footer_large {
		display: none;
	}
	#prestations {
		padding: 0px;
	}
}
/* Passage du menu déroulant au menu standard */
@media screen and (min-width: 594px) {
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit complément la celllule active en rouge  */
	}
}
/* Version Tablette */
@media screen and (min-width: 717px) {
	#coiffure1 {
		background-image:url(../img/carousel/coiffure_1.jpg);
	}
	#coiffure2 {
		background-image:url(../img/carousel/coiffure_2L.jpg);
	}
	#coiffure3 {
		background-image:url(../img/carousel/coiffure_3XL.jpg);
	}
	#coiffure4 {
		background-image:url(../img/carousel/coiffure_4.jpg);
	}
	#coiffure5 {
		background-image:url(../img/carousel/coiffure_5.jpg);
	}
	#coiffure6 {
		background-image:url(../img/carousel/coiffure_6.jpg);
	}
	#coiffure7 {
		background-image:url(../img/carousel/coiffure_7.jpg);
	}
	body {
		background-image:url(../img/background/small_fond_gris_noir_beton.jpg);
	}
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit complément la celllule active en rouge  */
	}
	.logo_contact {
		margin-top: 25px;
	}
	.horaires-large {
		text-align: left;
		height: 300px;
	}
	#contact_blank {
		height: 0px;
	}
	#contact_large {
		display: none;
	}
	#home {
		background-image:url(../img/background/main.jpg);
	}
	#menu_adresse {
	  display: none;
	}
	#menu_contact {
	  display: block;
	}
	#menu_horaires {
	  display: none;
	}
	#footer_large {
		display: none;
	}
	#prestations {
		padding: 0px;
	}
}
@media screen and (min-width: 998px) {
	html {
		/* overflow: scroll; */
		/* overflow: hidden; */
	}
	body {
		/* overflow: visible; */
		background-image:url(../img/background/fond_gris_noir_beton.jpg);
	}
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit compl�ment la celllule active en rouge  */
	}
	.logo_contact {
		margin-top: 0px;
	}
	#contact_blank {
		height: 500px;
	}
	/* On ne ne gère pas l'affichage ici, géré par la fonction : show_hide_contact_large_section() */
		#contact_large {
			/* display: block; */
		}
		#contact_large .partenaires-xs img {
			max-width: 120px;
		}
		#coiffure1 {
		background-image:url(../img/carousel/coiffure_1.jpg);
	}
	#coiffure2 {
		background-image:url(../img/carousel/coiffure_2XL.jpg);
	}
	#coiffure3 {
		background-image:url(../img/carousel/coiffure_3XL.jpg);
	}
	#coiffure4 {
		background-image:url(../img/carousel/coiffure_4.jpg);
	}
	#coiffure5 {
		background-image:url(../img/carousel/coiffure_5.jpg);
	}
	#coiffure6 {
		background-image:url(../img/carousel/coiffure_6.jpg);
	}
	#coiffure7 {
		background-image:url(../img/carousel/coiffure_7.jpg);
	}
		#footer_large {
	        display: block;
	        font-size: 14px;
	    }
	#home {
		background-image:url(../img/background/main.jpg);
	}
	#prestations {
		padding: 25px;
	}
}
@media screen and (min-width: 1025px) {
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit complément la celllule active en rouge  */
	}
		#contact_large .partenaires-xs img {
			max-width: 144px;
		}
	}
@media screen and (min-width: 1280px) {
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit complément la celllule active en rouge  */
	}
	#contact_large {
		font-size: 18px;
	}
		.horaires-large p {
			/* width : 170px; */
			width : 250px; /* p�riodes de vacances */
		}
	}
@media screen and (min-width: 1440px) {
	li.active {
		padding-bottom: 2px; /* Pour ajouter un petit complément la celllule active en rouge  */
	}
	#contact_large {
		font-size: 20px;
	}
		.horaires-large p {
			/* width : 190px; */
			width : 270px; /* période de vacances */
		}
	}
/* Unified mobile/tablet contact block. Desktop keeps #contact_large because it is scroll-controlled. */
#contact_responsive {
    display: none;
}
.partenaire-responsive {
    text-align: center;
    width: 100%;
    float: left;
}
.contact-responsive-row:before,
.contact-responsive-row:after,
.partenaires-responsive-row:before,
.partenaires-responsive-row:after {
    content: " ";
    display: table;
}
.contact-responsive-row:after,
.partenaires-responsive-row:after {
    clear: both;
}
.horaires-responsive-panel,
.adresse-responsive-panel {
    width: 100%;
    float: left;
    text-align: center;
}
.footer_tablet_content {
    display: none;
}
#footer_responsive .footer_mobile_content {
    display: block;
}

@media screen and (min-width: 717px) {
    .partenaire-responsive {
        width: 33.333333%;
        height: 320px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .partenaire-responsive > p {
        padding: 0;
    }
    .horaires-responsive-panel,
    .adresse-responsive-panel {
        width: 50%;
        height: 420px;
    }
    .adresse-responsive-panel {
        text-align: left;
        padding-left: 25px;
    }
    #footer_responsive .footer_mobile_content {
        display: none;
    }
    #footer_responsive .footer_tablet_content {
        display: block;
    }
}
/* Responsive contact display overrides after the mobile/tablet merge. */
@media screen and (min-device-width:0px) {
    #contact_responsive {
        display: block;
        text-align: center;
    }
    #footer_responsive {
        display: block;
        text-align: center;
        font-size: 12px;
    }
}

@media screen and (min-width: 717px) {
    #contact_responsive {
        display: block;
    }
    #footer_responsive {
        display: block;
        text-align: center;
        font-size: 14px;
    }
}

@media screen and (min-width: 998px) {
    #contact_responsive,
    #footer_responsive {
        display: none;
    }
}