@font-face {
    font-family: redonda;
    src: url("/static/css/fonts/cantarell.ttf");
}
@font-face {
    font-family: redonda-fina;
    src: url('/static/css/fonts/cantarell.ttf');
    font-weight: 400;
}
@font-face {
    font-family: mispace;
    src: url('/static/css/fonts/space_me.ttf');
}


body,html{
    /*margin: 0;
    height: 100%;*/
}
/*-----sticky footer----------------
#page-content {
    flex: 1 0 auto;
}

#sticky-footer {
    flex-shrink: none;
}
/*----------------------------------*/
hr {
    margin: -0.9em 0 0.3em 0;
    border-top:1px solid #a3a3a3;
}
a:link{
    text-decoration: none;
    color: #000;
}
a:visited{
    text-decoration: none;
    color: #000;
}
a:hover{
    text-decoration: underline;
    color: #000;
}
a:active{
    text-decoration: none;
    color: #000;
}

.negrita{
    font-weight: bold;
}
.fontawa{
    font-family: redonda-fina;
}
.fontredonda{
    font-family: redonda;
}
.fontredonda-f{
    font-family: redonda-fina, serif;
}
.fontnumeros{
    font-family: numeros;
}
.fontmispace{
    font-family: mispace;
}
.mouseover{
    cursor: pointer;
}
.font-10{
    font-size: 10px;
}
.font-12{
    font-size: 12px;
}
.font-14{
    font-size: 14px;
}
.font-16{
    font-size: 16px;
}
.font-18{
    font-size: 18px;
}
.font-20{
    font-size: 20px;
}
.font-26{
    font-size: 26px;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}
.capital{
    text-transform: capitalize;
}
.mayusculas{
    text-transform: uppercase;
}


.display-no{
    display: none !important;
}
.display-si{
    display: block !important;
}


input,textarea,select{
    font-size: 14px;
    background-color: #E8F0FE;border: 1px solid #ccc !important;
}
input:focus{
    /*background-color: rgba(229, 229, 229, 0.89);*/
    outline: none !important;
    border: #009 1px solid !important;
    background-color: #E8F0FE;
}
select:focus, textarea:focus{
    outline: 0 none !important;
    box-shadow: none !important;
    border: #009 1px solid !important;
}
.input-global{
    padding: 3px 7px;width: 100%;font: normal 14px mispace !important;
}
.input-global2, .input-global3 {
    padding: 5px 7px;width: 100%;
}
.select-global{
    padding: 3px 7px;width: 100%;font: normal 14px mispace !important;
}
.inputerror{
    border: 3px solid red;
}
button:focus{
    outline: 0 none !important;
    box-shadow: none !important;
}

.btn-orden{
    background-color: #25b725;height: 30px;color: #fff;text-align: center;width: 100%;border: none;
}
.btn-orden:hover{
    color: #000;
}
.btn-mascarrito{
    background-color: #fc0;height: 35px;color: #000;text-align: center;margin-top: 30px;width: 100%;border: none;
}
.btn-mascarrito:hover{
    cursor: pointer;border: 1px solid #000;
}
.btn-cupon{
    border: 1px solid #cccccc;background-color: #cccccc;
}
/*---------Tachado diagonal-------------*/
.tachadiag {
    position: relative;
}
.tachadiag:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: black;

    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-10deg);
}
/*----------------Botones carro----------*/
#btnvolver{
    background-color: rgba(13,202,240,0.3);padding: 5px 0;cursor: pointer;text-align: center;height: 30px;
}
#btnvolver:hover{
    background-color: rgba(13,202,240,1)
}
#btvaciarcarro{
    border: 1px solid #090;padding: 5px 0;cursor: pointer;text-align: center;height: 30px;
}
#btvaciarcarro:hover{
    background-color: #090;color: #fff
}
#bthacercompra{
    background-color: rgba(208, 167, 14, 0.4);padding: 5px 0;cursor: pointer;text-align: center;height: 30px;border: 1px solid #D0A70EFF;
}
#bthacercompra:hover{
    background-color: rgba(208, 167, 14, 1)
}

