/*---- 1. Cambios de color ----*/
::selection {
    background: var(--issd-mas-c-2);
    color: var(--issd-mas-o);
	text-shadow: none;
}
	/* Firefox */
	*::-moz-selection {
		background: var(--issd-mas-c-2);
		color: var(--issd-mas-o);
		text-shadow: none;
	}
body{
	background: var(--gris-250);
}
/*---- Generales Tipografías ----*/
h1{color:var(--blanco);}
h2, h3{color:var(--issd-o);}
	h2::before{color: var(--issd-c);}
h4{color: var(--issd);}
	.portada h4{color: var(--blanco); text-shadow: 0 1px 2px rgba(0,0,0,.7);}
h5{color: var(--blanco);}
h6{color: var(--issd);}
p, li{color: var(--gris-70);}
blockquote{color: var(--gris-110);}

/*---- Botones y enlaces ---*/
a{
	color: var(--issd);
}
	a:hover{
		color: var(--issd-mas-o);
		text-decoration: underline var(--issd-mas-c);
	}
	a.link-primario{
		color: var(--issd);
	}
		a.link-primario:hover{
			color: var(--issd-o);
			text-decoration: underline var(--issd-mas-c);
		}
	a.link-secundario{
		color: var(--verde-mas-c-2);
	}
		a.link-secundario:hover{
			color: var(--verde-mas-c-2);
			text-decoration: underline var(--verde-mas-c);
		}
	a.link-terciario{
		color: var(--issd-mas-c);
	}
		a.link-terciario:hover{
			color: var(--issd-mas-c-2);
			text-decoration: underline var(--issd-mas-c);
		}
.btn-primario{
	background: var(--issd);
	color: var(--blanco);
	text-shadow: 0 0 2px rgba(0,0,0,.25);
}
	.btn-primario:hover{
		color: var(--blanco);
		background: var(--issd-mas-o);
	}
	.btn-secundario{
		background: var(--blanco);
		color: var(--issd-o);
	}
		.btn-secundario:hover{
			background: var(--issd-o);
			color: var(--blanco);
			text-shadow: 0 0 1px rgba(0, 0, 0, .25);
		}
		.btn-terciario{
			background: var(--blanco);
			color: var(--gris-70);
			box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
		}
			.btn-terciario:hover{
				color: var(--issd-mas-o);
			}
			/* Botones de pago */
			.mercadopago-button{
				color: transparent !important;
				background: var(--verde) !important;
			}
				.mercadopago-button:hover{
					background: var(--verde-o) !important;
				}
				.mercadopago-button::after{
					color: var(--blanco);
					text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
				}
			/* Boton slider*/
			.slider-btn{
				background: rgba(0,0,0,.5);
				color: var(--blanco);
			}
			/*Contenido copiado*/
			button.btn-copiar {
				background: var(--blanco);
				box-shadow: 0 1px 2px rgba(0,0,0,.25);
			}
				button.btn-copiar:hover::after{
					color: var(--gris-130);
				}
				button.btn-copiar::before {
					color: var(--issd-c);
				}
					button.btn-copiar:hover::before {
						color: var(--issd);
					}
				.btn-copiar.copiado::before {
					color: var(--verde-o);
				}
				.btn-copiar.copiado::after {
					color: var(--gris-130);
				}
			.contenido-copiado {
				background: white;
				border: 1px solid #ccc;
				box-shadow: 0 0 12px rgba(0, 0, 0, .15);
			}
				.contenido-copiado p{
					color: var(--gris-30);
				}
				.contenido-copiado p::before{
					color: var(--verde);
				}
/*----- Íconos ----*/
.icon-info::before {
	color: var(--naranja);
}

