@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
  height: 100%;
}
body {
  font-size: 16px;
  line-height: 1.4em;
  font-family: "Gotham A", "Gotham B";
  font-style: normal;
  font-weight: 400;
  color: #20201e;
  background: #fdfaf1;
  height: 100%;
  font-variant-numeric: lining-nums;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.underline {
  text-decoration: underline;
}
a.underline:hover {
  text-decoration: none;
}

b {
  font-family: "Gotham A", "Gotham B";
  font-style: normal;
  font-weight: 700;
}

.med {
  font-family: "Gotham A", "Gotham B";
  font-style: normal;
  font-weight: 500;
}

.pic {
  background: 50% 50% no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
}

.animatein {
  visibility: hidden;
}
.resizeimg {
  max-width: 100%;
  height: auto;
}

.mobileshow {
  display: none;
}

.magenta {
  background: #f0f !important;
  color: #fff !important;
}

.browntext {
  color: #8a6e4b;
}
.pinktext {
  color: #d9c3c0;
}
.sagetext {
  color: #c1cbbc;
}
.whitetext {
  color: #fdfaf1;
}
.sagebg {
  background: #c1cbbc;
}
.brownleafbg {
  background: 50% 50% no-repeat url(/img/content/bgs/brownpalms.jpg) fixed;
  background-size: cover;
}
.greenleafbg {
  background: 50% 50% no-repeat url(/img/content/bgs/greenpalms.jpg) fixed;
  background-size: cover;
}
.pinkleafbg {
  background: 50% 50% no-repeat url(/img/content/bgs/pinkpalms.jpg) fixed;
  background-size: cover;
}

/**** cookies ****/
.noscroll {
  overflow: hidden;
}
.cookies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(138, 110, 75, 0.8);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookies-policy-window {
  position: absolute;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #fdfaf1;
  z-index: -1;
  opacity: 0;
  flex-direction: column;
  overflow: hidden;
}

.cookies-policy-window.active {
  z-index: 1000000;
  opacity: 1;
  transition: all 0.5s;
}

.cookie-wrapper {
  /* height: fit-content; */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
}

.close-coockie {
  position: relative;
  z-index: 99;
  right: 10px;
  top: 10px;
  cursor: pointer;
  background: #c3b39d !important;
  margin-bottom: 50px !important;
  align-self: flex-end;
  margin-top: 30px !important;
  width: 80px;
  margin: 30px 0 50px 0 !important;
}

.close-coockie:before {
  background-image: url(/img/ui/buttonleftlightbrown.svg) !important;
}

.close-coockie:after {
  background-image: url(/img/ui/buttonrightlightbrown.svg) !important;
}

.close-coockie:hover {
  /* background: red !important; */
  background: #8a6e4b !important;
  color: #fdfaf1;
  text-decoration: none;
}

.close-coockie:hover:before {
  background-image: url(/img/ui/buttonleftbrown.svg) !important;
}

.close-coockie:hover:after {
  background-image: url(/img/ui/buttonrightbrown.svg) !important;
}

.cookiewindow {
  background: #fdfaf1;
  padding: 10px 0;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
  color: #8a6e4b;
  width: 80%;
  max-width: 600px;
}
.cookiecontent {
  padding: 40px;
}
.cookiebuttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.cookiebuttons a {
  margin: 0 30px;
}
.cookiepolicy {
  font-size: 12px;
  color: #8a6e4b;
  text-decoration: underline;
  cursor: pointer;
}
.cookiebuttons .buttonlink {
  background: #c3b39d;
  cursor: pointer;
}
.cookiebuttons .buttonlink:before {
  background-image: url(/img/ui/buttonleftlightbrown.svg);
}
.cookiebuttons .buttonlink:after {
  background-image: url(/img/ui/buttonrightlightbrown.svg);
}

.cookiebuttons .buttonlink:hover {
  background: #8a6e4b;
  color: #fdfaf1;
  text-decoration: none;
}
.cookiebuttons .buttonlink:hover:before {
  background-image: url(/img/ui/buttonleftbrown.svg);
}
.cookiebuttons .buttonlink:hover:after {
  background-image: url(/img/ui/buttonrightbrown.svg);
}

.buttonlink.enquirebutton {color:#e5decf}

.privacypopup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}
.privacypopup a:not(.buttonlink) {
  color: #8a6e4b;
}
.privacywindow {
  max-width: 800px;
  padding: 40px;
  height: 80vh;
  background: #fdfaf1;
  overflow-y: scroll;
  position: relative;
}
.privacywindow .buttonlink {
  color: #fdfaf1;
  cursor: pointer;
  max-width: 160px;
}
a.cookiepolicy,
.cookieprefs {
  cursor: pointer;
}
.smallclose {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
  cursor: pointer;
  background: #8a6e4b;
  color: #fdfaf1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  line-height: 0.8em;
  box-sizing: border-box;
  padding-bottom: 4px;
}
.smallclose:hover {
  text-decoration: none;
  background: #20201e;
}

/**** navigation ****/
.navholder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2000;
  background: #fdfaf1;
}
.navlogo path {
  fill: #20201e;
  transition: fill 0.5s;
}
.navbutton {
  display: block;
  position: fixed;
  width: 30px;
  height: 30px;
  padding: 0;
  top: 15px;
  right: 2vw;
  z-index: 2001;
  cursor: pointer;
  background: transparent;
}
.navbutton .navicon {
  position: relative;
  width: 100%;
  height: 100%;
}
.navbutton .navicon span {
  display: block;
  width: 100%;
  height: 2px;
  background: #20201e;
  position: absolute;
  transition: top 0.5s 0.5s, transform 0.5s, opacity 0.5s, background 0.5s;
}
.navbutton .navicon span:nth-child(1) {
  top: 9px;
}
.navbutton .navicon span:nth-child(2) {
  top: 17px;
  transform-origin: 50% 50%;
}
.menuopen .navlogo path {
  fill: #fdfaf1;
}
.menuopen .navbutton .navicon span {
  transition: top 0.5s, transform 0.5s 0.5s, opacity 0s 0.5s, background 0.5s;
  background: #fdfaf1;
}

.menuopen .navbutton .navicon span:nth-child(1) {
  top: 14px;
  transform: rotate(-45deg);
}
.menuopen .navbutton .navicon span:nth-child(2) {
  top: 14px;
  transform: rotate(45deg);
}

.navinner {
  width: 100%;
  height: 0;
  position: relative;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.navhide {
  display: flex;
  overflow: hidden;
  transition: height 0.5s;
  height: 0;
  width: 100%;
}
.navholder .nav {
  width: 100%;
  margin: 0;
  display: flex;
  z-index: 50;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  padding: 0px;
  background: rgba(138, 110, 75, 0.95);
  position: relative;
}

.nav .circleborder {
  margin: 40px 0;
  width: 20vw;
}
.nav a {
  margin: 10px 0;
}
.nav a img {
  height: 4vh;
  width: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  box-sizing: border-box;
  transition: opacity 1s, top 0.5s;
  position: relative;
  opacity: 0;
  top: 0px;
}

.menuopen .nav a:nth-child(1) img {
  transition-delay: 0s;
}
.menuopen .nav a:nth-child(2) img {
  transition-delay: 0.1s;
}
.menuopen .nav a:nth-child(3) img {
  transition-delay: 0.2s;
}
.menuopen .nav a:nth-child(4) img {
  transition-delay: 0.3s;
}
.menuopen .nav a:nth-child(5) img {
  transition-delay: 0.4s;
}
.menuopen .nav a:nth-child(6) img {
  transition-delay: 0.5s;
}
.menuopen .nav a:nth-child(7) img {
  transition-delay: 0.6s;
}
.menuopen .nav a:nth-child(8) img {
  transition-delay: 0.7s;
}
.menuopen .nav a:nth-child(9) img {
  transition-delay: 0.8s;
}
.menuopen .nav a:nth-child(10) img {
  transition-delay: 0.9s;
}

.menuopen .nav a img {
  opacity: 1;
  top: 0;
}
.nav a:hover img {
  border-bottom: 1px solid #fdfaf1;
}

.navlogo {
  position: absolute;
  top: 17px;
  left: 2vw;
  margin: 0;
  z-index: 1000;
}
.nav .navlogo {
  margin: 0;
}

.menuopen .navhide {
  height: 100vh;
}

.navborderholder {
  position: relative;
  top: 60px;
  width: calc(100% - 4vw);
  margin: 0 auto;
  transition: width 0.5s;
}
.navborderholder.footerborder {
  top: auto;
  height: 10px;
}
.navborderholder:before,
.navborderholder:after {
  content: "";
  display: block;
  background: #20201e;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  transition: transform 0.5s;
}
.navborderholder:before {
  left: 0;
  transform-origin: 0 50%;
}
.navborderholder:after {
  right: 0;
  transform-origin: 100% 50%;
}
.scrolled.navholder .navborderholder {
  width: 0;
}
.scrolled.navholder .navborderholder .circleborder:before,
.scrolled.navholder .navborderholder:before,
.scrolled.navholder .navborderholder:after {
  transform: scale(0);
}

/**** footer ****/
.footer {
  position: relative;
  padding: 20px 2vw 5vw 2vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.3em;
}
.footer a {
  color: #20201e;
}
.footer .footercol:last-child {
  text-align: right;
}
.footer .social {
  display: flex;
  margin-bottom: 0px;
}
.footer .social img {
  margin-right: 10px;
  width: 25px;
}
.footer .logos {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0px;
  flex-direction: column;
}
.footer .logos img {
  margin-left: 20px;
}
.footertext {
  flex: 0 0 100%;
  margin-top: 20px;
}
.footertext p {
  margin: 0 0 5px 0;
}
.footer .wired {
  width: 60px;
}

.footerform {
  display: flex;
}
.footerform .footertext {
  flex: 0 0 28vw;
  margin: 0 10vw 0 5vw;
}
.footerform .footerpic {
  flex: 1 1;
  background: 50% 50% no-repeat url(/img/content/footer/footerpic.jpg);
  background-size: cover;
}

.footerform input,
.footerform select {
  font-family: "Portrait Web", Georgia, serif;
  font-size: 16px;
  line-height: 1.3em;
  margin: 0;
  padding: 0;
  border: 0;
  color: #313b42;
}
.footerform input {
  border-bottom: 1px solid #be6437;
  width: 100%;
  padding: 8px 0;
  margin-bottom: 20px;
}
.footerform select {
  border: 1px solid #be6437;
  width: 100%;
  padding: 12px 0;
  margin-bottom: 20px;
  text-indent: 3px;
}
.footerform select option {
  font-family: "Portrait Web", Georgia, serif;
  color: #313b42;
  font-size: 16px;
}
.formcheckbox {
  display: flex;
  margin-top: 40px;
}
.footerform input[type="checkbox"] {
  appearance: none;
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #be6437;
  margin: 0;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
}
/*.footerform input:checked[type='checkbox'] {background:#BE6437}*/
.footerform input:checked[type="checkbox"]:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #be6437;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
}
.formsection.submit {
  text-align: center;
  margin-top: 60px;
}
.formsubmit {
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Portrait Web", Georgia, serif;
  border-bottom: 2px solid #be6437;
  cursor: pointer;
}
.formsubmit h2 {
  margin: 0;
  line-height: 0.9em;
}

