html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0;}

@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=1a316c45-4ce4-4dae-a9a1-b2330d1b78ec");

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

@font-face{
font-family:"Caecilia";
font-weight: normal;
font-style: normal;
src:url("Fonts/65b06120-3cee-4ddc-a06b-1509d1854528.eot?#iefix");
src:url("Fonts/65b06120-3cee-4ddc-a06b-1509d1854528.eot?#iefix") format("eot"),url("fonts/95e8f876-e592-40be-bed1-3adf4ccb67aa.woff") format("woff"),url("fonts/3b1d3ed1-18ff-4805-8ce0-f2352d60c62e.ttf") format("truetype"),url("fonts/bc20ebf8-37f9-40e6-8f99-5cb618b4a14d.svg#bc20ebf8-37f9-40e6-8f99-5cb618b4a14d") format("svg");
}
@font-face{
font-family:"DIN";
font-weight: bold;
font-style: normal;
src:url("Fonts/b32ab78b-6c51-4bd3-bc37-4edcec0331f8.eot?#iefix");
src:url("Fonts/b32ab78b-6c51-4bd3-bc37-4edcec0331f8.eot?#iefix") format("eot"),url("fonts/9949035f-6226-4080-a14a-bf7d94ffb1e1.woff") format("woff"),url("fonts/6241bd09-15c2-485e-9796-9db8d0aa6974.ttf") format("truetype"),url("fonts/af94da3e-4232-416a-b6bc-f39f85dd5db6.svg#af94da3e-4232-416a-b6bc-f39f85dd5db6") format("svg");
}
@font-face{
font-family:"DIN";
font-weight: 100;
font-style: normal;
src:url("Fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix");
src:url("Fonts/3e0b2cd7-9657-438b-b4af-e04122e8f1f7.eot?#iefix") format("eot"),url("fonts/bc176270-17fa-4c78-a343-9fe52824e501.woff") format("woff"),url("fonts/3516f91d-ac48-42cd-acfe-1be691152cc4.ttf") format("truetype"),url("fonts/d1b1e866-a411-42ba-8f75-72bf28e23694.svg#d1b1e866-a411-42ba-8f75-72bf28e23694") format("svg");
}
@font-face{
font-family:"DIN";
font-weight: normal;
font-style: normal;
src:url("Fonts/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix");
src:url("Fonts/da088ecc-a53c-4831-a95b-6fd81b5b338a.eot?#iefix") format("eot"),url("fonts/c5a7f89e-15b6-49a9-8259-5ea665e72191.woff") format("woff"),url("fonts/868c94b5-ca49-46b7-b62b-297f8d861125.ttf") format("truetype"),url("fonts/e3145f65-29b5-4f7f-8c6e-2dc135021b6a.svg#e3145f65-29b5-4f7f-8c6e-2dc135021b6a") format("svg");
}
/*.page-inner {
    -webkit-transition: all 1s ease;
    -moz-transition: 	all 1s ease;
    -o-transition: 		all 1s ease;
    -ms-transition: 	all 1s ease;
    transition: 		all 1s ease;
}*/

ul.unstyled,ul.unstyled li{ margin: 0; padding: 0; list-style: none;}

.img-galerie span, .main *{
    -webkit-transition: all 0.3s ease;
    -moz-transition: 	all 0.3s ease;
    -o-transition: 		all 0.3s ease;
    -ms-transition: 	all 0.3s ease;
    transition: 		all 0.3s ease;
}

#logo, #logo img{
    -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;
}

