/*Índice*/

/* 1.0? Generales
    1.1.0? Variables
        1.1? Texto y Colores
    1.3? Estructuras
        1.3.1? Encabezados
            1.3.1.1? Prelogo
            1.3.1.2? Héroe
            1.3.1.3? Menú
        1.3.3? Pie
    1.3?

2.0? Específicas
    2.1? Páginas
        2.1.1? Inicio
            2.1.1.1? Video y Formulario
                2.1.1.1.3? Testimonios y pacientes lightbox
                2.1.1.1.4? Testimonios y pacientes Carrusel
        2.1.2? DocSanchezG
            2.1.2.1? Trayectoria
            2.1.2.2? TopDoctors y Miembro De
            2.1.2.4? Papers
        2.1.3? Cirugías
            2.1.3.1? Cirugía Refractivas
            2.1.3.2? Otros procedimientos
        2.1.4? Especialidades
        2.1.5? Martha Debayle
        2.1.6? Sale el Sol
            2.1.6.1? Mitos y Realidades
        2.1.7? Óptica
        2.1.8? Ubicación

3.0? Responsivo
    3.1? 1043px
        3.1.1? Index/Formulario
        3.1.2? DocSanchezG
    3.2? 827px
        3.2.1? Prelogo
    3.3? 774px
        3.3.1? Burguer
    3.4? 748px
        3.4.1? Prelogo
        3.4.2? Formulario
        3.4.3? Footer
    3.4.0.1? 641px
        3.4.0.1.1? Menu Burguer
    3.5? 604px
        3.5.1? Video Inicio
    3.6? 528px
        3.6.1? Prelogo
    3.7? 547px
        3.7.1? Pacientes Lightbox
    3.8? 475px
        3.8.1? Video Inicio
    3.9? 447px
        3.9.0? Prelogo
        3.9.1? Héroe
        3.9.2? Formulario
        3.9.3? Pacientes Lightbox

4.0? Responsivo DocSanchezG
    4.1? 1043px Trayectoria
    4.2? 925px TopDoctors

*/

/* 1.0? Generales*/
body:not(.page-template-default) section:first-of-type {
  padding-top: 20px;
}
main section {
  padding: 80px 0;
}
#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem; /* Footer height */
}

.ancho {
  max-width: 1250px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0px 15px;
}

.cols {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: baseline;
}

.colsAncho {
  justify-content: space-between;
}

.grid-container {
  display: grid;
  grid-template-columns: 66% 33%;
  grid-column-gap: 10px;
  /*padding: 10px;*/
}

.grid-container.mitad {
  display: grid;
  grid-template-columns: 60% 40%;
  grid-column-gap: 10px;
  /*padding: 10px;*/
}

.grid-container-paper {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-column-gap: 30px;
  /*padding: 10px;*/
}
.grid-item {
  /*padding: 20px;*/
  font-size: 30px;
  text-align: center;
}

.grid-item-2 {
  background-color: rgba(255, 255, 255, 0.8);
  /*padding: 20px;*/
  font-size: 30px;
  text-align: center;
}
/* 1.1.0? Variables/
    /* 1.1? Texto y Colores*/

:root {
  --color-primario: #008a90;
  --color-oscuro: #01676d;

  --titulo: "font-family Geo";
  --titulo2: "font-family: Gothic";
}

.h3,
h3 {
  font-family: "Geo";
  color: var(--color-primario);
}

h2 {
  font-family: "Geo";
  color: var(--color-primario);
}

h4 {
  font-family: "Gothic";
  color: var(--color-primario);
}

/* 1.3? Estructuras*/
/* 1.3.1? Encabezados*/
/*header{
    position: fixed;
    z-index: 100;
}*/

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: white;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse-ring {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.1;
  }
}

/* 1.3.1.1? Prelogo*/

#prelogo {
  background-color: #008a90;
  height: 45px;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}
#prelogo .ancho .table {
  position: relative;
  font-size: 20px;
  top: 3px;
  width: 100%;
  color: white;
  text-shadow: 2px 2px #222222;
  font-family: "Gothic";
}
#prelogo .ancho .table th {
  justify-content: space-between;
  width: 33%;
  top: 10px;
  /*border: red 1px solid;*/
}

#prelogo .ancho .table a:visited,
#prelogo .ancho .table a:link,
#prelogo .ancho .table a:hover,
#prelogo .ancho .table a:active {
  justify-content: space-between;
  top: 10px;
  color: white;
  text-decoration: none;
}

/*border: red 1px solid;*/

/* YA NO USAMOS GRID CONTAINER PARA EL PREOLOGO
#prelogo .ancho  .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        padding: 10px;
        color: white;
        text-align: center;
      }
      
      .grid-container div {
        text-align: left;
      }

#prelogo .ancho  .grid-container .numero{
     }
#prelogo .ancho  .grid-container .numero span{
    width:40px;
    height: 40px;
    border-radius: 20px;
    background-color: #01676d;
    line-height: 20px;
    vertical-align: middle;
    }
*/

