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

ol, ul, li {list-style: none;}
a{text-decoration:none;}
* { margin: 0;}

html {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../img/bg-img2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
}
body{min-width: 1260px;}
::selection {background: #ccc; /* Safari */}
::-moz-selection {background: #ccc; /* Firefox */}
::-webkit-selection{background: #ccc;}


.content{
	margin:0 auto;
	padding:0;
	position: relative;
	width:1260px;
}


/* HEAD */

.header{
	background:url(../img/bg-head.jpg) no-repeat, #333;
	background-position:center;
    display: block;
	height:124px;
	}
	
#nav{
	background-color:#000;
	width:1260px;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	height:42px;
	}
#nav li{
	display:block;
	float:left;
	padding:10px 20px;

	}
#nav li a{
	color:#FFF;
	font-size:16px;
	letter-spacing:1px;
	}
#nav li:hover{
	background-color: #999;
	}
	
#nav2{
	width:1260px;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	}
#nav2 li{
	background-color:#0d5075;
	display:block;
	float:left;
	padding:15px 0;
	text-align:center;
	width:420px;
	}
#nav2 li a{
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	}
#nav2 li a span{
	font-weight:600;
	}
#nav2 li a:hover{
	text-decoration:underline;
	}
	
#nav3{
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	}
#nav3 li{
	background-color:#333;
	display:block;
	float:left;
	padding:15px 0;
	text-align:center;
	width:315px;
	}
#nav3 li a{
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	}
#nav3 li a span{
	font-weight:600;
	}
#nav3 li a:hover{
	text-decoration:underline;
	}
#nav4{
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	text-transform:uppercase;
	}
#nav4 li{
	background-color:#333;
	display:block;
	float:left;
	padding:15px 0;
	text-align:center;
	width:50%;
	}
#nav4 li a{
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	}
#nav4 li a span{
	font-weight:600;
	}
#nav4 li a:hover{
	text-decoration:underline;
	}

/* VIDEO */

button{
    background-color: #000;
    color: #fff;
    border: none;
    padding: 6px 10px;
    text-transform: uppercase;
}

/* MAIN */

.main{
	font-family: 'Open Sans', sans-serif;
	}
.blue{background-color:#4887b2;}
.white{background-color:#FFF;}
.gray{background-color:#b1b1b1; height: 100%;}

.profil{
    font-size: 18px;
    line-height: 30px;
    padding: 0 10%;
}
.profil p{
    margin-bottom: 20px;
    font-weight: 300;
}
.profil li{
    font-weight: 600;
}
.profil span{
    font-style: italic;
}
h1{
	color:#FFF;
	display:block;
	font-weight:300;
	padding:40px 0;
	text-align:center;
	text-transform:uppercase;
    clear: both;
	}
h1 span{
	color:#FFF;
	display:block;
	font-weight:300;
	padding-bottom:10px;
	text-align:center;
	text-transform:uppercase;
    clear: both;
	}
.logo-porte{
    display: block;
	margin:0 auto 0  auto;
    padding-top: 30px;
	text-align:center;
    clear: both;
	}
.group{
	width:1260px;
	float:left;
	padding:0 0 20px 0;
	}
h2{
	background:#16638d;
	color:#FFF;
	font-size:24px;
	font-weight:400;
	margin:0 0 30px 0;
	padding:10px 20px;
	text-transform:uppercase;
	}
h2 a{
	color:#FFF;
	font-size:14px;
	float:right;
	padding-top:10px;
	}
h2 a:hover{
	cursor:pointer;
	text-decoration:underline;
	}
.group1{
	background-color:#666;
	width:1260px;
	float:left;
	padding:0 0 20px 0;
	}
h3{
	background:#333;
	color:#FFF;
	font-size:24px;
	font-weight:400;
	margin:0 0 30px 0;
	padding:10px 20px;
	text-transform:uppercase;
	}
h3 a{
	color:#FFF;
	font-size:14px;
	float:right;
	padding-top:10px;
	}
h3 a:hover{
	cursor:pointer;
	text-decoration:underline;
	}
.bloc{
	color:#FFF;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	float:left;
	margin:0 20px 50px 20px;
	width:275px;
	}
.group .bloc p{
	font-size:18px;
	}
.group .bloc p span{
	font-weight:600;
	}
.group .bloc img{
	margin:10px 0;
	}
.group .bloc #tech{
	display:block;
	color:#FFF;
	border:#FFF 1px solid; 
	font-size:14px;
	padding:5px 0;
	text-align:center;
	}
.group1{
	padding-bottom:60px;
	}
.group1 li{
	background-color:#888;
	color:#FFF;
	font-size:20px;
	padding:5px 0;
	margin:0 20px;
	text-indent:20px;
	}
.group1 li span{
	background-color:#777;
	display:block;
	padding:5px 0;
	}
.group1 li img{
	padding-left:10px;
	}
#img-spec{
	margin:40px 0 0 161px;
	}

.bloc2{
	color:#FFF;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	float:left;
	margin:0 20px 50px 20px;
	width:590px;
	}
.group .bloc2 p{
	font-size:18px;
	}
.group .bloc2 p span{
	font-weight:600;
	}
.group .bloc2 img{
	margin:10px 0;
	}
.group .bloc2 #tech{
	display:block;
	color:#FFF;
	border:#FFF 1px solid; 
	font-size:14px;
	padding:5px 0;
	text-align:center;
	}
