/* 
    Created on : 14-feb-2018
    Author     : Susana Sanz
*/

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://cdn.costabrava.villas/assets/fonts/quicksand-v28-latin-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn.costabrava.villas/assets/fonts/quicksand-v28-latin-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://cdn.costabrava.villas/assets/fonts/quicksand-v28-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.costabrava.villas/assets/fonts/quicksand-v28-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.costabrava.villas/assets/fonts/vollkorn-v19-latin-700italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root, html {
    --serif: 'Vollkorn', serif;
    --sansserif: 'Quicksand', sans-serif;
    --main-brown: #AF8A69;
    --light-brown: #e9ded5; /*#af8a6947;*/
    --light-green: rgb(236, 239, 227); /*#7b973226;*/
    --main-green: #7B9732;
    --dark-green: #2E4827;
}

html, body {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    overflow-x: hidden;
}

.title-up {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 0
}

.title-down {
    font-size: 0.8875rem;
    margin-top: -15px;
}

.title-up.big {
    font-size: 1.25rem;
    padding: 40px 0;
}

.h2 {
    color: #7B9732;
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 400;
}

.h2.small {
    font-size: 1.25rem;
}

.h3 {
    font-size: 1.5rem;
    color: #fff;
}

h3.h3 {
    color: #7b9732;
    font-size: 2rem;
    font-weight: 400;
}

p {
    font-size: 1rem;
    line-height: 1.5rem;
}

p.small {
    font-size: 1rem;
    line-height: 1.5rem;
}

.no-padding {
    padding-right: 0;
    padding-left: 0
}

.no-padding-left {
    padding-left: 0
}

.no-padding-right {
    padding-right: 0
}

.noClikable {
    pointer-events: none
}

.img-fluid {
    width: 100%;
}

.aligner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-dark-brown {
    background-color: #AF8A69;
}

.bg-brown {
    background-color: #e9ded5;
}

.bg-green {
    background-color: rgb(236, 239, 227);
}

.color-green {
    color: #7B9732;
}

.icon {
    width: 3rem;
    padding-bottom: 15px;
    max-height: 4rem;
}

.mt30 {
    margin-top: 30px
}

.mt50 {
    margin-top: 50px
}

.mb30 {
    margin-bottom: 30px
}

.mg30 {
    margin-top: 30px;
    margin-bottom: 30px
}

.mb50 {
    margin-bottom: 50px
}

.mb80 {
    margin-bottom: 80px
}

.mg80 {
    margin-top: 80px;
    margin-bottom: 80px
}

#message_ok {
    text-align: center;
    color: #7B9732;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    background-color: #fff;
    top: 10%;
    left: 7%;
    padding: 5px;
    margin-bottom: 35px;
    padding-top: 10px;
}

.absolute-row {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0 !important;
}

.absolute-row > div > a:focus {
    outline: none
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
}

.saber-mas, .distribucion {
    color: #7B9732 !important;
    font-size: 0.9375rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    cursor: pointer;
}

.underline {
    text-decoration: none;
    position: relative;
}

.underline:after {
    position: absolute;
    content: '';
    height: 3px;
    bottom: -8px;
    margin: 0 auto;
    left: -10%;
    right: 0;
    width: 120%;
    background: #fff;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.color-green .underline:after {
    background: #7B9732;
}

.underline:hover:after {
    width: 140%;
    left: -20%;
}

.img-fluid {
    height: 100%;
    object-fit: cover;
}

.intro-text {
    margin: 60px auto;
}

.intro-text .main-body {
    max-width: 600px;
    margin: 40px auto;
}

.vertical-distribute {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto
}

.opacity-dark-layer {
    background-color: rgba(0, 0, 0, 0.2);
    height: 100vh;
}

.btn.btn-custom {
    background-color: #7B9732;
    color: white;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 30px;
    font-weight: 400;
    margin-right: 2px;
    margin-bottom: 2px;
}

.btn.btn-custom:hover {
    background-color: rgb(236, 239, 227);
    border: 1px solid #7B9732;
    color: #7B9732;
}

.btn-container .d-block {
    text-decoration: underline;
    font-size: 0.9rem;
}

.serif-font {
    font-family: 'Vollkorn', serif;
    color: #2E4827;
    font-size: 3.25rem;
    margin-bottom: 2rem;
    margin-top: 60px;
    line-height: 2.6rem;
}

.saber-mas .arrow.arrow-opened, .distribucion .arrow.arrow-opened {
    -webkit-transform-origin-y: 22px;
    transform: scaleY(-1);
    transition: ease-out 0.4s
}

.saber-mas .arrow, .distribucion .arrow {
    -webkit-transform-origin-y: inherit;
    transform: inherit;
    transition: ease-out 0.4s
}

/* ------------------ HEADER IMG ------------------ */
#header-img {
    height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    /*background-position: 50% 50%;*/
	background-position: 50% 50%;
}

#header-img .opacity-layer, .opacity-layer {
    background-color: rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#header-img.home {
    /*height: calc(100vh - 300px);*/
	height: calc(100vh - 100px);
}

#header-img.home .h1 {
    font-family: 'Vollkorn', serif;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 4px 4px #00000075;
    font-style: italic;
    max-width: 70%;
    text-align: center;
    margin: auto;
    z-index: 100;
    line-height: 3.7rem;
}

#header-img.home .h3 {
    margin: 30px 0;
}

#header-img .main-fixed {
    display: none;
}

#header-img .main-fixed .row {
    margin: 0;
}

#header-img-responsive .background-header {
    background-color: #000000;
}

#header-img-responsive .background-header img {
    opacity: 0.7;
    width: 100%;
    max-height: 250px;
}

#header-img-responsive .main-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 16;
}

#header-img-responsive .main-fixed .row {
    text-align: center;
}

#header-img-responsive .main-fixed .row > div {
    flex-direction: column;
    width: 50%;
    height: 60px !important;
    color: #fff;
    background-color: #AF8A69;
}

#header-img-responsive .main-fixed .reserve a {
    border: 1px solid #fff;
    margin: 0 30px;
    padding: 7px;
}

