/* 

1. Variables
	- imports
	- colours
	- gradients
	- media queries
	- fonts
	- animation times
2. General
	2.1 Forms
3. Banner
	3.1 Menus
	3.2 Search
4. Main Content
5. Modules
6. News
7. Events
8. Footer
*/
/*
	1. Variables
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

a {
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

@font-face {
  font-family: "oneyou";
  src: url("../fonts/ONEYOUSANSWeb-Regular.eot");
  src: url("../fonts/ONEYOUSANSWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEYOUSANSWeb-Regular.woff") format("woff"), url("../fonts/ONEYOUSANSWeb-Regular.ttf") format("truetype"), url("../fonts/ONEYOUSANSWeb-Regular.svg#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "oneyou-bold";
  src: url("../fonts/ONEYOUSANSWeb-Bold.eot");
  src: url("../fonts/ONEYOUSANSWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEYOUSANSWeb-Bold.woff") format("woff"), url("../fonts/ONEYOUSANSWeb-Bold.ttf") format("truetype"), url("../fonts/ONEYOUSANSWeb-Bold.svg#icomoon") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "oneyou-script";
  src: url("../fonts/ONEYOUSCRIPTWeb-Bold.eot");
  src: url("../fonts/ONEYOUSCRIPTWeb-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ONEYOUSCRIPTWeb-Bold.woff") format("woff"), url("../fonts/ONEYOUSCRIPTWeb-Bold.ttf") format("truetype"), url("../fonts/ONEYOUSCRIPTWeb-Bold.svg#icomoon") format("svg");
  font-weight: bold;
  font-style: normal;
}
[class^=oneyou-], [class*=" oneyou-"] {
  font-family: "oneyou";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
	2. General
*/
html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.outer {
  position: relative;
}
.outer .inner {
  position: relative;
  width: calc(100vw - 13.6rem);
  margin: 0 auto;
  max-width: 130.4rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  .outer .inner {
    width: calc(100vw - 8rem);
  }
}

body {
  font-family: "proxima-nova", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 150%;
  overflow-x: hidden;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}
body ::selection {
  background-color: #FFD600;
}
body.modal {
  overflow: hidden;
  height: 100vh;
}
body p {
  font-family: "proxima-nova", sans-serif;
  font-size: 1.6rem;
  line-height: 137.5%;
  margin-bottom: 2.2rem;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  body p {
    font-size: 1.4rem;
  }
}
body a {
  transition-duration: 0.25s;
}
body blockquote p:last-child {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}
body h1, body h2, body h3, body h4 {
  font-family: "oneyou-bold", sans-serif;
}
body p.black, body h1.black, body h2.black, body h3.black, body h4.black {
  color: black;
}
body p.white, body h1.white, body h2.white, body h3.white, body h4.white {
  color: white;
}
body p.purple, body h1.purple, body h2.purple, body h3.purple, body h4.purple {
  color: #9067A9;
}
body p.yellow, body h1.yellow, body h2.yellow, body h3.yellow, body h4.yellow {
  color: #FFD600;
}
body p.light-blue, body h1.light-blue, body h2.light-blue, body h3.light-blue, body h4.light-blue {
  color: #009EE2;
}
body p.dark-blue, body h1.dark-blue, body h2.dark-blue, body h3.dark-blue, body h4.dark-blue {
  color: #202E59;
}
body p.teal, body h1.teal, body h2.teal, body h3.teal, body h4.teal {
  color: #00A7A7;
}
body p.green, body h1.green, body h2.green, body h3.green, body h4.green {
  color: #D2D700;
}
body h3 {
  font-size: 4.8rem;
  line-height: 120%;
  margin-bottom: 3.58rem;
  font-weight: 400;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  body h3 {
    font-size: 3.6rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  body h3 {
    font-size: 2.8rem;
    margin-bottom: 2rem;
  }
}
body h4 {
  font-size: 2.4rem;
}
p {
  font-size: 1.6rem;
}
p.large {
  font-size: 2rem;
}
p strong {
  font-weight: bold;
}
p a {
  text-decoration: underline;
}
p.link-button a {
  text-decoration: none;
}

.link-button a {
  display: inline-block;
  padding: 1.7rem 4rem;
  font-family: "oneyou", sans-serif;
  color: #202E59;
  border: 1px solid #202E59;
  font-size: 2rem;
  line-height: 2rem;
  height: 2rem;
  border-radius: 3.7rem;
  transition-duration: 0.25s;
}
@media only screen and (min-width: 769px) and (max-width: 1100px), only screen and (min-width: 1px) and (max-width: 768px) {
  .link-button a {
    font-size: 1.6rem;
    line-height: 1.6rem;
    height: 1.6rem;
    padding: 1.2rem 3rem;
  }
}
.link-button a:hover {
  color: white;
  background-color: #202E59;
  border-color: #202E59;
}
.link-button.white a {
  border-color: white;
  color: white;
}
.link-button.white a:hover {
  background-color: white;
  color: #202E59;
}
.link-button.small a {
  padding: 1rem 3rem;
  font-size: 1.6rem;
  line-height: 1.6rem;
  height: 1.6rem;
  border-radius: 2.4rem;
}

/*
	3. Banner
*/
#mobile-menu-button {
  display: none;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #mobile-menu-button {
    display: block;
    position: absolute;
    top: calc(50% - 16px);
    right: 0;
    width: 30px;
    height: 28px;
    text-indent: -999999px;
  }
  #mobile-menu-button a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }
  #mobile-menu-button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 4px;
    background: #202E59;
  }
  #mobile-menu-button:after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 8px;
    border-top: 4px solid #202E59;
    border-bottom: 4px solid #202E59;
  }
}

