/* Responsive original */

/* container-nav */
.navbar button {
    display: none;
  }
  .container-fluid img {
      width:15vh;
      height: 8vh;
      padding: 2px 0px 5px 0;
  }
  h1, h2  {
      font-family: 'Afacad', sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size:3.3rem;
  }
  .navbar-brand {
      font-family: 'Afacad', sans-serif;
      font-weight:lighter;
      font-style: normal;
      font-size:1.4rem;
  }
  
  /* Abhaya */
  div p {
      font-family: 'Abhaya Libre', sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 1.3rem;
  }
  
  button {
      font-family: 'Abhaya Libre', sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 1.5rem;
  }
  
  h6 {
      font-family: 'Abhaya Libre', sans-serif;
      font-weight: normal;
      font-style: normal;
      font-size: 1.3rem;
  }
  .navbar-toggler svg {
      color: #000; 
  }
  
  .navbar-toggler:hover svg {
      color: white; 
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }
  
  .offcanvas-body li {
      text-align: left;
  }
  
  .offcanvas-body li a {
      text-decoration: none;
      color:#000;
  }
  
  .container-fluid a {
      text-decoration: none;
      color: white;
      margin: 0 40px 0 0;
  }
  
  .bg-body-tertiary {
      background-color: #FFACBC;
      opacity: 90%;
  }
  
  .row {
      --bs-gutter-x: 0; 
  }
  .navbar-opacity {
      opacity: 0.9; 
  }
  .offcanvas {
      opacity: 1 !important;
  }
  /*Container mid*/
  #home {
      width: 100%; 
      text-align:center;
  }
  #cont-fila {
      padding: 8% 5%;
      width: 100%;
      justify-content: center;
      align-items: center;
  
  }

  #cont-fondo {
      padding: 5%;
  }
  #cont-fondo1 {
      width: 100%;
      background-image: url('../img/foto-home.svg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      padding: 4%;
  }
  
  #cont-imagen {
      width: 100%;
      height: 50vh;
      background-image: url('../img/imagen-fondo1.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
  
  }
  
  
  #cont-desc {
      padding: 2% 0 0 5%;
      color: #CE4846;
      text-align: left;
  }
  
  
  
  #button {
      width: 40%;
      height: 60px;
      border-radius: 10px;
      background-color: #FFACBC;
      color: white;
      border-style: none;
      margin: 25px 0 0 0;
  }
  
  .container-mid img {
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: center; 
      width: 100%;
      height: 100vh; 
      
  }
  
  /*Container sobremi*/
  #sobremi {
    width: 100%;  
    background-color: #FDF3F3;
  }
  #cont-sobremi-1 {
    justify-items: center;
    padding: 5%;
  }
  #cont-face {
    width: 100%;
    background-image: url('../img/foto-sobremi.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    padding: 8%;

  }
  #cont-face1 {
    width: 100%;
    height: 45vh;
    background-image: url('../img/imagen-sobremi.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  
  #cont-sobremi-2 {
      justify-items: left;
      align-self: center;
      color: #CE4846;
  }
  
  /*Container productos*/
  #cont-prod-1 {
      color: #CE4846;
  }
  .carousel-item img  {
      width: 100%;
      
  }
  
  .carousel-inner {
      margin: auto;
      width: 80%;
      padding: 90px 0 90px 0;
  }
  #cont-prod-1 {
      text-align: center;
      padding: 50px;
      margin: 0 0 25px 0;
  }
  .recuadro {
      background-color: white; /*1440*/
      margin: 8px;
      padding: 8px;
  }
  
  .carousel {
      padding: 0  0 50px 0;
  
  }
  
  
  /* container-contacto */
  #contacto {
      background-size: cover; 
      background-repeat: no-repeat; 
      background-position: center; 
      width: 100%;
  }
  #cont-título {
      text-align: center;
      padding: 50px;
      margin: 0 0 25px 0;
      color: #CE4846;
  }
  
  
  #cont-redes {
      background-color: white;
      width: 100px;
      height: 100px;
      border-radius: 360px;
      margin: 0 20px 0 20px;
  }
  
  #cont-WIT {
      width: 60%;
      height: 60%;
      margin: 20px 0 0 20px;
      background-size: cover;
  }
  
  /*container-footer*/
  #cont-logo {
      background-size: cover;
      width: 208px;
      height: 70px;
  }
  #colum-1 {
      justify-items: center;
      padding: 3% 0 2% 0;
      /* width: 50% !important; */
  }
  
  #colum-2 a {
      justify-items: center;
      color: #CE4846;
      text-decoration: none;
  }

