@charset "utf-8";
/*  ++ CSS Document	 ++	 Groupe Demers ++	*/

/* FONTS EXTERNES
___________________________________________ */
 @font-face {
    font-family: 'BebassNeueRegular';
    src: url('../_fonts/BebasNeueRegular.eot');
    src: url('../_fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/BebasNeueRegular.woff') format('woff'),
         url('../_fonts/BebasNeueRegular.ttf') format('truetype'),
         url('../_fonts/BebasNeueRegular.svg#BebassNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }

   @font-face {
    font-family: 'BebassNeueRegular';
    src: url('../_fonts/BebasNeueBold.eot');
    src: url('../_fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/BebasNeueBold.woff') format('woff'),
         url('../_fonts/BebasNeueBold.ttf') format('truetype'),
         url('../_fonts/BebasNeueBold.svg#BebassNeueRegular') format('svg');
    font-weight: 700;
    font-style: normal;
   }

   /* font-family: BebassNeueRegular, "Helvetica Neue", Helvetica, Arial, sans-serif; */
/* -- // -- */


/* GÉNÉRALITÉ
__________________________________________ */
*{ margin:0; padding:0; text-decoration:none;} /* Retirer les espaces par défault */
img{ max-width:100%; border:none;} /* permettre aux images de s'ajuster auto */
ul{list-style-type:none;} /* retirer les points par défault */
.tel{text-decoration:none !important; cursor:default !important;} /* Lien  téléphone pour mobile */
html{
	font-size: 65.5%; /* Défini le font-size par défault à 10px */
	color: #fff; /* Font blanc par défault */
}
body{ background:#000;}

section{
	position:relative;
	padding:80px 0; /* padding de section */
}
article{
	position:relative;
	max-width:1400px; /* max-width du contenu */
	padding:0 20px; /* responsive left/right min spacing */
	margin:auto;
}
article h1 span{color:#f79021;} /* Point orange des titres*/

h1, h2, h3, h4, h5{
	font-family: BebassNeueRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing:0.02em;
}
h1{
	font-size:10.4em;/* 104/10 */
	margin-bottom:20px;
}
p{
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size:1.4em; /* 14/10 */
	line-height:1.8em;
	margin-bottom:20px;
}

/* -- // -- */

/* HEADER
___________________________________________ */
header{padding:30px 0;}
header ul{ max-width:1400px; margin:auto; padding:0 20px;}
header ul li{ display:inline-block; vertical-align:middle;}
header ul li:first-child{width:80%;} /* logo GD */
header ul li:last-child{width:20%; position:relative; } /* icon fb */
header ul li:last-child a{text-align:right !important;}


/* icon facebook + hover effect */
.fb{text-align:right !important;}
.fb a{
	display:inline-block;
	background-image:url(../_img/icon_facebook.png);
	background-position: 0 0;
	width:33px; height:33px;
}
.fb a:hover{ background-position: 0 -38px;}
/* -- // -- */



/* NAVIGATION
____________________________________________ */
nav{background:#f79021; width:100%; position:relative; z-index:20;}
nav ul{max-width:1400px; margin:auto; text-align:left; padding:0 20px;}
nav ul li{
	display:inline-block;
	font-family: BebassNeueRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:2.46em; text-transform:uppercase; color:#000;
	margin-right:38px; padding:12px 0;
}
nav ul li:last-child{margin-right:0;}
nav ul li a{
	color:#000;
	border-bottom:solid 2px rgba(0, 0, 0, 0);
	transition: border-bottom 0.3s ease-in-out; /* smooth hover */
}
nav ul li a:hover{border-bottom:solid 2px rgba(0, 0, 0, 1); }
nav .mobile{display:none}
/* -- // -- */


/* SECTIONS DE LA PAGE D'ACCUEIL
____________________________________________ */

/* -- SEPARATEUR -- */
.sep{
	background:url(../_img/fond_triangles.jpg) no-repeat;
	height:300px;
}
.sep.top{background-position:top;}
.sep.bottom{background-position:bottom;}
.sep.mid{background-position:center;}
.sep.small{height:0;}

/* -- ACCUEIL -- */
#accueil{
	position:relative;
	background:url(../_img/fond_triangles.jpg) top no-repeat;
	padding:170px 0 !important;
}
#accueil h1{
	font-size:15.4em !important; /* 154/10 */
	line-height:.8em;
	margin-bottom:0 !important;
}
#accueil h1 span{color:#000 !important;}


/* -- PORTFOLIO -- *//* MIXITUP*/


#portfolio p{max-width:1140px;}
#portfolio h3{ font-size:2.5em; /* 25/10 */}
#portfolio h3 a{
	display:inline-block;
	color:#f79021;
	margin-right:8px;
	border-bottom:solid 2px #f79021;
	transition: all 0.4s ease-in-out;
}
#portfolio h3 a:hover{border-bottom:solid 2px #d8aa5e; color:#d8aa5e;}

#portfolio #Container {
	font-size:0; /* Retirer espacement défault inline-block */
	margin:30px 0;
}
#portfolio #Container .mix{
	position:relative;
	display:inline-block;
	width:25%; padding:25% 0 0;
	overflow:hidden;
}
#portfolio #Container .mix a{
	position:absolute; top:0; left:0;
	width:100%; height:100%;
}

