@font-face{
	font-family: "Roboto black";
	src: url(fonts/Roboto-Black.ttf);
}

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
}

body{
	color: rgb(100%, 100%, 100%);
	font-family: 'Roboto', sans-serif;
	color: black;
	margin: 0;
	font-size: 0.9em;
}

h1{
	font-family: "Roboto black";
	font-size: 3em;
	margin-bottom: 1em;
	margin-top: 0;
}

@media screen and (max-width:990px)
{
	h1{
		font-size: 250%;
	}
}

h2{
	font-family: "Roboto black";
	font-size: 2em;
	margin-bottom: 1em;
}

h3{
	margin: 0 0 1% 0;
}

#accueil, #slider, #services, #portfolio, #contact{
	width: 100%;
}

#slider, #services, #separation, #portfolio, #contact{
	position: relative;
	top: 83px;
}

#accueil{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	position: fixed;
	z-index: 10;
	background-color: white;
	box-shadow: 0 0 10px #cecece inset;
}

#navbar{
	margin: 0;
	background-color: transparent;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	max-width: 30%;
}

#logo{
	margin: 0;
	padding: 1%;
	width: 20%;
}

#logo img{
	width: 100%;
}

nav a{
	list-style: none;
	display: inline-block;
	color: rgb(58%, 58%, 58%);
	text-align: center;
	text-decoration: none;
}

#accbtn{
	color: rgb(58%, 58%, 58%);
	display: inline-block;
	text-align: center;
	border-top: solid 0.2em rgb(36%, 68%, 83%);
	text-decoration: none;
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

.navbutton{
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
	border-top: solid 0.2em rgb(100%, 100%, 100%);
}

.navbutton:hover, .navbutton:focus, .navbutton:active{
	color: rgb(0,0,0);
	border-top: solid 0.2em rgb(36%, 68%, 83%);
	padding-top: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

@media screen and (max-width:768px)
{
	#accueil{
		align-items: center;
		z-index: 10;
		position: relative;
	}
	#slider, #services, #separation, #portfolio, #contact{
	position: relative;
	top: 0;
}
		#logo{
		margin-left: 5px;
		width: 50%;
	}
	#navbar{
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 5%;
		margin-bottom: 5%;
		padding-left: 5%;
		border-left: solid 0.2em rgb(36%, 68%, 83%);
	}
	#accbtn, .navbutton{
		border-right: solid 0.2em white;
		padding: 0 1em 0 0;
		border-top: none;
	}
	nav div a{
		line-height: 1.5em;
	}
	#accbtn:hover, #accbtn:focus, #accbtn:active, .navbutton:hover, .navbutton:focus, .navbutton:active{
		border-right: solid 0.2em rgb(36%, 68%, 83%);
		border-top: none;
		box-sizing: border-box;
		padding: 0 1em 0 0;
	}

}

#slider{
	background: url(img/bg1.jpg) no-repeat center scroll;
	-webkit-background-size: cover;
	background-size: cover;
	height: 40em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

#slidercont{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
}

#leftarrowcont{
	background-color: rgba(13%, 15%, 16%, .6);
	border-radius: 0 4em 4em 0;
	height: 4em;
	width: 2em;
	display: flex;
}

#rightarrowcont{
	background-color: rgba(13%, 15%, 16%, .6);
	border-radius: 4em 0 0 4em;
	height: 4em;
	width: 2em;
	display: flex;
}

#leftarrowcont, #rightarrowcont{
	position: relative;
	top: 8em;
}

#leftarrow, #rightarrow{
	color: white;
	margin: auto;
	font-size: 2em;
}

#sldtext{
	position: relative;
	right: 20%;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	margin-left: 10%;
	margin-bottom: 10%;
	color: white;
	width: 35%;
}

#h1span{
	color: rgb(36%, 68%, 83%);
}

.sldbtn{
	color: white;
	text-decoration: none;
	display: block;
	width: 20%;
	height: 2em;
	text-align: center;
	-webkit-transform: perspective(2px) translateZ(0);
	transform: perspective(10px) translateZ(0);
	position: relative;
	box-shadow: 0px 0.3em #468CAD;
	background-color: rgb(36%, 68%, 83%);
	border-radius: 0.3em;
	color: white;
  	padding: 0 0.5em 0 0.5em;
  	margin-top: 2em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
}

