.berlonia-hero-slider{
    position:relative;
    height:100dvh;
    overflow:hidden;
    background:#000; 
}

.berlonia-hero-slider nav,
.header_knx{
    /*position:relative;/**/
    z-index:10;
}

.berlonia-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transform:scale(1);
    animation:berloniaFadeZoom 56s infinite;
}

.berlonia-slide-1{
    background-image:url("/images/header/berlonia_timeless.png");
    animation-delay:0s;
}

.berlonia-slide-2{
    background-image:url("/images/header/berlonia_passion.png");
    animation-delay:-48s;
}

.berlonia-slide-3{
    background-image:url("/images/header/berlonia_emotional.png");
    animation-delay:-40s;
}

.berlonia-slide-4{
    background-image:url("/images/header/berlonia_harmony.png");
    animation-delay:-32s;
}

.berlonia-slide-5{
    background-image:url("/images/header/berlonia_unique.png");
    animation-delay:-24s;
}

.berlonia-slide-6{
    background-image:url("/images/header/berlonia_experience.png");
    animation-delay:-16s;
}

.berlonia-slide-7{
    background-image:url("/images/header/berlonia_beyond.jpg");
    animation-delay:-8s;
}


.berlonia-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

.header_title_01,
.header_title_02,
.header_title_03,
.header_title_04,
.header_title_05,
.header_title_06,
.header_title_07{
    position:absolute;
    z-index:2;
    opacity:0;
    animation:berloniaTextFade 56s infinite;
}

.header_title_01{ animation-delay:0s; }
.header_title_02{ animation-delay:-48s; }
.header_title_03{ animation-delay:-40s; }
.header_title_04{ animation-delay:-32s; }
.header_title_05{ animation-delay:-24s; }
.header_title_06{ animation-delay:-16s; }
.header_title_07{ animation-delay:-8s; }

@keyframes berloniaFadeZoom{
    0%{
        opacity:0;
        transform:scale(1);
    }
    2%{
        opacity:1;
    }
    12%{
        opacity:1;
    }
    14.28%{
        opacity:0;
        transform:scale(1.08);
    }
    100%{
        opacity:0;
        transform:scale(1.08);
    }
}

@keyframes berloniaTextFade{
    0%{
        opacity:0;
        filter:blur(10px);
        transform:translateY(60px);
    }

    3%{
        opacity:1;
        filter:blur(0px);
        transform:translateY(0);
    }

    11%{
        opacity:1;
        filter:blur(0px);
        transform:translateY(0);
    }

    14%{
        opacity:0;
        filter:blur(6px);
        transform:translateY(-60px);
    }

    100%{
        opacity:0;
        filter:blur(6px);
        transform:translateY(-80px);
    }
}
}