/* #navbar{
    background:none;
    position: fixed;
    top:0;
    left:0;
    right:0;
    transition: .5s ease;
    transform: translateY(0);
    box-shadow:none;
    padding:30px 0;
    display:none;
}
#navbar .navbar-brand{
    color:#fff!important;
}
#navbar .navbar-brand .logo{
    display: none!important;
}
#navbar .navbar-brand .logo-white{
    display: block!important;
}
#navbar .nav-link{
    color:#fff!important;
}
#navbar .btn-accent{
    border:1px solid #fff;
}
#navbar.float-hide{
    transform: translateY(-100%)!important;
    position: fixed;
    display:block;
}
#navbar.float{
    position: fixed;
    background:#fff;
    color:#333;
    padding:0;
    box-shadow:0px 10px 30px -10px #0001;
    display:block;
}
#navbar.float a.navbar-brand,
#navbar.float a.nav-link{
    color:#333!important;
}
#navbar.float .dropdown-toggle{
    color:#333;
}
#navbar.float .navbar-brand .logo{
    display: block!important;
}
#navbar.float .navbar-brand .logo-white{
    display: none!important;
} */
.section-intro-grid{
    display: grid;
    /* height:calc(100vh - 80px); */
    overflow: hidden;
    grid-template-columns: 50vw 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        'intro-grid-1 intro-grid-2 intro-grid-2 intro-grid-2 intro-grid-3 intro-grid-3 intro-grid-3'
        'intro-grid-1 intro-grid-4 intro-grid-4 intro-grid-4 intro-grid-4 intro-grid-4 intro-grid-4'
    ;
}
.section-intro-grid > div:nth-child(1){
    grid-area: intro-grid-1;
}
.section-intro-grid > div:nth-child(2){
    grid-area: intro-grid-2;
}
.section-intro-grid > div:nth-child(3){
    grid-area: intro-grid-3;
}
.section-intro-grid > div:nth-child(4){
    grid-area: intro-grid-4;
}
.section-intro-grid > div:nth-child(5){
    grid-area: intro-grid-5;
}
.section-intro-grid > div:nth-child(6){
    grid-area: intro-grid-6;
}
.section-intro-grid > div:nth-child(2){
    position: relative;
}
.section-intro-grid > div:nth-child(2):before{
    content: "";
    position: absolute;
    top:0;
    left:0;
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--accent-color);
    z-index:10;
    transform: translate(-50%,-50%);
    opacity:0.5;
}
.section-intro-grid > div:nth-child(4){
    position: relative;
}
.section-intro-grid > div:nth-child(4):before{
    content: "";
    position: absolute;
    bottom:0;
    left:0;
    width:100px;
    height:100px;
    border-radius:50%;
    background:var(--action-color);
    z-index:10;
    transform: translate(-50%,50%);
    opacity:0.5;
}
.intro-slider{
    overflow:hidden;
}
#intro-sliders .carousel-control{
    position: absolute;
    bottom:0;
    left:0;
    width:60px;
    height:60px;
    line-height: 60px;
    text-align:center;
    background:#fff3;
    color:#fff;
    font-size:20px;
    transition: .3s ease;
}
#intro-sliders .carousel-control:hover{
    background:#fff6;
}
#intro-sliders .carousel-control.next{
    left:60px;
}
.info-grid{
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.section-artist-grid .title{
    width:100px;
}
.section-artist-grid .title span{
    position: absolute;
    transform:rotate(-90deg);
    z-index:10;
    white-space: nowrap;
}
.info-grid .item:nth-child(1){
    background:var(--accent-color);
    color:#fff;
}
.info-grid .item:nth-child(2){
    background:#fff;
    color:#111;
}
.info-grid .item:nth-child(3){
    background:var(--danger);
    color:#fff;
}
.info-grid .item:nth-child(4){
    background:#fff;
    color:#111;
}
.info-grid .item:nth-child(5){
    background:#EFB91B;
    color:#fff;
}
.section-artist-row .item{
    font-size:12px;
    font-weight: 400;
    line-height: 1.5;
    text-align:center;
    display: flex;
    flex-direction: column;
    background: var(--action-color);
    color:#fff;
}
.section-artist-row .item img{
    height:300px!important;
}
.section-artist-row .item:nth-child(even){
    background:var(--accent-color);
    color:#fff;
}
.section-artist-row .item:nth-child(even) img{
    order:2;
}
/*
.section-artist-grid .item{
    font-size:12px;
    font-weight: 400;
    line-height: 1.5;
    text-align:center;
    display: flex;
    flex-direction: column;
    background: var(--action-color);
    color:#fff;
}
.section-artist-grid .item img{
    height:300px!important;
}
.section-artist-grid .item:nth-child(3),
.section-artist-grid .item:nth-child(5){
    background:var(--accent-color);
    color:#fff;
}
.section-artist-grid .item:nth-child(3) img,
.section-artist-grid .item:nth-child(5) img{
    order:2;
}
*/
.section-intro{
    padding-top:30vh!important;
}
.section-intro{
    background:var(--accent-color);
    color:#fff;
    position: relative;
    overflow:hidden;
}
.section-intro .image{
    margin-right:-5vw;
}
.section-intro .image img{
    height:70vh;
    object-fit: cover;
    width:100%;
}
.row-intro-box{
    border:1px solid #fff;
    margin:50px 0 0;
}
.row-intro-box > div{
    padding:0;
}
.row-intro-box > div:first-child{
    border-right:1px solid #fff;
}
.row-intro-box a{
    display: block;
    height:100%;
    padding:15px;
    color:#fff;
    transition: .3s ease;
}
.row-intro-box small{
    color:#fff5;
}
.row-intro-box a:hover{
    background:#fff;
    color:#333;
}
.row-intro-box a:hover small{
    color:#aaa;
}
#intro-slider .slide{
    overflow: hidden;
}
/* #intro-slider .slide .image:before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    width:calc(100% + 5vw);
    background:var(--accent-color);
    transform: translateX(100%);  
}
#intro-slider .slide.slick-active .image:before{
    animation:introImageReveal 2s ease;
    animation-delay: 7s;
}
@keyframes introImageReveal{
    0%{
        transform: translateX(100%);  
    }
    50%{
        transform: translateX(0);  
    }
    100%{
        transform: translateX(100%);  
    }
} */
#intro-slider .slide .image{
    overflow:hidden;
}
#intro-slider .slide .image img{
    transform:scale(1.5);
    filter:grayscale(1);
}
#intro-slider .slide.slick-active .image img{
    transform: scale(1);
    transition:5s ease;
    filter:grayscale(0);
}
#intro-slider .slide .col-lg-4{
    transform: translateX(-100%);
    transition: 1s ease;
}
#intro-slider .slide .col-lg-7{
    transform: translateX(calc(100% + 5vw));
    transition: 1s ease;
}
#intro-slider .slide.slick-active .col-lg-4{
    transform: translateX(0);
}
#intro-slider .slide.slick-active .col-lg-7{
    transform: translateX(0);
}
#intro-slider .btn-slick-nav{
    top:auto;
    transform:translateY(0);
    bottom:120px;
    left:4vw;
    border-radius:50%;
    width:50px;
    height:50px;
    line-height: 50px;
    background: #0001;
    transition: .3s ease;
}
#intro-slider .btn-slick-nav:hover{
    background: #fff1;
}
#intro-slider .btn-slick-nav:before{
    display: none;
}
#intro-slider .btn-slick-nav.slick-next{
    right:auto;
    left:calc(4vw + 55px);
}
#intro-slider .col-lg-4{
    margin-bottom:180px;
}

