/*
Theme Name: electro
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: electro
*/

/*https://player.vimeo.com/video/302433888?background=1*/

body {
  font-family: "Chakra Petch", sans-serif;
  background: #000;
}

.page-title {
  font-size: 80px;
  font-weight: 700;
  line-height: 104px;
  text-align: center;
  color: #fff;
  margin-top: -56px;
  margin-bottom: 120px;
}

.sidenav {
  background-color: #b80090;
  width: 100%;
  max-width: 540px;
  top: 40px;
  right: 0;
  z-index: 25;
  position: fixed;
  transform: translateX(150%);
  transition: transform 1.4s cubic-bezier(0.2, 1, 0.2, 1);
  z-index: 99999;
  height: 100%;
  /* overflow: scroll; */
  box-shadow: 0 10px 25px 2px rgba(0, 0, 0, 0.1),
    0 10px 80px 5px rgba(0, 0, 0, 0.1);
}
.admin-bar .sidenav {
  top: 72px;
}
.closebtn {
  z-index: 999999;
  position: absolute;
  right: 0px;
  top: -41px;
  transition: transform 0.4s ease-out;
  background: #b80090;
  padding: 7px;
}

header {
  background: #0f00b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.admin-bar header {
  top: 32px;
}

.about-top img {
  width: 100%;
}

.desktop-menu {
  display: flex;
  flex-direction: column !important;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
  align-content: flex-end;
  padding: 75px;
}

.desktop-menu li a {
  font-size: 60px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-bottom: 60px;
  text-transform: uppercase;
}
.desktop-menu li a:hover {
  color: #0f00b8;
}
/* .mysidenav-info{
  position: relative;
} */

.sidenav:after {
  position: absolute;
  content: "";
  background-image: url(img/menu.svg);
  top: 0;
  left: -254px;
  width: 230px;
  height: 100%;
}

footer {
  text-align: center;
  margin-top: 120px;
}
.footer-bottom {
  background: #bdbdbd;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 20px 0;
  padding-bottom: 30px;
}

.footer-logo {
  padding: 120px 0;
  padding-top: 240px;
  padding-bottom: 90px;
}
.footer-buttons {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
}
.footer-buttons li {
  padding: 0 12px;
}
.footer-middle {
  background-image: url(img/footer-back.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}
.footer-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 30px 0;
  margin-top: 60px;
}
.footer-menu li a {
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 12px;
}

.footer-menu li a:hover {
  color: #b80090;
}

.copy-rights p {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

.powered-by {
  margin-right: 133px;
}

.section-content {
  max-width: 752px;
  text-align: center;
  margin: auto;
}
.description {
  color: #fff;
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 130%;
  text-align: justify;
}

.section-title {
  font-size: 60px;
  font-weight: 700;
  line-height: 78px;
  text-align: center;
  color: #fff;
  margin: 120px 0 60px;
}

.band-image {
  background: #b86d00;
  max-width: 500px;
  margin: auto;
  border: 5px #b86d00 solid;
  border-bottom: 0;
}

.band-image img {
  width: 100%;
}

.band-image h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 100%;
  margin: 0;
  color: #000;
  text-transform: uppercase;
}

.the_band .description {
  margin-bottom: 120px;
}
.footer-top h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 24px;
  color: #fff;
  margin-bottom: 60px;
}
.footer-top {
  padding: 90px 0;
  background: #0f00b8;
}

.concert-card {
  display: flex;
  margin-bottom: 30px;
}

.concert-card .concert-image {
  flex: 1;
}

.concert-card .concert-content {
  position: relative;
  flex: 2;
  text-align: left;
}

.concert-card:nth-child(2),
.concert-card:nth-child(4),
.concert-card:nth-child(6),
.concert-card:nth-child(8),
.concert-card:nth-child(10),
.concert-card:nth-child(12),
.concert-card:nth-child(14),
.concert-card:nth-child(16),
.concert-card:nth-child(18) {
  flex-direction: row-reverse;
}

.concert-date {
  background: rgb(255 255 255 / 10%);
  font-size: 24px;
  font-weight: 275;
  line-height: 19px;
  padding: 17px 10px;
}