/*----------------cantidad producto------*/
.mas-cantidad{
    padding: 3px;width: auto;font: normal 18px numeros;text-align: left;float: left;
}
.menos-cantidad{
    padding: 3px;width: auto;font: normal 18px numeros;text-align: right;float: right;
}
.space-cantidad{
    width: 100%;font: normal 18px numeros;float: left;
}
.cantidad-items{
    padding: 5px 0;width: 100%;border: none;
}
#div-rangecant, #plazo{
    float: left;width: 100%
}
.otrascant{
    clear:both;padding: 3px;font: normal 18px numeros;height: auto; text-align: left;float: left;margin-right: 10px;
}
/*-----------comprar cesta----------------*/
#btn-comprarcesta, #btn-sesion, #btn-hacerpago, #btn-nuevo-usuario{
    width: 100%;border: none;color: #000;background-color: #cccccc;height: 38px;font: bold 20px redonda;
}
.btn-accept{
    width: 100%;border: none;color: #000;background-color: #cccccc;height: 38px;font: bold 20px redonda;
}
#btn-comprarcesta:hover, #btn-sesion:hover, #btn-hacerpago:hover, #btn-nuevo-usuario:hover, #btn-pagarya:hover{
    background-color: rgba(204, 204, 204, 0.73);
}
#btn-pagarya{
    width: 100%;border: none;color: #000;background-color: #FFCC00;height: 38px;font: bold 20px redonda;
}
#btn-vaciarcesta{
    width: 100%;border: 1px solid #900;color: #900;height: 38px;font: bold 20px redonda;background-color: transparent;
}
#btn-vaciarcesta:hover{
    border: 1px solid rgba(153, 0, 0, 0.61);color: rgba(153, 0, 0, 0.61);
}
#btn-seguircomprando{
    width: 100%;border: none;color: #fff;height: 38px;font: bold 20px redonda;background-color: #ccc;
}
#btn-seguircomprando:hover{
    background-color: #555;
}
#btn-vercesta{
    width: 100%;border: 1px solid #ccc;color: #000;height: 38px;font: bold 20px redonda;background-color: #ccc;
}
#btn-vercesta:hover{
    border: 1px solid #ccc;background-color: #555;color: #fff
}
/*---------------------*/
.subrayado {
    text-decoration: underline !important;
}
.sombra-flecha{
    text-shadow: 4px 0 #FFF;
}
.sombra-blanca{
    text-shadow: 2px 2px 5px #FFF;
}
.sombra{
    text-shadow: 2px 2px 5px #000;
}
.sombra-solida{
    text-shadow: 1px 0 #000;
}
.sombra-blancasolida{
    text-shadow: 1px 0 #FFF;
}
.sombra-azul{
    text-shadow: 1px 0 #00F;
}
.sombra-img{
    box-shadow: #000 5px 2px 3px;
}
.texto-blanco{
    color: #fff;
    font-weight: bolder;
}
.bgcolor-gris{
    background-color: rgb(240,240,240);
}
.titulos{
    font:bold 22px as-normal_ttf ;
    color: rgb(0, 48, 157);
    margin-top: 10px;
    text-decoration: underline;
}
.titulos-tienda{
    font-size: 20px;text-decoration: underline;
}
.color-verde{
    color: #008000 !important;
}
.color-azul{
    color: #0000FF !important;
}
.color-rojo{
    color: #FF0000 !important;
}
.color-amarillo{
    color: #FFCC00;
}
.color-negro{
    color: #000;
}
.color-naranja{
    color: #ffa00c;
}
.color-azulabba{
    color: #195DFF;
}
.bakgr-col-abba{
    background-color: #195DFF;
}
.vert-alig-medio{
    vertical-align: middle;
}
#sel-categorias{
    font: normal 14px Arial;
    width: 100%;
    border: none;
    padding: 2px 2px 4px 2px;
}
#sel-datos{
    font: normal 14px Arial;
    width: 100%;
    border: none;
    padding: 4px 2px 4px 8px;
    box-sizing: border-box;
}
#btn-buscardatos{
    padding-top: 2px;
    border: none;
}
#menu-registrarse{
    font: normal 16px redonda-fina;
    color: #fff;
}
#a-tucesta{
    color: #fff;
    font: normal 16px redonda-fina;
}

