@media screen and ( max-width : 1170px ) {
    .procesoCompra .pasos .paso { width: 190px; }
    .procesoCompra .pasos .paso .icono { width: 140px; height: 140px; }
    .procesoCompra .pasos .paso h3 { font-size: 20px; }
    .procesoCompra .pasos .paso .icono img { height: 75px; }
    .pedidoPaquete .container .detalle h1 { font-size: 40px; }
    .pedidoPaquete .container .detalle ul li h2 { font-size: 25px; }
    .carrito .container .detalle h2, .carrito .container .resumen .info h3, .carrito .container .resumen .info .totales { font-size: 25px; }
    .inputDiv label { font-size: 20px; }
    .inputDiv input[type="text"], .inputDiv select, .inputDiv textarea, #payment-form { font-size: 18px; }
    .inputDiv .option label img { height: 65px; }
}
@media screen and ( max-width : 1100px ) {
    header h1 { font-size: 50px; line-height: 50px; margin-top: -20px; }
}
@media screen and ( max-width : 1070px ) {
    .banner .container .contentHtml { font-size: 70px; line-height: 100px; }
    .procesoCompra h2, .promociones h2 { font-size: 40px; }
    .pedidoPizza .container .detalle h1 { font-size: 40px; }
    .pedidoPizza .container .detalle ul li h2, .boton { font-size: 25px; }
    .pedidoPaquete .container .detalle h1 { font-size: 30px; }
    .pedidoPaquete .container .detalle ul li h2 { font-size: 20px; }
    .carrito .container .detalle h2, .carrito .container .resumen .info h3, .carrito .container .resumen .info .totales { font-size: 20px; }
    .inputDiv label { font-size: 18px; }
    .inputDiv .option label img { height: 60px; }
}
@media screen and ( max-width : 991px ) {
    .sucursales .mapas .lista { width: 300px; }
    .sucursales .mapas .mapContainer { width: calc(100% - 300px); }
    dl dt button { height: 50px; font-size: 20px; }
    dl dd { font-size: 16px; }
    .pizza { width: 31%; }
    .pedidoPizza .container .pizzaImg { width: 40%; }
    .pedidoPizza .container .detalle { width: 60%; }
    .relacionados .productos .producto h3 { font-size: 25px; }
    .pedidoPaquete .container .pizzaImg, .pedidoPaquete .container .detalle { width: 100%; }
    .pedidoPaquete .container .detalle { max-width: 470px; padding: 10px; border: none; margin: 20px auto; }
    .carrito .container .detalle, .carrito .container .resumen { padding: 20px; }
}
@media screen and ( max-width : 920px ) {
    .procesoCompra .pasos .paso { width: 150px; }
    .procesoCompra .pasos .paso .icono { width: 120px; height: 120px; }
    .procesoCompra .pasos .paso h3 { font-size: 18px; }
    .procesoCompra .pasos .paso .icono img { height: 60px; }
}
@media screen and ( max-width : 850px ) {
    .pedidoPizza .container .detalle { padding: 30px; }
    .relacionados .productos .producto { width: 48%; }
    .carrito .container .detalle, .carrito .container .resumen { width: 100%; }
}
@media screen and ( max-width : 798px ) {
    header .sociales { display: none; }
    header .container { align-items: center; flex-direction: row-reverse; }
    .carroMobile { display: block; }
    header h1 { font-size: 40px; line-height: 40px; margin-top: -45px; }
}
@media screen and ( max-width : 767px ) {
    .container { padding: 0 15px; box-sizing: border-box; }
    .banner .container .contentHtml { font-size: 50px; line-height: 60px; }
    .sucursales .mapas .lista, .sucursales .mapas .mapContainer { width: 100%; padding: 0; }
    .sucursales h1 { font-size: 40px; }
    .pizza { width: 48%; }
    .pizza b, .pizza h3 { font-size: 25px; }
    .especialList a { width: 98%; }
    .especiales h2 { font-size: 40px; }
    .procesoCompra .pasos { justify-content: center; }
    .triangulo { display: none; }
    .pedidoPizza .container .pizzaImg, .pedidoPizza .container .detalle { width: 100%; }
    .pedidoPizza .container .detalle { max-width: 470px; padding: 10px; border: none; margin: 20px auto; }
}
@media screen and ( max-width : 670px ) {
    .menu .tabs li a { font-size: 35px; min-width: 150px; }
}
@media screen and ( max-width : 618px ) {
    header .container { justify-content: center; flex-direction: column-reverse; }
    header .container nav { width: 100%; margin-top: 20px; }
    header .container nav ul { width: 100%; justify-content: center; text-align: center; }
    header h1 { font-size: 30px; line-height: 30px; margin-top: 25px; }
}
@media screen and ( max-width : 550px ) {
    .banner .container { width: 100%; padding: 0; max-width: initial; }
    .banner .container .contentHtml {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: rgba( 0, 0, 0, 0.4 );
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .especiales h2 { font-size: 30px; height: 50px; width: 210px; }
    .promociones h2 { font-size: 30px; }
}
@media screen and ( max-width : 500px ) {
    .pizza { width: 98%; }
    .pizza b { margin-bottom: 115px; }
    .menu .tabs li a { font-size: 25px; min-width: 100px; height: 50px; }
}
@media screen and ( max-width : 460px ) {
    footer nav ul li a { font-size: 16px; }
    .relacionados h2 { font-size: 25px; }
    .relacionados .productos .producto h3, .pedidoPizza .container .detalle ul li h2, .boton { font-size: 20px; }
}