ls/* -- Reset -- */

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

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

p {
  clear: both;
}

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

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

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

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

hr {
  display: block;
  min-height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

iframe {
  border: none;
}

* {
  transition: all 0.2s ease-out;
  transition: width 0s, height 0s, text-size 0s;
  box-sizing: border-box;
}


/* -- End Reset -- */


/*----------------------------------------------------------------*/

/*----------------------------------------------------------------*/


/* -- Clearfix -- */



.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}


/* -- End Clearfix -- */

/*----------------------------------------------------------------*/

/*----------------------------------------------------------------*/

/* -- FontFace -- */



@font-face {
  font-family: 'NewsGothXCon';
  src: local('☺'),
    url('fonts/NewsGothicExtraCondensedBT.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NewsGothXConBOLD';
  src: local('☺'),
    url('fonts/NewsGothicExtraCondensedBT-BOLD.woff2') format('WOFF2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'NewsGothBOLD';
  src: local('☺'),
    url('fonts/NewsGothicBoldBT.woff2') format('WOFF2');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'NewsGothStd';
  src: local('☺'),
    url('fonts/NewsGothicBT.woff2') format('WOFF2');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: local('☺'),
    url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Livory';
  src: local('☺'),
    url('fonts/livory-regularitalic-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LivoryStd';
  src: local('☺'),
    url('fonts/Livory-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


/* -- End FontFace -- */


/*----------------------------------------------------------------*/
/*   T E X T   F O R M T T I N G
/*----------------------------------------------------------------*/


body {
  font-family: "Inter", sans-serif;
  margin-top: 4em;
}

@media screen and (max-width: 900px) {
  body {
    margin-top: -10vw;
  }
}

@media screen and (max-width: 414px) {

  body {
    margin-top: 1em;
  }

}

h1 {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 4.4vw;
  text-transform: uppercase;
  line-height: 0.85em;
}

h2 {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 7em;
  text-transform: uppercase;
  margin-bottom: 0.8em;
}

.bodyText>h2 {
  margin-bottom: 0;
}

h3 {
  font-family: "NewsGothXConBOLD", sans-serif;
  text-transform: uppercase;
  font-size: 3em;
}

h4 {
  font-family: "Inter";
  font-size: 120%;
}

p {
  padding-bottom: 0.9em;
  line-height: 1.5em;
  font-size: 2em;
}

@media screen and (max-width: 750px) {

  h2 {
    font-size: 15vw;
  }

  p {
    font-size: 4vw;
  }

}

small {
  font-size: 60%;
}

q,
blockquote {
  font-family: "Livory", serif;
  font-size: 1.6em;
  font-style: italic;
  color: #00aeef;
  display: inline-block;
  clear: both;
  padding: 0 0 22px 0;
}

q:before,
blockquote:before,
q:after,
blockquote:after {
  content: "\0022";
}

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
}

a:hover {
  color: #7f7f7f;
  text-decoration: underline;
}

q,
ul,
li,
.ccm-block-type-form {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.livory {
  font-family: 'Livory' !important;
  text-transform: none;
}


/*-- Text adjustments for CMS generated pages --*/

#defaultContent p {
  font-size: 1.5em;
  margin: 0.9em 0 1.2em 0;
}





/*-- End Text Formatting --*/

/*----------------------------------------------------------------*/
/*   N A V I G A T I O N   B A R 
/*----------------------------------------------------------------*/


#navBar {
  position: fixed;
  top: 0;
  width: 100vw;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.8em 0 1.8em 0;
  z-index: 100;
}

#hamburger {
  display: none;
  text-indent: -9999px;
  background: url('images/hamburger.png') 0 0 / cover no-repeat;
  float: right;
  width: 2em;
  height: 2em;
  margin: 1em 5vw 0 0;
}

#hamburger:hover {
  opacity: 0.7;
}

#navigation {
  width: 97vw;
  margin: auto;
}

#navBar #navLogo {
  float: left;
  width: 4.1em;
  height: 4.1em;
  color: black;
  background-image: url('images/logoBW.png');
  background-position: center center;
  background-size: cover;
  text-indent: -999px;
}

#navBar #navLinks {
  float: right;
  font-size: 1.1em;
}

#navBar ul {
  list-style-type: none;
}

#navBar li {
  display: inline-block;
}

#navBar li a {
  display: inline-block;
  text-decoration: none;
  padding: 0.8em;
  margin: 0.4em 0 0 0.7em;
}

#navBar .outlineBtn {
  margin-left: 1.5em;
  margin-right: -0.5em;
}

#navBar .close {
  display: none;
}

@media screen and (max-width: 1500px) {

  #navBar #navLogo {
    margin-left: 5vw;
  }

  #navBar #hamburger {
    display: block;
  }

  #navBar #navLinks {
    visibility: hidden;
    position: absolute;
    background: white;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    padding: 5em 12vw 0 12vw;
  }

  #navBar #navLinks:target {
    visibility: visible;
  }

  #navLinks ul {
    font-family: "NewsGothXConBOLD", sans-serif;
    font-size: 4.58em;
    text-transform: uppercase
  }

  #navBar #navLinks li {
    display: block;
  }

  #navBar #navLinks a {
    margin: 0 0 0.3em 0;
    padding: 0;
  }

  #navBar .btn {
    font-family: "Inter", sans-serif;
    font-size: 0.41em;
    text-transform: none;
    width: 16em;
  }

  #navBar .outlineBtn {
    margin-top: 2em !important;
  }

  #navBar .close {
    display: block;
    position: absolute;
    top: 0.6em;
    right: 30vw;
    text-decoration: none;
  }

  #navBar .close:hover {
    color: grey;
  }

}

@media screen and (max-width: 900px) {

  #navBar {
    padding: 1em 0 1em 0;
  }

  #navBar #navLogo {
    width: 2.5em;
    height: 2.5em;
  }

  #hamburger {
    width: 1.3em;
    height: 1.3em;
    margin-top: 0.7em;
  }

  #navLinks ul {
    font-size: 9vw;
  }

  #navBar .btn {
    font-size: 3.7vw;
    width: 60vw;
  }

}

/* -- End Navigation Bar --*/


/*----------------------------------------------------------------*/
/*   G I V I N G   P O P - U P
/*----------------------------------------------------------------*/



#givingInner .close {
  text-decoration: none;
  float: right;
  background-color: #EFEFEF;
  border-radius: 50%;
  display: block;
  width: 45px;
  height: 45px;
  padding: 0px 7px;
  color: black;
  font-size: 50px;
  line-height: 40px;
}

#givingInner .close:hover {
  color: grey;
}

#givingInner {
  position: relative;
  margin: 10vh auto auto auto;
  color: white;
  width: 23em;
  padding: 2em;
  background: black;
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
  border-radius: 20px;
}

#givingInner h3 {
  color: #00aeef;
  width: 50%;
}

#givingInner p {
  margin: 2em 0 0 1em;
  font-size: 90%;
}

#givingInner iframe {
  width: 100%;
  height: auto;
}

#givingInner #givingAppeal p {
  width: 60%;
  color: black;
  height: 6em;
  margin-top: -8em;
}

#givingAppeal {
  margin-bottom: 3em;
}

@media screen and (max-width: 900px) {

  #givingInner #givingAppeal p {
    font-size: 90%;
  }

}

@media screen and (max-width: 1000px) {
  #givingInner {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1000;
  }

  #givingInner #givingAppeal p {
    font-size: 100%;
    position: absolute;
    text-align: left;
    margin-left: 10px;
    bottom: 0;
  }

}


/*-- End Giving Popup --*/



/*----------------------------------------------------------------*/
/*   C I R C L E S   A N D   S Q U A R E S
/*----------------------------------------------------------------*/



.headline {
  position: absolute;
  top: 15em;
  margin-left: -5vw;
}

.circle {
  background: url('images/blue-circle.png');
  background-size: cover;
  border-radius: 100%;
}

.circle.orange {
  background: url('images/orange-circle.png');
  background-size: cover;
}

.headline.square {
  top: 10em;
}

.square {
  width: 27vw;
  max-width: 40em;
  height: 27vw;
  max-height: 40em;
  padding: 1vw;
  background: #0ab5ef url('images/bluenoiseSq.jpg');
  background-size: cover;
}

.square h1 {
  width: 90%;
}

.circle h1 {
  padding: 1.8em 1em 0.5em 1.3em;
  width: 30vw;
  height: 30vw;
}

.headline.square h1 {
  height: 15vw;
  max-height: 40em;
  max-width: 40em;
  padding: 3vw 0 0 3vw;
}

