:root{
    --default-font-size: 21px;
}
body{
    background-color: #000;
}
.blurry{
    filter:blur(20px)
}
html
{
    height: 100%;
    overflow: hidden;
}
.jumbotron{
    color:#fff;
    background-image:url(../img/background01.jpg);
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-color:#23073e;
    margin-bottom:0;
    height:100vh;
}



#content {/*container for the game swf*/
    background:#000;
	height: 100%;
	position: absolute;
}
@font-face{
    font-family:BadaBoo3ProBB;
    src:url(../font/BadaBoo3ProBB.eot);
    src:url(../font/BadaBoo3ProBB.eot?#iefix) format('embedded-opentype'),
        url(../font/BadaBoo3ProBB.woff) format('woff'),
        url(../font/BadaBoo3ProBB.TTF) format('truetype'),
        url(../font/BadaBoo3ProBB.svg#svgFontName) format('svg');
}
@font-face {
    font-family:blue_highway;
    src: url(../font/bluehigh-webfont.eot);
    src: url(../font/bluehigh-webfont.eot?#iefix) format('embedded-opentype'),
         url(../font/bluehigh-webfont.woff2) format('woff2'),
         url(../font/bluehigh-webfont.woff) format('woff'),
         url(../font/bluehigh-webfont.ttf) format('truetype'),
         url(../font/bluehigh-webfont.svg#blue_highwayregular) format('svg');
    font-weight: normal;
    font-style: normal;
}
#gameContainer{
    background:#000;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    visibility: hidden;
  
}
.center_content{
    text-align:center
}
#gameLogo img{
    width:40vh
}
#right_side_image
{
    position: absolute; 
    right:0; 
    bottom:0; 
    height:100%; 
    max-height:773px; 
    z-index: 3
}
.mspFont{
    font-family:BadaBoo3ProBB
}
.navbar-msp{
    background-color:rgba(20,151,162,.4)
}
.navbar-msp a{
    font-size:.8em;
    color:#fff;
    padding-left:10px;
    font-family:Verdana,Geneva,sans-serif;
    font-size:14px
}
.navbar-msp a:hover{
    color:#fff!important;
    text-decoration:underline
}
.col-centered{
    float:none;
    margin-left:auto;
    margin-right:auto
}
#actionBtns{
    list-style:none;
    padding-inline-start:0
}
#actionBtns li{
    display:block;
    min-width: 420px;
    padding-bottom: 5px;
}
.unselectable{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.hover{
    color:#fff!important
}
#play_now_button{
    pointer-events:none;
}
#play_now_li{
    /* margin-bottom: 50px; */
}
.btn{
    white-space:nowrap;
    margin:auto;
    display:inline-block
}
.btn_yellow{
    background-color:rgb(241, 214, 0);
    padding: 6px 20px;
}
.btn_yellow:hover{
    background-color: rgb(231, 194, 0);
}
.btn_yellow.hover{
    color:#212529!important;
    background-color: rgb(231, 194, 0);
}
.scaling_font_big{
    font-size:calc(35px + 1.2vw);
    padding: 0px .75rem;
    font-family:BadaBoo3ProBB;
}
.scaling_font_medium{
    font-size:calc(17px + 1.1vw);
    padding: 0px .75rem;
    font-family:BadaBoo3ProBB;
}
.big_font{
    font-size:35px;
    padding: 0px;
    font-family:BadaBoo3ProBB;
}
.text_font{
    font-family: blue_highway;
    font-weight: 120;
    font-size: 20px;
    line-height: 1;
}
.btn_msp_big{
    min-width: 66%; 
    line-height: 1.1;
    border:15px solid;
    color:#fff;
    -webkit-filter:brightness(100%);
    webkit-transition:all .25s ease;
    -moz-transition:all .25s ease;
    -o-transition:all .25s ease;
    -ms-transition:all .25s ease;
    transition:all .25s ease;
}
#play_now_button{
    min-width:420px;
}
#download_now_button{
    min-width:300px;
}
.btn_msp_medium{
    line-height: 1;
    min-width:200px;
    border:20px solid;
    color:#fff;
    -webkit-filter:brightness(100%);
    webkit-transition:all .25s ease;
    -moz-transition:all .25s ease;
    -o-transition:all .25s ease;
    -ms-transition:all .25s ease;
    transition:all .25s ease;
}
.btn_blue{
    border-image:url(../img/btn_blue.png) 32% round stretch;
    -moz-border-image:url(../img/btn_blue.png) 32% round stretch;
    -webkit-border-image:url(../img/btn_blue.png) 32% round stretch;
    -o-border-image:url(../img/btn_blue.png) 32% round stretch;
    border-image-slice:25 fill;
}
.btn_pink{
    border-image:url(../img/btn_green.png) 30% round stretch;
    -moz-border-image:url(../img/btn_green.png) 30% round stretch;
    -webkit-border-image:url(../img/btn_green.png) 30% round stretch;
    -o-border-image:url(../img/btn_green.png) 30% round stretch;
    border-image-slice:25 fill;
}
.btn_msp_close{
    background-image:url(../img/btn_red.png);
    position:absolute;
    right:-70px;
    top:-4px;
    width:62px;
    height:62px;
    -webkit-filter:brightness(100%);
    webkit-transition:all .25s ease;
    -moz-transition:all .25s ease;
    -o-transition:all .25s ease;
    -ms-transition:all .25s ease;
    transition:all .25s ease;
    border:0 solid transparent
}
.btn.hover{
    -webkit-filter:brightness(105%)!important;
    webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease
} 
.btn:hover{
    -webkit-filter:brightness(105%)!important;
    webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease
}
.btn_msp_big:hover{
     color:#fff;
}
.btn_msp_medium:hover{
    color:#fff;
}
.guide_content{
    top:50%;
    left:50%;
    position:absolute;
    transform:translate(-50%,-50%)
}
.guide_container{
    z-index:1000;
    background:rgba(0,0,0,.7);
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0
}
.guide_close_icon{
    position:absolute;
    width:40px;
    height:40px;
    right:11px;
    top:10px
}
#unblock_flash_help{
    background-color: #fff;
    box-shadow: 1px 1px 20px #555;
    height: 92px;
    vertical-align: middle;
    width: 295px;
    position: absolute;
    top: 2px;
    border-radius: 8px;
    padding: 5px 30px;
    text-align: center;
    z-index: 10000;
}
#unblock_flash_help p{
   margin-bottom: 5px; 
}
#enable_flash_guide_content{
    background-color: #fff;
    box-shadow: 10px 10px 60px #555;
    display: inline-block;
    height: auto;
    min-height: 100px;
    min-width: 400px;
    vertical-align: middle;
    width: 700px;
    position: relative;
    border-radius: 8px;
    padding: 24px 35px ;
}
#enable_flash_guide_content>ol{
    font-size:30px;
    font-family:BadaBoo3ProBB;
    margin: 20px 0 40px 0;
}
#enable_flash_guide_content>ol>li{
    margin-bottom: 10px;
}
.enable_flash_description{
    display: inline; 
    float:right;
    width: 280px;
    line-height: 1; 
    font-size:27px;
    font-family: blue_highway;
    margin-top: 20px;
}
.container{
    height: 100%;
}
.col-lg-6{
    z-index:4;
}
.spacer{
    min-height: 10px;
    height: 70px;
    /*flex-grow: 1*/
}
#play_now_btn_artwork{
    widows: 85px; 
    height:50px; 
    position: absolute;
    margin-top: -45px;
    margin-left: 160px;
}

