@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);

/* COLORES UTILIZADOS:
   #d64746 ROJO
   #f7b23c AMARILLO
   #4faca7 VERDE
   #5f5354 MARRON
   #F3F0EC BLANCO */


/* GENERALES */

body {
    background-color: #F3F0EC;
    min-width: 20rem;
    height: 30rem;
    position: absolute;
    margin: 0rem;
    }

header {
    background-color: #d64746;
    min-width: 20rem;
    max-width: 30rem;
    }

nav {min-width: 20rem;
    max-width: 30rem;
    height: 2rem;
}

nav ul {
    list-style-type: none;
    font-family: "Arial";
    margin: 0rem;;
    }

nav ul li {
    float: left;
    font-family: sans-serif; 
    font-size: 1rem;
    margin-top: 0.35rem;
    margin-left: 3rem;
    display: block;
    background-color: #d64746;
    height: 1rem;
}

nav ul li a {
    text-decoration: none;
    font-family: "Arial";
    margin: 0rem;
    height: 2.5rem;
    }

.clear {
    clear:both;}

.lupa {
    position: absolute; left: 17.7rem; top: 0.8rem;
}

.hamburguesa {
    position: absolute; left: 1rem; top: 0.8rem;
}

.marginb1 {
    margin-left: 0.4rem;
}

.boton1 {
    padding: 0.5rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 0.5rem; left: 30%; right: 30%;
    }

.fin {
    background-color: #d64746;
    margin: 0rem;
    width: 100%;
    height: 0.7rem;
    position: absolute; bottom: 0;
}









/* TEXTO */

p {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 0.85rem;
}

.pregular {
    font-family: 'Roboto', sans-serif;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
}

.pregular2 {
    font-family: 'Roboto', sans-serif;
    margin-top: 0rem;
    margin-bottom: 0rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
}

