body {
  font-family: "neutradisplaytitling" !important;
  background-color: #00b0df;
  height: 100%;
}

body:after {
  position: absolute;
  z-index: -1;
  content: url(../images/blur.jpg);
  display: none;
}

@font-face {
  font-family: 'FullBantamwt';
  /*a name to be used later*/
  src: url('../fonts/AvenirNextLTPro-Bold.otf');
  /*URL to font*/
}

@font-face {
  font-family: 'JuniorFlyweight';
  /*a name to be used later*/
  src: url('../fonts/AvenirNextLTPro-Regular.otf');
  /*URL to font*/
}

p {
  font-family: "JuniorFlyweight" !important;
  font-size: 20px;
  color: #ffffff !important;
  margin: 2vh 2px 2vh 2px;
}

.p-mod{
  font-family: "FullBantamwt" !important;
}

span {
  font-family: "JuniorFlyweight" !important;
  font-size: 10px;
  color: #676767 !important;
  margin: 2vh 2px 2vh 2px;
}

.form-holder input {
  font-family: "FullBantamwt" !important;
  font-size: 10px;
  color: #676767 !important;
}

.form-holder input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: "FullBantamwt" !important;
  font-size: 10px;
  color: #1583c7 !important;
  text-transform: uppercase;
}

.form-holder input::-moz-placeholder {
  /* Firefox 19+ */
  font-family: "FullBantamwt" !important;
  font-size: 10px;
  color: #1583c7 !important;
  text-transform: uppercase;
}

.form-holder input:-ms-input-placeholder {
  /* IE 10+ */
  font-family: "FullBantamwt" !important;
  font-size: 10px;
  color: #1583c7 !important;
  text-transform: uppercase;
}

.form-holder input:-moz-placeholder {
  /* Firefox 18- */
  font-family: "FullBantamwt" !important;
  font-size: 10px;
  color: #1583c7 !important;
  text-transform: uppercase;
}

small {
  font-family: "FullBantamwt" !important;
  font-size: 9px;
}

h3 {
  color: #ffffff !important;
  font-size: 4vh;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: "FullBantamwt" !important;
}

h4 {
  color: #ffffff !important;
  font-size: 3vh !important;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: "FullBantamwt" !important;
}

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

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

#container {
  position: relative;

}


#container3d canvas {
  position: absolute;
  z-index: 5;
  margin-top: 9vh;
}

.loading-holder, .thanks-holder, .detail-enter, .terms-holder, .welcome-holder, .how-to-play, .mail-prize, .thank-you, .add-letter, .unjumble, .winner, .loser, .enter-code, .won-grandprize, .claim-prize, .won-secondprize, .data-entry, .thankyou-holder, .invalid-code, .spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  padding: 9px;
  display: none;
  background-color: #00b0df;

}

.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;
}

.fruitbtm {
  width: 8vh;


}


.wt {
  width: 35vh;
  margin-top: 6vh;
}

.top-area {

  position: relative;
  z-index: 100;
  background-size: contain;
  width: 100%;
  height: 100%;
  text-align: center;

}

.footer-area {
  position: fixed;
  z-index: 200;
  background-size: contain;
  width: 100%;
  height: 2%;
  bottom: 0;
  text-align: center;
  margin-top: -7px;
  background-color: #1583c7;

}

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

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

.content-holder {
  position: absolute;
  left: 0px;
  top: 20vh;
  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-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.7vh;
}

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

.txt-head {

  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  margin-bottom: 1vh;
  font-size: 2vh;
  margin-top: .5vh;

}

.terms {
  font-family: freebooter;
  font-size: 3vh;
  margin-bottom: 0vh;
  margin-top: .5vh;
}

.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 {
  padding-left: 3vh;
  padding-right: 3vh;
  background-color: white;
  border-radius: 1vh;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  padding-bottom: 1vh;
  text-align: center;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 36px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 36px -1px rgba(0, 0, 0, 0.75);
}



.termholder {
  height: 36vh;
  overflow: scroll;
  width: 80%;
  margin: 0 auto;
}

.termbtnholder {
  text-align: center;
}