/* 1.3.1.2? Héroe */

#encabezado .hero {
}
#encabezado .hero img {
  position: absolute;
  height: 130px;
  width: 100%;
  background-position: center;
  opacity: 0.8;
  top: 45px;
  left: 0;
}

#encabezado .ancho .logo img {
  display: inline-block;
  width: 210px;
  position: absolute;
  /*border:royalblue solid 1px;  */
  top: 50px;
}

#encabezado .redes {
  float: right;
  position: relative;
  top: 60px;
  justify-content: space-around;
  margin-right: 2%;
  /*border: red solid 1px;  */
}

#encabezado .redes a:link,
#encabezado .redes a:active,
#encabezado .redes a:visited {
  font-size: 15;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-primario);
  color: white;
  padding: 3px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  transition: all 1s;
  transform: scale(0.9, 0.9) rotate(0deg);
  text-shadow: 2px 2px 0 #333;
}

#encabezado .redes a:hover {
  transform: scale(1.1, 1.1) rotate(0deg);
  text-shadow: 2px 2px 0 #333;
}
/*1.3.1.3? Menú*/

#movil,
#burguer {
  display: none;
}

.ancho .menu {
  position: relative;
  display: flex;
  text-align: center;
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0 0 2px 4px #00000022;
  top: 138px;
}
.ancho ul.menu li {
  list-style: none;
}
.ancho .menu a {
  font-family: "Gothic", cursive;
  font-size: 19px;
  text-decoration: none;
  line-height: 50px;
  height: 50px;
  width: 150px;
  display: inline-block;
  text-align: center;
}

.ancho .menu a:link,
.ancho .menu a:visited {
  color: #008a90;
  background-color: transparent;
  transition: all 0.8s ease 0.1s;
}
.ancho .menu a:hover,
.ancho .menu a:active {
  color: white;
  transition: all 0.8s ease 0.1s;
  text-shadow: 2px 2px 2px #000;
  background-color: var(--color-primario);
}

.ancho .menu .currentp {
  background-color: var(--color-primario);
  color: white;
}

/* 2.1.1? Inicio*/
/* 2.1.1.1? Video y Formulario */

#contacto .video_inicio {
  width: 95%;
  height: 100%;
}
#contacto {
  position: relative;
  top: 130px;
}
#contacto iframe.nueva-direccion {
  display: block;
  width: 100%;
  height: 350px;
}
#contacto a.nueva-direccion img {
  width: 100%;
  height: auto;
}

#contacto #datos {
  border: none;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 0 auto;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 0 5px #000;
  z-index: -2;
}
#contacto #datos:hover {
  cursor: pointer;
}
/*
    #contacto  #datos::before{
        content:"";
        background-color: none;
        z-index: -1;
        display: block;
        width: 100%;
        height: 80px;
        position: absolute;
        top: 0;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }
*/
#contacto #datos #anuncio {
}
#contacto #datos #anuncio h3 {
  color: red;
  padding: 0px;
  margin: 15px;
}
#contacto #datos #anuncio p {
  padding: -20px;
  font-family: "Gothic";
  margin: 0 10px 0 10px;
  font-size: 22px;
}

#contacto #datos #formulario {
  background-color: #fff;
  box-sizing: border-box;
  padding: 40px 15px;
  display: block;
  width: 250px;
  height: 300px;
  border-radius: 15px;
  z-index: 1;
  border: solid #f1f1f1 1px;
  box-shadow: 0 0 5px #000;
  transform: translatex(50px);
}
#contacto #datos #formulario label {
  display: block;
  font-size: 18px;
  margin: 5px 0;
  border-bottom: solid 1px #666;
}

#contacto #datos #formulario label i {
  font-size: 20;
}

#contacto #datos #formulario label input {
  width: 200px;
  border: none;
}
#contacto #datos #formulario label input:focus {
  outline: none;
}

#contacto #datos #formulario label input#nombre {
  padding-left: 5px;
}

#contacto #datos #formulario label input#tel {
  padding-left: 12px;
}

#contacto #datos #formulario label[for="comentario"] i {
  position: relative;
  width: 30px;
  height: 20px;
}

#contacto #datos #formulario label[for="comentario"] i::before {
  position: absolute;
  top: 0px;
  right: 0px;
}

#contacto #datos #formulario label textarea#comentario {
  width: 200px;
  height: 50px;
  border: none;
  resize: none;
}

#contacto #datos #formulario label textarea#comentario:focus {
  outline: none;
}

