@charset "UTF-8"; @import url("//hello.myfonts.net/count/3878b6"); @import url("//hello.myfonts.net/count/3878b7"); .m-ad { line-height: 0; overflow: hidden; text-align: center; } .m-ad iframe { margin: 0; } .m-ad__collapsed { display: none; } .m-ad__desktop_leaderboard_variable { margin: 3rem auto; } .m-ad__mobile_leaderboard { margin: 2rem 0; } .m-ad__mobile_med_rec_athena { margin: 2rem auto; } .m-ad__mobile_med_rec_athena .dfp_ad--is-filled { display: block; } #intro .m-ad__mobile_med_rec_athena { margin-bottom: 0; } .m-ad__athena { margin: 3rem auto; } .m-ad__athena .dfp_ad--is-filled { width: 100%; } .m-ad__athena .dfp_ad--is-filled iframe { margin: 0 auto; } @media (max-width: 500px) { .m-ad__athena { margin: 2rem auto; } } .dfp_ad--held-area { background-color: rgba(250, 250, 250, 0.5); border: 1px solid rgba(250, 250, 250, 0.8); display: inline-block; overflow: hidden; position: relative; } .dfp_ad--held-area:before { content: "AD"; position: absolute; width: 100%; transform: translateY(-50%); top: 50%; left: 0; text-align: center; font-size: 16px; color: #9a9a9a; z-index: 1; } .dfp_ad--held-area > div { z-index: 2; position: relative; } .m-ad__desktop_leaderboard_variable .dfp_ad--held-area, .m-ad__medium_rectangle_variable .dfp_ad--held-area { background: none; border: none; } .m-ad__desktop_leaderboard_variable .dfp_ad--held-area:before, .m-ad__medium_rectangle_variable .dfp_ad--held-area:before { content: ""; } .dfp_ad--is-empty { height: 1px; background-color: transparent; border: none; } .dfp_ad--is-empty:before { height: 0; overflow: hidden; } .dfp_ad--is-filled { background-color: rgba(250, 250, 250, 0.1); border: none; height: auto; margin: 1px 0px; border: none; } .ring-container { display: none; position: relative; margin-left: -17px; -moz-transform: translateY(2px); -o-transform: translateY(2px); -ms-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px); } .circle { width: 5px; height: 5px; background-color: #62bd19; border-radius: 50%; position: absolute; top: 4px; left: 4px; } .ringring { display: none; border: 1px solid #62bd19; -webkit-border-radius: 30px; height: 13px; width: 13px; position: absolute; left: 0; top: 0; -webkit-animation: pulsate 1.5s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.0; } body:not(.mobile):not(.no-transition) .ringring { display: block; } body.tablet .ringring { display: block; } @-webkit-keyframes pulsate { 0% { -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 0.0; } 50% { opacity: 1.0; } 100% { -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0.0; } } @media (max-width: 767px) { .ring-container { display: none; } } @media (min-width: 768px) { body.small.mock-draft .card-item:not(.expanded-card) .rank-column .info-bubble { top: 50% !important; left: 50% !important; width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; opacity: 0; -webkit-transition: transform 0.175s 0s, background-color 0.25s linear, opacity 0.25s linear; -moz-transition: transform 0.175s 0s, background-color 0.25s linear, opacity 0.25s linear; -ms-transition: transform 0.175s 0s, background-color 0.25s linear, opacity 0.25s linear; -o-transition: transform 0.175s 0s, background-color 0.25s linear, opacity 0.25s linear; transition: transform 0.175s 0s, background-color 0.25s linear, opacity 0.25s linear; } } body.small .card-item:not(.expanded-card) { max-height: 125px; } body.small .card-item:not(.expanded-card) .toggle-card { bottom: 50%; height: auto; transform: translateY(50%); right: 20px; } body.small .card-item:not(.expanded-card) .toggle-card .arrow-fill { fill: #0B7853 !important; } body.small .card-item:not(.expanded-card).qb .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).rb .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).wr .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).te .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).c .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).t .toggle-card .arrow-fill, body.small .card-item:not(.expanded-card).g .toggle-card .arrow-fill { fill: #cd5100 !important; } body.small .card-item:not(.expanded-card) .player-main .player-rank-name { flex: 0 0 auto; margin-top: 2px; } body.small .card-item:not(.expanded-card) .player-main h3 { font-size: 48px; line-height: .85; flex: 0 0 auto; } @media (max-width: 991px) and (min-width: 768px) { body.small .card-item:not(.expanded-card) .player-main h3 { font-size: 4.25vw; } } body.small .card-item:not(.expanded-card) .rank-column { opacity: 1; overflow: visible; max-width: 15.25%; } body.small .card-item:not(.expanded-card) .rank-column .rank { color: black; font-size: 135px; line-height: .45; text-align: left; left: 20px; right: auto; } body.small .card-item:not(.expanded-card) .rank-column .image img { visibility: visible; } body.small .card-item:not(.expanded-card) .info-column { max-width: 84.75%; padding-left: 30px; padding-right: 60px; padding-top: 0; } body.small .card-item:not(.expanded-card) .info-column .info-bubble { -moz-transform: scale(0) !important; -o-transform: scale(0) !important; -ms-transform: scale(0) !important; -webkit-transform: scale(0) !important; transform: scale(0) !important; } body.small .card-item:not(.expanded-card) .info-column h4 { height: 18px; display: inline-block; } body.small .card-item:not(.expanded-card) .info-column .medium-show { padding-top: 30px; padding-left: 0; } body.small .card-item:not(.expanded-card) .info-column .player-main { flex: 1; max-width: unset; } body.small .card-item:not(.expanded-card) .info-column .player-main h3 span { display: inline-block; } body.small .card-item:not(.expanded-card) .info-column .player-stats { width: 340px; padding-right: 10px; } body.small .card-item:not(.expanded-card) .info-column .player-stats ul li { max-width: 60px; } body.small .card-item:not(.expanded-card) .info-column .player-stats ul li span.number { font-size: 18px; } body.small .card-item:not(.expanded-card) .info-column .player-meta { display: none; } body.small .card-item:not(.expanded-card) .info-column .player-description { border: 0; } body.small .card-item:not(.expanded-card) .info-column .player-description:before, body.small .card-item:not(.expanded-card) .info-column .player-description:after { display: none; } body.small .card-item:not(.expanded-card) .info-column .player-stats ul { height: 100%; max-width: 385px; min-width: 300px; float: right; align-items: flex-start; } @media (max-width: 767px) { body.small .card-item:not(.expanded-card) .info-column .player-stats ul { width: 100%; } } body.small .card-item:not(.expanded-card) .info-column .player-stats ul li { margin-bottom: 0; } body:not(.large) .card-item:not(.expanded-card) { cursor: pointer; } body:not(.small) .card-item, body .card-item.expanded-card { max-height: 5000px; } body:not(.small) .card-item.has-hover:hover .rank-column img.hover-image, body .card-item.expanded-card.has-hover:hover .rank-column img.hover-image { opacity: 1; } body:not(.small) .card-item .rank-column, body .card-item.expanded-card .rank-column { max-width: calc(100% - 800px); } body:not(.small) .card-item .rank-column img, body .card-item.expanded-card .rank-column img { visibility: visible; padding-bottom: 10px; } body:not(.small) .card-item .rank-column img.image-loaded, body .card-item.expanded-card .rank-column img.image-loaded { opacity: 1; } body:not(.small) .card-item .rank-column img.hover-image, body .card-item.expanded-card .rank-column img.hover-image { opacity: 0; -webkit-transition: opacity 0s linear; -moz-transition: opacity 0s linear; -ms-transition: opacity 0s linear; -o-transition: opacity 0s linear; transition: opacity 0s linear; } body:not(.small) .card-item.has-hover .rank-column img, body .card-item.expanded-card.has-hover .rank-column img { -webkit-transition: opacity 0s linear; -moz-transition: opacity 0s linear; -ms-transition: opacity 0s linear; -o-transition: opacity 0s linear; transition: opacity 0s linear; } body:not(.small) .card-item.has-hover:hover .rank-column img, body .card-item.expanded-card.has-hover:hover .rank-column img { opacity: 0; -webkit-transition: opacity 0s linear; -moz-transition: opacity 0s linear; -ms-transition: opacity 0s linear; -o-transition: opacity 0s linear; transition: opacity 0s linear; } body:not(.small) .card-item.has-hover:hover .rank-column img.hover-image, body .card-item.expanded-card.has-hover:hover .rank-column img.hover-image { opacity: 1; } body:not(.small) .card-item .info-column, body .card-item.expanded-card .info-column { max-width: 728px; visibility: visible; opacity: 1; } body:not(.small) .card-item .info-column .player-main, body .card-item.expanded-card .info-column .player-main { width: 50%; } body:not(.small) .card-item .info-column .player-stats, body .card-item.expanded-card .info-column .player-stats { padding-right: 0; width: 50%; } body:not(.small) .card-item .info-column .player-meta, body .card-item.expanded-card .info-column .player-meta { width: 100%; } body:not(.small) .card-item .info-column .player-meta .medium-column:nth-child(2) div, body:not(.small) .card-item .info-column .player-meta .medium-column:nth-child(3) div, body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(2) div, body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(3) div { visibility: visible; opacity: 1; } body.medium .card-item .info-column .player-meta { padding: 0 0 0; } body.medium .card-item .info-column .player-meta .medium-column:first-of-type { padding-right: 0; } body.medium .card-item .info-column .player-meta .medium-column:nth-child(2) { padding-left: 0; } body.medium .card-item .info-column .player-meta ul { height: 40px; overflow: hidden; } body.medium .card-item .info-column .player-meta li { visibility: visible; opacity: 1; } body.medium .card-item .info-column .player-info .player-plus-minus, body.medium .card-item .info-column .player-info .player-stat-image { opacity: 0; visibility: hidden; } body.medium .card-item .toggle-card { bottom: 20px; } body.large .card-item:not(.expanded-card) .toggle-card, body .card-item.expanded-card:not(.expanded-card) .toggle-card { display: none; } body.large .card-item .info-column .player-description, body .card-item.expanded-card .info-column .player-description { margin-bottom: 0; } body.large .card-item .info-column .player-info, body .card-item.expanded-card .info-column .player-info { max-height: 1250px; opacity: 1; } body.large .card-item .info-column .player-info .player-stat-image, body.large .card-item .info-column .player-info .player-plus-minus, body .card-item.expanded-card .info-column .player-info .player-stat-image, body .card-item.expanded-card .info-column .player-info .player-plus-minus { visibility: visible; opacity: 1; } body.large .card-item .info-column .player-stats, body .card-item.expanded-card .info-column .player-stats { max-height: 250px; } body.large .card-item .info-column .player-stats ul li:nth-child(n+5), body .card-item.expanded-card .info-column .player-stats ul li:nth-child(n+5) { visibility: visible; opacity: 1; padding-bottom: 0; } body.large .card-item .info-column .player-stats ul li span.detail, body .card-item.expanded-card .info-column .player-stats ul li span.detail { visibility: visible; opacity: 1; margin-top: 0; padding-bottom: 8px; } body.large .card-item .info-column .player-meta ul, body .card-item.expanded-card .info-column .player-meta ul { height: auto; } body.large .card-item .info-column .player-meta .medium-column, body .card-item.expanded-card .info-column .player-meta .medium-column { width: 100%; float: none; padding-right: 0; } body.large .card-item .info-column .player-meta .medium-column:first-of-type, body .card-item.expanded-card .info-column .player-meta .medium-column:first-of-type { padding-right: 0px; } body.large .card-item .info-column .player-meta .medium-column:nth-child(2), body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(2) { padding-left: 0; } body.large .card-item .info-column .player-meta .medium-column:nth-child(3), body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(3) { visibility: visible; opacity: 1; } body.large .card-item .info-column .player-meta .medium-column:nth-child(3) li, body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(3) li { visibility: visible; opacity: 1; } body.large .card-item .info-column .player-meta .medium-column li, body .card-item.expanded-card .info-column .player-meta .medium-column li { visibility: visible; opacity: 1; } body.large .card-item .ringer-coverage, body .card-item.expanded-card .ringer-coverage { visibility: visible; opacity: 1; } .medium .card-item { cursor: default !important; } @media (max-width: 767px) { body.small .card-item:not(.expanded-card) { padding: 0; } body.small .card-item:not(.expanded-card) .toggle-card { bottom: 40px !important; } body.small .card-item:not(.expanded-card) .rank-column { position: relative; background-color: #000 !important; overflow: visible; width: 100%; max-width: 100%; overflow: hidden; } body.small .card-item:not(.expanded-card) .rank-column .rank { color: #000; font-size: 135px; line-height: .45; text-align: left; left: 20px; right: auto; } body.small .card-item:not(.expanded-card) .info-column { max-width: 100%; position: static; overflow: hidden; margin-top: 0; padding: 15px; } body.small .card-item:not(.expanded-card) .info-column .medium-column { padding: 15px; } body.small .card-item:not(.expanded-card) .info-column .player-stats ul { float: none; justify-content: flex-start; max-width: 100%; } body.small .card-item:not(.expanded-card) .info-column .player-stats ul li { height: 100%; } body.small .card-item:not(.expanded-card) .info-column h3 { font-size: 48px !important; line-height: .85; margin-top: -2px; } body:not(.small) .card-item, body .card-item.expanded-card { max-height: 100%; } body:not(.small) .card-item .rank-column, body .card-item.expanded-card .rank-column { width: 100%; max-width: 100%; position: relative; overflow: hidden; } body:not(.small) .card-item .info-column, body .card-item.expanded-card .info-column { width: 100%; max-width: 100%; padding-left: 0; } body.small .card-item { max-height: 100%; } body.small .card-item .rank-column { width: 100%; max-width: 100%; position: relative; overflow: hidden; } body.small .card-item .rank-column .rank { top: 30px; left: 30px; right: auto; } body.small .card-item .rank-column img { visibility: visible; opacity: 1; margin: -35px 0 0; } body.small .card-item .info-column { padding-right: 15px; } body.small .card-item .info-column .medium-column:not(:first-of-type), body.small .card-item .info-column .player-description { display: none; } body.small .card-item .info-column .medium-column li:not(:first-of-type) { display: none; } body.small .card-item .info-column .player-stats ul li { padding-bottom: 0; } body.small .card-item .info-column .player-stats ul li:nth-child(n+5) { display: none; } body.small .card-item .toggle-card { right: 15px; } body.small .card-item:not(.expanded-card) { max-height: 100%; } body.small .card-item:not(.expanded-card) .toggle-card { bottom: 20px; } body.medium .card-item { max-height: 100%; height: auto; } body.medium .card-item .rank-column { position: relative; max-width: 100%; float: none; overflow: hidden; height: 210px !important; } body.medium .card-item .rank-column .rank { font-size: 200px; top: 30px; left: 30px; right: auto; } body.medium .card-item .info-column .player-description { margin-bottom: 0px; } body.medium .card-item .info-column .player-info { display: none; } body.medium .card-item .info-column .player-meta .medium-column { width: 50%; float: left; } body.medium .card-item .info-column .player-meta .medium-column:first-of-type { padding-right: 0; } body.medium .card-item .info-column .player-meta .medium-column:nth-child(2) { padding-left: 15px; } body.medium .card-item .info-column .player-meta li { visibility: visible; opacity: 1; } body .card-item.expanded-card { max-height: 100%; height: auto; } body .card-item.expanded-card .rank-column { width: 100%; max-width: 100%; position: relative; overflow: hidden; } body .card-item.expanded-card .rank-column img { visibility: visible; opacity: 1; } body .card-item.expanded-card .info-column { float: none; width: 100%; max-width: 100%; padding-right: 30px; } body .card-item.expanded-card .info-column .player-description { display: block; } body .card-item.expanded-card .info-column .player-meta { padding: 45px 0 30px; } body .card-item.expanded-card .info-column .player-meta .medium-column { width: 100%; float: none; padding-right: 0; } body .card-item.expanded-card .info-column .player-meta .medium-column:first-of-type { display: block; padding-right: 0px; } body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(2) { display: block; padding-left: 0; } body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(3) { display: block; visibility: visible; opacity: 1; } body .card-item.expanded-card .info-column .player-meta .medium-column:nth-child(3) li { visibility: visible; opacity: 1; } body .card-item.expanded-card .info-column .player-meta .medium-column li { visibility: visible; opacity: 1; } body .card-item.expanded-card .info-column .player-meta .medium-column li:not(:first-of-type) { display: block; } body .card-item.expanded-card .info-column .player-stats ul li { margin-bottom: 24px; } body .card-item.expanded-card .info-column .player-stats ul li:nth-child(n+5) { display: inline-block; } body .card-item.expanded-card .info-column .player-description { margin-bottom: 0; } body .card-item.expanded-card .info-column .player-info { display: block; } } @media (max-width: 767px) { body.small .filtered .card-item { padding: 0; } body.small .filtered.rb .card-item.rb, body.small .filtered.qb .card-item.qb, body.small .filtered.wr .card-item.wr { padding: 15px 0 15px 15px; } body.small .card-item .info-column { padding-right: 15px; } body:not(.small) .card-item .rank-column, body .card-item.expanded-card .rank-column { max-width: 100%; } body:not(.small) .card-item .rank-column .rank, body .card-item.expanded-card .rank-column .rank { font-size: 200px; left: 15px; top: 15px; } body:not(.small) .card-item .info-column .player-stats, body .card-item.expanded-card .info-column .player-stats { width: 100%; } body:not(.small) .card-item .info-column .player-main, body .card-item.expanded-card .info-column .player-main { width: 100%; max-width: 100%; padding-bottom: 15px; } body:not(.small) .card-item .info-column .player-meta, body .card-item.expanded-card .info-column .player-meta { padding: 15px 0; } body:not(.large) .card-item .info-column .player-stats ul li { padding-bottom: 0; } body:not(.large) .card-item .info-column .player-stats ul li span.detail { margin-top: -8px; } body.medium .card-item .rank-column .rank { font-size: 200px; top: 15px; left: 15px; } body.medium .card-item .toggle-card { bottom: 20px; } body.medium .card-item .info-column { padding-bottom: 20px; padding-left: 15px; } body.medium .card-item .info-column .player-meta { padding-bottom: 0px; } body.medium .card-item .info-column .player-meta ul { height: auto; } body.medium .card-item .info-column .player-meta .medium-column { width: 100%; float: none; } body.medium .card-item .info-column .player-meta .medium-column:first-of-type { padding: 0; } body.medium .card-item .info-column .player-meta .medium-column:nth-child(2) { padding-left: 0; } body.large .card-item, body .card-item.expanded-card { padding: 0; } body.large .card-item .rank-column, body .card-item.expanded-card .rank-column { position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; max-width: 100%; max-height: 220px; height: 210px !important; overflow: hidden; padding: 30px 20px; } body.large .card-item .rank-column .rank, body .card-item.expanded-card .rank-column .rank { position: absolute; font-size: 200px; right: auto; left: 15px; top: 15px; } body.large .card-item .info-column, body .card-item.expanded-card .info-column { padding-top: 20px; padding-left: 15px; padding-right: 15px; padding-bottom: 10px; width: 100%; } body.large .card-item .info-column .player-info, body .card-item.expanded-card .info-column .player-info { display: block; max-height: 100%; } body.large .card-item .info-column .player-meta, body .card-item.expanded-card .info-column .player-meta { width: 100%; max-width: 100%; } body.large .card-item .info-column .player-meta .medium-column, body .card-item.expanded-card .info-column .player-meta .medium-column { display: block !important; } body.large .card-item .info-column .player-meta li, body .card-item.expanded-card .info-column .player-meta li { display: block; } body.large .card-item .info-column .player-meta li .value, body .card-item.expanded-card .info-column .player-meta li .value { float: right; } body.large .card-item .info-column .player-meta li:after, body .card-item.expanded-card .info-column .player-meta li:after { content: '........................................................................................................................................................'; } body.large .card-item .info-column .player-stats ul li, body .card-item.expanded-card .info-column .player-stats ul li { max-height: 100%; height: auto; margin-bottom: 15px; } body.large .card-item .info-column .player-stats ul li span.detail, body .card-item.expanded-card .info-column .player-stats ul li span.detail { margin-top: 0; } body.large .card-item .info-column .player-stats ul li:nth-child(n+5), body .card-item.expanded-card .info-column .player-stats ul li:nth-child(n+5) { display: block; margin-top: 0; } body.large .card-item .toggle-card, body .card-item.expanded-card .toggle-card { top: auto; bottom: 10px; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @media (max-width: 350px) { body.small .card-item .toggle-card { right: 10px; } } .more-coverage { clear: both; padding: 0 0px; } .more-coverage:after { clear: both; content: ''; display: table; } .more-coverage h3 { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; margin-bottom: 15px; border-bottom: 1px solid #000; } .more-coverage div { display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin: 0 -15px; } .more-coverage div a { display: block; float: left; margin: 0 15px 30px; } .more-coverage div a h4 { font-size: 17px; color: #000; line-height: 1.2; font-weight: normal; } .more-coverage div a .img { display: block; width: 100%; height: 225px; margin-bottom: 15px; background-size: cover; background-position: center center; filter: grayscale(100%); } .filtered .more-coverage { display: none; } #coverage-footer { position: relative; background: #fff; width: 82.75%; max-width: 1390px; float: right; padding: 0; z-index: 2; margin-top: 30px; } @media (max-width: 767px) { #coverage-footer { margin-top: 10px; } } #coverage-footer .more-coverage h3 { position: relative; margin-bottom: 15px; text-align: left; } #coverage-footer .more-coverage a { width: calc(25% - 30px); } #coverage-footer .more-coverage a .img { height: 195px; } @media (max-width: 1240px) { #coverage-footer { width: 100%; } #coverage-footer .more-coverage { padding-bottom: 0px; } #coverage-footer .more-coverage div a { width: calc(33.3333% - 30px); } } @media (max-width: 767px) { .more-coverage { padding-bottom: 0; } .more-coverage div a { width: 100%; } .more-coverage div a:nth-child(n+2) { display: none; } #coverage-footer { padding: 0; width: 100%; } #coverage-footer .more-coverage h3 { width: 100%; margin: 0; padding: 0; text-align: left; } #coverage-footer .more-coverage h3:after { margin: 15px 0 -40px; } #coverage-footer .more-coverage div { margin: 30px -15px; } #coverage-footer .more-coverage div a { width: calc(50% - 30px); float: none; } #coverage-footer .more-coverage div a:not(:first-of-type) { display: block; } } @media (max-width: 620px) { #coverage-footer .more-coverage div { margin: 15px auto; width: 100%; } #coverage-footer .more-coverage div a { width: 95%; margin-left: auto; margin-right: auto; } } .filtered .european_inter { display: none; } .european_inter { position: relative; width: 100%; -webkit-border-radius: 0.625rem; border-radius: 0.625rem; background-clip: padding-box; /* stops bg color from leaking outside the border: */ margin-bottom: 30px; border: 1px solid #000; padding: 3px; } .european_inter:before { content: ''; display: block; position: absolute; background: transparent; border: 1px solid #000; top: 2px; bottom: 2px; right: 2px; left: 2px; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; background-clip: padding-box; /* stops bg color from leaking outside the border: */ } .european_inter .image { position: absolute; top: 0; bottom: 3px; left: 0; width: 20%; padding: 20px 0 0 20px; } .european_inter .image img { position: absolute; bottom: 0; max-width: calc(100% - 20px); max-height: 100%; left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .european_inter .content { width: 80%; float: right; padding-top: 35px; padding-right: 30px; padding-left: 30px; } .european_inter .content .inter-title { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; font-size: 13px; font-weight: bold; text-transform: uppercase; line-height: .85; padding: 15px 0; margin-left: -2px; } .european_inter .content .player-name { font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 55px; text-transform: uppercase; line-height: .85; padding: 15px 0; margin-left: -2px; } .european_inter .content .player-content { padding-bottom: 30px; } .european_inter:after { content: ''; display: table; clear: both; } @media (max-width: 767px) { .european_inter .image { display: none; } .european_inter .content { width: 100%; } .european_inter .content .player-name { font-size: 48; } .european_inter .content .inter-title { line-height: .95; } } #filter-bar-wrapper { top: 0; position: absolute; width: calc(100% - 60px); max-width: 1270px; max-height: 65px; height: 65px; margin: 0 auto; padding: 0; z-index: 5; } .filter-fixed #filter-bar-wrapper { width: 100%; } .hide-navigation-bubble #filter-bar-wrapper .info-bubble { -moz-transform: scale(0) !important; -o-transform: scale(0) !important; -ms-transform: scale(0) !important; -webkit-transform: scale(0) !important; transform: scale(0) !important; opacity: 0 !important; } #filter-bar-wrapper .info-bubble { transform-origin: center bottom; left: 45%; top: -160%; } @media (min-width: 768px) { #filter-bar-wrapper .info-bubble.show-nav-instruction { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } #filter-bar-wrapper .info-bubble span, #filter-bar-wrapper .info-bubble span img { opacity: 1; } #filter-bar-wrapper .info-bubble span img { margin-top: 7px; } #filter-bar-wrapper #filter-bar { border: 2px solid #000; border-radius: 9px; height: 100%; width: 100%; background: #fff; display: flex; overflow: hidden; } #filter-bar-wrapper #filter-bar .filter-swiper-container { width: 102%; margin-right: -2%; overflow: hidden; } #filter-bar-wrapper #filter-bar .filter-logo { position: relative; width: 4%; height: 100%; text-align: center; float: left; max-width: 0px; max-width: 6%; background: black; overflow: hidden; } #filter-bar-wrapper #filter-bar .filter-logo a { display: block; width: 100%; height: 100%; } #filter-bar-wrapper #filter-bar .filter-logo img { position: absolute; left: 50%; top: 50%; max-width: 70%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #filter-bar-wrapper #filter-bar a.person.active_filter { color: #0B7853; } #filter-bar-wrapper #filter-bar div.filter, #filter-bar-wrapper #filter-bar a.filter { position: relative; z-index: 5; display: block; float: left; width: 33.5%; height: 100%; padding: 10px 20px; overflow: hidden; border-left: 1.5px solid #000; flex: 0 0 auto; color: #000; line-height: 1; text-align: left; vertical-align: middle; cursor: pointer; -webkit-transition: margin-left 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -moz-transition: margin-left 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -ms-transition: margin-left 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -o-transition: margin-left 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; transition: margin-left 0.5s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; } #filter-bar-wrapper #filter-bar div.filter.double-move, #filter-bar-wrapper #filter-bar a.filter.double-move { -webkit-transition: margin-left 1s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -moz-transition: margin-left 1s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -ms-transition: margin-left 1s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; -o-transition: margin-left 1s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; transition: margin-left 1s ease-in-out, background-color 0.5s ease-in-out, color 0.5s ease-in-out; } #filter-bar-wrapper #filter-bar div.filter .nav-arrow, #filter-bar-wrapper #filter-bar a.filter .nav-arrow { position: absolute; right: 15px; top: 50%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; } #filter-bar-wrapper #filter-bar div.filter.active_filter, #filter-bar-wrapper #filter-bar a.filter.active_filter { color: #fff; border-left: 0px; background: #0B7853; } #filter-bar-wrapper #filter-bar div.filter.active_filter .filter-wrapper a, #filter-bar-wrapper #filter-bar a.filter.active_filter .filter-wrapper a { display: inline-block; } #filter-bar-wrapper #filter-bar div.filter.active_filter .filter-wrapper span.updated, #filter-bar-wrapper #filter-bar a.filter.active_filter .filter-wrapper span.updated { color: #fff; -webkit-transition: color 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out; -ms-transition: color 0.5s ease-in-out; -o-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; } #filter-bar-wrapper #filter-bar div.filter.active_filter:before, #filter-bar-wrapper #filter-bar a.filter.active_filter:before { content: ''; display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; z-index: 1; } #filter-bar-wrapper #filter-bar div.filter.inactive:not(.dropdown), #filter-bar-wrapper #filter-bar a.filter.inactive:not(.dropdown) { color: #999; } #filter-bar-wrapper #filter-bar div.filter.inactive:not(.dropdown) span.updated, #filter-bar-wrapper #filter-bar a.filter.inactive:not(.dropdown) span.updated { color: #999; } #filter-bar-wrapper #filter-bar div.filter.all-coverage, #filter-bar-wrapper #filter-bar a.filter.all-coverage { background-image: url(../img/right-arrow.png); background-image: url(../img/right-arrow.svg); background-position: right 20px center; background-size: auto 20px; background-repeat: no-repeat; } @media (hover: hover) { #filter-bar-wrapper #filter-bar div.filter.all-coverage:hover, #filter-bar-wrapper #filter-bar a.filter.all-coverage:hover { color: #0B7853; background-image: url(../img/right-arrow-hover.png); background-image: url(../img/right-arrow-hover.svg); } #filter-bar-wrapper #filter-bar div.filter.all-coverage:hover .updated, #filter-bar-wrapper #filter-bar a.filter.all-coverage:hover .updated { color: #0B7853; } } #filter-bar-wrapper #filter-bar div.filter.disabled, #filter-bar-wrapper #filter-bar a.filter.disabled { cursor: default; } #filter-bar-wrapper #filter-bar div.filter.disabled a, #filter-bar-wrapper #filter-bar a.filter.disabled a { cursor: default; } #filter-bar-wrapper #filter-bar div.filter.disabled:before, #filter-bar-wrapper #filter-bar a.filter.disabled:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-image: url(../img/disabled.png); background-size: cover; background-position: center center; } #filter-bar-wrapper #filter-bar div.filter.dropdown, #filter-bar-wrapper #filter-bar a.filter.dropdown { padding: 0; overflow: visible; height: 61px; } #filter-bar-wrapper #filter-bar div.filter.dropdown.active_filter, #filter-bar-wrapper #filter-bar a.filter.dropdown.active_filter { color: #000; } #filter-bar-wrapper #filter-bar div.filter.dropdown.active_filter .person.active_filter, #filter-bar-wrapper #filter-bar a.filter.dropdown.active_filter .person.active_filter { color: #0B7853; } #filter-bar-wrapper #filter-bar div.filter.dropdown.active_filter .person.active_filter .updated, #filter-bar-wrapper #filter-bar a.filter.dropdown.active_filter .person.active_filter .updated { color: #0B7853; } #filter-bar-wrapper #filter-bar div.filter.dropdown.inactive .ranking_list, #filter-bar-wrapper #filter-bar a.filter.dropdown.inactive .ranking_list { background-image: url(../img/down-arrow-inactive.png); background-image: url(../img/down-arrow-inactive.svg); } #filter-bar-wrapper #filter-bar div.filter.dropdown.inactive .person, #filter-bar-wrapper #filter-bar a.filter.dropdown.inactive .person { color: #999; } #filter-bar-wrapper #filter-bar div.filter.dropdown.active .ranking_list .person, #filter-bar-wrapper #filter-bar a.filter.dropdown.active .ranking_list .person { cursor: pointer; } #filter-bar-wrapper #filter-bar div.filter.dropdown .filter-wrapper, #filter-bar-wrapper #filter-bar a.filter.dropdown .filter-wrapper { position: relative; top: auto; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list { max-height: 61px; background: #fff; overflow: hidden; border: 1px solid transparent; border-top: 0px; background-image: url(../img/down-arrow.png); background-image: url(../img/down-arrow.svg); background-position: right 20px top 27px; background-size: 20px auto; background-repeat: no-repeat; background-opacity: .35; -webkit-transition: max-height 0.15s linear; -moz-transition: max-height 0.15s linear; -ms-transition: max-height 0.15s linear; -o-transition: max-height 0.15s linear; transition: max-height 0.15s linear; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person { position: relative; height: 61px; padding: 0 20px; border-top: 1px solid #999; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person:first-child, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person:first-child { border-top: none; } @media (hover: hover) { #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person:hover, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person:hover { color: #0B7853; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person:hover .updated, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person:hover .updated { color: #0B7853; } } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .person-wrapper, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .person-wrapper { display: flex; position: absolute; top: 50%; width: 100%; z-index: 0; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .image, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .image { width: 45px; height: 45px; position: absolute; right: 22px; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .person-content, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .person-content { flex: 1; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .name, #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .updated, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .name, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .updated { display: block; width: calc(100% - 40px); } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .name, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .name { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .updated, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .updated { font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; } @media (hover: none) { #filter-bar-wrapper #filter-bar div.filter.dropdown.open .person:first-of-type, #filter-bar-wrapper #filter-bar a.filter.dropdown.open .person:first-of-type { color: #0B7853; } } #filter-bar-wrapper #filter-bar div.filter.dropdown.open .ranking_list, #filter-bar-wrapper #filter-bar a.filter.dropdown.open .ranking_list { max-height: 293px; border-color: #ccc; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper { position: absolute; top: 50%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper img, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper img { max-height: 35px; width: auto; margin-right: 5px; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper span, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper span { display: block; font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; font-weight: 300; font-size: 18px; line-height: 100%; letter-spacing: 0em; text-transform: none; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper span.updated, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper span.updated { margin-top: 2px; font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 14px; line-height: 100%; letter-spacing: 0; font-size: 17px; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper a, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper a { display: none; margin-left: 5px; height: 16px; width: 20px; margin-top: 2px; background-image: url("../img/twitter-silo.png"); background-image: url("../img/twitter-silo.svg"); background-size: 100%; background-position: center center; background-repeat: no-repeat; vertical-align: middle; margin-top: -1px; } #filter-bar-wrapper #filter-bar a.filter { border-right: 0; } .filter-fixed #filter-bar-wrapper { position: fixed; top: 0; left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0; max-width: 100vw; max-height: 55px; } .filter-fixed #filter-bar-wrapper .filter-swiper-container { width: 100vw; margin: 0; } .filter-fixed #filter-bar-wrapper #filter-bar { border-radius: 0; border-top: 0px; border-right: 0; border-left: 0; height: 54px; } .filter-fixed #filter-bar-wrapper #filter-bar .filter-logo { max-width: 6%; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter .filter-wrapper img, .filter-fixed #filter-bar-wrapper #filter-bar a.filter .filter-wrapper img { max-height: 38px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown { height: 53px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list { max-height: 53px; background-position: right 20px top 20px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person { max-height: 53px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown.open .ranking_list, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown.open .ranking_list { max-height: 220px; border-color: #ccc; } @media (max-width: 1199px) { #filter-bar-wrapper { margin-bottom: 0px; height: 55px; } #filter-bar-wrapper .filter-logo { width: 6%; } #filter-bar-wrapper .filter-logo img { max-width: 66%; } #filter-bar-wrapper #filter-bar div.filter { font-size: 12px; } #filter-bar-wrapper #filter-bar a.filter { border-right: 0; } #filter-bar-wrapper #filter-bar div.filter, #filter-bar-wrapper #filter-bar a.filter { padding: 10px 15px; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper span.updated, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper span.updated { font-size: 12px; } #filter-bar-wrapper #filter-bar div.filter.all-coverage, #filter-bar-wrapper #filter-bar a.filter.all-coverage { background-position: right 10px center; background-size: auto 15px; } #filter-bar-wrapper #filter-bar div.filter.dropdown, #filter-bar-wrapper #filter-bar a.filter.dropdown { padding: 0; height: 52px; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list { max-height: 49px; background-size: 15px auto; background-position: right 10px top 23px; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person { height: 52px; padding: 0 10px; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .image, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .image { height: 40px; width: 40px; } #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .name, #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .updated, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .name, #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .updated { font-size: 12px; } #filter-bar-wrapper #filter-bar div.filter .filter-wrapper span, #filter-bar-wrapper #filter-bar a.filter .filter-wrapper span { font-size: 12px; } .filter-fixed #filter-bar-wrapper #filter-bar a.filter { border-right: 0; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter, .filter-fixed #filter-bar-wrapper #filter-bar a.filter { width: 31.5%; padding: 10px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown { padding: 0; height: 55px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list { max-height: 53px; background-size: 15px auto; background-position: right 15px top 24px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person { height: 53px; padding: 10px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .image, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .image { height: 50px; width: 50px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .name, .filter-fixed #filter-bar-wrapper #filter-bar div.filter.dropdown .ranking_list .person .updated, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .name, .filter-fixed #filter-bar-wrapper #filter-bar a.filter.dropdown .ranking_list .person .updated { font-size: 12px; } .filter-fixed #filter-bar-wrapper #filter-bar div.filter .filter-wrapper span, .filter-fixed #filter-bar-wrapper #filter-bar a.filter .filter-wrapper span { font-size: 12px; } } @media (max-width: 1023px) { #filter-bar div.filter .filter-wrapper img, #filter-bar div.filter .filter-wrapper a { display: none !important; } } @media (max-width: 767px) { #filter-bar-wrapper { display: none; } } .filter-links { position: relative; padding-left: 25px; } @media (min-width: 1241px) { .filter-links.filter-all-coverage { margin-top: 40px; text-decoration: underline; } } @media (max-width: 991px) and (min-width: 768px) { .filter-links.filter-all-coverage { display: none; } } .filter-links .pointer, .filter-links .emoji { display: block; position: absolute; left: 0; top: -2px; height: 20px; width: 20px; background-image: url(../img/point-right.png); background-size: 100%; background-position: center center; -webkit-transition: top 0.15s linear; -moz-transition: top 0.15s linear; -ms-transition: top 0.15s linear; -o-transition: top 0.15s linear; transition: top 0.15s linear; } .filter-links.size-toggle { position: relative; vertical-align: top; padding: 0; margin-bottom: 30px; } .filter-links.size-toggle a { position: relative; padding-left: 25px; } .filter-links.size-toggle a .emoji { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .filter-links.size-toggle a.active .emoji { opacity: 1; } .filter-links.size-toggle a.compact .emoji { background-image: url(../img/compact-emoji.png); } .filter-links.size-toggle a.default .emoji { background-image: url(../img/default-emoji.png); } .filter-links.size-toggle a.deep .emoji { background-image: url(../img/detailed-emoji.png); } .show-teams #filters .size-filter:before { content: ''; display: block; position: absolute; top: -30px; bottom: 0; left: -50px; right: -30px; background: rgba(255, 255, 255, 0.9); z-index: 10; } @media (max-width: 1240px) { .show-teams #filters { display: none; } } .show-teams #filters .info-bubble.visible, .hide-deep-info #filters .info-bubble.visible { -moz-transform: translateY(0) scale(0); -o-transform: translateY(0) scale(0); -ms-transform: translateY(0) scale(0); -webkit-transform: translateY(0) scale(0); transform: translateY(0) scale(0); } #filters { width: 16.25%; max-width: 180px; height: calc(100vh - 110px); min-height: 560px; float: left; margin: 45px 0 0; clear: right; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); position: absolute; z-index: 7; } #filters .info-bubble { left: 70px; top: -70px; transform-origin: center; background: #0B7853; -moz-transform: translateY(0) scale(0); -o-transform: translateY(0) scale(0); -ms-transform: translateY(0) scale(0); -webkit-transform: translateY(0) scale(0); transform: translateY(0) scale(0); } @media (max-width: 1399px) { #filters .info-bubble { left: 75px; top: -60px; } } @media (max-width: 1240px) { #filters .info-bubble { display: none; } } #filters .info-bubble span img { width: 10px; display: block; margin: 4px auto -10px; } #filters .info-bubble.visible { -moz-transform: translateY(0) scale(1); -o-transform: translateY(0) scale(1); -ms-transform: translateY(0) scale(1); -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); } #filters .info-bubble.hide-bubble { -moz-transform: translateY(0) scale(0); -o-transform: translateY(0) scale(0); -ms-transform: translateY(0) scale(0); -webkit-transform: translateY(0) scale(0); transform: translateY(0) scale(0); } #filters .title { width: 100%; position: relative; font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; margin-bottom: 5px; font-size: 12.5px; line-height: 1.15; opacity: 1; -webkit-transition: opacity 0.25s linear; -moz-transition: opacity 0.25s linear; -ms-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } #filters a { position: relative; display: block; margin: 0 0 5px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; color: #000; opacity: 1; font-size: 16px; -webkit-transition: opacity 0.25s linear; -moz-transition: opacity 0.25s linear; -ms-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } #filters a .tablet-below { display: none; } @media (max-width: 1240px) and (min-width: 768px) { #filters a .tablet-below { display: block; } #filters a .above-tablet { display: none; } } #filters a:not(.active) { color: #999; } #filters a:not(.active):hover { color: black; } #filters a:last-of-type { margin-right: 0; } #filters .switcher { margin-bottom: 15px; } #filters ul { list-style: none; display: inline-block; } #filters ul.size-indicator { display: inline-block; width: 15px; font-size: 16px; } #filters ul.size-indicator li { width: 100%; height: 2px; margin-bottom: 3px; background: #000; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: transform 0.125s linear; -moz-transition: transform 0.125s linear; -ms-transition: transform 0.125s linear; -o-transition: transform 0.125s linear; transition: transform 0.125s linear; } #filters ul.size-indicator.small li:nth-child(1) { -moz-transform: translateY(1px); -o-transform: translateY(1px); -ms-transform: translateY(1px); -webkit-transform: translateY(1px); transform: translateY(1px); } #filters ul.size-indicator.small li:nth-child(3) { -moz-transform: translateY(-1px); -o-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #filters ul.size-indicator.large li:nth-child(1) { -moz-transform: translateY(-1px); -o-transform: translateY(-1px); -ms-transform: translateY(-1px); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #filters ul.size-indicator.large li:nth-child(3) { -moz-transform: translateY(1px); -o-transform: translateY(1px); -ms-transform: translateY(1px); -webkit-transform: translateY(1px); transform: translateY(1px); } #filters .whats-new { background: #F5F5F5; padding: 10px; margin-bottom: 30px; width: 160px; } #filters .whats-new .title { text-decoration: none; margin: 0; } #filters .whats-new .new-item { font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; font-weight: normal; line-height: 1.2; letter-spacing: 0; margin-top: 0; margin-bottom: 0; font-size: 12.5px; color: #999999; } #filters .whats-new .new-item a { text-transform: none; display: inline; color: #999999; font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; text-decoration: underline; font-weight: 500; letter-spacing: 0; font-size: 12.5px; } #filters .whats-new .new-item .date { color: #FF0000; font-weight: 400; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; } @media (min-width: 1401px) { .filter-links.size-toggle a { padding-left: 0px; } .filter-links { padding-left: 0; } .filter-links .emoji, .filter-links .pointer { left: -25px; } } @media (min-width: 1241px) { .filter-fixed #filters { position: fixed; top: 105px; margin-top: 0; } .filter-fixed #filters a { position: relative; display: block; } } @media (max-width: 1240px) { #filters { position: relative; background: #fff; width: 100%; max-width: 100%; height: auto; min-height: 0; padding: 15px 0 15px; margin: 0 auto; float: none; } #filters .whats-new { display: none; } #filters .switcher { display: inline-block; margin-bottom: 0px; float: left; } #filters .size-filter { display: flex; justify-content: space-between; } #filters .title { display: none; } #filters .filter-links { float: right; margin-bottom: 0; } #filters .filter-links .pointer, #filters .filter-links .emoji { display: none; } #filters #amplitude { display: none; } #filters .size-toggle { float: left; } #filters .size-toggle a { padding: 0; margin: 0 15px 0 0; } #filters .size-toggle li { left: -3px; } #filters .size-toggle li:nth-child(3) { right: -3px; } #filters:after { content: ''; clear: both; display: table; } #filters a { display: inline-block; margin-bottom: 0; padding: 0 5px; vertical-align: top; } #filters a:last-of-type { margin-right: -5px; } .filter-fixed #filters { position: fixed; top: 52px; z-index: 10000000; width: 100%; margin: 0; left: 0; padding: 10px 20px 4px; background: rgba(0, 0, 0, 0.95); } .filter-fixed #filters a:not(.active) { color: #fff; } .filter-fixed #filters a.active { color: #0B7853; font-weight: 500; } .filter-fixed #filters ul.size-indicator li { background: #fff; } .filter-fixed #filter-bar-wrapper { max-height: 40px; } } @media (max-width: 767px) { #filters { display: none; } } /** * @license * MyFonts Webfont Build ID 3700918, 2019-01-18T17:19:46-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: Tabia-Black by The Northern Block Ltd * URL: https://www.myfonts.com/fonts/northernblock/tabia/black/ * Copyright: Copyright (c) 2013 by Mariya Pigoulevskaya. All rights reserved. * Licensed pageviews: 100,000 * * Webfont: TTCommons-Regular by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/regular/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-LightItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/light-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Light by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/light/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Medium by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/medium/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-MediumItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/medium-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Italic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-ThinItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/thin-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Thin by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/thin/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-BlackItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/black-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Black by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/black/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-BoldItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/bold-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-Bold by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/bold/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-DemiBoldItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/demi-bold-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-DemiBold by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/demi-bold/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-ExtraBoldItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/extra-bold-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-ExtraBold by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/extra-bold/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-ExtraLightItalic by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/extra-light-italic/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * Webfont: TTCommons-ExtraLight by TypeType * URL: https://www.myfonts.com/fonts/type-type/tt-commons/extra-light/ * Copyright: Copyright (c) 2018 by TypeType. Designers Ivan Gladkikh, Pavel Emelyanov. Technical designers Marina Khodak, Vika Usmanova, Nadyr Rakhimov. All rights reserved. * Licensed pageviews: 200,000 * * * License: https://www.myfonts.com/viewlicense?type=web&buildid=3700918 * * © 2019 MyFonts Inc */ /* @import must be at top of file, otherwise CSS will not work */ @font-face { font-family: 'Tabia-Black'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_0_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_0_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_0_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_0_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_0_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Regular'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_1_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_1_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_1_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_1_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_1_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-LightItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_2_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_2_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_2_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_2_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_2_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Light'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_3_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_3_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_3_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_3_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_3_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Medium'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_4_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_4_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_4_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_4_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_4_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-MediumItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_5_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_5_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_5_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_5_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_5_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Italic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_6_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_6_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_6_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_6_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_6_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-ThinItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_7_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_7_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_7_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_7_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_7_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Thin'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_8_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_8_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_8_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_8_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_8_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-BlackItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_9_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_9_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_9_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_9_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_9_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Black'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_A_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_A_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_A_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_A_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_A_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-BoldItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_B_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_B_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_B_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_B_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_B_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-Bold'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_C_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_C_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_C_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_C_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_C_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-DemiBoldItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_D_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_D_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_D_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_D_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_D_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-DemiBold'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_E_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_E_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_E_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_E_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_E_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-ExtraBoldItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_F_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_F_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_F_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_F_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_F_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-ExtraBold'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_10_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_10_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_10_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_10_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_10_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-ExtraLightItalic'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_11_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_11_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_11_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_11_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_11_0.ttf") format("truetype"); } @font-face { font-family: 'TTCommons-ExtraLight'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_12_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_12_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_12_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_12_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B6_12_0.ttf") format("truetype"); } @font-face { font-family: 'TTLakes-DemiBold'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_0_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_0_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_0_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_0_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_0_0.ttf") format("truetype"); } @font-face { font-family: 'TTLakes-Light'; src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_1_0.eot"); src: url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_1_0.eot?#iefix") format("embedded-opentype"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_1_0.woff2") format("woff2"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_1_0.woff") format("woff"), url("https://storage.googleapis.com/nfldraft-theringer-com-cms/legacy/webfonts/webfonts/3878B7_1_0.ttf") format("truetype"); } footer { position: relative; width: 100%; padding: 250px 0 100px; z-index: 1; display: none; } footer .footer-wrapper { max-width: 1390px; width: 95%; margin: 0 auto; text-align: center; display: none; } header { position: relative; height: auto; overflow: hidden; height: 100vh; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; background-color: black; color: #fff; } @media (min-width: 768px) { header { min-height: 45vw; } } header .heading-opener { height: 100%; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 55vw; } header .heading-opener img { position: absolute; top: 0; right: 0; left: 0; height: 100%; opacity: 0; } header .heading-opener img.show-img { opacity: 1; } header .heading-opener img.frame:not(:first-of-type) { position: absolute; top: 0; left: 5555px; } header .heading-opener.loaded img.frame { right: 0; left: 0; } header .header-sponsor-statefarm { position: absolute; bottom: 30px; left: 3.5vw; } header .header-sponsor-statefarm span, header .header-sponsor-statefarm img { display: inline-block; vertical-align: bottom; font-weight: 100; color: #fff; } header .header-sponsor-statefarm img { height: 25px; margin-left: 5px; } header .heading-wrapper { position: relative; display: block; height: calc(100vh - 40px); text-align: center; z-index: 1; top: auto; max-width: 100%; margin: 0 auto; } @media (min-width: 768px) { header .heading-wrapper { min-height: 45vw; } } header .heading-wrapper .heading-text { height: 100%; opacity: 0; position: absolute; left: 0; top: 50%; width: 100%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { header .heading-wrapper .heading-text { min-height: 45vw; } } header .heading-wrapper .heading-text h1 { font-size: 13vw; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; } header .heading-wrapper .header-secondary-text { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-start; } @media (max-width: 767px) { header .heading-wrapper .header-secondary-text { padding-left: 20px; } } header.fonts-loaded .heading-wrapper .heading-text { opacity: 1; } header .heading-image { margin-top: 250px; background-position: center top; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 2; } header .heading-image img { width: 100%; } header h1 { padding: 0 3vw; position: relative; font-size: 14vw; line-height: 1; color: #fffefe; text-transform: none; display: block; margin: 0; font-family: 'TTLakes-Light'; font-weight: normal; padding-left: 19vw; text-align: left; } @media (max-width: 767px) { header h1 { padding-left: 20px; } } header h1 span { display: block; text-align: center; } header h1 .small { font-size: 3vw; line-height: 1; font-weight: 100; margin-top: 0; margin-bottom: 17px; text-align: left; } header h1 .small strong { font-weight: 500; letter-spacing: 0.02em; } @media (max-width: 767px) { header h1 .small { font-size: 4vh; } } header h1 .big { font-family: 'Tabia-Black'; font-weight: normal; text-transform: none; line-height: .85; letter-spacing: -0.025em; font-size: 15vw; word-spacing: -.1em; text-align: left; } @media (max-width: 767px) { header h1 .big { font-size: 19vh; line-height: .8; } } header h1 .big em { font-style: normal; color: #CF8E3E; display: inline; } header .header-updated-text { font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 14px; line-height: 100%; letter-spacing: 0; flex: 0 0 auto; font-size: 21px; text-align: left; display: block; text-align: left; padding-left: 19vw; } @media (max-width: 991px) { header .header-updated-text { font-size: 18px; } } @media (max-width: 767px) { header .header-updated-text { font-size: 17px; text-align: left; padding-left: 0; } } header h2 { padding: 45px 3.5vw 7.5px; font-weight: 100; font-size: 22px; text-transform: none; letter-spacing: 0.05em; text-align: left; padding-left: 19vw; } @media (max-width: 991px) { header h2 { font-size: 22px; } } @media (max-width: 767px) { header h2 { font-size: 17px; text-align: left; padding-left: 0; } } header h3 { letter-spacing: 0.05em; font-size: 18px; } header nav { width: 100%; display: block; position: relative; z-index: 1; text-align: left; background-color: black; } @media (max-width: 767px) { header nav { display: flex; } } header nav:after { content: ''; clear: both; display: table; } header nav .logo { display: inline-block; max-width: 110px; margin-left: 10px; padding-top: 5px; } @media (max-width: 767px) { header nav .logo { display: block !important; } } header nav .logo img { display: block; width: 100%; } header nav ul { float: right; padding-top: 5px; padding-right: 15px; padding-bottom: 6px; } @media (max-width: 767px) { header nav ul { flex: 1; display: flex !important; justify-content: flex-end; padding-top: 9px; padding-bottom: 7.5px; } } header nav ul li { display: inline-block; font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; letter-spacing: .15em; color: #fff; margin-left: 15px; } header nav ul li a { display: inline-block; padding: 5px 0px; color: #fff; } @media (max-width: 767px) { header nav ul li { font-size: 10px; line-height: .8; } } #intro { position: relative; width: 95%; margin: 0 auto 0; max-width: 1390px; list-style: none; font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 22px; background: #fff; z-index: 2; } #intro .credit { position: absolute; top: 3px; right: 0; color: #000; font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; display: none; } #intro .intro-wrapper { position: relative; padding: 70px 0px 10px; line-height: 1.4; max-width: 750px; margin: 0 auto; } #intro .intro-wrapper p { margin-bottom: 30px; line-height: 1.4; } #intro .intro-wrapper a { color: #000; } #intro .intro-wrapper strong { font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 22px; text-transform: none; } @media (max-width: 767px) { #intro .intro-wrapper strong { font-size: 18px; } } #intro .intro-wrapper > div { position: relative; z-index: 3; } #intro .intro-wrapper:after { content: ''; display: block; height: calc(100% - 55px); width: calc(100% + 10px); position: absolute; top: 65px; left: 0; background: #fff; z-index: 2; } #intro .intro-actions { position: relative; width: 100%; margin-top: 20px; } #intro .intro-actions:after { clear: both; content: ''; display: table; } #intro .ringer-draft-coverage { max-width: calc(100% - 110px); position: relative; float: right; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; text-decoration: underline; } #intro .intro-updated { float: right; font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; padding-top: 3px; } #intro .social { width: 110px; float: left; clear: both; margin: 0 0; } #intro .social a { display: inline-block; height: 25px; width: 25px; margin-right: 5px; background-size: 100%; background-repeat: no-repeat; } #intro .social a.facebook { background-image: url(../img/facebook.svg); } #intro .social a.twitter { background-image: url(../img/twitter.svg); } #intro:after { clear: both; display: table; content: ''; } @media (max-width: 1024px) { #intro { font-size: 22px; } #intro .intro-wrapper { padding: 60px 10px 60px; } } @media (max-width: 767px) { #intro { padding: 40px 20px 20px; width: calc(100% - 30px); margin-top: 0; margin-left: 15px; margin-right: 15px; margin-bottom: 30px; padding: 0; float: none; text-align: left; font-size: 18px; text-align: left; } #intro .credit { position: relative; float: right; top: auto; right: auto; font-size: 11px; } #intro .intro-wrapper { padding: 50px 0 0; } #intro .intro-actions { margin-top: 15px; } #intro .ringer-draft-coverage { display: block; margin-bottom: 15px; float: none; position: relative; max-width: 100%; font-size: 11px; } #intro .byline { position: relative; left: auto; margin-bottom: 30px; float: none; } #intro .social { margin-top: 0px; } } #item-list { opacity: 0; position: relative; float: right; width: 82.75%; list-style: none; margin-top: 40px; } @media (max-width: 1240px) and (min-width: 768px) { #item-list { margin-top: 20px; } .filter-fixed #item-list { margin-top: 72px; } } #item-list.sorting { opacity: 0; } #item-list .list-intro { font-size: 22px; font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 22px; } #item-list .list-intro .list-intro-mock { display: none; } #item-list .list-intro a { display: inline-block; margin: 20px 0 40px; color: #0B7853; text-decoration: underline; } @media (max-width: 767px) { #item-list .list-intro { font-size: 18px; } #item-list .list-intro a { margin-bottom: 30px; } } .rebuilding #item-list .list-intro { opacity: 0; -webkit-transition: opacity 0.25s linear; -moz-transition: opacity 0.25s linear; -ms-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } .nfl-team-wrapper { display: none !important; } .card-item .rank-column .info-bubble, .card-item .rank-column .info-bubble:hover { left: 20px; top: 200px; position: absolute; width: 100px; height: 100px; transform-origin: center center; background: #E5E5E5; -webkit-transition: transform 0.125s ease-in-out 0s; -moz-transition: transform 0.125s ease-in-out 0s; -ms-transition: transform 0.125s ease-in-out 0s; -o-transition: transform 0.125s ease-in-out 0s; transition: transform 0.125s ease-in-out 0s; } .card-item .rank-column .info-bubble.no-transition, .card-item .rank-column .info-bubble:hover.no-transition { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } .card-item .rank-column .info-bubble .team, .card-item .rank-column .info-bubble:hover .team { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; padding-top: 0; opacity: 0; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.125s linear; -moz-transition: opacity 0.125s linear; -ms-transition: opacity 0.125s linear; -o-transition: opacity 0.125s linear; transition: opacity 0.125s linear; } .card-item .rank-column .info-bubble .team img, .card-item .rank-column .info-bubble:hover .team img { position: relative; display: block; justify-self: center; align-self: center; padding: 0; visibility: visible; } .card-item .rank-column .info-bubble .team img.team-logo, .card-item .rank-column .info-bubble:hover .team img.team-logo { width: auto; max-width: 80%; max-height: 80%; opacity: 1; -webkit-transition: max-height 0.125s ease-out 0.125s, opacity 0.125s linear 0.125s; -moz-transition: max-height 0.125s ease-out 0.125s, opacity 0.125s linear 0.125s; -ms-transition: max-height 0.125s ease-out 0.125s, opacity 0.125s linear 0.125s; -o-transition: max-height 0.125s ease-out 0.125s, opacity 0.125s linear 0.125s; transition: max-height 0.125s ease-out 0.125s, opacity 0.125s linear 0.125s; } .card-item .rank-column .info-bubble .team .team-name, .card-item .rank-column .info-bubble:hover .team .team-name { width: 100%; opacity: 0; positioN: absolute; top: 50%; left: 50%; color: #fff; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.125s linear 0s; -moz-transition: opacity 0.125s linear 0s; -ms-transition: opacity 0.125s linear 0s; -o-transition: opacity 0.125s linear 0s; transition: opacity 0.125s linear 0s; } @media (max-width: 991px) { .card-item .rank-column .info-bubble, .card-item .rank-column .info-bubble:hover { width: 75px; height: 75px; left: 50%; margin-left: -37px; right: auto; } .card-item .rank-column .info-bubble .team, .card-item .rank-column .info-bubble:hover .team { width: 65px; height: 65px; } .card-item .rank-column .info-bubble .team img.team-logo, .card-item .rank-column .info-bubble:hover .team img.team-logo { max-height: 100%; opacity: 1; } } .mock-draft .card-item .rank-column .info-bubble { -webkit-transition: transform 0.175s ease-in-out 1.5s, background-color 0.25s linear 0s; -moz-transition: transform 0.175s ease-in-out 1.5s, background-color 0.25s linear 0s; -ms-transition: transform 0.175s ease-in-out 1.5s, background-color 0.25s linear 0s; -o-transition: transform 0.175s ease-in-out 1.5s, background-color 0.25s linear 0s; transition: transform 0.175s ease-in-out 1.5s, background-color 0.25s linear 0s; -moz-transform: scale(1) translateY(-50%); -o-transform: scale(1) translateY(-50%); -ms-transform: scale(1) translateY(-50%); -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); transform-origin: center top; } @media (max-width: 767px) { .mock-draft .card-item .rank-column .info-bubble { left: auto; right: 10px; bottom: 10px; top: auto !important; -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transform-origin: center bottom; } } .mock-draft .card-item .rank-column .info-bubble .team { opacity: 1; -webkit-transition: opacity 0.25s linear 1.5s; -moz-transition: opacity 0.25s linear 1.5s; -ms-transition: opacity 0.25s linear 1.5s; -o-transition: opacity 0.25s linear 1.5s; transition: opacity 0.25s linear 1.5s; } @media (max-width: 767px) { .mock-draft .card-item .rank-column .info-bubble .team { padding-top: 0; } } @media (max-width: 767px) { .mock-draft .card-item .rank-column .info-bubble .team img { max-width: 80%; width: 100%; max-height: 80% !important; margin: 0 !important; display: block !important; left: 0; } } .mock-draft .card-item .rank-column .info-bubble:hover { background-color: #0B7853; -webkit-transition: background-color 0.25s linear 0.125s; -moz-transition: background-color 0.25s linear 0.125s; -ms-transition: background-color 0.25s linear 0.125s; -o-transition: background-color 0.25s linear 0.125s; transition: background-color 0.25s linear 0.125s; } .mock-draft .card-item .rank-column .info-bubble:hover .team img.team-logo { opacity: 0; -webkit-transition: max-height 0.125s ease-in, opacity 0.125s linear 0s; -moz-transition: max-height 0.125s ease-in, opacity 0.125s linear 0s; -ms-transition: max-height 0.125s ease-in, opacity 0.125s linear 0s; -o-transition: max-height 0.125s ease-in, opacity 0.125s linear 0s; transition: max-height 0.125s ease-in, opacity 0.125s linear 0s; } .mock-draft .card-item .rank-column .info-bubble:hover .team .team-name { opacity: 1; -webkit-transition: opacity 0.125s linear 0.125s; -moz-transition: opacity 0.125s linear 0.125s; -ms-transition: opacity 0.125s linear 0.125s; -o-transition: opacity 0.125s linear 0.125s; transition: opacity 0.125s linear 0.125s; } .mock-draft .movement { display: none !important; } #gotolist { position: absolute; top: 0; width: 100%; } .border-theme { border-color: #CF8E3E !important; } body.jonathan #jonathan-intro { max-height: 100%; opacity: 1; } body.kevin #kevin-intro { max-height: 100%; opacity: 1; } body.danny #danny-intro { max-height: 100%; opacity: 1; } body.personSorting .nfl-team-wrapper, body.personSorting .new, body.personSorting .movement { display: none !important; } body #item-list.filtered .card-item { max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; } body #item-list.filtered.qb .card-item.qb, body #item-list.filtered.rb .card-item.rb, body #item-list.filtered.pc .card-item.wr, body #item-list.filtered.pc .card-item.te, body #item-list.filtered.ol .card-item.g, body #item-list.filtered.ol .card-item.c, body #item-list.filtered.ol .card-item.t, body #item-list.filtered.all-offense .card-item.qb, body #item-list.filtered.all-offense .card-item.rb, body #item-list.filtered.all-offense .card-item.wr, body #item-list.filtered.all-offense .card-item.te, body #item-list.filtered.all-offense .card-item.g, body #item-list.filtered.all-offense .card-item.c, body #item-list.filtered.all-offense .card-item.t, body #item-list.filtered.de .card-item.de, body #item-list.filtered.idl .card-item.idl, body #item-list.filtered.lb .card-item.lb, body #item-list.filtered.db .card-item.db, body #item-list.filtered.db .card-item.s, body #item-list.filtered.all-defense .card-item.de, body #item-list.filtered.all-defense .card-item.idl, body #item-list.filtered.all-defense .card-item.lb, body #item-list.filtered.all-defense .card-item.db, body #item-list.filtered.all-defense .card-item.s { max-height: 3000px; opacity: 1; margin-bottom: 30px; overflow: visible; } @media (min-width: 768px) { body.small #item-list.filtered.qb .card-item.qb:not(.expanded-card), body.small #item-list.filtered.rb .card-item.rb:not(.expanded-card), body.small #item-list.filtered.pc .card-item.wr:not(.expanded-card), body.small #item-list.filtered.pc .card-item.te:not(.expanded-card), body.small #item-list.filtered.ol .card-item.g:not(.expanded-card), body.small #item-list.filtered.ol .card-item.c:not(.expanded-card), body.small #item-list.filtered.ol .card-item.t:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.qb:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.rb:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.wr:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.te:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.g:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.c:not(.expanded-card), body.small #item-list.filtered.all-offense .card-item.t:not(.expanded-card), body.small #item-list.filtered.de .card-item.de:not(.expanded-card), body.small #item-list.filtered.idl .card-item.idl:not(.expanded-card), body.small #item-list.filtered.lb .card-item.lb:not(.expanded-card), body.small #item-list.filtered.db .card-item.db:not(.expanded-card), body.small #item-list.filtered.db .card-item.s:not(.expanded-card), body.small #item-list.filtered.all-defense .card-item.de:not(.expanded-card), body.small #item-list.filtered.all-defense .card-item.idl:not(.expanded-card), body.small #item-list.filtered.all-defense .card-item.lb:not(.expanded-card), body.small #item-list.filtered.all-defense .card-item.db:not(.expanded-card), body.small #item-list.filtered.all-defense .card-item.s:not(.expanded-card) { max-height: 125px; } } body.small .card-item[data-player-id="chauncey_gardner-johnson"] :not(.expanded-card) .player-main h3 { font-size: 43px; } .no-players { display: none; } .no-players { display: none; margin: -12px 0 100vh; font-size: 22px; text-align: center; } .no-players a { color: #0B7853; text-decoration: underline; display: block; } @media (max-width: 767px) { .no-players { font-size: 18px; padding: 0px 30px; } } .rebuilding .card-item .info-column { opacity: 0 !important; } .rebuilding .card-item .image .image-backdrop, .rebuilding .card-item .image img { opacity: 0 !important; } .rebuilding .card-item .combine-results.non-mobile { transition: opacity 0.25s linear; opacity: 0 !important; } .card-item { display: block; position: relative; padding: 0; margin: 0; max-height: 145px; border-radius: .625rem; border: .00875rem solid #ccc; margin-bottom: 30px; background: #E5E5E5; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; } .card-item .offset-id { position: absolute; top: -85px; } .card-item .combine-results { width: 100%; visibility: hidden; opacity: 0; transition: opacity 0.25s linear 0s, visibility 0s linear 0.25s; } .card-item .combine-results h4.combine-h4 { margin-top: 0 !important; } .card-item .combine-results h4.combine-h4 strong { color: #000; } .card-item .combine-results ul { list-style: none; width: 100%; margin-top: 5px; } .card-item .combine-results ul li { position: relative; display: flex; width: 100%; justify-content: space-between; align-items: flex-end; overflow: hidden; font-size: 12px; } .card-item .combine-results ul li:after { content: '........................................................................................................................................................'; display: block; clear: both; position: absolute; z-index: 1; bottom: 1px; font-size: 7px; font-weight: 500; letter-spacing: 0.15em; color: #000; } .card-item .combine-results ul li span { position: relative; z-index: 2; display: inline-block; background: #E5E5E5; padding: 0 5px 0 0; } .card-item .combine-results ul li span:first-child { font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; } .card-item .combine-results ul li span:last-child { padding: 0 0 0 5px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; line-height: 120%; } .large .card-item .combine-results, .card-item.expanded-card .combine-results { opacity: 1; visibility: visible; transition: opacity 0.25s linear 0.125s, visibility 0s linear 0s; } @media (max-width: 767px) { .large .card-item .combine-results, .card-item.expanded-card .combine-results { margin-bottom: 40px; } } .card-item .new { position: absolute; left: -30px; top: 20px; background-image: url(../img/new-star.png); background-image: url(../img/new-star.svg); background-size: 100%; height: 55px; width: 61px; z-index: 1; color: #fff; font-size: 12px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; letter-spacing: 0.05em; } .card-item .new .new-wrap { position: absolute; top: 52%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .card-item .new span { display: block; text-align: center; line-height: 100%; } .card-item.has-hover:hover .rank-column img { opacity: 0; } .card-item.has-hover:hover .rank-column img.hover-image { opacity: 1; } .card-item:hover .rank-column img.hover-image { opacity: 1; } .card-item .card-info { -moz-transform: rotate(-90deg) translateX(-100%); -o-transform: rotate(-90deg) translateX(-100%); -ms-transform: rotate(-90deg) translateX(-100%); -webkit-transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%); moz-transform-origin: 0 0; -o-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; position: absolute; top: 10px; left: -25px; height: 100%; width: 300px; text-align: right; } .card-item .card-info .movement, .card-item .card-info .new-wrap { display: inline-block; position: relative; } .card-item .card-info.show-info-1 { top: 90px; } .card-item .movement { color: #fff; padding: 5px 10px 6px; line-height: 1; font-weight: normal; font-size: 14px; display: none; } .card-item .movement > div { display: none; background-size: 100%; top: -5px; width: 20px; height: 20px; position: absolute; left: -5px; background-repeat: no-repeat; -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } .card-item .movement.change-up .move-up { display: block; background-image: url(../img/trending-up.svg); background-image: url(../img/trending-up.svg); } .card-item .movement.change-down .move-down { display: block; background-image: url(../img/trending-down.svg); background-image: url(../img/trending-down.svg); } .card-item .nfl-team-wrapper { background: #000; color: #fff; padding: 5px 10px 6px; line-height: 1; font-weight: normal; font-size: 14px; word-spacing: .1em; z-index: 3; } .card-item.sorted { visibility: hidden; opacity: 0; } .card-item.sorted.shown { visibility: visible; opacity: 1; } .card-item .wrapper { height: 100%; } .card-item .wrapper:after { content: ''; clear: both; display: table; } .card-item h3 { font-family: 'Tabia-Black'; font-weight: normal; font-size: 52px; max-height: 50px; line-height: .85; text-transform: none; letter-spacing: -0.015em; margin-top: -3px; margin-left: 0; display: inline-block; } .card-item h3 span { display: block; } @media (max-width: 767px) { .card-item h3 span { display: inline; } } .card-item h4 { display: block; font-size: 17px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-weight: 300; letter-spacing: .01em; height: 19px; } .card-item h4 strong { font-family: 'TTLakes-DemiBold'; font-weight: normal; font-size: 18px; color: #0B7853; } .card-item h6 { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; margin-bottom: 7.5px; } .card-item.qb .rank-column .image-backdrop, .card-item.rb .rank-column .image-backdrop, .card-item.wr .rank-column .image-backdrop, .card-item.te .rank-column .image-backdrop, .card-item.c .rank-column .image-backdrop, .card-item.t .rank-column .image-backdrop, .card-item.g .rank-column .image-backdrop { background-image: url(../img/o-new.svg); } .card-item .toggle-card svg { -webkit-transition: fill 0.25s linear; -moz-transition: fill 0.25s linear; -ms-transition: fill 0.25s linear; -o-transition: fill 0.25s linear; transition: fill 0.25s linear; } .card-item .toggle-card .more { -webkit-transition: color 0.25s linear; -moz-transition: color 0.25s linear; -ms-transition: color 0.25s linear; -o-transition: color 0.25s linear; transition: color 0.25s linear; } .card-item.qb .rank-column .info-bubble:hover, .card-item.rb .rank-column .info-bubble:hover, .card-item.wr .rank-column .info-bubble:hover, .card-item.te .rank-column .info-bubble:hover, .card-item.c .rank-column .info-bubble:hover, .card-item.t .rank-column .info-bubble:hover, .card-item.g .rank-column .info-bubble:hover { background-color: #CF8E3E; } .card-item:hover .toggle-card svg { fill: #0B7853; } .card-item:hover .toggle-card .more, .card-item:hover .toggle-card .less { color: #0B7853; } .card-item:hover.qb .toggle-card svg, .card-item:hover.rb .toggle-card svg, .card-item:hover.wr .toggle-card svg, .card-item:hover.te .toggle-card svg, .card-item:hover.c .toggle-card svg, .card-item:hover.t .toggle-card svg, .card-item:hover.g .toggle-card svg { fill: #CF8E3E; } .card-item:hover.qb .toggle-card .more, .card-item:hover.qb .toggle-card .less, .card-item:hover.rb .toggle-card .more, .card-item:hover.rb .toggle-card .less, .card-item:hover.wr .toggle-card .more, .card-item:hover.wr .toggle-card .less, .card-item:hover.te .toggle-card .more, .card-item:hover.te .toggle-card .less, .card-item:hover.c .toggle-card .more, .card-item:hover.c .toggle-card .less, .card-item:hover.t .toggle-card .more, .card-item:hover.t .toggle-card .less, .card-item:hover.g .toggle-card .more, .card-item:hover.g .toggle-card .less { color: #CF8E3E; } .card-item.qb .toggle-card .info-bubble, .card-item.rb .toggle-card .info-bubble, .card-item.wr .toggle-card .info-bubble, .card-item.te .toggle-card .info-bubble, .card-item.c .toggle-card .info-bubble, .card-item.t .toggle-card .info-bubble, .card-item.g .toggle-card .info-bubble { background: #CF8E3E; } .card-item.qb .info-column .highlighted-stat span, .card-item.rb .info-column .highlighted-stat span, .card-item.wr .info-column .highlighted-stat span, .card-item.te .info-column .highlighted-stat span, .card-item.c .info-column .highlighted-stat span, .card-item.t .info-column .highlighted-stat span, .card-item.g .info-column .highlighted-stat span { color: #CF8E3E !important; } .card-item.qb .info-column .highlighted-stat .tooltip, .card-item.rb .info-column .highlighted-stat .tooltip, .card-item.wr .info-column .highlighted-stat .tooltip, .card-item.te .info-column .highlighted-stat .tooltip, .card-item.c .info-column .highlighted-stat .tooltip, .card-item.t .info-column .highlighted-stat .tooltip, .card-item.g .info-column .highlighted-stat .tooltip { background-color: #CF8E3E !important; color: #fff !important; } .card-item.qb .info-column .highlighted-stat .tooltip:after, .card-item.rb .info-column .highlighted-stat .tooltip:after, .card-item.wr .info-column .highlighted-stat .tooltip:after, .card-item.te .info-column .highlighted-stat .tooltip:after, .card-item.c .info-column .highlighted-stat .tooltip:after, .card-item.t .info-column .highlighted-stat .tooltip:after, .card-item.g .info-column .highlighted-stat .tooltip:after { background-color: #CF8E3E !important; } .card-item.qb .info-column .tooltip, .card-item.rb .info-column .tooltip, .card-item.wr .info-column .tooltip, .card-item.te .info-column .tooltip, .card-item.c .info-column .tooltip, .card-item.t .info-column .tooltip, .card-item.g .info-column .tooltip { background-color: #CF8E3E !important; color: #fff !important; } .card-item.qb .info-column .tooltip:after, .card-item.rb .info-column .tooltip:after, .card-item.wr .info-column .tooltip:after, .card-item.te .info-column .tooltip:after, .card-item.c .info-column .tooltip:after, .card-item.t .info-column .tooltip:after, .card-item.g .info-column .tooltip:after { background-color: #CF8E3E !important; } .card-item.qb .medium-show h4 strong, .card-item.rb .medium-show h4 strong, .card-item.wr .medium-show h4 strong, .card-item.te .medium-show h4 strong, .card-item.c .medium-show h4 strong, .card-item.t .medium-show h4 strong, .card-item.g .medium-show h4 strong { color: #CF8E3E !important; } .card-item .rank-column { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; max-height: 100%; width: 100%; max-width: 18.25%; background-size: 20%; overflow: hidden; background-color: #000; overflow: hidden; -webkit-border-top-left-radius: .625rem; -moz-border-radius-topleft: .625rem; border-top-left-radius: .625rem; -webkit-border-bottom-left-radius: .625rem; -moz-border-radius-bottomleft: .625rem; border-bottom-left-radius: .625rem; } .card-item .rank-column > .nfl-team-wrapper { display: none; } .card-item .rank-column .combine-results { background: #000; position: absolute; bottom: 0; color: #fff; padding: 15px; height: calc(100% - 285px); } .card-item .rank-column .combine-results h5 { margin-top: 20px; } .card-item .rank-column .combine-results h4 strong { color: #fff !important; } .card-item .rank-column .combine-results ul { margin-top: 20px; } .card-item .rank-column .combine-results ul li:after { color: #fff; } .card-item .rank-column .combine-results ul li { margin: 8px 0; } .card-item .rank-column .combine-results ul li span { background: #000; } .card-item .rank-column .rank { font-family: 'TTLakes-DemiBold'; font-weight: normal; position: absolute; top: 24px; right: -25px; width: 50px; height: 50px; line-height: .55; color: white; z-index: 3; background: #E5E5E5; border-radius: 100%; font-size: 25px; display: flex; justify-content: center; align-items: center; color: #000; } .card-item .rank-column .movement { display: none; } .card-item .rank-column .image-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../img/x-new.svg); background-size: 20px; background-position: center; } .card-item .rank-column img { visibility: hidden; opacity: 0; position: absolute; width: 100%; opacity: 0; -webkit-transition: opacity 0.125s linear; -moz-transition: opacity 0.125s linear; -ms-transition: opacity 0.125s linear; -o-transition: opacity 0.125s linear; transition: opacity 0.125s linear; } .card-item .rank-column img.image-loaded { opacity: 1; } .card-item .rank-column img.hover-image, .card-item .rank-column img.hover-image.image-loaded { -webkit-transition: opacity 0s linear; -moz-transition: opacity 0s linear; -ms-transition: opacity 0s linear; -o-transition: opacity 0s linear; transition: opacity 0s linear; opacity: 0; } .card-item.expanded-card .info-bubble { left: 20px; top: 100px; position: absolute; } .card-item .info-column { position: relative; float: right; padding: 30px 30px 30px 0; width: 100%; min-width: 800px; max-width: 81.75%; opacity: 1; } .card-item .info-column .rank { font-family: 'TTLakes-DemiBold'; font-weight: normal; position: absolute; top: 23px; left: -25px; width: 50px; height: 50px; line-height: .55; color: white; z-index: 3; background: #E5E5E5; border-radius: 100%; font-size: 23px; display: flex; justify-content: center; align-items: center; color: #000; } .card-item .info-column .rank span { display: inline-block; margin-left: -1px; margin-top: 3px; } @media (max-width: 767px) { .card-item .info-column .rank span { margin-top: -1px; } } .card-item .info-column .medium-show { padding-left: 30px; display: flex; flex-wrap: wrap; } .card-item .info-column .player-description { max-width: 100%; position: relative; flex: 0 0 auto; min-width: 100%; clear: both; margin: 30px 0 0; padding-bottom: 0; font-size: 14px; border-bottom: 1px solid transparent; padding-right: 40px; } .card-item .info-column .player-description:before, .card-item .info-column .player-description:after { content: ''; display: block; position: absolute; bottom: -5px; left: 0; right: 0; height: 1px; background: transparent; } .card-item .info-column .player-description:after { bottom: -9px; } .card-item .info-column .player-description .player-headline { font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 26px; line-height: 1; margin-bottom: 3px; } .card-item .info-column .player-description .player-subline { font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-weight: normal; font-size: 16px; } .card-item .info-column .player-description .player-subline strong { font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; } .card-item .info-column .player-main { float: left; display: flex; flex-direction: column; padding-bottom: 3px; } .card-item .info-column .player-main .player-rank-name { flex: 1; padding-top: 3px; } .card-item .info-column .player-stats { position: relative; flex: 0 0 auto; min-width: 40%; max-width: 52.5%; padding-right: 0; } @media (max-width: 767px) { .card-item .info-column .player-stats { max-width: 100%; } } .card-item .info-column .player-stats .title { position: relative; } .card-item .info-column .player-stats .tooltip { position: absolute; bottom: calc(100% + 2.5px); left: 50%; -moz-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -webkit-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); width: auto; background-color: #0B7853; color: #fff !important; white-space: nowrap; word-break: keep-all; padding: 4px 6px 5px; font-weight: 400; font-family: 'TTCommons-Medium'; opacity: 0; -webkit-transition: all 0.125s linear; -moz-transition: all 0.125s linear; -ms-transition: all 0.125s linear; -o-transition: all 0.125s linear; transition: all 0.125s linear; text-transform: none; -webkit-border-radius: 2px; border-radius: 2px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ letter-spacing: 0; } .card-item .info-column .player-stats .tooltip:after { content: ''; display: block; position: absolute; left: 50%; -moz-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); bottom: -5px; height: 10px; width: 10px; background-color: #0B7853; z-index: -1; } .card-item .info-column .player-stats ul { list-style: none; width: calc(100% + 20px); margin-left: -10px; text-align: right; display: flex; justify-content: flex-end; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .card-item .info-column .player-stats ul { justify-content: flex-start; } } .card-item .info-column .player-stats ul li { position: relative; display: flex; max-width: 23.5%; margin: 0 5px; flex: 1; max-width: 70px; margin-bottom: 24px; } .card-item .info-column .player-stats ul li .stat-wrap { width: 100%; max-width: 65px; position: relative; height: 100%; -webkit-border-radius: 10px; border-radius: 10px; background-clip: padding-box; /* stops bg color from leaking outside the border: */ background: #fff; } .card-item .info-column .player-stats ul li .stat-wrap.highlighted-stat span { color: #0B7853; } @media (max-width: 767px) { .card-item .info-column .player-stats ul li:nth-of-type(5) span.title .tooltip { right: 0; left: auto; -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); } .card-item .info-column .player-stats ul li:nth-of-type(5) span.title .tooltip:after { left: 75%; } .card-item .info-column .player-stats ul li:nth-of-type(5) span.title:hover .tooltip { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } .card-item .info-column .player-stats ul li span { display: block; line-height: 1; } .card-item .info-column .player-stats ul li span.title { border-bottom: 2px solid #E5E5E5; text-align: center; padding: 6px 0; font-family: 'TTCommons-Bold'; font-weight: normal; text-transform: uppercase; font-size: 13px; line-height: 100%; letter-spacing: 0.25em; letter-spacing: .1em; } .card-item .info-column .player-stats ul li span.title:hover .tooltip { opacity: 1; -moz-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } .card-item .info-column .player-stats ul li span.number { font-family: 'TTLakes-Light'; font-weight: normal; font-size: 20px; margin: 10px 0; text-align: center; line-height: .77; padding-top: 1px; } .card-item .info-column .player-stats ul li span.detail { visibility: hidden; opacity: 0; padding-bottom: 0; font-size: 10px; text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; margin-top: -8px; max-height: 18px; } .card-item .info-column .player-meta { visibility: visible; opacity: 1; float: left; width: 47%; clear: left; } .card-item .info-column .player-meta .medium-column { overflow: hidden; } .card-item .info-column .player-meta .medium-column div { position: relative; visibility: visible; opacity: 1; margin: 1px 0; font-size: 14px; } .card-item .info-column .player-meta .medium-column div:first-of-type { visibility: visible; opacity: 1; } .card-item .info-column .player-meta .medium-column div:after { content: '................................................................................................................................................................................................................................................................................................................'; display: block; clear: both; position: absolute; z-index: 1; bottom: 4px; font-size: 7px; font-weight: 500; letter-spacing: 0.15em; } .card-item .info-column .player-meta .medium-column div .label { font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; position: relative; background: #E5E5E5; z-index: 2; padding-right: 4px; } .card-item .info-column .player-meta .medium-column div .value { position: relative; float: right; background: #E5E5E5; z-index: 2; padding: 0 0 0 4px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; font-size: 16px; } .card-item .info-column .player-meta:after { content: ''; display: table; clear: both; } .card-item .info-column .player-stat-image { position: relative; float: right; width: 50%; padding-left: 5%; height: auto; /*this will be removed, determined by image size*/ z-index: 2; padding-bottom: 5%; background: #F5F5F5; } .card-item .info-column .player-stat-image h6 { border-bottom: 1px solid #000; } .card-item .info-column .player-stat-image > div.stat-image-wrapper { position: relative; height: 100%; width: 100%; margin-top: 10px; background-color: rgba(0, 0, 0, 0.08); border-radius: 9px; overflow: hidden; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default { visibility: visible; opacity: 1; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg { position: relative; z-index: 0; /* Zones */ /* Strokes */ } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .zone { fill: #fff; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-1 { fill: #ff002b; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-2 { fill: #ff6d00; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-3 { fill: #ffb000; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-4 { fill: #adea39; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-5 { fill: #12c612; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .rank-6 { fill: #ccc; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-6, .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-7, .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-8 { fill: none; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-6, .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-7 { stroke: #000; stroke-linejoin: round; stroke-width: 7px; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default svg .cls-7 { opacity: 0.2; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div { width: 14.5%; height: 13%; position: absolute; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div span { display: block; text-align: center; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div .percentage { margin-bottom: -3px; font-size: 13px; letter-spacing: .05em; font-weight: bold; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div .fga { font-size: 10px; text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.left-wing { left: 8%; bottom: 14.3%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.right-wing { right: 8%; bottom: 14.3%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.top-of-key { left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 8.6%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.mid { left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 34.6%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.at-rim { left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4.4%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.left-mid { left: 16.6%; top: 20.5%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .default .chart-numbers > div.right-mid { right: 16.6%; top: 20.5%; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .plus-minus-media { visibility: hidden; opacity: 0; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .plus-minus-media.visible { visibility: visible; opacity: 1; } .card-item .info-column .player-stat-image > div.stat-image-wrapper .plus-minus-media img { position: absolute; height: 100%; width: auto; left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .card-item .info-column .player-stat-image > div.stat-image-wrapper > div.plus-minus-media { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-size: cover; background-position: center center; } .card-item .info-column .player-stat-image .charts-by { margin-top: 5px; font-size: 10px; text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 10px; text-align: right; } .card-item .info-column .player-stat-image .charts-by a { color: #000; text-decoration: underline; } .card-item .info-column .player-stat-image.media-shown div.default { visibility: hidden; opacity: 0; } .card-item .info-column .player-info { overflow: hidden; max-height: 0; padding-top: 0px; padding-left: 30px; clear: both; opacity: 0; max-height: 0; } .card-item .info-column .player-info .deep-dives a { text-decoration: underline; color: black; } .card-item .info-column .player-info p { margin-bottom: 15px; } .card-item .info-column .player-info strong { font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; letter-spacing: 0.05em; font-size: 14px; font-weight: normal; } .card-item .info-column .player-plus-minus h6 { border-bottom: 1px solid #000; } .card-item .info-column .player-plus-minus h6:first-of-type { max-width: calc(100%); } .card-item .info-column .player-plus-minus ul { list-style: none; margin-bottom: 30px; } .card-item .info-column .player-plus-minus ul li { position: relative; line-height: 1.25; margin-bottom: 15px; font-size: 15px; font-weight: normal; } .card-item .info-column .player-plus-minus ul li.has-media .media-marker { position: absolute; top: 4px; left: -17px; height: 11px; width: 11px; } .card-item .info-column .player-plus-minus ul li:last-of-type { margin-bottom: 0; } .card-item .info-column .player-disclaimer { margin-top: -15px; margin-bottom: 30px; font-size: 12px; font-weight: normal; word-spacing: -.15em; } .card-item .info-column .more-ringer-coverage { display: none; } .card-item.closing { -webkit-transition: max-height 0.5s linear 0.125s; -moz-transition: max-height 0.5s linear 0.125s; -ms-transition: max-height 0.5s linear 0.125s; -o-transition: max-height 0.5s linear 0.125s; transition: max-height 0.5s linear 0.125s; } .card-item.closing .info-column .player-info { opacity: 0 !important; -webkit-transition: opacity 0.5s linear 0s; -moz-transition: opacity 0.5s linear 0s; -ms-transition: opacity 0.5s linear 0s; -o-transition: opacity 0.5s linear 0s; transition: opacity 0.5s linear 0s; } .card-item.closing .info-column .player-description { border-bottom-color: transparent; -webkit-transition: border-bottom-color 0.5s linear 0s; -moz-transition: border-bottom-color 0.5s linear 0s; -ms-transition: border-bottom-color 0.5s linear 0s; -o-transition: border-bottom-color 0.5s linear 0s; transition: border-bottom-color 0.5s linear 0s; } .card-item.closing .info-column .player-description:before, .card-item.closing .info-column .player-description:after { background-color: transparent; -webkit-transition: background-color 0.5s linear 0s; -moz-transition: background-color 0.5s linear 0s; -ms-transition: background-color 0.5s linear 0s; -o-transition: background-color 0.5s linear 0s; transition: background-color 0.5s linear 0s; } .card-item.closing .toggle-card { bottom: 20px !important; } .card-item.closing .toggle-card svg { -webkit-transition: transform 0.25s linear; -moz-transition: transform 0.25s linear; -ms-transition: transform 0.25s linear; -o-transition: transform 0.25s linear; transition: transform 0.25s linear; -moz-transform: rotate(0) !important; -o-transform: rotate(0) !important; -ms-transform: rotate(0) !important; -webkit-transform: rotate(0) !important; transform: rotate(0) !important; } .card-item.closing .toggle-card span.more { display: block !important; } .card-item.closing .toggle-card span.less { display: none !important; } .card-item .player-social { clear: both; } .card-item .player-social a { display: inline-block; height: 25px; width: 25px; margin-right: 5px; background-size: 99%; background-repeat: no-repeat; text-indent: -55555px; overflow: hidden; opacity: .21; } .card-item .player-social a:hover { opacity: .5; } .card-item .player-social a.facebook { background-image: url(../img/facebook.svg); } .card-item .player-social a.twitter { background-image: url(../img/twitter.svg); } .card-item .ringer-coverage { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 30px 30px; visibility: hidden; opacity: 0; } .card-item .ringer-coverage h5 { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; border-bottom: 1px solid #000; color: #000; } .card-item .ringer-coverage ul { list-style: none; background: #000; padding: 0 10px 10px; } .card-item .ringer-coverage ul li a { display: block; color: white; margin-top: 10px; font-size: 16px; line-height: 1.25; font-weight: normal; display: inline-block; word-spacing: -.2em; } .card-item .ringer-coverage ul li a svg { display: inline-block; height: 8px; } .card-item .ringer-coverage ul li a:hover { text-decoration: underline; } .card-item .toggle-card { display: flex; flex-direction: column; align-items: center; position: absolute; right: 20px; background-size: 100%; background-position: center center; background-repeat: no-repeat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } .card-item .toggle-card svg { width: 35px; height: 35px; } .card-item .toggle-card span.more, .card-item .toggle-card span.less { font-family: 'TTCommons-DemiBold'; font-weight: normal; text-transform: uppercase; font-size: 12.5px; line-height: 125%; letter-spacing: 0.1em; margin-top: 3.75px; text-indent: 0.01em; } .card-item .toggle-card span.less { display: none; } .card-item.no-bubble:hover .toggle-card .info-bubble { -moz-transform: scale(0) translateY(-50%); -o-transform: scale(0) translateY(-50%); -ms-transform: scale(0) translateY(-50%); -webkit-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); } .card-item.expanded-card .player-info, .large .card-item .player-info { padding-top: 30px; } .card-item.expanded-card .player-description, .large .card-item .player-description { border-bottom-color: #999; padding-bottom: 15px; } .card-item.expanded-card .player-description:after, .card-item.expanded-card .player-description:before, .large .card-item .player-description:after, .large .card-item .player-description:before { background-color: #999; } .card-item.expanded-card .medium-column, .large .card-item .medium-column { opacity: 1; } .card-item.expanded-card .toggle-card, .large .card-item .toggle-card { bottom: 20px; } .card-item.expanded-card .toggle-card svg, .large .card-item .toggle-card svg { -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .card-item.expanded-card .toggle-card span.more, .large .card-item .toggle-card span.more { display: none; } .card-item.expanded-card .toggle-card span.less, .large .card-item .toggle-card span.less { display: block; } @media (min-width: 1400px) { .filter-fixed .card-item:hover .toggle-card .info-bubble { opacity: 0; -moz-transform: scale(1) translateY(-50%); -o-transform: scale(1) translateY(-50%); -ms-transform: scale(1) translateY(-50%); -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); -webkit-transition: transform 0.25s ease-in-out; -moz-transition: transform 0.25s ease-in-out; -ms-transition: transform 0.25s ease-in-out; -o-transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; } .filter-fixed .card-item:hover .toggle-card .info-bubble span { opacity: 1; -webkit-transition: opacity 0.25s linear 0.25s; -moz-transition: opacity 0.25s linear 0.25s; -ms-transition: opacity 0.25s linear 0.25s; -o-transition: opacity 0.25s linear 0.25s; transition: opacity 0.25s linear 0.25s; } } @media (min-width: 1400px) { .filter-fixed.show-bubbles .card-item:hover .toggle-card .info-bubble { opacity: 1; } } .info-bubble { position: absolute; left: 110%; top: 50%; width: 115px; height: 115px; border-radius: 100%; top: 50%; background: #0B7853; overflow: hidden; transform-origin: top; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; -moz-transform: scale(0) translateY(-50%); -o-transform: scale(0) translateY(-50%); -ms-transform: scale(0) translateY(-50%); -webkit-transform: scale(0) translateY(-50%); transform: scale(0) translateY(-50%); -webkit-transition: transform 0.175s ease-in-out 0.175s; -moz-transition: transform 0.175s ease-in-out 0.175s; -ms-transition: transform 0.175s ease-in-out 0.175s; -o-transition: transform 0.175s ease-in-out 0.175s; transition: transform 0.175s ease-in-out 0.175s; } .info-bubble span { position: absolute; top: 50%; left: 50%; width: 95px; color: #fff; line-height: 1.2; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; font-size: 14px; opacity: 0; -webkit-transition: opacity 0.175s linear; -moz-transition: opacity 0.175s linear; -ms-transition: opacity 0.175s linear; -o-transition: opacity 0.175s linear; transition: opacity 0.175s linear; } .info-bubble span img { width: 10px; display: block; margin: 4px auto -10px; } .info-bubble.visible { -moz-transform: scale(1) translateY(-50%); -o-transform: scale(1) translateY(-50%); -ms-transform: scale(1) translateY(-50%); -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); -webkit-transition: transform 0.25s ease-in-out; -moz-transition: transform 0.25s ease-in-out; -ms-transition: transform 0.25s ease-in-out; -o-transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; } .info-bubble.visible span { opacity: 1; -webkit-transition: opacity 0.25s linear 0.25s; -moz-transition: opacity 0.25s linear 0.25s; -ms-transition: opacity 0.25s linear 0.25s; -o-transition: opacity 0.25s linear 0.25s; transition: opacity 0.25s linear 0.25s; } .card-item.large .ringer-coverage { visibility: visible; opacity: 1; } @media (max-width: 1260px) { #item-list { width: 1003px; } } @media (max-width: 1240px) { #item-list { width: 100%; float: none; } } @media (min-width: 768px) { body.small .card-item:not(.expanded-card) .medium-column { opacity: 0; } body.small .card-item:not(.expanded-card) .medium-column:first-of-type { opacity: 1; } body.small .card-item:not(.expanded-card) .medium-column:first-of-type > div { opacity: 0; } body.small .card-item:not(.expanded-card) .medium-column:first-of-type > div:first-of-type { opacity: 1; } body.small .card-item:not(.expanded-card) .info-column .medium-show { max-height: 115px; overflow: hidden; } body.small .card-item:not(.expanded-card) .rank-column { overflow: hidden; } body.small .card-item .nfl-team-wrapper { display: none; } } @media (max-width: 1023px) and (min-width: 768px) { .card-item .info-column { min-width: 85% !important; max-width: 85% !important; } .card-item .rank-column { max-width: 15% !important; } } .hide-expand-info .card-item .info-bubble:not(.team-info-bubble) { -moz-transform: scale(0) !important; -o-transform: scale(0) !important; -ms-transform: scale(0) !important; -webkit-transform: scale(0) !important; transform: scale(0) !important; } @media (max-width: 767px) { #item-list { width: 100%; } #list-intros { width: 100%; float: none; } .card-item > .nfl-team-wrapper { display: none; } .card-item .card-info { display: none; } .card-item .rank-column { height: 250px; background-size: 10%; border-right: 0px !important; border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; -webkit-border-top-right-radius: .625rem; -moz-border-radius-topright: .625rem; border-top-right-radius: .625rem; } .card-item .rank-column > .nfl-team-wrapper { display: block; position: absolute; bottom: 0; right: 30px; } .card-item .rank-column .ringer-coverage { display: none; } .card-item .rank-column .rank { font-size: 200px; top: 23px; left: 25px; } .card-item .rank-column img { opacity: 1; visibility: 1; max-width: 25%; right: 0; left: auto; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } .card-item .info-column { min-width: 0; position: static; } .card-item .info-column h4 { display: block; } .card-item .info-column h4:first-of-type { margin-top: 10px; } .card-item .info-column .player-main { width: 100% !important; max-width: 100% !important; } .card-item .info-column .player-meta { padding: 30px 0 0; width: 100% !important; } .card-item .info-column .player-stats { padding-top: 15px; width: 100% !important; } .card-item .info-column .player-stats ul { justify-content: flex-start; } .card-item .info-column .rank { left: 15px; top: 15px; } .card-item .info-column .more-ringer-coverage { display: none; margin-bottom: 15px; border-bottom: 0px; } .card-item .info-column .player-headline { padding-top: 15px; padding-right: 40px; } .card-item .player-social { margin-top: 0; } } @media (max-width: 767px) { #item-list { max-width: 450px; margin: 0 auto; } .card-item { max-width: 500px; margin-bottom: 20px; } .card-item .rank-column { position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; max-width: 100%; max-height: 220px; height: 220px; overflow: hidden; padding: 30px 20px; -webkit-transition: all, 0s, linear, 0s; -moz-transition: all, 0s, linear, 0s; -ms-transition: all, 0s, linear, 0s; -o-transition: all, 0s, linear, 0s; transition: all, 0s, linear, 0s; } .card-item .rank-column > .nfl-team-wrapper { right: 35px; } .card-item .rank-column .movement { position: absolute; bottom: 0; right: 10px; padding: 0; width: 20px; height: 20px; display: block; } .card-item .rank-column .movement.change-up .move-up { background-image: url(../img/trending-up-white.png); background-image: url(../img/trending-up-white.svg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); top: auto; left: auto; } .card-item .rank-column .movement.change-down .move-down { background-image: url(../img/trending-down-white.png); background-image: url(../img/trending-down-white.svg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); top: auto; left: auto; } .card-item .rank-column .rank { font-size: 117px; left: 15px; top: 15px; right: auto; bottom: 15px; } .card-item .rank-column img { margin-left: auto; top: 0; width: 100%; margin-top: auto; left: auto; margin: 0 !important; } .card-item .info-column { position: static; width: 100%; max-width: 100%; min-width: 0; float: none; min-width: auto; padding: 20px 15px; } .card-item .info-column h3 { font-size: 52px; line-height: .85; max-height: 50px; } .card-item .info-column h4 { font-size: 16px; padding-right: 10px; } .card-item .info-column .player-main { width: 100%; max-width: 100%; padding-bottom: 0 !important; } .card-item .info-column .player-meta { padding: 30px 0 0; width: 100%; float: none; margin-bottom: 15px; clear: both; } .card-item .info-column .player-meta .medium-column { width: 100%; float: none; } .card-item .info-column .player-description { flex: 0 0 auto; min-width: 100%; width: 100%; padding-right: 0; margin: 5px 0 0; } .card-item .info-column .player-description .player-headline { font-size: 23px; padding-top: 0; } .card-item .info-column .player-description .player-subline { margin-top: 10px; padding-right: 50px; line-height: 100%; } .card-item .info-column .player-stat-image { width: 100%; float: none; margin-bottom: 30px; padding-left: 0; padding-bottom: 0; } .card-item .info-column .player-stat-image > div.stat-image-wrapper { margin-top: 10px; } .card-item .info-column .player-stats { max-height: 100%; height: auto; } .card-item .info-column .player-stats ul { width: calc(100% + 10px); text-align: center; margin-left: -5px; justify-content: flex-start; } .card-item .info-column .player-stats ul:after { clear: both; display: table; content: ''; } .card-item .info-column .player-stats ul .medium-column:first-of-type { padding-right: 0; } .card-item .info-column .player-stats ul li { position: relative; display: block; max-width: calc(20% - 10px); padding: 0; margin-bottom: 0; } .card-item .info-column .player-stats ul li span.detail { position: relative; bottom: auto; font-size: 10px; margin: 5px 0 0; } .card-item .info-column .player-info { display: none; overflow: visible; padding-left: 0; } .card-item .info-column .player-social { margin: 0; } .card-item .info-column .player-plus-minus h6, .card-item .info-column .player-plus-minus h6:first-of-type { max-width: 100%; } .card-item .info-column .player-plus-minus ul { margin-bottom: 30px; } .card-item .info-column .medium-show { padding-left: 0; } .card-item .toggle-card { bottom: 20px; right: 15px; } } @keyframes bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 60% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } } .filtered .list_inter { display: none; } .list_inter { position: relative; width: 100%; -webkit-border-radius: 0.625rem; border-radius: 0.625rem; background-clip: padding-box; /* stops bg color from leaking outside the border: */ margin-bottom: 30px; padding: 3px; overflow: hidden; display: flex; } .list_inter .inter-title { font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; color: #fff; font-size: 26px; line-height: 1; flex: 1; } .list_inter .inter-title b { display: block; font-family: 'Tabia-Black'; font-weight: normal; font-size: 86px; line-height: .875; margin-top: 8px; letter-spacing: -0.015em; } @media (max-width: 1400px) { .list_inter .inter-title b { font-size: 6vw; } } @media (max-width: 767px) { .list_inter .inter-title b { font-size: 13.5vw; } } .list_inter .inter-byline { color: #fff; font-family: 'TTCommons-Bold'; font-weight: normal; text-transform: uppercase; font-size: 13px; line-height: 100%; letter-spacing: 0.25em; margin-top: 30px; flex: 0 0 auto; } .list_inter .image { display: flex; flex-direction: column; position: relative; background: #191919; width: 100%; max-width: calc(100% - 728px); padding: 30px 0 30px 20px; -webkit-border-top-left-radius: .625rem; -webkit-border-bottom-left-radius: .625rem; -moz-border-radius-topleft: .625rem; -moz-border-radius-bottomleft: .625rem; border-top-left-radius: .625rem; border-bottom-left-radius: .625rem; } .list_inter .image img { position: absolute; bottom: 0; max-height: 150px; right: 5px; display: none; } @media (max-width: 767px) { .list_inter .image img { display: block; } } .list_inter .content { width: 100%; background: #E5E5E5; max-width: 728px; float: right; padding: 20px 30px; position: relative; z-index: 1; -webkit-border-top-right-radius: .625rem; -webkit-border-bottom-right-radius: .625rem; -moz-border-radius-topright: .625rem; -moz-border-radius-bottomright: .625rem; border-top-right-radius: .625rem; border-bottom-right-radius: .625rem; } .list_inter .content p { margin-bottom: 15px; } @media (max-width: 1400px) { .list_inter .content { padding: 20px; } } .list_inter .content .player-name { font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 55px; text-transform: uppercase; line-height: .85; padding: 15px 0; margin-left: -2px; } .list_inter .content .player-content { padding-bottom: 15px; margin-bottom: 30px; border-bottom: 2px solid black; } .list_inter .content .player-list p { padding-bottom: 15px; } .list_inter .content .player-list p a { color: black; text-decoration: underline; } .list_inter:after { content: ''; display: table; clear: both; } @media (max-width: 1023px) { .list_inter .image { max-width: 33%; } } @media (max-width: 1023px) and (min-width: 768px) { .list_inter .inter-title b { font-size: 8vw; } } @media (max-width: 767px) { .list_inter { flex-direction: column; } .list_inter .image { width: 100%; max-width: 100%; -webkit-border-top-left-radius: .625em; -webkit-border-top-right-radius: .625em; -moz-border-radius-topleft: .625em; -moz-border-radius-topright: .625em; border-top-left-radius: .625em; border-top-right-radius: .625em; border-bottom-left-radius: .0; -moz-border-bottom-left-radius: .0; -webkit-border-bottom-left-radius: .0; } .list_inter .list-column { width: 100%; padding: 0 !important; } .list_inter .content { width: 100%; } .list_inter .content .player-name { font-size: 48; } .list_inter .content .inter-title { line-height: .95; } } /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, body { height: auto; } html { color: #000; font-size: 1em; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; line-height: 1.4; } body { max-width: 100vw; overflow-x: hidden; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { padding: 0; margin: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ .stroke { -webkit-transition: stroke 0.25s linear; -moz-transition: stroke 0.25s linear; -ms-transition: stroke 0.25s linear; -o-transition: stroke 0.25s linear; transition: stroke 0.25s linear; } .arrow { -webkit-transition: fill 0.25s linear; -moz-transition: fill 0.25s linear; -ms-transition: fill 0.25s linear; -o-transition: fill 0.25s linear; transition: fill 0.25s linear; } a.active, a.active:hover { color: #43be6d; -webkit-transition: color 0.25s linear; -moz-transition: color 0.25s linear; -ms-transition: color 0.25s linear; -o-transition: color 0.25s linear; transition: color 0.25s linear; } a { text-decoration: none; } h1 { -webkit-margin-before: 0em; -webkit-margin-after: 0em; margin: 20px 0 4px; line-height: .55; font-size: 275px; text-transform: uppercase; color: #000; font-family: 'Tabia-Black'; font-weight: normal; text-align: center; font-weight: normal; } h1 span.block { display: block; font-size: 72px; line-height: 1; margin-bottom: 75px; } h1 span.white { color: #fff; } h2 { font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 13px; line-height: 100%; letter-spacing: 0; font-size: 36px; width: 100%; text-align: center; margin: 0; padding: 0; } h3 { -webkit-margin-before: 0em; -webkit-margin-after: 0em; width: 100%; letter-spacing: 0.15em; font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; font-size: 14px; line-height: 100%; letter-spacing: 0; font-size: 22px; } ::-webkit-scrollbar { width: 0 !important; } h3 .brand { color: #f23208; } .m-ad__desktop_leaderboard_variable { margin: 2rem auto; } #main-content { position: relative; z-index: 4; } @media (max-width: 1199px) { #main-content { overflow: hidden; } } @media (max-width: 767px) { #main-content { padding-top: 30px; } } #main-content .m-ad { margin-bottom: 30px; } #main-content:after { content: ''; clear: both; display: table; } #content { position: relative; z-index: 3; width: 100%; max-width: 1390px; padding: 0 85px 0; margin: 60px auto 0; background: #fff; } #content:after { content: ''; clear: both; display: table; } .credits { font-size: 10px; text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; float: right; margin-bottom: 60px; margin-top: -15px; z-index: 5; position: relative; } /* ========================================================================== Helper classes ========================================================================== */ /* * Hide visually and from screen readers */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element * to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screen readers, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } @media (max-width: 1400px) { #content { padding: 0 30px; } } @media (max-width: 1240px) { #content { padding: 0 30px; } } @media (max-width: 767px) { #content { padding: 0 15px; width: 100%; overflow: hidden; } .credits { margin-top: -15px; text-align: left; } } #mobile-nav { display: none; } .is-mobile { display: none; } .is-tablet { display: none; } .non-mobile { display: block; } .non-mobile.label { display: inline-block; } @media (max-width: 1240px) and (min-width: 768px) { .is-mobile { display: none; } .non-mobile { display: none; } .is-tablet { display: block; } .is-tablet.label { display: inline-block; } } @media (max-width: 767px) { .is-mobile { display: inline-block; } .non-mobile { display: none !important; } .mobile .logo, .mobile .main-nav { display: none; } .show-teams .nav-actions { display: none !important; } #mobile-nav { position: absolute; top: 0; display: block; width: calc(100% - 30px); border-radius: 5px; background: #fff; padding: 10px 0; border: 1px solid #000; background-image: url("../img/mobile-nav-arr?ow.svg"); z-index: 5555; margin-bottom: 0; } .filter-fixed #mobile-nav { width: 100%; } #mobile-nav .mobile-nav-arrow { width: 11px; position: absolute; top: 18px; right: 15px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: transform 0.25s ease-in-out; -moz-transition: transform 0.25s ease-in-out; -ms-transition: transform 0.25s ease-in-out; -o-transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out; } #mobile-nav.open .mobile-nav-arrow { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } #mobile-nav .filter-logo { position: absolute; width: 10.5%; height: 100%; top: 0; left: 0; height: 40px; text-align: center; float: left; -webkit-transition: left 0.125s linear; -moz-transition: left 0.125s linear; -ms-transition: left 0.125s linear; -o-transition: left 0.125s linear; transition: left 0.125s linear; } #mobile-nav .filter-logo a { display: block; width: 100%; height: 100%; } #mobile-nav .filter-logo img { position: absolute; left: 50%; top: 50%; max-width: 70%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #mobile-nav .toggle-zone { position: absolute; top: 0; right: 0; left: 10.5%; z-index: 5; height: 40px; } #mobile-nav .toggle-close { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 0; display: none; } #mobile-nav .toggle { float: left; width: 18px; height: 20px; margin-right: 14px; margin-left: 13%; background-image: url("../img/toggle.png"); background-image: url("../img/toggle.svg"); background-size: 100%; background-position: center center; -webkit-transition: margin-left 0.125s linear; -moz-transition: margin-left 0.125s linear; -ms-transition: margin-left 0.125s linear; -o-transition: margin-left 0.125s linear; transition: margin-left 0.125s linear; } #mobile-nav .current-sort { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; padding: 2px 0; } #mobile-nav .nav-contents { display: none; } #mobile-nav.open { background-position: right 15px top 17px; bottom: 0; margin-bottom: 0; } #mobile-nav.open .filter-logo { left: -10.5%; } #mobile-nav.open .current-sort { display: none; } #mobile-nav.open .toggle { margin-left: 15.5px; } #mobile-nav.open .nav-contents { position: relative; display: block; z-index: 1; } #mobile-nav.open .nav-contents .current-sort { display: block; } #mobile-nav.open .nav-contents div.sort { margin-top: 10px; list-style: none; width: 100%; border-top: 1px solid #ccc; } #mobile-nav.open .nav-contents div.sort .filter.all-coverage { display: none; } #mobile-nav.open .nav-contents div.sort .filter, #mobile-nav.open .nav-contents div.sort .person { color: black; display: block; position: relative; width: 100%; margin: 0 auto; border-bottom: 1px solid #ccc; padding: 10px 40px; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; color: #999; } #mobile-nav.open .nav-contents div.sort .filter.disabled, #mobile-nav.open .nav-contents div.sort .person.disabled { cursor: default; } #mobile-nav.open .nav-contents div.sort .filter.disabled a, #mobile-nav.open .nav-contents div.sort .person.disabled a { cursor: default; } #mobile-nav.open .nav-contents div.sort .filter.disabled:before, #mobile-nav.open .nav-contents div.sort .person.disabled:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-image: url(../img/disabled.png); background-size: cover; background-position: center center; } #mobile-nav.open .nav-contents div.sort .filter .updated, #mobile-nav.open .nav-contents div.sort .person .updated { font-size: 14px; font-weight: normal; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; color: #999; letter-spacing: 0.01em; padding-top: 3px; padding-top: 0; font-size: 13px; } #mobile-nav.open .nav-contents div.sort .filter svg, #mobile-nav.open .nav-contents div.sort .person svg { display: none; height: 10px; position: absolute; left: 12px; top: 14px; } #mobile-nav.open .nav-contents div.sort .filter span, #mobile-nav.open .nav-contents div.sort .person span { display: block; } #mobile-nav.open .nav-contents div.sort .filter.lists, #mobile-nav.open .nav-contents div.sort .person.lists { padding: 0; } #mobile-nav.open .nav-contents div.sort .filter.active_filter, #mobile-nav.open .nav-contents div.sort .person.active_filter { color: #0B7853; } #mobile-nav.open .nav-contents div.sort .filter.active_filter:before, #mobile-nav.open .nav-contents div.sort .person.active_filter:before { content: ''; display: block; position: absolute; left: 12px; top: 9px; height: 23px; width: 23px; background-image: url(../img/point-right.png); background-size: 100%; background-position: center center; } #mobile-nav.open .nav-contents div.sort .filter.active_filter svg, #mobile-nav.open .nav-contents div.sort .person.active_filter svg { display: none; } #mobile-nav.open .nav-contents div.sort .filter.active_filter span, #mobile-nav.open .nav-contents div.sort .person.active_filter span { color: #0B7853; } #mobile-nav.open .nav-contents div.sort .filter:last-of-type, #mobile-nav.open .nav-contents div.sort .person:last-of-type { border-bottom: 1px solid #ccc; } #mobile-nav.open .nav-contents div.sort .filter.inactive, #mobile-nav.open .nav-contents div.sort .person.inactive { font-weight: 500; } #mobile-nav.open .nav-contents div.sort .filter.inactive.lists:before { display: none; } #mobile-nav.open .nav-contents div.sort .filter.inactive.lists .ranking-mobile-title { color: black; padding-top: 10px; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; } #mobile-nav.open .nav-contents div.sort .person { width: 100%; border-bottom: none; padding-top: 0; } #mobile-nav.open .nav-contents div.sort .person .name { font-weight: 500; } #mobile-nav.open .nav-contents div.sort .person .image { width: 30px; float: left; } #mobile-nav.open .nav-contents div.sort .person .image img { width: 100%; } #mobile-nav.open .nav-contents div.sort .person .person-content { width: calc(100% - 30px); padding-left: 0px; float: left; } #mobile-nav.open .nav-contents div.sort .person:after { content: ''; clear: both; display: table; } #mobile-nav.open .nav-contents div.sort .person:last-of-type { border-bottom: 0px; } #mobile-nav.open .nav-contents .ranking_list .person:first-of-type.active_filter:before { top: 30px; } #mobile-nav.open .nav-contents .ranking-mobile-title { padding-bottom: 5px; } #mobile-nav.open .nav-contents .nav-actions { padding: 25px 0 10px; width: 100%; display: flex; flex-direction: row-reverse; } #mobile-nav.open .nav-contents .nav-actions:after { content: ''; clear: both; display: table; } #mobile-nav.open .nav-contents .nav-actions > div { float: left; width: 40%; font-weight: 500; font-size: 14px; padding: 0 0px 0 10px; } #mobile-nav.open .nav-contents .nav-actions > div.nav-switcher { padding-left: 15px; } #mobile-nav.open .nav-contents .nav-actions > div:last-of-type { width: 60%; padding: 0 0px 0 40px; } #mobile-nav.open .nav-contents .nav-actions .size-toggle a { padding-left: 0; } #mobile-nav.open .nav-contents .nav-actions .title { width: 100%; position: relative; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; margin-bottom: 5px; line-height: 1.15; } #mobile-nav.open .nav-contents .nav-actions .label { margin-bottom: 5px; font-size: 10px; text-align: center; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; text-align: left; } #mobile-nav.open .nav-contents .nav-actions .emoji, #mobile-nav.open .nav-contents .nav-actions .pointer { left: -27px; top: -2px; } #mobile-nav.open .nav-contents .nav-actions .filter-links { padding-left: 0; } #mobile-nav.open .nav-contents .nav-actions a { display: block; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; line-height: 100%; letter-spacing: 0; color: #000; opacity: 1; font-size: 16px; margin-bottom: 6px; } #mobile-nav.open .nav-contents .nav-actions a.active { color: #0B7853; } #mobile-nav.open .nav-contents .all-coverage { display: block; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; line-height: 100%; letter-spacing: 0; color: #000; opacity: 1; font-size: 16px; margin-bottom: 6px; margin-left: 40px; text-decoration: underline; } #mobile-nav.open .nav-contents .all-coverage.active { color: #0B7853; } #mobile-nav.open .nav-switcher .label { margin-left: 30px; } #mobile-nav.open .toggle-close { display: block; } #mobile-nav .size-toggle-z { position: relative; float: left; width: 12px; height: 53px; margin: 0 10px 0 8px; vertical-align: top; } #mobile-nav .size-toggle-z:after { content: ''; position: relative; height: 100%; display: block; background: #e6e6e6; position: absolute; width: 6px; top: 3px; left: 0; right: 0; z-index: 0; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; } #mobile-nav .size-toggle-z li { position: absolute; top: 0; left: -3px; display: inline-block; border-radius: 50%; height: 12px; width: 12px; background: #e6e6e6; vertical-align: top; z-index: 1; } #mobile-nav .size-toggle-z li:nth-child(2) { top: calc(50% - 3px); } #mobile-nav .size-toggle-z li:nth-child(3) { top: calc(100% - 3px); } .filter-fixed #mobile-nav { position: fixed; top: 0; left: 0; right: 0; border-radius: 0; border-top: 0; border-right: 0; border-left: 0; } } #shai_gilgeous-alexander .player-main h3 { font-size: 50px; line-height: .85; margin-top: -2px; } #shai_gilgeous-alexander .player-meta { padding: 11px 0 30px; } .i_anigbogu .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -13%; } .o_anunoby .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .d_bacon .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .l_ball .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; width: 80%; } .v_beachem .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -15%; } .j_bell .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -7%; width: 80%; } .j_blossomgame .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: 0; } .t_bradley .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; width: 100%; } .s_brown .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -8%; width: 70%; } .t_bryant .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; width: 70%; } .j_collins .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -18%; width: 80%; } .z_collins .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -10%; } .h_diallo .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -15%; } .v_edwards .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -15%; } .j_evans .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -10%; } .j_evans .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 100%; } .d_fox .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 120%; margin-left: -33%; } .m_fultz .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -10%; } .h_giles .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 120%; margin-left: -25%; } .j_hart .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -25%; } .i_hartenstein .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -25%; } .w_iwundu .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 100%; margin-left: -30%; } .j_jackson .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 90%; margin-left: -8%; } .ju_jacksonmd .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -20%; } .ju_jackson .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -15%; } .j_jeanne .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 70%; margin-left: -13%; } .a_jones .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -13%; } .l_kennard .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -17%; } .a_kulboka .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -13%; } .r_kurucs .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -22%; } .t_leaf .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -18%; } .m_lessort .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -18%; width: 100%; } .l_markkanen .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 75%; margin-left: -13%; } .d_mitchell .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -18%; width: 100%; } .m_monk .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -10%; } .m_morris .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -10%; } .j_motley .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .k_mushidi .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 77%; margin-left: -12%; } .n_tilikina .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 77%; margin-left: -12%; } .s_ojeleye .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 77%; margin-left: -12%; } .c_oliver .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 77%; margin-left: -12%; } .a_pasecniks .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 90%; margin-left: -10%; } .j_patton .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 80%; margin-left: -6%; } .a_peters .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); width: 100%; margin-left: -6%; } .i_rabb .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -30%; } .d_robinson .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .e_sumner .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .c_swanigan .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .j_tatum .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .s_thornwell .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; } .m_wagner .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -30%; } .d_white .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; width: 100%; } .d_wilson .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -20%; width: 100%; } .k_kuzma .rank-column img { -moz-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); -webkit-transform: translateX(-5px); transform: translateX(-5px); margin-left: -70px; width: 100%; } @media (max-width: 767px) { .card-item .rank-column img, .card-item.expanded-card .rank-column img { max-width: 100%; margin-top: -20px !important; -moz-transform: translateX(0) !important; -o-transform: translateX(0) !important; -ms-transform: translateX(0) !important; -webkit-transform: translateX(0) !important; transform: translateX(0) !important; width: 100%; } } .filter-fixed #amplitude { position: absolute; bottom: 20px; } #amplitude { position: absolute; width: 160px; z-index: 5555; background: black; padding: 10px; bottom: 0; z-index: 10; -webkit-transition: bottom 0.5s ease-out; -moz-transition: bottom 0.5s ease-out; -ms-transition: bottom 0.5s ease-out; -o-transition: bottom 0.5s ease-out; transition: bottom 0.5s ease-out; } #amplitude:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; z-index: 1; } #amplitude img[amplitude-song-info="cover_art_url"] { width: 30px; } #amplitude .amplitude-header { position: relative; z-index: 2; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; color: white; margin-bottom: 10px; } #amplitude .amplitude { position: relative; z-index: 2; } #amplitude .amplitude-song-played-progress { width: 100%; display: block; } #amplitude .song-name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #amplitude span[amplitude-song-info="name"], #amplitude .episode { display: inline-block; color: #fff; font-size: 12px; line-height: 125%; margin-bottom: 10px; font-weight: 500; } #amplitude span[amplitude-song-info="artist"], #amplitude .artist { display: block; color: #ccc; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; padding-bottom: 1px; } #amplitude progress[value]::-webkit-progress-bar { background-color: #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; height: 5px; float: left; border-radius: 2px; } #amplitude progress[value]::-webkit-progress-value { background: #fff; border-radius: 2px; } #amplitude .amplitude-play-pause { float: left; height: 31px; width: 30px; margin-right: 5px; } #amplitude .amplitude-play-pause .play { display: block; height: 100%; width: 100%; background-image: url(../img/play-button.png); background-image: url(../img/play-button.svg); background-size: 100%; background-repeat: no-repeat; } #amplitude .amplitude-play-pause .pause { display: none; height: 100%; width: 100%; background-image: url(../img/pause-button.png); background-image: url(../img/pause-button.svg); background-size: 100%; background-repeat: no-repeat; } #amplitude .amplitude-play-pause.amplitude-playing .play { display: none; } #amplitude .amplitude-play-pause.amplitude-playing .pause { display: block; } #amplitude .progress { float: left; width: calc(100% - 35px); padding-top: 7px; } #amplitude progress[value] { /* Reset the default appearance */ display: block; -webkit-appearance: none; appearance: none; width: 100%; height: 5px; vertical-align: top; } #amplitude .current-time { display: block; color: #fff; font-size: 10px; margin-top: 5px; } #amplitude .toggle-click { display: none; } #amplitude .more-podcasts-toggle { position: relative; z-index: 2; display: block; clear: both; -webkit-appearance: none; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; font-size: 10px; text-decoration: underline; text-transform: uppercase; letter-spacing: .1em; color: white; background: transparent; border: 0; outline: 0; margin-bottom: 0; padding-top: 10px; } #amplitude .more-podcasts-toggle .more { display: inline; } #amplitude .more-podcasts-toggle .less { display: none; } #amplitude .more-podcasts { position: absolute; width: 100%; left: 100%; background: black; height: 100%; top: 0; left: 0; z-index: 0; padding: 5px 10px; border-left: 1px solid white; overflow: auto; -webkit-transition: left 0.25s ease-out; -moz-transition: left 0.25s ease-out; -ms-transition: left 0.25s ease-out; -o-transition: left 0.25s ease-out; transition: left 0.25s ease-out; } #amplitude .more-podcasts button { background: transparent; outline: 0; border: 0; -webkit-appearance: none; -moz-appearance: none; text-align: left; } #amplitude.open .more { display: none; } #amplitude.open .less { display: inline; } #amplitude.open .more-podcasts { left: 100%; } @media (max-width: 1230px) { .podcast-open #amplitude, .filter-fixed.podcast-open #amplitude { bottom: 0; top: auto; } .filter-fixed #amplitude, #amplitude { position: fixed; display: block; left: 0; top: auto; bottom: -110px; height: 80px; top: auto; right: 0; width: 100%; padding: 15px 10px 5px; -webkit-transition: bottom 0.25s linear; -moz-transition: bottom 0.25s linear; -ms-transition: bottom 0.25s linear; -o-transition: bottom 0.25s linear; transition: bottom 0.25s linear; } .filter-fixed #amplitude .amplitude-header, #amplitude .amplitude-header { display: none; margin-bottom: 5px; } .filter-fixed #amplitude span[amplitude-song-info=artist], #amplitude span[amplitude-song-info=artist] { line-height: 60%; margin-bottom: 5px; } .filter-fixed #amplitude span[amplitude-song-info=name], #amplitude span[amplitude-song-info=name] { display: block; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filter-fixed #amplitude .toggle-click, #amplitude .toggle-click { display: block; width: auto; height: 40px; width: 50%; position: absolute; top: -40px; right: 0; } .filter-fixed #amplitude .toggle-click .toggle, #amplitude .toggle-click .toggle { position: absolute; bottom: 0; height: 25px; background: black; font-size: 12px; color: #ddd; font-weight: bold; letter-spacing: 2px; padding: 6px 10px 4px; right: 10px; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; line-height: 100%; } .filter-fixed #amplitude { bottom: -80px; } } #sticky-phantom { background: transparent; color: #ffffff; font-size: 46.5px; text-align: center; width: 100vw; visibility: hidden; max-width: 20vw; overflow: hidden; } @media (max-width: 767px) { #sticky-phantom { font-size: 31px; } } /** * Swiper 5.2.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2019 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 16, 2019 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform,height; } .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size)/ 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white { --swiper-navigation-color:#ffffff; } .swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black { --swiper-navigation-color:#000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: .2s transform,.2s top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color:#ffffff; } .swiper-pagination-black { --swiper-pagination-color:#000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #list-teams { position: absolute; left: 100vw; top: 0; } .show-teams #list-teams { display: block; z-index: 1; position: relative; left: 0; } .show-teams #list-players { position: absolute; left: 100VW; top: -55555px; z-index: 0; display: block; } .team-card { display: block; position: relative; padding: 30px 40px; margin: 0; border-radius: .625rem; border: .00875rem solid #ccc; margin-bottom: 30px; background: #f5f5f5; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; } .team-card:hover .team-top-section .team-logo { -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */ filter: grayscale(0%); } .team-card .team-top-section { position: relative; padding-left: 170px; } .team-card .team-top-section .team-logo { position: absolute; left: 0; top: 0; max-width: 140px; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); -webkit-transition: filter 0.25s linear; -moz-transition: filter 0.25s linear; -ms-transition: filter 0.25s linear; -o-transition: filter 0.25s linear; transition: filter 0.25s linear; } .team-card .team-top-section .team-name { font-family: 'Tabia-Black'; font-weight: normal; font-size: 52px; line-height: .85; text-transform: none; letter-spacing: -0.015em; } @media screen and (min-width: 992px) { .team-card .team-top-section .team-picks-needs-wrapper { display: flex; } .team-card .team-top-section .team-picks-needs-wrapper .team-picks { flex: 1; } .team-card .team-top-section .team-picks-needs-wrapper .team-needs { flex: 0 0 auto; min-width: 300px; padding-left: 30px; margin-top: 25px; } .team-card .team-top-section .team-picks-needs-wrapper .team-needs ul { list-style-position: inside; } } .team-card .team-top-section .team-picks-needs-wrapper .team-needs ul { margin-left: 16px; } .team-card .team-top-section .team-picks { margin-top: 25px; } .team-card .team-top-section .team-picks .team-pick-number { display: block; width: 90px; float: left; color: #374ea2; font-weight: 700; } .team-card .team-top-section .team-picks .team-pick-text { display: block; width: calc(100% - 90px); float: left; } .team-card .team-top-section .team-picks ul { list-style: none; } .team-card .team-top-section .team-picks ul li { margin-bottom: 5px; font-size: 16px; } .team-card .team-top-section .team-picks ul li:first-of-type { margin-bottom: 7.5px; text-transform: uppercase; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; } .team-card .team-top-section .team-picks ul li:first-of-type .team-pick-number { color: black; } .team-card .team-top-section .team-picks ul li:after { content: ''; display: table; clear: both; } .team-card .team-top-section .team-needs { margin-top: 30px; } .team-card .team-top-section .team-needs .team-needs-header { font-size: 12.5px; margin-bottom: 7.5px; text-transform: uppercase; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; } .team-card .team-top-section .team-needs li { position: relative; position: relative; list-style: none; font-size: 16px; margin-bottom: 5px; } .team-card .team-top-section .team-needs li:before { content: ''; display: block; position: absolute; top: 50%; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -15px; height: 3px; width: 3px; border-radius: 100%; background: black; } .team-card .team-player-section { position: relative; width: 100%; border-top: 1px solid black; border-bottom: 1px solid black; padding-top: 20px; margin-top: 30px; } .team-card .team-player-section:before { content: ''; display: block; position: absolute; top: 3px; left: 0; right: 0; border-top: 1px solid black; } .team-card .team-player-section:after { content: ''; display: block; clear: both; position: relative; -moz-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); width: 100%; border-top: 1px solid black; } .team-card .team-player-section .team-players-headline { margin-bottom: 25px; } .team-card .team-player-section .team-players-headline br { display: none; } .team-card .team-player-section .team-players-headline span { padding: 1px 5px 3px; color: black; line-height: 1; text-transform: uppercase; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 500; } .team-card .team-player-section .team-player { display: block; position: relative; width: 33.33%; color: #000; float: left; padding-left: 110px; padding-right: 20px; } .team-card .team-player-section .team-player.no-silo { padding-left: 15px; padding-right: 0; padding-bottom: 15px; display: flex; } .team-card .team-player-section .team-player.no-silo:first-of-type { padding-left: 0; } .team-card .team-player-section .team-player.no-silo .team-player-name { margin-bottom: 2px; font-size: 22px; margin-top: 7.5px; } .team-card .team-player-section .team-player.no-silo .team-player-image-wrapper { position: relative; width: 80px; height: 80px; -webkit-border-radius: 100%; border-radius: 100%; background-clip: padding-box; /* stops bg color from leaking outside the border: */ overflow: hidden; background-color: black; } .team-card .team-player-section .team-player.no-silo .team-player-image-wrapper img { width: 100%; } .team-card .team-player-section .team-player.no-silo .team-player-image-column { padding-right: 15px; } .team-card .team-player-section .team-player.no-silo .team-player-info-wrapper { flex-grow: 1; } .team-card .team-player-section .team-player.no-silo .team-player-scouting { position: relative; bottom: auto; right: auto; width: 100%; text-align: center; display: block; padding-top: 10px; color: #374ea2; display: none; } .team-card .team-player-section .team-player.no-silo .team-should-draft { position: relative; top: auto; left: auto; margin-bottom: 15px; display: inline-block; } .team-card .team-player-section .team-player.no-silo:after { top: 46%; height: 100px; } .team-card .team-player-section .team-player.no-silo:hover { color: #0B7853 !important; } .team-card .team-player-section .team-player.no-silo:hover .team-player-image-wrapper { background-color: #0B7853; } .team-card .team-player-section .team-player.no-silo:hover.qb, .team-card .team-player-section .team-player.no-silo:hover.rb, .team-card .team-player-section .team-player.no-silo:hover.wr, .team-card .team-player-section .team-player.no-silo:hover.te, .team-card .team-player-section .team-player.no-silo:hover.c, .team-card .team-player-section .team-player.no-silo:hover.t, .team-card .team-player-section .team-player.no-silo:hover.g { color: #CF8E3E !important; } .team-card .team-player-section .team-player.no-silo:hover.qb .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.rb .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.wr .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.te .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.c .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.t .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo:hover.g .team-player-image-wrapper { background-color: #CF8E3E; } .team-card .team-player-section .team-player:last-of-type:after { display: none; } .team-card .team-player-section .team-player img { max-width: 107px; position: absolute; left: 0px; top: 4px; z-index: 1; } .team-card .team-player-section .team-player .team-should-draft { position: absolute; top: 0; left: 0; z-index: 0; background: black; padding: 1px 5px 3px; color: white; text-transform: uppercase; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 500; } .team-card .team-player-section .team-player .team-player-name { font-family: 'TTLakes-DemiBold'; font-weight: normal; font-size: 22px; text-transform: uppercase; line-height: .9; margin-top: -5px; margin-bottom: 2px; } .team-card .team-player-section .team-player .team-player-position, .team-card .team-player-section .team-player .team-player-school { font-size: 16px; font-family: 'TTLakes-Light'; font-weight: normal; line-height: 1.2; } .team-card .team-player-section .team-player .team-player-school { margin-bottom: 5px; } .team-card .team-player-section .team-player .team-player-blurb { margin-top: 10px; font-size: 14px; margin-bottom: 30px; display: none; } .team-card .team-player-section .team-player .team-player-scouting { position: absolute; bottom: -4px; right: 25px; font-size: 9px; font-family: 'TTCommons-Regular'; font-weight: normal; text-transform: none; letter-spacing: .15em; line-height: 1.4; font-weight: 500; text-decoration: underline; text-transform: uppercase; display: none; } .team-card .team-history-section { margin-top: 30px; } .team-card .team-history-section .team-history-header { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; margin-bottom: 7.5px; } .team-card .team-history-section .team-history { font-size: 16px; } .team-card .team-history-section .team-history p { margin-bottom: 15px; } @media (min-width: 768px) and (max-width: 1023px) { .team-card .team-player-section .team-player, .team-card .team-player-section .team-player.no-silo { padding-left: 0; padding-right: 0; margin-right: 30px; width: calc(33.33% - 20px); } .team-card .team-player-section .team-player .team-player-image-wrapper, .team-card .team-player-section .team-player.no-silo .team-player-image-wrapper { width: 75px; } .team-card .team-player-section .team-player:last-of-type, .team-card .team-player-section .team-player.no-silo:last-of-type { margin-right: 0; } .team-card .team-player-section .team-player:after, .team-card .team-player-section .team-player.no-silo:after { display: none; } .team-card .team-player-section .team-player img, .team-card .team-player-section .team-player.no-silo img { position: relative; max-height: 250px; max-width: 100%; top: auto; margin-left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; } } @media (min-width: 1025px) { .team-card .team-player-section .team-players-headline { position: absolute; top: 25px; left: 0; } .team-card .team-player-section .team-players-headline span { display: inline-block; -moz-transform: translateY(-7px); -o-transform: translateY(-7px); -ms-transform: translateY(-7px); -webkit-transform: translateY(-7px); transform: translateY(-7px); padding-bottom: 2px; } .team-card .team-player-section .team-players-headline span:first-of-type { padding-top: 0; padding-bottom: 0; -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); } .team-card .team-player-section .team-players-headline br { display: block; } .team-card .team-player-section .team-player-wrapper { padding: 10px 0 10px 110px; } .team-card .team-player-section .team-player-wrapper:after { content: ''; clear: both; display: table; } } @media (max-width: 767px) { .team-card { padding: 25px; } .team-card .team-top-section { padding: 0; } .team-card .team-top-section .top-title { display: flex; } .team-card .team-top-section .logo-wrapper { min-width: 60px; display: flex; justify-content: flex-start; align-items: center; } .team-card .team-top-section .team-logo { width: 45px; position: relative; display: inline-block; top: 0; vertical-align: middle; margin-right: 5px; } .team-card .team-top-section .team-name { display: inline-block; vertical-align: middle; flex-grow: 1; } .team-card .team-player-section .team-player { width: 100%; float: none; margin: 5px 0 10px; padding-left: 0px !important; } .team-card .team-player-section .team-player:after { display: none; } } @media (min-width: 1025px) { body:not(.mobile):not(.no-transition) .card-item { -webkit-transition: max-height 0.325s ease-out, 0.5s; -moz-transition: max-height 0.325s ease-out, 0.5s; -ms-transition: max-height 0.325s ease-out, 0.5s; -o-transition: max-height 0.325s ease-out, 0.5s; transition: max-height 0.325s ease-out, 0.5s; } body:not(.mobile):not(.no-transition) .card-item.sort { -webkit-transition: max-height 0.325s ease-out, 0s; -moz-transition: max-height 0.325s ease-out, 0s; -ms-transition: max-height 0.325s ease-out, 0s; -o-transition: max-height 0.325s ease-out, 0s; transition: max-height 0.325s ease-out, 0s; } body:not(.mobile):not(.no-transition) .player-info { -webkit-transition: max-height 0.5s ease-out, 0.25s; -moz-transition: max-height 0.5s ease-out, 0.25s; -ms-transition: max-height 0.5s ease-out, 0.25s; -o-transition: max-height 0.5s ease-out, 0.25s; transition: max-height 0.5s ease-out, 0.25s; } body:not(.mobile):not(.no-transition) .card-item:not(.has-hover) .rank-column .image img:not(.hover-image) { -webkit-transition: opacity 0.25s linear; -moz-transition: opacity 0.25s linear; -ms-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } body:not(.mobile):not(.no-transition) span.title { -webkit-transition: color 0.25s linear, border-color 0.25s linear; -moz-transition: color 0.25s linear, border-color 0.25s linear; -ms-transition: color 0.25s linear, border-color 0.25s linear; -o-transition: color 0.25s linear, border-color 0.25s linear; transition: color 0.25s linear, border-color 0.25s linear; } } .filter-fixed #filters a.hidden-stop { display: none; position: absolute; left: 0; bottom: 0; width: auto; margin-bottom: 0; color: #fff; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; background: #000; padding: 4px 5px 4px; z-index: 5555; color: #ccc; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; } .filter-fixed #filters a.hidden-stop.playing-hidden { display: block; } .filtered .video_inter { max-height: 0; } .video_inter { position: relative; width: 100%; -webkit-border-radius: 0.625rem; border-radius: 0.625rem; background-clip: padding-box; /* stops bg color from leaking outside the border: */ margin-bottom: 30px; background: #000; overflow: hidden; } .video_inter.cant-show .youtube-wrapper { display: none; } .video_inter.playing .video-content { max-width: 27%; -webkit-transition: max-width 0.5s ease-in-out 0.33s; -moz-transition: max-width 0.5s ease-in-out 0.33s; -ms-transition: max-width 0.5s ease-in-out 0.33s; -o-transition: max-width 0.5s ease-in-out 0.33s; transition: max-width 0.5s ease-in-out 0.33s; } .video_inter.playing .video-content .video-dek { opacity: 0; -webkit-transition: opacity 0.125s linear; -moz-transition: opacity 0.125s linear; -ms-transition: opacity 0.125s linear; -o-transition: opacity 0.125s linear; transition: opacity 0.125s linear; } .video_inter.playing .video-content .video-title { font-size: 40px; -webkit-transition: all 0.5s ease-in-out 0.33s; -moz-transition: all 0.5s ease-in-out 0.33s; -ms-transition: all 0.5s ease-in-out 0.33s; -o-transition: all 0.5s ease-in-out 0.33s; transition: all 0.5s ease-in-out 0.33s; } .video_inter.playing .video-video { max-width: 73%; width: 73%; -webkit-transition: max-width 0.5s ease-in-out 0.33s; -moz-transition: max-width 0.5s ease-in-out 0.33s; -ms-transition: max-width 0.5s ease-in-out 0.33s; -o-transition: max-width 0.5s ease-in-out 0.33s; transition: max-width 0.5s ease-in-out 0.33s; } .video_inter.playing .video-video .video-image .video-play { display: none; } .video_inter.playing .video-video .video-image .video-spinner { display: block; } .video_inter.playing .video-video .youtube-wrapper { z-index: 2; } .video_inter.loaded .video-video .video-image { opacity: 0; } .video_inter .video-content { position: relative; padding: 40px 40px 70px; width: 46.5%; max-width: 46.5%; float: left; color: #fff; text-align: center; -webkit-transition: max-width 0.5s ease-in-out 0s; -moz-transition: max-width 0.5s ease-in-out 0s; -ms-transition: max-width 0.5s ease-in-out 0s; -o-transition: max-width 0.5s ease-in-out 0s; transition: max-width 0.5s ease-in-out 0s; } .video_inter .video-content .video-header { font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; color: #fff; } .video_inter .video-content .video-title { font-size: 70px; text-transform: uppercase; line-height: 85%; padding: 10px 0 20px; font-family: 'TTCommons-Light'; font-weight: normal; text-transform: none; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .video_inter .video-content .video-dek { font-size: 16px; height: 175px; overflow: hidden; max-width: 455px; margin: 0 auto; opacity: 1; -webkit-transition: opacity 0.125s linear 0.5s; -moz-transition: opacity 0.125s linear 0.5s; -ms-transition: opacity 0.125s linear 0.5s; -o-transition: opacity 0.125s linear 0.5s; transition: opacity 0.125s linear 0.5s; } .video_inter .video-content .video-presentedby { position: absolute; bottom: 40px; left: 50%; -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .video_inter .video-content .video-presentedby span { display: inline-block; vertical-align: middle; font-size: 24px; font-family: 'TTCommons-Bold'; font-weight: normal; text-transform: uppercase; font-size: 13px; line-height: 100%; letter-spacing: 0.25em; } .video_inter .video-content .video-presentedby img { display: inline-block; height: 20px; vertical-align: middle; margin-left: 5px; } .video_inter .video-video { position: absolute; width: 53.5%; max-width: 53.5%; right: 0; top: 0; bottom: 0; -webkit-transition: max-width 0.5s ease-in-out; -moz-transition: max-width 0.5s ease-in-out; -ms-transition: max-width 0.5s ease-in-out; -o-transition: max-width 0.5s ease-in-out; transition: max-width 0.5s ease-in-out; } .video_inter .video-video .video-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; opacity: 1; z-index: 1; -webkit-transition: opacity 0.25s ease-in-out, z-index 0s ease-in-out 0.25s; -moz-transition: opacity 0.25s ease-in-out, z-index 0s ease-in-out 0.25s; -ms-transition: opacity 0.25s ease-in-out, z-index 0s ease-in-out 0.25s; -o-transition: opacity 0.25s ease-in-out, z-index 0s ease-in-out 0.25s; transition: opacity 0.25s ease-in-out, z-index 0s ease-in-out 0.25s; } .video_inter .video-video .video-image .video-play { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 90px; width: 90px; background-image: url(../img/play.png); background-image: url(../img/play.svg); background-size: 100%; background-repeat: no-repeat; } .video_inter .video-video .video-image .video-spinner { display: none; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video_inter .video-video .video-image .double-bounce1, .video_inter .video-video .video-image .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .video_inter .video-video .video-image .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } .video_inter .video-video .youtube-wrapper { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 100%; -webkit-transition: z-index 0s ease-in-out 0.25s; -moz-transition: z-index 0s ease-in-out 0.25s; -ms-transition: z-index 0s ease-in-out 0.25s; -o-transition: z-index 0s ease-in-out 0.25s; transition: z-index 0s ease-in-out 0.25s; } .video_inter .video-video .youtube-wrapper .hidden-stop { display: none; } .video_inter .video-video .youtube-wrapper .current-youtube, .video_inter .video-video .youtube-wrapper .close { display: none; } .video_inter .video-video .youtube-wrapper iframe { width: 100%; max-width: 100%; max-height: 100%; } .video_inter .video-video .youtube-wrapper.fixed { position: fixed; width: 160px; height: 185px; top: auto; bottom: 40px; right: 20px; z-index: 6666; background: #000; } .video_inter .video-video .youtube-wrapper.fixed iframe { width: 160px; height: 84px; } .video_inter .video-video .youtube-wrapper.fixed .current-youtube { display: block; display: inline-block; color: #fff; font-size: 12px; line-height: 125%; font-weight: 500; padding: 10px 10px 5px; border-bottom: 1px solid #ccc; } .video_inter .video-video .youtube-wrapper.fixed .current-youtube p { display: block; color: #ccc; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; padding-bottom: 1px; } .video_inter .video-video .youtube-wrapper.fixed .current-youtube br { display: none; } .video_inter .video-video .youtube-wrapper.fixed .close { display: block; position: relative; display: flex; justify-content: center; padding: 10px; border-top: 1px solid #ccc; } .video_inter .video-video .youtube-wrapper.fixed .close a { display: inline-block; font-family: 'TTCommons-DemiBold'; font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; width: auto; color: #ccc; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; flex-grow: 1; margin: 0 2.5px; text-align: center; padding: 0; background: #ccc; color: black; padding: 5px 0; } .video_inter .video-video .youtube-wrapper.fixed .close a.hide { display: none; } .video_inter:after { content: ''; display: table; clear: both; } @media (max-width: 1100px) { .video_inter .video-content { padding: 40px 20px; } } @media (max-width: 1024px) { .hidden-stop { top: calc(100% - 55px); right: 11px; } .video_inter .video-content .video-title { font-size: 65px; } .video_inter .video-content .video-dek { font-size: 14px; } .video_inter .video-content .video-presentedby { width: 100%; } .video_inter .video-content .video-presentedby img { height: 16px; } .video_inter .video-content .video-presentedby span { font-size: 16px; } .video_inter.playing .video-content { width: 33%; max-width: 33%; } .video_inter.playing .video-video { width: 67%; max-width: 67%; } .video_inter.playing .video-video .youtube-wrapper.fixed { width: 52vw !important; height: auto !important; bottom: auto; top: auto !important; bottom: 40px; right: 11px !important; left: auto !important; } .video_inter.playing .video-video .youtube-wrapper.fixed .current-youtube { display: none; } .video_inter.playing .video-video .youtube-wrapper.fixed .close .hide { display: none; } .video_inter.playing .video-video .youtube-wrapper.fixed iframe { width: 52vw !important; height: 29vw !important; } .video_inter.playing .video-video .youtube-wrapper iframe { max-height: 100%; } } @media (max-width: 767px) { .video_inter .video-content, .video_inter.playing .video-content { padding: 25px; float: none; width: 100%; max-width: 100%; } .video_inter .video-content .video-dek, .video_inter.playing .video-content .video-dek { position: relative; height: auto; min-height: 0; } .video_inter .video-content .video-presentedby, .video_inter.playing .video-content .video-presentedby { position: relative; bottom: 0; margin-top: 20px; } .video_inter .video-content .video-title, .video_inter.playing .video-content .video-title { font-size: 65px; } .video_inter .video-content .video-dek, .video_inter.playing .video-content .video-dek { opacity: 1; } .video_inter .video-video, .video_inter.playing .video-video { position: relative; width: 100%; max-width: 100%; top: auto; bottom: auto; right: auto; height: 52vw; } } /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* Base Theme Transitions */ .background-theme { -webkit-transition: background-color, 0.5s, linear; -moz-transition: background-color, 0.5s, linear; -ms-transition: background-color, 0.5s, linear; -o-transition: background-color, 0.5s, linear; transition: background-color, 0.5s, linear; } body:not(.mobile):not(.no-transition) .color-theme { -webkit-transition: color, 0.5s, linear; -moz-transition: color, 0.5s, linear; -ms-transition: color, 0.5s, linear; -o-transition: color, 0.5s, linear; transition: color, 0.5s, linear; } body:not(.mobile):not(.no-transition) .border-theme { -webkit-transition: border-color, 0.5s, linear; -moz-transition: border-color, 0.5s, linear; -ms-transition: border-color, 0.5s, linear; -o-transition: border-color, 0.5s, linear; transition: border-color, 0.5s, linear; } body:not(.mobile):not(.no-transition) .border-theme-before:before { -webkit-transition: border-color, 0.5s, linear; -moz-transition: border-color, 0.5s, linear; -ms-transition: border-color, 0.5s, linear; -o-transition: border-color, 0.5s, linear; transition: border-color, 0.5s, linear; } body:not(.mobile):not(.no-transition) .background-theme-after:after { -webkit-transition: background-color, 0.5s, linear; -moz-transition: background-color, 0.5s, linear; -ms-transition: background-color, 0.5s, linear; -o-transition: background-color, 0.5s, linear; transition: background-color, 0.5s, linear; } /* Ringer Theme */ .ringer .background-theme { background-color: #cd5100 !important; } .ringer .color-theme { color: #cd5100 !important; } .ringer .border-theme { border-color: #cd5100 !important; }