/* Container needed to position the button. Adjust the width as needed */

@font-face {
    font-family: BurbankBigRegular;
    src: url("../fonts/BurbankBigRegular-Black.WOFF");
	 font-display: block;
}

@font-face {
    font-family: Gotham Narrow Black;
    src: url("../fonts/Gotham_Narrow_Black.WOFF");
	 font-display: block;
}

@font-face {
    font-family: Gotham Narrow Bold;
    src: url("../fonts/Gotham_Narrow_Bold.WOFF"); font-display: block;
}

@font-face {
    font-family: Gotham Narrow Book;
    src: url("../fonts/Gotham_Narrow_Book.WOFF");
	 font-display: block;
}

@font-face {
    font-family: Gotham Narrow Medium;
    src: url("../fonts/Gotham_Narrow_Medium.WOFF");
	 font-display: block;
}

.nav {
list-style: none; 
z-index: 100;
text-align: center;
vertical-align:middle;
}


.nav a {
display: table-cell;
text-decoration:none;
    height: 3.7vh;
    width: 1.8vw;
    line-height:3.7vh;

    -moz-border-radius: 50%; /* or 50% */
    border-radius: 50%; /* or 50% */

    background-color: white;
    color: #0a4b64;
    text-align: center;
vertical-align:middle;
	
font: 2.4vh Gotham Narrow Black;
}



.nav a.active,
.nav a:hover {
	text-decoration: none;
	background: #97daf8;
	
}

.nav a.complete{
	text-decoration: none;
	box-shadow: 0px 0px 0px 2px rgb(10, 75,100);
	border-collapse: separate;
}



.container {
  position: relative;
  width: 100%;
  
  margin-top:2vh;
  padding-right: 0px;
    padding-left: 0px;
}

.inst_container {
  width: 74.5vw;
height:24vh;
margin:0;
vertical-align: middle;
}

.inst_container .inst_text {
display: table-cell;
		vertical-align:middle;
	color:white;
	width:40vw;
	height:21vh;
text-align:center;
margin:0px;

font: 2.5vh Gotham Narrow Medium;
}
.insttextBox{
	position:absolute;
	left:17vw;
top:1vh;
overflow-y: auto;
height:22vh;
}

.lessontextBox{
	 position: absolute;
    width: 30vw;
	height:48vh;
    text-align: center;
    left: 35.5vw;
    top: 26vh;
overflow-y: hidden;
}

.geartextBox{
overflow-y: auto;
height:55vh;

position: absolute;
width:25vw;
left:39vw;
top:23vh;
}

.resulttextBox{
    overflow-y: auto;
    height: 15vh;
    position: absolute;
    width: 25vw;
    left: 39vw;
    top: 45vh;
}

.resultvideotextBox{
overflow-y: auto;
    height: 11vh;
    position: absolute;
    width: 25vw;
    left: 39vw;
    top: 27vh;
}

.hinttextBox{
overflow-y: auto;
position: absolute;
    width: 30vw;
    height: 16vh;
    text-align: center;
    left: 35vw;
    top: 46vh;
}
/* Scrollbar styles */
#game_body ::-webkit-scrollbar {
width: 12px;
height: 12px;
}

#game_body ::-webkit-scrollbar-track {
border: 1px solid green;
border-radius: 10px;
}

#game_body ::-webkit-scrollbar-thumb {
background: green;  
border-radius: 10px;
}

#game_body ::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}

#game_body ::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

.inst_container .inst_bg{
position:absolute;
height:24vh;
width:74.5vw;
 margin:0;
}



/* Make the image responsive */
.container .playbox {
  width: 100%;
  height: 12.2vh;
 
}

/* Style the button and place it in the middle of the container/image */
 .runbtn {
  position: absolute;
 outline: none;
top: 3.5vh;
left:.5vw;
  width: 7vw;
height:5.8vh;
 border: 0;
display: inline-block;
	background: url("../media/layout/run_button.png") no-repeat;
background-size:100% 100%;
    
}


 .resetcanvasbtn {
  position: absolute;
  display:none;
 outline: none;
top: 3.5vh;
left:.5vw;
  width: 7vw;
height:5.8vh;
 border: 0;
background: url("../media/layout/reset_button.png") no-repeat;
background-size:100% 100%;
}

