/*
	Theme Name: Matrix 49
	Theme URI: https://matrix49bristol.co.uk
	Description: Hand Crafted theme
	Version: 1.0
	Author: Ben Kitching
	Author URI: http://wpdedicated.co.uk
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

.single-tribe_events #dot-navs, .single-tribe_events header {
	display: none;
}

.tribe-events-single-event-description.tribe-events-content img {
	max-width: 100%;
	height: auto;
}

.single-tribe_events {
	background-color: #051e30;
	overflow-y: scroll;
}
.single-tribe_events .event-tickets .tribe-tickets__rsvp {
	background-color: #051e30;
}
.single-tribe_events .tribe-events-content, .single-tribe_events .tribe-common .tribe-common-h2, .single-tribe_events .tribe-common .tribe-common-h4, .single-tribe_events .event-tickets .tribe-tickets__rsvp-attendance-going {
	color: #fff;
}

.tribe-events-single>.tribe_events {
	overflow: visible;
}

.tribe-events-single>.tribe_events img.alignnone {
	position: relative;
	left: -4.6rem;
}

.single-tribe_events .tribe-events-single-event-title, .single-tribe_events .tribe-events-back, .tribe-events-single-section.tribe-events-event-meta.primary.tribe-clearfix, .single-tribe_events .tribe-events-schedule, .tribe-tickets__rsvp-availability {
	display: none;
}

.tribe-common .tribe-common-c-btn, .tribe-common a.tribe-common-c-btn, .tribe-common button.tribe-common-c-btn {
	background-color: #50f1cc;
	color: #051e30;
}

.tribe-common .tribe-common-c-btn:focus, .tribe-common .tribe-common-c-btn:hover, .tribe-common a.tribe-common-c-btn:focus, .tribe-common a.tribe-common-c-btn:hover, .tribe-common button.tribe-common-c-btn:focus, .tribe-common button.tribe-common-c-btn:hover, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover {
	background-color: #31fccd;
}
.single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	background-color: #50f1cc;
	border-color: #50f1cc;
	color: #051e30;
}

.tribe-events-content a {
	color: #50f1cc;
	border-color: #50f1cc;
}
.tribe-events-content a:hover {
	color: #fff;
	border-color: #31fccd;
}

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
body {
	font:200 2.2vh/1.4 'brother-1816', sans-serif;
	color:#fff;
	padding:0;
	margin:0;
	overflow:hidden;
	background-color:#094676;
	overscroll-behavior-x: none;
}
body.loading {
	overflow:hidden;
}
#loader {
	background-color:#fff;
	width:100vw;
	height:100vh;
	position:absolute;
	top:0;
	left:0;
	z-index:9999999;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
	object-fit:cover;
}
a {
	color:#fff;
	text-decoration:none;
	transition:0.5s all;
}
a:hover {
	color:#fff;
	text-decoration:underline;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}
h1, .h1 {
	font-weight: 200;
	font-size: 6vh;
	line-height: 1.1;
}
h2, .h2 {
	font-weight: 200;
	font-size: 4vh;
	line-height: 1.1;
	margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
h3, .h3 {
	font-size: 3vh;
	font-weight: 200;
}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

header {
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 1vw;
  align-items: flex-end;
  z-index: 10;
	transition:0.2s all;
	min-height:calc(10vh + 2vw);
}
header:hover {
	background-color:rgba(255,255,255,0.2);
}
.loading header {
	background-color:transparent !important;
}

#header-logo img {
	height:10vh;
	transition:1s transform;
}

#open-nav {
  flex-grow: 1;
  text-align: right;
  padding-right: 6vh;
}
#open-nav img {
	height:4vh;
	position: relative;
	top:-2.5vh;
}
main {
	height:100vh;
	width:100vw;
	position: relative;
	background-color:#020609;
}
#nav-menu {
	background:linear-gradient(152deg, #99F3FF -31%, #0087FF 81%);
	position: fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	z-index: 9;
	display: none;
}
#nav-menu {
	padding:10vh 24vh 6vh;
}
#nav-menu a {
	display: block;
	font-size: 5vh;
	margin:2vh 0;
}
#dot-nav {
	bottom: 2vh;
  position: fixed;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
	z-index:8;
	opacity:50%;
	transition:0.5s opacity;
}
#dot-nav:hover {
	opacity: 100%;
}
#dot-nav a {
  display: block;
  width: 2vh;
  height: 2vh;
  border-radius: 50%;
  background: transparent;
  margin: 0 4vh;
  border: 2px solid #99f3ff;
	position: relative;
	transition:0.5s all;
}
#dot-nav a.passed, #dot-nav a:hover {
	background-color:#99f3ff;
}
#dot-nav a:before {
	content: '';
  position: absolute;
  width: 8vh;
  border-bottom: 2px dashed #99f3ff;
  left: calc(-8vh - 2px);
  top: 50%;
  transform: translateY(-50%);
	transition:0.5s all;
}
#dot-nav a.passed:before {
	border-bottom:2px solid #99f3ff;
}
#dot-nav a:first-child:before {
	display: none;
}
.fh {
	height:100vh;
	width:auto;
}
.w100 {
	width:200vh;
}
.dark-bg {
	background-color:#020609;
}
.mid-bg {
	background-color:#0087ff;
}
.blue {
	color:#0087FF;
}
.light-blue {
	color:#99f3ff;
}
.white {
	color:#fff;
}
.row {
	display:flex;
	flex-wrap: wrap;
}
.col.full {
	width:100%;
	flex-basis:100%;
}
.col.half {
	width:50%;
	flex-basis:50%;
}
.col.third {
	width:33.33%;
	flex-basis: 33.33%;
}
.col.twothirds {
	width:66.66%;
	flex-basis:66.66%;
}
.col.sixty {
	width:50%;
	flex-basis: 60%;
}
.col.forty {
	width:40%;
	flex-basis: 40%;
}
.col.quarter {
	width:25%;
	flex-basis: 25%;
}
.col.fifth {
	width:16%;
	flex-basis:16%;
}
.col-inner {
	padding:10px 20px;
}
.col:nth-child(odd) .col-inner {
	padding-left:0;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.m0 {
  margin: 0;
}
.mb0 {
	margin-bottom:0;
}
.mt0 {
	margin-top:0;
}
.big-text {
  font-size: 2.4vh;
}
.large-text {
	font-size:2vh;
}
.med-text {
	font-size: 1.5vh;
}
.small-text {
  font-size: 1.1vh;
}
.right {
  float: right;
  clear: both;
}

p.table-heading {
  margin-bottom: 5px;
  font-weight: 400;
}
.table-heading .right {
  position: relative;
  top: 15px;
}
p.table-footer {
  margin-bottom: 15px;
}
.tables p {
	width:100%;
	font-size:1.5vh;
}


#background {
	position:relative;
	height:100vh;
	display: flex;
	width:max-content;
}

#foreground {
	width:max-content;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	display:flex;
	z-index: 3;
}

.cls-1 {
	fill: #6b8294;
}

.cls-2 {
	fill: #183354;
}

.cls-3 {
	opacity: 0.5;
}

.cls-4 {
	fill: #061f31;
	fill-rule: evenodd;
}

.cls-5 {
	fill: #dfdbda;
}

.cls-5, .cls-8 {
	stroke: #183354;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5px;
}

.cls-6 {
	opacity: 0.75;
}

.cls-7 {
	fill: #6b8295;
}

.cls-8 {
	fill: none;
}

.cls-9 {
	fill: #fff;
}

/*----------------------------------*\
    BLocks
\*----------------------------------*/