.headline.square p {
  height: 5vw;
  max-width: 18vw;
  padding: 2vw 0 0 3vw;
  font-size: 1vw;
}

.headline.bannerOverlay {
  margin-top: 14em;
  margin-left: 5vw;
  width: 25vw;
  min-width: 25em;
}

.headline.bannerOverlay h1 {
  color: #00B1EB !important;
  font-size: 6em;
}

@media screen and (max-width: 900px) {

  .headline {
    margin: 30vw 0;
    width: 75vw;
    height: 75vw;
  }

  .circle h1 {
    font-size: 10vw;
    width: auto;
  }

  .headline.square {
    width: 59vw;
    height: 59vw;
    margin: 40vw 0 0 5.5vw;
  }

  .headline.square h1 {
    font-size: 10vw;
    width: auto;
  }

  .headline.square p {
    font-size: 3vw;
    max-width: 49vw;
    margin-top: 25vw;
  }

}

.smallCircle {
  width: 18vw;
  height: 18vw;
  margin: -9vw 15vw 0 0;
}

.medCircle {
  width: 22vw;
  height: 22vw;
  margin: -9vw 15vw 0 0;
}

@media screen and (max-width: 900px) {

  .smallCircle,
  .medCircle {
    display: none;
  }

}

.circle h3 {
  padding: 0.9em 1em 0.5em 1.1em;
  font-size: 4.5vw;
  width: 12vw;
  height: 12vw;
}

.smallCircle h3 {
  padding: 0.9em 0 0 1em;
  width: 8vw;
  height: 8vw;
}

.blackCircle {
  position: relative;
  background: url('images/black-circle-eclipse-right.png') top left;
  background-size: contain;
  background-repeat: no-repeat;
  float: right;
  width: 34vw;
  height: 45vw;
  margin: -30vw 0 -18vw 0;
}

.circle.right {
  margin-right: 10vw;
}

.circle.upper {
  margin-top: 4em;
  margin-bottom: -30em;
}

.circle.leftOffset {
  margin-left: -3vw;
}

.circle.rightOffset {
  margin-right: -3vw;
  float: right;
}

@media screen and (max-width: 1720px) {

  .blackCircle {
    background-size: 100%;
    height: 38vw;
    margin-top: -38vw;
  }

}

@media screen and (max-width: 1000px) {

  .blackCircle {
    background-size: 100%;
    width: 65vw;
    height: 75vw;
    margin-top: -75vw;
  }

}

@keyframes squareautoscroll {

  0% {
    margin-top: 0vw;
  }

  31% {
    margin-top: 0vw;
  }

  33% {
    margin-top: -19vw;
  }

  64% {
    margin-top: -19vw;
  }

  66% {
    margin-top: -38vw;
  }

  97% {
    margin-top: -38vw;
  }

  98% {
    margin-top: -38vw;
  }

  100% {
    margin-top: 0vw;
  }

}

#headScrollSquares {
  position: absolute;
  top: 8em;
  right: 7.5vw;
  width: 19vw;
  height: 19vw;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}

#headScrollSquares::-webkit-scrollbar {
  display: none;
}

#firstSquare {
  animation-name: squareautoscroll;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

#firstSquare:hover {
  animation: none;
}

@media screen and (max-width: 900px) {

  #headScrollSquares {
    display: none;
  }

}

#headScrollSquares #slides {
  -webkit-flex-direction: column;
  flex-direction: column;
}

.headScrollSquare {
  scroll-snap-align: start;
  padding: 1.2vw;
  background-size: cover !important;
  font-size: 0.9vw;
  height: 19vw;
  width: 19vw;
}

.headScrollSquare h3 {
  margin-bottom: 0.6em;
  width: 60%;
  font-size: 350%;
}

.headScrollSquare p {
  display: block;
  line-height: 1.5em;
  width: 14vw;
  font-size: 1em;
}

.headScrollSquare a {
  display: inline-block;
  position: relative;
  bottom: 0;
  font-family: 'Livory';
  padding: 0.4em 1em 0.4em 1em !important;
  margin-top: 15%;
  border: black 1px solid;
  border-radius: 3em;
  font-size: 100%;
  text-decoration: none;
}

.blueSquare {
  background: #0ab5ef url('images/bluenoiseSq.jpg');
}

.blueSquare a,
.whiteSquare a {
  background: black !important;
  color: white !important;
}

.blueSquare a:hover,
.whiteSquare a:hover {
  background: transparent !important;
  color: black !important;
  border: black 1px solid;
}

.blackSquare {
  background: black url('images/blacknoiseSq.jpg');
  color: white;
}

.blackSquare a {
  background: #0ab5ef !important;
  color: black !important;
  border: #0ab5ef 1px solid;
}

.blackSquare a:hover {
  background: transparent !important;
  color: white !important;
  border: white 1px solid;
}

.whiteSquare {
  background: white url('images/whitenoiseSq.jpg');
}

.moreSquare {
  position: absolute;
  padding: 1.8vw;
  height: 11.5vw;
  width: 11.5vw;
  background: black url('images/blacknoiseSq-down.jpg');
  background-size: cover;
  margin: 8vw 0 0 16vw;
}

.moreSquare h3 {
  max-width: 100%;
  color: white;
  font-size: 3vw;
  line-height: 0.9;
}

.moreSquare:hover .moreSquare h3 {
  color: #0ab5ef;
}

@media screen and (max-width: 900px) {

  .moreSquare {
    display: none;
  }
}

/*-- End Circles & Squares --*/


/*----------------------------------------------------------------*/
/*   B U T T O N S
/*----------------------------------------------------------------*/


.btn {
  display: inline-block;
  border: black 1px solid;
  border-radius: 3em;
  padding: 0.7em 1.7em 0.7em 1.7em !important;
  color: white !important;
  background-color: black !important;
  text-decoration: none;
  cursor: pointer !important;
}

#Chapbtn .btn {
  display: inline-block;
  border: black 1px solid;
  border-radius: 3em;
  padding: 0.7em 1.7em 0.7em 1.7em !important;
  color: white !important;
  background-color: black !important;
  text-decoration: none;
  cursor: pointer !important;
  text-align: center;
}

.btn:hover {
  text-decoration: none;
  background: white !important;
  color: black !important;
}

.btnLarge {
  font-size: 250%;
  color: black !important;
}

.btnMed {
  font-size: 180%;
}

@media screen and (max-width: 1000px) {

  .btnLarge {
    width: 80%;
    text-align: center;
  }

}

@media screen and (max-width: 620px) {

  .btnLarge {
    width: 58vw;
    font-size: 5vw;
  }

  .btnMed {
    font-size: 4vw;
  }

}


p .btn {
  font-size: 0.9em;
  float: left;
  clear: both;
  margin: 2em 0 5em 0;
}

#Chapbtn p .btn {
  font-size: 0.9em;
  text-align:center;
  float: none;
  margin: 2em 0 5em 0;
}

.wtBtn,
#footContact button {
  display: inline-block;
  padding: 1em 2em 1em 2em !important;
  border: black 1px solid;
  border-radius: 3em;
  color: black !important;
  background: white !important;
}

.wtBtn:hover,
#footContact button:hover {
  background-color: none !important;
  border: white 1px solid !important;
  color: white !important;
  cursor: pointer;
}

.bluBtn {
  background-color: #0ab5ef !important;
  border-color: #0ab5ef;
}

.bluBtn:hover {
  background: none !important;
  color: #0ab5ef;
}

.outlineBtn {
  background: none !important;
  color: black !important;
  border-color: black !important;
}

.outlineBtn:hover {
  background: black !important;
  color: white !important;
}

.btn .personIcon {
  display: inline-block;
  height: 0.8em;
  width: 0.6em;
  background-image: url('images/person-icon.png');
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 0.8em;
}

.btn:hover>.personIcon {
  background-image: url('images/person-icon-black.png');
}

#givingInner .btn {
  color: black;
  background: white;
  border: white solid 1px;
  margin-bottom: 0.8em;
  width: 100%;
}

#givingInner .btn:hover {
  background: black !important;
  border-color: white !important;
}


/*-- End Buttons --*/


/*----------------------------------------------------------------*/
/*   B L O C K S
/*----------------------------------------------------------------*/


/* -- GENERAL --*/

.wrapper {
  width: 75vw !important;
  margin: auto !important;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

#content .block {
  width: 100%;
  min-height: 30vh;
}

#content .spacer-block {
  width: 100%;
  height: 10vw;
}

#content .small-spacer-block {
  width: 100%;
  height: 5vw;
}

#content .large-spacer-block {
  width: 100%;
  height: 20vw;
}

#content .spacerSmall {
  margin-bottom: 5vw;
}

