body {
    background: #407aad;
}

.intro {
    position: relative;
    /* height: calc(100vh - var(--nav-height));
    height: 500px; */
    background-color: #5289c8;
    background: linear-gradient(to bottom, #5289c8 25%, #41dae5 100%);
    background: linear-gradient(to bottom, #407aad 0%, #5289c8 50%, #41dae5 100%);
    background: linear-gradient(to bottom, #407aad 0%, #5289c8 100%);
    z-index: 9;
    color: #fff;
}

@media screen and (max-width: 800px) {}

.intro .container {
    /* position: absolute; */
    right: 0;
    left: 0;
    text-align: center;
    padding-top: 55px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    z-index: 2;
    padding-bottom:35px;
}

.intro .container p {
    text-transform: initial;
    letter-spacing: 0em;
    width: 400px;
    display: block;
    left: calc(50% - 200px);
    position: relative;
}

@media screen and (max-width: 800px) {
    .intro .container p {
        width: 80vw;
        margin: 0 auto;
        left: 0;
    }
}

.intro .container ul {
    display: flex;
    list-style: none;
    margin: 0 auto;
    display: table;
    text-align: center;
    width: 35%;
    max-width: 500px;
    border-top: 2px solid #145369;
    border-right: 2px solid #145369;
    border-top: 2px solid #395166;
    border-right: 2px solid #395166;
    border-radius: 20px;
    margin-top: 40px;
    background-color: #577c9d;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-gap: 2rem; */
}

@media screen and (max-width: 800px) {
    .intro .container ul {
        width: 80%;
    }
}

.intro .container ul li a {
    color: #fff;
}

.intro .container ul li {
    display: inline-block;
    border-radius: 20px;
    /* width: 33.333%;
    width: calc(100% / 3); */
    padding: 2px;
    padding: 7px;
}

.intro .container ul li.selected {
    background-color: #145369;
}

.container h1 {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 15px;
}

.container h1 strong {
    font-size: 96px;
    display: block;
    margin-bottom: 15px;
}

/* *************************************************************************************************** */

.list {
    /* height: 1000px; */
    padding-bottom: 235px;
    background: url("../images/idyllic-backdrop.svg"), linear-gradient(to bottom, #5289c8 0%, #41dae5 25%, #90f1ff 50%, #ddffff 75%);
    /* background: url("../images/idyllic-backdrop.svg"), linear-gradient(to bottom, #41dae5 0%, #90f1ff 50%, #ddffff 75%); */
    /* background: url("../images/idyllic-backdrop.svg"), linear-gradient(to bottom, #5289c8 0%, #41dae5 25%, #90f1ff 50%, #ddffff 75%); */
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: calc(760px *2) calc(570px * 2), 100% 100%;
    /* border: 1px solid red; */
    position: relative;
    overflow: hidden;
}

.list::before {
    content: " ";
    position: absolute;
    background-image: url("../images/cloud-a.svg");
    background-repeat: no-repeat;
    /* border: 1px solid red; */
    width: 500px;
    height: 210px;
    top: 750px;
    top: 100px;
    /* top: 200px; */
    left: -500px;
    z-index: 0;
    animation: drift 180s linear infinite;
    opacity: 0.7;
}

@keyframes drift {
    0% {
        transform: translatex(25vw);
    }
    75% {
        transform: translatex(calc(100vw + 500px));
    }
    75.0001% {
        transform: translatex(-500px);
    }
    100% {
        transform: translatex(25vw);
    }
}

.list .container {
    max-width: 1110px;
    min-height: 1000px;
    margin: auto;
    padding: 100px;
    background-image: url("../images/paper.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.list::after, .list .guru::after, .list .guru::before {
    content: " ";
    position: absolute;
    background-image: url("../images/cloud-a.svg");
    background-repeat: no-repeat;
    background-size: 20px 10px;
    /* background-color: lightcoral; */
    width: 20px;
    height: 50px;
    bottom: 400px;
    /* z-index: 1; */
    /* animation: blowing 10s cubic-bezier(.55, 1.34, .52, -0.46) infinite; */
    /* animation: blowing 5s linear infinite; */
    animation: blowing, twirl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMS41OSA4LjI1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2VlMjM1NTt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCw3LjU2YTEwLjQ0LDEwLjQ0LDAsMCwwLDQuMzcuNjgsMzkuMzksMzkuMzksMCwwLDAsNC0uM2MxLS4xMywxLjUzLS4yOSwxLjktLjgyYTMuODMsMy44MywwLDAsMCwuNDEtM2MuNzEtMS4wNiwxLjE1LTIsLjgyLTIuNzZTMTAtLjA3LDguNDMsMEE3LjYyLDcuNjIsMCwwLDAsMy42LDIuMjMsMjAuMTYsMjAuMTYsMCwwLDAsMCw3LjU2WiIvPjwvc3ZnPg==");
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxMS41OSA4LjI1Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2VlMjM1NTt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCw3LjU2YTEwLjQ0LDEwLjQ0LDAsMCwwLDQuMzcuNjgsMzkuMzksMzkuMzksMCwwLDAsNC0uM2MxLS4xMywxLjUzLS4yOSwxLjktLjgyYTMuODMsMy44MywwLDAsMCwuNDEtM2MuNzEtMS4wNiwxLjE1LTIsLjgyLTIuNzZTMTAtLjA3LDguNDMsMEE3LjYyLDcuNjIsMCwwLDAsMy42LDIuMjMsMjAuMTYsMjAuMTYsMCwwLDAsMCw3LjU2WiIvPjwvc3ZnPg==");
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* 
@media screen and (max-width: 800px) {
    .list::after {
        animation: none;
        visibility: hidden;
    }
} */

.list .guru::before {
    bottom: 100px;
    animation: blowing, twirl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    filter: hue-rotate(190deg);
}

.list .guru::after {
    bottom: 200px;
    animation: blowing, twirl;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    filter: hue-rotate(178deg);
}

@keyframes blowing {
    0% {
        transform: translatex(0vw) translatey(0px) rotateZ(0deg) rotateY(0deg);
    }
    25% {
        /* transform: translatex(25vw) translatey(150px) rotateZ(720deg) rotateY(720deg); */
        transform: translatex(25vw) translatey(150px) rotateZ(720deg) rotateY(0deg);
    }
    50% {
        transform: translatex(50vw) translatey(100px) rotateZ(360deg) rotateY(0deg);
    }
    75% {
        /* transform: translatex(75vw) translatey(150px) rotateZ(-360deg) rotateY(360deg); */
        transform: translatex(75vw) translatey(150px) rotateZ(-360deg) rotateY(0deg);
    }
    100% {
        transform: translatex(100vw) translatey(0px) rotateZ(0deg) rotateY(0deg);
    }
}

@keyframes twirl {
    0% {
        width: 20px;
    }
    10% {
        width: 2px;
    }
    20% {
        width: 20px;
    }
    30% {
        width: 2px;
    }
    40% {
        width: 20px;
    }
    50% {
        width: 2px;
    }
    60% {
        width: 20px;
    }
    70% {
        width: 2px;
    }
    80% {
        width: 20px;
    }
    90% {
        width: 2px;
    }
    100% {
        width: 20px;
    }
}

@media screen and (max-width: 800px) {
    .list .container {
        min-height: 600px;
        padding: 40px 30px 100px 30px;
    }
}

.list .guru {
    background-image: url("../images/guru-reading.svg");
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    height: 280px;
    margin-top: -50px;
    z-index: 2;
    animation: float 5s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}

.list .shadow {
    width: 150px;
    height: 5px;
    background: #000000;
    opacity: 0.2;
    border-radius: 100px / 5px;
    margin: auto;
    margin-top: 30px;
    animation: grow-and-shrink 5s ease-in-out infinite;
}

@keyframes grow-and-shrink {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.8, 0.8);
    }
    100% {
        transform: scale(1, 1);
    }
}

.list .names {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    /* border: 1px solid red; */
}

@media screen and (max-width: 800px) {
    .list .names {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
    }
}

.list .name {
    /* width: 300px; */
    width: 225px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.list .name strong {
    /* border: 1px solid blue; */
    text-transform: uppercase;
    display: block;
    color: #5a2604;
    font-weight: 900;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
}

.list .name strong::before {
    content: " ";
    display: block;
    display: block;
    width: 40%;
    height: 20px;
    margin: auto;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyA5LjM3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzNhM2IzYTtmaWxsLXJ1bGU6ZXZlbm9kZDt9LmNscy0ye2ZpbGw6IzcxNzE3MDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzIuNiw4LjI2SDQ3LjA3YS41Ni41NiwwLDAsMSwwLDEuMTFIMzIuNmEuNTYuNTYsMCwwLDEsMC0xLjExWk0zOS44MywwYS4xNi4xNiwwLDAsMC0uMTMuMDhBMy41MSwzLjUxLDAsMCwxLDM4LjIxLDEuNWMtLjE3LjA3LS4xNC4yMSwwLC4yN2ExLjU5LDEuNTksMCwwLDEsLjY3Ljg4Yy4zNywxLjA3LjIyLDIuNjctMS4yLDIuNzNhMS4zNSwxLjM1LDAsMCwxLTEuMjctLjcsMS40MiwxLjQyLDAsMCwxLC4yNy0xLjU5LjE4LjE4LDAsMCwwLDAtLjI4LDEuNzIsMS43MiwwLDAsMS0uODMtMSwuMTQuMTQsMCwwLDAtLjI2LDAsMS43MiwxLjcyLDAsMCwxLS44MywxLC4xOC4xOCwwLDAsMCwwLC4yOCwxLjQyLDEuNDIsMCwwLDEsLjI3LDEuNTlBMS4yOSwxLjI5LDAsMCwxLDMyLjgzLDUsMS41NSwxLjU1LDAsMCwxLDMyLjQ3LDRhMS4yMiwxLjIyLDAsMCwxLC4zNi0uODJjLjEtLjExLjE3LS4yNywwLS4zYTMuNCwzLjQsMCwwLDEtMS40My0uNjYuMTUuMTUsMCwwLDAtLjE4LDAsLjE0LjE0LDAsMCwwLS4wNi4xNmwxLjU0LDUuMkg0N2wxLjU0LTUuMmEuMTUuMTUsMCwwLDAtLjA3LS4xNi4xNC4xNCwwLDAsMC0uMTcsMCwzLjQsMy40LDAsMCwxLTEuNDMuNjZjLS4yLDAtLjE0LjE5LDAsLjNBMS4yNywxLjI3LDAsMCwxLDQ3LjIsNCwxLjUxLDEuNTEsMCwwLDEsNDYuODMsNWExLjI4LDEuMjgsMCwwLDEtMi4wNi0uMzRBMS40LDEuNCwwLDAsMSw0NSwzLjA5YS4xOC4xOCwwLDAsMCwwLS4yOCwxLjY4LDEuNjgsMCwwLDEtLjgzLTEsLjE0LjE0LDAsMCwwLS4yNiwwLDEuNzIsMS43MiwwLDAsMS0uODMsMSwuMTguMTgsMCwwLDAsMCwuMjgsMS40MywxLjQzLDAsMCwxLC4yNywxLjU5LDEuMzYsMS4zNiwwLDAsMS0xLjI3LjdjLTEuNDMtLjA2LTEuNTctMS42Ni0xLjItMi43M2ExLjU4LDEuNTgsMCwwLDEsLjY2LS44OGMuMTItLjA2LjE1LS4yLDAtLjI3QTMuNTQsMy41NCwwLDAsMSw0MCwuMDguMTMuMTMsMCwwLDAsMzkuODMsMFoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0wLDguNzFIMjguN3YuNTNIMFY4LjcxWm01MSwwSDc5LjY3di41M0g1MVoiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center bottom;
}

.list .name strong::after {
    content: " ";
    display: block;
    width: 100%;
    height: 7px;
    margin: 0;
    padding: 0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjkuNzQgNS4zOCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0MTQxNDI7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY1LjMsMi42OUE0Ljc3LDQuNzcsMCwwLDEsNjIsLjczQzYxLjIyLDEsNTUuNDQsMiw0Ny42NSwyLjI1LDMxLjI2LDIuNzcsNiwyLjI3LjE4LDIuNDRjLS4yNSwwLS4yMy41LDAsLjUxLDUuODYuMTgsMzEuMTctLjI5LDQ3LjU1LjIzQzU1LjQ3LDMuNDMsNjEuMjIsNC4zNSw2Miw0LjY1YTQuOSw0LjksMCwwLDEsMy4zMy0yWk02MywyLjY5QTMuNjIsMy42MiwwLDAsMCw2MS4zLDQuMSw5Ny4zNiw5Ny4zNiwwLDAsMCw0Ny40LDIuN2MxLjQyLDAsMTEuNDktLjY1LDEzLjktMS40MkEzLjM0LDMuMzQsMCwwLDAsNjMsMi42OVptNC41Mi0xLjNhMS4zLDEuMywwLDEsMS0xLjMsMS4zLDEuMywxLjMsMCwwLDEsMS4zLTEuM1pNNjguMjcsMWEyLjY2LDIuNjYsMCwwLDAtLjg5LDAsMS44MSwxLjgxLDAsMCwwLTEuNTQsMS43NiwxLjc5LDEuNzksMCwwLDAsMS41NCwxLjc1LDIuNTYsMi41NiwwLDAsMCwxLS4wNSwxLjc5LDEuNzksMCwwLDAsMS4zMS0xLjdBMS44LDEuOCwwLDAsMCw2OC4yNywxWm0zNi4xNiwxLjc0YTQuOCw0LjgsMCwwLDAsMy4zMy0yYy43NS4zLDYuNTMsMS4yNiwxNC4zMiwxLjUyLDE2LjM4LjUyLDQxLjY0LDAsNDcuNDguMTkuMjQsMCwuMjMuNSwwLC41MS01Ljg1LjE4LTMxLjE3LS4yOS00Ny41Ni4yMy03Ljc1LjI1LTEzLjQ5LDEuMTctMTQuMjUsMS40N2E0Ljg1LDQuODUsMCwwLDAtMy4zMi0yWm0yLjMsMGEzLjY1LDMuNjUsMCwwLDEsMS43LDEuNDEsOTcuNTMsOTcuNTMsMCwwLDEsMTMuODktMS40Yy0xLjQsMC0xMS40Ny0uNjUtMTMuODktMS40MmEzLjQyLDMuNDIsMCwwLDEtMS43LDEuNDFabS00LjUxLTEuM2ExLjMsMS4zLDAsMSwwLDEuMywxLjMsMS4zLDEuMywwLDAsMC0xLjMtMS4zWk0xMDEuNDYsMWEyLjY2LDIuNjYsMCwwLDEsLjg5LDAsMS44MSwxLjgxLDAsMCwxLDEuNTQsMS43NiwxLjc5LDEuNzksMCwwLDEtMS41NCwxLjc1LDIuNDksMi40OSwwLDAsMS0xLS4wNUExLjc4LDEuNzgsMCwwLDEsMTAwLDIuNjksMS44LDEuOCwwLDAsMSwxMDEuNDYsMVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik03OS40Miw0LjEzYzEuODQtLjUsNi45Mi0yLjU2LDkuOC0zLjMyQzkxLjg4LjEyLDk1LjQtLjQsOTcuODUuOGMxLjU2Ljc4LDIsMi4xLDEsMy4xNS0xLjU2LDEuNjctNS42OCwxLjYxLTcuNDIuODItLjYyLS4zMy0uMzItLjc5LjEyLS41QTYuNzYsNi43NiwwLDAsMCw5Niw0LjkzYzEuMzMtLjIzLDIuNzQtMSwyLjctMi4yMiwwLTEtMS0xLjg1LTIuNTctMi4xMy0yLjYxLS40OS01LC40OS03LjA3LDEuMjgtMi44MSwxLjA3LTcuMjMsMi45My0xMS41MiwzLjM1YTEwLjg1LDEwLjg1LDAsMCwxLTUuODgtLjc5Yy0xLjY5LTEtMS43Ny0yLjQ5LS4xOC0zLjVBNy40Niw3LjQ2LDAsMCwxLDc4LjA4LjcxYy4zNi4yLjE0LjYzLS4yNC40Mi0yLjMyLTEuMjItNi42LS44Ni02Ljc2LDEuNDRDNzEsMy42NCw3Mi4zLDQuNDYsNzMuOTIsNC43MmExMy4wNiwxMy4wNiwwLDAsMCw1LjUtLjU5Wk04MS43NCw1LjNjNC4zNi43OCwxMi44LTQuNTEsMTQuNjktMy4zOUM5NC4yOC0uMTIsODUsNS4xOSw4MS43NCw1LjNaTTg4Ljg0LjA4Qzg0LjQ4LS43LDc2LDQuNTgsNzQuMTUsMy40Niw3Ni4zLDUuNDksODUuNTcuMTksODguODQuMDhaIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
}

.list .name.fr strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC40MyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3MTcxNzA7fS5jbHMtMntmaWxsOiM0MTQxNDI7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsMTcuODlIMjguN3YuNTRIMHYtLjU0Wm01MSwwSDc5LjY3di41NEg1MVoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00Mi41LDEyLjY3QTI3LjQxLDI3LjQxLDAsMCwxLDQwLjM3LDIuMTZWMEgzOS4yOVYyLjE2YTI3LjQxLDI3LjQxLDAsMCwxLTIuMTMsMTAuNTFoMi4xM1YxMC41MWgxLjA4djIuMTZabTAsMCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTQzLDEzLjc1SDM2LjY4YTIzLjU3LDIzLjU3LDAsMCwxLTIuOSw0LjY4aDMuNTNhMi41MiwyLjUyLDAsMCwxLDUsMGgzLjUzQTIzLjU0LDIzLjU0LDAsMCwxLDQzLDEzLjc1Wm0wLDAiLz48L3N2Zz4=");
}

.list .name.nl strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC43OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3MTcxNzA7fS5jbHMtMntmaWxsOiM0MTQxNDI7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsMThIMjguN3YuNTNIMFYxOFptNTEsMEg3OS42N3YuNTNINTFaIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjM1LjU1IDguODEgMzUuNTkgOC40NiAzNS44MSA4LjE4IDM2LjEyIDcuODEgMzAuODkgNy4zNSAzMC44OSAxMC41NCAzNS40IDEwLjE0IDM1LjU1IDguODEiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNDQuMDggOC40NiA0NC4xMiA4LjgxIDQ0LjI3IDEwLjE0IDQ4Ljc4IDEwLjU0IDQ4Ljc4IDcuMzUgNDMuNTUgNy44MSA0My44NSA4LjE4IDQ0LjA4IDguNDYiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMzkuODMgMy4zMSA0MS4wMSA0Ljc0IDQxLjQzIDAgMzguMjMgMCAzOC42NiA0Ljc0IDM5LjgzIDMuMzEiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00My44OSwxNy41OSw0Mi45Myw5LDM5LjgzLDUuMiwzNi43NCw5bC0xLDguNjRoMHYxLjJoOC4xMXYtMS4yWm0tNC42Ni0zLjRoMS4ydjMuNGgtMS4yWiIvPjwvc3ZnPg==");
}

.list .name.it strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC40NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3MTcxNzA7fS5jbHMtMntmaWxsOiM0MTQxNDI7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAsMTcuMzFIMjguN3YuNTNIMHYtLjUzWm01MSwwSDc5LjY3di41M0g1MVoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00Ni41NSw0LjNsLTEuMDctLjE5TDQ1Ljg2LDJsLTIuMTMtLjM3TDQ0LC4xOSw0Mi45MiwwbC0uMjUsMS40Mkw0MC41NCwxbC0uMzgsMi4xM0wzOS4xLDMsMzYuNTYsMTcuMzZoLTEuMXYxLjA4aDkuOTFWMTcuMzZINDQuMjVabS03LDIuNDIsMS4wNi4xOS4yNS0xLjQyLDEuMDcuMTlMNDEuNjcsNy4xbDEuMDYuMThMNDMsNS44Niw0NCw2LjA1bC0uMjUsMS40MiwxLjA3LjE5LS4xOSwxLjA2LTUuMzItLjkzWm0uMzIsMTAuNjRoLTEuMUwzOSwxNi4xM2wxLjA3LjE5Wm0yLjE5LDBINDFsLjE1LS44NSwxLjA3LjE5Wm0xLjM3LTEuNTQtNS4zMi0uOTQuMTgtMS4wNiwxLjA3LjE5LjI1LTEuNDIsMS4wNi4xOC0uMjUsMS40MiwxLjA3LjE5TDQxLjczLDEzbDEuMDYuMTktLjI1LDEuNDIsMS4wNy4xOVptLjYzLTMuNTUtNS4zMy0uOTQuMTktMS4wNiwxLjA2LjE5TDQwLjIzLDlsMS4wNi4xOUw0MSwxMC42NGwxLjA2LjE5LjI1LTEuNDIsMS4wNy4xOUw0My4xNywxMWwxLjA2LjE5Wm0wLDAiLz48L3N2Zz4=");
}

.list .name.gr strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxNy43MiI+CiAgPHBhdGggZD0iTTAgMTcuMThoMjguN3YuNTRIMHYtLjU0Wm01MSAwaDI4LjY3di41NEg1MXYtLjU0WiIgc3R5bGU9ImZpbGw6IzcxNzE3MCIvPgogIDxwYXRoIGQ9Ik01MC4zMiA1LjZWNC4xNUwzOS44IDAgMjkuMjggNC4xNVY1LjZoMS4yM1Y3aDEuMjd2Ny4wM2gtMS4yN3YxLjg1aC0xLjIzdjEuODVoMjEuMDV2LTEuODVINDkuMXYtMS44NWgtMS4yN1Y3aDEuMjdWNS42aDEuMjNabS0xNi4wNyA4LjQyaC0xLjIzVjYuOTloMS4yM3Y3LjAzWm0yLjQ2IDBoLTEuMjNWNi45OWgxLjIzdjcuMDNabTIuNDcgMGgtMS4yM1Y2Ljk5aDEuMjN2Ny4wM1ptMi40NyAwaC0xLjIzVjYuOTloMS4yM3Y3LjAzWm0yLjQ2IDBoLTEuMjNWNi45OWgxLjIzdjcuMDNabTIuNDcgMGgtMS4yM1Y2Ljk5aDEuMjN2Ny4wM1ptMCAwIiBzdHlsZT0iZmlsbDojNDE0MTQyIi8+Cjwvc3ZnPg==");
}

.list .name.us strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC40MyI+CiAgPHBhdGggZD0iTTAgMTcuODloMjguN3YuNTRIMHYtLjU0Wm01MSAwaDI4LjY3di41NEg1MXYtLjU0WiIgc3R5bGU9ImZpbGw6IzcxNzE3MCIvPgogIDxwYXRoIGQ9Ik00NC4xNSAxMS44MVY4LjQ2aC0uOXYtLjQ3YzAtLjY5LS41Ny0xLjI2LTEuMjYtMS4yNmgtLjU0VjUuMjljMC0uMzItLjA2LS42My0uMTgtLjkxVjMuMzFoLS45di0uNzJoLTEuMDh2LjcyaC0uOXYxLjA3Yy0uMTIuMjgtLjE4LjU5LS4xOC45MXYuOWgtLjJsLS44OC0yLjM0VjEuMmMuMTEtLjEzLjE4LS4yOS4xOC0uNDggMC0uNC0uMzItLjcyLS43Mi0uNzJzLS43Mi4zMi0uNzIuNzJjMCAuMTguMDcuMzUuMTguNDh2NS41NGMwIDEuMDEuNjkgMS44NSAxLjYyIDIuMDl2Ni4zN2gtMS4wOHYyLjE2aC0xLjA4djEuMDhoOC42NHYtMS4wOGgtMS4wOFYxNS4yaC0xLjA4di0zLjM4aDIuMTZabS0yLjE2LTIuMjdoMS4wOHYxLjE5aC0xLjA4VjkuNTRabS0yLjE2LTUuMTVjLjI1IDAgLjU0LjM4LjU0LjlzLS4yOS45LS41NC45LS41NC0uMzgtLjU0LS45LjI5LS45LjU0LS45Wk0zOC43NiA5LjZsMi4xNiAyLjE2djEuNTNsLTIuMTYtMi4xNlY5LjZabTMuMjMgNy43NWgtNC4zMnYtMS4wOGg0LjMydjEuMDhabTAgMCIgc3R5bGU9ImZpbGw6IzQxNDE0MiIvPgo8L3N2Zz4=");
}

