html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	background-repeat: no-repeat;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-Regular.eot');
    src: local('IBM Plex Sans Thai Regular'), local('IBMPlexSansThai-Regular'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-Medium.eot');
    src: local('IBM Plex Sans Thai Medium'), local('IBMPlexSansThai-Medium'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-Bold.eot');
    src: local('IBM Plex Sans Thai Bold'), local('IBMPlexSansThai-Bold'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Bold.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Bold.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-Light.eot');
    src: local('IBM Plex Sans Thai Light'), local('IBMPlexSansThai-Light'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Light.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Light.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-SemiBold.eot');
    src: local('IBM Plex Sans Thai SemiBold'), local('IBMPlexSansThai-SemiBold'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-Thin.eot');
    src: local('IBM Plex Sans Thai Thin'), local('IBMPlexSansThai-Thin'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Thin.eot?#iefix') format('embedded-opentype'),
        url('IBMPlexSansThai-Thin.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Thin.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('IBMPlexSansThai-ExtraLight.eot');
    src: local('IBM Plex Sans Thai ExtraLight'), local('IBMPlexSansThai-ExtraLight'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-ExtraLight.woff2') format('woff2'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-ExtraLight.woff') format('woff'),
        url('../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

body{
	font-family: 'IBM Plex Sans Thai';
}


/*VAR's*/

:root{
    font-family: 'IBM Plex Sans Thai';
    --h1-size: 3.4722vw;
    --h2-size: 2.7778vw;    
    --h3-size: 2.5vw;
    --h4-size: 2.08vw;    
    --p-size: 1.1111vw;    
    --marg-h-top: 6.9444vw;
    --marg-h-bottom: 4.1667vw;
    --main-color: #0066FF;
    --second-color: #ff0066;
    --form-text-size: 1.3889vw;
}
/*для средних экранов адаптивный размер текстов*/
h1{
    font-size: var(--h1-size, 50px);
    line-height: var(--h1-size, 50px);
    font-weight: 700;
    color: #000000;
}
h2{
    font-size: var( --h2-size, 40px);
    line-height: var( --h2-size, 40px);
}
h1, h2{
    margin-bottom: var(--marg-h-bottom, 60px);
}
h3{
    font-size: var( --h3-size,  36px);
    line-height: var( --h3-size,  36px);
}
h4{
    font-size: var( --h4-size, 30px);
    line-height: var( --h4-size, 30px);        
}
p{
    font-size: var( --p-size,  16px);
    line-height: calc(var( --p-size,  16px)*1.5);
}

@media screen and (min-width: 1440px){
    :root{
        --h1-size: 50px;
        --h2-size: 40px;
        --h3-size: 36px;
        --h4-size: 30px;
        --p-size: 16px;
        --marg-h-top: 100px;
        --marg-h-bottom: 60px;
        --form-text-size: 20px;
    }
    /*для больших экранов фиксированый размер текстов*/
    h1{
        font-size: var(--h1-size, 50px);
        line-height: var(--h1-size, 50px);
    }
    h2{
        font-size: var( --h2-size, 40px);
        line-height: var(--h2-size, 40px);
    }
    h1, h2{
        margin-bottom: var(--marg-h-bottom, 60px);
    }
    h3{
        font-size: var( --h3-size, 36px);
        line-height: var( --h3-size, 36px);
    }
    h4{
        font-size: var( --h4-size, 30px);
        line-height: var( --h4-size, 30px);        
    }
    p{
        font-size: var( --p-size,  16px);
        line-height: calc(var( --p-size,  16px)*1.5);
    }
}

@media handheld and (orientation: portrait) and (min-resolution: 1.2dppx), all and (max-width: 540px){

    :root{
        --h1-size: 7.7333vw;/*29px*/
        --h2-size: 6.1333vw;/*23px*/
        --h3-size: 5.0667vw;/*19px*/
        --h4-size: 4.8vw;/*18px*/
        --p-size: 4.2667vw;/*16px*/
        --marg-h-top: 6.9333vw;/*26px*/
        --marg-h-bottom: 4.2667vw; /*16px*/
        --form-text-size: 5.3333vw; /*20px*/      
    }
    /*для маленьких экранов адаптивный размер текстов с фиксированой альтернативой*/
    h1{
        font-weight: 600;
        font-size: var(--h1-size, 29px);
        line-height: calc(var(--h1-size, 29px)* 1.15);
    }
    h2{
        font-size: var( --h2-size, 23px);
        line-height: var( --h2-size, 23px);
    }
    h1, h2{
        margin-bottom: var(--marg-h-bottom, 16px);
    }
    h3{
        font-size: var( --h3-size, 19px);
        line-height: var( --h3-size, 19px);
    }
    h4{
        font-size: var( --h4-size, 18px);
        line-height: var( --h4-size, 18px);        
    }
    p{
        font-size: var( --p-size,  16px);
        line-height: calc(var( --p-size,  16px)*1.5);
    }
}