.section-about{
    position: relative;
    color:#333;
    padding:200px 0!important;
}
.section-about .bg-spiral{
    content: "";
    position: absolute;
    top:0;
    left:0;
    z-index:0;
    width:100%;
    opacity:0.4;
    transform:rotateX(180deg)
}
.section-about .img-bg{
    position: absolute;
    top:0;
    left:0;
    width:60%;
}
.section-about .container{
    position: relative;
}
.section-about:before{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    height:200px;
    transform: skewY(5deg) translateY(50%);
}
.section-about .text-bg{
    font-family: 'Karla', sans-serif;
    position: absolute;
    top:-50px;
    left:15px;
    font-size:100px;
    color:#0001;
}
.section-event{
    position: relative;
    background:#fff;
}
.section-event:before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:50vw;
    height:50vw;
    border-radius:50%;
    border:4px dashed #fff1;
    transform: translate(-50%,-20%);
    animation:sectionEventbgRotate 50s linear infinite;
}
@keyframes sectionEventbgRotate{
    0%{
        transform: translate(-50%,-20%) rotate(0deg);
    }
    100%{
        transform: translate(-50%,-20%) rotate(180deg);
    }
}
.section-artist{
    position: relative;
}
.section-artist .bg-spiral{
    content: "";
    position: absolute;
    top:0;
    right:0;
    z-index:0;
    width:100%;
    transform:rotateY(180deg) rotateX(180deg);
}
.section-artist .row-artist{
    margin-top:100px;
}
.section-artist .row-artist > div:nth-child(3n-1){
    margin:-50px 0 0;
}
.card-artist{
    position: relative;
    border:none;
    border-radius:0;
    background:var(--accent-color);
    color:#fff!important;
    padding:30px;
    border-radius: 20px;
    margin:0 15px;
}
.card-artist .card-img{
    width:150px;
    height:150px;
    object-fit: cover;
    border-radius: 50%;
    margin:-100px 0 30px -35px;
    transition: .5s ease;
}
.card-artist:hover .card-img{
    transform: scale(1.1);
}
.card-artist .caption .title{
    line-height: 1;
    font-family: sans-serif;
    font-weight: 800;
}

