@font-face{
	font-family: "Nunito";
    src: url(../fonts/Nunito-Light.woff2),
         url(../fonts/Nunito-Light.woff),
	     url(../fonts/Nunito-Light.ttf);
    font-weight: 300; font-display: swap; }
@font-face{
	font-family: "Nunito";
    src: url(../fonts/Nunito-SemiBold.woff2),
         url(../fonts/Nunito-SemiBold.woff),
	     url(../fonts/Nunito-SemiBold.ttf);
    font-weight: 600; font-display: swap; }
@font-face{
	font-family: "Nunito";
    src: url(../fonts/Nunito-ExtraBold.woff2),
         url(../fonts/Nunito-ExtraBold.woff),
	     url(../fonts/Nunito-ExtraBold.ttf);
    font-weight: 800; font-display: swap; }
@font-face{
	font-family: "Lustria";
    src: url(../fonts/Lustria-Regular.woff2),
         url(../fonts/Lustria-Regular.woff),
	     url(../fonts/Lustria-Regular.ttf);
    font-weight: 800; font-display: swap;}
*{	margin: 0; padding: 0;}
body{	font-family: 'Nunito', sans-serif; font-size: 1.1em; line-height: 1.6em; text-align: center;	color: #555;}
img a, a, a img{	text-decoration: none;}
#imagen img, #curriculum img{	width: 100%; height: auto; display: block; }
.neg{	font-weight: 600;}
.noneg, .noneg strong{	font-weight: 300;}
#banda{	background: #5c8cad; font-size: 14px; color: #cfdbe2; text-align: right;}
#banda a{	display: inline-block; color: #afc0cb; text-align: center; padding: 2px 5px; font-weight: 800;}
#banda a:hover{	color: #fff;}
#banda .container{	background: #5c8cad; }
.logo{	color: #5c8cad; }
#cabecera .logo{	font-size: 27px;}
.membrete{	color: #7e8589; font-size: 14px; font-weight: 300; }
#cabecera .membrete{	text-transform:uppercase; letter-spacing: 1px;}
#menu{	font-size: 1em;}
#menu ul li{	list-style-type: none; text-align: center;}
#menu ul li a{	color: #5c8cad; padding: 20px 0 5px 0; display: block;}
#menu ul li a:hover{	font-weight: 600;}
h1{	font-weight: 300; font-size: 26px; margin-bottom: 40px; color: #5c8cad; }
.subt, .gris h3, .beige h3{	font-size: 14px; display: block; letter-spacing: 2px; line-height: 18px; margin-bottom: 10px;}
p{	margin: 0 0 20px 0;}
.presentacion{	margin-top: 80px;}
#curriculum{	margin: 80px 0; font-weight: 300;}
#curriculum .cv{	font-size: 14px; font-weight: 600; color: #e39162; 	letter-spacing: 2px; display: block;	}
#curriculum h2{	font-size: 23px; font-weight: 600; color: #276189; }
#curriculum h4, #curriculum h4 strong{	font-size: 15px; font-weight: 300; color: #276189;}
#curriculum h4{	border-bottom: 4px solid #dae2ea; padding-bottom: 5px; display: inline-table;}
#curriculum .fecha{	display: block; font-size: 13px; text-transform: uppercase; font-weight: 800; padding-top: 20px;}
#curriculum li strong{	font-weight: 300;}
#curriculum li p{	font-size: 0.9em;}
.beige{	background: #f8f3ec; padding: 120px;}
.gris{	background: #eff4f8; padding: 120px;}
.beige .container{	background: none;}
.gris .container{	background: none;}
.frase{	font-family: 'Lustria', serif; max-width: 800px; color: #777; font-size: 23px; line-height: 40px; margin: 0 auto;}
.frase2{ color: #5c8cad; margin: 40px auto; background: #e5eef4; 
	font-size: 20px; line-height: 24px; font-weight: 300; padding: 40px 0; display: block;}
.frase3{	color: #5c8cad; font-size: 20px; line-height: 24px; font-weight: 300; }
.ent{	max-width: 500px; margin: 60px auto;}
.firma, .firma a, .frase4 h2{	font-size: 14px; color: #999;}
.firma a{	padding: 5px 15px; display: inline-table;}
.firma a:hover{	background: #fff;}
.linea{	border-top: 4px solid #dce5eb; width: 200px; margin: 80px auto;}
.frase4 h2{	margin: 0 0 40px 0;}
.frase3 h2{	margin: 10px 0; font-weight: 600; font-size: 20px;}
.espe{	padding: 40px 0;}
.espe h3{	color: #5c8cad; font-size: 26px; margin-bottom: 10px;}
.espe a{	font-size: 14px; color: #52595d; padding: 5px 15px 2px 15px; display: inline-table; border: 1px solid #dce5eb;}
.espe a:hover{	background: #e5eef4;}
.boton{	margin-top: 80px; font-size: 0.8em; line-height: 1.5em;}
.boton a{    font-size: 15px; color: #777; padding: 8px 15px 5px 15px; display: block; 
    border: 1px solid #777; max-width: 340px; width: 90%; margin: 10px auto 0 auto;}
.boton a:hover{	background: #fff; opacity: 0.7; border: 1px solid #bbb;}
.boton2 a{ font-size: 15px; color: #777; padding: 8px 15px 5px 15px; display: block; max-width: 130px; width: 90%; margin: 10px auto 0 auto;}
footer .boton{ max-width: 200px; margin: 30px auto ;}
footer .boton a{font-size: 14px;}
#terapias{	margin: 80px 0 50px 0;}
#terapias h2{	font-size: 20px; color: #276189; margin-bottom: 20px;}
#terapias img{	position: relative; z-index: 3;}
#terapias .c-terapia{	position: relative; z-index: 2; border: 4px solid #dae2ea; padding: 30px 30px 20px 30px; top: -10px;}
#terapias .nota{	margin-top: 30px;}
.tooltip { position: relative; display: inline-block; background:#276189; color: #fff; border-radius: 14px; width: 28px; height: 28px;}
#fachada{ padding: 6px 4px 0 4px; width: 16px; height: 18px;}
.tooltip { position: relative; display: inline-block; background:#276189; color: #fff; border-radius: 14px; width: 28px; height: 28px;}
.tooltip .tooltiptext {
    visibility: hidden; font-size: 0.9em; background-color: #fff; color: #777; padding: 15px; border-radius: 6px;
    position: absolute; z-index: 1; border: 4px solid #dae2ea;}
.tooltip .tooltiptext {
    width: 250px; top: 100%; left: 50%; margin-left: -140px; /* Use half of the width (250/2 = 60), to center the tooltip */}
.tooltip:hover .tooltiptext {    visibility: visible;}
.tooltip img{	display: block;}
#fachada{	margin-left: 10px;}
.nota{	font-size: 0.8em; line-height: 1.5em;}
.bottom{
	margin-bottom: 80px;}
footer, footer .container{
	background: #dce5eb;}
footer{
	padding: 60px 0 50px 0; }
footer .membrete{
	color: #555; text-transform:uppercase; line-height: 18px; border-bottom: 1px solid #777; 
	padding-bottom: 6px; margin-bottom: 4px; display: block;}
footer .col{
	font-size: 13px; font-weight: 600;}
footer h4, footer .h4{
	font-size: 14px; font-weight: 600; display: inline-table; border-bottom: 1px solid #777; 
	padding-bottom: 4px; line-height: 1.2em; margin-bottom: 4px;}
footer p{
	font-size: 0.9em;}
footer .col-2 p{
	font-size: 0.8em; line-height: 1.8em; margin: 0 30px;}
address{
	font-style: normal; display: inline; font-size: 1.1em; font-weight: 600;}
.telefono, #movil {
	margin: 0;}
.telefono a{
	font-size: 40px; font-weight: 300; color: #5c8cad; 
	padding: 10px 20px 5px 20px; display: block;}
.telefono a:hover, #movil a:hover, #email a:hover{
	color: #222;}
.telefono .subt{	margin-top: 20px;}
#movil a{	font-size: 18px; color: #5c8cad; padding: 10px; display: block; letter-spacing: 2px;}
#email a{	font-size: 18px; color: #5c8cad; padding: 0 10px 5px 10px; display: block; letter-spacing: 1px;}
#frase-contacto{	margin: 0 0 0;}
.sala{	margin: 80px 0;}
.borra{	clear: both;}
.flecha a{	display: block; width: 40px; height: 35px; padding-top: 5px; background: #5c8cad;
	position: fixed; bottom: 40px; right: 40px; z-index: 10;}
.col-3 .nota{	font-size: 0.6em; line-height: 1.3em; text-transform:uppercase; font-weight: 600;
	display: block; margin: 0 auto; max-width: 200px; color: #00407d;}
#aviso{ 	font-size: 0.7em; background: #afc0cb;}
#aviso a{	color: #555; display: inline-block; padding: 5px 0;}
iframe{
	border: none; width: 100%; z-index: 2; display: block;
	-webkit-filter: grayscale(30%);
       -moz-filter: grayscale(30%);
        -ms-filter: grayscale(30%);
         -o-filter: grayscale(30%);
            filter: grayscale(30%);}
.m-bottom{
	margin-bottom: 100px;}
.m-bottom2{
	margin-bottom: 20px;}
.fondo-azul{
	color: #5c8cad; margin: 40px auto; background: #e5eef4; 
	padding: 40px 0; display: block;}
.fondo-azul .numero{
	font-size: 70px; color: #fff;}
.fondo-azul .tit{
	font-size: 30px; line-height: 24px; font-weight: 300; }
.fondo-azul .enviar{
	display: block; color: #fff; padding: 10px 2%; letter-spacing: 1px; font-size: 15px;
	width: 96%; max-width: 240px; margin: 0 auto;}
.fondo-azul .boton-azul .enviar{
	background: #1f76b2;}
.fondo-azul .mtop100{
	margin-top: 100px;}
.fondo-azul .mtop20{
	margin-top: 20px;}
.vacaciones{
	letter-spacing: 1px; text-transform:uppercase ; color: #e39162;}
.online a{
	display: block; padding: 9px 10px 7px 10px; color: #1f76b2; border: 1px solid #1f76b2; 
	font-size: 14px; position: relative; top: 20px; right: 0; width: 160px; float: right;}
.online a:hover{
	background: #fff; opacity: 0.8;}
.borde{
	border: 3px solid #e5eef4; margin-top: 60px; margin-bottom: 60px; padding: 40px;}
.mapa{padding: 150px 0; background: url( "../imagenes/mapa-g.jpg") no-repeat left top; background-size: cover; }
.mapa a{margin: 0 auto; width: 100%; max-width: 450px; text-transform: uppercase; font-size: 0.8em; background: #fff; padding: 13px 0;}

@media only screen 
	and (max-width : 530px){
.pantallas, #imagen .pantallas, .guion, .salto, #banda a{
	display: none;}
.block{
	display: block;}
#banda{
	font-size: 15px; text-align: center; padding: 4px;}
body{
	font-size: 1em;}
.container {
	width: 100%; margin: 0 auto; }
.todo {
	margin: 0 20px;}
#cabecera{
	margin-top: 60px;}
#cabecera .logo {
    font-size: 28px; line-height: 32px;}
#cabecera .membrete {
    font-size: 14px; line-height: 20px; margin-top: 5px;}
#menu{
	font-size: 1em; margin: 40px 0 25px 0;}
#menu ul li a{
	padding: 15px 0; font-size: 20px;}
h1{
	font-size: 23px;}
.subt{
	font-size: 14px; }
.telefono .subt{
	margin-top: 70px;}
#subt-index{
	margin-top: 6px;}
p{
	font-size: 18px; line-height: 33px;}
.presentacion {
    margin-top: 60px;}
#curriculum{
	margin: 60px auto;}
#curriculum .izdo{
	width: 70%; max-width: 280px; margin: 0 auto; position: relative; z-index: 4;}
#curriculum .dcho{
	border: 4px solid #dce5eb; padding: 80px 20px 20px 20px; position: relative; z-index: 3; margin-top: -60px;}
#curriculum .dcho ul{
	margin-top: 30px;}
#curriculum h2 {
    font-size: 21px;}
#curriculum h4{
	font-size: 14px; line-height: 20px; padding-bottom: 10px;}
#curriculum #nav li a h3 {
    font-size: 15px;}
#curriculum li p {
    font-size: 1em;}
.linea {
    margin: 60px auto;}
.frase{
	font-size: 18px; line-height: 30px; margin: 0 30px;}
.frase2{
	font-size: 22px; line-height: 35px; padding: 30px;}
.frase3 {
    font-size: 19px; }
.frase3 h2{
	max-width: 270px; margin: 0 auto 20px auto;}
.gris, .beige{
	padding: 80px 0 50px 0;}
.trio .espe{
	border: 4px solid #dce5eb; padding: 30px 30px 10px 30px;}
.trio .espe, .trio .terapia{
	margin: 5% auto;}
.espe h3 {
    font-size: 23px;}
.espe a {
    font-size: 15px;}
#terapias h2{
	font-size: 18px;}
#duelo, #adicc{
	clear: both;}
#doble{padding: 0; margin-top: 60px;}
#doble .izda{
	padding: 10% 0 6% 0;}
#doble .dcha img{
	width: 100%; height: auto; display: block;}
.telefono a {
    font-size: 33px;}
.sala img{
	width: 100%; height: auto;}
.tooltip .tooltiptext {
    font-size: 1em;}
.firma a, .firma{
    font-size: 15px;}
.boton{
	font-size: 0.9em;}
.c-terapia .boton a{
	font-size: 17px; line-height: 24px; padding: 10px;}
.nota {
    font-size: 0.9em; line-height: 1.7em;}
footer {
    padding: 50px 0 35px 0;}
footer .col-1, footer .col-2{
	margin-bottom: 20px;}
footer .logo{
	font-size: 20px; line-height: 28px;}
footer .membrete{
	font-size: 13px; line-height: 20px;}
footer .col {
    font-size: 15px;}
footer .col-2 p{
	font-size: 0.9em; line-height: 1.7em;  margin: 0 20px;}
footer h4, footer .h4 {
    font-size: 15px;}
.col-3 .nota {
    font-size: 0.9em; line-height: 1.3em;}
iframe{
	height: 300px;}
#aviso{
	font-size: 14px; line-height: 1.5em; padding-top: 10px;}
#aviso a{
	padding: 0 0 10px 0;}
.flecha a{
	bottom: 10px; right: 10px;}
.online a{
	right: auto; margin: 0 auto; float: none;}
	.mapa{padding: 200px 0; background: url( "../imagenes/mapa-m.jpg") no-repeat left top; background-size: 100% auto; }
		.mapa .boton a{width: 200px; font-size: 15px;}
}
@media only screen 
and (min-width : 531px)
and (max-width : 750px) {
#imagen .movil, .movil, .salto{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 40px;}
h1 .block{
	display: block;}
#cabecera{
	margin-top: 80px;}
#cabecera .logo {
    font-size: 25px;}
#cabecera .membrete{
    font-size: 11px;}
#menu ul li{
	float: left; width: 33%;}
h1{
	font-size: 23px;}
.subt{
	font-size: 12px;}
.presentacion {
    margin-top: 60px;}
#curriculum{
	margin: 60px auto;}
#curriculum .izdo{
	width: 60%; margin: 0 auto; position: relative; z-index: 4;}
#curriculum .dcho{
	border: 4px solid #dce5eb; padding: 100px 20px 20px 20px; position: relative; z-index: 3; margin-top: -80px;}
#curriculum .dcho ul{
	margin-top: 30px;}
#curriculum h2 {
    font-size: 22px;}
