/* ==========================================================================
   FUENTES TIPOGRÁFICAS
   ========================================================================== */
@font-face {
    font-family: Philosopher-Bold;
    src: url(tipografias/Philosopher-Bold.ttf);
}

@font-face {
    font-family: OpenSans-Bold;
    src: url(tipografias/OpenSans-Bold.ttf);
}

@font-face {
    font-family: OpenSans-SemiBold;
    src: url(tipografias/OpenSans-SemiBold.ttf);
}


/* ==========================================================================
   VARIABLES
========================================================================== */
:root{
    --texto_titulos: Philosopher-Bold;
    --texto_subtitulos: OpenSans-Bold;
    --texto_gral: OpenSans-SemiBold;
    --color_uno: #399861;
    --color_dos: #002C76;
    --color_tres: #137774;
    --color_cuatro: #0074BD;
    --color_cinco: #FAFAFA;
    --color_seis: #FFF;
    --color_siete: rgba(57, 152, 97, 50%);
    --color_ocho: rgba(0, 0, 0, 50%);
    --color_nueve:#6ABD45;
    --tamano_titulos: 5rem;
    --tamano_subtitulos: 3rem;
    --tamano_gral: 1.6rem;
    --tamano_nav: 1.5rem;
    --tamano_iconos: 2rem;
    --tamano_acciones: 2.5rem;
    --tamano_botones: 2rem;
    --tamano_imgslider: 3rem;
    --tamano_cabeceraypie: 1.4rem;
    --ancho:114rem;
}

/* ==========================================================================
   ESTILOS GENERALES
========================================================================== */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    
}

html {
    font-size: 62.5%; /** Reset para REMS - 62.5% = 10px de 16px **/
    
}
body {
    color: var(--color_dos);
    font-family: var(--texto_gral), sans-serif;
    font-size: var(--tamano_gral);
}

a{
    text-decoration: none;
    color: var(--color_dos);
}

h1,
h2{
    text-transform: uppercase;
    text-align: center;
}

h1{
    font-family: var(--texto_titulos);
    font-size: 5rem;
    color: var(--color_uno);
}

h2{
    font-size: var(--tamano_subtitulos);
}


.contenedor{
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 10rem 0;
}

.fondo-color{
    background-color: var(--color_cinco);
}

.clip-uno{
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 84%);
}

.clip-dos{
    clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0 100%);
}

.clip-general{
    clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0 100%);
}

.uno{
    background: red;
}

.boton{
    margin: 6rem auto 0 auto;
    display: block;
    padding: 1.7rem 8rem;
    font-size: 2rem;
    font-family: var(--texto_subtitulos);
    border: 0;
    border-radius: 1rem;
    background-color: var(--color_uno);
    transition: all .3s;
}

.boton:hover{
    transform: scale(1.1);
    box-shadow: 4px 4px 5px var(--color_tres);
}

.boton a{
      color: var(--color_seis);  
}

.cabecera-titulo{ 
    padding: 8rem 0 10rem 0;
}

.txt-principal{
    max-width: 80rem;
    text-align: center;
    margin: 2rem auto 0 auto;
}

.fondo-imagen{
    background-image: url(../img/fonto_titulos.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 28rem;
}

::-moz-selection {
    background: var(--color_cinco);
    text-shadow: none;
}

::selection {
    background: var(--color_cinco);
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.activo{
    background-color: var(--color_cuatro);
}

/* ==========================================================================                                                           
   HEADER   
========================================================================== */
header{
   overflow: hidden;
}

.cabecera-superior{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--ancho);
    margin: 0 auto;
}

.cabecera-superior,
.contenedor-menu{
    max-width: var(--ancho);
    margin: 0 auto;
}

.cabecera-superior p{
    font-size: 1.4rem;
}

.logo{
    width: 15rem;
}

.horario-header{
    display: inline-block;
}

.icono_menu,
.icono_menu input{
    display: none;
}

.menu{
    background-color: var(--color_uno);
    z-index: 999;
}

nav{
    display: flex;
    justify-content: flex-end;
}

nav a{
    display: inline-block;
    padding: 1.8rem 1.5rem;
    color: var(--color_seis);
    font-size: var(--tamano_nav);
    text-transform: uppercase;x
    transition: all .3s;
}

nav a:hover{
    background-color: var(--color_cuatro);
}

/* ==========================================================================                                                           
    INICIO
========================================================================== */
/***********SLIDER***********/
.contenedor_slider{
    position: relative;
    margin: 0 auto;
}

.item{
    width: 100%;
    height: 76.8rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--color_siete);
}

