*,
*:after,
*:before {
  box-sizing: inherit
}

html {
  box-sizing: border-box;
  font-size: 62.5%
}

body {
  color: #606c76;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.6
}

blockquote {
  border-left: .3rem solid #d1d1d1;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem
}

blockquote *:last-child {
  margin-bottom: 0
}

.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  background-color: #3e4959;
  border: .1rem solid #3e4959;
  border-radius: .4rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  height: 3.8rem;
  letter-spacing: .1rem;
  line-height: 3.8rem;
  padding: 0 3rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap
}

.button:focus,
.button:hover,
button:focus,
button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=submit]:hover {
  background-color: #606c76;
  border-color: #606c76;
  color: #fff;
  outline: 0
}

.button[disabled],
button[disabled],
input[type=button][disabled],
input[type=reset][disabled],
input[type=submit][disabled] {
  cursor: default;
  opacity: .5
}

.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type=button][disabled]:focus,
input[type=button][disabled]:hover,
input[type=reset][disabled]:focus,
input[type=reset][disabled]:hover,
input[type=submit][disabled]:focus,
input[type=submit][disabled]:hover {
  background-color: #3e4959;
  border-color: #3e4959
}

.button.button-outline,
button.button-outline,
input[type=button].button-outline,
input[type=reset].button-outline,
input[type=submit].button-outline {
  background-color: rgba(0, 0, 0, 0);
  color: #3e4959
}

.button.button-outline:focus,
.button.button-outline:hover,
button.button-outline:focus,
button.button-outline:hover,
input[type=button].button-outline:focus,
input[type=button].button-outline:hover,
input[type=reset].button-outline:focus,
input[type=reset].button-outline:hover,
input[type=submit].button-outline:focus,
input[type=submit].button-outline:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: #606c76;
  color: #606c76
}

.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
button.button-outline[disabled]:focus,
button.button-outline[disabled]:hover,
input[type=button].button-outline[disabled]:focus,
input[type=button].button-outline[disabled]:hover,
input[type=reset].button-outline[disabled]:focus,
input[type=reset].button-outline[disabled]:hover,
input[type=submit].button-outline[disabled]:focus,
input[type=submit].button-outline[disabled]:hover {
  border-color: inherit;
  color: #3e4959
}

.button.button-clear,
button.button-clear,
input[type=button].button-clear,
input[type=reset].button-clear,
input[type=submit].button-clear {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #3e4959
}

.button.button-clear:focus,
.button.button-clear:hover,
button.button-clear:focus,
button.button-clear:hover,
input[type=button].button-clear:focus,
input[type=button].button-clear:hover,
input[type=reset].button-clear:focus,
input[type=reset].button-clear:hover,
input[type=submit].button-clear:focus,
input[type=submit].button-clear:hover {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #606c76
}

.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
button.button-clear[disabled]:focus,
button.button-clear[disabled]:hover,
input[type=button].button-clear[disabled]:focus,
input[type=button].button-clear[disabled]:hover,
input[type=reset].button-clear[disabled]:focus,
input[type=reset].button-clear[disabled]:hover,
input[type=submit].button-clear[disabled]:focus,
input[type=submit].button-clear[disabled]:hover {
  color: #3e4959
}

code {
  background: #f4f5f6;
  border-radius: .4rem;
  font-size: 86%;
  margin: 0 .2rem;
  padding: .2rem .5rem;
  white-space: nowrap
}

pre {
  background: #f4f5f6;
  border-left: .3rem solid #3e4959;
  overflow-y: hidden
}

pre>code {
  border-radius: 0;
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre
}

hr {
  border: 0;
  border-top: .1rem solid #f4f5f6;
  margin: 3rem 0
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=week],
input:not([type]),
textarea,
select {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0);
  border: .1rem solid #d1d1d1;
  border-radius: .4rem;
  box-shadow: none;
  box-sizing: inherit;
  height: 3.8rem;
  padding: .6rem 1rem .7rem;
  width: 100%
}

input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
input[type=week]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  border-color: #3e4959;
  outline: 0
}

select {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
  padding-right: 3rem
}

select:focus {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%233e4959" d="M0,0l6,8l6-8"/></svg>')
}

select[multiple] {
  background: none;
  height: auto
}

textarea {
  min-height: 6.5rem
}

label,
legend {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .5rem
}

fieldset {
  border-width: 0;
  padding: 0
}

input[type=checkbox],
input[type=radio] {
  display: inline
}

.label-inline {
  display: inline-block;
  font-weight: normal;
  margin-left: .5rem
}

.container {
  margin: 0 auto;
  max-width: 112rem;
  padding: 0 2rem;
  position: relative;
  width: 100%
}

.row {
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 100%
}

.row.row-no-padding {
  padding: 0
}

.row.row-no-padding>.column {
  padding: 0
}

.row.row-wrap {
  flex-wrap: wrap
}

.row.row-top {
  align-items: flex-start
}

.row.row-bottom {
  align-items: flex-end
}

.row.row-center {
  align-items: center
}

.row.row-stretch {
  align-items: stretch
}

.row.row-baseline {
  align-items: baseline
}

.row .column {
  display: block;
  flex: 1 1 auto;
  margin-left: 0;
  max-width: 100%;
  width: 100%
}

.row .column.column-offset-10 {
  margin-left: 10%
}

.row .column.column-offset-20 {
  margin-left: 20%
}

.row .column.column-offset-25 {
  margin-left: 25%
}

.row .column.column-offset-33,
.row .column.column-offset-34 {
  margin-left: 33.3333%
}

.row .column.column-offset-40 {
  margin-left: 40%
}

.row .column.column-offset-50 {
  margin-left: 50%
}

.row .column.column-offset-60 {
  margin-left: 60%
}

.row .column.column-offset-66,
.row .column.column-offset-67 {
  margin-left: 66.6666%
}

.row .column.column-offset-75 {
  margin-left: 75%
}

.row .column.column-offset-80 {
  margin-left: 80%
}

.row .column.column-offset-90 {
  margin-left: 90%
}

.row .column.column-8 {
  flex: 0 0 8%;
  max-width: 8%
}

.row .column.column-10 {
  flex: 0 0 10%;
  max-width: 10%
}

.row .column.column-11 {
  flex: 0 0 11%;
  max-width: 11%
}

.row .column.column-12 {
  flex: 0 0 12%;
  max-width: 12%
}

.row .column.column-13 {
  flex: 0 0 13%;
  max-width: 13%
}

.row .column.column-13 {
  flex: 0 0 14%;
  max-width: 14%
}

.row .column.column-15 {
  flex: 0 0 15%;
  max-width: 15%
}

.row .column.column-20 {
  flex: 0 0 20%;
  max-width: 20%
}

.row .column.column-25 {
  flex: 0 0 25%;
  max-width: 25%
}

.row .column.column-29 {
  flex: 0 0 29%;
  max-width: 29%
}

.row .column.column-33,
.row .column.column-34 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%
}

.row .column.column-40 {
  flex: 0 0 40%;
  max-width: 40%
}

.row .column.column-50 {
  flex: 0 0 50%;
  max-width: 50%
}

.row .column.column-60 {
  flex: 0 0 60%;
  max-width: 60%
}

.row .column.column-66,
.row .column.column-67 {
  flex: 0 0 66.6666%;
  max-width: 66.6666%
}

.row .column.column-75 {
  flex: 0 0 75%;
  max-width: 75%
}

.row .column.column-80 {
  flex: 0 0 80%;
  max-width: 80%
}

.row .column.column-90 {
  flex: 0 0 90%;
  max-width: 90%
}

.row .column .column-top {
  align-self: flex-start
}

.row .column .column-bottom {
  align-self: flex-end
}

.row .column .column-center {
  align-self: center
}

@media(min-width: 667px) {
  .row {
    flex-direction: row;
    margin-left: -1rem;
    width: calc(100% + 2rem)
  }

  .row .column {
    margin-bottom: inherit;
    padding: 0 1rem
  }
}

a {
  color: #3e4959;
  text-decoration: none
}

a:focus,
a:hover {
  color: #606c76
}

dl,
ol,
ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
  font-size: 90%;
  margin: 1.5rem 0 1.5rem 3rem
}

ol {
  list-style: decimal inside
}

ul {
  list-style: circle inside
}

.button,
button,
dd,
dt,
li {
  margin-bottom: 1rem
}

fieldset,
input,
select,
textarea {
  /* margin-bottom: 1.5rem */
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-bottom: 2.5rem
}

table {
  border-spacing: 0;
  width: 100%
}

td,
th {
  border-bottom: .1rem solid #e1e1e1;
  padding: 1.2rem 1.5rem
}

td:first-child,
th:first-child {
  padding-left: 0
}

td:last-child,
th:last-child {
  padding-right: 0
}

b,
strong {
  font-weight: bold
}

p {
  margin-top: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  letter-spacing: -0.1rem;
  margin-bottom: 2rem;
  margin-top: 0
}

h1 {
  font-size: 4.6rem;
  line-height: 1.2
}

h2 {
  font-size: 3.6rem;
  line-height: 1.25
}

h3 {
  font-size: 2.8rem;
  line-height: 1.3
}

h4 {
  font-size: 2.2rem;
  letter-spacing: -0.08rem;
  line-height: 1.35
}

h5 {
  font-size: 1.8rem;
  letter-spacing: -0.05rem;
  line-height: 1.5
}

h6 {
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.4
}

img {
  max-width: 100%;
  height: auto
}

.clearfix:after {
  clear: both;
  content: " ";
  display: table
}

.float-left {
  float: left
}

.float-right {
  float: right
}

i {
  font-family: "eshicons" !important;
  speak: never;
  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-account-box:before {
  content: ""
}

.icon-alarm:before {
  content: ""
}

.icon-business:before {
  content: ""
}

.icon-chevron-left:before {
  content: ""
}

.icon-chevron-right:before {
  content: ""
}

.icon-notifications-circle:before {
  content: ""
}

.icon-close:before {
  content: ""
}

.icon-corporate-fare:before {
  content: ""
}

.icon-dashboard:before {
  content: ""
}

.icon-done:before {
  content: ""
}

.icon-emergency:before {
  content: ""
}

.icon-expand-less:before {
  content: ""
}

.icon-expand-more:before {
  content: ""
}

.icon-favorite:before {
  content: ""
}

.icon-feed:before {
  content: ""
}

.icon-grid-view:before {
  content: ""
}

.icon-emoticon:before {
  content: ""
}

.icon-keyboard-return:before {
  content: ""
}

.icon-monitor-heart:before {
  content: ""
}

.icon-more-time:before {
  content: ""
}

.icon-movie:before {
  content: ""
}

.icon-newspaper:before {
  content: ""
}

.icon-notifications:before {
  content: ""
}

.icon-person:before {
  content: ""
}

.icon-play-arrow:before {
  content: ""
}

.icon-question-answer:before {
  content: ""
}

.icon-smart-display:before {
  content: ""
}

.icon-soccer:before {
  content: ""
}

.icon-star:before {
  content: ""
}

.icon-unfold:before {
  content: ""
}

.icon-unfold-more:before {
  content: ""
}

.icon-update:before {
  content: ""
}

.icon-video-camera:before {
  content: ""
}

.icon-video-library:before {
  content: ""
}

.icon-videocam:before {
  content: ""
}

.icon-work:before {
  content: ""
}

.icon-account-circle:before {
  content: ""
}

.icon-dot-circle:before {
  content: ""
}

.icon-email-at:before {
  content: ""
}

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

.icon-article:before {
  content: ""
}

.icon-book:before {
  content: ""
}

.icon-mini-player:before {
  content: ""
}

.icon-brightness-moon:before {
  content: ""
}

.icon-brightness-light:before {
  content: ""
}

.icon-brightness-dark:before {
  content: ""
}

.icon-build-circle:before {
  content: ""
}

.icon-phone:before {
  content: ""
}

.icon-lens:before {
  content: ""
}

.icon-cast:before {
  content: ""
}

.icon-center-focus:before {
  content: ""
}

.icon-baby-car:before {
  content: ""
}

.icon-cloud:before {
  content: ""
}

.icon-code:before {
  content: ""
}

.icon-crop:before {
  content: ""
}

.icon-moon:before {
  content: ""
}

.icon-dining:before {
  content: ""
}

.icon-right-sign:before {
  content: ""
}

.icon-ship:before {
  content: ""
}

.icon-tags:before {
  content: ""
}

.icon-email:before {
  content: ""
}

.icon-esports:before {
  content: ""
}

.icon-exit:before {
  content: ""
}

.icon-filter-hdr:before {
  content: ""
}

.icon-folder:before {
  content: ""
}

.icon-star-bold:before {
  content: ""
}

.icon-dots:before {
  content: ""
}

.icon-headphones:before {
  content: ""
}

.icon-help-circle:before {
  content: ""
}

.icon-info-circle:before {
  content: ""
}

.icon-launch:before {
  content: ""
}

.icon-layers:before {
  content: ""
}

.icon-layers-clear:before {
  content: ""
}

.icon-light-mode:before {
  content: ""
}

.icon-link:before {
  content: ""
}

.icon-fire:before {
  content: ""
}

.icon-tag:before {
  content: ""
}

.icon-login:before {
  content: ""
}

.icon-logout:before {
  content: ""
}

.icon-manage-account:before {
  content: ""
}

.icon-map:before {
  content: ""
}

.icon-mic:before {
  content: ""
}

.icon-mms:before {
  content: ""
}

.icon-money-circle:before {
  content: ""
}

.icon-movie-2:before {
  content: ""
}

.icon-password:before {
  content: ""
}

.icon-person-add:before {
  content: ""
}

.icon-person-pin:before {
  content: ""
}

.icon-mobile-phone:before {
  content: ""
}

.icon-mobile-manage:before {
  content: ""
}

.icon-photo-camera:before {
  content: ""
}

.icon-photo-library:before {
  content: ""
}

.icon-pin:before {
  content: ""
}

.icon-play-circle:before {
  content: ""
}

.icon-power:before {
  content: ""
}

.icon-refresh:before {
  content: ""
}

.icon-reorder:before {
  content: ""
}

.icon-room:before {
  content: ""
}

.icon-room-service:before {
  content: ""
}

.icon-rss:before {
  content: ""
}

.icon-search:before {
  content: ""
}

.icon-emoticon-2:before {
  content: ""
}

.icon-settings:before {
  content: ""
}

.icon-code-2:before {
  content: ""
}

.icon-share:before {
  content: ""
}

.icon-shield:before {
  content: ""
}

.icon-shopping-cart:before {
  content: ""
}

.icon-chat:before {
  content: ""
}

.icon-sticky-note:before {
  content: ""
}

.icon-store:before {
  content: ""
}

.icon-users-circle:before {
  content: ""
}

.icon-swap-circle:before {
  content: ""
}

.icon-table-chart:before {
  content: ""
}

.icon-thumb-down:before {
  content: ""
}

.icon-thumb-up:before {
  content: ""
}

.icon-timer:before {
  content: ""
}

.icon-search-world:before {
  content: ""
}

.icon-settings-2:before {
  content: ""
}

.icon-cube:before {
  content: ""
}

.icon-visibility-on:before {
  content: ""
}

.icon-visibility-off:before {
  content: ""
}

.icon-chat-video:before {
  content: ""
}

.icon-key:before {
  content: ""
}

/*! Simple Hint v3.0.0 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */
[data-hint] {
  position: relative
}

[data-hint]:after {
  content: attr(data-hint);
  text-align: center;
  white-space: nowrap;
  z-index: 9999;
  color: var(--color-surface);
  background: var(--color-text);
  padding: 4px 6px 4px 5px;
  border-radius: 2px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2em;
  text-transform: none;
  letter-spacing: 0
}

[data-hint]:after,
[data-hint]:before {
  display: inline-block;
  pointer-events: none;
  position: absolute;
  visibility: hidden
}

[data-hint]:hover:after,
[data-hint]:hover:before {
  visibility: visible
}

[data-hint]:before {
  content: "";
  border: 5px solid transparent;
  z-index: 9998
}

[class*=hint-bottom]:before {
  border-bottom-color: var(--color-text);
  top: 100%;
  margin-top: 0
}

[class*=hint-bottom]:after {
  margin-top: 10px;
  top: 100%
}

[class*=hint-top]:before {
  border-top-color: var(--color-text);
  bottom: 100%;
  margin-bottom: 0
}

[class*=hint-top]:after {
  bottom: 100%;
  margin-bottom: 9px
}

[class*=hint-bottom-middle]:before,
[class*=hint-top-middle]:before {
  right: 50%;
  margin-right: -5px
}

[class*=hint-bottom-middle]:after,
[class*=hint-top-middle]:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%)
}

[class*=hint-bottom-left]:before,
[class*=hint-top-left]:before {
  left: 15px
}

[class*=hint-bottom-left]:after,
[class*=hint-top-left]:after {
  left: 0
}

[class*=hint-bottom-right]:before,
[class*=hint-top-right]:before {
  right: 15px
}

[class*=hint-bottom-right]:after,
[class*=hint-top-right]:after {
  right: 0
}

[class*=hint-left]:before {
  border-left-color: var(--color-text);
  left: 0;
  margin-left: -10px
}

[class*=hint-left]:after {
  right: 100%;
  margin-right: 10px
}

[class*=hint-right]:before {
  border-right-color: var(--color-text);
  right: 0;
  margin-right: -10px
}

[class*=hint-right]:after {
  left: 100%;
  margin-left: 10px
}

[class*=hint-left-middle]:before,
[class*=hint-right-middle]:before {
  top: 50%;
  margin-top: -5px
}

[class*=hint-left-middle]:after,
[class*=hint-right-middle]:after {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%)
}

[class*=hint-left-top]:before,
[class*=hint-right-top]:before {
  top: 15px
}

[class*=hint-left-top]:after,
[class*=hint-right-top]:after {
  top: 0
}

[class*=hint-left-bottom]:before,
[class*=hint-right-bottom]:before {
  bottom: 15px
}

[class*=hint-left-bottom]:after,
[class*=hint-right-bottom]:after {
  bottom: 0
}

.hint-persist:before,
.hint-persist:after {
  visibility: visible
}

@media only screen and (max-width: 768px) {

  [class*=hint-][class*=-mobile]:after,
  [class*=hint-][class*=-mobile]:before {
    display: none
  }
}

[class*=hint-][class*=-s-small]:after {
  width: 200px;
  white-space: normal
}

[class*=hint-][class*=-s-med]:after {
  width: 300px;
  white-space: normal
}

[class*=hint-][class*=-s-big]:after {
  width: 450px;
  white-space: normal
}

.hint-d-short:hover:after,
.hint-d-short:hover:before {
  -webkit-transition: visibility 0s .4s ease;
  transition: visibility 0s .4s ease
}

.hint-d-med:hover:after,
.hint-d-med:hover:before {
  -webkit-transition: visibility 0s 1s ease;
  transition: visibility 0s 1s ease
}

.hint-d-long:hover:after,
.hint-d-long:hover:before {
  -webkit-transition: visibility 0s 1.5s ease;
  transition: visibility 0s 1.5s ease
}

[class*=hint-fade][class*=-d-short]:hover:before,
[class*=hint-fade][class*=-d-short]:hover:after,
[class*=hint-anim][class*=-d-short]:hover:before,
[class*=hint-anim][class*=-d-short]:hover:after {
  -webkit-transition-delay: .4s;
  transition-delay: .4s
}

[class*=hint-fade][class*=-d-med]:hover:before,
[class*=hint-fade][class*=-d-med]:hover:after,
[class*=hint-anim][class*=-d-med]:hover:before,
[class*=hint-anim][class*=-d-med]:hover:after {
  -webkit-transition-delay: 1s;
  transition-delay: 1s
}

[class*=hint-fade][class*=-d-long]:hover:before,
[class*=hint-fade][class*=-d-long]:hover:after,
[class*=hint-anim][class*=-d-long]:hover:before,
[class*=hint-anim][class*=-d-long]:hover:after {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s
}

[class*=hint-fade]:before,
[class*=hint-fade]:after {
  -webkit-transition: opacity .2s ease-out, visibility .2s ease-out;
  transition: opacity .2s ease-out, visibility .2s ease-out;
  opacity: 0
}

[class*=hint-fade]:hover:before,
[class*=hint-fade]:hover:after {
  opacity: 1
}

[class*=hint-anim][class*=hint-top]:after,
[class*=hint-anim][class*=hint-top]:before {
  bottom: 125%;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out, visibility .3s ease-out, bottom .3s ease-out;
  transition: opacity .3s ease-out, visibility .3s ease-out, bottom .3s ease-out
}

[class*=hint-anim][class*=hint-top]:hover:after,
[class*=hint-anim][class*=hint-top]:hover:before {
  opacity: 1;
  bottom: 100%
}

[class*=hint-anim][class*=hint-bottom]:after,
[class*=hint-anim][class*=hint-bottom]:before {
  top: 125%;
  opacity: 0;
  -webkit-transition: opacity .3s ease, visibility .3s ease, top .3s ease;
  transition: opacity .3s ease, visibility .3s ease, top .3s ease
}

[class*=hint-anim][class*=hint-bottom]:hover:after,
[class*=hint-anim][class*=hint-bottom]:hover:before {
  top: 100%;
  opacity: 1
}

[class*=hint-anim][class*=hint-right]:after,
[class*=hint-anim][class*=hint-right]:before {
  margin-right: -25px;
  margin-left: 25px;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out, visibility .3s ease, margin .3s ease-out;
  transition: opacity .3s ease-out, visibility .3s ease, margin .3s ease-out
}

[class*=hint-anim][class*=hint-right]:hover:after,
[class*=hint-anim][class*=hint-right]:hover:before {
  margin-right: -10px;
  margin-left: 10px;
  opacity: 1
}

[class*=hint-anim][class*=hint-left]:after,
[class*=hint-anim][class*=hint-left]:before {
  margin-right: 25px;
  margin-left: -25px;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out, visibility .3s ease, margin .3s ease-out;
  transition: opacity .3s ease-out, visibility .3s ease, margin .3s ease-out
}

[class*=hint-anim][class*=hint-left]:hover:after,
[class*=hint-anim][class*=hint-left]:hover:before {
  margin-right: 10px;
  margin-left: -10px;
  opacity: 1
}

[class*=hint-][class*=-t-info][class*=hint-bottom]:before {
  border-bottom-color: #44c2f9
}

[class*=hint-][class*=-t-info][class*=hint-top]:before {
  border-top-color: #44c2f9
}

[class*=hint-][class*=-t-info][class*=hint-right]:before {
  border-right-color: #44c2f9
}

[class*=hint-][class*=-t-info][class*=hint-left]:before {
  border-left-color: #44c2f9
}

[class*=hint-][class*=-t-info]:after {
  background: #44c2f9
}

[class*=hint-][class*=-t-success][class*=hint-bottom]:before {
  border-bottom-color: #83c510
}

[class*=hint-][class*=-t-success][class*=hint-top]:before {
  border-top-color: #83c510
}

[class*=hint-][class*=-t-success][class*=hint-right]:before {
  border-right-color: #83c510
}

[class*=hint-][class*=-t-success][class*=hint-left]:before {
  border-left-color: #83c510
}

[class*=hint-][class*=-t-success]:after {
  background: #83c510
}

[class*=hint-][class*=-t-error][class*=hint-bottom]:before {
  border-bottom-color: #ff4c4c
}

[class*=hint-][class*=-t-error][class*=hint-top]:before {
  border-top-color: #ff4c4c
}

[class*=hint-][class*=-t-error][class*=hint-right]:before {
  border-right-color: #ff4c4c
}

[class*=hint-][class*=-t-error][class*=hint-left]:before {
  border-left-color: #ff4c4c
}

[class*=hint-][class*=-t-error]:after {
  background: #ff4c4c
}

[class*=hint-][class*=-t-notice][class*=hint-bottom]:before {
  border-bottom-color: #ffae00
}

[class*=hint-][class*=-t-notice][class*=hint-top]:before {
  border-top-color: #ffae00
}

[class*=hint-][class*=-t-notice][class*=hint-right]:before {
  border-right-color: #ffae00
}

[class*=hint-][class*=-t-notice][class*=hint-left]:before {
  border-left-color: #ffae00
}

[class*=hint-][class*=-t-notice]:after {
  background: #ffae00
}



.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1
}

.swiper-container-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0)
}

.swiper-container-multirow>.swiper-wrapper {
  flex-wrap: wrap
}

.swiper-container-multirow-column>.swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column
}

.swiper-container-free-mode>.swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto
}

.swiper-container-pointer-events {
  touch-action: pan-y
}

.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  transition-property: transform
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-container-3d {
  perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))
}

.swiper-container-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory
}

.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
  scroll-snap-type: y mandatory
}

:root {
  --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size)/44*27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1*var(--swiper-navigation-size)/2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85)
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #fff;
  padding-top: 1px
}

.swiper-button-next:active,
.swiper-button-prev:active,
.swiper-button-next:focus,
.swiper-button-prev:focus {
  color: #fff;
  padding-top: 3px
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "prev"
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "next"
}

.swiper-button-next.swiper-button-white,
.swiper-button-prev.swiper-button-white {
  --swiper-navigation-color: #ffffff
}

.swiper-button-next.swiper-button-black,
.swiper-button-prev.swiper-button-black {
  --swiper-navigation-color: #000000
}

.swiper-button-lock {
  display: none
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0, 0, 0);
  scroll-behavior: auto !important;
  z-index: 999;
  white-space: nowrap;
  width: 100%
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0
}

.swiper-scroller {
  position: absolute;
  bottom: 6px;
  display: block;
  width: 60px;
  height: 35px;
  z-index: 999
}

.swiper-scroller.prev {
  left: 0;
  background: linear-gradient(-90deg, var(--color-surface-t) 0%, var(--color-surface) 55%)
}

.swiper-scroller.next {
  text-align: right;
  right: 0;
  background: linear-gradient(-90deg, var(--color-surface) 55%, var(--color-surface-t) 100%)
}

.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33)
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: .2;
  margin: 0 4px
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--color-fill))
}

.swiper-container-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0)
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px
}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: .2s transform, .2s top
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap
}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: .2s transform, .2s left
}

.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: .2s transform, .2s right
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--color-fill));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top
}

.swiper-container-horizontal>.swiper-pagination-progressbar,
.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0
}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical>.swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff
}

.swiper-pagination-black {
  --swiper-pagination-color: #000000
}

.swiper-pagination-lock {
  display: none
}

.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1)
}

.swiper-container-horizontal>.swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%
}

.swiper-container-vertical>.swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0
}

.swiper-scrollbar-cursor-drag {
  cursor: move
}

.swiper-scrollbar-lock {
  display: none
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain
}

.swiper-slide-zoomed {
  cursor: move
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--color-fill));
  border-radius: 50%;
  border-top-color: transparent
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg)
  }
}

.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-cube {
  overflow: visible
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-next+.swiper-slide,
.swiper-container-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible
}

.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-cube .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: .6;
  z-index: 0
}

.swiper-container-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(50px);
  filter: blur(50px)
}

.swiper-container-flip {
  overflow: visible
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}



html,
body {
  padding: 0;
  margin: 0
}

.grid.grid-slider #swiper-mosaic .swiper-slide a figure figcaption {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.logo-bg,
.logo-v1,
header .mainmenu .menu li a.hot:before {
  background-size: 100%;
  background-position: 0 0;
  background-repeat: no-repeat
}

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6,
.article-title h1,
.writecomment .comment-row textarea,
.comments textarea,
.comments input[type=text],
.ql-container .ql-editor,
input[type=date],
input[type=text],
input[type=number],
input[type=search],
input[type=password],
select,
textarea,
html,
body {
  font-family: "Inter", sans-serif
}

header .mainmenu .menu li a.hot:before {
  content: " ";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  margin-top: 2px
}

.article-body figure.image img,
.article-body .ad img,
.article-body img,
.banner img,
#article-slider .swiper .swiper-slide a img,
.hotnews .item img,
.avatars ul li a img,
#searchbox .search-results ul li a img,
header .topmenu ul li a.profile span img,
header .mobile-account span img,
.grid.spot a .img,
.grid .item a .thumb,
.grid .item a img,
.sidebar .related a .crop img,
.related a.item .cropper img,
#userleave .inner .row .column a img,
.container .ad a img {
  background-color: var(--color-bg-img);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MiIgdmlld0JveD0iMCAwIDExMyA5NyI+PGcgb3BhY2l0eT0iLjciPjxwYXRoIGQ9Ik00NyAwaDc5djM2SDQ3eiIgc3R5bGU9ImZpbGw6I2ExYTFhMTtmaWxsLXJ1bGU6bm9uemVybyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ2Ljk4NyAzMC4zMzcpIi8+PHBhdGggZD0iTTY1LjU0OSAxMy41MWg2LjIzNWMtLjAyMy00LjcxMi0zLjY1Ny03LjgzLTkuNDctNy44My01LjcwOCAwLTkuNzQgMy4wNy05LjcwNSA3LjY0Mi0uMDExIDMuNzUgMi41OSA1LjgzNyA2Ljg0NSA2Ljc1bDIuMzkxLjUxNmMyLjY3Mi41ODYgMy41ODcgMS4yNTUgMy42MSAyLjM0NS0uMDIzIDEuMTgzLTEuMTAyIDIuMDE1LTMuMTg4IDIuMDE1LTIuNDk2IDAtMy45NzMtMS4xNzItNC4wNzktMy4zNzVINTJjLjAyMyA2LjAyNCA0LjEwMiA4LjcyIDEwLjM2MSA4LjcyIDYuMDgzIDAgOS43MjgtMi42MjUgOS43NTEtNy4zNi0uMDIzLTMuNjU3LTIuMjAzLTYuMjI0LTcuNS03LjM2bC0xLjk3LS40MjNjLTIuMjc0LS40OC0zLjI5My0xLjE0OS0zLjIzNS0yLjI5Ny4wMTItMS4wNTUuODkxLTEuODI5IDIuOTA3LTEuODI5IDIuMTEgMCAzLjEwNi45MjYgMy4yMzUgMi40ODV2LjAwMVpNMTE5Ljk5NiA2aC02LjUxNnYxMi41NjJoLS4xODhMMTA0Ljc2MSA2SDk5LjIzdjI0aDYuNTE2VjE3LjM5aC4xNEwxMTQuNTU4IDMwaDUuNDM4VjZabS0zNC40MjItLjMyYzYuNTE2IDAgMTEuNjczIDQuMzEzIDExLjY3MyAxMi4zM1M5Mi4wOSAzMC4zNCA4NS41NzQgMzAuMzRjLTYuNTY0IDAtMTEuNjc0LTQuMzYtMTEuNjc0LTEyLjMzIDAtOC4wMTcgNS4xMS0xMi4zMyAxMS42NzQtMTIuMzNabTAgMTguOTg3YzMuMjM0IDAgNC45Ny0yLjM0NCA0Ljk3LTYuNjU3IDAtNC4zMTMtMS43MzYtNi42NTctNC45Ny02LjY1Ny0zLjIzNSAwLTQuOTcgMi4zNDQtNC45NyA2LjY1NyAwIDQuMzEzIDEuNzM1IDYuNjU3IDQuOTcgNi42NTdaIiBzdHlsZT0iZmlsbDojZGRkO2ZpbGwtb3BhY2l0eTouOTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00Ni45ODcgMzAuMzM3KSIvPjxwYXRoIGQ9Ik0xMzguNTE2IDMwSDEzMlY2aDYuNTE2djkuMzc1aDguNjI1VjZoNi41MTV2MjRoLTYuNTE1di05LjM3NWgtOC42MjVWMzBabTIzLjcxNSAwIDEuMzgzLTQuNTk0aDcuOTIyTDE3Mi45MTkgMzBoNy4wMzFsLTcuOTIyLTI0aC04LjkwNkwxNTUuMiAzMGg3LjAzMVptMi44Ni05LjQ2OSAyLjM5LTcuOTIyaC4xODhsMi4zOSA3LjkyMmgtNC45NjhaTTE5Mi43ODcgMzBIMTgxLjQ5VjZoMTAuNDA2YzUuNDg1IDAgOC4zOTEgMi4zNDQgOC4zOTEgNiAwIDIuNjQ4LTEuODYzIDQuNy00LjY0MSA1LjI1di4yMzRjMy4wODIuMTE4IDUuNTc4IDIuMzMyIDUuNTc4IDUuNzIgMCAzLjk0OC0zLjIyMiA2Ljc5Ni04LjQzNyA2Ljc5NlptLTQuNzgxLTEwLjI2NnY1LjA2M2gzLjA0N2MyLjE5MSAwIDMuMjgxLS44MzIgMy4yODEtMi40MzggMC0xLjY4Ny0xLjIwNy0yLjYyNS0zLjE4OC0yLjYyNWgtMy4xNFptMC04LjYyNXY0LjU5NGgyLjY3MmMxLjcxIDAgMi45MDYtLjgyIDIuOTA2LTIuMjk3IDAtMS40NzYtMS4xOTYtMi4yOTctMi44MTMtMi4yOTdoLTIuNzY1Wk0yMDMuNzYgMzBoMTcuMjV2LTUuMjVoLTEwLjczNHYtNC4xMjVoOS44OXYtNS4yNWgtOS44OVYxMS4yNWgxMC43ODFWNkgyMDMuNzZ2MjRabTIwLjUzIDBoNi41MTZ2LTcuOTIyaDIuMjVMMjM3LjI3NCAzMGg3LjA3OGwtNC44NzUtOC45NTNjMi41NTUtMS4yMyA0LjA3OS0zLjU2MyA0LjA3OS02Ljg5IDAtNS4xMS0zLjU3NS04LjE1Ny04LjkwNy04LjE1N0gyMjQuMjl2MjRabTYuNTE2LTEyLjk4NHYtNS44MTNoMi4yOTZjMi4yODYgMCAzLjY1Ny44OSAzLjY1NyAyLjk1MyAwIDIuMDUxLTEuMzcxIDIuODYtMy42NTcgMi44NmgtMi4yOTZaIiBzdHlsZT0iZmlsbDojYmJiIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMxLjk5NCA2Ni41MjYpIi8+PHBhdGggZD0iTTE3LjI1IDMwSDBWNmgxNy4yOTd2NS4yNUg2LjUxNnY0LjEyNWg5Ljg5djUuMjVoLTkuODl2NC4xMjVIMTcuMjVWMzBaTTM0LjQ4IDZoNi41MTZ2MjRoLTUuNDM4bC04LjY3Mi0xMi42MWgtLjE0VjMwSDIwLjIzVjZoNS41MzFsOC41MzEgMTIuNTYzaC4xODhWNloiIHN0eWxlPSJmaWxsOiNiYmIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTYpIi8+PC9nPjwvc3ZnPg==");
  background-size: 20%;
  background-position: center center;
  background-repeat: no-repeat
}