#content .spacerLarge {
  margin-bottom: 20vw;
}

@media screen and (max-width: 900px) {
  #content .block {
    min-height: 50vh;
    scroll-snap-type: y mandatory;
  }
}

/*-- HEADLINE --*/

.block.headblock {
  min-height: 22vw;
  margin: 10em auto 5vw auto;
}

.headblock video {
  position: relative;
 /* cursor: pointer; */
  height: 22vw;
  width: 100%;
  object-fit: cover;
}

.headblock video::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.headblock video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.innerBlock {
  width: 75vw;
  margin: 5em auto 0 auto;
}

.fullbanner {
  width: 75vw;
  overflow: hidden;
  margin-top: 4em;
  text-align: left;
}

.mainBanner {
  float: right;
  width: 60vw;
  height: 17.5vw;
  overflow: hidden;
  margin: 2em 0 14vw 0;
}

.chapmainBanner {
  float: right;
  width: 60vw;
  height: 17.5vw;
  overflow: hidden;
  margin: 2em 0 14vw 0;
  display: flex;
}

.fullbanner img,
.mainBanner img,
.chapmainBanner img,
.fullbanner video,
.mainBanner video,
.chapmainBanner video {
  object-fit: cover;
  min-width: 100%;
}

@media screen and (max-width: 900px) {

  .block.headblock {
    margin-bottom: 10vh;
  }
  .chapmainBanner {
    width: 75vw;
    height: 75vw;
  }
  .mainBanner {
    width: 75vw;
    height: 75vw;
  }

  .fullbanner {
    height: 75vw;
  }

  .fullbanner img,
  .mainBanner img,
  .chapmainBanner img {
    width: auto;
    height: 100%;
  }

  .fullbanner video,
  .mainBanner video
  .chapmainBanner video {
    width: 100%;
    height: 100%;
  }

}


/*-- Grid Feature (Programme) --*/

.block .grid {
  background: url('images/whitefade-down.png'), url('images/whitefade-up.png'), url('images/grid.jpg');
  background-position: left top, left bottom, center center;
  background-size: 10vw, 10vw, cover;
  background-repeat: repeat-x, repeat-x, no-repeat;
  padding: 10vw 0 14vw 0;
}

.block .gridHeadline {
  text-align: center;
}

.block .grid h2 {
  width: 100%;
  font-size: 18.3vw;
  margin: -2vw 0 1vw -0.8vw;
}

.block .gridContent {
  width: 75vw;
  margin: auto;
  padding: 5em 0 5em 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4em;
}


@media screen and (max-width: 1200px) {

  .block .gridContent {
    display: block;
  }

  .block .gridContent p {
    width: 100%;
  }

}

@media screen and (max-width: 900px) {


  .block .grid .btn {
    width: 100%;
    font-size: 2em;
  }

}


/*-- Blue Fade + Card (Prayer Diary) --*/

.blueBlock {
  background: url('images/whitefade-down.png'), url('images/blue-hills.jpg') left top, center top;
  background-repeat: repeat-x, no-repeat;
  background-size: 10vw, cover;
  padding: 5em 0 8em 0;
  margin-bottom: 0 !important;
}

.infoCard {
  position: relative;
  background-color: white;
  width: 63vw;
  padding: 4vw;
  border-radius: 20px;
  margin: 10vw 0 10vw 0;
  z-index: 1;
}

.infoCard h4,
h5 {
  font-size: 130%;
  font-weight: 100;
}

.infoCard p {
  font-family: "Livory";
  width: 30vw;
  margin: 2em 0 0 0;
  padding: 0;
}

.infoCard .btn {
  margin-top: -2.5em;
}

@media screen and (max-width: 1500px) {

  .infoCard p {
    width: 100%;
    margin-bottom: 5em;
  }

}

@media screen and (max-width: 1000px) {

  .infoCard {
    width: 100%;
    padding: 10vw;
  }

  .infoCard .btn {
    width: 100%;
    text-align: center;
  }

}

/*-- Full Width Split Spread (Base Camp) --*/

.fullWidthSplit {
  width: 100%;
  background: url('images/black-fade-wide.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.fullWidthSplit .section.left {
  width: 40%;
}

.fullWidthSplit .section.right {
  width: 60%;
  min-height: 30vw;
  padding: 18vw 18vw 0 18vw;
}

.fullWidthSplit .section img {
  width: 100% !important;
}


@media screen and (max-width: 1450px) {

  .fullWidthSplit .section.right {
    padding-top: 10vw;
  }

}

.fullWidthSplit .section p {
  margin-bottom: 2em;
}

.fullWidthSplit .section .btn {
  float: left;
}

@media screen and (max-width: 1200px) {

  .fullWidthSplit .section {
    width: 100% !important;
  }

  .fullWidthSplit .section.right {
    background: url('images/black-fade-wide.jpg');
    background-size: cover;
    background-position-y: -100px;
    background-repeat: no-repeat;
    float: left !important;
    width: 100%;
    margin-top: -1em;
    padding-top: 20vw;
    padding-bottom: 20vw;
  }

  .fullWidthSplit .section p {
    width: 72%;
  }


}

/*-- Indented Split Spread (Volunteer) --*/


.half.left {
  width: 40%;
  margin-left: 10%;
}

.half h2 {
  margin-top: 12vw;
}

.half h2,
.half h3,
.half h4,
.half h5,
.half p,
.half blockquote .half .btn {
  width: 70%;
}

.half.right {
  width: 40%;
  margin-right: 10%;
}

.half.right img {
  width: 100%;
}

@media screen and (max-width: 1200px) {

  .half.left {
    width: 90%;
  }

  .half.right {
    width: 100%;
    margin: 0;
  }

}

/*-- Team Profiles --*/

.block.blackNoise {
  color: white;
  background: black url('images/black-noise-long.jpg');
  background-size: 100vw;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 5em 0 40em 0;
  margin-bottom: -25em;
}

#team h2 {
  margin-top: 2vw;
}

.profiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 4em;
  row-gap: 6em;
}

@media screen and (max-width: 1200px) {

  .profiles {
    grid-auto-columns: 95%;
    grid-auto-flow: column;
    overflow-x: auto;
    margin-bottom: 8em;
  }

}

.profiles .profileSmall {
  float: left;
}

.profiles .teamProfile a {
  color: white;
  text-decoration: none;
}

.profiles .teamProfile a:hover>h3 {
  color: #7f7f7f;
  text-decoration: underline;
}

.profiles .teamProfile img {
  border-radius: 100%;
}

.profiles .profileSmall img {
  width: 16em;
  height: 16em;
  background: url('images/bluenoise.jpg');
  margin-bottom: -3em;

}

.profiles .teamProfile h3 {
  width: 10%;
}

.profiles .teamProfile h4 {
  font-family: "Livory", serif;
  font-weight: normal;
  margin-top: 0.5em;
}

.profileCard {
  position: relative;
  color: black;
  width: 90vw;
  max-width: 1200px;
  max-height: 500px;
  margin: 15vh auto;
  padding: 5em;
  background: #fff url('images/cardnoise.jpg') left top no-repeat;
  background-size: cover;
}

.profileCard img {
  background: url(images/blacknoise.png);
  width: 275px;
  float: left;
  margin-right: 3em;
  height: 275px;
  object-fit: cover;
  display: flex;
  align-self: center;
}

.profileCard .details {
  float: left;
  width: 60%;
}

.profileCard .details>h3 {
  width: 100%
}

.profileCard .bio {
  margin-top: 2em;
  font-size: 100%;
}

.profileCard .close {
  transition: all 200ms;
  font-size: 3em;
  font-weight: bold;
  text-decoration: none;
  color: #000 !important;
  float: right;
  margin: -1em -1em 0 0;
}

.profileCard .close:hover {
  color: grey !important;
}

.profileCard .bio {
  max-height: 30%;
  overflow: auto;
  color: black
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  justify-content: center;
}

#navBar .overlay {
  background: white;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 700px) {
  .block.blackNoise {
    padding-bottom: 10em;
    margin-bottom: 0;
  }
}

/* -- Partners --*/

.partnerLogos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  max-width: 100%;
}

.partnerLogos img {
  width: 180px;
  height: auto;
}

.partnerLogos img:hover {
  opacity: 0.6;
  cursor: pointer;
}

@media screen and (max-width: 700px) {
  .partnerLogos {
    grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr));
    grid-gap: 0;
  }
  
  .partnerLogos img {
    width: 20vw;
    height: auto;
  }
}

/* -- Map -- */

.mapBlock {
  width: 65vw !important;
  margin-left: 17.5vw;
}

