/*Definition des polices spéciales*/

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
  url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
  url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


/* Elements principaux de la page*/

#bloc_page
{
	width:1200px;
	margin: auto;
}
	
body
{
	font-family: 'Trebuchet MS', Arial, sans-serif;
	margin: auto;
}

h1
{
	display: block;
	width: 370px;
	color: white;
	text-transform: uppercase;
	margin-left: 70px;
	margin-top: 50px;
}

h2 
{
	text-align: center;
	text-align:-webkit-center;
}

div #Services
{
	display:block;
	height:40px;
}

div #Portfolio
{
	display:block;
	height:40px;
}

h3
{
	color:white;
	margin-left: 70px;
}

p
{
	text-align: left;
}

/* HEADER: Logo et Nav* >>>> VOIR LES MEDIA QUERIES PLUS BAS*/

header
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom:10px;
	position:sticky;
	position:-webkit-sticky;
	position:-o-sticky;
	top:0;
	left:0;
	z-index:999;
	background: white;
}

nav ul
	{
		list-style-type: none;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	nav li:hover a
	{
		border-top: 4px #52AFD1 solid;
		color: black;
	}
	
	nav li a
	{
		padding: 10px;
		text-decoration: none;
		color: #949398;
		font-size: 14px
	}


.topnav 
	{
	background-color: #52AFD1;
	overflow: hidden;
	margin-top:70px;
	}

	.topnav a 
	{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	}

	.topnav a:hover 
	{
    background-color: #ddd;
    color: black;
    }

	.topnav .icon 
	{
    display: none;
	}

	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon 
	{
    float: right;
    display: block;
  	}

	.topnav.responsive {position: relative; z-index:1;}
  	.topnav.responsive a.icon 
  	{
    position: absolute;
    right: 0;
    top: 0;
  	}
  	
  	.topnav.responsive a 
  	{
    float: none;
    display: block;
    text-align: left;
  	}


/* SECTION: slider, texte, bouton bleu et chevrons*/
#slideshow
{
	border: 2px white solid;
	margin-bottom: 50px;
	overflow: hidden;
	position: relative;
}

div.slider
{
	width: 100%;
	height: 400px;
	position: relative;
	overflow: hidden;
}

div.slider img
{
	width: 100%;
	display: block;
}

div.present
{
	position:absolute;
	top: 70px;
	left:20px;
}

div.present span
{
	color: #52AFD1;
}
div.present p
{
	color: white;
	font-size: 14px;
	text-align: left;
	margin-left:70px;
}

.bouton_bleu1
{
	background: #52AFD1;
	display:block;
	text-decoration: none;
	width:100px;
	height:30px;
	border-radius: 3px;
	color: white;
	padding-left:15px;
	padding-top:10px;
	margin-left:70px;
	font-size: 14px;
	border-bottom: 3px solid #3491b2;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 0px solid transparent;
}

a.bouton
{
	border:1px solid;
	opacity: 0.5;
	width: 40px;
	height:40px;
	border-radius: 50%;
	background-color: black;
}

a.boutonleft
{
	position: absolute;
	top: 180px;
	left: -20px;
}


.fa.fa-chevron-left
{
	color: white;
	position: absolute;
	top: 10px;
	left:20px;
}

a.boutonright
{
	position: absolute;
	top: 180px;
	right: -20px;
}

.fa.fa-chevron-right
{
	color: white;
	position: absolute;
	top: 10px;
	left: 10px;
}



/* SECTION: NOS SERVICES*/

.line1
{
	width: 75px;
	height: 2px;
	border: 0px solid;
	border-top: transparent;
	border-left: transparent;
	border-right: transparent;
	margin-top: 7px;
	background-color: grey;
}

.circle1
{
	background-color: #52AFD1;
	width: 15px;
	height: 15px;
	border: 1px transparent solid;
	border-radius: 100%;
}

.line2
{
	background-color: grey;
	width: 75px;
	height: 2px;
	border: 0px solid;
	border-top: transparent;
	border-left: transparent;
	border-right: transparent;
	margin-top: 7px;
}

.circle2
{
	background-color: #52AFD1;
	width: 15px;
	height: 15px;
	border: 3px white solid;
	border-radius: 100%;
}

.separator
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}


p.textservices
{
	text-align: center;
	margin-left: 60px;
	margin-right: 60px;
	font-size: 18px;
	color: #949398;
}

.main
{
	display: flex;
}

span,i
{
	color: #52AFD1;
	text-align: justify;
}

