* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: none; }

body {
  font-family: 'Titillium Web', sans-serif;
  overflow-x: hidden !important; }

.body {
  position: relative;
  z-index: 2;
  margin-bottom: 15.85%;
  background: white; }
  @media (max-width: 768px) {
    .body {
      margin-bottom: 139px; } }

.hero-container {
  padding: 0 9.77%;
  display: flex;
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  z-index: 3; }
  .hero-container h1, .hero-container h2 {
    color: white; }
  .hero-container h2 {
    margin: 10px 0 20px; }
  .hero-container .btn {
    margin-top: 20px; }

.hero-container.right {
  justify-content: flex-end; }
  @media (max-width: 768px) {
    .hero-container.right {
      justify-content: flex-start; } }

h1 {
  font-size: 52px;
  margin: 0; }
  @media (max-width: 768px) {
    h1 {
      font-size: 28px; } }

h2 {
  font-size: 22px;
  margin: 0; }
  @media (max-width: 768px) {
    h2 {
      font-size: 16px; } }

.btn {
  background: transparent;
  border: 1px solid white;
  font-size: 18px;
  line-height: 16px;
  padding: 15px 25px;
  color: white;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.25s ease;
  -moz-transition: 0.25s ease;
  -o-transition: 0.25s ease;
  transition: 0.25s ease; }
  @media (max-width: 768px) {
    .btn {
      padding: 10px 17px;
      font-size: 14px;
      line-height: 14px; } }
  .btn span {
    position: relative;
    z-index: 2; }
  .btn:hover, .btn:active, .btn:focus {
    color: black; }
    .btn:hover .btn-hover, .btn:active .btn-hover, .btn:focus .btn-hover {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }
  .btn .btn-hover {
    width: 103%;
    height: 102%;
    position: absolute;
    z-index: 1;
    left: -1px;
    top: 0;
    background: white;
    -webkit-transition: 0.25s ease;
    -moz-transition: 0.25s ease;
    -o-transition: 0.25s ease;
    transition: 0.25s ease;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%); }

@media (max-width: 768px) {
  .body .top-section .video-box {
    max-width: calc(100% - 20px); } }

@media (max-width: 768px) {
  .body .top-section .video-box .text-area p {
    font-size: 16px; } }

.btn.black {
  border-color: black;
  color: black; }
  .btn.black:hover, .btn.black:active, .btn.black:focus {
    color: white !important; }
  .btn.black .btn-hover {
    background: black; }

.mejs__duration, .mejs__currenttime {
  display: none !important; }

.mejs__duration:first-child, .mejs__currenttime:first-child {
  display: block !important; }

header .head-flex {
  width: 100%;
  padding: 3.15% 4.75%;
  position: fixed;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 3;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.25) 0%, transparent 90%, transparent 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25) 0%, transparent 90%, transparent 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, transparent 90%, transparent 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
  header .head-flex .hover-container {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    header .head-flex .hover-container > a {
      text-decoration: none; }
      header .head-flex .hover-container > a i {
        font-size: 60px;
        color: white;
        position: relative;
        top: 10px; }
        @media (max-width: 768px) {
          header .head-flex .hover-container > a i {
            font-size: 40px;
            top: 6px; } }
    header .head-flex .hover-container .menu-holder {
      overflow: hidden;
      margin: 0 30px 0 0; }
      header .head-flex .hover-container .menu-holder ul {
        list-style: none;
        padding: 0;
        margin: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease; }
        @media (max-width: 768px) {
          header .head-flex .hover-container .menu-holder ul {
            opacity: 1;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            -o-transform: translateX(0);
            transform: translateX(0); } }
        header .head-flex .hover-container .menu-holder ul li {
          display: inline-block;
          font-size: 16px;
          color: white;
          margin: 0 10px; }
          @media (max-width: 768px) {
            header .head-flex .hover-container .menu-holder ul li {
              margin: 0 5px;
              font-size: 14px; } }
          header .head-flex .hover-container .menu-holder ul li a {
            color: white;
            text-decoration: none !important; }
    header .head-flex .hover-container .menu-holder.active ul {
      opacity: 1;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0); }

