/* VARIABILI */
:root {
	--white: #fff;
	--black: #000;
	--primary-color: #ce4531;
	--secondary-color: #ce4531;
	--orange: #EB7405;
	--grey: #626262;
	--grey-lgt: #F6F6F6;
	--green: #5ABA88;
	--green-lgt: #9BD45A;
	--red: #B13838;
	--red-lgt: #DB5B5B;
	--gold: #8C7C2F;
	--gold-lgt: #D4C474;
	--blue: #2A7BB5;
	--blue-lgt: #21ADDC;
	--custom-color1: #ce4531;
	--custom-color2: #72889e;
	--custom-color3: #0d0d17;

	--portopino_primary-color: #679A3D;
	--portopino_secondary-color: #FFD006;

	--font-family-sanserif: "D-DIN Condensed";
	--font-family-ico: "Font Awesome 5 Pro";
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-bold: 600;
	--font-weight-solid: 900;

	--font-size-base: 18px;
	--font-size-extra: 60px;
	--font-size-big: 40px;
	--font-size-medium: 28px;
	--font-size-little: 20px;
	--font-size-mini: 16px;
}


@font-face { font-family: 'D-DIN Condensed'; src:url('../fonts/D-DINCondensed.woff2') format('woff2'), url('../fonts/D-DINCondensed.woff') format('woff'), url('../fonts/D-DINCondensed.svg#D-DINCondensed') format('svg'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Font Awesome 5 Pro'; src:url('../fonts/FontAwesome5Pro-Solid.woff2') format('woff2'), url('../fonts/FontAwesome5Pro-Solid.woff') format('woff'), url('../fonts/FontAwesome5Pro-Solid.svg#FontAwesome5Pro-Solid') format('svg'); font-weight: 900; font-style: normal; font-display: swap;}
@font-face { font-family: 'Font Awesome 5 Pro'; src:url('../fonts/FontAwesome5Pro-Light.woff2') format('woff2'), url('../fonts/FontAwesome5Pro-Light.woff') format('woff'), url('../fonts/FontAwesome5Pro-Light.svg#FontAwesome5Pro-Light') format('svg'); font-weight: 300; font-style: normal; font-display: swap;}
@font-face { font-family: 'Font Awesome 5 Pro'; src:url('../fonts/FontAwesome5Pro-Regular.woff2') format('woff2'), url('../fonts/FontAwesome5Pro-Regular.woff') format('woff'), url('../fonts/FontAwesome5Pro-Light.svg#FontAwesome5Pro-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap;}

@font-face { font-family: "Font Awesome 5 Pro"; src:url("../fonts/FontAwesome5Brands-Regular.woff") format("woff"), url("../fonts/FontAwesome5Brands-Regular.ttf")  format("truetype"), url("../fonts/FontAwesome5Brands-Regular.svg#FontAwesome5Brands-Regular") format("svg"); font-style: normal; font-weight: 400; font-display: swap; }


/* BODY */
* { box-sizing: border-box; outline: none;}
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-family-sanserif); color: var(--grey); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: 1.3; overflow-x: hidden;}
a { text-decoration: none; color: var(--primary_color);}
.desktop a { -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; transition: all .6s; }
.text_dyn a, .text_dyn a:hover, .text_dyn a:focus, .text_dyn a:visited { color: var(--secondary-color); }
.text_dyn .accordion a, .text_dyn .accordion a:hover, .text_dyn .accordion a:focus, .text_dyn .accordion a:visited { color:var(--secondary-color); }
b, strong { font-weight: bold; }
img { vertical-align: middle; max-width: 100%; }
p { margin: 0 0 15px 0; }
h1, h2, h3, h4, h5, h6 { margin: 0px; font-size: inherit; font-weight: inherit; line-height: 1; }
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }
.container-fluid { margin: 0 auto; padding:0;}
body.noslide { padding-top: 130px}

/* Travel Appeal */
#travel_appeal_widget_container { position: fixed; z-index: 9; max-width: 190px!important; bottom: 15px; left: 15px; }
#travel_appeal_widget_container #travel_appeal_widget { max-width: 180px!important; }
#travel_appeal_widget_header { text-align: center!important; }
#travel_appeal_widget_container #travel_appeal_widget_guest_text { font-size: 80%!important; }


/* Header */
.menu_model_1 { display: none;}
.booking_model_1 { display: none;}
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; transition: .3s}
header .col { display: inline-flex; align-items: center; width: 33.333%; color: var(--white); font-size: var(--font-size-little); text-transform: uppercase}
header .col a { color: var(--white); }
header .col.logo { display: none;}
header .col.first { justify-content: left; position:relative; z-index: 2}
header .col.last { justify-content: right;}
header .col .phone { margin: 0 40px 0 90px}
header #menu_btn { width: 25px; height: 14px; cursor: pointer; position: relative; z-index: 2}
header #menu_btn .bars { position: relative; height: 14px}
header #menu_btn .bar { position: absolute; z-index: 1; width: 100%; height: 2px; background-color: var(--white); transition: .3s}
header #menu_btn .bar.first { top: 0;}
header #menu_btn .bar.central { top: 6px;}
header #menu_btn .bar.last { top: 12px; width: 15px}
.icon_solid_link a:before, .icon_solid > div:before {font-family: var(--font-family-ico); font-weight: var(--font-weight-solid); font-size: var(--font-size-mini); margin-right: 6px}
.phone a:before { content: '\f095'; }
.offers_btn a:before { content: '\f06b';}
.social_cnt .varscript { display: flex; align-items: center;}
.socialnet a { margin: 0 5px}
.socialnet a:before { font-family: var(--font-family-ico); font-weight: var(--font-weight-regular); font-size: var(--font-size-little); margin-right: 6px }
.socialnet.facebook a:before { content: '\f09a'}
.socialnet.instagram a:before { content: '\f16d'}
.socialnet.tripadvisor a:before { content: '\f262'}
.booking_btn { background-color: var(--primary-color); padding: 10px 30px; margin: 0 40px; text-align: center;}
.language_cnt { position: relative}
#language_btn:after { content: '\f0d7'; font-family: var(--font-family-ico); font-weight: var(--font-weight-solid); font-size: var(--font-size-mini); margin-left: 4px}
#language { display: none;}

