*{
    outline:none;
}
html{
    background: url(../images/fond.jpg) no-repeat center center fixed ;
    background-size: 100% 100% ;
    font:16px 'Source Code Pro';
    color:rgb(93, 67, 37);
    margin:0;
    -ms-overflow-x: hidden;
    overflow-x: hidden;

}


.container {
    width: 1200px;
    margin: 17rem auto 3rem auto;
    position: relative;
    /*height: 3200px !important;*/
}
h1,h2,h3,p{
    margin:0;
    padding: 0;
    font-weight: 500;
}
h1{
    font-size: 3rem;
}
a{
    color:rgb(75, 54, 29);
    text-decoration: none;
}
a:hover{
    color:rgb(57, 41, 22);
    text-decoration: underline;
}

/*menu*/

.menu{
    font-size: 1.1rem;
    font-weight: 700 ;
    position: fixed;
    top:0rem;
    width: 75rem;
    z-index: 100;
    -webkit-transition: all ease 500ms ;
    -moz-transition: all ease 500ms ;
    -ms-transition: all ease 500ms ;
    -o-transition: all ease 500ms ;
    transition: all ease 500ms ;

}

.menu ul{
    position:relative;
    display: table;
    margin:0 auto ;
    padding:0 1rem;
    background: url(../images/craft.jpg) ;
    background-size: 50% ;
    border-radius: 3px;
    width: 73rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .1) inset,
    0 -2px 0 rgba(0, 0, 0, .1) inset,
    0 -3px 0 rgba(0, 0, 0, .1) inset,
    -1px 0 0 rgba(0, 0, 0, .1) inset;
}

.menu ul li{
    display: table-cell;
}


.menu ul li a{
    display: block;
    position: relative;
    text-align: center;
    color:rgb(93, 67, 37);
    text-decoration: none;
    padding: 13px 18px 23px 8px ;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .1) inset,
    0 -2px 0 rgba(0, 0, 0, .1) inset,
    0 -3px 0 rgba(0, 0, 0, .1) inset;
    -webkit-transition: all 1s ;
    -moz-transition: all 1s ;
    -ms-transition: all 1s ;
    -o-transition: all 1s ;
    transition: all 1s ;
    transition: all 1s;

}
.mail{
    display: none;
}
/*hamburger*/

.is-closed, .is-opened{
    margin: 0;
    padding: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    right:.5rem;
    top:2.2rem;
    background:rgba(67, 48, 26,.1) ;
    border-radius:50%;
    display: none;
}
svg {
    width: 60px;
    height: 55px;
    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
path {
    fill: none;
    -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    stroke-width: 50px;
    stroke-linecap: round;
    stroke: rgb(67, 48, 26);
;
    stroke-dashoffset: 0px;
}
path#top,
path#bottom {
    stroke-dasharray: 240px 950px;
}
path#middle {
    stroke-dasharray: 240px 240px;
}
.is-opened path#top,
.is-opened path#bottom {
    stroke-dashoffset: -650px;
    stroke-dashoffset: -650px;
}
.is-opened path#middle {
    stroke-dashoffset: -115px;
    stroke-dasharray: 1px 220px;
}
.home{
    cursor: pointer;
}


.menu ul li:nth-child(1) {
    background: url(../images/accolade.png) no-repeat 0 3rem,  url(../images/accolade-reverse.png) no-repeat 260px 3rem;
    background-size:25px 170px;
    padding:3rem;
    padding-left: 2rem;
    border-radius:0 0 5px 5px;
    /*color: rgb(67, 48, 26);*/

}

.menu ul li:nth-child(1) h1{
    padding: 0;
    font-size:3rem ;
    font-weight: 400;
}
.menu ul li:nth-child(1) p{
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: .7rem;

    margin:.5rem 0;
}
.menu ul li:nth-child(1) p+p{
    margin:.8rem 0;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: -.13rem;

}



.menu ul li a::before{
    content: '';
    display:none;
    position: absolute;
    left: 45%;
    bottom: 3.3em;
    margin-left: 0px;
    width: 8px;
    height: 8px;

    background: rgba(93, 67, 37,.5);
}



.menu ul li a:hover::before,
.menu ul li a:focus::before{
    background: rgba(93, 67, 37, 1);
    box-shadow: 0 0 2px rgba(255, 255, 255, .4),
    0 -1px 0 rgba(0, 0, 0, .3);
}



.menu ul li a:hover,
.menu ul li a:focus{
    padding:13px 25px 23px 25px;
    background: rgba(93, 67, 37, 0.08);
    box-shadow: 0 -3px 10px rgba(93, 67, 37, 0.2) inset,
    0 -6px 10px rgba(93, 67, 37, 0.1) inset,
    0 -9px 10px rgba(93, 67, 37, 0.1) inset;
    transition: all 1s 0s;
}


.menu ul li a:active{
    background: -webkit-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:      -o-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:         linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));

    box-shadow: 0 0 2px rgba(93, 67, 37, 0.3) inset;
}


.footer{
    font:1rem Merriweather;
    background: url("../images/encre.png") no-repeat -50px -150px,url(../images/craft.jpg) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    /*height: 380px;*/
    color: rgb(67, 48, 26);

}
.footer ul{
    padding: 3rem;
    padding-left: 6rem;

}

.footer .fa{
    font-size: 1.3rem;
}
.footer .fa:hover{
    color:#000000;
}
.footer ul li{
    list-style: none;


}
.footer h3{
    font-size: 2rem;
    color:#000000;

}

.footer h3, .footer p{
    margin:0;
    padding:0;
    font-weight: 500;
}

.footer sup{
    font-size:3rem;
    line-height: 1.3rem;
    font-weight: 500;
    color: rgb(67, 48, 26);

}
.footer .phonetique {
    color: rgb(67, 48, 26) !important;
}
.footer p, .footer a{
    color: #000000;
    font-size: 1.2rem;

}
/*end menu*/

article h1{
    font-weight: 300;
    padding: 2rem;

}

article{
    position: relative;
    float:left;
    width: 46%;
    height:600px;
    background: url(../images/craft.jpg) no-repeat center center  ;
    background-size: cover;
    border-radius:5px;
    margin:1rem 0 0 1rem;
    padding: .5rem;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .1) inset,
    0 -2px 0 rgba(0, 0, 0, .1) inset,
    0 -3px 0 rgba(0, 0, 0, .1) inset;

}

/*The Cube1*****************************/

.cube{
    display: block;
    position: absolute;
    top:280px;
    left:250px;
    -webkit-perspective: 500px;
    -webkit-transform-origin:50% 50%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(45deg) rotateX(-25deg);
    -webkit-transition-duration:2s;

    -moz-perspective: 500px;
    -moz-transform-origin:50% 50%;
    -moz-transform-style: preserve-3d;
    -moz-transform: rotateY(45deg) rotateX(-25deg);
    -moz-transition-duration:2s;

    -ms-perspective: 500px;
    -ms-transform-origin:50% 50%;
    -ms-transform-style: none;
    -ms-transform: none;
    -ms-transition-duration:2s;

    -o-perspective: 500px;
    -o-transform-origin:50% 50%;
    -o-transform-style: preserve-3d;
    -o-transform: rotateY(45deg) rotateX(-25deg);
    -o-transition-duration:2s;

    perspective: 500px;
    transform-origin:50% 50%;
    transform-style: preserve-3d;
    transform: rotateY(45deg) rotateX(-25deg);
    transition-duration:2s;

}



