/*USIKU customizations & overrides*/

/* FORCE LANDSCAPE*/
/*@media only screen and (orientation:portrait){*/
  /*html {*/
  /*  height: 100vw;*/
  /*  width: 100vh;*/
  /*  transform: rotate(90deg);*/
  /*  transform-origin: top left;*/
  /*  position: fixed;*/
  /*  left: 100vw;*/
  /*}*/

/*}*/



body {
    margin: 0px;
    padding: 0px;
    /*background:#f8f9fa;*/
      background: #111900;
    /*background:#040405;*/
    background-image: url("../img/dark-leaves-tiled-small.png");
    background-repeat:repeat;
    width:100%;
	height:100vh;
	position: fixed;
    text-align: center;
	bottom: 0px;
	right: 0px;
	left: 0px;
	/*opacity:0.6;*/
	display:flex;
	flex-direction:column;
}

/* FONT overrides*/
    /*font-family: 'Bubblegum Sans', cursive;*/
    /*font-family: 'Open Sans', sans-serif;*/
html, body{
    font-family: 'Open Sans', sans-serif;
}
.restart-button, h2, h2, button, .message-details{
    font-family: 'Bubblegum Sans', cursive;
}

.restart-button {
    font-family: 'Earthy','Bubblegum Sans',cursive;
    text-transform: uppercase;
}

.message-details-countdown{
    background-color:rgba(0,0,0, .5);
    border-radius: 50%;
    width:200px;
    height:200px;
    margin:0 auto;
    border :20px solid rgba(0,0,0, .25);
    display:flex;
    align-items:center; 
    justify-content:center;
    
}

/* END OF GAME OF POP UP STYLES*/

.is-fullwidth button  .is-info .is-success .is-primary{
  
}


.is-share {
   background-color: #3298dc;
   display: flex;
   justify-content: center;
   width: 100%;
   color: #fff; 
   font-weight: bold;
}

.is-more{
     background-color: #48c774;
     display: flex;
     justify-content: center;
     width: 100%;
     color: #fff; 
     font-weight: bold;
}

.is-play-again{
     background-color: #ff9812e0;
     display: flex;
     justify-content: center;
     width: 100%;
     color: #fff; 
     font-weight: bold;
}




/*BULMA COLOR OVERRIDES*/
.has-text-primary{
  /*color:#006500 !important;*/
  color:rgba(255, 152, 18, 0.88) !important;
}
.is-primary{
  /*background-color:#006500 !important;*/
  background-color:rgba(255, 152, 18, 0.88) !important;
}

.has-text-gold{
  color:gold !important;
}


/*HEADER*/
#gameheader{
    z-index: 120;
    position: fixed;
    /*width: 100%;*/
    width:500px;
    text-align: center;
    font-family: sans-serif;
    color: white;
    font-size: 14px;
    font-weight: lighter;
    /*background-color: rgba(255, 152, 18, 0.88);*/
    background-color: #040405;
    line-height: 7px;
    text-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.88);
    opacity: 0.6;
}

#gameheader .stat{
    margin-left: 0px;
}

#gameheader i{
    margin:2px 8px;
}

/*#fs-toggle {*/
/*    float: right;*/
/*}*/

#push_toggle {
    float: left;
}

#share_btn {
    float: left;
}

/*END HEADER*/

/*chatbox*/
#chatbox {
	background-color: rgba(255, 255, 255, 0.98);
	position: fixed;
	bottom: 2vh;
	height: 200px;
	z-index: 998;
	width: 96vw;
	left: 2vw;
	border-radius: 1em;
	transition: bottom 0.5s;
}

#chatbox.stashed {
	bottom: -60vw;
}

#chatbutton {
	z-index: 999;
	color: #a2a2a2;
	position: fixed;
	/*bottom: 170px;*/
	bottom: 4vh;
	left: 3vw;
	transition: bottom 0.5s;
}

#chatbutton.stashed {
	bottom: 4vh;
}
/* end chatbox*/


