/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    font-size: 62.5%;
    line-height: 1.45;
    scroll-behavior: smooth;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {background: #135B5B;}
@media (min-width: 64rem) {
  body {background: url(../img/leaf-wave-web-bg.png) 50% 500px repeat-y #135B5B;}
}


/** Typography **/
body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #444;
}
p {
    margin-top:0;
    margin-bottom: 1.25em;
    font-size: 1.563em;
    text-align: left;
}
h1, h2, h3, h4, #main-nav {
    font-family: 'Montserrat', sans-serif;
    margin: 2.75rem 0 1rem;
    font-weight: 400;
    line-height: 1.15;
    text-align: left;
    color: #01B1B1;
}

h1 {
  margin-top: 0;
  font-size: 4.768em;
}

h2 {font-size: 3.815em;}

h3 {font-size: 3.052em;}

h4 {font-size: 2.441em;}

h5 {font-size: 1.953em;}

@media (max-width: 44rem) {
  h1 {
    margin-top: 0;
    font-size: 3.268em;
  }

  h2 {font-size: 2.315em;}

  h3 {font-size: 2.552em;}

  h4 {font-size: 1.9em;}

  h5 {font-size: 1.453em;}
}

.subtitle {
  font-size:0.6em;
  display: block;
  font-weight: bolder;
}

small, .text_small {font-size: 1.25em;}
.text_big {font-size: 1.9em;}
.text_white {color: white;}

