@import url("https://fonts.googleapis.com/css?family=DM+Serif+Display|Lato:300,400,700|Montserrat:600|Vidaloka&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html body {
  background-color: #171717;
}

html body .mobile-only {
  display: none;
}

html body .tablet-mobile-only {
  display: none;
}

html body a {
  text-decoration: none;
  color: #FFFFFF;
}

html body main .hero {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html body .booking .frame .container .booking-title {
  color: #FFFFFF;
  font-family: "DM Serif Display", serif;
  font-size: 3.5rem;
  letter-spacing: 1px;
  line-height: 77px;
  font-weight: 400;
}

html body main .villas .container .golden, html body main .hreljin .container .left .golden, html body main .resort .container .left .golden, html body main .kvarner-two .container .left .golden, html body #booking-modal .container .golden, html #booking-modal .container body .golden {
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  color: #9C8324;
  font-size: .875rem;
  font-weight: bold;
  letter-spacing: 14px;
  padding-left: 14px;
}

html body main .villas .container .golden, html body main .hreljin .container .left .golden, html body main .resort .container .left .golden, html body main .kvarner-two .container .left .golden {
  letter-spacing: 18px;
  padding-left: 8px;
}

html body .booking .frame .container .booking-golden {
  text-transform: uppercase;
  color: #AE901E;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  font-size: 1.125rem;
  letter-spacing: 23px;
  padding-left: 23px;
}

html body #booking-modal .container .booking-modal-golden, html #booking-modal .container body .booking-modal-golden, html body #success-modal .container .booking-modal-golden, html #success-modal .container body .booking-modal-golden {
  color: #AE901E;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  line-height: 19px;
  letter-spacing: 21px;
  padding-left: 21px;
}

html body #booking-modal .container .booking-modal-info, html #booking-modal .container body .booking-modal-info {
  font-family: "Lato", sans-serif;
  color: #495057;
}

html body #booking-modal .container .booking-modal-title, html #booking-modal .container body .booking-modal-title, html body #success-modal .container .booking-modal-title, html #success-modal .container body .booking-modal-title, html body main .villas .container h3, html body main .hreljin .container .left h3, html body main .resort .container .left h3, html body main .kvarner-two .container .left h3 {
  font-family: "DM Serif Display", serif;
  color: #FFFFFF;
  font-size: 3.125rem;
  letter-spacing: 1px;
  line-height: 67px;
  font-weight: 500;
}

html body main .villas .container .subtitle, html body main .hreljin .container .left .subtitle, html body main .resort .container .left .subtitle, html body main .kvarner-two .container .left .subtitle {
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  font-size: 1.125rem;
  line-height: 26px;
}

html body #consent-popup .wrapper .description, html body main .villas .container .description, html body main .hreljin .container .left .features .feature .description, html body main .resort .container .left .features .feature .description, html body main .kvarner-two .container .left .features .feature .description, html body main .hreljin .container .right .description, html body main .resort .container .right .description, html body main .kvarner-two .container .right .description {
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  font-size: 1rem;
  line-height: 26px;
}

html body .booking .frame .container .booking-description {
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 2.125rem;
  font-weight: bold;
  margin-top: 57px;
  margin-bottom: 92px;
}

html body #booking-modal .container .input-error, html #booking-modal .container body .input-error {
  font-family: "Lato", sans-serif;
  font-size: .75rem;
  color: #D0021B;
}

html body #consent-popup .wrapper .red-button, html body main .hreljin .container .right .red-button, html body main .resort .container .right .red-button, html body main .kvarner-two .container .right .red-button {
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  border-bottom: 2px solid #D0021B;
  letter-spacing: 4.44px;
  line-height: 19px;
  padding: 0.5rem 2rem 0.5rem 36.44px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  border-radius: 40px;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  /*toggle these last 4 if you plan on using the actual button tag instead of a*/
}

html body #consent-popup .wrapper .red-button:hover, html body main .hreljin .container .right .red-button:hover, html body main .resort .container .right .red-button:hover, html body main .kvarner-two .container .right .red-button:hover {
  background-color: #D0021B;
}

