/****CSS desarrollada por www.e-strategia.es****/
/****se mantienen los estilos antiguos por si necesitan mantener alguna plantilal antigua****/


@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*, html { margin:0; padding: 0}
body { font-family: "Montserrat", sans-serif; text-align: center; background: #f2fafc; }
body.nuevo { font-family: "Montserrat", sans-serif; line-height: 120%}

:root {
	--turquesa: #008AA4;
}

/****assets****/
p.destacado { background-color: #f0f0f0; padding: 8px}

.w464 { width: 464px }
.w516 {width: 516px;}

.mgR5 { margin-right: 5px }
.mgL70 { margin-left: 70px }
.mgL50 { margin-left: 50px }
.mgR50 { margin-right: 50px }
.mgT15 { margin-top: 15px }
.mgL13 { margin-left: 13px }
#colDer h2 { color: black; font-weight: normal; background-color:#d7d5d5; text-transform: none !important; padding: 6px 8px}

.izq { height: auto; float: left }
.der { height: auto; float: right }

/****estructura****/

h1, h2, h3 {
	font-family: "Montserrat", sans-serif;
/*font-family: "Didact Gothic", sans-serif !important;*/
  font-weight: 400;
  font-style: normal;
}

h1 {
	color: var(--turquesa);
	font-weight: 700;
}
/*******************
 * HEADER LANDING
********************/

header {
	display: flex;
	align-items: stretch;
	background: white;
}
header h1 {
	color: black;
	font-size: calc(2vw + 1vh);
	font-weight: 600;
}
.co-header-left {
	width: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	padding: 15px;
}

.co-header-left .logo-top {
	width: 100%;
	height: auto;
	max-width: 473px;
}
.co-header-left--inner {
	width: 100%;
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
a.btn-cta {
    color: white;
    background: var(--turquesa);
    padding: 15px 40px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5rem;
    transition: all .3s ease-out;
}
a.btn-cta:hover {
	color: var(--turquesa);
	background: white;
}
.co-header-right {
	background-color: var(--turquesa);
	width: 50%;
	position: relative;
}
.co-header-right .co-badge {
	background: white;
	width: 182px;
	height: 182px;
	border-radius: 91px;
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.co-header-right .co-badge span {
	color: black;
	font-weight: 700;
	display: block;
	text-align: center;
	font-size: 1.5rem;
	line-height:1;
}
.co-header-right .co-badge span:first-child {
	font-size: 1.5rem;
}
.co-header-right .co-badge span:last-child {
	font-size: 2.8rem;
	line-height:.9;
}
.co-header-right--inner {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.co-header-left--logos {
	color: #666;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.co-header-left--logos p {
		font-size: 13px;
		margin-right: 10px;
	}
.el-titulo {
	width: 100%;
	height: auto;
	max-width: 504px !important;
}

@media (max-width: 1200px) {
	.co-header-left--logos p {
		display: none;
	}
}

.co-titulo {
padding: 0 15%;
position: relative;
}
.co-titulo p {
	text-transform: uppercase;
	color: #666;
	display: inline;
	padding: 10px 15px;
	letter-spacing: .06rem;
	font-weight: 500;
	font-size: 1.4rem;
	position: relative;
	background: white;
	z-index: 1;
}
.co-titulo::after {
	content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--turquesa);
    bottom: 13px;
    position: absolute;
    z-index: 0;
    left: 0;
}
@media (max-width: 768px) {
	.co-header-left--logos p {
		display: none;
	}
	header {
		flex-direction: column;
	}
	.co-header-left {
		width: 100%;
	}
	.co-header-right {
		width: 100%;
	}
}

/*******************
 * CUERPO LANDING
********************/

.bl-intro {
    margin: 4rem 0;
}
.bl-intro h1 {
	font-size: 50px;
}
.bl-intro h2 {
	font-size: 24px;
}

.el-plazo {
	color: white;
	background-color: var(--turquesa);
	font-size: 30px;
	margin-top: 2rem;
	padding: 15px;
}

/*******************
 * FORM
********************/



.bl-form {
	padding-bottom: 4rem;
}

.bl-form p,
.bl-form li {
	font-size: 18px;
	text-align: left;
	line-height: 1.6;
	margin-bottom: 10px;
}
.bl-form ul {
	padding-left: 0;
}
.bl-form .el-listado li {
	position: relative;
	padding-left: 40px;
	display: block;
}
.bl-form .el-listado li::before {
	content:'';
	display: block;
	height: 25px;
	width: 25px;
	background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.13 29.55"><defs><style>.cls-1{fill:none;stroke:%232f6878;stroke-miterlimit:10;stroke-width:3px;}.cls-2{fill:%232f6878;stroke-width:0px;}</style></defs><path class="cls-2" d="m14.77,3c6.49,0,11.77,5.28,11.77,11.77s-5.28,11.77-11.77,11.77S3,21.26,3,14.77,8.28,3,14.77,3m0-3C6.61,0,0,6.61,0,14.77s6.61,14.77,14.77,14.77,14.77-6.61,14.77-14.77S22.93,0,14.77,0h0Z"/><polyline class="cls-1" points="9.04 14.33 14.33 19.62 29.99 1.1"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 2px;
}
.bl-form .cuadro {
	width: 100%;
	padding: 20px 20px 20px 40px;
	margin: 0;
	background: rgba(255,255,255,.5);
}

.el-title-form {
	font-size: 32px;
	font-weight: 700;
}
label {
	font-size: 16px;
}
.form-control {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--turquesa);
	border-radius: 0;
}
.form-control:focus {
	background: rgba(255,255,255,.2);
	border-color: var(--turquesa);
	box-shadow: none;
	/*box-shadow: 0 0 0 .25rem rgba(0, 0, 0, .05);*/
}
.form-floating>label {
	top: -4px;
}


section.bl-video {
    padding: 6rem 0;
    background: var(--turquesa);
}



	#top { height: 158px; width: 1170px !important; margin: 0 auto !important; background-color: #3b7b8b;}
		#topIzq { width: 291px; height: 250px; background-color: black; position:relative; float: left; overflow: hidden }
			#topIzq h1 { bottom: 0; overflow: hidden; width: 309px; height: 158px; background: url(../imagenes/imgTxtMaster.gif) no-repeat bottom left }
				#topIzq h1 span { display: block; color: white; font-size:13px; margin-left: 850px; }
				#topIzq h1 a:link, #topIzq h1 a:visited { display: block; width: 309px; height: 158px; text-decoration: none }
		#topCen { width: 488px; height: 158px; float: left; }
		#topCen img {width: 491px; }
		#topDer { width: 208px; float: left; background-color: #fff;}
}
}

#cuerpoHome { width: 1170px; overflow: hidden; background: url(../imagenes/fdCuerpoHome.gif) repeat-y }
	#colIzq { width: 221px; float: left; margin-right: 15px }
		ul#menuPrincipal { margin-top: 25px }
		ul#menuPrincipal  li { height: auto; font-size: 16px !important	}
		ul#menuPrincipal li a:link, 
		ul#menuPrincipal li a:visited {
		display: block;
		width: 183px;
		color: #3b7b8b;
		padding: 0 0 0 38px;
		height: 42px; line-height: 42px; 
		}
		ul#menuPrincipal li a:hover,
		ul#menuPrincipal li a.activo {
		color: white !important;
		background: url(../imagenes/fdMenuAct.gif) no-repeat	
		}
		#videoIzq { text-align: center; margin-bottom: 8px}
		#siguenos { font-size:15px; color: white; background-color: #6999a5; font-weight: bold; padding: 4px; overflow: hidden; height: 25px; text-align: left; margin-bottom: 15px}
		#siguenos span { float: left; margin-right: 8px; display: block; margin-top: 4px; margin-left: 26px !important; padding: 2px 0}
		#siguenos span { height: auto; margin-right: 0; margin-left: 0px }
		#siguenos img {  height: auto; float: left; margin-left: 6px }