.js-validate-error-label {
  margin-bottom: 20px;
  background: #be6437;
  color: #fff;
  font-size: 12px;
  display: inline-block;
  padding: 0 5px;
  position: relative;
}
.js-validate-error-label:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  top: -5px;
  left: 2px;
  background: #be6437;
  z-index: -1;
}

.footer2 {
  border-top: 1px solid #be6437;
  padding-top: 20px;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.footer2 img {
  width: 120px;
}
.footer2 a {
  color: #be6437;
}
.footer2 p {
  margin-bottom: 5px;
  color: #666;
}

/**** general page stuff ****/
b {
  font-weight: 700;
}

h1 {
  font-size: 60px;
  line-height: 0.9em;
  font-weight: 300;
}
h2 {
  font-size: 40px;
  line-height: 1.3em;
  font-weight: 300;
}
h3 {
  font-size: 20px;
  line-height: 1.3em;
  font-weight: 300;
}
h3 span {
  font-size: 14px;
}
h4 {
  font-size: 22px;
  line-height: 1.1em;
  font-weight: 300;
}
h5 {
  font-size: 16px;
  line-height: 1.3em;
  font-weight: 300;
}

.aprthdr {
  font-family: "Blackriver";
  font-size: 36px;
  color: #d9c3c0;
  letter-spacing: -0.49px;
  text-align: center;
  line-height: 41px;
  border: 0;
  margin: 0;
}
.hidden {
  display: none !important;
}

.enquire {
  background: #8a6e4b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  z-index: 1500;
  cursor: pointer;
  transition: background 0.2s, opacity 0.5s;
}
.enquire img {
  width: 60%;
  height: auto;
}
.enquire.hideenquire {
  opacity: 0;
  pointer-events: none;
}
.enquire:hover {
  background: #20201e;
}

.pagecontent {
  position: relative;
  padding-top: 80px;
}
.pagebanner {
  height: calc(100vh - 80px);
  position: relative;
  width: 100%;
}
.pagebanner .bannerbg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.pagebanner .bannerbg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.pagebanner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.pagebanner .bannercontent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.bannerborder {
  width: 25vw;
  margin-top: 5vw;
}
.downarrow {
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 100;
  background: url(/img/ui/downarrow.svg) 50% 50% no-repeat;
  background-size: contain;
}

.marginsection {
  margin-left: 2vw;
  margin-right: 2vw;
  padding-bottom: 5vw;
}
.coloursection {
  padding-top: 5vw;
  margin-bottom: 5vw;
}
.nobottommargin {
  margin-bottom: 0 !important;
}

/**** galleries ****/

.fullgallery {
  height: calc(100vh - 60px - 5vw);
}
.fullgallery .slick-list,
.fullgallery .slick-track {
  height: 100%;
}
.fullgallery .slick-arrow {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  z-index: 1000;
  margin: 0;
  padding: 0;
  border: 0;
  background: #8a6e4b no-repeat 50% 50%;
  background-size: 25px auto;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}
.fullgallery .slick-arrow:hover {
  background-color: #20201e;
}
.fullgallery .slick-arrow.slick-prev {
  left: 20px;
  background-image: url(/img/ui/leftarrow.svg);
}
.fullgallery .slick-arrow.slick-next {
  right: 20px;
  background-image: url(/img/ui/rightarrow.svg);
}
.fullgallery .slick-dots {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 5vw;
}
.fullgallery .slick-dots li {
  margin: 0 5px;
  padding: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: flex;
}
.fullgallery .slick-dots button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  text-indent: -9999px;
  flex: 0 0 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: 0px;
  left: 1.5px;
  box-sizing: border-box;
  border: 1px solid #8a6e4b;
}
.fullgallery .slick-dots .slick-active button {
  background: #8a6e4b;
}

.carousel {
  position: relative;
}
.carousel .slick-arrow {
  width: 20px;
  height: 5vw;
  position: absolute;
  bottom: 0;
  z-index: 1000;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  text-indent: -9999px;
  cursor: pointer;
  transition: background 0.2s;
  background: transparent 50% 50% no-repeat;
  background-size: contain;
}
.carousel .slick-arrow.slick-prev {
  right: 60%;
  background-image: url(/img/ui/buttonarrowbrownleft.svg);
}
.carousel .slick-arrow.slick-next {
  left: 60%;
  background-image: url(/img/ui/buttonarrowbrown.svg);
}
.carousel .slick-dots {
  display: flex;
  position: relative;
  top: 100%;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 5vw;
}
.carousel .slick-dots li {
  margin: 0 5px;
  padding: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: flex;
}
.carousel .slick-dots button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  text-indent: -9999px;
  flex: 0 0 10px;
  height: 10px;
  border-radius: 50%;
  position: relative;
  top: 0px;
  left: 1.5px;
  box-sizing: border-box;
  border: 1px solid #8a6e4b;
}
.carousel .slick-dots .slick-active button {
  background: #8a6e4b;
}

.carousel.dogcarousel .slick-arrow.slick-prev {
  background-image: url(/img/ui/buttonarrowpinkleft.svg);
}
.carousel.dogcarousel .slick-arrow.slick-next {
  background-image: url(/img/ui/buttonarrowpink.svg);
}
.carousel.dogcarousel .slick-dots button {
  border: 1px solid #d9c3c0;
}
.carousel.dogcarousel .slick-dots .slick-active button {
  background: #d9c3c0;
}
/* .workcarousel .slide{width: fit-content;}
.workcarousel .pic{width: 100%} */

.livecarousel {
  width: 50vw;
  margin: 0 1.5vw;
  height: 50vh;
}
.livecarousel .slide {
  width: 100%;
  height: 100%;
}
.lifecarousel,
.dogcarousel {
  width: 100%;
  font-size: 14px;
  line-height: 1.3em;
}
.lifecarousel .slide,
.dogcarousel .slide {
  width: 30vw;
  margin: 0 1.5vw;
  text-align: center;
  background: #3a4436;
  padding-bottom: 3vw;
}
.homesection .lifecarousel .pic,
.homesection .dogcarousel .pic {
  margin: 0 0 3vw 0;
  width: 100%;
  height: 30vw;
}
.homesection .lifecarousel p,
.homesection .dogcarousel p {
  padding: 0 3vw;
  min-height: 80px;
  margin: 0;
}
.carousel.lifecarousel .slick-dots button {
  border-color: #d9c3c0;
}
.carousel.lifecarousel .slick-dots .slick-active button {
  background: #d9c3c0;
}
.carousel.lifecarousel .slick-arrow.slick-prev {
  background-image: url(/img/ui/buttonarrowpinkleft.svg);
}
.carousel.lifecarousel .slick-arrow.slick-next {
  background-image: url(/img/ui/buttonarrowpink.svg);
}