.bloc-handle{
	color:#333;
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	float:left;
	margin:0 20px 50px 20px;
	}
.group .bloc-handle p{
	font-size:18px;
    font-weight:600;
	}
.group .bloc-handle img{
	margin:10px 0;
	}
.bloc-gall{
	float:left;
	margin:0 20px 30px 20px;
	}
.projet img{
    display: block;
    margin: 40px auto;
}

/* color */

.color{
	float:left;
	padding:0 20px 10px 20px;
	}
.color p{
	color:#FFF;
	font-size:18px;
	font-weight:300;
	line-height:24px;
	}

/***  image over  ***/
.row{
    display: block;
    height: 480px;
    margin: 80px 20px;
	}

        .viewport {
            float: left;
            height: 480px;
            overflow: hidden;
            position: relative;
            width: 590px;
        }
        .viewport a {
            display: block;
            position: relative;
			text-decoration:none;
        }
        .viewport a img {
            height: 521px;
            left: -20px;
            position: relative;
            top: -20px;
            width: 640px;
        }
        .viewport a span {
            display: none;
			font-family: 'Ubuntu', sans-serif;
			font-weight:400;
            font-size: 3.0em;
            height: 100%;
            padding-top: 320px;
            position: absolute;
            text-align: center;
            text-decoration: none;
            width: 100%;
            z-index: 2;
        }
        .viewport a span em {
                display: block;
                font-size: 0.45em;
                font-weight: normal;
            }
        .dark-background {
           background-color: rgba(102, 102, 102, 0.7);
            color: #fff;
            text-shadow: #000 0px 0px 20px;
        }
        .dark-background em {
                color: #ccc;
            }
			
#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}
	
		/***  CONTACT   ****/
			
.form{
    text-align: center;
	}
.description{
	color:#fff;
	display:block;
	line-height:40px;
	text-transform:uppercase;
	}
.fill{
	border:none;
	color:#999;
	font-size:16px;
	font-weight:300;
	height:55px;
	margin-bottom:10px;
	padding: 0 20px;
	text-transform:uppercase;
	width:60%;
	}
imput{
	color:#999;
	}
textarea{ 
color:#999;
background-color:#FFF; 
border:none; 
font-family: 'Open Sans', sans-serif;
font-size:16px;
font-weight:300;
height:300px;
padding:10px 20px;
width:60%;
}
.button_form{ 
background-color:#FFF; 
border:none;
color:#999;
cursor:pointer;
font-size:16px; 
height:55px;
margin-top:10px;
text-transform:uppercase;
width:250px;
}
.button_form:hover{
	color:#666;
	background-color:#CCC;
	}
.address{
    background-color: #fff;
	color:#000;
	display:block;
    margin-top: 100px;
	padding:0 0 60px 0;
    text-align: center;
	}
.address p{
	font-size:20px;
	font-weight:300;
	line-height:34px;
	margin-bottom:40px;
	}
.address p span{
	font-size:18px;
    text-transform: uppercase;
	}

/* FOOTER */

footer{
	height: 210px;
	background:url(../img/bg-foot.jpg) no-repeat, #333;
	background-position:center;
    font-family: 'Open Sans', sans-serif;
}
.footnav{
    display: table;
    font-weight: 300;
    margin: 0 auto;
    padding-top: 40px;
}
.footnav li{
    float: left;
    padding: 10px 20px;
}
.footnav li a{
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}
.footnav li a:hover{
    text-decoration: underline;
}
#copyright{
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    margin-top: 80px;
    text-align: center;
}
#copyright a{color: #fff;}
#copyright a:hover{text-decoration: underline; cursor: pointer;}