@font-face {
  font-family: "octin-stencil Bold", "octin-stencil", "octin-stencil", sans-serif;
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "octin-stencil Ultra", "octin-stencil", "octin-stencil", sans-serif;
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "octin-stencil", "octin-stencil",  sans-serif;
  font-weight: 500;
  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/bg_title.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;
	/*transform-origin: top left;
	transform: scale(2);*/
}
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;
  width: 100%;
  overflow: visible;
  background-color: #000000;
  color: rgb(224, 226, 230);
  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%;
  z-index: 2000;	
}
#div_controls {
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  width: 74px;
  padding-top: 5px;
  padding-right: 10px;
  -ms-transform-origin: 100% 0%; /* IE 9 */
  -webkit-transform-origin: 100% 0%; /* Chrome, Safari, Opera */
  transform-origin: 100% 0%;
  pointer-events: none;
}
#orientation_overlay {
  position: absolute;
  display: none;
  top: 0px; 
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 20000;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/*==========================*/
/* title screen */
/*==========================*/

.film_logo_block {
  position: absolute;
  display: block;
  background-image: url("../media/game/title_logo.png");
  left: 96px;
  top: 568px;
  width: 457px;
  height: 200px;
  background-size: contain;
  text-align: center;
  pointer-events: none;
  font-size: 14px;
  font-family: "octin-stencil";
	 z-index: 1;
}
.title_film_logo_date {
  font-size: 27px; /* 60px */
  font-family: "octin-stencil";
  color: rgb(0,0,0);
  font-weight: 800;
  line-height: 1.2;
  position: absolute;
  left: 0px;
  top: 49px;
  width: 644px;
  text-align: center;
}

