:root {
    --font-scale: 1;
	/*colors*/
    --color-primary: #BDDC00;
    --color-primary-dark: #DBF827;
    --color-secondary: #66bd08;
    --color-secondary-dark: #469d08;
    --color-accent: #DFDFDF;
    --color-accent-light: #dee2e6;
    --color-accent-dark: #1A232B;
    --color-white: #ffffff;
    --color-black: #0E100D;
    --color-black-2: #333333;
    --color-black-3: #141614;

    --color-green: #BDDC00;
    --color-green-2: #CCEE00;
    --color-green-3: #DBF827;
    --color-green-4: #F0EE9C;
    --color-green-5: #DDF069;
    --color-green-6: #D2E756;
    --color-green-7: #4B5701;

    --color-gray-1: #F0F1F2;
    --color-gray-2: #DFDFDF;
    --color-gray-3: #989898;
    --color-gray-4: #CECECE;
    --color-gray-5: #6F6F6F;
    --color-gray-6: #575757;
    --color-gray-7: #383838;

    --btn-accesibility: var(--color-primary-dark);
    /*colors end*/

    --transition: .2s;
    --radius: 4px;

    /*text*/
    --text-font-family: 'Bai Jamjuree', sans-serif;
    --heading-font-family: 'Exo 2', sans-serif;
    
    --text-weight: 400;
    --text-color: #333333;

    --heading-weight: 600;
    --heading-color: #333333;

    --link-color: var(--color-primary);
    --link-color-active: var(--color-primary-dark);

    /*
    * --hx: header font size
    * --hx-lh: header line height
    */
    --text: 1rem;
    --text-clamp: 1rem;
    --text-lh: 1.5;
    --heading-lh: 1.25;
    --h1: 3.25rem;
    --h1-clamp: clamp(3.25rem, 3.25rem + 0vw, 3.25rem);
    --h2: 2.625rem;
    --h2-clamp: clamp(2.625rem, 2.625rem + 0vw, 2.625rem);
    --h3: 2.25rem;
    --h3-clamp: clamp(2.25rem, 2.25rem + 0vw, 2.25rem);
    --h4: 1.75rem;
    --h4-clamp: clamp(1.75rem, 1.75rem + 0vw, 1.75rem);
    --h5: 1.375rem;
    --h5-clamp: clamp(1.375rem, 1.375rem + 0vw, 1.375rem);
    --h6: 1.25rem;
    --h6-clamp: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);

    /*text end*/

    /*buttons*/
    --btn-text: .75rem;
    --btn-text-lh: .875rem;
    --btn-weight: 600;
    --btn-bg: linear-gradient(to right, #A4BF00, #C0E000, #C0E000);
    --btn-bg-active: linear-gradient(to right, #A4BF00, #C0E000, #C0E000, #C0E000);
    --btn-text-color: var(--color-white);
    --btn-text-color-active: var(--color-white);
    --btn-secondary-bg: var(--color-black-2);
    --btn-secondary-bg-active: var(--color-black);
    --btn-secondary-text-color: var(--color-white);
    --btn-secondary-text-color-active: var(--color-white);
    --btn-padding: 14px 20px;
    --btn-radius: var(--radius);
    --btn-border-size: 1px;
    /*buttons end*/

    /*hr*/
    --hr-margin: 30px 0;
    --hr-color: var(--color-accent);
    /*hr end*/

    /*animations*/
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
    /*animations end*/

    /*layout*/
    --layout-display: flex;
    --layout-margin: 60px 0;
    --layout-sidebar-width: 300px;
    --layout-sidebar-content-height: calc(100vh - var(--header-height-scrolled));
    --layout-sidebar-gap: 60px;
    /*layout end*/

    /*menu*/
    --menu-item-size: .875rem;
    --menu-item-weight: 600;
    --menu-item-color: var(--color-black);
    --menu-item-color-active: var(--color-primary);
    --menu-item-color-dark: var(--color-white);
    --menu-item-color-active-dark: var(--color-primary);
    --menu-horizontal-item-padding:0 .75rem;
    --menu-horizontal-item-padding-mobile: .5rem .75rem;
    --menu-horizontal-dropdown-item-padding: .5rem .75rem;
    --menu-horizontal-dropdown-item-padding-mobile: .5rem .75rem .5rem 1.5rem;
    --menu-vertical-item-padding: .5rem .75rem;
    --menu-vertical-dropdown-item-padding: .5rem .75rem .5rem 1.5rem;

    --hamburger-color: var(--color-white);
    --hamburger-duration: var(--transition);
    /*menu end*/

    /*container*/
    --container-padding: 50px;
    --container-wide-width: 1340px;
    --container-narrow-width: 900px;
    /*container end*/

    /*columns*/
    --column-gutter: 1.5rem;
    --column-gutter-wide: clamp(1.5rem, -9.9126rem + 23.7762vw, 10rem);/*12px-160px*/
    --column-gutter-thin: 2px;
    /*columns end*/

    /*form*/
    --form-input-size: .875rem;
    --form-input-weight: 600;
    --form-input-color: var(--color-black);
    --form-input-placeholder-color: var(--color-accent);
    --form-input-margin: 0 0 10px;
    --form-input-padding: 15px;
    --form-input-radius: 0;
    --form-input-border-size: 1px;
    --form-input-border-color: var(--color-accent-light);
    --form-input-border-color-active: var(--color-accent-dark);
    
    --form-label-display: none;
    --form-label-size: 1rem;
    --form-label-weight: 400;
    --form-label-color: var(--color-primary-dark);
    --form-label-margin: 0 0 .75rem;

    --form-checkbox-size: .75rem;
    --form-checkbox-weight: 400;
    --form-checkbox-color: var(--color-accent);
    --form-checkbox-check-size: 1rem;
    --form-checkbox-check-gap: .75rem;
    --form-checkbox-check-radius: var(--radius);
    --form-checkbox-check-background: var(--color-white);
    --form-checkbox-check-background-active: var(--color-primary-dark);
    --form-checkbox-check-border-size: 1px;
    --form-checkbox-check-border-color: var(--color-accent-light);
    /*form end*/

    /*gallery*/
    --gallery-items-per-row: 4;
    --gallery-gap: 1.5rem;
    --gallery-image-radius: var(--radius);
    --gallery-image-tint-color: var(--color-primary);
    --gallery-image-tint-opacity: 60%;
    --gallery-image-name-display: block;
    --gallery-image-name-size: .75rem;
    --gallery-image-name-weight: 400;
    --gallery-image-name-color: var(--color-primary);
    --gallery-image-name-padding: .75rem;
    /*gallery end*/

    /*widgets*/
    --widget-margin: 60px 0 0;
    --widget-title-size: var(--h2);
    --widget-title-size-clamp: var(--h2);
    --widget-title-lh: var(--heading-lh);
    --widget-title-weight: 500;
    --widget-title-color: var(--color-black);
    --widget-title-align: left;
    --widget-title-margin: 0 auto 60px;

    --widget-side-margin: 2rem 0 0;
    --widget-side-title-size: var(--h5);
    --widget-side-title-size-clamp: var(--h5);
    --widget-side-title-lh: var(--heading-lh);
    --widget-side-title-weight: 500;
    --widget-side-title-color: var(--color-black);
    --widget-side-title-align: left;
    --widget-side-title-margin: 0 0 1rem;

    --widget-footer-margin: 2rem 0 0;
    --widget-footer-title-size: var(--h5);
    --widget-footer-title-size-clamp: var(--h5);
    --widget-footer-title-lh: var(--heading-lh);
    --widget-footer-title-weight: 500;
    --widget-footer-title-color: var(--color-black);
    --widget-footer-title-align: left;
    --widget-footer-title-margin: 0 0 1rem;
    /*widgets end*/

    /*breadcrumbs*/
    --breadcrumb-font-size: .875rem;s
    --breadcrumb-padding-y: 0;
    --breadcrumb-padding-x: 0;
    --breadcrumb-item-padding-x: .875rem;
    --breadcrumb-margin-bottom: 1rem;
    --breadcrumb-bg: transparent;
    --breadcrumb-color: var(--color-accent);
    --breadcrumb-active-color: var(--color-black);
    --breadcrumb-divider: '';
    --breadcrumb-divider-color: var(--color-accent);
    --breadcrumb-border-radius: 0;
    /*breadcrumbs end*/

    /*pagination*/
    --pagination-container-margin: 60px 0 0;

    --pagination-padding-y:.375rem;
    --pagination-padding-x:.75rem;
    --pagination-color: var(--color-primary);
    --pagination-bg: var(--color-white);
    --pagination-border-width: 1px;
    --pagination-border-radius: var(--radius);
    --pagination-margin-start: 1px;
    --pagination-border-color: var(--color-accent-light);

    --pagination-hover-color: var(--color-primary-dark);
    --pagination-hover-bg: var(--color-accent-light);
    --pagination-hover-border-color: var(--color-accent-light);
    --pagination-focus-box-shadow: none;
    --pagination-focus-outline: 0;

    --pagination-active-color: var(--color-white);
    --pagination-active-bg: var(--color-primary-dark);
    --pagination-active-border-color: var(--color-primary-dark);

    --pagination-disabled-color: var(--color-accent);
    --pagination-disabled-bg: var(--color-white);
    --pagination-disabled-border-color: var(--color-accent);
    --pagination-transition: var(--transition);
    /*pagination end*/
}

/*breakpoint XL*/
@media only screen and (max-width: 1399px) {
    :root {
    }
}
/*breakpoint XL end*/

/*breakpoint LG*/
@media only screen and (max-width: 1199px) {
    :root {
    }
}
/*breakpoint LG end*/

/*breakpoint MD*/
@media only screen and (max-width: 991px) {
    :root {
        /*text*/
        --h1: 3.25rem;
        --h1-clamp: clamp(2rem, 0.2722rem + 4.8077vw, 3.25rem);
        --h2: 2.625rem;
        --h2-clamp: clamp(1.75rem, 0.5406rem + 3.3654vw, 2.625rem);
        --h3: 2.25rem;
        --h3-clamp: clamp(1.375rem, 0.1656rem + 3.3654vw, 2.25rem);
        --h4: 1.75rem;
        --h4-clamp: clamp(1.25rem, 0.5589rem + 1.9231vw, 1.75rem);
        --h5: 1.375rem;
        --h5-clamp: clamp(1.125rem, 0.7794rem + 0.9615vw, 1.375rem);
        --h6: 1.25rem;
        --h6-clamp: clamp(1rem, 0.6544rem + 0.9615vw, 1.25rem);
        /*text end*/
        /*layout*/
        --layout-sidebar-width: 240px;
        --layout-sidebar-gap: 1.5rem;
        /*layout end*/
    }
}
/*breakpoint MD end*/

/*breakpoint SM*/
@media only screen and (max-width: 767px) {
    :root {
        /*gallery*/
        --gallery-items-per-row: 3;
        /*gallery end*/
        /*container*/
        --container-padding: .75rem;
        /*container end*/
        /*columns*/
        --column-gutter-wide: 1.5rem;
        /*columns end*/
    }
}
/*breakpoint SM end*/

/*breakpoint XS*/
@media only screen and (max-width: 575px) {
    :root {
        /*text*/
        --h1: 2rem;
        --h1-clamp: 2rem;
        --h2: 1.75rem;
        --h2-clamp: 1.75rem;
        --h3: 1.375rem;
        --h3-clamp: 1.375rem;
        --h4: 1.25rem;
        --h4-clamp: 1.25rem;
        --h5: 1.125rem;
        --h5-clamp: 1.125rem;
        --h6: 1rem;
        --h6-clamp: 1rem;
        /*text end*/
        /*gallery*/
        --gallery-items-per-row: 2;
        /*gallery end*/
    }
}
/*breakpoint XS end*/

/*layout breakpoint*/
@media only screen and (max-width: 767px) {
    :root {
        --layout-display: block;
        --layout-sidebar-margin: 60px;
        --layout-sidebar-content-height: none;
    }
}
/*layout breakpoint end*/