/* tripadvisor */
.tripadvisor_tc { position: absolute; bottom: 60px; left: 30px; z-index: 2; width: 100px; height: 100px; background-color: var(--white); border-radius: 100%; text-align: center;}
.tripadvisor_tc a { font-size: 0; }
.tripadvisor_tc a:before { content: url('../images/bg/traveller_choice_2021.svg'); position: relative; width: 75px; height: 88px; top: 10px}

/* Slideshow */
.slideshow_cnt { position: relative; background-color: var(--black);}
.slideshow_cnt .logo_cnt { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); filter: brightness(0) invert(1);}
#slideshow img { width: 100%; opacity: .9}
.body_home #slideshow img { height: 100vh; object-fit: cover; }
.scroll_down { text-transform: uppercase; color: var(--white); font-size: var(--font-size-little); text-align: center; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: 40px}
.scroll_down:before { position: absolute; width: 1px; height: 40px; content: ''; background-color: var(--grey-lgt); bottom: -60px; z-index: 2}
#slideshow .elem { position: relative;}
#slideshow .slick-dots { position: absolute; bottom: 10px; left: 30px; z-index: 2}
#slideshow .slick-dots button { background-color: var(--white);}
#slideshow .caption { position: absolute; top: 50%; transform: translateY(calc(-50% + 160px)); z-index: 2; text-align: center; left: 0; width: 100%; color: var(--white); text-transform: uppercase}
#slideshow .caption h3 { font-size: var(--font-size-big)}
#slideshow .caption p {font-size: var(--font-size-little)}

/* Infosplash */
#infosplash .zsimplebutton { margin-right: 20px}
#infosplash .title a { color: var(--secondary-color); font-size: var(--font-size-medium);}

/* Modal */
.modal { display: none;}

