/* Home */
.container,
.container-fluid,
section {
    overflow: hidden
}

.logo-container {
    display: none;
    -webkit-animation: fade 1s 1 0s;
    -moz-animation: fade 1s 1 0s;
    -o-animation: fade 1s 1 0s;
    animation: fade 1s 1 0s
}

@keyframes fade {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

#navbar {
    background-color: transparent
}

.navChange {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

.offsetLeft {
    transform: translateX(-18%)
}

.mask01 {
    overflow: hidden;
    display: block;
    height: 1000px;
    width: 80%;
    float: right;
    z-index: 0
}

.z-100 {
    z-index: 100
}

.introDeplacement {
    transform: translateY(10vh)
}

#logoAnimated {
    max-width: 550px
}

#section02 {
    position: relative
}

.bike {
    position: absolute;
    margin-top: 5%
}

.text-block-02 {
    max-width: 380px
}

.imgSection03 {
    transform: translateX(-3vw)
}

.offsetRight {
    transform: translateX(7vh)
}

.shellImg {
    width: 63%;
    max-width: 1000px;
    transform: translateX(41vw);
    position: absolute;
    bottom: 0
}

.shape01 {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-image: url(/assets/images/home/line_diagonal-01.svg);
    background-repeat: no-repeat;
    top: -150px;
    background-size: 800px;
    background-position-x: -300px;
    background-position-y: -371px;
    left: 0
}

.shape02 {
    width: 100%;
    height: 184vh;
    position: absolute;
    background-image: url(/assets/images/home/semi_circle_orange.svg);
    background-repeat: no-repeat;
    top: 0;
    background-position-x: 100%;
    left: 0;
    background-size: 32%
}

.shape03 {
    width: 100%;
    height: 200vh;
    z-index: -1;
    position: absolute;
    background-image: url(/assets/images/home/zig_zag_orange.svg);
    background-repeat: no-repeat;
    top: 0;
    background-position-x: 0;
    background-position-y: 30%;
    left: 0;
    background-size: 100%
}

.shape04 {
    width: 100%;
    height: 190vh;
    z-index: -1;
    position: absolute;
    background-image: url(/assets/images/home/r_vector.svg);
    background-repeat: no-repeat;
    top: 0;
    background-position-x: -7%;
    background-position-y: 16%;
    left: 0;
    background-size: 600px;
    overflow: visible
}

.shape05 {
    width: 100%;
    height: 200vh;
    z-index: -1;
    position: absolute;
    background-image: url(/assets/images/home/line_diagonal.svg);
    background-repeat: no-repeat;
    top: 0;
    background-position-x: 100%;
    background-position-y: 75%;
    left: 0;
    background-size: 600px;
    overflow: visible;
}

@media only screen and (max-width: 1200px) {
    .shape01 {
        background-size: 55%;
        background-position-x: -289px;
        background-position-y: 0
    }

    .mask01 {
        height: auto
    }

    .shape02 {
        background-position-x: 116%;
        background-size: 32%;
        background-position-y: 15%
    }

    .big--title {
        font-size: 14vw;
        font-weight: 400;
        line-height: 12vh;
        letter-spacing: -.01em
    }

    .bike {
        position: absolute;
        margin-top: 16%
    }

    .bike img {
        width: 64%
    }
}

@media only screen and (max-width: 920px) {
    .mask01 {
        width: 100%
    }

    .shape01 {
        background-size: 51%;
        background-position-x: -57%;
        background-position-y: 26%
    }

    #logoAnimated {
        max-width: 415px
    }

    .shape02 {
        background-position-x: 101%;
        background-size: 38%;
        background-position-y: 20%
    }

    .shape05 {
        background-position-x: 183%;
        background-position-y: 80%;
        background-size: 500px
    }

    .shape04 {
        background-position-x: -7%;
        background-position-y: 40%;
        background-size: 400px
    }

    .bike img {
        width: 53%
    }
}

@media only screen and (max-width: 768px) {
    .offsetLeft {
        transform: translateX(0)
    }

    .gap-Pad {
        display: none
    }

    .shape01 {
        background-size: 51%;
        background-position-x: -57%;
        background-position-y: -20%
    }

    .shape03 {
        background-position-y: 17%
    }

    .shape02 {
        background-position-x: 137%;
        background-size: 38%;
        background-position-y: -8%
    }
}

@media only screen and (max-width: 575px) {
    shape01 {
        background-size: 500px;
        background-position-x: 296%;
        background-position-y: 0;
        height: 100vh
    }

    .shape02 {
        background-position-x: 137%;
        background-size: 42%;
        background-position-y: 17%
    }

    .shape03 {
        background-position-y: -13%;
        background-size: 236%
    }

    .shape04 {
        background-position-x: -7%;
        background-position-y: -7%;
        background-size: 359px
    }

    .shape05 {
        background-position-x: 274%;
        background-position-y: 112%;
        background-size: 500px
    }

    .shellImg {
        width: 100%;
        max-width: 1000px;
        transform: translateX(0);
        position: relative;
        bottom: 0
    }

    .bike {
        position: relative;
        transform: translate(-20px, 0);
        margin-top: 5%;
    }

    .bike img {
        width: 53%;
    }

    .lifestyleImg,
    .peopleImg {
        width: 100%
    }

    .linedTextIntro {
        margin-bottom: 5vh
    }
}