/* HTML */

h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", "PT Sans Narrow", Arial, sans-serif;
}

/* Branding block */

.region-site-branding {
    float: left;
}

header .block-system-branding-block img {
    height: 60px;
    margin: 10px 0;
}


/* Navigation */

ul.sf-menu .sf-with-ul {
    padding-right: 2em !important;
}

ul.sf-menu.sf-vertical {
    width: auto;
}

ul.sf-menu .sf-sub-indicator {
    right: inherit;
}

ul.sf-menu>li:first-child {
    display: none;
}

header.sticky-header {
	position: fixed !important;
	top: 0px;
	z-index: 333;
	font-size: 0.8em;
    background-color: gray;
    opacity: 0.8;
}

header.sticky-header .sf-menu li:hover,
header.sticky-header .sf-menu li.sfHover {
    background: inherit !important;
}

header.sticky-header ul.sf-menu:not(.fh5co-sub-menu),
header.sticky-header ul.sf-menu:not(.fh5co-sub-menu) a {
    color: white !important;
}

#fh5co-menu-wrap .sf-menu>li>a {
    margin-bottom: 2em !important;
}

ul.sf-menu .sf-sub-indicator {
    padding-bottom: 1em;
}


/* Administrative tabs */

.region-tabs {
    right: 0;
    position: fixed;
    top: 50%;
    background-color: white;
    width: 100px;
    display: block;
    z-index: 100;
    text-align: right;
    opacity: .9;
}


/* Field Labels */

h2 .field__label {
    text-align: center;;
}


/* Portfolios */

/* Add another full-width portfolio option */

#fh5co-portfolio-list li.full-width {
    width: 100%;
}


/* Main Content */

#block-saintmos-content {
    padding-top: 1em;
}

.node-1 #block-saintmos-content {
    padding-top: 0;
}

#fh5co-work-section,
#fh5co-services-section,
#fh5co-content-section,
#fh5co-work-section_2,
#fh5co-blog-section,
#fh5co-features,
#fh5co-services,
#fh5co-about,
#fh5co-contact {
    padding: 1em 0;
}


/* Top Banner Image */

.fh5co-cover.fh5co-hero-2,
.fh5co-hero.fh5co-hero-2 {
    height: 540px;
}

.fh5co-cover.fh5co-cover_2 {
    height: 540px;
}

.fh5co-cover.fh5co-hero p,
.fh5co-hero.fh5co-hero p,
.fh5co-cover.fh5co-hero-2 p,
.fh5co-hero.fh5co-hero-2 p {
    font-family: "Open Sans", "PT Sans Narrow", Arial, sans-serif;
    font-size: 1.4em;
}

body.node-1 .fh5co-hero:first-child,
body.node-1 .fh5co-hero:first-child .fh5co-cover {
    height: 600px; /*800px;*/
}

#banner-title strong {
    font-weight: normal;
}


/* Mid-Page Banner */

.fh5co-cover,
.fh5co-hero {
    background-position: center;
    height: 400px;
}


/* Staff */

/* Style the staff members */

.node-38 #fh5co-work .work .half-inner,
.node-38 #fh5co-work .work .half-inner2 {
    height: 300px !important;
    width: 300px !important;
    background-size: 300px;
    border-radius: 10px; /*150px;*/
    margin-top: 6em;
    background-position: top;
}

#fh5co-work .work .half-inner:before {
    border: 0;
}

.node-38 #fh5co-work .work .half-inner {
    right: -90%;
}

.node-38 #fh5co-work .work .half-inner2 {
    right: 0;
}


/* Maps */

iframe#gmap_canvas {
    width: 100%;
}


/* What to Expect */

@media screen and (max-width: 768px) {
    #fh5co-work {
        margin-top: 0 !important;
    }
}


/* Footer */

.region-latest-blog h3:not(first-child) {
    margin-top: 2em;
}

#footer h2,
#footer h3 {
    border: 1px solid #848484;
    border-right: 0;
    border-left: 0;
    padding: 0.5em 0;
}

#footer .block:not(:first-child) h2 {
    margin-top: 1em;
}

#footer nav {
    margin-top: 0;
}

@media screen and (max-width: 992px) {
    /* Correct staff images on smaller screens */
    #fh5co-work .work .half-inner {
        right: 0 !important;
    }
}


/* Mobile Background Images */

