﻿@font-face {
    font-family: 'FERCFont';
    src: url('/stylesheets/FERCFont/FERCFont2.eot');
    src: url('/stylesheets/FERCFont/FERCFont2.eot') format('embedded-opentype'), url('/stylesheets/FERCFont/FERCFont2.ttf') format('truetype'), url('/stylesheets/FERCFont/FERCFont2.woff') format('woff'), url('/stylesheets/FERCFont/FERCFont2.woff2') format('woff2'), url('/stylesheets/FERCFont/FERCFont2.svg') format('svg');
}

body {
    background-attachment: fixed;
    background-image: url("/images/background.jpg");
    padding-bottom: 20px;
}

small.chinese {
    font-size: 0.8em;
}

.btn-semi-transparent {
    background: rgba(51,122,183,0.5);
}

    .btn-semi-transparent:hover {
        background: rgba(40,96,144,0.5);
    }

.if-member {
    display: none;
}

.unless-member {
    display: inherit;
}

.hero-container {
    margin: 0 -15px 15px;
}

.modal-header.bg-primary {
    border-radius: 5px 5px 0 0;
}

.navbar.navbar-inverse.navbar-fixed-top {
    background-color: #036;
    border-color: transparent;
}

.navbar-toggle:focus, .navbar-toggle:hover, .navbar-toggle {
    background-color: #036 !important;
}

.navbar-inverse:hover, .navbar-nav > li > a:hover, .navbar-brand {
    color: #fff !important;
}

.navbar-inverse, .navbar-nav > li > a {
    color: #ddd !important;
}

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
        background-color: #036;
        color: #fff;
        text-shadow: 0 0 15px #fff;
    }

.navbar-toggle {
    border-color: #ccc !important;
}

.footer {
    box-shadow: 0 0 25px #888;
    padding: 15px;
}

a:hover:not(.btn), a:focus:not(.btn) {
    text-decoration: none;
    text-shadow: 0 0 15px rgba(51,122,183,0.5);
}

.FERCFont {
    font-family: 'FERCFont';
}

.FERC-W:before {
    content: '\f100';
}

.FERC-CI:before {
    content: '\f101';
}

.FERC-M:before {
    content: '\f102';
}

.FERC-O:before {
    content: '\f103';
}

.FERC-C:before {
    content: '\f104';
}

.FERC-E:before {
    content: '\f105';
}

/* Selected Bootstrap 4-inspired classes */
.m-0 { margin: 0; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 10px; }
.ml-3 { margin-left: 15px; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 5px; }
.mr-2 { margin-right: 10px; }
.mr-3 { margin-right: 15px; }
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 5px; margin-right: 5px; }
.mx-2 { margin-left: 10px; margin-right: 10px; }
.mx-3 { margin-left: 15px; margin-right: 15px; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 5px; margin-bottom: 5px; }
.my-2 { margin-top: 10px; margin-bottom: 10px; }
.my-3 { margin-top: 15px; margin-bottom: 15px; }
.p-0 { padding: 0; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 5px; }
.pt-2 { padding-top: 10px; }
.pt-3 { padding-top: 15px; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 5px; }
.pb-2 { padding-bottom: 10px; }
.pb-3 { padding-bottom: 15px; }
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 5px; }
.pl-2 { padding-left: 10px; }
.pl-3 { padding-left: 15px; }
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 5px; }
.pr-2 { padding-right: 10px; }
.pr-3 { padding-right: 15px; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 5px; padding-right: 5px; }
.px-2 { padding-left: 10px; padding-right: 10px; }
.px-3 { padding-left: 15px; padding-right: 15px; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 5px; padding-bottom: 5px; }
.py-2 { padding-top: 10px; padding-bottom: 10px; }
.py-3 { padding-top: 15px; padding-bottom: 15px; }

.visible-xxs-inline { display: none!important; }

@media (max-width: 575px) {
    .hidden-xxs { display: none!important; }
    .visible-xxs-inline { display: inline!important; }
}

