/** @format */
/* werkt voor images van 960 x 720 */
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');

/* ============================================>>>VARIABLES<<<============================================*/
:root {
    --cachedImage: url(../media/images/img33.jpg);
    --currentImage: url(../media/images/img10.jpg);
    --nextImage: url(../media/images/img11.jpg);
    --thumbback0: url(../media/images/img0.jpg);
    --thumbback1: url(../media/images/img1.jpg);
    --thumbback2: url(../media/images/img2.jpg);
    --thumbback3: url(../media/images/img3.jpg);
    --thumbback4: url(../media/images/img4.jpg);
    --description: '';
    --county: '';
    --municipality: '';
    --location: '';
    --transition: transform 1.2s ease-out;
    --border: none;
    --radius: 15px;
}
/* ============================================>>>GENERAL SETUP<<<==========================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
}

body {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    width: 100vw;
    background: var(--nextImage) top center no-repeat;
    overflow: hidden;
    max-width: 100%;
    z-index: 10;
}
body::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: var(--currentImage) top center no-repeat;
}
body.active::after {
    animation: 1.2s fadeOut ease-out;
}

.container {
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3em;
    width: 95vw;
    height: 100%;
    max-height: 85%;
    min-width: 320px;
    border-radius: 10px;
    /* box-shadow: -120px 120px 150px 0px rgba(2, 0, 0, 0.5); */
    background: linear-gradient(0deg, rgb(9, 40, 66), rgb(3, 3, 3));
}

.container::after {
    content: '';
    height: 101.5%;
    width: 101.5%;
    z-index: -1;
    top: 50%;
    left: 50%;
    color: white;
    position: absolute;
    display: block;
    background-size: 400%;
    border-radius: 12px;
    background: linear-gradient(rgba(79, 200, 248, 0.616), rgb(206, 206, 206), skyblue, rgba(224, 222, 222, 0.432));
    transform: translate(-50%, -50%);
}

.container::before {
    content: '';
    height: calc(87vh + 10px);
    width: calc(97vw + 10px);
    max-height: 100%;
    z-index: -1;
    top: 50%;
    left: 50%;
    position: absolute;
    display: block;
    opacity: 0.5;
    background-size: 0%;
    border-radius: 12px;
    transform: translate(-50%, -50%);
    background: linear-gradient(
        45deg,
        rgb(253, 255, 254),
        rgb(253, 253, 253),
        rgb(2, 252, 231),
        rgb(250, 251, 252),
        rgb(245, 246, 247),
        rgb(253, 253, 253),
        rgb(2, 252, 231),
        rgb(250, 251, 252)
    );
    -webkit-filter: blur(400px);
    filter: blur(400px);
    transition: all 2.2s ease-in-out;
    -webkit-animation: animate 30s linear infinite 0s alternate;
    animation: animate 30s linear infinite 0s alternate;
}

@-webkit-keyframes animate {
    0% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    25% {
        transform: translate(-50%, -40%);
    }
    50% {
        -webkit-filter: blur(200px);
        filter: blur(200px);
        opacity: 80%;
        transform: translate(-50%, -40%) rotate(180deg);
    }
    75% {
        transform: translate(-50%, -60%) scale(0.7);
    }
    100% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
}

@keyframes animate {
    0% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
    25% {
        transform: translate(-50%, -40%);
    }
    50% {
        -webkit-filter: blur(200px);
        filter: blur(200px);
        opacity: 80%;
        transform: translate(-50%, -40%) rotate(180deg);
    }
    75% {
        transform: translate(-50%, -60%) scale(0.7);
    }
    100% {
        -webkit-filter: blur(10px);
        filter: blur(10px);
    }
}

header {
    display: flex;
    justify-content: center;
    width: 100%;
}

.title {
    font-family: 'Tangerine', cursive;
    padding: 0.2em;
    font-size: 4em;
    align-self: center;
}
#fullscreen-close,
#fullscreen {
    display: none;
}
.image-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#info {
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-items: center;
    font-family: 'Charm', cursive;
    text-align: center;
    z-index: 10;
    width: 100.2%;
    min-width: 301px;
    height: 100%;
    max-height: 0%;
    border-bottom: 0px solid transparent;
    background: rgba(4, 71, 83, 0.8);
    border-radius: var(--radius);
    transition: all 0.5s ease-out;
}
#info.active {
    max-height: 100%;
    border-bottom: 1px solid #1ce4f9cf;
    box-shadow: 0px 3px 30px #00000085, 2px 4px 20px rgba(255, 255, 255, 0.16), 0 0 10px 1px rgb(8, 189, 244);
    transition: all 0.5s ease-in;
}