/*----- Popups ----*/
.popup {
	background-color: var(--blanco);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
.backdrop {
	background-color: rgba(0, 0, 0, .35);
  }
	.popup-content p {
		color: var(--gris-70);
	}
	.close-button {
		color: var(--gris-130);
	}
		.close-button:hover {
			color: var(--verde);
		}
	.popup::after {
		background-color: var(--verde);
	}

/*---- Mensaje enviado / falta completar capcha ---- */
	#mensaje {
		background-color: var(--verde-mas-c);
		box-shadow: 2px 3px 4px rgba(0,0,0,.25);
	}
		#mensaje p{
			color: var(--gris-30);
		}
		#mensaje::after{
			background-color: var(--blanco);
		}
		.contenedor-alerta-captcha{
			background-color: var(--issd-o);
		}
			.contenedor-alerta-captcha::after {
				background-color: var(--verde-c);
			}
			.contenedor-alerta-captcha p{
				color: var(--blanco);
			}
			.contenedor-alerta-captcha a{
				color: var(--gris-30);
				background-color: var(--verde-mas-c);
			}
				.contenedor-alerta-captcha a:hover{
					color: var(--gris-10);
					background-color: var(--verde-mas-c-2);
				}  

/*----- Header ---- */
header {
	background: var(--gris-30);
    background: -moz-linear-gradient(180deg, rgba(30,30,50,1) 30%, rgba(255,255,255,1) 30%);
    background: -webkit-linear-gradient(180deg, rgba(30,30,50,1) 30%, rgba(255,255,255,1) 30%);
    background: linear-gradient(180deg, rgba(30,30,50,1) 30%, rgba(255,255,255,1) 30%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e1e28",endColorstr="#ffffff",GradientType=1);
	box-shadow: 0 0 6px rgba(0,0,0,.25);
}
	/*menu*/
	header .menu{
		background: var(--blanco);
		box-shadow: 0 0 12px rgba(0,0,0,.25);
	}
		.menu .logo,
		.menu .logo-tech{
			background: rgb(0,74,110);
			background: var(--degradado-issd)
		}
		.menu nav a,
		.menu nav div label{
			color: var(--issd);
			border-bottom: 6px solid transparent;
		}
			.menu nav a:hover,
			.menu nav label:hover{
				color: var(--issd-mas-o);
			}
				.menu nav a:hover::after,
				.menu nav label:hover::after{
					color: var(--issd-c);
				}
				.menu nav label > a:hover{
					border-bottom: 6px white;
				}
		/*submenu*/
		.menu nav .sub-menu{
			box-shadow: 0 0 6px rgba(170,170,190,.5);
			background: var(--gris-240);
		}
			.menu nav .sub-menu li{
				border-bottom: 1px solid var(--blanco);
			}  
				.menu nav .sub-menu li:hover{
					background: var(--gris-230);
				}
			/* submenu > submenu */
			.menu nav .sub-menu > li .sub-menu{
				background: var(--blanco);
			}
			.menu nav .sub-menu > li .sub-menu li{
				border-bottom: 1px solid var(--gris-240);
			}
				.menu nav .sub-menu > li .sub-menu li a{
					color: var(--gris-100);
				}
					.menu nav .sub-menu > li .sub-menu li:hover a{
						color: var(--issd-o);
					}
		/*boton campus*/
		.menu nav .campus-virtual{
			background: var(--issd);
			color: var(--blanco);
			text-shadow: 0 0 2px rgba(0,0,0,.25);
		}
			.menu nav .campus-virtual:hover{
				background: var(--issd-o);
				color: var(--blanco);
			}
			.menu nav .campus-virtual::before{
				color: var(--issd-mas-c);
				}

		.menu > label::before{
			color: var(--gris-100);
			background-color: var(--blanco);
		}
			.menu > label:hover::before{
				color: var(--issd);
				box-shadow: 0 0 10px rgba(0,0,0,.25);
			}
    /* --- Menu sticky --- */
	.menu-fixed {
		box-shadow: 0 3px 6px rgba(30,30,50,.1) !important;
	}
		.menu-fixed .logo{
			background: var(--blanco);
		}
			.menu-fixed nav > div:first-of-type{
				border-top: 5px solid var(--gris-230);
			}
			.menu-fixed > label::before{
				background: var(--issd);
				color: var(--blanco);
			}
				.menu-fixed > label:hover::before{
					color: var(--verde-mas-c-2);
				}
	/*Redes*/
	.contacto ul li,
	.contacto ul li a,
	.contacto ul li a:visited{
		color:var(--blanco);
	}
		.contacto ul li a:hover{
			color: var(--issd-mas-c);
		}
	.contacto span,
	.redes span{
		color        : var(--issd);
		background   : var(--celeste-c); 
	}
		.redes span:hover{
			color: var(--blanco);
			background: var(--celeste);
		}
/* Slider home */
.fondo-slider{
	background: var(--gris-250) !important;
}
	.slider-section p{
		text-shadow: 1px 1px 1px rgba(0,0,0,.5);
		color: var(--blanco);
	}
		.slider h1::before,
		.slider h1::after{
			color: var(--issd);
		}
		.slider h1 span.copete{
			color: var(--blanco);
		}
/*Sección carreras y cursos*/
	.productos h4{
		color: var(--gris-100);
	}
	.productos article{
		box-shadow: 0 0 8px rgba(0,0,0,.25);
		background: var(--blanco);
		
	}
	.productos.cursos{
		background: var(--degradado-issd);
	}
		.productos.cursos > div > h2{
			color: var(--verde-mas-c);
		}
		.productos.cursos > div > h4{
			color: var(--gris-230);
		}
		.productos.cursos > div > p{
			color: var(--blanco);
		}
		.productos article:hover{
			box-shadow: 0 0 15px rgba(0,0,0,.35);
		}
		.productos article .categoria,
		.productos article .etiqueta-nuevo-curso,
		.productos article .etiqueta-destacado,
		.productos article .etiqueta-doble-certificacion,
		.productos article .etiqueta-nuevo-inicio,
		.productos article .etiqueta-promo{
			border: solid 1px rgba(255,255,255,.5);
		}
			.productos article .etiqueta-nuevo-curso{background: var(--verde);}
			.productos article .etiqueta-destacado{background: var(--violeta);}
			.productos article .etiqueta-doble-certificacion{background: var(--amarillo);}
			.productos article .etiqueta-promo{background: var(--rojo);}
			.productos article .etiqueta-nuevo-inicio{background: var(--naranja);}
				.productos article:hover .etiqueta-nuevo-curso{background: var(--verde-mas-o);}
				.productos article:hover .etiqueta-destacado{background: var(--violeta-mas-o);}	
				.productos article:hover .etiqueta-doble-certificacion{background: var(--amarillo-mas-o);}
				.productos article:hover .etiqueta-promo{background-color: var(--rojo-mas-o);}
				.productos article:hover .etiqueta-nuevo-inicio{background-color: var(--naranja-mas-o);}
			
			.productos article > div[class*="icon"]{
				background-color: var(--issd);
			}
				.productos article div[class*="icon"]::before,
				.productos article .etiqueta-nuevo-curso:before,
				.productos article .etiqueta-destacado:before,
				.productos article .etiqueta-doble-certificacion:before,
				.productos article .etiqueta-promo:before,
				.productos article .etiqueta-nuevo-inicio:before{
					color: var(--blanco);
					text-shadow: none;
				}
				.productos article:hover > div[class*="icon"]{
					background-color: var(--issd-mas-o);
				}
					.productos article:hover > div[class*="icon"]::before,
					.productos article:hover .etiqueta-nuevo-curso:before,
					.productos article:hover .etiqueta-destacado:before,
					.productos article:hover .etiqueta-doble-certificacion:before,
					.productos article:hover .etiqueta-promo:before,
					.productos article:hover .etiqueta-nuevo-inicio:before{
						text-shadow: 0 0 2px rgba(0,0,0,.5);
					}
						.productos article > div[class*="icon"]::after,
						.productos article .etiqueta-nuevo-curso,
						.productos article .etiqueta-destacado,
						.productos article .etiqueta-doble-certificacion,
						.productos article .etiqueta-nuevo-inicio,
						.productos article .etiqueta-promo{
							color: var(--blanco);
							text-shadow: 0 0 2px rgba(0,0,0,.5);
						}
					.productos article section ul li{
						color: var(--gris-110);
					}
					/*boton whatsapp - tarjeta home*/
					section.limitador:hover .whatsapp {
						background : var(--verde-o);
					}
						.whatsapp{
							background : var(--verde);
							color      : var(--blanco);
							text-shadow: 0 0 2px var(--verde-o);
						}
		#carreras #continuidad {
			border-top: 1px solid var(--blanco);
		}
			#carreras #continuidad h3{
				color: var(--issd-o);
			}
			#carreras #continuidad p{
				color: var(--gris-70);
			}
				#carreras #continuidad p > i{
					color: var(--issd-o);
				}
