html{scroll-behavior:smooth}

body {
    background: #151515;
    font-family: "Varela Round", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #FFF;
}

a {
    color: #000;
}

header {
    background: #000;
}

.nav-item {
    margin: 0 0 0 80px;
}

.nav-item:last-child {
    margin-right: 0;
}

.navbar li.nav-item a.nav-link {
    color: #FFF;
}

.jumbotron.hero {
    background: #A043F9;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

    /* background video: https://alvarotrigo.com/blog/background-video-css/ */

    video {
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
    
    .video-wrapper {
        /*border: 2px solid #000;
        width: 400px;
        height: 200px;*/
        width: 100%;
        position: relative;
        overflow: hidden;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header{
        position: relative;
        color: white;
        text-shadow: 1px 1px 8px rgba(0,0,0,0.6);
    }

.jumbotron.visualframe {
    background: #FFF url(../img/visual01.png)center -195px no-repeat;
    margin: 0;
    padding: 0;
    color: #000;
    border-radius: 0;
}

    .aboutEls {
        margin-top: 280px;
        text-align: center;
    }

    .aboutEls h1 {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 2em;
        margin-bottom: 20px;
    }

.container.about {
    background: url(../img/visual02.png) top center no-repeat;
}

    .cardHolder {
        background: #FFF;
        border-radius: 28px;
        padding: 20px;
    }

    .cardHolder2 {
        background: #FFF;
        border-radius: 28px;
        padding: 20px;
        margin-top: 160px;
        margin-bottom: 50px;
    }

    .founderName1 {
        margin-top: 40px;
    }

    .founderName2 {
        margin-top: 350px;
    }

.jumbotron.gallery {
    background: rgb(255, 194, 39);
    /*background: linear-gradient(90deg, rgba(255,134,16,1) 0%, rgba(255,194,39,1) 100%);*/
    margin: 0;
    border-radius: 0;
}

    .jumbotron.gallery h2 {
        color: #000;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 3em;
    }

    .btn-ungu {
        background: #A043F9;
        border: 0;
        padding: 15px 35px;
        margin-top: 10px;
    }

    /* Infinite carousel: https://codepen.io/studiojvla/pen/qVbQqW */
    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
            }
        100% {
            transform: translateX(calc(-330px * 5));
            }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-330px * 5));
            }
    }

    @-webkit-keyframes scroll2 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-330px * 5));
            }
    }

    @keyframes scroll2 {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-330px * 5));
            }
    }
        
        .slider {
            /*background: white;
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
            height: 249px;
            margin: auto;
            overflow: hidden;
            position: relative;
            /*width: 960px;*/
        }

        .slider::before, .slider::after {
            background: linear-gradient(to right, rgba(255, 194, 39,1) 0%, rgba(255, 255, 255, 0) 100%);
            content: "";
            height: 249px;
            position: absolute;
            width: 200px;
            z-index: 2;
        }

        .slider::after {
            right: 0;
            top: 0;
            transform: rotateZ(180deg);
        }

        .slider::before {
            left: 0;
            top: 0;
        }

        .slider .slide-track {
            -webkit-animation: scroll 40s linear infinite;
            animation: scroll 40s linear infinite;
            display: flex;
            width: calc(330px * 10);
        }

        .slider .slide-track2 {
            -webkit-animation: scroll2 30s linear infinite;
            animation: scroll 30s linear infinite;
            display: flex;
            width: calc(330px * 10);
        }

        .slider .slide {
            height: 249px;
            width: 315px;
            margin-right: 15px;
        }

.jumbotron.artist {
    background: #A043F9;
    margin: 0;
    border-radius: 0;
    padding: 0;
}

    .jumbotron.artist h2 {
        color: #FFF;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 3em;
    }

    .btn-kuning {
        background: #FFC227;
        border: 0;
        color: #000;
        padding: 15px 35px;
        margin-top: 10px;
    }

    .visualHolder3 {
        margin-top: -100px;
    }

.jumbotron.heading-gallery {
    background: #A043F9 url(../img/header-gallery.png) right -30px no-repeat;
    border-radius: 0 0 60px 60px;
    height: 350px;
    margin: 0;
}

.jumbotron.heading-artists {
    background: #A043F9 url(../img/header-artists.png) right -30px no-repeat;
    border-radius: 0 0 60px 60px;
    height: 350px;
    margin: 0;
}

    .jumbotron.heading-gallery h1, .jumbotron.heading-artists h1 {
        color: #FFF;
        font-size: 5em;
        font-family: "Inter", sans-serif;
        font-weight: 900;
        line-height: 84px;
    }

.jumbotron.body-gallery {
    background: #151515 url(../img/bg-body-gallery.png) center 300px no-repeat;
    margin: 0;
}

.judulPage h2 {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-size: 2.6em;
}

.judulPage .helper {
    color: #A8A8A8;
}

