@charset "UTF-8";

@font-face {
    font-family: "creolia";
    src: local("creolia"),
        url("../fonts/transfonter.org-20230311-143729/Creolia.woff") format("woff");
}

:root {
    --frise-largeur: 2200%;
}
@media (max-width: 600px) {
    :root  {
        --frise-largeur: 4400%;
    }
}

/* * {
    box-sizing: border-box;
} */

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
    scroll-snap-type: both mandatory;
    scroll-behavior: smooth;
    /* overflow-x: hidden; */

}

body {
    /* position: fixed; */
    width: 100%;
    height: 100%;
    /* position: relative; */
    overflow-y: scroll;
}

.container {
    scroll-snap-align: start;
    background-color: rgb(110, 199, 158);
    height: 100%;
    width: 100%;
    border-bottom: 1px solid black;
    position: relative;
    overflow: hidden;
}

#container1 .sub-container {
    background-color: rgb(110, 199, 158);
}
.sub-container {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 3;
}



#container3 {
    z-index: 0;
    height: 100%;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    display: inline-block;
    position: relative;
    background-color: rgb(25, 83, 199);
}

.scroll-content {
    height: 100%;
    width: var(--frise-largeur);
}

.scroll-content>* {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
}



#paragraph1 {
    width: 100%;
    font-size: 5em;
}


#carte {
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80vw;
    height: 90vh;
}


.row {
    width: 100%;
    display: flex;
    flex-direction: row;
}


.row1 {
    background-color: rgb(229, 216, 67);
    height: 15%;
    border-radius: 0% 0% 20% 0%;
}

@media (max-width: 600px) {
    .row1 {
        height: 600px;
    }
}


.titre {
    margin-top: 2vh;
    margin-left: 1vh;
    font-size: 8rem;
    font-family: "creolia";
    color: white;
}

@media (max-width: 600px) {
    .titre {
        font-size: 3rem;
    }
}



.row2 {
    background-color: rgb(0, 0, 82);
    height: 45%;
}

@media (max-width: 600px) {
    .row2 {
        height: 2000px;
    }
}

.row3 {
    height: 40%;
    background-color: rgb(110, 199, 158);
}

.elem {
    height: 100%;
    width: calc(100%/3);
}

.elem1 {
    background-color: rgb(110, 199, 158);
    border-radius: 0% 0% 40% 0%;
    height: 60%;

}

@media (max-width: 600px) {
    .elem1 img {
        height: 20%;
        top: 140%;
        z-index: 100;
    }
}

.elem2 {
    background-color: rgb(229, 216, 67);
    border-radius: 40% 0% 0% 0%;
    width: 15%;
    margin-left: 6vh;

}

.elem3 {
    width: 58.3%;
    background-color: rgb(25, 83, 199);
    border-radius: 0% 40% 0% 0%;
    width: 25%;

}


.elem4 {
    width: 20%;
    background-color: rgb(25, 83, 199);
    border-radius: 0% 0% 0% 0%;

}

.elem5 {
    width: 37.15%;
    background-color: rgb(237, 173, 54);
    border-radius: 0% 0% 40% 0%;
    width: 25%;
    height: 70%;

}

.elem6 {
    width: 50%;
    background-color: rgb(207, 104, 147);
    border-radius: 40% 0% 0% 0%;
    width: 25%;
    margin-left: 30%;

}

.elem7 {
    width: 50%;
    background-color: rgb(229, 216, 67);
    border-radius: 0% 40% 0% 0%;

}



@media screen and (max-width : 600px) {
    .elem {
        width: 100%;
    }

    .row {
        flex-direction: column;
    }
}


.button {
    background-color: transparent;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 20vw;
    cursor: pointer;
    transition: border-radius 0.5s ease-in-out;
}

.button p {
    position: absolute;
    margin-top: 45%;
    margin-left: 25%;
    color: white;
    font-size: 8rem;
    font-family: "creolia";
}

.button p:hover {
    color: rgb(128, 171, 240);
}


.button2 {
    background-color: transparent;
    position: absolute;
    left: 20%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 10vw;
    cursor: pointer;
    transition: border-radius 0.5s ease-in-out;
    transform: rotate(-90deg);
    z-index: 20;
}