#computer
{
	width:50%;
}

ul.fa-ul
{
	width:50%;
	margin-left: 120px;
}

.fa.fa-line-chart
{
	background-color: white;
	width:30px;
	height:30px;
	border:1px grey solid;
	border-radius:50%;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:13px;
	padding-right:13px;
	float: left;
	margin-right: 20px;
	
}

.fa.fa-cubes
{
	background-color: white;
	width:30px;
	height:30px;
	border:1px grey solid;
	border-radius:50%;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:13px;
	padding-right:13px;
	float: left;
	margin-right: 20px;
	
}
.fa.fa-pie-chart
{
	background-color: white;
	width:30px;
	height:30px;
	border:1px grey solid;
	border-radius:50%;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:13px;
	padding-right:13px;
	float: left;
	margin-right: 20px;
}

h4
{
	margin-bottom: 0;
}

div.text
{
	display: flex;
	flex-direction: column;
}

.bullets
{
	display: flex;
}

.fa.ul
{
	position: relative;
	left: 0px;
	top: 0px;
	margin-right:5px;
	z-index: 1;
}

.fa.fa-circle
{
	position: absolute;
	left:50px;
	top:25px;
	z-index: 2;
}

.bullettext
{
	display: inline-flex;
	max-width: 300px;
}

p.bullettext
{
	font-size: 16px;
	margin-top: 20px;
	color: #949398;
}

/* SECTION: NOS PROJETS*/

.background
{
	background-color: #F5F5F5;
	margin-bottom: 50px;
	padding-top: 10px;
	padding-bottom: 50px;
	padding-left:10px;
	padding-right:10px;
}

p.textprojets
{
	text-align:center;
	margin-left: 60px;
	margin-right: 60px;
	font-size: 18px;
	color: #949398;
}

/*Menu Projets*/

ul.menu
{
	list-style-type: none;
	display: flex;
	justify-content: center;
	margin-left: 350px;
	width: 400px;
	margin-top: 40px;
	margin-bottom: 40px;
}

ul.menu li
{
	background-color: #E5E5E5;
	height:32px;
	padding-top:10px;
}

ul.menu li a
{
	text-decoration: none;
	color: #949398;
	padding: 10px;
	height:40px;
}

ul.menu li a:hover
{
	background: #52AFD1;
	text-decoration: none;
	border-radius: 3px;
	color: white;
	border-bottom: 3px solid #3491b2;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 0px solid transparent;
}

ul.menu li a:hover::before
{
	content:'';
	width: 0;
	height: 0;
	border-left: 10px transparent solid;
	border-right: 10px transparent solid;
	border-top: 10px #3491b2 solid;
	display: inline-block;
	vertical-align: bottom;
	position: absolute;
	margin-top: 30px;
	margin-left: 27px;
}

/*Flexbox Images Projets*/

.projects
{
	width:100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:space-around;
	align-content: space-around;
}

.projects div
{
	width:23%;
	position: relative;
}

.projects div img
{
	width: 100%;
	margin-top: 20px;
}

/*Overlay hover sur images*/

@media screen and (min-width: 1025px){
	.container:hover .overlay1
	{
		overflow: hidden;
		height: 40%;
	}
}

@media screen and (min-width: 1025px){
	.container:hover .overlay2
	{
		overflow: hidden;
		height: 40%;
	}
}

div .overlay1
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000000;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .3s ease;
	-webkit-transition: .3s ease;
	opacity: 0.6;
	margin-bottom: 3px;
	margin-left: 0px;
	bottom: 0px;
	left: 0px;
	z-index:1;
}

div.overlay1 .text p
{
	color: white;
	font-size: 18px;
	font-weight: bold;
	margin-left: 4px;
	margin-top: 1px;
}

div.overlay1 .text .description
{
	color: white;
	font-size: 16px;
	margin-left: 4px;
}
div.text
{
	width: 100%;
}
div .overlay2
{
	position: absolute;
	right: 0;
	overflow: hidden;
	transition: .3s ease;
	-webkit-transition: .3s ease;
	z-index:2;
	bottom: 23px;
	left: 230px;
	
}

div.overlay2 i
{
	border: 2px white solid;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	color: white;
	background-color: #52AFD1;
	padding-top: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	padding-right: 0px;
	position: absolute;
	
}

/* FOOTER*/

footer
{
	position: relative;
	margin-top:60px;
	margin-bottom:60px;
}

iframe
{
	position: absolute;
	width: 1200px;
}

