body, html {
    margin: 0px;
    padding: 0px;
    background-color: #00ccff;
    font-family: 'Arial Rounded Bold';
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 
}

#frame,
#preloader,
#blackScreen,
#ui {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

#preloader, #blackScreen {
    background-color: #00ccff;
    background-image: url("../common/assets/backgrounds/loading-screen-bg.png");
    background-size: cover;
    z-index: 999999999;
    transition: opacity 0.5s;
}

#blackScreen {
    background-color: #000
}

.preloader-popup-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.preloader-popup-frame {
    width: 838px;
    min-height: 240px;
    height: auto;
    box-sizing: border-box;
    background: #5899af; /* Old browsers */
    background: -moz-linear-gradient(top,  #5899af 0%, #7eb0c1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #5899af 0%,#7eb0c1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #5899af 0%,#7eb0c1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5899af', endColorstr='#7eb0c1',GradientType=0 ); /* IE6-9 */
    padding: 52px 64px;
    border-radius: 28px;
   
    position: relative;
}

.preloader-popup-frame-bg {
    background-image: url("../common/assets/error-container-glow.png");
    background-size: 100% 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    top: 0px;
    left: 0px;
    opacity: 0.5;
}

.preloader-popup-frame-border {
    border: 8px solid #264294;
    border-radius: 28px;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    top: 0px;
    left: 0px;
}

.preloader-popup-frame-title {
    text-align: center;
    font-size: 44px;
    margin-bottom: 24px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.preloader-popup-frame-trivia {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.preloader-popup-frame-source {
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    z-index: 2;
    bottom: 12px;
    right: 20px;
}

.preloader-popup-loadingbar-container {
    width: 562px;
    height: 52px;
    border-radius: 26px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,bebdbe+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #bebdbe 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#bebdbe 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#bebdbe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bebdbe',GradientType=0 ); /* IE6-9 */
    position: absolute;
    bottom: -90px;
    left: 50%;
    margin-left: -281px;
}

.preloader-popup-loadingbar-inner {
    width: 534px;
    height: 32px;
    border-radius: 16px;
    background: #383737; /* Old browsers */
    background: -moz-linear-gradient(top,  #383737 0%, #545453 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #383737 0%,#545453 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #383737 0%,#545453 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383737', endColorstr='#545453',GradientType=0 ); /* IE6-9 */
    box-sizing: border-box;
    padding: 3px 4px
}

.preloader-popup-loadingbar-fill {
    width: 1%;

    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efe45b+0,f4c351+30,cd833d+100 */
    background: #efe45b; /* Old browsers */
    background: -moz-linear-gradient(top,  #efe45b 0%, #f4c351 30%, #cd833d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #efe45b 0%,#f4c351 30%,#cd833d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #efe45b 0%,#f4c351 30%,#cd833d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efe45b', endColorstr='#cd833d',GradientType=0 ); /* IE6-9 */
    border-radius: 12px;
    border: 1px solid #000;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.preloader-popup-loadingbar-stripes {
    width: 100%;
    height: 100%;
    background-image: url("../common/assets/ui/preloader-stripe.png");
    background-repeat: repeat-x;
    background-size: contain;
    position: absolute;
    top: 0px;
    left: 0px
}

.preloader-popup-tag, .preloader-popup-tag-si {
    width: 200px;
    height: 200px;
    position: absolute;
    top: -220px;
    left: 50%;
    margin-left: -100px;
    background-image: url("../common/assets/backgrounds/loading-bbtag.png");
    background-size: 100% 100%;
}

.preloader-popup-tag-si {
    background-image: url("../common/assets/backgrounds/loading-bbtag-si.png");
}



#debug  {
    pointer-events: none;
}

.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-column {
    display: flex !important;
    flex-direction: column;
}

.flex-row {
    display: flex !important;
    flex-direction: row;
}

.hidden {
    display: none !important;
}

.fadeout {
    opacity: 0 !important;
}

.textsize-one {
    font-size: 56px;
}

.textsize-two {
    font-size: 44px;
}

.textweight-bold {
    font-weight: bold;
}

.textweight-normal {
    font-weight: 400;
}

.textcolor-blue {
    color: #2c3185;
}

.textcolor-red {
    color: #eb4034;
}


.textoutline-white {
    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

@media only screen  and  (max-width: 1080px) and (orientation:portrait) {
    .ui-landscape-only {
        width: 100vh;
        height: 100vw;
        position: fixed;
        transform: rotate(90deg);
        transform-origin: right top;
        width: 100vh;
        overflow-x: hidden;
        top: 100%;
        right: 0;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        z-index: 99999;
        background-image: url(./assets/kv-screen.png);
        background-size: cover;
        background-position: center;
        text-shadow: 0px 0px 4px #fff;
        font-size: 24px;
    }   

    .ui-landscape-only > span {
        position: relative;
        top: 40px;
    }
}

@media only screen  and  (max-width: 1080px) and (orientation:landscape) {
    .ui-landscape-only {
       display: none;
    }   
}

@media only screen  and  (min-width: 1081px){
    .ui-landscape-only {
        display: none;
    }
}

@media only screen and (max-width: 1440px) {
    .textsize-one {
        font-size: 3.889vw;
    }
    
    .textsize-two {
        font-size: 3.056vw;
    }
    
    .preloader-popup-frame {
        width: 58.194vw;
        min-height: 16.667vw;
        padding: 3.611vw 4.444vw;
        border-radius: 1.944vw;
    }
    
    .preloader-popup-frame-bg {
        border-radius: 1.944vw;
    }
    
    .preloader-popup-frame-border {
        border: 0.556vw solid #264294;
        border-radius: 1.944vw;
    }
    
    .preloader-popup-frame-title {
        font-size: 3.056vw;
        margin-bottom: 1.667vw;
    }
    
    .preloader-popup-frame-trivia {
        font-size: 2.222vw;
    }

    .preloader-popup-frame-source {
        font-size: 0.833vw;
        bottom: 0.833vw;
        right: 1.389vw;
    }
    
    .preloader-popup-loadingbar-container {
        width: 39.028vw;
        height: 3.611vw;
        border-radius: 1.806vw;
        bottom: -6.25vw;
        margin-left: -19.514vw;
    }
    
    .preloader-popup-loadingbar-inner {
        width: 37.083vw;
        height: 2.222vw;
        border-radius: 1.111vw;
        padding: 0.208vw 0.278vw
    }
    
    .preloader-popup-loadingbar-fill {
        width: 100%;
        height: 100%;
        border-radius: 0.833vw;
        border: 0.069vw solid #000;
    }
    
    .preloader-popup-loadingbar-stripes {
        width: 100%;
        height: 100%;
    }
    
    .preloader-popup-tag, .preloader-popup-tag-si  {
        width: 13.889vw;
        height: 13.889vw;
        top: -15.278vw;
        left: 50%;
        margin-left: -6.944vw;
    }
}

@media only screen  and  (max-width: 1080px){
    .preloader-popup-frame-title {
        font-size: 2.6vw;
    }
    .preloader-popup-frame-trivia {
        font-size: 1.9vw;
    }

    .preloader-popup-frame {
        min-height: 12vw;
        padding: 3.1vw 3.9vw;
    }

    .preloader-popup-tag, .preloader-popup-tag-si  {
        top: -12vw;
    }
}