.esegirada{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg) ;
    -ms-transform: rotate(-45deg) ;
    -o-transform: rotate(-45deg) ;
    transform: rotate(-45deg);
    margin-top: -5px;
    margin-left: -5px;
    margin-right: 10px;

}
#div-ver-pedido:hover{
    cursor: pointer;
}

input[type="checkbox"]{
    height: 22px !important;
    width: 22px !important;
    background-color:#fc0;
    cursor: pointer;display: block;
    /*-webkit-appearance: none;
    -moz-appearance: none;*/
}

.foto-lateral{
    margin-top: 50px;max-width: 190px; border-radius: 5px; box-shadow: #333 4px 4px 3px;
}


#micarro{
    color: #009;font-size: 14px;border: 1px solid #ccc;border-radius: 5px;height: 250px;padding: 10px 8px;
}

#div-trans{
    border: 1px solid #009;padding: 10px;border-radius: 4px;background-color: #009;color: #FFF;text-align: center;width: 100px;font-size: 12px;
}
#div-trans:hover, .pagotarjeta:hover{
    background-color: #FFF; color: #009; cursor: pointer;
}

.lineas-dash-verdes{
    border-top: 1px dashed #439A00;border-bottom: 1px dashed #439A00;color: #439A00; margin-top: 20px;padding: 10px 0;margin-bottom: 20px;
}
.lineas-dash-rojas{
    border-top: 1px dashed #900;border-bottom: 1px dashed #900;color: #900; margin-top: 20px;padding: 10px 0;margin-bottom: 20px;
}

#beneficiosas{
    padding-left: 10px;
    margin-left: 10px;
    list-style-type: none;
}

#form-cliente input, #form-conec input{
    font-size: 14px;
}

#div-imprime{
    border: 1px dashed #439A00; border-radius: 5px; padding-top: 10px;
}

.padd-0{
    padding:0;
}
.paddleft-0{
    padding-left:0;
}
.paddright-0{
    padding-right:0;
}
.padd-lr-0{
    padding-left:0;
    padding-right:0;
}
.margin-top-bot{
    margin-bottom: 10px;
    margin-top: 10px;
}
.margin-top50{
    margin-top: 50px;
}
.margin-top30{
    margin-top: 30px;
}
.margin-top20{
    margin-top: 20px;
}
.margin-top10{
    margin-top: 10px;
}
.margin-top5{
    margin-top: 5px;
}
.margin-bot0{
    margin-bottom: 0;
}
.margin-lr0{
    margin-left: 0 !important;margin-right: 0 !important;
}
.negrita{
    font-weight: bold;
}