#portfolio #Container .mix a .caption{
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    font: 0/0 a; /* Remove the gap between inline(-block) elements */
	background:rgba(0, 0, 0, 0.7); opacity:0;
	transition:all .5s ease;
}
#portfolio #Container .mix a .caption:before{
	content: ' ';
    display: inline-block;
    vertical-align: middle;
	height:100%;
}
#portfolio #Container .mix a .caption h2{
	display: inline-block;
    vertical-align: middle;
    text-align:center;
    background:none;
    width: 100%;
	font-size:30px; line-height:30px;
	color: #f79021;
}
#portfolio #Container .mix a .caption h2 span{ font-size:.7em; color:#fff;}
#portfolio #Container .mix a:hover .caption{opacity:1; z-index:4;}


#portfolio #Container .mix{
    display: none;
}
.filter:hover{cursor:pointer;}

/* -- SERVICES -- */
#services p{max-width:1100px;}

#services ul li{
	display:inline-block;
	font-family: BebassNeueRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:10.9em; /* 109/10 */
	color:#f79021;  font-weight:700 !important;
	min-width:320px; margin-right:60px; margin-top:30px;
}
#services ul li a{color:#f79021;}
#services ul li h2{
	display:inline-block;
	font-size:0.4862em; line-height:.8em; color:#fff;
	margin-left:4px;
	transition: all 0.4s ease-in-out;
}

#services ul li a:hover h2{color:#f79021;}

/* -- ÉQUIPE -- */
#equipe h2{
	font-weight:700; font-size:4.4em; /* 44/10 */
	margin:20px 0 -5px;
}
#equipe h3{
	font-weight:700; color:#ff9000; font-size: 3em; /* 30/10 */
	margin:0 0 25px;
}
#equipe p{max-width:1260px;}
#equipe p a{color:#ff9000; transition: all .3s ease-in-out;}
#equipe p a:hover{color:#d8aa5e;}

#equipe article div{
	display:inline-block;
	width:26%;
	vertical-align:top;
	margin-right: 6%; margin-top:30px;
}

/* -- ARTICLES PROMOS -- */
#apromos h2{ margin-top:80px; font-size:5.44em; /* 54.4/10 */}
#apromos h2 span{color:#ff9000;}
#apromos p{max-width:1175px;}
#apromos ul li{display:inline-block; margin-right:40px;}
#apromos ul li:last-child{margin-right:0 !important;}

/* -- CLIENTS -- */
#clients ul li{ display:inline-block; vertical-align:middle; margin-right:1.4em; margin-bottom:1.4em}

/* -- CONTACT -- */
#contact{max-width:1400px; margin:auto; text-align:left;}
#contact article{
	max-width:980px;
	text-align:left !important;
	left:0; margin:0;
}
#contact div{vertical-align:top;}
#contact .infos{
	float:right;
	width:42%; margin-top:-7px;
}
#contact .infos h2{
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	color: #f79021; font-size:1.8em; /* 18/10 */
}
#contact .infos p{position:relative;}
#contact .infos p a{
	color:#ff9000; text-decoration:underline;
	transition: color .3s ease-in-out;
}
#contact .infos p a:hover{ color:#d8aa5e;}
#contact .infos p a.tel{ color:#fff;}
#contact .infos p .fb{position:absolute; bottom:5px; right:0;}
#contact .infos iframe{margin-top:-7px; width:100%; height:220px;}
#contact input, #contact textarea{
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-weight: 700; color:#939598; font-size: 1.4em; /* 14/10 */
}
#contact .formulaire{
	float:left;
	max-width: 52%;
	text-align:right;
}
#contact input{
	box-sizing:border-box; /* Inclure padding et border dans le width */
	width:100%; height:40px;
	border:none;
	margin-bottom:25px; padding:0 3%;
}

