/***********************************************************************
 *  Basic setup
 **********************************************************************/
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf');
    font-weight: 500;
}

:root {
    --black: #000000;
    --blue: #2C81FF;
    --grey: #989898;
    --grey2: #ECECEC;
	--red: #FF0F0F;
}

html {
    color: var(--black);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 17px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/***********************************************************************
 *  Headings
 **********************************************************************/
h1,
h2 {
    font-weight: 700;
}

h1 {
    font-size: 28px;
    line-height: 34px;
}

h2 {
    font-size: 22px;
    line-height: 27px;
}

/***********************************************************************
 *  Margin + padding
 **********************************************************************/
.margin {
    margin: 0 19%;
}

.padding {
    padding: 0 19%;
}

/***********************************************************************
 *  Responzivity
**********************************************************************/
@media screen and (max-width: 1800px) {
    .margin {
        margin: 0 17%;
    }

    .padding {
        padding: 0 17%;
    }
}

@media screen and (max-width: 1700px) {
    .margin {
        margin: 0 15%;
    }

    .padding {
        padding: 0 15%;
    }
}

@media screen and (max-width: 1600px) {
    h1 {
        font-size: 24px;
        line-height: 29px;
    }
    
    h2 {
        font-size: 18px;
        line-height: 22px;
    }
}

@media screen and (max-width: 1500px) {
    .margin {
        margin: 0 13%;
    }

    .padding {
        padding: 0 13%;
    }
}

@media screen and (max-width: 1400px) {
    .margin {
        margin: 0 11%;
    }

    .padding {
        padding: 0 11%;
    }
}

@media screen and (max-width: 1300px) {
    h1 {
        font-size: 20px;
        line-height: 25px;
    }
    
    h2 {
        font-size: 16px;
        line-height: 20px;
    }
}

@media screen and (max-width: 1100px) {
    h1 {
        font-size: 18px;
        line-height: 22px;
    }
    
    h2 {
        font-size: 15px;
        line-height: 18px;
    }
}

@media screen and (max-width: 1000px) {
    html {
        font-size: 12px;
    }
}

@media screen and (max-width: 900px) {
    .margin {
        margin: 0 7%;
    }

    .padding {
        padding: 0 7%;
    }
}

@media screen and (max-width: 600px) {
    .margin {
        margin: 0 5%;
    }

    header.margin {
        margin: 0%;
        padding: 0 5%;
        overflow: hidden;
    }

    .padding {
        padding: 0 5%;
    }
}