* {
    margin: 0;
    padding: 0;
}

.sentinel .widget-box,
.journal .widget-box,
.herald .widget-box,
.quarterly .widget-box,
.monitor .widget-box {
    padding: 0 0 32px 0;
    height: 555px !important;
}

.sentinel .expanded-promo,
.journal .expanded-promo,
.herald .expanded-promo,
.quarterly .expanded-promo,
.monitor .expanded-promo {
    padding: 32px 0 32px 0;
    height: initial !important;
}

.tab-nav {
    width: 100%;
    display: flex;
    flex-flow: row no-wrap;
    align-items: center;
    justify-content: space-around;
    font-family: sans-serif;
    font-size: 16px;
    margin-bottom: 50px;
    border-bottom: 1px solid lightgray;
}

.hamburger-menu { 
    display: none;
}

.tab-btn {
    height: 48px;
    padding: 0 8px;
    cursor: pointer;
    background-color: transparent;
    font-size: 16px;
    outline: none;
    border: none;
    color: black;
    font-weight: normal;
    border-bottom: 3px solid transparent;
    transition: border 0.5s ease;
    text-transform: uppercase;
}

.tab-btn.clicked {
    border-bottom: 3px solid black;
    background-color: transparent;
}

.tab-btn:hover {
    border-bottom: 3px solid black;
    background-color: transparent;
}

.tab-btn:focus {
    border-bottom: 3px solid black;
    outline: none;
}

.tab-btn:visited {
    border-bottom: 0px solid black;
    font-weight: normal;
}

/* custom tab-nav for mobile view */
@media only screen and (max-width: 650px) {
    .products_nav_list {
        margin-bottom: 40px;
    }
    .hamburger-menu {
        display: flex;
        height: auto !important;
        width: auto;
        padding: 12px 16px;
        margin: 0;
        align-items: center;
        justify-content: center;
        border: none;
    }
    .hamburger-menu.active {
        background: #ccc;
    }
    .hamburger-menu .icon {
        background-image: url(/bundles/tfccschristianscience/images/icon_menu_mobile.svg);
        margin: 1px 8px 0 0;
    }
    .hamburger-menu span {
        margin-top: 3px;
    }
    .mobile-tab-menu {
        overflow: hidden;
        height: 0;
    }
    .mobile-tab-menu.open {
        height: 100%;
    }
    .tab-nav {
        flex-flow: row wrap;
        margin-bottom: 40px;
    }

    .tab-nav .tab-btn {
        height: unset;
        padding: 16px;
        width: 100%;
    }

    .tab-nav .tab-btn.clicked,
    .tab-nav .tab-btn:active,
    .tab-nav .tab-btn:focus {
        border: none;
        background: purple;
        color: white;
        text-decoration: none;
    }
}
  
a:hover {
    text-decoration: none;
}
  
.help-cta a:hover {
    cursor: pointer;
}
  
.help-cta a {
    color: #0265cb;
    text-decoration: underline;
    font-weight: bolder;
}
  
.promo-body {
    padding: 0 43px;
    display: flex;
    flex-flow: column;
    height: 236px;
}
  
.expanded-body {
    padding: 33px 88px 0 88px;
}

.expanded-row {
    margin-bottom: 32px;
}
  
.btn-label {
    margin: 3px 0 0 0;
    align-self: center;
    text-align: center;
    line-height: 1.2;
}

.btn-label.w-100 {
      width: 100%;
}
  
@-moz-document url-prefix() {
    .btn-label {
        align-self: center;
    }
    .inner-btn {
        align-items: center;
    }
}
  
.expanded-text-field {
    width: 90%;
    display: block;
    border-bottom: 1px #00000030 solid;
    margin-bottom: 40px !important;
}

#journal-btn-unit {
    margin-top: 83px;
}
  


button {
    height: 44px !important;
}
  
h5 {
    font-weight: bold;
}
  
.action-btn {
    padding: 8px 20px;
    align-items: center;
}
  
.hide-btn {
    display: none !important;
    height: 0 !important;
}
  
.main-nav-container-desktop nav,
.language-nav-container-desktop,
.main-nav-container-desktop,
.header__menu-button,
.header__search-mobile,
.eyebrow-nav-container-desktop div {
    display: none !important;
}

.utility-nav-container-desktop {
    visibility: hidden;
}

h3.heading-thin-medium {
    font-size: 28px !important;
}

.herald-menu {
    background: #f1f1f1;
    height: 126px;
    width: 208px;
    position: absolute;
    top: 168px;
    right: 165px;
}
  
.expanded-promo {
    width: 943px;
    height: 100vh !important;
}
.manage-btn a {
    color: black;
    height: 100%;
    width: 100%;
    align-self: center;
    line-height: 46px;
}

