/* Box colors */

.bg-2 {
	background: #7986cb;
	color: #ECEFF1;
}


/* Common button styles */
.button {
	float: left;
	min-width: 40px;
	max-width: 40px;
	display: block;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	font-size:20px;
	cursor:pointer
}
.button:focus {
	outline: none;
}
.button > span {
	vertical-align: middle;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */

.bg-2 .button {
	color: #ECEFF1;
	border-color: #ECEFF1;
}


/* Sizes */
.button--size-s {
	font-size: 14px;
}
.button--size-m {
	font-size: 16px;
}
.button--size-l {
	font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}
.button--text-thin {
	font-weight: 300;
}
.button--text-medium {
	font-weight: 500;
}
.button--text-thick {
	font-weight: 600;
}
.button--round-s {
	border-radius: 5px;
}
.button--round-m {
	border-radius: 15px;
}
.button--round-l {
	border-radius: 40px;
}

/* Borders */
.button--border-thin {
	border: 1px solid;
}
.button--border-medium {
	border: 2px solid;
}
.button--border-thick {
	border: 3px solid;
}

/* Individual button styles */

/* Sacnite */
.button.button--sacnite {
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 0;
	color: #fff;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.button--scanite.button--round-l {
	border-radius: 50%;
}
.button--sacnite.button--inverted {
	color: #37474f;
}
.button--sacnite::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 35px #3EB9C1;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.button--sacnite.button--inverted::before {
	box-shadow: inset 0 0 0 35px #fff;
}
.button--sacnite .button__icon {
	font-size: 22px;
	width: 22px;
}
.button--sacnite > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.button--sacnite:hover {
	color: #fff;
}
.button--sacnite.button--inverted:hover {
	color: #fff;
}
.button--sacnite:hover::before {
	box-shadow: inset 0 0 0 2px #fff;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.button--sacnite.button--inverted:hover::before {
	box-shadow: inset 0 0 0 2px #fff;
}


/* SERVICIOS */

/* Common button styles */
.button2 {
	min-width: 100px;
	max-width: 100px;
	display: block;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	font-size:40px;
	cursor:pointer;
	margin:auto
	
}
.button2:focus {
	outline: none;
}
.button2 > span {
	vertical-align: middle;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */

.bg-2 .button2 {
	color: #ECEFF1;
	border-color: #ECEFF1;
}

/* Typography and Roundedness */

.button2--round-l {
	border-radius: 100px;
}


/* Individual button2 styles */

/* Sacnite */
.button2.button2--sacnite {
	width: 100px;
	height: 100px;
	min-width: 0;
	padding: 0;
	color: #fff;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.button2--scanite.button2--round-l {
	border-radius: 50%;
}
.button2--sacnite.button2--inverted {
	color: #37474f;
}
.button2--sacnite::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 65px #3EB9C1;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.button2--sacnite.button2--inverted::before {
	box-shadow: inset 0 0 0 35px #fff;
}
.button2--sacnite .button2__icon {
	font-size: 22px;
	width: 22px;
}
.button2--sacnite > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.button2--sacnite:hover {
	color: #fff;
}
.button2--sacnite.button2--inverted:hover {
	color: #fff;
}
.button2--sacnite:hover::before {
	box-shadow: inset 0 0 0 2px #fff;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.button2--sacnite.button2--inverted:hover::before {
	box-shadow: inset 0 0 0 2px #fff;
}



/* Common button styles */
.button3 {
	float: right;
	min-width: 150px;
	max-width: 250px;
	display: block;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	cursor:pointer;
	border:1px solid #4996b0;
	font-size:12px;
	text-align:12px;
	margin:-80px 0 0 0
}
.button3:focus {
	outline: none;
}
.button3 > span {
	vertical-align: middle;
}



/* Typography and Roundedness */

.button3--round-l {
	border-radius: 20px;
}



/* Nina */

