@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

@font-face {
	font-family: 'helvetica';
	src: url("helvetica.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

html{width:100%;
	height:100%;
}

body{width:100%;height:100%;background-color:#000000;transition:all .5s;-moz-transition:all 1s;-webkit-transition:all .5s;-o-transition:all .5s; z-index:9998;font-family: "Inter", sans-serif;}

.smooth{ text-decoration: none;}

#elheader{ background-color: transparent; width:100%; height:96px; top:0px; left:0; position:fixed;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s; z-index:9998;}
#elheader.xs{ background-color:#000000; }
#elheader.xl{ background-color: transparent; }



* { margin: 0px;
padding: 0px; outline: 0;
}
iframe { display:block; border:none; }

.os-animation{
            opacity:0;
 }  

.os-animation.animated{
            opacity: 1.5;
 }  
 
 *:focus { 
    outline: none; 
} 

h1,h2,h3,h4,h5,h6{ display:inline !important;}

.contenedor { position: relative;overflow: hidden;width:83px; text-decoration: none;}
.texto {  font-size: 16px; line-height: 130%;  font-family: "Inter", sans-serif; color: #ffffff;  text-align: center;  cursor: pointer;  transform: translateY(0);  transition: transform 0.3s;}
.texto:last-child {  transform: translateY(100%);  position: absolute;  top: 0;}
.contenedor:hover .texto:first-child {  transform: translateY(-100%);}
.contenedor:hover .texto:last-child {  transform: translateY(0); text-decoration: underline;}

.contenedor2 { position: relative;overflow: hidden;width:127px; text-decoration: none;}
.texto2 {  font-size: 16px; line-height: 130%;  font-family: "Inter", sans-serif; color: #ffffff;  text-align: center;  cursor: pointer;  transform: translateY(0);  transition: transform 0.3s;}
.texto2:last-child {  transform: translateY(100%);  position: absolute;  top: 0;}
.contenedor2:hover .texto2:first-child {  transform: translateY(-100%);}
.contenedor2:hover .texto2:last-child {  transform: translateY(0); text-decoration: underline;}

.contenedor3 { position: relative;overflow: hidden;width:77px; text-decoration: none;}
.texto3 {  font-size: 16px; line-height: 130%;  font-family: "Inter", sans-serif; color: #ffffff;  text-align: center;  cursor: pointer;  transform: translateY(0);  transition: transform 0.3s;}
.texto3:last-child {  transform: translateY(100%);  position: absolute;  top: 0;}
.contenedor3:hover .texto3:first-child {  transform: translateY(-100%);}
.contenedor3:hover .texto3:last-child {  transform: translateY(0); text-decoration: underline;}

#logohome{ width: 155px; height: 67px; position: absolute; left: 50%; margin-left: -77px; top: 30px; z-index: 999;}


#lap{ display: inline-block; width:100%; height:100%; text-align:center;margin: 0px; padding: 0px; outline: 0;background-color:#000000; }


.texto4{font-family: "Inter", sans-serif;color:#ffffff; font-size:18px; line-height: 150%; font-weight:300; text-decoration:none;font-optical-sizing: auto;}
.texto5{font-family: "Inter", sans-serif;color:#ffffff; font-size:18px; line-height: 150%;  font-weight:700; text-decoration:none;font-optical-sizing: auto;}
.texto6{font-family: "Inter", sans-serif;color:#ffffff; font-size:18px; line-height: 150%;  font-weight:700; text-decoration:none;font-optical-sizing: auto; text-transform: uppercase;}
.texto7{font-family: 'helvetica';color:#ffffff; font-size:75px; line-height: 100%; text-decoration:none;font-optical-sizing: auto; text-transform: uppercase;}
.texto8{font-family: "Inter", sans-serif;color:#ffffff; font-size:15px; line-height: 150%;  font-weight:500; text-decoration:none;font-optical-sizing: auto; text-transform: uppercase;}
.texto9{font-family: 'helvetica';color:#ffffff; font-size:50px; line-height: 90%; text-decoration:none;font-optical-sizing: auto; }
.texto10{font-family: 'helvetica';color:#ffffff; font-size:90px; line-height: 90%; text-decoration:none;font-optical-sizing: auto; }
.texto11{font-family: "Inter", sans-serif;color:#ffffff; font-size:15px; line-height: 250%;  font-weight:500; text-decoration:underline;font-optical-sizing: auto; text-transform: uppercase;}

#arriba, #arriba1,#arriba2,#arriba3{display:inline-block;vertical-align:top;}
#arriba{ width:90%;  vertical-align:middle; text-align:center; left:5%; top:50px; position:fixed; z-index:9999;}
#arriba1{width:50%;margin-left:-4px; text-align:left;   }
#arriba2{width:50%;margin-left:-4px;text-align:right; }
#arriba3{ display: none;}

.boton{text-align:center; padding-left:20px; padding-right: 20px; padding-top: 12px; padding-bottom: 12px; border:0; font-size:16PX;color:#ffffff;font-weight:400; background-color:#000000;  cursor:pointer;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; text-decoration: none;}
.boton:hover{color:#000000;background-color:#ffffff;}

.subme{ width: 100%; height: 96px;}

#elvideohome {
    position: absolute; z-index:1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#about{ width: 100%; text-align: center; display: inline-block;}

#aboutus, #aboutus1,#aboutus2,#aboutus3{display:inline-block;vertical-align:top;}
#aboutus{ width:1600px;  vertical-align:middle; text-align:center; left:5%; z-index:9999;}
#aboutus1{width:530px;margin-left:-4px; text-align:left;   }
#aboutus2{width:382px;margin-left:-4px;text-align:center; }
#aboutus3{width:688px;margin-left:-4px;text-align:right; }

.textosgrales{ width:520px; text-align: left; display: inline-block;}
.lata{ height: 485px;}
.poster{ width: 343px; height: 485px;}

#contact{ width: 100%; text-align: center; display: inline-block;}


#abajo, #abajo1,#abajo2,#abajo3{display:inline-block;vertical-align:top;}
#abajo{ width:90%;  vertical-align:middle; text-align:center; left:5%; z-index:9999;}
#abajo1{width:35%;margin-left:-4px; text-align:left; margin-top: 23px;}
#abajo2{width:30%;margin-left:-4px;text-align:center; }
#abajo3{width:35%;margin-left:-4px;text-align:right; margin-top: 23px; }


.redes{opacity:1;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer;}
.redes:hover{ opacity: .5;}

.tabla{ z-index: 2; width: 90%; height: 100%; position: relative; left:5%; top: 0;}
.cannes{ width: 150px; height: 173px;}

#centro2{ width:85%; height: 716px;}

@media screen and (max-width:1730px)
 {
#centro2{ height: 700px;}
}

@media screen and (max-width:1620px)
 {
#aboutus{ width:1400px;  vertical-align:middle; text-align:center; left:5%; z-index:9999;}
#aboutus1{width:430px;margin-left:-4px; text-align:left;   }
#aboutus2{width:382px;margin-left:-4px;text-align:center; }
#aboutus3{width:588px;margin-left:-4px;text-align:right; }
}


@media screen and (max-width:1530px)
 {
#centro2{ height: 650px;}
}

@media screen and (max-width:1420px)
 {
#aboutus{ width:1200px;  vertical-align:middle; text-align:center; left:5%; z-index:9999;}
#aboutus1{width:350px;margin-left:-4px; text-align:left;   }
#aboutus2{width:382px;margin-left:-4px;text-align:center; }
#aboutus3{width:468px;margin-left:-4px;text-align:right; }

.textosgrales{ width:400px; text-align: left; display: inline-block;}
.lata{ height: 540px;}
.poster{ width: 382px; height: 540px;}
 
.texto4{font-size:15px; }
.texto7{font-size:70px; }
}

@media screen and (max-width:1330px)
 {
#centro2{ height: 600px;}
     
}

@media screen and (max-width:1220px)
 { 
#aboutus{ width:90%;  vertical-align:middle; text-align:center; left:5%; z-index:9999;}    
#aboutus1{width:100%;margin-left:0px; text-align:center;   }
#aboutus2{width:100%;margin-left:0px;text-align:center; margin-top: 20px; }
#aboutus3{width:100%;margin-left:0px;text-align:center; margin-top: 20px; }
.textosgrales{ width: 90%; max-width:520px; text-align: center;}
     
     
.lata{ height:0px;}     
.texto4{font-size:18px; }
.texto5{font-size:18px; }     
 .texto7{font-size:75px; }    
}
     
@media screen and (max-width:1200px)
 {   
#centro2{ width: 100%; height:600px;}
     
#abajo1{width:100%;margin-left:0px; text-align:center; margin-top: 23px;}
#abajo2{width:100%;margin-left:0px;text-align:center; margin-top: 10px;  }
#abajo3{width:100%;margin-left:0px;text-align:center; margin-top: 0px; }     
}
     
@media screen and (max-width:1100px)
 {
     
 
#logohome{ width: 155px; height: 67px; left: 5%; margin-left:0px; top: 30px;}
#arriba1,#arriba2{ display: none; }
#arriba3{width:100%;margin-left:0px;text-align:right; display: inline-block;}    

.texto9{ font-size:40px;}
.texto10{font-size:50px;}
 .cannes{ width: 100px; height:115px;}
}


@media screen and (max-width:1000px)
 {
 #centro2{ height:450px;}   
}



@media screen and (max-width:800px)
 {
 #centro2{ height:400px;}   
}

@media screen and (max-width:600px)
 {
 #centro2{ height:320px;}   
}



#menumovil{ display:none;}
@media screen and (max-width:1100px)
 {
    #menumovil{ z-index:9999;position: absolute;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}


.button_container {
  position: absolute;
  top: -2px;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #ffffff;
}
.button_container.active .middle {
  opacity: 0;
  background: #ffffff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #ffffff;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
	background-color:rgba(0,0,0,.70);  position: fixed;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInUp .8s ease forwards;
  -moz-animation: fadeInUp .8s ease forwards;
          animation: fadeInUp .8s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .65s;
  -moz-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .75s;
  -moz-animation-delay: .75s;
          animation-delay: .75s;
}
.overlay nav {
  position: relative;
  top: 40%; left:5%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  text-align: center;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%; width:100%;
}
.overlay ul li {
  display: inline-block;
  position: relative;
  opacity: 0;
  min-width:18%; text-align:center;
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 38px;
  opacity:1; font-family: "Inter", sans-serif;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;opacity:.8;color:#404040;
}



.slider-container {
    position: relative;
    width: 100%;
    height: 750px;
    overflow: hidden;
}

.slider {
    display: flex;
    width: 400%; /* 4 slides en total */
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 85%;
    height: 100%;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    cursor: pointer;
    font-size: 24px;
    color: white;
}

.next {
    background-color: black;
    padding: 10px;
    border-radius: 50%;
}