@charset "utf-8";

@font-face {
    font-family: 'kraashregular';
    src: url('../fonts/kraash-webfont.eot');
    src: url('../fonts/kraash-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/kraash-webfont.woff2') format('woff2'),
         url('../fonts/kraash-webfont.woff') format('woff'),
         url('../fonts/kraash-webfont.ttf') format('truetype'),
         url('../fonts/kraash-webfont.svg#kraashregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'the_kings_of_the_houseregular';
    src: url('../fonts/thekingsofthehouse-regular_0-webfont.eot');
    src: url('../fonts/thekingsofthehouse-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/thekingsofthehouse-regular_0-webfont.woff2') format('woff2'),
         url('../fonts/thekingsofthehouse-regular_0-webfont.woff') format('woff'),
         url('../fonts/thekingsofthehouse-regular_0-webfont.ttf') format('truetype'),
         url('../fonts/thekingsofthehouse-regular_0-webfont.svg#the_kings_of_the_houseregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

:where(#wrapper, #wrapper *) {
	outline: none;
	padding: 0;
}
#wrapper{
	width: 100%;
	max-width: 800px;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: visible;
	margin: 0 auto;
	background: transparent;
}
/* Host pages set overflow:hidden on divs. That clips the scaled 800x600
   stage (and the Start sign) whenever the wrapper is narrower than 800px.
   Fullscreen rules below still clip to the screen. */
#wrapper.snl-embed:not(.stage-fill):not(:fullscreen):not(:-webkit-full-screen) {
	overflow: visible !important;
}
#wrapper.stage-fill {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
	overflow: hidden;
	background-color: #6d9a32;
	z-index: 2147483000;
}
#wrapper:fullscreen {
	position: relative;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
	overflow: hidden;
	background-color: #6d9a32;
	z-index: 2147483000;
}
#wrapper:-webkit-full-screen {
	position: relative;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	margin: 0;
	overflow: hidden;
	background-color: #6d9a32;
	z-index: 2147483000;
}
/* Wider scene art fills the screen. The 800x600 stage stays transparent
   so the same picture shows behind the buttons and around the edges. */
#wrapper.stage-fill.fs-bg-1,
#wrapper.fs-bg-1:fullscreen,
#wrapper.fs-bg-1:-webkit-full-screen { background-image: url(../img/screen1-fs.jpg); }
#wrapper.stage-fill.fs-bg-2,
#wrapper.fs-bg-2:fullscreen,
#wrapper.fs-bg-2:-webkit-full-screen { background-image: url(../img/screen2-fs.jpg); }
#wrapper.stage-fill.fs-bg-3,
#wrapper.fs-bg-3:fullscreen,
#wrapper.fs-bg-3:-webkit-full-screen { background-image: url(../img/screen3-fs.jpg); }
#wrapper.stage-fill.fs-bg-4,
#wrapper.fs-bg-4:fullscreen,
#wrapper.fs-bg-4:-webkit-full-screen { background-image: url(../img/screen4-fs.jpg); }
#wrapper.stage-fill.fs-bg-5,
#wrapper.fs-bg-5:fullscreen,
#wrapper.fs-bg-5:-webkit-full-screen { background-image: url(../img/screen5-fs.jpg); }
#wrapper.stage-fill[class*="fs-bg-"],
#wrapper[class*="fs-bg-"]:fullscreen,
#wrapper[class*="fs-bg-"]:-webkit-full-screen {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#wrapper.stage-fill #screen1,
#wrapper.stage-fill #screen2,
#wrapper.stage-fill #screen3,
#wrapper.stage-fill #screen4,
#wrapper.stage-fill #screen5,
#wrapper:fullscreen #screen1,
#wrapper:fullscreen #screen2,
#wrapper:fullscreen #screen3,
#wrapper:fullscreen #screen4,
#wrapper:fullscreen #screen5,
#wrapper:-webkit-full-screen #screen1,
#wrapper:-webkit-full-screen #screen2,
#wrapper:-webkit-full-screen #screen3,
#wrapper:-webkit-full-screen #screen4,
#wrapper:-webkit-full-screen #screen5 {
	background-image: none !important;
	background-color: transparent !important;
}
.clear{ clear:both;}

#scene-bg {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#container{
	width:800px;
	height:600px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transform-origin: top left;
	background: transparent;
}

#fs-toggle[hidden],
#fs-home[hidden],
#music-mute[hidden] {
	display: none !important;
	pointer-events: none !important;
}

#fs-toggle,
#fs-home {
	position: absolute;
	top: 4px;
	z-index: 1000;
	box-sizing: border-box;
	width: 118px;
	height: 108px;
	padding: 28px 12px 0;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: #fff;
	font-family: 'kraashregular', Georgia, serif;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	background: url(../img/play_bg.png) no-repeat center / 100% 100%;
	filter: drop-shadow(0 8px 8px rgba(20, 10, 0, 0.28));
}

#fs-toggle {
	right: 6px;
}

#fs-home {
	left: 6px;
}

#fs-toggle-label,
#fs-home-label {
	display: block;
	width: 100%;
	margin: 0;
	transform: none;
	text-align: center;
}
#fs-home-label {
	font-size: 9px;
}

#fs-toggle:hover,
#fs-home:hover {
	filter: drop-shadow(0 8px 8px rgba(20, 10, 0, 0.28)) brightness(1.06);
}

#fs-toggle:active,
#fs-home:active {
	transform: translateY(2px);
}

#fs-toggle:focus-visible,
#fs-home:focus-visible,
#music-mute:focus-visible {
	outline: 3px solid #ffe38a;
	outline-offset: 3px;
}