html body #consent-popup .wrapper .red-button:active, html body main .hreljin .container .right .red-button:active, html body main .resort .container .right .red-button:active, html body main .kvarner-two .container .right .red-button:active {
  background-color: #D0021B;
}

html body .booking .frame .container .golden-button {
  font-family: "Lato", sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #9C8324;
  padding: 1rem 7rem;
  cursor: pointer;
  border: none;
}

html body .booking {
  background-image: url(/img/home/booking.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 3rem 0;
}

html body .booking .frame {
  border: 2px solid #9C8324;
  width: 95%;
  margin: auto;
}

html body .booking .frame .container {
  text-align: center;
  margin: 86px auto 97px;
  max-width: 681px;
}

html body .booking .frame .container .booking-title {
  font-size: 3.75rem;
}

html #booking-modal {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(250, 250, 250, 0.98);
  border-bottom: 7px solid #9C8324;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html #booking-modal .logo {
  position: absolute;
  top: 47px;
  left: 36px;
}

html #booking-modal .container {
  width: 34%;
  max-width: 650px;
  margin: 47px auto 47px auto;
  padding-bottom: 47px;
}

html #booking-modal .container .booking-modal-golden {
  text-align: center;
}

html #booking-modal .container .booking-modal-title {
  color: black !important;
  text-align: center;
  margin-bottom: 30px;
}

html #booking-modal .container .golden {
  letter-spacing: 0;
  padding: 0;
  font-weight: 400;
  margin-bottom: 6px;
}

html #booking-modal .container hr {
  width: 100%;
  color: #CED4DA;
  margin-bottom: 20px;
}

html #booking-modal .container .booking-modal-info .optional {
  color: #B5BABF;
}

html #booking-modal .container input {
  width: 100%;
  border: 1px solid #B5BABF;
  height: 46px;
  background-color: transparent;
  padding-left: 1rem;
  margin-top: 18px;
  margin-bottom: 21px;
  color: #495057;
  background-repeat: no-repeat;
  background-position: 98% center;
  font-family: "Lato", sans-serif;
}

html #booking-modal .container input:focus {
  outline: 1px solid #AE901E;
}

html #booking-modal .container .input-error {
  margin-top: -17px;
  margin-bottom: 10px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  visibility: hidden;
}

html #booking-modal .container .double-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

html #booking-modal .container .double-info .option {
  width: 48%;
}

html #booking-modal .container #name {
  background-image: url(/img/svg/person.svg);
}

html #booking-modal .container #email {
  background-image: url(/img/svg/letter.svg);
  /* border-color: $red; */
}

html #booking-modal .container #number {
  background-image: url(/img/svg/phone.svg);
  /* border-color: $red; */
}

html #booking-modal .container textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid #B5BABF;
  resize: none;
  margin-top: 18px;
  margin-bottom: 20px;
  padding: .5rem;
  color: #495057;
  font-family: "Lato", sans-serif;
}

html #booking-modal .container textarea:focus {
  outline: 1px solid #AE901E;
}

html #booking-modal .container .booking-modal-golden-button {
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
  font-weight: bold;
  background-color: #9C8324;
  padding: 1rem 7rem;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  float: right;
}

html #booking-modal #close-booking-modal {
  position: absolute;
  top: 47px;
  right: 36px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html #booking-modal #close-booking-modal:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

html #success-modal {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(250, 250, 250, 0.98);
  border-bottom: 7px solid #9C8324;
  z-index: -1;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html #success-modal .logo {
  position: absolute;
  top: 47px;
  left: 36px;
}

html #success-modal .container {
  width: 89%;
  margin: 47px auto auto;
  text-align: center;
}

html #success-modal .container .booking-modal-title {
  color: black !important;
}

html #success-modal .container img {
  margin: 208px auto 58px auto;
}

html #success-modal .container h2 {
  font-size: 2rem;
  font-family: "Lato", sans-serif;
  color: #495057;
  margin-bottom: 1rem;
}

html #success-modal .container .notification {
  font-family: "Lato", sans-serif;
  font-size: 1.375rem;
  color: #696969;
  font-weight: 300;
}

