/**
 * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
 * remove this comment and start adding your styles to this file.
 */

/* CSS Document */
@charset "utf-8";

:root {
    --cViola: #a7177c;
}

/*STRUCTURE*/

/* .gradient-hor {
    background: rgb(167,23,124);
    background: -moz-linear-gradient(90deg, rgba(167,23,124,1) 0%, rgba(184,54,143,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(167,23,124,1) 0%, rgba(184,54,143,1) 100%);
    background: linear-gradient(90deg, rgba(167,23,124,1) 0%, rgba(184,54,143,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a7177c",endColorstr="#b8368f",GradientType=1);
} */

.grid-tendina .btn-actions { padding: 0.3em 0; }

/* HEADER MAIN */
.header-main  {
    background: #a7177c;
    background: -moz-linear-gradient(90deg, #a7177c 0%, #bd3e96 100%);
    background: -webkit-linear-gradient(90deg, #a7177c 0%, #bd3e96 100%);
    background: linear-gradient(90deg, #a7177c 0%, #bd3e96 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a7177c",endColorstr="#bd3e96",GradientType=1);
}

.header-main .row-header-main { min-height: 30em; } 

.header-main .wrapper-visual .wrapper-motivo { 
    position: absolute; 
    min-width: auto; 
    top: 0; 
    right: 0em; 
    width: auto;
    padding: 0;
    mix-blend-mode: multiply;
}

.header-main .wrapper-strillo .logo img { 
    position: relative;
    left: -7em;
    max-width: 120%;
}

/* MENU ANCORE */
.mancore { background-color: var(--cLWhite); }

.mancore .wrapper-mancore { }

.mancore .wrapper-mancore a { 
    padding: 2em 0px;
    display: block;
    color: var(--cGray); 
}

.mancore .wrapper-mancore a.active,
.mancore .wrapper-mancore a:hover,
/* .mancore .wrapper-mancore a:focus, */
.mancore .wrapper-mancore a:active { 
    background-color: var(--cViola);
    color: var(--cWhite); 
}

/* OFFRE */
.offre .box-visual .wrapper-nota {
    position: absolute;
    right: 1em;
    width: auto;
    bottom: 8em;
}

.offre .wrapper-bottone { position: absolute; top: -4em; }

/* DIVERSO */
.diverso .grid-tendina .box-tendina { margin-bottom: 0.5em; }

.diverso .grid-tendina .box-header .btn-actions { padding: 0.3em 0; padding: 0; }

.diverso .grid-tendina .box-header { background-color: var(--cViola); }
.diverso .grid-tendina .box-header.active,
.diverso .grid-tendina .box-header:hover { cursor: pointer; background-color: var(--cDViola); }

.diverso .grid-tendina .box-header .caption,
.diverso .grid-tendina .box-header .icona { }

.diverso .grid-tendina .box-header .caption { margin: auto auto auto 1em; max-width: 15em; }
.diverso .grid-tendina .box-header .icona { margin: auto 0.5em auto 0.5em; }

.diverso .grid-tendina .box-header .caption p,
.diverso .grid-tendina .box-header .icona p { margin: 0; }

.diverso .grid-tendina .box-header .icona { position: relative; color: var(--cWhite); }
.diverso .grid-tendina .box-header.active .icona,
.diverso .grid-tendina .box-header:hover .icona { }

.diverso .grid-tendina .box-header .icona .icon { font-size: 2em; }

.diverso .grid-tendina .box-header.active .caption p,
.diverso .grid-tendina .box-header:hover .caption p,
.diverso .grid-tendina .box-header.active .icona,
.diverso .grid-tendina .box-header:hover .icona { color: var(--cWhite); }

.diverso .grid-tendina .box-body {
    position: relative;
    padding: 1em 15px;
    background-color: var(--cWhite);
}

.diverso .grid-tendina .box-body .caption { }


.diverso .grid-tendina-custom .box-header.active .btn-secondary {
    background-color: var(--cWhite) !important; 
    border-color: var(--cWhite) !important; 
    color: var(--cDViola) !important;
}

.diverso .row-collapse-custom  .wrapper-collapse .box-close { text-align: right;  }
.diverso .row-collapse-custom  .wrapper-collapse .btn-close { cursor: pointer; }

.diverso .grid-tendina-custom .btn-actions {
    padding: 0.5em 0;
    text-align: right;
    cursor: pointer; 
}

.diverso .grid-popup {
    position: absolute;
    width: 100%;
    right: 0em;
    top: 0em;
    z-index: 2;
    border: 0px solid red;
    max-width: 15em;
    max-width: 13em;
}

.diverso .grid-popup .box-popup {
    right: 4em;
    top: 4em;
}

.diverso .grid-popup .box-popup1 { top: 4em; }
.diverso .grid-popup .box-popup2 { top: 10.5em; }
.diverso .grid-popup .box-popup3 { top: 16.5em; }



.diverso .grid-tendina-popup .box-tendina {  }

.diverso .grid-tendina-popup .box-header .btn-actions { padding: 0.3em 0; padding: 0; }

.diverso .grid-tendina-popup .box-header { 
    background-color: transparent; 
    width: auto;
    float: right;
}
.diverso .grid-tendina-popup .box-header.active,
.diverso .grid-tendina-popup .box-header:hover { cursor: pointer; }


.diverso .grid-tendina-popup .box-header .popup-icona { margin: auto 0 auto auto; }

.diverso .grid-tendina-popup .box-header .popup-icona .icona { position: relative; color: var(--cWhite); }
.diverso .grid-tendina-popup .box-header.active .popup-icona .icona,
.diverso .grid-tendina-popup .box-header:hover .popup-icona .icona { }



.diverso .grid-tendina-popup .box-header.active .caption p,
.diverso .grid-tendina-popup .box-header:hover .caption p,
.diverso .grid-tendina-popup .box-header.active .icona,
.diverso .grid-tendina-popup .box-header:hover .icona { color: var(--cWhite); }

.diverso .grid-tendina-popup .wrapper-popup {
    position: absolute;
    padding: 1em 15px 1.5em;
    background-color: var(--cLViola);
    top: -1em;
    right: -2em;
    z-index: 3;
    display: none;
    -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.diverso .grid-tendina-popup .wrapper-popup.collapse.in { display: block; }

.diverso .grid-tendina-popup .wrapper-popup .caption { }

.diverso .grid-tendina-popup .box-close { 
    text-align: right;
    color: var(--cLWhite);
    position: relative;
    top: -0.2em;
    font-size: 1.25em;
}
.diverso .grid-tendina-popup .btn-close { cursor: pointer; }


/* VANTAGGI */
.vantaggi .grid-tendina .box-tendina { margin-bottom: 0.5em; }

.vantaggi .grid-tendina .box-header { background-color: var(--cLWhite); }
.vantaggi .grid-tendina .box-header.active,
.vantaggi .grid-tendina .box-header:hover { cursor: pointer; background-color: var(--cViola); }


.vantaggi .grid-tendina .box-header .caption,
.vantaggi .grid-tendina .box-header .icona { }

.vantaggi .grid-tendina .box-header .caption { margin: auto auto auto 1em; max-width: 15em; }
.vantaggi .grid-tendina .box-header .icona { margin: auto 0.5em auto 0.5em; }

.vantaggi .grid-tendina .box-header .caption p,
.vantaggi .grid-tendina .box-header .icona p { margin: 0; }

.vantaggi .grid-tendina .box-header .icona { position: relative; color: var(--cLGray); }
.vantaggi .grid-tendina .box-header.active .icona,
.vantaggi .grid-tendina .box-header:hover .icona { }

.vantaggi .grid-tendina .box-header .icona .icon { font-size: 2em; }


.vantaggi .grid-tendina .box-header.active .caption p,
.vantaggi .grid-tendina .box-header:hover .caption p,
.vantaggi .grid-tendina .box-header.active .icona,
.vantaggi .grid-tendina .box-header:hover .icona { color: var(--cWhite); }

.vantaggi .grid-tendina .box-body {
    position: relative;
    padding-top: 1em;
}

.vantaggi .grid-tendina .box-body .caption { }


/* SOLUZIONI */
.soluzioni .wrapper-box { padding: 0em 0; }

.soluzioni .wrapper-box .box-head { padding: 1em 1em; height: 6em; }

.soluzioni .wrapper-box .img-cover { object-fit: unset; object-fit: contain; }


/*WEBFORM*/
.webform-component.domanda { margin: 0.5em 0em 1em; }


/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

.img-responsive { display: inline-block; }


    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 300px) {

        body { font-size: 16px; }

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

        body { font-size: 16px; }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

        body { font-size: 16px; }

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

        body { font-size: 18px; font-size: 17px; }

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

        body { font-size: 20px; font-size: 19px; }

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1440px) {


    }





    /*==========  Non-Mobile First Method  ==========*/

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


    }


    /* Large Devices, Wide Screens LG */
    @media only screen and (max-width : 1200px) {


    }

    /* Medium Devices, Laptop MD*/
    @media (min-width: 992px) and (max-width: 1199px) { 

        /* HEADER MAIN */
        .header-main .wrapper-strillo .logo img { left: -5em; }
        .header-main .wrapper-visual { right: -5em; }

        /* DIVERSO */
        .diverso .grid-popup .box-popup { right: 2em; }
        .diverso .grid-popup .box-popup1 { top: 4em; }
        .diverso .grid-popup .box-popup2 { top: 11.5em; }
        .diverso .grid-popup .box-popup3 { top: 18.5em; }


    }

    /* Medium Devices, Desktops MD*/
    @media only screen and (max-width : 991px) {

        /* DIVERSO */
        .diverso .grid-tendina-popup .box-header .popup-icona .icona img { width: 3.5em; }        
        .diverso .grid-tendina-popup .wrapper-popup { right: -1em; }
        
        .diverso .grid-popup .box-popup { right: 1em;  }        
        .diverso .grid-popup .box-popup1 { top: 3em; }
        .diverso .grid-popup .box-popup2 { top: 9em; }
        .diverso .grid-popup .box-popup3 { top: 15em; }



    }

    /* Portrait tablets and small desktops */
    @media (min-width: 768px) and (max-width: 991px) {

        h2, .h2 { font-size: 1.5em; }

        /* HEADER MAIN */
        .header-main .wrapper-strillo .logo img { left: -4em; }
        .header-main .wrapper-visual { right: -13em; }

        /* MENU ANCORE */
        .mancore .wrapper-mancore p { font-size: 0.9em;  }

        /* OFFRE */
        .offre .box-visual .wrapper-nota { right: 0; }

        /* DIVERSO */
        .diverso .wrapper-visual .title { font-size: 1.25em; }
        .diverso .wrapper-bottom { left: -2em; }


        /* SOLUZIONI */
        .soluzioni .box-title .title { font-size: 1em; }



    }

    /* Small Devices, Tablets SM*/
    @media only screen and (max-width : 767px) {

        /* HEADER MAIN */
        .header-main .wrapper-strillo .logo img {
            position: relative;
            left: 0;
            max-width: 80%;
        }

        .header-main .wrapper-image { display: none; }

        /* MENU ANCORE */
        .mancore { padding: 1em 0; padding: 0em 0; }
        
        .mancore .wrapper-mancore { padding: 0; }
        .mancore .wrapper-mancore a { padding: 0.8em 0px; padding: 1em 0px;  }

        /* OFFRE */
        .offre .box-visual .visual { 
            max-width: 80%;
            padding-bottom: 2em;
        }
        
        .offre .box-visual .wrapper-nota {
            position: relative;
            right: unset;
            width: 100%;
            bottom: 6em;
            text-align: left;
        }

        /* DIVERSO */
        .diverso .wrapper-visual { padding-bottom: 2em; }
        
        .diverso .grid-tendina-popup .box-header { float: left; }        
        .diverso .grid-tendina-popup .wrapper-popup { top: -4em; left: 0; right: unset; }
        
        .diverso .grid-popup {
            position: absolute;
            border: 0px solid red;
            max-width: 13em;
            right: unset;
            left: 0;
        }        
        
        .diverso .grid-popup .box-popup { right: unset; left: 5%; }        
        
        
        .diverso .grid-popup .box-popup1 { top: 9em; }
        .diverso .grid-popup .box-popup2 { top: 15em; }
        .diverso .grid-popup .box-popup3 { top: 21em; }

        .diverso  .wrapper-bottom { text-align: center; }
        .diverso  .wrapper-nota { padding-bottom: 0em; padding-left: 15px; }
        
        .diverso .grid-tendina-custom .btn-actions { text-align: center; }
        
        .diverso .row-collapse-custom .wrapper-collapse .box-close { display: none; }

        /* SOLUZIONI */
        .soluzioni { padding-top: 0; }
        .soluzioni .box-visual { padding-bottom: 0; }
        .soluzioni .wrapper-bottone { padding-top: 2em; padding-bottom: 0em; }

        /* OMAGGIO */
        /* .omaggio .wrapper-visual { left: 10vh; } */

    }

    /* Mobile Large, Extra Small Devices, Phones XS*/ 
    @media only screen and (max-width : 480px) {

        /* DIVERSO */
        .diverso .grid-popup .box-popup { right: unset; left: 0em; }       

    }

    /* Mobile Medium, iPhone Retina */ 
    @media only screen and (max-width : 375px) {


    }

    /* Mobile Small, Custom iPhone Retina */ 
    @media only screen and (max-width : 320px) {

        /* VANTAGGI */
        /* .vantaggi .grid-tendina .box-header .caption { max-width: 10em; } */



    }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }


@media (max-width: @screen-xs-max) {  }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }

    /*==========  CROSS BROWSER  ==========*/

/*HOOK EXPLORER11*/
@media all and (-ms-high-contrast:none) { 

}