* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*general*/
html {/* font-size: 62.5%*/ font-size: 10px; outline: none; }
body { font-family: "Onest", sans-serif; color: #000; 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: #000; outline: none }
a:focus, input:focus, textarea:focus, select:focus, label:focus {outline: none!important }
p, ul, li { line-height: 1.8; font-size: 1.6rem; }
.container { max-width: 165rem; margin: 0 auto; padding: 0 2%; width: 100%; }
.container2 { max-width: 120rem; margin: 0 auto; padding: 0 2%; width: 100%; }
button { color: #000; font-size: 1.6rem; cursor: pointer; background-color: transparent; border: none; font-family: "Onest", sans-serif;}
input, textarea, select { font-size: 1.8rem; ; font-weight: 600; font-family: "Onest", sans-serif;}

.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}
.bgfff { background-color:#fff }
.orange { color:#FF6500 }
.gray { color:#64636F }
.bgorange { background-color:#FF6500 }
.bggray { background-color:#F8F8F8 }
.bgg { background-color:#F0F0F2 }
.bgg1 { background-color:#64636F }
.bgg2 { background-color:#4E4D57 }

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

.t65 { font-size:6.5rem; line-height:1.2 }
.t55 { font-size:5.5rem; line-height:1.2 }
.t50 { font-size:5rem; line-height:1.2 }
.t45 { font-size:4.5rem; line-height:1.2 }
.t30 { font-size:3rem; line-height:1.2 }
.t35 { font-size:3.5rem; line-height:1.2 }
.t25 { font-size: 2.5rem }
.t20 { font-size: 2rem }
.t18 { font-size: 1.8rem!important }
.t16 { font-size: 1.6rem }
.t14 { font-size: 1.4rem }

.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 }
.mt9 { margin-top:9rem }
.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 }

.pad { padding:6rem 0 }

.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; }
.overlay { mix-blend-mode: overlay; }
.screen { mix-blend-mode: screen; }

.br { border-radius: 1rem }

.cta { font-size: 1.6rem; position: relative; display:inline-block; border-radius: 5rem; padding:.8rem 2.4rem; border:2px solid #FF6500; }
.cta.hover { position: relative; display: inline-block; margin: 2rem 0; padding: 1rem 2rem; font-weight: 600; text-transform: uppercase; text-decoration: none; border: 1px solid #FF6500; border-radius: 5rem; overflow: visible; z-index: 1; }
.cta.hover::after { content: ""; position: absolute; top: -11px; left: -11px; width: calc(100% + 20px); height: calc(100% + 20px); border: 1px solid #FF6500; border-radius: calc(5rem + 5px); opacity: 0; transform: scale(0.95); transition: transform 0.3s ease, opacity 0.3s ease; z-index: -1; }
.cta.hover:hover::after { opacity: 1; transform: scale(1); }
.cta.hover:hover { box-shadow: 0 0 6px rgba(255, 101, 0, 0.4); }

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

/*TOP BUTTON*/
.div-back-to-top { cursor: pointer; 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:#FF6500; padding:2rem 1.5rem; border-radius:.5rem }
.back-to-top:hover {cursor: pointer; }

header { padding: 2rem 0; z-index: 10; z-index:10; width: 100%; position: absolute; max-width: 300rem;}
header .logo { transition: .3s; width: 33rem; }
header .logo img { width:100% }
header .menu { align-items: center; justify-content:space-between; }
header .menu2 { align-items: center; transition: .3s;  }
header .menu li a { color: #fff; font-weight: 400; transition: .3s; position: relative; font-size:1.6rem; text-transform:uppercase; }
header .menu li a.cta { padding:.2rem 1.4rem; text-transform:inherit; position:absolute; top:4.5rem; right:2.8rem }
header .menu2 li { margin:1rem 2.5rem 1rem 1rem }
header .menu2 li:first-child { margin-left:0 }
header .menu li a.active { font-weight: 600;  }
header .menu li a:hover { color: #FF6500 }
header .allmenu { align-items: center; display: flex; justify-content: flex-end; width: calc(100% - 34rem);}
header .contattibutton { transition: .3s; width: 16rem; margin-left: 2rem; display:flex; align-items:center;justify-content:center; padding:1rem }

.menuresponsive, .sidenav { display: none; }

.sec1 { height:100vh; min-height:70rem }
.video { height: calc(100% - 16rem) }
.video .bg { background-color:rgba(100, 99, 111, .5); position:absolute; top:0; left:0; }
.sec1 .txt { margin-top:-14rem }
.sec1 .shape { position: absolute; left: 0; right: 0; margin: 0 auto; height:14rem; object-fit:cover; width:100%; object-position:top center; }
.sec1 .txt .t50 { position:relative; max-width:85rem; margin:0 auto; padding:4rem 0 2rem }
.sec1 .txt .t35 { max-width:85rem; margin:0 auto; }

.sticky { box-shadow: 0 0 20px rgba(0, 0, 0, .2); background-color: rgba(100, 99, 111, .5); position: fixed; transition: 1s; width: 100%; top: 0; max-width: 300rem; }
.hidden-sticky { }
.sticky .logo { transition: .3s; width:14rem }
.trans { transition:.6s }
.sticky .dropdown-content { padding-top:4.54rem; }
.sticky .dropdown-content .bgfff { border-radius: 0 0 .5rem .5rem  }

.banner1 { max-width: 142rem; margin:2rem auto 0; padding:6rem 9rem }

.img-txt { margin: 10rem 0; display:flex; align-items:center; }
.img-txt .img { top: 7.5%; left: 0; height: 85%; width:50%; position:absolute; }
.img-txt .txt { width: 55%; margin-left: 45%; padding:6rem 6rem 6rem 9%; min-height: 70rem; height:100%; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; }

.banner { min-height:65rem; display:flex; align-items:center; justify-content:center; }
.banner .img { position:absolute; top:0; left:0; }
.banner .bg { z-index: 1; background-color:rgba(100, 99, 111, .85); position:absolute; top:0; left:0; }
.banner .txt { z-index:2; max-width:100rem; margin:0 auto; padding:8rem 2% }

#splide1 .splide__pagination { display: block!important; text-align: center; width: 100%!important; bottom: 0; height: 3rem; z-index: 1}
#splide1 .splide__pagination__page { border-radius: 0; background: #E5E4F0; opacity: 1; width: 1.8rem; height: 1.8rem; border-radius: 50%; margin: 6px; cursor: pointer;display: block;}
#splide1 .splide__pagination__page:focus {outline: none;}
#splide1 .splide__pagination__page.is-active {background: #64636F; opacity: 1; transform: inherit;}
#splide1 .splide__track { width:100% }
.servizi { padding:1rem 6rem 10rem }
.servizi .box .img { height:24vw }
.servizi .box .txt { margin-top: 2rem; align-items:flex-start; justify-content:space-between; }
.servizi .box .txt .t30 { width:calc(100% - 16rem); }
.servizi .box .txt .cta { margin-top: .3rem; width:14rem; text-align: center; padding:.1rem 1rem }
.servizi .box img { transition:.5s }
.servizi .box:hover img { transform:scale(1.1); }

.why .flex { justify-content:center; gap: 3%; padding:4rem 0 }
.why .bx { max-width:21.9rem; margin:2% 0 0 }
.why .bx img { max-width:21.9rem }
.why .bx p { line-height:1.2; font-size:2rem }
.why .bx p.t16 { font-size:1.6rem }

.ctas .cta { margin-right:3rem }

.txt ul { padding-left:2rem }
.txt ul li::before { content:''; background-image: url('../img/arrow.svg'); background-repeat: no-repeat; background-size: contain; width: 3.6rem; height: 2.2rem; position:absolute; left:0; top:.3rem }
.txt li { padding-left:5rem; position:relative; font-size:1.6rem; line-height:1.7; margin:1rem 0 }

.img-txt.rev .img { right:0; left:inherit; }
.img-txt.rev .txt { width: 90%; margin:0; padding: 6rem 45% 6rem 6rem }

.banner2 { min-height:75rem; display: flex; align-items: center;}
.banner2 img { width:50%; position:absolute; top:0; left:0 }
.banner2 .txt { margin-left:54%; }

.footer3 p, .footer3 a { font-size:1.6rem; color:#fff }
.footer3 a:hover { color: #FF6500 }
.footer3 { padding: 8rem 0; }
.footer3 .credits { padding:4rem 0 0; margin-top: 4rem; border-top: 1px solid #9391A3; }
.footer3 .credits span { margin:0 .5rem }
.credits a, .credits p { color:#9391A3 }
.footer3 .logo img { width:25rem }
.footer3 .clflex { justify-content:space-between; }

/*pages*/
.page .sec1 { height:auto; }
.page .video { height:60rem }
.services { gap:2%; justify-content:space-between; }
.services .box { border: 2px solid #fff; min-height: 25rem; padding: 4rem; width: 23%; margin-bottom: 3%; background-color: #fff; border-radius: 1rem; flex-direction:column; justify-content:space-between; align-items:center; }
.services .box .info { line-height: 1.2; padding: 1rem 1.5rem; border-radius: 2.4rem; background-color:#D8D5F0; font-size:1.25rem }
.t22 { font-size:2.2rem }
.services .box:hover { border:2px solid #FF6500; }
.page .img-txt .txt { width: 90%; margin-left: 10%; padding: 6rem 6rem 6rem 44%; }

.page .img-txt.rev .txt { width:90%; margin-right: 10%; margin-left: 0; padding: 6rem 45% 6rem 6rem; }
.page .img-txt.rev { flex-direction:column-reverse; }
.page .img-txt.rev .img { margin: 0 0 2.5% }

.punti .bgfff { padding:2rem }
.punti .bgfff .flex { align-items:center; margin: 0 2rem 1rem }
.punti .bgfff .flex img { margin-right:2rem }

.space { height:10rem }

.breadcrumbs { color:#fff; font-size:1.5rem; position: absolute; top: 0; left: 0; right: 0; margin: -38px auto; }
.breadcrumbs a { color:#fff }
.breadcrumbs a:last-child { color:#FF6500 }

.tutti-servizi .servizi.flex .box { width:31.33%; margin-bottom:4% }
.tutti-servizi .servizi.flex { gap: 2%; padding:0; margin:4rem 0 0 }
.tutti-servizi .servizi.flex .box .img { height:16vw }

.pt0 { padding-top:0!important }
.mt0 { margin-top:0!important }

.ckeditor { font-size:2rem; line-height: 1.8}
.ckeditor b, .ckeditor strong { font-weight: bold; }
.ckeditor h1,.ckeditor h2,.ckeditor h3,.ckeditor h4, .ckeditor h5, .ckeditor h6 { line-height: 1.2; font-size:3.5rem; font-weight:600; margin: 4rem 0 1rem }
.ckeditor a { color:#FF6500; text-decoration:underline; font-weight:500 }
.ckeditor a, .ckeditor p { font-size:2rem }
.ckeditor ul { margin:2rem 0 }
.ckeditor ul li::before { content:''; background-color: #FF6500; width: 2.5rem; height: 1rem; position:absolute; left:0; top:1.2rem }
.ckeditor li { padding-left:3.5rem; position:relative; font-size:2rem; line-height:1.7; margin:1rem 0 }
.ckeditor ol li::marker { font-weight:600; color:#FF6500 }
.ckeditor ol li { list-style:decimal; padding-left:1rem }
.ckeditor ol { padding-left:2rem; margin: 2rem 0}

/*form2*/
.contact_form2 .content { justify-content:space-between; }
.form2 { width:100% }
.form2 input, .form2 textarea, .form2 select { font-weight: 500; font-size: 1.8rem; letter-spacing: .5px; margin-bottom: 2rem; border:1px solid rgba(255, 255, 255, .25); width:100%; background-color:rgba(0, 0, 0, .06); border-radius:5px; padding:1.5rem; }
.form2::placeholder { color:#999 }
::placeholder { color:#999; opacity:0.9 }
.form2 .cl50 { width:49% }
.form2 .cl100 { width:100% }
.form2 .inputs { justify-content:space-between; }
.voce p { font-size:1.8rem; font-weight: 500; letter-spacing :1px; margin-bottom:0.8rem }

.map iframe { width:100%; height:50vh }

.pillar-page.page .video { height:40rem }
.pillar-page .sec1 { min-height:auto }

.staff .box { width:31%; padding:2rem; margin-bottom:3% }
.staff .boxes { gap:3%; justify-content:center; }
.staff .box img.br { width:100%; margin-bottom:1rem }
.staff .box a { font-size: 1.4rem; border: 2px solid #fff; margin: 1rem .5rem 0; background-color:#fff; border-radius: 4rem; display:inline-flex; align-items:center; padding:1rem 1.5rem }
.staff .box a:hover { border:2px solid #FF6500; }
.staff .box a img { width: 2rem; margin-right:5px }

/*-------------------------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);
}

@media (max-width: 1850px) {
header .menu li a.cta { position:relative; top:inherit; right:inherit; }
}

@media (max-width: 1300px) {
html { font-size:9.5px }
.servizi .box .img { height:30vw }
}

@media (max-width: 1100px) {
html { font-size:9.5px }
header { background-color: #F8F8F8; padding:1.5rem 0 }
header .allmenu { width:50% }
header .menu2 li { display:none; }
header .menu2 li.mail { display:inline-block; margin-right:1.5rem }
header .cta { margin-left:2rem;}
header .logo { display:flex; }
.sticky { padding: 1rem 0; background-color: rgba(248, 248, 248, .9);}
.menuresponsive { margin-top:4px }
.menuresponsive, .sidenav { display: block; }
#mySidenav { display: block; z-index: 1000; height: 100%; width: 0; position: fixed; z-index:1; top: 0; right: 0; overflow-x: hidden; transition: 0.2s; }
#mySidenav .bg a { font-size:2rem }
#mySidenav .bg li { margin:1.5rem 0 }
#mySidenav .closebtn img { width:3.5rem }
.sidenav .bgcolor { width:0; opacity:.4; height:100vh; overflow: hidden; position:absolute; right:0 }
#mySidenav .bg { background-color: #64636F; overflow-y: scroll; width: 100%; margin: 0; height:100vh; padding:8rem 4rem }
#mySidenav .bg a, #mySidenav .bg p { color:#fff }
#mySidenav .closebtn { position: absolute; top: 0; right: 0; padding: 2rem; text-align: right; margin:0; width:100% }
#mySidenav .bg li a { text-transform: uppercase; font-size:2rem; padding-bottom: 1.5rem; display:block; }
#mySidenav .bg li:last-child { border:0; display:flex }
#mySidenav .bg li a.cta { margin-left:0; padding-bottom:.8rem }
#mySidenav .bg li { border-bottom:1px solid rgba(255, 255, 255, .2); }
}

@media (max-width: 1024px) {
.sec1 { height:auto; }
.sec1 .txt { background-color: #f8f8f8; position:relative;}
.sec1 .shape { top:-9.4vw; object-fit:contain; width:110%; left:-5% }
.banner1 { padding:5rem }
.img-txt { border-radius: 1rem; background-color: #F0F0F2; flex-direction: column; margin:5rem 0 }
.img-txt .img { position:relative; top:inherit; left:inherit; width:95%; height:auto; margin-top:2.5% }
.img-txt .txt { padding: 4rem; min-height: auto; width:100%; margin:2rem 0 0 }
.footer3 .logo { flex-direction:column; align-items: center; justify-content:center; margin:0 auto; }
.footer3 .logo .social { margin-top:2rem }
.footer3 .logo .social img { margin:0 .25rem }
.footer3 { text-align:center; }
.footer3 .cl { width:100%; margin-top:3rem }
.video { height:70vh; min-height:auto }
.sec1 .txt .t50 { padding:2rem 0 1rem }
.sec1 .txt .cta.hover { margin-bottom:4rem }
.img-txt.rev .txt { width:100%; margin:0; padding:4rem 2rem }
.img-txt.rev { flex-direction:column-reverse; }
.img-txt.rev .img { margin: 0 0 2.5% }
.ctas .cta { margin-bottom:0 }
.why .bx { margin-bottom:4rem }
.banner2 { flex-direction:column; }
.banner2 img { position:relative; width:100% }
.banner2 .txt { width:100%; margin:0; padding:4rem 0 }

.breadcrumbs { position:relative; color:#64636F; margin-bottom:2rem }
.breadcrumbs a { color:#64636F }
.services .box { width:49% }
.page .img-txt .txt { width:100%; padding:4rem 2rem!important; margin:0 }

.tutti-servizi .servizi.flex .box { width:49% }
.tutti-servizi .servizi.flex .box .img {height: 35vw}

.staff .box { width:35rem }
}

@media (max-width: 768px) {
.t50 { font-size:3.5rem }
.t35 { font-size:2.5rem }
.t20 { font-size:1.6rem }
.servizi .box .img { height:60vw }
.banner1.np-resp { padding:4rem 0 }
}

@media (max-width: 600px){
header .logo { width:16rem }
header .allmenu { width:calc(100% - 18rem); padding-right:.5rem }
header .menu2 li.mail { margin-right:1rem }
.banner1 { padding:4rem; }
.page .banner1 { margin-top:5rem }
.contact_form2.banner1 { margin-top:0 }
.banner { padding:0 2rem }
.servizi { padding:1rem 2% 7rem; margin-bottom:10rem }
.sec1 .txt { margin-top:0 }
.video { height:60vh }

.breadcrumbs { margin: 1rem 0 0 }
.services .box { width:100% }
.space { height:5rem }
.page .testo.pad { padding-bottom:4rem }

.tutti-servizi .servizi.flex .box { width:100%; margin-bottom:4rem }
.tutti-servizi .servizi.flex .box .img { height:75vw }

.form2 .cl50 { width:100% }

.punti .bgfff .flex { flex-direction: column; align-items: flex-start; margin:0 0 2rem; font-size:2.5rem; line-height:1.3 }
.punti .bgfff .flex img { margin-bottom:1rem }

.staff .box { max-width:35rem; width:100%; margin-bottom:3rem }
}

/*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); }