/* ==========================================================================
   Author's custom styles
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
@import url("https://use.typekit.net/gse5zpd.css");

:root {
  --Gold: #a48550;
  --Black: #000000;
  --White: #ffffff;
  --Grey: #f3f3f2;
  --Grey-transparent: rgb(243 243 242 / 90%);
}

body {
  /* border-bottom: 2rem solid white;
  border-left: 2rem solid white;
  border-right: 2rem solid white; */
  /* min-height: 100vh;
  background-image: url(../img/bg-decor.svg);
  background-size: contain;
  background-repeat: no-repeat; */
}

img.bg-decor {
  position: fixed;
  z-index: -1;
  width: 110%;
  top: -72%;
  left: -2rem;
}

* {
  font-family: 'Montserrat', sans-serif;
}

.oskar {
  font-family: oskar, sans-serif;
  font-weight: 300;
  font-style: normal;
}

@media (min-width: 1200px) {
  .h2, h2 {
    font-size: 1.5625rem;
  }
}

.smaller {
  font-size: 0.75rem;
}

.xxx-large {
  font-size: xxx-large;
}

.letter-sp-05 {
  letter-spacing: .05rem;
}

.letter-sp-025 {
  letter-spacing: .025rem;
}

.f-200 {
  font-weight: 300
}

.f-500 {
  font-weight: 500
}

.f-700 {
  font-weight: 700
}

.fs-7 {
  font-size: .875rem !important;
}

.lh-175 {
  line-height: 1.75 !important;
}

a {
  text-decoration: none !important;
  transition: .15s ease-in-out;
}

a:hover {
  color: #313131;
  opacity: 0.7
}

.bg-gold {
  background-color: var(--Gold)
}

.bg-black {
  background-color: var(--Black)
}

.bg-white {
  background-color: var(--White)
}

.bg-grey {
  background-color: var(--Grey)
}

.bg-grey-transp {
  background-color: var(--Grey-transparent)
}

.color-gold {
  color: var(--Gold);
}

.color-black {
  color: var(--Black);
}

.color-white {
  color: var(--White) !important;
}

.color-grey {
  color: var(--Grey);
}

.pr-2 {
  padding-right: 1em;
}

/* ================== L A Y O U T  ============ */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1088px;
  }
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1088px;
  }
}

@media (max-width: 991px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 100%;
  }
}

/* ================== N A V B A R ============ */
.navbar-light .navbar-nav .nav-link {
  color: rgb(255 255 255);
}

.bg-light {
  background-color: #ffffff !important;
}

.navbar li.nav-item .nav-link {
  font-size: .65em;
  letter-spacing: 0.1rem;
  padding: .25rem 0;
  text-align: center;
}

.logo-header {
  width: 180px;
}

button.navbar-toggler {
  width: 100%;
}

nav.mystyle {
  position: fixed !important;
  top: 0;
  height: 100vh;
  z-index: 1000;
  width: 100%;
  transition: .5s ease-in-out;
}

nav {
  transition: 1.5s ease-in-out !important;
  padding: 0 2rem;
}

nav.mystyle .mobMenu {
  height: calc(100% - 136px);
}

.navbar-light .navbar-toggler {
  color: transparent;
  border-color: transparent;
}

.closebtn, .menu-opener {
  display: none;
}

@media (max-width: 991px) {
  nav {
    padding: 0;
  }
}

@media (max-width: 768px) {
  li.nav-item {
    padding: 1em 0;
  }

  .logo-header {
    width: 120px;
  }

  .overlay {
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    left: -100%;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
  }

  .overlay.openNav {
    transform: translateX(100%);
  }

  .overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }

  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }

  .overlay .closebtn {
    position: relative;
    font-size: 60px;
    text-align: center;
  }

  .menu-opener {
    font-size: 30px;
    cursor: pointer;
    display: block;
    text-align: center;
  }

  .closebtn {
    display: block;
  }

  .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--Gold);
  }

  ul.navbar-nav {
    display: flex;
    height: 100vh;
    padding-bottom: 5rem;
  }
}

/* ==================  C A R O U S E L  ============ */
.carousel {
  padding: 0 2rem;
}

.carousel-item {
  height: 700px;
}

.carousel-item picture img {
  object-fit: cover;
  object-positon: center;
  height: 700px;
}

#carouselLocation .carousel-item {
  max-height: auto !important;
}

#carouselLocation .carousel-item picture {
  object-fit: none !important;
  max-height: auto !important;
}