@media (min-width:768px){/*on small screens, or devices in portrait mode*/
    .container{
        max-width:100%
    }
}
@media (min-aspect-ratio:16/9)
{
    .jumbotron{
        padding-top: 0;
    }
    .spacer{
        height: 50px;
    }
}
@media (min-aspect-ratio:21/9)
{
    .spacer{
        height: 40px;
    }
}
@media (min-aspect-ratio:24/9)
{
    .spacer{
        height: 20px;
    }
}
@media (min-aspect-ratio:24/7)
{
    .spacer{
        height: 5px;
    }
}
@media(max-width:1360px){
    #store_links_bottom_bar{
        right:10px;
        position:absolute;
        top:-48px
    }
    .spacer{
        height: 30px;
    }
}
@media(max-width:1440px){
    .jumbotron{
        padding-top: 0;
    }
}
@media(max-width:990px){
    #store_links_bottom_bar{
        top:1000px
    }
    #right_side_image{
        visibility:hidden
    }
}
@media(max-width:990px){
    .spacer{
        height: 10px!important;
    }
}

#separator{
    color:#fff!important;
    pointer-events:null;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.text-shadow{
    text-shadow:2px 2px 4px #555
}
.shadowed{
    -webkit-filter:drop-shadow(2px 2px 4px #555);
    filter:drop-shadow(2px 2px 4px #555)
}
#sampleswfHolder{
    width:220px;
    height:80px;
    top:-10px;
    position:absolute;
    left:10px
}
#swfContainer{
    opacity:0;
    position:relative
}
#flashTester{
    width:20px;
    height:20px;
    position:absolute;
    top:-200px
}
.cc_banner-wrapper{
    position:absolute!important;
    z-index:10000!important
}
.cc-bottom{
    bottom:4em!important
}
.cc_container{
    left:auto!important
}
/* ARCADE GAMES */
.hiddenDivs{
    position:absolute;
    background-color:transparent;
    border:0px;
    visibility:hidden
}
#gameFrame{
    left:0;
    top:0
}
/* END OF ARCADE GAMES*/
.bounce{
    -moz-animation:bounce 3s infinite;
    -webkit-animation:bounce 3s infinite;
    animation:bounce 3s infinite
}
@-moz-keyframes bounce{
    0%,100%,20%,50%,80%{
        -moz-transform:translateY(0);
        transform:translateY(0)
    }
    40%{
        -moz-transform:translateY(-30px);
        transform:translateY(-30px)
    }
    60%{
        -moz-transform:translateY(-15px);
        transform:translateY(-15px)
    }
}
@-webkit-keyframes bounce{
    0%,100%,20%,50%,80%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    40%{
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px)
    }
    60%{
        -webkit-transform:translateY(-15px);
        transform:translateY(-15px)
    }
}
@keyframes bounce{
    0%,100%,20%,50%,80%{
        -moz-transform:translateY(0);
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
    40%{
        -moz-transform:translateY(-30px);
        -ms-transform:translateY(-30px);
        -webkit-transform:translateY(-30px);
        transform:translateY(-30px)
    }
    60%{
        -moz-transform:translateY(-15px);
        -ms-transform:translateY(-15px);
        -webkit-transform:translateY(-15px);
        transform:translateY(-15px)
    }
}
