@charset "utf-8";
/* CSS Document */

/*=================================================================================== Général ===================================================================================*/

body{
	padding:0px;
	margin:0px;
	background:#3c3c3b;
	font-family: 'Source Sans Pro', sans-serif;
	text-align:center;
	font-size:18px;
	line-height:25px;
}

*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



h1, h3, h4, h5, h6, p, div{
	padding:0px;
	margin:0px;
	width:100%;
	float:left;
}

div.timeline{
	padding:0px;
	margin:0px;
	width:100%;
	float:none!important;
}
div.timeline a{
	color:#fff;
	font-weight: bold;
	text-decoration: underline;
}
div.timeline a:hover{
	color:#3c3c3b;
}
main a, footer a{
	color:#07bbe2;
	text-decoration:none;
}

main a:hover, footer a:hover{
	color:#0f9ebf;
	text-decoration:underline;
}

br{
	line-height:30px;
}

/*=================================================================================== Header ===================================================================================*/

header{
	position:relative;
}

.logo-header{
	position:absolute;
	right:15.75%;
	top:10vh;
	width:300px;
	height:300px;
	z-index:100 !important;
	background:rgba(255,255,255,0.5);
	border-radius:300px;
}

.logo-header img{
	width:70%;
	margin-top:10%;
	display: block;
	margin: 0 auto;
	padding-top: 69px;
}

.baseline{
	width:40%;
	left:15%;
	position:absolute !important;
	top:18vh;
	background:rgba(60, 60, 59, 0.8);
	z-index:300;
	border-radius:10px;
	padding-top:.5em;
	padding-bottom:.5em;
	color:white
}

.baseline h1{
	margin-bottom:.5em;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
}

/*=================================================================================== Nav ===================================================================================*/

nav{
	width:80%;
	top:0;
	left:10%;
	position:fixed;
	z-index:999
}

#menu{
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
	width:100%;
	top:0;
	font-size:18px;
	line-height:45px;
	left:0;
	text-align:left
}

.menu-links {
	display:inline-block;
	float: left;
	width:16.66%;
	background:rgba(0,0,0,0.8);
	box-sizing:border-box;
	padding-left:1%;
}

.menu-links:hover{
	background:rgba(0,0,0,1);
}

.menu-links a {
	display:block;
	color: #fff;
	text-decoration: none;
	width:100%
}

.menu-links ul {
	display: none;
	padding:0px !important;
	margin:0px !important
}

.menu-links ul li {
	display: block;
	float: none;
	padding:0px;
}

.menu-links ul li:before{
	font-family:'FontAwesome';
	content:'\f105';
	float:left;
	margin-right:3%;
	color:#07bbe2;
}

#menu li a:hover + .hidden, .hidden:hover {
	display: block;
}

.show-menu {
	text-decoration: none;
	color: #fff;
	text-align: center;
	display: none;
	background:rgba(0,0,0,0.8);
	font-size:18px;
	line-height:45px;
}

.show-menu i{
	margin-left:5%;
}

.show-menu em{
	font-style:normal;
	font-size:22px;
}

nav input[type=checkbox]{
	display: none;
}

nav input[type=checkbox]:checked ~ #menu{
	display: block;
}

@media screen and (max-width : 640px){
	nav{
		width:100%;
		left:0
	}
	#menu {
		position: static;
		display: none;
		width:100% !important;
		left:0;
		right:0;
		margin-top:47px;
	}
	
	#menu li {
		margin-bottom: 1px;
		width:100%;
	}
	
	.show-menu {
		display:block;
		position:fixed;
		top:0;
		left:0;
		width:100%;
	}
}

/*=================================================================================== Cover ===================================================================================*/

.cover{
	height:60vh;
	padding:0px;
	overflow:hidden;
	z-index:0 !important;
	float:left;
	position:absolute;
	top:-2.55vh;
}

/*=================================================================================== Main ===================================================================================*/

main{
	width:80%;
	margin-left:10%;
	margin-right:10%;
	background:#fff;
	text-align:left;
	box-sizing:border-box;
	/*padding-bottom:1em;*/
	float:left;
	padding-left:5%;
	padding-right:5%;
	padding-top:2.5em;
	-webkit-box-shadow: 0 2px 4px 2px #706f6f;
	box-shadow: 0 2px 4px 2px #706f6f;
	position:relative;
	margin-top:57vh
}

.presentation-agence, .services{
	width:100%;
	float:left;
	margin-bottom:4em;
}