#info::after {
    content: '';
    display: block;
    height: 0.6rem;
    width: 10%;
    position: absolute;
    border-radius: 5px 5px 0 0;
    bottom: 0;
    cursor: pointer;
    border: 1px solid #1ce4f9cf;
    box-shadow: inset 1px 1px 20px rgba(3, 3, 3, 0.534);
    background: rgba(4, 71, 83, 0.8);
}

#info:hover::after {
    background: #f9fafa00;
    box-shadow: none;
}

#info:active::after {
    background: #03030365;
}

#info::before {
    content: '';
    display: block;
    height: 0.2rem;
    width: 8%;
    position: absolute;
    border-radius: 5px;
    bottom: 1%;
    z-index: 10;
    cursor: pointer;
    border: 1px solid #1ce4f9cf;
    box-shadow: inset 1px 1px 20px black;
    background: rgba(255, 255, 255, 0.514);
}
#info:hover::before {
    background: transparent;
    box-shadow: inset 1px 1px 20px rgba(5, 242, 250, 0.329);
}

#info:active::before {
    box-shadow: none;
}

#info .info-map {
    height: 50%;
    margin-top: 2%;
}

.info-map > svg {
    width: 100%;
    height: 100%;
    fill: #08d1f287;
}

.info-map > svg > g {
    /* filter: drop-shadow(0px 0px 5px #023d46); */
}

.info-map > svg path.selected {
    fill: #f7f9fa;
    stroke: #f9f6f6;
    stroke-width: 1px;
}

.description {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    text-align: center;
    align-self: center;
    font-family: 'Charm', cursive;
    margin: 0.6em 0;
    font-size: 1em;
    cursor: pointer;
    background: black;
    border: 1px solid skyblue;
    border-radius: 10px;
    padding: 0 0.8em;
    -webkit-tap-highlight-color: transparent;
    transition: 0.3s ease-out;
}
.description::after {
    content: 'i';
    color: black;
    width: 1em;
    height: 1em;
    font-size: 0.7em;
    padding: 0.1em;
    background: transparent;
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    font-weight: bold;
    display: inline-grid;
    place-content: center;
    transition: inherit;
}
.description:hover {
    color: skyblue;
}
.description:hover::after {
    background: skyblue;
    color: black;
    border-color: black;
}

.description:active {
    color: white;
    border: 1px solid white;
    transition: none;
}
.description:active::after {
    background: white;
    color: black;
    transition: none;
}

/* ============================================>>>IMAGE BOX<<<============================================*/

.image-box {
    height: 63.75vw;
    width: 84.9vw;
    min-width: 250px;
    min-height: 187px;
    background: transparent;
    transform-style: preserve-3d;
    perspective: 500px;
    scrollbar-width: none;
    z-index: 20;
    position: relative;
    border-radius: var(--radius);
    box-shadow: 2px 4px 20px rgba(255, 255, 255, 0.16), 0 0 10px 1px rgb(8, 189, 244);
    transition: all 0.7s ease-in-out;
}

