/* Media queries */
/* seems the above was NOT being applied when width = 375 */
/*@color_gray: darkgray;*/
/*https://fonts.google.com/specimen/Open+Sans*/
/*Colors to match bg sprite for the map markers */
/* MIXINS */
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.box_shadow_on_black {
  box-shadow: 0px 4px 14px rgba(255, 255, 255, 0.2);
}
.box_shadow_on_black_intense {
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.12), 0 8px 16px rgba(255, 255, 255, 0.22);
}
.card-1-hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-2 {
  box-shadow: 0 6px 10px 0 #666666a3;
  transition: all 0.3s ease-in-out;
}
.card-2:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.visually-hidden {
  position: absolute;
  left: -100vw;
  /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}
#banner_notice {
  height: 35px;
  background-color: #000000;
  color: #FFFFFF;
  text-align: center;
}
#banner_notice p {
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0;
  margin-top: 2px;
}
#banner_notice a.remove {
  position: absolute;
  right: 10px;
  transition: all 0.3s ease-in-out;
}
#banner_notice a.remove:hover {
  color: #CBB88C;
  cursor: pointer;
}
#banner_notice p {
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: shinningtext 11s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
/*https://www.sarasoueidan.com/blog/creative-list-effects/*/
#banner_notice.removed-item {
  animation: removed-item-animation 1.5s cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
}
@keyframes removed-item-animation {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
/*https://codepen.io/FrankieDoodie/pen/dgVGad*/
@keyframes shinningtext {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
.navbar_logo {
  border: solid 1px #FFFFFF;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  text-align: center;
  margin-right: 15px;
}
.navbar_strapline {
  font-size: 0.8rem;
  font-weight: 300;
  text-transform: uppercase;
  color: #dedede;
  padding-top: 0.2rem;
}
.navbar > .container {
  max-width: 100vw;
}
#ftco-navbar {
  height: 40px;
  box-sizing: content-box;
  background-color: #000000 !important;
}
#ftco-navbar.ftco-navbar-light.scrolled {
  background-color: #000000 !important;
  opacity: 0.8;
}
#ftco-navbar.ftco-navbar-light.scrolled .navbar-brand {
  color: #FFFFFF !important;
}
#ftco-navbar.ftco-navbar-light.scrolled .nav-link {
  color: #FFFFFF !important;
}
#ftco-navbar.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: #CBB88C !important;
}
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* Slider */
/* off white fdfcfc stronger f8f9fa */
#weather_wrapper {
  background-color: black;
}
img[src$=".svg"] {
  width: 100%;
  height: auto;
}
body {
  background-color: white;
}
section:not(.leaflet-control-layers-list) {
  background-color: white;
}
body.lowEnd .my-slider {
  margin-top: 8rem;
  position: relative;
  width: 100%;
  height: 40vh;
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 5rem;
  background-repeat: repeat-x;
}
body.lowEnd .tns-outer {
  margin-top: -5rem;
  width: 309px;
  height: 500px;
  max-width: 309px;
  max-height: 500px;
  position: absolute;
  margin-left: 8rem;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.9), 0 10px 10px rgba(0, 0, 0, 0.5);
}
body.lowEnd .tns-ovh {
  width: 309px;
  height: 500px;
  max-width: 309px;
  max-height: 500px;
  position: relative;
}
body.lowEnd .tns-nav {
  position: absolute;
  bottom: -55px;
  z-index: 1;
  width: 100%;
  text-align: center;
}
body.lowEnd .tns-nav > button {
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 15px;
  border-radius: 50%;
  background: darkgray;
  border: 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
  transition: all 0.75s ease-in-out;
}
body.lowEnd .tns-nav > button:hover,
body.lowEnd .tns-nav > button.tns-nav-active {
  background: black;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 10px 10px rgba(0, 0, 0, 0.5);
}
body.lowEnd .tns-nav > button:focus {
  outline: none;
}
body.lowEnd li.tns-item,
body.lowEnd div.tns-item {
  width: 309px;
  height: 500px;
}
@media screen and (min-width: 667px) {
  body.lowEnd .my-slider {
    margin-top: 4rem;
    height: 30vh;
    box-shadow: none;
    margin-bottom: 0rem;
    background-size: 130%;
  }
  body.lowEnd .my-slider .tns-outer {
    margin-top: 0rem;
  }
  body.lowEnd .section_address {
    margin-top: 5rem;
  }
}
/* //TODO:TD fix properly with new version (let's have the nav items widths be flexible instead so they compress up on one line first, then collapse into multi lines) 
    this is in meantime a CHEAP and nasty temporary fix to breaking tabs for resources on med size screens */
