@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;700&family=Poppins:wght@300;700&display=swap');

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,		
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, textarea, select, button,
header, section, article, footer, aside, figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-decoration:none;
	color:inherit;
	background-color:transparent;
	}
strong {
	font-weight: bold;
	}
:focus {
	outline:0;
	}
body{
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	text-align: left;
	font-weight: normal;
	}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}
del {
	text-decoration: none;
}
html {
	font-size: 62.5%;
    height: 100%;
}
@media (max-width: 1024px) {
	html {
		font-size: 50%;
	}
}

#superWrapper {
	overflow-x:hidden;
	position: relative;
}

body {
	font-family: "Muli", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size:100%;
	line-height:1;
	color:#142828;
	height:100%;
	background: #fafcfc;
	overflow-x:hidden;
	overflow-y:scroll;
}

:focus {
	outline: 1px #00E6BE dashed;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #aaa; 
  border-radius: 50px;
  box-shadow:inset 0 0 0 1px #f1f1f1;
}
::-webkit-scrollbar-thumb:hover {
  background: #666; 
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

.section {
	padding: 8rem 0;
	position: relative;
}
@media (max-width: 959px) {
	.section {
		padding: 4rem 0;
	}
}
.section + .section:before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 90vw;
	top: 0;
	border-top: dashed 1px #aaa;
}
.page {
	font-size: 1rem;
	padding: 0 4rem;
	margin: 0 auto;
	max-width: 1200px;
}
.row {
	margin: 0 -3.5rem;
	font-size: 0;
}
.row.rtl {
	direction: rtl;
}
.row + .row {
	margin-top: 3rem;
}
.col + .clear {
	margin-top: 2rem;
}
.col,
.gap {
	font-size: 1rem;
	box-sizing: border-box;
	padding: 0 3.5rem;
	min-height: 1px;
	text-align: left;
	direction: ltr!important;
}
.col > *:last-child {
	margin-bottom: 0!important;
}
@media (min-width: 960px) {
	.col,
	.gap {
		display: inline-block;
		vertical-align: top;
	}
	.col1 {width: 8.333%;}
	.col2 {width: 16.666%;}
	.col3 {width: 25%;}
	.col4 {width: 33.333%;}
	.col5 {width: 41.666%;}
	.col6 {width: 50%;}
	.col7 {width: 58.333%;}
	.col8 {width: 66.666%;}
	.col9 {width: 75%;}
	.col10 {width: 83.333%;}
	.col11 {width: 91.666%;}
	.col12 {width: 100%;}
}
@media (max-width: 959px) {
	.row {
		margin: 0 -1.5rem;
	}
	.col {
		padding: 0 1.5rem;
	}
	.col + .col,
	.gap + .col {
		margin-top: 3rem;
	}
}
.page {
	clear:both;
}
.page:after {
	content:'';
	display:table;
	width:100%;
	clear:both;
}
a i {
	line-height: inherit!important;
}
img,
svg {
	max-width: 100%;
	height: auto;
	width: auto;
}

:root {
	--colorA: #00E6BE;
	--colorB: #28788C;
	--neutralA: #999;
	--neutralB: #333;
}

