/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    header {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
    }

    .btn-sez .line {background-color: #C1CAD1;}

    .btn-sez:hover .line,
    .wrap-btn-sez div[class^="col-"]:first-of-type .line {
        background-color: #F0AD12;
    }

    .btn-sez .line::before {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 18px 11px 0 11px;
        border-color: #EFB806 transparent transparent transparent;
        bottom: -18px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: all .3s ease-in-out 0s;
    }

    .btn-sez:hover .line::before,
    .wrap-btn-sez div[class^="col-"]:first-of-type .line::before {
        opacity: 1;
        transition: all .3s ease-in-out 0.1s;
    }

    .btn-sez a {color: #C1CAD1;}

    .btn-sez:hover a,
    .wrap-btn-sez div[class^="col-"]:first-of-type a {color: #4E5F67;}

    .open-realiz .modal-dialog {margin: 100px 0;}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .navbar-expand-md, .navbar-expand-md .navbar-nav {
        display: -ms-flexbox !important;
        display: flex !important;
    }

    #navigation .nav-item.last {
        padding-left: 12px;
        padding-right: 12px;
        border-left: 1px solid #C1CAD1;
    }

    #navigation .nav-link::before {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        display: block;
        width: 100%;
        height: 3px;
        z-index: -1;
        background-color: #4E5F67;
        -webkit-transform: scaleX(.3);
        transform: scaleX(.3);
        opacity: 0;
        transition: all .3s;
    }

    #navigation .nav-link:hover::before {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s;
        transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity;
    }

    #navigation .nav-item.last .nav-link::before {display: none;}

    #navigation .nav-item { padding-bottom: 5px; }

    .navbar-expand-md .navbar-nav .dropdown-menu {
        border-radius: 0;
        border: 0;
    }
    .nav-item .dropdown-menu.show {
        display: none;
    }
    .nav-item .dropdown-menu, .nav-item .dropdown-menu .dropdown-item {
        text-transform: uppercase;
        font-weight: 600;
        font-size: .95rem;
        color: #4E5F67;
    }
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation-duration: 0.5s;
        animation-name: fadeInFromNone;
        animation-fill-mode: forwards;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-name: fadeInFromNone;
        -webkit-animation-fill-mode: forwards;
        -ms-animation-duration: 5s;
        -ms-animation-name: fadeInFromNoneIE;
        -ms-animation-fill-mode: forwards;
        z-index: 99999;
        box-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.15);
        background: rgba(255,255,255, .8);
        margin-top: 0;
    }

    .w-custom {
        max-width: 100%;
        width: 650px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .item-servizio figcaption {
        width: 0;
        opacity: 0;
        transition: all .3s ease-in-out .3s;
    }

    .item-servizio:hover figcaption {
        width: 100%;
        opacity: 1;
        transition: all .3s ease-in-out;
    }

    .item-servizio figcaption .content {
        opacity: 0;
        transform: translateX(-50px);
        transition: all .3s ease-in-out 0s;
    }

    .item-servizio:hover figcaption .content {
        opacity: 1;
        transform: translateX(0);
        transition: all .3s ease-in-out .3s;
    }

    .testata-simple {margin-top: 200px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .pills-buttons .nav-link .icon-plus,
    .pills-buttons .nav-link .icon2 {
        right: 50px;
    }

    .pills-buttons .nav-link .icon2 {
        transform: translate(-10px, -50%);
        right: 65px;
        font-size: 40px;
        transition: opacity .2s ease-in-out 0.1s, transform .2s ease-in-out 0.1s;
    }

    .pills-buttons .nav-link.active .icon2 {
        transform: translate(0, -50%);
    }

    .pills-buttons .nav-link:last-of-type {
        border-bottom: 4px solid #E0E3E5;
    }

    .img-ingranaggi {
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 48vw;
        z-index: -1;
    }

    .box-contatti {
        position: absolute;
        bottom: -40px;
        right: 0;
    }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .wrap-navig {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .testata-home .slider-testata img {
        height: 100vh;
        min-height: 600px;
    }
    footer .bg-gradient::before {
        width: 100vw;
        right: 33% !important;
    }
    .nav-footer.text-uppercase ul li {
        font-size: 1rem;
    }


}

@media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1350px;
    }

    #navigation .nav-link,
    #navigation .nav-item.lingue li a {
        font-size: 18px;
    }

    p, ul li {font-size: 20px;letter-spacing: 0.4px;}

    h3, .h3, .h-h3 h2, .h-h3 h3, .h-h3 h4 {font-size: 50px;}

    h4, .h4, .h-h4 h2, .h-h4 h3, .h-h4 h4 {font-size: 40px;letter-spacing: 0.7px;}

    h6, .h6, .h-h6 h2, .h-h6 h3, .h-h6 h4 {font-size: 30px;letter-spacing: 0.6px;}

    .p-big p, .btn-sez a {font-size: 25px;letter-spacing: 0.5px;}

    header::before {
        height: 400px;
        height: 250px;
        background: rgb(0, 62, 137);
        background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 1) 90%);
        background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 1) 90%);
        background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 1) 90%);
    }

    .form-contatti form input[type="text"],
    .form-contatti form input[type="email"],
    .form-contatti form input[type="phone"],
    .form-contatti form select.form-control,
    .form-contatti form textarea.form-control {
        font-size: 20px;
    }


}

