body{
  background-image: url("../img/bg-01.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@font-face {
font-family: "SctoGroteskABold";
src: url("../fonts/SctoGroteskABold.otf");
}
@font-face {
font-family: "SctoGroteskAMedium";
src: url("../fonts/SctoGroteskAMedium.otf");
}
@font-face {
font-family: "SctoGroteskABlack";
src: url("../fonts/SctoGroteskABlack.otf");
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  20%{
    transform: rotate(72deg);
  }
  40%{
    transform: rotate(144deg);
  }
  60%{
    transform: rotate(216deg);
  }
  80%{
    transform: rotate(288deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cover-container {
  max-width: 42em;
}

.btn-primary{
  background-color: #0071CE;
}

.modal-backdrop {
    --bs-backdrop-bg: #9B9B9B;
}

.nav-masthead .nav-link {
  color: rgba(255, 255, 255, .5);
  border-bottom: .25rem solid transparent;
}

.icon-user{
  background: url("../img/icn_user.png") no-repeat scroll 7px 7px;
  padding-left:30px;
}

.icon-pass{
  background: url("../img/icn_pass.png") no-repeat scroll 7px 7px;
  padding-left:30px;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

.input-group-text {
  background-color: #fff;
}