@media (max-width: 1300px) {

  #thePeterheadTrail {
    background-position: left 80px top 40px, right bottom 80px, right 100px top 140px;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-image: url(/img/bird.svg), url(/img/compass.svg), url(/img/lifebuoy.svg)
  }

  .gallerySlider__block__caption {
    font-size: 0.875rem;
  }

  .gallery__item__caption {
    font-size: 0.875rem;
  }

}

@media (max-width: 1200px) {

  .blades__nav ul li {
    margin-right: 8px;
  }

  header nav.header__nav__primary ul li {
    font-size: 1rem;
  }

}

@media (max-width: 1100px) {

  #panels h1 {
    font-size: 2rem;
  }

  .panel__text h2 {

  }

  .panel__text h3 {
    font-size: 1.5rem;
  }

  #thePeterheadTrail h2 {
    font-size: 2rem;
  }

  .thePeterheadTrail__column:last-of-type {
    margin-bottom: 0;
  }

  .gallerySlider__block__caption {
    color: #181818;
  }

  #thePeterheadTrail {
    background-position: left 80px top 40px, right 100px top 140px;
    background-repeat: no-repeat, no-repeat;
    background-image: url(/img/bird.svg), url(/img/lifebuoy.svg)
  }

  .controlButton svg {
    fill: #4192c9;
  }

  #gallery .gallery .controlButton svg {
    fill: #fff;
  }

  #gallery .gallery .gallerySlider__block__caption {
    color: #fff;
  }

  .graphicsWrapper {
    background-position: left top 40px, left 40px bottom, right 40px top, right bottom 180px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-image: url(/img/bird.svg), url(/img/lighthouse.svg), url(/img/compass.svg), url(/img/lifebuoy.svg);
  }

  header nav.header__nav__primary ul li {
    margin-right: 2rem;
  }

  #blades h2 {
    font-size: 2rem;
  }

}

@media (max-width: 1024px) {

  .container {
    padding: 0 20px;
  }

  header nav.header__nav__secondary {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
  }

  header nav.header__nav__secondary ul {
    margin: 0 0 20px;
  }

  header nav.header__nav__secondary ul li {
    text-transform: none;
  }

  header nav.header__nav__primary ul li {
    font-size: 0.875rem;
    margin-right: 1.25rem;
  }

  .header__branding img {
    width: 80px;
  }

  .header {
    padding: 20px 0;
  }

  header nav.header__nav__secondary {
    margin-bottom: 16px;
  }

  .banner {
    height: 160px;
  }

  .banner h1, .banner h2 {
    font-size: 1.75rem;
  }

  .breadcrumb {
    margin-bottom: 40px;
  }

  .post__heading {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }

  .post__heading h3 {
    font-size: 1.25rem;
  }

  .post__heading h1 {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }

  #latest {
    padding: 40px 0;
  }

  .latest__heading h2 {
    font-size: 2rem;
  }

  .grid {
    grid-template-columns: repeat(3,1fr);
  }

  footer {
    padding: 40px 0;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 40px;
  }

  .footer__column {
    margin-bottom: 28px;
  }

  .footer__column:last-of-type {
    margin-bottom: 0;
  }

  .bottom {
    padding-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .bottom__copyright,
  .bottom__legal {
    width: 100%;
  }

  .bottom__copyright {
    margin-bottom: 20px;
  }

  .bottom__legal {
    justify-content: flex-start;
  }

  .panel__text h2 {
    font-size: 1.625rem;
    line-height: 1.375;
  }

  .panel__text {
    padding: 20px;
  }

  .panel--feature .panel__text {
    padding: 28px;
  }

  .panel__text h3 {
    font-size: 1.25rem;
  }

  #panels h1,
  #blades h2 {
    font-size: 1.5rem;
    margin: 40px 0 64px;
  }

  a.more span,
  .latest__heading a span {
    font-size: 0.875rem;
  }

  #thePeterheadTrail {
    background-position: left 20px top 20px, right 20px top 20px;
    background-size: 120px auto, 100px auto;
  }

  .gallerySlider__block__caption {
    line-height: 1.5;
  }

  .gallery__item__caption {
    line-height: 1.5;
  }

  #followUs .followUs {
    height: 160px;
    justify-content: center;
  }

  .whatsOn__heading h2 {
    font-size: 2rem;
  }

  #whatsOn {
    padding: 40px 0;
  }

  .body h1, .body h2 {
    font-size: 1.75rem;
    line-height: 1.375;
  }

  .blocks__block .text {
    margin-bottom: 40px;
    padding: 0 80px;
  }

  .textColumns {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .textColumns__column:first-of-type,
  .textColumns__column:last-of-type {
    width: 100%;
  }

  #thePeterheadTrailMap .theMap {
    margin-bottom: 40px;
  }

  .graphicsWrapper {
    background-position: left top 20px, left 20px bottom, right 20px top, right bottom 20px;
    background-size: 80px auto, 80px auto, 80px auto;
  }

  .blades__nav {
    display: none;
  }

  .blades__text__control a {
    top: auto;
    bottom: 24px;
    margin-top: 0;
  }

  .blades__text__control a .cls-1 {
    fill: #4192c9;
  }

  .blades__text__control a .cls-2 {
    fill: #fff;
  }

  .blades__text__control--prev a {
    left: 24px;
  }

  .blades__text__control--next a {
    right: 24px;
  }

  .blades__text h5 {
    font-size: 1rem;
    line-height: 1.5;
  }

  #blades h2 {
    font-size: 1.5rem;
    margin: 40px 0 64px;
  }

  .blades__text__control {
    padding: 24px;
  }

  .textColumns {
    margin-bottom: 40px;
  }

  hr.separator {
    margin-bottom: 40px;
  }

}