#header-img-responsive .main-fixed .call img {
    width: 20px;
    margin-right: 5px;
}

#header-img.book-header {
    background-position: center;
}

/* ------------------ HEADER > NAVBAR & LOGO ------------------ */

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000 url(../logos/vcb-loader.gif) no-repeat center center;
    background-size: 100px;
    background-color: #FFF;
}

#logo-header {
    position: absolute;
    z-index: 100;
    width: 100%;
    right: 0;
    left: 0;
}

#logo-header #logo-header-img {
    width: 150px;
}

header {
    position: relative;
    z-index: 1000
}

header .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: ease-in 0.2s
}

header .navbar.fixed-top {
    background-color: #AF8A69;
    transition: ease-in 0.2s
}

header .navbar.fixed-top #logo-navbar {
    opacity: 1;
    transition: ease-in 0.2s
}

header .navbar.fixed-top #logo-navbar, .navbar .navbar-collapse {
    opacity: 1;
    transition: ease-in 0.2s
}

header .navbar.fixed-top.menu-opened {
    background-color: transparent;
    transition: ease-in 0.2s
}

header .navbar.fixed-top .only-in-fixed {
    display: block;
    transition: ease-in 0.2s
}

header .navbar .only-in-fixed {
    display: none;
    transition: ease-in 0.2s
}

header .navbar .navbar-nav .nav-item a {
    cursor: pointer;
    color: #fff
}

header .navbar .navbar-nav > li > a {
    color: #fff
}

header .navbar #logo-navbar {
    opacity: 0;
    transition: ease-in 0.2s
}

header .navbar #logo-navbar img {
    height: 40px
}

header .navbar #telf-navbar img {
    height: 18px
}

header .navbar .dropdown-menu {
    background-color: #AF8A69;
    border-radius: 0;
}

header .navbar .dropdown-item:focus, header .navbar .dropdown-item:hover {
    background-color: #e9ded5;
    color: #AF8A69;
}

header .navbar .dropdown-item {
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}

header .navbar.menu-opened #logo-navbar, .navbar.menu-opened .navbar-collapse {
    opacity: 0;
    transition: ease-in 0.2s
}

header .navbar.menu-opened .button_container.active span {
    background: #798e38;
    transition: ease-in 0.2s
}

#languages-dropdown {
    color: white;
    position: absolute;
    right: 60px;
    right: 80px;
    text-transform: uppercase;
}

header > nav ul.main-list {
    margin-right: 100px !important;
}

header > nav > div.collapse.navbar-collapse {
    margin-right: 20px
}

/* ------------------ HEADER > MENU OVERLAY ------------------ */

#barraaceptacion {
    color: rgb(255, 255, 255);
    display: block;
    padding: 30px 100px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    left: 15px;
    background: rgb(175, 137, 104);
    text-align: center;
    z-index: 1000;
}

#barraaceptacion p {
    display: block;
    margin-bottom: 30px;
    text-align: center;
}

#barraaceptacion a.ok {
    border: 1px solid #fff;
    padding: 10px 30px;
}

#barraaceptacion a.info {
    padding: 10px;
    text-decoration: underline;
}

.button_container {
    position: fixed;
    right: 2%;
    height: 20px;
    width: 32px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity .25s ease;
    top: 20px;
}

.button_container:hover {
    opacity: .7;
}

.button_container.active {
    width: 34px;
}

.button_container.active .top {
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #FFF;
}

.button_container.active .middle {
    opacity: 0;
    background: #FFF;
}

.button_container.active .bottom {
    transform: translateY(-8px) translateX(0) rotate(-45deg);
    background: #FFF;
}

.button_container span {
    background: #fff;
    border: none;
    height: 2px;
    width: 32px;
    position: absolute;
    top: 0;
    transition: all .35s ease;
    cursor: pointer;
}

.button_container span:nth-of-type(2) {
    top: 9px;
}

.button_container span:nth-of-type(3) {
    top: 18px;
}

.overlay {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.98);
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    z-index: 110;
}

.overlay.open {
    opacity: .99;
    visibility: visible;
    height: 100%;
}

.overlay.open li {
    animation: fadeInRight .5s ease forwards;
    animation-delay: .35s;
}

.overlay.open li:nth-of-type(2) {
    animation-delay: .4s;
}

.overlay.open li:nth-of-type(3) {
    animation-delay: .45s;
}

.overlay.open li:nth-of-type(4) {
    animation-delay: .50s;
}

.overlay nav {
    position: relative;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
}

.overlay a {
    color: #212529;
    font-weight: 500
}

.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    height: auto;
}

.overlay ul li {
    display: block;
    height: 25%;
    height: calc(100% / 4);
    position: relative;
    opacity: 0;
    line-height: 2.2rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}

.overlay ul li.title {
    color: #7B9732;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.overlay ul li a {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    font-weight: 500;
}

.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
    width: 100%;
}

.overlay ul li a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    background: #FFF;
    transition: .35s;
}

.overlay ul li .mt30.btn {
	margin: 30px 0px;
	border: 2px solid rgb(123, 148, 52);
	padding: 10px 15px;
}

#overlay #logo-menu-overlay {
    width: 150px;
}

#overlay .vertical-distribute {
    padding-top: 7vh;
    padding-bottom: 10vh;
    height: 100%
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

/* ------------------ HOME ------------------ */

#header-img-responsive {
    display: none;
}

#home-intro #filter-boxes {
    padding: 0px
}

#home-intro #filter-boxes .aligner .img-fluid {
    height: 250px; /*220*/
    object-fit: cover;
    padding: 10px
}

#home-intro #filter-boxes .aligner p {
    z-index: 100; /*position: absolute;*/
}

.container-bg {
    width: 100%;
    height: 250px; /*200*/
    background-size: cover;
}

#filter-boxes .opacity-dark-layer {
    transition: 0.3s
}

#filter-boxes .opacity-dark-layer:not(.noClikable):hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.5s
}

#filter-boxes > div {
    height: 100%;
    width: 100%;
    background-size: cover;
    padding: 10px 5px;
}

