@font-face {
    font-family: 'DIN Alternate';
    src: url('../fonts/DINAlternate-Bold.woff2') format('woff2'),
        url('../fonts/DINAlternate-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.woff2') format('woff2'),
        url('../fonts/CircularStd-Medium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

h1, .h1, h2, .h3, h3, .h3, h4, .h4, h5, .h5 {font-family: 'Circular Std', sans-serif; text-transform:uppercase;}

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
  h1 {font-size:50px; font-weight:900;}
  h2 {font-size:35px; font-weight:900;}
  h3 {font-size:24px;}
  h4 {font-size:20px;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {
  h1 {font-size:50px; font-weight:900;}
  h2 {font-size:35px; font-weight:900;}
  h3 {font-size:24px;}
  h4 {font-size:20px;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) {
  h1 {font-size:70px; font-weight:900;}
  h2 {font-size:40px; font-weight:900;}
  h3 {font-size:28px;}
  h4 {font-size:22px;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {
  h1 {font-size:70px; font-weight:900;}
  h2 {font-size:40px; font-weight:900;}
  h3 {font-size:28px;}
  h4 {font-size:22px;}
}