/*
 *	VitalSigns theme by Luis Glez.
 *  hello@dysometric.com
*/

@charset "UTF-8";

* {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.54;
	font-weight: normal;
	letter-spacing: normal;
	color: #333;
	text-rendering: optimizeLegibility;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--bg-color: #fff;
	--accent-color: #333;
	--text-color: #555;
	--text-color2: #777;
	--text-color3: #999;
	--link-color: #448adc;
	--link-color-hover: #000;
	--sidenav-background: #448adc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #212529;
		--accent-color: #f0f0f0;
		--text-color: #ccd5dd;
		--text-color2: #acb5bd;
		--text-color3: #7c858d;
		--link-color: #dee2e6;
		--link-color-hover: #fff;
		--sidenav-background: #0a59b7;
	}
}

body {
	background: var(--bg-color);
	color: var(--text-color);
	font-size: 17px;
	-webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 { 
	color: var(--text-color); 
	font-weight: bold; 
	line-height: 1.35;
}

h1 { 
	font-size: 36px; 
}

h2 { 
	font-size: 32px; 
}

h3 { 
	font-size: 28px; 
	font-weight: 600; 
	margin-bottom: 10px; 
	line-height: 1.4;
}

h4 { 
	font-size: 22px; 
	line-height: 1.4;
}

h5 { font-size: 18px; 
	line-height: 1.4;
}

code { 
	font-family: "Menlo", "Monaco", "Courier New", Courier, monospace; 
	font-size: 14px; 
	font-weight: inherit;
	color: var(--text-color);
}

img { 
	opacity: 1.0; 
}

@media (prefers-color-scheme: dark) {
	img { 
		opacity: 1.0; 
	}
}

p { 
	color: var(--text-color2); 
	margin-bottom: 20px;
}

b, strong { 
	font-weight: 600; 
	color: var(--text-color); 
}

p strong { 
	font-size: inherit; 
}

a { 
	color: var(--link-color); 
	text-decoration: none; 
	font-size: inherit; 
}

ul.classic {
	list-style-type: disc;
	margin-left: 25px;
	margin-bottom: 20px;
}

ul li { 
	color: var(--text-color); 
}

#support h3 {
	margin-bottom: 10px;
}

#support h5 {
	margin-bottom: 5px;
}

#support h6 {
	text-align: center;
	color: var(--text-color3);
}

#support p { 
	font-size: 16px; 
}

#support ul.primary { 
	list-style: none; 
	list-style-type: none;
	text-align: center;
}

#support ul.primary li { 
	margin-bottom: 10px; 
}

#support ul.primary li a { 
	font-size: 20px; 
}

#support ul.secondary { 
	margin-top: 35px; 
	list-style: none; 
	list-style-type: none; 
}

#support ul.secondary li { 
	padding-bottom: 8px; 
}

#support img#items { 
	max-width: 551px; 
	height: auto; 
	width: 100%; 
}

section#press a { 
	text-decoration: underline;
}

.wrapper { 
	max-width: 1400px; 
	margin: 0 auto; 
}

header {
	display: block;
	position: relative;
	max-width: 1200px; 
	margin: 0 auto; 
	height: 65px; 
	float: none; 
	width: 90%; 
}

/* ---- LOGO ----- */

.logo { 
	display: block;
	position: absolute;
	top: 16px;
	left: 10px;
	float: left;
	z-index: 1;
}

.logo.index { 
	display: none; 
}

.logo img { 
	width: 31px; 
	height: 31px; 
	float: left; 
	margin-top: 0; 
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 1.0;
}

.logo span { 
	float: left; 
	font-size: 20px; 
	font-weight: bold; 
	margin-left: 8px; 
	margin-top: 1px; 
	color: var(--text-color);
}

.logo.index span { 
	color: rgba(255,255,255,0.9); 
}

.logo:hover img { 
	filter: none; 
	-webkit-filter: none; 
	opacity: 1.0; 
}

.logo:hover span { 
	color: var(--accent-color); 
}

.logo.index:hover span { 
	color: #fff; 
}

.logo-large { 
	float: none; 
	margin: 0 auto 60px; 
	height: 64px; 
	display: block; 
	position: relative;
}

.logo-large img { 
	width: 64px; 
	height: 64px; 
	float: left;
}

.logo-large .texto { 
	display: block; 
	float: left; 
	height: 64px;
}