.lifestylegallery {
  width: 60vw;
  height: 40vw;
  margin-bottom: 40px;
  margin-top: 10px;
}
.homesection .lifestylegallery .pic {
  height: 40vw;
  margin: 0;
}
.fullgallery.lifestylegallery .slick-dots {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 40px;
}

.xpcarousels .carousel {
  width: 100%;
}
.xpcarousels .carousel .slide {
  width: 40vw;
  text-align: center;
}
.xpcarousels .carousel img {
  margin-left: auto;
  margin-right: auto;
}

/**** borders ****/

.circleborder {
  width: 100%;
  height: 1px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.circleborder.smallborder {
  width: 25vw;
}
.circleborder:before {
  content: "";
  display: block;
  border: 1px solid #fdfaf1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  transform-origin: 50% 50%;
  transition: transform 0.5s;
}
.circleborder.whiteborder {
  background: #fdfaf1;
}
.circleborder.blackborder {
  background: #20201e;
}
.circleborder.brownborder {
  background: #8a6e4b;
}
.circleborder.pinkborder {
  background: #d9c3c0;
}
.circleborder.browncircle:before {
  background: #8a6e4b;
}
.circleborder.whitecircle:before {
  background: #fdfaf1;
}
.circleborder.sagecircle:before {
  background: #c1cbbc;
}
.circleborder.greencircle:before {
  background: #3a4436;
}
.circleborder.pinkcircle:before {
  background: #d9c3c0;
}
.circleborder.blackborder:before {
  border-color: #20201e;
}
.circleborder.brownborder:before {
  border-color: #8a6e4b;
}
.circleborder.pinkborder:before {
  border-color: #d9c3c0;
}
.circleborder.vertical {
  width: 1px;
  height: 20vh;
}
.circleborder.vertical:before {
  top: calc(10vh - 5px);
  left: -5px;
}

.blackpatternborder {
  background: url(/img/content/borders/dark2.svg) repeat-x top center;
  background-size: auto 16px;
  width: 100%;
  height: 16px;
  margin: 0 0 5vw 0;
}
.brownpatternborder1 {
  background: url(/img/content/borders/brown1.svg) repeat-x top center;
  background-size: auto 24px;
  width: 100%;
  height: 24px;
}
.brownpatternborder3 {
  background: url(/img/content/borders/brown1.svg) repeat-x top center;
  background-size: auto 24px;
  width: 100%;
  height: 24px;
}

.brownpatternborder2 {
  background: url(/img/content/borders/brown2.svg) repeat-x top center;
  background-size: auto 16px;
  width: 100%;
  height: 16px;
}
.brownplainborder {
  background: #8a6e4b;
  background-size: auto 100%;
  width: 100%;
  height: 3px;
}

.plusminus {
  position: relative;
  width: 25px;
  cursor: pointer;
  color: #cd191f;
}
.plusminus.active:before {
  transform: translatey(-50%) rotate(-90deg);
  opacity: 0;
}
.plusminus.active:after {
  transform: translatey(-50%) rotate(0);
}
.plusminus:before,
.plusminus:after {
  content: "";
  display: block;
  background-color: #8b6e48;
  position: absolute;
  top: 50%;
  left: 0;
  transition: 0.35s;
  width: 100%;
  height: 2px;
}
.plusminus:before {
  transform: translatey(-50%);
}
.plusminus:after {
  transform: translatey(-50%) rotate(90deg);
}
.plus {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}
.brownstar {
  background: url(/img/content/borders/brown3.svg) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%;
  height: 5vw;
  margin: 0 0 5vw 0;
}
.brownstarvert {
  background: url(/img/content/borders/brown3vert.svg) no-repeat 50% 50%;
  background-size: 5vw auto;
  width: 5vw;
  flex: 0 0 5vw;
  margin: 0;
}

.treeborder {
  background: url(/img/content/illustrations/tree.svg) no-repeat 50% 50%;
  background-size: auto 100%;
  width: 100%;
  height: 7.5vw;
  margin: 0 0 5vw 0;
  position: relative;
}
.treeborder:before {
  content: "";
  position: absolute;
  top: 3.75vw;
  left: 27.5vw;
  height: 1px;
  width: 15vw;
  background: #8a6e4b;
}
.treeborder:after {
  content: "";
  position: absolute;
  top: 3.75vw;
  right: 27.5vw;
  height: 1px;
  width: 15vw;
  background: #8a6e4b;
}

.borderbreak {
  padding: 2vw 2vw 10vw 2vw;
}
.views {
  background-color: #c1cbbc;
}
.bigheading {
  text-align: center;
  padding-bottom: 5vw;
}
.bigheading img {
  height: 8vw;
}
.medheading {
  text-align: center;
  padding-bottom: 20px;
}
.medheading img {
  height: 5vw;
}
.smallheading {
  text-align: center;
  padding-bottom: 20px;
}
.smallheading img {
  height: 4vw;
  margin-left: auto;
  margin-right: auto;
}

.pageintro {
  font-size: 18px;
  line-height: 2em;
  margin-top: 3vw;
}
.sectionintro {
  margin: 0 auto 5vw auto;
  text-align: center;
  max-width: 850px;
  line-height: 2em;
}

.buttonlink {
  display: flex;
  align-items: center;
  position: relative;
  background: #8a6e4b;
  height: 32px;
  padding: 0 20px;
  margin: 0 18px;
  justify-content: center;
  border: 0;
  font-size: 13px;
  line-height: 1.3em;
}
.buttonlink:before {
  content: "";
  background: right center no-repeat url(/img/ui/buttonleftbrown.svg);
  background-size: auto 100%;
  position: absolute;
  left: -18px;
  width: 18px;
  height: 100%;
}
.buttonlink:after {
  content: "";
  background: left center no-repeat url(/img/ui/buttonrightbrown.svg);
  background-size: auto 100%;
  position: absolute;
  right: -18px;
  width: 18px;
  height: 100%;
}
.buttonlink.whitebutton {
  background: #fdfaf1;
  color: #8a6e4b;
}
.buttonlink.whitebutton:before {
  background-image: url(/img/ui/buttonleftwhite.svg);
}
.buttonlink.whitebutton:after {
  background-image: url(/img/ui/buttonrightwhite.svg);
}
.sectionintro .buttonlink {
  margin: 40px auto 0 auto;
  width: 200px;
}

.cgi {
  position: relative;
}
.cgi:before {
  content: "Computer generated image. Indicative only.";
  display: block;
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 500;
  font-size: 12px;
  line-height: 12px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
}
.homecgi.cgi:before {
  left: auto;
  right: 20px;
}

.susthdr {
  font-family: "Blackriver";
  font-size: 54px;
  color: #8a6e4b;
  letter-spacing: -0.73px;
  text-align: center;
  line-height: 62px;
}

/* #Page Styles
================================================== */

/**** home ****/
.homelogo {
  max-height: 45%;
  max-width: 45%;
}
.homeintro {
  text-align: center;
  font-size: 25px;
  line-height: 1.3em;
}
.homeborder {
  background: url(/img/content/borders/dark1.svg) repeat-x;
  background-size: auto 100%;
  width: 100%;
  height: 40px;
  margin: 3vw 0;
}

.ticker {
  position: relative;
  z-index: 500;
  width: 100%;
  overflow: hidden;
  color: #fdfaf1;
  background: rgba(138, 110, 75, 0.80);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticker-inner {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}

.tickercontent {
  padding: 0 40px;
  line-height: 40px;
  display: inline-block;
}

/* Animate only when .scrolling is applied */
.ticker.scrolling .ticker-inner {
  animation: ticker-loop linear infinite;
}

@keyframes ticker-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.tickerlink {font-size:0.8em;text-decoration: underline;}
.s0 .tickerlink {color:#fdfaf1}
.tickerlink:hover {text-decoration: none;}

.homesection {
  display: flex;
  align-items: center;
}
.homesection .text {
  text-align: center;
  padding: 0 3.5vw 0 1.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.homesection .text p {
  padding: 0 5vw;
  max-width: 300px;
}
.illustration {
  width: 10vw;
  margin-bottom: 2.5vw;
  max-height: 8vw;
}
.homesection .circleborder {
  width: 50%;
  margin-bottom: 40px;
}
.homesection .picholder {
  flex: 0 0 60vw;
}
.homesection .pic {
  height: 35vw;
  margin: 10px 0;
}

.homesection.leftpic {
  flex-direction: row-reverse;
}
.homesection.leftpic .text {
  padding: 0 1.5vw 0 3.5vw;
}

/**** lifestyle ****/
.xpcarousels {
  display: flex;
  align-items: center;
}
.xpcarousels .carouselholder {
  flex: 0 0 40vw;
  width: 40vw;
  justify-content: center;
}
.xpcarousels .pic {
  height: 14vw;
  display: flex;
  align-items: center;
}
.xpcarousels p {
  margin-left: auto;
  margin-right: auto;
  max-width: 200px;
}

/**** spirit ****/
.spiritvideos {
  display: flex;
  text-align: center;
  justify-content: space-between;
  padding: 0 5vw;
}
.spiritvideo {
  flex: 0 0 35vw;
  margin-bottom: 5vw;
  color: #fdfaf1;
}
.spiritvideo:hover {
  text-decoration: none;
}
.spiritvideo .pic {
  height: 25vw;
  position: relative;
}
.spiritvideo .pic:after {
  content: "";
  background: url(/img/ui/playbutton.svg) 50% 50% no-repeat;
  background-size: 100px auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background 0.2s;
}
.spiritvideo:hover .pic:after {
  background-size: 110px auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.spiritvideo .text {
  background: #8a6e4b;
  box-sizing: border-box;
  padding: 3vw;
  margin-bottom: 10px;
}
.spiritvideo .circleborder {
  margin-bottom: 2vw;
}

.social.traveltimes {
  margin-top: 7.5vw;
}
.social.traveltimes a {
  color: #20201e;
}
.social.traveltimes p {
  padding-right: 20px;
}
.social .travelheading {
  background: none !important;
  border-bottom: 1px solid #8a6e4b;
  padding-bottom: 5px;
  margin-bottom: 20px;
  display: inline-block;
  line-height: 1.3em;
}

.expand-content {
  max-height: 55px;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 0px;
}
/**** apartments ****/
.threesixties {
  padding-top: 5vw;
  margin-bottom: 5vw;
}
.threesixties a {
  text-decoration: none;
}
.threesixtycols {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.threesixtycol {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 25px;
}
.threesixties h3 {
  text-align: center;
  padding-top: 20px;
  font-family: Blackriver;
  font-size: 36px;
  color: #8a6e4b;
  letter-spacing: -0.49px;
  text-align: center;
  line-height: 41px;
  transition: color 0.2s;
}
.threesixties .threesixtycol:hover h3 {
  color: #fff;
}

.featurelist {
  display: flex;
  flex-wrap: wrap;
  margin: 5vw 0;
  padding: 0 7.5vw;
  justify-content: center;
}
.featurelist .feature {
  flex: 15vw;
  margin: 1.5vw;
  justify-content: center;
  text-align: center;
}
.featurelist .pic {
  width: 10vw;
  height: 10vw;
  background: #e5decf 50% 50% no-repeat;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}
.featurelist.team .pic {
  background-size: cover;
}
.featurelist .text {
  padding: 0 2.5vw;
}

.plansection {
  width: 100%;
  min-height: calc(90vh - 60px);
  position: relative;
}

.planholder {
  width: 100%;
  height: calc(90vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan {
  height: 85%;
  width: 90%;
  background: 50% 50% no-repeat;
  background-size: contain;
}

.planselect {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(90vh - 60px);
  font-size: 14px;
  line-height: 1.3em;
  width: 200px;
}
.roomgroup {
  overflow: hidden;
  max-height: 40px;
  pointer-events: all;
  border-bottom: 1px solid #8a6e4b;
  padding-bottom: 15px;
  box-sizing: border-box;
  transition: max-height 0.2s;
}
.onebedplan .onebedplan.roomgroup,
.twobedplan .twobedplan.roomgroup,
.threebedplan .threebedplan.roomgroup {
  max-height: 240px;
}
.typelabel {
  height: 40px;
  padding-left: 25px;
  position: relative;
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.typelabel:hover {
  text-decoration: underline;
}
.typelabel:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 12px;
  width: 16px;
  height: 16px;
  background: url(/img/ui/plus.svg) 50% 50% no-repeat;
  background-size: contain;
  transform-origin: 50% 50%;
  transition: transform 0.2s;
}
.roomtype {
  padding: 2px 0;
  margin: 0 0 5px 25px;
  display: inline-block;
  cursor: pointer;
}
.roomtype.active {
  font-weight: 500;
  border-bottom: 1px solid #8a6e4b;
}

.onebedplan .onebedplan .typelabel:before,
.twobedplan .twobedplan .typelabel:before,
.threebedplan .threebedplan .typelabel:before {
  transform: rotate(45deg);
}

.planlabel {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: all;
}
.planname {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.3em;
}

.plansection .towers {
  position: absolute;
  top: 0;
  right: 5%;
  width: 13vw;
}
.onebed * {
  fill: #896e4c;
}
.twobed * {
  fill: #6a4930;
}
.threebed * {
  fill: #413e45;
}
.towers .st1 {
  fill: #b6aba0;
}
.onebedplan .towermap .st0 {
  fill: #896e4c;
}
.twobedplan .towermap .st0 {
  fill: #6a4930;
}
.threebedplan .towermap .st0 {
  fill: #413e45;
}

.planareas:after {
  font-size: 0.8em;
  line-height: 1em;
  color: #20201e;
  margin-top: 10px; /*background:rgba(138,110,75,0.2);*/
  text-transform: none;
}

.plan1a .plan {
  background-image: url(/img/content/apartments/plans/type1a.png);
}

.plan1a .planname:before {
  content: "1 Bedroom type 1-a";
}
.plan1a .planareas:before {
  content: "48.4 sq m | 520 sq ft";
}
.plan1a .planareas:after {
  content: "Starting from £1,325pcm";
  display: block;
}

.plan1a #type1b,
.plan1a #type2a,
.plan1a #type2b,
.plan1a #type2c,
.plan1a #type2d,
.plan1a #type3,
.plan1a #type4a,
.plan1a #type4b,
.plan1a #type4c,
.plan1a #type5a,
.plan1a #type5b {
  opacity: 0;
}

.plan1a #s20,
.plan1a #s19,
.plan1a #s18,
.plan1a #s17,
.plan1a #s16,
.plan1a #s15,
.plan1a #s14,
.plan1a #s13,
.plan1a #s12,
.plan1a #s11,
.plan1a #s10,
.plan1a #s9,
.plan1a #s8,
.plan1a #s7,
.plan1a #s6,
.plan1a #s5,
.plan1a #s4,
.plan1a #s3,
.plan1a #s2,
.plan1a #s1,
.plan1a #n25,
.plan1a #n24,
.plan1a #n23,
.plan1a #n22,
.plan1a #n21,
.plan1a #n20,
.plan1a #n19,
.plan1a #n18,
.plan1a #n17,
.plan1a #n16,
.plan1a #n15,
.plan1a #n14,
.plan1a #n13,
.plan1a #n12,
.plan1a #n11,
.plan1a #n10,
.plan1a #n9,
.plan1a #n8,
.plan1a #n7,
.plan1a #n6,
.plan1a #n5,
.plan1a #n4,
.plan1a #n3,
.plan1a #n2,
.plan1a #n1 {
  fill: #896e4c;
}
.plan1a #ng {
  fill: #cac6c4;
}

.plan1b .plan {
  background-image: url(/img/content/apartments/plans/type1b.png);
}

.plan1b .planname:before {
  content: "1 Bedroom type 1-b";
}
.plan1b .planareas:before {
  content: "46.9 sq m | 505 sq ft";
}
.plan1b .planareas:after {
  content: "Starting from £1,325pcm";
  display: block;
}

.plan1b #type1a,
.plan1b #type2a,
.plan1b #type2b,
.plan1b #type2c,
.plan1b #type2d,
.plan1b #type3,
.plan1b #type4a,
.plan1b #type4b,
.plan1b #type4c,
.plan1b #type5a,
.plan1b #type5b {
  opacity: 0;
}

.plan1b #s19,
.plan1b #s18,
.plan1b #s17,
.plan1b #s16,
.plan1b #s15,
.plan1b #s14,
.plan1b #s13,
.plan1b #s12,
.plan1b #s11,
.plan1b #s10,
.plan1b #s9,
.plan1b #s8,
.plan1b #s7,
.plan1b #s6,
.plan1b #s5,
.plan1b #s4,
.plan1b #s3,
.plan1b #s2,
.plan1b #s1,
.plan1b #n25,
.plan1b #n24,
.plan1b #n23,
.plan1b #n22,
.plan1b #n21,
.plan1b #n20,
.plan1b #n19,
.plan1b #n18,
.plan1b #n17,
.plan1b #n16,
.plan1b #n15,
.plan1b #n14,
.plan1b #n13,
.plan1b #n12,
.plan1b #n11,
.plan1b #n10,
.plan1b #n9,
.plan1b #n8,
.plan1b #n7,
.plan1b #n6,
.plan1b #n5,
.plan1b #n4,
.plan1b #n3,
.plan1b #n2,
.plan1b #n1 {
  fill: #896e4c;
}
.plan1b #ng {
  fill: #cac6c4;
}

.plan2a .plan {
  background-image: url(/img/content/apartments/plans/type2a.png);
}

.plan2a .planname:before {
  content: "2 Bedroom type 2-a";
}
.plan2a .planareas:before {
  content: "62.8 sq m | 676 sq ft";
}
.plan2a .planareas:after {
  content: "Starting from £1,675pcm";
  display: block;
}

.plan2a #type1a,
.plan2a #type1b,
.plan2a #type2b,
.plan2a #type2c,
.plan2a #type2d,
.plan2a #type3,
.plan2a #type4a,
.plan2a #type4b,
.plan2a #type4c,
.plan2a #type5a,
.plan2a #type5b {
  opacity: 0;
}

.plan2a #s17,
.plan2a #s16,
.plan2a #s15,
.plan2a #s14,
.plan2a #s13,
.plan2a #s12,
.plan2a #s11,
.plan2a #s10,
.plan2a #s9,
.plan2a #s8,
.plan2a #s7,
.plan2a #s6,
.plan2a #s5,
.plan2a #s4,
.plan2a #s3,
.plan2a #s2,
.plan2a #s1,
.plan2a #n22,
.plan2a #n21,
.plan2a #n20,
.plan2a #n19,
.plan2a #n18,
.plan2a #n17,
.plan2a #n16,
.plan2a #n15,
.plan2a #n14,
.plan2a #n13,
.plan2a #n12,
.plan2a #n11,
.plan2a #n10,
.plan2a #n9,
.plan2a #n8,
.plan2a #n7,
.plan2a #n6,
.plan2a #n5,
.plan2a #n4,
.plan2a #n3,
.plan2a #n2,
.plan2a #n1 {
  fill: #6a4930;
}

.plan2a #s18,
.plan2a #n23 {
  fill: #cac6c4;
}

