/*
Theme Name:   villafenia
Description:  Official theme for Villa Fenia
Author:       hiremycode
Author URL:   https://www.hiremycode.com
Template:     technico
Version:      0.00000163
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  villafenia
*/



:root {	
	--dark-color: #333333;
	--blue-color: #006495;
	--light-blue-color: #00A2F1;
	--light-bg-color: #F2F7FA;
	--body-color: #F7FBFD;
}

/****************** GENERAL */
html, body {overflow-x: hidden !important}
body, .entry-content {font-family: "Geologica", sans-serif !important; font-size: 16px !important; font-weight: 300 !important; line-height: 22px !important; letter-spacing: 0px; color: var(--dark-color); background: var(--body-color)}
h1,h2,h3,h4,h5,h6 {font-family: "Alice", serif; font-weight: 400 !important; letter-spacing: 0px; color: var(--dark-color)}
strong {font-weight: 600 !important}

.entry-content p > a {font-weight: 300; border-bottom: 0px !important; color: var(--blue-color);}
.entry-content p > a:hover {color: var(--blue-color)}
.entry-content ul li {margin-bottom: 10px; color: var(--dark-color); font-size: 16px}
.entry-content ol li {margin-bottom: 10px; color: var(--dark-color); font-size: 16px}

.centered {text-align: center !important}
.wpb_single_image img {border-radius: 16px !important}

.svg-image .vc_figure {width: 100%}
.svg-image .vc_single_image-wrapper {width: 100%}

.bottom-section {padding-top: 0px !important}

.main {padding-top: 180px !important; padding-bottom: 0px !important}
.home .main {padding-top: 0px !important;}

.nodesktop {display: none !important}

/****************** LOGO */
.site-logo {position: relative; top: 3px}
.site-logo a {margin-bottom: 0px !important}
.alt-logo {display: none;}
.alt-logo svg {width: 140px; height: auto}
.scrollActive .site-logo {display: none}
.scrollActive .alt-logo {display: block}


/****************** HEADER */
.header {position: absolute; width: 100%; left: 0px; top: 0px; background: var(--body-color); z-index: 800;}
.home .header {background: transparent;}
.mast-head-wrap {padding: 25px 10px;}
.header-right {text-align: right; font-family: "Geologica", sans-serif; font-weight: 600 !important; font-size: 15px !important; line-height: 23px !important; color: var(--blue-color); letter-spacing: 0.5px;}

.scrollActive .header {position: fixed; background: var(--body-color); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.10) !important; width: calc(100% - 20px); left: 10px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;}
.scrollActive .mast-head-wrap {padding: 12px 0px;}


/****************** MENU */
.nav {margin-top: 0px !important}
.nav ul {text-align: center}
.nav ul li a {font-family: "Geologica", sans-serif; font-weight: 600 !important; font-size: 15px !important; line-height: 23px !important; color: var(--dark-color) !important; letter-spacing: 0.5px; border: 0px !important; margin-left: 15px !important; margin-right: 15px !important; padding-top: 5px !important; padding-bottom: 5px !important}

.nav ul li a:hover {color: var(--light-blue-color) !important;}
.nav ul li.current-menu-item a {color: var(--light-blue-color) !important}

.navigation .menu-item-has-children a {margin-right: 25px !important}
.navigation .menu-item-has-children a:before {display: none !important}
.navigation .menu-item-has-children > a::after {margin-top: -12px !important; right: 8px !important; font-size: 10px !important}

/*submenu*/
.navigation ul {padding: 25px 20px !important; border-radius: 16px; background: var(--blue-color); border: 0px}
.navigation > li ul li a {padding: 3px !important; color: var(--light-bg-color) !important}
.navigation > li ul li a:hover {color: var(--light-blue-color) !important}
.navigation > li ul li.current-menu-item a {color: var(--light-blue-color) !important}


/****************** BUTTONS ***/
.vc_btn3 {background-image: none !important; font-weight: 600; font-size: 13px !important; text-transform: uppercase !important; font-family: "Geologica", sans-serif; letter-spacing: 1px; border-radius: 24px !important; padding: 12px 20px 12px 20px !important; height: auto !important; position: relative}
.vc_btn3:hover {background: var(--light-blue-color) !important; color: var(--light-bg-color) !important; border-color: var(--light-blue-color) !important}

.withmargin .vc_btn3 {margin-right: 20px !important}