.decimales{
    font-size: 18px;
}
.enteros{
    font-size: 22px;
}
.imgs{
    float:left;
    margin:0 10px 10px 0;
}
.info-familia{
    position:fixed;border-bottom: 2px double #FC0;margin-bottom: 20px;padding: 7px 15px;top: 50px;left: 0;width: 100%;z-index: 100;background-color: white;font: bold 18px fontawaras;
}
.anadircesta{
    background: #fc0;height: 35px;padding-top: 7px;font-weight: bold;margin: 15px 15px;text-align: center;
    float: left;width: 40%;
}
.anadircesta:hover{
    cursor: pointer;background-color: rgba(255,205,0,0.5);
    color: #009;
}
.comprar{
    background: #080;height: 35px;padding-top: 7px;font-weight: bold;margin: 15px 5px;text-align: center;
    color: #fff;float: left;width: 40%;
}
.comprar:hover{
    cursor: pointer;background-color: rgba(0,125,0,0.5);
    color: #009;
}
#vergastos:hover{
    cursor: pointer;
    color: #000;
}
.mascarro-comidas{
    float: left;width: 100%; background-color: #fc0;font: 900 14px redonda;color: #000 !important;height: 20px;cursor: pointer;
}
.span-carrito{
    background-color: #d0a70e;padding: 5px 10px;color: #000;cursor: pointer;
}
/*--------------Nuevo carro-------------------------*/
.carreta{
    position: absolute;right: 15px;top: 30px;width: 25%;height: 1px;z-index: 40000;border-top: 2px solid #d0a70e;background-color: #fff;
    border-left: 1px solid #d4d2d2;border-right: none;display: none;opacity: 0;outline: none !important;
}
.carreta .misitems{
    min-height: 95px;float: left;width: 100%
}
.carreta .itemscarro{
    float:left;width: 100%;clear: both; border-bottom: 1px solid #ddd;background-color: #fff;box-shadow: #666 4px 0 4px;
}
.carreta .foto{
    float: left;width: 80px;height: 80px;padding-top: 10px;
}
.carreta .borraritem{
    float:right;height: 22px;width: 32px;border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;cursor: pointer;text-align: center;
}
.carreta .borraritem:hover{
    background-color: #900;color: #fff
}
.carreta .nombreitem{
    float: left;clear:both;font: bold 10px redonda;overflow: hidden;height: 30px; margin-top: 10px;
}
.carreta .cantidaditem{
    float:left;clear:both;font-size: 16px;left:110px;font-weight: bold;overflow: hidden;height: 30px;color: #009;
}
.carreta .monedacarro{
    float:right;padding-right:10px;font-size: 12px;font-weight: bold;height: 30px;color: #009;
}
.carreta .totales{
    float: left;width: 100%;background-color: #dddddd;box-shadow: #666 4px 4px 4px;
}
.carreta .tot{
    float: left;margin-left:10px;padding-top: 5px;font: bold 14px redonda;
}
.carreta .totalcarro{
    float: right;margin-right:10px;text-align: right;padding-top: 5px;font: bold 14px redonda;
}
.carreta .hazcompra{
    float: left;width: 100%;background-color: #0dcaf0;box-shadow: #666 4px 4px 4px;font-size: 14px;text-align: center;
    font-family: mispace;cursor: pointer;
}
.carreta .hazcompra:hover{
    background-color: #090;color: #fff;
}
/*--------Div productos-----------*/
#productos{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    width: 100%;

}
/*--------Div de articulos--------*/
.divarticulo{
    margin: 30px 12px;text-align: center;padding: 0;background-color: #eee; width: 300px;height: 480px;
    z-index: 33;
}
.divarticulo:hover{
    box-shadow: #666 4px 4px 4px;border-left: 1px solid #d4d2d2;border-top: 1px solid #d4d2d2;border-right: none;
}
.divarticulo .foto{
    border-bottom:1px solid black;cursor: pointer;width: 100%;height: 77%;background-repeat: no-repeat;background-position: center;background-size: cover
}
.divarticulo .descorta{
    padding-left: 10px;height: 40px;font-family: redonda-fina;text-align: left;font-size: 14px;
}
.divarticulo .marca{
    text-align: left;font-size: 14px;font-weight: bold;padding-left: 10px;font-family: redonda;
}
.divarticulo .precios{
    text-align: left;font-size: 14px;width: 100%;padding-left: 10px;float: left
}
.divarticulo .precios .descuento{
    text-align: left;font-size: 14px;float: left;width: 40%;color: #F00;font-weight: normal
}
.divarticulo .precios .preciofinal{
    float: left;width: 60%;text-align: right;padding-right: 10px;font-weight: bold;
}
.divarticulo .alcarrito{
    text-align: center;font-size: 14px;font-weight: bold;float: left;height: 22px;width: 100.1%;padding:2px 0 0 10px;cursor: pointer;background-color: #0dcaf0;font-family: mispace;
}
.divarticulo .alcarrito:hover{
    background-color: #090;color: #fff;
}
/*---------------Ver articulos-------------------*/
.va-producto{
    padding-left:10px;background-color: #D0A70E;margin-bottom: 20px;font-family: mispace; text-transform: capitalize;text-align: left;
}
.veritem{
    background-color: #0dcaf0;margin-top: 30px
}
.veritem:hover{
    background-color: #090;color: #fff;cursor: pointer;
}
/*---------------Old carrito---------------------*/
.divarticulo .stock{
    float: left;width: 40%; font: normal 14px redonda;text-align: right;
    color: #008000;
}
.divarticulo .imagen{
    float: left;width: 100%;height: 275px;margin: 10px 0;text-align: center;background-size: cover !important;background-color: white !important;
}
.divarticulo .tipo{
    position: relative;top: 255px;left: 144px;background-color: rgba(0, 0, 255,0.6);width: 50%;font-size: 12px;height: 20px;padding: 2px 3px 0 0;
    color: #fff;text-align: right;
}
.divarticulo .texto{
    float: left;width: 100%;background-color: #e4b9b9;font: normal 12px redonda-fina;text-align: left;height: 35px;padding: 3px 5px;
}
.divarticulo .marca{
    float: left;width: 100%;font: bold 10px redonda;text-align: left;margin-top: 10px;text-transform: uppercase;margin-bottom: 5px;
}
.divarticulo .precio{
    float: right;width: 100%;font: bold 16px helvetica;text-align: center;margin-top: 10px;color: #00f;margin-bottom: 3px;
}
.divarticulo .verpro{
    float: left;width: 100%; background-color: #fc0;font: 900 14px redonda;height: 35px;color: #080 !important;
}

