@keyframes dcms-attention-boxes-anim {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes dcms-attention-boxes-anim-hover {
    from {opacity: 0;}
    to {opacity: 1;}
}

  
.plugin-dcms-attention-boxes {
    padding: 10px 0 0 0;
    font-family: 'Kreon', serif;
}

.plugin-dcms-attention-boxes .attention-box-container {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    z-index: 0;
}

.plugin-dcms-attention-boxes .attention-box-container::after {
    /* Setting size of wipe layer to 100% of the buttons size, so that changing the text within the button won't break the animation instead of using absolute numbers */
    width: 100%;
    height: 100%;
    
    /* Setting display type and background-color of the button */
    display: block;
    background-color: #ffd800;
    
    /* Setting the position of the wipe layer so that it covers the whole button AFTER the translation animtaion is finished */
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    
    /* Setting the transition and layer index for the wipe layer */
    transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: -1;
}

.plugin-dcms-attention-boxes .attention-box-container::after {
    /* Pushes the wipe layer out of the button so it won't be seen */
    transform: translateX(-100%);
}

.plugin-dcms-attention-boxes .attention-box-container:hover::after {
    /* This is the position, after the hover animation is finished */
    transform: translateX(0%);
}

.plugin-dcms-attention-boxes a.attention-box {
    border: solid 1px #ffd800;
    display: block;
    margin: 0;
    padding-top: 110px;
    height: 150px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center 10px;
    transition: color .2s ease;
    position: relative;
    overflow: hidden;
}

.plugin-dcms-attention-boxes a.attention-box::after,
.plugin-dcms-attention-boxes a.attention-box::before {
    position: absolute;
    top: 0;
    font-size: 72px;
    text-align: center;
    display: inline-block;
    margin-left: -36px;
    left: 50%;
    animation: dcms-attention-boxes-anim 2s;
}

.plugin-dcms-attention-boxes a.attention-box:hover {
    color: #002c63;
    transition: color .2s ease;
}

.plugin-dcms-attention-boxes a.attention-box:hover::after,
.plugin-dcms-attention-boxes a.attention-box:hover::before {
    animation: dcms-attention-boxes-anim-hover 2s;
}

.plugin-dcms-attention-boxes .attention-box-col {
    padding-right: 10px;
    padding-left: 10px;
}

.plugin-dcms-attention-boxes.small-boxes {
    font-size: 0.8em;
    padding: 20px 0;
}

.plugin-dcms-attention-boxes.small-boxes a.attention-box {
    padding-top: 90px;
    height: 125px;
}

.plugin-dcms-attention-boxes a.attention-box.scaled-image {
    background-size: 80%;
}