@media (max-width:640px) {
    .fh5co-cover {
        background-attachment: initial;
    }
}


/* Admin Toolbar */

nav#toolbar-bar {
    position: fixed;
}


/* Icons */

.fh5co-services i.icon-saint-mos { background-image: url("/sites/saintmos.ryankavalsky.com/files/styles/large/public/2021-12/st-moses-the-ethiopian_1.jpg");}
.fh5co-services i.icon-met-jesus { background-image: url("/sites/saintmos.ryankavalsky.com/files/styles/large/public/2021-12/saad-salim-PqRvLsjD_TU-unsplash.jpg");}
.fh5co-services i.icon-be-changed { background-image: url("/sites/saintmos.ryankavalsky.com/files/styles/large/public/2021-12/andrei-turca-0DwtkeZPvJ8-unsplash.jpg");}


/* Sermons */

.embedded-video {
    text-align: center;
}

.field--name-field-ytp-description,
.field--name-field-ytp-published {
    text-align: center;
    margin: 2em auto;
    width: 50%;
}

.embedded-video iframe {
    margin: auto;
}

.view-sermons .view-header .sermon-item {
    width: 50%;
    float: none;
    margin: 0 auto;
}

.sermon-item img:hover,
.sermon-item img:focus {
    opacity: 0.8;
}

.sermon-item img {
    margin-bottom: 1em;
}

.sermon-item .sermon-image-wrapper-16-9 .sermon-thumbnail-high,
.sermon-item .sermon-image-wrapper-16-9 .sermon-thumbnail-standard {
    overflow: hidden;
    margin-bottom: 1em;
}

.sermon-item .sermon-image-wrapper-16-9 .sermon-thumbnail-high img,
.sermon-item .sermon-image-wrapper-16-9 .sermon-thumbnail-standard img {
    margin: -9.5% 0px -12%;
}

.fh5co-blog>a {
    display: flex; /* Prevents the image link from stretching across multiple blog posts */
}

.fh5co-blog a img {
    /*width: auto;*/
}

.sermon-item .btn.btn-primary {
    margin-top: 1em;
}

.sermon-item * {
    text-align: center;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.sermon-item h3 {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sermons-footer {
    text-align: right;
    font-style: italic;
    padding-right: 2em;
}

@media screen and (max-width: 992px) {
    .view-sermons .view-header .sermon-item,
    .view-sermons .view-header .sermon-item .sermon-thumbnail {
        width: 100%;
    }
}


/* Podcasts */

.paragraph--type--st-moses-spotify-podcast {
    margin: 0 auto;
    text-align: center;
}

.paragraph--type--st-moses-spotify-podcast a {
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    background: #ef6249;
    color: #fff;
    border: 2px solid #ef6249;    
    margin-right: 4px;
    margin-bottom: 4px;
    font-family: "Open Sans", "PT Sans Narrow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding: 8px 20px;
    line-height: 3em;
}

.paragraph--type--st-moses-spotify-podcast a:hover,
.paragraph--type--st-moses-spotify-podcast a:hover {
    color: #d1d1d1 !important;
}


/* Forms */

form.webform-submission-form .captcha {
    clear: both;
}


/* Comments */

.comment-section {
    margin: 0 20%;
}


/* Announcements */

.paragraph--type--announcements {
    display: none;
}
/*
.view-announcements .field-content p {
    margin: 1em;
    padding: 1em;
    padding-left: 45px;
    background-color: #fff2e5;
    border: solid 1px darkslategrey;
    color: darkslategrey;
    background-image: url("../images/baseline_campaign_black_24dp.png");
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: left 5px center;
}
*/


/* Dialogs */

.ui-dialog {
    position: fixed;
}

.ui-widget-overlay {
    opacity: .50 !important;
    filter: Alpha(Opacity=50) !important;
    background: rgb(50, 50, 50) !important;
}

.ui-dialog-titlebar.ui-corner-all {
    padding-right: 0;
}

.ui-dialog-titlebar.ui-corner-all button.button {
    position: absolute;
    right: 7px;
}


/* About */

body.node-3 .region-content {
    padding-top: 13.9em;
}

@media screen and (max-width: 992px) {
    body.node-3 .region-content {
        padding-top: 2.9em;
    }
}

@media screen and (max-width: 768px) {
    body.node-3 .region-content {
        padding-top: 0em;
    }
}