.list .name.es strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC40MyI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMntmaWxsOiM0MTQxNDJ9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBpZD0iTGF5ZXJfMSIgZD0iTTAgMTcuODloMjguN3YuNTRIMHYtLjU0Wm01MSAwaDI4LjY3di41NEg1MXYtLjU0WiIgc3R5bGU9ImZpbGw6IzcxNzE3MCIvPgogIDxnIGlkPSJMYXllcl8yIj4KICAgIDxwYXRoIGQ9Ik00NS40OCAxMi44YS45MDEuOTAxIDAgMCAwLTEuNTggMGwtMS4xOCAyLjE1LTIuMDktMy45MmMtLjE2LS4yOS0uNDYtLjQ4LS43OS0uNDhzLS42NC4xOC0uNzkuNDhsLTIuMDkgMy45Mi0xLjE4LTIuMTVhLjkwMS45MDEgMCAwIDAtMS41OCAwbC0xLjczIDMuMTV2Mi40OGgxLjk4di0xLjU4aDEuMDh2MS41OGgyLjd2LTEuNThoMS4wOHYxLjU4aDEuMDh2LTEuNThoMS4wOHYxLjU4aDIuN3YtMS41OGgxLjA4djEuNThoMS45OHYtMi40OEw0NS41IDEyLjhabS01LjY1IDIuMTdjLS40IDAtLjcyLS4zMi0uNzItLjcycy4zMi0uNzIuNzItLjcyLjcyLjMyLjcyLjcyLS4zMi43Mi0uNzIuNzJabTcuMDItMTEuNzNjMCAuNC0uMzIuNzItLjcyLjcycy0uNzItLjMyLS43Mi0uNzIuMzItLjcyLjcyLS43Mi43Mi4zMi43Mi43MlpNNDMuNDMuNzJjMCAuNC0uMzIuNzItLjcyLjcycy0uNzItLjMyLS43Mi0uNzIuMzItLjcyLjcyLS43Mi43Mi4zMi43Mi43MlptLTkuODkgMy40OWMtLjU1IDAtMS4wMSA0LjE0LTEuMDcgOS40OGwuNzgtMS40MWMuMjgtLjUxLjc2LS44NiAxLjMxLS45OC0uMTUtNC4xNC0uNTUtNy4wOS0xLjAxLTcuMDlabTEyLjU5IDBjLS40NyAwLS44NiAyLjk1LTEuMDEgNy4wOS41NS4xMiAxLjAzLjQ3IDEuMzEuOThsLjc4IDEuNDFjLS4wNi01LjM0LS41Mi05LjQ4LTEuMDctOS40OFptMCAwIiBjbGFzcz0iY2xzLTIiLz4KICAgIDxwYXRoIGQ9Ik00Mi43MSAxLjY5Yy0uMzkgMC0uNzQgMi42LS45MyA2LjQ5bC0xLjQxLTEuMDR2LS4zM2MuMTEtLjEzLjE4LS4yOS4xOC0uNDggMC0uNC0uMzItLjcyLS43Mi0uNzJzLS43Mi4zMi0uNzIuNzJjMCAuMTguMDcuMzUuMTguNDh2LjMzbC0xLjQyLjk4Yy0uMTktMy44Ni0uNTMtNi40My0uOTItNi40My0uNSAwLS45MiA0LjE1LTEuMDQgOS44LjMzLjE4LjYxLjQ1LjguNzlsLjIyLjQxIDEuMDQtMS45NmMtLjAxLS40NS0uMDMtLjktLjA0LTEuMzNsMS4zNi0uOTR2MS4wOWMuMTctLjA1LjM1LS4wNy41NC0uMDdzLjM3LjAzLjU0LjA3VjguNDhsMS4zNiAxYy0uMDEuNC0uMDMuODItLjA0IDEuMjRsMS4wNCAxLjk2LjIyLS40MWMuMTktLjM0LjQ3LS42MS44LS43OS0uMTItNS42NS0uNTQtOS44LTEuMDQtOS44Wm0tOC40NSAxLjU1YzAgLjQtLjMyLjcyLS43Mi43MnMtLjcyLS4zMi0uNzItLjcyLjMyLS43Mi43Mi0uNzIuNzIuMzIuNzIuNzJaTTM3LjY4LjcyYzAgLjQtLjMyLjcyLS43Mi43MnMtLjcyLS4zMi0uNzItLjcyLjMyLS43Mi43Mi0uNzIuNzIuMzIuNzIuNzJabTAgMCIgY2xhc3M9ImNscy0yIi8+CiAgPC9nPgo8L3N2Zz4=");
}

