:root{

    --global-cr-button-text-font-size-all : 22px;
    --global-cr-button-padding-all : 12px 45px;
    
    --global-cr-button-text-font-size-10000px : 22px;
    --global-cr-button-padding--10000px : 12px 55px;

    --global-cr-button-text-font-size-900px : 2.2vh;
    --global-cr-button-padding-900px : .8vh 4vh;

    --global-cr-button-text-font-size-600px : 2.6vh;
    --global-cr-button-padding-600px : 1vh 4vh;

    --global-cr-button-text-font-size-500px : 16px;
    --global-cr-button-padding-500px : 6px 25px;
}


@media only screen and (min-width: 1921px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 70px;
    
        --cr-home-paragraph-line-height : 28px;
        --cr-home-paragraph-font-size : 18px;
        --cr-home-paragraph-margin-bottom : 12px;

        --cr-home-span-line-height : 24px;
        --cr-home-span-font-size : 22px;

        --cr-button-text-font-size : var(--global-cr-button-padding-all);
        --cr-button-padding : var(--global-cr-button-padding-all);
    }
}


@media (min-width: 1921px) and (max-height: 10000px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 70px;
    
        --cr-home-paragraph-line-height : 28px;
        --cr-home-paragraph-font-size : 18px;
        --cr-home-paragraph-margin-bottom : 12px;

        --cr-home-span-line-height : 24px;
        --cr-home-span-font-size : 22px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-10000px );
        --cr-button-padding : var(--global-cr-button-padding--10000px);
    }
}


@media (min-width: 1921px) and (max-height: 900px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 5.5vh;
    
        --cr-home-paragraph-line-height : 2vh;
        --cr-home-paragraph-font-size : 2vh;
        --cr-home-paragraph-margin-bottom : 1vh;

        --cr-home-span-line-height : 2vh;
        --cr-home-span-font-size : 1.8vh;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-900px);
        --cr-button-padding : var(--global-cr-button-padding-900px);
    }
}


@media (min-width: 1921px) and (max-height: 600px) {
    :root{

        --cr-home-heading-line-height : 9vh;
        --cr-home-heading-font-size : 6.5vh;
    
        --cr-home-paragraph-line-height : 2.4vh;
        --cr-home-paragraph-font-size : 2.4vh;
        --cr-home-paragraph-margin-bottom : 1.5vh;

        --cr-home-span-line-height : 2.2vh;
        --cr-home-span-font-size : 2.2vh;

        --cr-button-text-font-size :var(--global-cr-button-text-font-size-600px);
        --cr-button-padding : var(--global-cr-button-padding-600px);
    }
}


@media (min-width: 1921px) and (max-height: 500px) {
    :root{

        --cr-home-heading-line-height : 9vh;
        --cr-home-heading-font-size : 32px;
    
        --cr-home-paragraph-line-height : 14px;
        --cr-home-paragraph-font-size : 12px;
        --cr-home-paragraph-margin-bottom : 10px;

        --cr-home-span-line-height : 12px;
        --cr-home-span-font-size : 11px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-500px);
        --cr-button-padding : var(--global-cr-button-padding-500px);
    }
}






@media only screen and (max-width: 1920px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 70px;
    
        --cr-home-paragraph-line-height : 28px;
        --cr-home-paragraph-font-size : 18px;
        --cr-home-paragraph-margin-bottom : 12px;

        --cr-home-span-line-height : 12px;
        --cr-home-span-font-size : 11px;

        --cr-button-text-font-size : var(--global-cr-button-padding-all);
        --cr-button-padding : var(--global-cr-button-padding-all);
    }
}


@media (max-width: 1920px) and (max-height: 10000px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 70px;
    
        --cr-home-paragraph-line-height : 28px;
        --cr-home-paragraph-font-size : 18px;
        --cr-home-paragraph-margin-bottom : 12px;

        --cr-home-span-line-height : 24px;
        --cr-home-span-font-size : 22px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-10000px );
        --cr-button-padding : var(--global-cr-button-padding--10000px);
    }
}


@media (max-width: 1920px) and (max-height: 900px) {
    :root{

        --cr-home-heading-line-height : 80px;
        --cr-home-heading-font-size : 5.5vh;
    
        --cr-home-paragraph-line-height : 2vh;
        --cr-home-paragraph-font-size : 2vh;
        --cr-home-paragraph-margin-bottom : 1vh;

        --cr-home-span-line-height : 2vh;
        --cr-home-span-font-size : 1.8vh;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-900px);
        --cr-button-padding : var(--global-cr-button-padding-900px);
    }
}


@media (max-width: 1920px) and (max-height: 600px) {
    :root{

        --cr-home-heading-line-height : 9vh;
        --cr-home-heading-font-size : 6.5vh;
    
        --cr-home-paragraph-line-height : 2.4vh;
        --cr-home-paragraph-font-size : 2.4vh;
        --cr-home-paragraph-margin-bottom : 1.5vh;

        --cr-home-span-line-height : 2.2vh;
        --cr-home-span-font-size : 2.2vh;

        --cr-button-text-font-size :var(--global-cr-button-text-font-size-600px);
        --cr-button-padding : var(--global-cr-button-padding-600px);
    }
}