@media (max-width: 600px) {
    .button2 {
        z-index: 201;
        top: 20%;
    }
}


.button2 p {
    position: absolute;
    left: 52%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3.5rem;
    font-family: "creolia";
    white-space: nowrap;

}

.button2 p:hover {
    color: rgb(110, 199, 158);
}

@media (max-width: 600px) {
    .button2 p {
        font-size: 3rem;
        margin-top: 70%;
        left: -100%
    }
}


.list {
    position: absolute;
    width: 52%;
    height: 100%;
    top: 0%;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out;
    background-color: rgb(255, 97, 97);
    z-index: 5;
}

@media (max-width: 600px) {
    .list {
        transform: translate(0%, -200%);
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 50%;
        overflow: scroll;
    }
}

.list p {
    margin-top: 5%;
    /* margin-left: 10px; */
    /* color: white; */
    /* font-size: 3.5rem; */
    font-family: "creolia";
}

.titre-list {
    margin-top: 5%;
    margin-left: 50px;
    color: white;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .list p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

@media (max-width: 600px) {
    .titre-list {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}


.showList .list {
    transform: translateX(0%);
}

.show-equipement-velo .equipement-velo-panel {
    transform: translateX(0%);
}

.show-outils .outils-panel {
    transform: translateX(0%);
}

.show-pieces-rechange .pieces-rechange-panel {
    transform: translateX(0%);
}

.show-vetements .vetements-panel {
    transform: translateX(0%);
}

.show-equipement-voyage .equipement-voyage-panel {
    transform: translateX(0%);
}

.show-materiel .materiel-panel {
    transform: translateX(0%);
}

.show-cuisine .cuisine-panel {
    transform: translateX(0%);
}


.texte-panel {
    transform: translateX(100%);
}

@media screen and (max-width: 600px) {
    .showList .list {
        transform: translate(0%, 0%);
    }
    
    .show-equipement-velo .equipement-velo-panel {
        transform: translateY(100%);
    }
    
    .show-outils .outils-panel {
        transform: translateY(100%);
    }
    
    .show-pieces-rechange .pieces-rechange-panel {
        transform: translateY(100%);
    }
    
    .show-vetements .vetements-panel {
        transform: translateY(100%);
    }
    
    .show-equipement-voyage .equipement-voyage-panel {
        transform: translateY(100%);
    }
    
    .show-materiel .materiel-panel {
        transform: translateY(100%);
    }
    
    .show-cuisine .cuisine-panel {
        transform: translateY(100%);
    }
    
    
    .texte-panel {
        transform: translateX(100%);
    }
}
/* #animContainer {
        width: 100%;
        height: 100%;
      } */


.list-buttons {
    height: 100%;
    display: 8 flex;
    flex-direction: column;
    z-index: 5;
}


.list-element {
    cursor: pointer;
    font-size: 3.5rem;
    transition: font-size 0.2s ease;
    z-index: 4;
}
.list-element:hover {
    font-size: 5rem;
    /* filter: blur(1px); */
}


/* #equipement-velo {
    color: white;
    transition: color 0.3s ease;
  }
  
#equipement-velo:hover {
    color:  rgb(255, 97, 97);
  } */

/* .list-element {
        background-color: rgb(0, 0, 0, 0);
        transition: background-color 0.2s ease-in-out;

      } */
/* #outils:hover {
        cursor: pointer;
        background-color: rgba(25, 83, 199, 1);
      } */

.list-panel {
    left: 50%;
    top: 0%;
    width: 50%;
    height: 100%;
    position: absolute;
    transform: translateX(-200%);
    transition: transform 0.5s ease-in-out;
    z-index: 4;

}


@media (max-width: 600px) {
    .list-panel {
        /* transform: translateX(-500%); */
        transform: translateY(-200%);

        /* top: -200%; */
        width: 100%;
        height: 50%;
        overflow: scroll;
        left: 0%;
        z-index: 200;
    }
}



.titre-equipement-velo-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-equipement-velo-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}


.equipement-velo-panel {
    background-color: rgb(229, 216, 67);
}


.equipement-velo-panel p {
    position: absolute;
    color: white;
    line-height: 190%;
    text-align: start;
    font-size: 3.5rem;
    font-family: "creolia";
    white-space: nowrap;
}

@media (max-width: 600px) {
    .equipement-velo-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}



.titre-outils-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-outils-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.outils-panel {
    background-color: rgb(25, 83, 199);
    z-index: 3;
}

.outils-panel p {
    position: absolute;
    margin-top: 3%;
    margin-left: 2%;
    color: white;
    line-height: 190%;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .outils-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

.titre-pieces-rechanges {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-pieces-rechanges {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.pieces-rechange-panel {
    background-color: rgb(110, 199, 158);
}

.pieces-rechange-panel p {
    position: absolute;
    margin-top: 3%;
    /* margin-left: 10%; */
    color: white;
    line-height: 190%;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .pieces-rechange-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

.titre-vetements-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 190%;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-vetements-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.vetements-panel {
    background-color: rgb(229, 216, 67);
}

.vetements-panel p {
    position: absolute;
    color: white;
    line-height: 190%;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .vetements-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

.titre-equipement-voyage-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-equipement-voyage-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.equipement-voyage-panel {
    background-color: rgb(25, 83, 199);
}

.equipement-voyage-panel p {
    position: absolute;
    /* margin-left: 10%; */
    color: white;
    line-height: 190%;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .equipement-voyage-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

.titre-materiel-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    white-space: nowrap;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-materiel-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.materiel-panel {
    background-color: rgb(0, 0, 82);
}

.materiel-panel p {
    position: absolute;
    /* margin-left: 10%; */
    color: white;
    line-height: 190%;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .materiel-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}

.titre-cuisine-panel {
    position: absolute;
    top: 2%;
    margin-left: 10%;
    color: white;
    line-height: 170%;
    white-space: nowrap;
    font-size: 5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .titre-cuisine-panel {
        font-size: 3rem;
        white-space: nowrap;
        margin-left: 15px;
    }
}

.cuisine-panel {
    background-color: rgb(229, 216, 67);
}

.cuisine-panel p {
    position: absolute;
    /* margin-left: 10%; */
    color: white;
    line-height: 190%;
    white-space: nowrap;
    font-size: 3.5rem;
    font-family: "creolia";
}

@media (max-width: 600px) {
    .cuisine-panel p {
        font-size: 2rem;
        white-space: nowrap;
        margin-left: 5px;
    }
}



#palmier {
    position: absolute;
    top: 35%;
    left: 47%;
    width: 50vw;
    height: 70vh;
}

@media (max-width: 600px) {
    #palmier {
        width: 50vw;
        top: 102%;
    }
}


#palmier2 {
    position: absolute;
    top: 55%;
    left: 35%;
    width: 50vw;
    height: 50vh;
}

@media (max-width: 600px) {
    #palmier2 {
        width: 0vw;
    }
}

#ballon {
    position: absolute;
    top: 80%;
    left: 7%;
    width: 20vw;
    height: 20vh;
    animation-duration: 10s;
    animation-name: glissement;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes glissement {
    from {
        margin-left: 0%;
    }

    to {
        margin-left: 100%;
    }
}

img {
    position: absolute;
    height: 30%;
    margin-top: 1%;

}



.sacoches {
    background-color: transparent;
}

.sacoches p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 4rem;
    font-family: "creolia";

}

.showim .sacoches {
    opacity: 0%;
}

.image2 {
    position: absolute;
    height: 107%;
    margin-top: 5%;
    z-index: 20
}
/* button site suivant */

.button-suivant {
    background-color: transparent;
    position: absolute;
    left: 2210%;
    top: 30%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 10vw;
    cursor: pointer;
    transition: border-radius 0.5s ease-in-out;
    z-index: 100;
}

@media (max-width: 600px) {
    .button-suivant {
        z-index: 201;
        left: 4370%;
        top: 10%;
    }
}


.button-suivant p {
    position: absolute;
    left: 52%;
    top: 45%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 5.5rem;
    font-family: "creolia";
    white-space: nowrap;

}

.button-suivant p:hover {
    color: rgb(110, 199, 158)
}

@media (max-width: 600px) {
    .button-suivant p {
        font-size: 3rem;
        margin-top: 70%;
        left: -100%
    }
}


/* decor */
.frise-sable {
    width: var(--frise-largeur);
    height: 20%;
    bottom: 0;
    background-color: rgb(229, 216, 67);
    border-radius: 0% 0% 0% 0%;
    z-index: 50;
}
@media (max-width: 600px) {
    .frise-sable   {
        overflow: hidden;
    }
}

.frise-soleil {
    background-color: rgb(237, 173, 54);
    border-radius: 100%;
    height: 40vh;
    width: 40vh;
    bottom: 5%;
    left: 130%;
    z-index: 40;
}

.frise-monatgne-1 {
    position: absolute;
    height: 300vh;
    width: 80vh;
    bottom: -243%;
    left: 230%;
    background-image: url("../images/SVG/SVG_montagne\ grande.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-1   {
        width: 50vh;
        bottom: -450%;
    }
}


.frise-monatgne-2 {
    position: absolute;
    height: 80vh;
    width: 80vh;
    bottom: -15%;
    left: 265%;
    background-image: url("../images/SVG/SVG_montagne\ petite.svg");
    z-index: 49;
}
@media (max-width: 600px) {
    .frise-monatgne-2   {
        width: 70vh;
        bottom: -300%;
    }
}

.frise-monatgne-3 {
    position: absolute;
    height: 300vh;
    width: 80vh;
    bottom: -243%;
    left: 360%;
    background-image: url("../images/SVG/SVG_montagne\ grande.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-3  {
        width: 70vh;
        bottom: -290%;
        left: 450%;
    }
}


.frise-monatgne-4 {
    position: absolute;
    height: 80vh;
    width: 80vh;
    bottom: -15%;
    left: 395%;
    background-image: url("../images/SVG/SVG_montagne\ petite.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-4  {
        width: 60vh;
        bottom: -250%;
        left: 600%;
    }
}

.frise-monatgne-5 {
    position: absolute;
    height: 80vh;
    width: 80vh;
    bottom: -15%;
    left: 830%;
    background-image: url("../images/SVG/SVG_montagne\ petite.svg");
    z-index: 40;
}

@media (max-width: 600px) {
    .frise-monatgne-5  {
        bottom: -20%;
        left: 900%;
    }
}
.frise-monatgne-6 {
    position: absolute;
    height: 80vh;
    width: 80vh;
    bottom: -15%;
    left: 1160%;
    background-image: url("../images/SVG/SVG_montagne\ petite.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-6  {
        bottom: -20%;
        left: 1200%;
    }
}

.frise-monatgne-7 {
    position: absolute;
    height: 300vh;
    width: 80vh;
    bottom: -243%;
    left: 900%;
    background-image: url("../images/SVG/SVG_montagne\ grande.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-7  {
        bottom: -20%;
        left: 3900%;
    }
}

.frise-monatgne-8 {
    position: absolute;
    height: 300vh;
    width: 80vh;
    bottom: -243%;
    left: 1700%;
    background-image: url("../images/SVG/SVG_montagne\ grande.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-8  {
        bottom: -60%;
    }
}

.frise-monatgne-9 {
    position: absolute;
    height: 300vh;
    width: 80vh;
    bottom: -243%;
    left: 1500%;
    background-image: url("../images/SVG/SVG_montagne\ grande.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-9  {
        bottom: -280%;
        left: 2500%;
       }
}

.frise-monatgne-10 {
    position: absolute;
    height: 80vh;
    width: 80vh;
    bottom: -15%;
    left: 1560%;
    background-image: url("../images/SVG/SVG_montagne\ petite.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-monatgne-10  {
        bottom: -20%;
       }
}

.frise-svg-foret {
    position: absolute;
    height: 120vh;
    width: 200vh;
    bottom: -30%;
    left: 1640%;
    background-image: url("../images/SVG/foret3.svg");
    z-index: 60;
}

.frise-svg-foret2 {
    position: absolute;
    height: 200vh;
    width: 30vh;
    bottom: -15%;
    left: 1060%;
    background-image: url("../images/SVG/foret4.svg");
    z-index: 40;
}




.frise-element {
    position: absolute;
    width: 15%;
    height: 75%;
    left: 0;
    bottom: 0;
    background-color: rgb(207, 104, 147);
    border-radius: 0% 40% 0% 0%;
    z-index: 49;
}

.frise-element-titre-debut {
    position: absolute;
    width: 50%;
    height: 25%;
    left: 0;
    top: 0;
    background-color: rgb(229, 216, 67);
    border-radius: 0% 0% 0% 0%;
    z-index: 50;
}
@media (max-width: 600px) {
    .frise-element-titre-debut  {
        width: 200%;

    }
}

.frise-element-titre-debut p {
    position: absolute;
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    top: 10%;
    left: 2%;
    white-space: nowrap;

}


@media (max-width: 600px) {
    .frise-element-titre-debut p {
        font-size: 4rem;
    }
}


.frise-element-titre-fin {
    position: absolute;
    width: 15.7%;
    height: 25%;
    left: 40%;
    top: 0;
    background-color: rgb(229, 216, 67);
    border-radius: 0% 0% 40% 0%;
    z-index: 49;
}

.frise-eau {
    position: absolute;
    width: 70%;
    height: 20%;
    left: 2200%;
    bottom: 0;
    background-color: rgb(67, 175, 229);
    border-radius: 0% 0% 0% 0%;
    z-index: 50;
}
@media (max-width: 600px) {
    .frise-eau {
        left: 4250%;
        width: 100%;
        bottom: -20%;
    }
}







/* titre */
.frise-titre-rio {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*1)
}


.frise-titre-petropolis {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*2)
}