.p-text-menus{
    font: normal 12px redonda;line-height: 1.3;
}
.p-text-menus-titulo{
    font: normal 14px redonda;text-decoration: underline;
    color: #080;
}
.show-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    align-content: stretch;
    width: 100%;
}

#visor{
    height: 60vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80% auto;
}

/*-----------Ventana Modal--------*/
.mimodal{
    padding: 0;background-color: rgba(163, 161, 161, 0.68);position: fixed;width: 100%;min-height: 100%;z-index: 35353535;left:0;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    scroll-behavior: unset;
}

.mimodal .ventana{
    position: absolute;top: 0;left: 0;margin: 20% 30% 33% 30%;width: 40%;height: auto;background-color: white; border-radius: 7px;padding: 10px 20px;
}
.mimodal .ventana .titulo{
    position: relative;text-decoration: underline;color: #aa8800;font-weight: bold;width: 100%;height: 30px;
}
.mimodal .ventana .titulo .img-titulo{
    position:absolute;left:5px;width:40%;
}
.mimodal .ventana .titulo .texto-titulo{
    position:absolute;right:5px;width:40%;text-align: right;font-weight: bold;text-decoration: underline #000099;
}
.mimodal .ventana .texto{
    position: relative;width:100%;height: auto;border-bottom:1px dashed #a80;text-align: center;margin-top: 10px;
}
.mimodal .ventana .cerrar{
    float: right;text-align: right; margin-top: 10px;margin-left: 10px;
}
.mimodal .ventana .aceptar{
    float: right;text-align: right; margin-top: 10px;margin-left: 10px;
    color: #a80;
}
.mimodal .ventana .aceptar #bt-aceptar-modal{
    display: none;
    color: #000;
}
/*--------------Ventana Messenger------------------*/
.msng{
    padding: 0;background-color: rgb(255, 255, 255);
    position: fixed;width: 350px;min-height: 250px;z-index: 4000;top:80px;right:5px;border: 1px #000 solid;
    display: none;border-radius: 5px;/*box-shadow: #95999c -4px 6px;*/
}
.msng .titulo{
    float: left;width: 100%;background-color: rgba(217,217,217,0.75);border-bottom: 1px #000 solid;height: 25px;
}
.msng .titulo .nombre{
    float: left;width: auto;padding: 2px 5px;text-transform: capitalize;
}
.msng .titulo .logolg{
    float: left;width: auto;padding-left: 5px;
}
.msng .titulo .close{
    float: right;padding: 0 2px 5px 5px;border-radius: 3px;
}
.msng .titulo .closeMSN{
    font-size: 20px;cursor: pointer;font-weight: bold !important;
}
.msng .titulo .closeMSN:hover{
    background-color: #005cbf !important;color: #fff !important;border-radius: 50%;font-size: 20px !important;
}
.msng .mensajes{
    float:left;width: 100%;height: 180px;background-color: #fff;font-family: monospace;overflow-y: scroll;
}
.msng .mensajes .enviados{
    float: right;width: 100%;text-align: right;font-size: 12px;padding: 3px 5px;margin-bottom: 1px;
}
.msng .mensajes .recibidos{
    float: left;width: 100%;text-align: left;font-size: 12px;padding: 3px 5px;font-style: italic;
}
#textomsj:focus{
    outline: none !important;
    border: none !important;
    border-top: 1px solid #000 !important;
}
/*--------------------------------*/
.imgs-prod{
    max-width: 100px;max-height: 80px;margin: 5px 5px 5px 0;border: 1px solid #ccc;
}
.imgs-prod:hover{
    cursor: pointer;
}
#cantidad-mas, #cantidad-menos{
    float: left;width: 35px;border: 1px solid grey;height: 22px;
}
#cantidad{
    float: left;width: 25px;border: 1px solid grey;height: 22px;font-size:14px
}