.plan2b .plan {
  background-image: url(/img/content/apartments/plans/type2b.png);
}

.plan2b .planname:before {
  content: "2 Bedroom type 2-b";
}
.plan2b .planareas:before {
  content: "64 sq m | 689 sq ft";
}
.plan2b .planareas:after {
  content: "Starting from £1,675pcm";
  display: block;
}

.plan2b #type1a,
.plan2b #type1b,
.plan2b #type2a,
.plan2b #type2c,
.plan2b #type2d,
.plan2b #type3,
.plan2b #type4a,
.plan2b #type4b,
.plan2b #type4c,
.plan2b #type5a,
.plan2b #type5b {
  opacity: 0;
}

.plan2b #s17,
.plan2b #s16,
.plan2b #s15,
.plan2b #s14,
.plan2b #s13,
.plan2b #s12,
.plan2b #s11,
.plan2b #s10,
.plan2b #s9,
.plan2b #s8,
.plan2b #s7,
.plan2b #s6,
.plan2b #s5,
.plan2b #s4,
.plan2b #s3,
.plan2b #s2,
.plan2b #s1,
.plan2b #n22,
.plan2b #n21,
.plan2b #n20,
.plan2b #n19,
.plan2b #n18,
.plan2b #n17,
.plan2b #n16,
.plan2b #n15,
.plan2b #n14,
.plan2b #n13,
.plan2b #n12,
.plan2b #n11,
.plan2b #n10,
.plan2b #n9,
.plan2b #n8,
.plan2b #n7,
.plan2b #n6,
.plan2b #n5,
.plan2b #n4,
.plan2b #n3,
.plan2b #n2,
.plan2b #n1 {
  fill: #6a4930;
}