.chaplainMap {
  width: 65vw;
  margin-top: 5em;
}

.chaplainMap img,
.chaplainMap iframe {
  width: 100% !important;
}


/* -- Editorial -- */

.block.editorial {
  width: 90vw !important;
  padding: 5em 0 5em 0;
  margin: 0 5vw 0 5vw;
}

.block.editorial.blue {
  background: url('images/bluenoise-wide.jpg');
  background-size: cover;
}

.editorial .left {
  padding-left: 7vw;
  width: 37vw;
}

.editorial .right {
  width: 38vw;
  padding-right: 7vw;
}

.block.editorial h2 {
  font-size: 6.5em;
}

.block.editorial h3 {
  font-size: 4em;
}

.block.editorial p {
  font-size: 130%;
}

.block.editorial.editorial-statement .left h2,
.block.editorial.editorial-statement .left h3,
.block.editorial.editorial-statement .left h4,
.block.editorial.editorial-statement .left p {
  font-family: "Livory", serif;
  text-transform: none;
  font-size: 2.5em;
}

.block.editorial.editorial-statement .right h2,
.block.editorial.editorial-statement .right h3,
.block.editorial.editorial-statement .right h4,
.block.editorial.editorial-statement .right p {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 7em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1em;
  word-spacing: 15vw;
  margin-bottom: 0;
  padding-bottom: 0;
}

@media screen and (max-width: 1500px) {

  .editorial h2 {
    font-size: 5.7em !important;
  }

  .editorial p {
    font-size: 1.2em !important;
  }

  .editorial .left,
  .editorial .right {
    margin: 0;
    width: 75vw;
    float: left !important;
    clear: both;
  }
  
  .editorial .right {
    margin-left: 7vw;
  }

  .editorial .right {
    padding-right: 7.5vw;
    padding-top: 3vw
  }

  .editorial h2,
  .editorial h3,
  .editorial h4 {
    margin-bottom: 0.8em;
  }

  .block.editorial.blue .left {
    height: 35vh;
  }

  .block.editorial.editorial-statement .right h2,
  .block.editorial.editorial-statement .right h3,
  .block.editorial.editorial-statement .right h4,
  .block.editorial.editorial-statement .right p {
    font-size: 5em !important;
    word-spacing: 50vw;
  }

}

/* -- Prayer Diary Feed Page --*/

.diaryFeed .diaryItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21em, 1fr));
  margin-bottom: 8em;
  grid-gap: 3em;
}

@media screen and (max-width: 1200px) {

}

.diaryFeed h3 {
  color: #00B1EB;
  width: 100%;
  margin-bottom: 1em;
  width: 100%;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #00B1EB;
}

.diaryFeed .feedItem {
  float: left;
  overflow: hidden;
  display: -webkit-box;
}

.diaryFeed .feedItem h4 {
  font-family: "Livory", serif;
  font-size: 2em;
  color: #00B1EB;
  padding-bottom: 0.4em;
}

.diaryFeed .diaryItems p {
  font-size: 1em;
  line-height: 1.8em;
}


/* -- Circle image Block - Basecamp -- */

.circleimgtext h2,
.circleimgtext h3,
.circleimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.circleimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.circleimg {
  background: url('images/orangerotatedrectangle.jpg');
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}

.circleimg img {
  width: 41vw;
  height: 41vw;
  border-radius: 100%;
}


@media screen and (max-width: 1200px) {


  .circleimgtext h2,
  .circleimgtext h3,
  .circleimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .circleimgtext p {
    width: 75vw;
  }

  .circleimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .circleimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}

/* -- Text Sliders -- */

.ccm-image-slider-text {
  padding: 8em;
}

.ccm-image-slider-title {
  font-family: "Livory", serif;
  font-size: 2em;
  text-transform: none;
  margin-top: -25vw;
}

.ccm-image-slider-text p {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 4vw;
  text-transform: uppercase;
  line-height: 1em;

}

.text-slider-bg {
  background: #F5A68A url('images/basecamp-orange-quoteBG.jpg');
  background-size: cover;
  height: 30vw;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.text-slider-bg ul {
  list-style: none;
  position: absolute;
  left: 0px;
  top: 0px;
  transition: left .2s linear;
  -moz-transition: left .2s linear;
  -o-transition: left .2s linear;
  -webkit-transition: left .2s linear;
  margin-left: -25px;
}

.text-slider-bg li {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 1.5em;
  text-transform: uppercase;
  float: left;
  position: relative;
  width: 600px;
  display: inline-block;
}

.slider-container {
  margin: 0 auto;
}

.slider-container p {
  margin: 10px 25px;
}

@-webkit-keyframes slide-animation {
  32% {
    left: 0px;
  }

  33% {
    left: -600px;
  }

  45% {
    left: -600px;
  }

  50% {
    left: -1200px;
  }

  70% {
    left: -1200px;
  }

  75% {
    left: -1800px;
  }

  98% {
    left: -1800px;
  }

  100% {
    left: 0px;
  }
}

.text-slider-bg ul {
  -webkit-animation: slide-animation 20s infinite;
}

.text-slider-bg ul:hover {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

/* -- Blockstats -- */

.blockstats {
  margin-top: -30em;
  padding: 50em 0 10em 0;
  background: black url('images/blackfade-wide-up.jpg');
  background-size: cover;
  background-position: center top;
  min-height: 50vw;
}

.blockstats .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 33%);
}

.blockstats .stat {
  color: #F5A68A !important;
  background: black url('images/statcard.jpg');
  background-size: cover;
  padding: 4vw;
}

.blockstats h3 {
  height: 5em;
  font-size: 4.5vw;
}

.blockstats span,
.blockstats p {
  font-size: 1.1vw;
  width: 65%;
}

@media screen and (max-width: 900px) {

  .blockstats {
    background-size: 200vw;
    background-repeat: no-repeat;
  }

  .blockstats .wrapper {
    display: block;
  }

  .blockstats .stat {
    padding: 13vw;
  }

  .blockstats h3 {
    font-size: 13vw;
  }

  .blockstats span,
  .blockstats p {
    font-size: 2vw;
    width: 65%;
  }

}

/*-- Options --*/

.options {
  width: 65vw !important;
}

.options .gridContainer {
  display: grid;
  grid-template-columns: repeat(3, 33%);
}

.options .option {
  padding: 1.5vw 3vw;
  background: #F5A68A url('images/option-BG.jpg');
  background-size: cover;
}

.options .option .number {
  display: inline-block;
  float: right;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 2.5vw;
  text-align: center;
  padding: 1vw 4vw 3vw 4vw;
  margin: -6.45vw -2vw 0 0;
  color: white;
  background: url('images/optionnumber-semi-circle.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.options .option h3 {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 1.5vw;
  margin-bottom: 2vw;
  height: 2em;
}

.options .option h4 {
  margin-top: 2vw;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 3vw;
  text-transform: uppercase;
  height: 8vw;
}

.options .option ul {
  font-family: 'Livory', serif;
  font-size: 1.3vw;
  margin: 2vw 0 2vw 0;
  list-style-type: none;
  list-style-position: outside;
  width: 87%;
  float: right;
}

.options .option li {
  padding: 0.7vw 0 0.3vw 0;
  border-bottom: 1px solid white;
}

.options .option li:before { 
  content: '\2713'; 
  display: inline-block; 
  position: relative; 
  width: 1.6em; 
  height: 1.6em; 
  margin-right: 0.8em; 
  margin-left: -2.4em; 
  padding: 0em 0.4em;
	font-size: 70%; 
	line-height: 1.6em; 
	border: 0.1em solid #000; 
	border-radius: 50%; 
	text-align: center; 
}

@media screen and (max-width: 900px) {

  .options {
    width: 75vw !important;
    margin-top: 20vw !important;
  }

  .options .gridContainer {
    display: grid !important;
    grid-template-columns: repeat(1, 100%);
  }

  .options .option {
    padding: 5vw 10vw;
  }

  .options .option h3 {
    font-size: 6vw;
  }

  .options .option span {
    font-size: 8vw;
    padding: 3vw 10vw 4vw 10vw;
    margin: -19vw -8vw 0 0;
  }

  .options .option h4 {
    font-size: 12vw;
    height: 30vw;
  }

  .options .option ul {
    font-size: 5.2vw;
  }

  .options .option li {
    padding: 2.8vw 0 1.2vw 0;
    border-bottom: 2px solid white;
  }

  .options .option li::before {
    height: 4.8vw;
    width: 4.8vw;
    padding-right: 2vw;
  }

}

/*-- Basecamp CTA --*/

.wideCTA {
  width: 80vw !important;
  background: url('images/blackfade-wide-up.jpg');
  background-size: cover;
  background-position: center 85%;
  padding: 5vw;
}

.wideCTA h3 {
  display: inline-block;
  font-size: 6vw;
  width: 50%;
  color: #F5A68A;
  padding: 0;
  margin-bottom: 1vw;
}

.wideCTA .btn {
  color: black;
  background: white;
  font-family: "Livory", serif;
  border-color: white;
  width: 20vw;
  text-align: center;
  position: relative;
  margin-top: -10vw;
}

.wideCTA .btn:hover {
  background: black !important;
  border-color: black;
  color: white !important;
}

.wideCTA .circle {
  height: 30vw;
  width: 30vw;
  display: inline-block;
  margin: 0 0 -17.5vw -4vw;
}

@media screen and (max-width: 900px) {

  .wideCTA {
    width: 100% !important;
    background-size: 250%;
    background-position-y: 95%;
    margin-bottom: 35vw !important;
  }

  .wideCTA h3 {
    font-size: 12vw;
    width: 100%;
    padding-top: 5vw;
  }

  .wideCTA .btn {
    width: 70%;
    float: left !important;
    margin: -8vw 0 8vw 0 !important;
  }

  .wideCTA .circle {
    height: 70vw;
    width: 70vw;
    margin: 5vw -10vw -35vw 0;
    float: right;
  }

}

/*-- iFrame --*/

iframe {
  margin-bottom: 20vw;
}


/* -- End Blocks -- */


/*----------------------------------------------------------------*/
/*   F O O T E R
/*----------------------------------------------------------------*/

#footer form input,
#footer form textarea {
  width: 80%!important;
}

