/* General*/
body {
  font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
  font-family: 'Roboto Slab', serif;
}

h1 {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 2rem;
  font-weight: bolder;
  color: black;
}

h3 {
  font-size: 1.4rem;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.p-0 {
  padding: 0;
}

.titulo-h2 {
  text-align: center;
  margin-bottom: 37px;
  font-family: 'Roboto Slab', serif;
}

.texto-intro .titulo-h2 {
  text-align: center;
  margin-bottom: 0px;
}

.texto-intro h3 {
  margin: 20px 0px;
}




.container {
  max-width: 1296px;
  margin: 0 auto;
}

.container.header {
  padding-bottom: 10px;
}

a.link-texto {
  color: #007f75 !important;
}

a.tornar-indice {
  color: #007f75 !important;
}

/* Header*/
header .col-md-4 {
  padding: 0px;
}
header {
  background-color: white;
  padding-top: 17px;
}

.social-networks {
  color: #007f75;
  text-align: right;
  padding: 20px 8px;
}

.social-networks i {
  padding: 0 4px;
  cursor: pointer;
  color: #007f75;
  text-align: right;
}

i.fab.fa-linkedin-in {
  padding-right: 0;
}

.sn-mobile {
  display: none;
}

.newsletter {
  padding: 19px 0px;
  float: right;
}

.newsletter i.fas.fa-envelope {
  margin-left: 10px;
  color: #007f75;
  cursor: pointer;
}

.logo-header {
  text-align: center;
  margin: auto;
}

.logo-header img {
  width: 56%;
}

.menu {
  list-style: none;
  margin-top: 1rem;
}

.menu li {
  text-align: right;
}

.menu a:hover {
  text-decoration: none;
  color: #43c0b2;
}

.menu-responsive {
  display: none;
}

/* Articles*/
.article-style {
  min-height: 374px;
  background-color: #e5e6e7;
  border-bottom: solid 2px #00a9e4;
  margin-bottom: 91px;
}

.article-style img {
  width: 100%;
  height: auto;
}

.article-style a {
  text-decoration: none;
  color: black;
}

.article-text {
  padding: 20px;
  min-height: 180px;
  padding-bottom: 0;
}

.article-text p {
  padding-top: 6px;
  font-size: 15px;
}

.article-text h3 {
  font-weight: 500;
  font-size: 28px;
  font-family: "Roboto";
  line-height: 28px;
}

.col-md-4 .article-text {
  height: 185px;
}

.col-md-4 .article-style {
  min-height: 415px;
}

.ver-mas {
  width: 44px;
  height: 20px;
  position: absolute;
  bottom: 116px;
}

/* Articles- Colors*/
#color-1 {
  border-bottom: 2px solid #19a8e2;
}

#color-2 {
  border-bottom: 2px solid #59c3b3;
}

#color-3 {
  border-bottom: 2px solid #f2b90d;
}

#color-4 {
  border-bottom: 2px solid #f75ca8;
}

#color-5 {
  border-bottom: 2px solid #1170a8;
}

#color-6 {
  border-bottom: 2px solid #f38e62;
}

#color-7 {
  border-bottom: 2px solid #f75ca8;
}

#color-8 {
  border-bottom: 2px solid #74507c;
}

#color-9 {
  border-bottom: 2px solid #8fca6e;
}

/* Breadcrumb*/
ol .breadcrumb {
  margin: 22.797px 0;
}

#breadcrumb-pi {
  margin: 22.797px 0;
  background-color: white;
  border-bottom: solid 0.5px #00000021;
  font-family: "Roboto Condensed";
  padding-top: 5px;
  font-size: 0.75rem;
}

/* Footer*/
footer {
  background-color: #E5E6E7;
}

footer li {
  list-style: none;
  font-family: "Roboto Condensed";
}

footer a:hover {
  text-decoration: none;
  color: #4ac4b5;
}

footer h3 {
  font-weight: 600;
}

footer ul {
  padding: 0;
}

footer .col-3 {
  padding-left: 6%;
  padding-bottom: 2%;
  font-size: 0.9rem;
}

