/* Oh hi there, Nosey Nellie! */
/* (c) Lee Crockford - although this style sheet does utilise many elements of GetSkeleton.com and a range of code snippets from across the web. Obvs the copyright of those elements remain with the original creators.  */

/* Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html, body {margin: 0; padding: 0; height: 100%; width: 100%;}
html { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background: #fff; }
body { margin: 0; font: 16px/1 sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: 400; font-family: "Lato", "HelveticaNeue", Helvetica, Arial, sans-serif; color: #43465e; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
::-moz-focus-inner { padding: 0; border: 0; }
::-moz-selection { background: #9edfd1; color: #25252d; }
::selection { background: #9edfd1 ; color: #25252d;}
img { max-width: 100%; height: auto; border: 0; }
h1, h2, h3, h4, p, blockquote, figure, ol, ul { margin: 0; padding: 0;}
h1, h2, h3, h4 { font-size: inherit; }

/* System & Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */

main, li { display: block; }
* { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
button { overflow: visible; border: 0; font: inherit; -webkit-font-smoothing: inherit; letter-spacing: inherit; background: none; cursor: pointer; }
p, ul li, th, td, label, legend {margin: 1rem 0; line-height: 1.5; padding-bottom: .5rem; font-size: 1rem;}
h1, h2 { font-weight: 700; text-transform: uppercase;}
h1, h2, nav p, #banner p { font-family: "Montserrat", "HelveticaNeue", Helvetica, Arial, sans-serif; margin-bottom: 1.2rem;}
h1 { font-size: 2.0rem; line-height: 1;}
h2 { font-size: 1.6rem; line-height: 1.2;}
h3 { font-size: 1.4rem;  }
a { color: #2bcaaf;  text-decoration: none; font-weight: 700; }
a:hover { color: #f7546d; cursor: pointer;}
ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { margin-bottom: 0; display: list-item;}
.custom-list { list-style: none; padding-left: 0;}
.custom-list li { position: relative; margin-left: 1rem; padding-left: 1.5rem;  padding-bottom: 0; }
.custom-list li:before { content: ''; width: .7rem; height: .7rem; position: absolute; background-image: url('/images/button-arrow-right-green.svg'); background-size: cover; background-position: center; left: 0; top: 50%; transform: translateY(-50%); }

sup {font-size: .7rem; color:#696b7c;}
code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #f9f9f9; border: 1px solid #f6f6f6; border-radius: .5rem; }
pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }
table { border-collapse: collapse; }
th, td { padding: 1.5rem .5rem;} 
td:first-of-type {font-weight: 700;}
th {border-bottom: 3px solid #50aefb;}
.totals { border-top: 1px solid #c6c7c9;} 

.container { width: 90%; margin-left: 5%; }
.wow { visibility: hidden; }
.split {height: 6rem; }
.center {text-align: center; }
.left {text-align: left; }
.right {text-align: right; }
.float-right { float: right; }
.float-left { float: left; }
.relative {position: relative; }
.absolute {position: absolute; }
strong { font-weight: 700;}
hr { margin: 2rem 0; border-width: 0; border-top: .5px solid #ddd; width:50%; margin-left: 25%;} 

.is-fullheight { min-height: 100vh; }
.is-90height { min-height: 90vh; }
.is-80height { min-height: 80vh; }
.is-70height { min-height: 70vh; }
.is-halfheight { min-height: 50vh; }
.grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }
.grid-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: .5rem; padding: 1rem; }
.grid .grid-item .grid  { margin: 0; padding: 0 .5rem; }
.grid .grid-item .grid .grid-item {margin: 0; padding: 0 .5rem; }
.is-top { -ms-flex-item-align: start; align-self: flex-start; }
.is-bottom { -ms-flex-item-align: end; align-self: flex-end; }
.is-left {justify-content: left;}
.is-middle { -ms-flex-item-align: center; align-self: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }
.is-middle-and-fullheight { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.is-80 { -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; }
.is-60 { -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; }
.is-twothirds {-webkit-box-flex: 0;-ms-flex: 0 0 65%;flex: 0 0 65%; }
.is-half { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.is-third { -webkit-box-flex: 0; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; }
.is-40 { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; }
.is-quarter { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; }
.is-fifth { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; }
.is-15th { -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; }
.is-tenth { -webkit-box-flex: 0; -ms-flex: 0 0 10%; flex: 0 0 10%; }
.big-letter {font-size: 2rem; margin-left: 1rem;}

.i-5 {width: 5%}
.i-10 {width: 10%}
.i-15 {width: 15%}
.i-20 {width: 20%}
.i-25 {width: 25%}
.i-33 {width: 33%}
.i-50 {width: 50%}
.i-66 {width: 66%}
.i-75 {width: 75%}
.i-80 {width: 80%}
.i-85 {width: 85%}
.i-100 {width: 100%}

/* Buttons & Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: auto; padding: 1rem 3rem; color: #fff; text-align: center; font-size: .9rem; line-height: 1;text-decoration: none; white-space: nowrap; background-color: #FF557E; border:none; cursor: pointer; border-radius: 2rem; font-family: "Montserrat", "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: 600; text-transform: uppercase; white-space: normal;
word-wrap: break-word;}
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: rgba(255,255,255.5); background: #43465e; box-shadow: 0px 5px 20px rgba(0,0,0,.05);}
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; }
button img {width: .6rem; margin: 0 0 0 .4rem;}
button:hover img {margin: 0 -.2rem 0 .6rem;}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }  
input, textarea, select { font-family: "Lato", sans-serif; width: 100%; background: #f6f6f6; color: #43465e; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-align: left;  padding: 1.5rem; border: 2px solid #f6f6f6; box-shadow: none; border-radius: 1rem;}
textarea {height: 100% !important;}
input[type="postcode"] {width: 50%;}
input:focus, textarea:focus, select:focus { border: 2px solid #CACBD2; outline: none; box-shadow: 0px 5px 20px rgba(0,0,0,.05);}
::-webkit-input-placeholder { font-weight: 700; color: #9D9FAB; } ::-moz-placeholder { font-weight: 700; color: #9D9FAB; } :-ms-input-placeholder { font-weight: 700; color: #9D9FAB; } :-moz-placeholder { font-weight: 700; color: #9D9FAB; }
select { appearance: none;  -webkit-appearance: none;  -o-appearance: none; -moz-appearance: none; width: 75%;  text-overflow: "";  /*Removes default arrow from firefox*/ outline: none; background-color: none; color: #43465e; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; border-radius: 1rem; /* future proofing */ -khtml-border-radius: 1rem; /* for old Konqueror browsers */
background: url(/images/arrow-down.svg) no-repeat calc(100% - 1rem) #f6f6f6;
background-size: .7rem;
}
select:hover {cursor: pointer;}
.select-arrow { margin-left: -2em; pointer-events: none; color: #fff;}
fieldset { padding: 0; border-width: 0; }
input[type="checkbox"], input[type="radio"] { display: inline; } 
label > .label-paragraph { display: inline-block; margin-left: .5rem; font-weight: normal; }
sub {line-height: 1 !important;}

fieldset { padding: 0; border-width: 0; }
input[type="checkbox"], input[type="radio"] { display: inline; } 
label > .label-paragraph { display: inline-block; margin-left: .5rem; font-weight: normal; }
.input-checkbox { width: 2rem; height: 2rem; position: relative; background:none; }
.input-checkbox label { width: 2rem; height: 2rem; position: absolute; cursor: pointer; background: rgba(255,255,255,.2); top: 0; border:none; }
.input-checkbox label:after { content: ''; width: 1rem; height: .5rem; position: absolute; top: .65rem; left: .5rem; border: 3px solid #fff;   border-top: none;   border-right: none;   background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all .2s; }
.input-checkbox label:hover::after { opacity: 0.2; }
.input-checkbox input[type=checkbox] { visibility: hidden; }
.input-checkbox input[type=checkbox]:checked + label:after { opacity: 1; }
.checkbox-text {margin-left: 4rem;}

.input-slider { -webkit-appearance: none; width: 50%; height: .5px; border-radius: .5rem; background: rgba(28,33,38,.25); outline: none; }
.input-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #ff4f2a; cursor: pointer; }
.input-slider::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #ff4f2a; cursor: pointer; }
.input-slider::-moz-range-thumb:hover, .slider::-webkit-slider-thumb { width: 1.5rem; height: 1.5rem; }

.input-select { position: relative; height: 3rem; background: #fff; box-shadow: none; border: .25px solid #c6c7c9; }
.input-select:after { content: ''; position: absolute; top: 0; width: 0; height: 0; right: 10px; bottom: 0; margin: auto; border-style: solid; border-width: 5px 5px 0 5px; border-color: red transparent transparent transparent; pointer-events: none;}
.input-select:before { width: 30px; position: absolute; top: 1px; right: 1px; bottom: 1px; background: #fff; content: ''; pointer-events: none; }
.input-select select { font-size: 14px; border: none; box-shadow: none; border-radius: 0; background: transparent; height: 100%; width: 100%; cursor: pointer; outline: none; padding-right: 35px; padding-left: 15px; moz-appearance: none; -webkit-appearance:none;}
.input-select select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.input-select select::-ms-expand { display: none; }
.input-select select:focus { border-color: #c6c7c9; }

.popup { width: 100%; background: #fff; box-shadow: 0 0 1rem rgba(28,33,38,.05); padding: 2rem 1rem; }



/* Custom Universal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.opacity-half {opacity: .5;}
.opacity-75 {opacity: .75;}
.opacity-full {opacity: 1;}
.d-hide {display: none; }
.background {} /*This is a place holder. Technically it does nothing, until accessibility is clicked. Don't remove from HTML, even though it looks redundant)*/
.no-border {border:none !important;}
.test {background: rgba(255,0,0,.8) !important; }
.is-icon { -webkit-box-flex: 0; -ms-flex: 0 0 5%; flex: 0 0 5%; }
.image-2-1 { width: 100%; padding-top: 50%; overflow: hidden; position: relative; }
.image-2-1 img, .image-2-1 video {width: 100%; height: auto; margin: auto; position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; }
img + .caption, iframe + .caption, .image-2-1 + .caption {margin: 2px 0 0 0; font-size: .7rem; text-align: right;}
a:hover svg {cursor: pointer;}

iframe {background: #fff;}
video {width: 80%; height: auto; margin: 0; padding:0; }
.youtube { position: relative; overflow: hidden; padding-top: 56.25%; width: 100%; }
.youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.push-20 { margin-left: 20%; }
.no-padding {padding: 0 !important;}

.huge  {font-size: 3.2rem; line-height: 1.3; width: 100%;}
.p-none {padding: 0;}
.p-small {padding: 1rem 3rem;}
.p-large {padding: 1rem 8rem;}
.pull-margin {margin-left:-7rem;}


/* Accessibility */
#a-toggle {position: fixed; bottom: 1rem; left: 0; z-index: 1000; background: #43465E; color: #fff; padding: .5rem 1rem .5rem 2rem;}
#a-toggle a {color: #fff;}
#a-toggle a:hover {color: rgba(255,255,255,.5);}
.a-white {background: #fff !important;}
.a-black {color: #000 !important; opacity: 1 !important;}
.a-link {color: #0000ff !important; text-decoration: underline !important; }
.a-1rem {font-size: 1.3rem !important;}
.a-2rem {font-size: 2rem !important;}
.a-3rem {font-size: 3rem !important;}
.a-hamburger, .a-hamburger::before, .a-hamburger::after  {background-color: #000 !important;}
.a-field {border: 2px solid #000 !important; }
.a-button {color: #fff !important; background: #0000ff !important; font-size: 1.5rem !important; }
.grid .grid-item .grid, .grid .grid-item .grid .grid-item:first-of-type {padding-left: 0;}



/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Navigation */
nav {background: #20E9C1; position: absolute; padding: 1rem; width: 100%; z-index: 100;}
 nav .grid {padding: 0 25%;} 
 nav .grid-item {width: 50%;padding-bottom: 1rem; margin: 0; border-bottom: .5px solid #fff;}
 nav p {padding: 0 0 .2rem; margin: 0; line-height: 1; text-transform: uppercase;}
 nav a {  margin: 0 .5rem; font-size: .8rem; color: rgba(67,70,94,.5); font-weight: 600; }
/* nav a:hover {color: #fff;}*/

/* Banner */
#banner { background: #20E9C1; position: relative;}
#banner h1 {font-size: 5vw; color:#43465e;}
#banner p {font-size: 1.2rem;}

#about { padding: 20vh 0;}
#about .grid-item {background: rgba(0,20,20,.02); padding: 3rem 4rem; border-radius: 1rem;}
#about hr { margin: -.5rem 0 .5rem 0; border-width: 0; border-top: .5px solid #c6c7c9; width:100%; margin-left: 0;} 
#banner lottie-player {padding: 5rem;}
.highlight {color: #979dbf;}


#letter-section {background: #20E9C1; padding: 20vh 0;}
.letter {background: #fff; border-radius: 1rem; width: 80%; margin-left: 10%; padding:2rem; box-shadow: 0 0 20px rgba(0,0,0,.1);}
.lettersent .grid-item {padding: 0 1.5rem;}

#banner .scroll { position: absolute; width: 100%; bottom: 2rem; }
#banner .scroll .arrow { position: absolute;
  left: 50%;
  transform: translate(-50%, -100%); 
  	width: 0;
      height: 0;
      border-left: 1.2rem solid transparent;
      border-right: 1.2rem solid transparent;
      border-top: 1.8rem solid #8BDA9D;}

.entry {background: #f6f6f6; margin-bottom: 4rem; border-radius: 1rem;  padding: 3rem 4rem;}
.writtenby {opacity: .4; font-weight: 700; font-size: .7rem}
.question {text-transform: uppercase; font-weight: 700; font-family: "Montserrat", Helvetica, sans-serif; font-size: 1.1rem;}





/* Footer */
footer {background: #43465E; padding: 4rem 0;} 
footer img {height: 1rem;}
footer p {font-size: .8rem; color: #fff;}
footer a:hover img {opacity: .5}
footer span {padding: 0 .5rem}
footer .glyph {padding: 0 .25rem; width: 1rem;}
footer .glyph:hover  path {fill: #50aefb;}
footer .grid {padding-top: .5rem; padding-bottom: 1rem;}





/* Mobile  
––––––––––––––––––– */

@media screen and (max-width: 740px) {
	.container {width: 95%; margin-left:2.5%;}
	th, td { padding: 1rem;} 

	.m-center {text-align: center;}
	.m-left {text-align: left;}
	.m-right {text-align: right;}
	.m-hide {display: none;}
	.d-hide {display: block;}

	.m-is-top { -ms-flex-item-align: start; align-self: flex-start; }
	.m-is-middle { -ms-flex-item-align: center; align-self: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }
	.m-is-bottom { -ms-flex-item-align: end; align-self: flex-end; }

	.grid-item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
	.m-is-half {-webkit-box-flex: 0;-ms-flex: 0 0 44%;flex: 0 0 44%;}
	.m-is-tenth {-webkit-box-flex: 0;-ms-flex: 0 0 9%;flex: 0 0 9%;}
	.m-is-fifth {-webkit-box-flex: 0;-ms-flex: 0 0 18%;flex: 0 0 18%;}
	.m-is-rest {-webkit-box-flex: 0;-ms-flex: 0 0 80%;flex: 0 0 80%;}
	.m-is-third {-webkit-box-flex: 0;-ms-flex: 0 0 29%;flex: 0 0 29%; }
	.m-is-quarter {-webkit-box-flex: 0;-ms-flex: 0 0 21%;flex: 0 0 21%; }
	.m-is-twothirds {-webkit-box-flex: 0;-ms-flex: 0 0 65%;flex: 0 0 65%; }
	.m-is-autoheight { min-height: 10vh; }
	.swatch {width: 2rem; padding-top: .5rem; padding-bottom: .5rem;}

	.m-i-5 {width: 5%}
	.m-i-10 {width: 10%}
	.m-i-15 {width: 15%}
	.m-i-20 {width: 20%}
	.m-i-25 {width: 25%}
	.m-i-33 {width: 33%}
	.m-i-50 {width: 50%}
	.m-i-66 {width: 66%}
	.m-i-75 {width: 75%}
	.m-i-80 {width: 80%}
	.m-i-85 {width: 85%}
	.m-i-100 {width: 100%}

	#a-toggle {bottom: .5rem; padding: .5rem 1rem .5rem 1rem;}

	.accessibility-ratio {margin-left: 0;width: 100%;}
	.accessibility-ratio img { width: 1rem; margin: 0 .25rem; }

	footer { padding-top: 4rem; padding-bottom: 4rem; }
	footer .grid,  footer .grid .grid-item { padding: 0; margin: 0;}

	nav .grid {padding: 0;}
	nav .grid-item {padding: 0; border-bottom: none;}
	nav p a {font-size: .7rem; }

	#banner h1 {font-size: 10vw;}
	#about .grid-item {padding: 3rem 2rem;}
	.letter {width: 95%; margin-left: 2.5%; padding: 1rem .5rem;}
	#about { padding: 10vh 0 20vh; }

	button {padding: 1rem 2rem;}
	.big-letter {font-size: 1.5rem; margin-left: .5rem;}
	.entry {margin:0 0 4rem 0; padding: 2rem;}



}