@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap);
body {
  font-family: "Ubuntu", sans-serif;
}

p {
  line-height: 1.7;
}

.hide {
  display: none;
}

nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-weight: 300;
  align-items: center;
  min-height: 8vh;
  background: white;
  font-family: "Ubuntu", sans-serif;
  z-index: 2000;
  position: fixed;
  box-shadow: 0px -5px 30px rgba(51, 51, 51, 0.1803921569);
}

nav img {
  width: 60%;
}

nav button.btn-dashboard {
  background-image: none;
}

nav button {
  background-color: #1a1a1a;
  background-image: url("/website/imgs/Header_Login_Button_Icon_White.webp");
  background-repeat: no-repeat;
  background-position-x: 31px;
  background-position-y: 8.5px;
  background-size: 8%;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  color: white;
  height: 3.3rem;
  width: 13rem;
  font-size: 1.1rem;
}

nav button:hover {
  cursor: pointer;
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  color: white;
}

nav a:hover {
  font-weight: bold;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
  margin: 0;
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: black;
  text-decoration: none;
}

.login-menu {
  display: none;
}

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: #1a1a1a;
  margin: 5px;
  transition: all 0.3s ease;
}

/* First Section */
.full-screen-video-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: left;
}

.full-screen-video-container video {
  z-index: -1;
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

.full-screen-video-container img {
  position: absolute;
  z-index: 100;
}

.full-screen-video-container h2 {
  z-index: 101;
  position: absolute;
  top: 48vh;
  left: 155px;
  width: 300px;
  font-size: 3rem;
  font-weight: 500;
}

.full-screen-video-container #ryan-logo {
  top: 41vh;
  left: 155px;
  width: 280px;
  height: 46px;
}

.full-screen-video-container button {
  cursor: pointer;
  background-color: transparent;
  width: 210px;
  height: 45px;
  font-size: 2rem;
  font-weight: bold;
  color: #1a1a1a;
  border: #1a1a1a solid 1px;
  border-radius: 6px;
  z-index: 200;
  position: absolute;
  top: 65vh;
  left: 155px;
}

.full-screen-video-container button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  background: #1a1a1a;
  color: white;
}

#myVideo {
  z-index: -100;
  width: 100%;
  position: absolute;
}

.white-bar {
  z-index: -99;
  position: absolute;
  opacity: 0.7;
  height: 100%;
}

.section-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: auto;
  background: white;
  padding: 10rem 0;
}

.section-1 button {
  cursor: pointer;
  color: #ba832d;
  background: none;
  background-image: url("/website/imgs/arrows_button_icon_Yellow.webp");
  background-repeat: no-repeat;
  background-position-x: 165px;
  background-position-y: 13px;
  background-size: 8%;
  font-family: "Ubuntu", sans-serif;
  text-transform: uppercase;
  text-align: left;
  padding-left: 3.5rem;
  border: #ba832d solid 1px;
  border-radius: 5px;
  width: 220px;
  height: 40px;
  font-size: 1.4rem;
  font-weight: 500;
}

.section-1 button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #ba832d;
  color: white;
  background-image: url("/website/imgs/arrows_icon.webp");
  background-repeat: no-repeat;
  background-position-x: 165px;
  background-position-y: 12px;
}

.section-1 h2 {
  font-weight: bold;
  padding-bottom: 1.5rem;
}

.section-1 p {
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
}

.section-1 .sec-1 {
  width: 100%;
  height: 100%;
  padding-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-end;
}

.section-1 .sec-1 img {
  max-width: 50%;
}

.section-1 .sec-1 video {
  max-width: 75%;
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .section-1 .sec-1 {
    margin-left: 0 !important;
    align-items: center;
    padding-right: 0;
  }
  .section-1 .sec-1 img {
    max-width: 80%;
    margin-left: 0 !important;
  }
  .section-1 .sec-2 p {
    width: 90% !important;
  }
}
.section-1 .sec-2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding-left: 5rem;
}

.section-1 .sec-2 p {
  width: 50vh;
}

.section-1 .sec-2 a {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.section-2 {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 500px;
  background-image: url("/website/imgs/Page_HomePage_Img1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
}

.section-2 button {
  cursor: pointer;
  color: white;
  background: none;
  font-family: "Ubuntu", sans-serif;
  text-transform: uppercase;
  border: white solid 1px;
  border-radius: 5px;
  width: 220px;
  height: 40px;
  font-size: 1.4rem;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.section-2 button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: white;
  color: #1a1a1a;
}

.section-2 h2 {
  font-weight: bold;
  padding-bottom: 1.5rem;
}

.section-2 p {
  text-align: right;
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
}

.section-2 .sec-2 {
  width: 100%;
  height: 100%;
  padding-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}

.section-2 .sec-2 img {
  max-width: 100%;
}

.section-2 .sec-1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-start;
  margin-right: 4rem;
}

.section-2 .sec-1 p {
  width: 50vh;
  text-align: left;
}

.section-2 .sec-1 h2 {
  width: 50vh;
  text-align: left;
}

.section-2 .sec-1 div {
  width: 50vh;
}

.section-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 500px;
  background: white;
}

.section-3 h2 {
  font-weight: bold;
  padding-bottom: 1.5rem;
}

.section-3 p {
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
}

.section-3 .sec-1 {
  width: 100%;
  height: 100%;
  padding-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-end;
}

.section-3 .sec-1 img {
  max-width: 100%;
}

.section-3 .sec-2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding-left: 5rem;
}

.section-3 .sec-2 p {
  width: 50vh;
}