@media (max-width: 1920px) and (max-height: 500px) {
    :root{

        --cr-home-heading-line-height : 9vh;
        --cr-home-heading-font-size : 32px;
    
        --cr-home-paragraph-line-height : 14px;
        --cr-home-paragraph-font-size : 12px;
        --cr-home-paragraph-margin-bottom : 10px;

        --cr-home-span-line-height : 12px;
        --cr-home-span-font-size : 11px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-500px);
        --cr-button-padding : var(--global-cr-button-padding-500px);
    }
}



@media only screen and (max-width: 1600px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 42px;
        --cr-home-paragraph-line-height: 18px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 4px;
        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;

        --cr-button-text-font-size : var(--global-cr-button-padding-all);
        --cr-button-padding : var(--global-cr-button-padding-all);
    }
}


@media (max-width: 1600px) and (max-height: 10000px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 42px;
        --cr-home-paragraph-line-height: 18px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 4px;
        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-10000px );
        --cr-button-padding : var(--global-cr-button-padding--10000px);
    }
}


@media (max-width: 1600px) and (max-height: 900px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 5.5vh;
        --cr-home-paragraph-line-height: 2vh;
        --cr-home-paragraph-font-size: 2vh;
        --cr-home-paragraph-margin-bottom: 1vh;
        --cr-home-span-line-height: 2vh;
        --cr-home-span-font-size: 1.8vh;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-900px);
        --cr-button-padding : var(--global-cr-button-padding-900px);
    }
}


@media (max-width: 1600px) and (max-height: 600px) {
    :root{

        --cr-home-heading-line-height: auto;
        --cr-home-heading-font-size: 6.5vh;
        --cr-home-paragraph-line-height: 2.4vh;
        --cr-home-paragraph-font-size: 2.2vh;
        --cr-home-paragraph-margin-bottom: 1.5vh;
        --cr-home-span-line-height: 2.2vh;
        --cr-home-span-font-size: 2.2vh;

        --cr-button-text-font-size :var(--global-cr-button-text-font-size-600px);
        --cr-button-padding : var(--global-cr-button-padding-600px);
    }
}


@media (max-width: 1600px) and (max-height: 500px) {
    :root{

        --cr-home-heading-line-height: auto;
        --cr-home-heading-font-size: 32px;
        --cr-home-paragraph-line-height: 14px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 10px;
        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;
        
        --cr-button-text-font-size : var(--global-cr-button-text-font-size-500px);
        --cr-button-padding : var(--global-cr-button-padding-500px);
    }
}



@media only screen and (max-width: 992px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 42px;
        
        --cr-home-paragraph-line-height: 18px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 4px;

        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;

        --cr-button-text-font-size : var(--global-cr-button-padding-all);
        --cr-button-padding : var(--global-cr-button-padding-all);
    }
}


@media (max-width: 992px) and (max-height: 10000px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 42px;
        
        --cr-home-paragraph-line-height: 18px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 4px;

        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-10000px );
        --cr-button-padding : var(--global-cr-button-padding--10000px);
    }
}


@media (max-width: 992px) and (max-height: 900px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 4.5vh;
        
        --cr-home-paragraph-line-height: 1.5vh;
        --cr-home-paragraph-font-size: 1.5vh;
        --cr-home-paragraph-margin-bottom: 1vh;

        --cr-home-span-line-height: 2vh;
        --cr-home-span-font-size: 1.8vh;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-900px);
        --cr-button-padding : var(--global-cr-button-padding-900px);
    }
}


@media (max-width: 992px) and (max-height: 600px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 5.5vh;
        
        --cr-home-paragraph-line-height: 2vh;
        --cr-home-paragraph-font-size: 1.8vh;
        --cr-home-paragraph-margin-bottom: 1.2vh;

        --cr-home-span-line-height: 2vh;
        --cr-home-span-font-size: 1.6vh;

        --cr-button-text-font-size :var(--global-cr-button-text-font-size-600px);
        --cr-button-padding : var(--global-cr-button-padding-600px);
    }
}


@media (max-width: 992px) and (max-height: 500px) {
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 32px;
        
        --cr-home-paragraph-line-height: 14px;
        --cr-home-paragraph-font-size: 12px;
        --cr-home-paragraph-margin-bottom: 10px;

        --cr-home-span-line-height: 12px;
        --cr-home-span-font-size: 11px;

        --cr-button-text-font-size : var(--global-cr-button-text-font-size-500px);
        --cr-button-padding : var(--global-cr-button-padding-500px);
    }
}


@media (max-width: 576px){
    :root{

        --cr-home-heading-line-height: 50px;
        --cr-home-heading-font-size: 40px;
        
        --cr-home-paragraph-line-height: 20px;
        --cr-home-paragraph-font-size: 16px;
        --cr-home-paragraph-margin-bottom: 1vh;

        --cr-home-span-line-height: 18px;
        --cr-home-span-font-size: 14px;

        --cr-button-text-font-size : 18px;
        --cr-button-padding :  10px 35px;
    }

}