@cache-version: `(new Date()).getTime()`;

.splide__arrows {
    display: none;
}

.splide {
    width: 100%;
    margin: auto;
}

.splide__track {
    width: 100%;
}

.splide__list {
    width: 100%;
}

.splide__slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#splide>.splide__track {
    /* height: 100vh!important; */
}

.splide__slide.slide1 {
    background-image: url(../media/03ae91.jpg?version=@{cache-version});
    padding-left: 140px;
}

.splide__slide.slide2 {
    background-image: url(../media/01ae91.jpg?version=@{cache-version});
    padding-right: 140px;
    align-items: flex-end;
}

.splide__pagination__page {
    background: #575757;
    width: 15px;
    height: 15px;
    opacity: 1;
    margin: 5px 3px;
}

.splide__pagination__page.is-active {
    background: #91ad41;
    opacity: 1;
    -webkit-animation: paginationAnimation 2.0s 0.5s infinite;
    -moz-animation: paginationAnimation 2.0s 0.5s infinite;
    animation: paginationAnimation 2.0s 0.5s infinite;
}

@-webkit-keyframes paginationAnimation {
    20% {
        -webkit-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2);
    }

    50% {
        -webkit-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4), 0px 0px 0px 5px rgba(145, 173, 65, .2);
    }
}

@keyframes paginationAnimation {
    20% {
        box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2);
    }

    50% {
        box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4);
    }

    100% {
        box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4), 0px 0px 0px 5px rgba(145, 173, 65, .2);
    }
}

@-moz-keyframes paginationAnimation {
    20% {
        -moz-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2);
    }

    50% {
        -moz-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4);
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0.5px rgba(145, 173, 65, .2), 0px 0px 0px 2px rgba(145, 173, 65, .4), 0px 0px 0px 5px rgba(145, 173, 65, .2);
    }
}

.splide-text {
    font-weight: 400;
    font-size: 70px;
    font-family: 'Bad Script', cursive;
    /* max-width: 350px;
    text-align: center; */
    color: #91ad41;
    text-align: left;
}

.splide-description {
    font-weight: 600;
    max-width: 500px;
    /* text-align: center; */
}

.slide2 .splide-description {
    text-align: end;
    max-width: 520px;
}

.splide-button {
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #91ad41;
    border-width: 1px;
    color: #fff;
    background-color: #91ad41;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 15px;
    max-width: 200px;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    transition: all 0.5s ease-in-out;
}

#splideProducts .splide__pagination,
#splideHistory .splide__pagination,
#splideBulkProducts .splide__pagination {
    display: none;
}

.splide-button:hover {
    color: #575757;
    border: 1px solid #575757;
    background-color: #fff;
    transition: all 0.5s ease-in-out;
}

#splideProducts .splide__arrows,
#splideBulkProducts .splide__arrows {
    display: block;
}

#splideProducts .splide__arrow,
#splideBulkProducts .splide__arrow {
    width: 40px;
    height: 40px;
    opacity: 0.9;
    transition: all 0.2s ease-in-out;
}

#splideProducts .splide__arrow:hover,
#splideBulkProducts .splide__arrow:hover {
    background: #91ad41;
    opacity: 0.9;
    transition: all 0.2s ease-in-out;
}

.splide__arrow--next {
    right: -5em;
}

.splide__arrow--prev {
    left: -5em;
}

.fa {
    color: white;
    font-size: 20px;
}

/* HISTORY */
#splideHistory .splide__arrows {
    display: block;
}

#splideHistory .splide__arrow {
    width: 40px;
    height: 40px;
    opacity: 0.9;
    background-color: #bfe0c7;
    /* border: 1px solid #fff; */
    transition: all 0.2s ease-in-out;
    top: 83px;
}

#splideHistory .splide__arrows>.splide__arrow--next {
    right: 0;
}

#splideHistory .splide__arrows>.splide__arrow--prev {
    left: 0;
}

#splideHistory .splide__slide {
    padding-bottom: unset;
    justify-content: unset;
}

#splideHistory .splide__track {
    padding-top: 50px;
}

hr {
    height: 10px;
    background-color: #bfe0c7;
    border: none;
    width: 100%;
    position: absolute;
    top: 78px;
}

.slide-circle {
    align-items: center;
}

.splide-year-wrapper {
    position: relative;
    display: inline-block;
    zoom: 1;
    max-width: 70px;
    width: 100%;
    max-height: 70px;
    height: 100%;
    line-height: 70px;
    cursor: pointer;
    border-radius: 100%;
    text-align: center;
}

.splide-year {
    max-width: 70px;
    width: 100%;
    max-height: 70px;
    height: 100%;
    line-height: 70px;
    background-color: rgba(89, 204, 166);
    border-radius: 100%;
    text-align: center;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    -webkit-animation: ripple2 2.0s 0.5s infinite;
    animation: ripple2 2.0s 0.5s infinite;
    -moz-animation: ripple2 2.0s 0.5s infinite;
}

@-webkit-keyframes ripple {
    20% {
        -webkit-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5);
    }

    50% {
        -webkit-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3), 0px 0px 0px 22px rgba(145, 173, 65, .3);
    }
}

@keyframes ripple {
    20% {
        box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5);
    }

    50% {
        box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3);
    }

    100% {
        box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3), 0px 0px 0px 22px rgba(145, 173, 65, .3);
    }
}