@media (max-width: 991px) {
  .carousel {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .carousel-item {
    height: 400px;
  }

  .carousel-item picture img {
    height: 400px;
  }
}

/* ================== F O O T E R  ============ */
footer {
  background: black;
  position: relative;
  margin: 0 2rem 2rem 2rem;
  box-sizing: content-box;
}

a.tr-footer-link {
  right: 1rem;
  bottom: 1rem;
  position: absolute;
  color: darkgrey;
}

.footer-separator {
  border-left: 1px solid var(--Gold);
}

.twenty3-logo-footer {
  width: 190px;
}

.logo-agent-footer {
  width: 190px;
}

@media (max-width: 991px) {
  footer {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .footer-separator {
    border-left: 0px solid var(--Gold);
  }

  footer .h5, footer h5 {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .logo-agent-footer {
    width: 160px;
  }

  footer {
    padding-bottom: 3rem;
  }

  a.tr-footer-link {
    right: inherit;
    bottom: -3rem;
    position: relative;
  }
}

/* ==================  T H E  B U I L D I N G  ============ */
.intro-black-panel {
  top: -9.5rem;
  max-width: 450px;
  margin-left: 0;
  left: 0;
  position: absolute;
}

.new-features ul {
  margin: 0;
  padding: 1.25rem;
}

.new-features li {
  padding-bottom: 0.25em;
}

@media (max-width: 768px) {
  .intro-black-panel {
    position: relative;
    top: 0;
    max-width: inherit;
  }
}

/* ==================  S P E C I F I C A T I O N S  ============ */
.intro-grey-panel {
  top: -9rem;
  max-width: 28rem;
  margin-left: 0;
  left: 0rem;
  position: absolute;
}

.floors-table .table>:not(caption)>*>* {
  padding: .25rem .5rem;
}

.floorplan {
  max-height: 900px;
  width: auto;
  margin: 0 auto;
}

.plan-text-01 {
  position: absolute;
  top: 46%;
  right: 0;
}

.plan-text-02 {
  position: absolute;
  left: 50%;
  margin-left: -109px;
  bottom: 3rem;
}

/*  */
.tabs {
  max-width: 100%;
  margin: auto;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: none;
}

.tabs__content {
  background-color: #fff0;
  margin-bottom: 5rem;
  min-height: 900px
}

.tabs__section {
  padding: 0;
  cursor: grab;
}

.tabs__controls {
  padding: .5rem 10px;
  position: relative;
  letter-spacing: 0;
}

.tabs__controls:after {
  content: "";
  background: #0000000a;
  height: 3px;
  width: calc(100% - .5rem);
  position: absolute;
  top: 0;
  left: 0;
}

.tabs__controls:hover {
  background-color: rgb(0 0 0 / 1%);
}

.tabs__bar {
  background-color: #f9f9f900;
  box-shadow: none;
}

.tabs__line {
  top: 0;
  height: 2px;
  background-color: #000000;
}

.tabs__controls.is-active {
  color: #000000;
}

@media (max-width: 1200px) {
  .floors-table .small, .floors-table small {
    font-size: .75em;
  }

  .plan-text-01, .plan-text-02 {
    font-size: 1rem !important;
  }
}

@media (max-width: 991px) {
  .intro-grey-panel {
    top: 0;
    max-width: 100%;
    margin-left: 0;
    left: 0rem;
    position: relative;
  }

  .floorplan {
    max-height: 100%;
    width: 100%;
  }

  .fs-5 {
    font-size: 1rem !important;
  }

  .plan-text-01 {
    transform: rotate(90deg) translateY(-32px);
  }
}

@media (max-width: 576px) {
  .plan-text-01 {
    transform: rotate(90deg) translateY(-58px);
  }

  .floors-table .table>:not(caption)>*>* {
    padding: .25rem 0;
  }

  .tabs__content {
    min-height: 400px
  }
}

/* ==================  L O C A T I O N  ============ */
#carouselLocation {
  padding: 0 2rem;
}

.intro-location-panel {
  top: -10rem;
  max-width: 27rem;
  margin-left: 0;
  left: 0rem;
  position: absolute;
}

.aerial-img-location {
  transform: translateX(25px);
}

.line-across {
  background: black;
  width: 100%;
  height: 3px;
}

.line-45 {
  height: 20px;
  width: 20px;
  border-left: 2px solid black;
  transform: rotate(45deg);
  margin-top: 1px;
}

.connection span {
  font-size: .75em;
}

.container-icon {
  height: 64px;
}

.icon-location {
  width: 100px;
}

.plane-icon {
  position: absolute;
  right: 0;
  margin-right: 0;
}

.bicycle-icon {
  position: absolute;
  right: 75%;
  margin-right: -50px;
}

.car-icon {
  position: absolute;
  right: 50%;
  margin-right: -50px;
}

.train-icon {
  position: absolute;
  right: 25%;
  margin-right: -50px;
}

.walker-icon {
  position: absolute;
  right: 100%;
  margin-right: -100px;
}

img.top-level {
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: -1px;
  width: 120px;
}

img.left-level {
  width: 160px;
  position: absolute;
  left: 2rem;
  top: 50%;
  margin-top: -32px;
}

.icon-location {
  opacity: 0;
}

.aos-animate .icon-location {
  opacity: 1;
}

.amenities-aerial {
  object-fit: contain;
}

@media (max-width: 1200px) {
  .intro-location-panel {
    top: -8rem;
    max-width: 24rem;
    margin-left: 0;
    left: 0rem;
    position: absolute;
  }

  img.top-level {
    margin-left: -50px;
    width: 100px;
  }

  img.left-level {
    width: 140px;
    margin-top: -32px;
  }
}

@media (max-width: 1060px) {
  img.left-level {
    left: 1rem;
  }

  .aerial-img-location {
    transform: translateX(5px) translateY(-20px);
  }
}

@media (max-width: 991px) {
  .intro-location-panel {
    top: 0;
    max-width: 100%;
    position: relative;
  }

  #carouselLocation {
    padding: 0;
  }

  .line-45 {
    display: none !important;
  }

  img.left-level {
    left: 0;
  }

  .aerial-img-location {
    transform: translateX(0) translateY(0);
  }
}

@media (max-width: 840px) {
  img.top-level {
    display: none;
  }

  img.left-level {
    display: none;
  }

  .amenities-aerial {
    object-fit: revert;
  }
}

@media (max-width: 575px) {
  .icon-location {
    width: 50px;
  }

  .container-icon {
    height: 32px;
  }
}

/* ==================  S O U T H A M P T O N ============ */
.intro-suthampton-panel {
  top: -12rem;
  max-width: 30rem;
  margin-left: 0;
  left: 0rem;
  position: absolute;
}

.amenities-list li {
  list-style: none;
}

.amenities-list ul {
  padding-left: 0;
}

.amenities-list {
  min-width: 300px;
}

@media (max-width: 991px) {
  .intro-suthampton-panel {
    top: 0;
    max-width: 100%;
    position: relative;
  }
}

/* ==================  C O N T A C T  &  D O N W L O A D  ============ */
.downloads-fullpage {
  width: calc(100% - 4rem);
  height: calc(100vh - 2rem - 160px);
  background-image: url(../img/05-downloads/downloads-hero.jpg);
  background-size: cover;
  background-position: center;
  padding: 0 2rem;
}

.contact-fullpage {
  width: calc(100% - 4rem);
  height: calc(100vh - 190px);
  background-image: url(../img/06-contact/bg-contact-twenty3.jpg);
  background-size: cover;
  background-position: center;
  padding: 0 2rem;
}

.intro-contact {
  position: absolute;
  bottom: -32px;
}

img.logo-contact {
  max-width: 160px;
}

.rounded {
  border-radius: 5rem !important;
}

.form-control {
  border: none;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: .75rem 1rem;
  font-size: 1rem;
  border-radius: .3rem;
  color: black;
}

.form-control::placeholder {
  color: black;
  opacity: 0.5;
}

.download-box {
  width: 32rem;
  padding-bottom: 3rem !important;
  position: absolute;
  left: 0;
  bottom: -30px;
}

@media (max-width: 991px) {
  .intro-contact {
    position: relative;
    bottom: 0;
  }

  body#contactBody {
    background: var(--Grey);
  }

  .contact-fullpage {
    width: 100%;
    height: calc(100vh - 175px);
    background-image: none;
    background-color: black;
  }

  .downloads-fullpage {
    width: 100%;
    height: auto;
    background-image: none;
    background-size: cover;
    background-position: center;
  }

  .mob-contact-image {
    object-fit: cover;
    object-position: top;
    height: 319px;
    width: 100%;
  }

  .download-box {
    width: 100%;
    max-width: 40rem;
    position: relative;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .download-box {
    width: 100% !important;
    position: relative;
    padding-bottom: 5rem !important;
    left: 0;
    bottom: 0px;
  }

  .downloads-fullpage {
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-color: var(--Grey);
  }

  .contact-fullpage {
    width: 100%;
    height: auto;
    background-image: none;
    background-color: black;
  }
}

/* ==================  T A B L E S  ============ */
.border-sides {
  border-left: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

/* ==================  T A B s  ============ */
ul#pills-tab li {
  display: flex;
  flex: 1;
  margin: 0 .25rem;
}

.nav-pills .nav-link {
  background: 0 0;
  border: 0;
  border-top: 1px solid #dee2e6;
  border-radius: 0;
  width: 100%;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #000;
  background-color: #ffffff00;
  border-top: 2px solid black;
  border-radius: 0;
}

/* ==================  S L I C K - S L I D E R ============ */
button.slick-prev.slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 100;
}

button.slick-next.slick-arrow {
  position: absolute;
  bottom: 50%;
  right: 0;
}

a.arrow-slider.prev {
  position: absolute;
  top: 50%;
  left: 6%;
  color: var(--Black)
}

a.arrow-slider.next {
  position: absolute;
  top: 50%;
  right: 6%;
  color: var(--Black)
}