/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ VARIABILI ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ :root { --margine: 5vh; --margine-mobile: 10px; --margine-mezzo: 40px; --margine-sezione: 10vh; --colore-principale: #9ba8c6; --colore-secondario: #25315a; --colore-testi: #fff; --font-principale: "Inter", sans-serif; --lungo:100px; --medio:40px; --piccolo:20px; --font-size: 1.3em; --animation-time: 25ms; /* Scale */ --fs-display: clamp(3.5rem, 6.5vw, 6.5rem); --fs-h2: clamp(2.5rem, 4.5vw, 4.5rem); --fs-h3: clamp(1.5rem, 2.2vw, 2.25rem); --fs-mobile: clamp(1.5rem, 2.5vw, 2.5rem); --fs-body: clamp(1.2rem, 1.5vw, 1.5rem); --fs-small: 0.875rem; --fs-label: 0.75rem; /* Line heights */ --lh-display: 0.92; --lh-heading: 1.2em; --lh-body: 1.45; --lh-small: 1.3; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ BASE ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ body, html{ margin:0; padding:0; width:100%; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; color: var(--colore-testi);; background: var(--colore-principale); line-height: 1.4em; font-size: 1em; } #pointer-dot { left: -10px; top: -10px; width: 20px; height: 20px; border: 1px solid #edf202; position: fixed; border-radius: 20px; z-index: 99999;pointer-events: none;display:none} #pointer-ring { left: 0; top: 0; width: 6px; height: 6px; padding: 0px; background:#000; position: fixed; border-radius: 12px; z-index: 99999; pointer-events: none;} a{color:var(--colore-testi); text-decoration:none } a:hover{color:var(--colore-testi); text-decoration:none} p{font-size:var(--fs-body); line-height:1.6em} em{font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 1.3em} hr{ border: 0; border-top: 1px solid #fff; margin: 0px; opacity:1} h1, h2, h3, h4, h5{font-weight:300;} .sottolineato{text-decoration:underline} .t-center{text-align:center} .t-right{text-align: right} .testo_destra{text-align: right} .t-left{text-align:left;} .fit{display:block;width:100%;} .add-top{margin-top:var(--margine);} .mtop{padding-top:var(--margine);} .ptop{padding-top:20px;} .mbottom{padding-bottom:var(--margine);} .sezione{display:inline-block; width:100%; padding:var(--margine-sezione) 0px;} .sezione.colorata{background-color:var(--colore-secondario)} .margini{padding:var(--margine-alto) 0px;} .riga{display:block; width:100%; } .iniziale{padding:0px} .paddington{padding:0px 2vw; box-sizing: border-box; text-align: center} .foto_griglia{float:left; width:100%; margin-bottom:30px;} .border-top{border-top:1px solid #000} .border-bottom{border-bottom:1px solid #000} .campo_form{float:left;background:#fff; width:100%; line-height:30px; padding:5px; box-sizing: border-box; font-size:0.8em; border-radius: 6px;color:#000;} .select{ background-color: #fff; color:#000; border: none; padding: 5px; box-sizing: border-box; margin: 0; width: 100%; font-family: inherit; font-size: inherit; cursor: inherit; line-height:40px;height:40px; border-radius: 6px} label{display:block; width:100%; line-height:30px; height:30px; box-sizing: border-box; font-size:0.8em; text-align:left } .riga{float:left; width:100%; } .riga .singolo{float:left; width:50%; padding:10px; box-sizing: border-box} .riga .doppio{float:left; width:100%;padding:10px; box-sizing: border-box} .riga.ultima{float:left; width:100%; margin-top:30px} .riga.ultima .invia{display:inline-block; height:50px; line-height:50px; border:1px solid #fff; padding:0 30px; color:#fff; text-decoration:none; background:rgba(255,255,255,0.2); border-radius: 6px} /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ MENU ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ .header{ width:100%; top:0; left:0; z-index:999;position:fixed;height:120px;transition: all 0.8s ease-in; text-align:center;transform:translate3d(0,-100%,0);} .header.navbar-dark .contenitore_header {transition: all 0.6s ease-in; transform:translate3d(0,100%,0); } .header.navbar-light .contenitore_header {transition: all 0.6s ease-in; background:none;transform:translate3d(0,-100%,0);} .contenitore_header {position:absolute; top:0; left:0; height:120px;width: 100%;padding: 0px;box-sizing: border-box; z-index:3} .box_header {padding: 0px; box-sizing: border-box;height: 120px; position: relative; } .contenitore_header .box_header:before {position: absolute;top: 0;right: 0; bottom: 0; left: 0; content: ""; background-color: rgba(37,49,90, 0.5); -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px); } .header-top {position: relative; top: 0; left: 0; width: 100%; height: 120px; padding: 0px; box-sizing: border-box; margin: 0 auto; display: block; } #logo{position:Absolute; top:35px; left:50%; transform: translateX(-50%); z-index:97} #logo img{height:120px} #logo_piccolo{position:Absolute; top:25px; left:50%; transform: translateX(-50%); z-index:97} #logo_piccolo img{height:70px} #menu{position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: none; transform: translate(0%, -100%); transition: transform .5s ease; padding: 120px 10%; box-sizing: border-box; z-index: 98; overflow-y:scroll; background-color: rgba(33,49,93,0.5);} #menu.open {transform: translate(0, 0%);} #menu .tabellona{display:table; width:100%; height:100%;} #menu .cellona{display:table-cell; vertical-align: middle;} #menu .tabellona:before {position: absolute;top: 0;right: 0; bottom: 0; left: 0; content: ""; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #menu nav {display:block; list-style: none;width: auto; padding: 0;margin: 0;} #menu nav ul {padding: 0;margin: 0;list-style: none;} #menu nav ul li {display: block; float: left; width: 100%; margin: 0px; padding: 0; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); cursor: pointer; opacity: 0; text-align:center} #menu nav ul li a {display:inline-block;color: #fff; font-size: var( --fs-h3); line-height:1.5em;text-transform: uppercase;text-decoration:none;transition: transform .4s ease;} #menu nav ul li a:hover {-moz-transform: translateX(5%);-ms-transform: translateX(5%);-o-transform: translateX(5%);transform: translateX(5%);} #menu nav ul li ul {float: left;width: 100%;margin: 0px;padding: 0;} #menu nav ul li ul li{float: left;width: 100%;margin: 0px;padding: 0 0 0 40px;} #menu nav ul li ul li a {float:left;color: #fff;font-size: 2vh;line-height:1.8em;text-transform: uppercase;text-decoration:none;transition: transform .4s ease;} #menu.open nav ul li {-moz-transform: translateY(0%);-ms-transform: translateY(0%);-o-transform: translateY(0%);transform: translateY(0%);opacity: 1} #menu nav ul li:nth-child(0) {-webkit-transition: opacity 0.4s 0.6s, -webkit-transform 0.4s 0.6s; transition: opacity 0.4s 0.6s, transform 0.4s 0.6s;} #menu nav ul li:nth-child(1) {-webkit-transition: opacity 0.4s 0.7s, -webkit-transform 0.4s 0.7s;transition: opacity 0.4s 0.7s, transform 0.4s 0.7s;} #menu nav ul li:nth-child(2) {-webkit-transition: opacity 0.4s 0.8s, -webkit-transform 0.4s 0.8s;transition: opacity 0.4s 0.8s, transform 0.4s 0.8s;} #menu nav ul li:nth-child(3) {-webkit-transition: opacity 0.4s 0.9s, -webkit-transform 0.4s 0.9s;transition: opacity 0.4s 0.9s, transform 0.4s 0.9s;} #menu nav ul li:nth-child(4) {-webkit-transition: opacity 0.4s 1.0s, -webkit-transform 0.4s 1.0s;transition: opacity 0.4s 1.0s, transform 0.4s 1.0s;} #menu nav ul li:nth-child(5) {-webkit-transition: opacity 0.4s 1.1s, -webkit-transform 0.4s 1.1s;transition: opacity 0.4s 1.1s, transform 0.4s 1.1s;} #menu nav ul li:nth-child(6) {-webkit-transition: opacity 0.4s 1.2s, -webkit-transform 0.4s 1.2s;transition: opacity 0.4s 1.2s, transform 0.4s 1.2s;} #menu nav ul li:nth-child(7) {-webkit-transition: opacity 0.4s 1.3s, -webkit-transform 0.4s 1.3s;transition: opacity 0.4s 1.3s, transform 0.4s 1.3s;} #menu nav ul li:nth-child(8) {-webkit-transition: opacity 0.4s 1.4s, -webkit-transform 0.4s 1.4s;transition: opacity 0.4s 1.4s, transform 0.4s 1.4s;} #menu nav ul li:nth-child(9) {-webkit-transition: opacity 0.4s 1.5s, -webkit-transform 0.4s 1.5s;transition: opacity 0.4s 1.5s, transform 0.4s 1.5s;} #menu nav ul li:nth-child(10) {-webkit-transition: opacity 0.4s 1.6s, -webkit-transform 0.4s 1.6s;transition: opacity 0.4s 1.6s, transform 0.4s 1.6s;} #menu nav ul li:nth-child(11) {-webkit-transition: opacity 0.4s 1.7s, -webkit-transform 0.4s 1.7s;transition: opacity 0.4s 1.7s, transform 0.4s 1.7s;} #menu nav ul li:nth-child(12) {-webkit-transition: opacity 0.4s 1.8s, -webkit-transform 0.4s 1.8s;transition: opacity 0.4s 1.8s, transform 0.4s 1.8s;} #menu nav ul li:nth-child(13) {-webkit-transition: opacity 0.4s 1.9s, -webkit-transform 0.4s 1.9s;transition: opacity 0.4s 1.9s, transform 0.4s 1.9s;} #menu nav ul li:nth-child(14) {-webkit-transition: opacity 0.4s 2.0s, -webkit-transform 0.4s 2.0s;transition: opacity 0.4s 2.0s, transform 0.4s 2.0s;} #menu nav ul li:nth-child(15) {-webkit-transition: opacity 0.4s 2.1s, -webkit-transform 0.4s 2.1s;transition: opacity 0.4s 2.1s, transform 0.4s 2.1} #secondo_menu{position:absolute; top:35px; right:35px; width:auto; font-size:1.5em ; line-height:50px; color:#fff} #lang{display:block;} #lang a{display:inline-block; width:auto; margin:0px 5px; color:#fff; text-decoration:none} #book_now {position: absolute;top: 70px;right: 40px;z-index: 97;} #book_now_header {position: absolute;top: 35px;right: 30px;z-index: 97;} .book{display:block; height:50px; line-height:50px; border:1px solid #fff; padding:0 30px; color:#fff; text-decoration:none; background:rgba(37,49,90,1); border-radius: 6px} .book:hover{background:rgba(37,49,90,0.8); color:#fff} #btn_menu {position: absolute;top: 70px;left: 30px;height: 40px;width: 50px;z-index: 97;cursor: pointer;} #btn_menu_header {position: absolute;top: 40px;left: 30px;height: 40px;width: 50px;z-index: 97;cursor: pointer;} #btn_menu_menu {position: absolute;top: 70px;left: 30px;height: 40px;width: 50px;z-index: 99;cursor: pointer;} .btn {position: relative;height: auto;width: 50px;padding: 10px;cursor: pointer;box-sizing: border-box} .btn span {display: block;width: 100%;border-radius: 0px;height: 2px;background: #fff;transition: all .3s;position: relative;} #btn_menu .btn {color: var(--colore-secondario); font-weight: 600} .btn.active span {background: #fff;} .btn span + span {margin-top: 6px;} .active span:nth-child(1) {animation: ease .7s top forwards;} .not-active span:nth-child(1) {animation: ease .7s top-2 forwards;} .active span:nth-child(2) {animation: ease .7s scaled forwards;} .not-active span:nth-child(2) {animation: ease .7s scaled-2 forwards;} .active span:nth-child(3) {animation: ease .7s bottom forwards;} .not-active span:nth-child(3) {animation: ease .7s bottom-2 forwards;} @keyframes top { 0% {top: 0;transform: rotate(0);} 50% {top: 8px;transform: rotate(0);} 100% {top: 8px;transform: rotate(45deg);} } @keyframes top-2 { 0% {top: 8px;transform: rotate(45deg);} 50% {top: 8px;transform: rotate(0deg);} 100% { top: 0;transform: rotate(0deg);} } @keyframes bottom { 0% {bottom: 0;transform: rotate(0);} 50% {bottom: 8px;transform: rotate(0);} 100% {bottom: 8px;transform: rotate(135deg);} } @keyframes bottom-2 { 0% {bottom: 8px;transform: rotate(135deg);} 50% {bottom: 8px;transform: rotate(0);} 100% {bottom: 0;transform: rotate(0);} } @keyframes scaled { 50% {transform: scale(0);} 100% {transform: scale(0);} } @keyframes scaled-2 { 0% {transform: scale(0);} 50% {transform: scale(0);} 100% {transform: scale(1);} } @media screen and (max-width: 1200px) { a{cursor: pointer;} .contenitore_header { height:60px;} .header{height:60px; } .box_header {height:60px; } .header-top {height: 60px; } #logo{top:20px; } #logo img{height:50px} #logo_piccolo{top:10px; left:50%; line-height:20px; transform: translateX(-50%) } #logo_piccolo img{height:40px} #btn_menu {top: 25px;left: 10px;} #btn_menu_header {top: 10px;left: 10px;} #btn_menu_menu {top: 30px;left: 10px;} #book_now {top:30px;right: 10px;} #book_now_header {top: 15px;right: 10px;} .book{ height:auto; line-height:1em; padding:10px; font-size:0.8em;} #secondo_menu{position:absolute; top:15px; right:20px; width:auto; line-height:35px; color:#fff} } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ CUSTOM ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ .testata{display:block; width:100%; height:190px; position:relative; } #centro{display:block; width:100%; } #contenitore_video{display:block; width:100%; box-sizing: border-box; position:relative; padding:0px 40px 40px 40px; height:auto} #video{display:block; width:100%; height:75vh; min-height:600px; padding:0px; box-sizing: border-box; position:relative; overflow:hidden;border-radius:40px; } #video video{position:absolute; top:0px; left:0px; height:auto; width:100%; overflow: hidden} .intestazione{display:block; width:100%; margin:0px} .tondi{border-radius:30px;} #payoff{position:absolute; bottom:var(--margine); left:0px; width:100%; text-align:center;} h1{margin: 0; font-size: var(--fs-display); font-weight:400; line-height: var(--lh-heading); letter-spacing: -0.035em;} h2{margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.035em;} #preventivo{background:var(--colore-secondario)} .form{display:block; width:100%; color:#000} #footer{display:block; width:100%; padding:var(--margine-sezione) 0px;} #footer .logo_footer{text-align:center; display:block; width:100%; margin-bottom:3vh} #footer .logo_footer img{display:inline-block; width:100%; max-width:250px} #footer .indirizzo{text-align:center; display:block; width:100%;} #footer ul{display:block; width:100%; list-style:none; margin:0; padding:0; line-height:1.6em;} #footer ul.terms{font-size:1em; text-align:right} #footer ul.menu_footer{font-size:1.4em; text-transform: uppercase} #footer ul.menu_footer.dx{text-align:right} #footer ul li{display:block; width:100%; margin:0; padding:0; } .spaziata{display:block; padding:20px; box-sizing: border-box; color:var(--colore-secondario)!important} .cellula{background:#fff; border-radius:40px; text-align: center; padding:5vw; box-sizing: border-box} .cellula .num{display:block; width:100%;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size:5rem; font-style: italic; line-height:1em} .cellula .tit{display:block; width:100%; padding:10px 0px; box-sizing: border-box; font-size:2em; line-height:1em} .cellula .log img{display:block; width:100%;} #listone{margin:0; padding:0; width:100%; list-style: none} #listone li{margin:0; padding:20px 0px; width:100%; display:block; font-size: clamp(1rem, 2vw, 2rem); line-height: 1.4em; border-bottom:1px solid #fff; } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ MEDIA QUERY ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ @media screen and (max-width: 1200px) { /*BASE*/ .testo_destra{text-align:center!important} .t-right{text-align:center!important} .fix-top-mobile{margin-top:20px} .add-top{margin-top:40px} .ptop{padding-top:var(--margine-mobile)} .margini{padding:var(--margine-mobile) 0px} .mtop{padding-top:20px} .mbottom{padding-bottom:var(--margine-mobile)} .iniziale{padding:0px!important;} .paddington{padding:0px 20px; box-sizing: border-box} .sezione{ padding:20px 0px;} .pulsante{ margin:10px 0px; } .menu{visibility: visible} .testata{ height:90px; } #contenitore_video{display:block; width:100%; box-sizing: border-box; position:relative; padding:0px 10px 10px 10px; height:auto} #video{display:block; width:100%; height:auto; min-height:auto; padding:0px; box-sizing: border-box; position:relative; overflow:hidden;border-radius:20px; } #video video{position:relative; top:0px; left:0px; height:auto; width:100%; overflow: hidden; border-radius:20px;} #payoff{bottom:20px;} h1{font-size: var( --fs-mobile);} .riga .singolo{width:100%;} } @media screen and (max-width: 998px) { #footer{text-align:center; padding:20px 0px; font-size:0.8em} #footer .logo_footer{ margin-bottom:20px} #footer .logo_footer img{ max-width:140px} #footer ul{line-height:1.6em;} #footer ul.menu_footer{display: none} #footer ul.terms{margin-top:20px; text-align:center; } }