@font-face {
  font-family: 'BrownStd-Bold';
  src: url(../fonts/BrownStd-Bold.woff2) format("woff2"),
  url(../fonts/BrownStd-Bold.woff) format("woff");
  font-weight: normal;
  font-style: normal
}
@font-face {
  font-family: 'BrownStd-Regular';
  src: url(../fonts/BrownStd-Regular.woff2) format("woff2"),
  url(../fonts/BrownStd-Regular.woff) format("woff");
  font-weight: normal;
  font-style: normal
}
@font-face {
 font-family: 'BrownStd-Light';
 src: url(../fonts/BrownStd-Light.woff2) format("woff2"),
 url(../fonts/BrownStd-Light.woff) format("woff");
 font-weight: normal;
 font-style: normal
}



.wow {
   visibility: hidden;
}

header {
  position: relative;
}
#hero {
  background-image: url('../Front Cover Image/Front_Cover_Image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  height: 100vh;
  min-height: 800px;

}
#hero .big-logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  left: 0;
  right: 0;
text-align: center;
}
#hero .big-logo img {
  width: 100%;
  max-width: 500px
}

body {
  background:#fff;
  overflow-x: hidden!important
}
body.lock {
  overflow: hidden;
}
header.active {

  -webkit-transition-delay: .5s;
  transition-delay: .5s;

}

header.active h1 .st0, header.active h1 .st2, header.active h1 .st3 {
  fill: #fff;
  -webkit-transition-delay: .5s;
  transition-delay: .5s
}

header.active span.menu {
  /* -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg) */
  color: #030d2e
}

header.active span.menu #Group-5 {
  fill: #fff;
  -webkit-transition-delay: .5s;
  transition-delay: .5s
}

nav {
  position: fixed;
  /* overflow:scroll; */
  bottom: 0;
  top:0;
  left: 0;
  width: 100%;

  z-index: 99;
  /* height: 100vh; */
  /* min-height: 800px; */
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);

}

a {
  cursor: pointer;
}
nav.active {
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  /* background-color: #53626c; */
  -webkit-transition: -webkit-transform .75s ease;
  transition: -webkit-transform .75s ease;
  transition: transform .75s ease;
  transition: transform .75s ease, -webkit-transform .75s ease
}
nav ul {
  position: absolute;
  top: 20%;
  right: 53%;
  list-style: none;
  margin-bottom: 0;
  text-align: right;

}
nav ul li a {
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-family: 'BrownStd-Regular';
  line-height: 1.6;
  margin-bottom: 1em
}
nav ul li a:hover {
  text-decoration: underline;
  color: #fff;
}
nav ul li a img {
  width: 20px;
  margin-bottom: 7px;
  margin-right: 5px
}
#navbar {
  position: absolute;
  top: 60px;
  width: 100%;
  max-width: 200px;
  display: none;
  transition: top 0.3s;
  right: 0px;
  z-index: 999
}
#navbar.scroll {
  position: fixed;
  top: 60px;
  transform: unset;
  display: block;
}
header .scroll span.menu{
  background: rgba(3, 13, 46, 0.7);
}

header.active nav.active {
  background: rgba(3, 13, 46, 1);
}
/* .logo-right {
  position: absolute;
  right: 60px;
  bottom: 60px;
  z-index: 999
}
.logo-right img {
  max-width: 80px
} */
/*
header .scroll span.menu i{
background-color: #030d2e;
} */
header span.menu {
  cursor: pointer;
width: 70px;
height: 40px;
margin: auto;
position: relative;
right: 40px;
float: right;
padding: 10px;
}

header span.menu i {
    background-color: #fff;

    content: '';
    display: block;
    width: 100%;
    height: 1px;
}

header span.menu i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

header span.menu i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

header span.menu i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

header.active span.menu i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

header.active span.menu i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

