

/* media breakpoints - guides
Extra small devices (phones, 600px and down)  -- (max-width: 600px)
Small devices (portrait tablets and large phones, 600px and up) -- (min-width: 600px)
Medium devices (landscape tablets, 768px and up) -- (min-width: 768px)
Large devices (laptops/desktops, 992px and up) -- (min-width: 992px)
Extra large devices (large laptops and desktops, 1200px and up) -- (min-width: 1200px)
*/


/* ####### landscape ######### */
@media only screen and (max-width: 500px) and (orientation: landscape) { /* small phone */
  h1 { font-size: 35pt; }
}
@media only screen and (min-width: 501px) and (orientation: landscape){ /* phone */
  h1 { font-size: 45pt; }
}
@media only screen and (min-width: 768px) and (orientation: landscape){ /* large phone / small tablet */
  h1 { font-size: 55pt; }
}
@media only screen and (min-width: 992px) and (orientation: landscape){ /* tablet */
  h1 { font-size: 80pt; }
}
@media only screen and (min-width: 1200px) and (orientation: landscape) { /* laptop */
  h1 { font-size: 110pt; }

}

/* ####### portraits ####### */
@media only screen and (max-width: 600px) and (orientation: portrait) { /* phone */
  h1 { font-size: 35pt; }
}
@media only screen and (min-width: 601px) and (orientation: portrait){ /* large phone / small tablet */
  h1 { font-size: 45pt; }
}
@media only screen and (min-width: 768px) and (orientation: portrait){ /* tablet */
  h1 { font-size: 55pt; }
}
@media only screen and (min-width: 992px) and (orientation: portrait){ /* large tablet */
  h1 { font-size: 75pt; }
}