/* 404 */
.body_404 header, .body_404 footer { display: none}
.body_404 #page { height: 100vh; text-align: center; display: flex; flex-direction: column; justify-content: center; color: var(--white);}
.big_number { font-size: calc(var(--font-size-big) + 320px);  }
.body_404 .button_model_1 { margin-top: 30px}
.body_404 .section_text { font-size: var(--font-size-medium); }
.body_404 #page { background-image: url('../images/bg/404_bg.gif'); background-size: cover; background-position: center;}

/* Elementi comuni */
.slick-dots { padding: 0; list-style-type: none; display: flex!important; align-items: center; justify-content: center;}
.slick-dots button { font-size: 0; background-color: var(--secondary-color); width: 60px; height: 5px; cursor: pointer; border: unset; margin: 0 5px; opacity: .5; transition: .3s}
.slick-dots .slick-active button { opacity: 1}
.wrap_cnt { max-width: 1290px; margin: 0 auto}
.title_model_1, .title_model_1 h1, .page .title_model_1 h2 { text-transform: uppercase; color: var(--secondary-color); font-size: var(--font-size-big); margin-bottom: 15px}
.text_model_1 { text-transform: uppercase; font-size: var(--font-size-little);}
.button_model_1 a { background-color: var(--orange); padding: 10px 30px; margin: 0 40px; color: var(--white); text-transform: uppercase; display: inline-block;}
.button_model_2 a { background-color: var(--primary-color); padding: 10px 30px; margin: 0 40px; color: var(--white); text-transform: uppercase; display: inline-block;}
.button_model_2.single_btn a { margin: 0;}
.label_model_1 .fieldkey { color: var(--primary-color); text-transform: uppercase}
#showcase .title_model_1, #showcase .text_model_1 { text-align: center;}
#showcase { padding-top: 60px}
.noslide #showcase { padding-top: 0}
.nomargin, .nomargin a { margin: 0}
.page h2 { color: var(--secondary-color); font-size: calc( var(--font-size-medium) - 5px ); text-transform: uppercase}
.page h3 { color: var(--secondary-color); font-size: var(--font-size-little); text-transform: uppercase}
.page .text_desc .text_dyn .fieldvalue { clear: both; margin-bottom: 40px; overflow: hidden;}
.page .text_desc .text_dyn .fieldvalue img.left { margin-bottom: 30px!important; }
/* Stile per Camere pagine standard e offerte */
.page { padding: 0 15px}
.page .intro { padding: 60px 0}
.noslide .page .intro { padding-top: 0}
.amenities { padding: 60px 15px; background-color: var(--grey-lgt);}
.amenities .fieldkey { color: var(--secondary-color); font-size: var(--font-size-medium);}
.amenities ul { text-transform: uppercase; display: flex; flex-wrap: wrap; padding-left: 18px}
.amenities ul li { width: 50%; margin-bottom: 15px}
.room_intro { display: flex; margin-bottom: 30px}
.starred_amenities { margin-left: auto;}
.starred_amenities, .starred_amenities .zcheckbox { display: inline-flex; align-items: center;}
.starred_amenities .zinput { margin: 15px 15px 0; text-align: center}
.starred_amenities .zcheckbox .fieldvalue { display: inline-flex; text-align: center; flex-direction: column; margin: 0 15px;}
.starred_amenities .zinput:before, .starred_amenities .zcheckbox .fieldvalue:before { font-family: var(--font-family-ico); font-weight: var(--font-weight-solid); font-size: var(--font-size-medium); text-align: center; color: var(--primary-color)}
.starred_amenities .zinput.g6:before { content: '\f1b2';}
.starred_amenities .zinput.g7:before { content: '\f183';}
.starred_amenities .zcheckbox .fieldvalue.v0:before { content: '\f1eb';}
.starred_amenities .zcheckbox .fieldvalue.v1:before { content: '\e050'; transform: rotate(180deg)}
.starred_amenities .zcheckbox .fieldvalue.v2:before { content: '\f8f4';}
.starred_amenities .zcheckbox .fieldvalue.v3:before { content: '\f8e5';}
.starred_amenities .zcheckbox .fieldvalue.v4:before { content: '\f7b7';}
.starred_amenities .zcheckbox .fieldvalue.v6:before { content: '\f4b8';}
.text_desc.has_submenu { display: flex; align-items: flex-start;}
.has_submenu .desc_cnt { width: calc(100% - 320px); padding-right: 30px}
.section_submenu { width: 320px; background-color: var(--pink);}
.section_submenu .varsimple { padding: 15px; text-align: center; background-color: var(--primary-color); color: var(--white); text-transform: uppercase; font-weight: var(--font-weight-bold); font-size: var(--font-size-little);}
.submenu { padding: 0 15px;}
.submenu #tree > li { margin-bottom: 15px; border-bottom: 1px solid var(--secondary-color); padding-bottom: 15px}
.submenu #tree > li:last-of-type { margin-bottom: 0}
.submenu #tree > li.active { display: none;}
.submenu #tree > li > a { color: var(--secondary-color); text-transform: uppercase}
.offers_details { display: flex; align-items: center; padding: 15px 0 30px; border-bottom: 5px solid var(--grey-lgt); margin-bottom: 40px}
.room_intro .starred_amenities .zinput {margin-top: 0}
/* ztemplate_model_3 - Spostato qui perche visibile da subito in vetrina */
.ztemplate_model_3 { position: relative; margin-top: 150px; }
.ztemplate_model_3 .wrap_cnt { padding: 0 15px }
.ztemplate_model_3:before { position: absolute; top: -260px; z-index: -1; content: ''; width: 100%; height: 200%; /* background-image: url('../images/bg/bg_offers.svg?v=2'); */ background-repeat: no-repeat; background-size:cover; background-position: right;}
.ztemplate_model_3 .ztemplate { max-width: 920px; margin: 60px auto 0}
.ztemplate_model_3 .caption-cnt { display: flex; align-items: center}
.ztemplate_model_3 .caption { width: 60%; position: relative}
.ztemplate_model_3 .caption-alt { width: 40%; padding: 40px}
.ztemplate_model_3 .title a { color: var(--secondary-color); font-size: var(--font-size-medium)}
.ztemplate_model_3 .caption .zinput { background-color: var(--orange); padding: 10px; color: var(--white); font-size: var(--font-size-little); position: absolute; top: 0; right: 0; z-index: 2; display: flex}
.ztemplate_model_3 .caption .zinput .fieldvalue { margin-left: 6px}
.ztemplate_model_3 .slick-arrow { position: absolute; z-index: 1; left: -70px; }
.ztemplate_model_3 .slick-prev { bottom: 50px; }
.ztemplate_model_3 .slick-next { bottom: 0; }
.ztemplate_model_3.showcase { margin-top: 60px}
.ztemplate_model_3.showcase .ztemplate { max-width: unset; padding: 0 60px}
.ztemplate_model_3.showcase .box { display: flex; flex-wrap: wrap; justify-content: center;}
.ztemplate_model_3.showcase .box.align_left { justify-content: flex-start;; }
.ztemplate_model_3.showcase:before { display: none;}
.ztemplate_model_3.showcase .elem { width: calc((100% / 3) - 30px); margin: 0 15px 60px}
.ztemplate_model_3.showcase .caption-cnt { flex-direction: column;}
.ztemplate_model_3.showcase .caption-alt, .ztemplate_model_3.showcase .caption { width: 100%}
.ztemplate_model_3.showcase .caption-alt { padding: 20px}
.ztemplate_model_3.showcase .giftbox .elem { width: calc((100% / 4) - 30px); margin: 0 15px 60px}

