@font-face{ 
    font-family: "MontserratBold"; 
    src: local('☺'), url('../media/fonts/MontserratBold.woff') format('woff');
    font-style:normal;
}
@font-face{ 
    font-family: "MontserratRegular"; 
    src: local('☺'), url('../media/fonts/MontserratRegular.woff') format('woff');
    font-style:normal;
}
@font-face{ 
    font-family: "Bowlby One SC"; 
    src: local('☺'), url('../media/fonts/BowlbyOneSC-Regular.woff') format('woff');
    font-style:normal;
}

html, body {
    position: absolute;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color: #0b111d;
    overflow: hidden;
    -ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none; 
    -webkit-user-callout: none;
    -ms-touch-action: manipulation !important;
   
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-image: url('../media/front/title_background.jpg');
}


.loader_dummy{
    position: absolute;
    display: block;
    width: 0px;
    height: 0px;
    top: 0px;
    left: 0px;
    overflow: hidden;
    visibility: hidden;
}

a, a:visited, a:hover, a:active, a:focus {
    color: inherit;
    outline: 0;
}



img {
    display: inline-block;
   	background: transparent;
    backface-visibility: hidden;
}

canvas{
    backface-visibility: hidden;
}

div {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
    backface-visibility: hidden;
}


.clear {
	clear: both;
}

.generic_absolute{
    position: absolute;
    display: block;
}

.generic_relative{
    position: relative;
    display: inline-block;
}

.generic_block{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*==========================*/
/* wrapper */
/*==========================*/


#debug{
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 0px;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(255,0,0,0.5);
    color: #ffffff;
    pointer-events: none;
    font-size: 10px;
    font-family: "Arial";
    z-index: 1000;
}

#div_errors{
    position: absolute;
    display: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica;
    color: white;
    z-index: 200;
    background-color: #0b111d;
}

#div_loading{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 100;
    background-color: #0b111d;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
}


#div_pause{
    position: absolute;
    display: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    text-align: center;
    background-color: rgba(0,38,65,.66);
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
}

#div_screens {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    overflow: hidden;
    text-align: center;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
    pointer-events: auto;
}

#canvas_game{
    position: absolute;
    display: none;
    left: 0px;
    top: 0px;
}

#div_legal{
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    right:0px;
    /*width: 100%;*/
    z-index: 100;
    overflow: visible;
    background-color: #0b111d;
    touch-action: none;
    font-size: 20px;
    -webkit-overflow-scrolling: none;
    -webkit-text-size-adjust: 100%;
    -ms-transform-origin: 0% 0%; /* IE 9 */
    -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
    transform-origin: 0% 0%;
}

#div_controls{
    position: absolute;
    display: block;
    top:0px;
    right:0px;
	text-align: right;
    width: 74px;/*222px;/*74px;*/
    padding-top: 5px;
    padding-right: 5px;
    -ms-transform-origin: top right; /* 100% 0%; IE 9 */
    -webkit-transform-origin: top right; /* 100% 0%; Chrome, Safari, Opera */
    transform-origin: top right;
    pointer-events: none;
}



/*==========================*/
/* title screen */
/*==========================*/

.film_logo_block{
    position: absolute;
    display: block;
	width:183px;
    top: 20px;
    left: 0px;
    text-align: center;
    pointer-events: none;
    color: #fcc884;
    font-size: 14px;
    font-family: "MontserratBold";
}

.film_logo_date{
  color: rgb(255, 255, 255, 0);
    font-size: 15px;
    font-family: "MontserratBold";
}

.film_logo_img{
	width:183px;
    height: 180px;
    width: auto;
}

.film_logo_img2{
	width:183px;
    height: 180px;
    width: auto;
}

.game_logo_shadow {
    position: absolute;
    display: block;
  font-size: 48px;
	font-family:"Bowlby One SC";
  color:rgba(2, 2, 2, 0.66);
  background-clip: text;
  line-height: 50px;
  text-align: center;
  /*text-shadow: 8px 14px 2px rgba(2, 2, 2, 0.66);*/
  left: 684px;
  /*top: 222px;*/
  width: 700px;
  height: 136px;
    white-space: nowrap;
    pointer-events: none;
}

