/* Basic */
.component_grid-slider { padding: 40px; background: url('assets/bg.png') 75% 50% / cover no-repeat; }
.component_grid-slider .h1 { margin: 0; }
.component_grid-slider .h1 div { color: #b0d400; }

/* Slider */
.component_grid-slider .slider { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; overflow: hidden; display: none; }

/* Slider Slide */
.component_grid-slider .slider > div { pointer-events: none; position: absolute; width: 100%; height: 100%; transition: transform 1s cubic-bezier(0.310, 1.370, 0.630, 1.005), visibility 0s linear 0s; will-change: transform; }
.component_grid-slider .slider > div > * { position: absolute; }
.component_grid-slider .slider > .left { transform: translate(-100%, 0) scale(0.8); visibility: hidden; transition-delay: 0s, 1s; }
.component_grid-slider .slider > .active { opacity: 1; visibility: visible; transform: translate(0, 0) scale(1.0); }
.component_grid-slider .slider > .right { transform: translate(100%, 0) scale(0.8); transition-delay: 0s, 1s; visibility: hidden; }

/* Logos */
.component_grid-slider .logos { margin-top: 25px; position: relative; display: block; }
.component_grid-slider .logos img { position: absolute; max-width: 200px; max-height: 100px; background: 50% 50% / contain no-repeat; opacity: 0; transition: opacity 0.5s; }

/* Arrows */
.component_grid-slider .slider > a { display: block; position: absolute; top: 0; width: 15%; height: 100%; }
.component_grid-slider .slider > a:first-of-type {
    left: 0;
    background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50' height='50'%3e%3cpath transform='rotate(90, 25, 25)' d='M4,4 l21,21 l21,-21' fill='none' stroke='%23E5E5E5' stroke-width='8' stroke-linecap='round'/%3e%3c/svg%3e") 15px center no-repeat;
}
.component_grid-slider .slider > a:last-of-type {
    right: 0;
    background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='50' height='50'%3e%3cpath transform='rotate(-90, 25, 25)' d='M4,4 l21,21 l21,-21' fill='none' stroke='%23E5E5E5' stroke-width='8' stroke-linecap='round'/%3e%3c/svg%3e") calc(100% - 15px) center no-repeat;
}

/* Slider Images */
.component_grid-slider .slider > div > img { pointer-events: none; }
.component_grid-slider .slider > div > img.shadow { box-shadow: 0px 0px 80px rgba(0,0,0,0.15); }

/* Navigation Dots */
.component_grid-slider .slider > span { position: absolute; width: 100%; left: 0; bottom: 40px; display: block; text-align: center; }
.component_grid-slider .slider > span a { display: inline-block; width: 20px; height: 20px; border: 3px solid #b0d400; border-radius: 100%; margin: 0 5px; cursor: pointer; }
.component_grid-slider .slider > span a.active { background: #b0d400; }

/* Information Points */
.component_grid-slider .slider > div > div { width: 30px; height: 30px; border-radius: 100%; border: 3px #000 solid; pointer-events: all; transform: perspective(1px); }
.component_grid-slider .slider > div > div::before { content: ""; position: absolute; left: -4px; top: -4px; width: 28px; height: 28px; border: 2px #000 solid; opacity: 0.33; border-radius: 100%; transform: scale(1.4); animation: grid-slider-infopoint 1s infinite; will-change: transform, opacity; pointer-events: none; }
.component_grid-slider .slider > div > div::after { content: "i"; font-size: 20px; font-weight: bold; position: absolute; line-height: 26px; vertical-align: middle; text-align: center; width: 24px; height: 24px; }
.component_grid-slider .slider > div > div.sticky::before,
.component_grid-slider .slider > div > div:hover::before { display: none; }
.component_grid-slider .slider > div > div.sticky::after,
.component_grid-slider .slider > div > div:hover::after { color: #fff !important; }

/* Text Box */
.component_grid-slider .slider > div > div > div { position: absolute; visibility: hidden; width: 250px; pointer-events: none; transition: visibility 0s linear 0.5s; }
.component_grid-slider .slider > div > div > div > * { opacity: 0; transform: translate(0, -20px); transition: transform 0.125s ease-out, opacity 0.125s ease-out; }

/* Textbox hover */
.component_grid-slider .slider > div > div.sticky > div > *,
.component_grid-slider .slider > div > div:hover > div > * { transform: translate(0, 0); opacity: 1; transition: transform 0.25s ease-in, opacity 0.25s ease-in; }
.component_grid-slider .slider > div > div.sticky > div > .h3,
.component_grid-slider .slider > div > div:hover > div > .h3 { transform: translate(0, calc(-100% + 2px)); }
.component_grid-slider .slider > div > div.sticky > div,
.component_grid-slider .slider > div > div:hover > div { visibility: visible; transition-delay: 0s; }
.component_grid-slider .slider > div > div > div .h3 { border-bottom: 2px solid #000; width: 100%; transform: translate(0, -200%); }
.component_grid-slider .slider > div > div > div .h3 > span { display: block; padding-bottom: 5px;     font-weight: 600; }
.component_grid-slider .slider > div > div > div p { margin-top: 0; position: absolute; top: 35px; }

.component_grid-slider .slider > div > div:hover > div > *:nth-child(1) { transition-delay: 0s; }
.component_grid-slider .slider > div > div:hover > div > *:nth-child(2) { transition-delay: 0.1s; }
.component_grid-slider .slider > div > div:hover > div > *:nth-child(3) { transition-delay: 0.2s; }
.component_grid-slider .slider > div > div > div > *:nth-child(1) { transition-delay: 0.2s; }
.component_grid-slider .slider > div > div > div > *:nth-child(2) { transition-delay: 0.1s; }
.component_grid-slider .slider > div > div > div > *:nth-child(3) { transition-delay: 0s; }

/* Connector Line */
.component_grid-slider .slider > div > div > div .line { position: absolute; top: 0; }
.component_grid-slider .slider > div > div > div .right { left: 100%; transform-origin: 0 0; }
.component_grid-slider .slider > div > div > div .left { right: 100%; transform-origin: 100% 0; }

@keyframes grid-slider-infopoint {
    to { transform: scale(1); opacity: 1; }
}

/* Mobile */

@media (max-width: 979px ) {
    .component_grid-slider .h1 {
        text-shadow: -3px -3px 3px #FFFFFF, 3px -3px 3px #FFFFFF, 3px 3px 3px #FFFFFF, -3px 3px 3px #FFFFFF;
    }
    .component_grid-slider .slider {
        position: relative;
        margin-left: -40px;
        margin-right: -40px;
        transform-origin: 0 0;
    }
    .component_grid-slider .slider > span {
        transform-origin: 50% 0;
    }
    .component_grid-slider .slider > a:first-of-type {
        transform-origin: 20% 50%;
    }
    .component_grid-slider .slider > a:last-of-type {
        transform-origin: 80% 50%;
    }
}