.title_background {
  background-image: url("../media/title/title_background.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: 644px;
  height: 1120px;
	background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

.film_logo_img {
  height: 60px;
  width: auto;
}
.game_logo {
  position: absolute;
  left: 156px;
  top: 540px;
  width: 322px;
  height: 50px;
  /*width:100%;*/
  display: block;
  line-height: 68px;
  white-space: nowrap;
  font-family: "octin-stencil";
  text-shadow: 0px 10px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
  font-size: 68px;
  color: #ffde00;
  text-align: center;
  text-shadow: 0px 6px 0px rgba(0, 0, 0, 0.004);
}
.character_title {
  position: absolute;
  display: block;
  left: 167px;
  top: 182px;
  width: 445px;
  height: 408px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../media/title/title_char.png');
  z-index: 4;
}
.character_title_mid {
  position: absolute;
  display: block;
  left: 36px;
  top: 53px;
  width: 572px;
  height: 512px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../media/title/title_char_mid.png');
  z-index: 3;
}
.Title_bar {
  position: absolute;
  display: block;
  left: 0px;
  top: 565px;
  width: 644px; 
  height: 200px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../media/title/Title_bar.png');
  z-index: 1;
}
.run_Title {
  font-size: 75px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 0px;
  width:644px;
  top: 765px;
  z-index: 14;
}



.b_main {
  z-index: 1;
  position: absolute;
  display: block;
  left: 342px;
  top: 866px;
  width: 272px;
  height: 92px;
  font-size: 35px;
  text-align: center;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
  /*padding-left: 25px;
  padding-right: 25px;*/
  padding-top: 26px;
  font-family: "octin-stencil";
  cursor: pointer;
  -webkit-transition: left 0.25s; /* Safari */
  transition: left 0.25s;	
  background-size: cover;
  background-image: url("../media/title/btn_other_up.png");	
}
.b_play {
  z-index: 1;
  position: absolute;
  left: 39px;
  top: 866px;
  width: 272px;
  height: 92px;
  display: block;
  font-size: 58px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  padding-top: 13px;
  text-align: center;	
  background-size: contain;
  background-image: url("../media/title/btn_play_up.png");
  cursor:pointer;	
}

/*==========================*/
/* game screen */
/*==========================*/
.film_game_logo_block {
  position: absolute;
  display: block;
  background-image: url("../media/game/title_logo.png");
  left: 0px;
  top: 0px;
  width: 457px;
  height: 200px;
  background-size: contain;
  background-clip:content-box;
  background-repeat: no-repeat;
  text-align: center;
  pointer-events: none;
  font-size: 14px;
  font-family: "octin-stencil";
}
.logo_game_group {
  position:absolute;
  top:0px;
  width:458px;
  height:230px;
  transform-origin: center;
}
.film_game_logo_date {
  font-size: 27px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 204.4px;
  width:458px;
}
/*==========================*/
/* instructions screen */
/*==========================*/

.inst_b_PLAY {
	
  display: block;
  font-size: 58px;
  font-family: "octin-stencil";
  padding-top: 13px;
  text-align: center;
  color: rgb(255, 255, 255);
  line-height: 90px;
  position: absolute;
  background-image: url("../media/title/btn_play_up.png");
  background-size: cover;
  left: 188px;
  top: 873px;
  width: 272px;
  height: 92px;
  z-index: 70;
  cursor:pointer;	
}
.arrowR {
  background-image: url("../media/arrowR.png");
  background-size: cover;
  position: absolute;
  left: 576px;
  top: 883px;
  width: 60px;
  height: 70px;
  z-index: 68;
}
.arrowL {
  background-image: url("../media/arrowL.png");
  background-size: cover;
  position: absolute;
  left: 7px;
  top: 883px;
  width: 60px;
  height: 70px;
  z-index: 67;
}
.balloon {
  position: absolute;
  font-size: 30px;
  font-family: "Poster Gothic Cond ATF";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: left;
  position: absolute;
  z-index: 63;
}
.Speechballoon_copy {
  background-image: url("../media/inst_balloon.png");
  background-size: cover;
  position: absolute;
  left: 110px;
  top: 200px;
  width: 386px;
  height: 154px;
  z-index: 63;
}
.instructions {
  background-image: url("../media/instructions.gif");
  background-size: cover;
  position: absolute;
  left: 134px;
  top: 287px;
  width: 365px;
  height: 465px;
  z-index: 61;
}
.instructions_PC {
  background-image: url("../media/instructions_PC.gif");
  background-size: cover;
  position: absolute;
  left: 134px;
  top: 287px;
  width: 365px;
  height: 465px;
  z-index: 61;
}

.inst_background {
  background-image: url("../media/inst_background.jpg");
  background-size: cover;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 644px;
  height: 1120px;
  z-index: 1;
}
/*==========================*/
/* recap screen */
/*==========================*/

.recap_container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 644px;
  height: 1120px;
	overflow:hidden;
}
.recap_Russ {
  background-image: url("../media/recap/result_token_russ.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 169px;
  top: 484px; /* 484px */
  width: 90px;
  height: 98px;
  z-index: 43;
}
.recap_Zoe {
  background-image: url("../media/recap/result_token_zoe.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 274px;
  top: 484px;
  width: 91px;
  height: 98px;
  z-index: 42;
}
.recap_Roman {
  background-image: url("../media/recap/result_token_roman.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 385px;
  top: 491px;
  width: 90px;
  height: 91px;
  z-index: 41;
}
.recap_RM {
  background-image: url("../media/recap/result_token_RM.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 169px;
  top: 592px;
  width: 91px;
  height: 90px;
  z-index: 40;
}
.recap_HM {
  background-image: url("../media/recap/result_token_HM.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 275px;
  top: 592px;
  width: 90px;
  height: 90px;
  z-index: 39;
}
.recap_PR {
  background-image: url("../media/recap/result_token_PR.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 385px;
  top: 592px;
  width: 90px;
  height: 90px;
  z-index: 38;
}
.recap_SCORE_Label_shadow {
  font-size: 50px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 200px;
  top: 186.5px;
  width: 244px;
  height: 135px;
  z-index: 34;
}
.recap_SCORE_Label {
  font-size: 50px;
  font-family: "octin-stencil";
  color: rgb(0, 0, 0);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 198px;
  top: 190px;
  width: 244px;
  height: 135px;
  z-index: 33;
}
.recap_Score_Shadow {
  font-size: 100px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 111px;
  top: 238px;
  width: 428px;
  height: 110px;
  z-index: 32;
}
.recap_Score {
  font-size: 100px;
  font-family: "octin-stencil";
  color: rgb(0, 0, 0);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 109px;
  top: 244px;
  width: 428px;
  height: 110px;
  z-index: 31;
}
.WELCOME_TO_NARNIA {	
  background-image: url("../media/recap/recap_Speech.png");
  background-size: contain;
background-repeat:no-repeat;
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(0, 0, 0);
	padding:20px;
  line-height: 100px;
  text-align: center;
  position: absolute;
  left: 98px;
  top: 331px;
	width:427px;
	height:135px;
  z-index: 28;
}
.recap_PLAY_MORE {
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 80px;
  text-align: center;
	cursor: pointer;
  background-image: url("../media/title/btn_play_up.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 187px;
  top: 886px;
  width: 272px;
  height: 92px;
  z-index: 23;
}
.recap_INSTRUCTIONS {
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 80px;
  text-align: center;
  position: absolute;
	cursor: pointer;
  background-image: url("../media/title/btn_other_up.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 185px;
  top: 788px;
  width: 273px;
  height: 92px;
  z-index: 19;
}
.recap_WATCH_TRAILER {
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 80px;
  text-align: center;
  background-image: url("../media/title/btn_other_up.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
	cursor: pointer;
  left: 185px;
  top: 690px;
  width: 273px;
  height: 92px;
  z-index: 15;
}
.recap_legal_content {
  /*background-image: url("../media/recap/legal content.png");*/
  background-color: rgb(0, 0, 0);
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 0px;
  top: 1014px;
  width: 644px;
  height: 82px;
  z-index: 12;
}
.legal_inline_image {
	max-height:15px;
}
.recap_legal {
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 0px;
  top: 990px;
  width: 644px;
  height: 401px;
  z-index: 11;
}
.recap_date {
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 0px;
  top: 150px;
	width: 644px;
	height: 32px;
  z-index: 8;
}
.Title_copy {
  background-image: url("../media/recap/recap_Title.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 157px;
  top: 54px;
  width: 325px;
  height: 100px;
  z-index: 7;
}
.recap_top_rect {
  background-color: rgb(0, 0, 0);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 644px;
  height: 180px;
  z-index: 5;
}
.recap_Speech {
  background-image: url("../media/recap/recap_Speech.png");
  background-size: contain;
  background-repeat:no-repeat;
  position: absolute;
  left: 109px;
  top: 328px;
  width: 428px;
  height: 135px;
  z-index: 27;
}
.recap_HANK {
  background-image: url("../media/recap/recap_HANK.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 487px;
  top: 228px; /* 208px */
  width: 157px;
  height: 900px;
  z-index: 4;
}
.recap_RUSS {
  background-image: url("../media/recap/recap_RUSS.png");
  background-size: contain;
background-repeat:no-repeat;
  position: absolute;
  left: 0px;
  top: 175px; /* 155px */
  width: 160px;
  height: 948px;
  z-index: 3;
}
.recap_background {
  background-image: url("../media/recap/recap_background.jpg");
  background-size: contain;
background-repeat:no-repeat;background-repeat:no-repeat;
  background-repeat:no-repeat;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 644px;
  height: 1120px;
  z-index: 2;
}


/*==========================*/
/* loader */
/*==========================*/
.loader_spinner {
  position: absolute;
  display: block;
  width: 256px;
  height: 256px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../media/RedLoader.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;
}
.instructions_pause {
  background-image: url("../media/instructions.gif");
  background-size: cover;
  position: relative;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 365px;
  height: 465px;
}
.instructions_pause_PC {
  background-image: url("../media/instructions_PC.gif");
  background-size: cover;
  position: relative;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 365px;
  height: 465px;
}
.pause_menu {
  position: relative;
  display: inline-block;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: nowrap;
  text-align: center;
  font-family: "octin-stencil";
  font-size: 40px;
  letter-spacing: 1px;
  padding: 10px;
  padding-right: 30px;
  padding-left: 30px;
  width: 75%;
  border: 2px solid white;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
/*==========================*/
/* legal */
/*==========================*/
.legal_hide_show {
	position: absolute;
	display:block;
	top:-12px;
	left:0px;
	width:70px;
	height:18px;
	background-color:black;
	font-size: 14px;
	font-family: "octin-stencil";
	color: rgb(224, 226, 230);
	transform-origin: bottom left;
	text-align: center;
	cursor: pointer;
    pointer-events: auto;
	z-index:10;
}
.black_backdrop {
	background-color:black;
	position:absolute;
	z-index:-1;
	display:block;
	width:530px;
	height:2000px;
	top:0px;
	left:0px;
	transform-origin: middle top;
    pointer-events: auto;
}
.legal_block {
  position: relative;
  display: inline-block;
  top: 0px;
  width: 100%;
  padding: 8px;
  font-size: 20px;
  font-family: "octin-stencil";
  color: rgb(224, 226, 230);
	transform-origin: middle center;
  text-align: center;
  pointer-events: none;
  background-color: #000000;
}
.legal_block a:link {
  text-decoration: none;
  pointer-events: auto;
  color: rgb(224, 226, 230);
}
.legal_block a:visited {
  text-decoration: none;
  pointer-events: auto;
  color: rgb(224, 226, 230);
}
.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: auto;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  text-decoration: none !important;
  white-space: nowrap;
  color: rgb(224, 226, 230);
  padding-right: 20px;
  padding-left: 20px;
  text-decoration: none;
  pointer-events: auto;
  font-family: "octin-stencil";
  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_image {
  position: relative;
  display: inline-block;
  margin: 5px;
}
.legal_close_credits {	
	position:absolute;
	display:block;
	right:30px;
	top:0px;
	width:30px;
	height:30px;
	background-color:black;
	border-width:1px;
	border-color:white;
	border-style:solid;
	pointer-events: auto;
	/*cursor: pointer !important;
	background-image: url(../media/legal_close_credits.png);	*/
}
/*==========================*/
/* mute/fullscreen/pause    */
/*==========================*/
.b_fullscreen {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-top: 5px;
  pointer-events: auto;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  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: 64px;
  height: 64px;
  margin-top: 5px;
  pointer-events: auto;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-image: url('../media/b_fullscreen_off.svg');
}
.b_fullscreen_on:hover {
  cursor: pointer;
  background-image: url('../media/b_fullscreen_off_over.svg');
}
#loadsvg0 {
	background-image: url('../media/b_sound_on_over.png');
	position: absolute;
	top: -10px;
	left: -10px;
	transform: scale(0.0001);
}
#loadsvg1 {
	background-image: url('../media/b_sound_off.png');
	position: absolute;
	top: -10px;
	left: -10px;
	transform: scale(0.0001);
}
#loadsvg2 {
	background-image: url('../media/b_sound_off_over.png');
	position: absolute;
	top: -10px;
	left: -10px;
	transform: scale(0.0001);
}
.b_mute {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-top: 5px;
  pointer-events: auto;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-image: url('../media/b_sound_on.png');
}
.b_mute:hover {
  cursor: pointer;
  background-image: url('../media/b_sound_on_over.png');
}
.b_mute_on {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-top: 5px;
  pointer-events: auto;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-image: url('../media/b_sound_off.png');
}
.b_mute_on:hover {
  cursor: pointer;
  background-image: url('../media/b_sound_off_over.png');
}
.b_pause {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-top: 5px;
  pointer-events: auto;
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-image: url('../media/b_pause.svg');
}
.b_pause:hover {
  cursor: pointer;
  background-image: url('../media/b_pause_over.svg');
}
/*==========================*/
/* game */
/*==========================*/
.logo_group {
  position:absolute;
  top:0px;
  width:458px;
  height:230px;
  transform-origin: center;
  transform: scale(0.85);
}
.game_game_logo {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 458px;
  /*width:100%;*/
  display: block;
  line-height: 68px;
  white-space: nowrap;
  font-family: "octin-stencil";
  text-shadow: 0px 10px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
  font-size: 68px;
  color: #ffde00;
  text-align: center;
  align-content: center;
  text-shadow: 0px 6px 0px rgba(0, 0, 0, 0.004);
}
.hud_score {
  position: absolute;
  display: block;
  font-size: 30px;
  left: 15px;
  top: 0px;
  height: 30px;
  text-align: left;
  white-space: nowrap;
  color: #b0de12;
  font-family: "octin-stencil";
  pointer-events: none;
}
.hud_score_amt {
  position: absolute;
  display: block;
  font-size: 72px;
  font-family: "octin-stencil";
  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: 120px;
  white-space: nowrap;
  color: #ffffff;
  font-family: "octin-stencil";
  text-shadow: 0px 6px 6px rgba(0, 0, 0, 1);
  pointer-events: none;
}
.game_button_left {
  position: absolute;
  display: block;
  left: -20px;
  bottom: -20px;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 400px 200px;
  background-image: url('../media/game_buttons.png');
  cursor: pointer;
  pointer-events: auto;
}
.game_button_left:hover {
  background-position: -200px 0px;
}
.game_button_right {
  position: absolute;
  display: block;
  right: -20px;
  bottom: -20px;
  width: 200px;
  height: 200px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 400px 200px;
  background-image: url('../media/game_buttons.png');
  cursor: pointer;
  pointer-events: auto;
}
.game_button_right:hover {
  background-position: -200px 0px;
}
#popupCharacter {
  position: absolute; 
  background-image:url('../media/game/game_roman.png');
  background-size: contain;
  left: 0px;
  width: 274px;
  height: 283px;
  z-index:10;
}
#popupTextBox {
  background-image:url('../media/game/game_speechballoon.png');
  position: absolute;
  left: 175px;
  top: 1000px;
  width: 453px;
  height: 110px;
	padding-left: 60px;
	padding-right:10px;
	padding-top:40px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 453px 110px;
  font-size: 30px;
  font-family: "octin-stencil";
  color: rgb(0, 0, 0);
	word-wrap: normal;
  line-height: 1.2;
  text-align: center;
  z-index:11;
}

.score_backdrop {
  font-size: 60px;
  font-family: "octin-stencil";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 90px;
  text-align: center;  -moz-transform: matrix( 0.99715766602636,-0.07534314225504,0.07534314225504,0.99715766602636,0,0);
  -webkit-transform: matrix( 0.99715766602636,-0.07534314225504,0.07534314225504,0.99715766602636,0,0);
  -ms-transform: matrix( 0.99715766602636,-0.07534314225504,0.07534314225504,0.99715766602636,0,0);
  position: absolute;	
  background-image: url("../media/game/score_backdrop.png");
	background-size: contain;
  left: 170px;
  top: 30px;
  width: 289px;
  height: 84px;
  z-index: 7;
}

.sonyheader {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
  padding: 5px 10px;
  background: black;
  z-index: 19999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sonyheader img {
  height: 15px;
}