*{
	box-sizing:border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body{
	font-family: 'Montserrat', sans-serif;
}
h1{
	font-size:55px;
	color:#2fb6bc;
	margin:15px;
	font-weight:bold;
	background:white;
	padding:15px;
	font-weight:bold;
}
h1 span{
	color:#3c3c3b;
}
h2{
	font-size:55px;
	font-weight:bold;
	color:white;
	background:#3c3c3b;
	padding: 10px;
}
h2 span{
	color:#2fb6bc;
}

header{
	width:30%;
	height:100vh;
	background: #ccc url(../img/fond_header.png);
	float:left;
	padding:20px;
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	background-size: cover;
}
img[src="img/logo.png"]{
	width:95%;
}
main{
	float:left;
	width:70%;
	margin-left:30%;
}
section{
	position:absolute;
	width:70%;
	height:100vh;
}

.clear{
	clear:both;
}
nav{
	margin-top:15vh;
	margin-bottom:7vh;
}
nav .fa-bars{
	display:none;
}
nav ul{
	list-style:none;
}
nav a{
	display:block;
	width:50%;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	font-size:1.74vw;
	text-decoration:none;
	margin:0 auto 15px auto;
	color:white;
	
}
nav a:hover{
	font-weight:bold;
}
#reseauxSocio {
    display: flex;
    justify-content: center;
}
#reseauxSocio img {
    margin-left:10px;
    margin-right:10px;
}


/*******************************ACCUEIL*******************************************/
#accueil{
	background: url(../img/fond_accueil.jpg);
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:space-around;
}
a.meContacter{
	font-size:23px;
	top:70px;
	color:#0165b2 !important;
	position:relative;
	text-decoration:none;
}
#accueil i{
	position:relative;
	animation: slidein 3s infinite;

}

@keyframes slidein {
  0% {
    top: 50px;
  }

  50% {
    top: 70px;
  }

  100% {
    top: 50px;
  }
}
/********************************A PROPOS*************************************/
#propos{
	background:#e6e6e6;
}
#propos h3{
	font-size:22px;
	color:#333;
}

figure{
	display:flex;
	align-items:center;
	margin:20px;
	margin-left:15%;
	overflow:hidden;
	position:relative;
	transform:scale(0);
	margin-bottom:0;
}

figcaption{
	color:#3c3c3b;
	margin-left:5%;
	font-size:20px;
}
figcaption h4{
	font-weight:bold;

}
/********************************SAVOIR FAIRE*************************************/
#savoirFaire{
	background:#e6e6e6;
	display:flex;
	justify-content:center;
	flex-direction:column;
	padding-top:20vh;
}
/*.triangleBas{
	width: 0;
	height: 0;
	margin:auto;
	border-style: solid;
	border-width: 5vh 30px 0vh 30px;
    border-color: #333333 transparent transparent transparent;
	margin-bottom:50px;
}*/
#hautSavoir{
	width:70%;
	position:fixed;
	top:0;
	right:0;
}

#html{
	width:80%;
	margin:15px auto;
	position:relative;
}
#html span{
	padding:8px;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.html{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
#css{
	width:80%;
	margin:15px auto;
	position:relative;
}
#css span{
	padding:8px;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.css{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
#php{
	width:80%;
	margin:15px auto;
	position:relative;
}
#php span{
	padding:8px;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.php{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
#jquery{
	width:80%;
	margin:15px auto;
	position:relative;
}
#jquery span{
	padding:8px;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.jquery{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
	
#wordpress{
	width:80%;
	margin:15px auto;
	position:relative;
}
#wordpress span{
	padding:8px 0 8px 0 ;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.wordpress{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
#seo{
	width:80%;
	margin:15px auto;
	position:relative;
}
#seo span{
	padding:8px;
	background:#3c3c3b;
	display:inline-block;
	width:15%;
	text-align:center;
	z-index:1;
	position:relative;
	color:#fff;
	border-radius: 4px 0 0 4px;
}
.seo{
	background:#2fb6bc;
	color:#fff;
	width:0;
	padding:8px;
	display:inline-block;
	position:absolute;
	left:0;
	z-index:0;
	height:35px;
	text-align:right;
	border-radius: 4px;
	font-size:80%;
	}