.frise-titre-juiz {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*3)
}

.frise-titre-belo {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*4)
}

.frise-titre-montes {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*5)
}

.frise-titre-maracanau {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*6)
}

.frise-titre-fortaleza {
    color: white;
    font-size: 5rem;
    font-family: "creolia";
    white-space: nowrap;
    top: 30%;
    left: calc(var(--frise-largeur)/8*7)
}

/* bike */

.monbike {
    pointer-events: none;
}

.monbike{
    overflow: hidden;
    z-index: 60;
    position: fixed;
    height: 50vh;
    width: 30vh;
    bottom: 0;
    left: 20%;
    display: block;
    transition: opacity 0.5s ease;
    opacity: 1;
    }

/* svg */
.frise-svg-rio-christ {

    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 400vh;
    width: 80vh;
    bottom: -230%;
    left: 160%;
    background-image: url("../images/SVG/SVG_christ.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-rio-christ  {
        width: 70vh;
        bottom: -300%;
        left: 200%;
    }
}

.frise-svg-rio-carnaval {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 150vh;
    width: 150vh;
    bottom: -20%;
    left: 200%;
    background-image: url("../images/SVG/SVG_carnaval.svg");
    z-index: 50;
}
@media (max-width: 600px) {
    .frise-svg-rio-carnaval  {
        width: 60vh;
        bottom: -5%;
        left: 500%;
    }
}

