html {
    scroll-behavior:smooth;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

body {
    color:#000000;
    background-color:#FFFFFF;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    margin:0;
    padding:0;
    font-family: "Poppins", sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:28px;
}

/* generici ------------------------------- */
.bg-black{background-color:#000;}
.bg-white{background-color:#FFF;}
.bg-yellow{background-color:##BCFF00;}
.relative{position:relative;}
.float-right{float:right;}
.float-left{float:left;}
.h-full{height:100%;}
.h-screen{height:100vh;}
.max-h-screen{max-height:100vh;}
.min-h-screen{min-height:100vh;}
.w-full{width:100%;}
.max-w-full{max-width:100%;}
.min-w-full{min-width:100%;}
.w-auto{with:auto;}
.uppercase{text-transform:uppercase;}
.cursor-pointer{cursor:pointer;}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:#000;}
a:hover{color:#BCFF00;}
a, .btn, a svg, .transition-all{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
a:focus{outline:0;}
.hidden{display:none;}
.inline-block{display:inline-block;}
.verticalize{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);}
.placeholder{opacity:0;}


/* TITOLI ------------------------------- */
h1{font: normal normal 600 32px/36px Poppins;letter-spacing: 0px;color: #004048;padding:0;margin:0 0 30px 0;}


/* GENERICI ------------------------------- */
.menubar{position:absolute;left:0;top:20px;z-index:100;padding-top:0;}
.logo{width:171px;max-width:100%;}
.text-screen-reader{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

/* SOCIAL ------------------------------- */
.lineafooter{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-bottom:30px;
}
.social{
    padding:0;display:inline-block;width:100%;margin-bottom:0;
    strong{text-transform:uppercase;margin-bottom:10px;display:block;}
    > ul{
        list-style-type:none;
        float:none;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        margin:0 auto;
        padding:0;
        position:relative;
        gap:18px;
        &:before, &:after{content:"";display:block;height:1px;background:rgba(255,255,255,.22);flex:1 1 auto;}
        &:before{margin-right:22px;}
        &:after{margin-left:22px;}
        > li{
            margin:0;padding:0;float:none;display:flex;align-items:center;justify-content:center;
            > a{
                background:transparent none repeat scroll 0 0;
                border:1px solid transparent;
                border-radius:0;
                color:#ffffff !important;
                display:inline-flex;
                align-items:center;
                justify-content:center;
                font-size:18px;
                width:auto;
                height:auto;
                line-height:1;
                margin:0;
                text-align:center;
                text-decoration:none;
                transition:opacity 200ms ease 0s, color 200ms ease 0s;
                i{line-height:1;}
                &:hover{color:#ffffff !important;background-color:transparent !important;border:1px solid transparent !important;opacity:.8;}
                &.facebook:hover, &.facebook-f:hover{color:#3b5998 !important;}
                &.twitter:hover{color:#1dcaff !important;}
                &.pinterest:hover{color:#c92026 !important;}
                &.vimeo:hover{color:#446d82 !important;}
                &.linkedin:hover, &.linkedin-in:hover{color:#0c7bb3 !important;}
                &.youtube:hover{color:#ed413e !important;}
                &.instagram:hover{color:#3f729b !important;}
                &.soundcloud:hover{color:#ff551a !important;}
                &.spotify:hover{color:#1dd05d !important;}
                &.flickr:hover{color:#0062dc !important;}
                &.pandora:hover{color:#224099 !important;}
                &.telegram:hover{color:#4e96d4 !important;}
                &.houzz:hover{color:#4dbc15 !important;}
                &.blogger:hover{color:#f49541 !important;}
            }
        }
    }
}

/* HOME ------------------------------- */
.fasciacolore{background-color:#003A41;padding-top:80px;padding-bottom:80px;font: normal normal 300 24px/36px Poppins;letter-spacing: 0px;color: #FFFFFF;}
.img_prod{position:absolute;top:-100px;left:90px;width:55vw;}

.box-item {width:278px;max-width:100%;margin: 0 auto;}
.box-item__top {
  background-color: #004c57;
  min-height: 268px;
  padding: 2.5rem 1.5rem 3rem;
  border-bottom: 14px solid #f6a32c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box-item__icon-wrap {min-height: 110px;display: flex;align-items: center;justify-content: center;margin-bottom: 1.5rem;}
.box-item__icon {max-height: 92px;width: auto;}
.box-item__title {text-align: center;font: normal normal normal 20px/36px Poppins;letter-spacing: 2px;color: #FFFFFF;text-transform: uppercase;}
.box-item__bottom {padding: 1.75rem 0.5rem 0;}
.box-item__text, .box-item__text p {text-align: center;font: normal normal 300 16px/26px Poppins;letter-spacing: 0px;color: #000000;}
.box-grid-section .col-lg-3:nth-child(1) .box-item__top {border-bottom-color:#FDA331;}
.box-grid-section .col-lg-3:nth-child(2) .box-item__top {border-bottom-color:#C5E225;}
.box-grid-section .col-lg-3:nth-child(3) .box-item__top {border-bottom-color:#D187F7;}
.box-grid-section .col-lg-3:nth-child(4) .box-item__top {border-bottom-color:#71D8EF;}

.btn-primary{font: normal normal 600 14px/36px Poppins;letter-spacing:1.4px;color:#004048;text-transform:uppercase;background-color:#fff;border:1px solid #004048;padding:5px 20px;border-radius:0;}
.btn-primary:hover{background-color:#004048;border:1px solid #004048;color:#fff;}

/* TABS ------------------------------- */
.responsive-tabs {background-color:#004851;}
.responsive-tabs .divisoriopagine {background-color:#FFF;}
.responsive-tabs .nav-tabs {display: none;border-bottom:2px solid #eee;}
.responsive-tabs .nav-item {margin:0;padding:0;}
.responsive-tabs .nav-link{text-align: left;font-weight:400;font-size:16px;line-height:22px;letter-spacing: 1.6px;color: #000;text-transform: uppercase;border:0 solid transparent;margin:0 100px 0 0;border-bottom:4px solid transparent;padding:0;height:100%;position:relative;min-height:60px;}
.responsive-tabs h3 {margin-bottom: 10px;font: normal normal 600 32px/36px Poppins;letter-spacing: 0px;color: #FFFFFF;}
.btnwsttab{display:inline-block;max-width:100%;margin:0 auto;font-weight:300;font-size:16px;line-height:24px;letter-spacing: 2px;color: #FFFFFF;text-transform: uppercase;}
.responsive-tabs .nav-tabs .nav-item.show .nav-link, .responsive-tabs .nav-tabs .nav-link.active {  color: #000;  background-color:transparent;  border:0 solid transparent;  border-bottom:4px solid #FFF;   padding:0 0 15px 0;}
.responsive-tabs .nav-tabs .nav-link:focus, .responsive-tabs .nav-tabs .nav-link:hover {  color: #000;  background-color:transparent;  border:0 solid transparent;  border-bottom:4px solid #FFF;}
.responsive-tabs .card {  position: relative;  display: flex;  flex-direction: column;  min-width: 0;  word-wrap: break-word;  background-color: transparent;  background-clip: border-box;  border:0 solid transparent;  border-radius:0;}
.responsive-tabs .card .card-body {padding-right:15px; max-width: 950px; font: normal normal 300 18px/30px Poppins;letter-spacing: 0px;color: #FFFFFF;}
.responsive-tabs .tab-pane.show.active {display: block !important;opacity: 1;padding-top:70px;padding-bottom:20px;}
.responsive-tabs .tab-pane {display: none !important;opacity: 0;}
.responsive-tabs .card .card-body .blocco {margin-top: 30px;}
.responsive-tabs .elencovoce, #accordionExample .elencovoce {list-style: none; margin-top: 75px; padding-left: 50px}
.responsive-tabs .elencovoce li, #accordionExample .elencovoce li {padding-left: 20px;font-size:17px; line-height:22px; font-weight:600; letter-spacing:0; position:relative;  margin-bottom: 20px}
.responsive-tabs .elencovoce li:before, #accordionExample .elencovoce li:before {width: 30px;content: " ";background-image: url('../img/check.svg');    position: absolute;    left:-15px;    top: 0px;    background-repeat: no-repeat;    height:30px;}
.responsive-tabs .tab-content {  display: flex !important;}
.responsive-tabs .tab-content > .tab-pane {  display: block !important;  visibility: hidden;  margin-right: -100% !important;  width: 100% !important;  padding-top: 70px;  padding-bottom: 20px;}
.responsive-tabs .tab-content > .active {  visibility: visible !important;}
.paddingtabs{background:transparent url('../img/sfondo-logo-bottom-right.png') no-repeat 143% 143%;background-size:790px 790px;padding:4% 0 4% 8%;}
.home .paddingtabs{background-color:transparent;background-image:none;}

@media (min-width: 768px) {
    .responsive-tabs .nav-tabs {display: flex;}
    .responsive-tabs .card {border: none;}
    .responsive-tabs .card .card-header {display: none;}
    .responsive-tabs .card .collapse {display: block;}
}

.accordion-button:not(.collapsed){color:#fff;background-color:#004c57;}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

/* HOME CAROUSEL ------------------------------- */
#carouselPrincipale .carousel-item{overflow:hidden;width:100%;max-width:100%;aspect-ratio: 1920 / 815;}
#carouselPrincipale .carousel-indicators{display:none;}
#carouselPrincipale .carousel-caption{
    top:auto;
    bottom:80px;
    left:80px;
    right:auto;
    text-align:left;
    text-transform:none;
    z-index:50;
    font: normal normal 800 86px/80px Poppins;
    letter-spacing: 0px;
    color: #BCFF00;
    width: 584px;
    max-width: 100%;
    text-shadow: 0px 0px 20px #0000004D;
}

.videocompleto{
    position:absolute;bottom:57px;right:160px;z-index:60;
    font-weight:300;font-size:13px;line-height:20px;letter-spacing:1.3px;color:#FFFFFF;text-transform: uppercase;
    background:linear-gradient(120deg, rgba(255,234,61,0) 0%, rgba(255,234,61,0) 100%);
    background-repeat:no-repeat;
    background-size:0 50%;
    background-position:0 50%;
    padding-right:10px;
    padding-left:10px;
}
.videocompleto:hover{
    background:linear-gradient(120deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
    background-repeat:no-repeat;
    background-size:100% 50%;
    background-position:0 50%;
    color: #fff;
}
.videocompleto img{display:inline;margin-right:10px;}

/* FOOTER ------------------------------- */
.footer{background-color:#003A41;color:#FFF;padding-top:80px;padding-bottom:100px;font: normal normal 300 15px/24px Poppins;letter-spacing: 0px;color: #FFFFFF;}
.footer a{color:#FFF;}
.footer a:hover{color:#BCFF00;}
.logonelfooter a{width: 80px;}
.colfootercentrale{font: normal normal 300 18px/30px Poppins;letter-spacing: 0px;color: #FFFFFF;}
.lineafooter{}

.triangle {
  width: 0; height: 0;
  border-style: solid;
  border-width: 0px 0px 63px 63px;
  border-color: transparent transparent #004851 transparent;
  transform: rotate(0deg);
  position:absolute;
  bottom:0;right:0;
}


/* media ------------------------------- */
@media only screen and (max-width:1199.98px) {
    #carouselPrincipale .carousel-caption{bottom:40px;left:40px;}
    #carouselPrincipale .carousel-caption {font: normal normal 800 60px/60px Poppins;}
}
@media only screen and (max-width:991.98px) {
    .logo{width:140px;}
    #carouselPrincipale .carousel-caption{bottom:30px;left:30px;}
    #carouselPrincipale .carousel-caption {font: normal normal 800 40px/40px Poppins;}
}
@media only screen and (max-width:767px) {
    .logo{width:80px;}
    #carouselPrincipale .carousel-item{min-height:250px;}
    #carouselPrincipale .carousel-caption{bottom:20px;left:20px;}
    #carouselPrincipale .carousel-caption {font: normal normal 800 20px/20px Poppins;}
    .img_prod{position:static;width:100%;margin-bottom: 30px;}
    .footer .colfooter, .footer .colfootercentrale, .footer .text-center{text-align:left !important;font: normal normal 300 14px/30px Poppins !important;}
    .footer .ms-auto, .footer .me-auto{margin:0 auto !important;}
}