/*
Theme Name: Sloosh
Author URI: http://www.advfor.ru
Author: Advanced studio
Version: 1.0
Text Domain: sloosh
*/

/* HELPERS
-------------------- */
small,
.small {
  font-size: 1.4rem;
  line-height: 120%;
}
hr {
  border: none;
  height: 1px;
  background-color: rgba(0,0,0,0.102);
}
.h-100 {
  min-height: 100%;
  box-sizing: border-box;
}
.mb-05 {
  margin-bottom: 1rem;
}
.mt-05 {
  margin-top: 1rem;
}
.mr-05 {
  margin-right: 1rem;
}
.ml-05 {
  margin-left: 1rem;
}
.slick-dots li {
  border-radius: 999px;
  width: 8px;
  height: 8px;
  background: rgba(0,0,0,0.4);
  opacity: 0.5;
  display: inline-block;
  margin: 0 8px;
}
.slick-dots li.slick-active {
  opacity: 1;
}
.slick-dots button {
  display: none;
}
.slick-prev,
.slick-next {
  cursor: pointer;
  background-color: rgba(0,0,0,0.051);
  border: 1px solid rgba(0,0,0,0.051);
}
.slick-prev:hover,
.slick-next:hover {
  background-color: #dfdfdf;
  border-color: #dfdfdf;
}
.b-gray {
  background-color: rgba(0,0,0,0.051);
}
.b-light {
  background-color: rgba(0,0,0,0.059);
}
.b-white {
  background-color: #fff;
  color: #5b5b5b;
}
.b-dark {
  background-color: #13162a;
  color: #fff;
}
.b-rounded {
  border-radius: 1.6rem;
}
.b-circled {
  border-radius: 999rem;
}
.b-bordered {
  border: 1px solid rgba(0,0,0,0.102);
}
.b-decored {
  color: #fff;
  background: linear-gradient(90deg, #13162a 0%, #5a273f 100%);
}
.text-uz-bold {
  font-weight: 600;
  font-size: 1.8rem;
}
a..text-uz-bold:hover {
  color: #f24d6c;
}
.big-bold {
  font-weight: 600;
}
.big {
  font-size: 1.8rem;
}
.text-gray {
  color: rgba(0,0,0,0.6);
}
.text-light {
  color: rgba(255,255,255,0.698);
}
.text-green {
  color: #f24d6c !important;
}
.text-danger {
  color: #f00;
}
.text-dark {
  color: #d0d3e6;
}
.big-uz-bold {
  font-weight: 500;
  font-size: 1.8rem;
}
.small-uz-bold {
  font-weight: 600;
  font-size: 1.4rem;
}
.white_70 {
  color: rgba(255,255,255,0.6);
}
.gray_text {
  color: #5b5b5b;
}
@media (min-width: 768px) {
  .small-uz-bold {
    font-size: 1.6rem;
  }
  .big {
    font-size: 2rem;
    line-height: 130%;
  }
  .big-bold {
    font-size: 1.8rem;
    line-height: 140%;
  }
}
ul.bullet li {
  padding-left: 16px;
}
ul.bullet li:before {
  top: 8px;
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23BB9F64'/%3E%3C/svg%3E%0A");
}
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
}
.textblock a {
  color: #f24d6c;
}
.textblock table {
  font-size: 1.4rem;
  line-height: 130%;
  border-collapse: separate;
  border-radius: 8px;
  border: 1px solid #dcd9d1;
  border-spacing: 0;
  margin-bottom: 2rem;
}
.textblock table th {
  background: #f5f1e8;
  font-weight: 700;
}
.textblock table thead th:first-child {
  border-radius: 8px 0 0 0;
}
.textblock table thead th:last-child {
  border-radius: 0 8px 0 0;
}
.textblock table th,
.textblock table td {
  text-align: left;
  padding: 1rem;
}
.textblock table th:not(:last-child),
.textblock table td:not(:last-child) {
  border-right: 1px solid #dcd9d1;
}
.textblock table td {
  border-top: 1px solid #dcd9d1;
}
.textblock table tr:nth-child(even) {
  background-color: #f2f2f2;
}
@media (min-width: 768px) {
  .textblock table {
    font-size: 1.6rem;
  }
}
.textblock blockquote {
  font-weight: 600;
  background: rgba(0,0,0,0.059) url("data:image/svg+xml,%3Csvg width='44' height='41' viewBox='0 0 44 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.8 40.3H12L0 22.2L12 4H23.8L11.3 22.2L23.8 40.3ZM43.7 40.3H31.9L19.9 22.2L31.9 4H43.7L31.4 22.2L43.7 40.3Z' fill='%23F24D6C'/%3E%3C/svg%3E%0A") no-repeat 2.5rem 2.5rem;
  background-size: 30px auto;
  padding: 2rem 2rem 2rem 8rem;
  border-radius: 1.6rem;
  border: none;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .textblock blockquote {
    font-size: 1.8rem;
    background-position: 3.5rem 3.5rem;
    background-size: 44px auto;
    padding: 3.2rem 3.2rem 3.2rem 11.6rem;
  }
}
.textblock blockquote small {
  color: #5b5b5b;
}
.textblock ul {
  margin-left: 2rem;
  list-style: disc;
}
.textblock .alignright {
  margin-bottom: 2rem;
}
.textblock .alignright img {
  width: 100%;
}
@media (min-width: 991px) {
  .textblock .alignright {
    max-width: 28rem;
    float: right;
    margin-left: 2rem;
  }
}
.textblock .image-desc {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #f24d6c;
  color: #5b5b5b;
  font-size: 1.4rem;
  line-height: 1.2;
}
.tabs-header {
  overflow-x: auto;
  text-align: center;
  display: flex;
  box-shadow: inset 0 -3px #d0d3e6;
  font-weight: 600;
  margin-bottom: 3rem;
}
.tabs-header .tab {
  cursor: pointer;
  margin: 0 3rem 0 0;
  padding: 1.5rem 0;
  border-bottom: 3px solid transparent;
}
.tabs-header .active {
  color: #f24d6c;
  border-color: #f24d6c;
}
.tabs-body .tab {
  display: none;
}
.tabs-body .active {
  display: block;
}
.tabs-body .tab iframe {
  width: 100% !important;
}
.breadcrumbs {
  color: rgba(255,255,255,0.698);
  margin-bottom: 0.8rem;
}
.breadcrumbs li {
  display: inline-block;
}
.breadcrumbs li:not(:last-child):after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2L9 6L5 10' stroke='white' stroke-opacity='0.7' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat center center;
  margin: 0 5px;
  vertical-align: middle;
}
.breadcrumbs a {
  color: rgba(255,255,255,0.698);
}

