@charset "utf-8";
/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin:0;	padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block;} body{ line-height:1;} ol, ul{ list-style:none;} blockquote, q{ quotes: none;} blockquote:before, blockquote:after, q:before, q:after{ content:'';	content:none;} table{ border-collapse:collapse; border-spacing:0;}
/*DEV*/
#Tracer{ display:block; position:fixed; width:100%; color:#0F0; font-size:12px; z-index:5000; visibility:hidden; top: 0;}
#SH{ position:absolute; width:2px; height:100vh; background:#0F0; left:50%; margin-left:-1px; z-index:5000; visibility:hidden;}
#SV{ position:absolute; width:100vw; height:2px; background:#0F0; top:50%; margin-left:-1px; z-index:5000; visibility:hidden;}
/*FONT-FACE*/
@font-face { font-family: 'Foco-Regular'; src: url('../_font/Foco-Regular.eot?#iefix') format('embedded-opentype'),  url('../_font/Foco-Regular.woff') format('woff'), url('../_font/Foco-Regular.ttf')  format('truetype'), url('../_font/Foco-Regular.svg#Foco-Regular') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Foco-Bold'; src: url('../_font/Foco-Bold.eot?#iefix') format('embedded-opentype'),  url('../_font/Foco-Bold.woff') format('woff'), url('../_font/Foco-Bold.ttf')  format('truetype'), url('../_font/Foco-Bold.svg#Foco-Bold') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Ubuntu-Regular'; src: url('../_font/Ubuntu-Regular.eot?#iefix') format('embedded-opentype'),  url('../_font/Ubuntu-Regular.woff') format('woff'), url('../_font/Ubuntu-Regular.ttf')  format('truetype'), url('../_font/Ubuntu-Regular.svg#Ubuntu-Regular') format('svg'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Ubuntu-Bold'; src: url('../_font/Ubuntu-Bold.eot?#iefix') format('embedded-opentype'),  url('../_font/Ubuntu-Bold.woff') format('woff'), url('../_font/Ubuntu-Bold.ttf')  format('truetype'), url('../_font/Ubuntu-Bold.svg#Ubuntu-Bold') format('svg'); font-weight: normal; font-style: normal;}

/*ALL*/
body{ position:relative; width:100%; height: 100%; font-family: 'Foco-Regular'; color: #fff; font-size: 16px; background: #5f4dc4; overflow-x: hidden;}
a,a:link,a:visited,a:hover,a:active{ text-decoration:none;}

/*HEADER*/
header{ position: fixed; width: 100%; height: 20%; top: 0px;  z-index: 8;}
.Logo{ position: absolute; width: 150px; left: 6vh; top: 7vh; }
nav{ position: absolute; right: 6vh; top: 8vh; }
nav a{ position: relative; display: inline-block; font-family: 'Foco-Bold'; font-size: 18px; color: #fff; margin: 0px 1vh;}
nav a::after{ position: absolute; display: block; width: 100%; height: 2px; background: #fff; content: ""; visibility: hidden; margin-top: 4px;}
nav a:hover::after{ visibility: visible;}
#ShowMenu{ font-family: 'Foco-Bold'; font-size: 12px; position: fixed; right: 6vh; top: 2vh; cursor: pointer; visibility: hidden;}
#ShowMenu span{ position: relative; display: block; width: 100%; height: 4px; background: #fff; -webkit-border-radius:100vh; border-radius:100vh; margin: 5px 0px;}
#HeaderBack{ position: absolute; width: 100%; height: 100%; top: -100%; background: #5f4dc4;}
#HeaderBack2{ position: absolute; width: 100%; height: 100%; top: 0%; background: #5f4dc4;}

/*SUBMENU*/
#SubMenu{ position: fixed; width: 100%; height: 80%; bottom: -80%; visibility: hidden; background: #fff; text-align: center; overflow-x: hidden; overflow-y: auto; z-index: 20;}
#SubMenuClose{ position: relative; margin: 6vh auto; width: 50px; height: 50px; font-family: 'Ubuntu-Regular'; font-size: 50px; color: #5f4dc4; cursor: pointer;}
#SubMenu .Sub{ width: 100%; margin: 0 auto;}
#SubMenu .SubLi{ width: 100%; display: inline-block; vertical-align: top;}
#SubMenu .SubLi a{ font-family: 'Foco-Bold'; font-size: 44px; color:#414141;}
#SubMenu .SubLi span::after{ display: block; content: ""; width: 100%; height: 2px; background: #5f4dc4; margin: 2vh 0;}
#SubMenu .SubM{ display: none;}
#SubMenu .SubLi span{ display: none;}
#SubMenu .Sub2{ position: relative; height: auto; overflow: hidden;}
#SubMenu .Sub2Li{ position: relative; width: 20%; display: inline-block; vertical-align: top; text-align: left; text-indent:10px; margin: 0 10px;}
#SubMenu .Sub2Li a{ font-family: 'Ubuntu-Regular'; font-size: 24px; color:#5f4dc4;}
#SubMenu .Sub2Li .Sub2LiMas{ position: absolute; right: 10px; top: -10px; visibility: hidden; font-size: 40px;}
#SubMenu .Sub3{ position: relative; height: auto; overflow: hidden;}
#SubMenu .Sub3::before{ display: block; content: ""; width: 100%; height: 2px; background: #5f4dc4; margin: 2vh 0 0 0;}
#SubMenu .Sub3 a{ color: #474747; font-size: 16px; line-height: 36px;}

/*FOOTER*/
footer{ position: fixed; width: 100%; height: 6vh; bottom: 3vh; left: 4vh; font-size: 1.4vh;  color: #fff; z-index: 2;}
footer.FFixed{ position: fixed; bottom: 3h;}
footer.FRela{ position: relative; top: 10vh;}
footer a{ color: #fff;}

/*CONTACTO*/
#Contacto{ position: fixed; width: 100%; height: 80%; bottom: -80%; visibility: hidden;  background: #fff; text-align: center; overflow-x: hidden; overflow-y: auto; z-index: 20;}
#ContactoClose{ position: relative; margin: 6vh auto; width: 50px; height: 50px; font-family: 'Ubuntu-Regular'; font-size: 50px; color: #5f4dc4; cursor: pointer;}
#ContactoCnt{ position: relative; width: 32%; margin: 10vh auto; font-family: 'Ubuntu-Regular'; font-size: 4vh; color: #535353; text-align: left; }
#ContactoCnt img{ width: 50px; vertical-align: middle;}
#ContactoCnt a{ display: block; margin-bottom: 35px; color: #5f4dc4; font-family: 'Ubuntu-Bold';}
#ContactoCnt a:nth-of-type(1){ font-size: 7vh; }
#ContactoCnt a:nth-of-type(2){ font-size: 4vh; }

/*HOME*/
#Home{ position: relative; width: 100%; height: 100vh; z-index: 1; overflow: hidden;}
.Banner{ position: absolute; width: 100%; height: 100%; top: 0; left: 100%;}
.Banner:nth-of-type(1){ left: 0%;}
.Banner .BanDesk{ position: absolute; width: 100%; height: 100%; top: 0;}
.Banner .BanMobi{ position: absolute; width: 100%; height: 100%; top: 0; visibility: hidden;}
#BannersNav{ position: absolute; width: 100%; height: 20px; text-align: center; top: 90vh; z-index: 3; }
#BannersNav div{ position: relative; display: inline-block; cursor: pointer; width: 20px; height: 20px; margin: 0vh 1vh; background: #fff; -webkit-border-radius:3vh; border-radius: 3vh;}
#BannersNav div span{ position: absolute; width: 12px; height: 12px; background: #5f4dc4; top: 4px; left: 4px;  margin: 0vh; visibility: hidden;-webkit-border-radius:3vh; border-radius: 3vh;}
#BannersNav div:nth-of-type(1) span{ visibility: visible;}
#BannersVideo{ position: fixed; width: 100%; height: 100%; background: rgba(95,77,196,0.8); top: 0; left: 0; z-index: 10; visibility: hidden;}
#BannersVideo2{ position: relative; display: table-cell; width: 90vw; height: 90vh; vertical-align: middle; text-align: center; left: 5vw; top: 5vh;}
#BVClose{ position: absolute; top: 4vh; right: 4vh; cursor: pointer; font-size: 30px;}

/*PRODUCTOS*/
#Productos{ position: relative; display: block; width: 100%; min-height: 80vh; top: 20vh; text-align: center; }
#Productos .DivCell{ position: relative; display: table-cell; text-align: center; vertical-align: middle; width: 80vw; height: 60vh; font-size: 30px; left: 10vw;}
#Productos #Info{ position: relative; display: inline-block; width: 25%; max-width: 400px; vertical-align:middle; text-align:left; padding: 5vh; z-index: 3;}
#Productos #Info h1{ display: inline-block; font-family: 'Foco-Bold'; font-size: 22px;}
#Productos #Info h2{ display: inline-block; font-family: 'Foco-Bold'; font-size: 40px; color: #b9c05f; background: #fff; padding: 5px 15px; margin: 10px 0px;}
#Productos #Info p{ font-size: 16px; line-height: 26px; }
#Productos #Producto{ position: relative; display: inline-block; width:25%; max-width: 400px; min-height: 400px; height:60vh; top: 0; z-index: 2; vertical-align: middle; }
#Productos #Producto img{ position: absolute; left: 50%; }
#Productos #Iconos{ position: relative; display: inline-block; width: 30%; max-width: 450px; vertical-align: middle; padding: 5vh; z-index: 3;}
#Productos #Iconos span{ position: relative; width: 180px; display: inline-block; margin: 10px 0px;} 
#Productos #Iconos span img{ width: 100%;}

/*FAQS*/
#Faqs{ position: relative; display: block; width: 80%; max-width:700px; top: 20vh; text-align: left; margin: 0 auto; margin-bottom: 40px;}
#Faqs .TFix{ position: fixed; display: block; width: 80%; max-width:700px; background: #5f4dc4; top: 20vh; padding: 20px 0px; border-bottom: 2px solid #fff;}
#Faqs h1{ font-family: 'Foco-Bold'; font-size: 16px; margin: 10px 0px;}
#Faqs h1 span{ margin: 10px 20px 10px 0px;}
#Faqs #FaqsTemas{ position: relative; border: solid 2px #fff;}
#Faqs #FaqsTemas h2{ display: inline-block; width: 50%; font-family: 'Foco-Bold'; font-size: 50px; color:#2f2569; padding: 10px 0vh; text-align: center; cursor: pointer;}
#Faqs #FaqsTemas h2.active{ background: #fff; color: #5f4dc4;}
#Faqs article{ margin-top: 210px; }
#Faqs .LasFaqs{ border-bottom: 2px solid #fff; margin: 30px 2px 0px; padding-bottom: 10px; font-size: 18px; line-height: 28px; color:#c6c0e9; text-align: justify;}
#Faqs .Ques{ font-size: 30px; line-height: 30px; margin: 20px 0px; color:#fff; text-align: left;}
#Faqs p{ margin: 15px 0px;}
#Faqs p b{ font-family: 'Foco-Bold'; text-transform: uppercase;}

/*CORPORATIVO*/
#Corporativo{ position: relative; display: block; width: 80%; max-width:700px; top: 20vh; text-align: left; margin: 0 auto; margin-bottom:100px;}
#Corporativo h1{ display: block; font-family: 'Foco-Bold'; font-size: 60px; margin: 20px 0px; padding: 10px 0px; background: #fff; color: #5f4dc4; text-align: center;}
#Corporativo p{ position: relative; display: block; color:#c6c0e9; font-size: 20px; text-align: justify;}
#Corporativo p.Quote{ color:#fff; font-size: 25px; line-height: 27px; text-align: center;}
#Corporativo p b{ display: inline-block; font-size: 60px; line-height: 0px; vertical-align: bottom;}
#Corporativo p::before{ position: relative; display: block; width: 100%; height:2px; background: #fff; content: ""; margin: 30px 0px;}
#Corporativo p img{ display: block; width: 100%;}
#Corporativo p span{ position: relative; display: block; font-family: 'Foco-Bold'; font-size:50px; background: #fff; color: #5f4dc4; text-align: center; padding: 10px 0px;}
#Corporativo p .Titulo{ background: none; border: solid 2px #fff;  padding:0px; width: 100%; margin-bottom: 30px;}
#Corporativo p .Titulo span{ position: relative; display: inline-block; width: 50%; background:none; color: #2f2569; cursor: pointer; }
#Corporativo p .Titulo span.active{ background: #fff; color: #5f4dc4;}
#Corporativo .TxtO{ position: relative; display: block; color:#c6c0e9; font-family: 'Foco-Regular'; font-size: 20px; text-align: justify; background: none;}

/*COOKIES*/
.Cookies{
    background:rgba(255,255,255,0.9);
    position: fixed;
    width: 100vw;
    padding: 15px;
    bottom: 0;
    left: 0;
    font-size: 16px;
    color:#1b1b1b;
    visibility: hidden;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.Cookies b{ font-weight: 800; color: #5f4dc4;}
.Cookies a{ font-weight: 800; color: #5f4dc4; text-decoration: underline;}
.Cookies .Submit{ padding: 8px 10px; background: #5f4dc4; color: #fff; text-decoration: none;}
.Cookies.show{ visibility: visible;}

#Politicas{ position: relative; display: block; width: 80%; max-width:700px; top: 20vh; text-align: left; margin: 0 auto; margin-bottom:300px;}
#Politicas .TFix{ position: fixed; display: block; width: 80%; max-width:700px; background: #5f4dc4; top: 0vh; padding: 10vh 0px 10px; border-bottom: 2px solid #fff;}
#Politicas h1{ display: block; font-family: 'Foco-Bold'; font-size: 50px; margin: 10px 0px; padding: 10px 0px; background: #fff; color: #5f4dc4; text-align: center;}
#Politicas p{ margin: 15px 0; }
#Politicas article{ margin: 20px 0px 350px; }
#Politicas h2{ font-size: 20px; margin: 15px 0; }
#Politicas ul{ list-style: disc; list-style-position: outside; margin-left: 18px; }
#Politicas li{ margin: 5px 0; }
#Politicas a{ color: #fff; text-decoration: underline; font-weight: 800;}

/*RESPONSIVE*/
@media (max-width: 1400px){
	#Productos #Iconos span{ width: 150px; }
}
@media (max-width: 1100px){
	#Productos #Iconos span{ width: 120px; }
}
@media (max-width: 900px){
	/*HEADER*/
	header{ height: 10%; background: #5f4dc4;}
	.Logo{ top: 2.5vh; }
	nav{ visibility: hidden;}
	#ShowMenu{ visibility: visible;}
	#HeaderBack{ top: 0%;}
	
	/*SUBMENU*/
	#SubMenu{ height: 90%;}
	#SubMenu .Sub{ width: 80%;}
	#SubMenu .SubLi{ width: 100%;}
	#SubMenu .SubM{ display:inline-block;}
	#SubMenu .SubLi span{ display: block;}
	#SubMenu .Sub2{ display: none;}
	#SubMenu .Sub2Li{ width: 100%; margin: 0 0px;}
	#SubMenu .Sub2Li::after{ display: block; content: ""; width: 100%; height: 2px; background: #5f4dc4; margin: 1vh 0 2vh 0;}
	#SubMenu .Sub2Li .Sub2LiMas{ visibility: visible;}
	#SubMenu .Sub3{ display: none; }
	
	/*FOOTER*/
	footer{ position: relative;}

	/*CONTACTO*/
	#Contacto{ height: 90%;}
	#ContactoCnt{ width: 85%;}
	
	/*HOME*/
	#Home{ height: 90vh; top: 10vh;}
	.Banner .BanDesk{ visibility: hidden;}
	.Banner .BanMobi{ visibility: visible;}
	
	/*PRODUCTOS*/
	#Productos{ top: 10vh; margin-bottom: 120px;}
	#Productos #Info{ width: 80%;}
	#Productos #Producto{ width: 100%; max-width: 900px; margin: 30px 0px;}
	#Productos #Iconos{ width: 80%; max-width: 600px; }
	#Productos #Iconos span{ width: 250px;}
	
	/*FAQS*/
	#Faqs{ top: 10vh; }
	#Faqs .TFix{  top: 10vh;}
	#Faqs .LasFaqs{ font-size: 16px; line-height: 26px;}
	#Faqs .Ques{ font-size: 30px; line-height: 30px; }
	
	/*CORPORATIVO*/
	#Corporativo{ top: 10vh;}
	#Corporativo p{ font-size: 20px;}
	#Corporativo p.Quote{ font-size: 26px; line-height: 29px;}
	#Corporativo p b{ font-size: 60px;}
	#Corporativo p span{ font-size: 40px;}
	#Corporativo .TxtO{ font-size: 20px;}

	/*COOKIES*/
    #Politicas article{ margin: 100px 0px; }

}
@media (max-width: 850px){
	#Faqs #FaqsTemas h2{ font-size: 40px;}
	#Faqs article{ margin-top: 190px; }
	
	#Corporativo h1{ font-size: 60px;}

}
@media (max-width: 550px){
	#Faqs #FaqsTemas h2{ font-size: 20px;}
	#Faqs article{ margin-top: 170px; }
	
	#Corporativo h1{ font-size: 30px;}
	#Corporativo p{ font-size: 16px;}
	#Corporativo p.Quote{ font-size: 20px; line-height: 23px;}
	#Corporativo p b{ font-size: 50px;}
	#Corporativo p span{ font-size: 30px;}
	#Corporativo .TxtO{ font-size: 16px;}
	
	
}
@media (orientation:landscape){
	.Banner .BanDesk{ visibility: visible;}
	.Banner .BanMobi{ visibility: hidden;}
}