#menu-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  transition-property: opacity;
  transition-duration: 0.25s;
  background: #202E59;
  display: none;
}
#menu-modal .close {
  position: absolute;
  top: 4rem;
  right: 4rem;
  text-indent: -999999px;
  display: block;
  width: 30px;
  height: 30px;
}
#menu-modal .close:before, #menu-modal .close:after {
  content: "";
  width: 100%;
  height: 4px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
}
#menu-modal .close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#menu-modal .close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.menu-open #menu-modal {
  display: block;
}
#menu-modal #menu-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#menu-modal #menu-content li {
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
}
#menu-modal #menu-content li a {
  color: white;
}
#menu-modal #menu-content li a:hover {
  color: #FFD600;
}

#contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 0.25s;
}
#contact-modal #contact-bg {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(32, 46, 89, 0.85);
}
.contact-modal-open #contact-modal {
  z-index: 99999;
  opacity: 1;
}
#contact-modal .close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 2.8rem;
  height: 2.8rem;
  text-indent: -999999px;
  transform: rotate(45deg);
  cursor: pointer;
}
#contact-modal .close:before {
  width: 2px;
  height: 100%;
  background-color: #FFD600;
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
}
#contact-modal .close:after {
  height: 2px;
  width: 100%;
  background-color: #FFD600;
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
#contact-modal #contact-modal-content {
  width: 86rem;
  max-width: calc(100vw - 80px);
  padding: 10rem 15rem;
  box-sizing: border-box;
  border-radius: 2rem;
  border: 1px solid #FFD600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #202E59;
  text-align: center;
  color: white;
  z-index: 10;
}
#contact-modal #contact-modal-content h3 {
  color: #FFD600;
}