.tbold {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.tboldred {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #d64746;
}

h2 {
    margin: 0rem;
    color: white;
    font-family: sans-serif;
}

h3 {
    font-family: sans-serif;
}


h4 {
    margin: 0rem;
    }










/* LOGIN */
.bodylogin {
    background-image: url('../img/trama.png');
    background-repeat: no-repeat;
    background-size: auto;
}


.pmorfadu {
    position: absolute; left: 4.3rem; top: 1.6rem;}


.bienvenido {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #d64746;
    position: absolute; top: 4rem; left: 2.4rem;
}

.nombre {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 7rem; left: 2.4rem;
}

.login01 {
    padding: 1.2rem;
    background-color: #F3F0EC;
    position: absolute; top: 9rem; right: 14%; left: 14%;
}

.icono01 {
    position: absolute; top: 0.4rem; left: 12.5rem;
}

.nombre2 {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 11.8rem; left: 2.4rem;
}

.login02 {
    padding: 1.2rem;
    background-color: #F3F0EC;
    position: absolute; top: 13.8rem; right: 14%; left: 14%;
}

.icono02 {
    position: absolute; top: 0.4rem; left: 12.5rem;
}

.entrar {
    padding: 0.5rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 9rem; left: 30%; right: 30%;
    }


.facebook {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #3b5a9a;
    color: #F3F0EC;
    position: absolute; bottom: 2.3rem; left: 30%; right: 30%;
    }

.registrarme {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 0.5rem; left: 30%; right: 30%;
    }










/* FACEBOOK */

.comienzo {
    background-color: #3b5a9a;
    margin: 0rem;
    width: 100%;
    height: 0.7rem;
    position: absolute; top: 0;
}

.boton1fb {
    padding: 0.5rem;
    font-family: 'Roboto', sans-serif;
    background-color: white;
    color: #3b5a9a;
    position: absolute; bottom: 0.5rem; left: 30%; right: 30%;
    }

.boton2fb {
    padding: 0.5rem;
    font-family: 'Roboto', sans-serif;
    background-color: #3b5a9a;
    color: #F3F0EC;
    position: absolute; bottom: 2.9rem; left: 30%; right: 30%;
    }

.perfil {
    position: absolute; top: 5rem; left: 5.65rem;
}

.morfadufb {
    position: absolute; top: 5rem; left: 10.23rem;
}

.infofb {
    position: absolute; top: 10rem; left: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
}

.infofbbold {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
}

.infofb2 {
    position: absolute; top: 11rem; left: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
}

.infofb3 {
    position: absolute; top: 14.5rem; left: 6rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #3b5a9a;
}

.lapizfb {
    position: absolute; top: 15rem; left: 5.25rem;
}

.infofb4 {
    position: absolute; top: 15.5rem; left: 4.75rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #3b5a9a;
}

.avisofb {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    position: absolute; top: 18.8rem; left: 3rem;
}





/* FORMULARIO */

.completa {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #d64746;
    position: absolute; top: 4rem; left: 4.2rem;
}


.n1 {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 6rem; left: 2.4rem;
}

.l1 {
    padding: 1rem;
    background-color: #F3F0EC;
    position: absolute; top: 8rem; right: 14%; left: 14%;
}

.i1 {
    position: absolute; top: 0.2rem; left: 12.5rem;
}






.n2 {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 10.8rem; left: 2.4rem;
}

.l2 {
    padding: 1rem;
    background-color: #F3F0EC;
    position: absolute; top: 12.8rem; right: 14%; left: 14%;
}

.i2 {
    position: absolute; top: 0.2rem; left: 12.5rem;
}






.n3 {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 15.6rem; left: 2.4rem;
}

.l3 {
    padding: 1rem;
    background-color: #F3F0EC;
    position: absolute; top: 17.6rem; right: 14%; left: 14%;
}

.i3 {
    position: absolute; top: 0.2rem; left: 12.5rem;
}





.n4 {
    font-family: 'Roboto', sans-serif;
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #F3F0EC;
    position: absolute; top: 20.4rem; left: 2.4rem;
}

.l4 {
    padding: 1rem;
    background-color: #F3F0EC;
    position: absolute; top: 22.2rem; right: 14%; left: 14%;
}

.i4 {
    position: absolute; top: 0.2rem; left: 12.5rem;
}












/* INDEX */
.titulomorfadu {
    background-color: #f7b23c;
    min-width: 20rem;
    max-width: 30rem;
    height: 2.5rem;
    }

.portadamorfadu {
    position: absolute; left: 6.7rem; top: 0.5rem;}

.disfruta {
    background-color: #F3F0EC;
    margin: 0rem;
    margin: 0.7rem; 0rem; 0.7rem; 0rem;
    height: 1rem;
    color: #d64746;
    }

a {
    text-decoration: none;
}

.imgcomida {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mila {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding: 0.5rem;
    font-family: sans-serif;
    background-color: #f7b23c;
    position: relative; top: -2.57rem;
    opacity: 0.6;
}

.milaprecio {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding: 0.5rem;
    font-family: sans-serif;
    background-color: #f7b23c;
    position: relative; top: -2.57rem;
    color: #F3F0EC;
}

.milacomprar {
    margin-left: 6rem;
    margin-right: 0.5rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding: 0.5rem;
    font-family: sans-serif;
    background-color: #d64746;
    position: relative; top: -4.6rem;
    color: #F3F0EC;
    display: block;
    list-style-type: none
    
    
}

.quemas {
    background-color: #F3F0EC;
    margin: 0rem;
    margin: 0.7rem; 0rem; 0.7rem; 0rem;
    height: 1rem;
    position: relative; top: -4.5rem;
    color: #d64746;
    }

.nav2 {
   min-width: 20rem;
    max-width: 30rem;
    height: 2rem;
    margin: 0rem;
    position: relative; top: -4.1rem;
}

.tcombos {
    margin-top: 0rem;
}










/* DESCIPCION - MENU */
.descripcion {
    background-color: #f7b23c;
    min-width: 20rem;
    max-width: 30rem;
    height: 2.5rem;
    }

.portadadesc {
    position: absolute; left: 5rem; top: 0.5rem;
}

.navmenu {
   min-width: 20rem;
    max-width: 30rem;
    height: 2rem;
    margin: 0rem;
}

.marginb2 {
    margin-left: -0.5rem;
}

div ul {
    list-style-type: none;
    font-family: "Arial";
    margin: 0rem;
    }

div ul li {
    float: left;
    font-family: sans-serif; 
    font-size: 1rem;
    display: block;
    height: 1rem;
}

div ul li a {
    text-decoration: none;
    font-family: "Arial";
    margin: 0.7rem;
    }

.estrellas {
    position: absolute; left: 12rem; top: 18.1rem;
}











/* BEBIDAS */

.portadabebidas {
    position: absolute; left: 6.7rem; top: 0.5rem;}

.elegi {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.marcas {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2.65rem;
}


.secprecios {
    position: absolute; left: 13rem; top: 7.45rem;
}

.precios {
    margin-top: 0.5rem;
    margin-bottom: 1.12rem;
}

.seccuadrados {
    position: absolute; top: 7.35rem; left: 16.2rem;
}

.cuadrados {
    margin-top: 0.5rem;
    margin-bottom: 0.78rem;
}

.encaja {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    margin-top: 0.6rem;
    margin-bottom: 1.2rem;
    margin-left: 2.65rem;
}











/* CONFIRMACIÓN */

.portadaconf {
    position: absolute; left: 4.5rem; top: 0.5rem;}

.resumen01 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2.65rem;
}

.resumen02 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2.65rem;
}

.sectotal01 {
    position: absolute; left: 49%; top: 4.55rem;
}

.total01 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 1.12rem;
}