span{
    display: block;
    background: url(../images/craft.jpg) no-repeat ;
    background-size: 200%;
    position: absolute;
    width: 78px;
    height: 78px;
    border: 3px dotted rgb(93, 67, 37);
    -webkit-transition-duration:2s;
    -moz-transition-duration:2s;
    -ms-transition-duration:2s;
    -o-transition-duration:2s;
    transition-duration:2s;
    opacity: 1;



}
/*Front*********************************/
.front{
    -webkit-transform: translateZ(40px) rotateX(-35deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: bottom;

    -moz-transform: translateZ(40px) rotateX(-35deg);
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: bottom;

    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateZ(40px)rotateY(45deg) rotateX(-82deg);
    -ms-transform-style: preserve-3d;
    -ms-transform-origin: bottom;

    -o-transform: translateZ(40px) rotateX(-35deg);
    -o-transform-style: preserve-3d;
    -o-transform-origin: bottom;

    transform: translateZ(40px) rotateX(-35deg);
    transform-style: preserve-3d;
    transform-origin: bottom;

}
.front:hover {
    -webkit-transform: translateZ(40px) rotateX(-70deg);
    -moz-transform: translateZ(40px) rotateX(-70deg);
    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform: perspective(500px) translateZ(40px) rotateX(-95deg)rotateY(45deg);
    -o-transform: translateZ(40px) rotateX(-70deg);
    transform: translateZ(40px) rotateX(-70deg);
}



/*Back***********************/
.back{
    -webkit-transform: translateZ(-40px);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: bottom;

    -moz-transform: translateZ(-40px);
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: bottom;

    -ms-transform:translateZ(-40px);
    /*-ms-transform: translateZ(-40px);*/
    -ms-transform-style: none;
    -ms-transform-origin: bottom;

    -o-transform: translateZ(-40px);
    -o-transform-style: preserve-3d;
    -o-transform-origin: bottom;

    transform: translateZ(-40px);
    transform-style: preserve-3d;
    transform-origin: bottom;

}
.back:hover {
    -webkit-transform: translateZ(-40px) rotateX(45deg);
    -moz-transform: translateZ(-40px) rotateX(45deg);
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform: perspective(500px) translateZ(-5px) rotateX(20deg);
    -o-transform: translateZ(-40px) rotateX(45deg);
    transform: translateZ(-40px) rotateX(45deg);

}

/*Back languet left**************/
.back-languet{
    -webkit-transform: translateX(-31px) rotateX(0deg) rotateY(-10deg);
    -moz-transform: translateX(-31px) rotateX(0deg) rotateY(-10deg);
    -ms-transform: translateX(-31px) rotateX(0deg) rotateY(-10deg);
    -o-transform: translateX(-31px) rotateX(0deg) rotateY(-10deg);
    transform: translateX(-31px) rotateX(0deg) rotateY(-10deg);
    left:-1.2px;
    width:30px;
    height: 79px;
    -webkit-transform-origin: right;
    -moz-transform-origin: right;
    -ms-transform-origin: right;
    -o-transform-origin: right;
    transform-origin: right;
    box-shadow: none;
    border:none;
    overflow:hidden;



}
.back-languet:hover{
    -webkit-transform:translateX(-30px)  rotateY(-90deg) !important;
    -moz-transform:translateX(-30px)  rotateY(-90deg) !important;
    -ms-transform:translateX(-30px)  rotateY(-90deg) !important;
    -o-transform:translateX(-30px)  rotateY(-90deg) !important;
    transform:translateX(-30px)  rotateY(-90deg) !important;

}



.back-languet-cache-rigth{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(45deg) translateX(-30px);
    -moz-transform: rotate(45deg) translateX(-30px);
    -ms-transform: rotate(45deg) translateX(-30px);
    -o-transform: rotate(45deg) translateX(-30px);
    transform: rotate(45deg) translateX(-30px);

}

.back-languet-cache-left{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;
    -webkit-transform: rotate(-45deg) translateY(25px) translateX(-55px);
    -moz-transform: rotate(-45deg) translateY(25px) translateX(-55px);
    -ms-transform: rotate(-45deg) translateY(25px) translateX(-55px);
    -o-transform: rotate(-45deg) translateY(25px) translateX(-55px);
    transform: rotate(-45deg) translateY(25px) translateX(-55px);

}
.back-languet-cache-top{

    width: 40px;
    height: 20px;
    background: none;
    border-bottom:none;
    border-top:none;
    border-right:none;
    -webkit-transform:  translateY(40px) translateX(0px);
    -moz-transform:  translateY(0) translateX(0px);
    -ms-transform:  translateY(0) translateX(0px);
    -o-transform:  translateY(0) translateX(0px);
    transform:  translateY(30px) translateX(0px);

}

/*Back languet right*******/
.back-right-languet{
    -webkit-transform: translateX(81px);
    -moz-transform: translateX(81px);
    -ms-transform: translateX(81px);
    -o-transform: translateX(81px);
    transform:translateX(81px);
    left:-1.2px;
    width:30px;
    height: 79px;

    box-shadow: none;
    border:none;
    border-left: 2px dotted rgb(149, 108, 59);
    overflow: hidden ;


}

.back-right-languet:hover {

    -webkit-transform: translateX(81px) rotateY(-35deg);
    -moz-transform: translateX(81px)rotateY(-35deg);
    -ms-transform: translateX(81px)rotateY(-35deg);
    -o-transform: translateX(81px)rotateY(-35deg);
    transform: translateX(81px)rotateY(-35deg);

    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    left: -4px;

}




.back-right-languet-cache-left{
    width: 40px;
    height: 40px;
   background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(45deg) translateX(-10px)translateY(-20px);
    -moz-transform: rotate(45deg) translateX(-10px)translateY(-20px);
    -ms-transform: rotate(45deg) translateX(-10px)translateY(-20px);
    -o-transform: rotate(45deg) translateX(-10px)translateY(-20px);
    transform: rotate(45deg) translateX(-10px)translateY(-20px);
}

.back-right-languet-cache-rigth{

    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;
    box-shadow: none;
    -webkit-transform: rotate(-45deg) translateX(-38px) translateY(47px);
    -moz-transform: rotate(-45deg) translateX(-38px) translateY(47px);
    -ms-transform: rotate(-45deg) translateX(-38px) translateY(47px);
    -o-transform: rotate(-45deg) translateX(-38px) translateY(47px);
    transform: rotate(-45deg) translateX(-38px) translateY(47px);
}
.back-right-languet-cache-top{
    width: 40px;
    height: 20px;
    background: none;
    box-shadow: none;
    border-bottom:none;
    border-top:none;
    border-right:none;
    -webkit-transform:  translateY(32px) translateX(28px);
    -moz-transform:  translateY(32px) translateX(28px);
    -ms-transform:  translateY(32px) translateX(28px);
    -o-transform:  translateY(32px) translateX(28px);
    transform:  translateY(32px) translateX(28px);
}

/*Top*******************************************/
.top{
	-webkit-perspective: 500px;
    -webkit-transform-origin:bottom;
	-webkit-transform: translateY(-82px) rotateX(-30deg);
    -webkit-transform-style: preserve-3d;


    -moz-perspective: 500px;
    -moz-transform-origin:bottom;
    -moz-transform: translateY(-82px) rotateX(-30deg);
    -moz-transform-style: preserve-3d;


    -ms-perspective: 500px;
    -ms-transform-origin:bottom;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg); //-ms-transform: translateZ(-40px);*/
    -ms-transform:perspective(500px) translateY(-82px) rotateX(-30deg) translateZ(-40px);

    -o-perspective: 500px;
    -o-transform-origin:bottom;
    -o-transform: translateY(-82px) rotateX(-30deg);
    -o-transform-style: preserve-3d;


    perspective: 500px;
    transform-origin:bottom;
    transform: translateY(-82px) rotateX(-30deg);
    transform-style: preserve-3d;

    left:-2px;


}
.top:hover{

    -webkit-transform: translateY(-85px) rotateX(-60deg);
    -moz-transform: translateY(-85px) rotateX(-60deg);
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/

    -ms-transform:perspective(500px) translateY(-40px) rotateX(-85deg);
    -o-transform: translateY(-85px) rotateX(-60deg);
    transform: translateY(-85px) rotateX(-60deg);

}