.sin-titulo {
  margin-top: 32px;
}

.footer-bottom {
  background-color: black;
  color: white;
  text-align: center;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  height: 42px;
  font-size: 0.8rem;
}

.footer-bottom a {
    color: white;
}

/* Footer- Logotipos*/
#csb-logotipo-footer {
  margin: 22px;
}

#infobarris-logotipo-footer {
  margin: 10% 0;
  float: left;
}

.logo-footer {
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding: 0;
}

.boton-excel {
  padding: 8px;
  margin-left: 12px;
  background: #46c1b3;
  color: white;
  border-radius: 0.25rem 0rem 0rem 0.25rem;
}

.boton-excel a {
  color: white;
}

.informacion {
  color: white;
  padding: 9px;
  background: #309489;
  border-radius: 0rem 0.25rem 0.25rem 0rem;
}

.botones-exportar {
  align-items: center;
  display: flex;
  justify-content: left;
  margin-left: 86px;
}

.btn-exportar {
  padding: 8px;
  margin-left: 12px;
  background: #46c1b3;
  color: white;
}

.btn-exportar:hover {
  background-color: #98d6ce;
}

.boton-excel:hover {
  background-color: #98d6ce;
}

.btn-ajuda {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: right;
}

.informacion:hover {
  background-color: #98d6ce;
}

.btn-exportar.disabled {
  background-color: #828990;
}

.btn-exportar.disabled {
  cursor: auto;
}

.informacion.disabled {
  background-color: #6c7277;
  opacity: 0.65;
  cursor: auto;
}

.boton-excel.disabled {
  background-color: #828990;
  opacity: 0.65;
  cursor: auto;
}

.txt-direccion {
  padding: 22px 0px;
  text-align: right;
}

/* Pagina Interna */
container.pagina-interna {
  margin-top: 50px;
  color: grey;
}

.container.pagina-interna {
  margin-top: 44px;
}

.container.pagina-interna .far {
  color: #43c0b2;
}

.pagina-interna .titulo-h2 {
  text-align: left;
  font-family: "Roboto";
  margin-bottom: 0px;
}

.barra-titulo {
  height: 4px;
  background: #43c0b2;
  width: 100px;
  margin: 20px 0;
}

.barra-titulo-credits {
  height: 4px;
  background: #43c0b2;
  width: 250px;
  margin: 20px 0;
}


/* Vsiualización selector*/
.form-group.visualitzacio {
  text-align: right;
  width: 40%;
}

.pagina-interna .row {
  margin-bottom: 20px;
}

/* Navegación*/
.navbar {
  background-color: #e7e3dd;
  background-image: linear-gradient(#c0c1c1, #efefef) !important;
  border-bottom: 2px solid #46c1b3;
  height: 48px;
  text-align: center;
  display: flex;
  align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1px;
  padding-left: 1px;
}

a#navbarDropdown {
  border: none;
}

.title-nav {
  display: none;
}

/*Flecha barrio*/
.arrow_box-b {
  position: relative;
  background: #43c0b2;
}

.arrow_box-b:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(67, 192, 178, 0);
  border-top-color: #43c0b2;
  border-width: 9px;
  margin-left: -9px;
  z-index: 5;
}

.nav-link {
  font-size: 14px;
  padding: 2px;
}

.nav-link.active {
  color: #43c0b2 !important;
}

#navbarSupportedContent {
  width: 1296px;
  max-width: 1296px;
  margin: 0 auto;
}

.nav-bar {
  font-size: 16px;
  padding-left: 0px;
  margin-right: 0px;
  font-family: "Roboto";
  font-weight: 500;
  max-width: 1110px;
  border: none;
  align-items: center;
}

.navbar li {
  list-style: none;
  float: left;
}

.navbar li a {
  color: #4B4C50;
  text-decoration: none;
  display: block;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: transparent;
  border: none;
  color: #43c0b2;
}

.nav-bar .nav-item {
  z-index: 4;
  margin-right: 50px;
}

.nav-barri {
  background-color: #f5f0e6 !important;
  background-image: none !important;
  padding: 0;
  width: 100%;
  border: none;
}

