:root {
    --top-margin: 10vh;
    --side-margin: 0vw;
    --image-height: calc(100vh - 2 * var(--top-margin));
    --image-width: calc(2 * var(--image-height));
    --bottom-shadow: linear-gradient(180deg, rgba(0, 0, 0, 0.1), hsla(0, 0%, 100%, 0));;
    --high-z-index: 100;
    --primary-font-color: #406280;
    --secondary-font-color: #333;
    --overlay-color: rgba(0,54,96, 0.5);
    --grey: #F1F1F1;

    --section-padding: 1.9vh;
}


.header--wrapper .header {
    background-color: var(--grey);
}

.shadow {
    width: var(--image-height)!important;
}

.slide-wrapper {
    background-color: var(--grey);
}

/* Carousel slide content */

.carousel-item {
    display: flex;
    flex-direction: column;
}

.carousel-item .section {
    margin-top: var(--top-margin);
    margin-bottom: var(--top-margin);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    height: var(--image-height);
    width: var(--image-height);
    padding: 0;
    background-color: white;
    padding: var(--section-padding);
    box-sizing: border-box;
    position: relative;
}


.carousel-item .section.no-bg {
    background-color: transparent;
}

.mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 2vh;
}

.mosaic .mosaic-overlay {
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    padding: 2vh;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
}

.mosaic .mosaic-overlay .inside-shadow {
    position: absolute;
    top: 2vh;
    bottom: 2vh;
    left: 2vh;
    right: 2vh;
}

.mosaic .mosaic-overlay img {
    height: 100%;
}

.mosaic .mosaic-overlay .next, .mosaic .mosaic-overlay .previous {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    height: calc((100% - 4vh) / 5 * 3);
    width: calc((100% - 4vh) / 5);
    display: flex;
    align-items: center;
}

.mosaic .mosaic-overlay .next:hover, .mosaic .mosaic-overlay .previous:hover {
    cursor: pointer;
}

 .mosaic .mosaic-overlay .previous {
     left: 2vh;
     justify-content: flex-start;
 }

.mosaic .mosaic-overlay .next {
    right: 2vh;
    justify-content: flex-end;
}

.mosaic .mosaic-overlay .previous img, .mosaic .mosaic-overlay .next img {
    height: 2.5vh;
    padding: 2vh;
    transition: all 0.1s ease-in;
}

.mosaic .mosaic-overlay .next img {
    transform: rotate(180deg);
}

.mosaic .mosaic-overlay .next:hover img {
    transform: scale(1.4)rotate(180deg);
}

.mosaic .mosaic-overlay .previous:hover img {
    transform: scale(1.4);
}

.mosaic .mosaic-overlay .frame-number {
    position: absolute;
    bottom: 4vh;
    left: 4vh;
    font-family: ttnorms-light;
    padding: 0;
    font-size: 3vh;
}

#mosaic-negative .mosaic-overlay .frame-number {
    color: var(--primary-font-color);
}

.mosaic .mosaic-overlay .close {
    position: absolute;
    top: 2vh;
    right: 2vh;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    height: calc((100% - 4vh) / 5);
    width: calc((100% - 4vh) / 5);
}

.mosaic .mosaic-overlay .close:hover {
    cursor: pointer;
}

.mosaic .mosaic-overlay .close img {
    height: 2vh;
    padding: 2vh;
    transition: all 0.1s ease-in;
}

.mosaic .mosaic-overlay .close:hover img {
    transform: scale(1.4);
}

.mosaic-item {
    width: 100%;
    height:100%;
    position: relative;
    cursor: pointer;
}

.mosaic-item img {
    width: 100%;
}

.mosaic-item .subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--primary-font-color);
    font-size: 1.4vh;

    min-height: 2vh;
    display: flex;
    align-items: center;
}

.mosaic .mosaic-item .mosaic-item-overlay {
    opacity: 0;
    background: rgba(0,54,96, 0.15);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: opacity 0.1s ease-in;
    position: absolute;
    pointer-events: visible;
}