/*Seccion Certificacion*/
.certificacion{
	background: var(--blanco);
}
/* Seccion Contacto - Formulario */
.contenedor-contacto{
	background: var(--degradado-gris);
}
#contacto{
	background: var(--blanco);
	box-shadow: 0 0 8px rgba(10,10,30,.25);
}
	#contacto > article:first-of-type > span::before{
		color: var(--issd-c);
	}
	#formulario label{
		color: var(--gris-100);
		background-color: var(--blanco);
	}
		#formulario label span{
			color: var(--rojo);
		}
		#formulario input:disabled{
			color: rgba(0,0,0,0);
		}
			#formulario input:disabled ~ label{
				background: none;
				color: var(--gris-130);
			}
	#formulario select{
		color: var(--gris-130);
		border: solid 1px var(--issd-mas-c);
	}
	#formulario input,
	#formulario textarea{
		color: var(--gris-30);
		border: solid 1px var(--issd-mas-c);
	}
		#formulario select:focus,
		#formulario textarea:focus,
		#formulario input:focus{
			border: solid 2px var(--issd-c);
			box-sizing: border-box;
			outline: none;
		}
		#formulario input:-webkit-autofill,
		#formulario input:-webkit-autofill:active,
		#formulario input:-webkit-autofill:focus,
		#formulario input:-webkit-autofill:focus-visible,
		#formulario input:-webkit-autofill:hover{
			box-shadow: inset 0 0 0 30px #fff!important;
		}	
			select:valid,
			.success{
				border-color: var(--verde-c) !important;
			}
			.failure{
				border-color: var(--rojo-c) !important;
			}
				#formulario .failure ~ label{
					color: var(--rojo-o) !important;
				}
				/*Validación*/
				.requerido::before{
					color: var(--gris-130);
				}
					#formulario input:not(:placeholder-shown):valid ~ label{
						color: var(--verde);
					}
					#formulario input:not(:placeholder-shown):invalid ~ label{
						color: var(--rojo);
					}
						.requerido.campo-success::before{
							color: var(--verde);
						}
						.requerido.campo-failure::before{
							color: var(--rojo);
						}
							.numero-telefono .requerido.campo-failure::before{
								color: var(--rojo);
							}
							.requerido.mail.campo-failure::before{
								color: var(--rojo);
							}	  
							.requerido.campo-success::after {
								color: var(--verde);
							}							  
							.requerido.campo-failure::after {
								color: var(--rojo);
							}
			#formulario input:focus ~ label,
			#formulario select:focus ~ label,
			#formulario textarea:focus ~ label{
				color: var(--issd-c);
			}
		#formulario input::placeholder{
			color: var(--gris-210);
		}
		#formulario textarea::placeholder{ 
			color: var(--gris-130);
		}
		.select-contenedor::after{
			color: var(--verde);
		}
			.select-contenedor:hover::after{
				color: var(--verde);
			}
			.select-contenedor select{
				background: var(--blanco) !important;
			}
			.select-contenedor option:disabled{
				color: rgba(0,0,0,0);
				background: var(--blanco);
			}
				.select-contenedor select[name="curso"] option:nth-of-type(2){
					color: var(--issd-o);
					background-color: var(--issd-mas-c);
				}
				.select-contenedor select[name="curso"] option:nth-of-type(10){
					color: var(--verde-mas-o);
					background-color: var(--verde-mas-c-2);
				}
				.select-contenedor select[name="curso"] option:last-of-type{
					background-color: var(--gris-230);
				}
		#btn-form:disabled{
			background: var(--gris-170);
			color: var(--blanco);
		}
			#btn-form:disabled:hover{
				background: var(--gris-170);
				color: var(--blanco);
			}
	.politica-uso > p{
		color: var(--gris-130);
	}