a, a:visited {color: #ffa719;}
.hightlighted a, .highlighted a:visited {color: #FFFFCC;}
a:hover, .highlighted a:hover {color: /*#ff910c*/ #000; background: #fff; text-decoration: none; }

blockquote {
    background: #fff;
    padding: 3em 3em;
    margin:2em 3em;
    font-size: 1.6em;
    font-style: italic;
    font-family: 'Noto Serif TC', serif;
    color: #228888;
}
    @media (max-width: 64rem) {
      blockquote {padding: 1em;}
    }
    @media (max-width: 44rem) {
      blockquote {padding: 0em; margin: 1em; font-size: 1.2em;}
    }
blockquote:after {
  content: " ";
  display: block;
  clear:both;
}
blockquote p {
    margin-bottom: 0.8em;
}
blockquote small.author em {
  font-weight: bolder;
  display: inline-block;
  padding-right: 1em;
}
blockquote small.author span {
  font-size: 0.8em;
  border-left: 2px dashed #ddd;
  display: inline-block;
  padding: 0 1em;
}
.highlight blockquote {
  color: #fff;
  background: none;
}
blockquote.tip {margin: 0 0 1em 1em; padding: 1em;  font-size: 1em; width: auto;}
blockquote.tip a {color: #D89500 !important}
@media (min-width: 64rem) {
  blockquote {
    padding: 3em 8em;
    margin:2em 5em;
  }
}

ul {list-style-type: disc;}
.intro ul, .highlight ul {color: #fff;}

ol.list, ul.list  {font-size: 1.5em;}
ol.list p, ul.list p  {font-size: 1em;}

ol.directions {
  font-size: 1em;
  list-style-type: none;
}
ol.directions li:before{
   content: '\2192';
   color: #fff;
   font-size: 1.5em; font-weight: bold;
   display: inline-block;
   float: left; margin-right: 1rem;
}

.emergency p {color: #222}
.emergency h3, .emergency strong {color: #cc0000;}


/** Buttons **/
.button {
  text-align: center;
}
.button a {
  display: block;
  border-radius: 1rem;
  background-color: #ffa100;
  border: none;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font-size: 1.9rem;
  padding: 2rem;
  margin: 0.5rem;
  width: 20rem;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0.4rem 0.4rem 0rem #e57a00;
  transition: 0.2s;
}
.button a:hover {
  margin: 0.3rem 0.7rem 0.7rem 0.3rem;
  box-shadow: 0.5rem 0.5rem 0rem #e57a00;
  background: #ffae00;
}
.button a:active {
  margin: 0.7rem 0.3rem 0.3rem 0.7rem;
  box-shadow: -0.2rem -0.2rem 0rem #e57a00;
  background: #ffa100;
}
/** Dull Button **/
.button.dull a {
  background-color: #667;
  box-shadow: 0.4rem 0.4rem 0rem #445;}
.button.dull a:hover {
  box-shadow: 0.5rem 0.5rem 0rem #445;
  background: #777788;
}
.button.dull a:active {
  box-shadow: -0.2rem -0.2rem 0rem #445;
  background: #777788;
}

/**
  * Sprite Map Currently Used Instead of Mouseover Image Map 
  * Basic Setup - See pages.css for specific values
  */
div.spritemap {
  margin: 0; padding: 0;
  width: 35rem; height: 27.7rem;
}


/* Social Media Links */
a.social {
  display: inline-block;
  margin-right: 1em; }
a.social i {
  display: inline-block;
  margin-right: 0.4em; }


section h2 a i.bigicon {
    font-size: 10rem;
    display: block;
}

/** Grid Layout
  * Floating columns inside a row
  * Use this when you want to control the contents of each column
  * .col-1-4 Big = 1/4 width, Medium = 1/3, Small = 1/2
  * .col-1-3 Big = 1/3 width, Medium = 1/2, Small = full width
  * .col-1-2 Big = 1/2 width, Medium = full width, Small = full width
  *
**/

.col-1-4 {
  float: left;
  display: block;
  transition: 0.3s;
}
    @media (min-width: 64rem) {
      .col-1-4 {width: 25%;}
    }
    @media (max-width: 64rem) {
      .col-1-4 {width: 33%;}
    }
    @media (max-width: 50rem) {
      .col-1-4 {width: 50%;}
    }
    @media (max-width: 41rem) {
      .col-1-4 {width: 100%;}
    }

.col-1-3 {
  float: left;
  display: block;
  transition: 0.3s;
}
    @media (min-width: 64rem) {
      .col-1-3 {width: 33%; }
    }
    @media (max-width: 64rem) {
      .col-1-3 {width: 50%;}
    }
    @media (max-width: 41rem) {
      .col-1-3 {width: 100%;}
    }

.col-1-2 {
  float: left;
  display: block;
  transition: 0.3s;
}
    @media (min-width: 50rem) {
      .col-1-2 {width: 50%;}
    }
    @media (max-width: 50rem) {
      .col-1-2 {width: 100%;}
    }
.row:after {
  content: " ";
  display: table;
  clear: both;
}
.twocols {columns: 2;}  /* This one is two columns, but the content split happens automatically depending on screen width and volume of content*/
    @media (max-width: 50rem) {
      .twocols {columns:1;}
    }


/* Extra horizontal spacing when text is in columns */
.row h2,.row h3,.row h4,.row h5, .row p {margin-left: 1rem; margin-right: 1rem;  }
.twocols h2, .twocols p {margin-left: 1rem; margin-right: 1rem;  }

/* Make sure line width isn't too wide to read comfortably in full width sections */
div.singlecol  {
  max-width: 70rem;
  margin: 0 auto;
}

/** Header **/
header {
    width: 100%;
    margin: 0; padding: 0;
    position: fixed;
    top: 0;
    background: #237A8A;
    box-shadow: 0px 6px 10px #44444444;
    z-index: 300;
}
  @media (min-width: 50rem) {
    header {
      background: url(../img/header-bg.png) top center repeat-y #237A8A;
    }
  }
  @media (max-width: 50rem) {
    header {
      background: url(../img/header-bg-m.png) top center repeat-y #237A8A;
    }
  }
  @media (max-width: 20rem) {
    header {
      background: url(../img/header-bg-s.png) top center repeat-y #237A8A;
    }
  }

a#headerimg{
    background: url(../img/ScienapLogo-Landscape-White.svg) no-repeat;
    background-size: 20rem auto;
    width: 20em;
    height: 4em;
    margin: 1rem 0em 1rem 1rem;
    display: block;
    float: left;
    transition: 0.4s;
    text-indent: -100em;
    direction: ltr;
}
.home a#headerimg {
    background-size: 40rem auto;
    width: 40em;
    height: 11em;
    margin: 1em;
}
  @media (max-width: 55rem) {
    a#headerimg{
      width: 4rem;
      height: 3.5rem;
      background-image: url(../img/ScienapLogo-Landscape-White-nostrap.svg);
      background-size: 15rem auto;
      margin-right: 0;
    }
    .home a#headerimg {
      background-image: url(../img/ScienapLogo-Landscape-White.svg);
      background-size:  20rem auto;
      width: 20rem;
      height: 6rem;
    }
  }
  @media (min-width:64rem) {
    .home a#headerimg {
      /* Big Header
      background-size: 50rem auto;
      width: 50em;
      height: 14em;
      margin: 2em; */
      background-size: 30rem auto;
      width: 30rem;
      height: 8.5rem;
    }
  }

/**  Navigation **/
/** Main Nav **/
ul#main-nav {
    font-size: 0.7em;
    margin: 1rem 2rem 0rem 0;
    display:flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: right;
    float: right;
    transition: 0.5s;
    width: 50%;
}
ul#main-nav li {
    display: block;
}
ul#main-nav li a, ul#main-nav li a:visited {
    display: block;
    margin: 0em;
    padding: 1em;
    color: #fff;
    text-decoration: none;
    font-size: 1.8em;
    transition: 0.3s;
}
ul#main-nav li a:hover, ul#main-nav li a.active,
.company #main-nav a#company-nav, .consultancy #main-nav a#consultancy-nav,
.sectors #main-nav a#sectors-nav, .contact #main-nav a#contact-nav, .chai #main-nav a#chai-nav, .protocol #main-nav a#protocol-nav, .about #main-nav a#about-nav
{
    color: #01B1B1;
    background: #fff;
    text-decoration: underline;
}

  @media (min-width: 43.5rem) {
    ul#main-nav {width: 60%; }
  }
  @media (max-width: 43.5rem) {
    ul#main-nav {width: 34rem; }  /* Temporary whilst main nav only has 1 link */
    /** USE This when Main Nav has more than 2 links
    ul#main-nav {width: 34rem; }  **/
    ul#main-nav li a {font-size: 1.5em;}
  }
  @media (max-width: 30rem) {
      /* Temporary whilst main nav only has 1 link */
      ul#main-nav { width: 27rem; margin: 0; padding: 0}
    /** USE This when Main Nav has more than 2 links
    ul#main-nav { width: 30rem;}  **/
    ul#main-nav li a {padding: 1em 0.7em;}
  }


