@import "./tokens.css";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Exo:400,600,700,800");
@import "./components/command-palette.css";

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, a {
  line-height: 1em
}

a {
  text-decoration: none
}

ul, ol {
  list-style: none
}

figure > figcaption {
  display: none
}

figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-box-heading .form-box-heading-title, .banner-title, .post-preview.huge .post-preview-title, .post-open .post-open-title.big, .error-display .error-title, .streamer-overview .streamer-info .streamer-info-name, .contact-section .contact-section-title, .sponsors-title, .order-result-banner .order-result-banner-title, .post-open .post-open-title, .banner .banner-title, .post-preview.picture.big .post-preview-overlay .post-preview-title, .post-preview.large .post-preview-title, .post-open .post-open-title.small, .reviews-wrap .reviews-header .reviews-header-title, .post-preview.big .post-preview-title, .topic-comment .topic-comment-content .topic-comment-quote:before, .widget-team-vs .widget-team-vs-item .team-score, .match-stats .match-score, .widget-stat-info-wrap .widget-stat-info-number, .countdown-text, .topic-wrap .topic-header .topic-title, .reviews-wrap .reviews-body .reviews-body-title, .post-preview.landscape.big .post-preview-title, .post-preview.medium .post-preview-title, .promo-banner .promo-banner-info .promo-banner-title, .section-slider-bg .section-slider-title, .stats-info-item .stats-info-item-value, .form-box-heading .form-box-heading-subtitle, .product-open .product-name, .post-preview-title, .error-display .error-subtitle, .post-preview.video.no-hover .post-preview-title, .post-comment .post-comment-username, .video-info-slider-items .video-info-slider-item .video-info-slider-title, .topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-username, .profile-user .profile-user-name, .user-review .user-review-title, .order-result-banner .order-result-banner-text, .post-open .quote-text, .subscribe-section .subscribe-section-title, .sponsor-info .sponsor-info-title, .faq-item .faq-item-trigger .faq-item-title, .widget-medals .widget-medals-info .widget-medals-title, .badge-item .badge-item-title, .post-open .post-open-text.bold, .skill-loot-list .skill-loot-item-info .skill-loot-item-title, .badge-info, .page-navigation .page-navigation-item, .timestamp-tag, .filter-heading .filter-heading-text, .account-info-wrap .account-info-name, .ban-list-wrap .ban-list-title, .character-selection-list .character-selection-list-text, .ticket-wrap .ticket-info .ticket-title, .ticket-wrap .ticket-teams .ticket-teams-text, .ticket-wrap .ticket-buy-button, .order-item .order-header .order-header-item, .sponsor-item .sponsor-item-link, .faq-item .faq-item-footer .faq-item-footer-text, .bubble-ornament .bubble-ornament-info, .bubble-ornament .bubble-ornament-text, .tag-quantity .tag-quantity-text, .button-replay, .decorated-link, .link-text-form, .inventory-bag-preview .items-in-inventory, .inventory-bag-preview .inventory-subtotal, .dropdown-simple-wrap .dp-option-text, .widget-title-wrap .widget-title, .widget-title-wrap .widget-text.bold, .widget-title-wrap .stats-reference .stat-reference .stat-reference-text, .widget-overflow-wrap .widget-overflow-list .widget-overflow-list-text, .widget-match-box-item .widget-match-box-link, .widget-info-box .widget-info-box-item .widget-info-title, .widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value, .widget-simple-stat .widget-simple-stat-header .widget-simple-stat-header-title, .events-preview .event-preview-header .event-preview-header-text, .team-score-boxes-title-wrap .team-score-box-title, .team-score-boxes .team-score-box .team-score-box-text, .table.order-overview .table-row-item .product-category, .table-row-header-item .table-row-header-title, .table-row-item .table-text.bold, .table-row-item .table-text-link, .match-stats .match-link, .product-open .product-category-wrap .product-stock, .product-open .product-info-list .product-info-list-item, .product-feature .product-feature-info .product-feature-title, .arc-rate-wrap .arc-rate-stat, .countdown-text-wrap .countdown-text-heading, .bar-progress-info, .bar-progress-text, .xm-tooltip .xm-tooltip-text, .calendar .calendar-header .calendar-header-bottom .calendar-week-day, .promo-banner .promo-banner-info .promo-banner-text, .option-list .option-list-item, .user-dropdown .user-dropdown-header .user-dropdown-header-text, .topic-comment .topic-comment-user .topic-comment-user-text, .profile-user .profile-user-info, .notification-item .notification-item-text, .user-review .user-review-info, .inventory-open-header .inventory-open-header-title, .information-header .information-header-title, .inventory-compare .inventory-compare-title, .contact-info-preview .contact-info-preview-email-wrap .contact-info-preview-email, .shortcode-section .shortcode-section-title, .shortcode-color .shortcode-color-code, .team-info-wrap .team-info .team-name, .information-rows .information-row .information-row-item .information-row-item-text, .button-social, .dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-title, .dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-value, .mobile-dropdown-item > .mobile-dropdown-item-link, .widget-match-result .widget-match-result-actions .widget-match-result-action, .widget-match-result .widget-match-result-item .match-score, .widget-match-result .widget-match-result-item .match-datetime, .mvp-stats .mvp-stat .mvp-stat-title, .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value, .widget-stat-info-wrap .widget-stat-info .widget-stat-info-title, .events-preview .event-preview-item .event-preview-item-timestamp, .events-preview .event-preview-item .event-preview-item-content .event-preview-item-title, .table-row-item .table-text.bolder, .featured-info .featured-info-text, .arc-stats-wrap .arc-stats-info .arc-stats-stat, .promo-banner .promo-banner-info .promo-banner-pre-title, .forum-category-wrap .forum-category-subcategories .forum-category-subcategory, .forum-post-link, .forum-category-text, .inventory-open-action .inventory-open-row-text, .inventory-open-total .inventory-open-row-text, .information-box .information-box-message, .information-box .information-box-action, .featured-stat-wrap .featured-stat-title, .order-item .order-body .order-body-item .order-body-item-title, .bio-item .bio-item-title, .stats-info-item .stats-info-item-description .stats-info-item-description-title, .contact-item .contact-item-text, .form-box-wrap .tab-form-buttons .tab-form-button, .widget-top-player .top-player-info-wrap .top-player-info .top-player-name, .tweets-preview-widget-item .tweets-prevew-widget-item-user, .comment-preview .comment-preview-title, .poll-widget .poll-widget-title, .stream-preview .stream-preview-streamer .stream-preview-streamer-name, .team-score-boxes .team-score-box .team-points, .medal-list .medal-list-item .medal-list-item-title, .overview-info-wrap .overview-info-item .overview-info-item-text, .table.order-overview .table-row-item .product-name, .post-preview.video.tiny .post-preview-title, .post-preview.video.large .post-preview-overlay .post-preview-overlay-info .post-preview-text, .post-preview.tiny .post-preview-title, .product-open .product-category-wrap .product-category, .product-feature .product-feature-info .product-feature-text, .progress-bar .progress-bar-text, .tab-wrap .tab-header .tab-header-item .tab-header-item-text, .calendar .calendar-header .calendar-header-top .calendar-month-year, .topic-wrap .topic-footer .topic-footer-info .topic-footer-text, .topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-user .topic-comment-quote-user-name, .topic-comment-reply-user .topic-comment-reply-name, .topic-link-item .topic-link-item-title, .user-link-item .user-link-item-title, .activity-item .activity-item-row .activity-item-title, .notification-item.medium .notification-item-text, .reviews-wrap .reviews-header .reviews-header-rating .reviews-header-rating-text, .rating-block .rating-block-title, .contact-info-preview .contact-info-preview-sign .contact-info-preview-sign-text, .shortcode-font .shortcode-font-family, .shortcode-font .shortcode-font-weight, .mobile-menu-item > .mobile-menu-item-link, .product-preview-title, .account-info-wrap .account-info-username, .account-info-wrap .account-info-stats .account-info-stat .account-info-stat-value, .player-preview .player-preview-info .player-preview-nickname, .widget-top-player .top-player-stats .top-player-stat .top-player-stat-title, .live-news-widget .live-news-widget-title-wrap .live-news-widget-title, .widget-slider-items .widget-slider-item .widget-slider-item-title, .widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item .calendar-row-item-day, .post-preview.video .post-preview-title, .post-preview.small .post-preview-title, .forum-category-wrap .forum-category-title, .topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info .topic-scroll-counter, .post-preview.picture.short .post-preview-overlay .post-preview-title, .user-avatar-wrap .user-avatar-text, .user-avatar-wrap .user-avatar-decoration .user-avatar-decoration-text, .widget-top-player .top-player-info-wrap .top-player-info .top-player-flag, .stream-start-counter, .account-info-wrap .account-info-stats .account-info-stat .account-info-stat-title, .ticket-wrap .ticket-info .ticket-text, .table-row-item .table-text, .match-stats .match-time, .calendar .calendar-body .calendar-day .event-list .event-item, .text-heading, .post-open .post-open-subtitle, .post-open .feature-list .feature-list-item .feature-title, .post-open .review-wrap .review-score-wrap .review-score-number, .post-open .review-wrap .review-score-wrap .review-score-text, .section-title-wrap .section-title, .shortcode-font .shortcode-font-demo {
  display: block;
  font-family: "Exo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1em
}

.form-box-heading .form-box-heading-title {
  font-size: 5.375em
}

.error-display .error-title, .streamer-overview .streamer-info .streamer-info-name, .contact-section .contact-section-title, .sponsors-title, .order-result-banner .order-result-banner-title {
  font-size: 3.25em
}

.banner-title, .post-preview.huge .post-preview-title, .post-open .post-open-title.big {
  font-size: 3.125em;
  line-height: 1.04em
}

.banner .banner-title {
  font-size: 2.5em
}

.post-open .post-open-title {
  font-size: 2.5em;
  line-height: 1.15em
}

.post-preview.picture.big .post-preview-overlay .post-preview-title, .post-preview.large .post-preview-title, .post-open .post-open-title.small, .reviews-wrap .reviews-header .reviews-header-title {
  font-size: 2.25em;
  line-height: 1.1666666667em
}

.topic-comment .topic-comment-content .topic-comment-quote:before {
  font-size: 2em
}

.post-preview.big .post-preview-title {
  font-size: 1.875em;
  line-height: 1.1333333333em
}

.stats-info-item .stats-info-item-value, .form-box-heading .form-box-heading-subtitle, .product-open .product-name {
  font-size: 1.75em
}

.post-preview.landscape.big .post-preview-title, .post-preview.medium .post-preview-title, .promo-banner .promo-banner-info .promo-banner-title, .section-slider-bg .section-slider-title {
  font-size: 1.625em;
  line-height: 1.2307692308em
}

.widget-stat-info-wrap .widget-stat-info-number, .countdown-text, .topic-wrap .topic-header .topic-title, .reviews-wrap .reviews-body .reviews-body-title {
  font-size: 1.5em
}

.widget-team-vs .widget-team-vs-item .team-score, .match-stats .match-score {
  font-size: 1.375em
}

.subscribe-section .subscribe-section-title, .sponsor-info .sponsor-info-title, .faq-item .faq-item-trigger .faq-item-title, .widget-medals .widget-medals-info .widget-medals-title, .badge-item .badge-item-title {
  font-size: 1.125em
}

.post-open .post-open-text.bold {
  font-size: 1.125em;
  line-height: 1.6666666667em
}

.post-open-body .wrap {
  font-size: 1.125em;
  line-height: 1.6666666667em;
  padding: 0 300px;
}


.post-open-body .wrap h2 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.post-preview-title, .error-display .error-subtitle, .post-preview.video.no-hover .post-preview-title, .post-comment .post-comment-username, .video-info-slider-items .video-info-slider-item .video-info-slider-title, .topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-username, .profile-user .profile-user-name, .user-review .user-review-title, .order-result-banner .order-result-banner-text {
  font-size: 1em;
  line-height: 1.375em
}

.post-open .quote-text {
  font-size: 1em;
  line-height: 1.75em
}

.product-preview-title, .account-info-wrap .account-info-username, .account-info-wrap .account-info-stats .account-info-stat .account-info-stat-value, .player-preview .player-preview-info .player-preview-nickname, .widget-top-player .top-player-stats .top-player-stat .top-player-stat-title, .live-news-widget .live-news-widget-title-wrap .live-news-widget-title, .widget-slider-items .widget-slider-item .widget-slider-item-title, .widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item .calendar-row-item-day, .post-preview.video .post-preview-title, .post-preview.small .post-preview-title, .forum-category-wrap .forum-category-title, .topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info .topic-scroll-counter {
  font-size: .875em;
  line-height: 1.4285714286em
}

.post-preview.picture.short .post-preview-overlay .post-preview-title {
  font-size: .875em;
  line-height: 1.2857142857em
}

.error-display .error-text, .post-open .post-open-text, .post-comment .post-comment-text {
  font-size: .875em;
  line-height: 1.8571428571em
}

.mobile-menu-item > .mobile-menu-item-link {
  font-size: .8125em
}

.featured-stat-wrap .featured-stat-title, .order-item .order-body .order-body-item .order-body-item-title, .bio-item .bio-item-title, .stats-info-item .stats-info-item-description .stats-info-item-description-title, .contact-item .contact-item-text, .form-box-wrap .tab-form-buttons .tab-form-button, .widget-top-player .top-player-info-wrap .top-player-info .top-player-name, .tweets-preview-widget-item .tweets-prevew-widget-item-user, .comment-preview .comment-preview-title, .poll-widget .poll-widget-title, .stream-preview .stream-preview-streamer .stream-preview-streamer-name, .team-score-boxes .team-score-box .team-points, .medal-list .medal-list-item .medal-list-item-title, .overview-info-wrap .overview-info-item .overview-info-item-text, .table.order-overview .table-row-item .product-name, .post-preview.video.tiny .post-preview-title, .post-preview.video.large .post-preview-overlay .post-preview-overlay-info .post-preview-text, .post-preview.tiny .post-preview-title, .product-open .product-category-wrap .product-category, .product-feature .product-feature-info .product-feature-text, .progress-bar .progress-bar-text, .tab-wrap .tab-header .tab-header-item .tab-header-item-text, .calendar .calendar-header .calendar-header-top .calendar-month-year, .topic-wrap .topic-footer .topic-footer-info .topic-footer-text, .topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-user .topic-comment-quote-user-name, .topic-comment-reply-user .topic-comment-reply-name, .topic-link-item .topic-link-item-title, .user-link-item .user-link-item-title, .activity-item .activity-item-row .activity-item-title, .notification-item.medium .notification-item-text, .reviews-wrap .reviews-header .reviews-header-rating .reviews-header-rating-text, .rating-block .rating-block-title, .contact-info-preview .contact-info-preview-sign .contact-info-preview-sign-text, .shortcode-font .shortcode-font-family, .shortcode-font .shortcode-font-weight {
  font-size: .75em;
  line-height: 1.3333333333em
}

.team-info-wrap .team-info .team-name, .information-rows .information-row .information-row-item .information-row-item-text, .button-social, .dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-title, .dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-value, .mobile-dropdown-item > .mobile-dropdown-item-link, .widget-match-result .widget-match-result-actions .widget-match-result-action, .widget-match-result .widget-match-result-item .match-score, .widget-match-result .widget-match-result-item .match-datetime, .mvp-stats .mvp-stat .mvp-stat-title, .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value, .widget-stat-info-wrap .widget-stat-info .widget-stat-info-title, .events-preview .event-preview-item .event-preview-item-timestamp, .events-preview .event-preview-item .event-preview-item-content .event-preview-item-title, .table-row-item .table-text.bolder, .featured-info .featured-info-text, .arc-stats-wrap .arc-stats-info .arc-stats-stat, .promo-banner .promo-banner-info .promo-banner-pre-title, .forum-category-wrap .forum-category-subcategories .forum-category-subcategory, .forum-post-link, .forum-category-text, .inventory-open-action .inventory-open-row-text, .inventory-open-total .inventory-open-row-text, .information-box .information-box-message, .information-box .information-box-action {
  font-size: .6875em
}

.skill-loot-list .skill-loot-item-info .skill-loot-item-title, .badge-info, .page-navigation .page-navigation-item, .timestamp-tag, .filter-heading .filter-heading-text, .account-info-wrap .account-info-name, .ban-list-wrap .ban-list-title, .character-selection-list .character-selection-list-text, .ticket-wrap .ticket-info .ticket-title, .ticket-wrap .ticket-teams .ticket-teams-text, .ticket-wrap .ticket-buy-button, .order-item .order-header .order-header-item, .sponsor-item .sponsor-item-link, .faq-item .faq-item-footer .faq-item-footer-text, .bubble-ornament .bubble-ornament-info, .bubble-ornament .bubble-ornament-text, .tag-quantity .tag-quantity-text, .button-replay, .decorated-link, .link-text-form, .inventory-bag-preview .items-in-inventory, .inventory-bag-preview .inventory-subtotal, .dropdown-simple-wrap .dp-option-text, .widget-title-wrap .widget-title, .widget-title-wrap .widget-text.bold, .widget-title-wrap .stats-reference .stat-reference .stat-reference-text, .widget-overflow-wrap .widget-overflow-list .widget-overflow-list-text, .widget-match-box-item .widget-match-box-link, .widget-info-box .widget-info-box-item .widget-info-title, .widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value, .widget-simple-stat .widget-simple-stat-header .widget-simple-stat-header-title, .events-preview .event-preview-header .event-preview-header-text, .team-score-boxes-title-wrap .team-score-box-title, .team-score-boxes .team-score-box .team-score-box-text, .table.order-overview .table-row-item .product-category, .table-row-header-item .table-row-header-title, .table-row-item .table-text.bold, .table-row-item .table-text-link, .match-stats .match-link, .product-open .product-category-wrap .product-stock, .product-open .product-info-list .product-info-list-item, .product-feature .product-feature-info .product-feature-title, .arc-rate-wrap .arc-rate-stat, .countdown-text-wrap .countdown-text-heading, .bar-progress-info, .bar-progress-text, .xm-tooltip .xm-tooltip-text, .calendar .calendar-header .calendar-header-bottom .calendar-week-day, .promo-banner .promo-banner-info .promo-banner-text, .option-list .option-list-item, .user-dropdown .user-dropdown-header .user-dropdown-header-text, .topic-comment .topic-comment-user .topic-comment-user-text, .profile-user .profile-user-info, .notification-item .notification-item-text, .user-review .user-review-info, .inventory-open-header .inventory-open-header-title, .information-header .information-header-title, .inventory-compare .inventory-compare-title, .contact-info-preview .contact-info-preview-email-wrap .contact-info-preview-email, .shortcode-section .shortcode-section-title, .shortcode-color .shortcode-color-code {
  font-size: .625em
}

.account-info-wrap .account-info-stats .account-info-stat .account-info-stat-title, .ticket-wrap .ticket-info .ticket-text, .table-row-item .table-text, .match-stats .match-time, .calendar .calendar-body .calendar-day .event-list .event-item {
  font-size: .5625em
}

.user-avatar-wrap .user-avatar-text, .user-avatar-wrap .user-avatar-decoration .user-avatar-decoration-text, .widget-top-player .top-player-info-wrap .top-player-info .top-player-flag, .stream-start-counter {
  font-size: .5em
}

.post-preview-title {
  color: var(--color-text-primary)
}

.product-preview-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.layout-content-1 {
  padding: 60px 0 100px;
  grid-template-areas:'body sidebar';
  position: relative
}

.layout-content-1.search-pad {
  padding-top: 100px
}

.layout-content-1 .layout-body {
  grid-area: body
}

.layout-content-1 .layout-sidebar {
  grid-area: sidebar
}

.layout-content-2 {
  padding: 60px 0;
  grid-template-areas:'sidebar1 body sidebar2';
  position: relative
}

.layout-content-2 .layout-sidebar1 {
  grid-area: sidebar1
}

.layout-content-2 .layout-body {
  grid-area: body
}

.layout-content-2 .layout-sidebar2 {
  grid-area: sidebar2
}

.layout-content-3 {
  padding: 60px 0;
  grid-template-areas:'body1 body2 body3';
  justify-content: center
}

.layout-content-3 .layout-body1 {
  grid-area: body1
}

.layout-content-3 .layout-body2 {
  grid-area: body2
}

.layout-content-3 .layout-body3 {
  grid-area: body3
}

.layout-content-4 {
  padding: 60px 0 100px;
  grid-template-areas:'sidebar body'
}

.layout-content-4 .layout-body {
  grid-area: body
}

.layout-content-4 .layout-sidebar {
  grid-area: sidebar
}

.layout-content-4.v2 {
  padding: 0
}

.layout-content-5 {
  padding-top: 60px;
  grid-template-areas:'sidebar body'
}

.layout-content-5 .layout-body {
  grid-area: body
}

.layout-content-5 .layout-sidebar {
  grid-area: sidebar
}

.layout-content-full {
  padding: 60px 0 100px
}

.layout-content-full.v2 {
  padding: 60px 0 0
}

.layout-item, .layout-item-1-1-1, .layout-item-1-1-1_2, .layout-item-1-2-1, .layout-item-1-3, .layout-item-1-2, .layout-item-2-1, .layout-item-3-1 {
  display: grid;
  grid-gap: 30px;
  align-content: flex-start
}

.layout-item.centered, .layout-item-1-1-1.centered, .layout-item-1-1-1_2.centered, .layout-item-1-2-1.centered, .layout-item-1-3.centered, .layout-item-1-2.centered, .layout-item-2-1.centered, .layout-item-3-1.centered {
  justify-content: center
}

.layout-item.no-padding-bottom, .layout-item-1-1-1.no-padding-bottom, .layout-item-1-1-1_2.no-padding-bottom, .layout-item-1-2-1.no-padding-bottom, .layout-item-1-3.no-padding-bottom, .layout-item-1-2.no-padding-bottom, .layout-item-2-1.no-padding-bottom, .layout-item-3-1.no-padding-bottom {
  padding-bottom: 0
}

.layout-item.padded-bottom, .layout-item-1-1-1.padded-bottom, .layout-item-1-1-1_2.padded-bottom, .layout-item-1-2-1.padded-bottom, .layout-item-1-3.padded-bottom, .layout-item-1-2.padded-bottom, .layout-item-2-1.padded-bottom, .layout-item-3-1.padded-bottom {
  padding-bottom: 100px
}

.layout-item.padded, .layout-item-1-1-1.padded, .layout-item-1-1-1_2.padded, .layout-item-1-2-1.padded, .layout-item-1-3.padded, .layout-item-1-2.padded, .layout-item-2-1.padded, .layout-item-3-1.padded {
  padding-top: 30px
}

.layout-item.padded-mid, .layout-item-1-1-1.padded-mid, .layout-item-1-1-1_2.padded-mid, .layout-item-1-2-1.padded-mid, .layout-item-1-3.padded-mid, .layout-item-1-2.padded-mid, .layout-item-2-1.padded-mid, .layout-item-3-1.padded-mid {
  padding-top: 45px
}

.layout-item.padded-big, .layout-item-1-1-1.padded-big, .layout-item-1-1-1_2.padded-big, .layout-item-1-2-1.padded-big, .layout-item-1-3.padded-big, .layout-item-1-2.padded-big, .layout-item-2-1.padded-big, .layout-item-3-1.padded-big {
  padding-top: 60px
}

.layout-item.padded-large, .layout-item-1-1-1.padded-large, .layout-item-1-1-1_2.padded-large, .layout-item-1-2-1.padded-large, .layout-item-1-3.padded-large, .layout-item-1-2.padded-large, .layout-item-2-1.padded-large, .layout-item-3-1.padded-large {
  padding: 80px 0
}

.layout-item.padded-larger, .layout-item-1-1-1.padded-larger, .layout-item-1-1-1_2.padded-larger, .layout-item-1-2-1.padded-larger, .layout-item-1-3.padded-larger, .layout-item-1-2.padded-larger, .layout-item-2-1.padded-larger, .layout-item-3-1.padded-larger {
  padding: 100px 0
}

.layout-item.gutter-medium, .layout-item-1-1-1.gutter-medium, .layout-item-1-1-1_2.gutter-medium, .layout-item-1-2-1.gutter-medium, .layout-item-1-3.gutter-medium, .layout-item-1-2.gutter-medium, .layout-item-2-1.gutter-medium, .layout-item-3-1.gutter-medium {
  grid-gap: 40px
}

.layout-item.gutter-big, .layout-item-1-1-1.gutter-big, .layout-item-1-1-1_2.gutter-big, .layout-item-1-2-1.gutter-big, .layout-item-1-3.gutter-big, .layout-item-1-2.gutter-big, .layout-item-2-1.gutter-big, .layout-item-3-1.gutter-big {
  grid-gap: 60px
}

.layout-item.gutter-large, .layout-item-1-1-1.gutter-large, .layout-item-1-1-1_2.gutter-large, .layout-item-1-2-1.gutter-large, .layout-item-1-3.gutter-large, .layout-item-1-2.gutter-large, .layout-item-2-1.gutter-large, .layout-item-3-1.gutter-large {
  grid-gap: 80px
}

.layout-item.gutter-larger, .layout-item-1-1-1.gutter-larger, .layout-item-1-1-1_2.gutter-larger, .layout-item-1-2-1.gutter-larger, .layout-item-1-3.gutter-larger, .layout-item-1-2.gutter-larger, .layout-item-2-1.gutter-larger, .layout-item-3-1.gutter-larger {
  grid-gap: 100px
}

.layout-item.own-grid, .layout-item-1-1-1.own-grid, .layout-item-1-1-1_2.own-grid, .layout-item-1-2-1.own-grid, .layout-item-1-3.own-grid, .layout-item-1-2.own-grid, .layout-item-2-1.own-grid, .layout-item-3-1.own-grid {
  display: block
}

.layout-item-1-1-1 {
  grid-template-columns:repeat(3, 270px)
}

.layout-item-1-1-1_2 {
  grid-template-columns:repeat(3, 370px)
}

.layout-item-1-2-1 {
  grid-template-columns:270px 570px 270px
}

.layout-item-2-1 {
  grid-template-columns:570px 270px
}

.layout-item-1-2 {
  grid-template-columns:270px 570px
}

.layout-item-3-1 {
  grid-template-columns:870px 270px
}

.layout-item-1-3 {
  grid-template-columns:270px 870px
}

@media screen and (max-width: 1260px) {
  .layout-content-1 {
    grid-template-columns:100%;
    grid-template-areas:'body'
 'sidebar'
  }

  .layout-content-1.search-pad {
    padding-top: 100px
  }

  .layout-content-1 .page-navigation {
    justify-content: center;
    margin-bottom: 40px
  }

  .layout-content-2 {
    grid-template-columns:870px;
    justify-content: center;
    grid-template-areas:'body'
 'sidebar1'
 'sidebar2'
  }

  .layout-content-3 {
    grid-template-areas:'body1 body2'
 'body3 body3'
  }

  .layout-content-4 {
    grid-template-areas:'sidebar'
 'body';
    grid-template-columns:100%
  }

  .layout-content-4 .layout-sidebar {
    display: block
  }

  .layout-content-5 {
    display: block
  }

  .layout-item-1-1-1_2 {
    grid-template-columns:repeat(2, 370px)
  }

  .layout-sidebar, .layout-sidebar2 {
    display: none
  }

  .layout-sidebar1 .post-preview-showcase {
    grid-template-columns:repeat(3, 270px)
  }
}

@media screen and (max-width: 960px) {
  .layout-content-2, .layout-item, .layout-item-1-1-1, .layout-item-2-1, .layout-item-3-1 {
    grid-template-columns:100%
  }

  .layout-content-2.load-more-wrap, .layout-item.load-more-wrap, .layout-item-1-1-1.load-more-wrap, .layout-item-2-1.load-more-wrap, .layout-item-3-1.load-more-wrap {
    grid-template-columns:auto
  }

  .layout-sidebar1 .post-preview-showcase {
    grid-template-columns:100%
  }

  .layout-content-3 {
    grid-template-areas:'body1'
 'body2'
 'body3'
  }

  .layout-item-1-1-1_2 {
    grid-template-columns:370px
  }
}

@media screen and (max-width: 480px) {
  .layout-item-1-1-1_2 {
    grid-template-columns:100%
  }
}

.grid-limit {
  max-width: 1170px;
  width: 95%;
  margin: 0 auto
}

.grid3-1col, .grid2-2col, .grid2-1col, .grid-6col_1, .grid-5col_1, .grid-4col, .grid-4col_1, .grid-3col, .grid-3col_1, .grid-2col, .grid-2col_1, .grid-2col_3, .grid-1col, .grid-1col_1, .grid-1col_2, .grid-1col_3, .grid1col-2col {
  display: grid;
  grid-gap: 30px
}

.grid3-1col.centered, .grid2-2col.centered, .grid2-1col.centered, .grid-6col_1.centered, .grid-5col_1.centered, .grid-4col.centered, .grid-4col_1.centered, .grid-3col.centered, .grid-3col_1.centered, .grid-2col.centered, .grid-2col_1.centered, .grid-2col_3.centered, .grid-1col.centered, .grid-1col_1.centered, .grid-1col_2.centered, .grid-1col_3.centered, .grid1col-2col.centered {
  justify-content: center
}

.grid3-1col.gutter-mid, .grid2-2col.gutter-mid, .grid2-1col.gutter-mid, .grid-6col_1.gutter-mid, .grid-5col_1.gutter-mid, .grid-4col.gutter-mid, .grid-4col_1.gutter-mid, .grid-3col.gutter-mid, .grid-3col_1.gutter-mid, .grid-2col.gutter-mid, .grid-2col_1.gutter-mid, .grid-2col_3.gutter-mid, .grid-1col.gutter-mid, .grid-1col_1.gutter-mid, .grid-1col_2.gutter-mid, .grid-1col_3.gutter-mid, .grid1col-2col.gutter-mid {
  grid-row-gap: 40px
}

.grid3-1col.gutter-small, .grid2-2col.gutter-small, .grid2-1col.gutter-small, .grid-6col_1.gutter-small, .grid-5col_1.gutter-small, .grid-4col.gutter-small, .grid-4col_1.gutter-small, .grid-3col.gutter-small, .grid-3col_1.gutter-small, .grid-2col.gutter-small, .grid-2col_1.gutter-small, .grid-2col_3.gutter-small, .grid-1col.gutter-small, .grid-1col_1.gutter-small, .grid-1col_2.gutter-small, .grid-1col_3.gutter-small, .grid1col-2col.gutter-small {
  grid-row-gap: 12px
}

.grid3-1col.gutter-medium, .grid2-2col.gutter-medium, .grid2-1col.gutter-medium, .grid-6col_1.gutter-medium, .grid-5col_1.gutter-medium, .grid-4col.gutter-medium, .grid-4col_1.gutter-medium, .grid-3col.gutter-medium, .grid-3col_1.gutter-medium, .grid-2col.gutter-medium, .grid-2col_1.gutter-medium, .grid-2col_3.gutter-medium, .grid-1col.gutter-medium, .grid-1col_1.gutter-medium, .grid-1col_2.gutter-medium, .grid-1col_3.gutter-medium, .grid1col-2col.gutter-medium {
  grid-row-gap: 20px
}

.grid3-1col.gutter-big, .grid2-2col.gutter-big, .grid2-1col.gutter-big, .grid-6col_1.gutter-big, .grid-5col_1.gutter-big, .grid-4col.gutter-big, .grid-4col_1.gutter-big, .grid-3col.gutter-big, .grid-3col_1.gutter-big, .grid-2col.gutter-big, .grid-2col_1.gutter-big, .grid-2col_3.gutter-big, .grid-1col.gutter-big, .grid-1col_1.gutter-big, .grid-1col_2.gutter-big, .grid-1col_3.gutter-big, .grid1col-2col.gutter-big {
  grid-row-gap: 60px
}

.grid3-1col.gutter-large, .grid2-2col.gutter-large, .grid2-1col.gutter-large, .grid-6col_1.gutter-large, .grid-5col_1.gutter-large, .grid-4col.gutter-large, .grid-4col_1.gutter-large, .grid-3col.gutter-large, .grid-3col_1.gutter-large, .grid-2col.gutter-large, .grid-2col_1.gutter-large, .grid-2col_3.gutter-large, .grid-1col.gutter-large, .grid-1col_1.gutter-large, .grid-1col_2.gutter-large, .grid-1col_3.gutter-large, .grid1col-2col.gutter-large {
  grid-row-gap: 80px
}

.grid3-1col.no-gutter, .grid2-2col.no-gutter, .grid2-1col.no-gutter, .grid-6col_1.no-gutter, .grid-5col_1.no-gutter, .grid-4col.no-gutter, .grid-4col_1.no-gutter, .grid-3col.no-gutter, .grid-3col_1.no-gutter, .grid-2col.no-gutter, .grid-2col_1.no-gutter, .grid-2col_3.no-gutter, .grid-1col.no-gutter, .grid-1col_1.no-gutter, .grid-1col_2.no-gutter, .grid-1col_3.no-gutter, .grid1col-2col.no-gutter {
  grid-gap: 0
}

.grid1col-2col {
  grid-template-columns:270px 570px
}

.grid3-1col {
  grid-template-columns:870px
}

.grid2-2col {
  grid-template-columns:repeat(2, 570px)
}

.grid2-1col {
  grid-template-columns:570px
}

.grid-6col_1 {
  grid-template-columns:repeat(6, 170px)
}

.grid-5col_1 {
  grid-template-columns:repeat(5, 170px)
}

.grid-4col_1 {
  grid-template-columns:repeat(4, 170px)
}

.grid-3col_1 {
  grid-template-columns:repeat(3, 170px)
}

.grid-2col_1 {
  grid-template-columns:repeat(2, 170px)
}

.grid-1col_1 {
  grid-template-columns:170px
}

.grid-4col {
  grid-template-columns:repeat(4, 270px)
}

.grid-3col {
  grid-template-columns:repeat(3, 270px)
}

.grid-2col {
  grid-template-columns:repeat(2, 270px)
}

.grid-2col_3 {
  grid-template-columns:repeat(2, 420px)
}

.grid-1col_3 {
  grid-template-columns:420px
}

.grid-1col_2 {
  grid-template-columns:300px
}

.grid-1col {
  grid-template-columns:270px
}

@media screen and (max-width: 1260px) {
  .grid-4col {
    grid-template-columns:repeat(3, 270px)
  }

  .grid2-2col {
    grid-template-columns:570px
  }

  .grid2-2col.full {
    grid-template-columns:100%
  }

  .grid-6col_1, .grid-5col_1 {
    grid-template-columns:repeat(4, 170px)
  }
}

@media screen and (max-width: 960px) {
  .grid-4col, .grid-3col {
    grid-template-columns:repeat(2, 270px)
  }

  .grid-2col_3 {
    grid-template-columns:420px
  }

  .grid3-1col, .grid1col-2col {
    grid-template-columns:100%
  }

  .grid-6col_1, .grid-5col_1, .grid-4col_1 {
    grid-template-columns:repeat(3, 170px)
  }
}

@media screen and (max-width: 680px) {
  .grid-4col, .grid-3col, .grid-2col {
    grid-template-columns:270px
  }

  .grid2-2col, .grid2-1col {
    grid-template-columns:100%
  }

  .grid-6col_1, .grid-5col_1, .grid-4col_1, .grid-3col_1 {
    grid-template-columns:repeat(2, 170px)
  }
}

@media screen and (max-width: 480px) {
  .grid-1col_3, .grid-2col_3, .grid-1col_2 {
    grid-template-columns:100%
  }

  .grid-6col_1, .grid-5col_1, .grid-4col_1, .grid-3col_1, .grid-2col_1 {
    grid-template-columns:170px
  }
}

@font-face {
  font-family: "simple-line-icons";
  src: url("../simple-line-icons/Simple-Line-Icons.eot?v=2.4.0");
  src: url("../simple-line-icons/Simple-Line-Icons.eot?v=2.4.0#iefix") format("embedded-opentype"), url("../simple-line-icons/Simple-Line-Icons.woff2?v=2.4.0") format("woff2"), url("../simple-line-icons/Simple-Line-Icons.ttf?v=2.4.0") format("truetype"), url("../simple-line-icons/Simple-Line-Icons.woff?v=2.4.0") format("woff"), url("../simple-line-icons/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons") format("svg");
  font-weight: normal;
  font-style: normal
}

.icon-user, .icon-people, .icon-user-female, .icon-user-follow, .icon-user-following, .icon-user-unfollow, .icon-login, .icon-logout, .icon-emotsmile, .icon-phone, .icon-call-end, .icon-call-in, .icon-call-out, .icon-map, .icon-location-pin, .icon-direction, .icon-directions, .icon-compass, .icon-layers, .icon-menu, .icon-list, .icon-options-vertical, .icon-options, .icon-arrow-down, .icon-arrow-left, .icon-arrow-right, .icon-arrow-up, .icon-arrow-up-circle, .icon-arrow-left-circle, .icon-arrow-right-circle, .icon-arrow-down-circle, .icon-check, .icon-clock, .icon-plus, .icon-minus, .icon-close, .icon-event, .icon-exclamation, .icon-organization, .icon-trophy, .icon-screen-smartphone, .icon-screen-desktop, .icon-plane, .icon-notebook, .icon-mustache, .icon-mouse, .icon-magnet, .icon-energy, .icon-disc, .icon-cursor, .icon-cursor-move, .icon-crop, .icon-chemistry, .icon-speedometer, .icon-shield, .icon-screen-tablet, .icon-magic-wand, .icon-hourglass, .icon-graduation, .icon-ghost, .icon-game-controller, .icon-fire, .icon-eyeglass, .icon-envelope-open, .icon-envelope-letter, .icon-bell, .icon-badge, .icon-anchor, .icon-wallet, .icon-vector, .icon-speech, .icon-puzzle, .icon-printer, .icon-present, .icon-playlist, .icon-pin, .icon-picture, .icon-handbag, .icon-globe-alt, .icon-globe, .icon-folder-alt, .icon-folder, .icon-film, .icon-feed, .icon-drop, .icon-drawer, .icon-docs, .icon-doc, .icon-diamond, .icon-cup, .icon-calculator, .icon-bubbles, .icon-briefcase, .icon-book-open, .icon-basket-loaded, .icon-basket, .icon-bag, .icon-action-undo, .icon-action-redo, .icon-wrench, .icon-umbrella, .icon-trash, .icon-tag, .icon-support, .icon-frame, .icon-size-fullscreen, .icon-size-actual, .icon-shuffle, .icon-share-alt, .icon-share, .icon-rocket, .icon-question, .icon-pie-chart, .icon-pencil, .icon-note, .icon-loop, .icon-home, .icon-grid, .icon-graph, .icon-microphone, .icon-music-tone-alt, .icon-music-tone, .icon-earphones-alt, .icon-earphones, .icon-equalizer, .icon-like, .icon-dislike, .icon-control-start, .icon-control-rewind, .icon-control-play, .icon-control-pause, .icon-control-forward, .icon-control-end, .icon-volume-1, .icon-volume-2, .icon-volume-off, .icon-calendar, .icon-bulb, .icon-chart, .icon-ban, .icon-bubble, .icon-camrecorder, .icon-camera, .icon-cloud-download, .icon-cloud-upload, .icon-envelope, .icon-eye, .icon-flag, .icon-heart, .icon-info, .icon-key, .icon-link, .icon-lock, .icon-lock-open, .icon-magnifier, .icon-magnifier-add, .icon-magnifier-remove, .icon-paper-clip, .icon-paper-plane, .icon-power, .icon-refresh, .icon-reload, .icon-settings, .icon-star, .icon-symbol-female, .icon-symbol-male, .icon-target, .icon-credit-card, .icon-paypal, .icon-social-tumblr, .icon-social-twitter, .icon-social-facebook, .icon-social-instagram, .icon-social-linkedin, .icon-social-pinterest, .icon-social-github, .icon-social-google, .icon-social-reddit, .icon-social-skype, .icon-social-dribbble, .icon-social-behance, .icon-social-foursqare, .icon-social-soundcloud, .icon-social-spotify, .icon-social-stumbleupon, .icon-social-youtube, .icon-social-dropbox, .icon-social-vkontakte, .icon-social-steam {
  font-family: "simple-line-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-user:before {
  content: "\e005"
}

.icon-people:before {
  content: "\e001"
}

.icon-user-female:before {
  content: "\e000"
}

.icon-user-follow:before {
  content: "\e002"
}

.icon-user-following:before {
  content: "\e003"
}

.icon-user-unfollow:before {
  content: "\e004"
}

.icon-login:before {
  content: "\e066"
}

.icon-logout:before {
  content: "\e065"
}

.icon-emotsmile:before {
  content: "\e021"
}

.icon-phone:before {
  content: "\e600"
}

.icon-call-end:before {
  content: "\e048"
}

.icon-call-in:before {
  content: "\e047"
}

.icon-call-out:before {
  content: "\e046"
}

.icon-map:before {
  content: "\e033"
}

.icon-location-pin:before {
  content: "\e096"
}

.icon-direction:before {
  content: "\e042"
}

.icon-directions:before {
  content: "\e041"
}

.icon-compass:before {
  content: "\e045"
}

.icon-layers:before {
  content: "\e034"
}

.icon-menu:before {
  content: "\e601"
}

.icon-list:before {
  content: "\e067"
}

.icon-options-vertical:before {
  content: "\e602"
}

.icon-options:before {
  content: "\e603"
}

.icon-arrow-down:before {
  content: "\e604"
}

.icon-arrow-left:before {
  content: "\e605"
}

.icon-arrow-right:before {
  content: "\e606"
}

.icon-arrow-up:before {
  content: "\e607"
}

.icon-arrow-up-circle:before {
  content: "\e078"
}

.icon-arrow-left-circle:before {
  content: "\e07a"
}

.icon-arrow-right-circle:before {
  content: "\e079"
}

.icon-arrow-down-circle:before {
  content: "\e07b"
}

.icon-check:before {
  content: "\e080"
}

.icon-clock:before {
  content: "\e081"
}

.icon-plus:before {
  content: "\e095"
}

.icon-minus:before {
  content: "\e615"
}

.icon-close:before {
  content: "\e082"
}

.icon-event:before {
  content: "\e619"
}

.icon-exclamation:before {
  content: "\e617"
}

.icon-organization:before {
  content: "\e616"
}

.icon-trophy:before {
  content: "\e006"
}

.icon-screen-smartphone:before {
  content: "\e010"
}

.icon-screen-desktop:before {
  content: "\e011"
}

.icon-plane:before {
  content: "\e012"
}

.icon-notebook:before {
  content: "\e013"
}

.icon-mustache:before {
  content: "\e014"
}

.icon-mouse:before {
  content: "\e015"
}

.icon-magnet:before {
  content: "\e016"
}

.icon-energy:before {
  content: "\e020"
}

.icon-disc:before {
  content: "\e022"
}

.icon-cursor:before {
  content: "\e06e"
}

.icon-cursor-move:before {
  content: "\e023"
}

.icon-crop:before {
  content: "\e024"
}

.icon-chemistry:before {
  content: "\e026"
}

.icon-speedometer:before {
  content: "\e007"
}

.icon-shield:before {
  content: "\e00e"
}

.icon-screen-tablet:before {
  content: "\e00f"
}

.icon-magic-wand:before {
  content: "\e017"
}

.icon-hourglass:before {
  content: "\e018"
}

.icon-graduation:before {
  content: "\e019"
}

.icon-ghost:before {
  content: "\e01a"
}

.icon-game-controller:before {
  content: "\e01b"
}

.icon-fire:before {
  content: "\e01c"
}

.icon-eyeglass:before {
  content: "\e01d"
}

.icon-envelope-open:before {
  content: "\e01e"
}

.icon-envelope-letter:before {
  content: "\e01f"
}

.icon-bell:before {
  content: "\e027"
}

.icon-badge:before {
  content: "\e028"
}

.icon-anchor:before {
  content: "\e029"
}

.icon-wallet:before {
  content: "\e02a"
}

.icon-vector:before {
  content: "\e02b"
}

.icon-speech:before {
  content: "\e02c"
}

.icon-puzzle:before {
  content: "\e02d"
}

.icon-printer:before {
  content: "\e02e"
}

.icon-present:before {
  content: "\e02f"
}

.icon-playlist:before {
  content: "\e030"
}

.icon-pin:before {
  content: "\e031"
}

.icon-picture:before {
  content: "\e032"
}

.icon-handbag:before {
  content: "\e035"
}

.icon-globe-alt:before {
  content: "\e036"
}

.icon-globe:before {
  content: "\e037"
}

.icon-folder-alt:before {
  content: "\e039"
}

.icon-folder:before {
  content: "\e089"
}

.icon-film:before {
  content: "\e03a"
}

.icon-feed:before {
  content: "\e03b"
}

.icon-drop:before {
  content: "\e03e"
}

.icon-drawer:before {
  content: "\e03f"
}

.icon-docs:before {
  content: "\e040"
}

.icon-doc:before {
  content: "\e085"
}

.icon-diamond:before {
  content: "\e043"
}

.icon-cup:before {
  content: "\e044"
}

.icon-calculator:before {
  content: "\e049"
}

.icon-bubbles:before {
  content: "\e04a"
}

.icon-briefcase:before {
  content: "\e04b"
}

.icon-book-open:before {
  content: "\e04c"
}

.icon-basket-loaded:before {
  content: "\e04d"
}

.icon-basket:before {
  content: "\e04e"
}

.icon-bag:before {
  content: "\e04f"
}

.icon-action-undo:before {
  content: "\e050"
}

.icon-action-redo:before {
  content: "\e051"
}

.icon-wrench:before {
  content: "\e052"
}

.icon-umbrella:before {
  content: "\e053"
}

.icon-trash:before {
  content: "\e054"
}

.icon-tag:before {
  content: "\e055"
}

.icon-support:before {
  content: "\e056"
}

.icon-frame:before {
  content: "\e038"
}

.icon-size-fullscreen:before {
  content: "\e057"
}

.icon-size-actual:before {
  content: "\e058"
}

.icon-shuffle:before {
  content: "\e059"
}

.icon-share-alt:before {
  content: "\e05a"
}

.icon-share:before {
  content: "\e05b"
}

.icon-rocket:before {
  content: "\e05c"
}

.icon-question:before {
  content: "\e05d"
}

.icon-pie-chart:before {
  content: "\e05e"
}

.icon-pencil:before {
  content: "\e05f"
}

.icon-note:before {
  content: "\e060"
}

.icon-loop:before {
  content: "\e064"
}

.icon-home:before {
  content: "\e069"
}

.icon-grid:before {
  content: "\e06a"
}

.icon-graph:before {
  content: "\e06b"
}

.icon-microphone:before {
  content: "\e063"
}

.icon-music-tone-alt:before {
  content: "\e061"
}

.icon-music-tone:before {
  content: "\e062"
}

.icon-earphones-alt:before {
  content: "\e03c"
}

.icon-earphones:before {
  content: "\e03d"
}

.icon-equalizer:before {
  content: "\e06c"
}

.icon-like:before {
  content: "\e068"
}

.icon-dislike:before {
  content: "\e06d"
}

.icon-control-start:before {
  content: "\e06f"
}

.icon-control-rewind:before {
  content: "\e070"
}

.icon-control-play:before {
  content: "\e071"
}

.icon-control-pause:before {
  content: "\e072"
}

.icon-control-forward:before {
  content: "\e073"
}

.icon-control-end:before {
  content: "\e074"
}

.icon-volume-1:before {
  content: "\e09f"
}

.icon-volume-2:before {
  content: "\e0a0"
}

.icon-volume-off:before {
  content: "\e0a1"
}

.icon-calendar:before {
  content: "\e075"
}

.icon-bulb:before {
  content: "\e076"
}

.icon-chart:before {
  content: "\e077"
}

.icon-ban:before {
  content: "\e07c"
}

.icon-bubble:before {
  content: "\e07d"
}

.icon-camrecorder:before {
  content: "\e07e"
}

.icon-camera:before {
  content: "\e07f"
}

.icon-cloud-download:before {
  content: "\e083"
}

.icon-cloud-upload:before {
  content: "\e084"
}

.icon-envelope:before {
  content: "\e086"
}

.icon-eye:before {
  content: "\e087"
}

.icon-flag:before {
  content: "\e088"
}

.icon-heart:before {
  content: "\e08a"
}

.icon-info:before {
  content: "\e08b"
}

.icon-key:before {
  content: "\e08c"
}

.icon-link:before {
  content: "\e08d"
}

.icon-lock:before {
  content: "\e08e"
}

.icon-lock-open:before {
  content: "\e08f"
}

.icon-magnifier:before {
  content: "\e090"
}

.icon-magnifier-add:before {
  content: "\e091"
}

.icon-magnifier-remove:before {
  content: "\e092"
}

.icon-paper-clip:before {
  content: "\e093"
}

.icon-paper-plane:before {
  content: "\e094"
}

.icon-power:before {
  content: "\e097"
}

.icon-refresh:before {
  content: "\e098"
}

.icon-reload:before {
  content: "\e099"
}

.icon-settings:before {
  content: "\e09a"
}

.icon-star:before {
  content: "\e09b"
}

.icon-symbol-female:before {
  content: "\e09c"
}

.icon-symbol-male:before {
  content: "\e09d"
}

.icon-target:before {
  content: "\e09e"
}

.icon-credit-card:before {
  content: "\e025"
}

.icon-paypal:before {
  content: "\e608"
}

.icon-social-tumblr:before {
  content: "\e00a"
}

.icon-social-twitter:before {
  content: "\e009"
}

.icon-social-facebook:before {
  content: "\e00b"
}

.icon-social-instagram:before {
  content: "\e609"
}

.icon-social-linkedin:before {
  content: "\e60a"
}

.icon-social-pinterest:before {
  content: "\e60b"
}

.icon-social-github:before {
  content: "\e60c"
}

.icon-social-google:before {
  content: "\e60d"
}

.icon-social-reddit:before {
  content: "\e60e"
}

.icon-social-skype:before {
  content: "\e60f"
}

.icon-social-dribbble:before {
  content: "\e00d"
}

.icon-social-behance:before {
  content: "\e610"
}

.icon-social-foursqare:before {
  content: "\e611"
}

.icon-social-soundcloud:before {
  content: "\e612"
}

.icon-social-spotify:before {
  content: "\e613"
}

.icon-social-stumbleupon:before {
  content: "\e614"
}

.icon-social-youtube:before {
  content: "\e008"
}

.icon-social-dropbox:before {
  content: "\e00c"
}

.icon-social-vkontakte:before {
  content: "\e618"
}

.icon-social-steam:before {
  content: "\e620"
}

@keyframes translate-from-bottom {
  0% {
    -o-transform: translate(0, 50%);
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    opacity: 0
  }
  100% {
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}

@keyframes translate-from-right {
  0% {
    -o-transform: translate(30%, 0);
    -moz-transform: translate(30%, 0);
    -ms-transform: translate(30%, 0);
    -webkit-transform: translate(30%, 0);
    transform: translate(30%, 0);
    opacity: 0
  }
  100% {
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}

@keyframes spin {
  0% {
    -o-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }
  100% {
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

body {
  background-color: var(--color-surface-base);
  overflow-x: hidden
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-family: "Exo", sans-serif;
  font-weight: 700;
  text-transform: uppercase
}

p {
  color: var(--color-text-secondary);
  font-family: "Roboto", sans-serif;
  font-size: .8125em;
  line-height: 1.6923076923em
}

p.light {
  color: var(--color-text-muted)
}

p.small {
  font-size: .6875em
}

a {
  font-family: "Roboto", sans-serif
}

::selection {
  color: var(--white);
  background-color: var(--gray-950)
}

::-moz-selection {
  color: var(--white);
  background-color: var(--gray-950)
}

.title {
  color: var(--color-text-primary);
  font-family: "Exo", sans-serif;
  font-size: 1em;
  line-height: 1.375em;
  font-weight: 700;
  text-transform: uppercase
}

.user-avatar-wrap {
  position: relative
}

.user-avatar-wrap .user-avatar-text {
  padding: 2px 2px 0;
  background-color: var(--gray-900);
  color: var(--white);
  position: absolute;
  bottom: 6px;
  right: 2px
}

.user-avatar-wrap .user-avatar-text.blue {
  background-color: #107df8
}

.user-avatar-wrap .user-avatar-text.red {
  background-color: var(--brand-500)
}

.user-avatar-wrap .user-avatar-decoration {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-500);
  position: absolute;
  top: -6px;
  right: -6px
}

.user-avatar-wrap .user-avatar-decoration .user-avatar-decoration-text {
  color: var(--white);
  line-height: 16px;
  text-align: center
}

.user-avatar-wrap + .skill-loot-list {
  margin-left: 6px
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%
}

.user-avatar.big {
  width: 100px;
  height: 100px
}

.user-avatar.medium {
  width: 80px;
  height: 80px
}

.user-avatar.small {
  width: 50px;
  height: 50px
}

.user-avatar.smaller {
  width: 34px;
  height: 34px
}

.user-avatar.tiny {
  width: 26px;
  height: 26px
}

.user-avatar.micro {
  width: 20px;
  height: 20px
}

.user-avatar.character {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--gray-900)
}

.user-avatar.character.v2 {
  padding: 0;
  border: 4px solid var(--gray-900);
  border-radius: 6px
}

.user-avatar.character.small {
  width: 30px;
  height: 30px;
  border: 3px solid var(--gray-900)
}

.user-avatar.character.blue {
  border-color: #107df8
}

.user-avatar.character.yellow {
  border-color: #dee807
}

.user-avatar.character.red {
  border-color: var(--brand-500)
}

.skill-loot-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.skill-loot-list.vertical {
  flex-direction: column;
  justify-content: flex-start
}

.skill-loot-list.vertical .skill-loot-item {
  margin-right: 0
}

.skill-loot-list.vertical .skill-loot-item:last-child {
  margin-bottom: 0
}

.skill-loot-list.medium .skill-loot-item {
  margin: 0 10px 0 0
}

.skill-loot-list.medium .skill-loot-item:last-child {
  margin-right: 0
}

.skill-loot-list .skill-loot-item {
  margin: 0 4px 4px 0
}

.skill-loot-list .skill-loot-item:last-child {
  margin-right: 0
}

.skill-loot-list .skill-loot-item-info .skill-loot-item-title {
  color: var(--color-text-primary)
}

.skill-loot-list .skill-loot-item-info .skill-loot-item-text {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em
}

.skill-loot-img {
  width: 20px;
  height: 20px;
  border-radius: 4px
}

.skill-loot-img.small {
  width: 16px;
  height: 16px
}

.skill-loot-img.medium {
  width: 30px;
  height: 30px
}

.hexagon {
  visibility: hidden;
  overflow: hidden;
  -o-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg)
}

.hexagon-wrap {
  width: 44px;
  height: 48px;
  background-color: var(--gray-900)
}

.hexagon-wrap.small {
  width: 28px;
  height: 30px
}

.hexagon-wrap.small .inner-hexagon {
  width: 22px;
  height: 24px;
  top: 3px
}

.hexagon-wrap.team-blue .hexagon-wrap {
  background-color: #107df8
}

.hexagon-wrap.team-yellow .hexagon-wrap {
  background-color: #dee807
}

.hexagon-wrap.light .hexagon-wrap {
  background-color: var(--color-surface-raised)
}

.hexagon-wrap.cyan .hexagon-wrap {
  background-color: var(--cyan-500)
}

.hexagon-wrap.red .hexagon-wrap {
  background-color: var(--brand-500)
}

.hexagon-wrap.blue .hexagon-wrap {
  background-color: var(--blue-500)
}

.hexagon-wrap.violet .hexagon-wrap {
  background-color: var(--violet-500)
}

.hexagon-wrap.gray .hexagon-wrap {
  background-color: var(--gray-300)
}

.hexagon-wrap .inner-hexagon {
  width: 36px;
  height: 40px;
  margin: 0 auto;
  position: relative;
  top: 4px
}

.hexagon-wrap .plus-icon, .hexagon-wrap .tower-icon {
  fill: var(--white);
  position: absolute;
  left: 50%;
  margin-left: -8px
}

.hexagon-wrap .plus-icon {
  top: 12px
}

.hexagon-wrap .tower-icon {
  top: 10px
}

.hexagon-in1, .hexagon-in2, .hexagon-area {
  width: 100%;
  height: 100%;
  -o-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg)
}

.hexagon-in1 {
  overflow: hidden
}

.hexagon-in2 {
  visibility: visible
}

.avatar-badge {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--gray-900);
  position: relative
}

.avatar-badge.team-blue {
  background-color: #107df8
}

.avatar-badge.team-yellow {
  background-color: #dee807
}

.avatar-badge.red {
  background-color: var(--brand-500)
}

.avatar-badge .check-icon, .avatar-badge .cross-cb-icon {
  fill: var(--white);
  position: absolute;
  left: 50%;
  margin-left: -4px
}

.avatar-badge .cross-cb-icon {
  width: 8px;
  height: 8px;
  top: 4px
}

.avatar-badge .check-icon {
  width: 8px;
  height: 7px;
  top: 5px
}

.play-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid var(--cyan-500);
  background-color: rgba(0, 0, 0, 0.5);
  padding: 9px 0 0 11px
}

.play-button.tiny {
  width: 26px;
  height: 26px;
  border: 3px solid var(--cyan-500);
  padding: 0
}

.play-button.big {
  width: 80px;
  height: 80px;
  border: 8px solid var(--cyan-500);
  padding: 18px 0 0 22px
}

.text-heading {
  color: var(--color-text-primary);
  font-size: .6875em
}

.badge-info {
  color: var(--color-text-primary);
  text-align: center
}

.logo:after {
  content: '';
  display: table;
  clear: both
}

.logo.negative .logo-text .logo-title {
  color: var(--white)
}

.logo.negative .logo-text .logo-info {
  color: var(--color-text-muted)
}

.logo .logo-img {
  float: left;
  width: 52px;
  height: 41px;
  margin-right: 12px
}

.logo .logo-text {
  float: left;
  margin-top: 5px
}

.logo .logo-text .logo-title {
  font-family: "Roboto", sans-serif;
  font-size: 1.375em;
  text-transform: initial;
}

.logo .logo-text .logo-title .highlight {
  color: var(--blue-500);
  font-family: "Exo", sans-serif
}

.logo .logo-text .logo-info {
  font-size: .6875em
}

.line-separator {
  width: 100%;
  height: 1px;
  background-color: var(--gray-300)
}

.line-separator.negative {
  background-color: #383838
}

.line-separator + .post-preview {
  margin-top: 16px
}

.streamer-avatars {
  display: flex;
  flex-flow: row wrap
}

.streamer-avatars .streamer-avatar {
  margin-right: 36px
}

.streamer-avatars .streamer-avatar:last-child {
  margin-right: 0
}

.streamer-avatars.centered {
  justify-content: center;
  margin: 40px 0
}

.streamer-avatar {
  width: 80px;
  height: 89px;
  position: relative
}

.streamer-avatar .pp-hexagon {
  position: absolute;
  top: 0;
  left: 0
}

.streamer-avatar .streamer-avatar-img-wrap {
  width: 80px;
  position: absolute;
  bottom: 13px;
  left: 0;
  text-align: center;
  pointer-events: none
}

.streamer-avatar .streamer-avatar-img {
  display: inline-block
}

.pp-hexagon {
  position: relative
}

.pp-hexagon.active .hexagon-icon.hexagon-border, .pp-hexagon:hover .hexagon-icon.hexagon-border {
  fill: var(--violet-500)
}

.pp-hexagon .hexagon-icon.hexagon-border {
  transition: all .3s ease-in-out
}

.pp-hexagon .hexagon-icon.hexagon-fill {
  position: absolute;
  top: 6px;
  left: 6px
}

.page-navigation {
  display: flex;
  flex-flow: row wrap
}

.page-navigation.spaced {
  margin-top: 60px
}

.page-navigation.center {
  justify-content: center
}

.page-navigation.right {
  justify-content: flex-end
}

.page-navigation > * {
  margin-right: 12px
}

.page-navigation > *:last-child {
  margin-right: 0
}

.page-navigation.blue .page-navigation-item.active {
  color: var(--blue-500)
}

.page-navigation.blue .slider-control {
  background-color: var(--blue-500)
}

.page-navigation.red .page-navigation-item.active {
  color: var(--brand-500)
}

.page-navigation.red .slider-control {
  background-color: var(--brand-500)
}

.page-navigation.green .page-navigation-item.active {
  color: var(--green-500)
}

.page-navigation.green .slider-control {
  background-color: var(--green-500)
}

.page-navigation.yellow .page-navigation-item.active {
  color: var(--amber-500)
}

.page-navigation.yellow .slider-control {
  background-color: var(--amber-500)
}

.page-navigation.violet .page-navigation-item.active {
  color: var(--violet-500)
}

.page-navigation.violet .slider-control {
  background-color: var(--violet-500)
}

.page-navigation.cyan .page-navigation-item.active {
  color: var(--cyan-500)
}

.page-navigation.cyan .slider-control {
  background-color: var(--cyan-500)
}

.page-navigation .page-navigation-item {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  line-height: 40px;
  color: var(--color-text-primary);
  text-align: center
}

.timestamp-tag {
  color: var(--white);
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.5)
}

.timestamp-tag.tiny {
  font-size: .5em;
  padding: 6px
}

.bullet-list {
  padding-left: 30px
}

.bullet-list-item {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 30px
}

.bullet-list-item:last-child {
  margin-bottom: 0
}

.bullet-list-item .bullet-list-item-icon {
  margin-right: 12px
}

.bullet-list-item .bullet-list-item-icon .check-icon {
  fill: var(--blue-500);
  position: relative;
  top: 2px
}

.bullet-list-item .bullet-list-item-text {
  font-size: .875em
}

.blur-bg-wrap {
  position: relative;
  overflow: hidden
}

.blur-bg-wrap .blur-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  z-index: 1
}

.blur-bg-wrap .blur-bg-img {
  width: 74%;
  margin: 0 auto;
  position: relative;
  z-index: 9999
}

.text-tag {
  position: relative
}

.text-tag:before, .text-tag:after {
  content: '';
  margin-left: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  background-color: var(--gray-900);
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
  position: relative;
  top: -3px
}

.text-tag:before {
  display: none;
  margin-left: 0;
  margin-right: 8px
}

.text-tag.red {
  color: var(--white);
  background-color: var(--brand-500)
}

.text-tag.live:after {
  display: none
}

.text-tag.live:before {
  display: inline;
  content: 'Live';
  padding: 0 2px;
  background-color: var(--brand-500);
  font-size: .75em;
  font-weight: 800;
  letter-spacing: 0.05em;
  top: -1px
}

.text-tag.live.bottom:before {
  padding: 2px;
  margin: 0;
  position: absolute;
  top: 14px;
  left: 8px
}

.text-tag.hot:after {
  content: 'Hot!';
  border-radius: 200px;
  background-color: var(--cyan-500);
  top: -2px
}

.text-tag.new:after {
  content: 'New';
  border-radius: 200px;
  background-color: var(--blue-500);
  top: -2px
}

.text-tag.author:after {
  content: 'Author'
}

.text-tag.staff:after {
  content: 'Staff'
}

.text-tag.original-poster:after {
  content: 'Original Poster';
  background-color: var(--blue-500)
}

.text-tag.moderator:after {
  content: 'Moderator';
  background-color: var(--violet-500)
}

.review-block {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.filter-heading {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px
}

.filter-heading.multiple-items {
  min-height: 40px;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.filter-heading.no-border {
  border-bottom: none
}

.filter-heading.spaced {
  margin-top: 14px
}

.filter-heading.bottom-spaced {
  margin-bottom: 26px
}

.filter-heading .filter-heading-text {
  color: var(--color-text-primary)
}

.filter-heading .filter-heading-text.red .highlight {
  color: var(--brand-500)
}

.filter-heading .filter-heading-text .highlight {
  color: var(--blue-500)
}

.filter-heading .filter-heading-actions {
  display: flex;
  flex-flow: row wrap
}

.filter-heading .filter-heading-actions .dropdown-simple-wrap {
  margin-right: 40px
}

.filter-heading .filter-heading-actions .dropdown-simple-wrap:last-child {
  margin-right: 0
}

.filter-heading .filter-heading-actions .display-change-actions {
  display: flex;
  flex-flow: row wrap
}

.filter-heading .filter-heading-actions .display-change-actions .display-change-action {
  height: 40px;
  margin-right: 26px;
  padding-top: 10px;
  cursor: pointer
}

.filter-heading .filter-heading-actions .display-change-actions .display-change-action.selected .grid-icon, .filter-heading .filter-heading-actions .display-change-actions .display-change-action.selected .list-icon {
  fill: var(--violet-500)
}

.filter-heading .filter-heading-actions .display-change-actions .display-change-action:last-child {
  margin-right: 0
}

.filter-heading + .post-preview-showcase {
  margin-top: 26px
}

.error-display {
  padding-top: 430px;
  text-align: center;
  position: relative
}

.error-display .error-img {
  width: 391px;
  height: 374px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -132px
}

.error-display .error-title {
  margin-top: 50px;
  color: var(--color-text-primary)
}

.error-display .error-subtitle {
  margin-top: 26px;
  color: var(--color-text-muted);
  line-height: 1em
}

.error-display .error-text {
  width: 570px;
  margin: 46px auto 0
}

.error-display .error-text .highlight {
  color: var(--blue-500);
  font-weight: 500
}

.error-display + .section-actions {
  margin-top: 70px
}

.section-actions {
  display: flex;
  flex-flow: row wrap;
  justify-content: center
}

.section-actions .button {
  width: 220px;
  text-align: center
}

.section-actions .button + .button {
  margin-left: 20px
}

.avatar-change {
  width: 100px;
  height: 100px;
  margin-top: 26px;
  position: relative
}

.avatar-change .avatar-change-action {
  position: absolute;
  top: -6px;
  right: -6px
}

.account-info-wrap .user-avatar {
  display: block;
  margin: 0 auto
}

.account-info-wrap .account-info-username {
  margin-top: 14px;
  color: var(--color-text-primary);
  line-height: 1em;
  text-align: center
}

.account-info-wrap .account-info-name {
  margin-top: 8px;
  color: var(--color-text-muted);
  text-align: center
}

.account-info-wrap .account-info-stats {
  width: 270px;
  margin: 36px auto 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly
}

.account-info-wrap .account-info-stats .account-info-stat {
  text-align: center
}

.account-info-wrap .account-info-stats .account-info-stat .account-info-stat-title {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-weight: 400
}

.account-info-wrap .account-info-stats .account-info-stat .account-info-stat-value {
  color: var(--color-text-primary);
  line-height: 1em
}

.account-info-wrap .dropdown-list {
  margin: 40px auto 0
}

.team-logo {
  width: 56px;
  height: 56px
}

.team-logo.mid {
  width: 45px;
  height: 45px
}

.team-logo.small {
  width: 30px;
  height: 30px
}

.team-logo.medium {
  width: 66px;
  height: 66px
}

.team-logo.big {
  width: 182px;
  height: 182px
}

.team-info-wrap {
  display: flex;
  flex-flow: row wrap;
  position: relative
}

.team-info-wrap.v3 {
  height: 162px
}

.team-info-wrap.v3 .team-logo-wrap {
  width: 190px;
  height: 162px;
  background-color: var(--gray-900);
  position: relative;
  overflow: hidden
}

.team-info-wrap.v3 .team-logo-wrap:before, .team-info-wrap.v3 .team-logo-wrap:after {
  content: '';
  height: 162px;
  position: absolute;
  top: 0;
  -o-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  transform: skew(20deg)
}

.team-info-wrap.v3 .team-logo-wrap:before {
  width: 10px;
  right: 32px;
  background-color: var(--gray-900);
  z-index: 3
}

.team-info-wrap.v3 .team-logo-wrap:after {
  width: 80px;
  right: -35px;
  background-color: var(--color-surface-base);
  z-index: 2
}

.team-info-wrap.v3 .team-logo-wrap .team-logo {
  width: 180px;
  height: 180px;
  position: absolute;
  top: -10px;
  left: -20px;
  z-index: 1
}

.team-info-wrap.v3 .team-info {
  margin: 66px 0 0 78px
}

.team-info-wrap.v3 .team-info .team-name {
  font-size: .75em;
  text-align: right
}

.team-info-wrap.v3 .team-info .team-country {
  margin-top: 6px;
  font-size: .625em;
  text-align: right
}

.team-info-wrap.v3.inverted .team-logo-wrap {
  order: 2
}

.team-info-wrap.v3.inverted .team-logo-wrap:before, .team-info-wrap.v3.inverted .team-logo-wrap:after {
  -o-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  right: auto
}

.team-info-wrap.v3.inverted .team-logo-wrap:before {
  left: 32px
}

.team-info-wrap.v3.inverted .team-logo-wrap:after {
  left: -35px
}

.team-info-wrap.v3.inverted .team-logo-wrap .team-logo {
  left: 28px
}

.team-info-wrap.v3.inverted .team-info {
  order: 1;
  margin: 66px 78px 0 0
}

.team-info-wrap.v3.inverted .team-info .team-name, .team-info-wrap.v3.inverted .team-info .team-country {
  text-align: left
}

.team-info-wrap.v3.blue .team-logo-wrap {
  background-color: #107df8
}

.team-info-wrap.v3.blue .team-logo-wrap:before {
  background-color: #107df8
}

.team-info-wrap.v3.yellow .team-logo-wrap {
  background-color: #dee807
}

.team-info-wrap.v3.yellow .team-logo-wrap:before {
  background-color: #dee807
}

.team-info-wrap.v2 {
  height: 162px
}

.team-info-wrap.v2 .team-logo-wrap {
  order: 2;
  width: 134px;
  height: 162px;
  margin: 0 0 0 40px;
  background-color: var(--gray-900);
  position: relative;
  -o-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  overflow: hidden
}

.team-info-wrap.v2 .team-logo-wrap:before, .team-info-wrap.v2 .team-logo-wrap:after {
  content: '';
  height: 162px;
  position: absolute;
  top: 0
}

.team-info-wrap.v2 .team-logo-wrap:before {
  width: 10px;
  background-color: var(--gray-900);
  left: 0;
  z-index: 2
}

.team-info-wrap.v2 .team-logo-wrap:after {
  width: 4px;
  background-color: var(--color-surface-base);
  left: 10px;
  z-index: 2
}

.team-info-wrap.v2 .team-logo-wrap .team-logo {
  width: 180px;
  height: 180px;
  position: absolute;
  top: -10px;
  left: -14px;
  z-index: 1;
  -o-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg)
}

.team-info-wrap.v2 .team-info {
  margin: 68px 0 0;
  order: 1
}

.team-info-wrap.v2 .team-info .team-name {
  font-size: .75em;
  text-align: right
}

.team-info-wrap.v2 .team-info .team-country {
  margin-top: 6px;
  font-size: .625em;
  text-align: right
}

.team-info-wrap.v2.inverted .team-logo-wrap {
  margin: 0 40px 0 0;
  order: 1;
  -o-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg)
}

.team-info-wrap.v2.inverted .team-logo-wrap:before {
  left: auto;
  right: 0
}

.team-info-wrap.v2.inverted .team-logo-wrap:after {
  left: auto;
  right: 10px
}

.team-info-wrap.v2.inverted .team-logo-wrap .team-logo {
  -o-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -ms-transform: skew(20deg);
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  left: -22px
}

.team-info-wrap.v2.inverted .team-info {
  margin: 68px 0 0;
  order: 2
}

.team-info-wrap.v2.inverted .team-info .team-name, .team-info-wrap.v2.inverted .team-info .team-country {
  text-align: left
}

.team-info-wrap.v2.blue .team-logo-wrap {
  background-color: #107df8
}

.team-info-wrap.v2.blue .team-logo-wrap:before {
  background-color: #107df8
}

.team-info-wrap.v2.yellow .team-logo-wrap {
  background-color: #dee807
}

.team-info-wrap.v2.yellow .team-logo-wrap:before {
  background-color: #dee807
}

.team-info-wrap.inverted {
  justify-content: flex-end
}

.team-info-wrap.inverted .user-avatar-wrap {
  order: 3
}

.team-info-wrap.inverted .user-avatar-wrap + .skill-loot-list {
  margin: 0 6px 0 0
}

.team-info-wrap.inverted .team-logo, .team-info-wrap.inverted .user-avatar, .team-info-wrap.inverted .hexagon, .team-info-wrap.inverted .skill-loot-list {
  order: 2
}

.team-info-wrap.inverted .team-info {
  order: 1;
  margin: 6px 10px 0 0;
  text-align: right
}

.team-info-wrap.inverted.medium .skill-loot-list + .team-info {
  margin: 10px 12px 0 0
}

.team-info-wrap.tiny .team-info .team-name {
  font-size: .5625em
}

.team-info-wrap.centered {
  display: block
}

.team-info-wrap.centered .team-logo {
  display: block;
  margin: 0 auto
}

.team-info-wrap.centered .team-info {
  margin-left: 0
}

.team-info-wrap.centered .team-info .team-name, .team-info-wrap.centered .team-info .team-country {
  text-align: center
}

.team-info-wrap.small .team-info {
  margin-top: 10px
}

.team-info-wrap.mid .hexagon + .team-info {
  margin-left: 16px
}

.team-info-wrap.mid .team-info {
  margin-top: 12px
}

.team-info-wrap.mid .team-info .team-name {
  font-size: .75em
}

.team-info-wrap.mid .team-info .team-country {
  margin-top: 4px;
  font-size: .625em
}

.team-info-wrap.medium .team-info {
  margin-top: 18px
}

.team-info-wrap.medium .team-info .team-name {
  font-size: .75em
}

.team-info-wrap.medium .skill-loot-list + .team-info {
  margin: 10px 0 0 12px
}

.team-info-wrap.medium .skill-loot-list + .team-info .team-country {
  margin-top: 4px;
  font-size: .625em
}

.team-info-wrap.medium .user-avatar + .team-info {
  margin-top: 10px
}

.team-info-wrap.medium .user-avatar + .team-info .team-country {
  margin-top: 4px
}

.team-info-wrap.medium .avatar-badge {
  position: absolute;
  top: 28px;
  left: 28px
}

.team-info-wrap .user-avatar + .team-info {
  margin-top: 3px
}

.team-info-wrap .user-avatar.character.small + .team-info {
  margin: 5px 0 0 8px
}

.team-info-wrap .bullet-icon, .team-info-wrap .tower-icon, .team-info-wrap .shield-icon, .team-info-wrap .plus-icon {
  margin-top: 6px
}

.team-info-wrap .rank-img {
  width: 28px;
  height: 23px;
  position: relative;
  top: 4px
}

.team-info-wrap .rank-img + .team-info .team-country {
  text-transform: uppercase
}

.team-info-wrap .team-info {
  margin: 6px 0 0 10px
}

.team-info-wrap .team-info .team-name {
  color: var(--color-text-primary)
}

.team-info-wrap .team-info .team-name .highlight.team-blue {
  color: #107df8
}

.team-info-wrap .team-info .team-name .highlight.team-yellow {
  color: #dee807
}

.team-info-wrap .team-info .team-name .highlight.red {
  color: var(--brand-500)
}

.team-info-wrap .team-info .team-country {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em
}

.featured-stat-wrap-list {
  display: flex;
  flex-flow: row wrap
}

.featured-stat-wrap-list .featured-stat-wrap {
  margin-right: 38px
}

.featured-stat-wrap-list .featured-stat-wrap:last-child {
  margin-right: 0
}

.featured-stat-wrap.center .featured-stat-title, .featured-stat-wrap.center .featured-stat-text {
  text-align: center
}

.featured-stat-wrap.center .user-avatar {
  display: block;
  margin: 0 auto
}

.featured-stat-wrap.right .featured-stat-title, .featured-stat-wrap.right .featured-stat-text {
  text-align: right
}

.featured-stat-wrap.regular .featured-stat-text {
  text-transform: none
}

.featured-stat-wrap.multiple-items {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.featured-stat-wrap.multiple-items.inverted .featured-stat-title {
  order: 1
}

.featured-stat-wrap.multiple-items.inverted .featured-stat-icon {
  order: 2;
  margin: 0 0 0 8px
}

.featured-stat-wrap.multiple-items .featured-stat-icon {
  margin: 0 8px 0 0
}

.featured-stat-wrap.medium .featured-stat-title {
  font-size: .875em
}

.featured-stat-wrap.medium .user-avatar + .featured-stat-text {
  margin-top: 6px
}

.featured-stat-wrap.medium .featured-stat-text {
  font-size: .5625em;
  margin-top: 15px
}

.featured-stat-wrap .icon-sl {
  display: block;
  margin-bottom: 8px;
  color: var(--violet-500)
}

.featured-stat-wrap .featured-stat-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.featured-stat-wrap .featured-stat-title.void .highlight:nth-child(1), .featured-stat-wrap .featured-stat-title.void .highlight:nth-child(2), .featured-stat-wrap .featured-stat-title.void .highlight:nth-child(3) {
  color: var(--color-text-muted)
}

.featured-stat-wrap .featured-stat-title .highlight:nth-child(1) {
  color: var(--violet-500)
}

.featured-stat-wrap .featured-stat-title .highlight:nth-child(2) {
  color: var(--cyan-500)
}

.featured-stat-wrap .featured-stat-title .highlight:nth-child(3) {
  color: var(--color-text-secondary)
}

.featured-stat-wrap .featured-stat-title .like-icon, .featured-stat-wrap .featured-stat-title .dislike-icon {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 700
}

.featured-stat-wrap .featured-stat-title .like-icon {
  color: var(--cyan-500)
}

.featured-stat-wrap .featured-stat-title .dislike-icon {
  color: var(--brand-500)
}

.featured-stat-wrap .featured-stat-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .625em;
  line-height: 1em;
  text-transform: uppercase
}

.ban-list-wrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.ban-list-wrap.inverted .ban-list-title {
  order: 2;
  margin: 0 0 0 20px
}

.ban-list-wrap.inverted .ban-list {
  order: 1
}

.ban-list-wrap .ban-list-title {
  margin-right: 20px;
  color: var(--color-text-primary)
}

.ban-list-wrap .ban-list {
  display: flex;
  flex-flow: row wrap
}

.ban-list-wrap .ban-list .ban-list-item {
  margin-right: 12px
}

.ban-list-wrap .ban-list .ban-list-item:last-child {
  margin-right: 0
}

.character-selection-list {
  height: 86px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.character-selection-list .character-selection-list-text {
  color: var(--color-text-muted)
}

.character-list {
  display: flex;
  flex-flow: row wrap
}

.character-list.hoverable .user-avatar {
  opacity: 0.2;
  cursor: pointer;
  transition: all .3s ease-in-out
}

.character-list.hoverable .user-avatar.active {
  opacity: 1
}

.character-list.hoverable .user-avatar:hover {
  opacity: 1
}

.character-list .user-avatar {
  margin-right: 20px
}

.character-list .user-avatar:last-child {
  margin-right: 0
}

.award-cup-img {
  width: 20px;
  height: 20px
}

.ticket-wrap {
  width: 270px;
  height: 130px;
  padding: 18px 78px 0 20px;
  position: relative;
  overflow: hidden
}

.ticket-wrap:before {
  content: '';
  width: 270px;
  height: 128px;
  border: 1px solid var(--color-border);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.ticket-wrap .ticket-corner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border);
  position: absolute;
  z-index: 3
}

.ticket-wrap .ticket-corner.top {
  top: -20px
}

.ticket-wrap .ticket-corner.bottom {
  bottom: -20px
}

.ticket-wrap .ticket-corner.left {
  left: -20px
}

.ticket-wrap .ticket-corner.right {
  right: -20px
}

.ticket-wrap .ticket-info .ticket-title {
  color: var(--color-text-primary);
  text-align: center
}

.ticket-wrap .ticket-info .ticket-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  text-align: center
}

.ticket-wrap .ticket-info .ticket-text .bold {
  color: var(--color-text-primary)
}

.ticket-wrap .ticket-teams {
  margin-top: 14px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.ticket-wrap .ticket-teams .ticket-teams-text {
  margin-top: 12px;
  color: var(--color-text-primary)
}

.ticket-wrap .ticket-buy-button {
  width: 130px;
  height: 50px;
  line-height: 50px;
  border: 1px solid var(--color-border);
  border-top: 1px dashed var(--color-border);
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  text-align: center;
  position: absolute;
  top: 40px;
  right: -40px;
  z-index: 2;
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}

.ticket-wrap .ticket-buy-button.sold-out {
  color: #bfbfbf
}

.tournament-banner {
  width: 270px;
  height: 150px
}

.map-wrap {
  width: 100%
}

.map-wrap.small {
  height: 150px
}

.map-wrap.medium {
  height: 480px
}

.map-wrap.big {
  height: 560px
}

.filters-row {
  min-height: 40px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  position: relative
}

.filters-row.no-space {
  margin-bottom: 0
}

.filters-row .forum-home-link {
  position: relative;
  top: -10px
}

.filters-row .dropdown-simple-wrap {
  margin-right: 40px
}

.filters-row .dropdown-simple-wrap:last-child {
  margin-right: 0
}

.filters-row .forum-actions {
  position: absolute;
  top: -10px;
  right: 0
}

.order-item {
  border-bottom: 1px solid var(--color-border)
}

.order-item.v2 {
  border-bottom: none
}

.order-item.v2 .order-body {
  padding: 0
}

.order-item.v2 .order-body .order-body-item {
  width: 200px;
  margin: 0 100px 30px 0
}

.order-item.v2 .order-body .order-body-item:last-child {
  width: 270px;
  margin-right: 0
}

.order-item.v2 .order-body .order-body-item .order-body-item-title {
  margin-bottom: 40px;
  font-size: .875em
}

.order-item.v2 .order-body .order-body-item .order-body-item-text {
  font-size: .875em
}

.order-item .order-header {
  height: 40px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.order-item .order-header .order-header-item {
  width: 200px;
  color: var(--color-text-muted)
}

.order-item .order-header .order-header-item .highlight {
  color: var(--color-text-primary)
}

.order-item .order-header .order-header-item .highlight.blue {
  color: var(--blue-500)
}

.order-item .order-header .order-header-item .highlight.red {
  color: var(--brand-500)
}

.order-item .order-header .order-header-item:last-child {
  margin-left: auto;
  text-align: right
}

.order-item .order-body {
  padding: 40px 0 10px;
  display: flex;
  flex-flow: row wrap
}

.order-item .order-body .order-body-item {
  width: 170px;
  margin: 0 30px 30px 0
}

.order-item .order-body .order-body-item:last-child {
  width: 200px;
  margin-right: 0
}

.order-item .order-body .order-body-item .order-body-item-title {
  margin-bottom: 30px;
  color: var(--color-text-primary);
  line-height: 1em
}

.order-item .order-body .order-body-item .order-body-item-text .highlight, .order-item .order-body .order-body-item .order-body-item-text.bold {
  color: var(--color-text-primary)
}

.order-item .order-body .order-body-item .order-body-item-text.spaced {
  margin-bottom: 20px
}

.bio-items .bio-item {
  margin-bottom: 18px
}

.bio-items .bio-item:last-child {
  margin-bottom: 0
}

.bio-item .bio-item-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.bio-item .bio-item-text {
  margin-top: 16px
}

.player-preview {
  width: 218px;
  position: relative
}

.player-preview .player-preview-img-wrap {
  width: 100%;
  height: 340px;
  background: url("../img/teams/roster-bg.jpg") no-repeat center, linear-gradient(75deg, #1c59f3, #00d8ff);
  background-size: cover;
  position: relative
}

.player-preview .player-preview-img-wrap:hover .player-preview-img {
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1)
}

.player-preview .player-preview-img-wrap .player-preview-img {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform .3s ease-in-out
}

.player-preview .button-more-info {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--gray-900);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2
}

.player-preview .button-more-info .plus-cc-icon {
  fill: var(--white);
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -5px;
  pointer-events: none
}

.player-preview .player-preview-info {
  width: 160px;
  padding: 20px;
  margin: 0 auto;
  background-color: var(--color-surface-base);
  position: relative;
  top: -28px;
  text-align: center
}

.player-preview .player-preview-info .player-preview-nickname {
  color: var(--color-text-primary);
  line-height: 1em
}

.player-preview .player-preview-info .player-preview-name {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.player-preview .social-links {
  position: relative;
  top: -28px
}

.player-overview {
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}

.player-overview .player-overview-img-wrap {
  width: 300px;
  height: 320px;
  background: url("../img/teams/player-bg.jpg") no-repeat center, linear-gradient(75deg, #1c59f3, #00d8ff);
  background-size: cover;
  position: relative
}

.player-overview .player-overview-img-wrap .player-overview-img {
  position: absolute;
  bottom: 0;
  left: 0
}

.player-overview .overview-info-wrap {
  width: 900px;
  height: 264px;
  padding: 40px 0 0 30px;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 28px;
  right: 0
}

.stats-info .stats-info-item {
  margin-bottom: 36px
}

.stats-info .stats-info-item:last-child {
  margin-bottom: 0
}

.stats-info-item {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end
}

.stats-info-item .stats-info-item-value {
  margin-right: 14px;
  color: var(--color-text-primary)
}

.stats-info-item .stats-info-item-value .percent {
  font-size: 20px
}

.stats-info-item .stats-info-item-value .highlight:nth-child(1) {
  color: var(--violet-500)
}

.stats-info-item .stats-info-item-value .highlight:nth-child(2) {
  color: var(--cyan-500)
}

.stats-info-item .stats-info-item-value .highlight:nth-child(3) {
  color: var(--color-text-secondary)
}

.stats-info-item .stats-info-item-description {
  width: 100px;
  margin-top: 1px
}

.stats-info-item .stats-info-item-description .stats-info-item-description-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.stats-info-item .stats-info-item-description .stats-info-item-description-text {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.streamer-overview {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.streamer-overview .streamer-overview-img-wrap {
  width: 500px;
  height: 442px
}

.streamer-overview .streamer-info {
  height: 364px;
  padding: 54px 0 0 56px;
  position: absolute;
  top: 39px;
  left: 470px;
  background-color: var(--color-surface-base)
}

.streamer-overview .streamer-info .streamer-info-name {
  color: var(--color-text-primary)
}

.streamer-overview .streamer-info .streamer-info-description {
  margin-top: 12px;
  line-height: 1em
}

.streamer-overview .streamer-info .social-links {
  margin-top: 30px
}

.streamer-overview .streamer-info .overview-info-wrap {
  margin-top: 56px
}

.character-switch-list.left .character-switch-list-item {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px
}

.character-switch-list.right .character-switch-list-item {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px
}

.character-switch-list.hoverable .user-avatar {
  opacity: 0.2;
  cursor: pointer;
  transition: all .3s ease-in-out
}

.character-switch-list.hoverable .user-avatar.active {
  opacity: 1
}

.character-switch-list.hoverable .user-avatar:hover {
  opacity: 1
}

.character-switch-list .character-switch-list-item {
  width: 70px;
  height: 76px;
  margin-bottom: 12px;
  background-color: var(--color-surface-base);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center
}

.character-switch-list .character-switch-list-item:last-child {
  margin-bottom: 0
}

.event-banner-img {
  display: block;
  width: 870px;
  height: 260px;
  margin: 0 auto 26px
}

.event-information-text {
  margin-top: 30px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.information-rows {
  border-top: 1px solid var(--color-border)
}

.information-rows .information-row {
  height: 50px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface-raised);
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.information-rows .information-row .information-row-item {
  width: 45%
}

.information-rows .information-row .information-row-item .information-row-item-text {
  color: var(--color-text-secondary)
}

.information-rows .information-row .information-row-item:first-child {
  padding-left: 16px
}

.information-rows .information-row .information-row-item:last-child {
  width: 55%
}

.information-rows .information-row .information-row-item:last-child .information-row-item-text {
  color: var(--color-text-primary)
}

.information-rows .information-row .information-row-item:last-child .information-row-item-text.blue {
  color: var(--blue-500)
}

.information-rows .information-row:nth-child(even) {
  background-color: var(--color-surface-base)
}

.information-rows + .map-wrap {
  margin-top: 26px
}

.contact-section-wrap {
  background-color: var(--color-surface-base)
}

.contact-section {
  background-color: var(--color-surface-base);
  padding-top: 100px;
  position: relative;
  top: -160px
}

.contact-section:before {
  content: '';
  width: 100%;
  height: 480px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-shadow: 0px -60px 30px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px -60px 30px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px -60px 30px 0px rgba(0, 0, 0, 0.06);
  pointer-events: none
}

.contact-section .contact-section-title {
  color: var(--color-text-primary);
  text-align: center
}

.contact-section .contact-section-text {
  width: 430px;
  margin: 16px auto 0;
  text-align: center
}

.contact-section .social-links {
  margin-top: 100px
}

.contact-section .contact-items {
  margin-top: 80px
}

.contact-section .contact-section-form {
  width: 65%;
  margin: 100px auto 0
}

.contact-section .contact-section-form .section-title-wrap {
  margin-bottom: 26px
}

.contact-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around
}

.contact-item {
  text-align: center
}

.contact-item .contact-item-icon {
  color: var(--blue-500);
  font-size: 34px
}

.contact-item .contact-item-title {
  margin-top: 46px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.contact-item .contact-item-text {
  margin-top: 10px;
  color: var(--color-text-primary);
  line-height: 1em
}

.subscribe-section-wrap {
  background: url("../img/other/newsletter_left.png") no-repeat left bottom, url("../img/other/newsletter_right.png") no-repeat right top, var(--color-surface-raised);
  position: relative
}

.subscribe-section {
  height: 220px;
  padding: 50px 0
}

.subscribe-section .subscribe-section-img {
  position: absolute;
  bottom: 0;
  left: 16%
}

.subscribe-section .subscribe-section-info {
  padding-left: 36%
}

.subscribe-section .subscribe-section-title {
  color: var(--color-text-primary)
}

.subscribe-section .subscribe-section-text {
  margin-top: 10px
}

.subscribe-section .submit-input {
  width: 450px;
  margin-top: 24px
}

.sponsors-title {
  margin-top: 40px;
  color: var(--color-text-primary);
  text-align: center
}

.sponsors-title .highlight {
  color: var(--blue-500)
}

.sponsors-text {
  width: 430px;
  margin: 16px auto 0;
  text-align: center
}

.sponsors-text + .sponsor-items {
  margin-top: 100px
}

.sponsor-items {
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto
}

.sponsor-items .sponsor-item {
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border)
}

.sponsor-items .sponsor-item:nth-child(3n+3) {
  border-right: none
}

.sponsor-items .sponsor-item:nth-child(1), .sponsor-items .sponsor-item:nth-child(2), .sponsor-items .sponsor-item:nth-child(3) {
  border-top: none
}

.sponsor-items + .sponsor-info {
  margin-top: 100px
}

.sponsor-item {
  width: 390px;
  height: 320px;
  overflow: hidden
}

.sponsor-item:hover .sponsor-item-img, .sponsor-item:hover .sponsor-item-text, .sponsor-item:hover .social-links, .sponsor-item:hover .sponsor-item-link {
  opacity: 1;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  visibility: visible
}

.sponsor-item .sponsor-item-img, .sponsor-item .sponsor-item-text, .sponsor-item .social-links, .sponsor-item .sponsor-item-link {
  -o-transform: translate(0, 76px);
  -moz-transform: translate(0, 76px);
  -ms-transform: translate(0, 76px);
  -webkit-transform: translate(0, 76px);
  transform: translate(0, 76px);
  transition: all .4s ease-in-out
}

.sponsor-item .sponsor-item-text, .sponsor-item .social-links, .sponsor-item .sponsor-item-link {
  opacity: 0;
  visibility: hidden
}

.sponsor-item .sponsor-item-img {
  display: block;
  margin: 26px auto 0;
  opacity: 0.2
}

.sponsor-item .sponsor-item-text {
  width: 280px;
  margin: 26px auto 0;
  text-align: center
}

.sponsor-item .social-links {
  margin-top: 20px
}

.sponsor-item .sponsor-item-link {
  margin-top: 30px;
  color: var(--color-text-primary);
  text-align: center
}

.sponsor-info .sponsor-info-title {
  color: var(--color-text-primary);
  text-align: center
}

.sponsor-info .sponsor-info-text {
  margin-top: 20px;
  text-align: center
}

.sponsor-info .sponsor-info-text a {
  color: var(--blue-500);
  font-weight: 500
}

.faq-items {
  width: 770px;
  margin: 0 auto
}

.faq-items .faq-item {
  border-bottom: 1px solid var(--color-border)
}

.faq-item.selected .faq-item-trigger .faq-item-decoration {
  background-color: var(--brand-500)
}

.faq-item.selected .faq-item-trigger .faq-item-decoration .plus-cc-icon {
  display: none
}

.faq-item.selected .faq-item-trigger .faq-item-decoration .minus-cc-icon {
  display: block
}

.faq-item .faq-item-trigger {
  height: 96px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  cursor: pointer
}

.faq-item .faq-item-trigger .faq-item-title {
  color: var(--color-text-primary)
}

.faq-item .faq-item-trigger .faq-item-decoration {
  margin-left: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--blue-500);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.faq-item .faq-item-trigger .faq-item-decoration .plus-cc-icon, .faq-item .faq-item-trigger .faq-item-decoration .minus-cc-icon {
  fill: var(--white);
  pointer-events: none
}

.faq-item .faq-item-trigger .faq-item-decoration .minus-cc-icon {
  display: none
}

.faq-item .faq-item-text {
  margin-top: 30px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.faq-item .faq-item-text:first-child {
  margin-top: 0
}

.faq-item .faq-item-img {
  width: 700px;
  height: 420px;
  margin-top: 40px
}

.faq-item .faq-item-img + .faq-item-text {
  margin-top: 36px
}

.faq-item .faq-item-footer {
  height: 84px;
  margin-top: 30px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.faq-item .faq-item-footer .faq-item-footer-item {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.faq-item .faq-item-footer .faq-item-footer-text {
  color: var(--color-text-primary)
}

.faq-item .faq-item-footer .faq-item-footer-text .light {
  color: var(--color-text-muted)
}

.faq-item .faq-item-footer .faq-item-actions {
  margin-left: 24px;
  display: flex;
  flex-flow: row wrap
}

.faq-item .faq-item-footer .faq-item-actions .faq-item-action {
  margin-right: 16px
}

.faq-item .faq-item-footer .faq-item-actions .faq-item-action:last-child {
  margin-right: 0
}

@media screen and (max-width: 1500px) {
  .subscribe-section .subscribe-section-img {
    display: none
  }

  .subscribe-section .subscribe-section-info {
    padding-left: 26%
  }
}

@media screen and (max-width: 1260px) {
  .team-info-wrap.v3 .team-info {
    margin-left: 0
  }

  .team-info-wrap.v3.inverted .team-info {
    margin-right: 0
  }

  .order-item.v2 .order-body {
    justify-content: center
  }

  .order-item.v2 .order-body .order-body-item {
    width: 200px;
    margin: 0 0 40px 0;
    padding-right: 30px
  }

  .order-item.v2 .order-body .order-body-item:last-child {
    width: 200px
  }

  .order-item .order-header .order-header-item {
    width: auto;
    margin-right: 30px
  }

  .order-item .order-header .order-header-item:last-child {
    margin-right: 0
  }

  .order-item .order-body {
    justify-content: center
  }

  .player-overview .player-overview-img-wrap {
    margin: 0 auto
  }

  .player-overview .overview-info-wrap {
    width: 100%;
    height: auto;
    position: static;
    justify-content: space-evenly
  }

  .player-overview .overview-info-wrap .overview-info, .player-overview .overview-info-wrap .stats-info {
    margin: 0 0 30px 0
  }

  .player-overview .overview-info-wrap .overview-info {
    width: auto;
    margin-right: 20px
  }

  .streamer-overview .streamer-overview-img-wrap {
    margin: 0 auto
  }

  .streamer-overview .streamer-info {
    height: auto;
    padding: 54px 0 10px;
    position: static;
    text-align: center
  }

  .streamer-overview .streamer-info .streamer-info-name {
    font-size: 2.875em
  }

  .streamer-overview .streamer-info .social-links {
    justify-content: center
  }

  .streamer-overview .streamer-info .overview-info-wrap {
    margin-top: 40px;
    justify-content: center
  }

  .streamer-overview .streamer-info .overview-info-wrap .overview-info {
    margin-bottom: 26px
  }

  .filters-row {
    padding: 0 20px;
    justify-content: center
  }

  .filters-row .forum-home-link {
    position: static;
    width: 200px;
    margin: 0 10px 20px 0;
    padding: 0;
    text-align: center
  }

  .filters-row .dropdown-simple-wrap {
    order: 1;
    margin-bottom: 20px
  }

  .filters-row .option-list {
    width: 100%;
    margin-top: 10px;
    order: 3;
    justify-content: center
  }

  .filters-row .forum-actions {
    order: 2;
    position: static
  }

  .contact-section .contact-section-form {
    width: 80%
  }

  .subscribe-section-wrap {
    background: var(--color-surface-raised)
  }

  .subscribe-section-wrap .subscribe-section-info {
    padding: 0;
    text-align: center
  }

  .subscribe-section-wrap .submit-input {
    margin: 24px auto 0
  }

  .sponsor-items {
    width: 780px
  }

  .sponsor-items .sponsor-item:nth-child(3n+3) {
    border-right: 1px solid var(--color-border)
  }

  .sponsor-items .sponsor-item:nth-child(2n+2) {
    border-right: none
  }

  .sponsor-items .sponsor-item:nth-child(3) {
    border-top: 1px solid var(--color-border)
  }

  .faq-items {
    width: 100%
  }
}

@media screen and (max-width: 960px) {
  .character-selection-list {
    display: block;
    height: auto;
    padding: 26px 0
  }

  .character-selection-list .character-list {
    justify-content: center
  }

  .character-selection-list .character-selection-list-text {
    margin: 26px 0;
    text-align: center
  }

  .team-info-wrap.v2 .team-info, .team-info-wrap.v3 .team-info {
    display: none
  }

  .filters-row .dropdown-simple-wrap .form-wrap {
    width: 270px
  }

  .filter-heading.multiple-items {
    display: block;
    min-height: 40px;
    padding-top: 16px
  }

  .event-banner-img {
    width: 435px;
    height: 130px
  }

  .sponsor-items {
    width: 390px
  }

  .sponsor-items .sponsor-item {
    border: none
  }

  .sponsor-items .sponsor-item:nth-child(3n+3) {
    border: none
  }

  .sponsor-item .sponsor-item-img, .sponsor-item .sponsor-item-text, .sponsor-item .social-links, .sponsor-item .sponsor-item-link {
    -o-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: all .4s ease-in-out
  }

  .sponsor-item .sponsor-item-img, .sponsor-item .sponsor-item-text, .sponsor-item .social-links, .sponsor-item .sponsor-item-link {
    opacity: 1;
    visibility: visible
  }

  .sponsor-item .sponsor-item-text {
    width: 90%
  }

  .faq-item .faq-item-img {
    width: 350px;
    height: 210px
  }
}

@media screen and (max-width: 680px) {
  .bullet-list {
    padding: 0
  }

  .bullet-list-item {
    display: block;
    text-align: center
  }

  .bullet-list-item-text {
    width: 80%;
    margin: 20px auto 0
  }

  .error-display {
    padding-top: 246px
  }

  .error-display .error-img {
    width: 216px;
    height: 207px;
    margin-left: -80px
  }

  .error-display .error-text {
    width: 90%
  }

  .error-display + .section-actions {
    margin-top: 40px
  }

  .section-actions {
    flex-direction: column;
    align-items: center
  }

  .section-actions .button {
    display: inline-block
  }

  .section-actions .button + .button {
    margin: 20px 0 0
  }

  .team-info-wrap.v2 .team-logo-wrap {
    width: 100px
  }

  .team-info-wrap.v2.inverted .team-logo-wrap .team-logo {
    left: -60px
  }

  .team-info-wrap.v3 .team-logo-wrap {
    width: 140px
  }

  .team-info-wrap.v3.inverted .team-logo-wrap .team-logo {
    left: 0
  }

  .streamer-overview .streamer-overview-img-wrap {
    width: 100%
  }

  .event-banner-img {
    display: none
  }

  .contact-section .contact-section-title {
    font-size: 2.5em
  }

  .contact-section .contact-section-text {
    width: 90%
  }

  .contact-section .contact-section-form {
    width: 90%
  }

  .contact-section .contact-items {
    justify-content: center
  }

  .contact-section .contact-items .contact-item {
    width: 100%;
    margin-bottom: 40px
  }

  .contact-section .social-links {
    margin-top: 40px
  }

  .subscribe-section-wrap .submit-input {
    width: 90%
  }

  .sponsors-title {
    margin-top: 20px;
    font-size: 2.5em
  }

  .sponsors-text {
    width: 90%
  }

  .sponsors-text + .sponsor-items {
    margin-top: 60px
  }

  .sponsor-items {
    width: 270px
  }

  .sponsor-items .sponsor-item {
    width: 270px
  }

  .faq-item .faq-item-trigger .faq-item-title {
    font-size: .875em
  }
}

@media screen and (max-width: 480px) {
  .page-navigation {
    justify-content: center
  }

  .page-navigation.right {
    justify-content: center
  }

  .page-navigation .slider-control.big {
    width: 30px;
    height: 30px
  }

  .page-navigation .slider-control.big .arrow-icon {
    top: 10px
  }

  .page-navigation .page-navigation-item {
    width: 30px;
    height: 30px;
    line-height: 30px
  }
}

.s-icon {
  color: var(--gray-950)
}

.play-button-icon {
  width: 12px;
  height: 14px;
  fill: var(--white)
}

.play-button-icon.tiny {
  width: 8px;
  height: 10px
}

.play-button-icon.big {
  width: 24px;
  height: 28px
}

.bullet-icon, .tower-icon, .shield-icon, .plus-icon {
  width: 16px;
  height: 20px;
  fill: var(--gray-900)
}

.bullet-icon.big, .tower-icon.big, .shield-icon.big, .plus-icon.big {
  width: 22px;
  height: 28px
}

.shield-icon.big {
  width: 24px
}

.plus-icon {
  height: 16px
}

.plus-icon.rate-up {
  fill: var(--cyan-500);
  width: 6px;
  height: 6px
}

.plus-icon.big {
  width: 28px
}

.rating-ornament-icon {
  width: 10px;
  height: 9px
}

.arrow-icon {
  width: 3px;
  height: 5px
}

.arrow-icon.big {
  width: 9px;
  height: 15px
}

.arrow-icon.medium {
  width: 6px;
  height: 10px
}

.cross-icon.big {
  width: 15px;
  height: 15px
}

.cross-icon.small {
  width: 10px;
  height: 10px
}

.cross-cb-icon {
  fill: var(--white);
  width: 16px;
  height: 16px
}

.cross-cb-icon.small {
  width: 8px;
  height: 8px
}

.search-icon, .inventory-icon, .inventory-close-icon {
  fill: var(--gray-900);
  width: 24px;
  height: 24px
}

.search-icon.small {
  width: 16px;
  height: 16px
}

.inventory-icon-points {
  fill: #afafaf
}

.inventory-icon-points-light {
  fill: #f1f1f1
}

.plus-cc-icon, .minus-cc-icon {
  fill: var(--gray-900);
  width: 8px;
  height: 8px
}

.plus-cc-icon.medium, .minus-cc-icon.medium {
  width: 10px;
  height: 10px
}

.minus-cc-icon.rate-down {
  fill: var(--brand-500);
  width: 6px;
  height: 6px
}

.plus-cc-2-icon {
  width: 12px;
  height: 12px
}

.hexagon-icon.hexagon-border {
  fill: var(--gray-300);
  width: 80px;
  height: 86px
}

.hexagon-icon.hexagon-fill {
  fill: #2c2f3c;
  width: 68px;
  height: 74px
}

.menu-pull-icon {
  fill: var(--white);
  width: 22px;
  height: 14px
}

.facebook-icon, .twitter-icon, .instagram-icon, .twitch-icon, .gplus-icon, .youtube-icon, .discord-icon {
  fill: var(--white)
}

.discord-icon {
  width: 12px;
  height: 12px
}

.facebook-icon {
  width: 12px;
  height: 12px
}

.facebook-icon.big {
  width: 14px;
  height: 14px
}

.twitter-icon {
  width: 12px;
  height: 10px
}

.twitter-icon.big {
  width: 16px;
  height: 13px
}

.instagram-icon {
  width: 12px;
  height: 12px
}

.instagram-icon.big {
  width: 14px;
  height: 14px
}

.twitch-icon {
  width: 12px;
  height: 13px
}

.twitch-icon.big {
  width: 14px;
  height: 15px
}

.gplus-icon {
  width: 15px;
  height: 9px
}

.gplus-icon.big {
  width: 18px;
  height: 12px
}

.youtube-icon {
  width: 14px;
  height: 12px
}

.live-icon {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--brand-500);
  border-radius: 50%
}

.check-icon {
  width: 16px;
  height: 13px
}

.check-icon.medium {
  width: 20px;
  height: 16px
}

.exclamation-icon {
  width: 6px;
  height: 20px
}

.bars-icon {
  width: 11px;
  height: 10px
}

.skull-icon.blue, .pliers-icon.blue, .explosion-icon.blue, .stopwatch-icon.blue {
  fill: #57a9ee
}

.skull-icon.yellow, .pliers-icon.yellow, .explosion-icon.yellow, .stopwatch-icon.yellow {
  fill: #e5bf65
}

.skull-icon {
  width: 22px;
  height: 22px
}

.pliers-icon {
  width: 22px;
  height: 22px
}

.explosion-icon {
  width: 30px;
  height: 30px
}

.stopwatch-icon {
  width: 22px;
  height: 22px
}

.featured-corner-icon {
  width: 24px;
  height: 24px;
  fill: var(--gray-300)
}

.role-top-icon, .role-jungler-icon, .role-middle-icon, .role-adcarry-icon, .role-support-icon {
  width: 20px;
  height: 20px;
  fill: #d6d6d6
}

.calendar-icon {
  width: 24px;
  height: 24px
}

.baron-icon, .dragon-icon, .inhibitor-icon, .rift-herald-icon, .tower-icon {
  width: 20px;
  height: 20px;
  fill: var(--gray-900)
}

.baron-icon.red, .dragon-icon.red, .inhibitor-icon.red, .rift-herald-icon.red, .tower-icon.red {
  fill: var(--brand-500)
}

.baron-icon.blue, .dragon-icon.blue, .inhibitor-icon.blue, .rift-herald-icon.blue, .tower-icon.blue {
  fill: #107df8
}

.track-icon {
  width: 10px;
  height: 10px;
  fill: var(--gray-900)
}

.close-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-primary)
}

.grid-icon, .list-icon {
  fill: var(--gray-300);
  width: 10px;
  height: 10px
}

.tag-ornament {
  display: inline-block;
  padding: 0 10px;
  background-color: #252627;
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-size: .625em;
  line-height: 20px;
  font-weight: 900;
  text-transform: uppercase
}

.tag-ornament.bold {
  font-weight: 700
}

.tag-ornament.blue {
  background-color: var(--blue-500)
}

.tag-ornament.red {
  background-color: var(--brand-500)
}

.tag-ornament.green {
  background-color: var(--green-500)
}

.tag-ornament.yellow {
  background-color: var(--amber-500)
}

.tag-ornament.cyan {
  background-color: var(--cyan-500)
}

.tag-ornament.violet {
  background-color: var(--violet-500)
}

.rating-ornament {
  padding: 2px 6px 4px;
  background-color: rgba(0, 0, 0, 0.75)
}

.rating-ornament:after {
  content: '';
  display: table;
  clear: both
}

.rating-ornament.void {
  background-color: transparent
}

.rating-ornament.small .rating-ornament-icon {
  width: 8px;
  height: 8px
}

.rating-ornament.medium .rating-ornament-icon {
  width: 12px;
  height: 12px
}

.rating-ornament.yellow .rating-ornament-icon {
  fill: #ffd800
}

.rating-ornament.yellow .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.rating-ornament .rating-ornament-item {
  float: left;
  margin-right: 3px
}

.rating-ornament .rating-ornament-item.empty {
  fill: #b8b8b8
}

.rating-ornament .rating-ornament-item:last-child {
  margin-right: 0
}

.bubble-ornament {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--gray-300);
  text-align: center;
  cursor: pointer;
  position: relative
}

.bubble-ornament.no-link {
  cursor: auto
}

.bubble-ornament > * {
  position: relative;
  z-index: 6666
}

.bubble-ornament .bubble-ornament-info, .bubble-ornament .bubble-ornament-text {
  color: var(--white)
}

.bubble-ornament .hover-replace {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 29px;
  left: 60px
}

.bubble-ornament.big {
  width: 55px;
  height: 55px;
  padding-top: 10px
}

.bubble-ornament.big.smaller {
  width: 48px;
  height: 48px
}

.bubble-ornament.big.smaller .hover-replace {
  top: 27px
}

.bubble-ornament.big.smaller .bubble-ornament-text {
  font-size: .5625em
}

.bubble-ornament.big.smaller .facebook-icon, .bubble-ornament.big.smaller .twitter-icon, .bubble-ornament.big.smaller .instagram-icon, .bubble-ornament.big.smaller .twitch-icon {
  top: 0;
  margin-bottom: 1px
}

.bubble-ornament.big.smaller .gplus-icon {
  top: 4px;
  margin-bottom: 3px
}

.bubble-ornament.big:after {
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid transparent
}

.bubble-ornament.big .heart-icon, .bubble-ornament.big .tag-icon, .bubble-ornament.big .reply-icon, .bubble-ornament.big .share-icon, .bubble-ornament.big .report-icon, .bubble-ornament.big .like-icon, .bubble-ornament.big .dislike-icon {
  line-height: 1em
}

.bubble-ornament.big .cross-cb-icon {
  top: 0
}

.bubble-ornament.big .facebook-icon, .bubble-ornament.big .twitter-icon, .bubble-ornament.big .instagram-icon, .bubble-ornament.big .twitch-icon {
  top: 2px;
  margin-bottom: 3px
}

.bubble-ornament.big .gplus-icon {
  width: 19px;
  height: 12px;
  top: 5px;
  margin-bottom: 6px
}

.bubble-ornament.big .youtube-icon {
  width: 16px;
  height: 14px;
  top: 2px;
  margin-bottom: 4px
}

.bubble-ornament.big .bubble-ornament-text {
  margin-top: 4px
}

.bubble-ornament.medium {
  width: 50px;
  height: 50px
}

.bubble-ornament.medium .heart-icon, .bubble-ornament.medium .tag-icon, .bubble-ornament.medium .reply-icon, .bubble-ornament.medium .share-icon, .bubble-ornament.medium .report-icon, .bubble-ornament.medium .like-icon, .bubble-ornament.medium .dislike-icon, .bubble-ornament.medium .bubbles-icon {
  color: var(--white);
  font-size: 24px;
  line-height: 50px
}

.bubble-ornament.medium .heart-icon, .bubble-ornament.medium .tag-icon, .bubble-ornament.medium .reply-icon, .bubble-ornament.medium .share-icon, .bubble-ornament.medium .report-icon, .bubble-ornament.medium .like-icon, .bubble-ornament.medium .dislike-icon {
  font-size: 20px
}

.bubble-ornament.medium .cross-cb-icon {
  width: 16px;
  height: 16px;
  top: 16px
}

.bubble-ornament.medium .facebook-icon, .bubble-ornament.medium .twitter-icon, .bubble-ornament.medium .instagram-icon, .bubble-ornament.medium .twitch-icon, .bubble-ornament.medium .gplus-icon, .bubble-ornament.medium .youtube-icon {
  top: 16px
}

.bubble-ornament.medium .facebook-icon, .bubble-ornament.medium .twitter-icon, .bubble-ornament.medium .instagram-icon, .bubble-ornament.medium .twitch-icon {
  width: 16px;
  height: 16px
}

.bubble-ornament.medium .twitter-icon {
  width: 18px;
  height: 18px;
  top: 18px
}

.bubble-ornament.medium .gplus-icon {
  width: 20px;
  height: 20px;
  top: 18px
}

.bubble-ornament.medium .youtube-icon {
  width: 20px;
  height: 20px
}

.bubble-ornament.medium .bubble-ornament-info {
  font-size: 1.25em;
  line-height: 50px
}

.bubble-ornament.small {
  width: 24px;
  height: 24px
}

.bubble-ornament.small .bubble-ornament-info {
  line-height: 24px
}

.bubble-ornament.small .cross-cb-icon {
  top: 3px
}

.bubble-ornament.tiny {
  width: 22px;
  height: 22px
}

.bubble-ornament.tiny .cross-cb-icon {
  width: 8px;
  height: 8px;
  top: 1px
}

.bubble-ornament.tiny .heart-icon, .bubble-ornament.tiny .tag-icon, .bubble-ornament.tiny .dislike-icon {
  line-height: 24px
}

.bubble-ornament.tiny .reply-icon, .bubble-ornament.tiny .share-icon {
  font-size: 11px;
  line-height: 22px
}

.bubble-ornament.tiny .heart-icon, .bubble-ornament.tiny .like-icon, .bubble-ornament.tiny .dislike-icon {
  font-size: 10px
}

.bubble-ornament.tiny .tag-icon {
  font-size: 11px
}

.bubble-ornament.tiny .report-icon {
  font-size: 12px;
  line-height: 22px
}

.bubble-ornament.tiny .like-icon {
  line-height: 22px
}

.bubble-ornament:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 12px solid transparent;
  position: absolute;
  bottom: -2px;
  left: -2px;
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.bubble-ornament.cyan {
  background-color: var(--cyan-500)
}

.bubble-ornament.cyan:after {
  border-top-color: var(--cyan-500)
}

.bubble-ornament.blue {
  background-color: var(--blue-500)
}

.bubble-ornament.blue:after {
  border-top-color: var(--blue-500)
}

.bubble-ornament.violet {
  background-color: var(--violet-500)
}

.bubble-ornament.violet:after {
  border-top-color: var(--violet-500)
}

.bubble-ornament.red {
  background-color: var(--brand-500)
}

.bubble-ornament.red:after {
  border-top-color: var(--brand-500)
}

.bubble-ornament.green {
  background-color: var(--green-500)
}

.bubble-ornament.green:after {
  border-top-color: var(--green-500)
}

.bubble-ornament.pink {
  background-color: #f9288a
}

.bubble-ornament.pink:after {
  border-top-color: #f9288a
}

.bubble-ornament.black {
  background-color: var(--gray-900)
}

.bubble-ornament.black:after {
  border-top-color: var(--gray-900)
}

.bubble-ornament.fb {
  background-color: #4153b3
}

.bubble-ornament.fb:after {
  border-top-color: #4153b3
}

.bubble-ornament.twt {
  background-color: #10caff
}

.bubble-ornament.twt:after {
  border-top-color: #10caff
}

.bubble-ornament.insta {
  background-color: #f9288a
}

.bubble-ornament.insta:after {
  border-top-color: #f9288a
}

.bubble-ornament.twitch {
  background-color: var(--violet-500)
}

.bubble-ornament.twitch:after {
  border-top-color: var(--violet-500)
}

.bubble-ornament.gplus {
  background-color: var(--amber-500)
}

.bubble-ornament.gplus:after {
  border-top-color: var(--amber-500)
}

.bubble-ornament.youtube {
  background-color: #eb1940
}

.bubble-ornament.youtube:after {
  border-top-color: #eb1940
}

.bubble-ornament.hoverable {
  background-color: var(--gray-300);
  transition: all .3s ease-in-out
}

.bubble-ornament.hoverable:after {
  border-top-color: var(--color-border);
  transition: all .3s ease-in-out
}

.bubble-ornament.hoverable:hover.cyan {
  background-color: var(--cyan-500)
}

.bubble-ornament.hoverable:hover.cyan:after {
  border-top-color: var(--cyan-500)
}

.bubble-ornament.hoverable:hover.blue {
  background-color: var(--blue-500)
}

.bubble-ornament.hoverable:hover.blue:after {
  border-top-color: var(--blue-500)
}

.bubble-ornament.hoverable:hover.violet {
  background-color: var(--violet-500)
}

.bubble-ornament.hoverable:hover.violet:after {
  border-top-color: var(--violet-500)
}

.bubble-ornament.hoverable:hover.red {
  background-color: var(--brand-500)
}

.bubble-ornament.hoverable:hover.red:after {
  border-top-color: var(--brand-500)
}

.bubble-ornament.hoverable:hover.pink {
  background-color: #f9288a
}

.bubble-ornament.hoverable:hover.pink:after {
  border-top-color: #f9288a
}

.bubble-ornament.hoverable:hover.black {
  background-color: var(--gray-900)
}

.bubble-ornament.hoverable:hover.black:after {
  border-top-color: var(--gray-900)
}

.bubble-ornament.hoverable:hover.fb {
  background-color: #4153b3
}

.bubble-ornament.hoverable:hover.fb:after {
  border-top-color: #4153b3
}

.bubble-ornament.hoverable:hover.twt {
  background-color: #10caff
}

.bubble-ornament.hoverable:hover.twt:after {
  border-top-color: #10caff
}

.bubble-ornament.hoverable:hover.insta {
  background-color: #f9288a
}

.bubble-ornament.hoverable:hover.insta:after {
  border-top-color: #f9288a
}

.bubble-ornament.hoverable:hover.twitch {
  background-color: var(--violet-500)
}

.bubble-ornament.hoverable:hover.twitch:after {
  border-top-color: var(--violet-500)
}

.bubble-ornament.hoverable:hover.gplus {
  background-color: var(--amber-500)
}

.bubble-ornament.hoverable:hover.gplus:after {
  border-top-color: var(--amber-500)
}

.bubble-ornament.hoverable:hover.youtube {
  background-color: #eb1940
}

.bubble-ornament.hoverable:hover.youtube:after {
  border-top-color: #eb1940
}

.bubble-ornament .heart-icon, .bubble-ornament .tag-icon, .bubble-ornament .reply-icon, .bubble-ornament .share-icon, .bubble-ornament .report-icon, .bubble-ornament .like-icon, .bubble-ornament .dislike-icon {
  color: var(--white)
}

.bubble-ornament .track-icon {
  fill: var(--white);
  margin-top: 10px
}

.bubble-ornament .heart-icon, .bubble-ornament .tag-icon, .bubble-ornament .dislike-icon {
  line-height: 32px
}

.bubble-ornament .reply-icon, .bubble-ornament .share-icon {
  font-size: 14px;
  line-height: 30px
}

.bubble-ornament .heart-icon, .bubble-ornament .like-icon, .bubble-ornament .dislike-icon {
  font-size: 12px
}

.bubble-ornament .tag-icon {
  font-size: 13px;
  position: relative;
  right: 1px
}

.bubble-ornament .report-icon {
  font-size: 15px;
  line-height: 30px
}

.bubble-ornament .like-icon {
  line-height: 30px
}

.bubble-ornament .cross-cb-icon {
  fill: var(--white);
  width: 10px;
  height: 10px;
  position: relative;
  top: 6px
}

.bubble-ornament .facebook-icon, .bubble-ornament .instagram-icon, .bubble-ornament .youtube-icon {
  position: relative;
  top: 8px
}

.bubble-ornament .twitter-icon, .bubble-ornament .gplus-icon {
  position: relative;
  top: 7px
}

.bubble-ornament .twitch-icon {
  position: relative;
  top: 9px
}

.bubble-ornament .plus-cc-2-icon {
  fill: var(--white);
  position: relative;
  top: 7px
}

.tag-quantity {
  height: 16px;
  padding: 4px 6px 0;
  background-color: var(--gray-900)
}

.tag-quantity .tag-quantity-text {
  color: var(--white);
  text-transform: none
}

.social-links {
  display: flex;
  flex-flow: row wrap
}

.social-links .social-link {
  margin-right: 26px
}

.social-links .social-link:last-child {
  margin-right: 0
}

.social-links .social-link .facebook-icon, .social-links .social-link .twitter-icon, .social-links .social-link .instagram-icon, .social-links .social-link .twitch-icon, .social-links .social-link .gplus-icon, .social-links .social-link .youtube-icon {
  width: 14px;
  height: 14px;
  fill: var(--gray-300);
  transition: .2s fill ease-in-out
}

.social-links .social-link .gplus-icon {
  position: relative;
  top: 2px
}

.social-links .social-link:hover .facebook-icon {
  fill: #4153b3
}

.social-links .social-link:hover .twitter-icon {
  fill: #10caff
}

.social-links .social-link:hover .instagram-icon {
  fill: #f9288a
}

.social-links .social-link:hover .twitch-icon {
  fill: var(--violet-500)
}

.social-links .social-link:hover .gplus-icon {
  fill: var(--amber-500)
}

.social-links .social-link:hover .youtube-icon {
  fill: #eb1940
}

.social-links .bubble-ornament {
  margin-right: 14px
}

.social-links .bubble-ornament:last-child {
  margin-right: 0
}

.social-links.medium .bubble-ornament {
  margin-right: 16px
}

.social-links.medium .bubble-ornament:last-child {
  margin-right: 0
}

.social-links.aligned {
  align-items: center
}

.social-links.centered {
  justify-content: center
}

.social-links.vertical {
  width: auto;
  flex-direction: column
}

.social-links.vertical .bubble-ornament {
  margin-right: 0;
  margin-bottom: 16px
}

.social-links.vertical .bubble-ornament:last-child {
  margin-bottom: 0
}

.social-links .bubble-ornament {
  transition: all .3s ease-in-out
}

.social-links .bubble-ornament:hover {
  -o-transform: translate(0, -5px);
  -moz-transform: translate(0, -5px);
  -ms-transform: translate(0, -5px);
  -webkit-transform: translate(0, -5px);
  transform: translate(0, -5px)
}

.social-links.animated {
  overflow: hidden
}

.social-links.animated .bubble-ornament .bubble-ornament-text {
  transition: all .3s ease-in-out
}

.social-links.animated .bubble-ornament:hover {
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.social-links.animated .bubble-ornament:hover .bubble-ornament-text {
  opacity: 0;
  visibility: hidden
}

.social-links.animated .bubble-ornament:hover .bubble-ornament-text.hover-replace {
  visibility: visible;
  opacity: 1;
  -o-transform: translate(-49px, 0);
  -moz-transform: translate(-49px, 0);
  -ms-transform: translate(-49px, 0);
  -webkit-transform: translate(-49px, 0);
  transform: translate(-49px, 0)
}

.social-links.animated .bubble-ornament:hover.big.smaller .bubble-ornament-text.hover-replace {
  -o-transform: translate(-50px, 0);
  -moz-transform: translate(-50px, 0);
  -ms-transform: translate(-50px, 0);
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0)
}

.tag-list {
  display: flex;
  flex-flow: row wrap
}

.tag-list .tag-item {
  margin: 0 6px 10px 0
}

.tag-list .tag-item:last-child {
  margin-right: 0
}

.tag-list .tag-ornament {
  margin-right: 8px
}

.tag-list.violet .tag-item:hover {
  background-color: var(--violet-500);
  border-color: var(--violet-500)
}

.tag-item {
  display: inline-block;
  height: 25px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 200px;
  color: var(--color-text-secondary);
  font-family: "Roboto", sans-serif;
  font-size: .75em;
  line-height: 25px
}

.tag-item:hover {
  color: var(--white);
  font-weight: 700;
  background-color: var(--blue-500);
  border-color: var(--blue-500)
}

.photo-list {
  display: grid;
  grid-template-columns:repeat(4, 60px);
  grid-gap: 10px;
  justify-content: center;
  position: relative;
  min-height: 120px
}

.photo-list .loader {
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -20px
}

.photo-list .loader-error {
  width: 100%;
  position: absolute;
  top: 30px
}

.photo-item-wrap {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  animation: translate-from-bottom .5s ease-in-out
}

.photo-item-wrap:hover .photo-item-overlay {
  opacity: 1;
  visibility: visible
}

.photo-item-wrap:hover .plus-cc-icon {
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1)
}

.photo-item-wrap .photo-item {
  width: 100%;
  height: 100%
}

.photo-item-wrap .plus-cc-icon {
  width: 20px;
  height: 20px;
  fill: var(--white);
  position: absolute;
  top: 20px;
  left: 20px;
  -o-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all .3s ease-in-out
}

.photo-item-wrap .photo-item-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(249, 40, 138, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out
}

.button {
  display: inline-block;
  height: 46px;
  border-radius: 200px;
  padding: 0 68px 0 34px;
  background-color: var(--gray-900);
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: .6875em;
  font-weight: 800;
  line-height: 46px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
  position: relative
}

.button.no-decoration {
  padding: 0 34px;
  text-align: center
}

.button.full {
  width: 100%;
  padding: 0;
  text-align: center
}

.button.big {
  height: 55px;
  padding: 0 92px 0 52px;
  font-size: .875em;
  line-height: 55px
}

.button.big .button-ornament {
  width: 43px;
  height: 43px
}

.button.big .arrow-icon {
  top: 14px;
  left: 19px
}

.button.big .cross-icon {
  top: 14px;
  margin-left: -7px
}

.button.small {
  height: 34px;
  padding: 0 24px;
  font-size: .625em;
  line-height: 34px
}

.button.tiny {
  height: 27px;
  padding: 0 32px 0 14px;
  font-size: .5625em;
  line-height: 27px
}

.button.tiny.disabled .cross-icon {
  width: 9px;
  height: 9px
}

.button.tiny .button-ornament {
  width: 21px;
  height: 21px;
  top: 3px;
  right: 3px
}

.button.tiny .arrow-icon {
  top: 8px;
  left: 10px
}

.button.tiny .cross-icon {
  top: 6px
}

.button.tiny:hover .arrow-icon {
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg)
}

.button.disabled {
  color: var(--color-text-muted);
  background-color: var(--gray-900);
  pointer-events: none
}

.button.disabled .button-ornament {
  background-color: var(--gray-600)
}

.button.disabled .arrow-icon {
  display: none
}

.button.disabled .cross-icon {
  display: block
}

.button.disabled:hover {
  background-color: var(--gray-900)
}

.button.disabled:hover .button-ornament {
  background-color: var(--gray-600)
}

.button.blue.disabled, .button.red.disabled, .button.green.disabled, .button.violet.disabled, .button.yellow.disabled, .button.cyan.disabled, .button.gray.disabled {
  color: var(--color-text-muted);
  background-color: var(--gray-900)
}

.button.blue.disabled .button-ornament, .button.red.disabled .button-ornament, .button.green.disabled .button-ornament, .button.violet.disabled .button-ornament, .button.yellow.disabled .button-ornament, .button.cyan.disabled .button-ornament, .button.gray.disabled .button-ornament {
  background-color: var(--gray-600)
}

.button.blue.disabled .arrow-icon, .button.red.disabled .arrow-icon, .button.green.disabled .arrow-icon, .button.violet.disabled .arrow-icon, .button.yellow.disabled .arrow-icon, .button.cyan.disabled .arrow-icon, .button.gray.disabled .arrow-icon {
  display: none
}

.button.blue.disabled .cross-icon, .button.red.disabled .cross-icon, .button.green.disabled .cross-icon, .button.violet.disabled .cross-icon, .button.yellow.disabled .cross-icon, .button.cyan.disabled .cross-icon, .button.gray.disabled .cross-icon {
  display: block
}

.button.blue.disabled:hover, .button.red.disabled:hover, .button.green.disabled:hover, .button.violet.disabled:hover, .button.yellow.disabled:hover, .button.cyan.disabled:hover, .button.gray.disabled:hover {
  background-color: var(--gray-900)
}

.button.blue.disabled:hover .button-ornament, .button.red.disabled:hover .button-ornament, .button.green.disabled:hover .button-ornament, .button.violet.disabled:hover .button-ornament, .button.yellow.disabled:hover .button-ornament, .button.cyan.disabled:hover .button-ornament, .button.gray.disabled:hover .button-ornament {
  background-color: var(--gray-600)
}

.button.blue {
  background-color: var(--blue-500)
}

.button.blue .button-ornament {
  background-color: #0270c5
}

.button.blue:hover {
  background-color: #3ca4f5
}

.button.red {
  background-color: var(--brand-500)
}

.button.red .button-ornament {
  background-color: #bd0244
}

.button.red:hover {
  background-color: #f52d73
}

.button.green {
  background-color: var(--green-500)
}

.button.green .button-ornament {
  background-color: #37a800
}

.button.green:hover {
  background-color: #70de39
}

.button.violet {
  background-color: var(--violet-500)
}

.button.violet .button-ornament {
  background-color: #4d2498
}

.button.violet:hover {
  background-color: #885dd5
}

.button.cyan {
  background-color: var(--cyan-500)
}

.button.cyan .button-ornament {
  background-color: #00ab9d
}

.button.cyan:hover {
  background-color: #24e7d7
}

.button.yellow {
  background-color: var(--amber-500)
}

.button.yellow .button-ornament {
  background-color: #ee7c00
}

.button.yellow:hover {
  background-color: #ffbf24
}

.button.gray {
  background-color: var(--gray-300)
}

.button.gray .button-ornament {
  background-color: #b2b2b2
}

.button.gray:hover {
  background-color: var(--blue-500)
}

.button.gray:hover .button-ornament {
  background-color: #0270c5
}

.button.fb {
  background-color: #4153b3
}

.button.twt {
  background-color: #10caff
}

.button.gplus {
  background-color: var(--amber-500)
}

.button:hover .arrow-icon {
  -o-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg)
}

.button .button-ornament {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--gray-600);
  position: absolute;
  top: 6px;
  right: 6px
}

.button .track-icon {
  fill: var(--white)
}

.button .arrow-icon {
  fill: var(--white);
  position: absolute;
  top: 12px;
  left: 15px;
  transition: transform .3s ease-in-out
}

.button .cross-icon {
  fill: var(--white);
  position: absolute;
  top: 12px;
  left: 50%;
  margin-left: -5px;
  display: none
}

.button-social {
  width: 220px;
  height: 46px;
  border-radius: 200px;
  color: var(--white);
  line-height: 46px;
  text-align: center
}

.button-social.big {
  width: 278px
}

.button-social.fb {
  background-color: #4153b3
}

.button-social.twt {
  background-color: #10caff
}

.button-social.gplus {
  background-color: var(--amber-500)
}

.button-social.discord {
  background-color: var(--violet-500);
}

.button-social .facebook-icon {
  position: relative;
  top: 2px;
  margin-right: 6px
}

.button-social .twitter-icon {
  position: relative;
  top: 1px;
  margin-right: 8px
}

.button-social .gplus-icon {
  position: relative;
  top: 2px;
  margin-right: 6px
}

.button-social-list {
  display: flex;
  flex-flow: row wrap
}

.button-social-list.big .button-social {
  margin-right: 18px
}

.button-social-list .button-social {
  margin-right: 20px
}

.button-social-list .button-social:last-child {
  margin-right: 0
}

.button-replay {
  color: var(--color-text-primary);
  cursor: pointer
}

.button-replay:hover {
  color: var(--violet-500)
}

.button-replay .play-button-icon {
  fill: var(--violet-500);
  position: relative;
  top: 1px;
  margin-right: 6px
}

.decorated-link {
  color: var(--color-text-primary);
  cursor: pointer
}

.decorated-link:hover {
  color: var(--violet-500)
}

.decorated-link.red {
  color: var(--brand-500)
}

.decorated-link .bars-icon {
  fill: var(--violet-500);
  margin-right: 6px
}

.link-text-form {
  color: var(--color-text-muted);
  transition: all .15s ease-in-out
}

.link-text-form.blue:hover {
  color: var(--blue-500)
}

.link-text-form.red:hover {
  color: var(--brand-500)
}

.link-text-form.yellow:hover {
  color: var(--amber-500)
}

.link-text-form.green:hover {
  color: var(--green-500)
}

.link-text-form.violet:hover {
  color: var(--violet-500)
}

.link-text-form.cyan:hover {
  color: var(--cyan-500)
}

.button-popup-demo {
  display: block;
  width: 200px;
  margin: 40px auto 80px;
  text-align: center
}

label {
  display: block;
  color: var(--color-text-primary);
  font-family: "Exo", sans-serif;
  font-size: .6875em;
  text-transform: uppercase
}

label.required:after {
  content: '*';
  position: relative;
  left: 2px
}

label.blue.required:after {
  color: var(--blue-500)
}

label.red.required:after {
  color: var(--brand-500)
}

label.green.required:after {
  color: var(--green-500)
}

label.yellow.required:after {
  color: var(--amber-500)
}

label.violet.required:after {
  color: var(--violet-500)
}

label.cyan.required:after {
  color: var(--cyan-500)
}

label + input, label + textarea, label + .submit-input, label + .select-block, label + .counter {
  margin-top: 12px
}

.rl-label {
  font-weight: 700
}

::-webkit-input-placeholder {
  opacity: .4
}

:-ms-input-placeholder {
  opacity: .4
}

::-ms-placeholder {
  opacity: .4
}

input[type="text"].blue:focus, input[type="password"].blue:focus, input[type="email"].blue:focus, textarea.blue:focus {
  border-color: var(--blue-500)
}

input[type="text"].red:focus, input[type="password"].red:focus, input[type="email"].red:focus, textarea.red:focus {
  border-color: var(--brand-500)
}

input[type="text"].green:focus, input[type="password"].green:focus, input[type="email"].green:focus, textarea.green:focus {
  border-color: var(--green-500)
}

input[type="text"].violet:focus, input[type="password"].violet:focus, input[type="email"].violet:focus, textarea.violet:focus {
  border-color: var(--violet-500)
}

input[type="text"].yellow:focus, input[type="password"].yellow:focus, input[type="email"].yellow:focus, textarea.yellow:focus {
  border-color: var(--amber-500)
}

input[type="text"].cyan:focus, input[type="password"].cyan:focus, input[type="email"].cyan:focus, textarea.cyan:focus {
  border-color: var(--cyan-500)
}

input[type="text"], input[type="password"], input[type="email"], textarea, select {
  width: 100%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: "Roboto", sans-serif;
  font-size: .8125em;
  transition: border-color .2s ease-in-out
}

input[type="text"]:disabled, input[type="password"]:disabled, input[type="email"]:disabled, textarea:disabled, select:disabled {
  background-color: var(--gray-300);
  pointer-events: none
}

input[type="text"], input[type="password"], input[type="email"], select {
  height: 46px;
  padding: 0 20px;
  border-radius: 200px
}

input[type="text"].input-line, input[type="password"].input-line, input[type="email"].input-line {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background-color: transparent;
  color: var(--white)
}

textarea {
  min-height: 160px;
  padding: 12px 20px;
  border-radius: 24px
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer
}

input[type="checkbox"], input[type="radio"] {
  display: none
}

input[type="checkbox"]:checked + .checkbox-box {
  border-color: var(--gray-900);
  background-color: var(--gray-900)
}

input[type="checkbox"]:checked + .checkbox-box.blue {
  border-color: var(--blue-500);
  background-color: var(--blue-500)
}

input[type="checkbox"]:checked + .checkbox-box.red {
  border-color: var(--brand-500);
  background-color: var(--brand-500)
}

input[type="checkbox"]:checked + .checkbox-box.green {
  border-color: var(--green-500);
  background-color: var(--green-500)
}

input[type="checkbox"]:checked + .checkbox-box.violet {
  border-color: var(--violet-500);
  background-color: var(--violet-500)
}

input[type="checkbox"]:checked + .checkbox-box.yellow {
  border-color: var(--amber-500);
  background-color: var(--amber-500)
}

input[type="checkbox"]:checked + .checkbox-box.cyan {
  border-color: var(--cyan-500);
  background-color: var(--cyan-500)
}

input[type="checkbox"]:checked + .checkbox-box .cross-cb-icon {
  display: block
}

input[type="checkbox"]:disabled + .checkbox-box {
  border-color: var(--color-border);
  background-color: var(--gray-300)
}

input[type="checkbox"]:disabled + .checkbox-box .cross-cb-icon {
  display: block;
  fill: var(--gray-500)
}

input[type="radio"]:checked + .radio-circle {
  border: 5px solid var(--gray-900)
}

input[type="radio"]:checked + .radio-circle.blue {
  border: 5px solid var(--blue-500)
}

input[type="radio"]:checked + .radio-circle.red {
  border: 5px solid var(--brand-500)
}

input[type="radio"]:checked + .radio-circle.green {
  border: 5px solid var(--green-500)
}

input[type="radio"]:checked + .radio-circle.violet {
  border: 5px solid var(--violet-500)
}

input[type="radio"]:checked + .radio-circle.yellow {
  border: 5px solid var(--amber-500)
}

input[type="radio"]:checked + .radio-circle.cyan {
  border: 5px solid var(--cyan-500)
}

input[type="radio"]:disabled + .radio-circle {
  border: 5px solid var(--color-border);
  background-color: var(--gray-500)
}

.check-item-list, .radio-item-list {
  display: flex;
  flex-flow: column wrap
}

.check-item-list .radio-item, .check-item-list .checkbox-item, .radio-item-list .radio-item, .radio-item-list .checkbox-item {
  margin-top: 16px
}

.check-item-list .radio-item:nth-child(1), .check-item-list .checkbox-item:nth-child(1), .radio-item-list .radio-item:nth-child(1), .radio-item-list .checkbox-item:nth-child(1) {
  margin-top: 0
}

.checkbox-item, .radio-item {
  display: inline-block;
  height: 16px;
  position: relative
}

.checkbox-item .checkbox-box, .checkbox-item .radio-circle, .radio-item .checkbox-box, .radio-item .radio-circle {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none
}

.checkbox-item .rl-label, .radio-item .rl-label {
  padding: 2px 0 0 26px;
  font-size: .625em;
  cursor: pointer
}

.checkbox-item.disabled .rl-label, .radio-item.disabled .rl-label {
  cursor: auto
}

.radio-item.starred {
  position: relative
}

.radio-item.starred .rating-ornament {
  position: absolute;
  top: -4px;
  left: 18px;
  pointer-events: none
}

.radio-item.starred .rl-label {
  padding-left: 96px;
  white-space: nowrap
}

.checkbox-box, .radio-circle {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border)
}

.checkbox-box {
  border-radius: 2px;
  position: relative
}

.checkbox-box .cross-cb-icon {
  position: absolute;
  top: 3px;
  left: 50%;
  margin-left: -4px;
  display: none
}

.radio-circle {
  border-radius: 50%
}

.select-block {
  position: relative
}

.select-block .arrow-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  pointer-events: none;
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.select-block.small .arrow-icon {
  top: 16px
}

.form-row {
  margin-top: 22px
}

.form-row:after {
  content: '';
  display: table;
  clear: both
}

.form-row.small-space {
  margin-top: 12px
}

.form-row:first-child {
  margin-top: 0
}

.form-row .form-item {
  margin-top: 12px
}

.form-row .form-item:first-child {
  margin-top: 0
}

.form-row .form-item.half {
  width: 48%;
  margin-top: 0
}

.form-row .form-item.half:first-child {
  float: left
}

.form-row .form-item.half:last-child {
  float: right
}

.form-row + .check-radio-list {
  margin-top: 26px
}

.form-row + .check-radio-list.multiple-items {
  margin-top: 26px
}

.form-item.blue .rl-label.required:after {
  color: var(--blue-500)
}

.form-item.blue input[type="text"]:focus, .form-item.blue input[type="password"]:focus, .form-item.blue select:focus, .form-item.blue textarea:focus {
  border-color: var(--blue-500)
}

.form-item.red .rl-label.required:after {
  color: var(--brand-500)
}

.form-item.red input[type="text"]:focus, .form-item.red input[type="password"]:focus, .form-item.red select:focus, .form-item.red textarea:focus {
  border-color: var(--brand-500)
}

.form-item.green .rl-label.required:after {
  color: var(--green-500)
}

.form-item.green input[type="text"]:focus, .form-item.green input[type="password"]:focus, .form-item.green select:focus, .form-item.green textarea:focus {
  border-color: var(--green-500)
}

.form-item.yellow .rl-label.required:after {
  color: var(--amber-500)
}

.form-item.yellow input[type="text"]:focus, .form-item.yellow input[type="password"]:focus, .form-item.yellow select:focus, .form-item.yellow textarea:focus {
  border-color: var(--amber-500)
}

.form-item.violet .rl-label.required:after {
  color: var(--violet-500)
}

.form-item.violet input[type="text"]:focus, .form-item.violet input[type="password"]:focus, .form-item.violet select:focus, .form-item.violet textarea:focus {
  border-color: var(--violet-500)
}

.form-item.cyan .rl-label.required:after {
  color: var(--cyan-500)
}

.form-item.cyan input[type="text"]:focus, .form-item.cyan input[type="password"]:focus, .form-item.cyan select:focus, .form-item.cyan textarea:focus {
  border-color: var(--cyan-500)
}

.form-item.small input[type="text"], .form-item.small input[type="password"], .form-item.small select {
  height: 34px
}

.form-item .form-item-message {
  margin-top: 14px;
  padding-left: 20px;
  color: #bfbfbf;
  font-size: .75em;
  line-height: 1em
}

.form-item .form-item-message .highlight {
  color: var(--blue-500)
}

.submit-input {
  position: relative
}

.submit-input.blue .submit-input-button {
  background-color: var(--blue-500)
}

.submit-input.blue .submit-input-message {
  color: var(--blue-500)
}

.submit-input.red .submit-input-button {
  background-color: var(--brand-500)
}

.submit-input.red .submit-input-message {
  color: var(--brand-500)
}

.submit-input.violet .submit-input-button {
  background-color: var(--violet-500)
}

.submit-input.violet .submit-input-message {
  color: var(--violet-500)
}

.submit-input.yellow .submit-input-button {
  background-color: var(--amber-500)
}

.submit-input.yellow .submit-input-message {
  color: var(--amber-500)
}

.submit-input.green .submit-input-button {
  background-color: var(--green-500)
}

.submit-input.green .submit-input-message {
  color: var(--green-500)
}

.submit-input.cyan .submit-input-button {
  background-color: var(--cyan-500)
}

.submit-input.cyan .submit-input-message {
  color: var(--cyan-500)
}

.submit-input.medium input[type="text"], .submit-input.medium input[type="email"] {
  height: 46px
}

.submit-input.medium .submit-input-button {
  top: 6px;
  right: 6px
}

.submit-input.full .submit-input-button {
  width: 40px;
  height: 40px;
  top: 0;
  right: 0
}

.submit-input.tall input[type="text"], .submit-input.tall input[type="email"] {
  height: 46px
}

.submit-input.tall .submit-input-button {
  width: 46px;
  height: 46px
}

.submit-input input[type="text"], .submit-input input[type="email"] {
  height: 40px;
  font-size: .75em
}

.submit-input input[type="text"]::-webkit-input-placeholder, .submit-input input[type="email"]::-webkit-input-placeholder {
  color: #b8b8b8;
  opacity: 1
}

.submit-input input[type="text"]:-ms-input-placeholder, .submit-input input[type="email"]:-ms-input-placeholder {
  color: #b8b8b8;
  opacity: 1
}

.submit-input input[type="text"]::-ms-placeholder, .submit-input input[type="email"]::-ms-placeholder {
  color: #b8b8b8;
  opacity: 1
}

.submit-input .submit-input-button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--gray-900);
  cursor: pointer;
  position: absolute;
  top: 3px;
  right: 3px
}

.submit-input .submit-input-button .arrow-icon {
  fill: var(--white);
  position: absolute;
  top: 12px;
  left: 15px
}

.submit-input .submit-input-button .check-icon {
  fill: var(--white);
  position: absolute;
  top: 9px;
  left: 8px
}

.submit-input .submit-input-button .cross-cb-icon {
  position: absolute;
  top: 9px;
  left: 9px
}

.submit-input .submit-input-button .search-icon {
  fill: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.submit-input .submit-input-message {
  margin-top: 8px;
  font-size: .75em;
  line-height: 1em
}

.submit-button-wrap {
  margin-top: 40px;
  text-align: left
}

.submit-button-wrap.right {
  text-align: right
}

.submit-button-wrap .submit-button {
  display: inline-block
}

.counter {
  height: 34px;
  padding-top: 10px;
  border-radius: 200px;
  border: 1px solid var(--color-border);
  position: relative
}

.counter.small {
  width: 120px
}

.counter.medium {
  height: 46px;
  padding: 15px
}

.counter.medium .counter-value {
  font-size: .8125em
}

.counter.medium .counter-control {
  top: 18px
}

.counter .counter-control {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 13px;
  cursor: pointer
}

.counter .counter-control .counter-control-icon {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0
}

.counter .counter-control.substract {
  left: 18px
}

.counter .counter-control.add {
  right: 18px
}

.counter .counter-value {
  color: var(--color-text-primary);
  font-size: .75em;
  line-height: 1em;
  text-align: center;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none
}

.check-radio-list {
  margin-top: 30px;
  display: flex;
  flex-flow: row wrap
}

.check-radio-list .checkbox-item, .check-radio-list .radio-item {
  width: 176px;
  margin-bottom: 26px
}

.check-radio-list .checkbox-item.starred, .check-radio-list .radio-item.starred {
  width: 100%
}

.check-radio-list .checkbox-item:last-child, .check-radio-list .radio-item:last-child {
  margin-bottom: 0
}

.check-radio-list.multiple-items {
  margin-top: 0
}

.check-radio-list.multiple-items .checkbox-item, .check-radio-list.multiple-items .radio-item {
  width: 50%;
  margin: 26px 0 0
}

.check-radio-list.multiple-items .checkbox-item:nth-child(1), .check-radio-list.multiple-items .checkbox-item:nth-child(2), .check-radio-list.multiple-items .radio-item:nth-child(1), .check-radio-list.multiple-items .radio-item:nth-child(2) {
  margin-top: 0
}

.check-radio-list + .button {
  margin-top: 26px
}

.form-actions {
  margin-top: 40px;
  display: flex;
  flex-flow: row wrap
}

.form-actions.full {
  display: block
}

.form-actions.full .button {
  margin-right: 0
}

.form-actions.right {
  justify-content: flex-end
}

.form-actions .button {
  margin-right: 12px
}

.form-actions .button:last-child {
  margin-right: 0
}

.form-box-wrap {
  display: flex;
  flex-flow: row nowrap;
  max-width: 800px;
  width: 95%;
  margin: 0 auto;
  background-color: var(--color-surface-base);
  position: relative
}

.form-box-wrap.shadowed {
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08)
}

.form-box-wrap .form-box-body {
  width: 430px
}

.form-box-wrap .form-box-body .form-box {
  width: 100%
}

.form-box-wrap .tab-form-buttons {
  width: 430px;
  display: flex;
  flex-flow: row wrap
}

.form-box-wrap .tab-form-buttons .tab-form-button {
  width: 50%;
  height: 58px;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  color: #bfbfbf;
  line-height: 58px;
  text-align: center;
  cursor: pointer
}

.form-box-wrap .tab-form-buttons .tab-form-button.selected {
  color: var(--color-text-primary)
}

.form-box-wrap .tab-form-buttons .tab-form-button:last-child {
  border-right: none
}

.form-box-heading {
  padding: 26px 30px 34px;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between
}

.form-box-heading.login {
  background: url("../img/section/login-bg.jpg") no-repeat center, linear-gradient(45deg, #1c59f3, #00d8ff);
  background-size: cover
}

.form-box-heading.register {
  background: url("../img/section/register-bg.jpg") no-repeat center, linear-gradient(45deg, #420ed9, #ff055d);
  background-size: cover
}

.form-box-heading .form-box-heading-title {
  color: var(--white);
  line-height: 76px;
  word-break: break-all
}

.form-box-heading .form-box-heading-subtitle {
  width: 220px;
  margin-top: 30px;
  color: var(--white);
  line-height: 32px
}

.form-box-heading .form-box-heading-text {
  color: var(--white)
}

.form-box-heading .form-box-heading-text a {
  color: var(--white);
  font-weight: 700;
  font-style: italic
}

.form-box {
  max-width: 430px;
  width: 95%;
  padding: 34px 30px;
  border-radius: 6px;
  margin: 0 auto;
  background-color: var(--color-surface-base);
  position: relative
}

.form-box.medium {
  max-width: 770px
}

.form-box.big {
  max-width: 930px
}

.form-box.shadowed {
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08)
}

.form-box .character-selection-list {
  display: none
}

.form-box .character-switch-list {
  position: absolute;
  top: 68px
}

.form-box .character-switch-list.left {
  left: -70px
}

.form-box .character-switch-list.right {
  right: -70px
}

.form-box .section-title-wrap {
  margin-bottom: 30px
}

.form-box .button-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gray-900);
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px
}

.form-box .button-close.blue {
  background-color: var(--blue-500)
}

.form-box .button-close.red {
  background-color: var(--brand-500)
}

.form-box .button-close.yellow {
  background-color: var(--amber-500)
}

.form-box .button-close.green {
  background-color: var(--green-500)
}

.form-box .button-close.violet {
  background-color: var(--violet-500)
}

.form-box .button-close.cyan {
  background-color: var(--cyan-500)
}

.form-box .button-close .cross-icon {
  fill: var(--white);
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -5px;
  pointer-events: none
}

.form-box .social-buttons {
  width: 100%;
  display: flex;
  flex-flow: row wrap
}

.form-box .social-buttons .button-social {
  width: 48%;
  margin: 20px 0
}

.form-box .social-buttons .button-social:last-child {
  margin-left: auto
}

.form-box .form-info-text {
  width: 80%;
  text-align: center;
  margin: 26px auto 0
}

.form-confirm-row {
  margin-top: 26px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.quick-form-wrap {
  background-color: var(--color-surface-base)
}

.quick-form {
  padding: 34px 0
}

.quick-form .section-title-wrap {
  margin-bottom: 26px
}

@media screen and (max-width: 1260px) {
  .form-box .character-selection-list {
    display: flex;
    flex-flow: row wrap
  }

  .form-box .character-switch-list {
    display: none
  }
}

@media screen and (max-width: 960px) {
  .form-box-wrap {
    max-width: 430px
  }

  .form-box-wrap .form-box-heading {
    display: none
  }

  .form-box-wrap .form-box-body {
    margin: 0 auto
  }

  .form-box-wrap .form-box-body .tab-form-buttons {
    width: 100%
  }

  .form-box .character-selection-list {
    display: block
  }
}

@media screen and (max-width: 680px) {
  .form-row .form-item.half {
    width: 100%
  }

  .form-row .form-item.half:first-child, .form-row .form-item.half:last-child {
    float: none
  }

  .form-row .form-item.half:last-child {
    margin-top: 22px
  }

  .submit-button-wrap {
    text-align: center
  }

  .submit-button-wrap.right {
    text-align: center
  }

  .form-actions {
    display: block
  }

  .form-actions.full .button {
    margin: 0
  }

  .form-actions .button {
    width: 100%;
    margin: 0 0 16px 0
  }

  .form-actions .button:last-child {
    margin-bottom: 0
  }
}

.search-popup {
  width: 100%;
  height: 100%;
  padding-top: 300px;
  background-color: rgba(28, 149, 243, 0.94);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out
}

.search-popup.open {
  opacity: 1;
  visibility: visible
}

.search-popup .close-button {
  position: absolute;
  top: 50px;
  right: 50px;
  cursor: pointer
}

.search-popup .cross-icon {
  fill: var(--white)
}

.search-popup .search-popup-form {
  width: 850px;
  margin: 0 auto
}

.search-popup label.accessible-label {
  visibility: hidden;
}

.search-popup .input-line, .search-popup .search-popup-text {
  color: var(--white)
}

.search-popup .input-line {
  height: auto;
  padding: 0 0 32px;
  font-family: "Exo", sans-serif;
  font-size: 3.5em;
  font-weight: 700;
  text-transform: uppercase
}

.search-popup .input-line::-webkit-input-placeholder {
  color: var(--white);
  opacity: 1;
  text-align: center
}

.search-popup .input-line:-ms-input-placeholder {
  color: var(--white);
  opacity: 1;
  text-align: center
}

.search-popup .input-line::-ms-placeholder {
  color: var(--white);
  opacity: 1;
  text-align: center
}

.search-popup .input-line.animate {
  animation: translate-from-bottom .4s ease-in 1 forwards
}

.search-popup .search-popup-text {
  margin-top: 30px;
  font-size: .75em;
  text-align: center;
  -o-transform: translate(30%, 0);
  -moz-transform: translate(30%, 0);
  -ms-transform: translate(30%, 0);
  -webkit-transform: translate(30%, 0);
  transform: translate(30%, 0);
  opacity: 0
}

.search-popup .search-popup-text.animate {
  animation: translate-from-right .6s ease-in 1 forwards;
  animation-delay: .25s
}

.popup-wrap {
  display: none
}

.popup-wrap.full {
  width: 100%
}

.popup-wrap.mid {
  width: 770px
}

.popup-wrap.medium {
  width: 800px
}

.popup-wrap.big {
  width: 930px
}

.popup-wrap .form-box, .popup-wrap .form-box-wrap {
  width: 100%
}

@media screen and (max-width: 960px) {
  .search-popup {
    padding-left: 20px;
    padding-right: 20px
  }

  .search-popup .search-popup-form {
    width: 100%
  }

  .search-popup .search-popup-form .input-line {
    font-size: 2.5em
  }

  .popup-wrap.medium {
    width: 430px
  }

  .popup-wrap.mid, .popup-wrap.big {
    width: 95%
  }
}

@media screen and (max-width: 680px) {
  .search-popup .search-popup-form .input-line {
    font-size: 1.375em
  }
}

@media screen and (max-width: 480px) {
  .popup-wrap {
    width: 95%
  }

  .popup-wrap.medium {
    width: 95%
  }
}

/* Ensure navigation always stays on top */
.navigation-wrap {
  background-color: var(--color-surface-base);
  position: relative;
  z-index: 999999
}

/* Prevent content elements from appearing above navigation */
.post-preview,
.post-preview *,
.tag-ornament,
.banner-post,
.banner-post *,
.layout-content-full,
.layout-content-full * {
  z-index: auto !important;
  max-z-index: 999998 !important;
}

.navigation-wrap.void {
  background-color: transparent
}

.navigation-wrap.void .navigation:before, .navigation-wrap.void .navigation:after {
  display: block
}

.navigation-wrap.stick-on-top {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 999999
}

.navigation {
  height: 92px;
  background-color: var(--color-surface-base);
  overflow: hidden
}

.navigation:before, .navigation:after {
  content: '';
  width: 60px;
  height: 92px;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 0;
  display: none
}

.navigation:before {
  left: 50%;
  margin-left: -645px
}

.navigation:after {
  right: 50%;
  margin-right: -645px
}

.navigation .logo {
  float: left;
  margin-top: 25px
}

.navigation .search-button, .navigation .inventory-button, .navigation .main-menu {
  float: right
}

.navigation .search-button, .navigation .inventory-button {
  height: 100%;
  cursor: pointer;
  position: relative
}

.navigation .search-button {
  width: 80px;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease
}

.navigation .search-button:hover {
  transform: scale(1.05)
}

.navigation .search-button:hover .search-icon {
  fill: var(--violet-500)
}

.navigation .search-button .search-icon {
  position: absolute;
  top: 33px;
  left: 50%;
  margin-left: -12px;
  transition: fill 0.2s ease
}

.navigation .inventory-button {
  width: 50px
}

.navigation .inventory-button .inventory-icon, .navigation .inventory-button .inventory-close-icon {
  position: absolute;
  top: 33px;
  left: 50%;
  margin-left: -12px
}

.navigation .inventory-button .inventory-close-icon {
  visibility: hidden
}

.navigation .inventory-button .inventory-item-quantity-wrap {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--blue-500);
  position: absolute;
  top: 23px;
  right: 0
}

.navigation .inventory-button .inventory-item-quantity-wrap .inventory-item-quantity {
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 900;
  line-height: 21px;
  text-align: center
}

.main-menu:after {
  content: '';
  display: table;
  clear: both
}

.main-menu .main-menu-item {
  float: left
}

.main-menu .main-menu-item:hover .main-menu-item-link {
  background-color: #f5f9fc;
  border-color: rgba(116, 66, 206, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
}

.main-menu .main-menu-item .main-menu-item-link.active {
  background-color: var(--violet-500);
  border-color: var(--violet-500);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(116, 66, 206, 0.4)
}

.main-menu .main-menu-item .main-menu-item-link.active:before {
  background-color: rgba(255, 255, 255, 0.3)
}

.main-menu .main-menu-item .main-menu-item-link .highlight {
  color: var(--blue-500)
}


.main-menu .main-menu-item:hover .main-menu-item-link:before {
  opacity: 1;
  left: 0
}

.main-menu .main-menu-item:hover .submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.main-menu .main-menu-item:hover > .dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.main-menu .main-menu-item .dropdown {
  top: 92px;
  margin-top: 4px
}

.main-menu .main-menu-item .dropdown:before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: transparent;
  position: absolute;
  top: -4px;
  left: 0
}

.main-menu .main-menu-item-link {
  display: block;
  padding: 0 32px;
  color: var(--color-text-primary);
  font-family: "Exo", sans-serif;
  font-size: .8125em;
  font-weight: 700;
  line-height: 92px;
  transition: all .3s ease-in-out;
  position: relative;
  overflow: hidden
}

.main-menu .main-menu-item-link:before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: var(--blue-500);
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 0;
  transition: all .3s ease-in-out
}

.main-menu .main-menu-item-link .arrow-icon {
  margin-left: 5px;
  position: relative;
  top: -2px;
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.submenu {
  width: 100%;
  margin-top: 4px;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 92px;
  left: 0;
  z-index: 999999;
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -o-transform: translate(-25%, 0);
  -moz-transform: translate(-25%, 0);
  -ms-transform: translate(-25%, 0);
  -webkit-transform: translate(-25%, 0);
  transform: translate(-25%, 0);
  transition: all .45s ease-in-out
}

.submenu:after {
  content: '';
  display: table;
  clear: both
}

.submenu:before {
  content: '';
  width: 100%;
  height: 4px;
  background-color: transparent;
  position: absolute;
  top: -4px;
  left: 0
}

.submenu.void {
  width: 1170px;
  background-color: transparent;
  left: 50%;
  margin-left: -585px;
  box-shadow: none
}

.submenu.void .submenu-item {
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08)
}

.submenu .submenu-item {
  padding: 32px 0 40px;
  background-color: var(--color-surface-base)
}

.submenu .submenu-item:after {
  content: '';
  display: table;
  clear: both
}

.submenu .submenu-item.padded {
  padding: 32px 30px
}

.submenu .submenu-item.not-padded {
  padding: 0
}

.submenu .submenu-item.v2 {
  float: right;
  padding: 0
}

.submenu .submenu-item .line-separator {
  margin: 32px 0
}

.submenu .news-items-preview {
  display: grid;
  grid-template-columns:repeat(4, 255px);
  grid-gap: 30px
}

.submenu .news-items-preview .post-preview {
  width: 255px
}

.link-sections-wrap {
  float: left;
  margin-right: 30px
}

.link-sections-wrap:last-child {
  margin-right: 0
}

.link-sections-wrap .link-sections {
  margin-bottom: 22px
}

.link-sections-wrap .link-sections:last-child {
  margin-bottom: 0
}

.link-sections {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative
}

.link-sections.padded {
  padding: 32px 0 24px
}

.link-section:after {
  content: '';
  display: table;
  clear: both
}

.link-section.full {
  width: 100%
}

.link-section .link-list {
  float: left;
  margin: 18px 30px 0 0
}

.link-section .link-list:last-child {
  margin-right: 0
}

.link-section .post-preview-showcase {
  margin-top: 26px
}

.link-section .widget-match-box {
  width: 270px
}

.link-list {
  width: 160px
}

.link-list.small {
  width: 120px
}

.link-list.medium {
  width: 170px
}

.link-list.v2 .link-list-item a {
  font-weight: 700;
  line-height: 28px
}

.link-list.v2 .link-list-item a .arrow-icon {
  transition: all .2s ease-in-out
}

.link-list.v2 .link-list-item a:hover {
  color: var(--blue-500)
}

.link-list.v2 .link-list-item a:hover .arrow-icon {
  margin-left: 4px
}

.link-list.negative .link-list-item a {
  color: var(--white)
}

.link-list.negative .link-list-item a .arrow-icon {
  fill: var(--white);
  margin-right: 4px
}

.link-list-item a {
  display: inline-block;
  color: var(--color-text-secondary);
  font-family: "Roboto", sans-serif;
  font-size: .75em;
  line-height: 32px
}

.link-list-item a:hover {
  color: var(--color-text-primary);
  font-weight: 700
}

.news-section-options-wrap {
  border-bottom: 1px solid var(--color-border)
}

.news-section-options:after {
  content: '';
  display: table;
  clear: both
}

.news-section-options .news-section-option {
  float: left
}

.news-section-option {
  width: 234px;
  height: 57px;
  padding-top: 24px;
  text-align: center;
  cursor: pointer;
  position: relative
}

.news-section-option:after {
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9999
}

.news-section-option.active.blue:after {
  background-color: var(--blue-500)
}

.news-section-option.active.red:after {
  background-color: var(--brand-500)
}

.news-section-option.active.green:after {
  background-color: var(--green-500)
}

.news-section-option.active.violet:after {
  background-color: var(--violet-500)
}

.news-section-option.active.yellow:after {
  background-color: var(--amber-500)
}

.news-section-option.active.cyan:after {
  background-color: var(--cyan-500)
}

.news-section-option.active .news-section-option-title {
  color: var(--color-text-primary)
}

.news-section-option .news-section-option-title {
  color: #bfbfbf;
  font-size: .75em
}

.news-section-slider {
  position: absolute;
  top: 32px;
  right: 0
}

.news-section-slider .slider-controls {
  position: absolute;
  top: 0;
  left: -56px
}

.news-section-slider .slider-controls .slider-control {
  position: absolute;
  left: 0
}

.news-section-slider .slider-controls .slider-control.control-previous {
  top: 40px
}

.news-section-slider .slider-controls .slider-control.control-next {
  top: 0
}

.news-section-items-wrap {
  height: 294px;
  overflow: hidden
}

.news-section-items-wrap .news-section-items .post-preview {
  width: 270px
}

.news-section-categories-wrap {
  height: 362px
}

.news-section-categories .link-sections {
  width: 1170px;
  background-color: var(--color-surface-base)
}

.dropdown-inner-list {
  padding: 30px 0;
  border-top: 1px solid var(--color-border)
}

.dropdown-inner-list .dropdown-inner-list-item {
  margin-bottom: 26px;
  padding-right: 16px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  cursor: pointer
}

.dropdown-inner-list .dropdown-inner-list-item:last-child {
  margin-bottom: 0
}

.dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-title, .dropdown-inner-list .dropdown-inner-list-item .dropdown-inner-list-item-value {
  color: var(--color-text-muted)
}

.dropdown-list {
  width: 270px;
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08)
}

.dropdown-list.void {
  box-shadow: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.dropdown-list.void .dropdown-list-item > .dropdown-list-item-link {
  padding-left: 0
}

.dropdown-list.accordion {
  box-shadow: none;
  border-bottom: 1px solid var(--color-border)
}

.dropdown-list.accordion .dropdown-list-item > .dropdown-list-item-link {
  padding-left: 0;
  color: var(--color-text-primary)
}

.dropdown-list.centered {
  margin: 0 auto
}

.dropdown-list.violet .dropdown-list-item > .dropdown-list-item-link {
  color: var(--color-text-primary)
}

.dropdown-list.violet .dropdown-list-item > .arrow-icon {
  fill: var(--gray-900)
}

.dropdown-list.violet .dropdown-list-item:hover > .dropdown-list-item-link {
  color: var(--white);
  background-color: var(--violet-500)
}

.dropdown-list.violet .dropdown-list-item:hover > .arrow-icon {
  fill: var(--white)
}

.dropdown-list .dropdown-list-item {
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.dropdown-list .dropdown-list-item:last-child {
  border-bottom: none
}

.dropdown-list .dropdown-list-item.active > .dropdown-list-item-link, .dropdown-list .dropdown-list-item:hover > .dropdown-list-item-link {
  color: var(--color-text-primary)
}

.dropdown-list .dropdown-list-item.active > .arrow-icon, .dropdown-list .dropdown-list-item:hover > .arrow-icon {
  fill: var(--gray-900)
}

.dropdown-list .dropdown-list-item.selected .accordion-action {
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg)
}

.dropdown-list .dropdown-list-item > .dropdown-list-item-link {
  display: block;
  height: 57px;
  padding: 0 30px;
  background-color: var(--color-surface-base);
  color: #bfbfbf;
  font-family: "Exo", sans-serif;
  font-size: .75em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 57px;
  cursor: pointer;
  transition: all .2s ease-in-out
}

.dropdown-list .dropdown-list-item > .arrow-icon {
  fill: #bfbfbf;
  position: absolute;
  top: 23px;
  right: 27px;
  pointer-events: none;
  transition: all .2s ease-in-out
}

.dropdown-list .dropdown-list-item .accordion-action {
  position: absolute;
  top: 18px;
  right: 16px;
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
  pointer-events: none
}

.dropdown {
  position: absolute;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -o-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all .4s ease-in-out
}

.dropdown .dropdown-list-item:hover > .dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.dropdown .dropdown-list-item .dropdown {
  margin-top: 0;
  top: 0;
  left: 100%;
  z-index: -1
}

.submenu-slider:after {
  content: '';
  display: table;
  clear: both
}

.submenu-slider .submenu-slider-options {
  border-right: 1px solid var(--color-border);
  float: left;
  box-shadow: none
}

.submenu-slider .submenu-slider-items-wrap {
  float: right;
  width: 730px;
  height: 405px
}

.submenu-slider .submenu-slider-items .submenu-slider-item {
  width: 730px;
  height: 405px;
  padding: 32px 150px 32px 30px;
  background-color: var(--color-surface-base)
}

.submenu-slider .submenu-slider-items .submenu-slider-item:after {
  content: '';
  display: table;
  clear: both
}

.submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-1, .submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-4, .submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-7 {
  background: url("../img/dropdown/bg-01.png") no-repeat 100% 0
}

.submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-2, .submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-5 {
  background: url("../img/dropdown/bg-02.png") no-repeat 100% 0
}

.submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-3, .submenu-slider .submenu-slider-items .submenu-slider-item.submenu-slider-item-6 {
  background: url("../img/dropdown/bg-03.png") no-repeat 100% 0
}

.submenu-slider .submenu-slider-items .submenu-slider-item .product-preview {
  float: left
}

.submenu-slider .submenu-slider-items .submenu-slider-item .link-sections {
  float: right
}

.inventory-bag-preview {
  width: 406px;
  height: 100%;
  padding: 26px;
  border-left: 1px solid var(--color-border);
  position: absolute;
  top: 0;
  right: -406px;
  overflow: hidden scroll;
  z-index: 99999;
  background-color: var(--color-surface-base);
  transition: transform .3s ease-in-out
}

.inventory-bag-preview .inventory-close-button {
  position: absolute;
  top: 20px;
  right: 26px;
  cursor: pointer
}

.inventory-bag-preview .items-in-inventory, .inventory-bag-preview .inventory-subtotal {
  color: var(--color-text-primary)
}

.inventory-bag-preview .items-in-inventory {
  margin-bottom: 14px
}

.inventory-bag-preview .inventory-items-preview {
  margin: 32px 0 100px
}

.inventory-bag-preview .inventory-subtotal {
  line-height: 40px
}

.inventory-bag-preview .inventory-subtotal:after {
  content: '';
  display: table;
  clear: both
}

.inventory-bag-preview .inventory-subtotal .subtotal-text {
  float: left
}

.inventory-bag-preview .inventory-subtotal .subtotal-value {
  float: right
}

.inventory-bag-preview .inventory-subtotal .subtotal-value .currency {
  margin-right: 3px
}

.inventory-bag-preview .inventory-actions {
  margin-top: 32px
}

.inventory-bag-preview .inventory-actions .button {
  margin-bottom: 20px
}

.inventory-bag-preview .inventory-actions .button:last-child {
  margin-bottom: 0
}

.inventory-items-preview {
  width: 340px;
  display: flex;
  flex-flow: row wrap
}

.inventory-items-preview .inventory-item-preview {
  margin: 26px 26px 0 0
}

.inventory-items-preview .inventory-item-preview:nth-child(1), .inventory-items-preview .inventory-item-preview:nth-child(2), .inventory-items-preview .inventory-item-preview:nth-child(3) {
  margin-top: 0
}

.inventory-items-preview .inventory-item-preview:nth-child(3n+3) {
  margin-right: 0
}

.inventory-items-preview .inventory-item-preview .inventory-icon {
  fill: #e5e5e5;
  display: block;
  margin: 35px auto 0
}

.inventory-items-preview .inventory-item-preview.selected .product-preview.small .product-preview-img-wrap {
  border-width: 6px
}

.inventory-items-preview .inventory-item-preview.selected .product-preview.small .product-preview-img {
  height: 84px
}

.inventory-item-preview.empty {
  width: 96px;
  height: 96px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-raised)
}

.window-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 33333;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all .3s ease-in-out
}

.window-overlay.open {
  opacity: 1;
  visibility: visible
}

.mobile-menu-wrap {
  width: 290px;
  height: 100%;
  padding-top: 92px;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 0;
  left: -290px;
  z-index: 66666;
  opacity: 0;
  visibility: hidden;
  overflow: hidden scroll;
  transition: all .4s ease-in-out
}

.mobile-menu-wrap.open {
  left: 0;
  opacity: 1;
  visibility: visible
}

.mobile-menu-wrap .search-popup-open {
  position: absolute;
  top: 33px;
  right: 70px;
  cursor: pointer
}

.mobile-menu-wrap .mobile-menu-close {
  position: absolute;
  top: 37px;
  right: 20px;
  cursor: pointer
}

.mobile-menu-wrap .logo-img {
  width: 52px;
  height: 41px;
  position: absolute;
  top: 22px;
  left: 20px
}

.mobile-menu {
  margin-bottom: 220px
}

.mobile-menu-item {
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.mobile-menu-item:hover > .mobile-menu-item-link, .mobile-menu-item.active > .mobile-menu-item-link {
  color: var(--white);
  background-color: var(--blue-500)
}

.mobile-menu-item:hover > .mobile-menu-item-link .quantity, .mobile-menu-item.active > .mobile-menu-item-link .quantity {
  color: var(--white)
}

.mobile-menu-item:hover > .arrow-icon, .mobile-menu-item.active > .arrow-icon {
  fill: var(--white)
}

.mobile-menu-item.active > .arrow-icon {
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.mobile-menu-item > .mobile-menu-item-link {
  display: block;
  padding-left: 30px;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  line-height: 58px;
  text-transform: none;
  cursor: pointer;
  transition: all .2s ease-in-out
}

.mobile-menu-item > .mobile-menu-item-link .user-avatar {
  position: relative;
  margin-right: 6px;
  top: 6px
}

.mobile-menu-item > .mobile-menu-item-link .quantity {
  color: var(--blue-500);
  transition: all .2s ease-in-out
}

.mobile-menu-item > .arrow-icon {
  position: absolute;
  top: 24px;
  right: 18px;
  pointer-events: none;
  transition: all .2s ease-in-out
}

.mobile-menu-item > .mobile-dropdown {
  border-top: 1px solid var(--color-border);
  padding: 14px 0
}

.mobile-dropdown {
  display: none
}

.mobile-dropdown-item {
  position: relative
}

.mobile-dropdown-item.active > .arrow-icon {
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.mobile-dropdown-item > .mobile-dropdown-item-link {
  padding-left: 34px;
  color: var(--color-text-primary);
  line-height: 34px;
  cursor: pointer
}

.mobile-dropdown-item > .arrow-icon {
  position: absolute;
  top: 11px;
  right: 16px;
  transition: all .2s ease-in-out
}

.mobile-dropdown-item > .mobile-dropdown {
  margin-bottom: 10px
}

.mobile-dropdown-item > .mobile-dropdown .mobile-dropdown-item .mobile-dropdown-item-link {
  color: var(--color-text-secondary);
  font-family: "Roboto", sans-serif;
  font-size: .75em;
  font-weight: 400;
  text-transform: none
}

.mobile-menu-pull {
  display: none;
  height: 40px;
  padding-top: 13px;
  background-color: #252627;
  text-align: center;
  cursor: pointer
}

.mobile-menu-pull .menu-pull-icon {
  display: inline-block
}

.dropdown-simple-wrap .dp-current-option {
  display: flex;
  flex-flow: row wrap;
  height: 40px;
  align-items: center;
  cursor: pointer
}

.dropdown-simple-wrap .dp-current-option .arrow-icon {
  margin: 0 0 0 10px;
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.dropdown-simple-wrap .current-option {
  cursor: pointer
}

.dropdown-simple-wrap .dp-options {
  padding: 10px 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-surface-base);
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08);
  visibility: hidden;
  opacity: 0
}

.dropdown-simple-wrap .dp-options.small {
  min-width: 120px
}

.dropdown-simple-wrap .dp-options.medium {
  padding: 16px
}

.dropdown-simple-wrap .dp-options.big {
  min-width: 280px
}

.dropdown-simple-wrap .dp-options.no-padding-bottom {
  padding-bottom: 0
}

.dropdown-simple-wrap .dp-options .dp-options-form {
  padding: 12px 16px
}

.dropdown-simple-wrap .dp-options .dp-options-form .check-radio-list:first-child {
  margin-top: 0
}

.dropdown-simple-wrap .dp-options .dp-option {
  cursor: pointer
}

.dropdown-simple-wrap .dp-options .dp-option:hover .dp-option-text {
  color: var(--violet-500)
}

.dropdown-simple-wrap .dp-options .dp-option .dp-option-text {
  padding: 8px 16px
}

.dropdown-simple-wrap .dp-option-text {
  color: var(--color-text-primary);
  line-height: 16px;
  white-space: nowrap
}

@media screen and (max-width: 1080px) {
  .navigation-wrap {
    display: none;
  }

  .mobile-menu-pull {
    display: block
  }

  .layout-item-1-2-1 {
    grid-template-columns: 100%;
  }

  .layout-sidebar, .layout-sidebar2 {
    display: none;
  }

  .grid2-2col, .grid2-1col {
    grid-template-columns: 100%
  }

  .layout-content-2 {
    grid-template-columns: 870px;
    justify-content: center;
    grid-template-areas: 'body'
 'sidebar1'
 'sidebar2'
  }

  .layout-content-2, .layout-item, .layout-item-1-1-1, .layout-item-1-2-1, .layout-item-2-1, .layout-item-3-1 {
    grid-template-columns: 100%
  }

  .layout-sidebar, .layout-sidebar2 {
    display: none
  }

  .layout-sidebar1 .post-preview-showcase {
    grid-template-columns: repeat(3, 270px)
  }
}

@media screen and (max-width: 680px) {
  .inventory-bag-preview {
    width: 290px;
    right: -290px
  }

  .inventory-bag-preview .inventory-close-button {
    display: block
  }

  .inventory-bag-preview .inventory-items-preview {
    width: 218px
  }

  .inventory-bag-preview .inventory-items-preview .inventory-item-preview:nth-child(3) {
    margin-top: 26px
  }

  .inventory-bag-preview .inventory-items-preview .inventory-item-preview:nth-child(3n+3) {
    margin-right: 26px
  }

  .inventory-bag-preview .inventory-items-preview .inventory-item-preview:nth-child(2n+2) {
    margin-right: 0
  }
}

.widget-title-wrap {
  height: 40px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-title-wrap.no-border {
  border-bottom: none
}

.widget-title-wrap.margin-top {
  margin-top: 26px
}

.widget-title-wrap.border-top {
  height: 66px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border)
}

.widget-title-wrap.full {
  display: block;
  height: auto;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
  position: relative
}

.widget-title-wrap.full .widget-title, .widget-title-wrap.full .widget-text {
  line-height: 1em
}

.widget-title-wrap.full .widget-text {
  margin-top: 6px
}

.widget-title-wrap.full .calendar-icon {
  position: absolute;
  top: 20px;
  right: 0;
  cursor: pointer
}

.widget-title-wrap .widget-title-item {
  display: flex;
  flex-flow: row wrap
}

.widget-title-wrap .widget-title-item.small {
  width: 320px
}

.widget-title-wrap .widget-title-item.medium {
  width: 470px;
  justify-content: space-between
}

.widget-title-wrap .widget-title-item.medium .widget-title-text {
  margin-left: 0
}

.widget-title-wrap .widget-title-item.full {
  display: block
}

.widget-title-wrap .widget-title-item.full .widget-title, .widget-title-wrap .widget-title-item.full .widget-text {
  line-height: 1em
}

.widget-title-wrap .widget-title-item.full .widget-title + .widget-text {
  margin-left: 0
}

.widget-title-wrap .widget-title-item.full .widget-text {
  margin-top: 6px
}

.widget-title-wrap .widget-title-item .widget-title + .widget-text {
  margin-left: 12px
}

.widget-title-wrap .widget-title-item .dropdown-simple-wrap .dp-current-option-value .dp-option-text {
  line-height: 40px
}

.widget-title-wrap .widget-title {
  color: var(--color-text-primary);
  line-height: 40px
}

.widget-title-wrap .widget-title .highlight.violet {
  color: var(--violet-500)
}

.widget-title-wrap .widget-text {
  color: var(--color-text-muted);
  font-size: .625em;
  line-height: 40px
}

.widget-title-wrap .widget-text.bold {
  color: var(--color-text-primary);
  line-height: 40px
}

.widget-title-wrap .widget-text.spaced {
  margin-right: 8px
}

.widget-title-wrap .widget-text .highlight.violet {
  color: var(--violet-500)
}

.widget-title-wrap .stats-reference {
  display: flex;
  flex-flow: row wrap
}

.widget-title-wrap .stats-reference .stat-reference {
  margin-right: 24px;
  position: relative
}

.widget-title-wrap .stats-reference .stat-reference:last-child {
  margin-right: 0
}

.widget-title-wrap .stats-reference .stat-reference:before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 17px;
  left: -12px
}

.widget-title-wrap .stats-reference .stat-reference.blue:before {
  background-color: #107df8
}

.widget-title-wrap .stats-reference .stat-reference.yellow:before {
  background-color: #dee807
}

.widget-title-wrap .stats-reference .stat-reference.violet:before {
  background-color: var(--violet-500)
}

.widget-title-wrap .stats-reference .stat-reference.cyan:before {
  background-color: var(--cyan-500)
}

.widget-title-wrap .stats-reference .stat-reference.blue-lighter:before {
  background-color: #00d1f7
}

.widget-title-wrap .stats-reference .stat-reference.red-light:before {
  background-color: #f30a36
}

.widget-title-wrap .stats-reference .stat-reference .stat-reference-text {
  color: var(--color-text-primary);
  line-height: 40px
}

.widget-title-wrap + .widget-team-stats, .widget-title-wrap + .chart-wrap {
  margin-top: 26px
}

.widget-overflow-wrap {
  overflow: auto;
  position: relative
}

.widget-overflow-wrap.item-stats, .widget-overflow-wrap.rune-stats {
  height: 70px
}

.widget-overflow-wrap.match-rounds {
  height: 176px
}

.widget-overflow-wrap.match-rounds .dropdown-simple-wrap {
  width: 85px
}

.widget-overflow-wrap.skill-stats {
  height: 268px
}

.widget-overflow-wrap.tournament-results {
  height: 570px
}

.widget-overflow-wrap.tournament-results .widget-tournament-results {
  position: absolute;
  top: 0;
  left: 0
}

.widget-overflow-wrap .widget-match-box {
  width: auto;
  position: absolute;
  top: 0;
  left: 0
}

.widget-overflow-wrap .widget-overflow-list-wrap {
  position: absolute;
  top: 0;
  left: 0
}

.widget-overflow-wrap .widget-overflow-list {
  height: 50px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  flex-wrap: nowrap;
  align-items: center
}

.widget-overflow-wrap .widget-overflow-list .widget-overflow-list-text {
  color: var(--color-text-primary)
}

.widget-overflow-wrap .widget-overflow-list .widget-overflow-list-text, .widget-overflow-wrap .widget-overflow-list .skill-loot-list {
  margin-right: 16px
}

.widget-overflow-wrap .widget-overflow-list .widget-overflow-list-text:last-child, .widget-overflow-wrap .widget-overflow-list .skill-loot-list:last-child {
  margin-right: 0
}

.widget-overflow-wrap .widget-overflow-list .skill-loot-list {
  flex-wrap: nowrap
}

.widget-overflow-wrap .widget-overflow-list .skill-loot-list .skill-loot-item-title, .widget-overflow-wrap .widget-overflow-list .skill-loot-list .skill-loot-item-text {
  white-space: nowrap
}

.widget-match-result {
  width: 240px;
  height: 130px;
  padding-top: 24px
}

.widget-match-result:hover {
  background-color: #f4f4f4
}

.widget-match-result.hoverable {
  position: relative
}

.widget-match-result.hoverable:hover .widget-match-result-actions {
  display: block
}

.widget-match-result.hoverable:hover .widget-match-result-item .match-score, .widget-match-result.hoverable:hover .widget-match-result-item .match-datetime {
  display: none
}

.widget-match-result .widget-match-result-actions {
  position: absolute;
  top: 29px;
  left: 120px;
  display: none
}

.widget-match-result .widget-match-result-actions .widget-match-result-action {
  color: var(--color-text-primary);
  cursor: pointer
}

.widget-match-result .widget-match-result-actions .widget-match-result-action:last-child {
  margin-top: 36px
}

.widget-match-result .widget-match-result-actions .widget-match-result-action .bars-icon, .widget-match-result .widget-match-result-actions .widget-match-result-action .play-button-icon {
  fill: var(--violet-500)
}

.widget-match-result .widget-match-result-actions .widget-match-result-action .bars-icon {
  margin-right: 8px
}

.widget-match-result .widget-match-result-actions .widget-match-result-action .play-button-icon {
  position: relative;
  left: 2px;
  margin-right: 10px
}

.widget-match-result .widget-match-result-actions .widget-match-result-action:hover {
  color: var(--violet-500)
}

.widget-match-result .widget-match-result-item {
  display: flex;
  flex-flow: row wrap
}

.widget-match-result .widget-match-result-item + .widget-match-result-item {
  margin-top: 18px
}

.widget-match-result .widget-match-result-item .team-info-wrap {
  width: 80px;
  padding-left: 16px
}

.widget-match-result .widget-match-result-item .match-score {
  width: 90px;
  text-align: center
}

.widget-match-result .widget-match-result-item .match-datetime {
  width: 70px
}

.widget-match-result .widget-match-result-item .match-score, .widget-match-result .widget-match-result-item .match-datetime {
  margin-top: 6px;
  color: var(--color-text-primary)
}

.widget-match-result .widget-match-result-item .match-datetime.light {
  color: var(--color-text-muted)
}

.widget-match-result .widget-match-result-item .match-datetime.live {
  width: auto;
  height: 10px;
  padding: 2px;
  background-color: var(--brand-500);
  color: var(--white);
  font-size: .5em;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1em
}

.widget-match-box-wrap {
  display: flex;
  flex-flow: row wrap
}

.widget-match-box-wrap .widget-match-box:nth-child(1) .widget-title-wrap, .widget-match-box-wrap .widget-match-box:nth-child(1) .widget-match-box-row {
  padding-right: 70px
}

.widget-match-box-wrap .widget-match-box:nth-child(1), .widget-match-box-wrap .widget-match-box:nth-child(3) {
  width: 35%
}

.widget-match-box-wrap .widget-match-box:nth-child(2) {
  width: 30%
}

.widget-match-box {
  width: 100%
}

.widget-match-box + .countdown-text-wrap {
  margin-top: 20px
}

.widget-match-box.small {
  width: 270px
}

.widget-match-box.multiple-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.widget-match-box.multiple-items .widget-team-vs {
  width: 670px;
  padding: 0 36px;
  border-bottom: none
}

.widget-match-box.multiple-items .widget-team-vs.medium {
  padding: 0 36px
}

.widget-match-box.multiple-items .widget-media {
  margin: 16px 26px 0 0
}

.widget-match-box.multiple-items .widget-info-box {
  padding: 24px 16px 0 0;
  text-align: right
}

.widget-match-box.multiple-items .widget-info-box .countdown-text, .widget-match-box.multiple-items .widget-info-box .countdown-text-heading {
  text-align: right
}

.widget-match-box.multiple-items.inverted .widget-team-vs {
  order: 2
}

.widget-match-box.multiple-items.inverted .widget-info-box {
  order: 1;
  padding: 24px 0 0 16px;
  text-align: left
}

.widget-match-box.skill-stats .widget-title-wrap {
  flex-wrap: nowrap;
  justify-content: flex-start
}

.widget-match-box.skill-stats .widget-title-wrap .team-score-boxes-title-wrap {
  flex-wrap: nowrap
}

.widget-match-box.skill-stats .widget-title, .widget-match-box.skill-stats .skill-loot-list {
  width: 85px
}

.widget-match-box.skill-stats .skill-loot-list {
  justify-content: flex-start;
  align-items: center
}

.widget-match-box.match-rounds .widget-title-wrap {
  flex-wrap: nowrap;
  justify-content: flex-start
}

.widget-match-box.match-rounds .widget-title-wrap .team-score-boxes-title-wrap {
  flex-wrap: nowrap
}

.widget-match-box.match-rounds .widget-team-vs .widget-team-vs-item {
  justify-content: flex-start
}

.widget-match-box.match-rounds .widget-team-vs .widget-team-vs-item .team-info-wrap {
  margin-left: 0;
  padding-left: 14px
}

.widget-match-box.match-rounds .round-dropdown, .widget-match-box.match-rounds .team-info-wrap {
  width: 85px
}

.widget-match-box.hoverable .widget-match-box-item {
  display: none
}

.widget-match-box.hoverable:hover .widget-match-box-item {
  display: block
}

.widget-match-box.hoverable:hover .widget-team-vs {
  display: none
}

.widget-match-box.bordered {
  border: 1px solid var(--color-border)
}

.widget-match-box.bordered .widget-title-wrap {
  padding: 0 14px
}

.widget-match-box.bordered .widget-team-vs .widget-team-vs-item .team-info-wrap {
  margin-left: 16px
}

.widget-match-box.bordered .widget-team-vs .widget-team-vs-item .team-score {
  margin-right: 26px
}

.widget-match-box.bordered .widget-team-vs .widget-team-vs-item:last-child {
  border-bottom: none
}

.widget-match-box.bordered .widget-team-vs .widget-team-vs-item:last-child:before {
  left: 40px
}

.widget-match-box.bordered > *:last-child {
  border-bottom: none
}

.widget-match-box .widget-match-box-row {
  height: 78px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.widget-match-box .widget-match-box-row.padded-right {
  padding-right: 56px
}

.widget-match-box .widget-match-box-row.padded-right-small {
  padding-right: 26px
}

.widget-match-box .widget-match-box-row.big {
  height: 163px
}

.widget-match-box .widget-match-box-row.big .match-stats {
  margin: 0 80px
}

.widget-match-box .widget-match-box-row.centered {
  justify-content: center
}

.widget-match-box .widget-match-box-row .medal-list {
  width: 100%;
  padding: 0;
  border: none
}

.widget-match-box .widget-match-box-items {
  display: flex;
  flex-flow: row wrap;
  flex-flow: nowrap
}

.widget-match-box .widget-match-box-items .widget-team-vs {
  width: 53%;
  border-right: 1px solid var(--color-border)
}

.widget-match-box .widget-match-box-items .widget-match-box-item-wrap {
  width: 47%
}

.widget-match-box .widget-match-box-items .widget-match-box-item-wrap .widget-match-box-item {
  border-bottom: none
}

.widget-match-box .medal-list {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border)
}

.widget-match-box-item {
  height: 58px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer
}

.widget-match-box-item:hover .widget-match-box-link {
  color: var(--violet-500)
}

.widget-match-box-item .widget-match-box-link {
  display: block;
  color: var(--color-text-primary);
  line-height: 58px;
  text-align: center
}

.widget-match-box-item .widget-match-box-link .play-button-icon, .widget-match-box-item .widget-match-box-link .bars-icon {
  fill: var(--violet-500);
  position: relative;
  top: 1px;
  margin-right: 6px
}

.widget-mvp .widget-mvp-item {
  height: 60px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-mvp .widget-mvp-item .team-info-wrap {
  margin-top: 16px
}

.widget-mvp .widget-mvp-item .mvp-stats {
  margin: 18px 16px 0 0
}

.mvp-stats {
  display: flex;
  flex-flow: row wrap
}

.mvp-stats .mvp-stat {
  margin-right: 24px;
  text-align: center
}

.mvp-stats .mvp-stat:last-child {
  margin-right: 0
}

.mvp-stats .mvp-stat .mvp-stat-title {
  color: var(--color-text-primary)
}

.mvp-stats .mvp-stat .mvp-stat-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em
}

.widget-team-vs.tiny .widget-team-vs-item {
  height: 52px
}

.widget-team-vs.one-team .widget-team-vs-item:before {
  display: none
}

.widget-team-vs.small .widget-team-vs-item {
  height: 58px
}

.widget-team-vs.small .widget-team-vs-item .team-info-wrap {
  margin: 11px 0 0 4px
}

.widget-team-vs.small .widget-team-vs-item .team-info-wrap.inverted {
  margin: 11px 4px 0 0
}

.widget-team-vs.small .widget-team-vs-item .team-score {
  font-size: .75em;
  margin: 23px 16px 0 auto
}

.widget-team-vs.small .widget-team-vs-item:last-child:before {
  margin-left: 0;
  left: 30px
}

.widget-team-vs.v3.big .widget-team-vs-item {
  height: 120px
}

.widget-team-vs.v3.big .team-info-wrap {
  margin-left: 40px
}

.widget-team-vs.v3.big .team-info-wrap.medium .team-logo {
  width: 66px;
  height: 66px;
  margin-top: 10px
}

.widget-team-vs.v3.big .team-info-wrap.medium .team-info {
  margin: 34px 0 0 36px
}

.widget-team-vs.v3.big .team-info-wrap.medium .team-info .team-name {
  font-size: .75em
}

.widget-team-vs.v3.big .team-info-wrap.medium .team-info .team-country {
  margin-top: 4px
}

.widget-team-vs.v3 .widget-team-vs-item:last-child:before {
  display: none
}

.widget-team-vs.v3 .team-info-wrap {
  margin-left: 10px
}

.widget-team-vs.v3 .team-info-wrap.medium .team-logo {
  width: 46px;
  height: 46px;
  margin-top: 4px
}

.widget-team-vs.v2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border)
}

.widget-team-vs.v2.filled {
  background-color: var(--color-surface-raised)
}

.widget-team-vs.v2.filled .team-info-wrap {
  margin-left: 10px
}

.widget-team-vs.v2.filled .team-info-wrap.inverted {
  margin-right: 10px
}

.widget-team-vs.v2 .widget-team-vs-item {
  border-bottom: none
}

.widget-team-vs.v2 .widget-team-vs-item:last-child:before {
  display: none
}

.widget-team-vs.v2 .match-stats .match-score.small {
  margin-top: 30px
}

.widget-team-vs.v2 .match-stats .match-score.medium {
  margin-top: 42px;
  font-size: 2em
}

.widget-team-vs.v2 .match-stats .match-score.medium.solo {
  margin-top: 50px
}

.widget-team-vs.v2 .match-stats .match-score.medium.match-vs {
  margin-top: 36px
}

.widget-team-vs.v2 .match-stats .match-score.medium.match-vs + .match-time {
  margin-top: 4px
}

.widget-team-vs.v2 .match-stats .match-time.medium {
  margin-top: 8px;
  font-size: .625em;
  line-height: 16px
}

.widget-team-vs.v2 .match-stats .match-time.big {
  margin-top: 34px;
  font-size: .75em
}

.widget-team-vs.v2 .match-stats .match-stat-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .625em
}

.widget-team-vs.v2.small .match-stats .match-score.smaller {
  margin-top: 18px
}

.widget-team-vs.v2.small .match-stats .match-time {
  margin-top: 3px
}

.widget-team-vs.v2.medium {
  height: 138px;
  padding: 0 52px
}

.widget-team-vs.v2.medium .team-info-wrap {
  margin-top: 30px
}

.widget-team-vs.v2.medium .team-info-wrap.medium .team-info .team-name {
  font-size: .75em
}

.widget-team-vs.v2.medium .team-info-wrap .team-info {
  margin-top: 26px
}

.widget-team-vs.v2.medium .team-info-wrap .team-info .team-country {
  margin-top: 6px
}

.widget-team-vs.v2.medium.centered {
  height: 162px;
  padding: 0;
  justify-content: center
}

.widget-team-vs.v2.medium.centered .team-info-wrap {
  margin-top: 44px
}

.widget-team-vs.v2.medium.centered .team-info-wrap .team-logo {
  order: 2
}

.widget-team-vs.v2.medium.centered .team-info-wrap .team-info {
  order: 1;
  margin: 26px 30px 0 0;
  text-align: right
}

.widget-team-vs.v2.medium.centered .team-info-wrap.inverted .team-logo {
  order: 1
}

.widget-team-vs.v2.medium.centered .team-info-wrap.inverted .team-info {
  order: 2;
  margin: 26px 0 0 30px;
  text-align: left
}

.widget-team-vs.v2.medium.centered .match-stats {
  margin: 14px 80px 0
}

.widget-team-vs.v2.big {
  width: 470px;
  height: 188px;
  padding: 0 16px
}

.widget-team-vs.v2.big .team-info-wrap {
  display: block;
  margin-top: 32px;
  text-align: center
}

.widget-team-vs.v2.big .team-info-wrap.inverted .team-info {
  text-align: center
}

.widget-team-vs.v2.big .team-info-wrap .team-info {
  margin: 16px 0 0
}

.widget-team-vs.v2.big .team-info-wrap .team-info .team-name {
  font-size: .75em
}

.widget-team-vs.v2.big .team-info-wrap .team-info .team-country {
  margin-top: 6px
}

.widget-team-vs .widget-team-vs-item {
  height: 86px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-team-vs .widget-team-vs-item .team-info-wrap {
  margin-top: 14px
}

.widget-team-vs .widget-team-vs-item .team-info-wrap.medium .team-info .team-name {
  font-size: .6875em
}

.widget-team-vs .widget-team-vs-item .team-score {
  color: var(--color-text-primary);
  margin: 32px 22px 0 0
}

.widget-team-vs .widget-team-vs-item .team-score.light {
  color: var(--color-text-muted)
}

.widget-team-vs .widget-team-vs-item .award-cup-img {
  margin: 18px 18px 0 0
}

.widget-team-vs .widget-team-vs-item:last-child:before {
  content: 'vs';
  width: 34px;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -17px
}

.widget-media-wrap.large .widget-media-r iframe, .widget-media-wrap.large .widget-media-r img {
  width: 100%;
  height: 460px
}

.widget-media-wrap.huge .widget-media-r iframe, .widget-media-wrap.huge .widget-media-r img {
  width: 100%;
  height: 582px
}

.widget-media-wrap.popup-display {
  max-width: 1170px;
  width: 100%
}

.widget-media-wrap.popup-display .button-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gray-900);
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 99999
}

.widget-media-wrap.popup-display .button-close.blue {
  background-color: var(--blue-500)
}

.widget-media-wrap.popup-display .button-close.red {
  background-color: var(--brand-500)
}

.widget-media-wrap.popup-display .button-close.yellow {
  background-color: var(--amber-500)
}

.widget-media-wrap.popup-display .button-close.green {
  background-color: var(--green-500)
}

.widget-media-wrap.popup-display .button-close.violet {
  background-color: var(--violet-500)
}

.widget-media-wrap.popup-display .button-close.cyan {
  background-color: var(--cyan-500)
}

.widget-media-wrap.popup-display .button-close .cross-icon {
  fill: var(--white);
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -5px;
  pointer-events: none
}

.widget-media-wrap.popup-display .widget-media-r iframe, .widget-media-wrap.popup-display .widget-media-r img {
  width: 100%;
  height: 660px
}

.widget-media-wrap.big .widget-media-r iframe, .widget-media-wrap.big .widget-media-r img {
  width: 85%;
  height: 400px
}

.widget-media {
  width: 294px;
  height: 156px
}

.widget-media.small {
  width: 270px;
  height: 160px
}

.widget-media.large {
  width: 100%;
  height: 460px
}

.widget-media iframe {
  width: 100%;
  height: 100%
}

.widget-team-builds-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 16px 18px
}

.widget-team-builds-header .button {
  margin-top: 5px
}

.widget-team-builds-header .team-logo {
  width: 46px;
  height: 46px
}

.widget-team-builds-header .team-info-wrap.medium .team-info {
  margin-top: 14px
}

.widget-team-stats.bottom-spaced {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-border)
}

.widget-team-stats.bottom-border {
  border-bottom: 1px solid var(--color-border)
}

.widget-team-stats.full {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 28px
}

.widget-team-stats.full.small-space {
  padding: 0 16px 20px
}

.widget-team-stats .progress-stat-wrap {
  margin-bottom: 24px
}

.widget-team-stats .progress-stat-wrap:last-child {
  margin-bottom: 0
}

.widget-info-box .widget-info-box-item {
  margin-top: 16px
}

.widget-info-box .widget-info-box-item:first-child {
  margin-top: 0
}

.widget-info-box .widget-info-box-item .widget-info-title {
  color: var(--color-text-primary)
}

.widget-info-box .widget-info-box-item .widget-info-text {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .625em;
  line-height: 1em
}

.widget-stat-rows .widget-stat-row {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-stat-rows .widget-stat-row .progress-stat-wrap {
  margin: 22px 0 24px
}

.widget-stat-rows .widget-stat-row .progress-stat-wrap:first-child {
  margin-left: 30px
}

.widget-stat-rows .widget-stat-row .progress-stat-wrap:last-child {
  margin-right: 30px
}

.widget-stat-rows .widget-stat-row .arc-stats-wrap {
  margin: 16px 0
}

.widget-stat-rows .widget-stat-row .arc-stats-wrap:first-child {
  margin-left: 16px
}

.widget-stat-rows .widget-stat-row .widget-stat-info-wrap {
  margin-top: 28px
}

.widget-stat-rows .widget-stat-row .widget-stat-info-wrap:last-child {
  margin-right: 32px
}

.widget-simple-stats {
  display: flex;
  flex-flow: row wrap
}

.widget-simple-stats.border-top {
  border-top: 1px solid var(--color-border)
}

.widget-simple-stats .widget-simple-stat:first-child .widget-simple-stat-rows .widget-simple-stat-row {
  padding-right: 26px
}

.widget-simple-stats.v2 .widget-simple-stat-header {
  padding: 0
}

.widget-simple-stats.v2 .widget-simple-stat:nth-child(2n+2) .widget-simple-stat-rows {
  border-left: 1px solid var(--color-border)
}

.widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row {
  height: 45px
}

.widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value {
  line-height: 45px
}

.widget-simple-stats.small .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .team-info-wrap {
  margin-top: 8px
}

.widget-simple-stat {
  width: 100%;
  background-color: var(--color-surface-base)
}

.widget-simple-stat.half {
  width: 50%
}

.widget-simple-stat .widget-simple-stat-header {
  border-bottom: 1px solid var(--color-border);
  padding: 0 16px
}

.widget-simple-stat .widget-simple-stat-header.no-padding {
  padding: 0
}

.widget-simple-stat .widget-simple-stat-header .widget-simple-stat-header-title {
  color: var(--color-text-primary);
  line-height: 40px
}

.widget-simple-stat .widget-simple-stat-header .team-info-wrap {
  margin: 12px 0
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row {
  height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row:nth-child(odd) {
  background-color: var(--color-surface-raised)
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row.border-top {
  border-top: 1px solid var(--color-border)
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title, .widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value {
  color: var(--color-text-primary);
  line-height: 50px
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-title.light {
  color: var(--color-text-secondary)
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .widget-simple-stat-value.link {
  color: var(--violet-500)
}

.widget-simple-stat .widget-simple-stat-rows .widget-simple-stat-row .team-info-wrap {
  margin-top: 10px
}

.widget-stat-info-wrap {
  display: flex;
  flex-flow: row wrap
}

.widget-stat-info-wrap .widget-stat-info-number {
  color: var(--color-text-primary)
}

.widget-stat-info-wrap .widget-stat-info {
  margin-left: 12px
}

.widget-stat-info-wrap .widget-stat-info .widget-stat-info-title {
  color: var(--color-text-primary)
}

.widget-stat-info-wrap .widget-stat-info .widget-stat-info-text {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em
}

.widget-top-player {
  width: 270px;
  height: 111px;
  border-bottom: 1px solid var(--color-border);
  padding-left: 100px;
  position: relative
}

.widget-top-player .top-player-team-img, .widget-top-player .top-player-img {
  position: absolute;
  top: 0
}

.widget-top-player .top-player-team-img {
  width: 80px;
  height: 80px;
  opacity: .1;
  left: 4px;
  z-index: 1
}

.widget-top-player .top-player-img {
  left: 0;
  z-index: 2
}

.widget-top-player .top-player-team-logo {
  position: absolute;
  bottom: 2px;
  left: 0;
  z-index: 3
}

.widget-top-player .top-player-team-logo.top-right {
  bottom: auto;
  left: auto;
  top: -8px;
  right: 0
}

.widget-top-player .top-player-info-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-top-player .top-player-info-wrap .top-player-info {
  margin-top: 14px
}

.widget-top-player .top-player-info-wrap .top-player-info .top-player-flag {
  color: var(--color-text-primary)
}

.widget-top-player .top-player-info-wrap .top-player-info .top-player-flag.featured {
  color: var(--violet-500)
}

.widget-top-player .top-player-info-wrap .top-player-info .top-player-name {
  margin-top: 1px;
  color: var(--color-text-primary);
  line-height: 1em
}

.widget-top-player .top-player-info-wrap .top-player-info .top-player-team {
  margin-top: 2px;
  font-size: .625em;
  color: var(--color-text-muted);
  line-height: 1em
}

.widget-top-player .top-player-stats {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  margin-top: 18px;
  padding-right: 12px
}

.widget-top-player .top-player-stats .top-player-stat {
  text-align: center;
  margin-right: 16px
}

.widget-top-player .top-player-stats .top-player-stat:last-child {
  margin-right: 0
}

.widget-top-player .top-player-stats .top-player-stat .top-player-stat-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.widget-top-player .top-player-stats .top-player-stat .top-player-stat-title .highlight:nth-child(1) {
  color: var(--violet-500)
}

.widget-top-player .top-player-stats .top-player-stat .top-player-stat-title .highlight:nth-child(2) {
  color: var(--cyan-500)
}

.widget-top-player .top-player-stats .top-player-stat .top-player-stat-title .highlight:nth-child(3) {
  color: var(--color-text-secondary)
}

.widget-top-player .top-player-stats .top-player-stat .top-player-stat-text {
  margin-top: 4px;
  font-size: .5625em;
  line-height: 1em
}

.progress-bar-wrap {
  margin: 0 auto
}

.tweets-preview-widget {
  display: grid;
  grid-row-gap: 16px;
  overflow: hidden;
  position: relative;
  min-height: 120px
}

.tweets-preview-widget .loader {
  position: absolute;
  top: 60px;
  left: 50%;
  margin-left: -20px
}

.tweets-preview-widget .loader-error {
  width: 100%;
  position: absolute;
  top: 60px
}

.tweets-preview-widget.negative .tweets-preview-widget-item .tweets-preview-widget-item-text {
  color: var(--color-text-secondary)
}

.tweets-preview-widget.v2 .tweets-preview-widget-item {
  padding-left: 52px
}

.tweets-preview-widget-item {
  padding-left: 46px;
  position: relative;
  animation: translate-from-bottom .5s ease-in-out
}

.tweets-preview-widget-item .bubble-ornament {
  position: absolute;
  top: 3px;
  left: 0
}

.tweets-preview-widget-item .tweets-preview-widget-item-profile-img {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0
}

.tweets-preview-widget-item .tweets-prevew-widget-item-user {
  color: var(--color-text-primary);
  margin: 4px 0
}

.tweets-preview-widget-item .tweets-preview-widget-item-text {
  color: #b8b8b8;
  font-size: .75em;
  line-height: 1.6666666667em
}

.tweets-preview-widget-item .tweets-preview-widget-item-text .highlighted {
  color: #10caff;
  font-weight: 700
}

.tweets-preview-widget-item .tweets-preview-widget-item-timestamp {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .625em
}

.live-news-widget-wrap {
  position: relative
}

.live-news-widget-wrap:before, .live-news-widget-wrap:after {
  content: '';
  width: 50%;
  height: 40px;
  position: absolute;
  top: 0;
  z-index: -1
}

.live-news-widget-wrap:before {
  left: 0;
  background-color: var(--brand-500)
}

.live-news-widget-wrap:after {
  right: 0;
  background-color: var(--blue-500)
}

.live-news-widget {
  height: 40px;
  padding: 0 135px;
  background-color: #252627;
  position: relative;
  overflow: hidden
}

.live-news-widget .live-news-widget-stairs {
  position: absolute;
  top: 0;
  z-index: 3333
}

.live-news-widget .live-news-widget-stairs.left {
  left: 0
}

.live-news-widget .live-news-widget-stairs.right {
  right: 0;
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.live-news-widget .live-news-widget-stairs.red .live-news-widget-stair {
  background-color: var(--brand-500)
}

.live-news-widget .live-news-widget-stairs.blue .live-news-widget-stair {
  background-color: var(--blue-500)
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(1) {
  width: 170px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(2) {
  width: 165px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(3) {
  width: 160px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(4) {
  width: 155px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(5) {
  width: 150px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(6) {
  width: 145px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(7) {
  width: 140px
}

.live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(8) {
  width: 135px
}

.live-news-widget .live-news-widget-stair {
  height: 5px
}

.live-news-widget .live-news-widget-title-wrap {
  padding: 3px 0 0 28px;
  position: absolute;
  top: 8px;
  left: 9px;
  z-index: 6666
}

.live-news-widget .live-news-widget-title-wrap .live-news-widget-icon {
  position: absolute;
  top: 0;
  left: 0
}

.live-news-widget .live-news-widget-title-wrap .live-news-widget-title {
  color: var(--white)
}

.live-news-widget .live-news-widget-text-wrap {
  height: 40px
}

.live-news-widget .live-news-widget-text {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 40px
}

.live-news-widget .live-news-widget-text .link {
  color: var(--white)
}

.live-news-widget .live-news-widget-text .separator {
  margin: 0 12px;
  color: var(--amber-500);
  font-weight: 700
}

.widget-item .section-title-wrap {
  margin-bottom: 26px
}

.widget-item .section-title-wrap.no-space {
  margin-bottom: 0
}

.widget-item .section-title-wrap.small-space {
  margin-bottom: 10px
}

.widget-sidebar .section-title-wrap {
  margin-bottom: 26px
}

.widget-sidebar .section-title-wrap.no-space {
  margin-bottom: 0
}

.widget-sidebar .section-title-wrap.small-space {
  margin-bottom: 10px
}

.widget-sidebar .sidebar-search-form {
  width: 270px;
  position: static
}

.widget-sidebar .widget-team-vs {
  width: 100%
}

.loader {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite forwards
}

.loader.blue {
  border-top-color: var(--blue-500)
}

.loader.red {
  border-top-color: var(--brand-500)
}

.loader.green {
  border-top-color: var(--green-500)
}

.loader.yellow {
  border-top-color: var(--amber-500)
}

.loader.violet {
  border-top-color: var(--violet-500)
}

.loader.cyan {
  border-top-color: var(--cyan-500)
}

.loader-error {
  color: var(--brand-500);
  font-size: .875em;
  font-weight: 700;
  text-align: center
}

.comment-preview {
  padding: 2px 0 0 70px;
  position: relative
}

.comment-preview .user-avatar {
  position: absolute;
  top: 0;
  left: 0
}

.comment-preview .comment-preview-title {
  color: var(--color-text-primary)
}

.comment-preview .comment-preview-link {
  font-size: .6875em;
  font-weight: 700
}

.comment-preview .comment-preview-link.blue {
  color: var(--blue-500)
}

.comment-preview .comment-preview-link.red {
  color: var(--brand-500)
}

.comment-preview .comment-preview-link.yellow {
  color: var(--amber-500)
}

.comment-preview .comment-preview-link.green {
  color: var(--green-500)
}

.comment-preview .comment-preview-link.violet {
  color: var(--violet-500)
}

.comment-preview .comment-preview-link.cyan {
  color: var(--cyan-500)
}

.comment-preview .comment-preview-text {
  margin-top: 4px;
  font-size: .75em;
  line-height: 1.6666666667em
}

.poll-widget {
  width: 270px;
  margin: 0 auto
}

.poll-widget .poll-widget-title {
  color: var(--color-text-primary)
}

.poll-widget .poll-widget-form {
  margin-top: 24px
}

.poll-widget .poll-widget-form .poll-widget-form-actions {
  margin-top: 34px;
  display: flex;
  flex-flow: row wrap
}

.poll-widget .poll-widget-form .poll-widget-form-actions .button {
  width: 120px;
  padding: 0
}

.poll-widget .poll-widget-form .poll-widget-form-actions .button:nth-child(1) {
  margin-right: 10px
}

.poll-widget .poll-results-wrap {
  margin-top: 44px
}

.poll-widget .poll-results-wrap .progress-bar {
  margin-bottom: 40px
}

.poll-widget .poll-results-wrap .progress-bar:last-child {
  margin-bottom: 0
}

.stream-preview .stream-preview-streamer {
  padding: 18px 12px 16px 20px;
  position: relative
}

.stream-preview .stream-preview-streamer.stream-preview-streamer-1 {
  background: url("../img/streamers/streambox-01.jpg") no-repeat center;
  background-size: cover
}

.stream-preview .stream-preview-streamer.stream-preview-streamer-2 {
  background: url("../img/streamers/streambox-02.jpg") no-repeat center;
  background-size: cover
}

.stream-preview .stream-preview-streamer.stream-preview-streamer-3 {
  background: url("../img/streamers/streambox-03.jpg") no-repeat center;
  background-size: cover
}

.stream-preview .stream-preview-streamer .stream-preview-streamer-img {
  position: absolute;
  top: 0;
  right: 0
}

.stream-preview .stream-preview-streamer .stream-preview-streamer-name {
  color: var(--white);
  line-height: 1em
}

.stream-preview .stream-preview-streamer .stream-preview-streamer-topic {
  margin-top: 4px;
  color: var(--white);
  font-size: .5625em;
  line-height: 1em
}

.stream-preview .stream-preview-streamer .stream-start-counter {
  margin-top: 10px;
  color: var(--white)
}

.stream-start-counter {
  padding-left: 8px;
  position: relative
}

.stream-start-counter:before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--cyan-500);
  position: absolute;
  top: 1px;
  left: 0
}

.stream-start-counter.live:before {
  background-color: var(--brand-500)
}

.stream-start-counter.offline:before {
  background-color: #b8b8b8
}

.stream-start-counter .highlighted {
  color: #00fee9
}

.stream-start-counter .timer-text-hours:after, .stream-start-counter .timer-text-minutes:after {
  content: ':'
}

.stream-preview-showcase {
  min-height: auto;
  overflow: visible;
}

.stream-preview {
  margin-bottom: 20px;
}

.stream-preview-name-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}

.stream-preview-name-line .stream-preview-streamer-name {
  margin: 0;
  line-height: 1em;
}

.stream-preview-name-line .stream-start-counter {
  margin: 0;
  font-size: 0.45em;
  line-height: 1;
  padding-top: 0;
  margin-top: 0;
}

.post-preview-set {
  display: flex;
  flex-flow: row wrap
}

.post-preview-set .post-preview-set-left .post-preview, .post-preview-set .post-preview-set-right .post-preview {
  width: 100%
}

.post-preview-set .post-preview-set-left {
  width: 570px
}

.post-preview-set .post-preview-set-right {
  width: 300px;
  display: flex;
  flex-flow: column wrap
}

.events-preview.full .event-preview-item {
  padding-right: 160px
}

.events-preview.full .event-preview-item .button {
  padding: 0 34px;
  position: absolute;
  top: 26px;
  right: 0
}

.events-preview .event-preview-header {
  height: 40px;
  border-bottom: 1px solid var(--color-border)
}

.events-preview .event-preview-header .event-preview-header-text {
  line-height: 40px
}

.events-preview .event-preview-item {
  padding: 22px 0 22px 90px;
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.events-preview .event-preview-item .event-preview-item-decoration {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--gray-900);
  position: absolute;
  top: 24px;
  left: 0
}

.events-preview .event-preview-item .event-preview-item-decoration.blue {
  background-color: var(--blue-500)
}

.events-preview .event-preview-item .event-preview-item-decoration.green {
  background-color: var(--green-500)
}

.events-preview .event-preview-item .event-preview-item-decoration.red {
  background-color: var(--brand-500)
}

.events-preview .event-preview-item .event-preview-item-decoration.violet {
  background-color: var(--violet-500)
}

.events-preview .event-preview-item .event-preview-item-decoration.yellow {
  background-color: var(--amber-500)
}

.events-preview .event-preview-item .event-preview-item-decoration.cyan {
  background-color: var(--cyan-500)
}

.events-preview .event-preview-item .event-preview-item-decoration:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 4px;
  left: 4px
}

.events-preview .event-preview-item .event-preview-item-timestamp {
  color: var(--color-text-primary);
  position: absolute;
  top: 26px;
  left: 22px
}

.events-preview .event-preview-item .event-preview-item-content .event-preview-item-title {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--color-text-primary)
}

.events-preview .event-preview-item .event-preview-item-content .event-preview-item-text {
  font-size: .6875em;
  line-height: 1.2727272727em
}

.team-score-boxes-title-wrap {
  display: flex;
  flex-flow: row wrap
}

.team-score-boxes-title-wrap.big .team-score-box-title {
  width: 82px
}

.team-score-boxes-title-wrap.large .team-score-box-title {
  width: 92px
}

.team-score-boxes-title-wrap.large .team-score-box-title:last-child {
  width: 100px
}

.team-score-boxes-title-wrap .team-score-box-title {
  width: 52px;
  color: var(--color-text-primary);
  line-height: 40px;
  text-align: center
}

.team-score-boxes {
  display: flex;
  flex-flow: row wrap
}

.team-score-boxes.fill-end .team-score-box:last-child {
  border-right: 1px solid var(--color-border)
}

.team-score-boxes.large .team-score-box {
  width: 92px;
  height: 120px
}

.team-score-boxes.large .team-score-box.final {
  width: 100px
}

.team-score-boxes.large .team-score-box.final .team-points {
  font-size: 2em
}

.team-score-boxes.large .team-score-box .team-points {
  font-size: 1.75em;
  line-height: 120px
}

.team-score-boxes.large .team-score-box .featured-corner-icon {
  width: 24px;
  height: 24px
}

.team-score-boxes.big .team-score-box {
  width: 82px;
  height: 86px
}

.team-score-boxes.big .team-score-box.final .team-points {
  font-size: 1.625em
}

.team-score-boxes.big .team-score-box .featured-corner-icon {
  width: 24px;
  height: 24px
}

.team-score-boxes.big .team-score-box .team-points {
  font-size: 1.375em;
  line-height: 86px
}

.team-score-boxes.medium .team-score-box {
  width: 52px
}

.team-score-boxes.small .team-score-box {
  width: 52px;
  height: 52px
}

.team-score-boxes.small .team-score-box .team-score-box-text {
  line-height: 52px
}

.team-score-boxes .team-score-box {
  width: 42px;
  height: 58px;
  border-left: 1px solid var(--color-border);
  position: relative
}

.team-score-boxes .team-score-box .featured-corner-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 0;
  right: 0
}

.team-score-boxes .team-score-box.filled {
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border)
}

.team-score-boxes .team-score-box.win .team-points {
  font-weight: 600;
  opacity: 1
}

.team-score-boxes .team-score-box.final .team-points {
  color: var(--color-text-primary);
  font-weight: 700;
  opacity: 1
}

.team-score-boxes .team-score-box.final.win .featured-corner-icon {
  fill: var(--amber-500)
}

.team-score-boxes .team-score-box .team-points {
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 58px;
  text-align: center;
  opacity: 0.6
}

.team-score-boxes .team-score-box .team-score-box-text {
  color: var(--color-text-muted);
  line-height: 58px;
  text-align: center
}

.team-score-boxes .team-score-box .team-score-icon {
  margin-top: 17px;
  text-align: center
}

.team-score-boxes .team-score-box .team-score-icon.explosion {
  margin-top: 13px
}

.widget-characters {
  width: 870px
}

.widget-characters .widget-characters-header {
  height: 62px;
  padding: 18px 0 0 16px;
  border-bottom: 1px solid var(--color-border)
}

.widget-characters-list {
  display: flex;
  flex-flow: row wrap
}

.widget-characters-list .widget-characters-list-item {
  width: 174px;
  height: 76px;
  padding: 16px 0 0 16px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.widget-characters-list .widget-characters-list-item:nth-child(5n+5) {
  border-right: none
}

.widget-characters-list .widget-characters-list-item .team-info-wrap.medium .team-info {
  margin: 16px 0 0 12px
}

.widget-slider-wrap {
  width: 270px;
  height: 310px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden
}

.widget-slider-wrap .widget-slider {
  width: 100%;
  height: 100%
}

.widget-slider-wrap .widget-slider-controls .control-next, .widget-slider-wrap .widget-slider-controls .control-previous {
  position: absolute;
  top: 100px;
  z-index: 9999
}

.widget-slider-wrap .widget-slider-controls .control-next {
  right: 10px
}

.widget-slider-wrap .widget-slider-controls .control-previous {
  left: 10px
}

.widget-slider-items {
  width: 100%;
  height: 100%
}

.widget-slider-items .widget-slider-item {
  width: 100%;
  height: 100%;
  padding-top: 20px
}

.widget-slider-items .widget-slider-item .widget-slider-item-img {
  display: block;
  margin: 0 auto
}

.widget-slider-items .widget-slider-item .widget-slider-item-title {
  margin-top: 30px;
  color: var(--color-text-primary);
  line-height: 1em;
  text-align: center
}

.widget-slider-items .widget-slider-item .widget-slider-item-text {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center
}

.widget-medals {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-border)
}

.widget-medals.multiple-items {
  display: flex;
  flex-flow: row wrap
}

.widget-medals .medal-list {
  margin-top: 20px
}

.widget-medals .widget-medals-img {
  margin-right: 16px
}

.widget-medals .widget-medals-info {
  margin-top: 16px
}

.widget-medals .widget-medals-info:last-child {
  margin-left: auto
}

.widget-medals .widget-medals-info:last-child .widget-medals-title, .widget-medals .widget-medals-info:last-child .widget-medals-text {
  text-align: right
}

.widget-medals .widget-medals-info .widget-medals-title {
  color: var(--color-text-primary)
}

.widget-medals .widget-medals-info .widget-medals-text {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: .625em;
  text-transform: uppercase;
  line-height: 1em
}

.medal-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around
}

.medal-list.landscape {
  justify-content: space-between
}

.medal-list.landscape .medal-list-item {
  display: flex;
  flex-flow: row wrap
}

.medal-list.landscape .medal-list-item .medal-list-item-img {
  margin: 0 10px 0 0
}

.medal-list.landscape .medal-list-item .medal-list-item-title, .medal-list.landscape .medal-list-item .medal-list-item-text {
  text-align: left
}

.medal-list .medal-list-item .medal-list-item-img {
  margin-bottom: 16px
}

.medal-list .medal-list-item .medal-list-item-title, .medal-list .medal-list-item .medal-list-item-text {
  line-height: 1em;
  text-align: center
}

.medal-list .medal-list-item .medal-list-item-title {
  color: var(--color-text-primary)
}

.medal-list .medal-list-item .medal-list-item-text {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: .625em;
  text-transform: uppercase
}

.widget-row {
  height: 42px;
  padding: 0 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-row.filled {
  background-color: var(--color-surface-raised)
}

.widget-row.mobile {
  display: none
}

.widget-combined-stat .arc-rate-wrap {
  margin-bottom: 64px
}

.widget-overall-stats {
  display: flex;
  flex-flow: row wrap;
  padding-top: 18px;
  border-bottom: 1px solid var(--color-border)
}

.widget-overall-stats.small {
  width: 270px
}

.widget-overall-stats.small .widget-overall-stat {
  margin-right: 21px
}

.widget-overall-stats.small .widget-overall-stat:nth-child(8n+8) {
  margin-right: 21px
}

.widget-overall-stats.small .widget-overall-stat:nth-child(3n+3) {
  margin-right: 0
}

.widget-overall-stats .widget-overall-stat {
  margin: 0 23px 18px 0
}

.widget-overall-stats .widget-overall-stat:nth-child(8n+8) {
  margin-right: 0
}

.widget-tournament-results {
  display: flex;
  flex-flow: row wrap;
  flex-wrap: nowrap
}

.widget-tournament-results .widget-tournament-result-wrap {
  margin-right: 30px
}

.widget-tournament-results .widget-tournament-result-wrap:first-child .widget-tournament-result .widget-match-box:before {
  display: none
}

.widget-tournament-results .widget-tournament-result-wrap:last-child {
  margin-right: 0
}

.widget-tournament-results .widget-tournament-result-wrap:last-child .widget-tournament-result .widget-match-box:after {
  display: none
}

.widget-tournament-results .widget-tournament-result {
  position: relative
}

.widget-tournament-results .widget-tournament-result.tier-2, .widget-tournament-results .widget-tournament-result.tier-3 {
  margin-bottom: 26px
}

.widget-tournament-results .widget-tournament-result.tier-2:after, .widget-tournament-results .widget-tournament-result.tier-3:after {
  content: '';
  width: 1px;
  background-color: var(--gray-300);
  position: absolute;
  right: -16px
}

.widget-tournament-results .widget-tournament-result.tier-2:last-child, .widget-tournament-results .widget-tournament-result.tier-3:last-child {
  margin-bottom: 0
}

.widget-tournament-results .widget-tournament-result.tier-0 {
  padding: 244px 0 246px
}

.widget-tournament-results .widget-tournament-result.tier-0 .widget-match-box:before {
  top: 29px
}

.widget-tournament-results .widget-tournament-result.tier-1 {
  padding: 216px 0
}

.widget-tournament-results .widget-tournament-result.tier-2 {
  padding: 72px 0
}

.widget-tournament-results .widget-tournament-result.tier-2:nth-child(odd):after {
  top: 130px
}

.widget-tournament-results .widget-tournament-result.tier-2:nth-child(even):after {
  display: none
}

.widget-tournament-results .widget-tournament-result.tier-2:after {
  height: 289px
}

.widget-tournament-results .widget-tournament-result.tier-3:after {
  height: 145px;
  top: 58px
}

.widget-tournament-results .widget-tournament-result.tier-3 .widget-match-box {
  margin-bottom: 26px
}

.widget-tournament-results .widget-tournament-result.tier-3 .widget-match-box:last-child {
  margin-bottom: 0
}

.widget-tournament-results .widget-tournament-result .widget-match-box {
  position: relative
}

.widget-tournament-results .widget-tournament-result .widget-match-box:before, .widget-tournament-results .widget-tournament-result .widget-match-box:after {
  content: '';
  width: 16px;
  height: 1px;
  background-color: var(--gray-300);
  position: absolute;
  top: 57px
}

.widget-tournament-results .widget-tournament-result .widget-match-box:before {
  left: -16px
}

.widget-tournament-results .widget-tournament-result .widget-match-box:after {
  right: -16px
}

.widget-tickets .ticket-wrap {
  margin-bottom: 24px
}

.widget-tickets .ticket-wrap:last-child {
  margin-bottom: 0
}

.widget-display {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border)
}

.widget-display.multiple-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.widget-display.multiple-items.space-around {
  justify-content: space-around
}

.widget-display.spaced-items {
  justify-content: flex-start;
  padding: 18px 0 0
}

.widget-display.spaced-items.medium {
  padding: 24px 0 0
}

.widget-display.spaced-items.medium .featured-stat-wrap {
  margin-bottom: 24px
}

.widget-display.spaced-items .featured-stat-wrap {
  margin: 0 60px 18px 0
}

.widget-display.spaced-items .featured-stat-wrap:last-child {
  margin-right: 0
}

.widget-display.medium {
  padding: 24px 0
}

.widget-display.align-left {
  justify-content: space-between;
  padding-right: 114px
}

.widget-display.center {
  justify-content: center;
  text-align: center
}

.widget-display.no-border {
  border: none
}

.widget-team-list {
  display: flex;
  flex-flow: row wrap
}

.widget-team-list .widget-team-list-item {
  width: 45px;
  height: 57px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.widget-team-list .widget-team-list-item:nth-child(6n+6) {
  border-right: none
}

.widget-team-list .widget-team-list-item.eliminated .team-logo {
  opacity: 0.2
}

.widget-team-list .widget-team-list-item .cross-icon {
  fill: var(--gray-300)
}

.widget-player-preview {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto
}

.widget-player-preview .player-preview {
  margin-right: 20px
}

.widget-player-preview .player-preview:nth-child(5n+5) {
  margin-right: 0
}

.widget-team-overview {
  padding: 42px 40px 55px
}

.overview-info-wrap {
  display: flex;
  flex-flow: row wrap
}

.overview-info-wrap .overview-info {
  width: 200px
}

.overview-info-wrap .stats-info {
  margin-left: auto
}

.overview-info-wrap .overview-info-item {
  margin-bottom: 30px
}

.overview-info-wrap .overview-info-item:last-child {
  margin-bottom: 0
}

.overview-info-wrap .overview-info-item .overview-info-item-title {
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.overview-info-wrap .overview-info-item .overview-info-item-text {
  margin-top: 12px;
  color: var(--color-text-primary);
  line-height: 1em
}

.overview-info-wrap .overview-info-item .overview-info-item-text.centered {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.overview-info-wrap .overview-info-item .overview-info-item-text .team-logo {
  width: 20px;
  height: 20px;
  margin-right: 6px
}

.overview-info-wrap .overview-info-item .overview-info-item-text img {
  margin-right: 4px
}

.team-overview {
  display: flex;
  flex-flow: row wrap
}

.team-overview .team-logo {
  margin: 0 76px 0 10px
}

.team-overview .overview-info-wrap {
  padding-top: 10px
}

.team-overview .arc-rate-wrap {
  margin: 4px 0 0 auto
}

.widget-calendar-row {
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.widget-calendar-row .calendar-row-wrap {
  height: 66px;
  position: relative;
  overflow: hidden
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items-wrap {
  width: 1170px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -585px
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items {
  height: 66px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item {
  width: 60px;
  text-align: center
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item .calendar-row-item-month {
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item .calendar-row-item-day {
  margin-top: 6px;
  color: var(--color-text-primary);
  line-height: 1em
}

.widget-calendar-row .calendar-row-wrap .calendar-row-items .calendar-row-item .calendar-row-item-day.active {
  color: var(--violet-500)
}

.widget-calendar-row .slider-controls .control-next, .widget-calendar-row .slider-controls .control-previous {
  position: absolute;
  bottom: 20px
}

.widget-calendar-row .slider-controls .control-next {
  right: 0
}

.widget-calendar-row .slider-controls .control-previous {
  left: 0
}

@media screen and (max-width: 1260px) {
  .widget-sidebar .sidebar-search-form {
    width: 870px;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -435px
  }

  .widget-row.full {
    display: none
  }

  .widget-row.mobile {
    display: flex;
    flex-flow: row wrap
  }

  .widget-media-wrap.popup-display .widget-media-r, .widget-media-wrap.big .widget-media-r, .widget-media-wrap.large .widget-media-r, .widget-media-wrap.huge .widget-media-r {
    height: 0;
    padding-bottom: 43%;
    position: relative
  }

  .widget-media-wrap.popup-display .widget-media-r iframe, .widget-media-wrap.popup-display .widget-media-r img, .widget-media-wrap.big .widget-media-r iframe, .widget-media-wrap.big .widget-media-r img, .widget-media-wrap.large .widget-media-r iframe, .widget-media-wrap.large .widget-media-r img, .widget-media-wrap.huge .widget-media-r iframe, .widget-media-wrap.huge .widget-media-r img {
    height: 100%;
    position: absolute
  }

  .widget-media-wrap.popup-display.popup-wrap {
    width: 95%
  }

  .widget-player-preview {
    width: 694px
  }

  .widget-player-preview .player-preview:nth-child(5n+5) {
    margin-right: 20px
  }

  .widget-player-preview .player-preview:nth-child(3n+3), .widget-player-preview .player-preview:last-child {
    margin-right: 0
  }

  .widget-team-overview {
    padding-left: 0;
    padding-right: 0
  }

  .team-overview {
    justify-content: center
  }

  .team-overview .overview-info {
    width: 170px
  }

  .team-overview .arc-rate-wrap {
    display: none
  }
}

@media screen and (max-width: 960px) {
  .live-news-widget {
    padding: 0 115px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(1) {
    width: 150px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(2) {
    width: 145px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(3) {
    width: 140px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(4) {
    width: 135px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(5) {
    width: 130px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(6) {
    width: 125px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(7) {
    width: 120px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(8) {
    width: 115px
  }

  .widget-sidebar .sidebar-search-form {
    width: 100%;
    position: absolute;
    top: 30px;
    left: 0;
    margin-left: 0
  }

  .post-preview-set .post-preview-set-left, .post-preview-set .post-preview-set-right {
    width: 100%
  }

  .post-preview-set .post-preview-set-right {
    flex-direction: row
  }

  .post-preview-set .post-preview-set-right .post-preview {
    width: 33.3333333333%
  }

  .widget-stat-rows .widget-stat-row {
    display: block
  }

  .widget-stat-rows .widget-stat-row .progress-stat-wrap {
    margin: 22px 0 24px
  }

  .widget-stat-rows .widget-stat-row .progress-stat-wrap:first-child {
    margin-left: 0
  }

  .widget-stat-rows .widget-stat-row .progress-stat-wrap:last-child {
    margin-right: 0
  }

  .widget-stat-rows .widget-stat-row .arc-stats-wrap {
    margin: 16px 0;
    justify-content: center
  }

  .widget-stat-rows .widget-stat-row .arc-stats-wrap:first-child {
    margin-left: 0
  }

  .widget-stat-rows .widget-stat-row .widget-stat-info-wrap {
    margin-top: 28px;
    justify-content: center
  }

  .widget-stat-rows .widget-stat-row .widget-stat-info-wrap:last-child {
    margin-right: 0;
    margin-bottom: 30px
  }

  .widget-match-box-wrap {
    display: block
  }

  .widget-match-box-wrap .widget-match-box .widget-match-box-row.padded-right, .widget-match-box-wrap .widget-match-box .widget-match-box-row.padded-right-small {
    padding-right: 0
  }

  .widget-match-box-wrap .widget-match-box .widget-match-box-row .featured-stat-wrap .featured-stat-title, .widget-match-box-wrap .widget-match-box .widget-match-box-row .featured-stat-wrap .featured-stat-text, .widget-match-box-wrap .widget-match-box .widget-match-box-row .featured-stat-wrap.right .featured-stat-title, .widget-match-box-wrap .widget-match-box .widget-match-box-row .featured-stat-wrap.right .featured-stat-text {
    text-align: center
  }

  .widget-match-box-wrap .widget-match-box:nth-child(1) .widget-title-wrap, .widget-match-box-wrap .widget-match-box:nth-child(1) .widget-match-box-row {
    padding-right: 0
  }

  .widget-match-box-wrap .widget-match-box:nth-child(2) .widget-match-box-row {
    padding: 0 30px
  }

  .widget-match-box-wrap .widget-match-box:nth-child(1), .widget-match-box-wrap .widget-match-box:nth-child(2), .widget-match-box-wrap .widget-match-box:nth-child(3) {
    width: 270px;
    margin: 0 auto
  }

  .widget-match-box.multiple-items, .widget-match-box.multiple-items.inverted {
    display: block
  }

  .widget-match-box.multiple-items .widget-team-vs, .widget-match-box.multiple-items.inverted .widget-team-vs {
    width: auto
  }

  .widget-match-box.multiple-items .widget-team-vs.medium, .widget-match-box.multiple-items .widget-team-vs.big, .widget-match-box.multiple-items.inverted .widget-team-vs.medium, .widget-match-box.multiple-items.inverted .widget-team-vs.big {
    padding: 0 52px
  }

  .widget-match-box.multiple-items .widget-info-box, .widget-match-box.multiple-items.inverted .widget-info-box {
    padding: 0;
    margin-bottom: 30px;
    text-align: center
  }

  .widget-match-box.multiple-items .widget-info-box .countdown-text-heading, .widget-match-box.multiple-items .widget-info-box .countdown-text, .widget-match-box.multiple-items.inverted .widget-info-box .countdown-text-heading, .widget-match-box.multiple-items.inverted .widget-info-box .countdown-text {
    text-align: center
  }

  .widget-match-box.multiple-items .widget-info-box .progress-bar, .widget-match-box.multiple-items.inverted .widget-info-box .progress-bar {
    margin: 8px auto 0
  }

  .widget-match-box.multiple-items .widget-media, .widget-match-box.multiple-items.inverted .widget-media {
    margin: 16px auto 30px
  }

  .widget-title-wrap .widget-title-item.medium {
    width: 100%
  }

  .widget-title-wrap .widget-title-item.no-mobile {
    display: none
  }

  .team-score-boxes-title-wrap.large .team-score-box-title {
    width: 82px
  }

  .team-score-boxes-title-wrap.large .team-score-box-title:last-child {
    width: 82px
  }

  .widget-team-vs.v3.big .team-info-wrap {
    margin-left: 20px
  }

  .team-score-boxes.large .team-score-box {
    width: 82px
  }

  .team-score-boxes.large .team-score-box.final {
    width: 82px
  }

  .widget-characters {
    width: 522px;
    margin: 0 auto
  }

  .widget-characters .widget-characters-list .widget-characters-list-item:nth-child(5n+5) {
    border-right: 1px solid var(--color-border)
  }

  .widget-characters .widget-characters-list .widget-characters-list-item:nth-child(3n+3) {
    border-right: none
  }

  .widget-overall-stats.full {
    width: 555px;
    margin: 0 auto
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(8n+8) {
    margin-right: 23px
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(5n+5) {
    margin-right: 0
  }

  .widget-player-preview {
    width: 456px
  }

  .widget-player-preview .player-preview:nth-child(3n+3) {
    margin-right: 20px
  }

  .widget-player-preview .player-preview:nth-child(even) {
    margin-right: 0
  }

  .widget-team-overview {
    padding-left: 0;
    padding-right: 0
  }

  .team-overview {
    display: block
  }

  .team-overview .team-logo {
    display: block;
    margin: 0 auto
  }

  .team-overview .team-logo.big {
    width: 100px;
    height: 100px
  }

  .team-overview .overview-info-wrap {
    justify-content: space-evenly;
    padding-top: 40px
  }

  .team-overview .overview-info {
    width: auto
  }
}

@media screen and (max-width: 680px) {
  .live-news-widget {
    padding: 0 45px
  }

  .live-news-widget .live-news-widget-title-wrap {
    display: none
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(1) {
    width: 80px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(2) {
    width: 75px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(3) {
    width: 70px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(4) {
    width: 65px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(5) {
    width: 60px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(6) {
    width: 55px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(7) {
    width: 50px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(8) {
    width: 45px
  }

  .post-preview-set .post-preview-set-right .post-preview {
    width: 100%
  }

  .widget-simple-stats {
    display: block
  }

  .widget-simple-stats.v2 .widget-simple-stat:nth-child(2n+2) .widget-simple-stat-rows {
    border-left: none
  }

  .widget-simple-stats .widget-simple-stat.half {
    width: 100%
  }

  .widget-simple-stats .widget-simple-stat:first-child .widget-simple-stat-rows .widget-simple-stat-row {
    padding-right: 16px
  }

  .widget-match-box.multiple-items .widget-team-vs.v2.medium, .widget-match-box.multiple-items .widget-team-vs.v2.big {
    padding: 20px 16px 10px
  }

  .widget-match-box.multiple-items .widget-team-vs.v2.medium .match-time.big, .widget-match-box.multiple-items .widget-team-vs.v2.big .match-time.big {
    margin-top: 10px
  }

  .widget-match-box.multiple-items .widget-info-box, .widget-match-box.multiple-items .widget-media {
    margin-top: 40px
  }

  .widget-match-box .widget-match-box-items {
    display: block
  }

  .widget-match-box .widget-match-box-items .widget-team-vs {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    border-right: none
  }

  .widget-match-box .widget-match-box-items .widget-match-box-item-wrap {
    width: 100%
  }

  .widget-match-box .widget-match-box-row.big .match-stats {
    margin: 0 40px
  }

  .widget-match-box .widget-match-box-row.big .match-stats .match-score.big {
    font-size: 1.375em
  }

  .widget-team-vs.v2.medium, .widget-team-vs.v2.big {
    height: auto;
    padding: 20px 16px 10px
  }

  .widget-team-vs.v2.medium.centered, .widget-team-vs.v2.big.centered {
    height: auto;
    padding-top: 20px
  }

  .widget-team-vs.v2.medium.centered .match-stats, .widget-team-vs.v2.big.centered .match-stats {
    margin: 0 40px
  }

  .widget-team-vs.v2.medium.centered .team-info-wrap .team-info, .widget-team-vs.v2.big.centered .team-info-wrap .team-info {
    text-align: center
  }

  .widget-team-vs.v2.medium .team-info-wrap.medium, .widget-team-vs.v2.big .team-info-wrap.medium {
    display: block;
    margin-top: 0;
    text-align: center
  }

  .widget-team-vs.v2.medium .team-info-wrap.medium.inverted .team-info, .widget-team-vs.v2.big .team-info-wrap.medium.inverted .team-info {
    margin: 6px 0 0 0;
    text-align: center
  }

  .widget-team-vs.v2.medium .team-info-wrap.medium .team-logo, .widget-team-vs.v2.big .team-info-wrap.medium .team-logo {
    width: 30px;
    height: 30px
  }

  .widget-team-vs.v2.medium .team-info-wrap.medium .team-info, .widget-team-vs.v2.big .team-info-wrap.medium .team-info {
    margin: 6px 0 0 0
  }

  .widget-team-vs.v2.medium .team-info-wrap.medium .team-info .team-country, .widget-team-vs.v2.big .team-info-wrap.medium .team-info .team-country {
    margin-top: 3px
  }

  .widget-team-vs.v2.medium .match-stats .match-score.medium, .widget-team-vs.v2.big .match-stats .match-score.medium {
    margin-top: 20px;
    font-size: 1.375em
  }

  .widget-team-vs.v3.big .widget-team-vs-item {
    height: 86px
  }

  .widget-team-vs.v3.big .team-info-wrap {
    margin: 14px 0 0 10px
  }

  .widget-team-vs.v3.big .team-info-wrap.medium .team-logo {
    width: 30px;
    height: 30px;
    margin-top: 10px
  }

  .widget-team-vs.v3.big .team-info-wrap.medium .team-info {
    margin: 18px 0 0 10px
  }

  .widget-team-vs.v3.big .team-info-wrap.medium .team-info .team-name {
    font-size: .6875em
  }

  .team-score-boxes-title-wrap.no-title-mobile {
    display: none
  }

  .team-score-boxes.big .team-score-box, .team-score-boxes.large .team-score-box {
    width: 58px;
    height: 86px
  }

  .team-score-boxes.big .team-score-box:last-child, .team-score-boxes.large .team-score-box:last-child {
    width: 58px
  }

  .team-score-boxes.big .team-score-box .team-points, .team-score-boxes.large .team-score-box .team-points {
    font-size: 1.125em;
    line-height: 86px
  }

  .team-score-boxes.big .team-score-box.final .team-points, .team-score-boxes.large .team-score-box.final .team-points {
    font-size: 1.375em
  }

  .widget-team-builds-header {
    position: relative;
    padding-bottom: 90px
  }

  .widget-team-builds-header .button {
    width: 220px;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -110px
  }

  .widget-team-builds-header .team-logo {
    width: 30px;
    height: 30px
  }

  .widget-team-builds-header .team-info-wrap.medium .team-info {
    margin-top: 8px
  }

  .widget-characters {
    width: 270px
  }

  .widget-characters .widget-characters-list .widget-characters-list-item {
    width: 135px
  }

  .widget-characters .widget-characters-list .widget-characters-list-item:nth-child(3n+3) {
    border-right: 1px solid var(--color-border)
  }

  .widget-characters .widget-characters-list .widget-characters-list-item:nth-child(2n+2) {
    border-right: none
  }

  .widget-overall-stats.full {
    width: 421px
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(5n+5) {
    margin-right: 23px
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(4n+4) {
    margin-right: 0
  }

  .widget-display.align-left {
    padding-right: 0;
    padding-bottom: 0;
    justify-content: space-evenly
  }

  .widget-display.align-left .featured-stat-wrap {
    margin: 0 30px 24px 0
  }

  .widget-display.align-left .featured-stat-wrap:last-child {
    margin-right: 0
  }

  .widget-player-preview {
    width: 218px
  }

  .widget-player-preview .player-preview {
    margin-right: 0
  }

  .widget-player-preview .player-preview:nth-child(3n+3) {
    margin-right: 0
  }

  .events-preview.full .event-preview-item {
    padding-right: 16px
  }

  .events-preview.full .event-preview-item .button {
    position: static;
    margin-top: 16px
  }
}

@media screen and (max-width: 480px) {
  .live-news-widget {
    padding: 0 5px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(1) {
    width: 40px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(2) {
    width: 35px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(3) {
    width: 30px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(4) {
    width: 25px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(5) {
    width: 20px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(6) {
    width: 15px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(7) {
    width: 10px
  }

  .live-news-widget .live-news-widget-stairs .live-news-widget-stair:nth-child(8) {
    width: 5px
  }

  .team-score-boxes.big .team-score-box, .team-score-boxes.large .team-score-box {
    width: 42px
  }

  .team-score-boxes.big .team-score-box:last-child, .team-score-boxes.large .team-score-box:last-child {
    width: 42px
  }

  .widget-overall-stats.full {
    width: 200px
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(4n+4) {
    margin-right: 23px
  }

  .widget-overall-stats.full .widget-overall-stat:nth-child(2n+2) {
    margin-right: 0
  }
}

.table {
  display: table;
  width: 100%;
  border-bottom: 1px solid var(--color-border)
}

.table.mobile {
  display: none
}

.table.order-overview .table-row-item {
  padding: 26px 0
}

.table.order-overview .table-row-item .product-name {
  color: var(--color-text-primary);
  line-height: 1em
}

.table.order-overview .table-row-item .product-category {
  margin-top: 4px;
  color: var(--color-text-muted)
}

.table.order-overview .table-row-item .rating-ornament {
  padding: 0
}

.table.forum-categories .table-row-item .table-text {
  margin-bottom: 20px
}

.table.forum-categories + .table.forum-topics {
  margin-top: 10px
}

.table.forum-messages .table-row-item {
  padding: 26px 0
}

.table.forum-messages .table-row-item.padded-big {
  padding: 0 20px
}

.table.forum-messages .table-row-item .rl-label {
  padding: 0 0 0 30px;
  font-size: .75em
}

.table.forum-messages .table-row-item:first-child {
  padding-left: 16px
}

.table.forum-topics .table-row-item {
  padding: 32px 0
}

.table.forum-topics .table-row-item.padded-big {
  padding: 0 20px
}

.table.forum-topics .table-row-item .forum-post-link {
  width: 470px
}

.table.forum-topics .table-row-item:first-child {
  padding-left: 30px
}

.table.records .table-rows .table-row-item:first-child {
  padding-left: 16px
}

.table.game-overview .table-rows .table-row-item:first-child .team-info-wrap {
  margin-left: 24px
}

.table.game-overview + .table.game-overview {
  margin-top: 10px
}

.table.lineups.mobile .table-row-header-item:first-child {
  width: 250px
}

.table.lineups.mobile + .table.lineups.mobile {
  margin-top: 30px
}

.table.lineups.full-stats + .widget-row {
  border-top: none
}

.table.lineups.game-leaders + .table.lineups.game-leaders .table-row-header .table-row-header-item {
  border-top: none
}

.table.lineups.game-leaders .table-rows .table-row-item:last-child .team-logo {
  display: block;
  margin: 0 auto
}

.table.lineups.most-played + .table.lineups.most-played .table-row-header .table-row-header-item {
  border-top: none
}

.table.lineups.most-played .table-row-item .table-text {
  position: relative
}

.table.lineups.most-played .table-row-item .table-text .rate-up, .table.lineups.most-played .table-row-item .table-text .rate-down {
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -3px
}

.table.lineups .table-text .highlight:nth-child(1) {
  color: var(--violet-500)
}

.table.lineups .table-text .highlight:nth-child(2) {
  color: var(--cyan-500)
}

.table.lineups .table-text .highlight:nth-child(3) {
  color: var(--color-text-secondary)
}

.table.lineups .table-row-header-item {
  vertical-align: middle
}

.table.lineups .table-row-header-item.left .table-row-header-title {
  margin-left: 16px
}

.table.lineups .table-row-header-item.right .table-row-header-title {
  margin-right: 16px
}

.table.lineups .table-row-header-item .team-info-wrap {
  margin: 0 0 14px 16px
}

.table.lineups .table-row-header-item .team-info-wrap.inverted {
  margin: 0 16px 14px 0
}

.table.lineups .table-row-item .team-info-wrap {
  margin: 0 0 0 16px
}

.table.lineups .table-row-item .team-info-wrap .hexagon + .hexagon {
  margin: 0 0 0 12px
}

.table.lineups .table-row-item .team-info-wrap .hexagon + .team-info {
  margin: 12px 0 0 16px
}

.table.lineups .table-row-item .team-info-wrap.medium .team-country {
  text-transform: uppercase
}

.table.lineups .table-row-item .team-info-wrap.inverted {
  margin: 0 16px 0 0
}

.table.lineups .table-row-item .team-info-wrap.inverted .hexagon {
  order: 3
}

.table.lineups .table-row-item .team-info-wrap.inverted .hexagon + .hexagon {
  order: 2;
  margin: 0 12px 0 0
}

.table.lineups .table-row-item .team-info-wrap.inverted .hexagon + .team-info {
  order: 1;
  margin: 12px 16px 0 0
}

.table.lineups .table-row-item .skill-loot-list:first-child {
  margin-top: 8px
}

.table.matches .team-info-wrap {
  padding: 0 0 0 20px
}

.table.matches .team-info-wrap.inverted {
  padding: 0 20px 0 0
}

.table.matches.hoverable .match-stats {
  margin-top: 10px
}

.table.matches.hoverable .match-score {
  transition: all .3s ease-in-out
}

.table.matches.hoverable .match-link {
  opacity: 0;
  visibility: hidden;
  position: relative;
  top: 0;
  transition: all .3s ease-in-out
}

.table.matches.hoverable .table-row:hover .match-score {
  opacity: 0;
  visibility: hidden
}

.table.matches.hoverable .table-row:hover .match-link {
  opacity: 1;
  visibility: visible;
  top: -10px
}

.table.top-players, .table.ranked-stats, .table.champion-stats, .table.champion-rates, .table.player-roles {
  width: 270px
}

.table.champion-rates .table-row-item .progress-bar {
  margin: 17px 0 0 auto
}

.table-row-header {
  display: table-header-group
}

.table-row-header.colored {
  background-color: var(--color-surface-raised)
}

.table-row-header.big .table-row-header-item {
  height: 42px
}

.table-row-header.bordered .table-row-header-item {
  border-top: 1px solid var(--color-border)
}

.table-row-header-item {
  display: table-cell;
  height: 40px;
  vertical-align: middle
}

.table-row-header-item.padded {
  padding: 0 10px
}

.table-row-header-item.padded-big {
  padding: 0 20px
}

.table-row-header-item.padded-large {
  padding: 0 60px
}

.table-row-header-item.position .table-row-header-title, .table-row-header-item.left .table-row-header-title {
  text-align: left
}

.table-row-header-item.right .table-row-header-title {
  text-align: right
}

.table-row-header-item .table-row-header-title {
  color: var(--color-text-primary);
  text-align: center
}

.table-rows {
  display: table-row-group
}

.table-rows .table-row:nth-child(odd) {
  background-color: var(--color-surface-raised)
}

.table-rows .table-row:nth-child(odd).void {
  background-color: var(--color-surface-base)
}

.table-rows.no-color .table-row:nth-child(odd) {
  background-color: var(--color-surface-base)
}

.table-row {
  display: table-row;
  height: 56px
}

.table-row.filled {
  background-color: var(--color-surface-raised)
}

.table-row.big {
  height: 76px
}

.table-row.large .table-row-item .table-text {
  font-size: .6875em
}

.table-row.no-border-top .table-row-item {
  border-top: none
}

.table-row-item {
  display: table-cell;
  border-top: 1px solid var(--color-border);
  vertical-align: middle
}

.table-row-item.centered {
  text-align: center
}

.table-row-item.position {
  display: flex;
  flex-flow: row wrap
}

.table-row-item.position .table-text {
  margin-left: 10px;
  line-height: 56px
}

.table-row-item.position .team-info-wrap {
  margin: 10px 0 0 10px
}

.table-row-item.left .table-text {
  text-align: left
}

.table-row-item.padded {
  padding: 0 10px
}

.table-row-item.padded-big {
  padding: 0 20px
}

.table-row-item.padded-large {
  padding: 0 60px
}

.table-row-item .table-text {
  color: var(--color-text-muted);
  font-weight: 400;
  text-align: center
}

.table-row-item .table-text.bold {
  color: var(--color-text-primary)
}

.table-row-item .table-text.bold.light {
  color: var(--color-text-muted)
}

.table-row-item .table-text.bolder {
  color: var(--color-text-primary)
}

.table-row-item .table-text.bolder.light {
  color: var(--color-text-muted)
}

.table-row-item .table-text .highlight:nth-child(1) {
  color: var(--violet-500)
}

.table-row-item .table-text .highlight:nth-child(2) {
  color: var(--cyan-500)
}

.table-row-item .table-text .highlight:nth-child(3) {
  color: var(--color-text-secondary)
}

.table-row-item .table-text-link {
  color: var(--color-text-primary);
  font-weight: 700;
  text-align: center;
  cursor: pointer
}

.table-row-item .table-text-link .play-button-icon {
  fill: var(--violet-500);
  position: relative;
  top: 1px;
  margin-right: 6px
}

.table-row-item .table-text-link:hover {
  color: var(--violet-500)
}

.table-row-item .match-stats .match-score, .table-row-item .match-stats .match-link {
  margin-top: 0
}

.featured-info {
  display: flex;
  flex-flow: row wrap
}

.featured-info.small .featured-info-img {
  margin-right: 10px
}

.featured-info.small .featured-info-text {
  font-size: .625em
}

.featured-info .featured-info-img {
  margin-right: 16px
}

.featured-info .featured-info-img.hexagon + .featured-info-text {
  margin-top: 10px
}

.featured-info .featured-info-text {
  margin-top: 4px;
  color: var(--color-text-primary)
}

.match-stats {
  text-align: center
}

.match-stats .match-score {
  margin-top: 20px;
  color: var(--color-text-primary)
}

.match-stats .match-score.big {
  font-size: 2em
}

.match-stats .match-score.small {
  font-size: .75em
}

.match-stats .match-score.smaller {
  font-size: .625em
}

.match-stats .match-score.tiny {
  font-size: .5625em
}

.match-stats .match-score .light {
  color: var(--color-text-muted)
}

.match-stats .match-score .team-yellow {
  color: #dee807
}

.match-stats .match-score .team-blue {
  color: #107df8
}

.match-stats .match-link {
  margin-top: 3px;
  color: var(--color-text-primary)
}

.match-stats .match-link.light {
  color: var(--color-text-secondary);
  font-size: .5625em
}

.match-stats .match-link:hover {
  color: var(--violet-500)
}

.match-stats .match-time {
  margin-top: 6px;
  color: var(--color-text-primary)
}

.match-stats .match-time.medium {
  margin-top: 10px;
  font-size: .625em
}

.team-lineups-header {
  height: 50px;
  padding: 0 16px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.team-lineups-header.mobile {
  display: none
}

.team-lineups-header.medium {
  height: 85px
}

@media screen and (max-width: 1260px) {
  .table.full {
    display: none
  }

  .table.mobile {
    display: table
  }

  .table.forum-categories .table-row-header-item:last-child, .table.forum-categories .table-row-item:last-child {
    display: none
  }

  .table.forum-categories .forum-category-wrap {
    width: auto
  }

  .table.forum-topics .table-row-header-item:first-child, .table.forum-topics .table-row-item:first-child {
    padding-left: 0
  }

  .table.forum-topics .table-row-header-item:nth-child(3), .table.forum-topics .table-row-item:nth-child(3) {
    display: none
  }

  .team-lineups-header.full {
    display: none
  }

  .team-lineups-header.mobile {
    display: flex;
    flex-flow: row wrap
  }
}

@media screen and (max-width: 960px) {
  .table.records .featured-info .featured-info-img {
    display: none
  }

  .table.records .featured-info .featured-info-img.hexagon + .featured-info-text {
    margin-top: 0
  }

  .table.records .featured-info .featured-info-text {
    margin-top: 0;
    line-height: 16px
  }

  .table.records .table-text {
    line-height: 16px
  }

  .table.game-overview .table-rows .table-row-item:first-child .team-info-wrap {
    margin-left: 0
  }

  .table.game-overview .table-rows .table-row-item .team-info {
    display: none
  }

  .table.lineups.game-leaders .table-rows .table-row.big {
    height: 160px
  }

  .table.lineups.game-leaders .table-rows .table-row .table-row-item .team-info-wrap .team-info {
    text-align: center
  }

  .table.matches.hoverable .match-stats {
    margin-top: 4px
  }

  .table.matches.hoverable .match-link {
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
    position: static
  }

  .table.matches.hoverable .table-row:hover .match-score {
    opacity: 1;
    visibility: visible
  }

  .table.matches .team-info {
    display: none
  }

  .table.matches .table-text-link .play-button-icon {
    margin-right: 0
  }

  .table.matches .table-text-link .link-text {
    display: none
  }

  .table.hero-stats .table-row-item .featured-stat-wrap {
    display: none
  }

  .table.hero-stats .table-row-item .featured-stat-wrap:nth-child(1), .table.hero-stats .table-row-item .featured-stat-wrap:nth-child(2) {
    display: block
  }

  .table.hero-stats .table-row-item .featured-stat-wrap:nth-child(2) {
    margin-right: 0
  }

  .table.forum-topics .table-row-header-item:nth-child(4), .table.forum-topics .table-row-header-item:nth-child(5), .table.forum-topics .table-row-item:nth-child(4), .table.forum-topics .table-row-item:nth-child(5) {
    display: none
  }

  .table.forum-topics .table-row-item .forum-post-link, .table.forum-topics .table-row-item .forum-post-description-preview {
    width: auto;
    padding-right: 30px
  }

  .table.forum-topics .table-row-item .forum-category-text {
    width: 120px
  }
}

@media screen and (max-width: 680px) {
  .table.most-played .table-row-header-item:nth-child(2), .table.most-played .table-row-header-item:last-child, .table.most-played .table-row-item:nth-child(2), .table.most-played .table-row-item:last-child {
    display: none
  }

  .table.most-played .table-row-item .team-info {
    display: none
  }

  .table.lineups.full-stats.mobile .table-row-item:nth-last-child(2), .table.lineups.full-stats.mobile .table-row-item:last-child, .table.lineups.full-stats.mobile .table-row-header-item:nth-last-child(2), .table.lineups.full-stats.mobile .table-row-header-item:last-child {
    display: none
  }

  .table.order-overview .table-row-header-item:nth-child(2), .table.order-overview .table-row-item:nth-child(2) {
    display: none
  }

  .table.forum-categories .table-row-header-item.padded-large, .table.forum-categories .table-row-item.padded-large {
    padding: 0 40px
  }

  .table.forum-categories .table-row-header-item.left .table-row-header-title, .table.forum-categories .table-row-item.left .table-row-header-title {
    text-align: center
  }

  .table.forum-categories .forum-category-wrap {
    width: auto;
    padding-left: 0
  }

  .table.forum-categories .forum-category-wrap .forum-category-img {
    position: static;
    display: block;
    margin: 0 auto 20px
  }

  .table.forum-categories .forum-category-wrap .forum-category-title, .table.forum-categories .forum-category-wrap .forum-category-description {
    text-align: center
  }

  .table.forum-categories .forum-category-wrap .forum-category-subcategories {
    margin-left: 10px
  }

  .table.forum-messages .table-row-header-item:nth-child(2), .table.forum-messages .table-row-item:nth-child(2) {
    display: none
  }

  .table.forum-topics .forum-post-link.pin-tag, .table.forum-topics .forum-post-link.spoiler-tag {
    padding-left: 0
  }

  .table.forum-topics .forum-post-link.pin-tag:before, .table.forum-topics .forum-post-link.spoiler-tag:before {
    display: none
  }

  .team-lineups-header.mobile .team-info-wrap.mid .team-logo {
    width: 30px;
    height: 30px
  }

  .team-lineups-header.mobile .team-info-wrap.mid .team-info {
    margin-top: 6px
  }

  .team-lineups-header.mobile .team-info-wrap.mid .team-info .team-name {
    font-size: .6875em
  }

  .team-lineups-header.mobile .featured-stat-wrap {
    display: none
  }

  .team-lineups-header.mobile .featured-stat-wrap:first-child, .team-lineups-header.mobile .featured-stat-wrap:last-child {
    display: block
  }
}

@media screen and (max-width: 480px) {
  .table.standings.mobile .team-info-wrap .team-info {
    display: none
  }
}

.post-author-info-wrap:after {
  content: '';
  display: table;
  clear: both
}

.post-author-info-wrap .user-avatar {
  float: left;
  margin-right: 8px
}

.post-author-info-wrap.negative .post-author-info {
  color: var(--white)
}

.post-author-info {
  line-height: 26px
}

.post-author-info .post-author, .post-author-info .post-comment-count {
  font-weight: 700
}

.post-author-info .separator {
  margin: 0 5px
}

.post-open-author-wrap {
  display: flex;
  flex-flow: row wrap
}

.post-open-author-wrap .user-avatar {
  width: 45px;
  height: 45px;
  margin-right: 14px
}

.post-open-author-wrap .post-open-author, .post-open-author-wrap .post-open-timestamp, .post-open-author-wrap .post-open-comment-count, .post-open-author-wrap .post-open-comment-text {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em
}

.post-open-author-wrap .post-open-author, .post-open-author-wrap .post-open-comment-count {
  font-size: .8125em
}

.post-open-author-info {
  margin-right: 40px
}

.post-open-author-info .post-open-author {
  margin: 6px 0
}

.post-open-author-info .post-open-author .post-open-author-name {
  font-weight: 700
}

.post-open-comment-info {
  position: relative;
  padding-left: 46px
}

.post-open-comment-info .post-open-comment-icon {
  position: absolute;
  top: 4px;
  left: 0
}

.post-open-comment-info .post-open-comment-icon.icon-bubbles {
  color: var(--gray-300);
  font-size: 36px
}

.post-open-comment-info .post-open-comment-count {
  display: inline-block;
  margin: 6px 0;
  font-weight: 700
}

.post-preview {
  position: relative
}

.post-preview + .line-separator {
  margin-top: 10px
}

.post-preview .post-preview-st-video {
  width: 270px;
  height: 160px;
  margin-bottom: 16px
}

.post-preview .post-preview-st-video iframe {
  width: 100%;
  height: 100%
}

.post-preview .post-preview-img {
  transition: transform .3s ease-in-out
}

.post-preview:hover .post-preview-img {
  transform: scale(1.1)
}

.post-preview:hover .post-preview-title {
  color: #111
}

.post-preview .post-preview-title .highlight, .post-preview .post-preview-text .highlight {
  color: var(--blue-500)
}

.post-preview .review-rating {
  position: absolute;
  top: 8px;
  right: 10px;
  pointer-events: none
}

.post-preview .timestamp-tag {
  position: absolute;
  bottom: 0;
  right: 0
}

.post-preview.gaming-news .tag-ornament.video, .post-preview.geeky-news .tag-ornament.video, .post-preview.movie-news .tag-ornament.video, .post-preview.game-review .tag-ornament.video, .post-preview.e-sport .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-preview.gaming-news .rating-ornament-icon {
  fill: var(--blue-500)
}

.post-preview.gaming-news .tag-ornament {
  background-color: var(--blue-500)
}

.post-preview.gaming-news .post-author, .post-preview.gaming-news .post-comment-count {
  color: var(--blue-500)
}

.post-preview.gaming-news.picture .loading-line {
  background-color: var(--blue-500)
}

.post-preview.geeky-news .rating-ornament-icon {
  fill: var(--amber-500)
}

.post-preview.geeky-news .tag-ornament {
  background-color: var(--amber-500)
}

.post-preview.geeky-news .post-author, .post-preview.geeky-news .post-comment-count {
  color: var(--amber-500)
}

.post-preview.geeky-news.picture .loading-line {
  background-color: var(--amber-500)
}

.post-preview.movie-news .rating-ornament-icon {
  fill: var(--green-500)
}

.post-preview.movie-news .tag-ornament {
  background-color: var(--green-500)
}

.post-preview.movie-news .post-author, .post-preview.movie-news .post-comment-count {
  color: var(--green-500)
}

.post-preview.movie-news.picture .loading-line {
  background-color: var(--green-500)
}

.post-preview.game-review .rating-ornament-icon {
  fill: var(--brand-500)
}

.post-preview.game-review .tag-ornament {
  background-color: var(--brand-500)
}

.post-preview.game-review .post-author, .post-preview.game-review .post-comment-count {
  color: var(--brand-500)
}

.post-preview.game-review.picture .loading-line {
  background-color: var(--brand-500)
}

.post-preview.e-sport .rating-ornament-icon {
  fill: var(--violet-500)
}

.post-preview.e-sport .tag-ornament {
  background-color: var(--violet-500)
}

.post-preview.e-sport .post-author, .post-preview.e-sport .post-comment-count {
  color: var(--violet-500)
}

.post-preview.e-sport.picture .loading-line {
  background-color: var(--violet-500)
}

.post-preview .post-preview-img-wrap {
  margin-bottom: 16px;
  position: relative;
  overflow: hidden
}

.post-preview .tag-ornament {
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 9999
}

.post-preview .rating-ornament {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none
}

.post-preview .rating-ornament-icon.empty {
  fill: #b8b8b8
}

.post-preview .post-preview-img {
  height: 140px
}

.post-preview .post-preview-text {
  margin-top: 2px
}

.post-preview .post-preview-overlay {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%);
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1
}

.post-preview .post-preview-overlay:hover .play-button, .post-preview .post-preview-overlay:hover .post-preview-overlay-info {
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.post-preview .post-preview-overlay .play-button {
  margin: 12px auto 0;
  transition: all .6s ease-in-out;
  -o-transform: translate(0, 48px);
  -moz-transform: translate(0, 48px);
  -ms-transform: translate(0, 48px);
  -webkit-transform: translate(0, 48px);
  transform: translate(0, 48px)
}

.post-preview .post-preview-overlay .post-preview-overlay-info {
  transition: all .5s ease-in-out;
  -o-transform: translate(0, 150%);
  -moz-transform: translate(0, 150%);
  -ms-transform: translate(0, 150%);
  -webkit-transform: translate(0, 150%);
  transform: translate(0, 150%)
}

.post-preview .post-preview-overlay .post-preview-title, .post-preview .post-preview-overlay .post-preview-text {
  color: var(--white)
}

.post-preview.landscape {
  height: 160px;
  padding: 5px 0 0 286px
}

.post-preview.landscape .post-preview-text {
  margin-top: 10px
}

.post-preview.landscape .post-preview-img-wrap {
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0
}

.post-preview.landscape .post-preview-img {
  width: 270px;
  height: 160px
}

.post-preview.landscape .tag-ornament {
  top: 140px
}

.post-preview.landscape.big {
  height: 270px;
  padding: 40px 0 0 390px
}

.post-preview.landscape.big .post-preview-img {
  width: 370px;
  height: 270px
}

.post-preview.landscape.big .tag-ornament {
  bottom: auto;
  top: 8px;
  left: 390px
}

.post-preview.landscape.big .review-rating {
  top: 14px;
  right: 16px
}

.post-preview.picture.short {
  overflow: hidden;
  position: relative
}

.post-preview.picture.short .post-preview-img {
  height: 102px;
  box-shadow: inset 0px -100px 190px -60px rgba(0, 0, 0, 0.85)
}

.post-preview.picture.short .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6666;
  cursor: pointer;
  transition: all .5s ease-in-out
}

.post-preview.picture.short .loading-line {
  height: 2px
}

.post-preview.picture.short.active .overlay {
  opacity: 0;
  visibility: hidden
}

.post-preview.picture.medium .post-preview-img {
  height: 360px;
  box-shadow: inset 0px -310px 370px -150px rgba(0, 0, 0, 0.85)
}

.post-preview.picture.medium .tag-ornament {
  position: static
}

.post-preview.picture.medium .post-preview-overlay {
  padding: 0 30px;
  margin-bottom: 26px
}

.post-preview.picture.medium .post-preview-overlay .post-preview-title {
  margin-top: 16px;
  font-size: 1.5em
}

.post-preview.picture.large .post-preview-img-wrap {
  margin-bottom: 0
}

.post-preview.picture.large .post-preview-img {
  height: 720px;
  box-shadow: inset 0px -460px 370px -150px rgba(0, 0, 0, 0.85)
}

.post-preview.picture.large .tag-ornament {
  position: static
}

.post-preview.picture.large .post-preview-overlay {
  padding: 0 180px 0 60px;
  margin-bottom: 50px
}

.post-preview.picture.large .post-preview-overlay .post-preview-title {
  font-size: 2.5em;
  margin-top: 20px
}

.post-preview.picture.large .post-preview-overlay .post-preview-text {
  margin-top: 10px;
  display: block;
  width: 405px;
  font-size: .875em;
  line-height: 1.7142857143em
}

.post-preview.picture.big.shorter .post-preview-img {
  height: 360px
}

.post-preview.picture.big.shorter .post-preview-overlay .post-preview-title {
  width: 450px
}

.post-preview.picture.big .review-rating {
  top: 20px;
  right: 24px
}

.post-preview.picture.big .post-preview-img {
  height: 510px;
  box-shadow: inset 0px -310px 370px -150px rgba(0, 0, 0, 0.85)
}

.post-preview.picture.big .tag-ornament {
  position: static
}

.post-preview.picture.big .post-preview-overlay {
  padding: 0 30px;
  margin-bottom: 26px
}

.post-preview.picture.big .post-preview-overlay .post-preview-title {
  margin-top: 14px
}

.post-preview.picture.big .post-preview-overlay .post-preview-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 340px;
  font-size: .8125em;
  line-height: 1.6923076923em
}

.post-preview.picture.big .loading-line {
  height: 4px
}

.post-preview.picture.active .loading-line {
  transition: transform 5s ease-in-out;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.post-preview.picture.active.halted .loading-line {
  transition: none
}

.post-preview.picture .review-rating {
  top: 8px;
  right: 10px
}

.post-preview.picture .loading-line {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 6665;
  -o-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0)
}

.post-preview.picture .post-preview-img-wrap {
  margin-bottom: 0
}

.post-preview.picture .post-preview-img {
  height: 170px;
  box-shadow: inset 0px -100px 190px -60px rgba(0, 0, 0, 0.85)
}

.post-preview.picture .post-preview-img-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6)
}

.post-preview.picture .tag-ornament {
  bottom: auto;
  top: 0;
  z-index: 1
}

.post-preview.picture .post-preview-overlay {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  background-color: transparent;
  top: auto;
  bottom: 0
}

.post-preview.picture .post-preview-overlay .post-preview-text {
  display: none
}

.post-preview.video .post-preview-img-wrap {
  margin-bottom: 0
}

.post-preview.video .post-preview-img {
  height: 160px
}

.post-preview.video .post-preview-title {
  margin-top: 8px
}

.post-preview.video .post-preview-text {
  font-size: .75em;
  line-height: 1.6666666667em
}

.post-preview.video.no-hover .post-preview-img-wrap {
  margin-bottom: 16px
}

.post-preview.video.no-hover .post-preview-title {
  margin-top: 0
}

.post-preview.video.no-hover .post-preview-text {
  font-size: .8125em;
  line-height: 1.6923076923em
}

.post-preview.video.no-hover .tag-list {
  margin-bottom: 12px
}

.post-preview.video.no-hover .tag-list .tag-ornament {
  position: static
}

.post-preview.video.tiny {
  padding-left: 108px
}

.post-preview.video.tiny .post-preview-img-wrap, .post-preview.video.tiny .post-preview-img {
  width: 100px;
  margin-bottom: 0
}

.post-preview.video.tiny .post-preview-title {
  margin-top: 2px
}

.post-preview.video.tiny .post-preview-overlay {
  padding: 0
}

.post-preview.video.tiny .post-preview-overlay .play-button {
  margin: 22px auto 0;
  padding: 2px 0 0 7px;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.post-preview.video.tiny.negative .post-preview-title {
  color: var(--white)
}

.post-preview.video.tiny.no-hover .post-preview-overlay:hover .play-button {
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.post-preview.video.large {
  height: 460px
}

.post-preview.video.large .post-preview-overlay .play-button {
  margin: 120px auto 0
}

.post-preview.video.large .post-preview-overlay .post-preview-overlay-info .post-preview-title {
  text-align: center
}

.post-preview.video.large .post-preview-overlay .post-preview-overlay-info .post-preview-text {
  color: var(--cyan-500);
  text-align: center;
  margin-top: 6px
}

.post-preview.video.large .post-preview-video-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--gray-950);
  visibility: hidden
}

.post-preview.video.large .post-preview-video {
  width: 100%;
  height: 100%
}

.post-preview.video.no-hover {
  cursor: pointer
}

.post-preview.video.no-hover .post-preview-overlay:hover .play-button {
  -o-transform: translate(0, 48px);
  -moz-transform: translate(0, 48px);
  -ms-transform: translate(0, 48px);
  -webkit-transform: translate(0, 48px);
  transform: translate(0, 48px)
}

.post-preview.video.no-hover .post-preview-overlay:hover .post-preview-overlay-info {
  -o-transform: translate(0, 150%);
  -moz-transform: translate(0, 150%);
  -ms-transform: translate(0, 150%);
  -webkit-transform: translate(0, 150%);
  transform: translate(0, 150%)
}

.post-preview.huge {
  width: 630px
}

.post-preview.huge.centered {
  text-align: center
}

.post-preview.huge.centered .post-author-info-wrap, .post-preview.huge.centered .post-author-info {
  display: inline-block
}

.post-preview.huge.centered .post-preview-text {
  margin: 16px auto 0
}

.post-preview.huge .tag-ornament {
  position: static;
  margin-bottom: 18px
}

.post-preview.huge .post-author-info, .post-preview.huge .post-preview-title, .post-preview.huge .post-preview-text {
  color: var(--white)
}

.post-preview.huge .post-author-info-wrap {
  margin-top: 22px
}

.post-preview.huge .post-author-info {
  font-size: .75em;
  text-shadow: 0px 0px 12px #020102
}

.post-preview.huge .post-preview-title {
  text-shadow: 0px 0px 20px #020102
}

.post-preview.huge .post-preview-text {
  width: 460px;
  margin-top: 16px;
  font-size: .875em;
  line-height: 1.7142857143em;
  text-shadow: 0px 0px 10px #020102
}

.post-preview.huge .button {
  margin-top: 42px
}

.post-preview.large .post-preview-img-wrap {
  margin-bottom: 26px
}

.post-preview.large .post-preview-img {
  height: 460px
}

.post-preview.large .tag-ornament {
  top: 440px
}

.post-preview.large .post-author-info-wrap {
  margin: 12px 0 18px
}

.post-preview.large .post-preview-text {
  font-size: .875em;
  line-height: 1.8571428571em
}

.post-preview.big .review-rating {
  top: 14px;
  right: 18px
}

.post-preview.big .post-preview-img {
  height: 300px
}

.post-preview.big .tag-ornament {
  top: 280px
}

.post-preview.big .post-author-info-wrap {
  margin: 12px 0 18px
}

.post-preview.medium.tall-img-1 .post-preview-img {
  height: 620px
}

.post-preview.medium.tall-img-1 .tag-ornament {
  top: 600px
}

.post-preview.medium.tall-img-2 .post-preview-img {
  height: 540px
}

.post-preview.medium.tall-img-2 .tag-ornament {
  top: 520px
}

.post-preview.medium.tall-img-3 .post-preview-img {
  height: 480px
}

.post-preview.medium.tall-img-3 .tag-ornament {
  top: 460px
}

.post-preview.medium.tall-img-4 .post-preview-img {
  height: 420px
}

.post-preview.medium.tall-img-4 .tag-ornament {
  top: 400px
}

.post-preview.medium.tall-img-5 .post-preview-img {
  height: 380px
}

.post-preview.medium.tall-img-5 .tag-ornament {
  top: 360px
}

.post-preview.medium.short-img-1 .post-preview-img {
  height: 240px
}

.post-preview.medium.short-img-1 .tag-ornament {
  top: 220px
}

.post-preview.medium .post-preview-img-wrap {
  margin-bottom: 22px
}

.post-preview.medium .post-preview-img {
  height: 280px
}

.post-preview.medium .tag-ornament {
  top: 260px
}

.post-preview.medium .post-author-info-wrap {
  margin: 12px 0 18px
}

.post-preview.tiny {
  height: 70px;
  padding-left: 78px;
  position: relative
}

.post-preview.tiny.featured {
  padding: 6px 0 0 62px
}

.post-preview.tiny.no-img {
  width: 230px;
  padding-left: 0
}

.post-preview.tiny.no-img .post-preview-img-wrap {
  display: none
}

.post-preview.tiny.padded {
  padding-left: 84px
}

.post-preview.tiny .review-rating {
  top: 11px;
  left: 11px
}

.post-preview.tiny .post-preview-img-wrap, .post-preview.tiny .post-preview-img {
  width: 70px;
  height: 70px
}

.post-preview.tiny .post-preview-img-wrap {
  position: absolute;
  top: 0;
  left: 0
}

.post-preview.tiny .bubble-ornament.small {
  position: absolute;
  top: -6px;
  left: 52px;
  pointer-events: none
}

.post-preview.tiny .bubble-ornament.medium {
  position: absolute;
  top: 0;
  left: 0
}

.post-preview.tiny .rating-ornament {
  width: 70px;
  padding: 0 6px 2px 7px;
  top: auto;
  bottom: 0
}

.post-preview.tiny .rating-ornament-item {
  margin-right: 4px
}

.post-preview.tiny .rating-ornament-item:last-child {
  margin-right: 0
}

.post-preview.tiny .rating-ornament-icon {
  width: 8px;
  height: 8px
}

.post-preview.negative .post-preview-title {
  color: var(--white)
}

.post-preview-showcase + .button {
  margin-top: 20px
}

.post-preview-showcase.border-top {
  padding-top: 26px;
  border-top: 1px solid var(--color-border)
}

@media screen and (max-width: 960px) {
  .post-preview.img-toggle {
    padding-top: 30px
  }

  .post-preview.img-toggle .post-preview-img-wrap {
    display: none
  }

  .post-preview.img-toggle .tag-ornament {
    top: 0
  }

  .post-preview.landscape, .post-preview.landscape.big {
    width: 100%;
    height: auto;
    padding: 0
  }

  .post-preview.landscape .post-preview-img-wrap, .post-preview.landscape.big .post-preview-img-wrap {
    margin-bottom: 16px;
    position: static
  }

  .post-preview.landscape .post-preview-img, .post-preview.landscape.big .post-preview-img {
    width: 100%
  }

  .post-preview.landscape.big .tag-ornament {
    top: 250px;
    left: 0
  }
}

@media screen and (max-width: 680px) {
  .post-preview.huge, .post-preview.huge.centered {
    width: auto;
    padding: 0 6px
  }

  .post-preview.huge .tag-ornament, .post-preview.huge.centered .tag-ornament {
    position: static;
    margin-bottom: 18px
  }

  .post-preview.huge .post-author-info-wrap, .post-preview.huge.centered .post-author-info-wrap {
    margin-top: 22px
  }

  .post-preview.huge .post-author-info, .post-preview.huge.centered .post-author-info {
    font-size: .6875em
  }

  .post-preview.huge .post-preview-title, .post-preview.huge.centered .post-preview-title {
    font-size: 2.25em;
    line-height: 1.1666666667em
  }

  .post-preview.huge .post-preview-text, .post-preview.huge.centered .post-preview-text {
    width: auto;
    font-size: .8125em;
    line-height: 1.6923076923em
  }

  .post-preview.huge .button, .post-preview.huge.centered .button {
    margin-top: 42px
  }

  .post-preview.large .post-preview-img {
    height: 280px
  }

  .post-preview.large .tag-ornament {
    top: 260px
  }

  .post-preview.picture.big.shorter .post-preview-overlay .post-preview-title {
    width: 100%
  }
}

@media screen and (max-width: 480px) {
  .post-preview.picture.big .post-preview-overlay .post-preview-text {
    width: 100%
  }
}

.post-open.negative .post-open-title, .post-open.negative .post-open-text {
  color: var(--white)
}

.post-open.gaming-news .tag-ornament {
  background-color: var(--blue-500)
}

.post-open.gaming-news .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-open.gaming-news .post-open-quote:before {
  background-color: var(--blue-500)
}

.post-open.gaming-news .post-author, .post-open.gaming-news .post-comment-count {
  color: var(--blue-500)
}

.post-open.gaming-news .quote-text .highlight {
  color: var(--blue-500)
}

.post-open.gaming-news .feature-list .feature-list-item .feature-info.highlight {
  color: var(--blue-500)
}

.post-open.gaming-news .rating-ornament .rating-ornament-icon {
  fill: var(--blue-500)
}

.post-open.gaming-news .rating-ornament .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.post-open.gaming-news .review-info-wrap .review-info-list-wrap .review-info-list.pros .review-info-list-icon {
  background-color: var(--blue-500)
}

.post-open.gaming-news .post-open-author-wrap .post-open-author-name, .post-open.gaming-news .post-open-author-wrap .post-open-comment-count {
  color: var(--blue-500)
}

.post-open.gaming-news .post-open-text.bold .highlight {
  color: var(--blue-500)
}

.post-open.game-review .tag-ornament {
  background-color: var(--brand-500)
}

.post-open.game-review .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-open.game-review .post-open-quote:before {
  background-color: var(--brand-500)
}

.post-open.game-review .post-author, .post-open.game-review .post-comment-count {
  color: var(--brand-500)
}

.post-open.game-review .quote-text .highlight {
  color: var(--brand-500)
}

.post-open.game-review .feature-list .feature-list-item .feature-info.highlight {
  color: var(--brand-500)
}

.post-open.game-review .rating-ornament .rating-ornament-icon {
  fill: var(--brand-500)
}

.post-open.game-review .rating-ornament .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.post-open.game-review .review-info-wrap .review-info-list-wrap .review-info-list.pros .review-info-list-icon {
  background-color: var(--brand-500)
}

.post-open.game-review .post-open-author-wrap .post-open-author-name, .post-open.game-review .post-open-author-wrap .post-open-comment-count {
  color: var(--brand-500)
}

.post-open.game-review .post-open-text.bold .highlight {
  color: var(--brand-500)
}

.post-open.movie-news .tag-ornament {
  background-color: var(--green-500)
}

.post-open.movie-news .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-open.movie-news .post-open-quote:before {
  background-color: var(--green-500)
}

.post-open.movie-news .post-author, .post-open.movie-news .post-comment-count {
  color: var(--green-500)
}

.post-open.movie-news .quote-text .highlight {
  color: var(--green-500)
}

.post-open.movie-news .feature-list .feature-list-item .feature-info.highlight {
  color: var(--green-500)
}

.post-open.movie-news .rating-ornament .rating-ornament-icon {
  fill: var(--green-500)
}

.post-open.movie-news .rating-ornament .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.post-open.movie-news .review-info-wrap .review-info-list-wrap .review-info-list.pros .review-info-list-icon {
  background-color: var(--green-500)
}

.post-open.movie-news .post-open-author-wrap .post-open-author-name, .post-open.movie-news .post-open-author-wrap .post-open-comment-count {
  color: var(--green-500)
}

.post-open.movie-news .post-open-text.bold .highlight {
  color: var(--green-500)
}

.post-open.geeky-news .tag-ornament {
  background-color: var(--amber-500)
}

.post-open.geeky-news .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-open.geeky-news .post-open-quote:before {
  background-color: var(--amber-500)
}

.post-open.geeky-news .post-author, .post-open.geeky-news .post-comment-count {
  color: var(--amber-500)
}

.post-open.geeky-news .quote-text .highlight {
  color: var(--amber-500)
}

.post-open.geeky-news .feature-list .feature-list-item .feature-info.highlight {
  color: var(--amber-500)
}

.post-open.geeky-news .rating-ornament .rating-ornament-icon {
  fill: var(--amber-500)
}

.post-open.geeky-news .rating-ornament .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.post-open.geeky-news .review-info-wrap .review-info-list-wrap .review-info-list.pros .review-info-list-icon {
  background-color: var(--amber-500)
}

.post-open.geeky-news .post-open-author-wrap .post-open-author-name, .post-open.geeky-news .post-open-author-wrap .post-open-comment-count {
  color: var(--amber-500)
}

.post-open.geeky-news .post-open-text.bold .highlight {
  color: var(--amber-500)
}

.post-open.e-sport .tag-ornament {
  background-color: var(--violet-500)
}

.post-open.e-sport .tag-ornament.video {
  background-color: var(--cyan-500)
}

.post-open.e-sport .post-open-quote:before {
  background-color: var(--violet-500)
}

.post-open.e-sport .post-author, .post-open.e-sport .post-comment-count {
  color: var(--violet-500)
}

.post-open.e-sport .quote-text .highlight {
  color: var(--violet-500)
}

.post-open.e-sport .feature-list .feature-list-item .feature-info.highlight {
  color: var(--violet-500)
}

.post-open.e-sport .rating-ornament .rating-ornament-icon {
  fill: var(--violet-500)
}

.post-open.e-sport .rating-ornament .rating-ornament-icon.empty {
  fill: var(--gray-300)
}

.post-open.e-sport .review-info-wrap .review-info-list-wrap .review-info-list.pros .review-info-list-icon {
  background-color: var(--violet-500)
}

.post-open.e-sport .post-open-author-wrap .post-open-author-name, .post-open.e-sport .post-open-author-wrap .post-open-comment-count {
  color: var(--violet-500)
}

.post-open.e-sport .post-open-text.bold .highlight {
  color: var(--violet-500)
}

.post-open .post-open-header-wrap {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/posts/16_flat.webp") no-repeat center;
  background-size: cover
}

.post-open .post-open-header {
  min-height: 600px;
  margin-bottom: 80px;
  padding-top: 160px;
  text-align: center;
  position: relative
}

.post-open .post-open-header .review-rating {
  position: absolute;
  top: 36px;
  right: 0;
  text-align: left;
  pointer-events: none
}

.post-open .post-open-header .post-open-title {
  width: 550px;
  margin: 18px auto 0
}

.post-open .post-open-header .post-open-title, .post-open .post-open-header .post-author-info-wrap {
  text-shadow: 0px 0px 20px #020102
}

.post-open .post-open-header .post-author-info-wrap, .post-open .post-open-header .post-author-info {
  display: inline-block
}

.post-open .post-open-header .social-links {
  margin: 40px auto 0
}

.post-open .post-open-content {
  display: grid;
  grid-template-areas:'sidebar body';
  grid-template-columns:70px 770px;
  grid-gap: 30px
}

.post-open .post-open-content.v7 {
  display: block;
  padding: 80px 0 70px
}

.post-open .post-open-content.v7 .post-open-title, .post-open .post-open-content.v7 .post-open-subtitle, .post-open .post-open-content.v7 .post-open-text {
  padding: 0 200px
}

.post-open .post-open-content.v7 .post-open-media-wrap {
  padding: 0 150px
}

.post-open .post-open-content.v7 .post-open-text.bold {
  margin-top: 40px
}

.post-open .post-open-content.v2 {
  grid-template-areas:'body';
  grid-template-columns:870px;
  justify-content: center
}

.post-open .post-open-content.v2 .post-open-body > *:first-child {
  margin-top: 0
}

.post-open .post-open-content.v2 .post-open-subtitle, .post-open .post-open-content.v2 .post-open-text, .post-open .post-open-content.v2 .post-open-text-wrap, .post-open .post-open-content.v2 .feature-list, .post-open .post-open-content.v2 .review-block {
  padding: 0 150px
}

.post-open .post-open-content.v2 .bullet-list {
  padding: 0 150px 0 180px
}

.post-open .post-open-content.v2 .post-open-text-wrap .post-open-text {
  padding: 0
}

.post-open .post-open-content.v3 {
  grid-template-columns:70px 800px;
  grid-gap: 0;
  justify-content: center
}

.post-open .post-open-content.v3 > .post-open-sidebar .user-avatar {
  display: inline-block
}

.post-open .post-open-content.v3 > .post-open-sidebar .social-links {
  margin-top: 12px
}

.post-open .post-open-content.v4 {
  grid-template-columns:100px 670px;
  grid-gap: 30px
}

.post-open .post-open-content.v4 .post-open-body > *:first-child {
  margin-top: 40px
}

.post-open .post-open-content.v4 .post-open-sidebar .user-avatar, .post-open .post-open-content.v4 .post-open-sidebar .social-links {
  display: none
}

.post-open .post-open-content.v4 .post-open-sidebar .feature-list {
  margin-top: 48px
}

.post-open .post-open-content.v5 {
  grid-template-areas:'body';
  grid-template-columns:1fr
}

.post-open .post-open-content.v5 .tag-list:first-child {
  margin-top: 0
}

.post-open .post-open-content.v6 {
  grid-template-areas:'body';
  grid-template-columns:100%
}

.post-open .post-open-content.v6 .post-open-body > .tag-list {
  margin-top: 0;
  justify-content: center
}

.post-open .post-open-content.v6 .post-open-body .section-title-wrap {
  margin-bottom: 26px
}

.post-open .post-open-content.v6 .post-open-body .section-title-wrap.small-space {
  margin-bottom: 10px
}

.post-open .post-open-content.v6 .post-open-body .widget-match-box {
  width: auto
}

.post-open .post-open-content.v6 .post-open-title {
  width: 770px;
  margin: 0 auto;
  font-size: 3.125em;
  line-height: 1.04em;
  text-align: center
}

.post-open .post-open-content.v6 .post-open-img {
  height: 600px
}

.post-open .post-open-content.v6 .post-open-subtitle, .post-open .post-open-content.v6 .post-open-text, .post-open .post-open-content.v6 .post-open-text-wrap, .post-open .post-open-content.v6 .post-open-quote, .post-open .post-open-content.v6 .review-block {
  padding: 0 300px
}

.post-open .post-open-content.v6 .post-open-text-wrap .post-open-text {
  padding: 0
}

.post-open .post-open-content.v6 .post-open-media-wrap, .post-open .post-open-content.v6 .button-social-list {
  padding: 0 145px
}

.post-open .post-open-content.v6 .post-comment, .post-open .post-open-content.v6 .post-open-tags, .post-open .post-open-content.v6 .widget-match-box, .post-open .post-open-content.v6 .section-title-wrap {
  margin-left: 150px;
  margin-right: 150px
}

.post-open .post-open-content.v6 .button-social-list {
  margin-top: 40px
}

.post-open .post-open-body {
  grid-area: body
}

.post-open .post-open-body .social-links {
  margin-top: 24px
}

.post-open .post-open-sidebar {
  grid-area: sidebar
}

.post-open .post-open-sidebar .social-links {
  margin-top: 32px
}

.post-open .post-open-author-wrap {
  margin-bottom: 40px
}

.post-open .section-title-wrap {
  margin-top: 40px
}

.post-open .progress-bar-block {
  margin: 50px 0 46px
}

.post-open .review-block {
  margin-top: 55px
}

.post-open .slideshow {
  margin-top: 50px
}

.post-open .button-social-list {
  margin-bottom: 20px
}

.post-open .button-social-list .button-social {
  margin-bottom: 20px
}

.post-open .button-social-list + .author-info {
  margin-top: 0
}

.post-open .button-social-list + .post-comment {
  margin-top: 20px
}

.post-open .post-open-img-wrap {
  margin-bottom: 30px;
  position: relative
}

.post-open .post-open-img-wrap > .tag-ornament {
  position: absolute;
  bottom: 0;
  left: 0
}

.post-open .post-open-img-wrap + .post-open-text {
  margin-top: 80px
}

.post-open .post-comment {
  margin-top: 40px
}

.post-open .post-open-img {
  height: 460px
}

.post-open .tag-list {
  margin: 32px 0 18px
}

.post-open .post-open-title {
  color: var(--color-text-primary)
}

.post-open .post-open-title.negative {
  color: var(--white)
}

.post-open .post-open-title + .post-author-info-wrap {
  margin-top: 24px
}

.post-open .post-open-title + .post-open-text.bold {
  margin: 16px 0 26px
}

.post-open .post-open-subtitle {
  margin-top: 50px;
  color: var(--color-text-primary);
  font-size: 1.5em
}

.post-open .post-open-subtitle.small {
  font-size: 1.25em
}

.post-open .post-open-subtitle + .post-open-text, .post-open .post-open-subtitle + .post-open-text-wrap {
  margin-top: 30px
}

.post-open .post-open-subtitle + .progress-bar-block {
  margin-top: 72px
}

.post-open .post-open-text-wrap {
  margin-top: 30px
}

.post-open .post-open-text-wrap:after {
  content: '';
  display: table;
  clear: both
}

.post-open .post-open-text-wrap.half .post-open-text {
  width: 48%;
  margin-top: 0
}

.post-open .post-open-text-wrap.half .post-open-text:first-child {
  float: left
}

.post-open .post-open-text-wrap.half .post-open-text:last-child {
  float: right
}

.post-open .post-open-text {
  margin-top: 30px
}

.post-open .post-open-text .video-length {
  color: var(--cyan-500);
  font-family: "Exo", sans-serif;
  font-weight: 700;
  margin-right: 12px
}

.post-open .post-open-text.bold {
  margin-bottom: 40px;
  text-transform: none;
  color: var(--color-text-primary)
}

.post-open .post-open-quote {
  margin: 40px 0
}

.post-open .post-open-quote:before {
  content: url("../img/icons/quote-icon.png");
  display: block;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 30px;
  padding: 20px 0 0 18px;
  background-color: var(--gray-900)
}

.post-open .quote-text {
  width: 72%;
  margin: 0 auto;
  text-transform: none;
  color: var(--color-text-primary);
  text-align: center
}

.post-open .bullet-list {
  margin-top: 40px
}

.post-open .bullet-list + .post-open-subtitle {
  margin-top: 50px
}

.post-open .bullet-list + .post-open-text {
  margin-top: 40px
}

.post-open .post-open-media-wrap {
  margin: 45px 0
}

.post-open .post-open-media-wrap:first-child {
  margin-top: 0
}

.post-open .post-open-media-wrap .post-open-media iframe {
  width: 100%;
  height: 460px
}

.post-open .post-open-media-wrap .post-open-media.small iframe {
  height: 380px
}

.post-open .post-open-media-wrap .post-open-media-info {
  margin-top: 30px;
  font-size: .8125em;
  text-align: center
}

.post-open .post-open-tags {
  margin-top: 45px;
  padding: 26px 0 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.post-open .post-open-tags .tag-list {
  margin: 0
}

.post-open .feature-list {
  margin-top: 50px
}

.post-open .feature-list:after {
  content: '';
  display: table;
  clear: both
}

.post-open .feature-list.v2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 40px 0 30px
}

.post-open .feature-list.v2 .feature-list-item {
  margin-right: 80px;
  text-align: center
}

.post-open .feature-list.v2 .feature-list-item:last-child {
  margin-right: 0
}

.post-open .feature-list .feature-list-block {
  width: 48%
}

.post-open .feature-list .feature-list-block:first-child {
  float: left
}

.post-open .feature-list .feature-list-block:last-child {
  float: right
}

.post-open .feature-list .feature-list-block .feature-list-item .feature-title {
  display: inline
}

.post-open .feature-list .feature-list-block .feature-list-item .feature-info {
  display: inline;
  margin: 0 0 0 5px;
  font-size: .875em
}

.post-open .feature-list .feature-list-item {
  margin-bottom: 20px;
  font-size: 1em;
  line-height: 1em
}

.post-open .feature-list .feature-list-item:last-child {
  margin-bottom: 0
}

.post-open .feature-list .feature-list-item .feature-title {
  color: var(--color-text-primary);
  font-size: .75em
}

.post-open .feature-list .feature-list-item .feature-info {
  display: block;
  color: var(--color-text-muted);
  font-size: .75em;
  margin-top: 5px
}

.post-open .feature-list .feature-list-item .feature-info.highlight {
  color: var(--color-text-primary);
  font-weight: 700
}

.post-open .review-wrap {
  margin: 50px 0 20px;
  padding: 50px 0 34px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border)
}

.post-open .review-wrap:after {
  content: '';
  display: table;
  clear: both
}

.post-open .review-wrap .review-score-wrap {
  float: left;
  width: 170px;
  text-align: center
}

.post-open .review-wrap .review-score-wrap .review-score-number, .post-open .review-wrap .review-score-wrap .review-score-text {
  color: var(--color-text-primary)
}

.post-open .review-wrap .review-score-wrap .review-score-number {
  font-size: 4.25em
}

.post-open .review-wrap .review-score-wrap .review-score-text {
  font-size: .75em
}

.post-open .review-wrap .review-score-wrap .rating-ornament {
  display: inline-block;
  margin: 20px 0 10px;
  padding: 0
}

.post-open .review-wrap .review-info-wrap {
  float: right;
  width: 440px;
  padding-right: 26px
}

.post-open .review-wrap .review-info-wrap .review-info-text {
  font-size: .875em;
  line-height: 1.8571428571em
}

.post-open .review-wrap .review-info-wrap .review-info-text .highlight {
  color: var(--color-text-primary);
  font-weight: 700
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap {
  margin-top: 20px;
  display: flex;
  flex-flow: row wrap
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list {
  width: 170px;
  margin-right: 30px
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list:last-child {
  margin-right: 0
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list .review-info-list-item {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 16px
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list .review-info-list-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--gray-500);
  position: relative
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list .review-info-list-icon .plus-icon {
  width: 6px;
  height: 6px;
  fill: var(--white);
  position: absolute;
  top: 4px;
  left: 4px
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list .review-info-list-icon .minus-cc-icon {
  width: 6px;
  height: 6px;
  fill: var(--white);
  position: absolute;
  top: 4px;
  left: 4px
}

.post-open .review-wrap .review-info-wrap .review-info-list-wrap .review-info-list .review-info-list-item-text {
  font-size: .875em;
  line-height: 1em
}

@media screen and (max-width: 1260px) {
  .post-open .post-open-content {
    grid-template-areas:'sidebar'
 'body';
    grid-template-columns:1fr
  }

  .post-open .post-open-content.v7 .post-open-title, .post-open .post-open-content.v7 .post-open-subtitle, .post-open .post-open-content.v7 .post-open-text, .post-open .post-open-content.v7 .post-open-media-wrap {
    padding: 0
  }

  .post-open .post-open-content.v3, .post-open .post-open-content.v4 {
    grid-template-columns:1fr
  }

  .post-open .post-open-content.v3 > .post-open-sidebar {
    display: none
  }

  .post-open .post-open-content.v4 .post-open-sidebar {
    padding-top: 20px
  }

  .post-open .post-open-content.v4 .post-open-sidebar .user-avatar {
    display: inline-block;
    margin-right: 16px
  }

  .post-open .post-open-content.v4 .post-open-sidebar .social-links.vertical {
    display: inline-block;
    margin-top: 0
  }

  .post-open .post-open-content.v4 .post-open-sidebar .feature-list {
    margin-top: 30px
  }

  .post-open .post-open-content.v4 .post-open-body > *:first-child {
    margin-top: 0
  }

  .post-open .post-open-content.v6 {
    padding-top: 40px
  }

  .post-open .post-open-content.v6 .post-open-title {
    width: 90%
  }

  .post-open .post-open-content.v6 .post-open-body .widget-match-box {
    width: 100%
  }

  .post-open .post-open-content.v6 .post-open-subtitle, .post-open .post-open-content.v6 .post-open-text, .post-open .post-open-content.v6 .post-open-text-wrap, .post-open .post-open-content.v6 .post-open-quote, .post-open .post-open-content.v6 .post-open-media-wrap, .post-open .post-open-content.v6 .button-social-list, .post-open .post-open-content.v6 .review-block {
    padding: 0
  }

  .post-open .post-open-content.v6 .post-comment, .post-open .post-open-content.v6 .post-open-tags, .post-open .post-open-content.v6 .widget-match-box, .post-open .post-open-content.v6 .section-title-wrap {
    margin-left: 0;
    margin-right: 0
  }

  .post-open .post-open-content .post-open-body .tag-list {
    margin-top: 0
  }

  .post-open .post-open-content .post-open-sidebar .social-links.vertical {
    flex-direction: row
  }

  .post-open .post-open-content .post-open-sidebar .social-links.vertical .bubble-ornament {
    margin-bottom: 0
  }

  .post-open .social-links.vertical.medium .bubble-ornament {
    margin-right: 16px
  }

  .post-open .social-links.vertical .bubble-ornament {
    margin-right: 14px
  }

  .post-open .post-open-media-wrap .post-open-media {
    height: 0;
    padding-bottom: 43%;
    position: relative
  }

  .post-open .post-open-media-wrap .post-open-media iframe {
    height: 100%;
    position: absolute
  }

  .post-open .post-open-media-wrap .post-open-media.small {
    height: 0;
    padding-bottom: 43%;
    position: relative
  }

  .post-open .post-open-media-wrap .post-open-media.small iframe {
    height: 100%;
    position: absolute
  }
}

@media screen and (max-width: 960px) {
  .post-open .post-open-header {
    padding-bottom: 120px
  }

  .post-open .post-open-header .post-open-title {
    width: 100%
  }

  .post-open .post-open-content.v2 {
    grid-template-columns:1fr
  }

  .post-open .post-open-content.v2 .post-open-subtitle, .post-open .post-open-content.v2 .post-open-text, .post-open .post-open-content.v2 .post-open-text-wrap, .post-open .post-open-content.v2 .feature-list, .post-open .post-open-content.v2 .review-block {
    padding: 0
  }

  .post-open .post-open-content.v2 .bullet-list {
    padding: 0 0 0 30px
  }

  .post-open .widget-team-stats.full {
    display: block;
    padding: 0 0 26px
  }

  .post-open .review-wrap .review-score-wrap {
    width: 100%;
    margin-bottom: 30px
  }

  .post-open .review-wrap .review-info-wrap {
    width: 100%;
    padding: 0
  }
}

@media screen and (max-width: 680px) {
  .post-open .post-open-text-wrap.half .post-open-text {
    width: 100%
  }

  .post-open .post-open-text-wrap.half .post-open-text:first-child {
    float: none
  }

  .post-open .post-open-text-wrap.half .post-open-text:last-child {
    float: none;
    margin-top: 30px
  }

  .post-open .post-open-content.v2 .bullet-list {
    padding: 0
  }

  .post-open .review-block {
    display: block
  }

  .post-open .review-block .arc {
    margin: 60px auto 0
  }

  .post-open .feature-list.v2 .feature-list-item {
    margin-right: 40px
  }

  .post-open .feature-list .feature-list-block {
    width: 100%
  }

  .post-open .feature-list .feature-list-block:first-child {
    float: none
  }

  .post-open .feature-list .feature-list-block:first-child .feature-list-item:last-child {
    margin-bottom: 30px
  }

  .post-open .feature-list .feature-list-block:last-child {
    float: none
  }

  .post-open .feature-list .feature-list-block .feature-list-item {
    margin-bottom: 30px;
    text-align: center
  }

  .post-open .feature-list .feature-list-block .feature-list-item:last-child {
    margin-bottom: 0
  }

  .post-open .feature-list .feature-list-block .feature-list-item .feature-title {
    display: block;
    margin-bottom: 5px
  }
}

.post-comment {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 46px 0 40px 100px;
  position: relative
}

.post-comment + .post-comment {
  border-top: none
}

.post-comment .user-avatar {
  position: absolute;
  top: 36px;
  left: 0
}

.post-comment .post-comment-username {
  display: inline-block;
  color: var(--color-text-primary);
  line-height: 1em
}

.post-comment .post-comment-timestamp, .post-comment .report-button {
  margin-left: 8px;
  display: inline-block;
  color: var(--color-text-muted);
  font-size: .6875em;
  line-height: 1em
}

.post-comment .report-button:hover {
  color: var(--brand-500)
}

.post-comment .post-comment-text {
  margin-top: 20px
}

.post-comment .post-comment-actions {
  margin-top: 20px
}

.post-comment .post-comment-actions .social-links {
  width: 206px;
  margin-top: 4px
}

.post-comment .post-comment-actions .like-button {
  margin-left: 8px
}

.post-comment .post-comment-actions .likes-count {
  margin-left: 6px;
  display: inline-block;
  color: var(--color-text-muted);
  font-size: .6875em;
  line-height: 1em
}

.post-comment > .post-comment {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 40px
}

.post-comment > .post-comment:before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  left: -100px;
  width: 100%;
  height: 1px;
  background-color: var(--gray-300)
}

@media screen and (max-width: 960px) {
  .post-comment {
    padding-left: 10px
  }

  .post-comment > .post-comment {
    padding-left: 30px
  }

  .post-comment > .post-comment:before {
    left: 0px
  }

  .post-comment .user-avatar {
    display: none
  }

  .post-comment .post-comment-username {
    display: block;
    margin-bottom: 10px
  }

  .post-comment .post-comment-timestamp {
    margin-left: 0
  }
}

.product-preview {
  width: 270px;
  position: relative
}

.product-preview.centered {
  text-align: center
}

.product-preview.centered:hover .add-to-bag {
  left: 50%;
  margin-left: -60px
}

.product-preview.centered .product-preview-info {
  display: inline-block
}

.product-preview.centered .product-price-wrap {
  text-align: center
}

.product-preview.centered .product-price-wrap .product-preview-price {
  float: none;
  display: inline-block
}

.product-preview.centered .product-price-wrap .product-preview-price.before {
  margin-left: 5px
}

.product-preview.list {
  width: auto;
  height: 280px;
  padding: 16px 20px 0 300px
}

.product-preview.list:hover .product-price-wrap .product-preview-price {
  opacity: 1;
  visibility: visible
}

.product-preview.list .product-preview-img-wrap {
  width: 270px;
  position: absolute;
  top: 0;
  left: 0
}

.product-preview.list .bubble-ornament {
  visibility: visible;
  opacity: 1;
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  right: auto
}

.product-preview.list .bubble-ornament.favourites, .product-preview.list .bubble-ornament.tag {
  top: 230px
}

.product-preview.list .bubble-ornament.favourites {
  left: 436px
}

.product-preview.list .bubble-ornament.tag {
  left: 482px
}

.product-preview.list .product-preview-title {
  display: inline-block;
  margin-top: 0;
  font-size: 1.125em
}

.product-preview.list .product-preview-info {
  margin-top: 14px
}

.product-preview.list .product-preview-description {
  margin-top: 18px
}

.product-preview.list .product-preview-features {
  margin-top: 30px
}

.product-preview.list .product-preview-features:after {
  content: '';
  display: table;
  clear: both
}

.product-preview.list .product-preview-features .product-preview-feature {
  float: left;
  margin-right: 36px;
  color: var(--color-text-muted);
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase
}

.product-preview.list .product-preview-features .product-preview-feature:last-child {
  margin-right: 0
}

.product-preview.list .product-preview-features .product-preview-feature .value {
  color: var(--color-text-primary)
}

.product-preview.list .product-preview-features .product-preview-feature .value.warning {
  color: var(--violet-500)
}

.product-preview.list .product-preview-features .product-preview-feature .value.error {
  color: var(--brand-500)
}

.product-preview.list .product-price-wrap {
  margin-top: 0;
  position: absolute;
  top: 16px;
  right: 0
}

.product-preview.list .product-price-wrap .product-preview-price {
  line-height: 1em
}

.product-preview.list .product-price-wrap .product-preview-price.before {
  margin: 4px 6px 0 0
}

.product-preview.list .add-to-bag {
  position: absolute;
  top: 228px;
  left: 300px;
  opacity: 1;
  visibility: visible;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.product-preview.short {
  width: 170px
}

.product-preview.short:hover .product-price-wrap .product-preview-price {
  opacity: 1;
  visibility: visible
}

.product-preview.short .bubble-ornament {
  opacity: 1;
  visibility: visible;
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1)
}

.product-preview.short .bubble-ornament.remove, .product-preview.short .bubble-ornament.tag {
  right: -10px
}

.product-preview.short .bubble-ornament.remove {
  top: -8px
}

.product-preview.short .bubble-ornament.tag {
  top: 32px
}

.product-preview.short .product-preview-img-wrap {
  border: 1px solid var(--color-border)
}

.product-preview.short .product-preview-img {
  height: 168px
}

.product-preview.short .product-preview-title {
  font-size: .75em;
  margin-top: 16px
}

.product-preview.short .product-price-wrap {
  height: auto
}

.product-preview.short .product-price-wrap .product-preview-price {
  line-height: 1em
}

.product-preview.short .product-price-wrap .product-preview-price.before {
  margin: 2px 6px 0 0
}

.product-preview.short .product-preview-info {
  margin-top: 0
}

.product-preview.short .product-preview-info .product-preview-category, .product-preview.short .product-preview-info .rating-ornament {
  float: none
}

.product-preview.short .product-preview-info .rating-ornament {
  top: -2px;
  left: 0
}

.product-preview.short .product-preview-price.current {
  font-size: .75em
}

.product-preview.short .product-preview-price.before {
  font-size: .625em
}

.product-preview.short .counter {
  margin-top: 14px
}

.product-preview.short .add-to-bag {
  margin-top: 16px;
  position: static;
  opacity: 1;
  visibility: visible;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.product-preview.negative .product-preview-title {
  color: var(--white)
}

.product-preview.negative .product-preview-price.current {
  color: var(--white)
}

.product-preview.negative .rating-ornament-icon.empty {
  fill: #4d4d4d
}

.product-preview.small {
  width: 96px
}

.product-preview.small:hover .product-price-wrap .product-preview-price {
  opacity: 1;
  visibility: visible
}

.product-preview.small .product-preview-img-wrap {
  border: 1px solid var(--color-border)
}

.product-preview.small .product-preview-img {
  height: 94px
}

.product-preview.small .bubble-ornament {
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible
}

.product-preview.small .bubble-ornament.remove {
  top: -8px;
  right: -10px
}

.product-preview.small .tag-quantity {
  position: absolute;
  top: 80px;
  right: 0;
  pointer-events: none
}

.product-preview.small .product-preview-info {
  margin-top: 0
}

.product-preview.small .product-preview-info .rating-ornament {
  position: static
}

.product-preview.small .product-preview-title {
  margin-top: 10px;
  font-size: .625em;
  line-height: 12px
}

.product-preview.small .product-price-wrap {
  height: auto;
  margin-top: 4px
}

.product-preview.small .product-price-wrap .product-preview-price {
  font-size: .625em;
  line-height: 1em
}

.product-preview.small .product-price-wrap .product-preview-price .currency {
  margin-right: 2px
}

.product-preview.tiny {
  height: 70px;
  padding: 4px 0 0 78px;
  position: relative
}

.product-preview.tiny:hover .product-price-wrap .product-preview-price {
  opacity: 1;
  visibility: visible
}

.product-preview.tiny .bubble-ornament, .product-preview.tiny .sticker-ornament, .product-preview.tiny .button {
  display: none
}

.product-preview.tiny .product-preview-img-wrap {
  position: absolute;
  top: 0;
  left: 0
}

.product-preview.tiny .product-preview-img {
  width: 70px;
  height: 70px
}

.product-preview.tiny .product-preview-title {
  margin-top: 0;
  font-size: .75em
}

.product-preview.tiny .product-preview-info {
  margin-top: 0
}

.product-preview.tiny .product-preview-info .product-preview-category, .product-preview.tiny .product-preview-info .rating-ornament {
  float: none
}

.product-preview.tiny .product-preview-info .rating-ornament {
  top: -2px;
  left: 0
}

.product-preview.tiny .add-to-bag {
  width: 100px
}

.product-preview.tiny .product-price-wrap {
  height: auto;
  margin-top: 4px
}

.product-preview.tiny .product-price-wrap .product-preview-price {
  line-height: 1em
}

.product-preview.tiny .product-price-wrap .product-preview-price.before {
  margin: 2px 6px 0 0
}

.product-preview.tiny .product-preview-price {
  font-size: .75em
}

.product-preview.tiny .product-preview-price .currency {
  margin-right: 3px
}

.product-preview.tiny .product-preview-price.before {
  font-size: .625em
}

.product-preview .product-preview-img {
  height: 280px
}

.product-preview .bubble-ornament {
  position: absolute;
  right: 14px;
  z-index: 9999;
  -o-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out
}

.product-preview .bubble-ornament.favourites {
  top: 16px
}

.product-preview .bubble-ornament.tag {
  top: 60px
}

.product-preview .sticker-ornament {
  position: absolute;
  top: 16px;
  left: 14px
}

.product-preview .product-preview-title {
  margin-top: 26px
}

.product-preview .product-preview-info {
  margin-top: 10px
}

.product-preview .product-preview-info:after {
  content: '';
  display: table;
  clear: both
}

.product-preview .product-preview-info .product-preview-category {
  float: left
}

.product-preview .product-preview-info .rating-ornament {
  float: left;
  position: relative;
  top: -6px;
  left: 10px
}

.product-preview .product-preview-category {
  color: var(--color-text-muted);
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase
}

.product-preview .rating-ornament {
  padding: 0
}

.product-preview .product-price-wrap {
  height: 34px;
  margin-top: 6px;
  position: relative
}

.product-preview .product-price-wrap:after {
  content: '';
  display: table;
  clear: both
}

.product-preview .product-price-wrap .product-preview-price {
  float: left;
  line-height: 34px;
  transition: all .4s ease-in-out
}

.product-preview .product-price-wrap .product-preview-price.before {
  margin: 12px 0 0 10px
}

.product-preview .product-preview-price {
  color: var(--color-text-primary);
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1em
}

.product-preview .product-preview-price .currency {
  margin-right: 4px
}

.product-preview .product-preview-price.before {
  color: var(--color-text-muted);
  font-size: .75em;
  font-weight: 400;
  line-height: 1em;
  position: relative
}

.product-preview .product-preview-price.before .currency {
  margin-right: 3px
}

.product-preview .product-preview-price.before:after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: var(--gray-500);
  position: absolute;
  bottom: 3px;
  left: 0
}

.product-preview .add-to-bag {
  width: 120px;
  padding: 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -o-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
  transition: all .3s ease-in-out
}

.product-preview:hover .bubble-ornament.favourites, .product-preview:hover .bubble-ornament.tag {
  visibility: visible;
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1
}

.product-preview:hover .bubble-ornament.tag {
  transition-delay: .15s
}

.product-preview:hover .product-price-wrap .product-preview-price {
  opacity: 0;
  visibility: hidden
}

.product-preview:hover .add-to-bag {
  opacity: 1;
  visibility: visible;
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.product-preview-slider {
  height: 280px;
  position: relative;
  overflow: hidden
}

.product-preview-slider .product-preview-slider-roster-wrap {
  width: 100%;
  position: absolute;
  bottom: 14px;
  z-index: 9999
}

.product-preview-slider .product-preview-slider-roster:after {
  content: '';
  display: table;
  clear: both
}

.product-preview-slider .product-preview-slider-roster .product-preview-slider-roster-item {
  float: left;
  margin-right: 8px
}

.product-preview-slider .product-preview-slider-roster .product-preview-slider-roster-item:last-child {
  margin-right: 0
}

.product-preview-slider-item {
  width: 270px
}

.product-preview-slider-roster-wrap {
  text-align: center
}

.product-preview-slider-roster {
  display: inline-block
}

.product-preview-slider-roster-item {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gray-900);
  opacity: .2;
  cursor: pointer
}

.product-preview-slider-roster-item.active {
  opacity: 1
}

.sticker-ornament {
  width: 40px;
  height: 40px;
  padding-top: 11px;
  border-radius: 50%;
  background-color: var(--brand-500);
  pointer-events: none
}

.sticker-ornament .sticker-ornament-text {
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1em;
  text-align: center
}

.grid-1col .product-preview.list, .grid-2col .product-preview.list, .grid-3col .product-preview.list, .grid-4col .product-preview.list, .grid2-1col .product-preview.list, .grid2-2col .product-preview.list {
  height: auto;
  padding: 300px 0 62px
}

.grid-1col .product-preview.list .product-preview-img-wrap, .grid-2col .product-preview.list .product-preview-img-wrap, .grid-3col .product-preview.list .product-preview-img-wrap, .grid-4col .product-preview.list .product-preview-img-wrap, .grid2-1col .product-preview.list .product-preview-img-wrap, .grid2-2col .product-preview.list .product-preview-img-wrap {
  width: 270px;
  left: 50%;
  margin-left: -135px
}

.grid-1col .product-preview.list .bubble-ornament.favourites, .grid-1col .product-preview.list .bubble-ornament.tag, .grid-2col .product-preview.list .bubble-ornament.favourites, .grid-2col .product-preview.list .bubble-ornament.tag, .grid-3col .product-preview.list .bubble-ornament.favourites, .grid-3col .product-preview.list .bubble-ornament.tag, .grid-4col .product-preview.list .bubble-ornament.favourites, .grid-4col .product-preview.list .bubble-ornament.tag, .grid2-1col .product-preview.list .bubble-ornament.favourites, .grid2-1col .product-preview.list .bubble-ornament.tag, .grid2-2col .product-preview.list .bubble-ornament.favourites, .grid2-2col .product-preview.list .bubble-ornament.tag {
  top: auto;
  bottom: 10px
}

.grid-1col .product-preview.list .bubble-ornament.favourites, .grid-2col .product-preview.list .bubble-ornament.favourites, .grid-3col .product-preview.list .bubble-ornament.favourites, .grid-4col .product-preview.list .bubble-ornament.favourites, .grid2-1col .product-preview.list .bubble-ornament.favourites, .grid2-2col .product-preview.list .bubble-ornament.favourites {
  left: 10px
}

.grid-1col .product-preview.list .bubble-ornament.tag, .grid-2col .product-preview.list .bubble-ornament.tag, .grid-3col .product-preview.list .bubble-ornament.tag, .grid-4col .product-preview.list .bubble-ornament.tag, .grid2-1col .product-preview.list .bubble-ornament.tag, .grid2-2col .product-preview.list .bubble-ornament.tag {
  left: 60px
}

.grid-1col .product-preview.list .add-to-bag, .grid-2col .product-preview.list .add-to-bag, .grid-3col .product-preview.list .add-to-bag, .grid-4col .product-preview.list .add-to-bag, .grid2-1col .product-preview.list .add-to-bag, .grid2-2col .product-preview.list .add-to-bag {
  top: auto;
  left: auto;
  bottom: 8px;
  right: 0
}

.grid-1col .product-preview.list .product-preview-title, .grid-2col .product-preview.list .product-preview-title, .grid-3col .product-preview.list .product-preview-title, .grid-4col .product-preview.list .product-preview-title, .grid2-1col .product-preview.list .product-preview-title, .grid2-2col .product-preview.list .product-preview-title {
  margin-bottom: 40px
}

.grid-1col .product-preview.list .product-price-wrap, .grid-2col .product-preview.list .product-price-wrap, .grid-3col .product-preview.list .product-price-wrap, .grid-4col .product-preview.list .product-price-wrap, .grid2-1col .product-preview.list .product-price-wrap, .grid2-2col .product-preview.list .product-price-wrap {
  right: auto;
  top: 330px;
  left: 10px
}

@media screen and (max-width: 960px) {
  .product-preview.list {
    height: auto;
    padding: 300px 10px 62px
  }

  .product-preview.list .product-preview-img-wrap {
    width: 270px;
    left: 50%;
    margin-left: -135px
  }

  .product-preview.list .bubble-ornament.favourites, .product-preview.list .bubble-ornament.tag {
    top: auto;
    bottom: 10px
  }

  .product-preview.list .bubble-ornament.favourites {
    left: 10px
  }

  .product-preview.list .bubble-ornament.tag {
    left: 60px
  }

  .product-preview.list .add-to-bag {
    top: auto;
    left: auto;
    bottom: 8px;
    right: 0
  }

  .product-preview.list .product-preview-title {
    margin-bottom: 40px
  }

  .product-preview.list .product-price-wrap {
    right: auto;
    top: 330px;
    left: 10px
  }
}

.product-open-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.product-open {
  width: 570px;
  padding-top: 26px
}

.product-open.inventory {
  width: 770px;
  padding: 16px 0 0 400px;
  position: relative
}

.product-open.inventory .product-img {
  width: 370px;
  height: 380px;
  position: absolute;
  top: 0;
  left: 0
}

.product-open.inventory .product-name {
  font-size: 1.375em;
  line-height: 26px
}

.product-open.inventory .product-category-wrap {
  margin-top: 4px
}

.product-open.inventory .product-category-wrap .product-category {
  font-size: .625em
}

.product-open.inventory .product-price {
  margin-top: 20px;
  font-size: 1.125em
}

.product-open.inventory .product-description {
  margin-top: 20px;
  font-size: .8125em;
  line-height: 1.6923076923em
}

.product-open.inventory .product-features {
  margin-top: 40px
}

.product-open.inventory .product-open-row {
  margin-top: 70px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.product-open.inventory .product-open-row .form-row {
  width: 270px
}

.product-open.inventory .product-open-row .product-features {
  margin-top: 34px
}

.product-open.inventory .inventory-remove-item {
  width: 370px;
  position: absolute;
  bottom: 0;
  left: 0
}

.product-open .product-name {
  color: var(--color-text-primary);
  line-height: 30px
}

.product-open .product-category-wrap {
  margin-top: 8px;
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.product-open .product-category-wrap .product-category {
  color: var(--color-text-muted)
}

.product-open .product-category-wrap .rating-ornament {
  margin-left: 6px
}

.product-open .product-category-wrap .product-stock {
  margin-left: 4px;
  color: var(--color-text-primary)
}

.product-open .product-category-wrap .product-stock .highlight {
  color: var(--violet-500)
}

.product-open .product-price {
  margin-top: 30px;
  color: var(--color-text-primary);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1em
}

.product-open .product-price .currency {
  margin-right: 6px
}

.product-open .product-description {
  margin-top: 30px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.product-open .product-features {
  display: flex;
  flex-flow: row wrap;
  margin-top: 50px
}

.product-open .product-features .product-feature {
  display: flex;
  flex-flow: row wrap;
  margin-right: 60px
}

.product-open .product-features .product-feature:last-child {
  margin-right: 0
}

.product-open .product-open-form {
  width: 360px;
  margin-top: 55px
}

.product-open .product-actions {
  display: flex;
  flex-flow: row wrap;
  margin-top: 60px
}

.product-open .product-actions .button {
  width: 200px;
  padding-left: 50px
}

.product-open .product-actions .social-links {
  margin: 15px 0 0 16px
}

.product-open .product-info-list {
  display: flex;
  flex-flow: row wrap;
  margin-top: 50px
}

.product-open .product-info-list .product-info-list-item {
  margin-right: 26px;
  color: var(--color-text-muted)
}

.product-open .product-info-list .product-info-list-item:last-child {
  margin-right: 0
}

.product-open .product-info-list .product-info-list-item .highlight {
  color: var(--color-text-primary)
}

.product-open .product-info-list .product-info-list-item a.highlight:hover {
  color: var(--violet-500)
}

.product-feature .product-feature-icon {
  margin-right: 22px;
  color: var(--color-text-primary);
  font-size: 24px;
  font-weight: 700
}

.product-feature .product-feature-info .product-feature-title {
  color: var(--color-text-muted);
  line-height: 1em
}

.product-feature .product-feature-info .product-feature-title.right {
  text-align: right
}

.product-feature .product-feature-info .product-feature-text {
  margin-top: 4px;
  color: var(--color-text-primary);
  line-height: 1em
}

.product-feature .product-feature-info .product-feature-text.price {
  font-family: "Roboto", sans-serif;
  font-size: 1.125em
}

.product-feature .product-feature-info .product-feature-text.price .currency {
  margin-right: 4px
}

@media screen and (max-width: 1260px) {
  .product-open-wrap {
    display: block
  }

  .product-open-wrap .product-slider-wrap {
    margin: 0 auto
  }

  .product-open-wrap .product-open {
    width: 100%;
    padding-top: 40px
  }

  .product-open-wrap .product-open.inventory {
    width: 100%;
    padding-left: 0
  }

  .product-open-wrap .product-open.inventory .product-img {
    position: static
  }

  .product-open-wrap .product-open.inventory .product-open-row {
    justify-content: flex-start
  }

  .product-open-wrap .product-open.inventory .product-open-row .form-row {
    margin-right: 30px
  }

  .product-open-wrap .product-open.inventory .inventory-remove-item {
    width: 270px;
    position: static;
    margin-top: 40px
  }
}

.arc.negative .arc-progress-text {
  color: var(--color-text-primary);
  text-shadow: none
}

.arc.big .arc-progress-text {
  font-size: 3.125em;
  line-height: 170px
}

.arc.medium .arc-progress-text {
  font-size: 2em;
  line-height: 112px
}

.arc.small .arc-progress-text {
  font-size: 1.125em;
  line-height: 64px
}

.arc.tiny .arc-progress-text {
  font-size: .875em;
  line-height: 48px
}

.arc.stats .arc-progress-text {
  font-size: .875em;
  line-height: 46px
}

.arc.rate .arc-progress-text {
  font-size: 2.5em;
  line-height: 160px
}

.arc.rate .arc-progress-text .arc-progress-unit {
  font-size: .8em
}

.arc.rate.small .arc-progress-text {
  font-size: .875em
}

.arc.rate.tiny .arc-progress-text {
  font-size: .625em
}

.arc .arc-progress-text {
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: 1.625em;
  line-height: 90px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0px 0px 14px #020102
}

.arc-rate-wrap {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  position: relative
}

.arc-rate-wrap.half {
  width: 90px;
  height: 64px
}

.arc-rate-wrap.half .arc.rate .arc-progress-text {
  font-size: .75em;
  line-height: 68px
}

.arc-rate-wrap.half .arc.rate .arc-progress-text .arc-progress-unit {
  font-size: 1em
}

.arc-rate-wrap.half .arc-rate-info {
  font-size: .5625em;
  bottom: 0
}

.arc-rate-wrap.tiny {
  width: 48px;
  height: 48px
}

.arc-rate-wrap.tiny .arc.rate .arc-progress-text {
  line-height: 42px
}

.arc-rate-wrap.tiny .arc-rate-info {
  font-size: .5625em;
  text-transform: none;
  bottom: 12px
}

.arc-rate-wrap .arc.rate .arc-progress-text {
  line-height: 140px
}

.arc-rate-wrap .arc-rate-icon {
  position: absolute;
  top: 44px;
  left: 50%;
  margin-left: -11px
}

.arc-rate-wrap .arc-rate-icon.shield-icon {
  margin-left: -12px
}

.arc-rate-wrap .arc-rate-icon.plus-icon {
  margin-left: -14px
}

.arc-rate-wrap .arc-rate-stat, .arc-rate-wrap .arc-rate-info {
  width: 100%;
  text-align: center;
  line-height: 1em;
  text-transform: uppercase;
  position: absolute
}

.arc-rate-wrap .arc-rate-stat {
  color: var(--color-text-primary);
  bottom: 58px
}

.arc-rate-wrap .arc-rate-info {
  color: var(--color-text-muted);
  font-size: .625em;
  bottom: 44px
}

.arc-stats-wrap.landscape {
  display: flex;
  flex-flow: row wrap
}

.arc-stats-wrap.landscape .arc-stats {
  margin: 0
}

.arc-stats-wrap.landscape .arc-stats-info {
  margin: 12px 0 0 20px;
  text-align: left
}

.arc-stats-wrap .arc-stats {
  margin: 0 auto;
  position: relative
}

.arc-stats-wrap .arc-stats .s-icon {
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  top: 13px;
  left: 14px
}

.arc-stats-wrap .arc-stats .icon-shield {
  top: 14px;
  left: 15px
}

.arc-stats-wrap .arc-stats-info {
  margin-top: 8px;
  text-align: center
}

.arc-stats-wrap .arc-stats-info .arc-stats-stat {
  color: var(--color-text-primary)
}

.arc-stats-wrap .arc-stats-info .arc-stats-measure {
  color: var(--color-text-muted);
  font-size: .5625em
}

.countdown-arc {
  width: 318px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.countdown-arc .counter-wrap .counter-text {
  margin-top: 10px;
  color: var(--white);
  font-size: .5625em;
  text-align: center
}

.countdown-arc .arc-progress-text {
  color: var(--white);
  font-family: "Exo", sans-serif;
  font-size: 1.375em;
  line-height: 66px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase
}

.countdown-text-wrap.small .countdown-text-heading {
  margin-bottom: 8px
}

.countdown-text-wrap.small .countdown-text {
  font-size: .875em
}

.countdown-text-wrap.small .progress-bar {
  margin-top: 8px
}

.countdown-text-wrap.bordered {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border)
}

.countdown-text-wrap .countdown-text-heading {
  margin-bottom: 20px;
  color: var(--color-text-primary);
  text-align: center
}

.countdown-text-wrap .countdown-text {
  text-align: center
}

.countdown-text-wrap .countdown-text-info {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: .625em;
  line-height: 1em;
  text-align: center
}

.countdown-text-wrap .countdown-text-info .countdown-text-info-separator {
  margin: 0 3px
}

.countdown-text-wrap .progress-bar {
  margin: 22px auto 0
}

.countdown-text {
  color: var(--color-text-primary)
}

.countdown-text .timer-text-days:after, .countdown-text .timer-text-hours:after, .countdown-text .timer-text-minutes:after {
  content: ':';
  margin: 0 5px
}

.bar-progress-wrap, .bar-progress-info {
  position: absolute;
  top: -20px
}

.bar-progress-wrap.bubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--gray-900);
  top: -40px
}

.bar-progress-wrap.bubble:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid var(--gray-900);
  position: absolute;
  bottom: -1px;
  left: -1px;
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.bar-progress-wrap.bubble.tiny {
  width: 28px;
  height: 28px
}

.bar-progress-wrap.bubble.tiny .bar-progress-text {
  line-height: 30px
}

.bar-progress-wrap.bubble.tiny.static {
  top: -6px;
  right: -40px
}

.bar-progress-wrap.bubble.static {
  top: -11px;
  right: -46px
}

.bar-progress-wrap.bubble .bar-progress-text {
  color: var(--white);
  line-height: 34px;
  text-align: center
}

.bar-progress-info, .bar-progress-text {
  color: var(--color-text-primary)
}

.bar-progress-info.medium {
  font-size: .75em
}

.bar-progress-wrap {
  right: 0
}

.bar-progress-info {
  left: 1px
}

.progress-stat-wrap.medium .bar-progress-info, .progress-stat-wrap.medium .bar-progress-text {
  font-size: .6875em
}

.progress-stat-wrap.bottom-spaced {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border)
}

.progress-stat-wrap .bar-progress-info {
  margin-bottom: 12px;
  text-align: center;
  position: static
}

.progress-stat-wrap .bar-progress-wrap {
  top: -2px
}

.progress-stat-wrap .bar-progress-wrap.left {
  left: -24px
}

.progress-stat-wrap .bar-progress-wrap.right {
  right: -24px
}

.progress-badge-wrap .badge-info {
  position: relative;
  top: -20px
}

.progress-bar.medium {
  margin-top: 16px
}

.progress-bar.medium + .progress-bar.medium {
  margin-top: 60px
}

.progress-bar.large {
  margin-top: 34px
}

.progress-bar + .progress-bar {
  margin-top: 22px
}

.progress-bar + .progress-bar.large {
  margin-top: 34px
}

.progress-bar.link-full {
  margin-top: 22px
}

.progress-bar.link-full.centered {
  margin: 22px auto 0
}

.progress-bar.link-full.violet .bar-progress-text {
  color: var(--violet-500)
}

.progress-bar.link-full.red .bar-progress-text {
  color: var(--brand-500)
}

.progress-bar.link-center {
  margin-top: 20px
}

.progress-bar.link-center .bar-progress-info {
  width: 100%;
  text-align: center
}

.progress-bar.link-left {
  margin-top: 16px
}

.progress-bar.link-left .bar-progress-wrap {
  top: -16px;
  right: auto;
  left: 0
}

.progress-bar.link-left .bar-progress-wrap .bar-progress-text {
  font-size: .6875em
}

.progress-bar.link-left.big-text .bar-progress-wrap .bar-progress-text {
  font-size: .75em
}

.progress-bar.spaced-units .bar-progress-unit {
  margin-left: 2px
}

.progress-bar.captioned {
  padding: 14px 0 8px
}

.progress-bar.captioned.small {
  margin-top: 20px;
  padding: 0
}

.progress-bar .progress-bar-caption {
  color: var(--color-text-muted);
  font-size: .5625em;
  line-height: 1em;
  text-transform: uppercase
}

.progress-bar .progress-bar-text {
  color: var(--color-text-muted);
  line-height: 1em;
  text-align: center;
  position: relative;
  top: -34px
}

.progress-bar .progress-bar-text.small {
  font-size: .625em
}

.progress-bar .progress-bar-text.left, .progress-bar .progress-bar-text.right {
  position: absolute;
  top: -20px
}

.progress-bar .progress-bar-text.left {
  left: 0
}

.progress-bar .progress-bar-text.right {
  right: 0
}

.progress-bar .progress-bar-text.bold, .progress-bar .progress-bar-text .pg-text {
  color: var(--color-text-primary)
}

.tab-wrap.border-bottom {
  border-bottom: 1px solid var(--color-border)
}

.tab-wrap .tab-header {
  display: flex;
  flex-flow: row wrap
}

.tab-wrap .tab-header.border-top {
  border-top: 1px solid var(--color-border)
}

.tab-wrap .tab-header.items-2 .tab-header-item {
  width: 50%
}

.tab-wrap .tab-header.items-3 .tab-header-item {
  width: 33.3333333333%
}

.tab-wrap .tab-header.items-4 .tab-header-item {
  width: 25%
}

.tab-wrap .tab-header.items-5 .tab-header-item {
  width: 20%
}

.tab-wrap .tab-header.items-6 .tab-header-item {
  width: 16.6666666667%
}

.tab-wrap .tab-header .tab-header-item {
  height: 58px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer
}

.tab-wrap .tab-header .tab-header-item .logo-game {
  opacity: 0.2;
  margin-right: 10px
}

.tab-wrap .tab-header .tab-header-item.active {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px
}

.tab-wrap .tab-header .tab-header-item.active .logo-game {
  opacity: 1
}

.tab-wrap .tab-header .tab-header-item.active.red {
  background-color: var(--brand-500)
}

.tab-wrap .tab-header .tab-header-item.active.blue {
  background-color: var(--blue-500)
}

.tab-wrap .tab-header .tab-header-item.active.violet {
  background-color: var(--violet-500)
}

.tab-wrap .tab-header .tab-header-item.active.green {
  background-color: var(--green-500)
}

.tab-wrap .tab-header .tab-header-item.active.cyan {
  background-color: var(--cyan-500)
}

.tab-wrap .tab-header .tab-header-item.active.yellow {
  background-color: var(--amber-500)
}

.tab-wrap .tab-header .tab-header-item.active .tab-header-item-text {
  color: var(--white)
}

.tab-wrap .tab-header .tab-header-item.active:after {
  display: block
}

.tab-wrap .tab-header .tab-header-item.selected .logo-game {
  opacity: 1
}

.tab-wrap .tab-header .tab-header-item.selected .tab-header-item-text {
  color: var(--color-text-primary)
}

.tab-wrap .tab-header .tab-header-item.selected:after {
  display: block
}

.tab-wrap .tab-header .tab-header-item.red:after {
  background-color: var(--brand-500)
}

.tab-wrap .tab-header .tab-header-item.blue:after {
  background-color: var(--blue-500)
}

.tab-wrap .tab-header .tab-header-item:after {
  content: '';
  width: 100%;
  height: 3px;
  background-color: var(--violet-500);
  position: absolute;
  bottom: 0;
  left: 0;
  display: none
}

.tab-wrap .tab-header .tab-header-item .tab-header-item-text {
  color: #bfbfbf;
  text-align: center;
  transition: all .15s ease-in-out
}

.tab-wrap .tab-body .tab-item {
  padding-top: 10px
}

.tab-wrap .tab-body .tab-item.spaced {
  padding-top: 60px
}

@media screen and (max-width: 680px) {
  .tab-wrap .tab-header {
    display: block
  }

  .tab-wrap .tab-header.items-2 .tab-header-item, .tab-wrap .tab-header.items-3 .tab-header-item, .tab-wrap .tab-header.items-4 .tab-header-item, .tab-wrap .tab-header.items-5 .tab-header-item, .tab-wrap .tab-header.items-6 .tab-header-item {
    width: 100%
  }
}

.slider-controls.blue .slider-control {
  background-color: var(--blue-500)
}

.slider-controls.blue .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.red .slider-control {
  background-color: var(--brand-500)
}

.slider-controls.red .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.green .slider-control {
  background-color: var(--green-500)
}

.slider-controls.green .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.yellow .slider-control {
  background-color: var(--amber-500)
}

.slider-controls.yellow .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.violet .slider-control {
  background-color: var(--violet-500)
}

.slider-controls.violet .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.cyan .slider-control {
  background-color: var(--cyan-500)
}

.slider-controls.cyan .slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-controls.hover-yellow .slider-control {
  transition: background-color .2s ease-in-out
}

.slider-controls.hover-yellow .slider-control:hover {
  background-color: var(--amber-500)
}

.slider-controls.hover-yellow .slider-control.disabled {
  cursor: auto
}

.slider-controls.hover-yellow .slider-control.disabled:hover {
  background-color: var(--gray-300)
}

.slider-control {
  width: 26px;
  height: 26px;
  border-radius: 2px;
  background-color: var(--gray-500);
  cursor: pointer;
  position: relative
}

.slider-control.disabled {
  background-color: var(--gray-300);
  cursor: auto
}

.slider-control.big {
  width: 40px;
  height: 40px;
  border-radius: 4px
}

.slider-control.big .arrow-icon {
  top: 15px
}

.slider-control .arrow-icon {
  fill: var(--white);
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -3px
}

.slider-control.control-previous .arrow-icon {
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.postslide-wrap .slider-controls {
  margin-top: 20px;
  display: none
}

.postslide-wrap .slider-controls .slider-control.control-previous {
  margin-right: 30px
}

.postslide {
  width: 870px;
  height: 510px;
  overflow: hidden
}

.postslide:after {
  content: '';
  display: table;
  clear: both
}

.postslide .news-preview {
  float: left;
  width: 570px
}

.postslide .news-preview .post-preview {
  width: 100%
}

.postslide .news-preview .post-preview .loading-line {
  display: none
}

.postslide .news-roster {
  float: right;
  width: 300px
}

.postslide .news-roster .post-preview {
  cursor: pointer
}

.carousel {
  width: 870px;
  height: 294px;
  margin: 0 auto;
  overflow: hidden
}

.carousel.big {
  width: 1170px
}

.carousel.st-video {
  height: 522px
}

.carousel.st-video .carousel-items .post-preview:last-child {
  margin-top: 30px
}

.carousel.video {
  height: 345px
}

.carousel.video .carousel-items .post-preview:last-child {
  margin-top: 30px
}

.carousel.video.full {
  height: 460px
}

.carousel.video.full .carousel-items .post-preview {
  width: 870px
}

.carousel.video.full .carousel-items .post-preview:last-child {
  margin-top: 0
}

.carousel .carousel-items .post-preview {
  width: 270px
}

.carousel-controls:after {
  content: '';
  display: table;
  clear: both
}

.carousel-controls .slider-control {
  float: left;
  margin-right: 12px
}

.carousel-controls .slider-control:last-child {
  margin-right: 0
}

.banner-slider {
  height: 720px;
  overflow: hidden;
  position: relative
}

.banner-slider.v2 .slider-item-wrap {
  padding: 190px 0 0
}

.banner-slider.v2 .slider-item {
  box-shadow: inset 0px -310px 370px -150px rgba(0, 0, 0, 0.85)
}

.banner-slider.v2 .banner-slider-controls {
  position: relative
}

.banner-slider.v2 .banner-slider-controls .arrow-icon {
  fill: var(--white)
}

.banner-slider.v2 .banner-slider-controls .control-previous, .banner-slider.v2 .banner-slider-controls .control-next {
  position: absolute;
  top: 12px;
  cursor: pointer
}

.banner-slider.v2 .banner-slider-controls .control-previous {
  left: -96px;
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.banner-slider.v2 .banner-slider-controls .control-next {
  right: -96px
}

.banner-slider.v3 {
  height: 640px;
  position: relative
}

.banner-slider.v3:after {
  content: '';
  display: table;
  clear: both
}

.banner-slider.v3 .post-preview {
  width: 33.3333333333%;
  height: 640px
}

.banner-slider.v3 .post-preview .post-preview-img-overlay {
  transition: opacity .3s ease-in-out
}

.banner-slider.v3 .post-preview:hover .post-preview-img-overlay {
  opacity: 0
}

.banner-slider.v3 .post-preview:hover .tag-ornament {
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.banner-slider.v3 .post-preview:hover .post-preview-overlay .post-preview-title, .banner-slider.v3 .post-preview:hover .post-preview-overlay .post-preview-text {
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0)
}

.banner-slider.v3 .post-preview .post-preview-img {
  height: 640px;
  box-shadow: inset 0px -310px 370px -40px rgba(0, 0, 0, 0.85)
}

.banner-slider.v3 .post-preview .tag-ornament {
  -o-transform: translate(0, 106px);
  -moz-transform: translate(0, 106px);
  -ms-transform: translate(0, 106px);
  -webkit-transform: translate(0, 106px);
  transform: translate(0, 106px);
  transition: transform .3s ease-in-out
}

.banner-slider.v3 .post-preview .post-preview-overlay {
  margin-bottom: 44px;
  overflow: hidden
}

.banner-slider.v3 .post-preview .post-preview-overlay .post-preview-title, .banner-slider.v3 .post-preview .post-preview-overlay .post-preview-text {
  -o-transform: translate(0, 106px);
  -moz-transform: translate(0, 106px);
  -ms-transform: translate(0, 106px);
  -webkit-transform: translate(0, 106px);
  transform: translate(0, 106px);
  transition: transform .3s ease-in-out
}

.banner-slider.v3 .post-preview .post-preview-overlay .post-preview-text {
  margin-top: 10px
}

.banner-slider.v3 .banner-slider-controls .arrow-icon {
  fill: var(--gray-900)
}

.banner-slider.v3 .banner-slider-controls .control-previous, .banner-slider.v3 .banner-slider-controls .control-next {
  width: 42px;
  height: 38px;
  background-color: var(--color-surface-base);
  position: absolute;
  top: 270px;
  z-index: 9999;
  cursor: pointer
}

.banner-slider.v3 .banner-slider-controls .control-previous .arrow-icon, .banner-slider.v3 .banner-slider-controls .control-next .arrow-icon {
  position: absolute;
  top: 14px
}

.banner-slider.v3 .banner-slider-controls .control-previous {
  left: 0
}

.banner-slider.v3 .banner-slider-controls .control-previous .arrow-icon {
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  right: 20px
}

.banner-slider.v3 .banner-slider-controls .control-next {
  right: 0
}

.banner-slider.v3 .banner-slider-controls .control-next .arrow-icon {
  left: 20px
}

.banner-slider .slider-items {
  width: 100%
}

.banner-slider .slider-item {
  width: 100%;
  height: 720px
}

.banner-slider .slider-item-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/posts/13.webp") no-repeat center;
  background-size: cover
}

.banner-slider .slider-item-2 {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/posts/14.webp") no-repeat center;
  background-size: cover
}

.banner-slider .slider-item-3 {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/posts/07.webp") no-repeat center;
  background-size: cover
}

.banner-slider .slider-item-4 {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/posts/37.webp") no-repeat center;
  background-size: cover
}

.banner-slider .slider-item-wrap {
  max-width: 1170px;
  margin: 0 auto;
  width: 95%;
  padding: 220px 0 0 70px
}

.banner-slider .banner-slider-roster {
  width: 80px;
  position: absolute;
  bottom: 28px;
  left: 50%;
  margin-left: -40px;
  z-index: 9999
}

.banner-slider .banner-slider-preview-wrap {
  position: absolute;
  bottom: 26px;
  left: 50%;
  margin-left: -491px;
  z-index: 9999
}

.banner-slider .banner-slider-preview {
  width: 982px;
  height: 70px
}

.banner-slider .banner-slider-preview-roster:after {
  content: '';
  display: table;
  clear: both
}

.banner-slider .banner-slider-preview-roster .post-preview {
  opacity: .6;
  transition: .3s opacity ease-in-out;
  cursor: pointer
}

.banner-slider .banner-slider-preview-roster .post-preview.active {
  opacity: 1
}

.banner-slider .post-preview.centered {
  margin: 0 auto
}

.banner-slider-roster:after {
  content: '';
  display: table;
  clear: both
}

.banner-slider-roster .banner-slider-roster-item {
  float: left;
  margin-right: 16px
}

.banner-slider-roster .banner-slider-roster-item:last-child {
  margin-right: 0
}

.banner-slider-roster-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-surface-base);
  opacity: 0.3;
  transition: all .3s ease-in-out;
  cursor: pointer
}

.banner-slider-roster-item.active {
  opacity: 1
}

.slideshow {
  width: 100%;
  position: relative
}

.slideshow.v2 .slider-item-1 .slider-item-img, .slideshow.v2 .slider-item-1 .slider-blur-bg {
  background: url("../img/posts/19.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-2 .slider-item-img, .slideshow.v2 .slider-item-2 .slider-blur-bg {
  background: url("../img/posts/29.png") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-3 .slider-item-img, .slideshow.v2 .slider-item-3 .slider-blur-bg {
  background: url("../img/posts/27.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-4 .slider-item-img, .slideshow.v2 .slider-item-4 .slider-blur-bg {
  background: url("../img/posts/22.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-5 .slider-item-img, .slideshow.v2 .slider-item-5 .slider-blur-bg {
  background: url("../img/posts/18.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-6 .slider-item-img, .slideshow.v2 .slider-item-6 .slider-blur-bg {
  background: url("../img/posts/23.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-7 .slider-item-img, .slideshow.v2 .slider-item-7 .slider-blur-bg {
  background: url("../img/posts/21.jpg") no-repeat center;
  background-size: cover
}

.slideshow.v2 .slider-item-img {
  width: 84.8275862069%
}

.slideshow.v2 .slider-footer {
  height: 120px;
  background-color: transparent;
  position: relative
}

.slideshow.v2 .slider-footer .slider-roster {
  display: grid;
  grid-template-columns:repeat(7, 80px);
  grid-gap: 20px;
  justify-content: center;
  margin-top: 20px
}

.slideshow.v2 .slider-footer .slider-roster-item {
  padding: 0;
  cursor: pointer;
  position: relative
}

.slideshow.v2 .slider-footer .slider-roster-item.active .slider-roster-item-img-border {
  border: 4px solid var(--amber-500)
}

.slideshow.v2 .slider-footer .slider-roster-item .slider-roster-item-img-border {
  width: 80px;
  height: 80px;
  border: 4px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: border-color .4s ease-in-out
}

.slideshow.v2 .slider-footer .slider-roster-item .slider-roster-item-img {
  width: 80px;
  height: 80px
}

.slideshow.v2 .slider-footer .slider-control {
  top: 20px;
  right: auto
}

.slideshow.v2 .slider-footer .slider-control.control-previous {
  left: 0
}

.slideshow.v2 .slider-footer .slider-control.control-next {
  right: 0
}

.slideshow .slider-content {
  height: 460px
}

.slideshow .slider-item-1 .slider-item-img, .slideshow .slider-item-1 .slider-blur-bg {
  background: url("../img/posts/29.png") no-repeat center;
  background-size: cover
}

.slideshow .slider-item-2 .slider-item-img, .slideshow .slider-item-2 .slider-blur-bg {
  background: url("../img/posts/19.jpg") no-repeat center;
  background-size: cover
}

.slideshow .slider-item-3 .slider-item-img, .slideshow .slider-item-3 .slider-blur-bg {
  background: url("../img/posts/18.jpg") no-repeat center;
  background-size: cover
}

.slideshow .slider-item-4 .slider-item-img, .slideshow .slider-item-4 .slider-blur-bg {
  background: url("../img/posts/21.jpg") no-repeat center;
  background-size: cover
}

.slideshow .slider-item-5 .slider-item-img, .slideshow .slider-item-5 .slider-blur-bg {
  background: url("../img/posts/02.jpg") no-repeat center;
  background-size: cover
}

.slideshow .slider-items {
  width: 100%;
  height: 460px
}

.slideshow .slider-item {
  width: 100%;
  overflow: hidden
}

.slideshow .slider-item-img {
  width: 70.3448275862%;
  height: 460px;
  margin: 0 auto;
  position: relative;
  z-index: 9999
}

.slideshow .slider-blur-bg {
  width: 100%;
  height: 460px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: blur(5px);
  filter: blur(5px)
}

.slideshow .slider-footer {
  width: 100%;
  height: 84px;
  background-color: #252627
}

.slideshow .slider-footer .slider-control {
  position: absolute;
  top: 22px;
  z-index: 9999
}

.slideshow .slider-footer .slider-control.control-previous {
  right: 78px
}

.slideshow .slider-footer .slider-control.control-next {
  right: 26px
}

.slideshow .slider-footer .slider-roster {
  width: 100%
}

.slideshow .slider-footer .slider-roster-item {
  padding: 24px 144px 0 26px
}

.slideshow .slider-footer .slider-footer-title {
  color: var(--white);
  font-size: .875em
}

.slideshow .slider-footer .slider-footer-text {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em;
  margin-top: 8px
}

.sponsors-slider-wrap {
  position: relative
}

.sponsors-slider-wrap .sponsors-slider-controls .control-previous, .sponsors-slider-wrap .sponsors-slider-controls .control-next {
  position: absolute;
  top: 45px;
  cursor: pointer;
  z-index: 6666
}

.sponsors-slider-wrap .sponsors-slider-controls .control-previous .arrow-icon, .sponsors-slider-wrap .sponsors-slider-controls .control-next .arrow-icon {
  fill: var(--white)
}

.sponsors-slider-wrap .sponsors-slider-controls .control-previous {
  left: -70px;
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.sponsors-slider-wrap .sponsors-slider-controls .control-next {
  right: -70px
}

.sponsors-slider {
  width: 410px;
  height: 100px
}

.sponsors-slider .sponsors-slider-item {
  width: 110px;
  height: 100px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center
}

.sponsors-slider .sponsors-slider-item .sponsor-img {
  opacity: .1
}

.carousel-match-result-wrap {
  border: 1px solid var(--color-border);
  border-right: none;
  border-left: none;
  position: relative;
  padding: 0 46px
}

.carousel-match-result-wrap.full {
  display: flex;
  flex-flow: row nowrap;
  padding: 0 25px 0 0
}

.carousel-match-result-wrap.full .match-selector {
  width: 192px;
  flex-shrink: 0;
  text-align: center;
  padding: 46px 0 0 36px
}

.carousel-match-result-wrap.full .control-next, .carousel-match-result-wrap.full .control-previous {
  width: 26px;
  height: 130px;
  border-left: 1px solid var(--color-border);
  padding-top: 56px;
  cursor: pointer;
  text-align: center;
  position: absolute;
  top: 0
}

.carousel-match-result-wrap.full .control-next.disabled, .carousel-match-result-wrap.full .control-previous.disabled {
  fill: var(--gray-300)
}

.carousel-match-result-wrap.full .control-next {
  right: 0
}

.carousel-match-result-wrap.full .control-previous {
  left: 164px
}

.carousel-match-result-wrap.full .control-previous .arrow-icon {
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}

.carousel-match-result-wrap .slider-controls {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2
}

.carousel-match-result-wrap .slider-controls .control-next, .carousel-match-result-wrap .slider-controls .control-previous {
  position: absolute;
  top: 52px
}

.carousel-match-result-wrap .slider-controls .control-next {
  right: 0
}

.carousel-match-result-wrap .slider-controls .control-previous {
  left: 0
}

.carousel-match-result {
  width: 100%;
  height: 130px;
  border-right: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  margin: 0 auto;
  overflow: hidden
}

.carousel-match-result .carousel-match-result-items .carousel-match-result-item {
  border-right: 1px solid var(--color-border)
}

.shop-banner-slider-wrap .shop-banner-slider-roster {
  margin-top: 26px
}

.shop-banner-slider {
  height: 320px;
  border: 1px solid var(--color-border);
  overflow: hidden
}

.shop-banner-slider-roster {
  display: flex;
  flex-flow: row wrap;
  justify-content: center
}

.shop-banner-slider-roster .shop-banner-slider-roster-item {
  margin-right: 10px;
  cursor: pointer
}

.shop-banner-slider-roster .shop-banner-slider-roster-item .bar-progress-info {
  color: #bfbfbf
}

.shop-banner-slider-roster .shop-banner-slider-roster-item canvas:last-child {
  display: none
}

.shop-banner-slider-roster .shop-banner-slider-roster-item.active .bar-progress-info {
  color: var(--color-text-primary)
}

.shop-banner-slider-roster .shop-banner-slider-roster-item.active canvas:last-child {
  display: block
}

.shop-banner-slider-roster .shop-banner-slider-roster-item:last-child {
  margin-right: 0
}

.product-slider-wrap {
  width: 570px
}

.product-slider-wrap .product-slider-roster-items {
  margin-top: 20px
}

.product-slider {
  height: 590px;
  overflow: hidden
}

.product-slider .product-slider-items {
  width: 100%;
  height: 100%
}

.product-slider .product-slider-item {
  width: 100%;
  height: 100%
}

.product-slider .product-slider-item img {
  width: 100%;
  height: 100%
}

.product-slider-roster-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: center
}

.product-slider-roster-items .product-slider-roster-item {
  width: 98px;
  height: 98px;
  margin-right: 20px;
  cursor: pointer;
  opacity: 0.2;
  transition: .3s opacity ease-in-out
}

.product-slider-roster-items .product-slider-roster-item:last-child {
  margin-right: 0
}

.product-slider-roster-items .product-slider-roster-item.active {
  opacity: 1
}

@media screen and (max-width: 1260px) {
  .banner-slider.v2 .banner-slider-preview-wrap {
    width: 80px;
    margin-left: -40px;
    bottom: 80px
  }

  .banner-slider.v2 .banner-slider-preview-wrap .banner-slider-preview {
    display: none
  }

  .banner-slider.v2 .banner-slider-preview-wrap .banner-slider-controls .control-previous {
    left: 0
  }

  .banner-slider.v2 .banner-slider-preview-wrap .banner-slider-controls .control-next {
    right: 0
  }

  .banner-slider.v3 .post-preview {
    width: 50%
  }

  .carousel.big {
    width: 870px
  }

  .shop-banner-slider-wrap {
    display: none
  }
}

@media screen and (max-width: 960px) {
  .banner-slider .slider-item-wrap {
    padding-left: 32px
  }

  .banner-slider.v3 .post-preview {
    width: 100%
  }

  .postslide-wrap .slider-controls {
    display: flex;
    flex-flow: row wrap;
    justify-content: center
  }

  .postslide {
    width: 100%
  }

  .postslide .news-preview {
    width: 100%
  }

  .postslide .news-preview .post-preview .loading-line {
    display: block
  }

  .postslide .news-roster {
    display: none
  }

  .slideshow.v2 .slider-footer {
    height: auto
  }

  .slideshow.v2 .slider-footer .slider-roster {
    text-align: none;
    grid-template-columns:repeat(4, 80px)
  }

  .slideshow.v2 .slider-footer .slider-roster .slider-roster-item {
    width: auto;
    display: block;
    padding: 0
  }

  .slideshow.v2 .slider-footer .slider-controls {
    width: auto;
    position: static;
    top: 0;
    left: 0;
    margin-left: 0
  }

  .slideshow.v2 .slider-footer .slider-controls .slider-control {
    top: 40px
  }

  .slideshow .slider-footer {
    height: 134px
  }

  .slideshow .slider-footer .slider-roster {
    text-align: center
  }

  .slideshow .slider-footer .slider-roster .slider-roster-item {
    width: 100%;
    display: inline-block;
    padding: 24px 20px 0
  }

  .slideshow .slider-footer .slider-roster .slider-roster-item .slider-footer-title {
    line-height: 1.2857142857em
  }

  .slideshow .slider-footer .slider-roster .slider-roster-item .slider-footer-text {
    display: none
  }

  .slideshow .slider-footer .slider-controls {
    width: 92px;
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -46px
  }

  .slideshow .slider-footer .slider-controls .slider-control {
    top: 0
  }

  .slideshow .slider-footer .slider-controls .slider-control.control-previous {
    left: 0
  }

  .slideshow .slider-footer .slider-controls .slider-control.control-next {
    right: 0
  }

  .carousel {
    width: 570px
  }

  .carousel.big {
    width: 570px
  }

  .carousel.video.full .carousel-items .post-preview {
    width: 570px
  }
}

@media screen and (max-width: 680px) {
  .banner-slider .slider-item-wrap {
    padding-left: 0
  }

  .sponsors-slider {
    width: 270px
  }

  .slideshow.v2 .slider-footer {
    height: 70px
  }

  .slideshow.v2 .slider-footer .slider-roster {
    display: none
  }

  .slideshow.v2 .slider-footer .slider-controls {
    width: 92px;
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -46px
  }

  .slideshow.v2 .slider-footer .slider-controls .slider-control {
    top: 0
  }

  .slideshow.v2 .slider-footer .slider-controls .slider-control.control-previous {
    left: 0
  }

  .slideshow.v2 .slider-footer .slider-controls .slider-control.control-next {
    right: 0
  }

  .carousel {
    width: 270px
  }

  .carousel.big {
    width: 270px
  }

  .carousel.video.full {
    height: 160px
  }

  .carousel.video.full .carousel-items .post-preview {
    width: 270px;
    height: 160px
  }

  .carousel.video.full .carousel-items .post-preview .post-preview-img {
    height: 160px
  }

  .carousel.video.full .carousel-items .post-preview .play-button {
    margin: 0 auto
  }

  .carousel.video.full .carousel-items .post-preview .post-preview-overlay-info {
    display: none
  }

  .product-slider-wrap {
    width: 100%
  }

  .product-slider-wrap .product-slider {
    width: 285px;
    height: 295px;
    margin: 0 auto
  }
}

@media screen and (max-width: 480px) {
  .sponsors-slider {
    width: 110px
  }

  .postslide {
    height: 450px
  }

  .postslide .news-preview .post-preview .post-preview-img {
    height: 450px
  }

  .postslide .news-preview .post-preview .post-preview-overlay .post-preview-title {
    font-size: 1.625em
  }

  .slideshow .slider-content {
    height: 380px
  }

  .slideshow .slider-items {
    height: 380px
  }

  .slideshow .slider-items .slider-item .slider-blur-bg, .slideshow .slider-items .slider-item .slider-item-img {
    height: 380px
  }
}

.xm-tooltip {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-surface-base);
  box-shadow: 0px 10px 28.8px 1.2px rgba(0, 0, 0, 0.08)
}

.xm-tooltip .xm-tooltip-text {
  color: var(--color-text-primary);
  line-height: 16px
}

.xm-tooltip.v2 {
  padding: 2px 10px;
  border-color: var(--gray-900);
  background-color: var(--gray-900)
}

.xm-tooltip.v2.right:after {
  left: -10px;
  top: 50%;
  margin-left: 0;
  margin-top: -3px;
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.xm-tooltip.v2.red {
  border-color: var(--brand-500);
  background-color: var(--brand-500)
}

.xm-tooltip.v2.red:after {
  border-top-color: var(--brand-500)
}

.xm-tooltip.v2.medium .xm-tooltip-text {
  font-size: 12px;
  text-align: center
}

.xm-tooltip.v2 .xm-tooltip-text {
  color: var(--white);
  font-size: 9px
}

.xm-tooltip.v2 .xm-tooltip-text .inner-text {
  display: block;
  font-size: 8px;
  text-align: center
}

.xm-tooltip.v2:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--gray-900);
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px
}

.calendar {
  width: 870px;
  margin: 0 auto
}

.calendar .calendar-header .calendar-header-top {
  height: 60px;
  border-bottom: 1px solid var(--color-border);
  position: relative
}

.calendar .calendar-header .calendar-header-top .calendar-month-year {
  color: var(--color-text-primary);
  line-height: 60px;
  text-align: center
}

.calendar .calendar-header .calendar-header-top .calendar-month-year .calendar-month {
  margin-right: 3px
}

.calendar .calendar-header .calendar-header-top .calendar-controls .slider-control {
  position: absolute;
  top: 16px
}

.calendar .calendar-header .calendar-header-top .calendar-controls .slider-control.control-previous {
  left: 2px
}

.calendar .calendar-header .calendar-header-top .calendar-controls .slider-control.control-next {
  right: 2px
}

.calendar .calendar-header .calendar-header-bottom {
  height: 41px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap
}

.calendar .calendar-header .calendar-header-bottom .calendar-week-day {
  width: 124px;
  color: var(--color-text-primary);
  line-height: 40px;
  text-align: center
}

.calendar .calendar-header .calendar-header-bottom .calendar-week-day:first-child, .calendar .calendar-header .calendar-header-bottom .calendar-week-day:last-child {
  width: 125px
}

.calendar .calendar-body {
  display: flex;
  flex-flow: row wrap
}

.calendar .calendar-body .calendar-day {
  width: 124px;
  height: 131px;
  padding: 50px 10px 0 19px;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  position: relative
}

.calendar .calendar-body .calendar-day .calendar-day-number {
  display: block;
  color: gray;
  font-size: .75em;
  line-height: 1em;
  position: absolute;
  top: 18px;
  right: 19px
}

.calendar .calendar-body .calendar-day .event-list .event-item {
  color: var(--color-text-primary);
  line-height: 1.2em;
  margin-bottom: 12px;
  position: relative
}

.calendar .calendar-body .calendar-day .event-list .event-item:last-child {
  margin-bottom: 0
}

.calendar .calendar-body .calendar-day .event-list .event-item:before {
  content: '';
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: var(--gray-900);
  position: absolute;
  top: 2px;
  left: -10px
}

.calendar .calendar-body .calendar-day .event-list .event-item.blue:before {
  background-color: var(--blue-500)
}

.calendar .calendar-body .calendar-day .event-list .event-item.green:before {
  background-color: var(--green-500)
}

.calendar .calendar-body .calendar-day .event-list .event-item.violet:before {
  background-color: var(--violet-500)
}

.calendar .calendar-body .calendar-day:first-child, .calendar .calendar-body .calendar-day:nth-child(8n+8), .calendar .calendar-body .calendar-day:nth-child(7n+7) {
  width: 125px
}

.calendar .calendar-body .calendar-day:nth-child(7n+7) {
  border-right: none
}

.calendar .calendar-body .calendar-day.disabled .calendar-day-number {
  color: #d2d2d2;
  font-weight: 700
}

.calendar .calendar-body .calendar-day.current .calendar-day-number {
  font-weight: 700
}

.calendar .calendar-body .calendar-day.current.event .calendar-day-number {
  color: var(--white)
}

.calendar .calendar-body .calendar-day.event .calendar-day-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--gray-900);
  color: var(--white);
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  top: 8px;
  right: 10px
}

.calendar .calendar-body .calendar-day.event-popup .event-list {
  width: 160px;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 9999;
  padding: 18px 28px;
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out
}

.calendar .calendar-body .calendar-day.event-popup:hover .event-list {
  opacity: 1;
  visibility: visible
}

.calendar.blue .calendar-body .calendar-day.current .calendar-day-number {
  color: var(--blue-500)
}

.calendar.blue .calendar-body .calendar-day.current.event .calendar-day-number {
  color: var(--white)
}

.calendar.blue .calendar-body .calendar-day.event .calendar-day-number {
  background-color: var(--blue-500)
}

.calendar.small {
  width: 270px
}

.calendar.small .calendar-header .calendar-header-top {
  height: 40px;
  border-bottom: none
}

.calendar.small .calendar-header .calendar-header-top .calendar-month-year {
  line-height: 40px
}

.calendar.small .calendar-header .calendar-header-top .calendar-controls .slider-control {
  top: 7px
}

.calendar.small .calendar-header .calendar-header-bottom {
  height: 30px;
  border-bottom: none
}

.calendar.small .calendar-header .calendar-header-bottom .calendar-week-day {
  width: 38px;
  line-height: 30px
}

.calendar.small .calendar-header .calendar-header-bottom .calendar-week-day:first-child, .calendar.small .calendar-header .calendar-header-bottom .calendar-week-day:last-child {
  width: 40px
}

.calendar.small .calendar-body {
  display: flex;
  flex-flow: row wrap
}

.calendar.small .calendar-body .calendar-day {
  width: 38px;
  height: 30px;
  padding: 0;
  border: none
}

.calendar.small .calendar-body .calendar-day .calendar-day-number {
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  position: static
}

.calendar.small .calendar-body .calendar-day:first-child, .calendar.small .calendar-body .calendar-day:nth-child(8n+8), .calendar.small .calendar-body .calendar-day:nth-child(7n+7) {
  width: 40px
}

@media screen and (max-width: 960px) {
  .calendar {
    width: 560px
  }

  .calendar .calendar-header .calendar-header-bottom .calendar-week-day {
    width: 80px
  }

  .calendar .calendar-header .calendar-header-bottom .calendar-week-day:first-child, .calendar .calendar-header .calendar-header-bottom .calendar-week-day:last-child {
    width: 80px
  }

  .calendar .calendar-body .calendar-day {
    width: 80px;
    height: 87px
  }

  .calendar .calendar-body .calendar-day .event-list {
    display: none
  }

  .calendar .calendar-body .calendar-day:first-child, .calendar .calendar-body .calendar-day:nth-child(8n+8), .calendar .calendar-body .calendar-day:nth-child(7n+7) {
    width: 80px
  }

  .calendar.small .calendar-body .calendar-day .event-list {
    display: block
  }
}

@media screen and (max-width: 680px) {
  .calendar {
    width: 270px;
    margin: 30px auto
  }

  .calendar .calendar-header .calendar-header-top {
    height: 40px;
    border-bottom: none
  }

  .calendar .calendar-header .calendar-header-top .calendar-month-year {
    line-height: 40px
  }

  .calendar .calendar-header .calendar-header-top .calendar-controls .slider-control {
    top: 7px
  }

  .calendar .calendar-header .calendar-header-bottom {
    height: 30px;
    border-bottom: none
  }

  .calendar .calendar-header .calendar-header-bottom .calendar-week-day {
    width: 38px;
    line-height: 30px
  }

  .calendar .calendar-header .calendar-header-bottom .calendar-week-day:first-child, .calendar .calendar-header .calendar-header-bottom .calendar-week-day:last-child {
    width: 40px
  }

  .calendar .calendar-body {
    display: flex;
    flex-flow: row wrap
  }

  .calendar .calendar-body .calendar-day {
    width: 38px;
    height: 30px;
    padding: 0;
    border: none
  }

  .calendar .calendar-body .calendar-day .calendar-day-number {
    margin: 0 auto;
    line-height: 30px;
    text-align: center;
    position: static
  }

  .calendar .calendar-body .calendar-day:first-child, .calendar .calendar-body .calendar-day:nth-child(8n+8), .calendar .calendar-body .calendar-day:nth-child(7n+7) {
    width: 40px
  }
}

.header-wrap {
  background-color: #252627
}

.header {
  height: 50px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.header .widget-selectables {
  display: flex;
  flex-flow: row wrap
}

.header .widget-selectables .widget-options-wrap {
  margin-right: -50px
}

.header .widget-selectables .widget-options-wrap:last-child {
  margin-right: 0
}

.header .widget-selectables .log-button {
  margin-top: 12px
}

.widget-options-wrap {
  cursor: pointer
}

.widget-options-wrap .widget-option-text {
  float: left;
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-size: .6875em
}

.widget-options-wrap .widget-option-img {
  float: left;
  margin-right: 10px
}

.widget-options-wrap .widget-option-icon {
  float: left;
  margin-right: 8px;
  color: var(--blue-500);
  font-size: 14px;
  line-height: 50px
}

.widget-options-wrap .current-option:after {
  content: '';
  display: table;
  clear: both
}

.widget-options-wrap .current-option > .widget-option-text {
  line-height: 50px;
  margin-right: 3px
}

.widget-options-wrap .current-option .current-option-value {
  float: left
}

.widget-options-wrap .current-option .arrow-icon {
  float: left;
  margin: 23px 0 0 9px;
  fill: var(--white);
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.widget-options-wrap .current-option-value:after {
  content: '';
  display: table;
  clear: both
}

.widget-options-wrap .current-option-value.highlighted .widget-option-text {
  color: var(--blue-500)
}

.widget-options-wrap .current-option-value .widget-option-img {
  margin-top: 19px
}

.widget-options-wrap .current-option-value .widget-option-img.user-avatar {
  margin-top: 15px
}

.widget-options-wrap .current-option-value .widget-option-text {
  line-height: 50px
}

.widget-options {
  width: 180px;
  visibility: hidden
}

.widget-options.linkable .widget-option .widget-option-text {
  color: var(--color-text-muted);
  transition: all .15s ease-in-out
}

.widget-options.linkable .widget-option:hover .widget-option-text {
  color: var(--white)
}

.widget-options.short .widget-option .widget-option-text {
  line-height: 32px
}

.widget-options.small {
  width: 110px
}

.widget-options.small .widget-option {
  padding-left: 10px
}

.widget-options .widget-option-heading, .widget-options .widget-option {
  background-color: #252627;
  border-bottom: 1px solid #424242
}

.widget-options .widget-option-heading:after, .widget-options .widget-option:after {
  content: '';
  display: table;
  clear: both
}

.widget-options .widget-option-heading {
  padding-left: 12px;
  border-left: 3px solid var(--white);
  cursor: auto
}

.widget-options .widget-option-heading.blue {
  border-left-color: var(--blue-500)
}

.widget-options .widget-option-heading.red {
  border-left-color: var(--brand-500)
}

.widget-options .widget-option-heading .widget-option-text {
  font-family: "Exo", sans-serif;
  font-size: .625em;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase
}

.widget-options .widget-option {
  display: block;
  padding-left: 20px
}

.widget-options .widget-option:last-child {
  border-bottom: none
}

.widget-options .widget-option .widget-option-img {
  float: left;
  margin-top: 12px
}

.widget-options .widget-option .widget-option-text {
  float: left;
  line-height: 35px
}

@media screen and (max-width: 1260px) {
  .header .widget-selectables .currency-text-info {
    display: none
  }

  .header .widget-selectables:last-child .widget-options-wrap {
    display: none
  }
}

@media screen and (max-width: 680px) {
  .header .widget-selectables .widget-option-img {
    display: none
  }
}

.banner-wrap {
  background-color: var(--gray-900)
}

.banner-wrap.gaming-news {
  background: url("../img/banners/gaming-news-banner.webp") no-repeat center, linear-gradient(45deg, #1c59f3, #00d8ff);
  background-size: cover
}

.banner-wrap.game-review {
  background: url("../img/banners/game-reviews-banner.webp") no-repeat center, linear-gradient(45deg, #420ed9, #ff055d);
  background-size: cover
}

.banner-wrap.movie-reviews {
  background: url("../img/banners/movie-news-banner.jpg") no-repeat center, linear-gradient(45deg, #3a8800, #60ec1b);
  background-size: cover
}

.banner-wrap.geeky-news {
  background: url("../img/banners/geeky-news-banner.jpg") no-repeat center, linear-gradient(45deg, #f60, #ffde00);
  background-size: cover
}

.banner-wrap.e-sport {
  background: linear-gradient(45deg, #21149e, #8314ff), url("../img/banners/fortnite-banner.jpg") no-repeat center;
  background-size: cover
}

.banner-wrap.pixel-videos {
  background: url("../img/banners/pixel-videos-banner.jpg") no-repeat center, linear-gradient(45deg, #0088af, #00ffea);
  background-size: cover
}

.banner-wrap.forum-banner {
  background: url("../img/banners/pixel-banner.webp") no-repeat center, linear-gradient(45deg, var(--brand-500), var(--blue-500));
  background-size: cover
}

.banner-wrap.shop-banner {
  background: url("../img/banners/shop-banner.jpg") no-repeat center, linear-gradient(45deg, #420ca2, #00d8ff);
  background-size: cover
}

.banner {
  min-height: 260px;
  padding: 102px 0 90px
}

.banner .banner-title {
  color: var(--white);
  text-align: center
}

.banner .banner-sections {
  margin-top: 16px;
  color: var(--white);
  font-size: .75em;
  line-height: 1em;
  text-align: center
}

.banner .banner-sections .arrow-icon {
  fill: var(--white);
  margin: 0 6px;
  position: relative;
  top: -1px
}

.banner-top-slider {
  padding-top: 60px
}

.promo-banner {
  min-height: 130px;
  background: url("../img/banners/live-play-banner.jpg") no-repeat 0 0;
  background-size: cover;
  position: relative
}

.promo-banner .promo-banner-img {
  position: absolute;
  top: 35px;
  left: 30px
}

.promo-banner .tag-ornament {
  position: absolute;
  bottom: 0;
  left: 0
}

.promo-banner .promo-banner-info {
  position: absolute;
  top: 36px;
  left: 226px
}

.promo-banner .promo-banner-info .promo-banner-pre-title {
  color: var(--white);
  margin-bottom: 4px
}

.promo-banner .promo-banner-info .promo-banner-pre-title .live-icon {
  margin: 0 8px;
  position: relative;
  top: -2px
}

.promo-banner .promo-banner-info .promo-banner-title {
  color: var(--white);
  margin-bottom: 6px
}

.promo-banner .promo-banner-info .promo-banner-text {
  color: #f4f4f4;
  text-transform: none;
  font-weight: 400
}

.promo-banner .countdown-arc {
  position: absolute;
  top: 24px;
  right: 48px
}

.promo-advert {
  width: 270px;
  height: 270px;
  border: 1px solid var(--color-border);
  margin: 0 auto;
  position: relative
}

.promo-advert .promo-advert-img {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 9px;
  left: 9px
}

.banner-post {
  display: flex;
  flex-flow: row wrap
}

.banner-post .banner-post-item {
  display: flex;
  flex-flow: row wrap;
  width: 50%;
  height: 360px
}

.banner-post > .banner-post-item {
  height: 720px
}

.banner-post > .banner-post-item .post-preview {
  width: 100%
}

.banner-post > .banner-post-item .post-preview.large .post-preview-overlay .post-preview-title {
  width: 510px
}

.banner-post > .banner-post-item .post-preview.big .post-preview-img {
  height: 360px
}

.banner-post > .banner-post-item .post-preview.big .post-preview-overlay .post-preview-title {
  width: 450px
}

.banner-display-separator {
  height: 60px;
  background-color: var(--color-surface-base)
}

@media screen and (max-width: 1080px) {
  .banner-post {
    display: block
  }

  .banner-post .banner-post-item {
    display: block;
    width: 100%
  }

  .banner-post > .banner-post-item {
    height: auto
  }

  .banner-post > .banner-post-item .post-preview {
    width: 100%
  }

  .banner-post > .banner-post-item .post-preview.large .post-preview-img {
    height: 360px
  }

  .banner-post > .banner-post-item .post-preview.large .post-preview-overlay {
    padding: 0 30px;
    margin-bottom: 26px
  }

  .banner-post > .banner-post-item .post-preview.large .post-preview-overlay .post-preview-title {
    width: 100%;
    font-size: 2.25em;
    margin-top: 14px
  }

  .banner-post > .banner-post-item .post-preview.large .post-preview-overlay .post-preview-text {
    font-size: .8125em;
    line-height: 1.6923076923em
  }

  .banner-post > .banner-post-item .post-preview.big .post-preview-img {
    height: 360px
  }

  .banner-post > .banner-post-item .post-preview.big .post-preview-overlay .post-preview-title {
    width: 100%
  }
  
  /* Reduce general post preview title font size on mobile */
  .post-preview-title {
    font-size: 1.45em !important;
  }
  
  /* Adjust post preview text line height on mobile */
  .post-preview-text {
    line-height: 1.3em !important;
  }
}

@media screen and (max-width: 960px) {
  .promo-banner {
    padding: 40px
  }

  .promo-banner .promo-banner-img, .promo-banner .promo-banner-info, .promo-banner .countdown-arc {
    position: static
  }

  .promo-banner .tag-ornament {
    top: 0;
    bottom: auto
  }

  .promo-banner .promo-banner-img {
    display: block;
    margin: 0 auto
  }

  .promo-banner .promo-banner-info {
    margin: 20px auto 0;
    text-align: center
  }

  .promo-banner .countdown-arc {
    margin: 40px auto 0
  }
}

@media screen and (max-width: 480px) {
  .promo-banner .countdown-arc {
    width: 160px
  }

  .promo-banner .countdown-arc .counter-wrap:nth-last-child(1), .promo-banner .countdown-arc .counter-wrap:nth-last-child(2) {
    margin-top: 20px
  }
}

.section-title-wrap {
  position: relative
}

.section-title-wrap.blue .section-title-separator:before {
  background-color: var(--blue-500)
}

.section-title-wrap.blue-light .section-title-separator:before {
  background-color: #10caff
}

.section-title-wrap.red .section-title-separator:before {
  background-color: var(--brand-500)
}

.section-title-wrap.green .section-title-separator:before {
  background-color: var(--green-500)
}

.section-title-wrap.yellow .section-title-separator:before {
  background-color: var(--amber-500)
}

.section-title-wrap.violet .section-title-separator:before {
  background-color: var(--violet-500)
}

.section-title-wrap.cyan .section-title-separator:before {
  background-color: var(--cyan-500)
}

.section-title-wrap.negative .section-title {
  color: var(--white)
}

.section-title-wrap.negative .section-title-separator {
  background-color: #383838
}

.section-title-wrap.small-space {
  margin-bottom: 10px
}

.section-title-wrap.small-space + .filter-heading {
  margin-top: 0
}

.section-title-wrap .section-title {
  font-size: 1em
}

.section-title-wrap .section-title.medium {
  font-size: 1.125em
}

.section-title-wrap .section-title.small {
  font-size: .875em
}

.section-title-wrap .section-title-separator {
  width: 100%;
  height: 1px;
  margin-top: 16px;
  background-color: var(--gray-300);
  position: relative
}

.section-title-wrap .section-title-separator:before {
  content: '';
  width: 70px;
  height: 3px;
  background-color: var(--gray-900);
  position: absolute;
  top: -2px;
  left: 0
}

.section-title-wrap + .streamer-avatars {
  margin-top: 43px
}

.section-title-wrap + .widget-overflow-wrap.tournament-results {
  margin-top: 40px
}

.section-title-wrap + .widget-title-wrap {
  margin-top: 12px
}

.section-title-wrap + .post-preview-showcase, .section-title-wrap + .carousel, .section-title-wrap + .filter-heading {
  margin-top: 26px
}

.section-title-wrap + .post-comment-form, .section-title-wrap + .account-settings-form {
  margin-top: 30px
}

.section-title-wrap + .post-comment {
  border-top: none
}

.section-title-wrap + .carousel-match-result-wrap {
  border-top: none
}

.section-title-wrap + .widget-team-builds-header {
  margin-top: 30px
}

.section-title-wrap + .form-row {
  margin-top: 30px
}

.section-title-wrap .checkbox-item {
  position: absolute;
  top: 0;
  right: 0
}

.section-title-wrap .slider-controls {
  position: absolute;
  top: -4px;
  right: 0
}

.section-title-wrap .decorated-link {
  position: absolute;
  top: 4px;
  right: 0
}

.section-title-wrap .dropdown-simple-wrap {
  position: absolute;
  top: 0;
  right: 0
}

.section-title-wrap .dropdown-simple-wrap .dp-current-option .arrow-icon {
  margin-top: 4px
}

.section-bg {
  background: var(--gray-950) url("../img/section/bg1.webp") no-repeat center;
  background-size: cover
}

.section-slider-bg {
  background: var(--violet-500) url("../img/section/bg2.jpg") no-repeat center;
  background-size: cover;
  padding: 180px 0 200px
}

.section-slider-bg .section-slider-title {
  width: 240px;
  padding: 6px 0 0 10px;
  border-left: 6px solid var(--gray-900);
  color: var(--white)
}

.section-slider-bg .section-slider-title.cyan {
  border-left-color: var(--cyan-500)
}

.section-slider-bg .section-slider-title .highlight {
  display: inline-block;
  margin-top: 4px;
  font-size: 46px
}

.section-slider-wrap {
  position: relative
}

.section-slider-wrap .video-slider-wrap {
  width: 100%;
  height: 460px;
  position: absolute;
  top: -16px;
  left: 300px
}

.video-info-slider {
  width: 240px;
  height: 240px;
  margin: 60px 0 30px;
  overflow: hidden
}

.video-info-slider-items .video-info-slider-item {
  width: 240px
}

.video-info-slider-items .video-info-slider-item .video-info-slider-title {
  color: var(--white)
}

.video-info-slider-items .video-info-slider-item .social-links {
  margin-top: 30px
}

.video-info-slider-items .video-info-slider-item .video-info-slider-text {
  margin-top: 18px;
  color: var(--white)
}

.video-slider {
  width: 100%;
  height: 100%
}

.video-slider-items .video-slider-item {
  width: 870px;
  height: 460px
}

.video-slider-items .video-slider-item iframe {
  width: 100%;
  height: 100%
}

@media screen and (max-width: 1260px) {
  .section-slider-bg {
    display: none
  }
}

.option-list {
  display: flex;
  flex-flow: row wrap
}

.option-list .option-list-item {
  height: 40px;
  padding: 0 20px;
  color: #bfbfbf;
  line-height: 40px;
  cursor: pointer
}

.option-list .option-list-item.selected {
  color: var(--color-text-primary);
  border-bottom: 3px solid var(--violet-500)
}

.forum-actions {
  display: flex;
  flex-flow: row wrap
}

.forum-actions .dropdown-simple-wrap {
  margin-right: 10px
}

.forum-actions .dropdown-simple-wrap .form-wrap {
  width: 320px
}

.forum-actions > * {
  margin-right: 10px
}

.forum-actions > *:last-child {
  margin-right: 0
}

.user-dropdown {
  width: 224px
}

.user-dropdown .user-dropdown-header {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.user-dropdown .user-dropdown-header .user-dropdown-header-text {
  margin-top: 4px;
  color: var(--color-text-primary)
}

.user-dropdown .user-dropdown-header .user-dropdown-header-actions .user-dropdown-header-action {
  margin-right: 8px
}

.user-dropdown .user-dropdown-header .user-dropdown-header-actions .user-dropdown-header-action .icon-envelope, .user-dropdown .user-dropdown-header .user-dropdown-header-actions .user-dropdown-header-action .icon-settings {
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 700
}

.user-dropdown .user-dropdown-header .user-dropdown-header-actions .user-dropdown-header-action:last-child {
  margin-right: 0
}

.user-dropdown .user-dropdown-body {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--color-border)
}

.user-dropdown .user-dropdown-body .notification-item {
  margin-bottom: 14px
}

.user-dropdown .user-dropdown-body .notification-item:last-child {
  margin-bottom: 0
}

.forum-category-wrap {
  width: 370px;
  padding: 40px 0 40px 100px;
  position: relative
}

.forum-category-wrap .forum-category-img {
  position: absolute;
  top: 34px;
  left: 6px
}

.forum-category-wrap .forum-category-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.forum-category-wrap .forum-category-description {
  margin-top: 12px
}

.forum-category-wrap .forum-category-subcategories {
  margin-top: 16px;
  padding: 10px 0 10px 8px;
  border-left: 1px solid var(--color-border)
}

.forum-category-wrap .forum-category-subcategories .forum-category-subcategory {
  margin-bottom: 14px;
  color: var(--color-text-primary)
}

.forum-category-wrap .forum-category-subcategories .forum-category-subcategory:last-child {
  margin-bottom: 0
}

.forum-post-links .forum-post-link-wrap {
  margin-bottom: 20px
}

.forum-post-links .forum-post-link-wrap:last-child {
  margin-bottom: 0
}

.forum-post-link-wrap {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.forum-post-link {
  color: var(--color-text-primary);
  line-height: 18px
}

.forum-post-link + .forum-post-timestamp {
  margin: 0 0 2px 6px
}

.forum-post-link + .forum-post-description-preview, .forum-post-link + .forum-post-tags {
  margin-top: 10px
}

.forum-post-link.medium {
  font-size: .75em
}

.forum-post-link.pin-tag {
  font-size: .875em;
  padding-left: 34px;
  position: relative
}

.forum-post-link.pin-tag:before {
  content: url("../img/icons/pinned-icon.png");
  margin-right: 10px;
  position: absolute;
  top: -4px;
  left: 0
}

.forum-post-link.pin-tag:after {
  content: 'Pinned';
  color: var(--blue-500);
  font-size: 10px;
  margin-left: 8px
}

.forum-post-link.spoiler-tag {
  font-size: .75em;
  padding-left: 34px;
  position: relative
}

.forum-post-link.spoiler-tag:before {
  content: url("../img/icons/spoiler-icon.png");
  margin-right: 10px;
  position: absolute;
  top: -4px;
  left: 0
}

.forum-post-link.spoiler-tag:after {
  content: 'Spoilers';
  color: var(--brand-500);
  font-size: 10px;
  margin-left: 8px
}

.forum-post-timestamp {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em
}

.forum-category-text {
  color: var(--color-text-secondary)
}

.forum-category-text:before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 2px solid var(--gray-900);
  margin-right: 6px
}

.forum-category-text.blue:before {
  border-color: var(--blue-500)
}

.forum-category-text.red:before {
  border-color: var(--brand-500)
}

.forum-category-text.violet:before {
  border-color: var(--violet-500)
}

.forum-category-text.green:before {
  border-color: var(--green-500)
}

.forum-category-text.cyan:before {
  border-color: var(--cyan-500)
}

.forum-category-text.yellow:before {
  border-color: var(--amber-500)
}

.forum-user-list {
  display: flex;
  flex-flow: row wrap
}

.forum-user-list > * {
  margin-right: 8px
}

.forum-user-list > *:last-child {
  margin-right: 0
}

.forum-post-tags {
  display: flex;
  flex-flow: row wrap
}

.forum-post-tags > * {
  margin-right: 6px
}

.forum-post-tags > *:last-child {
  margin-right: 0
}

.forum-tag-button {
  height: 24px;
  padding: 0 12px;
  border-radius: 200px;
  background-color: var(--gray-900);
  color: var(--white);
  font-size: .625em;
  line-height: 24px
}

.forum-tag-button.red {
  background-color: var(--brand-500)
}

.forum-tag-button.cyan {
  background-color: var(--cyan-500)
}

.topic-wrap {
  position: relative
}

.topic-wrap .topic-scroll-wrap {
  position: absolute;
  top: 0;
  left: 1030px
}

.topic-wrap .topic-scroll-wrap .topic-scroll-date-start, .topic-wrap .topic-scroll-wrap .topic-scroll-date-end, .topic-wrap .topic-scroll-wrap .topic-scroll-date-current {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em
}

.topic-wrap .topic-scroll-wrap .topic-action {
  margin-top: 22px
}

.topic-wrap .topic-scroll-wrap .topic-scroll {
  height: 220px;
  padding-left: 20px;
  margin: 14px 0;
  border-left: 1px solid var(--color-border);
  position: relative
}

.topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info {
  -o-transform: translate(0, 46px);
  -moz-transform: translate(0, 46px);
  -ms-transform: translate(0, 46px);
  -webkit-transform: translate(0, 46px);
  transform: translate(0, 46px);
  position: relative
}

.topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info:before {
  content: '';
  display: block;
  width: 3px;
  height: 40px;
  border-radius: 200px;
  background-color: var(--blue-500);
  position: absolute;
  top: 3px;
  left: -22px
}

.topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info .topic-scroll-counter {
  color: var(--color-text-primary);
  line-height: 1em
}

.topic-wrap .topic-scroll-wrap .topic-scroll .topic-scroll-info .topic-scroll-date-current {
  margin-top: 6px
}

.topic-wrap .topic-header {
  width: 83%
}

.topic-wrap .topic-header .topic-title {
  color: var(--color-text-primary);
  line-height: 28px
}

.topic-wrap .topic-header .forum-category-text {
  margin-top: 16px
}

.topic-wrap .topic-header .topic-info {
  margin-top: 16px;
  padding: 24px 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.topic-wrap .topic-header .topic-info > * {
  margin: 0 50px 24px 0
}

.topic-wrap .topic-header .topic-info > *:last-child {
  margin-right: 0
}

.topic-wrap .topic-body {
  width: 83%
}

.topic-wrap .topic-body .topic-comment {
  display: grid;
  grid-template-columns:15% 85%
}

.topic-wrap .topic-footer {
  padding: 60px 0 30px;
  border-bottom: 1px solid var(--color-border)
}

.topic-wrap .topic-footer .topic-footer-info {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.topic-wrap .topic-footer .topic-footer-info .topic-footer-icon {
  margin-right: 10px
}

.topic-wrap .topic-footer .topic-footer-info .topic-footer-text {
  color: var(--color-text-primary)
}

.topic-wrap .topic-footer .topic-footer-actions {
  display: flex;
  flex-flow: row wrap;
  margin-top: 60px
}

.topic-wrap .topic-footer .topic-footer-actions .button {
  padding: 0 50px 0 30px;
  margin: 0 8px 30px 0
}

.topic-wrap .topic-footer .topic-footer-actions .button .action-icon {
  margin-right: 12px;
  font-size: 14px;
  position: relative;
  top: 2px
}

.topic-wrap .topic-footer .topic-footer-actions .button:last-child {
  margin-right: 0
}

.topic-comment {
  padding-top: 36px;
  border-bottom: 1px solid var(--color-border)
}

.topic-comment .topic-comment-user {
  width: 80px;
  margin-left: 20px
}

.topic-comment .topic-comment-user .topic-comment-user-text {
  margin-top: 12px;
  color: var(--color-text-primary);
  text-align: center
}

.topic-comment .topic-comment-user .badge-list {
  margin: 14px auto 0
}

.topic-comment .topic-comment-content {
  padding: 12px 0 40px
}

.topic-comment .topic-comment-content .topic-comment-content-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-username {
  color: var(--color-text-primary);
  line-height: 1em
}

.topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-info {
  display: flex;
  flex-flow: row wrap
}

.topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-info .topic-comment-reply-user {
  position: relative;
  top: -6px
}

.topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-info .topic-comment-timestamp {
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em
}

.topic-comment .topic-comment-content .topic-comment-content-header + .topic-comment-text {
  margin-top: 34px
}

.topic-comment .topic-comment-content .topic-comment-text {
  margin-top: 40px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.topic-comment .topic-comment-content .topic-comment-quote {
  margin-top: 36px;
  padding: 30px 34px;
  background-color: #f4f4f4;
  position: relative
}

.topic-comment .topic-comment-content .topic-comment-quote:before {
  content: '"';
  width: 20px;
  height: 18px;
  padding-top: 2px;
  background-color: var(--brand-500);
  color: var(--white);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0
}

.topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-user {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-user .user-avatar {
  margin-right: 8px
}

.topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-user .topic-comment-quote-user-name {
  color: var(--color-text-primary);
  line-height: 1em
}

.topic-comment .topic-comment-content .topic-comment-quote .topic-comment-quote-text {
  margin-top: 22px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.topic-comment .topic-comment-content .widget-media-wrap {
  margin-top: 40px
}

.topic-comment .topic-comment-actions {
  padding: 26px 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.topic-actions {
  display: flex;
  flex-flow: row wrap
}

.topic-actions .topic-action {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 0 20px 26px 0
}

.topic-actions .topic-action.inverted .topic-action-icon {
  order: 2
}

.topic-actions .topic-action.inverted .topic-action-text {
  margin: 0 12px 0 0;
  order: 1
}

.topic-actions .topic-action:last-child {
  margin-right: 0
}

.topic-actions .topic-action .topic-action-text {
  margin: 0 0 0 12px;
  color: var(--color-text-muted);
  font-size: .6875em;
  line-height: 1em
}

.topic-comment-reply-user {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.topic-comment-reply-user + .form-wrap {
  margin-top: 30px
}

.topic-comment-reply-user .topic-comment-reply-icon {
  margin-right: 10px;
  color: var(--gray-300);
  font-size: 14px
}

.topic-comment-reply-user .user-avatar {
  margin-right: 8px
}

.topic-comment-reply-user .topic-comment-reply-name {
  margin-right: 16px;
  color: var(--color-text-primary);
  line-height: 1em
}

.badge-list {
  display: flex;
  flex-flow: row wrap
}

.badge-list > * {
  margin: 0 10px 10px 0
}

.badge-list > *:last-child {
  margin-right: 0
}

.badge-list.small {
  width: 66px;
  justify-content: space-between
}

.badge-list.small > * {
  margin: 0 0 6px 0
}

.badge-item {
  padding: 0 16px;
  position: relative
}

.badge-item > .badge-img {
  position: absolute;
  top: 52px;
  right: 57px
}

.badge-item.hoverable .badge-img-wrap .badge-img.unlocked {
  opacity: 0;
  visibility: hidden
}

.badge-item.hoverable:hover .badge-img-wrap .badge-img.locked {
  opacity: 0;
  visibility: hidden
}

.badge-item.hoverable:hover .badge-img-wrap .badge-img.unlocked {
  opacity: 1;
  visibility: visible
}

.badge-item .badge-img-wrap {
  height: 130px;
  position: relative
}

.badge-item .badge-img-wrap .badge-img {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -40px;
  transition: all .3s ease-in-out
}

.badge-item .badge-item-title {
  color: var(--color-text-primary);
  text-align: center
}

.badge-item .badge-item-text {
  margin-top: 30px;
  text-align: center
}

.badge-item .progress-badge-wrap {
  width: 160px;
  margin: 54px auto 0
}

@media screen and (max-width: 1260px) {
  .topic-wrap .topic-scroll-wrap {
    display: none
  }

  .topic-wrap .topic-header {
    width: 100%
  }

  .topic-wrap .topic-body {
    width: 100%
  }

  .topic-wrap .topic-body .topic-comment {
    display: block
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user {
    width: 100%;
    margin-left: 0
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user .topic-comment-user-text {
    width: 80px
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user .badge-list {
    justify-content: flex-start
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user .badge-list > * {
    margin-right: 8px
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user .badge-list > *:last-child {
    margin-right: 0
  }

  .topic-wrap .topic-body .topic-comment .topic-comment-user .badge-list.small {
    width: 100%
  }
}

@media screen and (max-width: 960px) {
  .topic-comment .topic-comment-content .topic-comment-content-header {
    display: block
  }

  .topic-comment .topic-comment-content .topic-comment-content-header .topic-comment-info {
    margin-top: 20px
  }
}

.profile-header {
  min-height: 126px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.profile-header > .button {
  padding: 0 34px;
  margin-top: 26px
}

.profile-user {
  padding-left: 116px;
  position: relative
}

.profile-user .user-avatar {
  position: absolute;
  top: 0;
  left: 0
}

.profile-user .profile-user-name {
  margin-top: 6px;
  color: var(--color-text-primary);
  line-height: 1em
}

.profile-user .profile-user-info {
  margin-top: 8px;
  color: var(--color-text-primary)
}

.profile-user .profile-user-info .highlight {
  color: var(--color-text-muted)
}

.profile-user .badge-list {
  margin-top: 20px
}

.topic-link-items .topic-link-item {
  margin-bottom: 20px
}

.topic-link-items .topic-link-item:last-child {
  margin-bottom: 0
}

.topic-link-item .topic-link-item-info {
  display: flex;
  flex-flow: row wrap
}

.topic-link-item .topic-link-item-info .topic-link-item-timestamp {
  line-height: 1em
}

.topic-link-item .topic-link-item-info .topic-link-item-stat {
  line-height: 1em
}

.topic-link-item .topic-link-item-info .topic-link-item-stat .like-icon, .topic-link-item .topic-link-item-info .topic-link-item-stat .dislike-icon, .topic-link-item .topic-link-item-info .topic-link-item-stat .reply-icon {
  margin: 0 8px 0 12px;
  font-size: 12px;
  font-weight: 700
}

.topic-link-item .topic-link-item-info .topic-link-item-stat .like-icon {
  color: var(--cyan-500)
}

.topic-link-item .topic-link-item-info .topic-link-item-stat .dislike-icon {
  color: var(--brand-500)
}

.topic-link-item .topic-link-item-info .topic-link-item-stat .reply-icon {
  color: var(--blue-500)
}

.topic-link-item .topic-link-item-title {
  margin-top: 12px;
  color: var(--color-text-primary)
}

.user-link-items .user-link-item {
  margin-bottom: 16px
}

.user-link-items .user-link-item:last-child {
  margin-bottom: 0
}

.user-link-item {
  height: 60px;
  padding: 8px 0 0 76px;
  position: relative
}

.user-link-item .user-avatar {
  position: absolute;
  top: 0;
  left: 0
}

.user-link-item .user-link-item-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.user-link-item .user-link-item-stat {
  margin-top: 12px;
  line-height: 1em
}

.user-link-item .user-link-item-stat .like-icon, .user-link-item .user-link-item-stat .dislike-icon, .user-link-item .user-link-item-stat .reply-icon {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700
}

.user-link-item .user-link-item-stat .like-icon {
  color: var(--cyan-500)
}

.user-link-item .user-link-item-stat .dislike-icon {
  color: var(--brand-500)
}

.user-link-item .user-link-item-stat .reply-icon {
  color: var(--blue-500)
}

.activity-items .activity-item:last-child {
  border-bottom: 1px solid var(--color-border)
}

.activity-item {
  padding: 26px 0 30px 72px;
  border-top: 1px solid var(--color-border);
  position: relative
}

.activity-item .activity-item-dropdown-button {
  width: 10px;
  height: 20px;
  position: absolute;
  top: 28px;
  right: 0;
  cursor: pointer
}

.activity-item .activity-item-dropdown-button .arrow-icon {
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}

.activity-item > .user-avatar {
  position: absolute;
  top: 26px;
  left: 0
}

.activity-item .activity-item-row {
  padding-right: 26px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.activity-item .activity-item-row .activity-item-title {
  margin-top: 4px;
  color: var(--color-text-primary)
}

.activity-item .activity-item-row .activity-item-title .highlight.red {
  color: var(--brand-500)
}

.activity-item .activity-item-row .activity-item-timestamp {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .75em;
  line-height: 1em
}

.activity-item .forum-category-text {
  display: inline-block;
  margin-top: 10px
}

.activity-item .activity-item-text {
  margin-top: 20px
}

.activity-item .activity-item-text .highlight.red {
  color: var(--brand-500)
}

.activity-item .activity-item-stat {
  margin-top: 18px;
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.activity-item .activity-item-stat .like-icon, .activity-item .activity-item-stat .dislike-icon, .activity-item .activity-item-stat .reply-icon {
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700
}

.activity-item .activity-item-stat .like-icon {
  color: var(--cyan-500)
}

.activity-item .activity-item-stat .dislike-icon {
  color: var(--brand-500)
}

.activity-item .activity-item-stat .reply-icon {
  color: var(--blue-500)
}

.notification-items.bordered .notification-item {
  border-top: 1px solid var(--color-border)
}

.notification-items.bordered .notification-item:last-child {
  border-bottom: 1px solid var(--color-border)
}

.notification-items.padded .notification-item {
  padding-top: 36px;
  padding-bottom: 36px
}

.notification-items.padded .notification-item .notification-item-icon {
  top: 34px
}

.notification-item {
  padding-left: 22px;
  position: relative
}

.notification-item.medium {
  padding-left: 40px
}

.notification-item.medium .notification-item-icon {
  left: 6px;
  font-size: 18px
}

.notification-item .notification-item-icon {
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 700;
  line-height: 1em;
  position: absolute;
  top: 0;
  left: 0
}

.notification-item .notification-item-icon.read {
  color: var(--gray-300)
}

.notification-item .notification-item-text {
  color: var(--color-text-muted);
  line-height: 14px
}

.notification-item .notification-item-text .highlight {
  color: var(--color-text-primary)
}

.more-items-loader {
  display: block;
  width: 100%;
  height: 38px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.more-items-loader .square {
  width: 2px;
  height: 2px;
  background-color: var(--gray-900);
  margin-right: 4px
}

.more-items-loader .square:last-child {
  margin-right: 0
}

.more-items-loader.medium {
  height: 124px
}

.more-items-loader.medium .square {
  width: 4px;
  height: 4px
}

.profile-messages-actions {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.profile-messages-actions .action-wrap {
  display: flex;
  flex-flow: row wrap
}

.profile-messages-actions .action-wrap .button {
  padding: 0 34px;
  margin-right: 8px
}

.profile-messages-actions .action-wrap .button:last-child {
  margin-right: 0
}

@media screen and (max-width: 680px) {
  .profile-header {
    display: block;
    padding-bottom: 30px;
    text-align: center
  }

  .profile-header .profile-user {
    padding: 0
  }

  .profile-header .profile-user .user-avatar {
    display: block;
    margin: 0 auto;
    position: static
  }

  .profile-header .profile-user .profile-user-name, .profile-header .profile-user .profile-user-info {
    text-align: center;
    margin-top: 12px
  }

  .profile-header .profile-user .badge-list {
    justify-content: center
  }

  .profile-header > .button {
    display: inline-block
  }

  .activity-item {
    padding-left: 0
  }

  .activity-item > .user-avatar {
    position: static
  }

  .activity-item .activity-item-row .activity-item-title {
    margin-top: 10px
  }

  .activity-item .activity-item-row .activity-item-timestamp {
    margin-top: 10px
  }

  .activity-item .forum-category-text {
    margin-top: 16px
  }
}

.reviews-wrap {
  padding: 80px 200px
}

.reviews-wrap .reviews-header {
  position: relative
}

.reviews-wrap .reviews-header .reviews-header-title {
  color: var(--color-text-primary);
  line-height: 1em
}

.reviews-wrap .reviews-header .reviews-header-rating {
  margin-top: 20px;
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.reviews-wrap .reviews-header .reviews-header-rating .rating-ornament {
  padding: 0
}

.reviews-wrap .reviews-header .reviews-header-rating .reviews-header-rating-text {
  margin-left: 10px;
  color: var(--color-text-muted);
  line-height: 1em
}

.reviews-wrap .reviews-header .button {
  position: absolute;
  top: 0;
  right: 0
}

.reviews-wrap .reviews-header .rating-blocks {
  margin-top: 50px
}

.reviews-wrap .reviews-body {
  margin-top: 80px
}

.reviews-wrap .reviews-body .reviews-body-title {
  color: var(--color-text-primary)
}

.reviews-wrap .reviews-body .user-reviews {
  margin-top: 40px
}

.reviews-wrap .reviews-body .load-more-wrap {
  margin-top: 60px
}

.rating-blocks {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.rating-block .rating-block-title {
  margin-bottom: 60px;
  color: var(--color-text-primary);
  line-height: 1em
}

.rating-block-bars .progress-bar {
  margin-bottom: 40px
}

.rating-block-bars .progress-bar:last-child {
  margin-bottom: 0
}

.user-reviews {
  border-top: 1px solid var(--color-border)
}

.user-reviews .user-review {
  border-bottom: 1px solid var(--color-border)
}

.user-review {
  min-height: 346px;
  padding: 46px 310px 46px 100px;
  position: relative
}

.user-review .user-avatar {
  position: absolute;
  top: 36px;
  left: 0
}

.user-review .user-review-title {
  color: var(--color-text-primary)
}

.user-review .rating-ornament {
  padding: 0;
  position: absolute;
  top: 46px;
  right: 198px
}

.user-review .user-review-info {
  margin-top: 10px;
  color: var(--color-text-muted)
}

.user-review .user-review-info .highlight {
  color: var(--color-text-primary)
}

.user-review .user-review-text {
  margin-top: 30px;
  font-size: .875em;
  line-height: 1.8571428571em
}

.user-review .rating-block-bars {
  position: absolute;
  top: 100px;
  right: 0
}

.user-review .user-review-row {
  margin-top: 36px;
  display: flex;
  flex-flow: row wrap
}

.user-review .user-review-timestamp, .user-review .user-review-button {
  color: var(--color-text-muted);
  font-size: .6875em;
  line-height: 1em
}

.user-review .user-review-button {
  margin-left: 16px
}

.user-review .user-review-button:hover {
  color: var(--brand-500)
}

.specifications-wrap {
  padding: 80px 200px
}

.inventory-open .inventory-checkout-button {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  margin-top: 60px
}

.inventory-open-header {
  height: 40px;
  margin-bottom: 32px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap
}

.inventory-open-header .inventory-open-header-title {
  color: var(--color-text-primary);
  line-height: 40px
}

.inventory-open-header .inventory-open-header-title:first-child {
  width: 400px
}

.inventory-open-header.no-space {
  margin-bottom: 0
}

.inventory-open-body {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border)
}

.inventory-open-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.inventory-open-row .inventory-open-actions {
  width: 900px
}

.inventory-open-row .inventory-open-totals {
  width: 270px
}

.inventory-open-action {
  height: 76px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  border-bottom: 1px solid var(--color-border)
}

.inventory-open-action.medium {
  height: 82px
}

.inventory-open-action > .button {
  margin-left: 16px
}

.inventory-open-action > .button:first-child {
  margin-left: 0
}

.inventory-open-action .inventory-open-row-text {
  color: var(--color-text-primary)
}

.inventory-open-action .inventory-open-row-text .amount {
  margin-left: 45px;
  font-family: "Roboto", sans-serif;
  font-size: 14px
}

.inventory-open-action .inventory-open-row-text .amount .currency {
  margin-right: 4px
}

.inventory-open-action .form-item {
  width: 635px;
  margin-left: 14px;
  display: flex;
  flex-flow: row wrap
}

.inventory-open-action .form-item.multiple-items input[type="text"] {
  width: 160px
}

.inventory-open-action .form-item.multiple-items .select-block {
  width: 220px
}

.inventory-open-action .form-item > * {
  margin-left: 16px
}

.inventory-open-action .form-item > *:first-child {
  margin-left: 0
}

.inventory-open-total {
  height: 76px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 1px solid var(--color-border)
}

.inventory-open-total.small {
  height: 64px
}

.inventory-open-total.medium {
  height: 82px
}

.inventory-open-total .inventory-open-row-text {
  color: var(--color-text-primary)
}

.inventory-open-total .inventory-open-row-text .amount {
  margin-left: 45px;
  font-family: "Roboto", sans-serif;
  font-size: 14px
}

.inventory-open-total .inventory-open-row-text .amount .currency {
  margin-right: 4px
}

.information-header {
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center
}

.information-header .information-header-title {
  color: var(--color-text-primary)
}

.information-header .information-header-title a {
  color: var(--violet-500)
}

.information-header .information-header-text {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: .625em;
  line-height: 1em
}

.payment-methods .payment-method {
  border-bottom: 1px solid var(--color-border)
}

.payment-method {
  padding-top: 32px
}

.payment-method .radio-item {
  margin-bottom: 28px
}

.payment-method .radio-item .rl-label {
  font-size: .75em;
  padding-top: 0
}

.payment-method .payment-method-content {
  padding: 0 26px 26px
}

.order-result-banner .order-result-banner-img {
  width: 358px;
  height: 256px;
  margin: 0 auto
}

.order-result-banner .order-result-banner-title {
  margin-top: 50px;
  color: var(--color-text-primary);
  line-height: 58px;
  text-align: center
}

.order-result-banner .order-result-banner-text {
  margin-top: 20px;
  color: var(--color-text-muted);
  text-align: center
}

.order-result-banner .order-result-banner-text .highlight {
  color: var(--color-text-primary)
}

.wishlist-items {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border)
}

.wishlist-item-preview {
  width: 170px;
  height: 170px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-raised);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center
}

.wishlist-item-preview .wishlist-icon {
  color: var(--gray-300);
  font-size: 30px
}

.inventory-compare-wrap {
  height: 916px;
  position: relative;
  overflow: auto hidden
}

.inventory-compare-wrap .inventory-compare {
  position: absolute;
  top: 0;
  left: 0
}

.inventory-compare {
  display: flex;
  flex-flow: row nowrap
}

.inventory-compare .inventory-compare-title {
  color: var(--color-text-primary)
}

.inventory-compare .inventory-compare-title.medium {
  font-size: .75em
}

.inventory-compare .inventory-compare-title.v2 {
  font-family: "Roboto", sans-serif;
  font-size: .875em
}

.inventory-compare .inventory-compare-title.v2 .currency {
  margin-right: 4px
}

.inventory-compare .inventory-compare-title.v2 .before {
  margin-right: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  position: relative
}

.inventory-compare .inventory-compare-title.v2 .before:before {
  content: '';
  width: 100%;
  height: 1px;
  background: var(--gray-500);
  position: absolute;
  bottom: 6px;
  left: 0
}

.inventory-compare .inventory-compare-title.light {
  color: var(--color-text-muted)
}

.inventory-compare .inventory-compare-title.violet {
  color: var(--violet-500)
}

.inventory-compare .inventory-compare-title.red {
  color: var(--brand-500)
}

.inventory-compare .rating-ornament {
  padding: 0
}

.inventory-compare .counter {
  width: 120px
}

.inventory-compare-header-item {
  width: 90px;
  height: 42px;
  padding-top: 16px;
  border-bottom: 1px solid var(--color-border)
}

.inventory-compare-header-item.medium {
  height: 70px
}

.inventory-compare-header-item.big {
  height: 154px
}

.inventory-compare-header-item.large {
  height: 280px
}

.inventory-compare-body {
  display: flex;
  flex-flow: row nowrap
}

.inventory-compare-item {
  width: 270px;
  border-left: 1px solid var(--color-border)
}

.inventory-compare-item .inventory-compare-item-row {
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.inventory-compare-item .inventory-compare-item-row.medium {
  height: 70px
}

.inventory-compare-item .inventory-compare-item-row.big {
  height: 154px
}

.inventory-compare-item .inventory-compare-item-row.large {
  height: 280px
}

.inventory-compare-item .inventory-compare-item-row.centered {
  justify-content: center
}

.inventory-compare-item .inventory-compare-item-row .inventory-compare-img {
  width: 236px;
  height: 246px
}

@media screen and (max-width: 1260px) {
  .reviews-wrap {
    padding: 80px 0
  }

  .reviews-wrap .reviews-header .button {
    position: static;
    margin-top: 20px
  }

  .reviews-wrap .reviews-header .rating-blocks {
    justify-content: flex-start
  }

  .reviews-wrap .reviews-header .rating-blocks .rating-block:first-child {
    margin-right: 40px
  }

  .specifications-wrap {
    padding: 80px 0
  }

  .inventory-open .inventory-open-header .inventory-open-header-title:first-child {
    width: 100%
  }

  .inventory-open .inventory-open-header .inventory-open-header-title:nth-child(2) {
    display: none
  }

  .inventory-open .inventory-open-body {
    display: block
  }

  .inventory-open .inventory-open-body .inventory-items-preview {
    margin: 0 auto
  }

  .inventory-open-row {
    display: block
  }

  .inventory-open-row .inventory-open-actions {
    width: 100%
  }

  .inventory-open-row .inventory-open-totals {
    width: 100%
  }

  .inventory-open-total, .inventory-open-action {
    height: auto;
    padding: 20px 0
  }

  .inventory-open-action {
    display: block
  }

  .inventory-open-action .form-item {
    width: 100%;
    margin: 16px 0
  }

  .inventory-open-action .form-item.multiple-items input[type="text"] {
    width: 100%
  }

  .inventory-open-action .form-item.multiple-items .select-block {
    width: 100%
  }

  .inventory-open-action .form-item > * {
    margin: 0 0 16px 0
  }

  .inventory-open-action .form-item > *:last-child {
    margin-bottom: 0
  }

  .inventory-open-action .form-item + .button {
    margin-left: 0
  }
}

@media screen and (max-width: 960px) {
  .reviews-wrap .reviews-header .rating-blocks {
    display: block
  }

  .reviews-wrap .reviews-header .rating-blocks .rating-block:first-child {
    margin: 0 0 40px 0
  }

  .user-review {
    padding: 46px 0
  }

  .user-review .user-avatar {
    position: static;
    margin-bottom: 20px
  }

  .user-review .rating-ornament {
    position: static;
    margin-top: 4px
  }

  .user-review .rating-block-bars {
    position: static;
    margin-top: 60px
  }
}

@media screen and (max-width: 680px) {
  .order-result-banner .order-result-banner-img {
    width: 268.5px;
    height: 192px
  }

  .order-result-banner .order-result-banner-title {
    font-size: 2.5em
  }
}

.contact-info-preview.negative .contact-info-preview-text {
  color: #b8b8b8
}

.contact-info-preview.negative .contact-info-preview-text .highlighted {
  color: var(--white)
}

.contact-info-preview.negative .contact-info-preview-sign .contact-info-preview-sign-text {
  color: var(--white)
}

.contact-info-preview.negative .contact-info-preview-email-wrap .contact-info-preview-email {
  color: var(--white)
}

.contact-info-preview .contact-info-preview-text {
  font-size: .75em;
  line-height: 1.8333333333em
}

.contact-info-preview .contact-info-preview-sign {
  height: 50px;
  margin-top: 22px;
  padding: 12px 80px 0 62px;
  position: relative
}

.contact-info-preview .contact-info-preview-sign .bubble-ornament {
  position: absolute;
  top: 0;
  left: 0
}

.contact-info-preview .contact-info-preview-form {
  margin-top: 20px
}

.contact-info-preview .contact-info-preview-email-wrap {
  margin-top: 24px;
  padding: 1px 0 0 56px;
  position: relative
}

.contact-info-preview .contact-info-preview-email-wrap .email-icon {
  color: var(--green-500);
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 12px
}

.contact-info-preview .contact-info-preview-email-wrap .contact-info-preview-email {
  display: inline-block
}

.footer-top-wrap {
  background-color: #252627
}

.footer-top-brand {
  padding: 40px 0 40px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.footer-top-brand .logo {
  margin-top: 34px
}

.footer-top-brand .social-links {
  margin-top: 40px
}

.footer-top-widgets {
  padding: 60px 0 70px
}

.footer-top-widget .post-preview-showcase, .footer-top-widget .product-preview-showcase {
  margin-top: 26px
}

.footer-top-widget .link-section .link-list {
  margin-top: 22px
}

.footer-top-widget .contact-info-preview {
  margin-top: 22px
}

.footer-top-widget .tweets-preview-widget {
  margin-top: 23px
}

.footer-top-widget .tweets-preview-widget .loader {
  border-bottom-color: var(--gray-500);
  border-right-color: var(--gray-500);
  border-left-color: var(--gray-500)
}

.footer-bottom-wrap {
  background-color: var(--gray-950)
}

.footer-bottom {
  min-height: 70px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center
}

.footer-bottom .footer-bottom-text {
  color: #b8b8b8;
  font-size: .75em
}

.footer-bottom .footer-bottom-text a {
  color: #b8b8b8
}

.footer-bottom .footer-bottom-text .brand {
  color: var(--white)
}

.footer-bottom .footer-bottom-text .brand .highlighted {
  color: var(--blue-500)
}

.footer-bottom .footer-bottom-text .separator {
  margin: 0 8px
}

@media screen and (max-width: 1260px) {
  .footer-top-brand {
    flex-direction: column;
    align-items: center
  }

  .footer-top-brand .sponsors-slider-wrap {
    order: 2;
    margin-top: 30px
  }
}

@media screen and (max-width: 680px) {
  .footer-bottom {
    min-height: 100px;
    flex-direction: column;
    justify-content: space-evenly
  }

  .footer-bottom .footer-bottom-text:first-child {
    order: 1
  }
}

.information-box {
  width: 100%;
  height: 60px;
  padding: 0 26px 0 70px;
  border: 1px solid var(--color-border);
  border-radius: 200px;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.information-box.alert .information-box-icon {
  background-color: var(--blue-500)
}

.information-box.alert .information-box-message .highlight {
  color: var(--blue-500)
}

.information-box.error .information-box-icon {
  background-color: var(--brand-500)
}

.information-box.error .information-box-message .highlight {
  color: var(--brand-500)
}

.information-box.success .information-box-icon {
  background-color: var(--cyan-500)
}

.information-box.success .information-box-message .highlight {
  color: var(--cyan-500)
}

.information-box .information-box-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--gray-900);
  position: absolute;
  top: 6px;
  left: 6px
}

.information-box .information-box-icon .check-icon, .information-box .information-box-icon .cross-cb-icon, .information-box .information-box-icon .exclamation-icon {
  fill: var(--white);
  position: absolute
}

.information-box .information-box-icon .check-icon {
  top: 16px;
  left: 15px
}

.information-box .information-box-icon .cross-cb-icon {
  top: 16px;
  left: 16px
}

.information-box .information-box-icon .exclamation-icon {
  top: 14px;
  left: 21px
}

.information-box .information-box-message, .information-box .information-box-action {
  line-height: 60px
}

.information-box .information-box-message {
  color: var(--color-text-primary)
}

.information-box .information-box-action {
  color: var(--blue-500)
}

@media screen and (max-width: 1260px) {
  .information-box {
    display: block;
    height: auto;
    padding: 45px 40px 30px;
    border-radius: 24px
  }

  .information-box .information-box-icon {
    top: -24px;
    left: 50%;
    margin-left: -24px
  }

  .information-box .information-box-message, .information-box .information-box-action {
    display: block;
    text-align: center
  }

  .information-box .information-box-message {
    line-height: 16px
  }

  .information-box .information-box-action {
    margin-top: 20px;
    line-height: 1em
  }
}

.shortcode-section {
  margin-bottom: 76px
}

.shortcode-section:last-child {
  margin-bottom: 0
}

.shortcode-section .shortcode-section-title {
  margin-bottom: 36px;
  color: var(--color-text-primary)
}

.shortcode-section .shortcode-section-title.bottom-space {
  margin-bottom: 16px
}

.shortcode-section .shortcode-section-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around
}

.shortcode-section .shortcode-section-items.between {
  justify-content: space-between
}

.shortcode-section .shortcode-section-items .shortcode-color, .shortcode-section .shortcode-section-items .button, .shortcode-section .shortcode-section-items .shortcode-font, .shortcode-section .shortcode-section-items .information-box {
  margin-top: 20px
}

.shortcode-section .shortcode-section-items .shortcode-form {
  margin-top: 40px
}

.shortcode-color {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 14px 0 0 14px
}

.shortcode-color.color-black-lighter {
  background-color: var(--gray-900)
}

.shortcode-color.color-gray-dark {
  background-color: var(--gray-600)
}

.shortcode-color.color-gray {
  background-color: var(--gray-500)
}

.shortcode-color.color-white-darker {
  background-color: var(--gray-300)
}

.shortcode-color.color-violet {
  background-color: var(--violet-500)
}

.shortcode-color.color-blue {
  background-color: var(--blue-500)
}

.shortcode-color.color-cyan {
  background-color: var(--cyan-500)
}

.shortcode-color.color-green {
  background-color: var(--green-500)
}

.shortcode-color.color-yellow {
  background-color: var(--amber-500)
}

.shortcode-color.color-red {
  background-color: var(--brand-500)
}

.shortcode-color .shortcode-color-code {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  line-height: 62px;
  text-align: center
}

.shortcode-font.extrabold .shortcode-font-demo, .shortcode-font.extrabold .shortcode-font-family, .shortcode-font.extrabold .shortcode-font-weight {
  font-weight: 800
}

.shortcode-font.bold .shortcode-font-demo, .shortcode-font.bold .shortcode-font-family, .shortcode-font.bold .shortcode-font-weight {
  font-weight: 700
}

.shortcode-font.regular .shortcode-font-demo, .shortcode-font.regular .shortcode-font-family, .shortcode-font.regular .shortcode-font-weight {
  font-weight: 400
}

.shortcode-font.medium .shortcode-font-demo, .shortcode-font.medium .shortcode-font-family, .shortcode-font.medium .shortcode-font-weight {
  font-weight: 500
}

.shortcode-font.roboto .shortcode-font-demo, .shortcode-font.roboto .shortcode-font-family, .shortcode-font.roboto .shortcode-font-weight {
  font-family: "Roboto", sans-serif;
  text-transform: none
}

.shortcode-font .shortcode-font-demo {
  color: var(--color-text-primary);
  font-size: 6.875em;
  text-transform: none
}

.shortcode-font .shortcode-font-family {
  margin-top: 16px;
  color: var(--color-text-primary)
}

.shortcode-font .shortcode-font-weight {
  color: var(--color-text-muted)
}

.shortcode-form {
  width: 270px
}

.shortcode-form.medium {
  width: 570px
}

.shortcode-form .check-radio-items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between
}

.shortcode-form .check-item-list, .shortcode-form .radio-item-list {
  margin-top: 36px
}

@media screen and (max-width: 1260px) {
  .shortcode-section .shortcode-section-items .information-box {
    margin-top: 44px
  }

  .shortcode-section .shortcode-section-items .information-box:first-child {
    margin-top: 20px
  }
}

/*# sourceMappingURL=style.min.css.map */


/* Pagination Disabled State */
.page-navigation .slider-control.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.page-navigation .slider-control.disabled svg {
  opacity: 0.5;
}

/* Enhanced Markdown Formatting */
.post-content-formatted {
  color: #2b2b2b;
  font-size: 1.0625em;
  line-height: 1.75;
}

/* Comfortable, high-contrast body copy. The theme's default paragraph
   (color var(--gray-600), font-size .8125em) reads washed-out and cramped against the
   dark var(--gray-900) title, which is what makes the article body look "rough". */
.post-content-formatted p.post-open-text {
  margin: 0 0 1.6rem;
  color: #2b2b2b;
  font-size: 1rem;
  line-height: 1.8;
}

/* Lead paragraph gives the article a clear entry point. */
.post-content-formatted > p.post-open-text:first-of-type {
  margin-bottom: 1.8rem;
  color: #1b1b1b;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Section headings sit apart from body copy with a brand accent rule so the
   article reads as structured sections rather than one block of text. */
.post-content-formatted h1.post-open-subtitle,
.post-content-formatted h2.post-open-subtitle,
.post-content-formatted h3.post-open-subtitle,
.post-content-formatted h4.post-open-subtitle,
.post-content-formatted h5.post-open-subtitle,
.post-content-formatted h6.post-open-subtitle {
  margin: 2.75rem 0 1.1rem;
  padding-left: 14px;
  border-left: 4px solid var(--blue-500);
  color: #1c1d23;
  font-size: 1.4em;
  line-height: 1.25;
}

.post-content-formatted h3.post-open-subtitle,
.post-content-formatted h4.post-open-subtitle {
  font-size: 1.2em;
}

.post-content-formatted h5.post-open-subtitle,
.post-content-formatted h6.post-open-subtitle {
  font-size: 1.05em;
}

/* A heading right after the lead shouldn't push an extra-large gap. */
.post-content-formatted > p.post-open-text:first-of-type + .post-open-subtitle {
  margin-top: 1.5rem;
}

/* Branded pull-quote. The theme styles .quote-text as an uppercase Exo heading
   (it shares the big title selector), which is wrong for prose blockquotes. */
.post-open .post-content-formatted .post-open-quote {
  margin: 2.25rem 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid var(--violet-500);
  background: #f7f6fb;
}

.post-open .post-content-formatted .post-open-quote:before {
  display: none;
}

.post-open .post-content-formatted .quote-text {
  width: auto;
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Roboto", sans-serif;
  font-size: 1.0625rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  text-transform: none;
  text-align: left;
}

.post-content-formatted .bullet-list {
  margin: 1.5rem 0;
}

.post-content-formatted .bullet-list-item {
  margin-bottom: 0.8rem;
}

/* Grid layout for lists */
.post-content-formatted .bullet-list-grid ul,
.post-content-formatted .bullet-list-grid ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
}

.post-content-formatted .bullet-list-grid .bullet-list-item {
  margin-bottom: 0;
  align-items: flex-start;
}

.post-content-formatted .bullet-list-grid .bullet-list-item-text {
  color: #2b2b2b;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* Tablet: 2 columns */
@media screen and (max-width: 1024px) {
  .post-content-formatted .bullet-list-grid ul,
  .post-content-formatted .bullet-list-grid ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media screen and (max-width: 680px) {
  .post-content-formatted .bullet-list-grid ul,
  .post-content-formatted .bullet-list-grid ol {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

.post-content-formatted strong {
  color: #1c1d23;
  font-weight: 700;
}

.post-content-formatted em {
  font-style: italic;
}

.post-content-formatted a.post-link {
  color: var(--blue-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.post-content-formatted a.post-link:hover {
  color: var(--violet-500);
}

/* Code block styling to prevent overflow */
.post-content-formatted pre.post-code-block {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

.post-content-formatted code.post-code {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.85em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.post-content-formatted pre.post-code-block code {
  background: none;
  border: none;
  padding: 0;
}

/* Constrain news post body to prevent overflow (not affecting esports v6 layout) */
.post-open .post-open-content .post-open-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}

/* Constrain regular news posts to prevent overflow */
.post-open .post-open-content .post-content-formatted {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===== Article header polish (cover, tag, title, byline) ===== */

/* Give the cover a softer, more finished frame than a bare rectangle. The
   shadow lives on the outermost frame: news/post.gjs has no wrapper (the
   figure is outermost), while esports-post.gjs wraps the figure in
   .post-open-img-wrap whose overflow:hidden would otherwise clip a shadow
   on the inner figure. Targeting both keeps the shadow visible everywhere
   without doubling it (the inner one is clipped wherever a wrapper exists). */
.post-open .post-open-img-wrap,
.post-open .post-open-img {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(20, 22, 34, 0.18);
}

/* Tag chip + title rhythm: a touch more breathing room under the cover. */
.post-open .gaming-news .tag-list {
  margin: 28px 0 14px;
}

.post-open .post-open-content .post-open-title {
  letter-spacing: -0.4px;
}

/* Byline: a clean avatar with a subtle ring instead of an empty/broken box,
   and readable, on-brand meta text. */
.post-open .post-author-info-wrap {
  margin-top: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #ededf1;
}

.post-open .post-author-info-wrap .user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px #e4e4ea;
}

.post-open .post-author-info-wrap .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-open .post-author-info {
  color: #8a8a93;
}

.post-open .post-author-info .post-author {
  color: var(--blue-500);
}

.post-open .post-author-info .separator {
  color: #d2d2d8;
}

/* Mobile: relax the heavy desktop side padding on prose so lines aren't
   pinched, and ease the lead/heading scale down a notch. */
@media screen and (max-width: 680px) {
  .post-content-formatted {
    font-size: 1em;
  }

  .post-content-formatted > p.post-open-text:first-of-type {
    font-size: 1.08rem;
  }

  .post-content-formatted h1.post-open-subtitle,
  .post-content-formatted h2.post-open-subtitle {
    font-size: 1.25em;
  }
}

/* Mobile Article Description Truncation */
@media screen and (max-width: 1260px) {
  .post-preview .post-preview-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 3);
  }
  
  /* Make Twitch streams wider on mobile */
  .stream-preview {
    max-width: none;
    margin: 0 -15px 20px -15px;
  }
  
  .stream-preview .stream-preview-streamer {
    margin: 0 -15px 0 -15px;
    width: calc(100% + 30px);
    padding: 14px 15px 12px 15px;
  }
  
  .stream-preview .widget-media {
    margin: 0 -15px 0 -15px;
    width: calc(100% + 30px);
  }
  
  .stream-preview .widget-media.small {
    margin: 0 -15px 0 -15px;
    width: calc(100% + 30px);
  }
  
  .stream-preview .widget-media iframe {
    width: 100% !important;
    height: 200px !important;
  }
  
  /* Hide any potential overlay text that might leak through */
  .stream-preview .widget-media {
    overflow: hidden;
    position: relative;
  }
}

@media screen and (max-width: 768px) {
  .post-preview .post-preview-text {
    -webkit-line-clamp: 2;
    max-height: calc(1.4em * 2);
  }
  
  /* Further optimize streams for small mobile */
  .stream-preview {
    margin: 0 -20px 20px -20px;
  }
  
  .stream-preview .stream-preview-streamer {
    margin: 0 -20px 0 -20px;
    width: calc(100% + 40px);
    padding: 14px 12px 12px 12px;
  }
  
  .stream-preview .widget-media {
    margin: 0 -20px 0 -20px;
    width: calc(100% + 40px);
  }
  
  .stream-preview .widget-media.small {
    margin: 0 -20px 0 -20px;
    width: calc(100% + 40px);
    overflow: visible;
  }
  
  .stream-preview .widget-media iframe {
    height: 180px !important;
  }
}

/* Mobile Navigation Styles */

/* Mobile top bar with gradient for search and menu */
.mobile-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

/* Mobile bottom navigation bar */
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgba(28, 29, 35, 0.95);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 8px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Top bar buttons */
.mobile-menu-button,
.mobile-search-button {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-menu-button:hover,
.mobile-search-button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.mobile-menu-button:active,
.mobile-search-button:active {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(0);
}

/* Icons in top bar */
.mobile-menu-button .menu-pull-icon,
.mobile-search-button .search-icon {
  width: 20px;
  height: 20px;
  fill: white;
}

/* Fix search icon positioning */
.mobile-search-button .search-icon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Bottom navigation links */
.mobile-nav-link {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6px 4px 4px 4px;
  text-decoration: none;
  color: white;
  gap: 1px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.mobile-nav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.mobile-nav-link.active {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.mobile-nav-link.active .nav-icon,
.mobile-nav-link.active .nav-label {
  transform: scale(1.1);
}

/* Bottom navigation icons and labels */
.mobile-nav-link .nav-icon {
  width: 18px;
  height: 18px;
  fill: white;
  transition: transform 0.3s ease;
}

.mobile-nav-link .nav-label {
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: transform 0.3s ease;
}

/* Show mobile navigation on mobile devices */
@media screen and (max-width: 1080px) {
  .mobile-top-bar,
  .mobile-nav-bar {
    display: flex;
  }
  
  /* Add padding for fixed top bar */
  body {
    padding-top: 60px;
  }
  
  /* Add padding for fixed bottom bar */
  .content-wrap {
    padding-bottom: 90px;
  }
  
  /* Hide desktop navigation */
  .navigation-wrap {
    display: none;
  }
  
  /* Hide broken login and language elements */
  .top-user-navigation,
  .locale-switcher {
    display: none;
  }
}