/*
    Theme Name: Zakra Child
    Template: zakra
    Description: Zakra child theme, for the dedicated sites of WVBS programs
    Author: ThemeGrill + World Video Bible School
*/

/* ============================================
   GENERAL FORMATTING
   ============================================ */

body {
    font-size: 16px;
}

body:not(.tg-container--separate) #page {
    background: #141c1c;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
}

a,
.entry-content a {
    color: #f0d836;
    text-decoration: underline;
}

    a:not(.tg-scroll-to-top):hover,
    .entry-content a:hover{
        color: #f7ea91 !important;
        text-decoration: underline;
    }

/* Remove underline from header and footer links */
#masthead a,
#colophon a {
    text-decoration: none;
}

/* Hide the auto-generated page title */
.entry-header {
	display: none;
}



/* ============================================
   GENERAL SPACING
   ============================================ */

/* Add space between top of page and top row of content */
#top-row { 
    margin-top: 30px;
}

/* Remove empty space between header/footer and page content */
.site-content {
	margin-top: 0;
	margin-bottom: 0;
}

/* Add space between page content and header */
.site-main {
	margin-top: 120px;
	z-index: 2;
}



/* ============================================
   PAGE HEADER
   ============================================ */

/**
 * Sticky Header
 * 
 * 1) Stick header to top of window while scrolling
 * 2) Keep header on top of page content
 * 3) Add a drop shadow to the header
 */
 .tg-site-header {
	box-shadow: 0px 0px 20px rgba(8, 11, 11, 0.75);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}

/* Reduce thickness of header
 ============================================ */
header#masthead.site-header.tg-site-header.tg-site-header--left {
    padding-bottom: 0;
}

div.tg-site-header-bottom {
    padding-top: 0;
    padding-bottom: 0;
}

/* Keep header text white at all times
 ============================================ */

div.menu a {
    color: #fff !important;
}

    div.menu a:hover {
        color: #fff !important;
    }

li.current-menu-item > a {
   color: #fff !important; 
}

li.menu-item-has-children > a {
    color: #fff !important;
}

/* Header drop-down menu formatting
 ============================================ */

.tg-primary-menu > div ul li ul {
	background: #a54730;
    border: none;
    right: 0;
}

.tg-primary-menu > div ul li ul li {
	border-bottom: none;
}

.main-navigation .sub-menu {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.sub-menu > .menu-item {
    background-color: #a54730;
    transition: background-color 0.33s;
}

.sub-menu > .menu-item:hover {
    background-color: #c96047;
    transition: background-color 0.33s;
}

/* Other header configuration
 ============================================ */

/* Keep navigation menu button from wrapping on smaller mobile devices */
header#masthead div.tg-container--flex {
    flex-wrap: nowrap;
}

/**
 * Hide languages menu when list item has class "special-class"
 *
 * The menu item this is assigned to will be different for each site
 */
.special-class.menu-item-105 {
    display: none !important;
}



/* ============================================
   MOBILE NAVIGATION MENU
   ============================================ */

/* Background color */
.tg-mobile-navigation {
	background: #a54730;
}

/* Link color */
.tg-mobile-navigation a {
	color: #fff;
}

/* Drop shadow underneath opened menu */
.tg-mobile-navigation.tg-mobile-navigation--opened {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.75);
}

/* "fix" the mobile menu */
.tg-overlay-wrapper.overlay-show {
    display: none !important;
}

/* ============================================
   VIDEO EMBED
   ============================================ */

.video-container {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}

.video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}



/* ============================================
   CONTACT FORM
   ============================================ */

/* Center contact form on page
 ============================================ */
.wpcf7 input,
.wpcf7 textarea {
	width: 100%;
}

.wpcf7 label {
	display: block;
}

div.wpcf7 {
    margin-right: auto;
	margin-left: auto;
	max-width: 25em;
}

/* Submit button color
 ============================================ */

.wpcf7-submit {
	background-color: #a54730 !important;
    transition: background-color 0.33s;
}

    .wpcf7-submit:hover {
        background-color: #c96047 !important;
        transition: background-color 0.33s;
    }

