/* =========================================================
   YOST | DEVICE / RESPONSIVE
   Breakpoint e comportamento responsive comune
   ========================================================= */


/* --- general --- */

@media screen and (max-width: 960px) {

.contact-info {
        font-size: 16px;
    }

.contact-info span {
        font-size: 16px;
    }

#formContatti legend span,
    .aside:before,
    h2 {
        font-size: 30px;
    }

.titleev {
        font-size: 18px;
    }

}

@media screen and (max-width: 768px) {

.bx-wrapper img {
        width: 100%;
        height: 50vh;
    }

.imagecomment {
        font-size: 1.7em;
    }

.maintext {
        padding: 15px;
    }

.menu2 li {
        width: 100%;
        text-align: center;
    }

.menu2 li img {
        display: inline-block;
        vertical-align: middle;
    }

.menu2 li span {
        display: inline-block;
        vertical-align: middle;
    }

.menu3 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

.contact-info #contact,
    #menu-slide {
        display: inline;
        visibility: hidden;
    }

#top-nav {
        position: relative;
    }

#logo {
        margin: auto;
        padding: 10px 30px;
    }

nav {
        position: absolute;

        bottom: 0;
        left: 0;

        padding: 0;
    }

nav input[type=checkbox] + label:before {
        content: "☰";

        position: absolute;

        top: -14px;
        left: 0;

        visibility: visible;

        color: #181717;
        font-size: 30px;

        opacity: 1;

        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);

        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

nav input[type=checkbox]:checked + label:before {
        content: "☰";

        position: absolute;

        top: -14px;
        left: 0;

        visibility: visible;

        color: #181717;
        font-size: 30px;

        opacity: 0;

        -ms-transform: rotate(120deg);
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);

        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

nav input[type=checkbox] + label:after {
        content: "×";

        position: absolute;

        top: -14px;
        left: 0;

        visibility: visible;

        color: #181717;
        font-size: 30px;

        opacity: 0;

        -ms-transform: rotate(-120deg);
        -webkit-transform: rotate(-120deg);
        transform: rotate(-120deg);

        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

nav input[type=checkbox]:checked + label:after {
        content: "×";

        position: absolute;

        top: -14px;
        left: 0;

        visibility: visible;

        color: #181717;
        font-size: 30px;

        opacity: 1;

        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);

        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

.contact-info {
        position: absolute;

        top: 6px;
        right: 0;

        max-width: none;

        font-size: 14px;
    }

.contact-info label:after {
        content: "☎";
        font-size: 30px;
    }

.assistenza {
        position: absolute;

        top: 34px;
        right: -10px;

        width: 120px;
        padding: 5px;

        background: rgba(218, 60, 24, 0.8);
        color: #ffffff;

        opacity: 0;

        -webkit-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
    }

#contact:checked ~ .assistenza {
        opacity: 1;
    }

.contact-info span {
        color: #ffffff;
        font-size: 14px;
    }

.col-sm-top img {
        width: auto;
        max-width: 100%;
    }

#form-sidetext + #aspnetForm,
    .usercontrols {
        width: 100%;
    }

.top_nav_class {
        font-size: 12px;
    }

.menu1 {
        position: absolute;

        top: 42px;
        left: -500px;

        min-width: 200px;
        min-height: 1000px;

        padding: 5px 10px;

        background: #ffffff;

        box-shadow: -1px 1px 2px rgba(51, 51, 51, 0.54);

        text-align: left;

        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

#menu-slide:checked ~ #MENUC12 .menu1 {
        left: -15px;
    }

.menu1 li {
        display: block;
        margin: 15px 0 15px 5px;
    }

article,
    aside + article {
        float: none;

        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

#slide,
    #slide2 {
        position: relative;

        display: block;

        width: 34px;
        height: 34px;

        cursor: pointer;
    }

#slide:before {
        content: "☰";

        position: absolute;

        color: #000000;
        font-size: 30px;
    }

.sottocat {
        margin-bottom: 40px;
    }

.menu-show {
        display: block !important;
    }

aside + article {
        margin-top: 20px;
    }

.menu1:after,
    .menu1:before {
        display: none;
    }

.grid_3 {
        width: 45%;
    }

.list2,
    address {
        margin-top: 10px;
    }

#catemenu > div {
        width: 100%;
    }

.evide {
        margin: 15px 0;
        font-size: 20px;
    }