.slider1{
    background-image: url(../img/slider_contacto.jpeg);
    background-size: cover;
}

.slider2{
    background-image: url(../img/fachada.jpg);
    background-size: contain;
}

.slider3{
    background-image: url(../img/slider_instalacion.jpg);
    background-size: contain;
}

.slider4{
    background-image: url(../img/slider_instalacion2.jpg);
    background-size: contain;
}

.slider5{
    background-image: url(../img/slider_instalacion3.jpg);
    background-size: contain;
}


/***********INICIO DESPUES DE SLIDER***********/
    h1.titulo span{
        display: block;
    }

    h1.titulo span:nth-of-type(1){
        margin-right: 16rem
    }

    h1.titulo span:nth-of-type(2){
        margin-left: 16rem
    }

p.frase{
    font-size: 3rem;
    text-transform: uppercase;
    text-align: center;
    margin-top: 5rem;
    line-height: 2.5;
}

p.frase span{
    position: relative;
}

.fa-quote-left,
.fa-quote-right{
    position: absolute;
    top: -1.5rem;
}

.fa-quote-left{
    left: -3.5rem;
}

.fa-quote-right{
    left: .5rem;
}

p.inicio{
    margin: 4rem auto;
    max-width: 80rem;
    text-align: center;
    
}

/***********INICIO SERVICIOS***********/
.inicio-servicios{
    margin-top: 10rem;
    display: flex;
}

.img-inicio-servicios,
.lista-servicios{
    flex-basis: 50%;
}

.img-inicio-servicios img{
    width: 100%;
}

.lista-servicios{
    display: flex;
    justify-content: flex-end;
}

.lista-servicios ul{
    flex-basis: 50%;
    margin-left: 1.5rem;
}

.lista-servicios ul > li{
    list-style: none;
    font-size: 2rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
}

.lista-servicios ul > li:last-of-type{
    margin-bottom: 0;
}

.lista-servicios ul span{
    font-size: 4.5rem;
    color: var(--color_tres); 
    margin-right: .5rem;
}

/***********INICIO INSTALACIONES***********/
.clip-especial{
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
}

.img-instalaciones{
    display: flex;
    margin: 4rem 0 10rem 0;
    flex-wrap: wrap;
}

.img-instalaciones div{
    flex-grow: 1;
    height: 22.8rem;
    clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
    
}

.intalacion1{
    background-image: url(../img/sala_de_espera.jpg);
}

.intalacion2{
    background-image: url(../img/fachada.jpg);
}

.intalacion3{
    background-image: url(../img/admision.jpg);
}

.intalacion4{
    background-image: url(../img/consultorios.jpg);
    
}

.intalacion2,
.intalacion3,
.intalacion4{
    margin-left: -4rem;
}


