/**
 * Recent posts
 */

ul.recent-posts {
    overflow: hidden;
    margin-top: -15px;
}
ul.recent-posts li {
    padding: 0;
    margin: 15px 0 0 0;
    overflow: hidden;
}
@media screen and (min-width: 1200px) {
    ul.recent-posts {
        margin-top: -20px;
    }
    ul.recent-posts li {
        margin: 20px 0 0 0;
    }
}

.recent-posts__inner {
    overflow: hidden;
    background-color: #ffffff;
}
.footer .recent-posts__inner {
    background-color: #f9f9f9;
}

/* Recent posts -- List */
.recent-posts.layout-1 {}

/* Recent posts -- Grid 1 */
.recent-posts.layout-2 li {
    display: inline-block;
    vertical-align: top;
    width: 100%;
}
.recent-posts.layout-2 .recent-posts__inner {padding-bottom: 16px;}

/* Recent posts -- Grid 2 */
.recent-posts.layout-3 li {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.recent-posts.layout-3 {margin-left: -20px;}
.recent-posts.layout-3 .recent-posts__inner {margin-left: 20px; padding-bottom: 14px;}

/* Recent posts -- Title */
.recent-posts__title {color: #4c4c4c;}
.recent-posts__title:hover {color: #e12968;}

.recent-posts.layout-1 a.recent-posts__title {
    font-size: 14px !important;
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
    margin-bottom: 3px;

    /* text ... */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.recent-posts.layout-2 a.recent-posts__title {
    font-size: 18px !important;
    font-size: 1.8rem !important;
    line-height: 1.1111 !important;
    margin-bottom: 3px;
}
.recent-posts.layout-3 a.recent-posts__title {
    font-size: 14px !important;
    font-size: 1.4rem !important;
    line-height: 1.1428 !important;

    /* two lines */
    overflow: hidden;
    height: 32px;
    height: 3.2rem;
}

/* Recent posts -- Content & meta */
.recent-posts__content {
    display: block;
    overflow: hidden;
    color: #b2b2b2;
}
.recent-posts.layout-1 .recent-posts__content {padding: 12px 10px 0 20px;}
.recent-posts.layout-2 .recent-posts__content {padding: 17px 30px 0 30px;}
.recent-posts.layout-3 .recent-posts__content {padding: 18px 20px 0 20px;}

.recent-posts__date,
.recent-posts__views,
.recent-posts__likes {
    font-size: 12px;
    font-size: 1.2rem;
}

.recent-posts.layout-3 .recent-posts__date,
.recent-posts.layout-3 .recent-posts__views {
    font-size: 10px;
    font-size: 1rem;
}

.recent-posts__date {float: left;}
.recent-posts__views {float: right; margin-left: 5px;}
.recent-posts__likes {
    position: absolute;
    left: 7px;
    bottom: 2px;
    color: #ffffff;
    opacity: 0;
}
.recent-posts__likes .icon-heart-outline {
    margin-top: -3px;
}
.recent-posts__media:hover .recent-posts__likes {
    opacity: 1;
}
.recent-posts__icon {
    font-size: 11px;
    font-size: 1.1rem;
    margin-right: 3px;
    color: #e12968;
}

/* Recent posts -- Media */
.recent-posts__media {
    display: block;
    position: relative;
}
.recent-posts.layout-1 .recent-posts__media {float: left; width: 100px;}
.recent-posts__media img {margin: 0; float: none;}
.recent-posts.layout-2 .recent-posts__media img {width: 100%; margin: 0;}
.recent-posts.layout-3 .recent-posts__media img {width: 100%; margin: 0;}
.recent-posts__media .overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
}
.recent-posts__media:hover .overlay {
    background-color: rgba(50, 50, 50, 0.5);
}
.recent-posts__media .overlay:before,
.recent-posts__media .overlay:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    opacity: 0;
    color: #e12968;
    font-family: 'rt-icons-2';
}
.recent-posts__media:hover .overlay.audio:before,
.recent-posts__media:hover .overlay.video:before {content: '\e696';}
.recent-posts__media:hover .overlay:before,
.recent-posts__media:hover .overlay:after {opacity: 1; color: #ffffff;}

/* Font family */
.recent-posts__title,
.recent-posts__content,
.font-family--roboto {
    font-family: 'Roboto', sans-serif;
}

/* Animate/Transition */
.recent-posts__media .recent-posts__likes,
.recent-posts__media:hover .recent-posts__likes,
.recent-posts__media .overlay,
.recent-posts__media:hover .overlay,
.recent-posts__media .overlay:before,
.recent-posts__media .overlay:after,
.recent-posts__media:hover .overlay:before,
.recent-posts__media:hover .overlay:after,
.transition--on {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/* Disable: Animate/Transition */
.transition--off {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

/**
 * Responsive and widget placements
 */

.widget_recent_entries img {display: block !important;} /* always view img */

@media screen and (min-width: 769px) {
    /* Sidebar after header -- list */
    .sidebar-before-header .recent-posts.layout-1 li,
    .sidebar-after-header .recent-posts.layout-1 li {
        display: inline-block;
        vertical-align: top;
        width: 33.33333333%;
    }
    .sidebar-before-header .recent-posts.layout-1,
    .sidebar-after-header .recent-posts.layout-1 {margin-left: -20px;}
    .sidebar-before-header .recent-posts.layout-1 .recent-posts__inner,
    .sidebar-after-header .recent-posts.layout-1 .recent-posts__inner {margin-left: 20px;}
    /* Sidebar after header -- grid 1 */
    .sidebar-before-header .recent-posts.layout-2 li,
    .sidebar-after-header .recent-posts.layout-2 li {
        display: inline-block;
        vertical-align: top;
        width: 33.33333333%;
    }
    .sidebar-before-header .recent-posts.layout-2,
    .sidebar-after-header .recent-posts.layout-2 {margin-left: -20px;}
    .sidebar-before-header .recent-posts.layout-2 .recent-posts__inner,
    .sidebar-after-header .recent-posts.layout-2 .recent-posts__inner {margin-left: 20px;}
    /* Sidebar after header -- grid 2 */
    .sidebar-before-header .recent-posts.layout-3 li,
    .sidebar-after-header .recent-posts.layout-3 li {
        display: inline-block;
        vertical-align: top;
        width: 25%;
    }
    .sidebar-before-header .recent-posts.layout-3,
    .sidebar-after-header .recent-posts.layout-3 {margin-left: -20px;}
    .sidebar-before-header .recent-posts.layout-3 .recent-posts__inner,
    .sidebar-after-header .recent-posts.layout-3 .recent-posts__inner {margin-left: 20px;}
}