* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
}
.f-login-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(../img/background.jpg);
  background-size: cover;
}
.f-login-background-opacity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.56), #002950);
}
.f-login-logo {
  width: 10.2vw;
}
.f-login-logo-container {
  position: absolute;
  width: 16%;
  height: 3.9vw;
  border-right: 1px solid #ffffff;
  text-align: center;
  left: 31.75%;
  top: 8.8%;
}
.f-title {
  color: #ffffff;
  position: absolute;
  left: 50.57%;
  top: 10.63%;
  font-family: Karla-Regular;
  font-size: 1.56vw;
}
.modulos-container {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: grid;
  grid-template-columns: 12.3vw 12.3vw 12.3vw;
  grid-gap: 2.8vw;
  row-gap: 3.2vw;
}
.modulo {
  width: 12.3vw;
  height: 11.4vw;
  border: 2px solid #ffffff;
  border-radius: 0.5vw;
  margin-right: 1.435%;
  margin-left: 1.435%;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: all 0.3s ease;
}
.modulo-img,
.modulo-img-active {
  width: 4.5vw;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
}
.modulo-img-active {
  display: none;
}
.modulo > label {
  color: #ffffff;
  font-family: Poppins-ExtraLight;
  font-size: 1.3vw;
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  cursor: pointer;
}
.modulo:hover {
  background-color: #ffffff;
}
.modulo:hover label {
  font-family: Poppins-SemiBold;
  color: #336da8;
}
.modulo:hover .modulo-img {
  display: none;
}
.modulo:hover .modulo-img-active {
  display: block;
}