/* ztemplate_model_5 - Spostato qui perche visibile da subito in vetrina */
.ztemplate_model_5 .book_room { position: absolute; top: -60px; right: 135px; margin: 0; z-index: 2; margin-top: 0!important}
.ztemplate .zlink.book_room a { background-color: var(--primary-color);}
.ztemplate_model_5 .ztemplate .zsimplebutton a { background-color: var(--custom-color2);}
body.en .ztemplate_model_5 .book_room { right: 120px;}
body.de .ztemplate_model_5 .book_room { right: 162px;}
body.fr .ztemplate_model_5 .book_room { right: 162px;}
.ztemplate_model_5 { width: calc(100% - 200px); margin: 150px auto; text-align: center;}
.ztemplate_model_5 .ztemplate { margin: 60px auto 0}
.ztemplate_model_5 .ztemplate img { opacity: .8}
.ztemplate_model_5 .caption-cnt { position: relative; background-color: var(--black)}
.ztemplate_model_5 .caption-alt { position: absolute; top: 0; right: 0; z-index: 2; background-color: var(--primary-color); color: var(--white); text-transform: uppercase; display: flex; padding: 15px}
.ztemplate_model_5 .zinput { margin: 0 15px; text-align: center}
.ztemplate_model_5 .zcheckbox .fieldvalue { display: inline-flex; text-align: center; flex-direction: column; margin: 0 15px;}
.ztemplate_model_5 .zinput:before, .ztemplate_model_5 .zcheckbox .fieldvalue:before { font-family: var(--font-family-ico); font-weight: var(--font-weight-solid); font-size: var(--font-size-medium); text-align: center; }
.ztemplate_model_5 .zinput.g6:before { content: '\f1b2';}
.ztemplate_model_5 .zinput.g7:before { content: '\f183';}
.ztemplate_model_5 .zcheckbox .fieldvalue.v0:before { content: '\f1eb';}
.ztemplate_model_5 .zcheckbox .fieldvalue.v1:before { content: '\e050'; transform: rotate(180deg)}
.ztemplate_model_5 .zcheckbox .fieldvalue.v2:before { content: '\f8f4';}
.ztemplate_model_5 .zcheckbox .fieldvalue.v3:before { content: '\f8e5';}
.ztemplate_model_5 .zcheckbox .fieldvalue.v4:before { content: '\f7b7';}
.ztemplate_model_5 .zcheckbox .fieldvalue.v6:before { content: '\f4b8';}
.ztemplate_model_5 .caption-add { position: absolute; z-index: 2; left: 0; text-align: left; bottom: -90px; opacity: 0; width: 100%; background-color: rgba(0,0,0,.5); border-bottom: 10px solid var(--primary-color); padding: 25px 15px 15px 25px; color: var(--white); transition: .3s; transition-delay: .4s}
.ztemplate_model_5 .elem.slick-current .caption-add { bottom: 0; opacity: 1}
.ztemplate_model_5 .zsimplebutton a { position: absolute; top: -30px; right: 15px; margin: 0; z-index: 2; margin-top: 0!important}
.ztemplate_model_5 .title a { color: var(--white); font-size: var(--font-size-extra); position: absolute; top: -40px}
.ztemplate_model_5 .ztextarea { font-size: var(--font-size-medium);}
.ztemplate_model_5.showcase { margin: 0 auto}
.ztemplate_model_5.showcase .elem { max-width: 1570px; margin: 0 auto 120px;}
.ztemplate_model_5 .caption-add { bottom: 0; opacity: 1}
.ztemplate_model_5.nextroom { text-align: left; margin-top: 150px}
.ztemplate_model_5.nextroom .ztemplate { margin-top: 15px}