#filter-boxes > div:first-child {
    padding-left: 10px
}

#filter-boxes > div:nth-child(4) {
    padding-right: 10px
}

#filter-boxes > div .opacity-dark-layer {
    height: 100%;
    width: 100%
}

/* home intro filtered */
#home-intro.filtered #filter-boxes .aligner:not(.selected) .opacity-layer {
    background-color: black;
}

#home-intro.filtered #filter-boxes .aligner:not(.selected) .img-fluid {
    mix-blend-mode: luminosity;
}

#home-intro.filtered #intro-text .title-up, #home-intro.filtered #intro-text .h2 {
    display: none;
}

/* home intro */
.villas-list .icon {
    width: 30px;
    margin-right: 5px;
    margin-left: 5px;
}

.villas-list .col-lg-4 {
    padding: 70px 30px
}

.villas-list .col-lg-4 .icons-list {
    margin: 35px 0 15px
}

.villas-list .col-lg-4 .text-list {
}

.villas-list .box-price {
    margin: 50px 0;
}

.box-price {
    text-transform: uppercase;
    line-height: 0.8rem;
}

.box-price .form {
    font-size: 0.75rem
}

.box-price .price {
    font-size: 1.875rem
}

.box-price .days {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 2px;
}

.more-info {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500
}

.more-info-home {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
	color: white;
	border: 2px solid #7B9732;
	background-color: #7B9732;
    font-weight: bold;
    padding: 20px 60px;
    font-size: large;
}

.more-info.underline:after {
    background-color: #7B9732;
}

.carousel .carousel-indicators li {
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    margin-right: 8px;
    margin-left: 8px;
    background-color: transparent;
    border: 2px solid #fff;
}

.carousel .carousel-indicators li.active {
    background-color: #fff;
}

section.bg-green.icons-row .list-inline.d-flex {
    flex-wrap: wrap
}

#map-villas {
    width: 100%;
    height: 480px;
    margin: 20px auto 0;
}

#home-last-section .intro-text {
    margin: 30px auto;
    padding-top: 40px;
    padding-bottom: 40px
}

#home-last-section .intro-text .main-body {
    max-width: 600px;
    margin: 30px auto;
}

/* ------------------ LANDING VILLA ------------------ */

.landing-villa .caption {
    position: relative;
    bottom: 20px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    margin-top: -40px;
    padding: 10px;
    float: left;
}

.landing-villa .counter {
    position: relative;
    bottom: 20px;
    color: white;
    text-align: right;
    background-color: rgba(0, 0, 0, 0.6);
    margin-top: -40px;
    padding: 10px;
    float: right;
}

#header-img.villa {
    color: #fff;
    text-transform: uppercase;
}

#header-img.villa .h1 {
    font-size: 5.6rem;
    font-weight: 300
}

#header-img.villa .title-up {
    font-size: 1.65rem;
    font-weight: 300
}

#header-img.villa .h3 {
    font-size: 1.25rem;
    font-weight: 300;
}

#header-img.villa > div > div {
    margin-bottom: 50px
}

#header-img-responsive.villa {
    color: #212529;
    text-transform: uppercase;
}

#header-img-responsive.villa .title-up {
    font-size: 1.65rem;
    font-weight: 300;
    color: #212529;
    margin-top: 30px;
}

#header-img-responsive.villa .h1 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 45px !important;
    color: #212529;
}

#header-img-responsive.villa .h3 {
    font-size: 1.25rem;
    font-weight: 300;
    color: #212529;
}

.intro-villas .h2.black {
    color: black
}

.intro-villas .intro-text .main-body {
    margin: 30px auto;
}

.intro-villas .intro-text .icons-list .list-inline-item {
    display: inline-block;
    padding: 5px 20px;
    margin: 0
}

.intro-villas .intro-text .icons-list .list-inline-item .icon {
    width: 40px
}

.desde, .noche {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.9rem
}

.precio {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 8px;
}

.section-gallery .row > [class^="col-"],
.section-gallery .row > [class*=" col-"] {
    padding: 8px
}

.section-gallery .container-bg {
    height: 100%;
}

.section-gallery .container-bg .opacity-dark-layer {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%
}

.villa-details .title-up {
    margin-bottom: 15px;
    margin-top: 20px;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.villa-details .intro-text .title-up {
    margin-bottom: 0
}

.villa-details > div > div:nth-child(2) > div:nth-child(1) {
    padding-right: 40px;
}

.villa-details > div > div:nth-child(2) > div:nth-child(2) {
    padding-left: 40px;
}

.icons-row ul.list-inline > li.col-auto {
    vertical-align: top
}

.icons-row ul.list-inline > li.col-auto img {
    vertical-align: bottom
}

.icons-row ul.list-inline.col-count-7 > li.col-auto {
    width: 14%;
    padding: 0;
    margin: 0;
    min-width: 100px;
}

.two-columns-list {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.two-columns-list li, .details-in-list li {
    padding-right: 50px;
    margin: 15px 10px;
    font-size: 1rem
}

.seven-columns-list {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
}

#services-box #services-box-text-list ul li {
    width: 100%;
    font-size: 1.125rem
}

.villa-details .row:nth-child(2) ul > li {
    width: 100%;
}

.villa-details > div > div:nth-child(2) > div > ul > li {
    padding-right: 50px
}

.villa-details .box-room-description .title-up {
    margin-bottom: 5px;
    margin-top: 15px;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.villa-details .box-room-description .icons-list {
    margin-bottom: 22px;
    margin-top: 14px;
}

.villa-details .box-room-description .icons-list .icon {
    width: 30px;
    padding-bottom: 0;
    max-height: 30px;
}

.villa-details .box-room-description .info-text {
    font-size: 0.8rem;
    margin-top: -20px;
}

.villa-details .amenities {
    font-size: 1rem;
    padding: 0 45px;
}

.icons-row ul > li {
    width: 15%;
    max-width: 140px;
    margin: 0;
    padding: 0;
    height: 120px;
}

.icons-row ul > li > p {
    font-size: 1rem
}

.icons-row.why-us ul > li {
    width: 150px
}

.d-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

#filter-boxes .aligner {
    flex-direction: column
}

#gallery-desktop p {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.6rem;
}