.nav-barri .nav-item {
  padding: 12px;
}

.nav-barri .nav-item a {
  font-size: 14px;
}

.nav-d {
  float: right;
}

.nav-i {
  float: left;
}

.districte-active {
  color: rgb(67, 194, 183) !important;
}

.lista-distritos .nav-item {
  padding: 6px 0px;
}

.lista-barrios {
  margin-left: -88px;
  margin-top: 4px;
}

.lista-barrios .nav-item {
  padding: 2px 0px;
}

.lista-barrios .nav-link {
  border-right: none !important;
}

.lista-distritos .nav-link {
  border-right: none !important;
}

.lista-distritos .nav-item .nav-link {
  font-weight: 800;
}

.nav-link .fal {
  font-size: 12px;
  margin-right: 36px;
  margin-bottom: 4px;
  margin-top: 6px;
  margin-left: 12px;
  float: right;
}

#nav-urban {
  font-family: "Roboto Slab";
  font-weight: 600;
  border-right: 0px;
  text-align: center;
  color: #504E4F;
  padding-right: 15px;
  width: 130px;
}

#nav-urban:hover {
  color: rgb(67, 194, 183);
}

.nav-1 ul {
  float: left;
}

.nav-tabs .nav-link {
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 900;
}

.nav-barri-elegido {
  height: 48px;
}

.nav-1 #home-icon {
  min-width: 60px;
}

#home-icon {
  width: 20px;
}

.barri-elegido {
  background-color: #43c0b2;
  color: white;
  height: 48px;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
}

.nav-1 .navbar-nav a.nav-link {
  border-right: 1px solid #4b4b4e;
  padding-top: 0px;
  height: 21px;
  margin-right: 6px;
}

.nav-barri-elegido .navbar-nav a.nav-link {
  border-right: none;
}

.barri-elegido span {
  width: 1296px;
  max-width: 1296px;
  margin: 0 auto;
}

.nav-link {
  font-weight: 900;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: rgb(67, 194, 183);
}

.navbar-light .navbar-nav .nav-link {
  color: #4d4d4d;
  font-family: "Roboto";
}

.nav-barrielegido {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

li.nav-item.poblacio-item {
  padding-left: 0px;
}

ul.navbar-nav.nav-barrielegido .nav-link {
  font-weight: 600;
}

.centrar {
  width: 100%;
  display: flex;
  justify-content: center;
}

/*Scroll menu*/
.scroll-menu {
  background-color: #333;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  z-index: 1;
}

.scroll-menu a {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
}

.scroll-menu span {
  padding: 14px;
  font-weight: 600;
}

.ajuda {
  float: right;
  font-size: 18px;
}

.ajuda:hover {
  text-decoration: none;
  color: black;
}

.m20 {
  margin-right: 12px;
}

/* Dropdown menu*/
.dropdown-menu {
  top: 123%;
  padding: 0;
}

.dropdown-menu {
  border-radius: 0;
  position: absolute;
  border: solid 1px #d8d8d8v;
}

.mapa-dropdown .mapa {
  background-color: white;
  height: 100%;
  width: 500px;
  position: absolute;
  top: 0;
  left: 184px;
  border: 1px solid #d8d8d8;
  padding: 20px;
}

.focused {
  background-color: #45c2b0;
  fill: #45c2b0 !important;
  stroke: #45c2b0;
  pointer-events: all;
}

.dropdown-item:focus, .dropdown-item:hover {
  color: #45c2b0;
  background-color: transparent;
}

.dropdown-menu .container {
  width: 1300px;
  background-color: white;
  color: white;
  padding: 50px 220px;
  min-height: 405px;
}

.dropdown-menu .show {
  padding: 0;
}

.dropdown-menu.show {
  position: absolute;
  left: 0px;
  top: 30px;
}

.dropdown-menu.show a.nav-link {
  border-right: none;
}

#diagonal-front-maritim_boto {
  margin-bottom: 26px;
}

.mapa-dropdown:hover>.mapa {
  display: block;
}

.mapa-seleccion {
  width: 110%;
  margin-left: 64px;
}

