* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*general*/
html {/* font-size: 62.5%*/ font-size: 10px; outline: none; }
body { font-family: "Plus Jakarta Sans", sans-serif; color: #262626; font-weight: 400; background-color: #F6F8FA; }
.body { background-color: #fff; max-width: 300rem; margin: 0 auto; overflow: hidden; }
ul, li, h1, h2, h3, h4, h5, p { list-style: none; }
a { font-size: 1.6rem; text-decoration: none; color: #262626; outline: none }
a:focus, input:focus, textarea:focus, select:focus, label:focus {outline: none!important }
p, ul, li { line-height: 2; font-size: 1.6rem; }
.container { max-width: 165rem; margin: 0 auto; padding: 0 2%; width: 100%; }
.container2 { max-width: 142rem; margin: 0 auto; padding: 0 2%; width: 100%; }
button { color: #262626; font-size: 1.6rem; cursor: pointer; background-color: transparent; border: none; font-family: "Plus Jakarta Sans", sans-serif;}
input, textarea, select { font-size: 1.8rem; ; font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif;}

/*select { width: 100%; 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; color: #111;
  background: url(../img/select.svg) 97% / 13px no-repeat #fff; background-color: transparent;
}*/

.center { text-align: center; }
.clear { clear: both; }
.float { float:left; }
.floatr { float:right; }
.flex { display: flex; flex-wrap: wrap; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.pr { position:relative; }
.oh { overflow:hidden; }

/*colors*/
.fff {color: #fff}
.green { color: #27D240; }
.bggreen { background-color: #27D240; }
.bggreen2 { background-color:#146C21D9 }
.bgdark { background-color:#262626 }
.font { font-family: "Quicksand", sans-serif; }
.bgfff { background-color:#fff }

/*fontsize*/
.w300 { font-weight:300 }
.w400 { font-weight:400 }
.w500 { font-weight:500 }
.w600 { font-weight:600 }
.w700 { font-weight:700 }

.t60 { font-size:6rem; line-height:1.1; letter-spacing:0 }
.t45 { font-size: 4.5rem; line-height:1.3 }
.t40 { font-size: 4rem; line-height:1.2 }
.t35 { font-size: 3.5rem; line-height:1.4 }
.t30 { font-size: 3rem; line-height:1.4 }
.t20 { font-size: 2rem; line-height:1.5 }
.t22 { font-size: 2.2rem; }
.t55 { font-size:5.5rem; line-height:1.2 }
.t66 { font-size:6.6rem; line-height:1.2 }
.t45 { font-size:4.5rem; line-height:1.2 }
.t18 { font-size: 1.8rem }
.t16 { font-size: 1.6rem }
.t14 { font-size: 1.4rem }

.ls { letter-spacing:20% }
.nols { letter-spacing:-1px }

.mt1 { margin-top:1rem }
.mt2 { margin-top:2rem }
.mt3 { margin-top:3rem }
.mt4 { margin-top:4rem }
.mt5 { margin-top:5rem }
.mt6 { margin-top:6rem }
.mt8 { margin-top:8rem }
.mt10 { margin-top:10rem }
.mb1 { margin-bottom:1rem }
.mb2 { margin-bottom:2rem }
.mb3 { margin-bottom:3rem }
.mb4 { margin-bottom:4rem }
.mb5 { margin-bottom:5rem }
.mb6 { margin-bottom:6rem }
.mb8 { margin-bottom:8rem }
.mb10 { margin-bottom:10rem }
.p0 { padding:0rem!important }

.opt { object-position:top center; }
.opb { object-position:bottom center; }
.ojf { object-fit:cover; object-position:center; height:100%; width:100% }
.multi { mix-blend-mode: multiply; }

.br { border-radius: 1rem }

.cta { transition: .6s; display: inline-block; font-size: 1.6rem; font-weight: 600; padding:1.2rem 2.5rem!important; line-height: 1.4; border-radius:20rem }
.cta.bggreen:hover { background-color: #50a545 }
.cta.bgdark:hover { background-color: rgba(0, 0, 0, .2); }
.cta.bgtra { opacity: 0.7; border:1px solid; }
.cta.bgtra:hover { opacity:1 }

/*padding/margin*/
.wt100 { width:100% }
.ojf { width:100%; height:100%; object-fit:cover; }
.opt { object-position:center top!important; }

/*TOP BUTTON*/
.div-back-to-top { transition: .3s; max-width: 400rem; width: 100%; left: 0; right: 0; bottom: 0; margin: 0 auto; position: fixed; z-index: 10000; }
.back-to-top { transition: .3s; position: absolute; z-index: 2; bottom: 2rem; right: 2rem; }
.back-to-top img { transition: .3s; width: 5.2rem; background-color:#27d240; padding:2rem 1.5rem; border-radius:.5rem }
.back-to-top:hover {cursor: pointer; }

#scrolling { position: relative; z-index:30 }
header { background: #262626; background: linear-gradient(180deg, rgba(38, 38, 38, 1) 0%, rgba(38, 38, 38, 0) 100%); transition: 1s; padding: 2rem 0; transition: .3s; position: absolute; max-width: 300rem; width: 100%; right: 0; margin: 0 auto; top: 0; left: 0; z-index: 1; }
header .container { position: relative; align-items:center; justify-content:space-between; }
header .logo { transition: .3s; z-index: 1; width: 30rem; }
header .menu { justify-content: center; position: absolute; right: 0; left: 0; margin: 0 auto; align-items:center; }
header .menu li a { color: #fff; font-weight: 500; text-transform: uppercase; padding:0 2.5rem }
header .menu li a:hover { color:#27D240 }
header .menu li a.active { color:#27D240 }
header .menu li a.cta { color:#fff; background-color:#312783; }
header .social { gap:2rem }

header .logo, header .social { position:relative; z-index:2 }

.dropbtn { transition: all 0.3s ease 0s; margin-left: -3px; padding: 5rem 1.1rem 9rem; }
.dropdown {display: inline-block; padding-bottom: 6rem; margin-top: 6rem}
.dropdown:after { background-color:red; height:2rem; width:2rem; position:absolute; bottom:0; left:0 }
.dropdown img { width: 1.1rem; vertical-align: middle; }
.dropdown button { position: relative; z-index: 2; }
.dropdown-content { margin-top: 6rem;
  position: absolute;
  min-width: 160px;
  z-index: 2;
  left: 0; width: 100%;
  height: 0; overflow: hidden;
  transition: all 0.3s ease-in-out; opacity: 0; }
.dropdown .a { position:relative; }
.dropdown .a .line { height: 6rem; position: absolute; width: .2rem; top: 2.5rem; left: 0; right: 0; margin: 0 auto; opacity:0; transition:.3s }
.dropdown:hover .a .line { opacity:1 }
.dropdown-content .bgfff { width:100%; padding:5rem 5%; margin:0 2% }
.dropdown-content { display: flex; text-align: left; }
.dropdown:hover .dropdown-content { height: auto; margin-left: 0; opacity: 1}
.dropdown-content .boxflex { width: 100%; gap:6rem; }
.dropdown-content .box { padding: 0; display: flex; color: #262626; flex-direction:column; flex-wrap: nowrap; width: 15rem; }
.dropdown-content .box p { line-height:1.4; text-transform:none }
.dropdown-content .box p.green { transition: .3s; margin-top: .3rem; text-transform: none; }
.dropdown-content .box img { transition: .2s; border-radius:1rem; width:100%; height:15rem }
.dropdown-content .box:hover p.green { padding-left: 1rem}
.dropdown-content .box:hover img { opacity:.8 }
.dropdown-content a.green { color: #27D240; text-transform:none; } 
.dropdown-content .tit { display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center; }
.dropdown-content .box:hover { color:#262626 }

.sticky .dropdown { padding-bottom:2rem; margin-top:2rem }
.sticky .dropdown-content { margin-top: 2rem;}
.sticky .dropdown .a .line { height: 2rem;}

.sticky { transition: 0.3s; position: fixed!important; top: 0; left: 0; z-index: 30; width: 100%; max-width: 300rem; margin: 0 auto; }
.sticky header { padding:1rem 0 }
.sticky .logo { width:20rem }
.hidden-sticky { height: 0 }

/*sidenav*/
.menuresponsive, .sidenav { display: none; }

/*splide1*/
.slidehome { position: relative; width:100%; height:80vh; min-height: 100rem; display:flex; }
.slidehome .main-txt { margin-top: 22rem; width: 65rem; z-index: 2; position:relative; }
.slidehome .img { position:absolute; top:0; left:0; }
.slidehome .png { position:absolute; bottom:0; left:0; object-position: top center; height:50% }
.slidehome .rici { position: absolute; right: 0; bottom: -14rem; width:20rem }
.slidehome .mobile { display:none; }

.rotate {
  animation: rotateSoft 5s linear infinite;
  transform-origin: center center;
}

@keyframes rotateSoft {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.banner { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 8rem 4rem; margin: -12rem auto 0; position:relative; z-index:4 }
.banner p { max-width:100rem }
.pad { padding:8rem 0 }
.box-metalli .boxes { gap:2%; }
.box-metalli .boxes .box { width:23.5%; margin-bottom:5rem; flex-direction:column; }
.box-metalli .boxes .box .img { width:100%; aspect-ratio: 1 / 1; }
.box-metalli .boxes .box .img img { transition:.3s; transform:scale(1.01); }
.box-metalli .boxes .box:hover .img img { transform:scale(1.08); }
.box-metalli .boxes .box p { transition:.3s }
.box-metalli .boxes .box:hover p { margin-left:1rem }
.box-metalli .txt { width:48%; height:100%; display:flex; flex-direction: column; align-items: flex-start; justify-content:center; padding:6rem 4rem }

.txt-img { padding:4rem 0; margin-bottom:10rem }
.txt-img .img { width:44%; position:absolute; right:0; top:0 }
.txt-img .txt { width:50%; z-index:2 }

.banner2 { min-height:80vh; padding:6rem 0 }
.banner2 .flex { min-height:80vh; align-items: flex-end; }
.banner2 .sfuma { position: absolute; bottom: 0; left: 0; background: #262626;
background: linear-gradient(0deg, rgba(38, 38, 38, 1) 0%, rgba(38, 38, 38, 0) 100%); }
.banner2 img { position:absolute; top:0; left:0 }
.banner2 .txt { z-index:2 }

.box-metalli .boxes.a5 .box { width:18.4% } 
.box-metalli .boxes.a5 .box .img { aspect-ratio: 1 / 1; }

.services .bx .img { display: flex; align-items: center; justify-content: center; background-color:#F1F1F1; border-radius:1rem; height:20rem; width:100%; max-width: 20rem}
.services .bx .img img { width:12rem }
.services { gap:2% ;justify-content:space-between; }
.services .bx { width:15%; margin-bottom:2rem }

.prefooter { display: flex; align-items: center; justify-content: center; min-height: 60vh; background-color:#146C21D9 }
.prefooter .bg { background-color:#146C21D9; position:absolute; position:absolute; top:0; left:0; object-position:.85 }
.prefooter img { position:absolute; top:0; left:0; }

footer .social { gap:2rem }
footer .social img:hover { opacity:.6 }
footer p, footer a { letter-spacing: 5%; font-size:1.3rem; }
footer a { color:#fff }
footer a:hover { color:#50a545 }
footer { padding: 5rem 0 8rem; }
footer .logo img { width:15rem }
footer .cert { align-items:center; gap:1rem }
footer .cert img { width:4.3rem }
footer .cl { max-width:30rem }
footer .credits { color: #fff; padding:3rem 0 0; margin-top: 4rem; border-top: 1px solid rgba(255, 255, 255, .3); }
footer .clflex { justify-content:space-between; flex-wrap:nowrap; gap:4% }
footer a.flex { align-items:center; flex-wrap: nowrap;}
footer .logo { margin-bottom:3.4rem }

/*#pages*/
.ckeditor { font-size:1.6rem;}
.ckeditor h1,.ckeditor h2,.ckeditor h3,.ckeditor h4, .ckeditor h5, .ckeditor h6 { letter-spacing: -3%; color: #27D240; font-weight: 600; font-family: "Quicksand", sans-serif; font-size:4rem; margin: 3rem 0 2rem }
.ckeditor a { color:#227D26; text-decoration:underline; font-weight:500 }
.ckeditor ul, .ckeditor ol { margin:3rem 0 }
.ckeditor li { position:relative; padding-left:1.5rem; font-weight:600 }
.ckeditor ul li { background-color: #eee; padding: 2rem; border-radius: 1rem; margin: 2rem 0 2rem 4rem  }
.ckeditor ul li::before { content:url('../img/list.svg'); width: 2.7rem; position:absolute; top:50%; left:-3rem; transform:translate(-50%, -50%); }
.ckeditor ol li { border-bottom: 1px solid #27D240; list-style:decimal; padding-left: 0; margin-left: 7rem; }
.ckeditor ol li::marker { color: #27D240; font-weight: bold; font-size: 6rem; line-height:1 }

.txt-page .cta { margin-top:5rem }

.tronca2 { width: 100%; display: -webkit-box;
  -webkit-box-orient: vertical;
  /*Il conenuto viene troncato alla terza riga*/
  -webkit-line-clamp: 2; 
  overflow: hidden; }

.bgpage { height:50rem; }
.breadcrumbs { font-size: 1.5rem; margin:2rem 0 8rem }
.breadcrumbs a { font-size:1.5rem }
.breadcrumbs a:last-child { color:#27D240; font-weight: 600; text-transform:uppercase; }

.settori.box-metalli .boxes .box { width:100% }

.splide .splide__pagination { display: block; text-align: center; width: 100%!important; bottom: 0rem; height: 2rem; z-index: 1}
.splide .splide__pagination__page { border-radius: 50%; background: #d9d9d9; opacity: 0.5; width: 1.8rem; height: 1.8rem; margin: 5px;cursor: pointer;display: block;}
.splide .splide__pagination__page:focus {outline: none;}
.splide .splide__pagination__page.is-active {background: #27D240; opacity: 1; transform: inherit;}

#foto .my-arrows {position: absolute; bottom: 50%; margin: 0 auto; padding: 0 2%; width: 100%; z-index: 3; left: 0; right:0 }
#foto .my-arrows button:focus {outline: none;}
#foto .my-prev { background-image:url(../img/prev.svg); left:2% }
#foto .my-next { right: 2%; position: absolute; background-image:url(../img/next.svg); }
#foto .my-prev, #foto .my-next { width: 6.5rem; height: 6.5rem; border-radius: 0; background-color: transparent; transition: .3s; opacity: 1; cursor: pointer; background-repeat:no-repeat; background-position: center;}
#foto .my-prev:hover , #foto .my-next:hover { opacity:1 }
#foto .my-prev svg, #foto .my-next svg { fill:transparent; }
#foto { position: absolute; right: 0; top: 0; height:100%; width:44% }
#foto .splide__slide { width:100%; height:100% }



/*form2*/
#form { padding:8rem 0; margin-top:8rem }
.contact_form2 { padding:6rem 0; margin:0; }
.contact_form2 .content { max-width:100rem; width: 90%; margin:0 auto; border-radius: 2rem; border:1px solid rgba(255, 255, 255, .25); padding:3rem }
.form2 input, .form2 textarea, .form2 select { font-weight: 500; font-size: 1.6rem; margin-bottom: 2rem; border: 0; width:100%; background-color:#fff; border-radius:5px; padding:1.5rem; }
.form2::placeholder { color:#262626; opacity:0.6 }
::placeholder { color:#262626; opacity:0.6 }
.form2 .cl50 { width:49% }
.form2 .cl33 { width:32% }
.form2 .sb { justify-content:space-between; }
.form2 .inputs { justify-content:space-between; }
.voce p { font-size:1.8rem; font-weight: 500; letter-spacing :1px; margin-bottom:0.8rem }

/*-------------------------style check & radio box-------------------------*/
/*style check box*/
.containercheck { text-align: left; width: 100%;
  margin: 1rem 0 2rem; font-size: 1.4rem;
  display: block;
  position: relative;
  padding-left: 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containercheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2rem;
  width: 2rem;
  background-color: #fff;
  border-radius: 1px; border: 1px solid #E3E3E3;
}

/* On mouse-over, add a grey background color */
.containercheck:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containercheck input:checked ~ .checkmark {
  background-color: #4BAA05;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containercheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.containercheck .checkmark:after {
  left: 0.6rem;
  top: 0.3rem;
  width: 0.4rem;
  height: .8rem;
  border: solid white;
  border-width: 0 0.2rem 0.2rem 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.banner-green { padding:10rem 0; margin-top:8rem }
.banner-green .txt-img { margin-bottom:0; padding:0 }

.sitemap.ckeditor ul li::before { top:62% }
.sitemap.ckeditor ul li { padding:0; background-color:transparent; }

/*pagine*/
.error { color: #888; margin-top: 4rem; text-align:center; background-color:#f2f2f2; border-radius:2rem; font-size:40rem; line-height:1.2 }

@media (max-width: 1400px) {
html { font-size:9.5px }
}

@media (max-width: 1200px) {
/*sidenav*/
header { z-index: 10; padding: 2rem 1%; display:flex; align-items:center; justify-content:space-between; }
header .logo-resp { transition: .3s; display:block; position:relative; width:20rem }
header .menu { display: none; }
header .bggra { height:37rem }
.sticky header { border-radius:0; padding:1rem 1% }

header .social { position:absolute; top:9rem; right:2%; position:absolute; }

.menuresponsive, .sidenav { display: block; position: relative;}
#mySidenav { display: block; z-index: 1000;}
#mySidenav .closebtn img { width:3.5rem }
#mySidenav { height: 100%; width: 0; position: fixed; z-index:3; top: 0; right: 0; overflow-x: hidden; transition: 0.2s; }
.sidenav .bgcolor { width:0; opacity:.4; height:100vh; overflow: hidden; position:absolute; right:0 }
#mySidenav .bg { background: #262626;
background: linear-gradient(90deg, rgba(38, 38, 38, 1) 0%, rgba(38, 38, 38, 0.6) 100%); overflow-y: scroll; width: 100%; margin: 0; height:100vh; padding:8rem 4rem }
#mySidenav .bg a, #mySidenav .bg p { font-size: 1.8rem; color:#fff; font-weight: 600; text-transform:uppercase; }
#mySidenav .closebtn { position: absolute; top: 3rem; right: 3rem; text-align: right; margin:0; }
#mySidenav .bg .lang { border-bottom:1px solid rgba(225, 225, 225, .2); padding-bottom:2rem; margin-bottom:2rem }
#mySidenav .bg .lang .list img { margin:.5rem .5rem 0 0; height:2rem; opacity:.4 }
#mySidenav .bg .lang .list .active img { opacity:1 }
#mySidenav .bg li { margin:2rem 0; padding-bottom: 2rem; border-bottom:2px solid rgba(255, 255, 255, .1); }
#mySidenav .lang { padding-left:0; border:0 }

.accordion { border-bottom:2px solid rgba(255, 255, 255, .1); position: relative; width:100%; text-align:left; }
.accordion li { border:0!important; padding-bottom:0!important }
.accordion .btnmore { left: 0; top: 0; margin-left: 50%; width: 50%; position: absolute; height: 3.5rem; cursor: pointer; }
.accordion .text_opennew { margin:-2rem 0 1rem }
.accordion .showhidenew img { margin: 0; transition: 1s; width: 1.8rem; position: absolute; right: 0; top: 0.8rem}
.accordion .text_opennew a { color: #27D240!important; text-transform: none!important; font-weight: 400!important; display:block; }

.t60 { font-size:5rem }
.slidehome .rici { width:16rem }
.t45 { font-size:4rem }
}

@media (max-width: 1024px) {
.box-metalli .boxes.a5 .box .t30 { font-size:2.5rem; line-height:1.3 }
.services .bx { width:20rem }
.services { justify-content:center; gap:2rem }
.container2.cent { text-align: center; }

.error { font-size:30vw; padding:4rem 2% }
}

@media (max-width: 768px) {
html { font-size:9px }

.slidehome { height:auto; min-height:auto }
.slidehome { flex-direction:column; }
.slidehome .img, .slidehome .png { display: none; }
.slidehome .mobile { margin-top: -14rem; object-position: top center; display: inline-block; width:100%; }
.slidehome .rici { left:18rem; right:inherit; bottom:-12rem }
.slidehome .main-txt { width:100% }

.box-metalli .boxes .box { width:49% }
.box-metalli .boxes .box .img { height: 47.5vw }
.box-metalli .txt { width:100%; padding:4rem 0 }

.box-metalli .boxes.a5 { padding: 0 6%; justify-content:center; }
.box-metalli .boxes.a5 .box { width:31rem; margin-bottom:3rem }
.box-metalli .boxes.a5 .box .img { height:31rem }

.txt-img .txt { width:100%; }
.txt-img img { position:relative; width:100%; margin-top:8rem }

footer .cl { max-width: 100%; text-align: center; width:100%; margin-bottom:2.5rem }
footer .clflex { flex-direction:column; justify-content:center; }
footer .cert { text-align:left; }
footer a.flex, footer .social { justify-content:center; }
footer .logo { text-align:center; }
footer .cl:last-child { order:2 }
footer .cl:first-child { order:1 }
footer .cl:nth-child(2) { order:3 }
footer .cl:nth-child(3) { order:4 }

#foto { margin-top: 8rem; width:100%; height:auto; position:relative; top:inherit; right:inherit; }
.txt-img #foto img { margin:0 }
}

@media (max-width: 600px){
html { font-size:9px }
.box-metalli .boxes .box { width:100% }
.box-metalli .boxes .box .img { height:50vw }

header .logo { width:18rem }
.sticky .logo { width:16rem }
header .social { top:7rem }
header .social img { width: 3.8rem }

.t60 { font-size:3.5rem }
.slidehome .main-txt { margin-top:18rem }
.slidehome .mobile { margin-top: -5rem; height:60vh }
.banner { margin-top:-6rem; padding:7rem 6% }

.ckeditor ol li::marker { font-size:5rem }
.nols, .ckeditor h1, .ckeditor h2, .ckeditor h3, .ckeditor h4, .ckeditor h5, .ckeditor h6 { letter-spacing:-3% }

.container2, .container { padding: 0 4% }

.bgpage { height:40rem }

.form2 .cl33, .form2 .cl50 { width:100% }
}

@media (max-width: 500px){
.box-metalli .boxes .box .img { height:95vw }
}

/*gsap css*/
.fade-left { transform: translateX(-100%); opacity:0 }
.fade-right { transform: translateX(100%); }
.fade-in { transform: translateY(0); opacity: 0; }
.fade-in-down { transform: translateY(-100%); opacity: 0; }
.fade-in-up { transform: translateY(100%); opacity: 0; }
.bounce { transform: translateY(100px); }
.rotate { transform: rotate(-180deg); }
.swing { opacity: 0; transform: rotate(-10deg); }
.shake { opacity: 0; transform: translateX(0); }
.zoom-in { transform: scale(0); }
.zoom-out { transform: scale(2); }
.roll-in { transform: translateX(-100%) rotate(-360deg); }
.mouse-par { will-change: transform; pointer-events: none; }

.typewriter-word::after {
  content: "|";
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%,50% { opacity:1; }
  51%,100% { opacity:0; }
}