/* GLOBALS like body, p, btn, etc... */
body {
    margin-top: 65px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 22px;
    font-family: 'Montserrat', sans-serif;
}

p {
    font-family: 'Open Sans', sans-serif;
}

a {
    color: black;
    text-decoration: none !important;
}

a:hover {
    color: black;
    opacity: .6;
    text-decoration: none !important;
}
.white-text-link a, .white-text-link a:hover{
    color: white !important;
}
btn,
.btn,
button,
.button {
    border-radius: 0;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.modal {
    z-index: 10002;
}

.modal-backdrop {
    z-index: 10001;
}

footer {
    margin: 0px 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
}

/* IDENTIFIERS AND CLASSES */
.donations-modal-dialog {
    max-width: 400px;
}

.donations-modal-body {
    padding: 0;
    //margin-bottom: -2.5rem;
}

.single-img {
    margin-top: 15px;
    width: 100%;
}

.person-img {
    margin-top: 15px;
    width: 100%;
    max-width: 500px;
}

.page-img {
    width: 100%;
    text-align: center;
    display: inline;
    margin-bottom: 15px;
}

.bcc_offCanvasToggleButton:focus {
    box-shadow: none;
}

.lead {
    font-size: 18px;
    text-align: justify;
    margin-top: 15px;
}

.container {
    /*    padding-left: inherit;
    padding-right: inherit;*/
    padding-top: 30px;
    padding-bottom: 30px;
}

.container-fluid {
    padding: 30px 10% 30px 10%;
}

.bcc_slide {
    width: 100%;
    padding-top: 54.32%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    position: relative;
}

.bcc_slide > .bcc_slide-inner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding-top: 68px;
}

/* headline is our class for the largest version of headings.  this is appropriate for placing over header images like on the front page */
.headline h1,
h1.headline {
    font-size: 77px;
}

.headline h2,
h2.headline {
    font-size: 60px;
}

.headline h3,
h3.headline {
    font-size: 40px;
}

/* 
featurette is our class for all things that pertain to individual posts, pages, custom post types.  Used for the headings on homepage too.  All of the headings, img, etc... work together for responsive sizes that make sense so that whatever the author places inside their post will most likely work out - at least that is the goal 
featurette-heading is usually the title, 
featurette-meta-mini(should be both) */
.featurette-heading {
    font-size: 50px; /*was 40*/
    text-align: center;
    margin: 0;
}

.featurette-meta-mini {
    font-weight: normal;
    font-size: 16px;
    text-align: center;
    margin: 0;
}

.featurette-content {
    text-align: left;
}

.featurette-content img {
    max-width: 100%;
    height: auto;
}

.featurette-content a {
    color: blue;
}

/* these sizes should fluctuate between h1 - as large as our title and h6 as small as the paragraph size.  So, h6 will always stay 18*/
.featurette-content h1 {
    font-size: 50px; /* was 35 */
}

.featurette-content h2 {
    font-size: 44px; /* was 33 */
}

.featurette-content h3 {
    font-size: 37px; /* was 31 */
}

.featurette-content h4 {
    font-size: 31px; /* was 29 */
}

.featurette-content h5 {
    font-size: 24px; /* was 27 */
}

.featurette-content h6 {
    font-size: 18px; /* was  */
}

