@import "../fonts/clearsans/clearsans.css";

*, *::after, *::before {
  box-sizing: border-box;
}

body {
  background-color: #1A1A1A;
  color: #FFF;
  font-family: "Clear Sans", sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  body {
    margin: 5%;
  }
}
@media (min-width: 768px) {
  body {
    margin: 3.6%;
  }
}


h1 {
  font-size: 2.28em;
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: normal;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

p, ul, blockquote {
  margin: 1rem 0;
}

ul {
  padding: 0;
  list-style: none;
}

blockquote {
  margin-left: 0;
}
cite {
  display: block;
  margin: 1rem 0;
}

.font-xs {
  font-size: 0.75em;
  font-weight: 500;
}

.font-lg {
  font-size: 1.15em;
}


/* --- Logo holder --- */
@media (max-width: 767px) {
  .logo-holder {
    margin: 15% 5%;
  }
}
@media (min-width: 768px) and (max-width:1279px) {
  .logo-holder {
    width: 42.8%;
  }
}
@media (min-width: 1280px) {
  .logo-holder {
    width: 26%;
  }
}
.logo-holder h1 {
  width: 3.6em;
  margin-left: 1.3em;
  line-height: 1.1;
}
.logo-holder a, .logo-holder a:visited {
  color: #FFF;
  text-decoration: none;
}
.logo-holder a:hover, .logo-holder a:active {
  text-decoration: underline;
}
.logo-holder a:first-of-type{
  margin-left: -1.3em;
}
.logo-holder a:last-of-type{
  margin-left: 3.9em;
  display: inline-block;
  text-indent: -2.4em;
  margin-top: -1.1em;
}

/* --- Columns --- */
@media (max-width: 767px) {
  .columns-container {
    margin-left: -5%;
    margin-right: -5%;
  }
  .column {
    margin: 15% 5%;
  }
}
@media (min-width: 768px) and (max-width:1279px) {
  .columns-container {
    margin-left: -3.6%;
    margin-right: -3.6%;
  }
  .column {
    float:left;
    width: 42.8%;
    margin: 3.6%;
  }
  .main-content .column:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 1280px) {
  .columns-container {
    margin-left: -3.6%;
    margin-right: -3.6%;
  }
  .column {
    float:left;
    width: 26%;
    margin: 3.6%;
  }
  .main-content .column:nth-child(3n+1) {
    clear: left;
  }
}

/* --- Grid image --- */
@media (max-width: 767px) {
  .image-grid {
    margin-left: -5%;
    margin-right: -5%;
  }
  .image-grid img {
    float:left;
    width: 40%;
    margin: 5%;
  }
  .image-grid img:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 768px) and (max-width:1279px) {
  .image-grid {
    margin-left: -3.6%;
    margin-right: -3.6%;
  }
  .image-grid img{
    float:left;
    width: 26%;
    margin: 3.6%;
  }
  .image-grid img:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1280px) {
  .image-grid {
    margin-left: -3.6%;
    margin-right: -3.6%;
  }
  .image-grid img {
    float:left;
    width: 17.8%;
    margin: 3.6%;
  }
  .image-grid img:nth-child(4n+1) {
    clear: left;
  }
}

/* --- Entry summary --- */
.entry-summary h2 {
  margin: 0;
}

/* --- List-item --- */
.list-item:not(.compact) {
  margin-bottom: 1em;
}
.list-item.prefixed:before {
  content: "|";
  margin-right: .5em;
}

/* --- Dialogue --- */
.dialogue {
  max-width: 33em;
  margin-left: 1.29em;
  text-indent: -1.29em;
  margin-top: 0;
  margin-bottom: 0;
}
.dialogue.indent {
  margin-left: 4em;
}

/* --- Clearfix --- */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}