@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: Bastoni;
    src: url(../fonts/Bastoni.woff);
  }

body{
    font-family: "Open Sans", sans-serif;
    color:#fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Bastoni";
    color:#fff;
}

.font-300{
    font-weight: 300;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.min-vh-90{
    min-height:90vh;
}

/* Header CSS */

.bg-dark{
    background:#000!important;
    border-bottom:1px solid #2C2C2C;
}

.navbar .navbar-brand{
    font-family: "Bastoni";
    font-size:30px;
}

.nav-link{
    color:#fff;
}

.navbar .active .nav-link{
    color:rgba(255, 255, 255, 0.75);
}

.hero-section{
    background-image: radial-gradient(at top left, #2C2C2C 0%, #000000 45%);
}

.separator{
    display:inline-flex;
}

.separator svg{
    width: 25px;
    filter: invert(100%) sepia(0%) saturate(7493%) hue-rotate(164deg) brightness(105%) contrast(99%);
}

.separator hr{
    border-top: 2.3px solid;
    opacity: 1;
    color: #fff !important;
    width: 100%;
    margin-left:-2px;
}

.about-section{
    background-image: radial-gradient(at top right, #2C2C2C 0%, #000000 47%);
    border-top:1px solid #2C2C2C;
}

.about-section .about-left-img{
    position: relative;
}



.about-section .about-left-img  i{
    position: absolute;
    top:50%;
    right: 50%;
    color:#000;
    background:#fff;
    width:50px;
    height:50px;
    text-align-last: center;
    align-content: space-evenly;
    border-radius:100px;
    z-index:1;

}

.about-section .about-left-img .btn-overlay{
    position: absolute;
    top:50%;
    right: 50%;
    color:#000;
    background:#fff;
    width:50px;
    height:50px;
    text-align-last: center;
    align-content: space-evenly;
    border-radius:100px;
    animation: glow 3s infinite;
    z-index:0;
}

@keyframes glow {
    70% {
        -webkit-box-shadow: 0 0 0 15px #fff;
        box-shadow: 0 0 0 15px #fff;
        opacity: 0
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 #fff;
        box-shadow: 0 0 0 0 #fff;
        opacity: 0
    }
}
.btn{
    font-family:"Open Sans", sans-serif;
    border-radius:0px!important;
}

#youtubevidModal .modal-content, #youtubevidModalMobile .modal-content{
    background:transparent;
    border:none;
}

#youtubevidModal .modal-header, #youtubevidModalMobile .modal-header{
    padding:0px 0px 10px 0px!important;
    background:transparent;
    border:none;
}

#youtubevidModal .btn-close, #youtubevidModalMobile .btn-close{
    background: #fff var(--bs-btn-close-bg) center / 1em auto no-repeat;
    border-radius:0;
}


.album-section{
    background-image: radial-gradient(at top center, #2C2C2C 0%, #000 47%);
    border-top:1px solid #2C2C2C;
}

.album-section .single-player img{
    width:100%
}


/* Start Audio Player CSS */

.hidden {
    display: none;
}

/* .player {
  max-width: 500px;
  padding: 36px 32px 24px 32px;
  border-radius: 14px;
} */

.player-track-meta {
  text-align: center;
}

.player-track-meta p {
  margin: 0;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}

.player-track-meta span {
  font-size: 16px;
  font-weight: 400;
  padding: 0 2px;
  position: relative;
  top: 1px;
  color: #a3a3a3;
}

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

.player-play-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
}

.icon-container {
  fill: transparent;
  stroke: none;
}

.player-play-btn:hover {
  fill: #444444;
}

.player-play-btn svg {
  fill: #fff;
  position: relative;
  left: 0.5px;
  width: 36px;
  height: 36px;
  display: block;
}

.player-play-btn:hover svg {
  color: #ffffff;
}

.player-timeline {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
}

.player-progress {
  display: flex;
  postion: relative;
  height: 6px;
  background: #a3a3a3;
  border-radius: 25px;
  margin: 0 5px;
  flex: 10;
  flex-basis: 100%;
  overflow: hidden;
}

.player-progress-filled {
  height: 6px;
  background: #ffffff;
  flex: 0;
  flex-basis: 0%;
  border-radius: 25px;
}

.player-time {
  padding: 2px 5px;
}

.player-volume-container {
  width: 15%;
}
.player-volume {
  height: 28px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background: transparent;
}

.player-volume:focus {
  outline: none;
}

.player-volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: #a3a3a3;
  border-radius: 10px;
}

.player-volume::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 100px;
  border: none;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