.fond
{
	width:100%;
	height:500px;
	background-color: skyblue;
	opacity: 0.3;
}

div.form
{
	position: absolute;
	background-color: RGBA(255, 255, 255, 0.6);
	width: 300px;
	height: 470px;
	border: 1px transparent solid;
	text-align: left;
	top:10px;
	right:60px;
	margin-top: 10px;
}

#Contact
{
	font-weight: bold;
	color: black;
	margin-left: 10px;
	font-size: 1.4rem;
}

p.nameaddress
{
	margin-left: 10px;
	color: #776F6F;
}

p.nameaddress strong
{
	font-weight:bold;
}

input, textarea
{
	margin-left: 42px;
	border: 1px #949398 solid;
	border-radius: 3px;
	width: 70%;
	margin-top: 10px;
}

input
{
	height: 20px;
}

input.sendmessage

{
	background: #52AFD1;
	display:block;
	width: 100px;
	height:30px;
	font-size: 14px;
	color: white;
	margin-left: 42px;
	border-radius: 3px;
	border-bottom: 3px solid #3491b2;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-top: 0px solid transparent;
}


/* MEDIA QUERIES*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/


/*>>>>>>>> Smartphones (PORTRAIT) >>>>>>>>>*/

@media screen and (max-width:479px)

{
	#bloc_page
    {
        width: auto;
    }

    #logo
    {
    	text-align:center;
    }

	header
	{
		position:relative;
		display: block;
		margin-top:40px;
	}
	
	nav
	{
	display: none;
	}

	.topnav
	{
		display: block;
		margin-top:20px;
	}

	#slideshow
	{
		border: 2px white solid;
		position:relative;
		overflow:visible;
		margin-bottom:inherit;
		margin-top:20px;
	}

	div.slider
	{
		height: 300px;
	}
	div.slider img
	{
		width:100%;
	}

	h1
	{
		color:grey;
		width: auto;
		font-size:1rem;
		margin-left:5px;
	}

	h2.top
	{
		margin-top:50px;
	}

	div.present
	{
		margin-left: 10px;
		top: 106px;
		left: 0;
		text-align: center;
	}

	div.present span
	{
		color: #52AFD1;
		font-size:1.2rem;
	}

	div.present p
	{
		color: grey;
		font-size: 1.2rem;
		margin-left: 0px;
		text-align:center;
	}

	.bouton_bleu1
	{
    	width: 108px;
		height: 40px;
		font-size: 1.2rem;
		margin-left: 85px;
		margin: auto;
		padding: 10px 0px 0px 0px;
	}

	a.bouton
	{
		display: none;
	}

	a.boutonleft
	{
		display: none;
	}


	.fa.fa-chevron-left
	{
		display: none;
	}

	a.boutonright
	{
		display:none;
	}

	.fa.fa-chevron-right
	{
		display:none;
	}
	
	.main
	{
		display: flex;
		flex-direction: column;
	}

	#computer
	{
		display: none;
	}

	ul.fa-ul
	{
		margin-left: 1px;
		width:100%;
	}

	.fa.fa-line-chart
	{
		display: none;
	}

	.fa.fa-cubes
	{
		display: none;
	}

	.fa.fa-pie-chart
	{
		display: none;
	}

	.fa.fa-circle
	{
		display: none;
	}

	h4
	{
		text-align:center;
		font-size: 1.2rem;
	}
	
	.bullets
	{
		display: block;
	}

	.bullettext
	{
		max-width:500px;
	}
	p.bullettext
	{
		font-size:1.2rem;
		text-align: center;
	}
	
	p.textservices
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size:1.4rem;
	}

	ul.menu
	{
		display: none;
	}

	p.textprojets
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 1.3rem;
	}

	.projects 
	{
    	display: flex;
    	flex-direction: column;
    }

    .projects > div 
    {
    	width: 80%;
    	margin-left:40px;
	}

	div .overlay1
	{
		overflow: visible;
		height: 30%;
		margin-bottom: 0px;
		margin-left: 0px;
		width:100%;
	}

	div.overlay1 .text p
	{
		color: white;
		font-size: 18px;
		font-weight: bold;
		margin-left: 0px;
	}

	div.overlay1 .text .description
	{
		color: white;
		font-size: 1rem;
		margin-left: 0px;
	}

	div.text
	{
		width: 100%;
	}

	iframe
	{
		position:absolute;
		top: 700px;
		width:100%;
	}

	.fond
	{
		display: none;
	}

	div.form
	{
		border: none;
		width: 70%;
		margin-top: 0px;
	}

	#Contact
	{
		text-align: center;
		font-size: 2em;
	}
	p.nameaddress
	{
		text-align: center;
		font-size: 1.4em;
	}

	input
	{
		height: 40px;
	}
	input, textarea
	{
		margin-left: 0px;
		width: 100%;
	}

	input.sendmessage
	{
		width: 160px;
		height: 60px;
		margin-bottom: 70px;
		margin: auto;
	}

}