.bt {
	display: inline-block;
	line-height: 4.4rem;
	padding: 0 2.2rem;
	text-transform: uppercase;
	background: #28788C;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	border-radius: 4rem;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
	cursor: pointer;
	box-sizing: border-box;
}
.bt:hover,
.bt:focus {
	box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.2);
}
.bt.btB {
	background: none;
	padding: 0;
}
.bt.btB:hover {
	box-shadow: none;
}
.bt.btG {
	color: #28788C;
	background: #fff;
	box-shadow: inset 0 0 0 1px #28788C;
}
.bt i {
	color: #00E6BE;
	display: inline-block;
	font-size: 1.6em;
	vertical-align: bottom;
	margin:0 .5rem 0 -.5rem;
}
.bt.btG i {
	color: inherit;
}
button i,
button.bt i {
	vertical-align: middle;
}
.bt.btB i {
	margin-left: 0;
}
.btI,
.btIcon {
	width: 3.8rem;
	padding: 0;
	text-align: center;
}
.btI i,
.btIcon i {
	margin: 0;
}
.bt:hover {
	background: #08596d;
	color: #00E6BE;
}
.bt.btB:hover {
	background: no-repeat;
	color: #28788C;
}
.bt.btG:hover i {
	color: inherit;
}
.btText {
	display: inline-block;
	font-size: 1.4rem;
	color: #28788C;
	text-decoration: underline;
}
.btText + .btText {
	margin-left: 2em;
}
a i + span,
button i + span {
	display: none;
}
a i + span.tooltip,
a.hint i + span {
	display: block;
	text-indent: 0;
}
a.hint {
	display: inline-block;
	margin-right: -1.5rem;
}
a.hint i {
	font-size: 1.2rem;
	color: #aaa;
}
a {
	position: relative;
}
span.tooltip,
a.hint span {
	font-family: "Muli", Helvetica, Arial, sans-serif;
	text-transform: none;
	font-weight: normal;
	line-height: 1;
	position: absolute;
	left: 50%;
	color: #333!important;
	bottom: 100%;
	transform: translate(-50% , 50%);
	white-space: nowrap;
	padding: 1rem;
	border-radius: 3px;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	color: #333;
	background: #fff;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.1), 0 2px 10px 0 rgba(0,0,0,.1), 0 3px 15px 0 rgba(0,0,0,.1);
	opacity: 0;
	visibility: hidden;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
	text-indent: 0;
	z-index: 9999;
}
a.hint.alignToEnd span {
	left: auto;
	right: -1rem;
	transform: translateY(50%);
}
a.hint.bottomHint span,
span.tooltip.bottomTt {
	bottom: auto;
	top: 120%;
}
a.hint span {
	width: 200px;
	text-align: left;
	white-space: normal;
}
span.tooltip:after,
a.hint span:after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	top: 100%;
	border: solid .5rem transparent;
	border-top-color: #fff;
}
a.hint.bottomHint span:after,
span.tooltip.bottomTt:after {
	bottom: 100%;
	top: auto;
	border-top-color: transparent;
	border-bottom-color: #fff;
}
a.hint.alignToEnd span:after {
	left: auto;
	right: .625rem;
}
a:hover span.tooltip,
a:focus span.tooltip,
i:hover span.tooltip,
i:focus span.tooltip,
*:hover > span.tooltip,
a.hint:hover span,
a.hint:focus span {
	transition-delay: 1s;
	transform: translate(-50% , 0);
	opacity: 1;
	visibility: visible;
}
a.hint.alignToEnd:hover span,
a.hint.alignToEnd:focus span {
	transform: translateY(0%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', sans-serif;
}
h1, h2, h3, h4, h5, h6, p, li, textarea {
	line-height: 1.2em;
}

.hr {
	border-top: solid 1px #ddd;
	margin: 1.5rem 0 1.5rem;
}
.card,
.modal {
	background: #fff;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.05), 0 2px 10px 0 rgba(0,0,0,.05), 0 3px 15px 0 rgba(0,0,0,.05);
	padding: 4rem;
	border-radius: .5rem;
}
.modal {
	overflow: hidden;
}
.form .field {
	padding-bottom: 2rem;
}
.form .field.error > div  {
	font-size: 1.1rem;
	padding: 1rem;
	margin: .5rem 0;
	border:solid 1px transparent;
	text-align: left;
	border-radius: .3rem;
	border-color: #cc2929;
	background: #ffcccc;
}
.form label {
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 600;
	color: #aaa;
	margin-bottom: 1rem;
	display: block;
	position: relative;
	padding-left: 2.3rem;
	text-indent: -2.3rem;
}
.form .status {
	display: inline-block;
	margin-left: 1.5rem;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 3rem;
}
.form label * {
	text-indent: 0;
}
.form input:not([type="submit"]),
.form select,
.form textarea {
	font-size: 1.5rem;
	border: solid 1px #ccc;
	border-radius: .3rem;
	display: block;
	padding: 1rem;
	line-height: 2rem;
	width: 100%;
	box-sizing: border-box;	
}
.form input[readonly] {
	border: none;
	padding-left: 0;
	font-weight: bold;
}
.form select {
	height: 4.2rem;
}
.form label input[type="checkbox"],
.form label input[type="radio"] {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	left: 0;
	top: 0;
	opacity: 0;
}
.form label input[type="checkbox"] + i,
.form label input[type="radio"] + i {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	box-sizing: border-box;
	margin-right: .4rem;
	vertical-align: top;
	position: relative;
	top: -1.5px;
	border: solid 2px #28788C;
	border-radius: .2rem;
	color: #fff;
	font-size: 0;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
	text-align: center;
	line-height: 1.15rem;
	text-indent: 0;
}
.form label input[type="radio"] + i {
	border-radius: 2rem;
}
.form label input[type="checkbox"]:checked + i,
.form label input[type="radio"]:checked + i {
	background: #28788C;
	font-size: 1.1rem;
}
.form label input[type="checkbox"].disabled + i,
.form label input[type="radio"].disabled + i {
	color: #ccc;
	background: #ccc;
	border-color: #ccc;
	cursor: default;
}
.form label input[type="radio"]:checked + i {
	font-size: 0;
}
.form label input[type="radio"]:checked + i:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
	width: .5rem;
	height: .5rem;
	border-radius: 1rem;
	background: #28788C;
	box-shadow: 0 0 0 2px #fff;
}