.sldbtn:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	left: calc(40% - 10px);
	bottom: 0;
	border-width: 1.5em 1.5em 0 1.5em;
	border-color: rgb(36%, 68%, 83%) transparent transparent transparent;
}

.sldbtn:hover:before, .sldbtn:focus:before, .sldbtn:active:before {
	-webkit-transform: translateY(10px);
	transform: translateY(15px);
}

#tout{
	width: 100%;
	height: 0.5em;
	position: relative;
	padding: 0;
	display: flex;
	flex-direction: row;
}

#couldroite{
	background: linear-gradient(to right,rgba(0,0,0,.3),rgba(0,0,0,0));
	width: 90%;
	height:0.5em;
	margin: 0;
}
#coulgauche{
	background: #5CADD3;
	width:10%;
	height:0.5em;
	margin: 0;
}

@media screen and (max-width:360px)
{
	#slider{
		height: 42%;
		justify-content: flex-start;
		padding-top: 5%;
	}
	#leftarrowcont, #rightarrowcont{
		display: none;
	}
	#sldtext{
		position: relative;
		right: 0;
		width: 80%;
		margin-left: 30px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		vertical-align: top;
	}
	h1{
		font-size: 25px;
		margin: 0;
	}
	#sldtext p{
		margin: 10px 0 0 0;
		width: 66%;
	}
	.sldbtn{
	width: 100%;
	height: 2em;
	text-align: center;
	box-shadow: 0px 0.3em #468CAD;
	background-color: rgb(36%, 68%, 83%);
	border-radius: 0.3em;
	color: white;
  	padding: 0 0.5em 0 0.5em;
  	margin-top: 2em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
	}
	#tout{
		position: absolute;
		bottom: 0px;
	}
}

@media screen and (min-width:361px) and (max-width:768px)
{
	#slider{
		height: 36%;
		justify-content: flex-start;
		padding-top: 5%;
	}
	#sldtext{
		width: 67%;
		position: relative;
		right: 0;
		margin-left: 30px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		vertical-align: top;
	}
	#leftarrowcont, #rightarrowcont{
		display: none;
	}
	h1{
		font-size: 25px;
		margin: 0;
	}
	#sldtext p{
		margin: 10px 0 0 0;
		width: 66%;
	}
	.sldbtn{
	width: 100%;
	height: 2em;
	text-align: center;
	box-shadow: 0px 0.3em #468CAD;
	background-color: rgb(36%, 68%, 83%);
	border-radius: 0.3em;
	color: white;
  	padding: 0 0.5em 0 0.5em;
  	margin-top: 2em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
	}
}

#services{
	margin-top: 3%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.lineball{
	width: 15%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

.trait{
	width: 40%;
	height: 0.15em;
	background-color: #EBEBEB;
	float: left;
}

.rondbleu{
	background-color: rgb(36%, 68%, 83%);
	border: white solid 7px;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	display: inline-block;
}

#serv_intro{
	width: 55%;
}

#serv_intro p{
	text-align: center;
}

#servq, .nom{
	font-style: italic;
	font-size: 0.85em;
	text-align: center;
}

.nom{
	font-weight: bold;
	margin-left: 1%;
}

#servcontent{
	text-align: center;
	margin-top: 2%;
}

#servcontent img, .domaines{
	display: inline-block;
	vertical-align: middle;
}

#mainfeature{
	width: 30%;
}

.domaines{
	width: 55%;
}

.serv{
	margin-top: 2em;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

.serv_text{
	width: 80%;
}

.fullpicto{
	width: 15%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.picto{
	width: 90%;
	border: 0.15em solid #E7E7E7;
	border-radius: 50%;
	height: 4em;
	width: 4em;
	display: flex;
	float: left;
}

.picto i{
	font-size: 2em;
	color: rgb(36%, 68%, 83%);
	margin: auto;
}

.fullpicto .rondbleu{
	width: 1em;
	height: 1em;
	border: white solid 8px;
	position: relative;
	right: 1.2em;
}

.serv_text p{
	text-align: justify;
	margin: 0;
}

#separation{
	margin: auto;
	width: 100%;
	height: 5%;
	margin-top: 2rem;
	background-image: linear-gradient(to top, rgba(245, 245, 245, 1),rgba(245, 245, 245, 0));
}

@media screen and (max-width:768px)
{
	.lineball{
	width: 50%;
	}
	#serv_intro{
		width: 83%;
	}
	#serv_intro p{
		text-align: justify;
	}
	#servcontent{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
	#servcontent img, .domaines{
		display: block;
	}
	#mainfeature{
		width: 90%;
	}
	.domaines{
		width: 83%;
	}
	.serv{
		margin-top: 2em;
	}
	.serv_text{
		width: 100%;
		margin-left: 0;
	}
	.fullpicto{
		display: none;
	}
}