.concert-title {
  padding: 20px 10px;
  font-size: 40px;
  font-weight: 700;
  line-height: 28px;
}
.concert-address {
  padding-left: 10px;
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
}
.concert-link {
  position: absolute;
  bottom: 0;
  left: 0;

  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  padding: 12px;
  background: #0f00b8;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}
.concert-link:hover {
  color: #fff;
}

.music-card {
  display: flex;
  margin-bottom: 120px;
  color: #fff;
}

.music-card .music-image {
  flex: 1;
}
.music-card .music-image img {
  width: 100%;
}

.music-card .music-content {
  position: relative;
  flex: 2;
  text-align: left;
  padding-left: 24px;
}
.tracks-list {
  padding: 0;
  margin: 0;
  max-width: 70%;
}
.tracks-list li {
  display: flex;
  justify-content: space-between;
}

.music-content h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
}
.music-content h3 {
  font-size: 24px;
  font-weight: 300;
  line-height: 31px;
}

.music-content p {
  font-size: 18px;
  font-weight: 300;
  line-height: 23px;
  margin-bottom: 20px;
}

.track-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
}
.track-title span {
  margin-right: 20px;
}
.track-time {
  font-size: 18px;
  font-weight: 300;
  line-height: 23px;
  opacity: 60%;
  padding-left: 10px;
}

.tracks-list li {
  border-bottom: 1px #b80090 solid;
  padding: 15px 0;
}

.video-card {
  margin-bottom: 30px;
  color: #fff;
  text-align: left;
  border: 5px #b80000 solid;
}

.video-card h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
  margin-bottom: 6px;
}

.video-card p {
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
}

.video-content {
  padding: 12px 24px;
}

.products-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.products-card {
  flex: 0 0 46%;
  margin: 22px 12px;
  border: 5px transparent solid;
}
.products-card:hover {
  border: 5px #b90090 solid;
}
.products-card img {
  width: 100%;
}

.products-card a {
  display: block;
  pad: 5px;
  background: #e0e0e0;
  text-decoration: none;
}
.products-card h2 {
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
  color: #000;
  margin-bottom: 0px;
}

.products-card span {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #000;
}

.products-card:first-of-type,
.products-card:nth-of-type(2) {
  padding-top: 0;
}

.wpcf7-form {
  margin-top: 60px;
  text-align: left;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  background: transparent;
  border: 2px #fff solid;
  padding: 24px;
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
  border-radius: 0;
}

::placeholder {
  color: #fff;
}

.wpcf7-submit {
  background: #0f00b8;
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  padding: 24px 12px;
  color: #fff;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
}

.social-icons {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  margin: 30px 0;
}
.social-icons li {
  padding: 0 12px;
}

.page-template-page-contact .social-icons {
  margin-bottom: 60px;
}

#mailpoet_form_1 form.mailpoet_form {
  display: flex;
  max-width: 600px;
  margin: auto;
  padding: 0 20px !important;
}

.mailpoet_paragraph {
  flex: 10;
}

.mailpoet_paragraph.last {
  flex: 2;
}

#mailpoet_form_1 .mailpoet_message {
  position: absolute;
  bottom: 0;
}

.mailpoet_text {
  background: transparent !important;
  border: 2px #fff solid;
  font-size: 24px;
  font-weight: 400;
  line-height: 20px;
  padding: 24px !important;
  height: 65px;
  outline: 0;
  color: #fff;
  border-radius: 0;
}

#mailpoet_form_1 .mailpoet_submit {
  background: #b80090;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
  height: 65px;
  border-radius: 0;
}
#mailpoet_form_1 .mailpoet_submit:hover,
.wpcf7-submit:hover,
.slider-card a:hover,
.home .music-card a:hover,
.concert-link:hover {
  background: #b8b100;
}
.parsley-required,
.parsley-custom-error-message {
  font-size: 23px;
  color: #b90090;
  margin-top: 15px;
}

.player #track-name {
  font-size: 18px;
  font-weight: 300;
  line-height: 23px;
  color: #fff;
  text-transform: uppercase;
  margin: 0 12px;
}

.audio-controls button {
  background: none;
  border: none;
  padding-right: 10px;
}

#audioPlayer {
  display: none;
}

.player {
  display: flex;
  align-items: center;
}

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  background-color: rgb(35 30 24 / 95%);
  transition: 0.5s;
  display: none;
}

.overflow {
  overflow: hidden;
}

.home-slider {
  /* height: 100vh;
  background-size: cover !important;
  background-repeat: no-repeat !important; */
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: white !important;
}

.banner-home-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 42px;
  color: #fff;
  max-width: 550px;
  margin-bottom: 20px;
}
.slider-card {
  position: absolute;
  bottom: 200px;
}

.slider-card a {
  background: #b80090;

  font-size: 20px;
  font-weight: 400;
  line-height: 18px;
  padding: 12px;
  color: #fff !important;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.home .music-card {
  flex-direction: column;
  max-width: 360px;
  margin: auto;
}
.home .music-card img {
  width: 100%;
}