.comments .comment p,
.grid.grid-mosaic .item a .text,
.grid .item a h3,
.grid .item a .text,
#push .item .link .text {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word
}

@media(max-width: 568px) {

  .article-tags,
  .article-date,
  .article-title,
  .article-info,
  .comments,
  .related {
    padding-left: 1rem;
    padding-right: 1rem
  }
}

#push {
  position: fixed;
  right: 15px;
  top: 50px;
  z-index: 999
}

@media(max-width: 568px) {
  #push {
    width: 100%;
    left: 0;
    right: auto;
    top: 0
  }
}

#push .item {
  display: block;
  position: relative;
  left: 350px;
  width: 300px;
  border-left: 6px solid var(--color-red);
  background: var(--color-surface);
  box-shadow: rgba(0, 0, 0, .15) 0 5px 15px 0;
  margin-bottom: 10px;
  border-radius: 6px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#push .item:hover {
  box-shadow: rgba(0, 0, 0, .16) 0px 1px 4px
}

#push .item.active {
  left: 0
}

#push .item.hideout {
  left: 350px
}

#push .item.red {
  border-left-color: var(--color-red)
}

#push .item.green {
  border-left-color: var(--color-green)
}

#push .item.blue {
  border-left-color: #34ace0
}

#push .item.orange {
  border-left-color: #ff793f
}

#push .item.yellow {
  border-left-color: #ffb142
}

#push .item.purple {
  border-left-color: #8e44ad
}

#push .item .link {
  display: block;
  position: relative;
  padding: 20px 0 20px 20px;
  margin-right: 40px;
  padding-left: 30px;
  line-height: 1.3em;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: -0.3px;
  border-radius: 9px;
  background: var(--color-surface)
}

#push .item .link .title {
  font-size: 15px;
  font-size: .9375rem;
  font-weight: 600;
  display: block;
  color: var(--color-black-white);
  margin-bottom: 3px
}

#push .item .link .text {
  display: block;
  max-height: 38px;
  overflow: hidden
}

#push .item .link .pulse {
  position: absolute;
  left: 12px;
  top: 12px
}

#push .item .close {
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 8px;
  top: 7px;
  background: var(--color-border);
  border-radius: 50%;
  text-align: center;
  line-height: 1.7em;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out
}

#push .item .close:hover {
  transform: scale(0.8)
}

@media(max-width: 568px) {
  #push .item {
    width: 100%;
    left: 110%;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0
  }
}

#modal,
.modal,
.splash {
  opacity: 0;
  overflow: hidden;
  font-size: 15px;
  font-size: .9375rem;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

#modal .inner,
.modal .inner,
.splash .inner {
  display: flex;
  align-items: center;
  justify-content: center
}

#modal .inner .box,
.modal .inner .box,
.splash .inner .box {
  opacity: 0;
  background: var(--color-surface);
  box-shadow: rgba(0, 0, 0, .25) 0 5px 15px 0;
  padding: 20px;
  position: absolute;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  width: 100%;
  min-width: 320px
}

@media(min-width: 480px) {

  #modal .inner .box,
  .modal .inner .box,
  .splash .inner .box {
    left: 50%;
    top: 50%;
    width: auto;
    transform: translate(-50%, -50%)
  }
}

#modal .inner .box .head,
#modal .inner .box h2,
.modal .inner .box .head,
.modal .inner .box h2,
.splash .inner .box .head,
.splash .inner .box h2 {
  font-size: 20px;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  font-weight: 600;
  padding: 0 0 0 20px;
  background: url("../index/disc.svg") 0 2px no-repeat;
  background-size: 16px;
  margin-bottom: .5rem
}

#modal .inner .box .content,
.modal .inner .box .content,
.splash .inner .box .content {
  padding: 10px 0;
  overflow-y: auto;
  overflow-x: hidden
}

#modal .inner .box .content p,
.modal .inner .box .content p,
.splash .inner .box .content p {
  margin-bottom: 20px
}

#modal .inner .box .content ul,
#modal .inner .box .content ol,
.modal .inner .box .content ul,
.modal .inner .box .content ol,
.splash .inner .box .content ul,
.splash .inner .box .content ol {
  margin-bottom: 0;
  margin-left: 1rem
}

#modal .inner .box .content ul li,
#modal .inner .box .content ol li,
.modal .inner .box .content ul li,
.modal .inner .box .content ol li,
.splash .inner .box .content ul li,
.splash .inner .box .content ol li {
  margin-bottom: .5rem
}

#modal .inner .box .close-modal,
.modal .inner .box .close-modal,
.splash .inner .box .close-modal {
  display: block;
  position: absolute;
  right: 13px;
  top: 13px;
  color: #c1c4ca;
  cursor: pointer;
  background: none;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#modal .inner .box .close-modal:hover,
.modal .inner .box .close-modal:hover,
.splash .inner .box .close-modal:hover {
  color: var(--color-red)
}

#modal .inner .box .close-modal span,
.modal .inner .box .close-modal span,
.splash .inner .box .close-modal span {
  font-size: 20px;
  font-size: 1.25rem
}

#modal .inner .box .close-modal.v2,
.modal .inner .box .close-modal.v2,
.splash .inner .box .close-modal.v2 {
  right: 0;
  top: -19px;
  font-size: 16px;
  font-size: 1rem;
  color: var(--color-white);
  background: var(--color-bg-btn);
  border: 4px solid var(--color-surface);
  text-align: center;
  line-height: 1.7em;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  z-index: 9999
}

#modal .inner .box .close-modal.v2:hover,
.modal .inner .box .close-modal.v2:hover,
.splash .inner .box .close-modal.v2:hover {
  transform: scale(0.9)
}

@media(max-width: 667px) {

  #modal .inner .box .close-modal.v2,
  .modal .inner .box .close-modal.v2,
  .splash .inner .box .close-modal.v2 {
    right: 0;
    top: -20px
  }
}

#modal.active,
.modal.active,
.splash.active {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 1;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

#modal.active .inner,
.modal.active .inner,
.splash.active .inner {
  position: relative;
  height: 100%;
  width: 100%
}

#modal.active .box,
.modal.active .box,
.splash.active .box {
  opacity: 1;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

#modal.loading .close-modal,
.modal.loading .close-modal,
.splash.loading .close-modal {
  display: none !important
}

.modal,
#overlay {
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px)
}

.splash .inner .box {
  display: flex;
  padding: 1rem;
  min-width: 300px;
  min-height: 140px;
  background: var(--color-surface) url("../index/loading-red.svg") center center no-repeat;
  background-size: 50px
}

.cookiepolicy-banner {
  background: #fff;
  border: 1px solid rgba(158, 163, 172, .32);
  border-radius: 5px;
  bottom: 20px;
  color: #000;
  display: none;
  font-size: 12px;
  left: 20px;
  margin: 0;
  max-width: 100%;
  padding: 1rem .5rem;
  position: fixed;
  width: 400px;
  z-index: 9999999999
}

@media(max-width: 999.98px) {
  .cookiepolicy-banner {
    bottom: 10px;
    font-size: 13px;
    left: 10px;
    padding: 1rem .5rem
  }
}

@media(max-width: 575.98px) {
  .cookiepolicy-banner {
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(158, 163, 172, .32);
    bottom: -1px;
    font-size: 13px;
    left: 0;
    padding: 1rem .5rem 35px;
    width: 100%
  }
}

.cookiepolicy-banner .cookiepolicy-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  width: 100%
}

.cookiepolicy-banner .cookiepolicy-wrapper p {
  color: #000;
  margin: 0 0 15px;
  text-align: center
}

.cookiepolicy-banner .cookiepolicy-wrapper p a {
  display: inline;
  margin: 0 auto;
  max-width: 150px;
  text-decoration: none;
  text-decoration: underline
}

.cookiepolicy-banner .cookiepolicy-wrapper p a:hover {
  text-decoration: underline
}

@media(max-width: 767.98px) {
  .cookiepolicy-banner .cookiepolicy-wrapper p a {
    border-radius: 0;
    display: inline-block
  }
}

.cookiepolicy-banner .cookiepolicy-wrapper button {
  background-color: #3e4959;
  border-radius: 3px;
  bottom: -10px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  padding: 0 15px;
  position: absolute;
  z-index: 10
}

.cookiepolicy-banner .cookiepolicy-wrapper button:hover {
  background-color: #000
}

@media(prefers-color-scheme: light) {
  body {
    --peek-text: rgba(0, 0, 0, 1);
    --peek-surface: rgba(255, 255, 255, 1);
    --peek-white: #FFF;
    --peek-soft-grey: #DDD;
    --peek-green: #31BC36;
    --peek-red: #FF355B;
    --peek-blue: #2E86E8;
    --peek-yellow: #FFC223
  }
}

@media(prefers-color-scheme: dark) {
  body {
    --peek-text: rgba(255, 255, 255, 1);
    --peek-surface: rgba(0, 0, 0, 1)
  }
}

#peek {
  position: fixed;
  width: 320px;
  min-width: 320px;
  z-index: 999
}

#peek.peek-top {
  top: 10px
}

#peek.peek-bottom {
  bottom: 10px
}

#peek.peek-left {
  left: 10px
}

#peek.peek-right {
  right: 10px
}

#peek.peek-center {
  left: 50%;
  transform: translate(-50%, 0%)
}

@media screen and (max-width: 425px) {
  #peek {
    width: 100%
  }

  #peek.peek-top,
  #peek.peek-bottom,
  #peek.peek-right,
  #peek.peek-center {
    left: 0;
    top: 0;
    transform: none
  }
}

#peek .peek-item {
  cursor: default;
  transition: .3s ease-in-out;
  opacity: 0;
  margin-bottom: 15px;
  transform: scale(0)
}

#peek .peek-item.peek-active {
  opacity: 1;
  transform: scale(1)
}

#peek .peek-item.peek-active:hover {
  transform: scale(0.98)
}

#peek .peek-item.peek-active:hover .peek-wrapper {
  box-shadow: rgba(17, 17, 26, .05) 0 1px 0, rgba(17, 17, 26, .1) 0 0 8px
}

#peek .peek-item .peek-wrapper {
  position: relative;
  background: var(--peek-surface);
  color: var(--peek-text);
  overflow: hidden;
  padding: 20px 30px 30px 55px;
  box-shadow: rgba(0, 0, 0, .2) 0 18px 50px -10px;
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.35)
}

@media screen and (min-width: 425px) {
  #peek .peek-item .peek-wrapper {
    border-radius: 3px
  }
}

#peek .peek-item .peek-wrapper .peek-icon {
  position: absolute;
  left: 13px;
  top: 12px;
  border-radius: 4px;
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  color: var(--peek-white);
  background: var(--peek-blue) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" fill="%23FFF" stroke="%23FFF" viewBox="0 0 52 52"><path d="M26 2C12.7 2 2 12.7 2 26s10.7 24 24 24 24-10.7 24-24S39.3 2 26 2zm0 12.1c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3zm5 21c0 .5-.4.9-1 .9h-8c-.5 0-1-.3-1-.9v-2c0-.5.4-1.1 1-1.1.5 0 1-.3 1-.9v-4c0-.5-.4-1.1-1-1.1-.5 0-1-.3-1-.9v-2c0-.5.4-1.1 1-1.1h6c.5 0 1 .5 1 1.1v8c0 .5.4.9 1 .9.5 0 1 .5 1 1.1v2z"/></svg>') center center no-repeat;
  background-size: 16px
}

#peek .peek-item .peek-wrapper .peek-title {
  line-height: 1.4em;
  font-weight: 600;
  font-size: 16px
}

#peek .peek-item .peek-wrapper .peek-content {
  line-height: 1.4em;
  font-weight: 400;
  font-size: 14px;
  opacity: .8
}

#peek .peek-item .peek-wrapper .peek-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--peek-soft-grey);
  width: 100%;
  height: 8px;
  overflow: hidden
}

#peek .peek-item .peek-wrapper .peek-progress .peek-bar {
  content: "";
  display: block;
  left: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--peek-blue);
  transition: width .5s linear
}

#peek .peek-item .peek-wrapper .peek-close {
  position: absolute;
  right: 10px;
  top: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path stroke="%230C0310" stroke-linecap="round" stroke-width="2" d="M17 7 7 17M7 7l10 10"/></g></svg>') center center no-repeat;
  background-size: 100%
}

#peek .peek-item .peek-wrapper .peek-close span {
  visibility: hidden
}

#peek .peek-item.peek-border .peek-wrapper {
  border-left: 8px solid var(--peek-blue)
}

#peek .peek-item.peek-noprogressbar .peek-wrapper {
  padding-bottom: 20px
}

#peek .peek-item.peek-noprogressbar .peek-wrapper .peek-progress {
  display: none
}

#peek .peek-item.peek-success .peek-wrapper {
  border-color: var(--peek-green)
}

#peek .peek-item.peek-success .peek-wrapper .peek-progress .peek-bar {
  background: var(--peek-green)
}

#peek .peek-item.peek-success .peek-wrapper .peek-icon {
  background: var(--peek-green) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" fill="%23FFF" stroke="%23FFF" viewBox="0 0 52 52"><path d="M26 2C12.7 2 2 12.7 2 26s10.7 24 24 24 24-10.7 24-24S39.3 2 26 2zm13.4 18L24.1 35.5c-.6.6-1.6.6-2.2 0L13.5 27c-.6-.6-.6-1.6 0-2.2l2.2-2.2c.6-.6 1.6-.6 2.2 0l4.4 4.5c.4.4 1.1.4 1.5 0L35 15.5c.6-.6 1.6-.6 2.2 0l2.2 2.2c.7.6.7 1.6 0 2.3z"/></svg>') center center no-repeat;
  background-size: 16px
}

#peek .peek-item.peek-warning .peek-wrapper {
  border-color: var(--peek-yellow)
}

#peek .peek-item.peek-warning .peek-wrapper .peek-progress .peek-bar {
  background: var(--peek-yellow)
}

#peek .peek-item.peek-warning .peek-wrapper .peek-icon {
  background: var(--peek-yellow) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="%23FFF" stroke="%23FFF" viewBox="0 0 52 52"><path d="m51.4 42.5-22.9-37c-1.2-2-3.8-2-5 0L.6 42.5C-.8 44.8.6 48 3.1 48h45.8c2.5 0 4-3.2 2.5-5.5zM26 40c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm3-9c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1V18c0-.6.4-1 1-1h4c.6 0 1 .4 1 1v13z"/></svg>') center center no-repeat;
  background-size: 16px
}

#peek .peek-item.peek-error .peek-wrapper {
  border-color: var(--peek-red)
}

#peek .peek-item.peek-error .peek-wrapper .peek-progress .peek-bar {
  background: var(--peek-red)
}

#peek .peek-item.peek-error .peek-wrapper .peek-icon {
  background: var(--peek-red) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" fill="%23FFF" stroke="%23FFF" viewBox="0 0 52 52"><path d="M26 2C12.7 2 2 12.7 2 26s10.7 24 24 24 24-10.7 24-24S39.3 2 26 2zm4.9 24.8 7.8 7.8c.4.4.4 1 0 1.4l-2.8 2.8c-.4.4-1 .4-1.4 0L26.7 31c-.4-.4-1-.4-1.4 0l-7.8 7.8c-.4.4-1 .4-1.4 0L13.3 36c-.4-.4-.4-1 0-1.4l7.8-7.8c.4-.4.4-1 0-1.4l-7.9-7.9c-.4-.4-.4-1 0-1.4l2.8-2.8c.4-.4 1-.4 1.4 0l7.9 7.9c.4.4 1 .4 1.4 0l7.8-7.8c.4-.4 1-.4 1.4 0l2.8 2.8c.4.4.4 1 0 1.4l-7.8 7.8c-.3.4-.3 1 0 1.4z"/></svg>') center center no-repeat;
  background-size: 16px
}

html,
body {
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  color: var(--color-text);
  background: var(--color-background)
}

html[data-theme=dark],
body[data-theme=dark] {
  --color-text: rgba(192, 195, 199, 1);
  --color-black-white: rgba(255, 255, 255, 1);
  --color-black-white-negative: rgba(0, 0, 0, 1);
  --color-text-dark: rgb(255, 255, 255);
  --color-text-negative: rgba(62, 73, 89, 1);
  --color-text-strong: rgba(219, 219, 219, 1);
  --color-text-secondary: rgba(237, 241, 245, 0.6);
  --color-text-tertiary: rgba(237, 241, 245, 0.32);
  --color-bg-btn: rgba(62, 73, 89, 1);
  --color-bg-btn-hover: rgba(54, 72, 93, 1);
  --color-bg-img: rgba(38, 40, 44, 1);
  --color-border: rgba(237, 241, 245, 0.08);
  --color-border-g: rgba(237, 241, 245, 0.08);
  --color-border-y: rgba(237, 241, 245, 0.08);
  --color-border-h: rgba(237, 241, 245, 0.08);
  --color-border-t: rgba(62, 73, 89, 0.05);
  --color-surface: rgba(38, 40, 44, 1);
  --color-surface-g: rgba(38, 40, 44, 1);
  --color-surface-c: rgba(38, 40, 44, 1);
  --color-surface-n: rgba(38, 40, 44, 1);
  --color-surface-t: rgba(38, 40, 44, 0);
  --color-surface-2: rgba(38, 40, 44, 0.2);
  --color-surface-5: rgba(38, 40, 44, 0.5);
  --color-surface-8: rgba(38, 40, 44, 0.8);
  --color-surface-9: rgba(38, 40, 44, 0.9);
  --color-surface-a: rgba(29, 30, 32, 1);
  --color-surface-dark: rgba(38, 40, 44, 1);
  --color-background: rgba(29, 30, 32, 1);
  --color-background-dark: rgba(29, 30, 32, 1);
  --color-fill: rgba(253, 65, 65, 1);
  --color-fill-hover: rgba(200, 7, 7, 1);
  --color-fill-t: rgba(253, 65, 65, .3);
  --color-fill-spor: rgba(16, 143, 35, 1);
  --color-yellow-spor: rgba(255, 211, 2, 1);
  --color-yellow-spor-t: rgba(255, 246, 171, 1);
  --color-text-on-fill: rgba(255, 255, 255, 1);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-slide: rgba(62, 73, 89, 1);
  --color-green: rgba(115, 190, 80, 1);
  --color-green-2: rgba(56, 153, 11, 1);
  --color-red: rgba(227, 10, 23, 1);
  --color-esh-red: rgba(237, 13, 13, 1);
  --color-red-t: rgba(255, 75, 75, 1);
  --color-yellow: rgba(255, 211, 2, 1);
  --color-blue: rgba(2, 136, 209, 1);
  --color-azure-blue: rgba(31, 147, 255, 1);
  --color-crystal-blue: rgba(76, 198, 244, 1);
  --color-crystal-blue-2: rgba(76, 198, 244, .6);
  --color-athens-gray: rgba(237, 237, 244, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-5: rgba(0, 0, 0, 5);
  --color-black-6: rgba(0, 0, 0, 6);
  --color-shadow: rgba(0, 0, 0, 0.50);
  --color-dark-grey: rgba(46, 47, 48, 1)
}

html[data-theme=dark] .light,
body[data-theme=dark] .light {
  display: none !important
}

html[data-theme=dark] .modal #loginregister .logo,
body[data-theme=dark] .modal #loginregister .logo {
  background: url("../index/logo-white.svg") 0 0 no-repeat;
  background-size: 100%
}

html[data-theme=dark] .logo-bg,
body[data-theme=dark] .logo-bg {
  background-image: url("../index/logo-white.svg")
}

html[data-theme=light],
body[data-theme=light] {
  --color-text: rgba(0, 0, 0, 1);
  --color-black-white: rgba(0, 0, 0, 1);
  --color-black-white-negative: rgba(255, 255, 255, 1);
  --color-text-dark: rgba(62, 73, 89, 1);
  --color-text-negative: rgba(237, 241, 245, 1);
  --color-text-strong: rgba(0, 0, 0, 1);
  --color-text-secondary: rgba(62, 73, 89, 0.9);
  --color-text-tertiary: rgba(62, 73, 89, 0.32);
  --color-bg-btn: rgba(62, 73, 89, 1);
  --color-bg-btn-hover: rgba(54, 72, 93, 1);
  --color-bg-img: rgba(221, 221, 221, 1);
  --color-border: rgba(62, 73, 89, 0.08);
  --color-border-g: rgba(236, 236, 236, 1);
  --color-border-y: rgba(204, 204, 204, 1);
  --color-border-h: rgba(177, 177, 177, 1);
  --color-border-t: rgba(62, 73, 89, 0.05);
  --color-surface: rgba(255, 255, 255, 1);
  --color-surface-g: rgba(247, 248, 252, 1);
  --color-surface-c: rgba(240, 240, 240, 1);
  --color-surface-n: rgba(240, 241, 242, 0.50);
  --color-surface-t: rgba(255, 255, 255, 0);
  --color-surface-2: rgba(255, 255, 255, 0.2);
  --color-surface-5: rgba(255, 255, 255, 0.5);
  --color-surface-8: rgba(255, 255, 255, 0.8);
  --color-surface-9: rgba(255, 255, 255, 0.9);
  --color-surface-a: rgba(247, 247, 247, 1);
  --color-surface-dark: rgba(38, 40, 44, 1);
  --color-background: rgba(248, 248, 248, 1);
  --color-background-dark: rgba(29, 30, 32, 1);
  --color-fill: rgba(237, 13, 13, 1);
  --color-fill-hover: rgba(200, 7, 7, 1);
  --color-fill-t: rgba(237, 13, 13, .3);
  --color-fill-spor: rgba(16, 143, 35, 1);
  --color-yellow-spor: rgba(255, 211, 2, 1);
  --color-yellow-spor-t: rgba(255, 246, 171, 1);
  --color-text-on-fill: rgba(255, 255, 255, 1);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-slide: rgba(221, 221, 221, 1);
  --color-green: rgba(90, 193, 42);
  --color-green-2: rgba(56, 153, 11, 1);
  --color-red: rgba(227, 10, 23, 1);
  --color-esh-red: rgba(237, 13, 13, 1);
  --color-red-t: rgba(255, 75, 75, 1);
  --color-yellow: rgba(255, 211, 2, 1);
  --color-blue: rgba(2, 136, 209, 1);
  --color-azure-blue: rgba(31, 147, 255, 1);
  --color-crystal-blue: rgba(76, 198, 244, 1);
  --color-crystal-blue-2: rgba(76, 198, 244, .6);
  --color-athens-gray: rgba(237, 237, 244, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-5: rgba(0, 0, 0, 5);
  --color-black-6: rgba(0, 0, 0, 6);
  --color-shadow: rgba(177, 177, 177, 0.50);
  --color-dark-grey: rgba(219, 219, 219, 1)
}

html[data-theme=light] .dark,
body[data-theme=light] .dark {
  display: none !important
}

html[data-theme=light] .modal #loginregister .logo,
body[data-theme=light] .modal #loginregister .logo {
  background: url("../index/logo_1.svg") 0 0 no-repeat;
  background-size: 100%
}

html[data-theme=light] .logo-bg,
body[data-theme=light] .logo-bg {
  background-image: url("../index/logo_1.svg")
}

html[data-theme=light] .userleave #userleave,
html[data-theme=light] .userleave #overlay,
body[data-theme=light] .userleave #userleave,
body[data-theme=light] .userleave #overlay {
  display: block
}

body {
  overflow-x: hidden
}

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

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

main {
  min-width: 320px;
  max-width: 100%
}

@media(max-width: 568px) {
  main {
    overflow-x: hidden
  }
}

a {
  color: var(--color-text)
}

a:hover,
a:focus,
a:active {
  color: var(--color-text-strong)
}

table th,
table td {
  border-color: var(--color-border)
}

.table-responsive {
  position: relative
}

@media(max-width: 667px) {
  .table-responsive:before {
    content: "";
    display: block;
    position: sticky;
    margin-top: -25px;
    left: 10px;
    top: 8px;
    width: 26px;
    height: 26px;
    background: var(--color-surface) url("../index/swipe.svg") center center no-repeat;
    background-size: 100%;
    z-index: 99
  }
}

.btn {
  display: inline-block;
  padding: 4px 15px;
  line-height: 1.9em;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-white);
  background: var(--color-bg-btn);
  border: 0 none;
  margin-bottom: 0;
  height: auto;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.btn:hover,
.btn:focus,
.btn:active {
  color: var(--color-white);
  background: var(--color-bg-btn-hover)
}

.btn:hover {
  color: var(--color-white);
  background: var(--color-bg-btn-hover)
}

.btn.outline {
  line-height: 1.7em;
  background: rgba(0, 0, 0, 0);
  color: var(--color-bg-btn);
  border: 2px solid var(--color-bg-btn)
}

.btn.outline:hover {
  color: var(--color-bg-btn-hover);
  border-color: var(--color-bg-btn-hover)
}

.btn.green {
  background: var(--color-green)
}

.btn.green:hover {
  color: var(--color-white);
  background: var(--color-green);
  opacity: .8
}

.btn.green.outline {
  color: var(--color-green);
  background: rgba(0, 0, 0, 0);
  border: 2px solid var(--color-green)
}

.btn.black {
  background: var(--color-black)
}

.btn.black:hover {
  color: var(--color-white);
  background: var(--color-black);
  opacity: .8
}

.btn.black.outline {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0);
  border: 2px solid var(--color-black)
}

.btn.white {
  background: var(--color-white)
}

.btn.white:hover {
  color: var(--color-white);
  background: var(--color-white);
  opacity: .8
}

.btn.white.outline {
  color: var(--color-white);
  background: rgba(0, 0, 0, 0);
  border: 2px solid var(--color-white)
}

.btn.red {
  background: var(--color-fill)
}

.btn.red:hover {
  color: var(--color-white);
  background: var(--color-fill-hover)
}

.btn.red.outline {
  color: var(--color-fill);
  background: rgba(0, 0, 0, 0);
  border: 2px solid var(--color-fill)
}

.btn.red.outline:hover {
  color: var(--color-fill-hover);
  border-color: var(--color-fill-hover)
}

.btn.block {
  display: block;
  text-align: center
}

.btn.round {
  -moz-border-radius: 25px !important;
  -webkit-border-radius: 25px !important;
  border-radius: 25px !important
}

.btn.small {
  padding: 4px 15px !important;
  line-height: 1.8em !important;
  font-size: 13px !important
}

.btn.small.outline {
  line-height: 1.6em !important
}

.btn img {
  width: 18px;
  height: 18px;
  float: left;
  margin: 5px 10px 0 0
}

.relative {
  position: relative
}

.scroll {
  overflow-y: auto
}

.scroll.scroll-y {
  overflow-y: auto
}

.scroll.scroll-x {
  overflow-x: auto
}

.scroll.scroll-x::-webkit-scrollbar {
  height: 6px
}

.scroll::-webkit-scrollbar-track {
  background-color: var(--color-bg-img)
}

.scroll::-webkit-scrollbar {
  width: 6px;
  background-color: var(--color-bg-img)
}

.scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-text-secondary)
}

.noscroll {
  overflow: hidden !important
}

blockquote {
  border-left-width: .4rem;
  border-left-color: var(--color-text-tertiary);
  padding: 1.5rem 1.5rem .5rem 1.5rem;
  margin: 30px 0;
  background-color: var(--color-surface);
  background-image: url("../index/quote.svg");
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: right -2px
}

blockquote p {
  font-style: italic !important;
  color: var(--color-text-dark) !important;
  font-weight: 500 !important
}

blockquote small {
  display: block;
  color: var(--color-text-secondary) !important;
  margin-bottom: 1.5rem !important
}

blockquote small:before {
  display: inline-block;
  content: "—";
  margin-right: 5px
}

.page-top {
  margin-bottom: 30px
}

.page-top .widget {
  position: relative;
  background: var(--color-surface);
  padding: 10px;
  border: 1px solid var(--color-border);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.page-top .widget:hover {
  border-color: var(--color-border-h)
}

.page-top .widget input {
  margin-bottom: 0;
  padding-left: 35px;
  border: 2px solid var(--color-border);
  background-repeat: no-repeat
}

.page-top .widget input:hover {
  border-color: var(--color-border-h)
}

.page-top .widget input[type=search] {
  background-image: url("../index/search.svg");
  background-position: 10px 10px;
  background-size: 18px
}

.page-top .widget input#datepicker {
  background-image: url("../index/calendar.svg");
  background-position: 10px 10px;
  background-size: 18px
}

.page-top .widget .date {
  letter-spacing: -0.5px;
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text-secondary);
  line-height: 1em
}