.image-box > span {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    transition: var(--transition);
    display: block;
    backface-visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
}
.image-box .left,
.image-box .right {
    background-size: cover;
    -webkit-filter: contrast(120%) brightness(100%);
    filter: contrast(120%) brightness(100%);
}
.left.front,
.right.front {
    background-image: var(--currentImage);
}
.left.back,
.right.back {
    background-image: var(--nextImage);
}
.left.front,
.right.back {
    left: 0%;
    background-position: left;
    transform-origin: right;
    border-radius: 15px 0px 0px 15px;
}
.left.back,
.previous.right.back,
.right.front {
    transform: rotateY(0deg);
}
.left.back,
.right.front {
    left: 50%;
    background-position: right;
    transform-origin: left;
    border-radius: 0px 15px 15px 0px;
}
.left.back,
.previous.right.back {
    z-index: -10;
}
.previous.left.back {
    transform: rotateY(-180deg);
    z-index: 10;
}
.right.back {
    transform: rotateY(180deg);
    position: relative;
}
.left.back::after,
.right.back::after {
    content: '';
    display: block;
    position: absolute;
    width: 40%;
    height: 100%;
    top: 0;
    opacity: 1;
    animation: 1s fadeOut ease-out 0.5s;
}
.right.back::after {
    right: 0;
    background: linear-gradient(to right, transparent, rgba(128, 237, 241, 0.2) 98%, rgba(8, 8, 8, 0.1));
}
.left.back::after {
    left: 0;
    background: linear-gradient(to left, transparent, rgba(27, 27, 27, 0.349) 98%, rgba(8, 8, 8, 0.3));
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ============================================>>>THUMB BOX<<<============================================*/
.thumb-display.fullscreen,
.thumb-display {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    top: 0%;
    width: 200%;
    height: 100%;
    bottom: 0;
    background: #04dcff59;
}
.thumb-box.fullscreen,
.thumb-box {
    height: 25vw;
    bottom: 0;
    width: 85vw;
    min-width: 250px;
    min-height: 80px;
    position: relative;
    display: flex;
    margin: 0;
    flex-direction: row;
    justify-content: center;
    background: #000408;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 2px 4px 50px rgba(255, 255, 255, 0.16), 0 0 10px 1px rgb(8, 189, 244);
}

.thumb-box.fullscreen::after,
.thumb-box::after {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 30%;
    top: 0;
    border-radius: var(--radius);
    border: 0px solid rgb(255, 253, 253);
    pointer-events: none;
    transform: translate(0px, 0px);
    box-shadow: 0px 0px 5px 2px rgb(255, 255, 255), inset 1px 1px 10px rgba(3, 3, 3, 0.459);
}

.thumb-display.fullscreen .thumbs,
.thumbs {
    display: block;
    width: 15%;
    height: 100%;
    border-radius: var(--radius);
    position: absolute;
    opacity: 1;
    pointer-events: all;
    transform: translateX(0%);
    box-shadow: inset 1px 1px 10px rgba(3, 3, 3, 0.459);
    transition: all 0.5s cubic-bezier(0.3, 0, 0.23, 1.27);
    -webkit-filter: contrast(120%) brightness(100%);
    filter: contrast(120%) brightness(100%);
}

.thumbs.left,
.thumbs.right {
    pointer-events: all;
}
.thumbs.current {
    opacity: 1;
    pointer-events: all;
}
.thumbs[data-background='0'] {
    background: var(--thumbback0);
    background-size: cover;
}
.thumbs[data-background='1'] {
    background: var(--thumbback1);
    background-size: cover;
}
.thumbs[data-background='2'] {
    background: var(--thumbback2);
    background-size: cover;
}
.thumbs[data-background='3'] {
    background: var(--thumbback3);
    background-size: cover;
}
.thumbs[data-background='4'] {
    background: var(--thumbback4);
    background-size: cover;
}

.thumb-box.fullscreen .button,
.button {
    display: block;
    width: 20%;
    height: 100%;
    background: rgba(14, 13, 13, 0.808);
    position: absolute;
    z-index: 10;
    cursor: pointer;
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
}

.thumb-box.fullscreen #prev,
#prev {
    transform: translateX(-99%);
}

.thumb-box.fullscreen #prev::before,
#prev::before,
.thumb-box.fullscreen #prev::after,
#prev::after,
.thumb-box.fullscreen #next::before,
#next::before,
.thumb-box.fullscreen #next::after,
#next::after {
    content: '';
    display: block;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    height: 50%;
    width: 31%;
    top: 0;
    left: 0;
    -webkit-filter: contrast(100);
    filter: contrast(100);
    transition: all 0.1s ease-in;
}