/* Big Menu on Homepage */
.home ul#main-nav {
    /*  When big menu is back in use:
    font-size: 1em;
    width: 40%;
    margin: 5em 2em 4em 0;
    */
    font-size: 1em;
    width: 40%;
    margin: 2em 1em 1em 0;
}
  @media (max-width: 53rem) {
    .home ul#main-nav {
      /*When there are more than 1 link
      width: 90%;  justify-content: center;*/
      width: auto; padding: 0;
      justify-content: right;
    }
  }
  @media (min-width: 64rem) {
    .home ul#main-nav { width: 50%;}
  }



/** Breadcrumbs **/
ul.breadcrumb{
  width: 100%;
  background:  rgba(255, 255, 255, 0.5);
  margin: 0;
  clear: both;
}
ul.breadcrumb li {
  display: inline;
  font-size: 1.5rem;
}
ul.breadcrumb li+li:before {
  padding: 1rem;
  color: black;
  content: "\205E";
}
ul.breadcrumb li a {
  color: #007777;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #004759;
  text-decoration: underline;
}

/** Side Navigation **/
ul#side-nav {
  position: absolute;
  list-style-type: none;
  width: 25rem;
  margin: 0 1rem 1rem 3rem; padding: 0;
  z-index: 200;
}
#side-nav li{
  margin: 0;
  font-size: 1.8rem;
}
#side-nav li a{
  color: #fff;
  display: block;
  margin: 0;
  padding: 1.5rem 2rem;
  width: 21rem;
  border-top: 1px dotted #ada;
  text-decoration: none;
}
#side-nav li a:hover{
  background: #fff;
  color: #00665d;
}
#side-nav li:first-child a{border:none;}
#side-nav a.active {
  background:  rgba(255, 255, 255, 0.7);
  color: #00665d;
  border-left: 0.5rem solid #05a6b5;
  padding-left: 1rem;
}
#side-nav li ul {
  list-style-type: none;
  margin: 0; padding: 0
}
#side-nav li ul li a{
  padding-left: 2rem;
}
#side-nav li.highlight a {background: #ffae00;}