#banner {
  height: 12rem;
}
#banner .inner {
  height: 100%;
}
#banner #website-title {
  width: 12rem;
  height: 8.5rem;
  position: absolute;
  left: 0;
  top: calc(50% + 0.25rem);
  transform: translate(0, -50%);
  text-indent: -999999px;
  background-image: url("../images/H&WB.svg");
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
}
#banner #website-title a {
  width: 100%;
  height: 100%;
  display: block;
}
#banner #website-title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 25%;
  background-image: url("../images/refresh-logo.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
}
#banner #quick-links {
  position: absolute;
  top: 2rem;
  right: 0;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner #quick-links {
    display: none;
  }
}
#banner #quick-links ul li {
  display: inline-block;
  margin: 0 1rem 0 0;
}
#banner #quick-links ul li a {
  color: #00A7A7;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 100%;
  padding: 0.5rem 1.5rem;
}
#banner #quick-links ul li a:hover {
  color: #202E59;
}
#banner #quick-links ul li a.solid {
  background-color: #00A7A7;
  color: white;
  border-radius: 2rem;
}
#banner #quick-links ul li a.solid:hover {
  background-color: #202E59;
}
#banner #main-menu {
  position: absolute;
  top: 50%;
  right: 0;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner #main-menu {
    display: none;
  }
}
#banner #main-menu li.home-link {
  display: inline-block;
  margin: 0 2rem 0 0;
}
#banner #main-menu li.home-link a {
  display: block;
  width: 2rem;
  height: 2rem;
  text-indent: -99999px;
  background: no-repeat url("../images/home-blue.svg");
  background-position: center top;
  background-size: contain;
  transform: translate(0, -3px);
  position: relative;
}
#banner #main-menu li.home-link a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat url("../images/home-green.svg");
  background-position: center top;
  background-size: contain;
  opacity: 0;
  transition-duration: 0.25s;
}
#banner #main-menu li.home-link a:hover:after {
  opacity: 1;
}
#banner #main-menu li#search-button {
  display: inline-block;
  margin: 0 2rem 0 0;
}
#banner #main-menu li#search-button a {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  text-indent: -99999px;
  background: no-repeat url("../images/search-green.svg");
  background-position: center top;
  background-size: contain;
  transform: translate(0, -3px);
  position: relative;
}
#banner #main-menu li#search-button a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: no-repeat url("../images/search-blue.svg");
  background-position: center top;
  background-size: contain;
  opacity: 0;
  transition-duration: 0.25s;
}
.search-open #banner #main-menu li#search-button a:after, #banner #main-menu li#search-button a:hover:after {
  opacity: 1;
}
#banner #main-menu li.text-link {
  font-family: "oneyou-bold", sans-serif;
  display: inline-block;
  margin: 0 2rem 0 0;
}
#banner #main-menu li.text-link a {
  font-size: 2rem;
  color: #202E59;
  position: relative;
}
#banner #main-menu li.text-link a:after {
  content: "";
  position: absolute;
  bottom: -8px;
  opacity: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #202E59;
  transition-duration: 0.2s;
}
#banner #main-menu li.text-link a:hover:after {
  bottom: -4px;
  opacity: 1;
}
#banner #main-menu li.text-link a.dark-blue:after {
  background-color: #202E59;
}
#banner #main-menu li.text-link a.purple:after {
  background-color: #9067A9;
}
#banner #main-menu li.text-link a.orange:after {
  background-color: #E89903;
}
#banner #main-menu li.text-link a.yellow:after {
  background-color: #FFD600;
}
#banner #main-menu li.text-link a.light-blue:after {
  background-color: #009EE2;
}
#banner #main-menu li.text-link a.teal:after {
  background-color: #00A7A7;
}
#banner #main-menu li.text-link a.green:after {
  background-color: #D2D700;
}

#alerts .inner {
  padding: 1.5rem 0;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

#search-bar {
  height: 1px;
  overflow: hidden;
  opacity: 0;
  transition-duration: 0.25s;
  transition-timing-function: ease-in;
  transition-delay: 0.1s;
  transition-property: all;
}
#search-bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.search-open #search-bar {
  height: 13.4rem;
  opacity: 1;
  transition-duration: 0.4s;
  transition-delay: 0s;
  transition-property: height;
}
#search-bar .inner {
  padding: 4.5rem 0;
  text-align: center;
  opacity: 0;
  transition-delay: 0s;
  transition-delay: 0.2s;
  transition-duration: 0.15s;
  transition-timing-function: ease-in;
}
.search-open #search-bar .inner {
  opacity: 1;
  transition-delay: 0.2s;
}
#search-bar .inner span {
  display: inline-block;
  color: #FFD600;
  font-family: "oneyou", sans-serif;
  font-size: 2.4rem;
  margin-right: 2rem;
  cursor: pointer;
}
#search-bar .inner .form-elements {
  display: inline-block;
  position: relative;
}
#search-bar .inner .form-elements:after {
  content: "";
  width: 2.4rem;
  height: 4.8rem;
  background-color: white;
  position: absolute;
  top: 2px;
  right: 13.7rem;
  border-top-right-radius: 2.4rem;
  border-bottom-right-radius: 2.4rem;
  z-index: 999;
}
#search-bar .inner .form-elements input {
  position: relative;
  z-index: 1;
}
#search-bar .inner .form-elements input[type=text] {
  font-family: "proxima-nova", sans-serif;
  font-size: 1.6rem;
  height: 4.8rem;
  padding: 0 2.4rem;
  border: none;
  border-top-left-radius: 2.4rem;
  border-bottom-left-radius: 2.4rem;
  color: #202E59;
}
#search-bar .inner .form-elements input[type=text]::placeholder {
  color: #00A7A7;
  font-family: "proxima-nova", sans-serif;
}
#search-bar .inner .form-elements input[type=text]:focus {
  outline: none;
}
#search-bar .inner .form-elements input[type=submit] {
  border: none;
  background-color: #202E59;
  width: 16rem;
  height: 4.8rem;
  transform: translate(0, 2px);
  border-top-right-radius: 2.4rem;
  border-bottom-right-radius: 2.4rem;
  color: white;
  font-family: "oneyou-bold", sans-serif;
  font-size: 2.4rem;
  cursor: pointer;
  transition-duration: 0.25s;
}
#search-bar .inner .form-elements:hover input[type=submit] {
  background-color: #00A7A7;
}

