/*** © Copyright 2022. All rights reserved. ***/
/*** VERSION: 1.0.1.79 ***/
/*** SHA: cb63d5dbcf955dc8cb128b214d918bdf02ef9971 ***/
/*    position: fixed is used for ios15 to prevent game resizing when scrolling    (ios url bar appears and takes some space on the screen)    @TODO: decouple from titan classes*/
body.titan_osv-ios-15 {
    position: fixed;
}

body.titan-swipe-to-full-screen_overlay-visible,
body.titan_osv-ios-14 {
    position: static;
}

body {
    background: black;
}

div#main {
    font-family: "Ubuntu";
    background-color: rgb(152, 152, 152)
}

.iPhoneInputHack {
    display: none !important;
}

#main,
#main>canvas {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

#main {
    background-color: #000;
    background-size: 100% 100%;
}

#gameCanvas {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 4;
}

#subs {
    position: fixed;
    display: block;
    width: 100vw;
    z-index: 3;
    font-family: "Ubuntu";
    text-align: center;
    font-size: 2.7vmin;
}

.subs_off {
    visibility: hidden;
}

#subs>div {
    display: block;
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    width: 100%;
    bottom: 0%;
}

.subs_bottom {
    bottom: 9.5%;
}

.subs_raised {
    bottom: 54%;
}

.subs_raised_for_welcome {
    bottom: 15%;
}

#subs>div>div {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 3px 13px 5px;
    border-radius: 7px;
    display: inline-block;
    max-width: 50%;
    word-break: break-word;
    color: #fff;
}

.sub_show {
    animation: fadein 0.4s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sub_hide {
    animation: fadeout 0.5s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#fullscreen_swipe {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
}


#backgroundContainer {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(0deg, #FF112E 3.4%, #F04C23 21.99%, #E54721 27.86%, #C83C1E 37.64%, #9A2919 49.38%, #952719 51.34%, #6E1614 72.86%, #38000E 99.27%);
}

#bottomGradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgba(56, 0, 14, 0) 59.31%, rgba(57, 0, 11, 0.19) 63.23%, rgba(59, 0, 5, 0.63) 74.97%, rgba(61, 0, 2, 0.9) 85.73%, #3E0001 93.55%);
}

#sunGradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: radial-gradient(145.76% 58.29% at 48.75% 52.96%, #FFDC00 8%, rgba(255, 17, 46, 0.4) 34%, rgba(255, 17, 46, 0.34) 37%, rgba(255, 17, 46, 0.15) 49%, rgba(255, 17, 46, 0.04) 58%, rgba(255, 17, 46, 0) 63%, rgba(255, 17, 46, 0) 87%);
}

#horizonGradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(180deg, rgba(56, 0, 14, 0) 53.44%, rgba(57, 0, 11, 0.19) 54.42%, rgba(59, 0, 5, 0.63) 56.38%, rgba(61, 0, 2, 0.9) 57.36%, #3E0001 58.34%);
    opacity: 0.57;
}

.background-pattern {
    position: absolute;
    width: 100%;
    height: 25%;
    left: 0px;
    background-size: contain;
    background-position: center;
    opacity: 0.3
}

#bottomPattern {
    bottom: 0px;
}

#topPattern {
    top: 0px;
    transform: rotate(180deg);
}

#videosContainer {
    position: relative;
    height: 100%;
    transform: translateY(-100%);
}

.videosContainer {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}

.videosWrapper {
    position: inherit;
    width: 60%;
    left: 0;
}

.primaryPlayer {
    position: relative;
    width: 100%;
}

.secondaryPlayer {
    position: absolute;
    width: 100%;
}

#videos_cover {
    position: fixed;
    display: block;
    width: 100vw;
    height: 0px;
    background-color: #000;
    z-index: 2;
}

.videoPlayer_Welcome {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: 100vh;
}

.videos.gradient::after {
    opacity: 1;
    background: linear-gradient(90deg,
            rgba(1, 6, 26, 1) 0%,
            rgba(1, 6, 26, 0) 5%,
            rgba(1, 6, 26, 0) 95%,
            rgba(1, 6, 26, 1) 100%);
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

@media (orientation: landscape) {
    .videosWrapper {
        position: absolute;
        bottom: 0;
        width: 60%;
        padding-bottom: 70%;
    }

    #PrimaryVideo,
    #SecondaryVideo {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, transparent);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 85%, transparent);
    }

    .videoPlayer_Welcome {
        width: auto;
        height: 100vh;
        -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent) !important;
        mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, transparent) !important;
    }

    .primaryPlayer {
        position: absolute;
    }

    .secondaryPlayer {
        position: absolute !important;
        transform: translateY(0);
    }

    .background-pattern {
        height: 35%;
    }
}

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

    .videosContainer {
        flex-direction: inherit;
    }

    .videosWrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        transform: scale(1.4);
    }

    #PrimaryVideo,
    #SecondaryVideo {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, transparent);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90%, transparent);
    }
}