.player-volume:focus::-webkit-slider-runnable-track {
  background: #a3a3a3;
}

.player-volume::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: #fff;
  border-radius: 10px;
}

.player-volume::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 100px;
  border: none;
  background: #fff;
  cursor: pointer;
  margin-top: -4px;
}

.player-volume::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: #fff;
  border-radius: 10px;
}

.player-volume::-ms-fill-lower {
  background: #0e0e0e;
  border-radius: 10px;
}

.player-volume::-ms-fill-upper {
  background: #0e0e0e;
  border-radius: 10px;
}

.player-volume::-ms-thumb {
  margin-top: 1px;
  height: 15px;
  width: 15px;
  border-radius: 5px;
  border: none;
  background: #0e0e0e;
  cursor: pointer;
}

.player-volume:focus::-ms-fill-lower {
  background: #38bdf8;
}

.player-volume:focus::-ms-fill-upper {
  background: #38bdf8;
}

/* End Audio Player CSS */

.mid-separator{
    display:flex;
    align-items:center;
}

.mid-separator .separator-svg{
    position:relative;
    margin-top:-2.5px;
    width: 25px;
    filter: invert(100%) sepia(0%) saturate(7493%) hue-rotate(164deg) brightness(105%) contrast(99%);
}

.mid-separator::before{
    display: block;
    content: "";
    border-block-end: 0;
    flex-grow: 1;
    border-block-start: 2.3px solid #fff;

}

.mid-separator::after{
    display: block;
    content: "";
    border-block-end: 0;
    flex-grow: 1;
    border-block-start: 2.3px solid #fff;

}

.album-section .album p{
    margin-bottom: 0!important;
}

/* Events Section CSS */

