@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

#sledgeHammer a, #sledgeHammer p ,#sledgeHammer ul, #sledgeHammer li, #sledgeHammer button {margin:0; padding:0; }
a {text-decoration: none;}
#sledgeHammer p {font-size: clamp(.85rem,-0.5rem + 1.5vw ,1rem);}

ul {list-style:none;}




/* ////////////////////////////////////////////////////////// */

    .w10pc {width:10%;}
    .w20pc {width:20%;}
    .w25pc {width:25%;}
    .w30pc {width:30%;}
    .w40pc {width:40%;}
    .w50pc {width:50%;}
    .w60pc {width:60%;}
    .w70pc {width:70%;}
    .w80pc {width:80%;}
    .w90pc {width:90%;}
    .w100pc {width:100%;}

    .wTiers {width:calc(100% / 3);}

/* /////////////////////////////////////// */

    .h10vh {height:10vh;}
    .h20vh {height:20vh;}
    .h30vh {height:30vh;}
    .h40vh {height:40vh;}
    .h50vh {height:50vh;}
    .h60vh {height:60vh;}
    .h70vh {height:70vh;}
    .h80vh {height:80vh;}
    .h90vh {height:90vh;}
    .h100vh {height:100vh;}

    .hTiers {height:calc(100% / 3);}

    .h10pc {height:10%;}
    .h20pc {height:20%;}
    .h30pc {height:30%;}
    .h40pc {height:40%;}
    .h50pc {height:50%;}
    .h60pc {height:60%;}
    .h70pc {height:70%;}
    .h80pc {height:80%;}
    .h90pc {height:90%;}
    .h100pc {height:100%;}


/* ////////////////////////////////////////////////////////// */

.zUn {z-index: 1;}
.zDeux {z-index:2;}
.zTrois {z-index:3;}
.zQuatre {z-index:4;}
.zCinq {z-index:5;}
.zSix {z-index:6;}
.zSept {z-index:7;}
.zHuit {z-index:8;}

.poseAb {position: absolute;}

.marginCenter { margin:0 auto;}

/* ////////////////////////////////////////////////////////// */

.flexCenter {
    display:flex; flex-flow:row wrap; justify-content:center; align-items:center;
}

    .flexItemCenter, .alignSelf {align-self:center;}
    .flexItemCenter.atLeft {margin-left:auto;}
    .flexItemCenter.atRight {margin-right:auto;}

    .flexCenter.auDebut {align-items: flex-start;}
    .flexCenter.aLaFin {align-items: flex-end;}
    .flexCenter.enHaut {align-items:stretch ;}

    .flexCenter.baseLIne {align-items: first baseline;}
        
.flexCenter.sStart {justify-content:start;}
.flexCenter.sAround {justify-content: space-around;}
.flexCenter.sBetween {justify-content: space-between;}

/* ////////////////////////////////////////////////////////// */

.imgBackCover {
    background-size:cover; background-position:center; background-repeat:no-repeat;
}	
.imgBackContain {
    background-size:contain; background-position:center; background-repeat:no-repeat;
}

/* //////////////////////////////////////////////////////////////////////////////// */

header#theHead {
    position:fixed; z-index: 100; top:0; left:50%; width:calc(100% - 8rem); height:40px; line-height: 40px;  transform: translateX(-50%); display:flex; flex-flow: row wrap; justify-content:space-between;
}
    header#theHead .logo, header#theHead ul.menuOrdi , header#theHead .menuPhone {position: absolute;}
    header#theHead .logo {
        left:0; width:74px; height: 32px; top: 10px;
    }
    header#theHead .logo a {position: relative; left: 3vw; display: block; height: 100%; width:calc(100% - 3vw);}
    header#theHead .logo a img {
        height: 28px; position: absolute; top: 2px; right: 2px; border: 2px solid rgb(255,255,255);
        box-shadow: 0 8px 8px -3px rgba(76, 0, 63, 0.5);
    }

    header#theHead ul.menuOrdi {
        right:0; top:10px; display:inline-flex; height: 32px; line-height: 24px;
        background-color: rgb(255, 255, 255); padding:0; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.48);
    }
    header#theHead ul.menuOrdi li {margin:auto 1rem;}
    header#theHead ul.menuOrdi li a.theBtn {
        display:block; padding:3px 5px; font-size:14px; color:rgb(117, 117, 117); 
    }

    header#theHead .menuPhone {
        right:2vw; top:10px; height: 32px; width: 32px; line-height: 32px; text-align: center; padding:2px 0 0 0; background-color:rgb(255,255,255);
        box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.48); display:none;
    }

    #phoneMenuBtn, #phoneClose {
        z-index: 1;
    }

    #phoneMenu {
        position: absolute; z-index: 2; top:0; right:0; padding:2px 0 0 0; height: 32px; width: 32px; background-color: rgb(255,255,255); transform-origin: 100% 0; 
        transform: scale(0); transition: all 250ms linear ;
    }
        #phoneMenu.opened {transform: scale(1);}

        .inPhoneMenu { 
            position: absolute; top:32px; right:0; background:rgb(255,255,255); padding:1rem 2rem; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.48);
        }
.inPhoneMenu ul { min-width: 5rem; text-align: left;}




/* //////////////////////////////////////////////////////////////////////////////// */

.box3d {
    position: absolute; top: 50%; left: 50%; margin: -20vw 0 0 -20vw; width: 40vw; height: 40vw; perspective: 700px;
    perspective-origin: center; transform-style: preserve-3d; transform: scale(1);
}
/* //////////////////////////////////////////////////////////////////////////////// */




.transition {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 201; background-color:transparent;
    /* opacity: 1; */
    pointer-events: none; transition: 500ms linear;
    overflow: hidden;
}

.transition .theDoorsBox {
    position: absolute; height:200vh; width:200vw; top:50%; left:50%; margin:-100vh 0 0 -100vw ;  transition:all 500ms linear;
}

.transition .theDoorsBox .theDoors {
    position:absolute; height:200vh; width:150vw; top:0; transition:all 500ms linear; background-color: rgb(4, 4, 39);
}
.transition .theDoorsBox .theDoors.left {right:200vw;}
.transition .theDoorsBox .theDoors.right {left:200vw;}

  
.transition.is-active {
    pointer-events: all;
}


.transition.is-active .theDoorsBox .theDoors.left {right:100vw;}
.transition.is-active .theDoorsBox .theDoors.right {left:100vw;}



.imgAttache {
    background-attachment: fixed; background-image:url(../images/bishara.jpg);
}

	
/* //////////////////////////////////////////////////////////////////////////////////////////// */



/* //////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////// MEDIA QUERI ////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////// */

@media only screen and (max-width: 500px ) {
    header#theHead ul.menuOrdi {display:none;}
    header#theHead .menuPhone {display:block;}
}