:root {
  --rojo: 244, 67, 54;
  --verde: 76, 175, 80;
  --azul: 33, 150, 243;
  --naranja: 255, 152, 0;
  --turquesa: 0, 188, 212;
  --gris: 96, 125, 139;

  --border-radius: 14px;
  --alpha: 1;
}

.llar-infants {
  --main-color: var(--rojo);
}

.infantil {
  --main-color: var(--verde);
}

.primaria {
  --main-color: var(--azul);
}

.secundaria {
  --main-color: var(--naranja);
}

.batxillerat {
  --main-color: var(--turquesa);
}

.cicles-formatius {
  --main-color: var(--gris);
}

/* Báner Puertas abiertas */

a.no-decoration {
  text-decoration: none;
}

.row.display-flex [class*="col"] {
  display: flex;
  flex-direction: column;
}

.btn-light {
  color: white;
  border-radius: 3rem;
  background-color: rgba(var(--main-color), var(--alpha));
}

.callaction.banner-portes-obertes {
  background-image: linear-gradient(45deg, #4F61B8, #1d449200),
    url("../img/puertas-abiertas/primaria.jpg");
  background-position: center;
  background-size: cover;
  padding-bottom: 7px;
}

.callaction.banner-portes-obertes .title {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.callaction.banner-portes-obertes .icons {
  justify-content: flex-end;
}

.callaction.banner-portes-obertes .icons > div {
  text-align: right;
}

.callaction.banner-portes-obertes h2 {
  text-transform: uppercase;
}

.callaction.banner-portes-obertes h2,
.callaction.banner-portes-obertes h4 {
  width: -webkit-fill-available;
  width: fit-content;
  color: white;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 11px rgba(0, 0, 0, 0.4);
}

.callaction.banner-portes-obertes .arrow,
.callaction.banner-portes-obertes .title {
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

.callaction.banner-portes-obertes:hover .title {
  transform: scale(1.05) translateX(10px);
}

.callaction.banner-portes-obertes:hover .arrow {
  transform: scale(1.1) translateX(10px);
}

.callaction.banner-portes-obertes i {
  color: white;
}

.callaction.banner-portes-obertes .arrow i {
  margin-right: 2rem;
}

.callaction.banner-portes-obertes .icons a {
  margin-left: 1rem;
  opacity: 0.6;
  transition-duration: 200ms;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

.callaction.banner-portes-obertes .icons a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.callaction.banner-portes-obertes .icons i {
  margin: 0 0.5rem;
}

/* Página Puertas abiertas */

hr.short {
  --alpha: 0.7;

  display: block;
  width: 10rem;
  height: 3px;
  border: 0;
  border-top: 3px solid rgba(var(--main-color), var(--alpha));
  margin: 2rem 0 1.5rem 0;
  padding: 0;
}

.nav-pills > .nav-item:not(:last-child) {
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.nav-pills > .nav-item > .nav-link {
  --alpha: 0.8;

  color: rgb(var(--main-color), var(--alpha));
  font-weight: bold;

  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  border-radius: var(--border-radius);

  transition-duration: 200ms;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

.nav-pills > .nav-item > .nav-link:hover {
  transform: translateY(-3px);
}

.nav-pills > .nav-item > .nav-link:focus {
  transform: scale(0.97);
}

.nav-pills > .nav-item > .nav-link > i {
  margin-right: 0.5rem;
}

.nav-pills > .nav-item > .nav-link.light:hover {
  background-color: white;
}

.nav-pills > .nav-item > .nav-link.active,
.nav-pills > .nav-item > .nav-link.active:hover,
.nav-pills > .nav-item > .nav-link.active:focus  {
  --alpha: 0.9;
	
	color: white;
  background-color: rgba(var(--main-color), var(--alpha));
}

.portes-obertes .tab-content > .tab-pane {
  background-color: transparent;
}

.container .jumbotron {
  --alpha: 0.1;

  position: relative;
  border-radius: var(--border-radius);
  background-color: rgba(var(--main-color), var(--alpha));
  overflow: hidden;
}

.container .jumbotron .label {
  background-color: rgb(var(--main-color));
}

.jumbotron.solid {
  --alpha: 0.8;

  transition-property: box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

.jumbotron.solid:hover {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.jumbotron.solid * {
  color: white;
}

.jumbotron.solid .row {
  margin-bottom: 0;
}

.jumbotron.solid .btn-light {
  background-color: white;
  border-radius: 3rem;
  margin-bottom: 2rem;
  font-weight: bold;
}

.jumbotron.solid .btn-light,
.jumbotron.solid .btn-light i {
  color: rgba(var(--main-color), var(--alpha));
}

.jumbotron.solid .btn-light i {
  margin-left: 0.5rem;
}

.jumbotron.solid .btn + .btn {
  margin-left: 1.5rem;
}

.jumbotron .background {
  --alpha: 0.4;

  color: rgb(var(--main-color), var(--alpha));
  text-align: end;
  padding: 8rem 8rem 0;
}

.jumbotron .background i {
  transform: scale(10);
}

.jumbotron h5 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#aliances [class*="col"] {
  text-align: center;
}

#aliances img {
  filter: grayscale();
  opacity: 0.7;
  transition-duration: 200ms;
  transition-property: filter, opacity;
  transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

#aliances img:hover {
  filter: none;
  opacity: 1;
}

.labels {
  line-height: 2;
}

.banded-image {
  width: calc(100% + 120px);
  height: 400px;
}

.banded-image {
  margin: -30px;
  background-size: cover;
  background-position: center;
}

@media screen and (min-width: 768px) {
  .banded-image {
    margin-top: 1rem;
    margin-bottom: -48px;
  }

  .container .banded-image {
    margin-left: -60px;
    margin-right: -60px;
  }
}

.banded-image.llar-infants {
  background-image: url(../img/puertas-abiertas/llar-infants.jpg);
}

.banded-image.infantil {
  background-image: url(../img/puertas-abiertas/infantil.jpg);
}

.banded-image.primaria {
  background-image: url(../img/puertas-abiertas/primaria.jpg);
}

.banded-image.secundaria {
  background-image: url(../img/puertas-abiertas/secundaria.jpg);
}

.banded-image.batxillerat {
  background-image: url(../img/puertas-abiertas/batxillerat.jpg);
}

.banded-image.cicles-formatius {
  background-image: url(../img/puertas-abiertas/cicles.jpg);
}