/* plugins used: lazysizes */
.articles-tiles {
    display: -webkit-box;
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.articles-tiles .articles-tiles-article-type-1,
.articles-tiles .articles-tiles-article-type-2 {padding: 0 10px; margin-bottom: 20px; position: relative; width: 25%;}
.articles-tiles .articles-tiles-article-type-1 {height: 512px}
.articles-tiles .articles-tiles-article-type-2 {height: 290px}
.articles-tiles .articles-tiles-inner-box {
    overflow: hidden; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 290px; position: relative;
    border-radius: 0px; border-radius: 5px;
    -webkit-transition: opacity .5s .5s;
    -o-transition: opacity .5s .5s;
    transition: opacity .5s .5s
}
.articles-tiles .articles-tiles-inner-box::after {
    content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0);
    -webkit-transition: background-color .4s;
    -moz-transition: background-color .4s;
    -ms-transition: background-color .4s;
    transition: background-color .4s;
}
.articles-tiles .articles-tiles-bottom-text {
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.75); color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 25px; z-index: 2;
    background: rgba(9,27,56,0.8);    
}
.articles-tiles .articles-tiles-article-title {
    font-size: 14px; font-weight: 600; padding-right: 15px; padding-bottom: 15px; position: relative;
    padding-top: 15px; min-height: 65px;
}
/*
.articles-tiles .articles-tiles-article-title::after {
    content: "\6f"; font-family: "icube-font"; color: #3d11cb; position: absolute; right: 0; top: 50%; margin-top: -15px
}
*/
.articles-tiles .articles-tiles-article-title > a {color: #fff}
.articles-tiles .articles-tiles-short-contents {display: none; font-size: 13px; padding: 15px 0 20px; border-top: 1px solid #b6b3b1}
.articles-tiles .articles-tiles-bottom-shadow {
    background: url(../../images/articles-tiles-bottom-shadow.png) left bottom repeat-x; height: 100%; position: absolute; bottom: 0px;
    left: 0; width: 100%; opacity: 1;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    transition: opacity .2s
}

/* hovers */
.articles-tiles.js-has-clickables .articles-tiles-article-type-1:hover .articles-tiles-inner-box::after,
.articles-tiles.js-has-clickables .articles-tiles-article-type-2:hover .articles-tiles-inner-box::after {background-color: rgba(0,0,0,0.6)}
.articles-tiles.js-has-clickables .articles-tiles-article-type-1:hover .articles-tiles-bottom-shadow,
.articles-tiles.js-has-clickables .articles-tiles-article-type-2:hover .articles-tiles-bottom-shadow {opacity: 0}

/* modifiers */
.articles-tiles .articles-tiles-inner-box.no-photo {background-size: 100px; background-color: #f4f4f4}
.articles-tiles.is-slider {display: block; height: auto}
.articles-tiles.is-slider .articles-tiles-article-type-1,
.articles-tiles.is-slider .articles-tiles-article-type-2 {width: 100%; margin-bottom: 0}

/* overwrites */
.articles-tiles .articles-tiles-inner-box.lazyload {background-image: url(../../images/placeholder.svg); background-size: 50%}
.articles-tiles .articles-tiles-inner-box.lazyloaded {background-size: cover; opacity: 1}

/* nojs */
.no-js .articles-tiles .articles-tiles-inner-box {opacity: 1}