.page-top .widget .daterange {
  position: relative;
  padding: 0 30px;
  margin: 0
}

.page-top .widget .daterange a {
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 32px;
  height: 32px;
  font-size: 30px !important;
  font-weight: 600;
  line-height: 1em
}

.page-top .widget .daterange a.next {
  left: auto;
  right: 0
}

.container {
  max-width: 1194px
}

.container .ad a {
  display: flex
}

@media(max-width: 576px) {
  .container {
    padding-left: 5px;
    padding-right: 5px
  }
}

@media(min-width: 1194px) {
  .container {
    padding-left: 0;
    padding-right: 0
  }
}

@media(max-width: 576px) {
  .container.fw-mobile {
    padding-left: 0;
    padding-right: 0
  }
}

.text-center {
  text-align: center !important
}

.text-right {
  text-align: right !important
}

.text-left {
  text-align: left !important
}

.text-red {
  color: var(--color-fill) !important
}

.align-items-center {
  align-items: center
}

.border-right {
  border-right: 1px solid var(--color-border)
}

.border-left {
  border-left: 1px solid var(--color-border)
}

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

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

@media(min-width: 1024px) {
  .border-desktop-right {
    border-right: 1px solid var(--color-border)
  }

  .border-desktop-left {
    border-left: 1px solid var(--color-border)
  }

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

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

@media(max-width: 992px) {
  .border-mobile-right {
    border-right: 1px solid var(--color-border)
  }

  .border-mobile-left {
    border-left: 1px solid var(--color-border)
  }

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

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

.noborder {
  border-top: 0 none !important;
  border-left: 0 none !important;
  border-bottom: 0 none !important;
  border-right: 0 none !important
}

.visible {
  opacity: 1 !important;
  visibility: inherit !important
}

.hidden {
  display: none
}

.fade {
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out
}

.fade.in {
  opacity: 1 !important;
  visibility: visible !important
}

.fade.out {
  opacity: 0 !important;
  visibility: hidden !important
}

.fade.hide {
  display: none !important
}

.show {
  display: block !important
}

@media(max-width: 667px) {
  .show-mobile {
    display: block !important
  }
}

@media(min-width: 667px) {
  .show-desktop {
    display: block !important
  }
}

.hide {
  display: none !important
}

@media(max-width: 667px) {
  .hide-mobile {
    display: none !important
  }
}

@media(min-width: 667px) {
  .hide-desktop {
    display: none !important
  }
}

hr {
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0
}

@media(min-width: 668px) {
  .hd-0 {
    min-height: 0px !important
  }
}

.hm-0 {
  min-height: 0px !important
}

@media(min-width: 668px) {
  .hd-10 {
    min-height: 10px !important
  }
}

.hm-10 {
  min-height: 10px !important
}

@media(min-width: 668px) {
  .hd-20 {
    min-height: 20px !important
  }
}

.hm-20 {
  min-height: 20px !important
}

@media(min-width: 668px) {
  .hd-30 {
    min-height: 30px !important
  }
}

.hm-30 {
  min-height: 30px !important
}

@media(min-width: 668px) {
  .hd-40 {
    min-height: 40px !important
  }
}

.hm-40 {
  min-height: 40px !important
}

@media(min-width: 668px) {
  .hd-50 {
    min-height: 50px !important
  }
}

.hm-50 {
  min-height: 50px !important
}

@media(min-width: 668px) {
  .hd-60 {
    min-height: 60px !important
  }
}

.hm-60 {
  min-height: 60px !important
}

@media(min-width: 668px) {
  .hd-70 {
    min-height: 70px !important
  }
}

.hm-70 {
  min-height: 70px !important
}

@media(min-width: 668px) {
  .hd-80 {
    min-height: 80px !important
  }
}

.hm-80 {
  min-height: 80px !important
}

@media(min-width: 668px) {
  .hd-90 {
    min-height: 90px !important
  }
}

.hm-90 {
  min-height: 90px !important
}

@media(min-width: 668px) {
  .hd-100 {
    min-height: 100px !important
  }
}

.hm-100 {
  min-height: 100px !important
}

@media(min-width: 668px) {
  .hd-110 {
    min-height: 110px !important
  }
}

.hm-110 {
  min-height: 110px !important
}

@media(min-width: 668px) {
  .hd-120 {
    min-height: 120px !important
  }
}

.hm-120 {
  min-height: 120px !important
}

@media(min-width: 668px) {
  .hd-130 {
    min-height: 130px !important
  }
}

.hm-130 {
  min-height: 130px !important
}

@media(min-width: 668px) {
  .hd-140 {
    min-height: 140px !important
  }
}

.hm-140 {
  min-height: 140px !important
}

@media(min-width: 668px) {
  .hd-150 {
    min-height: 150px !important
  }
}

.hm-150 {
  min-height: 150px !important
}

@media(min-width: 668px) {
  .hd-160 {
    min-height: 160px !important
  }
}

.hm-160 {
  min-height: 160px !important
}

@media(min-width: 668px) {
  .hd-170 {
    min-height: 170px !important
  }
}

.hm-170 {
  min-height: 170px !important
}

@media(min-width: 668px) {
  .hd-180 {
    min-height: 180px !important
  }
}

.hm-180 {
  min-height: 180px !important
}

@media(min-width: 668px) {
  .hd-190 {
    min-height: 190px !important
  }
}

.hm-190 {
  min-height: 190px !important
}

@media(min-width: 668px) {
  .hd-200 {
    min-height: 200px !important
  }
}

.hm-200 {
  min-height: 200px !important
}

@media(min-width: 668px) {
  .hd-210 {
    min-height: 210px !important
  }
}

.hm-210 {
  min-height: 210px !important
}

@media(min-width: 668px) {
  .hd-220 {
    min-height: 220px !important
  }
}

.hm-220 {
  min-height: 220px !important
}

@media(min-width: 668px) {
  .hd-230 {
    min-height: 230px !important
  }
}

.hm-230 {
  min-height: 230px !important
}

@media(min-width: 668px) {
  .hd-240 {
    min-height: 240px !important
  }
}

.hm-240 {
  min-height: 240px !important
}

@media(min-width: 668px) {
  .hd-250 {
    min-height: 250px !important
  }
}

.hm-250 {
  min-height: 250px !important
}

@media(min-width: 668px) {
  .hd-260 {
    min-height: 260px !important
  }
}

.hm-260 {
  min-height: 260px !important
}

@media(min-width: 668px) {
  .hd-270 {
    min-height: 270px !important
  }
}

.hm-270 {
  min-height: 270px !important
}

@media(min-width: 668px) {
  .hd-280 {
    min-height: 280px !important
  }
}

.hm-280 {
  min-height: 280px !important
}

@media(min-width: 668px) {
  .hd-290 {
    min-height: 290px !important
  }
}

.hm-290 {
  min-height: 290px !important
}

@media(min-width: 668px) {
  .hd-300 {
    min-height: 300px !important
  }
}

.hm-300 {
  min-height: 300px !important
}

@media(min-width: 668px) {
  .hd-310 {
    min-height: 310px !important
  }
}

.hm-310 {
  min-height: 310px !important
}

@media(min-width: 668px) {
  .hd-320 {
    min-height: 320px !important
  }
}

.hm-320 {
  min-height: 320px !important
}

@media(min-width: 668px) {
  .hd-330 {
    min-height: 330px !important
  }
}

.hm-330 {
  min-height: 330px !important
}

@media(min-width: 668px) {
  .hd-340 {
    min-height: 340px !important
  }
}

.hm-340 {
  min-height: 340px !important
}

@media(min-width: 668px) {
  .hd-350 {
    min-height: 350px !important
  }
}

.hm-350 {
  min-height: 350px !important
}

@media(min-width: 668px) {
  .hd-360 {
    min-height: 360px !important
  }
}

.hm-360 {
  min-height: 360px !important
}

@media(min-width: 668px) {
  .hd-370 {
    min-height: 370px !important
  }
}

.hm-370 {
  min-height: 370px !important
}

@media(min-width: 668px) {
  .hd-380 {
    min-height: 380px !important
  }
}

.hm-380 {
  min-height: 380px !important
}

@media(min-width: 668px) {
  .hd-390 {
    min-height: 390px !important
  }
}

.hm-390 {
  min-height: 390px !important
}

@media(min-width: 668px) {
  .hd-400 {
    min-height: 400px !important
  }
}

.hm-400 {
  min-height: 400px !important
}

@media(min-width: 668px) {
  .hd-410 {
    min-height: 410px !important
  }
}

.hm-410 {
  min-height: 410px !important
}

@media(min-width: 668px) {
  .hd-420 {
    min-height: 420px !important
  }
}

.hm-420 {
  min-height: 420px !important
}

@media(min-width: 668px) {
  .hd-430 {
    min-height: 430px !important
  }
}

.hm-430 {
  min-height: 430px !important
}

@media(min-width: 668px) {
  .hd-440 {
    min-height: 440px !important
  }
}

.hm-440 {
  min-height: 440px !important
}

@media(min-width: 668px) {
  .hd-450 {
    min-height: 450px !important
  }
}

.hm-450 {
  min-height: 450px !important
}

@media(min-width: 668px) {
  .hd-460 {
    min-height: 460px !important
  }
}

.hm-460 {
  min-height: 460px !important
}

@media(min-width: 668px) {
  .hd-470 {
    min-height: 470px !important
  }
}

.hm-470 {
  min-height: 470px !important
}

@media(min-width: 668px) {
  .hd-480 {
    min-height: 480px !important
  }
}

.hm-480 {
  min-height: 480px !important
}

@media(min-width: 668px) {
  .hd-490 {
    min-height: 490px !important
  }
}

.hm-490 {
  min-height: 490px !important
}

@media(min-width: 668px) {
  .hd-500 {
    min-height: 500px !important
  }
}

.hm-500 {
  min-height: 500px !important
}

@media(min-width: 668px) {
  .hd-510 {
    min-height: 510px !important
  }
}

.hm-510 {
  min-height: 510px !important
}

@media(min-width: 668px) {
  .hd-520 {
    min-height: 520px !important
  }
}

.hm-520 {
  min-height: 520px !important
}

@media(min-width: 668px) {
  .hd-530 {
    min-height: 530px !important
  }
}

.hm-530 {
  min-height: 530px !important
}

@media(min-width: 668px) {
  .hd-540 {
    min-height: 540px !important
  }
}

.hm-540 {
  min-height: 540px !important
}

@media(min-width: 668px) {
  .hd-550 {
    min-height: 550px !important
  }
}

.hm-550 {
  min-height: 550px !important
}

@media(min-width: 668px) {
  .hd-560 {
    min-height: 560px !important
  }
}

.hm-560 {
  min-height: 560px !important
}

@media(min-width: 668px) {
  .hd-570 {
    min-height: 570px !important
  }
}

.hm-570 {
  min-height: 570px !important
}

@media(min-width: 668px) {
  .hd-580 {
    min-height: 580px !important
  }
}

.hm-580 {
  min-height: 580px !important
}

@media(min-width: 668px) {
  .hd-590 {
    min-height: 590px !important
  }
}

.hm-590 {
  min-height: 590px !important
}

@media(min-width: 668px) {
  .hd-600 {
    min-height: 600px !important
  }
}

.hm-600 {
  min-height: 600px !important
}

.top-0 {
  top: 0px !important
}

.mt-0 {
  margin-top: 0px !important
}

.mb-0 {
  margin-bottom: 0px !important
}

.mr-0 {
  margin-right: 0px !important
}

.ml-0 {
  margin-left: 0px !important
}

.pt-0 {
  padding-top: 0px !important
}

.pb-0 {
  padding-bottom: 0px !important
}

.pr-0 {
  padding-right: 0px !important
}

.pl-0 {
  padding-left: 0px !important
}

.top-5 {
  top: 5px !important
}

.mt-5 {
  margin-top: 5px !important
}

.mb-5 {
  margin-bottom: 5px !important
}

.mr-5 {
  margin-right: 5px !important
}

.ml-5 {
  margin-left: 5px !important
}

.pt-5 {
  padding-top: 5px !important
}

.pb-5 {
  padding-bottom: 5px !important
}

.pr-5 {
  padding-right: 5px !important
}

.pl-5 {
  padding-left: 5px !important
}

.top-10 {
  top: 10px !important
}

.mt-10 {
  margin-top: 10px !important
}

.mb-10 {
  margin-bottom: 10px !important
}

.mr-10 {
  margin-right: 10px !important
}

.ml-10 {
  margin-left: 10px !important
}

.pt-10 {
  padding-top: 10px !important
}

.pb-10 {
  padding-bottom: 10px !important
}

.pr-10 {
  padding-right: 10px !important
}

.pl-10 {
  padding-left: 10px !important
}

.top-15 {
  top: 15px !important
}

.mt-15 {
  margin-top: 15px !important
}

.mb-15 {
  margin-bottom: 15px !important
}

.mr-15 {
  margin-right: 15px !important
}

.ml-15 {
  margin-left: 15px !important
}

.pt-15 {
  padding-top: 15px !important
}

.pb-15 {
  padding-bottom: 15px !important
}

.pr-15 {
  padding-right: 15px !important
}

.pl-15 {
  padding-left: 15px !important
}

.top-20 {
  top: 20px !important
}

.mt-20 {
  margin-top: 20px !important
}

.mb-20 {
  margin-bottom: 20px !important
}

.mr-20 {
  margin-right: 20px !important
}

.ml-20 {
  margin-left: 20px !important
}

.pt-20 {
  padding-top: 20px !important
}

.pb-20 {
  padding-bottom: 20px !important
}

.pr-20 {
  padding-right: 20px !important
}

.pl-20 {
  padding-left: 20px !important
}

.top-25 {
  top: 25px !important
}

.mt-25 {
  margin-top: 25px !important
}

.mb-25 {
  margin-bottom: 25px !important
}

.mr-25 {
  margin-right: 25px !important
}

.ml-25 {
  margin-left: 25px !important
}

.pt-25 {
  padding-top: 25px !important
}

.pb-25 {
  padding-bottom: 25px !important
}

.pr-25 {
  padding-right: 25px !important
}

.pl-25 {
  padding-left: 25px !important
}

.top-30 {
  top: 30px !important
}

.mt-30 {
  margin-top: 30px !important
}

.mb-30 {
  margin-bottom: 30px !important
}

.mr-30 {
  margin-right: 30px !important
}

.ml-30 {
  margin-left: 30px !important
}

.pt-30 {
  padding-top: 30px !important
}

.pb-30 {
  padding-bottom: 30px !important
}

.pr-30 {
  padding-right: 30px !important
}

.pl-30 {
  padding-left: 30px !important
}

.top-35 {
  top: 35px !important
}

.mt-35 {
  margin-top: 35px !important
}

.mb-35 {
  margin-bottom: 35px !important
}

.mr-35 {
  margin-right: 35px !important
}

.ml-35 {
  margin-left: 35px !important
}

.pt-35 {
  padding-top: 35px !important
}

.pb-35 {
  padding-bottom: 35px !important
}

.pr-35 {
  padding-right: 35px !important
}

.pl-35 {
  padding-left: 35px !important
}

.top-40 {
  top: 40px !important
}

.mt-40 {
  margin-top: 40px !important
}

.mb-40 {
  margin-bottom: 40px !important
}

.mr-40 {
  margin-right: 40px !important
}

.ml-40 {
  margin-left: 40px !important
}

.pt-40 {
  padding-top: 40px !important
}

.pb-40 {
  padding-bottom: 40px !important
}

.pr-40 {
  padding-right: 40px !important
}

.pl-40 {
  padding-left: 40px !important
}

.top-45 {
  top: 45px !important
}

.mt-45 {
  margin-top: 45px !important
}

.mb-45 {
  margin-bottom: 45px !important
}

.mr-45 {
  margin-right: 45px !important
}

.ml-45 {
  margin-left: 45px !important
}

.pt-45 {
  padding-top: 45px !important
}

.pb-45 {
  padding-bottom: 45px !important
}

.pr-45 {
  padding-right: 45px !important
}

.pl-45 {
  padding-left: 45px !important
}

.top-50 {
  top: 50px !important
}

.mt-50 {
  margin-top: 50px !important
}

.mb-50 {
  margin-bottom: 50px !important
}

.mr-50 {
  margin-right: 50px !important
}

.ml-50 {
  margin-left: 50px !important
}

.pt-50 {
  padding-top: 50px !important
}

.pb-50 {
  padding-bottom: 50px !important
}

.pr-50 {
  padding-right: 50px !important
}

.pl-50 {
  padding-left: 50px !important
}

.top-55 {
  top: 55px !important
}

.mt-55 {
  margin-top: 55px !important
}

.mb-55 {
  margin-bottom: 55px !important
}

.mr-55 {
  margin-right: 55px !important
}

.ml-55 {
  margin-left: 55px !important
}

.pt-55 {
  padding-top: 55px !important
}

.pb-55 {
  padding-bottom: 55px !important
}

.pr-55 {
  padding-right: 55px !important
}

.pl-55 {
  padding-left: 55px !important
}

.top-60 {
  top: 60px !important
}

.mt-60 {
  margin-top: 60px !important
}

.mb-60 {
  margin-bottom: 60px !important
}

.mr-60 {
  margin-right: 60px !important
}

.ml-60 {
  margin-left: 60px !important
}

.pt-60 {
  padding-top: 60px !important
}

.pb-60 {
  padding-bottom: 60px !important
}

.pr-60 {
  padding-right: 60px !important
}

.pl-60 {
  padding-left: 60px !important
}

.top-65 {
  top: 65px !important
}

.mt-65 {
  margin-top: 65px !important
}

.mb-65 {
  margin-bottom: 65px !important
}

.mr-65 {
  margin-right: 65px !important
}

.ml-65 {
  margin-left: 65px !important
}

.pt-65 {
  padding-top: 65px !important
}

.pb-65 {
  padding-bottom: 65px !important
}

.pr-65 {
  padding-right: 65px !important
}

.pl-65 {
  padding-left: 65px !important
}

.top-70 {
  top: 70px !important
}

.mt-70 {
  margin-top: 70px !important
}

.mb-70 {
  margin-bottom: 70px !important
}

.mr-70 {
  margin-right: 70px !important
}

.ml-70 {
  margin-left: 70px !important
}

.pt-70 {
  padding-top: 70px !important
}

.pb-70 {
  padding-bottom: 70px !important
}

.pr-70 {
  padding-right: 70px !important
}

.pl-70 {
  padding-left: 70px !important
}

.top-75 {
  top: 75px !important
}

.mt-75 {
  margin-top: 75px !important
}

.mb-75 {
  margin-bottom: 75px !important
}

.mr-75 {
  margin-right: 75px !important
}

.ml-75 {
  margin-left: 75px !important
}

.pt-75 {
  padding-top: 75px !important
}

.pb-75 {
  padding-bottom: 75px !important
}

.pr-75 {
  padding-right: 75px !important
}

.pl-75 {
  padding-left: 75px !important
}

.top-80 {
  top: 80px !important
}

.mt-80 {
  margin-top: 80px !important
}

.mb-80 {
  margin-bottom: 80px !important
}

.mr-80 {
  margin-right: 80px !important
}

.ml-80 {
  margin-left: 80px !important
}

.pt-80 {
  padding-top: 80px !important
}

.pb-80 {
  padding-bottom: 80px !important
}

.pr-80 {
  padding-right: 80px !important
}

.pl-80 {
  padding-left: 80px !important
}

.top-85 {
  top: 85px !important
}

.mt-85 {
  margin-top: 85px !important
}

.mb-85 {
  margin-bottom: 85px !important
}

.mr-85 {
  margin-right: 85px !important
}

.ml-85 {
  margin-left: 85px !important
}

.pt-85 {
  padding-top: 85px !important
}

.pb-85 {
  padding-bottom: 85px !important
}

.pr-85 {
  padding-right: 85px !important
}

.pl-85 {
  padding-left: 85px !important
}

.top-90 {
  top: 90px !important
}

.mt-90 {
  margin-top: 90px !important
}

.mb-90 {
  margin-bottom: 90px !important
}

.mr-90 {
  margin-right: 90px !important
}

.ml-90 {
  margin-left: 90px !important
}

.pt-90 {
  padding-top: 90px !important
}

.pb-90 {
  padding-bottom: 90px !important
}

.pr-90 {
  padding-right: 90px !important
}

.pl-90 {
  padding-left: 90px !important
}

.top-95 {
  top: 95px !important
}

.mt-95 {
  margin-top: 95px !important
}

.mb-95 {
  margin-bottom: 95px !important
}

.mr-95 {
  margin-right: 95px !important
}

.ml-95 {
  margin-left: 95px !important
}

.pt-95 {
  padding-top: 95px !important
}

.pb-95 {
  padding-bottom: 95px !important
}

.pr-95 {
  padding-right: 95px !important
}

.pl-95 {
  padding-left: 95px !important
}

.top-100 {
  top: 100px !important
}

.mt-100 {
  margin-top: 100px !important
}

.mb-100 {
  margin-bottom: 100px !important
}

.mr-100 {
  margin-right: 100px !important
}

.ml-100 {
  margin-left: 100px !important
}

.pt-100 {
  padding-top: 100px !important
}

.pb-100 {
  padding-bottom: 100px !important
}

.pr-100 {
  padding-right: 100px !important
}

.pl-100 {
  padding-left: 100px !important
}

.desc-widget {
  padding: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border)
}

.desc-widget .head {
  margin-bottom: 2.5rem !important
}

.desc-widget p {
  margin-bottom: 1rem;
  font-size: 15px;
  font-size: .9375rem;
  letter-spacing: -0.5px
}

.desc-widget p.title {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700
}

.desc-widget p:last-child {
  margin-bottom: 0
}

@media(max-width: 667px) {
  .desc-widget .column-33 {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    margin-bottom: 20px
  }
}

#userleave {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  box-shadow: 0 4px 5px 0 var(--color-shadow);
  overflow: hidden;
  z-index: 99999
}

#userleave .inner {
  position: relative;
  padding: 30px 40px 40px 40px;
  height: 100%
}

#userleave .inner .scroller {
  overflow: auto;
  height: 95%
}

@media(min-width: 992px) {
  #userleave .inner .scroller {
    overflow: inherit;
    height: 100%
  }
}

#userleave .inner .row .column {
  border-right: 1px solid var(--color-border)
}

#userleave .inner .row .column:last-child {
  border-right: 0 none
}

#userleave .inner .row .column a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  max-height: 285px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}

#userleave .inner .row .column a:hover {
  transform: translateY(-3px)
}

#userleave .inner .row .column a .badge {
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: var(--color-yellow);
  padding: 3px 6px;
  line-height: 1.2em
}

#userleave .inner .row .column a .head,
#userleave .inner .row .column a h2 {
  font-size: 18px;
  font-size: 1.125rem;
  letter-spacing: -0.5px;
  font-weight: 600;
  line-height: 1.2em;
  margin-top: 5px;
  margin-bottom: 10px
}

#userleave .inner .row .column a img {
  width: 100%;
  height: auto
}

#userleave .inner .row .column a .text {
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5em
}

@media(max-width: 834px) {
  #userleave .inner .row .column a {
    max-height: none;
    margin-bottom: 30px
  }
}

@media(max-width: 576px) {
  #userleave .inner .row .column {
    border-right: 0 none
  }
}

@media(min-width: 667px) {
  #userleave .inner .row {
    min-width: 1000px
  }
}

@media(min-width: 992px) {
  #userleave .inner .row {
    min-width: auto
  }
}

#userleave .inner h1 {
  position: relative;
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.8px
}

#userleave .inner h1:after {
  content: " ";
  display: block;
  width: 100px;
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: var(--color-fill)
}

#userleave .inner h1 i {
  font-size: 26px;
  font-size: 1.625rem;
  position: relative;
  top: 3px;
  color: var(--color-fill)
}

#userleave .inner .close {
  position: absolute;
  right: 20px;
  top: 20px;
  color: var(--color-text-secondary);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#userleave .inner .close:hover {
  color: var(--color-fill)
}

@media(max-width: 375px) {
  #userleave .inner {
    padding: 30px
  }
}

@media(max-width: 834px) {
  #userleave {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none
  }
}

@media(min-width: 834px) {
  #userleave {
    min-width: 800px
  }
}

.hotnews .head,
.hotnews h2,
.related .head,
.related h2,
.comments .head,
.comments h2,
.livetv .head,
.livetv h2,
.sidebar-slider .head,
.sidebar-slider h2,
.tag-info .head,
.tag-info h2,
.column .head,
.column h2,
.summary .head,
.summary h2,
.widget .head,
.widget h2,
section .head,
section h2 {
  font-size: 22px;
  font-size: 1.375rem;
  position: relative;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin-bottom: 2rem
}

.hotnews .head i,
.hotnews h2 i,
.related .head i,
.related h2 i,
.comments .head i,
.comments h2 i,
.livetv .head i,
.livetv h2 i,
.sidebar-slider .head i,
.sidebar-slider h2 i,
.tag-info .head i,
.tag-info h2 i,
.column .head i,
.column h2 i,
.summary .head i,
.summary h2 i,
.widget .head i,
.widget h2 i,
section .head i,
section h2 i {
  font-size: 26px;
  font-size: 1.625rem;
  position: relative;
  top: 3px;
  color: var(--color-fill)
}

.hotnews .head.noborder:after,
.hotnews h2.noborder:after,
.related .head.noborder:after,
.related h2.noborder:after,
.comments .head.noborder:after,
.comments h2.noborder:after,
.livetv .head.noborder:after,
.livetv h2.noborder:after,
.sidebar-slider .head.noborder:after,
.sidebar-slider h2.noborder:after,
.tag-info .head.noborder:after,
.tag-info h2.noborder:after,
.column .head.noborder:after,
.column h2.noborder:after,
.summary .head.noborder:after,
.summary h2.noborder:after,
.widget .head.noborder:after,
.widget h2.noborder:after,
section .head.noborder:after,
section h2.noborder:after {
  display: none
}

.hotnews .period-selector,
.related .period-selector,
.comments .period-selector,
.livetv .period-selector,
.sidebar-slider .period-selector,
.tag-info .period-selector,
.column .period-selector,
.summary .period-selector,
.widget .period-selector,
section .period-selector {
  text-align: right
}

@media(max-width: 667px) {

  .hotnews .period-selector,
  .related .period-selector,
  .comments .period-selector,
  .livetv .period-selector,
  .sidebar-slider .period-selector,
  .tag-info .period-selector,
  .column .period-selector,
  .summary .period-selector,
  .widget .period-selector,
  section .period-selector {
    text-align: center;
    margin-bottom: 20px
  }

  .hotnews .period-selector a,
  .related .period-selector a,
  .comments .period-selector a,
  .livetv .period-selector a,
  .sidebar-slider .period-selector a,
  .tag-info .period-selector a,
  .column .period-selector a,
  .summary .period-selector a,
  .widget .period-selector a,
  section .period-selector a {
    display: inline-block;
    width: 22%
  }
}

section.magazin {
  margin: 3rem 0
}

h1.title {
  font-size: 24px;
  font-size: 1.5rem;
  position: relative;
  font-weight: 600;
  letter-spacing: -1px;
  margin-bottom: 2.5rem
}

h1.title i {
  font-size: 26px;
  font-size: 1.625rem;
  position: relative;
  top: 3px;
  color: var(--color-fill)
}

h1.title:after {
  content: " ";
  display: block;
  width: 100px;
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background: var(--color-fill)
}

.related .error,
.related .loading {
  text-align: center;
  padding: 40px;
  margin-top: 20px;
  background: var(--color-background)
}

.related .error img,
.related .error svg,
.related .loading img,
.related .loading svg {
  width: 60px
}

.related .error {
  color: var(--color-red)
}

.related .loaded .loading {
  display: none
}

.related a.item {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: -0.2px
}

.related a.item .cropper {
  display: block;
  max-height: 135px;
  overflow: hidden;
  margin-bottom: 10px
}

.related a.item .info {
  display: block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400;
  margin-top: 5px;
  color: var(--color-text-secondary)
}

.related a.item:hover .info {
  color: var(--color-text-secondary)
}

@media(max-width: 568px) {
  .related a.item {
    margin-bottom: 1.5rem
  }
}

.info-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1rem
}

.info-box .title {
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .5rem
}

.info-box .title i {
  color: var(--color-fill)
}

@media(max-width: 768px) {
  .info-box {
    margin-bottom: 20px
  }
}

.column-social {
  padding-left: 0 !important;
  padding-right: 0 !important
}

@media(min-width: 1112px) {
  .column-social {
    max-width: 82px !important
  }
}

@media(max-width: 1112px) {
  .column-social {
    position: fixed;
    z-index: 99;
    top: 50px;
    left: 0;
    height: 44px;
    display: none !important;
    align-items: center;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border)
  }
}

.sidebar {
  min-width: 301px;
  max-width: 408px !important
}

.sidebar .banner {
  text-align: center;
  margin-bottom: 30px
}

.sidebar .banner.sticky {
  position: sticky;
  top: 60px
}

.sidebar .shotnews .shotsItem {
  display: block;
  padding: 1rem;
  margin-bottom: 2rem;
  color: var(--color-black-white)
}

.sidebar .shotnews .shotsItem img {
  width: 100%
}

.sidebar .shotnews .shotsItem .text {
  display: block;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.3em;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical
}

.sidebar .related {
  display: grid;
  margin-bottom: 20px
}

.sidebar .related.related-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 15px
}

.sidebar .related a {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.3em;
  font-weight: 600;
  color: var(--color-black-white);
  letter-spacing: -0.3px
}

.sidebar .related a .crop {
  display: flex;
  height: 103px;
  overflow: hidden;
  margin-bottom: 10px
}

.sidebar .related a .crop img {
  width: 100%;
  min-height: 103px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.sidebar .related a:hover img {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6)
}

.sidebar .widget {
  position: relative;
  background: var(--color-surface);
  padding: 20px 30px;
  border: 1px solid var(--color-border)
}

.sidebar .widget .head {
  position: relative;
  font-size: 20px;
  font-size: 1.25rem
}

.sidebar .widget .head:after {
  height: 3px
}

.sidebar .widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 2.2em
}

@media(min-width: 768px) {
  .sidebar .sticky {
    position: sticky;
    top: 50px
  }
}

@media(max-width: 990px) {
  .sidebar {
    display: none !important
  }
}

#articles .seperator {
  border-top: .2rem solid var(--color-border);
  position: relative;
  margin: 4rem 0
}

#articles .seperator span {
  margin: 0 auto;
  margin-top: -15px;
  display: block;
  width: 150px;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  letter-spacing: -0.5px;
  z-index: 9
}

.grid {
  max-width: 1194px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem
}

.grid .item {
  background: var(--color-surface)
}

.grid .item a {
  display: block;
  position: relative;
  color: var(--color-black-white)
}

.grid .item a img {
  width: 100%;
  height: auto;
  display: flex;
  margin: 0 auto;
  object-fit: cover
}

.grid .item a .thumb {
  display: block;
  position: relative;
  text-align: center;
  overflow: hidden;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.grid .item a .thumb img {
  position: relative
}

.grid .item a .thumb img.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  filter: blur(8px)
}

.grid .item a .details {
  display: block;
  padding: 10px;
  padding-bottom: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 500
}

.grid .item a .details .category,
.grid .item a .details .watchcount {
  float: right;
  padding-left: 20px;
  background: url("../index/watch.svg") 0 2px no-repeat;
  background-size: 17px;
  color: var(--color-text-secondary);
  letter-spacing: -0.6px
}

.grid .item a .details .category {
  font-size: 12px;
  font-size: .75rem;
  font-weight: 400;
  background: var(--color-surface-dark);
  color: var(--color-white);
  letter-spacing: -0.5px;
  line-height: 1em;
  padding: 4px 5px
}