.img-instalacion{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/***********ESPECIALIDADES***********/
.img-especialidades{
    width: 100%;
    margin-top: 4rem;
}

/***********LABORATORIO***********/
.inicio-laboratorio{
    display: flex;
    justify-content: center;
    align-items: center;
}

.inicio-laboratorio img{
    width: 12rem;
    margin-right: 1rem;
}

.img-laboratorio{
    display: flex;
    justify-content: space-evenly;
    margin-top: 4rem;
    flex-wrap: wrap;
}

.img-laboratorio div{
    width: 35.5rem;
    height: 35.5rem;
    border-radius: 1rem;
    border: .1rem solid #666;
    margin-top: 5rem;
}

.im-laboratorio{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.laboratorio1{
   background-image: url(../img/laboratorio1.png);
}

.laboratorio2{
    background-image: url(../img/laboratorio2.png);
}

.laboratorio3{
    background-image: url(../img/laboratorio3.png);
}

/* ==========================================================================       
   NOSOTOROS 
========================================================================== */
.nosotros{
    box-shadow: 0 0 6px var(--color_nueve);
    display: flex;
    overflow: hidden;
    z-index: 10;
}

.contenido-mision,
.contenido-vision{
    flex-basis: 50%;
}

.contenido-mision{
    background-color:var(--color_cinco);
    position: relative;
} 

.contenido-mision::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color:var(--color_cinco);
    transform: skewX(-15deg);
    z-index: 2;
}

.contenido-vision{
    background-color:var(--color_seis);
    position: relative;
} 

.contenido-vision::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color:var(--color_seis);
    transform: skewX(-15deg);
    z-index: 1;
}
.mision,
.vision{
    padding: 4.5rem 0 10rem 0;
    z-index: 3;
}

.mision h2,
.vision h2{
    position: relative;
    z-index: 3;
}

.mision p,
.vision p{
    margin-top: 4rem;
    text-align: center;
    max-width: 50rem;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    z-index: 3;
}

.valores{
    margin-top: .5rem;
}

.valores ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    font-size: 2rem;
    flex-wrap: wrap;
}

.valores ul li{
    margin-top: 3rem;
}

.valores .fa-heartbeat{
    color: var(--color_tres);
    font-size: 2.5rem;
    margin-right: .7rem;
}

.img-valores{
    margin-top: 8rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.img-valores div{
    margin-top: 3rem;
    flex-basis: 35.5rem;
    height: 26.8rem;
    border: 3px solid var(--color_uno);
    box-shadow: 0 3px 10px var(--color_uno);
}

.img-valores .img{
    background-repeat: no-repeat;
    background-size: cover;
}

.img-valores1{
    background-image: url(../img/urgencias.png);
}

.img-valores2{
    background-image: url(../img/fachada.jpg);
    background-position: right -3rem center;
}

.img-valores3{
    background-image: url(../img/habitaciones.png);
}

/* ==========================================================================             
   SERVICIOS, ESPECIALIDADES,  LABORATORIO  y PROMOCIONES 
========================================================================== */
.caja{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.caja > div{
    flex-basis: 35.6rem;
    height: 25rem;
    border: 3px solid var(--color_tres);
    position: relative; 
}

.caja > div:hover{
    border: 3px solid var(--color_cinco);  
}

.servicios{
        padding-top: 4rem;
}

.servicios > div{
    margin-top: 6rem;
}

.caja img{
    width: 100%;
    height: 100%;
}

.tit-caja{
    background-color: rgba(255,255,255,.5);
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 100%;
    padding: .8rem 0 .8rem 1.6rem;
    font-size: 2.5rem;
    text-align: left;
}

.caja > div:hover a > .tit-caja{
  display: none;  
}

.contenido-hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color_siete);
    padding: 2.5rem 2rem;  
    transform:scale(0);
    transition: all .3s;
}

.caja > div:hover a > .contenido-hover{
    transform: scale(1);
}

.contenido-hover{
     color: var(--color_seis);
}

.contenido-hover h2{
    text-align: left;
    font-size: 2.5rem;
}

.caja h2,
.texto-img h2{
    text-transform: capitalize;
}

.caja .caracter,
.contenido-img .caracter{
    text-transform: lowercase;
    
}

.linia{
    display: block;
    width: 100%;
    height: .3rem;
    background: var(--color_seis);
    margin-top: 1.2rem;
}