html #success-modal .container .close-success-modal {
  font-family: "Lato", sans-serif;
  color: #AE901E;
  margin-top: 200px;
  cursor: pointer;
}

html #success-modal #close-success-modal {
  position: absolute;
  top: 47px;
  right: 36px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html #success-modal #close-success-modal:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

@media (max-width: 1600px) {
  html body main .booking {
    margin-bottom: 106px;
  }
  html #success-modal .container img {
    margin-top: 116px;
  }
  html #success-modal .container .close-success-modal {
    margin-top: 100px;
  }
}

@media (max-width: 1200px) {
  html body .pc-only {
    display: none;
  }
  html body .tablet-mobile-only {
    display: inline-block;
  }
  html #booking-modal .container {
    width: 60%;
    max-width: 60%;
  }
  html #booking-modal .container .title {
    margin-bottom: 57px;
  }
  html #success-modal .container img {
    margin: 87px auto 60px auto;
  }
  html #success-modal .container .close-success-modal {
    margin-top: 120px;
  }
}

@media (max-width: 811px) {
  html body .pc-tablet-only {
    display: none;
  }
  html body .mobile-only {
    display: inline-block;
  }
  html body .booking .frame .container .booking-title {
    font-size: 2.25rem;
    letter-spacing: .72px;
    line-height: 46px;
  }
  html body main .villas .container .golden, html body main .hreljin .container .left .golden, html body main .resort .container .left .golden, html body main .kvarner-two .container .left .golden {
    font-size: .8125rem;
  }
  html body .booking .frame .container .booking-golden {
    font-size: .75rem;
    letter-spacing: 15.43px;
    padding-left: 15.43px;
  }
  html body #booking-modal .container .booking-modal-title, html #booking-modal .container body .booking-modal-title, html body #success-modal .container .booking-modal-title, html #success-modal .container body .booking-modal-title, html body main .villas .container h3, html body main .hreljin .container .left h3, html body main .resort .container .left h3, html body main .kvarner-two .container .left h3 {
    font-size: 2.25rem;
  }
  html body #consent-popup .wrapper .description, html body main .villas .container .description, html body main .hreljin .container .left .features .feature .description, html body main .resort .container .left .features .feature .description, html body main .kvarner-two .container .left .features .feature .description, html body main .hreljin .container .right .description, html body main .resort .container .right .description, html body main .kvarner-two .container .right .description {
    font-size: .875rem;
  }
  html body .booking .frame .container .booking-description {
    font-size: 1.125rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  html body .booking .frame .container .golden-button {
    font-size: 1rem;
    text-transform: uppercase;
    background-color: #FFFFFF;
    color: #AE901E;
    padding: 1rem 6rem;
  }
  html body .booking {
    background-image: none;
    padding: 0;
  }
  html body .booking .frame {
    background-color: #222222;
    width: 90%;
  }
  html body .booking .frame .container {
    margin: 60px auto 47px;
  }
  html body .booking .frame .container .booking-golden {
    margin-bottom: 1.5rem;
  }
  html body .booking .frame .container .booking-title {
    font-size: 2.19rem;
  }
  html #booking-modal .container {
    width: 89%;
    max-width: 89%;
    margin: 18px auto 18px auto;
  }
  html #booking-modal .container .booking-modal-title {
    font-size: 1.5625rem;
    line-height: 2rem;
    text-align: left;
  }
  html #booking-modal .container .golden, html #booking-modal .container hr {
    display: none;
  }
  html #booking-modal .container .contact {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  html #booking-modal .container .contact .option {
    width: 100%;
  }
  html #booking-modal .container .booking-modal-golden-button {
    width: 100%;
    font-weight: 400;
    margin-bottom: 18px;
  }
  html #booking-modal #close-booking-modal {
    top: 27px;
    right: 28px;
  }
  html #success-modal .container .booking-modal-title {
    font-size: 1.5625rem;
    line-height: 2rem;
    text-align: left;
  }
}

html body header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