#portfolio{
	background-color: #F5F5F5;
	padding: 0 0 3% 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#portfolio .lineball .rondbleu{
	border: rgb(96%, 96%, 96%) solid 7px;
}

#portfoliotext{
	width: 55%;
	text-align: center;
}
#portfolio nav{
	display: flex;
	flex-direction: row;
	margin: 2% 0 3% 0;
}

#portfolio nav a{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.probtnactiv {
	-webkit-transform: perspective(2px) translateZ(0);
	transform: perspective(10px) translateZ(0);
	position: relative;
	box-shadow: 0px 0.3em #468CAD;
	background-color: rgb(36%, 68%, 83%);
	border-radius: 0.3em 0 0 0.3em;
	color: white;
  	padding: 0 0.5em 0 0.5em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;

}

.probtnactiv:before {
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	left: calc(40% - 10px);
	bottom: 0;
	border-width: 1.5em 1.5em 0 1.5em;
	border-color: rgb(36%, 68%, 83%) transparent transparent transparent;
}

.probtnactiv:hover:before, .probtnactiv:focus:before, .probtnactiv:active:before {
	-webkit-transform: translateY(10px);
	transform: translateY(15px);
}

.probtn, .probtnright{
	background-color: #E5E5E5;
	box-shadow: 0px 0.3em #E5E5E5;
	color: black;
	padding: 0 0.5em 0 0.5em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
  	-webkit-transform: perspective(2px) translateZ(0);
	transform: perspective(10px) translateZ(0);
}

.probtnright{
	border-radius: 0 0.3em 0.3em 0;
}

.probtn:hover, .probtnright:hover{
	box-shadow: 0px 0.3em #468CAD;
	background-color: rgb(36%, 68%, 83%);
	color: white;
  	padding: 0 0.5em 0 0.5em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
}

.probtn:before, .probtnright:before{
	pointer-events: none;
	position: absolute;
	z-index: -1;
	content: '';
	border-style: solid;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	left: calc(40% - 10px);
	bottom: 0;
	border-width: 1.5em 1.5em 0 1.5em;
	border-color: #E5E5E5 transparent transparent transparent;
}

.probtn:hover:before, .probtnright:hover:before{
	-webkit-transform: translateY(10px);
	transform: translateY(15px);
	border-color: rgb(36%, 68%, 83%) transparent transparent transparent;
}

#gallery{
	width: 90%;
	height: 47em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
}

#proj1, #proj2, #proj3, #proj4, #proj5, #proj6, #proj7, #proj8, #proj9{
	height: 15em;
	width: 24%;
	background: no-repeat center scroll;
	-webkit-background-size: cover;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

}

#proj1{background-image: url(img/01.jpg);}
#proj2{background-image: url(img/02.jpg);}
#proj3{background-image: url(img/03.jpg);}
#proj4{background-image: url(img/04.jpg);}
#proj5{background-image: url(img/05.jpg);}
#proj6{background-image: url(img/06.jpg);}
#proj7{background-image: url(img/07.jpg);}
#proj8{background-image: url(img/08.jpg);}
#proj9{background-image: url(img/09.jpg);}

.seebloccontainer{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	opacity: 0;
	transition-duration: 1.5s;
}

.seebloc{
	background-color: rgba(39, 39, 39, 0.75);
	color: white;
	height: auto;
	font-size: 0.8em;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 3%;
}

.seebloccontainer:hover, .seebloccontainer:focus, .seebloccontainer:active{
	opacity: 1;
	transition-duration: 1.5s;
}

.seebloctxt{
	width: 90%;
}

.seebloctxt p{
	margin: 0;
}

.seebloc a{
	text-decoration: none;
}

