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

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');

@font-face {
    font-family: 'zeldaregular';
    src: url('../font/zelda_free-webfont.woff2') format('woff2'),
         url('../font/zelda_free-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

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

@font-face {
    font-family: 'arkitech_mediummedium';
    src: url('../font/arkitech_medium-webfont.woff2') format('woff2'),
         url('../font/arkitech_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'atlantic_bentleyregular';
    src: url('../font/atlantic_bentley-webfont.woff2') format('woff2'),
         url('../font/atlantic_bentley-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pistararegular';
    src: url('../font/pistara-webfont.eot');
    src: url('../font/pistara-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/pistara-webfont.woff2') format('woff2'),
         url('../font/pistara-webfont.woff') format('woff'),
         url('../font/pistara-webfont.ttf') format('truetype'),
         url('../font/pistara-webfont.svg#pistararegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

:root {
  --background: rgba(0, 214, 170, .85);
}

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

body {
	/*font-family: 'Quicksand', Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	color: #222222;
	margin: 0;
	font-family: 'Work Sans', sans-serif;
}

/*.content {
  height: 200vh;
  background-image: url(//unsplash.it/1000/1000);
  background-color: #333;
  background-blend-mode: multiply;
  background-size: cover;
  display: grid;
  place-items: center;
}*/
  
  #filtre {
  width:100%;
  height:100%;
  position:absolute;
  z-index:0;
  background-color:rgba(29,29,29,0.20); }
  
  img.superbg {
    position:fixed;
    top:0 !important;
    left:0;
    z-index:-1; }
	
	#superbg {
    position:fixed;
    top:0 !important;
    left:0; }

   #titre-accueil {
    font-size:6em;
	font-family: 'zeldaregular', Arial, Helvetica, sans-serif;
	font-weight:normal;	
	letter-spacing: 5px;
	color:#fff;
	text-align:center;
	margin-top:40px;	
	/*opacity:0;*/
	position:relative;
	z-index:1; 
	/*-webkit-animation: flash linear .1s 6;
	animation: flash linear .1s 6;
	-webkit-animation-delay: 2.5s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-delay: 2.5s;
	-moz-animation-fill-mode:forwards;*/
	 }
	 
   #production {
	font-family: 'arkitech_mediummedium';
    color:#12d3ff;
	text-align:center;
	margin-top: -60px;
    font-size: 2.85em;
   }
	 
   #titre-accueil-2 {
	font-size: 1.1em;
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;	 
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	/*opacity:0;*/
	color:#fff;
	letter-spacing: 5px;
	margin-top:-10px;
	position:relative;
	z-index:1;
	/*animation: opacity 5s ;
	-webkit-animation: opacity 5s ;
	-webkit-animation-delay: 3s;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-delay: 3s;
	-moz-animation-fill-mode:forwards;*/
	 }	
	
/*	@-webkit-keyframes flash {
		0% { opacity: 1; color:#CE0134 } 
		50% { opacity: 0; } 
		100% { opacity: 1; }
	}
	@keyframes flash {
		0% { opacity: 1; color:#CE0134 } 
		50% { opacity: 0; } 
		100% { opacity: 1; }
	}
	
	@-webkit-keyframes opacity {
		0% { opacity: 0; }  
		100% { opacity: 1; }
	}
	
	@keyframes opacity {
		0% { opacity: 0; }  
		100% { opacity: 1; }
	}*/
		
 
  #header-accueil {
	width: 100%;
	height: 90px;
	position: relative;
	z-index: 10;
 }
	#logo-accueil {
	margin-top: 180px;	
	}
	
	#logo-accueil img {
	width: 230px;
	margin-top:60px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:1;
	-webkit-animation: flip linear .8s 3;
	animation: flip linear .8s 3; 
	 }
	 
	/*@-webkit-keyframes flip {
	0% { -webkit-transform: rotateY(0deg); } 
	100% { -webkit-transform: rotateY(360deg); }
	}
	
	@keyframes flip {
	0% { transform: rotateY(0deg); }  
	100% { transform: rotateY(360deg); }
	}*/
	 
   .logo img {
	width: 130px;
	display:block;
	margin-top: -60px;
	margin-left:auto;
	margin-right:auto; }
	
	/*MENU HEADER*/
	
 header {
  width: 100%;
  height: 80px;
  display:table !important;
  background: #101e21;
  text-align: center;
  position: fixed;
  z-index: 999;
  top: 0px;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  padding-top: 40px !important;
  height: 100%;
  display: block;
  margin:auto;
  cursor:pointer;
  width: 32px;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: center;
  top: 100%;
  left: 0;
  background: #101e21;
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 700ms ease-in-out;
}