#curriculum h4{
	font-size: 14px;}
#curriculum #nav li a h3 {
    font-size: 15px;}
.linea {
    margin: 60px auto;}
.frase{
	font-size: 18px; line-height: 30px; margin: 0 60px;}
.frase2{
	font-size: 18px; padding: 30px;}
.frase3 {
    font-size: 19px; max-width: 330px; margin: 0 auto;}
.frase3 h2{
	max-width: 270px; margin: 0 auto 20px auto;}
.gris, .beige{
	padding: 80px 0 50px 0;}
.espe h3 {
    font-size: 25px;}
.espe a {
    font-size: 13px;}
.trio .espe{
	border: 4px solid #dce5eb; padding: 30px 30px 10px 30px;}
.trio .espe, .trio .terapia{
	margin: 5% auto;}
#duelo, #adicc{
	clear: both;}
#doble{padding: 0; margin-top: 60px;}
#doble .izda{
	padding: 10% 0 6% 0;}
#doble .dcha img{
	width: 100%; height: auto; display: block;}
.telefono a {
    font-size: 34px;}
.sala img{
	width: 100%; height: auto;}
footer {
    padding: 50px 0 35px 0;}
footer .col-1{
	margin-bottom: 30px;}
footer .col-2, footer .col-3{
	width: 50%; float: left;}
