/*General Style Start*/
.game-canvas {
    background-color: #7dfff3;
    margin: auto;
    overflow: hidden;
}

.overlay {
    background-color: rgba(150, 132, 0, 0.15);
    height: 100%;
    width: 100%;
}

.btn-custom {
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px;
    letter-spacing: 2px;
    background-color: rgba(9, 76, 73, 0.6);
    color: #ffffff;
    width: 100px;
    margin-top: 15px;
}

.btn-custom:hover, .btn-custom:focus {
    background-color: rgba(3, 49, 47, 0.76);
    color: #ffffff;
}

.btn-difficulty-active {
    background-color: rgba(3, 49, 47, 0.76);
    color: #ffffff;
}

.score {
    overflow: hidden;
    margin: 15px auto 0;
}

.score div {
    font-size: 18px;
    color: #ffffff;
    background-color: #0c9292;
    border: 1px solid #ffffff;
    float: left;
    width: 50%;
    padding: 15px;
}

.details {
    font-size: 14px;
    margin-left: 15px;
}

.box-body {
    padding: 0 15px;
}

.progress {
    background-color: #ffffff;
    margin-top: 15px;
}

/*General Style Ends*/

/*Home Style Start*/
.home-page {
    position: relative;
    background-image: url("../img/ui/home-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.home-page .btn-area {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
}

.home-page .btn-area a {
    display: block;
    margin: 15px auto;
}

/*Home Style End*/

/*All Game Style Start*/
.all-game-page {
    position: relative;
}

.all-game-page .btn-area {
    position: absolute;
    padding: 0 15px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #7dfff3;
    height: 75px;
}

.all-game-page .puzzle-box {
    /*display: inline-block;*/
    /*margin: 15px;*/
    float: left;
    width: 50%;
    padding: 15px;
}

.all-game-page .puzzle-box:hover {
    text-decoration: none;
}

.all-game-page .puzzle-box .puzzle, .all-game-page .puzzle-box .stars {
    width: 100%;
}

.all-game-page .puzzle-box .stars {
    margin-top: 5px;
    text-align: center;
}

.all-game-page .puzzle-box .stars img {
    width: 15%;
}

.all-game-page .puzzle-box .puzzle img {
    width: 100%;
}

.all-game-page .game-area {
    height: 100%;
    padding-bottom: 75px;
    overflow: scroll;
}

/*All Game Style End*/

/*Game Board Style Start*/
.game-board {
    margin: 15px auto;
    position: relative;
    outline: 1px;
    outline-style: solid;
    outline-color: #ffffff;
    background-color: #ffffff;
}

.no-padding {
    padding: 0;
}

.box {
    background-color: #ffffff;
    position: absolute;
    color: #fff;
    font-size: 16px;
    text-align: center;
    outline: 1px solid rgba(255, 255, 255, 0.3);
    outline-offset: -1px;
    cursor: move;
}

.box p {
    opacity: 1;
    color: red;
}

.btn-area {
    text-align: center;
}

.game-progress {
    margin: 30px 15px;
}

.score-prog {
    margin-top: 15px;
}