@font-face {
    font-family: 'Neue Machina';
    src: url('NeueMachina-Light.eot');
    src: local('Neue Machina Light'), local('NeueMachina-Light'),
        url('../faces/NeueMachina-Light.eot?#iefix') format('embedded-opentype'),
        url('../faces/NeueMachina-Light.woff2') format('woff2'),
        url('../faces/NeueMachina-Light.woff') format('woff'),
        url('../faces/NeueMachina-Light.ttf') format('truetype'),
        url('../faces/NeueMachina-Light.svg#NeueMachina-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Machina';
    src: url('NeueMachina-Ultrabold.eot');
    src: local('Neue Machina Ultrabold'), local('NeueMachina-Ultrabold'),
        url('../faces/NeueMachina-Ultrabold.eot?#iefix') format('embedded-opentype'),
        url('../faces/NeueMachina-Ultrabold.woff2') format('woff2'),
        url('../faces/NeueMachina-Ultrabold.woff') format('woff'),
        url('../faces/NeueMachina-Ultrabold.ttf') format('truetype'),
        url('../faces/NeueMachina-Ultrabold.svg#NeueMachina-Ultrabold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Machina';
    src: url('NeueMachina-Regular.eot');
    src: local('Neue Machina Regular'), local('NeueMachina-Regular'),
        url('../faces/NeueMachina-Regular.eot?#iefix') format('embedded-opentype'),
        url('../faces/NeueMachina-Regular.woff2') format('woff2'),
        url('../faces/NeueMachina-Regular.woff') format('woff'),
        url('../faces/NeueMachina-Regular.ttf') format('truetype'),
        url('../faces/NeueMachina-Regular.svg#NeueMachina-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
  font-family: 'Neue Machina', sans-serif;
  color: #808080;
  margin: 0;
  font-weight:400;
  padding:0;
  font-size:1rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
  background-color:#F1F1E6;
}

::before, ::after {box-sizing: border-box;}

:root {
  --animate-delay:0.5s;
  --select-border:blue;
  --select-focus:blue;
}

a {font-family: 'Neue Machina', sans-serif; font-weight:400;}

.azul {background-color:#092356;}
.naranja {background-color:#F37B34;}
.beige {background-color:#F1F1E6; color:#F37B34 !important; margin:0 0 5rem 0 !important; padding:0;}
.gris {background-color:#717E97;}
.claro {background-color:#BFC2C9;}

#loader {position:absolute; width: 100%; height:100%; background-color:#F1F1E6; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:160px; height:160px; top:50%; left:50%; margin-left:-80px; margin-top:-80px; opacity:0;}

.aviso { display:none !important; width:100%;  height:100%; max-width:100%; min-height:100vh; padding: 0; margin:0; position:absolute;  z-index:99999999999; background-color:black;}
.aviso h1 {font-size:1.5rem; font-weight:600; color:white; width:600px; height:100vh; margin: 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
    min-height: 100dvh; /* Use dynamic viewport height */
	
}

header {width:100%; height:120px !important; position:fixed !important; top:0; left:0; display:flex; flex-direction:row; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
#hide-header {transition: all .5s ease!important;}   

.primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:5vh; z-index:9999; margin:0; padding:0;}
.primary-navigation ul {display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:0; z-index:9999; margin:0; padding:0; list-style: none;}
.primary-navigation a{ text-decoration:none; font-family: 'Neue Machina', sans-serif; font-size:1.25rem; font-weight:bold; width:auto; padding:0; margin-left:4rem;   color:#F44B01; text-transform:uppercase;}
.primary-navigation a:hover {color:#838076 !important;}
.primary-navigation a.active {color:#838076; font-weight:bold;}

.burger { display:none; border: 0; width:60px; height:auto; padding: 0;  background: url("../images/menu.svg") no-repeat bottom;  position: absolute; top:2vh; right:2vh; z-index:99999; cursor: pointer;}
.mobile-nav-toggle { cursor: pointer; display:none; border: 0; width:130px; height:40px; padding: 0; color:black; background: url("../images/logo_grajales.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; top:1.5rem; z-index:99999;}

.logo {position:absolute; left:4%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:70px; width:auto; max-width:auto; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));}

main {
    /* The main content will grow to fill available space due to 1fr in grid-template-rows */
    overflow-y: auto; /* Add scroll to main content if it's taller than the viewport */
}

.full-screen-section {
    height: 100dvh; /* Full height of the viewport */
    display: flex;
    justify-content: flex-start;
    align-items: center;
	overflow:hidden;
}

.fondo {width:100%; height:100%; position:absolute; top:0; left:0;  margin:0; padding:0; object-fit: cover; overflow:hidden;}
.fondo img {width: 100%; height:auto; margin:0; padding:0; }
.logo-inicio {width:100%; height:100vh; margin:0 auto; padding:0; position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:center; animation: pulse 4s ease infinite;}
.logo-inicio img {width:26%; height:auto; }
.il_01 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:16%; left:27%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 3s ease-in-out infinite;}
.il_02 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:57%; left:79%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 4s ease-in-out 2s infinite;}
.il_03 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:75%; left:20%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 4s ease-in-out 1s infinite;}
.il_04 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:22%; left:80%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 3s ease-in-out 5s infinite;}
.il_05 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:42%; left:10%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 5s ease-in-out 2s infinite;}
.il_06 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:76%; left:70%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float3 4s ease-in-out 1s infinite;}
.il_07 {width:3%; height:auto; margin:0; padding:0; position:absolute; top:86%; left:50%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 4s ease-in-out 4s infinite;}

.icono img {width:100%; height:auto;}

@keyframes pulse {
    from { transform: none; }
    50% { transform: scale(1.06); }
    to { transform: none; }
}

@keyframes float {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-25px);
      }
      100% {
        transform: translateY(0);
      }
    }

@keyframes float2 {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
      100% {
        transform: translateY(0);
      }
    }
	
@keyframes float3 {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0);
      }
    }
	
.salon {width:46%; height:100%; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-around;}
.salon p { width: 100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(2rem, 0.2857rem + 2.6786vw, 3.5rem); font-weight:600; padding:0; margin:0;   color:#F44B01;}
.cortes { width:auto; height:auto; display:flex; justify-content:flex-start; margin:0; padding:0; }
.primer {width:100px; max-height:min-content; margin:0; padding:0.5rem 5rem 0.5rem 1rem;  background-color:#F1F1E6; outline: 3px solid #F44B01; border-radius: 10px; position:relative; left:0;}
.primer a {width:50px; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1rem; font-weight:400; color:#F44B01;  text-transform:uppercase;  text-transform:uppercase; text-decoration:none; }
.primer:hover {background-color:#F44B01;}
.primer a:hover {color:#F1F1E6;}
.segundo {width:240px; max-height:min-content; margin:0; padding:0.5rem 1rem 0.5rem 1rem;  display:flex; justify-content:space-between; background-color:#092356 !important; outline: 3px solid #F44B01; border-radius: 10px; z-index:10; position:relative; left:-110px;}
.segundo a {width:100px; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1rem; font-weight:400; color:#F1F1E6;  text-transform:uppercase; text-decoration:none; margin:0; padding:0;}
.segundo a:hover {color:#F44B01;}
.segundo p {width:120px; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1rem; font-weight:400; color:#F37B34;  text-transform:uppercase; margin:0; padding:0;}
.hilera {width:92%; height:100%; display:flex; flex-direction:row; justify-content:space-between; margin:0; padding:0 4%; overflow:hidden;}
.columnas {width:46%; height:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; overflow:hidden;}
.columna1{width:auto; height:100%; margin:0; padding:0;  animation:30s linear 1s infinite alternate rise1; position:relative; top:-1000px; }
.columna2{width:auto; height:100%; margin:0; padding:0;  animation:30s linear 0s infinite alternate rise2; position:relative; top:-1000px;}
.columna3{width:auto; height:100%; margin:0; padding:0;  animation:30s linear 2s infinite alternate rise1; position:relative; top:-1000px;}
.columna1 img, .columna2 img, .columna3 img {width:100%; height:auto; margin:0; padding:0;}

@keyframes rise1 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100vh);
  }
}

@keyframes rise2 {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100vh);
  }
}

.columna {flex-direction:column; justify-content:space-beetween; margin:0; padding:0; }
.titulos {width:92%; height:auto; display:flex; flex-direction:row; justify-content:space-between; margin:5rem 0 0 0; padding:0;}
.lineas {width:auto; height:auto; dipslay:flex; flex-direction:column; justify-content:space-between;}
.feria {width:50%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0; padding:0;}
.horario {width:100%; height:auto; display:flex; flex-direction:row; justify-content:flex-start; margin:0; padding:0;}
.dias {width:50%; height:auto; display:flex; flex-direction:column; justify-content:flex-start; margin:0; padding:0;}
h1 {width:100%; height:auto; font-family: 'Neue Machina', sans-serif; font-weight:400; color:#F37B34; font-size: clamp(3rem, 0.7143rem + 3.5714vw, 5rem); text-transform:uppercase; margin:0; padding:0;}
h2 {width:40%; height:auto; font-family: 'Neue Machina', sans-serif; font-weight:400; color:#F37B34; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); text-transform:uppercase; margin:0; padding:0;}
h3 {width:100%; height:auto; font-family: 'Neue Machina', sans-serif; font-weight:300; color:#F1F1E6; font-size: clamp(2rem, 0.2857rem + 2.6786vw, 3.5rem); text-transform:uppercase; margin:0; padding:0;}
.top {width:20px; border-top: 3px solid #F1F1E6; padding:1rem 0 0 0; margin:0;}
.bottom {width:20px; border-bottom: 3px solid #F1F1E6; padding:0 0 1rem 0; margin:0;}
.dias p {width:100%; height:auto; font-family: 'Neue Machina', sans-serif; font-weight:400; color:#F1F1E6; font-size: clamp(1rem, 0.6571rem + 0.5357vw, 1.3rem); text-transform:uppercase; margin:0; padding:0;}

.ubicacion {width:92%; height:auto; margin:5rem 0; padding: 0; display:flex; flex-direction:row; justify-content:space-between; object-fit:cover;}
.mapa {width:66%; height:auto; margin:0; padding:0; }
.mapa img {width:100%; height:auto; margin:0; padding:0; outline: 4px solid #F44B01; border-radius: 10px;}
.direccion {width:30%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-around;}
.direccion p, .direccion a {width:auto; height: auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); color:#F1F1E6; font-weight:400; padding:0; margin:0; text-decoration:none; }
.direccion a {color:#F44B01;}
.direccion a:hover {text-decoration:underline;}
.botones {width:92%; height:auto; margin:0 0 5rem 0; padding:0; display:flex; flex-direction:row; justify-content:space-between;}
.botones a {width:20%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.15rem; background-color:#F1F1E6; color:#F44B01; outline: 3px solid #F44B01; font-weight:400; margin:0; padding:1rem 0; border-radius: 10px; text-decoration:none; text-align:center; text-transform:uppercase;}
.botones a:hover {background-color:#F44B01; color:#F1F1E6;}

.banner {width:100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.5rem, 0.9286rem + 0.8929vw, 2rem); font-weight:500; color:#F1F1E6; margin:0 0 5rem 0; padding:1rem 0; text-align:center;}
.banner2 {width:100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.5rem, 0.9286rem + 0.8929vw, 2rem);  font-weight:500; color:#F1F1E6; margin:0 0 2rem 0; padding:1rem 0; text-align:center;}
.artistas {width:80%; height:auto;  column-count:4; column-gap:4%; margin:0 0 5rem 0; padding:0 8%;}
.artistas p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem);  font-weight:300;  color:#808080; margin:0 0 1.5rem 0; padding:0;}



.aliados {width:60%; height:auto; display:flex; flex-direction:row; justify-content:space-around; align-items: center; margin:0 auto 5rem auto; padding:0;}
.aliados img {width:20%; height:auto; margin:0: padding:0; opacity:0.3;}

.b_aliado {justify-content:center;}


.filo-info {width:92%; height:auto; background-color:#F1F1E6; margin:54% 0 5rem 0; padding:0 4%;  z-index:100; border-top-left-radius: 20px; border-top-right-radius: 40px}
.texto-filo {width:90%; height:auto; column-count: 2; column-gap:4rem; margin:4rem 5rem; padding:0;}
.filo-info p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.25rem, 0.6786rem + 0.8929vw, 1.75rem); font-weight:300; line-height:2.5rem;  color:#262626; margin:0; padding:0; }
.filo-info p:first-child,  .filo-info p:nth-child(3) {margin:0 0 1.5rem 0;}
.filo-info p:nth-child(2) {margin:0 0 0.1rem 0;}

.borde {width:92; height:auto; margin:0 0 5rem 0; padding:4%; border-radius: 20px; outline:3px solid #F44B01; display:flex; flex-direction:row; justify-content:space-between;}
.card {width:16%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;}
.card img {width:26%; height:auto; margin:0 0 2rem 0; padding:0;}
.card h1 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem);  font-weight:500;  color:#262626; margin:0 0 2rem 0; padding:0; }
.card p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1rem;  font-weight:5300;  color:#808080; margin:0 !important; padding:0; text-align:left;}
.comprar {width:100%; justify-content:center;}

.visitantes {width:100%; height:auto; margin:5% 0 0 0; padding:0;  z-index:100;}
.caja {width:92%; height:auto; margin:0 0 5rem 0; padding:0 4%; display:flex; flex-direction:row; justify-content:space-between;  }
.card2 {width:14%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:left; background-color:#BFC2C9; border-radius: 10px; outline:3px solid #F44B01;}
.simbolo {width:100%; height:auto;  background-color:#092356; text-align:center;}
.card2 img {width:26%; height:auto; margin:0; padding:2rem;}
.card2 h3 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:0.9rem;  font-weight:300;  color:#262626; text-transform:none; margin:0; padding:1rem 0rem 0rem 1rem; text-align:left;}
.card2 h2 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem;  font-weight:500;  color:#262626; text-transform:none; margin:0 0 2rem 0; padding:0rem 0rem 0rem 1rem; text-align:left;}
.card2 p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:0.9rem;  font-weight:300;  color:#262626; margin:0 1rem 1rem 1rem; padding:0; display:flex; justify-content:flex-start; align-items:center;}
.card2 p img {width:auto; height:24px; margin:0 1rem 0 0; padding:0;}

.boletos {width:92%; height:auto; margin:0 0 5rem 0; padding:0 4%; display:flex; justify-content:space-between; }
.boleto {width:28%; height:200px; margin:0; padding:4rem 0 3rem 0; border-radius: 10px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
.boleto h1 {width:auto; height;auto; font-family: "Space Grotesk", sans-serif; font-size:2rem;  font-weight:600; line-height:1.5rem;  color:#262626; margin:0; padding:0; text-align:center;}
.boleto h2 {width:auto; height;auto; font-family: 'Neue Machina', sans-serif; font-size:4rem; font-weight:400; line-height:1.5rem; color:#262626; margin:0; padding:0; text-align:center;}
.boleto p, .boleto h1 span, .boleto h2 span {width:auto; height;auto; font-family: "Space Grotesk", sans-serif; font-size:1rem;  font-weight:300;  color:#808080; margin:0; padding:0; text-transform:uppercase;}
.boletos div:nth-of-type(2){background-color:#F37B34 !important;}

.link {width:100%; height:auto; display:block;  background-color:#F44B01; color:#262626;  padding:1rem 0; margin:0 0 3rem 0; text-decoration:none; }
.link p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem; font-weight:500;  color:#262626; text-transform:uppercase; margin:0 1rem;  padding:0;  white-space: nowrap;}
.ticker { width:100%; height:auto;  color:#262626;  margin:0; padding:0; text-decoration:none; display:flex; justify-content:space-between; box-sizing: content-box; animation: ticker 20s linear infinite; }

.archivo, .media, .contact {width:100%; height:auto; margin:5% 0 0 0; padding:0;  z-index:100;}
.naranja2 {color:#F37B34 !important;}

.listado {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr 1fr; gap:4rem; margin:0 4% 5rem 4%; padding:0;}
.media, .contacto {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:4rem; margin:0 4% 5rem 4%; padding:0;}
.equipo {width:60%; min-height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:4rem; margin:0 4% 5rem 4%; padding:0;}
.elemento a {text-decoration:none; overflow: hidden; border-radius: 10px;}
.elemento {width:100% !important; height:auto; padding:0; margin:0;  display:flex; flex-direction:column; }
.elemento h1 {width:auto; height:auto; font-family: 'Neue Machina', sans-serif; font-size: clamp(2rem, 1.4286rem + 0.8929vw, 2.5rem); font-weight:400; color:#262626;  line-height:auto; text-decoration:none; text-transform:inherit; margin:1rem 0 0 0; padding:0; vertical-align: bottom;}
.elemento span {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:400; color:#808080; margin:1rem 0 0 0; padding:0; float:right; }
.elemento a {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight:300; color:#262626; text-decoration:none;}
.elemento a:hover {text-decoration:underline;}
.elemento a img {transition: transform .5s ease; width:100%; border-radius: 10px; }
.elemento a:hover img {transform: scale(1.1); border-radius: 10px;}
.elemento h2 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:300; color:#808080; margin:1rem 0 0 0; padding:0; text-transform:capitalize;}
.elemento h3 {width:auto; height:auto; font-family: 'Neue Machina', sans-serif; font-size: clamp(2rem, 1.4286rem + 0.8929vw, 2.5rem); font-weight:400; color:#262626;  line-height:2.5rem; text-decoration:none; text-transform:inherit; margin:0 0 2rem 0; padding:1rem 0; border-top: 2px solid #262626;}
.elemento p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:300; color:#262626; margin:0 0 1rem 0; padding:0;}
.generales {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:4rem; margin:0 4% 4rem 4%; padding:0;}
.generales a {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight:300; color:#262626; text-decoration:none;}
.generales a:hover {text-decoration:underline;}
.redes {width:100%; height:auto; display:flex; justify-content:flex-start; margin:0; padding:0;}
.redes a {width:auto; height:auto; margin:0 2rem 0 0; padding:0; text-decoration:none;}
.redes a img {width:30px; height:auto; margin:0; padding:0;}

.hilera2 {width:92%; height:100%; display:flex; flex-direction:row; justify-content:start; align-items:end; margin:0; padding:0 4%; overflow:hidden;}
.elemento h4 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:300; color:#808080; writing-mode: vertical-lr;}
.elemento h5 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:400; color:#262626; margin:1rem 0 0 0; padding:0; text-transform:uppercase;}
.equipos {width:auto; height:auto; display:flex; flex-direction:column; justify-content:center; margin:0 0 0 2rem; padding:0;}
.equipos p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem; font-weight:300; color:#808080; margin:8rem 0 10rem 0; padding:0; writing-mode: sideways-lr;}
.texto {width:15%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.75rem; font-weight:300; color:#262626; margin:0 0 8% 0; padding:0;}

.aliados2 {width:92%; height:auto; display:flex; justify-content:center; flex-wrap: wrap; align-items:center; margin:0 4% 5rem 4%; padding:0; }
.aliados2 img {width:13%; height:auto; margin:4rem; padding:0; opacity:0.3;}

@keyframes ticker {
  0% {
    
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    
    transform: translate3d(-100%, 0, 0);
  }
}

.contacto {width:92%; height:auto;  margin:0 0 5rem 0; padding:0 4%;}

.contacto-row {width:92%; height:auto; display:flex; justify-content:space-between; margin:0 0 5rem 0; padding:0 4%;}

.imagen {width:40%; height:auto; margin:0; padding:0;}
.imagen img {width:100%; height:auto; margin:0; padding:0;}
.forma {width:52%; height:auto;  display:flex; flex-direction:column; justify-content:start; margin:0; padding:0;}


.renglon {width:100%; height:auto; display:flex; flex-direction:row; justify-content:space-between; margin:0; padding:0;}
.quote {width:92%; height:auto; background:#FF9455; color:white; font-family:'Lexend Deca', sans-serif; font-weight:500; font-size:6rem; line-height:auto; padding:4% 4%;}
.form-control, .form-control2 {width:48%; height:50px; border:none;  padding:0.5rem 1rem; margin:0 0 2rem 0; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#262626; font-weight:400; font-size:1.15rem; text-transform:uppercase;}
.form-control2 {width:100%; height:50px;}
.custom-select {width:48%;  border:none;  padding:1rem; margin:0 0 2rem 0; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#808080; font-weight:400; font-size:1.15rem; text-transform:uppercase; cursor:pointer;}
.form-control:active, .form-control2:active, .form-control:focus, .form-control2:focus, .custom-select:active, .custom-select:focus {outline:none; box-shadow: 0px 0px 40px 1px rgba(255,255,255,0.3); border-color: #FF5F00;}
.custom-select:hover{background:#D5D3C7; cursor:pointer;}
.custom-select option {background:#D5D3C7; }
.textarea {width:45%; height:130px; border:none;  padding:1rem; margin:0 0 2rem 0; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#262626; font-weight:400; font-size:1.15rem; text-transform:uppercase; resize: none;}
.textarea:active, .textarea:focus {outline:none; box-shadow: 0px 0px 40px 1px rgba(255,255,255,0.3); }
.b-forma {width:100%; height:auto; text-align:center;}
.contact-form-btn {width:30%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.15rem; background-color:transparent; color:#F44B01; border:none; outline: 3px solid #F44B01; font-weight:500; border-radius: 10px; margin:0 0 2rem 0; padding:1rem 0; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer;}
.contact-form-btn:hover {background-color:#F44B01; color:#F1F1E6;}

footer {width:92%; height:auto; background-color: #F37B34; display:flex; flex-direction:row; justify-content:space-between; margin:0; padding:2% 4%;}
.logo-derechos {width:15%; height:100%; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-filo {width:15%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
footer a {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem; font-weight:600; color:#F1F1E6; text-decoration:none; text-transform:uppercase;}
.otro {width:auto; height:auto; font-family: 'Neue Machina', sans-serif; font-size:1rem; font-weight:300; color:#F1F1E6; text-decoration:underline; text-transform:inherit;}
.f-archivo {width:15%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-links {width:15%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-redes {width:2%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-redes a {width:30px; height:30px; margin:0; padding:0; text-decoration:none;}
.f-redes img {width:30px; height:30px; margin:0; padding:0;}
.logo-derechos a {width:auto; height:auto; margin:0 0 4rem 0; padding:0;}
.logo-derechos img {width:100px; height:auto;}
.logo-derechos p {color:#F1F1E6 !important; margin:0; padding:0;}



/* Example section background colors */
.uno {
    background-color:#092356;
}

.dos {
    background-color:#F1F1E6;
	justify-content:space-between;
	margin:0;
	padding:0 4%;
}

.tres {
    background-color:#092356;
	height:auto;
}

.cuatro, .filo {
    background-color:#F1F1E6;
	height:auto;
}

.cinco {
    background-color:#F1F1E6;
	height:auto;
}

.visitantes {
   
	height:auto;
}

.primer-corte {flex-direction:column; height:auto; margin:5% 0 3rem 0; padding:0;}


@media (max-width:35em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#FFF; left:0px; top:0px; z-index: 9999999999; }
  #logotipo {position:relative; width:242px; height:102px; top:50%; left:50%; margin-left:-121px; margin-top:-51px; opacity:0;}
	
  header {height:120px !important; position:fixed !important;}	
 .mobile-nav-toggle, .burger { display:block !important; position:absolute; top:2vh; right:7vw; z-index:99999 !important; width:60px; height:40px;}
 .mobile-nav-toggle[aria-expanded="true"] {display:block; background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:80px; height:40px;}
 .burger[aria-expanded="true"] {display:block;  background: url("../images/cerrar.svg") no-repeat bottom !important; z-index:999999 !important; width:60px; height:60px;}
 .primary-navigation{position:fixed; width:100%; height:100vh; inset:0; background:#F1F1E6;  flex-direction:column; justify-content:center; align-items:start; padding: 0; z-index:99999 !important; transform: translateX(100%); transition:transform 150ms ease-in-out;}
 .primary-navigation[data-visible="true"] {transform: translateX(0%);}
 
 .primary-navigation a{ text-decoration:none; font-family: 'Neue Machina', sans-serif; font-size:2rem; font-weight:bold; width:auto; padding:0; margin:0 0 4rem 4rem;   color:#F44B01; text-transform:uppercase;}
 .primary-navigation a:hover {color:#838076 !important;}
 .primary-navigation a.active {color:#838076; font-weight:bold;}
 
 .logo {position:absolute; left:2vw; top:3vh !important; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
 .logo img {height:50px; width:auto; max-width:auto; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));}
 
 
 
 .fondo {width:100%; height:100%; position:absolute; top:0; left:0;  margin:0; padding:0; object-fit: cover; overflow:hidden;}
 .fondo img {width: auto; height:100%; margin:0; padding:0; }
 .logo-inicio {width:100%; height:100vh; margin:0 auto; padding:0; position:absolute; display:flex; flex-direction:column; justify-content:center; align-items:center; animation: pulse 2.4s ease infinite;}
 .logo-inicio img {width:50%; height:auto; }
 .il_01 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:16%; left:27%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 3s ease-in-out infinite;}
 .il_02 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:57%; left:79%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 4s ease-in-out 2s infinite;}
 .il_03 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:75%; left:20%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 4s ease-in-out 1s infinite;}
 .il_04 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:22%; left:80%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 3s ease-in-out 5s infinite;}
 .il_05 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:42%; left:10%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float 5s ease-in-out 2s infinite;}
 .il_06 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:76%; left:70%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float3 4s ease-in-out 1s infinite;}
 .il_07 {width:10%; height:auto; margin:0; padding:0; position:absolute; top:86%; left:50%; filter: drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2)); animation: float2 4s ease-in-out 4s infinite;}

.icono img {width:100%; height:auto;}
 
 .salon {width:100%; height:100%; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-around;}
 
 .columnas {display:none;}
 
 .titulos {width:92%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:5rem 0 0 0; padding:0;}
 .feria {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0; padding:0;}
 .horario {width:100%; height:auto; display:flex; flex-direction:column; justify-content:flex-start; margin:0; padding:0;}
 .dias {width:100%; height:auto; display:flex; flex-direction:column; justify-content:flex-start; margin:0; padding:0;}
 
 .ubicacion {width:92%; height:auto; margin:2rem 0; padding: 0; display:flex; flex-direction:column; justify-content:space-between; object-fit:cover;}
 .mapa {width:100%; height:auto; margin:0 0 2rem 0; padding:0; }
 .mapa img {width:100%; height:auto; margin:0; padding:0; outline: 4px solid #F44B01; border-radius: 10px;}
 .direccion {width:100%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-around;}
 .botones {width:92%; height:auto; margin:0 0 5rem 0; padding:0 4%; display:flex; flex-direction:column; justify-content:space-between;}
 .botones a {width:90%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.15rem; background-color:#F1F1E6; color:#F44B01; outline: 3px solid #F44B01; font-weight:400; margin:0 auto 2rem auto; padding:1rem 0; border-radius: 10px; text-decoration:none; text-align:center; text-transform:uppercase;}

 .banner {width:100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:2rem;  font-weight:500; color:#F1F1E6; margin:0 0 5rem 0; padding:1rem 0; text-align:center;}
 .banner2 {width:100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:2rem;  font-weight:500; color:#F1F1E6; margin:0 0 2rem 0; padding:1rem 0; text-align:center;}
 .artistas {width:92%; height:auto;  column-count:2; column-width:40%; column-gap:5%; margin:0 0 5rem 0; padding:0 4%;}
 .artistas p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:0.9rem;  font-weight:300;  color:#808080; margin:0 0 1rem 0; padding:0;}

 .aliados {width:100%; height:auto; display:flex; flex-direction:row; justify-content:space-around; align-items: center; margin:0 auto 5rem auto; padding:0;}
 .aliados img {width:25%; height:auto; margin:0: padding:0; opacity:0.3;}

 .filo-info {width:92%; height:auto; background-color:#F1F1E6; margin:200% 0 5rem 0; padding:0 4%;  z-index:100; border-top-left-radius: 20px; border-top-right-radius: 20px}
 .texto-filo {width:100%; height:auto; column-count: 1; column-gap:4rem; margin:4rem 0; padding:0;}
 .filo-info p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1.25rem, 0.6786rem + 0.8929vw, 1.75rem); font-weight:300; line-height:2.5rem;  color:#262626; margin:0; padding:0; }
 .filo-info p:first-child,  .filo-info p:nth-child(3) {margin:0 0 1.5rem 0;}
 .filo-info p:nth-child(2) {margin:0 0 0.1rem 0;}

 .borde {width:92; height:auto; margin:0 0 5rem 0; padding:4%; border-radius: 20px; outline:3px solid #F44B01; display:flex; flex-direction:column; justify-content:start;}
 .card {width:100%; height:auto; margin:0 0 3rem 0; padding:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:center;}
 .card img {width:26%; height:auto; margin:0 0 2rem 0; padding:0;}
 .card h1 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem);  font-weight:500;  color:#262626; margin:0 0 2rem 0; padding:0; }
 .card p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1rem;  font-weight:5300;  color:#808080; margin:0 !important; padding:0; text-align:left;}
 .comprar {width:auto; justify-content:center; margin:0 auto; padding:0;}

 .visitantes {width:100%; height:auto; margin:15% 0 0 0; padding:0;  z-index:100;}
 .caja {width:92%; height:auto; margin:0 0 5rem 0; padding:0 4%; display:flex; flex-direction:column; justify-content:start;  }
 .card2 {width:92%; height:auto; margin:0 auto 3rem auto; padding:0; display:flex; flex-direction:column; justify-content:flex-start; align-items:left; background-color:#BFC2C9; border-radius: 10px; outline:3px solid #F44B01;}
 .simbolo {width:100%; height:auto;  background-color:#092356; text-align:center;}
 .card2 img {width:26%; height:auto; margin:0; padding:2rem;}
 .card2 h3 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:0.9rem;  font-weight:300;  color:#262626; text-transform:none; margin:0; padding:1rem 0rem 0rem 1rem; text-align:left;}
 .card2 h2 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem;  font-weight:500;  color:#262626; text-transform:none; margin:0 0 2rem 0; padding:0rem 0rem 0rem 1rem; text-align:left;}
 .card2 p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:0.9rem;  font-weight:300;  color:#262626; margin:0 1rem 1rem 1rem; padding:0; display:flex; justify-content:flex-start; align-items:center;}
 .card2 p img {width:auto; height:24px; margin:0 1rem 0 0; padding:0;}

 .boletos {width:92%; height:auto; margin:0 0 5rem 0; padding:0 4%; flex-direction:column; justify-content:start; }
 .boleto {width:100%; height:200px; margin:0 0 3rem 0; padding:4rem 0 3rem 0; border-radius: 10px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
 .boleto h1 {width:auto; height;auto; font-family: "Space Grotesk", sans-serif; font-size:2rem;  font-weight:600; line-height:1.5rem;  color:#262626; margin:0; padding:0; text-align:center;}
 .boleto h2 {width:auto; height;auto; font-family: 'Neue Machina', sans-serif; font-size:4rem; font-weight:400; line-height:1.5rem; color:#262626; margin:0; padding:0; text-align:center;}
 .boleto p, .boleto h1 span, .boleto h2 span {width:auto; height;auto; font-family: "Space Grotesk", sans-serif; font-size:1rem;  font-weight:300;  color:#808080; margin:0; padding:0; text-transform:uppercase;}
 

 .archivo, .media, .contact {width:100%; height:auto; margin:15% 0 0 0; padding:0;  z-index:100;}
 .naranja2 {color:#F37B34 !important;}

 .listado {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr;  margin:0 4% 5rem 4%; padding:0;}
 .media, .contacto {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr; gap:4rem; margin:0 4% 5rem 4%; padding:0;}
 .equipo {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr; gap:0rem; margin:0 4% 5rem 4%; padding:0;}
 
 .elemento {width:100% !important; height:auto; padding:0; margin:0 0 2rem 0;  display:flex; flex-direction:column; }
 
 .generales {width:92%; min-height:auto; display:grid; grid-template-columns: 1fr; gap:2rem; margin:0 4% 2rem 4%; padding:0;}
 
 .hilera2 {width:92%; height:100%; display:flex; flex-direction:column; justify-content:start; align-items:end; margin:0; padding:0 4%; overflow:hidden;}
 .elemento h4 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:300; color:#808080; writing-mode:horizontal-tb;}
 .elemento h5 {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); font-weight:400; color:#262626; margin:1rem 0 0 0; padding:0; text-transform:uppercase;}
 .equipos {width:auto; height:auto; display:none; flex-direction:column; justify-content:center; margin:0 0 0 2rem; padding:0;}
 .equipos p {width:auto; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem; font-weight:300; color:#808080; margin:8rem 0 10rem 0; padding:0; writing-mode: horizontal-tb;}
 .texto {width:100%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.75rem; font-weight:300; color:#262626; margin:0 0 3rem 0; padding:0;}

.aliados2 {width:100%; height:auto; display:grid; grid-template-columns: 1fr 1fr; gap:4rem; justify-items: center; margin:0 0 5rem 0; padding:0; }
.aliados2 img {width:80%; height:auto; margin:0; padding:0; opacity:0.3;}


.contacto {width:92%; height:auto;  margin:0 0 5rem 0; padding:0 4%;}

.contacto-row {width:92%; height:auto; display:flex; justify-content:space-between; margin:0 0 5rem 0; padding:0 4%;}

.imagen {width:40%; height:auto; margin:0; padding:0;}
.imagen img {width:100%; height:auto; margin:0; padding:0;}

.forma {width:100%; height:auto;  display:flex; flex-direction:column; justify-content:start; margin:0; padding:0;}
.renglon {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0; padding:0;}
.quote {width:92%; height:auto; background:#FF9455; color:white; font-family:'Lexend Deca', sans-serif; font-weight:500; font-size:6rem; line-height:auto; padding:4% 4%;}
.form-control, .form-control2 {width:80%; height:50px; border:none;  padding:0.5rem 1rem; margin:0 auto 2rem auto; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#262626; font-weight:400; font-size:1.15rem; text-transform:uppercase;}
.form-control2 {width:80%; height:50px;}
.custom-select {width:88%; height:50px;  border:none;  padding:2rem; margin:0 auto 2rem auto; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#808080; font-weight:400; font-size:1.15rem; text-transform:uppercase; cursor:pointer;}
.form-control:active, .form-control2:active, .form-control:focus, .form-control2:focus, .custom-select:active, .custom-select:focus {outline:none; box-shadow: 0px 0px 40px 1px rgba(255,255,255,0.3); border-color: #FF5F00;}
.custom-select:hover{background:#D5D3C7; cursor:pointer;}
.custom-select option {background:#D5D3C7; }
.textarea {width:80%; height:130px; border:none;  padding:1rem; margin:0 auto 2rem auto; background:#D5D3C7; border-radius: 10px; font-family: "Space Grotesk", sans-serif; color:#262626; font-weight:400; font-size:1.15rem; text-transform:uppercase; resize: none;}
.textarea:active, .textarea:focus {outline:none; box-shadow: 0px 0px 40px 1px rgba(255,255,255,0.3); }
.b-forma {width:100%; height:auto; text-align:center;}
.contact-form-btn {width:88%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.15rem; background-color:transparent; color:#F44B01; border:none; outline: 3px solid #F44B01; font-weight:500; border-radius: 10px; margin:0 0 2rem 0; padding:1rem 0; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer;}
.contact-form-btn:hover {background-color:#F44B01; color:#F1F1E6;}



footer {width:92%; height:auto; background-color: #F37B34; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:3rem; margin:0; padding:4% 4%;}
.logo-derechos {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-filo {width:50; height:auto; margin:0; padding:0; display:none; flex-direction:column; justify-content:space-between;}
footer a {width:50%; height:auto; font-family: "Space Grotesk", sans-serif; font-size:1.2rem; font-weight:600; color:#F1F1E6; text-decoration:none; text-transform:uppercase;}
.otro {width:auto; height:auto; font-family: 'Neue Machina', sans-serif; font-size:1rem; font-weight:300; color:#F1F1E6; text-decoration:underline; text-transform:inherit;}
.f-archivo {width:50%; height:auto; margin:0; padding:0; display:none; flex-direction:column; justify-content:space-between;}
.f-links {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-redes {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.f-redes a {width:30px; height:30px; margin:0; padding:0; text-decoration:none;}
.f-redes img {width:30px; height:30px; margin:0; padding:0;}
.logo-derechos a {width:auto; height:auto; margin:0 0 4rem 0; padding:0; font-size:0.9rem;}
.logo-derechos p {color:#F1F1E6 !important; margin:0; padding:0; font-size:0.9rem;}
.logo-derechos img {width:100px; height:auto;}

/* Example section background colors */
.uno {
    background-color:#092356;
}

.dos {
    background-color:#F1F1E6;
	justify-content:space-between;
	margin:0;
	padding:0 4%;
}

.tres {
    background-color:#092356;
	height:auto;
}

.cuatro, .filo {
    background-color:#F1F1E6;
	height:auto;
}

.cinco {
    background-color:#F1F1E6;
	height:auto;
}

.visitantes {
   
	height:auto;
}

.primer-corte {flex-direction:column; height:auto; margin:20% 0 3rem 0; padding:0;}

}



@media only screen and (orientation:landscape) and (max-width:992px){.aviso {display:block !important; width:100%; height:100% !important;} .page-container {display:none;}}