#modalWrapper {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9100;
	background: rgba(40,40,40,.5);
	opacity: 0;
	visibility: hidden;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
}
#modalWrapper.visible {
	opacity: 1;
	visibility: visible;
}
#modalWrapper > .bt_modalClose {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}
.modal {
	position: absolute;
	left: 50%;
	top: 50%;
	transition: transform 50ms ease;
	transform: scale(.5) translate(-50% , -55%);
	max-width: 60rem;
	z-index: 20;
	display: none;
}
.modal .bt_modalClose {
	position: absolute;
	top: -3rem;
	right: 0;
	line-height: 3rem;
	color: #fff;
	font-size: 1.2rem;
}
#modalWrapper.visible .modal {
	transform: scale(1) translate(-50% , -51%);
}
.modal {
	padding: 0;
	min-height: 50vh;
	width: 90%;
	text-align: left;
}
.modalHeader {
	padding: 3.5rem 4rem 2rem;
	border-radius: .5rem .5rem 0 0;
	position: relative;
	border-bottom: solid 1px #eee;
}
.modalHeader h3 {
	font-size: 3rem;
	margin-bottom: .5rem;
	color: #28788C;
	font-weight: bold;
}
.modalHeader p {
	font-size: 1.4rem;
}
.modalContent {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 2rem 4rem 1rem;
	box-sizing: border-box;
	margin-bottom: 2rem;
}
.modalContent .row:last-child {
	margin-bottom: 2rem;
}
.modalContent h4 {
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: .5rem;
}
.modalContent p {
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
}
.modalFooter {
	text-align: right;
	padding: 2.25rem 4rem 3rem;
	min-height: 4.8rem;
	position: relative;
	background: #fff;
	border-radius: 0 0 .5rem .5rem;
	margin-top: -2rem;
	border-top: solid 1px rgba(0,0,0,.1);
}
.modalFooter:before {
	content: '';
	z-index: -1;
	position: absolute;
	left: 2rem;
	top: 0;
	right: 2rem;
	height: 10px;
	background: #fff;
	box-shadow: 0 0 1.5rem 0 rgba(0,0,0,.2);
}
.bt_modalBack {
	float: left;
	color: #aaa;
}
.modalAlert {
	position: absolute;
	left: 1.1rem;
	top: 2.6rem;
	right:1.1rem;
	bottom: 1.1rem;
	z-index: 100;
	background: rgba(255,255,255,.95);
	box-shadow: 0 0 1rem 0 rgba(0,0,0,.2);
	border-radius: .3rem;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
	transform: scale(.1);
	opacity: 0;
	visibility: hidden;
}
.modalAlert.visible {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}
.modalAlertContent {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
	width: 70%;
	text-align: center;
}

#header {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100;
	padding: 1.5rem 0 2rem;
	background: #fff;
	text-align: left;
	transition: top 50ms cubic-bezier(.7,0,.3,1);
}
#header:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: #f9fafb;
}
#header:before {
	content: '';
	position: absolute;
	left: 5rem;
	right: 5rem;
	bottom: 0;
	height: 5rem;
	border-radius: 3rem;
	box-shadow: 0 0 2rem 0 rgba(0,0,0,.1);
	z-index: -2;
}
#header.fixed {
	top: -4.5rem;
	padding-bottom: 1.5rem;
}
#header h1 {
	display: inline-block;
	transition: margin 50ms cubic-bezier(.7,0,.3,1);
}
#header.fixed h1 {
	margin-top: 4.75rem;
}
#header h1 a {
	display: block;
	height: 4.3rem;
}
#header h1 img {
	display: block;
	height: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