header.active span.menu i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(7px) rotate(0deg);
    }
    100% {
        transform: translateY(7px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
  0% {
      transform: translateY(0px) rotate(0deg);
  }
  50% {
      transform: translateY(-10px) rotate(0deg);
  }
  100% {
      transform: translateY(-10px) rotate(135deg);
  }
}

@keyframes inBtm {
  0% {
      transform: translateY(0px) rotate(0deg);
  }
  50% {
      transform: translateY(-10px) rotate(0deg);
  }
  100% {
      transform: translateY(-10px) rotate(135deg);
  }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}


.grid-container {
  max-width: 1440px;
  margin: 0 auto;

}

.logo {
  position: absolute;
  top: 60px;
  left: 40px;
  right: 0;
  margin: 0 auto;
  z-index: 999
}
.logo img {
  width: 80px;
}
#welcome, #location, #connectivity, #accommodation, #virtual-tour, #contact, #location-gallery, #gallery {
  padding-top: 100px;
  padding-bottom: 100px
}
.left-box h2 {
  color: #030d2e;
  font-family: 'BrownStd-Regular';
  font-size: 30px;
  margin-bottom: .5em
}
.left-box h4 {
  color: #707070;
  font-family: 'BrownStd-Regular';
  font-size: 1.3em;
  line-height: 1.2;
  margin-bottom: 1em
}
.left-box p {
  color: #707070;
  font-family: 'BrownStd-Regular';
  font-size: .95em;
  line-height: 1.2;
}
.middle-box h5, #accommodation .left-box h5 {
  color: #030d2e;
  font-family: 'BrownStd-Bold';
  font-size: 1.1em;
  line-height: 1.2;
  margin-bottom: 1em
}
.middle-box h5 small{
  color: #030d2e;
  font-family: 'BrownStd-Regular';
  font-size: 14px;
  line-height: 1.2;
}
.middle-box img {
  display: inline-block;
  margin-left: 10px;
  height: 30px
}
.middle-box.right img {
  margin-left: 40px
}
.middle-box img.train {
  height: 20px;
  margin-left: 0;
  margin-right: 10px
}
.relative {
  position: relative;
}
#location .relative .left-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 2em
}
#location, #virtual-tour, #location-gallery, #gallery {
  background: rgba(3, 13, 46, 0.2);
}
#connectivity .left-box {
  padding-right: 1em
}
#accommodation .left-box h4 {
  margin-bottom: 3em
}
#accommodation .left-box small {
  color: #2B2E34;
  font-family: 'BrownStd-Light';
  font-size: 15px;
  line-height: 1.2;

}
#accommodation .left-box table {
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom: none
}
#accommodation .left-box table tbody th {
  background: #030d2e;
  color: #fff;
  font-family: 'BrownStd-Light';
  font-size: 18px;
  line-height: 1.2;
  padding: 0.5em 0.25em
}
#accommodation .left-box table .left {
  text-align: left;
}
#accommodation .left-box tbody tr {
  border-bottom: 1px solid #030d2e
}

#accommodation .left-box tbody tr:nth-child(even) {
  background: rgba(3, 13, 46, 0.2);
}
#accommodation .left-box tbody td {
  color: #2B2E34;
  font-family: 'BrownStd-Light';
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  padding: 0.5em
}

#accommodation .left-box table tr.total td {
 color: #030d2e;
 font-family: 'BrownStd-Regular';
 font-size: 15px;
 line-height: 1.2;
}
#accommodation .left-box ul {
  list-style: none;
  margin: 0
}
#accommodation .left-box ul li {
  color: #707070;
  font-family: 'BrownStd-Regular';
  font-size: 15px;
  line-height: 1.2;
  margin: 1em 0
}
#accommodation .specs {
  text-align: center;
  margin-bottom: 1.5em
}
#accommodation .specs img {
  height: 50px;
  margin-bottom: 1em
}

#accommodation .specs p {
  color: #707070;
  font-family: 'BrownStd-Regular';
  font-size: 14px;
  line-height: 1.4;
}
#virtual-tour .left-box h5 {
  color: #030d2e;
  font-family: 'BrownStd-Bold';
  font-size: 1.1em;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 2em;
  text-align: center;
}
#location-gallery .bottom img, #gallery .bottom img {
  margin-top: 15px
}
thead, tbody, tfoot {
  border: none;
  background: none
}
tbody tr:nth-child(even) {
  border: none;
  background: none
}
tbody th, tbody td {
  padding: 0.25em 0
}
table tr td {
  color: #030d2e;
  font-family: 'BrownStd-Light';
  font-size: 15px;
  line-height: 1.2;
}
table {
  border-bottom: 1px solid #030d2e
}
table.no-border {
  border-bottom: none;
  margin-bottom: 2em
}
table.no-border.no-margin {
  margin-bottom: 0
}
table tr td.right {
  text-align: right
}

#floorplan {
  background: rgba(3, 13, 46, 1);
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px
}
#floorplan .overlay {
  background: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%
}
#floorplan .slide, .floorplan-wrap {
  position: relative;
}
#floorplan .slide .title {

  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  text-transform: uppercase;
  left: 0;
  right: 0
}

#floorplan .slide .title h2 {
  color: #fff;
  font-family: 'BrownStd-Light';
  font-size: 55px;
  letter-spacing: .5em
}


