.require {
    color: #a94442 !important;
}

h4.header-block {
    text-align: center;
    background-color: seagreen;
    color: white;
    padding-bottom: 5px;
    padding-top: 5px;
    margin-top: 0px;
    font-size: 18px;
}

.flip-box {
    background-color: transparent;
    width: 300px;
    height: 100px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
}

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

.flip-box:hover .flip-box-inner {
    transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

    .flip-box-front a {
        font-size: 28px;
        color: white;
        text-align: center;
        line-height: 3.1;
        display: block;
    }

        .flip-box-front a span {
            display: inline;
            display: inline-table;
            display: inline-block;
            vertical-align: middle;
            line-height: 1;
            *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
        }

.flip-box-back {
    transform: rotateX(180deg);
}

    .flip-box-back a {
        font-size: 28px;
        color: white;
        text-align: center;
        line-height: 3.1;
        display: block;
    }

        .flip-box-back a span {
            display: inline;
            display: inline-table;
            display: inline-block;
            vertical-align: middle;
            line-height: 1;
            *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
        }

.xt-header-top {
    background-color: #05007e;
}