/* @font-face {
    font-family: 'Mundial';
    src: url('fonts/MundialBold.otf') format('opentype'),
         url('fonts/MundialHair') format('opentype'),
         url('fonts/MundialLight.otf') format('opentype'),
         url('fonts/MundialRegular.otf') format('opentype'),
         url('fonts/MundialThin.otf') format('opentype');
} */

/*Helios */
@font-face {
    font-family: 'Helios';
    src: url('fonts/Helios\ Regular.otf') format('opentype');
}

/*Arian LT */
@font-face {
    font-family: 'Arian LT Heavy';
    src: url('fonts/Arian\ LT\ Heavy.ttf') format('truetype');
}
@font-face {
    font-family: 'Arian LT Bold';
    src: url('fonts/Arian\ LT\ Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Arian LT Demi';
    src: url('fonts/Arian\ LT\ Demi.ttf') format('truetype');
}
@font-face {
    font-family: 'Arian LT Light';
    src: url('fonts/Arian\ LT\ Light.ttf') format('truetype');
}

/*Gadugi */
@font-face {
    font-family: 'Gadugi Bold';
    src: url('fonts/gadugib.ttf') format('truetype');
}
@font-face {
    font-family: 'Gadugi Regular';
    src: url('fonts/gadugi.ttf') format('truetype');
}

/*Myriad Pro */
@font-face {
    font-family: 'Myriad Pro';
    src: url('fonts/Myriad\ Pro\ Regular.ttf') format('truetype');
}


/*Mundial */
@font-face {
    font-family: 'Mundial Bold';
    src: url('fonts/MundialBold.otf') format('opentype');
}
@font-face {
    font-family: 'Mundial Regular';
    src: url('fonts/MundialRegular.otf') format('opentype');
}
@font-face {
    font-family: 'Mundial Light';
    src: url('fonts/MundialLight.otf') format('opentype');
}
@font-face {
    font-family: 'Mundial Thin';
    src: url('fonts/MundialThin.otf') format('opentype');
}
@font-face {
    font-family: 'Mundial Hair';
    src: url('fonts/MundialHair.otf') format('opentype');
}




* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Arian LT Bold', sans-serif;
    /* font-family: 'Mundial', sans-serif; */
    /* font-family: 'Helios', sans-serif; */
    /* font-family: 'Gadugi', sans-serif; */
    /* font-family: 'Myriad Pro', sans-serif; */
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
}


a{
    text-decoration: none;
}
.button1{
    padding: 5px 10px;
    background-color: #fff;
    color: #000;
    transition: 1s ease;
}
.button1:hover{
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
}
.button1a{
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    transition: 1s ease;
}
.button1a:hover{
    padding: 10px 10px;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}
.button2{
    padding: 5px 10px;
    background-color: #222;
    color: #fff;
    /* color: #EEF8FA; */
    transition: 1s ease;
}
.button2:hover{
    padding: 10px 10px;
    background-color: #fff;
    color: #222!important;
    border: 1px solid #222;
}
/* 
---------------------------------------------
NAVIGATION
--------------------------------------------- 
*/
nav{
    width: 100%;
    background-color: transparent;
}

.nav1,
.nav2 {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #fff;
}
.nav1{
    width: 90%;
}
.nav1 ul,
.nav2 ul {
    list-style-type: none;
    margin-top: 40px;
    color: #EEF8FA;
}
.nav1 ul {
    float: right;
}
.nav2 ul {
    float: left;
}
.nav1 ul li, 
.nav2 ul li {
    display: inline-block;
}
.nav1 ul li a,
.nav2 ul li a{
    text-transform: lowercase;
    font-family: 'Helios', sans-serif;
    font-size: 18px;
    font-weight: normal;
    text-decoration: none;
    padding: 5px 50px;
    transition: 0.4s ease;
    color: #EEF8FA;
    cursor: pointer;
    transition: 1s ease;
}
.nav1 ul li a:hover,
.nav2 ul li a:hover{
    transition: 1s ease;
    color: #ccc;
    letter-spacing: 2px;
    padding: 5px 45px;
}
.nav2 ul li a.nav-button {
    padding: 5px 20px;
    background-color: #EEF8FA;
    color: #000;
    transition: 1s ease;
}
.nav2 ul li a.nav-button:hover {
    padding: 5px 20px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    letter-spacing: 2px;
}

.navbar.home {
    background: transparent;
}

#alternativeNavbar {
    display: none;
}

/*navbar*/
.navbar {
    position: fixed;
    background: #000;
    transition: top .6s;
    height: 150px;

}

.navbar.animate {
    top: -150px;
    transition: 0.6s ease;
}
.navbar.sticky {
    top: 0;
    z-index: 99;
    transition: top 0.6s, background-color 0.6s;
}
.nav-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;

}

.logo {
    padding: 20px;
}

.burger-nav {
    display: none;
}
.navbar .btn {
    color: #000;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

.navbar .btn.close-btn {
    position: absolute;
    right: 30px;
    top: 10px;
}
nav input {
    display: none;
}
nav.navbar.main{
    visibility: visible;
}
nav.navbar.mobile{
    visibility: hidden;
}

/* nav.navbar.mobile.home {
    background: transparent;
} */
/* nav.navbar.mobile.alternative-navbar {
    background: #000 !important;
} */

nav.navbar.mobile#alternativeNavbar {
    /* background: #000 !important; */
    display: none;
}

nav.navbar.mobile {
    position: fixed;
    z-index: 99;
    width: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    /* background: rgba(0, 0, 0, 0.5) !important; */
    background: #000 !important;
    transition: top .6s;
    height: 150px;

}
nav.navbar.mobile.animate {
    top: -150px;
    transition: 0.6s ease;
}

nav.navbar.mobile.sticky {
    top: 0;
    z-index: 99;
    transition: top 0.6s, background-color 0.6s;

}

nav.navbar.mobile .nav-wrapper {
    width: 100%;
}
/*logo element*/
nav.navbar.mobile.logo {
    float: left;
    left: 0;
    margin-left: 50px;
    /* margin-top: 2px; */
}

nav.navbar.mobile.logo img {
    width: 130px;
    height: 100px;
}

nav.navbar.mobile ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
}

nav.navbar.mobile ul li {
    padding: 0px 50px;
}

nav.navbar.mobile ul li a {
    color: #fff;
    text-transform: lowercase;
    font-family: 'Helios', sans-serif;
    font-size: 20px;
    font-weight: normal;
}



/* navbar MEDIA QUERY*/
@media screen and (max-width: 992px) {
    nav.navbar.main {
            visibility: hidden;
        }
    nav.navbar.mobile {
            visibility: visible;
        }
    /*logo element*/
    nav.navbar.mobile .nav-wrapper{
        width: 100%;
        position: relative;
        transition: 1s ease !important;
    }
    nav.navbar.mobile .logo {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
    }
        .burger-nav {
            position: absolute;
            display: block;
            height: 30px;
            width: 100%;
            background: url(images/burger-toggle-transparent.png) no-repeat 98% center;
            background-size: contain;
            background-color: transparent;
            cursor: pointer;
            transition: 1s ease !important;
        }
    
    
        nav.navbar.mobile ul {
            float: none;
            display: flex;
            align-items: center;
            /* justify-content: center;
            text-align: center!important; */
        }
    
        nav.navbar.mobile ul {
            position: absolute;
            /* position: static; */
            top: 100%;
            right: 0;
            width: 100%;
            display: none;
            overflow: hidden;
            /* background: rgba(0, 0, 0, 0.1)!important; */
            background: #000;
            height: 0;
            padding: 20px;
            transition: 1s ease!important;
        }
    
        nav.navbar.mobile ul.open {
            margin-top: 70px;
            /* width: 100%!important; */
            height: 700px;
            /* display: block; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 99;
            transition: 1s ease!important;
        }
    
        nav.navbar.mobile ul li {
            float: none;
            text-align: center;
            width: 100%;
            margin: 0;
            transition: 1s ease !important;
            margin: 20px 0;
        }
    
        nav.navbar.mobile ul li a {
            color: #fff;
            padding: 10px;
            /* border-bottom: 1px solid #212529; */
            display: block;
            margin: 0;
        }
    
        nav.navbar.mobile ul li a:hover {
            color: #fff;
        }
}
@media screen and (max-width: 500px) {
    nav.navbar.mobile .logo {
        margin-top: -80px;
        position: absolute;
        left: 0;
        transform: none;
    }
}


