/*
FONTS

font-family:"HelveticaNeueLight";
font-family:"HelveticaNeueBold";
font-family:"Classic Roman";

*/


@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=b65e8f80-9e75-4b83-a43c-f1cc1f3bd57b");
    @font-face{
        font-family:"HelveticaNeueLight";
        src:url("fonts/f9c5199e-a996-4c08-9042-1eb845bb7495.woff2") format("woff2"),url("fonts/2a34f1f8-d701-4949-b12d-133c1c2636eb.woff") format("woff");
    }
    @font-face{
        font-family:"HelveticaNeueBold";
        src:url("fonts/800da3b0-675f-465f-892d-d76cecbdd5b1.woff2") format("woff2"),url("fonts/7b415a05-784a-4a4c-8c94-67e9288312f5.woff") format("woff");
    }

    @font-face{
        font-family:"Classic Roman";
        src:url("fonts/Classic Roman Std Regular.woff2") format("woff2"),url("fonts/Classic Roman Std Regular.woff") format("woff");
    }

/* VARIABLES */

:root {
  --default-font: HelveticaNeueLight;
  --default-font-size: 20px;
  --default-input-font-size: 20px;

  --col-primary: #000;
  --col-primary-rgb: 0,122,209;

  --col-accent: #000;
  --col-accent-rgb: 0, 0, 0;

  --col-text: #000;
  --col-input: #000;
  --col-placeholder: #000;
  --col-input-bg: #fff;

  --col-button: #F58634;
  --col-button-rgb: 255, 255, 255;

  --col-link: #000;
  --col-link-rgb: 0,0,0;

  --col-link-hover: #000000;
  --col-link-hover-rgb: 0, 0, 0;

  --col-error: #ff6633;
  --col-error-rgb: 255, 51, 0;

  --col-attention: #ff6633;
  --col-attention-rgb: 255, 51, 0;

  --col-warning: #f5b00e;
  --col-warning-rgb: 245, 176, 14;

  --col-missing: #ff6633;
  --col-missing-rgb: 255, 51, 0;

  --col-burger: #000;

  --col-border: #DDDDDD;
  --col-border-rgb: 190, 190, 190;

  --dim-site-width: 1440px;
  --dim-default-space: 80px;
  --dim-input-height: 50px;

	--col-bg: #000000;
	--col-fg: #ffffff;
	--col-txt: #000000;

  --vh: 1vh;
}

/* theme */

body { font-weight: normal;}
html.overlay-active, html.overlay-active body { max-height: 100vh; overflow: hidden;}

/*CORE HTML*/