.titolo,
    input[type=text],
    textarea {
        font-size: 14px;
    }

input[type=checkbox] {
        width: 14px;
        height: 14px;
        margin-left: 10px;
    }

input[type=radio] {
        width: 14px;
        height: 14px;
        margin-right: 10px;
    }

#formAMDWEB li {
        width: 100%;
    }

.titolo {
        margin-top: 10px;
        margin-bottom: 5px;
    }

.total {
        margin-top: 15px;
    }

#comment-section {
        max-width: 96%;
        padding: 20px 20px 0;
    }

.comment {
        padding: 16px;
    }

.inevidenza li {
        width: 47.5%;
        margin-bottom: 3%;
    }

#formAMDWEB ol {
        padding-left: 15px;
    }

#titolo-pagina {
        font-size: 18px;
    }

.thiswhereis {
        font-size: 14px;
    }

#formContatti {
        margin: 30px auto;
        padding: 0 15px;
    }

#formContatti ol,
    .formContatti {
        display: block;
    }

#formContatti ol li,
    .formContatti .form-group,
    #formContatti ol li:last-child,
    .formContatti > .form-group:nth-child(5) {
        width: 100%;
        margin-bottom: 18px;
    }

#formContatti legend span {
        font-size: 26px;
    }

#formContatti #send_message,
    #formContatti #btnSubmit input[type="submit"],
    #formContatti input[type="submit"] {
        width: 100%;
    }

}

@media screen and (max-width: 600px) {

.imagecomment {
        font-size: 1.2em;
    }

.contatti-home {
        font-size: 32px !important;
    }

#infox {
        float: left;
        font-size: 22px;
    }

#privacy-transizione {
        width: 96%;
        height: 300px;
        margin: 0 auto;
        padding-top: 10px;

        -webkit-overflow-scrolling: touch !important;
        overflow: scroll !important;
    }

iframe {
        width: 100% !important;

        border: 1px solid #cdcdcd;
    }

.img-centre,
    .img-dx,
    .img-sx {
        float: none;
        margin: 10px auto;
    }

.right {
        font-size: 14px;
    }

#hr:after,
    #hr:before {
        width: 45%;
    }

.col2 {
        width: 100%;
    }

.grid_3 {
        width: 100%;
    }

#lanewsletter {
        padding: 35px 15px;
    }

#lnlForm {
        max-width: none;
    }

#lanewsletter .txtnre {
        max-width: none;
    }

#lnlSubmit {
        width: 100%;
    }

}

@media screen and (max-width: 440px) {

.contatti-home {
        font-size: 24px !important;
    }

.menu2 li img {
        display: block;
        margin: 10px auto;
    }

.menu3 {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

}


/* --- styleYost --- */

@media screen and (max-width: 960px) {

.quattrocol .ycol1,
    .trecol .ycol1 {
        width: 50%;
    }

}

@media screen and (max-width: 768px) {

.duecol,
    .trecol,
    .quattrocol {
        display: block;
        margin: 0;
    }

.duecol .ycol1,
    .trecol .ycol1,
    .quattrocol .ycol1 {
        width: 100%;
        max-width: initial;
        margin: auto;
    }

.ycol1 .col {
        margin: 0 0 30px !important;
    }

.duecol.grid-right .ycol1,
    .duecol.grid-left .ycol1,
    .duecol.grid-left .ycol1:nth-child(3) {
        float: none;
    }

}

@media screen and (max-width: 600px) {

.trecol .ycol1 {
        width: 50%;
    }

}

@media screen and (max-width: 440px) {

.duecol .ycol1,
    .trecol .ycol1,
    .quattrocol .ycol1 {
        width: 100%;
    }

}


/* --- StylePost --- */

@media screen and (max-width: 960px) {

.fourcol .thisothernews,
    .col-sm-4 {
        width: 50%;
    }

}

@media screen and (max-width: 768px) {

.threecol .thisothernews {
        width: 100%;
    }

}

@media screen and (max-width: 600px) {

.twocol .thisothernews,
    .fourcol .thisothernews,
    .col-sm-4 {
        width: 100%;
    }

}


/* --- styleEc --- */

@media screen and (max-width:768px){
#PanelReg{	
width:100%}
#cart-total{	
font-size:12px}
.cart-info .image,.cart-info .images{	
display:none}
.cart-info .cart-info table tr td{	
border:1px solid #F5F5F5}
.cart-info .price{	
margin-bottom:0;
font-size:12px}}