.plan2c .plan {
  background-image: url(/img/content/apartments/plans/type2c.png);
}

.plan2c .planname:before {
  content: "2 Bedroom type 2-c";
}
.plan2c .planareas:before {
  content: "68 sq m | 732 sq ft";
}
.plan2c .planareas:after {
   content: "Starting from £1,820pcm";
  display: block;
}

.plan2c #type1a,
.plan2c #type1b,
.plan2c #type2a,
.plan2c #type2b,
.plan2c #type2d,
.plan2c #type3,
.plan2c #type4a,
.plan2c #type4b,
.plan2c #type4c,
.plan2c #type5a,
.plan2c #type5b {
  opacity: 0;
}

.plan2c #s19,
.plan2c #s18,
.plan2c #s17,
.plan2c #s16,
.plan2c #s15,
.plan2c #s14,
.plan2c #s13,
.plan2c #s12,
.plan2c #s11,
.plan2c #s10,
.plan2c #s9,
.plan2c #s8,
.plan2c #s7,
.plan2c #s6,
.plan2c #s5,
.plan2c #s4,
.plan2c #s3,
.plan2c #s2,
.plan2c #s1,
.plan2c #n24,
.plan2c #n23,
.plan2c #n22,
.plan2c #n21,
.plan2c #n20,
.plan2c #n19,
.plan2c #n18,
.plan2c #n17,
.plan2c #n16,
.plan2c #n15,
.plan2c #n14,
.plan2c #n13,
.plan2c #n12,
.plan2c #n11,
.plan2c #n10,
.plan2c #n9,
.plan2c #n8,
.plan2c #n7,
.plan2c #n6,
.plan2c #n5,
.plan2c #n4,
.plan2c #n3,
.plan2c #n2,
.plan2c #n1 {
  fill: #6a4930;
}

.plan2d .plan {
  background-image: url(/img/content/apartments/plans/type2d.png);
}

.plan2d .planname:before {
  content: "2 Bedroom type 2-d";
}
.plan2d .planareas:before {
  content: "64.1 sq m | 690 sq ft";
}
.plan2d .planareas:after {
  content: "Starting from £1,675pcm";
  display: block;
}

.plan2d #type1a,
.plan2d #type1b,
.plan2d #type2a,
.plan2d #type2b,
.plan2d #type2c,
.plan2d #type3,
.plan2d #type4a,
.plan2d #type4b,
.plan2d #type4c,
.plan2d #type5a,
.plan2d #type5b {
  opacity: 0;
}

.plan2d #s18,
.plan2d #s17,
.plan2d #s16,
.plan2d #s15,
.plan2d #s14,
.plan2d #s13,
.plan2d #s12,
.plan2d #s11,
.plan2d #s10,
.plan2d #s9,
.plan2d #s8,
.plan2d #s7,
.plan2d #s6,
.plan2d #s5,
.plan2d #s4,
.plan2d #s3,
.plan2d #s2,
.plan2d #s1,
.plan2d #n23,
.plan2d #n22,
.plan2d #n21,
.plan2d #n20,
.plan2d #n19,
.plan2d #n18,
.plan2d #n17,
.plan2d #n16,
.plan2d #n15,
.plan2d #n14,
.plan2d #n13,
.plan2d #n12,
.plan2d #n11,
.plan2d #n10,
.plan2d #n9,
.plan2d #n8,
.plan2d #n7,
.plan2d #n6,
.plan2d #n5,
.plan2d #n4,
.plan2d #n3,
.plan2d #n2,
.plan2d #n1 {
  fill: #6a4930;
}

.plan3 .plan {
  background-image: url(/img/content/apartments/plans/type3.png);
}

.plan3 .planname:before {
  content: "3 Bedroom type 3";
}
.plan3 .planareas:before {
  content: "80.2 sq m | 863 sq ft";
}
.plan3 .planareas:after {
  content: "Starting from £2,250pcm";
  display: block;
}

.plan3 #type1a,
.plan3 #type1b,
.plan3 #type2a,
.plan3 #type2b,
.plan3 #type2c,
.plan3 #type2d,
.plan3 #type4a,
.plan3 #type4b,
.plan3 #type4c,
.plan3 #type5a,
.plan3 #type5b {
  opacity: 0;
}

.plan3 #s19,
.plan3 #s18,
.plan3 #s17,
.plan3 #s16,
.plan3 #s15,
.plan3 #s14,
.plan3 #s13,
.plan3 #s12,
.plan3 #s11,
.plan3 #s10,
.plan3 #s9,
.plan3 #s8,
.plan3 #s7,
.plan3 #s6,
.plan3 #s5,
.plan3 #s4,
.plan3 #s3,
.plan3 #s2,
.plan3 #s1,
.plan3 #n23,
.plan3 #n22,
.plan3 #n21,
.plan3 #n20,
.plan3 #n19,
.plan3 #n18,
.plan3 #n17,
.plan3 #n16,
.plan3 #n15,
.plan3 #n14,
.plan3 #n13,
.plan3 #n12,
.plan3 #n11,
.plan3 #n10,
.plan3 #n9,
.plan3 #n8,
.plan3 #n7,
.plan3 #n6,
.plan3 #n5,
.plan3 #n4,
.plan3 #n3,
.plan3 #n2,
.plan3 #n1 {
  fill: #413e45;
}

.plan4a .plan {
  background-image: url(/img/content/apartments/plans/type4a.png);
}

.plan4a .planname:before {
  content: "3 Bedroom type 4-a";
}
.plan4a .planareas:before {
  content: "80.2 sq m | 863 sq ft";
}
.plan4a .planareas:after {
  content: "Starting from £2,465pcm";
  display: block;
}

.plan4a #type1a,
.plan4a #type1b,
.plan4a #type2a,
.plan4a #type2b,
.plan4a #type2c,
.plan4a #type2d,
.plan4a #type3,
.plan4a #type4b,
.plan4a #type4c,
.plan4a #type5a,
.plan4a #type5b {
  opacity: 0;
}

.plan4a #s18,
.plan4a #n23 {
  fill: #413e45;
}