#contact textarea{
	box-sizing:border-box; /* Inclure padding et border dans le width */
	width:100%; height:296px;
	padding:10px 3%;
}
#contact #submit{
	position: relative; right:0;
	width:inherit; background:none !important;
	font-family: BebassNeueRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:right; color:#ff9000; font-size:2.7em !important; /* 27/10 */
	padding:inherit !important;
	border-bottom:solid 2px #f79021;
	transition: all 0.4s ease-in-out;
}

#contact #submit:hover{
	cursor: pointer;
	border-bottom:solid 2px #d8aa5e; color:#d8aa5e;
}



/* AUTRES PAGES
----------------------------------------------------- */

#marketingweb ul{
	display:inline-block;
	margin:30px 80px 0 0;
}
#marketingweb ul:last-child{margin-right:0;}
#marketingweb ul li{
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size:1.4em; color:#f79021; font-weight:700;
	margin-bottom:10px;
}
#marketingweb ul li a{color:#f79021; border-bottom:2px #f79021 solid;}
#marketingweb ul li a:hover{color:#fff; border-bottom:2px #fff solid;}


#marketingweb p a{color:#f79021;}
#marketingweb p a:hover{color:#fff;}
#marketing p a:visited{
color:#f79021;}


/* -- FOOTER -- */
footer{ padding:0 0 60px;}
footer p{
	float:left;
	font-weight:700; vertical-align:text-bottom;
	margin-right:8%; padding-top:40px;
}
footer ul{ display:inline-block; float:right;}
footer ul li{display:inline-block; margin-right:25px;}
footer ul li:last-child{margin-right:0;}


/* ++ placeholder interaction ++ */