.seebtn{
	position: relative;
	bottom: 1.8em;
	right: 0.5em;
	width: 3em;
	height: 3em;
	background-image: url(pictos/rondbleu.png);
	background-size: 100%;
	background-repeat: no-repeat;
	display: flex;
	transform: scale(1);
	-webkit-transform: scale(1);
	transition-timing-function: linear;
	transition-duration: 0.3s;

}

.seebtn:hover{
	transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transition-timing-function: linear;
	transition-duration: 0.3s;

}

.far{
	font-size: 2em;
	color: white;
	margin: auto;
}

@media screen and (max-width:768px)
{
	#portfolio{
		padding: 0 0 10% 0;
	}
	#portfoliotext{
		width: 83%;
		text-align: justify;
	}
	#portfolio nav{
		margin-bottom: 2em;
	}
	#gallery{
		width: 90%;
		height: 25em;
	}

	#proj1, #proj2, #proj3, #proj4, #proj5, #proj6, #proj7, #proj8, #proj9{
		height: 33%;
		width: 33%;
	}
	.seebloc{
		flex-direction: column-reverse;
		align-items: center;
		height: auto;
		padding: 5%;
	}
	.seebloctxt{
		width: 80%;
		text-align: center;
		margin-top: 5%;
	}
	.seebtn{
		position: relative;
		right: 0;
		top: 0;
	}
	.seebtn:hover{
		transform: none;
		-webkit-transform: none;
	}
	.pictooeil{
		height: 40%;
		width: 60%;
		margin: auto;
	}
	.seebloctxt p{
		display: none;
	}
}

#contact{
	width: 100%;
	height: 700px;
}

#iframescreen{
	width: 100%;
	height: 700px;
	position: absolute;
	z-index: 2;
	opacity: 0.65;
	border: 0;
}

#blue{
	background-color: rgba(36%, 68%, 83%, 1);
	width: 100%;
	height: 700px;
	position: absolute;
	z-index: 1;
}

#ctcform{
	background: rgba(255,255,255,0.75);
	padding: 2%;
	width: 15%;
	position: absolute;
	right: 5%;
	bottom: 7%;
	z-index: 3;
}

#iframemobile{
	z-index: 10;
	width: 50px;
	height: 50px;
	text-align: center;
}

#iframemobile img{
	margin-top: 43px;
	margin-left: 2em;
}

form h2{
	margin-top: 0;
}

form a{
	text-decoration: none;
	color: black;
	font-weight: bold;
}

input{
	height: 1.5em;
}

input, textarea{
	margin-top: 1.5em;
	width: 100%;
	padding: 0.3em;
}

textarea{
	height: 8em;
	margin-bottom: 1em;
	resize: none;
}

.formbtn{

	box-shadow: 0px 0.3em #468CAD;
	background-color: #5CADD3;
	border-radius: 0.3em;
	color: white;
  	padding: 0.4em 1em 0.2em 1em;
  	line-height: 2em;
  	text-decoration: none;
  	font-size: 1em;
}

.formbtn:hover{
	box-shadow: 0px 0.3em #5CADD3;
	background-color: #468CAD;
}

#mobiletopbtn{
	position: fixed;
	z-index: 20;
	background: rgba(0, 0, 0, .5);
	width: 30px;
	height: 30px;
	text-align: center;
	margin-left: 45%;
	margin-top: 2%;
}

#mobiletopbtn a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	font-size: 20px;
}

@media screen and (max-width:768px)
{
	#contact{
		height: auto;
	}
	#blue{
		height: auto;
	}
	#iframescreen{
		display: none;
	}
	#ctcform{
		background: rgba(255,255,255,0.9);
		position: relative;
		top: 0;
		right: 0;
		width: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 25px;
	}
	#ctcformleft{
		width: 44%;
	}
	.calldesktop{
		display: none;
	}
		#ctcform div{
		display: inline-block;
		float: left;
	}
	form h2{
		margin: 0;
	}
	#ctcformright{
		width: 45%;
	}
	input, textarea{
		margin-top: 1em;
		width: 100%;
	}
	.formbtn{
		position: relative;
		left: 25%;
	}
}

@media screen and (min-width:768px)
{
	.mobilesOnly, #iframemobile, #mobiletopbtn{
		display: none;
	}
}