.termholder p {
  font-family: helvetica-bold;
  color: #381805;
  font-size: 1.5vh;
}

.termsbtns {
  width: 20vh;
  position: relative;
  margin: 0 auto;
}

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

.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: 97%;
  text-align: center;
}

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

.loading-right {
  float: right;
  height: 90%;
}

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

.winner-prize-s {
  width: 35vh;
  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: 40vh;
  position: absolute;
  left: 0px;
  right: 0px;
  margin: 24vh auto;
}

.loading-bar {
  position: fixed;
  top: 60%;
  right: 50%;
  -webkit-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

.loading-bar img {
  width: 7vh;

}

.grad {
  width: 100%;
  height: 100%;
}

.stonelogo {
  width: 25vh;
}

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

.stp-1-img {
  width: 34vh;
  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;
}




.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;
  background-color: #00b0df;
  border: 2px solid white;
  border-radius: 10px;
  margin: 15px;
  width: auto;
}

.txt-modal-2 {
  width: 75%;
  margin: 0 auto;
  font-family: helvetica-bold;
  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-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.5vh;
  text-align: center;
  margin-bottom: 3vh;
}

.modal-body {
  text-align: center;
  padding: 10px;
}

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

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

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

.code {
  width: 4vh;
  height: 4vh;
  margin: 0 auto;
  border: none;
  text-align: CENTER;
  background-color: #ffffff00;
  text-transform: uppercase;
  font-family: 'FullBantamwt';
  color: #ffffff;
}

.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;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f378c+0,36173a+100 */
  background: #7f378c;
  /* Old browsers */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #7f378c 0%, #36173a 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#7f378c), to(#36173a));
  background: -o-linear-gradient(top, #7f378c 0%, #36173a 100%);
  background: linear-gradient(to bottom, #7f378c 0%, #36173a 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f378c', endColorstr='#36173a', GradientType=0);
  /* IE6-9 */
  text-align: center;
  border-radius: 1vh;
}

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

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

.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-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.5vh;
  text-align: center;
  margin-bottom: 3vh;
}

.orientation {
  width: 100%;
  height: 100%;
  position: FIXED;
  z-index: 5000;
  background-color: white;
  display: none;
}

.orientation center {
  margin: 20% auto;
}

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

.timer {
  background-image: url(../images/timer.png);
  background-repeat: no-repeat;
  width: 12vh;
  height: 13vh;
  background-size: 100%;
  background-position: center top;
  float: right;
  margin-top: 1vh;
  margin-right: 1vh;
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}

.bonusbtle {
  width: 28vh;
  margin-bottom: 2vh;
}

.secretLoc {
  width: 10vh;
  height: 10vh;
  float: right;
  margin-right: 1vh;
  margin-top: 1vh;
  -webkit-animation: pulse 1s linear infinite;
  animation: pulse 1s linear infinite;
}

.timer p {
  display: block;
  text-align: CENTER;
  margin: 6vh auto;
  font-size: 3vh;
  font-weight: bold;
  margin-left: 2vh;
}

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

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

.inputcontrols {
  width: 14vh;
  margin: 1vh;
  border: 1px dashed black;
  border-radius: 50%;
  padding: 2vh;
}

.inputcontrols2 {
  width: 9vh;
  margin: 1vh;
}

.txt-cen {
  text-align: center;
}

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

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.mar-t {
  margin-top: 10vh;
}

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

.ex {
  position: fixed;
  bottom: 2vh;
  right: 0;
  left: 0;
  width: 13vh;
  margin: 0 auto;
}

.p2w {
  width: 14vh;
  margin-bottom: 4px;
}

.single-diamond {
  width: 12%;
  margin: 4px;
}

.coin-d {
  width: 8%;
  margin: 4px;
}


.modal-small-txt-lessmar {
  width: 75%;
  margin: 0 auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.8vh;
  text-align: center;

}

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