.btnsound{
	 outline: none;
 position: absolute;
left:14vw;
  width:2.7vw;
 height: 4vh;
  border: 0;
  top: 3.9vh;
left:13vw;
background: url("../media/layout/sound_on.png") no-repeat;
background-size:100% 100%;	
	
}




.btnsound:hover,.close:hover,.enter:hover,.okay:hover, .runbtn:hover, .resetcanvasbtn:hover, .retry_lvl:hover,.next_lvl:hover, .hint:hover, .leftbtn:hover, .rightbtn:hover, .upbtn:hover, .downbtn:hover, .spacebtn:hover, .finish:hover, .resetbtn:hover, .skip_lvl:hover{ 
-webkit-filter: brightness(70%);
    -webkit-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -o-transition: all .1s ease;
    -ms-transition: all .1s ease;
    transition: all .1s ease;
cursor: pointer;}

 .leftbtn {
  position: absolute;
  display:none;
 outline: none;
top: 3.45vh;
    left: 13vw;
    width: 3vw;
	    height: 5vh;
 border: 0;
background: url("../media/layout/left_arrow.png") no-repeat;
background-size:100% 100%;	
} 
 .rightbtn {
  position: absolute;
display:none;
 outline: none;
top: 3.45vh;
    left: 20vw;
    width: 3vw;
	    height: 5vh;
 border: 0;
background: url("../media/layout/right_arrow.png") no-repeat;
background-size:100% 100%;	
	
	
}
  .downbtn {
  position: absolute;
  display:none;
 outline: none;
top: 6.5vh;
    left: 16.5vw;
    width: 3vw;
	    height: 5vh;
 border: 0;
background: url("../media/layout/down_arrow.png");
background-size:100% 100%;	
}
   .upbtn {
  position: absolute;
  display:none;
 outline: none;
top: 1vh;
    left: 16.5vw;
    width: 3vw;
	    height: 5vh;
 border: 0;
background: url("../media/layout/up_arrow.png") no-repeat;
background-size:100% 100%;	
}
    .spacebtn {
  position: absolute;
  display:none;
 outline: none;
    top: 7vh;
    left: 8vw;
    width: 4.7vw;
	    height: 4.6vh;
 border: 0;
background: url("../media/layout/space_button.png") no-repeat;
background-size:100% 100%;	
}
	
table, th, td {
	 margin: 0;
  border-collapse: collapse;
  border-style: hidden;

}

.table{
	margin-top: 1vh;
	    margin-bottom: 1vh;

}
.table th {

	text-align: center;
  padding: 0px;
  border: 5px solid white;
  vertical-align:middle;
  line-height: 5vh;
}

.resetbtn{
	
float:right; 
vertical-align:middle;
padding:0; 
background-color: rgba(17,136,174,.5); 
border: none; 
padding: .3vh 1vh;
border-radius: 1vh;
-moz-border-radius: 1vh;
margin-top:.7vh;
margin-right:1vw;
}


div.browseBuilds tr.browseBuilds_piece img { display: block; }

.header_section{
	padding-left: 0px;
padding-right: 0px;
padding_top:0px;}


.left_section{
	  display: inline-block;
	  vertical-align: top;
	margin-left: .5vw;
margin-right: .25vw;
padding-top:0px;
padding-left:0px;
padding-right:0px;
width:23.5vw;}

.right_section{
position:absolute;
left:25vw;
	  display: inline-block;
	  vertical-align: top;
	
margin-right:.5vw;
padding-top:0px;
padding-left:0px;
padding-right:0px;
width:74.5vw;}

.main_section{
width:100%;
	padding-left: 0px;
padding-right: 0px;
padding-top:0px;}

#blocklyArea {
      height: 54vh;
width:100%;
      background: #fc9;
      text-align: center;
    }

	/* The Modal (background) */
.modal.win, .modal.win_video, .modal.sweepstakes{
    display:none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(255,255,255,0.5); /* white w/ opacity */
	 z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}

	/* The Modal (background) */
.modal.lose, .modal.lose_video, .modal.unfinished{
    display:none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
	 z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}


	/* The Modal (background) */
.modal.gear, .modal.lesson, .modal.lesson_hint, .modal.lesson_hint2{
    display:none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: none; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(24,158,73,0.5); /* Black w/ opacity */
	 z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}

/* Modal Content/Box */
.modal.win .modal-content, .modal.lose .modal-content, .modal.lesson_hint .modal-content {
 
		 position: relative;
	 background-color: rgba(0,0,0,0);
	 border: 0px;
    height: 50vh;
	width:78.5vh;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modal.win_video .modal-content, .modal.lose_video .modal-content, .modal.gear .modal-content, .modal.lesson .modal-content, .modal.sweepstakes .modal-content, .modal.lesson_hint2 .modal-content,.modal.unfinished .modal-content{
		 position: relative;
	 background-color: rgba(0,0,0,0);
	 border: 0px;
    height: 90vh;
	width:110vh;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.gear-drone{
	  -webkit-animation-name: drone_gear;
    -webkit-animation-duration:1s;
    animation-name: drone_gear;
    animation-duration: 1s;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
animation-timing-function: linear;
position:absolute;
}

.gear-reindeer{
	  -webkit-animation-name: reindeer_gear;
    -webkit-animation-duration:1.5s;
    animation-name: reindeer_gear;
    animation-duration: 1.5s;
	animation-iteration-count: infinite;
position:absolute;

-webkit-animation-timing-function:ease-in;
animation-timing-function: ease-int;
}

.gear-snowball{
	  -webkit-animation-name: snowball_gear;
    -webkit-animation-duration:1.4s;
    animation-name: snowball_gear;
    animation-duration: 1.4s;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
animation-timing-function: linear;
top:29vh;
position:absolute;
}

.gear-signal{
	  -webkit-animation-name: signal_gear;
    -webkit-animation-duration:1s;
    animation-name: signal_gear;
    animation-duration: 1.5s;
	animation-iteration-count: infinite;
position:absolute;
}

.gear-slow{
	  -webkit-animation-name: move_gear;
    -webkit-animation-duration:4s;
    animation-name: move_gear;
    animation-duration: 4s;
	animation-iteration-count: infinite;
position:absolute;
-webkit-animation-timing-function:ease-out;
animation-timing-function: ease-out;
}

.gear-speed{
	  -webkit-animation-name: move_gear;
    -webkit-animation-duration:2s;
    animation-name: move_gear;
    animation-duration: 2s;
	animation-iteration-count: infinite;
position:absolute;
-webkit-animation-timing-function: ease-in;
animation-timing-function:ease-in;
}

.gear-jump{
	  -webkit-animation-name: jump_gear;
    -webkit-animation-duration:2s;
    animation-name: jump_gear;
    animation-duration: 2s;
	animation-iteration-count: infinite;
position:absolute;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


/* Add Animation */
@-webkit-keyframes animatetoplesson {
    from {opacity:0; background-position:59% -20vh} 
    to {opacity:1; background-position:59% -4vh}
}

@keyframes animatetoplesson {
    from {opacity:0; background-position:59% -20vh}
    to {opacity:1; background-position:59% -4vh}
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes move_gear {
from {left:0vw;} 
to {left:20vw;}
}

/* Standard syntax */
@keyframes move_gear {
from {left:4vw;} 
to {left:20vw;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes jump_gear {
0% {top:43vh;} 
50% {top:35vh;}
100% {top:43vh;}
}

/* Standard syntax */
@keyframes jump_gear {
0% {top:43vh;} 
50% {top:35vh;}
100% {top:43vh;}
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes drone_gear {
from {left:0vw;} 
to {left:9.5vw;}
}

/* Standard syntax */
@keyframes drone_gear {
from {left:0vw;} 
to {left:9.5vw;}
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes reindeer_gear {
from {left:9vw; top:23vh;opacity:1;} 
to {left:15vw;top:-8vh;opacity:0;}
}

/* Standard syntax */
@keyframes reindeer_gear {
from {left:9vw; top:23vh;opacity:1;} 
to {left:15vw;top:-8vh;opacity:0;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes snowball_gear {
from {left:10vw;} 
to {left:23vw;}
}

/* Standard syntax */
@keyframes snowball_gear {
from {left:9vw; } 
to {left:23vw;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes signal_gear {
0% {opacity:.8;} 
50% {opacity:0;}
100% {opacity:.8;}
}

/* Standard syntax */
@keyframes signal_gear {
0% {opacity:.8;} 
50% {opacity:0;}
100% {opacity:.8;}
}

.modal.win .modal-body, .modal.lose .modal-body, .modal.lesson_hint .modal-body{
    height: 50vh;
	width:78.5vw;
}

.modal.win_video .modal-body, .modal.lose_video .modal-body, .modal.gear .modal-body,.modal.sweepstakes .modal-body, .modal.lesson_hint2 .modal-body, .modal.unfinished .modal-body{
    height: 90vh;
	width:110vw;
}

.modal.lesson .modal-body{
	    height: 90vh;
	width:110vw;	
}


.modal.win .modal-body .modal-bg{
	content: url("../media/modal/sucess_bg.png");
	 height: 50vh;
	 width:38.5vw;

position:absolute;
left:31vw;
top:27vh;


}

.modal.lose .modal-body .modal-bg{
	content: url("../media/modal/negative_bg.png");
	 height: 50vh;
	 width:38.5vw;
position:absolute;
left:31vw;
top:27vh;

}

.modal.win_video .modal-body .modal-bg{
	content: url("../media/modal/sucess_video_bg.png");
	 height: 90vh;
	 width:48.3vw;
position:absolute;
left:25.85vw;
top:5vh;
}

.modal.lose_video .modal-body .modal-bg{
	content: url("../media/modal/negative_video_bg.png");
	 height: 90vh;
width:48.3vw;
position:absolute;
left:25.85vw;
top:5vh;

}

.modal.gear .modal-body .modal-bg{
	content: url("../media/modal/gear_bg.png");
	 height: 90vh;
width:48.3vw;
position:absolute;
left:25.85vw;
top:5vh;

}

.modal-bg:hover {
	
	  cursor: default;
}

.modal.lesson .modal-body .modal-bg{
	content: "";
	display: inline-block;
	background: url("../media/modal/lesson1_bg.png") no-repeat fixed;
	background-size: 56.3% 95%;
    background-position: 59% -80%;
    height: 95vh;
    width: 61.3vw;
    position: absolute;
    left: 21.85vw;
	
	 -webkit-animation-name: animatetoplesson;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetoplesson;
    animation-duration: 0.4s;
}

.modal.sweepstakes .modal-body .modal-bg{
	content: url("../media/modal/sweepstakes_bg.png");
 height: 90vh;
width:48.3vw;
position:absolute;
left:25.85vw;
top:5vh;

}

.modal.unfinished .modal-body .modal-bg{
	content: url("../media/modal/not_done.png");
 height: 90vh;
width:48.3vw;
position:absolute;
left:25.85vw;
top:5vh;

}
.modal.lesson_hint .modal-body .modal-bg{
	content: url("../media/modal/hint_bg.png");
    height: 43vh;
    width: 38.5vw;
    position: absolute;
    left: 31vw;
    top: 33vh;

}

.modal.lesson_hint2 .modal-body .modal-bg{
	content: url("../media/modal/hint2_bg.png");
height: 90vh;
width:48.3vw;
    position: absolute;
    left:25.85vw;
   top:5vh;

}




/* The Close Button */
.modal.win .close, .modal.lose .close, .modal.lesson_hint .close{
	position: absolute;
	width:1.5vw;
	height:3vh;
	top:41vh;
	left:62vw;
}

.modal.win_video .close, .modal.lose_video .close, .modal.lesson_hint2 .close{
	position: absolute;
	width:2vw;
	height:4vh;
	top:22vh;
	left:64vw;
}

.modal.sweepstakes .close{
	position: absolute;
	width:2vw;
	height:4vh;
	top:14vh;
	left:64vw;
}

.modal.unfinished .close{
	position: absolute;
	width:2vw;
	height:4vh;
	top:14vh;
	left:64vw;
}

.modal.gear .close{
	position: absolute;
	width:2vw;
	height:4vh;
	top:18vh;
	left:64vw;
}

.modal.lesson .close{
	position: absolute;
    width: 2vw;
    height: 4vh;
    top: 21vh;
    left: 61vw;
}

.modal.lesson .okay{
	position: absolute;
    width: 11vw;
    height: 8vh;
    top: 75vh;
    left: 43.5vw;
}

.modal.gear .okay{
	position: absolute;
    width: 11vw;
    height: 8vh;
    top: 75vh;
    left: 44.5vw;
}
.modal.unfinished .okay{
	position: absolute;
    width: 15vw;
    top: 73vh;
    left: 34.5vw;
}

.modal.sweepstakes .enter{
	position: absolute;
    width: 15vw;
    height: 8vh;
    top: 73vh;
    left: 34.5vw;
}

.finish{
	display:none;
	position: absolute;
    width: 12vw;
margin-top:2px;
}


.modal.lose .hint{
	
	 position: absolute;
    outline: none;
    bottom:-16vh;
    left: 59.5vw;
      	width:5vw;
	height:6vh;
    border: 0;
   	background: url("../media/modal/hint.png") no-repeat;
	background-size: 100% 100%;
box-shadow: 0px 0px 50px rgb(216, 203, 0), inset 0 0 10px rgba(216, 203, 0, 0.41)}

.modal.lose_video .hint{
	
	 position: absolute;
    outline: none;
    bottom:8vh;
    left: 61.5vw;
       	width:5vw;
	height:6vh;
    border: 0;
   	background: url("../media/modal/hint.png") no-repeat;
	background-size: 100% 100%;
box-shadow:0px 0px 50px rgb(216, 203, 0), inset 0 0 10px rgba(216, 203, 0, 0.41)}


/* The Next Level Button */
.modal.win .next_lvl, .modal.lose .retry_lvl{
	position: absolute;
    color: black;
	width:5vw;
	height:6vh;
	bottom:-16vh;
	left:37vw;
}

.modal.win .skip_lvl, .modal.lose .skip_lvl{
	display: none;
	position: absolute;
    color: black;
	width:5vw;
	height:6vh;
	bottom:-16vh;
	left:48vw;
}

.modal.lesson_hint .retry_lvl{
	position: absolute;
   	width:5vw;
	height:6vh;
    top: 62vh;
    left: 47.5vw;
}

.modal.lesson_hint2 .retry_lvl{
	position: absolute;
   	width:5vw;
	height:6vh;
    top: 76vh;
    left: 47.5vw;
}

.modal.win_video .next_lvl, .modal.lose_video .retry_lvl{
	position: absolute;
    color: black;
	width:5vw;
	height:6vh;
	bottom:8vh;
	left:34vw;
}

.modal.win_video .skip_lvl, .modal.lose_video .skip_lvl{
	position: absolute;
    color: black;
	width:5vw;
	height:6vh;
	bottom:8vh;
	left:47.5vw;
		display: none;

}


.modal.win .modal_text{
	display: table-cell;
		vertical-align:middle;
width:25vw;
height:14.5vh;
text-align: center;
color: #095065;
font-family:Gotham Narrow Medium;
word-wrap: break-word;
}

.modal.lose .modal_text{
	display: table-cell;
		vertical-align:middle;
width:25vw;
height:14.5vh;
text-align: center;
color: #ffffff;
font-family:Gotham Narrow Medium;
word-wrap: break-word;
}

.modal.win_video .modal_text{
	display: table-cell;
		vertical-align:middle;
width:25vw;
height:5vh;
text-align: center;
color: #095065;
font-family: Gotham Narrow Medium;
word-wrap: break-word;
}

.modal.lose_video .modal_text{
	display: table-cell;
		vertical-align:middle;
width:23vw;
height:10vh;
text-align: center;

color: #ffffff;
font-family:Gotham Narrow Medium;
word-wrap: break-word;
}

.modal.gear .modal_text{
	display: table-cell;
width:23vw;
height:54vh;
text-align: center;
margin-bottom:0px;
color: #ffffff;	
font-size: 1.4vw;
letter-spacing: 1px;
 font-family: BurbankBigRegular;
 text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; 
	vertical-align:middle;

word-wrap: break-word;
}

.modal.lesson .modal_text{
   display: table-cell;
    width: 28vw;
    text-align: center;
    color: #ffffff;
	font-size:calc(1vw + 1vh);
    font-family: Gotham Narrow Medium;
word-wrap: break-word;
       margin-top: 0px;
    margin-bottom: 0px;
	vertical-align:middle;
	height: 48vh;
	
}

.gear_name_text{
width:23vw;
text-align: center;
margin-bottom:0px;
color: #ffffff;	
font-size: 1.4vw;
letter-spacing: 1px;
 font-family: BurbankBigRegular;
word-wrap: break-word;
 text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 41px #f7ef00; 
}

.modal.lesson .modal_title{
	      display: inline;
    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
    width: 17vw;
    height: 7vh;
    left: 41.9vw;
    top: 13vh;
    color: #ffffff;
    font-size: calc(2vw + 3vh);
    font-family: BurbankBigRegular;
    word-wrap: break-word;
}

.modal.sweepstakes .modal_text{
	position: absolute;
    text-align: center;
    color: #ffffff;
	font-size: 1.7vw;
    font-family: Gotham Narrow Medium;
word-wrap: break-word;
       margin-top: 0px;
    margin-bottom: 0px;
}

.modal.unfinished .modal_text{
	position: absolute;
    text-align: center;
    color: #ffffff;
	font-size: 1.7vw;
    font-family: Gotham Narrow Medium;
word-wrap: break-word;
       margin-top: 0px;
    margin-bottom: 0px;
}
.modal.lesson_hint .modal_text{
display: table-cell;
vertical-align:middle;
    width: 29.5vw;
height: 16vh;
    text-align: center;

    color: #ffffff;
    font-size: 1vw;
    font-family: Gotham Narrow Medium;
    word-wrap: break-word;
    margin-top: 0px;
    margin-bottom: 0px;
}

.modal.lesson_hint2 .modal_text{

    width: 29.4vw;

    text-align: center;

    color: #ffffff;
    font-size: 1vw;
    font-family: Gotham Narrow Medium;
    word-wrap: break-word;
    margin-top: 0px;
    margin-bottom: 0px;
}



.land_bg{
position:relative;
width:100vw;
border: 0;
}

.land_tt{
	position: absolute;
width:28vw;
top:0vh;
left:36vw;
	border: 0;
}

.land_button{
	position: absolute;
    width: 13vw;
    left: 43.5vw;
	border: 0;
top:32vw;
	
	
}
.land_logo{
	position: absolute;
width:19vw;
top:2vw;
left:11vw;	
	border: 0;
}
.land_cd1{
position:relative;
width:7vw;
top:0vh;
	margin-left:20px;
margin-right:20px;
border: 0;
}
.land_cd2{
position:relative;
width:6vw;
top:0vh;
	margin-left:20px;
margin-right:20px;
border: 0;
}
.land_cd3{
	position:relative;
width:10vw;
top:0vh;
margin-left:20px;
margin-right:20px;
	border: 0;
}
.credits{
	position:relative;
	width:100vw;
top:0vh;
left:0vw;	
	text-align: center;
}

.land_area{
	display: inline-block; 
	vertical-align: top;
	
}

.modal_video_container{
	position: absolute;
	 width:32vw;
	height:31vh;
	left:33.5vw;
top:38vh;
	
}

.modal_video{
	
	 max-width:32vw;
max-height:31vh;
		display: block;
margin-left: auto;
    margin-right: auto;

}

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

html, body {margin: 0; width:100%; height: 100%;}

#game_body{overflow:hidden;}
 
#land_body{overflow-x:hidden;overflow-y:auto; }