@media (max-width: 767px) {

  .container {
    padding: 0 16px;
  }

  .footerEmail span:first-of-type {
    display: none;
  }

  .footerEmail span:last-of-type {
    display: block;
  }

  .footer__column:last-of-type {
    min-width: 0;
  }

  #followUs .followUs {
    height: auto;
    padding: 20px 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .grid {
    grid-template-columns: repeat(1,1fr);
  }

  .header {
    padding: 16px 0;
  }

  #panels {
    margin-top: 32px;
  }

  #panels .panels {
    margin-top: -32px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .panels__column:first-of-type {
    width: 100%;
    margin-bottom: 12px;
  }

  .panels__column:last-of-type {
    width: 100%;
  }

  .panel--feature .panel__text {
    padding: 16px 16px 52px;
  }

  .panel__text h2 {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .panel__text h3 {
    font-size: 1.125rem;
  }

  #panels h1,
  #blades h2 {
    margin: 16px 0 52px;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  #thePeterheadTrail {
    background-position: left 16px top 16px, right 16px top 16px;
    background-size: 80px auto, 64px auto;
    padding: 92px 0 16px;
  }

  #thePeterheadTrail h2 {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  .thePeterheadTrail {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
  }

  .thePeterheadTrail__column:first-of-type {
    width: 100%;
    margin-bottom: 24px;
  }

  .thePeterheadTrail__column:last-of-type {
    width: 100%;
  }

  .body h3 {
    font-size: 1.25rem;
  }

  .thePeterheadTrail__column a.more {
    justify-content: center;
  }

  .gallerySlider__block__caption {
    text-align: left;
  }

  .tns-ovh {
    padding-bottom: 24px;
  }

  .followUs h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
  }

  .followUs h3::after {
    margin: 0 0 0 24px;
  }

  .followUs .social a svg {
    width: 24px;
    height: 24px;
  }

  .whatsOn__heading {
    width: 100%;
  }

  #whatsOn {
    padding: 16px 0;
  }

  .whatsOn__heading h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  #latest {
    padding: 16px 0;
  }

  .latest__heading h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
  }

  .latest__heading {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 24px;
  }

  .grid__item__text {
    padding: 16px 16px 52px;
    min-height: 0;
  }

  footer {
    padding: 16px 0;
  }

  .footer {
    margin-bottom: 24px;
  }

  .bottom {
    padding-top: 16px;
  }

  .bottom__copyright {
    line-height: 1.75;
  }

  .bottom__legal ul {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .bottom__legal ul li {
    margin: 0 0 16px;
  }

  .bottom__legal ul li:last-of-type {
    margin-bottom: 0;
  }

  .openNav,
  .closeNav {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .closeNav {
    display: none;
  }

  .closeNav {
    z-index: 9020;
  }

  .header {
    display: block;
  }

  .showMobile {
    display: block;
  }

  .header__nav {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.25s linear;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4192c9;
    padding: 16px;
    z-index: 9000;
    width: 100%;
  }

  .header__nav.isOpen {
    visibility: visible;
    opacity: 1;
  }

  header nav.header__nav__secondary {
    align-items: flex-start;
    margin-bottom: 0;
  }

  header nav.header__nav__secondary ul {
    margin-bottom: 12px;
  }

  header nav.header__nav__primary ul li,
  header nav.header__nav__secondary ul li {
    margin: 0 0 12px;
    font-size: 1.125rem;
  }

  header nav.header__nav__primary ul li a {
    padding: 0;
    color: #fff;
  }

  header nav.header__nav__primary ul li:first-of-type a {
    padding: 0;
    background: none;
  }

  header nav.header__nav__primary ul li a:hover {
    color: #fff;
    text-decoration: none;
  }

  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  header nav ul li a {
    color: #fff;
  }

  header .social {
    justify-content: flex-start;
  }

  header .social a svg {
    fill: #fff;
  }

  .banner {
    height: auto;
    padding: 24px 0;
  }

  .banner h1, .banner h2 {
    font-size: 1.125rem;
  }

  .graphicsWrapper {
    background-position: left 16px top 16px, left 16px bottom, right 16px top;
    background-size: 64px auto, 64px auto, 64px auto;
  }

  .breadcrumb {
    margin-bottom: 16px;
  }

  .graphicsWrapper {
    padding: 84px 0 104px;
  }

  .blocks__block .text {
    padding: 0;
    margin-bottom: 0;
  }

  .body p {
    font-size: 1rem;
  }

  .body h4 {
    font-size: 1.125rem;
  }

  .startTheTrail {
    padding-bottom: 0;
  }

  #thePeterheadTrailMap {
    padding-bottom: 16px;
  }

  #thePeterheadTrailMap .theMap {
    margin: 16px 0 24px;
  }

  #thePeterheadTrailMap .followUs {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .blades__text h4, .body.heading h4 {
    width: auto;
    font-size: 0.75rem;
    margin-top: -12px;
    padding: 6px 12px;
  }

  #blog,
  #whatToDo,
  #whereToStay {
    padding-bottom: 16px;
  }

  .grid--whatToDo .grid__item__text h3 {
    min-height: 0;
  }

  .post__heading h3 {
    font-size: 0.875rem;
  }

  .breadcrumb span {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
  }

  .breadcrumb span:after {
    content: 'Here';
    text-indent: none;
    white-space: normal;
    overflow: auto;
    font-size: 0.75rem;
  }

  .post__heading h1 {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .post__main {
    margin-bottom: 24px;
  }

  .post__heading {
    margin-bottom: 24px;
    padding-bottom: 24px;
  }

  .post__heading h3 {
    margin-bottom: 20px;
  }

  .textColumns {
    margin-bottom: 24px;
  }

  .body ul li, .body ol li {
    font-size: 1rem;
  }

  .body ul {
    margin: 0 0 24px 32px;
  }

  .logos {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 16px;
  }

  #gallery {
    margin-top: 0;
    padding: 24px 0;
  }

  #gallery .gallery {
    margin-top: 0;
  }

  .blades__text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .blades__text__control {
    padding: 16px;
    width: 100%;
    height: auto;
  }

  .blades__text__control a {
    position: static;
    bottom: auto;
    margin-bottom: 12px;
  }

  .blades__text__main {
    width: 100%;
    padding: 16px;
  }

  .body h1, .body h2 {
    font-size: 1.5rem;
  }

  .blades__text__control a svg {
    width: 44px;
    height: 44px;
  }

  .columns__block {
    flex-direction: column;
  }

  .columns__block__column {
    width: 100%;
  }

  .blades__text__main .body h1 {
    font-size: 1.25rem;
  }

  .blades__text h5 {
    margin-bottom: 0;
  }

}