/*-------------landing page---------------------*/
section.landing-page {
    position: relative;
    background-image: url('images/landing1.png');
    background-size: cover;
    background-position: center;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-bottom: 1px solid #fff; */
}
/* Bottom gradient */
.landing-page::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/* Top gradient */
.landing-page::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}
.circle {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background-color: black;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999999;
    /* so that it stays on top of all other elements */
}

/* THE MAINCONTAINER HOLDS EVERYTHING */
.maincontainer {
    position: absolute;
    width: 100%;
    height: auto;
    background: none;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    animation: flip 6s infinite ease-in-out;
    transform: 0.6s ease;
}
/* Create the animation */
@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}
/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 10px;
    backface-visibility: hidden;
    overflow: hidden;
    background: transparent;
    color: #000;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    border-radius: 10px;
    backface-visibility: hidden;
    overflow: hidden;
    background: transparent;
    text-align: center;
    transform: rotateY(180deg);
}
/* Styling for text inside the card */
.thefront h1,
.theback h1 {
    color: #fff;
    font-size: 100px;
    font-weight: bolder;
    text-align: center;
}

/*-------------next-event---------------------*/
section.next-event{
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 50px 50px;
    padding-bottom: 0;
    /* border-bottom: 1px solid #fff; */
}
.next-event h5{
    font-size: 20px;
}
.next-event h4{
    font-size: 50px;
}
.next-event p{
    font-size: 100px;
    color: #000;
    text-shadow:
            -1px -1px 0 #fff,
            1px -1px 0 #fff,
            -1px 1px 0 #fff,
            1px 1px 0 #fff;
        /* Black outline */
}
.next-event h2{
    font-family: 'Arian LT Demi', sans-serif;
    font-size: 50px;
    font-weight: lighter!important;
}
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.words {
    overflow: hidden;
    padding: 0px 0;
    /* background: #F8F9F9; */
    white-space: nowrap;
    position: relative;
}
.words-slide {
    display: inline-block;
    animation: 15s slide infinite linear;
    /* margin: 0 25px; */
}
.words-slide p {
    margin: 0 50px;
}
.words:before,
.words:after {
    position: absolute;
    top: 0;
    width: 50px;/*?*/
    height: 100%;
    content: "";
    z-index: 2;
}
.words:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), transparent);
}
.words:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), transparent);
}
.words:hover .words-slide {
    animation-play-state: paused;
}



/*-------------upcoming-events---------------------*/
section.upcoming-events{
    min-height: 500px;
    background-color: #000;
    padding: 50px;
    padding-right: 100px;
    border-bottom: 1px solid #fff;
}
.sub-heading h3{
    color: #fff;
}
.upcoming-events .sub-heading h3,
.merchandise-alert .sub-heading h3
{
    padding-left: 50px;
}

.swiper-filter {
    padding: 20px 0;
    padding-left: 40px;
}
.swiper-filter ul {
    list-style-type: none;
    width: auto;
    padding: 0 !important;
}
.swiper-filter ul li {
    display: inline-block;
}
.swiper-filter ul a {
    font-family: 'Arian LT Light', sans-serif;
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
    transition: 1s ease;
}
.swiper-filter ul a:hover {
    font-family: 'Arian LT Bold', sans-serif;
    color: #fff;
    transition: 1s ease;
}
.swiper-filter ul a.active {
    font-family: 'Arian LT Bold', sans-serif;
    border-bottom: 1px solid #fff;
}

/*swiper*/
.swiper {
    /* width: 100%; */
    padding-top: 50px;
    padding-bottom: 50px;
}


.work-box {
    padding: 30px!important;
    padding-top: 0!important;
    width: 350px !important;
    height: auto !important;
    background-color: transparent;
    border: 1px solid #fff;
    margin: 0!important;
    margin-bottom: 50px!important;
    color: #fff !important;
}

.work-box img{
    width: 60px;
    height: 50px;
    margin: 50px 0;
}
.logo-black {
    display: none;
    /* Initially hidden */
}

.logo-white {
    display: block;
    /* Initially visible */
}

/* When hovering over .work-box */
.work-box:hover .logo-white {
    display: none;
    /* Hide the white logo */
}

.work-box:hover .logo-black {
    display: block;
    /* Show the black logo */
}
.work-box:hover {
    background-color: #fff;
    border: 1px solid #000;
    color: #000 !important;
}
.work-box p{
    font-family: 'Arian LT Light', sans-serif;
    font-size: 14px;
}

.uc-cta h6{
    font-family: 'Arian LT Light', sans-serif;
}


.swiper.mySwiper.case-studies {
    padding-left: 50px;
}

.swiper-button-prev,
.swiper-button-next {
    /* width: 50px;
    height: 50px; */
    background-color: transparent;
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 46px;
}

.swiper-button-prev {
    left: 10px;
    color: #fff !important;
}

.swiper-button-next {
    right: 10px;
    color: #fff !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #fff!important;
    /* Change color on hover if needed */
}
/* .swiper-pagination{
    margin-top: 50px!important;
} */

/* Style the inactive pagination dots */
.swiper-pagination-bullet {
    margin-top: -50px !important;
    background-color: white !important;
    /* Set the color for inactive dots */
    width: 22px !important;
    height: 8px !important;
    border-radius: 0 !important;
    border-radius: 3px !important;
    /* margin: 5px !important; */
}

/* Style the active pagination dot */
.swiper-pagination-bullet-active {
    background-color: white !important;
    /* Set the color for the active dot */
}

.swiper-pagination {
    color: #fff !important;
    /* background-color: #fff!important; */
}




/*-------------partners-n-sponsors-------------------*/
section.partners-n-sponsors{
    background-color: #000;
    padding: 50px 0;
    border-bottom: 1px solid #fff;
}
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 0px 0;
    /* background: #F8F9F9; */
    white-space: nowrap;
    position: relative;
}
.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    content: "";
    z-index: 2;
}
.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), black);
}
.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), black);
}
section.partners-n-sponsors.about .logos:before,
section.partners-n-sponsors.news .logos:before
 {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}
section.partners-n-sponsors.about .logos:after,
section.partners-n-sponsors.news .logos:after{
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
/* section.partners-n-sponsors.about .logos:before,
section.partners-n-sponsors.news .logos:before {
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}
section.partners-n-sponsors.about .logos:after
section.partners-n-sponsors.news .logos:after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
} */
.logos:hover .logos-slide {
    animation-play-state: paused;
}
.logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
}
.logos-slide img {
    height: 90px;
    margin: 0 25px;
}


/*-------------merchandise-alert---------------------*/

section.merchandise-alert {
    min-height: 500px;
    background-color: #000;
    padding: 50px;
    padding-right: 100px;
    border-bottom: 1px solid #fff;
}

.merchandise-alert h3 {
    color: #fff;
}

.merch-box {
    position: relative;
    width: 400px !important;
    height: 500px !important;
    background-color: #000;
    border: 1px solid #fff;
    padding: 0 !important;
    margin: 0 10px !important;
    margin-bottom: 50px !important;
    color: #fff!important;
}
.merch-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.merch-details {
    position: absolute;
    top: 70%;
    width: 100%;
    margin: 0!important;
    padding: 0 20px;
    background-color: transparent;
    transition: 1s ease;
}