.plan4b .plan {
  background-image: url(/img/content/apartments/plans/type4b.png);
}

.plan4b .planname:before {
  content: "3 Bedroom type 4-b";
}
.plan4b .planareas:before {
  content: "80.1 sq m | 863 sq ft";
}
.plan4b .planareas:after {
  content: "Starting from £2,465pcm";
  display: block;
}

.plan4b #type1a,
.plan4b #type1b,
.plan4b #type2a,
.plan4b #type2b,
.plan4b #type2c,
.plan4b #type2d,
.plan4b #type3,
.plan4b #type4a,
.plan4b #type4c,
.plan4b #type5a,
.plan4b #type5b {
  opacity: 0;
}

.plan4b #s18,
.plan4b #n23 {
  fill: #413e45;
}

.plan4c .plan {
  background-image: url(/img/content/apartments/plans/type4c.png);
}

.plan4c .planname:before {
  content: "3 Bedroom type 4-c";
}
.plan4c .planareas:before {
  content: "79.5 sq m | 855 sq ft";
}
.plan4c .planareas:after {
  content: "Starting from £2,465pcm";
  display: block;
}

.plan4c #type1a,
.plan4c #type1b,
.plan4c #type2a,
.plan4c #type2b,
.plan4c #type2c,
.plan4c #type2d,
.plan4c #type3,
.plan4c #type4a,
.plan4c #type4b,
.plan4c #type5a,
.plan4c #type5b {
  opacity: 0;
}

.plan4c #s19,
.plan4c #n24 {
  fill: #413e45;
}

.plan5a .plan {
  background-image: url(/img/content/apartments/plans/type5a.png);
}

.plan5a .planname:before {
  content: "3 Bedroom type 5-a";
}
.plan5a .planareas:before {
  content: "116.7 sq m | 1,257 sq ft";
}
.plan5a .planareas:after {
  content: "Currently all reserved";
  display: block;
}

.plan5a #type1a,
.plan5a #type1b,
.plan5a #type2a,
.plan5a #type2b,
.plan5a #type2c,
.plan5a #type2d,
.plan5a #type3,
.plan5a #type4a,
.plan5a #type4b,
.plan5a #type4c,
.plan5a #type5b {
  opacity: 0;
}

.plan5a #s19,
.plan5a #n25 {
  fill: #413e45;
}

.plan5b .plan {
  background-image: url(/img/content/apartments/plans/type5b.png);
}

.plan5b .planname:before {
  content: "3 Bedroom type 5-b";
}
.plan5b .planareas:before {
  content: "133.8 sq m | 1,440 sq ft";
}
.plan5b .planareas:after {
  content: "Currently all reserved.";
  display: block;
}

.plan5b #type1a,
.plan5b #type1b,
.plan5b #type2a,
.plan5b #type2b,
.plan5b #type2c,
.plan5b #type2d,
.plan5b #type3,
.plan5b #type4a,
.plan5b #type4b,
.plan5b #type4c,
.plan5b #type5a {
  opacity: 0;
}

.plan5b #s20,
.plan5b #n25 {
  fill: #413e45;
}

.planfooter .buttonlink {
  display: none;
}

.plan1a .planfooter .buttonlink.plan1a,
.plan1b .planfooter .buttonlink.plan1b,
.plan2a .planfooter .buttonlink.plan2a,
.plan2b .planfooter .buttonlink.plan2b,
.plan2c .planfooter .buttonlink.plan2c,
.plan2d .planfooter .buttonlink.plan2d,
.plan3 .planfooter .buttonlink.plan3,
.plan4a .planfooter .buttonlink.plan4a,
.plan4b .planfooter .buttonlink.plan4b,
.plan4c .planfooter .buttonlink.plan4c,
.plan5a .planfooter .buttonlink.plan5a,
.plan5b .planfooter .buttonlink.plan5b {
  display: flex;
}

.plansection .elevation {
  position: absolute;
  bottom: 0;
  right: 5%;
  width: 12vw;
}
.elevation .st0 {
  fill: none;
  stroke: #896e4c;
  stroke-width: 0.508;
}
.elevation .st1 {
  fill: #896e4c;
}
.onebedplan .elevation .st0 {
  stroke: #896e4c;
}
.onebedplan .elevation .st1 {
  fill: #896e4c;
}
.twobedplan .elevation .st0 {
  stroke: #6a4930;
}
.twobedplan .elevation .st1 {
  fill: #6a4930;
}
.threebedplan .elevation .st0 {
  stroke: #413e45;
}
.threebedplan .elevation .st1 {
  fill: #413e45;
}

.planfooter {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 220px;
}
.planfooter .buttonlink {
  margin-bottom: 20px;
}
.plansmallprint {
  font-size: 10px;
  line-height: 1.3em;
}

.apartsection {
  min-height: 80vh;
  display: flex;
  margin-bottom: 5vw;
}
.apartsection.leftpic {
  flex-direction: row-reverse;
}
.apartsection .text {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.apartsection .pic {
  flex: 0 0 65vw;
  background: 50% 50% no-repeat;
  background-size: cover;
}
.apartsection.rightpic .text {
  margin: 0 40px 0 10vw;
}
.apartsection.leftpic .text {
  margin: 0 10vw 0 40px;
}
.apartsection.middlepic {
  background: 50% 50% no-repeat;
  background-size: cover;
  width: 55vw;
  margin: 0 auto 5vw auto;
}
.apartsection.fullpic {
  background: 50% 50% no-repeat;
  background-size: cover;
  height: 90vh;
}

.plancontrols {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  width: 40px;
  z-index: 1000;
}
.plancontrols a {
  flex: 33px;
  width: 33px;
  background: bottom right no-repeat;
  background-size: contain;
  cursor: pointer;
  margin: 3px 0;
}
.plancontrols a.floorplan-zoom-in {
  background-image: url(/img/ui/planzoom/zoomin.svg);
}
.plancontrols a.floorplan-zoom-out {
  background-image: url(/img/ui/planzoom/zoomout.svg);
  background-position: 50% 50%;
}
.plancontrols a.floorplan-zoom-reset {
  background-image: url(/img/ui/planzoom/zoomreset.svg);
}

/**** location ****/

.locationmap {
  width: 100%;
  height: 80vh;
  position: relative;
  margin-bottom: 5vw;
}
.locationmap .mapholder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#map {
  width: 100%;
  height: 100%;
}

.locationcarousel {
  width: 100%;
}
.locationcarousel .slide {
  width: 45vw;
  margin: 0 1vw;
}
.locationcarousel .pic {
  height: 70vh;
}
.locationcarousel p {
  margin: 0;
}

.traveltimes {
  display: flex;
  font-size: 14px;
  line-height: 1.4em;
  margin: 3vw 0 5vw 0;
}
.traveltimes .brownpatternborder1 {
  margin-bottom: 10px;
}
.traveltable {
  flex: 0 0;
  flex-basis: calc((100% - 4px - 9vw) / 4);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.travelheading {
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background: right center no-repeat;
  background-size: auto 20px;
  font-weight: 500;
  width: 100%;
}
.walk .travelheading {
  background-image: url(/img/content/location/icons/walk.svg);
}
.tram .travelheading {
  background-image: url(/img/content/location/icons/tram.svg);
}
.drive .travelheading {
  background-image: url(/img/content/location/icons/car.svg);
}
.train .travelheading {
  background-image: url(/img/content/location/icons/train.svg);
}
.travelborder {
  margin: 0 1.5vw;
  background: #8a6e4b;
  flex: 0 0 1px;
}

.traveltable:last-child .travelheading:after {
  display: none;
}
.traveltable table {
  width: 100%;
  margin: 0;
}
.traveltable table td {
  padding: 12px 0;
}

.dogwalks {
  display: flex;
  justify-content: space-around;
  padding: 0 0 5vw 0;
  margin: 5vw 0 0 0;
}
.dogintro {
  text-align: center;
  margin: 20px auto;
}
.dogcarousel.dogwalks .slide {
  background: #d9c3c0;
  flex: 0 0 35vw;
  margin: 0 1vw;
}
.homesection .dogcarousel.dogwalks .pic {
  height: 20vw;
  width: 100%;
}

/**** faqs ****/
.faqs {
  font-size: 14px;
  line-height: 1.4em;
}
.faqs a {
  font-weight: 500;
  text-decoration: underline;
  color: #20201e;
}
.questionholder {
  border-bottom: 1px solid #8a6e4b;
  width: calc(100% - 100px - 2vw);
}
.question {
  padding: 20px 40px 20px 20px;
  font-size: 1.1em;
  line-height: 1.3em;
  position: relative;
  cursor: pointer;
}
.question:hover {
  text-decoration: underline;
}
.question:after {
  content: "";
  display: block;
  background: 50% 50% no-repeat url(/img/ui/plus.svg);
  background-size: contain;
  transform-origin: 50% 50%;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  transition: transform 0.2s;
}
.active .question:after {
  transform: rotate(45deg);
}
.answer {
  margin-bottom: 30px;
  max-width: 900px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
  padding: 0 20px;
}
.answer:last-child {
  margin-bottom: 0;
}
.active .answer {
  max-height: 900px;
}

/**** contact ****/
.s6 .enquire {
  display: none;
}
.contactintro {
  margin-top: 0;
  padding-bottom: 0;
}
.s6 a {
  color: #6a4930;
}

.contactbanner {display: flex;
width: 100%;
padding: 10px 0px;
justify-content: center;
align-items: center;
gap: 10px;
border-top: 1px solid #8A6E4B;
border-bottom: 1px solid #8A6E4B;margin-bottom:5vw}

.w-input,
.w-select {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  font-family: "Gotham A", "Gotham B";
  font-style: normal;
  font-weight: 400;
}
.w-input:-moz-placeholder,
.w-select:-moz-placeholder {
  color: #999;
}
.w-input::-moz-placeholder,
.w-select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.w-input:-ms-input-placeholder,
.w-select:-ms-input-placeholder {
  color: #999;
}
.w-input::-webkit-input-placeholder,
.w-select::-webkit-input-placeholder {
  color: #999;
}
.w-input:focus,
.w-select:focus {
  /*border-color: #3898EC;*/
  outline: 0;
}
.w-input[disabled],
.w-select[disabled],
.w-input[readonly],
.w-select[readonly],
fieldset[disabled] .w-input,
fieldset[disabled] .w-select {
  cursor: not-allowed;
}
.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eeeeee;
}

.w-select {
  background-color: #f3f3f3;
}
.w-select[multiple] {
  height: auto;
}
.w-form-label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}