.top-languet{
    -webkit-transform: translateY(-32px) rotateX(0deg);
    -moz-transform: translateY(-32px) rotateX(0deg);
    -ms-transform: translateY(-32px) rotateX(0deg);
    -o-transform: translateY(-32px) rotateX(0deg);
    transform: translateY(-32px) rotateX(0deg);
    left:-1.2px;
    height:30px;
    width: 79px;

    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    box-shadow: none;
    border:none;
    border-bottom: 2px dotted rgb(149, 108, 59);
    overflow: hidden;


}
.top-languet:hover{
    -webkit-transform: translateY(-33px) rotateX(-45deg);
    -moz-transform: translateY(-33px) rotateX(-45deg);
    -ms-transform: translateY(-33px) rotateX(-45deg);
    -o-transform: translateY(-33px) rotateX(-45deg);
    transform: translateY(-33px) rotateX(-45deg);




}
.top-languet-cache-rigth{
    width: 40px;
    height: 40px;
   background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(45deg) translateX(-30px);
    -moz-transform: rotate(45deg) translateX(-30px);
    -ms-transform: rotate(45deg) translateX(-30px);
    -o-transform: rotate(45deg) translateX(-30px);
    transform: rotate(45deg) translateX(-30px);

}

.top-languet-cache-left{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -moz-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -ms-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -o-transform: rotate(-45deg) translateY(28px) translateX(57px);
    transform: rotate(-45deg) translateY(28px) translateX(57px);

}
.top-languet-cache-top{

    width: 20px;
    height: 40px;
    background: transparent;
    box-shadow: none;
    border-bottom:none;
    border-left:none;
    border-right:none;
    -webkit-transform:  translateY(0) translateX(29px);
    -moz-transform:  translateY(0) translateX(29px);
    -ms-transform:  translateY(0) translateX(29px);
    -o-transform:  translateY(0) translateX(29px);
    transform:  translateY(0) translateX(29px);

}

/*Bottom**************************************/
.bottom{
    -webkit-transform: rotateX(90deg) translateZ(-40px);
    -moz-transform: rotateX(90deg) translateZ(-40px);
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateX(135deg) translateZ(-40px) rotateX(-25deg);
    -o-transform: rotateX(90deg) translateZ(-40px);
    transform: rotateX(90deg) translateZ(-40px);
    -webkit-transform-style:preserve-3d ;
    -moz-transform-style:preserve-3d ;
    -moz-transform-style:preserve-3d ;
    -ms-transform-style:none ;
    transform-style:preserve-3d ;
    border-bottom: none;


}

/*Left**************************************/
.left{
    -webkit-transform: rotateY(90deg) translateZ(-40px) rotateX(90deg);
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;


    -moz-transform: rotateY(90deg) translateZ(-40px) rotateX(90deg);
    -moz-transform-origin: bottom;
    -moz-transform-style: preserve-3d;


    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) rotateX(65deg) translateZ(-40px);
    -ms-transform-origin: bottom;

    -o-transform: rotateY(90deg) translateZ(-40px) rotateX(90deg);
    -o-transform-origin: bottom;
    -o-transform-style: preserve-3d;


    transform: rotateY(90deg) translateZ(-40px) rotateX(90deg);
    transform-origin: bottom;
    transform-style: preserve-3d;
    border-bottom: none ;


}
.left:hover{
	-webkit-transform: rotateY(90deg) translateZ(-40px) rotateX(75deg);
    -moz-transform: rotateY(90deg) translateZ(-40px) rotateX(75deg);
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) translateZ(-40px) rotateX(50deg);
    -o-transform: rotateY(90deg) translateZ(-40px) rotateX(75deg);
    transform: rotateY(90deg) translateZ(-40px) rotateX(75deg);

}
.left-languet{
    -webkit-transform: translateY(-32px) rotateX(-15deg);
    -moz-transform: translateY(-32px) rotateX(-15deg);
    -ms-transform: translateY(-32px) rotateX(-15deg);
    -o-transform: translateY(-32px) rotateX(-15deg);
    transform: translateY(-32px) rotateX(-15deg);
    left:-1.2px;
    height:30px;
    width: 79px;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    box-shadow: none;
    border:none;
    border-bottom: 2px dotted rgb(149, 108, 59);
    overflow: hidden;


}
.left-languet:hover{
    -webkit-transform: translateY(-33px) rotateX(-45deg);
    -moz-transform: translateY(-33px) rotateX(-45deg);
    -ms-transform: translateY(-33px) rotateX(-45deg);
    -o-transform: translateY(-33px) rotateX(-45deg);
    transform: translateY(-33px) rotateX(-45deg);




}
.left-languet-cache-rigth{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(45deg) translateX(-30px);
    -moz-transform: rotate(45deg) translateX(-30px);
    -ms-transform: rotate(45deg) translateX(-30px);
    -o-transform: rotate(45deg) translateX(-30px);
    transform: rotate(45deg) translateX(-30px);

}

.left-languet-cache-left{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -moz-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -ms-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -o-transform: rotate(-45deg) translateY(28px) translateX(57px);
    transform: rotate(-45deg) translateY(28px) translateX(57px);

}
.left-languet-cache-top{

    width: 20px;
    height: 40px;
    background: transparent;
    box-shadow: none;
    border-bottom:none;
    border-left:none;
    border-right:none;
    -webkit-transform:  translateY(0) translateX(29px);
    -moz-transform:  translateY(0) translateX(29px);
    -ms-transform:  translateY(0) translateX(29px);
    -o-transform:  translateY(0) translateX(29px);
    transform:  translateY(0) translateX(29px);

}