#gallery-desktop .icon-tour {
    width: 50px
}

#virtualTourModal .modal-dialog {
    height: 90vh;
    max-width: inherit;
    width: 90vw;
    margin: 5vh 5vw;
    display: table;
}

#virtualTourModal .modal-content {
    display: table-cell;
    vertical-align: middle;
}

#virtualTourModal .modal-body {
    padding: 0px !important;
}

#virtualTourModal iframe {
    height: calc(90vh - 51px);
}

#virtualTourModal .link-decoration {
    text-decoration: underline;
}

#virtualTourModal .modal-open .modal {
    background-color: #000000;
}

/* ------------------ ABOUT ------------------ */

#contact-section .contact-row {
    font-weight: 400
}

#contact-section .contact-row p {
    margin: 0
}

#contact-section .contact-row .name {
    font-weight: 800
}

#contact-section .contact-row .cargo {
    text-transform: uppercase
}

#contact-section .contact-row .mail {
    margin-top: 15px;
}

#contact-section .intro-text {
    margin: 60px auto 40px;
}

/* ------------------ ENVIROMENT ------------------ */

#intro-enviroment .img-fluid {
    height: auto;
}

.section-gallery.enviroment > div > div > .col-4 {
    height: auto
}

.section-gallery.enviroment .row [class^="col-"], .section-gallery.enviroment .row [class*="col-"] {
    height: auto
}

#enviroment-last-section .intro-text {
    margin: 0 auto;
}

#enviroment-last-section .img-fluid {
    height: 300px
}

#enviroment-last-section .row {
    margin: 80px auto
}

#enviroment-last-section .intro-text .main-body {
    margin: 20px auto;
}

#enviroment-last-section .intro-text .main-body li {
    padding: 10px 0
}

.intro-text ul li, .text-list li {
    padding: 10px 0
}

/* ------------------ FORM ------------------ */

.form-group {
    margin-bottom: -1px;
}

.form-group .custom-select {
    height: 4rem;
    padding-left: 1.4rem;
    color: #495057;
    border-color: black;
    border-radius: 0;
}

textarea.form-control {
    padding-left: 1.4rem;
    padding-top: 1.4rem;
    border-radius: 0;
    border-color: black;
}

#contact-section textarea.form-control {
    border-top: 1px solid #000;
}

#contact-section #contacto textarea.form-control {
    
}

select.form-control, input.form-control {
    border-radius: 0;
    margin: 0;
    padding: 1.4rem;
    width: 100%;
    border-color: black;
}

#checkout {
    border-left: none;
}

.info-villa-reservation .icons-list .list-inline-item {
    margin: 5px 10px;
}

.info-villa-reservation .icons-list .list-inline-item .icon {
    width: 40px
}

.intro-form .info-villa-reservation .img-fluid {
    height: auto;
}

.form-control[readonly] {
    background-color: #fff;
}

/* ------------------ Landing FORM & contact-form ------------------ */

#header-img-small {
    height: 40vh;
    min-height: 250px;
    background-size: cover;
}

#header-img-small .h1 {
    font-family: 'Vollkorn', serif;
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 4px 4px #00000075;
    font-style: italic;
    text-align: center;
    margin: auto;
    z-index: 100;
    line-height: 3.2rem;
}

a.ver-calendario.d-block {
    margin-top: 21px;
    font-size: 14px;
    text-transform: uppercase;
}

.select-villa-container .custom-select {
    width: 100%;
    border-radius: 0;
    border-color: black;
	font-size: 1.3rem;
}

.select-villa-container > p {
    padding-right: 30px;
    padding-top: 5px;
	font-size: 18px;
    font-weight: bold;
}

.select-villa-container {
    margin-bottom: 10px;
}

.intro-form .img-fluid {
    height: 350px
}

#contact-form .no-padding-left .custom-select {
    border-left: 0;
}

#selected-dates label {
    text-transform: uppercase;
    font-weight: 800
}

#selected-dates input.form-control {
    padding: 8px 0;
    background-color: transparent;
    border: 0;
    width: 110px;
    cursor: pointer
}

#selected-dates p.small {
    font-size: 0.8rem
}

#selected-dates-form .form-group {
    background-color: rgb(236, 239, 227);
    margin: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.ui-datepicker .ui-widget-header {
    background-color: #fff;
    border: 0;
}

.ui-datepicker .ui-datepicker-title {
    font-size: 1.4rem
}

.availableDates td.not_available a {
    background-color: #AF8A69 !important;
}

.availableDates td.not_available span {
    background-color: #AF8A69 !important;
}

.availableDates td.input_date {
    background-position: 90%;
    background-image: url(../icons/datein.svg) !important;
}

.availableDates td.input_date a {
    position: absolute;
    background-color: transparent !important;
    top: 0;
    right: 0;
}

.availableDates td.input_date, .availableDates td.output_date {
    position: relative;
    background-repeat: no-repeat !important;
}

.availableDates td.output_date {
    background-position: 0 1px;
    background-image: url(../icons/dateout.svg) !important;
}

.availableDates td.output_date a {
    position: absolute;
    background-color: transparent !important;
    top: 0;
    right: 0;
}

.availableDates .ui-widget-header .ui-icon.ui-icon-circle-triangle-e {
    background-image: url(../icons/arrow-calendar-right.svg);
}

.availableDates .ui-widget-header .ui-icon.ui-icon-circle-triangle-w {
    background-image: url(../icons/arrow-calendar-left.svg);
}

.availableDates .ui-icon-circle-triangle-w {
    background-position: 8px -27px;
}

.availableDates .ui-icon-circle-triangle-e {
    background-position: -8px -26px;
}

.availableDates .ui-state-disabled a {
    color: green !important;
}

.availableDates-legend {
    max-width: 800px;
    margin: auto;
    justify-content: left;
    padding-left: 10px;
    padding-top: 0;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default,
.ui-datepicker .ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    background: #fff !important;
    border: 0 !important;
}

