body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
 }

 @font-face {
    font-family: 'freebooter'; /*a name to be used later*/
    src: url('../fonts/FreebooterUpdated.ttf'); /*URL to font*/
}

 .loading{
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    text-align: CENTER;
    padding-top: 40vh;
}

#container {
	position: relative;
	
}

#container3d canvas {
	position: absolute;
}

.loading-holder,.tc-holder,.info-holder{
	position: fixed;
	width: 100%;
	height: 100%;

}

.in-game{
	    position: fixed;
    width: 100%;
    height: 9vh;
}



.bottom-white{
	background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 25%;
    padding-top: 6vh;
    text-align: center;
}

.bottom-white-small{
	background-color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10%;
    padding-top: 3vh;
    text-align: center;
}

.top-area{
	background-color: white;
    background-image: url(../images/sea-back.png);
    position: fixed;
    z-index: 100;
    background-size: contain;
    top: 0;
    width: 100%;
    height: 75%;
    text-align: center;
}

.top-logo{
	width: 50vh;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 2vh auto;
    z-index: 105;
}

.content-holder{
	position: absolute;
    left: 0px;
    top: 25vh;
    right: 0px;
}

.play{
	width: 18vh;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 100;
}

.txt{
	width: 35vh;
    margin: 0 auto;
    font-family: Helvetica;
    font-weight: bold;
    color: #381805;
    font-size: 1.8vh;
}

.txt-modal{
	width: 75%;
    margin: 0 auto;
    font-family: Helvetica;
    font-weight: bold;
    color: #381805;
    font-size: 1.8vh;
    text-align: center;
    margin-bottom: 3vh;
}

.txt-head{
	
    font-family: Helvetica;
    font-weight: bold;
    color: #381805;
    
}

.terms{
	font-family: freebooter;
    font-size: 3vh;
}

.terms input{
	vertical-align: text-top;
    width: 2vh;
    height: 2vh;
}
.green-terms{
	color:green;
}

.step{
	font-size: 3.5em;
    font-family: freebooter;
    margin: 0px;
}
.box{
	background-image: url(../images/box.png);
    z-index: 120;
    background-repeat: no-repeat;
    width: 91%;
    height: 45vh;
    text-align: center;
    margin: 0 auto;
    left: 0;
    background-position: center top;
    background-size: contain;
    right: 0;
}

.top-img{
	width: 29vh;
    margin-top: -18px;
}

.btm-j2o{
    width: 7vh;
    float: right;
    margin-right: 10px;
}

.btm-stone{
    width: 20vh;
    float: right;
}

.top-area-big{
	background-color: white;
    background-image: url(../images/sea-back2.png);
    position: fixed;
    z-index: 100;
    background-size: contain;
    top: 0;
    width: 100%;
    height: 90%;
    text-align: center;
}

.loading-left{
	float: left;
	height: 103%;
}
.loading-right{
	float: right;
	height: 100%;
}

.winner-prize{
	width: 40vh;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: 0px auto 2vh;
}

.winner-prize-s{
	width: 40vh;
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: 0px auto 0vh;
}

.loading-j2o{
	width: 21vh;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 13vh auto;
    z-index: 101;
}

.loading-logo{
	width: 50vh;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 24vh auto;
}

.loading-bar{
	position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: 0px auto 14vh;
}
.loading-bar img{
	width: 4vh;
    
}

.grad{
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	width: 100%;
	height: 100%;
}

.stonelogo{
	width: 25vh;
}

.p-serif{
	font-family: 'PT Serif', serif;
}

