@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

#uk-scope,
#uk-scope h1,
#uk-scope h2,
#uk-scope h3,
#uk-scope h4,
#uk-scope h5,
#uk-scope p,
#uk-scope strong,
#uk-scope b,
#uk-scope a {
  font-family: Inter;
}

#uk-scope a:hover {
  text-decoration: none;
}
#uk-scope p {
  padding: 0;
}
.uk-lightbox,
.uk-modal {
  z-index: 9999 !important;
}

.uk-modal-title {
  font-size: 1em;
  font-weight: 700;
  font-family: 'Inter';
}

.cc-size {
  padding: 0 3em;
  max-width: 1440px;
  margin: 0 auto;
}

/* Icon */
.cc-icon {
  flex: 0 0 auto;
}
.cc-icon svg {
  display: block;
  height: 1em;
  width: auto;
  fill: #444444;
  transition: fill 0.5s;
}

/* Icon list */
.cc-icon-list,
.cc-icon-list li {
  list-style-type: none;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-icon-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.cc-icon-list li {
  display: flex;
  gap: 5px;
  color: #676767;
  font-size: 0.875em;
  line-height: 1.2;
}
.cc-icon-list .cc-icon svg {
  width: 1em;
}

.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16em, 100%), 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}
.profile-card {
}

/* Profile card image */
.profile-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  padding: 64% 0 0;
  background: #444444;
}
.profile-card-image img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Profile card labels */
.profile-card-image .labels {
  position: absolute;
  left: 1em;
  top: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65em;
}
.profile-card-label {
  color: #ffffff;
  text-transform: uppercase;
  padding: 5px 10px !important;
  margin: 0 !important;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.875em;
  line-height: 17px;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-card-label svg {
  height: 0.9em;
  width: auto;
  display: block;
  fill: #ffffff;
}
.profile-card-label.premier {
  background: #2b2c2d;
}
.profile-card-label.live {
  background: #ec221f;
}

/* Profile card content */
.profile-card-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  border: 1px solid #e1e1e1;
  border-top: none;
  border-radius: 4px;
}

.profile-card-content .profile-title {
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  margin: 0 0 -0.5em !important;
  padding: 0 !important;
}

/* Star rating */
.star-rating {
  display: flex;
  gap: 8px;
  font-size: 0.75em;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}
.star-rating .stars {
  width: 8em;
  height: 1.35em;
  background-image: linear-gradient(to left, #dfdfdf 50%, #ffcc02 50%);
  -webkit-mask: url('../images/stars.svg') no-repeat center / contain;
  mask: url('../images/stars.svg') no-repeat center / contain;
}
.star-rating .rating-number {
  font-weight: 700;
  padding-top: 2px;
}
.star-rating .reviews-count {
  color: #676767;
  padding-top: 2px;
}

.event-types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Badges */
.badge {
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.2;
  padding: 4px 7px !important;
  margin: 0 !important;
  border: 1px solid #e1e1e1;
  border-radius: 2em;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  color: #676767;
  cursor: default;
  transition: color 0.35s, border-color 0.35s;
}
a.badge {
  cursor: pointer;
}
a.badge:hover {
  color: #e3af6f;
  border-color: #e3af6f;
}

/* Profile Langs */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.langs .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px 0 0 !important;
  font-weight: 700;
}
.langs .badge .cc-icon img {
  display: block;
  margin: -1px 0 -1px -1px;
}

/* Profile Links */
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.profile-link {
  font-weight: 500;
  font-size: 0.875em;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  transition: background-size 0.5s, background-position 0.75s, color 0.5s,
    border-color 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  min-width: max-content;
}
.profile-link.solid {
  border: none;
  padding: 11px;
  background-image: linear-gradient(
    90deg,
    #e3af6f 0%,
    #db8f1e 42.5%,
    #603b08 100%
  );
  background-size: 100% 100%;
  color: #ffffff;
  flex: 2;
}
.profile-link.outline {
  flex: 1;
}
.profile-link.solid:hover {
  background-size: 200% 100%;
  background-position: 100% 0;
}
.profile-link.outline:hover {
  color: #e3af6f;
  border-color: #e3af6f;
}
.profile-link.outline:hover svg {
  fill: #e3af6f;
}