.pagenav {
  margin-bottom:3rem;
}
.pagenav a,
.pagenav span {
  display: inline-block;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #ccc;
  color: #aaa;
  text-decoration: none;
  margin: 0 10px 10px 0;
  padding: .75rem;
  min-width: 2rem;
}
.pagenav span {
  background-color: #F24E6C;
  border-color: #F24E6C;
  color: #fff;
  font-weight: 600;
}


/* --------------------------------------------------------- */
/* HEADER
-------------------- */
.header {
  background: #13162a;
  position: relative;
  color: rgba(255,255,255,0.698);
  font-size: 2rem;
  font-weight: 600;
}
.header a {
  color: #fff;
}
.header a:hover {
  color: #f24d6c;
}
.top {
  color: #fff;
  background-color: #13162a;
  border-radius: 0 0 50px 50px;
}
.mainmenu {
  display: flex;
  gap: 3.2rem;
}
.mainmenu a {
  display: block;
  margin-right: 20px;
}
.mainmenu .has-submenu {
  position: relative;
}
.mainmenu .has-submenu:after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7L1 3H9L5 7Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center center;
}
@media (max-width: 768px) {
  .menumain {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #1f1f1f;
    z-index: 100;
    padding: 4rem;
  }
  .mainmenu {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
/* PROMO */
.promo-links img {
  width: 4rem;
}
.btn--app {
  width: auto;
  white-space: nowrap;
}
@media (max-width: 580px) {
  .btn--app {
    padding: 1rem 2rem;
  }
}
.promo-screens {
  aspect-ratio: 1/1;
}
.promo-screen {
  position: absolute;
}
.promo-screen-1 {
  top: 0;
  left: 0;
}
.promo-screen-2 {
  right: 0;
  top: 10%;
}
.promo-qr {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(7px);
  border-radius: 16px;
  position: absolute;
  left: -10%;
  top: 60%;
  padding: 1.6rem;
  width: 20rem;
}
@media (min-width: 991px) {
  .btn--app {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .mainpage .top {
    background-image: url("images/promo-bg.svg"), url("images/promo-4.svg"), url("images/promo-5.svg");
    background-repeat: no-repeat;
    background-position: right center, left 5% top 0, right 5% bottom 15%;
    background-size: 50% 100%, auto, auto;
  }
}
.prev-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  width: 120%;
  z-index: -1;
}
.step-slider-outer {
  overflow: hidden;
}
.step-slider {
  background: #231e3c url("images/shadow-how-bg.svg") no-repeat center bottom;
  background-size: 100% auto;
  height: 100%;
  border-radius: 1.6rem;
}
.step-slider .slick-list,
.step-slider .slick-track {
  overflow: visible;
  height: 100%;
}
.step-slider .slick-track {
  display: flex;
}
.step-slider .slick-slide {
  height: 100%;
}
.step-slider img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 110%;
}
.step-slider-nav {
  display: grid;
  gap: 8px;
  grid-auto-rows: 1fr;
}
.step-slider-nav-item {
  background: linear-gradient(to right, #8e3654 0%, #231e3c 30%, #231e3c 100%);
  cursor: pointer;
}
.step-slider-nav-item-active {
  background: linear-gradient(to right, #8e3654 0%, #2b244b 30%, #2b244b 100%);
}
.step-slider-nav-num {
  font-weight: 600;
  font-size: 6rem;
  line-height: 120%;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.1);
}
@media (min-width: 768px) {
  .step-slider-nav-num {
    font-size: 10rem;
    padding-right: 60px;
    background: url("data:image/svg+xml,%3Csvg width='42' height='16' viewBox='0 0 42 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7C0.447715 7 4.82823e-08 7.44772 0 8C-4.82823e-08 8.55228 0.447715 9 1 9L1 8L1 7ZM41.7071 8.70711C42.0976 8.31659 42.0976 7.68342 41.7071 7.2929L35.3431 0.928935C34.9526 0.538411 34.3195 0.538411 33.9289 0.928935C33.5384 1.31946 33.5384 1.95262 33.9289 2.34315L39.5858 8L33.9289 13.6569C33.5384 14.0474 33.5384 14.6805 33.9289 15.0711C34.3195 15.4616 34.9526 15.4616 35.3431 15.0711L41.7071 8.70711ZM1 8L1 9L41 9L41 8L41 7L1 7L1 8Z' fill='%23F24D6C'/%3E%3C/svg%3E%0A") no-repeat right center;
  }
}
/* CARD
-------------------- */
.carousel {
  margin: 0 -1.2rem;
}
.carousel .slick-track {
  display: flex;
}
.carousel:not(.slick-initialized) {
  opacity: 0;
  height: 0;
}
.carousel .slick-slide {
  padding: 2rem 1.2rem 2rem;
  height: auto;
}
.carousel-prev,
.carousel-next {
  cursor: pointer;
}
.card-item {
  display: flex;
  flex-direction: column;
}
.card-item-img {
  display: block;
}
.card-item-img img {
  border-radius: 0.8rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
a.card-item-title {
  font-weight: 600;
  display: block;
}
.cart-item-meta {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-item-btns {
  margin-top: auto;
}
.btn svg:not(:last-child) {
  margin-right: 0.4rem;
}
.card-item_type1 .card-item-img,
.card-item_type3 .card-item-img {
  position: relative;
}
.card-item_type1 .card-item-img:hover:after,
.card-item_type3 .card-item-img:hover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  border-radius: 0.8rem;
  background: rgba(0,0,0,0.5) url("data:image/svg+xml,%3Csvg width='65' height='64' viewBox='0 0 65 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.400024' width='64' height='64' rx='32' fill='%23F42D52'/%3E%3Cpath d='M42.7649 31.1195L26.3741 22.2937C25.7079 21.935 24.9 22.4175 24.9 23.1742V40.8258C24.9 41.5825 25.7079 42.065 26.3741 41.7063L42.7649 32.8805C43.4661 32.5029 43.4661 31.4971 42.7649 31.1195Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat center center;
}
.card-item_type1 {
  text-align: center;
}
.card-item_type1 .card-item-img:hover:after {
  border-radius: 99rem;
}
.card-item_type1 img {
  border-radius: 99rem;
}
.card-item_type2 {
  text-align: left;
  border-radius: 1.6rem;
  padding: 1.6rem;
  background-color: #fff;
  box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
}
.card-item_type2 .card-item-img {
  margin-top: -3.4rem;
}
@media (max-width: 580px) {
  .card-item {
    max-width: 220px;
  }
}
.faq-item {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23D0D3E6'/%3E%3Cpath d='M16 10V16M16 16V22M16 16H22M16 16L10 16' stroke='%231F1F1F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 2rem top 2rem;
}
.faq-item_opened {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23D0D3E6'/%3E%3Cpath d='M22 16H16L10 16' stroke='%231F1F1F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
.faq-item_opened .faq-item-a {
  display: block;
}
.faq-item-q {
  cursor: pointer;
}
.faq-item-a {
  display: none;
}
/* multiselect */
.select-custom {
  display: none;
}
.multiselect {
  position: relative;
  color: rgba(255,255,255,0.6);
}
.multiselect-count {
  width: 24px;
  height: 24px;
  background-color: #f24d6c;
  border-radius: 99px;
  color: #fff;
  margin-left: 0.8rem;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  font-size: 1.4rem;
}
.multiselect-count:empty {
  opacity: 0;
}
.multiselect label {
  margin-bottom: 0;
}
.multiselect-label,
.multiselect-list {
  background-color: #2a3051;
  border-radius: 8px;
  padding: 1.2rem 2rem 1.2rem 1.4rem;
}
.multiselect-label {
  font-weight: 600;
  cursor: pointer;
}
.multiselect-label:after {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6L7.5 11L12 6' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 1rem;
  top: 1.75rem;
}
.multiselect:not([multiple]) .multiselect-label:after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='2.5' y1='13.5' x2='13.5' y2='13.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='2.5' y1='3.5' x2='6.5' y2='3.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='2.5' y1='8.5' x2='9.5' y2='8.5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
.multiselect-list {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  z-index: 100;
  max-width: 100%;
  display: none;
  box-shadow: 0px 3px 20px rgba(0,0,0,0.3);
}
.multiselect-list-item {
  padding: 0.4rem 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multiselect-list-item:first-child {
  border-radius: 0 0 0.25rem 0.25rem;
}
.multiselect_opened .multiselect-label {
  background-color: #2a3051;
}
.multiselect_opened .multiselect-label:after {
  transform: rotate(-180deg);
}
.multiselect_opened .multiselect-list {
  display: block;
}
.multiselect_selected .multiselect-label {
  color: #fff;
}
.search-btn {
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.5' cy='11' r='9' stroke='%235B5B5B' stroke-width='2'/%3E%3Cline x1='18.6642' y1='17.8' x2='22.5' y2='21.6358' stroke='%235B5B5B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat center center;
  width: 32px;
  height: 32px;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  border: none;
}
/* SINGLE
-------------------- */
.single-poster {
  position: relative;
  display: inline-block;
  max-width: 42rem;  
}
.single-poster img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  height: auto !important;
}
.single-poster:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58.43%, #000 100%);
}
.single-poster.b-circled:after {
  border-radius: 999rem;
}
.single-poster.b-rounded:after {
  border-radius: 1.6rem;
}

.single-anchors {
  top: 1rem;
  position: sticky;
}
.single-anchors ul {
  margin-left: 2rem;
  list-style: disc;
}
.single-anchors li {
  margin-bottom: 0.5rem;
}
.single-anchors a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding-bottom: 0.5rem;
}
.player {
  position: sticky;
  bottom: 0;
  z-index: 101;
  background: rgba(19,22,42,0.8);
  color: #fff;
}
.player-artist {
  font-weight: 600;
}
.player-img {
  max-width: 48px;
  border-radius: 0.8rem;
}
@media (min-width: 991px) {
  .player-img {
    max-width: 64px;
  }
}
.action {
  background: url("images/footer-promo-1.svg"), linear-gradient(90deg, #13162a 0%, #5a273f 100%);
  background-repeat: no-repeat;
  background-position: center top 30%;
}
@media (min-width: 991px) {
  .action .h1 {
    font-size: 8rem;
  }
}
/* TRACK
-------------------- */
.track-item {
  border-bottom: 1px solid rgba(0,0,0,0.102);
}
.track-item-img {
  border-radius: 0.8rem;
  width: 4.8rem;
}
.track-item-title {
  font-weight: 600;
}
/* FOOTER
-------------------- */
.footer-promo {
  border-radius: 4rem 4rem 0 0;
  background: #13162a url("images/shadow-footer-bg.svg") no-repeat center bottom;
  color: #fff;
}
@media (min-width: 991px) {
  .footer-promo {
    background-image: url("images/shadow-footer-bg.svg"), url("images/promo-4.svg"), url("images/footer-promo-1.svg");
    background-repeat: no-repeat;
    background-position: center bottom, left 5% top 15%, right 5% top 15%;
    background-size: contain, auto, auto;
  }
}
.footer-promo-title {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 100%;
  font-size: 10rem;
}
@media (min-width: 991px) {
  .footer-promo-title {
    font-size: 20rem;
  }
}
.footer {
  background-color: #13162a;
  color: #fff;
}
.footer a:not(.btn) {
  color: rgba(255,255,255,0.7);
}