@media (min-width: 960px) {
	#header h1 {
		margin-top: 4.15rem;
	}
	#bt_menu {
		display: none;
	}
	#header nav {
		float: right;
		text-align: right;
	}
	#header nav ul li {
		display: inline-block;
		margin-left: .5rem;
	}
	#topMenu {
		color: #999;
		font-size: 1.1rem;
		margin-bottom: 1.5rem;
	}
	#header ul a:not(.bt) {
		display: block;
		line-height: 3rem;
		padding: 0 1rem;
		border-radius: 3rem;
		transition: all 150ms cubic-bezier(.7,0,.3,1);
	}
	#header ul a:not(.bt):hover {
		background: #e9e9e9;
	}
	#header ul .bt {
		margin-left: 1rem;
	}
	#topMenu .mob {
		font-weight: bold;
		text-transform: uppercase;
	}
	#topMenu .mob i {
		transform: scale(1.5);
		margin-left: .5em;
	}
	#topMenu .mob i + i {
		margin-left: 1em;
	}
	#topMenu .bt {
		line-height: 3rem;
		padding: 0 1.25rem;
		font-size: 1.1rem;
		box-shadow: 0 0 3px 1px rgba(0,0,0,.15);
	}
	#topMenu .bt i {
		margin: 0 0 0 .25em;
	}
	#menu {
		font-size: 1.5rem;
		color: #111;
		line-height: 4.4rem;
	}
}
@media (max-width: 959px) {
	#header,
	#header.fixed {
		top: -4.5rem;
		padding: 8rem 0 2.5rem;
		margin: 0;
	}
	#header.fixed h1 {
		margin: 0;
	}
	#header nav {
		float: right;
	}
	#bt_menu {
		position: absolute;
		right: 4rem;
		bottom: 2.6rem;
		font-size: 2rem;
		color: #28788C;
		line-height: 4.3rem;
	}
	#header nav ul {
		position: absolute;
		left: 0;
		top: 100%;
		right: 0;
		padding: 3rem;
		background: #fff;
		text-align: center;
		font-size: 1.8rem;
		z-index: -10;
		box-shadow: 0 .5rem 1rem 0 rgba(0,0,0,.1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-10%);
		transition: opacity 200ms ease, transform 200ms ease;
	}
	#header nav ul#topMenu {
		margin-top: 28.5rem;
		background: #fafafa;
		box-shadow: 0 .5rem 2rem .2rem rgba(0,0,0,.4);
	}
	#header nav ul li {
		padding: 1rem 0;
	}
	#header nav ul#topMenu li {
		display: inline-block;
		margin: 0 1rem;
		color: #aaa;
	}
	#header nav ul#topMenu li:nth-child(6) {
		display: none;
	}
	#header nav ul#topMenu li:last-child {
		display: block;
		margin-top: 1rem;
	} 
	#header nav ul#topMenu li i {
		margin-left: 1rem;
	}
	#header nav.opened ul {
		opacity: 1;
		visibility: visible;
		transform: translateY(0%);
	}
	#menu li:last-child {
		display: block!important;
	}
}

#main {
	padding-top: 12rem;
}
#main h2 {
	font-size: 3.8rem;
	line-height: 1em;
	letter-spacing: -.01em;
	word-spacing: -.01em;
	margin-bottom: 2.5rem;
}
#main h2 strong {
	color: #28788C;
}
#main h3 {
	font-size: 4rem;
	font-weight: bold;
	color: #ff3355;
	margin-bottom: 2.5rem;
}
@media (max-width: 959px) {
	#main h2 {
		font-size: 3.2rem;
	}
}
#main p,
#main ul {
	font-size: 2rem;
	margin-bottom: 2.5rem;
}
#main p {
	max-width: 25em;
}

#main .section .col {
	vertical-align: middle;
}

#inicio {
	position: relative;
	z-index: 5;
}
#inicio h2 {
	font-size: 6rem;
	max-width: 9em;
}
@media (max-width: 1190px) {
	#inicio h2 {
		font-size: 5rem;
	}
}
@media (max-width: 959px) {
	#inicio {
		padding-top: 1.5rem;
	}
	#inicio h2 {
		font-size: 4.5rem;
	}
}
#inicio p {
	font-size: 2.2rem;
	max-width: 16em;
}
@media (min-width: 960px) {
	#inicio svg {
		transform: scale(1.125);
		transform-origin: 75% 50%;
	}
}
#reloj-aguja2 {
	animation-name: anim__relojagujaA;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 9.8% 32.8%;
}
@keyframes anim__relojagujaA {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
#reloj-aguja1 {
	animation-name: anim__relojagujaB;
	animation-duration: 32s;
	animation-iteration-count: infinite;
	transform-origin: 9.8% 32.8%;
}
@keyframes anim__relojagujaB {
  0% { transform: rotate(0deg); }
  12.5% { transform: rotate(45deg); }
  25% { transform: rotate(90deg); }
  37.5% { transform: rotate(135deg); }
  50% { transform: rotate(180deg); }
  62.5% { transform: rotate(225deg); }
  75% { transform: rotate(270deg); }
  87.5% { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}
#nubeWrapper {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 20;
	top: 17.25rem;
	transition: opacity 30ms ease;
}
#nubeWrapper .page {
	position: relative;
}
#nubeWrapper.fixed {
	position: absolute;
}
#nube-logo {
	position: absolute;
	top: 0;
	left: 51.75%;
	width: 16%;
	transition: left 100ms ease-out, opacity 500ms ease-out;
	animation-name: anim__nubelogo;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