.ret-img {
  width: 36%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.txt2 {
  width: 35vh;
  margin: 1vh auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.8vh;
}

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

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

.txt-dsit {
  width: 75%;
  margin: 7% auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.5vh;
  text-align: center;
  margin-bottom: 3vh;
}

.range {
  display: inline-block;
  width: 70%;
  vertical-align: middle;
}

.speed-change-title {
  width: 75%;
  margin: 7% auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 2vh;
  text-align: center;
  margin-bottom: 3vh;
}

.min-t {
  float: left;
  margin-top: 7px;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.5vh;
}

.max-t {
  float: right;
  margin-top: 7px;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.5vh;
}

input[type=range] {
  height: 29px;
  -webkit-appearance: none;
  width: 70%;
  margin: 0 auto;
  display: inline-block;
  background-color: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  -webkit-box-shadow: 1px 1px 1px #000000;
  box-shadow: 1px 1px 1px #000000;
  background: #A1740D;
  border-radius: 50px;
  border: 1px solid #000000;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-box-shadow: 1px 1px 1px #000000;
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 21px;
  width: 21px;
  border-radius: 50px;
  background: #FFAF0F;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7.5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #A1740D;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #A1740D;
  border-radius: 50px;
  border: 1px solid #000000;
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 21px;
  width: 21px;
  border-radius: 50px;
  background: #FFAF0F;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #A1740D;
  border: 1px solid #000000;
  border-radius: 100px;
  box-shadow: 1px 1px 1px #000000;
}

input[type=range]::-ms-fill-upper {
  background: #A1740D;
  border: 1px solid #000000;
  border-radius: 100px;
  box-shadow: 1px 1px 1px #000000;
}

input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 21px;
  width: 21px;
  border-radius: 50px;
  background: #FFAF0F;
  cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
  background: #A1740D;
}

input[type=range]:focus::-ms-fill-upper {
  background: #A1740D;
}


.infobox {
  width: 5vh;
  height: 5vh;
  float: left;
  margin-left: 1vh;
  margin-top: 1vh;
}

.step-3 {
  width: 34vh;
  position: absolute;
  margin: 0 auto;
  left: 0;
  bottom: 4vh;
  right: 0;
}

