/* Font face titre produit du mois*/
@font-face {
    font-family: "rockwell";
    src: url("<?= get_template_directory_uri(); ?>/fonts/rockwell.ttf") format("truetype");
}
/* font face titre */
@font-face {
    font-family: "Athelas";
    src: url("<?= get_template_directory_uri(); ?>/fonts/Athelas-Regular.ttf") format("truetype");
}
/* font face texte */
@font-face {
    font-family: "AvenirLTStd";
    src: url("<?= get_template_directory_uri(); ?>/fonts/AvenirLTStd-Book.otf") format("truetype");
}

h1, h2, h3, h4, h5, h6{
	font-family:'Athelas';
}
html, body{
	font-family: 'AvenirLTStd';
}
.btn-black{
	background: #000;
	border-color: #000;
}

/************************** IMAGE AVANT ET APRES TITRE DE SECTION **************************/
.before-img{
	width: 50px;
	height: auto;
	background-size: cover;
	margin-right: 50px;
}
.after-img{
	width: 50px;
	height: auto;
	background-size: cover;
	margin-left: 50px;
}


/************************** HEADER SECTION **************************/
#header{
	width: 100%;
	height: 100%;
	background-size: cover;
	overflow: hidden;
	z-index: 0;
	background: #413B38;
}
#header img{
	/*width: 100%;
	height: 100%;*/
	position: absolute;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
	z-index: 0;
	margin: 0 auto;
}

@media screen and (max-width: 990px) {
	.slogan_br{
		display:block;
	}
}
@media screen and (min-width: 991px) {
	.slogan_br{
		display:none;
	}
}
#slogan{
	color: white;
	position :relative; 
	z-index: 10;
	margin-top: 0;
	margin-left: -150px;
	text-align: center;
	background: rgba(0, 0, 0, 0.4);
	padding-top: 40vh;
	padding-bottom: 22vh;
}

@media screen and (max-width: 1024px) {
	#header {
		height: 700px;	
	}
	#slogan{
		color: white;
		position: relative;
		z-index: 10;
		margin-top: 0;
		margin-left: 0px;
	 	text-align: center;
		background: rgba(0, 0, 0, 0.4);
		padding-top: 15vh;
		padding-bottom: 10vh;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	#header img {
		position: absolute!important;
		top: 0!important;
		left: 0!important;
		bottom: 0!important;
		right: 0!important;
		z-index: 0!important;
		margin: 0 auto!important;
		width: 100%!important;
	}
}
/************************** Animation sur l'animation titre de l'accueil **************************/
.animation {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  border: 1px solid;
  overflow: visible;
  white-space: nowrap;
  color: lightgray;
  position: relative;
}

.animation ul{
  list-style: none;
  padding: 0 .5ex;
  margin: 0;
  height: 1.2em;
}

.animation li {
	color: white;
  position: relative;
  animation: cycle-5-items 10s ease-in-out alternate infinite;
}

.animation ul.mask{
  color: black;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

@keyframes cycle-5-items {
  0%, 10% {
    transform: translateY(0%);
  }
  
  15%, 35% {
    transform: translateY(-100%);
  }
  
  40%, 60% {
    transform: translateY(-200%);
  }
  
  65%, 85% {
    transform: translateY(-300%);
  }
  
  90%, 100% {
    transform: translateY(-400%);
  }
}
/************************ FIN HEADER SECTION *************************** */

/************************ SECTION 1 - PRESENTATION *************************** */
.section{
	position: relative;
	width: 100%;
	height: auto;
}
.section1{
	z-index: 1;
	background: #CEC2B2;
}
.section1 .title{
	 text-align: center;
	 padding: 35px 0px;
	 border-bottom: 5px solid #FFFFFF;
	 background: #413B38;
}
#text-presentation{
	padding: 50px 100px;
}