#nube-logo-mob {
	display: none;
}
@media (max-width: 959px) {
	#nube-logo {
		display: none;
	}
	#nube-logo-mob {
		display: block;
		top: 12rem;
		z-index: 30;
		position: fixed;
		left: 11%;
		width: 28%;
		transition: left 250ms ease, opacity 500ms ease-out;
		animation-name: anim__nubelogo;
		animation-duration: 20s;
		animation-iteration-count: infinite;
	}
}
#nubeBg1,
#nubeBg2 {
	z-index: 1;
	position: fixed;
	transition: left 200ms ease-out;
	animation-duration: 16s;
	animation-iteration-count: infinite;
}
#nubeBg1 {
	animation-name: anim__nubesBg1;
	top: 11rem;
	left: 50%;
	width: 30%;
}
#nubeBg2 {
	animation-name: anim__nubesBg2;
	animation-delay: 1s;
	top: 16rem;
	left: 75%;
	width: 16%;
}
@keyframes anim__nubelogo {
  0% { transform: translateX(0%) scale(1);}
  50% { transform: translateX(-15%) scale(1.1);}
  100% { transform: translateX(0%) scale(1);}
}
@keyframes anim__nubesBg1 {
  0% { transform: translateX(0%);}
  50% { transform: translateX(-25%);}
  100% { transform: translateX(0%);}
}
@keyframes anim__nubesBg2 {
  0% { transform: translateX(0%);}
  50% { transform: translateX(15%);}
  100% { transform: translateX(0%);}
}
#milegajo {
	animation-name: anim__logoA;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 53.2% 55.7%;
}
@keyframes anim__logoA {
  0% { transform: scale(1);}
  40% { transform: scale(1);}
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
#candado-lock {
	animation-name: anim__candado;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 0% 0%;
}
@keyframes anim__candado {
  0% { transform: translateY(0%);}
  76% { transform: translateY(0%);}
  80% { transform: translateY(-2%);}
  82% { transform: translateY(-1%);}
  88% { transform: translateY(-1%);}
  90% { transform: translateY(-2%);}
  94% { transform: translateY(0%);}
}
#flujo,
#colab-flujo {
	animation-name: anim__flujo;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
@keyframes anim__flujo {
  0% { stroke-dashoffset: 0;}
  100% { stroke-dashoffset: 1000 }
}
#nube2,
#colab-nube {
	animation-name: anim__nubesB;
	animation-duration: 12s;
	animation-iteration-count: infinite;
}
@keyframes anim__nubesB {
  0% { transform: translateX(0%);}
  50% { transform: translateX(2%);}
  100% { transform: translateX(0%);}
}

#reloj-arena {
	animation-name: anim__relojarena;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	transform-origin: 74.6% 20.8%;
}
@keyframes anim__relojarena {
  0% { transform: rotate(0deg);}
  45% { transform: rotate(0deg);}
  50% { transform: rotate(180deg);}
  95% { transform: rotate(180deg);}
  100% { transform: rotate(360deg);}
}
#arena-grupo1 {
	opacity: 0;
	animation-name: anim__grupoA;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
@keyframes anim__grupoA {
  0% { opacity: 0;}
  1% { opacity: 1;}
  50% { opacity: 1;}
  51% { opacity: 0;}
  100% { opacity: 0;}
}
#arena-arriba1 {
	transform: scale(0);
	animation-name: anim__arenaarribaA;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	transform-origin: 74.6% 20.8%;
}
@keyframes anim__arenaarribaA {
  0% { transform: scale(0);}
  1% { transform: scale(1);}
  50% { transform: scale(0);}
  100% { transform: scale(0);}
}
#arena-abajo1 {
	transform: scale(1.2);
	animation-name: anim__arenaabajoA;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	transform-origin: 74.9% 27.2%;
}
@keyframes anim__arenaabajoA {
  0% { transform: scale(1.2);}
  1% { transform: scale(0);}
  50% { transform: scale(1.2);}
  100% { transform: scale(1.2);}
}
#arena-grupo2 {
	opacity: 1;
	animation-name: anim__grupoB;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
@keyframes anim__grupoB {
  0% { opacity: 1;}
  1% { opacity: 0;}
  50% { opacity: 0;}
  51% { opacity: 1;}
  100% { opacity: 1;}
}
#arena-arriba2 {
	transform: scale(0);
	animation-name: anim__arenaarribaB;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	transform-origin: 74.6% 20.8%;
}
@keyframes anim__arenaarribaB {
  0% { transform: scale(0);}
  1% { transform: scale(1);}
  50% { transform: scale(1);}
  100% { transform: scale(0);}
}
#arena-abajo2 {
	transform: scale(1.2);
	animation-name: anim__arenaabajoB;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	transform-origin: 74.2% 14.5%;
}
@keyframes anim__arenaabajoB {
  0% { transform: scale(1.2);}
  1% { transform: scale(0);}
  50% { transform: scale(0);}
  100% { transform: scale(1.2);}
}
#huella {
	animation-name: anim__huella;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