.pag {
  width: 27%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.takeme2 {
  width: 20vh;
  position: relative;
  margin: 0 auto;
  bottom: -13vh;
}

.oops {
  font-size: 5vh;
  font-family: freebooter;
  margin-top: 12%;
}

.mdimg {
  width: 88%;
  margin-top: 21%;
  left: 0;
  right: 0;
}

.platsec {
  width: 18vh;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 100;
  bottom: 6vh;
}

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

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

.txtmodal-head2 {
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  text-align: center;
  margin-bottom: 1vh;
  margin-top: -1vh;
  font-size: 2.5vh;
}

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

.startshiptxt2 {
  width: 85%;
  margin: 4vh auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 1.8vh;
  text-align: center;
  margin-bottom: 1vh;
}

.startshiptxt3 {
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  display: block;
  font-size: 1.8vh;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.startshiptxt4 {
  width: 85%;
  margin: 1vh auto;
  font-family: helvetica-bold;
  font-weight: bold;
  color: #381805;
  font-size: 2vh;
  text-align: center;
  margin-bottom: 1vh;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
  }

  50% {
    -webkit-transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  50% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}


.title-text-stroked {
  font-family: oswald-regular;
  font-size: 3vh;
  color: #80388d;
  font-weight: bolder;
  text-transform: uppercase;
  padding-top: 2vh;
}

.message-sub {
  font-family: OpenSans-Semibold;
  font-size: 1.8vh;
  margin-top: 2vh;
}

.message-sub span {
  color: #009fe3;
}

.message-sub span:hover {
  cursor: pointer;
}


.prizes-1000 {
  width: 30vh;
  bottom: 0px;
  right: 5vh;
  margin: 0px auto 2vh;
  display: block;
}

.btny {
  border-radius: 1vh;
  font-size: 3vh;
  background: white;
  padding: 1vh 5vh 1vh 5vh;
  text-decoration: none;
  border: none;
  font-family: 'Oswald-DemiBold';
  color: #f18f00;
  font-style: italic;
}

.btny:hover {
  background: #e7e7e7;
  text-decoration: none;
  cursor: pointer;
}

.btnx {
  border-radius: 1vh;
  font-size: 3vh;
  background: #f18f00;
  padding: 1vh 5vh 1vh 5vh;
  text-decoration: none;
  border: none;
  font-family: 'Oswald-DemiBold';
  color: white;
  font-style: italic;
}

.btnx:hover {
  background: #ffa930;
  text-decoration: none;
  cursor: pointer;
}

.instructions {
  font-family: OpenSans-Semibold;
  font-size: 1.8vh;
  margin-top: 2.5vh;
  margin-bottom: 1.5vh;
  text-transform: uppercase;
}

.instructions span {
  color: #80398d;
  display: block;
}

.winner1001 {
  width: 24vh;
  position: absolute;
  bottom: .5vh;
  left: 1vh;
}

.winner1000 {
  width: 30vh;
  position: absolute;
  bottom: 3.5vh;
  left: 0;
  margin: 0px auto 1vh;
  right: 0;
  z-index: 5;
}

.vending-machine {
  position: absolute;
  text-align: CENTER;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.winner-st {
  font-family: oswald-regular;
  font-size: 7vh;
  color: #72317e;
  text-shadow: 3px 3px 0 #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
  text-transform: uppercase;
  padding-top: 3vh;
}

.winner-sub {
  font-family: OpenSans-Semibold;
  font-size: 2vh;
  margin-top: 3vh;
  color: white;
}

.winner-msg {
  font-family: Oswald-Regular;
  font-size: 3.5vh;
  margin-top: 0vh;
  color: white;
}

.frm {
  margin-bottom: 1vh;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: black;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: black;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: black;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: black;
}

.tc {
  height: 40vh;
  overflow-y: scroll;
  padding: 2vh;
  text-align: LEFT;
  margin-top: 3vh;
  margin-bottom: 2vh;
}

.style-tc {
  font-family: oswald-regular;
  font-size: 3vh;
  color: #80388d;
  font-weight: bolder;
  text-transform: uppercase;
  text-align: CENTER;
}



.accepttext {
  margin-left: 1.5vh;
  font-size: 1.6vh;
}

.winningdrink {
  text-align: left;
}

.form-control {
  height: 29px;
}

.er {
  color: red;
}


/**  hollywood styles **/

.welcome-th {
  color: white;
  font-size: 7vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 8vh;
  margin-bottom: 0px;
}

.welcome-th2 {
  color: white;
  font-size: 6vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 3vh;
  margin-bottom: 0px;
}



.fruit-shoot {
  width: 11vh;
  position: absolute;
  bottom: 3vh;
  right: 0;
  left: 0;
  margin: 0px auto;
}

.hollywood-footer-img {
  width: 20vh;

}

.hol_link {
  color: white;
  font-family: MyriadPro;
  margin-top: 2vh;
}

.hol_link b a {
  color: white !important;
  text-decoration: none;
}

.hol_link b a : hover {
  cursor: pointer;
}



.detailsbox {
  border: .5vh solid white;
  padding: 2vh;
  margin-top: 3vh;
}

.form-group {
  color: white;
}

.form-group label {
  font-size: 2.5vh;
}

.alignver {
  vertical-align: top;
}

.white {
  color: white;
}

.slash {
  font-size: 2vh;
  margin-top: 14px;
  display: block;
  text-align: right;
  float: right;
}

.space-slash {
  width: 80% !important;
}

.dob {
  text-align: right;
}

.termslink {
  text-decoration: underline;
  font-size: 1.6vh;
}

.checkbox-inline {
  vertical-align: top !important;
}


.terms {

  width: 20px;
  height: 20px;
}

.terms-box {
  overflow-y: auto;
  max-height: 50vh;
  height: auto;
  margin: 3vh auto;
  text-align: left;
  padding-top: 0;
  color: white !important;
  font-family: 'JuniorFlyweight';
  font-size: 1.7vh;

}

.terms-box p, .terms-box h4, .terms-box ul li {
  font-family: 'FullBantamwt' !important;
  color: white !important;
  font-size: x-small !important;
  word-wrap: break-word;
}

.desc {
  font-family: 'FullBantamwt' !important;
  color: #312e86 !important;
  font-size: 2vh !important;
  text-align: center;
}

.terms-box ol li {
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 15px;
  background-color: #00b0df;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
  background-color: #00b0df;
}

::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border: 0px none #ffffff;

}

::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff;
}

::-webkit-scrollbar-thumb:active {
  background-color: #ffffff;
}

::-webkit-scrollbar-track {

  border: 0px none #ffffff;
  border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
  background-color: #000000;
}

::-webkit-scrollbar-track:active {
  background-color: #00b0df;
}

::-webkit-scrollbar-corner {
  background-color: #00b0df;
}

.seperator {
  margin-top: 4vh;
}

.play-holder {
  position: absolute;
  left: 0px;
  top: 38vh;
  right: 0px;
  margin: 0px auto;
}

.playbtn {
  width: 32vh;
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 1s ease-out infinite;
}



.playbtn:hover {
  cursor: pointer;
}

.sub-steps {
  color: white;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  font-size: 2vh;
}

.sub-title {
  color: white;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  font-size: 2.5vh;
}

.letsgo {
  width: 20vh;
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 1s ease-out infinite;
}

.addLetter, .unjumblebtn, .tryagain, .startAddLetter, .startAddLetter2, .startUnjumble {
  width: 20vh;

}

.blink {
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 1s ease-out infinite;
}

.error {
  background: #FF9800 !important;
}

.welcome-th4 {
  color: white;
  font-size: 3.5vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 4vh;
  margin-bottom: 0px;
}

.welcome-th5 {
  color: white;
  font-size: 5vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 4vh;
  margin-bottom: 0px;
}

.unlock {
  width: 30vh;
  margin: 0 auto;
  display: block;
}



::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #676767 !important;
  font-size: 2vh;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #676767 !important;
  font-size: 2vh;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #676767 !important;
  font-size: 2vh;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #676767 !important;
  font-size: 2vh;
}


