@font-face{
	font-family: Poppins;
    src: url(../fonts/Poppins-ExtraLight.woff2),
         url(../fonts/Poppins-ExtraLight.woff),
	     url(../fonts/Poppins-ExtraLight.ttf);
    font-weight: 200; font-display: swap;}
@font-face{
	font-family: Poppins;
	src: url(../fonts/Poppins-Light.woff2),
         url(../fonts/Poppins-Light.woff),
	     url(../fonts/Poppins-Light.ttf);
	font-weight: 300; font-display: swap;}
@font-face{
	font-family: Poppins;
    src: url(../fonts/Poppins-Regular.woff2),
         url(../fonts/Poppins-Regular.woff),
	     url(../fonts/Poppins-Regular.ttf);
    font-weight: 400; font-display: swap;}
@font-face{
	font-family: Poppins;
    src: url("../fonts/Poppins-SemiBold.woff2"),
         url(../fonts/Poppins-SemiBold.woff),
	     url(../fonts/Poppins-SemiBold.ttf);
    font-weight: 600; font-display: swap;}
*{	margin: 0; padding: 0;}
body{ font-family: 'Poppins', sans-serif; font-size: 1.1em; line-height: 1.9em; color: #777;}
img a, a, a img{ text-decoration: none;}
#imagen{position: relative;}
#imagen img{ width: 100%; position: relative; z-index: 1; display: block;}
#imagen h2{position: absolute; z-index: 2; margin-top: 0; padding: 30px; text-align: center; font-weight: 300;
	background: url("../imagenes/fondo-morado.png"); color: #fff; animation: textAnimation 2s;}
img{height: auto;}
.neg{ font-weight: bold;}
.noneg{	font-weight: normal;}
#cabecera .telefono{float: right; width: 200px;}
#cabecera .telefono a{color: #b57edc; display: block; padding: 10px; font-weight: 200; font-size: 30px;}
#logo img{width: 100%; }
#menu ul li{ list-style-type: none; text-align: center;}
#menu ul li a{	color: #000; padding: 20px 0; display: block; letter-spacing: 0.5px;}
#menu ul .v a, #menu ul li a:hover{color: #7f4ca5;}
h1{text-transform: uppercase; font-weight: 400; margin-top: 200px;}
h1.c-contacto{margin-top: 100px;}
p{	margin: 8px 0; font-weight: 300;}
.centrado{text-align: center;}
.verde{margin-top: 100px;}
.grupo h3{font-size: 45px; line-height: 55px; font-weight: 300; color: #333; margin-bottom: 30px; padding-bottom: 10px;}
.grupo .dcho h3{font-size: 38px;}
.grupo .izdo h3{border-bottom: 2px solid #b57edc; display: table;}
.grupo .izdo .boton a{font-weight: 600; display: block; background: url("../imagenes/flecha.png") no-repeat right center;
padding-right: 60px; text-transform: uppercase; font-size: 14px; color: #333; width: 160px;}
.grupo .boton a:hover{font-size: 15px; width: 170px; padding-right: 50px;}
.grupo .cuadro, .equipo .ficha, .google .caja, .servicio{box-shadow: 0 0 30px #ccc; background: #fff;}
.grupo .cuadro h4{font-size: 19px; color: #333;}
.odonto{ background: url("../imagenes/diente.svg") no-repeat left top; padding-top: 55px; background-size: auto 35px;}
.estet{ background: url("../imagenes/estrella.svg") no-repeat left top; padding-top: 55px; background-size: auto 35px;}
.cirug{ background: url("../imagenes/maletin.svg") no-repeat left top; padding-top: 55px; background-size: auto 35px;}
.ortodon{ background: url("../imagenes/bracket.svg") no-repeat left top; padding-top: 55px; background-size: auto 35px;}
.equipo h2{text-transform: uppercase; color: #333; font-size: 47px; margin-top: 100px;}
.equipo p{margin: 40px auto; width: 600px;}
.equipo .ficha{border-radius: 20px; text-align: center; padding-bottom: 30px;}
.equipo .ficha img{ border-radius: 20px 20px 0 0; width: 100%;}
.equipo .ficha h4{font-size: 20px; font-weight: 400; margin-top: 20px; color: #333;}
.equipo .ficha p{width: 90%; margin: 10px auto;}
#video{margin: 100px auto; width: 100%; max-width: 720px; }
.filosofia, .servicio h4{color: #333;}
.filosofia h3{ font-size: 33px; font-weight: 600;}
.filosofia h4{color: #9e5fcc; font-size: 50px; line-height: 60px; font-weight: 200; margin-bottom: 40px;}
.filosofia p{margin-bottom: 30px;}
.filosofia p span{color: #7f4ca5; font-weight: 600;}
.apoyo{padding: 100px 0;}
.apoyo p span{color: #7f4ca5; font-weight: 400;}
.apoyo img{margin: 50px 0 0 0;}
.apoyo h5{font-size: 30px; line-height: 44px; margin-bottom: 40px; color: #7f4ca5; font-weight: 400;}
.apoyo .boton a, .grupo .dcho .boton a{background: #b57edc; color: #fff; display: block; border-radius: 10px; 
	letter-spacing: 0.5px; width: 170px; padding: 10px 15px; margin: 20px auto;}
.apoyo .boton a:hover, .grupo .dcho .boton a:hover{background: #7f4ca5;}
.puente{color: #fff; }
.puente p{width: 500px; font-size: 50px; line-height: 60px; font-weight: 200;}
.tres .uno img{width: 30px; vertical-align: middle;}
.verde .grupo .izdo ul{margin: 10px 0 0 20px; line-height: 35px;}
.grupo .cuadro-grande{text-align: center;}
.servicio{padding: 20px; margin-bottom: 80px;}
.servicio img{display: block; width: 100%; height: auto;}
.servicio h4{font-size: 20px; text-transform: uppercase;}
.b50{margin-bottom: 50px;}
.morado{color: #7f4ca5;}
.m100{margin-top: 100px;}
.datos a{font-size: 1.1em; color: #777; display: block; padding: 5px;}
footer{	color: #333; background: rgb(238,218,252); 
background: linear-gradient(121deg, rgba(238,218,252,1) 5%, rgba(190,120,240,1) 92%); font-size: 16px; padding-top: 100px;}
footer a{color: #333;}
address{ font-style: normal; display: inline;}	
.borra{	clear: both;}
#aviso{ font-size: 14px; background: #7f4ca5; color: #fff; margin-top: 100px;}
#aviso a{ color: #fff; display: inline-block; padding: 5px 0;}
iframe{	border: none; width: 100%; height: 500px; filter: grayscale(100%)}
.horario{background: #d7e8c4; padding: 30px; margin: 40px auto;}
.cuarto p{margin-left: 40px;}
.cuarto a:hover{color: #fff;}
.cuarto .puntero{padding-left: 40px; background: url("../imagenes/puntero.svg") no-repeat left top;}
.cuarto .reloj{padding-left: 40px; background: url("../imagenes/reloj.svg") no-repeat left top; background-size: 30px auto;}
.cuarto .sobre{padding-left: 40px; background: url("../imagenes/sobre.svg") no-repeat left top; background-size: 25px auto;}
.cuarto .telefono{padding-left: 40px; background: url("../imagenes/telefono.svg") no-repeat left top; background-size: 25px auto;}
.ojo{width: 50px; display: block;}
.lightbox {
  display: none; position: fixed;  z-index: 999; top: 0; left: 0; right: 0; bottom: 0; padding: 1em; background: rgba(0, 0, 0, 0.8);}
.lightbox:target {
  display: block;}
.lightbox span {
  display: block; width: 100%; height: 100%; 
	background-position: center; background-repeat: no-repeat; background-size: contain;}
.avisos{padding-bottom: 150px; text-align: left;}
.avisos h2{margin-top: 80px;}
.avisos h3{margin-top: 40px;}
.avisos ul li{margin-left: 20px;}
@keyframes textAnimation {
      0% { translate: 0 40rem;}
      100% {translate: 0 0;}}

@media only screen 
and (max-width : 520px){
	.pantalla, .tablet, .logo-pantallas{	display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.avisos{text-align: left;}
	.todo {	margin: 0 20px;}
	#cabecera .telefono {float: none; width: 100%;}
	#cabecera .telefono a { font-weight: 400; font-size: 22px;}
	#logo, .cuarto.logo{width: 80%; margin: 40px auto; max-width: 170px;}
	.cuarto.logo img{width: 90%;}
	#menu{margin-bottom: 40px; font-size: 1.1em;}
	#imagen h2{font-size: 20px; width: 90%; padding: 5%;}
	h1{font-size: 24px;}
	h2{font-size: 20px;}
	.odonto{ background: url("../imagenes/diente.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
	.estet{ background: url("../imagenes/estrella.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.cirug{ background: url("../imagenes/maletin.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.ortodon{ background: url("../imagenes/bracket.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
	.equipo p{width: 100%;}
	.equipo h2{font-size: 30px;}
	.equipo .ficha{width: 300px; margin: 5% auto;}
	.filosofia{background: #e4f8f7 url("../imagenes/fondo-filosofia-t.jpg") no-repeat center top; 
		background-size: 100% auto; padding: 98% 0 5% 0; }
	.filosofia p span{display: block;}
	.filosofia h3 { font-size: 24px;}
	.filosofia h4 { font-size: 40px;}
	.apoyo img {  width: 100%;}
	.apoyo h5 { font-size: 22px; line-height: 34px;}
	.puente{background: url( "../imagenes/puente-t.jpg") no-repeat center center; background-size: cover; 
	padding: 40px 0 40%; }
	.puente p { width: 80%; margin: 0 auto; font-size: 25px; line-height: 40px; font-weight: 300;}
	.tres{margin: 30px auto; }
	.tres .uno{width: 100%; margin: 30px 0;}
	.tres .uno img{display: block; margin: 0 auto 1px auto; height: 60px;}
	.grupo h3 { font-size: 26px; line-height: 38px;}
	.grupo .dcho h3 {    font-size: 26px; padding-top: 30px;}
	.grupo .izdo ul{list-style-type: none;}
	.verde .grupo .izdo ul { margin: 30px 0; font-size: 1.1em; line-height: 2.2em;}
	.grupo .izdo h3{margin: 20px auto;}
	.grupo .izdo .boton a { margin: 20px auto 30px auto;}
	.grupo .dcho{background: #d7e8c4; padding: 30px 20px 20px 20px;}
	.grupo .cuadro{width: 84%; padding: 10% 8% 10% 8%; margin: 0 0% 10% 0;}
	.grupo .dcho .boton a{margin-top: 30px;}
	.servicio{margin-bottom: 50px;}
	.servicio .dcho{ width: 90%; margin: 40px auto 0 auto; padding-bottom: 40px;}
	.servicio .ojo { margin: 30px auto;}
	footer{padding-top: 60px;}
	.cuarto .puntero, .cuarto .reloj, .cuarto .sobre, .cuarto .telefono, .cuarto p{
		background: none; padding: 0; margin-left: 0;}
	#aviso{padding-top: 10px;}
	#aviso a{display: block;}
	#aviso .guion{display: none;}
	footer{	background: rgb(238,218,252); background: linear-gradient(180deg, rgba(238,218,252,1) 1%, rgba(190,120,240,1) 80%);}
}

@media only screen 
and (min-width : 521px)
and (max-width : 750px) {
	.pantalla, .movil, .guion{ display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.avisos{text-align: left;}
	.todo {	margin: 0 30px;}
	#logo .logo-pantallas{display: none;}
	#logo .movil{display: block; width: 200px; margin: 50px auto;}
	#cabecera .telefono{float: none; margin: 20px auto;}
	#cabecera .telefono a{font-size: 24px; text-align: center; }
	#imagen h2 { font-size: 20px; width: 100%;  padding: 20px 0; margin-left: 0;}
	#logo{	width: 320px; margin: 20px auto;}
	#menu{	width: 400px; margin: 0 auto; font-size: 18px;}
	#menu ul li{ float: left; width: 33.33%;}
	.odonto{ background: url("../imagenes/diente.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
	.estet{ background: url("../imagenes/estrella.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.cirug{ background: url("../imagenes/maletin.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.ortodon{ background: url("../imagenes/bracket.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
	.equipo {width: 480px; margin: 0 auto;}
	.equipo p{width: 100%;}
	.equipo .ficha{width: 46%; margin: 2%; float: left; height: 380px;}
	.equipo .ficha h4 { font-size: 17px;}
	.equipo .ficha p{margin: 2px auto; font-size: 0.9em;}
	.tres{margin: 40px auto; text-align: center; width: 420px;}
	.tres .uno{width: 130px; margin: 1%; float: left;}
	.tres .uno img{display: block; margin: 0 auto 10px auto; height: 45px;}
	.grupo h3 { font-size: 34px; line-height: 48px;}
	.grupo .izdo ul{list-style-type: none;}
	.verde .grupo .izdo ul { margin: 40px 0; font-size: 1.1em; line-height: 2.2em;}
	.grupo .izdo h3{margin: 25px auto;}
	.grupo .izdo .boton a { margin: 30px auto 60px auto;}
	.grupo .dcho{background: #d7e8c4; padding: 30px 30px 20px 30px;}
	.grupo .cuadro{width: 88%; padding: 12% 6% 6% 6%; margin: 0 0% 3% 0;}
	.grupo .dcho .boton a{margin-top: 40px;}
	.equipo h2 {    font-size: 40px;}
	.servicio .izdo img{width: 80%; max-width: 350px; margin: 40px auto;}
	.servicio .dcho{ width: 90%; margin: 0 auto; padding-bottom: 40px;}
	.servicio .ojo { margin: 30px auto;}
	.apoyo img{max-width: 450px;}
	.filosofia{background: #e4f8f7 url("../imagenes/fondo-filosofia-t.jpg") no-repeat center top; 
		background-size: 100% auto; padding: 98% 0 5% 0; }
	.filosofia h3 { font-size: 26px;}
	.filosofia h4 { font-size: 42px;}
	.puente{background: url( "../imagenes/puente-t.jpg") no-repeat center center; background-size: cover; 
	padding: 40px 0 40%; }
	.puente p { width: 80%; margin: 0 auto; font-size: 25px; line-height: 40px; font-weight: 300;}
	footer{font-size: 17px;}
	.cuarto.logo{width: 180px; margin: 0 auto 80px auto; float: none;}
	.cuarto.logo img{width: 100%;}
	.cuarto{width: 100%; float: none; margin-top: 30px;}
	.cuarto.cont{width: 100%;}
	.cuarto p { margin-left: 0;}
	.cuarto .puntero{
		padding: 40px 0 0 0; background: url("../imagenes/puntero.svg") no-repeat center top; background-size: 30px auto;}
	.cuarto .reloj{
		padding: 40px 0 0 0; background: url("../imagenes/reloj.svg") no-repeat center top; background-size: 30px auto;}
	.cuarto .sobre{
		padding: 40px 0 0 0; background: url("../imagenes/sobre.svg") no-repeat center top; background-size: 25px auto;}
	.cuarto .telefono{
		padding: 40px 0 0 0; background: url("../imagenes/telefono.svg") no-repeat center top; background-size: 25px auto;}
	#aviso{padding-top: 15px;}
	#aviso a{display: block;}
	.b50 {margin-bottom: 40px;}
	footer{	background: rgb(238,218,252); background: linear-gradient(180deg, rgba(238,218,252,1) 1%, rgba(190,120,240,1) 80%);}
	.equipo .ficha-suelta{ margin-left: 28.33%;}
}

@media only screen 
and (min-width : 751px)
and (max-width : 999px) {
	.movil, .tablet{ display: none;}
	.container { width: 100%; margin: 0 auto; text-align: center;}
	.todo {	margin: 0 40px;}
	#cabecera .todo {margin: 0 20px;}
	#cabecera .telefono a { font-size: 24px;}
	#logo{	width: 350px; margin: 20px auto; padding-top: 50px;}
	#menu{	width: 400px; margin: 0 auto; font-size: 18px;}
	#menu ul li{ float: left; width: 33.33%;}
	#imagen h2 { font-size: 26px; width: 640px; margin-left: calc(50% - 350px);}
	.equipo {width: 700px; margin: 0 auto;}
	.equipo h2 { font-size: 40px;}
	.equipo .ficha h4 { font-size: 19px;}
	.verde{ padding: 0 0 50px 0;}
	.grupo h3 { font-size: 38px;}
	.grupo .izdo ul{list-style-type: none;}
	.verde .grupo .izdo ul { margin: 50px 0; font-size: 1.1em; line-height: 2.2em;}
	.grupo .izdo h3{margin: 25px auto;}
	.grupo .izdo .boton a { margin: 30px auto 60px auto;}
	.grupo .dcho{background: #d7e8c4; padding: 40px 40px 20px 40px;}
	.grupo .cuadro{width: 88%; padding: 6%; margin: 0 0% 3% 0;}
	.odonto{ background: url("../imagenes/diente.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.estet{ background: url("../imagenes/estrella.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.cirug{ background: url("../imagenes/maletin.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
.ortodon{ background: url("../imagenes/bracket.svg") no-repeat center top; padding-top: 60px; background-size: auto 40px;}
	.equipo .ficha{width: 46%; margin: 2%; float: left;}
	.equipo .ficha-suelta{ margin-left: 28.33%;}
	.tres{width: 550px; margin: 40px auto; text-align: right;}
	.tres .uno{width: 31.33%; margin: 1%; float: left;}
	.google .caja{height: 480px;}
	.servicio .izdo img{width: 350px; margin: 40px auto;}
	.servicio .dcho{ width: 90%; margin: 0 auto; padding-bottom: 40px;}
	.servicio .ojo { margin: 30px auto;}
	.apoyo img{max-width: 500px;}
	.filosofia{background: url("../imagenes/fondo-filosofia-t.jpg") no-repeat center top; background-size: cover;
	padding: 80% 0 5% 0; }
	.puente{background: url( "../imagenes/puente.jpg") no-repeat center center; background-size: 100% auto; 
	padding: 40px 0 330px; }
	.puente p { width: 70%; margin: 0 auto; font-size: 33px; line-height: 48px; font-weight: 300;}
	footer{background: #e9d7f9; font-size: 17px;}
	.cuarto.logo{width: 150px; margin: 0 auto 80px auto; float: none;}
	.cuarto.logo img{width: 100%;}
	.cuarto{width: 50%; float: left;}
	.cuarto.cont{width: 100%;}
	.cuarto p { margin-left: 0;}
	.cuarto .puntero{
		padding: 40px 0 0 0; background: url("../imagenes/puntero.svg") no-repeat center top; background-size: 30px auto;}
	.cuarto .reloj{
		padding: 40px 0 0 0; background: url("../imagenes/reloj.svg") no-repeat center top; background-size: 30px auto;}
	.cuarto .sobre{
		padding: 40px 0 0 0; background: url("../imagenes/sobre.svg") no-repeat center top; background-size: 25px auto;}
	.cuarto .telefono{
		padding: 40px 0 0 0; background: url("../imagenes/telefono.svg") no-repeat center top; background-size: 25px auto;}
	.b50 {margin-bottom: 30px;}
}
	
@media only screen 
and (min-width : 1000px){ 
	.movil, .tablet{ display: none;}
	.container { width: 90%; max-width: 1500px; margin: 0 auto;}
	#logo{	width: 350px; float: left; margin: 20px 0;}
	#menu{	width: 400px; float: left; font-size: 16px; margin-top: 75px; margin-left: calc(100% - 960px);}
	#menu ul li{ float: left; width: 33.33%;}
	#imagen h2{font-size: 30px; line-height: 45px; font-weight: 400; width: 740px; margin-left: calc(50% - 400px);}
	.verde{ background: url("../imagenes/verde.svg") repeat-y right top; background-size: 50% auto; padding: 80px 0 50px 0;}
	.verde .container, .verde .todo{margin: 0 auto; padding: 0;}
	.grupo .izdo{width: 30%; float: left;}
	.grupo .dcho{width: 66%; float: right;}
	.grupo .cuadro{width: 35%; height: 350px; float: left; padding: 6%; margin: 0 3% 3% 0;}
	.grupo p{font-size: 16px;}
	.grupo .cuadro-grande{width: 70%;  padding: 10% 15%; float: none; height: 450px;}
	.fichas{padding: 0 50px;}
	.apoyo img{max-width: 700px;}
	.equipo .ficha{width: 46%; margin: 2%; float: left;}
	.equipo .ficha-suelta{ margin-left: 28.33%;}
	.filosofia{background: url("../imagenes/fondo-filosofia.jpg") no-repeat center center; background-size: cover;
	padding: 100px 0% 100px 0; }
	.filosofia .container{max-width: 1250px; margin: 0 auto;}
	.filosofia .container .todo{width: 50%; margin-left: 50%;}
	.google .caja{height: 430px;}
	.google .caja p{margin: 0 auto; width: 540px;}
	.puente{background: url( "../imagenes/puente.jpg") no-repeat center center; background-size: cover; 
	padding: 200px 0; background-attachment: fixed;}
	.tres{width: 800px; margin: 50px auto;}
	.tres .uno{width: 31.33%; margin: 1%; float: left;}
	.servicio .izdo{width: 40%; vertical-align: middle; display: inline-block;} 
	.servicio .dcho{width: 50%; text-align: left; vertical-align: middle; display: inline-block; margin-left: 4%; 
		font-size: 15px; line-height: 28px;}
	.cuarto.logo{width: 20%;}
	.cuarto{width: 26.60%; float: left; }
	.cuarto .sobre{margin-top: 30px;}
	.logo img{width: 170px;}
}
@media only screen 
and (min-width : 1000px)
and (max-width : 1299px) {
	#cabecera .telefono {
    float: none; position: absolute; top: 10px; right: 50px;}
	#menu {    float: right;  margin-top: 75px;}
	#imagen h2 { font-size: 26px; width: 640px; margin-left: calc(50% - 350px);}
	.grupo .dcho { width: 60%;}
	.grupo .cuadro{width: 90%; height: auto; margin: 0 0 4% 0;}  
	.grupo .cuadro-grande {width: 80%; padding: 10%;}
	.grupo .cuadro-grande h3{font-size: 30px; line-height: 45px;}
	.apoyo img{width: 100%;}
	.equipo{max-width: 700px; margin: 0 auto;}
	.equipo.b50{margin-bottom: 50px;}
	.cuarto.logo{width: 100%; margin-bottom: 80px;}
	.cuarto{width: 33.33%;}
}
@media only screen 
and (min-width : 1300px){ 
	.servicio .izdo{width: 25%; vertical-align: middle; display: inline-block;} 
	.servicio .dcho{width: 60%; text-align: left; vertical-align: middle; display: inline-block; margin-left: 8%;
	font-size: 17px; line-height: 30px;}
	.todo {	margin: 0 50px;}
	#menu{	width: 400px; float: left; font-size: 16px; margin-top: 75px; margin-left: calc(100% - 950px);}
	.filosofia .container .todo{width: 40%; margin-left: 60%;}
	.equipo .ficha { width: 29.33%; }
	.apoyo .todo{margin: 0 200px;}
	.equipo .ficha-suelta{ margin-left: 35.33%;}


}