.list .name.de strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC40MyI+CiAgPHBhdGggZD0iTTAgMTcuODloMjguN3YuNTRIMHYtLjU0Wm01MSAwaDI4LjY3di41NEg1MXYtLjU0WiIgc3R5bGU9ImZpbGw6IzcxNzE3MCIvPgogIDxwYXRoIGQ9Ik01MC4yNyAxMC4yM1Y4LjRoLTEuMjJWNi41N0g0M2MuMzItLjM2LjUzLS43Ny42NC0xLjIyaDEuMjlWNC4xM2gtMi40NXYuNjFjMCAuNzgtLjU3IDEuMzktMS40NyAxLjY3bDEuMzgtMi4zOC0xLjA2LS42MS0uOSAxLjU1VjIuODhoMS4yMlYxLjY2aC0zLjY3djEuMjJoMS4yMnYyLjA5bC0uOS0xLjU1LTEuMDYuNjEgMS4zOCAyLjM4Yy0uOS0uMjgtMS40Ny0uODktMS40Ny0xLjY3di0uNjFIMzQuN3YxLjIyaDEuMjljLjEuNDUuMzIuODcuNjQgMS4yMmgtNi4wNVY4LjRoLTEuMjJ2MS44M2gxLjI2djYuOTdoLTEuMjZ2MS4yMmgyMC44OFYxNy4yaC0xLjI2di02Ljk3aDEuMjZabS0xNy4xNiA2Ljk4aC0xLjIydi02Ljk3aDEuMjJ2Ni45N1ptMi40NCAwaC0xLjIydi02Ljk3aDEuMjJ2Ni45N1ptMi40NSAwaC0xLjIydi02Ljk3SDM4djYuOTdabTIuNDUgMGgtMS4yMnYtNi45N2gxLjIydjYuOTdabTIuNDQgMGgtMS4yMnYtNi45N2gxLjIydjYuOTdabTIuNDUgMGgtMS4yMnYtNi45N2gxLjIydjYuOTdabTIuNDUgMGgtMS4yMnYtNi45N2gxLjIydjYuOTdaTTQwLjY1LjgyYzAgLjQ1LS4zNy44Mi0uODIuODJzLS44Mi0uMzctLjgyLS44Mi4zNy0uODIuODItLjgyLjgyLjM3LjgyLjgyWm0wIDAiIHN0eWxlPSJmaWxsOiM0MTQxNDIiLz4KPC9zdmc+");
}