#footer {
  width: 100vw;
  color: white;
  padding: 5em 0 3em 0;
  background: #2b2b2b url('images/black-noise-wide.jpg');
  background-size: cover;
  background-position: center center;
}

#footer a {
  color: white;
}

#footer a:hover {
  color: grey;
}

#footContact,
#footer form, #GiftAidForm {
  margin-bottom: 7em;
}

#footContact label,
#footContact input,
#footer form label,
#footer form input,
#GiftAidForm form label,
#GiftAidForm form input {
  display: block !important;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

#footer form textarea, 
#GiftAidForm form input, 
#GiftAidForm form textarea {
  /* width: 33%; */
  height: 2em;
  color: #d9d9d9;
  font-size: 110%;
  background: transparent;
  border: none;
  border-bottom: solid 1px white;
  margin-bottom: 2.5em;
}

#GiftAidForm form .form-label {
  width: 30%;
}

#GiftAidForm form input, #GiftAidForm form textarea {
  border-bottom: solid 1px gray;
}

#footer form fieldset span, #GiftAidForm form fieldset span {
  display: none;
}

@media screen and (max-width: 1400px) {

  #footer form input,
  #footer form textarea {
    width: 60%;
  }

}

@media screen and (max-width: 800px) {

  #footer form input,
  #footer form textarea {
    width: 80%;
  }

}

@media screen and (max-width: 414px) {

  #footer form input,
  #footer form textarea {
    width: 100%;
  }

}

#footContact input:focus,
#footer form input:focus {
  outline: none;
}

#footContact button,
#footer form button {
  font-size: 1em;
  background: white !important;
  color: black !important;
  border: 1px solid black;
}

#footContact button:hover,
#footer form button:hover {
  font-size: 1em;
  background: none !important;
  color: white !important;
  border: 1px solid white;
  cursor: pointer;
}

#footer .ccm-error {
  margin: 0 0 1em 0.5em;
  color: red;
  text-decoration: underline;
}

#footer .ccm-error li {
  padding-bottom: 1em;
}

#footer .alert-success {
  width: 33%;
  line-height: 1.2em;
  margin-bottom: 3.5em;
}


@media screen and (max-width: 800px) {

  #footLegal {
    width: 85%;
    font-size: 80%;
  }

}

#giving {
  display: inline-block;
  position: fixed;
  bottom: 8.5em;
  right: -2.2em;
  padding: 0.8em 1em 1em 1.2em;
  background: black;
  transform: rotate(-90deg);
  color: white;
  text-decoration: none;
  font-size: 125%;
}

#giving img {
  margin: 0 0 -0.7em 0.3em;
}

#giving:hover {
  text-decoration: underline;
}

#backUp {
  border: none;
  display: inline-block;
  float: right;
  padding: 1em;
  background: url('images/upsprite.jpg') 0px 0px no-repeat;
  background-size: 100%;
  transform: rotate(-90deg);
  margin-top: -4.8em;
  margin-right: -1.75em;
  font-size: 125%;
}

#backUp:hover {
  background-position: 0px -60px;
  color: black;
}

#backUp {
  color: white;
  text-decoration: none;
}

#backUp:hover {
  color: black;
}

#backUp:after {
  content: ' >';
}

/* Cookies Popup */

#cookie-banner {
  padding: 5em 12vw 5em 12vw;
  background-color: black;
  opacity: 0.9;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 50%;
  z-index: 1000;
}

#cookie-banner p,
#cookie-banner h3 {
  color: white !important;
}

#cookie-banner a {
  text-decoration: underline;
  color: grey !important;
}

#cookie-banner a:hover {
  text-decoration: underline;
  color: white !important;
}

#cookie-banner .wtBtn {
  margin-right: 2em;
}

#cookie-banner .wtBtn:hover {
  background: none !important;
}



/* -- End Footer --*/

#givingAppeal {
  position: relative;
}

/* CSS for mobile devices */
/* CSS for mobile devices */
@media only screen and (min-width: 900px) {
  .profileCard {
    min-width: 767px;
  }
}
@media only screen and (max-width: 900px) {
  #givingInner {
    margin: 0 auto;
    left: 0;
    right: 0;

  }

  #givingInner .details p {
    font-size: 16px;
  }

  #givingInner .details,
  #givingInner .details p {
    text-align: center;
  }

  #givingInner #givingAppeal img {
    max-width: 100%;
    height: auto;
  }

  #givingInner .details p,
  #givingInner .details a {
    margin: .5vh 0;
  }

  .profileCard.clearfix {
    width: 90%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 30px 30px;
    min-height: 85%;
    height: auto;
    top: 20px;
    position: relative;
    margin: auto;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  .profileCard .details {
    float: left;
    width: 100%;
  }

  .profileCard .details h3,
  .profileCard .details h4 {
    text-align: center;
  }

  .profileCard img {
    width: 60%;
    margin: 20px auto;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0 auto 10px;
    display: flex;
  }

  .profileCard .close {
    display: flex;
    flex-direction: row;
    margin: 0;
    position: absolute;
    top: 10px;
  }

  .profileCard .bio{
    font-size: 12px;
  }
  #givingInner .close {
    right: 30px;
    text-decoration: none;
    float: right;
    position: absolute;
    z-index: 99;
    top: 57px;
  }
  #givingInner .details h3 {
    font-size: 40px;
    text-align: center;
    margin: 10px auto;
    }
    
  #givingInner .details{
    padding-top: 30px ;
  }
  #givingAppeal{
    margin-bottom: 0;
  }
  #givingInner .details, #givingInner .details p{
    text-align: center;
    padding-top: 5px;
    font-size: 14px;
  }
  #givingInner #givingAppeal p {
    font-size: 100%;
    position: absolute;
    text-align: left;
    margin-left: 10px;
    bottom: 0;
    display: block;
    float: left;
    height: auto;
    font-size: 10px;
  }
  #givingInner .details p, #givingInner .details a {
    margin: .3vh 0;
  }
  .wtBtn, #footContact button{
    padding: 2.3vh 2vh !important;
  }
  .blockstats .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .sl-container #content .block {
    min-height: unset;
  }
  .blockstats h3 {
    font-size: 10vw;
    width: 70%;
  }
  .blockstats h3 {
    height: auto;
  }
  .teachers_say  .ccm-image-slider-text p {
    font-family: "NewsGothXConBOLD", sans-serif;
    font-size: 5vw;
    text-transform: uppercase;
    line-height: 1em;
    position: absolute;
    height: auto;
    width: 60vw;
    bottom: 0;
  }
  .teachers_say .ccm-image-slider-title {
    margin-top: 40px;
  }
  .rslides .text-container {
      height: 70vh;
  }
  .rslides_nav{
    top:unset !important;
    bottom: -40px;
  }
  .prog-container {
    max-width: 60%;
    margin: 30px auto;
    position: absolute;
    display: block;
    z-index: 99999;
    width: 50vw;
    left: 0;
    right: 0;
  }
  .progress-bar {
    background-color: rgb(0, 0, 0);
    height: 2px;
  }
  .progress-bar-bg {
    position: absolute ;
    background-color: #ccc;
  }
  #givingInner .details h3 {
    font-size: 60px;
    text-align: left;
    margin: 10px 0;
    }
}

