/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2019 | 09:02:03 */
.et_is_customize_preview .et_slide_in_menu_container ul#mobile_menu_slide {
    display: none!important;
}

/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
  color: #fff!important;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
    content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
    position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 72px;
    height: 72px;
    line-height: 72px;
    top: 10px;
    right: 20px;
    cursor: pointer;
    text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
    background-color: transparent;
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 30px;
    font-size: 24px;
    text-transform: none;
    speak: none;
    content: '\33';
    color: #363636;
    background: #fff;
    border-radius: 100%;
}

.admin-bar ul#mobile_menu {
    top: 46px;
}

.admin-bar .mobile_nav.opened span.mobile_menu_bar.mobile_menu_bar_toggle{
  top:66px;
}
/* toggle icon when triggered */

.mobile_nav.opened span.mobile_menu_bar.mobile_menu_bar_toggle {
    position: fixed;
    z-index: 9999;
    right: 10px;
  top:20px;
    background: #203d4d;
    border-radius: 100px;
      padding-bottom: 0;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
    content: '\32';
}
/* hide sub menus by default */

.mobile_nav.opened span.mobile_menu_bar.mobile_menu_bar_toggle {
    position: fixed;
    z-index: 9999;
}


.et_mobile_menu li a:hover {
    color: #ffffff!important;
    text-decoration: underline;
    opacity: 1;
}

.et_mobile_menu li .sub-menu li a:hover {
    color: #000!important;
  text-decoration:none!important;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
    display: none !important;
    padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
    display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
    padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
    padding-left: 50px;
    padding-right: 50px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
    padding-left: 60px;
    padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
    background-color: transparent;
    font-weight: inherit;
}
/* make the current page's mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
    color: #fff;
}

.et_mobile_menu .sub-menu li a:hover{
opacity: 1;
    background-color: #fff;
    color: #000;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
    margin-right: 15px ;
  }

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgb(32, 61, 77) !important;
margin-left: -30px;
padding-top:  0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
  padding:0;
}
.et_mobile_menu li a {
color: #fff;
text-align: center;
font-size: 1.6em;
border: 0;
padding: 35px 0;
text-transform: uppercase;
letter-spacing: 4px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1em !important;
padding: 1em;
}
.et_mobile_menu li a:hover {
color: #363636;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
z-index: 9999;
color: #606060 !important;
top: 0px !important;
left: 0px !important;
transition: .15s;
}

/**__ The following code allows you to change the background of each individual item. All you need to do is change the hex code with the one that you prefer, and if your menu has more than 7 items, you must copy the piece of code that you see and change the number in the parenthesis in ascending order. Example: if your menu has 10 items, you will need to add more 3 snippets and change the number in the brackets with 8, 9, 10. __**/

.et_mobile_menu li:nth-child(1),.et_mobile_menu li:nth-child(1) ul.sub-menu li{
    background-color: #5ecae9;
}

.et_mobile_menu li:nth-child(2),.et_mobile_menu li:nth-child(2) ul.sub-menu li {
    background-color: #55b6d3;
}

.et_mobile_menu li:nth-child(3),.et_mobile_menu li:nth-child(3) ul.sub-menu li {
    background-color: #489ab2;
}

.et_mobile_menu li:nth-child(4),.et_mobile_menu li:nth-child(4) ul.sub-menu li  {
    background-color: #40859c;
}

.et_mobile_menu li:nth-child(5),.et_mobile_menu li:nth-child(5) ul.sub-menu li  {
    background-color: #387489;
}
.et_mobile_menu li:nth-child(6),.et_mobile_menu li:nth-child(6) ul.sub-menu li  {
    background-color: #2d5b6f;
}
.et_mobile_menu li:nth-child(7),.et_mobile_menu li:nth-child(7) ul.sub-menu li  {
    background-color: #203d4d;
}