@media screen and (max-width:600px){
#ctl00_CP1_UpdatePanel1>.form-group:last-child{	
width:100%;
max-width: 300px;
}}

@media screen and (max-width:440px){
.cproductlist1 li{
    display: block;
}}

@media screen and (max-width:768px) {
    #listcart .cart-info table {
        width: 100%;
    }

    #listcart {
        margin: 20px 0;
    }

    #listcart .cart-info table tr td {
        padding: 10px 1%;
    }

    #listcart table tbody,#listcart table thead {
        font-size: 12px;
    }

}

@media screen and (max-width:600px) {
    .formcol-dato .form-group,.formcol-indirizzo .form-group,.formcoliva .form-group,.formcol-mail .form-group {
        width: 100%;
        max-width: 300px;
        float: none;
    }

    #tabella .riga .col2,#tabella .riga .col2x table {
        font-size: 12px;
    }

    #ctl00_CP1_UpdatePanel2 {
        border: none;
        padding: 0;
    }

    #metodo_pagamento table,#metodo_spedizione table {
        width: 98%;
    }

    #listcart .buttons {
        width: auto;
    }

}

@media screen and (max-width:440px) {
    #tabella .riga .col2x {
        margin-bottom: 10px;
    }

}

@media screen and (max-width:960px) {
    .list-productmini-one-categoria .productmini-one {
        width: 32%;
    }

}

@media screen and (max-width:768px) {
    .product-one {
        width: 50%;
    }

    .list-productmini-one-categoria .productmini-one {
        width: 49%;
    }

    .panel-col {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .YostProduct,#PanelPrice,.list-productmini-one {
        width: 100%;
        float: none;
    }

}

@media screen and (max-width:600px) {
    .product-one {
        width: 100%;
    }

    .list-productmini-one-categoria .productmini-one {
        width: 100%;
    }

}