.standout-btn {font-weight: 600; font-size: 13px; text-transform: uppercase !important; font-family: "Geologica", sans-serif; letter-spacing: 1px; border: 2px solid var(--blue-color); border-radius: 24px !important; padding: 12px 20px 12px 20px !important; height: auto !important; background: var(--blue-color); color: var(--light-bg-color) !important; text-align: center; transition: all 0.2s ease-in-out; position: relative}
.standout-btn:hover {background: var(--light-blue-color) !important; color: var(--light-bg-color) !important; border-color: var(--light-blue-color) !important; transition: all 0.2s ease-in-out;}

.discover-btn {margin-bottom: 120px !important}

/****************** HERO ***/
.hero {height: 100vh; background-color: #DDF4FF; background-size: cover; background-position: center center; border-radius: 24px; border: 10px solid var(--blue-color); position: relative !important; overflow: visible !important;}
.hero:before {content: "" !important; position: absolute !important; display: block !important; inset: -10px; background: var(--blue-color); border-radius: 0; z-index: -1;}
.hero-title {font-size: 76px !important; line-height: 86px; font-weight: 400 !important; color: var(--dark-color); letter-spacing: 0px; margin-top: 0px !important; margin-bottom: 15px !important; overflow: hidden !important}
.hero-hypertitle { font-weight: 600; color: var(--light-blue-color); letter-spacing: 0.5px; margin-bottom: 0px !important; margin-top: 80px !important; font-size: 15px}


.hero-column {opacity: 0; animation: HMCfadeIn 0.5s ease-in forwards;}

@keyframes HMCfadeIn {
  to {
    opacity: 1;
  }
}

.building {position: absolute !important; width: 700px; bottom: 0px; right: 20px; opacity: 0; animation: HMCfadeIn 0.5s ease-in forwards; z-index: -1}
.building img {border-radius: 0px !important}

.cloud {position: absolute !important; width: 50px; animation: float 4s ease-in-out infinite;}
.cloud.left {left: -30px; bottom: 5%;}

.cloud.right {right: -30px; top: 30%; animation-delay: -1s;}


@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}


/****************** SECTIONS ***/
.section {padding-top: 100px; padding-bottom: 100px;}
.section-title {font-size: 76px !important; line-height: 86px; font-weight: 400 !important; color: var(--dark-color); letter-spacing: 0px; margin-top: 0px !important; margin-bottom: 20px !important; overflow: hidden !important}
.section-hypertitle {color: var(--light-blue-color) !important; font-size: 15px; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 5px !important}

.light-section {background: var(--light-bg-color);}


/****************** BOOK DIRECTLY ***/
.reason {font-weight: 500; color: var(--blue-color); letter-spacing: 0px; position: relative}
.reason.last {margin-bottom: 40px !important}
.reason:before {content: url(img/checkmarck.svg); position: relative; left: -10px; top: 3px}


/****************** VILLAS ***/
.room-title {font-size: 36px;}
.room-description {margin-bottom: 25px !important}
.room-icon {position: relative; display: inline-block; margin-right: 40px}
.room-guests {padding-left: 30px;}
.room-guests:before {content: url(img/guests.svg) !important; position: absolute !important; display: block !important; left: 0px; top: 0px; }
.room-sqm {padding-left: 35px;}
.room-sqm:before {content: url(img/size.svg) !important; position: absolute !important; display: block !important; left: 0px; top: 0px; }
.room-floor {padding-left: 40px;}
.room-floor:before {content: url(img/floor.svg) !important; position: absolute !important; display: block !important; left: 0px; top: 0px; }

.big-message {font-family: "Alice", serif; font-size: 26px !important; line-height: 36px; font-weight: 400 !important; color: var(--dark-color); letter-spacing: 0px; }


/****************** SINGLE VILLA ***/
.room-hero {padding-bottom: 60px !important}
.small-title {font-family: "Alice", serif; font-size: 36px !important; line-height: 46px; font-weight: 400 !important; color: var(--dark-color); letter-spacing: 0px; margin-top: 0px !important; margin-bottom: 30px !important; overflow: hidden}

.room-amenity.withicon {position: relative; padding-left: 30px;}
.room-amenity.withicon:before {content: url(img/clock.svg) !important; position: absolute !important; display: block !important; left: 0px; top: 2px;}

.modula-gallery {margin-top: 40px !important}
.modula-item {border-radius: 16px !important}