.enquire-block {
  width: 100%;
  background-image: url("../images/enquire-pattern.svg");
  background-position: 50%;
  background-repeat: repeat-x;
  background-size: auto;
  justify-content: center;
  margin-top: 100px;
  display: flex;
}

.enquire-header {
  width: 360px;
  height: 52px;
  background-image: url("../images/enquire-button.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.enquire-text {
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 50px;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
}

form {
  width: 100%;
  text-align: center;
}

.enquire-form {
  width: 900px;
  margin-top: 40px;
}

.enquire-wrapper {
  margin-top: 60px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20vw;
}

.w-input,
.w-select {
  flex: 0 0 30%;
}

.input-text-field {
  opacity: 1;
  color: #272727;
  letter-spacing: 0.8px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px #000;
  border-bottom: 1px dotted #272727;
  margin-bottom: 25px;
  padding-left: 0;
  box-sizing: border-box;
  /*font-weight: 500;*/
}

.input-text-field::-ms-input-placeholder {
  color: #272727;
}

.input-text-field::placeholder {
  color: #272727;
}

.input-dropdown {
  letter-spacing: 0.8px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px #000;
  border-bottom-style: dotted;
  margin-bottom: 25px;
  padding-left: 0;
  /*font-weight: 500;*/
}

.input-textarea {
  background-color: rgba(0, 0, 0, 0);
  border: 1px dotted #000;
  box-sizing: border-box;
  flex: 0 0 100%;
  height: 10vw;
  margin-top: 30px;
}

.input-textarea::-ms-input-placeholder {
  color: #272727;
  letter-spacing: 0.8px;
}

.input-textarea::placeholder {
  color: #272727;
  letter-spacing: 0.8px;
}

.submit-button {
  /*width: 226px;
  height: 41px;*/
  cursor: pointer;
  margin: 50px auto 5vw auto;
  padding: 0 40px;
}

.submit-button:hover {
  text-decoration: underline;
}

/**** privacy ****/
.textpage {
  padding: 120px 0;
}
.textpage .pagecontent {
  padding: 0 10vw 0 15vw;
  max-width: 800px;
}
.textpage a:not(.enquire) {
  color: #8a6e4b;
}

/**** flythrough ****/
.flythroughvideo {
  padding: 20px 10vw 10vw 10vw;
  text-align: center;
}
.flythroughvideo img {
  width: 120px;
  margin: 0 auto 40px auto;
}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {
  display: none !important;
}
.pp_social {
  display: none !important;
}
.pp_description {
  display: none !important;
}

.smallText {
  font-size: 11px;
}
.smallprint {
  font-size: 11px;
  color: #bbbdc0;
}
.smallprint a {
  color: #bbbdc0;
}
.padTop {
  margin-top: 30px;
}
.largeText {
  font-size: 13px;
}

.superscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: -0.4em;
}
.subscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: 0.4em;
}

.vmiddle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.caps {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.num {
  text-align: right;
}

.mobileshow {
  display: none;
}
.spiritheaders {
  font-family: "BlackRiver";
  font-size: 36px;
  color: #8a6e4b;
  letter-spacing: -0.49px;
  text-align: center;
  line-height: 41px;
  font-weight: bold;
  text-align: center;
}

.txtcenter {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  border-bottom: none;
  font-family: "Blackriver";
  font-size: 36px;
  color: #8a6e4b;
  letter-spacing: -0.49px;
  text-align: center;
  line-height: 41px;
}

/* #Media Queries
================================================== */

/* biggerest desktop */
@media only screen and (max-width: 1620px) {
  /*.contactpage {flex-direction:column}
		.professional {display:flex;}
		.professionaltop {flex:0 0 45%}*/
  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }
}

/* biggest desktop */
@media only screen and (max-width: 1280px) {
}

