/*! main-responsive.css v1.0.0 | MIT License | onesoftperu.com/erp/public/styles/main-responsive.css */

/* Document
   ========================================================================== */

/**
 * 1. Adaptar el layout a distintos dispositivos.
 * 2. Maquetear selectores de acuerdo a la resolución del dispositivo
 */

/** 
 * movil-portrait hasta movil-landscape:
 * Cuando el ancho de la pantalla tenga un ancho menor o igual a 767px
 */
 :root {
  /* Menús */
  --menu-responsive-color-background: var(--color-two); /* Color de fondo de los menús */
  /* Sub menús  */
  --submenu-responsive-color-background: var(--color-two); /* Color de fondo de los sub menús */
}

@media all and (max-width: 767px) {
  /* selectores de id para el titulo del slideshow */
  #slideTitle {
    font-size: 1.25rem;
  }
  #slideTitle label {
    font-size: 1rem;
  }

  .item-text {
    font-size: 1.25rem;
  }
  .item-text label {
    font-size: 1rem;
  }
  /* Para dispositivos de ancho menores o igual a 375px */
  @media all and (max-width: 375px) {
    .show-cart {
      min-width: 160px
    }
    /* selectores de id para el titulo del slideshow */
    #slideTitle {
      font-size: 1rem;
    }
    #slideTitle label {
      font-size: 0.85rem;
    }
    .item-text {
      font-size: 1rem;
    }
    .item-text label {
      font-size: 0.85rem;
    }
  }
  /** 
   * selectores del menu de navegación 
   */
  nav.main-menu {
    background-color: rgba(209,215,218,0.9);
    /* menu hamburgesa */
    box-shadow: 0 10px 0 #D1D7DA, 0 20px 0 #D1D7DA;
    height: 5px;
    left: 12px;
    opacity: 0.6;
    position: absolute;
    top: 12px;
    width: 30px;
  }
  /* menu hamburgesa */
  nav.main-menu:before{
    background: transparent;
    content: '';
    display: block;
    height: 30px;
    width: 100%;
  }

  nav.main-menu:hover,
  nav.main-menu:focus,
  nav.main-menu:active {
    opacity: 1;
  }

  nav.main-menu:hover ul,
  nav.main-menu:focus ul,
  nav.main-menu:active ul {
    display: block;
  }

  nav.main-menu ul {
    background-color: rgba(27,17,67,0.1);
    display: none;
    position: absolute;
    top: 25px;
    width: 200px;
    margin-left: 10px;
  }

  nav.main-menu li {
    border-top: 1px solid rgba(209,215,218,0.2);
    display: block;
  }

  nav.main-menu li:first-child {
    border: none; 
    padding-top: 5px;
  }
  nav.main-menu li a {
    padding: .8em;
  }

  /** 
   * selectores del sub menu de navegación 
   */
  nav.main-menu>ul>li {
    background-color: rgba(27,17,67,0.9);
  }
  nav.main-menu>ul>li>ul {
    background-color: rgba(27,17,67,0.7);
    position: relative;
    top: 0px;
    width: 200px;
  }

  nav.main-menu ul li ul li {
    display: block;
    margin-left: 15px;
  }
  nav.main-menu ul li:hover ul li {
    margin-left: 15px;
    background-color: rgba(27,17,67,0.4);
  }
  /**
   * Galeria de imagenes: 01 imagen por fila 
   */
  .gallery li {
    /** 
    * margenes: izquierda y derecha suman 5%, espacio disponible 95/1=95% 
    */
    width: 95%;
  }
  /**
   * Contenedor del login: cambiar el ancho a 45% 
   */
  .login__container {
    width: 90%;
  }

  h1 { 
    float: none; 
    text-align: center; 
  }

  /* 
   * Botones y enlaces de redes sociales 
   */
   a.a-link-social-network{
    width: 45%;
    font-size: 1em;
  }

}

/** 
 * tablet-portrait hasta tablet-landscape:
 * Cuando el ancho de la pantalla tenga un ancho mayor o igual a 768px
 * y un ancho menor o igual a 1023px
 */
@media all and (min-width: 768px) and (max-width: 1023px) {
  /**
   * Galeria de imagenes: 02 imagenes por fila 
   */
  .gallery li {
    /** 
    * margenes: izquierda y derecha suman 10%, espacio disponible 90/2=45% 
    */
    width: 45%;
  }

  /* Separación de los enlaces de navegacion */ 
  nav.main-menu a {
    padding: .5em .3em;
  }

  /* selectores de id para el titulo del slideshow */
  #slideTitle {
    font-size: 2rem;
  }
  #slideTitle label {
    font-size: 1.5rem;
  }

  .item-text {
    font-size: 2rem;
  }
  .item-text label {
    font-size: 1.5rem;
  }

}

/** 
* desktop:
* Cuando el ancho de la pantalla tenga un ancho mayor o igual a 1024px
*/
@media all and (min-width: 1024px) {
  main {
    grid-template-areas:
    "header header header"
    "slide slide slide"
    "categorias articulo carrito"
    "footer footer footer";
    grid-template-columns: 1fr 3fr 1fr;
  }
  /**
  * Galeria de imagenes: 03 imagenes por fila 
  */
  .gallery li {
    /** 
    * margenes: izquierda y derecha suman 15%, espacio disponible 85/3=28.3333% 
    */
    width: 28.3333%;
  }
  .gallery li:nth-child(4n) {
    clear: left;
  }

  /**
  * Secciones de la pagina: contacto
  ========================================================================== */
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 40%;
    float: right;
  }
  #secondary-left {
    width: 40%;
    float: left;
  }
  /**
  * imagen de la pagina acerca de
  */
  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

  /**
  * selectores de la pagina: programa
  ========================================================================== */
  #logo {
    float: left;
    text-align: left;
    width: 45%;
  }

  /* selectores de clase para la bienvenida del usuario */ 
  header .spn-email {
    display: block;
    float: left;
  }

  header .spn-iconuser {
    display: none;
    float: right;
  }

  /* selectores de id para el titulo del slideshow */
  #slideTitle {
    font-size: 4rem;
  }
  #slideTitle label {
    font-size: 3rem;
  }

  .item-text {
    font-size: 4rem;
  }
  .item-text label {
    font-size: 3rem;
  }

}


@media all and (max-width: 1023px) {
  /* selectores del sub menu de navegacion */
  nav.category-menu ul li ul li {
    display: none;
  }
}

/* 
 * begin Preview of good 
 */
@media all and (min-width: 768px) {
  .good-preview {
    grid-template-areas:
    "slide image contained";
    grid-template-columns: .25fr 3fr 3fr;
  }
  .good-small-img>img{
      display: block;
  }
  .good-small-img{
      text-align: right;
  }
}