/** In-Page Navigation **/
ul.page-nav {
  position: relative;
  list-style-type: none;
  width: 90%;
  margin: 1rem auto; padding: 0;
  z-index: 200;
  columns:2;
}
@media (max-width: 50rem) {
      ul.page-nav {columns:1;}
    }
ul.page-nav li{
  margin: 0 ; padding: 0;
  font-size: 1.5rem;
}
ul.page-nav li a{
  color: #444;
  background: #fff; opacity: 0.5;
  display: block;
  margin: 0 ;
  padding: 1rem 1.5rem;
  width: auto;
  border-top: 1px solid #ada;
  border-bottom: 1px solid #797;
  text-decoration: none;
  text-align: left;
}
.intro ul.page-nav li a{ opacity: 1; color:   #008080 }
ul.page-nav li a:hover, .intro ul.page-nav li a:hover{
  background: #008080;
  color: #fff;
  opacity: 1;
}
ul.page-nav li:first-child a{border-top:none;}
ul.page-nav li ul {
  list-style-type: none;
  margin: 0; padding: 0;
  font-size: 0.9em;
}
ul.page-nav li ul li a{
  padding-left: 4rem;
}
ul.page-nav li.highlight a {background: #ffae00;}



  @media (min-width: 64rem) {
    #side-nav { margin: 2rem 1rem 1rem 3rem;}
  }
  @media (max-width: 30rem) {
    ul#side-nav { margin: 0rem; width: 100%;}
    ul#side-nav li {font-size: 1.6rem}
    ul#side-nav li a {width: auto; padding: 1rem;}
  }


/**  End Navigation **/

/** Content **/
#content {
    margin-top: 10rem;
    text-align: center;
}
.home #content {
    /* margin-top: 18rem; */
    margin-top: 13rem;
}
    @media (max-width: 41rem) {
      .home #content {margin-top: 9em;}
    }



/** Sections **/
/** Full White Panel - Actually semi-transparent**/
section.fullwhite {
    width: auto;
    margin: 0 auto;
    padding: 4em;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0.5em 0.5em 1em #0004;
}
section.fullwhite h2:first-child, section.fullwhite h3:first-child {
  margin-top:0;  margin-bottom: 1em;
}
    @media (max-width: 41rem) {
      section.fullwhite { padding: 2em 1em; }
    }

/** White Card **/
section.card {
    width: 80%;
    margin: 0 auto 2rem auto;
    padding: 2em;
    text-align: center;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0.5em 0.5em 1em #4444;
}
section.card h2:first-child {
  margin-top:0;
}
section.card img {
    width: 100%;
    float: none;
    padding-bottom: 1em;
}
section.card p {
    font-size: 2em;
}


/** Intro **/
section.intro {
    width: 80%;
    margin: 1rem auto;
    padding: 5em 14em 7em 5em;
    position: relative;
    display: inline-block;
    text-align: center;
    transition: 0.3s;
    z-index: 100;
}
section.intro img{
    float: left;
    width: 40%;
    transition: 0.5s;
}
section.intro div{
  position: absolute;
  top: 50%; left: 40%;
  width: 60%;
  transform: translateY(-50%);
}
section.intro p {
  color: #fff;
}
section.intro blockquote p {
  color: #444;
}