.prod-answer-long {
  display: none;
  padding-bottom:2rem;
}
.prod-answer-short {
  padding-bottom:2rem;
}
.expand .prod-answer-long {
  display: block;
}
#product-faq a.btn, #featured-faqs a.btn {
  position: absolute;
  bottom:4rem;
}
.expand .prod-answer-short {
  display:none;
}


/*------------------------------------*\
    PAGES
\*------------------------------------*/

#intro {
	position:relative;
}
#scroll-right {
	position: absolute;
	top: 50%;
	left: 160vh;
	z-index: 2;
	transform: translateY(-50%);
}
#scroll-right img {
	width: 8vh;
	height: auto;
}
#play-vision {
	position: absolute;
	bottom:5vh;
	left:50%;
	transform:translate(-50%, -50%);
	width:10vw;
	cursor:pointer;
	z-index: 5;
}
#vision-popup, #progress-popup, #five-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
	display: none;
}
#vision-popup video, #progress-popup video, #five-popup video {
	width:85%;
	height:auto;
	min-width:300px;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	max-height: 100vh;
	object-fit: contain;
}
#close-vision, #close-progress, #close-five {
  position: absolute;
  right: 5vh;
  top: 4vh;
  width: 5vh;
  cursor: pointer;
}
#close-vision path, #close-progress path, #close-five path {
	fill:#0087FF;
}
.three-words {
  width: 45vh;
  margin-top: 2vh;
  margin-bottom: -5vh;
}
#play-vision-mob {
  width: 50%;
  display: block;
  margin: 2vh auto;
}
#vision-video-mob, #progress-video-mob, #five-video-mob {
	width:100%;
	height:auto;
	display:none;
	position: relative;
	z-index: 21;
}

