@charset "UTF-8";

/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: rgb(255, 100, 0);
    font-family: "Monument grotesk";
}

@font-face {
    font-family: "Monument grotesk";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/MonumentGrotesk-Regular.otf") format("opentype");
}
  
  
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    /* width: 100vw; */
    /* overflow: hidden; */
    font-size: 15px;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

a :hover {
    z-index: 10000000;
}

.hidden {
    display: none;
}

/* */

.container-bouton {
    width: 100%;
    background-color: white;
    display: flex;
}

.container-turnback {
    width: 100%;
    display: flex;
    position: relative;
}

.bouton-turnback {
    position: absolute;
    color: rgb(255, 100, 0);
    font-family: "Monument grotesk";
    text-align: center;
    padding: 10px;
    width: 100%;
    height: 100%;
    border-left: 1px solid rgb(255, 100, 0);
}

.bouton-turnback:hover {
    background-color: rgb(255, 100, 0);
    color: black;
    cursor: pointer;
    text-align: center;
    transition: background-color .5s ease-in-out;
}

.yagers-info {
    color: rgb(255, 100, 0);
    font-family: "Monument grotesk";
    text-align: center;
    padding: 10px;
    width: 100%;
    border-left: 1px solid rgb(255, 100, 0);
}


.ville-info {
    color: rgb(255, 100, 0);
    font-family: "Monument grotesk";
    text-align: center;
    padding: 10px;
    width: 100%;
}

.kaiju-info {
    color: rgb(255, 100, 0);
    font-family: "Monument grotesk";
    text-align: center;
    padding: 10px;
    width: 100%;
    border-left: 1px solid rgb(255, 100, 0);
}

.panel-one {
    width: 100%;
    z-index: 10;
    position: absolute;
    padding: 10px;
    transform: translate3d(100%, 0, 0);
    transition: all 1s ease-in-out;
    font-size: 30px;
    column-count: 2;
}

.panel-one.switch-on {
    transform: translate3d(0, 0, 0);
    transition: all 1s ease-in-out;
}

.ville-info:hover {
    background-color: rgb(255, 100, 0);
    color: black;
    cursor: pointer;
    text-align: center;
    transition: background-color .5s ease-in-out;
}

.kaiju-info:hover {
    background-color: greenyellow;
    color: black;
    cursor: pointer;
    text-align: center;
    transition: background-color .5s ease-in-out;
}

.yagers-info:hover {
    background-color: rgb(255, 100, 0);
    color: black;
    cursor: pointer;
    text-align: center;
    transition: background-color .5s ease-in-out;
}

