/* Base */

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #FAFAFA;
  color: #151515;
  font-family: 'Lora', serif;
  font-size: 16px;
  line-height: 225%;
}

h1, h2, h3, h4 { font-weight: 400; }

h1 {
  font-family: 'Libre Baskerville', serif;
  color: #FFFFFF;
}

h2 {
  font-family: 'Libre Baskerville', serif;
  color: #373B3E;
}

h3 {
  font-family: 'Libre Baskerville', serif;
}

h4 {
  font-family: 'Oswald', sans-serif;
  color: #CCCCCC;
  letter-spacing: 0.88px;
  text-shadow: 0px 1px 1px #FFFFFF;
  text-transform: uppercase;
}

p {
  margin: 24px 0;
}

p:last-child {
  margin-bottom: 0;
}

a, a:link, a:active, a:visited {
  color: #373B3E;
  text-decoration: none;
}

a:hover, a:focus {}

i { font-style: italic; }

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

section {
  float: left;
  display: block;
  width: 100%;
}

/* Utilities */

.flex-container {
  clear: both;
  display: block;
  margin: 0 auto;
  max-width: 1600px;
  padding: 0 5.2%;
  width: 100%;
}

.row {
  display: block;
}

.row:before, .row:after {
  content: " ";
  display: table;
}

.col {
  float: left;
  vertical-align: top;
}

.col__1-of-6 {
  width: 48px;
}

.table {
  display: table;
  table-layout: auto;
  width: 100%;
}

.table--fixed {
  table-layout: fixed;
}

.table__cell {
  display: table-cell;
  vertical-align: middle;
}

.table__cell--center {
  text-align: center;
}

.table__cell--top {
  vertical-align: top;
}

.desktop--show { display: none; }

/* Sections */

section.intro {
  background: #373B3E;
  padding: 48px 0 24px;
}

.intro__logo {
  color: white;
  float: left;
  font-size: 32px;
  margin: 6px 24px 0 0;
}

.grid figure, .grid figure img {
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.kickstarter__link:hover {
  background: #081245;
}

.chalmers__link:hover img, .moonlight__link:hover img, .invision__link:hover img, .roadtec__link:hover img, .joycarpet__link:hover img {
  opacity: 0.6;
}

.pt192 {
  padding-top: 192px;
}
.pb192 {
  padding-bottom: 192px;
}
.pt96 {
  padding-top: 96px;
}
.pb96 {
  padding-bottom: 96px;
}
.project__bg--green {
  background: #2BDE73;
  color: #FFFFFF;
}
.project__bg--blue, .chalmers__link {
  background: #009FDA;
  color: #FFFFFF;
}
.project__bg--blue-dark, .roadtec__link {
  background: #0064A3;
  color: #FFFFFF;
}
.project__bg--purple, .moonlight__link {
  background: #664FA6;
  color: #FFFFFF;
}
.project__bg--orange, .invision__link {
  background: #ff4f0e;
  color: #FFFFFF;
}
.project__bg--red, .joycarpet__link {
  background: #ED1C24;
  color: #FFFFFF;
}
.project__bg--grey {
  background: #F9F9F9;
}
.project__bg--green.opac {
  background: #80EBAB;
}
.project__bg--blue.opac {
  background: #66C5E9;
}
.project__bg--blue-dark.opac {
  background: #0064A3;
}
.project__bg--blue-purple.opac {
  background: #A395CA;
}
.project__bg--orange.opac {
  background: #FF956E;
}
.project__bg--red.opac {
  background: #F4777C;
}

section.about {
  padding: 48px 0;
}

a.social__link {
  color: white;
  height: 16.66vw;
}

.social__link span { font-size: 32px; }

.social__link--instagram { background: #3f729b; }

.social__link--linkedin { background: #0077B5; }

.social__link--pinterest { background: #BD081C; }

.social__link--twitter { background: #1DA1F2; }

.social__link--spotify { background: #23CF5F; }

.social__link--more { background: #373B3E; }

.contact__link {
  display: block;
  background: white;
  font-family: 'Libre Baskerville', serif;
  padding: 24px 0;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 479px) {
  h1, h2, h3, h4 { font-size: 24px; }
}

@media screen and (min-width: 480px) {
  h1 {
    font-size: 48px;
    font-size: 3.25vw;
    line-height: 133%;
  }

  h2 {
    font-size: 48px;
    font-size: 3.25vw;
    line-height: 133%;
  }

  h3 {
    font-size: 48px;
    font-size: 3.25vw;
    line-height: 133%;
  }

  .col__1-of-3 { width: 33.33333%; }

  section.intro { padding: 192px 0 96px; }

  .intro__logo { font-size: 48px; }
}

@media screen and (min-width: 800px) {
  body {
    font-size: 18px;
    line-height: 267%;
  }

  h2 {
    font-size: 96px;
    font-size: 6.67vw;
    display: inline;
    width: auto;
  }

  h4 {
    float: right;
    margin: 24px 2.4% 0 0;
  }

  .col__1-of-2 {
    padding: 0 0 0 4.8%;
    width: 45.2%;
  }

  .mt48 {
    margin-top: 48px;
  }

  section.about { padding: 144px 0; }

  .social__link span { font-size: 48px; }

  .contact__link { padding: 96px 0; }

  .desktop--show { display: inline-block; }

  .desktop--block { display: block; }
}