.floorplan-wrap .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    cursor: pointer;
}


.floorplan-wrap .arrow img{
    width: 30px;
}
.floorplan-wrap .arrow-right {
    right: -15px;
}
.floorplan-wrap .arrow-left {
    left: -15px;
}
#contact .left-box img {
  max-width: 300px;
  margin-bottom: 3em
}
#contact .download-btn {
  max-width: 150px;
  background: rgba(3, 13, 46, 1);
  text-align: center;
  padding: 8px 0;
    transition: all .75s ease;
}
#contact .download-btn:hover {
  border: 1px solid #030d2e;
  background: #fff;
    transition: all .75s ease;
}
#contact .download-btn:hover a {
  color: #030d2e
}
#contact .download-btn a {
  color: #fff;
  font-family: 'BrownStd-Regular';
  font-size: 20px;
  line-height: 1.2
}
#contact .agents-box {
  padding-top: 1.5em
}
#contact .agents-box h5 {
  color: #030d2e;
  font-family: 'BrownStd-Bold';
  font-size: 1.1em;
  line-height: 1.2;
  text-decoration: underline;
  margin-bottom: 1em
}
#contact .agents-box p, #contact .agents-box p a {
  color: #030d2e;
  font-family: 'BrownStd-Light';
  font-size: 1em;
  line-height: 1.4;
}
#contact .agents-box p strong {
  font-family: 'BrownStd-Bold';
}
#contact p.missprep {
  margin-top: 3em;
  text-align: justify;
  font-family: 'BrownStd-Light';
  font-size: 12px;
  line-height: 1.4
}
#location-gallery .relative, #gallery .relative {
  text-align: center;
  position: relative;
  height: 100%
}
.relative .viewmore {

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 180px;
  cursor: pointer;
  margin: 0 auto;
  left: 0;
  right: 0

}

#location-gallery .slick-dots, #gallery .slick-dots  {
  bottom: -50px
}
/* .relative .viewmore {
  max-width: 200px;


} */

@media screen and (max-width: 1500px) {

  #welcome, #location, #connectivity,
  #location-gallery, #gallery,
  #accommodation, #virtual-tour, #contact  {
  padding-left: 50px;
  padding-right: 50px
}
#location .relative .left-box {
  padding-right: 0
}
#navbar {
  top: 50px;
  transform: unset
}
header span.menu {
  right: 65px
}
.grid-container{
  max-width: 75rem
}
.floorplan-wrap .arrow img {
  width: 20px;
}
.floorplan-wrap .arrow-right {
    right: 15px;
}
.floorplan-wrap .arrow-left {
    left: 15px;
}
.relative .viewmore {
  max-width: 120px
}
#floorplan .slide .title h2 {
  font-size: 40px
}
}
@media screen and (max-width: 1023px) {
  table tr td {
    font-size: 14px
  }
  #location .relative .left-box {
    position: unset;
    top: unset;
    transform: unset;
    padding-right: unset;
}
.floorplan-wrap .arrow img {
  width: 15px;
}
.floorplan-wrap .arrow-right {
    right: 15px;
}
.floorplan-wrap .arrow-left {
    left: 15px;
}
  nav.active {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  nav ul {
    left: 2em;
    right: unset;
    text-align: left;
  }
  #hero {
    height: 650px;
    min-height: 650px;

  }
  #hero .big-logo img {
    max-width: 300px
  }
  .relative .left-box {
    position: unset;
    top: unset;
    transform: unset;
    padding-right: 0
  }
  #welcome, #location, #connectivity, #accommodation, #virtual-tour, #contact, #location-gallery, #gallery {
    padding-top: 30px;
    padding-bottom: 30px
  }
  #welcome, #location, #connectivity,
  #location-gallery, #gallery,
  #accommodation, #virtual-tour, #contact  {
  padding-left: 30px;
  padding-right: 30px
}
header span.menu {
  right: 45px
}
}

@media screen and (max-width: 639px) {
nav ul li a {
  font-size: 1.1rem
}
nav ul {
  left: 1em
}
#floorplan .slide .title h2 {
  font-size: 30px
}

#hero .big-logo img, #contact .left-box img {
  max-width: 200px
}

#navbar {
  top: 30px;
  transform: unset
}
header span.menu {
  right: 30px
}

#welcome, #location, #connectivity,
#location-gallery, #gallery,
#accommodation, #virtual-tour, #contact  {
padding-left: 20px;
padding-right: 20px
}



}
@media screen and (max-width: 500px) {

}
@media screen and (max-width: 425px) {



}