@font-face {
  font-family: Fuente;
  /*src: url(https://fonts.gstatic.com/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2);*/
  src: url(/css/Poppins-Regular.woff2);
  }

*{
box-sizing: border-box;
/*-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;*/
-webkit-tap-highlight-color: transparent;
}
body{
position: relative;
font-size: 14px;
font-family: Fuente, sans-serif;
text-rendering: geometricPrecision;
transition: all ease-in-out .2s;
min-height: 100vh;
background-color: white;
}
a{text-decoration: none;}
select:focus{ outline: none;}
.menu{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #FFD102;
z-index: 11;
display: none;
box-shadow: 0px 8px 20px -10px rgba(0,0,0,.1);
}
.menu .button{
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
width: 30px;
height: 16px;
cursor: pointer;
}
.menu .button div{
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #272938;
transition: all ease-in-out .2s;
}
.menu .button div:nth-child(1){top: 0;}
.menu .button div:nth-child(2){top: 50%; transform: translateY(-50%);}
.menu .button div:nth-child(3){bottom: 0;}
.menu .button.active div:nth-child(1){top:50%; transform: rotate(-45deg) translateY(-50%);}
.menu .button.active div:nth-child(2){top:50%; transform: rotate(-45deg) translateY(-50%); opacity:0;}
.menu .button.active div:nth-child(3){top:50%; transform: rotate(45deg) translateY(-50%);}
/* Color menu---------------------------------------- */
nav{
position: fixed;
left: 0;
top: 0;
width: 120px;
height: 100%;
z-index: 10;
background-color: #FFD102;
}
nav ul{

width: 100%;
}
nav ul li:first-child{padding-top: 50px;}
nav ul li{
position: relative;
display: block;
width: 100%;
padding: 30px 0;
cursor: pointer;
transition: all ease-in-out .2s;
}
nav ul li:hover{background-color: rgba(0,0,0,.08);}
nav ul li:last-child{margin-bottom: 0;}
nav ul li .img{
position: relative;
display: block;
height: 25px;
width: 25px;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
transition: all ease-in-out .2s;

}




nav ul li.video .img{background-image: url("/img/icon/play2.png");}
nav ul li.active.video .img{background-image: url("../img/icon/play2.png");}

nav ul li.description .img{background-image: url("../img/icon/cuadrante.png");}
nav ul li.active.description .img{background-image: url("../img/icon/cuadrante.png");}



nav ul li p{
position: relative;
display: block;
text-align: center;
margin-top: 8px;
color: black;
transition: all ease-in-out .2s;
}
nav ul li.active p{color: black;}
.main-container{
position: relative;
width: calc(100% - 120px);
margin-left: 120px;
}
nav .language{
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
color: white;
}
nav .language p span{cursor: pointer;}
nav .language p span.active{
font-weight: 700;
color: #ffcc32;
pointer-events: none;
}
header{
position: relative;
width: 100%;
padding-bottom: 50px;
}

header .top{
position: relative;
width: 100%;
height: auto;
}

header .top img{
position: relative;
max-width: 270px;
margin-left: 0%;
padding: 50px 0px;
transform: translateX(-50%);
}

