html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: white;
  font-size: 10pt;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-image: url("/public/bg.svg");
  background-repeat: repeat-y;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 1.4vw;
  }
}

body.openNav {
  overflow: hidden;
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0;
}

h1, h2, h3, h4 {
  line-height: 110%;
  font-weight: 700;
}

h2 {
  margin: 0;
  font-size: 180%;
}
@media only screen and (min-width: 768px) {
  h2 {
    font-size: 300%;
  }
}

h3 {
  margin: 0;
  font-size: 140%;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  h3 {
    font-size: 200%;
  }
}

button.cta {
  margin: 3rem auto 1rem;
  padding: 1rem;
  display: block;
  text-align: center;
  background-color: #81a384;
  color: white;
  text-decoration: none;
  border-radius: 1.5rem;
  font-size: 150%;
  font-weight: bold;
  box-shadow: 0 0 5px #49685e;
  border: none;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  button.cta {
    display: inline-block;
  }
}

#topBanner {
  color: white;
  background-color: #49685e;
  text-align: center;
}
#topBanner p {
  padding: 0.5rem 0;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  #topBanner p {
    display: inline-block;
  }
}
#topBanner .txt1 {
  border-bottom: 1px solid #81a384;
}
@media only screen and (min-width: 768px) {
  #topBanner .txt1 {
    border: none;
  }
}
#topBanner .txt1 span {
  display: none;
}
@media only screen and (min-width: 768px) {
  #topBanner .txt1 span {
    display: inline-block;
  }
}

#botBanner {
  color: #81a384;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}
#botBanner p {
  padding: 0.5rem;
  margin: 0;
}

#masthead {
  max-width: 100vw;
  height: auto;
  margin: 0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  background: #81a384;
}
#masthead .social {
  margin-right: 1rem;
}
#masthead .social img {
  filter: invert(100%);
  width: 3rem;
  height: 3rem;
  padding: 0.5rem 0;
}

#logo {
  margin: 0;
  flex-grow: 1;
}
#logo img {
  object-fit: contain;
  display: block;
  max-width: 100%;
  height: 4rem;
  margin: 0 auto;
}

#navBar {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#navBar.open #mainMenu {
  display: flex;
}
#navBar #mainMenu {
  display: none;
}
@media only screen and (min-width: 768px) {
  #navBar #mainMenu {
    display: flex;
  }
}

#menuToggle {
  display: block;
  margin: 0;
  color: white;
  cursor: pointer;
  transition: margin-right 400ms ease-in-out, padding 200ms ease;
  font-size: 150%;
}
@media only screen and (min-width: 768px) {
  #menuToggle {
    display: none;
  }
}

#mainMenu {
  position: fixed;
  z-index: 9000;
  top: 9rem;
  right: 0;
  width: 100%;
  height: calc(100vh - 10rem);
  padding: 4rem 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  font-size: 140%;
  font-weight: 700;
  list-style-type: none;
  transition: margin-right 800ms ease-in-out;
  border-top: 2px solid white;
}
@media only screen and (min-width: 768px) {
  #mainMenu {
    position: relative;
    height: auto;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1rem;
    top: initial;
    padding: 0;
    background-color: transparent;
    backdrop-filter: none;
    border: 0;
    font-size: 100%;
  }
}
#mainMenu li {
  padding: 1.5rem;
  text-align: center;
  width: calc(100% - 3rem);
}
@media only screen and (min-width: 768px) {
  #mainMenu li {
    width: auto;
    padding: 1rem;
    text-align: left;
  }
}
#mainMenu a {
  color: white;
  text-decoration: none;
  transition: color 300ms;
}
#mainMenu a.active {
  color: #49685e;
}
#mainMenu a:hover {
  color: #49685e;
}