/*Right**************************************/
.right{
    -webkit-transform: rotateY(90deg) translateZ(40px)rotateX(-45deg);
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;

    -moz-transform: rotateY(90deg) translateZ(40px)rotateX(-45deg);
    -moz-transform-origin: bottom;
    -moz-transform-style: preserve-3d;

    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) translateZ(40px)rotateX(-45deg);
    -ms-transform-origin: bottom;
    -ms-transform-style: preserve-3d;

    -o-transform: rotateY(90deg) translateZ(40px)rotateX(-45deg);
    -o-transform-origin: bottom;
    -o-transform-style: preserve-3d;

    transform: rotateY(90deg) translateZ(40px)rotateX(-45deg);
    transform-origin: bottom;
    transform-style: preserve-3d;



}
.right:hover{
    -webkit-transform: rotateY(90deg) translateZ(40px) rotateX(-95deg);
    -webkit-transform-origin: bottom;

    -moz-transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    -moz-transform-origin: bottom;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) translateZ(40px) rotateX(-40deg);
    -ms-transform-origin: bottom;

    -o-transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    -o-transform-origin: bottom;

    transform: rotateY(90deg) translateZ(40px) rotateX(-95deg);
    transform-origin: bottom;

}
.rigth-languet{
    -webkit-transform: translateY(-32px) rotateX(15deg);
    -moz-transform: translateY(-32px) rotateX(15deg);
    -ms-transform: translateY(-32px) rotateX(15deg);
    -o-transform: translateY(-32px) rotateX(15deg);
    transform: translateY(-32px) rotateX(15deg);
    left:-1.2px;
    height:30px;
    width: 79px;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    box-shadow: none;
    border:none;
    border-bottom: 2px dotted rgb(149, 108, 59);
    overflow: hidden;


}
.rigth-languet:hover{
    -webkit-transform: translateY(-33px) rotateX(45deg);
    -moz-transform: translateY(-33px) rotateX(45deg);
    -ms-transform: translateY(-33px) rotateX(45deg);
    -o-transform: translateY(-33px) rotateX(45deg);
    transform: translateY(-33px) rotateX(45deg);




}
.rigth-languet-cache-rigth{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(45deg) translateX(-30px);
    -moz-transform: rotate(45deg) translateX(-30px);
    -ms-transform: rotate(45deg) translateX(-30px);
    -o-transform: rotate(45deg) translateX(-30px);
    transform: rotate(45deg) translateX(-30px);

}

.rigth-languet-cache-left{
    width: 40px;
    height: 40px;
    background: url(../images/craft.jpg) no-repeat    ;     background-size: 200%;

    box-shadow: none;

    -webkit-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -moz-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -ms-transform: rotate(-45deg) translateY(28px) translateX(57px);
    -o-transform: rotate(-45deg) translateY(28px) translateX(57px);
    transform: rotate(-45deg) translateY(28px) translateX(57px);

}
.rigth-languet-cache-top{

    width: 20px;
    height: 40px;
    background: transparent;
    box-shadow: none;
    border-bottom:none;
    border-left:none;
    border-right:none;
    -webkit-transform:  translateY(0) translateX(29px);
    -moz-transform:  translateY(0) translateX(29px);
    -ms-transform:  translateY(0) translateX(29px);
    -o-transform:  translateY(0) translateX(29px);
    transform:  translateY(0) translateX(29px);

}
/*Cube2******/
.right2{
    -webkit-perspective: 500px;
    -webkit-transform-origin:left;
    -webkit-transform: translateX(82px) ;
    -webkit-transform-style: preserve-3d;


    -moz-perspective: 500px;
    -moz-transform-origin:left;
    -moz-transform: translateX(82px) ;
    -moz-transform-style: preserve-3d;


    -ms-perspective: 500px;
    -ms-transform-origin:left;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg); //-ms-transform: translateZ(-40px);*/
    -ms-transform:perspective(500px)  translateX(82px) translateX(-82px)  translateZ(-40px);

    -o-perspective: 500px;
    -o-transform-origin:left;
    -o-transform: translateX(82px) ;
    -o-transform-style: preserve-3d;


    perspective: 500px;
    transform-origin:left;
    transform: translateX(82px) ;
    transform-style: preserve-3d;
    top:-3px;
    border-left: none;
}
.right2:hover {
    -webkit-transform: translateX(82px) rotateY(-25deg);
    -moz-transform: translateX(82px) rotateY(-25deg);
    -ms-transform: translateX(82px) rotateY(-25deg);
    -o-transform: translateX(82px) rotateY(-25deg);
    transform: translateX(82px) rotateY(-25deg) ;
}



.rigth-languet-cube2{
    -webkit-transform: translateY(45px) rotateX(-15deg) rotateZ(182deg);
    -moz-transform: translateY(45px) rotateX(-15deg) rotateZ(182deg);
    -ms-transform: translateY(45px) rotateX(-15deg) rotateZ(182deg);
    -o-transform: translateY(45px) rotateX(-15deg) rotateZ(182deg);
    transform: translateY(45px) rotateX(-15deg) rotateZ(182deg);

    height:30px;
    width: 79px;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    box-shadow: none;
    border:none;
    border-bottom: 2px dotted rgb(149, 108, 59);
    overflow: hidden;
}

.rigth-languet-cube2:hover {
    -webkit-transform: translateY(45px) rotateX(15deg) rotateZ(182deg) ;
    -moz-transform: translateY(45px) rotateX(15deg) rotateZ(182deg) ;
    -ms-transform: translateY(45px) rotateX(15deg) rotateZ(182deg);
    -o-transform: translateY(45px) rotateX(15deg) rotateZ(182deg);
    transform: translateY(45px) rotateX(15deg) rotateZ(182deg);

}

.rigth-languet2:hover{
    -webkit-transform: translateY(-33px) rotateX(-10deg);
    -moz-transform: translateY(-33px) rotateX(-10deg);
    -ms-transform: translateY(-33px) rotateX(-10deg);
    -o-transform: translateY(-33px) rotateX(-10deg);
    transform: translateY(-33px) rotateX(-10deg);

}
.back-right-languet2{
    left: -2px;
    top:-2px;
}
.back-right-languet2:hover {
    -webkit-transform: translateX(82px) rotateY(-35deg);
    -moz-transform: translateX(82px)rotateY(-35deg);
    -ms-transform: translateX(82px)rotateY(-35deg);
    -o-transform: translateX(82px)rotateY(-35deg);
    transform: translateX(82px)rotateY(-35deg);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    left: -6px;

}

.front2{
    -webkit-transform: translateZ(40px) rotateX(-82deg);
    -webkit-transform-origin: bottom;

    -moz-transform: translateZ(40px) rotateX(-82deg);
    -moz-transform-origin: bottom;

    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateZ(40px)rotateY(45deg) rotateX(-125deg);
    -ms-transform-origin: bottom;

    -o-transform: translateZ(40px) rotateX(-82deg);
    -o-transform-origin: bottom;

    transform: translateZ(40px) rotateX(-82deg);
    transform-origin: bottom;

}
.front2:hover {
    -webkit-transform: translateZ(40px) rotateX(-35deg);
    -moz-transform: translateZ(40px) rotateX(-35deg);
    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform: perspective(500px) translateZ(40px) rotateX(-60deg)rotateY(45deg);
    -o-transform: translateZ(40px) rotateX(-35deg);
    transform: translateZ(40px) rotateX(-35deg);
}