/* Social Icons */
.cc-social-icons {
  display: flex;
  align-items: center;
  gap: 1em;
}
.cc-social-icons svg {
  height: 1.5em;
}
.cc-social-icons .divider {
  display: inline-block;
  width: 1px;
  height: 0.75em;
  background: #e1e1e1;
}
.cc-social-icons a:hover svg {
  fill: #db8f1e;
}

/* DJ Bio Page */

.bio-breadcrumbs-section {
  background: #2c2c2c;
}
.bio-breadcrumbs-section .cc-size {
  min-height: 5em;
  display: flex;
  align-items: center;
  padding-top: 2em;
  padding-bottom: 5em;
}
.bio-breadcrumbs-section p {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 0.875em;
}
.bio-breadcrumbs-section .cc-icon {
  display: inline-block;
  font-size: 0.6em;
}
.bio-breadcrumbs-section .cc-icon svg {
  fill: transparent;
}
.bio-breadcrumbs-section a {
  color: #ffffff;
  position: relative;
  display: inline-block;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bio-breadcrumbs-section a:hover {
  color: #e3af6f;
}





.cc-cell {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}
.cc-block {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.cc-block h2 {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dj-bio-page h1 {
  font-weight: 700;
  font-size: 3.625em;
  line-height: 1.2;
  margin-top: 3.5rem;
  margin-bottom: -0.25em;
}

.dj-bio-page .profile-card-image {
  padding: 0;
  border-radius: 4px;
}
.dj-bio-page .profile-card-image::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
}
.dj-bio-page .profile-card-image img {
  position: static;
  height: auto;
}

.profile-card-image .watch-live {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1em;
  display: flex;
}
.profile-card-image .watch-live a {
  font-weight: 500;
  font-size: 0.875em;
  line-height: 17px;
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  padding: 1em;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  transition: color 0.5s, border-color 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.profile-card-image .watch-live a svg {
  fill: #ffffff;
}
.profile-card-image .watch-live a:hover {
  color: #e3af6f;
  border-color: #e3af6f;
}
.profile-card-image .watch-live a:hover svg {
  fill: #e3af6f;
}

/* Bio Text */
.bio-text {
  line-height: 1.5;
  color: #676767;
  padding: 0 0 0 1.5em;
  border-left: 2px solid #e3af6f;
}
.show-more-text {
  -webkit-line-clamp: 5;
  line-clamp: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.show-more-text.expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.bio-text .inner-text > * {
  margin: 0 0 12px;
}
.bio-text .inner-text > *:last-of-type {
  margin-bottom: 0;
}
.bio-text strong {
  color: #444444;
}

/* Icon Box */
.cc-icon-box {
  padding: 1em;
  display: flex;
  gap: 0.75em;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  flex: 1;
  align-items: flex-start;
  background: transparent !important;
}
.cc-icon-box.icon-top {
  flex-direction: column;
}

/* Date icon */
.cc-icon-box-icon.date {
  font-size: 0.875em;
  width: 3.43em;
  height: 3.43em;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 3.43em;
  background: #444444;
}

.cc-icon-box-icon img {
  height: 3em;
  width: auto;
}
.cc-icon-box-content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.cc-icon-box-content h3 {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.2;
  padding: 0;
  margin: 0;
}

/* Performances */
.performances {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.performances .cc-icon-box {
  flex: 0 0 calc(50% - 0.5em);
}



/* Upcoming Events */
.upcoming-events {
  display: flex;
  flex-direction: column;
  gap: 1em;
}


/* Mixes  */
.mixes-section {
  background: #2c2c2c;
  margin-top: 3.5rem;
  padding: 2em;
  border-radius: 4px;
}
.mixes-section h2 {
  color: #ffffff;
}




/* Gallery */
.cc-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.cc-gallery > div {
  flex: 0 0 calc(25% - 0.75em);
}
.cc-gallery a {
  display: block;
  position: relative;
  padding: 100% 0 0;
  overflow: hidden;
  border-radius: 4px;
  background: #444444;
}
.cc-gallery a img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center;
}
.cc-gallery a svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: auto;
  transition: width 0.3s;
  box-shadow: 0 0 2.5em rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.cc-gallery a:hover svg {
  width: 42.5%;
}
.cc-gallery a .duration {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
}


/* Show More */
.show-more-wrapper {
  text-align: right;
}
.show-more-wrapper a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
  font-size: 0.875em;
  display: inline-block;
  position: relative;
  line-height: 1.2;
}
.show-more-wrapper a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid;
  left: 0;
  top: 100%;
  transition: width 0.25s;
}
.show-more-wrapper a:hover {
  text-decoration: none;
}
.show-more-wrapper a:hover::after {
  width: 0;
}




/* Reviews */
.reviews-section {
  padding: 3.5rem 0;
  max-width: 864px;
  margin: 0 auto;
  gap: 1.5em;
}
.reviews-section h2 {
  text-align: center;
  font-size: 2em;
}

.overall-rating {
  padding: 1.5em;
  align-items: flex-end;
  flex-wrap: wrap;
}
.overall-rating h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
}
.overall-rating .star-rating {
  font-size: 1.35em;
}
.overall-rating .star-rating .rating-number,
.overall-rating .star-rating .reviews-count {
  font-size: 0.65em;
}

.reviews {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.review-card {
  flex-direction: column;
  padding: 1.5em;
}

/* Review header */
.review-card-header {
  display: flex;
  align-items: center;
  gap: 0.875em;
}
.review-thumb {
  width: 3em;
  height: 3em;
  overflow: hidden;
  border-radius: 3em;
  background-color: #2c2c2c;
  flex: 0 0 auto;
}
.review-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.review-name {
  font-size: 1em;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.review-name svg {
  fill: none;
}
.review-date {
  font-size: 0.875em;
}

/* Review content */
.review-card-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
}


/* Rating list  */
.ratings-list-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #E1E1E1;
  padding: 0.5em 0;
  font-size: 0.875em;
  flex-wrap: wrap;
}
.ratings-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}


