

ul, ol, a {
list-style-type:none;
text-decoration: none;
}
body{
overflow-x: hidden;
margin:0 auto;
cursor:crosshair;
background: #fff;
}
.content{
margin:0 auto;
background: #fafafa;
}
/*------------------------------------*\
    LOADER
\*------------------------------------*/
.loader{
position:fixed;
z-index:100000000000000000000000000000;
background: #fff;
top:0px;
left:0px;
height:100vh;
width:100%;
cursor:wait;
}
.loader #logo{
margin-top:25px;
}
.circle {
position: relative; 
max-width:10%;
margin-top:50px;
border-top: solid 1px #cacaca;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
-o-animation: spin 5s infinite linear;
-ms-animation: spin 5s infinite linear;
-khtml-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
@-webkit-keyframes spin {
  100% {-webkit-transform: scaleX(20);}
  }
@-moz-keyframes spin {100% {-moz-transform: scaleX(20);
  }
  }
@-o-keyframes spin {100% {-o-transform: scaleX(20);
  }
  }
@-ms-keyframes spin {100% {-ms-transform: scaleX(20);
  }
  }
@-khtml-keyframes spin {100% {-khtml-transform: scaleX(20);
  }
  }
@-keyframes spin {100% {transform: scaleX(20);
  }
  }




/* menu---------------------------------------------------- */
#nav-smart{ 
display:none;
}
#accueil{
background: #fff;
width:100%;
height:85px; 
}
#menu-global{ 
z-index:100000;
position: absolute;
width:100%;
height:85px;
top: 85px; /*hauteur du accueil*/
background:#fff;
}
#menu-global.fixe { 
position:fixed;
top: 0px;
height:55px;
border-bottom: 1px #e7e7e7 solid;
}
#menu-global.fixe #menu a{ 
opacity:0.8;
}
#menu-global.fixe #menu a:hover{ 
color:#ed5045;
}
#menu-global #menu{
float:right !important;
color:black;
right:12%;
}
.photo{
right:24px;
}
#menu-global #menu a{
font-size:0.95em;
font-family: 'Fira Sans Condensed', sans-serif;
font-weight:300;
letter-spacing:0.18em;
text-transform:uppercase;
color:black;
}
#menu-global #menu a:hover{
color:#ed5045 !important;
cursor: pointer;
}
#menu-global #menu #instagram{
opacity:0.6;
margin-top:-1px;
}
#menu-global #menu #instagram:hover{
opacity:0.9;

}
li {
float: left;
list-style-type:none;
text-decoration: none;
}
#top-menu a {
display: inline-block;
padding-left:22px;
text-decoration: none;
}
#top-menu a:hover {
color: #ed5045;
}
#top-menu li.active a {
color: #ed5045 !important;
}


/* header---------------------------------------------------- */
#header{
background: #fff;
width:100%;
height:107px; 
}
#logo{
z-index:100000000;
left:12%;
top:20px;
width:270px;
height:94px;
background: url("../img/noir.svg") left 0 no-repeat;
}
#l1{
font-size:0.97em;
left:0%;
top:150px;
width:100%;
height:114px;
background: url("../img/01.png") left 0 no-repeat;
border-bottom: solid 1px #d7d7d7;
}
#l2{
font-size:0.97em;
left:0%;
top:150px;
width:100%;
height:114px;
background: url("../img/02.png") left 0 no-repeat;
border-bottom: solid 1px #d7d7d7;
}
#l3{
font-size:0.97em;
left:0%;
top:150px;
width:100%;
height:114px;
background: url("../img/03.png") left 0 no-repeat;
border-bottom: solid 1px #d7d7d7;
}
#espace{
width:100%;
height:154px;
}
#rmtap{ 
top:43px; 
left:65px;
font-size:2.10em;
font-family: 'Fira Sans Condensed', sans-serif;
font-weight:300;
letter-spacing:0.10em;
color:black;
}
#rmtap a{
letter-spacing:0em;
color: #ed5045;
}
#rmtit{
top:42px; 
left:92px;
font-size:1.90em;
font-family: 'Fira Sans Condensed', sans-serif;
text-transform: uppercase;
color: #00121f;
font-weight:300;
letter-spacing:0.15em;
}


/* slide ---------------------------------------------------- */

#line{
background: #fff;
width:100%;
height: 25px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
}
#slidevisu{
background: url("../img/1dex.png") center 0 no-repeat fixed;
width:100%;
height:85vh;
margin-top: 0px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
}


