/* POLICES */

@font-face {
   font-family: 'Roboto-Light', Arial, 'Sans serif';
   src: url(../fonts/Roboto-Light.ttf);
}

/*==============================================*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #fff;
	color: #272727;
	font-family: 'roboto-light', Arial, serif;
	font-size: 1em;
	line-height: 1.4;
	width: 100%;
	margin: auto;
}

header a {
	padding: 0 10px;
}

/*------------------- STYLE DE LA BARRE DE NAVIGATION PRINCIPALE  ------------------*/

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 6em;
	z-index: 1000;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

#logo {
	margin-left: 10%;
}

#main_nav {
	margin-right: 16%;
}

li {
	list-style: none;
	display: inline;
}

li a {
	text-decoration: none;
	color: #000;
	padding-top: 11%;
}

#main_nav a:hover {
	border-top: 7px solid #5cadd3;  
}

/*--------------------------- STYLE DU CAROUSEL  ---------------------*/
#main {
	max-width: 1920px;
	margin: auto;
}

.container {          /* Correspond à l'ensemble du slider  */
	position: relative;
	height: 500px;
	width: 100%;
	padding-top: 6em;
}

.slides {             /*  Correspond à la division qui englobe l'image   */
	position: absolute;
	width: inherit;
}

.slide img {           /* Correspond à l'image  */
	float: left;
	width: 100%;
	height: auto;
}

.slide p {
	color: #fff;
	font-size: .95em;
	margin-top: 1%;
}

.slides figcaption {
	position: absolute;
	z-index: 10;
	top: 32%;
	bottom: 0;
	left: 10%;
	width: 50%;
}

#fille h1 {
	font-size: 2rem;
	font-weight: 900;
	color: #fff;
	margin: 0;
	line-height: 1;
	text-transform: uppercase;
}

#button {				/*      bouton bleu sur le slider      */
	background-color: #5cadd3;
	font-weight: bolder;
	color: #fff;
	opacity: 0.8;
	padding: 1%;
	text-decoration: none;
}

#button:hover {
	background-color: #468CAD;
}

						/*      fleches de defilement        */
.fa-chevron-left,
.fa-chevron-right {
	color: #fff;
	font-size: 1.2rem;
	-webkit-transform: translateY(200%);
	-moz-transform: translateY(200%);
	transform: translateY(200%);
}

.right,
.left {
	z-index: 900; 
	position: absolute;	
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
	top: 40%;
}

.fa-chevron-left {
	padding-left: 20%;
}

.left {
	height: 6rem;
	width: 3rem;
	-webkit-border-radius: 0 3rem 3rem  0;
	-moz-border-radius: 0 3rem 3rem  0;
	border-radius: 0 3rem 3rem  0;
}

.fa-chevron-right {
	padding-left: 50%;
}

.right {
	height: 6rem;
	width: 3rem;
	-webkit-border-radius: 3rem 0 0 3rem;
	-moz-border-radius: 3rem 0 0 3rem;
	border-radius: 3rem 0 0 3rem;
	right: 0;
}

.right:hover {
	background-color: rgba(255,255,255,0.3);
}

.left:hover {
	background-color: rgba(255,255,255,0.3);
}

/*---------------- STYLE NOS SERVICES  ------------------*/

i {
	color: #5cadd3;
	font-size: 1.5rem;
}

h1 span {
	color: #5cadd3;
}

h2 {
	text-transform: uppercase;
	font-size: 3rem;
	margin-bottom: 15px;
}
       /* Style de la ligne et du point en décoration sous les titres  */
hr {
	background-color: lightgrey;
	position: relative;
	height: 1px;
	width: 90%;
	display: inline-block;
}

.middle_point {
	position: absolute;
	z-index: 20;
	background-color: #5cadd3;
	border: 3px solid #fff;
	height: 2%;
	width: 1%;	
	-webkit-border-radius: 100%;
    -moz-border-radius: 100%;
	border-radius: 100%;
}

.title_decoration {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 10%;
	margin: auto;
	margin-top: 0%;
	margin-bottom: 2%;
	align-items: center;
	justify-content: center;
}

     /* -------------------------------- FIN -----------------------------  */

#services h2,
.nos_projets {
	text-align: center;
}

.services,
.projets {
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
	flex-wrap: wrap;
}