/* Responsive-1022px a 375px */
@media (max-width: 1023px) {
    /* container-nav */
    .navbar-brand {
        display: none;
    }
    .navbar button {
        display: block;
    }
    .container-fluid img {
        width:12vh;
        height: 8vh;
        padding: 2px 0px 5px 0;
    }
    h1, h2  {
        font-family: 'Afacad', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size:2.5rem;
    }
    .navbar-brand, .offcanvas-body ul  {
        font-family: 'Afacad', sans-serif;
        font-weight:lighter;
        font-style: normal;
        font-size:1.4rem;
    }
    
    /* Abhaya */
    div p {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1rem;
    }
    
    button {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1.5rem;
    }
    
    h6 {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1rem;
    }
    .navbar-toggler svg {
        color:#CE4846 ;
        box-shadow: none; 
    }
    
    .navbar-toggler:hover svg {
        color: none; 
    }
    
    .offcanvas-body li {
        text-align: left;
    }
    
    .offcanvas-body li a {
        text-decoration: none;
        color:#CE4846;
    }
    .offcanvas-header {
        color:#CE4846;
    }
    .container-fluid a {
        text-decoration: none;
        color: white;
        margin: 0 40px 0 0;
    }
    
    .bg-body-tertiary {
        background-color: #FFACBC;
        opacity: 90%;
    }
    
    .row {
        --bs-gutter-x: 0; 
    }
    .navbar-opacity {
        opacity: 0.9; 
    }
    .offcanvas {
        opacity: 1 !important;
    }
    /*Container mid*/
    
    #cont-desc {
        padding: 5% 5%;
        color: #CE4846;
        text-align: center;
    }
    
    
    #button {
        width: 50%;
        height: 50px;
        border-radius: 10px;
        background-color: #FFACBC;
        color: white;
        border-style: none;
        margin: 10px 0 0 0;
    }
    
    /*Container sobremi*/
    
    #cont-sobremi-2 {
        justify-items: center;
        padding: 5%;
    }
    
    /*Container productos*/
    #cont-prod-1 {
        color: #CE4846;
        text-align: center;
        padding: 50px 50px 20px 50px;
        /* margin: 0 0 25px 0; */
    }
    .carousel-item img  {
        width: 100%;
        padding: 10px;
    }
    
    .carousel-inner {
        margin: auto;
        width: 80%;
        padding: 50px 0 50px 0;
    }
    
    .recuadro {
        background-color: white;
        margin: 10px;
        padding: 0px;
    }
    .carousel {
        padding: 0  0 50px 0;
    
    }
    
    
    /* container-contacto */
    #contacto {
        background-size: cover; 
        background-repeat: no-repeat; 
        background-position: center; 
        width: 100%;
    }
    #cont-título {
        text-align: center;
        padding: 50px;
        margin: 0 0 25px 0;
        color: #CE4846;
    }
    
    
    #cont-redes {
        background-color: white;
        width: 90px;
        height: 90px;
        border-radius: 360px;
        margin: 0 20px 0 20px;
    }
    
    #cont-WIT {
        width: 60%;
        height: 60%;
        margin: 20px 0 0 20px;
        background-size: cover;
    }
    
    /*container-footer*/
    #cont-logo {
        background-size: cover;
        width: 180px;
        height: 60px;
    }
    #colum-1 {
        justify-items: center;
        padding: 4% 0 2% 0;
    }
    
    #colum-2 {
        padding: 20px 0 0 0;
        color: #CE4846;
        justify-items: center;
    }

}


@media (max-width: 425px) {
    /* container-nav */
    .navbar-brand {
        display: none;
    }
    .navbar button {
        display: block;
    }
    .container-fluid img {
        width:11vh;
        height: 8vh;
        padding: 2px 0px 5px 0;
    }
    h1, h2  {
        font-family: 'Afacad', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size:2.5rem;
    }
    .navbar-brand, .offcanvas-body ul {
        font-family: 'Afacad', sans-serif;
        font-weight:lighter;
        font-style: normal;
        font-size:1.4rem;
    }
    
    /* Abhaya */
    div p {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1rem;
    }
    
    button {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1rem;
    }
    
    h6 {
        font-family: 'Abhaya Libre', sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: 1rem;
    }
    .navbar-toggler svg {
        color:#CE4846; 
    }
    
    .navbar-toggler:hover svg {
        color: none; 
    }
    
    .offcanvas-body li {
        text-align: left;
    }
    
    .offcanvas-body li a {
        text-decoration: none;
        color:#CE4846;
    }
    
    .container-fluid a {
        text-decoration: none;
        color: white;
        margin: 0 40px 0 0;
    }
    
    .bg-body-tertiary {
        background-color: #FFACBC;
        opacity: 90%;
    }
    
    .row {
        --bs-gutter-x: 0; 
    }
    .navbar-opacity {
        opacity: 0.9; 
    }
    .offcanvas {
        opacity: 1 !important;
    }
    /*Container mid*/
    
    #cont-fila {
        width: 100%;
        justify-content: center;
    
    }
    
    #cont-desc {
        padding: 8% 0 10% 0;
        color: #CE4846;
        text-align: center;
        width: 100%;
        height: 0%;
        /* revisar width de colmd */
    }
    
    #button {
        width: 50%;
        height: 50px;
        border-radius: 10px;
        background-color: #FFACBC;
        color: white;
        border-style: none;
        margin: 10px 0 0 0;
    }
    
    /*Container productos*/
    #cont-prod-1 {
        color: #CE4846;
        text-align: center;
        padding: 50px 50px 20px 50px;
        /* margin: 0 0 25px 0; */
    }
    .carousel-item img  {
        width: 100%;
        padding: 10px;
    }
    
    .carousel-inner {
        margin: auto;
        width: 80%;
        padding: 50px 0 50px 0;
    }
    
    .recuadro {
        background-color: white;
        margin: 10px;
        padding: 0px;
    }
    .carousel {
        padding: 0  0 50px 0;
    
    }
    
    
    /* container-contacto */
    #contacto {
        background-size: cover; 
        background-repeat: no-repeat; 
        background-position: center; 
        width: 100%;
    }
    #cont-título {
        text-align: center;
        padding: 50px;
        margin: 0 0 25px 0;
        color: #CE4846;
    }
    
    
    #cont-redes {
        background-color: white;
        width: 90px;
        height: 90px;
        border-radius: 360px;
        margin: 0 20px 0 20px;
    }
    
    #cont-WIT {
        width: 60%;
        height: 60%;
        margin: 20px 0 0 20px;
        background-size: cover;
    }
    
    /*container-footer*/
    #cont-logo {
        background-size: cover;
        width: 154px;
        height: 52px;
    }
    #colum-1 {
        justify-items: center;
        padding: 5% 0 2% 0;
    }
    
    #colum-2 {
        padding: 20px 0 0 0;
        color: #CE4846;
        justify-items: center;
    }



}