/* Other */
::-webkit-input-placeholder {color:#939598;}
:focus::-webkit-input-placeholder {color:#bbbec1;}

/* Firefox < 19 */
:-moz-placeholder {color:#939598;}
:focus:-moz-placeholder {color:#bbbec1;}

/* Firefox > 19 */
::-moz-placeholder {color:#939598;}
:focus::-moz-placeholder {color:#bbbec1;}

/* Internet Explorer 10 */
:-ms-input-placeholder {color:#939598;}
:focus:-ms-input-placeholder {color:#bbbec1;}

/* -- */



/* RESPONSIVE RULES
_____________________________________________ */

@media screen and (max-width:1280px){
	#portfolio ul li{width:33.333334%; padding:33.333334% 0 0;}
	#portfolio ul{margin-left:-20px; margin-right:-20px;}/* remove article padding */
	#apromos ul li{width:30%;}

	#equipe article div{display:block; width:100%;}
	#equipe article div ul li{display:inline-block; vertical-align:top !important;}
	#equipe article div ul li:first-child{width:35%; margin-right:3%;}
	#equipe article div ul li:last-child{width:61%;}
	#equipe h2{margin:0;}
	#services ul li{
		font-size:8.5em;
		min-width:260px; margin-right:30px; margin-top:30px;
	}
	.sep{height:150px;}
	footer p{float:inherit;	padding-top:40px;}
	footer ul{float:inherit;}
}

}

@media screen and (max-width:1050px){
	h1{font-size:7.5em;}
	#services ul li{
		font-size:7.5em;
		min-width:200px; margin-right:60px; margin-top:30px;
	}
	#contact .formulaire{margin-right:40px;}

}
@media screen and (max-width:1000px){
	/*#contact .formulaire{max-width: 300px;margin-right:40px;}*/
	#portfolio ul li{width:50%; padding:50% 0 0;}
	#apromos ul li{width:25%;}
}


@media screen and (max-width: 960px){
	html{font-size:55%;}
	section{padding:40px 0;}
	h1{font-size:7.5em; margin-bottom:10px;}
	#accueil{padding:100px 0 !important;}
	#accueil h1{font-size:10.4em !important;}
	#apromos h2{ margin-top:30px;}
	#equipe h3{margin:0 0 10px;}
	#contact textarea{height:268px;}
	#portfolio #Container .mix a .caption{ opacity:1 !important;}
}

@media screen and (max-width: 720px){
	#contact div{display:block;}
	#contact .infos{width:100%; margin:40px 0;}
	#contact .formulaire{width:100% !important; max-width:inherit;}
	#contact .infos ul li{display:inline-block; vertical-align:top;}
	#contact .infos .adresse{width:40%;}
	#contact .infos .map{width:60%;}
	#contact .infos .fb{display:none;}
	#portfolio #Container .mix a .caption h2{font-size:10px; line-height:10px;}/* grandeur du hover texte */

/* MOBILE NAVIGATION */
nav{ height:50px; position:relative; text-align:center;}
nav ul{
	background:#d07b1f;
	max-width:inherit; width:100%; padding:0 !important;
	text-align:center;
	position: relative;
	z-index: 3; /*place au dessus de tout */
	top: 5px;
	display: none;
}
nav .mobile{ display:block; width:100%;}
nav .mobile img{ margin-top:10px;}
nav ul li{
	display:list-item;
	font-size:2.46em;
	margin:0 !important;
	padding:12px 0;
	border-top: solid 1px #000;
}
nav ul li a{
	color:#000;
	border-bottom:solid 2px rgba(0, 0, 0, 0);
	transition: border-bottom 0.3s ease-in-out; /* smooth hover */
}
nav ul li a:hover{border-bottom:solid 2px rgba(0, 0, 0, 1); }

}


@media screen and (max-device-width: 580px){
	#accueil{ background-size: 250%;}
	#accueil h1{font-size:8em !important;}
	h1 { font-size: 6em;}
	p{line-height:1.4em;}
	.sep{height:50px; background-size: 150%;}
	#portfolio h3{ font-size:2em;}
	#portfolio ul{margin-left:-20px; margin-right:-20px;}/* remove article padding */
	#services ul li{
	display:inline-block;
	font-size:5em;
	min-width:49%; margin-right:inherit; margin-top:15px;
	}
	#equipe h2{font-size:3.5em; margin:0 0;}
	#equipe h3{font-size: 2.5em; margin:10px 0 25px;}
	#equipe div p.desc{display:none;}

	#apromos h2{ margin-top:20px; font-size:2.5em;}
	#apromos p{max-width:1175px;}
	#apromos ul li{
		display:inline-block; margin-right:1%;
		width:32%; text-align:center;
	}
	#apromos ul li:last-child{margin-right:0 !important;}
	#clients ul li{
		display:inline-block; margin-right:1%;
		width:30%; text-align:center; margin-bottom:1%;
	}
	#clients ul li:last-child{margin-right:0 !important;}
	#contact .infos{ margin-top:0px;}
	#contact .infos ul li{display:block; width:100% !important;}
	#contact .adresse p{display:inline-block; width:49%; vertical-align:top;}
	#contact .adresse p:first-child{width:47% !important;}
	#contact .adresse p:last-child{width:50%;}
	#contact .adresse h2{margin-bottom:15px;}
	#contact #submit{height:28px !important;
	}
}

/* politiques */

#politique h2 {
	font-size: 32px;
	line-height: 1.3;
	margin-top: 1em;
	margin-bottom: .5em;
}

#politique p {
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
	margin-bottom: 20px;
}

#politique blockquote {
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
	margin-bottom: 20px;
	margin-left: 36px;
	font-style: italic;
}

#politique a {
	color: #fff;
	font-size: 14.672px;
	line-height: 1.5;
}

#politique ul {
	list-style-type: disc;
	margin-left: 36px;
	font-size: 14.672px;
	line-height: 1.5;
}

#politique li {
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
	margin-bottom: 10px;
}

#politique li:last-child {
	margin-bottom: 20px;
}

.policy_table {
	overflow-x:auto;
}

.policy_table table {
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: none;
	border-bottom: none;
}

.policy_table th {
	font-weight: 700;
	text-align: left;
	vertical-align: top;
	padding: 9px;
	border-top: none;
	border-left: none;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background-color: #f79021;
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
	color: #000;
}

.policy_table th:first-child {
	border-top: 0;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.policy_table td {
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	padding: 9px;
	border-top: none;
	border-left: none;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
}

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

	.policy_table th {
		white-space: nowrap;
	}

	.policy_table td {
		white-space: nowrap;
	}
}

footer a {
	color: #fff;
}

/* form_consent */

.form_consent {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 18px;
}

.form_consent input {
	flex: 0 0 14px;
	margin: 0;
	height: auto !important;
	margin-top: 4px;
}

.form_consent label {
	flex: 0 0 calc(100% - 36px);
	font-weight: 400;
	text-align: left;
	font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
	font-size: 14.672px;
	line-height: 1.5;
	margin: 0 0 20px 0;
	height: auto !important;
}

.form_consent label a {
	color: #ff9000;
}