@media (orientation: landscape) and (aspect-ratio <= 5 / 3) {
    .videosWrapper {
        bottom: 5%;
        transform: scale(1.2);
    }
}

@media (orientation: landscape) and (aspect-ratio <= 5 / 4) {
    .videosWrapper {
        bottom: 20%;
        transform: scale(1.7);
    }
}

@media (aspect-ratio <= 1 / 1) {
    .videosWrapper {
        bottom: 0%;
    }
}

@media (orientation: portrait) and (aspect-ratio <= 3/4) {
    .videosWrapper {
        top: 20%;
    }
}

@media(max-width:1024px) {
    .blur {
        -webkit-animation: blurSmall 4s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: blurSmall 4s linear;
        -moz-animation-fill-mode: forwards;
    }

    .unblur {
        -webkit-animation: unblurSmall 2.5s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: unblurSmall 2.5s linear;
        -moz-animation-fill-mode: forwards;
    }
}

@media(max-width:400px) {
    .blur {
        animation: blurVerySmall 4s linear;
        animation-fill-mode: forwards;
        -webkit-animation: blurVerySmall 4s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: blurVerySmall 4s linear;
        -moz-animation-fill-mode: forwards;
    }

    .unblur {
        animation: unblurVerySmall 2.5s linear;
        animation-fill-mode: forwards;
        -webkit-animation: unblurVerySmall 2.5s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: unblurVerySmall 2.5s linear;
        -moz-animation-fill-mode: forwards;
    }
}

@media(min-width:1024px) {
    .blur {
        animation: blur 4s linear;
        animation-fill-mode: forwards;
        -webkit-animation: blur 4s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: blur 4s linear;
        -moz-animation-fill-mode: forwards;
    }

    .unblur {
        animation: unblur 2.5s linear;
        animation-fill-mode: forwards;
        -webkit-animation: unblur 2.5s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation: unblur 2.5s linear;
        -moz-animation-fill-mode: forwards;
    }
}

@keyframes blur {

    0%,
    1% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }

    90%,
    100% {
        filter: blur(12px) grayscale(0.2);
        -webkit-filter: blur(12px) grayscale(0.2);
        -moz-filter: blur(12px) grayscale(0.2);
        -o-filter: blur(12px) grayscale(0.2);
        -ms-filter: blur(12px) grayscale(0.2);
    }
}

@keyframes unblur {

    0%,
    1% {
        filter: blur(12px) grayscale(0.2);
        -webkit-filter: blur(12px) grayscale(0.2);
        -moz-filter: blur(12px) grayscale(0.2);
        -o-filter: blur(12px) grayscale(0.2);
        -ms-filter: blur(12px) grayscale(0.2);
    }

    90%,
    100% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }
}

@keyframes blurSmall {

    0%,
    1% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }

    90%,
    100% {
        filter: blur(6px) grayscale(0.2);
        -webkit-filter: blur(6px) grayscale(0.2);
        -moz-filter: blur(6px) grayscale(0.2);
        -o-filter: blur(6px) grayscale(0.2);
        -ms-filter: blur(6px) grayscale(0.2);
    }
}

@keyframes unblurSmall {

    0%,
    1% {
        filter: blur(6px) grayscale(0.2);
        -webkit-filter: blur(6px) grayscale(0.2);
        -moz-filter: blur(6px) grayscale(0.2);
        -o-filter: blur(6px) grayscale(0.2);
        -ms-filter: blur(6px) grayscale(0.2);
    }

    90%,
    100% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }
}

@keyframes blurVerySmall {

    0%,
    1% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }

    90%,
    100% {
        filter: blur(3px) grayscale(0.2);
        -webkit-filter: blur(3px) grayscale(0.2);
        -moz-filter: blur(3px) grayscale(0.2);
        -o-filter: blur(3px) grayscale(0.2);
        -ms-filter: blur(3px) grayscale(0.2);
    }
}

@keyframes unblurVerySmall {

    0%,
    1% {
        filter: blur(3px) grayscale(0.2);
        -webkit-filter: blur(3px) grayscale(0.2);
        -moz-filter: blur(3px) grayscale(0.2);
        -o-filter: blur(3px) grayscale(0.2);
        -ms-filter: blur(3px) grayscale(0.2);
    }

    90%,
    100% {
        filter: blur(0px) grayscale(0);
        -webkit-filter: blur(0px) grayscale(0);
        -moz-filter: blur(0px) grayscale(0);
        -o-filter: blur(0px) grayscale(0);
        -ms-filter: blur(0px) grayscale(0);
    }
}