#cantidad-menos:hover, #cantidad-mas:hover{
    cursor: pointer;
    background-color: #bababa;
}
.titulos-webs{
    border-bottom: 2px solid #00f;margin: 15px 0;text-align: center;
}
.titulos-info{
    border-bottom: 2px solid #008000;margin: 11px 0;text-align: left;
    font:normal 20px redonda;
    color: #fc0;
}
.inpt-modal{
    border:1px solid grey;
    padding: 2px;
    float: left;
    width: 150px;
    font-size: 12px;
    border-radius: 4px;
    margin:10px 0 0 5px;
}
.fldset-compra{
    border:1px solid #009;
    margin: 0;
    padding: 10px 5px 5px 5px;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
}
.fldset-compra legend{
    width:auto;
    padding: 0 10px;
    border: none;
    font-size: 12px;
    margin: 0;
    color: #009;
}
.inpt-file{
    font: 12px redonda;
    width: 150px;
    height: 40px;
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
}
.inpt-file:hover, .lanzaver:hover, .fa-times:hover{
    cursor: pointer;
}

#btnimg{
    background-color: white;border: 1px solid #bababa;border-radius: 3px;padding: 10px 50px;
}
#comprar-trans{
    float: left; /*height: 36px;text-align: center;border: 1px solid #009;margin: 15px 0;font-size: 11px;line-height: 1; border-radius: 4px;padding: 6px 4px 4px 4px;background-color: #bdfff3;color:#000;font-weight: bold;*/
}
#comprar-trans:hover{
    opacity: 0.8;
    cursor: pointer;
}
#comprar-tarjeta{
    float: left;width:50%;margin-left: 10px;
}
.fa-cc-visa, .fa-cc-mastercard{
    font-size: 3em;margin-top:13px;
}
.fa-cc-visa:hover, .fa-cc-mastercard:hover, .visamaster:hover, .fa-window-close-o:hover, .fa-window-maximize:hover, .fa-window-minimize:hover{
    cursor: pointer;
    color: #777;
}
.visamaster:hover{
    cursor: pointer;
    opacity: 0.5;
}


.borde-texto-blk{
    text-shadow:
            -1px -1px 0 #ddd,
            1px -1px 0 #ddd,
            -1px 1px 0 #ddd,
            1px 1px 0 #ddd;
}
.borde-texto-negro{
    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
}

.camiseta-back{
    float: left;padding: 3px;width: 25px;margin-right: 5px;height: 25px;border-radius: 50%;
    border: 2px solid #080; margin-top: 5px;text-align: center;
}

