.flip-card{
    display:inline-block;
    background-color: #ffffff;
width:300px;
margin-right:12px;
margin-bottom:12px;
border:0px solid black;
perspective:1000px;
overflow:hidden;
border-radius:16px;
transition:0.5s;

}

.flip-card h2{
    
    font-weight:900;
    
}

.flip-card h3{
font-weight:lighter;
color:#263544;
font-size:20px;
line-height:1;
}

.flip-card-back{
        background-color: #ffffff;
transform:rotateY(180deg);
}


.flip-card-detail {
    position: relative;
    bottom: 0;
    left: 0;
    opacity: 1;
    background: #fff;
    width: 100%;
    height: 100px;
    z-index: 3;
    padding: 15px 0;
    transition: .4s;
text-align: center;
}

.flip-card-front{
           background-color: white;
}
.flip-card-front h2 {
    color:white;
    font-size:16pt;
    font-weight:500;
    padding:10px;  
}

.flip-card-front p, .flip-card-back p{
    padding:10px;
    font-size:16pt;
    color:white; 
}

.flip-card-front, .flip-card-back{
    position:absolute;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}

.flip-card-inner{
    position:relative;
    width:100%;
    height:400px;
    text-align:center;
    transition:transform 0.8s;
    transform-style:preserve-3d;  
}

.flip-card-inner:focus{
    outline:0px solid black;
cursor:pointer;

}

.flip-card-inner:hover {
    outline: 0px solid black;
cursor:pointer;

}

.flip-card:hover .flip-card-detail{
    bottom:0;
    left:0;
    transition-delay:0.5s;
    opacity:1;
     
}
.flip-card:hover .flip-card-inner,   .flip-card:focus .flip-card-inner,   .flip-card:focus-within .flip-card-inner,   .flip-card:active .flip-card-inner{
    transform:rotateY(180deg);
}