footer {
    background: #000;
    color: #FFF;
}

    footer a {
        color: #FFF;
    }

    footer ul {
        margin: 0;
        padding: 0;
    }

    footer ul li {
        list-style: none;
        margin-bottom: 10px;
    }

    .judulFooter {
        font-family: "Inter", sans-serif;
        font-weight: 700;
    }

    .logoFooter {
        text-align: right;
    }



/* Bootstrap 4 text input with search icon */

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

input.border-yellow[type=search] {
    background: #000;
    border: 3px solid #FFC227;
    border-right: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
     border-radius: 20px;
    padding: 25px;
    color: #999;
}

button.border-yellow {
    background: #000;
    border: 3px solid #FFC227;
    -webkit-border-radius: 0 20px 20px 0;
    -moz-border-radius: 0 20px 20px 0;
     border-radius: 0 20px 20px 0;
     padding: 0 30px;
}

.fa-search {
    color: #FFC227;
}

/* https://unused-css.com/blog/css-rounded-table-corners/ */

table.rounded-corners {
 border-spacing: 0;
 border-collapse: separate;
 border-radius: 10px;
 border: var(--border);
 overflow: hidden;
 --border: 3px solid #FFC227;
 text-align: center;
 width: 100%;
}

/* Apply a border to the right of all but the last column */
/* table.rounded-corners th:not(:last-child),*/
table.rounded-corners td:not(:last-child) {
 border-right: var(--border);
}

/* Apply a border to the bottom of all but the last row */
/* table.rounded-corners>thead>tr:not(:last-child)>th,
table.rounded-corners>thead>tr:not(:last-child)>td,
/* table.rounded-corners>tbody>tr:not(:last-child)>th,
table.rounded-corners>tbody>tr:not(:last-child)>td,
table.rounded-corners>tfoot>tr:not(:last-child)>th,
table.rounded-corners>tfoot>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>td,
table.rounded-corners>tr:not(:last-child)>th,
table.rounded-corners>thead:not(:last-child),
table.rounded-corners>tbody:not(:last-child),
table.rounded-corners>tfoot:not(:last-child) {
 border-bottom: var(--border);
} */

table.rounded-corners th {
  background: #A043F9;
}

table.rounded-corners th {
    padding: 15px 10px;
}

table.rounded-corners td {
    padding: 15px 10px;
}

table.rounded-corners a {
    color: #7BA0FF;
    cursor: pointer;
    border-bottom: 1px solid #7BA0FF    ;
}

/* https://bootsnipp.com/snippets/XRkXG */

.banner {
    position: relative;
    height: 400px;
    padding: 11px 0 16px;
    margin: 50px auto;
    text-align: center;
}

.dg-container {
    position: relative;
    width: 100%;
    height: 350px;
}

.dg-wrapper {
    width: 320px;
    height: 250px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
}

.dg-wrapper a {
    width: 100%;
    height: 250px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.dg-wrapper a:first-child {
    z-index: 2;
}

.dg-wrapper a img {
    display: block;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    width: 100%;
    height:350px;
}

.dg-wrapper a.dg-transition {
    transition: all 0.5s ease-in-out;
}

.dg-wrapper a.dg-transition-fast {
    transition: all 0.2s ease-in-out;
}

.dg-container nav {
    display: none;
}

.dg-container nav span:hover {
    opacity: 1;
}

.dg-container a {
    color: #FFF;
}

.dg-container nav span.dg-next {
    background-position: top right;
    margin-left: 10px;
}

.dg-container #lightButton2 {
    bottom: 20px;
}

.dg-container .button {
     position: relative;
     z-index: 5;
     margin-top: 200px;
 }

.dg-container .button li {
    cursor: pointer;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(0, 0, 0, 0.20);
}

.dg-container .button .light {
    background: #01BDFF;
}



@media all and (max-width: 480px) {
    .logoFooter {
    text-align: center;
    }
    .jumbotron.heading-gallery, .jumbotron.heading-artists {
    background: #A043F9;
    }
    .nav-item {
    margin: 0;
    }
    .judulHalaman {
        text-align: center;
        font-size: .9em;
    }
    table.rounded-corners td {
    vertical-align: text-top;
    }
    p {
        font-size: .9em;
    }
    .founderName1 {
        text-align: right;
    }
    .cardHolder2 {
        margin-top: 50px;
        margin-left: 100px;
    }
    .founderName2 {
        margin-top: -50px;
        margin-bottom: 50px;
    }
    .centerHolder {
        margin-top: 50px;
        text-align: center;
    }
    .visualHolder3 {
        margin-top: 0;
        text-align: center;
    }
    .whiteHolder {
        margin-top: -200px;
        z-index: 5;
    }
    .whiteHolder img {
        width: 250px;
    }
    .slider::before, .slider::after {
        width: 50px;
    }

}