/* bigger desktop */
@media only screen and (max-width: 1229px) {
  .enquire-wrapper {
    padding: 0 10vw;
  }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1099px) {
  body {
    font-size: 13px;
    line-height: 1.3em;
  }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }

  .plus {
    border-bottom: 1px #8a6e4b solid;
  }

  .traveltable.walk {
    padding-top: 50px;
  }
  .sectionintro {
    font-size: 18px;
    line-height: 1.8em;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  .medheading img {
    height: 7vw;
  }
  .smallheading img {
    height: 5.5vw;
  }

  .fullgallery {
    height: 60vh;
  }
  .lifestylegallery {
    width: 50vw;
    height: 60vh;
  }
  .homesection .picholder {
    flex: 0 0 50vw;
  }
  .homesection .lifestylegallery .pic {
    height: 60vh;
    margin: 0;
  }

  /**** footer ****/

  /**** home ****/
  .homeintro {
    font-size: 20px;
    line-height: 1.8em;
  }

  /**** lifestyle ****/
  .lifecarousel .slide,
  .dogcarousel .slide {
    width: 50vw;
  }

  /**** apartments ****/
  .planholder {
    justify-content: flex-end;
  }
  .plan {
    width: 50vw;
    margin-right: 10vw;
  }

  .featurelist .pic {
    width: 15vw;
    height: 15vw;
  }

  /**** location ****/
  .locationcarousel .slide {
    width: 80vw;
  }
  .carousel .slick-arrow.slick-prev {
    right: 70%;
  }
  .carousel .slick-arrow.slick-next {
    left: 70%;
  }
  .carousel .slick-dots {
    height: 60px;
  }
  .carousel .slick-arrow {
    height: 60px;
  }

  .traveltimes {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .traveltable {
    flex-basis: calc((100% - 4px - 9vw) / 2);
  }
  .traveltable table {
    margin-bottom: 20px;
  }
  .traveltimes .travelborder:nth-child(4) {
    display: none;
  }

  .dogwalks {
    padding-bottom: 0;
  }
  .homesection .dogcarousel.dogwalks .pic {
    height: 30vw;
  }

  /**** contact ****/
  .w-input,
  .w-select {
    flex: 0 0 48%;
  }
  .input-textarea {
    flex: 0 0 100%;
  }

  .homesection.contactmap {
    flex-direction: column;
  }
  .homesection.contactmap .picholder {
    margin-top: 20px;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  .mobileshow {
    display: block;
  }
  .mobilehide {
    display: none !important;
  }

  .pagecontent {
    padding-top: 60px;
  }
  .pagebanner {
    height: calc(100vh - 60px);
  }
  .enquire {
    width: 50px;
    height: 50px;
    right: 5vw;
    bottom: 5vw;
  }

  .marginsection {
    margin-left: 5vw;
    margin-right: 5vw;
    padding-bottom: 10vw;
  }
  
  .contactintro {
  padding-bottom:0;
  }
  
  .coloursection {
    padding-top: 10vw;
    padding-bottom: 10vw;
    margin-bottom: 10vw;
  }

  .bigheading img {
    height: 14vw;
  }
  .medheading img {
    height: 14vw;
  }
  .smallheading img {
    height: 14vw;
  }

  .sectionintro {
    font-size: 14px;
    line-height: 1.8em;
    margin-bottom: 7.5vw;
  }

  .brownleafbg,
  .greenleafbg,
  .pinkleafbg {
    background-attachment: scroll;
  }

  /**** galleries ****/
  .marginsection.gallerymargin {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 100px;
  }
  .fullgallery {
    height: 45vh;
  }
  .fullgallery .slick-dots {
    height: 60px;
  }
  .fullgallery .slick-arrow {
    width: 40px;
    height: 40px;
  }
  .fullgallery .slick-arrow.slick-next,
  .fullgallery .slick-arrow.slick-prev {
    top: calc(100% + 10px);
  }
  .carousel .slick-arrow.slick-prev {
    right: auto;
    left: 5vw;
  }
  .carousel .slick-arrow.slick-next {
    left: auto;
    right: 5vw;
  }

  .lifestylegallery {
    width: 100vw;
    height: 45vh;
    margin-bottom: 60px;
  }
  .fullgallery.lifestylegallery .slick-dots {
    height: 60px;
  }
  .homesection .picholder {
    flex: 0 0 100vw;
  }
  .homesection .lifestylegallery .pic {
    height: 45vh;
    margin: 0;
  }

  /**** borders ****/
  .blackpatternborder {
    margin-bottom: 10vw;
  }
  .circleborder.smallborder {
    width: 50vw;
  }
  .brownstar {
    height: 20vw;
  }
  .borderbreak {
    padding: 5vw 5vw 15vw 5vw;
  }
  .circleborder.vertical {
    width: 50vw;
    height: 1px;
    margin-top: 10vw;
    margin-bottom: 10vw;
  }
  .circleborder.vertical:before {
    left: calc(25vw - 5px);
    top: -5px;
  }
  .brownstarvert {
    background: url(/img/content/borders/brown3.svg) no-repeat 50% 50%;
    background-size: auto 100%;
    width: 100%;
    height: 20vw;
    flex: 0 0 20vw;
    margin: 5vw 0;
  }

  .treeborder {
    height: 20vw;
    margin: 0 0 5vw 0;
    position: relative;
  }
  .treeborder:before {
    content: "";
    position: absolute;
    top: 10vw;
    left: 19vw;
    height: 2px;
    width: 15vw;
    background: #8a6e4b;
  }
  .treeborder:after {
    content: "";
    position: absolute;
    top: 10vw;
    right: 19vw;
    height: 2px;
    width: 15vw;
    background: #8a6e4b;
  }

  /**** nav ****/
  .navlogo {
    left: 5vw;
  }
  .navbutton {
    right: 5vw;
  }
  .navholder .navborderholder {
    width: calc(100% - 10vw);
    display: none;
  }
  .nav .circleborder {
    width: 40vw;
  }

  /**** footer ****/
  .navborderholder {
    width: calc(100% - 10vw);
    margin-top: 5vw;
  }
  .footer {
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 10vw;
    flex-direction: column;
  }
  .footer .logos {
    justify-content: space-between;
  }
  .footer .logos img {
    margin: 20px 0 0 0;
  }

  /**** home ****/
  .homeborder {
    margin: 5vw 0;
  }
  .homesection,
  .homesection.leftpic {
    flex-direction: column;
  }
  .homesection .text,
  .homesection.leftpic .text {
    padding-top: 10vw;
    padding-bottom: 10vw;
  }
  .illustration {
    width: 20vw;
    max-height: 16vw;
    margin-bottom: 5vw;
  }
  .homesection .picholder {
    width: 100%;
  }
  .homesection.marginsection {
    margin-left: 0;
    margin-right: 0;
  }
  .homesection .pic {
    height: 80vw;
  }

  /**** lifestyle ****/
  .lifecarousel .slide,
  .dogcarousel .slide {
    width: 90vw;
    padding-bottom: 10vw;
  }
  .homesection .lifecarousel .pic,
  .homesection .dogcarousel .pic {
    height: 60vw;
    margin-bottom: 10vw;
  }

  .xpcarousels {
    flex-direction: column;
  }
  .xpcarousels .carouselholder {
    width: 90vw;
    flex: 1 1 auto;
  }
  .xpcarousels .pic {
    height: 25vw;
  }

  /**** spirit ****/
  .spiritvideos {
    flex-direction: column;
    padding-bottom: 10vw;
  }
  .spiritvideo .pic {
    height: 60vw;
  }
  .spiritvideo .circleborder {
    margin-bottom: 7.5vw;
  }
  .spiritvideo .text {
    padding-top: 10vw;
  }

  /**** apartments ****/
  .threesixties {
    padding-top: 10vw;
  }
  .threesixtycols {
    flex-direction: column;
  }
  .threesixties img {
    width: 50vw;
  }
  .threesixties h3 {
    font-size: 26px;
    line-height: 1.1em;
  }

  .featurelist {
    padding: 0 5vw;
  }
  .featurelist .feature {
    flex: 0 0 28vw;
    margin: 5vw;
  }
  .featurelist .pic {
    width: 25vw;
    height: 25vw;
  }

  .featurelist.team .feature {
    flex: 0 0 50vw;
  }
  .featurelist.team .pic {
    width: 35vw;
    height: 35vw;
  }

  .plansection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .planlabel {
    position: relative;
    background: #fff right 20px center url(/img/ui/expand.svg) no-repeat;
    box-sizing: border-box;
    padding: 3vw;
    border-bottom: 1px solid #8a6e4b;
    cursor: pointer;
    pointer-events: all;
    flex: 0 0 100%;
  }
  .planname {
    font-size: 16px;
    line-height: 26px;
  }
  .planareas {
    font-size: 13px;
    line-height: 20px;
  }

  .planselect {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: auto;
    top: 70px;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 0;
    transition: max-height 0.2s;
    z-index: 1000;
  }
  .planopen.planselect {
    max-height: 600px;
  }
  .typelabel {
    pointer-events: all;
    height: 35px;
  }
  .typelabel:before {
    display: none !important;
  }
  .roomgroup {
    border: none;
    max-height: none;
    padding-bottom: 10px;
  }

  .planholder {
    height: 120vw;
    margin: 20px 0;
  }
  .plan {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .plansection .towers {
    position: relative;
    flex: 0 0 45%;
  }
  .plansection .elevation {
    position: relative;
    flex: 0 0 30%;
  }
  .plansection .planfooter {
    position: relative;
    flex: 0 0 100%;
    text-align: center;
    margin: 20px 0 0 0;
  }

  /**** location ****/
  .locationmap {
    height: 100vw;
  }

  .traveltable {
    flex: 0 0 100%;
    font-size: 12px;
    margin-top: 20px;
  }
  .traveltable table td {
    padding: 8px 0;
  }
  .travelborder {
    display: none;
  }

  .homesection .dogcarousel.dogwalks .pic {
    height: 50vw;
  }

  /**** faqs ****/
  .questionholder {
    width: 100%;
  }
  .question {
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 10px;
  }
  .question:after {
    right: 0px;
  }
  .answer {
    padding: 0 10px;
  }

  /**** contact ****/
  .w-input,
  .w-select {
    flex: 0 0 100%;
  }
  .input-textarea {
    height: 200px;
    margin-top: 20px;
  }
  .homesection.contactmap .picholder {
    margin: 0;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /**** nav ****/
  .nav a {
    margin: 5px 10px;
    flex-basis: calc(25% - 20px);
  }
  .nav a .pic {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
  }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

/*@font-face {
  font-family: "CircularXXWeb-Regular";
  src: url("/fonts/CircularXXWeb-Regular.woff") format("woff");
}

@font-face {
  font-family: "CircularXXWeb-Regular";
  src: url("/fonts/CircularXXWeb-Regular.woff2") format("woff2");
}

@font-face {
	    font-family: 'Noe Display Bold';
	    src: url('/fonts/Noe Display Bold.eot');
	    src: url('/fonts/Noe Display Bold.eot?iefix') format('eot'),
	         url('/fonts/Noe Display Bold.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }*/

@font-face {
  font-family: "Portrait Web";
  src: url("/fonts/Portrait-Regular-Web.woff2") format("woff2"),
    url("/fonts/Portrait-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Portrait Web";
  src: url("/fonts/Portrait-LightItalic-Web.woff2") format("woff2"),
    url("/fonts/Portrait-LightItalic-Web.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-stretch: normal;
}

@font-face {
  font-family: "Portrait Web";
  src: url("/fonts/Portrait-Light-Web.woff2") format("woff2"),
    url("/fonts/Portrait-Light-Web.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
  font-family: "Blackriver";
  src: url("/fonts/Blackriver-Bold.woff2") format("woff2"),
    url("/fontsBlackriver-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.siren {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem 0 0 0;
  a {
    color: black;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    p {
      font-size: 13px;
    }
  }
}

.greviews {
  background-color: white;
  width: 170px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 15px;
  border-radius: 10px;
  margin-top: 30px;
}

.greviews .gbrand {
  width: 24px;
  height: 24px;
}

.greviews .stars {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 10px;
  font-size: 25px;
  font-weight: bold;
}

.greviews .stars p {
  margin: 0 5px 0;
  padding: 0;
}

.greviews .stars img {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}

.greviews a {
  text-decoration: underline;
  margin-top: 5px;
}
.right-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right-panel img {
  max-width: 200px;
}

.footercol .logos {
  flex-direction: row !important;
}

.footercol .logos img {
  max-width: 100px;
}

.footercol .logos img:last-child {
  margin-left: 0;
}