.mosaic .mosaic-item .mosaic-item-overlay:hover {
    opacity: 1;
}

#mosaic-positive .mosaic-item .mosaic-item-overlay {
    background: rgba(255, 255, 255, 0.3);
}

.mosaic-item .mosaic-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
}

.section .loop-placeholder {
    height: 100%;
}

.section .description {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--top-margin));
    display: flex;
    height: var(--top-margin);
    color: var(--primary-font-color);
    font-family: TTNorms-medium;
    justify-content: space-between;
    font-size: 2vh;
}

.section .description div {
    display: flex;
    align-items: center;
    width: calc(var(--image-height) / 3);
}

.section .description div:last-child {
    display: flex;
    align-items: center;
    width: calc(var(--image-height) / 3);
    justify-content: flex-end;
}

.section .description .name {
    font-family: darkline;
    font-size: 4vh;
    justify-content: center;
}

.section .frame-name, .section .frame-number {
    position: absolute;
    font-family: darkline;
    color: white;
    padding-left: 3vh;
    padding-right: 3vh;
    bottom: 2%;
    font-size: 5vh;
}

.section .frame-number {
    right: 2%;
}

.section .frame-name.blue, .section .frame-number.blue {
    color: var(--primary-font-color);
}

.carousel-control-prev, .carousel-control-next {
    position: fixed;
    top: 50vh;
    transform: translateY(-50%);
}

.carousel-control-prev {
    left: calc(50% - var(--image-height) / 2 - 10vh)
}

.carousel-control-next {
    right: calc(50% - var(--image-height) / 2 - 10vh)
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 3vh;
}
.carousel-control-next-icon {
    transform: rotate(180deg);
}

#footer-shadow-left, #footer-shadow-right {
    position: absolute;
    bottom: 89vh;
    height: 1vh;
    z-index: 100000000;
    opacity: 1;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), hsla(0, 0%, 100%, 0));
}

#footer-shadow-left {
    left: 0vh;
    right: calc(100vw - (100vw - 80vh) / 2 - 1px);
}

#footer-shadow-right {
    right: 0vh;
    left: calc(100vw - (100vw - 80vh) / 2);
}

.video-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: var(--section-padding);
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}


/* START to refactor with main.css */
.section .eye-button {
    right: 50%;
}

.section .form-slide {
    color: var(--primary-font-color);
    flex-direction: column;
    height: 100%;
}
.section .form-slide .block {
    display: flex;
    flex-direction: column;
}

.section .form-slide h1 {
    text-align: center;
    margin: 0;
}

.section .form-slide p {
    font-family: ttnorms-extralight;
}

.section .form-slide p em {
    font-family: ttnorms-regular;
    font-style: normal;
}

.section.light-bg {
    background-color: rgba(255, 255, 255, 0);
}

.display-none {
    display: none!important;
}
/* END to refactor */

@media (max-width: 100vh) {
    .carousel-control-next {
        right: 0;
    }
    .carousel-control-prev {
        left: 0;
    }
}

@media (max-width: 80vh) {
    .carousel-item .section.light-bg {
        background-color: rgba(255, 255, 255, 0);
    }

    .carousel-item {
        width: 100vw;
        align-items: center;
    }
    .carousel-item .section {
        --section-width: 85vw;
        width: var(--section-width);
        margin-top: calc((100vh - var(--section-width)) / 2);
        height: var(--section-width);
        background: white;
    }
    .section .frame-name, .section .frame-number {
	      bottom: 3%;
	      font-size: 5vw;
        padding-left: 2vh;
    }
    .section .description .name {
	      font-size: 6vw;
    }
    .section .description {
	      font-size: 2.8vw;
    }
    .mosaic {
	      grid-gap: 1vh;
    }
    .mosaic-item .subtitle {
        font-size: 1.3vw;
        min-height: 1.9vw;
    }

    .mosaic .mosaic-overlay .frame-number {
        font-size: 3vw;
    }

}