nav ul {
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }
  
  .logo {
    grid-column: 2 / 3;
  }
  
  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */
    
    /* the following lines are not from my video, but add Edge support */
    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: 18px;
    left: initial;
    /* end Edge support stuff */
    
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  nav ul {
    display: flex;
	float:right;
	margin-right: 100px;
  }
  
  nav li {
    margin-bottom: 0;
  }
  
  nav a {
    opacity: 1;
	font-size: 16px;
	margin-left: 3em;
    position: relative;
  }
  
  nav a:hover {
  color: #ffffff;
 }
  
  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: #1db9de;
    position: absolute;
    top: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  
  nav a:hover::before {
    transform: scale(1,1);
  }
}

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

nav {
  text-align: center;
  width: 100%;
}

nav ul {
  margin-top: 20px;
}

nav li {
  height:60px;
  margin-bottom: 1em;
  padding-top: 20px;
}

nav li:hover {
background-color:#ffffff;	
}
	
}
 
	/*FIN MENU HEADER*/
	
	
/*page présentation*/		

   #conteneur {
	width:100%; 
	}
	
	.marges {
	width:85%;
	height:auto;	
	margin:auto;
	display:table;
	}
	
	#presentation {
	height:800px;	
	padding: 1px;
	background: url(../images/black-background-2.jpg);
	background-size:cover;
	background-position:top center;
	}
		 		
    article h2 {
	font-size: 4em;
	color:#fff;
	text-align:center;
	letter-spacing:4px;
	margin-top: 180px;
	font-weight: normal;
	font-family: 'Bebas Neue', Arial, Helvetica, sans-serif; 
 }
   
  h1.presentation:before {
    display: none;
  }
  
  h1.presentation:after {
  display: none; }
  
  h1.presentation span {
  }

 article p {
	color: #fff;
	line-height: 26px;
	margin-top: 40px;
 }
 
 #texte-presentation {
	width:55%;
	color:#fff;
	text-align:center;
	margin:auto;
	margin-top:70px;
	text-align:justify;
 }
 
 .button {
    margin-top: 370px;
    position: absolute;
    width: 135px;
    height: 30px;
    color: #252525;
    padding-top: 12px;
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid #252525;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;		 
 }
 
 .button:hover {
background-color:#202020;
}
 
 /* On montre le premier texte */