.home section.intro{
    padding: 1em;
    margin: 0em;
}
.home section.intro img {
    margin-top: -1em;
}
.home section.intro h1 {
    font-size: 4.4em;
    margin: 1em 0 0.5em 0;
    color: #fff;
}
.home section.intro p {
    font-size: 1.9em;
    margin: 0.5em 0 1em 0;
}
    @media (max-width: 75rem){
      .home section.intro {
        font-size: 0.8em;
        padding-top:5em;
        }
    }
    @media (max-width: 60rem){
      .home section.intro {
        padding-top: 5em;
        margin-bottom: 2em;
        }
    }
    @media (max-width: 56rem){
      .home section.intro {
        padding-top: 12em;
        margin-bottom: 2em;
        }
    }
    @media (max-width: 53rem){
      .home section.intro {
        padding-top:0;
        padding-bottom: 2em;
        }
      .home section.intro p {
        transition: 0.3s;
        /*margin-left: -55%;*/
        }
    }
    @media (max-width: 52rem){
      .home section.intro {
        padding-top:8em;
      }
      .home section.intro blockquote {padding: 2em; margin:0;}
    }
    @media (max-width: 41rem){
      .home section.intro {
        padding-top: 12em;
        }
      .home section.intro img{
        width: 100%;
        margin: 0
      }
      .home section.intro div {
        position: relative;
        top: 0; left: 0;
        transform: none;
        margin: 0; padding: 0;
        width: 100%;
      }
      .home section.intro h1 {
        font-size: 3em;
        }
      .home section.intro p {
        margin-left: 0%
        }
    }
    @media (max-width: 32rem){
      .home section.intro {
        padding-top: 18em;
      }
    }

.chai section.intro {
  width: 60%;
  margin-left: 25rem;
}
.chai section.intro div {
  position: relative;
  float: left;
  top: 0; left: 0%;
  width: 60%;
  transform: none;
  transition: 0.4s;}
.chai section.intro img {
  width: 40%;
  margin: 0;
  float: left;
}
    @media (max-width: 60rem){
      .chai section.intro {
        width: 50%;
        margin: 0 0 0 25rem;
        padding: 1rem 5rem;
      }
      .chai section.intro img { width: 60%; }
      .chai section.intro div { width: 100%}
    }
    @media (max-width: 50rem){
      .chai section.intro {
        width: auto;
        margin: 0;
        padding: 1rem 5rem;
        clear: left;
      }
      .chai section.intro img { float: right;}
    }
    @media (max-width: 43rem){
      .chai section.intro img {
        float: left;
        margin-top: 34rem;
      }
    }



.about section.intro {
  width: auto;
}
.about section.intro div {
  position: relative;
  float: left;
  top: 0; left: 0%;
  width: 60%;
  transform: none;
  transition: 0.4s;}
.about section.intro img {
  width: 40%;
  margin: 0;
  float: left;
}
    @media (max-width: 60rem){
      .about section.intro {
      }
      .about section.intro h1 { font-size: 2.8em; }
      .about section.intro img { width: 40%; }
      .about section.intro div { width: 60%; }
    }
    @media (max-width: 50rem){
      .about section.intro {
        width: auto;
        margin: 0;
        padding: 1rem 5rem;
        clear: left;
      }
    }
    @media (max-width: 43rem){
      .about section.intro img {
        float: none;
        clear: left;
        width: 60%;
      }
      .about section.intro div {
        float: left;
        clear: left;
        width: auto;
      }
    }