header .video-wrap{
position: relative;
width: 100%;
height: auto;
}
header .video-main{
position: relative;
width: 90%;
height: auto;
margin: 0 auto;
max-width: 1100px;
}
header .video-main .h-main{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background-color: transparent;
}
header .video-container .idi{
position: absolute;
margin: 20px 10px;
display: inline-block;
background-color: transparent;
overflow: hidden;
border: solid 2px #272938;
cursor: pointer;
height: 40px;
width: auto;
overflow: hidden;
transition: all ease-in-out .2s;
}
header .video-container .idi.active{
height: 76px;
}
header .video-container .idi::before{
content:"";
position: absolute;
right: 10px;
top: calc(50% - 2px);
width: 0;
height: 0;
border-left: 10px solid #272938;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
transform: rotate(90deg) translateX(-50%);
transition: all ease-in-out .2s;
}
header .video-container .idi.active::before{
right: -20px;
}
header .video-container .idi::after{
content:"";
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
header .video-container .idi.active::after{
display: none;
}
header .video-container .idi p{
position: relative;
font-size: 1.2em;
padding: 10px 50px 10px 20px;
transition: all ease-in-out .2s;
color: #272938;
}
header .video-container .idi.en p:first-child{margin-top: -36px;}
header .video-container .idi.en.active p{margin-top: 0px;}
header .video-container .idi.active p:hover{
background-color: white;
}
header .video-container{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
margin: 0;
width: 90%;
max-width: 1100px;
height: auto;
box-shadow: 0px 20px 0px -20px rgba(0,0,0,.4);
z-index: 8;
}
header .video-container.previa{
position: fixed;
bottom: 20px;
right: 20px;
top: inherit;
left: inherit;
transform: translateX(150%);
width: 90%;
max-width: 350px;
height: auto;
opacity: 0;
}
header .video-container.small{
position: fixed;
bottom: 20px;
right: 20px;
top: inherit;
left: inherit;
transform: translateX(0);
width: 90%;
max-width: 350px;
height: auto;
opacity: 1;
transition-property: transform,opacity;
transition-duration: .4s;
transition-timing-function: cubic-bezier(0, 0, 0.2, 0.99);
}
header .video-container .go-up{
position: absolute;
top: -20px;
right: 40px;
width: 40px;
height: 40px;
background-color: white;
border-radius: 100%;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: 40%;
background-image: url("../img/icon/arrow_up.png");
box-shadow: 2px 9px 50px 0px rgba(0,0,0,.4);
z-index: 8;
cursor: pointer;
display: none;
opacity: 0;
transition: all ease-in-out .3s;
}
header .video-container .go-up.on{
right: 20px;
opacity: 1;
}
header .video-container .iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 10px;
box-shadow: 0px 30px 13px -25px rgba(0,0,0,.2);
background-color: transparent;
}
header .video-container .iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
section{
padding: 80px 0;
}
#description{
padding-top: 175px;
font-family: sans-serif;
text-rendering: geometricPrecision;
}
section h3{
font-family: 'Fuente', sans-serif;
text-rendering: geometricPrecision;
position: relative;
text-align: center;
color: black;
font-size: 2em;
padding-top: 20px;
}
/* Color de la linea---------------------------------------- */
section h3::before{
content: "";
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background-color: #000000;
}
section .wrap{
position: relative;
width: 90%;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 80px;
height: auto;
display: flex;
}
section .wrap .file{
position: relative;
flex: 1;
margin: 0 20px;
background-color: white;
border-radius: 20px;
cursor: pointer;
transition: all cubic-bezier(0, 0, 0.2, 0.99) .2s;
box-shadow: 0px 20px 20px -20px rgba(0,0,0,.07)
}
/* color botón descarga---------------------------------------- */
section .wrap .file:hover{
background-color: #272938;
transform: scale(1.05);
}
section .wrap .file a{
text-decoration: none;
position: relative;
width: 100%;
height: 100%;
}
section .wrap .file a .container{padding: 40px 20px;}
section .wrap .file img{
position: relative;
margin-left: 50%;
transform: translateX(-50%);
margin-bottom: 20px;
width: 90%;
max-width: 50px;
height: auto;
transition: all cubic-bezier(0, 0, 0.2, 0.99) .2s;
}
section .wrap .file:hover img{filter: brightness(0) invert(1);}
section .wrap .file p{
text-align: center;
font-size: 1.2em;
color: #696287;
transition: all cubic-bezier(0, 0, 0.2, 0.99) .2s;
}
section .wrap .file:hover p{color: white;}
section#description{
background-color: white;
}
section .wrap{
display: block;
text-align: center;
margin-top: 20px;
}

section#top .wrap{
padding: 0px;
margin-top: -50px;
margin-bottom: -70px;
}

section#download{
position: absolute;
}

section#description .wrap h4{
font-size: 2em;
font-weight: 700;
margin-bottom: 10px;
margin-top: 0px;
color: #696287;
}
section .wrap img{
max-width: 300px;
margin-bottom: 20px;
}
section#description .wrap li{
font-size: 1.4em;
position: relative;
margin-top: 5px;
color: black;
}






section#description .wrap li:first-child{margin-top: 0;}
section#description .wrap li:last-child{margin-top: 30px;}
section#description .wrap li span::after{content: ":";}
section#description .wrap li span{font-weight: 700;}
section#description .wrap li a{
position: relative;
font-family: 'Fuente', sans-serif;
text-rendering: geometricPrecision;
background-color: #FFD102;
border: 0;
color: black;
font-size: .8em;
font-weight: 600;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
transition: all ease-in-out .2s;
box-shadow: 0px 20px 20px 0px rgba(0,0,0,.07);
}
section#description .wrap li a:hover{
background-color: #000000;
color: white;
}
section#legal .wrap{
display: block;
max-width: 900px;
background-color: white;
border-radius: 20px;
box-shadow: 0px 20px 20px -20px rgba(0,0,0,.07);
padding: 50px;
margin-top: 0;
}
section#legal .wrap h4{
font-size: 2em;
color: #696287;
margin-bottom: 20px;
font-weight: 700;
}
section#legal .wrap p{
font-size: 1.2em;
color: #696287;
margin-bottom: 15px;
line-height: 1.1;
}
section#legal .wrap p:last-child{margin-bottom: 0;}
section#legal .wrap p.copyright{
font-size: .9em;
color: #696287;
}
section#contact{
padding-top: 40px;
}
section#contact h3{
margin-bottom: 50px;
}
section#contact .wrap{
display: block;
max-width: 900px;
background-color: white;
border-radius: 20px;
box-shadow: 0px 20px 20px -20px rgba(0,0,0,.07);
padding: 50px;
margin-top: 0;
}
section#contact .wrap .iframe-container{
position: relative;
width: 100%;
max-height: 850px;
overflow: hidden;
}
section#contact .wrap .iframe-container iframe{
position: relative;
width: 100%;
}
footer{
position: relative;
height: auto;
width: calc(100% - 120px);
margin-left: 120px;
background-color: #131419;
padding: 20px 0 12px 0;
}
footer .edt{
position: relative;
width: 100px;
height: auto;
margin-left: 50%;
transform: translateX(-50%);
}
footer .edt img{width: 100%;}
.legal-w{
width: 100%;
height: auto;
background-color: #eae8f1;
padding: 40px;
}
.legal-w p{
font-size: 1em;
width: 100%;
height: auto;
max-width: 1000px;
margin: 0 auto;
text-align: center;
color: #696287;
}