/*>>>>>>>>>>>>>>> Smartphones (PAYSAGE), Tablettes (PORTRAIT) et petites tablettes (PAYSAGE) >>>>>>>>>>>>>>>>>>*/

@media screen and (min-width:480px) and (max-width:760px)
{
    #bloc_page
    {
        width: auto;
    }

    #logo
    {
    	text-align:center;
    }

	header
	{
		position:relative;
		display: block;
		margin-top:40px;
	}
	
	nav
	{
	display: none;
	}

	.topnav

	{
		display: block;
		margin-top:30px;
	}

	.topnav.responsive a
	{
		text-align: center;
	}
	
	#slideshow
	{
		border: 2px white solid;
		position:relative;
		overflow:visible;
		margin-bottom:inherit;
		margin-top:60px;
	}

	div.slider
	{
		height: 300px;
	}
	div.slider img
	{
		width:100%;
	}

	h1
	{
		color:grey;
		width: auto;
		font-size:1.4rem;
		margin-left:5px;
	}

	h2.top
	{
		display: block;
		margin-top: 180px;
	}

	div.present
	{
		margin-left: 40px;
		top:240px;
	}

	div.present span
	{
		color: #52AFD1;
		font-size:1.4rem;
	}

	div.present p
	{
		color: grey;
		font-size: 1.4rem;
		margin-left: 0px;
	}

	.bouton_bleu1
	{
    	width: 108px;
    	height: 40px;
    	font-size: 1.2rem;
    	margin-left:210px;
	}

	a.bouton
	{
		display: none;
	}

	a.boutonleft
	{
		display: none;
	}


	.fa.fa-chevron-left
	{
		display: none;
	}

	a.boutonright
	{
		display:none;
	}

	.fa.fa-chevron-right
	{
		display:none;
	}

	.main
	{
		display: flex;
		flex-direction: column;
	}

	#computer
	{
		display: none;
	}

	ul.fa-ul
	{
		margin-left: 1px;
		width:100%;
	}

	.fa.fa-line-chart
	{
		display: none;
	}

	.fa.fa-cubes
	{
		display: none;
	}

	.fa.fa-pie-chart
	{
		display: none;
	}

	.fa.fa-circle
	{
		display: none;
	}

	h4
	{
		margin-left: 180px;
		font-size: 1.2rem;
	}
	
	.bullets
	{
		display: block;
		margin-left: 100px;
		margin-top:10px;
	}

	.bullettext
	{
		max-width:500px;
	}
	p.bullettext
	{
		font-size:1.2rem;
	}
	
	p.textservices
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size:1.3rem;
	}

	ul.menu
	{
		display: none;
	}

	p.textprojets
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 1.3rem;
	}

	.projects 
	{
    	width: 100%;
    	display: flex;
    	flex-direction: column;
    }

    .projects > div
	{
		width:50%;
		margin-left:150px;
	}

    
	div .overlay1
	{
		overflow: visible;
		height: 30%;
		margin-bottom: 0px;
		margin-left: 0px;
		width:100%;
	}

	div.overlay1 .text p
	{
		color: white;
		font-size: 1rem;
		font-weight: bold;
		text-align:center;
	}

	div.overlay1 .text .description
	{
		color: white;
		font-size: 1rem;
	}

	div.text
	{
		width: 100%;
	}
	
	iframe
	{
		position:absolute;
		top: 700px;
		width:100%;
	}

	.fond
	{
		display: none;
	}

	div.form
	{
		border: none;
		margin-top: 0px;
		left:150px;
	}

	#Contact
	{
		text-align: center;
		font-size: 2em;
	}

	p.nameaddress
	{
		text-align: center;
		font-size: 1.4em;
	}

	input
	{
		height: 40px;
	}
	input, textarea
	{
		margin-left: 0px;
		width: 100%;
	}

	input.sendmessage
	{
		width: 160px;
		height: 60px;
		margin-left: 75px;
		margin-bottom:70px;
	}

}