#music-mute {
	position: absolute;
	left: 6px;
	bottom: 6px;
	top: auto;
	z-index: 1000;
	box-sizing: border-box;
	width: 86px;
	height: 78px;
	padding: 16px 10px 0;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: #fff;
	font-family: 'kraashregular', Georgia, serif;
	font-size: 13px;
	line-height: 1;
	text-align: center;
	background: url(../img/play_bg.png) no-repeat center / 100% 100%;
	filter: drop-shadow(0 8px 8px rgba(20, 10, 0, 0.28));
}

#music-mute .music-icon {
	width: 26px;
	height: 26px;
	display: block;
	transform: translateY(-4px);
}
#music-mute .music-icon-off {
	display: none;
}
#music-mute.is-muted .music-icon-on {
	display: none;
}
#music-mute.is-muted .music-icon-off {
	display: block;
}

#music-mute:hover {
	filter: drop-shadow(0 8px 8px rgba(20, 10, 0, 0.28)) brightness(1.06);
}

#music-mute:active {
	transform: translateY(2px);
}

#wrapper.stage-fill #fs-toggle,
#wrapper.stage-fill #fs-home,
#wrapper:fullscreen #fs-toggle,
#wrapper:fullscreen #fs-home,
#wrapper:-webkit-full-screen #fs-toggle,
#wrapper:-webkit-full-screen #fs-home {
	width: 210px;
	height: 192px;
	padding: 54px 16px 0;
	font-size: 28px;
}
#wrapper.stage-fill #fs-home-label,
#wrapper:fullscreen #fs-home-label,
#wrapper:-webkit-full-screen #fs-home-label {
	font-size: 16px;
}
#wrapper.stage-fill #music-mute,
#wrapper:fullscreen #music-mute,
#wrapper:-webkit-full-screen #music-mute {
	width: 118px;
	height: 108px;
	padding: 26px 12px 0;
}
#wrapper.stage-fill #music-mute .music-icon,
#wrapper:fullscreen #music-mute .music-icon,
#wrapper:-webkit-full-screen #music-mute .music-icon {
	width: 36px;
	height: 36px;
	transform: translateY(-6px);
}

/******* screen 1**********/
#screen1{
	width:800px;
	height:600px;
	background:url(../img/screen1.jpg) no-repeat;
	position: relative;
}
/******/
@keyframes snakes-1 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8320px;}
}
@-webkit-keyframes snakes-1 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8320px;}
}
@-moz-keyframes snakes-1 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8320px;}
}
@-ms-keyframes snakes-1 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8320px;}
}
@-o-keyframes snakes-1 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8320px;}
}
.snakes-1{
	width:290px;
	height:208px;
	-webkit-animation:snakes-1 2s steps(40) infinite;
	-moz-animation:snakes-1 2s steps(40) infinite;
	-ms-animation:snakes-1 2s steps(40) infinite;
	-o-animation:snakes-1 2s steps(40) infinite;
	animation:snakes-1 2s steps(40) infinite;
	
	background:url(../img/snake1.png) no-repeat;
	float: left;
	z-index: 9;
	position: relative;
}
#wrapper header {
    width: 800px;
    min-height: 300px;
    position: relative;
    max-width: 100%;
}

#wrapper footer {
    width: 800px;
    max-width: 100%;
    position: relative;
}
#logo{
	width: 341px;
	height: 230px;
	background:url(../img/title_bg.png) no-repeat;
	line-height: normal;
	text-align: center;
	margin: auto;
	float: left;
	margin-left: -40px;
}
#logo h1{
	font-family: 'kraashregular';
	font-size: 25px;
	font-weight:normal;
	vertical-align: middle;
	line-height: 38px;
	margin: 0px;
	padding: 0px;
	color: #fff;   
	padding-top: 68px;
	text-align: center;
}
#logo h1 span {
    font-size: 18px;
    display: block;
}
.screen1_footer {
width: 450px;
float: right;
max-width: 100%;
height: 300px;
position: relative;
}
.startBtn {
	width: 229px;
	height: 210px;
	background:url(../img/play_bg.png) no-repeat;
	padding: 50px 15px 0px 0px; 
	font-family: 'kraashregular';
	font-size: 22px;
	cursor: pointer;
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
    color: #fff;
    text-align: center;
}
.startBtn span{  z-index: 999;  position: relative;}

/* Host stylesheets restyle header, footer, and div, which moves #start
   off the wooden sign. Pin the signs to the game footer and let clicks
   pass through the grass sprites that sit on top of them. */
#wrapper #screen1 .screen1_footer,
#wrapper #screen2 .screen2_footer {
	position: relative !important;
}
#wrapper #start.startBtn,
#wrapper #play.startBtn {
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 40 !important;
	pointer-events: auto !important;
	float: none !important;
	margin: 0 !important;
	transform: none !important;
}
#wrapper .bottom-grass,
#wrapper .bottom-grass *,
#wrapper .grass-1,
#wrapper .grass-2 {
	pointer-events: none !important;
}
#wrapper .bottom-grass {
	z-index: 50 !important;
}
#wrapper .grass-1,
#wrapper .grass-2 {
	z-index: 1 !important;
}

.bottom-grass {
    position: absolute;
    bottom: 0px;
    width: 400px;
    display: inline-block;
    right: 0px;
}