.barri {
  font-size: 15px;
  padding: 1px 0;
}

.dropdown-menu.show .nav-link {
  color: #676767;
  font-weight: 400;
}

/* Carousel */
.slider-home {
  background-image: url("../img/originales/slider-back.jpg");
  background-repeat: no-repeat;
  width: auto;
  height: 362px;
}

.slider-home::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(106, 97, 88, 0), rgba(106, 97, 88, 0.9), rgba(106, 97, 88, 1));
  z-index: -1;
}

.slider-home-2 {
  background-image: url("../img/originales/slider-back2.jpg");
  background-repeat: no-repeat;
  width: auto;
  height: 362px;
}

.slider-home-2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(106, 97, 88, 0), rgba(106, 97, 88, 0.9), rgba(106, 97, 88, 1));
  z-index: -1;
}

.texto-intro {
  margin: 40px auto;
  max-width: 750px;
  text-align: center;
}

.texto-intro .barra-titulo {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.img-intro {
  max-width: 50%;
  max-height: 20%;
  margin: auto;
  margin-bottom: 80px;
}

.img-intro img {
  width: 50%;
}

#carousel-principal {
  margin-bottom: 70px;
  padding: 0px;
  margin-top: 10px;
}

.carousel-caption {
  right: 0;
  bottom: 0px;
  left: 55%;
  top: 17%;
  padding-bottom: 58px;
  text-align: left;
  width: 32%;
}

.carousel-caption h2 {
  color: white;
}

.carousel-caption h3 {
  padding-top: 20px;
}

.fa-chevron-right, .fa-chevron-left {
  font-size: 3rem;
}

.fa-chevron-left:before, .fa-chevron-right:before {
  font-size: 1rem;
}

.tableau {
  width: 1296px;
  overflow-x: auto;
}

.tabs-ajuda .nav-link {
  font-size: 14px !important;
  font-weight: 400;
}

.tabs-ajuda {
  margin-top: 16px;
  margin-bottom: 40px;
}

.texto-ajuda h2 {
  margin-bottom: 16px;
}

.texto-ajuda h4 {
  font-size: 1rem;
  font-weight: bold;
}

.texto-ajuda {
  margin-bottom: 75px;
  margin-top: 30px;
}

.texto-ajuda h3 {
  margin-bottom: 24px;
  padding-top: 24px;
}

.clasificacio ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.clasificacio h4 {
  text-align: center;
}

.causes h4 {
  text-align: center;
}

.tabla-serveis {
  margin: 20px 0px;
}

.ajuda-secciones {
  font-weight: 500;
  margin-bottom: 48px;
}

.ajuda-secciones li a:hover {
  color: #43c0b2;
  text-decoration: none;
}

.ajuda-secciones li:hover {
  color: #43c0b2;
  text-decoration: none;
}

@media (max-width: 1280px) {
  .botones-exportar {
    margin-left: 75px;
  }

  .txt-direccion {
    padding: 15px;
    font-size: 15px;
  }

  #carousel-principal {
    padding: 0px;
  }

  #nav-urban {
    text-align: right;
    padding-right: 15px;
  }

  .nav-barrielegido {
    margin: 0 16px;
  }

  .dropdown-menu .container {
    width: 1262px;
}

.dropdown-menu.show {
  left: -16px;
}

header .col-md-4 {
  padding: 0px 16px;
}

}

@media (max-width: 1024px) {
  .nav-barrielegido {
    padding: 0 16px;
    align-items: center;
  }

  .barri-elegido {
    padding-left: 16px;
  }

  header .col-md-4 {
    padding: 0px 16px;
  }

  .dropdown-menu .container {
    width: 1023px;
    padding: 50px 100px;
}
}

