/* 
    Created on : Jul 7, 2018, 12:21:24 PM
    Author     : Leonard Garcia 
*/

 .flip3D {
    width:100px; height:40px; margin:10px; 
    float:left;
 }

.flip3D >  .front{
    color:black;
    border: 4px solid;
    border-color: darkgreen;
    padding:3px;
    position:absolute;
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
    background:#FFFF10; width:110px; height:40px; border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}

.flip3D >  .back{
    color:black;
    border: 4px solid;
    border-color: darkgreen;
    padding:3px;
    position:absolute;
    -webkit-transform: perspective(600px) rotateY(180deg);
    transform: perspective(600px) rotateY(180deg);
    background:#80BFFF; width:110px; height:40px; border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
.flip3D:hover >  .front{
    -webkit-transform: perspective(600px) rotateY(-180deg);
    transform: perspective(600px) rotateY(-180deg);
}
.flip3D:hover >  .back{
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
}
.img {
    width: 50%;
    height: 80%;
}

/* for smartphone ****************************************************/
@media only screen and (max-width : 449px) and (min-width: 280px) {
    h2 {
        font-size: .8em;
        position: absolute;
        top: 545%;
        left: 5px;
        margin-bottom: 50px;
    }
    
    .flip3D {
        width:20%; height:25px; margin-right: 4px; margin-top: 5px;
        font-size: .7em;
    }
    .flip3D >  .front{
        border: 2px solid;
        border-color: darkgreen;
        background:#FFFF10; width:20%; height:25px;
        padding: 1px;
    }
    .flip3D >  .back{
        border: 2px solid;
        border-color: darkgreen;
        background:#80BFFF; width:20%; height:25px;
        padding: 1px;
    }
    .img {
        width: 30%;
        height: 70%;
    }
}