/******/
@keyframes grass {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8200px;}
}
@-webkit-keyframes grass {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8200px;}
}
@-moz-keyframes grass {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8200px;}
}
@-ms-keyframes grass {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8200px;}
}
@-o-keyframes grass {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -8200px;}
}
.grass-1{
	width:245px;
	height:205px;
	-webkit-animation:grass 2s steps(40) infinite;
	-moz-animation:grass 2s steps(40) infinite;
	-ms-animation:grass 2s steps(40) infinite;
	-o-animation:grass 2s steps(40) infinite;
	animation:grass 2s steps(40) infinite;
	
	background:url(../img/grass.png) no-repeat;
	float: right;
	position: relative;
}
.grass-2{
	width:245px;
	height:205px;
	-webkit-animation:grass 2s steps(40) infinite;
	-moz-animation:grass 2s steps(40) infinite;
	-ms-animation:grass 2s steps(40) infinite;
	-o-animation:grass 2s steps(40) infinite;
	animation:grass 2s steps(40) infinite;
	
	background:url(../img/grass.png) no-repeat;
	/* float: right; */
	left: 20px;
	position: relative;
}


/******* screen 2**********/

#screen2{
	width:800px;
	height:600px;
	background:url(../img/screen2.jpg) no-repeat;
	position: relative;
	overflow: hidden;
}
.screen2-ladder{
	width:335px;
	height:600px;
	background:url(../img/screen2-ladder.png) no-repeat;
	text-align:left;
	position: absolute;
  left: 0px;
  top: 0px;
}
#instructions{
	width:560px;
	height: 300px;
	background:url(../img/instr-bg.png) no-repeat;
	margin:auto;
	padding-top: 80px;
}
#instructions h2{
  font-family: 'kraashregular';
  font-size: 18px;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 280px;
  margin: 0px auto;
  padding: 10px;
  color: #fff;
}
.inst_text ul {
    margin: 0px;
    padding: 0px;
}

.inst_text {
    width: 480px;
    margin: auto;
    max-width: 100%;
    padding-left: 25px;
    color: #fff;
	  z-index: 99;
  position: relative;
}

.inst_text li {
    list-style-type: square;
    font-size: 18px;
    padding: 2px 0px;
}
.player-count {
    width: 430px;
    margin: 10px auto 0;
    text-align: center;
    position: relative;
    z-index: 99;
}
.player-choice {
    font-family: 'the_kings_of_the_houseregular';
    font-size: 18px;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 18px;
    padding: 3px 14px 4px;
    margin: 0 6px;
    cursor: pointer;
    line-height: 1.3;
}
.player-choice.is-selected {
    background: #f4f408;
    color: #000;
    border-color: #8f3f14;
}
.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    margin: 0 4px 0 0;
    vertical-align: -1px;
}
.swatch-red { background: #ff1e1e; box-shadow: 0 0 4px #ff1a1a; }
.swatch-blue { background: #2f7bff; box-shadow: 0 0 4px #1a4fd0; }
.player-choice.is-selected .swatch-red { box-shadow: none; }
.player-choice.is-selected .swatch-blue { box-shadow: none; }
button#play {
  width: auto;
  padding: 5px 15px;
  float: right;
  margin-right: 65px;
   font-family: 'the_kings_of_the_houseregular';
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  bottom: 40px;
  right: 0px;
  clear: both;
}
.screen2_footer{
	width: 380px;
  float: right;
  max-width: 100%;
  height: 280px;
  position: relative;
	margin-right: -30px;
}
@keyframes snakes-2 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -4500px;}
}
@-webkit-keyframes snakes-2 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -4500px;}
}
@-moz-keyframes snakes-2{
	from{background-position: 0px 0px;}
	to	{background-position: 0px -4500px;}
}
@-ms-keyframes snakes-2 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -4500px;}
}
@-o-keyframes snakes-2 {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -4500px;}
}
.snakes-2{
	width:150px;
	height:150px;
	-webkit-animation:snakes-2 2s steps(30) infinite;
	-moz-animation:snakes-2 2s steps(30) infinite;
	-ms-animation:snakes-2 2s steps(30) infinite;
	-o-animation:snakes-2 2s steps(30) infinite;
	animation:snakes-2 2s steps(30) infinite;
	
	background:url(../img/snake2.png) no-repeat;
	/* float: right; */
	z-index: 9;
	position: absolute;
	right: 30px;
	top: 292px;
}
/*** \screen 2****/


/******* screen 3**********/
#screen3{
	width:800px;
	height:600px;
	background:url(../img/screen3.jpg) no-repeat;
	position: relative;
}

.Level-Theme {
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding-top: 30px;
}

.Level-Theme h3 {
    width: 400px;    
    height: 115px;    
    line-height: 100px;    
    color: #fff;    
	
    font-weight: normal;
    font-family: 'the_kings_of_the_houseregular';    
    font-size: 23px;    
    background: url(../img/selectLevel-bg.png);    
	display: block;    
    padding: 0px;    
    position: relative;    
    text-align: center;
    margin: 0px;
    z-index: 99;
}
.Level-Theme ul {
    margin: 0px auto;
    padding: 0px;
    width: 400px;
}

.Level-Theme li {
    list-style-type: none;
    text-align: center;
    font-family: 'the_kings_of_the_houseregular';
    margin: 0px auto;
    font-size: 25px;    
    background: url(../img/Level-bg.png) no-repeat;    
    line-height: 170px;        
    display: block;    
    color: #fff;    
	cursor: pointer;    
	
    font-weight: normal;
    width: 220px;
    height: 130px;
    position: absolute;
    top: 90px;
    left: 80px;
}
.Level-Theme li:nth-child(2) {
    top: 175px;
    z-index: 8;
}

.Level-Theme li:nth-child(3) {
    top: 260px;
    z-index: 7;
}

.Level-Theme li:nth-child(4) {
    top: 345px;
    z-index: 6;
}

.Level-Theme li:nth-child(5) {
    top: 430px;
}


.Level-Theme li:nth-child(1) {
    z-index: 9;
}
.Level-Theme li:hover {
    text-decoration: none;    
    color: #fff;
}


