@font-face{
    font-family:HelveticaNowDisplay-Regular;
    src:url(/fonts/fontr.woff2?a49b8673700f1689c470a9c8a323ae87) format("woff2"),url(/fonts/fontr.woff?26ddb29eb7dc941ca37551d4526ea76c) format("woff")
}
@font-face{
    font-family:HelveticaNowDisplay-Lt;
    src:url(/fonts/fontlt.woff2?b70081a2a5ed9d0503bf671cabcb884b) format("woff2"),url(/fonts/fontlt.woff?0921c3645e0e1ffec9124cd6bf9b9a8a) format("woff")
}
@font-face{
    font-family:HelveticaNowDisplay-XBd;
    src:url(/fonts/font.woff2?3fcfdd19c2ad9ac24e746dca771b6bd5) format("woff2"),url(/fonts/font.woff?cdaf0029d9157c5bef7b45884f13ac76) format("woff")
}
body,html{
    margin:0;
    font-family:HelveticaNowDisplay-Regular,sans-serif;
    scroll-behavior:smooth; 
    overflow-x:hidden;
}
body.fixed,html.fixed{
    overflow:hidden;
}
#app{
    display:flex;
    flex-direction:column;
}

*,:after,:before{
    box-sizing:border-box;
}
.container{
    /* max-width:1480px; */
    width:100%;
    margin:auto;
    display:flex;
    flex-direction:column;
    padding:0 25px;
}
.container-video{
    max-width:none;
    height:100vh;
}


.popin{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    overflow:auto;
    z-index:999;
    background:#202020;
    display:none;
}
.popin-close{
    position:absolute;
    left:0;
    top:40%;
    width:100px;
    height:100px;
    background:#e8693c;
    z-index:10;
    transition: all 0.6s;
}
.popin-close:hover{
    background-color: #7e668f;    
}
.popin-close:hover .popin-close-icon{
    transform:translate(-50%,-50%) rotate(360deg);
    left:50%;
    top:50%;
    transition: all 0.6s;
    position: absolute;
}
.popin-close-icon:after,.popin-close-icon:before{
    content:"";
    background:#ffffff;
    position:absolute;
    left:50%;
    transition: all 0.6s;
    top:50%;
}
.popin-close-icon:after{
    width:45px;
    height:1px;
    transform:translate(-50%,-50%) rotate(45deg);
    transition: all 0.6s;
}
.popin-close-icon:before{
    width:1px;
    height:45px;
    transform:translate(-50%,-50%) rotate(45deg);
    transition: all 0.6s;
}
@media screen and (max-width:700px){
    .popin-close{
        top:10vh;
        left:50%;
        transform:translateX(-50%);
        width:50px;
        height:50px;
    }
}
.popin-video{
    position:relative;
    margin:auto;
    width:100%;
    max-height:100vh;
    overflow:hidden;
}
.popin-video--voeux{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:999;
    height:100vh;
    background:#000;
    display:flex;
}
.popin-video-container{
    height:0;
    width:100%;
    padding-bottom:56.25%;
    position:relative;
    margin:auto;
}
.popin-video-container-ytfix{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:90vh;
    z-index:2;
    display:block;
}
.popin-video iframe,.popin-video video{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    max-height:100vh;
}


.contact-popin{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:30px;
    background:#7e668f;
    z-index:999;
    max-width:584px;
    width:100%;
    border-radius:5px;
    opacity:0;
}
.contact-popin.active{
    opacity:1
}

.case-item{
    display:flex;
    justify-content:space-between;
    margin-bottom:150px;
    align-items:flex-start;
    position:relative; 
    max-width:100%;
}
.case-item:hover .case-more{
    transform:rotate(180deg)
}
.case-item:hover .case-more:after,.case-item:hover .case-more:before{
    background:#7e668f;
}
.case-item:nth-child(2n){
    flex-direction:row-reverse;
}
.case-item:nth-child(2n) .case-content{
    margin-left:0;
    position:static;
}
.case-item:nth-child(2n) .case-image{
    margin-left:-30%;
}
.case-item:nth-child(odd) .case-tag{
    right:auto;
    left:0;
}
.case-item:nth-child(odd) .case-tag-item{
    align-self:flex-start;
}


.popin-slider *{
    scroll-behavior:auto!important;
}
.popin-slider img{
    max-width:100%;
    max-height:100%;
    display:block;
    margin:auto;
}



.hooper-pagination.is-vertical .hooper-indicator{
    width:18px!important;
    height:18px;
    background:#202020;
    border:1px solid #7e668f;
    border-radius:50%;
    margin-bottom:8px;
}
.hooper-pagination.is-vertical .hooper-indicator:last-child{
    margin-bottom:0;
}
@media screen and (max-width:700px){
    .hooper-pagination.is-vertical .hooper-indicator{
        width:9px!important;
        height:9px;
        margin-bottom:5px;
    }
}
.hooper-indicator.is-active,.hooper-indicator:hover{
    background-color:#7e668f!important;
}
.hooper-slide{
    display:flex;
}