#contacto #datos #formulario button {
  height: 40px;
  width: 120px;
  padding: 10px 30px;
  background-image: linear-gradient(to right, #a8e3ff, #036e5d);
  border-radius: 20px;
  border: none;
  color: white;
  text-shadow: 1px 1px 0 #000;
  margin-top: 33px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
  transition: all 1s;
  transform: scale(1, 1);
}
#contacto #datos #formulario button:hover {
  transform: scale(1.1, 1.1);
}

#contacto .ancho #datos #formulario label[for="nombre"] {
}
#contacto .ancho #datos #formulario label[for="email"] {
}
#contacto .ancho #datos #formulario label[for="tel"] {
}

/* 2.1.1.1.3? Testimonios y pacientes lightbox */

#pacientes {
  margin-top: 40px;
  font-family: "Geo";
}
#pacientes .ancho {
}
#pacientes .ancho h3 {
  text-align: center;

  margin-bottom: 40px;
}

#pacientes .ancho a {
  text-decoration: none;
  font-family: "Geo";
  font-size: 22px;
}

#pacientes .ancho div figure {
  margin: 0px;
  position: relative;
  overflow: hidden;
}
#pacientes .ancho div figure img {
  width: 250px;
  height: 150px;
  transition: all 1s ease;
}

#pacientes .ancho div figure h4 {
  margin-top: 10px;
  text-decoration: none;
  text-align: center;
  text-shadow: none;
}

#pacientes .ancho div figure:hover img {
  transform: scale(1.1);
}

/*pacientes lightbox*/

/* 2.1.1.1.4? Testimonios y pacientes carrusel */

#galeria {
  background-color: var(--color-primario);
  margin-top: 100px;
}
#galeria .ancho {
  padding: 20px 20px 32px 20px;
  background-color: #008a9033;
}
#galeria .ancho .main-carousel {
}
#galeria .ancho .main-carousel .carousel-cell {
  width: 33%;
  height: 200px;
  background-position: center;
  background-size: cover;
  font-family: "Geo";
  font-size: 20px;
  color: white;
  text-shadow: 2px 2px 2px #333;
  text-align: center;
  margin: 0 5px;
}

#galeria .ancho .main-carousel .carousel-cell:nth-child(1) {
  background-image: url(../img/inicio/pacientes/paciente9.jpeg);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(2) {
  background-image: url(../img/inicio/pacientes/paciente10.jpeg);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(3) {
  background-image: url(../img/inicio/pacientes/paciente11.jpeg);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(4) {
  background-image: url(../img/inicio/pacientes/paciente12.jpeg);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(5) {
  background-image: url(../img/inicio/pacientes/paciente2.jpeg);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(6) {
  background-image: url(../img/inicio/pacientes/paciente3.png);
}
#galeria .ancho .main-carousel .carousel-cell:nth-child(7) {
  background-image: url(../img/inicio/pacientes/paciente15.jpeg);
}

/* 2.1.2? DocSanchezG */

#trayectoria {
}
#trayectoria h2 {
  text-align: center;
  padding: 100px 0 0 0;
}
#trayectoria-container {
  text-align: center;
  max-width: 1175px;
  margin: 0 auto;
}

.fondo {
  background: var(--color-primario);
  margin: 50px 0 0 0;
  width: 100%;
  text-align: center;
  margin-left: 0px;
}
#trayectoria-container .block-iz {
  width: 600px;
  margin: 10px 10px 20px 10px;
  display: inline-block;
}

#trayectoria-container .block-iz h3 {
  color: white;
}
#trayectoria-container {
  margin: -70px;
  padding: 0px;
}
#trayectoria-container .block-ri {
  width: 380px;
  margin: 10px 10px 20px 10px;
  display: inline-block;
}

#trayectoria-container .block-ri h3 {
  font-size: 22px;
  color: white;
}

#trayectoria-container .block-ri .miembro_de {
  padding: 10px;
  text-align: center;
  background-color: #ffffff80;
  border-radius: 30px;
  font-size: 22px;
  margin: 0px;
}
#trayectoria-container .block-ri .miembro_de p {
  padding: 15px;
  margin: 10px;
  font-family: "Gothic";
}

#trayectoria-container .block-ri .carrera {
  width: 380px;
  margin: 10px 10px 20px 10px;
  display: inline-block;
  color: #222;
  font-family: "Gothic";
  font-size: 22px;
  padding: 30px 30px 0px 0px;
  text-align: justify;
  text-justify: inter-word;
}

