@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

.widget.widget_top_news {padding: 0;}

.sidebar-after-header .widget {
    padding: 0;
}
.widget_top_news .row > div {
    padding: 0;
}
.top-news-item-content > img {
    width: 100%;
}
.top-news-item .top-news-item-content {
    margin-right: 1px;
}
.top-news-item:last-child .top-news-item-content {
    margin-right: 0;
    
}
.top-news-item-content {
    margin-top: 1px;
}
.top-news-item-content:first-child {
    margin-top: 0;
}
.top-news-high {
    height: 389px;
}
.top-news-low {
    height: 194px;
}
.top-news-high > a, .top-news-high > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25;
    display: block;
    cursor: pointer;
}

.top-news-item-content--table {
    text-align: center;
    display: table;
    height: 100%;
    width: 100%;
}
.top-news-item-content--cell {
    position: relative;
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    line-height: 0; /* need to remove unnecessary spaces inline-block's */
    overflow: hidden;
}
.top-news-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.top-news-item-meta {
    position: relative;
}
@media screen and (max-width: 767px) {
    .top-news-item {
        margin-bottom: 1px;
    }
    .top-news-item-content.top-news-high {
        margin-top: 1px;
        margin-bottom: 1px;
    }
}
.top-news-item-content .overlay {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.top-news-high.top-news-item-content .overlay {
    height: 389px;
}
.top-news-low.top-news-item-content .overlay {
    height: 194px;
/*     border-right: 1px solid #fff; */
}
.top-news-item-content .overlay {background: rgba(50,50,50,0.01); /* #323232 */}
.top-news-item-content:hover .overlay {background: rgba(0,0,0,0.65);}
.top-news-item-content .overlay:before,
.top-news-item-content .overlay:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.top-news-item-content .overlay:before {}
.top-news-item-content .overlay:after {
    background: -moz-linear-gradient(top,  rgba(50,50,50,0.01) 35%, rgba(50,50,50,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(35%,rgba(50,50,50,0.01)), color-stop(100%,rgba(50,50,50,0.9)));
    background: -webkit-linear-gradient(top,  rgba(50,50,50,0.01) 35%,rgba(50,50,50,0.9) 100%);
    background: -o-linear-gradient(top,  rgba(50,50,50,0.01) 35%,rgba(50,50,50,0.9) 100%);
    background: -ms-linear-gradient(top,  rgba(50,50,50,0.01) 35%,rgba(50,50,50,0.9) 100%);
    background: linear-gradient(to bottom,  rgba(50,50,50,0.01) 35%,rgba(50,50,50,0.9) 100%);
}

/* Category */
.top-news-category {
    display: inline-block;
}
.top-news-category a {
    display: inline-block;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    padding: 0.4167em 1.5em;
    margin: 1em;
    background-color: #00abef;
    color: #ffffff;
}
.top-news-high .top-news-category a {background-color: #e12968;}
.top-news-item:nth-child(1) .top-news-item-content:nth-child(2) .top-news-category a {background-color: #90b032;}
.top-news-item:nth-child(3) .top-news-item-content:nth-child(1) .top-news-category a {background-color: #d93e2d;}
.top-news-item:nth-child(3) .top-news-item-content:nth-child(2) .top-news-category a {background-color: #f9a729;}

.top-news-category a,
.top-news-category a:focus,
.top-news-category a:active {
    color: #ffffff;
}
.top-news-category a:hover,
.top-news-high .top-news-category a:hover,
.top-news-item:nth-child(1) .top-news-item-content:nth-child(2) .top-news-category a:hover,
.top-news-item:nth-child(3) .top-news-item-content:nth-child(1) .top-news-category a:hover,
.top-news-item:nth-child(3) .top-news-item-content:nth-child(2) .top-news-category a:hover {
    background-color: #323232;
}

/* Title */
.top-news-title {
    font-size: 17px;
    font-size: 1.7rem;
    font-weight: 100;
    line-height: 1;
    letter-spacing: -0.028em;
    padding: 0 1.25em 1.6em 1.25em;
    color: #ffffff;
}
.top-news-high .top-news-title {
    font-size: 24px;
    font-size: 2.4rem;
    padding: 0 0.5833em 0.75em 0.5833em;
}
.top-news-high .top-news-title.with-post--meta {
    padding: 0 0.5833em 0.5833em 0.5833em;
}
@media screen and (min-width: 68.75em) {
    .top-news-high .top-news-title {
        font-size: 30px;
        font-size: 3.0rem;
        padding: 0 2.3889em 0.4334em;
    }
    .top-news-high .top-news-title.with-post--meta {
        padding: 0 0.3889em 0.3889em 0.3889em;
    }
}

.top-news-title a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.top-news-title a,
.top-news-title a:focus,
.top-news-title a:active {
    color: #ffffff;
}
.top-news-title a:hover {
    color: rgba(255, 255, 255, 0.5);
}

/* Post meta */
.post--views,
.post--count,
.post--likes {
    font-size: 12px;
    font-size: 1.2rem;
    display: inline-block;
    line-height: 1;
    padding: 0 0.5834em 1em 0.5834em;
    
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.top-news-item-content--cell:hover .post--views,
.top-news-item-content--cell:hover .post--count,
.top-news-item-content--cell:hover .post--likes {
    opacity: 1;
}
.post--views,
.post--count,
.post--likes,
.post--count,
.post--count a {
    color: #ffffff;
}
.post--views:before,
.post--count a:before,
.post--likes:before {
    content: '';
    font-family: 'rt-icons-2';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    
    font-size: 18px;
    font-size: 1.8rem;
    display: block;
    float: left;
    margin-top: -2px;
    margin-top: -.2rem;
    padding-right: 0.3571em;
    color: #c14240;
    
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.post--count a:hover:before {
    color: rgba(193, 66, 64, 0.5);
}

/* icons */
.post--views:before {content: "\e006";}
.post--count a:before {content: "\e706";}
.post--likes:before {content: "\e710";}

/* Font family */
.top-news-category a,
.top-news-title,
.post--views,
.post--count,
.post--likes {
    font-family: 'Roboto', sans-serif;
}

/* Letter spacing */
.top-news-category,
.top-news-category a,
.post--views,
.post--count,
.post--count a,
.post--likes {
    letter-spacing: 0;
}

/* Animate/Transition */
.top-news-item-content .overlay,
.top-news-item-content:hover .overlay {
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

/* Change layout for different places */

/* Secondary / left/right sidebar */
.secondary .top-news-item {width: 100% !important;}
.secondary .top-news-item .top-news-item-content {margin: 0}
.secondary .top-news-item + .top-news-item .top-news-item-content {margin: 1px 0 0 0;}
.secondary .top-news-item .top-news-item-content + .top-news-item-content {margin: 1px 0 0 0;}
.secondary .high-position-3 .top-news-low {margin-right: 0;}
.secondary .high-position-3 .top-news-high {
    margin-top: 1px;
    margin-right: 0;
    margin-bottom: 1px;
}

/* Hentry-Sub */

.widget_top_news .hentry-sub {
    text-align: center;
    padding-bottom: 30px;
}

.widget_top_news .hentry-sub a:hover {
    color: #fff !important;
}