#introduction.search-intro #page-title h2 {
  font-size: 4rem;
}

#search-results {
  padding: 4rem 0;
}
#search-results li {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 2rem;
}
#search-results li a {
  color: #202E59;
}
#search-results li a:before {
  content: "- ";
}

#banner-intro {
  height: auto;
}
#banner-intro.grey-bg {
  background-color: #F4F3F0;
}
#banner-intro #page-title {
  padding: 4.8rem 5.5rem;
  font-size: 6rem;
  line-height: 120%;
  font-family: "oneyou-bold", sans-serif;
  border-radius: 2rem;
  display: inline-block;
  box-sizing: border-box;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro #page-title {
    width: 100%;
    border-radius: 0;
    font-size: 4rem;
    padding: 2rem 4rem;
  }
}
#banner-intro #page-title.purple {
  background-color: #9067A9;
  color: white;
}
#banner-intro #page-title.yellow {
  background-color: #FFD600;
  color: #202E59;
}
#banner-intro #page-title.light-blue {
  background-color: #009EE2;
  color: white;
}
#banner-intro #page-title.dark-blue {
  background-color: #202E59;
  color: white;
}
#banner-intro #page-title.teal {
  background-color: #00A7A7;
  color: white;
}
#banner-intro #page-title.green {
  background-color: #D2D700;
  color: #202E59;
}
#banner-intro #page-title.orange {
  background-color: #E89903;
  color: white;
}
#banner-intro.text-only {
  padding: 7rem 0 0 0;
  border-top: 2rem solid #202E59;
}
#banner-intro.text-only.purple {
  border-color: #9067A9;
}
#banner-intro.text-only.yellow {
  border-color: #FFD600;
}
#banner-intro.text-only.light-blue {
  border-color: #009EE2;
}
#banner-intro.text-only.dark-blue {
  border-color: #202E59;
}
#banner-intro.text-only.teal {
  border-color: #00A7A7;
}
#banner-intro.text-only.green {
  border-color: #D2D700;
}
#banner-intro.text-only.orange {
  border-color: #E89903;
}
#banner-intro.banner-image {
  height: 50vw;
  min-height: 52rem;
  max-height: 62rem;
  background-size: cover;
  background-position: center center;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro.banner-image {
    min-height: 0;
    max-height: none;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
#banner-intro.banner-image .inner {
  height: 100%;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro.banner-image .inner {
    width: 100%;
  }
}
#banner-intro.banner-image #banner-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro.banner-image #banner-text {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
}
#banner-intro.banner-image #banner-text #banner-introduction {
  background-color: #202E59;
  color: white;
  width: 50%;
  min-width: 61rem;
  max-width: 100vw;
  position: relative;
  left: 4.4rem;
  box-sizing: border-box;
  padding: 4rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro.banner-image #banner-text #banner-introduction {
    left: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 2.4rem 4rem;
  }
}
#banner-intro.banner-image #banner-text #banner-introduction p {
  font-size: 2rem;
  line-height: 150%;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #banner-intro.banner-image #banner-text #banner-introduction p {
    font-size: 1.6rem;
  }
}