.frise-svg-petropolis-batiment {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 100vh;
    width: 50vh;
    bottom: -22%;
    left: 300%;
    background-image: url("../images/SVG/SVG_petropolis.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-batiment   {
        width: 80vh;
        bottom: -30%;
        left: 1100%;
    }
}

.frise-svg-petropolis-palmier-1 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 100vh;
    width: 50vh;
    bottom: -22%;
    left: 100%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-1  {
        width: 40vh;
        bottom: -125%;
    }
}

.frise-svg-petropolis-palmier-2 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 70vh;
    bottom: -120%;
    left: 145%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-2  {
        width: 60vh;
        bottom: -155%;
    }
}

.frise-svg-juiz-maracas {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 250vh;
    width: 80vh;
    bottom: -110%;
    left: 340%;
    background-image: url("../images/SVG/SVG_maracas.svg");
    z-index: 50;
}
@media (max-width: 600px) {
    .frise-svg-juiz-maracas   {
        width: 60vh;
        bottom: -160%;
        left: 3800%;
    }
}

.frise-svg-juiz-eglise {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 140vh;
    width: 80vh;
    bottom: -1%;
    left: 790%;
    background-image: url("../images/SVG/SVG_juiz\ de\ fora.svg");
    z-index: 60;
}

@media (max-width: 600px) {
    .frise-svg-juiz-eglise  {
        width: 60vh;
        bottom: -100%;
        left: 2000%;
    }
}