@keyframes anim__huella {
  0% { stroke-width:8;}
  46% { stroke-width:8;}
  50% { stroke-width:16;}
  54% { stroke-width:8;}
  100% { stroke-width:8;}
}
#dialog {
	animation-name: anim__dialog;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 45.3% 37.1%;
}
@keyframes anim__dialog {
  0% { transform: scale(1);}
  48% { transform: scale(1);}
  50% { transform: scale(1.05);}
  52% { transform: scale(1);}
  100% { transform: scale(1);}
}
#celu {
	animation-name: anim__celu;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
@keyframes anim__celu {
  0% {transform: translateY(0%);}
  48% {transform: translateY(0%);}
  50% {transform: translateY(.5%);}
  52% {transform: translateY(0%);}
  100% {transform: translateY(0%);}
}
#Vector_36,
#Vector_37 {
	animation-name: anim__mano;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	transform-origin: 51.2% 52.4%;
}
@keyframes anim__mano {
  0% { transform: scaleX(1);}
  48% { transform: scaleX(1);}
  50% { transform: scaleX(.95);}
  52% { transform: scaleX(1);}
  100% { transform: scaleX(1);}
}


#colaboradores {
	position: relative;
	z-index: 30;
}
#colaboradores svg {
	max-width: 110%;
	margin-left: -5%;
}
#colaboradores .mob {
	display: inline-block;
	margin-left: 1rem;
	color: #28788C;
	font-size: 2.8rem;
	vertical-align: middle;
}
.mobP {
	padding-top: 2rem;
	border-top: solid 1px #ddd;
	color: #666;
}
#colaboradores .mob img {
	height: 4.5rem;
}
#colaboradores .mob + .mob {
	margin-left: 2rem;
}
#colaboradores h2 {
	max-width: 13em;
}

#funcionalidades,
#beneficios,
#planes,
#consultar,
#footer {
	position: relative;
	z-index: 50;
}
#funcionalidades,
#beneficios,
#planes {
	background:#fafcfc; 
}
@media (max-width: 959px) {
	#funcionalidades .col5,
	#beneficios .col5,
	#planes .col5 {
		padding: 0 6rem;
	}
}
@media (min-width: 960px) {
	#funcionalidades ul {
		font-size: 0;
	}
	#funcionalidades ul li {
		display: inline-block;
		vertical-align: top;
		width: 42.5%;
		box-sizing: border-box;
		font-size: 1rem;
	}
}
#funcionalidades ul li a {
	display: block;
	padding:0 2rem 0 6.5rem;
}
#funcionalidades ul li i {
	display: block;
	line-height: 4rem!important;
	width: 4rem;
	text-align: center;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3.5rem;
	color: #28788C;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
}
#funcionalidades ul li a:hover p {
	text-decoration: underline;
	text-decoration-color: #28788C;
}
#funcionalidades ul li a:hover i {
	background: #fff;
	box-shadow: 0 0 0 10px #fff, 0 0 15px 5px rgba(0,0,0,.2);
	border-radius: 2px;
}
#funcionalidades ul li span {
	font-size: .7em;
	text-transform: uppercase;
}
#funcionalidades ul li:nth-child(4) p {
	white-space: nowrap;
}
#funcionalidades ul li:nth-child(4) p span {
	display: block;
}
#funcionalidades ul + p {
	font-size: 1.6rem;
	max-width: 32em;
}
#funcionalidades ul + p a {
	text-decoration: underline;
	text-decoration-color: #ff3355;
}
#funcionalidades ul + p a:hover {
	color: #ff3355;
}

#beneficios ul li {
	margin-bottom: 2rem;
	position: relative;
	padding-left: 1.25em;
}
#beneficios ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	border:solid 4px #00E6BE;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
	width: .8rem;
	height: 2rem;
	border-radius: 0 0 3px 0;
}
@media (min-width: 960px) {
	#beneficios .col7 {
		transform: translateX(5%);
	}
}

