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

html {
    height: 100%;
    font-size: 100%;
}

body {
    font-family: "Open Sans";
    color: white;
    min-height: 100%;
}

.navbar {
    position: relative;
    padding: 0.5rem;
    background-color: rgba(255,255,255,0.1);
    z-index: 1;
}

.navbar .logo {
    position: relative;
    left: 2rem;
    cursor: pointer;
}

.navbar .links-container {
  display: table;
  position: absolute;
  top: 0;
  right: 0;
  height: 100px;
  color: white;
  text-decoration: none;
}

.links-container .navbar-link {
  display: table-cell;
  position: relative;
  height: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: middle;
  color: white;
  font-size: 0.625rem;
  letter-spacing: 0.05rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.links-container .navbar-link:hover {
  color: rgb(233,50,117);
}

.container {
  margin: 0 auto;
  max-width: 64rem;
}

.container.narrow {
  max-width: 56rem;
}

/* Medium and small screens (640px) */
@media (min-width: 640px) {
  html { font-size: 112%; }

  .column {
    float: left;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; }
}

/* Large Screens (1024px) */
@media (min-width: 1024px) {
  html { font-size: 120%; }
}

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

.clearfix::after {
  clear: both;
}