#trayectoria-container .block-bottom {
  display: inline-block;
  margin: 120px 10px 50px 10px;
  width: 400px;
}
/* 2.1.2.1? Trayectoria
    #trayectoria .grid-container{
        display: grid;
        grid-template-columns: 60% 40%;
        grid-column-gap: 30px;
    }

    #trayectoria .grid-container p{
        top: 0px;
        padding: 0px;
        margin: 0px;
        
    }

    #trayectoria .grid-container h3{
        text-align: center;
        font-family: 'Geo';
        color: var(--color-primario);
        font-size: 25px;
        margin: 0px;}

    #trayectoria .grid-container .carrera{
        padding: 35px 0 0 0;
    }

    #trayectoria .ancho{
        top: 130px;
        position: relative;
    }
    #trayectoria .ancho h2{
       
        text-align: center;
        font-family: 'Geo';
        color: var(--color-primario);
        font-size: 25px;
    }
    #trayectoria .ancho img{
        margin-top: 30;
        width: 400px;
        margin-left: 3%;
        float: left;
        padding: 30px;

    }
    #trayectoria .ancho p{
        
        color: #222;
        font-family: 'Gothic';
        font-size: 23px;
        padding: 30px 30px 0px 0px;
        text-align: justify;
        text-justify: inter-word;

    }
    /*2.1.2.2? TopDoctors y Miembro de
    #topdoctors_awards{
        position: relative;
        top: 170px;
        background-color: var(--color-primario);
        padding: 20px 20px 40px 20px;
    }
    #topdoctors_awards .ancho{
        text-align: center;}

    #topdoctors_awards .ancho .grid-container{
        height: 520px;
        font-family: 'Gothic';
    }
    #topdoctors_awards .ancho img{
        animation: ease-in 10s;
    }

    #topdoctors_awards .ancho .grid-item-2 h4{
        color: var(--color-primario);
    }
    #topdoctors_awards .ancho h4{
        font-family: 'Geo';
        color: white;
    }

    /* 2.1.2.4? Papers

    #papers .ancho{
        position: relative;
        top: 150px;
        padding: 80px;

    }
    #papers .ancho .h2{
        text-align: center;
        font-family: 'Geo';
        color: var(--color-primario);
        font-size: 20px;
    }
    #papers .ancho .grid-container-paper{

    }
    #papers .ancho .grid-container-paper .grid-item .pub{
        width: 100%;
    }

    */

/*2.1.3? Cirugías*/

/*2.1.3.1? Cirugías Refractivas CONTAINER*/
#ciru-refra h2 {
  text-align: center;
  margin-top: 140px;
}
#ciru-refra #container {
  margin-top: 200px;
  text-align: center;
  margin: auto;
}
#ciru-refra .block {
  width: 300px;
  margin: 10px;
  display: inline-block;
  background: var(--color-primario);
}
#ciru-refra .block h3 {
  color: white;
  text-align: center;
  font-family: "Geo";
}

#ciru-refra .block img {
  width: 300px;
}

#ciru-refra .block p {
  line-height: 30px;
  color: white;
  font-size: 20px;
  font-family: "Gothic";
  padding: 0 10px 0 10px;
}
#ciru-refra.index h2 {
  margin-top: 180px;
}

/*2.1.3.1? Cirugía Refractivas
#cirugias{
    position: relative;
    top: 110px;
}
#cirugias h2{
    text-align: center;
    font-family: 'Geo';
}

#cirugias p{
    text-align: center;
    font-family: 'Gothic';
    padding: 0 10px 10px 10px;
    font-size: 20px;

}
#cirugias .refractivas.ancho.cols div{
    background-color: var(--color-primario);
    width: 31%;
    text-align: center;
    margin: 0px 0px 70px 0px;
    
}
#cirugias .refractivas.ancho.cols h3{
    color:white;
    font-size: 30px;
    text-align: center;

}
#cirugias .refractivas.ancho .cols img{}
#cirugias .refractivas.ancho.cols p{
    color:white;

}
*/
/*2.1.3.2? Otros procedimientos*/
#otros .ancho {
  position: relative;
  top: 60px;
  font-size: 22px;
}
#otros .ancho h3 {
  padding: 20px;
}
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #01676d33;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-family: "Geo";
  text-align: center;
  color: var(--color-primario);
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: var(--color-primario);
  color: white;
  font-size: 20px;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 18px;
}

.panel img {
  width: 300px;
  display: inline-block;
  margin-left: 120px;
  margin-top: 20px;
}

.panel p {
  display: inline-block;
  font-family: "Gothic";
  font-size: 20px;
  max-width: 500px;
  padding: 0px 20px 0 20px;
  line-height: 30px;
}

/*2.1.5? Martha Debayle*/
#conmarthadebayle {
  position: relative;
  top: 120px;
  padding: 0 0 100px;
  font-size: 18px;
}
#conmarthadebayle a:visited,
#conmarthadebayle a:link,
#conmarthadebayle a:hover,
#conmarthadebayle a:active {
  text-decoration: none;
}

#conmarthadebayle h3 {
  color: var(--color-primario);
  text-decoration: none;
  text-align: center;
}

#conmarthadebayle .grid-container-martha {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-column-gap: 10px;
}

.grid-container-martha .grid-item-izq {
  width: 100%;
}