.contenido-hover p{
 margin-top: 1rem;   
}

.lupa{
    font-size: 3rem;
    margin-top: 2.5rem;
    display: block;
    text-align: center;
    transition: all .3s;
}

.lupa:hover{
    font-size: 3.5rem;
}
/***********SLIDER SERVICIOS y LABORATORIO***********/
.slider-img{
    display: none;
    z-index: 10;
}

.slider-img:target{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.fa-arrow-alt-circle-right,
.fa-arrow-alt-circle-left{
    color: rgba(255,255,255,.8);
    font-size: 5rem;
    transition: all .3s;
}

.fa-arrow-alt-circle-right:hover,
.fa-arrow-alt-circle-left:hover{
    color: rgba(255,255,255,1);
    font-size: 5rem;
}

.fa-times{
    color: rgba(255,255,255,1); 
    font-size: 3.2rem;
    margin-right: 4rem;
}

.contenedor-img{
    width: 68%;
    height: 100%;
    position: relative;
}

.cerrar{
    background-color:rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    text-align: end;
}

.contenedor-img img{
    width: 100%;
    height: 100%;
}

.contenido-img{
    color:var(--color_seis);   
    position: absolute;
    bottom: 0;
    left: 0;   
    width: 100%;
    text-align: center;
}

.indicador{
    margin-bottom: .5rem;
}

.indicador a{
    display: inline-block;
    background-color: var(--color_seis);
    width: 2rem;
    height: 2rem;
    border: 1px solid #707070;
    border-radius: 50%;
}

a.img-activo{
    background-color: #707070;
    border: 1px solid var(--color_seis);
}

.texto-img{
    background-color:rgba(0,0,0,.5);
    padding: 1rem 0 2.5rem 0;
}

.texto-img p{
    margin-top: .5rem;
}

/* ==========================================================================                                                           
   ESPECIALIDADES   
========================================================================== */
.clip-espcialidades{
    clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0 100%);
}

.ver{
    display: block;
    text-align: center;
    position: absolute;
    bottom: 3.5rem;
    left: 0;
    right: 0;
}

.especialidades{
    padding-top: 5.5rem;
}

.especialidades > div{
    margin-top: 5.5rem;
}

/* ==========================================================================
   ESPECIALIDAD
========================================================================== */
.especialidad{
    display: flex;
    justify-content: space-between;
}

.especialidad img{
    max-width: 45.4rem;
    border: 1px solid #666666;
    border-radius: 1rem;
}

.especialidad > div:last-child{
    margin-left: 4rem;    
} 

.especialidad-texto{
    position: relative;
} 

.especialidad > div:last-child a,
.especialidad > div:last-child .esp-enlace,
.especialidad > div:last-child h1{
    color: var(--color_uno);
    font-size: 2rem;
    font-family: var(--texto_subtitulos);
    
}

.especialidad > div:last-child h1{
    text-transform: capitalize;
    display: inline-block;
    margin: 0;
}

.especialidad .caracter{
    text-transform: lowercase;
}