.logo-large h1 { 
	font-size: 24px; 
	font-weight: bold; 
	margin-left: 10px; 
	margin-top: 4px;
}

.logo-large h2 { 
	font-size: 16px; 
	font-weight: bold; 
	margin-left: 12px; 
	color: var(--text-color2); 
}

/* ----- TOP MENU ----- */

.top-menu ul { 
	list-style: none; 
	list-style-type: none; 
	position: relative;
	margin-top: 3px;
	margin-right: 15px;
	float: right;
	display: block;
}

.top-menu.index ul { 
	position: absolute; 
	top: 10px; 
	right: 22px; 
	margin-right: 0; 
}

.top-menu ul li { 
	float: left; 
	margin-left: 25px; 
	line-height: 65px;
}

.top-menu.index ul li { 
	line-height: normal; 
}

.top-menu ul li a { 
	color: #888; 
	text-decoration: none; 
	font-size: 15px; 
	font-weight: bold; 
}

.top-menu ul li.current a { 
	color: var(--accent-color); 
}

.top-menu ul li:hover a { 
	color: var(--accent-color); 
}

.top-menu.index ul li a { 
	color: rgba(255,255,255,0.8); 
}

.top-menu.index ul li:hover a { 
	color: #fff; 
}

@media (prefers-color-scheme: dark) {
	.top-menu.index ul li a {  
		color: rgba(255,255,255,0.7); 
	}
}

/* ----- SIDE MENU ----- */

.hamburger {
	display: none;
	position: absolute;
	top: 13px;
	right: 8px;
	width: 40px;
	height: 40px; 
	line-height: 40px;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 0;
	border-radius: 50%;
	font-size: 19px;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.hamburger img {
	width: 15px;
	height: 13px;
	
	filter: invert(1);
}

.hamburger.support img, .hamburger.press img { 
	filter: invert(0); 
	opacity: 0.5; 
}

@media screen and (max-width: 500px) {
	.top-menu { 
		display: none; 
	}
	
	.hamburger { 
		display: block; 
	}
}

@media (prefers-color-scheme: dark) {
	.hamburger.support img, 
	.hamburger.press img { 
		filter: invert(1); 
	}
}

.sidenav {
	height: 100%;
	width: 0; /* 0 width - change this with JavaScript */
	position: fixed; 
	z-index: 2;
	top: 0;
	right: 0;
	background-color: var(--sidenav-background); 
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 25%;
	transition: 0.5s; 
}

.sidenav .up-logo { 
	position: absolute; 
	bottom: 40px; 
	left: 0; 
	right: 0; 
}

.sidenav a {
	padding: 8px 0 20px 0px;
	text-decoration: none;
	font-size: 20px;
	color: #f5f5f5;
	display: block;
	text-align: center;
	transition: 0.3s;
	letter-spacing: 2px;
}

.sidenav a.current {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.sidenav a:hover {
	color: #f1f1f1;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 36px;
	margin-left: 50px;
}

.large-logo img { 
	width: 64px; 
	height: 64px; 
}

/* On smaller screens, where HEIGHT < 450px, put less padding and a smaller font size */
@media screen and (max-height: 450px) {
	.sidenav { 
		padding-top: 22px; 
	}
	
	.sidenav a { 
		font-size: 14px; 
		padding-bottom: 22px;
	}
	
	.sidenav .up-logo { 
		bottom: 30px; 
	}
}

/* ----- Buttons ----- */

a.boton {
	padding: 10px 20px;
	background: rgba(255,255,255, 0.20);
	color: rgba(255,255,255, 0.75);
	font-size: 16px;
	font-weight: 500;
	border-radius: 8px;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.25);
}

a.boton.big { 
	padding: 15px 30px; 
	letter-spacing: 0.5px; 
	font-size: 17px; 
}

a.boton:hover, a.boton.big:hover { 
	background: rgba(255,255,255, 0.15); 
	font-size: inherit; 
}

@media (prefers-color-scheme: dark) {
	a.boton { 
		background: rgba(255,255,255, 0.10); 
		border: 1px solid rgba(255,255,255,0.15);
		color: rgba(255,255,255, 0.65);
	}
}

a#nuevo, 
a#download { 
	height: 40px; 
	display: block; 
}

.new {
	border-radius: 5px;
	background: #1ab0f8;
	color: #fff;
	padding: 3px 8px;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	float: none;
	width: 60px;
	margin: 0 auto 15px;
}