@media only screen and (max-width: 680px) {
  .teachers_say  .ccm-image-slider-text p {
    font-family: "NewsGothXConBOLD", sans-serif;
    font-size: 8vw;
    text-transform: uppercase;
    line-height: 1em;
    position: absolute;
    height: auto;
    width: 50vw;
    bottom: 0;
  }
  .ccm-image-slider-title {
    font-size: 4vw;
  }
  .teachers_say .ccm-image-slider-title {
    margin-top: 40px;
  }
  .rslides .text-container {
      height: 70vh;
  }
}
@media only screen and (max-width: 480px) {
  .teachers_say  .ccm-image-slider-text p {
    font-family: "NewsGothXConBOLD", sans-serif;
    font-size: 9vw;
    text-transform: uppercase;
    line-height: 1em;
    position: absolute;
    height: auto;
    width: 50vw;
    bottom: 0;
  }
  .teachers_say .ccm-image-slider-title {
    margin-top: 40px;
  }
  .rslides .text-container {
      height: 70vh;
  }
}

.overlay {
  width: 100vw;
  margin: auto;
  display: flex;
}

@media screen and (max-width:900px){
  .profileCard .close{
    margin: revert;
    right: 10px;
  }
  .profileCard.clearfix{
    max-width: 333px;
    border-radius:20px;
  }
  .profileCard .details h3, .profileCard .details h4{
    text-align: left;
  }
  .profiles .teamProfile h4{
    font-size: 25px;
    width: 70%;
  }
  .profileCard {
    background: #fff url(images/cardnoise-mobile.jpg) left bottom no-repeat;
    background-size:100%;
    max-height: unset;
  }
  .profileCard img {
    width: 210px;
    height: 210px;
    border: 1px solid gainsboro;
    border-radius: 100% !important;
    margin-top: 20px;
  }
}

/* ------------------------------------------ */
/* chaplaincy Additions*/
/* ------------------------------------------ */

.headline.chaplaincy h1 {
  height: 15vw;
  max-height: 40em;
  max-width: 40em;
  padding: 3vw 0 0 3vw;
}

.headline.chaplaincy p {
  height: 5vw;
  max-width: 18vw;
  padding: 2vw 0 0 3vw;
  font-size: 1vw;
}

.chaplaincy{
  width: 27vw;
  max-width: 40em;
  height: 27vw;
  max-height: 40em;
  padding: 1vw;
   background: #0ab5ef url('images/chaplaincy/turqnoiseSq.jpg');
  background-size: cover;
}

.chaplaincy h1 {
  width: 90%;
}

/* -- Circle image Block - Chaplaincy -- */

.chaplaincycircleimgtext h2,
.chaplaincycircleimgtext h3,
.chaplaincycircleimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.chaplaincycircleimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.chaplaincycircleimg {
  background: url('images/chaplaincy/greenrotatedrectangle.jpg');
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}

.chaplaincycircleimg img {
  width: 41vw;
  height: 41vw;
  border-radius: 100%;
}


@media screen and (max-width: 1200px) {


  .chaplaincycircleimgtext h2,
  .chaplaincycircleimgtext h3,
  .chaplaincycircleimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .chaplaincycircleimgtext p {
    width: 75vw;
  }

  .chaplaincycircleimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .chaplaincycircleimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}
/* -- Circle image Block - Chaplaincy - Why is it Worth It? -- */

.worthitchaplaincycircleimgtext h2,
.worthitchaplaincycircleimgtext h3,
.worthitchaplaincycircleimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.worthitchaplaincycircleimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.worthitchaplaincycircleimg {
  background: url('images/chaplaincy/greenrotatedrectangle.jpg');
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}

.worthitchaplaincycircleimg img {
  width: 41vw;
  height: 41vw;
  border-radius: 100%;
}


@media screen and (max-width: 1200px) {


  .worthitchaplaincycircleimgtext h2,
  .worthitchaplaincycircleimgtext h3,
  .worthitchaplaincycircleimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .worthitchaplaincycircleimgtext p {
    width: 75vw;
  }

  .worthitchaplaincycircleimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .worthitchaplaincycircleimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}
/* -- Square image Block - Chaplaincy -- */

.chaplaincysquareimgtext h2,
.chaplaincysquareimgtext h3,
.chaplaincysquareimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.chaplaincysquareimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.chaplaincysquareimg {
  background: url('images/chaplaincy/greenrotatedrectangle.jpg');
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}

.chaplaincysquareimg img {
  width: 41vw;
  height: 41vw;
  border-radius: 100%;
}


@media screen and (max-width: 1200px) {


  .chaplaincysquareimgtext h2,
  .chaplaincysquareimgtext h3,
  .chaplaincysquareimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .chaplaincysquareimgtext p {
    width: 75vw;
  }

  .chaplaincysquareimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .chaplaincysquareimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}
/* -- Square image Block - Chaplaincy - Why is it Worth It? & Volunteer -- */

.workchaplaincysquareimgtext h2,
.workchaplaincysquareimgtext h3,
.workchaplaincysquareimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.workchaplaincysquareimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.workchaplaincysquareimg {
  /*background: url('images/chaplaincy/greenrotatedrectangle.jpg');*/
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}

.workchaplaincysquareimg img {
  width: 41vw;
  height: 41vw;
  /*border-radius: 100%;*/
}

@media screen and (max-width: 1200px) {


  .workchaplaincysquareimgtext h2,
  .workchaplaincysquareimgtext h3,
  .workchaplaincysquareimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .workchaplaincysquareimgtext p {
    width: 75vw;
  }

  .workchaplaincysquareimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .workchaplaincysquareimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}

/*Volunteer square image*/

.volunteerchaplaincysquareimgtext h2,
.volunteerchaplaincysquareimgtext h3,
.volunteerchaplaincysquareimgtext h4 {
  width: 35vw;
  margin-bottom: 0.4em;
}

.volunteerchaplaincysquareimgtext p {
  font-size: 1.3em;
  width: 30vw;
  float: left;
  clear: none;
}

.volunteerchaplaincysquareimg {
  /*background: url('images/chaplaincy/greenrotatedrectangle.jpg');*/
  background-size: 40vw;
  background-repeat: no-repeat;
  background-position-x: 25vw;
  background-position-y: -1em;
  margin: -22em -13vw 0 0;
  width: 50vw;
  float: right;
  clear: none;
}
.volunteerchaplaincysquareimg img {
  width: 41vw;
  height: 41vw;
  /*border-radius: 100%;*/
}
@media screen and (max-width: 1200px) {


  .volunteerchaplaincysquareimgtext h2,
  .volunteerchaplaincysquareimgtext h3,
  .volunteerchaplaincysquareimgtext h4 {
    width: 75vw;
    font-size: 4.4em;
  }

  .volunteerchaplaincysquareimgtext p {
    width: 75vw;
  }

  .volunteerchaplaincysquareimg {
    width: 99vw;
    height: 85vw;
    margin: 0 -13vw 0 0;
    background-size: 78vw;
    background-position-x: 55vw;
  }

  .volunteerchaplaincysquareimg img {
    width: 75vw;
    height: 75vw;
    margin-top: 0;
    margin-left: 11vw;
  }

}
/*-- Chaplaincy Questions --*/

.questions {
  width: 65vw !important;
}

.questions .gridContainer {
  display: grid;
  grid-template-columns: repeat(3, 33%);
}

.questions .question {
  padding: 1.5vw 3vw;
  background: #F5A68A url('images/chaplaincy/question-BG.jpg');
  background-size: cover;
}