.input_correct {
  border: none !important;
  /*background: #90c46f!important;*/
  background: #649048 !important;
  border-bottom: 4px solid #58af65 !important;
  width: 100% !important;
  height: 70px !important;
  font-size: 1.5rem !important;
  color: #ffffff !important;
  text-align: CENTER !important;
  z-index: -1;
  position: relative;
  margin-left: .5vh;
  margin-right: .5vh;
}


.input_correct_holder {
  width: 5.5vh !important;
  display: inline-block;
  height: 70px !important;
}

.top-space {
  margin-top: 3vh;
}

.welcome-th3 {
  color: white;
  font-size: 3.5vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 8vh;
  margin-bottom: 0px;
}


.inputf {
  width: 6.3vh !important;
  border: none !important;
  height: 20vh;
  margin-top: 21px;
  background-color: transparent !important;
  font-size: 1.2rem !important;
  text-align: center;
  padding-top: 6vh !important;
  background-size: 100% !important;
  color: white !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  pointer-events: none;
}

.input1 {
  background-image: url(../images/bottle1.png) !important;
  padding-left: 1.5vh;
}

.input2 {
  background-image: url(../images/bottle2.png) !important;
  padding-right: 3vh;
}

.input3 {
  background-image: url(../images/bottle3.png) !important;
  padding-left: 2vh;
}

.input4 {
  background-image: url(../images/bottle4.png) !important;

}

.input5 {
  padding-right: 3vh;
  background-image: url(../images/bottle5.png) !important;


}

.nopad {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.input6 {
  background-image: url(../images/bottle6.png) !important;

}

.draggable {
  display: inline-block;
}


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5, 1.5);
    opacity: .8;
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    opacity: .8;
  }

  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}


.marg-top {
  margin-top: 20vh;
}


.howtosetup {
  position: relative;
  width: 100%;
  height: 70vh;
  z-index: 50;
  margin-top: 3vh;
  background-color: #df7c9f;
  padding-top: 2vh;
  padding-left: 1vh;
  padding-right: 1vh;
}

.sub-steps1 {
  color: white;
  text-shadow: 0px 3px 2px #e05b9d;
  font-size: 5vh
}

.sub-steps2 {
  color: white;
  text-shadow: 0px 3px 2px #e05b9d;
  font-size: 3vh
}

