html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: 'NeueHaasUnicaPro-Regular';
vertical-align: baseline;
outline: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
textarea {font-family: 'NeueHaasUnicaPro-Regular';}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
outline-offset: 0px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong
{
font-weight: normal;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; zoom: 1;}
/* Main Structure */
.wrapper {overflow: hidden; width: 100%; position: relative; }
.content-wrapper { overflow: hidden; width: 100%; position: relative; max-width:1120px; margin: 0 auto; height: 100%; margin-bottom: 20px;}
.hero {width: 100%; background-color: #ffffff; position: }
.menu { position: fixed; top: 0; left: -400px; width: 400px; height: 100%; background-color: #ffffff; z-index: 2; }
/* Menu feature */
.menu-button {display: block; width: 30px; height: 21px; position: fixed; z-index: 3; top: 55px; left: 55px;}
.menu-button .menu-bar {width: 30px; height: 1px; position: absolute; left: 0; background-color: #ffffff;}
.menu-button .menu-bar1 {top: 0px;}
.menu-button .menu-bar2 {top: 10px;}
.menu-button .menu-bar3 {top: 20px;}
.menu-open .menu {left: 0;}
.menu-open .menu-button {left: 340px;}
.menu-open .menu {
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;}
.menu {
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;}
.menu-open .menu-button {
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;}
.menu-button {
-webkit-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
-ms-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
transition: left 0.3s ease;}
.menu-open .menu-button .menu-bar {background-color: #000000;}
.menu-open .menu-button .menu-bar { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease; transition: all 0.6s ease; }
.menu-button .menu-bar { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease; transition: all 0.6s ease; }
.menu-open .menu-button .menu-bar1 {transform: rotate(41deg); transform-origin: left top;}
.menu-open .menu-button .menu-bar2 {opacity: 0;}
.menu-open .menu-button .menu-bar3 {transform: rotate(-42deg); transform-origin: left top;}
.menu { padding: 50px; border-right: 3px solid #eaeaea; }
.menu .logo-svg { display: block; padding: 100px 0; }
.menu .logo-svg svg { display: block; }
.menu nav { padding-bottom: 50px; }
.menu ul li.dest-item { padding-bottom: 15px; }
.menu ul li:first-child a { font-family: 'NeueHaasUnicaPro-Regular'; font-size: 18px; }
.menu ul li a { font-size: 16px; line-height: 32px; color: #1f1f23; font-family: 'NeueHaasUnicaPro-Light'; }
.menu address ul { padding-bottom: 25px; }
.menu address ul li { font-size: 16px; line-height: 32px; color: #1f1f23; font-family: 'NeueHaasUnicaPro-Light'; font-style: normal; }
.menu .social { width: 16px; height: 16px; }
.menu .social .social-ig { background-image:url(../images/ig.jpg); background-repeat: no-repeat; background-size: cover;
width: 100%; height: 100%; }
/* Generics */
.fade-load { opacity: 0; }
.load .fade-load { opacity: 1; }
.hideme { opacity: 0; }
.hideme.nohide { opacity: 1; }
.loader { opacity: 1; position: absolute; width: 100%; height: 100%; top: 0; left:0; background-image: url(../images/wakika-loader.gif); background-repeat: no-repeat; background-position: center center; }
.load .loader { opacity: 0; }
.fade-slidedown { margin-top: -30px; }
.fade-slidedown.load { margin-top: 0px; }
.col-7 { width: 70%; float: left; }
.col-33 { width: 33.33%; float: left; }
.col-3 { width: 30%; float: left; }
.col-4 { width: 25%; float: left; }
.col-5 { width: 50%; float: left; }
.col-left { padding-right: 15px; }
.col-right { padding-left: 15px; }
.col-small-left { padding-right: 10px; }
.col-small-right { padding-left: 10px; }
h2 { font-family: 'ArcherPro-ExtraLight'; font-size: 35px; }
h3 { font-family: 'ArcherPro-ExtraLight'; }
.details-title { font-size: 24px; line-height: 32px; }
.details-columns { font-family: 'NeueHaasUnicaPro-Regular'; color: #101010; padding-bottom: 52px; }
/* Hero */
div.content-wrapper .logo-svg {background-image: url(../images/Wakiki_logo_01.png); background-size: contain; height: 65px; width: 75%; display: block; background-repeat: no-repeat; background-position: center center;
margin-top: 15px; margin-left: 65px;}
.menu-open .hero-image {-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease; transition: all 0.6s ease; }
.menu-open .owl-carousel .owl-item img {-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease; transition: all 0.6s ease; }
.menu-open .property-details .details-map img {-webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease; transition: all 0.6s ease; }
.hero-image { position: relative; height: 70%; overflow: hidden; }
.hero-image div { height: 100%; width: 100%; }
.hero-image-zoom {
height: auto !important;
min-height: 100%;
min-width: 100%;
width: auto !important;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-top: 0;
/*
animation:move 20s ease 1; -ms-animation:move 20s ease 1;
-webkit-animation:move 20s ease 1; -0 -animation:move 20s ease 1;
-moz-animation:move 10s ease 1; transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2);
-o-transform: scale(1.2); -moz-transform: scale(1.2); bottom: 0%; position: absolute; animation-iteration-count: 1;
*/ }
.hero-text { position: relative; height: 30%; overflow: hidden; text-align: center; font-family: 'ArcherPro-ExtraLight'; }
.hero-text h3 { text-align: left; line-height: 32px; color: #000; font-size: 28px; opacity: 0;
-webkit-animation-delay: 0.5s; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-name: animation;
-webkit-animation-fill-mode: forwards; }
.hero-text h2 { line-height: 35px; color: #878787; font-weight: 600; opacity: 0;
-webkit-animation-delay: 0.8s; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-name: animation;
-webkit-animation-fill-mode: forwards; }
#owl-gallery-hero .owl-item.active { z-index: 9999999; }
#owl-gallery-hero .owl-item { z-index: 0; }
/* GAlerÃa */
section.property-gallery { border: 2px solid #f3f3f3; padding: 0px 0; position: relative; padding-bottom: 40px;}
.property-gallery .item{ margin: 5px; color: #000; text-align: left; font-size: 12px; }
.property-gallery .item img { height: auto; width: 100%; padding-bottom: 15px; }
.property-gallery .gallery-title { font-size: 24px; line-height: 32px; padding-top: 60px; }
.property-gallery .items-gallery { position: absolute; width: 100%; right: 0; padding-left: 33%; top: 0; padding-top: 60px;
padding-bottom: 60px;}
.owl-stage-outer { overflow: visible !important; }
.hidden-scroll { padding-right: 0px !important; }
.sl-wrapper .sl-image .sl-caption { background: #fff !important; color: #000 !important; }
.sl-wrapper .sl-counter { display: none !important; }
.sl-wrapper .sl-navigation button.sl-next { background-image: url(../images/gallery_arrow_right.png); background-repeat: no-repeat; margin-top: -10px; right: 30px; height: 10%; width: 47px; background-position: right; }
.sl-wrapper .sl-navigation button.sl-prev { background-image: url(../images/gallery_arrow_left.png); background-repeat: no-repeat;
margin-top: -10px; height: 10%; width: 47px; background-position: left; }
.sl-wrapper .sl-close { background-image: url(../images/close.png); display: none; position: fixed; right: 30px; top: 30px; z-index: 1015; }
.sl-overlay { opacity: 0.95 !important; }
/* Details */
section.property-details { border: 2px solid #f3f3f3; padding:65px 0; background: #fafafa; position: relative; font-size: 14px; line-height: 24px; }
.property-details .details-text { font-family: 'NeueHaasUnicaPro-Light'; color: #535353; padding-bottom: 25px; padding-bottom: 30px; }
.property-details .details-text p { padding-bottom: 20px; }
.property-details .details-columns .details-title { padding-bottom: 10px; }
.property-details .details-columns { font-family: 'NeueHaasUnicaPro-Regular'; color: #101010; padding-bottom: 52px; }
.property-details .details-columns .detail-money { font-family: 'NeueHaasUnicaPro-Light'; color: #535353; }
.property-details .details-map img { width: 100%; height: auto; }
/* Amenities & Services */
section.amenities-services { border: 2px solid #f3f3f3; padding:65px 0; position: relative; font-size: 14px; line-height: 24px; }
/* Footer */
section.footer-section { border: 2px solid #f3f3f3; padding:65px 0; position: relative; font-size: 14px; line-height: 24px; background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-size: cover; color: #fff; width: 100%; text-align: center; }
section.footer-section ul { display: block; }
section.footer-section ul li { display: inline-block; }
.details-footer a { font-size: 30px; line-height: 32px; color: #fff; font-family: 'NeueHaasUnicaPro-Light'; }
.details-footer { font-size: 30px; line-height: 32px; color: #fff; padding-bottom: 60px; }
.details-footer ul li { padding: 0 50px; font-family: 'NeueHaasUnicaPro-Light'; }
.address-footer { font-size: 16px; line-height: 32px; color: #fff; padding-bottom: 45px; font-family: 'NeueHaasUnicaPro-Light'; }
.address-footer ul li { padding: 0 5px; font-family: 'NeueHaasUnicaPro-Light'; }
section.footer-section .logo-svg { background-image: url(../images/logo-footer.png); background-size: contain; height: 65px; width: 100%; display: block; background-repeat: no-repeat; background-position: center center;
margin: 40px 0 30px 0; }
/* Reservations */
section.reservations { border: 2px solid #f3f3f3; padding:65px 0; position: relative; font-size: 14px; line-height: 24px; background: #fafafa; }
/* Forms */
/* Text */
.reservation-form fieldset { display: block; margin-bottom: 15px; }
.reservation-form .input-holder { margin-bottom: 10px; padding-bottom: 0; }
.reservation-form .input-holder label { display: block; font-size: 14px; line-height: 24px; margin-bottom: 4px; font-family: 'NeueHaasUnicaPro-Light'; }
.reservation-form .input-holder label.val-required:after { content: " *"; color: #000; }
.reservation-form .input-holder .input-text { display: block; width: 100%; background: #fff; line-height: 25px; padding: 12px; font-size: 14px; height: 50px; border: 1px solid #f3f3f3; }
/* Selects */
.input-select-style { display: block; width: 100%; background: #fff; line-height: 25px; padding: 12px; font-size: 14px; height: 50px; border: 1px solid #f3f3f3; background-image: url(../images/dropdown_arrow.png); cursor: pointer;
background-repeat: no-repeat; font-size: 14px; background-position: 90% center; background-size: 16px; }
.input-select-style select { height: 100%; width: 100%; display: block; z-index: 0; cursor: pointer; }
.arrow { background-image: url(../images/arrow.png); background-repeat: no-repeat; height: 38px; margin-top: 6px; display: block; margin-left: 20px; }
span.calendar {background-image: url(../images/calendar.png); background-repeat: no-repeat; height: 38px; margin-top: 6px; display: block; margin-left: 20px; }
.server-validation-error { background: #F0F0F0; padding: 15px; margin-bottom: 30px; }
.server-validation-error p { margin: 0 !important; text-align: center; padding: 0 !important; color: #0079c2 !important; font-size: 12px !important; line-height: 15px !important; }
.reservation-form .btn { text-align: center; height: 49px; width: 100%; background: #000; color: #fff; font-size: 14px; line-height: 24px; margin-top: 28px; }
.menu-button .menu-bar.black { background-color: #000000; }
.email-sent {position: absolute; width: 320px; height: 200px; top: 50%; left: 50%; margin-left: -100px; margin-top: -160px;background: red; z-index: 99999999999; display: none; }
.owl-carousel .owl-stage { background: #fff; }
/* <------------------------------ Keyframes -----------------------------------> */
@-webkit-keyframes move {
from {
transform: scale(1);
-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari and Chrome */
-o-transform: scale(1); /* Opera */
-moz-transform: scale(1); /* Firefox */
}
to {
transform: scale(1.2);
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Safari and Chrome */
-o-transform: scale(1.2); /* Opera */
-moz-transform: scale(1.2); /* Firefox */
}
}
@-webkit-keyframes animation {
0% {
opacity:0;
-webkit-animation-timing-function: linear;
}
100% {
opacity:1;
-webkit-animation-timing-function: linear;
}
}
/* Feel free to change duration */
.animated {
-webkit-animation-duration : 1000 ms ;
animation-duration : 1000 ms ;
-webkit-animation-fill-mode : both ;
animation-fill-mode : both ;
}
/* .owl-animated-out - only for current item */
/* This is very important class. Use z-index if you want move Out item above In item */
.owl-animated-out {
z-index : 1
}
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */
.owl-animated-in {
z-index : 0
}
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */
.fadeOut {
-webkit-animation-name : fadeOut ;
animation-name : fadeOut ;
}
@-webkit-keyframes fadeOut {
0% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}
@keyframes fadeOut {
0% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}
/* Hero */
.val-input-box { position: relative; }
.val-error-message { line-height: 12px; font-size: 12px; color: #EC644B; width: 100%; float: left; text-align: left; }
.mail-overlay { position: fixed; top: 0; left: 0; background: rgba(124,124,124,0.7); padding: 30px; height: 100vh; width: 100%; z-index: 999999; }
.mail-overlay .holder { width: 100%; max-width: 420px; margin: 0 auto; background: #fff; padding: 30px 20px; height: auto; position: relative; }
.mail-overlay .holder .close { position: absolute; top: 0; right: 0; height: 33px; width: 33px; line-height: 33px; text-align: center; display: block; color: #535353; border-bottom: none; }
.mail-overlay .holder .close:hover { color: #282828; cursor: pointer; }
.mail-overlay .holder .close span:before { line-height: 33px; }
.mail-overlay .holder h4 { font-size: 24px; line-height: 32px; margin-bottom: 10px; font-family: 'ArcherPro-ExtraLight'; }
.mail-overlay .holder.error h4 {}
.mail-overlay .holder.ok h4 { }
.mail-overlay .holder p { color: #535353; line-height: 20px; font-size: 13px; }
.mail-overlay .holder a { color: #535353; border-bottom: 1px solid #535353; }
.outdsppot { display: none !important; }
.onsppot { display: block !important; }