#helpContainer{
    cursor: pointer;
    z-index: 999;
    position: fixed;
    color: #a2a2a2;
    bottom: 4vh;
    right: 3vw;
}




#layout_table{
    /*width:100%;*/
    /*height:100vh;*/

}

#layout_table td{
    text-align:center;
    padding: 5px;
}

#table_content{
    width:100%;
    height:100vh;

}

.game-container{
    display:inline-block;
    margin-top: 10px;
}
.otherStuffContainer{
    display: inline-block;
    /*width: calc(100% - 500px - 80px);*/
    /*margin-right: 20px;*/
    text-align: left;
    vertical-align: top;
    overflow: hidden;
}

.static_ad_container{
    /*width: 270px;*/
    /*height: 160px;*/
    /*background: blue;*/
    text-align: center;
    margin: auto;
}


.instructions p, .instructions h2 {
    margin-bottom: 5px;
}

.instructions .tile.instruction_sample {
    display: inline-block;
    position: relative;
    width:50px;
    height:50px;
}

.instructions .tile.instruction_sample .tile-inner {
    width:50px;
    height:50px;
}


#instructionsOverlay{
    display: none;
    max-width: 60%;
    position: absolute;
    z-index: 99;
    left: 150px;
    top: 230px;
    opacity: 1;
}

.instructions{
    background: #ffffffc4;
    padding: 1em;
    font-size: 0.9em;
    text-shadow: none;
    border-radius: 5px;
}