.questions .question .number {
  display: inline-block;
  float: right;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 2.5vw;
  text-align: center;
  padding: 1vw 4vw 3vw 4vw;
  margin: -6.45vw -2vw 0 0;
  color: white;
  background: url('images/optionnumber-semi-circle.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.questions .question h3 {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 1.5vw;
  margin-bottom: 2vw;
  height: 2em;
}

.questions .question h4 {
  margin-top: 2vw;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 3vw;
  text-transform: uppercase;
  height: 8vw;
}

.questions .question ul {
  font-family: 'Livory', serif;
  font-size: 1.3vw;
  margin: 2vw 0 2vw 0;
  list-style-type: none;
  list-style-position: outside;
  width: 87%;
  float: right;
}

.questions .question li {
  padding: 0.7vw 0 0.3vw 0;
  border-bottom: 1px solid white;
}

.questions .question li:before { 
  content: '\2713'; 
  display: inline-block; 
  position: relative; 
  width: 1.6em; 
  height: 1.6em; 
  margin-right: 0.8em; 
  margin-left: -2.4em; 
  padding: 0em 0.4em;
  font-size: 70%; 
  line-height: 1.6em; 
  border: 0.1em solid #000; 
  border-radius: 50%; 
  text-align: center; 
}

@media screen and (max-width: 900px) {

  .questions {
    width: 75vw !important;
    margin-top: 20vw !important;
  }

  .questions .gridContainer {
    display: grid;
  }

  .questions .option {
    padding: 5vw 10vw;
  }

  .questions .question h3 {
    font-size: 6vw;
  }

  .questions .question span {
    font-size: 8vw;
    padding: 3vw 10vw 4vw 10vw;
    margin: -19vw -8vw 0 0;
  }

  .questions .question h4 {
    font-size: 12vw;
    height: 30vw;
  }

  .questions.question ul {
    font-size: 5.2vw;
  }

  .questions .question li {
    padding: 2.8vw 0 1.2vw 0;
    border-bottom: 2px solid white;
  }

  .questions .question li::before {
    height: 4.8vw;
    width: 4.8vw;
    padding-right: 2vw;
  }

}
.circle.green {
  background: url('images/chaplaincy/green-circle.png');
  background-size: cover;
}
.circle.smallCircle.green.offsetLeft {
  z-index: 999;
  position: relative;
}
.circle.slide4Circle {
  background: url('images/chaplaincy/slider4-circle.png');
    background-size: auto;
  background-size: cover;
  width: 30vw;
  height: 30vw;
  display: block;
  float: right;
  position: absolute;
  right: 0;
  z-index: 3;
  border-radius: 100%;
  margin: -13vw -1vw 0 0;
}
.chapcircle {
  background: url('images/chaplaincy/green-circle.png');
    background-size: auto;
  background-size: cover;
  border-radius: 100%;
}
/* End Chaplaincy Additions */

/* Basecamp Additions */

/*-- Activities --*/

.activities {
  width: 90vw !important;
}

.activities .gridContainer {
  display: grid;
  /*grid-template-columns: repeat(4, 25%);*/
    gap: 16px;
    grid-template-columns: repeat(auto-fill,minmax(30vw,1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(30vw,1fr);
    overflow-x: auto;
}

.activities .activity {
  padding: 1.5vw 3vw;
  background: #F5A68A url('images/option-BG.jpg');
  background-size: cover;
  margin: .5vw;
}

.activities .activity .number {
  display: inline-block;
  float: right;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 2.5vw;
  text-align: center;
  padding: 1vw 4vw 3vw 4vw;
  margin: -6.45vw -2vw 0 0;
  color: white;
  /*background: url('images/optionnumber-semi-circle.png');*/
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.activities .activity h3 {
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 2vw;
  /* margin-bottom: 2vw; */
  height: 1.5em;
}
.activities .activity h5 {
  font-size: 1.5vw;
  margin-top: 1vw;
  /* margin-bottom: 2vw; */
 /*height: 1.5em;*/
}


.activities .activity h4 {
  margin-top: 2vw;
  font-family: "NewsGothXConBOLD", sans-serif;
  font-size: 3vw;
  text-transform: uppercase;
  height: 8vw;
}

.activities .activity ul {
  font-family: 'Livory', serif;
  font-size: 1.3vw;
  margin: 2vw 0 2vw 0;
  list-style-type: none;
  list-style-position: outside;
  width: 87%;
  float: right;
}

.activities .activity li {
  padding: 0.7vw 0 0.3vw 0;
  border-bottom: 1px solid white;
}

.activities .activity li:before { 
  content: '\2713'; 
  display: inline-block; 
  position: relative; 
  width: 1.6em; 
  height: 1.6em; 
  margin-right: 0.8em; 
  margin-left: -2.4em; 
  padding: 0em 0.4em;
  font-size: 70%; 
  line-height: 1.6em; 
  border: 0.1em solid #000; 
  border-radius: 50%; 
  text-align: center; 
}

.activity > img {
  width: -webkit-fill-available;
  width:-moz-available;
  height: auto;
}

@media screen and (max-width: 900px) {

  .activities {
    width: 75vw !important;
    margin-top: 20vw !important;
  }

.activities .gridContainer {
  display: grid;
  /*grid-template-columns: repeat(4, 25%);*/
    gap: 16px;
    grid-template-columns: repeat(auto-fill,minmax(50vw,1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(50vw,1fr);
    overflow-x: auto;
}
  .activities .activity {
    padding: 5vw 5vw;
  }

  .activities .activity h3 {
    font-size: 6vw;
  }

  .activities .activity span {
    font-size: 8vw;
    padding: 3vw 10vw 4vw 10vw;
    margin: -19vw -8vw 0 0;
  }

  .activities .activity h4 {
    font-size: 12vw;
    height: 30vw;
  }
  .activities .activity h5 {
    font-size: inherit;
  }
  .activities .activity ul {
    font-size: 5.2vw;
  }

  .activities .activity li {
    padding: 2.8vw 0 1.2vw 0;
    border-bottom: 2px solid white;
  }

  .activities .activity li::before {
    height: 4.8vw;
    width: 4.8vw;
    padding-right: 2vw;
  }
  .options .option ul {
  float: none;
  }
  .options .option .number {
    margin: -19vw -2vw 0 0;
    font-size: 10vw;
    padding: 0p;
  }

  .activity > img {
  width: -webkit-fill-available;
  height: auto;
  }

.activity > img {
  width: -webkit-fill-available;
  width:-moz-available;
  height: auto;
}

.activities h2 {
  margin-left: 5vw;
}

.options .option ul {
  float: none;
}

}
/*----------------------------------------------------------------*/
/*   CHAPLAINCY B U T T O N                                       */
/*----------------------------------------------------------------*/

.btn-chap {
display: inline-block;
border: black 1px solid;
border-radius: 3em;
padding: 0.7em 1em 0.7em 1em !important;
color: white !important;
background-color: black !important;
text-decoration: none;
cursor: pointer !important;
text-align: center; 
    }

    .btn-chap:hover {
  text-decoration: none;
  background: white !important;
  color: black !important;
}

    .btnLarge {
  font-size: 250%;
  color: black !important;
}

    .btnMed {
  font-size: 180%;
}

@media screen and (max-width: 1000px) {

  .btnLarge {
    width: 80%;
    text-align: center;
  }

}

@media screen and (max-width: 620px) {

  .btnLarge {
    width: 58vw;
    font-size: 5vw;
  }

  .btnMed {
    font-size: 4vw;
  }

}


p .btn-chap {
  font-size: 0.9em;
  /*float: left;*/
  clear: both;
  margin: 1em 0 0em 0;
}



/*----------------------------------------------------------------*/
/*   EVENTS				                                          */
/*----------------------------------------------------------------*/

.ccm-block-event-wrapper {
box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
padding-bottom: 20px;
Max-width:30em;
}

.ccm-block-event-image img {
	width: 100%;
	Height: auto;
}

.ccm-block-event-event
{
    font-family: "NewsGothXConBOLD", sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

.ccm-block-event-wrapper {
	background-color: white;

}
.ccm-block-event-text {
	margin-left: 0.3em;
	margin-right: 03.em;
}

/* -- Events Feed Page --*/

.ccm-block-event-description {
    font-family: livory;

}

.eventsFeed .eventItems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21em, 1fr));
  margin-bottom: 8em;
  grid-gap: 3em;
}

@media screen and (max-width: 1200px) {

}

.eventsFeed h3 {
  color: #00B1EB;
  width: 100%;
  margin-bottom: 1em;
  width: 100%;
  padding-bottom: 0.2em;
  border-bottom: 1px solid #00B1EB;
}

.eventsFeed .eventfeedItem {
  float: left;
  overflow: hidden;
  display: -webkit-box;
}

.eventsFeed .eventfeedItem h4 {
  font-family: "Livory", serif;
  font-size: 2em;
  color: #00B1EB;
  padding-bottom: 0.4em;
}

.eventsFeed .eventeventItems p {
  font-size: 1em;
  line-height: 1.8em;
}

/*----------------------------------------------------------------*/
/*   EVENTS B U T T O N                                       */
/*----------------------------------------------------------------*/

.event-link-button {
    padding-top: 0.75em;
}

.btn-event {
display: inline-block;
border: #1db1ed 1px solid;
border-radius: 3em;
padding: 0.7em 1em 0.7em 1em !important;
color: white !important;
background-color: #1db1ed !important;
text-decoration: none;
cursor: pointer !important;
text-align: center; 
    }

    .btn-event:hover {
  text-decoration: none;
  background: white !important;
  color: #1db1ed !important;
}

    .btnLarge {
  font-size: 250%;
  color: black !important;
}

    .btnMed {
  font-size: 180%;
}

@media screen and (max-width: 1000px) {

  .btnLarge {
    width: 80%;
    text-align: center;
  }

}

@media screen and (max-width: 620px) {

  .btnLarge {
    width: 58vw;
    font-size: 5vw;
  }

  .btnMed {
    font-size: 4vw;
  }

}


p .btn-event {
  font-size: 0.9em;
  /*float: left;*/
  clear: both;
  margin: 1em 0 0em 0;
}


/*----------------------------------------------------------------*/
/*   Labels of Hope                               */
/*----------------------------------------------------------------*/


.block.editorial.LOH {
    background: #f4ede3;
}

.LOH-PinkCircle {
    position: relative;
    background: url(images/LOH/green-circle-eclipse-right.png) top left;
    background-size: contain;
    background-repeat: no-repeat;
    float: right;
    width: 34vw;
    height: 45vw;
    margin: -30vw 0 -18vw 0;
}

/*-- LOH Fade + Card (LOH Intro) --*/

.LOHblueBlock {
  background: url('images/whitefade-down.png'), url('images/LOH/LOHPink-hills.png') left top, center top;
  background-repeat: repeat-x, no-repeat;
  background-size: 10vw, cover;
  padding: 5em 0 8em 0;
  margin-bottom: 0 !important;
}

.LOHinfoCard {
  position: relative;
  background-color: white;
  width: 63vw;
  padding: 4vw;
  border-radius: 20px;
  margin: 10vw 0 10vw 0;
  z-index: 1;
}
.LOHinfoCard h3 {
  font-family: "LivoryStd";
  text-transform: unset;
}
.LOHinfoCard h4,
h5 {
  font-family: "NewsGothStd";
  text-transform: unset;
  font-size: 130%;
  font-weight: 100;
}

.LOHinfoCard p {
  font-family: "LivoryStd";
  width: 30vw;
  margin: 2em 0 0 0;
  padding: 0;
}

.LOHinfoCard .btn {
  margin-top: -2.5em;
}

@media screen and (max-width: 1500px) {

  .LOHinfoCard p {
    width: 100%;
    margin-bottom: 5em;
  }

}

@media screen and (max-width: 1000px) {

  .LOHinfoCard {
    width: 100%;
    padding: 10vw;
  }

  .LOHinfoCard .btn {
    width: 100%;
    text-align: center;
  }

}

/*-- LOH School Profiles --*/

.block.LOHschools {
  color: white;
  background: #f5d65e;
  background-size: 100vw;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 5em 0 40em 0;
  margin-bottom: -40em;
}

#team h2 {
  margin-top: 2vw;
}

.profiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 4em;
  row-gap: 6em;
}

@media screen and (max-width: 1200px) {

  .profiles {
    grid-auto-columns: 95%;
    grid-auto-flow: column;
    overflow-x: auto;
    margin-bottom: 8em;
  }

}

.profiles .LOHprofileSmall {
  float: left;
}

.profiles .LOHteamProfile a {
  color: black;
  text-decoration: none;
}

.profiles .LOHteamProfile a:hover>h3 {
 /*color: white;*/ 
  text-decoration: none;
}

.profiles .LOHteamProfile img {
  border-radius: 100%;
}

.profiles .LOHprofileSmall img {
  width: 16em;
  height: 16em;
  background: url('images/bluenoise.jpg');
  margin-bottom: -3em;

}

.profiles .LOHteamProfile h3 {
  font-family: "LivoryStd";
  text-transform: unset;
  font-size: 2em;
  width: 10%;
}

.profiles .LOHteamProfile h4 {
  font-family: "NewsGothStd", serif;
  font-weight: normal;
  margin-top: 0.5em;
}

.LOHprofileCard {
  position: relative;
  color: black;
  width: 90vw;
  max-width: 1200px;
  max-height: 500px;
  margin: 15vh auto;
  padding: 5em;
  background: #fff url('images/cardnoise.jpg') left top no-repeat;
  background-size: cover;
}

.LOHprofileCard img {
  background: url(images/blacknoise.png);
  width: 275px;
  float: left;
  margin-right: 3em;
  height: 275px;
  object-fit: cover;
  display: flex;
  align-self: center;
}

.LOHprofileCard .details {
  float: left;
  width: 60%;
}

.LOHprofileCard .details>h3 {
  width: 100%
}

.LOHprofileCard .bio {
  margin-top: 2em;
  font-size: 100%;
}

.LOHprofileCard .close {
  transition: all 200ms;
  font-size: 3em;
  font-weight: bold;
  text-decoration: none;
  color: #000 !important;
  float: right;
  margin: -1em -1em 0 0;
}

.LOHprofileCard .close:hover {
  color: grey !important;
}

.LOHprofileCard .bio {
  max-height: 30%;
  overflow: auto;
  color: black
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  justify-content: center;
}

#navBar .overlay {
  background: white;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 700px) {
  .block.blackNoise {
    padding-bottom: 10em;
    margin-bottom: 0;
  }
}

.LOHcircle {
  background: url('images/LOH/Navy_01.png');
  background-size: cover;
}

.LOHcircle h3 {
  Font-family: "LivoryStd";
  text-transform: unset;
  color: #fff;
  padding: 3.5em 1em 0.5em 1.5em;
  font-size: 2.5vw;
  width: 15vw;
  height: 12vw;
}

/*-- Full Width Split Spread (LOH) --*/



.LOH.fullWidthSplit {
  width: 100%;
  background: #90c3b5;
  background-repeat: no-repeat;
  background-size: cover;
}

.fullWidthSplit .section.left {
  width: 40%;
}

.fullWidthSplit .section.right {
  width: 60%;
  min-height: 30vw;
  padding: 18vw 18vw 0 18vw;
}

.fullWidthSplit .section img {
  width: 100% !important;
}


@media screen and (max-width: 1450px) {

  .fullWidthSplit .section.right {
    padding-top: 10vw;
  }

}

.fullWidthSplit .section p {
  margin-bottom: 2em;
}

.fullWidthSplit .section .btn {
  float: left;
}

@media screen and (max-width: 1200px) {

  .fullWidthSplit .section {
    width: 100% !important;
  }

  .fullWidthSplit .section.right {
    background: #90c3b5;
    background-size: cover;
    background-position-y: -100px;
    background-repeat: no-repeat;
    float: left !important;
    width: 100%;
    margin-top: -1em;
    padding-top: 20vw;
    padding-bottom: 20vw;
  }

  .fullWidthSplit .section p {
    width: 72%;
  }


}

/*-- LOH Form --*/
#lohform form input,
#lohform form textarea {
  width: 80%!important;
}