#advanced {
	left: 155vh;
  margin-right: 69vh;
}
#advanced .wrapper {
  top: 0;
  left: 25vh;
  width: 83vh;
}
.icons {
	text-align: center;
	font-size: 1.8vh;
}
.icons img {
  margin: 2vh auto 1vh;
  width: 8vh;
  height: 8vh;
  object-fit: contain;
}
.icons .col-inner {
	padding:0 3vh;
}
#phase-one-bg {
	left: 18vh;
  margin-right: 18vh;
}
#phase-one-loops {
  height: 100vh;
  width: auto;
  left: 0;
  top: 0;
  z-index: 2;
	display: none;
}
#phase-one-marker {
  top: 81vh;
  left: 55vh;
  width: 18vh;
	display: none;
}
#phase-two-marker {
	top: 6vh;
  left: 38vh;
  width: 17vh;
	display: none;
}
#phase-three-marker {
  top: 6vh;
  left: 90vh;
  width: 17vh;
	display: none;
}
#accommodation {
	margin-left: 55vw;
}
#unrivalled {
  bottom: 18vh;
  left: 25vh;
  width: 80vh;
}
#master-brochure img {
	width: 54vh;
}
#schemes {
	display: flex;
}
#sub-brochures img {
	width: 26vh;
}
#phase-1-dates {
	top:0;
	left:120vh;
}
.phase-icons img {
	margin-top:1vh;
	width:46vh;
}
#phase-two {
	background:linear-gradient(249.04deg, #005199 16.09%, #00407A 69.66%);
	left: -120vh;
	margin-right:-120vh;
}
#phase-two img.fh {
	margin-left: 55vh;
}
#phase-two-content {
  top: 0;
  width: 90vh;
  left: 35vh;
}
#phase-two-content .tables {
	width:75%;
}
#phase-two-content-right {
	bottom:13.5vh;
	right: 50vh;
}
#phase-three {
	left:165vh;
	margin-right:165vh;
}
#phase-three-content {
	top:0;
	left:28vh;
}
#phase-three-content .col-inner {
	width:35vh;
}
#phase-three-content .phase-icons {
	padding-left:20px;
	width:60vh;
}
#phase-3-dates {
	bottom:5vh;
	left:104vh;
}
#location {
	padding:0 20vh 0 30vh;
	background:linear-gradient(284.28deg, #094676 30%, #0087FF 85.91%);
}
#location .row:first-child {
	width:200vh;
	flex-wrap:nowrap;
}
#map-icons {
	width: calc(100% + 10vh);
  left: -5vh;
	text-align: center;
}
#location .col.forty {
	padding-right:3vh;
}
#drive-time-links a {
	padding:1px 10px;
	border-radius: 10px;
	text-decoration: none !important;
}
#drive-time-links a.active, #drive-time-links a:hover {
	border:1px solid;
}
#map-icons svg {
	width:6vh;
}
#map-icons a .outer path, #map-icons a .outer {
  transition: .5s all;
}
#map-icons a.active path, #map-icons a.active rect, #map-icons a.active polygon, #map-icons a.active .fill {
    fill: #0087ff !important;
}
@media (hover:none) {
	#map-icons a.active path, #map-icons a.active .outer path, #map-icons a.active .outer {
	    fill: #0087ff !important;
	}
}

