html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

table, tbody, tfoot, tr, th, td, sup {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

.col1 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 6.8333333333%; }
  @media screen and (max-width: 600px) {
    .col1 {
      margin: 0;
      width: 100%; } }

.col2 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 15.1666666667%; }
  @media screen and (max-width: 600px) {
    .col2 {
      margin: 0;
      width: 100%; } }

.col3 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 23.5%; }
  @media screen and (max-width: 600px) {
    .col3 {
      margin: 0;
      width: 100%; } }

.col4 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 31.8333333333%; }
  @media screen and (max-width: 600px) {
    .col4 {
      margin: 0;
      width: 100%; } }

.col5 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 40.1666666667%; }
  @media screen and (max-width: 600px) {
    .col5 {
      margin: 0;
      width: 100%; } }

.col6 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 48.5%; }
  @media screen and (max-width: 600px) {
    .col6 {
      margin: 0;
      width: 100%; } }

.col7 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 56.8333333333%; }
  @media screen and (max-width: 600px) {
    .col7 {
      margin: 0;
      width: 100%; } }

.col8 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 65.1666666667%; }
  @media screen and (max-width: 600px) {
    .col8 {
      margin: 0;
      width: 100%; } }

.col9 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 73.5%; }
  @media screen and (max-width: 600px) {
    .col9 {
      margin: 0;
      width: 100%; } }

.col10 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 81.8333333333%; }
  @media screen and (max-width: 600px) {
    .col10 {
      margin: 0;
      width: 100%; } }

.col11 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 90.1666666667%; }
  @media screen and (max-width: 600px) {
    .col11 {
      margin: 0;
      width: 100%; } }

.col12 {
  float: left;
  margin: 0.75%;
  padding: 1.5% 0;
  width: 98.5%; }
  @media screen and (max-width: 600px) {
    .col12 {
      margin: 0;
      width: 100%; } }

html {
  margin-top: 0 !important; }

body {
  color: #555;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  font-weight: 300;
  line-height: 1.5em;
  margin: 0 !important; }

.site {
  width: 1396px;
  margin: 0 auto; }
  @media screen and (max-width: 1551px) {
    .site {
      width: 90%;
      margin: 0 5%; } }
  @media screen and (max-width: 1551px) {
    .site.bannersite {
      width: 1396px;
      margin: 0 auto; } }
  @media screen and (max-width: 1400px) {
    .site.bannersite {
      width: 100%;
      margin: 0; } }

.inside {
  width: 91%;
  padding: 4.5%; }

h2 {
  background: url(layout/wave.svg) no-repeat left bottom;
  background-size: 50px auto;
  color: #33ACD5;
  font-size: 1.66em;
  font-weight: 300;
  line-height: 1.4em;
  margin: 0 0 0.9em;
  padding-bottom: 1.25em;
  text-transform: uppercase;
  width: 100%; }
  h2.alignCenter {
    text-align: center;
    background-position: center bottom; }

