.front {
    width: 107px;
    float: left;
    border-radius: 63px;
   background: white url("../img/explore/kod1.png") no-repeat center;
background-size: contain;
}
 .game{
     padding-bottom: 90px;
 }
 
 
.flip-container.flip .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);

}

.flipper {
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 100%;
    position: relative;
}
.flipper .front, .flipper .back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0%;
    left: 0;
    height: 100%;
    width: 100%;
	box-shadow: #00000082 2px 3px 7px;
}

.flipper .front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
/*    background: #ffffff;*/
    color: white;
    text-align: center;
    font-size: 50px;
}
.flipper .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    border: 1px solid #E8E8E8;
}

#red {
    background: white url("../img/explore/p1.png") no-repeat center;
    background-size: contain;
}

#bomb {
    background: white url("../img/explore/p2.png") no-repeat center;
    background-size: contain;
}

#chack {
    background: white url("../img/explore/p3.png") no-repeat center;
    background-size: contain;
}

#stela {
    background: white url("../img/explore/p4.png") no-repeat center;
    background-size: contain;
}

#jay {
    background: white url("../img/explore/p5.png") no-repeat center;
    background-size: contain;
}

#matilda {
    background: white url("../img/explore/p6.png") no-repeat center;
    background-size: contain;
}

#piggy {
    background: white url("../img/explore/p7.png") no-repeat center;
    background-size: contain;
}

#eagle {
    background: white url("../img/explore/p8.png") no-repeat center;
    background-size: contain;
}

/*@font-face {
    font-family: 'AngryBirds';
    src: url('../fonts/angry-birds.ttf');

    font-weight: 900;
    font-style: normal;
}*/

.memory-h1 h1{
    font:60px /*'AngryBirds',sans-serif*/;
     font-family: ABFlockText-Bold;
    text-align: center;
    color: white;
/*    text-shadow: 1px 2px 30px whitesmoke;*/
}




.btn-reset{
    display: block;
    margin: 10px auto;
    background-color: #2f3f45;
    color: white;
    font: 15px /*'AngryBirds'*/;
     font-family: ABFlockText-Regular;
    border-radius: 0.5em;
    padding: 0.3em;
}

.btn-reset:hover{
    color: #8b8483;
}

.question-span{
    display: block;
    padding-top: 1.8vh;
}


/*-Section - Modal-*/


/* Modal (background) */
.modal {
    /*Hidden by default */
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fallback color */
    background-color: rgb(46, 61, 73);
    /* With opacity */
    background-color: rgba(46, 61, 73, 0.6);
}

/* Modal Content/Box */
.modal-content {
	     font-family: ABFlockText-Regular;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    /* 5% from the top and centered */
    margin: 5% auto;
/*    border: 0.8em solid #fc4;*/
/*  padding-right: 2em;
    padding-bottom: 2em;*/
    padding: 1.5em;
    width: 60%;
}

.modal-content p, h2{
	text-align: center;
	margin-top: 0px;
}


/* The Close Button */
.close {
    align-self: flex-end;
    color: #e92;
    font-size: 4em;


}

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

}

/* Modal Image*/
.modal-img {
    display: inline-block;
    margin: 1em 0 1em;
    width: 15em;
}

p.stats {
    font-weight: 600;
}

p.stats:last-child {
    margin-bottom: 1em;
}

.play-again-btn {
    background: #ff9825;
    margin-bottom: 1em;
    color: white;
    font-size: 20px;
}

.play-again-btn:hover {

	    background: #ee8e22;
	    color:  #fff;
}

@media screen and (min-width: 320px) and (max-width:414px){
.modal-content {
    font-family: ABFlockText-Regular;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin: 5% auto;
    /* border: 0.8em solid #fc4; */
    padding: 1.5em;
    width: 90%;
}
}

 @media screen and (max-width: 373px){
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }
     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }
     .game {
         width: 100%;
         /*max-height: 400px;*/
         height: 272px;
         display: block;
         margin: 0 auto;
         text-align:center;
         position: relative;
     }
     .flip-container, .front, .back {
         width: 59px;
         height: 59px;
         max-width:82px ;
         max-height: 82px;
         border-radius: 63px;
         display: inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin-left: 1%;
         cursor: pointer;
     }
 }
@media screen and (min-width: 374px)and (max-width: 468px) {
    .game {
        width: 100%;
        margin: 0 auto;
        max-height: 450px;
        height: 450px;
        text-align:center;
        position: relative;
    }
    .game-section {
        background-image: url("../img/explore/game-fon3.jpg");
        font-family: ABFlockText-Regular;
    }

    .timer {
        background: #fbfbfb;
        border-radius: 0.5em;
        color: #000;
        margin: 0 auto 20px;
        padding: 0.5em;
        width: 130px;
        text-align: center;
        box-shadow: 2px 2px 5px 1px #0000004d;
        font-size: 14px;
    }
    .flip-container, .front, .back {
        width: 69px;
        height: 69px;
        border-radius: 63px;
        display: inline-block;
    }
    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;
        margin: 1%;
        cursor: pointer;

    }
}
 @media screen and (min-width: 469px) and (max-width: 591px){
     .game {
         width: 100%;
         margin: 0 auto;
         max-height: 450px;
         height: 450px;
         text-align:center;
         position: relative;
     }
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }

     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }

     .flip-container, .front, .back {
         width: 101px;
         height: 101px;
         border-radius: 63px;
         display: inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin: 1%;
         cursor: pointer;
     }
 }

 @media screen and (min-width: 592px) and (max-width: 746px){
     .game {
         width: 100%;
         margin: 0 auto;
         max-height: 450px;
         height: 450px;
         text-align:center;
         position: relative;
     }
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }

     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }

     .flip-container, .front, .back {
         width: 129px;
         height: 129px;
         margin: 0 auto;
         border-radius: 63px;
         display: inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin: 1%;
         cursor: pointer;
     }
 }

 @media screen and (min-width: 747px) and (max-width: 991px){
     .game {
         width: 100%;
         margin: 0 auto;
         text-align:center;
         position: relative;
     }
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }

     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }

     .flip-container, .front, .back {
         width: 135px;
         height: 135px;
         margin: 0 auto;
         border-radius: 82px;
         display: inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin: 1%;
         cursor: pointer;
     }

 }
 @media screen and (min-width:1024px) and (max-width: 1335px){
     .game {
         width: 100%;
         margin: 0 auto;
         text-align: center;
         position: relative;
         display: block;
     }
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }

     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }

     .flip-container, .front, .back {
         width: 175px;
         height:175px;
         margin: 10px;
         border-radius: 95px;
         display:inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin: 1%;
         cursor: pointer;
     }

 }

 @media screen and (min-width: 1336px){
     .game {
         width: 50%;
         margin: 0 auto;
         /*max-height: 450px;*/
         /*height: 450px;*/
         text-align: center;
         position: relative;
         display: block;
     }
     .game-section {
         background-image: url("../img/explore/game-fon3.jpg");
         font-family: ABFlockText-Regular;
     }

     .timer {
         background: #fbfbfb;
         border-radius: 0.5em;
         color: #000;
         margin: 0 auto 20px;
         padding: 0.5em;
         width: 130px;
         text-align: center;
         box-shadow: 2px 2px 5px 1px #0000004d;
         font-size: 14px;
     }

     .flip-container, .front, .back {
         width: 100px;
         height:100px;
         /* margin: 10px; */
         border-radius: 100px;
         display:inline-block;
     }
     .flip-container {
         -webkit-perspective: 1000;
         -moz-perspective: 1000;
         perspective: 1000;
         margin: 1%;
         cursor: pointer;
     }
 }