/*Seccion FAQ*/
#faq {
    background: var(--blanco);
	border-top: solid 1px var(--gris-230);
}
	#faq div ul li,
	#faq div ul li a,
	#faq div ul li a:visited{
		color: var(--gris-100);
	}
		#faq div ul li a:hover,
		#faq div ul li a:focus{
			color: var(--issd-o);
		}
/*Seccion Footer*/
.footer-contenido{
    background : var(--gris-30);
    color      : var(--blanco);
}
	.footer-contenido > div ul a{
		color: var(--blanco);
	}
		.footer-contenido > div ul a:hover{
			color: var(--issd-mas-c);
		}
	.footer-contenido > div ul li{
		color: var(--blanco);
	}
		.footer-contenido > div ul li::before{
			color: var(--issd-mas-c);
		}
.footer-contenido > div div{
	background: var(--issd-o);
}
	.footer-contenido > div div p{
		color: var(--blanco);
	}
	.footer-contenido > div div a,
	.footer-contenido > div div a:visited{
		color: var(--issd-mas-c);
	}
		.footer-contenido > div div a:hover{
			color: var(--issd-c);
		}
/*Seccion Trabaja con nosotros*/
#trabaja-nosotros{
	background: var(--blanco);
	box-shadow: 0 0 8px rgba(0,0,20,.25);
}
/* ======================================= */
/*---- 2. Paginas internas: Nosotros, Empresas y FAQ ----*/
.pagina-interna section{
	background: var(--degradado-issd);
}
	.pagina-interna section:first-of-type h2{
		color: var(--blanco);
		text-shadow: 0 0 4px rgba(0,0,0,.5);
	}