/* Album */
.album_cnt { display: flex; flex-wrap: wrap; margin-top: 60px}
.album { width: calc((100% / 3) - 30px); margin: 0 15px 60px}
.album_title { color: var(--secondary-color); font-size: var(--font-size-medium); text-transform: uppercase;}
.body_album .slideshow_cnt { display: none;}

/* seo */
.top_seo { /* text-transform: uppercase; */ margin-bottom: 30px}
#showcase .top_seo { text-align: center}
.page .top_seo { display: inline-block; margin-left: 30px}
.top_seo { color: var(--secondary-color); position: relative; display: table; margin: 0 auto;}
.top_seo:before { position: absolute; content: ''; z-index: 1; top: 50%; left: -30px; width: 20px; height: 2px; background-color: var(--secondary-color);}
.top_seo:after { position: absolute; content: ''; z-index: 1; top: 50%; right: -30px; width: 20px; height: 2px; background-color: var(--secondary-color);}
body.body_home .top_seo { margin: 0 0 15px;}
body.body_home .top_seo:before, body.body_home .top_seo:after { display: none;}

/* Form privacy */
#privacy_email_req { margin: 40px 0 0}
form#privacy_email_req .caption-fields .field { float: none;}

/* Offerte Sincronizzate con Ermes */
.ztemplate_model_3 .zlink { display: inline-block;} /* mettere display inline block */
.ztemplate_model_3 .caption-add { display: none;}
.ztemplate_model_3 .g11 .fieldkey { display: none;}
.ztemplate_model_3 .g11 .fieldvalue { display: none;}
.ztemplate_model_3 .zsimplebutton { display: inline-block; margin-right: 10px;}
.ztemplate_model_3 .caption-alt { width: 50%;}
.ztemplate_model_3 .g16 { border-bottom: 1px solid #dedede; display: flex; align-items: center; padding: 5px 0; margin: 15px 0;}
.ztemplate_model_3 .g16:before, .offers_validity:before { font-family: var(--font-family-ico); content: '\f073'; color: var(--secondary-color); margin-right: 5px;}
.offer_info .g11 .fieldkey { display: none;}
.offer_info .g11 .fieldvalue { display: none;}

/* Pagina ingterna Camera */
.body_camera .text.g3 .fieldkey { display: none;}




/* Smartphone */
.smartphone.body_home #slideshow img { height: calc( 100vh - 46px); }
.smartphone .ztemplate_model_2 { padding: 0; margin: 50px 0 60px}
.smartphone .ztemplate_model_2 .slick-arrow { top: calc(100% + 15px);}
.smartphone .ztemplate_model_2 .slick-prev { left: calc(50% - 40px)}
.smartphone .ztemplate_model_2 .slick-next { left: calc(50% + 10px)}
.smartphone .ztemplate_model_3:before { display: none;}
.smartphone .ztemplate_model_3 .caption-cnt { flex-direction: column;}
.smartphone .ztemplate_model_3 .caption, .smartphone .ztemplate_model_3 .caption-alt { width: 100%}
.smartphone .ztemplate_model_3 .caption-alt { padding: 15px}
.smartphone .ztemplate_model_3 .ztemplate { padding: 0 15px; margin-top: 0}
.smartphone .ztemplate_model_4 { margin-top: 60px}
.smartphone .ztemplate_model_4 .caption { padding: 15px}
.smartphone .ztemplate_model_5 { width: 100%; margin: 60px auto}
.smartphone .ztemplate_model_5 .text_model_1 { padding: 0 15px}
.smartphone .ztemplate_model_5 .caption-add { position: relative; background-color: var(--white); color: var(--grey); transition: unset}
.smartphone .ztemplate_model_5 .title a { color: var(--secondary-color); position: relative; top: 0; font-size: var(--font-size-medium);}
.smartphone .ztemplate_model_5.showcase { margin: 0 auto}
.smartphone .ztemplate_model_6 .caption-alt { position: relative; top: 0; left: 0; padding: 15px; transform: unset}
.smartphone .booking_btn { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0;}
.smartphone header .col .phone { margin: 0 0 0 30px}
.smartphone .language_cnt { margin-left: auto;}
.smartphone .tripadvisor_tc { position: relative; bottom: 0; right: 0; width: 100%; border-radius: unset; margin-bottom: 90px}
.smartphone #showcase { margin-top: 30px; padding-top: 0}
.smartphone .big_number { font-size: var(--font-size-extra); }
.smartphone .starred_amenities .zinput { margin: 0 10px 10px}

.smartphone .ztemplate .zsimplebutton { display: inline-table; margin-right: 15px; }
.smartphone .ztemplate .zsimplebutton a { position: relative; top: 0; left: 0; right: inherit;}
.smartphone .ztemplate_model_5 .book_room { position: relative; top: 0; right: inherit; left: 0; display: inline-table; display: none;}

.smartphone #travel_appeal_widget_container { position: inherit; margin: 30px auto 0; }
.smartphone #travel_appeal_widget_container #travel_appeal_widget { max-width: unset!important; width: 100%!important; }