/******* screen 4**********/
#screen4{
	width:800px;
	height:600px;
	background:url(../img/screen4.jpg) no-repeat;
	position: relative;
}
/******** \screen4 **********/

/******* screen 5**********/
#screen5{
	width:800px;
	height:600px;
	background:url(../img/screen5.jpg) no-repeat;
	position: relative;
}
div#dice {
    width: 130px;
    float: left;
    position: relative;
    height: 100%;
}
#turnLabel {
    display: none;
    position: absolute;
    top: auto;
    bottom: 132px;
    left: 0;
    width: 130px;
    text-align: center;
    font-family: 'the_kings_of_the_houseregular';
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    z-index: 3;
    pointer-events: none;
}
#turnLabel.turn-p1 { color: #ff5a5a; }
#turnLabel.turn-p2 { color: #8eb6ff; }

.surface {
    width: 101px;
    height: 117px;
    background: url(../img/surface.png) no-repeat;
    position: absolute;
    bottom: 0px;
    left: 20px;
    text-align: center;
}
.surface span {
    line-height: 190px;
    color: yellow;
    font-size: 20px;
    font-family: 'the_kings_of_the_houseregular';
    cursor: pointer;
}
.dice {
    width: 70px;    
    height: 70px;    
    background: url(../img/dice.png) no-repeat;
    position: absolute;    
      bottom: 55px;
  	left: 35px;
	  cursor: pointer;
}
#table_grid{
	box-sizing: content-box;
	width: 540px;
	height: 540px;
	margin: 8px 0 0;
	background:url(../img/ludo_bg.png) no-repeat;
	background-origin: border-box;
	background-size: 580px 580px;
	position: relative;
	float: left;
	padding: 20px;
}
/* The page theme sets border-box on every element. That folds the 20px
   frame padding into the 540px box and clips the outer squares. The frame
   image is 580px, which is the 540px grid plus that padding. */
#wrapper #screen5 #dice,
#wrapper #screen5 #table_grid,
#wrapper #screen5 #ludo,
#wrapper #screen5 .table,
#wrapper #screen5 .table > tbody > tr > td {
	box-sizing: content-box !important;
}
#wrapper #screen5 #table_grid {
	width: 540px !important;
	height: 540px !important;
	max-width: none !important;
	padding: 20px !important;
	overflow: visible;
	background-origin: border-box;
	background-size: 580px 580px;
}
.table {
  box-sizing: content-box;
  width: 540px;
  max-width: 540px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  position: relative;
  display: table;
}

#wrapper #screen5 .table > tbody > tr > td,
.table>tbody>tr>td {
  box-sizing: content-box !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px;
  min-width: 52px;
  padding: 0 !important;
  vertical-align: middle;
  border: 1px solid #000;
  line-height: 52px;
  text-align: center;
  font-size: 18px;
  font-family: Calibri, "Segoe UI", sans-serif;
  background: #fff;
  font-weight: bold;
  overflow: hidden;
}
/*.active{background-color:#4bacc6;}
.success{background-color: #dbeef4;}
.info{background-color: #8eb4e3;}
.warning{background-color:#b7dee8;}
.danger{background-color: #558ed5;}*/


div#questionViewer {
  width: 800px;
  height: 395px;
  margin: 0px;
  position: absolute;
  z-index: 999;
  left: 0px;
  background: url(../img/ques-holder.png) no-repeat;
  bottom: -395px;
  display: block;
  -webkit-transition: all .5s .3s ease;
}
div#questionTitle {
  width: 683px;
  height: 161px;
  margin: 0px auto;
  background: url(../img/ques-box.png) no-repeat;
  color: #fff;
  position: relative;
  font-family: 'the_kings_of_the_houseregular';
  line-height: normal;
  font-weight: normal;
}

#questionTitle p {
    padding: 3px 8px 3px 60px;
    padding-top: 40px;
    font-size: 20px;
    text-align: left;
    line-height: normal;
    position: relative;
}
div#userAnswer {
    width: 790px;    
    height: 145px;
    margin-top: 5px;
}
#userAnswer ul {
    margin: 0px auto;
    padding: 0px;
    list-style: none;
    line-height: normal;
    vertical-align: middle;
    width: 730px;
    /* float: left; 
    min-height: 38px;*/
	 font-family: 'the_kings_of_the_houseregular';
    text-align: center;
}


#userAnswer li {
  width: 310px;
  height: 65px;
  display: block;
  background: url(../img/options-bg.png) no-repeat center center;
  padding: 6px 15px;
  color: #fff;
  font-size: 20px;
  margin: 0px 12px;
  text-align: center;
  float: left;
  line-height: normal;
  vertical-align: middle;
  cursor: pointer;
}

#userAnswer li.active {
	background:url(../img/options-bg_active.png) no-repeat;
	color:#8c3f17;
}

#submitAns{
width: 104px;
background: url(../img/submitBtn.png) no-repeat;
height: 50px;
vertical-align: middle;
font-family: 'the_kings_of_the_houseregular';
font-weight: normal;
color: #fff;
border:0px;
float: right;
margin-right: 30px;
font-size: 24px;
  cursor: pointer;
}

div#ludo {
    width: 540px;
    height: 540px;
    position: absolute;
    top: 0px;
    left: 0px;
	
}