.events-section{
    background-image: radial-gradient(at center center, #2C2C2C 0%, #000 47%);
    border-top:1px solid #2C2C2C;
}


.review-box{
    /* border:1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px); */
    height:100%;
}

.review-box .review-icon {
    text-align:right;
}

.review-box .review-icon i{
    font-size:50px;
    color:#D0D0D0;
    text-align:right;
}

.review-box .name{
    margin-bottom:0!important;
}

.review-box .location{
    color:#969696;
    font-size:16px;
    margin:0!important;
}

.review-box .date{
    color:#707070;
    font-size:12px!important;
}

.events-section .upcoming-events .no-events{
    color:#686868;
}


/* About Page CSS */

.about-page-main-section{
    background-image: radial-gradient(at top right, #2C2C2C 0%, #000000 47%);
}


.vocal-producer-section{
    background-image: radial-gradient(at top right, #2C2C2C 0%, #000000 47%);
}



.vocal-producer-section .studio-testimonial{
    text-align:left;
    color:#c9c9c9;
    margin-bottom:2rem;
}

.vocal-producer-section .studio-testimonial i{
    font-size:35px;
    transform: scaleX(-1);
    margin-right:10px;
}

.vocal-producer-section .studio-testimonial p{
    margin-bottom: 0.2rem;
}


.vocal-producer-section .studio-testimonial span{
    font-style:italic;
}

.vocal-producer-second-section{
    background-image: radial-gradient(at top left, #2C2C2C 0%, #000000 47%);
}

.see-me-live-section{
    background-image: radial-gradient(at top left, #2C2C2C 0%, #000000 47%);
    min-height: 80vh;
}

.work-with-me-section{
    background-image: radial-gradient(at top right, #2C2C2C 0%, #000000 47%);
}


.work-with-me-section .sub-heading{
    text-align:center;
    color:#c9c9c9;
    margin-bottom:2rem;
}

.work-with-me-section .mentorship-section .sub-heading i{
    font-size:30px;
    transform: scaleX(-1);
    margin-right:10px;
}

.work-with-me-section .mentorship-section .sub-heading h4{
    color:#c9c9c9;
}

.free-consulting-box{
    border:2px solid #fff;
}


.work-with-me-section .studio-testimonial span{
    font-style:italic;
}

.events-page-main-section{
    background-image: radial-gradient(at center center, #2C2C2C 0%, #000 47%);
}

.events-page-main-section .no-events{
    color:#686868;
}

.store-section{
    background-image: radial-gradient(at center center, #111111 0%, #000 47%);
    min-height:80vh;
}

.product-box{
    border:1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
}

.product-box img{
    width:100%;
    height:310px;
    object-fit: cover;
}

.product-box .product-title{
    margin-bottom:0.2rem!important;
}

.product-box .product-price{
    margin-bottom:0.2rem!important;
}

.product-box .buy-btn{
    margin-bottom:2rem!important;
}

.footer{
    background-image: radial-gradient(at bottom center, #2C2C2C 0%, #000000 47%);
    border-top:1px solid #2C2C2C;
}

.form-control{
    border-radius:0px;
    border:1px solid #fff;
    background:transparent;
    color:#fff;
}

.form-control:focus{
    border-radius:0px;
    border:1px solid #fff;
    background:transparent;
    box-shadow:none;
    color:#fff;
}

.slick-slide {
    height: auto;
  }
  .slick-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

.slider-nav .slick-slide{
    margin:0px 2px!important;
}

.slider-nav img{
    height:80px!important;
    object-fit: cover;
    margin:0px 5px!important;
}

.slider-for img{
    height:auto;
    object-fit: cover;
}

.product-description p{
    margin: 0 !important;
}

.empty-cart p{
    font-size:1.2em;
}

.store-nav a{
    padding:10px;
    text-decoration: none;

}

.store-nav a, .store-nav i, .store-nav a:hover, .store-nav i:hover{
    color:#b3b3b3;
}

.store-nav-divider i{
    color:#b3b3b3;
    font-size:5px;
}

.cart-count{
    position:relative;
    background:red;
    padding:5px;
    border-radius:100px;
    color:#fff;
    font-size:10px;
    line-height: 16px;
    width:20px;
    height:20px;
}

.store-nav .btn:first-child:active{
    border:none!important;
}

.auth-page{
    background-image: radial-gradient(at top center, #2C2C2C 0%, #000000 45%);
}

@media only screen and (max-width:560px){
    .auth-page {
        background-image: radial-gradient(at top center, #2C2C2C 0%, #000000 95%);
    }
}

@media only screen and (max-width:767px){
    .auth-page {
        background-image: radial-gradient(at top center, #2C2C2C 0%, #000000 75%);
    }
}

.auth-page .card{
/* From https://css.glass */
background: rgba(255, 255, 255, 0.05);
border-radius: 0px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.5px);
-webkit-backdrop-filter: blur(3.5px);
border: 1px solid rgba(255, 255, 255, 0.5);
}

.auth-page .form-control{
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.auth-page .auth-heading a{
    text-decoration: none;
}

.auth-page .auth-heading h1{
    font-size:2em;
}

.auth-page .auth-heading .btn-underline{
    color:#fff;
    padding:0;
}

.subscribe-section{
    background:#000;
    background-image: radial-gradient(at bottom center, #181818 0%, #000 65%);
    border-top:1px solid #2C2C2C;
}

.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 98;
    transition:all ease-in 1s;
}

.login-overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 99;
    transition:all ease-in 1s;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}


.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: rgba(255, 255, 255, 0.1);
    --bs-table-border-color: rgba(255, 255, 255, 0.5);
    --bs-table-striped-bg: transparent!important;
    --bs-table-striped-color: rgba(255, 255, 255, 0.5);
    --bs-table-active-bg: transparent!important;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: transparent!important;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: rgba(255, 255, 255, 0.5)!important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
}

.table-dark thead, .table-dark th,  .table-dark tr, .table-dark td{
    border-color: rgba(255, 255, 255, 0.5)!important;
    border:1px solid!important;
}

.dark-modal .modal-content{
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.login .card {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding:1em;
}

.alert{
    border-radius:0;
}

.alert-danger {
    --bs-alert-color: red;
    --bs-alert-bg: transparent;
    --bs-alert-border-color: red;
}

.login .bg-dark{
    background: rgba(0, 0, 0, 0.7)!important;
    border-radius: 0px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.login .modal-header{
    border-bottom:1px solid rgba(255, 255, 255, 0.5);
}

.login .modal-footer{
    border-top:1px solid rgba(255, 255, 255, 0.5);
}

.order-details table{
    color:#fff;
}
.order-details table p{
    margin-bottom: 0!important;
}

.order-details thead, .order-details tr{
    border-color:#ffffff3a;
}

.details-heading{
    font-family: "Open Sans", sans-serif;
}

.regAlert{
    z-index:9999!important;
    position:absolute;
    bottom:20px;
    left:10px;
}

.cart-quantity input{
    max-width:80px;
    text-align:center;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.states-list select option{
    background: rgba(0, 0, 0, 0.6)!important;
    color: #fff;
}

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
     background: #000000 ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    z-index:99999; /* makes sure it stays on top */
}

#status {
    width:50px;
    height:30px;
    position:fixed;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
   margin:-25px 0 0 -15px; /* is width and height divided by two */
}