@-moz-keyframes ripple {
    20% {
        -moz-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5);
    }

    50% {
        -moz-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3);
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 6px rgba(145, 173, 65, .3), 0px 0px 0px 8px rgba(145, 173, 65, .5), 0px 0px 0px 14px rgba(145, 173, 65, .3), 0px 0px 0px 22px rgba(145, 173, 65, .3);
    }
}

@-webkit-keyframes ripple2 {
    20% {
        -webkit-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3);
    }

    50% {
        -webkit-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3);
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3), 0px 0px 0px 10px rgba(89, 204, 166, .3);
    }
}

@-moz-keyframes ripple2 {
    20% {
        -moz-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3);
    }

    50% {
        -moz-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3);
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3), 0px 0px 0px 10px rgba(89, 204, 166, .3);
    }
}

@keyframes ripple2 {
    20% {
        box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3);
    }

    50% {
        box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3);
    }

    100% {
        box-shadow: 0px 0px 0px 4px rgba(89, 204, 166, .3), 0px 0px 0px 6px rgba(89, 204, 166, .3), 0px 0px 0px 10px rgba(89, 204, 166, .3);
    }
}

.slide-circle.is-active .splide-year-wrapper>.splide-year {
    background-color: rgba(145, 173, 65, .9);
    animation: ripple 2.0s 0.2s infinite;
    -webkit-animation: ripple 2.0s 0.2s infinite;
    -moz-animation: ripple 2.0s 0.2s infinite;
    transition: all 0.2s ease-in-out;
}

.slide-circle.is-active>.year-achievement {
    opacity: 1;
}

.year-achievement {
    padding: 20px;
    border: 1px solid #c8c8d4;
    background-color: #f5f6fb;
    position: relative;
    margin-top: 30px;
    opacity: 0;
    font-size: 14px;
    min-width: 500px;
    width: 100%;
}

.year-achievement:before {
    border-style: solid;
    border-width: 10px;
    border-color: transparent;
    border-bottom-color: #c8c8d4;
}

.year-achievement:after {
    border-style: solid;
    border-width: 11px;
    border-color: transparent;
    border-bottom-color: #f5f6fb;
}

.year-achievement:after,
.year-achievement:before {
    z-index: 1;
    content: '';
    position: absolute;
    left: 50%;
    top: -20px;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media screen and (max-width: 1700px) {
    .splide__arrow--next {
        right: 0
    }

    .splide__arrow--prev {
        left: 0
    }
}

@media screen and (max-width: 1000px) {
    .splide__slide.slide1 {
        background-position: right;
        padding-left: 0;
    }

    .splide__slide.slide2 {
        background-position: left;
        padding-right: 0;
        align-items: center;
    }

    .splide__slide {
        justify-content: flex-end;
        padding-bottom: 70px;
        align-items: center;
    }

    #splideProducts .splide__slide,
    #splideBulkProducts .splide__slide {
        padding-bottom: 0px;
    }
}

.hero {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(../media/03ae91.jpg?version=@{cache-version});
    padding-left: 140px;
    width: 100%;
    height: 85vh;
}

.hero-wrapper {
    max-width: 1600px;
    width: 100%;
    margin: auto;
    padding: 50px 0;
}

.hero-inner-wrapper {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.splide-text {
    font-weight: 400;
    font-size: 40px;
    font-family: 'Bad Script', cursive;
    /* max-width: 350px;
        text-align: center; */
    color: #91ad41;
    text-align: left;
}

.splide-description {
    font-weight: 600;
    max-width: 500px;
    /* text-align: center; */
}

@media screen and (max-width:1000px) {
    .hero {
        background-position: top;
        background-size: contain;
        justify-content: flex-end;
        background-color: #fff;
        padding-left: 0;
    }

    .splide-text,
    .splide-description {
        text-align: center;
        padding: 0 15px;
        margin: auto;
    }

    .splide-text {
        font-size: 45px;
        margin: 150px 50px 50px 50px;
    }

    .splide-button{
        margin: 20px auto auto;
    }

}

@media screen and (max-width: 900px) {
    .splide__slide.slide1 {
        background-position: top;
        background-size: contain;
        justify-content: flex-end;
        background-color: #fff;
    }

    .splide__slide.slide2 {
        background-position: top;
        background-size: cover;
        justify-content: flex-end;
        background-color: #fff;
    }

    .splide-text,
    .splide-description,
    .slide2 .splide-description {
        text-align: center;
        padding: 0 15px;
    }

    .splide-text {
        font-size: 45px;
        margin: 150px 50px 50px 50px;
    }

    #splide>.splide__pagination {
        bottom: 25px;
    }

    .splide__pagination__page {
        margin: 3px 5px;
    }

    .year-achievement {
        min-width: unset;
        width: unset;
    }
}

@media screen and (max-width: 500px) {
    .splide-text {
        font-size: 40px;
        margin: 150px 25px 50px 25px;
        justify-content: flex-start;
    }
    .splide-text>br{
        display: none;
    }
}

@media screen and (max-width: 400px) {
    .splide-text {
        font-size: 40px;
        margin: 150px 25px 50px 25px;
        justify-content: flex-start;
    }

    #splide>.splide__pagination {
        bottom: 10px;
    }
}