/* BASE */
/* COLOURS */
/* FONT */
/* MEDIA */
html, body {
  position: relative;
  font-size: 14px;
  font-family: "Gotham A", "Gotham B", Helvetica, sans-serif;
  color: #000000;
  line-height: 1.5; }

body {
  overflow-x: hidden; }

section, .section {
  text-align: center; }
  section ul, .section ul {
    padding: 0;
    margin: 0; }
  section li, .section li {
    list-style: none; }
  section.container, .section.container {
    padding-left: 2.14286rem;
    padding-right: 2.14286rem; }
  section__intro, .section__intro {
    font-size: 2.14286rem;
    line-height: 1.3;
    margin: 0 auto 2.85714rem;
    max-width: 42.14286rem; }
    @media all and (min-width: 768px) {
      section__intro, .section__intro {
        margin: 0 auto 4.28571rem; } }
  section__text, .section__text {
    margin: 0 auto 4.28571rem;
    max-width: 42.14286rem; }
    @media all and (min-width: 768px) {
      section__text, .section__text {
        margin: 0 auto 5.71429rem; } }

a {
  color: #000000;
  text-decoration: none; }

@media all and (min-width: 480px) {
  .mobile {
    display: none !important; } }

.desktop {
  display: none !important; }
  @media all and (min-width: 480px) {
    .desktop {
      display: block !important; } }

.next-section-link {
  position: absolute;
  width: 100%;
  bottom: 3.21429rem;
  left: 0; }
  .next-section-link img {
    width: 2.14286rem; }

