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

}



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

}




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

}

body{
	margin:0;
	padding:0;
	list-style: none;
	font-family: 'robotoregular';	
	width:100%;
	height:100%;
	font-size:17px;
}
p{
	margin:0;
}
#header{
	float:left;
	width:100%;
	height: 100vh;
    max-height: 900px;
    position: relative;
}
#header > div{
	float:left;
	width:100%;
}
#header .header-cover{
	background-image: url(../img/cover_romainpigenel.png);
	background-size:cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    max-height: 900px;
    position: relative;
    transition: all 0.5s ease 0s;
    width: 100%;
}
#header a.chevron{
	position: absolute;
	left:8%;
	bottom:10%;
	width:31px;
	height:17px;
	z-index:2;
	background: url(../img/chevron.png) no-repeat center center;
}
#header .header-title{
	position: absolute;
	left:8%;
	bottom:40%;
	width:400px;
	z-index:2;
	max-width: 80%;
}
#header .header-title h1{
	font-size:50px;
	color:#ffffff;
	font-family:'robotobold';
	font-weight:bold;
	margin:0;
}
#header .header-title p{
	font-size:25px;
	color:#ffffff;
	margin:0;
}
#mainnav{
	background: #ffffff;
	position: fixed;
	left:0;
	top:0;
	height:60px;
	width:100%;
	z-index:2999;
}
#footernav,#footer{
	background: #f0f0f0;
	position: relative;
	height:60px;
	width:100%;
	z-index:2;
	float:left;
}
#mainnav ul,#footernav ul{
	list-style: none;
	margin:0;
	padding:0;
	margin-left:20px;
	float:left;
	font-size:14px;
}
#mainnav ul li,#footernav ul li{
	display: inline-block;
	line-height:60px;
	margin-right:20px;
}
#mainnav ul li a{
	text-decoration: none;
	color:#000000;
	font-family:'robotobold';
	line-height:60px;
}
#mainnav ul.navsocial,#footernav ul.navsocial{
	float:right;
	margin-right:20px;
	height:60px;
}
#mainnav ul.navsocial li a,#footernav ul.navsocial li a{
	width:17px;
	display:block;
	height:57px;
}
#mainnav ul li.facebook a,#footernav ul li.facebook a{
	background: url(../img/facebook.png) no-repeat center center;
}
#mainnav ul li.twitter a,#footernav ul li.twitter a{
	background: url(../img/twitter.png) no-repeat center center;
}
#mainnav ul li.instagram a,#footernav ul li.instagram a{
	background: url(../img/instagram.png) no-repeat center center;
}
#mainnav ul li.linkedin a,#footernav ul li.linkedin a{
	background: url(../img/linkedin.png) no-repeat center center;
}
#mainnav ul li.snapshat a,#footernav ul li.snapshat a{
	background: url(../img/snapshat.png) no-repeat center center;
}
#mainnav ul li.m a,#footernav ul li.m a{
	background: url(../img/m.png) no-repeat center center;
}

.row h2{
	font-family: 'robotobold';
	font-weight: bold;
	font-size:30px;
}
.row{
	float:left;
	width:100%;
	background: #ffffff;
}
.row.f0{
	background: #f0f0f0;
}
.row .content{
	padding:50px 8%;
	width:84%;
	float:left;
}
.mcontent{
	margin:10px 0;
}
.mcontent p{
	text-align: justify;
}
.row h3{
	font-family: 'robotobold';
	font-weight: bold;
	font-size:14px;
	margin:0;
}
.encart{
	float:right;
	padding:20px 120px 20px 20px;
	margin-bottom:50px;
	background: #F0F0F0 url(../img/chevron2.png) no-repeat 95% center;
}
.encart p{
	font-size:19px;
	font-family: 'robotothin';
}
.row ul{
	list-style: none;
	margin:0;
	padding:0;
}
.row ul li{
	display: inline-block;
	width:49%;
	margin-right:1%;
	float:left;
	margin-bottom:20px;
}
.row ul li:last-child{
	display: inline-block;
	width:49%;
	margin-left:1%;
	margin-right:0;
}
.row ul li img{
	width: 100%;
}
.row ul li .img{
	width: 100%;
	height:300px;
	overflow: hidden;
	float:left;
}

.row .gallery ul li .img{
	width: 100%;
	float:left;
	height:100%;
	position: relative;
	
	-moz-transition: background-size 1s ease-in;
	-ms-transition: background-size 1s ease-in;
	-o-transition: background-size 1s ease-in;
	-webkit-transition: background-size 1s ease-in;
	-ms-transition: background-size 1s ease-in;
	transition: background-size 1s ease-in;
    background-repeat:no-repeat;
    background-position: center center;
    background-size:100% 100%;
}
.row .gallery ul li .img:hover {
    background-size:120% 120%;
}

.row .gallery ul li .h50{
	height:48% !important;
}
.row .gallery ul li .h100{
	height:100% !important;
}
.row .gallery ul li .h100.w50{
	margin-top:2%;
}

.row .gallery ul li .w50{
	width: 48%;
	overflow: hidden;
	float:left;
	height:auto;
	margin-top:4%;
}
.row .gallery ul li{
	height:600px;
}
.row .gallery ul li .w50:last-child{
	margin-left:4%;
}

h4{
	font-size: 12px;
	font-family:'robotobold';
	color: #8A8A8A;
	text-transform: uppercase;
	margin:0;
}
.upload{
	background: url(../img/download.png) no-repeat center center;
	width:27px;
	height:27px;
	background-size: 27px 27px;
	position: absolute;
	right:10px;
	top:10px;
}
.row ul li .txt{
	margin-top:20px;
	float:left;
	width:100%;
	height:70px;
}
.row ul li .txt p{
	font-size: 18px;
	font-family:'robotobold';
	color: #000000;
	margin:0;
}

.form{
	float:left;
	width:70% !important;
	font-size:14px;
	font-family: 'robotobold';
	border-top:1px solid #000000;
}

.form input{
	height:50px;
	color:#000000;
	border: none;
	border-top:1px solid #000000;
	width: 100%;
	font-family: 'robotobold';
	font-size:14px;
}

.form .pnom{
	width: 50%;
	float:left;
	border-top:none;
}
.form .pprenom{
	width: 47%;
	float:left;
	border-left:1px solid #000000;
	padding-left:2%;
	border-top:none;
}

.rowmobile,.mobile{
	display:none;
}
.form textarea{
	height:150px;
	color:#000000;
	border: none;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	width: 100%;
	padding:20px 0;
	margin-bottom:40px;
	font-family: 'robotobold';
	font-size:14px;
}

.form .psubmit{
	float:left;
	width:auto;
	background: #000000;
	color:#fff;
	padding:0 20px;
}

.msgform {
    float: left;
    line-height: 50px;
    margin-left: 20px;
    text-transform: uppercase;
}
.error{
	color:red;
}
.psubmit{
	cursor:pointer;
}