@charset "UTF-8";
html,body{
	overflow-x:hidden;
	overflow-y: hidden;
	height:100%;
    margin:0;
    background-color: black;
    box-sizing: border-box;
}
.grid-containter{
    position: relative;
    top:25%;
    width:100%;
    margin:0 auto;
}
.card-grid{
    position: relative;
    transform-style: preserve-3d;
    perspective:100px;
    display: inline-block;
    width:16%;
    left:0;
    margin:0 -2px;
    margin-right:0.43%;    
}
.card-grid:first-child{
    margin-left:0.43%;  
}
.front{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: absolute;
    z-index: 0;
    transform:rotateY(0deg);
    transition:all 1s ease-out; 
    height:21.3vw;
    width:100%;
    background-color: white;
    color:black;
    text-align: center;
    font-size:30px;
    box-sizing: border-box;
    padding-top: 30%;
    
}
.back{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    position: relative;
    z-index: 0;
    transform:rotateY(-180deg);
    transition:all 1s ease-out;
    height:21.3vw;
    width:100%;
    background-color: white;
    color:black;
    overflow: hidden;    
}


.back img{
    width:101%;
}

/* smart phone setting */


/*ipad*/

@media (max-width: 1440px) {
.card-grid{
    margin-right:0.4%;    
}
.card-grid:first-child{
    margin-left:0.4%;
}
}


/*other smart device*/
@media (max-width: 768px) {
.grid-containter{
    top:30%;
}
.card-grid{
    position: relative;
    top:30%;    
    transform-style: preserve-3d;
    perspective: 100px;
    display: inline-block;
    width:30%;
    margin:10px -2px;
    margin-right:2%;    
}
.card-grid:first-child,.card-grid:nth-child(4){
    margin-left:2%;
}
.front{
    height:45vw;
    font-size:16px;
    padding:20px 3px;

}
.back{
    height:45vw;
}
}