.presentation-agence h2, .services h2, .titre-border, .contact h2{
	border-bottom:1px dotted #07bbe2;
	padding-bottom:.5em;
	margin-bottom:1em;
}

.presentation-agence h3, .services h3, .titre-border, .contact h3{
	border-bottom:1px dotted #07bbe2;
	padding-bottom:.5em;
	margin-bottom:1em;
}

.presentation-agence h3{
	margin-bottom:.5em;
}

.competences{
	list-style:none;
	padding:10px;
	margin:0px;
	width:100%;
	box-sizing:border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}

.competences li{
	width:30%;
	box-sizing:border-box;
	margin-bottom:2.5em;
	text-align: justify;
}

.competences li img{
	width:90%;
	height:50px;
	margin-left:10%;
}

.competences li strong{
	width:100%;
	float:left;
	margin-top:.4em;
	margin-bottom:10px;
}

.competences li br{
	line-height:25px;
	text-align: justify;
}

.presentation-agence ul{
	padding-left:0px !important;
	margin-bottom:1.5em;
	float:left;
}

.lien-quote{
	width:100%;
	float:left;
	font-size:25px;
	margin-top:1em;
	font-weight:normal;
}

/*=================================================================================== Services ===================================================================================*/

.services{
	margin-bottom:2em !important;
	border-bottom:1px dotted black;
	padding-bottom:1em;
	position:relative
}

.services:last-child{
	border-bottom:none;
}

.services h2{
	width:80%;
	position:relative;
}

.logo-competence{
	width:10%;
	position:absolute;
	top:2em;
	right:5%;
}

.services p{
	width:80%;
	float:left;
	margin-bottom:1.5em;
}

.services ul, .presentation-agence li{
	width:80%;
	float:left;
	list-style:none;
	padding:0px;
	margin:0px;
	padding-left:2%;
	margin-bottom:0px !important;
}

.services h3{
	margin-bottom:.5em;
}

.services ul li:before, .presentation-agence ul li:before{
	font-family:'FontAwesome';
	content:'\f111';
	margin-right:.5em;
	float:left;
	font-size:8px;
	color:#07bbe2;
	
}

.services ul li:last-child, .presentation-agence ul li:last-child{
	width:100%;
	float:left;
	margin-bottom:0px !important;
}

.services blockquote{
	width:100%;
	float:left;
	text-align:center;
	font-size:25px;
	margin-top:1.5em;
	margin-bottom:3em;
}
.photo-produit{
	width:20%;
	float:left;
}

.photo-produit img{
	width:100%;
}

.produit{
	width:100%;
	float:left;
	text-align:center;
}

.solutions-sites{
	list-style:none;
	padding:0px;
	width:80% !important;
	margin-left:7% !important;
}

.solutions-sites li{
	width:33.3333% !important;
	float:left;
	box-sizing:border-box;
	padding-left:1%;
	padding-right:1%;
}

.solutions-sites img{
	width:100%;
}

.solutions-sites li:before{
	content:normal !important;
	margin-right:0px !important;
}

.activation h2, .activation p, .activation ul{
	width:100%;
}

.activation p{
	margin-bottom:.2em !important;
}
.activation.annuaireVO img{
	width: 350px;
}
.activation h3{
	margin-bottom:.2em !important;
	margin-top:1.5em;
}
.activation img{
	width: 40%;
}
.activation .imgMax{
	max-width:100%;
	width: auto!important;
}
.activation p:last-child{
	margin-top: 1em;
	text-align: justify;
}

.texte-petit{
	font-size:16px;
}
.photoVincent{
	/*margin-right:20px;*/
	float:left;
	width:20%;
}
.photoVincent+div{
	width:76%;
	float:left;
	text-align: left;
}
@media screen and (max-width: 680px){
	.photoVincent{
		width:100%;
		text-align: center;
	}
	.photoVincent+div{
		width: 100%;
	}
}
/*=================================================================================== Références ===================================================================================*/

.titre-border, .contact h2{
	width:100%;
}

.references-desktop .reference{
	width:30%;
	float:left;
	position:relative;
	margin-right:5%;
	padding-bottom:0px !important;
	height:205px !important;
	margin-bottom:2em;
	-webkit-box-shadow: 0 2px 4px 2px #c6c6c6;
	box-shadow: 0 2px 4px 2px #c6c6c6;
	overflow:hidden
}

.references-desktop .reference img{
	width:100%;
	height:100%;
}