/*Cube3******/
.left3{
    -webkit-transform: translateX(-83px) ;
    -webkit-transform-origin: right;
    -webkit-transform-style: preserve-3d;


    -moz-transform: translateX(-83px) ;
    -moz-transform-origin: right;
    -moz-transform-style: preserve-3d;


    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:translateX(-83px) rotateY(45deg) rotateX(-25deg);
    -ms-transform-origin:right;

    -o-transform:  translateX(-83px) ;
    -o-transform-origin: right;
    -o-transform-style: preserve-3d;


    transform:translateX(-83px) ;
    transform-origin: right;
    transform-style: preserve-3d;


}

.left3:hover{
    -webkit-transform: translateX(-83px) rotateY(45deg);
    -moz-transform: translateX(-83px) rotateY(45deg);
    -ms-transform: translateX(-83px) rotateY(45deg);
    -o-transform: translateX(-83px) rotateY(45deg);
    transform: translateX(-83px) rotateY(45deg);

}
.back-right-languet3{
    left: -2px;
    top:-2px;
}
.back-right-languet3:hover {
    -webkit-transform: translateX(82px) rotateY(-35deg);
    -moz-transform: translateX(82px)rotateY(-35deg);
    -ms-transform: translateX(82px)rotateY(-35deg);
    -o-transform: translateX(82px)rotateY(-35deg);
    transform: translateX(82px)rotateY(-35deg);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    left:-6px;

}

/*cube4*/
.rotate{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rigth-languet4:hover{
    -webkit-transform: translateY(-32px) rotateX(-15deg);
    -moz-transform: translateY(-32px) rotateX(-15deg);
    -ms-transform: translateY(-32px) rotateX(-15deg);
    -o-transform: translateY(-32px) rotateX(-15deg);
    transform: translateY(-32px) rotateX(-15deg);

}

.left4{
    -webkit-transform: translateX(-83px) ;
    -webkit-transform-origin: right;
    -webkit-transform-style: preserve-3d;


    -moz-transform: translateX(-83px) ;
    -moz-transform-origin: right;
    -moz-transform-style: preserve-3d;


    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:translateX(-83px) rotateY(45deg) rotateX(-25deg);
    -ms-transform-origin:right;

    -o-transform:  translateX(-83px) ;
    -o-transform-origin: right;
    -o-transform-style: preserve-3d;


    transform:translateX(-83px) ;
    transform-origin: right;
    transform-style: preserve-3d;
    border-bottom: none;


}

.left4:hover{
    -webkit-transform: translateX(-83px) rotateY(-45deg);
    -moz-transform: translateX(-83px) rotateY(-45deg);
    -ms-transform: translateX(-83px) rotateY(-45deg);
    -o-transform: translateX(-83px) rotateY(-45deg);
    transform: translateX(-83px) rotateY(-45deg);

}
.back-languet4:hover{
    -webkit-transform:translateX(-32px)  rotateY(45deg);
    -moz-transform:translateX(-32px)  rotateY(45deg);
    -ms-transform:translateX(-32px)  rotateY(45deg);
    -o-transform:translateX(-32px)  rotateY(45deg);
    transform:translateX(-32px)  rotateY(45deg);
    top:0;
}

.front4{

    -webkit-transform: translateZ(40px) rotateX(-82deg);
    -webkit-transform-origin: bottom;

    -moz-transform: translateZ(40px) rotateX(-82deg);
    -moz-transform-origin: bottom;

    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateZ(40px)rotateY(45deg) rotateX(-125deg);
    -ms-transform-origin: bottom;

    -o-transform: translateZ(40px) rotateX(-82deg);
    -o-transform-origin: bottom;

    transform: translateZ(40px) rotateX(-82deg);
    transform-origin: bottom;
}

.front4:hover {
    -webkit-transform: translateZ(40px) rotateX(-70deg);
    -moz-transform: translateZ(40px) rotateX(-70deg);
    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform: perspective(500px) translateZ(40px) rotateX(-100deg)rotateY(45deg);
    -o-transform: translateZ(40px) rotateX(-70deg);
    transform: translateZ(40px) rotateX(-70deg);
}
.right4:hover {
    -webkit-transform: translateX(82px) rotateY(25deg);
    -moz-transform: translateX(82px) rotateY(25deg);
    -ms-transform: translateX(82px) rotateY(25deg);
    -o-transform: translateX(82px) rotateY(25deg);
    transform: translateX(82px) rotateY(25deg) ;
}

.rigth-languet-cube4{
    -webkit-transform: translateY(45px) rotateZ(182deg);
    -moz-transform: translateY(45px) rotateZ(182deg);
    -ms-transform: translateY(45px) rotateZ(182deg);
    -o-transform: translateY(45px) rotateZ(182deg);
    transform: translateY(45px)  rotateZ(182deg);

    height:30px;
    width: 79px;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
    box-shadow: none;
    border:none;
    border-bottom: 2px dotted rgb(149, 108, 59);
    overflow: hidden;
}

.rigth-languet4:hover{
    -webkit-transform: translateY(-33px) rotateX(-20deg);
    -moz-transform: translateY(-33px) rotateX(-20deg);
    -ms-transform: translateY(-33px) rotateX(-20deg);
    -o-transform: translateY(-33px) rotateX(-20deg);
    transform: translateY(-33px) rotateX(-20deg);

}



.back-right-languet4{
    left: -2px;
    top:-2px;
}
.back-right-languet4:hover {
    -webkit-transform: translateX(82px) rotateY(35deg);
    -moz-transform: translateX(82px)rotateY(35deg);
    -ms-transform: translateX(82px)rotateY(35deg);
    -o-transform: translateX(82px)rotateY(35deg);
    transform: translateX(82px)rotateY(35deg);
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
    




}

/*cube5*/
.top5{
    -webkit-perspective: 500px;
    -webkit-transform-origin:bottom;
    -webkit-transform: translateY(-82px) rotateX(0deg);
    -webkit-transform-style: preserve-3d;


    -moz-perspective: 500px;
    -moz-transform-origin:bottom;
    -moz-transform: translateY(-82px) rotateX(0deg);
    -moz-transform-style: preserve-3d;


    -ms-perspective: 500px;
    -ms-transform-origin:bottom;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg); //-ms-transform: translateZ(-40px);*/
    -ms-transform:perspective(500px) translateY(-82px) rotateX(0deg) translateZ(-40px);

    -o-perspective: 500px;
    -o-transform-origin:bottom;
    -o-transform: translateY(-82px) rotateX(0deg);
    -o-transform-style: preserve-3d;


    perspective: 500px;
    transform-origin:bottom;
    transform: translateY(-82px) rotateX(0deg);
    transform-style: preserve-3d;

    left:-2px;


}
.left5{
    top:-2px;
}
.left5:hover{
    -webkit-transform: translateX(-83px) rotateY(45deg);
    -moz-transform: translateX(-83px) rotateY(45deg);
    -ms-transform: translateX(-83px) rotateY(45deg);
    -o-transform: translateX(-83px) rotateY(45deg);
    transform: translateX(-83px) rotateY(45deg);

}

.right5:hover {
    -webkit-transform: translateX(82px) rotateY(-25deg);
    -moz-transform: translateX(82px) rotateY(-25deg);
    -ms-transform: translateX(82px) rotateY(-25deg);
    -o-transform: translateX(82px) rotateY(-25deg);
    transform: translateX(82px) rotateY(-25deg) ;
}