@media screen and (max-width: 1820px) {
  /* Tab Menus */
  .section_nav {
    height: auto !important;
    padding-bottom: 30px;
  }
  .section_nav ul li a.nav-link.active:after,
  .section_nav ul.nav-tabs li a.nav-link.active:after {
    z-index: 0 !important;
  }
}
/*@media @lessThanPhoneLandscape {*/
@media screen and (max-width: 881px) {
  /*Top of page here */
  body.lowEnd {
    /* .section_address {
            margin-top: 15rem;
        }*/
  }
  body.lowEnd .my-slider {
    /*margin-top: 5rem;*/
    margin-top: 0rem;
    min-height: 45vh;
    box-shadow: none;
  }
  body.lowEnd .tns-outer {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
  body.lowEnd .tns-ovh {
    width: 100%;
    max-width: 100%;
    position: relative;
  }
  body.lowEnd li.tns-item {
    width: 100%;
    max-width: 100%;
  }
  .ftco-navbar-light {
    background: #1d2227 !important;
    z-index: 3;
    padding: 10px 0;
  }
  #ftco-navbar {
    height: auto;
  }
  #ftco-navbar .container {
    padding-right: 15px;
  }
  .ftco-navbar-light {
    padding-left: 0;
    padding-right: 0;
  }
  .ftco-navbar-light .navbar_logo,
  .ftco-navbar-light .navbar_strapline {
    margin-left: 15px;
  }
  .ftco-navbar-light .navbar-toggler {
    margin-right: 15px;
  }
  /* Silver titles */
  .section_title h1 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  /* Your Community */
  #your_community .services-2 {
    min-width: auto !important;
  }
  #your_community .services-2 h2 {
    margin-bottom: 2rem;
  }
  #your_community .services-2 .icon a img {
    max-width: 100%;
  }
  /* Map */
  .leaflet-touch .leaflet-control-layers {
    border: none;
  }
  .leaflet-popup {
    z-index: 1001 !important;
  }
  #invite_guests .blurb_wrap .row .col {
    padding-left: 2rem !important;
    min-width: 100%;
  }
  #services .container .row .col,
  #leisure .container .row .col,
  #fitness .container .row .col,
  #disabled_access .container .row .col,
  #charities .container .row .col {
    min-width: 100%;
    margin-bottom: 3rem;
  }
  /* .providers {
        .col {
            min-width: 100% !important;
            margin-bottom: 8rem;
            padding-left: 2rem;
            padding-right: 2rem;
        }
    } moved below so opperates on wider selection */
  /* making col-sm behave like col-md longer */
  .col-sm {
    flex-basis: auto;
    flex-grow: initial;
    max-width: initial;
    -ms-flex-preferred-size: auto;
    -ms-flex-positive: auto;
  }
  .ftco-footer {
    padding-top: 0;
  }
  .ftco-footer h2 {
    margin-top: 4rem;
  }
  #footer_container {
    padding-bottom: 0rem !important;
  }
  #footer_strapline {
    flex-direction: column;
    gap: 2rem;
  }
  #footer_strapline a {
    display: inline-block;
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  body.lowEnd .my-slider {
    min-height: 75vh;
  }
  .ftco-navbar-light .navbar-toggler {
    /*margin-top: 15px;*/
  }
}
@media screen and (max-width: 376px) {
  body.lowEnd .my-slider {
    min-height: 60vh;
  }
}
@media screen and (max-height: 500px) {
  body.lowEnd .my-slider {
    min-height: 80vh;
  }
}
#ftco-nav.navbar-collapse {
  background-color: #000000 !important;
}
#ftco-nav.navbar-collapse .navbar-nav {
  padding-left: 15px !important;
}
.ftco-navbar-light.scrolled .navbar-toggler {
  color: white !important;
}
body.highEnd li.tns-item,
body.highEnd video.tns-item {
  height: calc(85vh - 60px - 35px);
}
/*end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST end TEST*/
.static {
  position: static;
}
.cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: cover;
  /* For video */
}
/*li.tns-item {
        height: calc(~"85vh - 60px - 35px"); //60px is nav //35px is notice banner
    }*/