div#snakesDiv {
    position: relative;
}
#snakesDiv div {
    position: absolute;
}
#ludoSnake1{

	width:103px;
	height:44px;
	background:url(../img/snakes/ludoSnake1.png) no-repeat;
	top: 488px;
	left: 368px;
}
#ludoSnake2{
	width:60px;
	height:53px;
	background:url(../img/snakes/ludoSnake2.png) no-repeat;
	top: 488px;    
	left: 208px;
}
#ludoSnake3{
	width:51px;
	height:100px;
	background:url(../img/snakes/ludoSnake3.png) no-repeat;
	top: 428px;    
	left: 50px;
}
#ludoSnake4{
	width:69px;
	height:70px;
	background:url(../img/snakes/ludoSnake4.png) no-repeat;
	top: 424px;    
	left: 298px;
}
#ludoSnake5{
	width:91px;
	height:62px;
	background:url(../img/snakes/ludoSnake5.png) no-repeat;
	top: 360px;    
	left: 455px;
}
#ludoSnake6{
	width:77px;
	height:140px;
	background:url(../img/snakes/ludoSnake6.png) no-repeat;
	top: 387px;    
	left: 146px;
}
#ludoSnake7{
	width:89px;
	height:65px;
	background:url(../img/snakes/ludoSnake7.png) no-repeat;
	top: 300px;    
	left: 78px;
}
#ludoSnake8{
	width:105px;
	height:57px;
	background:url(../img/snakes/ludoSnake8.png) no-repeat;
	top: 318px;    
	left: 266px;
}
#ludoSnake9{
	width:60px;
	height:73px;
	background:url(../img/snakes/ludoSnake9.png) no-repeat;
	top: 256px;    
	left: 404px;
}
#ludoSnake10{
	width:114px;
	height:111px;
	background:url(../img/snakes/ludoSnake10.png) no-repeat;
	top: 268px;    
	left: 198px;
}
#ludoSnake11{
	width:60px;
	height:53px;
	background:url(../img/snakes/ludoSnake11.png) no-repeat;
	top: 216px;    
	left: 33px;
}
#ludoSnake12{
	width:44px;
	height:112px;
	background:url(../img/snakes/ludoSnake12.png) no-repeat;
	top: 208px;    
	left: 328px;
}
#ludoSnake13{
	width:189px;
	height:242px;
	background:url(../img/snakes/ludoSnake13.png) no-repeat;
	top: 165px;    
	left: 325px;
}
#ludoSnake14{
	width:80px;
	height:144px;
	background:url(../img/snakes/ludoSnake14.png) no-repeat;
	top: 164px;    
	left: 148px;
}
#ludoSnake15{
	width:90px;
	height:102px;
	background:url(../img/snakes/ludoSnake15.png) no-repeat;
	top: 98px;    
	left: 78px;
}
#ludoSnake16{
	width:90px;
	height:102px;
	background:url(../img/snakes/ludoSnake16.png) no-repeat;
	top: 100px;    
	left: 347px;
}


div#laddersDiv {
    position: relative;
}
#laddersDiv div {
    position: absolute;
}
#ladder1{
	width:51px;
	height:86px;
	background:url(../img/ladders/ladder1.png) no-repeat;
	top: 402px;
	left: 428px;
}
#ladder2{
	width:52px;
	height:140px;
	background:url(../img/ladders/ladder2.png) no-repeat;
	top: 331px;    
	left: 208px;
}
#ladder3{
	width:56px;
	height:102px;
	background:url(../img/ladders/ladder3.png) no-repeat;
	top: 311px;    
	left: 88px;
}
#ladder4{
	width:26px;
	height:71px;
	background:url(../img/ladders/ladder4.png) no-repeat;
	top: 353px;    
	left: 368px;
}
#ladder5{
	width:54px;
	height:103px;
	background:url(../img/ladders/ladder5.png) no-repeat;
	top: 261px;    
	left: 478px;
}
#ladder6{
	width:51px;
	height:97px;
	background:url(../img/ladders/ladder6.png) no-repeat;
	top: 268px;    
	left: 157px;
}
#ladder7{
	width:24px;
	height:93px;
	background:url(../img/ladders/ladder7.png) no-repeat;
	top: 238px;    
	left: 92px;
}
#ladder8{
	width:56px;
	height:76px;
	background:url(../img/ladders/ladder8.png) no-repeat;
	top: 242px;    
	left: 318px;
}
#ladder9{
	width:54px;
	height:103px;
	background:url(../img/ladders/ladder9.png) no-repeat;
	top: 152px;    
	left: 424px;
}
#ladder10{
	width:61px;
	height:150px;
	background:url(../img/ladders/ladder10.png) no-repeat;
	top: 108px;    
	left: 153px;
}
#ladder11{
	width:55px;
	height:120px;

	background: url(../img/ladders/ladder11.png) no-repeat;
	top: 92px;    
	left: 47px;
}
#ladder12{
	width:61px;
	height:74px;
	background:url(../img/ladders/ladder12.png) no-repeat;
	top: 132px;    
	left: 318px;
}
#ladder13{
	width:40px;
	height:70px;
	background:url(../img/ladders/ladder13.png) no-repeat;
	top: 87px;    
	left: 485px;
}
#ladder14{
	width:101px;

	height:112px;
	background:url(../img/ladders/ladder14.png) no-repeat;
	top: 47px;    

	left: 213px;
}
#ladder15{
	width:44px;
	height:69px;
	background:url(../img/ladders/ladder15.png) no-repeat;
	top: 37px;    
	left: 76px;
}
#ladder16{
	width:47px;
	height:61px;
	background:url(../img/ladders/ladder16.png) no-repeat;
	top: 36px;    
	left: 374px;
}


div#player,
div#player2 {
    width: 54px;
    height: 54px;
    position: absolute;
    margin: 20px;
    bottom: 0px;
    left: 0px;
    z-index: 5;
}
div#player2 { display: none; }
#table_grid.two-players div#player2 { display: block; }
div#player.is-turn,
div#player2.is-turn { z-index: 6; }

