* {
  box-sizing: border-box; }

@-webkit-keyframes drift-fog {
  0% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(110%); } }

@-moz-keyframes drift-fog {
  0% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(110%); } }

@-o-keyframes drift-fog {
  0% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(110%); } }

@keyframes drift-fog {
  0% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(110%); } }

@-webkit-keyframes drift-fog-reverse {
  0% {
    transform: translateX(100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-110%); } }

@-moz-keyframes drift-fog-reverse {
  0% {
    transform: translateX(100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-110%); } }

@-o-keyframes drift-fog-reverse {
  0% {
    transform: translateX(100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-110%); } }

@keyframes drift-fog-reverse {
  0% {
    transform: translateX(100%); }
  50% {
    transform: translateX(0px); }
  100% {
    transform: translateX(-110%); } }

#app {
  position: relative; }

#fog-1 {
  position: fixed;
  top: 23%;
  -webkit-animation: drift-fog 227s infinite;
  -moz-animation: drift-fog 227s infinite;
  -o-animation: drift-fog 227s infinite;
  animation: drift-fog 227s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear; }

#fog-2 {
  position: fixed;
  top: 16%;
  -webkit-animation: drift-fog-reverse 193s infinite;
  -moz-animation: drift-fog-reverse 193s infinite;
  -o-animation: drift-fog-reverse 193s infinite;
  animation: drift-fog-reverse 193s infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear; }

#fog-3 {
  position: fixed;
  top: 34%; }

#logo {
  opacity: 0.3; }

#logos {
  padding: 32px 32px 0; }

#logo {
  display: none; }

.fogLogo {
  display: block;
  max-width: 100%; }

@media (min-width: 1200px) {
  #logos {
    padding: 0; }
  #logo {
    display: block; }
  .fogLogo {
    position: fixed;
    width: 490px;
    top: 46%;
    right: 2%;
    transform: translateY(-23%) translateX(-1%); } }

@media (min-width: 1430px) {
  .fogLogo {
    width: 680px; } }

html, body {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  background-color: #465057;
  background-image: url("/img/dark-gradient-slice.png");
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: contain;
  border: none;
  padding: 0;
  margin: 0; }

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

h2, h3 {
  font-family: 'Space Mono'; }

h1.font-alt {
  font-family: 'Space Mono'; }

p {
  font-weight: 300;
  margin-top: 64px; }

h1 {
  font-size: 55px; }

h2 {
  font-size: 47.5px; }

h3 {
  font-size: 40px; }

p,
li {
  font-size: 35px; }

a {
  font-size: 30px; }

ul {
  list-style: none; }

a {
  color: #50E3C2;
  text-decoration: none;
  cursor: pointer; }

h1 {
  color: #fff; }

h1.alt {
  color: #50E3C2; }

h1.light {
  color: #D7F9F1; }

h2 {
  color: #fff; }

h2.alt {
  color: #50E3C2; }

h3 {
  color: #fff; }

h3.alt {
  color: #50E3C2; }

.thin {
  font-weight: 300; }

.thick {
  font-weight: 400; }

.fat {
  font-weight: 500; }

section {
  padding-top: 128px;
  padding-bottom: 128px; }

section.lead {
  padding-top: 126px; }

@media (min-width: 1200px) {
  section {
    padding-top: 256px;
    padding-bottom: 256px; }
  section.lead {
    padding-top: 356px; } }

section.easterEgg {
  padding-top: 512px; }

.copyColumn {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 128px;
  max-width: 680px; }

.serviceBlock:last-child {
  padding-bottom: 0; }

.serviceBlock {
  padding-bottom: 128px; }

.serviceIcon {
  margin-bottom: 16px; }

.u-centerBlock {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.u-imgResp {
  display: block;
  max-width: 100%; }

.u-textCenter {
  text-align: center; }

.icon-inline {
  max-width: 25px;
  display: inline-block;
  position: relative;
  top: -12px; }
