@charset "utf-8";
/* CSS Document */
.noborder{
    width:50px;
    text-align:right;

}
.scroller{
    padding-bottom:160px;
}

.desno{
    display:none;
}
.around{
    margin:0 20px;
}

html,body{
    margin:0;
    padding:0;
    overflow:hidden;
    font-size:0.95em;
}
#riga_0 td
{
    animation:mymove 3s ;
    -webkit-animation:mymove 3s ; /*Safari and Chrome*/
}

tr th.number,
tr td.number{
    text-align: right;
}

.neworder th,
.neworder td {
    padding-right: 20px;
}



@keyframes mymove
{
    from {background:#ffffff;}
    to {background:none;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {background:#ffffff;}
    to {background:none;}
}
.sotto{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#CCC;
}
.frizza{width:1px;}
tr.alta td{
    height:50px;
    line-height:50px;
}
td.loprez, th.loprez{
    text-align:right;
}
.sotto ul{
    margin:0;
    padding:0;
    border-bottom:1px solid #eee;
}
.sotto ul li{
    list-style-type:none;

    border-bottom:1px solid #888;
    border-top:1px solid #eee;
}
.sotto ul li a{
    display:block;
    width:100%;
    height:100%;
    padding:0.8em;
}
.swap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#f7f5e3 url(../img/body-bg.png);
    -webkit-box-shadow: -5px 0 6px 1px rgba(0,0,0,0.3);
    box-shadow: -5px 0 6px 1px rgba(0,0,0,0.3);
}

.ordinedaprototipo .menubar{
    position: fixed;
    width: 100%;
    z-index: 1;
}

.ordinedaprototipo .box-wrap{
    position:fixed;
}


.box-wrap{
    bottom:0;
    width:100%;
    position:absolute;
    left:0;
    overflow-x:hidden;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    padding:0;
    margin:0;
    height: -moz-calc(100% - 50px); /* Firefox */
    height: -webkit-calc(100% - 50px); /* Chrome, Safari */
    height: calc(100% - 50px); /* IE9+ and future browsers */
}	
.stagatent{
    background:#FFFF95 url(../img/warning.png) left center no-repeat;
    color:#8F7432;
    border:#F8DC6D 1px solid;
    box-sizing:border-box;
    padding:10px 10px 10px 60px;

}

.popupp{
    background:#ffffff;
    color:#8F7432;
    border:#999 1px solid;
    box-sizing:border-box;
    padding:10px;

}

.stagatent a{
    background:#FDFFE1;
    color:#999;
    padding:4px 10px;
    text-decoration:none;
    margin:8px 8px 0 0;
    border:1px solid #ccc;
    display:inline-block;
}

a.btavanti{

    height: 24px;
    line-height: 24px;
    position: relative;
    margin: 0 40px 0 0 ;
    padding: 0 20px 0 14px;
    background: #A39A81;
    color: #fff;
    font-size: 20px;
    text-decoration: none; 
}
a.btavanti:after{
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #A39A81;
    border-style: solid;
    border-width: 12px 0 12px 12px;  
}
a.btindietro{

    height: 24px;
    line-height: 24px;
    position: relative;
    margin: 0;
    padding: 0 10px 0 14px;
    background: #A39A81;
    color: #fff;
    font-size: 20px;
    text-decoration: none; 
}
a.btindietro:before{
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #A39A81 transparent transparent ;
    border-style: solid;
    border-width: 12px 12px 12px  0 ;  
}
/*
table.neworder tbody td{
        position:relative;
        height:52px;
        line-height:52px;
        text-align:left;
        font-size:17px;
}
table.neworder select{
        padding:5px;
}
table.neworder thead th{
        text-align:left;
}
table.neworder thead{
        margin-bottom:4px;
}*/
.box-title{
    margin-bottom:20px;
}

a.add-new{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
a.removeme{
    width:40px;
    height:40px;
    background-size:cover;
    display:block;
    margin:5px 0;
}
a.increaseme{
    width:40px;
    height:40px;
    background-size:cover;
    display:block;
    margin:5px 0;
}

a.increasemefull{
    width:auto;
    height:40px;
    background-size:contain;
    display:block;
    margin:5px 0;
    padding-left:48px;
    text-decoration:none;
    line-height:40px;
}

.noborder{
    border:none;
    width:40px;
    margin-right:5px;
    font-size:17px;
}
input.total{
    font-size:16px;
    width:50px;
    text-align:right;
    border:none;
}
.totale{
    text-align:right;
    margin-top:5px;
    font-size:16px;

}
.fav, .nofav{
    width:40px;
    height:40px;
    background-size:cover;
    display:block;
    margin:5px 0;
}
/*per tutti*/
tr.removing td{
    position:relative;
}
tr.removing > td > a{
    opacity:0.1;
}
tr.removing > td > input{
    opacity:0.1;
}
tr.removing > td > select{
    opacity:0.1;
}
.deletethis{
    width:2000%;
    /*height:100%;*/
    background:rgba(255,255,255,0.6);
    z-index:10000000000;
}
.confirmdelete{
    position:absolute;
    left:42px;
    top:0;
    width:42px;
    height:100%;
    z-index:999999999999999;
}
.canceldelete{
    position:absolute;
    left:0px;
    top:0;
    width:42px;
    height:100%;
    z-index:999999999999999;
}
.invialo{
    margin:20px auto;
    text-align:center;
    position:relative;
    height:47px;
    width:122px;
}
.antepra{
    margin:20px auto;
    text-align:center;
    position:relative;
    height:47px;
    text-align:center;
}
.anteprima{
    line-height:30px;
    display:inline-block;
    padding:10px;
    border-radius:8px;
    text-decoration:none;
    font-size:17px;
    background:#fff;
    color:#888;
    border:1px solid #ccc;
    width:100px;

}
.inviaordine{
    line-height:47px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:8px;
    text-decoration:none;
    font-size:17px;

}
.verifica{
    position:absolute;
    top:0;
    left:-48px;
    right:-48px;
    bottom:0;

    background:rgba(255,255,255,0.7);
}
.nascosto{
    visibility:hidden;
}
.confermaordine, .annullaordine {
    width:45px;
    height:45px;
    position:absolute;
    cursor: pointer;
    border:0;

}
.confermaordine{
    top:3px;
    right:0;
    position:absolute;
}
.annullaordine{
    top:3px;
    left:0;
    position:absolute;
}
.fullimg{
    width:100%;
}
.neworder th{
    text-align:left;
}
a.croce{
    float:right;
    background-size:cover;
    box-sizing: border-box;
    position: relative;
    display:block;
    content:x;
    color:#fff;
    font-size:80px;
    padding-top:5px;
}
.croce:before {
    content: "×";
}
a.aggiungi {
    display:inline-block;
    border-radius:5px;
    -moz-border-radius:5px;
    height:30px;
    line-height:30px;
    margin:2px;
    color:#fff;
    text-decoration:none;
    font-size:40px;
    padding:0 5px
}

a.aggiungi:before{
    content:"+";
}	
@media screen and (max-width: 320px) {
    textarea{
        width:100%;
    }

    .stagatent, popupp{
        width:100%;
        margin:20px auto;
    }
    .totale{
        display:none;

    }
    .scundes{
        display:none;
    }
    .menubar{
        height:60px;
        margin:0;
        padding:0;
    }
    .hidemetoo{
        display:none;
    }

    a.croce{	
        width:50px;
        height:50px;
        line-height:50px;
    }
    .box-wrap{top:60px;}
    a.trerighe{
        float:left;
        border-bottom: 13px double #fff; 
        border-top: 4px solid #fff; 
        content:"";
        height: 5px; 
        width:30px;
        margin:13px 0 0 10px;
    }
    .menubar h3{
        margin:0 auto;
        padding:0 0 0 60px;
        text-align:left;
        line-height:50px;
        font-size:18px;

    }
    #prezzo, #importo, #prefer, .hideme{ display:none; }
    #forbut{width:40px;}
    table.neworder{width:95%; margin:20px 0 0 2.5%;}
    #quant{width:50px; text-align:left;}

    #art{text-align:left}
    .neworder td{height:50px; /*padding-left:6px;*/
    }
    #importo{
        text-align:right;
    }
    #tendazza{display:none;}

}
@media screen and (min-width: 321px) and (max-width: 640px) {
    textarea{
        width:100%;
    }

    .stagatent, popupp{
        width:100%;
        margin:20px auto;
    }
    .scundes{
        display:none;
    }
    .totale{
        display:none;
    }

    .spunta{
        display:none;
    }
    #prezzo, #importo, #prefer, .hideme{ display:none; }
    .menubar{
        height:60px;
        margin:0;
        padding:0;
    }
    a.croce{	
        width:60px;
        height:60px;
        line-height:50px;
    }
    .box-wrap{top:60px;}
    /*    a.trerighe{
            float:left;
            border-bottom: 23px double #fff; 
            border-top: 8px solid #fff; 
            content:"";
            height: 8px; 
            width:42px;
            margin:10px 0 0 15px;
        }*/

    a.trerighe {
        float: left;
        height: auto;
        width: auto;
        margin: 10px 0 0 15px;
        color: #FFF;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .menubar h3{
        margin:0 auto;
        padding:0 0 10% 0;
        text-align:center;
        line-height:60px;
        font-size:20px;
    }
    /*#forbut{width:80px;}*/
    #quant{/*width:100px;*/ text-align:center}
    #art{width:200px; text-align:left}
    table.neworder{width:92%; margin:30px 4%;}
    table.neworder tr td{
        height:60px; text-align:left;
    }
    #tendazza{display:none;}

}


@media screen and (min-width: 640px) and (max-width: 1000px)  {
    textarea{
        width:100%;
    }

    .stagatent, popupp{
        width:100%;
        margin:20px auto;
    }

    .mobonly{display:none;}
    .totale{
        width:100%;
        padding-right:5px;
    }
    .spunta{
        display:none;
    }
    .menubar h3{
        margin:0 auto;
        padding:0;
        text-align:center;
        line-height:60px;
        font-size:18px;
    }
    table.neworder{width:95%; margin:2.5% auto;}
    #forbut{width:60px;}
    #quant{width:50px;}

    .menubar{
        height:60px;
        margin:0;
        padding:0;
    }
    .box-wrap{top:60px;}
    a.croce{	
        width:60px;
        height:60px;
        line-height:50px;
    }
    /*    a.trerighe{
            float:left;
            border-bottom: 23px double #fff; 
            border-top: 8px solid #fff; 
            content:"";
            height: 8px; 
            width:42px;
            margin:10px 0 0 15px;
        }*/
    a.trerighe {
        float: left;
        height: auto;
        width: auto;
        margin: 10px 0 0 15px;
        color: #FFF;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
    }
    #tendazza{display:none;}

}
@media screen and (min-width: 1000px) {
    textarea{
        width:980px;
        margin:0 auto;
    }

    .wover {
        position:relative;
    }
    sup{
        background:#A8956C;
        padding:0 2px;

    }
    .tooltip {
        top:-30px;
        background-color:black;
        color:white;
        border-radius:2px;
        opacity:0;
        position:absolute;
        width:300px;
        -webkit-transition: opacity 0.5s;
        -moz-transition:  opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition:  opacity 0.5s;
        transition:  opacity 0.5s;
        font-family:Verdana, Geneva, sans-serif;
        font-size:11px;
    }

    .wover:hover .tooltip {
        opacity:1;
    }

    .stagatent, .popupp{
        width:980px;
        margin:20px auto;
    }
    .mobonly{display:none;}
    #menu-btn{display:none;
    }
    #tendazza{
        float:left;
        width:30px;
        height:50px;
    }
    .spunta{
        display:none;
    }
    .box-wrap{top:60px;}
    .totale{
        width:980px;
        margin:0 auto;
        /*        margin:5px auto;*/
    }

    .menubar{
        height:60px;
        margin:0;
        padding:0;
    }
    a.croce{	
        width:50px;
        height:50px;
        line-height:50px;
    }
    /*    a.trerighe{
            float:left;
            border-bottom: 13px double #fff; 
            border-top: 4px solid #fff; 
            content:"";
            height: 5px; 
            width:30px;
            margin:15px 0 0 10px;
        }*/
    a.trerighe{
        float: left;
        height: auto;
        width: auto;
        margin: 15px 0 0 10px;
        color: #FFF;
        font-weight: bold;
        font-size: 20px;
        text-transform: uppercase;
        text-decoration: none;
    }

    .menubar h3{
        margin:0 auto;
        padding:0;
        text-align:center;
        line-height:50px;
        font-size:18px;
    }
    table.neworder{width:980px; margin:20px auto;}
    .elcarel{width:980px; margin:20px auto; padding: 10px;}
    .salvami{float:right;}
    #forbut{width:60px;}
    #quant{width:50px;}

    .extract{
        width:980px;
        margin:30px auto;
    }
    #tendazza{
        margin:0;
        padding:0;}
    #tendazza > li{list-style-type:none; margin:0; padding:0}
    #tendazza li ul { display: none }

    #tendazza li:hover ul
    {
        position: absolute;
        display: block;
        z-index:1;
        width:220px;
        padding: 0;
        margin: 10px 0 0 10px;
        border:1px solid black;
        background: white;
    }

    #tendazza li li   { border-bottom:1px solid #eee; width: 200px; }	
    #tendazza li li a { padding:5px 10px 5px 10px; font-size:18px; line-height:25px; text-decoration:none;
                        color:#999 }

}


.switch-order{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 200px;
    right: 100px;
    cursor: pointer;
    background-image: url("../img/switch.png");
    background-size: 100% 100%;
}

.switch-order a{
    width: 100%;
    height: 100%;
    float:left;
}


.save-cart{
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 300px;
    right: 100px;
    cursor: pointer;
    background-image: url("../img/save.png");
    background-size: 100% 100%;
}

.save-cart a{
    width: 100%;
    height: 100%;
    float:left;
}