﻿html {
    font-size: 16px !important;
}

body {
    color: #6d6d6d !important;
    font-family: 'Open Sans Condensed', sans-serif !important;
}

.ff-os {
    font-family: 'Open Sans', sans-serif !important;
}

.ff-osc {
    font-family: 'Open Sans Condensed', sans-serif !important;
}

.uragani-red {
    color: #e30613;
}

.bg-uragani-red {
    background-color: #e30613;
}

.uragani-black {
    color: #000e1f;
}

.bg-uragani-black {
    background-color: #000e1f;
}

.bg-uragani-light-grey {
    background-color: #f7f7f7;
}

.bg-uragani-dark-grey {
    background-color: #6d6d6d;
}

.opc-1 {
    opacity: 1 !important;
}

.no-shad {
    text-shadow: none !important;
}

.my-lightbox {
    opacity: 0.95 !important;
}

.font-weight-extra-bold {
    font-weight: 800;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif !important;
}

.text-1 {
    font-size: 3rem;
    line-height: normal;
}

.text-2 {
    font-size: 2.75rem;
    line-height: normal;
}

.text-3 {
    font-size: 2.5rem;
    line-height: normal;
}

.text-4 {
    font-size: 2.25rem;
    line-height: normal;
}

.text-5 {
    font-size: 2rem;
    line-height: normal;
}

.text-6 {
    font-size: 1.75rem;
    line-height: normal;
}

.text-7 {
    font-size: 1.5rem;
    line-height: normal;
}

.text-8 {
    font-size: 1.375rem;
    line-height: normal;
}

.text-9 {
    font-size: 1.25rem;
    line-height: normal;
}

.text-10 {
    font-size: 1.125rem;
    line-height: normal;
}

.text-11 {
    font-size: 1rem;
    line-height: normal;
}

.text-12 {
    font-size: 0.875rem;
    line-height: normal;
}

.text-13 {
    font-size: 0.75rem;
    line-height: normal;
}

.text-14 {
    font-size: 0.625rem;
    line-height: normal;
}

.red-divider {
    width: 170px;
    height: 9px;
    background-color: #e30613;
    margin: 3rem auto;
}

.white-divider {
    width: 170px;
    height: 9px;
    background-color: #fff;
    margin: 3rem auto;
}

.grey-divider {
    width: 100%;
    height: 1px;
    background-color: #f0f0f0;
    margin: 2rem 0;
}

button, .btn {
    font-family: 'Open Sans', sans-serif !important;
    border-radius: 0 !important;
}

.title-container {
    padding-bottom: 6.5rem !important;
    line-height: normal;
}

.active-link {
    color: #e30613 !important;
}

/*
    BANNER COOKIES
*/
#cookieChoiceInfo {
    position: sticky !important;
}

/*
    MENU'
*/
.navbar a {
    color: #6d6d6d !important;
    font-size: 14px; /* 0.875rem; */
    letter-spacing: 1px;
}

    .navbar a:hover {
        color: #e30613 !important;
    }

    .navbar a.active-link {
        color: #e30613 !important;
        font-weight: bold;
    }

#menu-container {
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    margin-top: 20px;
}

.fa-bars {
    color: #e30613;
}

.sticky-bar {
    position: sticky !important;
    top: 0;
}

/*
    HOME PAGE
*/
/* Titolo / Nome pagina */
.title-container.hp-title {
    z-index: 99;
    left: 0;
    right: 0;
    padding-bottom: 0 !important;
}

    .title-container.hp-title > img {
        max-width: calc(5.5vh + 5.5vw);
        margin: 0 auto;
    }

    .title-container.hp-title > div {
        padding-bottom: 6.5rem;
    }

/* Carosello */
ol.carousel-indicators li.active {
    background: #e30613;
}

ol.carousel-indicators li {
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #fff;
}

#carouselExampleIndicators > .carousel-inner {
    height: 75vh;
}

.carousel-indicators {
    margin-bottom: 5vw;
}

#taglio-slider {
    bottom: -1px !important;
    width: calc(100% - 30px) !important;
}

.hp-wall-mezzo {
    height: 244px !important;
}

.hp-wall-intero {
    height: 505px !important;
}

/*
    AZIENDA
*/
#azienda-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-azienda.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

#azienda-red-box {
    background: url(/images/azienda-box-rosso.jpg) no-repeat center;
}