footer .col-2 p{
	line-height: 1.7em;  margin: 0 20px;}
footer h4, footer .h4 {
    font-size: 12px;}
.flecha a{
	bottom: 20px; right: 20px;}
.mapa{padding: 100px 0; background: url( "../imagenes/mapa-t.jpg") no-repeat left top; background-size: 100% auto; }
	.mapa .boton a{width: 250px; font-size: 15px;}
}
@media only screen 
and (min-width : 751px)
and (max-width : 950px) {
.movil, #imagen .movil{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 60px;}
#cabecera{
	margin-top: 80px;}
#cabecera .logo {
    font-size: 25px;}
#cabecera .membrete {
    font-size: 11px;}
#menu{
	width: 600px; margin: 0 auto; }
#menu ul li{
	float: left; width: 33%;}
h1{
	font-size: 23px;}
.subt{
	font-size: 12px;}
#curriculum{
	width: 75%; margin: 60px auto;}
#curriculum .izdo{
	width: 60%; margin: 0 auto; position: relative; z-index: 4;}
#curriculum .dcho{
	border: 4px solid #dce5eb; padding: 100px 20px 20px 20px; position: relative; z-index: 3; margin-top: -80px;}
#curriculum .dcho ul{
	margin-top: 30px;}
#curriculum h4{
	font-size: 14px;}
