:root {
    --font-1: "Nunito Sans", sans-serif;
    --font-2: "Montserrat", sans-serif;

    /* monospace
     */
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

@font-face {
    font-family:'Poppins-SemiBold';
    src: url(../fonts/Poppins-SemiBold.ttf);
}
:root {

    /* color-1(#d9083c)
     * color-2(#eb5e55)
     * color-3(#f2d0a4)
     */
    --color-1: #dd4027;
    --color-2: #bca064;
    --color-3: #593f34;

    /* theme color variations
     */
    --color-1-lighter: hsla(345, 93%, 64%, 1);
    --color-1-light  : hsla(345, 93%, 54%, 1);
    --color-1-dark   : hsla(345, 93%, 34%, 1);
    --color-1-darker : hsla(345, 93%, 24%, 1);
    --color-2-lighter: hsla(4, 79%, 83%, 1);
    --color-2-light  : hsla(4, 79%, 73%, 1);
    --color-2-dark   : hsla(4, 79%, 53%, 1);
    --color-2-darker : hsla(4, 79%, 43%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675),
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error          : hsla(359, 100%, 91%, 1);
    --color-success        : hsla(76, 69%, 68%, 1);
    --color-info           : hsla(205, 82%, 91%, 1);
    --color-notice         : hsla(51, 100%, 80%, 1);
    --color-error-content  : hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content   : hsla(205, 32%, 31%, 1);
    --color-notice-content : hsla(51, 30%, 30%, 1);

    /* shades
     * generated using
     * Tint & Shade Generator
     * (https://maketintsandshades.com/)
     */
    --color-black  : #000000;
    --color-gray-19: #0b0b0c;
    --color-gray-18: #161719;
    --color-gray-17: #202225;
    --color-gray-16: #2b2e32;
    --color-gray-15: #363a3f;
    --color-gray-14: #41454b;
    --color-gray-13: #4c5158;
    --color-gray-12: #565c64;
    --color-gray-11: #616871;
    --color-gray-10: #6c737d;
    --color-gray-9 : #7b818a;
    --color-gray-8 : #898f97;
    --color-gray-7 : #989da4;
    --color-gray-6 : #a7abb1;
    --color-gray-5 : #b6b9be;
    --color-gray-4 : #c4c7cb;
    --color-gray-3 : #d3d5d8;
    --color-gray-2 : #e2e3e5;
    --color-gray-1 : #f0f1f2;
    --color-white  : #ffffff;

    /* text
     */
    --color-text       : var(--color-gray-10);
    --color-text-dark  : var(--color-white);
    --color-text-light : var(--color-gray-12);
    --color-placeholder: var(--color-gray-11);

    /* buttons
     */
    --color-btn                   : var(--color-gray-15);
    --color-btn-text              : var(--color-white);
    --color-btn-hover             : var(--color-white);
    --color-btn-hover-text        : var(--color-black);
    --color-btn-primary           : var(--color-1);
    --color-btn-primary-text      : var(--color-white);
    --color-btn-primary-hover     : var(--color-white);
    --color-btn-primary-hover-text: var(--color-black);
    --color-btn-stroke            : var(--color-white);
    --color-btn-stroke-text       : var(--color-white);
    --color-btn-stroke-hover      : var(--color-white);
    --color-btn-stroke-hover-text : var(--color-black);

    /* others
     */
    --color-body  : var(--color-1);
    --color-bg    : #fceee2;
    --color-border: var(--color-gray-17);
    --font-poppins-semiBold : 'Poppins-SemiBold', Arial,sans-serif;
}

/* ===================================================================
 * # preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg);
    z-index: 5000000;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.no-js #preloader, .oldie #preloader {
    display: none;
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    padding: 0;
    display: inline-block;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

#loader>div {
    content: "";
    background: var(--color-1);
    width: 6px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

#loader>div:nth-of-type(1) {
    left: 15px;
}

#loader>div:nth-of-type(3) {
    left: -15px;
}

/* dots jump */
.dots-jump>div {
    -webkit-animation: dots-jump 1.2s infinite ease;
    animation: dots-jump 1.2s infinite ease;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.dots-jump>div:nth-of-type(1) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.dots-jump>div:nth-of-type(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes dots-jump {
    0% {
        top: 0;
    }
    40% {
        top: -6px;
    }
    80% {
        top: 0;
    }
}

@keyframes dots-jump {
    0% {
        top: 0;
    }
    40% {
        top: -6px;
    }
    80% {
        top: 0;
    }
}

/* dots fade */
.dots-fade>div {
    -webkit-animation: dots-fade 1.6s infinite ease;
    animation: dots-fade 1.6s infinite ease;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.dots-fade>div:nth-of-type(1) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.dots-fade>div:nth-of-type(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes dots-fade {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 0.2;
    }
    80% {
        opacity: 1;
    }
}

@keyframes dots-fade {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 0.2;
    }
    80% {
        opacity: 1;
    }
}

/* dots pulse */
.dots-pulse>div {
    -webkit-animation: dots-pulse 1.2s infinite ease;
    animation: dots-pulse 1.2s infinite ease;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.dots-pulse>div:nth-of-type(1) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.dots-pulse>div:nth-of-type(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes dots-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.3);
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes dots-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    40% {
        -webkit-transform: scale(1.1);
        transform: scale(1.3);
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}



/* -------------------------------------------------------------------
 * ## mobile menu toggle
 * ------------------------------------------------------------------- */
.s-header__menu-toggle {
    z-index: 1011111;
    display: none;
    height: 2.2rem;
    width: 2.2rem;
    line-height: 4.2rem;
    font-family: var(--font-2);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: .2rem;
    color: black;
    outline: none;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: absolute;
    right: 10px;
    top: 0.6rem;
}

.s-header__menu-toggle:hover,
.s-header__menu-toggle:focus {
    color: black;
}

.s-header__menu-toggle span {
    display: block;
    width: 1.4rem;
    height: 2px;
    background-color: var(--color-3);
    -webkit-transition: all .5s;
    transition: all .5s;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    left: .9rem;
    right: auto;
    bottom: auto;
}

.s-header__menu-toggle span::before,
.s-header__menu-toggle span::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: inherit;
    -webkit-transition: all .5s;
    transition: all .5s;
    position: absolute;
    left: 0;
}

.s-header__menu-toggle span::before {
    top: -.4rem;
}

.s-header__menu-toggle span::after {
    bottom: -.4rem;
}

.s-header__menu-toggle.is-clicked span {
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: all .1s;
    transition: all .1s;
}

.s-header__menu-toggle.is-clicked span::before,
.s-header__menu-toggle.is-clicked span::after {
    background-color: var(--color-3);
}

.s-header__menu-toggle.is-clicked span::before {
    top: 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.s-header__menu-toggle.is-clicked span::after {
    bottom: 0;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

@media screen and (max-width: 900px) {
    .s-header__menu-toggle {
        display: block;
    }
}