/* Minification failed. Returning unminified contents.
(12,26): run-time error CSS1039: Token not allowed after unary operator: '-azul'
(13,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(14,26): run-time error CSS1039: Token not allowed after unary operator: '-azul'
(40,43): run-time error CSS1039: Token not allowed after unary operator: '-grisClaro'
(40,81): run-time error CSS1039: Token not allowed after unary operator: '-grisClaro'
(41,40): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(41,64): run-time error CSS1039: Token not allowed after unary operator: '-azul'
(42,49): run-time error CSS1039: Token not allowed after unary operator: '-grisClaro'
(42,76): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(98,33): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(105,15): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(120,26): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(121,26): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(124,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(144,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(154,15): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(166,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(169,29): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(179,26): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(191,26): run-time error CSS1039: Token not allowed after unary operator: '-azul'
(192,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(193,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(212,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(217,15): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(229,1): run-time error CSS1019: Unexpected token, found '@import'
(229,9): run-time error CSS1019: Unexpected token, found 'url('colores.css?v=1')'
(230,1): run-time error CSS1019: Unexpected token, found '@import'
(230,9): run-time error CSS1019: Unexpected token, found 'url('general.css?v=1')'
(231,1): run-time error CSS1019: Unexpected token, found '@import'
(231,9): run-time error CSS1019: Unexpected token, found 'url('segundaVersion.css?v=1')'
(248,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(251,32): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(264,42): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(272,18): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(276,38): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(277,42): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(280,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(281,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(286,26): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(287,15): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(289,47): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(289,74): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(297,40): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(299,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(301,37): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(303,15): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(306,15): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(308,44): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(313,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(319,29): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(320,18): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(334,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(335,15): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(337,43): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(337,67): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(338,30): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(340,15): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(342,35): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(344,29): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(345,18): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(353,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(358,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(360,39): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(362,29): run-time error CSS1039: Token not allowed after unary operator: '-terciario'
(363,18): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(365,45): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(367,29): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(368,18): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(371,29): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(372,18): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(378,29): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(380,29): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(381,18): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(387,18): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(394,18): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(398,40): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(399,44): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(403,29): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(406,18): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(408,47): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(411,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(412,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(415,26): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(418,26): run-time error CSS1039: Token not allowed after unary operator: '-grisClaro'
(426,43): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(426,81): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(435,16): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(443,69): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(445,15): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(448,15): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(458,26): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(466,87): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(467,113): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(469,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(473,99): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(479,26): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(490,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(496,66): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(497,77): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(504,33): run-time error CSS1039: Token not allowed after unary operator: '-grisClaro'
(511,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(518,56): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(540,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(544,40): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(547,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(549,86): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(560,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(563,33): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(626,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(627,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(631,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(632,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(636,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(637,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(641,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(642,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(646,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(647,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(651,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(652,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(656,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(657,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(661,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(662,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(666,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(667,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(671,44): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(672,32): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(676,29): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(686,50): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(695,51): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(701,18): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(708,89): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(710,18): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(716,50): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(719,18): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(728,18): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(734,33): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(735,38): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(738,18): run-time error CSS1039: Token not allowed after unary operator: '-grisMedio'
(756,47): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(760,26): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(766,53): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(767,52): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(776,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(777,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(780,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(781,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(794,26): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(797,31): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(821,15): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(825,89): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(832,26): run-time error CSS1039: Token not allowed after unary operator: '-grisLetras'
(833,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(839,71): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(844,46): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(845,34): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(848,18): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(853,92): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(864,47): run-time error CSS1039: Token not allowed after unary operator: '-azulInput'
(878,15): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(885,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(892,15): run-time error CSS1039: Token not allowed after unary operator: '-blanco'
(899,15): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(902,26): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(905,15): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
(909,15): run-time error CSS1039: Token not allowed after unary operator: '-principal'
(912,15): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(916,26): run-time error CSS1039: Token not allowed after unary operator: '-negro'
(920,26): run-time error CSS1039: Token not allowed after unary operator: '-secundario'
 */
