@import url(http://fonts.googleapis.com/css?family=Raleway:500,700,400,300,200);
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
.dark-background {
  background: #000000;
  /* Old browsers */
  background: -moz-linear-gradient(top, #181f29 0%, #000000 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181f29), color-stop(100%, #000000));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #181f29 0%, #000000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #181f29 0%, #000000 100%);
  /* W3C */
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: black;
  font-family: Raleway, Helvetica, arial, sans-serif;
  background: white;
}
.hero {
  margin-top: 60px;
  background: #000000;
  /* Old browsers */
  background: -moz-linear-gradient(top, #181f29 0%, #000000 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181f29), color-stop(100%, #000000));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #181f29 0%, #000000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #181f29 0%, #000000 100%);
  /* W3C */
  color: white;
  text-shadow: 0px 0px 2px #333;
  position: relative;
  height: 600px;
}
@media screen and (max-width: 767px) {
  .hero {
    height: 400px;
  }
}
@media screen and (min-width: 1280px) {
  .hero {
    height: 700px;
  }
}
.right {
  margin-left: auto !important;
}
video#banner {
  display: inline-block;
  width: 100%;
  position: absolute;
  bottom: 0;
  object-fit: cover;
}
@media screen and (max-width: 1080px) {
  video#banner {
    height: 100%;
    width: auto;
  }
}
.section,
.cont {
  padding: 60px 0;
}
.dark {
  background: #000000;
  /* Old browsers */
  background: -moz-linear-gradient(top, #181f29 0%, #000000 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #181f29), color-stop(100%, #000000));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #181f29 0%, #000000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #181f29 0%, #000000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #181f29 0%, #000000 100%);
  /* W3C */
  color: white;
}
.cont {
  margin: auto;
  position: relative;
  max-width: 980px;
  height: 100%;
}
.navbar {
  height: 60px;
  width: 100%;
  background: #212b39;
  z-index: 20;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  /* works with row or column */
  flex-direction: row;
  margin-bottom: 60px;
  box-shadow: 0 0 5px #00ffff;
}
.navbar-fixed {
  position: fixed;
  margin-bottom: 60px;
  top: 0;
  left: 0;
}
ul.nav {
  font-family: Raleway;
  padding-left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  /* works with row or column */
  flex-direction: row;
  margin-left: 0;
  font-size: 14pt;
  list-style: none;
}
ul.nav li {
  padding: 0 20px;
}
ul.nav li a {
  color: #ccc;
  font-weight: 200;
  text-decoration: none;
  text-transform: uppercase;
}
ul.nav li a:hover {
  font-weight: 400;
  color: #00ffff;
}
.lead {
  font-weight: 300;
  font-size: 25pt;
  text-align: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .lead {
    font-size: 18pt;
  }
}
.invite-request {
  margin-top: 40px;
  width: 100%;
  text-align: center;
  font-family: Raleway;
}
.invite-request p.emailInput input {
  width: 280px;
  border-radius: 5px;
  font-size: 18pt;
  line-height: 32px;
  text-align: center;
  font-family: Raleway;
}
.invite-request .request {
  cursor: hand;
  cursor: pointer;
  font-family: Raleway;
  display: inline-block;
  position: relative;
  line-height: 30px;
  font-weight: 500;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 18pt;
  background-color: rgba(66, 66, 66, 0.5);
  color: white;
  border: none;
}
.invite-request .request:hover,
.invite-request .request:focus {
  border-color: #676c6e;
  border-bottom-color: #444749;
  background-color: rgba(0, 0, 0, 0.75);
}
@-webkit-keyframes callToActionPulse {
  from {
    background-color: #00cccc;
    box-shadow: 0 0 9px #00cccc;
  }
  50% {
    background-color: #00ffff;
    box-shadow: 0 0 18px #00ffff;
  }
  to {
    background-color: #00cccc;
    box-shadow: 0 0 9px #00cccc;
  }
}
img.icon {
  width: 100px;
}
.bubbles-cont {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1200px;
}
.logo-cont {
  width: 80%;
  margin: auto;
  margin-top: 100px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .logo-cont {
    margin-top: 30px;
  }
}
.logo-cont img {
  width: 100%;
}
.logo-nav {
  width: 125px;
  padding: 20px 20px;
}
.logo-nav img {
  width: 100%;
}
.columns {
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  /* works with row or column */
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
}
.columns.two > .column {
  width: 40%;
}
.columns.three > .column {
  width: 30%;
}
.columns .column {
  margin: 10px;
}
.mugshot {
  border-radius: 171px;
  width: 171px;
}
.column ul {
  text-align: left;
}

.beaker,
.liquid,
.bubble {
  fill: #ccc;
}
.bubbles {
  height: 1200px;
  width: 600px;
  padding-left: 20px;
  position: absolute;
  bottom: 0;
  margin-left: -300px;
  left: 50%;
  display: inline-block;
}
.bubble {
  -webkit-animation: short-bubble 1500ms linear infinite;
  animation: short-bubble 1500ms linear infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.b2 {
  -webkit-animation: medium-bubble 5000ms linear infinite;
  animation: medium-bubble 5000ms linear infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.b3 {
  -webkit-animation-duration: 3500ms;
  animation-duration: 3500ms;
}
.b4 {
  -webkit-animation-duration: 2000ms;
  animation-duration: 2000ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  margin: 0 0 40px -9px;
  height: 7px;
  width: 6px;
}
.b5 {
  -webkit-animation: medium-bubble 3000ms linear infinite;
  animation: medium-bubble 3000ms linear infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.b6 {
  -webkit-animation-duration: 3000ms;
  animation-duration: 3000ms;
}
.b7 {
  -webkit-animation-duration: 6000ms;
  animation-duration: 6000ms;
}
.b8 {
  -webkit-animation: medium-bubble 2000ms linear infinite;
  -webkit-animation-fill-mode: forwards;
  animation: medium-bubble 2000ms linear infinite;
  animation-fill-mode: forwards;
}
@-webkit-keyframes short-bubble {
  0% {
    -webkit-transform: translate3d(5px, 0px, 0);
    opacity: 0;
  }
  13% {
    -webkit-transform: translate3d(2px, -20px, 0);
    opacity: 1;
  }
  20% {
    -webkit-transform: translate3d(5px, -40px, 0);
  }
  30% {
    -webkit-transform: translate3d(0, -60px, 0);
  }
  40% {
    -webkit-transform: translate3d(8px, -80px, 0);
  }
  50% {
    -webkit-transform: translate3d(3px, -100px, 0);
  }
  60% {
    -webkit-transform: translate3d(8px, -120px, 0);
  }
  70% {
    opacity: 0.4;
  }
  80%,
  100% {
    -webkit-transform: translate3d(0, -200px, 0);
    opacity: 0;
  }
}
@keyframes short-bubble {
  0% {
    transform: translate3d(5px, 0, 0);
    opacity: 0;
  }
  13% {
    transform: translate3d(2px, -20px, 0);
    opacity: 1;
  }
  20% {
    transform: translate3d(5px, -40px, 0);
  }
  30% {
    transform: translate3d(0px, -60px, 0);
  }
  40% {
    transform: translate3d(8px, -80px, 0);
  }
  50% {
    transform: translate3d(3px, -100px, 0);
  }
  60% {
    transform: translate3d(8px, -120px, 0);
  }
  70% {
    opacity: 0.4;
  }
  80%,
  100% {
    transform: translate3d(0, -200px, 0);
    opacity: 0;
  }
}
@-webkit-keyframes medium-bubble {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  5% {
    -webkit-transform: translate3d(4px, -20px, 0);
    opacity: 1;
  }
  10% {
    -webkit-transform: translate3d(2px, -40px, 0);
  }
  20% {
    -webkit-transform: translate3d(7px, -80px, 0);
  }
  30% {
    -webkit-transform: translate3d(5px, -120px, 0);
  }
  40% {
    -webkit-transform: translate3d(1px, -160px, 0);
  }
  50% {
    -webkit-transform: translate3d(2px, -200px, 0);
  }
  60% {
    -webkit-transform: translate3d(-3px, -240px, 0);
    opacity: 0.4;
  }
  100% {
    -webkit-transform: translate3d(0, -400px, 0);
    opacity: 0;
  }
}
@keyframes medium-bubble {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  5% {
    transform: translate3d(4px, -20px, 0);
    opacity: 1;
  }
  10% {
    transform: translate3d(2px, -40px, 0);
  }
  20% {
    transform: translate3d(7px, -80px, 0);
  }
  30% {
    transform: translate3d(5px, -120px, 0);
  }
  40% {
    transform: translate3d(1px, -160px, 0);
  }
  50% {
    transform: translate3d(2px, -200px, 0);
  }
  60% {
    transform: translate3d(-3px, -240px, 0);
    opacity: 0.4;
  }
  100% {
    transform: translate3d(0, -400px, 0);
    opacity: 0;
  }
}