@import url(http://fonts.googleapis.com/css?family=Lato);
@font-face {
    font-family: 'calibri';
    src: url('../fonts/calibri/calibri.otf') format('otf'),
    url('../fonts/calibri/CALIBRI.eot') format('eot'),
    url('../fonts/calibri/CALIBRI.woff') format('woff'),
    url('../fonts/calibri/calibri.svg') format('svg'),
    url('../fonts/calibri/calibri.ttf') format('truetype');
}
@font-face {
    font-family: 'Ropa-sans';
    src: url('../fonts/ropa-sans/RopaSans-Regular.otf') format('otf'),
    url('../fonts/ropa-sans/RopaSans-Regular.eot') format('eot'),
    url('../fonts/ropa-sans/RopaSans-Regular.woff') format('woff'),
    url('../fonts/ropa-sans/ropasansregular.svg') format('svg'),
    url('../fonts/ropa-sans/ropasansregular.ttf') format('truetype');
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:18px;
	padding:0;
	margin:0;

	}
ol,ul {
    list-style:none;
    }
a{
    text-decoration: none;
}
.all{
    width:940px;
    margin-left:auto;
    margin-right:auto;
	}
.wrapper{
    width:100%;
    float:left;
    margin: 0 auto;
    }
.header{
    float: left;
    width: 100%;
    height: 122px;
    background: #000;
    }
.logo{
    float: left;
    height: 100%;
}

.logo img{
    height: 115px;
    width:280px;
}
.nav{
    float: right;
}

.menu{
    height: 4em;
    margin: auto;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
.menu li{
    display:inline;
    text-align:center;
}
.menu li a{
    position:relative;
    top:0;left:0;right:25em;bottom:0;
    display:inline-block;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding: 3.1em 0.2em;
    font-family: 'Lato',sans-serif;
    font-size: 17px;
    text-decoration:none;
    color: #fff;

    /*transition*/
    -webkit-transition:width .3s,right .3s;
    -moz-transition:width .3s,right .3s;
    -o-transition:width .3s,right .3s;
    transition:width .3s,right .3s;
}
.menu li:nth-child(1) a{
    width: 4em;
}
.menu li:nth-child(2) a{
    width: 10em;
}
.menu li:nth-child(3) a{
    width: 4em;
}
.menu li:nth-child(4) a{
    width:6em;
}
.menu li:nth-child(5) a{
    width:5em;
}
.menu li:nth-child(6) a{
    width:6em;
}
.menu li:last-child a::after{
    content:"";
    position:absolute;
    right:inherit;
    bottom:35px;
    width:inherit;
    height:4px;
    background:#000;
    pointer-events:none;
    /*transition*/
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    transition:all .5s ease;
}

.menu li:nth-child(1) ~ li:last-child a{
    right: 31.87em;
    width: 4em;
}
.menu li:nth-child(2):hover ~ li:last-child a{
    right:21.7em;
    width:10em;
}
.menu li:nth-child(3):hover ~ li:last-child a{
    right:17.5em;
    width:4em;
}
.menu li:nth-child(4):hover ~ li:last-child a{
    right:11.3em;
    width:6em;
}
.menu li:nth-child(5):hover ~ li:last-child a{
    right:6.1em;
    width:5em;
}
.menu li:nth-child(6):last-child:hover a{
    right:0;
    width:6em;
}
.menu li:hover ~ li:last-child a::after,
.menu li:last-child:hover a::after{
    background:#0c7d00;
}
.menu li:last-child a{
    min-width:6em;max-width:6em;
}
.menu li a:hover,ul li a:focus{
    color:#0c7d00;
    background-color:#ffffff;
    /*transition*/
    -webkit-transition:width .3s,right .3s,background-color .3s;
    -moz-transition:width .3s,right .3s,background-color .3s;
    -o-transition:width .3s,right .3s,background-color .3s;
    transition:width .3s,right .3s,background-color .3s;
}

.slides{
    float: left;
    height: 406px;
    width: 100%;
    background: #0c7d00;
    }
.slogan{
    float: left;
    width: 100%;
    height: 66px;
}
.slogan p{
    color: #474747;
    font-family: 'calibri';
    font-size: 21px;
    text-align: center;
    text-transform: uppercase;
}
.contain{
    float: left;
    width: 100%;
    }
.left{
    float: left;
    width: 622px;
    }
.presentation{
    float: left;
    width: 100%;
    border: 1px solid #cbcbcb;
    border-top: none;
    position: relative;
    margin-top: 29px;
    height: 195px;
}
.pattern{
    position: absolute;
    top: -18px;
}
.presentation h1{
    margin-top: 0;
    background: none repeat scroll 0 0 #0c7d00;
    border-bottom: 4px solid #C9C9C9;
    color: #C9C9C9;
    font-family: 'Ropa-sans',sans-serif;
    font-size: 26px;
    font-weight: normal;
    height: 32px;
    padding-top: 13px;
    text-indent: 19px;
}
.presentation p{
    color: #333;
    float: right;
    height: 100px;
    line-height: 19px;
    width: 476px;
    margin: 0;
}
.presentation a{
    float: right;
    color: #0c7d00;
    margin-right: 13px;
}
.presentation a:hover{
    color: #000;
}
.pic{
    float: left;
    height: 102px;
    margin-left: 23px;
    width: 108px;
}
.realisation{
    float: left;
    width: 100%;
}
.realisation h1{
    font-family: 'Ropa-sans',sans-serif;
    border-bottom: 4px solid #C9C9C9;
    color: #C9C9C9;
    font-size: 26px;
    background: none repeat scroll 0 0 #0c7d00;
    height: 32px;
    padding-top: 13px;
    text-indent: 19px;
    font-weight: normal;
}
.last-realisations{
    float: left;
    width: 103%;
}
.ImageWrapper .ImageOverlayH {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.2s ease 0s;
    width: 100%;
}
.ImageWrapper:hover .ImageOverlayH {
    opacity: 1;
}

.ImageWrapper .StyleH {
    visibility: hidden;
    margin: -7px 0 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
}
.ImageWrapper:hover .StyleH {
    opacity: 1;
    visibility: visible;
}
.ImageWrapper img{
    width: 100%;
    height: 100%;
}
.more{
    color: #FFFFFF;
    font-family: 'Ropa-sans', sans-serif;
    text-transform: uppercase;
    font-size: 17px;
    border: 1px solid #FFFFFF;
    padding: 5px;
}
.more:hover{
    color: #ffcc00;
    border: 1px solid #ffcc00;
}
.real{
    float: left;
    width: 191px;
    height: 123px;
    border: 3px solid #fff;
    -moz-box-shadow: 0 1px 9px rgba(43,43,43,.5);
    -webkit-box-shadow: 0 1px 9px rgba(43,43,43,.5);
    box-shadow: 0 1px 9px rgba(43,43,43,.5);
    position: relative;
    margin-right: 14px;
    margin-bottom: 18px;
}
.real img{
    width: 191px;
    height: 123px;
}
.real p{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.57);
    bottom: 0;
    color: #fff;
    font-size: 13px;
    margin: 0;
    padding-bottom: 7px;
    padding-top: 7px;
    position: absolute;
    text-indent: 11px;
    font-weight: bold;
    width: 100%;
}
.plus{
    background: #cccccc;
}
.plus a{
    background-image: url("../img/arrow.png");
    background-repeat: no-repeat;
    color: #656565;
    display: block;
    font-family: 'Ropa-sans',sans-serif;
    font-size: 26px;
    height: 52px;
    line-height: 30px;
    margin-left: 17px;
    margin-top: 35px;
    padding-left: 56px;
    padding-top: 0;
    text-indent: 9px;
}
.plus a:hover{
    color: #000000;
}
.right{
    float: right;
    width: 287px;
    }
.index-contact{
    float: left;
    width: 100%;

}
.index-contact  h1{
    background: none repeat scroll 0 0 #0c7d00;
    color: #ffffff;
    font-family: 'Ropa-sans',sans-serif;
    font-size: 28px;
    font-weight: normal;
    padding-bottom: 12px;
    padding-top: 12px;
    text-indent: 15px;
    margin-bottom: 0;
}
.info-contact{
    float: left;
    width: 100%;
    background: #ebe8e8;
    position: relative;
}
.info-contact ul{
    padding:5px 0 9px;
    margin: 0;
    border-left:34px solid #d9d2d2
}
.fa-angle-right{
    left: 15px;
    position: absolute;

    color: #0c7d00;
}
.info-contact ul li:nth-child(1) .fa-angle-right{
    top: 16px;
}
.info-contact ul li:nth-child(2) .fa-angle-right{
    top: 49px;
}
.info-contact ul li:nth-child(3) .fa-angle-right{
    top: 82px;
}
.info-contact ul li{
    color: #656565;
    font-size: 13px;
    line-height: 33px;
    margin-left: 9px;
}
.info-contact ul li span{
    font-weight: bold;
}
.index-devis{
    float: left;
    width: 100%;
    background: #eae7e7;
    margin-top: 14px;
    padding-top:5px;
    height:386px;
}
.index-devis input[type=text]{
    width:80%;
    display: block;
    margin: auto;
    border: 1px solid #d4d2d2;
    color: #999;
    border-radius: 5px;
    text-indent: 12px;
    height: 32px;
    margin-bottom: 8px;
}
.index-devis textarea{
    width:80%;
    display: block;
    margin: auto;
    border: 1px solid #d4d2d2;
    color: #999;
    border-radius: 5px;
    height: 130px;
    padding-top: 6px;
    text-indent: 12px;
}
.index-devis input[type=submit]{
    float: right;
    margin-right: 28px;
    margin-top: 8px;
    color: #ffffff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:none;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    padding-bottom: 5px;
    padding-top: 5px;
    transition: all 0.5s ease 0s;
    background-image: -moz-linear-gradient(bottom, #0e0e0e 0%, #7d7e7d 99.17%, #7d7e7d 100%);
    background-image: -o-linear-gradient(bottom, #0e0e0e 0%, #7d7e7d 99.17%, #7d7e7d 100%);
    background-image: -webkit-linear-gradient(bottom, #0e0e0e 0%, #7d7e7d 99.17%, #7d7e7d 100%);
    background-image: linear-gradient(bottom, #0e0e0e 0%, #7d7e7d 99.17%, #7d7e7d 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr= #0e0e0e,endColorstr=#7d7e7d );
   /* -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= #0e0e0e , EndColorStr= ##7d7e7d);*/
}
.index-devis input[type=submit]:hover{
    background: #898989;

}
.index-devis a img:hover{
    opacity: .5;
}
.footer{
    float: left;
    width: 100%;
    background:#212121 ;
    border-top: 10px solid #0c7d00;
    color: #ffffff;
    position: relative;
    margin-top: 73px;
}
.info-footer{
    float: left;
    margin-right: 30px;
    width: 259px;
    padding-top: 19px;
}
.info-footer:last-child{
    margin-right: 0;
}
.info-footer p{
    float: right;
}
.info-footer  a img:hover{
opacity: .7;}

.info-footer p a{
    font-weight: bold;
    color: #ffffff;
}
.info-footer p a:hover{
    opacity: .5;
}
.menu-footer{
    float: left;
    padding: 0px;
}
.menu-footer li a{
    color: #ffffff;
    margin-left: 12px;
    font-family: 'Lato',sans-serif;
    font-size: 14px;
}
.menu-footer li a:hover{
    opacity: .5;
}
.cpy{
    bottom: 0;
    position: absolute;
}
/*presentation*/
.title{
    background: none repeat scroll 0 0 #0c7d00;
    border-bottom: 4px solid #C9C9C9;
    color: #fff;
    font-family: 'Ropa-sans',sans-serif;
    font-size: 26px;
    font-weight: normal;
    height: 32px;
    padding-top: 13px;
    text-indent: 19px;
}
.pics{
    float: left;
    width: 300px;
    height: 300px;
    border: 3px solid #d9d2d2;
    margin-right: 25px;
}
.txt{
    font-family: 'Lato',sans-serif;
    font-size: 15px;
    line-height: 29px;
    text-align: justify;
    text-indent: 28px;
    color: #545353;

}
.fa-phone, .fa-mobile, .fa-envelope-o, .fa-home, .fa-users{
    margin-right: 7px;
    color: #0c7d00;
}
.galerie{
    float: left;
    width: 102%;
}
.galerie a{
    float: left;
    margin-right: 13px;
    margin-bottom:11px;
}
.img-galerie{
    width: 190px;
    height: 140px;
    border: 2px solid #a2a098;
}
.img-galerie:hover{
    border: 2px solid #6c6b66;
}
.map {
    box-shadow: 0 3px 10px -4px #000 inset, 0 -3px 10px -4px #000 inset;
    float: left;
    height: 380px;
    position: relative;
    width: 100%;
}
.cont {
    box-sizing: border-box;
    clear: both;
    color: #222;
    float: left;
    font-family: 'PT Sans',sans-serif;
    margin-top: 20px;
    min-height: 200px;
    position: relative;
    text-align: justify;
    width: 100%;
}
.cont input, .cont textarea, .cont select {
    background: none repeat scroll 0 0 #fcfcfc;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin: 5px 10px;
    padding: 5px;
    width: 225px;
}
.cont select {
    width: 192px;
}
.cont input[type="submit"] {
    background: none repeat scroll 0 0 #02855a;
    border: 1px solid #028551;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    clear: both;
    color: #fff;
    float: right;
    font-weight: bold;
    height: 32px;
    position: static;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.36);
    width: 110px;
}
.cont input[type="submit"]:hover {
    opacity: 0.9;
}
.cont textarea {
    height: 176px;
    right: 304px;
    top: 0;
    width: 300px;
}
.info_contact {
    float: right;
    position: absolute;
    right: 20px;
    top: 5px;
    width: 260px;
}
.info_contact_ar {
    float: left;
    left: 20px;
    position: absolute;
    top: 5px;
    width: 260px;
}
.content .inner {
    margin: auto;
    width: 100%;
}
.logo-footer{
    height: 131px;
    width: 307px;
}
.info-conta{
    float: left;
}
.info-conta h1{
    color: #0c7d00;
    font-family: 'calibri';
    font-size: 28px;
}
.info-conta p{
    font-family: 'calibri';
    font-size: 14px;
    line-height: 33px;
}
.visiteur{
    float:right;
    font-family: 'Ropa-sans',sans-serif;
    width: 100%;
    background: #d9d2d2;
    font-size: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.jointe{
    border: none;
}