@media (min-width: 1920px) {
    .site-wrap {
        width: 1920px;
        max-width: 100%;
        margin: 0 auto;
    }

    .open-realiz .modal-content {width: 1920px;}

    .img-testata .wrap-img {
        max-height: 1068px;
    }

}

@media (max-width: 1499.98px) {}

@media (max-width: 1399.98px) {

    header .navbar-brand img {
        width: 300px;
        max-width: 100%;
    }

    #navigation .nav-link,
    #navigation .nav-item.lingue li a {font-size: 16px;}

    header::before {height: 200px;}

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {

    #navigation .nav-item {margin-right: 15px;}

    #navigation .nav-link,
    #navigation .nav-item.lingue li a {font-size: 15px;}

    h1, h2, h3, .h-h3 h2, .h-h3 h3, .h-h3 h4 {font-size: 45px;line-height: 50px;}

    .pills-buttons .nav-link {font-size: 40px;}

    h4, .h4, .h-h4 h2, .h-h4 h3, .h-h4 h4 {font-size: 30px;letter-spacing: 0.5px;}

    h5, .h5, .h-h5 h2, .h-h5 h3, .h-h5 h4, .testata .title-page span, .testata span {font-size: 27px;letter-spacing: 0.5px;}

    h6, .h6, .h-h6 h2, .h-h6 h3, .h-h6 h4, .item-step .tit {font-size: 22px;}
    
    .p-big p, .btn-sez a {font-size: 18px;}

    p,
    .btn-simple,
    .nav-footer ul li,
    ul li,
    .btn-square {font-size: 16px;}

    .testata-home .slider-testata img {min-height: 650px;}

    .testata .img-testata img {min-height: 550px;}

    .wrap-navig {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .item-servizio .p-custom-right,
    .item-servizio .p-custom-left {padding: 80px 15px;}

    .pills-content .box-top {padding: 50px 0;}

    .pills-buttons .nav-link {height: 170px;}

    .icon-plus {
        height: 50px;
        width: 50px;
    }

    .sez-sostenib .wrap-content {min-height: 500px;}

    .sez-sostenib::before {width: 58%;}

    .form-contatti form input[type="text"],
    .form-contatti form input[type="email"],
    .form-contatti form input[type="phone"],
    .form-contatti form select.form-control,
    .form-contatti form textarea.form-control {font-size: 16px;}

    footer .mob-white {color: #fff;}

}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    header::before {height: 270px;}

    header .navbar,
    #navigation .navbar-nav {width: 100%; z-index: 100;}

    .wrap-navig {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    h1, h2, h3, .h-h3 h2, .h-h3 h3, .h-h3 h4 {font-size: 40px;line-height: 45px;}

    h4, .h4, .h-h4 h2, .h-h4 h3, .h-h4 h4,
    .pills-buttons .nav-link .icon2,
    .prev-realiz .p-big p b,
    .descr-realiz p b {font-size: 25px;}

    h5, .h5, .h-h5 h2, .h-h5 h3, .h-h5 h4, .testata .title-page span, .testata span {font-size: 22px;letter-spacing: 0.3px;}

    h6, .h6, .h-h6 h2, .h-h6 h3, .h-h6 h4, .item-step .tit {font-size: 20px;}

    .p-big p, .btn-square {font-size: 17px;}

    .btn-sez a {font-size: 15px;}

    .nav-footer ul li, .p-small p, footer p {font-size: 14px;}

    .pills-buttons .nav-link {
        font-size: 30px;
        height: 100px;
    }

    .pills-mobile .nav-link .text-btn {padding-right: 50px;}

    .icon-plus {
        height: 40px;
        width: 40px;
        font-size: 17px;
    }

    .pills-mobile .pills-buttons .nav-link .icon2 {
        font-size: 20px;
        right: 10px;
        top: 55%;
        transform: translate(0, calc(-45% - 10px));
        transition: opacity .2s ease-in-out 0.1s, transform .2s ease-in-out 0.1s;
    }

    .pills-mobile .pills-buttons .nav-link[aria-expanded="true"] .icon2 {
        transform: translate(0, -45%);
    }

    .pills-mobile .pills-buttons:last-of-type {
        border-bottom: 4px solid #E0E3E5;
    }

    img.righe-dx,
    img.righe-sx {
        max-height: 60%;
    }

    /*footer .bg-gradient::before {right: 28%;}*/

    .testata .title-page {padding-bottom: 60px;}

    .img-ingranaggi {
        max-width: 60vw;
        display: block;
        margin-right: 0;
        margin-top: 40px;
        margin-left: auto;
    }

    .box-contatti {
        margin: -20px auto 0;
        padding: 60px;
    }

    .form-contatti form input[type="text"],
    .form-contatti form input[type="email"],
    .form-contatti form input[type="phone"],
    .form-contatti form select.form-control,
    .form-contatti form textarea.form-control {
        padding-left: 15px;
        padding-right: 15px;
        height: 65px;
        font-size: 15px;
    }

    .form-contatti form select.form-control {
        width: 270px;
        max-width: 100%;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .testata-small .img-testata .wrap-img  {
        height: 350px;
    }

    header .navbar-toggler {
        padding: 0;
        position: relative;
        -webkit-transition: all 0.3s ease-in-out, border .2s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out, border .2s ease-in-out 0s;
        transition: all 0.3s ease-in-out, border .2s ease-in-out 0s;
        z-index: 9;
        width: 30px;
        height: 30px;
        border: 0;
    }

    header .navbar-toggler .bar {
        height: 2px;
        width: 25px;
        background-color: #4E5F67;
        margin: 5px auto;
        display: block;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    header .navbar-toggler.opened {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 0.3s ease-in-out, border .3s ease-in-out .2s;
        -o-transition: all 0.3s ease-in-out, border .3s ease-in-out .2s;
        transition: all 0.3s ease-in-out, border .3s ease-in-out .2s;
    }

    header .navbar-toggler.opened .bar:nth-child(2) {
        opacity: 0;
    }

    header .navbar-toggler.opened .bar:nth-child(1) {
        -webkit-transform: translateY(7px);
        -ms-transform: translateY(7px);
        -o-transform: translateY(7px);
        transform: translateY(7px);
    }

    header .navbar-toggler.opened .bar:nth-child(3) {
        -webkit-transform: translateY(-7px) rotate(90deg);
        -ms-transform: translateY(-7px) rotate(90deg);
        -o-transform: translateY(-7px) rotate(90deg);
        transform: translateY(-7px) rotate(90deg);
    }

    #navigation .sidebar {
        display: inline-block;
        max-width: 100%;
        z-index: 4;
        padding: 140px 50px 50px;
        position: fixed !important;
        top: -102%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        height: 100vh;
        overflow: auto;
        visibility: hidden;
        opacity: 0;
        transition: opacity .4s linear .1s, top .4s linear 0s;
    }

    #navigation .sidebar.open-nav {
        top: 0;
        visibility: visible;
        opacity: 1;
    }

    #navigation .navbar-nav .nav-item {
        margin-right: 0;
        margin-bottom: 15px;
        text-align: center;
    }

    #navigation .navbar-nav .nav-item .nav-link {
        display: inline-block;
        font-size: 15px;
        position: relative;
    }

    .nav-item .dropdown-menu {
        border: none;
        border-radius: 0;
        text-align: center;
        text-transform: uppercase;
        background: transparent;
        display: block !important;
        font-size: .85rem;
        padding-top: 0;
        padding-bottom: 0;
        font-weight: 600 !important;
    }
    .nav-item .dropdown-menu .dropdown-item {
        font-weight: 600 !important;
        color: #4E5F67;
    }
    .nav-item .dropdown-menu .dropdown-item:hover,
    .nav-item .dropdown-menu .dropdown-item:focus,
    .nav-item .dropdown-menu .dropdown-item:active {
        background: transparent;
        color: inherit;
    }

    .navbar-brand {
        z-index: 5;
        position: relative;
    }

    header .navbar-brand img {
        width: 260px;
    }
    header::before {
        height: 200px;
    }

    #navigation .navbar-nav .nav-item.last:nth-last-of-type(3) .nav-link {
        margin-top: 15px;
        padding-top: 15px;
    }

    #navigation .navbar-nav .nav-item.last:nth-last-of-type(3) .nav-link::before {
        position: absolute;
        content: "";
        height: 1px;
        width: calc(100% + 30px);
        left: -15px;
        background-color: #4E5F67;
        top: 0;
    }

    .testata-home .slider-testata img {height: 700px;}

    .testata-home .slider-testata img {
        object-position: 85% 100%;
    }

    .item-servizio .wrap-img img,
    .chisiamo-row .col-big .wrap-img img {height: 300px;}

    .item-servizio figcaption .content {text-align: center;}

    .item-servizio figcaption .content .icon-plus {margin: 0 auto;}

    .chisiamo-row .title-abs {
        right: auto;
        left: 15px;
        padding-bottom: 0;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    footer .bg-gradient::before {right: 0;}

    footer .logo {width: 250px;}
    
    h1, h2, h3, .h-h3 h2, .h-h3 h3, .h-h3 h4 {font-size: 36px;}

    h5, .testata .title-page span, .testata span {font-size: 20px;}

    .item-step {
        width: 350px;
        max-width: 100%;
    }

    .sez-sostenib::before {display: none;}

    .sez-sostenib .content {
        background-color: rgba(255, 255, 255, 0.9);
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .img-ingranaggi {max-width: 75vw;}

    .form-contatti form .form-check label.big {font-size: 14px;}

    .form-contatti form .form-check label {font-size: 12px;}

    .form-contatti form select.form-control {width: 100%;}

    .open-realiz .slider-realiz, .open-realiz .slider-realiz.slick-slider .slick-list {height: auto!important;}

    .slider-realiz .wrap-img {display: block; width: 100%; height: auto;}
    .slider-realiz .wrap-img img {display: block; object-fit: none; width: 100%; height: auto;}

    .open-realiz button.close {
        color: #fff;
        opacity: 1;
        text-shadow: 0px 1px 3px rgb(0, 0, 0, .8);
    }

    .open-realiz .slider-realiz .slick-prev::before,
    .open-realiz .slider-realiz .slick-next::before {font-size: 30px;}

    .testata-simple {margin-top: 120px;}
    
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    .testata-simple {margin-top: 0;}
    header::before {
        height: 100%;
        background-color: #fff;
    }

    .testata-home,
    .testata-home .slider-testata,
    .testata-home .slider-testata .slick-track {
        height: 500px;
    }

    .testata-home .slider-testata img {
        min-height: 0;
        height: auto;
        object-position: 80% 100%;
    }

    .testata-small .img-testata .wrap-img  {
        height: 250px;
    }

    header .navbar-brand img {width: 200px;}

    /*.testata-home .slider-testata img {min-height: 550px;}*/

    .testata .img-testata img {min-height: 450px;}

    h1, h2, h3, .h-h3 h2, .h-h3 h3, .h-h3 h4 {font-size: 30px;line-height: 35px;}

    .pills-buttons .nav-link {font-size: 24px;}

    h4, .h4, .h-h4 h2, .h-h4 h3, .h-h4 h4 {font-size: 20px;}

    h5, .h5, .h-h5 h2, .h-h5 h3, .h-h5 h4, .testata .title-page span, .testata span {font-size: 18px;}

    h6, .h6, .h-h6 h2, .h-h6 h3, .h-h6 h4, .item-step .tit {font-size: 17px;}

    .p-big p {font-size: 16px;}

    p, .btn-simple, ul li {font-size: 15px;}

    .nav-footer ul li,
    .p-small p,
    footer p,
    .mybcrumb .breadcrumb li {font-size: 13px;}

    .pills-mobile .pills-buttons .wrap-img img {min-height: 250px;}

    img.righe-dx, img.righe-sx {max-height: 40%;}

    .nav-footer ul li {margin-bottom: 8px;}

    .item-step .icon {height: 75px;}

    .list-custom ul li {padding-left: 20px;}

    .list-custom ul li::before {
        border-width: 0px 0 10px 10px;
        top: 6px;
    }

    .box-contatti {
        padding-left: 20px;
        padding-right: 20px;
    }

    .open-realiz .slider-realiz .slick-prev {left: 15px;}
    .open-realiz .slider-realiz .slick-next {right: 15px;}

    .open-realiz .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

}