.grid-container-martha .grid-item-dcha iframe {
  width: 100%;
  margin: 10px;
}

/* 2.1.6? Sale el Sol */
#saleelsol {
  top: 120px;
  display: inline-block;
  text-align: center;
  margin-top: 240px;
  margin: auto;
  width: 100%;
  position: relative;
}

#saleelsol a:link,
#saleelsol a:visited {
  margin-bottom: 30px;
}
#saleelsol a:hover,
#saleelsol a:active {
  margin-bottom: 30px;
  color: var(--color-oscuro);
}
#saleelsol .ancho {
}
#saleelsol .ancho a {
  top: 10px;
  text-align: center;
  text-decoration: none;
  font-family: "Geo";
  font-size: 15px;
  color: #008a90;
  padding: 10px 30px;
  width: 180px;
}
#saleelsol .ancho .vidselsol a:link,
#saleelsol .ancho .vidselsol a:visited {
  color: #008a90;
  background-color: transparent;
  transition: all 0.8s ease 0.1s;
}

#saleelsol .ancho .vidselsol a:hover,
#saleelsol .ancho .vidselsol a:active,
#saleelsol .ancho .vidselsol a:focus {
  color: white;
  transition: all 0.8s ease 0.1s;
  text-shadow: 2px 2px 2px #000;
  background-color: var(--color-primario);
}
#saleelsol .ancho iframe {
  margin: 30px auto;
}

/*2.1.6.1? Mitos y Realidades*/

#galeriasaleelsol {
  margin-top: 180px;
  background-color: var(--color-primario);
}

#galeriasaleelsol h3 {
  padding: 20px 0px 0px 0px;
  font-family: "Geo";
  color: white;
  font-size: 25px;
  text-align: center;
}
#galeriasaleelsol .ancho {
  padding: 0px 20px 32px 20px;
}

#galeriasaleelsol .ancho .main-carousel {
}

#galeriasaleelsol .ancho .main-carousel .vid {
  margin: 0 5px;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: rgb(230, 230, 230);
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* 2.1.7? Óptica*/
.optica {
  top: 20px;
  position: relative;
  max-width: 1050px;
  margin: auto;
  z-index: -1;
}
.optica h2 {
  margin-top: 120px;
  text-align: center;
}
.optica .cols.colsAncho .image_lens h4 {
  font-size: 20px;
  width: 200px;
  margin: auto;
  padding: 0 0 50px 0;
  text-align: center;
}

.optica .ancho {
  position: relative;
  overflow: hidden;
}
.optica .ancho a {
  transition: all 1s ease;
  overflow: hidden;
}

.optica a:hover img {
  transform: scale(0.8);
  transition: all 2s ease;
  overflow: hidden;
}

/*1.3.3? Pie*/
.cols {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: baseline;
}
.ancho.cols.colsAncho {
  justify-content: space-between;
}

footer p span {
  font-size: 1em;
}

footer {
  font-family: "Gothic";
  background-color: var(--color-primario);
  padding: 150px 0;
  color: #fff;
  margin: 200px 0 0 0;
}
footer .ancho {
}
footer .ancho p {
}
footer .ancho p a:link,
footer .ancho p a:visited,
footer .ancho p a:active {
  text-decoration: none;
  color: #fff;
  margin: 0 10px;
  font-size: 1.5em;
  border: solid #fff 3px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 38, 89, 0.2);
  text-shadow: 1px 1px 1px #000;
  box-shadow: 1px 1px 0px #000, -1px -1px 0px #ddd, 0px 0px 2px #000 inset;
  transition: all 1s cubic-bezier(0.52, -1.01, 0.59, 1.87);
  transform: scale(0.5, 0.5) rotate(0deg);
}
footer .ancho p a:hover {
  transform: scale(0.6, 0.6) rotate(0deg);
}

/*2.1.8? Ubicación*/
#ubi h2 {
  margin-top: 140px;
}
#ubi a {
  text-decoration: none;
  text-align: center;
}
#ubi .grid-container {
  grid-template-columns: 45% 45%;
  margin-top: 30px;
  margin-left: 40px;
  grid-column-gap: 0px;
}
#ubi .grid-container .grid-item-iz {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
#ubi .grid-container .grid-item-ri {
  margin-left: 10px;
}

#ubi .grid-container .grid-item-ri iframe.nueva-direccion {
  display: block;
  width: 100%;
  height: 350px;
}

/*2.1.8? 404 */
section.ancho.not-found {
  position: relative;
  text-align: center;
  font-family: 'Gothic', sans-serif;
  top: 100px;
  font-size: 22px;
}
section.ancho.not-found h1 {
  font-family: 'Geo', sans-serif;
  color: #01676d;
  font-size: 50px;
}
section.ancho.not-found .btn:hover,
section.ancho.not-found .btn:visited,
section.ancho.not-found .btn {
  color: #01676d;
}