.merch-details:hover{
    padding: 0 20px;
    background-color: #fff;
    color: #000!important;
}
.merch-details p{
    font-family: 'Arian LT Light';
}




/*-------------music-player---------------------*/
section.music-player {
    padding: 100px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)), url('images/emptystage-scene.png');
    background-size: cover;
    background-position: center;
    min-height: 755px;
    border-bottom: 1px solid #fff;
}

.mp-left{
    color: #fff;
    text-align: center;
}
.mp-left h2{
    font-family: 'Helios', sans-serif;
    text-transform: lowercase;
    font-size: 70px;
    margin-bottom: 100px;
}
.mp-left p{
    font-family: 'Mundial Light', sans-serif;
    color: #ccc;
    padding-bottom: 150px;
}
.mp-right{
    width: auto;
    position: relative;
}
.mp-right .music-box{
    /* position: relative; */
    padding: 30px;
    color: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    border-radius: 10px;
}
.mp-right .music-box .mpr-wrapper{
    display: flex !important;
    position: relative;
}
.music-box img{
    padding-top: 50px 0;
}
.music-box p{
    /* font-family: 'Arian LT Demi'; */
    font-size: 15px;
}
.music-box span{
    font-family: 'Arian LT Light';
    font-size: 14px;
}
.music-icons{
    /* padding-top: 50px; */
    font-size: 28px;
    color: #fff;
    cursor: pointer;
}
.mpr-left,
.mpr-right{
    width:auto;
    position: relative;
}
.mpr-right .music-icons i{
    font-size: 24px;
}
.mpr-right .music-icons .fa-list{
    margin-bottom: 110px;
}
.mpr-right .music-icons .volume-bar{
    display: flex;
    flex-direction: column;
    /* line-height: 0.2; */
}
.mpr-right .music-icons .volume-bar i{
    margin-top: -16px;
}

/*----------- footer -------------------*/
footer {
    background-color: #000000 !important;
    color: #fff;
    padding: 50px 50px;
}
.foot {
    text-align: left;
    height: auto;
}
.foot ul{
    margin: 0;
    padding: 0;
}
.foot ul li{
    list-style: none; 
}
.foot ul li a{
    color: #ccc!important; 
}
.foot.four ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.foot.four ul li {
    list-style: none;
    /* display: inline-block; */
    margin-right: 10px;
}
.foot.four ul li a{
    color: #fff!important;
}
.foot.two,
.foot.three,
.foot.four{
    padding: 0 50px;
}
.btn.btn-success{
    background-color: #fff;
    color: #000;
    border-radius: 0;
    border: none;
    transition: 1s ease;
}
.btn.btn-success:hover{
    background-color: #000;
    color: #fff;
    border-radius: 0;
    border: 1px solid #fff;
    letter-spacing: 2px;
}
.foot p{
    font-family: 'Gadugi', sans-serif;
    color: #ccc;
}
footer .f-input2{
    width: 250px;
    height: 30px!important;
    background-color: #000!important;
    border-radius: 0!important;
    border: none!important;
    border-bottom: 1px solid #fff!important;
}
footer .f-outline2 input::placeholder{
    font-size: 14px;
    font-family: 'Mundial Light', sans-serif;
    color: #ccc !important;
}
.agreement label {
    font-family: 'Mundial Light', sans-serif;
    font-size: 13px;
    color: #ccc;
}
.row-foot-bot p,
.foot ul li a,
.foot-bot ul li
{
    font-family: 'Mundial Light', sans-serif!important;
    color: #ccc;
}

.foot-bot.right div{
    float: right;
}


/* HOME RESPONSIVENESS MEDIA QUERIES*/
@media screen and (max-width: 1325px) {
    .nav1 ul li a,
        .nav2 ul li a {
            font-size: 18px;
            padding: 5px 30px;
        }
    
        .nav2 ul li a.nav-button {
            padding: 5px 10px;
        }
}
@media screen and (max-width: 1100px) {
    .nav1 ul li a,
        .nav2 ul li a {
            font-size: 16px;
            padding: 5px 20px;
        }
    
        .nav2 ul li a.nav-button {
            padding: 5px 10px;
        }

}
@media screen and (max-width: 992px) {
    .landing-page h1{
        margin-top: 100px;
        font-size: 70px;
    }
}
/* Tablet Mode*/
@media screen and (max-width: 768px) {
    .landing-page h1{
        margin-top: 100px;
        font-size: 50px;
    }
    /*------next-event-------*/
    section.next-event {
        padding: 50px 30px;
    }
    .next-event h5 {
        font-size: 16px;
    }
    .next-event h4 {
        font-size: 30px;
    }
    .next-event p {
        font-size: 70px;
    }
    .next-event h2 {
        font-size: 30px;
        font-weight: lighter !important;
    }
    /*------upcoming-events-------*/
    section.upcoming-events {
        padding: 50px 30px;
    }
    .sub-heading h3 {
        padding-left: 0;
    }
    .swiper-filter {
        padding-left: 0;
    }
    .swiper.mySwiper.case-studies {
        padding-left: 0;
    }
    .upcoming-events .swiper-button-prev,
    .upcoming-events .swiper-button-next {
        visibility: hidden;
    }
    .work-box{
        width: 350px!important;
    }
    .upcoming-events .button svg{
        margin-left: 50px!important;
    }
        .upcoming-events .sub-heading h3,
        .merchandise-alert .sub-heading h3 {
            padding-left: 0;
        }
    /*------merchandise alert-------*/
    section.merchandise-alert{
        padding: 50px 30px;
    }
    .merch-box{
        width: 350px!important;
    }
    .merchandise-alert .button svg{
        margin-left: 50px!important;
    }
    .merch-details {
        top: 65%;
    }
    /*------music-player-------*/
    section.music-player{
        padding: 50px 30px;
    }
    .mp-left h2 {
        font-size: 50px;
        margin-bottom: 30px;
    }
    .mp-left p {
        padding-bottom: 30px;
    }
    .mp-left p br{
        display: none;
    }
    /*footer*/
    footer {
        padding: 50px 30px;
    }
    .foot-bot.right div{
        float: none;
    }
    .foot.two,
    .foot.three {
        display: none;
    }
    
}
/* Mobile Mode*/
@media screen and (max-width: 500px) {

    /*------landing-page-------*/
    section.landing-page {
        background-image: url('images/landing-mobile.PNG');
        height: 800px;
    }
    .lp-wrapper h1 {
        font-size: 42px;
    }
    /*------next-event-------*/
    section.next-event {
        padding: 50px 20px;
    }
    /*------upcoming-events-------*/
    section.upcoming-events {
        padding: 50px 20px;
    }
    .work-box{
        width: 320px!important;
    }
    /*------partners-n-sponsors-------*/
    /*------merchandise alert-------*/
    section.merchandise-alert{
        padding: 50px 20px;
    }
    /*------music-player-------*/
    section.music-player{
        padding: 50px 20px;
        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('images/emptystage-scene.png');
    }
    .mp-right .music-box {
        padding: 0;
        padding-right: 30px;
    }
    /*footer*/
    footer {
        padding: 50px 20px;
    }
    .foot{
        margin-bottom: 30px;
    }
    .foot.two,
    .foot.three,
    .foot.four {
        padding: 0 20px;
    }
    .foot.one{
        display: none;
    }

}
@media screen and (max-width: 450px) {
    /*------music-player-------*/
    section.music-player {
        padding: 50px 20px;
    }
    .mp-right .music-box {
        /* text-align: left!important; */
        padding: 20px;
        padding-right: 0;
    }
    .mpr-left{
        width: 75%!important;
    }
    .mpr-right{
        width: 25%!important;
    }
    .music-box img{
        position: relative;
        /* width: 250px;
        height: 300px; */
        width: auto;
        height: auto;
    }

}