/*
	5. Modules
*/
.outer.purple,
.slide-caption.purple {
  background-color: #9067A9;
}
.outer.yellow, .outer.yellow-bg,
.slide-caption.yellow,
.slide-caption.yellow-bg {
  background-color: #FFD600;
}
.outer.light-blue,
.slide-caption.light-blue {
  background-color: #009EE2;
}
.outer.dark-blue,
.slide-caption.dark-blue {
  background-color: #202E59;
}
.outer.teal,
.slide-caption.teal {
  background-color: #00A7A7;
}
.outer.green,
.slide-caption.green {
  background-color: #D2D700;
}
.outer.grey-bg,
.slide-caption.grey-bg {
  background-color: #F4F3F0;
}

.slide-caption.yellow {
  color: #202E59;
}
.slide-caption.teal {
  color: #202E59;
}
.slide-caption.green {
  color: #00A7A7;
}
.slide-caption.purple, .slide-caption.light-blue, .slide-caption.dark-blue {
  color: white;
}
.slide-caption.purple .link-button a, .slide-caption.light-blue .link-button a, .slide-caption.dark-blue .link-button a {
  border-color: white;
  color: white;
}
.slide-caption.purple .link-button a:hover, .slide-caption.light-blue .link-button a:hover, .slide-caption.dark-blue .link-button a:hover {
  background-color: white;
  border-color: white;
  color: #202E59;
}

#timetable-key .inner {
  background-color: white;
  box-sizing: border-box;
  padding: 2rem;
  margin-bottom: 4rem;
}
#timetable-key .inner h3 {
  font-size: 2.4rem;
  color: #202E59;
}
#timetable-key .inner #timetable-key-columns {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #timetable-key .inner #timetable-key-columns {
    display: block;
  }
}
#timetable-key .inner #timetable-key-columns .column {
  width: calc(50% - 4rem);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #timetable-key .inner #timetable-key-columns .column {
    width: 100%;
  }
}
#timetable-key .inner #timetable-key-columns .column .key {
  margin-bottom: 3rem;
  position: relative;
  padding-left: 4.4rem;
  color: #202E59;
}
#timetable-key .inner #timetable-key-columns .column .key strong {
  font-weight: bold;
}
#timetable-key .inner #timetable-key-columns .column .key:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.2rem;
  height: 3.2rem;
  background-color: red;
  border-radius: 50%;
}
#timetable-key .inner #timetable-key-columns .column .key.green:before {
  background-color: #D2D700;
}
#timetable-key .inner #timetable-key-columns .column .key.purple:before {
  background-color: #9067A9;
}
#timetable-key .inner #timetable-key-columns .column .key.yellow:before {
  background-color: #FFD600;
}
#timetable-key .inner #timetable-key-columns .column .key.orange:before {
  background-color: #E89903;
}

#timetable-banner-notice {
  background-color: #00A7A7;
  text-align: center;
  color: white;
  padding: 2rem 0;
  margin-bottom: 4rem;
}
#timetable-banner-notice p {
  margin-bottom: 0;
  font-family: "oneyou-bold", sans-serif;
  font-size: 2.4rem;
}