@media screen and (max-width: 700px) {

    .yost-reso {
        width: 100%;
        max-width: none;
        margin: 10px auto 20px auto;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .yost-reso-intesta {
        width: 100%;
        margin: 0 0 12px 0;
        padding: 16px;
        background-color: #f3f3f3;
        border: 1px solid #dddddd;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.6;
    }

    .yost-reso-intesta-riga {
        display: block;
        width: 100%;
        margin: 0 0 6px 0;
    }

    .yost-reso-intesta-riga:last-child {
        margin-bottom: 0;
    }

    .yost-reso-cliente {
        width: 100%;
        margin: 0 0 12px 0;
        padding: 14px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        font-size: 14px;
        line-height: 1.6;
    }

    /* yost.technology / tabella ordine mobile */
    .yost-reso-cliente table,
    .yost-reso-cliente thead,
    .yost-reso-cliente tbody,
    .yost-reso-cliente tr,
    .yost-reso-cliente th,
    .yost-reso-cliente td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .yost-reso-cliente thead {
        display: none;
    }

    .yost-reso-cliente table > tbody > tr:first-child {
        display: none;
    }

    .yost-reso-cliente tr {
        margin: 0 0 16px 0;
        padding: 14px;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 4px;
    }

    .yost-reso-cliente td {
        position: relative;
        padding: 7px 0 7px 42%;
        border: 0;
        border-bottom: 1px solid #eeeeee;
        text-align: left !important;
        font-size: 14px;
        line-height: 1.45;
        min-height: 34px;
    }

    .yost-reso-cliente td:last-child {
        border-bottom: 0;
        font-weight: 600;
    }

    .yost-reso-cliente td::before {
        position: absolute;
        left: 0;
        top: 7px;
        width: 38%;
        color: #666666;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        text-align: left;
    }

    .yost-reso-cliente td:nth-child(1)::before { content: "Codice"; }
    .yost-reso-cliente td:nth-child(2)::before { content: "Prodotto"; }
    .yost-reso-cliente td:nth-child(3)::before { content: "Quantità"; }
    .yost-reso-cliente td:nth-child(4)::before { content: "Prezzo netto"; }
    .yost-reso-cliente td:nth-child(5)::before { content: "Prezzo"; }
    .yost-reso-cliente td:nth-child(6)::before { content: "Totale netto"; }
    .yost-reso-cliente td:nth-child(7)::before { content: "Totale"; }
}

@media screen and (max-width: 480px) {

    .yost-reso {
        width: 100%;
        padding: 0 8px;
        margin-top: 8px;
    }

    .yost-reso-intesta {
        padding: 14px;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .yost-reso-intesta-riga {
        margin: 0 0 7px 0;
    }

    .yost-reso-cliente {
        padding: 10px;
        font-size: 14px;
        line-height: 1.6;
    }

    .yost-reso-cliente tr {
        padding: 13px;
        margin-bottom: 14px;
    }

    .yost-reso-cliente td {
        padding-left: 40%;
        font-size: 14px;
    }

    .yost-reso-cliente td::before {
        width: 36%;
    }

    .yost-reso-cliente td:nth-child(2) {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 15px;
    }

    .yost-reso-cliente td:last-child {
        padding-top: 10px;
        padding-bottom: 12px;
        padding-left: 42%;
        min-height: 40px;
    }

    .yost-reso-cliente td:last-child::before {
        top: 10px;
        width: 38%;
    }

    .yost-reso-dati {
        margin-bottom: 16px;
    }

    .yost-reso-dato {
        display: block;
        width: 100%;
        margin-bottom: 7px;
        padding: 13px 14px;
        background-color: #f6f6f6;
        font-size: 14px;
        line-height: 1.55;
        border-radius: 3px;
    }

    .yost-reso-form {
        margin-top: 16px;
        padding: 15px;
        border-radius: 3px;
    }

    .yost-reso-label {
        margin-bottom: 10px;
        font-size: 17px;
        line-height: 1.35;
    }

    .yost-reso-note {
        width: 100%;
        min-height: 170px;
        padding: 13px;
        font-size: 16px;
        line-height: 1.5;
        border-radius: 3px;
    }

    .yost-reso-pulsante {
        margin-top: 12px;
    }

    .yost-reso-button {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        line-height: 1.3;
        border-radius: 4px;
    }

    .yost-reso-messaggio {
        width: calc(100% - 16px);
        margin: 10px 8px;
        padding: 15px;
    }

    .yost-reso-messaggio .yost-reso-intesta {
        font-size: 16px;
        line-height: 1.4;
    }
}


/* --- StyleFooter --- */

@media screen and (max-width: 768px) {

    .yost-foot-col {
        width: 100%;
    }

    .yost-foot-content {
        margin: 0 0 30px;
    }
}

@media screen and (max-width: 600px) {

    .yost-foot-slogan {
        padding: 30px;
    }
}


/* =========================================================
   YOST | MENU RESPONSIVE DEFINITIVO
   Desktop/tablet ampio: menu sempre aperto.
   Mobile <= 768px: toggle CSS puro, nessun JS/font esterno.
   ========================================================= */
@media screen and (min-width: 769px) {
    #menu-slide,
    nav > label[for="menu-slide"] {
        display: none !important;
    }

    #MENUC12 .menu1,
    .menu1 {
        position: relative;
        top: auto;
        left: auto;
        min-width: 0;
        min-height: 0;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .menu1 li {
        display: inline-block;
    }
}

@media screen and (max-width: 768px) {
    #menu-slide {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    nav > label[for="menu-slide"] {
        position: absolute;
        top: -18px;
        left: 0;
        z-index: 1003;
        display: block;
        width: 34px;
        height: 30px;
        cursor: pointer;
    }

    nav > label[for="menu-slide"]::before,
    nav > label[for="menu-slide"]::after {
        content: "";
        position: absolute;
        left: 2px;
        width: 30px;
        height: 3px;
        background: #181717;
        transition: transform .25s ease, top .25s ease, box-shadow .25s ease;
    }

    nav > label[for="menu-slide"]::before {
        top: 6px;
        box-shadow: 0 8px 0 #181717, 0 16px 0 #181717;
    }

    nav > label[for="menu-slide"]::after {
        top: 14px;
        opacity: 0;
    }

    #menu-slide:checked + label::before {
        top: 14px;
        box-shadow: none;
        transform: rotate(45deg);
    }

    #menu-slide:checked + label::after {
        opacity: 1;
        transform: rotate(-45deg);
    }

    #MENUC12 .menu1 {
        left: -520px;
    }

    #menu-slide:checked ~ #MENUC12 .menu1 {
        left: -15px;
    }
}