@charset "UTF-8";
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBlack.woff2") format("woff2"), url("./fonts/GothamBlack.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBold.woff2") format("woff2"), url("./fonts/GothamBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBook-Italic.woff2") format("woff2"), url("./fonts/GothamBook-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBook.woff2") format("woff2"), url("./fonts/GothamBook.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

.bg-blue {
  background-color: #649abf;
}

.text-blue {
  color: #114280;
}

.btn {
  border-radius: 0;
  background-color: #114280;
  color: #fff;
}
.btn:hover {
  background-color: #649abf;
}
.btn:disabled {
  background-color: #80a3c0;
}
.btn:disabled:hover {
  background-color: #80a3c0;
  color: #fff;
}

* {
  font-family: "Gotham", Helvetica, sans-serif;
}

.banner-top img {
  max-width: 25%;
  margin-bottom: 1em;
}
.banner-top h1 {
  color: #fff;
  font-size: 2em;
}

.duo-tone, .comments .comment__header, .valores__item--header {
  position: relative;
  overflow: hidden;
  background-color: #16334a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.duo-tone img, .comments .comment__header img, .valores__item--header img {
  position: absolute;
  max-width: 560px;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.3s ease-in-out;
  opacity: 0.5;
}
.duo-tone::after, .comments .comment__header::after, .valores__item--header::after {
  mix-blend-mode: screen;
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-filter: contrast(1.3);
  filter: contrast(1.3);
  background: rgba(62, 97, 125, 0.98);
  mix-blend-mode: color;
  transition: 0.3s ease-in-out;
  opacity: 1;
}

.valores__item--header {
  height: 160px;
  width: 100%;
  border-radius: 1.5em;
}
.valores__item--header h3 {
  position: relative;
  z-index: 10;
  color: #fff;
  transition: 0.3s ease-in-out;
}
.valores__item:hover .valores__item--header img {
  filter: grayscale(0);
  mix-blend-mode: unset;
  opacity: 1;
}
.valores__item:hover .valores__item--header:after {
  opacity: 0;
}
.valores__item:hover .valores__item--header h3 {
  text-shadow: 2px 2px 6px #12204891;
}

.practicas__item {
  color: #fff;
  border-radius: 1.5em;
  min-height: 160px;
  transition: 0.3s ease-in-out;
  max-height: 176px;
}
.practicas__item p {
  margin: 0;
}
.practicas__item:hover {
  background-color: #649abf;
}
.practicas__item img {
  max-height: 144px;
}

