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

}

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

body
{
	
	margin: 0px;
	width: 100%;
}

h1
{
	font-family: 'robotoblack';
	font-size: 2.5em;
}

h2
{
	font-family: 'robotoblack';
	font-size: 1.5em;
}

p
{
	font-family: 'robotomedium';
	color: rgb(144,147,150);
	font-size: 0.9em;
}

nav li
{
	font-family: 'robotomedium';
	color: rgb(144,147,150);
	font-size: 0.9em;
} 

*
{
	
}

/*header*/
header
{
	display: flex;
	position: relative;
	background: url('image/image_header.jpg') no-repeat bottom;
	background-size: 100%; 
	width: 100%;
	height: 590px;
}
#en_tete
{
	display: flex;
	width: 100%;
	height: 100px;
	justify-content: space-between;
	align-items: center; 
	position: fixed;
	background: white;
	z-index: 10;
	top: 0px;
}

#logo
{
	padding-left: 50px;
}

nav
{
   padding-right: 50px;
}

nav ul 
{
	display: flex;
	list-style: none;
}

nav li
{
	padding-left: 15px;
}

.nav_header1
{
	color: rgb(92,173,211);
	border-top: 3px solid;
	padding-top: 38px
}

.nav_header:hover
{
	color: rgb(92,173,211);
	border-top: 3px solid;
	padding-top: 38px;
}

a
{
	color: rgb(144,147,150);
	text-decoration: none; 
}

/*section: bannère*/
#texte_portfolio
{
	display: flex;
	align-items: center;
	padding: 80px 0px 0px 50px;
	width: 100%;
}

#texte_banniere 
{
	padding: 50px 0px 0px 50px;
	width: 100%;
}

.white
{
	color: white;
}

#webagency
{
	color: rgb(92,173,211);
}

#infos
{
	display: flex;
	background-color: rgb(92,173,211);
	width: 140px;
	height: 50px;
	justify-content: center;
	align-items: center;
}

#circle
{
	position: absolute;
	width:70px;
	height: 35px;
	border-top-left-radius: 140px; 
	border-top-right-radius: 140px;
	transform: rotate(90deg);
	background-color: rgb(66,66,70);
	bottom: 260px;
	left: -17px;
	
}
#circle1
{
	position: absolute;
	width:70px;
	height: 35px;
	border-top-left-radius: 140px; 
	border-top-right-radius: 140px;
	transform: rotate(-90deg);
	background-color: rgb(66,66,70);
	bottom: 260px;
	right: -17px; 
}

.fleche_left
{
	position: absolute;
	font-size: 30px;
	color: white;
	bottom: 260px;
	left: 7px;
}

.fleche_right
{
	position: absolute;
	font-size: 30px;
	color: white;
	bottom: 260px;
	right: 7px;
}

#timeline
{ 
	display: flex;
	width: 150px;
	border: 2px solid rgb(92,173,211);
	position: absolute;
	margin-top: -4px;
	z-index: 3;
}

.trait_service hr,.trait_projet hr 
{
	width: 8%;
}
/*section: nos services*/
section
{
	display: flex;
}

#nos_services
{
	position: relative;
	width: 100%;
}

#h_p1
{
	text-align: center;
	justify-content: center; 
}

