header .navbar-nav .nav-link { 
    color: #FFF;
    opacity: .8 }

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:active,
header .navbar-nav .nav-link:focus { opacity: 1 }

.blockUI.blockMsg.blockPage img {
    width: 20px !important;
}

header .navbar-nav .nav-link.active { color: var(--flex-secondary) }

.navbar .navbar-toggler { 
    border: 0;
    width: 48px;
    height: 48px;
    gap: .375rem;
    flex-direction: column;
    justify-content: center;
    font-size: 100%;
    padding: .75rem .5rem }
  
.navbar .navbar-toggler .navbar-toggler-icon { 
    width: 100%;
    display: block;
    height: .25rem;
    border-radius: 4px;
    background: var(--flex-secondary) !important }

.navbar-auth .navbar-toggler .navbar-toggler-icon { background: var(--flex-primary) !important }

    
@media(max-width:767.98px){
    header .navbar-brand img {
      max-width: 60vw;
      max-height: calc(2.5rem + 1.75vw) }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding: 0 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-dark);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: var(--flex-primary);
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { color: var(--flex-secondary) !important }
  
    header .nav-item .btn { font-size: 120% }
    .navbar .navbar-toggler { display: flex }
}

#hero .hero-cover {
    height: 100%;
    width: 100%;
    object-fit: cover }

@media(min-width:768px){
    .home #hero,
    .home #hero > *,
    .home #hero > * > * { height: 100% }
    #hero .display-1 { font-size: 6vw }
}

@media(max-width:767.98px){
    .home #hero,
    .home #hero > *,
    .home #hero > * > * { height: 100% }
    #hero .display-1 { font-size: 14vw }
}

@media(min-width:1366px){
    #partner .row:nth-child(2) {
        margin-top: -4rem !important
    }
}

#oab,
.oab {
    background: url(img/bg-oab.png) left;
    background-size: cover
}

@media(max-width:767.98px){
    #about .position-absolute.top-50.start-50.translate-middle,
    #oab .position-absolute.top-50.start-50.translate-middle {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: translate(0,0) !important;
    }
}

#contact,
#register {
    background: url(img/bg-contact.png) left;
    background-size: cover
}

.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus { color: var(--flex-primary) !important }

.bg-light {
    background: #EEE !important
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 3rem;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 2rem;
    height: 2rem;
    margin: 8px;
    border: 6px solid var(--flex-primary);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--flex-primary) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {animation-delay: -0.45s}
.lds-ring div:nth-child(2) { animation-delay: -0.3s }
.lds-ring div:nth-child(3) { animation-delay: -0.15s }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.shadow { box-shadow: 0 .75rem 1rem rgba(20,76,92,.075)!important; }

.bg-gradient-dark {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%) }

#dados-cooperado{
    -webkit-box-shadow: inset 200px -1px 223px -106px rgba(0,68,67,0.67);
    -moz-box-shadow: inset 200px -1px 223px -106px rgba(0,68,67,0.67);
    box-shadow: inset 200px -1px 223px -106px rgba(0,68,67,0.67);
    background-color: rgba(var(--flex-primary-rgb),.1);
}

.bg-gradient-primary{
    background: rgb(0,68,67);
    background: -moz-linear-gradient(127deg, rgba(0,68,67,1) 0%, rgba(0,34,33,1) 100%);
    background: -webkit-linear-gradient(127deg, rgba(0,68,67,1) 0%, rgba(0,34,33,1) 100%);
    background: linear-gradient(127deg, rgba(0,68,67,1) 0%, rgba(0,34,33,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004443",endColorstr="#002221",GradientType=1);
}

.bg-gradient-secondary{
    background: rgb(0,68,67);
    background: -moz-linear-gradient(290deg, rgba(0,68,67,1) 0%, rgba(58,109,49,1) 30%, rgba(87,129,40,1) 68%, rgba(154,176,19,1) 83%, rgba(213,217,0,1) 100%);
    background: -webkit-linear-gradient(290deg, rgba(0,68,67,1) 0%, rgba(58,109,49,1) 30%, rgba(87,129,40,1) 68%, rgba(154,176,19,1) 83%, rgba(213,217,0,1) 100%);
    background: linear-gradient(290deg, rgba(0,68,67,1) 0%, rgba(58,109,49,1) 30%, rgba(87,129,40,1) 68%, rgba(154,176,19,1) 83%, rgba(213,217,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004443",endColorstr="#d5d900",GradientType=1);
}

.my-card.active{
    background-color: var(--flex-secondary);
}

.my-card.active .icon{
    color: var(--flex-primary);
}

.my-card.active .card-body{
    color: var(--flex-primary);
}

.my-card{
    background-color: var(--flex-primary);
}

.my-card .icon{
    color: #fff;
}

.my-card .card-body{
    color: #fff;
}