/* VARIABILI */ :root { --color1: #0C4F27; --color2: #F8A01D; /* ACCESSIBILITÀ: era #C66F00 (3.7:1 su bianco) -> 4.9:1, WCAG 1.4.3 -> accessibile: #A95E00 */ --grey: #373737; --green: #449D44; --white: #ffffff; --black: #000000; --ice: #f5f5f5; --alpha_grey : rgba(0, 0, 0, 0.1); /* font sans e serif sono definiti in backend (impostazioni->variabili di sistema) e stampati in header.php */ --font-icon: 'Font Awesome 6 Pro'; --font-icon-alt: 'Font Awesome 6 Brands'; --font-weight-light: 200; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-solid: 900; --size-base: 16px; --max-width: 1420px; } /* Icone Font Awesome: font originali completi. PRESTAZIONI: header.php aggiunge subito dopo le versioni ridotte (fonts/*.subset.woff2) limitate alle icone che contengono (vedi a11y_icon_fonts_tag in accessibility_helpers.php): le icone già usate pesano pochi KB, quelle nuove fanno scaricare il font completo. Si possono aggiungere/cambiare icone liberamente: non serve rigenerare nulla. */ @font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Solid.woff') format('woff'); font-style: normal; font-weight: 900; font-display: swap;} @font-face { font-family: "Font Awesome 6 Brands"; src:url("../fonts/fa-brands-400.woff2") format("woff"); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Light.woff') format('woff'); font-style: normal; font-weight: 300; font-display: swap;} @font-face { font-family: 'Font Awesome 6 Pro'; src:url('../fonts/FontAwesome6Pro-Regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap;} * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);} body { margin: 0; line-height: 1; font-family: var(--sans); color: var(--grey); font-size: var(--size-base); font-weight: var(--font-weight-normal); } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; transition: all .6s; text-decoration: none!important } a:active, a:hover, a:focus { text-decoration: none; } b, strong { font-weight: var(--font-weight-bold); } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; border:none; display: block; } label { display: block; } img { border: 0; vertical-align: middle; max-width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-normal); line-height: 1; } .clear { clear: both; } .overflow { overflow: hidden; } .nav { margin: 0; padding: 0; list-style: none; } .nav > li { position: relative; display: block; } .nav > li > a { position: relative; display: block; } .nav-pills { display: block; } .nav-pills > li { float: left; text-transform: none; font-weight: normal; } .navbar { position: relative; } .navbar-nav > li > a { line-height: 1; } ul.cnt { margin:0; padding:0; display:flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: stretch; } .cnt { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: flex-start; align-items: flex-start; justify-content: center; } /*Elementi comuni ai template*/ .caption-cnt { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: center; align-items: center; } .ztemplate .title { margin: 0 0 15px 0; font-size: 200%; } .ztemplate .title a { color: var(--color1); } .ztemplate .zoption { margin: 0 0 10px 0; font-size: 90%; color: var(--grey); text-transform: uppercase;} .ztemplate .zoption .fieldvalue:before { margin: 0 5px 0 0;content: "/"; } .zsimplebutton a, .zlink a { padding: 10px 25px; display: inline-block; background-color: var(--color2); font-weight: var(--font-weight-bold); font-size: 95%; color: var(--white); text-transform: uppercase; text-align: center; line-height: 1; letter-spacing: 0; } /* Slick Dots */ .slick-dots { text-align: center; z-index: 2; position: absolute; left: 0; right: 0; bottom: 0px; } .slick-dots li { margin: 0 5px; display: inline-block; } .slick-dots li button { position: relative; width: 12px; height: 12px; border-radius: 50%; background-color: rgba(0,0,0,0.5); font-size: 0;} .slick-dots li.slick-active button { background-color: var(--color1); } /* Slick Arrow */ button.slick-next, button.slick-prev { z-index: 11; position: absolute; top: calc(50% - 24px); width: 50px; height: 50px; background-color: var(--color2); border: none; font-size: 0;} button.slick-prev { left: -10px; right: initial; } button.slick-next { left: initial; right: -10px; } button.slick-next:before, button.slick-prev:before{ font-family: var(--font-icon); font-weight: var(--font-weight-light); font-size: 32px; color: var(--white);} button.slick-prev:before{ content: '\f053'; } button.slick-next:before{ content: '\f054';} /* header */ header { width: 100%;text-align: center; z-index: 998; position: fixed; left: 0; right: 0; top: 0; align-items: center; transition: .4s;} header .max_content { margin:0 auto; position: relative; max-width: 1440px; -webkit-align-items: center; align-items: center; justify-content: flex-end;} header #top { padding: 0 20px 0 250px; background-color: var(--white); } .language_cnt { margin: 0 15px; padding: 0 15px; position: relative; z-index: 3;} #language_btn { display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--white); text-transform: uppercase; transition: .3s;} #language_btn.color { color: var(--color1);} #language_btn:before { font-family: var(--font-icon); content: '\f7a2'; font-size: 140%; margin-bottom: 6px;} #language { position: absolute; z-index: 1; left: 0; top: 100%; background-color: var(--color1); width: 100%; text-align: center; padding: 10px; opacity: 0; pointer-events: none; transition: .3s;} #language.fired { opacity: 1; pointer-events: inherit; top: calc(100% + 10px); } #language li { margin: 0; } #language li a { display: block; font-size: 95%; color: var(--white); text-transform: uppercase; } #language li.active a { display: block; color: var(--white); } #language .nav-pills > li { float: none!important; } header #menu2 { margin: 0 5px; padding: 0 10px; border-left: 1px solid rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(0, 0, 0, 0.3);} header #menu2 ul li a { padding: 10px 5px; display: block; font-size: 95%; color: #646464; } header #vareditor_call_now { padding: 10px; position: relative; } header #vareditor_call_now a { display: none; font-size: 13px; color: var(--white); text-transform: uppercase; position: relative; } header #vareditor_call_now a strong { font-weight: var(--font-weight-normal); color: var(--color1); text-transform: lowercase; } header #vareditor_call_now a:before { margin: 2px 5px; font-family: var(--font-icon); font-size: 13px; color: var(--white);position: relative; top: 2px; content: "\f095"; } header #varlink_whatsapp-cnt { padding: 10px 0; position: relative; } header #varlink_whatsapp-cnt a { width: 42px; height: 42px; line-height: 42px; display: block; font-size: 0px; text-transform: uppercase; text-align: center; background-color: #4FCE5D; border-radius: 50%; } header #varlink_whatsapp-cnt a:before { font-family: var(--font-icon-alt); font-size: 24px; color:var(--white); content: "\f232"; } header .logo { display: inline-block; background-color: var(--white); } header .logo:before { position: absolute; z-index: 32; content: ''; background-image: url(../images/bg/left_shadow_top.svg); background-repeat: no-repeat; width: 12px; height: 50px; top: 30px; left: -12px} header .logo:after { position: absolute; z-index: 32; content: ''; background-image: url(../images/bg/top_shadow_top.svg); background-repeat: no-repeat; width: 12px; height: 30px; top: 0px; left: -12px} header .logo img {padding: 15px; width: 115px} header #bottom { padding: 20px; background-color: transparent; text-align: left; transition: .4s;} header #bottom .max_content { justify-content: space-between;} header #menu1 { margin: 0px; padding-top: 100px; position: relative; } header #menu1 ul { display: flex; list-style: none; flex-direction: column; align-items: flex-start;} header #menu1 ul li { margin: 0 5px 10px 5px; padding: 5px; float: none; } header #menu1 ul li.active a { color: var(--color2); text-transform: uppercase; position: relative; } header #menu1 ul li a { display: inline-block; font-size: 100%; color: var(--color1); text-transform: uppercase; } header #menu1 ul li a:hover { color: var(--color2); } header .btns { text-transform: uppercase; text-align: center; } header #varsimple_booknow { margin: 0 10px 0 0; padding: 17px 38px 17px 38px; border: 1px solid var(--color2); background-color: var(--color2); font-weight: var(--font-weight-bold); color: var(--white); transition: .6s; opacity: 1; transform: scale(1); cursor: pointer; } header.scrolled #varsimple_booknow.fired { pointer-events: none; opacity: .5} header.scrolled #varsimple_booknow {opacity: 1; transform: scale(1);} header #varlink_special_offers-cnt a { padding: 17px 38px; display: inline-block; background-color: var(--color1); border: 1px solid var(--color1); color: var(--white); font-weight: var(--font-weight-bold); } header .cnt { justify-content: space-between; align-items: center; } header .cnt .col { display: flex; align-items: flex-start; width: calc(100% / 3); } header .cnt .col:nth-of-type(2) { justify-content: center; opacity: 0; pointer-events: none; transition: .3s; transform: scale(0);} header .cnt .col:nth-of-type(2) a { color: var(--white); font-size: 100%;} header.scrolled .cnt .col:nth-of-type(2), body.noslide header .cnt .col:nth-of-type(2) { opacity: 1; pointer-events: inherit; transform: scale(1);} header .cnt .col:nth-of-type(3) { justify-content: flex-end;} .hotel_name { display: flex; flex-direction: column; align-items: center; text-align: center;} .hotel_name:after { font-family: var(--font-icon); color: var(--color2); font-weight: var(--font-weight-solid); font-size: 35%; content: '\e28b \e28b \e28b \e28b';} /* Header scrolled */ header.scrolled, body.noslide header { background-color: var(--color1); -webkit-box-shadow: 0px 7px 10px -2px rgba(0,0,0,0.1); box-shadow: 0px 7px 10px -2px rgba(0,0,0,0.1);} header.scrolled #menu-btn, header.scrolled #language_btn, body.noslide header #language_btn { color: var(--white);} header.scrolled #menu-btn .bar, body.noslide header #menu-btn .bar { background-color: var(--white); } header.scrolled #bottom, body.noslide header #bottom { padding: 10px 20px;} /* SCROLLDOWN */ .scroll_down { display: none; color: var(--white); position: absolute; left: 0; bottom: 70px; text-align: center; z-index: 2; width: 90px; left: 50%; transform: translateX(-50%); font-size: 80%;} body.home .scroll_down { display: block;} .scroll_down:before { position: absolute; z-index: 2; top: -35px; left: 0; right: 0; margin: 0 auto; width: 20px; height: 30px; border: 2px solid var(--white); border-radius: 100px; border-color: var(--white); content: '';} .scroll_down:after { position: absolute; z-index: 2; content: ''; top: -30px; left: 0; right: 0; margin: 0 auto; width: 5px; height: 5px; border-radius: 100%; background-color: var(--white); animation: scroll 1.5s infinite;} /* credits fix */ .credits_page { min-height: calc(100vh - 480px);} #menu-btn { cursor: pointer; text-transform: uppercase; color: var(--white); transition: .4s; position: relative; z-index: 3;} #menu-btn #bars { position: relative; height: 20px; margin-bottom: 10px;} #menu-btn .bar { position: absolute; width: 100%; height: 2px; background-color: var(--white); transition: .4s;} #menu-btn .bar.first { top: 0;} #menu-btn .bar { top: 50%;} #menu-btn .bar.last { top: 100%;} #menu-btn.fired { color: var(--color1);} #menu-btn.fired .bar { opacity: 0;} #menu-btn.fired .bar.first { top: 50%; opacity: 1; transform: rotate(45deg); background-color: var(--color1);} #menu-btn.fired .bar.last { top: 50%; opacity: 1; transform: rotate(-45deg); background-color: var(--color1);} .slide_menu { transition: .4s; position: fixed; left: -320px; top: 0; z-index: 2; background-color: var(--white); height: 100%; padding: 15px; width: 320px; text-align: center; padding-top: 90px; -webkit-box-shadow: 7px 0px 10px -2px rgba(0,0,0,0.1); box-shadow: 7px 0px 10px -2px rgba(0,0,0,0.1);} .slide_menu.fired { left: 0;} .slide_menu .title_model_1 { margin-bottom: 30px;} .slide_menu .hotel_name:after { font-size: 45%; margin-top: 5px;} /* Heading se non c'è slideshow */ .heading { margin-top: 152px; padding: 40px 15px; position: relative; text-align: center; transition: .6s; background-color: #F6F6F6; } body.noslide .heading { margin-top: 65px;} body.body_showcase .heading { margin-top: 0; } .heading.not_slide { margin-top: 0;} .heading.fired_2{opacity: 1;} .heading .top_seo { font-size: 80%; color: var(--grey); text-transform: uppercase; text-align: center; } .heading .top_seo:before { margin-right: 5px; font-size: 80%; color: var(--grey); content: "/"; } .heading .page_title, .heading #page_name, .heading #container_name { margin: 10px 0; font-size: 220%; color: var(--color1); } .heading .summary, .heading #container_summary { font-size: 120%; color: var(--grey); line-height: 1.5; } .heading #varsimple_booknow { display: inline-block; bottom: -65px; cursor: pointer; } .heading #booking { position: relative; bottom: 0; transition: .6s; transform: scale(0); height: 0; opacity: 0; z-index: -1; } .heading #booking.fired {transform: scale(1); height: auto; margin-top: 120px; top: 0; opacity: 1; z-index: 999} body.noslide .heading #booking.fired { margin-top: 190px} body.noslide .heading #booking { position: fixed; top: 0; bottom: inherit;} .heading #booking.fired_2 { transform: scale(1); height: auto; margin-top: 120px; top: 0; opacity: 1; z-index: 2 } .heading #booking.scrolled.fired {opacity: 1; transform: scale(1); z-index: 998; top: 220px; bottom: inherit; position: fixed;} .heading #varsimple_booknow { padding: 20px 35px; display: inline-block; background-color: var(--color2); color: var(--white); font-weight: var(--font-weight-normal); text-transform: uppercase; text-align: center; line-height: 1; letter-spacing: 3px; position: relative; top: 55px; } /* Booking */ #booking { max-width: 1014px; margin: 0 auto; transition: .6s; display: flex; background-color: #fff; z-index: 8; position: fixed; left: 0; right: 0; bottom: inherit; top: -200px; opacity: 0; transform: scale(0); z-index: 999;} #booking.scrolled{position: fixed; bottom: inherit; top: -200px; opacity: 0; transform: scale(0); z-index: 998} #booking_hidden {opacity: 0} #booking.fired { opacity: 1; transform: scale(1); z-index: 999; top: 220px; bottom: inherit; position: fixed;} #booking .booking_tips { font-weight: var(--font-weight-normal); color: var(--white); } #booking .booking_tips .varsimple { padding: 5px; background-color: var(--color1); display: inline-block;} #booking #booking_desc {padding: 25px; background-color: var(--white); } #booking .form-title, #booking .day_name, #booking .month, #booking .hidden_form_element {display: none;} #booking .section_tag { font-size: 80%; color: var(--grey); text-transform: uppercase; position: relative; } #booking .section_tag:before { float: left; font-size: 80%; color: var(--grey); text-transform: lowercase; position: relative; content: "/"; } #booking .section_big_text { margin: 20px 0; max-width: 220px; font-size: 130%; color: var(--grey); line-height: 1.2; letter-spacing: 0; } #booking .section_link a { padding: 11px 26px 10px 26px; display: inline-block; background-color: var(--color2); font-weight: var(--font-weight-normal); font-size: 12px; color: var(--white); text-transform: uppercase; } #booking form {padding: 20px;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;list-style: none;-ms-box-orient: vertical;-webkit-align-items: center;align-items: center;justify-content: center; flex-direction: column;} #booking form .caption-fields { margin: 0; width: 100%; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -moz-flex;display: -webkit-flex;display: flex;list-style: none;-ms-box-orient: vertical;-webkit-align-items: flex-start;align-items: flex-start;justify-content: flex-start; flex-wrap: wrap; position: relative; } #booking .form.field.date, #booking .form.field.select, #booking .form.field.element_12, #booking .form.field.element_23 { margin: 0 5px; padding: 0; width: auto; position: relative; } #booking .form_element_title { font-weight: var(--font-weight-normal); font-size: 80%; color: var(--color2); text-transform: uppercase; line-height: 12px; letter-spacing: 0; } #booking .date input { cursor: pointer; padding: 10px 10px; font-size: 120%; border: unset; border-bottom: 1px solid var(--white); background-color: transparent; color: var(--white); width: 120px; display: none;} #booking .date_from_html { color: var(--color1); display: flex; align-items: flex-start; position: relative; margin-right: 60px} #booking .date_from_html:after { position: absolute; font-size: 190%; top: 5px; right: -30px; z-index: -1; content: '\e0d6'; font-weight: var(--font-weight-light); color: var(--color2);} #booking .month_name_tiny { display: block; font-size: 120%; margin-top: 5px} #booking .day { font-size: 280%} #booking .year { position: absolute; z-index: 1; right: 0; top: 24px} #booking .form_select { padding: 10px 30px 10px 10px; background-color: transparent; position: relative; border: 1px solid var(--white); font-size: 100%; } #booking .form_select .current_value { padding: 0; font-weight: var(--font-weight-normal); font-size: 125%; position: initial; color: var(--white); cursor: pointer; } #booking .form_select .current_value:after { border-top: 4px solid var(--white); position: absolute; right: 10px; display: none;} #booking .form_select .elements_list { width: 100%; background-color: var(--color1); text-align: center; z-index: 3; position: absolute; left: 0; right: 0; top: 70%; cursor: pointer; bottom: inherit; z-index: 45; overflow: hidden; } #booking .form_select .elements_list .option { font-weight: var(--font-weight-normal); font-size: 80%; color: var(--white); text-transform: uppercase; text-align: center; line-height: 32px; } #booking .form_select .elements_list .option:first-of-type{display: none;} #booking .form.field.element_12 input, #booking .form.field.element_23 input { font-size: 120%; padding: 10px; background-color: transparent; position: relative; border: unset; border-bottom: 1px solid var(--color1); color: var(--black); font-size: 95%; line-height: 1; max-width: 140px; } #booking .form.field.element_14 { display: none; } #booking input[type="submit"] { margin:0 0 0 20px; padding: 20px; background-color: var(--color2); font-weight: var(--font-weight-normal); color: var(--white); text-transform: uppercase; text-align: center; letter-spacing: 0; } #booking .merge_group { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; list-style: none; -ms-box-orient: horizontal; -webkit-align-items: center; align-items: center; } #booking .merge_group .form.field { margin: 0 5px; } #booking .form_merge_add_button { display: flex; align-items: center; text-transform: uppercase; font-weight: var(--font-weight-medium); color: var(--color1); cursor: pointer; margin-top: 10px; padding-left: 5px} #booking .form_merge_add_button[disabled] {display: none;} #booking .form_merge_add_button:before { font-family: var(--font-icon); content: '\f055'; font-size: 120%; color: var(--color2); font-weight: var(--font-weight-solid); margin-right: 3px} #booking .merge_group:not(:last-child) .form_merge_rem_button, #booking .merge_group:first-child .form_merge_rem_button { display: none; } #booking .form_merge_rem_button { font-size: 0; cursor: pointer; background-color: var(--color2); display: flex; align-items: center; justify-content: center; height: 100%; width: 47px; position: absolute; z-index: 1; top: 0; right: 0} #booking .form_merge_rem_button:before { font-size: calc(120 * var(--size-base) / 100); font-family: var(--font-icon); content: '\f057'; color: var(--white); } #booking .cal-closed { display: none; } #custom_popup { display: none;} #custom_popup.fired { display: block; } #booking form .caption-fields .field.element_20 { width: auto;} #booking form .caption-fields .field.element_20 input, #booking form .caption-fields .field.element_15 input { background-color: transparent; cursor: pointer; color: var(--black); font-size: 95%; border: unset; border-bottom: 1px solid var(--color1); min-width: 230px;} #booking .close_btn { display: none; top: 0; right: 0; left: inherit; border-radius: unset; width: 30px; height: 30px; border: unset; background-color: var(--color2);} #booking .close_btn:before { width: 20px; height: 1px; background-color: var(--white); transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; left: calc(50% - 10px); content: '';} #booking .close_btn:after { width: 20px; height: 1px; background-color: var(--white); transform: rotate(-45deg) translateY(-50%); position: absolute; top: 50%; left: calc(50% - 10px); content: '';} #booking.scrolled .close_btn, #booking.fired .close_btn { display: block;} /* Slideshow */ #slideshow_cnt {margin-top: 0; position: relative; } #slideshow_cnt .logo_cnt { position: absolute; z-index: 999; top: 50px; left: 50%; transform: translateX(-50%); text-align: center; } #slideshow_cnt .logo { display: inline-block;} #slideshow_cnt .logo img { width: 100%; } .logo_cnt .title_model_1 { color: var(--white); font-size: 150%; margin-top: 15px; text-shadow: 0px 0px 7px rgba(0,0,0,0.6);} .logo_cnt .hotel_name:after { color: var(--white); font-size: 45%; margin-top: 5px;} #slideshow_cnt:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 250px; z-index: 1; background: rgb(9,52,95); background: linear-gradient(180deg, rgba(9,52,95,0.4178265056022409) 0%, rgba(9,52,95,0) 100%);} #slideshow img {max-height: calc(100vh - 120px); width: 100%; object-fit: cover; } #slideshow .slick-dots { bottom: 25px; } #slideshow .caption { position: absolute; z-index: 3; bottom: 290px; left: 0; right: 0; text-align: center; color: var(--white); font-family: var(--font-alt); font-size: 220%; text-shadow: 0px 0px 7px rgba(0,0,0,0.6);} body.home #slideshow img { max-height: 100vh; } #slideshow .slick-dots li.slick-active button { background-color: var(--white); } .slick-dots { > li { display: inline-block; } > li:only-child { display: none; } } /* Template Base */ .ztemplate_base { margin: 60px auto; position: relative; max-width: 1200px; } .ztemplate_base .caption { margin: 0 40px 0 0; width: 40%; } .ztemplate_base .caption-alt { margin: 0 40px 0 0; width: 60%; } .ztemplate_base .ztextarea.g1 { margin: 20px 0; font-size: 120%; color: var(--grey); line-height: 1.3; } .ztemplate_base .ztextarea.g2 { font-size: 100%; color: var(--grey); line-height: 1.5; } .ztemplate_base .zsimplebutton {margin-top: 30px} /* Step Footer */ .step_footer { opacity: 0;} body.step_footer_show { padding-bottom: 84px} /* Step */ .sticky_element { position: sticky; top: 70px; padding-top: 10px;z-index: 95; } .edit_search { font-size: 120%; margin-top: 10px; background-color: var(--white); border-bottom: 1px solid #dedede; padding: 10px 15px;} .edit_search.fixed { position: fixed; z-index: 99; top: 119px; left: 0; width: 100%; } .summary_title { text-align: center; color: var(--color1); font-weight: var(--font-weight-medium); margin-bottom: 15px} .edit_search .summary { align-items: center} .edit_search .dates, .edit_search .guests { margin-right: 30px} .edit_search .varsimple { cursor: pointer; padding: 10px 20px 10px 20px; border: 1px solid var(--color2); background-color: var(--color2); text-transform: uppercase; color: var(--white); font-size: 80%} .edit_search .varsimple:before { font-family: var(--font-icon); content: '\f044'; margin-right: 5px} /* OTA Ccomparison Module */ #price_compare { margin: 40px auto 0 auto;padding: 20px;max-width: var(--max-width);font-size: 120%;line-height:1;text-align:center;width: auto; background-color: var(--white); padding: 50px 30px; box-shadow: 0 122px 44px -90px rgb(0 0 0 / 30%); } #price_compare .title { margin: 0 0 20px 0; color:var(--color1); font-size:130% } #price_compare .title strong { color:var(--color2); } #ota_comparison { margin: 0 -20px; display: flex;align-items: stretch;justify-content: center;} #ota_comparison .accomodation { display: flex;align-items: center;justify-content: space-between;} #ota_comparison .channel {margin: 0 10px;padding: 10px 5px;display: flex;align-items: center;justify-content: flex-start;background-color:var(--white);box-shadow: 0 0 10px rgba(0, 0, 0, .2);border-radius: 5px;position: relative;} #ota_comparison .channel.site { padding: 10px 5px 20px 5px; } #price_compare .channel .saving.none { display: none;} #ota_comparison .channel .accomodation { margin: 0 5px; background-color:#CC0000; color: var(--white); border-radius: 3px; } #ota_comparison .channel.site .accomodation { background-color: #449D44;} #ota_comparison .channel .name { margin:0 0 0 5px; display: flex;align-items: center; } #ota_comparison .channel .name:after { content:":" } #ota_comparison .channel .occupancy { padding:0 10px; } #ota_comparison .channel .price { padding: 8px; background-color: rgba(0, 0, 0, .2);} #ota_comparison .channel .price:before { content: "\20ac"} #ota_comparison .saving {margin: 0 5px;background-color: var(--white);color: var(--grey);border: 1px solid rgba(0, 0, 0, .2);border-radius: 3px;font-size: 80%;display: flex;align-items: center;justify-content: flex-start;position: absolute;left: 5px;bottom: -14px;} #ota_comparison .saving .text {padding: 5px 0 5px 5px;} #ota_comparison .saving .text:before { margin: 0 5px 0 0; content: "\f336"; font-family: var(--font-icon); font-weight: var(--font-weight-solid); color: #449D44; } #ota_comparison .saving .price {padding: 0px 5px;background-color:transparent;} #ota_comparison .channel .not_available { padding: 8px;} @keyframes loading_bar { 0% {background-position: -5vw 0;} 100% {background-position: 0vw 0;} } #price_compare.loading { overflow: hidden;} #price_compare.loading .channel.site { position: relative; padding-bottom: 20px; overflow: hidden;} #price_compare.loading .channel.site:before { position: absolute; content: ''; z-index: 1; bottom: 0; left: 0; height: 10px; width: 100%; background: #dddddd; } #price_compare.loading .channel.site:after { position: absolute; content: ''; z-index: 2; bottom: 0; left: 0; height: 10px; width: 200%; background: #dddddd; background-image: linear-gradient(45deg, #dddddd -5%, #dddddd -2.5%, #cccccc -2.5%, #cccccc 0%, #dddddd 0%, #dddddd 2.5%, #cccccc 2.5%, #cccccc 5%, #dddddd 5%, #dddddd 7.5%, #cccccc 7.5%, #cccccc 10%, #dddddd 10%, #dddddd 12.5%, #cccccc 12.5%, #cccccc 15%, #dddddd 15%, #dddddd 17.5%, #cccccc 17.5%, #cccccc 20%, #dddddd 20%, #dddddd 22.5%, #cccccc 22.5%, #cccccc 25%, #dddddd 25%, #dddddd 27.5%, #cccccc 27.5%, #cccccc 30%, #dddddd 30%, #dddddd 32.5%, #cccccc 32.5%, #cccccc 35%, #dddddd 35%, #dddddd 37.5%, #cccccc 37.5%, #cccccc 40%, #dddddd 40%, #dddddd 42.5%, #cccccc 42.5%, #cccccc 45%, #dddddd 45%, #dddddd 47.5%, #cccccc 47.5%, #cccccc 50%, #dddddd 50%, #dddddd 52.5%, #cccccc 52.5%, #cccccc 55%, #dddddd 55%, #dddddd 57.5%, #cccccc 57.5%, #cccccc 60%, #dddddd 60%, #dddddd 62.5%, #cccccc 62.5%, #cccccc 65%, #dddddd 65%, #dddddd 67.5%, #cccccc 67.5%, #cccccc 70%, #dddddd 70%, #dddddd 72.5%, #cccccc 72.5%, #cccccc 75%, #dddddd 75%, #dddddd 77.5%, #cccccc 77.5%, #cccccc 80%, #dddddd 80%, #dddddd 82.5%, #cccccc 82.5%, #cccccc 85%, #dddddd 85%, #dddddd 87.5%, #cccccc 87.5%, #cccccc 90%, #dddddd 90%, #dddddd 92.5%, #cccccc 92.5%, #cccccc 95%, #dddddd 95%, #dddddd 97.5%, #cccccc 97.5%, #cccccc 100%, #dddddd 100%, #dddddd 102.5%, #cccccc 102.5%, #cccccc 105%); animation: loading_bar 1.5s linear infinite; } /* Step servizi */ .template_filters { text-transform: uppercase; color: var(--grey); font-weight: var(--font-weight-medium); margin-bottom: 30px} .template_filters .hidden_form_element { display: none;} .template_filters .filter_key { display: flex; align-items: center; color: var(--color1);} .template_filters .filter_key:before { color: var(--color2); font-family: var(--font-icon); content: '\f0b0'; font-size: 130%; margin-right: 3px} .template_filters .filter_key:after { content: ':'; margin-left: 3px} .template_filter { display: flex; justify-content: center; align-items: center;} .template_filters .form_checkbox { display: flex; justify-content: center; margin: 0 auto; cursor: pointer} .template_filters .form_checkbox .checkbox { margin: 0 30px; position: relative; padding-right: 5px} .template_filters .form_checkbox .checkbox:before { content: ''; width: 30px; height: 20px; border-radius: 100px; position: absolute; z-index: 1; left: 100%; top: -3px; border: 2px solid var(--color1); transition: .6s;} .template_filters .form_checkbox .checkbox:after { content: ''; width: 14px; height: 14px; border-radius: 100px; position: absolute; z-index: 1; left: calc(100% + 3px); top: 0; background-color: var(--color1); transition: .3s;} .template_filters .form_checkbox .checkbox.checked:before { background-color: var(--color2); border-color: var(--color2); opacity: .6} .template_filters .form_checkbox .checkbox.checked:after { left: calc(100% + 13px); background-color: var(--color2)} .ztemplate_rooms .ztemplate .services { display: flex; flex-wrap: wrap} .ztemplate_rooms .ztemplate .services .elem { display: flex; align-items: flex-start; width: calc(50% - 20px); flex-direction: column; padding: 0; margin: 10px; border: 8px solid transparent; transition: .6s;} .ztemplate_rooms .ztemplate .services .elem .caption { cursor: pointer} .ztemplate_rooms .ztemplate .services .elem .caption-cnt { overflow: hidden} .ztemplate_rooms .ztemplate .services .service_desc { font-size: 80%; position: absolute; z-index: 2; bottom: 0; left: 0; padding: 20px 20px 20px 20px; background-color: rgba(0,0,0,.7); width: 100%; color: var(--white); margin: 0; } .ztemplate_rooms .ztemplate .services .service_desc:before { } .ztemplate_rooms .ztemplate .services .caption .zlabel.g5 { position: absolute; z-index: 3; top: 20px; left: 20px; background-color: var(--color2); color: var(--white); padding: 10px; font-weight: var(--font-weight-medium); text-transform: uppercase} .ztemplate_rooms .ztemplate .services .title:not(.subcontents .title) { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid var(--white); text-transform: uppercase; padding-right: 45px} .ztemplate_rooms .ztemplate .services .ztextarea { font-size: 150%; margin-top: 10px; font-weight: var(--font-weight-normal); line-height: 1.1; padding-right: 40px} .ztemplate_rooms .ztemplate .services .elem .caption-cnt img { min-width: unset; width: 600px; height: 390px; object-fit: cover; transition: .6s} .ztemplate_rooms .ztemplate .services .elem:hover .caption-cnt img { transform: scale(1.1)} .ztemplate_rooms .ztemplate .services .subcontents { display: none;} .ztemplate_rooms .ztemplate .services .service_desc .zlabel.g6 { border-top: 1px dashed; margin-top: 10px; padding-top: 10px; font-size: 130%; display: flex; align-items: center} .ztemplate_rooms .ztemplate .services .service_desc .zlabel.g6:before { font-family: var(--font-icon); content: '\f05a'; margin-right: 5px} .ztemplate_rooms .ztemplate .services .service_desc .zlabel.g6 { display: none;} .services-form { display: none; position: fixed; top: 190px; left: 0; right: 0; margin: 0 auto; z-index: 9999} .services-form.fired { display: block;} .services-form #cnt_forms { position: relative; padding-top: 40px} .services-form .close_btn { position: absolute; z-index: 2; top: 0; right: 0; left: inherit; border-radius: unset; width: 30px; height: 30px; border: unset; background-color: var(--color2);} .services-form .close_btn:before { width: 20px; height: 1px; background-color: var(--white); transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; left: calc(50% - 10px); content: '';} .services-form .close_btn:after { width: 20px; height: 1px; background-color: var(--white); transform: rotate(-45deg) translateY(-50%); position: absolute; top: 50%; left: calc(50% - 10px); content: '';} .services-form .close_btn:hover { background-color: var(--color2); } .services-form #cnt_forms form .form_element_title { font-size: 85%} .services-form .pf_form form .field.select .form_element_title, .services-form .pf_form form .field.text .form_element_title { font-size: 71%!important} /* fix */ .services-form .pf_form form .date_from_html, .services-form .pf_form form .form_select { font-size: 100%} /* fix */ /* Pagina standard */ #page #content { padding: 10px} /* Order */ #order_template_wrapper .details_wrapper { display: none; font-size: 100%; background-color: var(--white); padding: 15px; margin: 15px 0; border: 1px solid #dedede} /* CSS per subtotale in order */ #order_template_wrapper .service_title .caption:not(.subcontents .caption) { display: flex; align-items: flex-start; border-bottom: 1px solid #dedede;} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .price { margin-left: auto; font-size: 130%; display: flex; align-items: flex-start; color: var(--color1);} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .price:before { content: '\20ac'; margin-right: 3px;} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .price .number { margin: 0 1px 0 0; font-size: 100%; } #order_template_wrapper .service_title .caption:not(.subcontents .caption) .price .comma { margin: 0; vertical-align: super; font-size: 55%; position: relative; top: 4px;} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .price .decimal { vertical-align: super; font-size: 70%; position: relative; top: 3px;} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .title { border-bottom: unset; cursor: pointer; padding-right: 15px; display: flex; align-items: flex-start;} #order_template_wrapper .service_title .caption:not(.subcontents .caption) .title:before { color: var(--gray); font-family: var(--font-icon); content: '\f0fe'; margin-right: 3px; font-size: var(--size-base);position: relative; top: 5px; margin-right: 5px;} #order_template_wrapper .service_title .elem.fired .caption:not(.subcontents .caption) .title:before { content: '\f146';} #order_template_wrapper .service_title .subcontents { display: none; padding-top: 5px;} #order_template_wrapper .service_title .elem.fired .subcontents { display: block; } /* FINE - CSS per subtotale in order */ /* Payment */ .no_payment_info { margin: 10px 0; padding: 15px; border: 1px solid var(--color2); color: var(--color1);} .no_payment_info:before { font-family: var(--font-icon); color: var(--color2); content: '\f05a'; margin-right: 5px } #page.payment #content .title:not(.title_wrapper .title) { margin: 0 0 5px 0; font-size: 160%; } #page.payment #content .title:not(.title_wrapper .title), #page.payment #content .side #bookingform_summary .title { font-size: 190%} #page.payment #content .side .title:not(.title_wrapper .title) { font-size: 150%} #page.payment #content .summary { font-size: 120%; } #page.payment #order_summary { margin: 60px auto; font-size: 130%} #page.payment #order_summary .caption { text-align: center; max-width: 640px; margin: 0 auto} .product { display: flex; align-items: center; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed #dedede} .product .total { margin-left: auto; order: 3; color: var(--color1); } .product .total:before { content: '\20ac'; } .product .prod_qty { font-size: 70%; border-radius: 100%; order: 1; margin-right: 5px; background-color: var(--color1); width: 20px; height: 20px; display: flex; justify-content: center; text-align: center; color: var(--white); line-height: 20px;} .product .prod_qty:before { content: 'x';} .product .product_name { order: 2; } #page.payment { background-color: var(--ice); } #page.payment #content { margin: 30px auto 70px auto; padding-bottom: 60px} #page.payment #content .cnt .body, #page.payment #content .cnt .side { margin: 0 50px 0 0; padding: 20px; width: 55%; background-color: var(--white); color: var(--color1);} #page.payment #content .cnt .side { margin: 0; width: 45%; } .payment.corner .caption { background-color: var(--ice); padding: 10px 10px 20px; margin-bottom: 20px; border: 1px solid #d8d8d8} .payment.corner input { padding: 8px; width: 100%; margin-top: 5px; border: 1px solid #dedede} #nexi-payment-form .nexi-owner-name, #nexi-payment-form .nexi-owner-surname, #nexi-payment-form .nexi-owner-email { width: calc(50% - 20px); float: left; margin: 10px} #nexi-payment-form .nexi-owner-email { margin-bottom: 25px} #nexi-payment-form > div { width: calc(50% - 20px); float: left; margin: 7px 10px 0} #xpay-card { margin-top: 5px; padding: 8px 8px 3px; background-color: var(--white); border: 1px solid #dedede} #pagaBtn, .bank_transfer_payment input#bank_transfer_payment { clear: both; padding: 15px; width: 100%; margin: 20px auto 0; text-transform: uppercase; color: var(--white); background-color: var(--color2);} .bank_transfer_payment > div { padding: 0} .bank_transfer_payment > div p { margin-bottom: 10px; color: var(--grey); font-size: 100%} #xpay-card-errors { color: var(--color2); font-size: 90%} .nexi_loading { text-align: center} .info_test_payment { padding: 10px; border: 1px dashed #cddc39; display: flex; align-items: center; background-color: #f7ffa4; margin: 10px} .info_test_payment .info_key { font-weight: var(--font-weight-medium); text-transform: uppercase; margin-right: 15px} .info_test_payment .info_key:before { font-family: var(--font-icon); content: '\f09d'; margin-right: 5px; font-weight: var(--font-weight-solid)} /* PAYMENT METHODS */ .payment_title { text-transform: uppercase; font-weight: var(--font-weight-bold); margin-bottom: 15px;} .caption.cards .payment_title:before { font-family: var(--font-icon); color: var(--color2); content: '\f09d'; margin-right: 5px;} .caption.bank_transfer .payment_title:before { font-family: var(--font-icon); color: var(--color2); content: '\e528'; margin-right: 5px;} /* .payment.corner input { clear: both; padding: 15px; width: 100%; margin: 20px auto 0; text-transform: uppercase; color: var(--white); background-color: var(--color2);} */ /* thankyou page */ #page.thankyou { min-height: calc(100vh - 532px); text-align: center; margin-bottom: 90px;} #page.thankyou #content { box-shadow: 0 2px 6px 0 rgba(0,0,0,0.05); max-width: 640px; margin: -15px auto 0; border-top: 15px solid var(--color2); padding: 60px 30px 30px; position: relative; overflow: visible} #page.thankyou #content:before { font-family: var(--font-icon); content: '\e396'; position: absolute; top: -40px; font-size: 320%; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--white); background-color: var(--color2); width: 80px; height: 80px; border-radius: 100%; line-height: 80px; font-weight:var(--font-weight-light) } /* BE no results */ /* Nessuna disponibilità */ body.no_results .cart_btn { display: none;} body.no_results .edit_search { padding-bottom: 60px} .pf_no_results { font-size: 150%; color: var(--color1); margin-bottom: 90px; text-align: center; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.05); max-width: 640px; margin: 90px auto; border-top: 15px solid var(--color2); padding: 60px 30px 30px; position: relative; overflow: visible} .pf_no_results:before { font-family: var(--font-icon); content: '\e46e'; position: absolute; top: -40px; font-size: 180%; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--white); background-color: var(--color2); width: 80px; height: 80px; border-radius: 100%; line-height: 80px; font-weight:var(--font-weight-light) } body.no_results .total_amount { display: none; } /* Error landing */ .not_found .section_page_message { margin: 90px auto 200px; max-width: 920px; padding: 40px; border-bottom: 5px solid var(--color1); background-color: #fefefe;} /* Error message */ #page_error { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 99999999; top: 0; padding-top: 200px;} #page_error .cnt-message { display: flex; align-items: center; justify-content: center; text-align: center;} #page_error .message { background-color: var(--white); color: var(-black); padding: 25px; font-size: var(--size-base); border: 3px solid var(--color2);} #page_error .close { color: var(--white); margin-bottom: 10px; cursor: pointer;} #page_error .caption { text-align: right;} /* Risultati con offerte non trovate */ .offer_not_found { font-size: 150%; color: var(--color1);} .offer_not_found { text-align: center; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.05); max-width: 640px; margin: 60px auto 0; border-top: 5px solid var(--color2); padding: 60px 30px 30px; position: relative; overflow: visible} .offer_not_found:before { font-family: var(--font-icon); content: '\f848'; position: absolute; top: -40px; font-size: 150%; left: 50%; transform: translateX(-50%); z-index: 2; color: var(--white); background-color: var(--color2); width: 80px; height: 80px; border-radius: 100%; line-height: 80px; font-weight:var(--font-weight-solid) } .smartphone .pf_no_results { margin: 60px 15px 90px} .smartphone .template_filters .form_checkbox .checkbox { margin: 0 50px 0 0} /* Header scrolled smartphone */ body.smartphone.noslide .heading { margin-top: 0;} body.smartphone.noslide header { position: fixed; top: 0;} .smartphone header { position: fixed; top: 0; z-index: 99;} .smartphone header.scrolled { z-index: 99; transition: .4s; top: 0;} .smartphone header.scrolled.nav-up { position: fixed; top: -161px;} /* fix smartphone */ .smartphone .zsimplebutton a, .smartphone .zlink a { border-radius: 3px;} .smartphone header #varsimple_booknow, .smartphone header #varlink_special_offers-cnt a { border-radius: 3px;} .smartphone #slideshow .caption { bottom: 70px; font-size: 160%;} .smartphone #menu-btn { font-size: 0; padding-left: 5px;} .smartphone #menu-btn #bars { width: 30px; height: 15px;} .smartphone #language_btn:before { display: none;} .smartphone #language_btn:after { font-family: var(--font-icon); font-size: 70%; font-weight: var(--font-weight-solid); content: '\f0d7'; color: var(--color2);} .smartphone #slideshow_cnt .logo_cnt { width: 100%; padding: 0 50px; max-width: 330px; top: 80px; z-index: 2;} body.home.smartphone .scroll_down { display: none;} .smartphone header #menu1 ul li a { font-size: 110%;} .smartphone .slide_menu { padding-top: 70px;} body.smartphone.noslide { padding-top: 65px;} .smartphone .logo_cnt .title_model_1 { font-size: 130%;} /* User Privacy */ .body_user_privacy_panel form .caption-fields .field { width: 100%} @media (max-width: 1440px) { header #menu1 ul li { margin: 0 2px; } header #menu1 ul li a { font-size: 90%; } header.scrolled #varsimple_booknow, header #varlink_special_offers-cnt a { padding: 15px 25px; font-size: 90%; } } @media (max-width: 768px) { .cnt, .caption-cnt { display: block; } .nav-pills > li { float: none; display: block; } header .cnt { display: flex; } header #top { padding: 10px; } header .logo:before, header .logo:after { display: none;} header .max_content { width: auto; max-width: inherit; } header #top .max_content { display: flex; justify-content: space-between; } header #varlink_whatsapp-cnt { padding: 0; } header .btns { display: inline-block; } header #varsimple_booknow, header #varlink_special_offers-cnt a { margin: 0 auto; display: block; text-align: center; width: auto; opacity: 1; transform: none; } header #varsimple_booknow { margin: 10px 5px; padding: 10px 20px; } header #bottom .max_content { display: flex; justify-content: space-between; flex-wrap: wrap; } header #bottom { padding: 5px; } header.scrolled #bottom { padding: 5px;} header #menu1, header #menu2 { margin: 0; padding: 0; border: none; width: auto;} header #mobilemenu { padding: 20px; display: none; background-color: var(--color2); text-align: left; } header #mobilemenu.fired { display: block; } header #menu1 ul, header #menu2 ul { margin: 0; padding: 0; display: block; } #booking { display: none; } #slideshow_cnt { margin: 0; } .heading { margin-top: 0; padding: 30px 20px; font-size: 90%; } .heading #page_name, .heading #container_name { margin: 5px 0; } .ztemplate_base { margin: 20px auto 0 auto; } .ztemplate_base .caption, .ztemplate_base .caption-alt { margin: 0 0 10px 0; width: auto; } } @media (max-width: 767px){ .sticky_element { position: inherit;} } @media (max-height: 1024px) { #slideshow img { max-height: calc(80vh - 120px); } } /* SMARTPHONE */ .smartphone header:before { display: none; } .smartphone #main-content { padding-top: 67px; } .smartphone.noslide #main-content { padding-top: 0; } .smartphone header { padding: 15px 15px 15px 10px; background-color: var(--color1); -webkit-box-shadow: 0px 7px 10px -2px rgba(0, 0, 0, 0.1); box-shadow: 0px 7px 10px -2px rgba(0, 0, 0, 0.1); } .smartphone header.scrolled #bottom, body.noslide.smartphone header #bottom { padding: 5px; } .smartphone header .cnt .col:nth-of-type(2), .smartphone body:not(.noslide) header:not(.scrolled) .cnt .col:nth-of-type(2) { visibility: visible!important; opacity: 1; pointer-events: inherit; transform: scale(1);} .smartphone header .cnt .col { width: fit-content; } .smartphone header .cnt .col:nth-of-type(2) a { font-size: 65%; } .smartphone header .cnt .col:nth-of-type(3) { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; display: block;} .smartphone header #varsimple_booknow, .smartphone header #varlink_special_offers-cnt a { padding: 15px; margin: 0; line-height: 1; font-size: 100%; border-radius: 0; width: 100%; } .smartphone header .btns { display: block; } .smartphone header #menu-btn .bar, body.noslide.smartphone header #menu-btn .bar { background-color: var(--white); } .smartphone header #menu-btn, .smartphone header #language_btn, body.noslide.smartphone header #language_btn { color: var(--white); } .smartphone .logo_cnt .title_model_1 { display: none; } .smartphone #showcase .ztemplate_rooms .elem { margin: 20px 0; } .smartphone #booking.fired { top: 0; bottom: 0; } .smartphone .template_calendar { left: -25px; width: 100vw; } .smartphone #booking .guests_wrapper { left: -20px; width: 100vw; bottom: 0; height: 100vh; } .smartphone #booking .guests_wrapper .form_element_title { font-size: 90%; } .smartphone .slide_menu { } .smartphone header .cnt { justify-content: inherit } .smartphone header .cnt .col:nth-of-type(2) { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); width: 100%; } .smartphone .language_cnt { position: absolute; z-index: 2; right: 0; }