.ui-widget.ui-widget-content {
    border: 0 !important;
}

.ui-datepicker .ui-widget.ui-widget-content {
    border: #fff !important;
}

.ui-datepicker .ui-datepicker-multi-2 .ui-datepicker-group {
    padding: 10px !important;
}

.availableDates, .availableDates .ui-datepicker-inline {
    width: 100% !important;
    max-width: 800px;
    margin: auto;
}

.datepicker-container {
    cursor: pointer
}

#ui-datepicker-div {
    box-shadow: 1px 2px 9px #2E4827 !important;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 45% !important
}

.ui-datepicker-multi-2 .ui-datepicker-group.ui-datepicker-group-first {
    margin-right: 5%
}

.ui-datepicker table {
    margin: 0 auto .4em;
}

.ui-datepicker table td, .ui-datepicker table th {
    width: 33px !important
}

.ui-datepicker-calendar {
    width: 241px !important
}

.calendar-rates .list-inline-item.color-box {
    width: 20px !important;
    height: 20px;
    background-color: #AF8A69;
    display: inline-flex;
    vertical-align: bottom;
    margin: 10px 10px 0 0;
}

.g-recaptcha {
    margin-top: 30px;
}

.g-recaptcha > div {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 992px) {
	.more-info-home {
		border: 0px;
		display: block;
		margin-right: -30px;
		margin-left: -30px;
		margin-bottom: -28px;
	}
    .ui-datepicker-multi-2 .ui-datepicker-group {
        width: 100% !important
    }

    .ui-datepicker-multi-2 .ui-datepicker-group.ui-datepicker-group-first {
        margin-right: 0
    }

    .ui-datepicker-group-last .ui-datepicker-calendar, .ui-datepicker-group-last .ui-datepicker-title {
        display: none
    }

    .availableDates-legend {
        max-width: 800px;
        margin: auto;
        justify-content: center;
        padding-top: 0;
        text-align: center
    }

}

#price-table {
    margin-top: 46px !important;
	border-bottom: 0px;
	/* max-width: 300px;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9em;
}

#price-table thead th {
    font-weight: 700;
}

#price-table tbody tr th, #price-table tbody tr td {
    padding: 0 !important;
    text-align: center;
	padding: 3px 0px 2px 0px !important;
	background-color: #e3d6cb;
	border-top: 1px solid white;
    border-bottom: 2.2px solid white;
    font-weight: normal;
}

#price-table th {
    text-align: center;
	border: 0px;
}

#price-table > tbody > tr:last-child {
    border-bottom: 1px solid #dee2e6;
}

.table td, .table th {
    padding: 2px 8px;
}

/* ------------------ MAPA ------------------ */

#nuestra-ubicacion .title-up {
    font-size: 0.9rem
}

@media (min-width: 767px) {
    #nuestra-ubicacion > div > div.row.text-center {
        width: 70%;
        margin: auto
    }
}

/* ------------------ GALLERY ------------------ */

.featherlight .featherlight-content {
    border: 0;
    padding: 0;
	height: 100vh;
	background-color: black;
	background: #000;
	max-width: 90vw;
	
}
.featherlight-image {
	height: 80% !important;
    margin: 0px auto;
	width: auto !important;
}
.featherlight-index {
	height: 20% !important;
	overflow: auto;
	white-space: nowrap;
}
.featherlight-title {
	display: none;
}
.featherlight-index img {
	height: 100% !important;
	opacity: 0.5;
	width: auto
}
.featherlight-index img.current {
	opacity: 1;
}

.featherlight-next, .featherlight-previous {
    top: 0;
	height: 80% !important;
}

.featherlight-next:hover, .featherlight-previous:hover {
    background-color: transparent
}

.featherlight-previous {
    left: 0;
}

.featherlight-next {
    right: 0px;
}

.featherlight-next span, .featherlight-previous span {
    display: inline-block;
    font-size: 40px;
}

.featherlight-next span {
    right: 0%;
}

.featherlight-previous span {
    left: 0
}

.featherlight .featherlight-close-icon {
    margin-right: 15px;
    margin-top: 12px;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    background: transparent;
}

/* ------------------ FOOTER ------------------ */

footer {
    background-color: #2E4827;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 30px
}

footer ul {
    list-style-type: none;
    text-align: center;
}

footer ul li.title, footer .title a {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 15px
}

footer ul li > a {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    font-weight: 400;
    line-height: 2.2rem
}

footer ul.villas-list li > a {
    line-height: 2.25rem
}

footer .contat-info {
}

footer .pl15 {
    padding-left: 15px
}

footer .emexs-col {
    margin-bottom: 5px
}

footer .media-icons > span > a > img {
    width: 30px
}

/* ------------------ RESPONSIVE ------------------ */
@media (max-width: 1024px) {
    .block-villa > div.col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .block-villa .order-md-1 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .block-villa .order-md-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 1;
        order: 1;
    }

    section.intro-form .container {
        max-width: 100%
    }

    section.intro-form .info-villa-reservation > div.col-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0px;
    }

    section.intro-form .info-villa-reservation .text-center .title-up {
        padding-top: 10px;
    }

}

@media (max-width: 1199px) {
    .featherlight-next span, .featherlight-previous span {
        font-size: 30px;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    #home-intro #filter-boxes .aligner p {
        font-size: 1.2rem
    }

}

@media (min-width: 768px) {
    .bg-green .container {
        width: 75%;
        margin: auto
    }
}

@media (max-width: 991px) {
    #header-img.home {
        height: 100vh
    }

    .h3 {
        font-size: 1.2rem
    }

    #logo-header #logo-header-img {
        margin-top: 80px;
    }

    #filter-boxes > div {
        padding: 5px 5px;
        height: auto;
    }

    #filter-boxes > div:nth-child(2) {
        padding-right: 10px;
    }
	
	#posibilidades-reserva #filter-boxes > div:nth-child(2) {
        padding-left: 10px;
    }
	
	#posibilidades-reserva #filter-boxes > div:nth-child(2) {
        padding-right: 5px;
    }

    #filter-boxes > div:nth-child(3) {
        padding-left: 10px;
    }

    footer .emexs-col img {
        width: 100px
    }

    /*FORM*/
    .info-villa-reservation .icons-list .list-inline-item .icon {
        width: 30px
    }

    .details-in-list ul li {
        padding-right: 0
    }

}

