/**************************************/
/************* GENERALES **************/
/**************************************/

@font-face {
  font-family: GraphikRegular;
  src: url(fonts/Graphik-Regular.otf);
}

@font-face {
  font-family: GraphikSemiBold;
  src: url(fonts/Graphik-Semibold.otf);
}

body {
  font-family: GraphikRegular;
}

h1, h2, h3, h4, h5, h6, strong {
  font-family: GraphikSemiBold;
}

.bg-rojo {
  background-color: #C8102F;
}

.bg-azul {
  background-color: #1075bb;
}

.bg-azul:hover {
  background-color: #0a609c;
}

.text-azul {
  color: #1075bb;
}

.text-gris {
  color: #6d6e71;
}

.hr-rojo {
  border-top: 2px solid #C8102F;
  opacity: 1;
}

button {
  transition: 200ms;
}

.hero-banner {
  background-image: url(img/fondo-1.jpg);
  background-size: cover;
  padding: 160px 0 120px 0;
}

.hero-banner .icono {
  width: 80px;
}

.card-color-verde::before, .card-color-morada::before, .card-color-naranja::before {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.card-color-verde::before {
  background-color: #2d9f4b;
}

.card-color-naranja::before {
  background-color: #c36409;
}

.card-color-morada::before {
  background-color: #a32985;
}

.logo {
  width: 150px;
}

.imagen-atras {
  height: 110%;
  width: 32%;
  bottom: -10%;
  right: 0;
  z-index: -1;
}

.bg-gris {
  background-color: #f2f2f2;
}

@media (max-width: 767px) {
  .hero-banner {
    padding: 160px 0 40px 0;
  }
}