.text-base{
   opacity:1;
}
/* On cache le second texte */
.text-hover{
   display:none;
}
/* On fait disparaitre le premier texte au passage de la souris. */
.button:hover span.text-base{
   opacity:0;
}
/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover{
   display:inherit;
   position:absolute;
   margin-left:10px;
   background-color:#202020;
   color:#fff;
}
 
 #photo-presentation {
	float:right; 
	width:400px;
	height:672px;
	margin-top: -169px;
	background:url(../images/photo-profil.png) no-repeat;
	background-size:100%;	
	background-position: center bottom;
 }
  
  #mes-services h2 {
	font-size:3.5em;
	color:#FFF;
	padding-top: 35px;
	text-align:center;
	font-weight: normal;
	font-family: 'pistararegular', Arial, Helvetica, sans-serif;
  }
  
  .titre-services-1 {
  width: 486px;
  height: 70px;
  margin: auto;
   }
   
  #ligne-titre-1 {
   height:1px;
   width:45%;
   background-color:#2db9e1;
   margin:auto;
   margin-top: -15px;  
  }
  
  #ligne-titre-2 {
   height:1px;
   width:45%;
   background-color:#fff;
   margin:auto;
   margin-top: -15px;
  }

 .titre-services-1 h1 {
	font-size:50px;
	font-family: 'Polaris', Arial, Helvetica, sans-serif;
	color:#2db9e1;
	font-weight: normal;
	text-align: center;
	letter-spacing: 12px;
 }
  
  .titre-services-2 {
  width: 540px;
  height: 46px;
  margin: auto;
  }
   
  .titre-services-2 h2 {
	font-size:50px;
	margin-top: -220px;
	font-family: 'Polaris', Arial, Helvetica, sans-serif;
	color:#FFF;
	font-weight: normal;
	text-align: center;
	letter-spacing: 12px;
	 }
 
 #webdesign {
	height:1350px; 
	background: url(../images/white-background.jpg);
	background-size:cover;
	background-position:top center;
	padding-top: 30px;
	margin-top:30px;
 }
 
 .services-webdesign {
	width: 22%;
	height: 400px;
	margin: auto;
	margin-top: 120px;
	border-radius: 15px;
	float:left;
	padding-left:15px;
	padding-right:15px;
	background: #2ceaea;
	background: -moz-linear-gradient(-45deg, #2ceaea 30%, #2db9e1 100%);
	background: -webkit-linear-gradient(-45deg, #2ceaea 30%,#2db9e1 100%);
	background: linear-gradient(135deg, #2ceaea 30%,#2db9e1 100%);
	-webkit-box-shadow: 0px 0px 40px rgba(23,180,201,0.80);
	-moz-box-shadow: 0px 0px 40px rgba(57,212,232,0.80);
	box-shadow: 0px 0px 40px rgba(23,180,201,0.80);
	transition: 0.8s ease-in-out;
 }
 
 .services-webdesign:hover {
 transform:translateY(-20px);
 -webkit-transform:translateY(-20px);
 -moz-transform:translateY(-20px);
 cursor:pointer; 	 
 }
 
 #sites-web {
 margin-left: 14%;	 
 }
 
 #responsive-design {
 margin-left: 50px;
 }
 
 #bannieres-reseaux {
 margin-left: 50px; 
 }
 
  
 #p1 {
	color:#fff;
	text-align:center;
	line-height:24px;
 }
 
 #p2, #p3 {
	color:#fff;
	text-align:center;
	margin-top:15px;
	line-height:24px; 
 }
 
  #print {
	height:1130px;
	background: url(../images/background-bleu.jpeg);
	background-size:cover;
	margin-top: 0px;
 }

  .cornered {
    width: 160px;
    height: 0px;
	margin-left:20%;
    border-bottom: 40px solid #fff;
    border-right: 40px solid #000;
}

  #identité-visuelle {
	width:40%;
	height:300px;
	margin-top: 250px;
	margin-left:6%;
	border-radius: 5px;
	border:2px solid #fff;
	box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff;
	/*background: #fff;
	background: -moz-linear-gradient(-45deg, #F5F5F5 30%, #fff 100%);
	background: -webkit-linear-gradient(-45deg, #F5F5F5 30%,#fff 100%);
	background: linear-gradient(135deg, #F5F5F5 30%,#fff 100%);*/
	transition: 1s ease-in-out;
	float:left;	 
  }
  
  #identité-visuelle:hover, #supports-communication:hover {
  transform: scale(0.95);
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  cursor:pointer; 
  }
  
  #supports-communication {
	width:40%;
	height:300px;
	margin-top: 250px;
	margin-left:54%;
	padding-top:1px;
	box-shadow: 0 0 10px #ffffff, 0 0 40px #ffffff;
	border-radius: 5px;
	border:2px solid #fff;
	/*background: #fff;
	background: -moz-linear-gradient(-45deg, #252525 30%, #000000 100%);
	background: -webkit-linear-gradient(-45deg, #252525 30%,#000000 100%);
	background: linear-gradient(135deg, #252525 30%,#000000 100%);*/
	transition: 1s ease-in-out;
  }
  
  #ligne-box {
   height:1.5px;
   width:30%;
   background-color:#fff;
   margin:auto;
   margin-top: -25px;
  }

 #ligne-1 {
	color:#fff;
	text-align:center;
	margin-top:30px; 
	line-height:35px;
	letter-spacing:3px;
	font-size:16px;
 }
 
 #ligne-2 {
	color:#fff;
	text-align:center;
	margin-top:25px; 
	line-height:30px;
	letter-spacing:3px;
	font-size:16px;
 }
 
 /*bouton contactez moi*/
 
 #bouton-contact {
 margin:auto;
 display:block !important;
 width:250px;
 top:100px;	
 margin-bottom: 100px;
 }

 a#bouton-contact{
  position: relative;
  display: inline-block;
  padding: 15px 10px;
  color: #fff;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  transition: 0.2s;
}

 a#bouton-contact:hover{
  color: #2db9e1;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 40px #fff, 0 0 80px #fff;
  transition-delay: 1s;
}

 a#bouton-contact span{
  position: absolute;
  display: block;
}

 a#bouton-contact span:nth-child(1)  {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#fff);
}

 a#bouton-contact:hover span:nth-child(1) {
  left: 100%;
  transition: 1s;
}

 a#bouton-contact span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg,transparent,#fff);
}

 a#bouton-contact:hover span:nth-child(3) {
  left: 100%;
  transition: 1s;
  transition-delay: 0.5s;
}

 a#bouton-contact span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#fff);
}

 a#bouton-contact:hover span:nth-child(2) {
  top: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}

 a#bouton-contact span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#fff);
}

 a#bouton-contact:hover span:nth-child(4) {
  bottom: 100%;
  transition: 1s;
  transition-delay: 0.75s;
}
 
 /* fin bouton contactez moi*/
 