/* 
---------------------------------------------
ABOUT PAGE
-------------------------------------- ------- 
*/
section.about-landing{
    position: relative;
    background-image: url('images/about.PNG');
    background-size: cover;
    background-position: center;
    min-height: 600px;
    padding-top: 300px;
    /* border-bottom: 1px solid #fff; */
}
/* Bottom gradient */
.about-landing::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/* Top gradient */
.about-landing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}
.about-landing p{
    position: relative;
    z-index: 2;
}
.about-landing p.white {
    text-align: center;
    font-size: 100px;
    color: #fff;
    margin-bottom: -20px;
   
}
.about-landing p.black {
    margin-top: -45px;
    text-align: center;
    font-size: 100px;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}


.words2 {
    overflow: hidden;
    padding: 0px 0;
    /* background: #F8F9F9; */
    white-space: nowrap;
    position: relative;
}

.words2:before,
.words2:after {
    position: absolute;
    top: 0;
    width: 50px;
    /*?*/
    height: 100%;
    content: "";
    z-index: 2;
}
.words2:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), transparent);
}
.words2:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), transparent);
}
.words2:hover .words-slide2 {
    animation-play-state: paused;
}
.words-slide2 {
    display: inline-block;
    animation: 25s slide infinite linear;
    /* margin: 0 25px; */
}
.words-slide2 p {
    margin: 0 50px;
}


.bg-image{
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/3.jpg');
    background-size: cover;
    background-position: center;
}
 /*-------------info----------------*/
section.info{
    padding: 50px;
    text-align: center;
    color: #fff;
    border-bottom: 1px solid #fff;
}
.info p{
    font-family: 'Mundial Light', sans-serif;
    color: #ccc;
}

 
 /*-------------venue----------------*/
section.venue-click {
    padding: 50px 0;
    color: #fff;
}
.venue-click h3{
    margin-left: 50px;
}
.venue-box {
    position: relative;
    width: 450px !important;
    height: 500px !important;
    background-color: #000;
    border: 1px solid #fff;
    padding: 0!important;
    margin: 0 10px !important;
    margin-bottom: 50px !important;
}
/* Top gradient */
.venue-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/* Bottom gradient */
/* .venue-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
} */
.venue-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.venue-box p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    z-index: 2;
}
.venue-box .button{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


section.venue-pictures {
    display: none;
    min-height: 500px;
    transition: 1s ease;
}
.vp-left,
.vp-right{
    padding: 20px;
}
.vp-box1{
    width: 100%;
    height: 200px;
    border: 1px solid #fff;
    margin-bottom: 20px;
}
.vp-box1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vp-box2{
    width: 100%;
    height: 350px;
    border: 1px solid #fff;
    
}
.vp-box2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vp-box3{
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}
.vp-box3 .box1{
    /* width: 300px; */
    border: 1px solid #fff;
    height: 250px;
    margin-right: 10px;
}
.vp-box3 .box2{
    /* width: 200px; */
    border: 1px solid #fff;
    height: 250px;
    margin-left: 10px;
}
.vp-box3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vp-box4{
    width: 100%;
    height: 300px;
    border: 1px solid #fff;
}
.vp-box4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

 /*-------------team----------------*/
 section.team{
    padding: 50px 0;
    /* background-color: #000; */
    color: #fff;
    min-height: 500px;
    border-bottom: 1px solid #fff;
 }
 .team h3,
 .team .sub-heading p {
     padding-left: 50px;
 }
.team .sub-heading p {
    font-family: 'Arian LT Light', sans-serif;
    font-size: 27px;
}
.team-box {
    padding-top: 300px;
    width: 300px !important;
    height: auto !important;
    background-color: #000;
    border: 1px solid #fff;
    padding: 0!important;
    margin: 0 10px !important;
    margin-bottom: 50px !important;
}
.team-box-img{
    width: 100%;
    height: 300px;
}
.team-box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-details{
    height: 80px;
    text-align: center;
    padding: 10px 10px;
    /* padding-top: 5px; */
    background-color: #fff;
    color: #000;
}
.team-details p{
    font-family: 'Arian LT Demi', sans-serif;
    /* font-size: 27px; */
}



 /*-------------pro-corner----------------*/
section.pro-corner {
    padding: 50px;
    /* background-color: #000; */
    color: #fff;
    min-height: 500px;
}
.pro-wrapper{
    display: flex;
    justify-content: space-around;
}
.pro-box{
    position: relative;
    padding: 0!important;
    margin: 0!important;
    margin-bottom: 20px !important;
    width: 450px;
    height: 500px;
    border: 1px solid #fff;
    
}
.pro-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pro-details {
    position: absolute;
    top: 85%;
    width: 100%;
    margin: 0 !important;
    padding: 0 20px;
    background-color: transparent;
    transition: 1s ease;
    margin-top: 410px;
    margin-left: -12px;
    text-align: center;
    width: 100%;
    padding: 20px 20px;
    padding-top: 30px;
    background-color: #fff;
    color: #000;
}
.pro-box p{
    position: absolute;
    top: 0%;
    left: 70%;
    font-size: 42px;
    padding-top: 25px;padding-bottom: 0;
    padding-left: 0;padding-right: 20px;
}
.pro-box.two p{
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
}


 /*-------------www-cta----------------*/
section.www-cta {
    padding: 50px;
    color: #fff;
    min-height: 300px;
}
.www-wrapper {
    display: flex;
    justify-content: space-around;
}
.www-box {
    width: 400px;
    height: 200px;
    border: 1px solid #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.www-box p{
    margin-top: 70px;
    font-size: 32px;
    margin-bottom: 50px;
}

 /*-------------upcoming-events----------------*/


 /*-------------partners-n-sponsors----------------*/
section.partners-n-sponsors.about {
    background-color: #fff;
    padding: 50px 0;
    border-bottom: 1px solid #fff;
}


/* ABOUT RESPONSIVENESS MEDIA QUERIES*/

/* Mobile Mode*/
@media screen and (max-width: 500px) {
    /*------landing-page-------*/
    section.about-landing{
        min-height: 500px;
        padding-top: 350px;
        padding-bottom: 100px;
    }
    .about-landing p{
        font-family: 'Arian LT Heavy', sans-serif;
        font-size: 50px!important;
    }
    .about-landing p.black {
        margin-top: -20px;
        -webkit-text-stroke: 1px #fff;
    }
     /*---------info--------*/
    .info p{
        font-family: 'Mundial Light', sans-serif;
        color: #999;
    }
     /*-----------venue-----------*/
    section.venue-click {
        padding: 50px 20px;
    }
    .venue-click h3{
        margin-left: 0;
    }
    .venue-box {
        width: 350px !important;
    }
    .venue-box .button{
        width: 100%;
        display: flex;
        justify-content: center;

    }
    .vp-box3{/*reminder to remove!*/
        display: none!important;
    }
    /*-------venue-pictures--------*/
    section.venue-pictures{
        padding: 20px;
    }
    /*-------------team----------------*/
    section.team{
        padding: 0 20px;
    }
    .team h3,
    .team .sub-heading p {
        padding-left: 0;
    }
    section.team .swiper.mySwiper.case-studies {
        padding-left: 20px;
    }
    /*-------------pro-corner------------*/
    section.pro-corner {
        padding: 20px; 
    }
    .pro-box {
        width: 350px;
        margin-bottom: 20px!important;
    }
    .pro-corner .button svg{
        padding-left: 10px!important;
    }
    .pro-details{
        top: 85%;
    }
    .pro-box p{
        left: 60%;
    }
    .pro-box.two p{
        top: 70%;  
    }
    /*-------------www-cta------------*/
    .www-box{
        margin-bottom: 20px;
    }

}
@media screen and (max-width: 360px) {
   .www-cta .button a{
        padding-left: 5px !important;
    }
    .www-cta .button svg{
        margin-left: 0!important;
    }
    
}




 /* 
---------------------------------------------
NEWS PAGE
--------------------------------------------- 
*/
section.news-landing{
    /* min-height: 400px; */
    padding-top: 250px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
}
.news-landing h2{
    font-size: 100px;
    color: #fff;
}

.news-filter{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
}
.news-filter ul{
    list-style-type: none;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 25px;
    width: auto;
    padding: 0!important;
}
.news-filter ul li{
    display: inline-block;
}
.news-filter ul a{
    display: inline-block;
    padding: 5px 20px;
    color: #222;
    font-size: 22px;
    border-radius: 25px;
}
.news-filter ul a:hover{
    background-color: #222;
    color: #fff;
    border-radius: 25px;
}
.news-filter ul a.active{
    background-color: #222;
    color: #fff;
}


/*-------------news-artciles----------------*/
section.news-articles{
    padding: 50px 50px;
    background-color: #000;
    border-bottom: 1px solid #fff;
}
.article-wrapper{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.article-box{
    padding: 0!important;
    margin: 0!important;
    width: 400px;
    height: auto;
    border: 1px solid #fff;
    margin-bottom: 20px !important;
}
.article-box .img-box{
    width: 100%;
    height: 400px;
}
.article-box .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire div */
    display: block; /* Removes any potential extra space around the image */
}
.news-details{
    padding: 20px;
    width: 100%;
    height: 200px;
    background-color: #fff;
    color: #222;
}
.news-details span{
    padding: 0 10px;
    background-color: #222;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
}
.news-details h3{
    height: 100px;
}
.news-details button{
    margin-top: 20px;
}


/*-------------blogs----------------*/
section.blogs {
    padding: 50px 50px;
    background-color: #000;
    border-bottom: 1px solid #fff;
}
.blog-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.blog-box {
    padding: 0!important;
    margin: 0!important;
    width: 400px;
    height: auto;
    border: 1px solid #fff;
    margin-bottom: 20px!important;
}
.blog-box .img-box {
    width: 100%;
    height: 220px;
}

.blog-box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-details {
    padding: 20px;
    width: 100%;
    height: auto;
    background-color: #000;
    color: #fff;
}
.blog-details .date span{
    font-family: 'Mundial Light', sans-serif;
    padding: 0 10px;
    background-color: #fff;
    color: #000;
    border-radius: 5px;
}
.blog-details .admin {
    font-family: 'Mundial Light', sans-serif;
    color: #999;
}
.blog-details h4{
    height: 120px;
}
.blog-details p{
    font-family: 'Mundial Light', sans-serif;
    color: #ccc;
    font-size: 14px;
    color: #999;
}

.bg-image2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/4.jpg');
    background-size: cover;
    background-position: center;
}
/*-------------other-news----------------*/
section.other-news {
    padding: 50px 50px;
    /* background-color: #000; */
    border-bottom: 1px solid #fff;
    min-height: 500px;
    border-bottom: 1px solid #fff;
}
.onws-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.onws-box {
    padding: 0!important;
    margin: 0!important;
    width: 320px;
    height: 350px;
    border: 1px solid #fff;
    margin-bottom: 20px !important;
}
.onws-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/*-------------trending-now----------------*/
section.trending-now {
    background-color: #000;
    padding: 50px 50px;
    min-height: 450px;
    border-bottom: 1px solid #fff;
} 
.trend-left{
    color: #fff;
    padding-right: 150px;
}

