@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
html, body {
  height: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  /* The Modal (background) */
}

body .navbar-fixed-top {
  background-color: white;
}

body .navbar-fixed-top #dashboard {
  background-color: #4772FF;
}

body .navbar-fixed-top #dashboard a {
  color: white;
}

body .navbar-fixed-bottom {
  background-color: white;
  display: none;
}

body .navbar-fixed-bottom .text-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

body .navbar-fixed-bottom .text-container .nav {
  background-color: #4772FF;
  margin-right: 1px;
}

body .navbar-fixed-bottom .text-container .nav a {
  color: white;
}

body .intro {
  height: 100%;
  width: 100%;
  padding-top: 65px;
  padding-bottom: 65px;
  display: block;
}

body .intro .text-container {
  width: 100%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-decoration: none;
}

body .intro .text-container h1 {
  margin-bottom: 5vh;
}

body .intro .text-container h1 span:before {
  content: '';
  -webkit-animation: text infinite 20s;
          animation: text infinite 20s;
  color: #5bc0de;
}

@-webkit-keyframes text {
  0% {
    content: 'Go Virtual.';
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  20% {
    content: 'Social Distance.';
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  40% {
    content: 'improve Efficiency.';
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  60% {
    content: 'reduce Frustration.';
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  80% {
    content: 'Track Customers.';
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    content: 'Go Virtual.';
    opacity: 1;
  }
}

@keyframes text {
  0% {
    content: 'Go Virtual.';
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  20% {
    content: 'Social Distance.';
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  40% {
    content: 'improve Efficiency.';
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  60% {
    content: 'reduce Frustration.';
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  80% {
    content: 'Track Customers.';
    opacity: 1;
  }
  86% {
    opacity: 0;
  }
  100% {
    content: 'Go Virtual.';
    opacity: 1;
  }
}

body .intro .text-container p {
  color: #5bc0de;
}

body .intro .text-container a {
  display: inline-block;
  background-color: #4772FF;
  padding: 2vh;
  color: white;
  border-radius: 30px;
  margin-top: 3vh;
}

body .intro .text-container #login {
  padding: 0;
  font-weight: bold;
  background-color: transparent;
  color: #4772FF;
  border-radius: 0;
}

body .intro .contact, body .intro .contact-bottom {
  background-color: #F5F5F7;
  visibility: hidden;
  text-align: center;
  padding-top: 3vh;
  margin: 0;
}

body .intro .contact p, body .intro .contact-bottom p {
  max-width: 100%;
  font-size: 1vw;
  margin-bottom: 0;
}

body .intro .contact h1, body .intro .contact-bottom h1 {
  font-size: 2.5vw;
}

body .intro .contact .eye-container, body .intro .contact-bottom .eye-container {
  position: relative;
  border-radius: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body .intro .contact .eye-container .eye, body .intro .contact-bottom .eye-container .eye {
  position: relative;
  display: block;
  margin-top: 1vh;
  margin-left: auto;
  margin-right: auto;
  width: 7.5vw;
  height: 7.5vw;
  background-color: white;
  border-radius: 50%;
}

body .intro .contact .eye-container .eye::before, body .intro .contact-bottom .eye-container .eye::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 3vw;
  height: 3vw;
  background: #333;
  border-radius: 50%;
}

body form {
  z-index: 10;
  overflow: hidden;
  position: relative;
}

body form input, body form textarea {
  width: 100%;
  max-width: 40vw;
  outline: none;
  background: none;
  padding: 0.6rem 1.2rem;
  color: black;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: 0px;
  border-bottom: 2px solid black;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 0.75vw;
}

body form input {
  margin-top: 2vh;
}

body form input:focus {
  border-bottom: 2px solid #298fca;
}

body form textarea {
  border: 2px solid black;
  border-radius: 15px;
  margin-top: 5vh;
}

body form textarea:focus {
  border: 2px solid #298fca;
}

body form input[type=submit] {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  float: left;
  background-color: #6930E7;
  border: 0;
  border-radius: 25vh;
  color: white;
  padding: 1vw;
  padding-left: 4vh;
  padding-right: 4vh;
}

body .jumbotron {
  margin-left: 3vw;
  margin-right: 3vw;
  margin-bottom: 3vw;
  border-radius: 2vw;
  padding: 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body .jumbotron .text-container {
  margin: auto;
}

body .jumbotron .text-container h1 {
  margin-bottom: 5vh;
}

body .jumbotron .text-container h2 {
  margin-bottom: 5vh;
}

body .jumbotron video {
  max-width: 50%;
}

body #trigger1 {
  background-color: #005BB2;
}

body #trigger2 {
  background-color: #6930E7;
}

body #trigger1 h1, body #trigger2 h1 {
  color: white;
  margin-bottom: 5vh;
}

body #trigger1 h2, body #trigger2 h2 {
  margin-bottom: 5vh;
  color: white;
}

body #trigger1 p, body #trigger2 p {
  color: white;
}

body .modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  /* Modal Content */
  /* The Close Button */
}

body .modal .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

body .modal .closeSuccess,
body .modal .closeError {
  color: #aaaaaa;
  float: right;
  font-size: 3vh;
  font-weight: bold;
}

body .modal .closeSuccess:hover,
body .modal .closeSuccess:focus,
body .modal .closeError:hover,
body .modal .closeError:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

body .modal p {
  margin-top: 3vh;
}

body footer {
  width: 100%;
  text-align: center;
  margin: 0;
}

/*---Media Queries --*/
@media (min-width: 1300px) and (min-height: 820px) {
  body h1 {
    font-size: 35px;
  }
  body p {
    font-size: 1.5vw;
  }
  body .intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  body .intro .contact {
    visibility: visible;
    display: block;
    max-width: 30%;
    overflow: hidden;
  }
  body .intro .contact .text-container h1 {
    font-size: 2.5vw;
  }
  body .intro .contact .text-container p {
    font-size: 1vw;
  }
  body .jumbotron {
    height: 100%;
  }
  body .jumbotron p {
    max-width: 80%;
  }
  body .contact-bottom {
    visibility: hidden;
    display: none;
  }
}

@media (min-width: 1200px) and (min-height: 820px) {
  body h1 {
    font-size: 3.5vw;
  }
  body p {
    font-size: 1.5vw;
  }
  body .intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  body .intro h1 {
    font-size: 3.5vw;
  }
  body .intro p {
    font-size: 1.5vw;
  }
  body .intro .text-container {
    margin-left: 4vw;
    top: 50%;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  body .intro .contact {
    visibility: visible;
    display: block;
  }
  body .jumbotron {
    height: 100%;
  }
  body .jumbotron p {
    max-width: 80%;
  }
  body .contact-bottom {
    visibility: hidden;
    display: none;
  }
}

@media (max-width: 992px) {
  body h1 {
    font-size: 4vw;
  }
  body h2 {
    font-size: 2.5vw;
  }
  body p {
    font-size: 3vw;
  }
  body .intro .text-container {
    min-width: 100%;
    margin-right: 25vw;
  }
  body .intro .contact {
    visibility: hidden;
    display: none;
  }
  body .jumbotron {
    height: 100%;
  }
  body .jumbotron p {
    max-width: 80%;
  }
  body .jumbotron h1 {
    font-size: 4.5vw;
  }
}

@media (max-width: 768px) {
  body h1 {
    font-size: 7vw;
  }
  body p {
    font-size: 5vw;
  }
  body .intro .text-container {
    margin-right: 15vw;
  }
  body .intro .contact {
    visibility: hidden;
    display: none;
  }
  body .jumbotron {
    position: relative;
  }
  body .jumbotron .text-container {
    width: 90%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  body .jumbotron .text-container h1 {
    font-size: 9vw;
  }
  body .jumbotron .text-container h2 {
    font-size: 5vw;
  }
  body .jumbotron .text-container p {
    font-size: 4vw;
    max-width: 100%;
  }
  body .jumbotron video {
    visibility: hidden;
    display: none;
  }
}

@media (max-width: 576px) {
  body {
    text-align: center;
  }
  body h1 {
    font-size: 14vw;
  }
  body h2 {
    font-size: 5vw;
  }
  body p {
    font-size: 7.5vw;
    padding: 0;
    margin: 0;
  }
  body .navbar-fixed-bottom {
    display: block;
  }
  body footer {
    margin-bottom: 90px;
    width: 100%;
    text-align: center;
    height: 90px;
  }
  body .intro .text-container {
    margin-right: 5vw;
  }
  body .intro .text-container #start {
    display: none;
  }
  body .intro .contact {
    visibility: hidden;
    display: none;
  }
  body .jumbotron {
    position: relative;
  }
  body .jumbotron .text-container {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  body .jumbotron .text-container h1 {
    font-size: 14vw;
  }
  body .jumbotron .text-container h2 {
    font-size: 5vw;
  }
  body .jumbotron .text-container p {
    font-size: 4.5vw;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  body .jumbotron video {
    visibility: hidden;
    display: none;
  }
}

@media (max-height: 820px) {
  body .intro .contact {
    visibility: hidden;
    display: none;
  }
  body .intro .text-container {
    margin-left: 5vw;
  }
  body .contact-bottom {
    visibility: visible;
    display: block;
  }
}

@media (max-height: 450px) {
  body h1 {
    font-size: 17vh;
  }
  body p {
    font-size: 7.5vh;
    padding: 0;
    margin: 0;
  }
  body .jumbotron {
    display: block;
  }
  body .jumbotron video {
    visibility: hidden;
    display: none;
  }
  body .intro .text-container {
    margin-right: 5.5vw;
  }
  body .intro .text-container #start {
    display: none;
  }
  body .intro .contact {
    visibility: hidden;
    display: none;
  }
}
/*# sourceMappingURL=index.css.map */