.frise-svg-fleur {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 100vh;
    width: 50vh;
    bottom: -1%;
    left: 480%;
    background-image: url("../images/SVG/SVG_fleur.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-fleur {
        bottom: 0%;
        left: 600%;
    }
}

.frise-svg-petropolis-palmier-3 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -140%;
    left: 490%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-3  {
        width: 80vh;
        bottom: -120%;
        left: 650%;
    }
}

.frise-svg-petropolis-palmier-4 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -120%;
    left: 500%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-4  {
        width: 60vh;
        bottom: -250%;
        left: 600%;
    }
}

.frise-svg-ballon {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -90%;
    left: 220%;
    background-image: url("../images/SVG/SVG_ballon.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-ballon  {
    width: 60vh; 
    bottom: -130%;
    left: 450%;

    }
}

.frise-svg-billet {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 70vh;
    bottom: -80%;
    left: 1380%;
    background-image: url("../images/SVG/SVG_billet.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-billet {
        width: 50vh;
        left: 3050%;
        bottom: -130%;
    }
}


.frise-svg-cocktail {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 60vh;
    transform: rotate(15deg); 
    bottom: -75%;
    left: 1910%;
    background-image: url("../images/SVG/SVG_cocktail.svg");
    z-index: 60;
}

.frise-svg-monte-eglise {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -118%;
    left: 560%;
    background-image: url("../images/SVG/SVG_monte\ claro.svg");
    z-index: 45;
}
@media (max-width: 600px) {
    .frise-svg-monte-eglise{
        width: 60vh;
        bottom: -124%;
        left: 2800%;
    }
}

