html {
  font-size: 17px; }
  html p, html span, html h1, html h2, html h3, html h4, html h5, html h6, html div {
    font-family: 'Darwin-Regular'; }
  @media (min-width: 768px) {
    html {
      font-size: 16px; } }

img {
  max-width: 100%; }

.app-container, .cursor-pointer {
  cursor: pointer; }

.screen {
  height: 100%;
  transition: all 0.5s ease-out 0s; }
  .screen.splash-screen {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    cursor: pointer; }
    .screen.splash-screen > .background-image {
      width: 100%;
      height: 100%;
      position: absolute;
      background-size: cover;
      top: 0;
      left: 0;
      z-index: 0; }
      .screen.splash-screen > .background-image video {
        min-width: 100%;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0; }
    .screen.splash-screen > .title {
      position: relative;
      z-index: 1;
      font-size: 4em;
      padding: 5px 15px;
      border-radius: 15px;
      background-color: rgba(255, 255, 255, 0.3); }
      @media (min-width: 768px) {
        .screen.splash-screen > .title div {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap; }
        .screen.splash-screen > .title div:first-of-type {
          animation: showup 7s; }
        .screen.splash-screen > .title div:last-of-type {
          animation: reveal 7s; }
        .screen.splash-screen > .title div:last-of-type span {
          animation: slidein 7s; } }
    .screen.splash-screen:hover {
      background-color: rgba(0, 0, 0, 0.1); }
  .screen.first-screen .videoBackground {
    display: flex;
    justify-content: center;
    align-content: center; }
    .screen.first-screen .videoBackground #bgVideo {
      position: fixed;
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      cursor: pointer;
      z-index: 1; }
  .screen.whale-animation-screen .videoBackground {
    display: flex;
    justify-content: center;
    align-content: center; }
    .screen.whale-animation-screen .videoBackground #bgVideoDetection {
      position: fixed;
      max-width: 100%;
      max-height: 100%; }
  .screen.whale-animation-screen .taps {
    position: absolute;
    right: 0;
    width: 90%;
    max-width: 500px;
    margin-top: 50px;
    opacity: 0;
    left: 110%;
    transition: opacity 0.7s ease-in-out 0s;
    z-index: 2;
    display: none; }
    .screen.whale-animation-screen .taps.visible {
      display: block;
      left: auto;
      right: 15px;
      opacity: 1; }
    .screen.whale-animation-screen .taps > div {
      cursor: pointer;
      background: #ee9200;
      padding: 20px;
      margin-bottom: 10px;
      box-shadow: 0px 5px 5px 0px #555555;
      border-radius: 6px; }
    .screen.whale-animation-screen .taps .taps-data {
      cursor: pointer; }
  .screen.whale-animation-screen .data-list {
    max-height: 0;
    height: 100%;
    background: white;
    position: relative;
    z-index: 2;
    transition: max-height 1s ease-in-out 0s;
    overflow: hidden; }
    .screen.whale-animation-screen .data-list.visible {
      max-height: 100%; }
    .screen.whale-animation-screen .data-list .data-title {
      line-height: 2em;
      box-shadow: 1px 2px 9px 0px #555555; }
      .screen.whale-animation-screen .data-list .data-title > span {
        height: 1.2em;
        line-height: 1.2em;
        vertical-align: text-bottom;
        text-align: center;
        padding: 0 10px;
        color: #ffffff;
        background-color: #007bff;
        position: relative;
        display: inline-block;
        margin-left: 1em;
        cursor: pointer; }
        .screen.whale-animation-screen .data-list .data-title > span span {
          font-size: 0.6em; }
        .screen.whale-animation-screen .data-list .data-title > span:before {
          position: absolute;
          left: -1.2em;
          content: " ";
          width: 0px;
          height: 0px;
          border-style: solid;
          border-width: 0.6em;
          border-color: transparent #007bff transparent transparent; }
        .screen.whale-animation-screen .data-list .data-title > span:hover {
          background-color: red; }
        .screen.whale-animation-screen .data-list .data-title > span:hover:before {
          border-color: transparent #f00 transparent transparent; }
    .screen.whale-animation-screen .data-list .list-wrapper {
      height: 100%;
      margin: 10px 0 80px;
      position: relative; }
      .screen.whale-animation-screen .data-list .list-wrapper ul {
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden; }
        .screen.whale-animation-screen .data-list .list-wrapper ul li:nth-child(2n+1) {
          background-color: #eee; }
      .screen.whale-animation-screen .data-list .list-wrapper .d-flex {
        display: flex;
        overflow: auto; }
        .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div {
          border: solid 1px #ddd; }
          .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div.lh {
            position: absolute;
            left: 0;
            background-color: white; }
          .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div div, .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div h {
            padding: 15px 10px;
            border-bottom: solid 1px #ddd; }
            .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div div.has-data, .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div h.has-data {
              background: #66b566; }
          .screen.whale-animation-screen .data-list .list-wrapper .d-flex > div .h {
            background-color: #ddd; }
  .screen.whale-animation-screen .taps-visitors > .angle-icon {
    position: absolute;
    right: 0;
    padding: 20px;
    top: 0;
    cursor: pointer; }
    .screen.whale-animation-screen .taps-visitors > .angle-icon > * {
      height: 46px; }
  .screen.whale-animation-screen .taps-visitors > h2 {
    cursor: pointer; }
  .screen.whale-animation-screen .visitor-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out 0s; }
    .screen.whale-animation-screen .visitor-list.open {
      max-height: 700px; }
    .screen.whale-animation-screen .visitor-list .list-wrapper {
      overflow: auto;
      max-height: 700px; }
      .screen.whale-animation-screen .visitor-list .list-wrapper ul {
        margin: 0;
        list-style: none; }
        .screen.whale-animation-screen .visitor-list .list-wrapper ul li {
          cursor: pointer; }
          .screen.whale-animation-screen .visitor-list .list-wrapper ul li > span {
            padding-left: 15px; }
            .screen.whale-animation-screen .visitor-list .list-wrapper ul li > span > * {
              display: block; }
          .screen.whale-animation-screen .visitor-list .list-wrapper ul li:hover {
            background-color: rgba(255, 255, 255, 0.3); }
  .screen.whale-animation-screen .last-detection {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: 1; }
    .screen.whale-animation-screen .last-detection > a {
      display: block;
      height: 100%; }

@keyframes showdata {
  0% {
    opacity: 0; }
  80% {
    opacity: 0; }
  90% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes showup {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes slidein {
  0% {
    margin-left: -700px; }
  20% {
    margin-left: -700px; }
  35% {
    margin-left: 0px; }
  100% {
    margin-left: 0px;
    width: 700px; } }

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px; }
  20% {
    opacity: 1;
    width: 0px; }
  20% {
    opacity: 1;
    width: 0px; }
  30% {
    width: auto; }
  80% {
    opacity: 1;
    width: auto; }
  100% {
    opacity: 1;
    width: auto; } }

#popup_email_form {
  width: 100%;
  max-width: 800px; }
  #popup_email_form iframe {
    width: 100%;
    height: 600px; }

#contentPopup #wavePad {
  transition: all 0.5s ease-in-out 0s;
  max-height: 0;
  overflow: hidden; }
  #contentPopup #wavePad.active {
    max-height: 500px; }

#contentPopup #waveplay {
  cursor: pointer;
  position: absolute;
  width: calc(100% * 0.33);
  height: calc(100% * 0.19);
  top: calc(100% * 0.68);
  left: calc(100% * 0.23);
  transition: all 0.4s ease-in-out 0s;
  border-radius: 15px; }
  #contentPopup #waveplay:hover {
    background: rgba(255, 255, 255, 0.1); }

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 1;
  transition: opacity 0.5s ease-out 0s; }
  .overlay.cloak {
    opacity: 0;
    z-index: -1; }
  .overlay .loader {
    display: inline-block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    WCS-top: -32px;
    left: 50%;
    WCS-left: -32px; }
    .overlay .loader div {
      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      transform-origin: 32px 32px; }
      .overlay .loader div:after {
        content: " ";
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #666;
        WCS: -3px 0 0 -3px; }
    .overlay .loader div:nth-child(1) {
      animation-delay: -0.036s; }
    .overlay .loader div:nth-child(1):after {
      top: 50px;
      left: 50px; }
    .overlay .loader div:nth-child(2) {
      animation-delay: -0.072s; }
    .overlay .loader div:nth-child(2):after {
      top: 54px;
      left: 45px; }
    .overlay .loader div:nth-child(3) {
      animation-delay: -0.108s; }
    .overlay .loader div:nth-child(3):after {
      top: 57px;
      left: 39px; }
    .overlay .loader div:nth-child(4) {
      animation-delay: -0.144s; }
    .overlay .loader div:nth-child(4):after {
      top: 58px;
      left: 32px; }
    .overlay .loader div:nth-child(5) {
      animation-delay: -0.18s; }
    .overlay .loader div:nth-child(5):after {
      top: 57px;
      left: 25px; }
    .overlay .loader div:nth-child(6) {
      animation-delay: -0.216s; }
    .overlay .loader div:nth-child(6):after {
      top: 54px;
      left: 19px; }
    .overlay .loader div:nth-child(7) {
      animation-delay: -0.252s; }
    .overlay .loader div:nth-child(7):after {
      top: 50px;
      left: 14px; }
    .overlay .loader div:nth-child(8) {
      animation-delay: -0.288s; }
    .overlay .loader div:nth-child(8):after {
      top: 45px;
      left: 10px; }

@keyframes lds-roller {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.blurred {
  filter: blur(2px); }

@-webkit-keyframes spin {
  0%, 100% {
    box-shadow: 10px 10px #4f4d49, -10px 10px #dfdfdf, -10px -10px #4f4d49, 10px -10px #dfdfdf; }
  25% {
    box-shadow: -10px 10px #dfdfdf, -10px -10px #4f4d49, 10px -10px #dfdfdf, 10px 10px #4f4d49; }
  50% {
    box-shadow: -10px -10px #4f4d49, 10px -10px #dfdfdf, 10px 10px #4f4d49, -10px 10px #dfdfdf; }
  75% {
    box-shadow: 10px -10px #dfdfdf, 10px 10px #4f4d49, -10px 10px #dfdfdf, -10px -10px #4f4d49; } }

.redux-toastr .bottom-center {
  left: 5vw !important;
  WCS-left: 0 !important;
  width: 95vw !important; }

.btn.btn-primary {
  background-color: #ee9200 !important;
  border-color: #eb9000 !important; }
  .btn.btn-primary:hover, .btn.btn-primary:active {
    background-color: #eb9000 !important;
    border-color: #e98f00 !important; }
  .btn.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(238, 146, 0, 0.5) !important; }