html, body {
  width: 100%;
  height: 100%; }

body {
  font-family: pt-serif-caption, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #fff; }

a, button {
  outline: none !important; }

a {
  color: #3e4844;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out; }
  a:hover, a:focus {
    color: #3e4844;
    text-decoration: underline; }

.btn.btn-outline {
  font-family: neue-kabel, sans-serif;
  border: 3px solid #fff;
  font-weight: 700;
  font-size: 1.1em;
  border-radius: 0;
  color: #fff;
  outline: none;
  background: none;
  padding: 7px 25px;
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out; }
  .btn.btn-outline:hover, .btn.btn-outline:focus {
    color: #bbb;
    border-color: #bbb;
    text-decoration: none; }

.fs-video {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 33.33333%; }

.outer-container {
  position: relative;
  display: flex;
  z-index: 1;
  min-height: 100%;
  text-align: center; }
  .outer-container.align-right {
    margin-left: 33.33333%;
    max-width: 66.66667%; }
  .outer-container .inner-container {
    align-self: center;
    padding: 50px 0;
    width: 100%; }
    .outer-container .inner-container .logo {
      max-width: 100%;
      margin-bottom: 200px; }
    .outer-container .inner-container h1 {
      font-family: quasimoda, sans-serif;
      font-weight: 400;
      font-size: 5em;
      margin-bottom: 100px;
      text-transform: uppercase; }
    .outer-container .inner-container .content {
      font-size: 2em;
      line-height: 1.3;
      margin-bottom: 75px; }
    .outer-container .inner-container .socials {
      list-style-type: none;
      margin-top: 25px;
      padding: 0; }
      .outer-container .inner-container .socials li {
        display: inline-block;
        text-align: center; }
        .outer-container .inner-container .socials li a {
          border-radius: 50%;
          display: block;
          width: 44px;
          padding: 1px 0;
          font-size: 28px;
          color: #3e4844;
          background-color: #fff; }
          .outer-container .inner-container .socials li a:hover, .outer-container .inner-container .socials li a:focus {
            background-color: #3e4844;
            color: #fff; }

@media (max-width: 1200px) {
  .outer-container .inner-container h1 {
    font-size: 4em; } }

@media (max-width: 992px) {
  .fs-video {
    object-position: right; }

  .outer-container.align-right {
    max-width: none;
    margin-left: 0; } }

@media (max-width: 768px) {
  .outer-container .inner-container {
    padding-left: 15px;
    padding-right: 15px; }
    .outer-container .inner-container .logo {
      margin-bottom: 100px; }
    .outer-container .inner-container h1 {
      font-size: 2.5em;
      margin-bottom: 50px; }
    .outer-container .inner-container .content {
      font-size: 1.5em;
      margin-bottom: 50px; } }

@media (max-width: 576px) {
  .outer-container .inner-container h1 {
    font-size: 2em; }
    .outer-container .inner-container .content {
      font-size: 1.25em; } }

@media (max-width: 330px) {
  .outer-container .inner-container h1 {
    font-size: 1.5em; }
    .outer-container .inner-container .content {
      font-size: 1.1em; } }