/* psk attive */
.materials__section ul li.active .materials__group{
    visibility:visible;
}

.materials__section ul li.active h2.hvr-trim{
    color:white;
}

.materials__section li.active h2{
    background-color:#cbd300;
}

.materials__group .materials__group__image{
    color:#3d4242;
    margin:0 auto;
}

.row.row-eq-height div.col-eq-height img{
    max-height:350px;
    width:auto;

}

.row.row-eq-height div div p{
    min-height:50px;
}

.materials{

}

.materials li{
    list-style:none;
}

.materials__section{
    background-color:whitesmoke;
    min-height:500px;
}

.materials__section h2{
    display:inline-block;
    background-color:#3d4242;
    font-size:18px;
    max-height:50px;
    color:whitesmoke;
    padding:11px;
    margin:0;
    cursor:pointer;
    transition:background-color .2s ease-in-out;
}

.materials__section h2:hover{
    background-color:#9ba202;
}

.containter_descrizione_famiglia{
    padding-top:20px;
}

.containter_descrizione_famiglia .fam_tit{
    font-weight:bold;
}

/*
.materials__section h2:active {
    background-color: #9ba202;
    content: '';
    position: absolute;
    border: #fff solid 4px;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
*/
.materials__section > ul{
    padding-left:0;
    position:relative;
    height:100%;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    align-content:flex-start;
}

.materials__section ul > li{
    display:inline;
}

.materials__group{
    background-color:whitesmoke;
    position:absolute;
    display:flex;
    visibility:hidden;
    color:whitesmoke;
    margin-top: 40px;
    height:90%;
    width:100%;
    left:0;
    padding:0;
}

.materials__group__button{
    /* background-color: #3d4242;*/
    display:flex;
    flex-direction:column;
    width:60%;
    height:100%;
    margin-top:10px;
    padding-right:1%;
    padding-left:1%;

}

.materials__group__button li{
    width:100%;
}

.materials__group__image{
    width:auto;
    margin:auto;
    right:0;
    top:0;
}

.materials__group__image img{
    max-width:400px;
}

.materials__button{
    border-color:#cbd300;
    border-radius:0;
    height:40px;
    text-decoration:none;
    margin-top:10px;
    transition:background-color .2s ease-in-out;
}

.materials__button:hover{
    background-color:#cbd300;
}

.materials__button:hover a{
    color:#fff;
}

.materials__button a{
    color:#0f0f0f;
    display:block;
    text-decoration:none;
}

.materials__button span{
    color:#0f0f0f;
}

/* versione mobile menu */
@media screen and (max-width:768px){

    ul.materials__group__button{
        margin:0 auto;
    }
    .materials__group__button {
        width: 100%;
    }

    .materials__group .materials__group__image{
        margin-bottom:25px;
    }

    .materials__section > ul{
        padding-left:0;
        position:relative;
        height:100%;
        display:block;
    }

    .materials__section > ul > li{
        display:block;
        text-align:center;
    }

    .materials__group{
        visibility:visible;
        position:relative;
        display:block;
        height:90%;
        text-align:center;
    }

    .materials__section li h2{
        background-color:#9ba202;
        text-align:center;
        display: block;
    }

    .materials__section{
        height:auto;
        text-align:center;
    }

    #material-resine h1{
        text-align:center;
    }

}

/* end media */