html body header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 96.25%;
  margin: 2.5rem auto 0 auto;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .container a {
  text-decoration: none;
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 1.4px;
  font-size: .75rem;
}

html body header .container .contact-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

html body header .container .contact-menu .menu-button {
  margin-left: 34px;
  cursor: pointer;
  z-index: 1;
}

html body header .nav {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
}

html body header .nav.open {
  visibility: visible;
}

html body header .nav .menu-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(23, 23, 23, 0.95);
  list-style-type: none;
  padding-right: 1rem;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav.open {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

html body header .nav .menu-nav .golden-logo {
  width: 79px;
  height: 79px;
}

html body header .nav .menu-nav-item {
  -webkit-transform: translateX(100vw);
          transform: translateX(100vw);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav-item.open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

html body header .nav .menu-nav-item.active > a {
  color: #9C8324;
}

html body header .nav .menu-nav-link {
  font-family: "Lato", sans-serif;
  font-size: 22px;
  letter-spacing: 2.57px;
  line-height: 60px;
  font-weight: initial;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav-link hr {
  width: 4rem;
  color: #9C8324;
  margin: 0.4rem 2rem;
  display: inline-block;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity 0.5s linear;
  transition: visibility 0s, opacity 0.5s linear;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav-link:hover {
  color: #9C8324;
}

html body header .nav .menu-nav-link:hover hr {
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav .red-item {
  margin-top: 3rem;
}

html body header .nav .menu-nav .red-item .red-link {
  border-bottom: 2px solid #D0021B;
  padding: 0.5rem 2.2rem;
  border-radius: 40px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body header .nav .menu-nav .red-item .red-link:hover {
  background-color: #D0021B;
  color: #FFFFFF;
}

html body header .nav .menu-nav .red-item .red-link:active {
  background-color: #D0021B;
}

html body .header-scroll .container {
  height: 3.875rem;
  width: 100%;
  margin: 0;
  background-color: #171717;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body .header-scroll .container .booking-link {
  width: 13.25rem;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #B1182A;
}

html body .header-scroll .container .logo {
  position: relative;
  right: 20px;
}

html body .header-scroll .container .logo-link {
  margin-top: 1rem;
}

html body .header-scroll .container .menu-button {
  margin-right: 40px;
}

html body #link1 {
  -webkit-transition-duration: 0.65s;
          transition-duration: 0.65s;
}

html body #link2 {
  -webkit-transition-duration: 0.75s;
          transition-duration: 0.75s;
}

html body #link3 {
  -webkit-transition-duration: 0.85s;
          transition-duration: 0.85s;
}

html body #link4 {
  -webkit-transition-duration: 0.95s;
          transition-duration: 0.95s;
}

html body #link5 {
  -webkit-transition-duration: 1.05s;
          transition-duration: 1.05s;
}

html body #link6 {
  -webkit-transition-duration: 1.15s;
          transition-duration: 1.15s;
}

html body #link6 {
  -webkit-transition-duration: 1.25s;
          transition-duration: 1.25s;
}

html body footer {
  background-color: #222222;
}

html body footer .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  width: 70%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 133px;
  padding-bottom: 86px;
  font-family: "Lato", sans-serif;
  color: #FFFFFF;
}

html body footer .container .logo-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

html body footer .container .logo-cta a img {
  margin-bottom: 1rem;
}

html body footer .container .links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

html body footer .container .links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
  color: #FFFFFF;
  font-family: "Lato", sans-serif;
}

html body footer .container .links a img {
  margin-right: 1rem;
}

html body footer .container .links a .facebook {
  margin-left: .3rem;
  margin-right: 1.2rem;
}

html body footer .container .links a .legal {
  margin-right: .8rem;
}

html body footer .code-red {
  background-color: #171717;
  width: 100%;
}

html body footer .code-red .bottom-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 96%;
  margin: auto;
  padding: 1rem 0;
  color: #FFFFFF;
  font-family: "Lato", sans-serif;
}

html body footer .code-red .bottom-container a img {
  width: 130px;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

html body #consent-popup {
  position: fixed;
  z-index: 6;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  opacity: 1;
  background-color: #171717;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

html body #consent-popup.hidden {
  opacity: 0;
  z-index: -6;
}

