@font-face {
    font-family: 'Acumin Pro Medium';
    src: url('../fonts/AcuminPro-Medium.woff2') format('woff2'),
         url('../fonts/AcuminPro-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}
html,
body{
    position: relative;
    height: 100%;
    width: 100%;
    color: #FFF;
    background: #000;
    font-smooth: antialiased;
    -webkit-font-smoothing: antialiased;
    --bs-gutter-x: 25px;
}
h1,
dl dt{
    font: normal normal normal 40px/1.4 Marcellus;
}
h1{
    line-height: .8;
    margin-bottom: 5px;
}
header{
    text-align: center;
    margin: 0 auto 140px;
}
header img{
    margin-left: 60px;
    width: 200px;
}
header nav{
    display: flex;
    height: 100px;
    align-items: center;
}
header nav a{
    display: inline-block;
    padding: 5px;
    color: #FFF;
    text-decoration: none;
}
header nav a:hover{
    text-decoration: underline;
}
#video video{
    border: 1px #3e3e3e solid;
    outline: none!important;
}
small{
    font-size: 70%;
}
#intro{
    font: normal normal normal 20px/1.3 Marcellus;
}
#intro img{
    width: 40px;
    margin: 5px 0;
}
.row>*{
    padding-right: 25px;
    padding-left: 25px;
}
#frise{
    display: flex;
    margin: 200px auto 100px;
    padding: 0;
}
#frise dl{
    flex: 0 0 20%;
    position: relative;
    padding: 20px 75px 0 65px;
    height: fit-content;
    transform: translateX(-50px);
    transition: all .55s ease-in-out;
}
#frise dt{
    position: absolute;
    top: 0;
    left: 25px;
    z-index: 1;
    line-height: 1;
    opacity: 0.5;
    transition: all .4s ease .3s;
}
#frise dd{
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    opacity: 0.5;
    transition: all .5s ease;
}
#frise dd.txt{
    margin-top: 15px;
    text-align: right;
    text-transform: uppercase;
    font: normal normal 400 14px/1.25 'Acumin Pro Medium';
}
#frise dd.img{
    opacity: .1;
}
#frise dl.active,
#frise dl.active dt,
#frise dl.active dd{
    opacity: 1;
    transform: none;
}
#frise dl+dl,
#frise dl+dl dd.img{
    transition-delay: .1s
}
#frise dl+dl+dl,
#frise dl+dl+dl dd.img{
    transition-delay: .2s
}
#frise dl+dl+dl+dl,
#frise dl+dl+dl+dl dd.img{
    transition-delay: .3s
}
#frise dl+dl+dl+dl+dl,
#frise dl+dl+dl+dl+dl dd.img{
    transition-delay: .4s
}
#frise dd.txt{
    transition-delay: .6s;
}
#frise dl+dl dd.txt{
    transition-delay: .7s;
}
#frise dl+dl+dl dd.txt{
    transition-delay: .8s;
}
#frise dl+dl+dl+dl dd.txt{
    transition-delay: .9s;
}
#frise dl+dl+dl+dl+dl dd.txt{
    transition-delay: 1s;
}
#frise dl+dl dt{
    transition-delay: .4s;
}
#frise dl+dl+dl dt{
    transition-delay: .5s;
}
#frise dl+dl+dl+dl dt{
    transition-delay: .6s;
}
#frise dl+dl+dl+dl+dl dt{
    transition-delay: .7s;
}
#texte>div{
    opacity: 1;
    transition: all .6s ease;
    margin-bottom: 8px;
}
#texte>div.new{
    opacity: 0;
    animation-name: apparition;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}
@keyframes apparition{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@media (max-width: 1399px){
    body{
        padding: 0 20px;
        max-width: 100vw;
        overflow-x: hidden;
    }
    #frise{
        margin: 40px auto;
        flex-direction: column;
    }
    #frise dl{
        position: relative;
        flex: 0 0 100%;
        padding: 20px 100px 0;
        margin: 48px auto 40px;
    }
    #frise dt{
        left: 64px;
        font: normal normal normal 46px/1 Marcellus;
    }
    #frise dd.txt{
        font: normal normal 400 15px/1.25 'Acumin Pro Medium';
    }
    header {
        margin: 0 auto 65px;
    }
    h1{
        font: normal normal normal 32px/1.4 Marcellus;
    }
    #intro{
        font: normal normal normal 16px/1.3 Marcellus;
    }
    #intro:after{
        margin-top: 15px;
        margin-bottom: 34px;
    }
    #intro img{
        margin: 40px 0 34px;
    }
    #frise dl:nth-of-type(2n){
        transform: translateX(50px);
    }
    #frise dl:nth-of-type(2n+1){
        transform: translateX(-50px);
    }
    #frise dl.active{
        transform: none;
    }
    #frise dt{
        transform: translateY(-10px);
    }
    #frise dl+dl,
    #frise dl+dl dd.img{
        transition-delay: .1s
    }
    #frise dl+dl+dl,
    #frise dl+dl+dl dd.img{
        transition-delay: .2s
    }
    #frise dl+dl+dl+dl,
    #frise dl+dl+dl+dl dd.img{
        transition-delay: .3s
    }
    #frise dl+dl+dl+dl+dl,
    #frise dl+dl+dl+dl+dl dd.img{
        transition-delay: .4s
    }
    #frise dd.txt{
        transform: translateY(-10px);
        transition-delay: .6s;
    }
    #frise dl+dl dd.txt{
        transition-delay: .7s;
    }
    #frise dl+dl+dl dd.txt{
        transition-delay: .8s;
    }
    #frise dl+dl+dl+dl dd.txt{
        transition-delay: .9s;
    }
    #frise dl+dl+dl+dl+dl dd.txt{
        transition-delay: 1s;
    }
    #frise dl+dl dt{
        transition-delay: .4s;
    }
    #frise dl+dl+dl dt{
        transition-delay: .5s;
    }
    #frise dl+dl+dl+dl dt{
        transition-delay: .6s;
    }
    #frise dl+dl+dl+dl+dl dt{
        transition-delay: .7s;
    }

}
@media (max-width: 480px){
    #frise dl{
        position: relative;
        padding: 20px 18vw 0;
        margin: 48px auto 40px;
    }
    #frise dt{
        left: calc(4vw + 10px);
        font: normal normal normal 46px/1 Marcellus;
    }
    header img{
        margin-left: auto;
        max-width: 55vw!important;
    }
}