/* css vinculado a los aside del index.php  INDEX.CSS */

/*----------------------      los aside todos del movil */
.color-logo {
    color: lime;
    font-family: Arial, Helvetica, sans-serif;
}


.aside1 h1,
.aside4 h1,
.aside6 h1,
.aside7 h1,
.aside8 h1,
.aside9 h1 {
    color: #fff;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.colorp {
    color: #fff;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: center;
}
.titulo_comentario{
    color: greenyellow;
    font-family: Arial, Helvetica, sans-serif;
}

/* **************************************************************************************************************************
*******************************************************       ASIDE       ***************************************************
*****************************************************************************************************************************/

/* ************ASIDE 1 ****************************
  TITULO: COMPRA Y VENDE PIEZAS
  ************************************************/
.aside1 {
    grid-area: aside1;
    height: auto;
    background-color: rgb(58, 116, 116);
    text-align: center;
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 1rem;
    border-radius: 4px;
    width: 100%;


}

/******* ASIDE 2 ******************************
TITULO:  EL MARKETPLACE  ESPECIALIZADO    1fila
**********************************************/


.aside2 {
    grid-area: aside2;
    height: auto;
    background-color: rgb(58, 116, 116);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/******* ASIDE 3 *******************************
TITULO: INTERIOR,ILUMINACION,MOTOR
***********************************************/
.aside3 {
    grid-area: aside3;
    background-color: rgb(58, 116, 116);
    border-radius: 4px;
}

/*  *************  ASIDE 4 ***********************
TITULO: ASIDE DE BUSCAR PIEZA  CONCRETA      1 fila
********************   *************************/

.aside4 {
    grid-area: aside4;
    margin-bottom: 4px;
    height: auto;
    padding: 1em;
    border-radius: 4px;
    background-color: rgb(58, 116, 116);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
     width: 100%;

}
h4{

    color: #fff;
}

.buscapieza {
    /* width: 100%; */
    /* height: 100%;  */
    /* margin-bottom: .5rem; */


}

.aside4 img {
    width: 50%;
}

button {
    width: 30px;
    padding: 2px 0px;
    cursor: pointer;
    border-radius: 50%;
    border-color: transparent;



}

button:hover {
    background-color: blue;
}

.botonbuscapieza button a {
    color: white
}



/************ ASIDE 5 ******************
TITULO: BUSCADOR DE PIEZA OEM       1 fila
*******************************************/
.aside5 {
    grid-area: aside5;
    background-color: rgb(58, 116, 116);
    /* height: 40px; */
    height: auto;
    width: 100%;
    border-radius: 4px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.parrafooem {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
}

.buscador {
    margin-bottom: .5rem;
}

.input_buscar {
    width: 250px;
    padding: 2px 0px;
    outline: none;
}

.submit_oem {
    cursor: pointer;

}

/********** ASIDE 6 ***********************
TITULO: PUBLICIDAD VACIO        1 fila
******************************************/
.aside6 {
    grid-area: aside6;
    height: auto;
    width: 94%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aside6 img {
    width: 40%;
}


/************* ASIDE 7 **************************
TITULO: PUBLICIDAD VACIO         1 fila
****************************************************/
.aside7 {
    grid-area: aside7;
    /* background-color: rgb(58, 116, 116); */
    background-color: gray;
    height: auto;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}
.aside7 img{
    width: 102%;
}

/******** ASIDE 8 *********************
TITULO: VACIO PUBLICIDAD       1 fila
****************************************************/
.aside8 {
    grid-area: aside8;
    background-color: rgb(58, 116, 116);
    height: auto;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/******** ASIDE 9 *********************
TITULO: VACIO PUBLICIDAD             1 fila
****************************************************/
.aside9 {
    grid-area: aside9;
    background-color: rgb(58, 116, 116);
    height: auto;
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}



/* -----------------------------------------------RESPALDO */



/* **********************    ASIDE ***************************************
*********************    DOBLE    DOBLE     DOBLE  ************************ */


@media screen and (min-width:616px) {

    /* *******************************************
    ASIDE 0            2 flas
    ***********************************************/
    .aside0 {
        width: 94%;

        background-repeat: no-repeat;
    }

    .aside0 {
        grid-area: aside0;
        height: auto;
        /* background-color: rgb(58, 116, 116); */
        /* background-color: ; */
        text-align: center;
        padding: 1rem;
        border-radius: 4px;
        width: 100%;


    }

    /*********************************************
     ASIDE 1        2 flas
     ******************************************** */
    .aside1 {
        width: 94%;
        margin: auto;

        border-radius: 4px;
        /* background-color: rgb(225, 226, 226); */
    }

    /* ********************************************
    ASIDE 2                 2 flas
    ***********************************************/
    .aside2 {
        padding: 0em;
        width: 94%;
        margin: auto;

        border-radius: 6px;
        /* background-color: rgb(225, 226, 226); */
    }


    /**********************************************
     ASIDE 3    2 flas
     ***********************************************/
    .aside3 {
        padding: 0em;
        width: 94%;
        margin: auto;
        border-radius: 6px;
        /* background-color: rgb(225, 226, 226); */
    }
      /**********************************************
     ASIDE 4    2 flas
     ***********************************************/
    .aside4 {
        width: 94%;
          margin: auto;
    }
     /**********************************************
     ASIDE 5   2 flas
     ***********************************************/
     .aside5 { 
        width: 94%;
    }
     /**********************************************
     ASIDE 6    2 flas
     ***********************************************/
    .aside6{

    }

      /**********************************************
     ASIDE 7    2 flas
     ***********************************************/
     .aside7 { 
        width: 94%;
        margin: auto;
    }

    

    /**********************************************
     ASIDE 8    2 flas
     ***********************************************/
    .aside8 {
        width: 94%;
        margin: auto;
    }

    /**********************************************
     ASIDE 9    2 flas
     ***********************************************/
    .aside9 {
        width: 94%;
        margin: auto;
    }


}

@media screen and (min-width:990px) {}

@media screen and (min-width:1100px) {

    /* *****************************************  ASIDE 5 */
    .aside5 {
        height: 100%;
        width: 94%;
        align-items: flex-start;
        padding-left: 2rem;

    }

    .parrafooem {
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        color: #fff;
    }
}

/* ************************************************************************************************************************************* 
   3 filas      3 filas        3 filas
   ********************************************************************************************************************/
@media screen and (min-width:1120px) {

    /* div solo en este media   RESPALDO */
    .respaldo {
        grid-area: respaldo;
    }

    /**********************************************
     ASIDE 0 
     *************************************************/
    .asideglobal {
        margin-top: 2px;
        height: 100%;
        width: 100%;
    }

    .aside0 {
        margin: 3px auto;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /********************************************************
    ASIDE 1       3 filas
    ***********************************************************/
    .aside1 {
        border-radius: 4px;

    }

    /*********************************************************
     ASIDE 2     3 filas
     *********************************************************/
    .aside2 {
        border-radius: 6px;
        height: 160px;
    }

    /*****************************************************
    ASIDE 3      3 filas
    ******************************************************/
    .aside3 {
        border-radius: 6px;

    }

    /*******************************************
     ASIDE 4      3 filas
     ********************************************/
    .aside4 {
        grid-area: aside4;
        background-color: rgb(58, 116, 116);
        height: auto;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        border-radius: 6px;
    }

    /* ***************************************** 
     ASIDE 5     3 filas
     ********************************************/
    .aside5 {
        height: 100%;
        width: 94%;
        align-items: center;
        padding-left: 0rem;
        width: 100%;

    }

    .parrafooem {
        text-align: left;
        font-family: Arial, Helvetica, sans-serif;
        color: #fff;
    }

    /* *****************************************
      ASIDE 6      3 filas
      ****************************************** */
    .aside6 {
        /* height: 100%; */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-image:url("../img/cilindro.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center´center;
        border-radius: 3px;
    
    }
    .aside6 a img{
        /* width: 30px; */

    }

    /* *****************************************
      ASIDE 7     3 filas
      *******************************************/
    .aside7 {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: start;
        text-align: center;
        padding-top: 2rem;
    }

    /* *****************************************
      ASIDE 8      3 filas
      ******************************************/
    .aside8 {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: start;
        text-align: center;
        padding-top: 2rem;
    }

    /* ***************************************** 
     ASIDE 9     3 filas
     *******************************************/
    .aside9 {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        padding-top: 5rem;
    }



    .input_buscar {
        width: 200px;
        padding: 1px 0px;
        outline: none;
    }

    .aside0 img {
        width: 100%;
    }

    .respaldo {
        display: block;
    }
}