/* ==========================
   Estilos Responsivos - móviles (máx. 768px)
   Poder Judicial Yucatán - Proteccion (rescate UX)
   ========================== */

@media screen and (max-width: 768px) {

 /* =============================
     GENERAL
  ============================== */

  #header{
    position: fixed;
    top: 0px;
    z-index: 1000;
  }

  #page-container
  {
    padding-top: 13rem !important;
  }

  #page-container > nav.navbar.navbar-expand-sm.sticky-top.navbar-dark{
      top: 9.5rem !important;
      right: 0px;
      position: fixed;
      width: 100%;
  }

  #banner{
     height: 17rem !important;
     padding-top: 2rem !important;
  }

  #banner > .content-bg{
     background-position: right;
     height: 17rem !important;
  }

  #banner > .container.cont-flex.fadeInDown.contentAnimated.finishAnimated > .cont-text > h3{
    font-size: 1rem !important;
    padding-top: 4rem;
  }
   
  #banner > .container.home-content > .row.col-lg{
     margin-left: auto;
     margin-right: auto;
  }

  #banner > a.scroll-down-a{
    display: none !important;
  }

  .bg-silver-lighter #panel_informacion{
    padding: 1.75rem 0rem 1.68rem;
  }

  #antecedentes.content{
     padding: 2rem .9375rem 1rem !important;
  }

  #antecedentes > .container.fadeInDown.contentAnimated.finishAnimated
  {
     padding: 0rem 1rem 1rem !important;
  }

  #ambiente.content{
     padding: 2rem .9375rem 1rem !important;
  }

  #ambiente > .container.fadeInDown.contentAnimated.finishAnimated
  {
     padding: 0rem 1rem 1rem !important;
  }

  #porque.content{
     padding: 2rem .9375rem 1rem !important;
  }

  #porque > .container.fadeInDown.contentAnimated.finishAnimated
  {
     padding: 0rem 1rem 1rem !important;
  }

  #componentes.content{
     padding: 2rem .9375rem 1rem !important;
  }

  #componentes > .container.fadeInDown.contentAnimated.finishAnimated
  {
     padding: 0rem 1rem 1rem !important;
  }

  #porque .card.card-demo.shadow{
    margin-bottom: 1rem;
  }

  #contacto.content{
     padding: 2rem .9375rem 1rem !important;
  }

  #contacto > .container.fadeInDown.contentAnimated.finishAnimated
  {
     padding: 0rem 1rem 1rem !important;
  }

  #contacto h4{
    font-size: 0.9rem;
  }

  #contacto a{
     overflow-wrap: break-word;
  }
}