@media (min-width: 768px) {
    .m-sm-0 { margin: 0; }
    .m-sm-1 { margin: 5px; }
    .m-sm-2 { margin: 10px; }
    .m-sm-3 { margin: 15px; }
    .mt-sm-0 { margin-top: 0; }
    .mt-sm-1 { margin-top: 5px; }
    .mt-sm-2 { margin-top: 10px; }
    .mt-sm-3 { margin-top: 15px; }
    .mb-sm-0 { margin-bottom: 0; }
    .mb-sm-1 { margin-bottom: 5px; }
    .mb-sm-2 { margin-bottom: 10px; }
    .mb-sm-3 { margin-bottom: 15px; }
    .ml-sm-0 { margin-left: 0; }
    .ml-sm-1 { margin-left: 5px; }
    .ml-sm-2 { margin-left: 10px; }
    .ml-sm-3 { margin-left: 15px; }
    .mr-sm-0 { margin-right: 0; }
    .mr-sm-1 { margin-right: 5px; }
    .mr-sm-2 { margin-right: 10px; }
    .mr-sm-3 { margin-right: 15px; }
    .mx-sm-0 { margin-left: 0; margin-right: 0; }
    .mx-sm-1 { margin-left: 5px; margin-right: 5px; }
    .mx-sm-2 { margin-left: 10px; margin-right: 10px; }
    .mx-sm-3 { margin-left: 15px; margin-right: 15px; }
    .my-sm-0 { margin-top: 0; margin-bottom: 0; }
    .my-sm-1 { margin-top: 5px; margin-bottom: 5px; }
    .my-sm-2 { margin-top: 10px; margin-bottom: 10px; }
    .my-sm-3 { margin-top: 15px; margin-bottom: 15px; }
    .p-sm-0 { padding: 0; }
    .p-sm-1 { padding: 5px; }
    .p-sm-2 { padding: 10px; }
    .p-sm-3 { padding: 15px; }
    .pt-sm-0 { padding-top: 0; }
    .pt-sm-1 { padding-top: 5px; }
    .pt-sm-2 { padding-top: 10px; }
    .pt-sm-3 { padding-top: 15px; }
    .pb-sm-0 { padding-bottom: 0; }
    .pb-sm-1 { padding-bottom: 5px; }
    .pb-sm-2 { padding-bottom: 10px; }
    .pb-sm-3 { padding-bottom: 15px; }
    .pl-sm-0 { padding-left: 0; }
    .pl-sm-1 { padding-left: 5px; }
    .pl-sm-2 { padding-left: 10px; }
    .pl-sm-3 { padding-left: 15px; }
    .pr-sm-0 { padding-right: 0; }
    .pr-sm-1 { padding-right: 5px; }
    .pr-sm-2 { padding-right: 10px; }
    .pr-sm-3 { padding-right: 15px; }
    .px-sm-0 { padding-left: 0; padding-right: 0; }
    .px-sm-1 { padding-left: 5px; padding-right: 5px; }
    .px-sm-2 { padding-left: 10px; padding-right: 10px; }
    .px-sm-3 { padding-left: 15px; padding-right: 15px; }
    .py-sm-0 { padding-top: 0; padding-bottom: 0; }
    .py-sm-1 { padding-top: 5px; padding-bottom: 5px; }
    .py-sm-2 { padding-top: 10px; padding-bottom: 10px; }
    .py-sm-3 { padding-top: 15px; padding-bottom: 15px; }
}

@media (min-width: 992px) {
    .m-md-0 { margin: 0; }
    .m-md-1 { margin: 5px; }
    .m-md-2 { margin: 10px; }
    .m-md-3 { margin: 15px; }
    .mt-md-0 { margin-top: 0; }
    .mt-md-1 { margin-top: 5px; }
    .mt-md-2 { margin-top: 10px; }
    .mt-md-3 { margin-top: 15px; }
    .mb-md-0 { margin-bottom: 0; }
    .mb-md-1 { margin-bottom: 5px; }
    .mb-md-2 { margin-bottom: 10px; }
    .mb-md-3 { margin-bottom: 15px; }
    .ml-md-0 { margin-left: 0; }
    .ml-md-1 { margin-left: 5px; }
    .ml-md-2 { margin-left: 10px; }
    .ml-md-3 { margin-left: 15px; }
    .mr-md-0 { margin-right: 0; }
    .mr-md-1 { margin-right: 5px; }
    .mr-md-2 { margin-right: 10px; }
    .mr-md-3 { margin-right: 15px; }
    .mx-md-0 { margin-left: 0; margin-right: 0; }
    .mx-md-1 { margin-left: 5px; margin-right: 5px; }
    .mx-md-2 { margin-left: 10px; margin-right: 10px; }
    .mx-md-3 { margin-left: 15px; margin-right: 15px; }
    .my-md-0 { margin-top: 0; margin-bottom: 0; }
    .my-md-1 { margin-top: 5px; margin-bottom: 5px; }
    .my-md-2 { margin-top: 10px; margin-bottom: 10px; }
    .my-md-3 { margin-top: 15px; margin-bottom: 15px; }
    .p-md-0 { padding: 0; }
    .p-md-1 { padding: 5px; }
    .p-md-2 { padding: 10px; }
    .p-md-3 { padding: 15px; }
    .pt-md-0 { padding-top: 0; }
    .pt-md-1 { padding-top: 5px; }
    .pt-md-2 { padding-top: 10px; }
    .pt-md-3 { padding-top: 15px; }
    .pb-md-0 { padding-bottom: 0; }
    .pb-md-1 { padding-bottom: 5px; }
    .pb-md-2 { padding-bottom: 10px; }
    .pb-md-3 { padding-bottom: 15px; }
    .pl-md-0 { padding-left: 0; }
    .pl-md-1 { padding-left: 5px; }
    .pl-md-2 { padding-left: 10px; }
    .pl-md-3 { padding-left: 15px; }
    .pr-md-0 { padding-right: 0; }
    .pr-md-1 { padding-right: 5px; }
    .pr-md-2 { padding-right: 10px; }
    .pr-md-3 { padding-right: 15px; }
    .px-md-0 { padding-left: 0; padding-right: 0; }
    .px-md-1 { padding-left: 5px; padding-right: 5px; }
    .px-md-2 { padding-left: 10px; padding-right: 10px; }
    .px-md-3 { padding-left: 15px; padding-right: 15px; }
    .py-md-0 { padding-top: 0; padding-bottom: 0; }
    .py-md-1 { padding-top: 5px; padding-bottom: 5px; }
    .py-md-2 { padding-top: 10px; padding-bottom: 10px; }
    .py-md-3 { padding-top: 15px; padding-bottom: 15px; }
}

@media (min-width: 1200px) {
    .m-lg-0 { margin: 0; }
    .m-lg-1 { margin: 5px; }
    .m-lg-2 { margin: 10px; }
    .m-lg-3 { margin: 15px; }
    .mt-lg-0 { margin-top: 0; }
    .mt-lg-1 { margin-top: 5px; }
    .mt-lg-2 { margin-top: 10px; }
    .mt-lg-3 { margin-top: 15px; }
    .mb-lg-0 { margin-bottom: 0; }
    .mb-lg-1 { margin-bottom: 5px; }
    .mb-lg-2 { margin-bottom: 10px; }
    .mb-lg-3 { margin-bottom: 15px; }
    .ml-lg-0 { margin-left: 0; }
    .ml-lg-1 { margin-left: 5px; }
    .ml-lg-2 { margin-left: 10px; }
    .ml-lg-3 { margin-left: 15px; }
    .mr-lg-0 { margin-right: 0; }
    .mr-lg-1 { margin-right: 5px; }
    .mr-lg-2 { margin-right: 10px; }
    .mr-lg-3 { margin-right: 15px; }
    .mx-lg-0 { margin-left: 0; margin-right: 0; }
    .mx-lg-1 { margin-left: 5px; margin-right: 5px; }
    .mx-lg-2 { margin-left: 10px; margin-right: 10px; }
    .mx-lg-3 { margin-left: 15px; margin-right: 15px; }
    .my-lg-0 { margin-top: 0; margin-bottom: 0; }
    .my-lg-1 { margin-top: 5px; margin-bottom: 5px; }
    .my-lg-2 { margin-top: 10px; margin-bottom: 10px; }
    .my-lg-3 { margin-top: 15px; margin-bottom: 15px; }
    .p-lg-0 { padding: 0; }
    .p-lg-1 { padding: 5px; }
    .p-lg-2 { padding: 10px; }
    .p-lg-3 { padding: 15px; }
    .pt-lg-0 { padding-top: 0; }
    .pt-lg-1 { padding-top: 5px; }
    .pt-lg-2 { padding-top: 10px; }
    .pt-lg-3 { padding-top: 15px; }
    .pb-lg-0 { padding-bottom: 0; }
    .pb-lg-1 { padding-bottom: 5px; }
    .pb-lg-2 { padding-bottom: 10px; }
    .pb-lg-3 { padding-bottom: 15px; }
    .pl-lg-0 { padding-left: 0; }
    .pl-lg-1 { padding-left: 5px; }
    .pl-lg-2 { padding-left: 10px; }
    .pl-lg-3 { padding-left: 15px; }
    .pr-lg-0 { padding-right: 0; }
    .pr-lg-1 { padding-right: 5px; }
    .pr-lg-2 { padding-right: 10px; }
    .pr-lg-3 { padding-right: 15px; }
    .px-lg-0 { padding-left: 0; padding-right: 0; }
    .px-lg-1 { padding-left: 5px; padding-right: 5px; }
    .px-lg-2 { padding-left: 10px; padding-right: 10px; }
    .px-lg-3 { padding-left: 15px; padding-right: 15px; }
    .py-lg-0 { padding-top: 0; padding-bottom: 0; }
    .py-lg-1 { padding-top: 5px; padding-bottom: 5px; }
    .py-lg-2 { padding-top: 10px; padding-bottom: 10px; }
    .py-lg-3 { padding-top: 15px; padding-bottom: 15px; }
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding: 60px 15px 30px;
    background-color: white;
    box-shadow: 0 0 25px #888;
}

.BibleVerse, .BibleQuote {
    color: darkgoldenrod;
    text-shadow: 0 0 10px gold;
}

.panel-heading {
    border-radius: 0;
    box-shadow: 0 0 15px #888;
    font-variant: small-caps;
    margin: -1px -5px 0;
    text-align: center;
}

.sermon-title {
    box-shadow: 0 0 15px #888;
    font-variant: small-caps;
    font-weight: bold;
    margin-top: 0;
    padding: 5px 10px;
    text-align: center;
}

.date-container {
    text-align: center;
    display: table-cell;
    vertical-align: top;
}

.date-day-no {
    width: 40px;
    margin: 0;
}

.date-mth-no {
    margin: -5px 0 -5px;
}

.event-container {
    display: table-cell;
    padding-left: 5px;
    vertical-align: top;
}

.hero-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: table;
    height: 148px;
    width: 100%;
}

.hero-title {
    display: table-cell;
    padding: 15px;
    text-shadow: 0 0 15px black;
    vertical-align: bottom;
}

.body-content {
    min-height: 350px
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
    }
}

@media (min-width: 768px) {
    .body-content {
        min-height: 500px
    }

    .BibleContent {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 991px) {
    .footer-content {
        text-align: center;
    }
}


@media (min-width: 992px) {
    .BibleVerse, .BibleQuote {
        font-size: larger;
    }

    .hero-image {
        height: 240px;
    }
}

.T {
    padding: 0.5em;
}

.M {
    /* For email links */
    text-decoration: dotted underline;
}

.familyPhoto {
  display: block;
  position: relative;
  background: #888;
}

.familyPhoto::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 75%;
}

.familyPhoto img {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%)
}

.blink {
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}
