@charset "UTF-8";
/* Con un poco de ayuda de https://coolors.co/ */
/* Para el footer */
/* En este breakpoint se modifica el tamaño de la tipografía */
/* Los siguientes breakpoints son para el sistema de grilla de Bootstrap */
/* Este breakpoint no está definido por Bootstrap, lo agregamos nosotros para aprovechar un poco más el viewport */
/* Variables que se comparten entre todas las páginas de las carreras */
header {
  position: sticky;
  top: 0;
  z-index: 50; }
  header .container {
    align-items: center;
    display: flex;
    justify-content: space-between; }
  header #header-logo {
    margin: 0; }
    header #header-logo .header-carrera-logos-calle {
      background: #E32E2C; }
  header nav ul {
    margin: 0;
    padding: 0; }
  header nav li {
    display: inline-block;
    font-style: italic;
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0;
    text-transform: uppercase; }
    header nav li a {
      color: #000 !important;
      text-decoration: none !important; }
      header nav li a:hover {
        text-decoration: underline !important; }
  header #header-menu-btn {
    display: none; }
  @media screen and (max-width: 1100px) {
    header #header-logo #header-carrera-logos {
      margin-left: 20px; }
    header nav ul li {
      margin-left: 12px;
      font-size: .9rem; } }
  @media screen and (max-width: 900px) {
    header nav {
      display: block;
      position: fixed;
      top: 50px;
      padding: 10px 0;
      height: 100%;
      width: 250px;
      right: -260px;
      background: #FFF;
      transition: right .2s ease-in-out;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); }
      header nav ul li {
        display: block;
        font-size: 2.122rem;
        line-height: 30px;
        margin: 0; }
        header nav ul li a {
          padding: 10px 15px;
          display: block; }
    header #header-menu-btn {
      display: block; }
      header #header-menu-btn img {
        height: 30px; } }

.menu-open #wrapper {
  opacity: .8;
  transform: translateX(-40px); }
.menu-open header nav {
  right: 0; }

#main {
  line-height: 0; }
  #main img, #main picture {
    width: 100%; }

body {
  background: #222; }

video {
  width: 100%; }

.mw1 {
  max-width: 1000px !important; }

h1 img {
  height: 35px;
  margin-right: 10px;
  vertical-align: baseline; }

/** titulos **/
.titulo {
  border: 3px solid #fb0411;
  transform: skew(-15deg);
  color: #fb0411;
  text-transform: none !important;
  padding: 10px;
  font-weight: bold !important; }

.fondo-gris {
  background-color: #E5E4E4; }

.background-white {
  background-color: #ffffff !important; }

.background-black {
  background-color: #222222 !important; }

/* TIENDA */
.big-subtitle {
  font-size: 1.2rem; }

.big-title-margen {
  padding-right: 25%;
  padding-top: 5%;
  padding-bottom: 5%; }

@media screen and (max-width: 901px) {
  .big-title-margen {
    padding-right: 10%;
    padding-top: 10%;
    padding-bottom: 10%; } }
.big-title {
  font-family: Montserrat;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 3%; }

.description-carreras {
  font-weight: 400;
  font-size: medium; }

@media screen and (min-width: 1200px) {
  .big-title {
    font-size: 3rem !important; } }
.titulo-tienda {
  height: 70px; }

.carousel-caption {
  padding-top: 0.3rem !important; }
  .carousel-caption p {
    margin-bottom: 0; }

.carousel-caption-description {
  background-color: rgba(255, 255, 255, 0.6); }

.carousel-control-prev, .carousel-control-next {
  background-color: rgba(149, 143, 157, 0.1) !important;
  border-radius: 30%; }

#banner-proxima-carrera {
  padding: 0;
  margin-bottom: 10px; }

section#sponsors {
  background-image: linear-gradient(180deg, #EEE 0%, #FFF 15%);
  padding: 10px 0; }
  section#sponsors .sponsors-line {
    text-align: center; }
  section#sponsors img {
    margin: 0 10px;
    width: 160px; }
    section#sponsors img.sponsor-big {
      width: 300px; }
  @media screen and (max-width: 1400px) {
    section#sponsors img {
      width: 120px; }
      section#sponsors img.sponsor-big {
        width: 220px; } }
  @media screen and (max-width: 1000px) {
    section#sponsors img {
      width: 100px; }
      section#sponsors img.sponsor-big {
        width: 180px; } }
  @media screen and (max-width: 700px) {
    section#sponsors img {
      width: 70px;
      margin: 0 5px; }
      section#sponsors img.sponsor-big {
        width: 110px; } }
  @media screen and (max-width: 500px) {
    section#sponsors img {
      width: 60px;
      margin: 0; }
      section#sponsors img.sponsor-big {
        width: 100px; } }

