/* Necessary to keep footer aligned */
html {
  position: relative;
  min-height: 100%;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

html,
body {
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
}

body {
  font-family: "Roboto", sans-serif;
  text-rendering: optimizeLegibility;
}

header {
  height: 66px;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
}

nav {
  height: 90px;
  width: 100%;
  margin-bottom: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.tabs {
  position: relative;
  left: 50%;
  height: 100%;
  padding-top: 37px;
  margin: 0 auto;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

.tab {
  display: inline-block;
}

.tab + .tab {
  margin-left: 40px;
}

.navLink {
  color: #999;
  transition: color 0.2s ease;
  text-decoration: none;
  text-transform: uppercase;
}

.navLink:hover {
  color: #333;
}

.navLink:active {
  color: #009fe0;
}

.navLink:active,
.navLink:focus {
  outline: none;
}

.tab.active .navLink {
  color: #009fe0;
}

.logo {
  position: relative;
  top: 50%;
  margin-top: 0px;
  margin-left: -34px;
  transform: translateY(-50%) scale(0.5);
}

.content,
.about-content {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px;

  /* Necessary to keep footer aligned */
  margin-bottom: 165px;
  font-weight: normal;
  line-height: 1.6em;
}

h1 {
  color: #333;
  font-weight: 100;
  font-size: 50px;
  line-height: 70px;
}

h2 {
  color: #333;
  font-weight: normal;
  font-size: 14px;
}

.content a,
.content a:visited,
.about-content a,
.about-content a:visited {
  color: #009fe0;
}

.content a:hover,
.about-content a:hover {
  color: #333;
}

strong {
  font-weight: 500;
}

.underline {
  text-decoration: underline;
}

.upcase {
  text-transform: uppercase;
}

.indent {
  padding-left: 50px;
}

ol > li {
  margin-bottom: 10px;
}

.unstyled-list {
  padding-left: 20px;
  list-style-type: none;
}

ol.unstyled-list > li {
  margin-bottom: 0;
}

footer {
  text-align: center;
  padding: 60px 0;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

footer a,
footer a:visited {
  color: #999;
  text-decoration: none;
  text-transform: uppercase;
}

footer a:hover {
  color: #333;
}

.recruiting {
  padding-top: 15px;
  font-size: 12px;
}

.recruiting a,
.recruiting a:visited {
  font-weight: 700;
  text-transform: none;
  color: #009fe0;
}

.recruiting a:hover {
  color: #007cad;
}

.about-header {
  margin: 0;
  padding-top: 70px;
  padding-bottom: 50px;
}

p.about {
  line-height: 30px;
  font-size: 14px;
}

h2.about {
  font-weight: 700;
}

a.svg-link,
a.svg-link:visited {
  color: #999;
  text-decoration: none;
}

a.svg-link:hover,
.svg-link:hover .svg-text-link {
  color: #333;
}

a.svg-link:focus,
a.svg-link:active,
.svg-link:focus .svg-text-link,
.svg-link:active .svg-text-link,
.svg-text-link:focus,
.svg-text-link:active {
  color: #009fe0;
}

.svg-text-link {
  vertical-align: top;
  color: #009fe0;
  position: relative;
  top: -5px;
  font-size: 14px;
}

svg {
  display: inline-block;
  fill: currentColor;
  fill-rule: evenodd;
}

.maintenance-container {
  text-align: center;
}

.maintenance-logo {
  margin-top: 5em;
}

.maintenance {
  font-size: 30px;
  font-weight: 100;
  color: #333;
}

.soon {
  font-size: 18px;
  font-weight: 300;
  color: #999;
}

/* Copied from the loading-spinner.scss file for static page usage */
.loadingIndicator {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
}

.loadingIndicator.large {
  width: 65px;
  height: 65px;
}

.loadingIndicator .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.loadingIndicator .circle::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: loadingIndicatorBounceDelay 1.5s infinite ease-in-out both;
  animation: loadingIndicatorBounceDelay 1.5s infinite ease-in-out both;
}

.loadingIndicator .loadingIndicator1 {
  transform: rotate(0deg);
}

.loadingIndicator .loadingIndicator1::before {
  animation-delay: -1.35s;
}

.loadingIndicator .loadingIndicator2 {
  transform: rotate(36deg);
}

.loadingIndicator .loadingIndicator2::before {
  animation-delay: -1.2s;
}

.loadingIndicator .loadingIndicator3 {
  transform: rotate(72deg);
}

.loadingIndicator .loadingIndicator3::before {
  animation-delay: -1.05s;
}

.loadingIndicator .loadingIndicator4 {
  transform: rotate(108deg);
}

.loadingIndicator .loadingIndicator4::before {
  animation-delay: -0.9s;
}

.loadingIndicator .loadingIndicator5 {
  transform: rotate(144deg);
}

.loadingIndicator .loadingIndicator5::before {
  animation-delay: -0.75s;
}

.loadingIndicator .loadingIndicator6 {
  transform: rotate(180deg);
}

.loadingIndicator .loadingIndicator6::before {
  animation-delay: -0.6s;
}

.loadingIndicator .loadingIndicator7 {
  transform: rotate(216deg);
}

.loadingIndicator .loadingIndicator7::before {
  animation-delay: -0.45s;
}

.loadingIndicator .loadingIndicator8 {
  transform: rotate(252deg);
}

.loadingIndicator .loadingIndicator8::before {
  animation-delay: -0.3s;
}

.loadingIndicator .loadingIndicator9 {
  transform: rotate(288deg);
}

.loadingIndicator .loadingIndicator9::before {
  animation-delay: -0.15s;
}

.loadingIndicator .loadingIndicator10 {
  transform: rotate(324deg);
}

.loadingIndicator .loadingIndicator10::before {
  animation-delay: 0s;
}

@-webkit-keyframes loadingIndicatorBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes loadingIndicatorBounceDelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}