a {
  color: #96C84F; }
  a.btn {
    background: #96C84F;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    color: #fff;
    display: inline-block;
    margin: 1em 0;
    padding: 0.5em 2em;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    a.btn:hover {
      background: #33ACD5; }
    a.btn.blue {
      background: #33ACD5; }
      a.btn.blue:hover {
        background: #96C84F; }

strong {
  font-weight: 600; }

.alignCenter {
  text-align: center; }
  .alignCenter h2 {
    text-align: center;
    background-position: center bottom; }

.paddingSite {
  padding-top: 95px; }

.back {
  background: #33ACD5;
  color: #fff;
  padding-bottom: 1em;
  padding-top: 115px; }
  .back a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    .back a:hover {
      color: #96C84F; }

.zoom {
  background: #33ACD5 url(layout/zoom.svg) no-repeat center center;
  background-size: 50% auto;
  border: 0 none;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0 0 10px 5px #B8B4B4;
  -webkit-box-shadow: 0 0 10px 5px #B8B4B4;
  display: block;
  height: 100px;
  left: 50%;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  text-indent: -9999px;
  width: 100px;
  z-index: 2;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .zoom:hover {
    box-shadow: 0 0 0 0 #B8B4B4;
    -webkit-box-shadow: 0 0 0 0 #B8B4B4;
    opacity: 1; }

.zoomCorner {
  background: url(layout/zoom.svg) no-repeat center center;
  background-size: 100% auto;
  display: block;
  height: 30px;
  right: 0;
  opacity: 0.9;
  position: absolute;
  bottom: 0;
  text-indent: -9999px;
  width: 30px;
  z-index: 2;
  transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .zoomCorner:hover {
    opacity: 0.2; }

figure {
  margin: 1em 0;
  position: relative;
  width: 100%; }
  figure .filterBlue, figure .filterGreen {
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.25;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out; }
  figure .filterBlue {
    background: #33ACD5; }
  figure .filterGreen {
    background: #96C84F;
    opacity: 0.8; }
  figure img {
    float: left;
    width: 100%; }
  figure h4 {
    color: #fff;
    left: 50%;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 50%;
    width: 100%;
    z-index: 3;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  figure a, figure span.link {
    width: 100%; }
    figure a h4, figure span.link h4 {
      color: #fff;
      transition: all 0.25s ease-in-out;
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out; }
    figure a:hover, figure span.link:hover {
      cursor: pointer; }
      figure a:hover .zoom, figure span.link:hover .zoom {
        box-shadow: 0 0 0 0 #B8B4B4;
        -webkit-box-shadow: 0 0 0 0 #B8B4B4;
        opacity: 1; }
      figure a:hover .filterBlue, figure span.link:hover .filterBlue {
        opacity: 0; }
      figure a:hover .filterGreen, figure span.link:hover .filterGreen {
        opacity: 0.2; }
      figure a:hover h4, figure span.link:hover h4 {
        color: #96C84F; }

.clear {
  clear: both; }

header {
  background: #fff;
  border-bottom: 1px solid #33ACD5;
  min-height: 95px;
  position: fixed;
  width: 100%;
  z-index: 999; }
  header .site {
    background: url(layout/header-circle.jpg) no-repeat right top;
    background-size: 40% auto;
    padding: 0.75%; }
  header hgroup {
    float: left;
    width: 50%; }
    header hgroup h1, header hgroup h2 {
      float: left; }
    header hgroup h1 {
      float: left;
      margin: 0 0.75%;
      width: 224px; }
    header hgroup h2 {
      background: none;
      color: #96C84F;
      float: left;
      font-size: 2.5em;
      margin: 0;
      padding: 0.238em 0 0;
      width: auto; }
  header .login {
    float: right; }
    header .login h2 {
      color: #555;
      font-size: 1em;
      margin-bottom: 0.5em;
      padding-bottom: 1em; }
    header .login a {
      background: #96C84F url(layout/login-icon.png) no-repeat 1em center;
      background-size: auto 50%;
      color: #fff;
      display: block;
      font-size: 0.8em;
      padding: 0.5em 1em 0.5em 4em;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out; }
      header .login a:hover {
        background-color: #33ACD5; }

.intro {
  background: url(layout/wave-blue.svg) no-repeat center bottom;
  background-size: auto 15px;
  margin: 0 auto 2em;
  padding: 40px 0;
  text-align: center;
  width: 83.3333333333%; }
  .intro.inside {
    padding-top: 0; }
    .intro.inside a {
      background: #555;
      color: white;
      display: inline-block;
      font-style: italic;
      font-weight: 400;
      padding: 0.4em 1em;
      text-decoration: none;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out; }
      .intro.inside a:hover {
        background: #33ACD5; }

.banner {
  background: url(../images/e-guide.jpg) no-repeat center center;
  backgound-size: 100% auto;
  margin: 0 !important;
  overflow: hidden;
  padding-top: 24%;
  position: relative;
  width: 100%; }
  .banner img {
    float: left;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .banner span {
    background: #33ACD5;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 3; }
  .banner h1 {
    color: white;
    font-size: 6em;
    font-weight: 400;
    left: 50%;
    position: absolute;
    text-align: center;
    text-shadow: 0 3px 6px #444;
    text-transform: uppercase;
    top: 50%;
    width: 100%;
    z-index: 4;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .banner h1 strong {
      font-weight: 700; }
    @media screen and (max-width: 1551px) {
      .banner h1 {
        font-size: 5vw; } }
  @media screen and (max-width: 1000px) {
    .banner {
      padding-top: 33%; } }

.boxIco {
  overflow: hidden;
  padding-top: 33.3333333333%;
  position: relative;
  text-align: center;
  text-decoration: none; }
  .boxIco .contentIco {
    left: 50%;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .boxIco img {
    margin-bottom: 1em;
    width: 35%; }
  .boxIco.boxBlue {
    background: #f1f9fc; }
    .boxIco.boxBlue .more {
      background-color: #33ACD5; }
    .boxIco.boxBlue h3 {
      color: #33ACD5; }
  .boxIco.boxGreen {
    background: #f3f9ea; }
    .boxIco.boxGreen .more {
      background-color: #96C84F; }
    .boxIco.boxGreen h2 {
      color: #96C84F; }
  .boxIco h2 {
    background: none;
    margin: 0;
    padding: 0; }
  .boxIco .ico + h2 {
    min-height: 5vw; }
  .boxIco h3 {
    font-style: italic;
    font-weight: 400;
    margin: 0 auto;
    width: 80%; }
  .boxIco h4 {
    color: #555;
    font-style: italic;
    font-weight: 400; }
  .boxIco .more {
    color: #fff;
    font-size: 4.5em;
    font-weight: 700;
    height: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    width: 100%;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    .boxIco .more .contentIco {
      background: url(layout/zoom.svg) no-repeat center top;
      background-size: 30% auto;
      opacity: 0;
      padding-top: 35%;
      top: 0;
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out; }
    @media screen and (max-width: 1531px) {
      .boxIco .more {
        font-size: 3.5vw; } }
  .boxIco:hover .more {
    height: 90%;
    opacity: 0.9;
    width: 90%; }
    .boxIco:hover .more .contentIco {
      opacity: 1;
      top: 50%; }
  @media screen and (max-width: 600px) {
    .boxIco {
      padding-top: 100%;
      margin-bottom: 1em; } }

.breadcrumb {
  list-style: none;
  margin: 0.75%;
  padding: 0; }
  .breadcrumb li {
    display: inline-block;
    font-size: 0.8em;
    margin-right: 0.5em; }
    .breadcrumb li a {
      color: #555;
      text-decoration: none; }
      .breadcrumb li a:before {
        content: ">";
        padding-right: 0.5em; }
      .breadcrumb li a:hover {
        color: #33ACD5; }
    .breadcrumb li:first-child a {
      background: url(layout/home.png) no-repeat center center;
      background-size: 100% auto;
      display: inline-block;
      height: 16px;
      width: 16px;
      text-indent: -9999px; }
      .breadcrumb li:first-child a:before {
        content: "";
        padding-right: 0; }

article h1 {
  background: url(layout/icoTitle.svg) no-repeat right center;
  background-size: auto 100%;
  color: #33ACD5;
  font-size: 3.2em;
  line-height: 1.3em;
  font-weight: 400;
  padding-right: 33.3333333333%;
  text-transform: uppercase;
  width: 66.6666666667%; }
  article h1 strong {
    font-weight: 900; }
  @media screen and (max-width: 920px) {
    article h1 {
      background: none;
      padding-right: 0;
      width: 100%; } }

article h2 {
  color: #555; }

article p, article ol, article ul {
  margin-bottom: 1em; }

article ol {
  margin-left: 2em; }

article .blueBox, article .greenBox {
  padding: 3.75%;
  margin-bottom: 1em; }

article .blueBox {
  background: #f1f9fc; }
  article .blueBox h2 {
    background-image: url(layout/wave-blue.svg);
    color: #33ACD5; }

article .greenBox {
  margin-top: 2em;
  background: #f3f9ea; }
  article .greenBox h2 {
    color: #96C84F; }

article .flexBox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
  @media screen and (max-width: 920px) {
    article .flexBox {
      display: inherit; } }

article .greyBox {
  background: #efefef;
  text-align: center; }
  article .greyBox h2 {
    color: #33ACD5;
    font-size: 1.3em;
    margin: 0.5em 10%;
    text-transform: none;
    width: 80%; }
  article .greyBox p {
    margin: 1em 10%;
    width: 80%; }
  article .greyBox ul {
    list-style: none;
    margin: 0 10%;
    width: 80%; }
    article .greyBox ul li {
      border-bottom: 1px dashed #33ACD5;
      padding: 0.5em 0;
      text-align: left; }
      article .greyBox ul li a {
        color: #33ACD5;
        text-align: left;
        text-decoration: none; }
        article .greyBox ul li a:hover {
          color: #96C84F; }

article .links, article .contact {
  background-color: #96C84F;
  color: white;
  margin-bottom: 1em;
  padding: 2em 1em 3.5em; }
  article .links a, article .contact a {
    color: white;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out; }
    article .links a:hover, article .contact a:hover {
      opacity: 0.5; }
    article .links a span, article .contact a span {
      background: white;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      color: #96C84F;
      margin-top: -12px;
      padding: 0.2em 0;
      position: absolute;
      right: 0;
      text-align: center;
      top: 50%;
      width: 25px; }
  article .links h2, article .contact h2 {
    background-image: url(layout/wave-white.svg);
    color: white;
    font-size: 1.3em; }
  article .links ul, article .contact ul {
    list-style: none;
    margin: 0 10%;
    padding: 0;
    width: 80%; }
    article .links ul li, article .contact ul li {
      border-bottom: 1px dashed white;
      padding: 1em 2em 1em 0;
      position: relative; }
    @media screen and (max-width: 920px) {
      article .links ul, article .contact ul {
        margin: 0 5%;
        width: 90%; } }

@media screen and (max-width: 920px) {
  article .links {
    float: left;
    margin-left: 3%;
    padding: 5% 2%;
    width: 44.5%; } }

article .linksWeb {
  background-color: #33ACD5; }
  article .linksWeb a span {
    color: #33ACD5; }
  @media screen and (max-width: 920px) {
    article .linksWeb {
      margin-left: 0; } }

article .contact {
  background: #33acd5;
  /* Old browsers */
  background: -moz-linear-gradient(top, #33acd5 0%, #96c84f 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #33acd5 0%, #96c84f 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #33acd5 0%, #96c84f 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33acd5', endColorstr='#96c84f',GradientType=0 );
  /* IE6-9 */ }
  article .contact ul li {
    padding-right: 0; }
    article .contact ul li a {
      background: url(layout/mail.svg) no-repeat right bottom;
      background-size: 2em auto;
      display: block;
      padding-right: 10%;
      width: 90%; }

@media screen and (max-width: 920px) {
  article .col8, article .col4 {
    padding: 0;
    width: 100%; } }

footer {
  background: #33ACD5;
  color: #fff;
  float: left;
  font-size: 0.8em;
  margin-top: 0.75%;
  width: 100%; }
  footer a {
    color: #fff;
    text-decoration: none; }
    footer a:hover {
      text-decoration: underline; }
  footer .imprex {
    background: url(layout/imprex-white.svg) no-repeat center center;
    background-size: 100% auto;
    display: inline-block;
    height: 63px;
    margin-bottom: 1em;
    text-indent: -9999px;
    width: 200px; }
  footer .col8 p {
    margin-left: 2em; }
  @media screen and (max-width: 900px) {
    footer .col8 {
      width: 48.5%; } }
  @media screen and (max-width: 768px) {
    footer .col8 {
      text-align: center;
      width: 98.5%; } }
  footer .col4 img {
    float: left;
    width: 20%; }
    @media screen and (max-width: 768px) {
      footer .col4 img {
        float: none;
        display: inline-block;
        margin: 0 auto;
        width: 90px; } }
  footer .col4 p {
    float: left;
    line-height: 1.2em;
    margin-left: 1em;
    margin-top: 0.5em;
    width: 70%; }
    @media screen and (max-width: 768px) {
      footer .col4 p {
        float: none;
        margin: 0.5em auto;
        width: 78.5%; } }
  @media screen and (max-width: 900px) {
    footer .col4 {
      width: 48.5%; } }
  @media screen and (max-width: 768px) {
    footer .col4 {
      padding-top: 1em;
      text-align: center;
      width: 98.5%; } }