* {
    margin: 0px auto;

}

body{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+7,b19849+52 */
    background: #87e0fd; /* Old browsers */
    background: -moz-linear-gradient(45deg, #87e0fd 7%, #b19849 52%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #87e0fd 7%,#b19849 52%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #87e0fd 7%,#b19849 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#b19849',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    /*background: #4AC29A;  /!* fallback for old browsers *!/*/
    /*background: -webkit-linear-gradient(to right, #BDFFF3, #4AC29A);  /!* Chrome 10-25, Safari 5.1-6 *!/*/
    /*background: linear-gradient(to right, #BDFFF3, #4AC29A); /!* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!/*/

}



#turn {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: white;
    background-image: url('../images/mobile.png');
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}
#gameOver {
    background: url('../images/gameOver.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;
}

#gameWon {
    background: url('../images/congr8.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;

}




.playBtnGrop{
    position: relative;
    top:30%
}
/*#play {*/
/*position: relative;*/
/*left: 45%;*/
/*top: 25%;*/
/*}*/

/*#howPlay {*/
/*position: relative;*/
/*left: 33%;*/
/*top: 35%;*/

/*}*/
#tryAgain {
    position: relative;
    /*left: 33%;*/
    top: 35%;
}

/*#playWon {*/
    /*position: relative;*/
    /*left: 20%;*/
    /*top: 35%;*/
/*}*/
/*#playShare {*/
    /*position: relative;*/
    /*left: 60%;*/
    /*top: 35%;*/
/*}*/
.gameWin{
    position: fixed;
    left: 38%;
    top: 45%;
    margin: 10px 50px 0px 0px;
}
#res{
    font-size: 26px;
    background: #276D1C;
    width: 30%;
    color: #ffffff;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.mainPlay {
    background: url('../images/playScreen.png') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    body {
        background: gainsboro;

    }

}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

/*@media (min-width: 481px) and (max-width: 767px) {*/
/*body {*/

/*background: red;*/

/*}*/

/*}*/
/*/!**/
/*##Device = Most of the Smartphones Mobiles (Portrait)*/
/*##Screen = B/w 320px to 479px*/
/**!/*/
@media (min-width: 320px) and (max-width: 480px) {

    #turn {
        display: block;
    }

    #play {
        display: none;
    }
    #howPlay {
        display: none;

    }

}

/*@media (min-width: 768px) and (max-width: 1024px) {*/
/*body{*/
/*background:  darkblue;*/
/*}*/

/*}*/

/*modal*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
    font-weight: bold;
    border-radius: 10px;
    text-align: left;
}

/* The Close Button */
.close {
    color: #317D21;
    float: right;
    font-size: 28px;
    font-weight: bolder;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;

}