.swipe-animated{
  animation: swipeAnim ease 2s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: swipeAnim ease 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: swipeAnim ease 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: swipeAnim ease 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: swipeAnim ease 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes swipeAnim{
  0% {
    transform:  translate(0px,0px)  ;
  }
  25% {
    transform:  translate(100px,0px)  ;
  }
  50% {
    transform:  translate(0px,0px)  ;
  }
  75% {
    transform:  translate(0px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes swipeAnim{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  25% {
    -moz-transform:  translate(100px,0px)  ;
  }
  50% {
    -moz-transform:  translate(0px,0px)  ;
  }
  75% {
    -moz-transform:  translate(0px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes swipeAnim {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  25% {
    -webkit-transform:  translate(100px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes swipeAnim {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  25% {
    -o-transform:  translate(100px,0px)  ;
  }
  50% {
    -o-transform:  translate(0px,0px)  ;
  }
  75% {
    -o-transform:  translate(0px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes swipeAnim {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  25% {
    -ms-transform:  translate(100px,0px)  ;
  }
  50% {
    -ms-transform:  translate(0px,0px)  ;
  }
  75% {
    -ms-transform:  translate(0px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}




.statusBlock{
    margin-top: 10px;
    height: inherit;
    color:rgb(238, 213, 68);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.73);
    font-size: 0.9em;
    display:none;
}
.statusBlock td{
    text-align:center;
    padding-bottom: 9px;
}

#inGameAnimation{
    height:60px;
    width:60px;
    margin: auto;
    border-radius: 5px;
    background:transparent;
    background-image: url(../img/lion_loop.gif);
    background-size: cover;
}

#potGraphic{
    height:46px;
    /*width:60px;*/
    margin: auto;
    /*background:orange;*/
    /*border:3px solid #000;*/
}
#potValue{
    color:white;
    font-family: 'Anggota',sans-serif;
    font-size:15px; 
    margin-right: 20px;
}
#bestTime{
    color:white;
    height:20px;
}
#basicUsage{
    margin:0px;
    color:white;
    font-family: 'Anggota',sans-serif;
    font-size:15px; 
    margin-left:35px;
}
.nextPiece{
    margin:0px;
}
#currentPosition{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

#topPrize{
    font-size:2em;
    font-weight: bold;
    color:white;
}


.prize{
   height:10px;
}


.game-intro {
    float: none;
    line-height: normal;
    margin-bottom: inherit;
    width:100%;
}

.restart-button{
   text-shadow: none;
   font-size: 24px;
}

.game-explanation {
    margin-top: 1em;
}

.sampleTilesContainer{
    /*width:50px;*/
    display: inline-block;
    /*height: 500px;*/
    padding-top:7px;
}

.sampleTilesContainer .tile, .sampleTilesContainer .tile .tile-inner {
    position: relative;
    width: 40px;
    height: 40px;
    /*line-height: 40px;*/
    margin-bottom: 5px;
    /*margin-top: 3px;*/
}

.sampleTilesContainer .tile.highlight {
      box-shadow: 0px 10px 10px -1px #c1ff00c9, 0px -10px 10px -1px #c1ff00c9;
    max-width:inherit;
}


.grecaptcha-badge{
    visibility: hidden;
}


.game-container .game-message{
    display: block;
    /*background-color: rgba(238, 228, 218, 0.83);*/
    background-color: transparent;
}
.restart-button{
    /*display: none !important;*/
    /*width: 80%;*/
}

.game-container .game-message {
    height: inherit;
    margin-top: 30px;
    margin-bottom: auto;
    font-size: 30px;
}

.game-container .game-message i{
    text-shadow: none;
}

.game-container .game-message .lower{
    margin-top: auto;
}

.game-message{
    height:200px;
}


#countdowntimer {
    font-size: 150px;
    font-weight: bold;
    font-family: 'Kalleco', sans-serif;
    color: #FFCC00;
    text-shadow: 2px 2px 5px #B1BF45;
text-align: center;
    padding-bottom: 20px;
    padding-right: 10px;
}

.prizeBlock {
    background: white;
    display: inline-block;
    width: 28%;
    margin: 2%;
    text-align: center;
    line-height: 1em;
    height: 2.3em;
    color: black;
    border-radius: 1vh;
    border: thin solid #bdbbbb;
    box-shadow: 3px 3px 3px #0003;
    font-size: 0.9em;
}

.prizeBlock.firstPrize {
    font-size: 1.0em;
}

.prizeBlock .prizeLevel{
    font-size:0.7em;
}



#totalBalance{
    cursor: pointer;
}

#iframePopup{
    display: none;
    position: absolute;
    top: 6vh;
    height: 92vh;
    width: 98vw;
    left: 1vw;
    z-index: 9997;
    border-radius: 15px;
    box-shadow: 10px 10px 10px #0009;
    overflow: hidden;
    background: #ffffffa6;
}

#iframePopupClose{
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}
#iframePopup iframe{
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
}



/*ORIENTATION forcing*/

.orientation-msg-container{
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    background-color: #000;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.orientation-msg-text{
    font-size: 40px;
    font-family: "Arial";
    color: #fff;
    text-align: center;
    width: 80%;

    position: fixed;
    top: 40%;
    -webkit-transform: translate(15%,-50%);
    -moz-transform: translate(15%,-50%);
    -ms-transform: translate(15%,-50%);
    transform: translate(15%,-50%);


}




/*PRELOADER*/
.load-overlay {
  /*position: fixed;*/
  /*text-align: center;*/
  /*bottom: 0px;*/
  /*right: 0px;*/
  /*left: 0px;*/
  /*top: 0px;*/
  /*background-color: #fdbe00;*/
  /*padding:1em;*/
  /*z-index: 10000;*/
}

/*.load-text{*/
/*    font-size:20px;*/
/*    color:white;*/
/*    font-family: 'Bubblegum Sans', cursive;*/
/*    font-weight:bold;*/
/*}*/


.load-text{

    text-align: center;
    width:100%;
    font-size:28px;
    color:#D0FF00;
    font-family:'Earthy', cursive;
    font-weight:medium;
    text-transform: uppercase;
    align-self:flex-end;
    margin-bottom: 0px;
}

.load-icon {
    position: relative;
    /*margin-top: 100%;*/
    /*height: 40%;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}



/*.load-overlay .load-percent {*/
/*  display: block;*/
/*  position: absolute;*/
/*  left: 0%;*/
/*  width:100%;*/
/*  top: 60%;*/
/*  text-align: center;*/
/*}*/

.load-overlay .load-percent {
  display: block;
  font-size:40px;
  font-weight:medium;
  color:#D0FF00;
  width:100%;
  text-align: center;
  font-family: 'Earthy', cursive;
  margin-bottom: 0px;
}

.load-overlay .load-bar {
    display: block;
    top: 75%;
    width: 0%;
    left: 0;
    height: 2px;
    background-color: white;
}

.loading-instructions{
    display: inline-block;
    /*background: #ffffffc4;*/
    padding: 2em;
    font-size: 20px;
    text-shadow: none;
    border-radius: 5px;
    height:auto;
    overflow: hidden;
    /*margin-top: 5rem!important;*/
}

.load-overlay .loading-instructions .wrapper{
    display:flex; 
    flex-direction:row; 
    justify-content:center;
}

.load-overlay .loading-instructions .wrapper .tile{
    flex-grow:0;
    position:relative;
}



.loading-instructions2{
    display:none;

}


#play-btn-container{
    position: absolute;
    /*display: none;*/
    bottom: 5%;
    left: 0px;
    right: 0px;
    text-align: center;
}
/*#load-play{*/
/*    display:none;*/
/*    color: white;*/
/*    background: #ff651d;*/
/*    font-size: 40px;*/
/*    border: thin white solid;*/
/*    border-radius: 5px;*/
/*    padding: 5px 20px;*/
/*    box-shadow: 2px 2px 7px 0px #00000066;*/
/*}*/

#load-play{
    display:none;
    background: transparent;
    font-size: 18px;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}


.only_portrait{
    display:none;
}

/*  portrait*/
@media all and (orientation:portrait) {
    .load-icon {
        /* height: 25.5%; */
    }
    .only_portrait{
        display:inline;
    }
    .section.load-overlay {
    background-size: cover;
    background-position: center;
}
}
/* END PRELOADER */




#fullscreen_video{
    display: none;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index:9998;
}
#introSkipBtn{
    position:absolute;
    display: none;
    bottom:5%;
    right:5%;
    color:white;
    font-family: sans-serif;
    z-index:9999;
}

