.colonna_dx_supporto{ display:none }    @media(max-width: 766px){  .colonna_dx_supporto{ display:block } }


.colonna_dx{
    width:100%;
    
    background-color:#fafbfb;
    display: grid;
    
    grid-auto-rows: minmax( 0px, auto);
    
    font-size: 14px;
    line-height: 22px;

    border: 1px solid #eff1f1;
}


.colonna_dx .intro {
    padding: 10px;

}

.colonna_dx .intro img{
    width:100%;
}

.colonna_dx .info{
    background-color: #fafbfb;
    padding: 10px 60px 10px 60px;

}

.colonna_dx .info .nomeProdotto{
    font-weight: 600;
    color:#343434;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 34px;


}

.colonna_dx .dettaglio_promozione{
    padding: 10px 60px 10px 60px;
}

.colonna_dx .dettaglio_promozione .titolo_dettaglio_promozione{
    font-size: 16px;
    line-height:19px;
    font-weight: 600;
    margin-top: 27px;
}



.colonna_dx .rinnovo{
    padding: 10px 60px 10px 60px;
    background-color:#DFE3E2;
    color: #343434;
    font-size: 12px;
    font-weight:600;
    text-align: center;
}



.colonna_dx .prezzo{

    
    display: grid;

    background-color: #FFF;
    
    
    padding: 10px 60px 10px 60px;

    grid-template-columns: minmax(100px,155px) auto;
    grid-template-rows: auto;

   
    grid-template-areas:    "scritta scritta"
                            "totale costo_originale";

}


.spazio{
    grid-area: spazio;
    color: #671A1D;


}

.scritta{
    grid-area: scritta;
    color: #671A1D;
}


.totale{
    grid-area: totale;
    font-weight: 600;
    font-size: 34px;
    line-height: 44px;
    color: #343434;
    
}

.costo_originale{
    grid-area: costo_originale;
    display: grid;
    /*grid-template-columns: auto auto;*/
    grid-template-columns: 40px auto;

    align-items:center;
       
 }

 .costo_originale .anziche{
    font-size:8px;
    /*align-self: right;*/
}

 .costo_originale .prezzoBarrato{
    color: #671A1D;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 23px;
    

    text-decoration: line-through;
 }

 

.colonna_dx .prezzo .scritta{
    
    color:#A00;
    font-size:16px;
    font-weight: 600;
}

.colonna_dx .chiusura{
    height:15px;
    border-bottom: 1px solid #333;
}



@media( max-width:767px){
    
   .colonna_dx_lite{
        margin: 1rem 0px 1rem 0px;
        border-top: 1px solid #AAA;
        border-bottom: 1px solid #AAA;
        background-color: #f3f6f5;

        border: 1px solid #eff1f1;
        

    }
    
    
    .prima_riga{

        display: grid;
        grid-template-columns: 45% 5px auto;
    }
    



    .prima_riga .info{
        
        font-size: 13px;
        place-self: center center;
        padding: 10px;
        font-weight: 600;
    }
    
    .colonna_dx_lite .separatore{
        
        border:1px solid #d3d3d3;
        display:block;
        width:1px;
        left: 3px;

        margin: 10px 0px 10px 0px;
    }

    .prima_riga .prezzo{

        
        grid-area: "lite_dx";
        display: grid;

        grid-template-areas:    "scritta  tastoEspandi"
                                "promo tastoEspandi";

        grid-template-columns: auto 40px;

        /*background-color: #FFF;*/
        background-color: #f3f6f5;

    }

    .prima_riga .prezzo > scritta{
        grid-area: scritta;
        
        display:grid;
        grid-template-columns: 60px auto;
    
    }


    .prima_riga .prezzo > promo{
        
        display:grid;
        grid-template-columns: 60px auto;
    
    }

    .prima_riga  .prezzo > tastoEspandi{
        grid-area: tastoEspandi;

        
        place-items:        center center;
        place-content:      center center;
        justify-content:    center center;

        place-self: center center;

        cursor: pointer;

        border: 1px solid #444;
        
        width: 30px; height: 30px;
        text-align: center;
        padding: 5px;

        border-radius: 50%;

    }



    .scritta_lite, .anziche{
        
        color: #671A1D;
        place-self: center right;
        padding-right:5px;
        font-size: 12px;
        font-weight: 600;
    }

    .totale_lite, .prezzoBarrato{
        
        font-weight: 600;
        font-size: 24px;
        line-height: 34px;
        color: #343434;
        
        place-self:center left;
        
    }


    .anziche{
        
        color: #671A1D;
        place-self: center right;
        padding-right:5px;
        font-size: 8px;
        font-weight: 600;
        font-variant-caps: petite-caps;
    }


    .prezzoBarrato{
        
        font-weight: 600;
        font-size: 15px;
        color: #343434;
        place-self:center left;
        
        text-decoration: line-through;
    }


    .colonna_dx .prezzo > promo{
        grid-area: promo;
    }
    
    

    .seconda_riga{

        height: auto;
        overflow-y:hidden;
        width:100%;

        background-color: #FFF;

        transition: height 0.3s;
    }

    .seconda_riga_off{

        height: 0px;
    }

    .dettaglio_promozione{
        padding: 10px;
        font-size: 12px;
    }   

    
    .rinnovo{
        background-color:#DFE3E2;
        color: #343434;
        font-size:12px;
        padding: 5px;
        text-align: center;
        font-weight: 600;
    }



    
}


@media( max-width: 435px ){

    .prima_riga .prezzo > scritta{
        grid-area: scritta;
        
        display:block;
        padding-left: 10px;
    }

    .prima_riga .prezzo > promo{

        display:block;
        padding-left: 10px;
    }



    
/*    .scritta_lite{ display: none }*/
    .anziche{ display: none }
}