.section-info{
    position: relative;
    z-index:1;
    padding:100px 0!important;
    background:#fff;
}
.ombak-white,
.ombak-white-transparent{
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom:0;
    left:0;
}
.ombak-white svg,
.ombak-white-transparent svg{
    height:100px;
    width:100vw;
    fill:#fff;
    animation:ombak 15s linear infinite;
    margin-left:-1px;
    border:none;
    outline:none;
}
.ombak-white-transparent svg{
    fill:#fff3;
    margin:0;
    animation:ombakSecond 20s linear infinite;
}
@keyframes ombak{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}
@keyframes ombakSecond{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-100%);
    }
}
.btn-info-play{
    transform: translateY(100px);
    outline:none!important;
    box-shadow:none!important;
}
.btn-info-play i{
    width:50px;
    height:50px;
    line-height: 50px;
    border:1px solid #000;
    border-radius:50%;
    display: inline-block;
    margin-right:20px;
    position: relative;
    transition: .5s ease;
}
.btn-info-play i:after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--accent-color);
    z-index:-1;
    transition: .5s ease;
    transform: scale(0);
    transform-origin: center;
}
.btn-info-play i:before{
    z-index:1;
}
.btn-info-play:hover i{
    color:#fff;
}
.btn-info-play:hover i:after{
    transform: scale(1);
}
.fancybox-slide{
    padding:0!important;
}
.fancybox-button.fancybox-button--close{
    z-index:9999999!important;
}
.fancybox-slide--video .fancybox-content{
    height:100vh!important;
    width:100vw!important;
}
.fancybox-slide:before{
    display: none!important;
}
.fancybox-toolbar{
    opacity:1!important;
    visibility: visible!important;
}
.modal-fullpage .modal-dialog{
    margin:0;
    position: fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:auto;
    max-width: none;
    background:#fff;
    transform:none;
}
.modal-fullpage .modal-dialog .modal-content{
    box-shadow:none;
    border-radius:0;
    border:none;
    display: block;
}
.section-artist{
    padding-bottom:80px!important;
}
.section-artist .ombak-white svg{
    fill:var(--accent-color);
}
.section-info .bg-spiral{
    content: "";
    position: absolute;
    top:0;
    right:0;
    z-index:0;
    width:100%;
    opacity:0.5;
    transform:rotateX(180deg)
}
.section-info .container{
    position: relative;
}
.row-circle-area{
    margin:0 auto;
    width:500px;
    max-width: 100%;
}
.row-circle-area > div{
    padding:0;
}
.row-circle-area .item{
    width:150px;
    height:150px;
    background:var(--accent-color);
    color:#fff;
    display: flex;
    align-items:center;
    justify-content: center;
    border-radius:50%;
    margin:0 auto;
    position: relative;
    transition: .5s ease;
}
.row-circle-area .item:before{
    content:"";
    position: absolute;
    top:-10px;
    left:-10px;
    width: 170px;
    height:170px;
    border-radius:50%;
    border:1px dashed #aaa;
    animation:circleRotate 60s linear infinite;
}
@keyframes circleRotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-180deg);
    }
}
.row-circle-area .item .value{
    font-size:50px;
    margin:0;
    line-height: 1;
}
.row-circle-area .item .title{
    margin:0;
}
.row-circle-area div:nth-child(1) .item{
    transform: scale(1);
    background:var(--accent-color);
    color:#fff;
}
.row-circle-area div:nth-child(1) .item:hover{
    transform: scale(1.2);
    background:var(--accent-color);
    color:#fff;
}
.row-circle-area div:nth-child(2) .item{
    transform: scale(1.4) translateY(-50px);
}
.row-circle-area div:nth-child(2) .item:hover{
    transform: scale(1.6) translateY(-50px);
}
.row-circle-area div:nth-child(3) .item{
    transform: scale(0.8) translateY(50px);
}
.row-circle-area div:nth-child(3) .item:hover{
    transform: scale(1) translateY(50px);
}
.row-circle-area div:nth-child(4) .item{
    transform: scale(1.2) translateY(-50px);
}
.row-circle-area div:nth-child(4) .item:hover{
    transform: scale(1.4) translateY(-50px);
}
.row-circle-area div:nth-child(5) .item{
    transform: scale(1) translateY(30px);
}
.row-circle-area div:nth-child(5) .item:hover{
    transform: scale(1.2) translateY(30px);
}
.section-art{
    position: relative;
    padding-bottom:100px!important;
}
.section-art .section-art-line{
    position: absolute;
    top:50%;
    left:0;
    right:0;
    width:100%;
    transform: translateY(50%);
    opacity:0.3;
}
.section-art .container{
    position: relative;
}
.row-art-slider .slick-slide{
    padding:0 30px;
}
.row-art-slider .slick-slide a{
    outline:none!important;
    border:none!important;
}
.row-art-slider .slick-slide .image img{
    opacity:0.3;
    filter:grayscale(1);
}
.row-art-slider .slick-slide.slick-current .image img{
    opacity:1;
    filter:grayscale(0);
}
/* .row-art-slider .col-btn-more .item{
    background:#4F3FEE;
    display: flex;
    align-items: center;
    justify-content: center;
    height:370px;
    margin:75px 0 0;
}
.row-art-slider .col-btn-more .item .btn-circle-next{
    text-align: center;
    display: inline-block;
    color:#fff;
    
}
.row-art-slider .col-btn-more .item .btn-circle-next .fa{
    display: block;
    width:50px;
    height:50px;
    line-height:50px;
    border:none;
    border-radius:50%;
    color:#fff;
    padding:0;
    margin:0 auto 10px;
}
.row-art-slider .col-btn-more .item .btn-circle-next .text{
    text-align: center;
} */
.btn-slick-nav{
    position: absolute;
    top:50%;
    left:50px;
    width:70px;
    height:70px;
    line-height:70px;
    border:none;
    background: #0003;
    border-radius:50%;
    color:#fff;
    transform: translateY(-50%);
    z-index:99;
    outline:none!important;
}
.btn-slick-nav:before{
    content:"";
    position: absolute;
    top:-10px;
    left:-10px;
    width:90px;
    height:90px;
    border-radius:50%;
    border:2px dashed #fff4;
    animation:circleRotate 30s linear infinite;
}
.btn-slick-nav.slick-next{
    left:auto;
    right:50px;
}
.section-auction .image-left{
    margin-left:-3vw;
    margin-top:-20vh;
    position: relative;
}
.section-auction .image-left .bird{
    position: absolute;
    top:0;
    left:0;
    transform: translate(50%, -50%);
}
.section-auction .image-left .auction-shape{
    position: absolute;
    top:0;
    right:0;
    transform: translate(50%, -50%);
    z-index:-1;
}
.section-auction .image-left .action{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index:10;
    margin-top:-20vh;
}
.btn-info-play i{
    width:80px;
    height:80px;
    line-height: 80px;
    border:1px solid #fff;
    background:#fffa;
    color:#333;
    border-radius:50%;
    display: inline-block;
    margin-right:20px;
    position: relative;
    transition: .5s ease;
}
.btn-info-play i:after{
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:80px;
    height:80px;
    border-radius:50%;
    background:var(--accent-color);
    z-index:-1;
    transition: .5s ease;
    transform: scale(0);
    transform-origin: center;
}
.section-auction .image-left .action .btn-info-play:hover i:after{
    transform:scale(1)
}
.section-auction .image-right{
    margin-right:-3vw;
    margin-top:10vh;
}

@media (max-width: 768px){
    .section-intro-grid{
        height:auto;
        grid-template-columns: 50vw 50vw;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            'intro-grid-1 intro-grid-1'
            'intro-grid-2 intro-grid-2'
            'intro-grid-3 intro-grid-4'
            'intro-grid-6 intro-grid-5'
        ;
    }
    .section-intro-grid{
        grid-template-columns: 100vw;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            'intro-grid-1'
            'intro-grid-2'
            'intro-grid-3'
            'intro-grid-4'
            'intro-grid-5'
            'intro-grid-6'
        ;
    }
}