.reserva {
  background-color: white;
  color: #49685e;
  border-radius: 2rem;
  padding: 1rem 2.5rem;
  margin: 2rem auto 1rem;
  box-shadow: 0 0.5rem 1rem #49685e;
}
@media only screen and (min-width: 768px) {
  .reserva {
    width: 33%;
  }
}
.reserva h3 {
  color: #49685e;
  font-size: 200%;
}
.reserva h3 span {
  font-weight: 400;
}
.reserva label, .reserva legend {
  text-align: left;
  display: none !important;
}
.reserva select, .reserva input[type=text], .reserva input[type=email], .reserva input[type=tel] {
  padding: 0.5rem 1rem;
  width: 100%;
  flex: 1;
  border: 1px solid #49685e;
  border-radius: 1.5rem;
  background-color: white;
  font-size: 100%;
}
.reserva button[type=submit] {
  padding: 0.5rem 2rem;
  border: 0;
  border-radius: 1.5rem;
  margin: 0 auto !important;
  background-color: #49685e;
  color: white;
  font-size: 120%;
  font-weight: bold;
}
.reserva .cog-input {
  margin-bottom: 0 !important;
  padding-tophtml: 0 !important;
}
.reserva .cog-confirmation-message {
  color: #49685e;
  font-size: 120%;
}

#hero {
  padding: 1.5rem;
  color: white;
  background-image: linear-gradient(to bottom, #49685e 0%, rgba(255, 0, 0, 0) 100%), url("/public/img01.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  #hero {
    background-position: top center;
  }
}
#hero .data {
  text-align: center;
}
#hero .data p {
  font-size: 120%;
}
@media only screen and (min-width: 768px) {
  #hero .data {
    padding: 0;
  }
  #hero .data p {
    font-size: 200%;
  }
}
#hero .data .reserva {
  background-color: white;
}
#hero .data .reserva h3 {
  color: #49685e;
}
#hero .txt1 {
  margin: 0;
  margin: 0.5rem;
  text-shadow: 0 0 5px #49685e;
}
@media only screen and (min-width: 768px) {
  #hero .txt1 {
    margin: 0 0 1rem;
  }
}
#hero .txt2 {
  margin: 0;
}
#hero .txt2 span {
  display: inline-block;
  padding: 0.5rem;
}
#hero .txt2 .antes {
  background-color: #49685e;
  border-radius: 1rem 0 0 1rem;
  position: relative;
}
#hero .txt2 .antes::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 2rem;
  position: absolute;
  top: 1rem;
  left: 0;
  background-image: url("/public/strike.svg");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  #hero .txt2 .antes::after {
    top: 1.5rem;
  }
}
#hero .txt2 .ahora {
  background-color: white;
  color: #49685e;
  border-radius: 0 1rem 1rem 0;
  font-weight: bold;
}

#presentacion {
  text-align: center;
}
#presentacion .intro {
  padding: 2rem 0.5rem;
  margin: 0;
  font-size: 120%;
  text-transform: uppercase;
  color: #49685e;
}
#presentacion .slider {
  background-color: #49685e;
  overflow: hidden;
  margin: 0 1rem;
  border-radius: 1rem;
}
@media only screen and (min-width: 768px) {
  #presentacion .slider .item {
    display: flex;
    align-items: center;
    width: 100%;
  }
}
#presentacion .slider .item img {
  width: 100%;
  height: auto;
  display: block;
}
@media only screen and (min-width: 768px) {
  #presentacion .slider .item img {
    width: 50%;
    height: auto;
    object-fit: contain;
  }
}
#presentacion .slider .item .txt {
  height: 2rem;
  padding: 0.5rem 3rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
#presentacion .slider .item .txt br {
  display: none;
}
#presentacion .slider .item .txt span {
  display: inline;
}
@media only screen and (min-width: 768px) {
  #presentacion .slider .item .txt {
    width: 50%;
    font-size: 200%;
    text-shadow: 0 0 5px #49685e;
    text-align: left;
    justify-content: flex-start;
  }
  #presentacion .slider .item .txt br {
    display: block;
  }
  #presentacion .slider .item .txt span {
    display: none;
  }
}
#presentacion .slider .item .txt p {
  margin: 0;
}
#presentacion .slider .flickity-page-dots {
  bottom: 4rem;
}
@media only screen and (min-width: 768px) {
  #presentacion .slider .flickity-page-dots {
    bottom: 1rem;
    width: 50%;
    left: calc(50% + 3rem);
    text-align: left;
  }
}
#presentacion .distancias {
  list-style-type: none;
  margin: 0;
  padding: 1rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: center;
}
#presentacion .distancias li {
  width: 45%;
  display: flex;
  justify-content: initial;
  flex-direction: column;
  color: #49685e;
}
#presentacion .distancias li span {
  color: #81a384;
}
#presentacion .distancias li span::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1rem;
  background-image: url("/public/icon-car.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 1.5rem;
}

