/*@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;600&display=swap');*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');

html, body {
  height: 100%;
  width: 100%;
  background: #dcdcdc;
  /*font-family: 'Archivo Narrow', sans-serif;*/
  font-family: 'Ubuntu', sans-serif;
  font-size: 1em;
  color: #2b2d2f;
}

a {
  color: #003759;
}

  a:hover {
    color: #008BB0;
    text-decoration: none;
  }

.navbar-user {
  font-size: 1em;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #003759;
  color: #dcdcdc;
}

.dropdown-menu  {
  z-index: 10000;
}

.padding {
  padding-bottom: 4rem;
}

.margin {
  margin-bottom: 25rem;
}

.welcome {
  padding-top: 2rem;
}

.btn-penapp {
  width: 100%;
}

.btn-external-login {
    -ms-border-radius: 15px;
    border-radius: 15px;
    height: 5rem;
    width: 8rem;
    margin: 2px;
    background-color: #0e76a8;
    color: #dcdcdc;
}

.btn-penapp {
  background-color: #003759;
  color: #dcdcdc;
}


/* Carousel */
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

#logo {
  width: 60%; 
  height: auto;
}

.social li a {
  font-size: 2em;
  padding: .3rem;
}

.fa-facebook:hover {
  color: #3b5998;
}
.fa-twitter:hover {
  color: #00aced;
}
.fa-linkedin:hover {
  color: #0e76a8;
}
.fa-instagram:hover {
  color: #517fa4;
}
.fa-youtube:hover {
  color: #bb0000;
}

.flip-card {
  perspective: 1000px;
}

.flip-card-inner.error {
  transition: none;
}
.flip-card-inner {
  position: relative;
  transition: transform 0.6s;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}


/*---Media Queries 
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/


@media (max-width: 992px) {
  
}

@media (max-width: 768px) {
  .social li a {
    font-size: 1.5em;
    padding: .2rem;
  }

  .padding {
    padding-bottom: 1rem;
  }
}

@media (max-width: 576px) {
 .social li a {
    font-size: 1.5em;
    padding: .2rem;
  }

  .padding {
    padding-bottom: 1rem;
  }
}