html, body {
  width: 100vw;
  height: 100vh; }

.logo {
  position: absolute;
  bottom: 2rem;
  right: 12px;
  width: 180px;
  height: auto;
  z-index: 3000; }
  @media (min-width: 576px) {
    .logo {
      bottom: 40px;
      right: 60px; } }
  @media (min-width: 768px) {
    .logo {
      bottom: 60px;
      right: 80px; } }
  @media (min-width: 992px) {
    .logo {
      bottom: 60px;
      right: 100px; } }
  @media (min-width: 1200px) {
    .logo {
      bottom: 100px;
      right: 152px; } }
  @media (min-width: 1400px) {
    .logo {
      bottom: 100px;
      right: 152px; } }

.welcome {
  width: 100%;
  height: 100%; }
  .welcome .carousel {
    width: 100%;
    height: 100%; }
    .welcome .carousel .carousel-inner {
      width: 100%;
      height: 100%; }
      .welcome .carousel .carousel-inner .carousel-item {
        width: 100%;
        height: 100%;
        position: relative; }
        .welcome .carousel .carousel-inner .carousel-item .bg-item {
          position: absolute;
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
          -o-object-position: center;
             object-position: center;
          z-index: -1; }
        .welcome .carousel .carousel-inner .carousel-item .screencover {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          z-index: -1; }
        .welcome .carousel .carousel-inner .carousel-item .container {
          height: 100%;
          display: flex;
          align-items: center;
          transform: translateY(-10%); }
          .welcome .carousel .carousel-inner .carousel-item .container .subtitle {
            font-weight: bold;
            font-size: 3.5vh;
            line-height: 1;
            color: #FFFFFF; }
          .welcome .carousel .carousel-inner .carousel-item .container .title {
            font-weight: 900;
            font-size: 10vh;
            line-height: 1;
            color: #FFFFFF;
            margin-left: -1vh; }
            @media (min-width: 400px) {
              .welcome .carousel .carousel-inner .carousel-item .container .title {
                font-size: 18vh; } }
          .welcome .carousel .carousel-inner .carousel-item .container .text {
            font-weight: 300;
            font-size: 2vh;
            color: #FFFFFF; }
          .welcome .carousel .carousel-inner .carousel-item .container .btn-explore {
            display: flex;
            align-items: center;
            text-decoration: none; }
            .welcome .carousel .carousel-inner .carousel-item .container .btn-explore .icon {
              margin-right: 0.5rem;
              height: 5vh;
              width: auto; }
            .welcome .carousel .carousel-inner .carousel-item .container .btn-explore .text {
              color: #FFFFFF;
              font-weight: bold;
              font-size: 2vh;
              line-height: 1; }

.carousel-control-next, .carousel-control-prev {
  width: 7rem; }

.carousel-control-prev-icon {
  width: 5rem;
  height: 5rem; }

.carousel-control-next-icon {
  width: 5rem;
  height: 5rem; }