/* First off let's space out the tiles properly with adjusted padding*/
.row-small > .pane-around.component {
    padding: 12px;
}
.row-small > .news-event {
    padding: 0px 12px;
    margin-bottom: 24px;
}

/* Remove negative margins on tablet and below */

@media screen and (max-width: 767px) {
    #masonary.row-small {
        margin: unset !important;
    }
    .row-small > .news-event {
        margin: 0;
        margin-bottom: 24px;
        padding: 0;
    }
    .news-event article {
        height: 100%!important;
    }
    #masonary article div.favourite-box, #masonary article div.date-box {
        position: relative!important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-event:nth-of-type(odd) {
        padding-left: 8px; 
    }

    .news-event:nth-of-type(even) {
        padding-right: 8px;
    }
}

/* Change the display */
.news-event article {
    display: block;
}

/* We need to amend some existing styles to better suit our design*/
.news-article-component .pad-around, .event-component .pad-around {
    padding: 0 16px;
}

.news-article-component .white-panel, .event-component .white-panel {
    box-shadow: unset;
}

/* The vast majority of styles will be applied to all variations */
/* Top image section and icon */
.news-article-component, .event-component {
    background-color: #fff;
    font-family: effra, sans-serif;
}

.news-article-component button img, .event-component button img {
    border: none;
}

.news-article-component img.icon-image, .event-component img.icon-image {
    border: none;
    padding-right: 8px;
}

/* Image Banner */
.news-event article figure span {
    color: #fff;
    display: block;
    font-family: 'effra-regular', sans-serif;
    font-size: 18px;
    line-height: 20px;
    padding: 16px;
    padding-top: 20px;
    text-align: center;
}

.ribbon-grey {
    background-color: #303030;
}

/*Category section*/
.category-box {
    align-items: center;
    display: flex;
    padding: 16px 16px 8px 16px;
}

.category-box p.category {
    color: #303030;
    font-family: 'Effra-Medium';
    font-size: 18px;
    font-style: normal;
    line-height: 20px;
    margin-bottom: 0;
    padding: 0;
}

/*Heading link*/
.news-article-component h2, .event-component h2 {
    color: #303030;
    font-family: 'Effra-Bold';
    font-size: 24px;
    font-style: normal;
    line-height: 26px;
    margin: 2px 14px 16px;
}

.tile-with-image a:hover h2 {
    text-decoration: underline;
}

.news-event article a:focus {
    text-decoration: none;
}

.news-article-component a:focus h2, .event-component a:focus h2 {
    border: 2px solid #303030;
    color: #303030;
    text-decoration: none;
    margin: 0 12px 14px;
}

/*Main Content*/
.news-article-component .theme-editor, .event-component .theme-editor {
    color: #303030;
    font-family: 'Effra-Regular';
    font-size: 18px;
    line-height: 26px;
    max-height: unset;
    padding: 0;
    padding-bottom: 18px;
}

.news-article-component .theme-editor strong, .event-component .theme-editor strong {
    font-family: 'Effra-Regular';
}

.news-article-component p, .news-article-component span, .event-component p, .event-component span {
    color: #303030;
    font-family: 'Effra-Regular';
    font-size: 18px;
    line-height: 26px;
    padding: 0;
}

/*Favourite box and date box*/
.favourite-box, .date-box {
    display: flex;
    border-top: 1px solid #ACACAC;
    margin: 0 16px;
    /* The position will be set once the script has run */
    /* position: absolute; */
    bottom: 0;
    left: 0;
    right: 0;
}

.news-article-component .favourite-box .favourite-text, .event-component .favourite-box .favourite-text, .event-component .event-date {
    color: #303030;
    font-family: 'Effra-Medium';
    font-size: 16px;
    font-style: normal;
    line-height: 18px;
    padding: 24px 0;
}

/* Favourite Icon and states */

.news-event .favourite-box button {
    padding-left: 8px;
}
.news-event .favourite-box button .fa-star {
    color: #158473;
    font-size: 18px;
    padding: 1px;
}
.news-event .favourite-box button:hover .fa-star {
    color: #303030;
}
.news-event .favourite-box button:focus {
    box-shadow: none;
    padding-left: 6px;
}
.news-event .favourite-box button:focus .fa-star {
    border: 2px solid #303030;
    color: #158473;
    padding: 1px;
}
.news-event .favourite-box button:active .fa-star {
    color: #303030;
}


/* Difference of colour between News and Events */
.event-component figure {
    border-bottom: 8px solid #5C6FCC;
}

.news-article-component figure {
    border-bottom: 8px solid #C74486;
    text-decoration: none;
}

/* Padding at the bottom of the loading panel */
.loading-padding {
    padding-bottom: 24px;
}

@media screen and (min-width: 1025px) {
    .loading-padding {
        padding-left: 38px !important;
    }
}