div#player:after,
div#player2:after {
    content: '';
    width: 20px;
    height: 20px;
    background-color: rgb(255, 30, 30);
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 20px;
    margin-left: -10px;
    margin-top: -10px;
    box-shadow: 0px 0px 5px rgb(255, 26, 26);
}
div#player2:after {
    background-color: #2f7bff;
    box-shadow: 0px 0px 5px #1a4fd0;
}
div#player.is-turn:after,
div#player2.is-turn:after {
    box-shadow: 0 0 0 3px #fff, 0 0 6px rgba(0, 0, 0, 0.45);
}


/*** dice roll ***/

@keyframes diceRoll {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -2380px;}
}
@-webkit-keyframes diceRoll {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -2380px;}
}
@-moz-keyframes diceRoll{
	from{background-position: 0px 0px;}
	to	{background-position: 0px -2380px;}
}
@-ms-keyframes diceRoll {
	from{background-position: 0px 0px;}
	to	{background-position: 0px -2380px;}
}
@-o-keyframes diceRoll{
	from{background-position: 0px 0px;}
	to	{background-position: 0px -2380px;}
}
.digit1{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit1.png) no-repeat;
}

.digit1static { background:url(../img/digit1.png) no-repeat; }
.digit2{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit2.png) no-repeat;
}
.digit2static { background:url(../img/digit2.png) no-repeat; }

.digit3{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit3.png) no-repeat;
}
.digit3static { background:url(../img/digit3.png) no-repeat; }

.digit4{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit4.png) no-repeat;
}
.digit4static { background:url(../img/digit4.png) no-repeat; }

.digit5{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit5.png) no-repeat;
}
.digit5static { background:url(../img/digit5.png) no-repeat; }

.digit6{
	width:70px;
	height:70px;
	-webkit-animation:diceRoll 1s steps(34) alternate;
	-moz-animation:diceRoll 1s steps(34) alternate;
	-ms-animation:diceRoll 1s steps(34) alternate;
	-o-animation:diceRoll 1s steps(34) alternate;
	animation:diceRoll 1s steps(34) alternate;
	
	background:url(../img/digit6.png) no-repeat;
}
.digit6static { background:url(../img/digit6.png) no-repeat; }

/* Blue faces for player 2. Same sheet size, so the roll animation is unchanged. */
.dice.blue.digit1,
.dice.blue.digit1static { background-image: url(../img/digit1B.png); }
.dice.blue.digit2,
.dice.blue.digit2static { background-image: url(../img/digit2B.png); }
.dice.blue.digit3,
.dice.blue.digit3static { background-image: url(../img/digit3B.png); }
.dice.blue.digit4,
.dice.blue.digit4static { background-image: url(../img/digit4B.png); }
.dice.blue.digit5,
.dice.blue.digit5static { background-image: url(../img/digit5B.png); }
.dice.blue.digit6,
.dice.blue.digit6static { background-image: url(../img/digit6B.png); }




#winnerLine {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 22%;
    z-index: 1000000000;
    margin: 0;
    text-align: center;
    font-family: 'the_kings_of_the_houseregular';
    font-size: 28px;
    color: #fff;
    text-shadow: 0 2px 0 #6a3010;
    pointer-events: none;
}
#questionTitle p#questionWho {
    display: none;
    margin: 0;
    padding: 22px 20px 0 60px;
    text-align: center;
    font-family: 'the_kings_of_the_houseregular';
    font-size: 18px;
    color: #f4f408;
}
#questionWho[style*="block"] + #questionTitleTxt {
    padding-top: 6px;
}
#questionWho.who-p1 { color: #ff5a5a; }
#questionWho.who-p2 { color: #8eb6ff; }

#msgComplete {
position: absolute;
background: url(../img/wellDone-bg.png) no-repeat;
background-size: 800px 120px;
width: 800px;
height: 120px;
left: 0;
top: 0%;
overflow: hidden;
box-sizing: content-box;
/* background-position: 0px -7px; */
z-index: 999999999;

-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
opacity: .4;
display: none;
}

#msgComplete:after, #msgComplete:before {
	border-bottom: 4px solid #FFF;
	content: '';
	position: absolute;
	/* width: 100%; */
	
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-ms-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	transition: all 1s ease-in;
	
	width: 0%;
}

#msgComplete:after {
	top: -7px;
	left: 0px;
}

#msgComplete:before{
	bottom: -7px;
	right: 0px;
}


#msgComplete.open { top: 34%; opacity: 1; }
#msgComplete.open:after, #msgComplete.open:before {	width: 100%; }


#msgComplete p
{
	text-align: center;
	margin: 20px 0 0;
	padding: 0;
	height: 80px;
	line-height: 80px;
	font-size: 0;
	white-space: nowrap;
}
#wrapper #msgComplete span {
	display: inline-block;
	width: auto;
	height: 80px;
	margin: 0;
	padding: 0;
	line-height: 80px;
	vertical-align: middle;
}
#wrapper #msgComplete p > span:nth-child(5) {
	width: 36px;
}
#wrapper #msgComplete img {
	display: inline-block;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: 78px !important;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}


@-webkit-keyframes textEffect
{
	0%
	{
		opacity: 0;
		-webkit-transform: translateY(-200px);
	}
	50%
	{
		opacity: 1;
		-webkit-transform: translateY(100px);
	}
	80%
	{
		-webkit-transform: translateY(-50px);
	}
	100%
	{
		-webkit-transform: translateY(0px);
	}
	
}


@-moz-keyframes textEffect
{
	0%
	{
		opacity: 0;
		-moz-transform: translateY(-200px);
	}
	50%
	{
		opacity: 1;
		-moz-transform: translateY(100px);
	}
	80%
	{
		-moz-transform: translateY(-50px);
	}
	100%
	{
		-moz-transform: translateY(0px);
	}
	
}