.diseno-back-txt{
    float: left;padding: 3px;width: 50px;margin-right: 5px;
}
.diseno-back{
    /*float: left;padding: 3px;width: 50px;margin-right: 5px;border-radius: 50%;*/
    float: left;padding: 3px;width: auto;margin-right: 5px;font-size: 14px;
}
.diseno-back:hover{
    cursor: pointer;
}
.diseno-back-file{
    float: left;padding: 3px;width: 50px;margin-right: 5px;border-radius: 50%;
}
.diseno-flechas{
    float: left;padding: 2px;width: 40px;margin-right: 10px;border-radius: 50%;background-color: #fc0;
    border: 2px solid #900; font-size: 22px;text-align: center;
}
.diseno-flechas:hover{
    cursor: pointer;
}
.border-pie-active{
    border-bottom: 8px solid #fc0;
}
.border-pie{
    border-bottom: 8px solid #ccc;
}
.border-pie-fino{
    border-bottom: 1px solid #ccc;
}
.border-pie-fino-amarillo{
    border-bottom: 1px solid #fc0;
}
.alinea-iconos{
    vertical-align: middle !important;
}
.borde-div1px{
    border: 1px solid #aa8800;
}
.borde-div1px-radius{
    border: 1px solid #aa8800; border-radius: 5px;
}
.circulo-amarillo{
    border: 1px solid #fc0;border-radius: 50%;font-size: 12px;padding: 5px;background-color: #fc0;
}
/*--------Medias querys------------*/
@media (min-width: 360px) and (max-width: 575px) {
    .mimodal .ventana .titulo{
        font-size: 10px;padding-right: 0;
    }
    .mimodal .ventana {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .inpt-modal{
        width: 100px;
    }
    /*.navbar-brand{
        width: 70%;
    }*/
    #verproentrega{
        text-align: center;
    }
    #titulo-email{
        text-align: center;;
        font-size: 14px;
    }
    .email .ventana{
        margin-left:15% ; margin-right: 15%;width: 70%;
        top:60px;
    }
    #iniciosesion{
        margin-top: 3px !important;
    }
    #paquete,#privado{
        display: none;
    }
    .container{
        max-width: 100%;
    }
    .carousel{
        max-height: 150px;
    }
    #cesta-top, #cesta-logo {
        text-align: center !important;
    }
    .border-pie, #cesta-cabeceras{
        display: none;
    }
    .ajuste-btn{
        font-size: 12px !important;font-weight: normal;line-height: 1;
    }
    #d-direcenvio{
        padding-left: 0;
    }
    #sep-comp{
        display: block !important;
    }
    .carreta{
        width: 90%;
    }
    #av-desclarga, #av-coldatos{
        font-size: 10px !important;
    }
    #av-marca, #av-produc{
        font-size: 14px !important;
    }
    #av-produc, #av-descuento, #av-btnvolver{
        font-size: 10px !important;
    }
}

/* Larger than mobile */
@media (min-width: 576px) and (max-width: 767px) {
    .mimodal .ventana .titulo{
        font-size: 10px;padding-right: 0;
    }
    .mimodal .ventana {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .inpt-modal{
        width: 100px;
    }
    /*.navbar-brand{
        width: 70%;
    }*/
    #verproentrega{
        text-align: center;
    }
    #titulo-email{
        text-align: center;;
        font-size: 14px;
    }
    .email .ventana{
        margin-left:15% ; margin-right: 15%;width: 70%;
        top:60px;
    }
    #iniciosesion{
        margin-top: 3px !important;
    }
    #paquete,#privado{
        display: none;
    }
    .container{
        max-width: 100%;
    }
    .carousel{
        max-height: 150px;
    }
    .carreta{
        width: 40%;
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 768px) and (max-width: 991px){
    .mimodal .ventana .titulo{
        font-size: 14px;
    }
    /*.navbar-brand{
        width: 70%;
    }*/
    #iniciosesion{
        margin-top: 3px;
    }
    .mimodal .ventana {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #paquete{
        display: none;
    }
    .container{
        max-width: 90%;
    }
    .carreta{
        width: 40%;
    }

}

/* Larger than tablet */
@media (min-width: 992px) and (max-width: 1199px){
    .mimodal .ventana .titulo{
        font-size: 19px;
    }
    .container{
        max-width: 85%;
    }

}

/* Larger than desktop */
@media (min-width: 1200px) and (max-width: 1569px){
    .container{
        max-width: 85%;
    }
    #div-rangecant{
        clear: both;
    }
    #div-cantit{
        clear: both;
    }
    .carreta{
        width: 25%;
    }
}

@media (min-width: 1570px) {
    .container{
        max-width: 74%;
    }
    .carreta{
        width: 17%;
    }
}