/**
 * Rekker WPB - Icon Box
 *
 * Styles the Icon Box element: the bordered container, the linked image and
 * title, and the spin keyframes the hover script triggers. Below 768px the
 * corners square off and the icon is hidden, leaving a full-width title bar.
 *
 * Filename: assets/frontend/css/rwpb.css
 *
 * @package RekkerWpb
 * @since 0.1.0
 */

.rwpb-icon-box-container {
    box-sizing: border-box;
    width: 100%;
    transition: transform .2s;
    text-align: center;
    border-radius: 25px;
}

.rwpb-icon-box-href {
    float: left;
    width: 100%;
    height: 100%;
    color: rgb(0, 0, 0);
}

.rwpb-icon-box-title {
    text-align: center;
    float: left;
    width: 100%;
    height: auto;
    padding: 10px;
}

.rwpb-icon-box-image {
    padding: 10% auto;
    text-align: center;
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

@media ( max-width: 768px ) {
    .rwpb-icon-box-container {
        border-radius: 0;
        margin: 5px 0;
    }

    .rwpb-icon-box-image {
        display: none;
    }
}