/*
╔═╦═╗░░░░╔╗░░░░░╔══╗░░░░░░░░░░░░╔══╦══╦══╗
║║║║╠═╦═╦╣╠╦═╦╦╗║╔═╬═╗╔══╦═╗╔══╗╚║║╩╗╔╩║║╝
║║║║║╬║║║║═╣╩╣║║║╚╗║╬╚╣║║║╩╣╚══╝╔║║╗║║╔║║╗
╚╩═╩╩═╩╩═╩╩╩═╬╗║╚══╩══╩╩╩╩═╝░░░░╚══╝╚╝╚══╝
░░░░░░░░░░░░░╚═╝░░░░░░░░░░░░░░░░░░░░░░░░░░

*/
/* latin */
@font-face {
    font-family: 'Luckiest Guy';
    font-style: normal;
    font-weight: 400;
    src: local('Luckiest Guy Regular'), local('LuckiestGuy-Regular'), url(../fonts/monkey.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
body {
    background-image: url('../images/bg.jpg');
    font-family: 'Luckiest Guy', cursive;
}
.clearfix {
    clear: both;
}
.row {
    margin-right: 0px !important; 
    margin-left: 0px !important; 
}
.shoot-box {
    height: 100%;
    position: relative;
}
.counter {
    height: 50px;
    text-align: center;
    font-size: xx-large;
    font-style: normal;
    font-weight: 400;
    line-height: 1.10909;
    font-family: 'Luckiest Guy', cursive;
}
.float-right {
    float: right;
}
.login {
    width: 500px;
    height: 200px;
    margin: 120px auto 100px;
    padding: 50px;
}
.logo {
    text-align: center;
    height: auto;
    width: 393px;
    
}
.login input , .login select 
{
    margin-bottom: 10px;
    text-align: center;
    font-size: large;
}
.btn-block {
    background: #b2c363;
    font-size: larger;
    color: #ffffff;;
    
}
.game {
    display: none;
}
.gameover,.winner {
    display: none;
    padding-top: 10%;
    color: white;
}
.gameover p ,.winner p {
    font-size: 50px;
    color: #0f2d23;
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 5px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
.gameover input ,.winner input {
    background-color: #b2c363;
    width:200px;
    color: #FFF;
    font-size: large;
    text-align: center;
    height: 60px;
    
}
/****************************************/
.game p.counter{
    margin: 3px;
    font-size: 25px;
}
#gamelevel,#gamelevel_icon{
    font-size: 40px;
    color: white;
    float: right;
}
.game p.counter span#timer {
    color: #f96539
}
.game p.counter span#hours
{
    color: greenyellow;
}
.game p.counter span#second,span#sepra
{
    color: white;
    font-size: 40px;
}
.game  span#score,span#score_txt
{
    color: white;
    font-size: 40px;
}
.game  span#score
{
    color: #f96539;
    font-size: 40px;
}
.game p.counter span#of_sepra
{
    color: white;
    font-size: 20px;
}
.game span#welcome_user,span#username
{
    color: white;
    font-size: 20px;
    float: left;
}

.game p.counter span#minuts
{
    color: white;
    font-size: 50px;
}
.game p.counter span#username {
    padding: 0 5px;
    font-size: 20px;
}
/*****************************************/
.boxOfGame {
    width: 300px;
    height: 500px;
    margin: 80px auto;
    text-align: center;
    border: 10px solid #8fc178bf;
    overflow: hidden;
    position: relative;
}
.box {
    width:30px;
    height: 30px;
    background-color :#f96539;
    left: 130px;
    bottom:300px;
    position: absolute;
}
#main{
    width:75px;
    height: 75px;
    background-image: url("../images/monkey.gif");
    background-size: cover; 
    left: 400px;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
#ball{
    width:30px;
    height: 30px;
    /*background-color :#f96539;*/
    border-radius: 50%;
    left: 40px;
    position: absolute;
    bottom: 0px;
    background: url('../images/stone.png');
    background-size: cover;
}
#Monkey_land{
    position: absolute;
    bottom: 46px;
}
/*#draggable { background-color: #f96539;width: 40px; height: 40px; padding: 0.5em; }*/

.boxOfGame {
    width: 850px;
    text-align: center;
    margin: 0 auto;
    font-size: 37px;
    color: white;
    text-transform: uppercase;
    background: #ffffff40;
}

.Box {
    width: 60px;
    height: 60px;
    background-color: black;
    margin: 5px;
    display: inline-block;
    

}
.Regular_Box {

    background: url(../images/regular.png);
    background-size: cover;
}

.Golden_Box {
    background-color: goldenrod;
    background: url(../images/golden.png);
    background-size: cover;


}

.Red_Box {
    background-color: red;
    background: url(../images/bomb.gif);
    background-size: contain;
    background-repeat: no-repeat;
}