@-ms-keyframes textEffect
{
	0%
	{
		opacity: 0;
		-ms-transform: translateY(-200px);
	}
	50%
	{
		opacity: 1;
		-ms-transform: translateY(100px);
	}
	80%
	{
		-ms-transform: translateY(-50px);
	}
	100%
	{
		-ms-transform: translateY(0px);
	}
	
}


@-o-keyframes textEffect
{
	0%
	{
		opacity: 0;
		-o-transform: translateY(-200px);
	}
	50%
	{
		opacity: 1;
		-o-transform: translateY(100px);
	}
	80%
	{
		-o-transform: translateY(-50px);
	}
	100%
	{
		-o-transform: translateY(0px);
	}
	
}

@keyframes textEffect
{
	0%
	{
		opacity: 0;
		transform: translateY(-200px);
	}
	50%
	{
		opacity: 1;
		transform: translateY(8px);
	}
	80%
	{
		transform: translateY(-4px);
	}
	100%
	{
		transform: translateY(0px);
	}
	
}


.textEffect1
{
	-webkit-animation: textEffect .1s ease-in;
	-moz-animation: textEffect .1s ease-in;
	-ms-animation: textEffect .1s ease-in;
	-o-animation: textEffect .1s ease-in;
	animation: textEffect .1s ease-in;
}

.textEffect2
{
	-webkit-animation: textEffect .2s ease-in;
	-moz-animation: textEffect .2s ease-in;
	-ms-animation: textEffect .2s ease-in;
	-o-animation: textEffect .2s ease-in;
	animation: textEffect .2s ease-in;
}

.textEffect3
{
	-webkit-animation: textEffect .3s ease-in;
	-moz-animation: textEffect .3s ease-in;
	-ms-animation: textEffect .3s ease-in;
	-o-animation: textEffect .3s ease-in;
	animation: textEffect .3s ease-in;
}

.textEffect4
{
	-webkit-animation: textEffect .4s ease-in;
	-moz-animation: textEffect .4s ease-in;
	-ms-animation: textEffect .4s ease-in;
	-o-animation: textEffect .4s ease-in;
	animation: textEffect .4s ease-in;
}

.textEffect5
{
	-webkit-animation: textEffect .5s ease-in;
	-moz-animation: textEffect .5s ease-in;
	-ms-animation: textEffect .5s ease-in;
	-o-animation: textEffect .5s ease-in;
	animation: textEffect .5s ease-in;
}

.textEffect6
{
	-webkit-animation: textEffect .6s ease-in;
	-moz-animation: textEffect .6s ease-in;
	-ms-animation: textEffect .6s ease-in;
	-o-animation: textEffect .6s ease-in;
	animation: textEffect .6s ease-in;
}

.textEffect7
{
	-webkit-animation: textEffect .7s ease-in;
	-moz-animation: textEffect .7s ease-in;
	-ms-animation: textEffect .7s ease-in;
	-o-animation: textEffect .7s ease-in;
	animation: textEffect .7s ease-in;
}

.textEffect8
{
	-webkit-animation: textEffect .8s ease-in;
	-moz-animation: textEffect .8s ease-in;
	-ms-animation: textEffect .8s ease-in;
	-o-animation: textEffect .8s ease-in;
	animation: textEffect .8s ease-in;
}

.textEffect9
{
	-webkit-animation: textEffect .9s ease-in;
	-moz-animation: textEffect .9s ease-in;
	-ms-animation: textEffect .9s ease-in;
	-o-animation: textEffect .9s ease-in;
	animation: textEffect .9s ease-in;
}

.textEffect10
{
	-webkit-animation: textEffect 1s ease-in;
	-moz-animation: textEffect 1s ease-in;
	-ms-animation: textEffect 1s ease-in;
	-o-animation: textEffect 1s ease-in;
	animation: textEffect 1s ease-in;
}



.overlay{
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.67);
	position: absolute;
	top: 0px;
	left: 0px;
	display:none;
}
.alertMsg{
	width: 400px;
	height:115px;
	margin: 0 auto;
	background:url(../img/selectLevel-bg.png) no-repeat;
	
	position: absolute;
	top: 34%;
	left: 35%;
	z-index: 9999;
	display: none;
}
.alertMsg p{
  width: 90%;
  height: 76px;
  margin: 0 auto;
  font-size: 22px;
  color: #fff;
  padding-top: 22px;
  text-align: center;
	 font-family: 'the_kings_of_the_houseregular';
}

#replay {
  float: right;
  width: 60px;
  position: absolute;
  bottom: 30px;
  right: 3px;
  text-align: center;
  background: #F4F408;
  padding: 7px 10px;
  font-family: 'the_kings_of_the_houseregular';
  font-size: 18px;
  cursor: pointer;
  color: #000;
  display:none;
  border: 2px #8f3f14 dotted;
  background-size: 100%;
}

#debug {
display: none;
  background-color: #40413C;
  text-align: center;
}

#debug select {
  
  -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
  
    font:18px "arial";
  padding:14px 0px 13px 12px ;

    margin: 5px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: 2px 2px 7px #000;
    -moz-box-shadow:2px 2px 7px #000;
    box-shadow: 2px 2px 7px #000;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
	width: 200px;
	margin: 20px auto;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #debug select {padding-right:20px
    -moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
  }
  
}

#debug label {position:relative}
#debug label:after {
    content:'►';
    color:#aaa;
  background-color:#fff;
  border-radius:0 3px 3px 0px;
    right:6px; top:0px;
    padding:14px 8px 15px 9px;
  margin:-16px 0px 0px 0px;
    border-left:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
#debug label:before {
  
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