a { text-decoration: none; cursor: pointer; }
.principal {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
}
.boton {
	transition: all 0.4s;
	box-sizing: border-box;
	background-color: var( --azul );
	color: var( --blanco );
	border: 1px solid var( --azul );
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	outline: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 12px 5px;
	display: block;
	width: auto;
	border-radius: 12px;
	outline: none;
	box-shadow: none;
	margin: 15px 0;
	-webkit-box-shadow: none;
	-webkit-touch-callout: none;
	
}
.boton:focus, a:focus {
	outline: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.boton.disabled { background-color: var( --grisClaro ); border: 1px solid var( --grisClaro ); }
.boton:hover { background-color: var( --blanco ); color: var( --azul ); }
.boton.disabled:hover { background-color: var( --grisClaro ); color: var( --blanco ); }
.vacio { background: #FFE9EA !important; border: 1px solid #ff0000 !important; }
.hide { display: none; }
.fila {
	zoom: 1;
	width: 100%;
	box-sizing: border-box;
}
.fila:before, .fila:after {
	content: '';
	display: table;
}
.fila:after {
	clear: both;
}
.cinco { width: 5%; float: left; box-sizing: border-box; }
.diez { width: 10%; float: left; box-sizing: border-box; }
.diezSeisSesentaSeis { width: 16.66%; float: left; box-sizing: border-box; }
.diezOcho { width: 18%; float: left; box-sizing: border-box; }
.diezSeis { width: 16.6%; float: left; box-sizing: border-box; }
.quince { width: 15%; float: left; box-sizing: border-box; }
.veinte { width: 20%; float: left; box-sizing: border-box; }
.veinteTres { width: 23.3%; float: left; box-sizing: border-box; }
.veinteCinco { width: 25%; float: left; box-sizing: border-box; }
.treinta { width: 30%; float: left; box-sizing: border-box; }
.treintaTres { width: 33.3%; float: left; box-sizing: border-box; }
.treintaCinco { width: 35%; float: left; box-sizing: border-box; }
.cuarenta { width: 40%; float: left; box-sizing: border-box; }
.cuarentaCinco { width: 45%; float: left; box-sizing: border-box; }
.cincuenta { width: 50%; float: left; box-sizing: border-box; }
.cincuentaCinco { width: 55%; float: left; box-sizing: border-box; }
.sesenta { width: 60%; float: left; box-sizing: border-box; }
.sesentaCuatro { width: 64%; float: left; box-sizing: border-box; }
.sesentaSeis { width: 66.6%; float: left; box-sizing: border-box; }
.setenta { width: 70%; float: left; box-sizing: border-box; }
.setentaCinco { width: 75%; float: left; box-sizing: border-box; }
.ochenta { width: 80%; float: left; box-sizing: border-box; }
.noventa { width: 90%; float: left; box-sizing: border-box; }
.cPad { padding: 8px; }
.cPadBig { padding: 15px; }
.full { width: 100%; box-sizing: border-box; }
.tCenter { text-align: center !important; }
.tRight { text-align: right; }
.tLeft { text-align: left; }
.tJustify { text-align: justify; }
.fullImg { width: 100%; height: auto; }
.cPointer { cursor: pointer; }
.centraVertical { display: table; }
.centraVertical .centrado { display: table-cell; vertical-align: middle; width: 100%; }
input, textarea, select {
	padding: 5px;
	font-size: 16px;
	box-sizing: border-box;
	width: 100%;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var( --negro );
	outline: none;
	box-shadow: none;
}
input[type="radio"] { width: 20px; height: 20px; }
textarea { min-height: 150px; }
::-webkit-input-placeholder {
	color: var( --grisLetras );
}
input:required, input:invalid { box-shadow: none; }
input[type="checkbox"] {
	width: 30px;
	padding: 0;
}
.mTop { margin-top: 30px; }
.sociales a {
	text-align: center;
	display: inline-block;
	border-radius: 100%;
	position: relative;
	width: 35px;
	height: 35px;
	background-color: var( --negro );
	border: 1px solid var( --negro );
}
.sociales a i {
	color: var( --blanco );
	font-size: 20px;
	margin: 7px 3px;
	position: relative;
	z-index: 1;
}
.sociales a span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	width: 0;
	background-color: var( --blanco );
}
.sociales a:hover span {
	width: 100%;
	height: 100%;
	border-radius: 100%;
	top: 0;
	left: 0;
}
.sociales a:hover i {
	color: var( --negro );
}
img { max-width: 100%; }
.cargando {
	z-index: 9999999;
	position: fixed;
	width: 100%;
	text-align: center;
	top: 40%;
	left: 0;
	display: none;
	text-align: center;
	color: var( --blanco );
}
.cargando i { font-size: 65px; }
.cargando h3 { color: var( --blanco ); }
.capaNegra {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: var( --negro );
	opacity: 0.7;
	display: none;
}
.vuelveTop {
	position: fixed;
	right: 20px;
	bottom: 50px;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	text-align: center;
	background-color: var( --azul );
	color: var( --blanco );
	border: 1px solid var( --blanco );
	box-sizing: border-box;
	padding: 10px;
	font-size: 20px;
	display: none;
	z-index: 99999;
}
.popup {
	position: fixed;
	width: 500px;
	max-width: 90%;
	z-index: 10002;
	padding: 20px;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: -1000px;
	transition: all 0.5s;
	box-sizing: border-box;
	background-color: var( --blanco );
}
.popup .cierra {
	z-index: 1;
	cursor: pointer;
	color: var( --negro );
	font-size: 20px;
	position: absolute;
	right: 20px;
}
.popup.popupActivo {
	top: 50%;
	transform: translateY(-55%);
}
.d-none {
	display: none;
}
@import url( 'colores.css?v=1' );
@import url( 'general.css?v=1' );
@import url( 'segundaVersion.css?v=1' );
body {
    margin: 0;
    padding: 0;
}
.logo {
    height: 100px;
    width: auto;
    margin: 0 auto;
}
.pagina {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	background-color: var( --blanco );
	transition: all 600ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
	transform: translate3d( 0, -100%, 0 );
	border-right: 1px solid var( --grisLetras );
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.contenidoPagina {
	opacity: 0;
	will-change: margin-top;
	transition: all 500ms;
	transition-delay: 400ms;
	margin-top: -5%;
}
.pagina.activa { transform: translate3d( 0, 0, 0 ); z-index: 99 !important; }
.pagina.activa .contenidoPagina { opacity: 1; margin-top: 0; }
.pagina.blanca { background-color: var( --blanco ); }
.pagina#login {
    padding: 150px 0;
    text-align: center;
}
.pagina#login h1 {
    font-size: 25px;
    text-transform: uppercase;
    color: var( --negro );
    font-family: 'Oswald', sans-serif;
}
.oqm.pagina#login h1 { font-family: 'Montserrat', sans-serif; font-weight: 300; }
.pagina#login h1 span { color: var( --secundario ); }
.pagina.oqm#login h1 span { color: var( --principal ); }
.pagina .cabeza {
	width: 100%;
	background-color: var( --secundario );
	color: var( --blanco );
	box-sizing: border-box;
	padding: 15px 0;
}
.pagina .cabeza.inversa {
	background-color: var( --principal );
	color: var( --secundario );
}
.pagina.oqm .cabeza { background-color: var( --principal ); color: var( --negro ); }
.pagina .cabeza h1 {
    font-size: 25px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin: 0;
}
.pagina .cabeza h1 span { color: var( --principal ); }
.pagina .cabeza.inversa h1 span {
	color: var( --blanco );
}
.pagina .cabeza h1 i { color: var( --principal ); font-size: 30px; }
.pagina .cabeza.inversa h1 i {
	color: var( --secundario );
}
.pagina.oqm .cabeza h1 i {
	color: var( --negro );
}
.pagina.oqm .cabeza h1 span { color: var( --blanco ); }
.pagina .cabeza .icono {
	position: absolute;
	font-size: 30px;
	top: 15px;
	color: var( --blanco );
}
.pagina .cabeza .icono.derecha { right: 15px; }
.pagina .cabeza .icono.izquierda { left: 15px; }
.pagina .cuerpo { box-sizing: border-box; padding: 15px; max-width: 1200px; width: 100%; margin: 0 auto; }
.loginForm {
    background-color: var( --principal );
    color: var( --blanco );
    padding: 25px;
    border-radius: 25px;
    width: 450px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: left;
    max-width: 98%;
}
#subtituloRedundante {
	font-weight: normal;
	margin-top: -15px;
}
.loginForm.inversa {
	background-color: var( --blanco );
	color: var( --grisMedio );
}
.oqm .loginForm { background-color: var( --blanco ); color: var( --negro ); }
.loginForm h2 { color: var( --blanco ) !important; }
.loginForm.inversa h2 {
	color: var( --grisMedio ) !important;
}
.oqm .loginForm h2 { color: var( --negro ) !important; }
.boton {
    background-color: var( --secundario );
    color: var( --blanco );
    border-radius: 3px;
}
.boton--small {
	width: min-content;
}
.boton-red {
	background-color: darkred;
	color: var( --blanco );
	border-radius: 3px;
}
.boton-red:hover {
	filter: brightness(75%);
	color: var( --blanco );
}
.oqm .boton { background-color: var( --principal ); }
.boton:hover {
    background-color: var( --terciario );
    color: var( --blanco );
}
.oqm .boton:hover { background-color: var( --secundario ); }
.oqm .loginForm .boton {
    background-color: var( --principal );
    color: var( --blanco );
}
.oqm .loginForm .boton:hover {
    background-color: var( --secundario );
    color: var( --blanco );
}
input, .StripeElement  {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background-color: var( --blanco );
    border-radius: 15px;
    border: 1px solid var( --grisMedio );
    color: var( --grisMedio );
    padding: .6rem .7rem;
    margin-bottom: 7px;
}
.registraLink, .recuerdaLink {
    font-size: 16px;
    color: var( --principal );
    text-decoration: underline;
}
.registraLink { margin-right: 50px; }
.recuerdaLink { margin-left: 50px; }
.pagina .cuerpo h2 {
    font-size: 26px;
    color: var( --grisLetras );
    font-weight: 300;
    text-align: center;
}
.pagina .cuerpo h2 span { color: var( --secundario ); }
.pagina.oqm .cuerpo h2 span { color: var( --principal ); }
.tablaRegistro {
    width: 100%;
    border-radius: 15px;
    border: 2px solid var( --secundario );
    padding: 25px;
    box-sizing: border-box;
    color: var( --grisLetras );
}
.oqm .tablaRegistro { border: 2px solid var( --principal ); }