/********************************SERVICE*************************************/
#service {
	background:#e6e6e6;
	display: flex;
    flex-wrap: wrap;

}
#service h2{
	width: 100%;
}
#service h4 {
	padding:5px 0 0 13px ;
	margin-bottom:15px;
	font-size:25px;
	color:#2fb6bc;
	font-weight:bold;
}
#service article{
	width:45%;
	margin:30px 2.5% 30px 2.5%;
	text-align:justify;
	background:#fff;
}
#service article p{
	padding:0 13px 13px 13px;
	text-align:justify;
	font-size:18px;
}
#service article p span{
	color:#a0a0a0;
}
/********************************REALISATION*************************************/
#realisation{
	background:#e6e6e6;
}
#real{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.tao{
	width:255px;
	height:255px;
	background:url(../img/pierr.png);
	background-size:cover;
	border-radius:200px;
	margin:10px 30px 15px 30px;
}
.fondReal1{
	background:rgba(255,255,255,0.9);
	width:255px;
	height:255px;
	border-radius:200px;
	font-size:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.fondReal1 a{
	color:#2fb6bc;
	text-decoration:none;
	font-size:25px;
}
.fondReal1 a h4{
	color:#3c3c3b;
	font-size:30px;
	font-weight:bold;
}
/* .fondReal1 a:hover{ */
	/* color:#0165B2; */
	/* transition:0.5s; */
/* } */
.bounce1{
	animation:0.5s bounce1;
}
@keyframes bounce1 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
} 
.grb{
	width:255px;
	height:255px;
	background:url(../img/grb.png);
	background-size:cover;
	border-radius:200px;
	margin:10px 30px 15px 30px;
}
.fondReal2{
	background:rgba(255,255,255,0.9);
	width:255px;
	height:255px;
	border-radius:200px;
	font-size:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.fondReal2 a{
	color:#2fb6bc;
	text-decoration:none;
	font-size:25px;
}
.fondReal2 a h4{
	color:#3c3c3b;
	font-size:30px;
	font-weight:bold;
}
.bounce5{
	animation:2.5s bounce5;
}
@keyframes bounce5 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
} 
.wab{
	width:255px;
	height:255px;
	background:url(../img/idex.png);
	background-size:cover;
	border-radius:200px;
	margin:10px 30px 15px 30px;
}
.fondReal3{
	background:rgba(255,255,255,0.9);
	width:255px;
	height:255px;
	border-radius:200px;
	font-size:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.fondReal3 a{
	color:#2fb6bc;
	text-decoration:none;
	font-size:25px;
}
.fondReal3 a h4{
	color:#3c3c3b;
	font-size:30px;
	font-weight:bold;
}
.bounce2{
	animation:1s bounce2;
}
@keyframes bounce2 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
.sc{
	width:255px;
	height:255px;
	background:url(../img/sc.png);
	border-radius:200px;
	background-size:cover;
	margin:10px 30px 15px 30px;
}
.fondReal4{
	background:rgba(255,255,255,0.9);
	width:255px;
	height:255px;
	border-radius:200px;
	font-size:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.fondReal4 a{
	color:#2fb6bc;
	text-decoration:none;
	font-size:25px;
}
.fondReal4 a h4{
	color:#3c3c3b;
	font-size:30px;
	font-weight:bold;
}
.bounce4{
	animation:2s bounce4;
}
@keyframes bounce4 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
.lm{
	width:255px;
	height:255px;
	background:url(../img/lm.png);
	border-radius:200px;
	background-size:cover;
	margin:10px 30px 15px 30px;
}
.fondReal5{
	background:rgba(255,255,255,0.9);
	width:255px;
	height:255px;
	border-radius:200px;
	font-size:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	text-align:center;
}
.fondReal5 a{
	color:#2fb6bc;
	text-decoration:none;
	font-size:25px;
}
.fondReal5 a h4{
	color:#3c3c3b;
	font-size:30px;
	font-weight:bold;
}
.bounce3{
	animation:1.5s bounce3;
}
@keyframes bounce3 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
.vous{
	width:255px;
	height:255px;
	background:url(../img/vous.png);
	background-size:cover;
	border-radius:200px;
	margin:10px 30px 15px 30px;
}
/* .fondReal6{ */
	/* background:rgba(51, 51, 51,0.85); */
	/* width:255px; */
	/* height:255px; */
	/* border-radius:200px; */
	/* font-size:30px; */
	/* display:flex; */
	/* align-items:center; */
	/* justify-content:center; */
	/* flex-direction:column; */
	/* text-align:center; */
/* } */
/* .fondReal6 a{ */
	/* color:white; */
	/* text-decoration:none; */
	
/* } */
/* .fondReal6 a:hover{ */
	/* color:#0165B2; */
	/* transition:0.5s; */
/* } */
.bounce6{
	animation:1.5s bounce3;
}
@keyframes bounce6 {
    0% {transform:scale(0);}
    50% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
/********************************CONSEILS*************************************/
#conseils{
	background: url(../img/fond.jpg) 0% 30%;

}
#conseils h2{

}
#conseils ul{
	list-style:none;
	padding:15px;
	font-size: 18px;
}
#conseils li{
	padding:7px 0 7px 0;
	color:#3c3c3b;
}
#conseils li i{
	color:#2fb6bc;
	font-size:110%;
}
#conseils p{
	text-align: justify;
    font-size: 18px;
}
.conseils_bloc1{
	padding: 22px 15px ;
	background:#3c3c3b;
	float:left;
	width:35%;
	margin:5vh 5% 0 10%;
	color:#fff;
}
.conseils_bloc2{
	background:#e6e6e6;
	font-weight:700;
	float:left;
	width:35%;
	margin:5vh 10% 0 5%;
}