/*2.1.8? Blog */
section.ancho.blog {
  position: relative;
  padding-top: 20px;
  top: 100px;
  font-family: 'Gothic', sans-serif;
  font-size: 18px;
  line-height: 32px;
} 
section.ancho.blog .inner {
  display: flex;
  justify-content: space-between;
  align-items: start;
}
section.ancho.blog .main-content {
  flex: 0 0 65%;
}

section.ancho.blog .sidebar {
  flex: 0 0 30%;
}
section.ancho.blog .sidebar .sidebar-inner {
  background-color: #abc1c1;
  padding: 30px 20px;
  margin-bottom: 20px;
  padding-top: 10px;
}
section.ancho.blog .sidebar .sidebar-inner .widgettitle {
  font-family: 'Geo', sans-serif;
  color: #01676d;
  margin-bottom: 20px;
  font-size: 20px;
}
section.ancho.blog .sidebar .sidebar-inner ul {
  padding-left: 15px;
}
section.ancho.blog .sidebar .sidebar-inner ul li {
  list-style: none;
  margin-bottom: 10px;
}
section.ancho.blog .sidebar .sidebar-inner ul li a {
  display: block;
  font-family: 'Geo', sans-serif;
  color: #01676d;
  font-size: 16px;
  margin-bottom: 20px;
  text-decoration: none;
}
section.ancho.blog .sidebar .sidebar-inner a.direccion {
  display: block;
  text-decoration: none;
  margin-bottom: 15px;
  line-height: 25px;
  font-size: 20px;
  color: #01676d;
}
section.ancho.blog .sidebar .sidebar-inner a.direccion:hover,
section.ancho.blog .sidebar .sidebar-inner ul li a:hover {
  text-decoration-line: underline;
}
section.ancho.blog .sidebar .sidebar-inner iframe {
  width: 100%;
  height: 200px;
}

section.ancho.blog .main-content .post {
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 2px solid #008a90;
}
section.ancho.blog .main-content img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
section.ancho.blog .main-content h1 {
  font-family: 'Geo', sans-serif;
  color: #01676d;
}
section.ancho.blog .main-content a {
  text-decoration: none;
  color: var(--color-primario);
}
section.ancho.blog .main-content a:hover {
  border-bottom: #008a90 solid 1px;
}
section.ancho.blog .main-content a:hover h2 {
  border-bottom: #008a90 solid 2px;
  width: fit-content;
}
/*
.ancho #mapa{
    margin-top: 140px;
}*/

/* 3.0? Responsivo */

/* 3.1? 1043px*/
/* 3.1.1? Index/Formulario*/
@media only screen and (max-width: 1170px) {
  .ancho .menu {
    justify-content: space-between;
    padding: 0px 0px;
  }
  .ancho .menu li a {
    display: block;
    font-size: 14px;
    width: fit-content;
    border-bottom: 1px solid var(--color-claro);
  }
}
@media only screen and (max-width: 1059px) {
  #contacto .ancho .grid-container {
    grid-template-columns: 95%;
  }
  #contacto #datos {
    position: absolute;
  }

  #contacto #datos {
    top: 40px;
    width: 100%;
    height: 450px;
    margin-left: 20px;
    position: relative;
  }

  #contacto #datos::before {
    width: 100%;
  }

  #contacto #datos #formulario {
    width: 400px;
    height: 350px;
  }
  #contacto iframe.nueva-direccion {
    margin-top: 20px;
  }
}

/* 3.2? 827px*/
/* 3.2.1? Prelogo*/

@media only screen and (max-width: 827px) {
  section.ancho.blog .inner {
    display: block;
  }
  #prelogo .ancho .table {
    font-size: 18px;
  }
  #prelogo .ancho .table th {
    top: 14px;
    /*border: red 1px solid;*/
  }
  #prelogo .ancho .table th span {
    display: none;
  }
  #ubi .grid-container {
    gap: 20px;
    margin-left: 0px;
    grid-template-columns: 100%;
  }
  #ubi .grid-container .grid-item-ri {
    margin-left: 0px;
  }
}
/*3.3? 774px */
/*3.3.1? Burguer*/
@media only screen and (max-width: 774px) {
  #encabezado .redes {
    float: right;
    position: relative;
    top: 120px;
    justify-content: space-around;
    margin-right: 2%;
    /*border: red solid 1px;  */
  }
  #burguer {
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    border: solid 3px var(--color-primario);
    width: 35px;
    position: absolute;
    top: 80px;
    right: 30px;
    padding: 6px;
    border-radius: 6px;
  }

  #burguer div {
    background-color: var(--color-primario);
    height: 3px;
    border-radius: 3px;
    transition: all 1s;
  }

  #burguer div:nth-child(2) {
    margin: 3px 0;
  }

  #movil:checked ~ #burguer div:first-child {
    transform: translateY(6px) rotate(45deg);
  }
  #movil:checked ~ #burguer div:nth-child(2) {
    opacity: 0;
  }
  #movil:checked ~ #burguer div:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .menu {
    transition: all 1s;
    height: 0px;
    overflow: hidden;
    flex-direction: column;
  }
  .ancho ul.menu li a {
    /* height: 20px; */
    border-bottom: 1px solid #008a90;
    width: 100%;
    font-size: 16px;
  }
  #movil:checked ~ nav .menu {
    height: auto;
  }
  
}
/*3.4? 748px*/