/* now the challenge of sizing these things appropriately */
@media (max-width:1200px)
{
    .headline h1,
    h1.headline {
        font-size: 63px;
    }

    .headline h2,
    h2.headline {
        font-size: 49px;
    }

    .headline h3,
    h3.headline {
        font-size: 35px;
    }

    .featurette-divider {
        margin: 30px 0;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .featurette-heading { /* was 35 */
        font-size: 45px;
    }

    .featurette-content h1 {
        font-size: 45px;
    }

    .featurette-content h2 {
        font-size: 40px;
    }

    .featurette-content h3 {
        font-size: 34px;
    }

    .featurette-content h4 {
        font-size: 29px;
    }

    .featurette-content h5 {
        font-size: 23px;
    }
}

@media (max-width:991px)
{
    .headline h1,
    h1.headline {
        font-size: 50px;
    }

    .headline h2,
    h2.headline {
        font-size: 40px;
    }

    .headline h3,
    h3.headline {
        font-size: 30px;
    }

    .featurette-heading {
        font-size: 40px; /* was 30 */
        margin-top: 0;
    }

    .featurette-content h1 {
        font-size: 40px;
    }

    .featurette-content h2 {
        font-size: 36px;
    }

    .featurette-content h3 {
        font-size: 31px;
    }

    .featurette-content h4 {
        font-size: 27px;
    }

    .featurette-content h5 {
        font-size: 22px;
    }
}

@media (max-width:767px)
{
    .headline h1,
    h1.headline {
        font-size: 40px;
    }

    .headline h2,
    h2.headline {
        font-size: 35px;
    }

    .headline h3,
    h3.headline {
        font-size: 27px;
    }

    .featurette-heading {
        font-size: 35px; /* was 25 */
    }

    .featurette-content h1 {
        font-size: 35px;
    }

    .featurette-content h2 {
        font-size: 32px;
    }

    .featurette-content h3 {
        font-size: 28px;
    }

    .featurette-content h4 {
        font-size: 25px;
    }

    .featurette-content h5 {
        font-size: 21px;
    }

    .featurette-meta-mini {
        font-size: 12px;
    }

    .bcc_slide {
        padding-top: 100%;
    }

    .bcc_slide video {
        -webkit-transform: scale(1.8);
        -ms-transform: scale(1.8);
        transform: scale(1.8);
    }
}

@media (max-width:575px)
{
    .headline h1,
    h1.headline {
        font-size: 30px;
    }

    .headline h2,
    h2.headline {
        font-size: 30px;
    }

    .headline h3,
    h3.headline {
        font-size: 24px;
    }

    .featurette-heading {
        font-size: 30px; /* was not here */
    }

    .featurette-content h1 {
        font-size: 30px;
    }

    .featurette-content h2 {
        font-size: 28px;
    }

    .featurette-content h3 {
        font-size: 25px;
    }

    .featurette-content h4 {
        font-size: 23px;
    }

    .featurette-content h5 {
        font-size: 20px;
    }

    .container-fluid {
        padding: 15px;

        /*padding-left: 30px;
        padding-right: 30px;*/
    }
}

.bcc_slider-main-prev,
.bcc_slider-main-next {
    font-size: 5vw;
}

@media (max-width:480px)
{
    .bcc_slider-main-prev,
    .bcc_slider-main-next {
        font-size: 24px;
    }
}

.bcc_slider-prev,
.bcc_slider-next {
    cursor: pointer;
    outline: none;
}

.bcc_slider-prev,
.bcc_slider-next,
.bcc_slider-fraction {
    color: white;
    opacity: 1;
}

.bcc_invert {
   // color: white;
}

a.bcc_invert:hover {
   // color: #0056b3;
}

/* button classes */
btn.bcc_btn-outline,
.btn.bcc_btn-outline,
button.bcc_btn-outline,
.button.bcc_btn-outline {
    color: white;
    border-color: white;
    background-color: transparent;
}

btn.bcc_btn-outline:focus,
.btn.bcc_btn-outline:focus,
button.bcc_btn-outline:focus,
.button.bcc_btn-outline:focus {
    box-shadow: 0 0 0 0.2rem rgba(141, 199, 63, 0.25);
}

/* footer-dark */
.footer-dark h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 16px;
}

.footer-dark ul {
    padding: 0;
    list-style: none;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 0;
}

.footer-dark ul a {
    color: inherit;
    text-decoration: none;
    opacity: 0.6;
}

.footer-dark ul a:hover {
    opacity: 0.8;
}

@media (max-width:767px) {
    .footer-dark .item:not(.social) {
        text-align: center;
        padding-bottom: 20px;
    }
}

.footer-dark .item.text {
    margin-bottom: 36px;
}

@media (max-width:767px) {
    .footer-dark .item.text {
        margin-bottom: 0;
    }
}

.footer-dark .item.text p {
    opacity: 0.6;
    margin-bottom: 0;
}

.footer-dark .item.social {
    text-align: center;
}

@media (max-width:991px) {
    .footer-dark .item.social {
        text-align: center;
        margin-top: 20px;
    }
}

.footer-dark .item.social > a {
    font-size: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
    margin: 0 8px;
    color: #fff;
    opacity: 0.75;
}

.footer-dark .item.social > a:hover {
    opacity: 0.3;
}