/** highlight **/
section.highlight {
    padding: 3em;
}
section.highlight {color: #fff; text-decoration: none;}
section.highlight a {color: #ffae00;}
section.highlight a:hover {background: #fff;}
section.highlight a:hover {color: #000}
section.highlight a.blocklink {color: #fff; text-decoration: none; border-radius: 1rem;}
section.highlight a.blocklink:hover {color: #488; text-decoration: none;}
section.highlight a.blocklink h2 {color: #fff;}
section.highlight a.blocklink:hover h2 {color: #488; }
section.highlight .button a {color: #fff; }
section.highlight .button a:hover {color: #fff; background: #ffae00;}
section.highlight .button.dull a:hover {color: #fff; background: #778;}
section.highlight h2 {color: #fff;}

/** Feature List With SVG Icons **/
 ul.iconlist {
  list-style-type: none;
  font-size: 1.6em;
  margin: 0; padding: 0;
  text-align: left;
 }
 ul.iconlist li {
  display: inline-block;
  margin: 0.5em 0em 1em 0 ; padding: 0;
  min-height: 4.4em;
}
 ul.iconlist li em{
  display: block;
  font-weight: bold;
}
 ul.iconlist li:before {
  content: "" ;
  display: block;
  float: left;
  margin-right: 0.5em;
  width: 3em; height: 3em;
  background: url(../img/clock-regular.svg);
  background-repeat: no-repeat;
  background-size: 3em;
 }
 ul.iconlist li.benefits-bettercare:before {
  background-image: url(../img/smile-regular.svg);
  height: 3.2em;
 }
 ul.iconlist li.benefits-tracking:before {
  background-image: url(../img/chart-line-solid.svg);
  height: 3em
 }
 ul.iconlist li.benefits-easy:before {
  background-image: url(../img/easy.svg);
  height: 3.5em;
  background-size: 3.5em;
 }
 ul.iconlist li.benefits-accountability:before {
  background-image: url(../img/audit.svg);
  height: 3.5em
 }
 ul.iconlist li.benefits-comms:before {
  background-image: url(../img/comment-dots-regular.svg);
  height: 3em
 }


/** Feature List With SVG Icons **/
 ul.iconlist-fa {
  list-style-type: none;
  margin: 0; padding: 0;
  text-align: left;
 }
 ul.iconlist-fa li {
  display: inline-block;
  margin: 0.5em 0em 0em 0em ; padding: 0;
  min-height: 4.4em;
}
 ul.iconlist-fa li i {
  display: block;
  float: left;
  margin-right: 0.4em;
}
 ul.chai li i {
  color: #2BA6CB;
}
 .highlighted ul.chai li i {
  color: #fff;
}
 ul.iconlist-fa li em {
  display: block;
  font-weight: bold;
}


/** Option Filter - Trio of images with buttons underneath.  Central option is highlighted **/
.option div, .option div img { transition: 1s}
.option div:nth-child(2) img, .option div:nth-child(4) img {width: 20rem; margin: 17rem auto 3rem auto;} /* Starts on 2 because 1 is the header */
.option div:nth-child(3) img {width: 40rem; margin: 0rem 2rem;}
    @media (max-width: 90rem) {
      .option div:nth-child(2) img, .option div:nth-child(4) img {width: 10rem;}
      .option div:nth-child(3) img {width: 30rem;}
    }
    @media (max-width: 64rem) {
      .option div:nth-child(4) img {margin:10rem;}
    }
    @media (max-width: 41rem) {
      .option div:nth-child(2) img, .option div:nth-child(4) img {margin:1rem; width: 6rem;}
      .option div:nth-child(3) img {width: 15rem; margin:0;}
    }

/** Portrait Photos get cropped into a circle **/
.portrait {
  width: 16rem;
  height: 16rem;
  border-radius: 8rem;
  float: left;
  overflow: hidden;
  margin: 0 2em;
}
.portrait img {
  width: 16rem;
}
    @media (max-width: 40rem) {
      .portrait {width: 12rem; height: 12rem; border-radius: 6rem; float: none; margin: 1em auto;}
      .portrait img { width: 12rem;}
    }


/** Collapsible fAQ List **/
details.faq {
  width: 100%;
  margin: 0;
  padding: 0;
  transition: 0.5s ease-out;
  box-sizing: border-box;
}
details.faq summary {
  font-size: 2rem;
  display:block;
  padding:0; margin: 0;
  border-bottom: 1px solid #2BA6CB;
  border-top: 1px solid #76C7E0; 
  color: #eeeeee; 
  text-align: left;
  list-style: none;
  cursor: pointer;
  transition: 0.2s ease-out;
}
details.faq summary:focus, details.faq summary:hover {
  background: #D09607;
}
 details.faq summary h2, div.introtext details.faq summary h2{
  font-size: 2rem; 
  margin: 0; padding: 0.5em 1em;
  margin-top: -1.5em; 
} 
details.faq div.faq-content, div.intro details.faq div.faq-content {
  width: auto;
  display: block;
  color: #424242;
  padding: 1em;  
}
details.faq div.faq-content:after, div.intro details.faq div.faq-content:after {
    content: " "; 
    display: table;
    clear: both; 
}
details.faq h3,  div.introtext details.faq h3{
  font-size: 2.3em;
} 
details.faq div.faq-content img {
  width: 30%; margin: 0.5em 1em 0.5em 0;
}
/* Fixed colours and stuff when used in the intro section */
div.introtext details.faq div.button{
  text-align: left;
  width: 100%;
}
div.introtext details.faq div.button a{
  width: auto;
  padding: 0.5em;
}
div.introtext details.faq summary h2, div.introtext details.faq h3, div.introtext details.faq .button a{
  color: #fff;
} 
/* Nested details */
details.faq details.faq {margin-left: 3em;}



/** Link to the top **/
p.tothetop {
  padding: 1em; margin: 0; width: 6rem;
  position: fixed;
  z-index: 110;
  bottom:0; right: 0em;
  }
p.tothetop a { text-decoration: none; display: block; padding: 0em; margin: 0;}
p.tothetop a:hover { background: none;}

/** Footer **/
footer {
    width: 100%;
    padding: 2em 0 0em 0;
    margin-top: 2em;
    background:  rgba(0, 0, 0, 0.4);
    color: #ccc;
    box-shadow: 0 -0.8em 1.5em #00000044;
}

#footer a {color: #bcb; text-decoration: none;}
#footer a:hover {color: #fff; text-decoration: underline; background: none;}
section.footer-nav {margin: 0 0 2em 0; }
.footer-nav ul {
    font-size: 1.4em;
    list-style-type: none;
    margin: 0 0 0 1rem;
    padding: 0;
}
.footer-nav ul ul {
    font-size: 1em;
    margin-left: 1em;
}
#footer div.logo {
  text-align: center;
}
#footer img.logo {
  width: 50%; /* Normally 80% when all footer nav is present */
  margin: 0 auto;
}
#footer .text_small {padding: 1em 2em; background:  rgba(0, 0, 0, 0.4); margin-bottom: 0;}
#footer .text_small span:nth-child(2) {text-align: right;}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
.clear {
  clear: both;
}

.float-l {float: left;}
.float-r {float: right;}

/* Anchors
Compensating for anchor links that get hidden by the fixed header. Place this class in a H2 with a unique ID */
.anchor:before {
  display: block;
  content: " ";
  margin-top: -160px;
  height: 160px;
  visibility: hidden;
}
  @media (min-width: 55rem) {
     .anchor:before { /* Customised for covid header*/
      display: block;
      content: " ";
      margin-top: -200px;
      height: 200px;
      visibility: hidden;
    }
  }

/* Video Wrappers & Map Wrappers
Wrapping an embedded iframe video  in another element which has an intrinsic aspect ratio to make sure we can have fluid video sizes on mobile*/

.videoWrapper, .mapWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
  @media (min-width: 55rem) {
    .videoWrapper, .mapWrapper {
      margin: 0 20% 0 20%;
      padding-bottom: 33.75%; /* 16:9 */
      padding-top: 25px;
      height: 0;
    }
    .mapWrapper {
      margin: 0 10% 0 0;
      padding-bottom: 80%;
      padding-top: 25px;
      height: 0;
    }
  }
.videoWrapper iframe, .mapWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Form Wrappers
Wrapping an embedded iframe form in another element to make sure we can have fluid widths sizes on mobile*/

.formWrapper, .formWrapper-1-3 {
  position: relative;
  padding-bottom: 500%; /* 1:5 */
  padding-top: 25px;
  height: 0;
  margin:0;
}
.formWrapper-1-3 {
  padding-bottom: 300%; /*1:3*/
}
  @media (min-width: 55rem) {
    .formWrapper, .formWrapper-1-3 {
      margin: 0 20% 0 20%;
      padding-bottom: 310%; /* 1:3 -ish */
      padding-top: 25px;
      height: 0;
    }
    .formWrapper-1-3 {
      padding-bottom: 120%; /*1:3*/
    }
    .col-1-2 .formWrapper, .col-1-2 .formWrapper-1-3 { /* If the form is also inside a column, e.g. contact form */
      margin:0;
    }
  }
.formWrapper iframe, .formWrapper-1-3 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
 * Area : CSS equivalent to image map
*/

a.area {
    background:#fff;
    display:block;
    xopacity:0;
    position: relative;
}
a:hover.area {
    border: 1px solid red;
}
a.talkbubble {
  width: 120px;
  height: 80px;
  background: red;
  position: absolute;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  display: block;
}
a.talkbubble:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-left: 22px solid blue;
  border-bottom: 13px solid transparent;
}
#area1{ top: 5px; left: 100px; position: absolute;}


/* Outline - Bright garish outline to quickly identify an element on screen */
.outline {border: 1px solid #ff0000}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}