/*  ORGANIZACION DE PANEL CARRERAS */
/* Contenedor padre: Grid con espaciado  */
#carreras-prox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.75fr));
  justify-content: space-around;
  column-gap: 20px;
  padding: 10px 20px;
  height: 400px;
  box-sizing: border-box; }

#carreras-prox-1 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-content: space-around;
  column-gap: 20px;
  padding: 10px 20px;
  height: 400px;
  box-sizing: border-box; }

/* Panel base común para carreras */
.carrera-panel {
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  transition: background-size ease-out 0.2s;
  height: 100%; }

/* Panel Tandil */
#carrera-panel-tandil {
  background-image: url("../img/btns-carreras/tandil-md.jpg") !important;
  border-bottom: 8px solid #FBBA00; }

/* Panel Trelew */
#carrera-panel-trelew {
  background-image: url("../img/btns-carreras/trelew-md.jpg") !important;
  border-bottom: 8px solid #00de35; }

/* Panel villa-la-angostura */
#carrera-panel-villa-la-angostura {
  background-image: url("../img/btns-carreras/angostura-md.jpg") !important;
  border-bottom: 8px solid #990E8F; }

/* Panel Palermo */
#carrera-panel-palermo {
  background-image: url("../img/btns-carreras/palermo-md.jpg") !important;
  border-bottom: 8px solid #E32E2C; }

/* Panel Conin */
#carrera-panel-conin {
  background-image: url("../img/btns-carreras/conin-md.jpg") !important;
  border-bottom: 8px solid #1d9dd9; }

/* Panel Cordoba */
#carrera-panel-cordoba {
  background-image: url("../img/btns-carreras/cordoba-md.png") !important;
  border-bottom: 8px solid #2E6B3F;
  background-position-y: 0%;
  background-position-x: 0%; }

/* Panel la carolina */
#carrera-panel-la-carolina {
  background-image: url("../img/btns-carreras/lacarolina-md.jpg") !important;
  border-bottom: 8px solid #f36b22; }

/* Información de la carrera */
.carrera-info {
  position: absolute;
  bottom: 20%;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 4rem;
  font-weight: bolder;
  text-transform: uppercase;
  z-index: 9; }

/* Contenedor del botón */
.carrera-btn-container {
  position: absolute;
  bottom: 5%;
  width: 100%;
  text-align: center;
  z-index: 11; }

/* Estilo del botón */
.carrera-panel .btn {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  z-index: 9; }