.trend-left-img{
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 160px;
    /* border: 1px solid #fff; */
    margin-bottom: 20px!important;
}
.trend-left-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trend-left p{
    font-family: 'Gadugi', sans-serif;
    
}
.tr-wrapper.one{
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}
.tr-left{
    color: #fff;
}
.trend-left p{
    font-family: 'Gadugi', sans-serif;
    color: #ccc;
}
.tr-left p {
    font-family: 'Gadugi', sans-serif;
    color: #ccc;
    font-size: 14px;
}
.tr-right img{
    width: 100%;
    height: 180px;
}



/*-------------partners-n-sponsors----------------*/
section.partners-n-sponsors.news {
    background-color: #fff;
    padding: 50px 0;
    padding-top: 0;
}
section.partners-n-sponsors.news h3{
    margin-left: 50px;
    /* padding: 30px 0; */
    /* background-color: #000; */
}


/*-------------other-stuff----------------*/
section.other-stuff {
    padding: 50px 50px;
    background-color: #000;
    border-bottom: 1px solid #fff;
    min-height: 450px;
}
.ostf-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.ostf-box {
    padding: 0!important;
    margin: 0!important;
    width: 320px;
    height: 350px;
    border: 1px solid #fff;
    margin-bottom: 20px !important;
}
.ostf-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/*-------------upcoming-events----------------*/
section.upcoming-events.news{
    background-color: transparent!important;
}

/*-------------music-player2----------------*/
section.music-player2 {
    padding: 50px 100px;
    color: #fff;
    min-height: 300px;
}
.music-player2 h3{
    text-transform: lowercase;
    font-family: 'Helios', sans-serif;
}
.music-player2 .mpr-left{
    padding-top: 50px;
}

/* NEWS RESPONSIVENESS MEDIA QUERIES*/
/* Tablet Mode*/
@media screen and (max-width: 768px) {
    .trend-left {
            padding-right: 0;
            padding-bottom: 50px;
        }
    
        /* .trend-left img {
            margin-bottom: 20px;
            margin-left: 20px;
        } */
    
        .tr-left {
            padding-bottom: 20px;
        }
}
/* Mobile Mode*/
@media screen and (max-width: 500px) {
    .news-landing h2 {
        font-size: 70px;
    }
    .news-filter ul a {
        padding: 5px 10px;
        font-size: 18px;
    }
   
    section.trending-now{
        padding: 50px 20px;
    }
    .trend-left{
        padding-right: 0;
        padding-bottom: 50px;
    }
    /* .trend-left img{
        margin-bottom: 20px;
        margin-left: 20px;
    } */
    .tr-left{
        padding-bottom: 20px;
    }
}



/* 
---------------------------------------------
SHOP PAGE
--------------------------------------------- 
*/
section.shop-landing {
    background: #000;
    position: relative;
    background-image: url('images/shop/croptop-hoodie.png');
    background-size: cover;
    background-position: center;
    /* height: 900px; */
    padding-top: 300px;
    margin: 0 !important;
    /* border-bottom: 1px solid #fff; */
}
/* Bottom gradient */
.shop-landing::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 0;
}

/* Top gradient */
.shop-landing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 0;
}

.shop-landing .words-slide p{
    margin-bottom: -20px !important;
}
.shop-landing .words-slide2 p
 {
    margin: 0 50px!important;
    margin-top: -45px!important;
}
.shop-landing .words:before,
.shop-landing .words2:before,
.shop-landing .words:after, 
.shop-landing .words2:after {
    position: absolute;
    padding: 0!important;
    margin: 0!important;
    top: 0;
    width: 50px;
    height: 100%;
    content: "";
    z-index: 3!important;
}

.shop-landing .words:before, 
.shop-landing .words2:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), transparent);
}

