/*
Theme Name: Sailmakers Shopping
Theme URI: https://bewonder.co.uk/
Author: Bewonder*
Author URI: https://bewonder.co.uk/
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags:
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@-webkit-keyframes exit {
  0% {
    width: 0;
    height: 5px; }
  50% {
    width: 100%;
    height: 5px; }
  100% {
    width: 100%;
    height: calc(100vh - 60px); } }
@keyframes exit {
  0% {
    width: 0;
    height: 5px; }
  50% {
    width: 100%;
    height: 5px; }
  100% {
    width: 100%;
    height: calc(100vh - 60px); } }

@-webkit-keyframes loaded {
  from {
    width: 100%;
    height: calc(100vh - 60px); }
  to {
    width: 100%;
    height: 0; } }

@keyframes loaded {
  from {
    width: 100%;
    height: calc(100vh - 60px); }
  to {
    width: 100%;
    height: 0; } }

* {
  box-sizing: border-box; }

a {
  font-weight: 800;
  color: #3c3c3c;
  text-decoration: none; }

body {
  margin: 0;
  font-family: ff-tisa-sans-web-pro, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  body.loading {
    pointer-events: none; }
  body:before {
    display: block;
    content: '';
    height: 40vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.04);
    position: fixed;
    pointer-events: none;
    z-index: 0;
    bottom: 0; }
  body.home .copyright-text {

    bottom: 40px;
    left: 0;
    right: 0; }

header {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5; }
  body.home header {
    height: 55px;
    padding-left: 0; }
    body.home header .opening-times {
      display: block;
      padding: 20px 0;
      font-weight: 800; }
  header:before {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #ffffff; }
  header a#site-logo {
    display: block;
    position: relative;
    margin: 18px auto;
    background: url(media/stjohns/st-johns-logo-full-colour.svg) center/contain no-repeat;
    font-size: 0;
    text-decoration: none;
    width: 240px;
    height: 30px; }
  header .opening-times {
    display: block;
    position: relative;
    width: 100%;
    font-size: 0.8125em;
    line-height: 1em;
    color: #fff;
    font-family: ff-tisa-sans-web-pro, sans-serif;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-style: italic;
    display: none; }
  header .postcode {
    display: none; }
  header .hamburger {
    display: block;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #003a70;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    z-index: 11;
    box-shadow: 6px 6px 6px -5px rgba(0, 0, 0, 0.08);
    outline: none; }
    header .hamburger.is-active .hamburger-inner:before, header .hamburger.is-active .hamburger-inner:after {
      background-color: #fff; }
    header .hamburger .hamburger-box {
      width: 26px;
      top: 2px; }
    header .hamburger .hamburger-inner {
      background-color: #fff;
      width: 26px;
      height: 2px; }
      header .hamburger .hamburger-inner:before, header .hamburger .hamburger-inner:after {
        background-color: #fff;
        width: 26px;
        height: 2px; }

nav #loading-bar {
  background: #ffffff; }
  nav #loading-bar.dark-blue {
    background: #8bb8e8; }
  nav #loading-bar.light-blue {
    background: #73a2de; }
  nav #loading-bar.pink {
    background: #6f79bd; }
  nav #loading-bar.mustard {
    background: #f1c400; }
  nav #loading-bar.white {
    background: #ffffff; }

body.page-home {
  overflow: hidden; }
  body.page-home header {
    background-color: #ffffff; }
  body.page-home main {
    background: #ffffff; }

body.page-stores-page, body.single-stores {
  background-color: #eaf1f9; }

body.post-type-archive-whats_on .whats-on-category-filter {
  padding-bottom: 2em; }

body.page-visit {
  background-color: #e7f0ed; }

body.page-information {
  background-color: #fbeae5; }
  body.page-information main .title-wrapper {
    position: relative; }
  body.page-information .social-media-links .facebook {
    background: url(media/icons/facebook-icon-white.svg); }
  body.page-information .social-media-links .twitter {
    background: url(media/icons/twitter-icon-white.svg); }
  body.page-information .two-column-flex {
    display: -webkit-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; }
    body.page-information .two-column-flex > div {
      width: 100%; }
  body.page-information .dynamic-hours-container {
    max-width: 300px;
    padding: 20px;
    background-color: #ffb5a5;
    margin-top: 20px;
    box-shadow: 6px 6px 6px -5px rgba(0, 0, 0, 0.08); }
    body.page-information .dynamic-hours-container h3 {
      margin: 0;
      margin-bottom: 20px;
      color: #3c3c3c;
      font-weight: 500; }
    body.page-information .dynamic-hours-container .store-link {
      text-decoration: none;
      display: block;
      color: #3c3c3c;
      margin: 10px 0; }
  body.page-information div.wpforms-container-full .wpforms-form input[type=text],
  body.page-information div.wpforms-container-full .wpforms-form input[type=email],
  body.page-information div.wpforms-container-full .wpforms-form input[type=tel],
  body.page-information div.wpforms-container-full .wpforms-form textarea,
  body.page-information .select2-container--default .select2-selection--single {
    border: 0;
    border-radius: 5px;
    box-shadow: 6px 6px 6px -5px rgba(0, 0, 0, 0.08); }
  body.page-information div.wpforms-container-full .wpforms-form button[type=submit] {
    border: 2px solid #3c3c3c;
    padding: 15px;
    color: #3c3c3c;
    background: transparent;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8em; }
  body.page-information .two-column-flex h2 {
    color: #3c3c3c; }

body.post-type-archive-whats_on {
  background-color: #eaf1f9; }
  body.post-type-archive-whats_on .content-container {
    padding-top: 0; }
  body.post-type-archive-whats_on img {
    width: 100%;
    height: auto; }
  body.post-type-archive-whats_on .filter-nav li a.active,
  body.post-type-archive-whats_on .filter-nav li a:hover,
  body.post-type-archive-whats_on .filter-nav li a:active {
    background-color: #6f79bd; }
  body.post-type-archive-whats_on .title-container h1 {
    color: #3c3c3c; }
  body.post-type-archive-whats_on .flex {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap; }
    body.post-type-archive-whats_on .flex .flex-item {
      width: 100%;
      padding: 2rem;
      box-sizing: border-box;
      font-size: 0.8rem;
      background-color: white;
      margin: 1% 1.5%; }
      body.post-type-archive-whats_on .flex .flex-item h2 {
        font-size: 1rem;
        text-transform: none;
        letter-spacing: normal;
        color: #6f79bd; }
  body.post-type-archive-whats_on .whats-on-area {
    display: none;
    background-color: #fff;
    border-radius: 20px; }
    body.post-type-archive-whats_on .whats-on-area.active {
      display: block; }
    body.post-type-archive-whats_on .whats-on-area.offers.active, body.post-type-archive-whats_on .whats-on-area.news.active {
      display: -webkit-box;
      display: flex; }
  body.post-type-archive-whats_on .whats-on-area.offers img,
  body.post-type-archive-whats_on .whats-on-area.news img {
    max-width: 175px;
    max-height: 100px;
    margin: 0 auto; }
  body.post-type-archive-whats_on .whats-on-category-filter {
    min-height: auto;
    text-align: center;
    margin-bottom: 4rem; }
    body.post-type-archive-whats_on .whats-on-category-filter ul {
      list-style: none;
      padding: 0;
      margin: 0; }
    body.post-type-archive-whats_on .whats-on-category-filter li {
      display: inline-block; }
    body.post-type-archive-whats_on .whats-on-category-filter a {
      display: block;
      padding: 15px 25px;
      border: 2px solid #fff;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-weight: 800;
      color: #fff;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
      body.post-type-archive-whats_on .whats-on-category-filter a.active, body.post-type-archive-whats_on .whats-on-category-filter a:hover {
        background-color: #fff;
        color: #eaf1f9; }
  body.post-type-archive-whats_on .whats-on-area.events {
    background-color: transparent; }
    body.post-type-archive-whats_on .whats-on-area.events .event-container {
      padding: 2rem;
      box-sizing: border-box;
      margin: 2rem auto;
      background-color: #fff;
      box-shadow: 6px 6px 6px -5px rgba(0, 0, 0, 0.08); }
      body.post-type-archive-whats_on .whats-on-area.events .event-container:after {
        display: block;
        content: '';
        clear: both; }
      body.post-type-archive-whats_on .whats-on-area.events .event-container h2 a {
        text-decoration: none;
        text-transform: none;
        letter-spacing: normal;
        color: #6f79bd; }
      body.post-type-archive-whats_on .whats-on-area.events .event-container .image-area img {
        height: 300px;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: center;
           object-position: center; }
  body.post-type-archive-whats_on .whats-on-area.news a {
    text-decoration: none;
    color: #6f79bd; }
  body.post-type-archive-whats_on .whats-on-area.offers {
    background-color: transparent; }
    body.post-type-archive-whats_on .whats-on-area.offers .offer-container {
      box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.07); }
  body.post-type-archive-whats_on .social-media-links .facebook {
    background: url(media/icons/facebook-icon-white.svg); }
  body.post-type-archive-whats_on .social-media-links .twitter {
    background: url(media/icons/twitter-icon-white.svg); }

body.single-whats_on .social-media-links .twitter {
  background: url(media/icons/twitter-icon-white.svg) center/contain no-repeat; }

body.single-whats_on .social-media-links .facebook {
  background: url(media/icons/facebook-icon-white.svg) center/contain no-repeat; }

body.single-whats_on .copyright-text p {
  color: #fff; }

body.single-whats_on .title-container h1 {
  font-family: ff-tisa-sans-web-pro, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.5em;
  color: #003a70; }

body.single-whats_on .content-wrapper {
  background-color: #fff; }
  body.single-whats_on .content-wrapper:after {
    display: block;
    content: '';
    clear: both; }

body.single-whats_on .the-content-container,
body.single-whats_on .image-container {
  padding: 40px; }

body.single-whats_on img {
  max-width: 100%;
  height: auto; }

body.single-whats_on .image-container {
  text-align: center; }

body.page-leasing-opportunities {
  background-color: #eaf1f9; }
  body.page-leasing-opportunities .three-column-boxes {
    justify-content: space-around;
    display: -webkit-box;
    display: flex; }
    body.page-leasing-opportunities .three-column-boxes .box {
      background-color: #fff;
      padding: 4%;
      box-shadow: 8px 8px 8px -5px rgba(0, 0, 0, 0.08);
      border-radius: 5px;
      margin: 10px 0; }
    body.page-leasing-opportunities .three-column-boxes .enquiry-email {
      display: block;
      text-decoration: none;
      color: #3c3c3c;
      font-weight: 600; }
    body.page-leasing-opportunities .three-column-boxes h2 {
      margin-top: 0; }
  body.page-leasing-opportunities .download-link {
    display: block;
    text-decoration: none;
    font-size: 1.2em;
    margin: 1.5em 0;
    font-weight: 600;
    color: #3c3c3c;
    text-align: center; }
    body.page-leasing-opportunities .download-link:after {
      display: inline-block;
      content: '';
      width: 12px;
      height: 25px;
      background: url(media/stjohns/arrow-right-navy.svg) no-repeat center;
      margin-left: 10px;
      position: relative;
      top: 8px; }

nav {
  display: block; }
  nav .main-menu-primary {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    padding-bottom: 90px;
    z-index: 10;
    pointer-events: visible;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.3s 1s;
    transition: opacity 0.3s 1s;
    background-color: #8bb8e8; }
    nav .main-menu-primary.active {
      display: block;
      opacity: 1; }
    nav .main-menu-primary label {
      display: none; }
    nav .main-menu-primary ul {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      flex-wrap: wrap;
      margin: 0;
      padding: 0; }
      nav .main-menu-primary ul li {
        display: block;
        -webkit-box-flex: 0;
                flex: 0 1 auto;
        width: 100%; }
        nav .main-menu-primary ul li a {
          display: block;
          width: 100%;
          height: 60px;
          background: right 35px center/13px 24px no-repeat #8bb8e8;
          text-align: center;
          font-family: ff-tisa-sans-web-pro, sans-serif;
          font-style: normal;
          font-weight: 600;
          font-size: 0.75em;
          line-height: 60px;
          color: #fff;
          text-decoration: none;
          -webkit-transition: .75s ease;
          transition: .75s ease; }
          nav .main-menu-primary ul li a.active {
            background: right 35px center/13px 24px no-repeat #418fde;
            -webkit-transition: .75s ease;
            transition: .75s ease; }
          nav .main-menu-primary ul li a:hover {
            cursor: pointer;
            background: right 35px center/13px 24px no-repeat #418fde; }
        nav .main-menu-primary ul li.current-menu-item a {
          border-bottom: 6px solid #a5a0a1; }
        nav .main-menu-primary ul li a.active {
          border-bottom: 6px solid #a5a0a1; }
  nav #loading-bar {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 0;
    height: 100%;
    margin: auto;
    z-index: 15; }
    nav #loading-bar.exit {
      -webkit-animation: exit 1s ease 1 forwards;
              animation: exit 1s ease 1 forwards; }
    nav #loading-bar.loaded {
      width: 100%;
      -webkit-animation: loaded 2s ease 1 forwards;
              animation: loaded 2s ease 1 forwards; }

.three-column-boxes {
  justify-content: space-around;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap; }
  .three-column-boxes .box {
    width: 100%;
    margin: 20px 0; }

footer {
  display: none; }

.social-media-links {
  position: relative;
  font-size: 0;
  text-align: center; }
  .social-media-links a {
    display: inline-block;
    position: relative;
    height: 14px;
    margin: 0 25px 0 0; }
    .social-media-links a:last-child {
      margin: 0; }
    .social-media-links a.facebook {
      width: 8px;
      background: url(media/icons/facebook-icon-green.svg) center/contain no-repeat; }
    .social-media-links a.twitter {
      width: 16px;
      background: url(media/icons/twitter-icon-green.svg) center/contain no-repeat; }
    .social-media-links a.instagram {
      width: 14px;
      background: url(media/icons/instagram.svg) center/contain no-repeat; }

main {
  display: block;
  position: relative;
  width: 100vw;
  height: auto;
  min-height: calc(100vh - 125px); }
  main section {
    display: block;
    position: relative;
    width: 100vw;
    height: auto;
    min-height: calc(100vh - 125px);
    padding: 0 0 60px 0;
    z-index: 0; }
    body.home main section {
      padding-bottom: 0; }
    main section .title-container {
      display: block;
      position: relative;
      width: 100%;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto; }
      main section .title-container h1 {
        display: block;
        position: relative;
        width: 100%;
        font-family: ff-tisa-sans-web-pro, sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 2.1875em;
        line-height: 1.2;
        color: #3c3c3c;
        text-align: center;
        margin: 0; }
      main section .title-container p {
        display: block;
        position: relative;
        width: 100%;
        line-height: 1.2;
        letter-spacing: 0.025em;
        text-align: center;
        margin: 10px 0 0 0; }
    main section .content-container {
      display: block;
      position: relative;
      width: 100%;
      padding: 20px; }
    main section .btn {
      display: block;
      max-width: 300px;
      margin-bottom: 10px; }
      main section .btn.arrow {
        display: block;
        position: relative;
        width: 100%;
        max-width: 310px;
        text-transform: uppercase;
        padding: 20px 50px 20px 23px;
        font-size: 0.8em;
        line-height: 1.25;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 0.3em;
        background: url(media/icons/nav-arrow.svg) right 15px center/13px 24px no-repeat #6f79bd;
        text-decoration: none; }
    main section#home {
      background: #6f79bd; }
      main section#home .hero-img-container {
        height: 55vh;
        background-size: cover;
        position: relative; }
        main section#home .hero-img-container:before {
          display: block;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          background: url(media/stjohns/mobile-curve.svg) no-repeat center;
          width: 100%;
          height: 70px;
          background-size: 530px 70px;
          top: -2px; }
        main section#home .hero-img-container:after {
          display: block;
          content: '';
          width: 130px;
          height: 130px;
          background: url(media/stjohns/st-johns-brand-graphic-white.svg);
          position: absolute;
          bottom: -20px;
          right: -10px; }
      main section#home .homepage-banner-link {
        text-decoration: none;
        font-size: 1em;
        color: #f1c400;
        display: block;
        padding: 10px 0px;
        font-weight: 500;
        margin-top: 10px; }
        main section#home .homepage-banner-link:after {
          display: inline-block;
          content: '';
          width: 10px;
          height: 15px;
          background: url(media/stjohns/arrow-right-yellow.svg) no-repeat center;
          margin-left: 10px;
          position: relative;
          top: 3px;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          left: 0; }
        main section#home .homepage-banner-link:hover:after {
          left: 5px; }
      main section#home .hero-img {
        max-width: 100%; }
      main section#home .content-container {
        position: relative; }
      main section#home .logo-home {
        width: 50%;
        max-width: 185px;
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0); }
      main section#home #homepage-about {
        display: none; }
      main section#home .content {
        display: block;
        text-align: center;
        padding-top: 40px;
        max-width: 290px;
        margin: 0 auto; }
        main section#home .content h1 {
          display: block;
          width: 100%;
          max-width: 9em;
          margin: 0 auto 0;
          font-size: 2.75em;
          line-height: 1;
          text-align: center; }
          main section#home .content h1 span {
            display: block;
            position: relative;
            width: 100%;
            color: #ffffff;
            font-size: 0.5em;
            font-weight: 400; }
          main section#home .content h1 span:nth-child(1) {
            font-family: ff-tisa-sans-web-pro, sans-serif;
            font-style: normal;
            font-weight: 300;
            font-style: italic; }
          main section#home .content h1 span:nth-child(2) {
            font-size: 2.25rem; }
          main section#home .content h1 img {
            display: block;
            max-width: 3em;
            margin: 0.2em auto; }
      main section#home .social-media-links {
        width: 100%;
        padding: 23px 0;
        font-size: 0;
        text-align: center; }
        main section#home .social-media-links a {
          display: inline-block;
          position: relative;
          height: 14px;
          margin: 0 25px 0 0; }
          main section#home .social-media-links a:last-child {
            margin: 0; }
          main section#home .social-media-links a.facebook {
            width: 8px;
            background: url(media/icons/facebook.svg) center/contain no-repeat; }
          main section#home .social-media-links a.twitter {
            width: 16px;
            background: url(media/icons/twitter.svg) center/contain no-repeat; }
          main section#home .social-media-links a.instagram {
            width: 14px;
            background: url(media/icons/instagram.svg) center/contain no-repeat; }
    main section#stores-page {
      overflow: hidden; }
      main section#stores-page .store-filter-container {
        display: block;
        position: relative;
        width: 100%;
        font-size: 16px; }
        main section#stores-page .store-filter-container label {
          display: block;
          position: relative;
          width: calc(100% - 97px);
          width: -ms-calc(100% - 97px);
          font-family: ff-tisa-sans-web-pro, sans-serif;
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 54px;
          letter-spacing: 0.3em;
          color: #002749;
          text-transform: uppercase;
          padding: 0 20px;
          margin: 0 auto;
          text-align: center; }
        main section#stores-page .store-filter-container .filter-list {
          display: block;
          position: fixed;
          width: calc(100% - 97px);
          width: -ms-calc(100% - 97px);
          height: auto;
          top: 40px;
          padding: 20px;
          background: #6f79bd;
          visibility: hidden;
          -webkit-transform: translateX(-100%);
                  transform: translateX(-100%);
          -webkit-transition: .75s all ease;
          transition: .75s all ease;
          z-index: 5; }
          main section#stores-page .store-filter-container .filter-list:after {
            display: block;
            content: '';
            width: 45px;
            height: 45px;
            background: url(media/stjohns/st-johns-brand-graphic-white.svg) no-repeat center;
            opacity: 0.7;
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: none; }
          main section#stores-page .store-filter-container .filter-list li.active {
            color: #fff; }
          main section#stores-page .store-filter-container .filter-list .nearby-stores {
            margin-bottom: 4em; }
          main section#stores-page .store-filter-container .filter-list button {
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            width: 97px;
            font-family: ff-tisa-sans-web-pro, sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 54px;
            color: #ffffff;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            background: url(media/icons/filter-arrow.svg) left 10px center/13px 24px no-repeat #6f79bd;
            border: none;
            border-radius: 0;
            padding: 0;
            text-align: center;
            visibility: visible;
            border-radius: 0px 5px 5px 0; }
          main section#stores-page .store-filter-container .filter-list h3 {
            display: block;
            position: relative;
            width: 100%;
            font-size: 1.3em;
            line-height: 1.2;
            margin: 1em 0 1em 0;
            color: #fff;
            font-family: ff-tisa-sans-web-pro, sans-serif;
            font-style: normal;
            font-weight: 600;
            font-style: italic; }
          main section#stores-page .store-filter-container .filter-list ul {
            display: block;
            position: relative;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none; }
            main section#stores-page .store-filter-container .filter-list ul li {
              display: block;
              position: relative;
              font-family: ff-tisa-sans-web-pro, sans-serif;
              font-style: normal;
              font-weight: 600;
              font-size: 0.8em;
              text-transform: uppercase;
              line-height: 1.15em;
              letter-spacing: 0.2em;
              color: #fff;
              margin: 0 0 1em 0; }
          main section#stores-page .store-filter-container .filter-list .store-guide-link {
            display: none;
            font-weight: 800;
            color: #f1c400;
            text-decoration: none; }
            main section#stores-page .store-filter-container .filter-list .store-guide-link:after {
              display: inline-block;
              content: '';
              width: 15px;
              height: 25px;
              background: url(media/stjohns/arrow-right-yellow.svg) no-repeat center;
              margin-left: 10px;
              position: relative;
              top: 8px; }
        main section#stores-page .store-filter-container.active .filter-list {
          -webkit-transform: translateX(0);
                  transform: translateX(0);
          visibility: visible;
          -webkit-transition: .75s all ease;
          transition: .75s all ease; }
      main section#stores-page .content-container .content {
        display: block;
        position: relative;
        width: 100%; }
        main section#stores-page .content-container .content .grid-sizer {
          width: 100%; }
        main section#stores-page .content-container .content .gutter-sizer {
          width: 0; }
        main section#stores-page .content-container .content article {
          display: block;
          position: relative;
          width: 100%;
          margin-bottom: 10px;
          background: #fff;
          box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.07);
          border-radius: 5px; }
          main section#stores-page .content-container .content article .container {
            display: block;
            position: relative;
            width: 100%;
            padding: 58% 0 0 0; }
            main section#stores-page .content-container .content article .container .front {
              display: block;
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
              width: 100%;
              -webkit-transform: translateY(-50%);
                      transform: translateY(-50%);
              padding: 20px; }
              main section#stores-page .content-container .content article .container .front .store-logo {
                text-align: center;
                color: #3c3c3c; }
              main section#stores-page .content-container .content article .container .front img {
                display: block;
                position: relative;
                width: 100%;
                max-width: 125px;
                height: auto;
                max-height: 50px;
                margin: auto;
                font-size: 0; }
            main section#stores-page .content-container .content article .container .back {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: 100%;
              visibility: hidden;
              opacity: 0; }
              main section#stores-page .content-container .content article .container .back .content {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
                padding: 20px;
                text-align: center;
                top: 50%;
                -webkit-transform: translateY(-100%);
                        transform: translateY(-100%); }
                main section#stores-page .content-container .content article .container .back .content h3 {
                  display: block;
                  position: relative;
                  width: 100%;
                  font-family: ff-tisa-sans-web-pro, sans-serif;
                  font-style: normal;
                  font-weight: 600;
                  font-size: 1.5em;
                  line-height: 1.2;
                  margin: 0 0 0.75em 0; }
                  main section#stores-page .content-container .content article .container .back .content h3 a {
                    text-decoration: none;
                    color: #3c3c3c; }
                main section#stores-page .content-container .content article .container .back .content p {
                  display: block;
                  position: relative;
                  width: 100%;
                  font-family: ff-tisa-sans-web-pro, sans-serif;
                  font-style: normal;
                  font-weight: 500;
                  font-size: 1em;
                  line-height: 1.2;
                  margin: 0; }
                main section#stores-page .content-container .content article .container .back .content .links {
                  display: block;
                  position: relative;
                  margin: 10px 0 0 0;
                  text-align: center;
                  font-size: 0; }
                  main section#stores-page .content-container .content article .container .back .content .links a {
                    display: inline-block;
                    position: relative;
                    width: 24px;
                    height: 24px;
                    font-size: 0;
                    margin: 0;
                    top: 10px; }
                    main section#stores-page .content-container .content article .container .back .content .links a.website {
                      background: url(media/icons/website.svg) center/contain no-repeat; }
              main section#stores-page .content-container .content article .container .back p.click-and-collect,
              main section#stores-page .content-container .content article .container .back p.nearby-store {
                display: block;
                position: absolute;
                bottom: 20px;
                left: 0;
                right: 0;
                width: 100%;
                font-family: ff-tisa-sans-web-pro, sans-serif;
                font-style: normal;
                font-weight: 600;
                font-size: 1em;
                line-height: 1.416666666666667em;
                color: #418fde;
                text-align: center;
                padding: 0 0 36px 0;
                background: url(media/icons/click-collect-button.svg) center bottom/26px 26px no-repeat;
                margin: 0; }
              main section#stores-page .content-container .content article .container .back p.nearby-store {
                background: none; }
          main section#stores-page .content-container .content article:hover .front, main section#stores-page .content-container .content article:active .front {
            opacity: 0;
            visibility: hidden; }
          main section#stores-page .content-container .content article:hover .back, main section#stores-page .content-container .content article:active .back {
            opacity: 1;
            visibility: visible; }
    main section#single-store .content-container {
      background: white; }
    main section#single-store .store-image {
      max-width: 100%;
      height: auto !important;
      margin-bottom: 2em; }
    main section#single-store .store-logo {
      background-color: #6f79bd;
      padding: 2rem; }
      main section#single-store .store-logo img {
        max-width: 90%;
        margin: 0 auto;
        height: auto; }
    main section#single-store .opening-hours {
      margin-bottom: 3em; }
      main section#single-store .opening-hours p {
        margin: 0 0 0.2em;
        display: -webkit-box;
        display: flex; }
        main section#single-store .opening-hours p span {
          flex-basis: 150px;
          -webkit-box-flex: 0;
                  flex-grow: 0;
          text-transform: capitalize; }
    main section#visit .content-container, main section#information .content-container {
      text-align: left; }
    main section#visit .content-container {
      font-size: 0.875em;
      line-height: 1.5; }
      main section#visit .content-container .col-container .col {
        padding: 40px; }
      main section#visit .content-container .three-column-boxes img {
        display: block;
        max-width: 100px;
        margin: 0 auto;
        border-radius: 100%;
        box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.2); }
    main section#visit .getting-here-methods {
      display: -webkit-box;
      display: flex; }
      main section#visit .getting-here-methods .col {
        -webkit-box-flex: initial;
                flex: initial; }
      main section#visit .getting-here-methods .col:first-child {
        width: 60%;
        background-color: #002749;
        color: white;
        padding: 40px; }
      main section#visit .getting-here-methods .col:nth-child(2) {
        width: 40%;
        padding: 0; }
        main section#visit .getting-here-methods .col:nth-child(2) .acf-map {
          width: 100%;
          height: 300px; }
      main section#visit .getting-here-methods .method-nav ul {
        list-style: none;
        padding: 0;
        margin: 0; }
      main section#visit .getting-here-methods .method-nav li {
        display: inline-block;
        margin: 0 15px; }
      main section#visit .getting-here-methods .method-nav a {
        color: white;
        display: block;
        text-align: center; }
        main section#visit .getting-here-methods .method-nav a[data-method="car"]:before {
          background-image: url(media/icons/car-icon.svg);
          height: 24px; }
        main section#visit .getting-here-methods .method-nav a[data-method="bus"]:before {
          background-image: url(media/icons/bus-icon.svg); }
        main section#visit .getting-here-methods .method-nav a[data-method="train"]:before {
          background-image: url(media/icons/train-icon.svg); }
        main section#visit .getting-here-methods .method-nav a:before {
          display: block;
          content: '';
          width: 36px;
          height: 36px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          margin: auto;
          margin-bottom: 5px; }
      main section#visit .getting-here-methods .method-nav .method-link {
        text-decoration: none;
        font-weight: 500; }
        main section#visit .getting-here-methods .method-nav .method-link:hover, main section#visit .getting-here-methods .method-nav .method-link:active, main section#visit .getting-here-methods .method-nav .method-link.active {
          color: #f1c400; }
      main section#visit .getting-here-methods .method-descriptions .method-description {
        display: none; }
        main section#visit .getting-here-methods .method-descriptions .method-description.active {
          display: block; }
    main section#visit #dynamic-store-hours .store-input-wrapper .select2-container {
      width: 100% !important; }
    main section#visit .dynamic-hours-wrapper {
      background-color: #1D4155;
      color: #fff;
      margin: 20px 0 40px 0;
      padding: 20px;
      font-size: 13px;
      font-weight: 600;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      -webkit-transition-delay: 0.5s;
      transition-delay: 0.5s; }
      main section#visit .dynamic-hours-wrapper h3 {
        font-family: ff-tisa-sans-web-pro, sans-serif;
        font-style: normal;
        font-weight: 100;
        font-size: 3em;
        margin: 0; }
      main section#visit .dynamic-hours-wrapper .store-link {
        color: #6f79bd;
        text-decoration: none;
        margin: 10px 4px;
        display: block; }
        main section#visit .dynamic-hours-wrapper .store-link:after {
          display: inline-block;
          content: '';
          width: 20px;
          height: 20px;
          background: url(media/icons/nav-right-green.svg) no-repeat center/contain;
          margin-left: 15px;
          position: relative;
          top: 5px; }
      main section#visit .dynamic-hours-wrapper table {
        width: 100%;
        line-height: 1.5; }
      main section#visit .dynamic-hours-wrapper .opening-hours-container .current-day {
        color: #f1c400; }
    main section#visit input[type="text"],
    main section#visit input[type="email"],
    main section#visit input[type="tel"],
    main section#visit textarea {
      width: 100%;
      max-width: 100%;
      background-color: #f2f0ec;
      border: #f2f0ec; }
    main section#information .info-nav .info-link:hover,
    main section#information .info-nav .info-link:active,
    main section#information .info-nav .info-link.active {
      background-color: #7882BE; }
    main section#information .content-container .vacancies-container {
      background-color: transparent;
      justify-content: space-around;
      flex-wrap: wrap; }
      main section#information .content-container .vacancies-container.active {
        display: -webkit-box;
        display: flex; }
      main section#information .content-container .vacancies-container .vacancy-box {
        background-color: #fff;
        width: 32%;
        padding: 20px;
        height: 300px;
        overflow-y: scroll; }
        main section#information .content-container .vacancies-container .vacancy-box h2 {
          font-size: 1em;
          text-transform: none;
          letter-spacing: normal; }
  main #next-page {
    display: none; }

#parking {
  background: url(media/backgrounds/parking-background.png) center bottom/100% no-repeat #eaf1f9; }
  #parking .title-container h2 {
    color: #6f79bd;
    display: block;
    position: relative;
    width: 100%;
    font-family: 'brother-1816', sans-serif;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center; }
  #parking .content-container {
    padding: 0 50px 50px;
    text-align: center;
    color: #6f79bd;
    font-size: 0.875em;
    line-height: 1.5; }
    #parking .content-container a.postcode {
      max-width: 250px;
      background-color: #6f79bd; }
      #parking .content-container a.postcode span {
        display: block;
        position: relative;
        font-weight: 600;
        color: #f1c400; }


        #whats-on-page .filter-nav {
            display: none;
        }

.filter-nav {

  text-align: center;
  position: relative; }
  .filter-nav ul {
    padding: 0; }
  .filter-nav li {
    display: inline-block;
    margin-left: -4.5px;
    box-shadow: 6px 6px 6px -5px rgba(0, 0, 0, 0.08); }
    .filter-nav li:first-child a {
      border-radius: 5px 0 0 5px; }
    .filter-nav li:last-child a {
      border-radius: 0 5px 5px 0; }
    .filter-nav li a {
      display: block;
      background-color: #fff;
      color: #3c3c3c;
      font-weight: 700;
      text-decoration: none;
      padding: 15px 30px; }
      .filter-nav li a:active, .filter-nav li a:hover, .filter-nav li a.active {
        background-color: #6f79bd;
        color: #fff; }

.content-container {
  padding: 50px 40px 50px 40px; }
  .content-container .col-container {
    color: #002749;
    display: none; }
    .content-container .col-container.active {
      display: block; }
    .content-container .col-container .full-col {
      padding: 10px 40px; }
    .content-container .col-container .col {
      padding: 20px 40px;
      vertical-align: top; }

@media only screen and (min-width: 768px) {
  main section#home .hero-img-container {
    min-height: 50vh; }
  main section#stores-page .store-filter-container .filter-list {
    width: 250px; }
    main section#stores-page .store-filter-container .filter-list ul li {
      margin: 0 0 2em 0; }
  main section#stores-page .content-container .content .gutter-sizer {
    width: 25px; }
  main section#stores-page .content-container .content .grid-sizer {
    width: calc(33% - 16.66667px);
    width: -ms-calc(33% - 16.66667px); }
  main section#stores-page .content-container .content article {
    width: calc(33% - 16.66667px);
    width: -ms-calc(33% - 16.66667px);
    margin-bottom: 25px; }
    main section#stores-page .content-container .content article .container {
      padding: 100% 0 0 0; }
      main section#stores-page .content-container .content article .container .back .content {
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        padding: 0;
        height: auto !important; }
  .three-column-boxes .box {
    width: 48%; }
  .single-whats_on .the-content-container,
  .single-whats_on .image-container {
    width: 50%;
    padding: 50px; }
  .single-whats_on .the-content-container {
    float: left; }
  .single-whats_on .image-container {
    float: right; }
  .post-type-archive-whats_on .content-area,
  .post-type-archive-whats_on .image-area {
    width: 48%; }
  .post-type-archive-whats_on .content-area {
    float: left; }
  .post-type-archive-whats_on .image-area {
    float: right; }
  .post-type-archive-whats_on .whats-on-area.offers .flex-item,
  .post-type-archive-whats_on .whats-on-area.news .flex-item {
    width: 47%; } }

    nav .main-menu-primary ul li a#page-id-580,
    nav .main-menu-primary ul li a#page-id-580 {
        display: block;
    }

@media only screen and (min-width: 992px) {
  @-webkit-keyframes exitLarge {
    0% {
      width: 8px;
      height: 0; }
    50% {
      width: 8px;
      height: 100%; }
    100% {
      width: 100%;
      height: 100%; } }
  @keyframes exitLarge {
    0% {
      width: 8px;
      height: 0; }
    50% {
      width: 8px;
      height: 100%; }
    100% {
      width: 100%;
      height: 100%; } }
  @-webkit-keyframes loadedLarge {
    from {
      width: 100%;
      height: 100%; }
    to {
      width: 0;
      height: 100%; } }
  @keyframes loadedLarge {
    from {
      width: 100%;
      height: 100%; }
    to {
      width: 0;
      height: 100%; } }
  .three-column-boxes {
    flex-wrap: wrap; }
    .three-column-boxes .box {
      width: 48%;
      text-align: center;
      margin: 1em 0; }
    .three-column-boxes h2 {
      font-weight: 500;
      margin: 1.3em 0; }
  body.home header {
    height: 90px; }
  header a#site-logo {
    background: url(media/stjohns/st-johns-logo-text.svg) center/contain no-repeat;
    width: 265px;
    height: 40px;
    padding-top: 80px; }
  header .opening-times {
    text-align: right;
    color: #3c3c3c;
    font-style: normal;
    padding: 0;
    font-weight: 500;
    display: block; }
  header .hamburger {
    display: none; }
  body:not(.home) .postcode {
    display: none; }
  body:not(.home) footer {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    padding: 0 95px 0 190px;
    clear: both; }
  body.page-id-14 footer {
    display: none; }
  body.page-stores-page main #next-page a,
  body.page-stores-page main #next-page p {
    color: #002749; }
  body.page-stores-page main #next-page:hover {
    background: #6f79bd; }
    body.page-stores-page main #next-page:hover a, body.page-stores-page main #next-page:hover p {
      color: #fff; }
  body.single-stores header {
    padding: 0; }
  body.page-visit main #next-page a,
  body.page-visit main #next-page p {
    color: #ffffff; }
  body.page-visit main #next-page:hover {
    background: #f1c400; }
    body.page-visit main #next-page:hover a {
      background: url(media/icons/nav-arrow.svg) right 35px center/13px 24px no-repeat transparent; }
  body.page-information main #next-page a,
  body.page-information main #next-page p {
    color: #ffffff; }
  body.page-information main #next-page:hover {
    background: #ffffff; }
    body.page-information main #next-page:hover a,
    body.page-information main #next-page:hover p {
      color: #3c3c3c; }
  body.page-information .two-column-flex > div {
    width: 48%; }
  header {
    height: 95px;
    padding-left: 95px; }
    header a#site-logo {
      width: 265px;
      height: 40px;
      margin: 7px auto; }
    header .opening-times {
      position: absolute;
      right: 20px;
      top: 16px;
      width: auto; }
    header .postcode {
      display: block;
      position: absolute;
      width: auto;
      top: 0;
      right: 95px;
      padding: 23px 0;
      font-size: 0.8125em;
      line-height: 1em;
      color: #f1c400;
      font-family: ff-tisa-sans-web-pro, sans-serif;
      font-style: normal;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      text-align: center; }
  nav .main-menu-primary {
    top: 0;
    right: auto;
    width: 95px;
    height: 100%;
    background: #fff;
    -webkit-transition: .5s all ease;
    transition: .5s all ease;
    display: block;
    opacity: 1; }
    nav .main-menu-primary:before {
      display: block;
      content: '';
      width: 50px;
      height: 50px;
      background: url(media/stjohns/st-johns-brand-graphic.svg) no-repeat center;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 0;
      opacity: 1;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
    nav .main-menu-primary:hover:after {
      display: block;
      content: '';
      width: 40px;
      height: 40px;
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: url(media/stjohns/st-johns-brand-graphic-navy.svg) no-repeat center; }
    nav .main-menu-primary ul {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      padding: 95px 0 95px 0; }
      nav .main-menu-primary ul:before {
        content: '';
        display: block;
        width: 30px;
        height: 24px;
        background: url(media/stjohns/burger-menu-desktop.svg) no-repeat center;
        position: absolute;
        top: 35px;
        left: 30px;
        opacity: 1;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; }
      nav .main-menu-primary ul li {
        display: block;
        position: relative;
        width: 100%; }
        nav .main-menu-primary ul li a {
          width: 100%;
          height: 100%;
          font-size: 1em;
          background: right 35px center/13px 24px no-repeat transparent;
          color: #fff;
          -webkit-transition: .5s all ease;
          transition: .5s all ease;
          opacity: 0;
          font-weight: 400;
          padding: 5% 0; }
        nav .main-menu-primary ul li.current-menu-item a {
          border-bottom: 0;
          border-left: 6px solid #73a2de;
          background-color: rgba(0, 0, 0, 0.1); }
        nav .main-menu-primary ul li a.active {
          background: right 35px center/13px 24px no-repeat transparent; }

          nav .main-menu-primary ul li a#page-id-578,
          nav .main-menu-primary ul li a#page-id-580 {
              display: none;
          }

    nav .main-menu-primary:hover, nav .main-menu-primary:active {
      width: 200px;
      -webkit-transition: .5s all ease;
      transition: .5s all ease;
      background: #8bb8e8; }
      nav .main-menu-primary:hover:before, nav .main-menu-primary:active:before {
        opacity: 0; }
      nav .main-menu-primary:hover label, nav .main-menu-primary:active label {
        display: block;
        position: absolute;
        top: 39.5px;
        right: 0;
        left: 0;
        text-align: center;
        width: 100%;
        font-size: 1em;
        line-height: 1em;
        margin-top: 0;
        color: #fff;
        font-weight: 800;
        font-style: italic; }
      nav .main-menu-primary:hover ul:before, nav .main-menu-primary:active ul:before {
        opacity: 0; }
      nav .main-menu-primary:hover ul li a, nav .main-menu-primary:active ul li a {
        opacity: 1; }
        nav .main-menu-primary:hover ul li a:hover, nav .main-menu-primary:active ul li a:hover {
          background: url(media/icons/nav-right-blue.svg) right 35px center/13px 24px no-repeat rgba(0, 0, 0, 0.1);
          -webkit-transition: .5s all ease;
          transition: .5s all ease;
          border-left: 6px solid #418fde;
          box-sizing: border-box; }
  nav #loading-bar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    height: 100%;
    width: 8px;
    margin: 0; }
    nav #loading-bar.loaded {
      width: 100%;
      height: 100%;
      -webkit-animation: loadedLarge 2s ease 1 forwards;
              animation: loadedLarge 2s ease 1 forwards; }
    nav #loading-bar.exit {
      width: 100%;
      height: 100%;
      -webkit-animation: exitLarge 1s ease 1 forwards;
              animation: exitLarge 1s ease 1 forwards; }
  nav #next-page-loading-bar {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 8px;
    margin: 0;
    z-index: 11;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards; }
    nav #next-page-loading-bar.exit {
      -webkit-animation: 1s exitLarge;
              animation: 1s exitLarge;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    nav #next-page-loading-bar.loaded {
      width: 100%;
      height: 100%;
      -webkit-animation: 2s loadedLarge;
              animation: 2s loadedLarge;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards; }
    nav #next-page-loading-bar.dark-blue {
      background: #6f79bd; }
    nav #next-page-loading-bar.light-blue {
      background: #eaf1f9; }
    nav #next-page-loading-bar.pink {
      background: #6f79bd; }
    nav #next-page-loading-bar.mustard {
      background: #f1c400; }
    nav #next-page-loading-bar.white {
      background: #fff; }
  footer {
    display: block;
    position: fixed;
    bottom: -44px;
    left: 95px;
    right: 95px;
    width: calc(100% - 190px);
    width: -ms-calc(100% - 190px);
    height: 95px;
    width: calc(100% -95px); }

    footer .footer-menu-container {
        text-align: center;
    }
    footer .footer-menu-container ul {
        padding: 0;
        margin: 0;
    }
    footer .footer-menu-container li {
        display: inline-block;
        margin: 5px;
    }
    footer .footer-menu-container li a {
        display: block;
        font-weight: 300;
        font-style: italic;
        font-size: 12px;
    }
    footer p {
      display: block;
      position: relative;
      margin: 0;
      padding: 0;
      font-size: 1em;
      color: #003a70;
      text-align: center;
      font-style: italic; }
  body.home main {
    min-height: 100vh;
    overflow: hidden; }
  main section {
    height: auto;
    min-height: calc(100vh - 190px);
    min-height: -ms-calc(100vh - 190px); }
    main section#stores-page, main section#single-store {
      padding: 50px 95px 0 95px; }
    main section#home {
      position: relative;
      padding-top: 0;
      padding-bottom: 0;
      display: -webkit-box;
      display: flex; }
      main section#home > * {
        -webkit-box-flex: 0;
                flex: 0 0 50%; }
      main section#home .hero-img-container {
        position: relative;
        background-position: center;
        min-height: 40vh;
        height: auto; }
        main section#home .hero-img-container:before {
          height: 100%;
          width: 138px;
          top: inherit;
          background: url(media/stjohns/homepage-banner-curve.svg) no-repeat center;
          background-size: 460px 990px; }
        main section#home .hero-img-container:after {
          width: 230px;
          height: 230px;
          right: -50px; }
      main section#home .hero-img {
        visibility: hidden; }
      main section#home .homepage-banner-link {
        font-size: 1.5em;
        margin-top: 30px; }
        main section#home .homepage-banner-link:after {
          width: 15px;
          height: 25px;
          top: 5px; }
      main section#home .content-container {
        position: static;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-pack: center;
                justify-content: center;
        height: auto; }
      main section#home .logo-home {
        max-width: 240px;
        top: auto;
        bottom: 0;
        -webkit-transform: translate3d(-50%, 50%, 0);
                transform: translate3d(-50%, 50%, 0);
        cursor: pointer; }
      main section#home .content {
        padding-top: 90px;
        max-width: inherit; }
        main section#home .content h1 span:nth-child(2) {
          font-size: 4.25rem; }
      main section#home #homepage-about {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        z-index: 5; }
        main section#home #homepage-about.active {
          display: block;
          opacity: 1; }
          main section#home #homepage-about.active .homepage-about-wrapper {
            -webkit-transform: translate(-50%, -50%) scale(1);
                    transform: translate(-50%, -50%) scale(1); }
        main section#home #homepage-about h2 {
          font-family: ff-tisa-sans-web-pro, sans-serif;
          font-style: normal;
          font-weight: 100;
          color: #6f79bd;
          font-size: 3em;
          margin: 0; }
        main section#home #homepage-about p {
          margin: 0; }
        main section#home #homepage-about .close-window {
          display: block;
          font-size: 0;
          width: 20px;
          height: 20px;
          margin: auto;
          background: url(media/icons/cross.svg) no-repeat center;
          position: absolute;
          bottom: 30px;
          left: 0;
          right: 0; }
        main section#home #homepage-about .homepage-about-wrapper {
          width: 400px;
          height: 400px;
          margin: 0 auto;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) scale(0.9);
                  transform: translate(-50%, -50%) scale(0.9);
          background-color: #fff;
          border-radius: 100%;
          padding: 40px;
          text-align: center;
          display: -webkit-box;
          display: flex;
          -webkit-box-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
                  align-items: center;
          background: url(media/logos/sailmakers-graphic-grey.svg) no-repeat center #fff;
          -webkit-transition: all 0.3s;
          transition: all 0.3s;
          background-position: -50% 50%; }
      main section#home .content {
        padding-top: 0; }
        main section#home .content h1 {
          font-size: 3.8125em;
          position: relative; }
    main section#stores-page {
      position: static;
      padding: 50px 0 0 95px; }
      main section#stores-page .store-filter-container {
        position: absolute;
        left: 95px;
        top: -95px;
        bottom: 0;
        width: auto; }
        main section#stores-page .store-filter-container label.filter-name {
          display: block;
          position: relative;
          width: 95px;
          height: auto;
          padding: 20px 0;
          font-size: 1em;
          line-height: 95px;
          margin: 234px 0 0 0;
          display: none; }
        main section#stores-page .store-filter-container .filter-list {
          width: 250px;
          height: 100%;
          padding: 10px 30px;
          top: 0px; }
          main section#stores-page .store-filter-container .filter-list .store-guide-link, main section#stores-page .store-filter-container .filter-list:after {
            display: block; }
          main section#stores-page .store-filter-container .filter-list button {
            top: 180px;
            outline: none;
            cursor: pointer; }
          main section#stores-page .store-filter-container .filter-list ul li {
            margin: 0 0 2em 0; }
            main section#stores-page .store-filter-container .filter-list ul li:hover {
              -webkit-transition: .5s all;
              transition: .5s all;
              color: #ffffff;
              cursor: pointer; }
      main section#stores-page .content-container {
        padding: 50px 95px 20px 95px; }
        main section#stores-page .content-container .content .gutter-sizer {
          width: 25px; }
        main section#stores-page .content-container .content .grid-sizer {
          width: calc(33% - 16.66667px);
          width: -ms-calc(33% - 16.66667px); }
        main section#stores-page .content-container .content article {
          width: calc(33% - 16.66667px);
          width: -ms-calc(33% - 16.66667px);
          margin-bottom: 25px; }
          main section#stores-page .content-container .content article .container {
            padding: 100% 0 0 0; }
    main section#single-store .content-container {
      width: calc(100% - 95px);
      padding: 60px 30px 100px;
      margin: 3em 0 3em 95px;
      -webkit-box-pack: justify;
              justify-content: space-between;
      display: -webkit-box;
      display: flex; }
      main section#single-store .content-container > div {
        -webkit-box-flex: 0;
                flex: 0 0 48%; }
      main section#single-store .content-container .store-logo img {
        width: 200px;
        height: auto;
        max-width: 100%; }
    main section#parking {
      padding: 0; }
      main section#parking .content-container {
        max-width: 465px;
        margin: auto; }
      main section#parking .btn.postcode {
        margin-left: auto;
        margin-right: auto; }
    main section#visit .facilities-container {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
              flex-flow: row nowrap;
      flex-direction: row;
      flex-wrap: wrap;
      -ms-flex-wrap: wrap; }
    main section#visit .box {
      -webkit-box-flex: 0;
              flex: 0 1 auto;
      width: 33.33333%;
      padding: 0 35px; }
    main section#information {
      padding: 0; }
      main section#information .content-container .box {
        width: 50%;
        text-align: left; }
        main section#information .content-container .box:first-child {
          padding: 0 50px; }
          main section#information .content-container .box:first-child a.telephone {
            margin: 0; }
        main section#information .content-container .box .nf-field-element input {
          max-width: 300px; }
          main section#information .content-container .box .nf-field-element input[type=button] {
            margin: 0; }
    main section .title-container h1 {
      font-size: 3em;
      line-height: 1.2; }
    main section .title-container p {
      font-size: 1.2em;
      line-height: 1.2;
      margin: 30px 0 0 0; }
  main #next-page {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 95px;
    height: 100%;
    z-index: 5;
    -webkit-transition: .5s all ease;
    transition: .5s all ease;
    background: transparent; }
    main #next-page a {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      color: #3c3c3c;
      font-size: 1em;
      line-height: 95px;
      font-family: ff-tisa-sans-web-pro, sans-serif;
      font-style: normal;
      font-weight: 600;
      -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-lr;
              writing-mode: vertical-lr;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 0.3em;
      background: transparent;
      -webkit-transition: .5s all ease;
      transition: .5s all ease;
      background: right 35px center/13px 24px no-repeat transparent; }
    main #next-page p {
      display: none;
      position: absolute;
      bottom: 95px;
      right: 0;
      left: 0;
      width: 100%;
      padding: 40px;
      font-size: 0.9em;
      line-height: 1.2;
      letter-spacing: 0.025em;
      color: #ffffff;
      text-align: center;
      margin: 0;
      width: 200px; }
    main #next-page:hover {
      width: 200px;
      -webkit-transition: .5s all ease;
      transition: .5s all ease;
      background: #002749; }
      main #next-page:hover a {
        color: #ffffff;
        background: url(media/icons/nav-arrow-mustard.svg) right 35px center/13px 24px no-repeat transparent;
        line-height: 200px; }
      main #next-page:hover p {
        display: block; }
  #parking .title-container h2 {
    font-size: 3.1875em;
    line-height: 1.2; }
  .post-type-archive-whats_on .whats-on-area.offers .flex-item,
  .post-type-archive-whats_on .whats-on-area.news .flex-item {
    width: 47%; }
  .post-type-archive-whats_on .whats-on-area.offers .flex-item {
    width: 30%; }
  .title-wrapper {
    padding-left: 95px; }
  main section .content-container {
    padding: 50px 95px 50px 190px; }
    main section .content-container .col-container .col {
      width: 49%;
      display: inline-block; }
  .filter-nav {
    padding-left: 95px; } }

@media only screen and (min-width: 1200px) {
  main section#stores-page .content-container .content .grid-sizer,
  main section#stores-page .content-container .content article {
    width: calc(25% - 18.75px);
    width: -ms-calc(25% - 18.75px); } }

@media only screen and (max-height: 600px) {
  nav .main-menu-primary:hover:after {
    display: none; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  #loading-bar,
  #next-page-loading-bar {
    display: none !important; } }

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  -webkit-transition-property: opacity, -webkit-filter;
  transition-property: opacity, -webkit-filter;
  transition-property: opacity, filter;
  transition-property: opacity, filter, -webkit-filter;
  -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }

.hamburger:hover {
  opacity: 0.7; }

.hamburger.is-active:hover {
  opacity: 0.7; }

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #000;
  border-radius: 4px;
  position: absolute;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease; }

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block; }

.hamburger-inner::before {
  top: -10px; }

.hamburger-inner::after {
  bottom: -10px; }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2px;
  -webkit-transition: background-color 0s 0.13s linear;
  transition: background-color 0s 0.13s linear; }

.hamburger--spring .hamburger-inner::before {
  top: 10px;
  -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring .hamburger-inner::after {
  top: 20px;
  -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  -webkit-transition-delay: 0.22s;
          transition-delay: 0.22s;
  background-color: transparent !important; }

.hamburger--spring.is-active .hamburger-inner::before {
  top: 0;
  -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate3d(0, 10px, 0) rotate(45deg);
          transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--spring.is-active .hamburger-inner::after {
  top: 0;
  -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: translate3d(0, 10px, 0) rotate(-45deg);
          transform: translate3d(0, 10px, 0) rotate(-45deg); }


/* To add to SCSS */

.page-id-499 .box img{
    max-width: 100%;
}