.qde-select-items div,
.qde-select-selected {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    height: 48px;
    display: flex !important;
    flex-flow: column !important;
    justify-content: center !important;
}

@media only screen and (max-width: 1000px) {
    .expanded-promo {
        width: 100%;
    }
}
  
@media only screen and (min-width: 1200px) {
    .expanded-promo {
        width: 1141px;
    }
}

.mobile-tab-nav {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: space-around;
    font-family: sans-serif;
    font-size: 16px;
    margin-bottom: 40px;
    /* border-bottom: 1px solid lightgray; */
    background: #f0f0f0;
}
.quarterly .btn-row {
    margin-top: -47px !important;
}
@media only screen and (max-width: 535px) {
    .promo-body {
        height: initial;
    }
    .hamburger {
        margin-bottom: -20px !important;
    }
  
    .journal .btn-row {
        margin-top: -52px !important;
    }
  
    .sentinel .btn-row {
        margin-top: -46px !important;
    }
  
    .herald .btn-row {
        margin-top: -69px !important;
    }
  
    .sentinel .expanded-promo,
    .journal .expanded-promo,
    .herald .expanded-promo,
    .quarterly .expanded-promo,
    .monitor .expanded-promo {
        height: 100% !important;
        display: flex !important;
        flex-flow: column !important;
    }
    .expanded-row {
        margin-bottom: 32px;
        display: flex;
        flex-flow: column;
    }
    .tab-btn {
        height: 48px;
        padding: 0 8px;
        cursor: pointer;
        font-size: 16px;
        outline: none;
        border: none;
        color: black;
        font-weight: normal;
        transition: border 0.5s ease;
        width: 100%;
        align-self: flex-start;
    }
    .tab-btn:hover {
        border: 0;
        background-color: purple;
        color: white;
    }
    .tab-btn.clicked {
        border-bottom: 1px solid #0000003d;
        background-color: transparent;
    }
    .tab-btn p {
        width: 100%;
        text-align: left;
    }
    .hamburger {
        background-color: rgba(0, 0, 0, 0);
        visibility: visible !important;
        width: 149px !important;
        height: 48px !important;
        background-color: #0000000f;
        /* background-position: 100% 50%; */
        color: black;
        padding: 0 16px;
    }
    .hamburger-unit {
        border-bottom: 1px solid #0000001a;
        padding: 0 0 16px 0;
    }
    .menu button {
        height: 48px;
        justify-content: stretch;
        width: 100%;
        border-bottom: 1px solid #ffffff2b;
    }
    .menu {
        height: 0;
        visibility: hidden;
        overflow: hidden;
    }
}

.hamburger {
    visibility: hidden;
    height: 0;
    width: 0;
}
  
.menu {
    height: 0;
    visibility: hidden;
}
  
.hamburger .icon {
    background: url("https://stage.christianscience.com/content/download/11992/250249/file/menu_black.svg");
    background-position: center;
    margin-right: 16px;
}

.icon {
    display: inline-block;
    background: no-repeat center center transparent;
    width: 20px;
    background-size: 100%;
    background-position: center;
    height: 24px;
    margin-left: 8px;
}
  
.action-btn {
    padding: 8px 20px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    height: 40px !important;
    width: calc(100% - 20px - 20px);
}
  
.btn-inner {
    display: flex;
    flex-flow: row;
    justify-content: center;
    width: 200px;
    margin: 20px auto;
}
  