@media only screen and (min-width: 768px) {
  #ubicacion {
    padding: 0 10vw;
    background-color: #81a384;
  }
}
#ubicacion img {
  width: 100%;
  height: auto;
  display: block;
}
@media only screen and (min-width: 768px) {
  #ubicacion img {
    width: 100%;
  }
}

#remate {
  background: #49685e;
  color: white;
}
#remate .txt1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 180%;
  margin: 0;
  font-weight: bold;
}
#remate .txt1 span {
  font-size: 300%;
  margin: 0 1rem;
}
#remate .price {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem;
  background-color: #81a384;
  font-size: 200%;
  font-weight: bold;
}

#cierre {
  padding: 1.5rem;
  text-align: center;
}
#cierre p {
  margin: 0;
  padding: 0;
  font-size: 180%;
  font-weight: bold;
}
#cierre .txt1 {
  color: #49685e;
}
#cierre .txt2 {
  color: #81a384;
}
#cierre .reserva {
  background-color: #81a384;
}
#cierre .reserva h3 {
  color: white;
}

#footer {
  background-color: #81a384;
  color: white;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
}
#footer a {
  color: white;
  text-decoration: none;
  font-size: 120%;
}
#footer img {
  width: 40vw;
  height: auto;
  display: block;
  margin: 1rem auto;
}
@media only screen and (min-width: 768px) {
  #footer img {
    width: 20vw;
  }
}

.flickity-prev-next-button {
  width: 2rem !important;
  height: 2rem !important;
}

.flickity-page-dots .dot {
  background: white !important;
}

.cog-header {
  display: none;
}

.cog-abuse {
  display: none;
}

.cog-branding {
  display: none;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}
/*
#reserva { display: none;
    position: fixed; z-index: 10000; top: 0; left: 0; width: 100vw; height: 100vh;
    overflow: scroll;
    background-color: rgba($base_color,.95);

    @media only screen and (min-width: 768px) { justify-content: center; align-items: center;
        background-color: rgba($alt_color, .6); backdrop-filter: blur(4px);
    }

    &.open { display: block;
        @media only screen and (min-width: 768px) { display: flex;}
    }

    .content { padding: 3rem 1rem 5rem; display: flex; flex-wrap: wrap; gap: 1rem;
        background-color: rgba($base_color,.95);
        border-radius: .5rem;

        @media only screen and (min-width: 768px) { position: relative;
            width: calc(100% - 10rem); width: 80vw; height: auto; padding: 2rem;
            gap: 2rem; flex-wrap: nowrap;
        }
        .txt { margin-bottom: 1rem;}
        a { color: white;}
        h2 { margin: 0 0 1rem; font-size: 200%;
            span { font-weight: 400; display: block;}
        }
        h3 { margin: 0 0 1rem; font-size: 120%;}
        p { margin: 0; font-size: 120%;}
        // .cog-confirmation__message p {}
    }

    .txt { color: white;
        @media only screen and (min-width: 768px) { width: 50%;}
    }
    .form {
        @media only screen and (min-width: 768px) { width: 50%;}

        label, legend { color: white;}
        select, input[type=text], input[type=email], input[type=tel] { background-color: white; padding: 1rem; width: 100%; flex: 1; font-size: 100%; border: 0; border-radius: 1.5rem;}
        input[type=checkbox] { width: 1rem; height: 1rem;}
        button[type=submit] { padding: .5rem 2rem; background-color: $alt_color; color: white; font-size: 100%; border: 0; border-radius: 1.5rem;}

        .cog-confirmation-message { color: white; font-size: 200%;}
    }

    .closer { position: absolute; top: .5rem; right: .5rem;
        button { background-color: transparent; border: 0; font-size: 150%; color: white; cursor: pointer;
            &:hover { color: $alt_color;}
        }
    }
}

*/
/*
#wspfloater { position: fixed; bottom: 1rem; right: 1rem; z-index: 10000;
    img { width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 0 2px black;
        transition: filter .3s;
        @media only screen and (min-width: 768px) { width: 4rem; height: 4rem;}
        &:hover { filter: contrast(150%);}
    }
}
*/