.footer-dark .copyright {
    text-align: center;
    padding-top: 10px;
    opacity: 0.3;
    font-size: 13px;
    color: white;
    margin-bottom: 0;
}

.footer-dark {
    padding: 0;
    color: #f0f9ff;
    background-color: #282d32;
}

.footer-basic {
    padding: 40px 0;
    background-color: #ffffff;
    color: #4b4c4d;
}

/* Realm in Nav Menu's */
a.bcc-realm {
    position: relative;
    margin: 0px 0 0 4px;
    top: 2px;
}

#sideNav a.bcc-realm {
    position: relative;
    margin: 0px 0 0 0px;
    top: 10px;
}

/* bend city Top Nav Menu */
div#topNavMenu ul {
    margin-top: 0;
    margin-bottom: 0rem;
    font-family: "Bebas Neue", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
div#topNavMenu .bcc_TopMenuLink {
    position: relative;
    padding: 0;
    margin: 0 5px;
    width: auto;
    display: inline-block;
}
div#topNavMenu .bcc_offCanvasShowMoreButton {
    margin-bottom: 0px;
    margin-left: 7px;
    float: right;
}
div#topNavMenu .bcc_menuSubgroup {
    position: absolute;
    background-color: #f9f9f9;
    width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 8px 8px;
    z-index: 1;
}
div#topNavMenu .bcc_menuSubgroup .bcc_TopMenuLink {
    position: relative;
    padding: 0;
    display: block;
    margin: 3px;
}

div#topNavMenu li.bcc_TopMenuLink.show a span.bcc_offCanvasShowMoreButton {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

div#topNavMenu li.menu-item-search.bcc_TopMenuLink {
    top: 5px;
}
div#topNavMenu .form-control {
    display: inline;
    width: 100%;
}
div#topNavMenu input#searchsubmit {
    position: absolute;
    top: 0px;
    right: 5px;
    padding: 27px 20px;
    width: 20px;
    height: 20px;
    background: transparent url(../../assets/img/searchicon.png) no-repeat center center;
    border: none;
    text-indent: -9999px;
    cursor: pointer;
}

    @media (max-width: 1000px) {
        div#topNavMenu {
           display: none;
        }
    }

    /* Styles for screens 768px and wider */
    @media (min-width: 1001px) {
        i.icon.ion-android-menu.bcc_offCanvasToggleButton {
            display: none;
        }
    }

/* bend city off canvas area */
#sideNav {
    z-index: 1000;
}

#sideNav a {
    font-size: 24px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    opacity: 1;
}

#sideNav a:hover {
    opacity: 0.6;
}

#sideNav .current-menu-item {
    color: orange;
    font-weight: 500;
}

.bcc_body {
    position: relative;
    left: 0;
}

.bcc_offCanvasMenu,
.bcc_offCanvasInterior,
.bcc_header,
.bcc_body,
.bcc_offCanvasShowMoreButton,
#topNav,
#topNav img {
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.bcc_offCanvasMenu {
    position: fixed;
    width: 300px;
    top: 0;
    bottom: 0;
    right: -300px;
    overflow: hidden;
}

.bcc_body._menuOpen,
.bcc_header._menuOpen,
.bcc_offCanvasMenu._menuOpen {
    -webkit-transform: translateX(-300px);
    -ms-transform: translateX(-300px);
    transform: translateX(-300px);
}

.bcc_offCanvasInterior {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
}

.bcc_offCanvasInterior._menuOpen {
    -webkit-transform: translateX(150px);
    -ms-transform: translateX(150px);
    transform: translateX(150px);
}

.bcc_offCanvasSearch {
    background-color: white;
    padding: 5px;
    margin: -8px -8px 8px;
    min-height: 65px;
}

.bcc_offCanvasSearch img {
    width: 100%;
    margin-top: 15px;
}