@media (max-width: 768px) {
  .csb-header {
    width: 90%;
  }

  .menu {
    display: none;
  }

  .menu-responsive {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: left;
    padding: 0;
    margin-top: 24px;
  }

  .barri-elegido span {
    text-align: center;
  }

  div#navbarSupportedContent {
    background-color: #f5f3ef;
    padding: 20px;
    z-index: 100;
  }

  .menu-responsive li a {
    margin-top: 8px;
  }

  .container {
    max-width: 720px;
  }

  .nav-barri {
    display: none;
  }

  .dropdown-menu.show {
    position: absolute;
    left: -21px;
    top: 35px;
    width: 739px;
  }

  .lista-barrios {
    margin-left: -1px;
    padding-top: 6px;
  }

  .nav-1 .navbar-nav a.nav-link {
    margin-right: -1px;
  }

  svg {
    padding-top: 6px;
  }

  .form-group.visualitzacio {
    width: 60%;
  }

  .btn-ajuda {
    margin-top: 12px;
  }

  .carousel-caption {
    top: 11%;
  }

  .carousel-caption h2 {
    font-size: 20px;
  }

  .carousel-caption h3 {
    padding-top: 8px;
    font-size: 16px;
  }

  .col-md-4 .article-style {
    min-height: 340px;
  }
}

@media (max-width: 420px) {
  .logo-header {
    margin-top: 44px;
  }

  .csb-header {
    width: 70%;
    margin: 0 14%;
  }

  header .col-md-4 {
    justify-content: center;
  }

  .container.header {
    padding-bottom: 24px;
  }

  #home-icon {
    width: 100%;
  }

  .social-networks {
    display: none;
  }

  div#navbarSupportedContent {
    background-color: #f5f3ef;
    padding-bottom: 20px;
    max-width: 100%;
    margin: 0 auto;
  }

  .navbar {
    z-index: 100;
  }

  .nav-1 .navbar-nav a.nav-link {
    border-right: none;
  }

  li.nav-item {
    height: auto;
    text-align: left;
    margin: 0;
    padding: 0;
    border-right: transparent;
    border-bottom: transparent;
  }

  .nav-item {
    height: auto;
    text-align: left;
    padding: 15px;
    margin: 0px 20px;
    border-right: transparent;
    border-bottom: 1px solid black;
  }

  .nav-item.nav-link {
    height: 40px;
    text-align: left;
    margin: 0;
    padding: 20px;
    border: none;
  }

  .lista-distritos .nav-item {
    border-bottom: none;
    height: 40px;
  }

  .lista-barrios .nav-item {
    border-bottom: none;
    height: 40px;
  }

  #nav-urban {
    text-align: left;
    display: inline-block;
    margin-top: 12px;
  }

  .sn-mobile {
    display: none;
    border-bottom: none;
    text-align: center;
    color: #504E4F;
    margin-top: 20px;
  }

  .sn-mobile i {
    margin: 0 15px;
  }

  .mapa-seleccion {
    display: none;
  }

  #carousel-principal {
    padding: 0px;
  }

  .w-100 {
    width: auto !important;
  }

  .dropdown-menu {
    background-color: transparent;
    border: none;
  }

  .dropdown-menu .container {
    width: auto;
    background-color: transparent;
    padding: 0;
    height: auto;
  }

  .arrow_box {
    background: none;
    border: none;
  }

  .arrow_box:after, .arrow_box:before {
    display: none;
  }

  .fa-chevron-right:before {
    display: none;
  }

  .title-nav {
    display: inline-block;
  }

  h3.title-nav {
    font-size: 0.95rem;
    margin: 24px 0px;
    color: #5a5a5a;
    font-weight: 900;
    width: 100%;
  }

  .lista-barrios {
    margin-bottom: 20px;
  }

  #csb-logotipo-footer {
    width: 50%;
    height: 50%;
  }

  footer ul {
    text-align: center;
  }

  footer h3 {
    text-align: center;
  }

  footer .col-md-6 {
    display: flex;
    justify-content: center;
  }

  .footer-bottom {
    height: auto;
  }

  .sin-titulo {
    margin-top: 0;
  }

  .anchor-barris {
    height: 20px;
  }

  .nav-barri {
    display: none;
  }

  .nav-item.barri-elegido {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .dropdown-menu.show {
    position: unset;
  }

  .form-group.visualitzacio {
    width: 100%;
  }

  .ajuda {
    margin-bottom: 12px;
  }

  .logo-footer {
    align-items: center;
  }
}