/*fin de la page présentation*/
 
/*page portfolio*/

  h1.one {
	font-size:4.5em;
	color:#2F363A;
	margin-top: 150px;
	text-align:center;
    letter-spacing: 4px;
	font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
  }
  
  h1.one:before {
    content: "";
    display: block;
    border-top: solid 1px #282828;
    width: 65%;
    left: 17.5%;
    height: 1px;
    position: absolute;
    margin-top: 35px;
    z-index: 1;
  }
  
    h1.one:after {
    content: "";
	margin-top:-39px;
    display: block;
    border-top: solid 1px #282828;
    width: 60%;
	left:20%;
    height: 1px;
    position: absolute;
    z-index: 1;
  }
  
  h1.one span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
  }

#elastic_grid_demo {
margin:auto;
margin-bottom:100px;
}

.projets div {
overflow:hidden;	
}

.projets img {
transition:transform .7s;
-webkit-transition: transform .7s;
 -moz-transition-duration: transform .7s;
 -o-transition-duration: transform .7s;
 -ms-transition-duration: transform .7s;	
}

.projet:hover img{	
 opacity:0.5;
-webkit-transform: rotate(-10deg) scale(1.20); 
-moz-transform: rotate(-10deg) scale(1.20); 
-o-transform: rotate(-10deg) scale(1.20);
-ms-transform: rotate(-10deg) scale(1.20);
 }
 
 span.text-content {
  background: #091022;
  cursor: pointer;
  display: table;
  height: 217px;
  position: absolute;
  top: 324px;
  width: 347px;
  opacity: 0;
}
 
span.text-content span {
  display: table-cell;
  color: white;
  text-align: center;
  font-family: 'Quicksand';
  font-size:18px;
  vertical-align: middle;
}

 span.text-content-2 {
  background: #091022;
  cursor: pointer;
  display: table;
  height: 217px;
  position: absolute;
  top: 580px;
  width: 347px;
  opacity: 0;
}
 