@media only screen and (max-width: 748px) {
  /*3.4.1? Prelogo*/
  #prelogo .ancho .table .middle {
    display: none;
    /*border: red 1px solid;*/
  }
  /*3.4.2? Formulario*/
  #contacto #datos #formulario {
    margin-right: 100px;
  }
  #ciru-refra.index h2 {
    margin-top: 200px;
  }

  /*3.4.3? Footer*/
  footer p {
    font-size: 20px;
    text-align: center;
  }

  footer p {
    width: 400px;
    margin: auto;
    line-height: 60px;
  }
  footer p span {
    display: block;
  }
}

/*3.4.0.1? 641px*/
/* 3.4.0.1.1? Menu Burguer*/
@media only screen and (max-width: 641px) {
  .menu a {
    box-shadow: 1px 1px 1px #33333370;
  }
  #movil:checked ~ .menu {
    width: 100%;
    margin: none;
    display: block;
    height: 100px;
  }
}
/* 3.5? 604px*/
/* 3.5.1? Video Inicio*/
@media only screen and (max-width: 604px) {
  #contacto .video_inicio {
    width: 105%;
    height: 350px;
  }
}

/*3.6? 528px*/
@media only screen and (max-width: 528px) {
  /*3.6.1? Prelogo*/
  #prelogo .second_phone {
    display: none;
  }
}

/*3.7? 547px*/
/*3.7.1? Pacientes Lightbox*/
@media only screen and (max-width: 547px) {
  #pacientes .ancho div figure {
    width: 100%;
    overflow: hidden;
    height: 280px;
    margin: 10 15px;
  }
  #pacientes .ancho div figure img {
    width: 100%;
    height: 220px;
    transition: all 1s ease;
  }
  #pacientes .ancho div figure h4 {
    margin-top: 10px;
  }
}
/* E3.8? 487px*/
@media only screen and (max-width: 487px) {
  #encabezado .hero img {
    height: 110px;
    top: 40px;
    object-fit: cover;
  }
  #encabezado .ancho .logo img {
    width: 170px;
    top: 50px;
  }

  #movil:checked ~ .menu {
    top: 115px;
    height: 200px;
  }
}
@media only screen and (max-width: 487px) {
  .ancho .menu {
    top: 118px;
  }
}
/* 3.8? 475px*/
@media only screen and (max-width: 475px) {
  /* 3.8.1? Video Inicio*/
  #contacto .video_inicio {
    width: 100%;
    height: 250px;
    margin: none;
  }
  /*3.8.2? Formulario*/
  #contacto .ancho .grid-container {
    grid-template-columns: 100%;
  }
  #contacto #datos {
    position: absolute;
  }

  #contacto #datos {
    top: 40px;
    width: 60%;
    height: 380px;
    margin: auto;
    position: relative;
  }

  #contacto #datos::before {
    width: 100%;
  }

  #contacto #datos #formulario {
    width: 300px;
    height: 280px;
  }
}
/* 3.9? 447px*/

@media only screen and (max-width: 447px) {
  /* 3.9.0? Prelogo*/
  #prelogo {
    height: 40px;
  }
  #prelogo .ancho .table {
    top: 1px;
  }

  /*3.9.1? Héroe*/
  #encabezado .hero img {
    height: 110px;
    top: 40px;
  }
  #encabezado .ancho .logo img {
    width: 170px;
    top: 50px;
  }
  #burguer {
    top: 55px;
    right: 24px;
  }
  #encabezado .redes {
    top: 105px;
  }
  .menu {
    margin-top: -22px;
    transition: all 1s;
    height: 0px;
    overflow: hidden;
  }
  .menu a {
    /* height: 20px; */
    border-bottom: 1px solid var(--color-claro);
  }
  #movil:checked ~ .menu {
    top: 115px;
    height: 200px;
  }
  /* 3.9.2? Formulario */
  #contacto #datos {
    width: 300px;
    height: 370px;
  }

  #contacto #datos::before {
  }
  #contacto #datos #formulario {
    padding: 30px 15px;
    width: 250px;
    height: 270px;
  }
  #contacto .ancho #datos #formulario button {
    font-size: 24px;
  }

  #contacto .h3 {
    margin-top: 0px;
    font-size: 18px;
  }
  /*3.9.3? Pacientes Lightbox*/

  #pacientes .ancho div figure {
    width: 100%;
    overflow: hidden;
    height: 280px;
    margin: 10 15px;
  }
  #pacientes .ancho div figure img {
    width: 100%;
    height: 220px;
    transition: all 1s ease;
  }
  #pacientes .ancho div figure h4 {
    margin-top: 7px;
  }
  /*
    #pacientes .ancho a{
        margin-left: 0px;
        overflow: hidden;
        }

    #pacientes .ancho div figure{
        width: 100%;
        height: 280px;
        overflow: hidden;
    }
    #pacientes .ancho div figure img{
        width: 100%;
        margin: auto;
        height: 230px;
        overflow: hidden;
    }
    
    #pacientes .ancho div figure h4{
        margin: 0px;
        overflow: hidden;}*/
}

