@font-face
{

	font-family: 'FontAwesome';
	src : url('Fonts/fontawesome-webfont.eot') format('eot'),
	url('Fonts/fontawesome-webfont.svg') format('svg'),
	url('Fonts/fontawesome-webfont.ttf') format('truetype'),
	url('Fonts/fontawesome-webfont.woff') format('woff');

}

@font-face
{
	font-family: 'Roboto-Bold';
	src : url('Fonts/Roboto-Bold.ttf') format('truetype');

}

@font-face
{
	font-family: 'Roboto-Light';
	src : url('Fonts/Roboto-Light.ttf') format('truetype');
}

@font-face
{
	font-family: 'Glyphicons-haflings';
	src : url('Fonts/glyphicons-haflings-regular.eot') format('eot'),
	url('Fonts/glyphicons-haflings-regular.svg') format('svg'),
	url('Fonts/glyphicons-haflings-regular.ttf') format('truetype'),
	url('Fonts/glyphicons-haflings-regular.woff') format('woff');
}


body
{
	margin : 0px;
}

header
{
	position : fixed;
	display: flex;
	width : 100%;
	background-color: rgb(255,255,255);
	left : 0;
	top : 0;
	justify-content: space-between;
	z-index: 1000;
}

#logo
{

	margin-left: 100px;
	margin-top : 20px;

}

nav ul
{
	display:flex;
	font-family: 'Roboto-Light', Arial, serif;
	margin-right: 70px;
	margin-bottom : 20px;
	margin-top : 0px;
}

nav ul li

{
	display : flex;
	margin-left: 20px;
}

nav ul li a
{
	text-decoration: none;
	border-top: 4px transparent solid;
	padding-top: 40px;
	color : black;
}

nav ul li a:hover
{

	border-top : solid rgb(138,196,224);
	font-weight : bold;
}

.contener_slideshow
{

	padding-top : 110px;
	position : relative;
}


.slid_1 img
{

	width : 100%;
}

.slid_2
{

	display : none;
}

.informations_slideshow
{

	position : absolute;
	top : 50%;
	padding-left : 70px;
}

.title_slider
{

	color : rgb(92,173,211);
}

.informations_slideshow h2
{

	font-family: 'Roboto-Bold';
	color : white;
	font-size : 25px;
	width : 535px;
	margin-bottom : 5px;
	margin-top : 0;
}

.informations_slideshow p
{

	font-family : 'Roboto-Bold';
	color : white;
	font-size : 15px;
	margin-bottom : 25px;
}

.informations_slideshow a
{

	text-decoration: none;
	font-family: 'Roboto-Bold';
	background-color: rgb(92,173,211);
	padding : 15px;
	color : white;
	border-radius : 4px;
	border-bottom : solid rgb(68,148,187);

}

.fa-angle-left:before
{

	font-family:'FontAwesome';
	content : "\f104";
}

.fleche_gauche
{

	background-color : rgba(0,0,0,0.3);
	padding : 20px;
	left : 0px;
	border-radius : 0 40px 40px 0;
}


.fa-angle-right:before
{

	font-family : 'FontAwesome';
	content : "\f105";
}


.fleche_droite
{
	right : 0px;
	background-color: rgba(0,0,0,0.3);
	padding : 20px;
	border-radius : 40px 0 0 40px;
	
}

.fleche_gauche, .fleche_droite 
{
    cursor: pointer;
    position: absolute;
    top: 50%;
    color: white;
    font-size: 30px;
    transform: translateY(50%)
}

.informations_slideshow
{

	position : absolute;
	top : 50%;
	padding-left : 70px;
}

.line_slider
{

	background-color: black;
	height : 5px;
	width : 100%;
	position : absolute;
	bottom : 4px;
	opacity : 0.10;
}

.line_bottom_slider
{

	background-color: #5cacd2;
	height : 5px;
	width : 10%;
	position : absolute;
	bottom : 4px;
}

#nos_services
{

	margin-top: 80px;
}

.titre_services
{
	position : relative;
	text-align: center;
	font-family: 'Roboto-Light', Arial, serif;
}

