/*
Theme Name: NG Theme
Theme URI: https://staging.midwestgas.net/
Description: This is a custom child theme for MGE
Author: Never Gravity
Author URI: https://nevergravity.com/
Template: Divi
Version: 1.0.0
*/

/*--MAIN CSS--*/
h1, h2, h3, h4{
    font-weight:600;
}
h1, h1.entry-title {
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
h2, .et_pb_column_2_5 h2{
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}
h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}
h4 {
  font-size: clamp(1.125rem, 2.5vw, 1.2rem);
}
.vert-align{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*Add image Cover suport to Image Module*/
.et_pb_module.img-cover{
    height:100%;
}
.et_pb_module.img-cover .et_pb_image_wrap{
    width:100%;
    height:100%;
}
.et_pb_module.img-cover .et_pb_image_wrap img{
    object-fit:cover;
    width:100%;
}
.et_pb_module.img-cover.position-top .et_pb_image_wrap img{
    object-position: top;
}
/*--NAV--*/

/*--Add hover line under nav items--*/
#top-menu a:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background: #1b4dd8;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
#top-menu a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
#top-menu-nav>ul>li>a:hover:before{
    opacity:1;
}

body ul#top-menu li.current-menu-item > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #1b4dd8;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
/*--Sub Menus--*/
#top-menu-nav ul.sub-menu li a{
    color:white;
}
#main-header .nav li ul.sub-menu{
    border-top:none;
}

/*--Switch next and previous pagination--*/
.et_pb_posts_nav .nav-previous { float: right; }
.et_pb_posts_nav .nav-next { float: left; }
.et_pb_posts_nav .meta-nav { display: none; }
.et_pb_posts_nav .nav-next a:before { content: '← '; }
.et_pb_posts_nav .nav-previous a:after { content: ' →'; }

/*---Collapsible mobile sub-menu---*/
/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}

/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0 !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
    font-size:18px;
}

/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}

/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\4c';
	color: white;
	padding: 3px;
}

/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\4b';
}

/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}

/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	line-height: 0;
}

/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}
/*--Animated Hover--*/
.module-hover{
    position:relative;
    overflow:hidden;
}
.module-hover:before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #e2e8f5;
    z-index: 1;
    transition: left 0.5s ease;
}
.module-hover:hover::before{
    left:0;
}
.module-hover .et_pb_blurb_content{
    z-index:2;
}
/*--FOOTER--*/
#footer-widgets .footer-widget li:before {
    display:none;
}

#footer-widgets .footer-widget li {
    padding-left: 0px;
}
#footer-widgets .footer-widget li:not(.wp-social-link) a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

#footer-widgets .footer-widget li a:hover::before {
  transform: scaleX(1);
}
.ng-fwidget-title{
    font-family:'Outfit',Helvetica,Arial,Lucida,sans-serif;
    text-transform: uppercase;
    font-size:16px;
    font-weight:600;
    display:block;
    margin-bottom:10px;
}
.footer-widget .fwidget:first-of-type{
    margin-bottom:15px!important;
}
.footer-logo-container{
    background:white;
    padding:15px;
}

/*--MEDIA QUERIES--*/
@media screen and (max-width: 1180px) {
     
     /*--Slide in menu--*/
     /*--Add box shadow to mobile menu--*/
     #et_mobile_nav_menu .mobile_nav.opened #mobile_menu{
         box-shadow: -15px 0px 10px 1px rgba(0, 0, 0, .5);
     }
     
    /*--Start Mobile Menu slide in--*/
    #mobile_menu{
        position:fixed;
        z-index:99998;
        height:100vh!important;
        overflow:auto;
        display:block!important;
        right:0;
        left:auto;
        top:0;
        padding:90px 5% 5% 5%!important;
        background-color:#1a2234!important;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
        -overflow-scrolling:touch!important;
        -webkit-overflow-scrolling:touch!important;
    }
    .mobile_nav.opened .mobile_menu_bar:before{
        color:white!important;
    }
    .et_mobile_menu li a{
        font-size:18px;
        padding:15px 5%;
        color:white!important;
    }
    /* Move the mobile menu back onto the screen when open using translateX(0%) */
    .mobile_nav.opened #mobile_menu {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    /* Move the mobile menu fully off the screen when closed using translateX(100%) */
    .mobile_nav.closed #mobile_menu {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }
    /*--END Mobile Menu SLide In--*/
    #top-menu{
		display:none;
	}
	#et_mobile_nav_menu{
		display:block;
	}
	.mobile_menu_bar{
        z-index: 99999;
    }
    .et_mobile_menu{
        z-index: 9998;
    
    }
}
@media ( min-width: 768px ) and ( max-width: 1100px) {
    /*--Start Mobile MEnu slide in--*/
    #mobile_menu{
        width: 60%;
    }
    /*--END Mobile Menu SLide In--*/
}

/*** Responsive Styles Desktop Only ***/
@media all and (min-width: 981px) {

}
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {

}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {

}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
    /*--Start Mobile Menu slide in--*/
    #mobile_menu{
        width: 80%;
    }
    /*--END Mobile Menu Slide In--*/
}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {

}
@media all and (max-width: 431px) {
    #top-header .container{
        width:95%;
    }
}