/* FUENTES A UTILIZAR */
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,600;0,800;1,200;1,400;1,800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');*/
/* VARIABLES DE CONFIGURACIÓN */
:root { 
	--color-primary-light:#c1c1c1;
	--color-primary:rgba(46,111,253,1);
	--color-gold:rgba(213,160,110,1);
	--color-primary-dark:#a9a9a9;
	--color-secondary:rgba(116, 120, 119, 1);
    
	--amarillo:rgba(224, 183, 72, 1);
	--amarillochillon:rgba(252, 188, 32, 1);
	--color-dark:rgba(180,180,180,1);
	--font-principal: 'Helvetica';
	--font-secundaria: 'Times';
}
/* CLASES A ETIQUETAS HTML */
body{ margin:0px;padding: 0px;width:100vw;height:100vh;font-family: var(--font-principal);}
.font-principal{ font-family: var(--font-principal); }
.font-secundaria{ font-family: var(--font-secundaria); }

a, a:visited, a:focus, a:active, a:hover { color:inherit; text-decoration:none; outline:none; }
a { transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;cursor:pointer; }
a:hover { filter:alpha(opacity=60); /* IE */ -moz-opacity:.6; /* Firefox, Opera, ... */ opacity: .6; /* CSS 3*/  }

a > .hover{display:none;}
a:hover > .hover{display:block;position:relative;}

.uppercase { text-transform:uppercase; }
.bold{ font-weight:bold; }
.lighter{ font-weight: lighter; }
.italic{font-style: italic;}
.underline{ text-decoration: underline;}

.fillheight{ height:100%; }
.fillwidth{ width:-moz-available; width: -webkit-fill-available; }

.b1-primary, .b1-top-primary{ border-top:1px solid var(--color-primary); }
.b1-primary, .b1-bottom-primary{ border-bottom:1px solid var(--color-primary); }
.b1-primary, .b1-right-primary{ border-right:1px solid var(--color-primary); }
.b1-primary, .b1-left-primary{ border-left:1px solid var(--color-primary); }
.b1-secondary, .b1-top-secondary{ border-top:1px solid var(--color-secondary); }
.b1-secondary, .b1-bottom-secondary{ border-bottom:1px solid var(--color-secondary); }
.b1-secondary, .b1-right-secondary{ border-right:1px solid var(--color-secondary); }
.b1-secondary, .b1-left-secondary{ border-left:1px solid var(--color-secondary); }
.b1-dark, .b1-top-dark{ border-top:1px solid var(--color-dark); }
.b1-dark, .b1-bottom-dark{ border-bottom:1px solid var(--color-dark); }
.b1-dark, .b1-right-dark{ border-right:1px solid var(--color-dark); }
.b1-dark, .b1-left-dark{ border-left:1px solid var(--color-dark); }

.m0{ margin:0px; }
.m1{ margin:1px; }
.m4{ margin:4px; }
.m8{ margin:8px; }
.m12{ margin:12px; }
.m20{ margin:20px; }
.mt0{ margin-top:0px; }
.mt1{ margin-top:1px; }
.mt4{ margin-top:4px; }
.mt8{ margin-top:8px; }
.mt12{ margin-top:12px; }
.mt20{ margin-top:20px; }
.mb0{ margin-bottom:0px; }
.mb1{ margin-bottom:1px; }
.mb4{ margin-bottom:4px; }
.mb8{ margin-bottom:8px; }
.mb12{ margin-bottom:12px; }
.mb20{ margin-bottom:20px; }
.ml0{ margin-left:0px; }
.ml1{ margin-left:1px; }
.ml4{ margin-left:4px; }
.ml8{ margin-left:8px; }
.ml12{ margin-left:12px; }
.ml20{ margin-left:20px; }
.mr0{ margin-right:0px; }
.mr1{ margin-right:1px; }
.mr4{ margin-right:4px; }
.mr8{ margin-right:8px; }
.mr12{ margin-right:12px; }
.mr20{ margin-right:20px; }

