scaffold.scss

html, body {
  margin:0;
  padding:0;
  color:#212121;
  font-size: 16px;
  font-weight: 300;
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
  font-family: $body-font;
}

a {
  color: $csail-orange;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: $csail-yellow;
  text-decoration: underline;
}

#center {
  margin: 10px auto;
  max-width: 950px;
  padding: 0 20px;
}

#center * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h2 {
  font-family: $heading-font;
  font-weight: 500;
  font-size: 1.3rem;
}

/* pure-hidden-xs */
@media screen and (max-width:567px) {
  .pure-visible-sm{display:none}
  .pure-visible-md{display:none}
  .pure-visible-lg{display:none}
  .pure-visible-xl{display:none}
  .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
  .pure-visible-xs{display:none}
  .pure-visible-md{display:none}
  .pure-visible-lg{display:none}
  .pure-visible-xl{display:none}
  .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {
  .pure-visible-xs{display:none}
  .pure-visible-sm{display:none}
  .pure-visible-lg{display:none}
  .pure-visible-xl{display:none}
  .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
  .pure-visible-xs{display:none}
  .pure-visible-sm{display:none}
  .pure-visible-md{display:none}
  .pure-visible-xl{display:none}
  .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:1280px) {
  .pure-visible-xs{display:none}
  .pure-visible-sm{display:none}
  .pure-visible-md{display:none}
  .pure-visible-lg{display:none}
  .pure-hidden-xl{display:none}
}