html{ background: #fff; min-width:1200px;}
html,input,textarea{ color:#625856; font-size: 16px; font-family: 'DIN', arial, verdana;}
form *{ font-family: 'Caecilia', arial, verdana;}
a{color:#625856;}

.text-center{ text-align: center;}
.text-left{ text-align: left;}
.text-right{ text-align: right;}

.wrapper{width: 1200px; margin: 0 auto; position: relative;}

.col-50{ width: 50%; float: left;}

header{ background: #bcd5da; border-bottom:1px solid #c8c5c4;}
header.fixed > .wrapper{ padding-top: 80px;}
header .quote{ display: block; position: absolute; top:0; left:360px; color:#bcd5da; line-height: 17px; font-size: 14px; padding: 20px 0 0 0; font-weight: bold;}

.top{ background: #0b5d75; height: 91px; position: relative; z-index: 5;}

.fixed .top{ position: fixed; top:0; left: 0; right:0; z-index: 5; width: 100%;}
.fixed .top #logo{top:-14px; left: 157px; width: 100px;}

#logo{ display: block; position: absolute; top:71px; left: 168px; width: 136px; height:141px; z-index: 10; }
#logo img{width: 100%; height: auto;}

.main{float: right; font-family: 'Roboto Slab'; font-size: 12px;}
.main li{ display: block; float: left; position: relative;}
.main a{ z-index: 10; text-transform: uppercase; color:#fff; opacity:0.8; display: inline-block; text-align: center;  width: 101px; min-height:21px; padding-top: 70px; position: relative; text-decoration: none;}
.main a:before{ text-align: center; z-index: 10; font-family: 'ico-phare'; position: absolute; top:14px; left: 0; width: 100%; height: 60px; font-size: 40px; color: #fff;}
.main .accueil:before{content:"0";}
.main .a-propos:before{content:"1";}
.main .galerie:before{content:"2";}
.main .services:before{content:"3";}
.main .nous-joindre:before{content:"4";}
.main a:hover{ opacity: 1;}
.main span{ z-index: -1; display: block; position: absolute; left:0; top:-150px; width: 101px; height: 91px; background:#382d2b; z-index: 1; opacity: 0;}
.main span:after{ content:""; display: block; width: 101px; background: url(../images/nav-hover.png) top center; position: absolute; width: 101px; height: 15px; bottom:-15px;}
.main li:hover span,.main li.active span{ opacity: 1; top:0;}

/*.main a:after{ content:""; z-index: 1; opacity: 0; display: block; background: url(../images/nav-hover.png) top center; position: absolute; width: 101px; height: 0px; bottom:300px;}
.main a:hover{ opacity: 1; background:#382d2b;}
.main a:hover:after{ opacity: 1; bottom:-15px; height: 15px;}*/

section{ border-bottom:1px solid #c8c5c4;}
#a-propos{ }
#a-propos .content{ background:url(../images/a-propos.jpg) no-repeat bottom left; padding:60px 155px; }

#featured{background: #f9fbfc;}

#galerie{background: #ffffff; padding:25px 0 50px; }
#galerie h3{ margin-bottom: 25px;}
.img-galerie{ height: 180px;}
.img-galerie li{ width: 20%; float: left; }
.img-galerie li a{ position: relative; display: block; height: 159px; overflow: hidden;}
.img-galerie span{ position: absolute; top:100%; display: block; width: 220px; height: 139px; padding: 10px; background: url(../images/bg-blue-75.png); }
.img-galerie a:hover span{top:0; color:#fff;}

#services{ background: #635856; padding: 60px 0; color:#fff;}

.services-list{ height: 260px; }
ul.services-list li{ width: 258px; float: left; position: relative; margin-right:56px;}
ul.services-list .item-4{ margin-right: 0;}
.services-list li div{ width: 258px; height: 260px; background: url(../images/boue.png) no-repeat top left; position: relative;}
.services-list li div img{ position: absolute; top:48px; left: 48px;}

#services .content > .col-50{ border-bottom:1px solid #7d7472; padding: 30px 0; position: relative; margin-bottom: 40px;}
#services .content > .col-50 h3{ margin-left: 36px; margin-bottom: 25px;}
#services .content > .col-50 span.border{ background: #7d7472; width: 1px; position: absolute; right:0; top:20px; bottom:20px;}

#services .col-50 .col-50 ul{ margin-left:36px; padding-bottom: 40px;}
#services .col-50 .col-50 ul li{ padding-left: 10px; position: relative; margin-bottom: 14px; background: url(../images/bullet.png) no-repeat 0px 6px;}

#contact{ background: url(../images/bousole.png) no-repeat center bottom #fff; padding-top: 40px;}
#contact .wrapper{ min-height: 490px;}

#contact .item-1 .inner{ padding-right: 55px;}
#contact .item-2 .inner{ padding-left: 55px;}

.bt-map{ margin-bottom: 15px; display: block;}
.bt-map-text{ margin-left: 20px; color: }

.form input,.form textarea{ display: block; width: 520px; height: 20px; line-height: 20px; padding:10px; background:#f5f5f5; border:1px solid #c8c5c4; }
.form textarea{ height:182px;}
.form label{ margin-bottom: 12px; display: block;}
.form .btn{ cursor:pointer; height: 42px; float: right; width: auto; display: block; color: #bcd5da; background:#0b5d75; padding: 12px 45px; text-transform: uppercase; }

footer{ background:#0b5d75; padding-top: 60px; color: #fff; line-height: 1.4em;}
footer a{font-family: 'Caecilia', Trebuchet, Arial; color: #fff; display: inline-block; margin-bottom: 15px;}
footer h2{font-size: 26px; margin-left:36px; border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 2px;}
footer h2 small{ font-size: 20px;}
footer h3{ font-size: 20px;}
footer h4{ margin-left:36px;}
.made-by{ background:#382d2b; height: 20px; padding: 20px 0 16px; margin-top: 60px;}
.made-by a{ float: right;}
.tel-fax{font-family: 'Caecilia', Trebuchet, Arial; font-size: 24px; line-height: 34px; padding: 20px 0;}
.adresse{ margin-left:36px; font-family: 'Roboto Slab', Trebuchet, Arial; padding-left: 15px; background: url(../images/bullet-large.png) no-repeat 0px 9px; }

img{ display: block; border:none; margin: 0;}

/* text styles */

h1{font-size: 30px; margin-bottom: 35px; font-family: 'Caecilia', Trebuchet, Arial; font-weight: bold;}
h2{font-size: 30px; margin-bottom: 35px; font-family: 'Caecilia', Trebuchet, Arial; font-weight: bold;}
h3{font-size: 26px; margin-bottom: 15px; font-family: 'Caecilia', Trebuchet, Arial;}
h4{font-size: 18px; margin-bottom: 10px; font-family: 'DIN', Trebuchet, Arial;}
h5{font-size: 14px; margin-bottom: 10px; font-family: 'DIN', Trebuchet, Arial;}
p{ margin-bottom: 10px;}

h3.anchor:after{ font-family: 'ico-phare'; content:'2'; font-size: 30px; display: inline-block; margin-left: 15px;}
h2.bousole:after{  font-weight:normal; letter-spacing: 32px; min-width: 32px; font-family: 'ico-phare'; content:'4'; font-size: 31px; display: inline-block; margin-left: 15px;}

.clear{clear:both; width: 100%; float: none;}