.grid .item a .details .person,
.grid .item a .details .viewcount,
.grid .item a .details .published {
  padding-left: 17px;
  background: url("../index/clock.svg") 0 2px no-repeat;
  background-size: 13px;
  color: var(--color-text-secondary);
  letter-spacing: -0.6px
}

.grid .item a .details .viewcount {
  padding-left: 20px;
  background: url("../index/watch.svg") 0 0 no-repeat;
  background-size: 17px
}

.grid .item a .details .person {
  padding-left: 20px;
  background: url("../index/user.svg") 0 0 no-repeat;
  background-size: 17px
}

.grid .item a h3,
.grid .item a .text {
  display: block
}

.grid .item a h3,
.grid .item a .text {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-black-white);
  height: 90px;
  overflow: hidden;
  line-height: 1.3em;
  margin-bottom: 0
}

.grid .item a h3 span,
.grid .item a .text span {
  display: block;
  padding: 0 15px;
  max-height: 70px;
  overflow: hidden
}

@media(max-width: 568px) {

  .grid .item a h3,
  .grid .item a .text {
    height: auto;
    font-size: 17px;
    font-size: 1.0625rem
  }

  .grid .item a h3 span,
  .grid .item a .text span {
    padding: 10px 15px;
    max-height: none
  }
}

.grid .item a .time {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 0 5px;
  letter-spacing: -0.5px;
  line-height: 1.5em;
  font-size: 12px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-white);
  background: rgba(0, 0, 0, .7);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.grid .item a .badge {
  position: absolute;
  right: 15px;
  top: 17px;
  letter-spacing: -1px;
  font-weight: 600;
  font-size: 13px;
  font-size: .8125rem
}

.grid .item a .badge .text {
  display: block;
  padding: 2px 7px;
  color: #fff;
  background: var(--color-fill);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: 0 2px 4px 0 rgba(83, 83, 83, .9)
}

.grid .item a .badge.hot .text {
  background: var(--color-red)
}

.grid .item a .badge.flash .text {
  color: #000;
  background: var(--color-yellow)
}

.grid .item.video>a .badge {
  top: 50px
}

.grid .item.video>a:after {
  content: " ";
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  background: url("../index/play3.svg") center center no-repeat;
  background-size: 100%
}

.grid .item.video>a:hover:after {
  opacity: 1
}

.grid .item.video>a:hover .thumb {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6)
}

.grid .item.video>a:hover .thumb:after {
  opacity: 0
}

.grid .item .title {
  color: var(--color-white);
  background: var(--color-fill);
  padding: 7px 15px
}

.grid .item .title .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 20px;
  font-size: 1.25rem
}

.grid .item .title .head i {
  color: var(--color-white);
  font-size: 20px;
  font-size: 1.25rem
}

.grid .item .title .head a {
  color: var(--color-white);
  font-weight: 400;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6em
}

.grid .item .title .head:after {
  display: none
}

.grid .item .half {
  padding: 0 10px
}

.grid .item .half .box {
  position: relative
}

.grid .item .half .box:hover .image {
  transform: scale(1.05)
}

.grid .item .half .box .image {
  position: absolute;
  display: block;
  top: 20px;
  left: 2px;
  width: 80px;
  height: 80px;
  text-align: center;
  overflow: hidden;
  border-radius: 50%;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.grid .item .half .box .image img {
  max-width: none;
  width: auto;
  height: 105%
}

.grid .item .half .box .name {
  display: block;
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.grid .item .half .box .desc {
  display: block;
  max-height: 60px;
  line-height: 1.4em;
  color: var(--color-text-secondary);
  overflow: hidden;
  font-size: 14px;
  font-size: .875rem;
  letter-spacing: -0.5px
}

.grid .item .half .box:first-child {
  border-bottom: 1px solid var(--color-border)
}

.grid .item .half.bio .box {
  padding: 20px 0 20px 100px
}

.grid .item .half.eq {
  padding-bottom: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  height: 100%
}

.grid .item .half.eq .box {
  padding-top: 22px;
  box-sizing: border-box;
  flex: 1
}

.grid .item .half.eq .box h3 {
  padding: 20px
}

.grid .item.borntoday {
  padding-bottom: 0
}

.grid .item.borntoday ul {
  list-style: none;
  padding: 0;
  margin: 20px
}

.grid .item.borntoday ul li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border)
}

.grid .item.borntoday ul li:last-child {
  border-bottom: 0
}

.grid .item.borntoday ul li a {
  display: block;
  position: relative;
  padding: 10px 15px 10px 30px;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: -0.5px
}

.grid .item.borntoday ul li a i {
  position: absolute;
  left: 4px;
  top: 9px;
  color: var(--color-fill);
  font-size: 22px;
  font-size: 1.375rem
}

.grid .item.borntoday ul li a .desc {
  display: block;
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--color-text-secondary)
}

.grid .item.borntoday ul li a .date {
  float: right;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400
}

.grid .item .swiper-container {
  max-width: 340px;
  padding-bottom: 25px
}

@media(max-width: 1194px) {
  .grid .item .swiper-container {
    max-width: 330px
  }
}

@media(max-width: 667px) {
  .grid .item .swiper-container {
    max-width: 280px
  }
}

@media(max-width: 576px) {
  .grid .item .swiper-container {
    max-width: 440px
  }
}

@media(max-width: 425px) {
  .grid .item .swiper-container {
    max-width: 380px
  }
}

@media(max-width: 375px) {
  .grid .item .swiper-container {
    max-width: 320px
  }
}

@media(max-width: 320px) {
  .grid .item .swiper-container {
    max-width: 280px
  }
}

.grid .item .swiper-button-next,
.grid .item .swiper-button-prev {
  top: auto;
  bottom: 18px
}

.grid .item .swiper-pagination {
  bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 80%
}

.grid .item .swiper-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px
}

.grid .item.item-1 {
  grid-template-columns: repeat(1, 1fr)
}

.grid .item.item-2 {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr)
}

@media(min-width: 667px) {
  .grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.grid.grid-full {
  width: 100%;
  height: 100%
}

.grid.grid-mosaic {
  grid-template-columns: repeat(1, 1fr);
  margin-bottom: 1rem
}

.grid.grid-mosaic .item {
  background: none
}

.grid.grid-mosaic .item a {
  background: var(--color-surface);
  height: 100%
}

.grid.grid-mosaic .item a .thumb {
  display: flex
}

@media(min-width: 1194px) {
  .grid.grid-mosaic .item a .thumb {
    height: 208px
  }
}

.grid.grid-mosaic .item a .text {
  display: flex;
  align-items: center;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-black-white);
  height: 75px;
  overflow: hidden;
  line-height: 1.3em
}

.grid.grid-mosaic .item a .text span {
  display: block;
  padding: 0 15px;
  max-height: 44px;
  overflow: hidden
}

.grid.grid-mosaic .item.tower a .thumb {
  min-height: 516px
}

.grid.grid-mosaic .item.tower a .thumb img {
  object-fit: cover
}

.grid.grid-mosaic.grid-full .item a .thumb {
  min-height: 530px
}

.grid.grid-slider {
  background: var(--color-surface);
  padding: 1rem 1rem 1rem;
  margin-bottom: 15px;
  overflow: hidden;
  grid-template-columns: repeat(1, 1fr)
}

@media(min-width: 1112px) {
  .grid.grid-slider {
    height: 285px;
    max-width: 398px
  }
}

.grid.grid-slider #swiper-mosaic {
  width: 100%;
  overflow: hidden;
  position: relative
}

@media(min-width: 1112px) {
  .grid.grid-slider #swiper-mosaic {
    max-width: 377px
  }
}

@media(max-width: 1112px) {
  .grid.grid-slider #swiper-mosaic {
    padding-bottom: 1rem
  }
}

.grid.grid-slider #swiper-mosaic .swiper-slide {
  width: 100%
}

.grid.grid-slider #swiper-mosaic .swiper-slide a {
  display: block
}

.grid.grid-slider #swiper-mosaic .swiper-slide a figure {
  display: block;
  width: 100%
}

.grid.grid-slider #swiper-mosaic .swiper-slide a figure .thumb {
  display: flex;
  width: 100%;
  overflow: hidden
}

@media(min-width: 1112px) {
  .grid.grid-slider #swiper-mosaic .swiper-slide a figure .thumb {
    max-height: 191px
  }
}

.grid.grid-slider #swiper-mosaic .swiper-slide a figure .thumb img {
  width: 100%;
  height: auto;
  object-fit: cover
}

.grid.grid-slider #swiper-mosaic .swiper-slide a figure figcaption {
  display: block;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-black-white);
  overflow: hidden;
  line-height: 1.3em;
  padding: 1rem 0;
  text-align: center
}

.grid.grid-slider #swiper-mosaic .swiper-button-next,
.grid.grid-slider #swiper-mosaic .swiper-button-prev {
  bottom: -5px;
  top: auto;
  z-index: 99;
  height: 25px
}

.grid.grid-slider #swiper-mosaic .swiper-button-next:after,
.grid.grid-slider #swiper-mosaic .swiper-button-prev:after {
  font-size: 14px;
  font-size: .875rem;
  color: var(--color-text)
}

.grid.grid-slider #swiper-mosaic .swiper-button-next {
  right: -5px
}

.grid.grid-slider #swiper-mosaic .swiper-button-prev {
  left: -5px
}

.grid.grid-slider #swiper-mosaic .swiper-pagination {
  bottom: -5px;
  z-index: 98
}

.grid.grid-related .item {
  background: none
}

.grid.grid-related .item a {
  color: var(--color-black-white);
  line-height: 1.3em
}

.grid.grid-related .item a .text {
  height: auto;
  margin-top: .5rem;
  align-items: normal
}

@media(max-width: 668px) {
  .grid.grid-related {
    padding: 0 1rem
  }
}

@media(min-width: 992px) {
  .grid.grid-1 {
    grid-template-columns: repeat(1, 1fr)
  }
}

.grid.grid-2 .item a h3 {
  font-size: 20px;
  font-size: 1.25rem
}

@media(min-width: 992px) {
  .grid.grid-2 {
    grid-template-columns: repeat(2, 1fr)
  }
}

.grid.grid-3-always {
  grid-template-columns: repeat(3, 1fr) !important
}

@media(min-width: 480px) {
  .grid.grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width: 992px) {
  .grid.grid-4 {
    grid-template-columns: repeat(4, 1fr)
  }

  .grid.grid-4 .item a .thumb {
    max-height: 163px
  }
}

@media(min-width: 992px) {
  .grid.grid-5 {
    grid-template-columns: repeat(5, 1fr)
  }
}

.grid.grid-5-always {
  grid-template-columns: repeat(5, 1fr) !important
}

@media(max-width: 375px) {
  .grid.grid-mobile-2 .item a .details .category {
    display: block;
    float: none;
    margin-bottom: 5px
  }
}

@media(max-width: 480px) {
  .grid.grid-mobile-2 .item a h3 {
    font-weight: 500;
    font-size: 16px;
    font-size: 1rem
  }
}

@media(max-width: 667px) {
  .grid.grid-mobile-2 {
    grid-template-columns: repeat(2, 1fr)
  }
}

.grid.spot a {
  display: flex;
  position: relative
}

.grid.spot a .img {
  display: flex;
  flex-shrink: 0;
  min-width: 100px;
  width: 45%;
  overflow: hidden
}

.grid.spot a .img img {
  min-height: 80px;
  object-fit: cover
}

.grid.spot a .text {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
  line-height: 1.2em;
  padding: 0 10px
}

.grid.spot a .time-ago {
  display: inline-block;
  line-height: 1em;
  padding: 3px 4px;
  position: absolute;
  bottom: 5px;
  left: 0;
  background: var(--color-red);
  color: var(--color-white);
  letter-spacing: -0.3px;
  font-size: 12px;
  font-size: .75rem
}

.user-reactions ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none
}

.user-reactions ul li {
  padding: 0 4px
}

.user-reactions ul li a.reaction {
  display: block;
  position: relative;
  width: 100%;
  padding: 10px 5px 6px 5px;
  text-align: center;
  line-height: 1em;
  background: var(--color-surface);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: 0 4px 5px 0 var(--color-shadow)
}

.user-reactions ul li a.reaction img,
.user-reactions ul li a.reaction svg {
  width: 80%;
  margin: 0 auto
}

.user-reactions ul li a.reaction .text {
  opacity: 0;
  display: block;
  width: 57px;
  position: absolute;
  top: 105%;
  left: 0;
  line-height: 1em;
  padding: 5px 0;
  margin-top: 7px;
  color: var(--color-white);
  background: var(--color-bg-btn);
  font-size: 11px;
  font-size: .6875rem;
  box-shadow: 0 3px 5px 0 var(--color-shadow);
  letter-spacing: -0.5px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.user-reactions ul li a.reaction .text:after {
  bottom: 100%;
  left: 50%;
  border: solid rgba(0, 0, 0, 0);
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: var(--color-bg-btn);
  border-width: 6px;
  margin-left: -6px
}

.user-reactions ul li a.reaction .rating {
  display: none;
  position: absolute;
  right: 5px;
  bottom: 2px;
  padding-left: 2px;
  letter-spacing: -0.3px;
  text-align: center;
  font-weight: 500;
  background: #fff;
  font-size: 10px;
  font-size: .625rem
}

.user-reactions ul li a.reaction .progress {
  display: block;
  position: relative;
  height: 7px;
  background: var(--color-border)
}

.user-reactions ul li a.reaction .progress:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  width: 5%;
  height: 100%;
  background: #ef6538
}

.user-reactions ul li a.reaction .progress.p-10:after {
  width: 10%
}

.user-reactions ul li a.reaction .progress.p-20:after {
  width: 20%
}

.user-reactions ul li a.reaction .progress.p-30:after {
  width: 30%;
  background: var(--color-yellow)
}

.user-reactions ul li a.reaction .progress.p-40:after {
  width: 40%;
  background: var(--color-yellow)
}

.user-reactions ul li a.reaction .progress.p-50:after {
  width: 50%;
  background: var(--color-yellow)
}

.user-reactions ul li a.reaction .progress.p-60:after {
  width: 60%;
  background: var(--color-yellow)
}

.user-reactions ul li a.reaction .progress.p-70:after {
  width: 70%;
  background: #97c82c
}

.user-reactions ul li a.reaction .progress.p-80:after {
  width: 80%;
  background: #97c82c
}

.user-reactions ul li a.reaction .progress.p-90:after {
  width: 90%;
  background: #97c82c
}

.user-reactions ul li a.reaction .progress.p-100:after {
  width: 100%;
  background: #97c82c
}

.user-reactions ul li a.reaction .cls-1 {
  fill: none;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.user-reactions ul li a.reaction .cls-red {
  fill: #ef6538
}

.user-reactions ul li a.reaction .cls-white {
  fill: #fff
}

.user-reactions ul li a.reaction .cls-yellow {
  fill: #fecc09
}

.user-reactions ul li a.reaction .cls-blue {
  fill: #59c1db
}

.user-reactions ul li a.reaction .cls-green {
  fill: #97c82c
}

.user-reactions ul li a.reaction .cls-2 {
  fill: var(--color-text)
}

.user-reactions ul li a.reaction:hover {
  transform: scale(1);
  box-shadow: 0 1px 2px 0 var(--color-shadow)
}

.user-reactions ul li a.reaction:hover .cls-1 {
  fill: #fecc09
}

.user-reactions ul li a.reaction:hover .text {
  opacity: 1
}

.user-reactions ul li a.reaction:active,
.user-reactions ul li a.reaction:focus {
  transform: scale(0.95)
}

.column .grid .item a h3 {
  font-size: 16px;
  font-size: 1rem
}

.column .grid.grid-2 .item a h3 {
  font-size: 18px;
  font-size: 1.125rem
}

.top-adbar {
  position: relative;
  text-align: center;
  padding: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
  z-index: 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.top-adbar.sticky {
  position: sticky;
  top: 40px;
  background: var(--color-surface-5);
  box-shadow: 0 2px 10px 0 var(--color-shadow)
}

@supports not (backdrop-filter: none) {
  .top-adbar.sticky {
    background: var(--color-surface)
  }
}

.top-adbar .reklam {
  height: 250px;
  width: 970px;
  margin: 0 auto;
  background-size: 45px
}

@media(max-width: 667px) {
  .top-adbar {
    background: rgba(0, 0, 0, 0);
    border: 0;
    padding: 0
  }
}

.video-player {
  position: relative;
  max-width: 720px;
  display: flex
}

.video-player .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8cGF0aCBkPSJNMjU2LDBDMTE0LjYxNywwIDAsMTE0LjYxNSAwLDI1NkMwLDM5Ny4zODUgMTE0LjYxNyw1MTIgMjU2LDUxMkMzOTcuMzgzLDUxMiA1MTIsMzk3LjM4NSA1MTIsMjU2QzUxMiwxMTQuNjE1IDM5Ny4zODMsMCAyNTYsMFpNMzQ0LjQ4LDI2OS41N0wyMTYuNDgsMzQ5LjU3QzIxMy44OSwzNTEuMTg3IDIxMC45NDUsMzUyIDIwOCwzNTJDMjA1LjMzMiwzNTIgMjAyLjY2LDM1MS4zMzYgMjAwLjI0MiwzNDkuOTkyQzE5NS4xNTYsMzQ3LjE3MiAxOTIsMzQxLjgyIDE5MiwzMzZMMTkyLDE3NkMxOTIsMTcwLjE4IDE5NS4xNTYsMTY0LjgyOCAyMDAuMjQyLDE2Mi4wMDhDMjA1LjMyOCwxNTkuMTcyIDIxMS41NDcsMTU5LjM0NCAyMTYuNDgsMTYyLjQzTDM0NC40OCwyNDIuNDNDMzQ5LjE1NiwyNDUuMzYgMzUyLDI1MC40ODUgMzUyLDI1NkMzNTIsMjYxLjUxNSAzNDkuMTU2LDI2Ni42NDEgMzQ0LjQ4LDI2OS41N1oiIHN0eWxlPSJmaWxsOndoaXRlO2ZpbGwtcnVsZTpub256ZXJvOyIvPgo8L3N2Zz4K);
  background-size: 100%;
  background-repeat: no-repeat;
  opacity: .8;
  z-index: 9;
  transition: .2s ease-in-out
}

.video-player .play span {
  visibility: hidden
}

@media(max-width: 576px) {
  .video-player .play {
    display: none !important
  }
}

.video-player:hover .play {
  opacity: 1
}

.video-player.playing video {
  filter: none
}

.video-player.playing .play {
  background-image: none
}

.video-player.playing:hover video {
  filter: brightness(0.8)
}

.video-player.playing:hover .play {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDMwMSAzMDEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8Zz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTE1MC4wMDEsMEM2Ny4xNjMsMCAwLjAwMSw2Ny4xNTkgMC4wMDEsMTUwQzAuMDAxLDIzMi44MzggNjcuMTYzLDMwMC4wMDMgMTUwLjAwMSwzMDAuMDAzQzIzMi44NDQsMzAwLjAwMyAzMDAuMDAxLDIzMi44MzggMzAwLjAwMSwxNTBDMzAwLjAwMSw2Ny4xNTkgMjMyLjg0NiwwIDE1MC4wMDEsMFpNMTM0LjQxLDE5NC41MzhDMTM0LjQxLDIwNC4wMzYgMTI2LjcxLDIxMS43MzYgMTE3LjIxMiwyMTEuNzM2QzEwNy43MTQsMjExLjczNiAxMDAuMDE0LDIwNC4wMzYgMTAwLjAxNCwxOTQuNTM4TDEwMC4wMTQsMTA1LjQ2QzEwMC4wMTQsOTUuOTYyIDEwNy43MTQsODguMjYyIDExNy4yMTIsODguMjYyQzEyNi43MSw4OC4yNjIgMTM0LjQxLDk1Ljk2MiAxMzQuNDEsMTA1LjQ2TDEzNC40MSwxOTQuNTM4Wk0xOTguOTU1LDE5NC41MzhDMTk4Ljk1NSwyMDQuMDM2IDE5MS4yNTQsMjExLjczNiAxODEuNzU3LDIxMS43MzZDMTcyLjI1OSwyMTEuNzM2IDE2NC41NTksMjA0LjAzNiAxNjQuNTU5LDE5NC41MzhMMTY0LjU1OSwxMDUuNDZDMTY0LjU1OSw5NS45NjIgMTcyLjI1OSw4OC4yNjIgMTgxLjc1Nyw4OC4yNjJDMTkxLjI1NSw4OC4yNjIgMTk4Ljk1NSw5NS45NjIgMTk4Ljk1NSwxMDUuNDZMMTk4Ljk1NSwxOTQuNTM4WiIgc3R5bGU9ImZpbGw6d2hpdGU7ZmlsbC1ydWxlOm5vbnplcm87Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K)
}

.video-player video {
  width: 100%;
  height: auto;
  max-height: 400px;
  background: #000;
  object-fit: cover;
  cursor: pointer;
  filter: brightness(0.5);
  transition: .2s ease-in-out
}

.faq {
  margin-bottom: 1.5rem
}

.faq ul {
  margin: 0;
  padding: 0;
  list-style-type: none !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important
}

.faq ul li {
  letter-spacing: -0.3px;
  background: var(--color-surface);
  margin-bottom: 10px
}

.faq ul li:last-child {
  border-bottom: 0 none
}

.faq ul li .title {
  position: relative;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4em;
  font-size: 18px;
  font-size: 1.125rem;
  padding: 13px 43px 13px 40px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.faq ul li .title .icon-help-circle {
  position: absolute;
  left: 13px;
  top: 16px;
  font-size: 20px;
  font-size: 1.25rem;
  color: var(--color-fill)
}

.faq ul li .title .icon-expand-more {
  position: absolute;
  right: 10px;
  top: 8px;
  font-size: 30px;
  font-size: 1.875rem;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.faq ul li .desc {
  display: none;
  padding: 2px 30px 25px 40px;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 400
}

.faq ul li .desc p {
  margin-bottom: 20px
}

.faq ul li .desc p:last-child {
  margin-bottom: 0 !important
}

.faq ul li.active .title {
  color: var(--color-fill)
}

.faq ul li.active .title .icon-expand-more {
  transform: rotate(-180deg)
}

.faq ul li.active .desc {
  display: block
}

.faq ul li ol {
  margin-left: 1rem
}

#overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99
}

.logo-v1 {
  background-image: url("../index/logo.png")
}

.logo-bg {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='190' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M41 0H0v28h97V0H41z' fill='%23ED0D0D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M54.832 10.507h-4.85c-.1-1.212-.875-1.932-2.515-1.932-1.568 0-2.252.601-2.261 1.422-.046.893.747 1.413 2.516 1.786l1.531.329c4.12.884 5.816 2.88 5.834 5.724-.018 3.683-2.853 5.725-7.584 5.725-4.868 0-8.04-2.096-8.059-6.782h4.814c.082 1.714 1.23 2.625 3.172 2.625 1.623 0 2.461-.647 2.48-1.568-.019-.847-.73-1.367-2.808-1.823l-1.86-.4c-3.309-.712-5.333-2.335-5.323-5.252-.028-3.555 3.108-5.943 7.548-5.943 4.521 0 7.347 2.425 7.365 6.09zm32.43-5.84h5.068v18.666H88.1l-6.744-9.807h-.11v9.808H76.18V4.666h4.302l6.635 9.77h.146v-9.77zm-12.625 9.34c0-6.235-4.011-9.59-9.08-9.59-5.105 0-9.08 3.355-9.08 9.59 0 6.2 3.975 9.59 9.08 9.59 5.069 0 9.08-3.354 9.08-9.59zm-5.215 0c0 3.355-1.349 5.179-3.865 5.179s-3.865-1.824-3.865-5.178c0-3.355 1.35-5.178 3.865-5.178 2.516 0 3.865 1.823 3.865 5.178zm-32.537-9.34h-5.067v9.77h-.146l-6.636-9.77h-4.302v18.666h5.068v-9.807h.11l6.744 9.808h4.23V4.666zM5 23.334h13.417V19.25h-8.35v-3.208h7.693v-4.083h-7.692V8.75h8.385V4.667H5v18.667z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M125.18 23.334l1.075-3.573h6.162l1.075 3.573h5.469L132.8 4.666h-6.927l-6.162 18.666h5.469zm2.224-7.365l1.859-6.162h.146l1.859 6.162h-3.864zm21.541 7.365h-8.786V4.666h8.094c4.265 0 6.526 1.823 6.526 4.667 0 2.06-1.45 3.655-3.61 4.083v.182c2.397.091 4.339 1.814 4.339 4.448 0 3.072-2.507 5.287-6.563 5.287zm-3.718-7.985v3.938h2.369c1.705 0 2.552-.647 2.552-1.896 0-1.313-.938-2.042-2.479-2.042h-2.442zm0-6.708v3.573h2.078c1.33 0 2.26-.638 2.26-1.787 0-1.148-.93-1.786-2.187-1.786h-2.151zm12.253 14.693h13.417V19.25h-8.349v-3.208h7.692v-4.084h-7.692V8.75h8.385V4.667H157.48v18.667zm15.968 0h5.067v-6.162h1.75l3.282 6.162h5.505l-3.792-6.964c1.987-.957 3.172-2.77 3.172-5.36 0-3.973-2.78-6.343-6.927-6.343h-8.057v18.667zm5.067-10.1v-4.52h1.787c1.777 0 2.844.692 2.844 2.297 0 1.595-1.067 2.224-2.844 2.224h-1.787zm-71.781 10.1h-5.067V4.667h5.067v7.292h6.709V4.667h5.067v18.667h-5.067v-7.292h-6.709v7.292z' fill='%233E4959'/%3E%3C/svg%3E")
}

.logo-bg span {
  visibility: hidden
}

.logo a {
  display: block
}

.logo a span {
  visibility: hidden
}

.logo a svg,
.logo a img,
.logo a i {
  width: 100%
}

.blink {
  animation: blink 1s infinite
}

@keyframes blink {
  0% {
    opacity: 0
  }

  50% {
    opacity: 1
  }
}

input,
textarea,
.ifrocket {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

input[type=date],
input[type=text],
input[type=number],
input[type=search],
input[type=password],
select,
textarea {
  color: var(--color-text);
  border-color: var(--color-border);
  background-color: var(--color-surface);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

input[type=date]:hover,
input[type=date]:focus,
input[type=text]:hover,
input[type=text]:focus,
input[type=number]:hover,
input[type=number]:focus,
input[type=search]:hover,
input[type=search]:focus,
input[type=password]:hover,
input[type=password]:focus,
select:hover,
select:focus,
textarea:hover,
textarea:focus {
  border-color: #d1d1d1
}

input[type=date],
input[type=text],
input[type=search],
input[type=number],
input[type=password],
select {
  height: 45px
}

input[type=date],
input[type=text],
input[type=search],
input[type=number],
input[type=password] {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

input[type=date] {
  padding: 8px 10px;
  height: auto;
  margin-bottom: 0
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {

  input[type=checkbox],
  input[type=radio] {
    --active: var(--color-fill);
    --active-inner: #FFFFFF;
    --focus: 2px var(--color-fill-t);
    --border: var(--color-text-tertiary);
    --border-hover: var(--color-fill);
    --background: #FFFFFF;
    --disabled: var(--color-border-t);
    --disabled-inner: var(--color-slide);
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background .3s, border-color .3s, box-shadow .2s
  }

  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s)
  }

  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2)
  }

  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: .9
  }

  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border)
  }

  input[type=checkbox]:disabled+label,
  input[type=radio]:disabled+label {
    cursor: not-allowed
  }

  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover)
  }

  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus)
  }

  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: 21px
  }

  input[type=checkbox]:not(.switch):after,
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0)
  }

  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1
  }

  input[type=checkbox]+label,
  input[type=radio]+label {
    font-size: 14px;
    font-size: .875rem;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px
  }

  input[type=checkbox]:not(.switch) {
    border-radius: 2px
  }

  input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg))
  }

  input[type=checkbox]:not(.switch):checked {
    --r: 43deg
  }

  input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px
  }

  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0))
  }

  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px
  }

  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: .6
  }

  input[type=radio] {
    border-radius: 50%
  }

  input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7))
  }

  input[type=radio]:checked {
    --s: .5
  }
}

.range {
  background: var(--color-border-t);
  border: 1px solid var(--color-border);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 3px
}

.range:hover {
  border-color: #d1d1d1
}

.range input {
  -webkit-appearance: none;
  width: 88%;
  height: 2px;
  background: var(--color-fill);
  border: none;
  outline: none
}

.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-fill);
  border-radius: 50%
}

.range input::-webkit-slider-thumb:hover {
  background: var(--color-fill)
}

.range .value {
  color: var(--color-fill);
  text-align: center;
  font-weight: 600;
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  margin-left: 5px;
  min-width: 30px
}

a.item {
  display: block;
  overflow: hidden
}

a.item svg,
a.item img {
  width: 100%;
  height: auto
}

.searchform {
  margin-bottom: 20px
}

.searchform .container {
  padding: 40px 40px 30px 40px;
  background: var(--color-surface)
}

.searchform .container .form,
.searchform .container form {
  margin: 0
}

.searchform .container .form input[type=text],
.searchform .container .form input[type=search],
.searchform .container form input[type=text],
.searchform .container form input[type=search] {
  margin-bottom: 0;
  border-width: 2px;
  padding: 17px 100px 17px 45px;
  height: auto;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  background-color: var(--color-surface);
  background-image: url("../index/search.svg");
  background-repeat: no-repeat;
  background-position: 16px 17px;
  background-size: 17px
}

.searchform .container .form:focus,
.searchform .container form:focus {
  background-image: url("../index/search-focus.svg")
}

@media(max-width: 768px) {

  .searchform .container .form,
  .searchform .container form {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    padding: 10px 10px 10px 35px;
    background-position: 10px 10px;
    background-size: 15px
  }
}

.searchform .container .form::placeholder,
.searchform .container .form:-ms-input-placeholder,
.searchform .container .form::-ms-input-placeholder,
.searchform .container form::placeholder,
.searchform .container form:-ms-input-placeholder,
.searchform .container form::-ms-input-placeholder {
  color: var(--color-text-secondary) !important
}

.searchform .container button,
.searchform .container input[type=submit] {
  position: absolute;
  right: 50px;
  top: 50px;
  padding: 4px 15px;
  font-size: 15px;
  font-size: .9375rem;
  height: auto;
  width: auto;
  line-height: 1.9em;
  border: 0 none;
  border-radius: 3px;
  letter-spacing: 0;
  text-transform: none
}

.searchform .container .tags {
  display: none;
  margin-top: 15px;
  font-size: 16px;
  font-size: 1rem
}

.searchform .container .tags img {
  width: 28px;
  float: left;
  margin: -1px 7px 0 5px
}

.searchform .container .tags a {
  font-size: 12px;
  font-size: .75rem;
  display: inline-block;
  padding: 2px 10px;
  margin-right: 4px;
  color: var(--color-white);
  background: var(--color-fill);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.searchform .container .tags a:hover {
  color: var(--color-white);
  background: var(--color-text)
}

@media(min-width: 768px) {
  .searchform .container .tags {
    display: block
  }
}

.searchform .container a.btn {
  position: absolute;
  right: 50px;
  top: 50px
}

#gotop {
  display: block;
  width: 27px;
  height: 26px;
  position: fixed;
  text-align: center;
  line-height: 1.7em;
  z-index: 999;
  color: var(--color-white);
  background: var(--color-fill);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity: .8;
  filter: alpha(opacity=8)
}

#gotop .text {
  display: none
}

#gotop:hover {
  opacity: 1;
  filter: alpha(opacity=10);
  bottom: 18px
}

