#header a:hover{text-decoration: none;}
#menu {
    background-color: #f1ce54;
    color: white;
    align-self: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

#menu a {
    color: white;
    padding: 2px 10px;
}

#menu a:hover {
    color: #f1ce54;
}

#menu a.active {
	color: #f1ce54;
}

#menu .img-logo {
    width: 100%;
    align-self: center;
    justify-self: center;
    max-width: 200px;
}

#menu ul {
    width: 100%;
    justify-content: center;
}

#menu img {
    width: 100%;
    height: 100%;/*old browser*/
/*     height: fit-content; */
    object-fit: cover;
}

#menu .voce-menu {
    text-align: center;
    font-family: Roboto;
    font-size: 1.3em;
    background-color: #f94306;
    padding: 5px;
    text-transform: uppercase;
    align-self: center;
    width: 100%;
    white-space: nowrap;
}

#secondary-menu  a {
    text-decoration: none ;
    color: white;
}

#secondary-menu  a:hover {
    text-decoration: none ;
    color: #f1ce54;
}

#secondary-menu {
    height: 261px;
    background-attachment: fixed;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    align-content: center;
    background-image: url('img/ball-bg.jpg');
}

#secondary-menu .row {
    height: 100%;
    padding-right: 15%;
    padding-left: 15%;
    padding-top: 25px;
}

#secondary-menu .col {
    display: block;
    align-self: center;
}

#secondary-menu .fa-lg {
    width: 100%;
    font-size: 4em;
    color: #f74117;
}

#secondary-menu p {
    text-align: center;
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.5em;
}

h2 {
    position: relative;
    grid-area: 3 / 2 / 4 / 3;
    color: #ffffff;
    background-color: #f94306;
    padding-left: 6px;
    min-height: 45px;
    padding-top: 3px;
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;    
}
@media (max-width: 575.98px) {
    h2{padding-bottom: 8px;}
}

h2:after {
    content: "";
    position: absolute;
    display: block;
    top: 0em;
    min-width: 68px;
    min-height: 61px;
    right: 0px;
    background-image: url('img/titolo_flag.png');
    background-repeat: no-repeat;
    z-index: -1;
}

h2 span a {
    float: right;
    padding: 20px 10px 10px 45px;
    font-size: small;
    color: white;
}

h2 span a:hover {text-decoration: none; color:white;}

hr.footer {
    border-top: solid 10px #fb4500;
    margin: 0;
}

.header {
    background-position: center center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 165px;
    grid-gap: 25px;
    background-image: url('img/ducolimeccanica-timbro.png');
    background-repeat: no-repeat;
    background-size: 400px;
}

.header .logo {
    align-self: center;
    text-align: center;
}

.header img {
    width: 100%;
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    justify-self: center;
    max-width: 500px;
}

.header .address-right {
    grid-area: 1 / 3 / 2 / 4;
    text-align: right;
    font-family: Roboto;
    font-weight: 100;
    padding-right: 30px;
    align-self: flex-end;
    font-size: 1.5em;
}

.header .address-left {
    text-align: left;
    font-family: Roboto;
    font-weight: 100;
    padding-left: 30px;
    align-self: flex-end;
    font-size: 1.5em;
    grid-area: 1 / 1 / 2 / 2;
}

.header .fas,
.header .far,
.header .fab {
    color: #f74117;
}

a.head {
    color: #000000;
    text-decoration: none;
    white-space: nowrap;
}

a.head:hover {
    text-decoration: none;
}

#content .img-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 40vh;
}

#content h1 {
    align-self: center;
    color: #ffffff;
    text-shadow: 2px 2px #0000005e;
    font-family: Roboto;
    font-weight: 900;
    font-size: 12vw;
    position: absolute;
    bottom: 0.2em;
    left: 0.6em;
}

@media (min-width:992px) {
    #content h1 {
        font-size: 10vw;
    }
}

@media (min-width:992px)  {
    #content .colonne {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 50px;
        -moz-column-gap: 50px;
        column-gap: 50px;
        -webkit-column-rule: 1px solid lightgrey;
        -moz-column-rule: 1px solid lightgrey;
        column-rule: 1px solid #d3d3d3;
    }
}

.footer ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}

.footer ul li:before {
    content: "•";
    position: absolute;
    left: 0;
}

.footer li {
    font-size: 1.1em;
    padding: 3px 0;
    -webkit-transition: .5s all ease;
    -moz-transition: .5s all ease;
    transition: .5s all ease;
}

.footer li:hover {
    margin-left: 5px;
    font-weight: 700;
}

.footer li a {
    color: #ffffff;
    text-decoration: none ;
}

/*MATERIAL CLICK EFFECT*/
.ripple {
    background-position: center;
    transition: background 0.8s;
}

.ripple:hover {
    background: #f1ce54 radial-gradient(circle, transparent 1%, #f1ce54 1%) center/15000%;
}

.ripple:active {
    background-color: #f1ce54;
    background-size: 100%;
    transition: background 0s;
}

.custom-element {
    color: gray("100");
    background-color: theme-color("dark");
}

.nav-item {
}

#content .title {
    overflow: hidden;
}

.row.footer {
    background-color: #393634;
    color: white;
}

.footer .footer-address {
    background-image: url('img/footer_bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    text-align: center;
    color: initial;
    font-size: 90%;
}

.footer .footer-address img {
    width: 67%;
    margin-bottom: 30px;
}

.footer .footer-address address {
    white-space: nowrap;
    text-align: left;
    font-family: Roboto;
    font-weight: 400;
    padding-left: 20%;
    font-size: 1.2em;
}

.copyright {
    background-color: #f74117;
}

.footer .copyright p {
    font-weight: lighter;
    text-align: center;
    color: #393634;
    font-size: 80%;
    padding: 1px;
    margin: 0px;
}

.nav-item.active {
}

/*======= Gallery =========*/
.img-thumbnail {
    margin: 0.8em;
    /*background-color: #f1cc5c;*/
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
}

.sl-overlay {background: #f1cc5c !important; opacity: 1 !important;}
/*.sl-wrapper .sl-close, .sl-wrapper .sl-counter {color: #f94306 !important;}*/
/*.sl-wrapper .sl-navigation button {color: #f94306 !important;}*/