@frameContPortWidth: 75%;
@frameContPortHeight: 75%;
@frameContNarrowPortWidth: 95%;
@frameContNarrowPortHeight: 95%;
@frameContLandHeight: 65%;
@fontColor: #f3c93a;

.splash-screen {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background: url('../assets/splashscreen/loading_splash_screen_3.jpg') center no-repeat;
    background-size: cover;

    .logo {
        position: absolute;
        max-width: 60%;
        max-height: 23%;
        top: 14%;
        left: 50%;
        transform: translate(-50%, -50%);

        @media @portrait {
            top: 12%;

            @media (max-aspect-ratio: 4/7) {
                max-width: 80%;
            }
        }
    }

    .leftArrow {
        position: absolute;
        top: 49%;
        width: 15%;
        height: 15%;
        left: 3%;
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
        background-image: url('../assets/splashscreen/arrow_idle.png');

        @media (max-aspect-ratio: 4/7) {
            top: 75%;
            left: 26%;
        }
    }

    .rightArrow {
        .leftArrow;
        left: 83%;
        transform: rotate(180deg) scaleY(-1);

        @media (max-aspect-ratio: 4/7) {
            left: 60%;
        }
    }

    .portraitContainer {
        position: absolute;
        height: @frameContPortHeight;
        width: 100vw;
        top: 57%;
        transform: translate(12.5%, -50%);

        @media (max-aspect-ratio: 4/7) {
            transform: translate(2.5%, -48%);
            height: @frameContNarrowPortHeight;
            top: 50%;
        }
    }

    .landscapeContainer {
        width: 33%;
        height: @frameContLandHeight;

        top: 27%;
        position: absolute;

        &.side {
            top: 22%;
        }
    }

    .slideWrapper {
        position: relative;
        vertical-align: top;
        height: 100%;

        @media (orientation: portrait) {
            left: 0;
            width: @frameContPortWidth;

            @media (max-aspect-ratio: 4/7) {
                width: @frameContNarrowPortWidth;
            }
        }

        .slideCard {
            display: flex;
            justify-content: center;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            width: 100%;
            height: 100%;

            @media (orientation: portrait) {
                width: 100%;
                height: 100%;
            }

            &.left {
                background-image: url('../assets/splashscreen/board_money_cart_example.png');
            }

            &.middle {
                background-image: url('../assets/splashscreen/board_middle.png');
            }

            &.right {
                background-image: url('../assets/splashscreen/board_re_spin_example.png');
            }

            .descriptionWrapper {
                display: flex;
                justify-content: center;
                margin-top: 38%;
                width: 67%;
                @descFontSize: 4vh;
                font-size: @descFontSize;
                @descLineHightCoef: 1.55;
                line-height: @descFontSize * @descLineHightCoef;
                @middleDescCoef: 1.3;
                word-break: break-word;

                &.middle {
                    margin-top: 0%;
                }

                @media (max-aspect-ratio: 3/4) {
                    @descFontSize: 7vw;
                    font-size: @descFontSize;
                    line-height: @descFontSize * @descLineHightCoef;

                    &.middle {
                        font-size: @descFontSize * @middleDescCoef;
                        line-height: @descFontSize * @descLineHightCoef * @middleDescCoef;
                    }
                }

                @media (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1) {
                    width: 40vh;
                    @descFontSize: 5vh;
                    font-size: @descFontSize;
                    line-height: @descFontSize * @descLineHightCoef;

                    &.middle {
                        font-size: @descFontSize * @middleDescCoef;
                        line-height: @descFontSize * @descLineHightCoef * @middleDescCoef;
                    }
                }

                @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) {
                    @descFontSize: 3vh;
                    font-size: @descFontSize;
                    line-height: @descFontSize * @descLineHightCoef;

                    &.middle {
                        font-size: @descFontSize * @middleDescCoef;
                        line-height: @descFontSize * @descLineHightCoef * @middleDescCoef;
                    }
                }

                @media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 2/1) {
                    width: 33vh;
                    @descFontSize: 4vh;
                    font-size: @descFontSize;
                    line-height: @descFontSize * @descLineHightCoef;

                    &.middle {
                        font-size: @descFontSize * @middleDescCoef;
                        line-height: @descFontSize * @descLineHightCoef * @middleDescCoef;
                    }
                }

                @media (min-aspect-ratio: 2/1) {
                    width: 33vh;

                    &.left {
                        margin-top: 18vh;
                    }

                    &.right {
                        .left;
                    }
                }
            }
        }
    }

    h2 {
        cursor: pointer;
        position: absolute;
        width: 100%;
        bottom: 4vh;
        font-size: 4vmin;
        line-height: 5.5vmin;
        text-align: center;
        font-family: sansculottes, sans-serif;
        font-weight: 100;
        background-size: 33% 100%;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-color: @fontColor;

        background-image: -webkit-linear-gradient(180deg, rgba(187, 187, 187, 0) 40%, #fff8c6, rgba(187, 187, 187, 0) 60%);
        -webkit-background-clip: text;
        color: #fff8c6;
        -webkit-text-fill-color: transparent;
        text-transform: uppercase;
        letter-spacing: 1px;

        @media all and (-ms-high-contrast: none),
        (-ms-high-contrast: active) {
            background: none;
            color: #cccccc;
        }

        animation: continueShimmer 2s linear infinite alternate;

        @media (max-aspect-ratio: 7/10) {
            bottom: 8vmin;
            font-size: 6vmin;
            line-height: 8vmin;
        }

        @media (min-aspect-ratio: 7/10) and (max-aspect-ratio: 1/1) {
            bottom: 6vmin;
        }

        @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 14/10) {
            bottom: 8vmin;
            line-height: 10vmin;
        }
    }

    h3 {
        position: relative;
        font-family: sansculottes, sans-serif;
        font-weight: 100;
        text-align: center;
        color: @fontColor;
        z-index: 1;

        text-shadow:
            0px 0px 1.5vh #111,
            0px 0px 1.5vh #111,
            0px 0px 1.5vh #111,
            0px 0px 1.5vh #111;

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
}

@keyframes continueShimmer {
    to {
        background-position: 100% 0;
    }
}