.p1{ padding:1px; }
.p4{ padding:4px; }
.p8{ padding:8px; }
.p12{ padding:12px; }
.p20{ padding: 25px 20px 20px; }
.pt1{ padding-top:1px; }
.pt4{ padding-top:4px; }
.pt8{ padding-top:8px; }
.pt12{ padding-top:12px; }
.pt20{ padding-top:20px; }
.pb1{ padding-bottom:1px; }
.pb4{ padding-bottom:4px; }
.pb8{ padding-bottom:8px; }
.pb12{ padding-bottom:12px; }
.pb20{ padding-bottom:20px; }
.pl1{ padding-left:1px; }
.pl4{ padding-left:4px; }
.pl8{ padding-left:8px; }
.pl12{ padding-left:12px; }
.pl20{ padding-left:20px; }
.pr1{ padding-right:1px; }
.pr4{ padding-right:4px; }
.pr8{ padding-right:8px; }
.pr12{ padding-right:12px; }
.pr20{ padding-right:20px; }

.r5{ border-radius:5px; }
.rt5{ border-radius:5px 5px 0px 0px; }
.rr5{ border-radius:0px 5px 5px 0px; }
.rb5{ border-radius:0px 0px 5px 5px; }
.rl5{ border-radius:5px 0px 0px 5px; }
.r10{ border-radius:10px; }
.rt10{ border-radius:10px 10px 0px 0px; }
.rr10{ border-radius:0px 10px 10px 0px; }
.rb10{ border-radius:0px 0px 10px 10px; }
.rl10{ border-radius:10px 0px 0px 10px; }
.rounded10px{ border-radius:10px; }
.rounded25px{ border-radius:25px; }
.rounded50px{ border-radius:50px; }
.redondo{ border-radius:50%; }