.section-4 {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 500px;
  background-image: url("/website/imgs/Page_HomePage_Img2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.section-4 h2 {
  font-weight: bold;
  padding-bottom: 1.5rem;
}

.section-4 p {
  text-align: right;
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
}

.section-4 .sec-2 {
  width: 100%;
  height: 100%;
  padding-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}

.section-4 .sec-2 img {
  max-width: 100%;
}

.section-4 .sec-1 {
  padding-right: 6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.section-4 .sec-1 p {
  width: 50vh;
  text-align: left;
  margin-right: -25px;
}

.section-4 .sec-1 h2 {
  text-align: left;
}

.section-4 .sec-1 div {
  width: 50vh;
}

.section-5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: 500px;
  background: white;
}

.section-5 h2 {
  font-weight: bold;
  padding-bottom: 1.5rem;
}

.section-5 p {
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
  line-height: 1.7;
}

.section-5 .sec-1 {
  width: 100%;
  height: 100%;
  padding-right: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-end;
}

.section-5 .sec-1 img {
  max-width: 100%;
}

.section-5 .sec-2 {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding-left: 5rem;
}

.section-5 .sec-2 p {
  width: 60vh;
}

.tcontainer {
  width: 100vw;
  overflow: hidden;
  position: -webkit-sticky;
  position: fixed;
  bottom: 0;
  z-index: 100;
}

.ticker-wrap {
  width: 100%;
  padding-left: 100%;
  background: linear-gradient(90deg, #5f688b 0%, #b9822c 100%);
  text-decoration: none;
}
@keyframes ticker {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-move {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation-timing-function: linear !important;
  animation: ticker 100s linear infinite !important;
}

.ticker-move:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  padding: 0 40px;
  font-size: 20px;
  color: white;
  text-decoration: none;
}

.news {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 170px;
  background: #e6e6e6;
}

.news button {
  cursor: pointer;
  width: 230px;
  height: 50px;
  font-size: 1.8rem;
  font-weight: bolder !important;
  background: none;
  border: #777777 solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.news button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

.news div {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2%;
}

.news div img {
  position: relative;
  top: 10px;
  max-width: 177px;
  height: 32px;
}

.footer {
  width: 100vw;
  background-image: url("/website/imgs/Footer_Image_Main.webp");
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
}

.footer .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5%;
}

.footer .cards .card-1 .card-1-1:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.footer .cards .card-1 .card-1-1 {
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 40px;
  width: 360px;
  height: 275px;
  background: white;
  border-radius: 15px;
}

.footer .cards .card-1 .card-1-1 h2 {
  font-weight: bold;
  font-size: 2.3rem;
  color: black;
}

.footer .cards .card-1 .card-1-1 p {
  width: 70%;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
  font-size: 1.5rem;
  color: black;
  text-align: justify;
}

.footer .cards .card-1 .card-1-1 a {
  color: #ba832d;
  font-size: 1.6rem;
  text-align: center;
}

.footer .cards .card-1 .card-1-1 h4 {
  font-size: 1.6rem;
  text-align: center;
  color: #ba832d;
  text-decoration: underline;
}

.footer .cards .card-2 .card-2-2:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  cursor: pointer;
}

.footer .cards .card-2 .card-2-2 {
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 40px;
  width: 360px;
  height: 275px;
  background: white;
  border-radius: 15px;
}

.footer .cards .card-2 .card-2-2 h2 {
  font-weight: bold;
  font-size: 2.3rem;
}

.footer .cards .card-2 .card-2-2 p {
  width: 70%;
  padding-bottom: 3rem;
  padding-top: 3rem;
  font-size: 1.5rem;
  text-align: justify;
}

.footer .cards .card-2 .card-2-2 a {
  color: #ba832d;
  font-size: 1.6rem;
}

.footer .cards .card-2 .card-2-2 img {
  /*padding-bottom: 3rem;*/
  max-width: 50%;
}

.footer .cards .card-2 .card-2-2 button {
  cursor: pointer;
  width: 230px;
  height: 50px;
  font-size: 1.8rem;
  font-weight: bolder !important;
  background: none;
  border: #777777 solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.footer .cards .card-2 .card-2-2 button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

.footer .cards .card-3 {
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.footer .cards .card-3 .card-3-3:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  /*cursor: pointer;*/
}

.footer .cards .card-3 .card-3-3 {
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  border-radius: 8px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 40px;
  width: 360px;
  height: 275px;
  background: white;
  border-radius: 15px;
}

.footer .cards .card-3 .card-3-3 h2 {
  font-weight: bold;
  font-size: 2.3rem;
}

.footer .cards .card-3 .card-3-3 img {
  /*padding-bottom: 3rem;*/
  padding-top: 1rem;
}

.footer .cards .card-3 .card-3-3 p {
  width: 70%;
  padding-bottom: 2rem;
  padding-top: 2rem;
  font-size: 1.5rem;
  text-align: center;
}

.footer .cards .card-3 .card-3-3 p.link {
  width: 70%;
  font-size: 1.5rem;
  text-align: center;
  padding: 0;
}

.footer .cards .card-3 .card-3-3 a {
  color: #ba832d;
  font-size: 1.6rem;
  text-align: center;
}

.footer .hyper-links {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  color: white;
  gap: 17.5%;
  padding-bottom: 4rem;
}

.footer .hyper-links ul {
  list-style: none;
}

.footer .hyper-links li {
  padding-top: 1.5rem;
}

.footer .hyper-links a {
  color: white;
  text-decoration: none;
}

.footer .hyper-links a:hover {
  text-decoration: underline;
}

.footer .hyper-links .contacts h2 {
  padding-bottom: 1.5rem;
}

.footer .hyper-links .contacts p {
  padding-bottom: 2rem;
}

.footer .hyper-links .contacts span {
  font-size: 1.9rem;
}

.footer .hyper-links .contacts .f {
  font-size: 2.2rem;
  font-weight: 500;
  padding-right: 1.1rem;
}

.footer .hyper-links .contacts i {
  padding-left: 1rem;
}

footer {
  position: relative;
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  z-index: 1000;
}

footer img {
  max-width: 100%;
  height: auto;
}

footer span {
  position: relative;
  top: 5px;
}

.footer-secondary .footer .cards .card-1 .card-1-1 {
  bottom: -20px;
}

.footer-secondary .footer .cards .card-2 .card-2-2 {
  bottom: -20px;
}

.footer-secondary .footer .cards .card-3 .card-3-3 {
  bottom: -20px;
}

.footer-secondary .hyper-links {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .footer-secondary .hyper-links {
    padding-top: 3rem;
  }
}
.tcontainer {
  width: 100vw;
  /*height: 3vh;*/
  overflow: hidden;
  position: -webkit-sticky;
  position: fixed;
  bottom: 0;
  z-index: 100;
}

.tcontainer a {
  color: white !important;
  text-decoration: none;
}

.tcontainer a:hover {
  font-weight: 500;
}

.ticker-wrap {
  width: 100%;
  height: 100%;
  padding-left: 100%;
  background: linear-gradient(90deg, #5f688b 0%, #b9822c 100%);
}

@keyframes ticker {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-move {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation-timing-function: linear;
  animation: ticker 100s linear infinite;
}

.ticker-move:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  padding: 0 40px;
  font-size: 20px;
  color: white;
}

@media (min-width: 1920px) and (max-width: 2560px) {
  .full-screen-video-content .white-bar {
    width: 40vw;
    height: 100vw;
  }
  .footer .hyper-links {
    gap: 14%;
  }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
  body {
    overflow-x: hidden;
  }
  main {
    overflow-x: hidden;
  }
  .button-login {
    display: none;
  }
  nav button.btn-dashboard {
    background-image: none !important;
  }
  .login {
    display: contents;
  }
  nav {
    background: white;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 30vh;
    top: 8vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    border-bottom-left-radius: 8px;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .login-menu {
    display: list-item;
  }
  .nav-active {
    transform: translateX(0%);
  }
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line2 {
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  .full-screen-video-container h2 {
    left: 45px;
  }
  .full-screen-video-container #ryan-logo {
    left: 45px;
  }
  .full-screen-video-container button {
    left: 45px;
  }
  .section-1 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 280px;
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-1 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-1 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
    height: 100%;
    padding-bottom: 4rem;
  }
  .section-1 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 300px !important;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-2 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-2 .sec-1 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
    text-align: left;
  }
  .section-2 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 280px;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-3 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-3 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-3 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 300px;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-4 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-4 .sec-1 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 .sec-1 h2 {
    width: 90%;
  }
  .section-4 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-5 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: 280px;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-5 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-5 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-5 .sec-2 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .news div {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .news div img {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    max-width: 100%;
    height: auto;
    padding-right: 3rem;
  }
  .tcontainer {
    position: fixed;
  }
  .footer {
    height: 1500px;
  }
  .footer .cards {
    flex-flow: column;
    align-items: center;
  }
  .footer .card-1 {
    padding-bottom: 3rem;
  }
  .footer .card-2 {
    padding-bottom: 3rem;
  }
  .footer .hyper-links {
    flex-direction: column;
    padding-left: 33rem;
  }
  footer img {
    max-width: 100%;
    height: auto;
  }
}
@media all and (min-width: 1280px) and (max-width: 1600px) {
  .full-screen-video-content .white-bar {
    width: 50%;
  }
  .full-screen-video-content #ryan-logo {
    left: 100px;
  }
  .full-screen-video-content h2 {
    top: 51vh;
    left: 100px;
  }
  .full-screen-video-content button {
    top: 64vh;
    left: 100px;
  }
  .section-1 .sec-1 {
    padding-right: 0;
  }
  .section-1 .sec-2 {
    padding-left: 0;
  }
  .section-3 .sec-1 {
    margin-left: 8rem;
  }
  .section-3 .sec-2 {
    margin-left: 8rem;
  }
  .section-5 .sec-1 {
    margin-left: 8rem;
  }
  .section-5 .sec-2 {
    margin-left: 8rem;
  }
  .section-3 .sec-1 {
    padding-right: 0;
  }
  .section-5 .sec-1 {
    padding-right: 0;
  }
  .footer .hyper-links {
    gap: 21%;
  }
}
@media all and (min-width: 1024px) and (max-width: 1280px) {
  .nav-links {
    width: 50%;
  }
  .full-screen-video-content .white-bar {
    width: 50%;
  }
  .full-screen-video-content #ryan-logo {
    left: 100px;
  }
  .full-screen-video-content h2 {
    top: 52vh;
    left: 100px;
  }
  .full-screen-video-content button {
    top: 68vh;
    left: 100px;
  }
  .section-1 .sec-1 {
    margin-left: 5rem;
  }
  .section-1 .sec-1 img {
    margin-left: 10rem;
  }
  .section-1 .sec-2 {
    align-content: flex-start;
    padding-right: 3rem;
  }
  .section-1 .sec-2 p {
    width: 90%;
  }
  .section-2 .sec-1 {
    align-content: flex-start;
    margin-right: 4rem;
    margin-left: 4rem;
  }
  .section-2 .sec-1 p {
    width: 90%;
  }
  .section-2 .sec-1 h2 {
    width: 90%;
  }
  .section-2 .sec-1 div {
    width: 90%;
  }
  .section-3 .sec-1 {
    margin-left: 5rem;
  }
  .section-3 .sec-1 img {
    margin-left: 10rem;
  }
  .section-3 .sec-2 {
    align-content: flex-start;
  }
  .section-3 .sec-2 p {
    width: 90%;
  }
  .section-4 .sec-1 {
    align-content: flex-start;
    margin-right: 4rem;
    margin-left: 4rem;
  }
  .section-4 .sec-1 p {
    width: 90%;
    text-align: left;
  }
  .section-4 .sec-1 h2 {
    width: 90%;
    padding-left: 3rem;
  }
  .section-5 .sec-1 {
    margin-left: 5rem;
  }
  .section-5 .sec-1 img {
    margin-left: 10rem;
  }
  .section-5 .sec-2 {
    align-content: flex-start;
  }
  .section-5 .sec-2 p {
    width: 90%;
  }
  .footer {
    height: 600px;
  }
  .footer .cards {
    flex-flow: row;
    justify-content: center;
    align-content: center;
    height: 300px;
    gap: 16%;
    padding-right: 13%;
  }
  .footer .cards .card-1 {
    width: 220px;
    height: 120px;
  }
  .footer .cards .card-2 {
    width: 220px;
    height: 120px;
  }
  .footer .cards .card-3 {
    width: 220px;
    height: 120px;
  }
  .footer .hyper-links {
    gap: 21%;
  }
  footer span {
    top: 2px;
  }
}
@media all and (max-width: 600px) {
  body {
    overflow-x: hidden;
  }
  main {
    overflow-x: hidden;
  }
  .button-login {
    display: none;
  }
  .login {
    display: contents;
  }
  nav {
    background: white;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 30vh;
    top: 8vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    border-bottom-left-radius: 8px;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .login-menu {
    display: list-item;
  }
  .nav-active {
    transform: translateX(0%);
  }
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line2 {
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  .full-screen-video-container h2 {
    left: 45px;
  }
  .full-screen-video-container #ryan-logo {
    left: 45px;
  }
  .full-screen-video-container button {
    left: 45px;
  }
  .section-1 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: 280px;
    width: 100vw;
  }
  .section-1 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-1 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
    padding-bottom: 4rem;
  }
  .section-1 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-2 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: 300px !important;
  }
  .section-2 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-2 .sec-1 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
    text-align: left;
  }
  .section-2 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-3 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: 280px;
  }
  .section-3 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-3 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-3 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: 300px;
  }
  .section-4 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-4 .sec-1 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 .sec-1 h2 {
    width: 90%;
  }
  .section-4 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-5 {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: 280px;
  }
  .section-5 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-5 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-5 .sec-2 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .news div {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .news div img {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    max-width: 100%;
    height: auto;
    padding-right: 3rem;
  }
  .tcontainer {
    position: fixed;
  }
  .footer {
    height: 1500px;
  }
  .footer .card-1 {
    padding-bottom: 3rem;
  }
  .footer .card-2 {
    padding-bottom: 3rem;
  }
  .footer .hyper-links {
    flex-direction: column;
    text-align: center;
  }
  footer img {
    max-width: 100%;
    height: auto;
  }
}
@media all and (min-width: 481px) and (max-width: 769px) {
  body {
    overflow-x: hidden;
  }
  main {
    overflow-x: hidden;
  }
  .button-login {
    display: none;
  }
  .login {
    display: contents;
  }
  nav {
    background: white;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 30vh;
    top: 8vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    border-bottom-left-radius: 8px;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
  .login-menu {
    display: list-item;
  }
  .nav-active {
    transform: translateX(0%);
  }
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  .toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line2 {
    opacity: 0;
  }
  .toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  .full-screen-video-container h2 {
    left: 45px;
  }
  .full-screen-video-container #ryan-logo {
    left: 45px;
  }
  .full-screen-video-container button {
    left: 45px;
  }
  .section-1 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    width: 100%;
    padding-top: 10rem;
    padding-bottom: 8rem;
  }
  .section-1 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-1 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
    height: 100%;
    padding-bottom: 4rem;
  }
  .section-1 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto !important;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-2 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-2 .sec-1 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
    text-align: left;
  }
  .section-2 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-3 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-3 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-3 .sec-2 p {
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-4 .sec-1 {
    justify-content: center;
    align-items: flex-start;
    padding-left: 4rem;
  }
  .section-4 .sec-1 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .section-4 .sec-1 h2 {
    width: 90%;
  }
  .section-4 .sec-2 {
    padding-left: 4rem;
    padding-bottom: 4rem;
  }
  .section-5 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    padding-top: 5rem;
    padding-bottom: 3rem;
  }
  .section-5 .sec-1 {
    padding-left: 4rem;
    justify-content: center;
  }
  .section-5 .sec-2 {
    align-items: flex-start;
    padding-left: 4rem;
    padding-bottom: 2rem;
  }
  .section-5 .sec-2 p {
    text-align: left;
    width: 90%;
    padding-bottom: 2rem;
    padding-top: 2rem;
  }
  .news div {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .news div img {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    max-width: 100%;
    height: auto;
    padding-right: 3rem;
  }
  .tcontainer {
    position: fixed;
  }
  .footer {
    height: 1500px;
  }
  .footer .cards {
    flex-flow: column;
    align-items: center;
  }
  .footer .card-1 {
    padding-bottom: 3rem;
  }
  .footer .card-2 {
    padding-bottom: 3rem;
  }
  .footer .hyper-links {
    flex-direction: column;
    padding-left: 33%;
    text-align: center;
  }
  footer img {
    max-width: 100%;
    height: auto;
  }
}
.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  grid-template-rows: 100vh;
  background-image: url("/website/imgs/Page_WhoWeAre_Main_Image.webp");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 115vh;
  overflow-x: hidden;
  overflow-y: hidden;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: white;
  padding-top: 15vh;
  padding-bottom: 15vh;
  width: 60%;
}

