*{
      box-sizing: border-box;
      font-family: sans-serif;
      margin: 0;
      padding: 0;
}
a{color: #2f2f2f;}
header {
      background: rgba(0,0,0,0.2);
      display: grid;
      position: absolute;
      height: 60px;
      width: 100%;
      z-index: 100;
}
.menu-icon{display: none;}
#check{display: none;}
.menu{
      float: right;
      margin: 0 10px 0 0;
      top: 20px;
      right: 100px;
      position: absolute;
}
.menu a{
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      margin-right: 20px;
}
.marca {
      color: #fff;
      font-size: 18px;
      display: block;
      position: absolute;
      top: 18px;
      left: 100px;
}

.lema{
      background-image: url(../Fotos/abogados_ciudad_mexico_cdmx.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      height: 500px;
      width: 100%;
}
.lema:before{
      background: #283d5867;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
}
.sublema{
      align-items: center;
      color: #fff;
      display: flex;
      text-align: center;
      justify-content: center;
      flex-direction: column;
      position: relative;
      margin: auto;
      height: 500px;
      max-width: 600px;
      z-index: 10;
}
.sublema h1{margin-bottom: 30px;}
.sublema p{font-size: 22px;}
/* TITULO empieza */
.titulo_principal{
      box-sizing: border-box;
      max-width: 750px;
      margin: auto;
      padding: 20px;
}
.titulo_principal p{
      line-height: 1.5;
      margin-bottom: 2%;
}
.titulo_principal h2{
      margin-bottom: 2%;
      width: 100%;
}
/* CUADROS */
.bloque {
      max-width: 1100px;
      margin: auto;
      padding: 20px;
}
.bloque h2{
      margin-bottom: 100px;
      text-align: center;
}
.cuadros {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
}
.cuadro {
      box-shadow: 0 6px 14px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.108);
      box-sizing: border-box;
      flex: 1 1 200px;
      min-width: 150px;
      height: 280px;
      padding: 20px;
      border-radius: 10px;
}
.bloque .cuadros .cuadro .cuad-titulo{
      margin-bottom: 20px;
      font-weight: 600;
}
/* VIDEO */
.intro{
      display: flex;
      padding: 50px 20px;
      justify-content: center;
}
.vdescripcion{
      margin-right: 40px;
      width: 400px;
}
.vdescripcion .intro_titulo{margin-bottom: 15px;}
.vdescripcion p{line-height: 1.6;}
video{
      height: 300px;
      width: 600px;
}
/* Consecuencias inicia */
.consecuencias_uno{
      display: flex;
      margin: auto;
      padding: 20px;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
}
.consecuencias_dos{
      display: flex;
      margin: auto;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
}
.trabajaremos{
      border-radius: 10px;
      box-sizing: border-box;
      background: linear-gradient(124deg, rgba(94,102,119,0.9363095580028886) 0%, rgba(37,55,91,1) 7%);
      padding: 40px 0 40px 30px;
      float: left;
      height: 35em;
      width: 300px;
}
.vector{
      border-radius: 10px;
      box-sizing: border-box;
      height: 480px;
      width: 310px;
}
.loquehacemos{margin-left: 10%;}
.parte_dos{
      box-sizing: border-box;
      margin-bottom: 30px;
      width: 500px;
}
.parte_dos_titulo{
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 15px;
}
/* Consecuencias termina */
/* Numeros empieza */
.numeros{
      background-color: #33406c;
      padding: 20px;
}
.counter{
      display: flex;
      margin: auto;
      flex-wrap: wrap;
      position: relative;
      justify-content: center;
      align-items: center;
}
.progreso_numeros {
      color: #fff;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      margin: .5%;
      padding: .5em 0;
      width: calc((70%) / 4);
      flex-direction: column;
}
.numeros .counter .progreso_numeros .progreso_texto{margin-bottom: 10px;}
.numeros .counter .progreso_numeros span{
      font-weight: bold;
      font-size: 25px;
}
/* PERSONAS QUE NECESITAS ASESORÍA JURÍDICA O ABOGADO */
.materias{
      background-color: #dedede;
      box-sizing: border-box;
      padding: 20px;
}
.mat_contenedor{
      display: flex;
      margin: auto;
      max-width: 1200px;
      justify-content: center;
}
.mat_tem_subtem{
      padding: 20px 0;
      margin: auto;
      max-width: 1110px;
}
.materias .mat_tem_subtem .mat_subtem{
      color: #363333;
      margin: 20px 0;
      font-size: 20px;
}
.mat_izq{
      border-radius: 10px;
      background-color: #fff;
      padding: 20px;
      margin: 0 10px 10px 0;
      height: 295px;
      width: 295px;
}
.mat_img{
      background-image: url(../Fotos/despacho-juridico-mexico-cdmx.webp);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      border-radius: 10px;
      padding: 20px;
      height: 600px;
      width: 500px;
}
.mat_cont_der
.mat_der{
      border-radius: 10px;
      background-color: #fff;
      padding:20px;
      margin: 0 0 10px 10px;
      height: 295px;
      width: 295px;
}

.vento{padding: 20px;}
.ventajas{
      display: flex;
      flex-wrap: wrap;
      margin: auto;
      max-width: 700px;
      
}
.vento .ventajas ul{width: 100%;}
.vento .ventajas ul li p{width: 100%;}
.vento .ventajas p{
      margin: 20px 0;
      width: 100%;
}
/* VENTAJAS TERMINA */
/* Open estilo empieza */
.info {
      max-width: 1180px;
      margin: auto;
      padding: 20px;
}
.info .info-titulo{
      display: block;
      margin: auto;
      margin-bottom: 90px;
      text-align: center;
      justify-content: center;
      width: 600px; 
}
.info .info-titulo h2{
      margin-bottom: 20px;
      text-align: center;
}
.info_cont{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
}
.info_cuadro{
      /*box-shadow: 0 6px 14px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.108);*/
      box-sizing: border-box;
      flex: 1 1 280px;
      min-width: 150px;
      height: 150px;
      border-radius: 10px;
}
.info .info_cont .info_cuadro .info-subtitulo{margin-bottom: 20px;}
/*.contenido_blog{margin-top: 20px;}*/
.contenido {
      background-color: rgb(227, 227, 227);
      display: flex;
      margin: auto;
      flex-wrap: wrap;
      width: 90%;
}
.algunos{
      background: #36536d;
      color: #fff;
      font-size: 20px;
      padding: 10px;
      margin-bottom: 10px;
      text-align: center;
      width: 100%;
}
.contenido .noticia2{
      box-sizing: border-box;
      border: 1px solid #000;
      background: #f6f6f6;
      margin: 0.5%;
      padding: 20px;
      width: 32.3%;

      float: left;
      height: 300px;
}
.contenido .noticia2 .blogtitulo{
      font-size: 15px;
      margin-bottom: 20px;
}
.contenido .noticia2 .titular{
      font-size: 12px;
      margin-bottom: 20px;
}
.contenido .noticia2 .titular:after{
      background: rgb(167, 167, 167);
      content: '';
      display: block;
      position: relative;
      margin: 10px 0;
      height: 1px;
      width: 100%;
}

footer{
    background-color: #e0e0e0;
    padding: 50px 0;
    width: 100%;
}
.container-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
}
.box-footer{
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.box-footer p{
    margin-bottom:10px;
    font-weight: 300;
}
.box-footer ul{
    padding: 0;
    list-style: none;
}
.box-footer ul li{margin-top: 10px;}
.box-footer ul li a{
    font-size: 12px;
    text-decoration: none;
}
.box-footer ul li a:hover{opacity: .8;}
.contenedor-fuder{
      background-color: #dedede;
      padding: 30px 110px;
}
.divisor{
      border-top: 1px solid #000;
      width: 100%;
}
.footer{
      justify-content: space-between;
      display: flex;
}
.information a img{
      margin-right: 10px;
      height: 22px;
      width: 22px;
}
@media screen  and (max-width: 640px){
      .marca{left: 34%;}
      .lema .sublema{
            height: 500px;
            width: 85%;
      }
      .lema .sublema h1{font-size: 20px;}
      /* Titulo principal empieza */
      .titulo_principal{
            padding: 10px;
            width: 100%;
      }
      .titulo_principal p{margin-bottom: 40px;}
      .titulo_principal h2{
            font-size: 20px;
            width: 100%;
      }
      /* Consecuencias inicia */
      /* VIDEO */
      .intro{
            display: block;
            position: relative;
            width: 100%;
      }
      .vdescripcion{
            float: left;
            width: 100%;
      }
      video{
            float: left;
            width: 100%;
      }
      /* VIDEO TERMINA */
      .consecuencias_uno{
            box-sizing: border-box;
            margin-top: 10%;
            padding: 20px 0;
            width: 95%;
      }
      .consecuencias_dos{width: 100%;}
      .trabajaremos{
            margin-bottom: 5%;
            height: 400px;
            width: 200px;
      }
      .vector{
            height: 330px;
            width: 200px;
      }
      .loquehacemos{
            margin: 0;
            width: 100%;
      }
      .parte_uno h3{font-size: 16px;}
      .parte_uno p{font-size: 14px;}
      .parte_dos{
            margin: 10px 0;
            width: 100%;
      }
      .parte_dos p{font-size: 12px;}
      /* Consecuencias termina */
      /* NUMEROS INICIA*/
      .numeros{padding: 0;}
      .numeros .counter .progreso_numeros img{
            color: #000;
            font-size: 70px;
      }
      .progreso_numeros {
            border-right: none;
            margin: 1%;
            flex-direction: column;
            width: calc((90%) / 2);
      }
      /* NUMEROS TERMINA */
      /* Servicios Materias inicia */
      .materias{width: 100%;}
      .mat_tem{font-size: 18px;}
      .materias .mat_tem_subtem .mat_subtem{font-size: 14px;}
      .materias .mat_contenedor{
            align-items: center;
            display: inline-block;
            justify-content: center;
            width: 100%;
      }
      .materias .mat_contenedor .mat_cont_izq .mat_izq{
            float: left;
            height: 200px;
            width: 90%;
      }
      .materias .mat_contenedor .mat_img{
            float: left;
            height: 450px;
            width: 90%;
      }
      .materias .mat_contenedor .mat_cont_der .mat_der{
            float: left;
            height: 200px;
            width: 90%;
      }
      /* Servicios Materias termina */
      /* Ataques inicia */
      .ataques_principal{
            padding: 5px;
            width: 100%;
      }
      .ataques_principal .ataques_titulo{width: 90%;}
      .ataques_principal .ataques_titulo h2{font-size: 18px;}
      .ataques_principal .ataques_titulo p{font-size: 12px;}

      .ataques{
            display: block;
            width: 100%;
      }
      .ataques_cuad{
            margin: 20px 0;
            width: 100%;
      }
      /* Ataques termina */
      /* VENTAJAS INICIA */
      .vento{padding: 20px 0;}
      .vento .ventajas{width: 85%;}
      .vento .ventajas p{width: 100%;}
      .vento .ventajas ul{
           width: 100%; 
           margin-bottom: 20px;
      }
      /* BLOG JURÍDICO EMPIEZA */
      .contenido_blog{padding: 0;}
      .contenido{width: 100%;}
      .contenido .noticia2{
            margin: auto;
            margin-bottom: 2%;
            width: 90%;
      }
      .contenido .noticia2 p{font-size: 14px;}
      /* VENTAJAS TERMINA */
      .contenedor-fuder{padding: 20px;}
      .footer-todo{padding: 20px;}
      .copyright{margin-right: 30px;}
      .footer-todo:after{margin-bottom: 10px;}
      .information a{
            display: block;
            position: relative;
            margin-bottom: 5px;
            width: 150px;
      }
}
@media screen and (max-width: 800px) {
      #check:checked ~ .menu{left: 0;}      
      .menu{
            background: #fff;
            top: 69px;
            left: -100%;
            transition: all 0.8s ease;
            overflow-y: scroll;
            overflow: -moz-scrollbars-vertical;
            width: 100%;
            height: 100vh;
            z-index: 200;
      }
      .menu a{
            color: #000;
            display: block;
            border-bottom: 1px solid #000;
            box-sizing: border-box;
            font-size: 0.8rem;
            padding: 2px 0 0 0;
            padding-left: 30px;
            line-height: 65px;
            height: 70px;
            width: 100%;
      } 
      .menu-icon{
            cursor: pointer;
            display: block;
            float: left;
            left: 5%;
            margin: 20px 5px; 
            position: absolute;
      }
      .columna2, .columna3{
            margin-top: 40px;
            width: 100%;
      }
      .contacto{flex-wrap: wrap;}
}