.flip_box {width:100%; height:200px; cursor:pointer}
.flip_box_front, .flip_box_back {position:absolute; width:calc(100% - 30px); height:100%; transition:0.8s; animation-timing-function: ease-in;}

.flip_box_front {background-color:lightgrey;  transform:scaleX(1);}
.flip_box_back {background-color:#333333;   transform:scaleX(0);}
.flip_box:hover .flip_box_front {animation: flip_box_front 0.3s forwards;}
.flip_box:hover .flip_box_back {animation: flip_box_back 0.3s forwards; animation-delay:0.5s;}

.flip_box_front_reverse {animation:flip_box_front_reverse 0.3s forwards; animation-delay:0.5s; transform:scaleX(0);}
.flip_box_back_reverse {animation:flip_box_back_reverse 0.3s forwards;}

.flip_box_back_inner {transform:scaleX(-1);}

@keyframes flip_box_back {
    from {transform:scaleX(0);}
    to {transform:scaleX(-1);}
}

@keyframes flip_box_front {
    from {transform:scaleX(1);}
    to {transform:scaleX(0);}
}


@keyframes flip_box_back_reverse {
    from {transform:scaleX(-1);}
    to {transform:scaleX(0);}
}

@keyframes flip_box_front_reverse {
    from {transform:scaleX(0);}
    to {transform:scaleX(1);}
}


/* DIAGONAL BOX */
.diagonal_box {width:100%; height:200px; cursor:pointer; overflow:hidden;}
.diagonal_inner {overflow:hidden; height:100%; position:absolute; width:calc(100% - 30px);}

.diagonal_box_cover {position: absolute; z-index: 99; width: 100%; height: 100%; opacity:1; transition:0.4s; transition-delay:0.2s;}
.diagonal_box:hover .diagonal_box_cover {opacity:0;}

.diagonal_box:hover .diagonal_box_hover {transform:rotate(45deg) translateX(350px) translateY(-20px); background-color:white;}
.diagonal_box_hover {position:absolute; width:500px; height:500px; background-color:#333333; transform:rotate(45deg) translateX(-220px) translateY(-20px); transition:1s;}
.diagonal_box_content {background-color:#333333; height:100%; color:white;}


/* downUp BOX */
.downUp_box {width:100%; height:200px; cursor:pointer; overflow:hidden;}
.downUp_inner {overflow:hidden; height:100%; position:absolute; width:calc(100% - 30px);}

.downUp_box_cover {position: absolute; z-index: 99; width: 100%; height: 100%; color:#003597; transition:none;}
.downUp_box:hover .downUp_box_cover {color:white;}

.downUp_box:hover .downUp_box_hover {transform: translateY(0px); background-color:#003597;}
.downUp_box_hover {position:absolute; width:100%; height:100%; background-color:#003597; transform:translateY(185px); transition:0.4s;}
.downUp_box_content {background-color:white; border:1px solid #003597; height:100%;}


/* page BOX */
.page_box {width:100%; height:200px; cursor:pointer; overflow:hidden;}
.page_inner {overflow:hidden; height:100%; position:absolute; width:calc(100% - 30px); transition:0.4s;}

.page_box_cover {position: absolute; z-index: 99; width: 100%; height: 100%; color:#003597; transition:0.4s;}
.page_box:hover .page-box_cover {color:#003597;}

.page_box:hover .page_box_hover {bottom:-20px; right:-20px; background-color:#003597;}
.page_box_hover {position:absolute; width:60px; height:60px; background-color:#ffa70d; bottom:-60px; right:-60px; transition:0.3s;}
.page_box_content {background-color:rgba(255,167,13,1);  height:100%; border-radius:0px 0px 0px 0px;}
.page_inner:hover {border-radius:0px 0px 45px 0px;}