/* ---- colors arees dipsalut ---- */

.color-salutambiental {color:#7996C4;} 
.color-promosalut {color:#DF2278;}
.color-acciosocial {color:#8769AE;}
.color-observatori {color:#767676;}


.bg-salut {background-color:#7996C4;} 
.bg-promosalut {background-color:#DF2278;}
.bg-acciosocial {background-color:#8769AE;}
.bg-observatori {background-color:#767676;}



/* ===================================
    Badge DDGI
====================================== */


.badge_DDGI img {margin-bottom: .3rem !important; margin-top:-1rem; margin-right:.5rem }  

@media only screen and (max-width:999px) {
  .badge_DDGI {    display: none  }
}	













.zoom-effect-wrapper {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.zoom-effect-img {
  display: block;
  transition: transform .4s ease-in-out;
}

.zoom-effect:hover .zoom-effect-img {
  transform: scale(1.05);
}


#home-ambits img {
  object-fit: cover;
 
}
@media (max-width: 500px) {
#home-ambit-promocio img {
  min-height: 250px;
}
}





.dropdown-fullwidth .dropdown-menu {
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 1rem 0;
}

@media (min-width: 991px){
.dropdown-fullwidth {
    position: static;
}}


@media (min-width: 992px){
.dropdown-fullwidth .dropdown-menu {
    max-width: 94%;
}}


@media (min-width: 1200px){
.dropdown-fullwidth .dropdown-menu {
    max-width: 1140px;
}}


@media (min-width: 1400px){
.dropdown-fullwidth .dropdown-menu {
    max-width: 1200px;
}}


.flip-xy {
  transform: scale(-1);
}

.flip-x {
    transform: scaleX(-1);
}

.flip-y{
  transform: scaleY(-1);
}

.rotate-left{
  transform: rotateZ(-1deg);
  &.mobile-screenshot{
    transform: rotateZ(-5deg);
  }
}

.rotate-right{
  transform: rotateZ(1deg);
}



.divider {
    position: relative;
}
.divider-slide {

  width: 100%;
  bottom: -2px;
  position: absolute;
}


.divider svg {
    background: 0 0 !important;
    height: 6vw;
}
.divider-slide svg {
  background: 0 0 !important;
  height: 3vw;
}


.divider svg:not([class*=bg]) path,
.divider-slide svg:not([class*=bg]) path {
    fill: #fff;
}
.divider:not(:first-child) {
    top: 1px;
}

.divider:first-child {
  bottom: 1px;
}

@media screen and (max-width: 600px) {
.divider svg,
.divider-slide svg
 {
  height: 2rem;
}
}






.swiper-pagination .btn-prev,
.swiper-pagination .btn-next {

  --ddgi-carousel-nav-btn-bg: none;
  --ddgi-carousel-nav-btn-color: #ffffff;

  border: 1px solid;
 
}

#home-slider .btn-prev:not(.bg-transparent):hover, 
#home-slider .btn-next:not(.bg-transparent):hover  {
  color:black !important;
  background-color:  #ffffff !important;
  border-color:  #ffffff;
}

#home-ambits a:hover span,
#home-ambits a:focus span {
	color:#ffffff !important;
	background:#000000 !important;
}



.footer1_DDGI img {

	filter:saturate(100%) brightness(0) invert(100%) sepia(0%) saturate(4103%) hue-rotate(255deg) brightness(104%) contrast(106%);}



  #links-cercador li a {
    display:block;
    text-decoration:none;
    margin-bottom:.4rem;
  }
  
  
  
  
  .degradat_programes {
	  position: absolute ;
	  top: 0 ;
	  left: 0 ;
	  width: 100% ;
	  height:100% ;
	  z-index:1;
	  background: linear-gradient(180deg, rgba(17, 24, 39, 0.00) 35.56%, #111827 95.3%);
  }


  .jarallax.jarallax-header-area .jarallax-img {

    height: auto !important;

}


.side-nav.side-nav-end {
  border-left: none;
}

.side-nav .active > .nav-link, .side-nav .nav-link.active {
    text-decoration: underline;
    border: transparent;
}

.side-nav .nav-link:hover, .nav-link:focus {
    color: inherit;
	   text-decoration: underline;
}

.subfooter-imatge {
  height:550px;
  background-size: cover;
  background-position: center center;
}

.subheader-imatge {
  background-size: cover;
      background-position: center center;
}



.mb-12 {
  margin-bottom: 12rem !important;
}
.mb-15 {
  margin-bottom: 15rem !important;
}
.mb-20 {
  margin-bottom: 20rem !important;
}

    .mt-n6 {
        margin-top: -6rem !important;
    }
    .mt-n7 {
      margin-top: -7rem !important;
  }
  .mt-n8 {
    margin-top: -8rem !important;
}
    .mt-n12 {
      margin-top: -12rem !important;
  }
  .mt-n20 {
    margin-top: -20rem !important;
}

@media (min-width: 1200px) {

  .mt-xl-n6 {
    margin-top: -6rem !important;
}

}

  @media (min-width: 992px) {
    .mb-lg-20 {
      margin-bottom: 20rem !important;
    }
 
    .mt-lg-n10 {
    margin-top:-10rem !important;
  }
  .mt-lg-n20 {
    margin-top:-20rem !important;
  }
  .mt-lg-n30 {
    margin-top:-30rem !important;
  }

 } 

 @media (min-width: 768px) {

}




  .z100 {z-index:100;}




/* ===================================
    responsive taula serveis/subvencions
====================================== */
  
  @media screen and (max-width: 600px) {
    table.responsiva {
      border: 0;
    }
  
    table.responsiva caption {
      font-size: 1.3em;
    }
    
    table.responsiva thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    
    table.responsiva tr {
      border-bottom: 1px solid #ddd;
      display: block;
      padding-bottom:1.5rem;
      margin-bottom: 1.5rem;
    }
    
    table.responsiva tr td, 
    table.responsiva tr th
   
      {
        min-height:2rem;
      border-bottom: none;
      display: block;
      padding: 0.5rem ;
    }

    table.responsiva tr td.fs-sm
   
    { 
    text-align: right;
  }
   
    
    table.responsiva td::before {
        content: attr(data-label);
      float: left;
      font-weight: bold;
      color:#565973;
    }
    
    table.responsiva td:last-child {
      border-bottom: 0;
    }
  }
  
  
  
  
  .logo-ods-100 {
    max-width:100px;
    margin: 0 .4rem .5rem 0;

  }
  
  
  
  
  
#activitats-container .card-body p {

  width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  display: -webkit-box;
  
  }
  

  

  
  
  
  @media (max-width: 500px) {
  
  
  #activitats-container .card-image  {
    position: relative !important;
  }
  #activitats-container .card-image  img {
    height: 200px;

  }
  
  
  
  
  
  }
  
  
  
  .bottom-10p {
  bottom: 10px !important;
}