.hidden-btn-unit {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
  
.hidden-promo-image {
    width: 0;
    height: 0;
}
  
.download-options {
    width: 80%;
    margin: 0 auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: flex-start;
}

.manage-btn {
    background-repeat: no-repeat;
    background-position: 101% 40%;
    width: 214px;
    background-size: 24px auto;
    background-color: #f1f1f1;
    color: black;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: inherit;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
  
.manage-btn:hover {
    color: white;
}
  
.option {
    width: 100%;
    height: 75%;
    max-width: 300px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}
  
.close-btn {
    float: right;
    align-self: flex-end;
    width: 48px;
    height: 48px;
    background: url(https://stage.christianscience.com/content/download/11958/229642/file/close.svg)
      no-repeat;
    background-position: center;
}

.product-grid a.action-btn {
    height: 32px;
    border: none;
    background-color: #757575;
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    flex-flow: row no-wrap;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
    padding: 0 8px;
    margin: 0 auto;
}
  
.product-grid a.action-btn:hover,
.product-grid a.action-btn:active,
.product-grid a.action-btn:focus {
    background-color: purple;
}
  
#icon {
    height: 24px;
    width: 19px;
    display: block;
    background: url("https://stage.christianscience.com/content/download/11906/229315/file/pdf_file_format_symbol.svg");
    background-size: 18px 25px;
    background-repeat: no-repeat;
    margin-left: 8px;
    align-self: center;
}
  
.btn-row {
    border-top: none !important;
    padding-top: 32px;
    height: 100% !important;
    width: 100%;
    display: flex;
    flex-flow: row no-wrap;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (max-width: 1200px) {
    .btn-row {
        flex-flow: column;
        height: 112px;
        align-items: start;
        justify-content: start;
    }
}
  
.btn-unit {
    display: flex;
    flex-flow: column;
    width: 100%;
}
  
.btn-unit p {
    font-weight: 300;
    font-family: sans-serif;
    text-transform: uppercase;
}
  
.btn-row {
    width: 90%;
    margin: 0 auto;
    border-top: 0;
}
  
.inner-btn {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.btn-row button {
    width: 100%;
    margin: 0 auto;
    height: 48px !important;
}
  
.herald .btn-row {
    margin-top: -26px;
}
  
.select-selected::after {
    top: 23px !important;
}
  
.journal .btn-row {
    margin-top: -4px;
}
  
.monitor .btn-row {
    margin-top: -25px;
}
  
.quarterly .btn-row {
    margin-top: -59px;
}
  
.close-btn:hover {
    background-color: lightgray;
}

.mag-cover {
    width: 151px;
    box-shadow: 1px 2px 2px #0000004a;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

.monitor .mag-cover {
    height: 199px !important;
}

.sentinel .mag-cover {
    width: 150px !important;
}

#sentinel-btn-unit {
    margin-top: 90px;
}
  
#content {
    background-color: #fff;
    margin-bottom: 50px;
}
  
#herald-btn-unit {
    margin-top: 56px;
}
  
#quarterly-btn-unit {
    margin-top: 96px;
}
  
#monitor-btn-unit {
    margin-top: 32px;
}
  
