@font-face {
  font-family: 'Titillium-Regular';
  src: url(../font/TitilliumWeb-Regular.ttf);
}
@font-face {
  font-family: 'Titillium-Bold';
  src: url(../font/TitilliumWeb-Bold.ttf);
}

* {
  font-family: 'Titillium-Regular';
  /* color: white; */
}

.container {
  padding-top: 1rem !important;
}

.home{
  position: fixed;
  top: 0.5vw;
  left: 1vw;
  cursor: pointer;
  z-index: 100;
  width: 4vw;
}

.logout {
  position: fixed;
  top: 0.5vw;
  right: 1vw;
  cursor: pointer;
  z-index: 100;
  width: 4vw;
}

select, select option {
  background-color: white !important;
}

.rotate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(25, 25, 25);
  z-index: 1001;
  display: none;
  justify-content: center;
  align-items: center;
}

.rotate img {
  max-width: 50%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.text-center {
  text-align: center;
}

.logo-rodape {
  position: fixed;
  bottom: 1vw;
  left: 0;
}

.logo-rodape img {
  width: 250px;
}

.div-button a, .div-button button {
    color: #D60004;
    font-size: 1.2vw;
    text-decoration: none;
    text-align: center;
    font-family: 'Titillium-Bold';
    background-color: white;
    border: none;
}

.div-button a:hover, .div-button button:hover {
  color: #F2AE0C;
  cursor: pointer;
}

.div-button {
    padding: .5vw 2vw .5vw 2vw;
    background-color: white;
    border-radius: .5rem;
}

@media screen and (max-width: 1024px) and (orientation: portrait) {
  body {
    font-size: 1.4em;
  }
  .container {
    padding-top: 8vh !important;
  }
  .home {
    left: 2vw;
    top: 2vw;
    width: 10vw;
  }
  .logout {
    right: 2vw;
    top: 2vw;
    width: 10vw;
  }
  .img-title img{
    width: 55vw !important;
  }
  /* .logo-rodape {
    transform: translateX(40%);
  } */
   .div-button a, .div-button button {
    font-size: 6.5vw;
   }
   .title-content-pictures{
    color: white;
   }
   .div-button {
    padding: 3vw 7vw 3vw 7vw;
   }
   .div-button .column-responsive {
    margin-left: 2vw !important;
   }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  .container {
    padding-top: 1rem !important;
  }
  .home {
    left: 0.5vw;
    top: 0.5vw;
    max-width: 5vw;
  }
  .logout {
    right: 0.5vw;
    top: 0.5vw;
    max-width: 5vw;
  }
  .img-title img{
    width: 35vw !important;
  }
  .logo-rodape {
    width: 15vw;
  }
  .div-button a {
        font-size: 2vw;
    }
}