.text .img {
  text-align: left;
  width: 90%;
}

.text h1 {
  width: 90%;
  font-weight: bold;
  font-size: 6rem;
  text-align: left;
  padding-bottom: 4%;
  padding-top: 4%;
}

.text p {
  width: 90%;
  text-align: left;
  font-size: 3rem;
}

.text2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: white;
  padding-top: 10%;
}

.text2 .img {
  text-align: left;
  width: 40vw;
}

.text2 h1 {
  width: 40vw;
  font-weight: bold;
  font-size: 6rem;
  text-align: left;
  padding-bottom: 4%;
  padding-top: 4%;
}

.text2 p {
  width: 40vw;
  text-align: left;
  font-size: 2.2rem;
}

.located {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: white;
  position: relative;
  top: 18%;
  padding-top: 15vh;
  padding-left: 15vh;
}

.located .bl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  height: 230px;
  border-left: 1px solid white;
}

.located h2 {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 2px;
  padding-bottom: 2%;
  padding-left: 6%;
}

.located p {
  font-size: 2rem;
  padding-left: 6%;
}

@media (max-width: 1555px) {
  .located {
    padding-left: 15vh;
  }
}
@media (max-width: 1450px) {
  .text .img {
    text-align: left;
    width: 90%;
  }
  .text h1 {
    width: 90%;
    font-weight: bold;
    font-size: 5.5rem;
    text-align: left;
    padding-bottom: 4%;
    padding-top: 4%;
    letter-spacing: 2px;
  }
  .text p {
    width: 90%;
    text-align: left;
    font-size: 2.8rem;
  }
  .located {
    padding-left: 15vh;
    top: 15vh;
  }
}
@media (max-width: 1250px) {
  .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: white;
    padding-top: 15%;
    padding-left: 2%;
  }
  .text .img {
    text-align: left;
    width: 50vw;
  }
  .text h1 {
    width: 50vw;
    font-weight: bold;
    font-size: 5.5rem;
    text-align: left;
    padding-bottom: 4%;
    padding-top: 4%;
    letter-spacing: 2px;
  }
  .text p {
    width: 50vw;
    text-align: left;
    font-size: 2.8rem;
  }
  .text p br {
    display: none;
  }
  .located {
    /*padding-left: 27%;
    top: 30%;*/
    padding-left: 15vh;
    top: 15vh;
  }
}
@media (max-width: 1024px) {
  .main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(1025px, 1fr));
    grid-template-rows: 60vh;
    background-image: url("/website/imgs/Page_WhoWeAre_Main_Image.webp");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 105vh;
  }
  .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: white;
    padding-top: 15%;
    padding-left: 2%;
    padding-bottom: 0;
    width: 100%;
  }
  .text .img {
    text-align: left;
    width: 100vw;
  }
  .text .img img {
    max-width: 40%;
  }
  .text h1 {
    width: 100vw;
    font-weight: bold;
    font-size: 5rem;
    text-align: left;
    padding-bottom: 4%;
    padding-top: 4%;
    letter-spacing: 2px;
  }
  .text p {
    width: 80vw;
    text-align: left;
    font-size: 2.5rem;
  }
  .located {
    justify-content: flex-start;
    top: 20%;
    padding-left: 2%;
  }
  .located h2 {
    padding-left: 0;
  }
  .located p {
    padding-left: 0;
  }
  .located .bl {
    border: none;
  }
  .located {
    /*padding-left: 27%;
    top: 30%;*/
    padding-top: 0;
    top: 0;
  }
}
@media (max-width: 716px) {
  .located {
    justify-content: flex-start;
    top: 50%;
    padding-left: 2%;
  }
}
@media (max-width: 515px) {
  .main {
    height: 120vh;
  }
  .main .text h1 {
    font-size: 4rem;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  .main .text p {
    font-size: 2rem;
  }
  .main .located {
    justify-content: flex-start;
    top: 20%;
    padding-left: 2%;
  }
}
@media (max-width: 515px) {
  .main {
    height: 120vh;
  }
  .main .text h1 {
    font-size: 4rem;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  .main .text p {
    font-size: 2rem;
  }
  .main .text .img img {
    max-width: 50%;
  }
  .main .located {
    justify-content: flex-start;
    top: 20%;
    padding-left: 2%;
  }
}
@media (max-width: 400px) {
  .main {
    height: 120vh;
  }
  .main .located {
    top: 40%;
  }
}
@media all and (min-width: 1024px) and (max-width: 1280px) {
  .main .text p {
    font-size: 2rem;
  }
  .main .text h1 {
    font-size: 4.5rem;
  }
  .main .text .img img {
    max-width: 45%;
  }
  .main .located .vl {
    bottom: 30%;
  }
}
.main-demo {
  width: 100vw;
  /*height: 100vh;*/
  height: 100%;
  display: grid;
  grid-template-columns: 60vw 40vw;
}

.main-demo .demo-form {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-demo .demo-form form h1 {
  padding-bottom: 3rem;
  font-size: 4rem;
}

.main-demo .demo-form form #first-name {
  background-image: url("/website/imgs/Page_RequestaDemo_Names_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
}

.main-demo .demo-form form #last-name {
  background-image: url("/website/imgs/Page_RequestaDemo_Names_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
  margin-right: 0;
}

.main-demo .demo-form form #company-name {
  background-image: url("/website/imgs/Page_RequestaDemo_Company_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
  padding-left: 4.5rem;
}

.main-demo .demo-form form #position {
  background-image: url("/website/imgs/Page_RequestaDemo_Position_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
  padding-left: 4.5rem;
  margin-right: 0;
}

.main-demo .demo-form form #demo-email {
  background-image: url("/website/imgs/Page_RequestaDemo_Email_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 14px;
  padding-left: 5rem;
}

.main-demo .demo-form form #demo-message {
  resize: none;
  height: unset;
  font-family: "Ubuntu", sans-serif;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .main-demo .demo-form form #demo-message {
    height: 5em;
  }
}
.main-demo .demo-form form .small-form-field {
  margin-bottom: 2.5rem;
  margin-right: 2rem;
  height: 5rem;
  width: 33rem;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  padding-left: 4rem;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
}

.main-demo .demo-form form .big-input-field {
  height: 5rem;
  width: 68.35rem;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  padding-left: 1rem;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.main-demo .demo-form form a {
  color: black;
  font-weight: bold;
  text-decoration: underline;
}

.main-demo .demo-form form p {
  font-family: Ubuntu, "sans-serif";
  padding-bottom: 2.5rem;
}

.main-demo .demo-form form button {
  background-color: #1a1a1a;
  border: none;
  border-radius: 8px;
  color: white;
  height: 4rem;
  width: 20rem;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.main-demo .demo-form form button:hover {
  cursor: pointer;
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

.main-demo .demo-form .demo-group-buttons {
  display: flex;
  align-items: center;
}

.main-demo .demo-form .demo-button-captcha {
  flex: 0 0 65%;
  text-align: start;
}

.main-demo .demo-form .demo-button-submit {
  flex: 1;
  text-align: end;
}

.main-demo .demo-follow {
  background-image: url("/website/imgs/Page_RequestaDemo_Right_Img.webp");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 14rem;
  padding-bottom: 7rem;
}

.main-demo .demo-follow #logo-demo {
  max-width: 25%;
  padding-bottom: 2rem;
}

.main-demo .demo-follow #demo-laptop {
  max-width: 100%;
}

.main-demo .demo-follow h2 {
  color: white;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding-bottom: 4rem;
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
}

.main-demo .demo-follow p {
  /*font-size: 2rem;*/
  letter-spacing: 1px;
  font-weight: 700;
  padding-bottom: 4rem;
  padding-top: 4rem;
  color: white;
  text-align: center;
}

.main-demo .demo-follow h3 {
  font-size: 2rem;
  letter-spacing: 1px;
  font-weight: 700;
  color: white;
  text-align: center;
}

.main-demo .demo-follow h3.btn_SubscribeNewsModal {
  cursor: pointer;
  text-decoration: underline;
}

.main-demo .demo-follow #demo-contacts {
  font-weight: normal;
  padding-top: 1rem;
  padding-bottom: 5rem;
  font-size: 1.5rem;
}

@media (max-width: 1271px) {
  .main-demo {
    height: 100% !important;
    display: grid;
    grid-template-columns: 100vw;
  }
}
@media (max-width: 790px) {
  html {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .demo-form {
    margin-right: 4rem;
  }
  .demo-form form {
    padding-left: 4rem;
  }
  .demo-form .big-input-field {
    width: 33rem !important;
  }
  .demo-follow #logo-demo {
    max-width: 60% !important;
  }
  .demo-follow h2 {
    font-size: 3rem !important;
  }
}
@media all and (min-width: 1024px) and (max-width: 1280px) {
  .main-demo {
    height: 100%;
  }
}
@media all and (min-width: 900px) and (max-width: 1100px) {
  .main-demo {
    height: 100% !important;
  }
}
body {
  width: 100vw !important;
  overflow-x: hidden !important;
}

.login-form {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-form h1 {
  padding-bottom: 1rem;
  font-size: 5rem;
}

.login-form h2 {
  font-size: 2.5rem;
  color: #777777;
  padding-bottom: 8rem;
}

.login-form label {
  padding-left: 5px;
  font-size: 1.3rem;
  color: black;
}

.login-form label a {
  color: black;
  text-decoration: underline;
}

.login-form .check-wrapper {
  padding-bottom: 4rem;
}

.login-form .check-wrapper #check {
  cursor: pointer;
  text-align: center;
  width: 11px;
  position: relative;
  top: 2px;
}

.login-form button {
  background-color: #1a1a1a;
  border: none;
  border-radius: 8px;
  color: white;
  height: 4rem;
  width: 20rem;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.login-form .big-input-field {
  height: 5rem;
  width: 68.35rem;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  padding-left: 1rem;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
  margin-bottom: 2.5rem;
}

.login-form #login-password {
  background-image: url("/website/imgs/icon-cadeado.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 10px;
  padding-left: 5rem;
}

.login-form #login-username {
  background-image: url("/website/imgs/Page_RequestaDemo_Names_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 10px;
  padding-left: 5rem;
}

.login-form button:hover {
  cursor: pointer;
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

@media (max-width: 790px) {
  html {
    max-width: 100%;
    overflow-x: hidden;
  }
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
  .login-form {
    margin-right: 2rem;
  }
  .login-form form {
    padding-left: 4rem;
  }
  .login-form .big-input-field {
    width: 33rem !important;
  }
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 9vh;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  color: #1a1a1a;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
}

h2 {
  font-size: 2.5rem;
  font-weight: lighter;
}

h5 {
  font-size: 1.5rem;
  font-weight: lighter;
}

p {
  font-size: 1.5rem;
}

li {
  font-size: 1.5rem;
}

a {
  /*text-decoration: none;*/
  text-decoration: underline;
  color: white;
}

/* div alert to show in landing page*/
.alert {
  padding: 15px;
  text-align: center;
  z-index: 999999;
  position: fixed;
  bottom: 0px;
  font-size: 13px;
  width: 100%;
}

.alert-info {
  color: #1a1a1a;
  background-color: #fff;
  border-color: #fff;
}

.alert-info hr {
  border-top-color: #1a1a1a;
}

.alert-info .alert-link {
  color: #1a1a1a;
}

/* End style div alert to show in landing page */
/* old news ticker */
.ticker-wrap {
  width: 100%;
  padding-left: 100%;
  background: linear-gradient(90deg, #5f688b 0%, #b9822c 100%);
  text-decoration: none;
}
@keyframes ticker {
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-move {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 200s;
}

.ticker-move:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-block;
  padding: 0 40px;
  font-size: 20px;
  color: white;
  text-decoration: none;
}

.news {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 170px;
  background: #e6e6e6;
}

.news button {
  cursor: pointer;
  width: 230px;
  height: 50px;
  font-size: 1.8rem;
  font-weight: bolder !important;
  background: none;
  border: #777777 solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.news button:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

.news div {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 2%;
}

.news div img {
  position: relative;
  top: 10px;
  max-width: 177px;
  height: 32px;
}

.main-demo .demo-map {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10%;
}

.main-demo .demo-map h1 {
  font-size: 4rem;
  padding-bottom: 3rem;
  width: 90%;
}

.main-demo .demo-map .map {
  width: 100%;
}

.main-demo .demo-map .map svg {
  width: 100%;
}

.map .country-default {
  fill: #23305f;
}

.map .country-active {
  fill: #b9822c;
}

.map .country-active-secondary {
  fill: rgba(185, 130, 44, 0.7);
}

.who-we-are {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-image: url("/website/imgs/Page_WhoWeAre_Main_Image.webp");
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
}

.h2-span {
  font-weight: bold;
  padding-bottom: 1.5rem;
  font-size: 2.5rem;
}

.main-who-we-are {
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 60vw 40vw;
}

.main-who-we-are .left-content {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10%;
}

.main-who-we-are .left-content h1 {
  width: 90%;
  font-weight: bold;
  font-size: 3.5rem;
  text-align: left;
  padding-bottom: 4%;
  padding-top: 4%;
}

.main-who-we-are .left-content p {
  width: 90%;
  text-align: justify;
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
}

.main-who-we-are .left-content .img {
  width: 90%;
  text-align: left;
}

.main-who-we-are .left-content img {
  max-width: 20%;
}

.main-who-we-are .left-content a {
  color: black;
}

.main-who-we-are .demo-follow {
  padding: 14rem 5rem;
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .main-who-we-are .left-content {
    padding: 10% 2%;
    justify-content: unset;
  }
  .main-who-we-are .left-content h1 {
    padding-top: 0;
  }
  .main-demo .demo-follow {
    padding: 20% 10%;
    justify-content: unset;
  }
  .main-demo .demo-follow #logo-demo {
    max-width: 35%;
  }
  .main-demo .demo-form {
    padding: 10% 7%;
    justify-content: unset;
  }
  .main-demo .demo-map {
    padding: 10% 2%;
    justify-content: unset;
  }
}
.demo-follow-p {
  padding-top: 0 !important;
}

.footer .hyper-links {
  gap: 5% !important;
}

.hyper-links .company,
.hyper-links .links,
.hyper-links .contacts {
  width: 360px;
  text-align: center;
}

.company .company-content,
.links .links-content,
.contacts .contacts-content {
  display: inline-block;
  text-align: center;
}

.modal-body-logo img {
  width: 30%;
}

/* Mobile */
@media (max-width: 600px) {
  .full-screen-video-container h2 {
    font-size: 2.5rem;
  }
  .section-1 .sec-1 {
    padding: 0 4rem;
  }
  .section-1 .sec-1 video {
    max-width: 100%;
  }
  .section-1 .sec-2 p {
    width: 100%;
  }
  .section-1 .sec-2 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .section-2 {
    grid-template-rows: auto !important;
  }
  .section-2 .sec-1 {
    padding: 4rem;
    margin: 0;
  }
  .section-2 .sec-1 p {
    width: 100%;
  }
  .section-3 {
    grid-template-rows: auto !important;
  }
  .section-3 .sec-1 {
    padding-top: 4rem;
  }
  .section-3 .sec-2 {
    padding: 4rem;
    margin: 0;
  }
  .section-3 .sec-2 p {
    width: 100%;
  }
  .section-4 {
    grid-template-rows: auto !important;
  }
  .section-4 .sec-1 {
    padding: 4rem;
    margin: 0;
  }
  .section-4 .sec-1 p {
    width: 100%;
  }
  .section-5 .sec-1 {
    padding-top: 4rem;
  }
  .section-5 .sec-2 {
    padding: 4rem;
    margin: 0;
  }
  .section-5 .sec-2 p {
    width: 100%;
  }
  .footer .cards .card-1,
  .footer .cards .card-2,
  .footer .cards .card-3 {
    width: 90%;
  }
  .footer .cards .card-1 .card-1-1,
  .footer .cards .card-2 .card-2-2,
  .footer .cards .card-3 .card-3-3 {
    width: auto;
  }
  .footer-homepage .footer .cards .card-1 .card-1-1 {
    bottom: -20px;
  }
  .footer-homepage .footer .cards .card-2 .card-2-2 {
    bottom: -20px;
  }
  .footer-homepage .footer .cards .card-3 .card-3-3 {
    bottom: -20px;
  }
  .footer-homepage .hyper-links {
    padding-top: 9rem;
  }
  .footer {
    height: 100%;
    padding-bottom: 4rem;
  }
  .requests-form,
  .contacts-form {
    height: 100% !important;
    grid-template-columns: 100% !important;
  }
  .requests-form .demo-form,
  .contacts-form .demo-form {
    width: 100%;
  }
  .requests-form .demo-form form,
  .contacts-form .demo-form form {
    padding: 7rem 4rem;
    width: 100%;
  }
  .requests-form .demo-form form .small-form-field,
  .requests-form .demo-form form .big-input-field,
  .contacts-form .demo-form form .small-form-field,
  .contacts-form .demo-form form .big-input-field {
    width: 100% !important;
  }
  .main-who-we-are .demo-follow,
  .map-content .demo-follow,
  .requests-form .demo-follow,
  .contacts-form .demo-follow {
    padding: 7rem 4rem;
  }
  .main-demo .demo-form .demo-group-buttons {
    display: block;
  }
  .main-demo .demo-form .demo-button-captcha {
    padding-bottom: 2rem;
    flex: unset;
    text-align: unset;
  }
  .main-demo .demo-form .demo-button-submit {
    flex: unset;
    text-align: unset;
    width: 100%;
  }
  .main-demo .demo-form .demo-button-submit button {
    width: 100%;
  }
  #SubscribeNewsModal .form-item select, #SubscribeNewsModal .form-item input {
    margin: 0 0 1rem 0 !important;
  }
  #SubscribeNewsModal .btn-subscribe {
    margin: 0 !important;
    padding: 4rem 0 4rem 0;
  }
  .main-demo .demo-map {
    padding: 7rem 4rem 0 4rem;
  }
  .main-demo .demo-map h1 {
    padding-bottom: 0;
    width: 100%;
  }
  .map-content {
    height: 100% !important;
    grid-template-columns: 100% !important;
  }
  .main-who-we-are {
    height: 100% !important;
    grid-template-columns: 100% !important;
  }
  .main-who-we-are .left-content {
    padding: 7rem 4rem;
  }
  .main-who-we-are .left-content h1,
  .main-who-we-are .left-content p {
    width: 100%;
  }
  .hyper-links .company,
  .hyper-links .links,
  .hyper-links .contacts {
    width: auto;
    text-align: unset;
  }
  .company .company-content,
  .links .links-content,
  .contacts .contacts-content {
    display: block;
    text-align: unset;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .footer .hyper-links {
    padding: 0;
    align-items: center;
    text-align: center;
  }
  .hyper-links .company,
  .hyper-links .links,
  .hyper-links .contacts {
    width: 360px;
    text-align: unset;
  }
  .company .company-content,
  .links .links-content,
  .contacts .contacts-content {
    display: block;
    text-align: unset;
  }
}
.contacts-followus {
  align-items: center;
  display: flex;
  position: absolute;
}

.contacts-followus .f {
  /*width: 20%;*/
  display: flex;
}

.contacts-followus .followus-divider {
  display: flex;
  /*width: 1%;*/
}

.contacts-followus .followus-img {
  display: flex;
  /*width: 57%;*/
}

.contacts-followus .followus-img img {
  width: 125px;
  padding: 1.1rem;
  filter: brightness(10);
}

.linkedin-img img {
  width: 125px;
  padding: 1.1rem;
  filter: brightness(10);
}

.form-group {
  margin-bottom: 1rem;
}

.text-danger {
  color: #dc3545 !important;
}

.error > p {
  padding-bottom: 0 !important;
}

/* TEST Pages STYLES*/
.main-demo.requests-form .iframe-form h1,
.main-demo.contacts-form .iframe-form h1 {
  font-size: 4rem;
  text-align: left;
  width: 100%;
  padding: 14rem 4rem 0 12rem;
}

.demo-form .iframe-form {
  width: 100%;
}

.demo-form .iframe-form iframe,
.demo-form .iframe-form iframe {
  padding: 0 7rem 4rem 4rem;
  width: 100%;
}

@media (max-width: 480px) {
  .demo-form .iframe-form iframe,
  .demo-form .iframe-form iframe {
    padding: 0 2rem 2rem 2rem;
  }
  .main-demo.requests-form .iframe-form h1,
  .main-demo.contacts-form .iframe-form h1 {
    padding: 14rem 4rem 0 4rem;
  }
}
.footer-bottom-link-list {
  padding-bottom: 1.5rem;
}

.footer-bottom-social-links li {
  display: inline;
  margin: 15px;
  font-size: 2.5rem;
}

.footer-bottom-social-links li a:hover {
  text-decoration: none !important;
}

footer .footer-bottom-link-list li {
  display: inline;
  margin-right: 10px;
}

footer .footer-bottom-link-list li a {
  font-style: italic;
  font-weight: 600;
  color: black;
  text-decoration: none;
}

footer .footer-bottom-link-list li a:hover,
footer .footer-bottom-link-list li.active a {
  text-decoration: underline;
}

.footer-content {
  display: flex;
  margin: 0 auto;
  padding: 20px 0;
}

.footer-content .footer-logo {
  position: relative;
  flex: 0 0 15%;
}

.footer-content .footer-logo img {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
}

.footer-content .footer-information {
  flex: 1;
  padding-left: 50px;
}

.footer-content .footer-information .rights-reserved-text {
  padding-bottom: 1rem;
}

#userwayAccessibilityIcon {
  transform: translate(-100%);
  top: 50%;
  left: calc(100vw - 25px);
}

.contacts-form .demo-follow,
.requests-form .demo-follow {
  padding: 0;
}

.footer .cards .card-1 .card-1-1 .button-request-demo {
  position: relative;
  cursor: pointer;
  width: 230px;
  height: 50px;
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: bolder !important;
  background: none;
  border: #777777 solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  text-decoration: none;
}

.footer .cards .card-1 .card-1-1 .button-request-demo:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
  filter: invert(0);
}

.footer .cards .card-1 .card-1-1 .button-contact-us {
  position: relative;
  cursor: pointer;
  width: 230px;
  height: 50px;
  font-size: 1.8rem;
  font-weight: bolder !important;
  background: none;
  color: #ba832d;
  border: #ba832d solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

.footer .cards .card-1 .card-1-1 .button-contact-us:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #ba832d;
  color: white;
}

.button-request-demo img {
  height: 50%;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: black;
  filter: invert(1);
}

.button-request-demo:hover img {
  filter: invert(0);
}

.button-contact-us img {
  height: 60%;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.button-contact-us:hover img {
  filter: brightness(0) invert(1);
}

.text-indent-50 {
  text-indent: 50px;
}

.text-title-h2 {
  font-weight: 400;
  text-decoration: underline;
  margin: 15px 0;
}

.landing-tables td {
  padding: 15px;
}

.dropdown-menu {
  padding: 1rem;
  width: 210px;
  box-shadow: 0px -5px 30px rgba(51, 51, 51, 0.1803921569);
}

.button-frontend {
  margin-bottom: 5rem;
  background-color: #1a1a1a;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  color: white;
  height: 3.3rem;
  width: 13rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.button-frontend:hover {
  cursor: pointer;
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  color: white;
}

#SubscribeNewsModal .modal-body-logo {
  width: 100%;
  text-align: center;
  margin: 10px 0;
}

#SubscribeNewsModal .form-item #first_name {
  background-image: url("/website/imgs/Page_RequestaDemo_Names_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
}

#SubscribeNewsModal .form-item #last_name {
  background-image: url("/website/imgs/Page_RequestaDemo_Names_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
}

#SubscribeNewsModal .form-item #company {
  background-image: url("/website/imgs/Page_RequestaDemo_Company_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
  padding-left: 4.5rem;
}

#SubscribeNewsModal .form-item #position {
  background-image: url("/website/imgs/Page_RequestaDemo_Position_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 9.5px;
  padding-left: 4.5rem;
}

#SubscribeNewsModal .form-item #email {
  background-image: url("/website/imgs/Page_RequestaDemo_Email_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 14px;
  padding-left: 5rem;
}

#SubscribeNewsModal .form-item #country {
  background-image: url("/website/imgs/Page_RequestaDemo_globo_Icon.webp");
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 14px;
  padding-left: 4.5rem;
}

#SubscribeNewsModal .form-item {
  text-align: center;
}