.pagina-interna article {
	/* border-bottom: 2px dotted var(--gris-230); */
}
	.pagina-interna article h3:not(:first-of-type){
		border-top: solid 1px var(--gris-230);
	}
		.pagina-interna article b{
			color: var(--issd);
		}
			.pagina-interna article ol li::marker{
				color: var(--issd-c);
			}
			.pagina-interna article .destacado,
			.pagina-interna article .destacado b{
				color: var(--issd-o);
			}
	.pagina-interna ul li::before{
		color: var(--verde);
	}
	/*medios de pago*/
	#medios-pago article a:hover span{
		color: var(--verde);
	}
	#medios-pago .mensaje{
		background: var(--blanco);
		box-shadow: 0 1px 4px rgba(0,0,0,.25);
	}
		#medios-pago .mensaje::before{
			border-bottom: 12px solid var(--verde-mas-c);
		}
	/*Gracias por confiar / Confirmación de pago*/
		#gracias-por-comprar > div{
			background: rgba(0,0,0,.65);
			background: var(--degradado-issd);
		}
		#gracias-por-comprar h1{
			color: var(--issd-mas-c);
		}
		#gracias-por-comprar h2{
			color: var(--blanco);
			text-shadow: 1px 2px 3px rgba(0,0,0,.5);
		}
	/*Preguntas frecuentes*/
	#preguntas-frecuentes article a::before{
		color: var(--issd-c);
	}
		#preguntas-frecuentes article a:hover::before{
			color: var(--issd-o);
		}