#map {
	width: 80%;
  margin: 11vh auto 0 auto;
}
#map-inner {
  width:100%;
	border-radius: 3vh;
	height: 76vh;
}
#proven {
	left:-35vh;
	margin-right: -75vh;
	z-index: 2;
	pointer-events:none;
}
#proven-text {
  top: 3vh;
  left: 25vh;
  width: 89vh;
}
#sustainability {
	z-index:1;
	left: -4vh;
	margin-right: -4vh;
}
#sustainability h1 {
	top:0;
	left:31vh;
}
#demographics {
	top:0;
	right:0;
}
#demographics .relative {
	height:80vh;
}
.demographics-bg {
	opacity: 0.7;
	filter: brightness(0);
}
.charts {
	position: relative;
	top: -6vh;
	left: -4vh;
}
#demographics .chart img {
    height: 38vh;
    width: auto;
    display: block;
    margin: 1rem auto 1rem 0;
}
#gallery {
	width: 220vh;
	left:-47vh;
	margin-right: -48vw;
}
.gallery-img {
	opacity:0;
	transition:0.5s opacity;
	position: absolute;
	top:0;
	left:0;
}
.gallery-img.active {
	opacity:1;
}
#gallery-nav {
	bottom:0;
	right:50vh;
	width:55vh;
}
#gallery-nav svg {
 	position: absolute;
  bottom: 5%;
  left: 10%;
  width: 80%;
}
@media (max-width:1400px) {
	#gallery-nav {
		right:75vh
	}
}
#gallery-nav-phase {
	position: absolute;
  top: 2vh;
  left: 4vh;
  width: 25vh;
}
#gallery-nav-phase p.light-blue.table-heading {
	margin-bottom:0;
	line-height: 1;
}
#gallery-nav-phase .table-heading .right {
	top:10px;
}
#gallery-nav-phase .table-footer .right {
	position: relative;
	top:5px;
}
.gallery-switch rect {
	transition:0.3s all;
	cursor:pointer;
}
.gallery-switch:hover rect, .gallery-switch.active rect {
	fill:#183354;
	filter: drop-shadow( 2px 0px 5px rgba(0, 135, 255, .9));
}
#downloads {
	z-index:1;
	margin-left: 880vh;
}
#downloads .video-link {
	position: relative;
  top: -2vh;
  margin-bottom: -2vh;
  align-items: center;
}
.play-progress {
	margin-right: auto;
	margin-left: 4vh;
}
.play-promo {
	margin-right: auto;
}
#downloads h2.blue:first-child {
	flex-basis: 100%;
	text-align: center;
}
#downloads .row img {
	width: 24vh;
  height: auto;
  margin-bottom: 2vh;
}

.video-link a {
	padding: 1vh 0;
	text-align: center;
	color: #010D1D;
	display: block;
	margin-left: auto;
	font-size: 1.6vh;
	white-space: nowrap;
	width: 22vh;
	margin-right: 4vh;
	text-decoration: none;
}

.video-link a:hover {
	color: #fff;
}

.play-progress a {
	background-color: #50F2CC;
}

.play-promo a {
	background-color: #F2717C;
}