html body #consent-popup .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 90%;
  margin: auto;
}

html body #consent-popup .wrapper .description {
  width: 85%;
  max-width: 100%;
}

html body #consent-popup .wrapper .description a {
  color: #FFFFFF;
  font-weight: 700;
}

html body #consent-popup .wrapper .red-button {
  margin-top: 0;
  cursor: pointer;
}

@media (max-width: 1600px) {
  html body footer .container {
    width: 88%;
  }
}

@media (max-width: 1200px) {
  html body header {
    z-index: 2;
  }
  html body header .container {
    width: 89%;
  }
  html body header .container .booking-link {
    display: none;
  }
  html body header .container .logo {
    padding: 0;
    max-width: 42px;
    max-height: 42px;
  }
  html body header .container .contact-link {
    display: none;
  }
  html body .header-scroll .container {
    height: 3.25rem;
  }
  html body .header-scroll .container .booking-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 7rem;
    text-align: center;
  }
  html body .header-scroll .container .logo {
    display: none;
  }
  html body .header-scroll .container .menu-button {
    margin-right: 20px;
  }
  html body #consent-popup {
    padding: 1rem;
  }
  html body #consent-popup .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  html body #consent-popup .wrapper .description {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }
}

@media (max-width: 811px) {
  html body #hline {
    display: none;
  }
  html body .red-item .red-link {
    -webkit-transition: none;
    transition: none;
  }
  html body footer .container {
    padding-top: 55px;
    padding-bottom: 45px;
  }
  html body footer .container .logo-cta {
    display: none;
  }
  html body footer .container .links .footer-title {
    font-family: "Lato", sans-serif;
    font-size: 0.875rem;
    color: #AE901E;
    margin-bottom: 2rem;
  }
}

html body main .hero {
  height: 460px;
  background-image: url(/img/services/hero.webp);
}

html body main .villas .container {
  width: 41%;
  margin: 120px auto 183px auto;
  text-align: center;
}

html body main .villas .container h3 {
  margin-bottom: 1rem;
}

html body main .villas .container .subtitle {
  margin-bottom: 3rem;
}

html body main .villas .container .description {
  margin-bottom: 1rem;
}