span.text-content-2 span {
  display: table-cell;
  color: white;
  text-align: center;
  font-family: 'Quicksand';
  font-size:18px;
  vertical-align: middle;
}

.projet:hover span.text-content {
  opacity: 0.85;
					}

.projet:hover span.text-content-2 {
  opacity: 0.85;
					}

#projet-1 {
float:left;
height:236px;
margin-top:50px;
			}

#projet-2 {
float:left;
height:236px;
margin-top:50px;
margin-left:20px;
			}

#projet-3 {
float:left;
height:236px;
margin-top:50px;
margin-left:20px;
			}

#projet-4 {
float:left;
height:236px;
margin-top:20px;
margin-bottom:200px;
			}

#projet-5 {
float:left;
height:236px;
margin-top:20px;
margin-left:20px;
margin-bottom:200px;
			}

#projet-6 {
float:left;
height:236px;
margin-top:20px;
margin-left:20px;
margin-bottom:200px;
}
 
/*fin de la page portfolio*/

/*page contact*/

#global {
  position: absolute; 
  width: 100%;	
}

#background-contact {
height: 790px;
background: url(../images/lumieres-voitures.jpg) no-repeat; 
margin-top:80px;
margin-bottom:130px;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */	
}

#body-contact {
	color:#222222;
	margin:0;
}

  h1.contact {
	font-size: 4.5em;
	letter-spacing: 4px;
	color: #2F363A;
	margin-top: 150px;
	text-align: center;
	font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
  }
  
  h1.contact:before {
    content: "";
    display: block;
    border-top: solid 1px #282828;
    width: 65%;
    left: 17.5%;
	height: 1px;
    position: absolute;
    margin-top: 35px;
    z-index: 1;
  }
  
    h1.contact:after {
    content: "";
	margin-top:-39px;
    display: block;
    border-top: solid 1px #282828;
    width: 60%;
	left:20%;
    height: 1px;
    position: absolute;
    z-index: 1;
  }
  
  h1.contact span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
  }
  
  #msg {
  text-align:center;
  margin-top: 60px;	  
  }

.wrapper {
	max-width:600px;
	width:95%;
	margin:0 auto;
	position:relative;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact {
	background-color: rgba(213,213,213,0.80);
	padding: 25px;
	padding-right: 46px;
	margin-top: 114px;
}
#contact h3 {
	color:#991D57;
	display:block;
	font-size:28px;
}
#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}
#contact label span {
	cursor:pointer;
	color:#303030;
	display:block;
	margin:5px 0;
	margin-top: 15px;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
	width:100%;
	font-size: 14px;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 15px;
	padding:10px;
	font-family: "Quicksand", Helvetica, Arial, sans-serif;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}
#contact textarea {
	height:100px;
	max-width:100%;
}
#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:3px solid #FFFFFF;
	color:#FFF;
	margin:20px 10px 5px;
	padding:20px;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	font-size: 16px;
	border-radius:2px;
	-moz-transition:all 0.4s ease-in-out;
	-webkit-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
	background:none;
}
#contact button[type="submit"]:hover {
	background-color: #FFF;
	color: #303030;
}
#contact button[type="submit"]:active {
	box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
#contact input:focus,
#contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
    color:#888;
}
:-moz-placeholder {
    color:#888;
}
::-moz-placeholder {
    color:#888;
}
:-ms-input-placeholder {
    color:#888;
}
#infos-contact {
width:600px;
padding-top: 630px;
margin:auto; }
#icone-smartphone {
width:55px;
float:left;
margin-left: 50px; }
#icone-mail {
width:55px;
float:left;
margin-top: 13px;
margin-left: 25px; }
#tel {
float:left;
color:#FFF;
margin-top: 20px;
margin-left:3px; 
font-weight: bold;}
#e-mail {
margin-left: 15px;
margin-top: 20px;
float:left;
color:#FFF;
font-weight: bold; }
#séparateur {
width:2px;
height:56px;
background-color:#FFFFFF;
float:left;
margin-left:50px;	
}

/*fin de la page contact*/
 
