:root {
    --md: 768px;
    --lg: 1024px;
    --orange: #ee4022;
}

/**
 * Typography
 */

/* List Style Type */
.list-none {
    list-style-type: none;
}

/* text align */
.text-center {
    text-align: center;
}

/* text color */
.text-orange {
    color: var(--orange);
}

/* font size */
.text-lg {
    font-size: 1.125rem; /* 18px */
}
.text-xl {
    font-size: 1.25rem; /* 20px */
}

/* font weight */
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.font-bold {
    font-weight: 700;
}

/**
 * Layout
 */

/* display */
.flex {
    display: flex;
}
.grid {
    display: grid;
}
.block {
    display: block;
}

/**
 * Sizing
 */

/* width */
.w-full {
    width: 100%;
}
.w-1\/3 {
    width: 33.333333%;
}

/* height */
.h-auto {
    height: auto;
}

/**
 * Flexbox & Grid
 */

/* flex wrap */
.flex-wrap {
    flex-wrap: wrap;
}

/* justify content */
.justify-center {
    justify-content: center;
}

/* grid template columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* gap */
.gap-1\.5 {
    gap: 0.375rem; /* 6px */
}
.gap-4 {
    gap: 1rem; /* 16px */
}
.gap-6	{
    gap: 1.5rem; /* 24px */
}
.gap-12	{
    gap: 3rem; /* 48px */
}

/**
 * Spacing
 */

/* Margin */
.m-0 {
    margin: 0px;
}
.mb-4 {
    margin-bottom: 1rem; /* 16px */
}
.mb-8 {
    margin-bottom: 2rem; /* 32px */
}
.mb-16 {
    margin-bottom: 4rem; /* 64px */
}

/* padding */
.p-0 {
    padding: 0px;
}
.p-5 {
    padding: 1.25rem; /* 20px */
}
.p-8 {
    padding: 2rem; /* 32px */
}

/**
 * Media query
 */
@media (min-width: 768px) {
    /**
    * Typography
    */

    /* List Style Type */
    .md\:list-none {
        list-style-type: none;
    }

    /* text align */
    .md\:text-center {
        text-align: center;
    }

    /* font size */
    .md\:text-lg {
        font-size: 1.125rem; /* 18px */
    }
    .md\:text-xl {
        font-size: 1.25rem; /* 20px */
    }

    /**
    * Flexbox & Grid
    */

    /* grid template columns */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* gap */
    .md\:gap-1\.5 {
        gap: 0.375rem; /* 6px */
    }
    .md\:gap-4 {
        gap: 1rem; /* 16px */
    }
    .md\:gap-12	{
        gap: 3rem; /* 48px */
    }

    /**
    * Spacing
    */

    /* Margin */
    .md\:mb-8 {
        margin-bottom: 2rem; /* 32px */
    }
    .md\:mb-16 {
        margin-bottom: 4rem; /* 64px */
    }

    /* padding */
    .md\:p-0 {
        padding: 0px;
    }
    .md\:p-5 {
        padding: 1.25rem; /* 20px */
    }
    .md\:p-8 {
        padding: 2rem; /* 32px */
    }
}

@media (min-width: 1024px) {
    /**
    * Typography
    */

    /* List Style Type */
    .lg\:list-none {
        list-style-type: none;
    }

    /* text align */
    .lg\:text-center {
        text-align: center;
    }

    /* font size */
    .lg\:text-lg {
        font-size: 1.125rem; /* 18px */
    }
    .lg\:text-xl {
        font-size: 1.25rem; /* 20px */
    }

    /**
    * Flexbox & Grid
    */

    /* grid template columns */
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /**
    * Spacing
    */

    /* Margin */
    .lg\:mb-8 {
        margin-bottom: 2rem; /* 32px */
    }
    .lg\:mb-16 {
        margin-bottom: 4rem; /* 64px */
    }

    /* padding */
    .lg\:p-0 {
        padding: 0px;
    }
    .lg\:p-5 {
        padding: 1.25rem; /* 20px */
    }
    .lg\:p-8 {
        padding: 2rem; /* 32px */
    }
}


/**
 * Projects
 */
.project .project__filter a {
    position: relative;
    font-size: 18px;
    color: #4A4A4A;
}
    .project .project__filter a:hover:after,
    .project .project__filter a.active:after {
        position: absolute;
        left: 0;
        bottom: -6px;
        background-color: #2BABA7;
        width: 100%;
        height: 4px;
        content: "";
    }

.scroller-status {
    margin-top: 32px;
}
    .scroller-status .loader-ellips {
        position: relative;
        width: 4em;
        height: 1em;
        margin: 10px auto;
        font-size: 20px;
        display: none
    }

    .scroller-status .loader-ellips__dot {
        display: block;
        width: 1em;
        height: 1em;
        border-radius: .5em;
        background: #555;
        position: absolute;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        -o-animation-timing-function: ease;
        animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    .scroller-status .loader-ellips__dot:nth-child(1) {
        left: 0;
        -webkit-animation-name: reveal;
        -moz-animation-name: reveal;
        -o-animation-name: reveal;
        animation-name: reveal
    }

    .scroller-status .loader-ellips__dot:nth-child(2),
    .scroller-status .loader-ellips__dot:nth-child(3) {
        -webkit-animation-name: slide;
        -moz-animation-name: slide;
        -o-animation-name: slide;
        animation-name: slide
    }

    .scroller-status .loader-ellips__dot:nth-child(3) {
        left: 1.5em
    }

    .scroller-status .loader-ellips__dot:nth-child(4) {
        left: 3em;
        -webkit-animation-name: reveal;
        -moz-animation-name: reveal;
        -o-animation-name: reveal;
        animation-name: reveal;
        -webkit-animation-direction: reveal;
        -moz-animation-direction: reveal;
        -o-animation-direction: reveal;
        animation-direction: reverse
    }

    @keyframes slide {
        to {
            transform: translateX(1.5em)
        }
    }

/* .load-more {} */
    .load-more .view-more-btn {
        font-weight: 500;
        font-size: 18px;
        color: #EE4022;
    }

    .load-more .arrow {
        margin: 0 auto;
        width: 18px;
        height: 18px;
        border-right: 2px solid #EE4022;
        border-bottom: 2px solid #EE4022;
        display: block;
        content: "";
        -webkit-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out
    }

    .load-more .arrow.dropdown {
        transform: rotate(45deg)
    }


/**
 * Card
 */
.blog-card {
    background-color: #F3F6F6;

    .categories {
        padding: 6px 12px;
        background-color: hsl(178deg 60% 42% / 15%);
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        color: #1F457C;
        border-radius: 10rem;
        display: inline-block;
    }
}