.stp-1-img{
	    width: 20vh;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.stp-2-img{
	width: 23vh;
    position: absolute;
    margin: 24px auto;
    left: 0;
    right: 0;
}
.stp-3-img{
	width: 20vh;
    position: absolute;
    margin: 0 auto;
    left: 0;
    bottom: 16px;
    right: 0;
}

.next{
	right: 0;
    width: 9vh;
    float: right;
}

.previous{
	left: 0;
    width: 9vh;
    float: left;
}

.scoreboard{
	width: 100%;
    background-image: url(../images/ingame-top.jpg);
    top: 0px;
    background-size: cover;
    height: 9vh;
    text-align: center;
}

.chest-ind{
	width: 6vh;
    margin-top: 2vh;
}

.gemsHolder,.unlocksHolder{
	border: 2px solid orange;
    border-radius: 7px;
    padding: .5vh;
    margin-top: 2vh;
}


.gemsHolder span img,.unlocksHolder span img{
	width:2.5vh;
}

.gemsHolder span b,.unlocksHolder span b{
	    color: white;
    font-size: 2vh;
    padding: 4px;
    vertical-align: middle;
}

.modal {
		text-align: center;
		padding: 0!important;
	}

	.modal:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -4px;
	}

	.modal-dialog {
		display: inline-block;
		text-align: left;
		vertical-align: middle;
		position: relative;
    	
	}

	.txt-modal-2{
		width: 75%;
	    margin: 0 auto;
	    font-family: Helvetica;
	    font-weight: bold;
	    color: #381805;
	    font-size: 2.5vh;
	    text-align: center;
	    margin-bottom: 3vh;
	}

	.secret-location-found{
		font-size: 5vh;
    font-family: freebooter;
    margin-top: 15%;
	}

	.modal-small-txt{
		    width: 75%;
    margin: 0 auto;
    font-family: Helvetica;
    font-weight: bold;
    color: #381805;
    font-size: 1.5vh;
    text-align: center;
    margin-bottom: 3vh;
	}

	.modal-body{
	    position: relative;
    padding: 15px;
    background-image: url(../images/box2.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 63vh;
	}

	.modal-body2{
	       position: relative;
    padding: 15px;
    background-image: url(../images/box3.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 63vh;
    text-align: CENTER;
	}

	.padding-tp{
		padding-top: 22%;
	}

	.code{
		width: 64%;
	    margin: 0 auto;
	    border: 1px solid #381805;
	    margin-bottom: 3vh;
	}

	.find{
		width: 14vh;
	    position: absolute;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	    z-index: 100;
	}

	.searching{
		width: 12vh;
	    position: absolute;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	    z-index: 100;
	}

	.takeme{
		width: 20vh;
	    position: relative;
	    margin: 0 auto;
	    bottom: 1vh;
	}

	.modal-c{
		position: relative;
	}

.winner-tp{
	    width: 33vh;
    right: 0;
    left: 0;
    position: absolute;
    margin: -5vh auto;
    z-index: 15;
	}

	.txtmodal-head{
		    font-family: Helvetica;
    font-weight: bold;
    color: #381805;
    text-align: center;
    margin-bottom: 3vh;
	}

	.closebtn{
		    width: 5vh;
    float: right;
	}

	.padding-cover{
		height: 6vh;
	}

	.pad{
		padding-right: 10px;
		padding-left: 10px;
	}

	.startshiptxt{
		width: 75%;
	    margin: 35% auto;
	    font-family: Helvetica;
	    font-weight: bold;
	    color: #381805;
	    font-size: 1.5vh;
	    text-align: center;
	    margin-bottom: 3vh;
	}

	.shpwrk-ready{
		font-size: 5vh;
    font-family: freebooter;
	}

	.timer{
		background-image: url(../images/timer.png);
	    background-repeat: no-repeat;
	    width: 10vh;
	    height: 10vh;
	    background-size: contain;
	    float: right;
	    margin-right: 1vh;
	    margin-top: 1vh;
	}

	.secretLoc{
		width: 10vh;
	    height: 10vh;
	    float: right;
	    margin-right: 1vh;
	    margin-top: 1vh;
	}

	.timer p{
		display: block;
	    text-align: CENTER;
	    margin: 5vh auto;
	    font-size: 2vh;
	    margin-left: 4px;
	}

	.timesup{
		font-size: 5vh;
	    font-family: freebooter;
	    margin: 35% auto 0;
	}

	.timesupsub{
		width: 75%;
	    margin: 5% auto;
	    font-family: Helvetica;
	    font-weight: bold;
	    color: #381805;
	    font-size: 1.5vh;
	    text-align: center;
	}

	.inputcontrols{
		width: 11vh;
    	margin: 3vh;
	}

	.info-360{
		position: absolute;
	    margin: 30vh auto;
	    text-align: CENTER;
	    width: 100%;
	    height: 100%;
	}

	@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}