@media (min-width: 769px) {

    .bg-green .container {
        width: 90%;
        margin: auto
    }

    /* GALLERY */
    .gallery-desktop {
        display: inline
    }

    .gallery-mobile {
        display: none
    }
	.primera-imatge {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

@media (max-width: 768px) {
    #header-img {
        margin-bottom: 10px
    }

    .villa-details {
        padding: 30px
    }
	
	.mt50 {
    	margin-top: 0px
	}

    .mb80 {
        margin-bottom: 30px;
    }

    .mg80 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .intro-text {
        margin: 30px auto;
    }

    .h2 {
        font-size: 2.2rem
    }

    /*.icons-row ul > li {width: 110px;}*/
    .icons-row ul > li > p {
        font-size: 0.8rem;
        line-height: 1rem;
    }

    .home-filtered .intro-text {
        margin: 50px auto;
    }

    /*BARRA ACEPTACION*/
    #barraaceptacion {
        padding: 20px 10px;
        font-size: 14px;
    }

    #barraaceptacion p {
        font-size: 14px;
    }

    /* GALLERY */
    .gallery-desktop, .featherlight-image, .featherlight-previous, .featherlight-next {
        display: none !important
    }
	.section-gallery .container-fluid {
		padding: 0px;
	}
	.section-gallery .row > [class^="col-"], .section-gallery .row > [class*=" col-"] {
		padding: 4px;
	}
	.featherlight .featherlight-content {
		max-width: 100vw;
	}
	.featherlight-title {
		height: 50px;
		display: block;
		color: white;
		padding: 16px;
		font-size: 20px;
		font-weight: bold;
	}
	.featherlight-index {
		height: calc(100% - 50px) !important;
		overflow: auto;
		white-space: inherit;
	}
	.featherlight-index img {
		width: 100%;
		height: auto !important;
		opacity: 1;
	}
    .gallery-mobile {
        display: inline
    }

    #mobile-carousel.carousel {
        width: 100%;
    }

    /* MENU */
    #overlay {
        overflow-y: scroll
    }

    #overlay #logo-menu-overlay {
        width: 100px;
        margin-bottom: 15px;
    }

    .villas-list .box-price {
        margin: 20px 0;
    }

    .intro-text ul li, .text-list li {
        padding: 5px 0;
    }

    .calendar-rates .list-inline-item.color-box {
        margin-top: 5px
    }

    .calendar-rates .list-inline-item.text-left {
        font-size: 0.9rem
    }

    #header-img .main-fixed {
        display: none;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 200;
    }

    #header-img .main-fixed .row {
        text-align: center;
    }

    #header-img .main-fixed .row > div {
        flex-direction: column;
        width: 50%;
        height: 60px !important;
        color: #fff;
        background-color: #AF8A69;
    }

    #header-img .main-fixed .reserve a {
        border: 1px solid #fff;
        margin: 0 30px;
        padding: 7px;
    }

    #header-img .main-fixed .call img {
        width: 20px;
        margin-right: 5px;
    }

    /*FOOTER*/
    footer .contat-info {
        margin-top: 50px;
    }

    footer .emexs-col {
        margin-top: 30px;
        margin-bottom: 40px;
    }

    footer ul li > a {
        line-height: 2rem
    }

    footer #logo-footer {
        width: 100px
    }

    footer .media-icons {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    footer .solicitud {
        border: 1px solid #fff;
        padding: 10px 20px;
        width: 200px;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 575px) {

    #gallery-mobile {
        margin-right: -15px;
        margin-left: -15px;
    }

    /*GENERAL*/
    p {
        font-size: 1rem
    }

    .icon {
        width: 2.5rem;
    }

    .mb80 {
        margin-bottom: 20px
    }

    .mt50 {
        margin-top: 20px
    }

    .mt30 {
        margin-top: 10px;
    }

    .mb30 {
        margin-bottom: 10px;
    }

    .h2 {
        font-size: 2rem;
    }

    .serif-font {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    .row {
        margin-right: 0;
        margin-left: 0
    }

    .icons-row ul.list-inline > li {
        width: 25% !important;
    }

    #contact-section .no-padding-left, #contact-section .no-padding-right {
        padding: 0;
    }

    #barraaceptacion a.info {
        display: block;
        margin-top: 15px;
        padding: 0;
    }

    #nuestra-ubicacion .h2 {
        font-size: 1.4rem;
    }

    #logo-header #logo-header-img {
        width: 150px;
    }

    #header-img {
        margin-bottom: 5px;
    }

    #header-img .h1 {
        margin-bottom: 80px !important;
    }

    #home-last-section .intro-text {
        padding: 0
    }

    .bg-green.icons-row .h2 {
        padding: 0 8px
    }

    .two-columns-list {
        padding: 0
    }

    .overlay ul {
        margin-top: 20px;
    }

    /*HOME*/
    #header-img.home, #header-img.villa, #home-intro {
        display: block;
    }

    #header-img-responsive {
        display: none;
        margin-bottom: 80px; /*height: 100vh;*/
    }

    section.bg-green.icons-row .list-inline.d-flex li {
        vertical-align: top;
        margin: 0;
        width: calc(100% / 4) !important;
        padding: 0;
    }

    .villas-list .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .villas-list .box-price {
        margin: 15px 0;
    }

    .villas-list .col-lg-4 {
        padding: 30px 10px
    }

    .villas-list .col-lg-4 .text-list {
        line-height: 1.5rem;
        padding: 0;
    }

    .villas-list .col-lg-4 .icons-list {
        margin: 15px 0 0;
    }

    .intro-text ul li, .text-list li {
        padding: 5px 0
    }

    .intro-text .main-body {
        margin: 15px auto;
    }

    #home-last-section .img-fluid {
        height: 200px
    }

    #header-img.home .h1 {
        max-width: initial;
        line-height: 2.5rem;
        font-size: 2.2rem;
        text-shadow: 3px 3px #00000075;
    }

    #header-img-responsive.home .h1 {
        font-family: 'Vollkorn', serif;
        font-style: italic;
        max-width: initial;
        color: #212529;
        line-height: 1.5rem;
        font-size: 1.2rem;
        margin: 22px 15px;
    }

    #header-img-responsive.home .intro .h3 {
        color: #212529;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        margin-top: -5px;
    }

    #header-img-responsive.home .intro .h3 .underline:after {
        background: #212529;
    }

    #header-img-responsive.home #filter-boxes .h3 {
        font-size: 0.9rem;
    }

    #home-intro #filter-boxes .aligner p {
        width: 80%;
        margin-bottom: 0;
    }

    #home-intro .container-bg {
        height: 110px
    }

    #collapseDetails {
        width: 100% !important
    }

    #map-villas {
        margin-bottom: 0;
        height: 480px;
    }

    #services-box-home.icons-row ul > li {
        height: 90px;
    }

    #nuestra-ubicacion .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    /*VILLA*/
    #header-img.villa .h1 {
        font-size: 3rem;
    }

    #header-img.villa .icon-tour {
        margin-bottom: 94px !important;
        width: 50px;
    }

    .icons-row ul.list-inline.col-count-7 > li.col-auto {
        width: 24%;
        margin: 0;
        padding: 0;
    }

    #services-box .icon {
        height: 60px
    }

    .icons-row ul.list-inline.col-count-7 > li.col-auto > img {
        height: 60px
    }

    #services-box > div > div:nth-child(1) > div > ul > li > img {
        height: 560px
    }

    #services-box .h2 {
        padding: 0 8px;
    }

    #services-box #services-box-text-list ul li, .villa-details .row:nth-child(2) ul > li:not(.color-box) {
        font-size: 1rem
    }

    #collapseCalendar-1 > section > div > div.row.mb50 > div.col-12.col-md-8 > ul > li:nth-child(2) {
        display: initial
    }

    .table td, .table th {
        font-size: 0.9rem;
    }

    .villa-details > div > div:nth-child(2) > div {
        padding: 5px !important;
    }

    #header-img-responsive .icon-tour {
        margin-top: -85px;
    }

    #header-img-responsive .icon-tour:hover, #header-img-responsive .icon-tour:focus, #header-img-responsive .icon-tour:active {
        text-decoration: none;
        border: none;
    }

    #filter-boxes > div {
        padding: 4px;
    }

    #filter-boxes .container-bg {
        height: 260px /*135*/
    }

    #home-intro .container-fluid {
        padding: 0;
    }

    #header-img-responsive #filter-boxes .container-bg {
        height: 110px;
    }

    #posibilidades-reserva .intro-text {
        margin: 30px auto 0;
    }

    .two-columns-list {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .two-columns-list li, .details-in-list ul li {
        padding-right: 15px !important;
        margin: 10px !important;
        width: 100%;
    }

    .details-in-list ul {
        padding-left: 8px !important
    }

    .availableDates-legend {
        padding-top: 0
    }

    .availableDates td.output_date {
        background-position: 0 2px;
    }

    .intro-villas .intro-text .icons-list .list-inline-item .icon,
    .info-villa-reservation .icons-list .list-inline-item .icon {
        width: 30px;
    }
	
	.intro-villas .container {
		padding-left: 0px;
        padding-right: 0px;
    }

    /* ENVIROMENT */
    #enviroment-last-section .row {
        margin: 20px auto;
    }

    #enviroment-last-section > div > div:nth-child(1) > div.col-12.col-md-6.pr-lg-5,
    #intro-enviroment > div > .row > div {
        padding-right: 0;
        padding-left: 0
    }

    /*BARRA ACEPTACION*/
    #barraaceptacion .ok {
        float: left;
        margin-left: 10%;
    }

    #barraaceptacion .info {
        float: left;
        margin-top: 2px;
        margin-left: 25px;
        padding: 0;
    }

    /*MENU*/
    .overlay ul li {
        line-height: 2rem
    }

    #overlay .vertical-distribute {
        display: block;
        padding-top: 40px;
        padding-bottom: 40px;
        height: auto;
    }

    #languages-dropdown {
        right: 50px
    }

    .overlay.open li {
        animation: none;
        opacity: 1;
    }

    /*ABOUT*/
    .mg80 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    section.intro-about > div > div.row.align-items-center > div.col-12.col-md-7 {
        margin-bottom: 40px
    }

    .intro-text {
        margin: 30px auto
    }

    #contact-form > div:nth-child(5) > div.col-6.no-padding-right {
        padding-left: 0
    }

    #contact-form > div:nth-child(5) > div.col-6.no-padding-left {
        padding-right: 0
    }

    /*GALLERY*/
    .carousel .carousel-indicators li {
        width: 14px;
        height: 14px
    }

    .carousel img {
        height: 350px
    }

    #virtualTourModal iframe {
        height: 75vh;
    }

    /*FORM*/
    #logo-header #logo-header-img {
        margin-top: 30px;
        width: 105px;
    }

    #header-img-small .h1 {
        max-width: initial;
        line-height: 2.5rem;
        font-size: 1.8rem;
        text-shadow: 3px 3px #00000075;
    }

    .intro-form .img-fluid {
        height: 250px;
        margin-bottom: 20px;
    }

    #contact-form > div:nth-child(4) > .col-6 {
        padding: 0
    }

    .select-villa-container {
        margin-top: 10px;
    }

    .select-villa-container p {
        padding-top: 0;
        line-height: 1.2rem;
    }

    .form-group .custom-select {
        padding-left: 1rem
    }

    #price-table tbody tr th {
        width: 80%;
    }

    .calendar-rates .list-inline-item.color-box {
        margin-top: 0
    }

    /*FOOTER*/
    footer {
        padding-bottom: 0
    }
}