@media(max-width: 667px) {
  #gotop {
    display: none;
    top: 65px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80px;
    height: auto;
    line-height: 2em;
    font-size: 12px;
    font-size: .75rem;
    opacity: 1;
    filter: alpha(opacity=10);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: 0 2px 4px 0 var(--color-shadow)
  }

  #gotop .text {
    display: inline-block
  }

  #gotop:hover {
    bottom: auto
  }
}

@media(min-width: 1366px) {
  #gotop {
    right: 20px;
    bottom: 15px
  }
}

.social-links a {
  display: inline-block;
  background-size: 100%;
  width: 25px;
  height: 25px;
  filter: grayscale(1);
  opacity: .5
}

.social-links a:hover {
  filter: grayscale(0);
  opacity: 1
}

.social-links a.email {
  background: url("../index/email.svg") 0 0 no-repeat
}

.social-links a.telegram {
  background: url("../index/telegram.svg") 0 0 no-repeat
}

.social-links a.youtube {
  background: url("../index/youtube.svg") 0 0 no-repeat
}

.social-links a.instagram {
  background: url("../index/instagram.svg") 0 0 no-repeat
}

.social-links a.facebook {
  background: url("../index/facebook.svg") 0 0 no-repeat
}

.social-links a.twitter {
  background: url("../index/twitter-new.svg") 0 0 no-repeat
}

.social-links a.whatsapp {
  background: url("../index/whatsapp.svg") 0 0 no-repeat
}

.social-links a.linkedin {
  background: url("../index/linkedin.svg") 0 0 no-repeat
}

.social-links a.web {
  background: url("../index/link.svg") 0 0 no-repeat
}

.social-links a span {
  visibility: hidden
}

#loginregister {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  -webkit-transition: .6s ease-in-out;
  -moz-transition: .6s ease-in-out;
  -o-transition: .6s ease-in-out;
  transition: .6s ease-in-out
}

@media(max-width: 992px) {
  #loginregister>.row {
    flex-direction: column;
    margin-left: 0;
    width: 100%
  }
}

#loginregister form {
  margin: 0;
  padding: 30px;
  background: var(--color-background);
  border: 1px solid var(--color-border)
}

#loginregister form .tos {
  position: relative
}

#loginregister form .tos #tos-check {
  position: absolute;
  left: 0;
  top: 0
}

#loginregister form .tos,
#loginregister form .alert {
  font-size: 14px;
  font-size: .875rem;
  color: var(--color-text-secondary)
}

#loginregister form .smstimer-selector,
#loginregister form .verify,
#loginregister form .phone-login {
  display: none
}

#loginregister form .phone-login {
  margin-bottom: 20px
}

#loginregister form.mobile .mail-login {
  display: none
}

#loginregister form.mobile .smstimer-selector,
#loginregister form.mobile .phone-login {
  display: block
}

#loginregister form.verification .verifycode {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  padding: 15px 0;
  height: auto
}

#loginregister form.verification .tos,
#loginregister form.verification .mail-login,
#loginregister form.verification .phone-login {
  display: none
}

#loginregister form.verification .verify {
  display: block !important
}

@media(max-width: 992px) {
  #loginregister form {
    padding: 20px
  }
}

#loginregister .loginform,
#loginregister .registerform {
  position: relative;
  padding: 30px 50px
}

#loginregister .loginform h3,
#loginregister .registerform h3 {
  font-size: 20px;
  font-size: 1.25rem;
  position: relative;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px
}

#loginregister .loginform h3 .material-icons,
#loginregister .loginform h3 .material-icons-round,
#loginregister .loginform h3 .material-icons-outlined,
#loginregister .registerform h3 .material-icons,
#loginregister .registerform h3 .material-icons-round,
#loginregister .registerform h3 .material-icons-outlined {
  font-size: 27px;
  font-size: 1.6875rem;
  position: relative;
  top: 4px;
  color: var(--color-fill)
}

@media(max-width: 992px) {

  #loginregister .loginform h3,
  #loginregister .registerform h3 {
    margin-bottom: 25px;
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%
  }
}

#loginregister .loginform label,
#loginregister .registerform label {
  position: relative;
  font-weight: 300;
  font-size: inherit;
  letter-spacing: -0.4px;
  color: var(--color-text)
}

#loginregister .loginform label.tos-rules,
#loginregister .registerform label.tos-rules {
  padding-left: 25px
}

#loginregister .loginform label .phone-prefix,
#loginregister .registerform label .phone-prefix {
  position: absolute;
  left: 12px;
  top: 45px;
  font-size: 13px;
  font-size: .8125rem
}

#loginregister .loginform label strong,
#loginregister .registerform label strong {
  font-weight: 700
}

#loginregister .loginform label input,
#loginregister .registerform label input {
  margin-top: 10px
}

@media(max-width: 992px) {

  #loginregister .loginform label input,
  #loginregister .registerform label input {
    margin-bottom: 10px
  }
}

#loginregister .loginform label #logingsm,
#loginregister .loginform label #registergsm,
#loginregister .registerform label #logingsm,
#loginregister .registerform label #registergsm {
  padding-left: 40px
}

#loginregister .loginform label i,
#loginregister .registerform label i {
  float: left;
  color: var(--color-fill);
  font-size: 20px;
  font-size: 1.25rem;
  margin: 0 4px 0 0
}

#loginregister .loginform .buttons,
#loginregister .registerform .buttons {
  text-align: center
}

#loginregister .loginform .buttons a,
#loginregister .registerform .buttons a {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 12px;
  font-size: .75rem;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 6px 6px 6px 37px;
  margin: 0 2px;
  font-weight: 400;
  line-height: 2em;
  text-transform: none;
  letter-spacing: -0.4px;
  border: 0 none;
  text-align: left;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#loginregister .loginform .buttons a>span,
#loginregister .registerform .buttons a>span {
  visibility: hidden
}

#loginregister .loginform .buttons a:hover,
#loginregister .registerform .buttons a:hover {
  transform: scale(1.05)
}

#loginregister .loginform .buttons a.mobile,
#loginregister .registerform .buttons a.mobile {
  background: #ffb300 url("../index/mobile-white.svg") center center no-repeat;
  background-size: 20px
}

#loginregister .loginform .buttons a.facebook,
#loginregister .registerform .buttons a.facebook {
  background: #4563a0 url("../index/facebook-white.svg") center center no-repeat;
  background-size: 20px
}

#loginregister .loginform .buttons a.twitter,
#loginregister .registerform .buttons a.twitter {
  background: #1da1f2 url("../index/twitter-white.svg") center center no-repeat;
  background-size: 20px
}

#loginregister .loginform .buttons a.google,
#loginregister .registerform .buttons a.google {
  background: #ea4335 url("../index/google-white.svg") center center no-repeat;
  background-size: 25px
}

#loginregister .loginform .buttons a.apple,
#loginregister .registerform .buttons a.apple {
  background: #000 url("../index/apple-white.svg") center 7px no-repeat;
  background-size: 19px
}

@media(max-width: 992px) {

  #loginregister .loginform .buttons,
  #loginregister .registerform .buttons {
    padding: 20px
  }
}

#loginregister .loginform .smstimer-selector .smstimer,
#loginregister .registerform .smstimer-selector .smstimer {
  display: none;
  position: relative;
  padding-left: 50px
}

#loginregister .loginform .smstimer-selector .smstimer .smscountdown,
#loginregister .registerform .smstimer-selector .smstimer .smscountdown {
  position: absolute;
  left: 0;
  top: -9px;
  font-size: 12px;
  font-size: .75rem;
  background: var(--color-fill);
  color: var(--color-white);
  padding: 2px 0;
  width: 40px;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

#loginregister .loginform .smstimer-selector .smstimer .indicator,
#loginregister .registerform .smstimer-selector .smstimer .indicator {
  position: relative;
  background: var(--color-bg-img);
  height: 6px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden
}

#loginregister .loginform .smstimer-selector .smstimer .indicator .progress,
#loginregister .registerform .smstimer-selector .smstimer .indicator .progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: var(--color-fill);
  height: 6px
}

#loginregister .loginform .smstimer-selector.timer-start .sms-trigger,
#loginregister .registerform .smstimer-selector.timer-start .sms-trigger {
  display: none
}

#loginregister .loginform .smstimer-selector.timer-start .smstimer,
#loginregister .registerform .smstimer-selector.timer-start .smstimer {
  display: block
}

@media(max-width: 1024px) {

  #loginregister .loginform,
  #loginregister .registerform {
    padding: 10px 30px
  }
}

@media(max-width: 992px) {

  #loginregister .loginform,
  #loginregister .registerform {
    padding: 20px
  }
}

#loginregister .cover {
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  background-color: var(--color-border);
  -webkit-transition: .6s ease-in-out;
  -moz-transition: .6s ease-in-out;
  -o-transition: .6s ease-in-out;
  transition: .6s ease-in-out
}

#loginregister .cover .text {
  display: block;
  position: absolute;
  width: 50%;
  top: 40px;
  left: 0;
  padding: 20px;
  line-height: 1.3em;
  letter-spacing: -0.5px;
  background-color: var(--color-surface);
  box-shadow: 0 2px 4px 0 var(--color-shadow);
  -webkit-transition: .6s ease-in-out;
  -moz-transition: .6s ease-in-out;
  -o-transition: .6s ease-in-out;
  transition: .6s ease-in-out
}

#loginregister .cover .text .login-text,
#loginregister .cover .text .register-text {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#loginregister .cover .text .material-icons-outlined {
  float: left;
  margin-right: 10px;
  color: var(--color-fill)
}

@media(max-width: 992px) {
  #loginregister .cover {
    display: none
  }
}

#loginregister.cover-register .cover {
  left: 0;
  background: url("../index/bg-register.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

#loginregister.cover-register .cover .text {
  left: 50%
}

#loginregister.cover-register .cover .text .register-text {
  display: none
}

#loginregister.cover-register .cover .text .material-icons-outlined {
  float: left;
  margin-right: 10px
}

#loginregister.cover-login .cover {
  left: 50%;
  background: url("../index/bg-login.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

#loginregister.cover-login .cover .text {
  left: 0
}

#loginregister.cover-login .cover .text .login-text {
  display: none
}

#loginregister.cover-login .cover .text .material-icons-outlined {
  float: right;
  margin-left: 10px
}

@media(min-width: 992px) {
  #loginregister {
    padding: 20px 10px
  }
}

.modal #loginregister {
  padding: 0;
  border: 0 none
}

.modal #loginregister .loginform,
.modal #loginregister .registerform {
  padding: 0 20px;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

.modal #loginregister .loginform form,
.modal #loginregister .registerform form {
  padding: 0;
  background: none;
  border: 0 none
}

.modal #loginregister .loginform h3,
.modal #loginregister .registerform h3 {
  margin-bottom: 20px
}

.modal #loginregister .loginform label input,
.modal #loginregister .registerform label input {
  margin-bottom: 10px
}

.modal #loginregister .loginform {
  border-right: 0 none
}

.modal #loginregister .registerform {
  display: none
}

.modal #loginregister .logo {
  display: inline-block;
  width: 190px;
  height: 28px
}

.modal #loginregister .logo span {
  visibility: hidden
}

.modal #loginregister .switcher {
  position: relative;
  display: flex;
  padding: 0;
  margin: 20px 20px 30px 20px;
  border-bottom: 3px solid var(--color-border)
}

.modal #loginregister .switcher:after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 50%;
  height: 4px;
  background: rgba(0, 0, 0, 0);
  background: var(--color-fill);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

.modal #loginregister .switcher a {
  position: relative;
  flex-basis: 100%;
  text-align: center;
  padding: 10px 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary)
}

.modal #loginregister .switcher.disabled a {
  cursor: not-allowed
}

.modal #loginregister.active-login .switcher .login {
  color: var(--color-text)
}

.modal #loginregister.active-register .loginform {
  display: none
}

.modal #loginregister.active-register .registerform {
  display: block
}

.modal #loginregister.active-register .switcher .register {
  color: var(--color-text)
}

.modal #loginregister.active-register .switcher:after {
  left: 50%
}

#bildirim .overlay {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 999
}

#bildirim .alert {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  background: var(--color-white);
  box-shadow: rgba(0, 0, 0, .24) 0 3px 8px;
  padding: 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  z-index: 999
}

#bildirim .alert .desc {
  font-size: 13px;
  font-size: .8125rem;
  line-height: 1.4em;
  font-weight: 400;
  padding-left: 22px
}

#creditcard .field {
  margin-bottom: 15px
}

#creditcard .field label {
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 0
}

#creditcard .field label .desc {
  font-size: 11px;
  font-size: .6875rem;
  color: var(--color-text-secondary);
  line-height: 1.3em;
  display: block;
  opacity: .8;
  margin-top: 8px
}

#creditcard .field input[name=ccnumber] {
  background: url("../index/credit-card.svg") 10px 10px no-repeat;
  background-size: 28px;
  padding-left: 50px
}

#creditcard .field input,
#creditcard .field select {
  margin-top: 5px;
  margin-bottom: 0;
  border-width: 2px
}

#creditcard .field input:focus,
#creditcard .field select:focus {
  border-color: #009cde
}

#creditcard .payfor {
  background: var(--color-surface);
  position: absolute;
  left: -245px;
  top: 50px;
  min-width: 245px;
  box-shadow: rgba(0, 0, 0, .25) -2px 0 5px 0;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px
}

#creditcard .payfor .content {
  padding: 25px 20px
}

#creditcard .payfor .content ul {
  padding: 0;
  margin: 0;
  list-style: none
}

#creditcard .payfor .content ul li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-size: .8125rem;
  margin-bottom: 0;
  line-height: 2.4em;
  padding: 2px 10px;
  border-bottom: 1px dotted var(--color-border)
}

#creditcard .payfor .content ul li .price {
  font-weight: 600
}

#creditcard .payfor .content ul li .recurring {
  font-weight: 400;
  color: var(--color-text-secondary)
}

#creditcard .payfor .content ul li.total {
  color: var(--color-white);
  background: #009cde;
  font-weight: 600;
  border-bottom: 0 none;
  border-radius: 3px;
  margin-top: 10px
}

#creditcard .payfor .content ul li.total .recurring {
  color: var(--color-white)
}

@media(max-width: 834px) {
  #creditcard .payfor {
    width: auto;
    top: auto;
    left: auto;
    position: relative;
    margin-top: 18px;
    margin-bottom: 20px;
    box-shadow: none
  }

  #creditcard .payfor .content {
    padding: 0
  }
}

#creditcard .payment-btn {
  color: var(--color-white);
  background: #7dc855 url("../index/lock-white.svg") 88px 11px no-repeat;
  border: 0 none;
  margin: 0;
  width: 100%;
  height: auto;
  line-height: 1.5em;
  background-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.2px;
  display: block;
  padding: 10px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

#sticky-ads {
  position: fixed;
  top: 110px;
  width: 100%;
  z-index: 99;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#sticky-ads.sticky {
  top: 60px
}

#sticky-ads>.container {
  position: relative
}

#sticky-ads>.container .ad {
  position: absolute;
  top: 0;
  height: 100%;
  width: 300px;
  min-width: 120px;
  min-height: 600px;
  z-index: 999;
  overflow: hidden;
  display: flex
}

#sticky-ads>.container .ad.left {
  position: absolute !important;
  left: -310px;
  justify-content: end
}

#sticky-ads>.container .ad.right {
  position: absolute !important;
  right: -310px;
  justify-content: start
}

@media(max-width: 1366px) {
  #sticky-ads {
    display: none
  }
}

.sticky-ad {
  position: fixed;
  top: 40px;
  width: 160px;
  min-width: 160px;
  min-height: 600px;
  z-index: 999;
  background: red;
  overflow: hidden
}

.sticky-ad.left {
  left: 0
}

.sticky-ad.right {
  right: 0
}

.natorial {
  position: relative !important
}

.natorial:after {
  content: "advertorial";
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  line-height: 1em;
  z-index: 9;
  background: var(--color-red);
  color: var(--color-white);
  padding: 2px 4px;
  font-size: 12px;
  font-size: .75rem;
  opacity: .8
}

header {
  position: sticky;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  z-index: 999;
  min-width: 320px
}

header .mobile-account {
  display: block;
  position: absolute;
  right: 35px;
  top: 13px;
  width: 30px;
  height: 30px;
  color: var(--color-text-secondary);
  z-index: 999
}

header .mobile-account span {
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  float: left;
  margin: -2px 7px 0 0;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px
}

header .mobile-account span img {
  width: 100%
}

header .mobile-account i {
  float: left;
  font-size: 24px;
  line-height: 1em;
  color: var(--color-text)
}

@media(max-width: 320px) {
  header .mobile-account .text {
    display: none
  }
}

@media(min-width: 667px) {
  header .mobile-account {
    display: none
  }
}

header .mobile-flag {
  display: none;
  position: absolute;
  right: 0;
  top: 15px;
  width: 30px;
  height: 20px
}

header .mobile-flag span {
  font-size: 10px;
  font-size: .625rem;
  visibility: hidden
}

@media(max-width: 667px) {
  header .mobile-flag {
    display: block;
    background: url("../index/flag.svg") 0 0 no-repeat;
    background-size: 100%
  }
}

header .navtoggle {
  position: absolute;
  left: 5px;
  top: 17px;
  display: none;
  width: 26px;
  height: 30px;
  opacity: .8
}

header .navtoggle:before,
header .navtoggle:after,
header .navtoggle span {
  display: block;
  content: " ";
  width: 100%;
  height: 2px;
  margin-bottom: 5px;
  background: var(--color-text);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease
}

header .navtoggle span {
  color: var(--color-text);
  line-height: 1px;
  text-indent: -50px;
  overflow: hidden;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease
}

@media(max-width: 667px) {
  header .navtoggle {
    display: block
  }
}

header .logo {
  position: absolute;
  left: 18px;
  top: 16px;
  width: 175px;
  height: 26px;
  z-index: 9;
  font-size: 1em;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

header .logo a {
  width: 100%;
  height: 100%;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

@media(max-width: 812px) {
  header .logo {
    top: 20px;
    width: 110px;
    height: 20px
  }
}

@media(max-width: 667px) {
  header .logo {
    width: 140px;
    height: 21px;
    left: 50%;
    top: 15px;
    transform: translate(-50%, 0)
  }
}

header .slogan {
  display: none;
  float: left;
  font-weight: 500;
  font-size: 12px;
  font-size: .75rem;
  line-height: 2.5em;
  color: var(--color-text-secondary);
  letter-spacing: -0.1px;
  padding-left: 190px;
  white-space: nowrap
}

@media(min-width: 992px) {
  header .slogan {
    display: block;
    margin-top: 15px;
    line-height: 2.5em;
    min-height: 30px
  }
}

header .slogan span {
  color: var(--color-text)
}

header .search {
  display: none;
  width: 100%;
  position: relative;
  font-weight: 500;
  font-size: 12px;
  font-size: .75rem;
  line-height: 2.5em;
  color: var(--color-text-secondary);
  letter-spacing: -0.1px;
  padding-left: 100px;
  padding-top: 11px
}

header .search form {
  position: relative;
  margin: 0
}

header .search form input {
  height: auto;
  margin: 0;
  padding: 10px 10px 10px 20px;
  letter-spacing: -0.5px;
  font-size: 14px;
  font-size: .875rem;
  line-height: 1em;
  box-shadow: inset 0 0 2px var(--color-shadow);
  border: 1px solid var(--color-border-y);
  -webkit-border-radius: 2pxpx;
  -moz-border-radius: 2pxpx;
  border-radius: 2pxpx
}

header .search form input:hover,
header .search form input:focus {
  border: 1px solid var(--color-border-h);
  box-shadow: inset 0 1px 2px var(--color-shadow)
}

header .search form input::placeholder {
  color: var(--color-text-secondary);
  opacity: 1
}

header .search form input:-ms-input-placeholder {
  color: var(--color-text-secondary)
}

header .search form input::-ms-input-placeholder {
  color: var(--color-text-secondary)
}

header .search form .srcbtn {
  color: var(--color-text);
  background-color: var(--color-background);
  display: block;
  width: 64px;
  height: 100%;
  position: absolute;
  right: -2px;
  top: 0;
  text-align: center;
  line-height: 4em;
  border: 1px solid var(--color-border-y);
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px
}

header .search form .srcbtn svg {
  width: 30%
}

header .search form .srcbtn svg path {
  fill: var(--color-text)
}

header .search form .srcbtn:hover {
  border-color: var(--color-border-h);
  background-color: var(--color-surface-c)
}

@media(min-width: 768px) {
  header .search {
    display: block
  }
}

@media(min-width: 992px) {
  header .search {
    padding-left: 270px
  }
}

header .column-brand {
  position: relative
}

@media(min-width: 668px) {
  header .column-brand {
    flex: 0 0 10% !important;
    max-width: 10% !important
  }
}

@media(min-width: 992px) {
  header .column-brand {
    flex: 0 0 34% !important;
    max-width: 34% !important
  }
}

@media(min-width: 1024px) {
  header .column-brand {
    flex: 0 0 36% !important;
    max-width: 36% !important
  }
}

@media(max-width: 667px) {
  header .column:not(.column-brand) {
    display: none
  }
}

@media(max-width: 1024px) {
  header .column-25 {
    flex: 0 0 34% !important;
    max-width: 34% !important
  }
}

header .topmenu {
  vertical-align: top;
  margin-left: 30px;
  margin-top: 18px
}

header .topmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: right;
  width: auto
}

header .topmenu ul li {
  float: left;
  margin-bottom: 0
}

header .topmenu ul li.dropdown {
  position: relative
}

header .topmenu ul li.dropdown .submenu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  width: 170px;
  padding-top: 17px;
  z-index: 99
}

header .topmenu ul li.dropdown .submenu:after {
  top: -4px;
  right: 20%;
  border: solid rgba(0, 0, 0, 0);
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: var(--color-border);
  border-width: 10px;
  margin-left: -10px
}

header .topmenu ul li.dropdown .submenu ul {
  width: 100%;
  margin: 0;
  padding: 5px 0;
  background: var(--color-surface);
  box-shadow: 0 4px 10px 0 var(--color-shadow)
}

header .topmenu ul li.dropdown .submenu ul li {
  float: none
}

header .topmenu ul li.dropdown .submenu ul li a {
  padding: 3px 15px;
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
  font-size: 12px;
  font-size: .75rem;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

header .topmenu ul li.dropdown .submenu ul li a span {
  color: var(--color-text);
  float: left;
  line-height: 1.7em;
  margin-right: 8px;
  font-size: 16px;
  font-size: 1rem;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

header .topmenu ul li.dropdown .submenu ul li a:hover {
  color: var(--color-white) !important;
  background: var(--color-surface-dark)
}

header .topmenu ul li.dropdown .submenu ul li a:hover span {
  color: var(--color-white) !important
}

header .topmenu ul li:hover.dropdown .submenu {
  display: block
}

header .topmenu ul li a {
  position: relative;
  display: block;
  font-weight: 500;
  font-size: 12px;
  font-size: .75rem;
  line-height: 2.2em;
  padding: 0 0 0 24px;
  margin-left: 25px;
  color: var(--color-text-secondary)
}

header .topmenu ul li a:hover {
  color: var(--color-text-strong)
}

header .topmenu ul li a.profile {
  padding-left: 0;
  background: none
}

header .topmenu ul li a.profile span {
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  float: left;
  margin: -2px 7px 0 0;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px
}

header .topmenu ul li a.profile span img {
  width: 100%
}

header .topmenu ul li a.profile:hover span {
  transform: scale(1.1)
}

@media(max-width: 768px) {
  header .topmenu ul li a {
    margin-left: 15px
  }
}

header .topmenu ul li:first-child a {
  margin-left: 0
}

header .topmenu ul li.flag a {
  margin-top: 2px;
  display: block;
  width: 30px;
  height: 20px;
  background: url("../index/flag.svg") 0 0 no-repeat;
  background-size: 100%
}

header .topmenu ul li.flag a span {
  font-size: 10px;
  font-size: .625rem;
  visibility: hidden
}

header .topmenu ul li .flagtr {
  display: block;
  width: 30px;
  height: 20px;
  margin: 2px 5px 0 15px;
  background: url("../index/flag.svg") 0 0 no-repeat;
  background-size: 100%
}

@media(max-width: 667px) {
  header .topmenu {
    display: none
  }
}

@media(min-width: 1112px) {
  header .topmenu {
    margin-top: 14px
  }
}

header .mainmenu {
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
  max-height: 41px;
  overflow: hidden;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out
}

header .mainmenu .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-height: 40px
}

header .mainmenu .menu li {
  float: left
}

header .mainmenu .menu li a {
  display: block;
  position: relative;
  color: var(--color-text);
  font-weight: 700;
  font-size: 14px;
  font-size: .875rem;
  line-height: 1.1em;
  padding: 12px 5px 10px 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

header .mainmenu .menu li a:after {
  content: "";
  display: block;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  background-color: var(--color-fill);
  bottom: 0;
  height: 3px;
  left: 50%;
  position: absolute;
  transition: width .3s ease 0s, left .3s ease 0s;
  width: 0
}

header .mainmenu .menu li a:hover {
  color: var(--color-fill)
}

header .mainmenu .menu li a:hover:after {
  width: 100%;
  left: 0
}

header .mainmenu .menu li a i {
  float: left;
  margin-right: 4px;
  font-size: 16px;
  font-size: 1rem
}

@media(min-width: 768px) {
  header .mainmenu .menu li a {
    text-align: center;
    padding: 12px 7px
  }
}

header .mainmenu .menu li a.hot {
  padding-left: 0;
  text-align: left
}

header .mainmenu .menu li a.hot:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 7.76142 2.23858 10 5 10ZM4 2H5V5H7V6H4V5V2Z' fill='%23ED0D0D'/%3E%3C/svg%3E")
}

header .mainmenu .menu li a.all {
  position: relative;
  padding-right: 24px;
  background: url("../index/hamburger.svg") right 7px no-repeat;
  background-size: 24px
}

header .mainmenu .menu li a.all.loading:after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: " ";
  width: 100%;
  height: 100%;
  background: var(--color-surface) url("../index/loading-red.svg") center center no-repeat;
  background-size: 30px;
  opacity: .9
}

@media(max-width: 1112px) {
  header .mainmenu .menu li:nth-child(n+8):not(.all) {
    display: none
  }
}

@media(max-width: 1024px) {
  header .mainmenu .menu li:nth-child(n+9):not(.all) {
    display: none
  }
}

@media(max-width: 834px) {
  header .mainmenu .menu li:nth-child(n+7):not(.all) {
    display: none
  }
}

@media(max-width: 768px) {
  header .mainmenu .menu li:nth-child(n+5):not(.all) {
    display: none
  }
}

header .mainmenu .menu li:last-child {
  float: right
}

@media(max-width: 667px) {
  header .mainmenu .menu {
    display: none
  }
}

@media(max-width: 667px) {
  header .mainmenu {
    display: none
  }
}

header #indicator {
  display: none;
  background: var(--color-bg-img);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

header #indicator #progress {
  width: 0;
  height: 3px;
  background: var(--color-fill)
}

@media(max-width: 568px) {
  header #indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99
  }
}

header.sticky {
  position: sticky;
  top: -57px;
  width: 100%
}

header.sticky .logo {
  left: 17px;
  top: 67px;
  width: 120px;
  height: 20px
}

@media(max-width: 667px) {
  header.sticky .logo {
    width: 140px;
    height: 21px;
    left: 50%;
    top: 15px;
    transform: translate(-50%, 0)
  }
}

header.sticky .mainmenu {
  padding-left: 140px
}

header.sticky .mainmenu .item:nth-child(n+12):not(.all) {
  display: none
}

@media(max-width: 812px) {

  header.sticky .mainmenu .item:nth-child(7),
  header.sticky .mainmenu .item:nth-child(8) {
    display: none
  }
}

@media(max-width: 992px) {
  header.sticky .mainmenu .item:nth-child(9) {
    display: none
  }
}

@media(max-width: 1024px) {
  header.sticky .mainmenu .item:nth-child(10) {
    display: none
  }
}

@media(min-width: 568px) {
  header.sticky {
    box-shadow: 0 2px 4px 0 var(--color-shadow)
  }
}

header.sticky #indicator {
  display: block
}

@media(max-width: 667px) {
  header.sticky {
    top: 0;
    box-shadow: 0 2px 4px 0 var(--color-shadow)
  }
}

header.sticky-hide {
  top: -60px !important
}

header.active-menu {
  box-shadow: none;
  z-index: 9999999
}

header.active-menu .navtoggle:before {
  width: 12px;
  transform: rotate(-45deg);
  margin: 3px 0 0 -5px
}

header.active-menu .navtoggle span {
  width: 20px;
  margin: 2px 0 0 -2px
}

header.active-menu .navtoggle:after {
  width: 12px;
  transform: rotate(45deg);
  margin: 2px 0 0 -5px
}

@media(max-width: 667px) {
  header {
    top: 0;
    min-height: 50px
  }
}

@media(min-width: 768px) {
  header {
    margin-bottom: 30px
  }
}

@media(min-width: 1112px) {
  header {
    max-height: 97px
  }
}

header .mobile-menu-trigger {
  position: absolute;
  top: 10px;
  display: block;
  width: 30px;
  height: 30px;
  background: url("../index/hamburger.svg") center center no-repeat;
  background-size: 100%
}

header .mobile-menu-trigger span {
  visibility: hidden
}

@media(min-width: 667px) {
  header .mobile-menu-trigger {
    display: none
  }
}

#showmenu,
#closemenu,
#closesearch {
  display: block;
  font-size: 11px;
  font-size: .6875rem;
  color: var(--color-text-secondary);
  line-height: 2.5em;
  text-align: right;
  margin-top: 10px
}

#showmenu:hover,
#closemenu:hover,
#closesearch:hover {
  color: rgba(var(--color-text-secondary), 1)
}

#showmenu svg,
#closemenu svg,
#closesearch svg {
  fill: var(--color-text-secondary)
}

#showmenu svg path,
#closemenu svg path,
#closesearch svg path {
  fill: var(--color-text-secondary)
}

#showmenu i,
#showmenu .material-icons-outlined,
#closemenu i,
#closemenu .material-icons-outlined,
#closesearch i,
#closesearch .material-icons-outlined {
  font-size: 18px;
  vertical-align: middle;
  margin-top: -3px
}

@media(min-width: 768px) {
  #closemenu {
    display: none
  }
}

#showmenu {
  margin: 0
}

#closemenu svg,
#showmenu svg {
  width: 24px;
  height: 23px;
  float: right;
  margin-top: 1px
}

#closesearch {
  position: absolute;
  right: 15px;
  top: 5px
}

@media(max-width: 667px) {
  #closesearch {
    display: none
  }
}

#closefullmenu {
  position: absolute;
  right: 12px;
  top: 14px;
  color: #c1c4ca;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

#closefullmenu:hover {
  color: var(--color-red)
}

#closefullmenu span {
  font-size: 18px
}

@media(max-width: 667px) {
  #closefullmenu {
    display: none
  }
}

#searchbox {
  position: absolute;
  width: 100%;
  top: 95px;
  padding: 0 1rem;
  background: var(--color-surface);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  z-index: 99
}

#searchbox.active {
  visibility: visible;
  opacity: 1
}

#searchbox .container {
  padding: 40px 40px 30px 40px
}

#searchbox .container .form,
#searchbox .container form {
  margin: 0
}

#searchbox .container .form input,
#searchbox .container form input {
  margin-bottom: 0;
  border-width: 2px;
  padding: 17px 100px 17px 45px;
  height: auto;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  background-color: var(--color-surface);
  background-image: url("../index/search.svg");
  background-repeat: no-repeat;
  background-position: 11px 14px;
  background-size: 20px
}

