#ranita{
    width:200px;
}
body, html{
    margin:0px;
    padding:0px;
}

#d_pago{
    display:none;
}

#btPedido{
    padding:10px;
    margin:4px;
}

.paginadorPie{
    position:absolute;
    bottom:10px;
    right:5%
}

.hot{
    position:absolute;
}

.paginador{
    background-color:white;
    padding:4px;
    border:0px;
}

.paginador>img{
    width:15px;
}

.flotante{
    background-color:#08559d;
}

.franja{
    font:normal 400 14px 'Open Sans', sans-serif;
    font-weight:bold;
    padding:5px;
    padding-right:5%;
    padding-Left:5%;
}

.ficha {
    text-align:center;
    background-color: white;
    border:1px solid rgb(228, 225, 225);
    margin:20px;
    height:330px;
    position:relative;
}

/*imagen*/
.ficha>div:nth-child(1){
    height:190px;
    margin-bottom:10px;
    cursor: pointer;
}

.ficha>div:nth-child(1)>img{
    height:100%;
    max-width:100%;
}

/*texto*/
.ficha>div:nth-child(2){
    padding:10px;
    font-weight: normal;
    cursor: pointer;
}

/*vista previa imagen ficha*/
.ficha>div:nth-child(4){
    position:absolute;
    top: 290px;
    height:30px;
    background-color:#fafafa;
    width:100%;
    border:0px;
}

/*opciones de ficha*/
.fOp{
    border-top: 1px dotted gray;
}


/*agregar carretilla*/
.ficha>div:nth-child(5){
    position:absolute;
    top: 290px;
    height:32px;
    background-color:white;
    width:100%;
    border:1px solid rgb(228, 225, 225);
    padding-top:8px;
    -webkit-transition: all 0.2s; /* Safari */
    transition: all 0.2s;
    cursor: pointer;
}

.ficha>div:nth-child(5)>img{
    vertical-align: text-top;
}

.ficha:hover>div:nth-child(5){
    background-color:darkblue;
    color:white;
    top:320px;
}

.azul {
    color:rgb(39, 39, 243);
}

#perfil{
    background-color:#f5f5f5;
    color: gray;
    text-align:right;
}

#perfil > img{
    width:15px;
}


#carrito{
    border:1px solid #e0e0e0;
    overflow:hidden;    
    background-color:rgb(1,6,91);
}

#carrito > img{
    margin-top:10px;
    margin-left:5px;
}

#carStatus{
    display:inline-block;  
    vertical-align: top; 
    padding:10px;
    background-color: white;
    color:darkblue;
    width:calc(100% - 53px);
    -webkit-transition: all 0.4s; 
    transition: all 0.4s;
}

#carrito:hover>#carStatus{
    background-color:rgb(1,6,91);
    color:white;
}


.franjaAzul{
    background-color: rgb(1,6,91);
    color: white;
    padding:12px;
}

.carItem{
    padding:10px;
    position:relative;
    border-left:2px solid white;
}

.carItem:hover{
    background-color: #e7e7e7;
    border-left:2px solid darkblue;
}


.carItem>div{
    display:inline-block;
    vertical-align: top;
}

.carItem>span{
    position:absolute;
    top:10px;
    right:10px;
    color:gray;
    display:none;
    cursor: pointer;
}

.carItem:hover>span{
    display:inline-block;
}

/*imagen*/
.carItem>div:nth-child(2){
    width:80px;
}

.dprv{
    height:300px;
    transition: transform .2s; 
}

.dprv_g:hover{transform: scale(1.5)}
.dprv_p:hover{transform: scale(2.5);margin-top:-50px}

/*Nombre*/
.carItem>div:nth-child(3){
    width:calc(100% - 101px);
    padding:10px;
    display:inline-block;
    color:gray;
    font-weight:bold;
    font-size:16px;
}

.carItem>div:nth-child(4){
    float:right;
    color:rgb(39, 39, 243);
    font-weight:bold;
    font-size:14px;
    margin-top: -10px;
}

.carItem>div>img{
    width:100%;
}

#detalleCar{
    padding:15px;
    height:100%;
    text-align:center;
    overflow:auto;
    height:470px;
}

#menu{
    padding-top:15px;
    height:80px;
    overflow: hidden;
}

.mnItem{
    display:inline-block;
    position:relative;
    width:20%;
    border:0px;
    padding:0px;
    text-align:center;
    color:#333;
    cursor: pointer;
    /*border:1px solid silver;*/ 
}

.mnItem>label {
    font-size:12px;
}