.frise-svg-drapeau {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 100vh;
    bottom: -5%;
    left: 850%;
    background-image: url("../images/SVG/SVG_drapeau.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-drapeau {
        width: 80vh;
        left: 2950%;
        bottom: -33%;
    }
}

.frise-svg-petropolis-palmier-5 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -120%;
    left: 310%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-5  {
        width: 60vh;
        bottom: -350%;
        left: 300%;
    }
}

.frise-svg-parasol {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -110%;
    left: 1930%;
    background-image: url("../images/SVG/SVG_parasol.svg");
    z-index: 51;
}
@media (max-width: 600px) {
    .frise-svg-parasol  {
        bottom: -130%;
        left: 4000%;
        z-index: 50;
    }
}

.frise-svg-bateau {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 300vh;
    width: 60vh;
    bottom: -205%;
    left: 2220%;
    background-image: url("../images/SVG/SVG_bateau.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-bateau  {
        width: 10vh;
        bottom: 0%;
        left: 4000%;
    }
}


.frise-svg-petropolis-palmier-6 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -117%;
    left: 60%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-6  {
        width: 40vh;
        bottom: -155%;
    }
}

.frise-svg-petropolis-palmier-7 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 250%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-7  {
        width: 60vh;
        bottom: -150%;
        left: 350%;
    }
}

.frise-svg-petropolis-palmier-8 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -140%;
    left: 270%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-8  {
        width: 60vh;
        bottom: -350%;
        left: 280%;
    }
}

.frise-svg-petropolis-palmier-9 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 370%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-9  {
        width: 60vh;
        bottom: -150%;
        left: 3880%;
    }
}

.frise-svg-petropolis-palmier-10 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 70%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-10  {
        width: 60vh;
        bottom: -145%;
    }
}

.frise-svg-petropolis-palmier-11 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 390%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-petropolis-palmier-11 {
        width: 60vh;
        bottom: -250%;
        left: 600%;
    }
}
.frise-svg-nuage-1 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 40vh;
    bottom: -110%;
    left: 70%;
    background-image: url("../images/SVG/nuage.svg");
    z-index: 30;
}
@media (max-width: 600px) {
    .frise-svg-nuage-1  {
    left: 280%;
    bottom: -300%;
    }
}

.frise-svg-nuage-2 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -150%;
    left: 120%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-2  {
    z-index: 100;
    left: 160%;
    }
}

.frise-svg-nuage-3 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 200%;
    background-image: url("../images/SVG/nuage.svg");
    z-index: 30;
}
@media (max-width: 600px) {
    .frise-svg-nuage-3  {
    left: 260%;
    bottom: -140%;
    }
}