#planes h3 {
	font-size: 0;
}
#planes h3 strong {
	font-size: 4rem;
	width: 40%;
	display: inline-block;
}
#planes h3 span {
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1.8rem;
	color: #aaa;
	display: inline-block;
	width: 20%;
	text-align: center;
}
#planes h3 span + span {
	color: #888;
}
#planes h3 span + span + span {
	color: #555;
}
#planes ul {
	font-size: 1.5rem;
}
#planes ul li {
	padding-bottom: .7rem;
	border-right: dashed 1px #999;
	border-bottom: dashed 1px #999;
	margin-bottom: .7rem;
	border-radius: 0 0 3rem 0;
}
#planes ul li i {
	float: right;
	width: 20%;
	text-align: center;
	color: #5f45e6;
}
@media (max-width: 959px) {
	#planes h3 strong {
		width: 46%;
	}
	#planes h3 span {
		width: 18%;
		font-size: 1.25rem;
	}
	#planes ul li {
		padding-right: 52%;
		height: 2em;
		line-height: 1;
		position: relative;
	}
	#planes ul li i {
		position: absolute;
		width: 18%;
		top: 50%;
		transform: translateY(-54%);
		right: 0;
	}
	#planes ul li i + i {
		right: 18%;
	}
	#planes ul li i + i + i {
		right: 36%;
	}
}
#planes ul + p {
	font-size: 1.4rem;
	display: inline-block;
	width: 60%;
	max-width: 100%;
}
#planes p strong {
	display: block;
}
#planes a.bt {
	float: right;
}
#partners {
	z-index: 90;
}
#partners h3 {
	font-weight: normal;
}
#partners h4 {
	color: #28788C;
	font-size: 3rem;
	margin-bottom: .5rem;
	letter-spacing: -.02em;
}
#partners p {
	max-width: 100%;
}
#partners p a {
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: #00E6BE;
}
.partnersList {
	font-size: 0;
	margin: 3rem -1rem;
}
.partnersList a {
	display: inline-block;
	vertical-align: top;
	width: 12rem;
	height: 12rem;
	border-radius: 12rem;
	overflow: hidden;
	margin: 0 1rem;
}

.banner {
	background: #fff;
	border: solid 2px #28788C;
	box-shadow: 1rem -1rem 0 0 #00E6BE;
	text-align: center;
	padding: 3rem 5rem 0;
	border-radius: 100rem;
}
#main .banner p {
	font-size: 1.6rem;
	line-height: 1.5em;
	margin-bottom: 0;
}
#main .banner .bt {
	position: relative;
	top: 2.25rem;
}
@media (max-width: 960px) {
	.banner {
		border-radius: 1rem;
	}
}

#consultar {
	background:#28788C;
	padding: 10rem 0;
	color: #fff;
	text-align: center;
}
@media (max-width: 959px) {
	#consultar {
		padding: 4rem 0;
	}
}
#consultar h4 {
	font-weight: bold;
	font-size: 3.5rem;
	margin-bottom: .5rem;
}
#consultar p {
	max-width: 24em;
	margin: 0 auto 3rem;
}

#footer {
	padding: 6rem 0;
	background: #e9e9e9;
	text-align: center;
}
#footer ul {
	display: inline-block;
}
#footer ul li {
	font-size: 1.4rem;
	color: #666;
	display: inline-block;
	margin: 0 .25rem;
}
#footer ul li a:not(.bt) {
	display: block;
	line-height: 3rem;
	padding: 0 1rem;
	border-radius: 3rem;
	transition: all 150ms cubic-bezier(.7,0,.3,1);
}
#footer ul li a:not(.bt):hover {
	background: #ddd;
}
#footer ul li a.bt i {
	margin: 0 0 0 .125em;
}
@media (max-width: 959px) {
	#footer ul {
		display: block;
		margin-bottom: 1rem;
	}
	#footer .bt {
		margin-top: 1.5rem;
	}
}
#footer img {
	margin: 5rem auto;
	display: block;
	max-width: 50%;
}
#footer p {
	font-size: 11px;
	color: #aaa;
}
#footer p a {
	text-decoration: underline;
}

.modal__funcionalidades {
	max-width: 80%;
	max-height: 80%;
}
.modal__funcionalidades .modalHeader {
	background: #eee;
	padding: 3rem 5rem;
	text-transform: uppercase;
	font-weight: bold;
	color: #aaa;
	z-index: 10;
}
.modal__funcionalidades .modalContent {
	padding: 5rem;
	max-height: 100%;
	z-index: 20;
	overflow: visible;
	padding-bottom: 4rem;
	margin-bottom: 0;
}
.modal__funcionalidades .modalContent h3 {
	font-size: 4rem;
	line-height: 3.8rem;
	margin-bottom: 2rem;
	font-weight: bold;
	color: #28788C;
}
.modal__funcionalidades .modalContent .col + .col {
	margin-top: -8rem;
	position: relative;
	z-index: 30;
}
.modal .row {
	margin: 0 -1rem;
}
.modal .col {
	padding: 0 1rem;
}

.modal__video {
	max-width: 100%;
	max-height: 100%;
	width: 70vw;
	height: 39.375vw;
	padding: 0;
	top: 50%;
	box-shadow: 0 0 3rem 1rem rgba(0,0,0,.5), 0 0 0 2px rgba(0,0,0,.9);
	border-radius: 0;
}
#modalWrapper.visible .modal.modal__video {
    transform: scale(1) translate(-50% , -50%);
}
.modal__video iframe {
	position: absolute;
	left: 0;
	top: 0;
}