.thumb-box.fullscreen #prev::before,
#prev::before {
    -webkit-clip-path: polygon(50% 0, 25% 50%, 50% 100%, 50% 100%, 0% 50%, 50% 0);
    clip-path: polygon(50% 0, 25% 50%, 50% 100%, 50% 100%, 0% 50%, 50% 0);
    transform: translate(91%, 50%) scale(0.7);
}
.thumb-box.fullscreen #prev::after,
#prev::after {
    -webkit-clip-path: polygon(25% 0, 12% 50%, 25% 100%, 25% 100%, 0% 50%, 25% 0);
    clip-path: polygon(25% 0, 12% 50%, 25% 100%, 25% 100%, 0% 50%, 25% 0);
    transform: translate(120%, -49%) scale(0.7);
}
/* sinds description toegevoegd is, is er afwijking (normaal 100%) */
.thumb-box.fullscreen #next,
#next {
    transform: translateX(99%);
}
.thumb-box.fullscreen #next::before,
#next::before {
    -webkit-clip-path: polygon(50% 0, 25% 50%, 50% 100%, 50% 100%, 0% 50%, 50% 0);
    clip-path: polygon(50% 0, 25% 50%, 50% 100%, 50% 100%, 0% 50%, 50% 0);
    transform: translate(131%, 50%) rotateZ(180deg) scale(0.7);
}
.thumb-box.fullscreen #next::after,
#next::after {
    -webkit-clip-path: polygon(25% 0, 12% 50%, 25% 100%, 25% 100%, 0% 50%, 25% 0);
    clip-path: polygon(25% 0, 12% 50%, 25% 100%, 25% 100%, 0% 50%, 25% 0);
    transform: translate(102%, -50%) rotateZ(180deg) scale(0.7);
}

.thumb-box.fullscreen #prev:hover:after,
#prev:hover:after,
.thumb-box.fullscreen #prev:hover:before,
#prev:hover:before,
.thumb-box.fullscreen #next:hover:before,
#next:hover:after,
.thumb-box.fullscreen #next:hover:after,
#next:hover:before {
    background: rgba(23, 242, 250, 0.404);
}

.thumb-box.fullscreen #prev:active:after,
#prev:active:after,
.thumb-box.fullscreen #prev:active:before,
#prev:active:before,
.thumb-box.fullscreen #next:active:after,
#next:active:after,
.thumb-box.fullscreen #next:active:before,
#next:active:before {
    background: white;
    transition: none;
}

/* ============================================>>>FULLSCREEN<<<============================================*/
.container.fullscreen #fullscreen {
    display: none;
}
.container.fullscreen #fullscreen-close {
    display: block;
    font-size: 1em;
    padding: 0;
    margin: 1em auto;
    background: black;
    min-width: 30px;
    height: 30px;
    color: skyblue;
    font-family: 'Charm', cursive;
    border: 1px solid skyblue;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.container.fullscreen {
    width: auto;
    padding: 6vh;
    margin: 0 auto;
    background: transparent;
    transition: width 0.7s ease-in-out;
    /* transform: translateX(20%); */
}
.container.fullscreen::after {
    background: transparent;
}
.container.fullscreen::before {
    display: none;
    animation: none;
}
.container.fullscreen > header > h1 {
    display: none;
}
.container.fullscreen > .image-wrapper {
    flex-direction: column;
}

.image-box.fullscreen {
    height: 60vh;
    min-height: 0;
    min-width: 0;
    width: 0;
    box-shadow: none;
    transition: width 0.9s ease-in-out;
}
.image-box.fullscreen > span {
    height: 0;
}

.image-box.fullscreen > #info.active {
    transform: translate(-50%, 0%);
    opacity: 1;
    transition: all 0.7s ease-in-out;
}
.image-box.fullscreen > #info {
    transform: translate(-50%, 0%);
    top: 0;
    opacity: 0;
}

.thumb-box.fullscreen {
    height: 8.8vw;
    width: 30vw;
    max-width: initial;
    bottom: 0;
    margin: 0;
    transition: width 0.5s ease-in-out 0s;
}
.thumb-display.fullscreen > .thumbs.current {
    pointer-events: all;
}

.description.fullscreen {
    margin: 1em auto;
    order: 0;
}

/* ============================================>>>RESPONSIVE<<<============================================*/

