:root {
    --sunsetorange: #ef4600;
    --sunsetorange1: #ff815d;
    --sunsetpink: #ff5046;
    --sunset: #0b9887;
    --sunset1: #144351;
    --sunset2: #ffa180;
    --sunset3: #fbbd46;
    --sunset4: #ffa01d;
    --sunset5: #1e9dbf;
    --sunset6: #f28e65;
    --sunset7: #096c7e;
}

.cardw {
    border: none;
    display: flex;
    object-fit: cover;
    margin: none;
    padding: none;
}

.text-gradient {
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 0) 33%);
}

.card-carousel-program {
    margin-left: 20px;
    background: transparent;
    border-style: none;
}


.card-carousel-program img {
    border-radius: 20px;
    width: 250px;
    height: 320px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-carousel-lineup {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-carousel-lineup img {
    border-radius: 20px 20px 0px 0px;
    width: 250px;
    height: 250px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-carousel-gallery {
    margin-left: 20px;
    background: transparent;
    border-style: none;
}

.card-carousel-gallery img {
    border-radius: 20px;
    width: 270px;
    height: 270px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-carousel-ticket {
    /* max-height: 350px; */
    background: transparent;
    border-style: none;
    margin-bottom: 2%;
    max-width: 250px;
    margin-left: 20px;
}

.grey img {
    filter: grayscale(100%);

}

.card-carousel-ticket img {
    /* filter: grayscale(100%); */

    height: auto;
    width: 228px;
    object-fit: cover;
    box-sizing: border-box;
}


.card-border {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border img {
    border-radius: 20px 20px 0px 0px;
    max-height: 270px;
    max-width: 330px;
}

.card-border-program {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border-program img {
    border-radius: 20px;
}



.card-merchandise {
    border-radius: 10px;
    border-style: none;


}

.card-merchandise img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.card-product-merch {
    margin-top: 10px;
    margin-bottom: 10px;
    background: transparent;
    border-style: none;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.card-product-merch img {
    border-radius: 10px;
    /* width: 177px; */
    object-fit: cover;
    box-sizing: border-box;
}

.card-product-merch a {
    color: white;
}

.card-product-merch a :hover {
    color: var(--sunset2);
}

.card-border-tiket {
    /* max-height: 350px; */
    object-fit: cover;
    background: transparent;
    border-style: none;
    margin-bottom: 2%;
    max-width: 250px;
    margin-left: 20px;
}

/* .card-border-tiket img {
    
} */

.card-text-program {
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
    bottom: 2%;
}

.card-border-lineup {
    background: var(--sunset1);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border-lineup img {
    border-radius: 20px 20px 0px 0px;
    width: 250px;
    height: 250px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-border-news {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-top: 15px;
}

.card-border-news img {
    /* width: 374px; */
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    box-sizing: border-box;
}

.card-border-ticket {
    background: var(--sunset);
    border-radius: 20px;
    border-style: none;
    margin-left: 20px;
}

.card-border-ticket img {
    border-radius: 20px;
}

.xxx {
    margin: 10%;
    border: none;
    border-style: none;
    border-radius: 20px;
}

.xxx img {
    border: none;
    border-style: none;
    border-radius: 20px;
}

.card-transparent {
    margin-left: 20px;
    background: transparent;
    border: none;
    border-radius: 20px;
    border-style: none;
}

.card-transparent img {
    width: 375px;
    height: 375px;
}

.card-text {
    letter-spacing: 1px;
    font-size: 22px;
    font-weight: 600;
    color: white;
    text-align: center;
    margin: 0;
}

.card-text-lineup {
    font-size: x-large;
    font-weight: 600;
    color: white;
    text-align: center;
    /* margin-top: 120%; */
    position: absolute;
    bottom: 0;
    /* right: 0; */
    right: 5%;
    left: 5%;
}

.card-text-news {
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-align: left;
    letter-spacing: 1px;
    /* margin-top: 120%; */
    position: absolute;
    bottom: 0;
    /* right: 0; */
    right: 5%;
    left: 5%;
}

.card-text-gallery {
    font-family: 'Phudu', sans-serif;
    font-size: large;
    font-weight: 600;
    color: white;
    text-align: center;
    letter-spacing: 1px;
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
}


.carousel {
    margin-top: 8%;
    border-radius: 50%;
    border-color: none;
}

.carousel-cell {
    border-color: transparent;
    border-radius: 50%;
}

.carousel-cell:before {
    display: block;
    content: "";
}

.carousel-cell-lineup {
    border-color: transparent;
    margin-right: 10px;
    border-radius: 50%;
}

.carousel-cell-lineup:before {
    display: block;
    content: "";
}

/* .flickity-prev-next-button {
    top: 50%;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    transform: translateY(-50%);
} */

.text-center {
    font-size: 14px;
    color: white;
    align-items: center;
    margin: 0;
}

.card-grid {
    margin-top: 3%;
    margin-bottom: 3%;
}

.card-program {
    height: 300px;
    width: 300px;
    border-radius: 20px;
    border: none;
}

.card-program1 {
    margin: 1%;
    max-height: 335px;
    max-width: 355px;
}

.card-program1 img {
    border-radius: 20px;
    border-style: none;
    object-fit: cover;


    margin-bottom: 15px;
    margin-top: 15px;
}

.card-news {
    margin-top: 1%;
    border-radius: 10px;
    border-style: none;
}

.card-e-ticket {
    margin-top: 1%;
    margin-bottom: 5%;
    border-radius: 20px;
    border-style: none;
}


.card-news-detail img {
    border-radius: 10px;
    border-style: none;
    width: 100%;
    max-height: 80%;
    margin-bottom: 15px;
}

.card-lineup-margin {
    margin: 5%;
}

.card-lineup {
    height: 300px;
    width: 230px;
    border-radius: 20px;
    border: none;
}

.gallery-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    grid-gap: 0;
    /* background: var(--sunset3); */
    /* padding: 15px; */
}

.gallery-card img {
    width: 150px;
    height: 150px;
    display: block;
    /* -webkit-filter: grayscale(1); */
    /* filter: grayscale(1); */
    transition: all 100ms ease-out;
    object-fit: cover;
}

.gallery-card img:hover {
    transform: scale(1.04);
    /* -webkit-filter: grayscale(0); */
    /* filter: grayscale(0); */
}

.card-detail-program {
    margin-top: 10px;
    margin-bottom: 10px;
}

.card-border-greenman {
    background: var(--sunset1);
    border-style: none;
    background-color: transparent;
    
}

.card-border-greenman img {
    background-color: transparent;
    /* margin-left: 20px; */
    display: block;
    height: 450px;
    width: 650px;
    object-fit: cover;
    box-sizing: border-box;
}