/*this css file use in puzzle game*/

.grid__item {
    margin: 1px;
    border-radius: initial;
    background: none;
    border: none;
    max-height: 4.5em;
}

    .grid__item:hover {
        cursor: move;
        cursor: -webkit-grab;
        cursor: grab;
    }

    .grid__item:active {
        cursor: -webkit-grabbing;
        cursor: grabbing;
    }

.grid {
    margin: initial;
    max-width: 47em;
    min-width: 47em;
    display: inline-block;
}

.realpic {
    width: 15em;
    display: inline-block;
    vertical-align: top;
}

    .realpic img {
        width: auto;
        max-width: 100%;
    }

.scatterimage {
    min-height: 4.5em;
}

@media screen and (max-width: 80em) {
    .grid__item {
        font-size: 1.5em;
    }

    .grid {
        max-width: 36em;
        min-width: 36em;
    }
}

@media screen and (max-width: 66em) {
    .grid {
        max-width: 27em;
        min-width: 27em;
    }

    .grid__item {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 54em) {
    .grid {
        max-width: 27em;
        min-width: 27em;
    }

    .grid__item {
        font-size: 1.1em;
    }

    .realpic {
        width: 10em;
    }
}

@media screen and (max-width: 48em) {
    .grid {
        max-width: 32em;
        min-width: 32em;
    }

    .grid__item {
        font-size: 1.3em;
    }

    .realpic {
        width: 12em;
    }
}

@media screen and (max-width: 40em) {
    .grid {
        max-width: 25em;
        min-width: 25em;
    }

    .grid__item {
        font-size: 1em;
    }
}

@media screen and (max-width: 31em) {
    .grid {
        max-width: 18em;
        min-width: 18em;
    }

    .grid__item {
        font-size: 0.7em;
    }
}



.puzzlecontainer {
    width: 910px;
    margin: 0 auto;
}

.realpicpuzzle {
    width: 200px;
    height: 200px;
    display: inline-block;
    vertical-align: top;
}

.puzzlecontainer img {
    width: auto;
    max-width: 100%;
}

#game_object {
    background-color: #ffffff;
    width: 705px;
    height: 705px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}


#board div {
    background: url("../Images/dog1.jpg") no-repeat scroll 0 0 #ffffff;
    cursor: pointer;
    height: 175px;
    line-height: 175px;
    position: absolute;
    text-align: center;
    width: 175px;
    /* css3 shadow */
    -moz-box-shadow: inset 0 0 20px #555555;
    -webkit-box-shadow: inset 0 0 20px #555555;
    -ms-box-shadow: inset 0 0 20px #555555;
    -o-box-shadow: inset 0 0 20px #555555;
    box-shadow: inset 0 0 20px #555555;
}