:root{
	--font-name: montserrat;

    --success-color: #008559;
    --success-color-alt: rgba(22, 34, 51, 1);
    --warning-color: rgb(255, 190, 0);
    --warning-color-alt: #DC9122;
    --error-color: rgb(235,0,0);
    --error-color-alt: #E3321D;
    --gray-color: rgb(235,240,247);
    --gray-color-alt: rgb(235,250,235);
    --white-color: rgb(255,255,255);
    --black-color: rgba(44,44,44);
    --black-color-alt: #4E3D39;

    --10px: 10px;
    --1px: 1px;

    --title-line-height: 1;
    --h1-line-height: 1.1;
    --h2-line-height: 1.487804878;
    --h3-line-height: 1.219032258;
    --h4-line-height: 1.37;
    --h5-line-height: 1.37;
    --h6-line-height: 1.37;
    --p-line-height: 1.37;
    --p-line-height-alt: 1.37;

    --tab-head-height: 4.5vw;
    --tab-color: var(--success-color);
    --tab-active-color: var(--success-color);
    --tab-bg: unset;
    --tab-active-bg: var(--white-color);
    --slide-dot-size: 1.02vw;
    --slide-icon-size: 6.25vw;
}

html.adapt{
    --content-margin: 6.125vw;
    --header-height: 6vw;

    --title-size: 3.125vw;
    --h1-size: 3.125vw;
    --h2-size: 2.4479167vw;
    --h3-size: 1.875vw;
    --h4-size: 1.5625vw;
    --h5-size: 1.455026455vw;
    --h6-size: 1.256613757vw;
    --p-size: 1.19047619vw;
    --p-size-alt: 1vw;

    --10px: 0.52083333vw;
    --1px: 0.052083333vw;

    --icon-big-size: 10.625vw;
    --icon-medium-size: 5vw;
    --icon-size: 3.108465608vw;
    --icon-small-size: 2.239583vw;
    --icon-min-size: 1.5625vw;

    --btn-radius: 0.23vw;
    --radius: .52vw;
    --radius-big: 1.3vw;
    --radius-small: .78vw;
    --radius-min: .26vw;

    --btn-height: 3.04vw;
    --btn-big-height: 4.55vw;
    --btn-small-height: 2.43vw;

    --btn-font-size: 1.21vw;
    --btn-big-font-size: 1.67vw;
    --btn-small-font-size: 1vw;

}

html:not(.adapt){
    --content-margin: 9.9479167vw;
    --header-height: 6.14583vw;

    --title-size: 79px;
    --h1-size: 79px;
    --h2-size: 20px;
    --h3-size: 18px;
    --h4-size: 16px;
    --h5-size: 16px;
    --h6-size: 15px;
    --p-size: 14px;
    --p-size-alt: 13px;

    --10px: 10px;
    --1px: 1px;

    --icon-big-size: 64px;
    --icon-medium-size: 48px;
    --icon-size: 32px;
    --icon-small-size: 24px;
    --icon-min-size: 20px;

    --btn-radius: 5px;
    --radius: 10px;
    --radius-big: 40px;
    --radius-small: 5px;
    --radius-min: 2px;

    --btn-height: 32px;
    --btn-big-height: 40px;
    --btn-small-height: 24px;

    --btn-font-size: 12px;
    --btn-big-font-size: 16px;
    --btn-small-font-size: 10px;
}

@media(max-width:768px){
    html:root{
        --title-size: 32px;
        --h1-size: 24px;
        --h2-size: 20px;
        --h3-size: 17px;
        --h4-size: 16px;
        --h4-size: 15px;
        --h4-size: 15px;
        --p-size: 14px;
        --p-size-alt: 13px;

        --h1-size-adapt: var(--h1-size);
        --h2-size-adapt: var(--h2-size);
        --h3-size-adapt: var(--h3-size);
        --h4-size-adapt: var(--h4-size);
        --p-size-adapt: var(--p-size);
        --p-size-alt-adapt: var(--p-size-alt);

		--header-height: 60px;
        --content-margin: 20px;

        --icon-size: 32px;
        --icon-medium-size: 48px;
        --icon-small-size: 24px;
        --icon-big-size: 84px;
        --icon-min-size: 16px;

        --btn-radius: 3px;
        --radius: 7px;
        --radius-big: 10px;
        --radius-small: 5px;
        --radius-min: 3px;

        --btn-height: 32px;
        --btn-big-height: 32px;
        --btn-small-height: 32px;

        --btn-font-size: 14px;
        --btn-big-font-size: 15px;
        --btn-small-font-size: 12px;

        --tab-head-height: 35px;
		--slide-icon-size: 32px;
        --slide-dot-size: 20px;
    }
}

@media(max-width:400px){
    :root{
        --content-margin: 15px;
        --20px: 15px;
    }
}