/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url('./fonts.css');

:root{
    --colorMain : #22466B;
    --colorSec : #337EBF;
    /* --bgColor : #FFFBF7; */
    --wrapperWidth : 1326px;
    --wrapperWidthLg : 1460px;
    --mobilePadding : 12px;
}

body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure{
    margin:0;
    padding:0;
    font-weight: normal;
}

body{
    position: relative;
    font-weight: 400;
    font-size: 16px;
    max-width: 2500px;
    margin:0 auto;
    background-color: var(--bgColor);
    font-family: "PFFuturaNeu" , 'Roboto', sans-serif;
}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul, ol{
    list-style: none;
}

ul.flex > li:last-of-type{
    margin-right: 0!important;
}
ul.flex.col > li:last-of-type{
    margin-bottom: 0!important;
}
ul.flex.border > li:last-of-type{
    border-right: 0!important;
}
ul.flex.col.border > li:last-of-type{
    border-bottom: 0!important;
}

input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    outline: none;
}

address{
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}


[style*="--aspect-ratio"] > :first-child {
    width: 100%;
}
[style*="--aspect-ratio"] > img {
    height: auto;
}
@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }
    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }
    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

/*  containers */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.flex.centered{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


/*  general */


/*  κλείδωμα του scroll στο background
    σε περίπτωση που έχουμε ένα στοιχείο
    που καλύπτει όλη την οθόνη */
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}
    
    
    
