@font-face {
  font-family: 'LT-Bold'; /*a name to be used later*/
  src: url('../fonts/ITC Avant Garde Gothic LT Bold.ttf'),url('../fonts/ITCAvantGardeStd-Bold.eot'); /*URL to font*/
  
}

@font-face {
  font-family: 'avantlite'; /*a name to be used later*/
  src: url('../fonts/Proxima Nova Light.ttf'),url('../fonts/Proxima Nova Light.eot'),url('../fonts/Proxima Nova Light.woff'); /*URL to font*/
  
}

@font-face {
  font-family: 'avantliteex'; /*a name to be used later*/
  src: url('../fonts/Proxima Nova Extrabold.otf'); /*URL to font*/
  
}

body{
      font-family: 'avantlite';
    overscroll-behavior: contain;
    margin: 0;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}
html, body {
  overflow-x: hidden;
}

 h3, p, h4{
  
  font-family: 'avantlite'!important;
  color: #446171;
 
}

h3{
    font-size: 4.5vh;
}

p{
  font-size: 2.5vh;
  line-height: normal;
   text-align: center;
}

.text-shadow{
  text-shadow: 4px 2px 0px rgb(40, 101, 153);
}


.tpheader{
    text-align: center;
    font-size: 4vh;
    margin-bottom: 1vh;
    margin-top: 4vh;
}

.ps{
      width: 40vh;
    margin: 3vh auto 1vh;
    display: block;
}
.secondlevel{
    margin-bottom: 2vh!important;
    margin-top: 2vh;
    font-size: 3.5vh!important;
}

.amp{
      margin-bottom: 1vh!important;
    font-size: 3vh!important;
}

.twin{
  margin-bottom: 1vh!important;
    font-size: 3.5vh!important;
}

h3{
  margin-top: 10px;
  margin-bottom: 10px;
}

h4{
  margin-top: 2px;
  margin-bottom: 2px;
   font-size: 3vh!important;
}

.loading-holder,.tc-holder,.leaderboard,.loser_infinite,.scratch-holder,.scene-holder,.data-holder,.detailsenter,.thankswinner,.thanksloser,.winner,.drink-select,.howto-holder,.loser,.howto2-holder,.controls-holder{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
    overflow: hidden;
    overscroll-behavior: contain;
}

.in-game,.celebration-scene{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
    overflow: hidden;
    overscroll-behavior: contain;
}