/* atelier---------------------------------------------------- */
#slide4{
width:80%;
max-width:1020px;
height:990px;
margin:0 auto;
}
 #atelier{
background: #fff;
width:100%;
height:185px; 
}
#logoatelier{
left:14%;
top:20px;
z-index:100000000000000;
width:237px;
height:94px;
background: url("../img/atelier.png") left 0 no-repeat;
}
#photoatelier{
background: url("../img/image5.jpg") center 0 no-repeat fixed;
width:100%;
height:600px;
color:#fff;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
font-weight: 200px;
line-height:55px;
font-size:45px;
}
#presentation{
width:100%;
height:190px;
font-size:1.7em;
letter-spacing:2px;
color:#00121f;
}
#span{ 
padding-top:100px;
width:100%;
text-align:left;
color:#00121f;
float:left;
font-family: 'Fira Sans', sans-serif;
font-weight:600;
letter-spacing:2px;
font-size:1.5em;
line-height:45px;
}
.texte2 { 
width:100%;
margin: 0 auto;
text-align:center;
font-family: 'Fira Sans', sans-serif;
font-weight:300;
font-size:1.5em;
letter-spacing:0.05em;
}
#chapeau{ 
width:31%;
text-align:left;
float:left;
color:#5a6064;
font-family: 'Fira Sans', sans-serif;
font-weight:400;
font-size:0.70em;
line-height:29px;
}
#petit{ 
width:61%;
text-align:left;
float:left;
color:#5a6064;
font-family: 'Fira Sans', sans-serif;
font-weight:300;
font-size:0.70em;
line-height:29px;
margin-left:7%;
}


/* galerie---------------------------------------------------- */
#slide6{
width:80%;
max-width:1020px;
height:1240px;
margin-top:-6px;
margin:0 auto;
}
#galerie{
width:100%;
height:185px;  
}
#logogalerie{
left:14%;
top:20px;
z-index:100000000000000;
width:232px;
height:94px;
background: url("../img/galerie.png") left 0 no-repeat;
}
#photogalerie{
background: url("../img/image2.jpg") center 0 no-repeat fixed;
width:100%;
height:600px;
color:#fff;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
font-weight: 200px;
line-height:55px;
font-size:45px;
}
#fauteuils{
background: url("../img/artisan2.png") right 0 no-repeat;
margin:0 auto;
width:299px;
height:170px;
}

/* contact---------------------------------------------------- */
#slide8{
width:80%;
max-width:1020px;
height:1050px;
margin:0 auto;
}
#coordonees span{ 
padding-top:100px;
width:100%;
text-align:left;
color:#00121f;
float:left;
font-family: 'Fira Sans', sans-serif;
font-weight:600;
letter-spacing:2px;
font-size:1.7em;
line-height:45px;
}
/* 1*/
#picto1{ 
width:20%;
max-width:50px;
height:100px;
float:left;
}
#picto1 img{ 
width:30px;
height:30px;
margin-top:25px;
margin-bottom:25px;
}
#adresse1{ 
padding-top:15px;
padding-left:20px;
width:80%; height:100px;
text-align:left;
float:left;
color:#293239;
float:left;
font-family: 'Fira Sans', sans-serif;
font-weight:300;
font-size:0.70em;
line-height:25px;
}
/* 2*/
#picto2{
width:20%;
max-width:50px;
height:100px;
float:left;
}
#picto2 img{ 
width:30px;
height:30px;
margin-top:25px;
margin-bottom:25px;
}
#tel2{
text-decoration: none;
padding-top:15px;
padding-left:20px;
width:80%;height:100px;
text-align:left;
float:left;
color:#293239;
float:left;
font-family: 'Fira Sans', sans-serif;
font-weight:300;
font-size:0.70em;
line-height:25px;
}
/* 3*/
#picto3{ 
width:20%;
max-width:50px;
height:100px;
float:left;
}
#picto3 img{ 
width:30px;
height:30px;
margin-top:25px;
margin-bottom:25px;
}
#mail3{ 
padding-left:20px;
float:left;
width:80%;height:100px;
}
#mail3-smart{ 
display:none;
}


/* bouton mail*/

