/********** reset **********/
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-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}




@font-face {
    font-family: 'Muli';
    src: url('./fonts/Muli-Regular.eot');
    src: url('./fonts/Muli-Regular.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Muli-Regular.woff2') format('woff2'),
        url('./fonts/Muli-Regular.woff') format('woff'),
        url('./fonts/Muli-Regular.svg#Muli-Regular') format('svg'),
        url('./fonts/Muli-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('./fonts/Muli-SemiBold.eot');
    src: url('./fonts/Muli-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Muli-SemiBold.woff2') format('woff2'),
        url('./fonts/Muli-SemiBold.woff') format('woff'),
        url('./fonts/Muli-SemiBold.svg#Muli-SemiBold') format('svg'),
        url('./fonts/Muli-SemiBold.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('./fonts/Muli-Light.eot');
    src: url('./fonts/Muli-Light.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Muli-Light.woff2') format('woff2'),
        url('./fonts/Muli-Light.woff') format('woff'),
        url('./fonts/Muli-Light.svg#Muli-Light') format('svg'),
        url('./fonts/Muli-Light.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/************ styles **************/
.content-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    padding-right: 4vw;
    padding-left: 4vw;
    box-sizing: content-box;
}

header{
    width: 100%;
    box-sizing: border-box;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 4vw;
    padding-right: 4vw;
}
header img{
    width: auto;
    max-width: 100%;
    max-height: 40px;
}

section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 50px;
    margin-bottom: 50px;
}

h1{
    white-space: pre-wrap;
    font-size: calc(4.2 * 1rem);
    line-height: 1.2208;
    color: #000;
    margin: 2rem 0;
    margin-top: 0;
    font-family: 'Muli';
    font-style: normal;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

h2{
    white-space: pre-wrap;
    margin: 1rem 0;
    margin-bottom: 30px;
    color: #000;
    font-size: calc(1.1 * 1rem);
    font-family: 'Muli';
    font-style: normal;
    font-weight: normal;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: none;
    line-height: 1.8;
}

.buttons-img{
    display: flex;
    width: 300px;
    justify-content: space-between;
}
.buttons-img img{
    width: 140px;
    max-width: 100%;
}

.col:last-of-type{
    padding:  0 63px;
}
.main-image{
    max-width: 100%;
}


/********** responsive **********/
@media (max-width: 1024px){
    h1{
        font-size: calc((4.2 - 1) * 1.2vw + 1rem);
    }
    header{
        text-align: center;
        padding-top: 50px;
    }
    .col:last-of-type{
        padding:  0;
    }
}
@media (max-width: 767px) {
    .content-wrapper{
        padding-right: 6vw;
        padding-left: 6vw;
    }

    header{
        padding-top: 23px;
        padding-bottom: 23px;
    }
    header img{max-height: 30px;}
    section{
        display: block;
        margin-top: 40px;
    }


    h1{font-size:  47px;}
    h2{font-size:  17px;}
}

@media (max-width: 420px) {
    .buttons-img{
        width: 100%;
        margin-bottom: 30px;
    }
    .buttons-img a:first-child{
        margin-right: 30px;
    }
    .buttons-img img{
        width: 100%;
    }
}