/********************* CONTACT ***/
.wpcf7-form {margin-top: 30px; margin-bottom: 80px}
.wpcf7-form label {color: var(--dark-color); font-weight: 600 !important; text-transform: none; font-size: 15px; letter-spacing: 0.5px; }
.wpcf7-form p {margin-bottom: 35px}

.wpcf7-text {border: 2px solid var(--blue-color); padding: 10px 15px; background: transparent; color: var(--dark-color); margin-top: 15px; height: 50px; font-size: 16px !important; border-radius: 24px}
.wpcf7-date {border: 2px solid var(--blue-color); padding: 10px 15px; background: transparent; color: var(--dark-color); margin-top: 15px; height: 50px; font-size: 16px !important; border-radius: 24px}
.wpcf7-select {border: 2px solid var(--blue-color); padding: 10px 15px; background-color: transparent; color: var(--dark-color); margin-top: 15px; height: 50px; font-size: 16px !important; border-radius: 24px}

.wpcf7-textarea {border: 2px solid var(--blue-color); padding: 10px 15px; background: transparent; color: var(--dark-color); resize: vertical; height: 200px; margin-top: 15px; font-size: 16px !important; border-radius: 24px;}
.wpcf7-text:hover,.wpcf7-text:focus, .wpcf7-textarea:hover, .wpcf7-textarea:focus, .wpcf7-select:hover,.wpcf7-select:focus, .wpcf7-date:hover, .wpcf7-date:focus {border-color: var(--light-blue-color)}

.submitbtn p {margin-bottom: 0px !important; text-align: center}

.wpcf7-submit {background: var(--blue-color) !important; letter-spacing: 1px !important; font-weight: 600 !important; font-size: 13px !important; text-transform: none !important; padding: 12px 20px 12px 20px !important; height: auto !important; color: var(--light-bg-color) !important; border: 2px solid var(--blue-color) !important; transition: all 0.5s ease !important; border-radius: 24px !important}
.wpcf7-submit:hover {background: var(--light-blue-color) !important; border-color: var(--light-blue-color) !important; transition: all 0.5s ease !important}

.wpcf7-spinner {position: absolute !important}

.wpcf7-list-item {margin-left: 0px !important; margin-top: 10px !important; width: 100%}
.wpcf7-list-item a {color: var(--dark-color) !important}
.wpcf7-list-item label {margin-top: 10px; color: var(--dark-color);}
.wpcf7-list-item-label {margin-left: 5px !important}

.forconsent label {font-size: 16px; font-weight: 400 !important; color: var(--dark-color); display: inline-block; letter-spacing: 0px; width: calc(100% - 40px)}
.forconsent a {color: var(--light-blue-color) !important; }
.forconsent a:hover {color: var(--light-blue-color) !important}
.forconsent .wpcf7-form-control-wrap {display: inline-block; margin-right: 15px}