.box {
width: 190px; height: 45px;
position: relative;
cursor: pointer;
-webkit-transition: background 0.4s 0.5s;
moz-transition: background 0.4s 0.5s;
-o-transition: background 0.4s 0.5s;
-ms-transition: background 0.4s 0.5s;
-khtml-transition: background 0.4s 0.5s;
transition: background 0.4s 0.5s;
}
.box:hover {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
-khtml-transition-delay: 0s;
transition-delay: 0s; 
}
.box svg {
position: relative;
margin-top:20px;
}
.box svg line {
stroke: #cacaca;
stroke-width: 2;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
-khtml-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;  
}
.box:hover svg line {
stroke-width: 2;
stroke: #606060;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
-khtml-transition-delay: 0.1s;
transition-delay: 0.1s; 
}
.box svg line.top,
.box svg line.bottom {
stroke-dasharray: 330 240; 
}
.box svg line.left,
.box svg line.right {
stroke-dasharray: 490 400;
}
.box:hover svg line.top {
-webkit-transform: translateX(-600px);
-moz-transform: translateX(-600px);
-o-transform: translateX(-600px);
-ms-transform: translateX(-600px);
-khtml-transform: translateX(-600px);
transform: translateX(-600px);
}
.box:hover svg line.bottom {
-webkit-transform: translateX(600px);
-moz-transform: translateX(600px);
-o-transform: translateX(600px);
-ms-transform: translateX(600px);
-khtml-transform: translateX(600px);
transform: translateX(600px);
}
.box:hover svg line.left {
-webkit-transform: translateY(920px);
-moz-transform: translateY(920px);
-o-transform: translateY(920px);
-ms-transform: translateY(920px);
-khtml-transform: translateY(920px);
transform: translateY(920px);
}
.box:hover svg line.right {
-webkit-transform: translateY(-920px);
-moz-transform: translateY(-920px);
-o-transform: translateY(-920px);
-ms-transform: translateY(-920px);
-khtml-transform: translateY(-920px);
transform: translateY(-920px);
}
a .box #p{ 
text-align:center;
color:#000;
font-family: 'Fira Sans', sans-serif;
font-size:0.61em;
font-weight:300;
}
#p{ 
margin-top:-37px;
}
/* bouton fin*/
#texte{ 
width:35%;
float:left;
margin-top:70px;
}
#photo{ 
background:url("../img/boutique.svg")right no-repeat;
max-width:65%;
width:100%;height:400px;
text-align:left;
float:left;
margin-top:0px;
}
#map{
width:100%;
height:670px;
margin-top: -16px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
}
/* footer---------------------------------------------------- */
#footer{
background: url("../img/footer.jpg") center 0 no-repeat;
width:100%;
height:650px;
margin-top: 0px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
}
#slidefooter{
background: #00060b;
width:100%;
height:600px;
color:#fff;
margin-top: -16px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;
-khtml-background-size:cover;
background-size:cover;
}
#logofooter{
opacity:0.5;
padding-bottom:360px;
height:58px;
width:77px;
top:100px;
margin: 0 auto;
background: url("../img/top.png") center 0 no-repeat;
-webkit-transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
-ms-transition: 0.2s ease-out;
-khtml-transition: 0.2s ease-out;
transition: 0.2s ease-out;  
}
#logofooter:hover{
opacity:1;
top:90px;
}
#slidefooter .simple_overlay{ 
margin:0 auto;
display:none;
z-index:10000;
background:#00060b;
width:100%;
height:400px;
position:relative;
margin-top:-350px;
}
#slidefooter .simple_overlay .close {
z-index:100000000000000000000;
background-image:url(../img/close.png)center; 
top:270px;
right:49%;
cursor:pointer;
height:50px;
width:50px;
margin:0 auto;
opacity:0.6;
}
#slidefooter .simple_overlay .close:hover { 
background-image:url(../img/close.png)center; 
opacity:1;
}
.texte3{ 
border-bottom :solid 1px #353535;
margin: 0 auto;
width:80%;
font-family: 'Fira Sans', sans-serif;
font-weight:300;
text-transform: uppercase;
letter-spacing:0.05em;
font-size:0.72em;

}
#tdr{ 
padding-top:10px;
text-align:left;
width:50%;
float:left;
color:#434343;
}
.texte3 .customOverlay{ 
padding-top:23px;
width:50%;
float:left;
text-align:right;
cursor:pointer;
color:#434343;
}
.texte3 .customOverlay:hover{ 
color:#5b5b5b;
}
.ml {
background:url(../img/ml.png)center 0 no-repeat; 
width:279px;
height:244px;
margin: 0 auto;
}

