/*footer*/
 
 footer {
	height: 160px;
	background-color: #29d3e8;
	clear: both;
	 	}
		
#contact-footer {
float: left;
margin-left:30%;
margin-top:10px;
text-align:center;
color:#fff;
}

#réseaux-sociaux {
float:right;
margin-right:5%;
width:220px;	 
margin-top:60px;	 
 }
 
 .icon-fb {
    font-family: 'socicon' !important;
	font-size:18px;
	color:#CF0F43;
	position: absolute;
	margin-top: 7px;
	margin-left: 7px;	
	}

	.icon-fb-2 {
    font-family: 'socicon' !important;
	font-size:30px;
	color:#fff;
	float: left;
	margin-top: 6px;
	margin-left: 6px;	
	}
	
 .icon-fb:hover, .icon-fb-2:hover, .icon-linkedin:hover, .icon-viadeo:hover, .icon-viadeo-2:hover {
	 color: #212121;
	 transition: 0.7s;
	}
	
  .icon-linkedin {
    font-family: 'socicon' !important;
	font-size:30px;
	color:#fff;
	float: left;
	margin-top: 7px;
	margin-left: 7px;	
	} 
	
   #linkedin {margin-left:75px;}
	
	#malt {
	width: 36px;
    float: left;
    margin-left: 45px;
	margin-top:5px;
	}
 
 /*fin du footer*/
 
 @media screen and (max-width:480px) {
 .menu-header li {
 padding: 18px !important;
 padding-top: 12px !important;
 padding-bottom: 12px !important;
 font-size: 16px !important; }
 #titre-accueil {font-size:2.8em;}
 #titre-accueil-2 {font-size:0.98em;letter-spacing:5px;margin-top:-35px;}
 #logo-accueil img {margin-top:60px;} 
 #séparateur {display:none;}
 #email {float:none; margin-top: 0px;}
 #icone-mail {margin-right: 15px; margin-top: -7px;}
 #icone-smartphone {margin-top: 20px; margin-left:40px;}
 #tel {margin-top: 40px; margin-left:15px;} 
 #presentation {height:1080px !important;}
 }
  
 /*version iphone*/
 
 @media screen and (max-width:640px) {
	
	.logo {
	width: 130px;
	margin: auto;
	display:block;
 	}
	.logo img {
	width: 130px;
 	margin-left:0px;
	}
	#menu, #menu-accueil {
	left: 50%;
	position: relative;	
	}
	.menu-header {
	float: right;
	position:relative;
	height: 60px !important;
	left:-50%;	
	}
	#menu-header-accueil {
	float: right;
	position:relative;
	height: 60px !important;
	left:-50%;		
	}
	.menu-header li {
	padding: 25px;
	padding-top: 12px;
    padding-bottom: 12px;
	font-size: 18px;
	letter-spacing:1px;
	}
	h1.presentation:before {
	margin-top: 28px !important; }
	h1.presentation:after {
	margin-top: -29px !important; }   
	#texte-presentation {
	text-align:justify;
	font-size: 18px;
	margin-bottom:10%;
	 }
	article p { line-height: 28px;}
   #photo-presentation {
	display:none;	
	 }
	 #mes-services h2 {
	font-size:3em; }
	#mes-services h2:before {
    margin-top: 27px;
    }
    #mes-services h2:after {
	margin-top:-30px;
    }
	#webdesign {
	height: 1930px !important;
	margin-top: 15%; }
	#webdesign p, #print p {
	font-size:18px;
	}
	#mes-services {
	height:1110px; }
	#menu-footer li {
	display:block;
	text-align: center;
	border-bottom: 1px solid #454545;
	padding: 18px;
	font-size: 24px;
	}
	#contact-footer { border-bottom:none !important;	 }
	#réseaux-sociaux { width: 168px; }
	#fb { margin-left:0}
	#malt {margin-left: 35px;}
	#linkedin, #viadeo { margin-left:60px; }
	.icon-fb, .icon-fb-2, {font-size: 28px}
	.icon-linkedin {font-size: 26px}
	#presentation {
	height:900px;	
	}
	.titre-services-1 h1 {
    font-size: 35px;
	margin-top: -60px;}
 	.titre-services-2 h2 {
    font-size: 33px;
    margin-top: -110px !important; }
	
	#identité-visuelle {
	width:77% !important;
	height:300px;
	margin-top: 250px !important;
  }
    
  #supports-communication {
	width:77% !important;
	height:300px;
	margin-top: 70px !important;
  }
  
  #motif-peinture {width:45% !important;}
  .titre-services-1, .titre-services-2 {width: auto;}
  .services-webdesign {width: 60% !important;}
  #image-responsive {width:70% !important;}
   
	 }
	 
 /* fin de la version iphone*/
 