h1 {font-family:"Classic Roman"; color: #000; line-height: 1.12; font-size: 60px; margin-bottom: 20px; letter-spacing: 0;  text-transform: uppercase; }
h2 {font-family:"Classic Roman"; color: #000; line-height: 1.25; font-size: 60px; margin-bottom: 40px; letter-spacing: 0;  text-transform: uppercase;}
h2 small {font-size: 0.66em; display: block}
h3 {font-family:HelveticaNeueBold; line-height: 1; font-size: 20px; margin-bottom: 80px; display: block; width: 100%; position: relative; text-align: center; text-transform: uppercase;}
h3 span {font-family:HelveticaNeueBold; line-height: 1; font-size: 20px; display: table; width: auto; padding: 0 30px; text-transform: uppercase; background: #fff; text-align: center; margin: 0 auto; position: relative; z-index: 3;}
h3:after { content: ""; display: block; position: relative; margin-top: 30px; width: 0%; height: 10px; background: #FFCC2A; left: 50%; transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; z-index: 2;}
h3:before { content: ""; display: block; position: absolute; bottom: -10px; width: 30px; height: 30px; background: #FFCC2A; left: 49%; z-index: 3; border-radius: 30px;}
.in-view h3:after { width: 50%; }
h3.r:after {  }
.in-view h3.r:after { left: 0%; width: 50%; }
h3.r:before { left: 49%; }

h3.orange:before, h3.orange:after { background: #F58634; }
h3.green:before, h3.green:after{ background: #00A859; }
h3.yellow:before, h3.yellow:after { background: #FFCC2A; }
h3.purple:before, h3.purple:after { background: #A8508A; }
h4 {font-family:"Classic Roman"; color: #000; line-height: 1.25; font-size: 40px; margin-bottom: 50px; letter-spacing: 0;  text-transform: uppercase;}

h5 {font-family:HelveticaNeueBold; color: #000; line-height: 1.25; font-size: 20px; margin-bottom: 5px; margin-top: 15px; text-align: center;}



p span { color: var(--col-primary)}
p { margin-bottom: 40px; max-width: 900px; margin-left: auto; margin-right: auto; line-height: 2;}


b {font-weight: normal; font-family:HelveticaNeueBold;} 
div > a, p > a { font-family:HelveticaNeueBold;}
div > a:hover, p > a:hover { color: var(--col-primary) }



/*CONTAINERS*/

section { padding: 0 20px}
section.full { max-width: 1920px;padding: 0}
section.short { max-width: 1680px;}
section.shortest { max-width: 1280px;}
section.masthead { padding: 0; margin-bottom: 180px; max-width: 1920px;}
img.full { display: block; width: 100%; margin: 0 auto 30px}
img.full:last-child { margin-bottom: 0}



/*BUTTONS*/
div.buttons { display: flex; gap: 28px; margin-top: 20px; justify-content: center; align-items: center;}
a.btn { display: table; line-height: 40px; color: #fff; font-size: 15px; font-family:HelveticaNeueBold;  padding: 0px 22px; background-color: #000; margin: 40px auto 0;}
a.btn:hover { color: #fff; background-color: #000}
a.btn.yellow { color: #000; background-color: #FFCC2A;}
a.btn.orange {  background-color: #F58634;}
a.btn.green { background-color: #00A859;}
a.btn.purple { background-color: #A8508A;}

/*HEADER AND NAV*/
header { display: block; width: 100%; padding-bottom: 0px; position: relative; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
header div.colours { display: table; width: auto; margin: 0 auto;}
header div.colours img { display: block; width: 100%; margin: 0 auto; }
header div.logo { display: block; width: 100%; margin: 80px auto 0; }
header div.logo img { display: block; width: 100%; margin: 0 auto; max-width: 392px;}
header div.logo2 { display: block; margin: 55px auto 80px}
header div.logo2 img { display: block; margin: 0 auto; width: 360px; max-width: 50%;}

nav { display: flex; justify-content: center; gap: 120px;}
nav a { display: block; font-size: 20px; font-family:"Classic Roman"; text-transform: uppercase;padding-top: 45px; line-height: 1.1;}
nav a:hover, nav a.active { color: #FFCC2A}
nav a:nth-child(2):hover, nav a:nth-child(2).active { color: #F58634}
nav a:nth-child(3):hover, nav a:nth-child(3).active { color: #00A859}
nav a:nth-child(4):hover, nav a:nth-child(4).active { color: #A8508A}
nav a:nth-child(5):hover, nav a:nth-child(5).active { color: #FFCC2A}
nav a:nth-child(6):hover, nav a:nth-child(6).active { color: #F58634}
div.tagline {display: block; font-size: 40px; font-family:"Classic Roman"; text-transform: uppercase;margin-top: 45px; margin-bottom: 80px; text-align: center}

header.attached div.colours {position: fixed; top: -200px; left: 0; opacity: 0; background: #fff; z-index: 99; height: 60px; border-bottom: 1px solid #000; width: 100%;}
header.attached {padding-top: 77px;}
header.attached.visible div.colours {top: 0px; opacity: 1; transition: all .5s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
header.attached div.colours {margin: 0 0 0 auto;}
header.attached div.colours a.logo {top: 10px; left: 10px; width: 100px; height: 40px; position: absolute; display: block; background: url(/img/logo.svg) no-repeat left center; background-size: contain;}
header.attached div.colours img { display: none;}
/*header.attached div.logo, header.attached div.tagline { display: none;}*/
/*header.attached div.logo2 { position: absolute; top: 0; left: 0; margin: 0; padding: 10px 0 10px 10px}*/
/*header.attached div.logo2 img { width: 50px; max-width: 100%; }*/
header.attached nav { justify-content: flex-end; gap: 40px; margin: 0  0 0 auto; padding-right: 20px;}
header.attached nav a { font-size: 14px; padding-top: 0px; line-height: 60px; }

div.bottom-tagline {font-size: 20px; margin: 0 auto 40px;font-family:"Classic Roman"; display: block; text-align: center;}
footer {padding: 30px 20px 50px; width: 100%; display: block; text-align: center;}
footer div.logo img { display: block; width: 100%;max-width: 160px; margin: 0 auto}
footer p.social { display: flex; gap: 30px;   justify-content: center; align-items: center; font-size: 18px; color: #000; margin: 40px auto;}
footer div.disclaimer p { font-size: 15px;  text-align: center; max-width: 1240px;line-height: 1.25;}
footer a { font-family:"HelveticaNeueLight"; }

/*ELEMENTS*/

div.grid { display: flex; gap: 40px; justify-content: space-between; align-items: flex-start;}
div.grid.x2 > div { width: 50%;}
div.grid.x3 > div { width: 33.33%;}
div.grid.x4 > div { width: 25%;}
div.grid.columns { flex-direction: column}
div.grid.start { justify-content: flex-start}
div.grid.center { justify-content: center}
div.grid.even { justify-content: space-evenly}
div.grid.around { justify-content: space-around}
div.grid.stretch { align-items: stretch;}
div.grid.middle { align-items: center;}
div.grid.bottom { align-items: flex-end;}
div.grid.top { align-items: flex-start;}

div.table { display: grid;width: 100%; }

/*LINES*/

div.lines1 { position: relative; margin-bottom: 180px}
div.lines1:after { content:""; position: absolute; width: calc(100% - 100px); height: calc(100% + 100px); top: 0; left: 100px; border-left: 10px solid #FFCC2A; border-bottom: 10px solid #FFCC2A; border-radius:  0 0 0 100px; z-index: 3;}

div.lines2 { width: 80%; height: 100px; border-top: 10px solid #FFCC2A; border-right: 10px solid #FFCC2A; border-radius:  0 100px 0 0px; margin: 0 auto 0 0; position: relative; left: 0px}

div.lines3 { width: 100%; height: 100px; border-bottom: 10px solid #FFCC2A; border-left: 10px solid #FFCC2A; border-radius:  0 0px 0 100px; margin: 0 0 0 auto; position: relative; right: 0px; top: -80px; max-width: 1580px}

div.lines4 { position: absolute; width: calc(100% - 100px); height: calc(100% + 100px); top: 0; right: 100px; border-right: 10px solid #F58634; border-bottom: 10px solid #F58634; border-radius:  0 0 100px 0px; z-index: 3;}
div.lines4:after { content:""; position: absolute; width: 110px; height: 10px; top: 70%; right: -110px; background-color: #F58634; z-index: 3;}
div.lines4:before { content:""; position: absolute; width: 30px; height: 30px; top: 70%; right: -20px; background-color: #F58634; z-index: 4; border-radius: 30px; margin-top: -10px; }

div.lines5 { position: relative; margin-bottom: 110px; margin-top: 30px; padding-top: 50px}
div.lines5:after { content:""; position: absolute; width: calc(100% - 100px); height: 100%; top: 0; left: 0px; border-right: 10px solid #F58634; border-top: 10px solid #F58634; border-bottom: 10px solid #F58634; border-radius:  0 100px 100px 0; z-index: 3; }
div.lines6 { margin: 100px 0 0}

div.lines6 > div { width: 34%; display: block; height: 100px; margin-left: auto; margin-right: 0}
div.lines6 > div:first-child { width: calc(66% + 9.5px); border-top: 10px solid #F58634; border-right: 10px solid #F58634; border-radius: 0 100px 0 0; margin-left: 0; margin-right: auto}
div.lines6 > div:last-child { border-bottom: 10px solid #F58634; border-left: 10px solid #F58634; border-radius: 0 0 0 100px}

div.lines7 { margin: 100px 0 0}
div.lines7 > div { width: 85%; display: block; height: 100px; margin-left: auto; margin-right: 0}
div.lines7 > div:first-child { width: calc(15% + 10px); border-top: 10px solid #F58634; border-right: 10px solid #F58634; border-radius: 0 100px 0 0; margin-left: 0; margin-right: auto}
div.lines7 > div:last-child { border-bottom: 10px solid #F58634; border-left: 10px solid #F58634; border-radius: 0 0 0 100px}

div.lines8 { display: block; height: 10px; width: 50%; background-color: #F58634; position: relative; margin: 85px auto 85px 0}
div.lines8:after {content:""; display: block; width: 30px; height: 30px; border-radius: 30px; position: absolute; top: 50%; margin-top: -15px; z-index: 4; background: #F58634; right: -1px; }

div.lines9 { position: relative; margin-bottom: 180px}
div.lines9:after { content:""; position: absolute; width: calc(100% - 100px); height: 100%; top: 100px; left: 0px; border-right: 10px solid #00A859; border-bottom: 10px solid #00A859; border-top: 10px solid #00A859; border-radius:  0 100px 100px 0; z-index: 3;}

div.lines10 { position: absolute; width: 100%; height: calc(100% + 100px); top: 0; right: 0px;border-bottom: 10px solid #A8508A; z-index: 3;}
div.lines10:after { content:""; position: absolute; width: 10px; height: 100%; bottom: 0%; right: 100px; background-color: #A8508A; z-index: 3;}
div.lines10:before { content:""; position: absolute; width: 30px; height: 30px; bottom: -20px; right: 90px; background-color: #A8508A; z-index: 4; border-radius: 30px; }

div.lines11 { position: absolute; width: calc(100% - 100px); height: calc(100% + 100px); top: 0; right: 100px; border-right: 10px solid #F8CD51; border-bottom: 10px solid #F8CD51; border-radius:  0 0 100px 0px; z-index: 3;}
div.lines11:after { content:""; position: absolute; width: 110px; height: 10px; top: 70%; right: -110px; background-color: #F8CD51; z-index: 3;}
div.lines11:before { content:""; position: absolute; width: 30px; height: 30px; top: 70%; right: -20px; background-color: #F8CD51; z-index: 4; border-radius: 30px; margin-top: -10px; }

/*CONTENT*/



div.subnav { width: 700px; max-width: 100%; margin:  0 0 auto; text-align: left; }
div.subnav > div { margin-top: 70px;}
div.subnav > div a { display: block; padding-left: 40px; font-size: 20px; font-family:"HelveticaNeueBold"; text-transform: uppercase; padding-top: 20px; border-top: 10px solid #000; position: relative; margin-bottom: 90px;}
div.subnav > div a:before { content:""; display: block; position: absolute; width: 30px; height: 30px; top: -20px; left: -1px; border-radius: 30px; background: #000}
div.subnav > div a:last-child { margin-bottom: 0px;}
div.subnav > div a:nth-child(1) { border-color: #FFCC2A}
div.subnav > div a:nth-child(2) { border-color: #F58634}
div.subnav > div a:nth-child(3) { border-color: #00A859}
div.subnav > div a:nth-child(4) { border-color: #A8508A}
div.subnav > div a:nth-child(1):before { background: #FFCC2A}
div.subnav > div a:nth-child(2):before { background: #F58634}
div.subnav > div a:nth-child(3):before { background: #00A859}
div.subnav > div a:nth-child(4):before { background: #A8508A}


div.slick-slider { padding-bottom: 50px;}
ul.slick-dots { bottom: 0}
ul.slick-dots li button { background-color: #DDDDDD; opacity: 1}
ul.slick-dots li.slick-active button { background-color: #F58634;}
div.slideshow div.thumb { padding: 0 20px;}

img.bottom-logo {display: block; margin: 0 auto 40px}
section img.colours{display: block; margin: 0 auto 70px}

img.transit { display: block; max-width: 560px; margin: 100px auto 0px}


div.grid.g1 > div { width: 674px;}
div.grid.g1 > div:first-child { width: calc(100% - 674px); padding-top: 120px; padding-right: 40px;}
div.grid.g1 p { max-width: 640px; margin: 0 auto 0 0;}

div.grid.g2 { margin-top: -40px}
div.grid.g2 > div { width: 674px; padding-top: 160px; }
div.grid.g2 > div:first-child { width: calc(100% - 674px); padding-right: 40px; padding-top: 0}
div.grid.g2 img { display: block; margin: 0 auto 0 0; max-width: 536px}

div.grid.g3 { align-items: center;}
div.grid.g3 > div { width: 690px; }
div.grid.g3 > div:first-child { width: calc(100% - 690px); }
div.grid.g3 > div:first-child img { display: block; margin: 0 auto}

div.grid.g4, div.grid.g5 { width: 1400px; max-width: 100%; margin: 0 auto;}
div.grid.g5 { max-width: calc(100% - 200px);}
div.grid.g4 > div { width: 810px; margin-bottom: 70px}
div.grid.g4 > div:first-child { width: calc(100% - 810px); padding-top: 100px; padding-right: 40px;}
div.grid.g4 p { max-width: 640px; margin: 0 auto 0 0;}

div.grid.g5 { gap: 0}
div.grid.g5 > div { width: 50%; border-bottom: 1px solid #000; padding-bottom: 50px; padding-top: 50px;}
div.grid.g5.no-border > div { border: 0}
div.grid.g5 h4 { margin-bottom: 0px; line-height: 1.1;}
div.grid.g5 p { font-size: 25px; margin: 0 auto 0 0;}

div.grid.g6 { gap: 140px; padding-left: 140px;}
div.grid.g6 > div:first-child { width: 400px;}
div.grid.g6 > div:last-child { width: calc(100% - 540px);}
h4.g6 { margin-bottom: 100px; padding-left: 140px}

h6 {font-size: 20px;line-height: 40px; padding-left: 60px; font-family:"HelveticaNeueBold"; text-align: left; position: relative; margin-top: 40px; text-transform: uppercase;}
h6 span {position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: url(/img/svg/plus.svg) #FFCC2A no-repeat center center; background-size: 20px 20px; border-radius: 40px; }
h6.ui-accordion-header-active span {background-image: url(/img/svg/minus.svg)}
div.ui-accordion-content { border-left: 5px solid #FFCC2A; padding-left: 40px; margin-top: 20px; position: relative; left: 20px}
div.ui-accordion-content ol li { font-size: 20px; margin-bottom: 10px;font-family:"HelveticaNeueLight";}
h6.orange span {background-color: #F58634}
div.ui-accordion-content.orange {border-color: #F58634}
h6.green span {background-color: #00A859}
div.ui-accordion-content.green {border-color: #00A859}
h6.purple span {background-color: #A8508A}
div.ui-accordion-content.purple {border-color: #A8508A}
h6.lblue span {background-color: #9AC4D9}
div.ui-accordion-content.lblue {border-color: #9AC4D9}
h6.blue span {background-color: #289DD8}
div.ui-accordion-content.blue {border-color: ##289DD8}
h6.black span {background-color: #000}
div.ui-accordion-content.black {border-color: #000}


div.grid.g7 { align-items: flex-end; gap: 0; margin-bottom: 50px}
div.grid.g7 > div { width: 800px;}
div.grid.g7 > div:first-child { width: calc(100% - 800px); padding-right: 50px;  }

div.grid.g8 { align-items: flex-end; gap: 0; margin-bottom: 50px}
div.grid.g8 > div { width: 800px;}
div.grid.g8 > div:last-child { width: calc(100% - 800px); padding-left: 50px;  }

div.grid.g9 { align-items: flex-end; gap: 0; margin-top: 50px}
div.grid.g9 > div { width: 800px;}
div.grid.g9 > div:first-child { width: calc(100% - 800px); padding-right: 140px;  }



p.right { text-align: right; margin: 0 0 40px auto}


h4.orange {margin: 0 auto 100px; text-align: center; display: block; width: 100%; position: relative;}
h4.orange span {color: #F58634; width: 790px; max-width: 100%; margin: 0 auto; text-align: center; display: block; padding: 0 35px; position: relative;}
h4.orange b {height: 10px; width: calc(50% - 385px); background: #F58634; display: block; position: absolute; top: 50%; margin-top: -5px;}
h4.orange b:after {content:""; display: block; width: 30px; height: 30px; border-radius: 30px; position: absolute; top: 50%; margin-top: -15px; z-index: 4; background: #F58634}
h4.orange b:first-child {left:0; }
h4.orange b:first-child:after {right:-1px; }
h4.orange b:last-child:after {left: -1px}
h4.orange b:last-child {right:0 }
h4.green {margin: 0 auto 100px; text-align: center; display: block; width: 100%; position: relative;}
/*h4.green {color: #00A859; max-width: 1170px; margin: 0 auto 80px; text-align: center;}*/
h4.green span {color: #00A859; width: 1040px; max-width: 100%; margin: 0 auto; text-align: center; display: block; padding: 0 35px; position: relative;}
h4.green b {height: 10px; width: calc(50% - 620px); background: #00A859; display: block; position: absolute; top: 50%; margin-top: -5px;}
h4.green b:after {content:""; display: block; width: 30px; height: 30px; border-radius: 30px; position: absolute; top: 50%; margin-top: -15px; z-index: 4; background: #00A859}
h4.green b:first-child {left:0; }
h4.green b:first-child:after {right:-1px; }
h4.green b:last-child:after {left: -1px}
h4.green b:last-child {right:0 }

/*.margin-top-150 { margin-top: 150px !important}*/

div.floorplan-legend { display: flex; justify-content: space-between; gap: 0px; max-width: 1380px; margin: 0 auto 100px}
div.floorplan-legend span { font-size: 40px; font-family:"Classic Roman"; color: #000; text-transform: uppercase; padding-bottom: 30px; border-bottom: 10px solid #00A24F}
div.floorplan-legend span:nth-child(2) { border-color: #9CDCF9}
div.floorplan-legend span:nth-child(3) { border-color: #FFC62C}
div.floorplan-legend span:nth-child(4) { border-color: #A3427F}
div.floorplan-legend span:nth-child(5) { border-color: #FA782F}

div.builder {margin-bottom: 200px; }
div.builder h4 {margin-bottom: 50px; margin-top: 30px;}
div.builder p {margin: 0 auto 40px 0;}
div.builder p + img { margin-top: 70px;}
div.builder img { max-width: 1080px; }
div.builder img:first-child { margin-bottom: 30px}


div.iframeexp {width: 100%; aspect-ratio: 16/9; background: #000}

table.floorplans { width: calc(100% - 20px); max-width: 980px; margin: 0 auto;}
table.floorplans a { text-decoration: underline}
table.floorplans a:hover { color: #A8508A;}
table.floorplans td, table.floorplans th { font-size: 18px; padding: 25px 10px; border-bottom: 1px solid #eee; text-align: center; font-family:"HelveticaNeueLight";}
table.floorplans th { font-family:"Classic Roman";}
table.floorplans td:first-child, table.floorplans th:first-child{ width: 200px; text-align: left}
table.floorplans td:last-child, table.floorplans th:last-child{ width: 200px; text-align: right}


form { font-family:HelveticaNeueLight; margin: 0px auto 0 0; width: 100%; max-width: 720px; }
div.form-col { padding-left: 60px; align-items: flex-end; padding-top: 50px;}

div.checkbox label { font-size: 16px; padding-left: 46px; min-height: 30px; padding-top: 1px; font-family:HelveticaNeueLight;}
div.checkbox label:before { width: 30px; height: 30px; }
div.checkbox input:checked + label:before { background-size: 15px 10px;}

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] {border-radius: 0px; padding-left: 0px; font-family:HelveticaNeueLight; border-top: 0; border-left: 0; border-right: 0}
textarea { height: 240px; border-radius: 12px; font-family:HelveticaNeueLight; padding: 20px}
button[type="submit"] { display: inline-block; background:#000; padding: 0 30px; border: 1px solid #DDDDDD; font-family:HelveticaNeueBold; font-size: 15px; line-height: 40px; color: #fff; margin: 0 0 0 auto}
button[type="submit"]:hover { background: #fff; color: #00A859}

.select2-container--default .select2-selection--single { border-radius: 0px; border-color: var(--col-border);  border-top: 0; border-left: 0; border-right: 0}
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0px; text-transform: none;}
.select2-container--default .select2-selection--single .select2-selection__arrow { background-size: 20px 10px; background-position: right center;}
.select2-container--default .select2-selection--single .select2-selection__arrow:hover {background-size: 20px 10px; }

fieldset + fieldset { margin-top: 60px}

p.form-disclaimer { text-align: left; font-size: 12px; color: #ccc; width: 100% !important}

div.reveal-response p { text-align: left; font-family:HelveticaNeueLight; font-size: 24px;}

div.grid-map { gap: 74px;padding-top: 20px}
div#registration h3 { text-align: left; margin-bottom: 50px}

div.form-row { margin-bottom: 24px}
/*ANIMATIONS*/
.slide-in-bottom { transform: translateY(300px); opacity: 0;}
.slide-in-top { transform: translateY(-300px); opacity: 0;}
.slide-in-top2 { transform: translateY(-200px); opacity: 0;}
.slide-in-left { transform: translateX(-500px); opacity: 0;}


.in-better-view.slide-in-bottom {opacity: 1;	animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-bottom {	opacity: 1; animation: slide-in-bottom 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top {	opacity: 1;animation: slide-in-top 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top2 {	opacity: 1;  animation: slide-in-top2 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 0.3s;}
.in-better-view .slide-in-left {	opacity: 1;  animation: slide-in-left 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.js-animate-1 > div { transform: translate3D(0, -300px, 0); opacity: 0}
.in-better-view .js-animate-1 > div  { transform: translate3D(0, 0px, 0); opacity: 1; transition: all 1.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s}
.in-better-view .js-animate-1 > div:nth-child(2)  { transition: all 1.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s }
.in-better-view .js-animate-1 > div:nth-child(3)  { transition: all 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s }

.grid-advantages .columns p { opacity: 0; transform: translateY(-300px); }
.in-better-view .grid-advantages .columns p { opacity: 1; transform: translateY(0);}
.in-better-view .grid-advantages .columns p:nth-child(1) { transition: all 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) .1s}
.in-better-view .grid-advantages .columns p:nth-child(2) { transition: all 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s}
.in-better-view .grid-advantages .columns p:nth-child(3) { transition: all 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s}


@keyframes slide-in-top {
  0% { transform: translateY(-300px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-top2 {
  0% { transform: translateY(-200px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-bottom {
  0% {transform: translateY(300px);opacity: 0;  }
  100% { transform: translateY(0);opacity: 1;
  }
}@keyframes slide-in-left {
  0% {transform: translateX(-300px);opacity: 0;  }
  100% {transform: translateX(0);opacity: 1;  }
}

@media only screen and (max-width: 1920px) {
	div.lines3 { width: 1580px; max-width: 80%}
}

@media only screen and (max-width: 1680px) {
	:root {
	  --default-font-size: 18px;
	  --default-input-font-size: 18px;
	  }

	 p, div.builder p {margin-bottom: 30px}

	h1 {font-size: 48px; }
	h2 {font-size: 48px; margin-bottom: 30px; }
	h3 {font-size: 18px; margin-bottom: 60px; }
	h3 span {font-size: 1em; padding: 0 25px; }
	h4 {font-size: 32px; margin-bottom: 40px; }
	h5 {font-size: 18px; }
	h6 {font-size: 18px; }

	header div.logo img { max-width: 260px;}
	header div.logo2 img {max-width: 260px;}
	header div.logo2 { margin: 50px auto}
	div.tagline { font-size: 32px; margin-bottom: 50px}
	nav { gap: 60px}

	section.masthead { margin-bottom: 150px}

	div.grid.g6, h4.g6 { padding-left: 80px;}
	
	div.floorplan-legend span { font-size: 32px; padding-bottom: 20px; }
	div.builder { margin-bottom: 150px}
	div.builder h4 { margin-bottom: 30px}
	div.builder img { }

	div.ui-accordion-content ol li { font-size: 18px}

	div.floorplan { padding: 0 20px;}

	form { margin-top: 50px;}

	div.grid-map { gap: 80px;}
	div#registration h3 { text-align: left; margin-bottom: 30px}
	div#registration form { margin-top: 0px}

}

@media only screen and (max-width: 1440px) {
	div.grid.g4 { padding: 0 20px}
	div.grid.g4 > div { width: 50% !important;}
	div.grid.g6 { gap: 0}
	div.grid.g6, h4.g6 { padding-left: 40px;} 
	div.grid.g6 > div:first-child { width: 340px; padding-right: 40px}
	div.grid.g6 > div:last-child { width: calc(100% - 300px);}
	h6 {padding-left: 40px; line-height: 24px; font-size: 14px; margin-top: 24px}
	h6 span {width: 24px; height: 24px; background-size: 12px auto; border-radius: 24px}
	div.ui-accordion-content ol li { font-size: 14px}
	div.ui-accordion-content { padding-left: 30px}

	div.grid.g7 > div { width: 66%}
	div.grid.g7 > div:first-child { width: 34%; padding-right: 20px;}
	div.grid.g8 > div { width: 66%}
	div.grid.g8 > div:last-child { width: 34%; padding-left: 20px;}

	div.grid.g5 > div { padding-top: 20px; padding-bottom: 20px; }
	div.grid.g5 p { font-size: 18px}

	h4.green span { max-width: 80%}
	h4.green b { width: 10%}

	div.grid.g9 > div { width: 50% !important}
	div.grid.g9 > div:first-child { padding-right: 50px}

	div.grid.g1 > div, div.grid.g2 > div { width: 50% !important}
	div.grid.g2 { margin-top: 20px}
	div.grid.g2 img { width: 100%}


	/*LINES*/

	div.subnav > div a { border-width: 5px; padding-left: 30px; margin-bottom: 60px; font-size: 18px; padding-top: 15px}
	div.subnav > div a:before {height: 15px; width: 15px; border-radius: 15px; top: -10px}

	section.masthead { margin-bottom: 100px}

	div.lines1 { position: relative; margin-bottom: 100px}
	div.lines1:after { content:""; position: absolute; width: calc(100% - 50px); height: calc(100% + 50px); top: 0; left: 50px; border-left: 5px solid #FFCC2A; border-bottom: 5px solid #FFCC2A; border-radius:  0 0 0 50px; z-index: 3;}

	div.lines2 { width: 80%; height: 50px; border-top: 5px solid #FFCC2A; border-right: 5px solid #FFCC2A; border-radius:  0 50px 0 0px; margin: 0 auto 0 0; position: relative; left: 0px}

	div.lines3 { height: 50px; border-bottom: 5px solid #FFCC2A; border-left: 5px solid #FFCC2A; border-radius:  0 0px 0 50px; margin: 0 0 0 auto; position: relative; right: 0px; top: -80px; }

	div.lines4 { position: absolute; width: calc(100% - 50px); height: calc(100% + 50px); top: 0; right: 50px; border-right: 5px solid #F58634; border-bottom: 5px solid #F58634; border-radius:  0 0 50px 0px; z-index: 3;}
	div.lines4:after { content:""; position: absolute; width: 55px; height: 5px; top: 70%; right: -55px; background-color: #F58634; z-index: 3;}
	div.lines4:before { content:""; position: absolute; width: 15px; height: 15px; top: 70%; right: -10px; background-color: #F58634; z-index: 4; border-radius: 30px; margin-top: -5px; }

	div.lines5 { position: relative; margin-bottom: 55px; margin-top: 30px; padding-top: 40px}
	div.lines5:after { content:""; position: absolute; width: calc(100% - 50px); height: 100%; top: 0; left: 0px; border-right: 5px solid #F58634; border-top: 5px solid #F58634; border-bottom: 5px solid #F58634; border-radius:  0 50px 50px 0; z-index: 3; }

	div.lines6 { margin: 50px 0 0}
	div.lines6 > div { width: 34%; display: block; height: 50px; margin-left: auto; margin-right: 0}
	div.lines6 > div:first-child { width: calc(66% + 5px); border-top: 5px solid #F58634; border-right: 5px solid #F58634; border-radius: 0 50px 0 0; margin-left: 0; margin-right: auto}
	div.lines6 > div:last-child { border-bottom: 5px solid #F58634; border-left: 5px solid #F58634; border-radius: 0 0 0 50px}

	div.lines7 { margin: 50px 0 0}
	div.lines7 > div { width: 85%; display: block; height: 50px; margin-left: auto; margin-right: 0}
	div.lines7 > div:first-child { width: calc(15% + 5px); border-top: 5px solid #F58634; border-right: 5px solid #F58634; border-radius: 0 50px 0 0; margin-left: 0; margin-right: auto}
	div.lines7 > div:last-child { border-bottom: 5px solid #F58634; border-left: 5px solid #F58634; border-radius: 0 0 0 50px}

	div.lines8 { display: block; height: 5px; width: 50%; background-color: #F58634; position: relative; margin: 80px auto 80px 0}
	div.lines8:after {content:""; display: block; width: 15px; height: 15px; border-radius: 15px; position: absolute; top: 50%; margin-top: -7px; z-index: 4; background: #F58634; right: -1px; }

	div.lines9 { position: relative; margin-bottom: 100px}
	div.lines9:after { content:""; position: absolute; width: calc(100% - 50px); height: 100%; top: 50px; left: 0px; border-right: 5px solid #00A859; border-bottom: 5px solid #00A859; border-top: 5px solid #00A859; border-radius:  0 50px 50px 0; z-index: 3;}

	div.lines10 { position: absolute; width: 100%; height: calc(100% + 50px); top: 0; right: 0px;border-bottom: 5px solid #A8508A; z-index: 3;}
	div.lines10:after { content:""; position: absolute; width: 5px; height: 100%; bottom: 0%; right: 50px; background-color: #A8508A; z-index: 3;}
	div.lines10:before { content:""; position: absolute; width: 15px; height: 15px; bottom: -10px; right: 45px; background-color: #A8508A; z-index: 4; border-radius: 15px; }

	div.lines11 { position: absolute; width: calc(100% - 50px); height: calc(100% + 50px); top: 0; right: 50px; border-right: 5px solid #F8CD51; border-bottom: 5px solid #F8CD51; border-radius:  0 0 50px 0px; z-index: 3;}
	div.lines11:after { content:""; position: absolute; width: 55px; height: 5px; top: 70%; right: -55px; background-color: #F8CD51; z-index: 3;}
	div.lines11:before { content:""; position: absolute; width: 15px; height: 15px; top: 70%; right: -10px; background-color: #F8CD51; z-index: 4; border-radius: 15px; margin-top: -7px; }

	h4.orange b {height: 5px; margin-top: -5px;}
	h4.orange b:after {width: 15px; height: 15px; border-radius: 15px; margin-top: -7px; }
	h4.green b {height: 5px; margin-top: -7px;}
	h4.green b:after {width: 15px; height: 15px; border-radius: 15px; margin-top: -7px; }

	h3:after {height: 5px; margin-top: 20px;}
	h3:before {bottom: -5px; width: 15px; height: 15px; border-radius: 15px}


	div.floorplan-legend span { padding-bottom: 10px; border-width: 5px}

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

	nav { gap: 5px; justify-content: space-between; padding: 0 10px}
	nav a { padding-top: 25px; font-size: 18px}

	div.grid.g4 > div:first-child { padding-top: 0}

	div#registration h3 { margin-bottom: 20px}
	fieldset + fieldset { margin-top: 30px}

	div.grid.g3 > div { width: 50% !important}
	div.grid.g3 > div:first-child { padding: 0 60px 0 20px}

	div.builder img {max-width: 100%}

}

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

	:root {
	  --default-font-size: 16px;
	  --default-input-font-size: 16px;
	  }


	h1 {font-size: 36px; }
	h2 {font-size: 36px; margin-bottom: 30px; }
	h3 {font-size: 16px; margin-bottom: 40px; }
	h3 span {font-size: 1em; padding: 0 20px; }
	h4 {font-size: 24px; margin-bottom: 30px; }
	h5 {font-size: 16px; }
	h6 {font-size: 16px; }

	header div.logo { margin-top: 50px;}
	header div.logo img { max-width: 200px;}
	header div.logo2 img {max-width: 200px;}
	header div.logo2 { margin: 40px auto}
	div.tagline { font-size: 24px; margin-bottom: 40px}

	div.floorplan-legend span { font-size: 20px; }

	div.builder p + img { margin-top: 10px}

	div.grid-map { gap: 40px}
	form { margin: 0px auto; }
	div#registration h3 { text-align: center; }
	div.reveal-response p { text-align: center; }

}
@media only screen and (max-width: 980px) {
	nav a { font-size: 16px; padding-top: 15px}
	header.attached nav { gap: 20px}

	section.masthead { margin-bottom: 80px}

	div.grid.g2 > div { padding-top: 20px}
	div.lines3 { top: -50px}

	div.grid.g6, h4.g6 { padding-left: 20px;} 
	h4.g6 { padding-right: 20px;} 


	:root {
	  --default-font-size: 16px;
	  --default-input-font-size: 16px;
	    --dim-default-space: 50px;
	  }

	  p { line-height: 1.5}

	h6 {padding-left: 30px; line-height: 20px; font-size: 12px; margin-top: 20px}
	h6 span {width: 20px; height: 20px; background-size: 10px auto; border-radius: 20px}
	div.ui-accordion-content ol li { font-size: 12px}
	div.ui-accordion-content { padding-left: 24px;left: 6px}

	div.subnav > div { margin-top: 40px}
	div.subnav > div a { margin-bottom: 40px}

	div.builder { margin-bottom: 100px}

	div.bottom-tagline  { font-size: 16px; margin-bottom: 30px; margin-top: 100px;}
	img.bottom-logo { width: 200px; margin-bottom: 25px; }
	img.bottom-logo + img.colours{ width: 200px; margin-bottom: 50px}

	div.grid.g6 > div:first-child { width: 280px; padding-right: 25px;}
	div.grid.g6 > div:last-child { width: calc(100% - 280px); }

	form { margin-top: 0px;}
	fieldset + fieldset { margin-top: 30px}

	div.form-row.x_2_31 { flex-wrap: wrap}
	div.form-row.x_2_31 > div { width: 100% !important}
	button[type="submit"] { margin-top: 20px; font-size: 14px; margin: 20px auto 0}

	footer div.disclaimer p { font-size: 12px}
}

@media only screen and (max-width: 760px) {
		header {background: #fff; position: relative; padding-top: 60px;}
		header div.burger {display: block; position: fixed;}
		header div.logo2 {margin-top: 50px}
		header div.logo {position: fixed; display: block !important; right: 10px; top: 18px; margin: 0; z-index: 91}
		header div.logo img {height: 24px; width: auto; margin: 0 0 0 auto;}
		header div.colours { height: 60px; border-bottom: 1px solid #000; position: fixed; background: #fff; top: 0 !important; width: 100%; z-index: 90 !important; display: block; opacity: 1!important}
		header div.colours img { display: block !important}
		header div.colours > a { display: none !important}
		nav { position: fixed; flex-direction: column; right: -200vw; top: 60px; height: calc(100vh - 60px); background: #fff; width: 100vw; opacity: 0; z-index: 100; padding: 100px 0; justify-content: space-between !important; gap: 0 !important; padding: 100px 0 !important}
		nav a { font-size: 24px !important; text-align: center !important; display: block !important; width: 100% !important;line-height: 1!important; padding: 0 !important}
		header.active nav { right: 0; opacity: 1 }

		h1 {font-size: 24px;}
		h2 {font-size: 24px; margin-bottom: 20px; }
		h3 {font-size: 14px; margin-bottom: 30px; }
		h3 span {font-size: 1em; padding: 0 25px; }
		h4 {font-size: 20px; margin-bottom: 20px; }
		h5 {font-size: 16px; }

		section > h1, section > h2, section > p { padding: 0 20px;}


		img.transit { margin: 50px auto; max-width: 80%;}

		section.masthead { margin-bottom: 50px}

		div.grid-map { flex-direction: column}
		div.grid-map > div { width: 100% !important; padding: 0 !important}

		footer div.disclaimer p { font-size: 10px}

		div.subnav { padding-left: 20px}

		div.grid { flex-direction: column}
		div.grid.g7, div.grid.g1 { flex-direction: column-reverse}
		div.grid.g1 > div, 
		div.grid.g2 > div, 
		div.grid.g3 > div, 
		div.grid.g4 > div, 
		div.grid.g6 > div { display: block; width: 100% !important; padding: 0 !important} 
		div.grid.g4 > div { margin-bottom: 0}

		div.grid.g7 > div, div.grid.g8 > div, div.grid.g9 > div { width: 100% !important; padding: 0 !important}
		div.grid.g7, div.grid.g8 , div.grid.g9 {gap: 20px}
		div.grid.g9 { margin-top: 20px}

		.margin-top-150 { margin-top: 50px !important}


		div.lines3 { display: none;}

		div.grid.g5 { flex-direction: row; width: calc(100% - 40px); max-width: 100%; margin-right: auto; margin-left: 20px}
		div.grid.g5 h4 { font-size: 16px}
		div.grid.g5 > div p { font-size: 12px}
		div.lines5 { padding-top: 10px}

		h4.g6 { margin-bottom: 30px}
		div.grid.g6 { flex-direction: column-reverse}
		div.grid.g6 > div:first-child { margin-top: 30px}

		h2.right, p.right { text-align: center !important; padding: 0}

		h2 br { display: none}
		h4.green , h4.orange  {margin-bottom: 30px}
		h4.green b, h4.orange b {display: none;}
		h4.green span, h4.orange span {width: 100%; max-width: 100%; padding: 0 20px}
		div.lines1 { margin-bottom: 50px}
		div.lines1:after { width: calc(100% - 20px); height: calc(100% + 20px); left: 20px; }
		div.lines4 { width: calc(100% - 20px); height: calc(100% + 20px); right: 20px; }
		div.lines4:after { width: 25px; }

		div.lines5:after { width: calc(100% - 20px); }

		div.lines9 { margin-bottom: 50px}
		div.lines9:after { width: calc(100% - 20px); top: 20px} 

		div.lines10 { height: calc(100% + 20px); }
		div.lines10:after { right: 20px; }
		div.lines10:before { right: 15px; }

		div.lines11 { width: calc(100% - 20px); height: calc(100% + 20px); right: 20px; }
		div.lines11:after { width: 25px; }
		div.lines11:before { }

		div.floorplan-legend { gap: 4px; justify-content: space-between; margin-bottom: 50px}
		div.floorplan-legend span { font-size: 11px}

		div.builder img:first-child { max-width: 40%}
		div.builder img.builder-cc { max-width: 70%}
		div.builder { margin-bottom: 0}


		table.floorplans td, table.floorplans th { font-size: 14px; padding: 15px 5px; }
		table.floorplans td:first-child, table.floorplans th:first-child{ width: auto; }
		table.floorplans td:last-child, table.floorplans th:last-child{ width: auto; }


}

@media only screen and (max-width: 380px) {
		table.floorplans td, table.floorplans th { font-size: 12px; padding: 15px 5px; }

}