/* Input field formatting
 ============================================ */

input[type="text"],
input[type="email"],
textarea {
    background: #444;
    border: 1px solid #fff;
    color: #fff;
}

    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
        color: #fff;
}

/* Recaptcha
 ============================================ */

/* Hide badge */
 .grecaptcha-badge {
    visibility: hidden;
}

/* Badge replacement text formatting */
#recaptcha-info {
    font-size: 12px;
}



/* ============================================
   SOCIAL MEDIA BUTTONS
   ============================================ */

/* Center buttons */
.addtoany_share_save_container.addtoany_content.addtoany_content_bottom {
    text-align: center;
}

/* Fix spacing between buttons */
.a2a_kit.a2a_kit_size_32.addtoany_list a {
    margin: 0px 10px;
}



/* ============================================
   BOOK EXCERPT DOWNLOAD
   ============================================ */

/* Container */
.book-block {
    flex-basis: 300px;
    flex-grow: 1;
    margin: 10px;
}

/* Book excerpt thumbnail
 ============================================ */

.book-thumbnail {
    text-align: center;
}
    /* Image hover effect */
    .book-thumbnail img {
        filter: brightness(100%);
        transition: filter 0.33s;
    }
        .book-thumbnail img:hover {
            filter: brightness(125%);
            transition: filter 0.33s;
        }

.book-download-button {
    margin: 30px 0px 60px 0px;
    text-align: center;
}



/* ============================================
   CHART DOWNLOAD
   ============================================ */

.chart-thumbnail {
    text-align: center;
}

.chart-download-button {
    margin-top: 30px;
    text-align: center;
}



/* ============================================
   DOWNLOAD BUTTONS
   ============================================ */

a.sdm_download.darkblue {
    background: #a54730;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #fff !important;
    font-size: 16px;
    font-weight: normal;
    padding: 15px;
    text-decoration: none;
    text-shadow: none;
    transition: background 0.33s;
}
    a.sdm_download.darkblue:hover {
        background: #c96047;
        border: none;
        box-shadow: none;
        text-shadow: none;
        transition: background 0.33s;
    }



/* ============================================
   WVBS LOGO AND DESCRIPTION
   ============================================ */

.wvbs-block {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 60px 0px 60px 0px;
    text-align: center;
}

.wvbs-block-image {
    flex-basis: 300px;
    margin: 10px;
}

.wvbs-block-text {
    flex-basis: 400px;
    margin: 10px;
}

    div.wvbs-block-text p {
        margin-bottom: 0;
    }



/* ============================================
   WVBS LOGO AND DESCRIPTION
   ============================================ */

/* Allow the elements to wrap on smaller screens
 ============================================ */

div.more-programs-block h4 {
    text-align: center;
}
.more-programs {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 25px;
	text-align: center;
}
.more-programs-entry {
	flex-basis: 300px;
	flex-grow: 1;
	margin: 10px;
}
    .more-programs-entry p {
        font-size: 14px;
        margin-top: 5%;
    }

/* Hover effect for images
 ============================================ */
.more-programs-entry img {
    filter: brightness(100%);
    transition: filter 0.33s;
}
    .more-programs-entry img:hover {
        filter: brightness(125%);
        transition: filter 0.33s;
    }



/* ============================================
   CHURCH INFORMATION
   ============================================ */

/* Center the church info on the page */
.church-info {
    text-align: center;
    display: none;
}



/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */

a.tg-scroll-to-top {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    text-decoration: none;
}
    a.tg-scroll-to-top:hover {
        color: #000;
    }

.tg-scroll-to-top:hover {
    background-color: #f7ea91;
}

a#tg-scroll-to-top:focus {
    color: #000;
}



/* ============================================
   404 PAGE-SPECIFIC RULES
   ============================================ */

/* Hide auto-generated page header */
.tg-page-header {
    display: none;
}

 /* More spacing between content and header/footer */
.page-content {
    margin: 60px 0px 100px 0px;
}