/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  html {
    font-size: 16px;
  }

  .header-head,
  .foot-container {
    display: none;
  }

  header p {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .con i {
    min-width: 48px;
  }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  html {
    font-size: 24px;
  }
  .hh-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
  html {
    font-size: 26px;
  }
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
  html {
    font-size: 32px;
  }
}