footer {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%; }
  footer .foot-flex {
    background: #f79448;
    padding: 7.3% 9.77%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (max-width: 768px) {
      footer .foot-flex {
        flex-wrap: wrap;
        padding: 23px 31px; } }
    footer .foot-flex > a {
      color: white;
      text-decoration: none; }
      @media (max-width: 768px) {
        footer .foot-flex > a {
          width: 100%;
          font-size: 14px; } }
      footer .foot-flex > a span {
        display: inline-block;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%); }
      footer .foot-flex > a:hover span {
        -webkit-transform: translateX(15%);
        -moz-transform: translateX(15%);
        -o-transform: translateX(15%);
        transform: translateX(15%); }
    footer .foot-flex ul {
      list-style: none;
      margin: 0;
      padding: 0; }
      @media (max-width: 768px) {
        footer .foot-flex ul {
          width: 100%;
          font-size: 14px;
          margin: 15px 0; } }
      footer .foot-flex ul li {
        display: inline-block;
        margin: 0 3px;
        font-size: 14px; }
        footer .foot-flex ul li:first-child {
          margin-left: 0; }
        footer .foot-flex ul li a {
          color: white; }
    footer .foot-flex p {
      margin: 0; }
      @media (max-width: 768px) {
        footer .foot-flex p {
          width: 100%;
          font-size: 14px; } }

@font-face {
  font-family: "featherstone";
  src: url("../fonts/featherstone.eot");
  src: url("../fonts/featherstone.eot?#iefix") format("embedded-opentype"), url("../fonts/featherstone.woff") format("woff"), url("../fonts/featherstone.ttf") format("truetype"), url("../fonts/featherstone.svg#featherstone") format("svg");
  font-weight: normal;
  font-style: normal; }
[data-icon]:before {
  font-family: "featherstone" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "featherstone" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-mark:before {
  content: "\61"; }

.mejs__time-handle-content {
  transform: scale(1) !important;
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  border-radius: 0 !important; }

.mejs__time-total, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-current, .mejs__time-float, .mejs__time-hovered, .mejs__time-float-current, .mejs__time-float-corner, .mejs__time-marker {
  border-radius: 0 !important; }

.mejs__overlay-play {
  height: 100% !important; }

.mejs__time-current, .mejs__time-handle-content {
  background: rgba(247, 148, 72, 0.9) !important; }

.mejs__time-handle-content {
  border-color: white !important;
  background: white !important; }

.construction {
  width: 100%;
  height: 40px;
  background: black;
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  position: fixed;
  z-index: 3; }

.trio-images {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 75px auto; }
  .trio-images > div {
    display: block;
    width: 31%;
    height: 0;
    padding-bottom: 46.5%;
    position: relative;
    overflow: hidden; }
    .trio-images > div > img {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%; }

.trio-images.square {
  margin: 1.5% auto; }
  .trio-images.square > div {
    padding-bottom: 34%; }
    .trio-images.square > div > img {
      height: auto; }

.duo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 75px auto; }
  .duo > div {
    display: block;
    width: 48%;
    height: 0;
    padding-bottom: 72%;
    position: relative; }
    .duo > div > img {
      display: block;
      position: absolute;
      width: 100%;
      height: auto; }

.duo.overlap {
  margin: 0 auto;
  position: relative;
  z-index: 3; }
  .duo.overlap > div {
    padding-bottom: 65%; }
    .duo.overlap > div > img {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }

.full-page-padded {
  width: 100%;
  height: 0;
  padding-bottom: 56.24%;
  overflow: hidden;
  position: relative;
  margin: 75px auto; }
  .full-page-padded > img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute; }

.full-page-padded.overlap {
  margin: 0 0 1.3% 0;
  padding-bottom: 63.24%;
  overflow: initial; }
  .full-page-padded.overlap > img {
    top: 100%;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%); }

.full-page-padded.tall {
  padding-bottom: 150%; }

.full-page-padded.split {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 0; }
  .full-page-padded.split > div {
    width: calc(50% - 15px);
    height: auto;
    position: relative;
    padding-bottom: 0;
    overflow: hidden; }
    @media (max-width: 992px) {
      .full-page-padded.split > div {
        width: calc(50% - 5px); } }
    .full-page-padded.split > div > img {
      width: 100%; }

.full-page-add {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
  background: black;
  overflow: hidden; }
  @media (max-width: 768px) {
    .full-page-add {
      height: 500px; } }
  .full-page-add img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }

.full-page-add.index:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  z-index: 3; }
  @media (max-width: 768px) {
    .full-page-add.index:before {
      display: block; } }

.full-page-add.tall {
  height: 0;
  padding-bottom: 150%;
  overflow: hidden; }
  .full-page-add.tall img {
    height: auto; }

.full-page-add.split {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: white; }
  .full-page-add.split > img {
    width: 50%;
    height: auto; }