/* ======================================= */
/*---- 3. Landings ----*/
	.portada > div h1 span{background-color: var(--issd-mas-o);}
	/* -- Columna Izquierda --*/
	section.izq b {
		color: var(--issd);
	}
	section.izq article {
		border-bottom: 2px dotted var(--gris-230);
	}
		section.izq ul li a,
		section.izq ul li a:visited{
			color: var(--issd);
			}
			section.izq ul li a:hover{
				color: var(--issd-o);
				}
				section.izq article ul li::before,
				section#faq p::before{
					color: var(--issd-c);
				}
				section.izq  ul > ul li::before{
					color: var(--gris-100);
				}
	/* Contenidos en columnas */
	#plan-de-estudio .unidad-titulo{
		color: var(--issd);
	}
	/*Contenidos en acordeon*/
	#plan-de-estudio .acordeon .unidad-titulo{
		background: var(--blanco);
		border: 1px solid var(--gris-230);
	}
		#plan-de-estudio .acordeon .unidad-titulo::after{
		color:var(--issd-c);
		}
			#plan-de-estudio .acordeon .activo{
			border: solid 1px var(--issd-c);
			}
				#plan-de-estudio .acordeon .activo::after{
				color: var(--issd-c);
				}
			#plan-de-estudio .acordeon .unidad-titulo:hover{
			color: var(--issd-o);
			background: var(--blanco);
			}
			#plan-de-estudio .acordeon .unidad-titulo:hover::after{
			color:var(--issd);
			}
	#plan-de-estudio .acordeon a + ul{
		background: var(--blanco);
		border: 1px solid var(--gris-230);
	}	
	/*Seccion Estudiar en Santo Domingo*/
	#estudiar-sd div{
		background: var(--blanco);
		border: solid 1px var(--gris-230);
	}
	/* Seccion Galeria de fotos */
	#galeria section{
		background: var(--gris-230);
	}
		#galeria section div img{
			box-shadow: 1px 1px 4px rgba(0,0,0,.4);
		}
	/*Formulario*/
	form input[type=text], 
	input[type=email],
	form textarea{
		color: var(--issd);
	}
		form p.cod,
		form p.telefono{
			color: var(--gris-70);
		}
	/* -- Columna Derecha --*/
	.tarjeta-landing{
		background: var(--blanco);
		/* box-shadow: 0 0 6px var(--gris-210); */
		border: solid 1px var(--gris-230);
	}
		.tarjeta-landing .presencial a,
		.tarjeta-landing .presencial a:visited{
			color: var(--gris-100);
		}
			.tarjeta-landing .presencial a:hover{
				color: var(--issd-o);
			}
		.tarjeta-landing ul li::before{
			color: var(--issd-c);
		}
		#btn-promo ul{
			background-color: var(--issd);
		}
			#btn-promo ul li{
				color: var(--blanco);
				text-shadow: 0 1px 2px rgba(0,0,0,.35);
			}
				#btn-promo ul:hover li{
					background-color: transparent !important;
				}
			@keyframes rotar {
                0%{
                    margin-left: 0;
                    background: var(--verde);
                    transform: scale(1.1);
                }
                10%{
                    transform: scale(1);
                }
                30%{
                    margin-left: 0;
                    transform: scale(1);
                    background: var(--verde);
                }
                30.01%{
                    margin-left: -200%;
                    transform: scale(1.1);
                }
                40%{
                    transform: scale(1);
                    background: var(--issd);
                }
                100%{
                    margin-left: -200%;
                    transform: scale(1);
                    background: var(--issd);
                }
            }
		.tarjeta-landing .inversion h5.valor{
			color: var(--issd);
			}
				.tarjeta-landing .inversion .cuotas{
				color: var(--gris-50);
				}
/* ======================================= */
/*---- 4. Media ----*/	
@media screen and (min-width:560px){
	/*seccion certificacion*/
	.certificacion article > div:first-child{
		border-right: solid 3px var(--verde-mas-c);
	}
}
@media screen and (min-width:768px){
	/*menu*/
	header .menu {
		box-shadow: none;
	}
		.menu-fixed nav > div:first-of-type{
			border-top: 0;
		}
	#informacion-top{
		color     : var(--blanco);
	}
	.menu nav a:hover,
	.menu nav > div > label:hover {
		border-bottom: 6px solid var(--issd-c);
	}

	/*submenu*/
	.menu nav div > .sub-menu::before{
		border-bottom: 12px solid var(--issd-mas-c) !important;
	}
}
@media screen and (min-width:960px){
	.menu nav a:hover,
	.menu nav > div:hover > label{
		border-bottom: 6px solid var(--issd-c);
	}
}