.wpcf7-response-output {text-align: center; font-size: 16px !important; font-weight: 400 !important; margin-left: 0px !important; margin-right: 0px !important; padding: 10px !important}
.wpcf7 form.sent .wpcf7-response-output {background: #46b450 !important; border: 1px solid #46b450 !important; color: var(--light-bg-color) !important; font-weight: 400 !important}
.wpcf7 form.invalid .wpcf7-response-output {background: #dc3232 !important; border: 1px solid #dc3232 !important; color: var(--light-bg-color) !important; font-weight: 400 !important}

.wpcf7-list-item input[type="checkbox"] {-webkit-appearance: none; appearance: none; background-color: transparent; margin: 0; font: inherit; color: var(--dark-color); width: 18px; height: 18px; border: 1px solid var(--dark-color); transform: translateY(-0.075em); display: inline-grid; place-content: center;}
.wpcf7-list-item input[type="checkbox"]::before {content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; background-color: var(--dark-color);}
.wpcf7-list-item input[type="checkbox"]:checked::before {transform: scale(1);}

#map {height: 600px; background: var(--light-bg-color)}
.info_content {max-width: 300px !important;}
.info_content h2 {margin-top: 3px; color: var(--dark-color); font-size: 30px; text-align: center}
.info_content p {margin-bottom: 5px; font-size: 16px; font-weight: 500; text-align: center}
.gm-style .gm-style-iw button {top: 0px !important; right: 0px !important}
.gm-style .gm-style-iw-c {border-radius: 24px !important; padding: 20px !important; box-shadow: none !important;}
.gm-style .gm-style-iw-tc {display: none !important}
.gm-style .gm-style-iw-d {overflow: hidden !important}
.gm-style-iw-chr {display: none !important}


.contact-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.contact-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #006495;
  color: #fff;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  transition: 0.3s;
}

.contact-icons a:hover {
  background: #00A2F1;
}



/****************** PRIVACY POLICY */
.privacypolicy {padding-bottom: 60px !important}




/*404*/
.error404 .error-hero {display: block; height: 100vh; text-align: center;background: var(--body-color)}
.error404 .error-title {font-family: "Geologica"; font-weight: 400 !important; font-size: 22px;color: var(--dark-color); width: 240px; height: 150px; position: absolute; left: 50%; top: 50vh; margin-left: -120px; margin-top: -75px;}

.error404 .error-title:before {content: "404"; display: block;font-family: "Geologica"; font-weight: 700 !important; font-size: 100px; color: var(--blue-color); margin-bottom: 20px; line-height: 100px}


/*REVIEWS*/
/*.wp-gr .grw-row {margin-top: 50px !important}*/
.wp-gr.wpac .grw-review-inner.grw-round {border-radius: 24px !important; padding: 25px !important;}
.wp-gr.wpac .grw-review-inner .wp-google-name {font-family: "Geologica", sans-serif; font-weight: 400 !important; }
.wp-gr .grw-review-inner .wp-google-text {font-family: "Geologica", sans-serif; font-weight: 300 !important; }
.wp-gr .grw-review-inner .wp-google-time {font-family: "Geologica", sans-serif; font-weight: 300 !important; }
.wp-gr .wp-google-feedback {padding-right: 10px !important}





/****************** FOOTER */
.footer {position: relative !important; background-color: var(--blue-color) !important; color: var(--light-bg-color) !important; font-family: "Geologica", sans-serif; font-weight: 300 !important; font-size: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.footer-main {padding-top: 120px; padding-bottom: 80px}
.footer-main .footer-content {display: flex; flex-wrap: wrap;}

.widget {font-size: 16px !important; line-height: 23px !important; margin-bottom: 20px; font-weight: 300 !important}
.widget-title {font-weight: 600 !important; font-size: 32px !important; border-bottom: 0px !important; letter-spacing: 0px; position: relative; color: var(--light-bg-color)}
.widget-title:after {content: none !important}

.footer .widget-title {color: var(--light-bg-color); margin-bottom: 10px !important }
.contactul {list-style-type: none; padding-left: 0px; margin: 20px 0 0 0; color: var(--light-bg-color)}
.contactul li {margin-bottom: 6px; font-size: 16px; padding-left: 0px; position: relative; font-weight: 300 !important;}
.contactul.withicon li {padding-left: 30px !important}

.footer .contactul {margin: 0px;}
.footer .contactul li {margin-bottom: 4px}
.footer .contactul li a {color: var(--light-bg-color) !important;}

.contactul .fa {color: var(--light-bg-color); font-size: 17px; margin-bottom: 0px; position: absolute; left: 0px}
.contactul .fa-map {font-size: 15px; padding-left: 0px; top: 4px}
.contactul .fa-phone {font-size: 19px; top: 4px}
.contactul .fa-envelope {font-size: 16px; padding-left: 0px; top: 4px}

.footer .menu-item {margin-bottom: 4px}
.footer .menu-item a {color: var(--light-bg-color) !important; font-weight: 400 !important; font-size: 15px; letter-spacing: 0.5px}
.footer .menu-item.current_page_item a {background: transparent !important; color: var(--light-blue-color) !important}
.footer .menu-item.current-menu-item a {background: transparent !important; color: var(--light-blue-color) !important}
.footer .menu-item a:hover {color: var(--light-blue-color) !important}

.footer .widget_media_image {margin-top: -40px}
.footer .widget_media_image svg path {fill: var(--light-bg-color);}

.footer .social-icons {margin-top: 40px}
.footer .social-icon {background: var(--light-bg-color); border-radius: 50%; margin-right: 5px; font-size: 21px; width: 32px; height: 32px; line-height: 32px;transition: all 0.3s ease !important }
.footer .social-icon .fa {color: var(--blue-color); transition: all 0.3s ease !important }
.footer .social-icon:hover {background: var(--light-blue-color); transition: all 0.3s ease !important }
.footer .social-icon:hover .fa {color: var(--light-bg-color) !important; transition: all 0.3s ease !important }


.footer .contact-icons {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
}

.footer .contact-icons a {
  background: var(--light-bg-color) !important;
  color: var(--blue-color) !important;
}

.footer .contact-icons a:hover {
  background: var(--light-blue-color) !important;
  color: var(--light-bg-color) !important;
}



.footer-copy {border-top: 1px solid var(--light-bg-color); padding-top: 20px; padding-bottom: 20px; font-family: "Geologica", sans-serif; font-weight: 400 !important; font-size: 13px !important; letter-spacing: 0.5px; background: transparent; color: var(--light-bg-color); line-height: 32px}
.footer-copy a {color: var(--light-bg-color) !important}
.footer-copy a:hover {color: var(--light-blue-color) !important}


/****************** MIN QUERIES ***/

@media screen and (min-width: 360px) {
	
.container {max-width: calc(100% - 30px);}
}

@media screen and (min-width: 544px) {
	
.container {max-width: calc(100% - 40px);}
}

@media screen and (min-width: 768px) {

.container {max-width: calc(100% - 40px);}
}

@media screen and (min-width: 850px) {

.container {max-width: 800px;}
}

@media screen and (min-width: 992px) {

.container {max-width: calc(100% - 40px);}

}

@media screen and (min-width: 1200px) {

.container {max-width: 1150px;}
}

@media screen and (min-width: 1300px) {

.container {max-width: 1200px;}
}

@media screen and (min-width: 1400px) {

.container {max-width: 1300px;}
}

@media screen and (min-width: 1600px) {

.container {max-width: 1500px;}
}

@media screen and (min-width: 1800px) {

.container {max-width: 1550px;}

}

@media screen and (min-width: 2000px) {

.container {max-width: 1600px;}
}


/****************** MAX QUERIES ***/

@media screen and (max-width: 1600px) {

.hero-title {font-size: 68px !important; line-height: 78px}
.section-title {font-size: 68px !important; line-height: 78px}
.room-title {font-size: 34px}
.big-message {font-size: 24px !important; line-height: 34px}
.small-title {font-size: 34px !important; line-height: 42px;}

.room-icon {margin-right: 35px}
.building {width: 600px}
}


@media screen and (max-width: 1500px) {

.firstcol {width: 250px !important}
.secondcol {width: calc(100% - 500px) !important}
.thirdcol {width: 250px !important}

#map {height: 500px !important}
}


@media screen and (max-width: 1400px) {

.hero-title {font-size: 62px !important; line-height: 72px}
.section-title {font-size: 62px !important; line-height: 72px}
.room-title {font-size: 32px}
.big-message {font-size: 24px !important; line-height: 34px}
.small-title {font-size: 32px !important; line-height: 40px}
.widget-title {font-size: 30px !important}

.discover-btn {margin-bottom: 160px !important}


.building {width: 550px}

}


@media screen and (max-width: 1300px) {

.hero-title {font-size: 60px !important; line-height: 70px}
.section-title {font-size: 60px !important; line-height: 70px}
.room-title {font-size: 30px}
.big-message {font-size: 20px !important; line-height: 30px}
.small-title {font-size: 30px !important; line-height: 38px;}
.widget-title {font-size: 30px !important}

.room-icon {margin-right: 30px}

.cloud.left {left: 0px}
.cloud.right {right: 0px}
}


@media screen and (max-width: 1200px) {

.firstcol {width: 250px !important}
.secondcol {width: 50px !important; position: absolute !important; right: 30px; padding: 0px !important}
.thirdcol {width: 200px !important; position: absolute; right: 100px; padding: 0px !important}
.scrollActive .secondcol {right: 20px}
.scrollActive .thirdcol {right: 90px; }

/****************** MENU ***/
.nav {display: none !important}
.mobile-menu-trigger {position: relative; font-size: 0px !important; float: left; width: 50px; height: 50px; display: flex !important; align-items: center; background: transparent; cursor: pointer}
#mobilemenu {display: block !important; text-align: left; color: var(--dark-color); z-index: 600; height: 100% !important; background: transparent; font-family: "Geologica", sans-serif !important; font-weight: 400 !important;}

.fa-navicon {position:absolute;display:block;background-color:var(--blue-color);height:2px;top:16px;left:0px;width:36px;transform:rotate(0);transition:width 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);} 
.fa-navicon::before,.fa-navicon::after {content:"";position:absolute;display:block;background-color:var(--blue-color);height:2px;width:36px;transform:rotate(0);transition:width 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);} 
.fa-navicon::before {top:8px;} 
.fa-navicon::after {top:16px;} 
.mobile-menu-trigger:hover .fa-navicon {width:44px;} 
.mobile-menu-trigger:hover .fa-navicon::before {width:40px;} 
.mobile-menu-trigger:hover .fa-navicon::after {width:30px;}

.mm-menu {max-width: 380px; border-top-left-radius: 16px; border-bottom-left-radius: 16px}
.mm-opened #mobilemenu {background-color: var(--blue-color);}
.mm-menu.mm-top {max-height: 100%; }
.mm-navbar {background: transparent !important; border-bottom: 0px !important; }
.mm-navbar .mm-title {display: none}
.mm-close {top: 0px !important; right: 2px !important; width: auto !important; color: var(--dark-color) !important; text-transform: uppercase; font-size: 0px; letter-spacing: 0.5px}

.mm-close::after {content: ""; width: 36px; height: 36px; background: url(img/close.png); background-size: cover; background-position: center center; display: block; margin-left: 15px; margin-top: 35px}
.mm-panels {background: transparent}
.mm-listview {height: 90%;display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 120px 30px 30px 30px}

.mm-listview > li > a, .mm-listview > li > span {white-space: initial}
.mm-listview li a {font-family: "Geologica", sans-serif; font-weight: 500 !important; font-size: 22px; line-height: 32px; padding: 0px; color: var(--light-bg-color) !important; letter-spacing: 0.5px; margin-bottom: 15px;}
.mm-listview li.current-menu-item a {color: var(--light-blue-color) !important}
.mm-listview li:hover a {color: var(--light-blue-color) !important}

.mm-listview li a:active {background: transparent !important}
.mm-listview li a:focus {background: transparent !important}
.mm-listview > li:not(.mm-divider)::after {content: none}

.mm-menu .mm-listview > li a:not(.mm-next) {-webkit-tap-highlight-color: transparent; tap-highlight-color: transparent;}
.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span {background: transparent;}

.mm-opened .fa-navicon {display: none}
.mm-panel.mm-subopened {opacity: 0 !important}

.mm-prev {top: 35px !important; left: 10px !important}
.mm-prev::after {content:""; width: 36px; height: 36px; background: url(img/back.png); background-size: cover; background-position: center center; display: block }
.mm-prev::before {display: none}

.mm-next {right: -70px !important; width: 350px !important;}
.mm-next:before {border: 0px !important}
.mm-next:after {content: ""; border: 0px !important; transform: none !important; width: 32px !important; height: 32px !important; top: -1px !important; background: url(img/right.png); background-size: cover !important; background-position: center center; display: block}
.mm-next:hover + a {color: var(--light-blue-color) !important}

.menu-item-has-children a {margin-right: 0px !important}
.menu-item-has-children a:hover {border: 0px !important}



.building {width: 500px}

.hero-title {font-size: 54px !important; line-height: 62px}
.section-title {font-size: 54px !important; line-height: 62px}
.room-title {font-size: 30px}
.big-message {font-size: 22px !important; line-height: 32px}
.small-title {font-size: 30px !important; line-height: 38px;}
.widget-title {font-size: 28px !important}

.hero-column {width: 50% !important}

}