.btn-active {
  background-color: #fff !important;
  color: #333 !important; }

.text-sm {
  font-size: small;
  font-weight: lighter; }

/* Efecto hover para ambos paneles */
.carrera-panel:hover {
  background-size: 120%;
  border-bottom-width: 0; }

.carrera-panel:hover .carrera-info {
  transform: translateY(-36px); }

/* Capa hover con patrón y color personalizado */
#carrera-panel-cordoba .carrera-panel:hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #2E6B3F), url("../img/pattern.png"); }

#carrera-panel-cordoba .carrera-panel-hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #2E6B3F), url("../img/pattern.png"); }

#carrera-panel-tandil .carrera-panel-hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #FBBA00), url("../img/pattern.png"); }

#carrera-panel-trelew .carrera-panel-hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #00de34), url("../img/pattern.png"); }

#carrera-panel-villa-la-angostura .carrera-panel-hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #990E8F), url("../img/pattern.png"); }

#carrera-panel-palermo .carrera-panel-hover {
  background-image: linear-gradient(rgba(2, 131, 41, 0.4), #E32E2C), url("../img/pattern.png"); }

#carrera-panel-conin .carrera-panel-hover {
  background-image: linear-gradient(rgba(29, 157, 217, 0.4), #00a2dd), url("../img/pattern.png"); }

#carrera-panel-la-carolina .carrera-panel-hover {
  background-image: linear-gradient(rgba(29, 157, 217, 0.4), #f36b22), url("../img/pattern.png"); }

.carrera-panel-hover {
  background-size: auto 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transition: transform ease-out 0.3s;
  z-index: 8; }

/* Hover: la capa sube suavemente */
.carrera-panel:hover .carrera-panel-hover {
  transform: translateY(-100%); }

/* Ocultar contenido por defecto */
.carrera-panel-hover .carrera-title,
.carrera-panel-hover .carrera-btn-container {
  display: none; }

/* =============================== */
/*  Mobile  */
/* =============================== */
@media screen and (max-width: 1000px) {
  #carrera-panel-cordoba.carrera-panel:hover {
    border-bottom-width: 0;
    background-size: cover; } }
@media screen and (max-width: 768px) {
  #carreras-prox-1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 15px;
    height: auto; }

  #carreras-prox {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 15px;
    height: auto; }

  .carrera-panel {
    background-size: cover;
    background-position: center;
    height: 250px; }

  #carrera-panel-tandil {
    background-image: url("../img/btns-carreras/tandil-sm.jpg") !important; }

  #carrera-panel-trelew {
    background-image: url("../img/btns-carreras/trelew-sm.jpg") !important; }

  #carrera-panel-conin {
    background-image: url("../img/btns-carreras/conin-sm.jpg") !important; }

  .carrera-info {
    font-size: 2.2rem; }

  .carrera-panel .btn {
    padding: 8px 14px;
    font-size: 0.95rem; } }
/* =============================================================== */
@keyframes slide-discover {
  0% {
    right: 20px; }
  10% {
    right: 50px; }
  25% {
    right: 40px; }
  40% {
    right: 30px; }
  65% {
    right: 20px; } }
/* Cartel suspendido */
.carrera-membrete {
  position: absolute;
  z-index: 100;
  background: #e2001a;
  transform: rotate(-45deg);
  padding: 15px 70px;
  top: 50px;
  left: -75px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); }
  .carrera-membrete .carrera-membrete-title {
    font-weight: 600; }
  @media screen and (max-width: 700px) {
    .carrera-membrete {
      padding: 10px 60px;
      top: 35px;
      left: -65px; } }

/* PRE HEADER*/
#header-pre-pre {
  padding: 10px 0;
  text-align: center;
  color: #FFF;
  background: #6CB576; }

#header-pre {
  padding: 10px 0;
  text-align: center;
  color: #FFF;
  background: #000; }

.modal-dialog {
  top: 15%;
  font-family: Montserrat; }
  .modal-dialog .modal-header {
    border-top: 5px solid #e2001a; }
  .modal-dialog .modal-title {
    font-weight: 800; }

.alert {
  margin: 10px; }

.btn-black:hover {
  background: #FFFFFF !important; }

#legales {
  font-size: 9px !important; }

/* agrando un poquito el logo de carrera */
header #header-logo img.montagne-carreras-logo {
  height: 70px; }

@media (max-width: 1200px) {
  header #header-logo img.montagne-carreras-logo {
    height: 55px; } }
@media (max-width: 700px) {
  header #header-logo img.montagne-carreras-logo {
    height: 37px; } }
/* override styles */
.btn.btn-primary {
  background: #000000;
  font-family: Montserrat;
  font-weight: 500;
  border-color: #343434; }

.btn.btn-primary:hover, .btn.btn-primary:active {
  background: #343434;
  border-color: #646464; }

body {
  outline: 5px solid magenta !important; }

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