.full-page-add.split.space {
  justify-content: space-between;
  height: 0;
  padding-bottom: 68%;
  align-items: flex-start;
  margin-bottom: 100px; }
  @media (max-width: 575px) {
    .full-page-add.split.space {
      margin-bottom: 75px; } }
  .full-page-add.split.space > img {
    width: calc(50% - 15px);
    height: auto; }
    @media (max-width: 575px) {
      .full-page-add.split.space > img {
        width: calc(50% - 5px); } }

.project-container {
  width: calc(100% - 60px);
  max-width: 1600px;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .project-container {
      width: calc(100% - 20px); } }

img.full-width {
  width: 100%;
  height: auto; }

.about-body {
  width: 100%;
  height: auto; }
  @media (max-width: 768px) {
    .about-body {
      display: none; } }
  .about-body .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    width: calc(100% - 30px);
    position: relative;
    height: auto; }
    .about-body .flex-container > div {
      width: 48%; }
    .about-body .flex-container .phone-container {
      height: auto; }
      .about-body .flex-container .phone-container .phone-box {
        width: 100%;
        height: 0;
        padding-bottom: 136%;
        background: url(../images/about/phone.png) no-repeat center center;
        background-size: contain;
        position: relative; }
        .about-body .flex-container .phone-container .phone-box .tinder-box {
          position: absolute;
          width: 44%;
          height: 38.6%;
          left: 49.75%;
          top: 42%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          -o-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0); }
        .about-body .flex-container .phone-container .phone-box .button-box {
          position: absolute;
          width: 38%;
          height: 11%;
          left: 49.75%;
          top: 69%;
          -webkit-transform: translate3d(-50%, -50%, 0);
          -moz-transform: translate3d(-50%, -50%, 0);
          -o-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
          display: flex;
          justify-content: space-between; }
          .about-body .flex-container .phone-container .phone-box .button-box > button {
            background: transparent;
            border: 0;
            outline: none;
            width: 46%; }
            .about-body .flex-container .phone-container .phone-box .button-box > button img {
              width: 100%; }
    .about-body .flex-container .copy-content .btn {
      margin-right: 15px; }
    .about-body .flex-container .copy-content .paragraph-holder {
      width: 100%;
      height: 100px;
      position: relative; }
      .about-body .flex-container .copy-content .paragraph-holder p {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
        margin-bottom: 40px;
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease; }
      .about-body .flex-container .copy-content .paragraph-holder p.active {
        opacity: 1; }

.about-form-area {
  width: 100%;
  height: auto; }
  @media (max-width: 768px) {
    .about-form-area {
      display: none; } }
  .about-form-area .flex-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 200px 0;
    width: calc(100% - 30px);
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .about-form-area .flex-container .copy-block {
      width: 40%; }
      .about-form-area .flex-container .copy-block p {
        font-size: 20px; }
    .about-form-area .flex-container .form-container {
      width: 52%; }
      .about-form-area .flex-container .form-container .row {
        margin-left: -5px;
        margin-right: -5px; }
        .about-form-area .flex-container .form-container .row .col-12 {
          padding: 0 5px; }