.load-more-reviews {
  display: flex;
  justify-content: center;
}
.load-more-reviews .profile-link {
  flex: 1 1 auto;
  padding: 1em;
  max-width: 16em;
  gap: 0;
}
.load-more-reviews .profile-link svg {
  fill: #fff;
  height: 1.75em;
}
.load-more-reviews .profile-link .cc-icon {
  animation: rotateInfinite 2s linear infinite;
  overflow: hidden;
  transition: width 0.5s, margin 0.5s;
  width: 0;
  margin: 0;
}
.load-more-reviews .profile-link.loading .cc-icon {
  width: 1.75em;
  margin-right: 0.5em;
}

@keyframes rotateInfinite {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




/* Sticky book this dj */
.book-this-dj-sticky-inner {
  background: #2C2C2C;
  padding: 1em;
  margin: 0 -1em;
}









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

  .bio-breadcrumbs-section {
    padding-left: 50%;
  }
  .bio-breadcrumbs-section .cc-size {
    min-height: 8em;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
  }



  .dj-bio-page {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    gap: 2.5em 0;
  }
  .profile-card-image-cell {
    grid-column: 1 / 2;
    padding-right: 5em;
    margin-top: -4.5em;
  }
  .dj-bio-cell {
    grid-column: 2 / 3;
    grid-row: 1 / span 3;
  }
  .under-profile-image-cell {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding-right: 5em;
  }

  /* Sticky book this dj */
  .book-this-dj-sticky {
    display: none;
  }
  
}








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

  .profile-card-image-cell,
  .under-profile-image-cell {
    padding-right: 3em;
  }

  .dj-bio-page h1 {
    font-size: 3em;
  }

}



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

  .cc-size {
    padding: 0 2em;
  }

  .profile-card-image-cell,
  .under-profile-image-cell {
    padding-right: 2em;
  }

  .dj-bio-page h1 {
    font-size: 2.5em;
  }

  .cc-gallery > div {
    flex: 0 0 calc(50% - 0.5em);
  }

}



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

  .cc-size {
    padding: 0 1em;
  }

  .cc-cell {
    gap: 1.5em;
  }

  .profile-card-image-cell,
  .under-profile-image-cell {
    padding-right: 0;
  }

  .profile-card-image-cell {
    margin-top: -3.5em;
  }

  .dj-bio-page h1 {
    font-size: 1.35em;
    margin-top: 1.5rem;
  }

  .star-rating .stars {
    width: 6em;
    height: 1em;
  }

  .reviews-section h2 {
    font-size: 1.1em;
  }

  .mixes-section {
    margin-top: 2.5em;
    padding: 1em;
    margin-left: -1em;
    margin-right: -1em;
    border-radius: 0;
  }

  .reviews-section {
    padding: 2.5em 0;
  }

  .bio-text {
    border: none;
    padding: 0;
  }

}