.arrow {
    cursor: pointer;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 40%;
    margin-top: -50px;
}

#left-arrow {
    border-width: 20px 20px 20px 0;
    border-color: transparent #febc0b transparent transparent;
    left: 0;
    margin-left: 25px;
    z-index: 999;
    opacity: 1;
}

#right-arrow {
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #febc0b;
    right: 0;
    margin-right: 25px;
    opacity: 1;
}

#left-arrow:hover {
    border-color: transparent #febc0b transparent transparent;
    opacity: 0.4;
}

#right-arrow:hover {
    border-color: transparent transparent transparent #febc0b;
    opacity: 0.4;
}

.image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vertical-align-wrapper {
    display: table;
    overflow: hidden;
    text-align: center;
}

.vertical-align-wrapper span {
    display: table-cell;
    vertical-align: middle;
    font-size: 5rem;
    color: #ffffff;
}

@media only screen and (max-width : 992px) {
    .vertical-align-wrapper span {
        font-size: 2.5rem;
    }

    #left-arrow {
        border-width: 30px 20px 30px 0;
        margin-left: 15px;
    }

    #right-arrow {
        border-width: 30px 0 30px 20px;
        margin-right: 15px;
    }

    .arrow {
        margin-top: -30px;
    }
}