﻿
/* ----------- Estilos de Párrafo ------------ */

.capaTotal {width:0px; margin:-30px auto 40px auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}	

h1 {font-weight:600; font-size:34px; line-height:40px;}
h2 {font-weight:600; font-size:30px; line-height:36px;}
h3 {font-weight:600; font-size:24px; line-height:28px;}
h4 {font-weight:600; font-size:20px; line-height:24px;}

.fontPrim {font-family:'GothXNw', Arial;}
.fontSecu {font-family:'GothXNw', Arial;}

.textoTitulo {width:100%; margin:20px auto 10px; font-size:30px; line-height:50px; border-bottom:solid 1px #000000;}

.textoGrande {font-size:60px; line-height:70px;}
.textoMedio  {font-size:35px; line-height:45px;}
.textoResalt {font-size:27px; line-height:32px;}
.textoNormal {font-size:22px; line-height:26px;}

.anotacion {margin:40px auto; text-align:center;}
.anotaTxt, .comillaIzda, .comillaDcha {height:70px; padding:5px 25px; font-size:35px; line-height:50px; float:none; display:inline;}
.anotaTxt    {font-style:italic; color:#00599d;}
.comillaIzda {width:50px; background:url(images/comillasIzda.svg) no-repeat top center; background-size:contain;}
.comillaDcha {width:50px; background:url(images/comillasDcha.svg) no-repeat top center; background-size:contain;}

.parra-10 p {margin-bottom:15px;}
.parraSep p {margin-bottom:1.2em;}

.pad-left  {padding-left:20px;}
.pad-right {padding-right:20px;}
.pad-total {padding:20px;}
.pad-lados {padding:0px 20px;}
.pad-tot40 {padding:40px;}
.pad-lad40 {padding:0px 40px;}
.pad-2040  {padding:20px 40px;}
.pad-2010  {padding:20px 20px 20px 0px;}


/* ---------- Separadores ------------------ */

[class^="separa-"], [class*=" separa-"], .limpiar, .separar {width:100%; clear:both;}
.separa-01 {height:1px;}
.separa-02 {height:2px;}
.separa-03 {height:3px;}
.separa-05 {height:5px;}
.separa-10 {height:10px;}
.separa-15 {height:15px;}
.separa-20 {height:20px;}
.separa-25 {height:25px;}
.separa-30 {height:30px;}
.separa-40 {height:40px;}
.separa-50 {height:50px;}
.separa-60 {height:60px;}
.separa-70 {height:70px;}
.separa-80 {height:80px;}
.separa-90 {height:90px;}
.separa-100 {height:100px;}
.separa-120 {height:120px;}
.separa-150 {height:150px;}
.separa-200 {height:200px;}

.menos10 {margin-top:-10px;}
.menos20 {margin-top:-15px;}
.menos30 {margin-top:-20px;}

.filoImgAzul, .filoImgAmar {width:100%; margin:auto; text-align:center;}
.filoImgAzul {background:#00599d;}
.filoImgAmar {background:#9cbfda;}

.alto1 {height:1px;}
.alto2 {height:2px;}
.alto4 {height:4px;}
.alto5 {height:5px;}
.alto10 {height:10px;}


/* ------------ Capas de Fondos ------------ */

.fondoPuntoNegro {background:url(modulos/puntoNegro.png) repeat top center;}
.fondoPuntoBlanc {background:url(modulos/puntoBlanco.png) repeat top center;}


/* -------- Sección Inicio --------------- */	

#slider-contenedor {z-index:10;}
#slider-contenedor, .headerimg {margin:0px;}
.headerimg {width:100%; background:no-repeat center right #ffffff; background-size:cover; position:absolute;}

.franjaInicio {background:url(images/secInicio/accion.jpg) no-repeat center center;}
.imgAnchoTotal {width:100%; background-size:cover;}
.imgAltoTotal  {height:auto;}

.txtDire   {font-size:17px; line-height:24px;}
.txtTele a {font-size:22px; font-weight:600;}
.txtMail a {font-size:18px;}


/* -------- Sección Nosotros -------------- */

.equipoCont {width:250px; height:350px; margin:15px; text-align:center;}
.equipoImg a {display:inherit;}
.equipoFoto, .equipoImg img {width:220px; border-radius:15px;}
.equipoFoto {height:250px; text-align:center; margin:auto; line-height:250px; box-shadow:0px 0px 10px rgba(0,0,0,0.5); overflow:hidden;}
.equipoFoto img {vertical-align:middle; display:inline;}
.equipoTxt {height:90px; margin-top:0px; padding:10px; position:relative; font-size:18px; font-weight:600; line-height:20px; pointer-events:none;}
.equipoFoto:hover .equipoTxt {margin-top:-60px;}
.equipoNombre {margin-top:15px; font-weight:600; font-size:20px; line-height:22px; padding:0px 10px; color:#000;}
.equipoCargo  {margin-top:0px; font-weight:400; font-size:20px; line-height:22px; padding:0px 10px; color:#00599d;}

.izda2 {margin-left:16.6% !important;}
.izda3 {margin-left:12.5% !important;}

.modal {position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.6); opacity:0; text-align:left; pointer-events:none; z-index:99999;}
.modal:target {opacity:1; pointer-events:auto;}

.modalVentana {width:800px; height:500px; top:50%; left:50%; background:#ffffff; box-shadow:0px 0px 25px rgba(0,0,0,0.8); overflow:hidden;
    border-radius:20px; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); position:fixed;}
	.modalSalir {width:100%; height:50px; line-height:48px; padding:0px 15px; background:#00599D; border:solid 2px #fff; border-radius:20px 20px 0 0;}
	.modalSalir a {color:#ffffff;}
	.modalSalir a:hover {color:#BAD3E2;}
	.modalSalir .iconCerrar {margin:0 7px;}
	.modalFotos img {width:220px; margin:30px 0px 0px 30px; border-radius:15px; box-shadow:0px 0px 10px rgba(0,0,0,0.5); position:fixed;}
	.modalInfor {top:90px; left:250px; bottom:20px; padding:0px 30px; color:#000000; text-align:justify; position:fixed; overflow-y:auto;}
	.modalInfor p {margin-top:15px;}


/* -------- Sección Orto Técnica ---------- */


/* -------- Secciones Amputados ----------- */

#capaFlechas {margin:25px auto auto auto; text-align:center; border-top:solid 1px #00599d;}
	.flechaIcono {float:none; display:inline;}
	.flechaIcono img {margin:15px 20px; vertical-align:middle;}


/* ---------- Sección Servicios ----------- */

#secServicios .linea {width:110%; margin-left:-5%; background:url(images/secServicios/lineaAmarilla.png) repeat-x center center;}
#secServicios .ancho-100 ul {text-align:left; margin-left:400px;}


/* -------- Sección Orto Infantil --------- */



/* -------- Sección Podología ------------- */

.tablaPrecios {width:600px; margin:auto; font-size:25px; line-height:25px;}
.tablaFila {width:100%; border-bottom:solid 1px rgba(0,0,0,0.1); border-left:solid 1px rgba(0,0,0,0.1); border-right:solid 1px rgba(0,0,0,0.1);}
.tabla-80, .tabla-20 {padding:15px 20px; float:left; display:inline;}
.tabla-80 {width:410px; text-align:left;}
.tabla-20 {width:109px; text-align:right; border-left:solid 1px rgba(0,0,0,0.1);}
.tablaGris {background:#eeeeee;}
.tablaBordeSup {border-top:solid 1px rgba(0,0,0,0.1);}


/* -------- Sección Contacto -------------- */

.mapas   {width:90%; height:350px; margin:auto; box-shadow:0 0 15px rgba(0,0,0,0.3);}
.mapa100 {width:100%; height:550px; margin:auto;}
.mapaFon {width:100%; height:100%; margin:0; position:absolute; z-index:10;}
.hoverON {pointer-events:none;}
.inputrans {display:none;}

.textoTitulo {width:100%; color:#333; font-size:28px; line-height:50px; text-align:center; border-bottom:solid 2px #bd9bac;}
.textoResaltado {font-weight:400; font-size:20px;}

#secContacto .capa1000 p {margin-bottom:10px;}
#secContacto .ancho-50 p {margin-bottom:5px;}

#contactos {padding:20px 30px; text-align:left; border:solid 3px #BDD4E6; border-radius:20px; background:#fff;}
#contactos input, #contactos select, #contactos textarea {padding:10px; font-size:16px; line-height:20px;
	border-radius:5px; border:solid 1px rgba(0,0,0,0.2); background:rgba(0,0,0,0.02);}
#contactos input:hover, #contactos textarea:hover {background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.2);}
.contactoTexto {padding:10px; text-align:center; font-weight:800; font-size:25px; line-height:25px;}

.cajaTxt {width:90%; margin:auto !important; padding:20px 20px 10px 20px; border:solid 1px #1c4387;}
.contactoEtiqueta {font-weight:600;}

.contaMgIzda {margin-left:20px;}
.contaMgDcha {margin-right:20px;}
.contaEmpresa {width:100%;}
.contaNombre  {width:390px;}
.contaTelef   {width:200px;}
.contaEmail   {width:300px;}
.contaObserva {width:100%; height:140px;}

.contactoEnviar {display:flex; flex-wrap:wrap; justify-content:center;}
.contactoCheck {margin:0 20px; transform:scale(1.4);}

#contactoBoton input {color:#fff; background:#00599D; cursor:pointer;}
#contactoBoton input:hover {color:#fff; background:#000;}
	
#contactos .botonWeb a {padding:10px 15px;}

.modalVentanaConta {width:500px; height:200px; top:45%; left:50%; background:#fff; box-shadow:0px 0px 25px rgba(0,0,0,0.8); overflow:hidden;
    border-radius:20px; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); position:fixed;}
	.formularioEnviado {padding:25px; font-size:22px; font-weight:400; line-height:25px; text-align:center;}
	.formularioEnviado p {padding:10px 0px;}
	


/* ---------------------------- RESPONSIVE ---------------------------------------*/


@media only screen and (min-width: 1600px) {

.soloBig {display:block;}

h1 {font-size:40px; line-height:46px;}
h2 {font-size:32px; line-height:35px;}
h3 {font-size:28px; line-height:32px;}
h4 {font-size:24px; line-height:28px;}

.menos10 {margin-top:-10px;}
.menos20 {margin-top:-20px;}
.menos30 {margin-top:-30px;}

.textoGrande {font-size:70px; line-height:80px;}
.textoMedio  {font-size:45px; line-height:60px;}
.textoResalt {font-size:32px; line-height:40px;}
.textoNormal {font-size:26px; line-height:30px;}

.anotacion {margin:50px auto;}
.anotaTxt, .comillaIzda, .comillaDcha {height:80px; padding:10px 30px; font-size:40px; line-height:60px;}
.comillaIzda {width:60px;}
.comillaDcha {width:60px;}


/* -------- Sección Inicio --------------- */

.txtDire   {font-size:20px; line-height:28px;}
.txtTele a {font-size:22px;}
.txtMail a {font-size:18px;}


/* -------- Sección Podología ------------- */

#secPodologia .ancho-100 {width:90%; margin-left:5%;}


}



@media only screen and (max-width: 999px) {

.textoGrande {font-size:35px; line-height:40px;}
.textoMedio  {font-size:25px; line-height:30px;}
.textoResalt {font-size:22px; line-height:25px;}
.textoNormal {font-size:18px; line-height:22px;}

.lista-titular {margin:40px 0px 20px 0px;}
.listaTopos li, .listaOrdenada li {padding:10px auto 50px 20px;}
#secCookies .listaTopos li {word-break:break-all; margin:10px auto 10px 10px;}

.separa-10 {height:5px;}
.separa-20 {height:10px;}
.separa-30 {height:15px;}
.separa-40 {height:20px;}
.separa-50 {height:25px;}
.separa-60 {height:30px;}
.separa-80 {height:40px;}
.separa-90 {height:45px;}
.separa-100 {height:50px;}
.separa-120 {height:60px;}
.separa-150 {height:75px;}
.separa-200 {height:100px;}

.menos10 {margin-top:0px;}
.menos20 {margin-top:-5px;}
.menos30 {margin-top:-10px;}

.parra-10 p {margin-bottom:10px; padding:0px 10px;}
.capaTotal {width:0px; margin:0px 0px 20px 0px;}

.ancho-50 {width:100%;}
.movil-50 {width:46%; margin:auto 2% !important;}
.flotar {margin:20px auto; float:none; text-align:center;}
.flotar img {max-width:95%;}

.pad-left  {padding-left:10px;}
.pad-right {padding-right:10px;}
.pad-total {padding:10px;}
.pad-lados {padding:0px 10px;}
.pad-tot40 {padding:20px;}
.pad-lad40 {padding:0px 20px;}
.pad-2040  {padding:10px 20px;}

.anotacion {margin:20px auto;}
.anotaTxt, .comillaIzda, .comillaDcha {height:35px; padding:0px 15px; font-size:28px; line-height:35px;}
.comillaIzda {width:35px;}
.comillaDcha {width:35px;}

	
/* -------- Sección Inicio ------------ */	

#slider-contenedor {z-index:10;}
#slider-contenedor, .headerimg {margin:0px;}
.headerimg {width:100%; background:no-repeat center right #ffffff; background-size:cover; position:absolute;}

#secInicio .ancho-33 {width:100%; margin:auto;}


/* -------- Sección Nosotros -------------- */

#secNosotros .ancho-33 {width:100%; margin:auto;}
#secNosotros .ancho-25 {width:50%;}

.equipoCont {width:150px; height:auto; min-height:250px; float:left;}
.equipoFoto {width:150px; height:170px; line-height:170px;}
.equipoFoto img {vertical-align:middle; display:inline;}
.equipoImg {width:150px; height:auto; margin-left:0px}
.equipoNombre, .equipoCargo {font-size:16px; line-height:17px;}
.equipoTxt {display:none;}

.izda2, .izda3 {margin-left:0% !important;}

.modalVentana {width:92%; height:auto; top:10px; right:4%; left:4%; bottom:10px; border-radius:15px; transform:none; -webkit-transform:none;}
.modalSalir {height:45px; line-height:43px; border-radius:15px 15px 0 0;}
.modalFotos img {width:200px; margin:15px auto; position:relative; display:block !important;}
.modalInfor {width:90%; top:320px; left:20px; bottom:20px; padding:0px 15px; text-align:left;}
.modalInfor h2, .modalInfor h4 {text-align:center;}


/* -------- Sección Orto Técnica ---------- */

#secOrtoTecnica .ancho-33 {width:46%; margin:auto 2%;}
#secOrtoTecnica .ancho-16 {display:none;}

#secAmputado .ancho-30, #secAmputado .ancho-33, #secAmputado .ancho-40, #secAmputado .ancho-60, #secAmputado .ancho-70 {width:100%; margin:auto;}
#secAmputado .side {text-align:left;}

#secRehabilitacion .ancho-33 {width:46%; margin:auto 2%;}
#secRehabilitacion .ancho-16 {display:none;}
.movil-33 {margin-left:27% !important;}


/* -------- Sección Orto Infantil --------- */



/* -------- Sección Servicios --------- */

#secServicios .ancho-100 {width:90%; margin:auto; float:none;}
#secServicios .ancho-100 img {width:90px;}

#secServicios .ancho-60, #secServicios .ancho-40 {width:100%; text-align:center; float:none;}
#secServicios .ancho-60 .just {text-align:center;}
#secServicios .ancho-60 .pad-lados {padding:10px;}
#secServicios .ancho-100 ul {text-align:left; margin-left:100px;}


/* -------- Sección Podología ------------- */

#secPodologiaBase .ancho-30, #secPodologiaBase .ancho-33, #secPodologiaBase .ancho-40, #secPodologiaBase .ancho-60, #secPodologiaBase .ancho-70,
#secPodologia .ancho-30, #secPodologia .ancho-33, #secPodologia .ancho-40, #secPodologia .ancho-60, #secPodologia .ancho-70 {width:100%; margin:auto;}
#secPodologiaBase .ancho-33 img, #secPodologia .ancho-33 img {max-width:90%;}

#secPodologia .side {text-align:left;}

.tablaPrecios {width:98%; margin:auto; font-size:18px; line-height:20px;}
.tablaFila {width:100%; border-bottom:solid 1px rgba(0,0,0,0.1); border-left:solid 1px rgba(0,0,0,0.1); border-right:solid 1px rgba(0,0,0,0.1);}
.tabla-80, .tabla-20 {padding:2.5%; float:left; display:inline;}
.tabla-80 {width:69%; text-align:left;}
.tabla-20 {width:20%; text-align:right; border-left:solid 1px rgba(0,0,0,0.1);}
.tablaGris {background:#eeeeee;}
.tablaBordeSup {border-top:solid 1px rgba(0,0,0,0.1);}


/* -------- Sección Contacto -------------- */

#secContacto .flotar {float:none;}
#secContacto .contaMgIzda {margin:10px 0 0 0;}
#secContacto .ancho-50 {width:100%;}

.mapas, .mapa100 {height:300px;}
.textoTitulo {margin:20px auto 10px; font-size:22px; line-height:30px;}
.textoResaltado {font-weight:400; font-size:18px;}

#secContacto .capa1000 p {margin-bottom:10px;}

#contactos {width:95%; margin:auto; padding:10px;}
.contactoTexto {font-size:18px;}

.capa1000, .contaEmpresa, .contaNombre, .contaTelef, .contaEmail,.contaObserva {width:100%;}
.contaObserva {height:100px;}

.contactoEnviar {text-align:center; display:block;}
.contactoEnviar div {clear:both; margin:auto; padding-top:15px; text-align:center;}
.contactoCheck {margin:0 5px;}

.modalSalir {height:45px; line-height:43px;}
.modalVentanaConta {width:85%; height:auto; top:45%; right:7.5%; left:7.5%; bottom:auto; transform:translate(0%,-50%); -webkit-transform:translate(0%,-50%);}
.formularioEnviado {width:100%; margin:0px; padding:20px; font-size:20px; line-height:24px;}	

	
}



/* ------------------------- EFECTOS SCROLLER ---------------------------------- */

.scroller {}
.section {font-size:18px;}

.section:before, .section:after, .side:before, .side:after {content:" "; display:table;}
.section:after, .side:after {clear:both;}

.sideNone {float:none; margin:auto; padding:0; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
.side {float:left; margin:0; padding:0; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s;}
.side img {max-width:96%;}

/* Estados Inicial Animaciones */
.cbpInit .side, .cbpInit .sideNone {-webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform:scale(0.5); opacity:0;}					/* Estado Inicial */
.section.cbpAnimate .side, .section.cbpAnimate .sideNone {-webkit-transform:scale(1); -moz-transform:scale(1); transform:scale(1); opacity:1;}	/* Estado Final */
