.flip3D { 
    width:500px; 
    height:300px; 
    margin-left:auto;
    margin-right:auto;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 0;
}
.flip3D > .front {
    padding: 0;
    position:absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    background:#f8f8ff;
    width:500px;
    height:300px;
    border-radius: 16px;
    backface-visibility: hidden;
    transition: transform .25s linear 0s;
    text-align: center;
    line-height: 300px;
    font-weight: bold;
    font-size: 2rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.flip3D > .front p {
    line-height: 1.5;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.flip3D > .back p {
    line-height: 1.5;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}
.flip3D > .back {
    padding: 0;
    position:absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    background: #f8f8ff;
    width:500px;
    height:300px;
    border-radius: 16px;
    backface-visibility: hidden;
    transition: transform .25s linear 0s;
    text-align: center;
    line-height: 300px;
    font-weight: bold;
    font-size: 2rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.flip3D:hover > .front { transform: perspective( 600px ) rotateY( -180deg ); }
.flip3D:hover > .back  { transform: perspective( 600px ) rotateY( 0deg ); }
.flashnav {
    margin: auto;
    text-align: center;
    align-items: center;
}
.flashnav > .fbutton {
    margin-left: 100px;
    margin-right: 100px;
    font-size: 1.18rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: #fe5f55;
    font-weight: bold;
    color: #fafcf5;
    text-align: center;
    text-decoration: none;
    width: 10%;
    padding: 15px 15px;
    border: none;
}
.flashnav > .fbutton:hover { color: #454545; background-color: #fafcf5; }