#lohform {
 /* width: 100vw;*/
  color: black;
  padding: 5em 0 3em 0;
  background-size: cover;
  background-position: center center;
}

#lohform a {
  color: black;
}

#lohform a:hover {
  color: grey;
}

/* #lohform form, #GiftAidForm { 
  margin-bottom: 7em;
}*/


#lohform form label,
#lohform form input, {
  display: block !important;
  margin-bottom: 0.5em;
  line-height: 1.5;
}


#lohform form input,
#lohform form textarea 
 {
  /* width: 33%; */
  height: 2em;
  color: black;
  font-size: 110%;
  background: transparent;
  border: none;
  border-bottom: solid 1px black;
  margin-bottom: 2.5em;
}

@media screen and (max-width: 1400px) {

  #lohform form input,
  #lohform form textarea {
    width: 60%;
  }

}

@media screen and (max-width: 800px) {

  #lohform form input,
  #lohform form textarea {
    width: 80%;
  }

}

@media screen and (max-width: 414px) {

  #lohform form input,
  #lohform form textarea {
    width: 100%;
  }

}

/*#lohform form input:focus {
  outline: none;
}
*/
#lohform form button {
  font-size: 1em;
  background: white !important;
  color: black !important;
  border: 1px solid black;
}

#lohform form button:hover {
  font-size: 1em;
  background: none !important;
  color: white !important;
  border: 1px solid white;
  cursor: pointer;
}

#lohform .ccm-error {
  margin: 0 0 1em 0.5em;
  color: red;
  text-decoration: underline;
}

#lohform .ccm-error li {
  padding-bottom: 1em;
}

#lohform .alert-success {
  width: 33%;
  line-height: 1.2em;
  margin-bottom: 3.5em;
}

#lohform form fieldset span {
    display: none;
}


.LOH.innerBlock.clearfix {
    display: flow-root;
}
}