canvas.deepar {
    border: 0px none;
    background-color: black;
    display: block;
    margin: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .blur-canvas {
    opacity: 0.6;
    filter: alpha(opacity = 50);
  }
  
  body {
    margin: 0px;
    padding: 0px;
  }
  
  #loader-wrapper {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
  }
  
  .loader {
    display: inline-block;
    position: relative;
    top: 42%;
    z-index: 1000;
  
    width: 90px;
    height: 90px;
    margin: auto;
    background-color: #00f;
  
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.5s infinite ease-in-out;
    animation: sk-scaleout 1.5s infinite ease-in-out;
  }
  
  @-webkit-keyframes sk-scaleout {
    0% {
      -webkit-transform: scale(0);
    }
  
    100% {
      -webkit-transform: scale(1);
      opacity: 0;
    }
  }
  
  @keyframes sk-scaleout {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  
  .effect-carousel {
    position: fixed !important;
    width: 100%;
    height: 130px;
    bottom: 0px;
    z-index: 999999;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    display: none;
  }
  
  .thumb {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
  
    padding: 3px;
  
    border: 8.5px solid rgb(255, 255, 255);
    /*margin: 0.5rem;*/
    border-radius: 100%;
  
    opacity: 0.8;
    transition: all 300ms ease;
    /*height: 100px;*/
    height: 70px;
  }
  
  .container {
    border: 10px solid rgb(255, 255, 255);
    /*margin: 0.5rem;*/
    border-radius: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    pointer-events: auto;
  }
  .slick-center .thumb {
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    color: #e67e22;
    opacity: 1;
    transform: scale(1.3);
  }
  
  .slick-slide {
    width: 130px;
  }
  /*//////////////////////////////*/
  
  .over {
    z-index: 10;
    pointer-events: none;
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    /*
    color: white;
    font-family: 'Nunito', monospace;
    text-shadow: 0px 0px 5px black;
    */
  }
  
  .start-background {
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
  }
  
  /* START SCREEN */
  
  .start-button {
    z-index: 20;
    display: block;
    /*/
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    position: absolute;
    top: 24vh;
    /*/
  
    position: absolute;
    margin-top: 33%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    width: 50%;
  
    /*
    position: absolute;
    top: 24vh;
    
    left: 40vw;
    align-self: center;
    */
  }
  
  .start-button:active {
    transform: scale(0.98);
  }
  
  /* EXPERINCE-SCREEN */
  
  .experience-bottom-container {
    position: fixed !important;
    width: 100%;
    height: 130px;
    bottom: 0px;
    z-index: 999999;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    display: none;
  }
  
  .experience-thumb {
    margin-top: 18px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
  
    padding: 3px;
  
    border: 8.5px solid rgb(255, 255, 255);
    /*margin: 0.5rem;*/
    border-radius: 100%;
  
    opacity: 1;
    transition: all 300ms ease;
    /*height: 100px;*/
    height: 50px;
  }
  
  .experience-thumb-recording {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
  
    /*padding: 3px;*/
  
    /*border: 8.5px solid rgb(255, 255, 255);*
    /*margin: 0.5rem;*/
    /*border-radius: 100%;*/
  
    opacity: 0.9;
    transition: all 300ms ease;
    /*height: 100px;*/
    height: 85px;
  }
  
  .experience-thumb-recording:active {
    transform: scale(0.8);
  }
  
  .experience-arrow-container {
    position: fixed !important;
    bottom: 0px;
    z-index: 999999;
  }
  
  .experience-arrow {
    margin-top: 18px;
    margin-bottom: 55px;
    margin-right: auto;
    margin-left: 10px;
    position: relative;
  
    opacity: 1;
    transition: all 300ms ease;
    /*height: 100px;*/
    height: 25px;
    width: 45px;
  }
  
  .experience-arrow:active {
    transform: scale(0.8);
  }
  
  .experience-preview-bottom-container {
    position: fixed !important;
    width: 100%;
    height: 130px;
    bottom: 0px;
    z-index: 999999;
    /*background-color: rgba(255, 255, 255, 0.7);*/
    justify-content: space-around;
    display: flex;
  }
  
  .experience-preview-button {
    height: 55px;
    width: 135px;
    margin-top: 7%;
    display: block;
  }
  
  .experience-preview-button:active {
    transform: scale(0.8);
  }
  
  .age-screen-container {
    display: none; /* flex */
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    position: absolute;
    align-items: center;
  }
  
  #age-screen-head-text-id {
    height: 4%;
    width: 50%;
    margin-top: 55px;
  }
  
  #age-screen-middle-text-id {
    height: 8%;
    margin-top: 40px;
  }
  
  #age-screen-yes-button-id {
    position: absolute;
    display: block;
    height: 8%;
    margin-top: 65%;
  }
  
  #age-screen-yes-button-id:active {
    transform: scale(0.8);
  }
  
  #age-screen-no-button-id {
    height: 8%;
    position: absolute;
    display: block;
    height: 8%;
    margin-top: 80%;
    /*margin-bottom: 130px;*/
  }
  
  #age-screen-no-button-id:active {
    transform: scale(0.8);
  }
  
  #age-screen-bottom-text-id {
    height: 2.5%;
  }
  
  .form-screen-container {
    display: none; /* flex */
    z-index: 50;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    position: absolute;
  }
  
  #form-screen-brand-logo-id {
    width: 40%;
    height: 15%;
  }
  
  #form-email-input-id {
    box-sizing: border-box;
    margin-top: 59.41%;
    height: 6%;
    left: 19.78%;
    right: 19.92%;
    border: 2px solid #454545;
    border-radius: 8px;
    position: absolute;
  
    /*
    left: 19.78%;
    right: 19.92%;
    top: 43.41%;
    bottom: 49.65%;
    */
  }
  
  #form-email-text-id {
    position: absolute;
    left: 25.22%;
    right: 54.02%;
    margin-top: 58.6%;
    background-color: white;
    width: 20%;
    height: 2%;
  }
  
  #form-phone-input-id {
    box-sizing: border-box;
    border: 2px solid #454545;
    border-radius: 8px;
    height: 6%;
    position: absolute;
  
    left: 19.78%;
    right: 19.92%;
    margin-top: 71.7%;
  }
  
  #form-phone-text-id {
    position: absolute;
    left: 25.22%;
    right: 54.02%;
    margin-top: 70.9%;
    background-color: white;
    width: 20%;
    height: 2%;
  }
  
  /*/ MIGHT BE CHANGED */
  #form-agreement-text-id {
    position: absolute;
    left: 25.22%;
    right: 54.02%;
    margin-top: 96.13%;
    width: 55%;
  }
  
  #form-thanks-text-id {
    position: absolute;
    right: 6%;
    margin-top: 121%;
  }
  
  #form-thanks-text-id:active {
    transform: scale(0.8);
  }
  
  /*/ MIGHT BE CHANGED */
  #form-submit-button-id {
    position: absolute;
    left: 76.22%;
    margin-top: 80.13%;
    /*/bottom: 39.12%;*/
    width: 40px;
    height: 40px;
  }
  
  #form-submit-button-id:active {
    transform: scale(0.8);
  }
  
  /*/ MIGHT BE CHANGED */
  #form-checkbox-input-id {
    position: absolute;
    left: 19.22%;
    margin-top: 96.13%;
  
    width: 28px;
    height: 28px;
  
    color: #d9d9d9;
    background: #d9d9d9;
    border: 10px solid #d9d9d9;
    border-radius: 0.15em;
    background-color: #d9d9d9;
  }
  
  .final-buttons-container {
    display: flex; /* flex */
    z-index: 50;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    flex-direction: column;
    position: absolute;
    /*
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 0*/
  }
  
  #final-try-button-id {
    z-index: 30;
    width: 430px;
    height: 76px;
    position: absolute;
    margin-top: 90%;
  
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  
  #final-try-button-id:active {
    transform: scale(0.8);
  }
  
  #final-end-button-id {
    z-index: 30;
    width: 430px;
    height: 76px;
    position: absolute;
    margin-top: 104%;
  
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  
  #final-end-button-id:active {
    transform: scale(0.8);
  }