/*
 Theme Name:     Browns Hill Bible Chapel
 Author:         Louise Street Marketing
 Author URI:     https://louisestreet.com
 Template:       Divi
 Version:        1.1
*/

/*-----------------------------------------------*/
/*-----  Root Variables  -----*/
/*-----------------------------------------------*/

:root {
    /* Colour Palette */
        --blue: #0E2B62;
        --darkgrey:#808080;
        --lightgrey:#f4f4f4;
        --off-white:#f7f7f7;
        --almost-black:#1f1f1f;
    
    /* Fonts */
        --fs-1: clamp(2rem, 5vw, 3.8rem); /*60.8px*/
        --fs-2: clamp(2rem, 5vw, 3rem);  /*48px*/
        --fs-3: clamp(1.7rem, 3vw, 2.8rem);  /*44.8px*/
        --fs-4: clamp(1.5rem, 2vw, 2.5rem);  /*40px*/
        --fs-5: clamp(1.2rem, 2vw, 2rem);  /*32px*/
        --fs-6: clamp(1rem, 2vw, 1.5rem);  /*24px*/
        --fs-b: clamp(.8rem, 1vw, 1rem);  /*16px*/
    }
    
/*-----------------------------------------------*/
/*-----  Set Heading Defaults  -----*/
/*-----------------------------------------------*/

/* Change colours by adjusting the variable above and selecting it in the color: variable below */
    .et_pb_text h1 {font-size: var(--fs-1);color: var(--blue);font-weight: 700;}
    .et_pb_text h2 {font-size: var(--fs-2);color: var(--blue);font-weight: 700;}
    .et_pb_text h3 {font-size: var(--fs-3);color: var(--blue);font-weight: 700;}
    .et_pb_text h4 {font-size: var(--fs-4);color: var(--blue);font-weight: 700;}
    .et_pb_text h5 {font-size: var(--fs-5);color: var(--blue);font-weight: 700;} 
    .et_pb_text h6 {font-size: var(--fs-6);color: var(--blue);font-weight: 700;} 
    
    body {font-size: var(--fs-b);}

/*-----------------------------------------------*/
/*-----  Set Divi Defaults  -----*/
/*-----------------------------------------------*/

/*----- Set Defaul Button Styling -----*/
.et_pb_button {
    font-size: var(--fs-6);
}

/*----- Set Divi Module Margin -----*/
.et_pb_module {
    margin-bottom:0;
    margin-top:0;
}

/*----- Set Divi Text to Not Break -----*/
.et_pb_text {
    word-wrap: initial!important;
}

/*----- Vertically Center Modules when Equal Columns are Checked -----*/
.et_pb_equal_columns >.et_pb_column {
    margin-top:auto;
    margin-bottom:auto;
    }

/*----- Set menu breakpoints: Make sure to add correct classes to Divi sections -----*/

/* Hide desktop header on mobile */
@media (max-width:980px) {
    .lsm-header-desktop {
        display: none;
    }
}
/* Hide mobile header on dektop */
@media (min-width:981px) {
    .lsm-header-mobile {
        display: none;
    }
}

/*-----------------------------------------------*/
/*-----  Header  -----*/
/*-----------------------------------------------*/
#main-header {
    box-shadow: none;
 }

/*-----------------------------------------------*/
/*-----  Main Menu  -----*/
/*-----------------------------------------------*/


/*-----------------------------------------------*/
/*-----  SubMenu  -----*/
/*-----------------------------------------------*/


/*-----------------------------------------------*/
/*-----  Mobile Menu  -----*/
/*-----------------------------------------------*/

/*----- Change Divi hamburger menu to a different icon when open (Any icon can be used by changing the content) -----*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

/* Make mobile menu fullwidth - Set #mobile_menu(x) to correct menu number */
#mobile_menu2 .et_mobile_menu {
    min-width: 100vw;
    margin-left: -10vw;
 }

/*------ Collapses 2nd level items ------*/  

/**** This hides the sub menu items on mobile ****/
.et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.hide {
    display: none !important;
}

/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}

#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}

/**** This styles the icon and moves it to the right ****/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}

/**** Here you can swap out the actual icons ****/
#page-container span.menu-closed:before {
    content: "\4c";
    display: block;
    color: #fff;
    font-size: 16px;
    font-family: ETmodules;
}

/*------ END Collapses 2nd level items ------*/  

/*-----------------------------------------------*/
/*-----  Page Content  -----*/
/*-----------------------------------------------*/

/*-----------------------------------------------*/
/*-----  Footer  -----*/
/*-----------------------------------------------*/

/* ------- Vertical Footer Menu (Make sure to add the lsm-vert-menu class to the footer menu in Divi -------- */

/* remove default 11px padding on each side of list items */
.lsm-vert-menu .et-menu > li {
	padding-left: 0px;
	padding-right: 0px;
}

/* make the menu items fullwidth and add space between them */
.lsm-vert-menu nav ul li {
	display: block;
	width: 100%;
	margin: 10px 0;
}

/* Hide vertical menu on mobile */
@media (max-width: 980px) {
.lsm-vert-menu {
    display: none;
}
}

/*-----------------------------------------------*/
/*-----  Gravity Forms  -----*/
/*-----------------------------------------------*/

/*-----------------------------------------------*/
/*-----  Woocommerce  -----*/
/*-----------------------------------------------*/