/* RESPONSIVE MARGINS */

@media (max-width: 600px) {
  html { font-size: 14px; }
  p, ul, h2, h3, figure { padding: 0 1%; }
}

@media (min-width: 600px) and (max-width: 767px) {
  p, ul, h2, h3, figure { padding: 0 4%; }
}

@media (min-width: 768px) and (max-width: 991px) {
  p, ul, h2, h3, figure { padding: 0 6%; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  p, ul, h2, h3, figure { padding: 0 12%; }
}

@media (min-width: 1200px) {
  p, ul, h2, h3, figure { padding: 0 16%; }
}