.section_ss-titre {
	font-size: 1.2rem;
	width: 50%;
	margin: auto;
	margin-top: -0.5%;
	color: #888;
	font-weight: normal;
}

.img_ecran {
	width: 50%;
}

.img_ecran img {
	width: 80%;
	margin: auto;
	margin-left: 15%;
	padding-top: 4%;
}

       /* Style de la liste des services proposés avec les icones sur la gauche  */

.services_list {
	width: 50%;
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
 	padding-top: 8%;
}

.services_list li {
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
}

h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.icon_left {
	position: relative;
	width: 10%;
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 17px;
	margin-bottom: 1%;
}

.icon .fas {
	border: 1px solid lightgrey;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	border-radius: 50%;
	padding: 29%;
	font-size:2rem;
}

.blue_dot {
	position: absolute;
	right: 2px;
	font-size: 4em;
	background-color: #5cadd3;
	border: 5px solid #fff;
	height: 2%;
	width: 1%;
 	-webkit-border-radius: 100%;
    -moz-border-radius: 100%;
	border-radius: 100%;
	padding: 7%;
}

.icon {
	font-size: 2em;
	color: #5cadd3;
	margin-right: 10px;
}

.UX, .UI, .SEO {
	width: 95%;
	margin-left: 5%;
}

.UX p, .UI p, .SEO p {
	color: #888;
	font-size: 1.2rem;
}

     /* -------------------------  FIN de la section "services" -----------------------------  */

#services {
	padding-top: 20%;
	padding-bottom: 8%;
}

#projets,
#contact {
	padding-top: 6%;
}

/*---------------- STYLE NOS PROJETS  ------------------*/

#projets {
	background-color: #f5f5f5;
}

	   /* Style de la barre de navigation des projets   */
	   
.nav_projets ul {
	display: -webkit-box;
	display: -ms-flexbox; 	
	display: flex;
 	justify-content: center;
	align-items: center;
	padding: 5px 0 10px 0;
	margin-top: 3%;
}	   

.nav_projets li {
	display: inline;
} 

.nav_projets a {
	padding: 11px 15px;
	background-color:#e5e5e5;
	font-size: 1rem;
	border: 1px solid #e5e5e5;
	white-space: nowrap;  /* pour éviter que "All works" ne soit coupe en 2  */   
}

.nav_projets a:hover {
	color: #fff;
	border-bottom: 4px solid #468CAD;
	background-color: #5cadd3;
}

.nav_projets a:hover::after {
	font-family: "Font Awesome 5 Free";
	content: "\f0d7";
	position: absolute;
 	margin-top: 21px;
	margin-left: -1.7%; 
	color: #468CAD;
	font-size: 1.5rem;
	font-weight: 900;
} 

.nav_projets .first {
	-webkit-border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
	color: #fff;
	border-bottom: 4px solid #468CAD;
	background-color: #5cadd3;
}

.nav_projets .last {
	-webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
} 

.nav_projets .first:hover {
	-webkit-border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
}

.nav_projets .last:hover {
	-webkit-border-radius: 0px 3px 3px 0px;
    -moz-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
} 
/*
.arrow_down {                  petit triangle bleu  
	opacity: 0;
	margin: 10px 50px;
	border:none;
	border-top:10px solid #468CAD;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	align-items: center;
}
*/

     /* ---------------------------- FIN navigation projets -----------------------------  */

	 /* ---------------------------- Galerie realisations clients -----------------------------  */

.projets {
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: space-around;
	margin-top: 4%;
}

.projets i {
	color: #fff;
}

.projets img {
 	width: 100%;
}

.projets figure {
	position: relative;
	z-index: 1;
	margin: 1%;
	width: 23%;
}

.projets figcaption {
	position: absolute;
	z-index: 10;
	padding-top: 30px;
	margin-bottom: 1%;
	width: 100%; 
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}

.projets figure:hover figcaption {
	position: absolute;
	bottom: 0;
	display: block;
}

.projets figcaption h3,
.projets figcaption p {
	color: #fff;
	padding-left: 10px;
	font-size: 1.2em;
	line-height: 0.7;
	padding-bottom: 5%;
}

.projets figcaption h3 {
	font-weight: bold;
}