.screen {
	border: solid 2px #ddd;
	border-top-width: 1.25rem;
	border-radius: 3px;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
	transition: all 150ms cubic-bezier(.7,0,.3,1);
	transform-origin: 100% 0;
	position: relative;
}
.screen:before {
	content: 'milegajo.com';
	font-size: 5px;
	text-indent: 4px;
	line-height: 8px;
	color: #aaa;
	position: absolute;
	left: 3px;
	bottom: 100%;
	width: 20%;
	background: #fafafa;
	height: 8px;
	z-index: 10;
	border-radius: 2px 2px 0 0;
}
.screen:after {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background: #fafafa;
	position: absolute;
	top: -8px;
	right: 3px;
	box-shadow: -6px 0 0 0 #fafafa, -12px 0 0 0 #fafafa;
}

#cookies {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 2rem;
	width: 90%;
	max-width: 1200px;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 1rem 2rem -.5rem rgba(0,0,0,.5);
	padding: 3rem;
	z-index: 99999;
}
#cookies p {
	margin-right: 35rem;
	font-size: 1.3rem;
	line-height: 1.2em;
}
#cookies p a {
	text-decoration: underline;
}
#cookies > a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
	font-size: 1.3rem;
	padding: 1.5rem 2rem;
	line-height: 1rem;
	height: 1rem;
	box-sizing: content-box;
}
#cookies a i {
	font-size: 1.4rem;
}
@media (max-width: 800px) {
	#cookies p {
		margin-right: 0;
		margin-bottom: 1rem;
	}
	#cookies > a {
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}

}

#privacidad {
	padding: 4rem;
	background: #fff;
	box-shadow: 0 3px 6px -2px rgba(0,0,0,.25);
	border-radius: 4px;
	max-width: 1000px;
	width: 90%;
	margin: 2rem auto;
}
#privacidad h1 {
	font-size: 3rem;
	line-height: 1.1em;
	color: #28788C;
	font-weight: bold;
	margin-bottom: 2rem;
}
#privacidad h2 {
	padding-top: 2rem;
	margin-top: 3rem;
	border-top: solid 1px #ddd;
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #28788C;
}
#privacidad h2 strong {
	display: inline-block;
	width: 2rem;
}
#privacidad p,
#privacidad h6 {
	font-size: 1.2rem;
	line-height: 1.4em;
}
#privacidad p strong {
	display: inline-block;
	min-width: 2rem;
}
#privacidad p strong span {
	display: inline-block;
	padding-left: 1rem;
	min-width: 2rem;
}
#privacidad p + p {
	margin-top: .8em;
}
#privacidad h6 {
	padding-top: 2rem;
	margin-top: 3rem;
	border-top: solid 1px #ddd;
	color: #666;
}


#cookies {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 2rem;
	width: 90%;
	max-width: 1200px;
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 1rem 2rem -.5rem rgba(0,0,0,.5);
	padding: 3rem;
	z-index: 99999;
}
#cookies p {
	margin-right: 35rem;
	font-size: 1.3rem;
	line-height: 1.2em;
}
#cookies p a {
	text-decoration: underline;
}
#cookies > a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 2rem;
	font-size: 1.3rem;
	padding: 1.5rem 2rem;
	line-height: 1rem;
	height: 1rem;
	box-sizing: content-box;
}
#cookies a i {
	font-size: 1.4rem;
}
@media (max-width: 800px) {
	#cookies p {
		margin-right: 0;
		margin-bottom: 1rem;
	}
	#cookies > a {
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}

}

#tycHeader {
	padding: 2rem 4rem;
	max-width: 1000px;
	width: 90%;
	margin: 2rem auto 0;
}
#tycHeader a {
	float: right;
	margin-top: 1rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: bold;
	color: #999;
	line-height: 3rem;
}
#tycHeader a i {
	margin-right: .5em;
}
#privacidad {
	padding: 4rem;
	background: #fff;
	box-shadow: 0 5px 10px -2px rgba(0,0,0,.5);
	border-radius: 4px;
	max-width: 1000px;
	width: 90%;
	margin: 2rem auto;
}
#privacidad h1 {
	font-size: 3rem;
	line-height: 1.1em;
	color: #28788C;
	font-weight: bold;
	margin-bottom: 2rem;
}
#privacidad h2 {
	padding-top: 2rem;
	margin-top: 3rem;
	border-top: solid 1px #ddd;
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #28788C;
}
#privacidad h2 strong {
	display: inline-block;
	width: 2rem;
}
#privacidad p,
#privacidad h6 {
	font-size: 1.2rem;
	line-height: 1.4em;
}
#privacidad p strong {
	display: inline-block;
	min-width: 2rem;
}
#privacidad p strong span {
	display: inline-block;
	padding-left: 1rem;
	min-width: 2rem;
}
#privacidad p + p {
	margin-top: .8em;
}
#privacidad h6 {
	padding-top: 2rem;
	margin-top: 3rem;
	border-top: solid 1px #ddd;
	color: #666;d
}