@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --theme-color1: #049fe3;
    --theme-color2: rgb(78, 80, 93);
}

body, p, h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', 'Open Sans', Arial, sans-serif; }

header {
    background-color: var(--theme-color2);
    color: white;
}

h1 { position: relative; }

h1::after, .box h2::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    background-color: var(--theme-color1);
    width: 50px;
    height: 5px;
}

nav ul ul a.current { color: var(--theme-color1) !important; }

nav > ul > li:hover::before,
nav > ul > li.current::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20px;
    width: calc(100% - 40px);
    height: 3px;
    background-color: var(--theme-color1);
}

nav > ul > li:hover::before {
    animation-name: expand;
    animation-duration: 0.2s;
}

@keyframes expand {
    from {width: 0}
    to {width: calc(100% - 40px);}
}

form h1 { position: static; }

form h1::after { content: none; }

#slideshow .nivo-caption { font-size: 6vw !important; }

#featured h1 { font-size: 1.5em; }

#featured h1, #featured2 h1, #featured3 h1 { margin: 0; }

.copy strong { color: var(--theme-color1); }

#featured {
    background-image: url(Ministires-Banner-Blue-3.jpg);
    background-size: cover;
}

#featured2 {
    background-image: url(Family-Worship-Center-Banners2.jpg);
    background-size: cover;
    color: white;
    padding: 3em 0;
}

#featured2 iframe { border: 5px solid white; }

#featured3 {
    background-color: var(--theme-color1);
    color: white;
    padding: 3em 0;
}

#account_menu {
    background-color: var(--theme-color1);
    border-radius: 1.25em;
    text-shadow: none;
    border: none !important;
}

#account_menu:not(.select_bar):hover { opacity: 0.8; }

#account_menu.select_bar a:hover { opacity: 0.8; }

.custom_button {
    border-radius: 1.25em;
    padding: 1em 2em;
}

.custom_button:hover { color: var(--theme-color1); }

nav .custom_button {
    background-color: var(--theme-color1);
    text-shadow: none;
}

.preview_photospot {
    background-size: contain;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 1200px) {

    nav > ul > li::before { content: none !important; }

    nav > ul > li a.current { color: var(--theme-color1) !important; }

    #account_menu:hover { opacity: 1; }

	#account_menu {
        background-color: transparent;
        max-width: calc(100% - 20px);
    }

    #account_menu .mark { margin-bottom: 1em; }

    #account_menu ul { margin-left: 0; }

    #account_menu a {
        color: white !important;
        border-radius: 1.25em;
        background-color: var(--theme-color1);
        display: inline-block;
        padding: 0.5em 1em;
    }

    #mobile-menu nav { margin-top: 0; }
}