@media screen and (max-width: 1100px) {

body, .entry-content {font-size: 15px !important; line-height: 21px !important;}
.entry-content ul li {font-size: 15px}
.entry-content ol li {font-size: 15px}
.wpcf7-text, .wpcf7-date, .wpcf7-select, .wpcf7-textarea {font-size: 15px !important;}
.forconsent label {font-size: 15px; }
.info_content p {font-size: 15px;}
.footer {font-size: 15px;}
.widget {font-size: 15px !important;}
.contactul li {font-size: 15px;}


.hero-title {font-size: 50px !important; line-height: 60px}
.section-title {font-size: 50px !important; line-height: 58px}
.room-title {font-size: 30px}
.big-message {font-size: 20px !important; line-height: 30px}
.small-title {font-size: 28px !important; line-height: 36px;}
.widget-title {font-size: 24px !important}

.room-icon {margin-right: 15px}

.footer-copy {font-size: 12px !important}

}

@media screen and (max-width: 992px) {

.alt-logo svg {width: 120px !important}

.hero {height: auto !important}
.hero.vc_row.vc_row-o-content-middle:not(.vc_row-o-equal-height) > .vc_column_container {align-items: flex-start !important; padding-top: 180px !important}
.building {width: 450px; position: relative !important; float: right; margin-top: 30px !important}

.hero-column  {width: 100% !important; }
.hero-hypertitle {margin-top: 0px !important;}
.hero-title {font-size: 56px !important; line-height: 64px; }
.section-title {font-size: 48px !important; line-height: 56px}
.room-title {font-size: 32px}
.big-message {font-size: 26px !important; line-height: 36px}
.small-title {font-size: 28px !important; line-height: 36px;}
.widget-title {font-size: 28px !important}

.wide-section .vc_col-sm-6 {width: 100% !important}
.wide-section .vc_col-sm-push-6 {width: 100% !important; left: 0px !important}
.wide-section .vc_col-sm-pull-6 {width: 100% !important; right: 0px !important}

.section {padding-top: 60px; padding-bottom: 60px}
.room-hero {padding-bottom: 30px !important}

.big-message {margin-top: 20px !important}
.discover-btn {margin-bottom: 0px !important;}

.amenities-section .vc_col-sm-9 {width: 65% !important}
.amenities-section .vc_col-sm-3 {width: 35% !important}


.wpcf7-form {margin-left: 15px !important; margin-right: 15px !important; margin-top: 0px !important}

.footer-main {padding-bottom: 40px !important}
.footer-col {width: 50% !important; margin-bottom: 30px}

.footer-copy .text-left, .footer-copy .text-right {width: 100%; text-align: center; line-height: 24px}
}



