@charset "utf-8";
/* CSS Document */

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

@import url('https://fonts.googleapis.com/css?family=Roboto:100');
@import url('https://fonts.googleapis.com/css?family=Lato:300');
@import url('https://fonts.googleapis.com/css?family=LatoBold:400');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');


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





#blocglobal {
	margin:0; padding:0;
	width:100%; height:auto;
}




#imghome {
	width:100%;
	height:1550px;
	background:url(../images/home-graphisme.jpg) fixed center;
	background-size: cover;
	position:relative;
	display: block;
}

#hello {
	top:20%;
	position:relative;
	width:100%;
	text-align:center;
	display:block;
}

#texthome {
	left:50%;
	margin-left:-335px;
	top:59%;
	position:absolute;
	font-family:'Lato', sans-serif;
	font-size: 17px;
    letter-spacing: 0.7px;
	color: #FFFFFF;
	width:670px;
	line-height: 30px;
	text-align:center;
	font-weight: lighter;
}

#texthome a{
	color: #FFFFFF;
	text-decoration:none;
	transition: all 0.6s ease;
}

#texthome a:hover {
	color: #0797c6;
}


#border {
    margin-left: -40px;
    left: 50%;
    top: -30px;
    width: 80px;
    height: 2px;
    display: block;
    background: #0797c6;
    position: absolute;
}

#border2 {
    margin-left: -40px;
    left: 50%;
    top: 265px;
    width: 80px;
    height: 2px;
    display: block;
    background: #0797c6;
    position: absolute;
}

#blocimg {
	margin:0; padding:0;
	width:100%; height:auto;
	}

#blocimg img {
	width:100%; height:100%;
	}

#bloctext {
	margin:0; padding:0;
	position:absolute;
	top: 33%; left:7%;
    width: 37%;
	font-size:17px; color: #FFFFFF;
	font-family: 'Lato', sans-serif; 
	font-weight: lighter;
	letter-spacing: 0.7px;
}

#bloctext a{
	color: #FFFFFF; 
	font-family: 'LatoBold', sans-serif;
	font-weight:400;
	text-decoration:none;
	transition: all 0.5s ease;
}

#bloctext a:hover{
	color: #FFFFFF;
	opacity:0.5;
}



#bloctext h1{
	margin:0; padding:0;
	font-size:70px; color: #FFFFFF;
	font-family: "bebas_neueregular";
	letter-spacing: 3.4px;
	opacity:0.3;
}

#bloctext p{
	line-height:1.8;
}

#line {
	margin:30px 0;
	width:40px; height:2px; background:#38b4e8;
}



#bloclogo {
	width: 100%;
	height:800px;
	text-align:center;
}

#bloclogo img{
	top:39%;
	position:relative;
}



#blocelegi {
	width:100%;
	height:auto;
	background:#f5f5f5;
	padding:200px 0 0 0;
	margin:0;
	text-align:center;
}

#blocelegi .blocfb {
	width:100%;
	height:auto;
	padding:150px 0 0 0;
	margin:0;
    overflow: hidden;
}

#blocelegi img {
	box-shadow: 6px 24px 60px 10px #d7d6d6;
}



/*** PORTFOLIO ***/


.portfolio-list {
    width: 100%;
}

.portfolio-list h4{
    font-family: "bebas_neueregular";
	font-size: 52px;
	text-align:center;
	padding:13px 0px;
	color: #393a3a;
	letter-spacing:1.8px;
}


ul {
    margin: 0;
    padding: 0 0 0 2%;
    list-style-type: none;
}

.portfolio-box li {
    float: left;
    width: 31.3%;
    margin: 0 2% 2% 0;
    position: relative;
    background-color: #0e2439;
}

.portfolio-list ul.portfolio-box li .item-info {
  display:block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #0e2439;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.portfolio-list ul.portfolio-box li:hover .item-info {
    opacity: 0.9;
	box-shadow: 0px 0px 70px 18px rgba(0, 0, 0, 0.2) inset;
}

.portfolio-list ul.portfolio-box li img {
    transition: all 0.6s ease;
	margin:auto;
}

.portfolio-list ul.portfolio-box li:hover img {
    filter: blur(1px);
	filter: grayscale(100%);
	
}

.portfolio-list ul.portfolio-box li h2 {
	position:absolute;
	top: 46%;
	margin-top:-45px;
	opacity: 0;
	color: #FFFFFF;
    text-align:center;
	font-family: "bebas_neueregular";
	font-size: 33px;
	text-transform:uppercase;
	letter-spacing:1.8px;
	width:100%;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	transition: all 0.6s ease;
}


.portfolio-list ul.portfolio-box li:hover h2 {
	top: 50%;
	opacity: 1;
}


.portfolio-list ul.portfolio-box li h3 {
	position:absolute;
	top: 54%;
	margin-top:15px;
	opacity: 0;
	color: #FFFFFF;
    text-align:center;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight:100;
	text-transform:uppercase;
	letter-spacing:1.8px;
	width:100%;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	transition: all 0.6s ease;
}


.portfolio-list ul.portfolio-box li:hover h3 {
	top: 50%;
	opacity: 0.5;
}

.portfolio-list ul.portfolio-box li .lineitem {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-10px;
	width:20px;
	height:2px;
	background:#1e87ac;
	display:block;
	transition: all 0.7s ease;
	opacity:0;
}

.portfolio-list ul.portfolio-box li:hover .lineitem {
	transform: rotate(180deg);
	opacity:1;
}


.portfolio-image-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin:0;
}


.item img {
    bottom: 0;
    display: block;
    height: auto;
    width: 100%;
}






#footer {
	margin:0;
	padding:30px 0;
	background:#0e283f;
	clear:left;
	text-align:center;
}

#footer a{
	font-family: 'Lato', sans-serif;
	font-size:13px;
	color: #737373; 
	letter-spacing: 0.7px;
	text-decoration:none;
	transition: all 0.6s ease;
}

#footer a:hover{
	color: #0797c6;
}


.footerline {
	margin:0;
	padding:0 12px;
	font-family: 'Lato', sans-serif;
	font-size:13px;
	color:#FFFFFF;
	opacity:0.1;
}







@media screen and (max-width: 1024px) {
	
#bloctext {top: 145px;}

#bloctext h1 {font-size:50px;}

.portfolio-box li {width: 31.3%;}


}



@media screen and (max-width: 768px) {
	
#bloctext {top: 90px;}

#bloctext h1 {font-size:40px;}

.portfolio-box li {width:48%;}

}



@media only screen and (max-width: 480px) {

#bloctext {top: 30px; width:40%;}

#bloctext h1 {font-size:30px;}

#bloctext p {line-height:1.2; font-size:13px;}

#line {margin:14px 0;}


.portfolio-box li {width:48%;}

#hello img {width:78%; height:auto;}

#texthome {
	left:50%;
	margin-left:-170px;
	top:52%;
	font-size: 23px;
	width:340px;
	line-height: 29px;
}

#border2 {top: 470px;}

}


.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{content:" "; display:table}
.clearfix:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear:both}