/* --------------------------- ARTICLE LIST ---------------------------- */ .article-list > .header { font-size: 22px; margin-bottom: 1em; } .article-list .article .image { display: inline-block; position: relative; } .article-list .article .image a { display: inline-block; position: relative; width: 100%; height: 100%; overflow: hidden; } .article-list .article .image a span.overlayer { display: inline-block; position: absolute; width: 40px; height: 40px; bottom: 10px; right: 10px; background: rgba(255,255,255,.9) 61% 50% no-repeat; background-size: 35%; border-radius: 50%; transition: background .2s ease-in-out; } #main-content .article-list .article .image a span.overlayer { width: 45px; height: 45px; bottom: 10px; right: 10px; } .article-list .article .image a:hover span.overlayer { background-color: rgba(255,255,255,1); } .article-list .article .image a span.overlayer.video { background-image: url('/client.images/rev2021/icons/ico-play.svg'); } .article-list .article .content .info { display: inline-block; font-size: 14px; color: #707070; height: auto; margin-bottom: 0; } .article-list .info .sprite { margin-top: 0; } .article-list .article .content .info a.forum { color: #ee7598; background-position: -16px -13px; padding-left: 20px; display: inline-block; transition: none; width: auto; height: auto; } .article-list .article .content .info a.forum:hover { color: #da537a; background-position: -15px -63px; } .article-list .article .content a { color: #000; text-decoration: none!important; font-size: 95% } .article-list .article .content a:hover { color: #da537a; text-decoration: underline!important; } /* article lists */ .article-list .article { margin-bottom: 30px; background: #fff; height: 160px; overflow: hidden; display: block; position: relative; } .article-list .article .image { width: 320px; height: 160px; float: left; } .article-list .article .image img { width: 320px; height: auto; } .article-list .article .content { display: inline-block; width: 318px; height: 142px; padding: 5px 0 10px 30px; position: absolute; } .article-list .article .content h2 { display: block; overflow: hidden; height: auto; font-weight: 700; padding-left: 2px; margin-left: -2px; } .article-list .article .content h2 a { font-size: 95%; } .article-list .article.pr .content { padding-top: 14px; height: 133px; } .article-list .article .content .tags { display: block; position: relative; margin-top: -7px; color: #ee7598; text-transform: uppercase; } .article-list .article .content .tags:before { display: block; position: absolute; top: calc(50% - 3px); height: 1px; left: 0; width: 100%; border-bottom: 1px solid #ee7598; content: ""; z-index: 2; } .article-list .article .content .tags > span { background-color: #fff; display: inline-block; padding-right: 10px; z-index: 3; position: relative; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; overflow: hidden; } .article-list .article .content .tags a { display: inline-block; font-size: 15px; color: #ee7598; } .article-list .article .content .info { position: absolute; left: 28px; bottom: -6px; } /* main article */ .article-list .article.main { height: auto; overflow: visible; margin-bottom: 20px; } .article-list .article.main .image { width: 674px; height: 337px; float: none; } .article-list .article.main .image img { width: 674px; height: 337px; } .article-list .article.main .content { display: block; width: auto; height: auto; padding: 13px 0 18px; position: relative; } .article-list .article.main h1, .article-list .article.main h2 { margin-top: -1px; margin-bottom: 15px; } .article-list .article.main h1, .article-list .article.main h1 a, .article-list .article.main h2, .article-list .article.main h2 a { font-size: 28px; line-height: 32px; font-weight: 700; } .article-list .article.main h1, .article-list .article.main h1 a { line-height: 35px; } .article-list .article.main .content .info { left: 0px; bottom: 8px; } /* --------------------------- PAGE PAGER ---------------------------- */ .art-pgr { text-align: center } .art-pgr table,section.ar .art-pgr td { width: 100% } .art-pgr td:empty { display: none } .art-pgr .btn.disabled { visibility: hidden } .art-pgr .btn:before { display: inline-block } .art-pgr .btn-curr:before { display: inline-block; margin-bottom: 10px } .art-pgr .btn-curr a:before { border: 0; border-image: none } .art-pgr .btn-curr a { background: url(/client.images/rev2021/backgrounds/bg-pager.svg?v=1.0.001); background-size: 100% 100%; color: #fff!important; padding: 22px 30px 24px 30px; margin-left: 6px; margin-right: 11px; top: -8px } .art-pgr .btn-prev a, .art-pgr .btn-next a { padding: 5px 8px 5px 6px } .art-pgr .btn-prev a:after, .art-pgr .btn-next a:after { content: ""; height: 31px; display: inline-block; background: url(/client.images/rev2021/icons/ico-arrow.svg) no-repeat center center; background-size: contain; width: 31px } .art-pgr .btn-prev a:hover:after, .art-pgr .btn-next a:hover:after { background-image: url(/client.images/rev2021/icons/ico-arrow-pink.svg); } .art-pgr .btn-next a:after { transform: rotate(180deg) } /* ****************************** Lazy Load ***************************** */ .lazy-placeholder { overflow: hidden; position: relative; display: block; width: 100%; left: 0; padding-bottom: 50%; background: #fff; } .lazy-placeholder:not(.loaded):after { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(51deg,#fff,#d8d8d8,#fff); } .lazy-placeholder.loaded:after { position: absolute; top: 0; left: 0; right: 0; border: 1px solid #e1e1e1; bottom: 0; content: ""; } .lazy-placeholder > img { position: absolute; top: calc(-100% + 1px); left: 0; } .lazy-placeholder.loaded > img { top: 0; } #main-content .article-list .article .image .lazy-placeholder > img { height:165px; } #main-content .article-list .article.main .image .lazy-placeholder > img { height:345px; } .b-top .row .lazy-placeholder { float: left; margin-right: 15px; width: 150px; padding-bottom: 75px; } .b-top .row .lazy-placeholder img { float: none!important; margin-right: 0!important; } #cnc-hub .lazy-placeholder { width: 150px; padding-bottom: 113px; margin-bottom:7px; } #cnc-hub .lazy-placeholder img { float: none!important; height:113px; }