@media (prefers-color-scheme: dark) {
	.new {background: #0aa0e8;}
}

/* ---- PayPal button ---- */

input[type=image] { 
	background: #c1cbe7; 
	border: 1px solid #c1cbe7; 
	border-radius: 8px; 
	width: 150px; 
	height: 41px; 
	margin-top: 12px; 
}

input[type=image]:hover { 
	background: #919bb7; 
}

/* ---- HEADERS ----- */

.cabecera { 
	clear: both;
	width: 100%; 
	max-width: 1400px; 
	display: block; 
	position: relative;
	margin: 30px auto 50px;
	text-align: center;
	overflow: hidden;
	border-radius: 8px;
	padding-top: 40px;
	background: #ff8c01;
	-webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.cabecera a.boton { 
	margin-left: 6px; 
	padding: 15px 40px; 
	font-size: 18px;
}

@media (prefers-color-scheme: dark) {
	.cabecera {
		background: #d67d10;
	}
}

.cabecera img, 
.cabecera picture { 
	max-width: 480px;
	width: 100%;
	float: left;
	height: auto;
}

.cabecera .texto {
	float: left;
	text-align: left;
	margin-left: 60px;
	position: absolute;
	top: 34%;
	left: 50%;
}

.cabecera h1 { 
	font-size: 70px; 
	line-height: 1.3;
	font-weight: bold;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.80);
	/*color: rgba(221,245,245,0.95);*/ /* very light blue */
}

.cabecera h2 {
	font-size: 32px;
	font-weight: 700;
	color: rgba(255,255,255,0.65);
	padding-left: 8px;
	margin-bottom: 50px;
}

@media (prefers-color-scheme: dark) {
	.cabecera h1 { 
		color: rgba(221,245,245,0.90);
	}
	
	.cabecera h2 { 
		color: rgba(255,255,255,0.60); 
	}
}

@media screen and (max-width: 1500px) {
	.wrapper, header { 
		width: 90%; 
	}
	
	.cabecera { 
		width: 95%;
	}
	
	.cabecera h1 { 
		font-size: 56px;
	}
	
	.cabecera h2 { 
		font-size: 26px; 
	}
}

@media screen and (max-width: 1100px) {
	.cabecera h1 { 
		font-size: 42px;
	}
	
	.cabecera h2 { 
		font-size: 20px; 
	}
	
	.cabecera img { 
		margin-left: -50px;
	}
}

@media screen and (max-width: 900px) {
	header { 
		width: 95%; 
	}
	
	.cabecera h1 { 
		font-size: 42px;
	}
	
	.cabecera h2 { 
		font-size: 20px; 
	}
	
	.cabecera .texto { 
		right: 10%; 
		left: auto;
	}
	
	.cabecera { 
		width: 100%; 
		max-width: 100%; 
		border-radius: 0; 
		border:none; 
		margin-top: 0;
		padding-top: 60px;
	}
	
	.top-menu ul li { 
		line-height: 60px;
	}
	
	.top-menu.index ul {
		 top: 19px; 
	}
	
	.top-menu.index ul li { 
		line-height: normal;
	}
}

@media screen and (max-width: 767px) {
	.cabecera .texto  { 
		display: none;
	}
	
	.cabecera img { 
		margin-left: 0;
	}
	
	.logo.index { 
		display: block; 
	}
}

@media screen and (max-width: 450px) {
	.wrapper { 
		width: 95%; 
	}
}

.hero { 
	text-align: center; 
	padding: 80px 0 10px; 
}

.hero h3 { 
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2; 
	margin: 0 auto; 
	padding: 0 15px 0;
	color: var(--text-color);
	text-shadow: 0px 0px 5px rgba(0,0,0,0.20);
}

.hero p { 
	max-width: 700px; 
	margin: 30px auto 0; 
	padding: 0 40px; 
	font-size: 19px; 
	color: var(--text-color2); 
}

.hero2 { 
	max-width: 1400px; 
	margin: 0 auto 120px; 
	float: none; 
}

.hero2 img { 
	width: 100%; 
	border-radius: 8px;
}

@media screen and (max-width: 1500px) {
	.hero2 { 
		width: 95%;
	}
}

@media screen and (max-width: 900px) {
	.hero h3 { 
		font-size: 42px;
	}
	
	.hero2 { 
		width: 100%; 
	}
	
	.hero2 img {
		border-radius: 0;
	}
}

.tercio-container {
	overflow: hidden;
	background: transparent;
	max-width: 1400px;
	margin: 30px auto 50px;
}

.tercio { 
	width: 33.33%; 
	float: left; 
	text-align: center; 
}

.tercio article { 
	padding: 40px 60px 20px; 
}

.tercio a { 
	color: #444;
}

.tercio p { 
	font-size: 0.95em; 
	line-height: 1.5; 
	max-width: 300px; 
	margin: 0 auto 25px; 
}

.tercio h3 { 
	margin-bottom: 10px; 
	font-size: 24px; 
	font-weight: 400; 
	margin-top: 15px; 
	text-shadow:0px 0px 3px rgba(0,0,0,0.2);
}

.tercio img { 
	margin-top: 20px; 
	width: 64px; 
	height: 64px; 
	opacity: 1.0;
}

@media screen and (max-width: 900px) {
	.tercio article { 
		padding: 40px 30px 60px; 
	}
}

@media screen and (max-width: 767px) {
	.tercio { 
		width: 100%; 
		text-align: left;
	 }
	 
	.tercio img { 
		float: left; 
		margin-right: 50px; 
		padding-top: 32px; 
		padding-bottom: 20px; 
		height: auto;
	}
	
	.tercio p { 
		max-width: 100%; 
	}
	
	.tercio article { 
		padding: 20px 40px 20px; 
	}
}

@media screen and (max-width: 420px) {
	.tercio { 
		text-align: center; 
	}
	
	.tercio article { 
		padding: 20px 20px 20px; 
	}
	
	.tercio img { 
		float: none; 
		margin: 0; 
		padding-top: 0;
	}
}

/*------------- CELDAS ------------ */

.celdas-wrapper {
	display: flex;
	justify-content: center;
	width: 100%; 
	margin: 0 auto 0;
	clear: both;
}

.grid {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 2fr 1fr;
}

.grid.fifty { 
	grid-template-columns: 1fr 1fr; 
	grid-gap: 30px;
}
.grid.third { 
	grid-template-columns: 1.5r 1fr; 
	grid-gap: 10px; 
}

#darkmode .grid { 
	grid-gap: 40px;
}

