@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

* {
  box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif; }

header {
  transition: 0s linear;
  transition-property: background-position;
  height: 100%;
  max-height: 100%;
  color: white;
  position: relative;
  overflow: hidden; }
  header .video-background {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  header video {
    position: relative;
    top: 0;
    min-width: 100%; }
    @media (max-width: 177vh) {
      header video {
        /*TODO: JS FIX*/
        min-height: 100%;
        min-width: initial; } }
  header .quote {
    z-index: 30;
    position: absolute;
    bottom: 10vh;
    right: 80px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; }
    @media (max-width: 1000px) {
      header .quote {
        right: 10px;
        bottom: 10px;
        left: 30px; } }
    header .quote .text {
      background: rgba(254, 0, 221, 0.8);
      color: white;
      padding: 20px 10px;
      font-size: 23px;
      font-weight: 300;
      position: relative;
      margin-right: 20px; }
      header .quote .text:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        bottom: 0;
        border-bottom: 20px solid transparent;
        border-right: 20px solid rgba(254, 0, 221, 0.8); }
      header .quote .text:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
        border-top: 20px solid transparent;
        border-left: 20px solid rgba(254, 0, 221, 0.8); }
    header .quote .source {
      display: block;
      background: rgba(178, 0, 154, 0.8);
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      font-size: 14px; }
  header .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; }
    @media (max-width: 1000px) {
      header .header {
        right: 30px;
        top: 30px;
        left: 30px;
        padding: 0;
        display: block;
        text-align: center; } }
    header .header .text {
      background: rgba(253, 208, 27, 0.9);
      padding: 10px 20px;
      font-size: 32px;
      color: white;
      font-weight: bold;
      position: relative;
      top: -200px;
      left: -50px;
      text-transform: uppercase;
      text-align: center; }
      @media (max-width: 1000px) {
        header .header .text {
          top: 0;
          left: 0;
          margin: 0px auto;
          display: inline-block; } }
      header .header .text:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        bottom: 0;
        border-bottom: 20px solid transparent;
        border-right: 20px solid rgba(253, 208, 27, 0.9); }
      header .header .text:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
        border-top: 20px solid transparent;
        border-left: 20px solid rgba(253, 208, 27, 0.9); }