#pc_liste_section1
{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#image_pc
{
    width: 500px;
    margin-top: 50px;
}

.liste_span
{
	font-weight: bold;
	font-family: 'robotoblack';
}

.service_liste
{
	display: flex;
}

.trait_service
{
	position: relative;
}

#cercle_trait_service
{
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgb(92,173,211);
	border: 3px solid white;
	left: 49.5%;
	top: -10px;
}

.liste_section1
{
   max-width: 570px;
}

.conteneur_cercle
{
	position: relative;
	right: 100px;
}

.cercle1_service
{
	position: absolute;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background-color: white;
	border: 1px solid rgb(222,223,224);
}


.cercle2_service
{
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgb(92,173,211);
	border: 3px solid white;
	left: 58px;
	top: 25px;
}

.conteneur_cercle .fas
{
	position: absolute;
	color: rgb(92,173,211);
	font-size: 25px;
	left: 20px;
	top: 20px;
}


/*section: nos projets*/
#section2
{
	display: flex;
	flex-direction: column;
	background-color: rgb(245,245,245);
	margin-top: 40px;
	position: relative;
	width: 100%;
}

#h_p2
{
	text-align: center;
	justify-content: center;
	margin-bottom: 30px;
}

.trait_projet
{
	position: relative;
}

#cercle_trait_projet
{
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: rgb(92,173,211);
	border: 3px solid white;
    left: 49.5%;
    top: -10px; 
}

.nav_nos_projets
{
	display: flex;
	margin: auto;
	padding: 18px 0px 15px 0px;
    background-color: rgb(229,229,229)
}

.conteneur_nav
{
	position: relative;
}

.fleche_all_works
{
	position: absolute;
	bottom: -34px;
	left: 46%;
	color: rgb(70,140,173);
	font-size: 23px;
} 

.all_works
{
   display: inline;
   background-color: rgb(92,173,211);
   color: white;
   border-bottom: 3px solid rgb(70,140,173); 
   padding: 18px 15px 15px 15px
}

.fleche_nav
{
	display: none;
	position:absolute;
	bottom: -34px;
	left: 46%;
	color: rgb(70,140,173);
	font-size: 23px;
}

.conteneur_nav:hover .fleche_nav
{
	display: block;
}

.liste_projet
{
	display: inline;
	padding: 18px 15px 15px 15px;
}

.liste_projet:hover
{
	color: white;
	background-color: rgb(92,173,211);
	border-bottom: 3px solid rgb(70,140,173); 
}

#projets_portfolio
{
	display:flex;
	margin-top: 30px;
	justify-content: center;
}

#conteneur_portfolio
{
	display: flex;
	flex-wrap: wrap;
	max-width: 1240px;
	justify-content: center;
}

.portfolio
{
	padding-top: 0px;
	position: relative;
	margin: 15px;
}

.portfolio img
{
 width: 270px;
}

.figcap
{
	display: none;
	position: absolute;
	bottom: 0;
	color: white;
	left:0; right: 0;
	padding-left: 20px;
}

.figcap p
{
	color: white;
}

.portfolio img:hover ~ .figcap, .figcap:hover 
{
	display: block;
	background-color: rgba(0,0,0,.5);
}



.circ_projet2
{
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid white;
	background-color: rgb(92,173,211);
	bottom: 85px;
	right: 10px;
}

.eyes
{
	position: absolute;
	top: -8px;
	right: 23px;
}
                
                /*laptop*/
	@media all and (min-width: 769px) and (max-width: 1200px)
	{
	 	h1 
	 	{
	 		font-size: 2em;
	 	} 

	 	   /*header*/
	 	header
	 	{
	 		height: 430px;
	 	}

		 #circle
		{
			bottom: 160px;
			
			
		}
		#circle1
		{
			bottom: 160px; 
		}

		.fleche_left
		{
			bottom: 160px;
		}

		.fleche_right
		{
			bottom: 160px;
		}
		  /*nos services*/
	 	.pc_liste_section1
	 	{ 
	 		
	 	}
	 	.liste_section1
	 	{
	 		width: 300px;
	 	}
	 	#image_pc
	 	{
	 		margin: 0px 0px 50px 0px;
	 	}

	 	/*nos projets*/
	 	
		.portfolio img
		{
		    width: 170px;
		}

		#conteneur_portfolio
	    {
			display: flex;
			flex-wrap: wrap;
			max-width: 999px;
			justify-content: center;
		}
	}

	@media all and (min-width: 1540px) and (max-width: 2560px)
	{
	 	.portfolio img
	    {
	        width: 410px;
	    }

	    #conteneur_portfolio
   		{
			display: flex;
			flex-wrap: wrap;
			max-width: 1760px;
			justify-content: center;
		}

	}

/*Carte et formulaire*/

#carte_formulaire
{
	position: relative;
	width: 100%;
}
#carte_google
{
	position: absolute;
	margin-top: 50px;
	width: 100%;
}

iframe
{
	width: 100%;
}

#fond_blue
{
	width: 100%; 
	height: 559.6px;
	position: absolute;
	background-color: rgba(153,217,234,0.3);
	margin-top: 50px;
	pointer-events: none;
}

#formulaire
{
	position: absolute;
	right: 150px;
	top: 70px;
	background-color: rgb(233,242,252);
	margin-top: 40px;
	opacity: 0.9;
	padding: 0px 20px 0px 20px;
}
textarea
{
	width: 282px;
	color: rgb(144,147,150);
	font-family: 'robotomedium'; 
}


.send_message
{
	background-color: rgb(92,173,211);
	width: 100px;
	padding: 5px 0px 5px 0px;
}

          /*.......ECRAN TABLETTE......*/

@media all and (max-width: 805px)
{
	h1
	{
		font-size: 2em;
	}

	h2
	{
		font-size: 1.5em;
	}

	p
	{
		font-size: 1em;
	}

	.nos_services ~p
	{
		font-size: 1em;
	}

	nav li
	{
		font-size: 1.3em;
	}

	.liste_span
	{
		font-size: 1em;
	}

         /*..........header...........*/
	#en_tete
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
		position: absolute;
    }

	#logo img
    {
	padding: 30px 0px 0px 10px;
    }

	header nav ul 
	{
		flex-direction: column;
	}

	header nav
	{
		text-align: left;
		padding-top: 50px;
	}
	.nav_header1
    {
	color: rgb(92,173,211);
	border-top: 3px solid;
	
   }

	.nav_header:hover
	{
		border-top: none;
	}

	    /*......section: banniére......*/

	header
	{
		background: none;
		height: 550px;
	}
    
    #texte-portfolio
    {
    
    }
	#texte_banniere 
    {
	
    }
	.white
	{
		color: rgb(144,147,150);
	}

	 #infos
	{
		width: 200px;
	}

	#infos .white
	{
		color: #fff;
	}

	#circle
	{
		display: none;
	}

	#circle1
	{
		display: none;
	}

	.fleche_left
	{
		display: none;
	}

	.fleche_right
	{
		display: none;
	}

	#timeline
    { 
	display: none;
    }
    

        /*.......nos service........*/

        #nos_services
    {
	
	}

	#pc_liste_section1
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 0px;
		padding-left: 0px;
	}

	#image_pc
	{
		margin-left: 0px;
	}

	.liste_section1
	{
		padding-left: 20px;
		max-width: 460px;

	}


	/*.......Nos projets..........*/
	#section2
	{
		justify-content: center;
		width: 100%;
	}

	#projets_portfolio
	{
		justify-content: space-around;
		margin-left: 0px;
	}

	.portfolio img
	{
	  width: 310px;
	}

	.figcap
	{
		display: block;
		position: absolute;
		bottom: 0;
		color: white;
		left:0; right: 0;
		padding-left: 20px;
		background-color: rgba(0,0,0,.5);
		height: 40%;
		font-size: 1em;
		padding-bottom: 27px;
		
	}

	.portfolio img:hover ~ .figcap, .figcap:hover 
	{
		display: none;
	}

	.circ_projet2
	{
		
		bottom: 90px;
		right: 10px;
	}

	#circ_projet1
	{
		display: none;
	}


	/*..........Carte et formulaire........*/

	iframe
	{
		height: 700px;
	}

	#fond_blue
    {
	height: 700px;
    }


	input
	{
		width: 500px;
		height: 35px;
		font-size: 0.8em;
	} 

	textarea
	{
		width: 498px;
		height: 200px;
		font-size: 0.8em;
	}

	.send_message
	{
		width: 180px;
		padding: 2px;
	}

	#formulaire
	{
		right: 120px;
		top: 750px;
	}
}

          /*.......ECRAN MOBILE......*/