.welcome-th6 {
  color: white;
  font-size: 5vh;
  text-shadow: 0px 3px 2px #e05b9d;
  text-align: CENTER;
  margin-bottom: 0px;
}

.welcome-th7 {
  color: white;
  font-size: 3.5vh;
  text-shadow: 0px 3px 2px rgb(88, 174, 101);
  text-align: CENTER;
  margin-top: 4vh;
  margin-bottom: 0px;
}

.resetAll {
  width: 15vh;
  margin-top: 4vh;

}

.resetAll2 {
  width: 15vh;
  margin-top: 4vh;
  display: none;
}

.top-green-head {
  width: 100%;
}


.whites-logo {
  width: 11vh;
  margin: 2vh auto 1vh;
}

.arr-left {
  width: 5vh;
  padding-right: 5px;
}

.arr-right {
  width: 5vh;
  padding-left: 5px;
}


.draghelper {
  position: absolute;
  width: 8vh;
  z-index: 20;
  animation: draghelp 2s linear infinite;
  -moz-animation: draghelp 2s linear infinite;
  /* Firefox */
  -webkit-animation: draghelp 2s linear infinite;
  /* Safari and Chrome */
}

.inputholder {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}


.inputholder hr {
  border: 2px solid #fccd01;
  width: 100%;
  margin: 0 auto;
}

.next, .enter, .claim {
  -webkit-animation: pulse 1s ease-out infinite;
  animation: pulse 1s ease-out infinite;
}

.termstext {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin-bottom: 1vh;
}


.red {
  color: #79162B !important;
}

.cyc {
  width: 12vh;
  display: block;
  margin: 1vh auto 0;
}

.logobtm {
  width: 10vh;
  margin-top: 1vh
}


.form-holder {
  width: 80%;
  margin: 0 auto;
}

.age {
  border: 1px solid #76bf21;
  padding: 4px;
  display: inline-block;
  width: 49%;
  border-radius: 4px;
}

.age input {
  vertical-align: bottom;
}

.tc-chk {
  border: 1px solid #76bf21;
  padding: 4px;
  display: inline-block;
  width: 49%;
  border-radius: 4px;
}

.tc-chk input {
  vertical-align: bottom;
}



.form-control {
  margin-bottom: 1vh;
  border: 1px solid #72B821;
  text-align: center;
}


.btn-template {
  background-color: #ffffff;
  border: none;
  width: 35vh;
  padding: 5px 10px 5px 10px;
  font-family: "FullBantamwt" !important;
  color: #00b0df !important;
  display: block;
  font-size: 3.5vh;
  margin: 0 auto;
  border-radius: 5px;
}

.btn-template:focus {
  text-decoration: none;
}

a {
  vertical-align: middle;
  color: #ffffff !important;
  font-family: "JuniorFlyweight" !important;
}

label {
  font-weight: normal !important;
}

.whites-logo2 {
  width: 22%;
  margin: -10% auto 0;
  display: block;
}

.vendorlogo {
  width: 14vh;
  display: block;
  margin: 1vh auto;
}

.whites-logo-loading {
  width: 20vh;
}

.mar-top {
  margin-top: -3vh;
}

.mar-top2 {
  margin-top: -6vh;
}


.top-area-form {
  position: fixed;
  z-index: 100;
  background-size: contain;
  width: 100%;
  height: 100%;
  text-align: center;
  border: 10px solid transparent;
}

.fake-form {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: none;

}

.worldpaylogo {
  width: 20vh;
  float: left;
}

.fixed-circle {
  width: 60vh;
  height: 60vh;
  position: fixed;
  right: 0;
  bottom: -10%;
  background-color: #ffffff0f;
  border-radius: 50%;
  left: 70%;
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  zoom: 1.2;
}

.chocks{
  width: 14vh;
  transform: rotate(270deg);
  box-sizing: border-box;
}

.font-large{
  font-size: 7vh;
}

.winner-holder{
  background-color: white;
  padding: 1vh;
  border-radius: 5px;
  margin: 0 auto 2vh;
  width: 35vh;
}

@media (min-width: 768px){
  .modal-dialog {
      width: 600px!important;
      margin: 30px auto;
  }
}

.mb-3{
  margin-bottom: 3vh;
}