:root {
    --vh: 1vh;
    --box-count: 6;
    --box-tag-width: 10vw;
    --content-width: calc(100vw - (var(--box-count) - 1) * var(--box-tag-width));
    --content-padding-top: calc(var(--vh) * 5);
    --content-padding-left: calc(var(--vh) * 3);
    --content-padding: var(--content-padding-top) var(--content-padding-left) 0 var(--content-padding-left);
    --transition-delay: .0s
}

* {
    box-sizing: border-box;
    user-select: none
}

body,
html {
    width: 100%;
    height: calc(var(--vh) * 100);
    font-family: Barlow, serif;
    background: #062d3e;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    position: fixed
}

#slider {
    display: flex;
    align-content: flex-start;
    width: 100%;
    height: 100%;
    overflow: hidden
}

@keyframes loading {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.slide {
    height: 100%;
    width: var(--content-width);
    position: absolute;
    transition: transform var(--transition-delay) ease-in-out;
    transform: translate3d(0, 0, 0)
}

.slide.active .tag {
    transform: translateX(calc(-1 * var(--box-tag-width))) translate3d(0, 0, 0);
    pointer-events: none
}

.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.tag {
    width: calc(var(--box-tag-width) + 1px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: left var(--transition-delay) ease-in-out, transform var(--transition-delay) ease-in-out;
    transform: translate3d(0, 0, 0);
    background: #2d779f;
    background: linear-gradient(117deg, #2d779f 0, #062d3e 100%);
    cursor: pointer
}

.slide::after {
    display: block;
    position: absolute;
    content: '';
    height: calc(var(--vh) * 150);
    width: 100%;
    top: calc(var(--vh) * -25);
    left: 0;
    box-shadow: inset 9px 0 5px -3px rgba(0, 0, 0, .6);
    pointer-events: none
}

.slide:nth-child(2)::after {
    box-shadow: none
}

.tag-title {
    transform: rotate(270deg);
    transform-origin: 0 0;
    top: 93%;
    position: absolute;
    font-size: calc(var(--box-tag-width) * .65);
    font-weight: 700;
    color: rgba(255, 255, 255, .22);
    white-space: nowrap
}

.tag.logo .tag-title .tag-text {
    margin-left: calc(var(--box-tag-width) * .6);
    display: block;
    padding-top: calc(var(--box-tag-width) * .3);
}

.tag-logo {
    height: calc(var(--box-tag-width) * .45);
    opacity: .3;
    transition: opacity .2s;
    position: absolute;
    top: calc(var(--box-tag-width) * .34);
    transform: rotate(90deg)
}

.tag-title:hover .tag-logo {
    opacity: .4
}

/* .slide.invest,
.slide.invest .tag {
    background: #2d779f;
    background: linear-gradient(117deg, #2d779f 0, #062d3e 100%)
}

.slide.reward,
.slide.reward .tag {
    background: #006694;
    background: linear-gradient(110deg, #006694 0, #132a3e 100%)
}

.slide.venture,
.slide.venture .tag {
    background: #2a81b8;
    background: linear-gradient(110deg, #2a81b8 0, #1e4b6c 100%)
}

.slide.support,
.slide.support .tag {
    background: #3ea3dc;
    background: linear-gradient(110deg, #3ea3dc 0, #005d7e 100%)
} */
.slide,
.slide .tag {
    background: #011c3a;
    background: linear-gradient(117deg, #011c3a 0, #00315a 100%)
}

.content {
    width: var(--content-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--content-padding)
}

.content .top {
    height: calc(var(--vh) * 9);
    min-height: calc(var(--vh) * 9);
    display: flex;
    align-items: center
}

.content .top img.logo {
    height: calc(9 * var(--vh) - 1px);
    /* width: calc(9 * var(--vh) - 1px);
    border-radius: 50%; */
    margin-right: 2vw;
    flex-shrink: 0
}

.content .top .social {
    height: 100%;
    display: flex;
    align-items: center
}

.content .top .social a {
    height: 90%;
    /* border: calc(var(--vh) * .3) solid #fff; */
    border-radius: 100%;
    margin-right: 1vw
}

.content .top .social img {
    height: 100%;
    display: block;
    padding: calc(var(--vh) * 1)
}

.content .middle-content {
    padding-bottom: calc(var(--vh) * 5);
    padding-left: 7vw
}

.content .middle-content .title {
    line-height: .8;
    font-size: calc(var(--vh) * 13);
    margin-bottom: calc(var(--vh) * 1.5);
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
    text-shadow: calc(var(--vh) * .3) calc(var(--vh) * .3) rgba(6, 45, 62, .5)
}

.content .middle-content .subtitle {
    font-size: calc(var(--vh) * 4.35);

    font-weight: 500;
    color: rgba(255, 255, 255, .75);
    text-shadow: calc(var(--vh) * .15) calc(var(--vh) * .15) rgba(6, 45, 62, .3);
    padding: calc(var(--vh) * 4) 0
}

.content .middle-content .subtitle div {
    margin-bottom: calc(var(--vh) * 1.3);
    line-height: .9;
}

.content .middle-content .subtitle div:last-child {
    font-size: calc(var(--vh) * 3.39);
    font-weight: 300;
    color: rgba(255, 255, 255, .7)
}

.content .middle-content .platform a {
    font-size: calc(var(--vh) * 3);
    height: calc(var(--vh) * 3.39);
    font-weight: 300;
    color: rgba(255, 255, 255, .99);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: .71rem 1rem;
    box-sizing: content-box;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .7)
}

.content .middle-content .platform a>.external-link {
    display: inline-block;
    height: calc(var(--vh) * 2.2);
    width: calc(var(--vh) * 2.2);
    margin-right: .5rem;
    background-image: url("https://turkmahall.com/public/images/external-link.svg");
    background-repeat: no-repeat
}

.content .bottom {
    display: flex;
    justify-content: start;
    align-items: center;
    margin: calc(var(--vh) * 2) 0;
    padding: 0 7vw;
    color: #94aeba;
    position: relative;
    font-size: 1vmax
}

/* .content .bottom .right-box {
    position: absolute;
    width: 2.2vw;
    height: calc(100% + 2 * var(--vh));
    left: calc(100% - 7vw);
    top: 0;
    background: #c01f3d;
    opacity: .8
} */

.wave {
    pointer-events: none;
    position: absolute;
    width: calc(var(--content-width) + var(--content-padding-left));
    height: calc(var(--vh) * 50);
    bottom: 0;
    left: calc(-1 * var(--content-padding-left));
    background-image: url("https://turkmahall.com/public/images/wave.svg");
    background-repeat: no-repeat;
    background-size: 130%;
    filter: invert(17%) sepia(97%) saturate(2604%) hue-rotate(182deg) brightness(70%) contrast(85%);
    transform: scaleX(-1) translateZ(0);
    z-index: -1
}

/* .wave.reward {
    background-position-x: 75%;
    filter: invert(17%) sepia(97%) saturate(2604%) hue-rotate(182deg) brightness(55%) contrast(85%)
}

.wave.venture {
    background-position: 8% 16%;
    filter: invert(17%) sepia(97%) saturate(2604%) hue-rotate(182deg) brightness(90%) contrast(85%);
    background-size: 170%
}

.wave.support {
    background-position: 61% 23%;
    filter: invert(17%) sepia(97%) saturate(2604%) hue-rotate(182deg) brightness(100%) contrast(95%);
    background-size: 170%
} */

@media all and (orientation:portrait) {


    :root {
        --box-tag-width: calc(var(--vh) * 13);
        --content-width: 100%;
        --content-height: calc(var(--vh) * 100 - (var(--box-count) - 1) * var(--box-tag-width));
        --content-padding-top: calc(var(--vh) * 1);
        --content-padding-left: calc(var(--vh) * 1);
        --content-padding: var(--content-padding-top) var(--content-padding-left) var(--content-padding-top) var(--content-padding-left)
    }

    .content .top {
        padding: 0;
    }

    #slider {
        flex-wrap: wrap
    }

    .tag {
        width: 100%;
        height: calc(var(--box-tag-width) + 1px)
    }

    .tag-title {
        transform: none;
        transform-origin: 0 0;
        top: 0;
        position: absolute;
        font-size: calc(var(--box-tag-width) * .6);
        font-weight: 700;
        color: rgba(255, 255, 255, .22);
        left: 9%
    }

    .slide {
        width: 100%;
        height: var(--content-height)
    }

    .slide::after {
        box-shadow: none
    }

    .slide:nth-child(2)::after {
        box-shadow: none
    }

    .slide:nth-child(2)::before {
        box-shadow: none
    }

    .slide::before {
        display: block;
        position: absolute;
        content: '';
        height: 100%;
        width: 150vw;
        top: 0;
        left: -25vw;
        box-shadow: inset 0 7px 6px -3px rgba(0, 0, 0, .6);
        pointer-events: none;
        z-index: 1
    }





    .tag-logo {
        transform: rotate(0)
    }

    .slide.active .tag {
        transform: translateY(-100%)
    }

    .content .middle-content {
        padding: 0 0 5vmin
    }

    .content .middle-content .subtitle {
        padding: calc(var(--vh) * 1) 0;
        font-size: calc(var(--vh) * 3);
        line-height: 1;
    }

    .content .middle-content .subtitle div {
        margin-bottom: calc(var(--vh) * .5);
    }

    .content .middle-content .subtitle div:last-child {
        font-size: calc(var(--vh) * 2.7);
    }

    .content .middle-content .platform a {
        font-size: calc(var(--vh) * 2.5);
        height: calc(var(--vh) * 2.7);
        margin-top: calc(var(--vh) * .5);
    ;
    }

    .content .bottom {
        display: none;
        justify-content: center;
        align-items: center;
        margin: calc(var(--vh) * 2) 0;
        padding: 0 var(--content-padding-left) 0 0;
        padding-right: 200px;
        color: #94aeba;
        position: relative;
        font-size: 1.5vmax
    }

    /* .content .bottom .right-box {
        position: absolute;
        width: 2.2vw;
        height: calc(100% + 2 * var(--vh));
        left: calc(100% - 7vw);
        top: 0;
        background: #c01f3d;
        opacity: .8
    } */

    .content .top {
        justify-content: space-between
    }

    .content .top .social a {
        height: 65%;
        margin-right: .1vw
    }

    .content .middle-content .title {
        /* font-size: 23vmin */
        font-size: 11vmin;
        line-height: .5;
    }
}

@media all and (max-width:960px) and (orientation:landscape) {
    .content .middle-content .title {
        font-size: calc(var(--vh) * 15)
    }

    .content .middle-content .subtitle {
        font-size: calc(var(--vh) * 4.7)
    }

    .content .middle-content .subtitle div:last-child {
        font-size: calc(var(--vh) * 6, .78)
    }

    .content .bottom {
        font-size: 1.5vmax
    }

    .content .top {
        justify-content: space-between
    }
}

@media (pointer:coarse) {
    .wave {
        display: none
    }
}