.color-g{color: #4cc14f !important;} /*verde - sostenibilità */
.color-y{color: #e2a100 !important;} /*giallo - innovazione*/
.color-p{color: #ea60a2 !important;} /*rosa - persone*/
.color-purple{color: #FF137D !important;} /*magenta -  lavora con noi*/
.color-o{color:#FF8025 !important;} /*arancione - */
.color-b{color: #30c6c6 !important;} /*turchese - comunicazione*/

.border-g {border: 3px solid #4cc14f}
.border-y {border: 3px solid #e2a100}
.border-p{border: 3px solid #ea60a2}
.border-purple{border: 3px solid #FF137D}
.border-o{border: 3px solid #FF8025}
.border-b{border: 3px solid #30c6c6}

.bg-g{background-color: #4cc14f; color: #fff}
.bg-y{background-color: #e2a100; color: #fff}
.bg-p{background-color: #ea60a2; color: #fff}
.bg-purple{background-color: #FF137D;color: #fff}
.bg-o{background-color:#FF8025; color: #fff}
.bg-b{background-color: #30c6c6; color: #fff}
.bg-brand{background-color: #003082 !important; color: #fff}


.color-brand{color: #003082 !important;}
.color-white{color: #fff !important;}

.border-brand{border: 3px solid #003082}
.border-white{border: 3px solid #fff}

.bg-brand{background-color: #003082; color: #fff}

b, strong {
    font-weight: 600;
}
@media(max-width:490px){
    .slick-slide{max-width: 95vw;min-width: 300px}
}

a,a:hover{text-decoration: none}
.btn {font-size: inherit;}
.btn-brand{position: relative; font-weight: bold; line-height: 25px; transition: all 0.3s}
.btn-brand span{margin-bottom:-7px;line-height:22px;transition: all 0.3s; transform-origin: center center;transform-style: preserve-3d;display: inline-block; width: 25px;height:25px; text-align: center ; position: relative }
.btn-brand:hover span{transform: rotate(-90deg);}
.btn-brand span:after{content: '+';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: inherit;}
h3.bordered{font-weight: 700;display: inline-block;position: relative; margin-bottom: 30px}
h3.bordered:after{content: "";position: absolute;bottom: -8px; left: 0px; height: 2px;width: 50px; background-color:#003082 }
h3.bordered.color-p:after{background-color:#ea60a2 }
.my-7{margin-top: 5rem !important; margin-bottom: 5rem !important;}
.py-7{padding-top: 5rem !important; padding-bottom: 5rem !important;}
.py-8{padding-top: 6rem !important; padding-bottom: 6rem !important;}
.py-9{padding-top: 7rem !important; padding-bottom: 7rem !important;}
.pt-6{padding-top: 4rem !important;}
.pt-7{padding-top: 5rem !important;}
.pb-7{padding-bottom: 5rem !important;}
.pt-8{padding-top: 6rem !important;}
.pt-9{padding-top: 7rem !important;}
.mt-n7{margin-top: -5rem !important;}
@media (min-width: 992px) {
    .pt-lg-9{padding-top: 7rem !important;}
    .py-lg-6{padding-top: 5rem !important;; padding-bottom: 5rem !important;}
    .py-lg-7{padding-top: 6rem !important;; padding-bottom: 6rem !important;}
    .py-lg-8{padding-top: 7rem !important;; padding-bottom: 7rem !important;}
    .py-lg-9{padding-top: 8rem !important;; padding-bottom: 8rem !important;}
    .mt-lg-n7{margin-top: -6rem !important;}
    .mb-lg-n7{margin-bottom: -6rem !important;}
    .pb-lg-0{padding-bottom: 0px !important;}
    .pt-lg-0{padding-top: 0px !important;}
    .mt-lg-0{margin-top: 0px !important;}
}

.section-title{font-size: 36px; font-weight: bolder;color:  #003082; text-transform: uppercase}
.section-title > span {display: inline-block; position: relative; letter-spacing: 0.25px}
.section-title > span:first-child{color: #fff;-webkit-text-stroke: 2px #003082;}
.archive .section-title > span:first-child,
.stabilimenti .section-title > span:first-child,
.dinastia .section-title > span:first-child {-webkit-text-stroke: 0px #003082;}

@media(min-width: 400px){
    .section-title{font-size: 50px; line-height: 40px}
    .section-title > span {letter-spacing: 1px}
    .section-title > span:last-child{top: 35px; padding-bottom: 30px}
}
@media(min-width: 992px){
    .section-title{font-size: 70px; line-height: 60px}
    .section-title > span {letter-spacing: 2px}
    .section-title > span:last-child{top: 50px; padding-bottom: 40px}
}


.z-2{position: relative;z-index: 2}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-weight: 700 !important;display: inline-block;}
.h1 {font-size: 2.15rem; font-weight: 700}
.h2 {font-size: 1.45rem; font-weight: 700; font-style: italic; line-height: 2.4rem}
.h3, h3 {
    font-size: 1.35rem;
}
.h2, h2 {
    font-size: 1.45rem;
}

.homepage .h1{font-size: 2rem; font-weight: 700}

img.lazy{opacity: 0; transition: all 0.5s}
img.entered,img.loaded{opacity: 1;}
.small{font-size: 3rem}
.paragraph {font-size: 20px;font-weight: 300 !important;}

@media(min-width: 992px){
    .h1{font-size: 3.6rem}
    .h2, h2{font-size: 1.8rem; line-height: 2.8rem}
    .h3, h3 {
        font-size: 1.75rem;
    }
    .mw-lg-60{max-width: 60%}
}
body{
    font-family: "fieldwork", sans-serif;
    font-size: 17px;
    font-weight: 300;
    font-style: normal;
    overflow-x: hidden;
    width: 100%;
    color: #003082;
}
footer{font-size: 12px}
footer img{max-width: 70% !important;}
footer a,footer a:hover{color: #fff !important;}
footer .share a{line-height: 14px;}
footer .share a img{vertical-align: bottom}
footer p{line-height: 20px; margin-bottom: 0px}
footer strong{font-size: 15px;}
ul{padding-left: 0px}
body.menu-active{overflow: hidden}
header{z-index: 100;position: fixed;width: 100%; top: 0px; transition: all 0.5s}
body.menu-active header{position: fixed !important;}
.menu-closer{display: none; font-size: 1.4rem}
.main-logo{max-width: 140px; padding: 10px 0px; transition: all 0.5s}
body.scrolled .main-logo{max-width: 100px; padding: 7px 0px}
body.scrolled:not(.menu-active) header{background-color: rgba(0, 76, 147,0.5)}
#main-menu{position: relative;z-index: 90; height: 60px}
#main-menu-wrapper{background-color: #003082;position: fixed; z-index: 80;width: 100%;height: 100vh; transition: all 0.5s; top: 0px; left: 0px; color: #fff; left: 100vw; opacity: 0}
body.menu-active #main-menu-wrapper{left: 0px !important;opacity: 1}
body.menu-active .menu-handler.menu-closer{display: block}
body.menu-active .menu-handler{display: none}
#main-menu a,#main-menu-wrapper a{color: #fff; text-decoration: none}
.lang-switch a{opacity: 0.3; text-transform: uppercase}
.lang-switch a.active{opacity: 1}
#main-menu-wrapper ul:first-child{font-size: 2.4rem; font-weight: bold;line-height: 4rem}
#main-menu-wrapper ul:first-child ul{font-size: 1.4rem; line-height: 2rem}
@media(min-width: 992px){
    #main-menu-wrapper ul:first-child{font-size: 3.8rem;line-height: 8rem}
    #main-menu-wrapper ul:first-child ul{font-size: 1.6rem; line-height: 2.8rem;}
    #sutter_meets_submenu{display: block !important;padding-left: 0px; position: absolute !important;bottom: -30px;}
    #sutter_meets_submenu li{display: inline-block; margin-right: 30px; position: relative; overflow: hidden}
    #sutter_meets_submenu li a{transition: all 0.5s; transform: translateX(300px); display: block}
    #sutter_meets_submenu.active li a{ transform: translateX(0px)}
    .bottom-menu{padding-top: 2.6rem !important;}
    .bottom-menu li{display: inline-block; margin-right: 20px;}
}
@media(max-height: 600px) and (min-width: 992px){
    #main-menu-wrapper ul:first-child{font-size: 3.2rem;line-height: 6rem}
    .bottom-menu{padding-top: 1.6rem !important;}

}
div[data-bg]{background-size: cover;background-repeat: no-repeat}
.black-over{position: relative}
.black-over:after{content:"";position: absolute;top: 0px; left: 0px;width: 100%;height: 100%; background-color: rgba(0,0,0,.3); }
.opacity-04{opacity: 0.4}
#main-stripe{
    position: relative;
    height: 100vh;
    overflow: hidden;
    /*background: url(../img/home/main_bg.webp) no-repeat center;background-size: cover;*/
}
#main-stripe:before{content: "";position: absolute; top: 0px;left: 0px;width: 100%; height: 100%;background: url(../img/hero-home-suttercorporate.webp) no-repeat center;background-size: cover}
@media (min-width: 992px) {
    #main-stripe{max-height: 860px;}
}
@media (max-height: 590px) {
    #main-stripe{min-height: 590px !important;}
}
@media (max-width: 560px) and (max-height: 840px) {
    #main-stripe{height: 840px !important;}
}
[data-bg]{background-size: cover;background-position: center}
#main-stripe::after{content:'';position: absolute; z-index: 1;width: 100%;height: 100%; background-color: rgba(0,0,0,0.1); top: 0px}
ul{list-style-type: none}
.apici,.line-l{position: relative; border-left: 3px solid #fff; padding: 0px 1.5rem; width: 100%; margin: 60px auto 0px; margin-left: -3px}
.apici:after{content: "";background-image: url(../img/apici.svg); width: 60px; height: 120px;position: absolute; top: -70px;left: -20px;background-size: contain;background-repeat: no-repeat}
.apici:before{content: "";background-image: url(../img/apici.svg); width: 60px; height: 120px;position: absolute; bottom: -85px;right: -40px;background-size: contain;background-repeat: no-repeat}
.border-brand-l{border-left: 3px solid #003082;padding-left: 25px}
@media(min-width: 500px){
    .apici:after{ top: -60px;left: -60px;}
    .apici:before{ bottom: -75px;right: -60px;}


}
@media (max-width: 991px) {
    .home-slider-1 .imgs img {
        margin-bottom: 30px;
        
    }
    .home-slider-1{padding-bottom: 85px;}
}
@media (min-width: 992px) {
    .home-slider-1 .imgs div:first-child img:first-child{margin-top: -5rem;margin-bottom: 3rem}
    .home-slider-1 .imgs div:nth-child(2) img:first-child {
        margin-bottom: 3rem;
    }
    .home-slider-1 .imgs div:nth-child(2) img:nth-child(2) {
        margin-bottom: -5rem;
    }

}

.b-in{position: relative;display: inline-block;-webkit-box-shadow: 0px 2px 9px 4px #B5B5B5;
    -moz-box-shadow: 0px 2px 9px 4px #B5B5B5;
    -o-box-shadow: 0px 2px 9px 4px #B5B5B5;
    box-shadow: 0px 2px 9px 4px #B5B5B5;}
.b-in .label{position: absolute; bottom: 0px;left: 0px;z-index: 5; background-color: #fff; padding: 0px 20px 10px 6px; display: block}
.b-in:after{content: "";display: block;width: calc(100% - 30px);height: calc(100% - 30px); top: 0px; left: 0px;z-index: 2; position: absolute; margin: 15px; transition: all 0.5s}
.b-in:hover:after{transform: scale(1.1) rotate(5deg) !important; }
.b-in.b-g:after{border: 3px solid #4cc14f}
.b-in.b-y:after{border: 3px solid #e2a100}
.b-in.b-p:after{border: 3px solid #ea60a2}
.b-in.b-b:after{border: 3px solid #30c6c6}
.b-in.b-grey:after{border: 3px solid #B9B5AD}
.b-in.b-blue:after{border: 3px solid #003082}




.side-controller{transition: all 0.5s}
.side-controller ul{position: absolute; top: 60px;right: 0px;  z-index: 3; text-align: right}
@media(min-width: 991px){
    .side-controller ul{top: 50%;right: 0px; transform: translateY(-50%);}

}
.side-controller ul a{color: #fff !important;font-size: 26px; line-height: 36px;font-weight: bold; display: inline-block; padding-right: 56px; position: relative; opacity: 0.4; transition: all 0.4s}
.side-controller ul a:after{content: "";position: absolute; right: 0px; top: calc(50% + 3px);height: 3px; width: 48px; background-color: #fff}
.side-controller ul a.active,.side-controller a:hover{opacity: 1}
.side-controller .content{height: 0px;overflow: hidden; transition: all 0.5s; opacity: 0}
.side-controller .content:not(.active){padding: 0px !important;}
.side-controller .content.active{ height: auto; opacity: 1}
#home-time-line{position: absolute; right: 20px; top:0px;z-index: 3;text-align: center; height: 100%;padding: 2% 0px}
#home-time-line span{color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #fff;font-size: 55px; display: block; height: 100px}
.color-transp{-webkit-text-stroke:2px #B9B5AD; color: #fff}
#home-time-line span.line{width: 5px;height: 20px;border: 1px solid #fff;margin: auto; height: calc(100% - 200px)}
@media(max-width: 991px){
    #home-time-line{transform: rotate(-90deg); transform-origin: top left; right: auto; left: 0px;height: 98vw; top: 15%;padding: 1vw 0px; }
    #home-time-line > span:not(.line){transform: rotate(90deg); font-size: 30px}
    #home-time-line span.line{transform: translateX(25px)}
}

.left-bg-brand{position: relative}
.left-bg-brand:after{content:"";position: absolute; background-color:#003082;height: 100%;width: 500px;left: -500px; top: 0px }

.box-slick .slick-list{overflow:visible;clip-path: inset( -100vw -100vw -100vw 0 );}
.slick-arrow{top: 90%; right: auto;left: 30px; z-index: 9999;}
.slick-next:before, .slick-prev:before{color: #003082; opacity: 1;font-size: 50px; font-weight: 700 }
.slick-prev:before{content: "\2039"; height: 50px;}
.slick-next:before{content: "\203A"; height: 50px;}
.slick-next{left: 70px}

@media(max-width: 580px){
    .box-slick {margin: 0px !important }
}

.focus span:after{content: '+';
    display: inline;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform-origin: inherit;
    font-weight: 300;
    margin-right: 20px;
}

h3.focus {margin-left: 35px;}
h3.focus span{margin-left: -35px;}


.square {width: 260px; height: 260px; margin: auto;}
.square a {width: 98%; height: 98%; margin: auto;}
.square .b-in {box-shadow: none;}

@media(min-width: 768px) and (max-width : 991px){
    .square {width: 230px; height: 260px; margin: auto;}
}
@media(min-width: 992px){
    .square {width: 250px; height: 250px; margin: auto;}
}

/*.sostenibilita .square {text-transform: uppercase;}*/

.comunicazione #main-stripe:before{background: url(../img/hero-comunicazione.webp) no-repeat center;background-size: cover}
.left-bg-b:after {
    content: "";
    position: absolute;
    background-color: #30c6c6;
    height: 100%;
    width: 500px;
    left: -480px;
    top: 0px;
}


.persone #main-stripe:before{background: url(../img/hero-persone.webp) no-repeat center;background-size: cover}
.left-bg-p:after {
    content: "";
    position: absolute;
    background-color: #ea60a2;
    height: 100%;
    width: 500px;
    left: -480px;
    top: 0px;
}

.innovazione #main-stripe:before{background: url(../img/hero-innovazione.webp) no-repeat center;background-size: cover}
.left-bg-y:after {
    content: "";
    position: absolute;
    background-color: #e2a100;
    height: 100%;
    width: 500px;
    left: -480px;
    top: 0px;
}

.sostenibilita #main-stripe:before{background: url(../img/hero-sostenibilita.webp) no-repeat center;background-size: cover}

.numbers{font-size: 4rem; line-height: 4.5rem; font-weight: 600; margin: 0;}
.numbers_label{font-size: 1rem;}
.numbers_label .big{font-size: 1.8rem;}

@media(min-width: 992px){
    .numbers{font-size: 5.5rem; line-height: 6rem; font-weight: 600;}
    .numbers_label{font-size: 1.5rem;}
    .numbers_label .big{font-size: 2.3rem;}
}

.hero-box-left{padding-top: 4rem;}
.hero-box-right{padding-top: 0;}
.hero-box-right .paragraph{ padding-left: 35px; }

.icon-box {background-size: 150px; background-position: top right; background-repeat: no-repeat;}
@media(min-width: 992px){
    .hero-box-right{margin-top: 4rem;}
    .icon-box {background-size: 200px; background-position: top right 3rem;}
}

/*.sostenibilita .modal {padding: 0px !important;}
.sostenibilita .modal-header{border-bottom: 0px;}
.sostenibilita .modal-dialog, .sostenibilita .modal-content{border-radius: 0 !important; margin: 0;}
.sostenibilita .modal-backdrop.show {opacity: 0;}
.sostenibilita .close {color: #fff;opacity: 1 !important; text-shadow: none;}

@media (min-width: 576px){
    .sostenibilita .modal-content {height: 100% !important; min-height: 100vh!important;}
    .sostenibilita .modal-dialog {max-width: 100%;}
}*/
.squarewrapper .square {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: rotate(30deg);
}

.csscircle {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 100%;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.circle8innerlarge:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 1000px;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.segmentwrapper {
    position: absolute;
    top: 49%;
    left: 49%;
    width: 2%;
    height: 2%;

}
.squarewrapper .center-label{
    position: absolute;text-align: center;top: 50%;left: 50%;width: 50%;transform: translate(-50%, -50%);z-index: 999;
}
/*.squarewrapper .center-label img{max-width: 32%}*/
.circle8innerlarge .segment1 {
    transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -moz-tranform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    opacity: 0.20;
}
.circle8innerlarge .segment2 {
    transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -moz-tranform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    opacity: 0.36;
}
.circle8innerlarge .segment3 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-tranform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    opacity: 0.52;
}
.circle8innerlarge .segment4 {
    transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    -moz-tranform: rotate(240deg);
    -webkit-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    opacity: 0.68;
}
.circle8innerlarge .segment5 {
    transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    -moz-tranform: rotate(300deg);
    -webkit-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    opacity: 0.84;
}

.circle8innerlarge .segment6 {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-tranform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.circle8innerlarge .segment {
    transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    -moz-tranform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    -o-transform: skewX(30deg);
}
.segment, .segment .inner {
    position: absolute;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.segment {
    bottom: 50%;
    right: 50%;
    width: 5000%;
    height: 5000%;
    overflow: hidden;
    transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
}
.circle8innerlarge .segment .inner {
    transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    -moz-tranform: skewX(-30deg);
    -webkit-transform: skewX(-30deg) scale(1.1);
    -o-transform: skewX(-30deg);
}

.segment .inner {
    right: -50%;
    bottom: -50%;
    width: 100%;
    height: 100%;
    background: #4CC14F;
    border-radius: 100%;
    transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    cursor: pointer;
}
.segment, .segment .inner {
    position: absolute;
    transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
}
.squarewrapper {
    position: relative;
    padding-bottom: 100%;
    height: 0;
}


.circle8innerlarge .segment:hover .inner {
    transform: skewX(-30deg) scale(1) !important;
    -ms-transform: skewX(-30deg) scale(1) !important;
    -moz-tranform: skewX(-30deg) scale(1.1) !important;
    -webkit-transform: skewX(-30deg) scale(1) !important;
    -o-transform: skewX(-30deg) scale(1.1) !important;
}

.center-label .links{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%)}
/*.center-label .links a{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: all 0.5s}
.center-label .links a.active{opacity: 1}*/
.center-label .links a{position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%); opacity: 0.5; transition: all 0.5s}
.center-label .links a.active {opacity: 1}
.center-label .links a:hover {opacity: 1}
.squarewrapper .guide{transition: all 0.5s; z-index: 1}
.squarewrapper .guide{position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%); width: 50%}
@media(max-width: 990px) {
    .squarewrapper .guide.slide-up{transform: translateY(-100%) scale(0);opacity: 0}
}



@media(min-width: 991px){
    .center-label .links a{transform: translate(0,0); left: auto !important;font-size: 25px}
    .center-label .links a[data-link="segment1"]{top: 10%;left: 86% !important; transform: translateY(-50%)}
    .center-label .links a[data-link="segment2"]{top: 50%;left: 100% !important; transform: translateY(-50%)}
    .center-label .links a[data-link="segment3"]{top: 85%;left: 86% !important; transform: translateY(-50%)}
    .center-label .links a[data-link="segment6"]{top: 10%;right: 86% !important; transform: translateY(-50%)}
    .center-label .links a[data-link="segment5"]{top: 50%;right: 100% !important; transform: translateY(-50%)}
    .center-label .links a[data-link="segment4"]{top: 85%;right: 86% !important; transform: translateY(-50%)}
    .center-label .links{position: absolute;left: 0%;top: 0%; transform: translate(0%,0%); width: 100%; height: 100%}
    .squarewrapper .center-label{width: 100%; height: 100%}

    .squarewrapper .center-label{z-index: 0}
}
/*svg.circle >g>g>path{transition: all 0.3s;transform-origin: top left}
svg.circle >g>g:hover>path{scale:0.8}*/
.tabs-content > div{/*max-height: 0;*/ 
    height: 0;
    transition: max-height 0.4s ease-out;
    overflow: hidden;
    }
.tabs-content > div.active{
    /*max-height: 700px;*/
    height: auto;
}
.tab-handler a *{transition: all 0.5s}
.tab-handler a:hover img{transform: scale(1.2)}
/*.tab-handler a:hover span{transform: translateX(20px)}*/
.people{position: relative; overflow: hidden}
.people .label{position: absolute;bottom: -40px; left: 0px; display: inline-block;padding: 2px 20px 2px 05px;background-color: #fff; z-index: 3; transition: all 0.5s}
.people:hover img{scale: 1.1; rotate: 1deg}
.people:hover .label{bottom: 0px}



.wide .modal {padding: 0px !important;}
.wide .modal-header{border-bottom: 0px;}
.wide .modal-dialog, .wide .modal-content{border-radius: 0 !important; margin: 0; min-height: 100vh }
.wide .modal-backdrop.show {opacity: 0;}
.wide .close,
.modal .close  {color: #fff;opacity: 1 !important; text-shadow: none;}

@media (min-width: 576px){
    .wide .modal-content {height: auto !important; min-height: 100vh!important;}
    .wide .modal-dialog {max-width: 100%;}
}


.storia #main-stripe:before{background: url(../img/hero-storia.webp) no-repeat center;background-size: cover}
.timeline-start{width: 3px;background-color: #003082; height: 0px; position: absolute; right: 30px}
.timeline-item .year{font-size: 80px; font-weight: 700}
.timeline-item .text{font-size: 20px}
.timeline-item .img{}

#timeline-items .timeline-item .cont >div{
    max-width: calc(100% - 40px);
}

#timeline-items .back-cover{display: none}
#timeline-items .timeline-item .cont > div{width: 100%}
@media(min-width: 991px){
    .timeline-item > div{padding: 80px 0px}

    .timeline-start{left: 50%; right: auto}
    #timeline-items .timeline-item .cont >div{max-width: 70%}
    #timeline-items .timeline-item:nth-child(odd) .img{
        margin-left: -18%;
    }
    #timeline-items .timeline-item:nth-child(even) .img {
        margin-right: -18%;
    }
    #timeline-items .timeline-item:nth-child(even) .cont >*{
        text-align: right;float: right
    }


    #timeline-items .timeline-item:nth-child(even) >div:first-child{order: 2}

    #timeline-items .back-cover{display: block; position: absolute;top: 50%;width: calc(100vw / 2);left: 10%;z-index: -1; transform: translateY(-50%)}
    #timeline-items .timeline-item:nth-child(even) .back-cover{
        left: auto;right: 10%;
    }

}

#time-bar{position: absolute; bottom: 0px; left: 0px; width: 100%; z-index: 5;transition: all 0.3s; height: 60px; overflow: hidden; transition: all 0.5s}
#time-items-wrapper{width: 30000px; transition: all 0.4s}
#time-items-wrapper > div{ opacity: 0.6; font-size: 25px; padding-right: 80px; position: relative; float: left; height: 60px; line-height: 60px; text-align: center}
#time-items-wrapper > div a{display: block; width: 80px; text-align: center}
#time-items-wrapper > div:first-child{padding-left: 15px}
#time-items-wrapper > div.active{opacity: 1}
#time-items-wrapper > div a{color: #fff;}
#time-items-wrapper > div:after{content: "";position: absolute;width: 40px;background-color: rgba(255,255,255,.5);height: 2px;top: 50%; right: 20px}

#time-bar.closed{opacity: 0;  overflow: hidden; transform: translateY(100px)}


#globeContainer{max-width: 900px; margin: auto}
.square-ul{color:#003082 }
.square-ul span{display: inline-block;width: 20px;height: 20px; margin-right: 5px; vertical-align: bottom}
#globeLegend{margin-top: -40px;}
#globeWrapper{height: 0px; overflow: hidden}
#globeWrapper.active{height: auto}
#pinModal .filiale > div:first-child{padding: 10px 20px; text-align: center}
#pinModal .filiale > div:last-child{padding: 25px 20px; }
#pinModal .close{position: absolute; right: 5px; top:5px; z-index: 3}
#pinModal .close span{opacity: 1;color: #fff;font-weight: 300}
#pinModal .modal-body{padding: 0px}
#pinModal  .modal-content{border-radius: 0}

body.legal:not(.menu-active) header,
body.jobs:not(.menu-active) header,
body.contacts:not(.menu-active) header,
body.certifications:not(.menu-active) header,
body.sostenibilita-in:not(.menu-active) header {background-color:rgba(0, 76, 147,0.5)}


body.legal .main-logo,
body.jobs .main-logo,
body.contacts .main-logo,
body.certifications .main-logo,
body.sostenibilita-in .main-logo{max-width: 100px; padding: 7px 0px}
/*body.sostenibilita-in:not(.menu-active) header {background-color:rgba(76, 193, 79,0.5)}*/

.box-slick .slick-slide{height: auto}


.storia .menu{position: absolute;z-index: 6;width: 100%;bottom: 60px}
.storia .menu > div{padding: 0px}
.storia .menu a{color: #fff;width: 100%; height: 60px; line-height: 60px;border: 2px solid #fff; display: block; font-weight: 700}
.dynasty-time-line img {
    max-width: 100%
}
@media(min-width: 991px) {
    .dynasty-time-line img {
        max-width: 220px !important;
    }
}
.t-line{width: 80%;margin: auto;border-top:3px solid #fff;position: absolute;height: 50%; top: 50%}
.t-line:after{content: "";position: absolute;left: calc(50% - 1.5px);width: 3px; background-color: #fff; height: calc(100% + 10rem - 30px)}
.horiz-line{width: calc(100% + 20px); height: 3px;background-color: #fff;position: absolute;top: 50%;}
.verti-line{height: calc(10rem - 40px); width: 3px;background-color: #fff;position: absolute;top:calc(100% + 20px);left: calc(50% - 2px) }

input, select, textarea {
    height: 60px;
    width: 100%;
    font-size: 0.9rem;
    margin-bottom: 10px;
    background: transparent;
    border: 0px;
    border-bottom: 2px solid #fff;
    color: #fff;
    border-radius: 0px;
    padding: 0 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
input::placeholder, textarea::placeholder {
    color: #fff;
    opacity: 0.5;
}
input[type=checkbox], input[type=radio] {
    width: 15px; height: 15px;
}

#pinModal {top: 5%; padding-bottom: 5%;}

#pinModal .filiale > div.type{    padding: 10px 20px;
    text-align: center;}

.hover-layer{position: absolute;top: 0px;left: 0px;width: 100%; height: 100%; z-index: 1; transition: all 0.5s; opacity: 0}
.b-in:hover .hover-layer{opacity: 1}
.hover-layer > *{position: absolute;top: 50%;transform: translate(-50%,-50%);left: 50%;max-width: 55%; display: block}
.hover-layer > p{max-width: 80%; width: 80%}
.bg-sutter-casa{background-color: rgba(255,255,255,0.6)}

.bg-sutter-pro {
    background-image: linear-gradient(to right,rgba(0, 71, 135,0.6),#005e82,rgba(0, 94, 130,0.6),rgba(0, 110, 123,0.6),rgba(0, 117, 117,0.6));
}

.bg-brand-07{background-color: rgba(0, 71, 147,0.9); color: #fff}
.bg-grey-07{background-color: rgba(90, 90, 90,0.9); color: #fff}

.dinasty-label, 
.stabilimenti-label {position: absolute; font-size: 45px; top: -22px; font-weight:700; left: 50%;
    transform: translateX(-50%); color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #fff; display: block; z-index: -1}
.stabilimenti-label{top: -76px;}


@media (min-width: 450px) and (max-width: 541px) {
    .dinasty-label, .stabilimenti-label {
        font-size: 60px; top: -26px;
    }
}
@media (min-width: 542px) and (max-width: 991px) {
    .dinasty-label, .stabilimenti-label {
        font-size: 85px; top: -56px;
    }
}
@media (min-width: 992px) {
    .dinasty-label {font-size: 140px; top: -76px;}
    .stabilimenti-label{font-size: 85px; top: -76px;}
}

.stabilimenti .horiz-line{left: 0px; width: 100%}
/*.stabilimenti-label{position: absolute; font-size: 24px; top:-10px; font-weight: 500; color: #fff; text-align: center; width: 100%; left: 0}*/



/*
#gallery-lightbox{
    position: fixed;z-index: 10;background-color: #003082;width: 100%; height: 100%;top: 0px;left: 0px;transform: translateY(-2000px);transition: all 0.5s;opacity: 0;
}
#gallery-lightbox.active{transform: translateY(0); opacity: 1}
*/
#gallery-lightbox{padding-right: 0px !important;}
#gallery-lightbox .title{color: #fff}

#gallery-lightbox .slick-next:before, #gallery-lightbox .slick-prev:before{color: #fff;font-size: 66px}
#gallery-lightbox .slick-arrow{top: 50%; z-index: 10; transform: translateY(-50%)}
#gallery-lightbox .video-cont{max-width: 900px}
#gallery-lightbox .slick-next{left: unset; right: 5px}
#gallery-lightbox .slick-prev{left: 5px}

a{cursor: pointer}

#gallery-lightbox .modal {padding: 0px !important;}
#gallery-lightbox .modal-header{border-bottom: 0px;}
#gallery-lightbox .modal-dialog, .comunicazione .modal-content{border-radius: 0 !important; margin: 0;}
#gallery-lightbox .modal-backdrop.show {opacity: 0;}

#gallery-lightbox .modal-content {/*height: 100% !important; */min-height: 100vh!important; overflow: auto;}

#gallery-lightbox .modal-content {height: 100% !important; min-height: 100vh!important;border: 0px}
#gallery-lightbox .modal-dialog {max-width: 100%;}

#gallery-lightbox .container {
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 auto;
}
.gallery-modal{cursor: pointer}
#gallery-lightbox img {max-height: 450px; max-width: 80%/*max-width: 850px*/}

@media (min-height: 650px) and (min-width: 991px) {
    #gallery-lightbox img {max-height: 550px; max-width: 870px}
}

@media (min-height: 750px) and (min-width: 1170px) {
    #gallery-lightbox img {max-height: 650px;max-width: 1000px}
}

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 10%;
    right: 50%;
    transform: translate(50%, -50%);
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #000;
}
.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.form-loading {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    height: 100%;
    width: 100%;
    z-index: 30;
}


.no-arrows .slick-arrow{display: none !important;}





/************* // CHART SOSTENIBILITA // **********/
.legenda{ width: 100%; }
.legenda td {height: 25px; border: 2px solid #fff; text-align: center;}

.chart-container{
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 20px;
}
/*.charts-css.show-heading caption{position: absolute; top: -60px}*/

.charts-css tbody td {
    margin-inline-start: 0px;
    margin-inline-end: 15px;
}

.charts-css  tbody td:before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 100%;
    height: 10px;
    transform: skewX(-45deg);
    transform-origin: top;
    background-color: #fff;
}

.charts-css tbody td:after {
    content: '';
    position: absolute;
    top: -4px;
    right: -10px;
    width: 10px;
    height: 100%;
    transform: skewY(-45deg);
    transform-origin: top;
    background-color: #fff;
}

/*.charts-css  .legend {
    flex-shrink: 3;
}*/

.charts-css.column tbody tr th {
    position: absolute;
    right: 0;
    left: 0;
    background-color: transparent;
    margin-bottom: -25px;
    z-index: 1;
}

.charts-css  td {
    bottom: -10px;
    position: relative;z-index: 1;
    transform-origin: bottom;

}

.charts-css  tbody:after{
    position: absolute;
    content: "";

    top: 10px; /* skew pushes it up so we move it down a bit */
    left: -20px;

    width: 20px;
    background-color: transparent;
    border-bottom: 1px solid #000;

    /* Make it look as if in perspective */
    transform: skew(0deg, -45deg);height: calc(100% - 48px);
    background-size: 100% 12.5%;
    background-image: -webkit-gradient(linear,left top,left bottom,from(var(--secondary-axes-color)),to(transparent));
    background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width),transparent var(--secondary-axes-width));;
}

.y-ax{position: absolute;
    height: calc(100% - 70px) !important;
    left: -30px;
    width: 20px;
    top: 25px !important;
    font-size: 12px;
    color: #fff;}


#chart-water, #chart-garbage, #chart-paper {
    height: 400px;
    max-width: 600px;
    margin: 0 auto;
}

#chart-water .y-ax-6> div{height: 16.66%}
#chart-water.charts-css  tbody:after{background-size: 100% 16.66%}
#chart-water.charts-css tbody td:before {background-color: #eff4fd;}
#chart-water.charts-css tbody td:after {background-color: #eff4fd;}

#chart-garbage .y-ax-7 > div{height: 14.28%}
#chart-garbage.charts-css tbody:after{background-size: 100% 14.28%}
#chart-garbage.charts-css tbody td:before {background-color: #ceeecf;}
#chart-garbage.charts-css tbody td:after {background-color: #ceeecf;}

#chart-paper .y-ax-8 > div{height: 12.5%}
#chart-paper.charts-css tbody:after{background-size: 100% 12.5%}
#chart-paper.charts-css tbody td:first-child:before {background-color: #FBE3D8;}
#chart-paper.charts-css tbody td:first-child:after {background-color: #FBE3D8;}
#chart-paper.charts-css tbody td:before {background-color: #FEF4C4;}
#chart-paper.charts-css tbody td:after {background-color: #FEF4C4;}

.rectangle#paper {width: 20px; height: 20px;background: #F4A480; display: inline-block;}
.rectangle#plastic {width: 20px; height: 20px;background: #F4DE80; display: inline-block;}

.charts-css  tbody.anim-active td{
    animation-fill-mode: backwards;animation-delay: 1s;
    animation: moving-bars 5s linear;
}
@keyframes moving-bars {
    0%  { transform:  scaleY(0); }
    15% { transform: scaleY(1); }
}