@font-face {
    font-family: 'Quadraat';
    src: URL('../fonts/quadraat.ttf') format('truetype');
}

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 1rem; /*16px*/
    line-height: 1.625rem; /*26px*/
    font-weight: 400;
}

@media screen and (min-width: 960px) {
    body {
        font-size: 1.5rem; /*24px*/
        line-height: 2.625rem; /*42px*/
    }
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
    font-weight: 400;
    font-family: 'Quadraat', Garamond, serif;
}
/* Heading - H1 */
h1, .h1 {
    font-size: 2rem; /*32px*/
    line-height: 2.375rem; /*38px*/
}

@media screen and (min-width: 960px) {
    h1, .h1 {
        font-size: 3rem; /*48px*/
        line-height: 3.5rem; /*56px*/
    }
}

/* Heading - H2 */
h2, .h2 {
    font-size: 1.75rem; /*28px*/
    line-height: 2rem; /*32px*/
}

@media screen and (min-width: 960px) {
    h2, .h2 {
        font-size: 2.25rem; /*36px*/
        line-height: 2.625rem; /*42px*/
    }
}

/* Heading - H3 */
h3, .h3 {
    font-size: 1.375rem; /*22px*/
    line-height: 1.625rem; /*26px*/
}

@media screen and (min-width: 960px) {
    h3, .h3 {
        font-size: 1.75rem; /*28px*/
        line-height: 2.375rem; /*38px*/
    }
}

/* Heading - H4 */
h4, .h4 {
    font-size: 1.75rem; /*28px*/
    line-height: 2rem; /*32px*/
}

@media screen and (min-width: 960px) {
    h4, .h4 {
        font-size: 2rem; /*32px*/
        line-height: 2.375rem; /*38px*/
    }
}

/* Text - extra large */

.text-x-large {
    font-size: 1.125rem; /*18px*/
    line-height: 1.75rem; /*28px*/
}

@media screen and (min-width: 960px) {
    .text-x-large {
        font-size: 1.75rem; /*28px*/
        line-height: 3rem; /*48px*/
    }
}

/* Text - large */

.text-large {
    font-size: 1.125rem; /*18px*/
    line-height: 1.75rem; /*28px*/
}

@media screen and (min-width: 960px) {
    .text-large {
        font-size: 1.5rem; /*24px*/
        line-height: 2.375rem; /*38px*/
    }
}

/* Text - normal / P */

.text-normal {
    font-size: 1rem; /*16px*/
    line-height: 1.625rem; /*26px*/
}

@media screen and (min-width: 960px) {
    .text-normal {
        font-size: 1.5rem; /*24px*/
        line-height: 2rem; /*32px*/
    }
}

/* Text - small */
.text-small {
    font-size: 1rem; /*16px*/
    line-height: 1.375rem; /*22px*/
}

@media screen and (min-width: 960px) {
    .text-small {
        font-size: 1.25rem; /*20px*/
        line-height: 1.75rem; /*28px*/
    }
}

/* Text - extra small */
.text-x-small {
    font-size: 0.75rem; /*12px*/
    line-height: 1rem; /*16px*/
}

@media screen and (min-width: 960px) {
    .text-x-small {
        font-size: 0.875rem; /*14px*/
        line-height: 1.25rem; /*20px*/
    }
} 

/* Text - author */
.text-article-meta {
    font-size: 0.875rem; /*14px*/
    line-height: 1.25rem; /*20px*/
}

@media screen and (min-width: 960px) {
    .text-article-meta {
        font-size: 1.125rem; /*18px*/
        line-height: 1.5rem; /*24px*/
    }
}

/* Text - for subtitle */
.text-small-display {
    font-size: 0.875rem; /*14px*/
    line-height: 1.25rem; /*20px*/
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
}

@media screen and (min-width: 960px) {
    .text-small-display {
        font-size: 1.125rem; /*18px*/
        line-height: 1.5rem; /*24px*/
    }
}

/* Text - button */
.text-button {
    font-size: 1.25rem; /*20px*/
    line-height: 1.75rem; /*28px*/
    text-transform: none;
}

.text-bold {
    font-weight: 700;
}

a,
a:link {
    color: #4375AA;
    text-decoration: underline;
    transition: 0.3s all;
}

a:focus,
a:hover,
a:active {
    color:#FF5200;
}