.frase{
	font-size: 20px; line-height: 33px; margin: 0 60px;}
.frase2{
	font-size: 18px; }
.frase3 {
    font-size: 19px; }
.gris, .beige{
	padding: 80px 0 50px 0;}
.trio .espe{
	border: 4px solid #dce5eb; padding: 30px 30px 10px 30px;}
.trio .espe, .trio .terapia{
	width: 75%; margin: 5% auto;}
#duelo, #adicc{
	clear: both;}
#doble{padding: 0; margin-top: 80px;}
#doble .izda{
	width: 50%; float: left; padding-top: 15%;}
#doble .dcha{
	width: 50%; float: right;}
#doble .dcha img{
	width: 100%; height: auto; display: block;}
.sala img{
	width: 100%; height: auto; max-width: 600px;}
footer .col-1{
	margin-bottom: 30px;}
footer .col-2{
	width: 50%; float: left; max-width: 270px;}
footer .col-2 p{
	line-height: 1.7em;  margin: 0 20px;}
footer .col-3{
	max-width: 360px; float: right;}
.flecha a{
	bottom: 20px; right: 20px;}
.mapa{padding: 90px 0; background: url( "../imagenes/mapa-2.jpg") no-repeat left top; background-size: 100% auto; }
	.mapa .boton{margin-top: 30px;}