.super{
  vertical-align: super;
  font-size: .5em;
}

img.inline_coin {
    display: inline;
    height: 0.8em;
    vertical-align: middle;
}

.prizeBlock i {
	font-size: 9px;
}


/*AND OVERRIDE SIZES/LAYOUT FOR SMALLER SCREENS*/
@media screen and (max-width: 450px) {
     body{
        margin: 0px;
        padding: 0px;
        /*zoom: 0.9;*/
        height:100%;
        background-image:none;
     }

     .usiku-links{
        margin-top: 2px;
        margin-bottom:0px;
     }
     
     .usiku-links a {
         font-size:12px;
     }
     
     
.header{
    margin-top:40px; 
}
     .heading {
        width: 100%;
        margin:0px;
     }
     
     #gameheader{
        width: 100%;
        font-size: 10px;
     }

     .scores-container{
         /*display:none;*/
     }

     .sampleTilesContainer{
        /*width:20px;*/
        display: inline-block;
        padding-top:0px;
        margin-bottom: 0px!important;
        margin-top: 0px!important;
    }

     .sampleTilesContainer .tile, .sampleTilesContainer .tile .tile-inner {
        position: relative;
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
        margin-top: 3px;
    }
     .sampleTilesContainer .tile .tile-inner {
        position: relative;
        width: 30px;
        height: 30px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .sampleTilesContainer .tile.highlight {
        box-shadow: 0 0 15px 5px rgba(116, 0, 251, 0.86), inset 0 0 0 1px rgba(185, 185, 185, 0.38);
        /*height: 30px;*/
        /*width: 30px;*/
        /*margin-left: -10px;*/
    }
    .sampleTilesContainer .tile.highlight .tile-inner{
        /*width: 30px;*/
        /*height: 30px;*/
    }

    .otherStuffContainer{
        /*width: calc(100% - 280px - 80px);*/
        /*min-width: 300px;*/
    }

    /*.timerBlock{*/
    /*    font-size: 2em;*/
    /*}*/

    .far.fa-clock {
        font-size: 20px;
        margin-right: 4px;
    }

    /*.restart-button {*/
        /*font-size: 1.5em;*/
    /*}*/

    .vex.vex-theme-default {
        padding-top: 5%;
    }

    .vex a:link,
    .vex a:visited,
    .vex a:hover,
    .vex a:active {
        color: #e08f2e;
    }

    .vex-dialog-message p{
        margin-top: 0px;
        margin-bottom: 10px;
        line-height: 1em;
    }
    
    /*vertical spacing on buttons on any popups*/
    .vex-dialog-button{
        margin-bottom: 5px !important;
    }


    #clone.popout .tile-inner {
        width: 120px;
        height: 120px;
    }

    #clone.popout {
        position: absolute !important;
        top: 120px;
        left: 120px;
        /*transition:left 0.25s linear;*/
        z-index: 999;
        background-image: url("../img/star_layer1.png");
        width: 120px;
        height: 120px;
    }

    #clone.popout:before {
        content: '';
        background: url("../img/star_layer1.png");
        background-size: cover;
        width: 260px;
        height: 260px;
        display: block;
        position: absolute;
        left: -70px;
        top: -70px;
        animation: rotate_f 1.5s linear infinite;
        z-index: -1;
    }
    @keyframes rotate_f {
      to {
        transform: rotate(360deg);
      }
    }
    #clone.popout:after {
        content: '';
        background: url("../img/star_layer2.png");
        background-size: cover;
        width: 260px;
        height: 260px;
        display: block;
        position: absolute;
        left: -70px;
        top: -70px;
        animation: rotate_r 1.5s linear infinite;
        z-index: -1;
    }
    @keyframes rotate_r {
      to {
        transform: rotate(-360deg);
      }
    }

}