.background {
  width: 100%;
  height: 360px;
  background-image: url("../images/ciclismo-100.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  /* 16/9 ratio */
  padding-top: 30px;
  /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.trayectoria__pic {
  border-radius: 24px;
  border: 1px solid #649abf;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  padding: 1.2em;
  margin-bottom: 12px;
}
.trayectoria p {
  font-size: 0.9em;
}

.equipo__card {
  width: 100%;
}
.equipo__card--pic {
  width: 104px;
  height: 104px;
  background-color: #80a3c0;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 8px auto;
}
.equipo__card h5 {
  font-weight: bold;
  color: #114280;
}
.equipo__card p {
  font-size: 14px;
  min-height: 96px;
}

.comments h3 {
  position: absolute;
  top: -48px;
}
.comments .quote {
  position: absolute;
  width: 48px;
}
.comments .quote.top {
  top: -4px;
  left: 0;
}
.comments .quote.bottom {
  bottom: -4px;
  right: 0;
}
.comments .comment__header {
  width: 128px;
  height: 128px;
  position: relative;
  margin-bottom: 16px;
}
.comments .comment__header img {
  opacity: 1 !important;
  max-width: 160px;
}
.comments .comment h5,
.comments .comment p {
  color: #fff;
}
.comments .comment__rol {
  font-size: 12px;
}
.comments .comment__text {
  font-size: 14px;
}
.comments .swiper-button-prev,
.comments .swiper-button-next {
  bottom: 6% !important;
  top: inherit;
}
.comments .swiper-button-prev {
  left: 40%;
}
.comments .swiper-button-next {
  right: 40%;
}

.redes__item {
  margin: 16px 0;
}
.redes__item img {
  max-width: 100%;
  height: 64px;
}
.redes__item span {
  margin-top: 16px;
  color: #fff;
  text-decoration: none;
}

form label {
  color: #114280;
}
form .form-control {
  color: #114280;
  border-color: #649abf;
  border-radius: 8px;
}
form .loader {
  border: 8px solid #f3f3f3;
  /* Light grey */
  border-top: 8px solid #649abf;
  /* Blue */
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
  margin: auto;
  display: none;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

footer {
  max-width: 560px;
  margin: auto;
}

@media (min-width: 31.25em) {
  .swiper-break .swiper-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .swiper-break .swiper-slide {
    width: auto;
    overflow: visible;
  }
}
@media (min-width: 43.75em) {
  .swiper-break .swiper-slide .practicas__item {
    min-height: 240px;
    transition: 0.3s ease-in-out;
    max-height: 100%;
    max-width: 100%;
    margin: 0 !important;
  }
  .swiper-break .swiper-slide .practicas__item p {
    font-size: 20px;
  }
}
@media (min-width: 31.25em) {
  .swiper-break .swiper-button-prev,
.swiper-break .swiper-button-next {
    /* swiper is disabled at this breakpoint */
    display: none;
  }
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBlack.woff2") format("woff2"), url("./fonts/GothamBlack.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBold.woff2") format("woff2"), url("./fonts/GothamBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBook-Italic.woff2") format("woff2"), url("./fonts/GothamBook-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/GothamBook.woff2") format("woff2"), url("./fonts/GothamBook.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}
.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}
.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 280px;
  background: #649abf;
  border-radius: 8px;
}
.timeline ol li:last-child {
  width: 280px;
}
.timeline ol li:not(:first-child) {
  margin-left: 14px;
}
.timeline ol li:not(:last-child) h6 {
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  transform: translateY(-50%);
  background-color: #114280;
  color: #fff;
  font-size: 24px;
}
.timeline ol li div {
  position: absolute;
  width: 280px;
  padding: 8px;
  white-space: normal;
  display: flex;
  align-items: start;
}
.timeline ol li div img {
  width: auto;
  max-height: 104px;
}
.timeline ol li div p {
  color: #114280;
  font-size: 14px;
  text-align: left;
  margin-bottom: 0;
}
.timeline ol li:nth-child(even) div {
  top: -16px;
  transform: translateY(-100%);
  justify-content: flex-end;
}
.timeline ol li:nth-child(even) div time {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}
.timeline ol li:nth-child(odd) div {
  top: calc(100% + 16px);
  justify-content: flex-start;
}
.timeline ol li time {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  text-align: left;
  color: #fff;
  padding-left: 16px;
}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.arrows .arrow {
  background-color: transparent;
  border: none;
}
.arrows .arrow.arrow__prev {
  margin-right: 20px;
}
.arrows .arrow.disabled {
  opacity: 0.5;
}
.arrows .arrow img {
  width: 45px;
  height: 45px;
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
  .timeline ol,
.timeline ol li {
    width: auto;
  }

  .timeline ol {
    padding: 0;
    transform: none !important;
  }
  .timeline ol li {
    display: flex;
    height: auto;
    background: transparent;
    flex-direction: column-reverse;
  }
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  .timeline ol li div {
    width: auto;
    height: auto !important;
    margin: 0 auto 25px;
    position: static;
    align-items: center;
  }
  .timeline ol li time {
    background-color: #649abf;
    margin-bottom: 0;
    text-align: center;
    padding-left: 0;
    border-radius: 0;
  }
  .timeline ol li:nth-child(even) div {
    transform: none;
  }
  .timeline ol li:nth-child(even) div time, .timeline ol li:nth-child(odd) div time {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  .timeline ol li:last-child, .timeline ol li:nth-last-child(2) div time, .timeline ol li:not(:last-child)::after {
    display: none;
  }

  .arrows {
    display: none;
  }
}
@media (min-width: 1024px) {
  .navbar {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .navbar .navbar-brand img {
    height: 48px;
  }

  .banner-top {
    height: 240px;
  }
  .banner-top img {
    max-width: 104px;
    margin-right: 40px;
  }

  p {
    font-size: 20px;
  }

  .background {
    height: 480px;
  }

  .valores__item--header.alone {
    height: 320px;
  }
  .valores__item--header.alone img {
    max-width: 100%;
  }

  h3 {
    font-size: 2.5em;
  }

  .equipo .swiper-button-next {
    right: 25%;
  }
  .equipo .swiper-button-prev {
    left: 25%;
  }
  .equipo__card {
    max-width: 400px;
    margin: auto;
  }
  .equipo__card--pic {
    width: 160px;
    height: 160px;
  }

  .redes {
    height: 320px;
    align-items: center;
    justify-content: center;
  }

  .comments h3 {
    color: #649abf !important;
    left: 130px;
    top: -44px;
  }
  .comments .quote {
    width: 120px;
  }
  .comments .swiper-container {
    padding-top: 140px !important;
  }

  footer img {
    max-width: 60% !important;
  }
}

/*# sourceMappingURL=main.css.map */