.shop-landing .words:after, 
.shop-landing .words2:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), transparent);
}
.shop-landing h2{
    text-align: center;
    padding-top: 180px;
    color: #fff;
    font-size: 130px;
    position: relative;
    z-index: 3;
}
.shop-landing p.white {
    text-align: center;
    font-size: 100px;
    color: transparent;
    -webkit-text-stroke: 2px #fff;

}
.shop-landing p.black {
    text-align: center;
    font-size: 100px;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}

section.shop-now{
    margin: 0!important;
    padding: 50px 100px;
    background-color: #000;
    color: #fff;
}
.shop-now .shn-right span{
    cursor: pointer;
}


/*-------------alpha-merchandise--------------*/
section.merchandise-alert.alpha{
    padding: 50px;
}
.alpha-wrapper{
    padding: 0 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.merchandise-alert.alpha .merch-box .merch-details span{
    font-size: 80px;
    line-height: 0.9;
    /* padding-bottom: 30px!important; */
}
.merchandise-alert.alpha .merch-details {
    position: absolute;
    top: 55%;
    width: 100%;
    margin: 0 !important;
    padding: 0 20px;
    background-color: transparent;
    transition: 1s ease;
}

.merchandise-alert.alpha .merch-details:hover {
    padding: 0 20px;
    background-color: #fff;
    color: #000 !important;
}
.merchandise-alert.alpha .merch-details .button{
    margin-top: 30px;
    margin-bottom: 20px;
}


/*-------------madeformh----------------*/section.merchandise-alert.madeformh-wrapper {
    padding: 50px;
}
.madeformh-wrapper {
    /* padding: 0 50px; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.merchandise-alert.madeformh .merch-box{
    width: 320px !important;
    height: 550px !important;
}
/* Bottom gradient */
.merchandise-alert.madeformh .merch-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/* Top gradient */
/* .merchandise-alert.madeformh .merch-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 550px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
} */
.merchandise-alert.madeformh .merch-box p.merch-name{
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    line-height: 0.8;
    z-index: 2;
}
.merchandise-alert.madeformh .merch-box p.merch-name span{
    font-size: 60px;
}
.merchandise-alert.madeformh .merch-details {
    position: absolute;
    top: 76%;
    width: 100%;
    height: 130px;
    margin: 0 !important;
    padding: 0 20px;
    background-color: #fff;
    color: #000 !important;
    transition: 1s ease;
    z-index: 2;
}

/* .merchandise-alert.madeformh .merch-details:hover {
    padding: 0 20px;
    background-color: #000;
    color: #fff !important;
} */

/* .merchandise-alert.madeformh .merch-details .button {
    margin-top: 30px;
    margin-bottom: 20px;
} */

/* SHOP RESPONSIVENESS MEDIA QUERIES*/
/* Tablet Mode*/

@media screen and (max-width: 768px) {
    section.merchandise-alert.alpha {
        padding: 20px;
    }
    .alpha-wrapper {
        padding: 0 5px;
    }
    .merchandise-alert.alpha .merch-box .merch-details span{
        font-size: 50px;
    }
    .shop-landing h2,
        .shop-landing p {
            font-size: 70px !important;
        }
    .shop-landing p.white{
        font-family: 'Arian LT Heavy', sans-serif;
        -webkit-text-stroke: 1px #fff;
    }
    .shop-landing p.black{
        font-family: 'Arian LT Heavy', sans-serif;
        -webkit-text-stroke: 1px #fff;
    }
    .shop-landing h2 {
        padding: 70px 0;
    }
}

/* Mobile Mode*/
@media screen and (max-width: 500px) {
    .shop-landing h2,
    .shop-landing p {
        font-size: 50px!important;
    }
    .shop-landing h2{
        padding: 50px 0;
    }
        .shop-landing .words-slide p {
            margin-bottom: -20px !important;
        }
    
        .shop-landing .words-slide2 p {
            margin: 0 50px !important;
            margin-top: -20px !important;
        }
    .shop-landing h3{
        font-size: 30px;
    }
    section.shop-now{
        padding: 30px 20px;
    }
    section.shop-now .button{
        margin-bottom: 20px;
    }
    section.custom-merch {
        padding: 30px 20px;
    }

}

/* 
---------------------------------------------
TICKETS PAGE
--------------------------------------------- 
*/
section.event-ticket {
    background-color: #000;
    border-bottom: 1px solid #fff;
}
section.event-ticket button{
    margin-top: -220px;
}
/* section.event-ticket{
    background-color: #000;
    border-bottom: 1px solid #fff;
} */
.ticket-landing {
    position: relative;
    padding: 0!important;
    margin: 0!important;
    height: 700px;
    /* border-bottom: 1px solid #fff; */
}
/* Bottom gradient */
.ticket-landing::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}
/* Top gradient */
.ticket-landing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

.ticket-landing img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ticket-name{
    position: absolute;
    top: 60%;
    width: 100%!important;
    padding: 20px;
    color: #fff;
    text-align: center;
    z-index: 2;
    
}
.ticket-name h2{
    font-size: 100px;
}
.ticket-name h4{
    font-size: 50px;
}

.event-ticket .button{
    padding: 20px;
}

.ticket-details {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 50px 50px;
    /* border-bottom: 1px solid #fff; */
}
.ticket-details span{
    font-size: 100px;
    color: #fff;
    line-height: 0.8;
}



/*-------------more-info----------------*/
section.more-info{
    position: relative;
    min-height: 500px;
    background-image: url('images/moreinfo.PNG');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 100px;
    padding-top: 400px;
    z-index: 0;
}
/* Bottom gradient */
section.more-info::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 0;
}
.mi-wrapper{
    z-index: 1;
}
.mi-left,
.mi-right{
    z-index: 1;
}
.mi-left li{
    font-size: 28px;
    z-index: 1;
    color: #fff;
    font-family: 'Arian LT Demi', sans-serif;
    
}
.mi-right span{
    font-size: 28px;
    float: right;
    z-index: 1;
    color: #fff;
    font-family: 'Arian LT Demi', sans-serif;
}
/*-------------book-table----------------*/
section.book-table{
    padding: 100px 50px;
    background-color: #000;
    min-height: 500px;
}
.book-table h2{
    text-align: center;
    color: #fff;
    font-size: 100px;
}
.book-table h4{
    text-align: center;
    color: #fff;
}