.button3--nina {
	padding: 0 2em;
	background: trasparent;
	color: #fff;
	overflow: hidden;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.button3--nina.button3--inverted {
	background: trasparent;
	color: #0EC8CB;
}
.button3--nina > span {
	display: inline-block;
	padding: 1em 0;
	opacity: 0;
	color: #fff;
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button3--nina::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button3--nina:hover {
	background-color: #0EC8CB;

}
.button3--nina:hover::before {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button3--nina:hover > span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button3--nina:hover > span:nth-child(1) {
	-webkit-transition-delay: 0.045s;
	transition-delay: 0.045s;
}
.button3--nina:hover > span:nth-child(2) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}
.button3--nina:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.button3--nina:hover > span:nth-child(4) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}
.button3--nina:hover > span:nth-child(5) {
	-webkit-transition-delay: 0.225s;
	transition-delay: 0.225s;
}
.button3--nina:hover > span:nth-child(6) {
	-webkit-transition-delay: 0.27s;
	transition-delay: 0.27s;
}
.button3--nina:hover > span:nth-child(7) {
	-webkit-transition-delay: 0.315s;
	transition-delay: 0.315s;
}
.button3--nina:hover > span:nth-child(8) {
	-webkit-transition-delay: 0.36s;
	transition-delay: 0.36s;
}
.button3--nina:hover > span:nth-child(9) {
	-webkit-transition-delay: 0.405s;
	transition-delay: 0.405s;
}
.button3--nina:hover > span:nth-child(10) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

.button3--nina:hover > span:nth-child(11) {
	-webkit-transition-delay: 0.495s;
	transition-delay: 0.495s;
}

.button3--nina:hover > span:nth-child(12) {
	-webkit-transition-delay: 0.54s;
	transition-delay: 0.54s;
}

.button3--nina:hover > span:nth-child(13) {
	-webkit-transition-delay: 0.585s;
	transition-delay: 0.585s;
}

.button3--nina:hover > span:nth-child(14) {
	-webkit-transition-delay: 0.63s;
	transition-delay: 0.63s;
}

.button3--nina:hover > span:nth-child(15) {
	-webkit-transition-delay: 0.675s;
	transition-delay: 0.675s;
}

.button3--nina:hover > span:nth-child(16) {
	-webkit-transition-delay: 0.72s;
	transition-delay: 0.72s;
}

.button3--nina:hover > span:nth-child(17) {
	-webkit-transition-delay: 0.765s;
	transition-delay: 0.765s;
}

.button3--nina:hover > span:nth-child(18) {
	-webkit-transition-delay: 0.81s;
	transition-delay: 0.81s;
}


/* Nina2 */


/* Common button styles */
.button4 {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 2em 0;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	cursor:pointer;
	border:1px solid #db5252;
	font-size:12px;
	text-align:12px
}
.button4:focus {
	outline: none;
}
.button4 > span {
	vertical-align: middle;
}



/* Typography and Roundedness */

.button4--round-l {
	border-radius: 20px;
}



/* Nina */

.button4--nina {
	padding: 0 2em;
	background: #7986cb;
	color: #fff;
	overflow: hidden;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.button4--nina.button4--inverted {
	background: #db5252;
	color: #fff;
}
.button4--nina > span {
	display: inline-block;
	padding: 1em 0;
	opacity: 0;
	color:#db5252;
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button4--nina::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button4--nina:hover {
	background-color: #eee;

}
.button4--nina:hover::before {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button4--nina:hover > span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button4--nina:hover > span:nth-child(1) {
	-webkit-transition-delay: 0.045s;
	transition-delay: 0.045s;
}
.button4--nina:hover > span:nth-child(2) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}
.button4--nina:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.button4--nina:hover > span:nth-child(4) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}
.button4--nina:hover > span:nth-child(5) {
	-webkit-transition-delay: 0.225s;
	transition-delay: 0.225s;
}
.button4--nina:hover > span:nth-child(6) {
	-webkit-transition-delay: 0.27s;
	transition-delay: 0.27s;
}
.button4--nina:hover > span:nth-child(7) {
	-webkit-transition-delay: 0.315s;
	transition-delay: 0.315s;
}
.button4--nina:hover > span:nth-child(8) {
	-webkit-transition-delay: 0.36s;
	transition-delay: 0.36s;
}
.button4--nina:hover > span:nth-child(9) {
	-webkit-transition-delay: 0.405s;
	transition-delay: 0.405s;
}
.button4--nina:hover > span:nth-child(10) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

.button4--nina:hover > span:nth-child(11) {
	-webkit-transition-delay: 0.495s;
	transition-delay: 0.495s;
}

.button4--nina:hover > span:nth-child(12) {
	-webkit-transition-delay: 0.54s;
	transition-delay: 0.54s;
}

.button4--nina:hover > span:nth-child(13) {
	-webkit-transition-delay: 0.585s;
	transition-delay: 0.585s;
}

.button4--nina:hover > span:nth-child(14) {
	-webkit-transition-delay: 0.63s;
	transition-delay: 0.63s;
}

.button4--nina:hover > span:nth-child(15) {
	-webkit-transition-delay: 0.675s;
	transition-delay: 0.675s;
}

.button4--nina:hover > span:nth-child(16) {
	-webkit-transition-delay: 0.72s;
	transition-delay: 0.72s;
}

.button4--nina:hover > span:nth-child(17) {
	-webkit-transition-delay: 0.765s;
	transition-delay: 0.765s;
}

.button4--nina:hover > span:nth-child(18) {
	-webkit-transition-delay: 0.81s;
	transition-delay: 0.81s;
}





/********************************/



/* Common button styles */
.button5 {
	float: left;
	min-width: 40px;
	max-width: 40px;
	display: block;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	font-size:20px;
	cursor:pointer
}
.button5:focus {
	outline: none;
}
.button5 > span {
	vertical-align: middle;
}

/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */

.bg-2 .button5 {
	color: #db5252;
	border-color: #db5252;
}


/* Sizes */
.button5--size-s {
	font-size: 14px;
}
.button5--size-m {
	font-size: 16px;
}
.button5--size-l {
	font-size: 18px;
}

/* Typography and Roundedness */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}
.button5--text-thin {
	font-weight: 300;
}
.button5--text-medium {
	font-weight: 500;
}
.button5--text-thick {
	font-weight: 600;
}
.button5--round-s {
	border-radius: 5px;
}
.button5--round-m {
	border-radius: 15px;
}
.button5--round-l {
	border-radius: 40px;
}

/* Borders */
.button5--border-thin {
	border: 1px solid;
}
.button5--border-medium {
	border: 2px solid;
}
.button5--border-thick {
	border: 3px solid;
}

/* Individual button styles */

/* Sacnite */
.button5.button5--sacnite {
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 0;
	color: #fff;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.button5--scanite.button5--round-l {
	border-radius: 50%;
}
.button5--sacnite.button5--inverted {
	color: #db5252;
}
.button5--sacnite::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 35px #db5252;
	-webkit-transform: scale3d(0.9, 0.9, 1);
	transform: scale3d(0.9, 0.9, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.button5--sacnite.button5--inverted::before {
	box-shadow: inset 0 0 0 35px #fff;
}
.button5--sacnite .button5__icon {
	font-size: 22px;
	width: 22px;
}
.button5--sacnite > span {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.button5--sacnite:hover {
	color: #999;
}
.button5--sacnite.button5--inverted:hover {
	color: #999;
}
.button5--sacnite:hover::before {
	box-shadow: inset 0 0 0 2px #999;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.button5--sacnite.button5--inverted:hover::before {
	box-shadow: inset 0 0 0 2px #999;
}

/*--------------------------------------------*/







/* Common button styles */
.button6 {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	cursor:pointer;
	border:1px solid #0EC8CB;
	font-size:12px;
	text-align:12px;
	margin:20px 0 0 0;
	background-color: #0EC8CB;

}
.button6:focus {
	outline: none;
}
.button6 > span {
	vertical-align: middle;
}



/* Typography and Roundedness */

.button6--round-l {
	border-radius: 20px;
}



/* Nina */

.button6--nina {
	padding: 0 2em;
	background: trasparent;
	color: #fff;
	overflow: hidden;
	-webkit-transition: background-color 0.3s;
	transition: background-color 0.3s;
}
.button6--nina.button6--inverted {
	background: trasparent;
	color: #fff;
}
.button6--nina > span {
	display: inline-block;
	padding: 1em 0;
	opacity: 0;
	color: #0EC8CB;
	-webkit-transform: translate3d(0, -10px, 0);
	transform: translate3d(0, -10px, 0);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button6--nina::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button6--nina:hover {
	background-color: #fff;

}
.button6--nina:hover::before {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}
.button6--nina:hover > span {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.button6--nina:hover > span:nth-child(1) {
	-webkit-transition-delay: 0.045s;
	transition-delay: 0.045s;
}
.button6--nina:hover > span:nth-child(2) {
	-webkit-transition-delay: 0.09s;
	transition-delay: 0.09s;
}
.button6--nina:hover > span:nth-child(3) {
	-webkit-transition-delay: 0.135s;
	transition-delay: 0.135s;
}
.button6--nina:hover > span:nth-child(4) {
	-webkit-transition-delay: 0.18s;
	transition-delay: 0.18s;
}
.button6--nina:hover > span:nth-child(5) {
	-webkit-transition-delay: 0.225s;
	transition-delay: 0.225s;
}
.button6--nina:hover > span:nth-child(6) {
	-webkit-transition-delay: 0.27s;
	transition-delay: 0.27s;
}
.button6--nina:hover > span:nth-child(7) {
	-webkit-transition-delay: 0.315s;
	transition-delay: 0.315s;
}
.button6--nina:hover > span:nth-child(8) {
	-webkit-transition-delay: 0.36s;
	transition-delay: 0.36s;
}
.button6--nina:hover > span:nth-child(9) {
	-webkit-transition-delay: 0.405s;
	transition-delay: 0.405s;
}
.button6--nina:hover > span:nth-child(10) {
	-webkit-transition-delay: 0.45s;
	transition-delay: 0.45s;
}

.button6--nina:hover > span:nth-child(11) {
	-webkit-transition-delay: 0.495s;
	transition-delay: 0.495s;
}

.button6--nina:hover > span:nth-child(12) {
	-webkit-transition-delay: 0.54s;
	transition-delay: 0.54s;
}

.button6--nina:hover > span:nth-child(13) {
	-webkit-transition-delay: 0.585s;
	transition-delay: 0.585s;
}

.button6--nina:hover > span:nth-child(14) {
	-webkit-transition-delay: 0.63s;
	transition-delay: 0.63s;
}

.button6--nina:hover > span:nth-child(15) {
	-webkit-transition-delay: 0.675s;
	transition-delay: 0.675s;
}

.button6--nina:hover > span:nth-child(16) {
	-webkit-transition-delay: 0.72s;
	transition-delay: 0.72s;
}

.button6--nina:hover > span:nth-child(17) {
	-webkit-transition-delay: 0.765s;
	transition-delay: 0.765s;
}

.button6--nina:hover > span:nth-child(18) {
	-webkit-transition-delay: 0.81s;
	transition-delay: 0.81s;
}