.eye {
	position: absolute;
	top: -20%;
	right: 15px;
	padding: 10px;
	font-size: 1em;
	border: 2px solid #fff;
 	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	border-radius: 50%;
	background: #5cadd3;
}

/*---------------- STYLE CONTACT  ------------------*/

#contact {
	position: relative;
}

     /* ---------------------- Style de la carte Google ----------------  */

iframe {
	position: relative;
	top: 0;
	width: 100%;
	height: 820px;
	z-index: 10;
	opacity: 0.65;
}

.map_strip {
	position: absolute;
	top: 12%;
	width: 100%;
	height: 820px;
	background-color: #98C7F0;
	z-index: 1;
}

     /* -------------------------  Style du formulaire  -------------------  */

form {
	position: absolute;
	z-index: 900;
	height: 70%;
	width: 25%;
	right: 10%;
	top: 20%;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 20px;
}

.contact_info h3 {
	font-size: 1.5rem;
	font-weight: 800;
}

address {
	font-size: 1rem;
	font-style: normal;
}

#nameinput,
#emailinput,
#subjectinput {
	width: 100%;
	border: 1px solid lightgray;
	-webkit-border-radius: 5%;
    -moz-border-radius: 5%;
	border-radius: 5%;   
	line-height: 2em;
	padding: 2%;
	margin: 3% 0;
}

textarea {
	font-family: 'Roboto-Light', Arial, 'Sans serif';
	width: 100%;
	border: 1px solid lightgray;
 	-webkit-border-radius: 3%;
	-moz-border-radius: 3%;
	border-radius: 3%;
	line-height: 2em;
	padding: 2%;
	margin: 3% 0;
}

.send {
	background-color: #5cadd3;
	border: 1px solid #5cadd3;
	border-bottom: 4px solid #468CAD;
	-webkit-border-radius: 10%;
    -moz-border-radius: 10%;
	border-radius: 10%;
	color: #fff;
	font-weight: bold;
	padding: 5px 10px;
}

/*------------------------------------------------------------------------*/
/*                               MEDIA QUERIES                            */
/*------------------------------------------------------------------------*/

	/*   pour les ecrans superieurs à 803px   */


@media screen and (min-width: 803px ) {
	.m_nav {
		display: none;
	}
}

	/*  pour les ecrans entre 602px et 802px    */

@media screen and (min-width: 602px) and (max-width: 802px) {

	header {
		display: block;
		flex-direction: column;
		max-width: 100%;
	}

	#main_nav {          /* pour cacher la navigation principale sur mobile */
		display: none;
	}

	.m_nav {             /*   pour afficher la nav speciale mobile    */
		display: flex;
	}

	.m_nav ul {
		width: 100%;
  		text-align: center;
		padding:5px 0;
	}

	.m_nav a {
		padding: 15px;
	}
	
	#logo {
		margin-left: 0px;
		justify-content: center;
		max-height: 50%;
		padding: 10px 0 0 0;
	}

	.container {
		height:20vh;
	}
	
	#fille h1 {
		font-size: 0.8em;
		padding: 0;
	}
	
	.slide p {
		font-size: 0.8em;
		margin-right: 30%;	
	}

	.button {
		float: right;
	}

	.fa-chevron-left,
	.fa-chevron-right {
		font-size: 1rem;
		-webkit-transform: translateY(145%);
		-moz-transform: translateY(145%);
		transform: translateY(145%);
	}

	.left {
		height: 4rem;
		width: 2rem;
		-webkit-border-radius: 0 2rem 2rem  0;
		-moz-border-radius: 0 2rem 2rem  0;
		border-radius: 0 2rem 2rem  0;
	}

	.fa-chevron-right {
		padding-left: 50%;
	}

	.right {
		height: 4rem;
		width: 2rem;
		-webkit-border-radius: 2rem 0 0 2rem;
		-moz-border-radius: 2rem 0 0 2rem;
		border-radius: 2rem 0 0 2rem;
	}
		
	h2 {
		font-size: 1.7rem;
	}

	.section_ss-titre {
		font-size: 1rem;
		width: 90%;
		margin: auto;
	}

	#services {
		padding-top: 35%;	
	}
	
	.services {
		justify-content: center;
	}

	.img_ecran img {
		width: 120%;
		margin: auto;
		margin-left: -24px;
	}

	.services_list {
		width: 90%;
		margin: auto;
		padding-top: 0;
	}
	
	.icon_left {
		display: none;
	}

	div .UX, .UI, .SEO {
		width: 93%;
	}

	.projets figure {
		margin: 2%;
		width: 46%;
	}

	.projets figcaption h3,
	.projets figcaption p {
		padding-left: 10px;
		font-size: 1em;
		line-height: 0.6;
		padding-bottom: 5%;
	}

	.fa-eye {
		font-size: 0.8em;
	}

    .map_strip {
	   height: 800px;
   }

    form {
		width: 90vw;
	}

}