/*
.mnItem:nth-child(5),
.mnItem:nth-child(6) {
    display:none;
}
*/

.mnItem>img{
    width:50px;
}

#busqueda, #pie{
    background-color:#08559d;
    height:50px;
    overflow: hidden;
}

#categorias{
    background-color:white;
    padding:15px;
    height:28px;
    margin-top:2px;
    border:1px solid silver;
    color:gray;
}

#inBusqueda{
    padding:14px;
    width: 100%;
    margin-top:2px;
    background-color:#004086;
    color:white;
    border:0px;
    width:calc(100% - 93px);
    margin-left:20px;
}

#inBusqueda::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(87, 202, 255);
    opacity: 1; /* Firefox */
}

#btBusqueda{
    height:43px;
    width:43px;
    background-color:white;
    border:0px;
    float:right;
}

#lstCategoria{
    display:inline-block;
    margin-top:-9px;
}

#lstCategoria>div{
    border:1px solid #e5e5e5;
    padding:10px;
    color:gray;
    font-weight: normal;
    border-top:0px;
    background-color:white;
}

#lstCategoria>div:hover{
    background:#fafafa;
    cursor:pointer;
    color:black;
}

#cuerpo{
    /*background-color:#f2f2f2;*/
    position:relative;
    color:#404040;
    padding-bottom:50px;
}

#portada{
    top:0px;
    padding-left:20px;
}

#modulos{
    padding:15px;
    color:#404040;
} 

.flotante{
    height:98vh;
}

/*Cel acostado*/
@media screen and (max-width: 880px) {
    .flotante > h4{
        display:none!important;
    }
    #d_pago{
        margin-bottom:100px;
    }
    #detalleCar{
        height: auto;
        margin-bottom:10px; 
        max-height:100%;
        min-height:50%;
    }
    #ranita{display:none;}
    #carrito {
        /*display:none;*/
        margin-top:25px;
    }
    #lstCategoria{
        display:none;
    }
    #categorias{
        display:none;
    }
    .mnItem>label {
        display:block;
    }
    .mnItem>img {
        display: none;
    }
    #menu{
        height:130px;
    }
}

/*cell de pie*/
@media screen and (max-width: 600px) {
    body{
        width:calc(100% - 20px);
    }
    .flotante > h4{
        display:none!important;
    }
    .mnItem>label {
        display:none;
    }
    .mnItem>img {
        display: block;
    }
    #perfil{
        display:none;
    }
    #mnItems{
        position:fixed;
        top:0px;
        width:100%;
        left:0px;
        padding:5px;
        background-color: #fafafa;
        border-bottom:1px solid silver;
        z-index: 50;
        height:40px;
    }
    .mnItem> img{
        width:35px;   
    }

    /*
    .mnItem:nth-child(3),
    .mnItem:nth-child(4) {
        display:inline-block;
    }
    */

    #menu{
        margin-top:75px;
    }
    #portada{
        width:100%;
    }

    #busqueda{
        position:absolute;
        top:-10px;
        left:0px;
        width:100%;
        padding:0px;
    }

    #inBusqueda{
        margin:0px;
        padding-right:15px;
    }

    .franja, 
    #portada
    {
        width:100vw;
    }

    #portada{
        margin-left:-25px;
    }
    .flotante{
        left:0px;
        width:calc(100% - 1px);
        margin-top:5px;
        height:calc(100% - 10px);
    }
    #alerta{
        margin-top:65px;
        width:calc(100% - 10px);
    }
}

/*Loader*/
@-webkit-keyframes square-spin {
    25% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
              transform: perspective(100px) rotateX(180deg) rotateY(0); }
    50% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
              transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
    75% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
              transform: perspective(100px) rotateX(0) rotateY(180deg); }
    100% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
              transform: perspective(100px) rotateX(0) rotateY(0); } 
}
  
@keyframes square-spin {
    25% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
              transform: perspective(100px) rotateX(180deg) rotateY(0); }
    50% {
      -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
              transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
    75% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
              transform: perspective(100px) rotateX(0) rotateY(180deg); }
    100% {
      -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
              transform: perspective(100px) rotateX(0) rotateY(0); } }
  
    .square-spin{
        text-align:center;
        width:100%;
        height:100%;
        background-color:rgba(100,100,100,.2);
        position:fixed;
        top:0px;
        left:0px;
    }
    .square-spin > div {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    width: 50px;
    height: 50px;
    margin-left:calc(50% - 25px);
    margin-top:calc(50vh - 25px);
    background: #fff;
    -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
            animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; 
}