.back-right-languet5{
    left: -2px;
    top:-2px;
}
.back-right-languet5:hover {
    -webkit-transform: translateX(82px) rotateY(-35deg);
    -moz-transform: translateX(82px)rotateY(-35deg);
    -ms-transform: translateX(82px)rotateY(-35deg);
    -o-transform: translateX(82px)rotateY(-35deg);
    transform: translateX(82px)rotateY(-35deg);
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;



}
/*cube6*/



/*cube7*/

.cube7{
    left:150px;
    top:150px;
}
.right7{
    -webkit-transform: rotateY(90deg) translateZ(40px)rotateX(-70deg);
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;

    -moz-transform: rotateY(90deg) translateZ(40px)rotateX(-70deg);
    -moz-transform-origin: bottom;
    -moz-transform-style: preserve-3d;

    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) translateZ(40px)rotateX(-70deg);
    -ms-transform-origin: bottom;

    -o-transform: rotateY(90deg) translateZ(40px)rotateX(-70deg);
    -o-transform-origin: bottom;
    -o-transform-style: preserve-3d;

    transform: rotateY(90deg) translateZ(40px)rotateX(-70deg);
    transform-origin: bottom;
    transform-style: preserve-3d;



}
.right7:hover{
    -webkit-transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    -webkit-transform-origin: bottom;

    -moz-transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    -moz-transform-origin: bottom;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) rotateY(135deg) translateZ(40px) rotateX(-10deg);
    -ms-transform-origin: bottom;

    -o-transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    -o-transform-origin: bottom;

    transform: rotateY(90deg) translateZ(40px) rotateX(-65deg);
    transform-origin: bottom;

}
.front7{
    -webkit-transform:translateX(-81px) rotateY(45deg);
    -webkit-transform-origin: right;
    -webkit-transform-style: preserve-3d;

    -moz-transform: translateX(-81px)rotateY(45deg);
    -moz-transform-origin: right;
    -moz-transform-style: preserve-3d;

    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateX(-81px) rotateY(45deg) rotateX(20deg);
    -ms-transform-origin: right;

    -o-transform: translateX(-81px) rotateY(45deg);
    -o-transform-origin: right;
    -o-transform-style: preserve-3d;

    transform:translateX(-81px)rotateY(45deg)rotateY(45deg);
    transform-origin: right;
    transform-style: preserve-3d;
    top:-2px;

}
.front7:hover{
    -webkit-transform: translateX(-81px) rotateY(-45deg);
    -moz-transform: translateX(-81px) rotateY(-45deg);
    -ms-transform: translateX(-81px) rotateY(-45deg);
    -o-transform: translateX(-81px) rotateY(-45deg);
    transform: translateX(-81px) rotateY(-45deg);
}

.left7{
    -webkit-transform:translateX(-81px)  rotateY(-45deg);
    -webkit-transform-origin: right;
    -webkit-transform-style: preserve-3d;

    -moz-transform: translateX(-81px)rotateY(-45deg);
    -moz-transform-origin: right;
    -moz-transform-style: preserve-3d;

    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateX(-81px) rotateY(45deg) rotateX(-70deg);
    -ms-transform-origin: right;

    -o-transform: translateX(-81px)rotateY(-45deg);
    -o-transform-origin: right;
    -o-transform-style: preserve-3d;

    transform:translateX(-81px) rotateY(-45deg);
    transform-origin: right;
    transform-style: preserve-3d;
    top:-2px;
    border: 3px dotted rgb(93, 67, 37);


}

.front7:hover .left7{
    -webkit-transform: translateX(-81px) rotateY(45deg);
    -moz-transform: translateX(-81px) rotateY(45deg);
    -ms-transform: translateX(-81px) rotateY(45deg);
    -o-transform: translateX(-81px) rotateY(45deg);
    transform: translateX(-81px) rotateY(45deg);
}
.front7:hover .left7:hover{
    -webkit-transform: translateX(-81px) rotateY(90deg);
    -moz-transform: translateX(-81px) rotateY(90deg);
    -ms-transform: translateX(-81px) rotateY(90deg);
    -o-transform: translateX(-81px) rotateY(90deg);
    transform: translateX(-81px) rotateY(90deg);

}

.top-languet7{
    -webkit-transform: rotateX(180deg) translateY(-48px);
    -moz-transform: rotateX(180deg) translateY(-48px);
    -ms-transform:rotateX(180deg) translateY(-48px) ;
    -o-transform: rotateX(180deg) translateY(-48px);
    transform: rotateX(180deg) translateY(-48px);

}
.top-languet7:hover{
    -webkit-transform: rotateX(180deg) translateY(-48px);
    -moz-transform: rotateX(180deg) translateY(-48px);
    -ms-transform:rotateX(180deg) translateY(-48px) ;
    -o-transform: rotateX(180deg) translateY(-48px);
    transform: rotateX(180deg) translateY(-48px);
}

/*cube8*/
.right8{
    top:-2px;
}

.left8{
    -webkit-transform: translateX(-83px) ;
    -webkit-transform-origin: right;
    -webkit-transform-style: preserve-3d;


    -moz-transform: translateX(-83px) ;
    -moz-transform-origin: right;
    -moz-transform-style: preserve-3d;


    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:translateX(-83px) rotateY(45deg) rotateX(-25deg);
    -ms-transform-origin:right;

    -o-transform:  translateX(-83px) ;
    -o-transform-origin: right;
    -o-transform-style: preserve-3d;


    transform:translateX(-83px) ;
    transform-origin: right;
    transform-style: preserve-3d;
    border-bottom: none;
    top:-2px;


}
.left8:hover{
    -webkit-transform: translateX(-83px) rotateY(45deg);
    -moz-transform: translateX(-83px) rotateY(45deg);
    -ms-transform: translateX(-83px) rotateY(45deg);
    -o-transform: translateX(-83px) rotateY(45deg);
    transform: translateX(-83px) rotateY(45deg);

}
.rigth-languet-cube8:hover{
    -webkit-transform: translateY(45px) rotateX(5deg) rotateZ(182deg)!important ;
    -moz-transform: translateY(45px) rotateX(5deg) rotateZ(182deg) !important;
    -ms-transform: translateY(45px) rotateX(15deg) rotateZ(182deg)!important;
    -o-transform: translateY(45px) rotateX(5deg) rotateZ(182deg)!important;
    transform: translateY(45px) rotateX(5deg) rotateZ(182deg)!important;

}


.left8:hover .rigth-languet-cube8{
    -webkit-transform: translateY(45px) rotateX(-35deg) rotateZ(182deg) ;
    -moz-transform: translateY(45px) rotateX(-35deg) rotateZ(182deg) ;
    -ms-transform: translateY(45px) rotateX(-35deg) rotateZ(182deg);
    -o-transform: translateY(45px) rotateX(-35deg) rotateZ(182deg);
    transform: translateY(45px) rotateX(-35deg) rotateZ(182deg);

}
.right8:hover {
    -webkit-transform: translateX(82px) rotateY(-45deg);
    -moz-transform: translateX(82px) rotateY(-45deg);
    -ms-transform: translateX(82px) rotateY(-45deg);
    -o-transform: translateX(82px) rotateY(-45deg);
    transform: translateX(82px) rotateY(-45deg) ;
}