.list {
list-style-type: none;

padding-bottom: 0.7rem;
}


.wrap2{
max-width: 20%;
margin: 40px;
}

@media (max-width:1030px){
/*section#download .wrap{
display: block;
overflow: hidden;
}
section#download .wrap .file{
float: left;
width: calc(50% - 40px);
margin-bottom: 40px;
}*/
section#contact{
padding-top: 0px;
}
#description{
padding-top: 80px;
}
}


@media (max-width:800px){
section#contact .wrap .iframe-container{max-height: 950px;}
/*#description{
padding-top: 140px;
}*/
.wrap2{
max-width: 30%;
margin: 20px;
}
#description{
padding-top: 50px;

}
}
@media (max-width:685px){
/*section#download{padding-top: 60px;}
section#download .wrap{
width: calc(100% - 100px);
margin: 0 auto;
transform: translateX(0);
margin-top: 50px;
}
section#download .wrap .file{
float: none;
width: 100%;
margin: 0;
margin-bottom: 40px;
}
section#download .wrap .file:last-child{margin-bottom: 0;}*/
section#legal{padding-top: 20px; padding-bottom: 20px;}
section#legal .wrap{
background-color: transparent;
box-shadow: none;
border-radius: 0;
width: 100%;
}
section#contact{
background-color: white;
padding-top: 50px;
}
section#contact h3{
margin-bottom: 0px;
}
section#contact .wrap{
background-color: transparent;
box-shadow: none;
border-radius: 0;
padding: 0;
}
}


@media (max-width:575px){


body.menu-active{overflow: hidden;}
.menu{display: block;}
nav{
transform: translateX(-100%);
transition: all ease-in-out .3s;
top: 60px;
width: 120px;
}
nav.mobile-nav{transform: translateX(0);}
.main-container{width: 100%; margin: 0; transition: all ease-in-out .3s;}
.main-container.mobile-main{transform: translateX(120px);}
/*section#download .wrap {
width: calc(100% - 50px);
margin: 0 auto;
transform: translateX(0);
margin-top: 50px;
}/*
section#download .wrap .file{
float: left;
width: calc(50% - 20px);
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}*/
section#description .wrap h4 {
font-size: 1.5em;
}
section#description .wrap li {
font-size: 1.1em;
}

.menu{
display: none;
  }
  
.line {
display: block;
height: 10px;
background-color: #FFD102;
width: 100%;
}

.top img{max-width: 20%;}

section .wrap .file p{font-size: 1em;}
section .wrap .file img{max-width: 35px;}
section .wrap .file a .container{padding: 20px 10px}
header .video-container.small {
position: fixed;
bottom: 20px;
right: -360px;
top: inherit;
left: inherit;
transform: translate(0);
width: 90%;
max-width: 280px;
height: auto;
z-index: 9;
}
header .video-container.small.effect {
right: 20px;
}
footer{
width: 100%;
margin-left: 0;
}
}
.loader-wrap{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #272938;
z-index: 7;
display: none;
}
.loader{
position: absolute;
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
left: 50%;
transform: translate(-50%);
}
.lds-spinner {
color: official;
display: inline-block;
position: relative;
width: 30px;
height: 30px;
}
.lds-spinner div {
transform-origin: 20px 20px;
animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
content: " ";
display: block;
position: absolute;
top: 3px;
left: 20px;
width: 2px;
height: 10px;
border-radius: 20%;
background: #fff;
}
.lds-spinner div:nth-child(1) {
transform: rotate(0deg);
animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
transform: rotate(30deg);
animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
transform: rotate(60deg);
animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
transform: rotate(90deg);
animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
transform: rotate(120deg);
animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
transform: rotate(150deg);
animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
transform: rotate(180deg);
animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
transform: rotate(210deg);
animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
transform: rotate(240deg);
animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
transform: rotate(270deg);
animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
transform: rotate(300deg);
animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
transform: rotate(330deg);
animation-delay: 0s;
}
@keyframes lds-spinner {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}