@media screen and (max-width:614px) {
#infos-contact {width:100%;}
}
 
	 
@media screen and (max-width:810px) {
#accueil {display:none !important; }
#texte-presentation {width:70%;}
#logo-footer {display:none;}
}
	   
	/*version ipad*/
	 
 @media screen and (max-width:1024px) {	 

 h1.one:before, #mes-services h2:before {
    width: 85%; left:auto; }
 h1.contact:before {width: 85%; left:7.5%;}	
 h1.one:after, #mes-services h2:after, h1.contact:after {
 width: 80%; left:10%;  }
 
 .services-webdesign {
	width: 40%;
	height: 400px;
	margin: auto;
	display:block;
	margin-top: 120px;
	border-radius: 15px;
	float:none;
	padding-top: 20px;
	padding-left:15px;
	padding-right:15px;
 }
 
 #sites-web, #responsive-design, #bannieres-reseaux {
 margin-left: auto;	 
 }
 
 #responsive-design, #bannieres-reseaux {
  margin-top: 70px !important; 
 }
 
 #webdesign {
  height: 2100px;
 }
 
 #identité-visuelle {
	width:60%;
	height:300px;
	margin-top: 250px !important;
	margin-left:auto;
	margin:auto;
	display:block;
	float:none;	 
  }
    
  #supports-communication {
	width:60%;
	height:300px;
	margin-top: 70px !important;
	margin:auto;
	display:block;
  }
  
  #print {
	height:1450px;
 }
 
 #contact-footer {
    margin-left: 15%;
 } 
 
 /*fin de la version ipad*/
 
 @media screen and (max-width:1268px) {
 .button {
 margin-top: 400px;	 
 }	 
 }
 
 
  @media screen and (max-width:978px) {	 
 
 #photo-presentation {
	display:none; }
 article h1 {
 font-weight:bold;
 text-align:center;
 }
 h1.presentation:before {
 display: block;
 content: "";
 border-top: solid 1px #282828;
 width: 85%;
 height: 1px;
 position: absolute;
 margin-top: 32px;
 z-index: 1; }
 h1.presentation:after {
 display: block;
 content: "";
 margin-top: -36px; 
 border-top: solid 1px #282828;
 width: 80%;
 left:10%;
 height: 1px;
 position: absolute;
 z-index: 1; }
 h1.presentation span {
 background: #fff;
 padding: 0 20px;
 position: relative;
 z-index: 5;
  }
 #explosion-couleurs img {width:80% !important;}
 .titre-services-2 h2 {
    margin-top: -145px; }

 }
 
 @media screen and (min-width:1470px) {	 
 #texte-presentation {
	width:46%;  }					
 }
 
 @media screen and (min-width:1680px) {
 #background-contact {
 height: 925px; }
 #contact {
 margin-top: 172px; }
 #infos-contact {
 padding-top: 690px; }
  #mes-services {
  height:795px; }
 }
 
 @media screen and (min-width:1683px) {
 #photo-presentation {
 width:35%; }
 }
 
 @media screen and (min-width:2500px) {
 #photo-presentation {
 width:26%; }
 }
 
 @media screen and (min-width:1920px) {
 #logo-accueil img {
	margin-top:150px; }
 }