/*
    MECCANICO E TECNOLOGICO
*/
#meccanico-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-servizi-meccanico.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

/*
    ELETTRICO E FOTOVOLTAICO
*/
#elettrico-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-servizi-elettrico.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

/*
    REFERENZE
*/
#referenze-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-referenze.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

.btn-ref.click-focus {
    box-shadow: none !important;
    background-color: #e30613 !important;
}

#loadMore {
    box-shadow: none !important;
    transition: all 600ms ease-in-out;
}

.ekko-lightbox {
    background-color: rgba(109, 109, 109, 0.85);
}

    .ekko-lightbox > .modal-dialog > .modal-content {
        background-color: transparent !important;
        border: 0 !important;
        color: #fff !important;
    }

        .ekko-lightbox > .modal-dialog > .modal-content > div {
            border: 0 !important;
            padding: 0.3rem !important;
            opacity: 1 !important;
        }

        .ekko-lightbox > .modal-dialog > .modal-content > .modal-footer {
            justify-content: flex-start !important;
        }

        .ekko-lightbox > .modal-dialog > .modal-content > .modal-header button.close {
            line-height: inherit !important;
            color: #fff !important;
            opacity: 1 !important;
        }

/*
    NEWS
*/
#news-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-news.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

/*
    CONTATTI
*/
#contatti-parallax {
    background-image: url("/images/taglio-foto.png"), url("/images/header-contatti.jpg");
    background-attachment: scroll, fixed;
    background-position: bottom, center;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    height: 75vh;
}

#contatti-nome-azienda {
    font-size: 1.125rem;
    text-transform: uppercase;
    color: #000e1f;
    font-family: "Open Sans Condensed", sans-serif;
    letter-spacing: 1px;
}

#link-mail {
    text-decoration: none;
}

    #link-mail:hover {
        color: #000 !important;
    }

#inpt-nome, #inpt-cogn, #inpt-azie, #inpt-emai, #inpt-mess, #pri-pol-check {
    border-color: #6d6d6d !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #e30613 !important;
}

#ContentPlaceHolderBody_ButtonInvia:hover {
    background-color: #b1041d;
}

/* 
    FOOTER
*/
footer li.active a {
    color: #e30613 !important;
}

footer a {
    color: #6d6d6d !important;
    text-decoration: none !important;
}

    footer a:hover {
        color: #e30613 !important;
    }

#footer-box-mecc {
    background: url(/images/BG-meccanico-tecnologico.jpg) no-repeat center;
    background-size: cover;
}

#footer-box-elet {
    background: url(/images/BG-elettrico-fotovoltaico.jpg) no-repeat center;
    background-size: cover;
}

    #footer-box-mecc p:first-child, #footer-box-elet p:first-child {
        line-height: 1 !important;
    }

    #footer-box-mecc p.desc, #footer-box-elet p.desc {
        height: 4.5rem;
    }

    #footer-box-mecc .btn:hover, #footer-box-elet .btn:hover {
        background-color: #b1041d;
    }


#copy-cred, #copy-cred a {
    color: #b2b2b2 !important;
    font-size: 11px !important;
    font-family: 'Open Sans', sans-serif !important;
}

#fa-arrow-up-container {
    width: 40px;
    height: 40px;
    padding: 3px;
    border: 2px solid #e30613;
    text-align: center;
    display: inline-block;
    background-color: #fff;
}

    #fa-arrow-up-container:hover {
        background-color: #e30613;
    }

        #fa-arrow-up-container:hover .fa-arrow-up {
            color: #fff;
        }

/*
    RESPONSIVE
*/
@media screen and (max-width: 1199px) {
    #menu-container {
        position: relative;
        margin-top: 0;
    }

    .navbar a {
        padding-top: 0.75rem;
        padding-bottom: 1.25rem;
    }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    html {
        font-size: 13px !important;
    }

    #footer-box-mecc p:first-child, #footer-box-elet p:first-child {
        font-size: 2.4rem !important;
    }

    #azienda-red-box > .display-3 {
        font-size: 3.2rem;
    }

    .title-container {
        font-size: 2.5rem !important;
    }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    html {
        font-size: 14px !important;
    }

    .title-container {
        font-size: 3.5rem !important;
    }
}

@media (min-width: 576px) and (min-height: 768px) {
    .title-container.hp-title > div {
        font-size: 6rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        font-size: 16px !important;
    }

    .title-container {
        font-size: 4.5rem !important;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