.mapa .boton a{width: 250px; font-size: 14px;}
}
@media only screen 
and (min-width : 951px)
and (max-width : 1199px) {
.movil, #imagen .movil, .salto{
	display: none;}
.container {
	width: 100%; margin: 0 auto;}
.todo {
	margin: 0 60px;}
#cabecera{
	margin-top: 40px;}
#menu{
	width: 600px; margin: 0 auto; }
#menu ul li{
	float: left; width: 33%;}
#curriculum{
	background: url(../imagenes/linea.jpg) 30% top repeat-y;}
#curriculum .izdo{
	width: 36%; float: left; padding: 80px 0;}
#curriculum .dcho{
	width: 50%; float: right; 
	border-right: 4px solid #dce5eb; padding: 8% 7% 7% 0;}
#curriculum .dcho ul{
	margin-top: 30px;}
#curriculum .cv-top{
	width: 70%; margin-left: 30%; border-top: 4px solid #dce5eb;}
#curriculum h4{
	font-size: 14px;}
.frase2{
	font-size: 18px;}
.trio .espe{
	width: 46%; float: left; margin: 0 2%;}
.trio .terapia{
	width: 70%; margin: 5% 15%;}
#duelo, #adicc{
	clear: both;}
#doble{padding: 0; margin-top: 80px;}
#doble .izda{
	width: 50%; float: left; padding-top: 15%;}