.frise-svg-nuage-4 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 340%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-4  {
    left: 2600%;
    bottom: -140%;
    }
}


.frise-svg-arbre-01 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 530%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-01 {
        width: 60vh;
        bottom: -150%;
        left: 2080%;
    }
}

.frise-svg-arbre-02 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 70vh;
    bottom: -140%;
    left: 590%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-arbre-02 {
        width: 60vh;
        bottom: -170%;
        left: 800%;
    }
}

.frise-svg-arbre-03 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 620%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-03 {
        width: 60vh;
        bottom: -150%;
        left: 980%;
    }
}

.frise-svg-arbre-04 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 640%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-04 {
        width: 60vh;
        bottom: -450%;
        left: 3100%;
    }
}

.frise-svg-arbre-05 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 70vh;
    bottom: -140%;
    left: 660%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-arbre-05 {
        width: 70vh;
        bottom: -160%;
        left: 1470%;
    }
}

.frise-svg-arbre-06 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 680%;
    background-image: url("../images/SVG/SVG_arbre_01.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-06 {
        width: 60vh;
        bottom: -150%;
        left: 2630%;
    }
}

.frise-svg-arbre-07 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 60vh;
    bottom: -135%;
    left: 740%;
    background-image: url("../images/SVG/SVG_arbre_02.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-arbre-07 {
        width: 60vh;
        bottom: -250%;
        left: 2500%;
    }
}

.frise-svg-arbre-08 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 700%;
    background-image: url("../images/SVG/SVG_arbre_02.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-08 {
        width: 60vh;
        bottom: -150%;
        left: 4100%;
    }
}

.frise-svg-arbre-09 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -115%;
    left: 1805%;
    background-image: url("../images/SVG/SVG_arbre_02.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-arbre-09 {
        width: 60vh;
        bottom: -160%;
        left: 2200%;
    }
}

.frise-svg-arbre-10 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 50vh;
    bottom: -135%;
    left: 880%;
    background-image: url("../images/SVG/SVG_arbre_02.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-arbre-10 {
        width: 70vh;
        bottom: -150%;
        left: 2880%;
        z-index: 60;
    }
}


.frise-svg-palmier-21 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 90vh;
    bottom: -90%;
    left: 700%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}

.frise-svg-palmier-22 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 90vh;
    bottom: -90%;
    left: 600%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
.frise-svg-palmier-23 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 90vh;
    bottom: -100%;
    left: 620%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
.frise-svg-palmier-24 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 220vh;
    width: 120vh;
    bottom: -100%;
    left: 640%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
.frise-svg-palmier-25 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 90vh;
    bottom: -120%;
    left: 680%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}


.frise-svg-batiment-rouge {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 100vh;
    bottom: -118%;
    left: 1180%;
    background-image: url("../images/SVG/SVG_batiment_rouge.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-batiment-rouge  {
        width: 60vh;
        bottom: -154%;
        left: 2350%;
    }
}

.frise-svg-pelican {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -110%;
    left: 450%;
    background-image: url("../images/SVG/SVG-pelican.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-pelican   {
        width: 20vh;
        bottom: -150%;
        left: 3660%;
    }
}

.frise-svg-nuage-5 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -130%;
    left: 470%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-5   {
        width: 20vh;
        bottom: -110%;
        left: 3600%;
    }
}


.frise-svg-nuage-6 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -110%;
    left: 630%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-6  {
        width: 20vh;
        bottom: -115%;
        left: 700%;
    }
}

.frise-svg-nuage-7 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -150%;
    left: 430%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-6  {
        width: 20vh;
        bottom: -180%;
        left: 700%;
    }
}

.frise-svg-nuage-8 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 760%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-8  {
        bottom: -150%;
    }
}

.frise-svg-nuage-9 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -140%;
    left: 940%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}

.frise-svg-nuage-10 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -140%;
    left: 1150%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-10  {
        bottom: -150%;
        left: 3980%;
    }
}

.frise-svg-tremplin {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 230vh;
    width: 150vh;
    bottom: -125%;
    left: 2145%;
    background-image: url("../images/SVG/SVG-tremplin.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-tremplin  {
        height: 250vh;
        bottom: -180%;
        left: 4200%;
    }
}