#searchbox .container .form input:focus,
#searchbox .container form input:focus {
  background-image: url("../index/search-focus.svg")
}

#searchbox .container .form input::placeholder,
#searchbox .container .form input:-ms-input-placeholder,
#searchbox .container .form input::-ms-input-placeholder,
#searchbox .container form input::placeholder,
#searchbox .container form input:-ms-input-placeholder,
#searchbox .container form input::-ms-input-placeholder {
  color: var(--color-text-secondary) !important
}

#searchbox .container .form .tags,
#searchbox .container form .tags {
  margin-top: 15px;
  font-size: 16px;
  font-size: 1rem
}

#searchbox .container .form .tags img,
#searchbox .container form .tags img {
  width: 28px;
  float: left;
  margin: -1px 7px 0 5px
}

#searchbox .container .form .tags a,
#searchbox .container form .tags a {
  font-size: 12px;
  font-size: .75rem;
  display: inline-block;
  padding: 2px 10px;
  color: var(--color-white);
  background: var(--color-fill);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#searchbox .container .form .tags a:hover,
#searchbox .container form .tags a:hover {
  color: var(--color-white);
  background: var(--color-text)
}

@media(max-width: 667px) {

  #searchbox .container .form .tags,
  #searchbox .container form .tags {
    overflow-y: auto;
    white-space: nowrap;
    padding-bottom: 15px
  }
}

@media(min-width: 768px) {

  #searchbox .container .form .tags,
  #searchbox .container form .tags {
    display: block
  }
}

#searchbox .container .form a.btn,
#searchbox .container form a.btn {
  position: absolute;
  right: 50px;
  top: 50px
}

@media(max-width: 667px) {

  #searchbox .container .form a.btn,
  #searchbox .container form a.btn {
    right: 40px;
    top: 40px
  }
}

#searchbox .tagsright {
  margin-top: 15px;
  font-size: 16px;
  font-size: 1rem
}

#searchbox .tagsright img {
  width: 28px;
  float: left;
  margin: -1px 7px 0 5px
}

#searchbox .tagsright a {
  font-size: 12px;
  font-size: .75rem;
  display: inline-block;
  padding: 2px 10px;
  color: var(--color-white);
  background: var(--color-fill);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#searchbox .tagsright a:hover {
  color: var(--color-white);
  background: var(--color-text)
}

@media(max-width: 667px) {
  #searchbox .tagsright {
    overflow-y: auto;
    white-space: nowrap;
    padding-bottom: 15px
  }
}

@media(min-width: 768px) {
  #searchbox .tagsright {
    display: block
  }
}

#searchbox .search-results {
  margin-top: 15px
}

#searchbox .search-results ul {
  margin: 0;
  padding: 0;
  list-style: none
}

#searchbox .search-results ul li {
  margin-bottom: 0
}

#searchbox .search-results ul li:last-child {
  border-bottom: 0 none
}

#searchbox .search-results ul li a {
  display: block;
  position: relative;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  padding: 20px 0;
  padding-left: 130px;
  line-height: 1.5em;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  overflow: hidden
}

#searchbox .search-results ul li a .title {
  display: block;
  color: var(--color-text);
  font-size: 19px;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin-bottom: 5px
}

#searchbox .search-results ul li a img {
  position: absolute;
  left: 0;
  top: 20px;
  width: 110px;
  height: 64px
}

#searchbox .search-results ul li a .key {
  color: var(--color-text);
  font-weight: 700
}

#searchbox .search-results ul li a:after {
  display: block;
  content: " ";
  clear: both
}

@media(min-width: 667px) {
  #searchbox .search-results ul li {
    border-bottom: 1px dotted var(--color-border)
  }
}

#searchbox .search-results ul.second li a {
  font-size: 13px;
  font-size: .8125rem;
  padding: 15px 0
}

#searchbox .search-results ul.second li a .title {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  white-space: normal;
  text-overflow: unset
}

@media(min-width: 667px) {
  #searchbox .search-results ul.second {
    border-left: 1px solid var(--color-border);
    padding-left: 30px;
    margin-left: 10px
  }
}

@media(max-width: 667px) {
  #searchbox .search-results>.row>.column-33 {
    flex: 1 1 auto;
    max-width: 100%
  }
}

#searchbox .search-results .show-more {
  border-top: 1px solid var(--color-border);
  margin-top: 20px;
  margin-bottom: -15px;
  padding-top: 15px
}

#searchbox .search-results .show-more a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.5px;
  text-align: center;
  line-height: 1.4em;
  padding-bottom: 20px;
  background: url("../index/chevron-down-thin.svg") center 25px no-repeat;
  background-size: 50px
}

#searchbox .search-results .show-more a .count {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary)
}

@media(max-width: 667px) {
  #searchbox {
    position: fixed;
    top: 116px;
    padding: 0;
    padding-bottom: 100px;
    left: -101%;
    z-index: 99999;
    height: 100%;
    overflow: auto
  }

  #searchbox.active {
    left: 0
  }

  #searchbox .container {
    padding: 30px
  }
}

#searchbox .spinner {
  display: inline-block;
  margin: 0 5px;
  border-radius: 50%;
  width: 1em;
  height: 1.2em;
  border: .215em solid rgba(0, 0, 0, 0);
  vertical-align: middle;
  font-size: 12px;
  border-top-color: #fff;
  animation: spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite
}

#searchbox .btnA {
  transition: background-color 120ms;
  overflow: hidden
}

#searchbox .btnA:focus {
  outline: none
}

#searchbox .btnA:hover,
#searchbox .btnA:focus {
  background-color: #7f9cf5
}

#searchbox .btnA:active {
  background-color: #667eea
}

#searchbox .btnA svg {
  filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.4))
}

#searchbox .v-btn-label-enter-active {
  animation: slide-in-down 260ms cubic-bezier(0, 0, 0.2, 1)
}

#searchbox .v-btn-label-leave-active {
  animation: slide-out-down 260ms cubic-bezier(0.4, 0, 1, 1)
}

#searchbox .loading-overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(100, 100, 100, .5)
}

#searchbox i.fa.fa-cog {
  font-size: 3em
}

#searchbox .fade-enter-active,
#searchbox .fade-leave-active {
  transition: opacity .5s
}

#searchbox .fade-enter,
#searchbox .fade-leave-active {
  opacity: 0
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes slide-in-down {
  0% {
    transform: translateY(-20px);
    opacity: 0
  }

  50% {
    opacity: .8
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes slide-out-down {
  0% {
    transform: translateY(0);
    opacity: 1
  }

  40% {
    opacity: .2
  }

  100% {
    transform: translateY(20px);
    opacity: 0
  }
}

#fullmenu {
  position: fixed;
  display: block;
  right: 101%;
  top: 50px;
  height: 100%;
  width: 100%;
  min-width: 300px;
  padding: 0;
  background: var(--color-surface);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  z-index: 99999
}

#fullmenu.active {
  left: 0;
  right: auto;
  box-shadow: rgba(0, 0, 0, .3) 0 19px 38px, rgba(0, 0, 0, .22) 0 15px 12px
}

@media(max-width: 667px) {
  #fullmenu.active {
    left: auto;
    right: 0
  }
}

#fullmenu.active-search .menu-head .nav>a .icon-search {
  display: none !important
}

#fullmenu.active-search .menu-head .nav>a .close-search {
  display: block !important
}

#fullmenu.active-search .menu-body {
  overflow: hidden !important
}

#fullmenu .menu-head {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  height: 60px;
  z-index: 9
}

#fullmenu .menu-head .nav {
  text-align: right;
  height: 100%;
  display: flex;
  flex-direction: row
}

#fullmenu .menu-head .nav>a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  color: var(--color-text);
  font-size: 12px;
  font-size: .75rem;
  font-weight: 300;
  line-height: 1.5em;
  border-right: 1px solid var(--color-border);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#fullmenu .menu-head .nav>a i {
  display: block;
  width: auto;
  height: auto;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1em;
  color: var(--color-text)
}

#fullmenu .menu-head .nav>a .icon-search {
  display: block
}

#fullmenu .menu-head .nav>a .close-search {
  display: none
}

#fullmenu .menu-head .nav>a:hover,
#fullmenu .menu-head .nav>a:focus,
#fullmenu .menu-head .nav>a:active {
  opacity: .8
}

#fullmenu .menu-head .nav>a:last-child {
  border-right: 0 none
}

@media(max-width: 320px) {
  #fullmenu .menu-head .nav>a .text {
    display: none
  }
}

@media(min-width: 667px) {
  #fullmenu .menu-head .nav {
    display: none
  }
}

#fullmenu .menu-head .nav-logo {
  position: relative;
  height: 100%
}

#fullmenu .menu-head .nav-logo .logo-bg {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 140px;
  height: 20px
}

#fullmenu .menu-head .nav-logo .btn-close {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 23px;
  font-size: 1.4375rem
}

@media(max-width: 667px) {
  #fullmenu .menu-head .nav-logo {
    display: none
  }
}

@media(max-width: 667px) {
  #fullmenu .menu-head {
    box-shadow: 0 2px 4px 0 var(--color-shadow)
  }
}

#fullmenu .menu-body {
  height: 100%;
  padding: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
  overflow-x: auto
}

#fullmenu .menu-body .stats {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  border-bottom: 1px solid var(--color-border)
}

#fullmenu .menu-body .stats.loading:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--color-surface) url("../index/loading-red.svg") center center no-repeat;
  background-size: 50px;
  opacity: .8
}

#fullmenu .menu-body .stats>div {
  text-align: center;
  width: 100%
}

#fullmenu .menu-body .stats .weather {
  position: relative;
  border-right: 1px solid var(--color-border);
  padding: 0 10px
}

#fullmenu .menu-body .stats .weather>span {
  display: block
}

#fullmenu .menu-body .stats .weather .temperature {
  position: absolute;
  right: 10px;
  top: 0;
  font-weight: 700
}

#fullmenu .menu-body .stats .weather .icon {
  height: 50px;
  overflow: hidden;
  text-align: center
}

#fullmenu .menu-body .stats .weather .icon img,
#fullmenu .menu-body .stats .weather .icon svg {
  height: 100%
}

#fullmenu .menu-body .stats .weather select {
  font-size: 13px;
  font-size: .8125rem;
  text-align: center;
  height: auto;
  padding: 5px 10px 5px 5px;
  margin-bottom: 0 !important;
  background-size: 20px;
  min-width: 120px;
  line-height: 1em;
  border-color: rgba(0, 0, 0, 0);
  color: var(--color-text-secondary);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#fullmenu .menu-body .stats .weather select:hover,
#fullmenu .menu-body .stats .weather select:focus,
#fullmenu .menu-body .stats .weather select:active {
  border-color: var(--color-border);
  color: var(--color-text)
}

#fullmenu .menu-body .stats .weather.error {
  min-height: 72px;
  background: url("../index/warning.svg") center center no-repeat;
  background-size: 30px
}

#fullmenu .menu-body .stats .date {
  border-right: 1px solid var(--color-border);
  text-align: center
}

#fullmenu .menu-body .stats .date>span {
  display: block
}

#fullmenu .menu-body .stats .date .dayname {
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text-secondary)
}

#fullmenu .menu-body .stats .date .day {
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1em
}

#fullmenu .menu-body .stats .date .month {
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text-secondary)
}

#fullmenu .menu-body .stats .currencies {
  text-align: center;
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text-secondary)
}

#fullmenu .menu-body .stats .currencies>span {
  display: block
}

#fullmenu .menu-body .stats .currencies .currency {
  color: var(--color-text);
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -0.5px
}

#fullmenu .menu-body .stats .currencies .percent.green {
  color: var(--color-green)
}

#fullmenu .menu-body .stats .currencies .percent.red {
  color: var(--color-red)
}

@media(max-width: 667px) {
  #fullmenu .menu-body .stats {
    border-bottom: 1px solid var(--color-border)
  }
}

#fullmenu .menu-body .tags {
  position: relative;
  white-space: nowrap;
  overflow-y: auto;
  padding: 10px 0 20px 0
}

#fullmenu .menu-body .tags a {
  display: inline-block;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  padding: 4px 12px;
  background: var(--color-fill);
  color: var(--color-white);
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 700
}

#fullmenu .menu-body .item:last-child {
  border-bottom: none
}

#fullmenu .menu-body .item a {
  display: block;
  padding: 12px
}

#fullmenu .menu-body .item a.title {
  font-weight: 700;
  font-size: 17px;
  font-size: 1.0625rem;
  text-transform: uppercase;
  position: relative;
  color: var(--color-text);
  padding-left: 30px
}

#fullmenu .menu-body .item a.title.nav {
  background: url("../index/plus-red.svg") 0 center no-repeat;
  background-size: 24px
}

#fullmenu .menu-body .item a.title i {
  float: left;
  color: var(--color-fill);
  font-size: 20px;
  font-size: 1.25rem;
  margin-right: 4px;
  line-height: 1.3em
}

#fullmenu .menu-body .item ul {
  display: none;
  margin: 0 0 20px 22px;
  padding: 0;
  list-style: none;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  border-left: 1px solid var(--color-border)
}

#fullmenu .menu-body .item ul li {
  padding: 0;
  margin: 0
}

#fullmenu .menu-body .item ul li a {
  line-height: 1em;
  padding: 12px 12px 12px 20px;
  font-size: 15px;
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase
}

#fullmenu .menu-body .item ul li a:active,
#fullmenu .menu-body .item ul li a:hover,
#fullmenu .menu-body .item ul li a:focus {
  color: var(--color-fill)
}

#fullmenu .menu-body .item.active a.title {
  background: url("../index/minus-red.svg") 0 center no-repeat;
  background-size: 24px
}

#fullmenu .menu-body .item.active ul {
  display: block
}

#fullmenu .menu-body .stores {
  margin-top: 30px;
  margin-bottom: 20px
}

#fullmenu .menu-body .stores .store {
  width: 100%;
  display: block;
  padding: 8px 20px 10px 42px;
  margin-bottom: 10px;
  text-align: left;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: -0.5px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-size: .8125rem;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

#fullmenu .menu-body .stores .store.google {
  background: var(--color-surface) url("../index/android.svg") 12px 6px no-repeat;
  background-size: 26px
}

#fullmenu .menu-body .stores .store.apple {
  background: var(--color-surface) url("../index/apple.svg") 14px 8px no-repeat;
  background-size: 21px
}

#fullmenu .menu-body .stores .store.windows {
  background: var(--color-surface) url("../index/windows.svg") 13px 12px no-repeat;
  background-size: 22px
}

#fullmenu .menu-body .stores .store.huawei {
  background: var(--color-surface) url("../index/huawei.svg") 12px 11px no-repeat;
  background-size: 23px
}

#fullmenu .menu-body .stores .store span {
  display: block;
  font-size: 11px;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--color-text-secondary)
}

#fullmenu .menu-body .stores .store:hover {
  opacity: .9;
  border-color: var(--color-text-tertiary)
}

@media(max-width: 480px) {
  #fullmenu .menu-body .stores .store {
    margin-bottom: 10px
  }
}

@media(min-width: 480px) {
  #fullmenu .menu-body .stores .store {
    float: left;
    width: 49%;
    margin-bottom: 5px
  }

  #fullmenu .menu-body .stores .store:nth-child(1),
  #fullmenu .menu-body .stores .store:nth-child(3) {
    margin-right: 5px
  }
}

#fullmenu .menu-body .whatsapp {
  width: 185px;
  display: inline-block;
  padding: 8px 20px 10px 42px;
  text-align: right;
  color: var(--color-text);
  font-weight: 700;
  line-height: 1.1em;
  letter-spacing: -0.5px;
  border: 1px solid var(--color-border);
  font-size: 13px;
  font-size: .8125rem;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  background: var(--color-surface) url("../index/whatsapp_1.svg") 12px 8px no-repeat;
  background-size: 27px
}

#fullmenu .menu-body .whatsapp span {
  display: block;
  font-size: 11px;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--color-text-secondary)
}

#fullmenu .menu-body .whatsapp:hover {
  opacity: .9;
  border-color: var(--color-text-tertiary)
}

@media(max-width: 768px) {
  #fullmenu .menu-body .whatsapp {
    width: 100%;
    margin-bottom: 10px
  }
}

@media(max-width: 667px) {
  #fullmenu .menu-body {
    padding-bottom: 120px
  }
}

#fullmenu .menu-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 0 6px rgba(0, 0, 0, .15)
}

#fullmenu .menu-footer .inner {
  position: relative;
  height: 100%
}

#fullmenu .menu-footer .inner .logo {
  position: absolute;
  left: 20px;
  top: -35%;
  width: 60px;
  height: 50px
}

#fullmenu .menu-footer .inner .logo a {
  width: 100%;
  height: 100%
}

#fullmenu .menu-footer .inner .slogan {
  position: absolute;
  left: 90px;
  top: 9px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-size: .8125rem
}

#fullmenu .weather-currency {
  background: rgba(0, 0, 0, 0)
}

#fullmenu .weather-currency .weather .city {
  border-top: 0 none
}

#fullmenu .weather-currency .weather .city select {
  background: rgba(0, 0, 0, 0)
}

@media(min-width: 667px) {
  #fullmenu {
    top: 0;
    left: -400px;
    right: auto;
    max-width: 380px;
    background: var(--color-surface);
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset
  }
}

#detailbox {
  position: absolute;
  top: 12px;
  display: none;
  -webkit-transition: .64s ease-in-out;
  -moz-transition: .64s ease-in-out;
  -o-transition: .64s ease-in-out;
  transition: .64s ease-in-out
}

#detailbox.active {
  display: block;
  width: 100%
}

#detailbox .details {
  font-size: 13px;
  font-size: .8125rem;
  letter-spacing: -0.5px;
  padding: 8px 0;
  background-color: var(--color-surface)
}

@media(max-width: 667px) {
  #detailbox .details .title {
    padding: 12px 15px 10px 15px;
    margin: 0 -15px;
    max-width: none;
    width: auto;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: auto
  }
}

#detailbox .details .badge {
  font-size: 12px;
  font-size: .75rem;
  padding: 0 5px;
  display: inline-block;
  color: var(--color-black);
  background: var(--color-yellow);
  position: relative;
  margin-right: 5px;
  height: 20px;
  line-height: 1.6em;
  font-weight: 600;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px
}

@media(max-width: 667px) {
  #detailbox .details .badge {
    float: left
  }
}

#detailbox .details #toptitle {
  font-weight: 600
}

@media(max-width: 667px) {
  #detailbox .details #toptitle {
    margin-left: 5px
  }
}

#detailbox .details.darkmode {
  color: #fff;
  background: #3e4959
}

@media(max-width: 667px) {
  #detailbox .details.darkmode .title {
    background: #2e3848
  }
}

#detailbox .details.darkmode .navigation a {
  color: var(--color-white)
}

#detailbox .details.darkmode .navigation a:hover {
  color: var(--color-yellow)
}

@media(max-width: 667px) {
  #detailbox .details {
    padding: 0
  }
}

#detailbox .navigation {
  text-align: right;
  flex: 0 0 33.3333%;
  max-width: 33.3333%
}

#detailbox .navigation i {
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  font-size: 18px;
  font-size: 1.125rem
}

@media(max-width: 667px) {
  #detailbox .navigation {
    flex: 1 1 auto;
    max-width: 100%;
    text-align: center
  }

  #detailbox .navigation a {
    display: inline-block;
    width: 49%;
    padding: 7px 0
  }

  #detailbox .navigation a:last-child {
    border-left: 1px solid var(--color-border)
  }
}

@media(min-width: 667px) {
  #detailbox .navigation a:last-child {
    margin-left: 10px
  }
}

#borsaticker-wrapper {
  width: 100%;
  height: 40px;
  min-width: 320px;
  border-bottom: 1px solid var(--color-border)
}

#borsaticker-wrapper>div {
  height: 100%
}

#borsaticker-wrapper>div>div {
  height: 100%
}

#borsaticker {
  display: flex;
  align-items: center;
  position: relative;
  cursor: default;
  overflow: auto;
  height: 100%
}

#borsaticker>.container {
  display: flex;
  justify-content: space-between;
  gap: 20px
}

#borsaticker>.container .item {
  display: flex;
  gap: 5px;
  line-height: 1em;
  white-space: nowrap
}

#borsaticker>.container .item .name {
  font-size: 12px;
  font-size: .75rem;
  font-weight: 700
}

#borsaticker>.container .item .name:after {
  content: " ";
  margin-left: 4px;
  width: 9px;
  height: 9px;
  display: inline-block
}

#borsaticker>.container .item .rate {
  font-size: 12px;
  font-size: .75rem;
  font-weight: 500;
  opacity: .8;
  letter-spacing: -0.2px
}

#borsaticker>.container .item .rate .change {
  font-size: 11px;
  font-size: .6875rem;
  font-weight: 400;
  margin-left: 5px
}

#borsaticker>.container .item.up .name:after {
  background: url("../index/up-green.svg") center center no-repeat;
  background-size: 100%
}

#borsaticker>.container .item.up .rate .change {
  color: var(--color-green)
}

#borsaticker>.container .item.down .name:after {
  background: url("../index/down-red.svg") center center no-repeat;
  background-size: 100%
}

#borsaticker>.container .item.down .rate .change {
  color: var(--color-red-t)
}

html,
body {
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  color: var(--color-text);
  background: var(--color-background)
}

html[data-theme=dark],
body[data-theme=dark] {
  --color-text: rgba(192, 195, 199, 1);
  --color-black-white: rgba(255, 255, 255, 1);
  --color-black-white-negative: rgba(0, 0, 0, 1);
  --color-text-dark: rgb(255, 255, 255);
  --color-text-negative: rgba(62, 73, 89, 1);
  --color-text-strong: rgba(219, 219, 219, 1);
  --color-text-secondary: rgba(237, 241, 245, 0.6);
  --color-text-tertiary: rgba(237, 241, 245, 0.32);
  --color-bg-btn: rgba(62, 73, 89, 1);
  --color-bg-btn-hover: rgba(54, 72, 93, 1);
  --color-bg-img: rgba(38, 40, 44, 1);
  --color-border: rgba(237, 241, 245, 0.08);
  --color-border-g: rgba(237, 241, 245, 0.08);
  --color-border-y: rgba(237, 241, 245, 0.08);
  --color-border-h: rgba(237, 241, 245, 0.08);
  --color-border-t: rgba(62, 73, 89, 0.05);
  --color-surface: rgba(38, 40, 44, 1);
  --color-surface-g: rgba(38, 40, 44, 1);
  --color-surface-c: rgba(38, 40, 44, 1);
  --color-surface-n: rgba(38, 40, 44, 1);
  --color-surface-t: rgba(38, 40, 44, 0);
  --color-surface-2: rgba(38, 40, 44, 0.2);
  --color-surface-5: rgba(38, 40, 44, 0.5);
  --color-surface-8: rgba(38, 40, 44, 0.8);
  --color-surface-9: rgba(38, 40, 44, 0.9);
  --color-surface-a: rgba(29, 30, 32, 1);
  --color-surface-dark: rgba(38, 40, 44, 1);
  --color-background: rgba(29, 30, 32, 1);
  --color-background-dark: rgba(29, 30, 32, 1);
  --color-fill: rgba(253, 65, 65, 1);
  --color-fill-hover: rgba(200, 7, 7, 1);
  --color-fill-t: rgba(253, 65, 65, .3);
  --color-fill-spor: rgba(16, 143, 35, 1);
  --color-yellow-spor: rgba(255, 211, 2, 1);
  --color-yellow-spor-t: rgba(255, 246, 171, 1);
  --color-text-on-fill: rgba(255, 255, 255, 1);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-slide: rgba(62, 73, 89, 1);
  --color-green: rgba(115, 190, 80, 1);
  --color-green-2: rgba(56, 153, 11, 1);
  --color-red: rgba(227, 10, 23, 1);
  --color-esh-red: rgba(237, 13, 13, 1);
  --color-red-t: rgba(255, 75, 75, 1);
  --color-yellow: rgba(255, 211, 2, 1);
  --color-blue: rgba(2, 136, 209, 1);
  --color-azure-blue: rgba(31, 147, 255, 1);
  --color-crystal-blue: rgba(76, 198, 244, 1);
  --color-crystal-blue-2: rgba(76, 198, 244, .6);
  --color-athens-gray: rgba(237, 237, 244, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-5: rgba(0, 0, 0, 5);
  --color-black-6: rgba(0, 0, 0, 6);
  --color-shadow: rgba(0, 0, 0, 0.50);
  --color-dark-grey: rgba(46, 47, 48, 1)
}

html[data-theme=dark] header .mainmenu .menu a.all,
body[data-theme=dark] header .mainmenu .menu a.all {
  background: url("../index/hamburger-light.svg") right 7px no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.ara,
body[data-theme=dark] header .topmenu ul li a.ara {
  background: url("../index/search-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.canli-tv,
body[data-theme=dark] header .topmenu ul li a.canli-tv {
  background: url("../index/tv-live-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.arsiv,
body[data-theme=dark] header .topmenu ul li a.arsiv {
  background: url("../index/archive-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.tema,
body[data-theme=dark] header .topmenu ul li a.tema {
  background: url("../index/theme-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.user,
body[data-theme=dark] header .topmenu ul li a.user {
  background: url("../index/user-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.notifications,
body[data-theme=dark] header .topmenu ul li a.notifications {
  background: url("../index/notifications-on-light.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=dark] header .topmenu ul li a.notifications[data-status=off],
body[data-theme=dark] header .topmenu ul li a.notifications[data-status=off] {
  background: url("../index/notifications-off-light.svg") 0 0 no-repeat;
  background-size: 24px
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {

  html[data-theme=dark] input[type=checkbox],
  html[data-theme=dark] input[type=radio],
  body[data-theme=dark] input[type=checkbox],
  body[data-theme=dark] input[type=radio] {
    background: var(--color-surface)
  }
}

html[data-theme=light],
body[data-theme=light] {
  --color-text: rgba(0, 0, 0, 1);
  --color-black-white: rgba(0, 0, 0, 1);
  --color-black-white-negative: rgba(255, 255, 255, 1);
  --color-text-dark: rgba(62, 73, 89, 1);
  --color-text-negative: rgba(237, 241, 245, 1);
  --color-text-strong: rgba(0, 0, 0, 1);
  --color-text-secondary: rgba(62, 73, 89, 0.9);
  --color-text-tertiary: rgba(62, 73, 89, 0.32);
  --color-bg-btn: rgba(62, 73, 89, 1);
  --color-bg-btn-hover: rgba(54, 72, 93, 1);
  --color-bg-img: rgba(221, 221, 221, 1);
  --color-border: rgba(62, 73, 89, 0.08);
  --color-border-g: rgba(236, 236, 236, 1);
  --color-border-y: rgba(204, 204, 204, 1);
  --color-border-h: rgba(177, 177, 177, 1);
  --color-border-t: rgba(62, 73, 89, 0.05);
  --color-surface: rgba(255, 255, 255, 1);
  --color-surface-g: rgba(247, 248, 252, 1);
  --color-surface-c: rgba(240, 240, 240, 1);
  --color-surface-n: rgba(240, 241, 242, 0.50);
  --color-surface-t: rgba(255, 255, 255, 0);
  --color-surface-2: rgba(255, 255, 255, 0.2);
  --color-surface-5: rgba(255, 255, 255, 0.5);
  --color-surface-8: rgba(255, 255, 255, 0.8);
  --color-surface-9: rgba(255, 255, 255, 0.9);
  --color-surface-a: rgba(247, 247, 247, 1);
  --color-surface-dark: rgba(38, 40, 44, 1);
  --color-background: rgba(248, 248, 248, 1);
  --color-background-dark: rgba(29, 30, 32, 1);
  --color-fill: rgba(237, 13, 13, 1);
  --color-fill-hover: rgba(200, 7, 7, 1);
  --color-fill-t: rgba(237, 13, 13, .3);
  --color-fill-spor: rgba(16, 143, 35, 1);
  --color-yellow-spor: rgba(255, 211, 2, 1);
  --color-yellow-spor-t: rgba(255, 246, 171, 1);
  --color-text-on-fill: rgba(255, 255, 255, 1);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-slide: rgba(221, 221, 221, 1);
  --color-green: rgba(90, 193, 42);
  --color-green-2: rgba(56, 153, 11, 1);
  --color-red: rgba(227, 10, 23, 1);
  --color-esh-red: rgba(237, 13, 13, 1);
  --color-red-t: rgba(255, 75, 75, 1);
  --color-yellow: rgba(255, 211, 2, 1);
  --color-blue: rgba(2, 136, 209, 1);
  --color-azure-blue: rgba(31, 147, 255, 1);
  --color-crystal-blue: rgba(76, 198, 244, 1);
  --color-crystal-blue-2: rgba(76, 198, 244, .6);
  --color-athens-gray: rgba(237, 237, 244, 1);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-black-5: rgba(0, 0, 0, 5);
  --color-black-6: rgba(0, 0, 0, 6);
  --color-shadow: rgba(177, 177, 177, 0.50);
  --color-dark-grey: rgba(219, 219, 219, 1)
}

html[data-theme=light] header .topmenu ul li a.ara,
body[data-theme=light] header .topmenu ul li a.ara {
  background: url("../index/search_1.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.canli-tv,
body[data-theme=light] header .topmenu ul li a.canli-tv {
  background: url("../index/tv-live.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.arsiv,
body[data-theme=light] header .topmenu ul li a.arsiv {
  background: url("../index/archive.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.tema,
body[data-theme=light] header .topmenu ul li a.tema {
  background: url("../index/theme-dark.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.user,
body[data-theme=light] header .topmenu ul li a.user {
  background: url("../index/user_1.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.notifications,
body[data-theme=light] header .topmenu ul li a.notifications {
  background: url("../index/notifications-on.svg") 0 0 no-repeat;
  background-size: 24px
}

html[data-theme=light] header .topmenu ul li a.notifications[data-status=off],
body[data-theme=light] header .topmenu ul li a.notifications[data-status=off] {
  background: url("../index/notifications-off.svg") 0 0 no-repeat;
  background-size: 24px
}

#top-msg {
  line-height: 3.5em;
  text-shadow: 0 0 8px var(--color-text-dark);
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: var(--color-white);
  background: var(--color-black) url("../index/bg.jpg") center right no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

#top-msg .container {
  min-height: 60px;
  background: url("../index/msg.png") left 22px no-repeat;
  background-size: 690px;
  text-align: right
}

#top-msg .container .btn {
  position: relative;
  top: -2px
}

#top-msg .container .btn i {
  font-size: 19px;
  font-size: 1.1875rem;
  font-weight: 500;
  position: relative;
  top: 3px
}

@media(min-width: 768px) {
  #top-msg .container {
    text-align: right
  }
}

@media(max-width: 1194px) {
  #top-msg .container {
    background-position: 2rem 23px
  }
}

@media(max-width: 1024px) {
  #top-msg .container {
    background-position: 2rem 25px;
    background-size: 500px
  }
}

@media(max-width: 768px) {
  #top-msg .container {
    background: url("../index/msg-mobile.png") center 15px no-repeat;
    background-size: 330px;
    text-align: center
  }

  #top-msg .container .btn {
    margin-top: 60px
  }
}

@media(max-width: 320px) {
  #top-msg .container {
    background: url("../index/msg-mobile.png") center 15px no-repeat;
    background-size: 300px
  }
}

@media(max-width: 834px) {
  #top-msg {
    background-position: center center
  }
}

footer {
  position: relative;
  background: var(--color-surface);
  margin-top: 50px;
  border-top: 1px solid var(--color-border);
  padding: 30px 0 0 0;
  min-width: 100%;
  z-index: 99
}

footer .endline {
  display: flex;
  justify-content: space-between;
  align-items: center
}

footer .endline .logo {
  float: none;
  width: 150px;
  margin-top: 2px;
  margin-left: 10px
}

footer .endline .logo a {
  width: 100%
}

footer .endline .slogan {
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text-secondary);
  letter-spacing: -0.5px
}

@media(min-width: 1112px) {
  footer .endline .slogan {
    flex-basis: 58%
  }
}

footer .endline .social-links {
  overflow-x: hidden
}

footer .endline .social-links a {
  margin-left: 10px;
  width: 30px;
  height: 30px
}

@media(max-width: 1024px) {
  footer .endline .social-links {
    margin-top: 10px
  }
}

@media(max-width: 1024px) {
  footer .endline {
    flex-direction: column;
    text-align: center
  }
}

footer #footer-menu {
  box-shadow: inset 0 8px 10px -8px var(--color-border);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 60px 0;
  margin-top: 30px
}

footer #footer-menu .grid>.item {
  padding-bottom: 0;
  padding-left: 20px;
  border-right: 1px solid var(--color-border)
}

footer #footer-menu .grid>.item:last-child {
  border-right: 0 none
}

@media(max-width: 480px) {
  footer #footer-menu .grid>.item:nth-child(2n) {
    border-right: 0 none
  }
}

@media(max-width: 568px) {
  footer #footer-menu .grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width: 568px) {
  footer #footer-menu .grid {
    grid-template-columns: repeat(3, 1fr)
  }

  footer #footer-menu .grid>.item:nth-child(3n) {
    border-right: 0 none
  }
}

@media(min-width: 992px) {
  footer #footer-menu .grid {
    grid-template-columns: repeat(5, 1fr)
  }

  footer #footer-menu .grid>.item:nth-child(3) {
    border-right: 1px solid var(--color-border)
  }
}

footer #footer-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0
}

footer #footer-menu ul li {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  margin-bottom: 0;
  line-height: 1em;
  font-weight: 600;
  padding: 0;
  font-size: 14px;
  font-size: .875rem
}

footer #footer-menu ul li.title {
  padding: 10px 10px 10px 0;
  font-weight: 700;
  color: var(--color-text);
  background: none
}

footer #footer-menu ul li.title i {
  float: left;
  font-size: 18px;
  line-height: .8em;
  width: 22px;
  color: var(--color-fill)
}

footer #footer-menu ul li a {
  display: inline-block;
  position: relative;
  color: var(--color-text);
  line-height: 1.1em;
  text-align: left;
  padding: 6px 0;
  letter-spacing: -0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

@media(max-width: 768px) {
  footer #footer-menu ul li a {
    display: block;
    line-height: 1.4em
  }
}

footer .bottom {
  color: var(--color-text-secondary);
  padding: 40px 0 80px 0;
  font-size: 12px;
  font-size: .75rem;
  letter-spacing: -0.5px
}

footer .bottom .social-links {
  margin-top: 10px;
  margin-bottom: 20px
}

footer .bottom .social-links a {
  margin: 0 4px
}

footer .bottom .social-links ahover {
  transform: translateY(0)
}

footer .bottom .links {
  margin-bottom: 10px
}

footer .bottom .firstline {
  font-size: 14px;
  font-size: .875rem
}

footer .bottom .firstline a {
  display: inline-block;
  position: relative;
  margin-right: 20px;
  font-weight: 600;
  padding: 6px 0;
  color: var(--color-text);
  line-height: 1.1em;
  letter-spacing: -0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

footer .bottom .firstline a:after {
  content: "";
  display: block;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  background-color: var(--color-fill);
  bottom: 0;
  height: 3px;
  left: 50%;
  position: absolute;
  transition: width .3s ease 0s, left .3s ease 0s;
  width: 0
}

footer .bottom .firstline a:hover {
  color: var(--color-fill)
}

footer .bottom .firstline a:hover:after {
  width: 100%;
  left: 0
}

footer .bottom .secondline {
  font-size: 13px;
  font-size: .8125rem;
  margin-top: 20px
}

footer .bottom .thirdline {
  color: var(--color-text);
  margin-top: 20px;
  font-size: 14px;
  font-size: .875rem
}

footer .bottom .thirdline .lines {
  line-height: 1.8em;
  margin-bottom: 30px
}

footer .bottom .bull {
  display: inline-block;
  width: 10px;
  text-align: center
}

@media(max-width: 667px) {
  footer .bottom {
    text-align: center
  }
}

.breadcrumbs {
  position: relative;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  padding: 5px 0;
  background-color: var(--color-surface-n) !important;
  border-bottom: 1px solid var(--color-border)
}

.breadcrumbs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap
}

.breadcrumbs ul li {
  margin-bottom: 0;
  display: inline-block;
  padding: 6px 0 6px 2px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 1.2em;
  font-size: 13px;
  font-size: .8125rem;
  color: var(--color-text)
}

.breadcrumbs ul li:not(:first-child) {
  padding-left: 20px;
  background: url("../index/chevron-right.svg") -3px 1px no-repeat;
  background-size: 25px
}

.breadcrumbs ul li .material-icons,
.breadcrumbs ul li .material-icons-outlined {
  float: left;
  line-height: 1.5em;
  font-size: 18px;
  font-size: 1.125rem
}

.breadcrumbs ul li a {
  display: inline-block;
  color: var(--color-text-secondary);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.breadcrumbs ul li a:hover {
  color: var(--color-text)
}

.breadcrumbs ul li.active a {
  color: var(--color-text) !important
}

@media(max-width: 667px) {
  .breadcrumbs {
    display: none
  }
}

.croppie-container {
  width: 100%
}

.croppie-container .cr-image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  max-height: none;
  max-width: none
}

.croppie-container .cr-boundary {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 6px
}

.croppie-container .cr-viewport,
.croppie-container .cr-resizer {
  position: absolute;
  border: 2px solid #fff;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
  z-index: 0
}

.croppie-container .cr-resizer {
  z-index: 2;
  box-shadow: none;
  pointer-events: none
}

.croppie-container .cr-resizer-vertical,
.croppie-container .cr-resizer-horisontal {
  position: absolute;
  pointer-events: all
}

.croppie-container .cr-resizer-vertical::after,
.croppie-container .cr-resizer-horisontal::after {
  display: block;
  position: absolute;
  box-sizing: border-box;
  border: 1px solid black;
  background: #fff;
  width: 10px;
  height: 10px;
  content: ""
}

.croppie-container .cr-resizer-vertical {
  bottom: -5px;
  cursor: row-resize;
  width: 100%;
  height: 10px
}

.croppie-container .cr-resizer-vertical::after {
  left: 50%;
  margin-left: -5px
}

.croppie-container .cr-resizer-horisontal {
  right: -5px;
  cursor: col-resize;
  width: 10px;
  height: 100%
}

.croppie-container .cr-resizer-horisontal::after {
  top: 50%;
  margin-top: -5px
}

.croppie-container .cr-original-image {
  display: none
}

.croppie-container .cr-vp-circle {
  border-radius: 50%
}

.croppie-container .cr-overlay {
  z-index: 1;
  position: absolute;
  cursor: move;
  touch-action: none
}

.croppie-container .cr-slider-wrap {
  width: 75%;
  margin: 15px auto;
  margin-bottom: 0;
  text-align: center
}

.croppie-result {
  position: relative;
  overflow: hidden
}

.croppie-result img {
  position: absolute
}

.croppie-container .cr-image,
.croppie-container .cr-overlay,
.croppie-container .cr-viewport {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0)
}

