html{
	font-size: 62.5%;
	font-family: 'Rubik', sans-serif;
	word-spacing: normal;
	text-align: left;
	letter-spacing: 0;
	line-height: 1.6;
	color: #222;
}

body {
	background: #fff;
	overflow: hidden;
	font-size: 1.6rem;
}

a { color: #4f4f4f; }
a:hover { color: #222; }

.container {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 100px 0;

	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

header {
	width: 100%;
}

.logo {
	width: 300px;
	margin: 50px auto 25px;
	text-align: center;
}

.logo img{
	width: 100%;
}

nav {
	margin: 0;
	padding: 0;
}

nav ul{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
}

section {
	width: 100%;
	padding: 25px;
	margin: 0;
}

.formapps {
	width: 100%;
	margin: 0 auto;
}

.formapps .title {
	font-size: 180%;
	font-weight: bold;
}

.formapps input {
	width: 100%;
	margin: 0 auto 25px;
	padding: 13px 15px;
	
	background: #fff;
	border-radius: 10px;
	border: 1px solid #f0f0f0;
	
	font-size: 120%;
}
	
.formapps button.click, .formapps button.reset {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 13px 15px;
	
	
	background: #eaeaea;
	border-radius: 10px;
	border: 1px solid #f0f0f0;

	font-size: 100%;
	font-weight: bold;

	cursor: pointer;
	transition: all 1s;
}

.formapps button.click:hover {
	background: #cacaca;
}

.loader {
  width: 24px;
  height: 24px;
  border: 5px solid #222;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  animation: pulse 1s linear infinite;
}
.loader:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 5px solid #222;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: scaleUp 1s linear infinite;
}

@keyframes scaleUp {
  0% { transform: translate(-50%, -50%) scale(0) }
  60% , 100% { transform: translate(-50%, -50%)  scale(1)}
}
@keyframes pulse {
  0% , 60% , 100%{ transform:  scale(1) }
  80% { transform:  scale(1.2)}
}
    

.fade-in {
	animation: fadeInAnimation ease .3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.fade-out {
	animation: fadeOutAnimation ease .3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.hide {
	display: none;
}

@keyframes fadeInAnimation {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeOutAnimation {0% {opacity: 1;}100% {opacity: 0;}}

#nombo { text-align: center;}

.phone {
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' fill='%23aeaeae' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 469.333 469.333' style='enable-background:new 0 0 469.333 469.333;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M362.667,85.333c23.573,0,42.667-19.093,42.667-42.667C405.333,19.093,386.24,0,362.667,0 C339.093,0,320,19.093,320,42.667C320,66.24,339.093,85.333,362.667,85.333z'/%3E%3Cpath d='M106.667,128C83.093,128,64,147.093,64,170.667s19.093,42.667,42.667,42.667c23.573,0,42.667-19.093,42.667-42.667 S130.24,128,106.667,128z'/%3E%3Cpath d='M106.667,0C83.093,0,64,19.093,64,42.667c0,23.573,19.093,42.667,42.667,42.667c23.573,0,42.667-19.093,42.667-42.667 C149.333,19.093,130.24,0,106.667,0z'/%3E%3Cpath d='M106.667,256C83.093,256,64,275.093,64,298.667c0,23.573,19.093,42.667,42.667,42.667 c23.573,0,42.667-19.093,42.667-42.667C149.333,275.093,130.24,256,106.667,256z'/%3E%3Cpath d='M234.667,384C211.093,384,192,403.093,192,426.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C277.333,403.093,258.24,384,234.667,384z'/%3E%3Cpath d='M362.667,128C339.093,128,320,147.093,320,170.667s19.093,42.667,42.667,42.667c23.573,0,42.667-19.093,42.667-42.667 S386.24,128,362.667,128z'/%3E%3Cpath d='M234.667,256C211.093,256,192,275.093,192,298.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C277.333,275.093,258.24,256,234.667,256z'/%3E%3Cpath d='M362.667,256C339.093,256,320,275.093,320,298.667c0,23.573,19.093,42.667,42.667,42.667 c23.573,0,42.667-19.093,42.667-42.667C405.333,275.093,386.24,256,362.667,256z'/%3E%3Cpath d='M234.667,128C211.093,128,192,147.093,192,170.667s19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 S258.24,128,234.667,128z'/%3E%3Cpath d='M234.667,0C211.093,0,192,19.093,192,42.667c0,23.573,19.093,42.667,42.667,42.667s42.667-19.093,42.667-42.667 C277.333,19.093,258.24,0,234.667,0z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") !important;
	background-position: 13px 13px !important;
	background-size: auto 50% !important;
	background-repeat: no-repeat !important;
	
	padding-left: 50px !important;
}

.wasaplink {
	display:inline-block;
	margin: 0 auto;
	padding: 13px 15px;
	
	background: #eaeaea;
	border-radius: 10px;
	border: 1px solid #f0f0f0;

	transition: all .3s;
	cursor: not-allowed;
}
	
.activate { 
	background: #51c85d;
	color: #fff;
	cursor: pointer;
}