.close-icon {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  overflow: hidden; }
  .close-icon:hover::before, .close-icon:hover::after {
    background: #d07b4e; }
    @media all and (min-width: 768px) {
      .close-icon:hover::before, .close-icon:hover::after {
        background: #FFFFFF; } }
  .close-icon::before, .close-icon::after {
    content: '';
    position: absolute;
    height: 0.14286rem;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #d07b4e; }
    @media all and (min-width: 768px) {
      .close-icon::before, .close-icon::after {
        background: #FFFFFF; } }
  .close-icon::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg); }
  .close-icon::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  .close-icon.pointy::before, .close-icon.pointy::after {
    width: 200%;
    left: -50%; }

.active {
  display: block;
  margin: 2px auto 0; }
  .active--1 {
    width: 0.85714rem; }
  .active--2 {
    width: 4.64286rem; }
  .active--3 {
    width: 4.85714rem; }
  .active--4 {
    width: 4.85714rem; }

/* PARTIALS */
.header {
  position: fixed;
  display: none;
  width: 100%;
  top: 0;
  text-align: center;
  z-index: 3;
  background-color: #f4f3eb; }
  @media all and (min-width: 768px) {
    .header {
      position: absolute;
      background-color: transparent;
      width: 14.28571rem;
      right: 4.28571rem; } }
  .header__close-nav {
    position: relative;
    display: inline-block;
    width: 2.14286rem;
    height: 2.14286rem;
    margin-top: 1.42857rem;
    margin-bottom: 3.21429rem; }
    @media all and (min-width: 768px) {
      .header__close-nav {
        margin-top: 4.28571rem;
        margin-bottom: 2.5rem;
        padding-right: 0.35714rem; } }
  .header__button {
    text-align: right;
    padding-right: 2.5rem; }
    @media all and (min-width: 768px) {
      .header__button {
        padding-right: 0; } }
  .header__nav {
    text-align: center;
    height: 100vh; }
    @media all and (min-width: 768px) {
      .header__nav {
        height: auto;
        text-align: right; } }
    .header__nav ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      text-align: left; }
      @media all and (min-width: 768px) {
        .header__nav ul {
          padding-right: 2.14286rem; } }
      .header__nav ul li {
        list-style: none;
        margin-bottom: 0.71429rem; }
        .header__nav ul li a {
          color: #d07b4e;
          text-transform: uppercase; }
          @media all and (min-width: 768px) {
            .header__nav ul li a {
              color: #FFFFFF; } }
          .header__nav ul li a.active {
            text-decoration: line-through; }

.desktop-headings {
  position: relative;
  display: none;
  width: 100%;
  font-size: 0.85714rem;
  text-transform: uppercase;
  background: #FFFFFF;
  z-index: 2; }
  @media all and (min-width: 768px) {
    .desktop-headings {
      display: block;
      padding-top: 5rem;
      padding-bottom: 2.85714rem;
      text-align: center;
      font-size: 0.71429rem; } }
  @media all and (min-width: 991px) {
    .desktop-headings {
      font-size: 0.78571rem; } }
  @media all and (min-width: 1200px) {
    .desktop-headings {
      font-size: 0.85714rem; } }
  .desktop-headings ul {
    position: relative; }
    @media all and (min-width: 768px) {
      .desktop-headings ul {
        display: table;
        margin: 0 auto;
        border-spacing: 25px 0; } }
    @media all and (min-width: 991px) {
      .desktop-headings ul {
        border-spacing: 60px 0; } }
  .desktop-headings li:not(.desktop-headings__logo) {
    margin-bottom: 1.14286rem; }
    .desktop-headings li:not(.desktop-headings__logo) img {
      -webkit-transition: -webkit-transform 0.2s ease-in;
      -moz-transition: -moz-transform 0.2s ease-in;
      transition: transform 0.2s ease-in;
      -webkit-transform: scale(0, 1);
      -moz-transform: scale(0, 1);
      -ms-transform: scale(0, 1);
      -o-transform: scale(0, 1);
      transform: scale(0, 1);
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
    .desktop-headings li:not(.desktop-headings__logo).active img {
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    @media all and (min-width: 768px) {
      .desktop-headings li:not(.desktop-headings__logo) {
        margin-bottom: 0;
        display: table-cell; } }
  @media all and (min-width: 768px) {
    .desktop-headings__logo {
      position: absolute;
      top: -1.78571rem;
      left: -2.14286rem; } }
  @media all and (min-width: 991px) {
    .desktop-headings__logo {
      left: 2.14286rem; } }
  .desktop-headings__logo img {
    width: 4.28571rem; }
  .sticky-headings .desktop-headings {
    position: fixed;
    top: 0;
    left: 0; }

.mobile-headings {
  position: relative;
  width: 100%;
  height: 2.14286rem;
  padding: 1.07143rem 0 1.42857rem;
  z-index: 2;
  background-color: #FFFFFF; }
  @media all and (min-width: 768px) {
    .mobile-headings {
      display: none; } }
  .mobile-headings li {
    position: absolute;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    -moz-transition: -moz-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center; }
    .mobile-headings li.active {
      -webkit-transform: scale(1, 1);
      -moz-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
  .mobile-headings.stick {
    position: fixed;
    top: 0;
    left: 0; }
  .mobile-headings__open-nav {
    position: absolute;
    right: 2.14286rem;
    top: 1.42857rem; }
    .mobile-headings__open-nav img {
      width: 2.85714rem; }

footer {
  padding: 3.57143rem 0;
  text-align: center; }
  @media all and (min-width: 768px) {
    footer {
      padding: 2.14286rem 0 1.42857rem; } }

.slider {
  position: relative; }
  .slider .slick-arrow {
    background: transparent;
    position: absolute;
    margin-top: -3.21429rem;
    border: none;
    z-index: 1;
    top: 50%;
    cursor: pointer; }
    @media all and (min-width: 768px) {
      .slider .slick-arrow {
        margin-top: -3.57143rem; } }
    .slider .slick-arrow img {
      width: 1.42857rem; }
      @media all and (min-width: 768px) {
        .slider .slick-arrow img {
          width: 2.85714rem; } }
    .slider .slick-arrow:focus {
      outline: none; }
    .slider .slick-arrow:hover img {
      opacity: 0.9; }
    .slider .slick-arrow.slick-prev {
      left: 0.71429rem;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg); }
      @media all and (min-width: 768px) {
        .slider .slick-arrow.slick-prev {
          left: 3.21429rem; } }
    .slider .slick-arrow.slick-next {
      right: 0.71429rem;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg); }
      @media all and (min-width: 768px) {
        .slider .slick-arrow.slick-next {
          right: 3.21429rem; } }

.notification {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 1.07143rem 1.07143rem;
  background-color: #d07b4e;
  color: #FFFFFF;
  text-align: center;
  width: 100%; }
  .notification__text {
    position: relative;
    display: inline-block;
    padding: 0 3.21429rem; }
    @media all and (min-width: 768px) {
      .notification__text {
        padding: 0 2.14286rem; } }
    .notification__text:after, .notification__text:before {
      position: absolute;
      top: calc(50% - 2px);
      content: '';
      background-image: url(/images/close.png);
      background-position: center center;
      background-repeat: no-repeat;
      width: 0.71429rem;
      height: 0.57143rem;
      transform: translate(0, -50%);
      display: none; }
      @media all and (min-width: 768px) {
        .notification__text:after, .notification__text:before {
          display: block; } }
    .notification__text:after {
      right: 0; }
    .notification__text:before {
      left: 0; }
    .notification__text a {
      color: #FFFFFF;
      text-decoration: none; }
      @media all and (max-width: 991px) {
        .notification__text a {
          text-decoration: underline; } }
      .notification__text a:hover {
        text-decoration: underline; }
  .notification__close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    padding: 0.71429rem; }

/* SECTIONS */
.enquire {
  padding: 4.28571rem 0;
  background-color: #ebd7a4; }
  @media all and (min-width: 768px) {
    .enquire {
      padding: 6.42857rem 0 8.57143rem; } }
  .enquire .section__intro {
    margin-bottom: 2.85714rem; }
    @media all and (min-width: 768px) {
      .enquire .section__intro {
        margin-bottom: 3.92857rem;
        max-width: 46.42857rem; } }
  .enquire .section__text {
    max-width: 34rem; }
    @media all and (min-width: 768px) {
      .enquire .section__text {
        margin-bottom: 2.85714rem; } }
  .enquire .separator {
    display: block;
    margin: 1.42857rem auto 2.5rem;
    width: 3.57143rem;
    border-bottom: 1px solid #000000; }
    @media all and (min-width: 768px) {
      .enquire .separator {
        margin: 1.42857rem auto 3.92857rem; } }

.contacts {
  max-width: 42.85714rem;
  margin: 0 auto; }
  .contacts .clearfix {
    clear: both; }

.contact, .logo {
  width: 100%;
  min-height: 10px;
  margin-bottom: 2.5rem;
  /* 
    @media all and (min-width: $medium) {
        margin: 0 rem(15);
        width: calc(33.33% - 30px);
    }*/ }
  @media all and (min-width: 768px) {
    .contact, .logo {
      margin: 0 1.07143rem;
      float: left;
      width: calc(33.33% - 30px); } }
  .contact img, .logo img {
    max-width: 100%; }

.only-contact article.contact {
  width: 100% !important;
  margin: 0 !important; }

.logo {
  margin: 0.71429rem auto 0;
  max-width: 200px; }
  @media all and (min-width: 768px) {
    .logo {
      margin-top: 5rem; } }

.contact__image {
  margin-bottom: 1.42857rem; }

.contact__title {
  font-size: 1rem;
  margin: 0; }

.section__enquire-form {
  max-width: 45.71429rem;
  margin: 4.28571rem auto; }
  @media all and (max-width: 480px) {
    .section__enquire-form {
      margin: 4.28571rem -1.42857rem; } }
  .section__enquire-form #privacy-policy {
    text-decoration: underline; }
  .section__enquire-form .form-group {
    position: relative;
    margin: 0.42857rem 0;
    text-align: left; }
    .section__enquire-form .form-group .form-control {
      width: calc(100% - 42px);
      height: 4.28571rem;
      padding: 0 1.42857rem;
      line-height: 1.14286rem;
      border: 1px solid #000000;
      outline: none; }
      .section__enquire-form .form-group .form-control.is-empty + label.field-name {
        top: 1.42857rem;
        font-size: 1.14286rem; }
      .section__enquire-form .form-group .form-control:focus + label.field-name {
        top: 0.35714rem;
        font-size: 0.71429rem; }
    .section__enquire-form .form-group textarea.form-control {
      height: 12.5rem;
      padding-top: 1.78571rem; }
    .section__enquire-form .form-group label.field-name {
      position: absolute;
      left: 1.42857rem;
      top: 0.35714rem;
      font-size: 0.71429rem;
      transition: all 0.2s ease; }
    .section__enquire-form .form-group .field-error {
      display: none;
      margin-bottom: 0.71429rem;
      font-weight: 300;
      text-align: left;
      transition: all 0.1s ease; }
    .section__enquire-form .form-group.has-error .form-control {
      border-color: #d07b4e; }
    .section__enquire-form .form-group.has-error .field-error {
      display: block;
      color: #d07b4e; }
    .section__enquire-form .form-group.has-error label.field-name {
      color: #d07b4e; }
    .section__enquire-form .form-group.agree-privacy-policy {
      margin: 0.71429rem 0;
      font-weight: bold; }
      .section__enquire-form .form-group.agree-privacy-policy label {
        text-align: left; }
        .section__enquire-form .form-group.agree-privacy-policy label:before {
          position: absolute;
          width: 2.14286rem;
          height: 2.14286rem;
          margin: -0.71429rem 0 0 -1.85714rem;
          background: #EFDCAA;
          border: 1px solid #000000;
          content: ''; }
        .section__enquire-form .form-group.agree-privacy-policy label span {
          margin-left: 1.07143rem; }
      .section__enquire-form .form-group.agree-privacy-policy input[type="checkbox"] {
        margin-left: 0.71429rem; }
        .section__enquire-form .form-group.agree-privacy-policy input[type="checkbox"]:checked + label:before {
          background: #EFDCAA url("/images/tick.jpg") no-repeat center center;
          background-size: 1.57143rem 1.57143rem; }
    .section__enquire-form .form-group.submit-button {
      margin: 3.85714rem 0;
      text-align: center; }
      .section__enquire-form .form-group.submit-button button {
        height: 4.28571rem;
        padding: 0 3.85714rem;
        color: #FFFFFF;
        font-size: 1rem;
        font-weight: 700;
        line-height: 4.28571rem;
        background: #627e5b;
        border: 1px solid #627e5b;
        border-radius: 0;
        outline: none; }
        .section__enquire-form .form-group.submit-button button:hover {
          color: #627e5b;
          background: #FFFFFF; }
  .section__enquire-form #thanks {
    padding: 0 2.14286rem;
    color: #627E5b;
    font-size: 1.28571rem;
    font-weight: 700; }
    .section__enquire-form #thanks.hidden {
      display: none; }

.home {
  position: relative;
  height: 100vh;
  background-color: #345370;
  color: #f4f3eb;
  text-align: center; }
  .home__open-menu {
    padding-top: 1.42857rem;
    text-align: right; }
    @media all and (min-width: 768px) {
      .home__open-menu {
        text-align: right;
        padding-top: 4.28571rem;
        padding-right: 2.14286rem; } }
    .home__open-menu a {
      display: inline-block;
      width: 40px;
      height: 40px; }
  .home__logos {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 17.5rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media all and (min-width: 480px) {
      .home__logos {
        max-width: 25rem; } }
    @media all and (min-width: 768px) {
      .home__logos {
        max-width: 38.92857rem; } }
    .home__logos--manawa {
      display: block;
      width: 100%; }
    .home__logos--location {
      display: block;
      margin: 5.71429rem auto 0;
      width: 100%;
      max-width: 10.71429rem; }
      @media all and (min-width: 480px) {
        .home__logos--location {
          max-width: 14.28571rem; } }
      @media all and (max-width: 768px) and (orientation: landscape) {
        .home__logos--location {
          margin-top: 1.42857rem; } }

.location {
  position: relative; }
  .location .map {
    width: 100%;
    height: 36.42857rem; }
    @media all and (min-width: 768px) {
      .location .map {
        height: 55rem; } }
  .location .dash {
    position: absolute;
    top: 54px;
    z-index: 1;
    left: 50%;
    margin-left: -10px; }

.masterplan {
  position: relative;
  padding-top: 4.28571rem; }
  .masterplan img {
    display: block;
    width: 100%; }

.neighbourhood {
  position: relative;
  padding-top: 4.28571rem;
  padding-bottom: 1.78571rem;
  background-color: #f4f3eb; }
  @media all and (min-width: 480px) {
    .neighbourhood__images {
      margin: 0 auto; } }
  .neighbourhood__images li:focus {
    outline: none; }
  .neighbourhood__images figure {
    margin: 0;
    padding: 0; }
    .neighbourhood__images figure img {
      display: block;
      width: 100%;
      margin: 0 auto; }
    .neighbourhood__images figure figcaption {
      margin-top: 1.78571rem;
      font-size: 0.85714rem; }

.progress {
  position: relative;
  padding-top: 5rem;
  color: #FFFFFF;
  background-color: #627e5b;
  padding-bottom: 1px; }
  @media all and (min-width: 768px) {
    .progress {
      padding-top: 6.42857rem; } }
  .progress__video {
    margin-bottom: 3.57143rem;
    margin-left: -30px;
    margin-right: -30px; }
    @media all and (min-width: 480px) {
      .progress__video {
        margin-bottom: 5.71429rem;
        max-width: 37.85714rem;
        margin-left: auto;
        margin-right: auto; } }
  .progress .section__text {
    max-width: 44.28571rem; }
  .progress__images {
    display: flex;
    flex-wrap: wrap; }
  .progress__image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 68.75%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; }
    @media all and (min-width: 768px) {
      .progress__image {
        width: 50%;
        padding-bottom: 33.33%; } }

.thepoint {
  position: relative;
  padding: 0;
  color: #FFFFFF;
  background-color: #395753;
  padding-bottom: 0.07143rem; }
  .thepoint .section-hero {
    position: relative;
    margin-bottom: 3.57143rem; }
    .thepoint .section-hero .img-logo {
      position: absolute;
      top: 10%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, 0); }
      @media all and (min-width: 768px) {
        .thepoint .section-hero .img-logo {
          top: 4%; } }
      @media all and (min-width: 1200px) {
        .thepoint .section-hero .img-logo {
          top: 7%; } }
      .thepoint .section-hero .img-logo img {
        z-index: 10;
        width: 100%;
        max-width: 18.57143rem; }
        @media all and (min-width: 768px) {
          .thepoint .section-hero .img-logo img {
            max-width: 20rem; } }
        @media all and (min-width: 991px) {
          .thepoint .section-hero .img-logo img {
            max-width: 22.85714rem; } }
        @media all and (min-width: 1200px) {
          .thepoint .section-hero .img-logo img {
            max-width: 31.42857rem; } }
    .thepoint .section-hero .img-wrapper {
      overflow: hidden; }
      .thepoint .section-hero .img-wrapper img {
        position: relative;
        left: 50%;
        width: 100%;
        transform: translate(-50%, 0); }
        @media all and (max-width: 991px) {
          .thepoint .section-hero .img-wrapper img {
            width: auto;
            max-width: none;
            max-height: 42.85714rem; } }
  .thepoint__video {
    margin-bottom: 3.57143rem;
    margin-left: -30px;
    margin-right: -30px; }
    @media all and (min-width: 480px) {
      .thepoint__video {
        margin-bottom: 5.71429rem;
        max-width: 37.85714rem;
        margin-left: auto;
        margin-right: auto; } }
  .thepoint .section__text {
    max-width: 44.64286rem; }
    .thepoint .section__text a {
      color: #FFFFFF;
      text-decoration: none; }
      @media all and (max-width: 991px) {
        .thepoint .section__text a {
          text-decoration: underline; } }
      .thepoint .section__text a:hover {
        text-decoration: underline; }
  .thepoint__images {
    display: flex;
    flex-wrap: wrap; }
  .thepoint__image {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 68.75%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; }
    @media all and (min-width: 768px) {
      .thepoint__image {
        width: 50%;
        padding-bottom: 33.33%; } }

.the-development {
  position: relative;
  padding-top: 3.57143rem;
  padding-bottom: 9.64286rem;
  background-color: #ebd7a4; }
  .the-development__images li {
    margin-bottom: 1.07143rem; }
    @media all and (min-width: 768px) {
      .the-development__images li {
        display: inline-block;
        width: 16.42857rem; } }
    @media all and (min-width: 991px) {
      .the-development__images li {
        width: 18.92857rem; } }
  .the-development__images img {
    display: block;
    margin: 0 auto; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: none;
  overflow-y: auto;
  color: #FFFFFF;
  background: rgba(4, 7, 7, 0.8); }
  .modal-close {
    height: 3.57143rem; }
    .modal-close .close {
      position: fixed;
      right: 32px;
      top: 32px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      opacity: 0.65; }
    .modal-close .close:hover {
      opacity: 1; }
    .modal-close .close:before, .modal-close .close:after {
      position: absolute;
      left: 15px;
      content: ' ';
      height: 33px;
      width: 2px;
      background-color: #FFFFFF; }
    .modal-close .close:before {
      transform: rotate(45deg); }
    .modal-close .close:after {
      transform: rotate(-45deg); }
  .modal-container {
    max-width: 65rem;
    padding: 1.42857rem;
    margin: 7.14286rem auto 21.42857rem;
    overflow-y: auto;
    font-size: 1.14286rem;
    line-height: 1.48; }
    @media all and (max-width: 768px) {
      .modal-container {
        margin: 1.42857rem auto 7.14286rem; } }
    .modal-container h2, .modal-container h3 {
      margin: 3.57143rem 0 2.28571rem;
      font-size: 2.07143rem;
      font-weight: 300;
      line-height: 1.4; }
    .modal-container h3 {
      font-size: 1.28571rem;
      font-weight: 700; }
    .modal-container ul {
      margin: 0.71429rem 0 0.71429rem 1.42857rem; }
      @media all and (max-width: 768px) {
        .modal-container ul {
          margin: 0.35714rem; } }
  .modal.modal-open {
    display: block; }

body.modal-open {
  overflow: hidden !important; }