.frise-svg-palmier-12 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1150%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-12 {
        width: 60vh;
        bottom: -130%;
        left: 1200%;
        z-index: 40;
    }
}
.frise-svg-palmier-13 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1230%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-13 {
        bottom: -120%;
        left: 1230%;
    }
}
.frise-svg-palmier-14 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 60vh;
    bottom: -110%;
    left: 1260%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-palmier-14 {
        bottom: -130%;
        left: 1350%;
        }
}

.frise-svg-palmier-15 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1300%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-15 {
        bottom: -120%;
        left: 3400%;
    }
}

.frise-svg-palmier-16 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1330%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-16 {
        bottom: -120%;
        left: 3500%;
    }
}

.frise-svg-palmier-17 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1500%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-17 {
        bottom: -120%;
        left: 3690%;
        z-index: 61;
    }
}

.frise-svg-palmier-18 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 60vh;
    bottom: -105%;
    left: 1560%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-palmier-18 {
        bottom: -130%;
        left: 1730%;
    }
}

.frise-svg-palmier-19 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1940%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-19 {
        bottom: -120%;
    }
}

.frise-svg-palmier-20 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 1760%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-palmier-20 {
        width: 80vh;
        bottom: -120%;
        left: 1770%;
    }
}

.frise-svg-batiment-gris {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -116%;
    left: 1400%;
    background-image: url("../images/SVG/SVG_batiment_gris.svg");
    z-index: 40;
}
@media (max-width: 600px) {
    .frise-svg-batiment-gris {
        left: 3100%;
        bottom: -136%;
    }
}

.frise-svg-batiment-jaune {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -131%;
    left: 1600%;
    background-image: url("../images/SVG/SVG_batiment_jaune.svg");
    z-index: 60;
}
@media (max-width: 600px) {
    .frise-svg-batiment-jaune {
        width: 60vh;
        /* left: 3100%; */
        bottom: -170%;
    }
}


.frise-svg-nuage-11 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 1050%;
    background-image: url("../images/SVG/nuage.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-11 {
        bottom: -135%;
        left: 1100%;
    }
}

.frise-svg-nuage-12 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 1450%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
.frise-svg-nuage-13 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -110%;
    left: 1630%;
    background-image: url("../images/SVG/nuage.svg");
    z-index: 41;
}

.frise-svg-nuage-14 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -120%;
    left: 1800%;
    background-image: url("../images/SVG/nuage.svg");
    z-index: 41;
}

.frise-svg-nuage-15 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 30vh;
    bottom: -140%;
    left: 2000%;
    background-image: url("../images/SVG/nuage_2.svg");
    z-index: 41;
}
@media (max-width: 600px) {
    .frise-svg-nuage-15 {
        left: 1900%;
    }
}


.frise-svg-ville {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 150vh;
    bottom: -120%;
    left: 950%;
    background-image: url("../images/SVG/ville_complet.svg");
    z-index: 41;
}
.frise-svg-ville2{
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 150vh;
    bottom: -120%;
    left: 1025%;
    background-image: url("../images/SVG/ville_complet.svg");
    z-index: 41;
}

.frise-svg-surf{
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 80vh;
    width: 50vh;
    bottom: -10%;
    left: 1880%;
    background-image: url("../images/SVG/surf.svg");
    z-index: 60;
}

.frise-svg-perroquet{
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 80vh;
    width: 80vh;
    bottom: 20%;
    left: 1700%;
    background-image: url("../images/SVG/perroquet.svg");
    z-index: 60;
}

.frise-svg-sac{
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 30vh;
    width: 30vh;
    bottom: 0%;
    left: 1940%;
    background-image: url("../images/SVG/sac.svg");
    z-index: 60;
}

.frise-svg-palmier-26 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 2090%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}

.frise-svg-palmier-27 {
    transform: translateY(250%) rotate(45deg);
    transition-duration: 1s;
    height: 200vh;
    width: 80vh;
    bottom: -100%;
    left: 2050%;
    background-image: url("../images/SVG/SVG_palmier\ haut.svg");
    z-index: 60;
}

.appear {
    transform: translateY(0%) rotate(0deg);
}