@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Medium.woff2') format('woff2'),
         url('../fonts/Quicksand-Medium.woff') format('woff'),
		 url('../fonts/Quicksand-VariableFont_wght.ttf') format('ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;}
@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.woff2') format('woff2'),
         url('../fonts/Quicksand-Bold.woff') format('woff'),
		 url('../fonts/Quicksand-VariableFont_wght.ttf') format('ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;}
@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Light.woff2') format('woff2'),
         url('../fonts/Quicksand-Light.woff') format('woff'),
		 url('../fonts/Quicksand-VariableFont_wght.ttf') format('ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;}
@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Regular.woff2') format('woff2'),
         url('../fonts/Quicksand-Regular.woff') format('woff'),
		 url('../fonts/Quicksand-VariableFont_wght.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;}
*{	margin: 0; padding: 0;}
body{ font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 1.2em; line-height: 2em; color: #222;}
img a, a, a img{ text-decoration: none;}
#imagen img{ width: 100%; }
img{height: auto; display: block;}
.m-doble{margin: 100px 0;}
.m-top{margin: 100px 0 0 0;}
.m-bottom{margin: 0 0 100px 0;}
.neg{ font-weight: bold;}
.noneg{	font-weight: normal;}
.what{margin: 0 auto 10px auto; display: block; position: fixed; top: 5px; right: 5px; z-index: 100;}
.what a{position: absolute; top: 10px; right: 10px; background-size: 80% auto;}
.what a img{width: 44px; }
.what:hover img{filter: grayscale(100);}
#menu ul li{ list-style-type: none; text-align: center;}
#menu ul li a{	padding: 20px 0; display: block; font-weight: bold;}
#menu ul li a:hover{font-weight: 400;}
.verde, .verde a{color: #008d36;}
.azul, .azul a, .mayor{color: #1d71b8;}
.morado, .morado a{color: #662483;}
.rojo, .rojo a{color: #bb2e38;}
.marino{color: #313068;}
.naranja, .cuadro.c-naranja .precio{color: #F38000;}
.rojo .precio, .mejor{color: #fff;}
.cuadro{padding: 30px 40px; margin: 50px 0; color: #fff; clear: both; border-radius: 20px; position: relative;}
.cuadro p{margin: 0;}
.cuadro h3{display: table; border-bottom: 1px solid #fff; padding-bottom: 10px;}
.cuadro h5{font-size: 40px; line-height: 50px; margin-top: 10px; font-weight: 300;}
.cuadro .precio{background: #fff; text-align: center; font-size: 30px; line-height: 30px;
	width: 120px; height: 95px; padding-top: 25px; border-radius: 50%;}
.cuadro .precio span{font-size: 15px; }
.cuadro .p-precio {display: block;}
.aprobados{font-size: 24px; text-align: center; line-height: 33px; font-weight: bold;
	width: 200px; border-radius: 50%; border: 1px solid #fff; padding: 40px 0 0 0; height: 160px;}
.aprobados .numero{font-size: 60px; font-weight: 300; line-height: 50px;}
.aprobados .numero, .aprobados .p-aprobados{display: block; }
.mejor{ width: 300px; font-size: 24px; text-align: center; font-weight: 400;}
.c-verde{background: #008d36; }
.c-verde h5{color: #dff2e6;}
.c-azul{background: #1d71b8; }
.c-marino{background: #313068; }
.c-morado{background: #662483; }
.c-rojo{background: #bb2e38;}
.c-naranja{background: #F38000;}
.alianza{width: 250px; margin-top: 20px;}
.completo{font-size: 18px; font-weight: 300;}
.centrado{text-align: center;}
.cuadro .mtop{margin-top: 20px;}
.titu{font-size: 20px; font-weight: bold; border-bottom: 1px solid #fff; padding-bottom: 10px; text-transform: uppercase; 
	display: table; margin: 0 auto;}
h1{color: #777; margin-top: 140px; font-size: 50px; margin-bottom: 60px; font-weight: 400;}
h1 img{width: 300px; margin: 0 auto; display: block;}
h1 span{font-size: 18px; text-transform: uppercase; display: block;}
.profesoras{background: url("../imagenes/lecole-transparente.svg") no-repeat center bottom; background-size: 100% auto; }
.profesoras img{width: 100%; max-width: 500px; border-radius: 50%; margin: 0 auto; opacity: 0.9;}
.alumnos{margin-top: 100px;}
.alumnos ul{margin: 20px 0 0 20px;}
p{	margin: 20px 0 0 0;}
.centrado{text-align: center;}
.fondo{padding: 100px 0; color: #fff;}
.fondo.azul{background: #1d71b8;}
.banda{color: #fff; padding: 100px 30px; font-size: 1.2em;}
.banda h2 span{display: block; font-size: 50px; line-height: 50px; font-weight: 400; }
.banda p{margin-top: 40px;}
.boton a{display: block; padding: 12px 20px; color: #313068; background: #fff; border-radius: 30px;
	text-align: center; font-size: 14px; text-transform: uppercase; }
.boton a:hover{background: #1d71b8; color: #fff;;}
.banda .boton a{margin: 40px auto 0 auto; width: 200px; font-weight: bold;}
.presen .boton a{border: 1px solid #555; margin: 20px auto 100px auto; width: 200px;}
.frase{font-size: 30px; line-height: 45px; margin: 100px 0;}
.como .frase, .galeria .frase{font-size: 50px; margin: 0 0 30px 0; font-weight: 300;}
.galeria .frase{margin-bottom: 40px; font-size: 40px;}
.mt100{margin-top: 100px;}
.mb100{margin-bottom: 100px;}
.dibu img{width: 50%;}
.dibu.grupo img{width: 60%;}
.menor, .banda .menor{font-size: 0.8em; margin-top: 10px; font-weight: 400;}
.actividad img{width: 80%; max-width: 500px; margin: 100px auto 40px auto;}
.actividad p{margin: 0;}
.telefono, .whats, .direccion{font-weight: 300; font-size: 26px; color:#5f5957; padding: 8px 0; margin-top: 10px; display: block;}
.telefono:hover{color: #312c2a;}
.telefono img, .whats img{width: 50px; display: block; margin: 40px auto 10px auto;}
.direccion{margin-top: 100px;}
footer{ padding-top: 100px;	background: #efefef; font-size: 0.9em; line-height: 1.8em;}
footer .logo{width: 300px; margin-bottom: 20px;}
footer .boton a{width: 200px; }
footer .boton a{display: block; padding-top: 77px; background: url( "../imagenes/gato-boton2.svg") no-repeat center 40px; background-size: 80px auto;}
footer .boton a:hover{background: url( "../imagenes/gato-boton.svg") no-repeat center top; background-size: 80px auto;}
footer .boton a span{display: block; padding: 12px 20px; color: #222; text-align: center;
	text-transform: uppercase; border-radius: 30px;
	background: #fff url("../imagenes/patitas-2.svg") no-repeat center top; background-size: 68px auto;}
footer .boton a:hover span{color: #fff; background: #525252 url("../imagenes/patitas-2.svg") no-repeat center top; background-size: 68px auto;}
address{ font-style: normal; display: inline;}	
.borra{	clear: both;}
#aviso{ font-size: 14px; color: #fff; background: #222; margin-top: 100px;}
#aviso a{ color: #fff; display: inline-block; padding: 5px 0;}
.visita a{display: block; border: none;}
.visita a:hover img{opacity: 0.8;}
.visita a .boton{width: 200px; display: none; position: absolute; z-index: 2;
padding: 12px 20px; border-radius: 30px; text-align: center; font-size: 14px;}
.visita{position: relative;}
.visita img{position: relative; z-index: 1;}
.visita a:hover .boton{display: block;background: #fff; color: #1d71b8;  }
.visita a:hover .boton:hover{background: #1d71b8; color: #fff;}

@media only screen 
and (max-width : 600px){
	.pantalla, .tablet{	display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.todo {	margin: 0 25px;}
	#logo{	width: 90%; max-width: 300px; margin: 100px auto 35px auto;}
	#menu{	width: 100%; margin: 0 auto; font-size: 20px; }
	h1{font-size: 37px;}
	h2{font-size: 22px;}
	.presen{width: 90%; margin: 0 auto;}
	.mayor{font-size: 1.1em; width: 90%; margin: 0 auto;}
	.bb{width: 86%; margin: 100px auto;}
	.profesoras {padding-bottom: 50px;}
	.profesoras img{width: 80%; max-width: 400px;}
	.frase { font-size: 22px; line-height: 38px;}
	.cuadro{padding: 30px 20px; }
	.video, #video, .video .jwplayer{width: 320px !important; height: 180px !important; margin: 100px auto;}
	.alumnos h2{font-size: 40px; margin: 100px 0 30px 0;}
	.alumnos ul{margin: 20px 0 0 0;}
	.alumnos ul li{list-style-type: none; margin: 0;}
	.mejor{	 font-size: 20px;}
	.alianza{margin: 30px auto;}
	.bloque{width: 90%; max-width: 350px; margin: 60px auto; }
	.bloque .titu{background: url("../imagenes/ok.svg") no-repeat center top; background-size: 40px auto; padding-top: 50px;}
	.banda p{font-size: 0.9em; margin-bottom: 40px;}
	.galeria{margin: 100px 20px 20px 20px;}
	.galeria img{width: 100%; margin: 20px 0 0 0;}
	.galeria .frase, .banda h2 span {     font-size: 36px;}
	.como .frase{     font-size: 36px;}
	.cuadro{padding: 50px 20px;}
	.cuadro h3{margin: 0 auto;}
	.cuadro h5{font-size: 36px; line-height: 50px; margin-top: 50px; }
	.cuadro .mtop{margin-top: 30px;}
	.ninos-der, .ninos-cen, .ninos-izq{ margin-top: 30px;}
	footer{text-align: center;}
	footer .izdo .logo, footer .izdo{margin-top: 20px; width: 100%;}
	.izdo img{width: 250px; margin: 0 auto; display: block;}
	.contactar{width: 240px; margin: 50px auto}
	.cuadro .precio, .cuadro .aprobados, .cuadro .mejor{margin: 60px auto 0 auto;}
	.cuadro .mejor{width: 100%; max-width: 300px;}
	.visita a:hover .boton{top: 40%; left: calc(50% - 100px);}
	.direccion .block, #aviso .block, .cuadro .block{display: block;}
	.direccion .guion, #aviso .guion{display: none;}
	#aviso{padding: 30px 0;}
}

@media only screen 
and (min-width : 601px)
and (max-width : 750px) {
	.pantalla, .movil{ display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.todo {	margin: 0 30px;}
	#logo{	width: 360px; margin: 60px auto 50px auto;}
	#menu{	width: 500px; margin: 0 auto; font-size: 18px; }
	#menu ul li{ float: left; width: 18%; }
	#menu ul .azul {width: 38%;}
	#menu ul .rojo{width: 24%;}
	h1{font-size: 40px;}
	h2{font-size: 24px;}
	.presen{width: 90%; margin: 0 auto;}
	.mayor{font-size: 1.1em; width: 70%; margin: 0 auto;}
	.bb{width: 80%; margin: 100px auto;}
	.frase { font-size: 24px; line-height: 38px;}
	.video, #video, .video .jwplayer{width: 500px !important; height: 278px !important; margin: 100px auto;}
	.profesoras {padding-bottom: 50px;}
	.profesoras img{width: 80%; max-width: 400px;}
	.alumnos h2{font-size: 45px; margin: 150px 0 30px 0;}
	.alumnos ul{margin: 20px 0 0 0;}
	.alumnos ul li{list-style-type: none; margin: 0;}
	.alianza{margin: 30px auto;}
	.bloque{width: 350px; margin: 40px auto; }
	.bloque .titu{background: url("../imagenes/ok.svg") no-repeat center top; background-size: 40px auto; padding-top: 50px;}
	.galeria{margin: 100px 1% 1% 1%;}
	.galeria img{width: 48%; float: left; margin: 1%;}
	.galeria .frase, .banda h2 span {     font-size: 40px;}
	.como .frase{     font-size: 45px;}
	.cuadro{padding: 50px 40px;}
	.cuadro h3{margin: 0 auto;}
	.ninos-der, .ninos-cen, .ninos-izq{ margin-top: 30px;}
	footer{text-align: center;}
	footer .izdo .logo, footer .izdo{margin-top: 20px; width: 100%;}
	.izdo img{width: 300px; margin: 0 auto; display: block;}
	.contactar{width: 200px; margin: 50px auto}
	.cuadro .precio, .cuadro .aprobados, .cuadro .mejor{margin: 80px auto 0 auto;}
	.visita a:hover .boton{top: 40%; left: calc(50% - 100px);}
	.direccion{font-size: 20px;}
	.direccion .block, .cuadro .block{display: block;}
	.direccion .guion{display: none;}
	
}

@media only screen 
and (min-width : 751px)
and (max-width : 1099px) {
	.movil, .tablet{ display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.todo {	margin: 0 40px;}
	#logo{	width: 400px; margin: 60px auto 50px auto;}
	#menu{	width: 650px; margin: 0 auto; font-size: 18px; }
	#menu ul li{ float: left; width: 18%; }
	#menu ul .azul {width: 38%;}
	#menu ul .rojo{width: 24%;}
	h1{font-size: 45px;}
	h2{font-size: 26px;}
	.presen{width: 80%; margin: 0 auto;}
	.mayor{font-size: 1.1em; width: 70%; margin: 0 auto;}
	.bb{width: 70%; margin: 100px auto;}
	.frase { font-size: 26px; line-height: 42px;}
	.video, #video{width: 720px; margin: 100px auto;}
	.alumnos h2{font-size: 50px; margin: 160px 0 40px 0;}
	.alumnos ul{margin: 20px 0 0 0;}
	.alumnos ul li{list-style-type: none; margin: 0;}
	.alianza{margin: 30px auto;}
	.bloque{width: 350px; margin: 40px auto; }
	.bloque .titu{background: url("../imagenes/ok.svg") no-repeat center top; background-size: 40px auto; padding-top: 50px;}
	.galeria{margin: 100px 1% 1% 1%;}
	.galeria img{width: 48%; float: left; margin: 1%;}
	.galeria .frase, .banda h2 span {     font-size: 40px;}
	.como .frase{     font-size: 45px;}
	.cuadro{padding: 70px 40px;}
	.cuadro h3{margin: 0 auto;}
	.ninos-der, .ninos-cen, .ninos-izq{ margin-top: 30px;}
	.izdo{width: 50%; float: left; margin-top: 20px;}
	.contactar{width: 200px; float: right;}
	.cuadro .precio, .cuadro .aprobados, .cuadro .mejor{margin: 80px auto 0 auto;}
	.visita a:hover .boton{top: 40%; left: calc(50% - 100px);}
	.direccion .block{display: block;}
	.direccion .guion{display: none;}
}
	
@media only screen 
and (min-width : 1100px){ 
	.movil, .tablet{ display: none;}
	.container { width: 100%; max-width: 1400px; margin: 0 auto;}
	.todo {	margin: 0 50px;}
	#logo{	width: 400px; float: left; margin: 20px 0;}
	#menu{	width: 700px; float: right; font-size: 18px; margin-top: 20px;}
	#menu ul li{ float: left; width: 18%; }
	#menu ul .azul {width: 38%;}
	#menu ul .rojo{width: 24%;}
	.presen{width: 80%; margin: 0 auto;}
	.mayor{font-size: 1.1em; width: 70%; margin: 0 auto;}
	.bb{width: 70%; margin: 100px auto;}
	.video, #video{width: 720px; margin: 100px auto;}
	.alumnos{width: 90%; }
	.alumnos h2{font-size: 60px; margin: 160px 0 60px 0;}
	.bloque{width: 21%; margin: 40px 2% 0 2%; float: left;}
	.bloque .titu{background: url("../imagenes/ok.svg") no-repeat center top; background-size: 55px auto; padding-top: 60px;}
	.galeria img{width: 33.1%; float: left; margin: 0.1%;}
	.galeria .frase {     font-size: 50px;}
	.ninos-der, .ninos-cen, .ninos-izq{width: 37%; float: left;}
	.ninos-der{width: 26%;}
	.izdo{width: 50%; float: left; margin-top: 20px;}
	.contactar{width: 200px; float: right;}
	.cuadro .precio, .cuadro .mejor{position: absolute; top: 40px; right: 40px;}
	.cuadro .aprobados{position: absolute; top: 17%; right: 40px;}
	.cuadro .mejor{top: 30%;}
	.visita a:hover .boton{top: 40%; left: calc(50% - 100px);}
	}
@media only screen 
and (min-width : 1100px)
and (max-width : 1299px) {
	#logo{	width: 340px; margin: 30px 0;}
	#menu{	width: 580px; font-size: 18px; margin-top: 20px;}
	.bloque{width: 36%; margin: 40px 7% 0 7%; float: left;}
	.galeria .frase {     font-size: 40px;}
}
@media only screen 
and (min-width : 1500px){ 
	.movil, .tablet{ display: none;}
	.container { width:80%; max-width: 1400px; margin: 0 auto;}
	#cabecera .container{width: 90%; max-width: 100%;}
	.what{top: 10px; right: 10px;}
}
@media only screen 
and (min-width : 750px){ 
	#menu ul .azul a:hover, #menu ul .v.azul{
		background: url( "../imagenes/flecha-azul.svg") no-repeat center 57px; background-size: 10px auto;}
	#menu ul .verde a:hover, #menu ul .v.verde{
		background: url( "../imagenes/flecha-verde.svg") no-repeat center 57px; background-size: 10px auto;}
	#menu ul .morado a:hover, #menu ul .v.morado{
		background: url( "../imagenes/flecha-morada.svg") no-repeat center 57px; background-size: 10px auto;}
	#menu ul .rojo a:hover, #menu ul .v.rojo{
		background: url( "../imagenes/flecha-roja.svg") no-repeat center 57px; background-size: 10px auto;}
}