.list .name.pt strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC42NCI+CiAgPHBhdGggZD0iTTAgMTguMWgyOC43di41NEgwdi0uNTRabTUxIDBoMjguNjd2LjU0SDUxdi0uNTRaIiBzdHlsZT0iZmlsbDojNzE3MTcwIi8+CiAgPHBhdGggZD0iTTQzLjExIDE3LjU1di00LjQ0aC02LjU1djQuNDRoLTEuMDl2MS4wOWg4Ljc0di0xLjA5aC0xLjA5Wk00MS40NyAyLjkxVjJjMC0uNTEtLjE1LS45OS0uNDMtMS4zNi0uMzEtLjQxLS43NS0uNjQtMS4yMS0uNjRzLS45LjI0LTEuMjEuNjRjLS4yOC4zNy0uNDMuODUtLjQzIDEuMzZ2LjkxSDMxLjZWNGgxLjY0djEuNjRoNC40MXY2LjM3aDQuMzdWNS42NGg0LjQxVjRoMS42NFYyLjkxaC02LjU5Wm0tMS42NC0xLjgyYy4yNiAwIC41NS4zOS41NS45MXMtLjI5LjkxLS41NS45MS0uNTUtLjM5LS41NS0uOTEuMjktLjkxLjU1LS45MVptMS4xIDguODItMi4xOC0yLjE4VjYuMTlsMi4xOCAyLjE4djEuNTRabTAgMCIgc3R5bGU9ImZpbGw6IzQxNDE0MiIvPgo8L3N2Zz4=");
}