span#loganswer {
    color: #FFF;
    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;    font: 18px "arial";    padding: 14px 12px 13px 12px;    margin: 5px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    border-radius: 3px;    -webkit-box-shadow: 2px 2px 7px #000;    -moz-box-shadow: 2px 2px 7px #000;    box-shadow: 2px 2px 7px #000;    
    background: #515151;        border: none;    outline: none;    display: inline-block;    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    cursor: pointer;    min-width: 200px;    margin: 20px auto;
}


#wrapper.spinnerprogress:not(.done) #fs-toggle,
#wrapper.spinnerprogress:not(.done) #fs-home,
#wrapper.spinnerprogress:not(.done) #music-mute {
	visibility: hidden;
}

/* Overlay is contained by #wrapper (position: relative; overflow: hidden).
   It does not use a body class, so a stuck spinner cannot cover the host page. */
#wrapper > .progress {
	display: none;
	position: absolute;
	pointer-events: none;
}

#wrapper.spinnerprogress:not(.done) > .progress {
	display: block;
	pointer-events: auto;
	background: #dbeef4;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align: center;
	animation: snl-release-spinner 0s linear 1.5s forwards;
}

#wrapper.done > .progress,
#wrapper.spinnerprogress.done > .progress {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	animation: none;
}

@keyframes snl-release-spinner {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

#progress-wrapper {
	display: flex;
	height: 100%;
	width: 100%;
	text-align: -webkit-center;
	margin: auto;
}

.mauto {
	margin:  auto;
}

.snakes-1,
.snakes-2 {
	cursor: pointer;
}

/* The site accessibility controls zoom the whole page and recolour
   headings, paragraphs and lists. Put this game back to its own size
   and colours. A zoom on the page is undone here, the same way the
   accessibility panel keeps its own size. */
html.ctc-zoom-large #wrapper.snl-embed {
	zoom: 0.6666667;
}
html.ctc-zoom-massive #wrapper.snl-embed {
	zoom: 0.4;
}

@supports (-webkit-touch-callout: none) {
	html.ctc-zoom-large #wrapper.snl-embed,
	html.ctc-zoom-massive #wrapper.snl-embed {
		zoom: 1 !important;
	}
	html.ctc-zoom-large #wrapper.snl-embed,
	html.ctc-zoom-large #wrapper.snl-embed *,
	html.ctc-zoom-massive #wrapper.snl-embed,
	html.ctc-zoom-massive #wrapper.snl-embed * {
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
	}
}

html body #wrapper.snl-embed :is(h1, h2, h3, h4, h5, h6, p, li, label) {
	color: #fff !important;
}
html body #wrapper.snl-embed #userAnswer li.active {
	color: #8c3f17 !important;
}
html body #wrapper.snl-embed .surface span {
	color: yellow !important;
}
html body #wrapper.snl-embed #replay {
	color: #000 !important;
}

/* Square numbers stay black, in the board font, even when the page
   recolours tables or swaps the site font. */
html body #wrapper.snl-embed .table > tbody > tr > td {
	color: #000 !important;
	background-color: #fff !important;
	font-family: Calibri, "Segoe UI", sans-serif !important;
	font-size: 18px !important;
	font-weight: bold !important;
	line-height: 52px !important;
}

html body #wrapper.snl-embed :is(
	#logo h1,
	.startBtn,
	#instructions h2,
	#fs-toggle,
	#fs-home,
	#music-mute
) {
	font-family: 'kraashregular', Georgia, serif !important;
	font-weight: normal !important;
}
html body #wrapper.snl-embed :is(
	.inst_text,
	.inst_text li,
	.Level-Theme h3,
	.Level-Theme li,
	#questionTitle,
	#questionTitle p,
	#userAnswer,
	#userAnswer li,
	#submitAns,
	.alertMsg p,
	#replay,
	.surface span,
	#turnLabel
) {
	font-family: 'the_kings_of_the_houseregular', Georgia, serif !important;
	font-weight: normal !important;
}
html body #wrapper.snl-embed #logo h1 { font-size: 25px !important; }
html body #wrapper.snl-embed #logo h1 span { font-size: 18px !important; }
html body #wrapper.snl-embed .startBtn { font-size: 22px !important; }
html body #wrapper.snl-embed #instructions h2,
html body #wrapper.snl-embed .inst_text li,
html body #wrapper.snl-embed #replay,
html body #wrapper.snl-embed #turnLabel { font-size: 18px !important; }
html body #wrapper.snl-embed .Level-Theme h3 { font-size: 23px !important; }
html body #wrapper.snl-embed .Level-Theme li { font-size: 25px !important; }
html body #wrapper.snl-embed :is(#questionTitle, #questionTitle p, #userAnswer li, .surface span) { font-size: 20px !important; }
html body #wrapper.snl-embed #submitAns { font-size: 24px !important; }
html body #wrapper.snl-embed .alertMsg p { font-size: 22px !important; }
html body #wrapper.snl-embed :is(#fs-toggle, #fs-home) { font-size: 14px !important; }
html body #wrapper.snl-embed #fs-home-label { font-size: 9px !important; }
html body #wrapper.snl-embed #music-mute { font-size: 13px !important; color: #fff !important; }
html body #wrapper.stage-fill.snl-embed :is(#fs-toggle, #fs-home),
html body #wrapper.snl-embed:fullscreen :is(#fs-toggle, #fs-home),
html body #wrapper.snl-embed:-webkit-full-screen :is(#fs-toggle, #fs-home) { font-size: 28px !important; }
html body #wrapper.stage-fill.snl-embed #fs-home-label,
html body #wrapper.snl-embed:fullscreen #fs-home-label,
html body #wrapper.snl-embed:-webkit-full-screen #fs-home-label { font-size: 16px !important; }