.top-area{

  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
 background: #3a72b7;
    background: -moz-radial-gradient(center, ellipse cover, #659bd4 0%, #3a72b7 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #659bd4 0%,#3a72b7 100%);
    background: radial-gradient(ellipse at center, #659bd4 0%,#3a72b7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#659bd4', endColorstr='#3a72b7',GradientType=1 );
}

.top-area-loading{

  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-image: url(../images/background.jpg);
    background-size: cover;
  background-position: center;
 
}

.top-area-landing {
    position: absolute;
    z-index: 100;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    
    background-image: url(../images/background.jpg);
    background-size: cover;
}

.content-holder{

}

.yellowbar{
        background: #eae977;
    background: -moz-linear-gradient(left, #eae977 1%, #e0df36 48%, #eae977 100%);
    background: -webkit-linear-gradient(left, #eae977 1%,#e0df36 48%,#eae977 100%);
    background: linear-gradient(to right, #eae977 1%,#e0df36 48%,#eae977 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae977', endColorstr='#eae977',GradientType=1 );
    padding: 1vh;
    margin-top: 3vh;
    margin-bottom: 3vh;
}



.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
     background-color: #ffffff;
    background-color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 0px!important;
}

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



.loading-bar{
      margin: 6vh auto;
    display: block;
}

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





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

.modal-body{
    text-align: center;
    border-radius: 1vh;

}

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

.orientation center{
    margin: 20% auto;
}

@-webkit-keyframes rotating {
  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;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #3f5c6d;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #3f5c6d;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #3f5c6d;
}
:-moz-placeholder { /* Firefox 18- */
  color: #3f5c6d;
}

.swinton-bottom{
  margin: 2vh auto 0vh;
  width: 17vh;
  image-rendering: -webkit-optimize-contrast
}


.logo-area{
  position: relative;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: 10vh;
  background-color: #ffffff;
  text-align: center;
  
}


.logo{
       width: 18vh;
    margin: 3vh auto 1vh;
    display: block;
}

.slag{
  width: 33vh;
    margin: 3vh auto 1vh;
    display: block;
}

.ltext{
   width: 40vh;
    margin: 4vh auto 2vh;
    display: block;
}

.btns{
      width: 16vh;
    margin: 1vh auto 1vh;
    display: block;
}


.stripes{
  position: fixed;
    width: 19vh;
    right: -2px;
    top: -2px;
}

/* Clear floats (clearfix hack) */

.home-floor{
   width: 100%;
    height: auto;
    min-height: 10vh;
    position: fixed;
    bottom: 10vh;
    z-index: -2;
    left: 0;
    right: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,356caa+99&0+0,0+50,1+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(125,185,232,0) 0%, rgba(89,146,201,0) 50%, rgba(53,108,170,0.98) 99%, rgba(53,108,170,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(125,185,232,0) 0%,rgba(89,146,201,0) 50%,rgba(53,108,170,0.98) 99%,rgba(53,108,170,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(125,185,232,0) 0%,rgba(89,146,201,0) 50%,rgba(53,108,170,0.98) 99%,rgba(53,108,170,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#356caa',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#leaderboard-table{
    width: 100%;
    color: black;
   
   
}

#leaderboard-table thead tr th{
 font-family: 'LT-Bold'!important;
    color: #ffffff;
    text-align: center;
    font-size: 2vh;
    padding: 1vh;
}

#leaderboard-table thead tr{
  border-bottom: 1px solid #1759a9;
  
}

.lbentry{
  width: 90%;
   
    margin: 3vh auto 1vh;
    display: block;
    font-size: 4vh;
    letter-spacing: 3vh;
    text-indent: 3vh;
    text-align: center;
    text-transform: uppercase;
    font-family: 'LT-Bold'!important;
    border: .3vh solid white;
    background-color: transparent;
    color: white;
}

/* Important part */
.leaderboard-table-scroll{
    height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
   
    
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-button {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
         background: #df4a11;
    border: 0px none #ffffff;
    border-radius: 49px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1759a9;
   border: 0px none #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #df4a11;
   border: 0px none #ffffff;
}
::-webkit-scrollbar-track {
      background: #cfd8e0;
    border: 0px none #ffffff;
    border-radius: 69px;
}
::-webkit-scrollbar-track:hover {
  background: #cfd8e0;
   border: 0px none #ffffff;
}
::-webkit-scrollbar-track:active {
 background: #cfd8e0;
   border: 0px none #ffffff;
}
::-webkit-scrollbar-corner {
  background: transparent;
}




#distance{
         font-size: 3vh!important;
    font-weight: bold;
    color: #de4b11;
}

.loading-content{
      position: relative;
    text-align: CENTER;
}

.loading-logo{
      width: 30vh;
    margin: 12vh auto 0vh;
}

.btn {
 background: #6f2f81;
    background-image: -webkit-linear-gradient(top, #c39ecb, #6f2f81);
    background-image: -moz-linear-gradient(top, #c39ecb, #6f2f81);
    background-image: -ms-linear-gradient(top, #c39ecb, #6f2f81);
    background-image: -o-linear-gradient(top, #c39ecb, #6f2f81);
    background-image: linear-gradient(to bottom, #c39ecb, #6f2f81);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  font-family: 'LT-Bold';
  color: #ffffff;
  font-size: 2.5vh;
  padding: 10px 20px 10px 20px;
  border: solid #ffffff 3px;
  text-decoration: none;
  vertical-align: middle;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.route_preview{
    width: 37vh;
    z-index: -1;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -6vh;
}

.previewbtn{
      position: relative;
    margin-top: 9vh!important;
}

.orientation center p{
    text-align: center!important;
    color: black!important;
}

.ngbtn{
   background-color: #df4a11;
    border: #df4a11;
    font-family: LT-Bold;
    color: white;
    padding-left: 5vh;
    font-size: 4vh;
    padding-right: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-top: 2vh;
    width: 100%;
    -webkit-box-shadow: 6px 6px 0px -1px rgb(31, 117, 166);
    -moz-box-shadow: 6px 6px 0px -1px rgb(31, 117, 166);
    box-shadow: 6px 6px 0px -1px rgb(31, 117, 166);
}

.ngbtnaccept{
  background-color: #df4a11;
  border: none;
  font-family: LT-Bold;
  color: white;
  font-size: 3vh;
  padding-top: .5vh;
  padding-bottom: .5vh;
  margin-right: 3vh;
  text-align: center;
  width: 45%;
  height: 6vh;
}

.ngbtndecline{
 background-color: #ffffff;
 border: none;
 font-family: LT-Bold;
 color: #003471;
 font-size: 3vh;
 padding-top: .5vh;
 padding-bottom: .5vh;
 text-align: center;
 width: 45%;
 height: 6vh;
}

.termsholder{
      margin-left: 0;
    text-align: center;
    font-size: 2vh;
}

.termsheader{
      font-size: 3vh;
}

.termsbtns{
      width: 100%;
    margin: 0 auto;
    text-align: center;
}

.broomdoubt{
      width: 25vh;
    display: block;
    float: right;
    margin-top: -19vh;
}

.cuttingdoubt{
      width: 30vh;
    margin-bottom: 2vh;
    display: block;
    float: right;
}

.choosecontrols{
   text-align: center;
   font-size: 4vh;
   margin-bottom: 3vh;
}

.controlbtn{
       background-color: #df4a11;
    border: .5vh solid #df4a11;
    font-family: LT-Bold;
    color: white;
    padding-left: 1vh;
    font-size: 3vh;
    padding-right: 1vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    margin-top: 2vh;
    width: 100%;
    margin-right: 3vh;
    text-align: left;
     -webkit-box-shadow: 6px 6px 0px -1px rgb(53, 100, 151);
    -moz-box-shadow: 6px 6px 0px -1px rgb(53, 100, 151);
    box-shadow: 5px 5px 0px 0px rgb(53, 100, 151);
}


.controlbtn img{
      width: 5vh;
    float: right;
    margin-left: 4vh;
}

.gameinfobox{
    margin-top: 3vh;
    padding-bottom: 100%;

}

.palecolor{
  color: #c4e2f3;
}

.obstacles{
  width: 40vh;
    display: block;
    margin: 3vh auto 3vh;
}

.routebtn{
      background-color: #df4a11;
    border: #df4a11;
    font-family: LT-Bold;
    color: white;
    font-size: 3vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    margin-top: 2vh;
    width: 100%;
    text-align: center;
    -webkit-box-shadow: 6px 6px 0px -1px rgb(53, 100, 151);
    -moz-box-shadow: 6px 6px 0px -1px rgb(53, 100, 151);
    box-shadow: 5px 5px 0px 0px rgb(53, 100, 151);
}

.controlpop{
  text-align: left;
    padding-bottom: 3vh;
    width: 100%;
    height: min-content;
}


#heartsec{
    width: 6vh;
    height: 6vh;
    background-image: url(../images/heart.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    font-family: LT-Bold;
    color: white;
    padding-top: .8vh;
    font-size: 2.5vh;
}

.ingamelogo{
  width: 9vh;
}

.nagging{
   width: 8vh;
    opacity: 0.2;
    display: block;
}

.inputdetail{
       width: 100%;
    color: #c4e2f3;
    background-color: transparent;
    border: .3vh #c4e2f3 solid;
    padding: 1vh;
    font-size: 2.5vh;
    margin-bottom: 1vh;
     font-family: LT-Bold;
}

.detailsbox{
  margin-top:2vh;
}

#game_holder{
  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;


}

.bluebtn{
  background-color: #003471;
}



.sharefb{
      width: 4vh;
    margin-left: 2vh;
}

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

.marb4{
  margin-bottom: 4vh;
}

.carousel-inner{
  overflow: visible!important;
}

.si{
  margin: 3vh auto;
  display: block;
  width: 15vh;
}

.ngbtngo{
  background-color: #df4a11;
  border: #df4a11;
  font-family: LT-Bold;
  color: white;
  padding-left: 5vh;
  font-size: 4vh;
  padding-right: 5vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
  margin-top: 2vh;
  width: 100%;
  -webkit-box-shadow: 6px 6px 0px -1px rgb(5, 27, 53);
  -moz-box-shadow: 6px 6px 0px -1px rgb(5, 27, 53);
  box-shadow: 6px 6px 0px -1px rgb(5, 27, 53);
}

.darkblue{
  background-color: #003471!important;
}

#carspin{
    width: 41vh!important;
    height: 41vh!important;
    margin: 2vh auto;

}


.titlepad{
  margin-top: 5vh;
}

.wrapperconf {
      position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

[class|="confetti"] {
  position: absolute;
}

#leaderboard-table{
    width: 100%;
    color: black;
   
   
}

#leaderboard-table thead tr th{
 font-family: 'LT-Bold'!important;
    color: #ffffff;
    text-align: center;
    font-size: 2vh;
    padding: 1vh;
}

 #leaderboard-table tbody tr td{
     font-family: 'LT-Bold'!important;
    color: #ffffff;
    text-align: center;
    padding: 1vh 1vh 1vh 1vh;
    font-size: 2.5vh;
}

#leaderboard-table tbody tr,#leaderboard-table thead tr{
  border-bottom: 1px solid #1759a9;
  
}

.red {
  background-color: #E94A3F;
}

.yellow {
  background-color: #FAA040;
}

.blue {
  background-color: #5FC9F5;
}
.prizes{
      width: 41vh;
    display: block;
    margin: -3vh auto 3vh;
}

.distance-holder{
    background-color: transparent;
    z-index: 100;
    margin: 0;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position: absolute;
    left: 0px;
    top: 8vh;
    right: 0px;
}

.distancetext{
    color: #de4b11;
    margin-top: 1vh;
    text-align: CENTER;
    font-size: 2.5vh;
    margin-bottom: 0vh;
}

.mart2{
  margin-top: 3vh;
}

.city{
 
    background-image: url('../images/city.jpg');

}

.country{
 background-image: url('../images/countryside.jpg');

}

.serve{
  position: absolute;
    z-index: 200;
    width: 15vh;
    bottom: 1vh;
    left: 0;
    right: 0;
    margin: 0 auto;
}

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

.textback{
  position: absolute;
    width: 41vh;
    display: block;
    margin: 3vh auto 1vh;
    left: 0;
    right: 0;
    z-index: 0;
}

.headliner{
        width: 35vh;
    display: inline-block;
    margin: 4vh auto 1vh;
}

.text_liner{
      position: relative;
    height: 11vh;
    background-image: url(../images/textback.png);
    background-repeat: repeat-x;
    background-size: contain;
    margin: 2vh auto 2vh;
    text-align: center;
}

.textholder{
  padding: 2vh;
}

.prizes{
      display: block;
    width: 40vh;
    margin: 0 auto;
}

.drinks{
      width: 17vh;
    display: inline-block;
    margin: 0 auto;
    padding: 1vh;
}

.howotoserve{
  width: 41vh;
    margin: 2vh auto 3vh;
    display: block;
}

.controlstitle{
      margin: 3vh auto 2vh;
    display: block;
    width: 38vh;
}

.controlbtns{
  width: 18vh;
    display: inline-block;
    margin: 2vh auto 1vh;
    padding: 1vh;
}

.conrolsholder{
      text-align: center;
}

.fillinfo{
    text-align: left;
    font-size: 1.2vh;
    font-family: 'avantlite'!important;
    font-weight: bold;
    color: #dddb20;
    display: inline-block;
    margin-top: 2vh;
    padding-right: 1.5vh;
    right: 6vh;
    position: absolute;
}

.glassholder{
       position: relative;
    display: block;
    height: 3vh;
    margin-right: 6vh;
    float: right;
}


.glass{
    width: 3vh;
    position: absolute;
    z-index: 1;
}


.drink{
     width: 3vh;
    position: absolute;
    z-index: 1;
    bottom: -6vh;
    height: 0%;
}

.lives,.serves{
      text-align: left;
    padding-left: 3vh;
    font-size: 1.7vh;
    font-family: 'avantlite'!important;
    font-weight: bold;
    color: #dddb20;
    margin-top: .5vh;
}

.servescount{
      color: #c62474;
    font-size: 4vh;
    font-weight: bold;
    font-family: 'avantliteex'!important;
}


.containerscratch {
    width: 35vh!important;
    height: 35vh!important;
    position: relative;
    margin: 2vh auto 0vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.challengeholder img{
 width: 30%;
 margin-bottom: 1vh;
 padding: .5vh;
}

.containerscratch img {
       padding: 0;
    width: 20vh!important;
    margin: 8vh auto 0;
    pointer-events: none;
}
.containerscratch canvas {
      position: absolute;
    top: 0;
    width: 35vh!important;
    height: 35vh!important;
    border-radius: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.winnerdetails{
  width: 35vh;
    display: block;
    margin: 1vh auto 1vh;
}

.termsbtns{
      width: 18vh;
    margin: 1vh auto 1vh;
    display: inline-block;
    padding: 1vh;
}

.favouriteserve{
      width: 35vh;
    display: inline-block;
    margin: 2.5vh auto 1vh;
}

.upper{
  text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.2px;
    font-size: 2vh;
}


.logo_big{
    margin: 4vh auto 1vh;
    display: block;
    width: 27vh;
}

#game_holder div canvas{
  position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.extramargin{
  margin: 3vh auto 2vh;
}

.dataentry{
      border: 2px solid #3f5c6d;
    border-radius: 5px;
    padding: .5vh;
    width: 40vh;
    text-align: left;
    text-indent: .5vh;
    text-transform: uppercase;
    color: #3f5c6d;
    font-weight: bold;
}

.tcenter{
  text-align: center!important;
}