:root{
	--font-name: montserrat;
	
    --success-color: #0D6E77;
    --success-color-alt: #07A592;
    --warning-color: #313F41;
    --warning-color-alt: #DE9200;
    --error-color: #E73F1A;
    --error-color-alt: #A1280D;
    --gray-color: #D8D8D8;
    --gray-color-alt: #E5E5E5;
    --white-color: rgb(255,255,255);
    --black-color: rgb(49, 63, 65);
    --black-color-alt: rgb(0, 0, 0);

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

    --h1-line-height: 1;
    --h2-line-height: 1.2;
    --h3-line-height: 1.1;
    --h4-line-height: 1.37;
    --p-line-height: 1.568823529;
    --p-line-height-alt: 1.533;

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

html.adapt{
    --content-margin: 9.583vw;
    --header-height: 6.3vw;

    --title-size: 3.6458vw;
    --h1-size: 2.5vw;
    --h2-size: 2.29167vw;
    --h3-size: 1.875vw;
    --h4-size: 1.3020833vw;
    /* --p-size: 0.8854167vw; */
    --p-size: 1.3020833vw;
    /* --p-size-alt: 0.78125vw; */
    --p-size-alt: 0.8854167vw;

    --10px: 0.52vw;
    --1px: 0.052vw;

    --icon-big-size: 9.21875vw;
    --icon-medium-size: 6.7708333vw;
    --icon-size: 3.59375vw;
    --icon-small-size: 1.404167vw;
    --icon-min-size: 1vw;
    
    --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.61vw;
    --btn-big-font-size: 1.67vw;
    --btn-small-font-size: 1vw;

}

html:not(.adapt){
    --content-margin: 12.23vw;
    --header-height: 17.19vw;

    /* --title-size: 79px; */
    /* --h1-size: 48px; */
    /* --h2-size: 20px; */
    /* --h3-size: 36px; */
    /* --h4-size: 16px; */
    /* --p-size: 17px; */
    /* --p-size-alt: 15px; */

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

    --icon-big-size: 64px;
    --icon-medium-size: 40px;
    --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: 15px;
        --p-size: 12px;
        --p-size-alt: 10px;

        --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: 32px;
        --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;
    }
}