.total02 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 1.12rem;
    margin-left: 2.65rem;
}

.nota01 {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-left: 2.65rem;
    color: #d64746;
}

.resumen03 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2.65rem;
    font-size: 0.8rem;
}

.resumen04 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2.65rem;
    font-size: 0.8rem;
}

.sectotal02 {
    position: absolute; left: 63%; top: 4.55rem;
}

.total03 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-top: 13.82rem;
}

.total04 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-top: 1.5rem;
    margin-left: 2.65rem;
}

.barra {
    position: absolute; left: 2.65rem;
}

.vaucher {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    margin-top: 1.5rem;
    margin-bottom: 1.2rem;
    margin-left: 2.65rem;
}









/* POP UP */

.bodypop {
    background-image: url('../img/imgconfirmacion.png');
    background-repeat: no-repeat;
    background-size: auto;
}

.popup {
    background-color: black;
    width: 20rem;
    height: 30rem;
    opacity: 0.9;
}

.ok {
    position: absolute; top: 5%; left: 37%;
}

.txt1 {
    position: absolute; top: 24%; left: 12%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.txt2 {
    position: absolute; top: 29%; left: 34%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.txt3 {
    position: absolute; top: 42%; left: 20%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
}

.txt4 {
    position: absolute; top: 47%; left: 17%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
}

.txt5 {
    position: absolute; top: 60%; left: 20%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
}

.txt6 {
    position: absolute; top: 84%; left: 20%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
}

.txt7 {
    position: absolute; top: 88%; left: 22.5%;
    color:#F3F0EC;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
}

.cerrar {
    position: absolute; top: 4%; left: 88%;
}








/* COMBOS */

.combos {
    background-color: #f7b23c;
    margin: 0rem;
    padding: 0.7rem; 0rem; 0.7rem; 0rem;
    height: 1.2rem;
    color: #d64746;
    }

.combos24 {
    position: relative; top: -20rem; left: 10rem;
}

.combo1 {
    margin-top: 0.2rem;
    margin-bottom: -0.18rem;
}

.combo2 {
    margin-top: 0.1rem;
}

.combo3 {
    margin-top: 0.18rem;
    margin-bottom: -0.18rem;
}

.combo4 {
    margin-top: 0.1rem;
}

.aclaracion {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 0.65rem;
    position:relative; bottom: 0.2rem;
}

.botonc1 {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 12rem; left: 4%; right: 55%;
    }

.botonc2 {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 12rem; left: 54%; right: 4%;
    }

.botonc3 {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 1.85rem; left: 4%; right: 55%;
    }

.botonc4 {
    padding: 0.2rem;
    font-family: 'Roboto', sans-serif;
    background-color: #d64746;
    color: #F3F0EC;
    position: absolute; bottom: 1.85rem; left: 54%; right: 4%;
    }