.product-grid {
    display: flex;
    margin: 32px -11px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.grid-item:hover {
    background-color: #e6e6e6;
}

.grid-item {
    display: flex;
    flex-flow: column;
    padding: 0;
    background-color: #f1f1f1;
    align-items: center;
    padding-bottom: 20px;
    flex: 0 0 33%;
    max-width: calc(33% - 22px);
    margin: 11px;
    transition: background 0.2s ease-in-out;
}
.grid-item:not(.download-media-item):not(.question) {
    cursor: pointer;
}

@media only screen and (max-width: 1004px) {
    .grid-item {
        flex: 0 0 50%;
        max-width: calc(50% - 22px);
    }
    .help-cta {
      margin-top: 200%;
    }
}
  
@media only screen and (max-width: 610px) {
    .grid-item {
        flex: 0 0 100%;
        max-width: calc(100% - 22px);
    }
    .help-cta {
      margin-top: 200%;
    }
}

@media only screen and (max-width: 425px) {
    .grid-item {
        flex: 0 0 100%;
        max-width: calc(100% - 22px);
    }
    .footer {
      margin-top: 36%;
    }
}
  
@media only screen and (max-width: 375px) {
    .card-body-expand {
      padding-top: 32px !important;
      height: auto !important;
    }
}
  
.help-cta {
    display: none;
}
  
.card-image {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 60% 0 0 0;
}
  
.card-body {
    width: 100%;
    padding: 20px;
    flex-grow: 2;
}
  
.card-body-expand {
    background-size: 0 !important;
    padding: 32px;
    width: calc(100% - 48px);
    border-bottom: 1px solid #00000012;
    margin-bottom: 56px;
}
  
.custom-select {
    background: #f0f2f8;
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    width: calc(100% - 32px);
}
  
.hide-select {
    display: none;
    height: 0;
} 
  
.custom-select select {
    display: none;
}
  
.select-selected {
    background-color: #757575;
    color: white;
    transition: background-color 0.2s;
}

.select-selected:hover {
    background-color: purple;
    color: white;
}

.select-selected::after {
    position: absolute;
    content: "";
    top: 23px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}
  
.select-selected.arrow-active::after {
    border-color: transparent transparent #fff transparent;
    top: 15px !important;
}
  
.select-items div,
.select-selected {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    height: 48px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
  
.select-items {
    position: absolute;
    background-color: lightgrey;
    left: 0;
    right: 0;
    z-index: 99;
}
  
.hide {
    display: none;
}
  
.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: bold;
}
  
.lang-dd-container {
    width: 200px;
    height: 200px;
    background-color: #f1f1f1;
    position: absolute;
}
  
.lang-dd-container {
    display: flex;
    flex-flow: column;
    height: initial;
}
  
.lang-menu-item {
    background-color: #f1f1f1;
    color: black;
    font-weight: normal;
    border-bottom: 1px solid #00000014;
    display: flex;
    flex-flow: row;
    justify-content: start;
    align-items: center;
    padding: 0 16px;
}
  
.lang-menu-item:hover {
    color: white;
}
  
.download-grid {
    height: 100%;
    width: calc(100% - 40px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-flow: row;
    /* grid-template-rows: repeat(auto-fit, minmax(280px, 1fr)); */
    grid-gap: 100px 0;
}

.download-item {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: calc(100% - 32px - 32px);
    max-width: 350px;
    justify-content: stretch;
    align-items: center;
}

.download-btn {
    width: calc(100% - 32px);
    text-align: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-top: 32px;
}
  
.download-btn .icon {
    background-image: url("https://stage.christianscience.com/content/download/11906/229315/file/pdf_file_format_symbol.svg");
}
  
.download-btn .btn-label {
    margin-right: 16px;
}
  
.download-btn .inner-btn {
    width: auto;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

a.link-item {
    font-size: 14px;
}
  
a.link-item:hover {
    color: #0265cb;
}
  
.link-row {
    display: flex;
    flex-flow: row;
}
  
.link-row div {
    height: 20px;
    border-right: 1px solid black;
    width: 1px;
    margin: 0 12px;
}

.hub-intro {
    max-width: 775px;
}
  
.question {
    justify-content: space-between;
}
  
.question-btn-row {
    display: flex;
    flex-flow: column;
    align-self: baseline;
    height: calc(48px + 48px + 16px);
    align-items: stretch;
    justify-content: space-between;
    width: calc(100% - 16px - 16px);
    margin: 0 auto;
}
  
.question-btn-row button {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
  
.question-content {
    width: 100%;
    padding: 0 53px;
    display: flex;
    height: 75%;
    flex-flow: column;
    justify-content: center;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.download-block {
    background: #e6e6e6;
    width: 100%;
    padding: 20px;
}

.product-header {
    border-bottom: 1px solid #00000012;
    margin-bottom: 30px;
}

.download-media-item {
    background: none;
    margin: 30px 11px;
    padding-top: 20px;
}

.download-media-item .media-image img {
    width: 100%;
    max-width: 160px;
    box-shadow: 1px 2px 2px #0000004a;
}

.download-media-item .card-body .card-title {
    margin-top: 3px;
    text-align: center;
    font-size: 18px;
    color: #000000;
}

.download-media-item .action-btn {
    background: #757575;
    color: white;
}

.download-media-item:hover .action-btn,
.download-media-item:focus .action-btn,
.download-media-item:active .action-btn {
    background: purple;
    color: white;
}

/* filter */
.download-block .filter {
    padding: 20px;
}

.download-block .filter .btn {
    width: 100%;
    max-width: 300px;
    height: 44px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #757575;
    color: #fff;
    transition: all 0.2s ease-in-out;
}

.download-block .filter .btn label {
    margin-bottom: 0;
    text-transform: uppercase;
}

.download-block .filter .btn span.caret {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg) translate(-20%);
    -webkit-transform: rotate(45deg) translate(-20%);
    transition: all 0.4s ease-in-out;
}

.download-block .filter .open .btn {
    background: purple;
}

.download-block .filter .btn:active,
.download-block .filter .btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.download-block .filter .open .btn span.caret {
    transform: rotate(225deg) translate(-20%);
    -webkit-transform: rotate(225deg) translate(-20%);
}

.download-block .filter .dropdown-menu {
    background: #e6e6e6;
    padding: 0;
    width: 320px;
    border: none;
}

.download-block .filter .dropdown-menu .dropdown-item {
    width: 100%;
    border: none;
    border-bottom: 1px solid #00000014;
    text-align: left;
    padding: 0 20px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.download-block .filter .dropdown-menu .dropdown-item:last-child {
    border-bottom: 0;
}

.download-block .filter .dropdown-menu .dropdown-item:hover,
.download-block .filter .dropdown-menu .dropdown-item.active {
    background: purple;
    color: white;
}

.download-block .filter .dropdown-menu .dropdown-item:focus,
.download-block .filter .dropdown-menu .dropdown-item:active {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.subscription_links ul {
    padding: 0;
    list-style: none;
    margin-bottom: 30px;
}

.subscription_links ul li {
    display: inline;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #666;
}

.subscription_links ul li p {
    display: inline;
}

.subscription_links ul li:last-child {
    border-right: none;
}

.d-none {
    display: none;
}