.list .name.he strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC42NCI+CiAgPHBhdGggZD0iTTAgMTguMWgyOC43di41NEgwdi0uNTRabTUxIDBoMjguNjd2LjU0SDUxdi0uNTRaIiBzdHlsZT0iZmlsbDojNzE3MTcwIi8+CiAgPHBhdGggZD0iTTQ3LjE1LjIxdjE0Ljk2bC0uMDYuMDVjLTEuNDEuMS0xLjM0IDIuMDkuMDYgMi4xNnYxLjIxbC0uMDYuMDZIMzQuNjVzLS4wNy0uMDMtLjExLS4wNGMtMS4xLS4xMi0xLjg2LS43OC0yLjAyLTEuOVYyLjA3YzAtLjc3IDEuMDMtMS44NiAxLjc5LTEuODZoMTIuODRabS02Ljc2IDEuNzdoLTEuMDh2My4yM2gtMi42OXYxLjA4aDIuNjl2Ny4wNmgxLjA4VjYuMjloMi42OVY1LjIxaC0yLjY5VjEuOThabTQuODQgMTMuMjRoLTEwLjVjLS4yOCAwLS42Ni40NS0uNzUuNzEtLjIxLjYxLjI0IDEuNDQuOSAxLjQ0aDEwLjM5Yy0uNC0uNjgtLjM3LTEuNDYtLjA0LTIuMTVaIiBzdHlsZT0iZmlsbDojNDE0MTQyIi8+Cjwvc3ZnPg==");
}