.bcc_offCanvasSearch input {
    background-image: url('../../assets/img/searchicon.png');
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding-left: 40px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.bcc_offCanvasSearch input:focus {
    border-color: #8dc73f;
    box-shadow: 0 0 0 0.2rem #8dc73f40;
}

.bcc_sideMenuColor {
    background-color: #222222;
}

.bcc_offCanvasShowMoreButton {
    margin-bottom: 3px;
    float: right;
}

.bcc_menuLink.showMore .bcc_offCanvasShowMoreButton {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.bcc_menuLink {
    position: relative;
    clear: both;
    padding: 0;
    width: 100%;
    display: block;
}

.bcc_menuLinkInner {
    width: 100%;
    display: table;
}

.bcc_menuLink img {
    width: 20px;
}

.bcc_menuSubgroup {
    position: relative;
    clear: both;
    padding: 0 0 0 25px;
    width: 100%;
    //display: block;
    //box-sizing: border-box;
}

/* topNav */
#topNav {
    position: relative;
    margin: 0;
    height: 65px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

body._atFirstTransparent {
    margin-top: 0;
}

#topNav,
#topNav._atFirstTransparent._scrolled {
    background-color: white;
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.3);
}

#topNav i,
#topNav p,
#topNav li,
#topNav._atFirstTransparent._scrolled i,
#topNav._atFirstTransparent._scrolled p,
#topNav._atFirstTransparent._scrolled li {
    color: black;
}

#topNav._atFirstTransparent i,
#topNav._atFirstTransparent p,
#topNav._atFirstTransparent li {
    color: white;
}

#topNav._atFirstTransparent {
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#topNav._atFirstTransparent .coloredLogo,
#topNav .whiteLogo,
#topNav._atFirstTransparent._scrolled .whiteLogo {
    visibility: hidden;
    opacity: 0;
}

#topNav .coloredLogo,
#topNav._atFirstTransparent._scrolled .coloredLogo,
#topNav._atFirstTransparent .whiteLogo {
    visibility: visible;
    opacity: 1;
}

/*---------------------------------------- I'm not sure about these items between here (down) ---------------------------------------*/
#topNav.navbar .navbar-nav > li.active a {
    background-color: #f2f2f2;
}

#topNav.navbar .navbar-nav > li > a {
    margin: 0 5px;
    padding: 15px 15px;
    text-align: left;
}

#topNav.navbar .navbar-nav > li > a {
    border-radius: 0;
}

