.boxGrid.boxGridTwo .wrap .row .col:after, .boxGrid .wrap .row:after, .featuredPanel .wrap .cols:after, .serviceTimes .wrap .row:after, .filter form:after, .contactPanel .wrap .cols:after, footer .wrap .cols:after, .twoCols .wrap .row:after, .introCols .wrap .row:after {
  content: '';
  display: block;
  clear: both; }

.serviceTimes .wrap .row .col, .contactPanel .wrap .cols .col, .twoCols .wrap .row .col .content, .introCols .wrap .row .col .content {
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.link {
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: all;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 300ms;
  -moz-transition-property: all;
  -o-transition-timing-function: linear;
  -o-transition-duration: 300ms;
  -o-transition-property: all;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 300ms;
  -ms-transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  transition-property: all; }

body.heroPage {
  padding-top: 0; }
body.home .contactPanel {
  margin-bottom: 0; }
body.showNav header[role="banner"] .wrap .mainNav {
  left: auto;
  right: 0; }

.desktop {
  display: block; }

.mobile {
  display: none; }

header[role="banner"] {
  overflow: visible;
  height: 90px;
  background-color: transparent;
  position: absolute;
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: all;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 300ms;
  -moz-transition-property: all;
  -o-transition-timing-function: linear;
  -o-transition-duration: 300ms;
  -o-transition-property: all;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 300ms;
  -ms-transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  transition-property: all; }
  header[role="banner"].fixHeader {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: var(--color-4); }
  header[role="banner"] .wrap {
    margin: 0 40px; }
    header[role="banner"] .wrap .logo {
      width: 96px;
      left: 0;
      right: auto;
      margin-left: 40px; }
    header[role="banner"] .wrap .navButton {
      width: 25px;
      position: absolute;
      top: 50%;
      left: auto;
      right: 20px;
      margin-top: -10px; }
      header[role="banner"] .wrap .navButton span {
        height: 3px;
        display: block;
        background-color: var(--color-5);
        width: 100%;
        pointer-events: none; }
        header[role="banner"] .wrap .navButton span + span {
          margin-top: 6px; }
        header[role="banner"] .wrap .navButton span:nth-of-type(2) {
          width: 70%;
          margin-left: auto; }
    header[role="banner"] .wrap .mainNav {
      width: 50%;
      left: auto;
      right: -50%;
      /*
      			position: absolute;
      			top: 50%;
      			height: auto;
      			right: 40px;
      			left: auto;
      			width: auto;
      			background-color: transparent;
      			overflow: visible;
      			margin-top: -8px;
      		
      			ul {
      				margin:0;
      				margin-right: 140px;
      			
      				li {
      					display: inline-block;
      					line-height: 1;
      					font-size:1rem;
      					position: relative;
      					
      					& + li {
      						margin-left: 35px;
      					}
      					
      					&.subNav {
      						
      						&:before {
      							content: '';
      							background-color: transparent;
      							width: 100%;
      							height: 100px;
      							display: block;
      							position: absolute;
      							top: 0;
      							left: 0;
      						}
      						
      						&:hover {
      						
      							ul {
      								opacity: 1;
      								pointer-events: all;
      							}
      						}
      					}
      					
      					ul {
      						display: block;
      						position: absolute;
      						top: 60px;
      						left: 50%;
      						padding: 20px;
      						opacity: 0;
      						@include transition(300ms, opacity);
      						background-color: white;
      						width: 200px;
      						@extend %box-sizing;
      						border-radius: 5px;
      						margin-left: -100px;
      						pointer-events: none;
      						
      						&:before {
      							content: '';
      							background-position: -20px -140px;
      							width: 41px;
      							height: 21px;
      							display: block;
      							position: absolute;
      							top: -20px;
      							left: 0;
      							right: 0;
      							margin: 0 auto;
      							@extend %sprite;
      						}
      						
      						li {
      							text-align: center;
      							line-height: 1.3;
      							display: block;
      							color: var(--color4);
      							font-weight: 500;
      							padding-bottom: 15px;
      							
      							& + li {
      								margin-left: 0;
      							}
      							
      							&:last-of-type {
      								
      								padding-bottom: 0;
      								
      							}
      							
      							&:nth-of-type(4){
      								margin-left: 0;
      							}
      							
      							&:hover {
      								color: var(--color2); 
      							}
      						}
      						
      					}
      				}
      			}
      */ }
      header[role="banner"] .wrap .mainNav button {
        margin: 33px 20px 0 auto; }
      header[role="banner"] .wrap .mainNav ul {
        margin: 50px 40px 0 40px; }
        header[role="banner"] .wrap .mainNav ul li {
          font-size: 2rem;
          line-height: 2; }
          header[role="banner"] .wrap .mainNav ul li ul li {
            font-size: 1.5rem;
            line-height: 1.8; }
      header[role="banner"] .wrap .mainNav .social {
        position: fixed;
        right: 78px;
        top: 37px; }
        header[role="banner"] .wrap .mainNav .social a {
          background-position: -20px -60px;
          width: 17px;
          height: 14px;
          vertical-align: middle; }
          header[role="banner"] .wrap .mainNav .social a + a {
            margin-left: 10px; }
          header[role="banner"] .wrap .mainNav .social a.facebook {
            background-position: -60px -60px;
            width: 9px;
            height: 17px; }
          header[role="banner"] .wrap .mainNav .social a.instagram {
            background-position: -100px -60px;
            width: 16px;
            height: 16px; }
          header[role="banner"] .wrap .mainNav .social a.youtube {
            background-position: -120px -60px;
            width: 19px;
            height: 13px; }

.hero.slider {
  position: relative; }
  .hero.slider .logo {
    right: auto;
    left: 50%;
    margin-left: -500px;
    width: 160px;
    margin-top: -140px; }
  .hero.slider .swiper-container .swiper-pagination {
    bottom: 80px;
    text-align: left;
    width: 980px;
    margin: 0 auto; }
  .hero.slider .swiper-container .swiper-wrapper .swiper-slide {
    height: 100vh; }
    .hero.slider .swiper-container .swiper-wrapper .swiper-slide .content {
      width: 980px;
      left: 0;
      right: 0;
      margin: 0 auto;
      text-align: left;
      padding: 0; }
      .hero.slider .swiper-container .swiper-wrapper .swiper-slide .content h2 {
        font-size: 4rem; }
      .hero.slider .swiper-container .swiper-wrapper .swiper-slide .content p {
        margin-top: 20px;
        font-size: 1.5rem;
        max-width: 600px; }

.intro {
  margin-bottom: 120px; }
  .intro.largeHeader .wrap .text h3 {
    font-size: 3rem; }
  .intro .wrap {
    width: 780px;
    margin: 0 auto; }
    .intro .wrap .text {
      padding: 0; }

.boxGrid.boxGridTwo .wrap .row .col {
  width: 100%;
  float: none; }
  .boxGrid.boxGridTwo .wrap .row .col .box {
    float: left;
    width: 33.3%;
    padding-top: 20%; }
.boxGrid .wrap {
  margin: 0; }
  .boxGrid .wrap .row .col {
    width: 50%;
    float: left;
    overflow: hidden; }
    .boxGrid .wrap .row .col + .col {
      margin-top: 0; }
    .boxGrid .wrap .row .col.largeCol {
      float: right; }
      .boxGrid .wrap .row .col.largeCol .box {
        padding-top: 100%; }
    .boxGrid .wrap .row .col .box {
      padding-top: 50%;
      -webkit-transition-timing-function: linear;
      -webkit-transition-duration: 300ms;
      -webkit-transition-property: transform;
      -moz-transition-timing-function: linear;
      -moz-transition-duration: 300ms;
      -moz-transition-property: transform;
      -o-transition-timing-function: linear;
      -o-transition-duration: 300ms;
      -o-transition-property: transform;
      -ms-transition-timing-function: linear;
      -ms-transition-duration: 300ms;
      -ms-transition-property: transform;
      transition-timing-function: linear;
      transition-duration: 300ms;
      transition-property: transform; }
      .boxGrid .wrap .row .col .box:hover {
        -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
        transform: scale(1.02); }
        .boxGrid .wrap .row .col .box:hover.overlay .link {
          background-color: var(--color-5);
          color: var(--color4); }
      .boxGrid .wrap .row .col .box .text {
        padding: 0 80px;
        text-align: center; }
        .boxGrid .wrap .row .col .box .text p {
          font-size: 1.5rem;
          padding-top: 20px;
          line-height: 1.4; }
        .boxGrid .wrap .row .col .box .text .link {
          margin-top: 30px; }

.featuredPanel {
  margin: 0 auto;
  width: 980px; }
  .featuredPanel.featuredPanelTwo {
    margin: 120px auto; }
    .featuredPanel.featuredPanelTwo .wrap .cols {
      position: relative; }
  .featuredPanel .wrap .cols {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
    .featuredPanel .wrap .cols .col {
      width: 50%; }
      .featuredPanel .wrap .cols .col .content {
        padding-left: 50px; }
        .featuredPanel .wrap .cols .col .content h2 {
          font-size: 1rem; }
        .featuredPanel .wrap .cols .col .content h3 {
          font-size: 2.5rem; }
        .featuredPanel .wrap .cols .col .content span {
          margin-top: 40px; }

.introPanel .wrap header {
  padding: 120px 0 80px 0;
  width: 880px;
  margin: 0 auto; }

.pageText .wrap {
  width: 920px;
  margin: 0 auto; }
  .pageText .wrap article {
    width: 720px;
    padding-right: 0; }
    .pageText .wrap article figure {
      max-width: 500px; }
    .pageText .wrap article p {
      font-size: 1.0625rem; }
    .pageText .wrap article ul li {
      font-size: 1.0625rem; }

.serviceTimes.aboutPanel .wrap .row .col .text {
  padding: 40px; }
.serviceTimes.churchServices.organisations .wrap .row .col figure {
  padding-top: 30%;
  width: 50%; }
.serviceTimes.churchServices.organisations .wrap .row .col .text {
  width: 50%; }
.serviceTimes.podcasts .wrap .row .col {
  width: -moz-calc(33.3% - 10px);
  width: -o-calc(33.3% - 10px);
  width: -webkit-calc(33.3% - 10px);
  width: calc(33.3% - 10px); }
.serviceTimes .wrap {
  width: 980px;
  margin: 0 auto; }
  .serviceTimes .wrap .row {
    margin: 0 -20px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center; }
    .serviceTimes .wrap .row .col {
      padding-top: 0;
      width: 33.3%;
      padding: 0 20px;
      float: left;
      margin-bottom: 40px; }
      .serviceTimes .wrap .row .col + .col {
        margin-top: 0; }

.filter {
  margin-bottom: 80px;
  margin: 0 0 80px; }
  .filter h2 {
    margin-left: 24px; }
  .filter form .search {
    margin-bottom: 0;
    width: 35%;
    float: left;
    margin-right: 15px; }
    .filter form .search .input {
      width: 100%; }
  .filter form .input {
    width: 20%;
    float: left; }
    .filter form .input + .input {
      margin-top: 0;
      margin-left: 15px; }
    .filter form .input input, .filter form .input select {
      padding: 0 24px;
      font-size: 1.5625rem; }
    .filter form .input label {
      font-size: 1.5625rem;
      left: 24px;
      margin-top: -11px; }

.fullWidth {
  margin: 0 20px; }
  .fullWidth .wrap .row .col figure {
    padding-top: 30%; }
  .fullWidth .wrap .row .col .content {
    width: 980px; }

.contactPanel .wrap header h3 {
  font-size: 2.4rem; }
.contactPanel .wrap header .hold h2 {
  font-size: 2.4rem; }
.contactPanel .wrap .cols {
  padding: 0;
  margin-bottom: 0; }
  .contactPanel .wrap .cols .col {
    width: 50%;
    float: left;
    padding: 90px; }
    .contactPanel .wrap .cols .col + .col {
      margin-top: 0;
      border-top: 1px solid rgba(241, 241, 241, 0.5);
      float: right;
      padding: 90px;
      background-color: var(--color-5);
      margin-bottom: 0; }
    .contactPanel .wrap .cols .col form {
      margin: 0 20px; }
      .contactPanel .wrap .cols .col form legend {
        font-size: 2.4rem; }
      .contactPanel .wrap .cols .col form button {
        margin-top: 25px; }
      .contactPanel .wrap .cols .col form .input + h4 {
        margin-top: 45px; }
      .contactPanel .wrap .cols .col form .input input, .contactPanel .wrap .cols .col form .input textarea {
        height: 58px;
        font-size: 1.125rem;
        padding: 0 15px; }
      .contactPanel .wrap .cols .col form .input textarea {
        height: 220px;
        padding-top: 18px; }
      .contactPanel .wrap .cols .col form .input label {
        font-size: 1.125rem;
        top: 20px;
        left: 15px; }
    .contactPanel .wrap .cols .col .contactInfo {
      padding: 0; }
      .contactPanel .wrap .cols .col .contactInfo h3 {
        font-size: 2.4rem;
        padding-bottom: 21px; }
      .contactPanel .wrap .cols .col .contactInfo p + h3 {
        margin-top: 90px; }
      .contactPanel .wrap .cols .col .contactInfo p {
        line-height: 1.3;
        font-size: 1.25rem; }

footer {
  padding: 50px 0; }
  footer .wrap {
    width: 980px;
    margin: 0 auto; }
    footer .wrap .cols .col {
      width: 25%;
      float: left; }
      footer .wrap .cols .col + .col {
        margin-top: 0; }
      footer .wrap .cols .col h3 {
        font-size: 1.125rem;
        padding-bottom: 15px; }
      footer .wrap .cols .col p {
        font-size: 1rem; }

@media only screen and (min-width: 1200px) {
  .serviceTimes.events .wrap {
    width: 940px; }
  .serviceTimes.instagram .wrap .row .col figure img {
    height: 396px; }
  .serviceTimes .wrap {
    width: 1150px;
    margin: 0 auto; }
  .serviceTimes.organisations .wrap {
    width: 980px;
    margin: 0 auto; }

  .featuredPanel {
    width: 1150px; }
    .featuredPanel.featuredPanelTwo .wrap .cols .col .content h3 {
      font-size: 2.5rem; } }
.contactPanel.newsletter .wrap .cols {
  width: 980px;
  margin: 0 auto; }

.sermon {
  padding: 100px 40px 130px 40px; }
  .sermon .wrap {
    max-width: 1150px;
    margin: 0 auto; }
    .sermon .wrap header {
      margin-bottom: 80px; }
      .sermon .wrap header h3 {
        font-size: 2.4rem;
        line-height: 1.2; }
        .sermon .wrap header h3 + h2 {
          margin-top: 20px; }
      .sermon .wrap header h2 {
        font-size: 1.25rem;
        line-height: 1.4; }
    .sermon .wrap .row {
      -webkit-justify-content: flex-start;
      -moz-justify-content: flex-start;
      -ms-justify-content: flex-start;
      justify-content: flex-start;
      -ms-flex-pack: flex-start; }
      .sermon .wrap .row .col {
        width: -moz-calc(33% - 10px);
        width: -o-calc(33% - 10px);
        width: -webkit-calc(33% - 10px);
        width: calc(33% - 10px);
        margin-right: 20px; }
        .sermon .wrap .row .col:nth-of-type(3n) {
          margin-right: 0; }
        .sermon .wrap .row .col .text h4 {
          font-size: 1.25rem; }
        .sermon .wrap .row .col .text h5 {
          font-size: 1rem; }

.twoCols, .introCols {
  margin-top: 120px; }
  .twoCols.circle .wrap .row, .introCols.circle .wrap .row {
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center; }
    .twoCols.circle .wrap .row .col.imageCol, .introCols.circle .wrap .row .col.imageCol {
      width: 380px;
      height: 380px;
      margin-top: 0;
      margin-bottom: 0; }
  .twoCols.full-width .wrap, .introCols.full-width .wrap {
    width: unset; }
  .twoCols.textRight .wrap .row .col:first-of-type, .introCols.textRight .wrap .row .col:first-of-type {
    order: 2; }
  .twoCols.textRight .wrap .row .col:nth-of-type(2), .introCols.textRight .wrap .row .col:nth-of-type(2) {
    order: 1; }
  .twoCols .wrap, .introCols .wrap {
    width: 980px;
    margin: 0 auto; }
    .twoCols .wrap .row, .introCols .wrap .row {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      justify-content: space-between;
      -ms-flex-pack: space-between; }
      .twoCols .wrap .row .col, .introCols .wrap .row .col {
        position: relative;
        width: 50%;
        padding-top: 45%; }
        .twoCols .wrap .row .col.pushRight, .introCols .wrap .row .col.pushRight {
          float: right; }
        .twoCols .wrap .row .col.imageCol, .introCols .wrap .row .col.imageCol {
          padding-top: 45%; }
        .twoCols .wrap .row .col .content, .introCols .wrap .row .col .content {
          padding: 0 40px;
          width: 100%;
          left: 0;
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
          .twoCols .wrap .row .col .content h3, .introCols .wrap .row .col .content h3 {
            font-size: 2rem;
            padding-bottom: 30px; }
          .twoCols .wrap .row .col .content a, .introCols .wrap .row .col .content a {
            margin-top: 35px; }
          .twoCols .wrap .row .col .content p, .introCols .wrap .row .col .content p {
            font-size: 1rem;
            padding-right: 0; }
            .twoCols .wrap .row .col .content p + p, .introCols .wrap .row .col .content p + p {
              margin-top: 20px; }

/*# sourceMappingURL=desktop.css.map */