/*  κεντράρισμα εικόνας*/
.img-center{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
    
    
/*  κρύψιμο οριζόντιας μπάρας κύλισης*/
.scrollbar-hide{
    overflow-x: scroll;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.pntr{
    cursor: pointer;
}


/* wrappers */

.wrapper{
    max-width: var(--wrapperWidth);
    padding-inline: 3rem;
    margin-inline: auto;
}

.wrapper.pr-0{
    padding-right: 0;
}

@media screen and (max-width: 1200px) {  
    .wrapper{
        padding-inline: 2rem;
    } 
    .wrapper.tab-pr-0{
        padding-right: 0;
    }   
}
@media screen and (max-width: 620px) {  
    .wrapper{
        padding-inline: var(--mobilePadding);
    }    
}

/* bg image */

.bg-img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* column text */
.col-text{
    max-width: 674px;
    padding-inline: 2rem;
    margin-left: 9%;
    position: relative;
    z-index: 10;
}
.col-text.right{
    margin-left: 50%;
    /* order: 2; */
}

.col-text > p:first-of-type{
    font-size: 23px;
    font-family: "PFFuturaNeu";
}

.col-text > p{
    font-size: 19px;
    line-height: 30px;
    margin-bottom: 40px;
    font-family: "PFFuturaNeu-Book";
}

.col-text > p:last-of-type{
    margin-bottom: 0;
}

@media screen and (max-width: 1720px) {
    .col-text{
        margin-left: 3rem;
    }
}
@media screen and (max-width: 1420px) {
    .col-text{
        margin-left: 0;
        max-width: 50%;
        padding-inline: 3rem;
    }
}
@media screen and (max-width: 1220px) {
    .col-text{
        padding-inline: 2rem;
    }
}
@media screen and (max-width: 920px) {
    .col-text{
        padding-inline: 1rem;
    }
    .col-text > p{
        margin-bottom: 34px;
    }
}

/* scene set up */

.scene{
    position: relative;
}

.scene.abs{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* .scene > div{
    position: absolute;
} */

/* hero */
.hero{
    position: relative;
    min-height: 1080px;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    margin-bottom: 100px;
}

.hero--headers{
    position: absolute;
    margin-left: 13%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    height: calc(0.5 * (100dvw / 1.78));
}

.hero h1,
.hero h2{
    overflow: hidden;
}
.hero h1 span,
.hero h2 span{
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.hero h1{
    font-size: 110px;
    line-height: 100%;
    /* margin-left: 13%; */
    color: #5171F9;
    font-family: 'PFFuturaNeu-Bold';
}

.hero h1 span,
.hero h2 span{
    display: block;
}

.hero strong{
    font-weight: normal;
}

.hero h1  span:first-of-type {
    -webkit-transform: translateY(-300px);
        -ms-transform: translateY(-300px);
            transform: translateY(-300px);
}
.hero h1 span.block {
    -webkit-transform: translateY(300px);
        -ms-transform: translateY(300px);
            transform: translateY(300px);
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
}

.hero h2 span{
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition-delay: 1.4s;
         -o-transition-delay: 1.4s;
            transition-delay: 1.4s;
}

.hero h2.on span,
.hero h1.on span {
    -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0);
}

.hero h2{
    font-size: 35px;
    line-height: 100px;
    color: #fff;
}

.hero .scene{
    overflow: hidden;
    --plant: -120px;
}

.hero .scene > div{
    position: absolute;
}

.scene--hero-sky{
    top: 0;
    height: 480px;
    background-color: #D0E5FE;    
}
.scene--hero-sea{
    top: 480px;
    height: 200px;
    background-color: #6E9FFC;    
}


.scene--hero-bg{
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}

.scene--hero-people{
    top: 440px;
    top: calc(0.5 * (100dvw / 1.78) - 100px);
    
    right: 22%;
    z-index: 3;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}
.scene--hero-people.on{
    opacity: 1;
}
.scene--hero-plant{
    width: 350px;
    z-index: 3;
    bottom: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.scene--hero-plant.right{
    right: var(--plant);
    -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
            transform: translateX(200px);
}
.scene--hero-plant.left{
    left: var(--plant);
    -webkit-transform: translateX(-200px) scaleX(-1);
        -ms-transform: translateX(-200px) scaleX(-1);
            transform: translateX(-200px) scaleX(-1);
}

.scene--hero-plant.on{
    -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0);
}
.scene--hero-plant.left.on{
    -webkit-transform: translate(0) scaleX(-1);
        -ms-transform: translate(0) scaleX(-1);
            transform: translate(0) scaleX(-1);
}

@media screen and (max-width: 1650px) {
    .hero h1{font-size: 90px;}
}
@media screen and (max-width: 1400px) {
    .hero--headers{margin-top: 100px;}
}
@media screen and (max-width: 1280px) {
    .hero{min-height: 836px;}
    .hero h1{font-size: 75px;}
    .hero .scene{--plant:-50px;}
    .hero--headers{
        margin-left: 10%;
    }
    .scene--hero-plant{
        width: 250px;
    }
    .scene--hero-people{
        width: 500px;
        top: unset;
        bottom:0;
    }
}
@media screen and (max-width: 980px) {
    .hero h1{font-size: 62px;line-height: 70px;}
    .hero h2{font-size: 28px;line-height: 40px;}
    .hero--headers{
        height: calc(0.5 * (100dvw / 1.78) - 48px);
    }
}
@media screen and (max-width: 840px) {
    .hero--headers strong{
        display: block;
    }
    .hero--headers{
        height: calc(0.5 * (100dvw / 1.78) - 12px);
    }
}
@media screen and (max-width: 800px) {
    .hero h1{font-size: 50px;line-height: 60px;}
    .hero h2{font-size: 25px;line-height: 30px;}
    .hero--headers{
        height: calc(0.5 * (100dvw / 1.78) + 13px);
        margin-top: 60px;
    }
    .scene--hero-people{
        right: unset;
        left: 50%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
        max-width: 420px;
        padding-inline: 2rem;
        width: 100%;
    }
    .hero{
        min-height: 700px;
        margin-bottom: 4rem;
    }
    .scene--hero-plant{width: 150px;}
    .hero .scene{--plant:-32px;}

}

@media screen and (max-width: 640px) {
    .scene--hero-people{max-width: 320px;}
    .hero{min-height: 600px;}
}
@media screen and (max-width: 580px) {
    .hero h1{font-size: 40px;line-height: 45px;padding-bottom:8px;}
    .hero h2{font-size: 20px;line-height: 23px;}
    .hero--headers{
        margin-top: 0;
        height: calc(0.5 * (100dvw / 1.78) + 55px);
    }
}
@media screen and (max-width: 540px) {
    .scene--hero-people{max-width: 250px;}
    .scene--hero-plant{width: 100px;}
    .hero{min-height: 500px;}
   
}
@media screen and (max-width: 480px) {
    .hero--headers{margin-left: 26px;}
}
@media screen and (max-width: 440px) {
    .scene--hero-plant{width: 65px;}
    .hero .scene{--plant:-10px;}
    .hero{min-height: 450px;}
}
@media screen and (max-width: 385px) {
    .hero h1{font-size: 34px;line-height: 40px;padding-bottom:8px;}
    .hero h2{font-size: 18px;line-height: 20px;}
    .hero--headers{
        height: calc(0.5 * (100dvw / 1.78) + 48px);
    }
}

/* about */

.about-wrapper{
    background-color: #E9CD80;
    color : #345B9F;
    overflow: hidden;
}


.about-wrapper .scene{
    height: 500px;
}

.scene--about-sky{
    background-color: #fff;
    height:100%;
    position: relative;
}

.scene--about-sky .sun{
    position: absolute;
    left: 250px;
    top: 2rem;
    /* -webkit-transform: translate(-300px, 142px) rotate(-45deg);
        -ms-transform: translate(-300px, 142px) rotate(-45deg);
            transform: translate(-300px, 142px) rotate(-45deg);
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
    opacity: 0;
    -webkit-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
            transform-origin: bottom right; */
}

.scene--about-sky .sun.on{
    opacity: 1;
    -webkit-transform: translate(0) rotate(0);
        -ms-transform: translate(0) rotate(0);
            transform: translate(0) rotate(0);
}


.scene--about-sea{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: -52px;
    left: 0;
    background-image: url('../assets/icons/sea-01.svg');
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.scene--about-sea .plastic-bottle{
    position: absolute;
    right: 3rem;
    top: 1rem;
}

.scene--about-sea .plastic-bag{
    position: absolute;
    left: 27rem;
    top: 2rem;
}

@media screen and (max-width: 1220px) {
    .scene--about-sea .plastic-bag{
        left: 2rem;
    }
}


/* about top */

.about-wrapper .top{
    margin-top: -195px;
    position: relative;
    padding-bottom: 200px;
}

.about-wrapper .top .col-text{
    /* -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
            transform: translateY(-200px); */
}
.about-wrapper .bottom{
    padding-bottom: 100px;
    position: relative;
}

.about-wrapper .col-text{
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}
/* .about-wrapper .col-text.on{
    opacity: 1;
} */

/* about top / bottom scenes  */
.about-bottom-scene.scene,
.about-top-scene.scene{
    z-index:2;
    height: 100%;
}

.about-top-scene--left{
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    z-index: 2;
}

.about-top-scene .scene--sand{
    bottom: 2rem;
    position: absolute;
    -webkit-transform: scaleX(1.1);
        -ms-transform: scaleX(1.1);
            transform: scaleX(1.1);
}
.about-bottom-scene .scene--sand{
    top: 25%;
    position: absolute;
    -webkit-transform: scaleX(1.1);
        -ms-transform: scaleX(1.1);
            transform: scaleX(1.1);
}

.about-bottom-scene--right{
    position: absolute;
    width: 50%;
    /* height: 100%; */
    height: 500px;
    left: 50%;
    z-index: 2;
}

.about-top-scene .scene--stones{
    position: absolute;
    width: 100%;
    left: 0;
    top: 300px;
}
.about-bottom-scene .scene--stones{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100px;
}

.about-top-scene .person{
    /* -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; */
    opacity: 0;
    z-index: 3;
}

.about-top-scene .trash{
    position: absolute;
    z-index: 2;
}
.about-top-scene .trash.off{
    mix-blend-mode: exclusion;
}

.scene-ab-t-person-1{
    position: absolute;
    left: 22%;
    opacity: 0;
    -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
            transform: translateX(-200px);
}
.scene-ab-t-person-2{
    position: absolute;
    left: calc(100% - 300px);
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
            transform: translateX(200px);
}

.about-top-scene .scene-ab-t-person-2.on{
    /* opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0); */
}
.about-top-scene .scene-ab-t-person-1.on{
    /* opacity: 1; */
    /* -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    animation-name: personEnterLeft;
    animation-duration: 5s;
    animation-iteration-count: 1; */
}

@keyframes personEnterLeft {
   from {transform: translateX(-1000px)} 
   20% {transform: translateX(-500px)} 
   to {transform: translateX(0)} 
}

.about-bottom-scene .trash{
    position: absolute;
    z-index: 3;
    -webkit-animation: shake;
            animation: shake;
    -webkit-animation-duration: 5s;
            animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

@-webkit-keyframes shake{
    from {-webkit-transform: rotate(0);transform: rotate(0);}
    5% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
    10% {-webkit-transform: rotate(0);transform: rotate(0);}
    15% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
    20% {-webkit-transform: rotate(0);transform: rotate(0);}
    to {-webkit-transform: rotate(0);transform: rotate(0);}
}

@keyframes shake{
    from {-webkit-transform: rotate(0);transform: rotate(0);}
    5% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
    10% {-webkit-transform: rotate(0);transform: rotate(0);}
    15% {-webkit-transform: rotate(20deg);transform: rotate(20deg);}
    20% {-webkit-transform: rotate(0);transform: rotate(0);}
    to {-webkit-transform: rotate(0);transform: rotate(0);}
}

.about-top-scene .plastic-bottle-top{
    top: 300px;
    left: 60%;
}

.about-top-scene .plastic-bottle-top.off{
    left: calc(100% - 232px);
    bottom: 80px;
    top: unset;
}
.about-top-scene .plastic-bottle-bottom{
    bottom: 50px;
    left: 50%;
}
.about-top-scene .plastic-bottle-bottom.off{
    bottom: 270px;
    left: calc(22% + 128px);
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
}
.about-top-scene .plastic-bottle-left{
    bottom: 50px;
    left: 83px;
}
.about-top-scene .plastic-bottle-left.off{
    bottom: 307px;
    left: calc(22% + 128px);
    /* transform: rotate(-28deg) */
}
.about-top-scene .chips{
    bottom: 200px;
    left: 100px;
}
.about-top-scene .chips.off{
    bottom: 72px;
    left: calc(100% - 232px);
}
.about-top-scene .chips-right{
    bottom: 50px;
    right: 220px;
}
.about-top-scene .tin-can{
    bottom: 120px;
    right: 220px;
}
.about-top-scene .plastic-bottle-right{
    bottom: 20px;
    right: 350px;
}

.about-bottom-scene.scene{
    left: 0;
}

.scene-ab-b-person{
    position: absolute;
    /* -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s ease-in-out; */
    -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
            transform: translateX(200px);
    /* opacity: 1; */
    /* left: 0; */
}

.scene-ab-b-person.on{
    /* -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0); */
    /* opacity: 1;    */
    /* animation-name: personEnter;
    animation-iteration-count: 1; 
    animation-duration: 8s; */
}

/* @keyframes personEnter {
        from{ transform: translateX(1000px);}
        10%{ transform: translateX(400px);}
        to{ transform: translateX(0);}
} */
.scene-ab-b-bag{
    position: absolute;
    left: 500px;
    top: 246px;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.scene-ab-b-bag.on{
    opacity: 1;
}

.about-bottom-scene .trash{
    position: absolute;
    opacity: 1;
    -webkit-transition: opacity .8s;
    -o-transition: opacity .8s;
    transition: opacity .8s;
}
.about-bottom-scene .trash.off{
    opacity: 0;
}
.about-bottom-scene .plastic-bottle-top{
    top: 50px;
    right: 250px;
}
.about-bottom-scene .plastic-bag-top{
    top: 100px;
    right: 150px;
}
.about-bottom-scene .plastic-bag-bottom{
    bottom: 200px;
    right: 280px;
}
.about-bottom-scene .tin-can{
    bottom: 240px;
    right: 150px;
}
.about-bottom-scene .plastic-bottle-bottom{
    bottom: 200px;
    left: 50%;
}
.about-bottom-scene .plastic-spray{
    bottom: 220px;
    left: calc(200px + 50%);
}
.about-bottom-scene .plastic-bag-left{
    bottom: 100px;
    left: 2rem;
    -webkit-transform: scale(-1);
        -ms-transform: scale(-1);
            transform: scale(-1);
}
.about-bottom-scene > .plastic-bag-bottom{
    -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
            transform: scaleY(-1);
}

@media screen and (max-width: 1620px) {
    .about-top-scene .plastic-bottle-bottom{
        left: 30%;
    }
    .about-top-scene .plastic-bottle-top{
        top: 250px;
    }
    .about-top-scene .chips{
        left: 2rem;
    }
    .about-bottom-scene .plastic-spray{
        bottom: 50px;
    }
}
@media screen and (max-width: 1520px) {
    .about-bottom-scene .plastic-bottle-top{
        right: initial; left: 0;
    }
    .about-bottom-scene .plastic-bag-top{
        right: 2rem;
        top: 50px;
    }
    .scene-ab-b-bag{
        left: initial; right: 2rem;
    }
}
@media screen and (max-width: 1220px) {
    .about-wrapper .scene{
        position: relative;
    }
    .about-wrapper .col-text{
        width: 100%;
        max-width: 800px;
        margin-inline: auto;        
    }
    .about-wrapper .top{
        margin-bottom: 40px;
    }
    .about-wrapper .top .col-text{
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);
    }
    .about-top-scene.scene{
        height: 600px;
    }   
    .about-top-scene--left{
        width: 100%;
    }
    .scene-ab-t-person-2{
        left: unset;
        right: 100px;
    }
    .about-top-scene .plastic-bottle-left{
        bottom: 0;
    }
    .about-top-scene .tin-can{
        bottom: 0;
        right: 2rem;    
    }
    .about-top-scene .chips-right{
        right: 2rem;
    }
    .about-top-scene .plastic-bottle-right{
        display: none;
    }
    .about-top-scene .plastic-bottle-left.off{bottom: 220px;}
    .about-top-scene .plastic-bottle-top.off{left:unset;right:260px;}
    .about-top-scene .chips.off{left:unset;right:260px;}

    .about-wrapper .bottom{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }
    .about-wrapper .about-bottom-scene{
        position: relative;
        height: 500px;
    }
    .about-bottom-scene--right{
        width: 100%;
        left: 0;
    }
    .scene-ab-b-person{
        max-width: 550px;
        width: calc(100% - 4rem);
        padding-inline: 2rem;
        left: 50%;
        -webkit-transform: translateX(calc(-50% + 200px));
            -ms-transform: translateX(calc(-50% + 200px));
                transform: translateX(calc(-50% + 200px));
    }
    .scene-ab-b-person.on{
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .scene-ab-b-bag{
        left: calc(50% + 200px);
        margin-right: 0;
    }

    .about-bottom-scene .plastic-bottle-top{
        left: 3rem;
    }
    .about-bottom-scene .plastic-bottle-bottom{
        left: 5rem;
    }
    .about-bottom-scene .plastic-bag-bottom{right: initial; left: 20%;}
}

@media screen and (max-width: 1100px) {
    .about-top-scene .plastic-bottle-top{left: 50%;}
}
@media screen and (max-width: 920px) {
    .scene-ab-t-person-1{left: 100px;}
    .about-top-scene .plastic-bottle-left.off{left: 228px;}
    .about-top-scene .plastic-bottle-bottom.off{left:228px;}
    .about-bottom-scene .tin-can{right: 3rem;}
}
@media screen and (max-width: 820px) {
    .scene-ab-t-person-2{right: 50px;}
    .about-top-scene .plastic-bottle-top.off{right:210px;}
    .about-top-scene .chips.off{right:210px;}

    .about-bottom-scene .plastic-spray{bottom: 0;}
    .about-bottom-scene .plastic-bag-bottom{bottom:300px; left: 15%;}

    .scene-ab-b-bag{left:initial;right:2rem;}

    .about-bottom-scene--right .trash{
        -webkit-animation: none;
                animation: none;
        -webkit-transform: scale(0.8);
            -ms-transform: scale(0.8);
                transform: scale(0.8);
    }
    .about-bottom-scene .plastic-bag-left{
        -webkit-animation:none;
                animation:none;
        -webkit-transform: scale(-0.8);
            -ms-transform: scale(-0.8);
                transform: scale(-0.8);
    }
}
@media screen and (max-width: 680px) {
    .scene-ab-t-person-1{
        left: 2rem;
    }
    .scene-ab-t-person-2{
        right: 2rem;
    }
    .scene--about-sea .plastic-bottle,
    .scene--about-sea .plastic-bag{
        -webkit-animation: none;
                animation: none;
    }
    .scene--about-sea .plastic-bottle{
        width: 100px;    
    }
    .scene--about-sea .plastic-bag{
        width: 80px;
        right: 15rem;
        top: 4rem;
    }
    .about-top-scene .chips{
        left: 40%;
    }
    .about-top-scene .chips-right{
        bottom: -150px;
    }

    .about-top-scene .plastic-bottle-bottom.off{left: 170px;}
    .about-top-scene .plastic-bottle-left.off{left: 170px;}
    .about-top-scene .plastic-bottle-top.off{right:190px;}
    .about-top-scene .chips.off{right:190px;}

    .about-bottom-scene .plastic-bag-bottom{left:4rem;}
}
@media screen and (max-width: 650px) {
    .scene-ab-b-person{
        left:initial;
        -webkit-transform: translateX(200px);
            -ms-transform: translateX(200px);
                transform: translateX(200px);
    }  
    .scene-ab-b-person.on {
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
    }  
    .scene-ab-b-bag{
        width: 25%;
        right: 2rem;
    }
}
@media screen and (max-width: 620px) {
    .about-wrapper > .scene{ height: 320px;}
    .scene--about-sky .sun{
        left: 33px;
        width: 79px;
    }
    .scene-ab-t-person-1{
        width: 200px;
    }
    .scene-ab-t-person-2{
        width: 250px;
    }   
    
    .about-top-scene .trash{
        -webkit-transform: scale(0.6);
            -ms-transform: scale(0.6);
                transform: scale(0.6);
    }

    .about-top-scene .plastic-bottle-bottom.off{
        -webkit-transform: scale(-0.6);
            -ms-transform: scale(-0.6);
                transform: scale(-0.6);
    }
    .about-top-scene .plastic-bottle-top.off{right:163px;}
    .about-top-scene .chips.off{right:163px;}
    .about-top-scene .plastic-bottle-bottom.off{left: 114px;}
    .about-top-scene .plastic-bottle-left.off{left: 114px;bottom:246px;}
    .about-bottom-scene .tin-can{bottom:320px;}
}
@media screen and (max-width: 580px) {
    .about-top-scene .chips{
        left: 2rem;
        bottom: 120px;
    }
    .about-bottom-scene .plastic-bag-bottom{bottom:20px;left: 1rem;}
    .about-bottom-scene .plastic-bag-left{left:initial; right:2rem; bottom: 30px;}

}
@media screen and (max-width: 520px) {
    .about-top-scene.scene{height: 500px;}
    .scene-ab-t-person-1{
        width: 150px;
        left: 1rem;
        top: 4rem;
    }
    .scene-ab-t-person-2{
        width: 200px;
        right: 1rem;
    }  

    .scene--about-sea .plastic-bag{width: 50px;right:10rem;}
    .scene--about-sea .plastic-bottle{width: 80px;}
    
    .about-top-scene .plastic-bottle-top.off{right:110px;bottom:48px;}
    .about-top-scene .chips.off{right:116px;}
    .about-top-scene .plastic-bottle-bottom.off{left: 65px;bottom:161px;}
    .about-top-scene .plastic-bottle-left.off{left: 77px;bottom:177px;}
}
@media screen and (max-width: 480px) {
    .about-bottom-scene .plastic-bag-top{right:50%;top:initial;bottom:110px;}
    .about-bottom-scene .plastic-bottle-bottom{left:2rem;bottom:225px;}
    .about-bottom-scene .plastic-spray{bottom: -50px;}
    .scene-ab-b-bag{top: 200px;}
    .about-bottom-scene .tin-can{bottom: initial; top: 100px;}
    .about-bottom-scene .plastic-bottle-bottom{bottom:initial; top: 100px;}
    .about-bottom-scene--right .trash{-webkit-transform: scale(0.6);-ms-transform: scale(0.6);transform: scale(0.6);}
    .about-bottom-scene .plastic-bag-left{-webkit-transform: scale(-0.6);-ms-transform: scale(-0.6);transform: scale(-0.6);}

    .about-wrapper .about-bottom-scene{height: 400px;}
}
@media screen and (max-width: 380px) {
    .about-top-scene.scene{height: 400px;}
    .scene-ab-t-person-1{
        width: 120px;
        left: 1rem;
        top: 4rem;
    }
    .scene-ab-t-person-2{
        width: 160px;
        right: 1rem;
    }  
    .about-top-scene .trash{
        -webkit-transform: scale(0.4);
            -ms-transform: scale(0.4);
                transform: scale(0.4);
    }

    .about-top-scene .plastic-bottle-bottom.off{
        -webkit-transform: scale(-0.4);
            -ms-transform: scale(-0.4);
                transform: scale(-0.4);
    }    

    .about-top-scene .chips.off{bottom: 20px;right: 96px;}
    .about-top-scene .plastic-bottle-top.off{right: 87px;}
    .about-top-scene .plastic-bottle-bottom.off{left:44px;bottom:105px;}
    .about-top-scene .plastic-bottle-left.off{left:50px;bottom:132px;}
}

/* map section */
.map-section{
    padding-top: 125px;
}
.map-grid{
    max-width: 1594px;
    padding-inline: 2rem;
    margin-inline: auto;
    display: -ms-grid;
    display: grid;
    /* -ms-grid-columns: 60% 1fr; */
    grid-template-columns: 60% 1fr;
    /* -ms-grid-rows: (auto)[3]; */
    grid-template-rows: repeat(3, auto);
        grid-template-areas: 
    "map map-header"
    "map map-spots"
    "map map-footer";
}

.map{
    -ms-grid-row : 1;
    -ms-grid-row-span : 3;
    -ms-grid-column : 1;
    grid-area : map;
    -ms-grid-row-align: center;
        align-self: center;
    margin-right: 150px;
    position: relative;
}

.map::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    max-height: 2000px;
    background-color: #fff;
    -webkit-transition: max-height .3s;
    -o-transition: max-height .3s;
    transition: max-height .3s;
    z-index: 3;
}

.map--dot{
    width: 20px;
    aspect-ratio: 1;
    background-color: #ABE17A;
    border: 1px solid #5171F9;
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    cursor: pointer;
}
.show .map--dot{
    opacity: 1;
}
.map--dot.completed{
    width: 38px;
}
.map--dot > a{
    display: block;
    width: 100%;
    height: 100%;
}

.map--dot[data-index="0"]{top: 94%; right: 27%;}
.map--dot[data-index="1"]{top: 56%; left: 5%;}
.map--dot[data-index="2"]{top: 77%; right: 35%;}
.map--dot[data-index="3"]{top: 47%; right: 28%;}
.map--dot[data-index="4"]{top: 58%; left: 40%;}/* 45 */
.map--dot[data-index="6"]{top: 48%; left: 29%;}
.map--dot[data-index="5"]{top: 9%; left: 33%;}

.map.on::after{
    max-height: 0;
}

.map--spots{
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: map-spots; 
    position: relative;
}
.map--header{
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: map-header; 
    max-width: 568px;
    color: #005BA2;
    opacity: 0;
    -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
            transform: translateY(-200px);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
/* .map--header.on{
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
} */
.map--header h2{
    font-size: 55px;
    line-height: 70px;
    margin-bottom: 23px;
    font-family: 'PFFuturaNeu-Bold';
}
.map--header .date{
    color: #00954F;
    display: block;    
    font-size: 35px;
    line-height: 100%;
    margin-bottom: 20px;
    font-family: 'PFFuturaNeu-Bold';
}
.map--header p{
    font-size: 19px;
    line-height: 25px;    
}
.map--footer{
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: map-footer; 
    font-size: 16px;
    line-height: 20px;
    color: #005BA2;
    max-width: 450px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-family: 'PFFuturaNeu-Book';
}
.map--footer.on{
    opacity: 1;
}
.map--spots{
    margin-block: 78px 44px;
}
.map--spots::before{
    content: "";
    position: absolute;
    left: 13px;
    height: 0;
    border:2px dashed #6E9EFB;
    z-index: -1;
    -webkit-transition: height .3s;
    -o-transition: height .3s;
    transition: height .3s;
}

.map--spots.on::before{
    height: 100%;
}

.map--spots-item{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 2rem;
    cursor: pointer;
}
.map--spots-item:last-of-type{
    margin-bottom: 0;
}
.spot--dot-col{
    width: 30px;
    margin-right: 40px;
}
.spot--dot{
    width: 20px;
    aspect-ratio: 1;
    border:1px solid #5171F9;
    background-color: #ABE17A;
    border-radius: 50%;
    -webkit-transform: scale(0.25);
        -ms-transform: scale(0.25);
            transform: scale(0.25);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.map--spots-item.on .spot--dot{
    opacity: 1;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}


/* .spot--dot:hover{
    width: 30px;
} */

.completed .spot--dot{
    width: 30px;
    background-color: #00A07B;
}
.latest .spot--dot{
    -webkit-animation: latest-alert;
            animation: latest-alert;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

@-webkit-keyframes latest-alert {
    from{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
    10%{-webkit-transform:scale(1.2);transform:scale(1.2); background-color: #ABE17A;}
    20%{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
    30%{-webkit-transform:scale(1.2);transform:scale(1.2); background-color: #ABE17A;}
    to{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
}

@keyframes latest-alert {
    from{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
    10%{-webkit-transform:scale(1.2);transform:scale(1.2); background-color: #ABE17A;}
    20%{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
    30%{-webkit-transform:scale(1.2);transform:scale(1.2); background-color: #ABE17A;}
    to{-webkit-transform:scale(0.8);transform:scale(0.8); background-color: #00A07B;}
}

.spot--info{
    overflow: hidden;
}

.spot--info .date{
    color: #00A07B;
    font-size: 20px;
    line-height: 30px;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    font-family: 'PFFuturaNeu-Book';
}
.map--spots-item.show .spot--info .date{
    opacity: 1;
}

.spot--info .place{
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    color: #005BA2;
    font-size: 25px;
    line-height: 30px;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
}

.map--spots-item.show .spot--info .place{
    opacity: 1;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

@media screen and (max-width: 1420px) {
    .map-grid{
            grid-template-areas:
        "map-header map-header"
        "map map-spots"
        "map map-footer";       
    }
    .map--header{
        /* margin-inline: auto; */
        max-width: unset;
    }
    .map{
        -ms-grid-row : 2;
        -ms-grid-row-span : 2;
        -ms-grid-column : 1;       
    }
    .map--spots{
        -ms-grid-row: 2;
        -ms-grid-column: 2;       
    }
    .map--header{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;       
    }
    .map--footer{
        -ms-grid-row: 3;
        -ms-grid-column: 2;       
    }
}

@media screen and (max-width: 1280px) {
    .map-section{
        padding-top: 100px;
    }
}
@media screen and (max-width: 1180px) {
    .map-grid{
            grid-template-areas:
        "map-header map-header"
        "map map"
        "map-spots map-spots"
        "map-footer map-footer";       
    }
    .map{
        margin-right: 0;
        max-width: 800px;
        margin-inline: auto;
        margin-top: 55px;
    }
    .map--spots{
        margin-block: 40px;
        max-width: 800px;
        margin-inline: auto;
    }
    .map--footer{
        margin-inline: auto;
        max-width: 800px;
    }
    .map{
        -ms-grid-row : 2;
        -ms-grid-row-span : 1;
        -ms-grid-column : 1;
        -ms-grid-column-span : 2;       
    }
    .map--spots{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;       
    }
    .map--header{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;       
    }
    .map--footer{
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;       
    }
}

@media screen and (max-width: 980px) {
    .map-section{
        padding-top: 60px;
    }
    .map--header .date{
        font-size: 26px;
        line-height: 48px;
        margin-bottom: 12px;
    }
    .map--header h2{
        font-size: 45px;
        line-height: 50px;
        margin-bottom: 12px;
    }
    .map-grid{
        padding-inline: 1.5rem;
    }
}
@media screen and (max-width: 720px) {
    .map--dot{
        opacity: 1;
    }
    .map--header{
       opacity: 1; 
       transform: translateY(0);
    }
    .map::after{
        max-height: 0;
    }
}
@media screen and (max-width: 620px) {
    .spot--info .date{
        font-size: 16px;
        line-height: 24px;
    }
    .spot--info .place{
        font-size: 20px;
        line-height: 25px;
    }
    .spot--dot-col{
        margin-right: 25px;
        width: 26px;
    }
    .spot--dot{
        width: 16px;
    }
    .completed .spot--dot{
        width: 26px;
    }
    .map--spots::before{left: 11px;}
    .map--dot.completed,
    .map--dot{width: 18px;}
}
@media screen and (max-width: 520px) {
    .map--header .date{
        font-size: 20px;
    }
    .map--header h2{
        font-size: 35px;
        line-height: 40px;
    }
    .map--header p{
        font-size: 18px;
        line-height: 25px;
    }
    .map-grid{
        padding-inline: 14px;
    }
}
@media screen and (max-width: 370px) {
    .spot--dot-col{
        margin-right: 18px;
    }
    .map--header h2{
        font-size: 30px;
        line-height: 35px;
    }
}

/* time line */

.timeline-wrapper{
    max-width: 1594px;
    padding-inline: 2rem;
    margin-inline: auto;
    margin-top: 28px;
    padding-block: 70px;
}

.timeline-grid{
    display: -ms-grid;
    display: grid;
    /* -ms-grid-columns: (1fr)[3]; */
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #B2B2B2;
    position: relative;
}
.timeline--year{
    position: relative;
    margin-top: 128px;
}


.timeline--year:nth-of-type(1){--color:#6E9EFB;}
.timeline--year:nth-of-type(2){--color:#5171F9;}
.timeline--year:nth-of-type(3){--color:#B2B2B2;}

.year-header{
    width: 100%;
    position: absolute;
    text-align: center;
    color: #E3E3E3;
    font-size: 100px;
    line-height: 91px;
    z-index: -1;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    /* top:10px; */
    top:6px;
    /* transform: translateY(-65%); */
    overflow: hidden;
    font-family: 'PFFuturaNeu-Bold';
    transform-origin: center;
}

/* .year-header::after{
    content:"";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 10px solid #fff;
} */

.year-header span{
    display: block;
    -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    /* opacity: 0; */
}
.year-header.on span{
    /* opacity: 1; */
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}


.year-dots{
    display: -ms-grid;
    display: grid;
    /* -ms-grid-columns: (1fr)[var(--places)]; */
    grid-template-columns: repeat(var(--places), 1fr);   
    -webkit-box-pack: center;   
        -ms-flex-pack: center;   
            justify-content: center; 
}
.year-dot{
    position: relative;
    width: 100%;
}

.year-place{
    position: absolute;
    -webkit-transform: translate(-50%, 50px);
        -ms-transform: translate(-50%, 50px);
            transform: translate(-50%, 50px);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    left: 50%;
    color: var(--color);
    font-size: 16px;
    line-height: 20px;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    transform-origin: center;
}

.year-dot:nth-child(even) .year-place{
    -webkit-transform: translate(-50%, -150%);
        -ms-transform: translate(-50%, -150%);
            transform: translate(-50%, -150%);
    top: -10px;
}

.year-dot.show .year-place{
    -webkit-transform: translate(-50%, 10px);
        -ms-transform: translate(-50%, 10px);
            transform: translate(-50%, 10px);
    opacity: 1;
}

.year-dot.show:nth-child(even) .year-place{
    -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
}

.year-dot::before{
    content: "";
    width: 14px;
    aspect-ratio: 1;
    /* background-color: #6E9EFB; */
    background-color: var(--color);
    position: absolute;
    /* left: 0; */
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.25);
        -ms-transform: translate(-50%, -50%) scale(0.25);
            transform: translate(-50%, -50%) scale(0.25);
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
}

.year-dot.on::before{
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
}


.timeline--year:nth-of-type(1) .year-dot:first-of-type::after{
    background-color: #fff;
    content: "";
    position: absolute;
    left: 0%;
    top:-2px;
    height: 4px;
    width: 50%;
}

.timeline--year:nth-of-type(3) .year-dot:last-of-type::after{
    background-color: #fff;
    content: "";
    position: absolute;
    left: 50%;
    top:-2px;
    height: 4px;
    width: 50%;
}

.year-icon{
    position: absolute;
    left: 50%;
    opacity: 0;
    transform-origin: center;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.year-dot:nth-child(odd) .year-icon{
    -webkit-transform: translate(-50%, -200%);
        -ms-transform: translate(-50%, -200%);
            transform: translate(-50%, -200%);
}
.year-dot:nth-child(even) .year-icon{
    -webkit-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
}

.year-icon{
    position: absolute;
    left: 50%;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.year-dot.show:nth-child(odd) .year-icon{
    -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    top: -10px;
}
.year-dot.show:nth-child(even) .year-icon{
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    top: 10px;
}
.year-dot.show .year-icon{
    opacity: 1;
}



.timeline-grid::before{
    content: "";
    width: 100%;
    border-top: 4px solid #fff;
    position: absolute;
    right:0;
    bottom: -2px;
    -webkit-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
}

.timeline-grid.on::before{
    width: 0;
}


@media screen and (max-width: 1580px) {
    .timeline-wrapper{
        padding-right: 0;
        max-width: unset;
        /* overflow: hidden; */
        padding-block: 70px;
        padding-block: 0;
        margin-top: 2rem;
        margin-top: 80px;
        height: 180px;
        overflow-y: hidden;
    }
    .timeline-grid{
        width: 1800px;
        margin-right: 2rem;
    }
}

@media screen and (max-width: 720px) {
    .year-header{
        line-height: 100%;
        -webkit-transform: translateY(-83%);
        -ms-transform: translateY(-83%);
        transform: translateY(-83%);
        padding-top: 5px;
    }
    .year-header span {
        /* opacity: 1; */
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    .year-dot::before {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
    .year-dot .year-place {
        -webkit-transform: translate(-50%, 10px);
        -ms-transform: translate(-50%, 10px);
        transform: translate(-50%, 10px);
        opacity: 1;
    }
    .year-dot:nth-child(even) .year-place {
        -webkit-transform: translate(-50%, -100%);
        -ms-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
    }
    .year-dot .year-icon {
        opacity: 1;
    }
    .year-dot:nth-child(odd) .year-icon{
        -webkit-transform: translate(-50%, -100%);
            -ms-transform: translate(-50%, -100%);
                transform: translate(-50%, -100%);
        top: -10px;
    }
    .year-dot:nth-child(even) .year-icon{
        -webkit-transform: translate(-50%, 0) rotate(-180deg);
            -ms-transform: translate(-50%, 0) rotate(-180deg);
                transform: translate(-50%, 0) rotate(-180deg);
        top: 10px;
    }
}

/* actions numbers */
.actions-wrapper{
    overflow: hidden;
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(205,236,236,1)));
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(205,236,236,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(205,236,236,1) 100%);
}
.actions--info{
    position: relative;
    z-index: 2;
    color: #005BA2;
    padding-block: 50px 170px;
    margin-top: -200px;
}

.actions-wrapper .action-anim{
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.actions--info .col-text{
    -webkit-transform: translate(-200px, 400px);
        -ms-transform: translate(-200px, 400px);
            transform: translate(-200px, 400px);
}
.actions--info .col-text.action-anim.on{
    opacity: 1;
    -webkit-transform: translate(0, 400px);
        -ms-transform: translate(0, 400px);
            transform: translate(0, 400px);
}
.actions--info .col-text p:first-of-type{
    color: #345B9F;
}

.actions--seperator{
    height: 300px;
    background-color: #E9CD80;
    position: relative;
    background-image: url('../assets/icons/stones.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}

.actions--seperator .man-icon{
    position: absolute;
    left: 60%;
    bottom: 50px;
    z-index:2;
    -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
            transform: translateX(200px);
}



.actions--seperator .man-icon.action-anim.on{
    opacity: 1;
    /* -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0); */
    /* animation-name: personEnter;
    animation-iteration-count: 1;
    animation-duration: 5s; */
}

.actions--seperator .sky-mob{
    background: rgb(255,255,255);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(205,236,236,1)));
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(205,236,236,1) 100%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(205,236,236,1) 100%);
    display: none;
}

.actions--seperator .sea-bg{
    position: absolute;
    width: 100%;
    bottom: 220px;
    background-image: url('../assets/icons/sea-02.svg');   
    height: 190px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    
    /* background-position-x: 10490px; */
}

.sea-anim{
    background-repeat: repeat-x;
    /* background-size:  100%; */
    -webkit-transform: scaleX(1.2) translateX(0);
        -ms-transform: scaleX(1.2) translateX(0);
            transform: scaleX(1.2) translateX(0);
    -webkit-animation: wave;
            animation: wave;
    -webkit-animation-duration: 8s;
            animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

}

@-webkit-keyframes wave{
    form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        25% {-webkit-transform: scaleX(1.2) translateX(-100px);transform: scaleX(1.2) translateX(-100px);}
        75% {-webkit-transform: scaleX(1.2) translateX(100px);transform: scaleX(1.2) translateX(100px);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
}

@keyframes wave{
    form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        25% {-webkit-transform: scaleX(1.2) translateX(-100px);transform: scaleX(1.2) translateX(-100px);}
        75% {-webkit-transform: scaleX(1.2) translateX(100px);transform: scaleX(1.2) translateX(100px);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
}

@media screen and (max-width: 1220px) {
    .sea-anim{
        -webkit-transform: scaleX(1.2) translateX(0);
            -ms-transform: scaleX(1.2) translateX(0);
                transform: scaleX(1.2) translateX(0);
    }
    @-webkit-keyframes wave{
        form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        25% {-webkit-transform: scaleX(1.2) translateX(-50px);transform: scaleX(1.2) translateX(-50px);}
        75% {-webkit-transform: scaleX(1.2) translateX(50px);transform: scaleX(1.2) translateX(50px);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
    }
    @keyframes wave{
        form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        25% {-webkit-transform: scaleX(1.2) translateX(-50px);transform: scaleX(1.2) translateX(-50px);}
        75% {-webkit-transform: scaleX(1.2) translateX(50px);transform: scaleX(1.2) translateX(50px);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
    }
}

@media screen and (max-width: 820px) {
    .sea-anim{
        background-size: cover;
        -webkit-transform: scaleX(1.2) translateX(0);
            -ms-transform: scaleX(1.2) translateX(0);
                transform: scaleX(1.2) translateX(0);
        
    }
    @-webkit-keyframes wave{
        form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        50% {-webkit-transform: scaleX(1.2) translateX(6vw);transform: scaleX(1.2) translateX(6vw);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
    }
    @keyframes wave{
        form {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
        50% {-webkit-transform: scaleX(1.2) translateX(6vw);transform: scaleX(1.2) translateX(6vw);}
        to {-webkit-transform: scaleX(1.2) translateX(0);transform: scaleX(1.2) translateX(0);}
    }
}

@media screen and (max-width: 1580px) {
    .actions--seperator .man-icon{left: 50%;}
}
@media screen and (max-width: 1240px) {
    .actions--info .col-text{
        -webkit-transform: translate(-200px, 500px);
            -ms-transform: translate(-200px, 500px);
                transform: translate(-200px, 500px);
    }
    .actions--info .col-text.action-anim.on{
        opacity: 1;
        -webkit-transform: translate(0, 500px);
            -ms-transform: translate(0, 500px);
                transform: translate(0, 500px);
    }
}
@media screen and (max-width: 1120px) {
    .actions--seperator .man-icon{
        max-width: 500px;
        margin-inline: auto;
        padding-inline:2rem;
        width: 100%;
    }
}
@media screen and (max-width: 980px) {
    .actions-wrapper{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .actions--info{
        margin-top: 0;
        padding-block: 2rem;
        background-color: #E9CD80;
    }
    .actions--info .col-text{
        max-width: unset;
    } 
    .actions--seperator{
        height: 650px;
        bottom: 0;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
    }
    .actions--info .col-text{
        -webkit-transform: translate(-200px, 0);
            -ms-transform: translate(-200px, 0);
                transform: translate(-200px, 0);
    }
    .actions--info .col-text.action-anim.on{
        opacity: 1;
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
                transform: translate(0, 0);
    } 
    .actions--seperator .sky-mob{
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        height: 300px;
    }
    .actions--seperator .man-icon{
        -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
                transform: translateX(50%);
    }
    
    .actions--seperator .man-icon.action-anim.on{
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
}

@media screen and (max-width: 680px) {
    .actions--seperator{
        /* height: 500px; */
    }
    /* .actions--seperator .sea-bg{bottom:115px;} */
    .actions--info{padding-top: 0;}
}

.actions--numbers{
    background-color: #E9CD80;
    padding-block: 144px 260px;
    background-image: url('../assets/icons/stones.svg');
    background-size: 100%;
    background-repeat: repeat-y;
}

.actions--numbers > div{
    max-width: 1164px;
    margin-inline: auto;
    padding-inline: 2rem;

}
.actions--numbers-bottom > div{
    -webkit-box-shadow: 0px 5px 10px #00000029;
            box-shadow: 0px 5px 10px #00000029;  
    color: #fff;
    overflow: hidden;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 0px;
            flex: 0 0 0;
    max-height: 193px;
    position: relative;
}

.actions--numbers--sea.mobile{display: none;}
.actions--numbers--sea{
    background: #005BA2;
}
.actions--numbers--sea.on{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 64%;
            flex: 0 0 64%;
}
.actions--numbers--beach{
    background: #DFB659;
}
.actions--numbers--beach.on{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 36%;
            flex: 0 0 36%;
}

.actions--numbers--details{
    padding: 6.5rem 2rem 2rem;
    opacity: 1;
    /* display: none; */
}
.actions--numbers--details .number-counter{
    font-size: 45px;
    line-height: 29px;
}
.actions--numbers--details h4{
    font-size: 18px;
    line-height: 28px;
    -webkit-transform: translateY(200%);
        -ms-transform: translateY(200%);
            transform: translateY(200%);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    font-family: 'PFFuturaNeu-Book';
    margin-top: 10px;
}
.show .actions--numbers--details h4{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.actions--numbers--beach > div{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
}



.actions--numbers--beach h4,
.actions--numbers--beach .number-counter{
    text-align: right;
}

.actions--numbers--scene{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}

.actions--numbers--scene > div{
    position: absolute;
}

/* sea scene */
.actions--numbers--sea .scene-fish-sm{
    top: 1rem;
    left: 1rem;
}
.actions--numbers--sea.show .scene-fish-sm{
    left: 2rem;
}
.actions--numbers--sea .scene-fish-bg{
    top: 1.5rem;
    left: 9rem;
}
.actions--numbers--sea.show .scene-fish-bg{
    left: 7rem;
}
.actions--numbers--sea .scene-medusa{
    bottom: 0rem;
    right: 1rem;
}
.actions--numbers--sea.show .scene-medusa{
    bottom: 2rem;
}
.actions--numbers--sea .scene-turtle{
    top: 3rem;
    right: 90px;
}
.actions--numbers--sea.show .scene-turtle{
    top: 1rem;
    right: 70px;
}

.sealife{
    opacity: 0;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
}

.show .sealife{
    opacity: 1;
}

/* beach scene */
.actions--numbers--beach .scene-crab{
    top: 3rem;
    left: 8rem;
}
.actions--numbers--beach.show .scene-crab{
    top: 0rem;
}
.actions--numbers--beach .scene-crab-sm{
    top: 6.5rem;
    right: 21%;
}
.actions--numbers--beach.show .scene-crab-sm{
    top: 1.5rem;
}
.actions--numbers--beach .scene-crab-md{
    top: 110%;
    right: 0;
}
.actions--numbers--beach.show .scene-crab-md{
    top: 2rem;
    right: 1rem;
}
.actions--numbers--beach .scene-turtle{
    top: 2rem;
    left: 70px;
}
.actions--numbers--beach.show .scene-turtle{
    top: 0.5rem;
    left: -20px;
}

.actions--numbers-top{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 38px;
    position: relative;
}
.actions--numbers-bubbles{
    /* flex-grow: 1; */
    margin-left: auto;
    width: 470px;
}
.actions--numbers--total{
    color: #005BA2;  
    /* margin-right: 180px;  */
    overflow: hidden; 
}

.actions--numbers--graphic{
    margin-left: 28px;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}
.actions--numbers--graphic.on{
    opacity: 1;
}
.actions--numbers--total h3{
    font-size: 20px;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.actions--numbers--total.on h3{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}
.actions--numbers--total .number{
    font-size: 88px;
    line-height: 81px;
    font-family: 'PFFuturaNeu-Bold';
}
.actions--numbers--total .number-kg{
    font-size: 54px;
    line-height: 81px;
    font-family: 'PFFuturaNeu-Bold';
}

.bubble-number{
    /* width: 148px;
    aspect-ratio: 1;
    justify-content: center; */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /* border-radius: 50%; */
    -webkit-box-shadow: 0px 5px 10px #00000029;
            box-shadow: 0px 5px 10px #00000029;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    opacity: 0;
    -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
            transform: translateY(200px);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    /* padding: 12px 27px 6px; */
    padding: 14px 27px 12px;
    position: relative;
}

.bubble-number.on{
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

.bubble-number span{
    display: block;
    font-size: 27px;
    line-height: 23px;
    margin-right: 17px;
    font-family: 'PFFuturaNeu-Bold';
    z-index: 2;
}

.bubble-number p{
    opacity: 0;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}
.bubble-number.show p{
    opacity: 1;
}

.bubble-number:nth-of-type(1){background-color: #CDECEC; color: #005BA2;}
.bubble-number:nth-of-type(2){background-color: #6E9EFB;}
.bubble-number:nth-of-type(3){background-color: #5171F9;}
.bubble-number:nth-of-type(4){background-color: #3F51B5;}

.bubble-number .icon{
    position: absolute;
    width: 1rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    /* mix-blend-mode: luminosity; */
}

.bubble-number .icon.ic-1{right: 1rem;}
.bubble-number .icon.ic-2{right: 2rem;}

.bubble-number.show .icon{opacity :1;}

@media screen and (max-width: 1100px) {
    .actions--numbers--sea.on{-webkit-box-flex: 0;-ms-flex: 0 0 60%;flex: 0 0 60%;}
    .actions--numbers--beach.on{-webkit-box-flex: 0;-ms-flex: 0 0 40%;flex: 0 0 40%;}
    .actions--numbers--graphic{
        left: 250px;
        top: -58px;
        position: absolute;
    }    
    .actions--numbers-bubbles{
        width: 500px;
    }
}

@media screen and (max-width: 980px) {
    .actions--numbers{
        padding-block: 80px;
        min-height: 870px;
    }
    .actions--numbers--sea.desk{display: none;}
    .actions--numbers--sea.mobile{display: block;}

    .actions--numbers-bottom{-ms-flex-wrap: wrap;flex-wrap: wrap;}
    .actions--numbers--sea.on{-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;}
    .actions--numbers--beach.on{
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        margin-bottom: 22px;
    }
    .actions--numbers-top{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .actions--numbers-bubbles{
        width : 100%;
        margin-top: 28px;
    }

    .actions--numbers--graphic{
        left:unset;
        right: 2rem;
        margin-left: 0;
        top: 0;
    }
}

@media screen and (max-width: 820px) {
    .actions--numbers--details{padding: 5.5rem 20px 20px;} 
    .actions--numbers--details h4{margin-top: 10px;}   
}
@media screen and (max-width: 730px) {
    .actions--numbers--beach.show .scene-crab-sm{top:1rem;right:1rem;left:unset;}
    .actions--numbers--beach.show .scene-crab-md{inset: 0.5rem 9rem auto auto;}
}
@media screen and (max-width: 680px) {
    .actions--numbers > div{padding-inline: 1.25rem;}
}
@media screen and (max-width: 580px) {
    .actions--numbers{
        padding-block: 48px;
        min-height: 708px;
    }
    .actions--numbers--graphic{
        right: 1.5rem;
        /* top: 20px; */
    }
}
@media screen and (max-width: 520px) {
    .actions--numbers--details .number-counter{
        font-size: 40px;
    }
    .actions--numbers--details h4{
        font-size: 15px;
        line-height: 24px;
    }
    .actions--numbers--beach.show .scene-crab-md{inset: 0.5rem 6rem auto auto;}
    .actions--numbers--beach.show .scene-crab{top: 6rem; left:6rem; width: 60px;}
    .actions--numbers--beach.show .scene-turtle{
        width: 126px;
        top:0;left: 0;
    }
    .actions--numbers--total .number{
        font-size: 65px;
        line-height: 60px;
        font-family: 'PFFuturaNeu-Bold';
    }
    .actions--numbers--total .number-kg{
        font-size: 40px;
        line-height: 60px;
    }
}
@media screen and (max-width: 480px) {
    .actions--numbers > div{padding-inline: 14px;}
    .bubble-number{
        font-size: 12px;line-height: 17px;
        padding-inline: 20px;
    }
    .bubble-number span{font-size: 19px;line-height: 16px;}
    .actions--numbers--graphic{
        margin-left: 0;
        width: 80px;
        right: 15px;
        top: 20px;
    }
}
@media screen and (max-width: 420px) {
    .actions--numbers--sea.show .scene-fish-sm{left: 1rem;}
    .actions--numbers--sea.show .scene-fish-bg{left:4rem;}
}
@media screen and (max-width: 390px) {
    .actions--numbers--beach.show .scene-turtle{width: 100px; }
    .actions--numbers--beach.show .scene-crab{left:4rem;}
    .actions--numbers--sea.show .scene-turtle{right: 60px;}
}
@media screen and (max-width: 360px) {
    .actions--numbers--graphic{
        top: -50px;
        right: 5px;
    }
}
@media screen and (max-width: 340px) {
    .actions--numbers--details{padding:5.5rem 1rem 1rem;}
    .actions--numbers--beach.show .scene-crab{left:2rem;}
    .actions--numbers--sea.show .scene-turtle{width: 70px;top:2rem;}

}


/* activities */
.activities-wrapper{
    padding-bottom: 170px;
}

.activity{
    height : 100dvh;
    position: relative;
    color: #005BA2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 70px;
    position: sticky;
    top: 0;
}


.activity:last-of-type{
    margin-bottom: 0;
}

.activity:nth-of-type(even){
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.activity--info h2{
    margin-bottom: 43px;
    font-size: 50px;
    line-height: 30px;
}
.activity--info{
    background: rgba(255, 255, 255, 0.75); 
    padding: 67px 39px 36px;
    max-width: 647px; 
    line-height: 30px;
    font-size: 18px;
}
.activity--info--texts{
    font-family: 'PFFuturaNeu-Book';
}

.activity--info p:not(:last-of-type){
    margin-bottom: 2rem;
}

.activity--info--more{
    margin-top: 69px;
    display: inline-block;
    font-size: 16px;
    border-bottom: 1px solid;
    line-height: 100%;
}
@media screen and (max-width: 1220px) {
    .activity--info{
        padding: 3rem 2rem;
    }
    .activity--info h2{
        font-size: 42px;
    }
    .activity--info--more{
        margin-top: 3.5rem;
    }
}
@media screen and (max-width: 920px) {
    .activity{
        display: block;
        height: auto;
        margin-bottom: 2rem;
        position: relative;
    }
    .activity .bg-img{
        position: relative;
        aspect-ratio: 16/9;
    }
    .activity--info{
        max-width: unset;
        padding: 2.5rem  2rem 2.25rem;
    }
    .activity--info h2{
        font-size: 35px;
    } 
    .activity--info--more{
        margin-top: 2rem;
    }     
}
@media screen and (max-width: 720px) {
    .activity--info{
        max-width: unset;
        padding: 30px 15px 2rem 20px;
    }
    .activity--info h2{
        font-size: 30px;
        margin-bottom: 1.5rem;
    } 
    .activity--info--more{
        margin-top: 1.5rem;
    } 
    .activity--info p:not(:last-of-type) {
        margin-bottom: 1.5rem;
    }     
}

.panel{
    position: fixed;
    width:100%;
    height: 100%;
    left: 0;
    top:0;
    background: rgba(255, 255 , 255, 0);
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    display: none;
    z-index: -1;
    pointer-events: none;
}

.panel.active{
    pointer-events: all;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1000;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.panel.on{
    opacity: 1;
    background: rgba(255, 255 , 255, 1);
}

.panel-wrapper{
    max-width: 1340px;
    padding-inline: 2rem;
    overflow: auto;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.on .panel-wrapper{
    opacity: 1;
}

.panel .article-wrapper{
    padding:110px 76px;
    color: #005BA2;
    background-color: #F4F4F4;
    position: relative;
    border-radius: 44px;
}

.panel .article--columns{
    gap: 57px;
}

.panel .article--columns > div{
    -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
}
.panel .article--image{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-top: 80px;
}

.panel .article--header{
    font-size: 55px;
    line-height: 30px;
    margin-bottom: 50px;
}
.panel .article--body p{
    font-size: 19px;
    line-height: 30px;
    font-family: 'PFFuturaNeu-Book';
}

.panel .article--more{
    width:  -webkit-fit-content;
    width:  -moz-fit-content;
    width:  fit-content;
    border-bottom: 1px solid #005BA2;
}

.panel .article--body > p{
    margin-bottom: 45px;
}
.panel .close{
    position: absolute;
    right: 33px;
    top: 30px;
    background-color: #5171F9;
    border-radius: 50%;
    z-index: 2;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    cursor: pointer;
}
.close .line{
    position: absolute;
    width: 70%;
    left: 15%;
    top: calc(50% - 2px);
    border-top:3px solid #fff;
}
.close .line:last-of-type{
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
}
@media screen and (max-width: 1220px) {
    .panel .article-wrapper{
        padding: 3.5rem 2.5rem;
    } 
    .panel .article--columns{
        gap: 40px;
    } 
    .panel .article--header{
        margin-bottom: 2rem; 
        font-size: 42px;
    }
    .panel .article--body > p{
        margin-bottom: 36px;
    }
    .panel .article--image{
        margin-top: 62px;
    }
}
@media screen and (max-width: 960px) {
    .panel-wrapper{
        padding-inline: 1.5rem;
    }
    .panel .article--columns{
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    } 
    .panel .article-wrapper{
        padding: 2.5rem 1.25rem;
    }
    .panel .article--header{
        font-size: 35px;
        margin-bottom: 30px;
    }
    .panel .article--columns{
        gap: 36px;
    } 
    .panel .article--body p{
        font-size: 17px;
        line-height: 25px;
    }
    .panel .article--image{
        margin-top: 46px;
    }
}

@media screen and (max-width: 720px) {
    .panel-wrapper{
        padding-inline: 1.25rem;
    }
    .panel .article--header{
        font-size: 30px;
        margin-bottom: 22px;
    }
    .panel .article--body > p{
        margin-bottom: 22px;
    }
}