/* color cuando se clica a un boton de un dropdown */
/* .dropdown-item:active {
    background-color: #c00000;
} */

.dot {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}
.dot-green {
    background-color: #28a745;
}

.dot-greenyellow {
    background-color: #88a829;
}

.dot-yellow {
    background-color: #ffc107;
}

.dot-red {
    background-color: #dc3545;
}

.btn-sm {
    border-radius: 1.35rem;
}

.btn-lg {
    border-radius: 1.35rem;
}

.rounded-2 {
    border-radius: 2rem !important;
}

.rounded-4 {
    border-radius: 4rem !important;
}

.larger-font-size {
    font-size: 1.7rem;
}

hr {
    border: 1px solid #d5e6f9;
}

.bg-orange {
    background-color:#DA9875;
}

.bg-purple {
    background-color:#8B6EA6;
}

.icon-left {
  mask: url(/static/frontend/img/left-foot.svg);
  -webkit-mask:url(/static/frontend/img/left-foot.svg);
}
.icon-right {
  mask: url(/static/frontend/img/right-foot.svg);
  -webkit-mask: url(/static/frontend/img/right-foot.svg);;
}

footer {
  color: #fff;
}

footer a {
  color: rgba(255,255,255,0.5)
}

footer strong {
  font-size: 1.25rem;
}

.icon {
  display: inline-block;
  background: white;
  width:190px;
  height:241px;
  mask-size: cover !important;
  -webkit-mask-size: cover; 
}
.icon:hover,
.icon:focus {
  background: red;
}

.logo-max-height{
    max-height: 150px;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  /*min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}


@media (min-width: 300px) { 
  .navbar-brand {
    font-size: 0.9rem;
  }
  .navbar-text {
    font-size: 0.8rem;
  }
  nav > form > button {
    padding-left: 0 !important;
    padding-right: 0 !important;

  }


}  

    
@media (min-width: 768px) { 
  .navbar-brand {
    font-size: 1.25rem;
  }
  .navbar-text {
    font-size: 1rem;
  }
  nav > form > button {
    padding: .375rem .75rem !important;
  }
}

@media (min-width: 992px) { 
  .navbar-brand {
    font-size: 1.25rem;
  }
  .navbar-text {
    font-size: 1rem;
  }
  nav > form > button {
    padding: .375rem .75rem !important;
  }
}


@media (min-width: 1200px) { 
  .navbar-brand {
    font-size: 1.25rem;
  }
  .navbar-text {
    font-size: 1rem;
  }

  nav > form > button {
    padding: .375rem .75rem !important;
  }

  .custom-width{
    width: 20.0% !important;
    flex: 0 0 20.0%;
  }  
}