.bt-wrapper{
    padding: 0 150px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.bt-outline select,
.bt-outline input {
    width: 350px;
    height: 50px;
    /* background-color: #000; */
    background-color: #ccc;
    border-radius: 0;
    /* border: 1px solid #ccc; */
    border: 1px solid #555;
    margin-bottom: 30px;
}
.bt-outline input.grey{
    border: none;
    /* border-bottom: 1px solid #ccc; */
    border-bottom: 1px solid #555;
}
.bt-outline input.calendar{
    /* background-color: #eee; */
    background-color: #ccc;
}

.bt-outline input::placeholder,
.bt-outline select,
option {
    text-align: center!important;
    text-transform: uppercase!important;
    /* color: #ccc !important; */
    color: #333 !important;
    font-family: 'Arian LT Demi', sans-serif;
    font-size: 22px;
}

.bt-outline input.grey::placeholder{
    color: #333 !important;
    /* color: #ccc !important; */
    font-family: 'Arian LT Demi', sans-serif;
}
.bt-outline input.calendar::placeholder {
    text-align: center!important;
    text-transform: uppercase!important;
    color: #ccc !important;
    font-family: 'Arian LT Demi', sans-serif;
}
.bt-outline .form-select option i{
    color: #fff !important;
    font-size: 22px;
}
.lower-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.lower-wrapper .lw-left,
.lower-wrapper .lw-right{
    font-size: 20px;
}
.lw-center{
    text-align: center;
}
.lw-center p{
    font-family: 'Arian LT Light', sans-serif;
}
.lw-right span{
    float: right;
}


/*-------------music-player2----------------*/
section.music-player2.tickets{
    padding: 50px 100px;
    background-color: #000;
    color: #fff;
    min-height: 300px;
}



/* TICKETS RESPONSIVENESS MEDIA QUERIES*/

/* Mobile Mode*/
@media screen and (max-width: 500px) {
    .ticket-landing h2 {
        font-size: 50px;
    }
    .ticket-landing h4 {
        font-size: 25px;
    }
    .ticket-details span{
        font-size: 50px;
    }

    .lw-right span{
        float: none;
    }
    section.more-info{
        padding: 20px;
        padding-top: 400px;
    }
    .mi-wrapper{
        flex-direction: column;
    }
    .mi-right li{
        font-size: 21px;
    }
    .mi-right span{
        float: none;
        font-size: 21px;
    }
    section.book-table{
        padding: 100px 20px;
    }
    .book-table h2{
        font-size: 50px;
    }
    .bt-wrapper {
        padding: 0 20px;
    }
    section.music-player2.tickets{
        padding: 50px 20px;
    }
    .music-box2 .mpr-left{
        padding-right: 50px;
    }
    section.music-player2 .mpr-right{
        padding-top: 25px;
    }
}



/* 
---------------------------------------------
MERCH PAGE
--------------------------------------------- 
*/

section.merch-landing{
    min-height: 550px;
    background-image: url(images/shop/jersey.png);
    background-position: top;
    background-size: cover;
}
/* Top gradient */
.merch-landing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 550px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/*-------- merchandise section ----------*/
section.merchandise {
    min-height: 700px;
    padding: 100px 100px;
    padding-bottom: 0;
    background-color: #000;
}

.merchandise p {
    font-family: 'Mundial Regular', sans-serif;
    color: #eee;
    font-size: 24px;
}

.merchandise span {
    font-family: 'Mundial Hair', sans-serif;
    color: #eee;
    font-size: 20px;
}

.merchandise-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.popup .overlay {
    position: fixed;
    /* Fix to viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
    display: none;
}

.popup .content {
    position: fixed;
    /* Changed from absolute to fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    z-index: 2;
    margin: 50px 0;
}

.popup .close-btn {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    background: #222;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
}

.popup.active .overlay {
    display: block;
}

.popup.active .content {
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
    /* Centered scaling */
}
/*-------------custom-merch----------------*/
section.custom-merch {
    min-height: 600px;
    padding: 30px 50px;
    /* background-color: #000; */
    color: #000!important;
}

.popup .content .cm-left {
    padding: 0 !important;
    margin: 0 !important;
}

.popup .content .cm-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup .content .cm-right {
    background-color: #fff;
    color: #000;
    padding: 50px 30px;
}
.popup .content .cm-right p{
    font-family: 'Arian LT Demi';
    font-size: 14px;
    color: #000;
}
.popup .content .cm-right .price p{
    font-family: 'Arian LT Bold';
    font-size: 20px;
    color: #000;
    margin-bottom: -5px;
}
.popup .content .cm-right .price span{
    /* margin-top: -30px; */
    font-size: 14px;
    font-family: 'Arian LT Light';
    color: #000;
}

.popup .content .size ul {
    margin-top: -20px;
    list-style-type: none;
    padding: 0 !important;
    margin: 0 !important;
    /* display: inline-block; */
}

.popup .content .size ul li {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid #000;
    margin-right: 5px;
}

.popup .content .cm-right ul.description li {
    font-family: 'Arian LT Bold';
    font-size: 12px !important;
}



.merchandise-box {
    padding: 0 !important;
    margin: 0 !important;
    width: 320px;
    min-height: 700px;
    margin-bottom: 50px !important;
    cursor: pointer;
}

.merch-image-wrapper {
    width: 320px;
    height: 550px;
}

.merch-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.merchandise-details {
    height: 200px;
    padding: 20px;
    padding-bottom: 0;
    color: #fff;
}

.merchandise-details h5 {
    font-family: 'Mundial Hair', sans-serif;
    color: #ccc;
}

.merchandise-details h6 {
    font-family: 'Mundial Regular', sans-serif;
    margin: 20px 0;
    font-size: 18px;
}

.merchandise .merchandise-details p {
    font-family: 'Arian LT Thin', sans-serif;
    font-size: 16px;
}

/*-------- extra-merch section ----------*/
section.extra-merch{
    padding: 50px 100px;
    background-color: #000;
}
.extram-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.extram-box {
    padding: 0!important;
    margin: 0!important;
    width: 430px;
    height: auto;
    /* border: 1px solid #fff; */
    margin-bottom: 20px!important;
}
.extram-image-wrapper {
    width: 430px;
    height: 500px;
}
.extram-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.extram-details{
    padding: 20px 0;
    color: #fff;
}
.extram-details h3{
    font-family: 'Mundial Regular', sans-serif;
    font-size: 36px;
    margin-bottom: 20px;
}

/*  MERCH MEDIA QUERY*/
@media screen and (max-width: 500px) {
    section.merchandise{
        padding: 50px 20px;
    }
    .popup .content {
        height: fit-content;
    }
    .popup .content .cm-left{
        display: none;
    } 
    section.extra-merch{
        padding: 50px 30px;
    }
    .extram-box{
        width: 100%;
    }
    .extram-image-wrapper {
        width: 100%;
    }
}



/* 
---------------------------------------------
CONTACT PAGE
--------------------------------------------- 
*/
section.contact-landing{
    min-height: 500px;
    padding: 100px 100px;
    padding-bottom: 0;
    padding-top: 200px;
    background-color: #000;
    color: #fff;
}
.contact-landing h2{
    font-size: 70px;
}
/*-------- contact-form section ----------*/
.contact-form {
    padding: 50px 0;
}

.form-outline select,
.form-outline textarea,
.form-outline input {
    /* float: left!important; */
    height: 70px;
    background-color: #555;
    border-radius: 0;
    border: none;
}

.form-outline textarea {
    height: 150px;
}

.form-outline input::placeholder,
.form-outline select, option,
.form-outline textarea::placeholder {
    /* text-align: center!important; */
    color: #fff !important;
    font-size: 22px;
}

.contact-agreement input {
    border-color: #000 !important;
    font-size: 22px;
}
.contact-agreement label{
    font-size: 22px;
}
.contact-form button{
    padding: 10px 25px;
    background-color: #fff;
    color: #000;
    transition: 1s ease;
    font-size: 22px;
}
.contact-form button:hover{
    padding: 10px 25px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    letter-spacing: 2px;
    transition: 1s ease;
}
section.location{
    min-height: 500px;
    padding: 50px;
    background-color: #000;
    color: #fff;
}
.lctn-left,
.lctn-right{
    padding: 20px;
}
.lctn-right{
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
}
.lctn-left img{
    width: 100%;
    height: auto;
}
.lctn-right p{
    font-size: 28px;
}
.lctnr-left a{
    padding: 20px 15px;
    background-color: #fff;
    color: #000;
    transition: 1s ease;
}
.lctnr-left a:hover{
    letter-spacing: 2px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
}



/*  CONTACT MEDIA QUERY*/
@media screen and (max-width: 500px) {
    section.contact-landing {
        padding:  100px 20px;
        padding-top: 200px;
    }
    .contact-landing h2{
        font-size: 35px;
    }
    section.location{
        padding: 20px;
    }
    .form-outline{
        width: 100%;
    }
    .form-outline select,
    .form-outline textarea,
    .form-outline input {
        width: 100%;
        height: 50px;
    }
    .contact-agreement input,
    .contact-agreement label {
        font-size: 14px;
    }
    .lctn-right,
    .lctn-left{
        padding-left: 20px;
    }
    .lctn-right p {
        font-size: 21px;
    }
    .lctnr-right{
        padding-top: 50px;
    }

}

/* 
---------------------------------------------
PROS.HTML (ARTISTS PROFILE)
--------------------------------------------- 
*/

section.artist-profile{
    background-color: #000;
    border-bottom: 1px solid #fff;
}
section.artist-profile button {
    margin-top: -450px;
}
.artist-landing {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    height: 700px;
    /* border-bottom: 1px solid #fff; */
}

/* Bottom gradient */
.artist-landing::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}

