/* Font */
 @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');

/* Reset */
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

/* body */

body {
    font-family: 'Roboto Condensed', sans-serif;
	font-size: 14px;
}

/* Colors */
.bg-color1 {
	 background-color: #e2bd46;
}
.bg-color2 {
	background-color: #dededd;
}
.bg-color3 {
	background-color: #272e44;
}

/* Layout */
.container-wmax {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}
.img {
	display: block;
	width: 100%;
	height: auto;
}
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}

*[class^="wp"] {
	padding: 20px;
}
.wp66 {
	width: 66.6666666666%;
	max-width: 66.6666666666%
}
.wp33 {
	width: 33.333333333333%;
	max-width: 33.333333333333%
}


/* Header */
.header__logo {
	position: absolute;
	z-index: 3;
	max-width: 130px;
	width: 10%;
	height: 130px;
	display: block;
	left: 6%;
	top: 5.5%;
}
.header__contact {
	position: absolute;
	z-index: 3;
	right: 3%;
	top: 5.5%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	text-transform: uppercase;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.header__contact span {
	display: block;
	position: relative;
	margin-right: 20px;
}
.header__contact span:after {
	content:'';
	display: block;
	position: relative;
	height: 1px;
	width: 100%;
	background: #fff;
	margin-top: 8px;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.header__contact svg {
	 display: block;
	 width: 30px;
	 height: 53px;
	 fill: #fff;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.header__contact:hover,
.header__contact:focus {
	color: #007cc3;
}
.header__contact:hover span:after,
.header__contact:focus span:after {
	background-color: #007cc3;
}
.header__contact:hover svg,
.header__contact:focus svg {
	fill: #007cc3;
}

/* Hero image */
#hero {
	position: relative;
}
#slider_header {
	position: relative;
	z-index: 0;
}
#hero:after {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMid' viewBox='0 0 373 649'%3E%3Cpath fill='%23007cc3' d='M0 649V0h373z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 0 ;
	opacity: .8;
}
.hero__titre {
	position: absolute;
	z-index: 2;
	right: 3%;
	bottom: 12%;
	text-align: right;
	color: #fff;
	text-transform: uppercase;
	font-size: 4em;
	font-weight: 700;
	line-height: 1em;
}
.hero__titre span {
	display: block;
	font-weight: 400;
	font-size: .9em;
	line-height: .9em;
}



/* Main */
#main {
	padding: 76px 64px;
}
#main .container-wmax {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.main__titre {
	font-size: 4em;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1em;
	margin-bottom: 3.5rem;
}
.main__titre span {
	color: #393431;
}
.main__intro {
	color: #fff;
	font-size: 1.65em;
}
.main__content {
	color: #1f1a17;
	font-size: 1.65em;
	margin-bottom: 2rem;
}

/* Produits */
#produits-photos {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
#produits-photos a {
	display: block;
	width: 25%;
	position: relative;
	background: #393431;
}
#produits-photos img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	-webkit-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
	opacity: 1;
}
#produits-photos a::after {
	content: "";
	position: absolute;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' fill='%23fff'%3E%3Cpath d='M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5 4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5 8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5zm-4.5 8h4v-4h1v4h4v1h-4v4h-1v-4h-4v-1z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	width: 50px; height: 50px;
	left: 50%; top: 50%;
	margin: -25px;
	opacity: 0;
	z-index: 2;
	transform: scale(.2);
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
#produits-photos a:hover::after {
	transform: scale(1);
	opacity: 1;
}
#produits-photos a:hover img {
	opacity: .3;
}

/* Form */
#form-wrapper {
	padding: 20px 64px;
}
.form-wrapper__titre {
	font-size: 4em;
	color: #838281;
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1em;
}
.form-wrapper__intro {
	font-size: 1.65em;
	margin: 10px 0;
	color: #838281;
}
.form-wrapper__legend {
	font-weight: 700;
	font-size: 1.65em;
	color: #007cc3;
	display: inline-block;
}
#list-produits {
	margin-bottom: 4em;
}
.produit {
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	padding: 20px 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #959392;
}
.produit__lien {
	display: block;
	margin-right: 20px;
	color: #969594;
	font-size: 1.65em;
	text-decoration: none;
}
.produit__titre {
	margin-right: auto;	
	font-size: 2.5em;
	font-weight: 400;
	color: #007cc3;
}
.produit__references {
	color: #969594;
	font-size: 1.65em;	
	margin-right: 40px;
	text-align: right;
}
.produit__references span {
	display: block;
}
.produit__references span + span {
	color: #4d4948;
}
.produit__quantite {
	height: 50px;
	width: 80px;
	padding: 10px;
}


fieldset {
	border: none;
}
select {
	border: none;
	background: #fff;
	color: #4d4948;
}
.form-std span,
.form-std input,
.form-std textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	font-size: 18px;
	transition: all .3s;
	outline: none;
}
.form-std label {
	font-size: 1.8em;
	color: #838281;
}
.form-std input {
	border: 1px solid  #ccc; 
	height: 50px;
	padding: 0 15px;
	margin-bottom: 20px;
}
.form-std textarea {
	border: 1px solid  #ccc; 
	min-height: 110px;
	max-height: 600px;
	resize: vertical;
	padding: 15px;
	margin-bottom: 20px;
}
.form-std span:hover,
.form-std input:hover,
.form-std textarea:hover {
	border-color: #e2bd46;
}
.form-std span:focus,
.form-std input:focus,
.form-std textarea:focus {
	border-color: #e2bd46;
	box-shadow: #e2bd46 0 0 10px;
}
.form-std span {
	padding-left: 30px;
	margin-bottom: .2em;
}
#form-details > .inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
#form-details label {
	width: 50%;
	max-width: 50%;
}
#form-details label:nth-child(odd) >.inner{
	padding-right: 10px;
}
#form-details label:nth-child(even) >.inner {
	padding-left: 10px;
}