@media all and (max-width: 426px)
{
    h1
	{
		font-size: 1.4em;
	}

	h2
	{
		font-size: 1.4em;
	}

	p
	{
		font-size: 1em;
	}

	.nos_services ~p
	{
		font-size: 1em;
	}

	nav li
	{
		font-size: 1em;
	}

	.liste_span
	{
		font-size: 1em;
	}

         /*..........header...........*/
	#en_tete
	{
		display: flex;
		width: 100%;
		justify-content: space-between;
		position: absolute;
	}

	#logo
	{
		padding: 0px 0px 40px 0px;
		width: 135px;
	}

	#logo img
    {
	    margin: 30px 0px 0px 20px;
	    width: 180px;
    }

	header nav ul 
	{
		flex-direction: column;
	}

	header nav
	{
		text-align: left;
		padding: 80px 30px 0px 0px;
		margin: 0px;
	}

	.nav_header:hover
	{
		border-top: none;
	}

	#timeline
    { 
	display: none;
    }

	    /*......section: banniére......*/

	header
	{
		background: none;
		height: 440px;
		width: 100%
	}

	#texte_portfolio
	{
		padding: 80px 0px 0px 20px;
	}

	#texte_banniere 
    {
	   padding: 0px;
    }
	.white
	{
		color: rgb(144,147,150);
	}

	 #infos
	{
		width: 200px;
	}

	#infos .white
	{
		color: #fff;
	}

	#circle
	{
		display: none;
	}

	#circle1
	{
		display: none;
	}

	.fleche_left
	{
		display: none;
	}

	.fleche_right
	{
		display: none;
	}
    

        /*.......nos service........*/

    #nos_services
    {
        margin-top: 0px;
    }

	#pc_liste_section1
	{
		display: flex;
		flex-direction: column;
	}

	#image_pc
	{
		width: 309px;
		height: 200px;
		margin: 0px;
	}
	#image_pc img
	{
		width: 100%;
	}

	.liste_section1
	{
		margin: 0px;
		width: 120px;
		padding-right: 0px;
	}

	.portfolio
	{
		margin: 0px;
	}

	.trait_service hr,.trait_projet hr 
	{
		width: 30%;
	}
     
    
	/*.......Nos projets..........*/
	#section2
	{
		justify-content: center;
	}

	#h_p2
    {
    	;
    } 
    .nav_nos_projets
	{
		padding: 18px 0px 15px 0px;
		max-width: 276px;
	}

	.conteneur_nav
	{
		width: 68px;
		margin: auto;
	} 

	.all_works
	{
	   padding: 18px 0px 15px 0px
	}

	.liste_projet
	{
		padding: 18px 20px 15px 10px;
	}

	#projets_portfolio
	{
		justify-content: space-around;
	}

	.portfolio
	{
		margin-left: 0px;
	}

	.portfolio img
	{
	  width: 305px;
	}

	.figcap
	{
		display: block;
		position: absolute;
		bottom: 0;
		color: white;
		left:0; right: 0;
		padding-left: 20px;
		background-color: rgba(0,0,0,.5);
		height: 33%;
		font-size: 1em;
		
	}

	.portfolio img:hover ~ .figcap, .figcap:hover 
	{
		display: none;
	}

	.circ_projet2
	{
		
		bottom: 73px;
		right: 10px;
	}

	#circ_projet1
	{
		display: none;
	}


	/*..........Carte et formulaire........*/

	iframe
	{
		height: 400px;
	}

	#fond_blue
    {
	height: 400px;
    }


	input
	{
		width: 100%;
		height: 35px;
		font-size: 0.8em;
	} 

	textarea
	{
		width: 98.5%;
		height: 100px;
		font-size: 0.8em;
	}

	.send_message
	{
		width: 130px;
		padding: 2px;
	}

	#formulaire
	{
		right: 5%; left: 5%;
		top: 430px;
	} 
}