vbody { background-color: var(--flex-light)}


    
header .navbar-nav .nav-link { 
    color: var(--flex-dark);
    font-weight: bold }

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:active,
header .navbar-nav .nav-link:focus,
header .navbar-nav .nav-link.active { color: var(--flex-primary) }

header .navbar-toggler { 
    border: 0;
    width: 48px;
    height: 48px;
    display: flex;
    gap: .375rem;
    flex-direction: column;
    justify-content: center;
    font-size: 100%;
    padding: .75rem .5rem }
  
header .navbar-toggler .navbar-toggler-icon { 
    width: 100%;
    display: block;
    height: .25rem;
    border-radius: 4px;
    background: var(--flex-dark) !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 .navbar-nav .nav-link { 
      text-align: center;
      color: #FFF;
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .navbar-nav .nav-link :hover,
    header .navbar-nav .nav-link :active,
    header .navbar-nav .nav-link :focus { color: var(--flex-secondary) !important }
  
    header .nav-item .btn { font-size: 120% }
}

#hero { 
    background: url(img/bg-hero1.webp) no-repeat center fixed;
    background-size: cover }

@media(min-width:768px){
  #hero img {
    right:calc(3vw)
  }    
}

@media(min-width:1366px){
  #hero img {
    right:calc(10vw)
  }    
}

@media(min-width:1600px){
  #hero img {
    right:calc(15vw)
  }    
}  

@media(max-width:576px){
  #hero { padding: 2rem 0 }
  .hero-caption {
    text-align: center;
    position:relative;
    left: auto !important;
    top: -15rem !important
  }
}

.bg-gradient-dark {
  background: rgb(14,34,39);
  background: linear-gradient(180deg, rgba(14,34,39,0) 10%, rgba(14,34,39,1) 100%) }
    
.bg-gradient-secondary {
  background: rgb(153,213,213);
  background: linear-gradient(180deg, rgba(153,213,213,0) 10%, rgba(153,213,213,1) 100%) }

#services article { padding-top: 70% !important }

#services article img {
  position: absolute;
  top: 0;
  transition: all 300ms;
  width: 100%;
  height: 100%;
  object-fit: cover }

#services article:hover img { transform: scale(1.15) }

.carousel-control-prev-icon { 
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !important }

.carousel-control-next-icon { 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important }


@media(min-width:1366px){
  .g-xl-10 {
    --flex-gutter-x: 8rem;
  }
}

@media(min-width:768px){
  .position-md-absolute {
    position: absolute
  }

  .translate-md-middle { transform: translate(-50%,-50%) !important }
}

@media(max-width:767.98px){

  #services article { padding-top: 120% !important }

}

#talents .bg-dark {
  background: url(img/bg-talents.webp) no-repeat center fixed;
  background-size: cover }

#opportunities .bg-secondary {
  background: url(img/bg-oppotunities.webp) no-repeat center fixed;
  background-size: cover }

@media(min-width:1024px){
  .footer-sitemap { height: 150px }
  .rounded-5 { border-radius: 3.5rem !important }
}

.pageheader { padding: calc(3rem + 1vw) 0 }

.pageheader.bg-dark:not(.nobg) {
  background: url(img/bg-header-talents.webp) no-repeat center;
  background-size: cover }

#opportunities .pageheader {
  background: url(img/bg-header-opportunities.webp) no-repeat center;
  background-size: cover }

  
#opportunities article { 
  transition: background 300ms, border 300ms }

@media(min-width:992px){
  #opportunities article.active {
    border-color: var(--flex-dark) !important;
    background: var(--flex-dark);
    color: #FFF
  }
  #opportunities article.active .text-dark { color: var(--flex-secondary) !important }
}

#opportunities article:hover {
  border-color: var(--flex-dark) !important;
  background: var(--flex-dark);
  color: #FFF
}  

#opportunities article:hover .text-dark{ color: var(--flex-secondary) !important }

@media(min-width:768px){
  #filters.collapse { display: flex !important }
}

#filters.collapsing,
#filters.collapse.show { display: flex !important }

.pageheader img {
  filter: grayscale(1);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .25;
  object-fit: cover }

@media(min-width:1024px){
  .text-lg-nowrap { white-space: nowrap }
  
  #opportunities .overflow-y-scroll {
    max-height: 600px
  }

}

.form-control.rounded-5,
.form-select.rounded-5,
textarea {
  border: 0 !important;
  padding-left: 1.5rem;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.15)
}

.form-floating>label { padding-left: 1.5rem }


.overflow-y-scroll {
  overflow-y: auto
}

.border-dashed{ border-style:dashed !important; }

.was-validated .form-valid:has(> .form-control:invalid) > .input-valid { border-color: var(--flex-danger) !important }
.was-validated .form-valid:has(> .form-control:invalid) .text-primary{ color: var(--flex-danger) !important }
.was-validated .form-valid:has(> .form-control:invalid) .bg-secondary{ background-color: rgb(var(--flex-danger-rgb), .1) !important }
.was-validated .form-valid:has(> .form-control:invalid) .border-primary{ border-color: var(--flex-danger) !important }
.was-validated .form-valid:has(> .form-control:invalid) .btn-link{ color: var(--flex-danger) !important }