/*scroll-snap-type es para que el scroll se acomode en cada section.
En caso de agregar nuevas section hay que poner screoll_snap-align:start*/


html {
scroll-snap-type: y mandatory;
} 


body{
width:100%;
height:auto;
margin: 0;
padding:0;
cursor:none;
  scroll-behavior: smooth;
} 



/*ANIMACION*/
@keyframes appear{
  from {
    opacity:0;
transform:translateX(-500px)
  }
  to {
    opacity:1;
transform:translateX(0)}
  }
}





/*FIN DE ANIMACIÓN*/

/*esta es la tipografia*/
.krona-one-regular {
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
h1{
  font-family: "Krona One";
  font-size: 10rem;

}

h4{
  font-family: "Krona One";
  font-size: 2rem;
}
h6{
  font-family: "Krona One";
  font-size: 1rem;
}
h9{
  font-family: "Krona One";
  font-size: 0.8rem;
  line-height: 2rem;
}
/*esto es el video portada*/ 
.wrapper{
  width: 100%;
  height: 100vh;
  overflow: hidden;
/* SOL:(si activas esto, hace que el scroll se posicione en el inicio del div, 
tenes que ponerlo en todos los section)
scroll-snap-align:start;*/
}

.wrapper .wrapper__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.wrapper img{
  width: 86%;
  padding-top: 22%;
  padding-left: 6%;
  overflow: hidden;
  position: absolute;

}

/*texto inicial*/
.nosotros{
position: relative;
display: flex;
align-items: center;
height: auto;
overflow:hidden;
background-color: white;
  background-attachment: fixed;
flex-direction: column;
margin:0;
color:black;
padding-top: 12vh;
  animation: appear linear;
animation-timeline: view();
animation-range:entry 0% cover 40%;
}
.text_nosotros{
  z-index: 1; 
  padding-bottom: 40px;
  float:left;
  height: auto;
  width: 50%;
  text-align: center;
}

.nosotros2{
position: relative;
display: flex;
align-items: center;
height: auto;
overflow:hidden;
background-color: rgb(223 51 66);
  scroll-snap-align:start;
  background-attachment: fixed;
flex-direction: column;
margin:0;
color:white;
width: 100%;
}
.text_nosotros2{
  z-index: 1; 
  float:left;
  height: auto;
  width: 50%;
  letter-spacing: 0.25em; word-spacing: 0.25em;
  text-align: center;
}
/*Esto son los contenedores de los videos*/

.title{
  color:white;
  z-index: 1; 
  float:left;
  height: 10%;
  width: 100%;
  text-align: center;
}

a{width: 100%;}
/*VIDEO DE FONDO DE LAS SECTION*/
.wrapper2__video{
  object-fit: cover;
  width: 100%;
  height: 100%;
overflow: hidden;
  position: absolute;
}
/*FIN DE FONDO DE SECTION*/


.section1{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section1 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section1 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section2{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/FUTBOL.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section2 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section2 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/FUTBOL.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section3{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/MURGA.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section3 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section3 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/MURGA.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section4{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/FIESTA.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section4 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section4 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/FIESTA.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section5{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/MEETING.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section5 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section5 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
background-image: url("img/MEETING.jpg");
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.section6{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section6 a{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}
.section6 a:hover{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow:hidden;
  background-attachment: fixed;
flex-direction: column;
margin:0;
}

.marcas{
position: relative;
display: flex;
align-items: center;
height: 50%;
overflow:hidden;
background-color: white;
  background-attachment: fixed;
flex-direction: column;
margin:0;
color:black;
}
.text_marcas{
  z-index: 1; 
  padding-top: 25px;
  float:left;
  height: 10%;
  text-align: center;
}




/*FIN DE CSS DE CAROUSEL*/




.footer{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: auto;
overflow:hidden;
background-color: black;
color:white;
flex-direction: column;
margin:0;
padding: 54px 0px;
}
.text_footer{
  z-index: 1; 
  float:left;
  height: 10%;
  text-align: center;
}




/* css de pagina de videos */
.section_video{
width: 100%;
height:100%;
padding: 0;
margin: 0;
background-color: black;
scroll-snap-align:start;
display: flex;
justify-content: center;
}

.video{
  width: 100%;
  height: auto;
}



/*Proyectos Pag*/

.contenedor_proyectos{
  width: 100%;
height:100%;
padding: 0;
margin: 0;
background-color: black;
float: left;
background-image: url("img/FONDO.png");
}

.cuerpo_proyectos{
  width: 95%;
padding: 5% 0% 0% 5%;
margin: 0;
float: left;
}
.cuerpo_proyectos a{
color:white;
font-size: 31pt;
}
.cuerpo_proyectos a:hover{
color:rgb(223 51 66);
font-size: 31pt;
}

/*Contacto Pag*/

.contenedor_proyectos_contacto{
  width: 100%;
height:100%;
padding: 0;
margin: 0;
background-color: black;
float: left;
}

.cuerpo_proyectos_contacto{
  width: 95%;
padding: 10% 0% 0% 5%;
margin: 0;
background-color: black;
float: left;
}
#proyectos_contacto{
text-align: center;
}
.cuerpo_proyectos_contacto a{
color:white;
font-size: 31pt;
}
.cuerpo_proyectos_contacto a:hover{
color:rgb(223 51 66);
font-size: 31pt;
}



/*RESPONSIVE*/
@media (min-aspect-ratio: 16 / 9) {

}
@media (max-aspect-ratio: 16 / 9) {
}


section{
width: 100%;
height:100%;
padding: 0;
margin: 0;
}



@media only screen and (max-width: 1024px) {
li a{
  font:67pt "Roboto", sans-serif;
  font-weight: 700;
  line-height: 1.8;
}
li{
  width: 100% !important ;
}

.wrapper img {
  padding-top:54%;
}
.wrapper{
  height: 80vh;
}
.section1, .section2, .section3, .section4, .section5, .section6 {
  height: 50%;
  background-attachment: scroll;
}
h1{
  font-size:4rem;
}

  .title{
    line-height:normal;
  }

  .title h6{
    font-size: 2rem;
  }
  .title h1{
    height: auto;
  }
 .cuerpo_proyectos_contacto a{
  font-size: 44pt;
 } 
 .cuerpo_proyectos_contacto{
  padding: 46% 0% 0% 5%;
 }
 /*responsive de nosotros*/
 .text_nosotros{
  width: 90%;
 }
 h4{
  font-size:4rem;}
.text_nosotros2{
  font-size: 2rem;
  line-height: 5rem;
}
.brands-wrap{
  width: 100%;
}
.marcas{
  height: 25%;
}

}