/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
-------------------------------------------------------------------------------- 
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grid
-------------------------------------------------------------------------------- */ 
.container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  
.row {position:relative;}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 100%;
    padding: 0 30px; }
    
   .social {float:right;}
}

@media (min-width: 760px) {
  .one-half.column { width: 50%; margin:0;}
  .offset-by-half.column { margin-left:50%;}
}

/* For devices larger than 860px */
@media (min-width: 860px) {

  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 33.33%; margin:0;}
  .two-thirds.column              { width: 66.66%; margin:0;}



  /* Offsets */
  .offset-by-one.column:first-child,
  .offset-by-one.columns:first-child          { margin-left: 8.66666666667%; }
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 12.66666666667%; }
  .offset-by-two.column:first-child,
  .offset-by-two.columns:first-child,
  .offset-by-twoAB.columns         { margin-left: 17.3333333333%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-fiveAB.columns       { margin-left: 39.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Base Styles
-------------------------------------------------------------------------------- */ 
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
  
body {
  font-size: 1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.2;
  font-weight: 400;
  font-family: 'Source Serif Pro', serif;
  color: #333e46; 
  position: relative;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  
  html, body {
    height: 100%;
    min-height: 100%;
}


/* Typography  
-------------------------------------------------------------------------------- */ 

  h1 { font-size: calc(54px + (80 - 54) * (100vw - 320px) / (1500 - 320)); font-family: 'Source Serif Pro', serif; font-weight: 900; line-height:1.1; color:#FFF;
    background: linear-gradient(#3fbdad,#3fbdad) left bottom 10px no-repeat;
    background-size: 100% 8px;
    transition: all 0.3s;
    display: inline;
    margin-bottom: 10px;
    position: relative;
  }
  h1:after {content: "";
    display: block;
    position: relative;  margin-bottom:30px;}
  h2 {  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1500 - 320)); font-family: 'Montserrat', sans-serif; font-weight: 700; line-height:1; margin:40px 0 10px 0; letter-spacing:0.1em; transition: all 0.3s; text-transform:uppercase; color:#005a77; }
  h3 { font-size: calc(24px + (32 - 24) * (100vw - 320px) / (1500 - 320)); font-family: 'Source Serif Pro', serif; font-weight: 300; line-height:1.1; margin:0 0 50px 0; }
  h4 { font-size: calc(54px + (80 - 54) * (100vw - 320px) / (1500 - 320)); font-family: 'Source Serif Pro', serif; font-weight: 900; line-height:1.1; color:#FFF;
    background: linear-gradient(#3fbdad,#3fbdad) left bottom 10px no-repeat;
    background-size: 100% 8px;
    transition: all 0.3s;
    display: inline;
    margin-bottom: 10px;
    position: relative;
  }
  h4:after {content: "";
    display: block;
    position: relative;  margin-bottom:30px;}
  h5 { font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1500 - 320)); font-family: 'Montserrat', sans-serif; font-weight: 700; line-height:1; margin:40px 0 100px 0; letter-spacing:0.1em; transition: all 0.3s; text-transform:uppercase; }
  
 p {margin:0 0 30px 0;}
  .intro { font-size: calc(26px + (32 - 26) * (100vw - 320px) / (1500 - 320));
	font-family: 'Source Serif Pro', serif;
	line-height:115%;
	text-align:left;
	margin-bottom:2.5rem;
	color:#005a77;
	}

p {margin:0;}
.sub-page section p+p { text-indent: 2.5em;}
.sub-page section p+p.title { text-indent: 0em;}
p.discover{margin:0 !important;}

	
p.name {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin: 2.5rem 0 0;
    letter-spacing: .2em;
    color: #333e46;
}

p.title {
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin: 0 0 2.5rem 0;
    color: #333e46;
}	
	

header h5 {margin:30px 30px 10px 30px; color:#3fbdad;}
	
footer h5, .carousel-holder h5 {margin: 0 0 40px 0}
footer p {font-size: calc(12px + (14 - 12) * (100vw - 320px) / (1500 - 320)); font-family: 'Source Serif Pro', serif; margin:0 0 60px 0;}
footer a, footer a:visited {color: #FFF; 	-moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}
footer a:hover, footer a:active, footer a:focus {color: #333e46;}
.social {width: 80px !important;}
blockquote {font-size: calc(26px + (32 - 26) * (100vw - 320px) / (1500 - 320)); font-family: 'Source Serif Pro', serif; font-weight:900; line-height:1.1; color:#FFF; margin:0; padding:0; }
.flex blockquote {color:#005a77; margin-top:60px;}
.image-slider-logo p, .fact-box p, .fact-box-rec p, .text-container p {font-size: calc(20px + (24 - 20) * (100vw - 320px) / (1500 - 320)); font-family: 'Montserrat', sans-serif; font-weight: 600; line-height:1.05;}
.fact-box-sm p, p.discover{font-family: 'Montserrat', sans-serif; font-weight: 400; line-height:1.05;}


p.big-fig {font-size: calc(80px + (146 - 80) * (100vw - 320px) / (1500 - 320));  font-family: 'Source Serif Pro', serif; font-weight: 900; margin:0; line-height:1.05;}
.fact-box-sm h5, .fact-box-sm p.big-fig  {color:#3fbdad; margin: 0 0 60px 0;}
a.left-button h4 { 
    background: linear-gradient(#FFF,#FFF) left bottom no-repeat;
    background-size: 100% 8px;
}

a.left-button:hover h4 { 
    background: linear-gradient(#3fbdad,#3fbdad) left bottom no-repeat;
    background-size: 100% 8px;
}

	
@media screen and (min-width: 1500px) {
	h1, h4 { font-size: 80px} 
	h2 { font-size: 20px; }
	h3 { font-size: 32px;}
	blockquote { font-size: 32px}
	h5 { font-size: 20px;}
	footer p{ font-size: 14px}
	.intro { font-size: 32px;}
	p.facts { font-size: 80px;}
	.image-slider-logo p, .fact-box p, .fact-box-rec p, .text-container p { font-size: 24px;}
	p.big-fig { font-size: 146px;}
}

@media screen and (max-width: 399px) {
	h1, h4{ font-size: 54px}
	h2 { font-size: 16px}
	h3 { font-size: 24px}
	blockquote { font-size: 26px}
	#introduction p{ font-size: 20px}
	h5 { font-size: 16px;  margin:20px 0 60px 0;}
	footer p{ font-size: 12px}
	.intro { font-size: 26px;}
	p.facts { font-size: 67px;}
	.image-slider-logo p, .fact-box p, .fact-box-rec p, .text-container p { font-size: 20px;}
	p.big-fig { font-size: 80px;}
}

p.caption {font-size:14px; font-weight:300; margin:20px 0;}


/* Links
-------------------------------------------------------------------------------- */ 
a {
  color: #3fbdad; text-decoration:none; -moz-transition:all  .2s ease-in; -o-transition:all  .2s ease-in; -webkit-transition:all  .2s ease-in;}
a:hover {
  color: #333e46;  text-decoration:none;}
  
  a.home-link {color:#FFF;}
    a.home-link:hover {color:#333e46;}

/*Sections
-------------------------------------------------------------------------------- */ 
/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src$=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src$=".svg"] {
    width: 100%; 
  }
}
    
    header {  
    position:fixed;
    width: 100%;
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    opacity: 0;
    -moz-transition:opacity .2s ease-in; -o-transition:opacity .2s ease-in; -webkit-transition:opacity .2s ease-in;
    top:-100px;
    
    }
header .container {padding-top:20px; padding-bottom:20px; background-color:#000; top:-50px; -moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -webkit-transition:all .2s ease-in;}

.sub-page header .container {padding-top:20px; padding-bottom:20px; background-color:#000; top:-50px; -moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -webkit-transition:all .2s ease-in; border-bottom:none;}

header.open, #video-bg.open {left: calc(50% - 8px); }

header.show .container {top:0; }

/* sticky nav */
.show {
  opacity: 1;
  top:0;
  
}
header.active {z-index:3000;}
    
#logo, #logo img {width:231px; -webkit-box-sizing: border-box; box-sizing: border-box;}

footer {
	background-color:#3fbdad;
    margin: 0 auto;
    width: 100%;
    max-width:1400px;
    color: #FFF;
    padding:30px 0;
    }
    
#opener {
 	color:#FFF;
    width: 100%;
    position:relative;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    min-height: 100vh;
 }
 
.stat {
 	color:#FFF;
    width: 100%;
    position:sticky;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

 }

#opener .container, .stat .inner-stat .container{height:100%;}

.stat .inner-stat {height: 50vh; position:relative; margin-bottom:10vh;}
.inner-stat h5 {margin-bottom:20px;}

.stat .inner-header {position:sticky; top:80px;}

@media screen and (min-width: 860px) {
.stat .inner-header {position:sticky; top:50px;}
}

  #wrap {
    width: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
            background-color:#FFF;
	} 



.snapper {
  height: 100vh;
  width: 100%;
  overflow: auto;
  scroll-snap-type: y mandatory;
	border: 1px solid gray;

}

.snapped {scroll-snap-align: start;}
    
section {width:100%; max-width:1400px; margin: 0 auto; }
section a:hover {color:#FFF;}
section a .image {overflow:hidden;}
section a:hover .image-bg{ transform: scale(1.10);}
section#options  a:hover .image-bg{ transform: scale(1.0);}
section a:hover .st-arrow {animation: scrolly 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards 10;}
section a:hover .discover{position: absolute; left: 110px;}
section a:hover .red-bg, section a:hover .gray-bg{background:#000; }

.green-bg, #opener.green-bg {background:#3fbdad; color:#FFF; }
.black-bg {background:#000; color:#FFF;}
.gray-bg, #opener.gray-bg {background-color:#333e46; color:#FFF;}
.red-bg {background:#cf2249; color:#FFF;}
.yellow-bg {background:#faa519; color:#FFF;}
.cream-bg {background:#ede7dc;}
.blue-bg {background:#005a77; color:#FFF;}
.light-blue-bg {background:#59c6d1; color:#FFF;}
.image{color:#FFF; padding-top:225px;}

.fact-box h3, .fact-box-sm h3 {color:#FFF;}

#opener h5 {color: #3fbdad;}

#opener h1{ 
    background: linear-gradient(#3fbdad,#3fbdad) left bottom 10px no-repeat;
    background-size: 100% 8px;}
    
#opener-sub h1 { 
    background: linear-gradient(#333e46,#333e46) left bottom 10px no-repeat;
    background-size: 100% 8px;}
    
#opener-sub .blue-bg h1, #opener-sub .gray-bg h1 { 
    background: linear-gradient(#3fbdad,#3fbdad) left bottom 10px no-repeat;
    background-size: 100% 8px;}
    
.green-bg h2 { 
    background: linear-gradient(#333e46,#333e46) left bottom 10px no-repeat;
    background-size: 100% 8px;}

.green-bg h5, .red-bg h5, .light-blue-bg h5 {color:#FFF;}
.cream-bg h5 {color:#3fbdad;}
.white {color:#FFF;} 

.bottom { position:absolute; bottom:30px; left:30px; margin:0; padding:0; width:auto;}
.mt-1 {margin-top:100px;}
.mb-1 {margin-bottom:100px;}
.border-top {border-top:1px solid #FFF; padding-top:20px;}


.image-colour-overlay{
	position:absolute; top:0; left:0; right: 0; bottom: 0;
	background-color:#FFF; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index:-1;
    opacity:1
}

.image-colour-overlay.green{
	background-color:#3fbdad; 
}

.text-container{
	background-color:#000;
	color:#FFF; 
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity:0;
    padding-top:180px;
    font-weight:600;
    height:0;
    z-index:-10;
}


.right-button .text-container {
	position:absolute; top:0; left:-100%; right: 100%; bottom: 0; width:100%;
}
.left-button .text-container {
	position:absolute; top:0; left:100%; right: -100%; bottom: 0;
}

#options a:hover > .button-wrapper .text-container{
    opacity:1;
    height:100%;
    z-index:10;
    }


#options a:hover > .button-wrapper .text-container{
    opacity:1;
    height:100%;
    }

#options a:hover .image-colour-overlay{
    opacity:0
}

#options a.left-button {color:#FFF}

#options a.left-button:hover h4, #options a.right-button:hover h4, #options a.left-button:hover h5, #options a.right-button:hover h5, #options a.left-button h5 {color:#FFF;}


.image-bg{
	position:absolute; top:0; left:0; right: 0; bottom: 0;
	color:#FFF; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index:0;
}
.main-image {width:100%; height:0; padding-bottom: 70%; position:relative; }
.main-image .container {z-index:10; }

.main-image .image-bg:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity:1;
    background: linear-gradient(61deg, #005a77, #3fbdad);
    mix-blend-mode: multiply;
}

.image-bg img{position:relative; padding:165px 30px 30px 30px;
max-width: 100%;
   height: auto;
   width: auto\9; /* ie8 */
   border:0;
   display:block;}

#video-bg {position:fixed; color:#FFF; min-height:100vh; 
    position:fixed;
    width: 100%;
    max-width: 1400px;
    left: 50%;
    transform: translateX(-50%);
    z-index:-1;}
#video-bg:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity:1;
    background: linear-gradient(61deg, #005a77, #3fbdad);
    mix-blend-mode: multiply;
}

#commitment {position:relative; color:#FFF; overflow:hidden;  min-height:60vh; height:0; background:#000;}
#commitment .image-bg, #video-bg .image-bg  {z-index:-10;}
#video-bg .image-bg video {
  width: 100% !important;
  height: 100%!important;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

#commitment .container {z-index:10;}

.centered {
	position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    padding: 30px;
    z-index:1;
}

.main-image .centered {padding:20px;}

@media (min-width: 400px) {
.main-image .centered  {
    padding: 30px;
}
}

@media screen and (min-width: 860px) {
.flex {
  display: flex; /* equal height of the children */
  align-items: center;
}

.flex blockquote {margin:0;}
}

.grid-boxes {display:block; overflow:hidden; background-color:#FFF;}
.gridder {display: block; align-items: stretch;}
.fact-box .container, .fact-box-sm .container {display: table; padding-top:30px; padding-bottom: 30px; height:100%;}
.fact-box { display: -ms-flex; display: -webkit-flex; display: flex; position:relative; box-sizing: border-box;  -moz-transition:all .4s ease-in; -o-transition:all .4s ease-in; -webkit-transition:all .4s ease-in;}
.fact-box-sm {display: -ms-flex; display: -webkit-flex; display: flex; position:relative; box-sizing: border-box; -moz-transition:all .4s ease-in; -o-transition:all .4s ease-in; -webkit-transition:all .4s ease-in;}

.square, .rectangle {aspect-ratio: 1/1;}

@media screen and (min-width: 760px) {
.gridder {display: flex; align-items: stretch;}
}

@media screen and (min-width: 860px) {
.main-image {width:100%; height:0; padding-bottom: 56.30%; position:relative; }
.main-image .centered {padding:0;}
.fact-box-rec {aspect-ratio: 2/1; }
.rectangle {aspect-ratio: auto 16/9;}
}

@media screen and (max-width: 859px) {
.flickity-button {display:none;}
}


#options a h5 {color:#000;}
#options a.green-bg h4, .fact-box.green-bg h4 {background: linear-gradient(#FFF,#FFF) left bottom no-repeat; background-size: 100% 8px;}
#options a{position:relative; }
#options a.green-bg {position:relative; background:#3fbdad;}

#options a:before {
content: "";
    display: block;
    position: relative; padding-bottom:100%; width:100%;}

#options a .button-wrapper{position:absolute; top:0; left:0; right:0; bottom:0;}


/* section arrows */
.discover{position: absolute; left: 100px; bottom: 40px; -moz-transition:all .4s ease-in; -o-transition:all .4s ease-in; -webkit-transition:all .4s ease-in;}

.arrow-box {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom:0;
  margin:30px;
}

.st-arrow{
    fill:#FFF;
    perspective: 9000px;
    transform: translateZ(0);
    transform-origin: center;
  }

a.button-link {display:block; width:100%; position:relative; margin-top:50px;}
a.button-link .arrow-box {position:relative; margin: 0;}
a.button-link .discover{position:relative; left: 60px; bottom:30px; -moz-transition:all .4s ease-in; -o-transition:all .4s ease-in; -webkit-transition:all .4s ease-in;}
a.button-link:hover .discover{position: relative; left: 70px; color:#3fbdad}

.arrow-box .svg {z-index:9;position:relative; transform: rotate(-180deg); }
  
@keyframes scrolly{
  0% {
    transform: translate3d(0,0,0) rotateX(0deg) scale(1) skewX(0deg);
  }
  20% {
    transform: translate3d(-50%,0,0) rotateX(-90deg) scale(1) skewX(-3deg);
  }
  39% {
    transform: translate3d(-50%,0,0) rotateX(-90deg) scale(1) skewX(-3deg);
  }
  40% {
    transform: translate3d(150%,0,0) rotateX(90deg) scale(1) skewX(3deg);
  }
  80% {
    transform: translate3d(0,0,0) rotateX(0deg) scale(1) skewX(0deg);
  }
  100% {
    transform: translate3d(0,0,0) rotateX(0deg) scale(1) skewX(0deg);
  }
}


/* Logo grid */
.grid-logos {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    margin-bottom:30px;
}

.logos {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    font-weight: 500;
    letter-spacing: 0;
    
}

.liner {
    display: block;
    position: relative;
    height: auto;

}

.liner:before {
    content: '';
    position: absolute;
    height: 100%;
    right: -15%;
    border: none;
    border-right: 4px dotted #3fbdad;
    opacity:0.5;
}

.logos p {
    margin: 20px  0 0 0;
    font-weight:600;
}

.logos img {
    max-width: 80%;
    height: auto;
    width: auto\9;
    border: 0;
    padding: 0;
    margin: 0 auto !important;
    display: block;
}


/* For devices larger than 400px */
@media (max-width: 399px) {

.address {width:50%}
  .arrow-box { margin:20px}
  
  .discover {
    bottom: 30px;
    margin:0;
}

.mb-1 {
    margin-bottom: 100px;
}

section.carousel-holder .flickity-page-dots {
    width: 100%;
    margin-left: 0px;
}




.image-bg img {
    position: relative;
    padding: 20px;
    max-width: 100%;
    height: auto;
    width: auto\9;
    border: 0;
    display: block;
}

.bottom {
    bottom: 20px;
    left: 20px;

}

.image-colour-overlay{
	position:absolute; top:0; left:0; right: 0; bottom: 0;
	background-color:#FFF; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    z-index:-1;
    opacity:1
}

.image-colour-overlay.green{
	background-color:#3fbdad; 
}

.text-container{
	background-color:#000;
	color:#FFF; 
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity:1;
    padding:60px 0;
    font-weight:600;
    height:100%;
    z-index:0;
}


.right-button .text-container {
	position:relative; top:0; left:0; right: 0; bottom:0; width:100%;
}
.left-button .text-container {
	position:relative; top:0; left:0; right: 0; bottom:0; width:100%;
}

#options a .button-wrapper { position:relative;}

#options a:before {
    content: none;
    display: block;
    position: relative;
    padding-bottom: 100%;
    width: 100%;
}   

#options .arrow-box {position:relative; margin:60px 20px;}

.image {
    padding-top: 0px; 
}

.mt-1 {
    margin-top: 60px;
}

.centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
    z-index: 1;
    width: 100%;
}

.fact-box-timeline h5 {
    margin-bottom: 40px;
}

.slider-timeline {
    width: 100%;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}



 .square.fact-box-timeline {aspect-ratio:1/2;}

.centered {
    padding: 20px;
}

}

/* For devices larger than 860px */

@media (max-width: 760px) {
.gridder {
    display: flex;
    /* align-items: stretch; */
    flex-direction: column;
}


.column-reverse {
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
}

@media only screen and (min-width: 860px){
#options a.one-half.column {width:50%}
}

@media only screen and (min-width: 600px) and (max-width: 999px) {

.text-container { padding-top: 40px;}
  .one-third.column               { width:50%; margin:0;}
  .two-thirds.column              { width:50%; margin:0; aspect-ratio: auto 1/1;}
  #options a h5 {margin: 40px 0 40px 0;}
}
@media (max-width: 859px) {
  section.carousel-holder .flickity-page-dots {
    width: 100%;
    margin-left: 0px;
}
}

/* Social Media 
-------------------------------------------------------------------------------- */ 
.social{margin:0; float:right;}
.social-media1 {display:block; float:left; background:url("../images/linkedin-icon-on.png") no-repeat; margin-left:0px; background-size:24px 24px; margin-bottom: 2.5rem;}
.social-media2 {display:block; float:left; background:url("../images/twitter-icon-on.png") no-repeat; margin-left:15px; background-size:24px 24px; margin-bottom: 2.5rem;}

.social-media1 a, .social-media1 a:link, .social-media1 a:visited,
.social-media2 a, .social-media2 a:link, .social-media2 a:visited{ display:block; width: 24px; height: 24px; }

.social-media1 a:hover img,
.social-media2 a:hover img{ visibility:hidden; text-indent: 0; border:0;}


/* Animations
-------------------------------------------------------------------------------- */ 

    .fader {
        opacity: 0;
        transform: translateY(6em);
    }
    
    .fader.is-visible {
		opacity: 1;
		transform: translateY(0);
		transition: transform 1.5s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
	}
	
	#opener {
		opacity: 0;
		transition: opacity .5s .25s ease-out;
	}

	#opener.is-visible {
		opacity: 1;
	}
	
	#opener-sub {
		opacity: 0;
		transition: opacity .5s .25s ease-out;
	}

	#opener-sub.is-visible {
		opacity: 1;
	}
		

  /* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container ul{
    margin: 0;
    padding: 0px;
    list-style-type: none;
    padding-bottom: 1rem;
    }
    
.container ul li {
    margin-left: 20px;
    position: relative;
    margin-bottom: 5px;
}

.container ul li:before {
    position: absolute;
    left: -20px;
    content: "– ";
    color: #000;
}

.black-bg .container ul li:before, .gray-bg .container ul li:before {
    position: absolute;
    left: -20px;
    content: "– ";
    color: #FFF;
}

.fact-box-timeline ul{
border-bottom: 4px dotted #3fbdad;
margin-bottom:10px;}

.fact-box-timeline .green-bg ul{
border-bottom: 4px dotted #FFF;
margin-bottom:10px;}


/* Navigation
-------------------------------------------------------------------------------- */ 

.nav {width:100% !important; margin-left: 0; font-family: 'Source Serif Pro',serif;}
    
.button_container {
  /*position: absolute; top: 20px; right: 0; */
  display:block;
  position:relative;
  float:right;
  height: 15px;
  width: 25px;
  cursor: pointer;
  -webkit-transition: opacity .25s ease;
  -o-transition: opacity .25s ease;
  transition: opacity .25s ease;
  margin-top:5px;
  z-index: 2000;
} 
 
.menu {
border-radius:25px;
padding: 5px 5px;
width: 25px;
height: 30px;
z-index: 1200;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

.menu:hover {
background-color: none;

}

.menu::before {
  display:none;
}

/* Larger than phablet */
@media (min-width: 900px) {
.menu { width:13.3333333333%; padding: 5px 0 5px 15px;}

}


/* Toggle the navigation bar open  */
header ul.nav.open { height: auto; }
header ul.nav.open li { display: block; }
header .nav {width: 100%; float: none; display: block; margin: 0; padding: 0; top: 0; left: 0px; z-index: 998; clear: both; }
header ul.nav {position: relative; display: block; overflow:hidden; margin: 0; padding:0;}
header p {font-size: 28px; font-family: 'Montserrat', sans-serif; text-transform:uppercase; font-weight:600;}

header ul.nav li {display: block; min-height: 20px; position: relative; opacity: 0; width:80%; margin:0 60px;}
header ul.nav h5 {opacity: 0;}
header ul.nav ul li {display: block; min-height: 20px; position: relative; opacity: 0; width:80%; margin:0 60px;}
header ul.nav li:first-child{padding-top:10px;} 
header ul.nav li a, header ul.nav li a:visited {
    font-size: calc(24px + (32 - 24) * (100vw - 320px) / (1500 - 320));
    font-weight: 400;
    color: #FFF;
    display: block;
    width: 100%;
    padding: 0 0 15px 0;
    text-decoration: none;
    margin-bottom: 2px;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -webkit-transition: all .2s;
    position: relative;
    line-height: 110%;
}
header ul.nav li a:hover {
    color: #3cbcac;
    text-decoration: none;
    padding-left: 15px ;
}
header ul.nav li.first a, header ul.nav li.last a{border-bottom:none; padding-bottom:20px; width:50%;}

.overlay {position: fixed;  top: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; -webkit-transition: opacity .35s, visibility .35s, height .35s; -o-transition: opacity .35s, visibility .35s, height .35s; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index:1000; left: 50%;
    transform: translate(-50%, 0); max-width: 1400px;}
.overlay.open { opacity: 1; visibility: visible;  height: 100vh; } 
.overlay.open .color-overlay {opacity: 1; z-index: 1;}
.overlay.open li,  .overlay.open h5{-webkit-animation: fadeIn .5s ease forwards;animation: fadeIn .5s ease forwards; -webkit-animation-delay: .2s; animation-delay: .2s; border:none;}
.overlay.open li:before  {content:none !important;}

.overlay.open nav { position: relative; height: 80vh; z-index: 1000; overflow-y: scroll;padding-right:20px;margin-right:-20px; margin-top:45px;}  
.overlay.open ul li a:hover:after,
.overlay.open ul li a:focus:after,
.overlay.open ul li a:active:after { width: 100%;}    
@-webkit-keyframes fadeIn 0% { opacity: 0; left: 20%; }    
@keyframes fadeIn 0% { opacity: 0; left: 20%; }
@-webkit-keyframes fadeIn 100% { opacity: 1; left: 0; }
@keyframes fadeIn 100% { opacity: 1; left: 0; }  

.fixedPosition { overflow:hidden; padding-right: 15px;}

.button_container.activated .toggle-top{
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
  -ms-transform: translateY(10px) translateX(0) rotate(45deg);
  transform: translateY(10px) translateX(0) rotate(45deg);
  }

.button_container.activated .toggle-middle {
  opacity: 0;
  }
    
.button_container.activated .toggle-bottom {
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
  -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  }

.button_container span {
  background: #FFF none repeat scroll 0 0;
  border: medium none;
  cursor: pointer;
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
  width: 100%;
  }

.button_container span:nth-of-type(2) {
  top: 6px;
  }

.button_container span:nth-of-type(3) {
  top:12px;
  }
  
.button_container.activated span {
background: #FFF;
  border: none;
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  -webkit-transition:  all .35s ease;
  -o-transition:  all .35s ease;
  transition:  all .35s ease;
  cursor: pointer;
  z-index:2000;
  } 

.button_container.activated span:nth-of-type(2) { top: 10px;}
.button_container.activated span:nth-of-type(3) { top: 20px;}

.color-overlay {
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    width: 100%;
    z-index: 1;
    background-color: #333e46;
}


/* #Images
-------------------------------------------------------------------------------- */ 

.scale-with-grid img{
   max-width: 100%;
   height: auto;
   width: auto\9; /* ie8 */
   border:0;
   padding:0;
   margin:0;
   display:block;
}

/* Video
-------------------------------------------------------------------------------- */ 

.video-wrapper {
    position: relative;
    background-color: none;
    padding-bottom: 56.5%;
    height: 0;
    margin-bottom: 20px;
    overflow: hidden;
    max-width: 100%;
}

.video-wrapper object, .video-wrapper embed, .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
}

video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}


/* progress bar
-------------------------------------------------------------------------------- */ 
.progress-bar {
    height: 5px;
    background-color: #3fbdad;
    width: 0px;
    z-index: 1000;
    position: relative;
    top: 0px;
    left: 0;
}

.fixer {
	position: relative;
    width: 100%;
    max-width: 1400px;
    height:5px;
    overflow:hidden;
    background-color: #000;
    top:-50px;
        -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    z-index:0;
}

.fixer.show {
    top:0;
}

/* Utilities
-------------------------------------------------------------------------------- */ 
.u-full-width {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;}
.u-max-full-width {
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; 
  margin-left:0;}

/* Clearing
-------------------------------------------------------------------------------- */ 

/* Self Clearing Goodness */
.responsive-services,
#about-links:after,
.container:after,
.row:after,
.u-cf{
  content: "";
  display: table;
  clear: both; }
  
.clear {
  clear: both; }