#noticiaHome { margin-bottom: 13px }
	.noticiaTxt {font-size:12px; height: auto; padding: 10px 15px; background-color: #f1f1f1 !important }
	.noticiaTxt h3 { color: #3b7b8b; line-height: 120%; font-size: 13px; margin:0}
	.noticiaTxt p { line-height: 120%; font-size:12px; margin: 3px 0 }
	#colsHome { width: 464px; overflow: hidden }
	.colHome { /*width: 165px*/ }
	
	#colDer { font-size: 12px; width: 216px; float: right; text-align: left !important }
	ul.descargasHome li { margin-bottom: 5px }
	#colDer p { font-size: 12px !important; text-align: left !important; line-height: 130%; margin: 10px 0}
		#colDer div { padding: 15px 15px 0 15px; border-bottom: 1px solid white }
		#colDer h2 { margin: 0; padding: 10px 15px !important; font-size: 15px  }
	#centroHome { width: 521px; float: left }


/***dirección***/
.itemDireccion { width: 276px; float: left; overflow: hidden; background-color: #f1f1f1; position: relative  }
.itemDireccion img { width: 111px; height: 158px; float: left }
.texto_profesores { width: 145px; padding: 10px 10px 10px 0; float: right; line-height:15px; font-size:1.0em;font-family:Arial;color:#454545; position: absolute; bottom: 0; right: 0}
.texto_profesores a span.nombre { height: auto; font-weight: bold; font-size: 13px !important }

/***profesorado***/
#cuerpo { overflow: hidden }
#cuerpo.profesorado strong { color: #3b7b8b }
#cuerpo.profesorado { width: 751px }











/***top landing***/

#topLanding { overflow: hidden; font-size: 25px; line-height: 30px;  height: 94px; 
padding: 0px 0px 0 20px; position: relative; border: 1px solid #e1dce2;margin: 20px 0; }
#topLanding p { width: 533px;display: table-column;top: 0;height: 96px;position: absolute; line-height: 30px; text-align: center;}
span { color: #3b7b8b;}
#topLanding strong { font-weight: bold; }
#topLanding img { float: right;}

.linea2 { margin-left: 63px }
.linea3 { margin-left: 166px }


#bottomLanding { overflow: hidden; display: block; clear: both; padding: 15px 20px 0 20px;}
#bottomLanding p {font-size: 19px;padding: 10px;text-align: center;margin: 0px 0 10px 0; line-height: 23px;}
.bottomLandingIzq { width: 512px; font-size: 17px; color: black;  }

.bottomLandingIzq li { height: auto; margin-bottom: 20px !important; display: block; padding-left: 28px !important; list-style: none; background: url(../img/stick.jpg) no-repeat top left !important }
#opciones p{ font-size: 17px;line-height: 24px;text-align: left;padding: 0;}
.cuadro {text-align: left;width: 329px;background: #fff;padding-left: 0;margin: 0 23px; font-size: 14px}
.bottomLandingDer { width: 410px; float: right; background-color: #e6e3db;margin-bottom: 28px;}
.bottomLandingDer img { position: absolute; right: -16px; top:0; width: auto; height: auto;}
.landingDer {position:relative; background: #dbd4c2; /* Old browsers */
background: -moz-linear-gradient(top,  #dbd4c2 1%, #c5bb9f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#dbd4c2), color-stop(100%,#c5bb9f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #dbd4c2 1%,#c5bb9f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #dbd4c2 1%,#c5bb9f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #dbd4c2 1%,#c5bb9f 100%); /* IE10+ */
background: linear-gradient(to bottom,  #dbd4c2 1%,#c5bb9f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbd4c2', endColorstr='#c5bb9f',GradientType=0 ); /* IE6-9 */ }
#titder {display: block; color: black; padding: 18px; font-size: 29px;text-align: left; }


/******FORMS******/
form { padding: 15px;  }

.bottomLandingDer p { margin: 0 }
input.campo { font-size: 15px; padding: 6px; border: 1px solid #BBB; clear: right; margin-bottom:12px; width: 235px}
textarea { width: 379px; clear: both;  font-size: 15px; border: 1px solid #BBB; margin-bottom: 19px; font-family: Arial, Helvetica, sans-serif; padding: 4px;}
input.enviar {
 color: white; font-size: 15px; text-transform: uppercase; font-weight: bold; padding: 8px 30px; background-color: #3b7b8b; border: none; float: right
 }
 input.borrar { 
 color: #333; 
 padding: 2px 15px;
 background-color: #CCC;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #eee;
 }
form a {
	font-size: 15px
}

 p.legal { font-size: 11px; margin-top: 20px; background-color: #eee; padding: 8px}
 .afirmo { float: left }
 .botones { margin-bottom: 20px; margin-top: 20px;}
.central { margin-right: 112px; margin-left: 112px;}



/****ADAPTACION RESPONSIVE******/
@media screen and (max-width: 1024px) {
	#contenedor, 
	#cuerpo, 
	#top,
	#topDer,
	#topLanding,
	.bottomLandingIzq,
	.bottomLandingDer,
	#pie #texto_pie_1, 
	#pieInt #texto_pie_1,
	.w464,
	.w516
	 {
		width: 100% !important;
		max-width: 1170px !important;
		 height: auto !important;
	}
	#topIzq {
		width: 50%;
	}
	#topCen {
		width: 50% !important;
		background: transparent url('../img/justicia.jpg') no-repeat top left;
		background-size: cover;
	}
	#topCen img {
		display: none;
		width: 100% !important;
		height: auto !important;
	}
	#topLanding {
		/*height: auto !important;*/
		width: 100% !important;
		padding: 0 0 0 0;
	}
	#topLanding p {
		font-size: 18px !important;
		width: 400px !important;
		padding: 0;
		height: auto !important;
		/*position: relative !important;*/
	}
	
	#topDer {
		text-align: center;
		margin-top: 10px;
	}
	#topDer img {
		width: 130px;
		display: inline-block;
	}
	textarea {
		width: 100% !important;
		margin: 0 auto;
	}
	#topCen {
		width: auto;
		overflow: hidden;
	}
	.botones {
		clear: both;
		text-align: center;
	}
	.central {
		margin: 0 !important;
	}
	#pie #texto_pie_1 a, 
	#pieInt #texto_pie_1 a {
		font-size: 12px;
		line-height: 20px;
	}
	.cuadro {
		margin: 0 !important;
		width: 94% !important;
		max-width: 990px;
	}
	.video {
		margin-top: 20px;
		text-align: center;
	}
	#topLanding {
		padding: 10px 0;
	}
	.linea1, .linea2, .linea3 {
		margin: 0;
		text-align: center;
		
	}
	#colsHome {
		margin-bottom: 20px;
	}
}




@media screen and (max-width: 767px) {
	#contenedor, 
	#cuerpo, 
	#top,
	#topIzq,
		
	#topCen,
	#topDer,
	.bottomLandingIzq,
	.bottomLandingDer,
	#topLanding,
	#pie #texto_pie_1, 
	#pieInt #texto_pie_1,
	.w516, 
	.w464,
	#colsHome
	
	
	 {
		width: 100% !important;
		max-width: 1170px !important;
		 height: auto !important;
		 float: none;
	}
	#topLanding {
		width: 100% !important;
		height: auto !important;
	}
	#topLanding p {
		font-size: 18px !important;
		width: 90% !important;
		padding: 0 5%;
		height: auto !important;
		position: relative !important;
	}
	#topIzq h1 {
		    background: url(../imagenes/imgTxtMaster.gif) no-repeat bottom center;
	}
	#topIzq h1,
	#topIzq h1 a:link, #topIzq h1 a:visited {
		width: 100%;
		float: none
	}
	#topCen img {
		width: 100% !important;
		height: auto !important;
	}
	#topDer {
		margin-top: 10px;
	}
	#topDer img {
		width: 40%;
		height: auto;
		display: inline-block;
		margin-top: 10px;
	}
	textarea {
		width: 100% !important;
		margin: 0 auto;
		font-size: 13px
	}
	form {
		padding-bottom: 40px
	}
	form a {
		font-size: 15px;
		margin-top: 20px;
		display: inline-block
	}
	input.enviar {
		margin-top: 20px
	}
	#topCen {
		width: auto;
		min-height: 120px;
		overflow: hidden;
	}
	.botones {
		text-align: center;
		margin-top: 30px
	}
	.botones img {
		margin-bottom: 15px
	}
	.central {
		margin: 0 !important;
	}
	#pie #texto_pie_1 a, 
	#pieInt #texto_pie_1 a {
		font-size: 14px;
		line-height: 30px;
		display: inline-block;
		padding: 0 10px
	}
	.cuadro {
		font-size:15px;
		margin: 0 !important;
		width: 94% !important;
		max-width: 990px;
	}
	.video {
		margin-top: 20px;
		text-align: center;
	}
	
	#colsHome img {
		width: 116px; margin: 0;
	}
	
	.bottomLandingDer img {
		width: 100px !important;
		height: 90px !important
	}
	
}


.bl-botones {  }


.bl-iconos {
	padding: 4rem 0;
	display: block;
	clear: both;
	background: white;
}
.bl-iconos p {
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}


footer {
	width: 100%;
	background-color: black;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 15px;
	min-height: 140px;
}
footer ul {
	display: flex;
	gap: 40px;
}
footer li {
	font-size: .9rem;
	display: block;
}
footer li a {
	color: white;
}