.demo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }
  .demo__content {
    overflow: hidden;
    position: relative;
    height: 100%;
    user-select: none; }
  .demo__card-cont {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0; }
  .demo__card {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%; }
    .demo__card.reset {
      transition: transform 0.3s;
      transform: translateX(0) !important; }
      .demo__card.reset .demo__card__choice {
        transition: opacity 0.3s;
        opacity: 0 !important; }
    .demo__card.inactive {
      transition: transform 0.3s; }
    .demo__card.to-left {
      transform: translateX(-30rem) rotate(-30deg) !important; }
    .demo__card.to-right {
      transform: translate(30rem) rotate(30deg) !important; }
    .demo__card.below {
      z-index: 1; }
    .demo__card__top {
      height: 100%; }
    .demo__card__img {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      background-image: url("../images/about/tinder-5.png");
      background-size: contain; }
    .demo__card__name {
      text-align: center;
      font-size: 2rem;
      font-weight: bold;
      color: #fff; }
    .demo__card__btm {
      height: 11.5rem;
      background: #FFFFFF; }
    .demo__card__we {
      text-align: center;
      font-size: 2.2rem;
      line-height: 11.5rem; }
    .demo__card__choice {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0; }
      .demo__card__choice:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2rem;
        height: 2rem;
        margin-left: -1rem;
        color: #fff;
        border-radius: 50%;
        box-shadow: -2rem -3rem #fff, 2rem -3rem #fff; }
      .demo__card__choice:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4rem;
        height: 1.5rem;
        margin-left: -2rem;
        border: 0.6rem solid #fff;
        border-bottom: none;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1.5rem; }
      .demo__card__choice.m--reject {
        background: #FF945A; }
      .demo__card__choice.m--like {
        background: #B1DA96; }
        .demo__card__choice.m--like:after {
          transform: scaleY(-1); }
    .demo__card__drag {
      z-index: 5;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: grab; }
  .demo__tip {
    text-align: center;
    font-size: 2.2rem; }

.demo__card:nth-child(2) .demo__card__img {
  background-image: url("../images/about/tinder-4.png"); }

.demo__card:nth-child(3) .demo__card__img {
  background-image: url("../images/about/tinder-3.png"); }

.demo__card:nth-child(4) .demo__card__img {
  background-image: url("../images/about/tinder-2.png"); }

.demo__card:nth-child(5) .demo__card__img {
  background-image: url("../images/about/tinder-1.png"); }

.float-group {
  width: 100%;
  position: relative;
  margin-bottom: 10px; }
  .float-group .float-style {
    width: 100%; }
  .float-group input[type=text].float-style,
  .float-group input[type=number].float-style,
  .float-group input[type=email].float-style,
  .float-group input[type=password].float-style {
    height: 45px;
    background: white;
    border: 1px solid black;
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    font-size: 14px;
    color: black;
    font-weight: 500;
    outline: none;
    padding: 18px 10px 5px 5px; }
  .float-group input[type=text].float-style.active + label,
  .float-group input[type=number].float-style.active + label,
  .float-group input[type=email].float-style.active + label,
  .float-group input[type=password].float-style.active + label,
  .float-group textarea.float-style.active + label {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 11px;
    color: #707070;
    z-index: 2; }
  .float-group input[type=text]:disabled {
    background: #eee;
    border-color: #eee;
    color: #f0f0f0;
    cursor: not-allowed; }
  .float-group label {
    position: absolute;
    top: 11px;
    left: 6px;
    font-size: 14px;
    color: #707070;
    z-index: 2;
    -webkit-transition: 0.18s ease;
    -moz-transition: 0.18s ease;
    -o-transition: 0.18s ease;
    transition: 0.18s ease; }
  .float-group button.search {
    border: 0;
    background: transparent;
    box-shadow: none;
    position: absolute;
    right: 7px;
    top: 11px;
    color: #2e2e2e;
    z-index: 3;
    cursor: pointer;
    padding: 0; }

.float-group.textarea label {
  position: absolute; }
.float-group.textarea textarea {
  border: 1px solid black;
  outline: none;
  padding: 18px 6px 6px;
  color: black;
  font-weight: 500;
  font-size: 14px;
  top: 0;
  position: relative; }
.float-group.textarea textarea:disabled {
  background: #eee;
  border-color: #eee;
  color: #f0f0f0;
  cursor: not-allowed; }

.float-group.option {
  padding-bottom: 2px; }
  .float-group.option p {
    margin-bottom: 8px;
    font-size: 16px;
    color: black; }
  .float-group.option label {
    color: white;
    position: relative;
    left: 0;
    top: 1px;
    margin-right: 15px;
    font-size: 14px;
    display: inline-block; }

.float-group.select label {
  position: relative;
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 3px;
  display: block;
  left: 0;
  top: 0;
  color: black; }
.float-group.select .float-style {
  height: 28px;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid black;
  font-size: 14px;
  color: black;
  padding: 0 8px;
  outline: none;
  background: url(../img/select.svg) white no-repeat top 6px right 5px;
  background-size: 14px 14px; }

#form-messages.error {
  color: #dc3545 !important; }

#form-messages.success {
  color: #28a745 !important; }

.mobile-section {
  display: none; }
  @media (max-width: 768px) {
    .mobile-section {
      display: block;
      background: #e9e8e8; }
      .mobile-section .about-container {
        width: 85%;
        margin: 0 auto;
        top: 100px;
        position: relative; }
        .mobile-section .about-container h1 {
          margin-bottom: 15px; }
        .mobile-section .about-container a {
          color: black; }
        .mobile-section .about-container p {
          font-size: 14px; }
      .mobile-section .mobile-background img {
        max-width: 100%;
        width: auto; } }

.video-box.inactive .mejs__controls {
  opacity: 0 !important; }
.video-box.inactive .embed-responsive + h2 {
  opacity: 1 !important; }

.video-box .mejs__controls {
  opacity: 1 !important; }
.video-box .embed-responsive + h2 {
  opacity: 0 !important; }

.cocktail.top-section .text-area {
  margin-bottom: 100px; }

.top-section {
  position: relative; }
  .top-section .video-box {
    max-width: 1200px;
    margin: 100px auto;
    position: relative;
    z-index: 2; }
    .top-section .video-box .mejs__controls {
      opacity: 1;
      -webkit-transition: 0.25s ease;
      -moz-transition: 0.25s ease;
      -o-transition: 0.25s ease;
      transition: 0.25s ease; }
    .top-section .video-box .embed-responsive + h2 {
      opacity: 0;
      color: white;
      font-size: 32px;
      position: absolute;
      left: 3%;
      bottom: 60px;
      -webkit-transition: 0.25s ease;
      -moz-transition: 0.25s ease;
      -o-transition: 0.25s ease;
      transition: 0.25s ease; }
      @media (max-width: 768px) {
        .top-section .video-box .embed-responsive + h2 {
          bottom: 10px;
          font-size: 20px; } }
  .top-section .text-area {
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: 14%;
    position: relative;
    z-index: 2; }
    @media (max-width: 992px) {
      .top-section .text-area {
        max-width: 90%; } }
    .top-section .text-area h2 {
      margin: 10px 0 50px;
      color: black; }
    .top-section .text-area p {
      font-size: 22px; }
      @media (max-width: 992px) {
        .top-section .text-area p {
          font-size: 16px; } }
      .top-section .text-area p span {
        font-size: 14px; }
        @media (max-width: 992px) {
          .top-section .text-area p span {
            font-size: 10px; } }

.cocktail.top-section .cocktail-background-1 {
  background: url("../images/video/cocktail/background-1.jpg") no-repeat;
  background-size: contain;
  width: 27%;
  height: 0;
  padding-bottom: 24%;
  left: 0;
  top: 48%;
  position: absolute;
  z-index: 1; }
  @media (max-width: 992px) {
    .cocktail.top-section .cocktail-background-1 {
      display: none; } }

.cocktail.top-section .cocktail-background-2 {
  background: url("../images/video/cocktail/background-2.jpg") no-repeat;
  background-size: contain;
  width: 34%;
  height: 0;
  padding-bottom: 57%;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 1; }
  @media (max-width: 992px) {
    .cocktail.top-section .cocktail-background-2 {
      display: none; } }

.cocktail-split {
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: flex-start;
  align-items: center; }
  @media (max-width: 768px) {
    .cocktail-split {
      height: 300px; } }
  .cocktail-split > div {
    position: relative;
    height: 100%; }
    .cocktail-split > div:first-child {
      width: 62.5%; }
    .cocktail-split > div:last-child {
      width: 37.5%; }
  .cocktail-split img {
    position: absolute;
    object-fit: cover;
    object-position: center center;
    height: 100%;
    width: 100%; }

.cocktail.bottom-section {
  padding-bottom: 4%;
  position: relative; }
  .cocktail.bottom-section .flex-video-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 100px auto;
    position: relative;
    z-index: 2; }
    @media (max-width: 992px) {
      .cocktail.bottom-section .flex-video-area {
        flex-wrap: wrap; } }
    .cocktail.bottom-section .flex-video-area .text-area {
      width: 50%; }
      @media (max-width: 992px) {
        .cocktail.bottom-section .flex-video-area .text-area {
          width: 90%; } }
      .cocktail.bottom-section .flex-video-area .text-area p {
        font-size: 22px; }
        @media (max-width: 992px) {
          .cocktail.bottom-section .flex-video-area .text-area p {
            font-size: 16px; } }
    .cocktail.bottom-section .flex-video-area .phone-area {
      width: 45%;
      height: 0;
      padding-bottom: 74%;
      background: url(../images/video/cocktail/phone.jpg) no-repeat center center;
      background-size: contain;
      position: relative; }
      @media (max-width: 992px) {
        .cocktail.bottom-section .flex-video-area .phone-area {
          width: 100%;
          padding-bottom: 165%; } }
      .cocktail.bottom-section .flex-video-area .phone-area .video-box {
        position: absolute;
        left: 50.25%;
        top: 44.24%;
        width: 59%;
        height: 44.9%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -o-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0); }
        .cocktail.bottom-section .flex-video-area .phone-area .video-box .mejs__container {
          width: 100%;
          height: 100% !important;
          position: relative;
          min-width: 0 !important; }
  .cocktail.bottom-section .background-3 {
    background: url("../images/video/cocktail/background-3.jpg") no-repeat;
    background-size: contain;
    width: 50%;
    height: 0;
    padding-bottom: 48%;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 1; }
    @media (max-width: 992px) {
      .cocktail.bottom-section .background-3 {
        display: none; } }

.bottom-quote {
  width: 100%;
  height: 100vh;
  position: relative; }
  @media (max-width: 768px) {
    .bottom-quote {
      height: 300px; } }
  .bottom-quote img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover; }
  .bottom-quote .quote-holder {
    width: auto;
    height: auto;
    position: absolute;
    left: 55%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media (max-width: 768px) {
      .bottom-quote .quote-holder {
        left: 40%; } }
    .bottom-quote .quote-holder h4 {
      font-size: 26px;
      font-weight: bold;
      color: white; }
      @media (max-width: 768px) {
        .bottom-quote .quote-holder h4 {
          font-size: 14px; } }
    .bottom-quote .quote-holder h4.bord {
      padding-bottom: 25px;
      margin-bottom: 25px;
      border-bottom: 1px solid white;
      display: inline-block; }
      @media (max-width: 768px) {
        .bottom-quote .quote-holder h4.bord {
          padding-bottom: 15px;
          margin-bottom: 15px; } }
    .bottom-quote .quote-holder h5 {
      font-style: oblique;
      font-size: 36px;
      color: white;
      margin-top: 25px; }
      @media (max-width: 768px) {
        .bottom-quote .quote-holder h5 {
          font-size: 18px; } }

.top-section .text-area {
  padding-bottom: 0; }
.top-section .video-box h2.top {
  top: 60px; }
  @media (max-width: 768px) {
    .top-section .video-box h2.top {
      top: 10px; } }
.top-section .video-box h2.right {
  right: 3%;
  left: auto; }

.memorial .full-page-padded {
  margin: 30px auto 0; }

.memorial-background-1 {
  background: url("../images/video/memorial/background-1.jpg") no-repeat;
  background-size: contain;
  width: 24%;
  height: 0;
  padding-bottom: 81%;
  left: 0;
  top: -14%;
  position: absolute;
  z-index: 1; }
  @media (max-width: 768px) {
    .memorial-background-1 {
      display: none; } }

.memorial-background-2 {
  background: url("../images/video/memorial/background-2.jpg") no-repeat;
  background-size: contain;
  width: 67%;
  padding-bottom: 0;
  right: -18%;
  top: initial;
  height: 343px;
  bottom: -10%;
  position: absolute;
  z-index: 1; }

.bottom-image.memorial {
  width: 100%;
  height: auto; }
  .bottom-image.memorial img {
    width: auto;
    max-width: 100%; }

.bottom-quote.milk .quote-holder {
  left: 5%;
  top: 5%;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0); }
  .bottom-quote.milk .quote-holder h4, .bottom-quote.milk .quote-holder h5 {
    color: black; }
  .bottom-quote.milk .quote-holder h4.bord {
    border-color: black; }

.milk.top-section .video-box .text-area {
  max-width: 750px;
  margin: 0 auto;
  padding-bottom: 0;
  position: relative;
  z-index: 2; }
  .milk.top-section .video-box .text-area h2 {
    margin: 10px 0 50px; }
.milk.top-section .video-box .image-left {
  display: flex;
  justify-content: space-between; }
  .milk.top-section .video-box .image-left .image {
    width: 33%; }
    @media (max-width: 992px) {
      .milk.top-section .video-box .image-left .image {
        display: none; } }
    .milk.top-section .video-box .image-left .image img {
      width: 100%;
      position: relative;
      left: -5%;
      top: -5%; }

.bottom-quote.moo {
  height: 70vh; }
  .bottom-quote.moo .quote-holder {
    left: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    .bottom-quote.moo .quote-holder h5.quote {
      max-width: 720px; }

.roadless.top-section .roadless-background-1 {
  background: url("../images/video/roadless/background-1.jpg") no-repeat;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  left: 0;
  top: 80%;
  position: absolute;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

.text-area {
  max-width: 750px;
  margin: 0 auto;
  padding-bottom: 14%;
  position: relative;
  z-index: 2; }
  .text-area h2 {
    margin: 10px 0 50px; }
  .text-area p {
    font-size: 22px; }

.roadless.image-right .text-area {
  margin: 0;
  max-width: calc(100% - 42%); }
  @media (max-width: 768px) {
    .roadless.image-right .text-area {
      max-width: 100%; } }
@media (max-width: 768px) {
  .roadless.image-right .image {
    display: none; } }

.image-right {
  display: flex;
  justify-content: space-between; }
  .image-right .image {
    width: 33%; }
    .image-right .image img {
      width: 100%;
      position: relative;
      left: 0;
      top: 0; }

.roadless-video-trio {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }
  @media (max-width: 768px) {
    .roadless-video-trio {
      flex-wrap: wrap; } }
  .roadless-video-trio > div {
    width: 30%; }
    @media (max-width: 768px) {
      .roadless-video-trio > div {
        width: 100%; } }
    .roadless-video-trio > div:first-child .phone-area {
      background: url(../images/video/roadless/phone-1.jpg) no-repeat center center;
      background-size: contain; }
    .roadless-video-trio > div:nth-child(2) .phone-area {
      background: url(../images/video/roadless/phone-2.jpg) no-repeat center center;
      background-size: contain; }
    .roadless-video-trio > div:nth-child(3) .phone-area {
      background: url(../images/video/roadless/phone-3.jpg) no-repeat center center;
      background-size: contain; }
    .roadless-video-trio > div .phone-area {
      width: 100%;
      height: 0;
      padding-bottom: 211%;
      position: relative; }
      .roadless-video-trio > div .phone-area .video-box {
        position: absolute;
        left: 49.6%;
        top: 49%;
        width: 89.5%;
        height: 75.8%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -o-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        max-width: auto;
        margin: 0; }
        .roadless-video-trio > div .phone-area .video-box .mejs__container {
          width: 100%;
          height: 100% !important;
          position: relative; }

.extra-background-space {
  width: 100%;
  height: auto; }
  .extra-background-space img {
    width: 100%;
    height: auto; }

.river-quote {
  margin: 125px auto;
  max-width: 1000px;
  padding: 0 15px; }
  .river-quote p {
    font-size: 24px;
    font-style: italic;
    line-height: 1.375em; }
  .river-quote div {
    text-align: right;
    font-size: 24px;
    margin-top: 20px; }

.top-section.boys {
  padding-bottom: 32%; }
  @media (max-width: 992px) {
    .top-section.boys {
      padding-bottom: 30px; } }

.bottom-quote.boys {
  width: 100%;
  height: 90vh;
  position: relative; }
  @media (max-width: 768px) {
    .bottom-quote.boys {
      height: 300px; } }
  .bottom-quote.boys img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover; }
  .bottom-quote.boys .quote-holder {
    width: auto;
    height: auto;
    position: absolute;
    left: 5%;
    top: 40%;
    max-width: 460px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    .bottom-quote.boys .quote-holder h4 {
      font-size: 26px;
      font-weight: bold;
      color: black; }
      @media (max-width: 768px) {
        .bottom-quote.boys .quote-holder h4 {
          font-size: 14px; } }
    .bottom-quote.boys .quote-holder h4.bord {
      padding-bottom: 25px;
      margin-bottom: 25px;
      border-bottom: 1px solid black;
      display: inline-block; }
      @media (max-width: 768px) {
        .bottom-quote.boys .quote-holder h4.bord {
          padding-bottom: 15px;
          margin-bottom: 15px; } }
    .bottom-quote.boys .quote-holder h5 {
      font-style: oblique;
      font-size: 36px;
      color: black;
      margin-top: 25px; }
      @media (max-width: 768px) {
        .bottom-quote.boys .quote-holder h5 {
          font-size: 18px;
          max-width: 80%; } }

.boys.top-section .text-area {
  max-width: 610px;
  margin: 0 0 0 auto; }
  @media (max-width: 992px) {
    .boys.top-section .text-area {
      max-width: 90%;
      margin: 0 auto; } }

.boys.top-section .boys-background-1 {
  background: url("../images/video/boys/background-1.jpg") no-repeat;
  background-size: contain;
  width: 100%;
  height: 0;
  padding-bottom: 64%;
  left: 0;
  top: 4%;
  position: absolute;
  z-index: 1; }
  @media (max-width: 992px) {
    .boys.top-section .boys-background-1 {
      display: none; } }

.mask.top-section .video-box .text-area {
  margin: 0 auto 0 0; }
.mask.top-section .video-box .image img {
  left: 0;
  top: 0; }

@media (max-width: 575px) {
  .mask.top-section .video-box {
    margin: 50px auto; } }
@media (max-width: 575px) {
  .mask.top-section .image-right {
    flex-wrap: wrap; } }
.mask.top-section .text-area {
  width: calc(100% - 37%); }
  @media (max-width: 575px) {
    .mask.top-section .text-area {
      width: 100%;
      margin: 0 auto !important; } }
@media (max-width: 575px) {
  .mask.top-section .image {
    width: 100%; } }

@media (min-width: 769px) and (max-width: 992px) {
  .mask.full-page-add {
    height: 295px !important;
    background: white; }
    .mask.full-page-add img {
      object-fit: contain; } }
@media (min-width: 576px) and (max-width: 768px) {
  .mask.full-page-add {
    height: 185px !important;
    background: white; }
    .mask.full-page-add img {
      object-fit: contain; } }
@media (max-width: 575px) {
  .mask.full-page-add {
    height: 125px !important;
    background: white; }
    .mask.full-page-add img {
      object-fit: contain; } }

.mask.bottom-section {
  padding-bottom: 26%;
  position: relative; }
  @media (max-width: 575px) {
    .mask.bottom-section {
      padding-bottom: 50px; } }
  .mask.bottom-section .flex-video-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 100px auto;
    position: relative;
    z-index: 2; }
    @media (max-width: 575px) {
      .mask.bottom-section .flex-video-area {
        margin: 50px auto; } }
    .mask.bottom-section .flex-video-area .text-area {
      width: 50%; }
      @media (max-width: 575px) {
        .mask.bottom-section .flex-video-area .text-area {
          margin-top: 10px !important;
          padding-bottom: 0; } }
      .mask.bottom-section .flex-video-area .text-area p {
        font-size: 22px; }
        @media (max-width: 768px) {
          .mask.bottom-section .flex-video-area .text-area p {
            font-size: 14px; } }
    .mask.bottom-section .flex-video-area .phone-area {
      width: 45%;
      height: 0;
      padding-bottom: 74%;
      background: url(../images/video/mask/phone.jpg) no-repeat center center;
      background-size: contain;
      position: relative; }
      .mask.bottom-section .flex-video-area .phone-area .video-box {
        position: absolute;
        left: 50.25%;
        top: 48%;
        width: 65.5%;
        height: 70.9%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        -moz-transform: translate3d(-50%, -50%, 0);
        -o-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0); }
        .mask.bottom-section .flex-video-area .phone-area .video-box .mejs__container {
          width: 100%;
          height: 100% !important;
          position: relative;
          min-width: 0 !important; }
  .mask.bottom-section .background-2 {
    position: absolute;
    bottom: 0;
    width: 100%; }
    @media (max-width: 575px) {
      .mask.bottom-section .background-2 {
        display: none; } }
    .mask.bottom-section .background-2 img {
      object-fit: cover;
      width: 100%;
      height: 100%; }

.split-text-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 100px 0; }
  .split-text-section > div.image-area {
    height: 700px; }
    @media (max-width: 768px) {
      .split-text-section > div.image-area {
        display: none; } }
  .split-text-section > div {
    width: 46%; }
    @media (max-width: 768px) {
      .split-text-section > div {
        width: 90%; } }
    .split-text-section > div > img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      object-position: center center; }
  .split-text-section .text-area p.small {
    font-size: 14px;
    line-height: 20px; }