/*4.0? Responsivo DocSanchezG*/

/*4.1? 1043px Trayectoria*/

@media only screen and (max-width: 1043px) {
  #trayectoria .carrera p {
    font-size: 20px;
  }

  #trayectoria .video_doc {
    height: 340px !important;
  }
}

@media only screen and (max-width: 913px) {
  #trayectoria .ancho h2 {
    content: "De. César Sánchez Galeana";
    margin-top: 30px;
  }

  #trayectoria .video_doc {
    margin-top: 40px;
    height: 340px !important;
  }

  #trayectoria .carrera p {
    font-size: 24px;
    margin-left: 0;
  }
}

@media only screen and (max-width: 716px) {
  #trayectoria .video_doc {
    margin-top: 40px;
    width: 480px !important;
  }

  #trayectoria-container .block-iz h3 {
    text-align: center;
    font-size: 16px;
  }
  #trayectoria-container img {
    width: 80% !important;
  }
}
@media only screen and (max-width: 414px) {
  #trayectoria-container .block-iz {
    width: 400px;
  }
  #trayectoria-container img {
    width: 360px !important;
  }
}
@media only screen and (max-width: 400px) {
  #trayectoria-container .block-iz {
    padding-left: 10px;
    width: 380px;
  }
  #trayectoria .video_doc {
    margin-top: 40px;
    width: 380px !important;
  }

  #trayectoria .carrera p {
    margin-top: 20px;
    font-size: 18px;
  }

  #trayectoria .fondo {
    width: 400px !important;
  }

  #trayectoria-container .block-iz h3 {
    text-align: center;
    font-size: 14px;
  }
  #trayectoria-container img {
    width: 360px !important;
  }
}

/*4.2? 925px Trayectoria
        @media only screen and (max-width: 925) {
            #trayectoria .grid-container{
                display: grid;
                grid-template-rows: 1fr 1fr;
            }
            
            #trayectoria .ancho .grid-item-right .carrera{
                display: flex;
                color: #222;
                font-family: 'Gothic';
                font-size: 23px;
                padding: 30px 30px 0px 0px;
                text-align: justify;
                text-justify: inter-word;
                
            }
        }
*/

/*Responsivo Martha DeBayle*/
/*893px*/
@media only screen and (max-width: 893px) {
  .martha_vid {
    height: 300px;
  }
}

@media only screen and (max-width: 638px) {
  .martha_vid {
    height: 220px;
  }
}

@media only screen and (max-width: 482px) {
  .martha_vid {
    height: 180px;
  }
}

/*Responsivo Sale el Sol*/

@media only screen and (max-width: 956px) {
  #saleelsol .ancho a {
    font-size: 15px;
    padding: 5 20px;
  }
}

@media only screen and (max-width: 822px) {
  #saleelsol .ancho a {
    font-size: 15px;
    padding: 5 18px;
  }
}

@media only screen and (max-width: 822px) {
  #saleelsol .ancho a {
    font-size: 14px;
    padding: 1px 20px;
    margin: 10px 0;
  }
}

/*Responsivo cirugías*/
@media only screen and (max-width: 1030px) {
  .panel img {
    width: 300px;
    display: inline-block;
    margin-left: 100px;
    margin-top: 20px;
  }

  .panel p {
    display: inline-block;
    font-family: "Gothic";
    font-size: 20px;
    max-width: 500px;
    padding: 0px 20px 0 20px;
    line-height: 30px;
  }
}

@media only screen and (max-width: 1030px) {
  .panel img {
    width: 300px;
    display: inline-block;
    margin-left: 60px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 970px) {
  .panel img {
    width: 300px;
    display: inline-block;
    margin-left: 30px;
    margin-top: 20px;
  }
}

@media only screen and (max-width: 940px) {
  .panel img {
    width: 300px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 920px) {
  .panel img {
    width: 400px;
    margin-left: 15px;
    margin-top: 20px;
  }

  .panel p {
    text-align: center;
    margin: 20px 0 20px 0;
  }
}