.hero {
position: relative;
margin-top: -125px;
background-color: #766f62;
}
.hero-slider {
position: relative;
}
.hero-slider__slide {
width: 100%;
min-height: 100vh;
position: relative;
}
.hero-slider__slide > img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-slider .slick-dots {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
}
.hero-slider .slick-dots li {
display: inline-block;
margin: 0 5px;
}
.hero-slider .slick-dots button {
width: 8px;
height: 8px;
border-radius: 4px;
background-color: rgba(255,255,255,.8);
display: block;
text-indent: -9999px;
padding: 0;
border: 0;
}
.hero-slider .slick-dots button[aria-selected='true'] {
background-color: #fff;
width: 35px;
}
.hero-slider .slick-btn {
border: 0;
background-color: transparent;
padding: 10px;
position: absolute;
top: 0;
height: 100%;
z-index: 1;
}
.hero-slider .slick-prev {
left: 10px;
transform: scaleX(-1);
}
.hero-slider .slick-next {
right: 10px;
}
.hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 100px 0;
justify-content: center;
text-align: center;
color: #fff;
text-shadow: 0px 0px 24px rgba(26, 26, 26, 0.48);
pointer-events: none;
}
.hero-content h2 {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 2em;
margin-top: 5em;
}
.hero-content p {
color: #e9e9e9;
margin-bottom: 0;
}
.about-us {
padding: 40px 0;
text-align: center;
background: url(//dev.allenjustin.com/tanabeachvillas/wp-content/themes/tana/images/about-bg.jpg) bottom center no-repeat;
background-size: cover;
}
.about-us__container {
padding: 0 15px;
}
.about-us__content {
margin-bottom: 30px;
}
.about-us__sub-title {
text-transform: uppercase;
font-family: 'Nunito';
font-size: 1em;
letter-spacing: 1px;
color: #e3bb90;
margin: .5em 0;
}
.about-us__title {
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 2px;
margin: .5em 0;
}
.about-us__img img {
width: 100%; }
.rooms {
padding: 50px 0;
background: url(//dev.allenjustin.com/tanabeachvillas/wp-content/themes/tana/images/room-bg.jpg) center no-repeat;
background-size: cover;
overflow: hidden;
}
.rooms__header {
color: #fff;
text-align: center;
}
.rooms__title {
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 0;
margin-bottom: 20px;
}
.rooms__text {
margin-bottom: 0;
}
.rooms-slider {
padding: 0 10px;
margin: 30px 0;
}
.rooms-slider .slick-btn {
border: 0;
background-color: transparent;
padding: 10px;
position: absolute;
top: 0;
height: 100%;
z-index: 1;
}
.rooms-slider .slick-prev {
left: 10px;
transform: scaleX(-1);
}
.rooms-slider .slick-next {
right: 10px;
}
.room-thumbnail__img {
position: relative;
}
.room-thumbnail__img  canvas {
width: 100%;
height: auto;
}
.room-thumbnail__img  img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.room-thumbnail__details {
background-color: #fff;
padding: 10px;
text-align: center;
}
.room-thumbnail__title {
margin-top: 0;
margin-bottom: 0;
}
.room-thumbnail__specs {
font-size: 0.8125em;
}
.room-thumbnail__specs span {
margin-right: 5px;
}
.room-thumbnail__specs span svg {
position: relative;
top: 2px;
}
.room-thumbnail__link {
display: block;
text-align: center;
margin-top: 20px;
text-transform: uppercase;
font-size: 0.75em;
}
.room-thumbnail__link svg {
margin-left: 10px;
position: relative;
top: -2px;
}
.rooms-link {
position: relative;
}
.amenities {
padding: 50px 0;
}
.amenities__sub-title {
text-transform: uppercase;
font-family: 'Nunito';
font-size: 1em;
letter-spacing: 1px;
color: #e3bb90;
margin: 0;
}
.amenities__title {
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 0 30px;
}
.amenities-slider {
padding: 0 10px;
margin-bottom: 30px;
position: relative;
}
.amenities-slider .slick-btn {
border: 0;
background-color: transparent;
padding: 10px;
position: absolute;
top: 0;
height: 100%;
z-index: 1;
}
.amenities-slider .slick-prev {
left: 10px;
transform: scaleX(-1);
}
.amenities-slider .slick-next {
right: 10px;
}
.amenity-thumbnail { 
position: relative;
}
.amenity-thumbnail__img { 
position: relative;
}
.amenity-thumbnail__img canvas { 
width: 100%;
height: auto;
}
.amenity-thumbnail__img img { 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.amenity-thumbnail__title { 
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
font-size: 0.875em;
text-shadow: 0px 0px 24px rgba(26, 26, 26, 0.48);
}  
.amenities-desktop-slider {
display: none;
margin-bottom: 40px;
}
.amenities-desktop-slide {
position: relative;
margin: 0 5px;
}
.amenities-desktop-slide canvas {
width: 100%;
height: auto;
}
.amenities-desktop-slide .amenity-thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.amenities-desktop-slide:nth-child(odd) .amenity-thumbnail {
height: calc(50% - 5px);
}
.amenities-desktop-slide:nth-child(odd) .amenity-thumbnail:nth-child(2) {
top: auto;
bottom: 0;
}
.amenities-desktop-slide .amenity-thumbnail__img {
position: static;
}
.testimonial {
overflow: hidden;
padding: 70px 0;
background: #fff;
}
.testimonial-container {
padding: 0 15px;
margin: 0 auto;
position: relative;
}
.testimonial-quote {
position: relative;
margin: 0 auto 1em;
display: block;
}
.testimonial-container:before {
content: url(//dev.allenjustin.com/tanabeachvillas/wp-content/themes/tana/images/testimonial-leaves.jpg);
position: absolute;
top: -3em;
left: -3em;
}
.testimonial-slider {
font-size: 1.125em;
text-align: center;
}
.testimonial-slider__slide {
outline: none;
}
.testimonial-slider .slick-dots {
list-style: none;
padding: 0;
margin: 20px 0 0;
width: 100%;
text-align: center;
}
.testimonial-slider .slick-dots li {
display: inline-block;
margin: 0 5px;
}
.testimonial-slider .slick-dots button {
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #eeeded;
display: block;
text-indent: -9999px;
padding: 0;
border: 0;
}
.testimonial-slider .slick-dots button[aria-selected='true'] {
background-color: #e3bb90;
}
.testimonial-slider__slide-content p {
margin-top: 0;
}
.testimonial-slider__slide-author {
margin-bottom: 0;
font-family: 'Nunito';
font-size: 0.8125em;
color: #e3bb90;
}
.testimonial-slider__slide-author:before {
content: '- ';
color: #766f62;
}
.careers {
padding: 50px 0;
background-color: #766f62;
text-align: center;
color: #fff8ee;
}
.careers__title {
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
.careers__text {
margin: 0;
}
.careers__button {
display: inline-block;
border-radius: 5px;
background-color: #fff8ee;
text-transform: uppercase;
color: #56534f;
padding: 12px 20px;
font-size: .9em;
text-decoration: none;
letter-spacing: 1px;
margin-top: 30px;
border-bottom: 3px solid #56534f;
}
.careers__button:hover {
background-color: #e3bb90;
color: #fff;
}
@media screen and (min-width: 768px) {
.hero-content p {
max-width: 590px;
margin: 10px auto 0;
}
.about-us__container {
display: flex;
align-items: center;
}
.about-us__content {
width: 50%;
}
.about-us__img {
width: 50%;
}
.rooms {
position: relative;
}
.rooms:before {
content: '';
display: block;
width: 100%;
height: 40%;
background: url(//dev.allenjustin.com/tanabeachvillas/wp-content/themes/tana/images/room-bg-bottom.jpg) center no-repeat;
background-size: cover;
position: absolute;
bottom: 0;
left: 0;
}
.rooms-slider {
padding: 0;
}
.rooms-slider .slick-track {
display: flex;
align-items: flex-end;
}
.room-thumbnail {
position: relative;
}
.rooms-slider .slick-slide.slick-active .room-thumbnail__details {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
background-color: rgba(255,255,255,.8);
border: 1px solid #b5aa9e;
display: flex;
text-align: left;
align-items: center;
justify-content: space-between;
}
.room-thumbnail__link {
margin-top: 0;
}
.rooms-slider .slick-slide:not(.slick-active) .room-thumbnail__details {
display: none;
}
.rooms-slider .slick-slide:not(.slick-active) .room-thumbnail__img {
max-width: 90%;
margin: 0 auto;
background-color: #000;;
}
.rooms-slider .slick-slide:not(.slick-active) .room-thumbnail__img img {
opacity: .4;
}
.amenities-slider {
padding: 0;
}
.amenities-slide {
padding: 0 5px;
}
.testimonial-container {
max-width: 680px;
position: relative;
}
.testimonial-quote {
position: absolute;
right: 100%;
bottom: 100%;
margin-bottom: 0;
}
.careers-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 890px;
margin: 0 auto;
}
.careers-left {
text-align: left;
display: flex;
}
.careers__icon {
margin-right: 20px;
}
.careers__button {
margin-top: 0;
}
}
@media screen and (min-width: 1024px) {
.hero-content h2 { 
margin-top: 2em;
font-size: 2.8em;
}
.rooms__header {
max-width: 840px;
}
}
@media screen and (min-width: 1366px) {
.hero {
margin-top: -215px;
}
.hero-content h2 {
font-size: 3.25em;
}
.hero-content p {
font-size: 1.125em;
}
.about-us__container {
max-width: 1480px;
margin: 0 auto;
}
.about-us__content {
width: 750px;
}
.about-us__content p {
font-size: 1.5em;
}
.about-us__sub-title {
font-size: 1.375em;
}
.about-us__title {
font-size: 4.5em;
line-height: 1.1;
}
.about-us__img {
flex: 1;
}
.about-us__img img {
max-width: none;
}
.rooms__title {
font-size: 3.4375em;
}
.rooms__text {
font-size: 1.125em;
}
.room-thumbnail__title {
font-size: 1.75em;
}
.room-thumbnail__link {
font-size: 1em;
}
.amenities__sub-title {
font-size: 1.125em;
}
.amenities__title {
font-size: 3.4375em;
max-width: 840px;
margin: 0 auto 40px;
}
.amenities-slider {
display: none;
}
.amenities-desktop-slider {
display: block;
}
.careers__icon {
display: flex;
align-items: center;
}
.careers__title {
font-size: 2.25em;
}
.careers__text {
font-size: 1.125em;
}
.careers__button {
font-size: 1em;
}
}
@media screen and (min-width: 1440px) {
.about-us, .rooms, .amenities, .testimonial {
padding: 100px 0;
}
}
@media screen and (min-width: 1580px) {
.about-us__img-container {
margin-right: -100px;
}
}
@media screen and (min-width: 1680px) {
.about-us__img-container {
margin-right: -200px;
}
}.woocommerce-breadcrumb {
display: none;
}
.woocommerce-notices-wrapper {
width: 100%;
}
.woocommerce-message {
margin-bottom: 30px;
width: 100%;
background-color: #1a1a1a;
color: #fff;
padding: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
}
.woocommerce-message a {
display: inline-block;
padding: 5px 10px;
font-size: .75em;
background-color: #766e63;
color: #fff;
text-transform: capitalize;
margin-right: 15px;
}
.woocommerce-notices-wrapper ul {
margin: 0;
padding: 0;
list-style: none;
}
.page-banner__specs {
font-size: 0.8125em;
}
.page-banner__specs span {
margin: 0 3px;
}
.page-banner__specs span svg {
position: relative;
top: 2px;
}
.single-product .main-wrapper {
padding-top: 0;
margin-top: -140px;
position: relative;
}
.woocommerce-product-gallery .flex-control-nav {
padding: 0;
margin: 0;
margin-top: 5px;
list-style: none;
display: flex;
justify-content: center;
margin-right: -5px;
}
.woocommerce-product-gallery .flex-control-nav li {
width: calc(25% - 5px);
margin-right: 5px;
margin-bottom: 5px;
background-color: #766f62;
}
.woocommerce-product-gallery .flex-control-nav li img {
width: 100%;
display: block;
opacity: .3;
}
.woocommerce-product-gallery .flex-control-nav li img.flex-active {
opacity: 1;
}
.single-product-wrapper {
max-width: 940px;
max-width: 640px;
margin: 0 auto;
}
.single-product-sidebar {
margin-top: 40px;
}
.price {
display: inline-block;
background-color: #fff8ee;
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #766f62;
line-height: 1;
margin: 0;
}
.product_title {
text-transform: uppercase;
font-size: 1.5em;
letter-spacing: 1.5px;
margin-top: 0;
margin-bottom: 10px;
}
.product_specs {
margin-top: 0;
}
.product_specs span {
margin-right: 7px;
display: inline-block;
}
.product_specs svg {
position: relative;
top: 2px;
}
.woocommerce-product-details__short-description {
margin-bottom: 30px;
}
.tab-container {
margin-top: 30px;
}
.offers {
margin-top: 40px;
}
.offers__title {
font-size: 1.2em;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.offers__list {
list-style: none;
padding: 0;
margin: 0;
margin-right: -15px;
display: flex;
flex-wrap: wrap;
}
.offers__item {
margin-right: 15px;
width: calc(50% - 15px);
text-align: center;
margin-bottom: 30px;
}
.offers__icon {
width: 45px;
height: 45px;
margin: 0 auto 10px;
}
.offers__offer {
display: inline-block;
}
.related-products {
background-color: #fff;
padding: 50px 0;
border-top: 1px solid #e1dbd0;
}
.related-products .related > h2 {
text-align: center;
text-transform: uppercase;
margin-top: 0;
letter-spacing: 1.5px;
}
.related-products ul {
padding: 0;
margin: 0;
list-style: none;
}
.related-products ul li {
margin-bottom: 20px;
}
.related-products .woocommerce-loop-product__title {
margin-top: 0;
margin-bottom: 0;
font-size: 1.2em;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.related-products img {
width: 100%;
} .wc-tabs, .woocommerce-Tabs-panel h2 {
display: none;
}
#tab-accommodation_booking_time {
display: none;
}
.woocommerce-page #secondary {
display: none;
}
.related-products .price {
display: none;
}
.related-products .add_to_cart_button {
display: none;
}
.woocommerce-ordering {
display: none;
}
.woocommerce-products-header__title {
margin-top: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.page-description {
max-width: 660px;
margin: 0 auto;
}
.woocommerce-result-count {
display: none;
}
.woocommerce-shop ul.products {
padding: 0;
margin: 0;
list-style: none;
}
.woocommerce-shop ul.products .woocommerce-loop-product__title {
margin: 0;
}
.woocommerce-shop ul.products .button {
display: none;
}
.woocommerce-shop ul.products .price {
margin-bottom: 10px;
}
.woocommerce-shop ul.products li {
margin-bottom: 30px;
text-align: center;
}
.woocommerce-shop ul.products li img {
display: block;
width: 100%;
}
.woocommerce-shop .related-products {
display: none;
} .wc-bookings-booking-form {
padding: 0;
border: 0;
display: flex;
flex-wrap: wrap;
}
#wc_bookings_field_persons {
text-align: center;
width: 80px;
}
.wc-bookings-date-picker {
padding: 0;
border: 0;
}
.wc-bookings-booking-form > * {
width: 100%;
}
.wc-bookings-booking-form .wc-bookings-booking-cost {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}
.wc-bookings-date-picker .ui-widget-content {
box-shadow: none;
font-family: 'EB Garamond';
width: 100%;
max-width: 350px;
}
.wc-bookings-date-picker .ui-datepicker-header {
background: #766f62;
border: 0;
}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-title {
background-color: #6a6356;
}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev, .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next {
background-color: #766f62;
}
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev.ui-state-hover, .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next.ui-state-hover {
background-color: #766f62;
}
.wc-bookings-date-picker .ui-datepicker th {
color: #766f62;
}
.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {
opacity: 1;
}
.wc-bookings-date-picker .ui-datepicker td .ui-state-default {
color: #766f62;
font-size: .8em;
}
.wc-bookings-date-picker .ui-datepicker td.bookable a {
background-color: #766f62 !important;
}
.wc-bookings-date-picker .ui-datepicker-today.ui-datepicker-current-day a.ui-state-highlight {
background-color: #e3bb90 !important;
}
.wc-bookings-date-picker .ui-datepicker td.bookable-range .ui-state-default {
background-color: #e3bb90 !important;
}
.inc-btn-wrapper {
display: flex;
}
.inc-btn {
height: 50px;
display: block;
cursor: pointer;
}
.inc-btn:hover svg rect {
fill: #000;
}
.inc-btn-wrapper input {
margin: 0 5px;
text-align: center;
width: 240px !important;
}
.inc-btn-wrapper input[type='number']::-webkit-inner-spin-button,
.inc-btn-wrapper input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.wc-bookings-booking-cost bdi {
padding: 3px 10px;
border-radius: 4px;
line-height: 1;
background-color: #fff8ee;
border: 1px solid #766e63;
}
@media screen and (min-width: 768px) {
.woocommerce-product-gallery .flex-control-nav li {
max-width: 100px;
}
.related-products ul {
display: flex;
justify-content: center;
margin-right: -15px;
}
.related-products ul li {
width: calc(33.3333% - 15px);
margin-right: 15px;
} .woocommerce-shop ul.products {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-right: -20px;
}
.woocommerce-shop ul.products li {
width: calc(50% - 20px);
margin-right: 20px;
}
}
@media screen and (min-width: 768px) {
.offers__item {
width: calc(33.3333% - 15px);
}
}
@media screen and (min-width: 1024px) {
.single-product-wrapper {
display: flex;
}
.single-product-content {
flex: 1;
}
.single-product-sidebar {
margin-left: 30px;
padding-top: 130px;
} .woocommerce-shop ul.products li {
width: calc(33.33333% - 20px);
}
}
@media screen and (min-width: 1366px) {
.page-banner__specs {
font-size: 1.125em;
}
.page-banner__specs span {
margin: 0 10px;
}
.page-banner__specs span svg {
top: 0;
}
.related-products .woocommerce-loop-product__title {
font-size: 1.125em;
}  .woocommerce-shop .product_specs {
font-size: 0.6125em;
font-family: 'Nunito';
}
} .product-remove {
width: 40px;
}
.product-thumbnail {
display: none;
}
.product-price, .product-quantity {
display: none;
}
.woocommerce-cart-form__contents thead {
font-size: 1.2em;
padding-bottom: 20px;
}
.woocommerce-cart-form__contents th {
text-align: left;
padding-bottom: 30px;
}
.cart_item {
font-family: 'Nunito';
font-size: .8em;
vertical-align: top;
}
.cart_item .remove {
display: inline-flex;
width: 20px;
height: 20px;
background-color: #e3bb90;
color: #fff;
align-items: center;
justify-content: center;
border-radius: 50%;
}
th {
text-align: left;
}
.product-name {
text-align: left;
}
.cart_item .product-name a {
font-family: 'EB Garamond';
text-transform: uppercase;
font-size: 1.2em;
}
.cart_item dd {
margin: 0;
margin-bottom: 10px;
font-style: italic;
}
.cart_item p {
margin: 0;
}
.actions {
padding-top: 50px;
}
.coupon input[name='coupon_code'] {
width: 150px;
}
.actions button[name='update_cart'] {
display: none;
}
.cart-collaterals {
padding: 20px;
background-color: #fff;
border: 1px solid #766f62;
border-radius: 10px;
}
.cart-collaterals h2 {
margin-top: 0;
}
.cart-collaterals tr {
text-align: left;
}
.tax-rate th {
font-weight: normal;
}
.checkout-button {
width: 100%;
display: block;
padding: 10px 25px;
text-align: center;
background-color: #766f62;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
@media screen and (min-width: 768px) {
.product-thumbnail {
display: table-cell;
width: 180px;
padding-right: 15px;
}
.product-thumbnail img {
display: block;
border-radius: 10px;
}
}
@media screen and (min-width: 1024px) {
.woocommerce-cart .woocommerce {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.woocommerce-cart .woocommcerce .woocommerce-notices-wrapper {
width: 100%;
}
.woocommerce-cart-form {
flex: 1;
}
.cart-collaterals {
width: 350px;
margin-left: 20px;
}
}
@media screen and (min-width: 1366px) {
.product-price {
display: table-cell;
}
.product-thumbnail {
width: 300px;
}
.cart_item .remove {
margin-top: 100px;
}
} .woocommerce-checkout-payment {
padding: 20px;
border: 1px solid #766e63;
}
.payment_methods {
padding: 0;
margin: 0;
list-style: none;
}
.payment_methods label {
font-weight: bold;
}
.payment_box {
padding: 5px;
border: 1px dashed #766e63;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 30px;
}
.payment_box p {
margin: 0;
}
.woocommerce-checkout-review-order {
max-width: 750px;
}
.ppc-button-wrapper {
margin-top: 30px;
}
@media screen and (min-width: 1024px) {
#customer_details {
display: flex;
}
.col-1 {
flex: 1;
}
.col-2 {
width: 50%;
margin-left: 30px;
}
}