@media screen and (max-width: 767px) {

.nomobile {display: none !important}

.amenities-section .vc_col-sm-9 {width: 50% !important; float: left}
.amenities-section .vc_col-sm-3 {width: 50% !important; float: right}

.building {width: 400px}

.cloud.left {bottom: 10%; left: 15px}
.cloud.right {top: 20%; right: 15px}

#map {height: 450px !important}
}



@media screen and (max-width: 650px) {

.firstcol {width: 170px !important}
.secondcol {width: 50px !important; right: 20px;}
.thirdcol {width: 200px !important;right: 90px;}
.scrollActive .secondcol {right: 10px}
.scrollActive .thirdcol {right: 80px;}


.site-logo svg {width: 150px}

.hero-title {font-size: 48px !important; line-height: 58px; }
.section-title {font-size: 42px !important; line-height: 52px}
.room-title {font-size: 30px}
.big-message {font-size: 24px !important; line-height: 34px}
.small-title {font-size: 28px !important; line-height: 36px;}
.widget-title {font-size: 24px !important}

.vc_btn3 {font-size: 12px !important}
.standout-btn {font-size: 12px}
.wpcf7-submit {font-size: 12px !important}

#map {height: 400px !important}

.footer .widget_media_image svg {width: 150px}
}


@media screen and (max-width: 543px) {

.main {padding-top: 160px !important}

.standout-btn {display: none}
.nodesktop {display: block !important}
.building {right: 0px; width: 100%}
.cloud.left {display: none}

.hero-title {font-size: 48px !important; line-height: 58px; }
.section-title {font-size: 42px !important; line-height: 52px}
.room-title {font-size: 28px}
.big-message {font-size: 22px !important; line-height: 32px}
.small-title {font-size: 28px !important; line-height: 36px;}
.widget-title {font-size: 24px !important}

}


@media screen and (max-width: 480px) {

.mm-listview li a {font-size: 20px; line-height: 30px;}

.alt-logo svg {width: 100px !important}
.hero .smoothscrolling {display: none !important}

.amenities-section .vc_col-sm-9 {width: 100% !important; float: left}
.amenities-section .vc_col-sm-3 {width: 100% !important; float: left}

.section-title {font-size: 40px !important; line-height: 50px}

.room-icon {font-size: 13px; margin-right: 10px; margin-bottom: 15px !important}

.footer-col {width: 100% !important; margin-bottom: 30px}
.footer-col:first-child {text-align: center !important;  padding-bottom: 40px !important}
.footer-col:first-child:after {content: ""; position: absolute; display: block; height: 1px; width: calc(100% - 30px); background: var(--body-color);}

.social-icons {margin-bottom: 30px}
.social-icon {margin-left: 5px; margin-right: 5px}
}


@media (orientation: landscape) {

.hero {min-height: 550px}



}