/*min-width: 655px*/
@media only screen and (min-width: 470px) {
    .image-box {
        max-height: 41.35vh;
        max-width: 55.1vh;
    }
}
@media only screen and (orientation: landscape) {
    body {
        justify-content: space-evenly;
    }
    .container {
        padding: 4em 2em;
        max-height: 87vh;
        max-width: 95vw;
    }
    header {
        justify-content: space-between;
    }
    .title {
        width: 100%;
        text-align: center;
    }
    #fullscreen-close,
    #fullscreen {
        display: block;
        min-width: 30px;
        height: 30px;
        font-family: 'Charm', cursive;
        font-weight: bold;
        font-size: 1.2em;
        color: rgba(255, 255, 255, 0.541);
        background: black;
        border: 1px solid skyblue;
        margin: 0.2em;
        margin-left: 6em;
        border-radius: 8px;
        background: transparent;
        text-align: center;
        cursor: pointer;
    }
    #fullscreen-close {
        display: none;
    }
    #fullscreen-close:hover,
    #fullscreen:hover {
        color: skyblue;
    }
    #fullscreen-close:active,
    #fullscreen:active {
        color: rgb(255, 255, 255);
    }
    .image-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .image-box {
        margin: 0;
        max-height: 60vh;
        max-width: 80vh;
    }
    .thumb-box {
        height: 24em;
        margin: 0;
        max-width: 150px;
        min-width: 0;
        align-items: center;
        margin-left: 2em;
    }
    .thumb-box::after {
        width: 100%;
        height: 112.5px;
        transform: translateY(123%);
    }
    .thumb-display {
        width: 100%;
        height: 200%;
        flex-direction: column;
        justify-content: center;
        top: -50%;
    }
    .thumbs {
        width: 100%;
        height: 112.5px;
    }
    .button {
        width: 100%;
        height: 20%;
        position: absolute;
    }
    .title {
        display: block;
        transform: translateX(-3%);
    }
    .description {
        order: 1;
        min-width: 20%;
        margin-right: 23%;
        /* margin-top: -1em; */
    }
    #next {
        transform: translateY(-100%) rotate(-90deg);
    }
    #prev {
        transform: translateY(99%) rotate(-90deg);
    }
    #next::before {
        transform: translate(130%, 50%) rotateZ(180deg);
    }
    #next::after {
        transform: translate(85%, -50%) rotateZ(180deg);
    }
    #prev::before {
        transform: translate(91%, 51%);
    }
    #prev::after {
        transform: translate(136%, -49%);
    }
    @-webkit-keyframes animate {
        0% {
            -webkit-filter: blur(400px);
            filter: blur(400px);
        }
        25% {
            transform: translate(-70%, -40%) scale(1.2);
        }
        50% {
            -webkit-filter: blur(20px);
            filter: blur(20px);
            opacity: 30%;
            transform: translate(-40%, -60%);
        }
        75% {
            transform: translate(-40%, -60%) rotate(180deg);
        }
        100% {
            -webkit-filter: blur(400px);
            filter: blur(400px);
        }
    }
    @keyframes animate {
        0% {
            -webkit-filter: blur(400px);
            filter: blur(400px);
        }
        25% {
            transform: translate(-70%, -40%) scale(1.2);
        }
        50% {
            -webkit-filter: blur(20px);
            filter: blur(20px);
            opacity: 30%;
            transform: translate(-40%, -60%);
        }
        75% {
            transform: translate(-40%, -60%) rotate(180deg);
        }
        100% {
            -webkit-filter: blur(400px);
            filter: blur(400px);
        }
    }
}

@media (min-aspect-ratio: 1/1) and (max-width: 800px) {
    .image-box {
        max-height: 41.35vh;
        max-width: 55vh;
    }

    .title {
        transform: translate(-12%, 50%);
    }
    .description {
        margin-top: -2em;
    }
}
@media only screen and (min-width: 800px) {
    body {
        position: initial;
        background: var(--nextImage) center center no-repeat;
        min-height: 100vh;
        background-size: cover;
    }
    body::after {
        background: var(--currentImage) center center no-repeat;
        background-size: cover;
    }
    .image-box {
        perspective: 700px;
    }
}
@media only screen and (min-aspect-ratio: 1/1) and (min-width: 1020px) {
    .container {
        padding: 4em 2em;
        max-height: 87vh;
        max-width: 75vw;
    }
}
@media only screen and (min-aspect-ratio: 1/1) and (max-height: 500px) and (orientation: landscape) {
    /* rotated phone until 600px */
    .container {
        flex-direction: row;
        padding: 4em;
    }
    header {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }
    .fullscreen {
        position: absolute;
        top: 0;
        right: 0;
    }
    .title {
        transform: translate(-12%, -27%);
    }
    .thumb-box {
        display: none;
    }
    .description {
        margin-right: 0%;
        margin-top: 1em;
    }
}