.especialidad-texto .linea{
    border: 1px solid var(--color_uno);
    background-color: var(--color_uno);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.img-tableta{
    display: none;
}

.especialidad > div:last-child p{
    margin-top: 4rem;
}

table{
    margin-top: 4rem;
}

table.tabla-ambos th,
table.tabla-consulta th{
    background-color: #2BB999;
    padding: .5rem 0;
    font-family: var(--texto_subtitulos);
    color: var(--color_seis);
    width: 32.5rem;
    
}

table.tabla-ambos th:first-of-type{
    border-top-left-radius: 1rem;
}

table.tabla-ambos th:last-of-type{
    border-top-right-radius: 1rem;
}

table.tabla-ambos td,
table.tabla-consulta td{
    padding: 2rem .5rem;
    border: 2px solid #2BB999;
}

table.tabla-ambos td:first-of-type{
    border-bottom-left-radius: 1rem;
}

table.tabla-ambos td:last-of-type{
    border-bottom-right-radius: 1rem;
}

table ul{
    list-style-position: inside;
}

li{
    list-style-type: none;
}

span.asterisco{
    display: inline-block;
    margin-right: .5rem;
}

.valor2{
    margin-left: 2rem;
}

.gion{
    margin-right: .5rem;
}

table.tabla-consulta th{
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* ==========================================================================
   LABORATORIO
========================================================================== */
.clip-laboratorio{
    clip-path: polygon(0 2%, 100% 0%, 100% 100%, 0 100%);
}

.clip-laboratorio .contenedor{
    padding-top: 6.5rem;
} 

.cab-laboratorio{
    background-color:var(--color_seis);
}

.cab-laboratorio > div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.cab-laboratorio .logo-zares{
    max-width: 11.9rem;
    margin-right: 1rem;
}

.cab-laboratorio h1{
    display: inline-block;
    margin: 0;
}

.laboratorio .lupa{
    font-size: 3rem;
    margin-top: 0;
    display: block;
    text-align: center;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
}

.laboratorio > div{
    flex-basis: 35.6rem;
    height: 35.6rem;
    margin-top: 4.5rem;
}

.laboratorio .especial{
    height: 81.2rem;
}

/***********SLIDER LABORATORIO***********/
.contenedor-img{
    max-width: 77.3rem;
    max-height: 76.8rem;

}

.cerrar{
    /*background-color:rgba(0,0,0,0);*/
    position: absolute;
    top: 0;
    right: 10rem;
    width: 100%;
    padding: 1rem 0;
    text-align: end;
    z-index: 1;
}

#especial .contenedor-img{
    max-width: 34rem;
    max-height: 76.8rem;
}

/***********FOOTER LABORATORIO***********/
.footer-laboratorio{
    background-color: var(--color_cuatro);
    color: var(--color_seis);
    margin: 10rem auto;
}

.footer-laboratorio .contenedor{
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}

.footer-laboratorio .contenedor > div{
    display: flex;
    align-items: center;
}

.footer-laboratorio a{
    color: var(--color_seis);  
}

.footer-laboratorio .fas{
    margin-right: 1rem;
    font-size: 3rem;
}

.lab4{
    background-image: url(../img/laboratorio4.jpg); 
}

.lab2,
.lab3,
.lab4{
    margin-left: -4rem;
}

.galeria-laboratorio .contenedor{
    padding: 0;
}

/* ==========================================================================
   PROMOCIONES 
========================================================================== */
.promociones{
    padding-top: 2rem;
}

.promociones .ver{
    bottom: 0;
    top: 45%;
    font-size: 2rem;
}

.promociones h2{
    font-size: 2rem;
    text-align: left;
    margin-top: 1rem;
}

.promociones > div{
    margin-top: 8rem;
}

/* ==========================================================================
   CONVENIOS 
========================================================================== */
.convenios .contenedor{
    padding-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.convenios .convenio{
    margin-top: 6rem;
    flex-basis: 35.6rem;
    height: 25rem;
    background-position: center;
    background-repeat: no-repeat;
    border: 3px solid var(--color_uno);
    border-radius: 5rem 1rem 5rem 1rem;
    transition: all .3s;
    background-size: 80%;
}

.convenios .convenio:hover{
    border-radius: 1rem 5rem 1rem 5rem;
    background-size: 100%;
    
}

.convenios .convenio1{
    background-image: url(../img/convenios/atlas.png);
}

.convenios .convenio2{
    background-image: url(../img/convenios/sura.png);
}

.convenios .convenio3{
    background-image: url(../img/convenios/general_salud.png);
}

/* ==========================================================================
   CONTACTO 
========================================================================== */
.contenido-conacto{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contenido-conacto > div{
    flex-basis: 33.33%;
}

.img-contacto img{
    width: 100%;
}

.contenido-conacto h2{
    text-transform: capitalize;
}

.texto-contacto{
    padding-left: 2rem;
    padding-right: 3rem;
}

.texto-contacto > div{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.texto-contacto > div:nth-of-type(2),
.texto-contacto > div:nth-of-type(3){
    margin-top: 5.5rem;
}

.texto-contacto .fas{
    margin-right: 1rem;
    color: var(--color_tres);
    font-size: 3rem;
}

.mapa-contacto{
    width: 100%;
    margin-top: 10rem;
}


/***********FORMULARIO***********/
.inp{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aviso_p{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aviso_p a:hover{
    text-decoration: underline;
    color: var(--color_tres);
        transition: all .3s;
}

.inp .icon{
    flex-basis: 48%;
}

.cd-form {
  width: 100%;
  max-width: 60rem;
}
.cd-form::after {
  clear: both;
  content: "";
  display: table;
}

.cd-form legend {
  margin-bottom: 0rem;
  font-size: 3rem;
    font-family: var(--subtitulo);
    color: var(--color_dos);
}
.cd-form div {
  /* form element wrapper */
  position: relative;
  margin: 2rem 0;
    color: var(--color_dos);
}

.cd-form .cd-label {
  font-size: 1.3rem;
  color: #94aab0;
  margin-bottom: 13rem;
    color:var(--color_uno);
}
.cd-form .cd-label {
  display: block;
}

.cd-form input:active, .cd-form textarea{
    color:var(color_dos);
    font-weight: 100;
}

.cd-form input[type="text"],
.cd-form input[type="email"],
.cd-form textarea,
.cd-form legend {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.cd-form input[type="text"],
.cd-form input[type="email"],
.cd-form textarea{
  /* general style for input elements */
  padding: 11.2rem;
  border: none;
    border-bottom: 1px solid #707070;
  background-color:transparent;
}
.cd-form input[type="text"]:focus,
.cd-form input[type="email"]:focus,
.cd-form textarea:focus{
  outline: none;
  border-color: var(--color_uno);
    border-left: 3px solid var(--color_uno);
    
}
.cd-form textarea {
  min-height: 15rem;
  resize: vertical;
  overflow: auto;
}
.cd-form input[type="submit"] {
  /* button style */
  border: 1px solid var(--color_uno);
  border-radius: .25em;
  padding: 7px 18px;
  color: var(--color_uno);
  font-weight: bold;
  cursor: pointer;
    background: transparent;
    transition: all .3s;
}
.no-touch .cd-form input[type="submit"]:hover {
  background: #42a2e1;
  background: var(--color_tres);
    color: #fff;
    border: 1px solid var(--color_uno);
}
.cd-form input[type="submit"]:focus {
  outline: none;
  background: var(--color_tres);
    color: #fff;
    border: 1px solid var(--color_uno);
}
.cd-form input[type="submit"]:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.cd-form .error-message p{
    display: none;
}
.cd-form .error-message p {
  background: #e94b35;
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: .25em;
  padding: 16px;
}
/*.cd-form .error {
  border-color: #e94b35 !important;
}*/

@media only screen and (min-width: 600px) {
  .cd-form div.icon {
    /* form element wrapper */
  }
  .cd-form h4, .cd-form .cd-label {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }
  .cd-form input[type="text"],
  .cd-form input[type="email"],
  .cd-form textarea {
    padding: 5px;
  }
}

@-webkit-keyframes cd-bounce {
  0%, 100% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes cd-bounce {
  0%, 100% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(0.8);
  }
}
@keyframes cd-bounce {
  0%, 100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
}
/* -------------------------------- 

Custom icons

-------------------------------- */
.cd-form .icon input, .cd-form .icon select, .cd-form .icon textarea {
  padding-left: 10px !important;
}


/* -------------------------------- 

FLoating labels 

-------------------------------- */
.js .floating-labels > div {
  margin: 28px 0;
}

.js .floating-labels .cd-label {
  position: absolute;
  top: 5px;
  left: 16px;
  font-size: 1.6rem;
  cursor: text;
  -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;
  -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;
  transition: top 0.2s, left 0.2s, font-size 0.2s;
}
.js .floating-labels .icon .cd-label {
  left: 10px;
}
.js .floating-labels .cd-label.float {
  /* move label out the input field */
  font-size: 1.2rem;
  top: -16px;
  left: 0 !important;
}
@media only screen and (min-width: 600px) {
  .js .floating-labels legend + div {
    /* reduce margin-top for first form element after the legend */
    margin-top: 16px;
  }
  .js .floating-labels .cd-label {
    top: 5px;
  }
}


.msn_error{
    background-color: #FF7171;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}

.msn_error p, .msn_enviado p{
    color: #000;
    font-weight: bold;
}

.msn_enviado{
    background-color: #71FF9F;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}


/* ==========================================================================
   FOOTER 
========================================================================== */
footer .fondo{
    background-color: var(--color_tres);
    font-size: 1.4rem;
    clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%);
}

footer .contenedor{
    padding: 2.5rem 0 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

footer p,
footer a{
    color: var(--color_seis);
}

footer p.contacto{
    flex-basis: 34rem;
}



/* ==========================================================================
   Media Queries
========================================================================== */
@media only screen and (max-width:1170px){
/******************VARIOS*******************/    
    .cabecera-superior,
    footer .contenedor,
    .contenedor{
        padding-left: 2rem;
        padding-right: 2rem;
    }  
/******************NOSOTROS*******************/ 
    .img-valores{
        justify-content: space-evenly;
    }  
}



@media only screen and (max-width:1108px){
 /******************SERVICIOS, ESPECIALIDADES, PROMOCIONES, LABORATORIO*******************/ 
    .caja,
    .convenios .contenedor{
        justify-content: space-evenly;
    }
 /******************ESPECIALIDADES*******************/    
    .clip-espcialidades{
    clip-path: polygon(0 1.5%, 100% 0%, 100% 100%, 0 100%);
    }    
}


@media only screen and (max-width:1000px){
/******************HRADER*******************/
    .icono_menu{
        display: block;
        font-size: 2.5rem;
        text-align: center;
    }
    
    .fa-bars {
        cursor: pointer;
    }
    
    .menu{
        position: absolute;
        left: -100%;
        width: 100%;
    }
    
    nav{
        flex-direction: column;
    }

    nav a{
        padding: 1rem 1.5rem;
        color: var(--color_seis);
        font-size: var(--tamano_nav);
    }
    
     nav a:hover{
        padding-left: 3rem;
    }
 /******************FOOTER*******************/   
    footer .contenedor{
        padding: 5rem 2rem 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    
/******************ESPECIALIDAD*******************/    
    .especialidad img{
        max-width: 35.4rem;
    }    
}

@media only screen and (max-width:920px){
/******************INICIO Y LABORATORIO*******************/    
    .img-instalaciones,
    .img-instalaciones{
        flex-wrap: wrap;
    }
  
    .img-instalaciones div,
    .img-instalaciones div{
        flex-basis: 50%;
        margin-top: 3rem;
    }
    
    .intalacion2,
    .intalacion4,
    .lab2,
    .lab4{
        margin-left: -5.8rem;
    }
    
    .intalacion3,
    .lab3{
        margin-left: 0;   
    }
    
/******************ESPECIALIDAD*******************/    
    .especialidad .img-escritorio{
        display: none;
    } 
    
    .especialidad > div:last-child{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .especialidad .img-tableta{
        display: block;
        margin-top: 4rem;
        max-width: 60%;
    }
    
 /******************CONTACTO*******************/    
.contenido-conacto{
    flex-direction: column;
    align-items: center;
}    
    .img-contacto{
        width: 30%;
    } 
    
    .texto-contacto{
        width: 100%;
        margin-bottom: 3rem;
        margin-top: 3rem;
    }
/******************FOOTER*******************/ 
    footer .contenedor a{
      flex-basis: 25%;
    }   
    
    footer .contenedor a,
    footer .contenedor p{
       margin-top: 2rem; 
    }
    
    footer .contenedor p:last-child{
        display: block;
        text-align: center;
        flex-basis: 100%;  
    }
    
    
}    
    

@media only screen and (max-width:800px){
/******************INICIO*******************/    
    .inicio-servicios{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .lista-servicios{
        order: -1;  
    }
    
    
    .img-inicio-servicios{
        width: 70%;
        margin-top: 3rem;
    }
    
/******************NOSOTROS*******************/     
    .valores ul{
        justify-content: space-evenly;
    }
}

@media only screen and (max-width:820px){
/******************LABORATORIO*******************/  
        .footer-laboratorio .contenedor > div{
            flex-basis: 50%;
            justify-content: center;
        }

        .footer-laboratorio .contenedor > div:last-child{
            flex-basis: 100%;
            margin-top: 3rem;
            text-align: center;
            justify-content: center;
        }
}

@media only screen and (max-width:603px){
    
    .inp{
        flex-direction: column;
    }    
    
/******************GENERAL*******************/     
.clip-general{
    clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0 100%);
}  
    
/******************ESPECIALIDAD*******************/    
    .especialidad .img-escritorio{
        display: none;
    } 
    
    .especialidad > div:last-child{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .especialidad .img-tableta{
        display: block;
        margin-top: 4rem;
        max-width: 100%;
    } 
    
/******************CONTACTO*******************/      
        .img-contacto{
            width: 50%;
        }
    
    
/******************FOOTER*******************/     
    .nosotros{
        flex-direction: column;
    }

    .contenido-mision,
    .contenido-vision{
        flex-basis: 100%;
    }    
 /******************FOOTER*******************/ 
    footer .contenedor a{
       flex-basis: 33.33%;
        text-align: center;
    }   
    
    
    footer .contenedor p{
        display: block;
        text-align: center;
        flex-basis: 100%;
        text-align: center;
    }  
}

@media only screen and (max-width:533px){
/******************INICIO y LABORATORIO*******************/  
    .lista-servicios{
        flex-direction: column;
    }
  
    .img-instalaciones div{
        flex-basis: 100%;
        margin-top: 3rem;
    }
    
    .intalacion2,
    .intalacion4,
    .lab2,
    .lab3{
        margin-left: 0;
    }  
.footer-laboratorio .contenedor > div{
        flex-basis: 100%;
    }
    
    .footer-laboratorio .contenedor > div:nth-of-type(2){
        margin-top: 3rem;
    }  

    
    
}

@media only screen and (max-width:480px){
/******************GENERAL*******************/
    h1{
        font-size: 4rem;
    }
    
 /******************LABORATORIO*******************/   
    .cab-laboratorio .logo-zares{
        width: 8rem;
    }    
/******************HEADER*******************/ 
    .cabecera-superior{
        flex-direction: column;
    }
    
    .cabecera-superior p{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
/******************INICIO*******************/    
   h1.titulo span{
        display: block;
    }

    h1.titulo span:nth-of-type(1){
        margin-right: 0rem;
    }

    h1.titulo span:nth-of-type(2){
        margin-left: 0rem;
        margin-top: 1rem;
    } 
}

@media only screen and (max-width:360px){
/******************GENERAL*******************/
    h1{
        font-size: 3rem;
    }   
    
/******************FOOTER*******************/ 
    footer .contenedor{
        flex-direction: column;
    }    
}
@media only screen and (max-width:320px){
/******************GENERAL*******************/
    h1{
        font-size: 2.5rem;
    }     
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}