#doble .dcha{
	width: 50%; float: right;}
#doble .dcha img{
	width: 100%; height: auto; display: block;}
footer .col-1, footer .col-2, footer .col-3{
	width: 33%; float: left;}
footer .col-2 p{
	line-height: 1.7em;}
.flecha a{
	bottom: 30px; right: 30px;}
.mapa{padding: 120px 0; background: url( "../imagenes/mapa-2.jpg") no-repeat left top; background-size: 100% auto; }
	.mapa .boton{margin-top: 10px;}
	.mapa .boton a{width: 300px; font-size: 15px;}
}
@media only screen 
and (min-width : 1200px){ 
.movil, #imagen .movil, .tablet, .salto{
	display: none;}
body{
	background: url(../imagenes/fondo.jpg) no-repeat top center; background-size: 100% auto;}
.container, .container2 {
	width: 1200px; margin: 0 auto; background: #fff;}
.container2{
	background: none;}
.beige .container{
	width: 100%;}
.todo {
	margin: 0 80px;}
#cabecera{
	margin-top: 40px;}
#cabecera .logo{
	padding: 60px 0 0 0; font-size: 32px;}
#menu{
	width: 600px; margin: 0 auto; }
#menu ul li{
	float: left; width: 33%;}
#curriculum{
	background: url(../imagenes/linea.jpg) 30% top repeat-y;}
#curriculum .izdo{
	width: 36%; float: left; padding: 80px 0;}
#curriculum .dcho{
	width: 50%; float: right; 
	border-right: 4px solid #dce5eb; padding: 100px 7% 100px 0;}
#curriculum .dcho ul{
	margin-top: 60px;}
#curriculum .cv-top{
	width: 70%; margin-left: 30%; border-top: 4px solid #dce5eb;}
.trio .terapia, .trio .espe{
	width: 29%; float: left; margin: 0 2%;}
#estres{
	clear: both;}
#doble{padding: 0; margin-top: 80px;}
#doble .izda{
	width: 50%; float: left; padding-top: 15%;}
#doble .dcha{
	width: 50%; float: right;}
#doble .dcha img{
	width: 100%; height: auto; display: block;}
footer .col-1, footer .col-2, footer .col-3{
	width: 33%; float: left;}
.mapa .boton a{width: 300px; font-size: 15px;}}
@media only screen 
	and (min-width : 1450px){ 
body {
    font-size: 1.2em; line-height: 1.8em;}
.container, .container2 {
	width: 1400px; }
#banda {
	font-size: 14px;}
#imagen img, #curriculum img {
	width: 85%; margin: 0 auto;}
#menu {
    font-size: 0.9em;}
h1 {
    font-size: 30px;}
.trio .terapia, .trio .espe {
    width: 27%; margin: 0px 3%;}
.tooltip {
    width: 32px; height: 32px; border-radius: 16px;}
.frase {
    font-size: 26px; line-height: 46px;}
footer .container .todo{margin: 0;}
footer .col-1, footer .col-2, footer .col-3 {
    width: 29%;}
footer .col-2{ margin: 0 6%;}
.col-3 .nota {
    font-size: 0.7em; line-height: 1.4em; max-width: 400px;}
.firma, .firma a, .frase4 h2, .subt, .gris h3, .beige h3  {
    font-size: 17px;}
.subt, .gris h3, .beige h3 {
    margin-bottom: 30px;}
.frase4 h2 {
    margin: 0 0 80px 0;}
.boton a {
    font-size: 17px; padding: 10px 15px 10px 15px;}
.espe a {
    font-size: 16px; padding: 10px 20px 8px 20px;}
}