.list .name.ar strong::before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3OS42NyAxOC42NCI+CiAgPHBhdGggZD0iTTAgMTguMWgyOC43di41NEgwdi0uNTRabTUxIDBoMjguNjd2LjU0SDUxdi0uNTRaIiBzdHlsZT0iZmlsbDojNzE3MTcwIi8+CiAgPHBhdGggZD0iTTQ2LjAzIDUuMzJWNC4yNGgtMy4yNFYuMjFoLTEuMDh2LjhhMTUuMDc5IDE1LjA3OSAwIDAgMC01LjA5IDUuMiAxNC45NjQgMTQuOTY0IDAgMCAwLTIuMDQgNy41NGMwIDEuMy4xNyAyLjU4LjQ5IDMuODJoLTEuNDN2MS4wOGgxMi4zOHYtMS4wOGgtMS4wOFY1LjMyaDEuMDhabS00LjMyIDBoLTMuMThjLjI5LS4zNy41OS0uNzQuOTItMS4wOGgyLjI3djEuMDhabTIuMTYgMTIuMjRoLTEuMDhWNS4zMmgxLjA4djEyLjI0Wm0wIDAiIHN0eWxlPSJmaWxsOiM0MTQxNDIiLz4KPC9zdmc+");
}


.list .name span {
    color: #404040;
    font-size: 0.8rem;
}