.game_logo {
    position: absolute;
    display: block;
  font-size: 48px;
	font-family:"Bowlby One SC";
	
	background-image: url('../media/front/GameLogoBackground.jpg');
	background-size: 100% 98%;
	background-repeat: no-repeat;
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  line-height: 50px;
  text-align: center;
  /*text-shadow: 8px 14px 2px rgba(2, 2, 2, 0.66);*/
  left: 684px;
  /*top: 222px;*/
  width: 700px;
  height: 136px;
    white-space: nowrap;
    pointer-events: none;
}
.game_logo_ie {
    position: absolute;
    display: block;
  font-size: 48px;
	font-family:"Bowlby One SC";	
  color: #fff3d6;
  line-height: 50px;
  text-align: center;
  /*text-shadow: 8px 14px 2px rgba(2, 2, 2, 0.66);*/
  left: 684px;
  /*top: 222px;*/
  width: 700px;
  height: 136px;
    white-space: nowrap;
    pointer-events: none;
}

.character_title{
    position: absolute;
    display: block;
    width: 597px;/*299px;*/
    height: 849px;/*323px;*/
    bottom: -203px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/front/Recap_MC.png');
	transform-origin: right;
}
.character_title2{
    position: absolute;
    display: block;
    width: 807px;
    height: 343px;
    bottom: 0px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/front/SparkleTitle.png');
	transform-origin: middle;
}


.b_main{
    z-index: 1;
    position: absolute;
    display: block;
  left: 0px;
  top: 38px;
  width: 116px;
  height: 154px;
    font-size: 35px;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    white-space: nowrap;
    padding-left: 35px;
    padding-right: 25px;
    border-radius: 0px 25px 25px 0px;
    font-family: "Bowlby One SC";
  background-image: url("../media/front/MainButton.png");
    cursor: pointer;

    -webkit-transition: left 0.25s; /* Safari */
    transition: left 0.25s;
}

/*inner panel*/
.b_main::before{
    z-index: -1;
    content: '';
    position: absolute;
    display: block;
    height: calc(100% - 6px);
    width: calc(100% - 3px);
}


.b_main:hover{
    left: 0px;
}

.b_play{
    z-index: 1;
    position: absolute;
    display: block;
  bottom: 960px;
  width: 387px;
  height: 138px;
    font-size: 64px;
    text-align: center;
    line-height: 120px;
    color: #ffffff;
    white-space: nowrap;
  font-family: "Bowlby One SC";
  background-image: url("../media/front/PlayButton.png");
	background-size: contain;
    cursor: pointer;

}

/*inner panel*/
.b_play::before{
    z-index: -1;
    content: '';
    position: absolute;
    display: block;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    border-radius: 30px;
}


.b_instructions{
    z-index: 1;
    position: absolute;
    display: block;
  bottom: 988px;
  width: 149px;
  height: 138px;
  font-size: 72px;
    text-align: center;
    line-height: 114px;
    color: #ffffff;
    white-space: nowrap;
  font-family: "Bowlby One SC";
  background-image: url("../media/front/InstructionsButton.png");
  background-size: contain;
    cursor: pointer;
}

/*inner panel*/
.b_instructions::before{
    z-index: -1;
    content: '';
    position: absolute;
    display: block;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    width: calc(100% - 6px);
    border-radius: 26px;
}

/*==========================*/
/* instructions screen */
/*==========================*/

.instructions_header{
    position: relative;
    display: block;
    font-size: 45px;
    margin-top: 10px;
    white-space: nowrap;
    font-family: "Bowlby One SC";
    color: white;
    pointer-events: none;
}

.instructions_image{
    position: absolute;
    display: block;
     background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* background-image: url('../media/instructions.gif'); */
}

/*==========================*/
/* recap screen */
/*==========================*/