.container-two {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-intro {
    z-index: 0;
    position: absolute;
    width: 100%;
    filter: blur(0px);
    transition: filter 1s ease-in-out;
}

.image-intro.switch-on {
    filter: blur(10px);
    transition: filter 1s ease-in-out;
}

.panel-intro {
    position: absolute;
    background-color: rgb(255, 100, 0);
    transform: translate3d(100%, 0, 0);
    font-family: Monument Grotesk;
    font-size: 20px;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: white;
    transition: transform 1s ease-in-out;
}

.panel-intro.switch-on {
    transform: translate3d(0, 0, 0);
}


.panel-1 {
    position: absolute;
    background-color: rgb(255, 100, 0);
    transform: translate3d(200%, 0, 0);
    font-family: Monument Grotesk;
    font-size: 15px;
    width: 50%;
    height: 100%;
    color: black;
    transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out;
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.panel-1.switch-on {
    transform: translate3d(100%, 0, 0);
    background-color: rgb(255, 100, 0);
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
    transition: transform 1s ease-in-out, clip-path 1s ease-in-out;
}



.image-blur-1 {
    z-index: 0;
    position: absolute;
    transform: translate3d(0, 0, 0);
    /* transition: transform 1s ease-in-out; */
    transition: all 0.5s;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
    /* transition: filter 1s ease-in-out; */
    filter: blur(0px);
}


.image-blur-1:hover {
    filter: blur(10px);
    clip-path: polygon(50% 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 50% 100%, 0% 70%, 0% 30%);
    transition: filter 0.5s ease-in-out;
    transition: all 0.5s;
}

.image-blur-2 {
    z-index: 0;
    position: absolute;
    transform: translate3d(0, 0, 0);
    transition: all 0.5s;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
    filter: blur(0px);
}


.image-blur-2:hover {
    filter: blur(10px);
    clip-path: polygon(0 0, 50% 0, 100% 30%, 100% 70%, 50% 100%, 0 100%, 0% 70%, 0% 30%);
    transition: filter 0.5s ease-in-out;
    transition: all 0.5s;
}


.text-right {
    z-index: 10;
    top: 50%;
    width: 100%;
    position: relative;
    transform: translate3d(0, 0, 0);
    font-size: 30px;
    padding: 5px;
    text-align: center;
    color: black;
    cursor: pointer;
    transition: all 1s ease-in-out;
}

.text-right.switch-on {
    transform: translate3d(-100%, 0, 0);
    transition: all 1s ease-in-out;
}

.text-left {
    z-index: 10;
    top: 50%;
    width: 100%;
    position: relative;
    transform: translate3d(0, 0, 0);
    font-size: 30px;
    padding: 5px;
    text-align: center;
    color: black;
    cursor: pointer;
    transition: all 1s ease-in-out;
}

.text-left.switch-on {
    transform: translate3d(100%, 0, 0);
    transition: all 1s ease-in-out;
}

.text-pilot-one {
    position: absolute;
    color: black;
    font-size: 30px;
    top: 50%;
    left: 2%;
    z-index: 5;
    transition: transform 1s ease-in-out;
    transform: translate3d(100%, 0, 0);
}

.text-pilot-one.switch-on {
    transform: translate3d(0, 0, 0);
}

.text-pilot-two {
    position: absolute;
    color: black;
    font-size: 30px;
    top: 50%;
    left: 2%;
    z-index: 5;
    transition: transform 1s ease-in-out;
    transform: translate3d(-100%, 0, 0);
}

.text-pilot-two.switch-on {
    transform: translate3d(0, 0, 0);
}


.panel-2 {
    position: absolute;
    background-color: rgb(255, 100, 0);
    transform: translate3d(-100%, 0, 0);
    font-family: "Monument Grotesk";
    font-size: 15px;
    width: 50%;
    height: 100%;
    color: black;
    transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out 0s;
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

.panel-2.switch-on {
    transform: translate3d(0%, 0, 0);
    background-color: rgb(255, 100, 0);
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%);
    transition: transform 1s ease-in-out, clip-path 1s ease-in-out;
}

.panel-3 {
    position: relative;
    background-color: greenyellow;
    transform: translate3d(0, -200%, 0);
    font-family: Monument Grotesk;
    font-size: 15px;
    width: 100%;
    height: 100%;
    color: black;
    transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out 0s;
    clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 51% 100%, 0 75%);
}

.panel-3.switch-on {
    transform: translate3d(0, 0, 0);
    background-color: greenyellow;
    clip-path: polygon(0 0, 50% 0%, 100% 0, 100% 100%, 51% 100%, 0 100%);
    transition: transform 1s ease-in-out, clip-path 1s ease-in-out 1s;
} 

.image-kaiju-one {
    width: 100vw;
    z-index: 0;
    position: absolute;
    transition: all 1s ease-in-out;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 70%, 100% 100%, 0 100%, 0% 70%, 0% 30%);
    filter: blur(0px);
}

.image-kaiju-one:hover {
    clip-path: polygon(50% 0, 50% 0, 100% 30%, 100% 70%, 50% 100%, 50% 100%, 0% 70%, 0% 30%);
    transition: all 1s ease-in-out;
    filter: blur(10px);
}