#SubscribeNewsModal .form-item input, #SubscribeNewsModal .form-item select {
  margin-bottom: 1rem;
  height: 5rem;
  width: 80%;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  padding-left: 4rem;
  font-size: 1.6rem;
  color: black;
  text-decoration: none;
}

#SubscribeNewsModal select:required:invalid {
  color: rgba(0, 0, 0, 0.7);
}

#SubscribeNewsModal option[value=""][disabled] {
  display: none;
}

#SubscribeNewsModal option {
  color: black;
}

#SubscribeNewsModal .btn-subscribe {
  text-align: center;
  margin: 30px;
}

#SubscribeNewsModal .btn-submit {
  width: 230px;
  height: 50px;
  font-size: 2rem;
  background: none;
  border: #777 solid 2px;
  border-radius: 8px;
  vertical-align: middle;
  font-weight: bold;
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
}

#SubscribeNewsModal .btn-submit:hover {
  transform: scaleX(1.06) scaleY(1.06);
  box-shadow: 0px 21px 31px 0px rgba(0, 0, 0, 0.1);
  transition: transform 500ms ease 0ms, box-shadow 500ms ease 0ms;
  background: #1a1a1a;
  color: white;
}

#SubscribeNewsModal a, #SubscribeNewsModal .gold-spam a, #SubscribeNewsModal .gold-spam {
  color: #d0b26c;
}

#SubscribeNewsModal .request-news-description {
  font-size: 11px;
  text-align: center;
  color: #000;
}

#SubscribeNewsModal .request-news-description p {
  font-size: 11px;
}

#SubscribeNewsModal .captcha .g-recaptcha > div {
  margin: 10px auto;
}

@media (max-width: 768px) {
  #SubscribeNewsModal .modal {
    padding-top: 20px; /* Location of the box */
  }
  #SubscribeNewsModal .modal-body-logo img {
    max-width: 60%;
  }
  #SubscribeNewsModal .form-item select, #SubscribeNewsModal .form-item input {
    margin: 0 10px;
  }
  #SubscribeNewsModal .form-item {
    text-align: center;
  }
  #SubscribeNewsModal .form-item select, #SubscribeNewsModal .form-item input {
    width: 100%;
  }
}
/* MODAL */
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999999; /* Sit on top */
  padding-top: 50px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #eee;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

/* Add Animation */
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
/* The Close Button */
.close {
  color: #d0b26c;
  float: right;
  font-size: 28px;
  font-weight: 600;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  display: none;
  background: white;
  white-space: nowrap;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  padding: 2rem 2rem 2rem 0rem;
}

.dropdown-group {
  display: flex;
}