@media (max-width: 480px) {
    .villa-details {
        padding: 15px;
    }

    .intro-villas .intro-text .icons-list .list-inline-item {
        padding: 5px 8px;
    }
	.gallery-mobile .aligner .h3 {
		font-size: 0.9rem;	
	}
}

@media (max-height: 600px) {
    #header-img.home .h1 {
        line-height: 2.5rem;
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) and (orientation: landscape) {
    .icon {
        width: 2.5rem;
    }

    .icons-row ul > li {
        margin: 0 !important;
        width: 25%;
    }

    .icons-row ul > li > p {
        font-size: 0.8rem;
        line-height: 1rem;
    }

    section.bg-green.icons-row .list-inline.d-flex {
        display: block !important;
    }

    p {
        font-size: 1rem
    }

    .container {
        max-width: inherit;
    }

    /* MENU */
    #overlay > div > div:nth-child(2) > div:nth-child(2) > ul .d-none.d-sm-block {
        display: none !important;
    }

    #overlay .vertical-distribute {
        padding-top: 2vh;
        display: block;
        overflow: scroll;
    }

    #overlay > div > .row:nth-child(2) > .col-md-4 {
        width: 33%
    }

    #overlay #logo-menu-overlay {
        width: 150px;
        margin-bottom: 20px;
        margin-top: 20px
    }

    /* HOME */
    #logo-header #logo-header-img {
        margin-top: 40px;
        width: 120px;
    }

    #header-img.villa > div > div {
        margin-bottom: 20px;
    }

    #home-intro .container-bg {
        height: 200px; /*160*/
    }

    #filter-boxes > div {
        padding: 5px 5px
    }

    #filter-boxes > div:nth-child(2) {
        padding-left: 10px;
    }

    #filter-boxes > div:nth-child(3) {
        padding-left: 10px;
    }

    .block-villa .img-fluid {
        height: 350px !important /*200*/
    }

    .primera-imatge img {
        height: 350px !important /*220*/
    }

    .villas-list .col-lg-4 {
        padding: 40px 30px;
    }

    .villas-list .box-price {
        margin: 10px 0;
    }

    .villas-list .col-lg-4 .text-list {
        line-height: 1.5rem;
        padding: 0;
    }

    /* ENVIROMENT */
    .serif-font {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    /* VILLA DETAILS */
    .intro-text {
        margin: 10px auto;
    }

    #services-box #services-box-text-list ul li, .villa-details .row:nth-child(2) ul > li {
        font-size: 1rem
    }

    #header-img.villa .h1 {
        font-size: 3.6rem
    }

    /* FORM */
    .intro-form .img-fluid {
        height: 250px;
        margin-bottom: 20px;
    }

    /* FOOTER */
    footer .contat-info {
        margin-top: 40px;
    }

    footer .emexs-col {
        margin: 15px auto
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .primera-imatge img {
        height: 300px !important;
    }
    #header-img .main-fixed{
        display: none !important;
    }
}