.celda { 
	display: flex; 
	justify-content: center; 
}

.celda.imagen { 
	text-align: center; 
}

.celda.texto { 
	text-align: left; 
	display: flex; 
	align-items: center; 
}

.celda.texto p { 
	max-width: 400px; 
	float: left; 
}

img#dashboard { 
	max-width: 326px; 
	height: auto; 
	width: 100%; 
}

img#alerts { 
	max-width: 430px; 
	height: auto; 
	width: 100%; 
}

img#tabs { 
	max-width: 752px; 
	height: auto;
	 width: 100%; 
}

img#compact { 
	max-width: 550px; 
	height: auto; 
	width: 100%; 
}

img#updater { 
	max-width: 612px; 
	height: auto; 
	width: 100%; 
}

img.goodies { 
	max-width: 300px; 
	width: 100%; 
	height: auto; 
}

img#styles { 
	max-width: 650px; 
	height: auto;
	margin-top: 20px;
	width: 100%;
	border-radius: 16px;
	-webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

img#free { 
	max-width: 1200px; 
	height: auto; 
	width: 100%;
	border-radius: 16px;
	-webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	margin-bottom: 80px;
	opacity: 1.0;
}

@media (prefers-color-scheme: dark) {
	img#free { 
		opacity: 1.0; 
	}
	
	img#heroimg, img#styles { 
		opacity: 1.0; 
	}
}

@media screen and (max-width: 1300px) {
	img#free { 
		width: 90%;
	}
}

@media screen and (max-width: 767px) {
	img#free { 
		border-radius: 0; 
		border: none; 
		width: 100%;
	}
}

section { 
	margin: 0 0 100px; 
}

section.center, section.full { 
	text-align: center; 
	max-width: 1200px; 
	width: 100%; 
	margin: 60px auto; 
	float: none;
}

section.center p { 
	font-size: 17px; 
	max-width: 650px; 
	margin-left: auto; 
	margin-right: auto; 
	width: 90%;
}

section.center p.small { 
	font-size: 15px;
}

section.center p.small strong { 
	font-size: inherit; 
}

section.full { 
	text-align: left; 
	max-width: 750px; 
	padding: 0 40px; 
}