.references-desktop .reference a{
	color:white;
	width:100%;
	height:100% !important;
	padding:0px !important;
	margin:0px !important
}

.references-desktop .reference a:hover{
	color:white;
	text-decoration:none;
}

.references-desktop .reference h3{
	position:relative;
	top:0;
	left:0;
	background:rgba(60, 60, 59, 0.6);
	text-align:center;
	height:15%;
	font-size:15px;
}

.references-desktop .reference ul{
	list-style:none;
	padding:0px;
	margin:0px;
	background:rgba(60, 60, 59, 0.6);
	position:absolute;
	top:15%;
	height:85%;
	width:100%;
	padding-top:.8em;
	font-size:12px;
	display:none;
	line-height:20px;
}

.references-desktop .reference:hover ul{
	display:inherit;
}

.references-desktop .reference li{
	color:white;
}

.references-desktop .reference li:before, .references-mobile .reference li:before{
	content:'+';
	margin-left:1%;
	margin-right:1.5%;
}

.references-desktop .reference:nth-child(3), .references-desktop .reference:nth-child(6), .references-desktop .reference:nth-child(9), .references-desktop .reference:nth-child(12), .references-desktop .reference:nth-child(15), .references-desktop .reference:nth-child(18), .references-desktop .reference:nth-child(21), .references-desktop .reference:nth-child(24){
	margin-right:0px !important;
}

.references-mobile{
	display:none;
}

/*=================================================================================== Contact ===================================================================================*/

.contact{
	width:100%;
	float:left;
}

.contact form{
	width:70%;
	float:left;
	margin-left:15%;
	margin-bottom:1.5em;
}

form input, form textarea, form input[type=text], form input[type=email], form textarea{
	width:100%;
	border:1px solid #c6c6c6;
	border-radius:5px;
	padding:.2em;
}

form input[type=checkbox]{
	width:auto !important;
}

form li:last-child{
	margin-top:8px;
}

form textarea{
	height:250px;
}

form ul{
	width:100%;
	float:left;
	list-style:none;
	padding:0px;
	margin:0px;
}

form ul li{
	float:left;
}

.form-col1{
	width:30%;
}

.form-col2{
	width:70%;
}


.zone-txt{
	margin-top:.5em !important;
}
.formH3{
	margin-top:20px;
}

.formInput input[type="radio"]{
	width:auto;
	margin-right:20px;
	margin-bottom:10px;
}
.formulaireContact fieldset{
	border:none;
}
.formulaireContact fieldset:first-child label{
	display:inline-block;
	width:30%;
}
.formulaireContact fieldset:first-child input{
	width:70%;
}
.formulaireContact fieldset:nth-child(2) input[type="radio"]{
	width:3%;
}
.formulaireContact fieldset:last-child textarea{
	margin-bottom:20px;
}
.formulaireContact fieldset:last-child input{
	margin-top:10px;
}
.formulaireContact .captcha{
	text-align: center;
}

@media screen and (max-width: 680px){
	.formulaireContact fieldset:first-child label, .formulaireContact fieldset:first-child input{
		width:100%;
	}
	.formulaireContact fieldset:nth-child(2) input[type="radio"] {
		width: 5%;
	}
}

.callbackForm{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center;padding-bottom:2em;}
.callbackForm > *{width:70%}
.callbackForm > p{margin-bottom:2em;}
.callbackForm > ul > li{display: flex;justify-content: space-between;width:100%;margin-bottom:1em;}
.callbackForm > ul > li > label{width:30%;text-align:left;}
.callbackForm > ul > li ul{display:flex;flex-direction:column}
.callbackForm > ul > li ul li{width:100%;display: flex;}
.callbackForm > ul > li ul li input[type="radio"]{width:auto;}
.callbackForm button{margin-top:2em;}
form.callbackForm li:last-child{margin-top:inherit}
/*=================================================================================== Boutons ===================================================================================*/

.btn{
	float:right;
	background:#3c3c3b;
	color:white;
	clear:both;
	border:1px solid transparent;
	padding:.5em;
	border-radius:5px;
	font-size:18px;
}

.btn a{
	color:white;
}

.btn a:hover{
	color:white;
	text-decoration:none;
}

.btn:hover{
	background:#646363;
	border:1px solid #c6c6c6;
	cursor:pointer
}

.btn:active{
	background:#2e2d2c;
}

/*=================================================================================== Footer ===================================================================================*/

