/*** Stylesheet for Christ Church Memphis Landing Site **/

/** Fonts

font-family: 'Montserrat', sans-serif;

**/

/** Base font size: 16px **/

html, body{ margin: 0 auto; padding: 0; font-size: 100%; font-family: 'Montserrat', sans-serif;}

p{ font-size: 1rem; line-height: 150%;}
a{ text-decoration: none; color: #1D5F66;}

.page_content a:hover{ color: #222222; transition: all 0.3s;}

h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; line-height: 150%;}

#inside_page h1,#inside_page h2,#inside_page h3,#inside_page h4,#inside_page h5,#inside_page h6{ margin: 1rem 0;}

h1{ font-size: 4rem; text-transform: uppercase; font-weight: 700;}
h2{ font-size: 2.25rem; font-weight: 700; color: #1D5F66;}
h3{ font-size: 1.875rem; font-weight: 700; color: #000;}
h4{ font-size: 1.5rem; font-weight: 700; color: #fff; }
#inside_page h4{background-color: #29335C; padding: 1rem;}
h5{ font-size: 1.25rem; font-weight: 700; color: #000;}
h6{ font-size: 1.125rem; font-weight: 700; color: #1D5F66;}

#inside_page ul, #inside_page ol, #inside_page ul li, #inside_page ul li{ padding-bottom: 8px; line-height: 150%;}

/** GENERAL **/

.clearfix{ clear: both;}

.wrapper{ margin: 0 auto; max-width: 64rem; width: 90%;}
.flex{ display: flex;}


/** HEADER **/
header{ width: 100%; position: relative; top: 0; left: 0; z-index: 999; background: #fff; height: 4.375rem; display: flex; align-items: center;}

header .flex{ align-items: center;}
header > .flex{ align-items: center; justify-content: space-between;}

header a{ font-size: 0;}

.header_social{ margin-right: 1.5rem;}
.header_social a{ margin: 0 0.5rem;}
.header_social a:hover svg *{ transition: all 0.3s;}
.header_social a:hover svg *{ fill: #222 !important;}

.header_button{ color: #fff; text-transform: uppercase; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.1em; background: #1D5F66; border-radius: 25px; padding: 0.625rem 1.125rem; display: inline-block; transition: all 0.3s; text-align: center;}
.header_button:hover{ background: #222;}

/*** FOOTER *****/

footer{ padding: 1rem; background:#1D5F66; text-align: center;}

footer > .flex{ align-items: center; justify-content: center;}

footer p{ margin: 0; padding: 0;}
footer p, footer p a{ font-size: 0.75rem; color: #fff; font-weight: 300; letter-spacing: 0.05em;}
footer p.credit, footer p.credit a{ font-size: 0.625rem; padding: 0.5rem 0 0 0;}

.footer_divider{ color: #fff; font-size: 0.75rem; display: inline-block; margin: 0 1rem;}

.footer_social{ display: none;}
.footer_social{ margin: 1rem 0;}
.footer_social a{ margin: 0 0.75rem; font-size: 0;}
.footer_social a:hover svg *{ transition: all 0.3s;}
.footer_social a svg *{ fill: #fff !important;}

/** MAIN Content **/

main{margin: 0 auto; padding: 0;}

/*** Inside Pages ***/

.page_title{ text-align: center; padding: 5rem 0 7.5rem 0; position: relative; z-index: 101;}
.page_title h1{ color: #fff; font-size: 4rem; text-transform: uppercase; font-weight: 700; margin: 0 auto; padding: 0;}

.page_content{ padding: 3.125rem 0;}
.page_content .wrapper{ max-width: 46.875rem;}

.page_content .wp-block-button__link:hover{ color: #fff; opacity: 0.8; transition: all 0.3s;}

.wp-block-embed.is-type-video{ margin: 1.5rem 0; padding: 0; max-width: 100%;}
.wp-block-embed.is-type-video .wp-block-embed__wrapper{ position: relative; padding-top: 56.6%;}
.wp-block-embed.is-type-video iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

/*** Home Page ***/
.banner_container{ position: relative; display: flex; flex-direction: column;}

.banner_container:before{ content:""; position: absolute; top: 0; left: 0; width: 100%; height: 80%; z-index: 1; background-color: #2A335A; mix-blend-mode: multiply; opacity: 0.8;}

.hero_bg{ width: 100%; height: 80%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; filter: grayscale(1);}

#inside_page .hero_bg, #inside_page .banner_container:before{ height: 100%; }

.utility_nav{ position: relative; z-index: 2; padding: 1.5rem 0;}
.utility_nav > .flex{ justify-content: space-around; align-items: center; border: 1px solid #fff; border-radius: 25px; padding: 10px 0;}

.utility_nav a{ vertical-align: middle; color: #fff; font-weight: 700; font-size: 1.5rem; text-shadow: 0 0 10px rgba(0,0,0,1); text-transform: uppercase; transition: all 0.3s; letter-spacing: 0.1em;}
.utility_nav a:hover{ transform: scale(1.05);}

.hero_slideshow_container{ position: relative; z-index: 2; margin: 0 auto; text-align: center; max-width: 750px; width: 95%;}

.hero_slideshow{ display: inline-block; box-shadow: 0 5.7px 33px rgba(0,0,0,0.37); width: 100%;}

.hero_slideshow .slide{ float: left;}
.hero_slideshow .slide img{ display: block; width: 100%; height: auto; object-fit: cover;}

.hero_pager_container{ position: absolute; bottom: 1.75rem; right: 2.375rem; padding: 0 2rem;}

.hero_arrow{ border: none; background: none; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;}
.hero_arrow.prev{ left: 0;}
.hero_arrow.next{right: 0;}
.hero_arrow svg{ width: 0.8944444444444444rem; height: 1.388888888888889rem;}

.hero_dots ul{ margin: 0; padding: 0; list-style: none; display: flex; align-items: center;}
.hero_dots ul li{ display: flex; align-items: center; margin: 0 0.25rem;}
.hero_dots ul li button{ font-size: 0; background: #fff; opacity: 0.5; border: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; vertical-align: middle; box-shadow: 0 5px 5px rgba(0,0,0,0.5);}
.hero_dots ul li button:hover, .hero_dots ul li.slick-active button{ opacity: 1;}

.below_hero_text_container{ text-align: center; margin: 3.125rem 0 0 0;}
.below_hero_text_container h4.section1_line_1{ font-size: 1rem; color: #222222; font-weight: 400;}
.below_hero_text_container h2.section1_line_2{ font-size: 2rem; color: #1D5F66; font-weight: 700;}
.below_hero_text_container h3.section1_line_3{ font-size: 1.125rem; color: #222222; font-weight: 300; letter-spacing: 0.1em; padding-top: 0.25rem; }

.connect_button_container{ margin: 1rem 0;}
.connect_button_container > .flex{ justify-content: center; flex-flow: wrap;}
.connect_button{ background: #1D5F66; border-radius: 3px; padding: 0.5rem 1rem; text-transform: uppercase; color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 1rem; transition: all 0.3s; margin-bottom: 1rem; height: 100%;}
.connect_button:first-child{ margin-left: 0;}
.connect_button:last-child{margin-right: 0; margin-bottom: 0;}
.connect_button.livestream{ background: #CF202E;}
.connect_button.facebook_button{ background: #3B5998;}
.connect_button:hover{ background: #222;}

.connect_button span.connect_button_icon{ font-size: 0; display: inline-block; margin-right: 10px;}

.pillars{ position: relative; padding: 4rem 0;}

.pillars_bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; filter: grayscale(1); opacity: 0.5;}
.pillars:before{ content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: #383F40; mix-blend-mode: multiply;}

.pillars_container{ position: relative; z-index: 10;}
.pillars .flex{ justify-content: space-between;}

.pillar_item{ width: 25%; margin: 0 5px; height: 145px; display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid #fff; border-radius: 3px;  position: relative; text-align: center;}
.pillar_item:first-child{ margin-left: 0;}
.pillar_item:last-child{ margin-right: 0;}
.pillar_item a{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10;}

h3.pillar_title{ font-size: 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; line-height: 115%; transition: all 0.3s; color: #fff;}
.pillar_item a:hover + h3.pillar_title{ transform: scale(1.05);}


/****** Style Overrides for Series Engine ************/
#seriesengine .enmse-player .enmse-modern-player-details p.enmse-downloads a{ color: #222222;}


/******** MEDIA QUERIES *******/

@media all and ( max-width: 1024px ){
    footer > .flex{ flex-direction: column; justify-content: center;}
    .footer_divider{ display: none;}
    footer p{ margin-bottom: 0.25rem;}
    footer p:first-child{ font-size: 1rem; font-weight: 400;}

    .utility_nav a{ font-size: 1.25rem; margin: 0 0.5rem;}

    .page_title{ padding: 3rem 0;}
}

@media all and ( max-width: 960px ){
    .utility_nav a{ font-size: 1.15rem;}
}

@media all and ( max-width: 767px ){
    .pillars .flex{ flex-flow: wrap;}
    .pillar_item{ width: calc(50% - 10px); margin: 5px 0 !important;}

    .utility_nav > .flex{ flex-flow: wrap; padding: 0;}
    .utility_nav a{ font-size: 1.25rem; padding: 1rem;}

    page_title{ padding: 2rem 0;}
}

@media all and ( max-width: 640px ){
    .pillar_item{ width: 100%;}

    .utility_nav{ order: 2;}
    .utility_nav > .flex{ flex-direction: column; justify-content: center;}
    .utility_nav a{ display: block; text-align: center; font-size: 1.5rem;}
    .banner_container{ padding: 1rem 0;}
    .banner_container::before, .hero_bg{ height: 100%;}

    .connect_button_container > .flex{ flex-direction: column;}
    .connect_button{ margin: 0.75rem 0 !important; padding: 0.75rem 1rem; font-size: 1.25rem;}

    .header_social{ display: none;}
    .footer_social{ display: block;}

    .header_button{ padding: 0.5rem;}

    #logo{ max-width: 60%;}
    #logo svg{ max-width: 100%; max-height: 100%;}
}