/* CSS Document */
ul, ol, li, p, h1, h2, h3, h4, h5, form {padding:0; margin:0;}
h1, h2, h3, h4, h5 {font-weight:normal; font-family:'tex_gyre_adventorregular', Arial, Helvetica, sans-serif; text-transform:uppercase}
li {list-style-type:none;}
a {text-decoration:none;}
a:focus {outline:none;}
html, body, #global {height: 100%;}
body > #global {height:auto; min-height:100%;}
.menu-label, #bas {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); outline:none; background-color:rgba(0,0,0,0);}
strong {font-weight:normal; font-family:'open_sansbold', Arial, Helvetica, sans-serif;}
body {font-size:16px; font-family:'open_sansregular', Arial, Helvetica, sans-serif; color:#383838; position:relative; }
#header {height:60px; position:fixed; top:0; left:0; width:100%; z-index:30; transition: all 0.5s ease 0s;}
.header {background-color: rgba(255,255,255,0.7);}
#header a {background-image:url(../imgs/bpma_architectes_saint_brieuc-logo.png); background-repeat:no-repeat; background-position:top left -5px; width:483px; padding:0 50px; height:60px; background-color:#000; transition: all 0.25s ease 0s; display:block; position:relative; overflow:hidden; color:#FFF;}
#header a span {color:#e3ce00;}
#header address {position:absolute; top:22px; left:232px; font-size:20px; line-height:20px; font-style:normal; font-family:'futurabook', Arial, Helvetica, sans-serif; text-transform:lowercase;}
.wide-container {position:relative; background:#FFF; height:100vh; z-index:10; overflow:hidden; display:block;}
.wide-container ul {padding:0; margin:0;}
.wide-container li img {min-height:100%;}
.menu {background-color: rgba(255,255,255,0.75); height:100vh; width:233px; position:fixed; left:0; top:0; z-index:20; transition: all 0.5s ease 0s;}
.opaque {background-color: rgba(255,255,255,1);}
.move {left:-200px; transition: all 0.5s ease 0s;}
.menu-label {position:absolute; display:block; right:0; top:0; margin-top:-50px; height:100vh; width:30px; cursor: pointer; z-index:10}
.menu-label span {
background-image: url(../imgs/menu-bt.png);
background-repeat:no-repeat;
background-position:top;
width:19px;
height:33px;
display:block;
position:absolute;
/*right:3px;*/
right:8px;
top:50%;
margin-top:60px;
transition: right 0.25s ease 0s;
/*border-radius: 25px;
border: 1px solid #999;*/
padding:3px;
}
.menu-label:hover span {right:14px;}

.move .menu-label:hover span {right:1px;}
.move .menu-label span {background-position:bottom; right:5px; }

.menu-toggle {display:none;}

#menu ul {position:absolute; top:85px; right:0;}
#menu li {font-family: 'tex_gyre_adventorregular', Arial, Helvetica, sans-serif; text-transform:uppercase; list-style-type:none; font-size:16px; line-height:18px;}
#menu a {color:#000; position:relative; display:block; padding:15px 0 15px 80px; width:153px; transition: all 0.5s ease 0s;}
#menu a:before {content:""; display:block; background:#e3ce00; width:12px; height:12px; position:absolute; top:19px; left:-12px; transition: all 0.5s ease 0s;}
#menu a.select:before {background:#000;}
#menu a.select:before, #menu a:hover:before {left:60px;}
#menu a.select:hover:before {background:#e3ce00;}
#menu a.facebook:before {display:none;}
#menu a.facebook {height:20px; width:20px; background-image: url(../imgs/facebook_logo.png); background-repeat:no-repeat; background-position:top; padding:0; margin-top:15px; margin-left:80px; transition:none;}
#menu a.facebook:hover {background-position:bottom;}
.max {max-width:1200px; margin:0 auto;}
#contener {min-height:200px; padding:80px 50px; z-index:5; position:relative;}
#footer {color:#FFF; padding:20px 30px 5px 30px; background:#000; font-family:'futurabook', Arial, Helvetica, sans-serif; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; }
#footer div {display:inline-block; margin-bottom:20px; }
#footer address {color:#FFF; font-style:normal; font-size:14px;}
#footer address span {color:#e3ce00;}
#footer address h4, .liens li:nth-child(1) a {position:relative;}
#footer address h4 {font-family:'futurabook', Arial, Helvetica, sans-serif; padding-top:3px; padding-bottom:6px; text-transform:lowercase; font-size:22px; line-height:16px;}
#footer h4 + p {text-transform:lowercase;}
.liens, #footer .adresse {margin-bottom:20px; padding-left:28px;}
.liens a {color:#FFF; font-size:12px; line-height:14px; display:inline-block; padding:3px 10px 3px 0;}
.liens a {display:block;}
.liens a:hover {color:#e3ce00;}
.liens li:nth-child(1) a {color:#e3ce00; font-size:18px; line-height:16px; text-transform:uppercase; font-family:'tex_gyre_adventorregular', Arial, Helvetica, sans-serif;}
.liens li:nth-child(1) a:before, #footer address h4:before {content:""; display:block; background:#e3ce00; width:13px; height:13px; position:absolute;}
.liens li:nth-child(1) a:before {left:-24px; top:5px;}
#footer address h4:before {left:-24px; top:5px;}

@media screen and (max-width:480px){
#contener {padding:30px 33px;}
.wide-container {padding-bottom:60px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
}
@media screen and (max-width:639px){
.wide-container li div {display:none}
slide-in-top{opacity:1}
}
@media screen and (max-width:767px){
.menu {left:-167px; position:fixed;}
.move {left:0;}
.menu-label span {background-image: url(../imgs/menu-bt-2.png);}
.move .menu-label span {background-image: url(../imgs/menu-bt.png)}
.menu-label:hover span {right:8px;}
.move .menu-label:hover span {right:8px;}
#footer.marge {margin-left:33px;}
}
@media screen and (min-width:480px) and (max-width:767px){
#contener {min-height:400px; padding:80px 50px;}	
}
@media screen and (max-width:767px){
#header a {width:200px; background-position: left -10px center; background-color:#000; padding:0;}	
.menu {width:200px;}
#menu a {padding:15px 0 15px 70px; width:130px;}
#menu a.select:before, #menu a:hover:before {left:50px;}
}
@media screen and (min-width:768px){
#cont {padding-bottom:169px;}
#footer {min-height:139px; margin-top:-169px; clear:both;}
}




