/* A Q U I  C O M I E N Z A N  L A S  C S S  D E  L A  P A G I N A*/

*{
    box-sizing: border-box;
}

/* font-family: 'Montserrat', sans-serif;
font-family: 'Oswald', sans-serif;*/

.pachuca{
    display: none;
}

body{
    position: relative;
    font-family: 'Quicksand', sans-serif;   
    font-size: 18px;
    min-width: 320px;
    margin: 0px auto;
    text-align: center;
}

h1{
    font-family: 'Clicker Script', cursive;
    text-align: center;
    font-size: 40px;
    font-weight: normal;
}

h2{
    font-family: 'Open Sans';
    font-size: 24px;
}


/*          Aquí comienzan los estilos de los DIV           */


div{
    display: block;
    overflow: visible;
}

/*       INICIO     HEADER          */ 

.menu_list{
    display: inline-flex;
    position: relative;
    width: 100%;
    flex-flow: row;
    height: 53px;
    font-weight: bold;
    padding: 0px;
    background-color: white;
}

.logo_list{
    display:none;
}

.list{
    background-color: black;
    display: flex;
    flex-grow: 1;
    padding-top: 13px;
    padding-bottom: 10px;
    font-size: 20px;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.list:hover{
    background-color: red;
    opacity: 1;
    transition-duration: 1s;
    font-weight: 700;
}

.logo_list_s{
    background-image: url(../imagenes/logo_header_chico.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1px;
    width: 50px;
}


/*      FIN         HEADER      */

.principal{
    height: 700px;
    margin-top: -6px;
    display: block;
    background-image: url(../imagenes/Fondo1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    color: whitesmoke;
    align-content: center;
    justify-content: center;
    padding: 0px;
}

.logo{
    width: 300px;
    height: 300px;
    border: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
}

.historia{
    text-align: center;
    padding: 0 5px 0 5px;
    background-color: black;
    padding-top: 10px;
    padding-bottom: 40px;
    color: whitesmoke;   
}

.menu{
    background-position: center;
    background-size: auto 100%;
    color: black;
    text-align: center;
    height: auto;
    align-content: center;
}

.titulo_menu{
    background-color: white;
    display: inline-block;
    width: 100%;
    color: black;
}

.fondo_menu_s{
    width: 100%;
    display: flex;
}

.fondo_menu_b{
    display: none;
}

.txt_menu{
    background-color: black;
    color: whitesmoke;
    display: inline-block;
    width: 100%;
    height:auto;
    padding-bottom: 30px;
}

.spc1{
    display: none;
}

.menu h2{
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
}

.boton{
    background: none;
    width: 200px;
    height: 50px;
    color: whitesmoke;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;    
    border-style: solid;
    border-color: whitesmoke;
    cursor: pointer;
}

.textodiv{
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.extras strong{
    text-decoration: underline;
}

.extras h1{
    display: inline;
}

.extras h2{
    display: inline;
}

.salsa_img, .cebolla_img{
    width: 100%;
}

.lealtad{
    background: black;
    color: whitesmoke;
    padding: 10px 5px 30px 5px;
}

.lealtad h1{
    display: inline;
}

.txtandimg{
    padding-top: 10px;
    display: inline-block;
    width: 100%;
    align-content: center;
    height: 260px;
}

.cochirewards{
    margin: 10px auto 10px auto;
    display: block;
    width: 100%;
    max-width: 350px;
    align-content: center;

}

aside{
    display: inline;
    width: 45%;
}

.ubicacion_{
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
}

.ciudades{
    padding-left: 0;
    padding-right: 0;
    font-family: 'Quicksand', sans-serif;
    margin-right: auto;
    margin-left: auto;
}

.ciudades h2{
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-style: normal;
}

.ciudades h2{
    display: inline;
}

.cdmx, .pachuca, .apizaco{
    padding-top: 0px;
    padding-bottom: 20px;
    border-radius: 30px;
}

.cdmx {
    background-color: #cccccc;
}

.apizaco{
    background-color: aliceblue;
}

.telefonos{
    color: black;
}

.logos_contacto{
    display: inline-flex;
    flex-direction: row;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.whatsapp, .llamar, .fb{
    display: inline-flex;
    justify-content: center;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 25px;
    margin-left: 5px;
    margin-right: 5px;
} 

.whatsapp:hover, .llamar:hover, .fb:hover{
    background-color: black;
    transition-duration: 1s;
}
.whatsapp{
    background-color: #30bf39;
    background-image: url(../imagenes/wapp.png);
    background-size:30px;
}

.llamar{
    background-color: cadetblue;
    background-image: url(../imagenes/call.png);
    background-size:30px;
}

.fb{
    background-color: #0066ff;
    background-image: url(../imagenes/face.png);
    background-size: 20px;
}

a,
a:visited{
    text-decoration:none;
    color: whitesmoke;
}

.derechos{
    background-color: black;
    padding-top: 10px;
    padding-bottom: 10px;
    color: whitesmoke;
    text-align: center;
}


    /* Aqui va la configuracion para pantalla grande */


@media screen and (min-width: 805px) and (max-width: 1000px){

   
    h1{
        font-size: 60px;
    }
    
   .logo_list_s{
    display: none;
    }
    
    h2{
        font-size: 28px;
    }
      
    .principal{
        display: flex;
        height: 825px;
    }
 
    .logo_list{
        background-color: white;
        background-image: url(../imagenes/logo_header.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 272px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        margin-top: 8px;
        margin-left: 3px;
        margin-right: 3px;
    }
    
    .logo{
        height: 300px;
        width: 300px;
        margin-top: 100px;
    }

    .menu{
    background-image: url(../imagenes/Fondo2.jpg);
    background-position: center;
    color: whitesmoke;
    text-align: center;
    height: 825px;
    padding-top: 90px;
    align-content: center;
    font-weight: 600;
    padding-top: 50px;
    }
    
    .titulo_menu{
        background: none;
        color: whitesmoke;
    }
    
    .txt_menu{
        background: none;
    }
    
    .spc1{
        display: block;
    }
    
    .img_menu{
        display: none;
    }
    
    .boton:hover{
    background-color: white;
    color: black;
    font-weight: bold;
    transition-duration: .6s;
    }
  
    .extras_img{
        display: flex;
    }
    
    .salsa, .cebolla{
        flex-grow: 1;
        width: 50%;
    }
    
    .salsa, .cebolla, p{
        padding: 5px;
    }
    .salsa_img, .cebolla_img{
        width: 100%;    
    }
    
    .txtandimg{
    padding-top: 10px;
    display: flex;
    width: 100%;
    align-content: center;
    height: 260px;
    }

    .cochirewards{
        margin: 0px auto 0px auto;
        display: block;
        width: 100%;
        height:auto;
        max-width: 400px;
        align-content: center;

    }

    aside{
        display: inline;
        width: 45%;
        padding-top: 80px;
    }


    .ciudades{
        display: flex;
    }
    
    .cdmx, .pachuca, .apizaco{
        flex-grow: 1;
    }
    

    .principal, .derechos{
        width: 100%;
        display: inline-block;
    }

}

                            /* PANTALLA COMPUTADORA */

@media screen and (min-width: 1001px) and (max-width: 2400px){

   .cdmx:hover {
    background-color: ghostwhite;
    transition-duration: 2s;
    border: 1px solid black;
    } 
    
   .apizaco:hover {
    background-color: ghostwhite;
    transition-duration: 2s;
    border: 1px solid black;
    } 
    
    body{
        max-width: 1366px;
    }
    
    h1{
        font-size: 60px;
    }
    
    h2{
        font-size: 28px;
    }
      
    .principal{
        display: flex;
        background-size: cover;
        float: left;
        height: 720px;
    }
    
    .contenido_principal, .textodiv_p{
        display: inline-block;
        height: 400px;
        height: auto;
    }

    .principal_cont{
        max-height: 300px;
        width: 1000px;
        display: flex;
        margin-top: 170px;
        margin-right: auto;
        margin-left: auto;
    }
    
    .contenido_principal{
        width: 40%;
    }
    
    .textodiv_p{
        width: 60%;
    }
    
    .logo{
        margin-top: auto;
    }
    
    .historia{
        display: flex;
    }
    
    .boton:hover{
    background-color: white;
    color: black;
    font-weight: bold;
    transition-duration: .6s;
    }
    
    .logo_list{
        background-color: white;
        background-image: url(../imagenes/logo_header.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 272px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        margin-top: 8px;
        margin-left: 3px;
        margin-right: 3px;
    }
    
    .logo_list_s{
        display: none;
    }
    

     .menu{
    background-image: url(../imagenes/Fondo2.jpg);
    background-position: center;
    background-size: cover;
    color: whitesmoke;
    text-align: center;
    height: 825px;
    padding-top: 90px;
    align-content: center;
    font-weight: 600;
    padding-top: 50px;
    }
    
    .titulo_menu{
        background: none;
        color: whitesmoke;
    }
    
    .txt_menu{
        background: none;
    }
    
    .extras_img{
        display: flex;
    }
    
    .salsa, .cebolla{
        flex-grow: 1;
        width: 50%;
    }
    
    .salsa, .cebolla, p{
        padding: 5px;
    }
    .salsa_img, .cebolla_img{
        width: 100%;    
    }
    
    .spc1{
        display: block;
    }
    
    .img_menu{
        display: none;
    }
    
   .txtandimg{
    padding-top: 10px;
    display: flex;
    width: 100%;
    align-content: center;
    height: 260px;
    }

    .cochirewards{
        margin: 0px auto 0px auto;
        display: block;
        width: 100%;
        height:auto;
        max-width: 400px;
        align-content: center;

    }

    aside{
        display: inline;
        width: 45%;
        padding-top: 80px;
    }

    .ciudades{
        display: flex;
    }
    
    .cdmx, .pachuca, .apizaco{
        flex-grow: 1;
    }
    
    .principal, .derechos{
        width: 100%;
        display: inline-block;
    }

}