footer{
	width:100%;
	float:left;
	background:#e3e3e3;
	box-sizing:border-box;
	text-align:left;
	padding-top:1.5em;
	padding-bottom:0px;
	border-top:1px solid black;
}

footer h2{
	text-transform:uppercase;
	font-size:18px;
}

.footer-col{
	width:16%;
	float:left;
	padding-left:1em;
	padding-right:1em;
	padding-bottom:1em;
	box-sizing:border-box;
}

.footer-col:first-child{
	margin-left:10%;
	width:35%;
}
.footer-col:nth-child(2){
	margin-left:-1%;
}
.footer-col:nth-child(3){
	margin-left:-1%;
}
.footer-col:nth-child(4){
	margin-left:-1%;
}

.footer-col ul{
	list-style:none;
	padding:0px;
	padding-left:.4em;
}

.footer-col li:before{
	font-family:'FontAwesome';
	content:'\f0da';
	color:#07bbe2;
	margin-right:.3em;
}

footer li a{
	color:black;
	text-decoration:none;
}

footer li a:hover{
	color:#07bbe2;
	text-decoration:underline;
}

.footer-infos{
	text-align:center;
	width:100%;
	background:#3c3c3b;
	border-top:1px solid #878787;
	padding-top:1em;
	padding-bottom:1.5em;
	color:#ededed
}

.footer-infos a{
	color:#c6c6c6;
}

.footer-infos a:hover{
	color:#a8a8a7;
	text-decoration:none;
}

/*=================================================================================== Mobile ===================================================================================*/
@media screen and (max-width:1200px){
	.competences li{width: 45%;}
}
@media screen and (max-width:640px){
	main{
		width:100%;
		margin-left:0px;
		margin-right:0px;
		margin-top:30vh
	}
	
	.cover{
		height:40vh;
	}
	
	.footer-col{
		width:100%;
	}
	
	.footer-col:first-child{
		margin-left:0px;
		width:100%;
		padding-left:1em !important;
		padding-right:1em !important;
	}
	
	.logo-header img{
		padding-top: 32px!important;
		
	}
	
	.baseline{
		width:100%;
		left:0;
		padding-left:5%;
		padding-right:5%;
		position:relative !important;
		top:28vh;
	}
	
	.baseline h1{
		font-size:20px;
	}
	
	.logo-header{
		left:28%;
		top:5vh;
		width:150px;
		height:150px;
	}
	.competences li{
		width:100%;
	}
	
	.logo-competence{
		width:60%;
		float:left;
		clear:both !important;
		position:inherit;
		margin-left:20%;
		top:0;
		right:0;
	}
	
	.services h2, .services p, .services ul{
		width:100%;
	}
	
	.services blockquote{
		width:80% !important;
		margin-left:0px !important;
	}
	
	.photo-produit{
		width:50%;
		margin-left:25%;
	}
	
	.solutions-sites li{
		width:60% !important;
		margin-left:30%;
		clear:both;
		padding-left:0px !important
	}
	
	.solutions-sites{
		margin-left:0px !important;
	}
	
	.services .btn{
		width:100%;
	}
	
	.references-desktop{
		display:none;
	}
	
	.references-mobile{
		display:inherit;
	}
	
	.references-mobile .reference{
		width:100%;
		border:1px solid #c6c6c6;
		-webkit-box-shadow: 0 2px 4px 2px #c6c6c6;
		box-shadow: 0 2px 4px 2px #c6c6c6;
		margin-bottom:1.5em;
		float:left;
		background:rgba(60, 60, 59, 1);
	}
	
	.references-mobile .reference img{
		width:100%;
		margin-bottom:0px !important
	}
	
	.references-mobile .reference a{
		color:white;
	}
	
	.references-mobile .reference a:hover{
		text-decoration:none;
	}
	
	.references-mobile .reference ul{
		list-style:none;
		padding:.5em;
		margin:0px;
		padding-top:.5em;
		padding-bottom:.5em;
		background:rgba(60, 60, 59, 1);
		margin-top:0px !important
		
	}
	
	.references-mobile .reference h3{
		text-align:center;
		padding-top:.5em;
		padding-bottom:.5em;
		background:rgba(60, 60, 59, 1);
	}
	
	.contact form{
		width:100% !important;
		margin-left:0px;
	}
	
	.form-col1, .form-col2{
		width:100%;
		float:left;
		clear:both
	}
	
	.baseline p{
		display:none;
	}

	.competences li{width:100%;}
}