/*  pour les ecrans entre 306px et 368px  */

@media screen and (min-width: 306px) and (max-width: 368px) {

	header {
		display: block;
		flex-direction: column;
		max-width: 100vw;
		border: 1px solid #e5e5e5;
		box-shadow: #000 0 0 5px;
	}

	#main_nav {          /* pour cacher la navigation principale sur mobile */
		display: none;
	}

	.m_nav {             /*   pour afficher la nav speciale mobile    */
		display: flex;
	}

	.navbar {
		height: 5em;
	}

	#logo {
		padding-top: 1%;
		margin: 0;
		max-width: 50vw;
	}

	.m_nav a {
		padding-top: 3%;
	}

	#fille img,
	.left,
	.right,
	.title_decoration,
	.icon_left,
	.nav_projets a:hover::after,
	#contact .map_strip {
		display: none;
	}

	#fille h1 {
		color: #5cadd3;
		font-size: 1.5rem;
		font-weight: 700;
	}

	.container {
		height: 12vh;
		margin-bottom: 15%;
	}

	.slides figcaption {
		width: 100vw;
		text-align: center;
		left: 0;
		right: 0;
		padding: 0 15px;
	}

	.slides figcaption p {
		color: #000;
	}

	#button {
		font-size: 1em;
		font-weight: 500;
		background-color: #5cadd3;
	}

	h2 {
		font-size: 1.5rem;
	}

	#services {
		padding-top: 80%;
	}

	.section_ss-titre {
		font-size: 1rem;
		width: 100vw;
		text-align: justify;
		padding: 0 5%;
	}

	div .img_ecran,
	div .services_list {
		width: 100vw;
		margin: 0;
	}

	.img_ecran img {
		margin: 0;
		width: 100vw;
	}

	.services_list {
		padding: 0;
	}

	.UX, .UI, .SEO {
		width: 100vw;
		padding: 0 5%;
		margin: 0;
	}

	.UX h3, .UI h3, .SEO h3 {
		padding-top: 5%;
	}

	.UX p, .UI p, .SEO p {
		max-width: 100vw;
		text-align: justify;
	}

	#services {
		padding-bottom: 0;
		padding-top: 35%;
	}

	.nav_projets ul{
		display: flex;
		flex-direction: column;
	}

	.nav_projets li {
		width: 100vw;
		padding: 0;
	}

	.nav_projets a {
		display: block;
		text-align: center;
		margin: 0;
	}

	.projets figure {
		margin: 2%;
		width: 96%;
	}

	.projets figure img, 
	.projets figure figcaption {
		max-width: 90vw;
		margin: auto;
	}

	.projets figcaption {
		position: absolute;
		padding-top: 20px;
		margin-bottom: 1%;
	}

	.projets figcaption h3 {
		font-size: 1em;
	}

	.projets figcaption p {
		font-size: 0.9em;
	}

   .eye {
		padding: 5px 7px;
   }

   .fa-eye {
	   font-size: 0.9em;
   }

   section #contact {
	   display: block;
	   margin-top: 0;
	   padding-top: 0;
	   max-height: 50vw;
   }

   #contact iframe {
	   width: 100vw;
	   height: auto;
	   margin-top: 150%;
	   padding-top: 20%;
	   z-index: unset;
   }

   #form {
	   width: 100vw;
	   z-index: unset;
	   right: 0;
   }

   .contact_info {
	   background-color: #98C7F0;
	   align-content: center;
   }

   .contact_info h3,
   .contact_info address {
		text-align: center;
   }

   textarea {
	   line-height: 1.5em;
	   scroll-behavior: auto;
   }
}