#modules {
  padding-top: 5rem;
}
#modules.grey {
  background-color: #F4F3F0;
}
#modules .module.timetables {
  padding-bottom: 6rem;
}
#modules .module.timetables #day-filter-buttons {
  display: flex;
  overflow-x: scroll;
}
#modules .module.timetables #day-filter-buttons .day-button {
  width: auto;
  padding: 1.6rem 2rem;
  font-family: "oneyou-bold", sans-serif;
  font-size: 3.6rem;
  color: #202E59;
  opacity: 0.45;
  cursor: pointer;
}
#modules .module.timetables #day-filter-buttons .day-button:hover {
  opacity: 0.8;
}
#modules .module.timetables #day-filter-buttons .day-button.active {
  opacity: 1;
  border-bottom: 6px solid #202E59;
}
#modules .module.timetables .days .day {
  display: none;
}
#modules .module.timetables .days .day.active {
  display: block;
}
#modules .module.timetables .days .day .event {
  background-color: white;
  margin-bottom: 2rem;
  border-top: 18px solid black;
  box-sizing: border-box;
  padding: 1.6rem 3.2rem;
}
#modules .module.timetables .days .day .event h4 {
  color: #202E59;
  margin-bottom: 1rem;
}
#modules .module.timetables .days .day .event p {
  color: #3E3E3E;
}
#modules .module.timetables .days .day .event.green {
  border-color: #D2D700;
}
#modules .module.timetables .days .day .event.purple {
  border-color: #9067A9;
}
#modules .module.timetables .days .day .event.yellow {
  border-color: #FFD600;
}
#modules .module.timetables .days .day .event.orange {
  border-color: #E89903;
}
#modules .module.timetables .days .day .event .event-columns {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.timetables .days .day .event .event-columns {
    display: block;
  }
}
#modules .module.timetables .days .day .event .event-columns .details {
  width: calc(25% - 2rem);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.timetables .days .day .event .event-columns .details {
    width: 100%;
  }
}
#modules .module.timetables .days .day .event .event-columns .details .times, #modules .module.timetables .days .day .event .event-columns .details .cost, #modules .module.timetables .days .day .event .event-columns .details .address {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
}
#modules .module.timetables .days .day .event .event-columns .details .times:before, #modules .module.timetables .days .day .event .event-columns .details .cost:before, #modules .module.timetables .days .day .event .event-columns .details .address:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
#modules .module.timetables .days .day .event .event-columns .details .times:before {
  background-image: url("../images/time.svg");
}
#modules .module.timetables .days .day .event .event-columns .details .cost:before {
  background-image: url("../images/cost.svg");
}
#modules .module.timetables .days .day .event .event-columns .details .address:before {
  background-image: url("../images/place.svg");
}
#modules .module.timetables .days .day .event .event-columns .description {
  width: calc(50% - 2rem);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.timetables .days .day .event .event-columns .description {
    width: 100%;
  }
}
#modules .module.timetables .days .day .event .event-columns .further-info {
  width: calc(25% - 2rem);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.timetables .days .day .event .event-columns .further-info {
    width: 100%;
  }
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount {
  color: rgba(62, 62, 62, 0.5);
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount .tooltip-text {
  visibility: hidden;
  width: 240px;
  background-color: #202E59;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 6px;
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translate(-75%, 0);
  transition-duration: 0.25s;
  z-index: 1;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount .tooltip-text:after {
  content: "";
  position: absolute;
  left: calc(50% - 10px);
  bottom: -10px;
  width: 20px;
  height: 20px;
  z-index: -1;
  background-color: #202E59;
  transform: rotate(45deg);
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount:hover .tooltip-text {
  visibility: visible;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid #D6D6D6;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount.applied {
  color: #202E59;
  font-weight: bold;
  cursor: pointer;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount.applied span {
  border-bottom: 1px solid #202E59;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount.applied:before {
  border-color: #202E59;
}
#modules .module.timetables .days .day .event .event-columns .further-info .discount.applied:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 7px;
  width: 0.6rem;
  height: 1.4rem;
  border-right: 2px solid #202E59;
  border-bottom: 2px solid #202E59;
  transform: rotate(45deg);
}
#modules .module.timetables .days .day .event .event-columns .further-info p {
  color: #202E59;
}
#modules .module.timetables .days .day .event .event-columns .further-info .info {
  position: relative;
  padding-left: 3rem;
}
#modules .module.timetables .days .day .event .event-columns .further-info .info:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 2.2rem;
  background-image: url("../images/metro-info.svg");
}
#modules .module.tiles {
  padding: 10rem 0;
}
#modules .module.tiles h2 {
  font-size: 3.6rem;
  line-height: 120%;
  margin-bottom: 7.2rem;
  color: #202E59;
}
#modules .module.tiles h2.center {
  text-align: center;
}
#modules .module.tiles.no-button {
  background-color: #F4F3F0;
}
#modules .module.tiles.no-button.yellow-bg {
  background-color: #FFD600;
}
#modules .module.tiles.no-button .tile {
  background-color: white;
}
#modules .module.tiles.no-button .tile h3 {
  padding: 0 2.4rem;
}
#modules .module.tiles .tile-grid {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.tiles .tile-grid {
    display: block;
  }
}
#modules .module.tiles .tile-grid .tile {
  width: calc(33.33333% - 40px);
  min-width: 32rem;
  margin: 0 2rem;
  cursor: pointer;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.tiles .tile-grid .tile {
    width: 100%;
    margin: 0 auto;
  }
}
#modules .module.tiles .tile-grid .tile .image {
  width: 100%;
  height: 0;
  padding-top: 69.60784%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  position: relative;
}
#modules .module.tiles .tile-grid .tile .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transition-duration: 0.25s;
  transform: translate(-50%, -50%) scale(1);
}
#modules .module.tiles .tile-grid .tile h3 {
  font-size: 2.4rem;
  margin: 2.4rem 0;
}
#modules .module.tiles .tile-grid .tile h3 a {
  color: #202E59;
}
#modules .module.tiles .tile-grid .tile .excerpt {
  margin-bottom: 2.4rem;
}
#modules .module.tiles .tile-grid .tile:hover .image img {
  transform: translate(-50%, -50%) scale(1.1);
}
#modules .module.tiles .tile-grid .tile:hover .link-button a {
  background-color: #202E59;
  color: white;
}
#modules .module.columns {
  padding: 5rem 0;
}
#modules .module.columns .column-group {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.columns .column-group {
    display: block;
  }
}
#modules .module.columns .column-group .column img {
  max-width: 100%;
  height: auto;
}
#modules .module.columns .column-group .column h3 {
  color: #00A7A7;
}
#modules .module.columns .column-group .column h4 {
  color: #202E59;
  margin-bottom: 3.6rem;
}
#modules .module.columns .column-group .column p:not(.link-button) {
  color: #3E3E3E;
}
#modules .module.columns .column-group .column p:not(.link-button) strong {
  color: #202E59;
}
#modules .module.columns .column-group .column p:not(.link-button) a {
  color: #3E3E3E;
  text-decoration: none;
  border-bottom: 1px solid #FFD600;
}
#modules .module.columns .column-group .column p:not(.link-button) a:hover {
  border-bottom-color: #3E3E3E;
}
#modules .module.columns .column-group.cols-2 .column {
  width: calc(50% - 45px);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.columns .column-group.cols-2 .column {
    width: 100%;
  }
}
#modules .module.columns .column-group.image-pd .text {
  padding: 5rem 0 0 0;
}
#modules .module.carousel {
  width: 100vw;
  height: calc(100vh - 25.4rem);
  max-height: 60vw;
  margin-bottom: 10rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel {
    height: calc(100vh - 15rem);
    max-height: none;
  }
}
#modules .module.carousel .swiper-pagination {
  position: absolute;
  left: auto;
  right: 6.8rem;
  display: inline-block;
  width: auto;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-pagination {
    right: 3rem;
    bottom: 3rem;
  }
}
#modules .module.carousel .swiper-pagination .swiper-pagination-bullet {
  width: 1.6rem;
  height: 1.6rem;
  background-color: #202E59;
  opacity: 0.3;
  transition-duration: 0.25s;
  cursor: pointer;
}
#modules .module.carousel .swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.6;
}
#modules .module.carousel .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}
#modules .module.carousel .swiper-slide {
  width: 100%;
  height: 100%;
}
#modules .module.carousel .swiper-slide .slide-caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  min-width: 48rem;
  height: 100%;
  box-sizing: border-box;
  padding: 9.3rem 6.8rem;
  z-index: 10;
  border-top-right-radius: 2.4rem;
  border-bottom-right-radius: 2.4rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-slide .slide-caption {
    width: 100%;
    min-width: 0;
    height: calc(50% + 30px);
    top: auto;
    bottom: 0;
    padding: 3rem;
  }
}
#modules .module.carousel .swiper-slide .slide-caption h3 {
  margin-bottom: 4rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-slide .slide-caption h3 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
  }
}
#modules .module.carousel .swiper-slide .slide-caption p {
  font-size: 2rem;
  font-weight: bold;
  opacity: 0.7;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  #modules .module.carousel .swiper-slide .slide-caption p {
    font-size: 1.6rem;
  }
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-slide .slide-caption p {
    font-size: 1.4rem;
  }
}
#modules .module.carousel .swiper-slide .slide-image {
  position: absolute;
  top: 0;
  left: calc(40% - 2.6rem);
  width: calc(60% + 2.6rem);
  height: calc(100% - 4.5rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-slide .slide-image {
    width: 100%;
    height: 50%;
    left: 0;
  }
}
#modules .module.carousel .swiper-slide .link-button {
  margin-top: 9rem;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  #modules .module.carousel .swiper-slide .link-button {
    margin-top: 6rem;
  }
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.carousel .swiper-slide .link-button {
    margin-top: 3rem;
  }
}
#modules .module.featured-call-to-action {
  height: 60vh;
  min-height: 600px;
}
@media only screen and (min-width: 769px) and (max-width: 1100px) {
  #modules .module.featured-call-to-action {
    height: 50vh;
    min-height: 400px;
  }
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.featured-call-to-action {
    height: 60vh;
  }
}
#modules .module.featured-call-to-action .description .white {
  color: white;
}
#modules .module.featured-call-to-action .description .black {
  color: black;
}
#modules .module.featured-call-to-action.half {
  display: flex;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.featured-call-to-action.half {
    display: block;
  }
}
#modules .module.featured-call-to-action.half.purple {
  background-color: #9067A9;
}
#modules .module.featured-call-to-action.half.yellow, #modules .module.featured-call-to-action.half.yellow-bg {
  background-color: #FFD600;
}
#modules .module.featured-call-to-action.half.light-blue {
  background-color: #009EE2;
}
#modules .module.featured-call-to-action.half.dark-blue {
  background-color: #202E59;
}
#modules .module.featured-call-to-action.half.teal {
  background-color: #00A7A7;
}
#modules .module.featured-call-to-action.half.green {
  background-color: #D2D700;
}
#modules .module.featured-call-to-action.half.grey-bg {
  background-color: #F4F3F0;
}
#modules .module.featured-call-to-action.half .description {
  position: relative;
  z-index: 0;
}
#modules .module.featured-call-to-action.half .description .panel {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: calc(50% - 4rem);
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.featured-call-to-action.half .description .panel {
    width: 100%;
    position: relative;
    top: auto;
    transform: none;
    padding: 2rem 0;
  }
}
#modules .module.featured-call-to-action.half .image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  border-top-left-radius: 2.4rem;
  border-bottom-left-radius: 2.4rem;
  z-index: 999;
  background-size: cover;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.featured-call-to-action.half .image {
    width: 100%;
    height: 50%;
    position: relative;
  }
}
#modules .module.featured-call-to-action.full .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  min-height: 400px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
#modules .module.featured-call-to-action.full .image.left {
  background-position-x: left;
}
#modules .module.featured-call-to-action.full .image.right {
  background-position-x: right;
}
#modules .module.featured-call-to-action.full .image.top {
  background-position-y: top;
}
#modules .module.featured-call-to-action.full .image.bottom {
  background-position-y: bottom;
}
#modules .module.featured-call-to-action.full .description {
  position: relative;
}
#modules .module.featured-call-to-action.full .description .column {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, 50%);
  width: 40%;
  min-width: 300px;
  color: white;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  #modules .module.featured-call-to-action.full .description .column {
    top: 2rem;
    transform: none;
  }
}
#modules .module.featured-call-to-action.full .description .column h3 {
  color: #FFD600;
}
#modules .module.featured-call-to-action.full .description .column p {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: bold;
}
#modules .module.featured-call-to-action.full .description .column p a {
  color: white;
  border-bottom: 1px solid #FFD600;
  text-decoration: none;
}

