.latest-news-widget-mod { overflow: hidden; margin-bottom: 50px; background-color: #000; position: relative } @media (min-width:980px) { .latest-news-widget-mod { display: -ms-flexbox; display: flex } } .latest-news-widget__latest__h { font-size: 41px; font-weight: $base-font-weigth-bold; font-family: $basefont-stack; margin: 0 0 18px; line-height: 1; padding: 15px 0; border-bottom: 1px solid; background: #fff; position: absolute; top: 0; right: 0; left: 0; display: none } @media (min-width:980px) { .latest-news-widget__latest__h { position: static; display: block } } @media screen and (min-width: 980px) and (max-width: 1000px) { .latest-news-widget__latest__h { font-size: 38px; } } @media screen and (min-width: 1200px) and (max-width: 1313px) { .latest-news-widget__latest__h { font-size: 36px; } } .latest-news-widget__latest__tease-group { list-style: none; margin-bottom: 0; padding-top: 2px; padding-left: 0 } @media (min-width:600px) and (max-width:979px) { .latest-news-widget__latest__tease-group { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .latest-news-widget__latest__tease { width: 48% } .latest-news-widget__latest__tease:nth-child(odd) { margin-right: 2% } .latest-news-widget__latest__tease:nth-child(even) { margin-left: 2% } } @media (min-width:980px) { .latest-news-widget__latest__tease-group { padding-top: 0 } } .latest-news-widget__latest__tease { padding: 18px 0 18px 7px; border-bottom: 1px solid #000; position: relative; font-family: harriet, serif; font-size: 17px; font-weight: 400 } .latest-news-widget__latest__tease:after { content: ""; display: table; clear: both } .latest-news-widget__latest__tease:last-child { margin-bottom: 0 } .latest-news-widget__latest__tease:first-child { display: none } @media (min-width:600px) { .latest-news-widget__latest__tease:first-child { display: block } } @media (min-width:980px) { .latest-news-widget__latest__tease { padding-left: 0 } } @media (min-width:1600px) { .latest-news-widget__latest__tease { padding-top: 24px; padding-bottom: 24px } } .latest-news-widget__latest__tease__number { display: block; float: left; font-family: akkurat, sans-serif; font-size: 11px; font-weight: 700; height: 26px; min-width: 26px; padding: 8px 4px 0; line-height: 1; border-radius: 13px; box-shadow: 0 0 0 1.4px #000 inset; text-align: center; background-color: $primary-blue; margin: -1px 7px 0 -2px; letter-spacing: 0; transition: all .2s ease; color: #fff } .latest-news-widget__feature__tease__overline, .latest-news-widget__latest__tease__overline { font-family: brauerneue, sans-serif; font-weight: 700; letter-spacing: .075em; font-style: normal; text-transform: uppercase } .latest-news-widget__latest__tease__link:focus .latest-news-widget__latest__tease__number, .latest-news-widget__latest__tease__link:hover .latest-news-widget__latest__tease__number, .tease-is-active .latest-news-widget__latest__tease__number { color: $primary-red; background-color: #fff; box-shadow: 0 0 0 1.4px $primary-red inset; } .latest-news-widget__latest__tease__link:focus { outline:none; } .latest-news-widget__feature:hover { text-decoration: none; } .latest-news-widget__latest__tease__link:hover { text-decoration: none; } .latest-news-widget__latest__tease__hgroup { max-width: 320px; float: left } .latest-news-widget__latest__tease__img-mod { line-height: 0 } .latest-news-widget__latest__tease__img-mod--default { background-size: cover; background-position: 50% 50%; width: 50px !important; height: 50px !important; margin-bottom: 0; margin-left: 0; margin-right: 5px; margin-top: 0; min-width: 50px !important; min-height: 50px !important; float: right; border-radius: 50%; } @media (min-width: 450px) { .latest-news-widget__latest__tease__img-mod--default { width: 80px !important; height: 80px !important; min-width: 80px !important; min-height: 80px !important } } @media (min-width: 1700px) { .latest-news-widget__latest__tease__img-mod--default { margin-right: 10px } } .latest-news-widget__latest__tease--has-image.latest-news-widget__latest__tease--profile .latest-news-widget__latest__tease__hgroup { margin-right: 85px } .latest-news-widget__latest__tease--has-image.latest-news-widget__latest__tease--profile .latest-news-widget__latest__tease__link { display: block } .latest-news-widget__latest__tease__img-mod--profile { width: 80px; position: absolute; top: 0; right: 0; bottom: 0 } .latest-news-widget__latest__tease__img-mod--profile .latest-news-widget__latest__tease__img { max-height: 95%; position: absolute; right: 0; bottom: 0 } .latest-news-widget__latest__tease__overline { margin-bottom: .4em; font-size: 15px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center } .latest-news-widget__latest__tease__overline:after { content: ""; display: table; clear: both } @media (max-width:1069px) { .latest-news-widget__latest__tease__overline { font-size: 14px } } .latest-news-widget__latest__tease__h { display: inline; margin-bottom: 0; line-height: 1.25 } .latest-news-widget__latest__date { color: #ddd } .latest-news-widget__latest__tease__link { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; text-decoration: none; line-height: 1 } .latest-news-widget__latest { background: #fff; width: 100%; box-shadow: -1px 0 #000 } @media (min-width:980px) { .latest-news-widget__latest { position: relative; width: 40%; padding-left: 20px; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between } } @media (min-width:1200px) { .latest-news-widget__latest { width: 30% } } @keyframes fade-in { to { opacity: 1 } } @keyframes fade-out { to { opacity: 0 } } @keyframes latest-news-widget-out { 0% { transform: scale(1.02); opacity: 1 } 100% { transform: scale(1); opacity: 0 } } @keyframes latest-news-widget-in { 0% { transform: scale(1.05); opacity: 0 } 100% { transform: scale(1.02); opacity: 1 } } .latest-news-widget__feature-mod { width: 100%; display: -ms-flexbox; display: flex; overflow: hidden } @media (min-width:980px) { .latest-news-widget__feature-mod { width: 60% } } @media (min-width:1200px) { .latest-news-widget__feature-mod { width: 70% } } .latest-news-widget__feature-mod--inner { min-width: 400%; width: 400%; display: -ms-flexbox; display: flex } .latest-news-widget__feature { position: relative; overflow: hidden; text-decoration: none; min-width: 25%; width: 25% } .latest-news-widget__feature:before { display: block; content: ''; border-left: 1px solid #000; position: absolute; top: 0; bottom: 0; left: 0 } .latest-news-widget__feature.topper-trans-out { opacity: 1; animation: fade-out .3s ease forwards .25s } .latest-news-widget__feature.topper-trans-in { opacity: 1; animation: fade-in .3s ease forwards .25s } .disable-carousel .latest-news-widget__feature:not(:first-child) { display: none } .topper-trans-in .latest-news-widget__feature__img-mod { opacity: 0; animation: latest-news-widget-in 1s ease forwards .2s } .topper-trans-out .latest-news-widget__feature__img-mod { opacity: 1; animation: latest-news-widget-out .5s ease forwards } @keyframes no-img-h-out { from { opacity: 1; transform: translate3d(0, 0, 0) } to { opacity: 0; transform: translate3d(0, -35px, 0) } } @keyframes no-img-h-in { from { opacity: 0; transform: translate3d(0, 35px, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) } } .latest-news-widget__feature.topper-trans-out .latest-news-widget__feature__tease__h, .latest-news-widget__feature.topper-trans-out .latest-news-widget__feature__tease__overline, .latest-news-widget__feature.topper-trans-out .latest-news-widget__feature__text-mod { animation: no-img-h-out .3s ease forwards } .latest-news-widget__feature.topper-trans-in .latest-news-widget__feature__text-mod { opacity: 0; animation: no-img-h-in .5s ease .2s forwards } .latest-news-widget__feature.topper-trans-in .latest-news-widget__feature__tease__h { opacity: 0; animation: no-img-h-in .5s ease .1s forwards } .latest-news-widget__feature.topper-trans-in .latest-news-widget__feature__tease__overline { opacity: 0; animation: no-img-h-in .5s ease forwards } .latest-news-widget__feature--image { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column } @media (min-width:600px) and (max-width:1199px) { .latest-news-widget__feature--image { padding-bottom: 142px } .latest-news-widget__feature--image .latest-news-widget__feature__tease__hgroup { min-height: 142px; position: absolute; right: 0; left: 0; bottom: 0 } } @media (min-width:1200px) { .latest-news-widget__feature--image { -ms-flex-direction: row; flex-direction: row } } .latest-news-widget__feature--image .latest-news-widget__feature__text-mod { display: none } .latest-news-widget__feature--image .latest-news-widget__feature__tease__hgroup { display: -ms-flexbox; display: flex; z-index: 1; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: end; justify-content: flex-end; color: #fff; background-color: #000; padding: 0 20px 20px; -ms-flex-order: 1; order: 1; -ms-flex-align: start; align-items: flex-start } @media (min-width:980px) { .latest-news-widget__feature--image .latest-news-widget__feature__tease__hgroup { padding: 25px } } @media (min-width:1200px) { .latest-news-widget__feature--image .latest-news-widget__feature__tease__hgroup { -ms-flex-order: 0; order: 0; width: 44.5%; padding: 15px; min-width: 230px } } .latest-news-widget__feature__tease__overline { display: inline-block; color: #fff; background-color: #000; line-height: 1; padding: 5px 7px 3px; text-decoration: none; font-size: 15px; box-shadow: 0 0 0 1px #fff inset; margin-bottom: 18px; transition: background-color .25s ease; margin-top: -10px } @media screen and (min-width: 980px) { .latest-news-widget__feature__tease__overline { background-color: #fff; color: #000; } } @media (max-width:1069px) { .latest-news-widget__feature__tease__overline { font-size: 14px } } .latest-news-widget__feature:focus .latest-news-widget__feature__tease__overline, .latest-news-widget__feature:hover .latest-news-widget__feature__tease__overline { color: #fff; background-color: #000 } @media (min-width:980px) { .latest-news-widget__feature__tease__overline { margin-top: 0 } } .latest-news-widget__feature--no-image { padding: 20px; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: end; justify-content: flex-end } @media (min-width:1500px) { .latest-news-widget__feature--no-image { padding: 50px } } .latest-news-widget__feature--no-image .latest-news-widget__feature__img-mod { display: none } @media (min-width:1070px) { .latest-news-widget__feature--no-image .latest-news-widget__feature__tease__h { font-size: calc(50px + (56 - 50) * (100vw - 1070px)/ (1350 - 1070)); } } .latest-news-widget__feature--no-image .latest-news-widget__feature__tease__h span { background: 0 0 } .latest-news-widget__feature--video .latest-news-widget__feature__img-mod:after, .tease-grid__tease__img-mod-vid:after { display: block; background-color: #fff; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; content: '' } .latest-news-widget__feature__text-mod { color: #fff; padding-top: 15px; margin-top: 15px; font-family: harriet, serif; font-size: 16px; position: relative; height: calc(6.7em + 25px); overflow: hidden } .latest-news-widget__feature__text-mod:before { position: absolute; top: 0; right: 0; left: 0; content: ''; display: block; border-top: 1px solid #fff; transition: all .5s ease .4s } .latest-news-widget__feature__text-mod .latest-news-widget__feature__text-mod__inner { max-width: 925px } @media (min-width:770px) { .latest-news-widget__feature__text-mod { height: auto } .latest-news-widget__feature__text-mod .latest-news-widget__feature__text-mod__inner { columns: 2 } } .latest-news-widget__feature__img-mod { width: 100%; background-size: cover; background-position: 50% 50%; position: relative } .latest-news-widget__feature__img-mod:before { display: block; content: ''; width: 100%; padding-top: 66.66% } @media (min-width:1350px) { .latest-news-widget__feature__img-mod { width: 72.5% } } .latest-news-widget__feature--photo .latest-news-widget__feature__img-mod, .latest-news-widget__feature--video .latest-news-widget__feature__img-mod { width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .latest-news-widget__feature--video .latest-news-widget__feature__img-mod:after { position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; border-radius: 50%; background-image: url(../../img/play-icon.svg); border: 1px solid #000; transition: all .2s ease } @media (min-width:600px) { .latest-news-widget__feature--video .latest-news-widget__feature__img-mod:after { width: 94px; height: 94px; margin: -47px 0 0 -47px } } .latest-news-widget__feature--video .latest-news-widget__feature__img-mod:hover::after { -ms-transform: scale(1.05); transform: scale(1.05) } .latest-news-widget__feature__img { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -ms-flex-order: 0; order: 0 } .latest-news-widget__feature__expert-img { width: 6.7em; height: 6.7em; float: left; box-shadow: 0 0 0 1px #fff inset; margin-right: 10px; margin-top: .4em; background-size: cover; background-position: 50% 50% } .latest-news-widget__dropcap { text-align: center; padding-top: .14em; width: 1.31em; height: 1.31em; display: block; float: left; line-height: 1; border: 1px solid; margin-right: .26em; margin-top: .14em; font-family: harriet-display, serif; font-size: 2.8em; font-weight: 500 } .latest-news-widget__feature__expert-name { font-weight: 700 } .latest-news-widget__feature__tease__h { color: #fff; text-decoration: none; margin-bottom: 0; font-family: 'Oswald', sans-serif; font-size: 32px; font-weight: 500; letter-spacing: .1rem; text-transform: uppercase; line-height: 1; max-width: 700px } @media screen and (min-width: 360px) { .latest-news-widget__feature__tease__h { font-size: 38px; } } @media (min-width:600px) and (max-width:1069px) { .latest-news-widget__feature__tease__h { font-size: 46px } } @media (min-width:1070px) { .latest-news-widget__feature__tease__h { font-size: calc(46px + (49 - 46) * (100vw - 1070px)/ (1350 - 1070)) } } // .latest-news-widget__feature__tease__h span { // background-image: linear-gradient(transparent 85%, #fff 85%, #fff 87%, transparent 87%) // } @media screen and (min-width:1200px) { .latest-news-widget__feature__tease__h { width: 100%; } } .latest-news-widget__latest__h--no-underline { border-bottom: none; } .latest-news-widget__red-underline { border-bottom-color: $primary-red; border-bottom-style: solid; border-bottom-width: thick; } .latest-news-widget--rollup__section-margin { margin-left: auto; margin-right: auto; width: 95%; } @media screen and (min-width: 576px) { .latest-news-widget--rollup__section-margin { width: 90%; } } @media screen and (min-width: 768px) { .latest-news-widget--rollup__section-margin { width: 70%; } } @media screen and (min-width: 992px) { .latest-news-widget--rollup__section-margin { width: 60%; } } @media screen and (min-width:1200px) { .latest-news-widget--rollup__section-margin { width: 50%; } } .latest-news-widget--rollup__latest__tease-group { list-style: none; margin-bottom: 0; padding-top: 2px; padding-left: 0 } @media (min-width:980px) { .latest-news-widget--rollup__latest__tease-group { padding-top: 0 } } .latest-news-widget--rollup__latest__tease-width { width: 100%; } @media (min-width:600px) and (max-width:979px) { .latest-news-widget--rollup__latest__tease-width:nth-child(odd) { margin-right: 0; } .latest-news-widget--rollup__latest__tease-width:nth-child(even) { margin-left: 0; } } .latest-news-widget--rollup__latest__tease-width:first-child { display: block; } .latest-news-widget__play-icon { animation: fade-in .4s ease forwards .35s; left: 50%; margin-left: -30px; margin-top: -30px; opacity: 0; position: absolute; top: 17%; width: 60px; z-index: 999; } @media screen and (min-width: 360px) { .latest-news-widget__play-icon { left: 50%; margin-left: -40px; margin-top: -40px; top: 20%; width: 80px; } } @media screen and (min-width: 410px) { .latest-news-widget__play-icon { top: 23%; } } @media screen and (min-width: 500px) { .latest-news-widget__play-icon { top: 27%; } } @media screen and (min-width: 576px) { .latest-news-widget__play-icon { margin-left: -50px; margin-right: -50px; top: 38%; width: 100px; } } @media screen and (min-width: 600px) { .latest-news-widget__play-icon { top: 30%; } } @media screen and (min-width: 980px) { .latest-news-widget__play-icon { left: 50%; margin-left: -65px; margin-top: -65px; top: 30%; width: 130px; } } @media screen and (min-width: 1200px) { .latest-news-widget__play-icon { left: 70%; margin-left: -90px; margin-top: -90px; top: 50%; width: 180px; } } .latest-news-widget__play-icon.topper-trans-out { animation: play-icon-out 1.1s ease forwards; } .latest-news-widget__play-icon.topper-trans-in { animation-name: play-icon-in; animation-duration: 1.1s; animation-timing-function: ease; animation-fill-mode: forwards; } @keyframes play-icon-out { 0% { transform: scale(1.02); opacity: .8 } 100% { transform: scale(1); opacity: 0 } } @keyframes play-icon-in { 0% { transform: scale(1.08); opacity: 0 } 100% { transform: scale(1.02); opacity: .8 } } .latest-news-widget__play-icon.play-zoom-in { animation: play-zoom-in 1.1s ease forwards; } .latest-news-widget__play-icon.play-zoom-out { animation: play-zoom-out 1.1s ease forwards; } @keyframes play-zoom-in { 0% { transform: scale(1.02); opacity: .8; } 100% { transform: scale(1.2); opacity: .95; } } @keyframes play-zoom-out { 0% { transform: scale(1.2); opacity: .95; } 100% { transform: scale(1.02); opacity: .8; } } .latest-news-widget__feature__yt-thumb { background-repeat: no-repeat; background-size: 120% auto; -ms-filter: blur(0px); filter: blur(0px); } .latest-news-widget__feature__yt-thumb { -ms-filter: blur(1px); filter: blur(1px); } @media screen and (min-width:576px) { .latest-news-widget__feature__yt-thumb { -ms-filter: blur(3px); filter: blur(3px); } } @media screen and (min-width:1200px) { .latest-news-widget__feature__yt-thumb { background-size: 280% auto; -ms-filter: blur(5px); filter: blur(5px); } } @media screen and (min-width:1350px) { .latest-news-widget__feature__yt-thumb { background-size: 210% auto; } } @media screen and (min-width:1400px) { .latest-news-widget__feature__yt-thumb { background-size: 200% auto; } } @media screen and (min-width:1500px) { .latest-news-widget__feature__yt-thumb { background-size: 180% auto; } } @media screen and (min-width:1800px) { .latest-news-widget__feature__yt-thumb { background-size: 160% auto; -ms-filter: blur(5px); filter: blur(5px); } } .news__modal-thumb { margin-bottom: 10px; margin-right: 10px; max-width: 200px; } .latest-news-widget__img-mod--crop { border-bottom-left-radius: 25px !important; border-bottom-right-radius: 25px !important; border-top-left-radius: 25px !important; border-top-right-radius: 25px !important; height: 50px !important; margin-right: 5px; min-height: 50px !important; min-width: 50px !important; overflow: hidden; width: 50px !important; } @media screen and (min-width: 480px) { .latest-news-widget__img-mod--crop { border-bottom-left-radius: 40px !important; border-bottom-right-radius: 40px !important; border-top-left-radius: 40px !important; border-top-right-radius: 40px !important; height: 80px !important; min-height: 80px !important; min-width: 80px !important; width: 80px !important; } }