.home .music-card .music-content {
  padding-left: 0;
  padding-top: 24px;
}

.home .music-card a {
  background: #fff;

  font-size: 20px;
  font-weight: 400;
  line-height: 18px;
  padding: 12px;
  color: #000 !important;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.home .page-title {
  margin-bottom: 100px;
}

.home .section-content {
  padding-bottom: 200px;
}

.news-list .news-card {
  display: flex;
  margin-bottom: 30px;
}
.news-list .news-card .image-con img {
  width: 100%;
}

.news-list .news-card .image-con {
  flex: 3;
}

.news-list .news-card .news-content {
  background: #bdbdbd;
  padding: 24px;
  flex: 4;
}

.news-list .news-card .news-content h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #000;
  text-align: left;
  margin-bottom: 6px;
}
.news-list .news-card .news-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  text-align: left;
  color: #000;
  margin: 0;
}

.section-content-news {
  max-width: 950px;
}

/* .youtube svg:hover path:first-of-type {
  fill: #b80000;
}

.facebook svg:hover path:first-of-type {
  fill: #0f00b8;
}
.insta svg:hover path:first-of-type {
  fill: #7d00b8;
}
.spotify svg:hover path:first-of-type {
  fill: #00b81d;
}
.apple svg:hover path:first-of-type {
  fill: #b80090;
} */

.section-content-videos {
  background: url(img/videos-back.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 75px;
}
.section-content-videos .page-title {
  margin-top: -125px;
}
.eq-bar {
  transform: scale(1, -1) translate(0, -24px);
}

.eq-bar--1 {
  animation-name: short-eq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.eq-bar--1 {
  animation-name: short-eq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.eq-bar--2 {
  animation-name: tall-eq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.17s;
}

.eq-bar--3 {
  animation-name: short-eq;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-delay: 0.34s;
}

@keyframes short-eq {
  0% {
    height: 8px;
  }

  50% {
    height: 4px;
  }

  100% {
    height: 8px;
  }
}

@keyframes tall-eq {
  0% {
    height: 16px;
  }

  50% {
    height: 6px;
  }

  100% {
    height: 16px;
  }
}

#equalizer {
  display: none;
}
.gallery-list .gallery {
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
}
.gallery-list .gallery a {
  flex: 0 0 25%;
  text-align: center;
  text-align: center;
  padding: 7px;
}

.gallery-list .gallery a img {
  border: 2px #0f00b8 solid;
  border-bottom-width: 10px;
  max-width: 100%;
  width: 100%;
}

.full-logo {
  position: absolute;
  top: 100px;
  width: 100%;
  margin: auto;
  z-index: 9;
  text-align: center;
}

.page-template-page-about .full-logo svg path {
  fill: #b86e00;
}
.page-template-page-concerts .full-logo svg path {
  fill: #b8b100;
}

.page-template-page-music .full-logo svg path {
  fill: #7d00b8;
}

.page-template-page-videos .full-logo svg path {
  fill: #b80000;
}

.page-template-page-shop .full-logo svg path {
  fill: #b8b100;
}
.page-template-page-contact .full-logo svg path {
  fill: #0f00b8;
}
.collapse:not(.show) {
  display: initial;
}

.home .section-content.section-content-news {
  padding-bottom: 0;
}

.footer-top .section-content {
  padding-bottom: 0;
}
#mailpoet_form_1 .mailpoet_paragraph {
  margin-bottom: 0 !important;
}

.playing:hover path:last-of-type {
  fill: #fff;
}

.paused:hover path:nth-child(9),
.paused:hover path:nth-child(10) {
  fill: #fff;
}

/* Styles for logo */
#logo {
  /* display: none;  */
  opacity: 0;
  transition: opacity 0.3s ease;

  position: absolute;
  top: 0;
  left: 0;
}
#logo.show {
  /* display: initial; */
  opacity: 1;
  /* height: 40px; */
  transition: opacity 0.3s ease;
}

#track-name {
  transition: all 0.3s ease;
}
.videos-list {
  padding: 0;
}

.sold-out {
  background: #151515;
  text-decoration-line: line-through;
}

.slider-card-mobile {
  display: none;
}

.audio-controls {
  display: flex;
}
.audio-controls button {
  display: flex;
}

.music-card .social-icons {
  flex-direction: column;
  align-items: flex-start;
}
.music-card .social-icons li {
  padding-left: 0;
  margin-bottom: 20px;
}