html body main .wallpaper {
  height: 100vh;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html body main .wallpaper1 {
  background-image: url(/img/our-villas/wallpaper1.webp);
}

html body main .wallpaper2 {
  background-image: url(/img/our-villas/wallpaper2.webp);
}

html body main .wallpaper3 {
  background-image: url(/img/our-villas/wallpaper3.webp);
}

html body main .wallpaper4 {
  background-image: url(/img/our-villas/wallpaper4.webp);
}

html body main .wallpaper-grid {
  width: 100%;
  height: 710px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 14px;
}

html body main .wallpaper-grid .left, html body main .wallpaper-grid .right {
  width: 49.7%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html body main .grid2 .left {
  background-image: url(/img/our-villas/wallpaper-grid2-left.webp);
}

html body main .grid2 .right {
  background-image: url(/img/our-villas/wallpaper-grid2-right.webp);
}

html body main .grid3 {
  margin-bottom: 134px;
}

html body main .grid3 .left {
  background-image: url(/img/our-villas/wallpaper-grid3-left.webp);
}

html body main .grid3 .right {
  background-image: url(/img/our-villas/wallpaper-grid3-right.webp);
}

html body main .grid4 {
  /* margin-bottom: 134px; */
}

html body main .grid4 .left {
  background-image: url(/img/our-villas/wallpaper-grid4-left.webp);
}

html body main .grid4 .right {
  background-image: url(/img/our-villas/wallpaper-grid4-right.webp);
}

html body main .hreljin .container, html body main .resort .container, html body main .kvarner-two .container {
  width: 63%;
  margin: 203px auto 142px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

html body main .hreljin .container .left, html body main .resort .container .left, html body main .kvarner-two .container .left {
  width: 36%;
}

html body main .hreljin .container .left h3, html body main .resort .container .left h3, html body main .kvarner-two .container .left h3 {
  margin-bottom: 1rem;
}

html body main .hreljin .container .left .subtitle, html body main .resort .container .left .subtitle, html body main .kvarner-two .container .left .subtitle {
  margin-bottom: 68px;
}

html body main .hreljin .container .left .features, html body main .resort .container .left .features, html body main .kvarner-two .container .left .features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}

html body main .hreljin .container .left .features .feature, html body main .resort .container .left .features .feature, html body main .kvarner-two .container .left .features .feature {
  width: 48%;
}

html body main .hreljin .container .left .features .feature .circle, html body main .resort .container .left .features .feature .circle, html body main .kvarner-two .container .left .features .feature .circle {
  /* border: 1px solid $light-gold; */
  width: 60px;
  height: 60px;
  /* border-radius: 50px; */
  margin: 0 auto 18px auto;
  background-image: url(/img/svg/golden-logo.svg);
  background-size: contain;
  background-position: center;
}

html body main .hreljin .container .left .features .feature .description, html body main .resort .container .left .features .feature .description, html body main .kvarner-two .container .left .features .feature .description {
  text-align: center;
}

html body main .hreljin .container .right, html body main .resort .container .right, html body main .kvarner-two .container .right {
  width: 44%;
}

html body main .hreljin .container .right .description, html body main .resort .container .right .description, html body main .kvarner-two .container .right .description {
  margin-bottom: 2rem;
  text-align: justify;
}

@media (max-width: 1600px) {
  html body main .hreljin .container, html body main .resort .container, html body main .kvarner-two .container {
    width: 80%;
  }
  html body main .hreljin .container .left, html body main .resort .container .left, html body main .kvarner-two .container .left {
    width: 38%;
  }
}

@media (max-width: 1200px) {
  html body main .villas .container {
    width: 60%;
  }
  html body main .wallpaper {
    height: 70vh;
  }
  html body main .wallpaper-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    margin-top: 0;
  }
  html body main .wallpaper-grid .left, html body main .wallpaper-grid .right {
    width: 100%;
    height: 710px;
    margin-top: 10px;
  }
  html body main .grid4 {
    margin-bottom: 77px;
  }
  html body main .hreljin .container, html body main .resort .container, html body main .kvarner-two .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 100px auto;
  }
  html body main .hreljin .container .left, html body main .hreljin .container .right, html body main .resort .container .left, html body main .resort .container .right, html body main .kvarner-two .container .left, html body main .kvarner-two .container .right {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
  html body main .hreljin .container .left, html body main .resort .container .left, html body main .kvarner-two .container .left {
    margin-bottom: 40px;
  }
  html body main .hreljin .container .left .subtitle, html body main .resort .container .left .subtitle, html body main .kvarner-two .container .left .subtitle {
    margin-bottom: 34px;
  }
}

@media (max-width: 811px) {
  html body main .villas .container {
    width: 90%;
    margin: 77px auto 80px auto;
  }
  html body main .wallpaper {
    height: 50vh;
  }
  html body main .wallpaper-grid .left, html body main .wallpaper-grid .right {
    height: 400px;
  }
  html body main .hreljin .container, html body main .resort .container, html body main .kvarner-two .container {
    width: 90%;
    margin: 63px auto;
  }
  html body main .hreljin .container .left, html body main .hreljin .container .right, html body main .resort .container .left, html body main .resort .container .right, html body main .kvarner-two .container .left, html body main .kvarner-two .container .right {
    width: 100%;
  }
  html body main .hreljin .container .left .features .circle, html body main .resort .container .left .features .circle, html body main .kvarner-two .container .left .features .circle {
    width: 50px;
    height: 50px;
  }
  html body main .hreljin .container .left .features .description, html body main .resort .container .left .features .description, html body main .kvarner-two .container .left .features .description {
    font-size: .8rem;
  }
  html body main .hreljin .container .right .red-button, html body main .resort .container .right .red-button, html body main .kvarner-two .container .right .red-button {
    letter-spacing: 2px;
  }
}
/*# sourceMappingURL=our-villas.css.map */