#downloads .video-link img {
	width: 90%;
	height: auto;
}
#site-cam {
	width: 118vh;
	height: 75vh;
	top: 18vh;
	left: 42vh;
}
#downloads-inner {
	top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 68vh;
  left: 16vh;
}
#downloads-inner .col.half {
	text-align: center;
}
#downloads-inner h1 {
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 2vh;
}
.dl-img-container {
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.download-img {
	height: 80%;
	padding: 0 5%;
	margin: 0 auto;
	width: auto;
	object-fit: contain;
}
.download-img.wider {
	height: 90%;
}
.play-vision-media {
	margin:0 auto;
}
#downloads-inner a {
	flex-basis:100%;
	text-align: center;
}
#downloads-inner .btn {
	width: 25vh;
}
#contacts {
	margin-left: 40vh;
}
#contacts-inner {
	top: 0;
  left: 28vh;
	width:170vh;
}
#agents {
	padding-right: 3vh;
	margin-bottom:2vh;
}
#agents p, .dev-text {
	font-size: 1.6vh;
}
#agents p.big-text.light-blue {
	margin-bottom:5vh;
}
#agents h3 {
	margin-top:2vh;
}
#agents img {
	height:14vh;
}
#contacts .imprint {
	margin-top:6vh;
}
.developer-logo {
    height: 5vh;
    margin-top: 2vh;
}
#demographics-inner {
	top:0;
	left:25vh;
	width:135vh;
}
#demographics-inner .col.sixty {
	padding:0 4vh;
}
#donut-chart {
	padding:2em 2vh 0;
}
#donut-chart .donut.relative {
	height:auto;
}
.donutLabel {
  position: absolute;
  z-index: 2;
  display: none;
	text-align: center;
	font-weight: bold;
	font-size:2vh;
}
.donutLabel.one {
  top: 15%;
  left: 11%;
}
.donutLabel.two {
  top: 26%;
  left: 74%;
}
.donutLabel.three {
  top: 73%;
  left: 35%;
}
#skilled {
	bottom:0;
	width: 60%;
	font-size: 0.8rem;
}
.workforce .h1.light-blue {
	font-weight: bold;
}
#workforceHGV {
	opacity: 0;
	transition: 1s opacity;
}
.chartBars {
  position: relative;
  max-width: 600px;
  height: 300px;
  margin: 2em auto 100px;
}
.chartBars .bars {
  display: flex;
  justify-content: space-around;
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 0 1%;
  margin: 0;
}
.chartBars .bars li {
  display: inline-block;
  flex: 0 1 24%;
  height: 100%;
  margin: 0;
  text-align: center;
  position: relative;
  font-size: 16px;
}
.chartBars .bars li .bar {
  width: 100%;
  background: #49E;
  position: absolute;
  font-size: 1.5em;
  color: #fff;
  padding-top: 18px;
  bottom: 0;
  height: 0;
  overflow: hidden;
  font-weight: bold;
  outline: 2px solid transparent;
  transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1.1);
}
.chartBars .bars li b {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: -2em;
  left: 0;
  text-align: center;
}
.chartBars .numbers {
  width: 50px;
  height: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: absolute;
  left: -50px;
}
.chartBars .numbers li {
  text-align: right;
  padding-right: 1em;
  list-style: none;
  height: 59px;
  position: relative;
  font-size: 13px;
  bottom: 11px;
  right: -9px;
  color: #eee;
}
.chartBars .numbers li:after {
  content: "\00af";
  position: relative;
  right: -5px;
  font-size: 20px;
  top: 7px;
  color: rgba(255, 255, 255, 0.34);
}
.chartBars .numbers li:first-of-type {
  height: 63px;
  margin-top: -1px;
}
.chartBars1 .bar {
  border-top-right-radius: 30px;
}
.chartBars2 {
  max-width: 350px;
}
.chartBars2 .bars {
  padding: 0;
}
.chartBars2 .bars li {
  flex: 0 1 25%;
}
.chartBars2 .bars li .bar {
  box-shadow: 0 0 20px #222;
}
.chartBars3 {
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid #666;
  border-right: 1px solid #666;
}
.chartBars3 .bars {
  border-color: #666;
  padding: 0;
}
.chartBars3 .bars li .bar {
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  font-size: 22px !important;
}
.chartBars3 .bars li .bar:after {
  font-size: 0.6em !important;
}
.chartBarsWrap.chartBarsHorizontal {
  flex-direction: column;
}
.chartBarsWrap.chartBarsHorizontal .bars b {
  color: #eee;
  width: 100%;
  position: absolute;
  bottom: initial;
  top: 1em;
  left: -102%;
  text-align: right;
}
.chartBarsWrap.chartBarsHorizontal .chartBars {
  height: 40vh;
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars {
  border: 0;
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar {
  width: 0;
  padding-top: 10px;
  height: 80% !important;
  text-align: right;
  font-size: 1.5em;
  transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1);
}
.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar:after {
  font-size: 0.6em !important;
  margin-right: 20px;
}
.bars li .bar.greenBarFlat {
  background-color: #6b8193;
}
.bars li .bar.blueBarFlat {
  background-color: #61c3e2;
}
.bars li .bar.orangeBarFlat {
  background-color: #9ea2ab;
}
.bars li .bar.darkBarFlat {
  background-color: #376cb3;
}
.chartBarsHorizontal .chartBars .bars {
  flex-direction: column;
}
.chartGrid {
  color:#fce7d6;
  position: absolute;
  width:100%;
  height: 100%;
  top:12%;
}
.gridBar {
  position:absolute;
  bottom:0;
  height:112%;
  display: flex;
  align-items: flex-end;
}
.gridBar.one {
  left:0;
}
.gridBar.two {
  left:calc(25% - 21px);
}
.gridBar.three {
  left:calc(50% - 21px);
}
.gridBar.four {
  left:calc(75% - 21px);
}
.gridBar.five {
  left:calc(100% - 42px);
}
.gridBar:before {
  content: '';
  position: absolute;
  height: 88%;
  background-color: #4c5e6e;
  width: 1px;
  bottom: 12%;
  left: 50%;
}
.gridBar.one:before {
  left:4px;
}
.chartLabel {
  position: absolute;
  display: block;
  left:5%;
  top:60%;
  transform:translateY(-50%);
  z-index: 2;
	line-height:1;
	text-align: left;
}

@media screen and (min-width: 600px) {
  .bar:before {
    font-size: 2em !important;
  }
  .chartBars3 .bar:before {
    font-size: 1.5em !important;
  }
}

.gm-style-iw {
	color:#000;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

.show-for-portrait {
	display:none;
}
#landscape-cover {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background: #020609;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
}

@media (pointer:coarse) and (orientation:portrait) {
	#landscape-cover {
		display:none;
	}
	.hide-for-portrait {
		display:none !important;
	}
}
@media (pointer:coarse) and (orientation:landscape) {
	#landscape-cover {
		display:flex;
	}
}
@media (orientation:portrait) {

	.mob-buttons {
		margin: 0 !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mob-buttons a {
    padding: 2vw 0;
    color: #010D1D !important;
    text-align: center;
    margin: 1vw !important;
    width: 35vw !important;
    font-size: 2.4vw;
	}

	#map-icons {
		width:100%;
	}
	.parallax-line {
		position: relative;
	}
	.hide-for-portrait {
		display:none !important;
	}
	.show-for-portrait {
		display:block;
	}
	.show-for-portrait.flex {
		display:flex;
	}
	.show-for-portrait.inline {
		display:inline;
	}

	body {
		overflow-x:hidden;
		overflow-y:scroll;
		font-size: 4vw;
		background-color: #1C2C40;
	}
	main {
		background:linear-gradient(24.6deg, #1C2C40 26.36%, #003666 75.44%);
		height: auto;
	}
	header {
		background: linear-gradient(24.6deg, #1C2C40 26.36%, #003666 75.44%) !important;
    padding: 4vw;
    align-items: center;
	}
	h1, .h1 {
		font-size: 8vw;
	}
	h2, .h2 {
		font-size: 6vw;
	}
	#header-logo img {
		height:14vw;
	}
	#open-nav {
		padding-right:0;
	}
	#open-nav img {
		height:5vw;
		top:-1vw;
	}
	#nav-menu {
		padding:30vw 0;
	}
	#nav-menu a {
		font-size: 8vw;
		margin:4vw 0;
		text-align: center;
	}

	.w100 {
		width:100%;
	}
	.col-inner {
		padding:10px 0;
	}

	#portrait {
		padding-top:22vw;
	}
	.mob-wrapper {
		width:90%;
		margin:auto;
		position: relative;
	}

	.bg-image {
		pointer-events: none;
		width: 100%;
		top: 0;
		left: 0;
		position: absolute;
		height: auto;
	}

	.mob-phases-wrapper {
		background-color: #1c355f;
		top: -2vw;
	}
	.mob-phases-wrapper .bg-image {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: auto;
	}
	#mob-skilled {
		padding: 1vw 0;
		margin-top: -6vw;
		margin-bottom: -6vw;
	}
	#mob-skilled .parallax-line {
		top: -6vw;
	}
	#mob-skilled .h1 {
		margin-top: 0;
	}
	#mob-phases {
		padding:10vw 0 0;
		top: -5vw;
	}
	#mob-phases img {
		height: 24vw;
		width: auto;
		margin: 5vw 0;
	}
	#mob-phases p.absolute {
		opacity:0.5;
		right:0;
		top:4vw;
	}
	#mob-phase-one {
		background:linear-gradient(192deg, rgba(13, 39, 58, 0) 11.1%, #020609 57.81%);
		padding-bottom:10vw;
	}
	.mob-accom {
		position: relative;
	}
	.mob-accom .bg-image {
		position: absolute;
		width: 100%;
		height: auto;
	}
	.mob-accom .mob-wrapper {
		position: relative;
		padding-top: 5vw;
	}
	.mob-accom .mob-wrapper img {
		display: block;
		width: 80%;
		height: auto;
		margin: auto;
	}

	.mob-accom .mob-wrapper a:first-of-type img, .mob-accom .mob-wrapper a:last-of-type img {
		width: 70%;
	}

	.mob-accom .mob-wrapper .mob-feeds a {
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5vw;
		color: #fff;
	}

	.mob-feeds {
		padding-top: 5vw;
		padding-bottom: 5vw;
	}
	.mob-accom .mob-wrapper .mob-feeds a img {
		width: 100%;
		height: auto;
	}
	.phase-info-img {
		margin-top:1vw;
	}
	#mob-phase-two {
		background:linear-gradient(192deg, #005199 9.32%, #00407A 80.81%);
		padding-bottom:10vw;
	}
	#mob-phase-three {
		background:linear-gradient(192deg, #1F3148 26.55%, #00407A 173.98%);
		padding-bottom:10vw;
	}

	#mob-location {
		padding:1vw 0 0;
		position: relative;
	}
	#map-inner {
    border-radius: 0;
    height: 70vh;
		margin-top:10vw
	}
	#mob-drive-times {
		margin: 2vw 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
	}
	#mob-drive-times a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    flex-basis: 30%;
    border: 2px solid;
    margin-bottom: 4vw;
    padding: 2vw 0;
    border-radius: 8vw;
	}
	#mob-drive-times a.active {
		background-color: #99f3ff;
		text-decoration:none;
	}
	#mob-pois .col.quarter {
	    padding: 0 5vw;
	    text-align: center;
	}
	#local-occupiers ol {
		column-count: 2;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    counter-reset: li;
	}
	#local-occupiers li {
		position: relative;
    margin: 0 0 2vw 6vw;
    list-style: none;
	}
	#local-occupiers li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -6vw;
    font-size: 2vw;
    color: #000;
    background-color: #fff;
    display: block;
    width: 4vw;
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    top: 0.5vw;
	}
	#mob-sustainability {
		background-image:url('./img/sustainability-bg.jpg');
		background-size:cover;
		padding:1vw 0 10vw;
	}
	#mob-demographics {
		background:linear-gradient(200deg, #005199 9.32%, #00407A 80.81%);
		padding:1vw 0 10vw;
	}
	#mob-demographics .parallax-line {
		top: -6vw;
	}
	.stats {
		margin-top: 12vw;
		justify-content: space-between;
	}

	.stats .col {
		width: 95%;
	}

	.charts {
		position: static;
	}

	.chart {
		margin: 12vw 0;
		padding:0 10vw;
	}

	.big-stat {
		color: #99f3ff;
		font-weight: 900;
		font-size: 14vw;
		margin: 0;
		line-height: 1;
	}
	.donutLabel {
		font-size: 4vw;
	}
	#mob-gallery .wrapper {
		top:0;
		left:5%;
		z-index: 1;
	}
	#mob-gallery-images {
		width: 100%;
    height: 60vh;
    overflow-x: scroll;
    position: relative;
	}
	#mob-gallery-images .gallery-img {
		height: 100%;
    width: auto;
    max-width: unset;
	}
	#mob-gallery-nav {
		padding: 4vw;
    position: relative;
	}
	.download-img {
		padding:0;
	}
	#mob-downloads .btn {
		width:70%;
		display: block;
		margin:auto;
		max-width: 500px;
	}
	#mob-contacts {
		background-image:url('./img/contacts-bg-mob.jpg');
		background-size:cover;
		padding:1vw 0 10vw;
	}
	#mob-contacts img {
		margin: 10vw 0 0;
		width:70%;
		max-width:400px;
	}
	#mob-developers {
		margin-top: 12vw;
	}
	#mob-developers p.big-text {
		margin: 0;
	}
	#mob-developers img {
		height:6vw;
		width:auto;
	}
}


/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}