section.full h1, section.full h3 { 
	text-align: center; 
}

section.full h3 { 
	margin-bottom: 20px; 
}

section.azul, section.yellow { 
	background: #448adc; 
	border-radius: 8px; 
	padding: 50px 20px 65px;
	-webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	text-align: center;
}

section.yellow { 
	background: #303438; 
}

section.azul p, 
section.azul h2, 
section.yellow p, 
section.yellow h3 { 
	color: rgba(255,255,255, 0.80); 
}

section.azul p { 
	max-width: 650px; 
	margin: 0 auto; 
	width: 90%; 
}

section.azul p.small { 
	font-size: 16px; 
	color: rgba(255,255,255, 0.65); 
	margin-top: 6px; 
}

section.azul strong, 
section.azul a, 
section.yellow strong, 
section.yellow a { 
	color: inherit; 
	font-size: inherit;
}

section.azul a.boton { 
	color: rgba(255,255,255, 0.75); 
	text-decoration: none; 
}

section.azul a.boton:hover { 
	color: #fafafa; 
}

section.azul a { 
	text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
	section.azul { 
		background: #0a59b7; 
		border: 1px solid #1a69c7; 
	}
	section.azul p, 
	section.azul h2, 
	section.yellow p, 
	section.yellow h3 { 
		color: rgba(255,255,255, 0.80); 
	}
	
	section.azul p.small { 
		color: rgba(255,255,255, 0.70); 
	}
}

section h2 { 
	text-align: center; 
	font-size: 38px; 
	font-weight: 600; 
	margin-bottom: 30px; 
	line-height: 1.25;
}
section h2 span { 
	font-size: inherit; 
	font-weight: inherit; 
	color: var(--text-color2);
}

@media screen and (max-width: 1300px) {
	section.center { 
		width: 90%; 
	}
}

@media screen and (max-width: 1400px) {
	.grid { 
		grid-template-columns: 1.5fr 1fr;
		 grid-gap: 20px;
	 }
}

@media screen and (max-width: 1000px) {
	.grid { 
		grid-template-columns: 1fr 1fr; 
		grid-gap: 30px;
	}
}

@media screen and (max-width: 900px) {
	.grid, .grid.fifty { 
		grid-template-columns: 1fr; 
		grid-gap: 20px; 
	}
	
	.celda.texto { 
		text-align: center; 
	}
	
	section h2 { 
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 450px) {
	section.full { 
		padding: 0 20px;
	}
}

#press p { 
	font-size: 16px; 
	margin-bottom: 20px; 
}

#press h3 { 
	text-align: left; 
	margin-top: 35px; 
}

#press ul { 
	padding: 5px 20px;
}

#press ul li { 
	font-size: 16px; 
	color: var(--text-color2); 
	padding-bottom: 5px;
}

#press ul li strong { 
	font-size: 16px;
}

/* ---- Footer ----- */

footer { 
	width: 95%; 
	margin: 40px auto 50px; 
	padding-top: 40px; 
	text-align: center; 
}

footer a { 
	font-size: inherit; 
	color: var(--text-color3); 
	text-decoration: none; 
	font-weight: bold; 
}

footer a:hover { 
	color: var(--accent-color); 
}

.copyright { 
	text-align: center; 
	font-size: 14px; 
	color: #aaa; 
	color: var(--text-color3); 
}

.disometric { 
	margin: 5px 0; 
}

.disometric a { 
	text-align: center; 
	float: none; 
	margin: 0 auto; 
	display: block;
}

.disometric a:hover span { 
	color: var(--accent-color); 
}

.disometric img { 
	width: 25px; 
	height: 25px; 
	vertical-align: middle; 
}

.disometric .texto { 
	color: var(--text-color); 
	font-weight: bold;
	letter-spacing: 1px;
	margin-left: 6px;
	font-size: 18px;
	font-family: "Courier New", Courier, monospace;
}

@media screen and (max-width: 420px) {
	footer { width: 100%;}
}

/* ----- Misc ----- */

.spacer, .spacer.x2, .spacer.x3 { 
	display: block; 
	position: relative; 
	clear: both; 
	height: 40px;
}

.spacer.x2 { 
	height: 60px; 
}

.spacer.x3 { 
	height: 80px; 
}

.dash { 
	border-top: 1px dashed;
	 width: 100%; 
	 margin: 50px 0;
 }