#form-submit {
	margin-top: 4em;	
	margin-bottom: 1em;
}
#form-submit > .inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#form-submit__texte {
	background-color: #272e44;
	color: #fff;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	width: 66%;
	padding: 36px 20px;
}
#form-submit__btn {
	display: block;
	border: none;
	background-color: #007cc3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75.4 87.1'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23fff' d='M75.4 43.5L37.7 65.3 0 87.1V0l37.7 21.8z'/%3E%3C/svg%3E");	color: #fff;
	background-repeat: no-repeat;
	background-size: 30px 34px;
	background-position: center left calc(50% + 3em);
	font-size: 2em;
	font-weight: 700;
	text-align: center;
	width: 34%; 
	padding: 36px 20px;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	cursor: pointer;
	padding-right: 40px;
}
#form-submit__btn:hover,
#form-submit__btn:focus {
	background-color: #e2bd46;
}
#fillme { display:none; }

/* Erreurs */
.output-success {
	padding:20px;
	font-size:1.5em;
	color:#222;
	text-align:center;
}
.output-error {
	padding:20px;
	font-size:1.5em;
	color:#ff0000;
	text-align:center;
}
.output-error em { display:none; }

/* Footer */
footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 0 20px;
	margin-bottom: 40px;
}
footer > div {
	width: 45%;
	max-width: 45%;
	padding: 20px;
}
footer a {
	color: #007cc3;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-decoration: none;
	font-size: 1.5em;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
footer a:hover, 
footer a:focus {
	color: #1c8dce;
}
footer a:hover span:after, 
footer a:focus span:after {
	background: #1c8dce;
}
footer a:hover svg, 
footer a:focus svg {
	fill: #1c8dce;
	color: #1c8dce;
}
footer a span {
	position: relative;
	display: block;
}
footer a span:after {
	content:'';
	display: block;
	height: 1px;
	width: 100%;
	background: #6c6967;
	margin-top: .5em;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
footer svg {
	display: block;
	width: 30px;
	height: 36px;
	color: #272e44;
	margin-right: 20px;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
div#footer {
	border: 1px solid  #ccc;
	background-color: #dededd;
	padding: 20px;
}
div#footer > div {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
	font-size: 12px;
}
div#footer > div a { color: inherit; }
div#footer > div a:hover { color: #007cc3; }

/* ** */
#fancy-contact {
	background-color: #dededd;
	width: 340px;
	color: #1f1a17;
}
.fanc_wrapper {
	padding: 40px;
}
.fanc_wrapper > img {
	display: block;
	width: 100%;
	max-width: 260px;
}
.fanc_wrapper h1 {
	font-size: 20px;
	text-transform: uppercase;
}
.fanc_wrapper p {
	color: #100c08;
	font-size: 16px;
	padding: 0 20px;
	margin: 20px 0;
}
.fanc_wrapper .p-intro {
	color: #6c6a69;
	font-size: 20px;
}
.fanc_wrapper p a strong { font-size: 1.2em; }
.fanc_wrapper a { color: inherit }
.fanc_wrapper a:hover { color: #1961a4 }


@media screen and (max-height: 400px) {

}
@media screen and (max-width: 990px) {
	body {
		font-size: 12px;
	}
	.hero__titre {
		font-size: 3em;
	}
	#main *[class^="wp"] {
		width: 100%;
		max-width: 100%;
	}
	.main__titre {
		margin-bottom: 1rem;
	}
	#main,
	#form-wrapper {
		padding: 40px 20px;
	}
	.produit {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	.produit__lien {
		width: 100%;
		max-width: 100%;
	}
	.produit__titre {
		width: 100%;
		max-width: 100%;
	}
	.produit__references {
		width: calc(100% - 100px);
		max-width: calc(100% - 100px);
		margin-right: 20px;
		text-align: left;
	}
	.produit__references span {
	}
	.produit__references span + span {
	}
}

@media screen and (max-width: 650px) {
	body {
		font-size: 10px;
	}	
	#main, #form-wrapper {
		padding: 20px 10px;
	}	
	.header__logo {
		top: 20px;
		left: 20px;
	}
	.header__contact {
		top: 20px;
		right: 20px;
	}
	.header__contact svg {
		width: 20px;height: 33px;
	}
	
	#hero {
		height: 300px;
	}
	#slider_header {
		height: 100%;
	}
	#hero img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
		font-family: 'object-fit: cover; object-position: bottom;';
	}
	.hero__titre {
		left: 20px;
		right: 20px;
		text-align: center;
	}
	.hero__titre br {
		display: none;
	}
	#produits-photos a {
		width: 50%;
	}
	#form-submit > .inner {
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#form-submit > .inner > * {
		width: 100%;
		max-width: 100%	
	}
	.produit__quantite {
		width: 60px;
	}
	.produit__references {
		width: calc(100% - 80px);
		max-width: calc(100% - 80px);
	}
	#form-details label {
		width: 100%;
		max-width: 100%;
	}
	#form-details label:nth-child(odd) >.inner,
	#form-details label:nth-child(even) >.inner {
		padding: 0;
	}
	footer {
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 20px;
	}
	footer > div {
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin-bottom: 1em;
	}
}

@media screen and (max-width: 480px) {
	[class^="wp"] {
		padding: 10px;
	}
}
@media screen and (max-width: 320px) {
	#fancy-contact { width: 200px; }
	.fanc_wrapper {
		padding: 20px;
	}
	.fanc_wrapper p {
		font-size: 14px;
		padding: 0;
		margin: 10px 0;
	}
	.fanc_wrapper .p-intro {
		font-size: 16px;
	}
}