.list .name span:nth-child(3) {
    /* margin-left: 20px;
    margin-right: 20px; */
}

.list .name span:nth-child(3)::before, .list .name span:nth-child(3)::after {
    content: " ";
    display: inline-block;
    width: 20px;
    height: 10px;
    margin: auto;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1LjMxIDUuMDUiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojNDE0MTQyO308L3N0eWxlPjwvZGVmcz48cG9seWdvbiBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMi42NiAwIDMuNDggMS42NiA1LjMyIDEuOTMgMy45OSAzLjIzIDQuMyA1LjA1IDIuNjYgNC4xOSAxLjAxIDUuMDUgMS4zMyAzLjIzIDAgMS45MyAxLjg0IDEuNjYgMi42NiAwIi8+PC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
}

.list .name:hover span, .list .name:hover strong {
    color: #000;
    filter: contrast(200%) invert(100%) drop-shadow(0px 2px 3px);
}

/* animation: neon5 1.5s ease-in-out infinite alternate; */

/* @-webkit-keyframes neon5 {
    from {
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
    }
    to {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
    }
  } */

.list .container::after {
    content: "";
    position: absolute;
    width: 84%;
    height: 82%;
    margin: auto;
    top: 8%;
    left: 8%;
    background-image: url("../images/ink-animation.svg");
    background-repeat: no-repeat;
    background-size: 1200% 100%;
    will-change: background-position, height, opacity;
    animation-name: ink-reveal;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-timing-function: steps(11);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes ink-reveal {
    99% {
        background-position: 100% 0;
        height: 82%;
        opacity: 0.8;
    }
    100% {
        height: 0%;
    }
}

@media screen and (max-width: 800px) {
    .list .container::after {
        height: calc(100% - 120px);
        width: calc(100% - 60px);
        top: 40px;
        left: 30px;
    }
    @keyframes ink-reveal {
        99% {
            background-position: 100% 0;
            height: calc(100% - 120px);
            opacity: 0.8;
        }
        100% {
            height: 0%;
        }
    }
}

.list .pagination {
    margin-top: 2rem;
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 1rem;
    grid-template-areas: "previous numbers next";
    column-gap: 0;
    row-gap: 30px;
}

@media screen and (max-width: 800px) {
    .list .pagination {
        /* grid-template-columns: repeat(2, 1fr);
        grid-template-areas: "numbers numbers numbers" "previous . next"; */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "numbers numbers" "previous next";
    }
}

.list .pagination div:nth-child(1) {
    grid-area: previous;
}

.list .pagination div:nth-child(2) {
    grid-area: numbers;
    margin: auto;
}

.list .pagination div:nth-child(3) {
    margin-left: auto;
    grid-area: next;
}

.list .button {
    margin: 0;
    display: initial;
}

.list .pagination ul {
    display: flex;
    list-style: none;
    margin: 0 auto;
    width: 100%;
    display: table;
    text-align: center;
    grid-area: numbers;
}

.list .pagination ul li {
    display: inline-block;
    width: 10%;
}

.list .pagination ul li:hover {
    background-color: #009fb2;
    border-radius: 3px;
}

.list .pagination ul li:hover a{
    color: #fff;
}

.list .pagination ul li.active {
    /* background-color: #009fb2; */
    border-radius: 3px;
    border-bottom: 2px solid #009fb2;
}


.list .pagination ul a {
    text-decoration: none;
}

@media screen and (max-width: 800px) {
    .list .pagination ul {
        /* order: -1; */
    }
}

/* *************************************************************************************************** */

.footer .share {
    background-color: #152817;
}

.footer {
    background-color: #203c23;
}