@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-LightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-BlackItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


@font-face {
    font-family: 'Arapey';
    src: url('/fonts/Arapey-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arapey';
    src: url('/fonts/Arapey-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}


@font-face {
    font-family: 'Georgia';
    src: url('/fonts/georgia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Georgia';
    src: url('/fonts/georgiab.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Georgia';
    src: url('/fonts/georgiai.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Georgia';
    src: url('/fonts/georgiaz.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-regular.eot');
    src: url('/fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-regular.woff') format('woff'),
         url('/fonts/opensans-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-bold.eot');
    src: url('/fonts/opensans-bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-bold.woff') format('woff'),
         url('/fonts/opensans-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-italic.eot');
    src: url('/fonts/opensans-italic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-italic.ttf') format('truetype'),
         url('/fonts/opensans-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-bolditalic.eot');
    src: url('/fonts/opensans-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-bolditalic.ttf') format('truetype'),
         url('/fonts/opensans-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;

}


@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-light.eot');
    src: url('/fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-light.ttf') format('truetype'),
         url('/fonts/opensans-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/opensans-lightitalic.eot');
    src: url('/fonts/opensans-lightitalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/opensans-lightitalic.ttf') format('truetype'),
         url('/fonts/opensans-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;

}

.print {
     display: none;
}

body {
    background: none repeat scroll 0 0 #ECEFF1;
    font-family: Roboto,OpenSans,sans-serif,Helvetica;
    font-size: 16px;
    margin: 0;
    padding: 0;
}


select::-webkit-scrollbar-thumb {
  background-color: #CCCCCC;
  border-radius: 8px; 
}

select::-webkit-scrollbar {
  width:10px;
}
select::-webkit-scrollbar-track {
  background: #FEFEFE;
  border: solid 1px #CCC;
}
input:focus {
   outline:none;
}

.noScroll {
    overflow:hidden;
}

.displayNone {
    display:none;
}

h1 {
  font-size: 22px;
}
h2 {
  font-size: 18px;
}

h3 {
  font-size: 17px;
}

h4 {
  font-size: 15px;
}

a {
    text-decoration:none;
    color: #0277BD;
}
a:focus {
    outline:0;
}

.textRight {
    text-align:right;
}

.textBold {
    font-weight: bold;
}

.textItalic {
    font-style: italic;
}
.text10 {
    font-size: 10px;
}
audio {
   outline:none;
}
div.toosmall {
   display:none;
}
div.errFullPage {
   height: calc(100vh - 309px);
   margin: 0 100px;
}
div.maintopmenu div.topmenuitemscontainer {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    z-index: 50;
    display:none; 
    background:transparent;
    padding-top: 11px;
}

div.topmenufiller {
   width:100%;
   height: 17px;
}

div.maintopmenu a {
   color: #000000;
}

div.theMain {
    margin: 25px auto;
    max-width: 1080px;
    padding-bottom: 20px;
    min-height: calc(100vh - 364px);
}

div.topmenuitems {
    width: 100%;
    background-color: #1B2F43;
    padding-top: 30px;
    padding-bottom: 40px;
    margin-top: 33px;
}

div.topmenuitems a {
    color: #ffffff;
    font-size: 14px;
    padding: 15px;
}  

div.maintopmenu:hover {
    border-bottom: 3px solid #1B2F43;
}
 
div.maintopmenu:hover > div.topmenuitemscontainer {
/*   display: block; */
}

div.header.desktop {
    width:100%;
    background-color: #FFFFFF;
}

div.header.mobile {
    width: 100%;
    height: 75px;
}


div.header.fixedouter {
    width:100%;
    height: 75px;
    background-color:#ffffff;
}

div.header.fixedinner {
    width:100%;
    position:fixed;
    top: 0;
    left: 0;
    height: 75px;
    background-color:#ffffff;
    z-index: 1000;
}

div.logotitlefillertop {
    width: 100%;
    height: 30px;
    padding-top: 30px;
}

div.logotitlefillerbottom {
    width: 100%;
    height: 45px;
    padding-bottom: 5px;
}

div.logotitlecontainer {
    padding: 0;
}
div.logotitle {
    width: 530px;
    margin-right: 0;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 60;

}

img.logo {
      width: 65px;
}

div.logo {
    float:left;
    margin-left:20px;
}

div.title {
    font-family:Arapey;
    margin-left: 95px;
    margin-top: 15px;
    font-size: 30px;
    color: #01579b;
    padding: 10px 0 0;
}

div.title a {
    color: #01579b;
}

div.topmenulinks {
    position:absolute;
    top:20px;
    left: 550px;
    width: calc(100% - 590px);
}



div.toplinks {
    margin-left:33px;
}

a.toplinks {
    font-size:9px;
    font-weight:bold;
    margin: 0 21px;
    color: #0277BD;
}
a.toplinks:first-child {
    margin-left:8px;
}


.siteSearch::-ms-input-placeholder  {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
    color #AAAAAA;
}
.siteSearch::-webkit-input-placeholder  {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
    color #AAAAAA;
}
.siteSearch:-moz-placeholder {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
    color #AAAAAA;
}
.siteSearch::-moz-placeholder {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
    color #AAAAAA;
}
.siteSearch:-ms-input-placeholder {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
    font-size:14px;
    font-style:normal;
    color #AAAAAA;
}
.siteSearch::placeholder {
    color: #AAAAAA;
    font-size:14px;
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 95% 50% #FFF;
}

div.siteSearch {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 0 0  0 160px; 
    padding: 0;
}

input.siteSearch {
    background: none repeat scroll 0 0 #FFFFFF;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: solid 2px #BBBBBB;
    color: #888888;
    font-size: 16px;
    height: 30px;
    margin: 0;
    padding: 0 0 0 10px;
    width: calc(100% - 10px);
    max-width: 250px;
}

form[name="siteSearch2"] input.siteSearch {
    margin-top: 10px;
}

/*
.siteSearchPrompt {
    color: #909090;
    display: none;
    font-size: 14px;
    font-style: italic;
}
*/
.churchSearchFP::placeholder {
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    height: 50px;
    vertical-align: baseline;
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 5% 50% transparent;
}
.churchSearchFP::-webkit-input-placeholder  {
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 5% 0% transparent;
    color #FFFFFF;
}
.churchSearchFP::-ms-input-placeholder  {
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 5% 50% #01579B;
    color #FFFFFF;
}
.churchSearchFP:-moz-placeholder {
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 15% 20% #01579B;
    vertical-align: top;
    color #FFFFFF;
}
.churchSearchFP::-moz-placeholder {
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 5% 20% #01579B;
    vertical-align: top;
    color #FF0000;
}
.churchSearchFP:-ms-input-placeholder {
    background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 5% 0% #01579B;
    font-size:14px;
    font-style:normal;
    color #FFFFFF;
}

div.churchSearchFP {
    background: none repeat scroll 0 0 #01579B;
    margin: 0; 
    padding: 0;
    width: 100%;
    height: 80px;
}
div.churchSearchFPinner {
    width: 450px;
    margin: 0 auto;
    padding-top: 15px;
}

input.churchSearchFP {
    background: none repeat scroll 0 0 #01579B; 
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: solid 1px #B0BEC5; 
    color: #FFFFFF;
    font-size: 22px;
    height: 45px;
    margin: 2px auto;
    padding: 0 0 0 10px;
    width: 420px;
}


div.socialicons {
    padding-top: 10px;
    float:left;
}

div.socialicons a {
    margin-left: 15px;
}



div.topmenu {
    margin-top: 5px;
    width:100%;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 50;
}

div.maintopmenu {
    font-size: 14px;
    margin: 0 8px 0 2px;
    padding: 6px 20px 6px 6px;
    display: inline-block;
    cursor:pointer;
}
div.maintopmenu.hasLink{ 
    padding: 6px 0;
}
div.maintopmenu a {
    padding: 6px 20px 6px 6px;
}

div.maintopmenu:first-child {
    padding-left:538px;

}
div.maintopmenu:nth-child(2) {
    margin-right: -10px;
}
div.maintopmenu:first-child:hover {
   border:none;
}

div.maintopmenu.nomenu {
  padding: 0;
}
p.topmenuitemsx {
    margin 0 auto;
}

div.topright {
    position:absolute;
    top: 2px;
    right: 20px;
    width: 430px;
    z-index: 50;
}

div.contactUs {
    position: absolute;
    top: 8px;
    left: 50px;
    background: url("/images/style2020/ContactUs-Text.svg") scroll no-repeat 0 50% #FFF;
    height: 23px;
    width: 104px;
}

div.bgText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 49;
    }

div.contactUs a {
    color: #AAAAAA;
    font-size: 14px;
}

div.mobMenuControls {
    height: 60px;
    width: 100%;
    margin: 0;
    padding-top: 25px;
    background: #1B2F43;
}

div.mobMenuIconClose {
    background: url("/images/style2020/menu.svg") scroll no-repeat calc(100% - 35px) calc(100% - 30px) #1B2F43;
    height: 55px;
    width: 60px;
    padding-left:15px;
    padding-right:15px;
    margin-left: 0;
}
div.mobMenuClose {
    background: url("/images/style2020/mobsub-X.svg") scroll no-repeat calc(100% - 35px) calc(100% - 30px) #1B2F43;
    height: 55px;
    float:right;
    width: 60px;
    padding-left: 15px;

}
div.mobSearchControls {
    height: 50px;
    margin: 0;
    background: #FFFFFF;
    position: absolute;
    top: 10px;
    right: 15px;
}
div.mobSearchClose {
    background: url("/images/style2020/mobsub-X.svg") scroll no-repeat 50% 50% transparent;
    height: 50px;
    width: 50px;

}
div.mobSearchOuter {
    width: calc(100vw - 65px);
    position:absolute;
    top: 0;
    left: 65px;
    margin: 0;
    padding: 0;
    z-index: 5000;
    height: 76px;
    background-color: #FFFFFF;
    overflow:hidden;
}
div.mobSiteSearch {
   /*    position: absolute; 
    top: 0; */
    width: calc(100% - 60px);
}

div.mobSiteSearch input.siteSearch {
    max-width:unset;
    width: calc(100% - 74px);
    margin: 15px 5px 15px 0;
}
div.mobSiteSearch input.searchControl {
    background: url("/images/style2020/search-gray.svg") scroll no-repeat 50% 50%;
    border-radius: 2px;
    padding: 16px 20px;
    position: relative; 
    top: 15px;
    right: 0;
}


div.mobSiteSearch h1.siteSearch2 {
    margin-left: 0;
    margin-bottom: 20px;
}

div.mobMenuOuter {
    width: 100vw;
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    z-index: 5000;
    height: 100vh;
    background-color: #ECEFF1;
    overflow:hidden;
}

div.mobMenu {
    color: #B0BEC5;
    margin: -1px 0 0 0;
    padding: 0;
    height: calc(100vh - 90px); 
    overflow-y:scroll;
    overflow-x:hidden;
 }

/* the margin: -1px 0 0 
   for mobMenu0 and mobMenu1 is because
   webkit browsers (e.g. chromium based) 
   leak the underlying content if you have two
   items next two each other with margin: 0;
*/

div.mobMenu0 {
    background: #1B2F43;
    margin: -1px 0 0;
    padding: 15px 0 30px 40px;
    width: 100%
}

div.mobMenu1 {
    margin: -1px 0 0;
    padding: 15px calc(100% - 77px) 30px 40px;
    width: 100%;
    background: url("/images/style2020/mobsub-closed.svg") scroll no-repeat calc(50% - 26px) calc(0% + 29px) #1B2F43;
}
div.mobMenu1.mobMenuOpen {
    background: url("/images/style2020/mobsub-open.svg") scroll no-repeat calc(50% - 26px) calc(0% + 29px) #1B2F43;
}
div.mobMenu1.mobMenuOpen span {
    border-bottom: 2px solid #01578B;
}

div.mobMenu2 {
    background: #1B2F43;
    margin:  25px 0 30px 30px;
}

div.mobMenu2:nth-child(2) {
   padding-top:15px;
}

div.mobMenu div.mobMenu1:last-child {
    padding-bottom: 30px;
}

div.mobMenu a {
    color: #B0BEC5;
    font-size: 14px;
     
}
div.mobMenu a:first-child {
    padding-top: 5px;
}
div.mobMenu0.mobLower {
    width:100%;
    margin: 0;
    padding: 15px 0 15px 40px;
    background-color: #ECEFF1;
}

div.mobMenu0.mobLower a {
    color: #0277BD;
}

div.mobMenu0.mobLower.first {
    padding-top: 30px;
}

div.mobMenu0.mobLower.last {
    padding-bottom: 30px;
}


div.findOut {
    background-color: #ECEFF1;
    padding-bottom: 24px;
    width: 100%;
}

p.findOut {
    font-family: Georgia;
    font-size: 36px;
    color: #1B2f43;
    text-align:center;
    background-color: #ECEFF1;
    padding: 36px 0 0 0;
    margin: 0 auto;

}

div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:transparent;
}
div.featureFP {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow:hidden;
    position:relative;
    width: calc(100% - 390px);
    height: 100%;
    min-height:400px;
 
}

div.featureFPNav {
    position:absolute;
    bottom: 40px;
    left: 100px;
    background:transparent;
    overflow:hidden;
    width:70%;
}

h3.featureFPNav a {
    font-size: 24px;
    color:#FFFFFF;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}

h2.featureFPNav a {
    font-family: Georgia;
    font-size: 50px;
    color:#FFFFFF;
    margin: 15px 0;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}


p.featureFPAuth a {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin 5px 0;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}


div.fullWideImage.CCE {
    position: relative;
    /*background-position-y: 25%;
    */
}

div.featureCCENav {
    position:absolute;
    bottom: 40px;
    left: 100px;
    background:transparent;
    overflow:hidden;
    width:70%;
}

h3.featureCCENav a {
    font-size: 24px;
    color:#FFFFFF;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}

h2.featureCCENav a {
    font-family: Georgia;
    font-size: 50px;
    color:#FFFFFF;
    margin: 15px 0;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}

p.featureCCEAuth a {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin 5px 0;
    text-shadow: 2px 3px 9px #0000008F;
    text-decoration:none;
}



.cardsFooter {
    display: flex;
    margin:  0 auto 0;
    max-width: 1600px;
    width:100%;
    padding: 2em 0;
    position: relative;
}

div.cardsFooter p.copyright {
    display:block;
/*
    position:absolute;
    bottom: 15px;
    right: 10px;
*/
    margin-right: 10px;
}


div.topCardsContainer {
    width: 390px;
    height: 100%;
    min-height: 400px;
    margin: 0;
}

div.topCardsContainer.CCE {
    width: 100%;
    height: unset; /* 100%; */
    min-height: unset;
   /* display: inline-flex; */
}

div.topCardsContainer.CCE div.topCards:nth-child(2) {
   margin-top: 15px;
}

div.topCardsContainer.CCE div.topCards hr {
    margin-top: 10px;
    width: 45%;
}

div.topCards {
    position: relative;
    text-shadow: 2px 3px 9px #0000009F;
    padding: 10px 0 0 0;
    color: white;
    height: 189px;
    margin: 0;
    border-left: solid 2px #ECEFF1;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    overflow: hidden;
    background-position-y: 50%!important;
}

div.topCards:first-child {
    border-bottom: solid 1px #ECEFF1;
}
div.topCards:nth-child(2) {
    border-top: solid 1px #ECEFF1;
}

div.topCardsContainer.CCE div.topCards {
    width: 100%;
    height: 215px;
}

div.topCards a {
    color: #FFFFFF;
}

div.topCards h1 {
    font-size: 24px;
    text-align: center;
    margin-top: calc(7% - 5px);
    margin-bottom: 40px;
}
div.topCards h2 {
    text-align: center;
}

div.topCards h3 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 4px;
}

div.topCards hr {
   width: 70%;
   margin: 0 auto;
   padding: 0;
   background-color: #FFFFFFA0;
   height: 1px;
   border: none;
}


div.topCards p {
    text-align: center;
}



div.featPlus2 {
    display: flex;
    flex-direction: row;
}

div.cards3 {
    display: flex;
    margin: 0 auto;
    max-width: 1600px;
    padding-top: 15px;
    width:98%;
    background-color: #ECEFF1;
    justify-content: space-around;

}

/*
div.cards3Background div:nth-child(2) {
    margin-bottom: 0;
    }
*/
div.cards3Background {
    width: 100%;
    padding: 0 0 50px 0;
    background-color: #ECEFF1;
}
div.cards3More {
    margin: 0 auto;
    width:100%;
    background-color: #ECEFF1;
}

div.cards3MoreOuter {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

div.cards3More p {
   text-align:right;
   padding: 0 0 20px 0;
   margin-bottom: 0;
}

div.cards3More p a {
   font-size:14px;
   color: #0277BD;
 }

div.cards4Background {
    background-color:#DFE3E8;
    width: 100%;
    padding: 40px 0 0 0;
}

div.cards4 {
    background-color:#DFE3E8;
    display: flex;
    margin: 0 auto;
    max-width: 1600px;
    width:98%;
    justify-content: space-evenly;
}

div.cardWide {
    flex-shrink: 3;
    margin: 10px 5px;
    width: 535px; 
    height: 196px;
    background-color:#fff;
    box-shadow: 0 1px 2px #00000020;
    position: relative;
}

div.cardWideRight {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    overflow:hidden;
    right: 0;
    float:right; 
    width:50%;
    height: 100%;
    max-height:196px;
    max-width: 260px;
    margin-left: 10px;
 
}

div.cardWideLeft {
    width: 48%;
    margin: 0 5px;
}
.cardWide img {
    float:right;
    max-width:100%;
    max-height:100%;
    display:block;
    margin-left: 10px;
}

.cardWide p {
    font-size: 14px;
    margin: 20px 25px;
}

.cardWideHead {
    color: #01579b;
    font-weight:bold;
}


p.cardWideHead span.cardWideHead {
    float:right;
    display:none;
}

a.cardWideHead {
    font-size: 14px;
    font-weight: bold;
}

.newsTextFP {
}

div.cardNarrow {
    margin: 10px 10px 30px 10px;
    width: 398px;
/*
    min-height: 402px;
    height: 100%;
    box-shadow: 0 1px 2px #00000020;
*/
    background: transparent;

}

div.cardNarrowTop p {
    margin: 0 20px;
    font-size: 14px;
}

div.cardNarrowTop p:first-child {
    font-size: 14px;
    margin: 0 auto 20px;
    padding-top: 15px;
    text-align: center;
}

div.cardNarrowHead {
    position: relative;
 /*   top: -27px;
  */
    position:relative;
}

div.cardNarrowHeadBug {
    margin:0 auto;
    width:53px;
}
div.cardNarrowHead a {
   color: #01579B;
}

img.cardNarrowHead {
}

h3.cardNarrowHead {
    margin: -29px 0 0 0;
    color:#01579B; 
    font-size:16px;
    font-weight:bold;
    text-align:center;
    padding: 30px 0 21px;
    background: linear-gradient(0deg, #CFD8DC39, #CFD8DC39),#FFFFFF;
    box-shadow: 0 1px 2px #00000040;

}


div.cardNarrowTop {
    background-color:#fff;
    height:120px;
    display:none;
}

div.cardNarrowTop.qa {
    height:304px;
}
div.cardNarrowBottom {
    overflow:hidden;
    position:relative;
    height: 214px;
    margin:0;
    padding:0;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    box-shadow: 0 1px 2px #00000040;
}

a.fill {
    display:block;
    height: 100%;
    width: 100%;
}

a.fill.feature {
    min-height: 400px;
}

a.fill.osnh {
    min-height: 189px;

}

div.cardNarrowBottom.qa {
    height: 30px;
    background-color: #FFFFFF;
}

img.cardNarrowBottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; 
    height: 214px;
}

p.cardNarrowBottom {
    text-align:right;
    font-size:14px;
    margin: 0 20px 20px;
}

.cardNarrowBottom a.qa {
    color: #0277BD;
    text-decoration:none;
}

p.qaTitleFP {
    font-weight:bold;
}
p.newsTitleFP {
    font-weight:bold;
}
a.newsTitleFP {
    text-decoration:none;
    color: #000;
}
img.histImageFP {
      width: 100%;
      height: 100%;
      max-width:260px;
      overflow:hidden;
}

div.opcFooter {
    width:100%;
    background-color: #1B2F43;
    color:#ffffff;
}

div.opcFooterBG {
    background-color: #1B2F43;
}


div.cardFooter {
    width: 250px; 
    margin: 0 auto;
}

div.cardFooter:first-child {
    width:350px;
    margin-left: 10px;
}
div.cardFooter:nth-child(5) {
   margin-right: 10px;
}

span.socialicons {
    float:right;
}

p.copyright {
    text-align:right;
}


div.cardFooter p {
    font-size: 10px;
    margin: 0 0 10px 0;
}

div.SiteName {
    margin-right: 7px;
}

div.cardFooter div.SiteName p.SiteName {
    font-family: Arapey;
    font-size:20px;
    padding-top: 8px;
}

div.cardFooter p:first-child {
   margin 10px 0 0 0;
}
div.cardFooter a{
   vertical-align:top;
   color: #ffffff; 
}

div.cardFooter img {
  margin:0 0 0 7px;
}

div.cardFooter img:last-child {
}

div.footerSect {
  width:100%;
}
div.footerSectLeft {
  width:75px;
  float:left;
}

div.footerSectRight {
   margin-left:80px;
}

div.footerSectRight p:first-child {
    margin-top:15px;
}

.mobile {
   display:none;
}

div.topmenuitems div.divTable {
   margin: auto 0;
   padding-left: 559px;

}

div.topmenuitems div.divTableRow div.divTableCell {
    padding-top: 20px;

}


div.topmenuitems div.divTableRow:first-child div.divTableCell {
    padding-top: 0;

}


div.fullWideImage {
    width: 100%;
    height: calc((100vw - 260px) * 0.555);
    max-height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-attachment: scroll;
    overflow: hidden;
    margin-bottom: 45px;
} 

div.blockContainer {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}


div.infoBlock {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 345px;
    margin-top: 15px;
}

div.infoBlockImg {
    width: 95%;
    height: 70%;
    min-height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-bottom: 25px;
    max-height: 400px;
    background-attachment: scroll;
}

.infoBlockImg { max-width: 100%; }

div.infoBlockImg.NHOS {
    background-size: cover;
    width: calc(100% - 8px);
}

div.infoBlockImg.STM {
    height: unset;
    min-height: 230px;
}

a.socialMedia {
  float:right;
}
a.socialMedia:nth-child(2) {
     margin-left: 10px;
}
div.mainBlock {
    position:relative;
    margin-left: 25px; 
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    padding-bottom: 65px;
    min-height: calc(100vh - 429px);
    word-break: break-word;
}
/*
div.mainBlock.osissue img + p:nth-child(2) {
   margin-top: 0;
}
div.mainBlock.osissue p:first-child {
   margin-top: 0;
}
*/

img.mainBlock.desktop {
   max-width: 710px;
   width:100%;
}

div.infoBlock h1 {
    font-size: 20px;
    margin-top: 0;
    border-bottom: solid 1px #B0BEC5;
    padding-bottom: 10px;
    margin-bottom: 25px;
}
div.infoBlock h2:first-child {
    margin-top: 0;
}

div.infoBlock h2 {
    font-family: Georgia;
    font-size: 40px;
    color: #1B2F43;
    font-weight:normal;
    vertical-align: middle;
    margin-top: 10px;
    margin-bottom: 30px;

}

div.infoBlock span.date {
    padding-right: 15px;
    margin-right: 15px;
    border-right: 2px solid #00796B;
    font-size: 18px;
    color: #00796B;
}
div.infoBlock span.date.doubleIssue {
    display:block;
    border-right: none;
}

p.devoHead {
   font-weight: bold;
}

p.devoTitleText {
    color: #0277BD;
}

/*
 *** PUT THIS BACK IF YOU SEE WEIRD PLACMENT OF navButtons ****

div.navButtons {
    position: absolute;
    bottom: 10px;
}
*/

div.infoBlock div.navButtons {
    position: inherit;
    bottom: unset;
    margin-top: 0; 
}
a.downloadButton {
   display:inline-block;
   background: url('/images/style2020/Download.svg') scroll no-repeat 11px calc(50% - 1px) #009688;
   border: solid 1px #009688;
   border-radius: 5px;
   text-align: center;
   max-width: 138px;
   color: #FFFFFF;
   font-size: 10px;
   font-weight:normal;
   outline: none;
   height: 25px;
   width: 150px;
   text-decoration: none;
   padding: 14px 0 0 0;
   margin-right: 20px;
   margin-top: 15px;

}

a.downloadButton:hover {
     background: url('/images/style2020/Download-hover.svg') scroll no-repeat 11px calc(50% - 1px) #ECEFF1;
     background-color: #ECEFF1;
     color: #009688;
}


a.navButton {
   display:inline-block;
   border: solid 1px #0277BD;
   border-radius: 5px;
   text-align: center;
   max-width: 138px;
   color: #0277BD;
   font-size: 10px;
   font-weight:normal;
   outline: none;
   height: 25px;
   width: 150px;
   text-decoration: none;
   padding: 14px 0 0 0;
   margin-right: 20px;
   margin-top: 15px;

}
a.navButton.inv {
     background-color: #0277BD;
     color: #FFFFFF;

}
span.navButton {
   display:inline-block;
   border: solid 1px #0277BD;
   border-radius: 5px;
   text-align: center;
   max-width: 138px;
   color: #0277BD;
   font-size: 10px;
   font-weight:normal;
   outline: none;
   height: 25px;
   width: 150px;
   text-decoration: none;
   padding: 14px 0 0 0;
   margin-right: 20px;
   margin-top: 15px;
   cursor: pointer;
}
span.navButton:hover {
   background-color: #0277BD;
   color: #FFFFFF;
}


a.navButton:hover {
     background-color: #0277BD;
     color: #FFFFFF;
}
a.navButton.inv:hover {
     color: #0277BD;
     background: transparent;
}


p.archTitle:first-child {
/*    margin-top: 20px; */
}

p.archTitle {
/*    margin: 0 auto; */
}

div.popupArchive h1 {
    font-size: 18px;
    font-weight: normal;
    color: #555;
    border-bottom: solid 1px #B0BEC5;
    padding-bottom: 3px;
}

p.archDate {
    margin: 12px auto 1px;
    color: #555;
}

p.archYear { 
   font-size: 16px; 
   cursor: pointer;
   background: url(/images/style2020/mobsub-closed.svg) scroll no-repeat 11px calc(50% - 1px) transparent;
   padding-left: 40px;
   color: #555;
}
p.archYear:first-child {
   background: url(/images/style2020/mobsub-open.svg) scroll no-repeat 11px calc(50% - 1px) transparent;
}

p.archYear + div.archYear {
    padding: 5px 15px 5px 40px;
    background-color: #FFF;
    color: #333333;
}
 
div.archYear {
    display: none;
   
}

div.archYear.currYear {
   display:block;
}


div.archYear:first-child {
    display: block;
}

div.popupArchive {
   display:none;
   background: none repeat scroll 0 0 #ECEFF1;
   position: absolute;
   bottom: 85px;
   right: 0;
   border: 1px solid #0277BD;
   border-radius: 3px;
   padding: 10px 25px;
   height: calc(100% - 95px);
   width: calc(100% - 52px);
   overflow-y: auto;

}

div.archiveContainer {
    display: flex;
    flex-direction: column;
    height: calc(100% - 15px);
}
div.archiveHeader {
    flex: 0 0 50px;
    margin-top: 20px;
}

div.archiveContents {
   flex: 1 1 auto;
   overflow-y: auto;
}

span.h1 {
    font-family: Georgia;
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
}

hr.archive {
   width: 65%;
   height: 1px;
   background-color: #FFFFFF70;
   border: none;
}


textarea {
   width: calc(100% - 15px);
}

.button {
    color: #1b2f43;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    padding: .5em 1em;
    border: 1px solid #b0bec5;
    background: #fff;
}
.button-primary {
    background-color: #00796B;
    color: #fff;
}

input {
    color: #1B2F43;
    font-family: Roboto;
    height: 35px;
    font-size: 16px;
    padding: 0 10px;
    border: solid 1px #B0BEC5;
    outline: none;
    background: #FFFFFF;
    appearance:             none;
    -webkit-appearance:     none;
    -moz-appearance:        none;
    -ms-appearance:         none;
    -o-appearance:          none;

}

input[type="checkbox"] {
    appearance:             revert;
    -webkit-appearance:     revert;
    -moz-appearance:        revert;
    -ms-appearance:         revert;
    -o-appearance:          revert;
}
input[type="radio"] {
    appearance:             revert;
    -webkit-appearance:     revert;
    -moz-appearance:        revert;
    -ms-appearance:         revert;
    -o-appearance:          revert;
}


select {
    cursor: pointer;
    color: #1B2F43;
    font-family: Roboto;
    height: 35px;
    font-size: 16px;
    padding: 6px 40px 7px 10px;
    border: solid 1px #B0BEC5;
    outline: none;
    background: url("/images/style2020/mobsub-closed.svg") scroll no-repeat calc(100% - 10px) 50% #FFFFFF;
    appearance:             none;
    -webkit-appearance:     none;
    -moz-appearance:        none;
    -ms-appearance:         none;
    -o-appearance:          none;
}

div.ArchiveControls {
   padding-bottom: 15px;
   position: relative;
}

p.NHArchDate {
    width:100%;
    text-align: center;
}

p.NHArchTitle {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-family: Georgia;
    margin-top: 10px;
}

p.NHArchTitle a {
    font-size: 30px;
    font-family: Georgia;
    /*border-top: solid 1px #FFFFFFA0; */
    padding-top: 8px;
}

div.NHArchive {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 305px;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    overflow: hidden;
    margin-bottom: 15px;
    background-position-y: 50%!important;
} 
div.NHArchive div.NHArchiveCurrentIssue {
    background-color: #00796B;
    color:white;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 9px;
}

div.NHArchive p {
    color: #fff;
    text-shadow: 2px 3px 3px #000000;
    margin-left: 50px;
    font-size: 30px;
    font-weight: bold;
    width: 80%;
    margin: 10px auto 20px;
}

p.NHArchDate {
   font-size: 20px;
}
p.NHArchDate a{
   font-size: 20px;
}

div.NHArchive p:first-child {
    margin: 105px auto 20px;
}

div.NHArchive a {
    color: #fff;
    text-shadow: 2px 3px 5px #000000;
}

div.featureArchive {
    width: 100%;
    height: 100%;
    min-height: 175px;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    overflow: hidden;
    margin-bottom: 15px;
    background-position-y: 50%!important;
} 

div.featureArchive p {
    color: #fff;
    text-shadow: 2px 3px 3px #000000;
    margin: 75px 50px 0;
    font-size: 20px;
    margin-top: 75px;
    font-weight: bold;
}


div.featureArchive a {
    color: #fff;
    text-shadow: 2px 3px 5px #000000;
}


div.multiArchive {
    width: 100%;
    height: 100%;
    min-height: 75px;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #00000080;
    background-position-y: 15%!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
} 

div.multiArchive.news {
    background: linear-gradient(180deg, #AADDFF50, #BBDDFF90),url("/images/news.png");
    background-size: cover;
    background-repeat: no-repeat;
}

div.multiArchive.qa {
    background-color: #B0BEC5;
    background:  linear-gradient(180deg, #0000001F, #00000038), #B0BEC5;
}
div.multiArchive p {
    color: #fff;
    text-shadow: 2px 3px 3px #000000;
/*    margin: auto 50px; */
    margin-left: 50px;
    font-size: 20px;
    font-weight: bold;
}

span.qatopiclink {
     margin-left: 5px;
     display: block;
}
span.qatopiclink a {
     color: #ffffff;
}

.textNormal {
     font-weight:normal;
}

div.controlsRight {
    float: right;
}

div.controlsRight div.ArchiveExtra:nth-child(2) {
    margin-bottom: 15px
}

select.controls {
    position: absolute;
    top: -10px;
    right: 0;
}

select.controls.OS {
    margin-bottom: 19px;
    margin-top: -10px;
    position: revert;
    top: unset;
    right: unset;
}
div.ArchiveExtra {
    text-align: right;
    margin-bottom: 5px;
    cursor: pointer;
    color: #0277BD;
}

span.controlsLabel {
    margin-right: 8px;
    
}
div.ArchiveControls p.controls:first-child {
   margin-bottom: 0;
}
div.ArchiveControls p.controls:nth-child(2) {
   margin-top: 4px;
   margin-bottom: 4px;
}

div.ArchiveControls p.controls:nth-child(3) {
   margin-top: 4px;
}

div.multiArchive a {
    color: #fff;
    text-shadow: 2px 3px 5px #000000FF;
}



div.articleIssueInfo {
    margin: 20px 0;
    width: calc(100% - 30px);
    border: solid 1px #B0BEC5;
    border-radius: 5px;
    padding: 10px;
}

div.articleIssueInfo p.issueTitle {
    margin: 0;
    font-size: 18px;
}
div.articleIssueInfo p.issueTitle:first-child {
    margin-bottom: 5px;
}
p.articleTitle {
    margin-bottom: 1px;
}
p.articleAuthor {
    margin-bottom: 20px;
    margin-top: 5px;
}
h3.articleTitle {
    margin-top: 35px;
    margin-bottom: 0;
}

h3.articleTitle:first-child {
   margin-top: inherit;
}

div.articleIssueInfo p.issueTitle {
    margin-top:0;
}

p.infoBlockGreen {
    color: #00796B;
}

div.infoBlock h1.currentIssue {
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
    color: #1B2F43;
}

p.osSubHead {
   font-style: italic;
   font-weight: bold;
   color: #1B2F43;
   margin-bottom: 0;
}
p.osEISSN {
   margin-top: 0;
   color: #1B2F43;
}
img.osEditor {
   float:left;
   margin: 20px 20px 20px 0;
   width: 167px;
   
}

div.OSPubInfo {
   width: 100%;
   border: solid 1px #B0BEC5;
   padding: 10px;
   margin: 10px 0;
}
div.OSPubInfo h3 {
   margin-bottom: 15px;
}

div.OSPubInfo p {
   margin-top: 6px;
   margin-bottom: 4px;
}
div.OSPubInfo h3 {
   margin-top: 3px;
   margin-bottom: 15px;
}
span.OSPubInfoAddr {
    display: inline-grid;
    margin-left: 12px;
}

/*
**  Table Grid 
**
*/

.divTable{
	display: table;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}

/* 
** end TableGrid
**/

div.divGridTable {
   display: grid;
   grid-column-gap: 0;
   grid-row-gap: 10px;

}
div.divGridTable.ChurchDir {
   margin-top:53px;

}

div.divGridTable.two {
   grid-template-columns: 50% 50%;
}

div.divGridTableCell {
   display: inline-grid;
   padding: 20px 0;
}

div.divGridTableCell.ChurchDir {
   border-top: solid 1px #999999;
   border-bottom: solid 1px #999999;
   background-color: #FFFFFF;
}

div.divGridTableCell.ChurchDir:nth-child(3n-1) {
      border-right: solid 1px #999999;
      padding-right: 20px;
}

div.divGridTableCell.ChurchDir:nth-child(3n+1) {
      border-left: solid 1px #999999;
      padding-left: 20px;
}

div.divGridTableCell.ChurchDirMore {
     grid-column: 1 / span 2;
     display:none;
     background: #FFFFFF;
     padding: 0 15px;
     border: solid 1px #999999;
     position: relative;
}

div.ChurchDir span {
    padding-right: 10px;
}

div.divGridTableCell.SA {
   border-top: solid 1px #999999;
   border-bottom: solid 1px #999999;
   background-color: #FFFFFF;
}

div.divGridTableCell.SA:nth-child(even) {
      border-right: solid 1px #999999;
      padding-right: 20px;
}

div.divGridTableCell.SA:nth-child(odd) {
      border-left: solid 1px #999999;
      padding-left: 20px;
}

span.saSermons {
     display: inline-block;
     margin-top: 5px;
}
div.churchRow {
   border: solid 1px #FF0000;
   padding: 10px 20px;
   border-radius: 5px;
   margin: 10px;
   background: #0000FF;
}
div.churchRow div.divTableCell {
   background: #fff;
}

table.churchCard {
   width: 95%;
   margin-bottom: 15px;
}

table.churchCard td {
   width: 50%;
}

table.churchCard h4 {
    margin-bottom: 0;
}

table.churchCard h4 + p {
    margin-top: 0;
}

div.divGridTableCell.SA h4 {
    margin: 0;
}

form p.label {
     margin-bottom: 0;
}

form p.field {
     margin-top: 0;
}

select.infoBlock {
     width: calc(100% - 52px);
}
input.infoBlock {
     width: calc(100% - 73px);
}

input[type="submit"] {
     cursor: pointer;
}
input[name="clear"].locatorReset {
     color: #999999;
     border-color: #999999;
     cursor: pointer;
}
p#ShowLocatorForm {
   border: solid 1px #AAAAAA;
   border-radius: 3px;
   padding: 10px;
   cursor: pointer;
   background: #FFFFFF;
   text-align: center;
   margin: auto 2px 5px;
}

div.rightArrow {
   background: url("/images/style2020/right-arrow-blue.svg") 50% 50% no-repeat scroll;
   width: 20px;
   height: 20px;
   cursor: pointer;
}

div.divGridTableCell div.rightArrow {
   position: relative;
   bottom: 10px;
   left: calc(100% - 23px);
}

div.close {
   background: url('/images/style2020/mobsub-X.svg') 50% 50% no-repeat scroll transparent;
   width: 30px;
   height: 30px;
   position: relative;
   top: 15px;
   right: 15px;
   cursor: pointer;
}

.churchCard div.close {
   position: absolute;
   top: 18px;
   right: unset;
   left: calc(100% - 45px);
   height: 20px;
   width: 20px;
   margin: 0;
   padding: 0;
}

.churchCard h2 {
    margin-bottom: 0;
}
.churchCard h4 {
    margin-top: 0;
}


div.divGridTable.FMpersonnel {
    grid-column-gap: 20px;
    margin-top: 20px;
    margin-right: 20px;
}
div.divGridTableCell.FMpersonnel {
    padding: 0;
}
img.FMpersonnel {
    width: 93%;
}

div.infoBlock ul {
    padding-inline-start: 20px;
}
div.infoBlock ul li {
    margin-bottom: 4px;
}

span.FMpersonnel {
    text-align: center;
}


img.WWOBrochure {
    width: 100%;
    padding: 9px 0;
}

div.scmsBlock {
   height:auto;
}

div.scmsBlock p:last-child {
   padding-bottom:18px;
}

div.scmsImage {
   float:left;
   width:155px;
   height:100%;
}

h2.scmsSection {
   margin-top:35px;
   margin-bottom:20px;
}

h2.scmsORM {
   margin-bottom:15px;
}

div.scmsBlock > h2.scmsORM {
   font-size:14px;
}

div.scmsBlock > h2 {
   font-size:14px;
}

img.scmsImage {
    display: inline;
    width: 145px;
    height: auto;

}

img.embedLeft {
    float: left;
    width: 35%;
    margin: 15px 15px 15px 0;
    box-shadow: 0 0 2px #00000070;
}
img.embedRight {
    float: right;
    width: 35%;
    margin: 15px 0 15px 15px;
    box-shadow: 0 0 2px #00000030;
}

figure.embedLeft {
    float: left;
    margin: 15px 15px 15px 0;
}
figure.embedRight {
    float: right;
    margin: 15px 0 15px 15px;
}
figcaption {
   text-align: center;
}


span.BRAuthor {
    color: #AAEEFF;
}

span.BRDate {
    color: #AAEEFF;

}

div.PGIssueOuter {
    display: flex;
    grid-gap: 50px;
}

select.PGVOLUMES {
    margin-bottom: 15px;
    width: calc(100% - 3px);
}

select.PGISSUES {
    width: calc(100% - 3px);
}

img.guardianHeader {
    width: 100%;
}
div.PGSelectedIssueCover {
    background-size: contain;
    width: 150px;
    height: 194px;
}
div.PGFeaturedIssueCover {
    background-size: contain;
    width: 150px;
    height: 194px;
}

table.churchlisting th:first-child {
   width: calc(35% - 5px);
}
table.churchlisting th:nth-child(2) {
   width: calc(45% - 3px);
}
table.churchlisting th:nth-child(3) {
   width: calc(20% - 3px);
}

table.churchlisting td:first-child {
   width: calc(35% - 5px);
}
table.churchlisting td:nth-child(2) {
   width: calc(45% - 3px);
}
table.churchlisting td:nth-child(3) {
   width: calc(20% - 3px);
}

table.churchlisting th {
   padding-bottom: 10px;
}
table.churchlisting td {
}

div.breadCrumb {
   opacity:0;
   color: #AAA;
   font-size:12px;
   margin-left: 20px;
   position: absolute;
   top: 119px;
   left: 0;
}
div.breadCrumb a {
    color: #00796B;
    padding: 3px;
    border: 1px solid #00796B;
    border-radius: 4px;
}
div.breadCrumb a:hover {
    background-color: #00796B;
    color: #ECEFF1;

}

div.breadCrumb:hover {
   opacity:100%;
}


p.stmFP {
    margin-bottom: 5px;
    margin-top: 5px;
}

p.cardNarrowBottomLink {
    margin-top: calc(25% - 10px);
    text-align: center;
    z-index: 4;
    text-shadow: 3px 5px 13px #000000EF;
}

p.cardNarrowBottomLink a {
    color: #FFF;
    font-weight:bold;
    font-weight: 18px;
    text-shadow: 3px 5px 11px #000000EF;
}

p.churchNav {
    margin: 0 0 2px 0;
}

p.theMainRightBottomButton {
   margin: 0.5em 0;
}

img.image100 {
   width: 100%;
}
img.img250w {
   width: 250px;
}
img.img250h {
   height: 250px;
}
img.img400w {
   width: 400px;
}

img.img400h {
   height: 400px;
}
img.img600w {
   width: 600px;
}
img.img600h {
   height: 600px;
}

img.img800w {
   width: 800px;
}
img.img800h {
   height: 800px;
}

img.imgRight {
   float: right;
   margin-left: 15px;
}

img.imgLeft {
   float: left;
   margin-right: 15px;
}


form.QAAsk {
   display: inline;
}

form.QAAsk input {
     border: none;
     margin-left: 20px;
     border:none;
     color: #01579b;
     font-weight: bold;
     font-size: 14px;
}

div.cardWideBottom {
    margin: 0 25px;
}
div.cardWideBottom form.QAAsk input {
   float:right;
   height: 20px;
}

span.navButton form.QAAsk input {
   background: transparent;
   font-size: 10px;
   height: 10px;
   margin: 0 auto;
}
span.navButton:hover form.QAAsk input {
   color:white;
}

h1.HMTop {
   color: #FFFFFF;
   margin: 30px 0 0 15px;
}

div.cards4HM {
   display: flex;
   max-width: 1600px;
   width: 98%;
   justify-content: space-evenly;
   flex-direction: row;
   flex-wrap: wrap;
}

div.cardNarrowHM {
    background: #00000090;
    color: #fff;
    width: 200px;
    min-height: 140px;
    margin: 20px 10px;
    padding: 0 20px;
}

div.cardNarrowHM p {
   font-weight: bold;
   font-size: 20px;
   margin: 20px auto;
   text-align: center;
}
div.fullWideImage.HM {
   position: relative;
   background-position-y: 25%;
   height: unset;
}
/*
**
** FileUpload: PureCSS for a pretty file Upload
**
*/
input::-webkit-file-upload-button {
    visibility:hidden;
    width: 112px;
}

input::file-selector-button {
    visibility:hidden;
    width: 112px;
}

div.fileInputContainer {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
}
div.fileInputContainer input[type="file"] {
        position: absolute;
        z-index: -1;
        top: 10px;
        left: 0px;
        font-size: 16px;
        color: #b8b8b8;
        height: 28px;
        padding: 7px 15px 0 0;
        text-overflow: ellipsis;
}
div.fileInputContainer div.button-wrap {
        position: relative;
        margin-bottom: 5px;
}
div.fileInputContainer label.button {
        display: inline-block;
        padding: 8px 10px 9px;
        cursor: pointer;
        border-radius: 0;
        background-color: #00796B;
        font-weight: bold;
        color: #fff;
        margin-top: 10px;
}

@-moz-document url-prefix() {
   /*
   ** Firefox specific overrides
   */ 
   /*
   div.fileInputContainer label.button {
       padding: 7px 16px;
   }
   /*
   div.fileInputContainer input[type="file"] {
       padding: 4px 0 0 0;
   }
   */

}

/*
**
** end FileUpload PureCSS: for pretty file upload 
**
*/

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

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



      div.errFullPage {
          width: 96%;
          margin: 0 auto;
      }

 


      div.featureFPNav {
          left: 20px;
      }     

      div.theMain {
          min-height: calc(100vh - 379px);

      }

      div.topmenulinks {
          top: 10px;
          left: 62px;
          width: calc(100% - 100px);

      }
      div.topmenu {
         top: 60px;
         padding-left: 74px;
         width: calc(100% - 74px);
       }

      div.maintopmenu:first-child {
           padding-left: 0;
           margin-left: 0;
           padding-right: 0;
      }

      div.topmenuitems {
          margin-top: 26px;
      }

      div.maintopmenu div.topmenuitemscontainer {
          top: 25px;
          padding-top: 0 ;
      } 

      div.topmenufiller {
          height: 5px;
      }

      div.logotitle {
         z-index: 1;
      }

      div.logotitlefillerbottom {
          padding-bottom: 20px;
      }
      div.topmenuitems table {
         margin: auto 0;
         padding-left: 195px;
      }

      div.topmenuitems div.divTable {
         margin: auto 0;
         padding-left: 75px;

      }

 
      div.breadCrumb {
          top: 133px;
      }
       div.maintopmenu:first-child {
          display:none;
      }

      div.topmenulinks {
           top: 10px;
           left: 62px;
           width: calc(100% - 100px);

      }
      div.topmenu {
         top: 60px;
         padding-left: 90px;
         width: calc(100% - 90px);
       }

      div.maintopmenu:first-child {
           padding-left: 0;
           margin-left: 0;
           padding-right: 0;
      }

      div.topmenuitems {
          margin-top: 26px;
      }

      div.maintopmenu div.topmenuitemscontainer {
          top: 25px;
          padding-top: 5px;
      } 

      div.topmenufiller {
          height: 5px;
      }

      div.logotitle {
         z-index: 1;
      }

      div.logotitlefillerbottom {
          padding-bottom: 20px;
      }
      div.topmenuitems table {
         margin: auto 0;
         padding-left: 195px;
      }

      div.infoBlock {
          flex-basis: 265px;
      }



      a.socialMedia:nth-child(2) {
         margin-left: 4px;
      }


      div.mainBlock {
          min-height: calc(100vh - 445px);
      }

      div.infoBlock h2 {
           font-size: 30px;
      } 

      div.infoBlock span.date {
          padding-right: unset;
          margin-right: unset;
          border-right: none;
      }

     div.fullWideImage {
         height: calc((100vw - 180px) * 0.555);
    }


}

@media screen and (max-width: 1275px) {
     a.toplinks {
       margin: 0 9px;
     }
     .cards3 {
       flex-wrap: wrap;
     }
     .cards4 {
       flex-wrap: wrap;
     }
     .cardsFooter {
     }

     div.cardWide {
       margin-left: 20px;
       margin-right: 20px;
     }
     div.cardNarrow {
       margin-left: 20px;
       margin-right: 20px;
     }
     span.socialicons {
         float:none;
     }
     p.copyright {
         text-align:right; 
     }

     div.cards3More p {
         text-align:left;
         margin-left:20px;
     }
     h2.featureFPNav a {
         font-size: 35px;
     }

     p.findOut {
        font-size: 32px;
     }

     div.theMain {
         margin: 25px auto;
         max-width: unset;
         width: 90%;
     }

     div.cardFooter:first-child {
         width: 250px;
     }

     div.cardFooter:nth-child(2) div.footerSectRight p {
         margin-right: 10px;
     }

     div.cardFooter:nth-child(5) {
           margin-left: 14px;
           margin-right: 0;
     }

      div.cardFooter:nth-child(5) div.footerSect div.footerSectLeft{
         width: 0;
     }
     div.cardFooter:nth-child(5) div.footerSect div.footerSectRight{
         margin-left: 0;
     }
/*
     div.cardsFooter p.copyright {
         right: unset;
         left: 10px;
     }
*/

     div.footerSectLeft: {
         width: unset;

     }

}

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

     div.featPlus2 {
        display: flex;
        flex-direction: column;
     }

      div.featureFP {
          width:100%;
      }

      div.topright {
          top: 0;
      }

      div.topCardsContainer {
          width: 100%;
          display: inline-flex;
          min-height: 203px; 
      }

      div.topCardsContainer.CCE {
          display: block;
      }
 
      div.topCards {
          width: calc(50% - 1px)
      }

      div.topCards:first-child {
          border-top: 2px solid #ECEFF1;
          border-right: 1px solid #ECEFF1;
          border-left: none;
          border-bottom: none;
      }
      div.topCards:nth-child(2) {
          border-top: 2px solid #ECEFF1;
          border-left: 1px solid #ECEFF1;
          border-right: none;
          border-bottom: none;
      }

     div.topmenuitems div.divTable {
         padding-left: 70px;
     }

     div.infoBlock h1 {
         font-size: 18px;
     }

     div.fullWideImage {
         height: calc((100vw - 100px) * 0.555);
         max-height: 500px;
    }

}
@media screen and (max-width: 925px) {
       div.maintopmenu {
           padding: 3px 10px 6px 6px;
           font-size: 12px;
       }
       div.topmenuitems a {
          font-size:12px;
       }

       div.logotitle {
           width: 530px;
       }

       div.title {
           font-size: 24px;
       }

       div.infoBlock {
           flex-basis: 200px;
       }

       div.infoBlock h2 {
           font-size: 24px;

       }

       div.topmenuitems div.divTable {
           padding-left: 75px;
       } 


       h2.featureCCENav a {
           font-size: 32px;
       }

       h3.featureCCENav a {
           font-size: 18px;
       }

}

@media only screen
       and (min-width: 280px)
       and (max-width: 1425px)
       and (pointer: coarse) ,
       only screen 
       and (min-width: 280px)
       and (max-width: 1425px)
       and (min-resolution: 500dpi) { 

       .mobile {
           /* 
           ** had it at initiial
           ** but i think revert is actually correct
           ** if we run into problems, change it back
           ** to initial
           */
           /*display:initial;*/
           display:revert;
       }

       .desktop {
           display:none;
       }
       select {
           color: #1B2F43;
           font-family: Roboto;
           height: 35px;
           font-size: 13px;
       }

       img.logo {
           height: 53px;
           width: 42px;

       }

       div.theMain {
           padding-bottom: 60px;
           margin-bottom: 40px;
           min-height: unset;
       }

       div.opcFooter {
           background-color: #1B2F43;
           width: 100%;
       }

      div.errFullPage {
          height: calc(100vh - 256px);
          margin: 0 auto;
          width: 86%;
      }
       div.cardsFooter {
           position: fixed;
           left:0;
           bottom: 0;
           margin: 3px auto 0;
           padding-top: 20px;
           padding-bottom: 5px;
           background: #1B2F43;
           display: flex;
           flex-direction: row;
           justify-content: space-around;
           max-width: 100vw;
       }

       div.cardFooter {
          width: unset;
       }

       div.cardFooter:nth-child(5) {
           margin-left: auto;
           margin-right: auto;
       }

       div.cardFooter:first-child {
           margin-left: auto;
       }
       div.cardFooter img {
          width: 28px;
          height: 28px;
       }

       div.cardFooter {
         width:40px;
       }
 
       div.cardFooter:first-child {
          width: unset;

       }

       div.cardFooter p {
         font-size:8px;
         text-align:center;
       }

       div.cardFooter p a {
         font-size:8px;
       }

       p.mobCopy {
          position: relative;
          top: 0;
          left: 0;
          margin:0!important;
          font-size: 7px!important;
       }

       div.cardWide {
           width:90%; 
           margin: 10px auto;
           height: 100%;
       }

       div.cardNarrow {
           width: 90%;

       }

       div.cards3 {
           width: 100%;
       }

       div.cardWide img {
           max-width:40%; 
           max-height:40%;
       }

       div.cardWideRight {
           min-width:45%;
        /*   min-height: 99px; */
       }
       div.cardWide img.histImageFP {
           width:260px!important; 
           max-width:40%; 
           max-height:40%;
           overflow:hidden;
       }

       p.newsTextFP {
           display:none;
       }

       body {
         background: none repeat scroll 0 0 #ECEFF1;
       }
       div.cards3Background {
           background-color: #FFFFFF;
           padding: 0 0 100px 0;
       }

       .cardWide p {
           font-size: 14px;
           margin: 6px 12px;
       }

       div.cardNarrow {
           margin: 10px auto 10px;
           
       }

       span.socialicons {
           float:unset;
       }

       p.copyright {
           text-align:left; 
       }

       div.featureFPNav {
          left: 40px;
          bottom: 10px;
       }
       div.featureFPNav.mobile{
          top: 0;
          left: 40px;
          background: transparent;
          overflow: hidden;
          width: 80%;
      }


       h2.featureFPNav a {
           font-size:20px;
       }

       h3.featureFPNav a {
           font-size: 14px; 
       }

       h3.featureFPNav a span {
           float:right;
           font-size: 12px; 
       }


       div.featureCCENav {
          left: 40px;
          bottom: 40px;
       }

       div.featureCCENav.mobile{
          top: 20px;
          left: 40px;
          background: transparent;
          overflow: hidden;
          width: 80%;
      }


       h2.featureCCENav a {
           font-size:24px;
       }

       h3.featureCCENav a {
           font-size: 14px; 
       }

       h3.featureCCENav a span {
           float:right;
           font-size: 12px; 
           padding-top: 7px;
       }



       div.cards3More p {
         text-align:left;
         margin-left:20px;
      }

      div.findOut {
          padding-bottom: 5px;
      }

      p.findOut {
         font-family: Roboto;
         font-weight:bold;
         font-size:16px;
         color: #01579b;
         text-align:left;
         margin-left:26px;
         margin-bottom:0;
     }

/*
     div.cards3Background div.cardWide:first-child {
         margin-top: 20px; 
     }
*/
     div.churchSearchFP {
         background: none repeat scroll 0 0 transparent;
         margin: 5px 0 0; 
         padding: 0;
         width: 100%;
         height: 80px;
     }
     div.churchSearchFPinner {
         width: 250px;
         margin: 0 auto;
         padding-top: 15px;
     }
     
     input.churchSearchFP {
         background: none repeat scroll 0 0 transparent; 
         border-left: none;
         border-top: none;
         border-right: none;
         border-bottom: solid 1px #B0BEC5; 
         color: #01579B;
         font-size: 14px;
         height: 26px;
         margin: 2px auto;
         padding: 0 0 0 10px;
         width: 240px;
    }

     .churchSearchFP::placeholder {
         color: #B0BEC4;
         font-size: 18px;
         text-align: center;
         height: 24px;
         vertical-align: baseline;
         padding-left:19px;
         background: url("/images/style2020/map-marker-church-search.svg") scroll no-repeat 0% 0% transparent;
         background-size: 14px;
     }

     div.menuicon {
         background: url("/images/style2020/menu.svg") scroll no-repeat calc(100% - 35px) calc(100% - 30px);
         height: 55px;
         width: 60px;
         padding-left: 0;
         padding-right:15px;
         margin-left: 0;
         position: absolute;
         top: 20px;
         left: 0; 
         display: inline-grid;
     }

     div.searchicon {
         height: 55px;
         width: 60px;
         position: absolute;
         top: 20px;
         left: 57px;
         display: inline-grid;
         background: url("/images/style2020/search-gray.svg") scroll no-repeat 20% 20%;
     }
     
     div.logo {
         position:absolute;
         top: 0;
         right: 10px;
         display: inline-grid;
         width:43px;
     
     }
     div.logo.mobile {
         margin: 8px 5px 8px 0;
     }

     div.title {
         width:100%;
         font-family:Arapey;
         max-width: 281px;
         margin: 18px calc(50% - 140px);
         font-size: 16px;
         font-weight:bold;
         color: #01579b;
         padding: 5px 0 0;
         text-align: center;
         display: inline-grid;
     
     }
     div.title a {
         color: #01579b;
     }
     
     div.title span {
         padding-top:5px;
     }

     div.blockContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
     }

     div.infoBlock {
         width: 100%;
         flex-grow: unset;
         flex-shrink: unset;
         flex-basis: unset;
         margin-bottom: 20px;
     }

     /*
     ** Note: the "+" means that the selector after the "+" 
     **       immediately follows the selector before the "+"
     **       this way you can do very specific things like
     **       completely change the style of the item after the "+".
     */

     div.fullWideImage + div.blockContainer {
         margin-top: 350px;
     }

     div.fullWideImage.HM + div.blockContainer {
         margin-top: 100px;
     }


     div.mainBlock {
         margin-left: unset;
         padding-bottom: unset;
         min-height: unset; /* calc(100vh - 380px); */
    }

     div.infoBlock h1 {
         font-size: 16px;
         border-bottom: none;
         margin-bottom: 0;
     }
     div.infoBlock span.date {
         font-size:16px;
         margin-right: 7px; 
     }

     div.infoBlockImg {
       /* min-height: 265px; */
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: 25px;
     }


     /*
     ** Note: the "+" means that the selector after the "+" 
     **       immediately follows the selector before the "+"
     **       this way you can do very specific things like
     **       completely change the style of the item after the "+".
     **
     **       You can then follow on with any other selectors as
     **       children to what follows the "+" so that as what follows
     **       here only h1 that is a child of a div.infoBlock which is
     **       a child of blockContainer that was
     **       immediately preceeded in the HTML by a div.fullWideImage
     **       will get the style specificed applied.
     */


     div.fullWideImage + div.blockContainer div.infoBlock h1 {
         position: absolute;
         top: 355px;
         left: 0;
         margin-left: 25px;
         z-index: 200;
     }

     div.fullWideImage.CCE + div.blockContainer div.infoBlock h1 {
         position: revert;
         margin-left: 0;
         z-index: 1;
     }



     div.fullWideImage + div.blockContainer div.infoBlock h1 a {
        color: #FFFFFF;
        text-shadow: 2px 3px 9px #0000008F;

     }

     div.infoBlock h2 {
         font-size: 20px;
         margin-bottom: 15px;
     }

     div.fullWideImage {
         height: 100%;
         position:absolute;
         max-height: 320px; 
         min-height:unset;
         top: 77px;
         left: 0;
     }
        
     div.fullWideImage.CCE {
         position: absolute;
         max-height: 310px; 
     }


     div.archiveHeader {
        margin-top: unset;
     }

     img.osEditor {
        width: 110px;
     }

     div.multiArchive p {
        margin-left: 20px;
        margin-right: 20px;
     }

     div.articleIssueInfo.mobile {
         display:block;
         margin-top: 0;
     }

     div.downloadsButton.mobile {
         display: block;
     }

     span.h1 {
         font-family: Georgia;
         font-size: 14px;
     } 

     div.OSPubInfo {
         width: calc(100% - 10px);
         padding-right: 0;
     }

     div.topCardsContainer {
         flex-direction: column;
     }
     div.topCards {
          width: calc(100% - 20px);
          border: none!important;
          margin: 10px auto 0;
     }

     div.cards3Background.mobile div.cards3:nth-child(2) div.cardWide:nth-child(2) {
         margin-bottom: 112px;
     }
     div.divGridTable.ChurchDir {
        margin-top: 10px;
     }

     h1.locatorResults {
        margin-left: 3px
     }

     p.locatorResults {
       margin: 0 6px 2px;
       font-style: italic;
     }

     form[name="church_locator"] input[type="submit"] {
        width:100%;
     }

     div.divGridTableCell div.rightArrow {
         left: calc(100% - 28px);
         bottom: 0;
     }

    .churchCard div.close {
        top: 18px;
        right: unset;
        left: calc(100% - 45px);
    }

    div.topCardsContainer.CCE div.topCards {
        width: calc(100% - 15px);
    }


    div.navButtons {
        position: revert;
        bottom: unset;
    }


    div.cards4Background {
        padding-top: 25px;
    }

    div.cards4 {
        flex-direction: column;
    }

    div.cards3 {
        flex-direction: column;
    }

     div.cardWide {
         min-height: calc(100vw / 3);
     }

     div.cardWideRight{
         min-height: calc(100vw / 3);
         background-position: 0% 10%;
         /*width: unset; */
     }

     div.cardNarrowBottom {
         height: calc(100vh / 3.6);
         background-position: 0% 10%;
     }

     div.cardWide p.cardNarrowBottom {
         position: absolute;
         bottom: 0;
         right: 10px;
     }

      div.featureFP {
          width: 100%;
          min-height: calc(100vw / 2.3);
      }

      div.topCards {
          height: unset;
          min-height: calc(100vw / 2.3);
          width: 100%;
      }

      h1.siteSearch2 {
         margin-left: 12px;
      }

      div.ArchiveControls p.controls span {
         display:block;
      }

      div.PGIssueOuter {
         display: revert;
         grid-gap: unset;
         flex-direction: unset;
         width: 100%;
      }
      div.PGSelectedIssue {
         text-align: center;
      }

      div.PGFeaturedIssue {
         text-align: center;
      }

      div.PGSelectedIssueCover {
          margin: 0 auto;
      }
      div.PGFeaturedIssueCover {
          margin: 0 auto;
      }
      p.stmFP {
         margin-top: 2px;
         margin-bottom: 2px;
      }

      table.hymnchart {
         font-size: 9px;
      }

      a.longLink {
        text-overflow:ellipsis;
        overflow:hidden;
        white-space: nowrap;
        display:block;
      }

      div.featureArchive p {
        margin-top: 55px;
     }

     p.churchNav {
        margin: 5px 0;
     }


}
@media only screen 
       and (min-device-width: 520px)
       and (pointer: coarse) ,
       only screen 
       and (min-device-width: 520px)
       and (min-resolution: 500dpi) { 

       .cardWide p {
           margin: 20px 25px;
       }

       .cardWide p.stmFP {
           margin-top: 5px;
           margin-bottom: 5px;
       }
}
@media only screen
       and (min-device-width: 280px) 
       and (max-device-width: 1425px)
       and (orientation: landscape)
       and (pointer: coarse) ,
       only screen
       and (min-device-width: 280px) 
       and (max-device-width: 1425px)
       and (orientation: landscape)
       and (min-resolution: 500dpi) { 

        div.title {
          font-size: 20px;
        }
        div.cardsFooter {
           position: initial;
           max-width:400px;
        }
        p.newsTextFP {
            display:block;
        }
        div.errFullPage {
            height: calc(100vh - 110px);
        }

        span.socialicons {
            float:none;
        }
        p.copyright {
            text-align:left; 
        }
        div.cards3More p {
            text-align:left;
            margin-left:40px;
        }
        p.findOut {
             margin-left:40px;
        }

        div.featureFP {
             min-height: 220px; 
        }
        div.header.fixedinner {
             position: absolute;
        }

        div.blockContainer {
             display: flex;
        }
        div.infoBlock.landscape {
            display: revert;
        }
        div.infoBlock2 {
            display: none;
        }
        div.infoBlock {
             flex-basis: 30%;
             flex-grow: 0;
             flex-shrink: 0;
             margin-bottom: 20px;
        }

        div.mainBlock {
            flex-grow: 1;
            flex-shrink: 1;
            margin-left: 20px;
            padding-bottom: unset; 

        }

        div.infoBlockImg {
            min-height: 180px;
            max-height: 190px;
        }

        div.infoBlock h2 + div.infoBlockImg  {
           margin-top: 15px;
        }
        div.theMain {
            padding-bottom: 40px;
        }

        div.fullWideImage + div.blockContainer {
            margin-top: calc(( 100vh / 2) + 20px);
        }

        div.fullWideImage {
            max-height: calc( 100vh / 2);
        }

        div.fullWideImage + div.blockContainer div.infoBlock h1 {
           position: absolute;
           top: 235px;
           left: 0;
           border-bottom: none;
           margin-left: 37px;
           z-index: 200;
        }

        div.infoBlock h1 {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 10px;
        }

        div.infoBlock h2 {
           margin-top: 0;
           margin-bottom: 0;
        }

        div.featureArchive {
           min-height: 100px;

        }

        div.featureArchive p{
           margin-top: 40px;
        }

       div.articleIssueInfo.mobile {
           display:none;
           margin-top: 0;
       }

       div.downloadButtons.mobile {
           display: none;
       }

       div.articleIssueInfo.desktop {
           display:block;
       }

       div.downloadButtons.desktop {
           display: block;
       }

      div.fullWideImage.CCE {
          max-height: calc(100vh / 2); 
      }

      div.topCardsContainer {
          width: 100%;
          display: flex;
          min-height: 203px; 
      }

      div.featPlus2 {
         flex-direction:column;
      }

     div.cardNarrowBottom {
         height: calc(100vh / 2.1);
     }

      div.featureFP {
          width: 100%;
          min-height: calc(100vw / 2.3);
      }

      div.topCards {
          min-height: calc(100vw / 2.3);
      }

      div.topCards:first-child {
          border-top: 2px solid #ECEFF1;
          border-right: 1px solid #ECEFF1;
          border-left: none;
          border-bottom: none;
      }
      div.topCards:nth-child(2) {
          border-top: 2px solid #ECEFF1;
          border-left: 1px solid #ECEFF1;
          border-right: none;
          border-bottom: none;
      }

      div.mobSiteSearch {
          width: calc(100vw - 150px);
      }

      div.mobSiteSearch input.siteSearch {
          margin-left: 10px;
          width: calc(100% - 90px);
      }
      div.mobSiteSearch input.searchControl {
      }

      table.hymnchart {
         font-size: 11px;
      }

}


@media only screen 
       and (min-device-width: 350px) 
       and (max-device-width: 410px)  
       and (orientation: portrait)
       and (pointer: coarse) ,
       only screen 
       and (min-device-width: 350px) 
       and (max-device-width: 410px)  
       and (orientation: portrait)
       and (min-resolution: 500dpi) { 


       div.menuicon {
       /*    margin: 0 7px; */
       }

       div.searchicon {
           margin: 0 7px;
       }

       div.title {
           max-width: 160px;
           margin: 4px calc(50% - 80px);
           font-size: 17px;
           font-weight: bold;
       }

       div.cardNarrow {
           margin: 10px auto 60px;
           width: 90%;
       }

       div.cardFooter {
          margin: 0 15px;
       }

       h2.featureFPNav a {
           font-size: 20px;
       }

       div.topCards h1 {
          font-size: 20px;
       }
}

@media only screen 
       and (max-device-width: 349px) 
       and (orientation: portrait) 
       and (pointer: coarse) ,
       only screen 
       and (max-device-width: 349px) 
       and (orientation: portrait) 
       and (min-resolution: 500dpi) { 


       .noTiny {
           display: none;
       }

       div.title {
          font-size: 16px;
          max-width: 160px;
          margin: 4px calc(50% - 80px); 
       }

       h2.featureFPNav a {
           font-size: 14px;
       }

       div.topCards h1 {
          font-size: 20px;
       }

       div.cardWide p {
          font-size: 12px;
       }

}

@media only print {

      .print {
         display: revert;
      }

      body {
         background: #FFF;
      }
      div.header {
          display: none;
      }
      div.opcFooter {
          display: none;
      }

      div.navButtons {
          display: none;
      }

      .mobile {
          display: revert;
      }

      .desktop {
          display: none;
      }

      div.infoBlock2.mobile {
          display: revert;
      }

      div.mainBlock {
          padding-bottom: 15px;
          margin-left: 0;
      }
      div.blockContainer {
          display: block;
      }

      div.archYear {
          display: block;
      }

      .landscape {
          display: none;
      }

      form {
          display: none;
      }

      a.downloadButton {
          display: none;
      }
      a.navButton {
          display: none;
      }

      div.churchSearchFP {
          display: none;
      }
      div.cards4Background {
          padding-top: 10px;
      }

      div.infoBlockImg {
          min-height: 285px;
      }

      div.midiplayer {
          display: none;
      }

      div.articleIssueInfo {
          display: none;
      }

      p.copyright.print {
         margin-left: 0;
         text-align: left;
         padding-bottom: 10px;
      }

      div.fullWideImage {
         min-height: 260px;
      }

      div.divGridTable.two.FMpersonnel {
         width: 300px;
      }

       div.featureCCENav {
          left: 40px;
          bottom: 40px;
       }

       div.featureCCENav.mobile{
          top: 20px;
          left: 40px;
          background: transparent;
          overflow: hidden;
          width: 80%;
      }


       h2.featureCCENav a {
           font-size:24px;
       }

       h3.featureCCENav a {
           font-size: 14px; 
       }

       h3.featureCCENav a span {
           float:right;
           font-size: 12px; 
           padding-top: 7px;
       }

       p.churchNav {
           display:none;
       }

       div.divGridTableCell {
            page-break-after: always;
            page-break-inside: avoid;
       }

}