.right8:hover .top{

    -webkit-transform: translateY(-85px) rotateX(-60deg);
    -moz-transform: translateY(-85px) rotateX(-60deg);
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/

    -ms-transform:perspective(500px) translateY(-40px) rotateX(-85deg);
    -o-transform: translateY(-85px) rotateX(-60deg);
    transform: translateY(-85px) rotateX(-60deg);

}

.top8:hover {

    -webkit-transform: translateY(-85px) rotateX(-90deg) !important;
    -moz-transform: translateY(-85px) rotateX(-90deg)!important;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg);*/

    -ms-transform: perspective(500px) translateY(-40px) rotateX(-115deg)!important;
    -o-transform: translateY(-85px) rotateX(-90deg)!important;
    transform: translateY(-85px) rotateX(-90deg)!important;

}
.back-right-languet8:hover {
    -webkit-transform: translateX(82px) rotateY(-35deg);
    -moz-transform: translateX(82px)rotateY(-35deg);
    -ms-transform: translateX(82px)rotateY(-35deg);
    -o-transform: translateX(82px)rotateY(-35deg);
    transform: translateX(82px)rotateY(-35deg);
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;

}

/*cube9*/

.top9{
    -webkit-perspective: 500px;
    -webkit-transform-origin:left;
    -webkit-transform: translateX(-82px)rotateY(-45deg);
    -webkit-transform-style: preserve-3d;


    -moz-perspective: 500px;
    -moz-transform-origin:left;
    -moz-transform: translateX(-82px) rotateY(-45deg);
    -moz-transform-style: preserve-3d;


    -ms-perspective: 500px;
    -ms-transform-origin:left;
    /*-ms-transform: rotateY(45deg) rotateX(-25deg); //-ms-transform: translateZ(-40px);*/
    -ms-transform:perspective(500px)translateX(-82px) rotateY(0deg) rotateX(-25deg) ;

    -o-perspective: 500px;
    -o-transform-origin:left;
    -o-transform: translateX(-82px) rotateY(-45deg);
    -o-transform-style: preserve-3d;


    perspective: 500px;
    transform-origin:left;
    transform: translateX(82px) rotateY(-45deg);
    transform-style: preserve-3d;

    left:-2px;
    top:-2px;
    border-left: none;

}
.left:hover .top9{
    -webkit-transform: translateX(82px) rotateY(-90deg);
    -moz-transform: translateX(82px) rotateY(-90deg);
    -ms-transform: translateX(82px) rotateY(-90deg);
    -o-transform: translateX(82px) rotateY(-90deg);
    transform: translateX(82px) rotateY(-90deg);
}
.top9:hover{
    -webkit-transform: translateX(82px) rotateY(-45deg)!important;
    -moz-transform: translateX(82px) rotateY(-45deg)!important;
    -ms-transform: translateX(82px) rotateY(-45deg)!important;
    -o-transform: translateX(82px) rotateY(-45deg)!important;
    transform: translateX(82px) rotateY(-45deg)!important;
}
.back9{
    -webkit-transform:translateY(-82px) rotateX(-90deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: bottom;

    -moz-transform: translateY(-82px) rotateX(-90deg);
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: bottom;

    -ms-transform:translateY(-82px) rotateX(-90deg) translateZ(-40px);
    /*-ms-transform: translateZ(-40px);*/
    -ms-transform-style: none;
    -ms-transform-origin: bottom;

    -o-transform: translateY(-82px) rotateX(-90deg);
    -o-transform-style: preserve-3d;
    -o-transform-origin: bottom;

    transform:translateY(-82px) rotateX(-90deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    border: 3px dotted rgb(93, 67, 37);
    border-bottom:none;

    left:-2px;

}

.back9:hover{
    -webkit-transform: translateY(-82px) rotateX(90deg) !important;
    -moz-transform: translateY(-82px) rotateX(90deg) !important;
    -ms-transform: translateY(-82px) rotateX(90deg) !important;
    -o-transform: translateY(-82px) rotateX(90deg) !important;
    transform: translateY(-82px) rotateX(90deg) !important;
}

/*cube11*/
.front11{
    -webkit-transform:translateY(82px) ;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin:bottom ;

    -moz-transform:translateY(82px) ;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: bottom;

    /*-moz-transform: rotateY(45deg) rotateX(-25deg);*/
    -ms-transform:perspective(500px) translateY(82px) rotateY(45deg) rotateX(-47deg);
    -ms-transform-style: preserve-3d;
    -ms-transform-origin: bottom;

    -o-transform: translateY(82px);
    -o-transform-style: preserve-3d;
    -o-transform-origin: bottom;

    transform:translateY(82px) ;
    transform-style: preserve-3d;
    transform-origin: bottom;
    left:0px;
    border-left:none ;

}
.front11:hover{
    -webkit-transform: rotateX(25deg) translateY(82px) ;
    -moz-transform: rotateX(25deg) translateY(82px);
    -ms-transform: rotateX(25deg) translateY(82px);
    -o-transform: rotateX(25deg) translateY(82px);
    transform: rotateX(25deg) translateY(82px);
}

.bottom11:hover .left11{
    -webkit-transform: translateX(-83px) rotateY(45deg);
    -moz-transform: translateX(-83px) rotateY(45deg);
    -ms-transform: translateX(-83px) rotateY(45deg);
    -o-transform: translateX(-83px) rotateY(45deg);
    transform: translateX(-83px) rotateY(45deg);

}

.left11:hover{
    -webkit-transform: translateX(-83px) rotateY(80deg) !important;
    -moz-transform: translateX(-83px) rotateY(80deg)!important;
    -ms-transform: translateX(-83px) rotateY(80deg)!important;
    -o-transform: translateX(-83px) rotateY(80deg)!important;
    transform: translateX(-83px) rotateY(80deg)!important;

}


/**************************************************/
.cube {

    -webkit-animation: spin 3s linear infinite alternate;
    -moz-animation: spin 3s linear infinite alternate;
    -ms-animation: spin 3s linear infinite alternate;
    -o-animation: spin 3s linear infinite alternate;
    animation: spin 3s linear infinite alternate;


}
.anim2{

    -webkit-animation: spin2 3s linear infinite alternate;
    -moz-animation: spin2 3s linear infinite alternate;
    -ms-animation: spin2 3s linear infinite alternate;
    -o-animation: spin2 3s linear infinite alternate;
    animation: spin2 3s linear infinite alternate;


}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateX(-25deg);
        transform: rotateX(-25deg);
    }
  100% {
        -webkit-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);
    }
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotateX(-25deg);
        transform: rotateX(-25deg);
    }
    100% {
        -moz-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);
    }
}
@-ms-keyframes spin {
    0% {
        -ms-transform: rotateX(-25deg) ;
        transform: rotateX(-25deg);
    }
    100% {
        -ms-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);
    }
}
@-o-keyframes spin {
    0% {
        -o-transform: rotateX(-25deg) ;
        transform: rotateX(-25deg);
    }
    100% {
        -o-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotateX(-25deg);
        -moz-transform: rotateX(-25deg);
        -ms-transform: rotateX(-25deg);
        -o-transform: rotateX(-25deg);
        transform: rotateX(-25deg);
    }
    100% {
        -webkit-transform: rotateX(-35deg) rotateZ(25deg);
        -moz-transform: rotateX(-35deg) rotateZ(25deg);
        -ms-transform: rotateX(-35deg) rotateZ(25deg);
        -o-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);
    }
}