/*
	8. Footer
*/
footer {
  border-top: 2px solid #FFD600;
  padding: 5.5rem 0 10rem 0;
  background-color: #202E59;
}
footer #footer-logo {
  width: 17.5rem;
  height: 3.2rem;
  text-indent: -99999px;
  background-image: url("../images/refresh-logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
footer .socials {
  margin-top: 2.4rem;
}
footer .socials li {
  display: inline-block;
  margin-right: 12px;
}
footer .socials li a {
  display: block;
  width: 22px;
  height: 22px;
  text-indent: -999999px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
footer .socials li.facebook a {
  background-image: url("../images/facebook-white.svg");
}
footer .socials li.twitter a {
  background-image: url("../images/twitter-white.svg");
}
footer .footer-columns {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
footer .footer-columns .footer-column {
  width: 13.5rem;
  margin-right: 3.5rem;
}
@media only screen and (min-width: 1px) and (max-width: 768px) {
  footer .footer-columns .footer-column {
    width: 50%;
  }
}
footer .footer-columns .footer-column h4 {
  font-size: 2rem;
  font-family: "proxima-nova", sans-serif;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
footer .footer-columns .footer-column h4 a {
  color: #FFD600;
}
footer .footer-columns .footer-column p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
footer .footer-columns .footer-column p a {
  text-decoration: none;
  color: white;
}
footer .footer-columns .footer-column#logo-column {
  width: 224px;
}