.character_recap{
    position: absolute;
    display: block;
  width: 597px;
  height: 849px;
    /*left: -100px;
    pointer-events: none;*/
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('../media/front/Recap_MC.png');
}
.Recap_ShareButton {
  background-image: url("../media/front/Recap_ShareButton.png");
  position: absolute;
  left: 93px;
  bottom: 190px;
  width: 430px;
  height: 154px;
  font-size: 60px;
  font-family: "Bowlby One SC";
  color: rgb(255, 255, 255);
  line-height: 125px;
  text-align: center;
	cursor:pointer;
	-ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
	user-select: none;
   /* pointer-events: none;
  position: absolute;
  left: 840.778px;
  //top: 638.01px;*/
}
.Recap_Play_Again {
  background-image: url("../media/front/Recap_Play_Again.png");
  position: absolute;
  left: 32px;
  bottom: 120px;
  width: 524px;
  height: 154px;
  font-size: 60px;
  font-family: "Bowlby One SC";
  color: rgb(255, 255, 255);
  line-height: 125px;
  text-align: center;
	cursor:pointer;
	-ms-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
	user-select: none;
   /* pointer-events: none;
  position: absolute;
  left: 747.938px;
  top: 768.01px;*/
}
.Recap_Score {
  font-size: 60px;
  font-family: "Bowlby One SC";
  color: rgb(255, 255, 255);
  line-height: 60px;
  text-align: center;
  text-shadow: 7.757px 13.994px 1.88px rgba(2, 2, 2, 0.66);
  position: absolute;
  left: 686.666px;
  top: 88px;
  width: 264px;
  height: 64px;
    pointer-events: none;
}
.Recap_ScoreLabel {
  font-size: 60px;
  font-family: "Bowlby One SC";
  color: rgb(255, 255, 255);
  line-height: 60px;
  text-align: center;
  text-shadow: 7.757px 13.994px 1.88px rgba(2, 2, 2, 0.66);
  position: absolute;
  left: 686.953px;
  top: 27px;
  width: 250px;
  height: 64px;
    pointer-events: none;
}
.Recap_Stars {
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}
.Recap_SmallBucket {
  background-image: url("../media/front/Recap_SmallBucket.png");
  position: absolute;
  left: 155px;
  top: 273px;
  width: 287px;
  height: 316px;
}
.Recap_MediumBucket {
  background-image: url("../media/front/Recap_MediumBucket.png");
  position: absolute;
  left: 123px;
  top: 272px;
  width: 331px;
  height: 341px;
}
.Recap_LargeBucket {
  background-image: url("../media/front/Recap_LargeBucket.png");
  position: absolute;
  left: 83px;
  top: 267px;
  width: 395px;
  height: 419px;
}
.Recap_Star_1 {
  background-image: url("../media/front/Recap_Star_1.png");
  position: absolute;
  left: 160px;
  top: 401px;
  width: 109px;
  height: 106px;
}
.Recap_Star_2 {
  background-image: url("../media/front/Recap_Star_2.png");
  position: absolute;
  left: 240px;
  top: 401px;
  width: 109px;
  height: 106px;
}
.Recap_Star_3 {
  background-image: url("../media/front/Recap_Star_3.png");
  position: absolute;
  left: 320px;
  top: 401px;
  width: 109px;
  height: 106px;
}


/*==========================*/
/* loader */
/*==========================*/



.loader_spinner{
    position: absolute;
    display: block;
    width: 267px;
    height: 339px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../media/Loader_White.gif')
}

.loader_bar{
    position: absolute;
    display: block;
    width: 256px;
    height: 20px;
    border: 2px solid white;
    border-radius: 20px;
    overflow: hidden;
}