@-webkit-keyframes spin2 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);

    }
    100% {
        -webkit-transform: rotateX(-25deg);
        transform: rotateX(-25deg);

    }
}
@-moz-keyframes spin2 {
    0% {
        -moz-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);

    }
    100% {
        -moz-transform: rotateX(-25deg);
        transform: rotateX(-25deg);

    }
}
@-ms-keyframes spin2 {
    0% {
        -ms-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);

    }
    100% {
        -ms-transform: rotateX(-25deg) ;
        transform: rotateX(-25deg);

    }
}
@-o-keyframes spin2 {
    0% {
        -o-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);

    }
    100% {
        -o-transform: rotateX(-25deg) ;
        transform: rotateX(-25deg) ;

    }
}
@keyframes spin2 {
    0% {
        -webkit-transform: rotateX(-35deg) rotateZ(25deg);
        -moz-transform: rotateX(-35deg) rotateZ(25deg);
        -ms-transform: rotateX(-35deg) rotateZ(25deg);
        -o-transform: rotateX(-35deg) rotateZ(25deg);
        transform: rotateX(-35deg) rotateZ(25deg);

    }
    100% {
        -webkit-transform: rotateX(-25deg);
        -moz-transform: rotateX(-25deg);
        -ms-transform: rotateX(-25deg);
        -o-transform: rotateX(-25deg);
        transform: rotateX(-25deg);

    }
}


/*ombrage*/
article:before, article:after{
    content: "";
    position: absolute;
    z-index: -2;
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .2),
    0 5px 10px rgba(0, 0, 0, .2),
    0 20px 20px rgba(0, 0, 0, .15);
    height: 20px;
    left: 10px;
    max-width: 300px;
    transform: rotate(-3deg);
    width: 50%;
}

article:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}

/*clearfix*/
.clearfix:after{
    display: block;
    content: '';
    clear: both;
    visibility: hidden;
    height: 0;
    margin-bottom:1rem;
}



@media screen and (max-width:1024px) {
    html {
        background: url(../images/fond.jpg) repeat center center scroll;
        background-size: 100% 100%;
    }

    .float {
        float: none;
    }

    .container {
        width: auto;
        margin: 1rem;

    }

    .colonne {
        width: auto;
        margin: 0;

    }

    article {
        width: 100%;
        box-sizing: border-box;
        display: block;
        margin: 1rem 0;
        margin-bottom: 0;
        background: url(../images/fond.jpg) no-repeat center center;
        background-size: cover;

    }



    header {
        width: auto;
        top: 0;
        margin: 1rem;
    }

    .menu {
        width: auto;
        margin: 0;
        position: relative;
    }

    .menu ul {
        display: block;
        background: url(../images/fond.jpg) no-repeat center center !important  ;
        background-size: cover;
        width: auto;
        padding: 0;
        margin: 0;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
        0 -1px 0 rgba(0, 0, 0, .1) inset,
        -1px 0 0 rgba(0, 0, 0, .1) inset;

    }

    .menu ul li:nth-child(2) a {
        border-radius: 3px 3px 0 0;
    }

    .menu ul li:last-child a {
        border-radius: 0 0 3px 3px;
    }

    .menu ul li {
        display: none;
    }

    .menu ul li:first-child {
        display: block;
    }

    .mail {
        display: block;
        position: absolute;
        width: 60px;
        height: 60px;
        font-size: 2rem;
        z-index: 150;
        color: rgb(67, 48, 26);
        background: rgba(67, 48, 26, .1);
        border-radius: 50%;
        box-sizing: border-box;
        padding: .9rem;
        font-weight: 600;
        top: 5rem;
        right: .5rem;
    }

    .is-closed, .is-opened {
        display: block;
    }

    .footer{
        display: block;
        background: url("../images/encre.png") no-repeat -150px -250px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;


    }
}
@media screen and (max-width:600px) {

    .footer{
        background: url("../images/encre.png") no-repeat -25px -75px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;

    }

}


@media screen and (max-width:450px){

    html{
        background: url(../images/fond.jpg) repeat center center scroll ;
        background-size: 100% 100%;
    }
    article{
        background: url(../images/craft.jpg) no-repeat center center;
        background-size: cover;
        height: 350px !important;
    }
    .menu ul li{
        display:none;

    }
    .menu ul li:first-child {
        display: block;

    }
    .menu ul {
        background-size: contain;
        background: url(../images/craft.jpg) no-repeat center center  ;
        background-size: cover;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
        -1px 0 0 rgba(0, 0, 0, .1) inset;
    }


    .menu ul li:first-child {

        padding-left: 3rem;
        background-size: 25px 140px;
        background: url(../images/accolade.png) no-repeat 15px 40px,  url(../images/accolade-reverse.png) no-repeat 200px 40px;
        background-size:25px 170px;

    }

    .menu ul li:first-child h1{
        font-size: 1.8rem;
    }
    .menu ul li:first-child p{
        font-size: 1.8rem;
        letter-spacing: normal;
    }
    .menu ul li:first-child p+p{
        font-size: 1.3rem;
        letter-spacing: .1rem;
    }
    .footer{
        background: url("../images/encre.png") no-repeat -25px -75px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;

    }

    .cube{
        top:100px;
        left:150px;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left;
        -moz-transform-origin: left;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);
        }
        100% {
            -webkit-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
        }
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);
        }
        100% {
            -moz-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
        }
    }
    @-ms-keyframes spin {
        0% {
            -ms-transform: rotateX(-25deg) scale(0.5) ;
            transform: rotateX(-25deg) scale(0.5);
        }
        100% {
            -ms-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
        }
    }
    @-o-keyframes spin {
        0% {
            -o-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);
        }
        100% {
            -o-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotateX(-25deg) scale(0.5);
            -moz-transform: rotateX(-25deg) scale(0.5);
            -ms-transform: rotateX(-25deg) scale(0.5);
            -o-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);
        }
        100% {
            -webkit-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -moz-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -ms-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -o-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
        }
    }



    @-webkit-keyframes spin2 {
        0% {
            -webkit-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);

        }
        100% {
            -webkit-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);

        }
    }
    @-moz-keyframes spin2 {
        0% {
            -moz-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);

        }
        100% {
            -moz-transform: rotateX(-25deg) scale(0.5) ;
            transform: rotateX(-25deg) scale(0.5);

        }
    }
    @-ms-keyframes spin2 {
        0% {
            -ms-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);

        }
        100% {
            -ms-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);

        }
    }
    @-o-keyframes spin2 {
        0% {
            -o-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);

        }
        100% {
            -o-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);

        }
    }
    @keyframes spin2 {
        0% {
            -webkit-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -moz-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -ms-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            -o-transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);
            transform: rotateX(-35deg) rotateZ(25deg) scale(0.5);

        }
        100% {
            -webkit-transform: rotateX(-25deg) scale(0.5);
            -moz-transform: rotateX(-25deg) scale(0.5);
            -ms-transform: rotateX(-25deg) scale(0.5);
            -o-transform: rotateX(-25deg) scale(0.5);
            transform: rotateX(-25deg) scale(0.5);

        }
    }
}