.kaiju-title {
    z-index: 10;
    top: 50%;
    width: 100%;
    position: relative;
    transform: translate3d(0, 0, 0);
    font-size: 30px;
    padding: 5px;
    text-align: center;
    color: greenyellow;
    cursor: pointer;
    transition: all 1s ease-in-out;
}

.kaiju-title.switch-on {
    transform: translate3d(-100%, 0, 0);
}

.text-kaiju-one {
    width: 100%;
    z-index: 10;
    position: absolute;
    transform: translate3d(100%, 0, 0);
    top: 35%;
    column-count: 2;
    font-size: 30px;
    padding: 10px;
    color: greenyellow;
    transition: all 1s ease-in-out;
}

.text-kaiju-one.switch-on {
    transform: translate3d(0%, 0, 0);
    transition: all 1s ease-in-out;
}

@media screen and (max-width: 588px) {
    .panel-one {
        width: 100%;
        z-index: 10;
        position: absolute;
        padding: 10px;
        transform: translate3d(100%, 0, 0);
        transition: all 1s ease-in-out;
        font-size: 30px;
        column-count: 1;
    }

    .image-intro {
        z-index: 0;
        position: absolute;
        width: 250vh;
        filter: blur(0px);
        transition: filter 1s ease-in-out;
    }

    .panel-3 {
        position: relative;
        background-color: greenyellow;
        transform: translate3d(0, -200%, 0);
        font-family: Monument Grotesk;
        font-size: 15px;
        width: 100%;
        height: 150%;
        color: black;
        transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out 0s;
        clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 51% 100%, 0 75%);
    }

    .kaiju-title {
        z-index: 10;
        top: 25%;
        width: 100%;
        position: relative;
        transform: translate3d(0, 0, 0);
        font-size: 30px;
        padding: 5px;
        text-align: center;
        color: black;
        cursor: pointer;
        transition: all 1s ease-in-out;
    }

    .text-kaiju-one {
        width: 100%;
        z-index: 10;
        position: absolute;
        transform: translate3d(100%, 0, 0);
        top: 25%;
        column-count: 1;
        font-size: 30px;
        padding: 10px;
        color: black;
        transition: all 1s ease-in-out;
    }

    .panel-1 {
        position: absolute;
        background-color: rgb(255, 100, 0);
        transform: translate3d(200%, 0, 0);
        font-family: Monument Grotesk;
        font-size: 15px;
        width: 50%;
        height: 120%;
        color: black;
        transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out;
        clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
    }

    .panel-2 {
        position: absolute;
        background-color: rgb(255, 100, 0);
        transform: translate3d(-100%, 0, 0);
        font-family: "Monument Grotesk";
        font-size: 15px;
        width: 50%;
        height: 120%;
        color: black;
        transition: transform 1s ease-in-out 1s, clip-path 1s ease-in-out 0s;
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    }

    .text-right {
        z-index: 10;
        top: 32%;
        width: 100%;
        position: relative;
        transform: translate3d(0, 0, 0);
        font-size: 30px;
        padding: 5px;
        text-align: center;
        color: black;
        cursor: pointer;
        transition: all 1s ease-in-out;
    }

    .text-left {
        z-index: 10;
        top: 32%;
        width: 100%;
        position: relative;
        transform: translate3d(0, 0, 0);
        font-size: 30px;
        padding: 5px;
        text-align: center;
        color: black;
        cursor: pointer;
        transition: all 1s ease-in-out;
    }

    .text-pilot-one {
        position: absolute;
        color: black;
        font-size: 30px;
        top: 32%;
        left: 2%;
        z-index: 5;
        transition: transform 1s ease-in-out;
        transform: translate3d(100%, 0, 0);
    }
    
    .text-pilot-two {
        position: absolute;
        color: black;
        font-size: 30px;
        top: 32%;
        left: 2%;
        z-index: 5;
        transition: transform 1s ease-in-out;
        transform: translate3d(-100%, 0, 0);
    }
  }