/* ADJUST FOR PORTRAIT VIEWING*/
@media only screen and (orientation:portrait){
    .otherStuffContainer {
        /*margin: -15px 10px;*/
        /*width:100%;*/
        font-size: 0.9em;
        line-height: 1.2em;
        text-align: center;
    }
    body{
        background-size: cover;
        display:flex;
        flex-direction:column;
        height:100vh;
        align-items: center;
    }
}

@media only  screen and (min-width:451px){


 .w-100{
margin-top: 0 !important;
margin-bottom: 0 !important;
 }

.grid-container{
    margin-left: 50px;
}


/* add css  image pop up */


 #clone.popout .tile-inner {
        width: 120px;
        height: 120px;
    }

    #clone.popout {
        position: absolute !important;
        top: 82px;
        left: 136px;
        /*transition:left 0.25s linear;*/
        z-index: 999;
        background-image: url("../img/star_layer1.png");
        width: 120px;
        height: 120px;
    }

    #clone.popout:before {
        content: '';
        background: url("../img/star_layer1.png");
        background-size: cover;
        width: 260px;
        height: 260px;
        display: block;
        position: absolute;
        left: -70px;
        top: -70px;
        animation: rotate_f 1.5s linear infinite;
        z-index: -1;
    }
    @keyframes rotate_f {
      to {
        transform: rotate(360deg);
      }
    }
    #clone.popout:after {
        content: '';
        background: url("../img/star_layer2.png");
        background-size: cover;
        width: 260px;
        height: 260px;
        display: block;
        position: absolute;
        left: -70px;
        top: -70px;
        animation: rotate_r 1.5s linear infinite;
        z-index: -1;
    }
    @keyframes rotate_r {
      to {
        transform: rotate(-360deg);
      }
    }


}


/* WINNING OVERLAY STYLE */

 .win{
  background-image:url('../img/simba_win.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

/* LOOSING STYLE OVERLAY*/

.loose {
    background-image:url('../img/no_more_moves.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.clear-countdown{
    height:200px;
    width:200px;
}


/*Ad styles*/



/* #usiku-games_300x250{
    display:none;
}


	@media screen and (min-width: 1300px) {
	
#usiku-games_300x250 {
    display: block;
    position:absolute;
    left:70%;
    top:50px;
}	
		
	} 
    
    */