.titre_services h2
{

	font-size : 35px;
	font-family: 'Roboto-Bold';

}

.blue_point_title
{

	background-color : rgb(92,173,211);
	display : block;
	padding : 8px;
	border-radius: 50%;
	border : 1px solid white;
	position : absolute;
	right : 50%;
	top : 50px;
	border : 2px solid white;
}

.trait
{

	border-top: 1px solid rgba(163,163,163,0.35);
	margin-left: auto;
	margin-right:auto;
	position : relative;
	bottom : 11px;
	width : 150px;
	z-index : 1;
}

.titre_services p
{

	font-size : 15px;
}

#conteneur
{
	display: flex;
}


.left
{

	position : relative;
}

.blue_point
{

	background-color : rgb(92,173,211);
	display : block;
	padding : 8px;
	border-radius: 50%;
	border : 1px solid white;
	position : absolute;
	right : -8px;
	top : 11px;
	border : 2px solid white;
}

.right
{

	position : relative;
	bottom : 35px;
	padding : 18px;
}

.services
{
	font-family: 'Roboto-Light', Arial, serif;
	margin-left: 100px;
	margin-top : 100px;
}

.services h2
{

	font-family: 'Roboto-Bold';
	font-size : 18px;
	padding-left : 17px;
}

.services p
{

	font-size : 15px;
	padding-left : 17px;

}

.service
{

	display : flex;
}


.icon_graph::before{

	font-family: 'FontAwesome';
	content : "\f201";
}

.icon_graph
{

	font-size : 30px;
	color : rgb(92,173,211);
	border : 1px solid rgba(163,163,163,0.35);
	border-radius : 50%;
	padding : 12px;
}

.icon_cubes::before{


	font-family : 'FontAwesome';
	content : "\f1b3";
}

.icon_cubes
{

	font-size : 30px;
	color : rgb(92,173,211);
	border : 1px solid rgba(163,163,163,0.35);
	border-radius : 50%;
	padding : 10px;
}

.icon_chart-pie:before{

	font-family : 'FontAwesome';
	content : "\f200";
}

.icon_chart-pie
{
	font-size : 30px;
	color : rgb(92,173,211);
	border : 1px solid rgba(163,163,163,0.35);
	border-radius : 50%;
	padding : 15px;

}

.header_projets
{

	position : relative;
}

#nos_projets
{
	text-align: center;
	font-family: 'Roboto-Light', Arial, serif;
	background-color: #F5F5F5;
	padding-top : 10px;
}

#nos_projets h2

{

	font-family: 'Roboto-Bold';
	font-size : 35px;

}

.titres_projets ul
{
	display:flex;
	justify-content: center;
	list-style: none;
	padding : 10px;

}

.titres_projets li
{

	display : flex;
}


.titres_projets li a
{
	text-decoration: none;
	background-color : #E5E5E5;
	padding : 10px;
	border : solid #E5E5E5;
	font-family: 'Roboto-Bold';
	color : black;
	border-bottom: solid transparent;
}


.titres_projets li a:hover
{

	position : relative;
	background-color: rgb(92,173,211);
	color : white;
	border : solid rgb(92,173,211);
	border-bottom: solid rgb(105,149,192);
}

.titres_projets li a:hover:after
{
	position : absolute;
	content : "";
	width : 0;
	border : 8px solid transparent;
	border-top : 8px solid rgb(105,149,192);
	left : 45%;
	top : 105%;
}


.titres_projets li:first-child a
{

	border-radius : 5px 0 0 5px;
}

.titres_projets li:last-child a
{

	border-radius : 0 5px 5px 0;
}

.projets
{
	display:flex;
	flex-wrap: wrap;
	margin-bottom : 50px;
	justify-content: center;
}

.projet
{
	width : 20%;
	margin-bottom: 10px;
	position : relative;
	margin: 15px;
}

.projet:hover .description
{
	display : block;
	background-color : rgba(0,0,0,0.4);
	cursor : pointer;
}

.projet:hover .eye
{
	display : block;
	z-index : 2;
}

