/* CSS Hoffmann Thill */

html {
	background-color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}

body {
	width:92%;
	margin-right: auto;
	margin-left: auto;
}

	@media (max-width: 768px) {
	  body {width:100%;}
	}

.ht-padding {padding-top: 3em;padding-bottom: 3em;padding-left: 3em;padding-right: 3em;}

	@media (max-width: 768px) {
	  .ht-padding {padding-top: 2em;padding-bottom: 2em;padding-left: 2em;padding-right: 2em;;}
	}

.ht-border {border: 10px solid #fff;}
.no-padding {padding-top: 0;padding-bottom: 0;padding-left: 0;padding-right: 0;}
.mentions {font-size:1em;font-style:italic;color:#ccc;}
.centre {margin-left: auto;margin-right: auto;}
.liseret {display: inline-block;border-bottom: 1px solid #1e1f21;}

/* GENERAL */

h1, h2, h3, h4 {
	text-transform: uppercase;
	color: #1e1f21;
	padding-bottom: 0.4em;
}

h1 {font-size: 3.4em;font-weight: 300;}
h2 {font-size: 2.8em;font-weight: 300;}
h3 {font-size: 1.6em;font-weight: 400;}
h4 {font-size: 1.6em;font-weight: 400;color: #d0dc3d;}

section h1, article h1 {font-size: 1.6em;font-weight:700;margin-bottom: 0;}

	@media (max-width: 992px) {
	  h1 {font-size: 2.6em;}
	  h2 {font-size: 2em;}
	  section h1, article h1, h3, h4 {font-size: 1.5em;}
	}

form hr {width: 100%;border-color: #333;}

a {text-decoration: none;color: #3f515b;}

a:hover, a:focus, a.cta-lien:hover, a.cta-lien:focus {text-decoration: none;color: #d0dc3d;}

p, li {color: #3f515b;font-size: 1.2em}

small {color:#3f515b;;}

.basgauche {
	position:absolute;
	width: 100%;
	bottom:0;
	left: 0;
}

a.cta-lien {
	display:block;
	color: #1e1f21;
	text-transform: uppercase;
	font-weight: 700;
	margin-top:0.7em;
}

a.cta-lien::after {font-family: FontAwesome;content: "\f178";display: inline-block;padding-left: 10px;vertical-align: top;}
a.retour::after {font-family: FontAwesome;content: "\f112";display: inline-block;padding-left: 10px;vertical-align: top;}
a.mail::after {font-family: FontAwesome;content: "\f0e0";display: inline-block;padding-left: 10px;vertical-align: top;}

/* NAVIGATION */

nav.menu {
	/*Position fixed par bootstrap*/
	text-align: center;
	background-color: #fff;
	height: 5.7em;
}

nav.menu div.logo {
	position: absolute;
	top:-3em;
	left: 50%;
	width: 15em;
	height: 15em;
	margin-left: -7.5em;
	padding:4.5em 3em 0 3em;
	background-color: #fff;
	border-radius: 7.5em;
	-webkit-box-shadow: 0px 17px 13px -10px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 17px 13px -10px rgba(0,0,0,0.18);
	box-shadow: 0px 17px 13px -10px rgba(0,0,0,0.18);
	z-index: 2;
}

	@media (max-width: 768px) {
	  nav.menu div.logo {
	  	top:-1.5em;
	  	width: 12em;
	  	height: 12em;
	  	margin-left: -6em;
	  	padding:3em 2em 0 2em;
	  	border-radius: 6em;
			transform: scale(0.9);
	  }
	}
	@media (max-width: 495px) {
	  nav.menu div.logo {
			transform: scale(0.6) translateY(-15px);
	  }
	}
.burger {
	position: absolute;
	top:0.4em;
	left:4%;
	margin-left: 10px;
	text-transform: uppercase;
	text-align: left;
	font-size: 3em;
	color: #3f515b;
	z-index:3;
}

	@media (min-width: 992px) {
	  .burger {display: none;}
	}

nav.menu ul {
	height: 100%;
	padding-top: 1.8em;
	padding-left: 0;
	margin-bottom: 0;
	text-align: center;
}
nav.menu ul.shadow-box{
	-webkit-box-shadow: 0px 14px 13px -10px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 14px 13px -10px rgba(0,0,0,0.1);
	box-shadow: 0px 14px 13px -10px rgba(0,0,0,0.1);
}
	@media (max-width: 992px) {
	  nav.menu ul {
			overflow: hidden;
			-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;
			visibility: hidden;
			position: fixed;
			height: auto;
			top:0;
			right:0;
			bottom: 0;
			left:0;
			padding-top:200px;
			margin: 0;
			-webkit-transform: scale(0.1);-moz-transform: scale(0.1);-ms-transform: scale(0.1);-o-transform: scale(0.1);transform: scale(0.1);
			opacity: 0;
			pointer-events: none;
		}

		nav.menu.active ul{
		  background: white;
			opacity: 1;
			overflow: hidden;
			overflow-y: auto;
			visibility: visible;
			-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);
			pointer-events: auto;
		}

		nav.menu ul li{
			display: table!important;
		  text-align: left!important;
			padding:10px 0!important;
			margin:auto!important;
		}

		nav.menu ul li.espace{
			display: none!important;
		}
	}


nav.menu ul li {display: inline-block;}

li.espace {width: 15em;}

nav.menu ul li a {
	font-size: 1em;
	text-transform: uppercase;
	padding: 0 2em;
	color: #3f515b;
	font-weight: 300;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	display: block;
	position:relative;
	z-index: 2;
}
nav.menu ul li.current-menu-item a{
	color:#ced74b;
}
@media (min-width:992px){
	nav.menu ul li{position:relative;z-index:0}
	nav.menu ul li:before{
		content:"";
		display: block;
		position: absolute;
		left:0;
		right:0;
		top:-25px;
		height:0px;
		background: #ced74b;
		z-index: 0;

		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
		opacity: 0;
	}
	nav.menu ul li:hover:before{
		-webkit-transform: translateY(0%);
		-moz-transform: translateY(0%);
		-ms-transform: translateY(0%);
		-o-transform: translateY(0%);
		transform: translateY(0%);
		opacity: 1;
		height:80px;
	}
	nav.menu ul li:hover a{
		-webkit-transform: translateY(-5px);
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-o-transform: translateY(-5px);
		transform: translateY(-5px);
		padding-bottom: 10px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		color:#fff;
	}
}
	@media (min-width: 992px) and (max-width: 1250px) {
		  nav.menu ul li a {font-size: 0.9em;padding: 0 0.5em;}
		}

.facebook {
	position: absolute;
	top:1.2em;
	right:4%;
	margin-right: 10px;
	text-transform: uppercase;
	text-align: right;
	font-size: 1em;
	color: #3b5999;
}

.facebook a.face-texte {float: left;color: #3b5999;}
.facebook a.face-icon i {font-size: 3em;padding-left: 10px;color: #3b5999;}

	@media (min-width: 992px) and (max-width: 1640px) {
	  .facebook a.face-texte {display: none;}
	}

	@media (max-width: 768px) {
	  .facebook a.face-texte {display: none;}
	}

/* CONTENU */

header {
	position: relative;
	background-size:cover;
	background-position: top center;
	text-shadow:2px 2px 0px rgba(0,0,0,0.2);
	background-attachment: fixed;
}
header img{display: none;}

#home header {padding:15em 15px 15em 15px;}
#interne header, .error404 header, .archive header {background-image: url(../img/interne-img.jpg); padding:20em 0 0 0;}

header p {color:#fff;font-weight: 300;margin-top:8%; }

header .annonce {
	position: absolute;
	left :0;
	bottom:20px;
	background-color: #ced74b;
	text-shadow:none;
	text-transform: uppercase;
	box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

header .annonce p {font-size: 1.5em;color:#465861;padding: 0 0 0 0; margin: 0 0 0 0;}

a.fermer {
	position:absolute;
	top:5px;
	right:5px;
	width: 10px;
	height: 10px;
	font-size: 0.5em;
	color:#465861;
	text-align: right;
	font-weight: 700;
}

@media (max-width: 767px) {
	#interne header, .error404 header, .archive header{padding: 5em 0 0 0;background: none!important;	text-shadow:none;}
	header .caption{background:#eff1f2}
		header .caption h1{font-size:1.8em;margin-top:0px; color:#3f515b}
		header .caption a{color:#3f515b}
		header .caption .liseret{border-color:#3f515b}
	header img{display: block;max-width: 100%; width: 100%}
}

/* CALL TO ACTION */

.cta-nos-marques, .cta-lingerie {
	position:relative;
	display:inline-block;
	height:28em;
	background-position: center center;
	background-size:cover;
	border-bottom: none;
}
	.cta-nos-marques {background-image: url(../img/cta-marques.jpg);}
	.cta-lingerie {background-image: url(../img/cta-lingerie.jpg);}

ul.liste-marques {
	float:right;
	background-color: rgba(250,250,250, 0.3);
	width: 20%;
	height: 100%;
	text-align: center;
	padding: 0 0 0 0;
	position: absolute;
	top:0;right: 0; bottom: 0;
	overflow: hidden;
}
	.slide-prev, .slide-next{
		cursor:pointer;
	}
	ul.liste-marques .slider-vertical a{
		height: 80px;
		display: block;
		overflow: hidden;
		line-height: 80px;
		position: relative;
	}
	ul.liste-marques .slider-vertical a img{
		position: absolute;
		left:50%;top:50%;
		-webkit-transform: translate(-50%,-50%);
	  -moz-transform: translate(-50%,-50%);
	  -ms-transform: translate(-50%,-50%);
	  -o-transform: translate(-50%,-50%);
	  transform: translate(-50%,-50%);
	}
	.cta-nos-marques ul.liste-marques li {
		list-style: none;
		max-width: 60%;
		margin-right: auto;
		margin-left: auto;
		height: 24px;
	}
	.cta-nos-marques ul.liste-marques li.slider-vertical{
		height: 334px;
	}
.fa-angle-up, .fa-angle-down {font-weight: 700!important; color:#000; }

.blanc, .blanc h1, .blanc h2, .blanc h3, .blanc p, .blanc a {color: #fff; border-color: #fff;}

/* NEWSLETTER + CARTE DE FIDELITE */

.lett-fide {
	background-image: url(../img/bg-newsletter.jpg);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	border-top: none;
}

.hauteur-fixe {position:relative;min-height: 36em;}

.newsletter {
	position:absolute;
	bottom: 0;
	margin-right: 3em;
}

form {position: relative;margin-bottom: 0px;}

form hr {
	width: 100%;
	border-color: #000;
}

.field {
	width:100%;
	height: auto;
	border: 2px solid #e5e8e9;
	text-transform: uppercase;
	padding:15px 15px 15px 60px;
	color: #aaaaaa;
	margin: 10px 0 10px 0;
	border-radius: 0;
}

form .fa-envelope {position: absolute;color: #d0dc3d;font-size: 1.6em;top:25px;left: 20px;}

.btn-envoi {
	display: block;
	color: #1e1f21;
	text-transform: uppercase;
	font-weight: 700;
	margin-top:0.7em;
	background-color: transparent;
	border: none;
	padding: 0 0 0 0;
}

.btn-envoi:hover, .btn-envoi:focus {color: #d0dc3d;}

form .fa-paper-plane {position: absolute;color:#1e1f21;font-size: 1em;bottom:0.2em;left: 6em;}

.fidelite {
	position:absolute;
	bottom: 0;
	margin-left: 3em;
}

	@media (max-width: 992px) {
	  .newsletter, .fidelite {margin-right: 0;margin-left: 0;}
	}

.bg-fidelite {
	background-image: url(../img/bg-fidelite.jpg);
	background-size: content;
	background-position: right -88px;
	background-repeat: no-repeat;
}

	@media (max-width: 1765px) {
		  .bg-fidelite {background-position: 120% -88px}
		}

	@media (max-width: 1400px) {
		  .bg-fidelite {background-position: 150% -88px}
		}

	@media (max-width: 1300px) {
		  .bg-fidelite {background-position: 200% -88px}
		}

	@media (max-width: 1180px) {
			  .bg-fidelite {background-position: 15em -88px}
			}

	@media (max-width: 992px) {
			  .bg-fidelite {background-position: right -42px;background-size: contain;}
			}

.fid-text p, .fid-text h3 {width: 50%;}

.fid-text hr {
	width: 100%;
	border-color: #000;
}

.fid-carte {
	position: absolute;
	width: 50%;
	bottom:0;
	right: 0;
}

.fid-carte img {margin-left: auto;	margin-right: auto;}

	@media (max-width: 992px) {
		  .newsletter, .fidelite {position: relative;padding: 120px 3% 0 3%;}
		  .hauteur-fixe {min-height: initial;}
		}

	@media (max-width: 768px) {
		  .bg-fidelite {background-image: none;}
		  .fid-text p, .fid-text h3 {width: 100%;}
		  .fid-carte {display:none;}
			.facebook{display: none}
		}

.mag1 {background-image: url(../img/magasin.jpg);}
.mag2 {background-image: url(../img/magasin.jpg);}
.mag3 {background-image: url(../img/magasin.jpg);}

.magasin {
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
}

.magasin article {
	background-color: rgba(206, 215, 75, 1);
	font-size: 0.8em;
	margin-left: 50%;
}
	.magasin article a:hover{
		color:#fff;
	}

	@media (min-width: 1140px) and (max-width: 1485px) {
		  .magasin article {margin-left:40%;}
		}

.magasin article h1 {margin-top: 0px;}
.magasin article h2 {font-size: 1em;font-weight: 700;}
.magasin article ul {margin-bottom: 0px;}
.magasin .icotel:before, .magasin .icofax:before, .magasin .icomail:before {color:#3f515b;}

/* CONTACT FORM */

#contact_form .field {padding: 15px 15px 15px 15px;}

.comment {text-align: center;padding-top:2em;padding-bottom:2em;color: #f00;}

/* ACTUALITES */

.contenu-add {margin-top: 3%;border-top: 1px solid #e6e9ea;}

.date {
	font-size:1.6em;
	font-weight:400;
	color:#d0dc3d;
	text-transform: uppercase;
}

.intro-verte {
	position: relative;
	background-color: #d0dc3d;
}

.intro-verte h2 img {max-width:200px;max-height: 65px;}

.logo-marque {
	position: relative;
	display: inline-block;
}

.logo-marque:after {
	padding-top: 100%;
    display: block;
    content: '';
}

.logo-marque a {
 	position: absolute;
 	opacity: 0.7;
    top:50%;
    left:0;
    right:0;
    transform: translateY(-50%);
}
	.logo-marque a:hover {opacity: 1;}

.galerie {
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	text-align: right;
	position: relative;
}
.galerie a{position: absolute;top:0;left:0;right:0;bottom:0; padding: 0 15px;display: block}

.galerie i {color: #fff;padding-top:15px;font-size: 1.2em;}

.galerie img {display: none;}

.gal1, .gal2, .gal3 {height:62em;}
.gal1 .eqcol{height: 50%;overflow: hidden}

	@media (max-width: 991px) {
	  .gal1, .gal2, .gal3 {height:40em;}
		.gal1 .eqcol{height: 100%;}
	}
	@media (max-width: 767px) {
	  .gal1, .gal2, .gal3, .gal1 .eqcol {height:auto;}
		.galerie img{display: block;width: 100%;}
		.galerie a{position: static;margin:0 -15px; padding: 0}
		.galerie i{display: none;}
	}
.alert{
	display: none;
}

/* FOOTER */

footer {background-color: #e6e9ea;}

footer .col-md-3 {padding-left:3%;padding-right:3%;}

footer ul, .magasin ul {padding:0px 0px 0px 0px;}

.footer-intro {border-bottom: 1px solid #fff;padding-bottom: 40px;margin-bottom:40px}

.footer-intro p, .footer-intro h3 {color: #3f515b;}

.footer-links img {max-width: 15em;margin-right: auto; margin-left: auto;}

.footer-links li, .magasin li {list-style: none;}
.footer-links li span, .magasin li span {float: right;}

.icotel::before {font-family: FontAwesome;content: "\f095";display: inline-block;padding-right: 15px;vertical-align: top;color:#d0dc3d;}
.icofax::before {font-family: FontAwesome;content: "\f1ac";display: inline-block;padding-right: 12px;vertical-align: top;color:#d0dc3d;}
.icomail::before {font-family: FontAwesome;content: "\f109";display: inline-block;padding-right: 13px;vertical-align: top;color:#d0dc3d;}

.copyright {background-color: #fff;padding-top: 2%; padding-bottom: 1%;}

.copyright p, .copyright a {color: #3f515b; text-transform: uppercase;font-size: 0.9em;}

.copyright div + div {text-align: right;}