#avisoPago .tablaRegistro th {
	background-color: var( --secundario );
	color: var( --blanco );
}
#avisoPago.oqm .tablaRegistro th {
	background-color: var( --principal );
}
#avisoPago .tablaRegistro tr:nth-child(even) {
	background-color: var( --grisClaro );
}
#avisoPago .tablaRegistro td {
	font-size: 12px;
}


.principal { width: 800px; }
.boton.disabled { background-color: var( --grisMedio ); border: 1px solid var( --grisMedio ); }
.aceptaBox input[type="checkbox"] { display: none; }
.aceptaBox input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  padding-top: 3px;
  margin-bottom: 20px;
  font-size: 16px;
  color: var( --grisLetras );
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  box-shadow: none;
}
.loginForm .aceptaBox input[type="checkbox"] + label { color: var( --blanco ); }
.sitio-pradera #confirmar .loginForm .aceptaBox input[type="checkbox"] + label {
	color: var( --principal );
}
.loginForm.fondoBlanco .aceptaBox input[type="checkbox"] + label {
	color: var( --negro );
}
.aceptaBox input[type="checkbox"] + label:last-child {
	margin-bottom: 0;
}
.aceptaBox input[type="checkbox"] + label:before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid var( --grisLetras );
	position: absolute;
	left: 0;
	top: 0;
	opacity: .6;
	-webkit-transition: all .12s, border-color .08s;
	transition: all .12s, border-color .08s;
}
.loginForm .aceptaBox input[type="checkbox"] + label:before { border: 2px solid var( --blanco ); }
.sitio-pradera #confirmar .loginForm .aceptaBox input[type="checkbox"] + label:before { border: 2px solid var( --negro ); }
.sitio-pradera #confirmar .loginForm .aceptaBox input[type="checkbox"]:checked + label:before {
	border: 2px solid var( --secundario );
	border-top-color: transparent;
	border-left-color: transparent;
}
.loginForm.fondoBlanco .aceptaBox input[type="checkbox"] + label:before { border: 2px solid var( --negro ); }
.aceptaBox input[type="checkbox"]:checked + label:before {
	width: 10px;
	top: -5px;
	left: 5px;
	opacity: 1;
	border: 2px solid var( --principal );
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.loginForm .aceptaBox input[type="checkbox"]:checked + label:before {
    width: 10px;
	top: -5px;
	left: 5px;
	opacity: 1;
	border: 2px solid var( --secundario );
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.aceptaBox input[type="checkbox"]:checked + label { color: var( --principal ); }
.loginForm .aceptaBox input[type="checkbox"]:checked + label { color: var( --secundario ); }
.radios { list-style-type: none; padding-left: 0; width: 100%; }
.radios li {
	position: relative;
	padding: 5px;
	padding-left: 40px;
	height: 35px;
	border-bottom: 1px solid var( --grisClaro );
}
.radios li:last-child { border: none; }
.radios li label:before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid var( --secundario );
	position: absolute;
	left: 7px;
	top: calc( 50% - 13px );
	box-sizing: border-box;
	border-radius: 50%;
}
.oqm .radios li label:before { border: 2px solid var( --principal ); }
.radios li input[type="radio"] {
	opacity: 0;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	z-index: 100;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 30px;
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	cursor: pointer;
}
.bullet {
	position: relative;
	width: 25px;
	height: 25px;
	left: -3px;
	top: calc(50% - 23px);
	border: 5px solid var( --secundario );
	opacity: 0;
	border-radius: 50%;
}
.oqm .bullet { border: 5px solid var( --principal ); }
.radios li input[type="radio"]:checked ~ label:before {
	border: none;
	background-color: var( --secundario );
}
.oqm .radios li input[type="radio"]:checked ~ label:before { background-color: var( --principal ); }
.radios li input[type="radio"]:checked ~ .bullet {
	position:absolute;
	opacity: 1;
	animation-name: explode;
	animation-duration: 0.350s;
}
.line {
	position: absolute;
	width: 10px;
	height: 2px;
	background-color: var( --secundario );
	opacity: 0;
}
.line { background-color: var( --principal ); }
.line.zero {
	left: 11px;
	top: -21px;
	transform: translateY(20px);
	width: 2px;
	height: 10px;
}
.line.one { right: -7px; top: -11px; transform: rotate(-55deg) translate(-9px); }
.line.two { right: -20px; top: 11px; transform: translate(-9px); }
.line.three { right: -8px; top: 35px; transform: rotate(55deg) translate(-9px); }
.line.four { left: -8px; top: -11px; transform: rotate(55deg) translate(9px); }
.line.five { left: -20px; top: 11px; transform: translate(9px); }
.line.six { left: -8px; top: 35px; transform: rotate(-55deg) translate(9px); }
.line.seven { left: 11px; bottom: -21px; transform: translateY(-20px); width: 2px; height: 10px; }
.radios li input[type="radio"]:checked ~ .bullet .line.zero{
	animation-name:drop-zero;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.one{
	animation-name:drop-one;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.two{
	animation-name:drop-two;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.three{
	animation-name:drop-three;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.four{
	animation-name:drop-four;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.five{
	animation-name:drop-five;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.six{
	animation-name:drop-six;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
.radios li input[type="radio"]:checked ~ .bullet .line.seven{
	animation-name:drop-seven;
	animation-delay: 0.100s;
	animation-duration: 0.9s;
	animation-fill-mode: forwards;
}
@keyframes explode {
	0%{ opacity: 0; transform: scale(10); }
	60%{ opacity: 1; transform: scale(0.5); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes drop-zero {
	0% { opacity: 0; transform: translateY(20px); height: 10px; }
	20% { opacity: 1; }
	100% { transform: translateY(-2px); height: 0px; opacity: 0; }
}
@keyframes drop-one {
	0% { opacity: 0; transform: rotate(-55deg) translate(-20px); width: 10px; }
	20% { opacity: 1; }
	100% { transform: rotate(-55deg) translate(9px); width: 0px; opacity: 0; }
}
@keyframes drop-two {
	0% { opacity: 0; transform: translate(-20px); width: 10px; }
	20% { opacity: 1; }
	100% { transform: translate(9px); width: 0px; opacity: 0; }
}
@keyframes drop-three {
	0% { opacity: 0; transform: rotate(55deg) translate(-20px); width: 10px; }
	20% { opacity: 1; }
	100% { transform: rotate(55deg) translate(9px); width: 0px; opacity: 0; }
}
@keyframes drop-four {
	0% { opacity: 0; transform: rotate(55deg) translate(20px); width: 10px; }
	20% { opacity: 1;}
	100% { transform: rotate(55deg) translate(-9px); width: 0px; opacity: 0; }
}
@keyframes drop-five {
	0% { opacity: 0; transform: translate(20px); width: 10px; }
	20% { opacity: 1; }
	100% { transform: translate(-9px); width: 0px; opacity: 0; }
}
@keyframes drop-six {
	0% { opacity: 0; transform: rotate(-55deg) translate(20px); width: 10px; }
	20% { opacity: 1; }
	100% { transform: rotate(-55deg) translate(-9px); width: 0px; opacity: 0; }
}
@keyframes drop-seven {
	0% { opacity: 0; transform: translateY(-20px); height: 10px; }
	20% { opacity:1; }
	100% { transform: translateY(2px); height: 0px; opacity: 0; }
}
.iconoCard { font-size: 50px; color: var( --secundario ); margin: 25px 0 8px; }
.oqm .iconoCard { color: var( --principal ); }
.cuadroRedondeado {
    width: 100%;
    border-radius: 15px;
    border: 2px solid var( --secundario );
    padding: 25px;
    box-sizing: border-box;
}
.cuadroRedondeado h3 {
    font-size: 26px;
    font-weight: 300;
    margin: 0;
}
.cuadroRedondeado input { margin-bottom: 10px; }
.oqm .cuadroRedondeado { border: 2px solid var( --principal ); }
.redondeadoGris {
    width: 100%;
    background-color: #F0F0F0;
    border-radius: 15px;
    padding: 25px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}
.redondeadoGris i { font-size: 30px; color: var( --secundario ); }
.redondeadoGris .divDetail {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: var( --principal );
}
.redondeadoGris .divDetail:last-child { border-bottom: none; margin-bottom: 0; }
.redondeadoGris .divDetail b {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
}
.oqm .redondeadoGris .divDetail b { font-family: 'Montserrat', sans-serif; color: var( --negro ); }
.redondeadoGris .divDetail i {
    color: var( --secundario );
    font-size: 30px;
    margin-right: 15px;
    width: 35px;
    text-align: center;
}
.oqm .redondeadoGris .divDetail i { color: var( --principal ); }
.redondeadoGris .divDetail span {
    display: block;
    color: var( --grisLetras );
    font-weight: 300;
    margin-top: 15px;
    font-size: 16px;
    margin-left: 50px;
}
h1.tituloBi {
    font-size: 25px;
    text-transform: uppercase;
    color: var( --negro );
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: 20px;
}
.oqm h1.tituloBi { font-family: 'Montserrat', sans-serif; font-weight: 300; }
h1.tituloBi span { color: var( --secundario ); }
.oqm h1.tituloBi span { color: var( --principal ); }
.tarjetas {
    text-align: center;
    color: var( --grisMedio );
    font-size: 35px;
    margin: 35px;
}
@media screen and ( max-width: 670px ) {
	#pagar .cincuenta { width: 100%; float: none; }
}
.loader {
	width: 150px;
	text-align: center;
	position: fixed;
	top: 47%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 101;
	display: none;
}
.loader h1 { text-align: center; color: var( --blanco ); margin: 0; }
.loader > div {
	width: 18px;
	height: 18px;
	background-color: var( --principal );
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.loader > div:first-child { background-color: var( --secundario ); }
.loader > div:last-child { background-color: var( --principal ); }
.loader .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.loader .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}
.menuContainer {
	position: absolute;
	height: 100%;
	right: 0;
	width: 80%;
	background-color: var( --blanco );
	transition: all 500ms;
	z-index: 98;
	border-left: 1px solid var( --principal );
	box-sizing: border-box;
	padding: 20px;
	opacity: 0;
}
.menuContainer.activo { opacity: 1; }
.menuContainer .menuHead {
	width: 100%;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}
.menuContainer .menuHead img { width: 120px; height: auto; margin: 0 auto; }
.menuContainer nav ul {
	display: block;
	list-style: none;
	padding: 0;
	margin: 20px 0;
	font-size: 16px;
}
.menuContainer nav ul li { width: 100%; }
.menuContainer nav ul li a {
	box-sizing: border-box;
	padding: 8px 0;
	color: var( --grisLetras );
	transition: all 500ms;
}
.menuContainer nav ul li.activo a, .menuContainer nav ul li.activo a i,
.menuContainer nav ul li:hover > a, .menuContainer nav ul li:hover > a i { color: var( --principal ); }
.menuContainer nav ul li a i { font-size: 30px; margin: 5px; }
.menuContainer nav ul li a .iniciales {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background-color: var( --grisLetras );
	color: var( --blanco );
	text-align: center;
	box-sizing: border-box;
	padding-top: 5px;
	margin: 5px;
}
.menuContainer nav ul li.activo a .iniciales{ background-color: var( --principal ); }
.detalleCard {
    text-align: center;
    margin-bottom: 20px;
}
.loginForm i { font-size: 50px; color: var( --blanco ); text-align: center; }
.oqm .loginForm i { color: var( --principal ); }
.loginForm h3 {
    font-size: 40px;
    color: var( --secundario );
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin: 10px 0;
}
.oqm .loginForm h3 { font-family: 'Montserrat', sans-serif; font-weight: 300; color: var( --negro ); }
a.helpRecibo { float: right; margin-top: -75px; cursor: pointer; z-index: 9999999999; }
a.helpRecibo i { font-size: 20px; }
#reciboAdd label, #registro label { display: block; }
#reciboAdd input, #registro input { width: 97% }
#registro input[type="checkbox"] {
	width: 30px;
	padding: 0;
}
label[for="avisoPrivacidad"] { display: inline-block !important; }
.terminosDiv { padding: 8px 0; }
label[for="avisoPrivacidad"] a { color: var( --azulInput ); }
#home h3 { margin-top: 0 !important; }
label { display: block; margin-bottom: 8px; }
.responsiveTable {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.responsiveTable table {
	min-width: 650px;
}
.botonHome {
	display: block;
	text-align: center;
	color: var( --secundario );
	margin-bottom: 20px;
}
.botonHome div {
	width: 140px;
	height: 140px;
	border-radius: 10px;
	background-color: var( --secundario );
	box-sizing: border-box;
	padding-top: 30px;
	margin: 0 auto;
	margin-bottom: 5px;
}
.botonHome i {
	color: var( --blanco );
	font-size: 70px;
}
.botonHome span {
	font-size: 20px;
}
.oqm .botonHome {
	color: var( --principal );
}
.oqm .botonHome div {
	background-color: var( --principal );
}
#adeudoPago a {
	color: var( --secundario );
	font-weight: bold;
}
.oqm #adeudoPago a {
	color: var( --principal );
}
.sitio-oqm .loginForm .aceptaBox input[type="checkbox"] + label {
	color: var( --negro );
}

.sitio-oqm .loginForm .aceptaBox input[type="checkbox"] + label:before {
	border: 2px solid var( --negro );
}

.sitio-oqm .loginForm .aceptaBox input[type="checkbox"]:checked + label:before {
	border: 2px solid var( --secundario );
	border-top-color: transparent;
	border-left-color: transparent;
}
@media screen and ( max-width: 510px ) {
	#predios .treintaTres {
		width: 100%;
		float: none;
	}

	#predios .treintaTres .boton {
		margin: 0 !important;
	}
}

.d-flex {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.align-items-center{
	align-items: center;
}

.justify-content-center {
	justify-content: center;
}