.loader_bar_fill{
    position: absolute;
    display: block;
    left: 0px;
    top:0px;
    height: 100%;
    width: 0%;

    background: linear-gradient(#b0de12, #cde922, #81a606);
   
}


/*==========================*/
/* pause menu */
/*==========================*/


.pause_menu_block{
    position: relative;
    display: inline-block;
}

.pause_menu{
    position: relative;
    display: block;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    text-align: center;
    font-family: "Bowlby One SC";
    font-size: 40px;
    letter-spacing: 1px;
    padding: 10px;
    padding-right: 30px;
    padding-left: 30px;
    width: 100%;
    border: 2px solid white;
    border-radius: 30px;
    background-color: rgba(0,0,0,0.5);
    cursor: pointer;
}


/*==========================*/
/* legal */
/*==========================*/

/*
.legal_block {
    z-index: 100;
    position: relative;
    display: inline-block;
    top: 0px;
    /*width: 100%;* /
    left:0px;
    right:0px;
    padding: 4px;
    font-size: 10px;
    font-family: "MontserratRegular";
    color: #ffffff;
    text-align:center;
    pointer-events: none;
    background-color: #000000;
}

.legal_block a:link {
    text-decoration: none;
    pointer-events: auto;
    color: #ffffff;
}

.legal_block a:visited {
    text-decoration: none;
    pointer-events: auto;
    color: #ffffff;
}

.legal_block a:active {
    text-decoration: none;
    pointer-events: auto;
    color: #faaf1e;
}

.legal_block a.no-touch:hover {
    text-decoration: none;
    pointer-events: auto;
    color: #faaf1e;
}


.b_legal {
    position: absolute;
    display: block;
    top: -45px;
    left: 0px;
    height: 46px;
    min-width: 120px;
    pointer-events: all;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    font-size: 10px;
    text-decoration: none !important;
    /*white-space: nowrap;* /
    color: #ffffff;
    padding-right: 20px;
    padding-left: 20px;
    text-decoration: none;
    pointer-events: auto;
    font-family: "MontserratRegular";
    border-radius: 0px 30px 0px 0px;
    background-color: #000000;
}

.b_legal a:link {
    text-decoration: none;
}

.b_legal a:visited {
    text-decoration: none;
}
.b_legal a:active {
    text-decoration: none;
    color: #faaf1e;
}
.legal_link {
    display: inline-block;
    pointer-events: auto !important;
}

.legal_image{
    position: relative;
    display: inline-block;
    margin: 5px 16px 1px 16px;
    /*max-height:60px;* /
    min-width:80px;
}

/*==========================*/
/* mute/fullscreen/pause    */
/*==========================*/

.b_fullscreen{
    position: relative;
    display: inline-block;
    width: 58px;
    height:58px;
    margin-right: 5px;
    margin-top: 0px;
    pointer-events:auto;
    background-repeat: no-repeat;
    background-size: 58px 58px;
    background-image: url('../media/b_fullscreen_on.svg');
}
.b_fullscreen:hover{
    cursor:pointer;
    background-image: url('../media/b_fullscreen_on_over.svg');
}

.b_fullscreen_on{
    position: relative;
    display: inline-block;
    width: 58px;
    height:58px;
    margin-right: 5px;
    margin-top: 0px;
    pointer-events:auto;
    background-repeat: no-repeat;
    background-size: 58px 58px;
    background-image: url('../media/b_fullscreen_off.svg');
}
.b_fullscreen_on:hover{
    cursor:pointer;
    background-image: url('../media/b_fullscreen_off_over.svg');
}

.b_mute{
    position: relative;
    display: inline-block;
    width: 58px;
    height:58px;
    margin-right: 5px;
    margin-top: 0px;
    pointer-events:auto;
    background-repeat: no-repeat;
    background-size: 58px 58px;
    background-image: url('../media/b_sound_on.svg');
}
.b_mute:hover{
    cursor:pointer;
    background-image: url('../media/b_sound_on_over.svg');
}

.b_mute_on{
    position: relative;
    display: inline-block;
    width: 58px;
    height:58px;
    margin-right: 5px;
    margin-top: 0px;
    pointer-events:auto;
    background-repeat: no-repeat;
    background-size: 58px 58px;
    background-image: url('../media/b_sound_off.svg');
}
.b_mute_on:hover{
    cursor:pointer;
    background-image: url('../media/b_sound_off_over.svg');
}

.b_pause{
    position: relative;
    display: inline-block;
    width: 58px;
    height:58px;
    margin-right: 5px;
    margin-top: 0px;
    pointer-events:auto;
    background-repeat: no-repeat;
    background-size: 58px 58px;
    background-image: url('../media/b_pause.svg');
}
.b_pause:hover{
    cursor:pointer;
    background-image: url('../media/b_pause_over.svg');
}

/*==========================*/
/* game */
/*==========================*/
.hud_top_bar {
    position: absolute;
    left:0px;
    width:100%;
    top:0px;
    height:65px;
    background-image: url('../media/front/TopBar.jpg');
    pointer-events: none;
}

.hud_score_amt{
    position: absolute;
    display: block;

    font-size: 72px;
    font-family: "MontserratBold";
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 0px 6px 0px rgba(1, 1, 1, 0.61);
    left: 50%;
    top: 6.73px;
    white-space: nowrap;
    width: 229px;
    height: 59px;
	
}

.hud_messages{
    position: absolute;
    display: none;
    font-size: 90px;
    white-space: nowrap;
    /*
    background-image: url('../media/front/GameLogoBackground.jpg');
    background-size: 100% 98%;
    background-repeat: no-repeat;
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;*/
    color:white;
    font-family: "Bowlby One SC";
    text-shadow: 0px 6px 6px rgba(0,0,0,1);
    pointer-events: none;
}


.game_timer {
    position: absolute;
    display: block;
    font-size: 50px;
    font-family: "MontserratBold";
    color: white;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    width:100px;
    height:30px;
    left: 550px;
    top: 5px;
    pointer-events: none;
}

.logo_inv_en_png {
    /*background-image: url("../media/logo_inv_en.png");*/
    background-size: contain;
    transform-origin: top right;
    position: absolute;
    display: block;
    right: 0px;
    bottom: 80px;
    width: auto;
    height:160px;
    pointer-events: none;
}

.game_film_logo_date{
    color: rgb(255, 255, 255, 0);
    font-size: 15px;
    line-height: 16px;
    font-family: "MontserratBold";
    position: absolute;
    display: block;
    
    width:100px;
    top: 20%;
    height: 40px;
    pointer-events: none;
}

.game_video{
    position:absolute;
    width:640px;
    height:640px;
    background-image: url("../media/");
    background-size:contain;
}
.legal_landscape_hidden {
    visibility:hidden;
    display:none;
}
.legal_portrait_hidden {
    visibility:hidden;
    display:none;
}