.cr-slider {
  -webkit-appearance: none;
  width: 300px;
  max-width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 15px;
  background-color: transparent
}

.cr-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: 3px
}

.cr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px
}

.cr-slider:focus {
  outline: none
}

.cr-slider::-moz-range-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: 3px
}

.cr-slider::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: -6px
}

.cr-slider:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px
}

.cr-slider::-ms-track {
  width: 100%;
  height: 5px;
  background: transparent;
  border-color: transparent;
  border-width: 6px 0;
  color: transparent
}

.cr-slider::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px
}

.cr-slider::-ms-fill-upper {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px
}

.cr-slider::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ddd;
  margin-top: 1px
}

.cr-slider:focus::-ms-fill-lower {
  background: rgba(0, 0, 0, 0.7)
}

.cr-slider:focus::-ms-fill-upper {
  background: rgba(0, 0, 0, 0.7)
}

.cr-rotate-controls {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1
}

.cr-rotate-controls button {
  border: 0;
  background: none
}

.cr-rotate-controls i:before {
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  font-size: 22px
}

.cr-rotate-l i:before {
  content: "↺"
}

.cr-rotate-r i:before {
  content: "↻"
}

.ql-toolbar.ql-snow {
  height: 42px;
  background: var(--color-border);
  border: 0 none
}

.ql-toolbar.ql-snow .ql-formats {
  vertical-align: top
}

.ql-container {
  height: 150px
}

.ql-container.ql-snow {
  border: 0 none;
  background: var(--color-border-t)
}

.ql-container .ql-editor {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400
}

@media(min-width: 568px) {
  .comment-button-container {
    float: left
  }

  .comment-button-container.centered {
    float: none;
    text-align: center;
    margin-top: 20px
  }
}

#writecontainer {
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 2rem;
  margin-bottom: 20px
}

@media(max-width: 480px) {
  #writecontainer {
    padding: 1rem
  }
}

.comments {
  padding-bottom: 1rem
}

@media(min-width: 1112px) {
  .comments {
    margin-left: 80px
  }
}

.comments .comments-list {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out
}

.comments .comments-list.working {
  position: relative;
  padding-bottom: 50px
}

.comments .comments-list.working:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("../index/loading-red.svg") center center no-repeat;
  background-size: 55px;
  height: 50px;
  width: 100%
}

.comments .name,
.comments .title,
.comments label {
  color: var(--color-text);
  font-size: 15px;
  font-size: .9375rem;
  font-weight: 400;
  letter-spacing: -0.3px
}

.comments .name {
  color: var(--color-text);
  line-height: 1.8em
}

.comments .name .desc,
.comments .name small {
  display: block;
  color: var(--color-text-secondary);
  font-weight: 400
}

.comments .name .desc {
  font-size: 13px;
  font-size: .8125rem
}

.comments .title {
  margin-top: 20px
}

.comments .title .dropdown {
  position: relative;
  display: inline-block;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  padding: 5px 23px 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0);
  border-bottom: 0 none;
  text-align: left
}

.comments .title .dropdown.active {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 3px 6px 3px 0 var(--color-border)
}

.comments .title .dropdown.active:after {
  display: block;
  content: " ";
  background: var(--color-surface);
  width: 100%;
  height: 10px;
  z-index: 99;
  position: absolute;
  bottom: -3px;
  left: 0
}

.comments .title .dropdown.active ul {
  display: block
}

.comments .title .dropdown.active .arrow {
  transform: rotate(-180deg);
  margin-bottom: 5px
}

.comments .title .dropdown .arrow {
  position: absolute;
  right: 0;
  top: 4px;
  background: url("../index/chevron-down.svg") right center no-repeat;
  background-size: 100%;
  width: 25px;
  height: 22px;
  display: inline-block;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.comments .title .dropdown svg,
.comments .title .dropdown path {
  fill: var(--color-fill)
}

.comments .title .dropdown ul {
  display: none;
  position: absolute;
  top: 90%;
  right: -1px;
  background: var(--color-surface);
  margin: 0;
  padding: 5px 0;
  list-style-type: none;
  width: 150px;
  border: 1px solid var(--color-border);
  box-shadow: 3px 6px 3px 0 var(--color-border);
  z-index: 9
}

.comments .title .dropdown ul li {
  margin: 0
}

.comments .title .dropdown ul li a {
  font-size: 14px;
  font-size: .875rem;
  color: var(--color-text);
  display: block;
  padding: 4px 10px;
  font-weight: 400
}

.comments .title .dropdown ul li a:hover {
  background-color: var(--color-border)
}

@media(min-width: 568px) {
  .comments .title {
    margin-top: 0;
    text-align: right
  }
}

.comments .error,
.comments .nocomment {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 15px;
  font-size: .9375rem;
  line-height: 1.6em;
  color: var(--color-text-secondary)
}

.comments .error a,
.comments .nocomment a {
  display: block
}

.comments input[type=text] {
  font-size: 16px;
  font-size: 1rem;
  color: var(--color-text);
  height: auto;
  line-height: 1.4em;
  padding: 10px 20px;
  margin-bottom: 15px;
  font-weight: 400;
  border-radius: 0;
  border: 0 none;
  background: var(--color-border)
}

.comments input[type=text]:hover,
.comments input[type=text]:focus,
.comments input[type=text]:active {
  background: var(--color-border-t)
}

.comments textarea {
  font-size: 16px;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4em;
  padding: 20px;
  margin-bottom: 0;
  font-weight: 400;
  border-radius: 0;
  border: 0 none;
  background: var(--color-border);
  resize: none;
  height: 120px;
  min-height: 120px;
  max-height: 300px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.comments textarea:hover,
.comments textarea:focus,
.comments textarea:active {
  background: var(--color-border-t)
}

.comments .icons a {
  display: inline-block;
  margin-right: 5px
}

.comments .icons a img,
.comments .icons a svg {
  max-width: 20px
}

.comments .btn {
  padding: 3px 15px
}

.comments .comment {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  padding-left: 55px;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

@media(max-width: 480px) {
  .comments .comment>.row {
    flex-direction: row
  }
}

.comments .comment .row-write {
  margin-top: 2rem;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  padding: 2rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border)
}

@media(max-width: 480px) {
  .comments .comment .row-write {
    padding: 1rem
  }
}

.comments .comment>.row:first-child .column:nth-child(2) {
  padding-left: 0
}

.comments .comment .avatar {
  position: absolute;
  left: 4px;
  top: 20px;
  width: 40px;
  height: 40px;
  font-weight: 700;
  font-size: 15px;
  font-size: .9375rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: var(--color-text-secondary);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  cursor: default;
  text-align: center;
  line-height: 3.2em;
  overflow: hidden
}

.comments .comment .avatar .firstchar {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
  font-size: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  color: var(--color-white);
  background: var(--color-fill)
}

@media(max-width: 480px) {
  .comments .comment .avatar {
    width: 40px;
    height: 40px
  }

  .comments .comment .avatar .firstchar {
    font-size: 15px;
    font-size: .9375rem;
    line-height: 2em
  }
}

.comments .comment .info {
  font-size: 15px;
  font-size: .9375rem;
  font-weight: 700;
  margin-bottom: .5rem;
  letter-spacing: -0.3px
}

.comments .comment .info .verified {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  top: 4px;
  margin-left: 1px;
  background: url("../index/verified.svg") center center no-repeat;
  background-size: 90%
}

.comments .comment .info .diamond {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  top: 4px;
  margin-left: 1px;
  background: url("../index/gem.svg") center center no-repeat;
  background-size: 90%
}

.comments .comment .info .date {
  display: inline-block;
  margin-left: 5px;
  line-height: 1.3em;
  letter-spacing: -0.3px;
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-text-tertiary)
}

.comments .comment p {
  font-size: 15px;
  font-size: .9375rem;
  line-height: 1.6em;
  margin-bottom: .5rem;
  letter-spacing: -0.2px
}

.comments .comment .actions {
  white-space: nowrap
}

.comments .comment .actions a {
  display: inline-block;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 3px 0 3px 18px;
  margin-right: 6px;
  line-height: 1em;
  letter-spacing: -0.3px;
  background-size: 16px 16px
}

.comments .comment .actions a .count {
  display: inline-block;
  padding: 2px 4px;
  min-width: 16px;
  text-align: center;
  color: var(--color-text);
  background: var(--color-border);
  font-size: 11px;
  font-size: .6875rem;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.comments .comment .actions a .count.hidden {
  display: none
}

@media(max-width: 480px) {
  .comments .comment .actions a .count {
    padding: 2px
  }
}

.comments .comment .actions a:hover,
.comments .comment .actions a.checked {
  color: var(--text-secondary)
}

.comments .comment .actions a.like {
  background: url("../index/like.svg") 0 4px no-repeat
}

.comments .comment .actions a.like:hover,
.comments .comment .actions a.like.checked {
  background-image: url("../index/like-filled.svg")
}

.comments .comment .actions a.like .count {
  color: var(--color-white);
  background: #4caf50
}

.comments .comment .actions a.dislike {
  background: url("../index/dislike.svg") 0 3px no-repeat
}

.comments .comment .actions a.dislike:hover,
.comments .comment .actions a.dislike.checked {
  background-image: url("../index/dislike-filled.svg")
}

.comments .comment .actions a.reply {
  background: url("../index/reply.svg") 0 2px no-repeat
}

.comments .comment .actions a.reply:hover {
  background: url("../index/reply-filled.svg") 0 0 no-repeat
}

.comments .comment .actions a.reply .cancel {
  display: none
}

@media(max-width: 480px) {
  .comments .comment .actions a {
    font-size: 12px;
    font-size: .75rem
  }
}

.comments .comment.answer {
  display: none;
  padding-left: 70px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
  border-top: 0;
  border-left: 1px solid var(--color-dark-grey)
}

.comments .comment.answer:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 40px;
  height: 1px;
  width: 18px;
  border-top: 1px solid var(--color-dark-grey)
}

.comments .comment.answer:after {
  content: "";
  display: block;
  background: var(--color-dark-grey);
  position: absolute;
  left: -8px;
  top: 33px;
  width: 15px;
  height: 15px;
  border: 4px solid var(--color-background);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px
}

.comments .comment.answer .actions .reply {
  display: none
}

.comments .comment.answer .avatar {
  left: 20px
}

@media(max-width: 667px) {
  .comments .comment.answer {
    margin-left: 1.5rem
  }
}

.comments .comment:not(.answer):last-child:before {
  display: none
}

.comments .comment.active .actions a.reply .cancel {
  display: block
}

.comments .comment.active .actions a.reply .submit {
  display: none
}

.comments .comment .report {
  float: right;
  color: var(--color-text-tertiary);
  display: none
}

.comments .comment:hover .report {
  display: block
}

.comments .item.hidemax {
  display: none
}

.comments .item .show-more-answers .more {
  display: block
}

.comments .item .show-more-answers .less {
  display: none
}

.comments .item.expanded .comment:not(.answer):before {
  content: "";
  display: block;
  position: absolute;
  left: 24px;
  top: 60px;
  height: 100%;
  width: 1px;
  border-left: 1px solid var(--color-dark-grey)
}

.comments .item.expanded .comment.answer {
  display: block
}

.comments .item.expanded .show-more-answers {
  margin-top: 10px;
  margin-left: 15px
}

.comments .item.expanded .show-more-answers .less {
  display: block
}

.comments .item.expanded .show-more-answers .more {
  display: none
}

@media(max-width: 480px) {
  .comments>.row>.column>.row {
    flex-direction: row
  }
}

.comments .show-more-answers,
.comments .show-more-comments {
  display: block;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  background: url("../index/chevron-down-thin.svg") center 70px no-repeat;
  background-size: 50px;
  border-top: 1px solid var(--color-border);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.comments .show-more-answers:hover,
.comments .show-more-comments:hover {
  color: var(--color-fill);
  background-position: center 74px
}

.comments .show-more-answers.nomore,
.comments .show-more-comments.nomore {
  background: none;
  padding-bottom: 25px
}

.comments .show-more-answers .counter,
.comments .show-more-comments .counter {
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.3em;
  color: var(--color-text-secondary)
}

.comments .show-more-answers img,
.comments .show-more-answers svg,
.comments .show-more-comments img,
.comments .show-more-comments svg {
  width: 16px;
  height: 21px;
  vertical-align: top
}

.comments .show-more-answers i,
.comments .show-more-comments i {
  font-size: 24px;
  font-size: 1.5rem
}

@media(max-width: 480px) {

  .comments .show-more-answers,
  .comments .show-more-comments {
    margin-bottom: 0;
    border-bottom: 0
  }
}

.comments .show-more-answers {
  font-size: 13px;
  font-size: .8125rem;
  text-align: left;
  margin-top: 0;
  margin-left: 53px;
  padding: 3px 10px 3px 4px;
  line-height: 1em;
  border-top: 0 none;
  background: none;
  background: var(--color-border);
  display: inline-block;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border-top: 0 none
}

.comments .show-more-answers i {
  vertical-align: middle;
  font-size: 20px;
  font-size: 1.25rem
}

@media(min-width: 1112px) {
  .related {
    margin-left: 80px
  }
}

.avatars {
  height: 485px;
  overflow-x: hidden
}

@media(max-width: 667px) {
  .avatars {
    height: calc(100vh - 80px)
  }
}

.avatars ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  max-width: 600px
}

.avatars ul li {
  float: left;
  width: 50%;
  margin: 0
}

.avatars ul li a {
  display: flex;
  padding: 0;
  margin: 5px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.avatars ul li a img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  height: auto;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.avatars ul li a img:hover {
  transform: scale(1.1)
}

@media(max-width: 375px) {
  .avatars ul li {
    width: 33%
  }
}

@media(min-width: 425px) {
  .avatars ul li {
    width: 33%
  }
}

@media(min-width: 568px) {
  .avatars ul li {
    width: 25%
  }
}

@media(min-width: 667px) {
  .avatars ul li {
    width: 20%
  }
}

@media(min-width: 768px) {
  .avatars ul li {
    width: 25%
  }
}

@media(min-width: 992px) {
  .avatars ul li {
    width: 25%
  }
}

@media(min-width: 1112px) {
  .avatars ul li {
    width: 20%
  }
}

.avatars ul:after {
  display: block;
  content: " ";
  clear: both
}

.comment-row {
  position: relative
}

.comment-row .avatar {
  width: 48px;
  height: 48px;
  font-weight: 700;
  font-size: 15px;
  font-size: .9375rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: var(--color-text-secondary);
  background: var(--color-border);
  border: 1px solid var(--color-border);
  cursor: default;
  text-align: center;
  line-height: 3.2em;
  overflow: hidden
}

.comment-row .selectedavatar {
  position: relative;
  width: 120px;
  float: left
}

@media(max-width: 667px) {
  .comment-row .selectedavatar {
    width: 80px
  }
}

.comment-row .selectedavatar img,
.comment-row .selectedavatar svg {
  width: 100%;
  border: 1px solid #c1c4ca;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px
}

.comment-row .selectedavatar .remove {
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  position: absolute;
  right: -7px;
  top: 20px;
  background: var(--color-fill) url("../index/close-white.svg") center center no-repeat;
  background-size: 12px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.comment-row .selectedavatar .remove:hover {
  transform: scale(0.9)
}

.comment-row .selectedavatar .remove span {
  display: none
}

.comment-row .icon-selector {
  position: absolute;
  right: 0;
  top: 0
}

.comment-row .icon-selector a {
  display: inline-block
}

.comment-row .icon-selector a i {
  font-size: 24px;
  font-size: 1.5rem
}

.comment-row.active .richtext {
  margin-left: 140px
}

@media(max-width: 667px) {
  .comment-row.active .richtext {
    margin-left: 90px
  }
}

.emojilist {
  margin-top: 0
}

@media(min-width: 768px) {
  .emojilist {
    max-width: 360px
  }
}

.emojilist .row {
  width: 100%;
  margin: 0
}

.emojilist .row .column {
  padding: 0
}

.emojilist .titles {
  display: flex;
  flex-direction: row
}

.emojilist .titles .title {
  flex: 1 1 auto;
  padding-bottom: 6px;
  border-bottom: 4px solid var(--color-border);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.emojilist .titles .title.active {
  border-color: var(--color-fill)
}

.emojilist .titles .title.active span.emoji {
  background: var(--color-border)
}

.emojilist .titles .title a {
  display: block;
  text-align: center;
  line-height: 1.4em;
  margin: 0 2px 0 2px;
  font-size: 12px;
  font-size: .75rem;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.emojilist .titles .title a span.emoji {
  display: block;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 15px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.emojilist .titles .title a:hover span.emoji {
  background: var(--color-border)
}

.emojilist .emojis {
  display: none;
  padding: 0;
  height: 335px
}

@media(max-width: 667px) {
  .emojilist .emojis {
    height: calc(100vh - 150px)
  }
}

.emojilist .emojis.active {
  display: block
}

.emojilist .emojis .name {
  font-weight: 600;
  padding: 15px 12px;
  margin: 0 0 5px 0;
  border-bottom: 2px solid var(--color-border)
}

.emojilist .emojis a {
  display: inline-block;
  width: 50px;
  height: 45px;
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  border: 2px solid rgba(0, 0, 0, 0);
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px
}

.emojilist .emojis a:hover,
.emojilist .emojis a:active {
  transform: scale(1.05);
  border-color: var(--color-slide)
}

.commentbtn {
  float: right;
  margin-left: 10px
}

.writecomment .comment-row {
  margin-top: 1rem
}

.writecomment .comment-row textarea {
  font-size: 16px;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4em;
  padding: 20px;
  margin-bottom: 0;
  font-weight: 400;
  border-radius: 0;
  border: 0 none;
  background: var(--color-border);
  resize: none;
  height: 120px;
  min-height: 120px;
  max-height: 300px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

@media(max-width: 480px) {
  .writecomment .column-33 {
    flex: 1 1 auto !important;
    max-width: 100% !important
  }
}

.hotnews .error,
.hotnews .loading {
  text-align: center;
  padding: 40px;
  margin-top: 20px;
  min-height: 100px;
  background: var(--color-background)
}

.hotnews .error img,
.hotnews .error svg,
.hotnews .loading img,
.hotnews .loading svg {
  width: 60px
}

.hotnews .error {
  color: var(--color-red)
}

.hotnews .loaded .loading {
  display: none
}

.hotnews .item {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: -0.3px;
  display: flex;
  color: var(--color-black-white);
  align-items: center
}

.hotnews .item img {
  width: 100%;
  max-width: 114px;
  min-width: 114px;
  height: 65px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out
}

.hotnews .item:hover .number {
  color: var(--color-text)
}

.hotnews .item:hover img {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6)
}

.hotnews .item .text {
  display: block;
  width: 100%;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px
}

.hotnews .item .text .title {
  display: block;
  max-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis
}

.hotnews .item .time-ago,
.hotnews .item .watchcount,
.hotnews .item .info {
  background: url("../index/comments-default.svg") 0 2px no-repeat;
  background-size: 17px;
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-text-secondary);
  padding: 0 0 0 19px;
  letter-spacing: -0.5px;
  margin-top: 3px
}

.hotnews .item .time-ago {
  background: url("../index/clock.svg") 0 3px no-repeat;
  background-size: 13px;
  padding: 0 0 0 17px;
  margin-top: 0;
  display: block
}

.hotnews .item .watchcount {
  background: url("../index/watch.svg") 0 2px no-repeat;
  background-size: 16px
}

.hotnews .item .published {
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-text-secondary);
  padding: 0;
  letter-spacing: -0.5px;
  margin-top: 3px
}

.hotnews .item .new {
  display: inline-block;
  color: var(--color-text-secondary);
  background: var(--color-border);
  font-size: 12px;
  font-size: .75rem;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  line-height: 1em;
  padding: 4px;
  letter-spacing: -0.5px
}

.hotnews .item .number {
  position: absolute;
  display: none;
  width: 17px;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  text-align: right;
  letter-spacing: -3px;
  font-size: 24px;
  font-size: 1.5rem;
  color: var(--color-text-tertiary);
  font-weight: 500
}

.hotnews .item .time {
  position: absolute;
  left: 125px;
  bottom: 7px;
  padding: 0 5px;
  letter-spacing: -0.5px;
  line-height: 1.5em;
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-white);
  background: rgba(0, 0, 0, .7);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.hotnews .item:last-child {
  border-bottom: 0 none
}

.hotnews .sidebar-hotnews .loading {
  background: url("../index/loading-red.svg") center center no-repeat;
  background-size: 60px
}

@media(max-width: 667px) {
  .hotnews {
    display: none
  }
}

html[data-theme=dark] .hotnews a.item .info,
body[data-theme=dark] .hotnews a.item .info {
  background: url(../index/comments-dark.svg) 0 2px no-repeat;
  background-size: 17px
}

#video-frame iframe {
  position: relative;
  z-index: 1
}

@media(min-width: 320px) {
  #video-frame iframe {
    max-height: 163px
  }
}

@media(min-width: 375px) {
  #video-frame iframe {
    max-height: 194px
  }
}

@media(min-width: 425px) {
  #video-frame iframe {
    max-height: 222px
  }
}

@media(min-width: 480px) {
  #video-frame iframe {
    max-height: 253px
  }
}

@media(min-width: 568px) {
  #video-frame iframe {
    max-height: 307px
  }
}

@media(min-width: 576px) {
  #video-frame iframe {
    max-height: 307px
  }
}

@media(min-width: 667px) {
  #video-frame iframe {
    max-height: 340px
  }
}

@media(min-width: 768px) {
  #video-frame iframe {
    max-height: 395px
  }
}

@media(min-width: 820px) {
  #video-frame iframe {
    max-height: 425px
  }
}

@media(min-width: 992px) {
  #video-frame iframe {
    max-height: 342px
  }
}

@media(min-width: 1024px) {
  #video-frame iframe {
    max-height: 353px
  }
}

@media(min-width: 1112px) {
  #video-frame iframe {
    max-height: 387px
  }
}

@media(min-width: 1194px) {
  #video-frame iframe {
    max-height: 441px
  }
}

@media(min-width: 320px) {
  #video-frame {
    max-height: 163px
  }
}

@media(min-width: 375px) {
  #video-frame {
    max-height: 194px
  }
}

@media(min-width: 425px) {
  #video-frame {
    max-height: 222px
  }
}

@media(min-width: 480px) {
  #video-frame {
    max-height: 253px
  }
}

@media(min-width: 568px) {
  #video-frame {
    max-height: 307px
  }
}

@media(min-width: 576px) {
  #video-frame {
    max-height: 307px
  }
}

@media(min-width: 667px) {
  #video-frame {
    max-height: 340px
  }
}

@media(min-width: 768px) {
  #video-frame {
    max-height: 395px
  }
}

@media(min-width: 820px) {
  #video-frame {
    max-height: 425px
  }
}

@media(min-width: 992px) {
  #video-frame {
    max-height: 342px
  }
}

@media(min-width: 1024px) {
  #video-frame {
    max-height: 353px
  }
}

@media(min-width: 1112px) {
  #video-frame {
    max-height: 387px
  }
}

@media(min-width: 1194px) {
  #video-frame {
    max-height: 441px
  }
}

#article-slider {
  max-width: 785px;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--color-black)
}

#article-slider * {
  box-sizing: border-box
}

#article-slider .swiper {
  width: 100%;
  height: 100%;
  box-sizing: border-box
}

#article-slider .swiper .swiper-slide a {
  display: flex;
  position: relative
}

#article-slider .swiper .swiper-slide a img {
  width: 100%;
  height: auto
}

#article-slider .swiper .swiper-slide a .content {
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9;
  padding: 3rem 3rem 5rem 3rem;
  background: rgba(0, 0, 0, .5);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0) 100%)
}

#article-slider .swiper .swiper-slide a .content .title {
  display: inline-block;
  color: var(--color-white);
  font-size: 22px;
  font-size: 1.375rem;
  line-height: 1.3em;
  font-weight: 800;
  padding: .3rem .5rem
}

@media(max-width: 568px) {
  #article-slider .swiper .swiper-slide a .content .title {
    display: inline
  }
}

@media(max-width: 375px) {
  #article-slider .swiper .swiper-slide a .content .title {
    font-size: 15px;
    font-size: .9375rem
  }
}

#article-slider .swiper .swiper-slide a .content .desc {
  display: block;
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3em;
  margin-top: .5rem;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