.full-page-add .special-text-section {
  width: 350px;
  font-size: 14px;
  line-height: 20px;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 75%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0); }

.bottom-quote.jack {
  width: 100%;
  height: 500px;
  position: relative; }
  @media (max-width: 575px) {
    .bottom-quote.jack {
      overflow: hidden;
      height: 245px; } }
  .bottom-quote.jack img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center left; }
    @media (max-width: 575px) {
      .bottom-quote.jack img {
        width: auto;
        height: 200px;
        position: absolute;
        object-fit: initial;
        left: -12%; } }
  .bottom-quote.jack .quote-holder {
    width: auto;
    height: auto;
    position: absolute;
    left: 500px;
    top: 50%;
    max-width: calc(100% - 550px);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    @media (max-width: 575px) {
      .bottom-quote.jack .quote-holder {
        left: 40%;
        width: 180px;
        height: auto;
        position: relative;
        max-width: 100%; } }
    .bottom-quote.jack .quote-holder h4 {
      font-size: 26px;
      font-weight: bold;
      color: black; }
      @media (max-width: 768px) {
        .bottom-quote.jack .quote-holder h4 {
          font-size: 14px; } }
    .bottom-quote.jack .quote-holder h4.bord {
      padding-bottom: 25px;
      margin-bottom: 25px;
      border-bottom: 1px solid black;
      display: inline-block; }
      @media (max-width: 768px) {
        .bottom-quote.jack .quote-holder h4.bord {
          padding-bottom: 15px;
          margin-bottom: 15px; } }
    .bottom-quote.jack .quote-holder h5 {
      font-style: oblique;
      font-size: 36px;
      color: black;
      margin-top: 25px; }
      @media (max-width: 768px) {
        .bottom-quote.jack .quote-holder h5 {
          font-size: 18px; } }

/*# sourceMappingURL=base.css.map */