.bg-primary { background:var(--color-primary) !important;  }
.bg-primary-light { background:var(--color-primary-light) !important; }
.bg-primary-dark { background:var(--color-primary-dark) !important; }
.bg-secondary { background:var(--color-secondary) !important; }
.bg-dark { background:var(--color-dark) !important; color:var(--color-primary); }
.bg-grey { background:#f1f1f1 !important; }
.bg-greydark { background:#777 !important; }
.bg-red { background:#e31d3b !important; }
.bg-green { background:green !important; }
.bg-white { background:#fff !important;background-color:#fff; }
.bg-black { background:#000 !important;background-color:#000; }


.color-primary { color:var(--color-primary) !important; }
.color-primary-light { color:var(--color-primary-light) !important; }
.color-primary-dark { color:var(--color-primary-dark) !important; }
.color-primary-dark a{ color:var(--color-primary-dark) !important; }
.color-primary-dark ul a{ color:var(--color-primary) !important; }
.color-secondary { color:var(--color-secondary); }
.color-gold { color:var(--color-gold); }
.color-white, a.color-white { color:#fff; }
.color-black { color:#000; }
.color-grey { color:#f1f1f1; }
.color-greydark { color:#777; }
.color-red { color:#e31d3b; }
.color-green { color:green;}

.block{ display:block;}

.degradado{ background:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);background:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);background:-ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#292929', GradientType=0); }

.text-sombra{ text-shadow:4px 4px 4px #aaa; }

.panel-primary { border-color:var(--color-primary);}
.panel-primary > .panel-heading { border-color:var(--color-primary); background-color:var(--color-primary); text-align:center; font-size:20px;}
.panel-primary-light { border-color:var(--color-primary-light);}
.panel-primary-light > .panel-heading{ border-color:var(--color-primary-light);background-color:var(--color-primary-light);text-align:center;font-size:20px;}
.panel-primary-dark { border-color:var(--color-primary-dark);}
.panel-primary-dark > .panel-heading { border-color:var(--color-primary-dark);background-color:var(--color-primary-dark); text-align:center; font-size:20px;}
.panel-secondary { border-color:var(--color-secondary);}
.panel-secondary > .panel-heading { border-color:var(--color-secondary); background-color:var(--color-secondary); text-align:center; font-size:20px;}
.panel-dark { border-color:var(--color-dark);}
.panel-dark > .panel-heading { border-color:var(--color-dark); background-color:var(--color-dark); text-align:center; font-size:20px;}
.panel-red { border-color:#e31d3b;}
.panel-red > .panel-heading { border-color:#e31d3b; background-color:#e31d3b; text-align:center; font-size:20px;}
.panel-white { border-color:#FFF;}
.panel-white > .panel-heading { border-color:#FFF; background-color:#FFF; text-align:center; font-size:20px;}

.ui-accordion-header-active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{ background:var(--color-secondary);border-color:var(--color-secondary); }


#galeria{ background-size:contain;background-repeat:no-repeat;background-position:center center;vertical-align:top; }
#galeria_desc{ text-align:center;color:var(--color-primary);font-weight:bold;font-size:20px; }
#sig, #ant{ display:inline-block;width:50%;height:100%;opacity:0.1;background-color:black;vertical-align:top;font-size:50px; }
#ant i,#sig i{margin-top:50%;}
#ant{padding-left:2%;
background:-moz-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-webkit-gradient(linear,  right,left, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));
background:-webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-o-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-ms-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);}
#sig{padding-right:2%;text-align:right;background:-moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-webkit-gradient(linear, left, right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));
background:-webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);}
#sig:hover, #ant:hover{ opacity:0.6;font-size:40px; }

#sig_listado,#ant_listado,.sig_listado,.ant_listado{ margin-top:-50px;padding-top:50px;display:inline-block;width:25%;height:100%;opacity:0.1;vertical-align:top;font-size:50px;}
#detalle_listado, .detalle_listado{ margin-top:-50px;display:inline-block;width:50%;height:100%;opacity:0.1;vertical-align:top;font-size:50px;}
#ant_listado i,#sig_listado i,.ant_listado i,.sig_listado i{margin-top:50%;}
#ant_listado, .ant_listado{padding-left:2%;text-align:left;
background:-moz-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-webkit-gradient(linear,  right,left, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));
background:-webkit-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-o-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-ms-linear-gradient(right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);}
#sig_listado,.sig_listado{padding-right:2%;text-align:right;background:-moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-webkit-gradient(linear, left, right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(34, 34, 34, 0.9)));
background:-webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:-ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);
background:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(34, 34, 34, 0.9) 100%);}
#sig_listado:hover, #ant_listado:hover, .sig_listado:hover, .ant_listado:hover{ opacity:0.6;font-size:40px; }s

.visor{ max-width:100vw;max-height:100vh;width:100vw;height:100vh;background-color:rgba(0,0,0,0.7);position:fixed;top:0px;left:0px;z-index:999999999999;}
.visor_cerrar{ border:1px solid red;color:red;padding:2px 10px;background-color:white; z-index:9999999999999;}
.visor > iframe{ width:100vw;height:90%;border:0px;}

.thumb { }
.thumb img { width:20%;margin:20px;padding:5px;border: 1px solid var(--color-primary); background-color:var(--color-secondary);}


/*  PAGINATION */
.pagination { margin:0; }
.pagination li { font-family:"Lato", Helvetica, Arial, sans-serif; }
.pagination li a { width:32px;height:32px;padding:0;text-align:center;padding-top:6px;margin:0 4px;color:#292929;font-weight:400; }
.pagination li a:hover,
.pagination li.active a,
.pagination li.active:hover a { background:var(--color-primary);color:var(--color-secondary);border-color:var(--color-primary); }


.paginacion{text-align:center;margin-top:20px;}
.paginacion .paginacion_sel{ background-color:var(--color-primary-dark);}
.paginacion button{text-align:center; border:0px; background-color:var(--color-secondary);color:white;margin:1px;min-width:35px;height:35px;}
.paginacion button:hover{ background-color:var(--color-primary-light);}
.paginacion .anteriores,.paginacion .siguientes{display:none;}
.paginacion>a{ vertical-align: middle;margin:0 4px;padding:5px;background:var(--color-primary-dark);}
.paginacion>a>i{ vertical-align: middle;}



/* El contenedor de la tarjeta */
.container {
position: relative;
/* Determinamos la profundidad de los elementos */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}

.card {
width: 100%;
height: 100%;
position: absolute;
/* Determinamos la trasicion de los efectos */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;

}

/* Determinamos los grados de la rotación de la tarjeta */
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* */
.card .front, .card .back {
display: block;
height: 100%;
width: 100%;
position: absolute;
background:#fff;
/*visibility hidden para esconder una cara mientras se muestra la otra */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}

/*Determinamos los estilos deseados en la cara de atras de la tarjeta*/
.card .back {
width: 100%;
/* Animacion para rotar la cara trasera */
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}

/*Determinamos los estilos deseados en la cara de delantera de la tarjeta*/ 
.card .front {
}

@keyframes abrirboton { from {width: 30px;} to {width:160px;} }
@keyframes abrirboton_pq { from {width: 30px;} to {width:120px;} }

.boton, .boton_pq{ margin-top:10px;color:white;line-height:30px;padding:4px 6px;border-radius:5px;width:30px;height:30px;overflow:hidden;}
.boton:hover{ background-color:var(--color-primary);width:160px;animation-name: abrirboton; animation-duration: 0.5s;animation-timing-function: ease;animation-iteration-count:1;}
.boton_pq:hover{ background-color:var(--color-primary);width:120px;animation-name: abrirboton_pq; animation-duration: 0.5s;animation-timing-function: ease;animation-iteration-count:1;}


.hideLG{display:none !important;}

@media all and (max-width: 850px) {
	.hideLG{display:inherit !important;}
	.hideSM{display:none !important;}
}


.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }

.floR{ float:right;}
.floL{ float:left;}
.allM4 > *{ margin:4px; }
.allBlock > *{display:block;vertical-align:middle;}
.allInline > *{display:inline-block;vertical-align:middle;}
.allRoundInline > a{ background-color:var(--color-primary);color:white;display:inline-block;height:40px;width:40px;line-height:40px;border-radius:50%;margin:0px 5px;text-align:center;}



.thumbs-round { overflow-x:auto;overflow-y: hidden;display: grid; grid-auto-rows: 150px; grid-gap: 1rem; grid-auto-flow: column; }
.thumbs-round a{ width: 150px; border-radius:75px; background-repeat:no-repeat; background-position:center; background-size: cover;border:5px solid white;}
.thumbs-round a:hover { opacity:1;transform: scale(1.2); }
.thumbs-round a.active { z-index:9999999999999; border-radius:0; background-size: contain; position:fixed;top:0px;left:0px;width: 100vw; height: 100vh; object-fit: contain;background-color:rgba(0,0,0,0.8); }
.thumbs-round a.active:hover { opacity:1; }

/*.scroll-by-section{ height: 350px; width: 100%;  }*/
.scroll-by-section{ height: 300px; width: 100%;overflow: hidden; scroll-snap-type: y mandatory; scrollbar-width:none; }
.scroll-by-section > section { height: 100%; width: 100%; scroll-snap-align: center; background-size: cover; background-position:center center; overflow:hidden; }
.scroll-by-section>section:nth-child(2n+0){text-align: right;}
@media all and (max-width: 500px) { 
    .scroll-by-section > section > div{font-size:15px;line-height:18px;}
    .scroll-by-section > section h2{ font-size:20px;font-weight: bold; }
    .thumbs-round { grid-auto-rows: 75px;}
    .thumbs-round a{ width: 75px;}
}


/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	visibility: hidden;
	z-index:999999999999999999999999999999;
}

.overlay.active {
	visibility: visible;
    /*animation: entrarderecha 0.4s ease-out;*/
}

.popup {
	background: #F8F8F8;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	border-radius: 3px;
	padding: 20px;
	text-align: center;
	width: 70%;
	transition: .3s ease all;
	transform: scale(0.7);
	opacity: 0;
}

.popup .btn-cerrar-popup {
	font-size: 16px;
	line-height: 16px;
	display: block;
	text-align: right;
	transition: .3s ease all;
	color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
	color: #000;
}

.popup h3 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 0;
}

.popup h4 {
	font-size: 26px;
	font-weight: 300;
	margin-bottom: 10px;
	opacity: 0;
}

.popup form .contenedor-inputs { opacity: 0; }
.popup form .btn-submit { padding: 0 20px; height: 40px; line-height: 40px; border: none; color: #fff; background: #5E7DE3; border-radius: 3px; font-size: 16px;cursor: pointer; transition: .3s ease all;}
.popup form .btn-submit:hover { background: rgba(94,125,227, .9); }

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
	from { opacity: 0; transform: translateY(-25px); }
	to { transform: translateY(0);opacity: 1; }
}

@keyframes entradaSubtitulo {
	from { opacity: 0; transform: translateY(25px); }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes entradaInputs {
	from { opacity: 0; }
	to { opacity: 1; }
}


.flex-container{min-height:100vh;display:flex;flex-direction: column;justify-content: space-between;}

.menuflex{ display:flex; }
.menuflex a i{font-size:150%;margin-right:5px;vertical-align:middle;}
.menuflex a{text-align:center;background:white;color:var(--color-secondary);padding:5px 20px;margin-right:1px;font-weight:bold;}
.menuflex a.active{background:var(--color-secondary);color:white;}
.menuflex a:hover{background:var(--color-secondary);color:white;}

.sliderDivs > div{display:none;}



.formnew{ display:flex;justify-content: center;align-items:center;margin:0 5%;}
.formnew>div{position:relative;margin:0 1vw;padding:1vw; background-color:rgb(242, 242, 250);border-radius:50px;}
.formnew>div>i{ position:absolute;right: 1.5vw;line-height:32px;color:var(--amarillo);font-size:calc(11px + 0.7vw);}
.formnew input,.formnew select{margin-bottom:0; border-radius:50px;font-size:calc(11px + 0.5vw);line-height:calc(11px + 0.5vw);padding:5px 1.5vw;background:white;border:0px;vertical-align: middle;}
.formnew button{max-height:32px;overflow:hidden;font-size:calc(11px + 1vw);color:black;vertical-align: middle;background:none;border:none;}


a.btn{ display:block; padding:3px 10px;border-radius:10px; }

.boxLinks{ display:flex;gap:1vw;margin-bottom:2vw;background:rgb(242,242,250);border-radius:10px;padding:20px;padding-bottom:40px;align-items: center; }
.boxLinks > div { flex-grow:1; padding:2% 0px 0px 2%;}
.boxLinks > div > p { font-family: var(--font-secundaria);font-size:calc(12px + 0.7vw);line-height:calc(14px + 0.8vw); }
.boxLinks > div > a{ display:inline-block;border:1px solid #313131;border-radius:35px;margin-top:1vw;padding:1vw 1.6vw;font-weight:600;font-size:calc(12px + 0.8vw); }
.boxLinks > a{ min-width:14%;min-height:16vw;max-height:16vw;margin-top:2vw;background-size: cover;background-position: center;border-radius:10px; }

.boxColumnas{ display:flex;flex-wrap:wrap;gap:20px;margin-bottom:40px;border-radius:10px; font-size:calc(9px + 0.7vw);}
.boxColumnas > *{ flex:1;min-width:300px;height:25vw;background-size: cover;background-position: center;border-radius:10px; padding-top:9vw; padding-left:4vw;}

.formCode{ margin:5vw;width:fit-content;text-align: center; }
.formCode b{ color:white;font-size:50px; }
.formCode i{ color:var(--color-primary);font-size:35px; }
.formCode>div.inputs, .contenido{ padding:20px;background:rgba(255,255,255,0.7);border-radius:10px;width:fit-content;margin:0 auto;}
.contenido{ max-width:600px; margin-top: 20px;}
.formCode>div.inputs>input{ width: 180px;margin-top:20px;line-height:40px;font-size:20px;}
.formCode>div.inputs>button{ width: 80px;margin-top:20px;line-height:40px;font-size:16px;}

.formCode>div.inputs2{ text-align:right;padding:20px;background:rgba(255,255,255,0.7);border-radius:10px;width:max-content;margin:0 auto;}
.formCode>div.inputs2>b{ line-height:40px;font-size:16px;color:var(--color-secondary);}
.formCode>div.inputs2>input{line-height:40px;font-size:20px;}
.formCode>div.inputs2>button{line-height:40px;font-size:16px;}

table{ width: 100%;border-collapse:collapse;}
table tr{ background:#f1f1f1; }
table tr:nth-child(odd){background:#c1c1c1;}
table tr:first-child{ background:var(--color-primary);color:white;font-weight: bold; }
table td{padding:6px; border:1px solid darkgrey; }



.flexH{ display:flex; flex-direction: row; }
.flexV{ display:flex; flex-direction: column; height: inherit;}
.flexwrap{ flex-wrap: wrap; }
.flexnowrap{ flex-wrap: nowrap; }
.flexnogrow{ flex-grow:0; }
.flexgrow{ flex-grow:1; }
.flexgap5{ gap:5px; }
.flexgap10{ gap:10px; }
.flexgap20{ gap:20px; }
.flexalignC{ align-items: center; }



input, textarea, select{ border:1px solid #999;padding:10px 20px;font-size:18px;  }
button{ color:white;background-color:var(--color-primary);border:1px solid var(--color-primary);padding:10px 20px;vertical-align:top;cursor:pointer; font-size:18px; }

/*input[type=radio]{ appearance: none; -webkit-appearance: none; -moz-appearance: none;visibility: hidden;position: absolute;right: 0;}*/
input[type=radio] + label{ cursor:pointer; background-color:lightgray;border-radius:10px;height:auto;padding:5px 20px;}
input[type=radio]:hover + label{ background-color:grey; color:white;}
input[type=radio]:checked + label{ background-color:var(--color-secondary); color:white;}
input[type=radio]:disabled + label{ cursor: not-allowed;background-color:var(--color-grey); color:rgba(0,0,0,0.2);}


input[type=checkbox] + label{ cursor:pointer; background-color:lightgray;border-radius:10px;height:auto;padding:2px 10px;position:relative;color:var(--color-secondary);}
input[type=checkbox]:hover + label{ background-color:grey;}
input[type=checkbox]:checked + label{ background-color:var(--color-secondary); color:white;}
input[type=checkbox]:checked + label img{filter: brightness(0) invert(1);}
input[type=checkbox]:disabled + label{ cursor: not-allowed;background-color:var(--color-grey); color:rgba(0,0,0,0.2);}
/* DIV diferentes si el check esta marcado o no */
input[type=checkbox] + label .check{ display:none;}
input[type=checkbox] + label .uncheck{ display:block;}
input[type=checkbox]:checked + label .check{ display:block;}
input[type=checkbox]:checked + label .uncheck{ display:none;}

input[type=radio] + label .check{ display:none;}
input[type=radio] + label .uncheck{ display:block;}
input[type=radio]:checked + label .check{ display:block;}
input[type=radio]:checked + label .uncheck{ display:none;}



.form-error, .form-success { background:#58ce38;padding:12px;color:#fff;display:block;margin:0 auto; text-align:center; }
.form-error { background:#ce3838; }
.form-error a, .form-success a { display:block;color:#fff; }
.attempted-submit .field-error { outline:1px solid #ce3838 !important; }



@keyframes salirizquierda {
	from { opacity: 1; visibility: inherit; transform: translateX(0); }
	to { opacity: 0; visibility: hidden; transform: translateX(-50%);}
}
@keyframes salirderecha {
	from { opacity: 1; visibility: inherit; transform: translateX(0); }
	to { opacity: 0; visibility: hidden; transform: translateX(50%); }
}
@keyframes entrarizquierda {
	from { opacity: 0; visibility: visible; transform: translateX(-50%); }
	to { opacity: 1; visibility: inherit; transform: translateX(0);}
}
@keyframes entrarderecha {
	from { opacity: 0;visibility: inherit;  transform: translateX(50%); }
	to { opacity: 1; visibility: inherit; transform: translateX(0); }
}
.outLeft{ animation: salirizquierda 0.5s ease;animation-fill-mode: forwards; }
.outRight{ animation: salirderecha 0.5s ease; animation-fill-mode: forwards;}
.inLeft{ animation: entrarizquierda 0.5s ease;animation-fill-mode: forwards; }
.inRight{ animation: entrarderecha 0.5s ease; animation-fill-mode: forwards;}