@media screen and (min-width:761px) and (max-width:1024px)
{
	
	#bloc_page
    {
        width: auto;
    }

    #logo
    {
    	text-align:center;
    }

	header
	{
		position:relative;
		display: block;
		margin-top:40px;
	}
	
	nav
	{
	display: none;
	}

	.topnav

	{
		display: block;
		margin-top:30px;
	}

	.topnav.responsive a
	{
		text-align: center;
	}
	
	#slideshow
	{
		border: 2px white solid;
		position:relative;
		overflow:visible;
		margin-bottom:inherit;
		margin-top:60px;
	}

	div.slider
	{
		height: 300px;
	}
	div.slider img
	{
		width:100%;
	}

	h1
	{
		color: grey;
		width: auto;
		font-size: 1.4rem;
		margin-left: 5px;
		margin-top: 10px;
	}

	h2.top
	{
		display: block;
		margin-top: 220px;
	}

	div.present
	{
		margin: auto;
		top: 300px;
		left: 0;
		width: 100%;
		text-align: center;
	}

	div.present span
	{
		color: #52AFD1;
		font-size:1.4rem;
	}

	div.present p
	{
		color: grey;
		font-size: 1.4rem;
		margin: auto;
		text-align: center;
	}

	.bouton_bleu1
	{
    	width: 120px;
		height: 40px;
		font-size: 1.2rem;
		margin: auto;
		text-align: center;
		margin-top: 20px;
	}

	a.bouton
	{
		display: none;
	}

	a.boutonleft
	{
		display: none;
	}


	.fa.fa-chevron-left
	{
		display: none;
	}

	a.boutonright
	{
		display:none;
	}

	.fa.fa-chevron-right
	{
		display:none;
	}

	.main
	{
		display: flex;
		flex-direction: column;
	}

	#computer
	{
		display: none;
	}

	ul.fa-ul
	{
		margin-left: 1px;
		width:100%;
	}

	.fa.fa-line-chart
	{
		display: none;
	}

	.fa.fa-cubes
	{
		display: none;
	}

	.fa.fa-pie-chart
	{
		display: none;
	}

	.fa.fa-circle
	{
		display: none;
	}

	h4
	{
		font-size: 1.2rem;
	}
	
	.bullets
	{
		display: block;
		margin-left: 100px;
		margin-top:10px;
	}

	.bullettext
	{
		max-width:500px;
	}
	p.bullettext
	{
		font-size:1.2rem;
		margin-left:170px;
	}
	
	p.textservices
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size:1.3rem;
	}

	ul.menu
	{
		display: none;
	}

	p.textprojets
	{
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		font-size: 1.3rem;
	}

	.projects 
	{
    	width: 100%;
    	display: flex;
    	flex-direction: row;
    }

    .projects > div 
    {
   		flex: 1 0 50%;
	}

	div .overlay1
	{
		overflow: visible;
		height: 30%;
		margin-bottom: 0px;
		margin-left: 0px;
		width:100%;
	}

	div.overlay1 .text p
	{
		color: white;
		font-size: 1rem;
		font-weight: bold;
		text-align:center;
	}

	div.overlay1 .text .description
	{
		color: white;
		font-size: 1rem;
	}

	div.text
	{
		width: 100%;
	}
	
	iframe
	{
		position:absolute;
		top: 700px;
		width:100%;
	}

	.fond
	{
		display: none;
	}

	div.form
	{
		border: none;
		width: 70%;
		margin-top: 0px;
		left:150px;
	}

	#Contact
	{
		text-align: center;
		font-size: 2em;
	}

	p.nameaddress
	{
		text-align: center;
		font-size: 1.4em;
	}

	input
	{
		height: 40px;
	}
	input, textarea
	{
		margin-left: 0px;
		width: 100%;
	}

	input.sendmessage
	{
		width: 160px;
		height: 60px;
		margin: auto;
		margin-bottom: 70px;
	}

}

/*>>>>>>>>>> BIGGER SCREENS >>>>>>>>>>*/

@media screen and (min-width:1025px)
{
	

  	nav
  	{
    	margin-right:100px;
  	}
  	nav ul
  	{
	    list-style-type: none;
	    display: flex;
	    flex-direction:row;
  	}

  	nav li:hover a
  	{
    	border-top: 4px #52AFD1 solid;
    	color: black;
  	}
  
  	nav li a
  	{
    	padding: 10px;
    	text-decoration: none;
    	color: #949398;
    	font-size: 14px
  	}

	.topnav
	{
		display: none;
	}
}