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

/*general*/
html {/* font-size: 62.5%*/ font-size: 10px; outline: none; }
body { font-family: "Nunito", sans-serif; color: #444; font-weight: 400; background-color: #fff; }
.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: #444; outline: none }
a:focus, input:focus, textarea:focus, select:focus, label:focus {outline: none!important }
p { line-height: 1.8; font-size: 1.6rem; }
.container { max-width: 144rem; margin: 0 auto; padding: 0 2%; width: 100%; }
.container_small { max-width: 74rem; margin: 0 auto; padding: 0 2%; width: 100%; }
button { color: #444; font-size: 1.6rem; cursor: pointer; background-color: transparent; border: none; font-family: "Nunito", sans-serif;}
input, textarea, select { color: #444; font-size: 1.4rem; font-weight: 600; font-family: "Nunito", sans-serif;}
::placeholder { font-weight: 600; }
.center { text-align: center; }
.clear { clear: both; }
.flex { display: flex; flex-wrap: wrap; }
.clearfix::after { content:""; display: table; clear: both; }
.upper { text-transform: uppercase; }
.pr { position:relative; }
.font { letter-spacing: .4px; font-family: "Nunito", sans-serif; }

/*colors*/
.fff {color: #F4FCFD}
.bglblu { background-color: #F4FCFD }
.bgfff { background-color: #fff;}
.orange { color:#FF9D00 }
.bgorange { background-color:#FF9D00 }
.blu { color:#004AAC }
.bgblu { background-color:#004AAC }
.bggray { background-color:#444 }
.blu2 { color:#016D82 }
.bgblu2 { background-color:#016D82 }
.bgblu3 { background-color:#005E71 }
.bggra_yellow { background: rgb(255,186,0); background: linear-gradient(180deg, rgba(255,186,0,1) 0%, rgba(255,157,0,1) 100%); }
.bggra_yellow2 { background: rgb(255,186,0); background: linear-gradient(90deg, rgba(255,186,0,1) 0%, rgba(255,157,0,1) 100%); }

/*fontsize*/
.w300 { font-weight:300 }
.w400 { font-weight:400 }
.w500 { font-weight:500 }
.w600 { font-weight:600 }
.w700 { font-weight:700 }
.w800 { font-weight:800 }
.w900 { font-weight:900 }
.w1000 { font-weight:1000 }

.title { align-items:center; display:flex; }
.title img { margin-right:1rem }
.t30 { font-size:3rem }
.t50 { font-size:5rem }
.t35 { font-size:3.5rem }
.t20 { font-size:2rem; line-height:1.5 }
.t14 { font-size:1.4rem }

.mt1 { margin-top:1rem }
.mt2 { margin-top:2rem }
.mt3 { margin-top:3rem }
.mt4 { margin-top:4rem }
.mb1 { margin-bottom:1rem }
.mb2 { margin-bottom:2rem }
.mb3 { margin-bottom:3rem }
.mb4 { margin-bottom:4rem }

.br { border-radius:2rem }
.br50 { border-radius:50% }
.sha { box-shadow: 0 0 20px rgba(0, 0, 0, 0.16); }

.cta { transition: .3s; display: inline-block; font-size: 2rem; font-weight: 600; padding:1.3rem 2.5rem; border-radius: 50px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14); }
.ctaimg img { vertical-align:middle; height:3rem; margin:-.7rem 1.3rem 0 0 }
.ctaimg { font-size:3rem; font-weight:700 }
.cta:hover { padding: 1.3rem 3.5rem }

/*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: 2; }
.back-to-top { transition: .3s; position: absolute; z-index: 2; bottom: 2rem; right: 2rem; }
.back-to-top img { transition: .3s; width: 3.8 rem; }
.back-to-top:hover {cursor: pointer; }

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

header { background-color: transparent; z-index:10; width: 100%; margin-top: 8rem; position: absolute;max-width: 300rem;}
header .flex { padding: 2rem 0; align-items:center; justify-content:space-between; position:relative; }
header .logo { position: absolute; left: 0; right: 0; margin: 2rem auto 0; top: 0; height: 100%; display: flex; align-items: center; transition: .3s; width:16rem }
header .logo img { width:100% }
header .nome::after { content: url(../img/line.svg); position:absolute; bottom:-.5rem; left:0; width:100% }
header .cta { z-index:3 }
.sticky { background: rgb(255,186,0); background: linear-gradient(90deg, rgba(255,186,0,1) 0%, rgba(255,157,0,1) 100%); margin-top: 0; box-shadow: 0 0 20px rgba(0, 0, 0, .2); position: fixed; transition: 1s; width: 100%; top: 0; max-width: 300rem; }
.hidden-sticky { }
.sticky .logo { transition: .6s; width:6rem; margin-top:0 }
.trans { transition:.6s }

.mainimg { position: relative; width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; padding-bottom:2rem }
.mainimg .bg { opacity: .1; position: absolute; top: 0; left: 0; width:100%; object-fit:cover; height:100%; object-position:center bottom; }
.mainimg .space { height: 16rem; width:100%; position:absolute; bottom:0; left:0 }

.errorp { min-height:100vh }
.error { font-size: 30rem }

.txtmain .t2 { max-width: 100rem; margin:1rem auto 0; }
.txtmain { position: relative; margin-top: 30rem; justify-content:space-between; align-items:center; }

.video { z-index: 2; max-width:75rem; width: 100%; height:50rem; margin: 5rem auto 0; position:relative; display:flex; justify-content:center; }
.video .play { position:absolute; transform: translate(-50%, -50%); top:50%; left:50% }
.video .logo { position:absolute; right:2rem; bottom:2rem }
.fancybox__backdrop { background:rgba(1, 109, 130, .9)!important }
.fancybox__content { box-shadow: 0 0 20px rgba(0, 0, 0, .15); }
.f-button.is-close-btn { background: #444!important }

.pad { padding:8rem 0 }
#prenota .c50 { width:50%; border-right:2px solid rgba(243, 252, 253, .22); padding-right:5% }
#prenota .c50:last-child { width:45%; border-right:0 }
#prenota .flex { justify-content:space-between; }

.form { margin-top:3rem }
.form input, .form textarea, select { font-size: 2rem; margin-bottom: 2rem; border: 0; width:100%; color:#444; background-color:rgba(255, 255, 255, 1); border-radius:50px; padding:1rem 2rem; }
::placeholder { color:#444; opacity: 0.6; }
.form textarea { padding:2rem 3rem }
.form .cl25 { width:24% }
.form .cl50 { width:49% }
.form .inputs { justify-content:space-between; }
.form .inputs.flex-end { align-items:flex-end; }
select { width: 100%; border: 0; color:#444;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../img/select.svg) 94% / 10px no-repeat rgba(255, 255, 255, 1);}
.form .cl50 select { background: url(../img/select.svg) 97% / 10px no-repeat rgba(255, 255, 255, 1); }

#perche .flex { justify-content:space-between; margin-top:2rem }
#perche .box { width:24%; padding:4rem 3rem 5rem; margin-top:2rem; position:relative; overflow:hidden; }
#perche .box .line { height:2rem; width:100%; position:absolute; bottom:0; left:0 }

#programma .flex { justify-content:space-between; margin-top:10rem }
#programma .box { padding: 3rem 3rem 4rem; width:49%; background-color:rgba(255, 255, 255, .15); }
#programma .box img { margin-top:-11.5rem; width:16rem }
.mw100 { max-width:100rem; margin:6rem auto 4rem; }
.mw100.t35 { line-height:1.4 }

#gallery { max-width: 75rem; width: 100%; margin: 0 auto 4rem; overflow:hidden; }
#gallery .my-arrows {position: absolute; top: 50%; width: 94%; max-width: 144rem; z-index: 3; margin: 0 auto; left: 0; right: 0}
#gallery .my-arrows button:focus {outline: none;}
#gallery .my-prev { background-image:url(../img/prev.svg); left:0 }
#gallery .my-next { right: 0; position: absolute; background-image:url(../img/next.svg); }
#gallery .my-prev, #gallery .my-next { background-size: cover; 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;}
#gallery .my-prev:hover , #gallery .my-next:hover { opacity:1 }
#gallery .my-prev svg, #gallery .my-next svg { fill:transparent; }
#gallery .splide__pagination { display: none; text-align: center; width: 100%!important; bottom: 3rem; height: 6rem; z-index: 1}
#gallery .splide__pagination__page { border-radius: 0; background: #fff; opacity: 0.5; width: 5rem; height: 3px; margin: 5px;cursor: pointer;display: block;}
#gallery .splide__pagination__page:focus {outline: none;}
#gallery .splide__pagination__page.is-active {background: #fff; opacity: 1; transform: inherit;}
#gallery .splide__track, #gallery .splide__track { width:100% }
#gallery img { width:100%; height:100%; max-height: 80vh; object-fit:cover; object-position:center; }

footer p, footer a { color:#fff }
footer a:hover { color: #FF9D00 }
footer { padding:6rem 0 }
footer .credits { text-align: left; position: relative; padding-top:3rem; margin-top:6rem; border-top:1px solid rgba(255, 255, 255, .2); }
footer .flex { justify-content:space-between; flex-wrap:nowrap; }
footer .cl { max-width:50rem; margin-right:5rem }
footer .social img { margin-right:1rem }
footer .credits p, footer .credits a { font-size:1.2rem }
footer .credits img { position:absolute; left:0; right:0; margin:0 auto; }

/*-------------------------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: #444;
}

/* 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: 1600px) {
html { font-size:9px }
}

@media (max-width: 1024px) {
html { font-size:9.5px }
#prenota .c50 { text-align: center; width:100%!important; padding:0 0 5rem; border:0; border-bottom:2px solid rgba(243, 252, 253, .22); }
#prenota .c50:last-child { border:0; padding-top:5rem }
.title { justify-content:center; }
.form .cl25 { width:49% }
.form .cl50 { width:100% }
.select p { margin-bottom:5px }
#perche .box { width:49% }
}

@media (max-width: 768px) {
header .nome { display:none; }
header .logo { width:14rem; position:relative; margin:0 0 4rem }
header { margin:0 0 4rem }
header .flex { justify-content:center; flex-direction:column; }

.t50 { font-size:4.5rem; line-height:1.2 }
.t35 { font-size:3.3rem; line-height:1.2 }
.t30 { font-size:2.8rem; line-height:1.2 }

#form .title { flex-direction:column; text-align:center; }
#form .title img { margin-bottom:1.5rem }
.txtmain { margin-top:33rem }

#programma .box { width:100%; margin-top:3rem }
#programma .box:last-child { margin-top: 12rem }
#programma .box img { width:15rem; margin-top: -10.5rem; }

#prenota.pad { padding: 4rem 0 }
}

@media (max-width: 600px) {
.title { flex-direction:column; text-align:center; }
.title img { margin-bottom:1.5rem }
html { font-size:9.4px }
.back-to-top img { width:4rem }
.back-to-top { bottom:1.5rem; right:1.5rem }
.form .cl25 { width:100% }
.form textarea { border-radius:2rem }
#perche .box { width:100%; text-align:center; }
.error { font-size: 30vw }
}

@media (max-width: 500px) {
.t50 { font-size:4rem; line-height:1.2 }
.t35 { font-size:3rem; line-height:1.3 }
.t30 { font-size:2.5rem; line-height:1.3 }
.ctaimg { font-size:2.5rem }

.video .play { width:5rem }
.video { height:70vw }
.video .logo { width:5rem }
}