@media(max-width: 480px) {
  #article-slider .swiper .swiper-slide a .content .desc {
    font-size: 17px;
    font-size: 1.0625rem;
    -webkit-line-clamp: 2
  }
}

@media(max-width: 568px) {
  #article-slider .swiper .swiper-slide a .content {
    padding: 1.5rem 1.5rem 2.7rem 1.5rem
  }
}

#article-slider .swiper .swiper-button-prev,
#article-slider .swiper .swiper-button-next {
  background-size: 10px;
  background-color: var(--color-esh-red);
  left: 10px;
  height: 40px;
  width: 25px
}

#article-slider .swiper .swiper-button-prev:after,
#article-slider .swiper .swiper-button-next:after {
  font-size: 16px;
  font-size: 1rem
}

#article-slider .swiper .swiper-button-next {
  left: auto;
  right: 10px
}

#article-slider .swiper .swiper-pagination {
  position: absolute;
  display: flex;
  width: 100.1%;
  bottom: 15px;
  justify-content: center;
  gap: 2px;
  z-index: 99
}

@media(min-width: 668px) {
  #article-slider .swiper .swiper-pagination {
    gap: 0;
    bottom: 0;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .15)
  }
}

#article-slider .swiper .swiper-pagination .swiper-pagination-bullet {
  cursor: pointer;
  position: relative;
  height: 100%;
  min-width: 10px;
  min-height: 10px;
  line-height: 2.4em;
  margin: 0;
  color: var(--color-white);
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
  opacity: 1;
  border-left: 1px solid rgba(255, 255, 255, .15);
  text-align: center
}

@media(min-width: 668px) {
  #article-slider .swiper .swiper-pagination .swiper-pagination-bullet {
    flex-basis: 100%
  }
}

@media(max-width: 767px) {
  #article-slider .swiper .swiper-pagination .swiper-pagination-bullet {
    font-size: 14px;
    font-size: .875rem
  }
}

@media(max-width: 667px) {
  #article-slider .swiper .swiper-pagination .swiper-pagination-bullet {
    border: 1px solid rgba(255, 255, 255, .15)
  }
}

@media(max-width: 667px) {
  #article-slider .swiper .swiper-pagination .swiper-pagination-bullet span {
    display: none
  }
}

#article-slider .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--color-esh-red)
}

#article-slider .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  bottom: 100%;
  left: 50%;
  border: solid rgba(0, 0, 0, 0);
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(213, 0, 0, 0);
  border-bottom-color: var(--color-esh-red);
  border-width: 6px;
  margin-left: -6px;
  z-index: 9
}

@media(max-width: 667px) {
  #article-slider .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    display: none
  }
}

#article-slider .swiper:hover .swiper-button-prev,
#article-slider .swiper:hover .swiper-button-next {
  opacity: 1
}

.fslightbox-slide-btn-container {
  display: none !important
}

header {
  margin-bottom: 0
}

.banner img {
  width: 100%;
  height: auto
}

#articles {
  margin-top: 1.5rem
}

@media(max-width: 1024px) {
  #articles .post>.row>.column>.row {
    width: 100%
  }
}

@media(min-width: 1112px) {
  #articles .post>.row>.column>.row .column-article {
    max-width: 788px
  }
}

#articles .post>.row>.column>.row .column-social {
  max-width: 82px
}

#articles .post .social {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  z-index: 9;
  -webkit-transition: .6s ease-in-out;
  -moz-transition: .6s ease-in-out;
  -o-transition: .6s ease-in-out;
  transition: .6s ease-in-out
}

#articles .post .social ul {
  margin: 0;
  padding: 0;
  list-style-type: none
}

#articles .post .social ul li {
  text-align: center;
  cursor: default;
  margin-bottom: 10px
}

#articles .post .social ul li a:active {
  position: relative;
  top: 1px
}

#articles .post .social ul li a.fontsize {
  display: inline-block;
  width: 25px;
  margin: 0 auto;
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-secondary)
}

#articles .post .social ul li a.fontsize:hover {
  color: var(--color-text)
}

@media(max-width: 667px) {
  #articles .post .social ul li a.fontsize {
    font-size: 16px;
    font-size: 1rem
  }
}

#articles .post .social ul li .title {
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-text-secondary);
  line-height: 1em;
  margin-top: 35px;
  margin-bottom: 12px
}

@media(max-width: 667px) {
  #articles .post .social ul li .title {
    display: none
  }
}

#articles .post .social ul li .comment-count {
  display: block;
  min-width: 30px;
  max-width: 40px;
  color: var(--color-white);
  background: var(--color-fill);
  font-weight: 400;
  margin: 0 auto;
  font-size: 11px;
  font-size: .6875rem;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  line-height: 1.6em;
  overflow: hidden
}

#articles .post .social ul li .comment-count .text {
  display: none
}

#articles .post .social ul li a.icon {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  margin-bottom: 15px
}

#articles .post .social ul li a.icon>span {
  display: none
}

#articles .post .social ul li a.icon.whatsapp {
  background: url("../index/whatsapp.svg") center center no-repeat;
  background-size: 100%
}

@media(max-width: 667px) {
  #articles .post .social ul li a.icon.whatsapp {
    background-color: #2cb742;
    background-size: 78%
  }
}

#articles .post .social ul li a.icon.facebook {
  background: url("../index/facebook.svg") center center no-repeat;
  background-size: 100%
}

@media(max-width: 667px) {
  #articles .post .social ul li a.icon.facebook {
    background-color: #1093f4;
    background-size: 78%
  }
}

#articles .post .social ul li a.icon.twitter {
  background: url("../index/twitter-new.svg") center center no-repeat;
  background-size: 100%
}

@media(max-width: 667px) {
  #articles .post .social ul li a.icon.twitter {
    background-color: #55acee;
    background-size: 78%
  }
}

#articles .post .social ul li a.icon.copy {
  background: url("../index/link_1.svg") center center no-repeat;
  background-size: 100%
}

@media(max-width: 667px) {
  #articles .post .social ul li a.icon.copy {
    background-color: #eee;
    background-size: 45%
  }
}

@media(max-width: 667px) {
  #articles .post .social ul li a.icon {
    display: inline-block;
    overflow: hidden;
    position: relative;
    top: 4px;
    margin: 0;
    margin-bottom: 0;
    margin-left: 1px;
    width: 35px;
    height: 27px;
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 rgba(50, 50, 50, .3)
  }

  #articles .post .social ul li a.icon:before,
  #articles .post .social ul li a.icon:after {
    display: none
  }
}

#articles .post .social .comment-shortcut {
  cursor: pointer
}

@media(max-width: 668px) {
  #articles .post .social .comment-shortcut .comment-count {
    display: none
  }
}

@media(max-width: 667px) {
  #articles .post .social .comment-shortcut {
    display: none
  }
}

@media(max-width: 667px) {
  #articles .post .social {
    position: static
  }

  #articles .post .social.sticky-hide {
    top: 0 !important;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out
  }

  #articles .post .social ul {
    display: flex;
    align-items: center;
    margin: 0 1rem
  }

  #articles .post .social ul li {
    margin-bottom: 0;
    text-align: right
  }

  #articles .post .social ul li:first-child {
    margin-right: 10px
  }
}

@media(max-width: 667px)and (max-width: 667px) {
  #articles .post .social ul {
    margin: 0 .5rem
  }
}

#articles .post .social .copier {
  float: right;
  display: block;
  height: 1px;
  opacity: 0;
  overflow: hidden
}

#articles .post .social .copier input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  margin: 0
}

@media(min-width: 1112px) {
  #articles .sidebar {
    display: block;
    max-width: 410px
  }
}

@media(max-width: 667px) {
  #articles {
    margin-top: 0
  }
}

.article-info {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  margin-bottom: 1rem;
  max-width: 700px
}

.article-info ul {
  margin: 0 !important;
  padding: 0;
  height: 29px;
  list-style-type: none;
  display: flex
}

.article-info ul li {
  letter-spacing: -0.2px;
  padding: 3px 5px !important;
  margin: 0 !important;
  cursor: default;
  white-space: nowrap
}

.article-info ul li.sep {
  display: block;
  width: 13px;
  min-width: 13px;
  background: url("../index/chevron-right.svg") center center no-repeat;
  background-size: 25px
}

.article-info ul li:first-child {
  padding-left: 0
}

.article-info ul li:last-child {
  border-right: 0 none;
  border-left: 0 none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.article-info ul li a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.article-info ul li a span {
  font-size: 80%
}

.article-info .google-news {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  letter-spacing: -0.5px
}

.article-info .google-news .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  width: 120px;
  height: 30px;
  margin-top: 0;
  padding: 0 15px;
  background: var(--color-surface);
  background-size: 70%;
  border: 1px solid var(--color-border)
}

@media(max-width: 375px) {
  .article-info .google-news .icon {
    width: 100px;
    background-position: center 8px
  }
}

@media(max-width: 667px) {
  .article-info {
    margin-top: 1rem;
    margin-bottom: 1rem
  }
}

.article-title h1 {
  font-size: 40px;
  font-size: 2.5rem;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-bottom: 1.5rem;
  color: var(--color-black-white)
}

@media(max-width: 768px) {
  .article-title h1 {
    font-size: 28px;
    font-size: 1.75rem;
    margin-bottom: 1rem
  }
}

.article-title .desc {
  position: relative;
  margin-bottom: 2rem;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.3em;
  font-weight: 600;
  color: var(--color-black-white);
  letter-spacing: -0.2px
}

@media(max-width: 768px) {
  .article-title .desc {
    font-size: 21px;
    font-size: 1.3125rem
  }
}

.article-date {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-size: .875rem;
  margin-bottom: .5rem
}

.article-date>span {
  display: inline-block
}

.article-date>span:nth-child(2) {
  border-left: 1px solid var(--color-border);
  padding-left: 10px;
  margin-left: 8px
}

@media(max-width: 568px) {
  .article-date>span {
    display: block
  }

  .article-date>span:nth-child(2) {
    border-left: 0 none;
    padding-left: 0;
    margin-left: 0
  }
}

.article-share {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  background: var(--color-background)
}

@media(max-width: 568px) {
  .article-share {
    padding: 0 1rem
  }
}

.article-share .google-news {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.5px
}

.article-share .google-news .text {
  margin-right: 5px
}

@media(max-width: 480px) {
  .article-share .google-news .text {
    display: none
  }
}

.article-share .google-news .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 30px;
  margin-top: 0;
  padding: 0 15px;
  background: var(--color-surface);
  background-size: 70%;
  border: 1px solid var(--color-border)
}

@media(max-width: 375px) {
  .article-share .google-news .icon {
    width: 90px;
    padding: 0 5px
  }
}

.article-share .social-links {
  display: flex;
  gap: 5px;
  align-items: center
}

.article-share .social-links a {
  min-width: 60px;
  min-height: 26px;
  border-radius: 3px;
  filter: none;
  opacity: 1;
  background-position: center center
}

@media(max-width: 480px) {
  .article-share .social-links a {
    min-width: 50px
  }
}

@media(max-width: 375px) {
  .article-share .social-links a {
    min-width: 35px
  }
}

.article-share .social-links a.whatsapp {
  background-color: #2cb742
}

.article-share .social-links a.facebook {
  background-color: #1093f4
}

.article-share .social-links a.twitter {
  background-color: #000
}

.article-share .social-links a.copy {
  background: #394f99 url("../index/copy.svg") center center no-repeat;
  background-size: 16px
}

.article-tags .title {
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  display: inline-block;
  letter-spacing: -0.2px;
  margin-right: 5px
}

.article-tags a {
  display: inline-block;
  padding: 8px 15px;
  margin-right: 2px;
  margin-bottom: 5px;
  line-height: 1.3em;
  letter-spacing: -0.5px;
  font-size: 13px;
  font-size: .8125rem;
  font-weight: 500;
  background: var(--color-border-t);
  border-radius: 20px
}

.article-gnews {
  margin-top: 30px;
  display: flex
}

@media(max-width: 667px) {
  .article-gnews {
    margin: 25px 15px
  }
}

.article-tags {
  white-space: nowrap;
  overflow-y: hidden;
  margin-bottom: 6px
}

.news-source {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px
}

.article-author {
  position: relative;
  border-top: 1px solid var(--color-border);
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 70px;
  cursor: default
}

.article-author .avatar {
  display: block;
  position: absolute;
  left: 8px;
  top: 15px;
  width: 48px;
  height: 48px;
  background: var(--color-border-t);
  box-shadow: rgba(0, 0, 0, .1) 0 10px 50px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.article-author .avatar img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 0
}

.article-author .name {
  font-size: 13px;
  font-size: .8125rem;
  letter-spacing: -0.3px;
  line-height: 1.4em
}

.article-author .social-links {
  margin-top: 7px
}

.article-author:hover .avatar {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 1px 3px 1px
}

@media(min-width: 568px) {
  .article-author {
    display: flex;
    align-items: center
  }

  .article-author .social-links {
    border-top: 0 none;
    border-left: 1px solid var(--color-border);
    padding: 10px 0 10px 15px;
    margin-left: 20px
  }
}

.article-body {
  position: relative;
  color: var(--color-text)
}

.article-body img {
  width: 100% !important
}

@media(max-width: 667px) {
  .article-body img {
    width: 100% !important;
    padding: .8rem;
    background: var(--color-background)
  }

  .article-body figure.image img {
    width: 100% !important;
    padding: 0
  }
}

.article-body.img-full-width img,
.article-body.bio img {
  width: 100% !important
}

.article-body.img-full-width p img,
.article-body.bio p img {
  width: 100% !important
}

@media(max-width: 667px) {

  .article-body.img-full-width p img,
  .article-body.bio p img {
    width: calc(100% + 2rem) !important
  }
}

.article-body h1 {
  font-size: 22px;
  font-size: 1.375rem
}

.article-body #articledesc {
  position: relative;
  margin-bottom: 2rem;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.3em;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.2px
}

@media(max-width: 768px) {
  .article-body #articledesc {
    font-size: 21px;
    font-size: 1.3125rem
  }
}

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.4em;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 1.5rem
}

@media(max-width: 768px) {

  .article-body h2,
  .article-body h3,
  .article-body h4,
  .article-body h5,
  .article-body h6 {
    font-size: 22px;
    font-size: 1.375rem;
    margin-bottom: 1.5rem
  }
}

.article-body h6 {
  font-size: 22px;
  font-size: 1.375rem
}

.article-body a {
  color: var(--color-red);
  font-weight: 500;
  text-decoration: underline;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out
}

.article-body a:hover {
  text-decoration: none
}

.article-body a.foto-galeri,
.article-body a.video-galeri {
  display: block;
  padding: 10px 15px 10px 30px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: -0.5px;
  color: var(--color-white);
  text-decoration: none
}

.article-body a.foto-galeri {
  background: var(--color-background-dark) url(../index/camera-red.svg) 10px 15px no-repeat;
  background-size: 15px
}

.article-body a.video-galeri {
  background: var(--color-background-dark) url(../index/play-red.svg) 10px 15px no-repeat;
  background-size: 15px
}

.article-body .caption {
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-text-secondary);
  margin-top: -20px;
  margin-bottom: 20px;
  letter-spacing: -0.5px
}

.article-body .ad {
  margin-bottom: 1.5rem
}

.article-body .ad img {
  display: flex;
  width: 100%;
  height: auto
}

.article-body figure.image {
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  margin-bottom: .3rem
}

.article-body figure.image .caption {
  position: absolute;
  bottom: 0;
  right: 0;
  text-align: right;
  padding: 5px 10px;
  margin-bottom: 0;
  background: rgba(0, 0, 0, .7);
  color: var(--color-white);
  font-size: 12px;
  font-size: .75rem;
  letter-spacing: -0.5px
}

.article-body figure.image .number {
  display: block;
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 2px 10px;
  text-align: center;
  line-height: 2.1em;
  font-weight: 300;
  font-size: 12px;
  font-size: .75rem;
  color: var(--color-white);
  background: var(--color-background-dark);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  opacity: .8
}

.article-body figure.image .number span {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 700
}

.article-body figure.image img {
  width: 100%;
  height: auto
}

.article-body figure.image svg,
.article-body figure.image img {
  min-width: 100%
}

.article-body figure.image:hover:after {
  display: block
}

.article-body .article-source {
  position: relative;
  text-align: center;
  min-height: 40px
}

.article-body .article-source:before {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  background: var(--color-border)
}

.article-body .article-source span {
  position: absolute;
  display: block;
  background: var(--color-background);
  padding: 0 20px;
  left: 50%;
  top: 50%;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  transform: translate(-50%, -50%)
}

.article-body p {
  font-family: system-ui, -apple-system, "Inter", sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  color: var(--color-text);
  line-height: 1.6em;
  font-weight: 400;
  margin-bottom: 1.5rem;
  word-break: break-word
}

@media(max-width: 667px) {
  .article-body p img {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
    max-width: none
  }
}

.article-body .news-recommendation {
  display: flex;
  align-items: center;
  height: 180px;
  margin: 30px 0;
  background-size: cover;
  background-position: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  border-radius: 3px;
  overflow: hidden;
  background-color: #d1d5db;
  position: relative
}

.article-body .news-recommendation img {
  height: 100%;
  width: auto;
  object-fit: cover;
  aspect-ratio: 1/1
}

.article-body .news-recommendation .news-details {
  flex: 1;
  height: 100%;
  padding: 16px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  flex-direction: column;
  justify-content: center
}

.article-body .news-recommendation .news-details span {
  font-size: 12px;
  font-weight: bold;
  opacity: .7;
  letter-spacing: 1px
}

.article-body .news-recommendation .news-details a {
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 1.35;
  letter-spacing: .3px;
  transition: background-color .15s ease;
  font-family: system-ui, -apple-system, "Inter", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis
}

.article-body .news-recommendation .news-details a:hover {
  text-decoration: underline
}

@media screen and (max-width: 768px) {
  .article-body .news-recommendation {
    height: 110px !important;
    font-size: 16px !important;
    margin: 10px 0
  }

  .article-body .news-details {
    padding: 10px !important
  }

  .article-body .news-details span {
    font-size: 11px !important
  }

  .article-body .news-details a {
    font-size: 16px !important
  }

  .article-body .mobile-hidden {
    display: none
  }
}

.article-body .attention {
  margin: 2.5rem 0
}

.article-body .attention .title {
  display: block;
  margin-bottom: 15px;
  font-size: 22px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.5px
}

.article-body .attention .title i {
  display: inline-block;
  font-size: 24px;
  font-size: 1.5rem;
  margin: 0 3px 0 0;
  color: var(--color-fill)
}

@media(max-width: 667px) {
  .article-body .attention .title {
    margin-left: 1rem
  }
}

.article-body .attention a {
  min-height: 120px;
  display: flex;
  color: var(--color-white);
  background: var(--color-red);
  margin-bottom: 20px;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  text-decoration: none
}

.article-body .attention a:hover {
  box-shadow: none
}

.article-body .attention a .img {
  display: flex;
  min-width: 200px;
  max-width: 200px;
  flex-basis: 200px
}

.article-body .attention a .img img {
  width: 100%;
  object-fit: cover
}

@media(max-width: 568px) {
  .article-body .attention a .img {
    min-width: 100%;
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
    padding: 1rem 1rem 0 1rem
  }
}

.article-body .attention a .desc {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 20px 30px;
  font-size: 20px;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  font-weight: 700;
  line-height: 1.2em
}

.article-body .attention a .desc .desc-title {
  content: "İlginizi Çekebilir";
  display: block;
  width: 100%;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 500;
  opacity: .85;
  margin-bottom: 5px;
  letter-spacing: -0.2px
}

.article-body .attention a .desc .title {
  display: block;
  font-weight: 600;
  font-size: 18px;
  font-size: 1.125rem;
  margin-bottom: 10px
}

.article-body .attention a .desc .btn {
  margin-top: 15px;
  margin-left: auto;
  background: rgba(0, 0, 0, .2) url("../index/right-arrow-white.svg") 94% center no-repeat;
  padding-right: 30px;
  background-size: 15px;
  font-size: 14px;
  font-size: .875rem;
  font-weight: 700
}

@media(max-width: 568px) {
  .article-body .attention a .desc .btn {
    text-align: center
  }
}

@media(max-width: 568px) {
  .article-body .attention a .desc {
    padding: 20px
  }

  .article-body .attention a .desc .btn {
    width: 100%
  }
}

@media(max-width: 568px) {
  .article-body .attention a {
    flex-direction: column
  }
}

.article-body .attention.red a {
  color: var(--color-white);
  background: var(--color-red)
}

.article-body .attention.yellow a {
  color: var(--color-text-dark);
  background: var(--color-yellow)
}

.article-body .attention.green a {
  color: var(--color-white);
  background: var(--color-green-2)
}

.article-body .attention.blue a {
  color: var(--color-white);
  background: var(--color-blue)
}

.article-body ul,
.article-body ol {
  margin-bottom: 20px;
  margin-left: 20px;
  list-style-type: square
}

.article-body ul li,
.article-body ol li {
  margin-bottom: 5px
}

.article-body ul li:last-child,
.article-body ol li:last-child {
  margin-bottom: 0
}

.article-body ol {
  list-style-type: decimal
}

.article-body .video-frame,
.article-body #video-frame {
  margin-bottom: 1.5rem
}

@media(max-width: 768px) {
  .article-body {
    padding-left: 0
  }
}

@media(max-width: 667px) {
  .article-body>*:not(img):not(.image):not(iframe):not(.attention):not(#esh_player) {
    margin-left: 1rem;
    margin-right: 1rem
  }
}

.article-ad {
  margin: 20px 0 40px 0;
  text-align: center
}

@media(max-width: 667px) {
  .article-ad {
    margin: 0 0 30px 0
  }
}

.post[data-font-size="0"] .article-title h1 {
  font-size: 25px;
  font-size: 1.5625rem
}

.post[data-font-size="0"] .article-title .desc {
  font-size: 10px;
  font-size: .625rem
}

.post[data-font-size="0"] .article-body {
  font-size: 13px;
  font-size: .8125rem
}

.post[data-font-size="0"] .article-body h2,
.post[data-font-size="0"] .article-body h3,
.post[data-font-size="0"] .article-body h4,
.post[data-font-size="0"] .article-body h5,
.post[data-font-size="0"] .article-body h6 {
  font-size: 15px;
  font-size: .9375rem
}

.post[data-font-size="0"] .article-body p {
  font-size: 13px;
  font-size: .8125rem
}

.post[data-font-size="1"] .article-title h1 {
  font-size: 30px;
  font-size: 1.875rem
}

.post[data-font-size="1"] .article-title .desc {
  font-size: 14px;
  font-size: .875rem
}

.post[data-font-size="1"] .article-body {
  font-size: 14px;
  font-size: .875rem
}

.post[data-font-size="1"] .article-body h2,
.post[data-font-size="1"] .article-body h3,
.post[data-font-size="1"] .article-body h4,
.post[data-font-size="1"] .article-body h5,
.post[data-font-size="1"] .article-body h6 {
  font-size: 18px;
  font-size: 1.125rem
}

.post[data-font-size="1"] .article-body p {
  font-size: 14px;
  font-size: .875rem
}

.post[data-font-size="2"] .article-title h1 {
  font-size: 35px;
  font-size: 2.1875rem
}

.post[data-font-size="2"] .article-title .desc {
  font-size: 19px;
  font-size: 1.1875rem
}

.post[data-font-size="2"] .article-body {
  font-size: 17px;
  font-size: 1.0625rem
}

.post[data-font-size="2"] .article-body h2,
.post[data-font-size="2"] .article-body h3,
.post[data-font-size="2"] .article-body h4,
.post[data-font-size="2"] .article-body h5,
.post[data-font-size="2"] .article-body h6 {
  font-size: 21px;
  font-size: 1.3125rem
}

.post[data-font-size="2"] .article-body p {
  font-size: 17px;
  font-size: 1.0625rem
}

.post[data-font-size="3"] .article-title h1 {
  font-size: 40px;
  font-size: 2.5rem
}

.post[data-font-size="3"] .article-title .desc {
  font-size: 24px;
  font-size: 1.5rem
}

.post[data-font-size="3"] .article-body {
  font-size: 20px;
  font-size: 1.25rem
}

.post[data-font-size="3"] .article-body h2,
.post[data-font-size="3"] .article-body h3,
.post[data-font-size="3"] .article-body h4,
.post[data-font-size="3"] .article-body h5,
.post[data-font-size="3"] .article-body h6 {
  font-size: 24px;
  font-size: 1.5rem
}

.post[data-font-size="3"] .article-body p {
  font-size: 20px;
  font-size: 1.25rem
}

.post[data-font-size="4"] .article-title h1 {
  font-size: 45px;
  font-size: 2.8125rem
}

.post[data-font-size="4"] .article-title .desc {
  font-size: 29px;
  font-size: 1.8125rem
}

.post[data-font-size="4"] .article-body {
  font-size: 23px;
  font-size: 1.4375rem
}

.post[data-font-size="4"] .article-body h2,
.post[data-font-size="4"] .article-body h3,
.post[data-font-size="4"] .article-body h4,
.post[data-font-size="4"] .article-body h5,
.post[data-font-size="4"] .article-body h6 {
  font-size: 27px;
  font-size: 1.6875rem
}

.post[data-font-size="4"] .article-body p {
  font-size: 23px;
  font-size: 1.4375rem
}

.post[data-font-size="5"] .article-title h1 {
  font-size: 50px;
  font-size: 3.125rem
}

.post[data-font-size="5"] .article-title .desc {
  font-size: 34px;
  font-size: 2.125rem
}

.post[data-font-size="5"] .article-body {
  font-size: 26px;
  font-size: 1.625rem
}

.post[data-font-size="5"] .article-body h2,
.post[data-font-size="5"] .article-body h3,
.post[data-font-size="5"] .article-body h4,
.post[data-font-size="5"] .article-body h5,
.post[data-font-size="5"] .article-body h6 {
  font-size: 30px;
  font-size: 1.875rem
}

.post[data-font-size="5"] .article-body p {
  font-size: 26px;
  font-size: 1.625rem
}

.post[data-font-size="6"] .article-title h1 {
  font-size: 55px;
  font-size: 3.4375rem
}

.post[data-font-size="6"] .article-title .desc {
  font-size: 39px;
  font-size: 2.4375rem
}

.post[data-font-size="6"] .article-body {
  font-size: 33px;
  font-size: 2.0625rem
}

.post[data-font-size="6"] .article-body h2,
.post[data-font-size="6"] .article-body h3,
.post[data-font-size="6"] .article-body h4,
.post[data-font-size="6"] .article-body h5,
.post[data-font-size="6"] .article-body h6 {
  font-size: 34px;
  font-size: 2.125rem
}

.post[data-font-size="6"] .article-body p {
  font-size: 33px;
  font-size: 2.0625rem
}

.post[data-font-size="7"] .article-title h1 {
  font-size: 60px;
  font-size: 3.75rem
}

.post[data-font-size="7"] .article-title .desc {
  font-size: 44px;
  font-size: 2.75rem
}

.post[data-font-size="7"] .article-body {
  font-size: 36px;
  font-size: 2.25rem
}

.post[data-font-size="7"] .article-body h2,
.post[data-font-size="7"] .article-body h3,
.post[data-font-size="7"] .article-body h4,
.post[data-font-size="7"] .article-body h5,
.post[data-font-size="7"] .article-body h6 {
  font-size: 39px;
  font-size: 2.4375rem
}

.post[data-font-size="7"] .article-body p {
  font-size: 36px;
  font-size: 2.25rem
}

.post[data-font-size="8"] .article-title h1 {
  font-size: 65px;
  font-size: 4.0625rem
}

.post[data-font-size="8"] .article-title .desc {
  font-size: 49px;
  font-size: 3.0625rem
}

.post[data-font-size="8"] .article-body {
  font-size: 39px;
  font-size: 2.4375rem
}

.post[data-font-size="8"] .article-body h2,
.post[data-font-size="8"] .article-body h3,
.post[data-font-size="8"] .article-body h4,
.post[data-font-size="8"] .article-body h5,
.post[data-font-size="8"] .article-body h6 {
  font-size: 44px;
  font-size: 2.75rem
}

.post[data-font-size="8"] .article-body p {
  font-size: 39px;
  font-size: 2.4375rem
}

.shotnews-article {
  margin-top: 1.5rem;
  display: grid;
  grid-gap: .5rem;
  grid-template-columns: repeat(2, 1fr)
}

.shotnews-article a {
  display: block;
  padding: 1rem;
  color: var(--color-black-white);
  background: var(--color-surface-c)
}

.shotnews-article a img {
  width: 100%
}

.shotnews-article a .text {
  display: block;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 92px
}

.endnews {
  max-width: 1194px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem
}

@media(min-width: 834px) {
  .endnews {
    grid-template-columns: repeat(2, 1fr)
  }
}

.endnews .item {
  padding: 9px;
  background: var(--color-surface-c)
}

.endnews .item a {
  display: block;
  position: relative;
  color: var(--color-black-white);
  line-height: 1.3em
}

.endnews .item a .text {
  height: auto;
  margin-top: .5rem;
  align-items: normal;
  display: flex;
  font-size: 17px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-black-white);
  overflow: hidden;
  line-height: 1.3em
}

.bio-details {
  background: var(--color-surface);
  padding: 20px;
  margin-bottom: 30px
}

.bio-details>ul {
  list-style-type: none;
  margin: 0;
  padding: 0
}

.bio-details>ul>li {
  padding: 7px 10px;
  margin: 0;
  border-bottom: 1px dotted var(--color-border);
  font-weight: 400;
  font-size: 14px;
  font-size: .875rem
}

.bio-details>ul>li .title {
  font-weight: 700;
  font-size: 15px;
  font-size: .9375rem;
  color: var(--color-text-secondary)
}

.bio-details>ul>li:last-child {
  border-bottom: 0 none
}

.bio-details>ul>li ul {
  padding: 0;
  margin: 5px 0 0 17px;
  list-style: disc
}

.bio-details>ul>li ul li {
  padding: 0;
  margin-bottom: 5px
}

.bio-details>ul>li ul li:last-child {
  margin-bottom: 0
}

.bio-links {
  margin-bottom: 30px
}

.bio-links ul {
  margin: 0;
  padding: 0;
  list-style: none
}

.bio-links ul li {
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted var(--color-border)
}

.bio-links ul li:last-child {
  border-bottom: 0 none
}

.bio-links ul li a {
  display: block;
  padding: 8px 5px 8px 25px;
  font-weight: 500;
  background: url("../index/chevron-right.svg") left 9px no-repeat
}

@media(max-width: 768px) {
  .bio-links ul li a {
    padding: 8px 5px 8px 50px;
    background-position: 28px 9px
  }
}

.next-loading {
  background: #fff;
  margin: 0 auto;
  max-width: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center
}

.loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #ee0a0a;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

@media(max-width: 991px) {
  .article-res {
    max-width: 810px !important;
    margin: 0 auto !important
  }
}

.taboola-end {
  margin-top: 10px
}

@media(max-width: 667px) {
  .taboola-end {
    margin-top: 5px;
    padding: .8rem
  }
}

.news-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 15px;
  padding-left: 1rem;
  padding-right: 1rem
}

@media(min-width: 660px) {
  .news-card-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-left: 80px;
    padding-left: 0;
    padding-right: 0
  }
}

.news-card {
  display: block;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: .5rem;
  background: none !important
}

.news-card a {
  display: block;
  text-decoration: none;
  color: inherit
}

.news-card a .news-card-img {
  display: block;
  width: 100%;
  margin-bottom: 10px
}

.news-card a .news-card-text {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.2px;
  display: block;
  color: inherit
}