body { background:#f4fAf9; letter-spacing: 0.02em; }

.normal { margin:0!important; width:100%!important; overflow-x: hidden;background-color:#fff; }
.inner.row .col-12-medium { padding: 0; }

a:focus, button:focus {outline: 3px solid #ffc848!important;}
.alert {margin:2rem 0;}

h1, h2, h3, h4, h5, h6 { font-weight:600; letter-spacing:0.03em;text-transform: initial;}
p {font-size:1rem;line-height:1.9em;}

.row { margin-left:0;margin-right:0;}
.row > * { padding: 0; }
.wrapper {padding:0;}
.padding-right-30 {padding-right:30px!important;}
.margin-bottom-30 {margin-bottom:30px!important;}
.margin-bottom-60 {margin-bottom:60px!important;}

body.landing #page-wrapper { background-color:#f3f6fa; }
body.is-menu-visible #page-wrapper { opacity: 0.8; }

.list--skip-links { z-index:11000;}
.list--back-to-top .list__link, .list--skip-links .list__link { padding: 0.75rem 1.5rem 1rem;}

button.primary, .button.primary { color:#fff;background-color:#007eb4;text-transform:uppercase;letter-spacing: 0.1em;}
button.primary:hover, .button.primary:hover, .button--secondary:hover { background-color:#016b98!important; }
.button--secondary { font-size:0.9em;color:#fff!important;background-color:#007eb4;text-transform:uppercase;letter-spacing: 0.1em;margin: 40px 0 0 40px;}

.button {text-transform: initial;}

.img-border { padding: 0.5rem; margin-bottom:20px;border: 1px solid #dee2e6; max-width: 100%; height: auto;}

#header { background-color:#f4fAf9;padding:25px 15px 25px 15px;height:6.5em; box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3); -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3); -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3); }
#header.alt {background-color: rgba(244, 250, 249, 1);}
#header.alt .logo, #header.alt h1 { opacity: 1; }
#header.alt h1, #header h1 {display:none!important;}
#header .logo .symbol img { height: 3.8em; }
#header .logo > * , #header nav > ul > li > a { color:#000;}
#header nav > ul > li > a {padding:0 25px 0 0;}
#header nav > ul > li:first-child {margin-top:45px;}
#header nav > ul > li > a.menuToggle:after { background-position:center center; width:2.5em; height:2.5em; background-color:#000;display:none;}
#header nav > ul > li > a > span { padding: 15px; position: relative;top:-7px;}
#header .fa-search {font-size:1.6em;position:relative;top:-3px;}

.visually-hidden {display:none;}
#menu { background-color:rgba(1, 90, 35, 1);padding: 4em 2em;}
#menu h2:nth-of-type(1), #menu h2:nth-of-type(2) { display: none; }
#menu ul > li {border-top: solid 1px rgb(1, 113, 44);}
#menu ul > li > a {font-size:0.7em;}
.mobile-search #searchbtn {margin-top:1rem;font-size:0.7em;}

#banner {height:70vh;}
#banner .more {display:none;}
#banner h2 {top:25px;}
#banner:after { background:rgba(0, 0, 0, 0); }
.list--breadcrumb, .list--breadcrumb .list__item:nth-child(2) {display:none;}
.wrapper.style5 .wrapper {padding:0;}

#main > header { background-attachment: inherit; padding: 11em 0 11em 0; }
#main > header h2 {display:none;}

.widget-row:last-child {margin-bottom:0;}
.wrapper.style5 {background-color: transparent;padding: 2em 5em 7em 5em;}

.wrapper.style5 header.major {margin:3.5em 0 2em 0;}
.wrapper.style5 header.major h2 { color:#0A7B35;}
.wrapper.style5 header.major p {font-size:1em;}

#two .spotlight:nth-child(1) { background-color: #0A7B35;}
#two .spotlight:nth-child(2) { background-color: #007350;}
#two .spotlight:nth-child(3) { background-color: #517655;}
#two .spotlight .image {width:35%;}
#two .spotlight .content {color:#fff;max-width:63%;width:65%;padding:3em 4em 3em 4em;}
#two .spotlight h3 {font-size:1.3em;color:#fff;}
#two .spotlight p {font-size:1em;line-height:1.8em;}
#two .spotlight .button.fit {font-size:0.7em;width:initial;color:#fff;text-transform:uppercase;}

#three.wrapper.style3 { padding: 2.5em 0; background:#00386a; }
#three.wrapper.style3 .left-col { width:45%;padding-right:60px;}
#three.wrapper.style3 .left-col img {height:200px;}
#three.wrapper.style3 .right-col { width:55%; }
#three.wrapper.style3 h3 { font-size:1.5em; color:#fff;margin-top:0.3em;} 
#three.wrapper.style3 h3:after {border-bottom:0;}
#three.wrapper.style3 button.primary, #three.wrapper.style3 .button.primary { color:#fff;text-transform:uppercase;letter-spacing: 0.1em;border:1px solid #fff;margin-top:0.5em; }
#three.wrapper.style3 button.primary:hover, #three.wrapper.style3 .button.primary:hover { }

.wrapper > .inner {width:1440px;margin:0 auto;}
.bg-main {background-color:#f4fAf9!important;padding:0!important;}
.bg-content.inner.row > .col-12-medium {padding-left: 40px;}

#one .bg-content {background-color:#fff;padding:40px 50px 80px 0;}
#one .bg-content h2, #one .bg-content h3,  #one .bg-content h4, #one .bg-content h5 { color:#0A7B35; font-weight: 600;}
#one .bg-content h2 {font-size:1.6em;}
#one .bg-content h2.page-subheading {display:none;}
#one .bg-content h3 {font-size:1.2em;}
#one .bg-content h4 {font-size:1em;}
#one .bg-content a {font-size:1rem;color:#096F48;}
#one .bg-content ul {list-style:square;line-height:1.8em;font-size: 1rem;}
#one .bg-content hr { border-color: #eee;}
#one .bg-content .contact-info {background-color:#f0f9f7; margin: 0 0 1.5rem; padding: 1.5rem 1.875rem;min-height: 5.5rem;border-radius: 5px;}
#one .bg-content .contact-info p {margin:0;}
#one .bg-content .date {margin:0;}
#one .bg-content img.news {max-width:35%;}
#one .bg-content h2.nav__heading {display:none;}
#one .bg-content .nav--pages-in {margin-top:30px;}
#one .bg-content .nav--pages-in:before {content: "Latest News";color:#0A7B35;font-size:1.6em;font-weight:600;}
#one .bg-content .nav--pages-in .nav__list {font-size:1rem;margin:2em 0 4em 0;}
#one .bg-content ol.nav__list {list-style:none;padding-left:0;}
#one .bg-content li.list__item.is-active {color:#096F48;font-weight:600;}
#one .bg-content .nav--pages-in .list__item { border-bottom: 1px solid #e0e0e0; margin: 0; padding: .75rem 0 .75rem 0;}
#one .bg-content .pagination ul.icons {padding:0!important;margin:0!important;}
#one .bg-content .button.disabled {font-size:inherit;}

#one.wrapper.style5 table {background-color:#fff;margin:3em 0 3em 0;}
#one.wrapper.style5 table th {font-size:1.1em;}
#one.wrapper.style5 table tbody tr {border-color: #fff; border:solid 4px #fff;}
#one.wrapper.style5 table tbody tr:nth-child(2n + 1) {background-color:#dfefec;}
#one.wrapper.style5 table h2 {font-size:1.1em;}
#one.wrapper.style5 table h3 {font-size:1em;}
#one.wrapper.style5 table a {color:#096F48;}
#one.wrapper.style5 table ul {list-style:square;line-height:1.8em;font-size: 1rem;}

#one.wrapper.style5 .boxed {background-color: #fff;padding:0 30px 30px 30px;}
#one.wrapper.style5 .row.gtr-uniform {margin-top:0;}
#one.wrapper.style5 h2.form__heading { color: #0A7B35;}
#one.wrapper.style5 ul.icons, #one.wrapper.style5 ul.list--record  {background-color:#fff;padding:40px;margin-top:40px;}
#one.wrapper.style5 ul.list--record {list-style:square;line-height:1.8em;font-size: 1rem;}
#one.wrapper.style5 ul.list--record a {color:#096F48;}
#one.wrapper.style5 ul.icons li {padding:0 1em 1.5em 0;}
#one.wrapper.style5 ul.icons .button--secondary { font-size:initial;color:#fff!important;background-color:#007eb4;text-transform:uppercase;margin:0;letter-spacing:initial;box-shadow:none;}
#one.wrapper.style5 ul.icons .button--secondary:hover { background-color:#016b98!important; }
#one.wrapper.style5 .button.disabled {border:1px solid #ccc;box-shadow:none;}

.sidebar__section, .supplement { clear: both; float: left; margin: 3rem 0 0; width: 100%; }
.sidebar__heading, .supplement__heading { border-top: 3px solid #007eb4; }
h2.sidebar__heading, h2.supplement__heading { color:#007eb4!important; font-size: 1.1em!important; font-weight: 600; margin: 0 0 1rem; padding-top: 1rem; text-transform: uppercase!important; }
.supplement--contact .supplement__subheading, .supplement--contact .meta--telephone, .supplement--contact .meta--fax, .supplement--contact .meta--email, .supplement--contact .meta--address, .supplement--contact .list--sub-links .list__link {
   position: relative; }
.supplement--contact .supplement__subheading { margin-bottom: .75rem;display:none; }
.supplement__subheading { font-size: 0.9em;text-transform: none;font-weight:600; }
.supplement--contact .meta { margin: 0 0 .3rem;}
.meta--address, .meta--telephone {text-transform: none;}
.fa-user, .fa-map-marker, .fa-phone { font-size: 1.4em; margin-right: 0.7rem;}
#one .sidebar__section ul, #one .supplement ul {list-style:none;line-height: 1.9em;padding:0;}
#one .sidebar__section ul li, #one .supplement ul li {padding-left:0;}
#one .sidebar__section a, #one .supplement a {font-size:1em!important;} 

h2.sidebar__heading:first-child, #one .sidebar__section ul {display:none;}

#footer {padding: 2em 1em 1em 0;}
#footer form, #footer h2 {display:none;}
#footer ul  {list-style:none;margin: 0 auto;width:100%;padding-left:0;}
#footer ul li {display:inline-block;padding-left:0.8em;}
#footer ul li a {font-size:0.7em;}
#footer .icons {font-size:1.7em;margin-bottom:0.5em;display:none;}
#footer ul.icons li {padding=left:0.1em;}
#footer .copyright {color:#fff;margin-top:1em;}
#footer .copyright li:last-child { display:none;}

body.landing #footer, body.is-mobile.landing #footer, #footer { background-color:#015a23!important; }

.go-to-top { position: fixed; bottom: 25px; right: 25px; display: none;z-index:999; }
.btn-top { cursor:pointer;color: #fff!important; background-color:#007eb4; display: inline-block; font-weight: 400;white-space: nowrap;vertical-align: middle;border: 0;padding: .5rem 1rem;font-size: 1.5em;
    line-height: 1.5; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-user-select: none;
    -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn-top:hover {background-color:#016b98;}

@media screen and (max-width: 1470px) { .wrapper > .inner { width: 90%; } #two .spotlight .image {width:46%;} #two .spotlight .content {width:55%;} }

@media screen and (max-width: 1170px) { .wrapper.style5 { padding: 2em 2em 7em 2em; } #two .spotlight .content {padding:1.5em 4em 1.5em 4em ;} }

@media screen and (max-width: 1152px) { #menu ul > li > a {font-size:0.8em;} .row > .col-12-medium { width: 100%; } }

@media screen and (max-width: 980px) { #banner {height:50vh;} .wrapper.style5 {padding:0;} .wrapper.style5 header.major { margin: 3em;}
.wrapper.style5 header.major h2 {font-size:1.3em;}
.wrapper > .inner, #two .spotlight .image, #two .spotlight .content { width: 100%;max-width:inherit;} 
#one .bg-content img.news {max-width:100%;}
#two .spotlight .content {padding:3em 4em 3em 4em;}
#two .spotlight .button.fit { font-size:0.9em;}
#three.wrapper.style3 .left-col { width:100%;padding-right:0;text-align: center;} 
#three.wrapper.style3 .right-col { width:100%;text-align: center; } 
#three.wrapper.style3 .left-col img {height:275px;margin-bottom:30px;} 
.supplement--contact {margin-bottom:3em;} 
.mt-1 {order:2;} .mt-2 {order:1;} 
}

@media screen and (min-width: 760px) { .widget-row {  margin-bottom:3.5rem; } }

@media screen and (max-width: 736px) { #header {height:7em;} #header nav > ul > li:first-child {margin-top:30px;} #header nav > ul > li > a.menuToggle span {display: inline-block;} 
#header nav > ul > li > a.menuToggle {padding:0;} #banner {height:60vh;} #banner h2 {font-size:1.6em;} }

@media screen and (max-width: 576px) { .bg-content.inner.row > .col-12-medium { padding-left: 25px; } #one .sidebar__section a, #one .supplement a, #one .supplement--contact a {font-size:0.9em!important;line-height:2em;} }


/** LIGHTBOX CSS

 * 1. Hide the overlay by default and show it when it is targeted or active.
 * 2. Make the overlay full width and height.
 */
.lightbox a {border-bottom: 0;}
.lightbox a:focus {outline:0;}
.lightbox .row > * { padding-right: 1em!important; }

.lightbox__overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  /* [1] */
  position: fixed;
  /* [2] */
  top: 0;
  /* [2] */
  right: 0;
  /* [2] */
  bottom: 0;
  /* [2] */
  left: 0;
  /* [2] */
  z-index: 15000;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(0, 0, 0, 0.9); }
  .lightbox__overlay:target, .lightbox__overlay.is-active {
    visibility: visible;
    /* [1] */ }

/**
 * 1. Add a scrollbar if the content doesn't fit vertically.
 * 2. Inherit the animation name (e.g. animate.css class) from the parent.
 */
.lightbox__content {
  max-height: 100%;
  /* [1] */
  overflow: auto;
  /* [1] */ }
  :target > .lightbox__content,
  .is-active > .lightbox__content {
    -webkit-animation: 0.4s ease-out 0.2s both;
            animation: 0.4s ease-out 0.2s both;
    -webkit-animation-name: inherit;
            animation-name: inherit;
    /* [2] */ }

.lightbox__html {
  padding: 2em;
  max-width: 42em;
  background-color: #fff; }

/**
 * 1. Prevent the full sized image from loading initially.
 * 2. Trigger loading of the full sized image when the lightbox is opened.
 */
.lightbox__figure {
  display: none;
  /* [1] */
  margin: 1.5em; }
  :target > .lightbox__figure,
  .is-active > .lightbox__figure {
    display: block;
    /* [2] */ }
  .lightbox__figure img {
    display: block;
    height: 0; }

.lightbox__figcaption {
  color: #fff; }

/**
 * 1. Make the image container responsive.
 * 2. Scale the background image to match the size of the image container.
 */
.lightbox__image {
  max-width: 100%;
  /* [1] */
  background-size: 100%;
  /* [2] */ 
  width:1000px;
  padding-top:56.25%;
}

/**
 * 1. Make the icons as big as the control element.
 * 2. Hide the control text visually, but have it available for screen readers.
 * 3. Make the control links readable depending on the overlay color.
 */
.lightbox__control {
  position: absolute;
  width: 3em;
  height: 3em;
  background-position: center center;
  /* [1] */
  background-size: cover;
  /* [1] */
  text-indent: -999em;
  /* [2] */ }

.lightbox__close {
  top: 1em;
  right: 1em;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21.7%2010.3c-0.4-0.4-1-0.4-1.4%200l-4.3%204.3-4.2-4.2c-0.4-0.4-1-0.4-1.4%200-0.4%200.4-0.4%201%200%201.4l4.2%204.2-4.3%204.3c-0.4%200.4-0.4%201%200%201.4%200.4%200.4%201%200.4%201.4%200l4.3-4.3%204.2%204.2c0.4%200.4%201%200.4%201.4%200%200.4-0.4%200.4-1%200-1.4l-4.2-4.2%204.3-4.3C22.1%2011.3%2022.1%2010.7%2021.7%2010.3zM16%200C7.2%200%200%207.2%200%2016s7.2%2016%2016%2016c8.8%200%2016-7.2%2016-16S24.8%200%2016%200zM16%2030C8.3%2030%202%2023.7%202%2016S8.3%202%2016%202s14%206.3%2014%2014S23.7%2030%2016%2030z%22%2F%3E%3C%2Fsvg%3E"); }

/**
 * 1. Rotate the control element so it is possible to use the same icon for
 *    prev and next.
 */
.lightbox__prev {
  left: 2em;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  /* [1] */ }

.lightbox__next {
  right: 2em; }

/**
 * 1. Move the untarget anchor to the top of the screen to prevent "jumping".
 */
.lightbox__untarget {
  position: fixed;
  /* [1] */
  top: 0;
  /* [1] */ }

/**
 * 1. Vertically center the prev / next controls.
 */
.lightbox__prev,
.lightbox__next {
  top: 50%;
  /* [1] */
  margin-top: -1.5em;
  /* [1] */
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2244.1%22%20height%3D%2294.7%22%20viewBox%3D%220%200%2044.1%2094.7%22%20enable-background%3D%22new%200%200%2044.088%2094.67%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M44.1%2047.3L1.5%2094.7%200%2093.3l41.4-46L0%201.3%201.5%200%2044.1%2047.3z%22%2F%3E%3C%2Fsvg%3E"); }
  .lightbox__prev:hover, .lightbox__prev:focus,
  .lightbox__next:hover,
  .lightbox__next:focus {
    opacity: 1; }


@media screen and (max-width: 980px) { .lightbox__prev, .lightbox__next { background-color:#000;} }
@media screen and (max-width: 670px) { .lightbox__image { padding-top:53.25%; } }  


/*/////mobile menu ///////*/

/*a.list__link:focus {
    outline: -webkit-focus-ring-color auto 1px!important;
}*/

a:focus, button:focus {outline: 3px solid #ffc848!important;}

/*/////sitewide message////////*/

.box {
    border-radius: 3px;
    border: solid 2px #fff;
     margin-bottom: 0em; 
    padding: 1.5em;
    margin-top: 2em;
    background: #0a7b35;
}

/*///////////additional styling needed to allow for social media icons alomg top/////////////////*/

#header.alt {
    background-color: rgba(244, 250, 249, 1);
    margin-top: 1.5em;
}

.box {
    margin-top: 3em;
}

.fa-4x {
    font-size: 1.5em;
    color: #000;
    float: right;
margin-right: 0.5em;
}


.footer.message {
    background: rgba(244, 250, 249, 1);
    position: fixed;
    width: -webkit-fill-available;
z-index: 9999;
}

header#header {
    height: 5em;
    padding-top: 0.5em;
    /* padding-bottom: 0em; */
}

.box {
    margin-top: 2em;
}

#header {
margin-top: 1.5em;
}

footer#footer:before {
    content: url(https://www.heartcommunityrail.org.uk/heart-of-england-crp/images/CRP_Accreditation_Logo_202__22_transparent_173px.png);
}

/*////homepage specific////*/

.box {
margin-top: 5em;
}