/********************************CONTACT******************************************/
#contact{
	background: #e6e6e6;

}
iframe{
	width:100%;
	height:45vh;
	margin-top:5vh;
}
form{

	margin:0 auto;
}
.contact_bloc1{
	width:50%;
	float:left;
	padding: 50px 25px 0px 50px;
}
.contact_bloc2{
	width:50%;
	float:left;
	padding:50px 50px 0px 25px;
}
input{
	width:100%;
	background: #fff;
	border-radius:2px;
	padding:18px;
	margin-bottom:10px;
	color:#3c3c3b;
	border:none;
	font-size:18px;
}
input[type="submit"]{
	background:#2fb6bc;
	border:none;
	color:#fff;
}
input[type="submit"]:hover{
	background:#28aaaf;
	transition:0.5s;
}
textarea{
	width:100%;
	height:20vh;
	background: #e6e6e6;
	border-radius:2px;
	border:2px solid #fff;
	padding:20px;
	margin-bottom:10px;
	font-family: 'Montserrat', sans-serif;
	color:#3c3c3b;
}
#coordonnees{
	

}
#coordonnees i{
	color:#2fb6bc;
	padding-right:10px;
	font-size:120%;
}
#coordonnees p{
	font-size:19px;
	padding:10px;
}

/******************************************FOOTER*************************************/
footer{
	width:30%;
	height:7.5vh;
	position:fixed;
	left:0;
	bottom:0;
	color:#000;
	font-size:80%;

}
footer p{
	position:absolute;
	bottom:0;
	text-align:center;
	width:100%;
	color:#fff;
}


.active{
	animation:active 2s infinite;
	color:#fff;
}
@keyframes active {
    0% {transform:scale(0.8);}
    50% {transform:scale(1.2);}
    100% {transform:scale(0.8);}
} 
/*****************************************RESPONSIVE***********************************************/
@media screen and (max-width: 770px) {
	
  header {
    width:100%;
	position: inherit;
	height:auto;
  }
  img[src="img/logo.png"]{
	width: 95%;
    display: block;
    margin: 0 auto;
  }
  nav{
	margin-top:5vh;
	margin-bottom:0vh;
}
nav a {
    font-size: 20px;
}
	nav ul{
		display:none;
	}
	nav .fa-bars{
	display:block;
	cursor:pointer;
	font-size:32px;
	color:#707070;
}
	#accueil a{
		display:none;
	}
	#reseauxSocio{
		display:none;
	}
	h1{
	width:100%;
	font-size:35px;
	}
	h2{
		
	}
	h2 {
    font-size:30px;
    display: block;
    height: auto;
	padding: 5px;
}
  main{
	width:100%;
	margin-left:0;
	
  }
  section{
	width:100%;
	position: static;
	height:auto ;
	padding-bottom:50px;
}
#accueil{
	padding-bottom:110px;
	height: 76vh;
}
#propos figure{
	margin:auto;
}
#savoirFaire{
	position:relative;
}
#hautSavoir {
    width: 100%; 
    position: absolute;
    top: 0;
    right: 0;
}
#savoirFaire span>i{
	display:none;
}

#service article{
	width:100%;
	margin: 0 0 35px 0;

	
}
.conseils_bloc1 {
    
}
.conseils_bloc1 {
	height: auto;
    padding: 22px 15px;
    background: #3c3c3b;
    float: none;
    width: 95%;
    margin: 5vh auto;
    color: #fff;
}

.conseils_bloc2 {
    flex-direction:column;
	height: auto;
    float: none;
    width: 95%;
    margin: 5vh auto;
}
.conseils1, .conseils2, .conseils3{
	width:100%;
}
.contact_bloc1, .contact_bloc2{
	width:100%;
	float:none;
	
}
.contact_bloc1{
padding: 50px 25px 0px 25px;
}
.contact_bloc2 {

    padding: 50px 50px 60px 25px;
}
iframe{
	display:none;

}
  footer{
	width:100%;
	height:7.5vh;
	position: fixed;
	bottom:0;
	color:#000;
	font-size:80%;
	background:black;
	z-index:1000;
}
}
@media screen and (max-width: 1025px) {
	#savoirFaire span>i{
	display:none;
}
}