:root {
        --primary: #6B8E23;
        --secondary: #695ace;
        --secondary-alt: #dbeaf7;
        --secondary-alt2: #7facd3;
        --tertiary: #eeab36;
        --teritary-alt: #f9f6ef;
        --quarternary: #6B8E23;
        --ff-primary: "Dongle", sans-serif;
        --ff-secondary: "Paytone One", sans-serif;
        --section-divider-height: 60;
        --section-divider-width: 1920;
        --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--ff-secondary);
    }

    p,
    a,
    span,
    li {
        font-family: var(--ff-primary);
        font-size: 1.5em;
        line-height: 1;
    }

    a {
        text-decoration: none;
    }

    html {
        overflow-x: hidden;
    }

    .py-3 {
        /*slight adjust for font used*/
        padding-bottom: 0.8rem !important;
    }

    .z-1 {
        z-index: 10;
    }

    .z-2 {
        z-index: 20;
    }

    .z-3 {
        z-index: 30;
    }

    .z-9 {
        z-index: 999999;
    }

    .o-cover {
        object-fit: cover !important;
    }

    .min-h-inherit {
        min-height: inherit;
    }

    .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flip-h {
        transform: scale(-1);
    }

    .img-zoom img {
        transform: scale(1);
        transition: transform 1s;
    }

    .img-zoom img:hover {
        transform: scale(1.3);
        transition: transform 1s;
    }

    .social {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************************
*************BG**************
****************************/
    .bg-primary {
        background-color: var(--primary) !important;
    }

    .bg-secondary {
        background-color: var(--secondary) !important;
    }

    .bg-tertiary {
        background-color: var(--tertiary) !important;
    }

    .bg-quarternary {
        background-color: var(--quarternary) !important;
    }

    .bg-alt-1 {
        background-color: var(--secondary-alt) !important;
    }

    .bg-alt-2 {
        background-color: var(--teritary-alt) !important;
    }

    .bg-fb {
        background-color: #3b5998;
    }

    .bg-tw {
        background-color: #38a1f2;
    }

    .bg-yt {
        background-color: #cd201e;
    }

    .bg-lin {
        background-color: #2877b5;
    }

    /****************************
*************BORDER**************
****************************/
    .border-primary {
        border-color: var(--primary) !important;
    }

    .border-secondary {
        border-color: var(--secondary) !important;
    }

    .border-tertiary {
        border-color: var(--tertiary) !important;
    }

    .border-quarternary {
        border-color: var(--quarternary) !important;
    }

    .border-alt-1 {
        border-color: var(--secondary-alt) !important;
    }

    .border-alt-2 {
        border-color: var(--teritary-alt) !important;
    }

    /****************************
************TEXT*************
****************************/
    .text-primary {
        color: var(--primary) !important;
    }

    .text-secondary {
        color: var(--secondary) !important;
    }

    .text-tertiary {
        color: var(--tertiary) !important;
    }

    .text-quarternary {
        color: var(--quarternary) !important;
    }

    /****************************
************FONT*************
****************************/
    .font-primary {
        font-family: var(--ff-primary) !important;
    }

    .font-secondary {
        font-family: var(--ff-secondary) !important;
    }

    /****************************
***********HOVER*************
****************************/
    .hover-dark:hover {
        background-color: #333 !important;
        color: white !important;
        transition: background-color 0.25s, white 0.25s;
    }

    .has-divider {
        position: relative;
        padding-bottom: var(--section-divider-ratio);
    }

    .section-divider {
        display: block;
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: auto;
    }

    /****************************
************BLOB*************
****************************/
    .blob {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg' height='500' width='500' %3E%3Cpath fill='%23FFFFFF' d='M72.3,-23.7C81.6,5.2,68.8,41.1,46.2,55.6C23.7,70.1,-8.6,63.2,-28,47.1C-47.3,31.1,-53.7,5.8,-46.9,-19.7C-40,-45.2,-20,-71,5.7,-72.8C31.5,-74.7,62.9,-52.7,72.3,-23.7Z' transform='translate(100 100)' /%3E%3C/svg%3E");
        width: 400px;
        height: 400px;
        position: absolute;
    }

    /****************************
*********NAVIGATION**********
****************************/
    nav li a {
        margin: 0;
        border-radius: 20px;
        padding: 10px 15px !important;
        background-color: transparent;
        color: #333;
        transition: background-color 0.25s, color 0.25s;
    }

    .nav-link {
        font-size: 18px;
    }

    nav li a:hover {
        background-color: var(--primary) !important;
        color: white !important;
        padding: 10px 20px;
        transition: background-color 0.25s, color 0.25s;
    }

    .longclouds {
        left: -20%;
        width: 125% !important;
    }

    /*MULTI-ITEM CAROUSEL*/
    @media (max-width: 767px) {
        .multi-slide .carousel-inner .carousel-item>div {
            display: none;
        }

        .multi-slide .carousel-inner .carousel-item>div:first-child {
            display: block;
        }
    }

    .multi-slide .carousel-inner .carousel-item.active,
    .multi-slide .carousel-inner .carousel-item-next,
    .multi-slide .carousel-inner .carousel-item-prev {
        display: flex;
    }

    /* medium and up screens */
    @media (min-width: 768px) {

        .multi-slide .carousel-inner .carousel-item-end.active,
        .multi-slide .carousel-inner .carousel-item-next {
            transform: translateX(33.33333%);
        }

        .multi-slide .carousel-inner .carousel-item-start.active,
        .multi-slide .carousel-inner .carousel-item-prev {
            transform: translateX(-33.33333%);
        }
    }

    .multi-slide .carousel-inner .carousel-item-end,
    .multi-slide .carousel-inner .carousel-item-start {
        transform: translateX(0);
    }

    /****************************
***********BUTTON************
****************************/
    .cloud-btn-container {
        position: relative;
        width: 100px;
        height: 50px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6vh;
        overflow: hidden;
        border: 1px solid;
        font-weight: 300;
        font-size: 20px;
        transition: 0.5s;
        letter-spacing: 1px;
        border-radius: 8px;
    }

    .cloud-btn-container button {
        width: 101%;
        height: 100%;
        font-weight: 300;
        font-size: 11px;
        letter-spacing: 1px;
        font-weight: bold;
        background: #000;
        -webkit-mask: url("clientfiles/stu-daycare-1/images/clouds-top.svg");
        mask: url("clientfiles/stu-daycare-1/images/clouds-top.svg");
        -webkit-mask-size: 2500% 100%;
        mask-size: 2500% 100%;
        border: none;
        color: #fff;
        cursor: pointer;
        -webkit-animation: ani2 1s steps(5) forwards;
        animation: ani2 1s steps(5) forwards;
    }

    .cloud-btn-container button:hover .cloud-btn-container {
        background-color: #000 !important;
    }

    .cloud-btn-container button:hover {
        -webkit-animation: ani 1s steps(22) forwards;
        animation: ani 1s steps(22) forwards;
    }

    .rotate {
        transform: rotate(25deg) !important;
    }

    .spin {
        position: absolute;
        z-index: 9;
        animation-name: spin;
        animation-duration: 15000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .pulsate {
        position: absolute;
        z-index: 9;
        animation: zoom-in-zoom-out 10s ease infinite;
    }

    .slide-in-blurred-br {
        -webkit-animation: slide-in-blurred-br 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
        animation: slide-in-blurred-br 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
    }

    .fade-out {
        -webkit-animation: fade-out 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
        animation: fade-out 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
    }

    .slide-in-blurred-tl {
        -webkit-animation: slide-in-blurred-tl 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
        animation: slide-in-blurred-tl 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
    }

    .slide-in-bottom {
        -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .single-cloud-top,
    .single-cloud-bottom {
        width: 25%;
    }

    .single-cloud-top {
        top: 0;
        right: -10px;
    }

    .single-cloud-bottom {
        bottom: -50px;
        left: -10px;
    }

    @media (max-width: 991px) {

        .single-cloud-top,
        .single-cloud-bottom {
            width: 75%;
        }

        .single-cloud-top {
            top: -35px;
            right: -10px;
        }

        .single-cloud-bottom {
            bottom: -75px;
            left: -35px;
        }
    }

    @keyframes zoom-in-zoom-out {
        0% {
            transform: scale(1, 1);
        }

        50% {
            transform: scale(1.2, 1.2);
        }

        100% {
            transform: scale(1, 1);
        }
    }

    @-webkit-keyframes ani {
        from {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }

        to {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }
    }

    @keyframes ani {
        from {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }

        to {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }
    }

    @-webkit-keyframes ani2 {
        from {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }

        to {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }
    }

    @keyframes ani2 {
        from {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }

        to {
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes slide-in-blurred-tl {
        0% {
            -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg);
            transform: translate(-1000px, -1000px) skew(80deg, 10deg);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            -webkit-filter: blur(40px);
            filter: blur(40px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translate(0, 0) skew(0deg, 0deg);
            transform: translate(0, 0) skew(0deg, 0deg);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-blurred-tl {
        0% {
            -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg);
            transform: translate(-1000px, -1000px) skew(80deg, 10deg);
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            -webkit-filter: blur(40px);
            filter: blur(40px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translate(0, 0) skew(0deg, 0deg);
            transform: translate(0, 0) skew(0deg, 0deg);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    @-webkit-keyframes slide-in-blurred-br {
        0% {
            -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg);
            transform: translate(1000px, 1000px) skew(80deg, 10deg);
            -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
            -webkit-filter: blur(40px);
            filter: blur(40px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translate(0, 0) skew(0deg, 0deg);
            transform: translate(0, 0) skew(0deg, 0deg);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-blurred-br {
        0% {
            -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg);
            transform: translate(1000px, 1000px) skew(80deg, 10deg);
            -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
            -webkit-filter: blur(40px);
            filter: blur(40px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translate(0, 0) skew(0deg, 0deg);
            transform: translate(0, 0) skew(0deg, 0deg);
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-filter: blur(0);
            filter: blur(0);
            opacity: 1;
        }
    }

    @keyframes fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @-webkit-keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }