/* ----- Sticky footer styles ----- */

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}


/* Wrapper for page content to push down footer */

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by its height (global footer height is 120px) */
    margin: -30px auto -120px;
    /* Pad bottom by footer height (global footer height is 120px) */
    padding: 30px 0 120px 0;
}

#wrap > .container {
    padding-bottom: 50px;
}


/* Set the fixed height of the footer here */

#footer {
    height: 160px;
}


/* ----- Wide ----- */

body.wide .container {
    width: 100%;
}


/* ----- Photo Background ----- */

body.photobg {
    background-attachment: fixed !important;
    background-size: cover !important;
}

body.photobg #footer {
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid #e9e6df;
}

body.photobg #footer h2 {
    border: none;
    margin-top: 10px;
}


/* ----- Accordion ----- */

.panel-guide .panel {
    border: none;
    background: none;
}

.panel-guide .panel-default > .panel-heading {
    padding: 0;
    background: none;
}

.panel-guide .panel-default > .panel-heading a {
    display: block;
    background: rgba(255, 255, 255, .7);
    border: none;
    text-align: center;
    font-size: 32px;
    line-height: 36px;
    font-weight: 300;
    padding: 15px;
}

.panel-guide .panel-default > .panel-heading a:hover,
.panel-guide .panel-default > .panel-heading a:active {
    background: rgba(255, 255, 255, 0.9);
}

.panel-guide.panel-group .panel-heading+.panel-collapse>.list-group,
.panel-guide.panel-group .panel-heading+.panel-collapse>.panel-body {
    border: none;
}

.panel-guide .panel-body {
    padding: 0px 15px 15px 15px;
    border-top: 0;
    background: rgba(255, 255, 255, .7);
}

.panel-guide .panel-body p.lead {
    text-align: center;
}

@media (min-width: 768px) {
    .panel-guide .panel-body p.lead {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

.panel-guide .panel-group {
    margin-bottom: 20px;
}

@media (min-width: 768px) .panel-guide .panel-body p.lead {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}


/* ----- Card ----- */

.card {
    background: #fcfcfc;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    font-weight: 300;
}

.card h2,
.card h3 {
    color: #000;
    text-transform: none;
    font-weight: 300;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-top: 0;
}

.card h2 i.fa,
.card h3 i.fa {
    display: block;
    margin-bottom: 10px;
}

.card img {
    display: inline-block;
    margin-bottom: 10px;
}

.card ul {
    margin-bottom: 15px;
}

.card li {
    line-height: 1.5em;
}

.card p:last-child {
    margin-bottom: 0;
}

.card > *:last-child {
    margin-bottom: 0;
}

.card .more-link {
    background: none repeat scroll 0 0 rgba(146, 139, 129, 0.75);
    color: #fff;
    margin: 0 5px 15px 5px;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
}

.card .more-link:active,
.card .more-link:focus,
.card .more-link:hover {
    color: #fff;
    border: 0;
    background: #222;
}

.card.card-green {
    border-top: 3px solid #009B76;
}

.card-green h2 {
    color: #0f6b58;
}

.card.card-blue {
    border-top: 3px solid #0098DB;
}

.card-blue h2 {
    color: #1b6597;
}

.card.card-orange {
    border-top: 3px solid #E98300;
}

.card-orange h2 {
    color: #9b5111;
}

.card.card-gray {
    border-top: 3px solid #b3b3b3;
}

.card-gray h2 {
    color: #3f3f3f;
}


/* ----- Invisible and Focusable Elements ----- */

.element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}

.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
    position: static !important;
    clip: auto;
    overflow: visible;
    height: auto;
    padding: 0 1em;
}