.description
{
	position : absolute;
	color : white;
	bottom : 0;
	height : 45%;
	width : 100%;
	display : none;
}


.eye::before
{
	font-family: 'FontAwesome';
	content : "\f06e";
}

.eye
{

	position : absolute;
	font-size : 20px;
	border : solid white;
	padding : 10px;
	border-radius : 50%;
	background-color : rgb(92,173,211);
	color : white;
	right : 15px;
	top : -25px;
}

.description h3
{

	font-size: 20px;
	font-family : 'Roboto-Bold';
}


.projet img
{
	width :100%;
	height : 100%;
}

footer
{

	position : relative;
}

.map
{

	background-color: rgba(92,173,211);
	height : 560px;
}

iframe
{

	opacity : 0.8;
	width : 100%;
	height : 560px;
	border : 0;
}

#formulaire
{

	position : absolute;
	background-color: rgba(232, 242, 252, 0.80);
	right : 100px;
	top : 100px;
	padding-left : 15px;
	padding-right : 15px;
	padding-top : 5px;
	padding-bottom: 10px;
	width : 265px;
}

#formulaire h1
{
	font-size: 22px;
	font-family: 'Roboto-Bold';
}

#formulaire p
{

	font-size : 14px;
	margin-bottom : 15px;
	font-family : 'Roboto-Light';
	color : black;
}

form
{

	display : flex;
	flex-direction: column;

}

form input
{
	margin : 2px;
	padding : 5px;
	border-radius : 4px;
}


input[type="text"]
{

	border : 1px solid rgb(168,168,168);
	margin-bottom: 10px;
	font-family: 'Roboto-Light';
}

input[type="email"]
{

	border : 1px solid rgb(168,168,168);
	margin-bottom: 10px;
	font-family : 'Roboto-Light';
}


textarea
{

	height: 100px;
	margin-bottom: 10px;
	border : 1px solid rgb(168,168,168);
	border-radius: 4px;
	font-family: 'Roboto-Light';
	color : grey;
}

input[type="submit"]
{

	font-family : 'Roboto-Light';
	background-color: rgb(92,173,211);
	color : white;
	font-weight: bold;
	border : solid rgb(92,173,211);
	border-bottom : solid rgb(75,138,168);
	width : 40%;
}


@media all and (max-width : 1024px)
{
	nav
	{
		margin : auto;
		
	}

	.projet
	{

		width : 40%;
	}

}


@media all and (max-width : 700px)
{

	header
	{

		position : initial;
	}

	#logo
	{
		margin : auto;

	}

	nav
	{
		margin : auto;
		justify-content: center;
		
	}

	nav ul
	{

		flex-wrap: wrap;
	}

	nav ul li
	{

		padding : 4px;
	}

	nav ul li a:hover
	{
		border : none;
	}

	nav ul li a
	{

		border : 1px solid rgb(92,173,211);
		padding : 10px;
		border-radius : 5px;
	}

	nav ul li a:hover
	{

		border : 1px solid rgb(92,173,211);
	}

	.slid_1 img
	{

		display : none;
	}


	.informations_slideshow
	{

		display : none;
	}

	.ecran img
	{

		margin : auto;
		width : 100%;
	}

	.nos_services
	{

		margin-top : 0;
	}
	
	.services
	{
		margin : auto;
	}


	header
	{
		flex-direction: column;
	}

	#conteneur
	{
		flex-direction: column;
	}

	.header_projets
	{
		flex-direction: column;
	}

	.titres_projets
	 {
	 	margin : auto;
	 }

	 .projets
	 {
	 	flex-direction: column;
	 	margin : auto;
	 }

	 .projet
	 {
	 	width : calc(100% - 30px);
	 }

	 .description
	 {
		display : block;
		background-color : rgba(0,0,0,0.4);
		position : absolute;
		bottom : 4px;
	 }

	 .projet .description
	 {

	 	width : 100%;
	 }

	 #formulaire
	 {
	 	position : initial;
	 	width : 100%;
	 	padding : 0;
	 	margin : 0;
	 }

	 #slider
	 {

	 	display: none;
	 }

	.map
	 {

	 	display: none;
	 }


}