/*---------------------------------------- I'm not sure about these items between here (up) ---------------------------------------*/
.bcc_header.bcc_hide {
    top: -65px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bcc_header {
    z-index: 10000;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.customize-support .bcc_header,
.customize-support .bcc_offCanvasMenu {
    top: 32px;
}

@media (max-width:782px) {
    .customize-support .bcc_header,
    .customize-support .bcc_offCanvasMenu {
        top: 46px;
    }
}

/* homepage stuff */
.feature-header {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    position: relative;
    margin-top: 35px;
    margin-bottom: 0;
    min-height: 250px;
}

.feature-end {
}

.section-header {
    width: 100%;
    //padding-top: 7%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    position: relative;
}

@media (min-width:769px)
{
    .feature-header {
        padding-top: 25%;
    }

    .feature-end {
        margin-bottom: 7%;
    }

    .section-header {
        padding-top: 7%;
    }
}

@media (max-width:768px)
{
    .feature-header {
        padding-top: 40%;
    }

    .feature-end {
        margin-bottom: 20%;
    }

    .section-header {
        padding-top: 20%;
    }
}

/* swiper styles */
.swiper-slide {
    background-color: whitesmoke;
    overflow: hidden;
    height: 200%;
}

.swiper-slide h2 {
    color: #262626;
}

.swiper-button-disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none;
}

/* -------------------------------------------- Styling for .resources -------------------------------------------------- 

The idea is that the same resource is styled differently depending on whether the resource is _mini or _regular.  3 minis stacked vertically should take up the same footprint as 1 _regular.  So this also has to do with the gap between the columns, hence the reason that I start with
adjusting the margin and padding for itscontainers, rows, and column.  ---------------------------------------------------------*/
.resource-container {
    padding-left: 0;
    padding-right: 0;
}

.resource-container._large-container .row {
    margin: -10px;
}

.resource-container._large-container .row div[class^="col-"] {
    padding: 10px;
}

.resource-container._small-container .row {
    margin: -7px;
}

.resource-container._small-container .row div[class^="col-"] {
    padding: 7px;
}

@media (max-width:575px)
{
    .resource-container {
        padding: 15px;
    }
}

.resource {
    display: flex;
    overflow: hidden;
    background-color: white;
    border: none;
    position: relative;
}

.resource .display,
.resource .description {
    position: relative;
}

.resource._mini,
.resource._regular,
.resource._picture {
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.resource._mini:hover,
.resource._regular:hover,
.resource._picture:hover {
    opacity: .9;
}

.resource._mini {
    flex-direction: row;
    height: 125px;
}

.resource._mini .display {
    flex-basis: 34%;
}

.resource._mini .description {
    flex-basis: 66%;
}

.resource .month,
.resource .day {
    margin: 0;
    padding: 0;
}

.resource._mini .description > .date {
    position: absolute;
    width: 55px;
    height: 55px;
    bottom: 0;
    left: -55px;
    padding: 3px;
}

.resource._picture .description > .date {
    position: relative;
    width: 70px;
    height: 70px;
    padding: 3px;
    margin-right: 5px;
}

.resource._regular,
.resource._picture {
    flex-direction: column;
    height: 403px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.6);
}
.resource._picture.person {
    height: 475px;
}
.resource .display {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.resource._regular .display {
    flex-basis: 50%;
    height: 50%;
}

.resource._picture .display {
    flex-basis: 80%;
    height: 80%;
}

.resource .description {
    padding: 5px;
}

.resource._regular .description {
    flex-basis: 50%;
    height: 50%;
}

.resource._picture .description {
    flex-basis: 20%;
    height: 20%;
}

.resource._regular .description .date {
    position: relative;
    width: 75px;
    height: 75px;
    margin-right: 5px;
    padding: 6px;
}

.resource .title {
    font-size: 20px;
    margin: 0;
}

.resource .email {
    font-size: 20px;
    margin: 0;
}

.resource .meta {
    font-size: 16px;
    margin: 0;
}

.resource p {
    margin-top: 5px;
    line-height: 1.5;
}

.resource .display .tag {
    position: absolute;
    margin: 5px;
    padding: 5px;
    font-size: 18px;
    color: black;
    background-color: rgba(255,255,255,0.50);
}

.resource._mini .display .tag {
    display: none;
}

.resource .date {
    background-image: url('../../assets/img/gradient.png');
    text-align: center;
    color: white;
}

.resource._regular .date .month {
    font-size: 24px;
}

.resource._regular .date .day {
    font-size: 32px;
}

.resource._mini .date .month,
.resource._picture .date .month {
    font-size: 20px;
}

.resource._mini .date .day,
.resource._picture .date .day {
    font-size: 24px;
}

.resource .display .bcc_bio {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.60);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    padding: 5px;
}

.resource .display .bcc_bio:hover {
    opacity: 1;
}

a.resource-link:hover {
    opacity: 1;
}

/*------------------------------- small media player -------------------------------*/
.sc_player_container1 .myButton_play {
    background: transparent url(../../assets/img/playButton.png) no-repeat !important;
    cursor: pointer !important;
    width: 100px !important;
    height: 100px !important;
    border: none !important;
    position: relative;
    background-size: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sc_player_container1 .myButton_play:hover {
    opacity: .75;
}

.sc_player_container1 .myButton_stop {
    background: transparent url(../../assets/img/pauseButton.png) no-repeat !important;
    cursor: pointer !important;
    width: 100px !important;
    height: 100px !important;
    border: none !important;
    position: relative;
    background-size: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sc_player_container1 .myButton_stop:hover {
    opacity: .75;
}

/* --------------------------------------- pagination --------------------------------------- */
.pagination {
    margin-top: 30px;
}

.page-link:hover {
    color: white;
}

.page-link:focus {
    box-shadow: none;
}

.pagination > li > a {
    color: black;
}

.pagination > .page-item.active > .page-link {
    background-color: #8dc73f;
    border-color: #8dc73f;
}

.bcc-audioPlayer.transparent .mejs-controls,
.bcc-audioPlayer.transparent .mejs-mediaelement,
.bcc-audioPlayer.transparent.mejs-container {
    background: url('') !important;
    background-color: #22222225 !important;
}

.bcc-audioPlayer .mejs-controls,
.bcc-audioPlayer .mejs-mediaelement,
.bcc-audioPlayer.mejs-container {
    background: #222222 !important;
    background-color: #222222 !important;
}

.bccFlow2018-theme .mejs-controls,
.bccFlow2018-theme .mejs-mediaelement,
.bccFlow2018-theme.mejs-container {
    background: #222222;
    background-color: #222222 !important;
}