/************************ SECTION 2 - NOTRE ACTIVITES *************************** */
.section2{
	z-index: 1;	
}
.section2 .title{
	text-align: center;
	padding: 25px 0px;
	border-bottom: 5px solid #FFFFFF;
	background: #000000;
	margin-bottom: 0px!important;
}
#img-renovation1{
	width: 100%;
	height: 500px;
	background-size: cover;
	transform: scale(1.5);
	transition: 10s;
}
#img-renovation2{
	width: 100%;
	height: 500px;
	background-size: cover;
	transform: scale(1.7);
}

.text-renovation{
	display: none;
	position: absolute; 
	top:0px;
	left:0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	padding-top:200px;
	padding-left: 75px;
	padding-right: 75px;
	overflow: hidden;
	color: #FFFFFF;
}
.renovation-content:hover .text-renovation{
	display: block;
}

#text-renovation h2{
	font-family: 'AvenirLTStd';
}

/************************ SECTION 3 - LE PRODUIT DU MOIS *************************** */
.section3{
	background: #cec2b2;
}
.section3 .title{
	text-align: center;
	padding: 35px 0px;
	margin-bottom: 0px!important;
}
.before-img-big{
	width: 175px;
	height: auto;
	background-size: cover;
	margin-right: 10%;
}
.after-img-big{
	width: 175px;
	height: auto;
	background-size: cover;
	margin-left: 10%;
}

.produit-du-mois div.row{
	width: 100%;
}

@media screen and (max-width: 1024px){
	.before-img-big{
		width: 100px;
		height: auto;
		background-size: cover;
		margin-right: 10%;
	}
	.after-img-big{
		width: 100px;
		height: auto;
		background-size: cover;
		margin-left: 10%;
	}
}

@media screen and (max-width: 900px){
	.before-img-big, .after-img-big{
		display: none;
	}
	.title-rockwell{
		font-size: 1em;
	}
	.subtitle-rockwell{
		margin-top: 40px!important;
	}

	.produit-du-mois{
		padding-bottom: 60px;
	}
}

.title-rockwell{
	color: #423c38;
	font-family:'rockwell';
}
.subtitle-rockwell{
	position: absolute;
	left:0;
	right: 0;
	margin-top:80px;
	font-size: 0.45em!important;
	font-family: 'AvenirLTStd';
}
.date-calendrier{
	width: 100%;
	height: auto;
	border-top: 5px solid #000000;
	border-bottom: 5px solid #000000;
}
.date-calendrier h2{
	width: 100%;
	padding: 10px 0;
}
.date{
	text-align: left;
	margin-left: 100px;
}
.prix{
	float: right;
	margin-right: 100px;
}

#image-mois{
	width: 100%;
	height: auto;
	background-size: cover;
	padding: 50px 100px;
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 1s;
}
.produit-du-mois:hover #image-mois{
	transition: 2s;
	-webkit-filter: grayscale(30%);
    filter: grayscale(30%);
}
#text-mois{
	padding-top: 75px;
	padding-right: 150px;
}

/************************ SECTION 4 - NOTRE EQUIPE *************************** */
.section4 .title{
	text-align: center;
	padding: 25px 0px;
	border-bottom: 5px solid #FFFFFF;
	background: #413b38;
	margin-bottom: 0px!important;
}
.img-container{
	text-align: center;
	background: #000000;
	color: white;
	padding-top: 100px;
}

.section4 .row{
	width: 100%;
}

/************************ SECTION 5 - NOUS TROUVER *************************** */
.section6 .title{
	text-align: center;
	padding: 25px 0px;
	border-bottom: 5px solid #FFFFFF;
	background: #413b38;
	margin-bottom: 0px!important;
}
#postal-container{
	background: #cec2b2;
	width: 100%;
	height: auto;
	padding: 50px;
}
/*#postal-bg{
	background: url('http://buhard-antiquites.com/wp-content/themes/buhard-antiquites/img/postcard.png')no-repeat;
}*/
#postal-bg h3{
	text-align: center;
	margin-top: 30px;
	color: #413B38;
}