/* iPhone X and Xs Max */
@media only screen 
    and (min-device-width: 375px) 
    and (min-device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) { 
   
	#header-img .main-fixed .row > div {
        height: 80px !important;
	}

    #header-img .main-fixed .reserve a {
        margin-bottom: 20px;
    }

    #header-img .main-fixed .call img {
        margin-bottom: 20px;
    }
		
}

@media only screen 
    and (min-device-width: 375px) 
    and (min-device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) { 
		
	#gallery-desktop p {
        font-size: 1rem;
    }

    .intro-villas .title-up,
    .intro-text .title-up {
        margin-top: 60px;
    }

    .mg80 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/* iPhone XR */
@media only screen 
    and (min-device-width: 414px) 
    and (min-device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
    
	#header-img .main-fixed .row > div {
        height: 80px !important;
	}

    #header-img .main-fixed .reserve a {
        margin-bottom: 20px;
    }

    #header-img .main-fixed .call img {
        margin-bottom: 20px;
    }
}

@media only screen 
    and (min-device-width: 414px) 
    and (min-device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2)
	and (orientation: landscape) { 
		
	#gallery-desktop p {
        font-size: 1rem;
    }

    .intro-villas .title-up,
    .intro-text .title-up {
        margin-top: 60px;
    }

    .mg80 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/*Adaptació pantalles amples*/

@media (min-width: 1500px) {
    #home-intro .container-bg {
        height: 280px;
    }
}

@media (min-width: 2000px) {
    #home-intro .container-bg {
        height: 350px;
    }
}

/* FORM MOSSOS */
#mossos_form .form-group {
    margin-bottom: 1rem;
}

#mossos_form .numero {
    min-height: 80px;
    padding-top: 20px;
    font-weight: bold;
}
#mossos_form select.form-control {
    padding: 0.75rem;
}

@media (min-width: 1400px) {
    .text-s1400-left {
        text-align: left !important;
    }

    .col-s1400-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-s1400-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-s1400-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .col-s1400 {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
}

.col-s1400,
.col-s1400-1,
.col-s1400-6,
.col-s1400-11 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.grecaptcha-badge {
    visibility: hidden;
}


#alsorecommended .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E4827' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}
#alsorecommended .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E4827' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")
}
#price-table_paginate {
	width: 100%;
}
#price-table_previous {
	float: left;
}

.reviews .carousel-indicators {
	position: relative; margin-top: 20px; z-index: 10;
}
.reviews .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: gray;      /* color del bullet inactiu */
    border: 1px solid #555;
    margin: 5px;
}
.reviews .carousel-indicators .active {
    background-color: black;    /* color del bullet actiu */
}
.reviews .review-header {
    display: flex;
    align-items: center; /* alinea verticalment */
    gap: 10px;           /* espai entre imatge i estrelles */
    flex-wrap: wrap;      /* permet que a mòbil es moguin a la següent línia */
}
.reviews .review-header img {
    height: 50px;
}
.reviews .review-header .stars {
    font-size: 1.2rem;
}
.reviews .text {
    height: 140px; 
	overflow-y: auto;
	padding: 10px 10px 0px 0px;
	margin-bottom: 20px;
}

#myCarousel-rev .review {
    margin: 10px;
    padding: 20px;
    box-shadow: #606060 0px 0px 10px;
}