/* Top gradient */
.artist-landing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    z-index: 1;
}
.artist-landing img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.artist-name {
    position: absolute;
    top: 60%;
    width: 100% !important;
    padding: 20px;
    color: #fff;
    text-align: center;
    z-index: 2;

}
.artist-name h2 {
    font-size: 100px;
}
.artist-name h4 {
    font-size: 50px;
}

.upcoming-shows{
    padding: 100px 100px;
    background-color: #000;
}
.upsh-box{
    width: 400px;
    padding: 0 20px;
    padding-left: 50px;
    color: #fff;
    border-right: 1px solid #fff;
}
.upsh-box h3{
    font-family: 'Arian LT Demi', sans-serif;
    font-size: 50px;
}
.upsh-box h2{
    font-family: 'Arian LT Bold', sans-serif;
    font-size: 70px;
}
.upsh-box h4{
    font-family: 'Arian LT Bold', sans-serif;
    font-size: 30px;
}
.upsh-box span{
    font-family: 'Arian LT Light', sans-serif;
    font-size: 21px;
    /* margin-bottom: 20px; */
}
.ps-wrapper {
    padding: 0 100px;
    padding-bottom: 50px;
    z-index: 1;
}
.ps-left,
.ps-right {
    z-index: 1;
}
.ps-right li {
    font-size: 28px;
    z-index: 1;
    float: right;
    color: #fff;
    font-family: 'Arian LT Demi', sans-serif;
}
.ps-left span {
    font-size: 28px;
    z-index: 1;
    color: #fff;
    font-family: 'Arian LT Demi', sans-serif;
}

/* PROS RESPONSIVENESS MEDIA QUERIES*/

/* Mobile Mode*/
@media screen and (max-width: 500px) {
    .artist-landing h2 {
        font-size: 50px;
    }
    .artist-landing h4 {
        font-size: 25px;
    }
    .artist-details span {
        font-size: 50px;
    }
    .upcoming-shows {
        padding: 100px 20px;
    }
    .upsh-box{
        width: 100%;
        padding: 20px 20px;
        padding-left: 20px;
        border-right: none;
        border-bottom: 1px solid #fff;
    }

    .ps-wrapper{
        padding: 0 20px;
        /* padding-top: 30px; */
        padding-bottom: 30px;
        flex-direction: column;
        justify-content: center!important;
        align-items: center;
    }
    .ps-right li {
        font-size: 21px;
    }
    .ps-right span {
        font-size: 21px;
    }

}



/* 
---------------------------------------------
ZBLOG PAGE
--------------------------------------------- 
*/

section.zblog-image {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 70%;
    height: 500px;
}

.social-media ul {
    padding: 0!important;
    list-style: none;
    display: flex;
}

.social-media ul li {
    list-style: none;
    margin-right: 20px;
}

.social-media ul li a {
    color: #000;
}
.social-media ul li a i {
    font-size: 20px;
}
.zblog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
section.individual-blogs {
    margin-left: 200px;
    margin-right: 200px;
    padding-top: 150px;
    padding-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.blog-deets {
    margin-bottom: 30px;
}
.individual-blogs h5 {
    margin-top: 20px;
    font-size: 18px;
    color: #000;
}
.individual-blogs h6 {
    font-size: 17px;
    color: #000;
}
.individual-blogs h1 {
    font-family: 'Arian LT Bold', sans-serif;
    font-size: 50px;
    font-weight: 800;
    color: #000;
}
.individual-blogs h2 {
    font-family: 'Arian LT Heavy', sans-serif;
    font-size: 27px;
    font-weight: bold;
}
.date {
    margin-top: 20px;
    margin-bottom: 20px;
}
.sc-icons {
    margin-top: 20px;
    margin-bottom: 50px;
}
.individual-blogs p {
    font-family: 'Mundial Thin', sans-serif;
    color: #000;
    font-size: 20px;
    text-align: left;
}
.author {
    margin-top: 20px;
    margin-bottom: 20px;
}
.author img {
    height: 70px;
    width: 70px;
}
section.related-news{
    padding: 50px 50px;
    background-color: #000;
}

/* ZBLOGS media query*/
@media screen and (max-width: 900px) {
    section.individual-blogs {
        margin-left: 50px;
        margin-right: 50px;
        padding-top: 150px;
        padding-bottom: 10px;
        font-family: 'Poppins', sans-serif;
    }
    /* .sidebar {
        display: none;
    } */
}

@media screen and (max-width: 500px) {
    section.individual-blogs {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 150px;
        padding-bottom: 10px;
    }
    .individual-blogs h1 {
        font-size: 30px;
        font-weight: 800;
    }
    .individual-blogs h2 {
        font-size: 24px;
        font-weight: 800;
    }
    section.zblog-image {
        width: 100%;
    }
    .zblog-image img {
        width: 100%;
        height: auto;
    }
    /* .sidebar {
        display: none;
    } */
    section.related-news{
        padding: 50px 20px;
    }
}


/* 
---------------------------------------------
CHECKOUT PAGE
-------------------------------------- ------- 
*/
section.checkout{
    min-height: 900px;
}
.checkout-wrapper{
    padding: 20px;
    padding-top: 200px;
}
.check-left{
    padding: 20px 50px;
}


.table-responsive {
    overflow-x: auto!important;
    -webkit-overflow-scrolling: touch!important;
    /* Adds momentum scrolling for iOS devices */
}

.table {
    width: 100%!important;
    min-width: 600px!important;
}
.table thead tr th{
    background-color: #000!important;
    color: #fff !important;
}
.check-right{
    padding: 20px;
}
.chkr-wrapper{
    background-color: #eee;
    padding: 20px;
    border-radius: 5px;
    height: 500px;
}
.check-right label{
    font-family: 'Mundial Light', sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
}
.check-right img{
    width: 100px;
    height: 50px;
    margin-top: -10px;
}
.check-right .form-outline input {
    height: 50px;
    background-color: #fff;
    border-radius: 0!important;
    border: none; 
}
.check-right .form-outline input::placeholder {
    font-family: 'Mundial Light', sans-serif;
    font-size: 14px;
    color: #999 !important;
}
.check-right .form-outline select,
option{
    color: #000 !important;
    font-size: 14px;
}
.mpesa-check{
    border: 1px solid #555!important;
    border-radius: 0!important;
}
.check-right a{
    padding: 10px 25px;
    background-color: #000;
    color: #fff;
    transition: 1s ease;
}
.check-right a:hover{
    padding: 10px 25px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    letter-spacing: 2px;
}
.product-img{
    width: 200px;
    height: 100px;
}
.subtotal{
    float: right;
}

.check-left tbody tr td div{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.check-left tbody tr td div i{
    cursor: pointer;
}


.tt-left a{
    text-decoration: none;
    color: #000;
    transition: 1s ease;
}
.tt-left a:hover{
    letter-spacing: 2px;
}
.tt-right p{
    float: right;
}

/*  CHECKOUT MEDIA QUERY*/
@media screen and (max-width: 1100px) {
    .checkout-wrapper{
        display: flex;
        flex-direction: column;
    }
    .check-left,
    .check-right{
        width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .check-right {
            margin: 0 20px;
        }

    .total-wrapper{
        display: flex;
        flex-direction: column-reverse;
    }
    .tt-right p {
        padding-bottom: 30px!important;
    }
}