@media screen {
@charset "utf-8";
    /* CSS Document */
    @keyframes fadeInDown{
        0%{
            opacity:0;
            -ms-transform:translate3d(0,-5%,0);
            transform:translate3d(0,-5%,0);
        }
        100%{
            opacity:1;
            -ms-transform:none;
            transform:none;
        }
    }
    @-moz-keyframes fadeInDown /* Firefox */
    {
        0%{
            opacity:0;
            -ms-transform:translate3d(0,-5%,0);
            transform:translate3d(0,-5%,0)
        }
        100%{
            opacity:1;
            -ms-transform:none;
            transform:none;
        }
    }

    @-webkit-keyframes fadeInDown /* Safari 和 Chrome */
    {
        0%{
            opacity:0;
            -ms-transform:translate3d(0,-5%,0);
            transform:translate3d(0,-5%,0)
        }
        100%{
            opacity:1;
            -ms-transform:none;
            transform:none;
        }
    }

    @-o-keyframes fadeInDown /* Opera */{
        0%{
            opacity:0;
            transform:translate3d(0,-5%,0)
        }
        100%{
            opacity:1;
            transform:none;
        }
    }



    /* zoomOut */
    @keyframes zoomOut{

        50%{
            opacity:0;
            -webkit-transform:scale3d(0.3, 0.3, 0.3);
            transform:scale3d(0.3, 0.3, 0.3)
        }
        100%{
            opacity:0
        }
    }

    @-moz-keyframes zoomOut{

        50%{
            opacity:0;
            -webkit-transform:scale3d(0.3, 0.3, 0.3);
            transform:scale3d(0.3, 0.3, 0.3)
        }
        100%{
            opacity:0
        }
    }

    @-webkit-keyframes zoomOut{

        50%{
            opacity:0;
            -webkit-transform:scale3d(0.3, 0.3, 0.3);
            transform:scale3d(0.3, 0.3, 0.3)
        }
        100%{
            opacity:0
        }
    }
    @-o-keyframes zoomOut{

        50%{
            opacity:0;
            -webkit-transform:scale3d(0.3, 0.3, 0.3);
            transform:scale3d(0.3, 0.3, 0.3)
        }
        100%{
            opacity:0
        }
    }

    /* flipInY */

    @keyframes flipInY{
        0%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform:perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0
        }
        40%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);transform:perspective(400px) rotate3d(0, 1, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in
        }
        60%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);transform:perspective(400px) rotate3d(0, 1, 0, 10deg);opacity:1}
        80%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);transform:perspective(400px) rotate3d(0, 1, 0, -5deg)}
        100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
    }

    @-moz-keyframes flipInY{
        0%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform:perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0
        }
        40%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);transform:perspective(400px) rotate3d(0, 1, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in
        }
        60%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);transform:perspective(400px) rotate3d(0, 1, 0, 10deg);opacity:1}
        80%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);transform:perspective(400px) rotate3d(0, 1, 0, -5deg)}
        100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
    }

    @-webkit-keyframes flipInY{
        0%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform:perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0
        }
        40%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);transform:perspective(400px) rotate3d(0, 1, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in
        }
        60%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);transform:perspective(400px) rotate3d(0, 1, 0, 10deg);opacity:1}
        80%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);transform:perspective(400px) rotate3d(0, 1, 0, -5deg)}
        100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
    }

    @-o-keyframes flipInY{
        0%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform:perspective(400px) rotate3d(0, 1, 0, 90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0
        }
        40%{
            -webkit-transform:perspective(400px) rotate3d(0, 1, 0, -20deg);transform:perspective(400px) rotate3d(0, 1, 0, -20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in
        }
        60%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, 10deg);transform:perspective(400px) rotate3d(0, 1, 0, 10deg);opacity:1}
        80%{-webkit-transform:perspective(400px) rotate3d(0, 1, 0, -5deg);transform:perspective(400px) rotate3d(0, 1, 0, -5deg)}
        100%{-webkit-transform:perspective(400px);transform:perspective(400px)}
    }

    /* flipOutX */
    @keyframes flipOutX{
        0%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)
        }
        30%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            opacity:1
        }
        100%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            opacity:0
        }
    }

    @-moz-keyframes flipOutX /* Firefox */
    {
        0%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)
        }
        30%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            opacity:1
        }
        100%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            opacity:0
        }
    }

    @-webkit-keyframes flipOutX{
        0%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)
        }
        30%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            opacity:1
        }
        100%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            opacity:0
        }
    }
    @-o-keyframes flipOutX /* Opera */
    {
        0%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)
        }
        30%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform:perspective(400px) rotate3d(1, 0, 0, -20deg);
            opacity:1
        }
        100%{
            -webkit-transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform:perspective(400px) rotate3d(1, 0, 0, 90deg);
            opacity:0
        }
    }
}
@charset "utf-8";
.flip{
margin: 5px 0 -25px;
width:225px;
}
.flip .figure{
    position:relative;
    margin-bottom:30px;
    overflow:hidden;
}
.flip .figure .figcaption{
    position:relative;
    z-index:2;

}
.flip .figure .figcaption img{
    width:100%;
}

.flip .figure .figureBackground{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-align:center;
    z-index:1;
    visibility:hidden\0;
}
.flip .figure:hover .figureBackground{
    z-index:3\0;
    visibility:visible\0;
}

.flip .figure .figcaption,
.flip .figure:hover .figureBackground{
    animation-name: flipInY;
}

.flip .figure .figcaption,
.flip .figure:hover .figcaption,
.flip .figure .figureBackground,
.flip .figure:hover .figureBackground{
    animation-duration: 0.5s;
    animation-fill-mode: both;
}


.flip .figure .figureBackground,
.flip .figure:hover .figcaption{
    animation-name: zoomOut;
}

.flip .figure .figureBackground h2{
    font-size:16px;
    font-weight:bold;
    line-height:normal;
    margin-top:50px;
    color:inherit;

}
.flip .figure .figureBackground button{
    font-size:18px;
    font-weight:bold;
    width:120px;
    height:50px;
    background:#e60012;
    color:inherit;
    border:0;
    border-radius:8px;
    box-shadow:2px 2px 1px #000000;
    position:absolute;
    left:50%;
    margin-left:-60px;
    margin-top:-25px;
    top:63%;
    cursor:pointer;
}
.flip .figure .figureBackground{
    background:#00afec;
    color:#ffffff;
}