/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        4.0.1
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */
/*** JS INCLUDED
Create a Full Screen Slider with Divi 
Reference - https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-full-screen-slider-with-divi
***/
.et_fullscreen_slider .et_pb_slides,
.et_fullscreen_slider .et_pb_slide,
.et_fullscreen_slider .et_pb_container {
    min-height: 100% !important;
    height: 100% !important;
}
/*** End of Create a Full Screen Slider with Divi ***/


/*** 
VERTICALLY CENTER ANY CONTENT IN DIVI 
Reference - https://divisoup.com/quick-snack-vertically-center-any-content-in-divi/
***/
.ds-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 
/*** END OF VERTICALLY CENTER ANY CONTENT IN DIVI ***/


/***
Switch column order on mobile
Reference - http://divihelp.com/flip-columns-mobile-stacking/
Alternative - https://www.elegantthemes.com/blog/divi-resources/how-to-change-divis-column-stacking-order-on-mobile-devices
***/
@media only screen and ( max-width: 980px ) {
	.flip {
		display: -webkit-flex;
		-webkit-flex-direction: column-reverse;
		display: flex;
		flex-direction: column-reverse !important;
	}
}
/*** End of switch column on mobile***/


/***
Stop your columns from breaking in Divi on mobile
Reference - https://joshhall.co/how-to-keep-columns-on-mobile-in-divi/
Apply class on Row section for Mobile & Ipad
***/
@media only screen and (max-width: 980px) {
	.two-columns .et_pb_column {width: 50%!important;}
    .three-columns .et_pb_column {width: 33.33%!important;}
	.four-columns .et_pb_column {width: 25%!important;}
}
@media only screen and (max-width: 479px) {
    .three-columns .et_pb_column {width: 50%!important;}
}
/*** End of stop your columns from breaking in Divi on mobile **/


/*** 
Set Blurb Module with button - Equal Column Heights using Flexbox
Reference - https://divi.space/css-course/how-to-set-equal-column-heights-using-flexbox/
***/
.flex-row-wrapper {display: flex;}
.flex-row-wrapper .et_pb_column {
 display: flex;
 flex-direction: column;
 padding: 20px;
 border: 1px solid black;
 justify-content: space-between;
}
@media screen and (max-width: 981px) {
.flex-row-wrapper {flex-direction:column;}
}
/*** End of Blurb Module with button - Set Equal Column Heights using Flexbox ***/


/*** JS INCLUDED
Collapsing Nested Sub Menu Items in Mobile Menu
Reference: https://www.mzcreativestudio.com/collapses-show-mobile-menu-divi-theme/
Alternative:
https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items
https://divihacks.com/customizing-your-divi-mobile-menu/
***/
#main-header .et_mobile_menu li ul.hide {display: none !important;}/**** This hides the sub menu items on mobile ****/
#mobile_menu .menu-item-has-children {position: relative;}/**** This adjusts the positioning and the background transparency of the parent menu item on mobile ****/
#mobile_menu .menu-item-has-children > a {background: transparent;}
/**** This styles the icon and moves it to the right ****/
#mobile_menu .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 ****/
span.menu-closed:before {
content: "\4c";
display: block;
color: #000;
font-size: 16px;
font-family: ETmodules;
}
span.menu-closed.menu-open:before {content: "\4d";}
/*** End of Collapsing Nested Sub Menu Items ***/

/* Iframe Video Fullwidth */
.iframe-video-section, .iframe-video-section .et_pb_fullwidth_code{background-position: 50%;}
.iframe-video-section .et_pb_fullwidth_code {padding-top : 0 !important;}
.iframe-video-section .fluid-width-video-wrapper {padding-top: 36.8%!important;}
/*** End of Collapsing Nested Sub Menu Items ***/

/*bullet checklist by www.peeayecreative.com*/
.pa-bullet-list-1 ul {
list-style-type: none!important;
}

.pa-bullet-list-1 ul li:before {
content: '\e052'!important;
color: #fff;
font-family: 'ETMODULES'!important;
margin-right: 10px;
margin-left: -14px;
font-size: 1.2em!important;
}