*,body,html{
    margin:0;
    padding:0;
    box-sizing:border-box
}
#app{
    position:relative
}
#app,.page-section{
    height:100%;
    width:100%
}
.page-section{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    pointer-events:none;
    overflow:hidden
}
@font-face{
    font-family:icon;
    src:url(../fonts/icomoon/icomoon.woff);
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_ultra_light-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_ultra_light-webfonta94c.woff?huua9s);
    font-weight:200;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_light-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_light-webfonta94c.woff?huua9s);
    font-weight:300;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_regular-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_regular-webfonta94c.woff?huua9s);
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_medium-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_medium-webfonta94c.woff?huua9s);
    font-weight:500;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_bold-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_bold-webfonta94c.woff?huua9s);
    font-weight:600;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_extrabold-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_extrabold-webfonta94c.woff?huua9s);
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:butler;
    src:url(../fonts/butler/butler_black-webfonta94c.html?huua9s);
    src:url(../fonts/butler/butler_black-webfonta94c.woff?huua9s);
    font-weight:800;
    font-style:normal
}
.fullscreen-button{
    position:fixed;
    z-index:4242;
    bottom:10px;
    left:15px;
    font-size:20px;
    background-color:transparent;
    border:none;
    outline:none;
    line-height:1em
}
.fullscreen-button img{
    width:30px
}
@media screen and (min-width:992px){
    .fullscreen-button{
        display:none
    }
}
#menu.is-opened{
    pointer-events:all;
    z-index:1
}
#menu .hamburger{
    top:1em;
    right:1em;
    pointer-events:all
}
#menu .backgrounds-container,#menu .backgrounds-container .menu-background{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    width:100%;
    pointer-events:none
}
#menu .backgrounds-container .menu-background{
    background-size:cover;
    background-position:50%;
    opacity:0;
    transition:opacity .3s ease-in-out;
    will-change:opacity
}
#menu .backgrounds-container .menu-background.selected{
    opacity:1
}
.horizontal-menu{
    overflow:hidden;
    -webkit-overflow-scrolling:touch;
    width:100%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    left:0
}
.horizontal-menu-panner{
    box-sizing:border-box;
    position:relative;
    white-space:nowrap;
    will-change:transform
}
.horizontal-menu-item{
    display:inline-block;
    vertical-align:top;
    position:relative
}
.horizontal-menu-panner{
    padding:0 20rem
}
.horizontal-menu-item{
    opacity:.6;
    padding:10px 50px
}
.horizontal-menu-item:hover{
    opacity:1
}
#preloader-info,
#instruction-title,
#icon-Drag_Souris,
.middle_section_desktop,
#loader-start,
.white-color-text {color:#fff}
@media screen and (max-width:768px){
    .horizontal-menu-item{
        display:block;
        vertical-align:top;
        position:relative;
        padding:0
    }
}
.horizontal-menu-item_on{
    opacity:1;
    padding-bottom:0
}
.horizontal-scroll-fader{
    height:100%;
    width:100%;
    overflow:hidden
}
.horizontal-scroll-fader:before{
    background:linear-gradient(90deg,#e2f2f4 .25rem,rgba(226,242,244,0))
}
.horizontal-scroll-fader:after{
    background:linear-gradient(270deg,#e2f2f4 .25rem,rgba(226,242,244,0))
}
body{
    background:#000;
    font-family:butler,serif;
    font-size:100%;
    line-height:1.5
}
a{
    color:inherit;
    text-decoration:none
}
.container{
    height:auto;
    width:100%;
    margin:0 auto;
    background:#e2f2f4
}
.container:before{
    content:"";
    display:table
}
#about .about-button,#about.is-opened{
    pointer-events:all;
    z-index:1
}
#about .about-button{
    top:1rem;
    left:1rem;
    font-family:butler,serif;
    font-weight:600;
    text-shadow:.5px .5px rgba(0,0,0,.1);
    font-size:1.8em;
    text-shadow:0 1px 10px rgba(42,42,42,.5);
    padding:10px 20px;
    background-color:transparent;
    border:none;
    outline:none;
    color:#fff;
    cursor:pointer;
    opacity:1
}
#about .about-button,#about .about-button:before{
    position:absolute;
    transition:opacity .3s ease-in-out
}
#about .about-button:before{
    content:"";
    top:calc(50% + 3px);
    left:50%;
    transform:translate(-50%,-50%);
    height:1em;
    width:1em;
    background:linear-gradient(to left bottom,#fc3,#ffb347);
    border-radius:50%;
    z-index:-1;
    opacity:0
}
#about .about-button:hover:before{
    opacity:1
}
#about .close-button,#about.is-opened .about-button{
    opacity:0;
    pointer-events:none
}
#about .close-button{
    position:absolute;
    top:1em;
    right:1em;
    font-family:butler,serif;
    font-size:1.2em;
    font-weight:600;
    padding:10px;
    background-color:transparent;
    border:none;
    outline:none;
    cursor:pointer;
    transition:opacity .3s ease-in-out
}
#about.is-opened .close-button{
    pointer-events:all;
    opacity:1
}
#about .content{
    color:#fff;
    position:absolute;
    top:50%;
    left:100px;
    transform:translateY(-50%)
}
#about .content *{
    opacity:0
}
#about .smiley{
    position:absolute;
    top:50%;
    right:100px;
    transform:translateY(-50%);
    font-family:butler,serif;
    font-size:21em;
    padding-bottom:.2em;
    color:rgba(42,42,42,.4);
    opacity:0;
    pointer-events:none
}
@media screen and (max-width:768px){
    #about .content{
        max-width:300px;
        top:350px;
        left:40px
    }
    @media screen and (orientation:landscape){
        #about .content{
            max-width:100%;
            top:15px;
            transform:none
        }
    }
    #about .content h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:3em
    }
    #about .content h2{
        font-size:1.5em;
        line-height:1.1em;
        color:#fff
    }
    #about .content h2,#about .content p{
        font-family:butler,serif;
        font-weight:300
    }
    #about .content p{
        font-size:1.3em;
        line-height:1.5em;
        margin-top:50px
    }
    @media screen and (orientation:landscape){
        #about .content p{
            margin-top:15px
        }
    }
    #about .content p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    #about .smiley{
        display:none
    }
}
@media screen and (min-width:768px) and (max-width:1920px){
    #about .content{
        max-width:1250px
    }
    #about .content h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:8em
    }
    #about .content h2{
        font-size:3.5em;
        line-height:1.1em;
        margin-top:-20px
    }
    #about .content h2,#about .content p{
        font-family:butler,serif;
        font-weight:300
    }
    #about .content p{
        font-size:1.8em;
        line-height:1.5em;
        margin-top:30px
    }
    #about .content p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    #about-desc-menu h2{color: #fff}
}
@media screen and (min-width:1920px){
    #about .content{
        max-width:1250px
    }
    #about .content h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:12em
    }
    #about .content h2{
        font-size:5em;
        line-height:1.1em;
        color:#fff
    }
    #about .content h2,#about .content p{
        font-family:butler,serif;
        font-weight:300
    }
    #about .content p{
        font-size:2.4em;
        line-height:1.5em;
        margin-top:50px
    }
    #about .content p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
}
.demo-1{
    --color-text:#fff;
    --color-bg:#ddd;
    --color-link:#fff;
    --color-link-hover:#2735da;
    --color-info:#fff;
    --color-main-bg:#171619;
    --path-fill-1:#413f46;
    --path-fill-2:#e6e5ea;
    --path-fill-3:#ccc;
    --color-title:#fff;
    --font-family-title:"Montserrat",sans-serif;
    --font-size-title:7vmax;
    --font-weight-title:700;
    --color-menu:#171616;
    --color-menu-hover:#fff;
    --font-family-menu:"Montserrat",sans-serif;
    --font-size-menu:3vmax;
    --font-weight-menu:700;
    --button-circle:#6b6b6b
}
.demo-1,.demo-2{
    --button-bg:#fff;
    --button-line:#222
}
.demo-2{
    --color-text:#fff;
    --color-bg:#333;
    --color-link:#fff;
    --color-link-hover:#f44e5e;
    --color-info:#fff;
    --color-main-bg:#efcb7b;
    --path-fill-1:#dce3f1;
    --path-fill-2:#869ccc;
    --path-fill-3:#30436f;
    --path-fill-4:#0d1831;
    --color-title:#fff;
    --font-family-title:inherit;
    --font-size-title:6vmax;
    --font-weight-title:200;
    --color-menu:#fff;
    --color-menu-hover:#fff;
    --font-family-menu:inherit;
    --font-weight-menu:200;
    --button-circle:#fff
}
.demo-2,.demo-3{
    --font-size-menu:4vmax
}
.demo-3{
    --color-text:#fbd54a;
    --color-bg:#333;
    --color-link:#4d4f5f;
    --color-link-hover:#bfb5b5;
    --color-info:#fff;
    --color-main-bg:#24262d;
    --path-fill-1:#000;
    --path-fill-2:#1d1d1f;
    --path-fill-3:#fbd54a;
    --color-title:#fff;
    --font-family-title:"butler",serif;
    --font-size-title:5vmax;
    --font-weight-title:400;
    --color-menu:#000;
    --color-menu-hover:#fff;
    --font-family-menu:"butler",serif;
    --font-weight-menu:400;
    --button-bg:#fff;
    --button-circle:#ada4a4;
    --button-line:#222
}
.demo-4{
    --color-text:#fff;
    --color-bg:#333;
    --color-link:#1b198c;
    --color-link-hover:#d3eaa2;
    --color-info:#fff;
    --color-main-bg:#3735d0;
    --path-fill-1:#241e84;
    --path-fill-2:#d3eaa2;
    --color-title:#fff;
    --font-family-title:"Pompiere",serif;
    --font-weight-title:300;
    --color-menu:#3735d0;
    --color-menu-hover:#b2dc53;
    --font-size-menu:4vmax;
    --font-weight-menu:300;
    --button-bg:#b3dc53;
    --button-circle:#1b198b;
    --button-line:#fff
}
.demo-4,.demo-5{
    --font-size-title:6vmax;
    --font-family-menu:var(--font-family-title)
}
.demo-5{
    --color-text:#c04444;
    --color-bg:#333;
    --color-link:#2d2c2b;
    --color-link-hover:#c14343;
    --color-info:#fff;
    --color-main-bg:#ece7de;
    --path-fill-1:#c04444;
    --path-fill-2:#1b1a19;
    --color-title:inherit;
    --font-family-title:"Playfair Display",serif;
    --font-weight-title:700;
    --color-menu:#fff;
    --color-menu-hover:#c14343;
    --button-bg:#fff;
    --button-circle:#c14343;
    --button-line:#2d2c2b
}
.demo-5,.demo-6{
    --font-size-menu:3.5vmax;
    --font-weight-menu:400
}
.demo-6{
    --color-text:#120047;
    --color-bg:#333;
    --color-link:#110046;
    --color-link-hover:#e83779;
    --color-info:#fff;
    --color-main-bg:#7115d8;
    --path-fill-1:url(#gradient1);
    --path-fill-2:url(#gradient2);
    --path-fill-3:url(#gradient3);
    --color-title:inherit;
    --font-family-title:"Rozha One",serif;
    --font-size-title:8vmax;
    --font-weight-title:400;
    --color-menu:#fff;
    --color-menu-hover:#c14343;
    --font-family-menu:var(--font-family-title);
    --button-bg:#120047;
    --button-circle:#9236f7;
    --button-line:#fff
}
.global-menu{
    height:100%;
    width:100%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    opacity:1;
    background:transparent;
    position:fixed;
    top:0;
    left:0;
    pointer-events:none
}
.demo-5 .global-menu{
    text-align:center
}
.global-menu__item{
    color:#ffffff;
    font-family:butler,serif;
    font-size:4em;
    font-weight:400;
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
    display:block;
    margin:.25em .2em;
    transition:transform .3s,opacity .3s;
    transition-timing-function:ease-in;
    cursor:pointer
}
.global-menu__item--demo-2:nth-child(odd){
    transform:translateY(-100%) rotate(10deg)
}
.global-menu__item--demo-2:nth-child(2n){
    transform:translateY(-100%) rotate(-10deg)
}
.global-menu__item--demo-3{
    transform:translateY(100%)
}
.global-menu__item--demo-3,.global-menu__item--demo-4,.global-menu__item--demo-5{
    transition:transform .1s,opacity .1s;
    transition-timing-function:ease-out
}
.global-menu__item--demo-4{
    transform:translateX(40%)
}
.global-menu__item--demo-5:nth-child(odd){
    transform:translateX(100%) rotate(10deg) scale(.5)
}
.global-menu__item--demo-5:nth-child(2n){
    transform:translateX(100%) rotate(-10deg) scale(.5)
}
.global-menu__item--demo-6{
    transform:translateY(100%)
}
.global-menu__item:hover{
    color:#868686
}
.global-menu__item.is-opened{
    opacity:1;
    transform:translateY(0) rotate(0);
    pointer-events:auto;
    transition-timing-function:ease
}
.global-menu__item--demo-4.is-opened,.global-menu__item--demo-5.is-opened{
    transform:translateX(0) rotate(0)
}
.global-menu__item--demo-4.is-opened{
    transition-timing-function:cubic-bezier(.23,1,.355,1.4)
}
.global-menu__item:first-of-type{
    transition-delay:0s
}
.global-menu__item.is-opened:first-of-type{
    transition-delay:.85s
}
.global-menu__item:nth-of-type(2){
    transition-delay:.05s
}
.global-menu__item.is-opened:nth-of-type(2){
    transition-delay:.8s
}
.global-menu__item:nth-of-type(3){
    transition-delay:.1s
}
.global-menu__item.is-opened:nth-of-type(3){
    transition-delay:.75s
}
.global-menu__item:nth-of-type(4){
    transition-delay:.15s
}
.global-menu__item.is-opened:nth-of-type(4){
    transition-delay:.7s
}
.global-menu__item--demo-2:first-of-type{
    transition-delay:0s
}
.global-menu__item--demo-2.is-opened:first-of-type{
    transition-delay:.85s
}
.global-menu__item--demo-2:nth-of-type(2){
    transition-delay:.05s
}
.global-menu__item--demo-2.is-opened:nth-of-type(2){
    transition-delay:.8s
}
.global-menu__item--demo-2:nth-of-type(3){
    transition-delay:.1s
}
.global-menu__item--demo-2.is-opened:nth-of-type(3){
    transition-delay:.75s
}
.global-menu__item--demo-2:nth-of-type(4){
    transition-delay:.15s
}
.global-menu__item--demo-2.is-opened:nth-of-type(4){
    transition-delay:.7s
}
.global-menu__item--demo-3.is-opened{
    transition-duration:.3s
}
.global-menu__item--demo-3:first-of-type{
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:first-of-type{
    transition-delay:.65s
}
.global-menu__item--demo-3:nth-of-type(2){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(2){
    transition-delay:.7s
}
.global-menu__item--demo-3:nth-of-type(3){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(3){
    transition-delay:.75s
}
.global-menu__item--demo-3:nth-of-type(4){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(4){
    transition-delay:.8s
}
.global-menu__item--demo-3:nth-of-type(5){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(5){
    transition-delay:.85s
}
.global-menu__item--demo-3:nth-of-type(6){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(6){
    transition-delay:.9s
}
.global-menu__item--demo-3:nth-of-type(7){
    transition-delay:0s
}
.global-menu__item--demo-3.is-opened:nth-of-type(7){
    transition-delay:.95s
}
.global-menu__item--demo-4.is-opened{
    transition-duration:.6s
}
.global-menu__item--demo-4:first-of-type{
    transition-delay:0s
}
.global-menu__item--demo-4.is-opened:first-of-type{
    transition-delay:.45s
}
.global-menu__item--demo-4:nth-of-type(2){
    transition-delay:.05s
}
.global-menu__item--demo-4.is-opened:nth-of-type(2){
    transition-delay:.5s
}
.global-menu__item--demo-4:nth-of-type(3){
    transition-delay:.1s
}
.global-menu__item--demo-4.is-opened:nth-of-type(3){
    transition-delay:.55s
}
.global-menu__item--demo-4:nth-of-type(4){
    transition-delay:.15s
}
.global-menu__item--demo-4.is-opened:nth-of-type(4){
    transition-delay:.6s
}
.global-menu__item--demo-5.is-opened{
    transition-duration:.4s
}
.global-menu__item--demo-5:first-of-type{
    transition-delay:0s
}
.global-menu__item--demo-5.is-opened:first-of-type{
    transition-delay:.55s
}
.global-menu__item--demo-5:nth-of-type(2){
    transition-delay:.05s
}
.global-menu__item--demo-5.is-opened:nth-of-type(2){
    transition-delay:.6s
}
.global-menu__item--demo-5:nth-of-type(3){
    transition-delay:.1s
}
.global-menu__item--demo-5.is-opened:nth-of-type(3){
    transition-delay:.65s
}
.global-menu__item--demo-5:nth-of-type(4){
    transition-delay:.15s
}
.global-menu__item--demo-5.is-opened:nth-of-type(4){
    transition-delay:.7s
}
.global-menu__item--demo-6.is-opened{
    transition-duration:.8s
}
.global-menu__item--demo-6:first-of-type{
    transition-delay:.25s
}
.global-menu__item--demo-6.is-opened:first-of-type{
    transition-delay:1s
}
.global-menu__item--demo-6:nth-of-type(2){
    transition-delay:.2s
}
.global-menu__item--demo-6.is-opened:nth-of-type(2){
    transition-delay:1.1s
}
.global-menu__item--demo-6:nth-of-type(3){
    transition-delay:.15s
}
.global-menu__item--demo-6.is-opened:nth-of-type(3){
    transition-delay:1.2s
}
.global-menu__item--demo-6:nth-of-type(4){
    transition-delay:.1s
}
.global-menu__item--demo-6.is-opened:nth-of-type(4){
    transition-delay:1.3s
}
@media screen and (max-width:768px){
    .shape-overlays{
        width:auto;
        height:100%;
        pointer-events:none;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0
    }
    @media screen and (orientation:landscape){
        .shape-overlays{
            width:100%;
            height:auto
        }
    }
    .global-menu__item{
        font-family:butler,serif;
        font-size:1.5em;
        font-weight:400;
        transform:translateY(-100%);
        display:block;
        pointer-events:none;
        margin:.6em .2em;
        transition:transform .3s,opacity .3s;
        transition-timing-function:ease-in;
        cursor:pointer;
        opacity:0!important
    }
    .global-menu__item:hover{
        color:#757575
    }
    .global-menu__item.is-opened{
        opacity:1!important
    }
    .global-menu__item--demo-3{
        transition:transform .1s,opacity .1s;
        transform:translateY(100%);
        transition-timing-function:ease-out
    }
}
@media screen and (min-width:768px){
    .shape-overlays{
        width:auto;
        height:auto;
        pointer-events:none;
        position:fixed;
        top:0;
        left:0
    }
    .global-menu__item{
        color:#fff;
        font-family:butler,serif;
        font-size:4em;
        font-weight:400;
        opacity:0;
        transform:translateY(-100%);
        pointer-events:none;
        display:inline-block;
        margin:0 .2em;
        transition:transform .3s,opacity .3s;
        transition-timing-function:ease-in;
        cursor:pointer
    }
    .global-menu__item--demo-3{
        opacity:1
    }
}
.shape-overlays.is-opened{
    pointer-events:auto
}
.shape-overlays__path:first-of-type{
    fill:#000
}
.shape-overlays__path:nth-of-type(2){
    fill:#1d1d1f
}
.shape-overlays__path:nth-of-type(3){
    fill:#5643e9
}
.shape-overlays__path:nth-of-type(4){
    fill:var(--path-fill-4)
}
@keyframes intervalHamburgerBorder{
    0%{
        opacity:1;
        transform:scale(1)
    }
    40%{
        transform:scale(1.6)
    }
    50%{
        opacity:0;
        transform:scale(1.6)
    }
    to{
        opacity:0;
        transform:scale(1.6)
    }
}
.hamburger{
    position:relative;
    cursor:pointer;
    position:absolute;
    top:2.25em;
    right:2.25em;
    border-radius:50%;
    background-color:#fff;
    pointer-events:auto;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
.hamburger,.hamburger:after{
    width:64px;
    height:64px;
    display:block
}
.hamburger:after{
    box-sizing:border-box;
    content:"";
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
    border:4px solid #ada4a4;
    border-radius:50%;
    animation-duration:2.4s;
    animation-name:intervalHamburgerBorder;
    animation-iteration-count:infinite
}
.hamburger__line{
    width:28px;
    height:2px;
    overflow:hidden;
    position:absolute
}
.hamburger__line-in{
    width:84px;
    height:2px;
    position:absolute;
    top:0;
    left:0
}
.hamburger__line-in:after,.hamburger__line-in:before{
    width:28px;
    height:2px;
    content:"";
    display:block;
    position:absolute;
    top:0;
    background-color:#222
}
.hamburger__line-in:before{
    left:-56px
}
.hamburger__line-in:after{
    left:0
}
.hamburger__line--01,.hamburger__line--02,.hamburger__line--03,.hamburger__line--cross01,.hamburger__line--cross02{
    left:18px
}
.hamburger__line--01{
    top:24.6px
}
.hamburger__line--02,.hamburger__line--cross01,.hamburger__line--cross02{
    top:31px
}
.hamburger__line--03{
    top:37.4px
}
.hamburger__line--cross01{
    transform:rotate(45deg)
}
.hamburger__line--cross02{
    transform:rotate(-45deg)
}
.hamburger__line,.hamburger__line-in{
    transition-duration:.6s;
    transition-timing-function:cubic-bezier(.19,1,.22,1)
}
.hamburger__line-in:after,.hamburger__line-in:before{
    transition-timing-function:cubic-bezier(.19,1,.22,1);
    transition-property:transform
}
.hamburger__line-in--cross01,.hamburger__line-in--cross02{
    transform:translateX(-33.3%)
}
.hamburger__line-in--01{
    transition-delay:.2s
}
.hamburger__line-in--02{
    transition-delay:.25s
}
.hamburger__line-in--02:after,.hamburger__line-in--02:before{
    transition-delay:.05s
}
.hamburger__line-in--03{
    transition-delay:.3s
}
.hamburger__line-in--03:after,.hamburger__line-in--03:before{
    transition-delay:.1s
}
.hamburger__line-in--cross01{
    transition-delay:0s
}
.hamburger__line-in--cross02{
    transition-delay:.05s
}
.hamburger__line-in--cross02:after,.hamburger__line-in--cross02:before{
    transition-delay:.1s
}
.hamburger.is-opened-navi .hamburger__line-in--01,.hamburger.is-opened-navi .hamburger__line-in--02,.hamburger.is-opened-navi .hamburger__line-in--03{
    transform:translateX(33.3%)
}
.hamburger.is-opened-navi .hamburger__line-in--cross01,.hamburger.is-opened-navi .hamburger__line-in--cross02{
    transform:translateX(0)
}
.hamburger.is-opened-navi .hamburger__line-in--01{
    transition-delay:0s
}
.hamburger.is-opened-navi .hamburger__line-in--02{
    transition-delay:.05s
}
.hamburger.is-opened-navi .hamburger__line-in--03{
    transition-delay:.1s
}
.hamburger.is-opened-navi .hamburger__line-in--cross01{
    transition-delay:.25s
}
.hamburger.is-opened-navi .hamburger__line-in--cross02{
    transition-delay:.3s
}
.hamburger:hover .hamburger__line-in:after,.hamburger:hover .hamburger__line-in:before{
    transform:translateX(200%)
}
.hamburger:hover .hamburger__line-in--01:after,.hamburger:hover .hamburger__line-in--01:before,.hamburger:hover .hamburger__line-in--02:after,.hamburger:hover .hamburger__line-in--02:before,.hamburger:hover .hamburger__line-in--03:after,.hamburger:hover .hamburger__line-in--03:before{
    transition-duration:1s
}
.hamburger:hover .hamburger__line-in--cross01:after,.hamburger:hover .hamburger__line-in--cross01:before,.hamburger:hover .hamburger__line-in--cross02:after,.hamburger:hover .hamburger__line-in--cross02:before{
    transition-duration:0s
}
.hamburger.is-opened-navi:hover .hamburger__line-in--cross01:after,.hamburger.is-opened-navi:hover .hamburger__line-in--cross01:before,.hamburger.is-opened-navi:hover .hamburger__line-in--cross02:after,.hamburger.is-opened-navi:hover .hamburger__line-in--cross02:before{
    transition-duration:1s
}
.hamburger.is-opened-navi:hover .hamburger__line-in--01:after,.hamburger.is-opened-navi:hover .hamburger__line-in--01:before,.hamburger.is-opened-navi:hover .hamburger__line-in--02:after,.hamburger.is-opened-navi:hover .hamburger__line-in--02:before,.hamburger.is-opened-navi:hover .hamburger__line-in--03:after,.hamburger.is-opened-navi:hover .hamburger__line-in--03:before{
    transition-duration:0s
}
#loader{
    pointer-events:none;
    opacity:0;
    transition:opacity .3 ease-in-out;
    will-change:opacity;
    z-index:10000
}
#loader.is-opened{
    z-index:10;
    pointer-events:all;
    opacity:1;
    z-index:10001
}
.preloader{
    position:absolute;
    bottom:10%;
    left:50%;
    transform:translateX(-50%);
    font-size:10em;
    font-family:butler,serif;
    opacity:.2;
    transition:opacity .3 ease-in-out;
    will-change:opacity
}
#loader.is-ready .preloader,.preloader{
    pointer-events:none
}
@media screen and (max-width:767px){
    .preloader{
        left:25%;
        bottom:unset;
        opacity:.1;
        transform:rotate(-90deg) translate(-50%,-50%);
        width:60vh;
        text-align:right
    }
    #loader .content_loader{
        opacity:1
    }
    .button-start{
        position:absolute;
        bottom:3%;
        left:50%;
        width:90%;
        transform:translate(-50%,-50%);
        font-size:1.2em;
        padding-top:10px;
        padding-bottom:10px;
        font-family:butler,serif;
        background:transparent;
        border:1px solid #000;
        border-radius:5px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3 ease-in-out;
        will-change:opacity
    }
    @media screen and (orientation:landscape){
        .preloader{
            left:37%;
            top:50%;
            bottom:unset;
            opacity:.1;
            width:60vh;
            text-align:right
        }
    }
    @media screen and (orientation:landscape){
        .button-start,.preloader{
            transform:translate(-50%,-50%)
        }
        .button-start{
            position:absolute;
            bottom:5%;
            left:50%;
            width:30%;
            font-size:1.2em;
            padding-top:10px;
            padding-bottom:10px;
            font-family:butler,serif;
            background:transparent;
            border:1px solid #000;
            border-radius:5px;
            opacity:0;
            pointer-events:none;
            transition:opacity .3 ease-in-out;
            will-change:opacity
        }
    }
    #loader .button-start{
        opacity:1;
        pointer-events:all
    }
    @media screen and (orientation:landscape){
        #loader .flex-container_mobile{
            margin-top:25px;
            position:absolute;
            top:25%!important
        }
        #loader .first_section{
            position:absolute;
            left:-30%
        }
        #loader .middle_section{
            position:absolute;
            left:0
        }
        #loader .last_section{
            position:absolute;
            left:30%
        }
    }
    .icon-swipe{
        font-size:4.5em
    }
    .icon-Mobile_Orientation{
        font-size:4.2em
    }
    .icon-Checkpoint{
        content:"\E900";
        font-size:4.5em
    }
    .icon-Drag_Souris,.icon-wasd{
        display:none
    }
    #loader .content_loader h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:2.2em;
        line-height:.9em;
        text-align:center;
        margin-top:20px
    }
    #loader .content_loader h2{
        font-family:butler,serif;
        font-size:1.5em;
        font-weight:300;
        line-height:1.1em;
        color:#222;
        text-align:center
    }
    #loader .content_loader p{
        font-family:butler,serif;
        font-size:1.3em;
        font-weight:100;
        line-height:1em;
        text-align:center
    }
    #loader .content_loader p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    #loader .smiley{
        display:none
    }
}
@media screen and (min-width:768px) and (max-width:1024px){
    #loader h1 br{
        display:none
    }
    #loader .flex-container_mobile{
        -ms-flex-direction:column;
        flex-direction:column;
        margin-top:25px;
        position:absolute;
        top:50%;
        transform:translateY(-50%)
    }
    #loader .content_loader{
        opacity:1
    }
    .button-start{
        position:absolute;
        bottom:5%;
        left:50%;
        width:30%;
        transform:translate(-50%,-50%);
        font-size:1.2em;
        padding-top:10px;
        padding-bottom:10px;
        font-family:butler,serif;
        background:transparent;
        border:1px solid #000;
        border-radius:5px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3 ease-in-out;
        will-change:opacity
    }
    #loader .button-start{
        opacity:1;
        pointer-events:all
    }
    .icon-swipe{
        font-size:4.5em
    }
    .icon-Mobile_Orientation{
        font-size:4.2em
    }
    .icon-Checkpoint{
        font-size:4.5em
    }
    .icon-Drag_Souris,.icon-wasd{
        display:none
    }
    #loader .content_loader h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:2.8em;
        text-align:center
    }
    #loader .content_loader h2{
        font-family:butler,serif;
        font-size:1.5em;
        font-weight:300;
        line-height:1.1em;
        color:#222;
        text-align:center
    }
    #loader .content_loader p{
        font-family:butler,serif;
        font-size:1.3em;
        font-weight:100;
        line-height:1em;
        margin-top:100px;
        text-align:center
    }
    #loader .content_loader p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    #loader .smiley{
        display:none
    }
}
@media screen and (min-width:1024px) and (max-width:1920px){
    #loader h1 br{
        display:none
    }
    #loader .content_loader{
        max-width:1250px;
        margin:0 auto;
        opacity:1
    }
    #loader .content_loader h1{
        font-family:butler,serif;
        font-weight:600;
        font-size:3em;
        text-align:center;
        margin-top:20px
    }
    #loader .content_loader h2{
        font-size:3.5em;
        line-height:1.1em;
        color:#222;
        margin-top:-20px
    }
    #loader .content_loader h2,#loader .content_loader p{
        font-family:butler,serif;
        font-weight:300;
        text-align:center
    }
    #loader .content_loader p{
        font-size:1.5em;
        line-height:1.5em;
        margin-top:30px
    }
    #loader .content_loader p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    .button-start{
        position:absolute;
        bottom:5%;
        left:50%;
        width:25%;
        transform:translate(-50%,-50%);
        font-size:1.2em;
        padding-top:10px;
        padding-bottom:10px;
        font-family:butler,serif;
        background:transparent;
        border:1px solid #000;
        border-radius:5px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3 ease-in-out;
        will-change:opacity
    }
    #loader .button-start{
        opacity:1;
        pointer-events:all
    }
    .icon-Drag_Souris{
        font-size:5em
    }
    .icon-Mobile_Orientation,.icon-swipe{
        display:none
    }
    .icon-wasd{
        font-size:5em
    }
    .icon-Checkpoint{
        content:"\E900";
        font-size:5em
    }
}
@media screen and (min-width:1920px){
    #loader h1 br{
        display:none
    }
    #loader .content_loader{
        max-width:1250px;
        margin:0 auto;
        opacity:1
    }
    .content_loader h1{
        opacity:1;
        font-family:butler,serif;
        font-weight:600;
        font-size:5em;
        text-align:center;
        margin-top:20px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3 ease-in-out;
        will-change:opacity
    }
    #loader .content_loader h1{
        opacity:1;
        pointer-events:all
    }
    #loader .content_loader h2{
        font-size:3.5em;
        line-height:1.1em;
        color:#222;
        margin-top:-20px
    }
    #loader .content_loader h2,#loader .content_loader p{
        font-family:butler,serif;
        font-weight:300;
        text-align:center
    }
    #loader .content_loader p{
        font-size:2.5em;
        line-height:1em;
        margin-top:30px
    }
    #loader .content_loader p a{
        opacity:1;
        position:relative;
        text-decoration:underline
    }
    .button-start{
        position:absolute;
        bottom:5%;
        left:50%;
        width:15%;
        transform:translate(-50%,-50%);
        font-size:1.2em;
        padding-top:10px;
        padding-bottom:10px;
        font-family:butler,serif;
        background:transparent;
        border:1px solid #000;
        border-radius:5px;
        opacity:0;
        pointer-events:none;
        transition:opacity .3 ease-in-out;
        will-change:opacity
    }
    #loader .button-start{
        opacity:1;
        pointer-events:all
    }
    .icon-Drag_Souris{
        font-size:7em
    }
    .icon-Mobile_Orientation,.icon-swipe{
        display:none
    }
    .icon-wasd{
        font-size:7em
    }
    .icon-Checkpoint{
        content:"\E900";
        font-size:7em
    }
}
@font-face{
    font-family:icomoon;
    src:url(../fonts/icomoon/icomoondc23.eot?ro1v3d);
    src:url(../fonts/icomoon/icomoondc23.eot?ro1v3d#iefix) format("embedded-opentype"),url(../fonts/icomoon/icomoondc23.ttf?ro1v3d) format("truetype"),url(../fonts/icomoon/icomoondc23.woff?ro1v3d) format("woff"),url(../fonts/icomoon/icomoondc23.svg?ro1v3d#icomoon) format("svg");
    font-weight:400;
    font-style:normal
}
[class*=" icon-"],[class^=icon-]{
    font-family:icomoon!important;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    opacity:0;
    transition:opacity .3 ease-in-out;
    will-change:opacity;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
#loader [class^=icon-],[class*=" icon-"]{
    opacity:1;
    pointer-events:none
}
.icon-Checkpoint:before{
    content:"\E900"
}
.icon-Cursor:before{
    content:"\E901"
}
.icon-Drag_Souris:before{
    content:"\E902"
}
.icon-Mobile_Orientation{
    font-size:4.2em
}
.icon-Mobile_Orientation .path1:before{
    content:"\E903";
    color:#010202
}
.icon-Mobile_Orientation .path2:before{
    content:"\E904";
    margin-left:-1em;
    color:#422d29
}
.icon-Mobile_Orientation .path3:before{
    content:"\E905";
    margin-left:-1em;
    color:#020202
}
.icon-Mobile_Orientation .path4:before{
    content:"\E906";
    margin-left:-1em;
    color:#422d29
}
.icon-Mobile_Orientation .path5:before{
    content:"\E907";
    margin-left:-1em;
    color:#020202
}
.icon-Mobile_Orientation .path6:before{
    content:"\E908";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path7:before{
    content:"\E909";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path8:before{
    content:"\E90A";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path9:before{
    content:"\E90B";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path10:before{
    content:"\E90C";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path11:before{
    content:"\E90D";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path12:before{
    content:"\E90E";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path13:before{
    content:"\E90F";
    margin-left:-1em;
    color:#422d29
}
.icon-Mobile_Orientation .path14:before{
    content:"\E910";
    margin-left:-1em;
    color:#020202
}
.icon-Mobile_Orientation .path15:before{
    content:"\E911";
    margin-left:-1em;
    color:#020202
}
.icon-Mobile_Orientation .path16:before{
    content:"\E912";
    margin-left:-1em;
    color:#020202
}
.icon-Mobile_Orientation .path17:before{
    content:"\E913";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path18:before{
    content:"\E914";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path19:before{
    content:"\E915";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path20:before{
    content:"\E916";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path21:before{
    content:"\E917";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path22:before{
    content:"\E918";
    margin-left:-1em;
    color:#010202
}
.icon-Mobile_Orientation .path23:before{
    content:"\E919";
    margin-left:-1em;
    color:#010202
}
.icon-Thug:before{
    content:"\E91A"
}
.icon-wasd .path1:before{
    content:"\E91B";
    color:#010202
}
.icon-wasd .path2:before{
    content:"\E91C";
    margin-left:-1em;
    color:#010202
}
.icon-wasd .path3:before{
    content:"\E91D";
    margin-left:-1em;
    color:#010202
}
.icon-wasd .path4:before{
    content:"\E91E";
    margin-left:-1em;
    color:#010202
}
.icon-wasd .path5:before{
    content:"\E91F";
    margin-left:-1em;
    color:#000
}
.icon-wasd .path6:before{
    content:"\E920";
    margin-left:-1em;
    color:#000
}
.icon-wasd .path7:before{
    content:"\E921";
    margin-left:-1em;
    color:#000
}
.icon-wasd .path8:before{
    content:"\E922";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path1:before{
    content:"\E923";
    color:#412c28
}
.icon-Mobile_rotation_solo .path2:before{
    content:"\E924";
    margin-left:-1em;
    color:#412c28
}
.icon-Mobile_rotation_solo .path3:before{
    content:"\E925";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path4:before{
    content:"\E926";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path5:before{
    content:"\E927";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path6:before{
    content:"\E928";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path7:before{
    content:"\E929";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path8:before{
    content:"\E92A";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path9:before{
    content:"\E92B";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation_solo .path10:before{
    content:"\E92C";
    margin-left:-1em;
    color:#412c28
}
.icon-Mobile_rotation .path1:before{
    content:"\E92D";
    color:#412c28
}
.icon-Mobile_rotation .path2:before{
    content:"\E92E";
    margin-left:-1em;
    color:#412c28
}
.icon-Mobile_rotation .path3:before{
    content:"\E92F";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path4:before{
    content:"\E930";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path5:before{
    content:"\E931";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path6:before{
    content:"\E932";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path7:before{
    content:"\E933";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path8:before{
    content:"\E934";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path9:before{
    content:"\E935";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path10:before{
    content:"\E936";
    margin-left:-1em;
    color:#412c28
}
.icon-Mobile_rotation .path11:before{
    content:"\E937";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path12:before{
    content:"\E938";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path13:before{
    content:"\E939";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path14:before{
    content:"\E93A";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path15:before{
    content:"\E93B";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path16:before{
    content:"\E93C";
    margin-left:-1em;
    color:#000
}
.icon-Mobile_rotation .path17:before{
    content:"\E93D";
    margin-left:-1em;
    color:#000
}
.icon-mouse_horizontal:before{
    content:"\E93E"
}
.icon-swipe:before{
    content:"\E93F"
}
#loader .content_loader{
    pointer-events:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    position:relative;
    height:90%
}
#loader .flex-container{
    width:100%;
    display:-ms-flexbox;
    display:flex
}
#loader .flex-container_desktop{
    position:absolute;
    top:40%;
    left:0;
    right:0;
    transform:translateY(-50%);
    -ms-flex-direction:row;
    flex-direction:row;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -ms-flex-align:center;
    align-items:center
}
#loader .flex-container_desktop div{
    text-align:center;
    width:30%
}
#loader .flex-container_mobile{
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top:25px;
    position:absolute;
    top:50%;
    transform:translateY(-50%)
}
#loader .flex-container_mobile div{
    text-align:center;
    width:100%;
    margin-bottom:20px
}
#loader .button-start{
    opacity:0!important;
    transition:opacity .3s ease-in-out;
    cursor:pointer
}
#loader.is-ready .button-start{
    opacity:inherit!important
}
.about-desc-menu{
    color:#fff;
}
;
/*# sourceMappingURL=app.2e374c84cf5c8ec50186bb33410658d1.css.map */