li.tns-item,
video.tns-item,
div.tns-item {
  text-align: center;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
.thumbnails {
  margin: 20px 0;
  text-align: center;
}
.thumbnails li {
  box-sizing: content-box;
  width: 150px;
  display: inline-block;
  cursor: pointer;
  border: 5px solid;
  border-color: rgba(0, 0, 0, 0.5);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.thumbnails li:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.thumbnails li.tns-nav-active,
.thumbnails li:hover {
  background: none;
  border-color: rgba(0, 0, 0, 0.95);
}
.thumbnails img {
  vertical-align: bottom;
  height: auto;
  max-height: 160px;
  max-width: 100%;
}
.customize-tools {
  position: relative;
}
.controls {
  text-align: center;
}
.controls .prev {
  left: 14rem;
}
.controls .next {
  right: 10rem;
}
.controls .prev,
.controls .next {
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  color: rgba(111, 111, 111, 0.95);
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.controls .prev:hover,
.controls .next:hover {
  transform: translateY(-5px);
  color: rgba(153, 153, 153, 0.79);
}
@media screen and (min-width: 1920px) {
  .controls .prev,
  .controls .next {
    width: 100px;
    height: 100px;
    overflow: visible;
    pointer-events: all;
  }
}
.controls li {
  display: block;
  position: absolute;
  top: 50%;
  height: 60px;
  line-height: 60px;
  margin-top: -40px;
  width: 250px;
  height: 75px;
  padding: 0 15px;
  cursor: pointer;
  transition: background 0.3s;
}
.customize-tools {
  background: #dedede20;
  margin-top: -55px;
}
.title_gold {
  color: #CBB88C !important;
}
.title_gold a {
  color: #CBB88C !important;
}
.section_padded {
  padding: 4em 0;
}
.section_address {
  padding: 4em 0;
}
.pad_top {
  padding-top: 45px;
}
.pad_bottom {
  padding-bottom: 45px;
}
.tab_content_bcs {
  background-color: #F2F2F2;
}
.tab_content_bcs .tab-pane.active {
  box-shadow: inset 2px 6px 11px 1px rgba(0, 0, 0, 0.25);
}
#your_community .services-2 {
  background-color: #FFFFFF;
  min-width: 350px;
}
.icons_wrap,
.amenities_wrap,
.community_wrap {
  padding-top: 45px;
  padding-bottom: 45px;
}
.icons_wrap .col-sm,
.amenities_wrap .col-sm {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.icons_wrap .col-sm .icon,
.amenities_wrap .col-sm .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #CBB88C;
  color: #FFFFFF;
}
.icons_wrap .col-sm .reveal_closer .icon,
.amenities_wrap .col-sm .reveal_closer .icon {
  background-color: #f8f9fa;
  color: #504f4f;
}
.icons_wrap .col-sm a .icon,
.amenities_wrap .col-sm a .icon {
  box-shadow: 0 6px 10px 0 #666666a3;
  transition: all 0.3s ease-in-out;
}
.icons_wrap .col-sm a .icon:hover,
.amenities_wrap .col-sm a .icon:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.icons_wrap .col-sm a:hover,
.amenities_wrap .col-sm a:hover {
  cursor: pointer;
}
.icons_wrap .col-sm a:hover .icon,
.amenities_wrap .col-sm a:hover .icon {
  background-color: #777777;
}
.icons_wrap .col-sm h2,
.amenities_wrap .col-sm h2 {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.icons_wrap .col-sm p,
.amenities_wrap .col-sm p {
  font-size: 0.85rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.icons_wrap .col-sm p a,
.amenities_wrap .col-sm p a {
  white-space: nowrap;
}
.hidden_visitors_link {
  top: -200px;
  width: 0px;
  height: 0px;
  z-index: 2;
  position: absolute;
}
#visitors .icons_wrap .col-sm .icon {
  background-color: #777571;
}
@media screen and (min-width: 881px) {
  .amenities_wrap .col-sm {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
.community_wrap {
  padding-top: 100px;
  padding-bottom: 100px;
}
#services,
#leisure,
#fitness,
#disabled_access,
#charities {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
#services h3,
#leisure h3,
#fitness h3,
#disabled_access h3,
#charities h3 {
  margin-bottom: 3.5rem;
}
#services ul li,
#leisure ul li,
#fitness ul li,
#disabled_access ul li,
#charities ul li {
  margin-bottom: 1rem;
  /*min-height: 54px;*/
}
#services ul li a:hover,
#leisure ul li a:hover,
#fitness ul li a:hover,
#disabled_access ul li a:hover,
#charities ul li a:hover {
  color: #000000;
}
#invite_guests {
  padding-top: 2rem !important;
  padding-bottom: 6rem !important;
}
#invite_guests h3 {
  margin-top: 6rem;
  padding-bottom: 2.5rem;
}
#invite_guests .blurb_wrap .row .col {
  padding-left: 6rem;
}
#invite_guests .icons_wrap {
  margin-top: 5rem;
}
ul.indent {
  padding-left: 3rem;
}
.tab-content .tab-pane {
  padding: 2rem;
  /*N.B. will need to override for map and sview etc */
}
.ftco-section.no_pad_section {
  padding: 0;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
  font-weight: 300;
}
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  font-weight: 500;
}
#banner_name {
  color: #CBB88C;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 0;
}
#banner_address {
  color: #999999;
  font-size: 1.5rem;
  font-weight: bold;
}
#banner_description {
  color: #777777;
  font-weight: 300;
  font-size: 1.2rem;
  margin-top: 1.5rem;
}
#tab_content_links ul {
  list-style: none;
}
#footer_strapline {
  display: flex;
  justify-content: space-between;
}
#footer_strapline a {
  color: #CBB88C;
}
#footer_strapline a:hover {
  color: #FFFFFF !important;
}
.title_silver {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
}
.title_silver_prefixes {
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
.section_title_h1 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 95%;
  animation: shinningtext 10s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
.title_static {
  background: linear-gradient(160deg, #000, #fff, #000);
  background-size: 100%;
  animation: none;
}
.title_silver_static {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(160deg, #000, #fff, #000);
  background-size: 100%;
  animation: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
.title_static_2 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 100%;
  animation: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
.section_title {
  background-color: #000000;
  color: #FFFFFF;
}
.section_title h1 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-size: 95%;
  animation: shinningtext 10s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
/*N.B. seems maybe (maybe it was fake slider) this being too wide breaks the responsive version - making it wider than screen by few px and so giving gaps on right */
.section_nav {
  background: black;
  height: 100px;
  padding-top: 25px;
}
.section_nav ul,
.section_nav ul.nav-tabs {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
}
.section_nav ul li,
.section_nav ul.nav-tabs li {
  font-size: 1.4rem;
  font-weight: 300;
  color: white;
  width: 300px;
  max-width: 300px;
  text-align: center;
  position: relative;
}
.section_nav ul li a.nav-link,
.section_nav ul.nav-tabs li a.nav-link {
  color: #FFFFFF;
  background-color: inherit;
  /* overriding bootstrap */
  border: 0;
}
.section_nav ul li a.nav-link.active,
.section_nav ul.nav-tabs li a.nav-link.active,
.section_nav ul li a.nav-link:hover,
.section_nav ul.nav-tabs li a.nav-link:hover {
  color: #CBB88C;
}
.section_nav ul li a.nav-link.active,
.section_nav ul.nav-tabs li a.nav-link.active {
  font-weight: 400;
}
.section_nav ul li a.nav-link.active:after,
.section_nav ul.nav-tabs li a.nav-link.active:after {
  z-index: 2;
  position: absolute;
  left: calc((300px / 2) - 20px);
  bottom: -38px;
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
}
.tab-content .tab-pane {
  transition: all 0.5s ease-in-out;
}
.div_content {
  background-color: #F2F2F2;
}
.tab-content.tab_content_nopad .tab-pane {
  padding: 0;
}
#street-view {
  height: 600px;
}
.map_wrapper {
  width: 100%;
  height: 600px;
}
.map_wrapper #map {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.map_wrapper .leaflet-container {
  font-family: inherit;
  background: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.map_wrapper .leaflet-popup-content-wrapper {
  border-radius: 0px;
  color: inherit;
  margin-top: 20px;
}
.map_wrapper .leaflet-container a.leaflet-popup-close-button {
  top: 20px !important;
}
.map_wrapper .leaflet-popup-content {
  margin: 0;
}
.map_wrapper .pop_building {
  margin: 0.5rem 1rem 1rem 1rem;
}
.map_wrapper .pop_building h1 {
  font-size: 1.5rem;
  margin: 0;
}
.map_wrapper .pop_building .details {
  display: flex;
  justify-content: space-between;
}
.map_wrapper .pop_building .details p {
  margin: 0;
  font-size: 0.75rem;
  padding-right: 2rem;
}
.map_wrapper .pop_building .details a.building_map {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  display: flex;
  border: 1px solid green;
  background: green;
  color: white;
  border-radius: 50%;
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}
.map_wrapper .awesome-marker i {
  font-size: 1rem;
}
.map_wrapper .testimony-wrap {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.map_wrapper .testimony-wrap .user-img {
  min-width: 80px;
  /* stops circle warping to oval when title long */
}
/* Map Localities Controls */
.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control {
  background: transparent;
  box-shadow: none;
}
.btn_toggle_overlays.leaflet-control {
  border: none;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 132px;
  padding: 3px;
  padding-right: 10px;
  margin-left: 16px;
  font-weight: 300;
  user-select: none;
  font-size: 14px;
  margin-bottom: 15px;
}
.btn_toggle_overlays.leaflet-control:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.btn_toggle_overlays.leaflet-control i {
  width: 25px;
  margin-right: 5px;
}
.leaflet-control-layers-overlays label {
  cursor: pointer;
}
.leaflet-control-layers-overlays label > div > span {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  min-width: 125px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 3px;
  padding-left: 5px;
  padding-right: 10px;
  color: #999999;
  font-weight: 300;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 14px;
}
.leaflet-control-layers-overlays label > div > span:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.leaflet-control-layers-overlays label > div > span .icon {
  margin-right: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaflet-control-layers-overlays label > div > span .icon i {
  font-size: 14px;
}
.leaflet-control-layers-overlays label > div > span:hover {
  background-color: white;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"] {
  position: absolute;
  left: -100vw;
  /* Note, you may want to position the checkbox over top the label and set the opacity to zero instead. It can be better for accessibilty on some touch devices for discoverability. */
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000000;
}
@media screen and (max-width: 667px) {
  .leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span:hover {
  background-color: white;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon i {
  color: #FFFFFF;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.lightred {
  background-color: #FF8E7F;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.lightgreen {
  background-color: #BBF970;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.darkblue {
  background-color: #0066A2;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.lightblue {
  background-color: #89daff;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.green {
  background-color: #71AF26;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.red {
  background-color: #D43E2A;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.darkred {
  background-color: #A13336;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.purple {
  background-color: #D152B8;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.beige {
  background-color: #FFCA92;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.pink {
  background-color: #FF91E8;
}
.leaflet-control-layers-overlays label > div input[type="checkbox"]:checked ~ span .icon.darkgreen {
  background-color: #728224;
}
#stocks_wrapper {
  background: #121518;
}
.tradingview-widget-copyright {
  margin-top: -0.5rem;
}
.hover_link {
  cursor: pointer;
  transition: all 1.5s;
}
.hover_link:hover {
  color: white;
}
.hover_link:hover .icon i {
  transition: all 1.5s;
  color: white;
}
.building_links h2,
.building_links h3,
.building_links h4 {
  color: white;
}
.building_links h4 {
  font-size: 1rem;
}
.building_links a {
  cursor: pointer;
  transition: all 1.5s;
}
.building_links a:hover {
  color: white;
}
.building_links a:hover .icon i {
  transition: all 1.5s;
  color: white;
}
.building_links a.visiting_address {
  display: block;
  width: 60%;
  transition: 0.3s all ease;
  color: #cbb88c;
  margin-left: 1rem;
  cursor: pointer;
  transition: all 1.5s;
}
.building_links a.visiting_address:hover {
  color: white;
}
.building_links a.visiting_address:hover .icon i {
  transition: all 1.5s;
  color: white;
}
.building_links .useful_links {
  display: flex;
}
.building_links .useful_links .useful_links_col {
  margin-right: 2rem;
}
.building_links .useful_links .useful_links_col .top_mar {
  margin-top: 2rem;
}
.building_links .useful_links .useful_links_col .list-unstyled {
  margin-left: 0.5rem;
  font-size: 0.75rem;
}
.txt_title {
  background: rgba(255, 255, 255, 0.85);
  padding: 2rem 3rem;
}
.txt_title h1,
.txt_title p {
  color: black !important;
  margin-bottom: 0;
}
.navbar-brand {
  transition: all 2.5s;
}
.ftco-navbar-light.scrolled .navbar-brand {
  color: black;
}
.services .icon i {
  color: #cbb88c;
}
.block-20 {
  background-size: auto;
  padding: 50px;
  margin-bottom: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.block-20:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.services-2 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.services-2:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.services-2:hover .icon {
  background: transparent;
}
.services-2 .icon {
  background: transparent;
}
.services-2 .icon a {
  background: white;
}
.services-2:hover .icon:after {
  background: transparent;
  right: 50px;
}
.testimony-wrap .p_top {
  margin-bottom: 0.5rem;
  color: black;
}
.testimony-wrap .p_address {
  font-size: 0.75rem;
  text-align: left;
  margin-bottom: 0.5rem;
}
.testimony-wrap .user-img {
  border: solid 1px rgba(128, 128, 128, 0.27);
}
.ftco-footer p {
  font-weight: 100;
}
.text p {
  margin-bottom: 0;
}
#section-counter {
  margin-bottom: 3.5rem;
}
.banner_section {
  padding-right: 15px;
  margin-bottom: -9px;
}
.title_banner {
  background-color: #cbb88c;
  color: white;
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: 140%;
  padding: 0.5rem;
}
/* PIN protection */
#pin_popup #pin_overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 2147483647;
  top: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#pin_popup #pin_overlay #pin_wrap {
  width: 450px;
  max-width: 100%;
  height: 310px;
  text-align: center;
  background-color: #000000;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
#pin_popup #pin_overlay #pin_wrap #pin_form {
  height: 100%;
  position: relative;
}
#pin_popup #pin_overlay #pin_wrap #pin_form h1 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(160deg, #000, #fff, #000);
  background-size: 100%;
  animation: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}
#pin_popup #pin_overlay #pin_wrap #pin_form h2 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(160deg, #000, #fff, #000);
  background-size: 100%;
  animation: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  font-size: 1.2rem;
  padding-top: 0;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #pin_box_container {
  width: 100%;
  margin-top: 1rem;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #pin_box_container input {
  width: 40px;
  height: 40px;
  text-align: center;
  border: none;
  margin-right: 2.25rem;
  font-size: 3rem;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #pin_box_container input:last-child {
  margin-right: 0;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #pin_message {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background: linear-gradient(160deg, #000, #fff, #000);
  background-size: 100%;
  animation: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
  font-size: 0.9rem;
  padding-top: 10px;
  letter-spacing: 3px;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container {
  position: absolute;
  bottom: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container button {
  border: none;
  font-size: 1.15rem;
  padding: 0.5rem 2rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 3px;
  box-shadow: 0px 4px 14px rgba(255, 255, 255, 0.2);
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container button:hover {
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.12), 0 8px 16px rgba(255, 255, 255, 0.22);
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container button:disabled {
  box-shadow: none;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container #pin_submit {
  background-color: #076907;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container #pin_submit:hover {
  background-color: #278f27;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container #pin_submit:disabled {
  background-color: #708370;
  color: #000000;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container #pin_cancel {
  background-color: #610d0d;
}
#pin_popup #pin_overlay #pin_wrap #pin_form #buttons_container #pin_cancel:hover {
  background-color: #781b1b;
}
@media screen and (min-width: 881px) {
  #pin_form #buttons_container {
    padding-left: 25px;
    padding-right: 25px;
  }
}
/* Tfl */
.a_tfl {
  position: absolute;
  right: 42px;
  font-size: 0.8rem;
  margin-top: 25px;
}
.img_tflloader {
  margin-left: 20px;
}
.bike_dock {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
  /*border: solid 1px gray;*/
  /* div:not(:last-child) {
        border-bottom: solid 1px gray;
    }*/
}
.bike_dock table {
  width: 100%;
  /*background-color: #c5c5c521;*/
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 5px 4px 6px rgba(0, 0, 0, 0.2);
}
.bike_dock table tbody tr td {
  padding: 5px 8px;
}
.bike_dock table tbody tr td.count {
  text-align: right;
}
.tfl_lines {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}
.tfl_lines .line {
  /*NEW */
}
.tfl_lines .line .line_block {
  color: white;
  text-align: center;
}
.tfl_lines .line .status_block {
  text-align: center;
  background-color: white;
}
.tfl_lines .line .status_block.warning {
  color: black;
  background-color: #ead27b;
  cursor: help;
}
.tfl_lines .line.bakerloo {
  background-color: #894e24;
}
.tfl_lines .line.central {
  background-color: #dc241f;
}
.tfl_lines .line.circle {
  background-color: #ffce00;
}
.tfl_lines .line.district {
  background-color: #007229;
}
.tfl_lines .line.hammersmith-city {
  background-color: #d799af;
}
.tfl_lines .line.jubilee {
  background-color: #6a7278;
}
.tfl_lines .line.metropolitan {
  background-color: #751056;
}
.tfl_lines .line.northern {
  background-color: #000;
}
.tfl_lines .line.piccadilly {
  background-color: #0019a8;
}
.tfl_lines .line.victoria {
  background-color: #00a0e2;
}
.tfl_lines .line.tflrail {
  background-color: #0019a8;
}
.tfl_lines .line.waterloo-city {
  background-color: #76d0bd;
}
.tfl_lines .line.dlr {
  background-color: #00afad;
}
.tfl_lines .line.london-overground {
  background-color: #e86a10;
}
.tfl_lines .line.emirates-air-line {
  background-color: #ce1631;
}
.tfl_lines .line.tram {
  background-color: #00bd19;
}
.tfl_lines .line.southern {
  background-color: #00a74b;
}
.tfl_lines .line.greater-anglia {
  background-color: #8b8fa5;
}
.tfl_lines .line.southeastern {
  background-color: #0071bf;
}
.tfl_lines .line.thameslink {
  background-color: #da4290;
}
.tfl_lines .line.west-midlands-trains {
  background-color: #00BF6F;
}
.tfl_lines .line.avanti-west-coast {
  background-color: #144F52;
}
.tfl_lines .line.tfl-rail {
  background-color: #0019a8;
}
.tfl_lines .line.c2c {
  background-color: #f0188c;
}
.tfl_lines .line.south-western-railway {
  background-color: #041C2C;
}
.tfl_lines .line.great-northern {
  background-color: #00a6e2;
}
.tfl_lines .line.hereeast-shuttle {
  background-color: #6c757d;
}
/* For Gracechruch with long co names*/
.community_wrap .services-2 h2 {
  min-height: 72px;
}
.community_wrap .services-2 .icon a img {
  max-width: 100%;
}
/* initial prototype of multi select */
.hidden {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.shown {
  height: auto;
  width: auto;
  overflow: auto;
  opacity: 1;
}
/*Animations for multiple options */
/*#visitors {*/
.container .row {
  transition: all 1s ease-in-out;
}
.container .row.secondary {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.container.morphed .row {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.container.morphed .row.revealed {
  height: auto;
  width: auto;
  overflow: auto;
  opacity: 1;
}
.div_provider_contact {
  padding: 20px;
}
.div_provider_contact .a_closer {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #504f4f;
  transition: all 1s ease-in-out;
}
.div_provider_contact .a_closer:hover {
  color: #FFFFFF;
  background-color: #504f4f;
}
.div_provider_contact_wrap {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.div_provider_contact_wrap > label {
  margin: 0;
  margin-top: 1rem;
}
.div_provider_contact_wrap > a {
  transition: all 0.5s ease-in-out;
}
.div_provider_contact_wrap > a:hover {
  color: #504f4f;
}
/* pure css flip card https://codepen.io/edeesims/pen/wvpYWW */
.pin_protect_wrap .back_message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pin_protect_wrap .back_message p {
  font-size: 20px;
  /* 120% */
  padding: 3rem;
}
.pin_protect_wrap .div_provider_contact {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.pin_protect_wrap.data_rendered .div_provider_contact {
  height: auto;
  width: auto;
  overflow: auto;
  opacity: 1;
}
.pin_protect_wrap.data_rendered .back_message {
  height: 0;
  width: 0;
  overflow: hidden;
  opacity: 0;
}
.pin_protect_wrap .card {
  width: 100%;
  height: 250px;
  float: left;
  perspective: 500px;
  margin-bottom: 50px;
  border: none;
  cursor: pointer;
}
.pin_protect_wrap .card:hover .content {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.pin_protect_wrap .content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}
.pin_protect_wrap .card.hover .content {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}
.pin_protect_wrap .front,
.pin_protect_wrap .back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}
.pin_protect_wrap .back {
  transform: rotateY(180deg);
}
/*idea is to inhibit :hover from click (which is sticky) in touch devices */
@media (hover: hover) {
  .pin_protect_wrap .card:hover .content {
    transform: rotateY(180deg);
    transition: transform 0.5s;
  }
}
/*.test_second{
    display:none;
}*/
@media (min-width: 376px) and (max-width: 881px) {
  body.lowEnd .section_address {
    margin-top: 15rem;
  }
}
/* @wide to @x_wide  */
@media (min-width: 881px) and (max-width: 1366px) {
  body.lowEnd .my-slider {
    margin-top: 6rem;
    height: 35vh;
  }
  body.lowEnd .my-slider .tns-outer {
    margin-left: 2rem;
    margin-top: -4rem;
  }
  .section_address {
    /*margin-top: 0;*/
    padding-left: 15rem;
  }
  #services .container .row .col,
  #leisure .container .row .col,
  #fitness .container .row .col,
  #disabled_access .container .row .col,
  #charities .container .row .col {
    min-width: 50%;
    margin-bottom: 3rem;
  }
}
@media (min-width: 881px) {
  .section_address {
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  #services .container,
  #leisure .container,
  #fitness .container,
  #disabled_access .container,
  #charities .container {
    max-width: 70vw;
    /* override bstraps max-width 1140 or so */
  }
  #services .container .row h3,
  #leisure .container .row h3,
  #fitness .container .row h3,
  #disabled_access .container .row h3,
  #charities .container .row h3 {
    min-width: 205px;
  }
}
.container.providers .col {
  min-width: 100% !important;
}
.container.providers .img {
  background-size: contain;
  /* Pair min-width:!00% with this */
}
/* was not quite right, think get a 1px width range where it's odd. think due to mixing max and min widths (bstrap uses min, but we use max) */
/* was 991 good 992 odd 993 good*/
/* then changed to 991.9px and works perfectly */
@media (max-width: 991.9px) {
  .providers .col {
    margin-bottom: 8rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .container.providers .div_provider_contact,
  .container.providers .div_provider_contact_wrap {
    font-size: 15px;
  }
  .container.providers .div_provider_contact {
    padding: 10px;
  }
  .container.providers .div_provider_contact_wrap {
    padding: 30px 10px;
  }
}
@media (min-width: 768px) {
  .container.providers .row.d-flex div.col.d-flex {
    min-width: auto !important;
    max-width: 540px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .container.providers .div_provider_contact,
  .container.providers .div_provider_contact_wrap {
    font-size: 17px;
    padding: 20px;
  }
  .container.providers .img {
    background-size: 75%;
    /* Pair max-width:540px with this */
  }
}
@media (min-width: 1367px) {
  #services .container .row,
  #leisure .container .row,
  #fitness .container .row,
  #disabled_access .container .row,
  #charities .container .row {
    gap: 2rem;
  }
}