#menu-toggle {background-color:transparent;width:auto;text-align:center;cursor:pointer;height:36px;}
.hide-menu-button{display:none;visibility:hidden;}
.showing{display:block;visibility:visible;}


#mymenu {text-align:right;margin:0 auto;width:100%;height:auto;z-index:998 !important;}/* surrounds the dropdown menu */
#mymenu ul {padding:0;margin:0 auto;list-style-type:none;width:100%;height:auto;}
#mymenu ul.ul-main-menu li {display:inline;width:auto;}
#mymenu ul.ul-main-menu li a {font-family: 'Poppins', sans-serif;color:#fff;font-weight:500;font-size:14px;line-height:76px;text-decoration:none;display:inline-block;padding:6px 16px 4px 16px;width:auto;text-align:center;height:auto;max-height:42px;}

#mymenu ul.ul-main-menu li.highlight > a{background-color:#7bcced;} /*highlights the menu button that is associated with the page or section*/
#mymenu ul.ul-main-menu li a:hover{color:#7bcced;
-o-transition:color .4s ease-out, background .4s ease-in;
  -ms-transition:color .4s ease-out, background .4s ease-in;
  -moz-transition:color .4s ease-out, background .4s ease-in;
  -webkit-transition:color .4s ease-out, background .4s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .4s ease-out, background .4s ease-in;

} /*highlights the menu button on hover*/
#mymenu ul.ul-main-menu li:hover {background-color:transparent;height:auto;line-height:32px;max-height:42px;height:auto;/*if you put display: in here the li block above an inner menu will push the next li down about 3px*/

} 
/*this above > keeps the parent menu item hovered while also displaying and hovering the dropdown menu */
/*http://stackoverflow.com/questions/16802823/keep-parent-menu-item-highlighted-after-hovering-over-submenu-html-css-jquery */

/* The dropdown links under a main menu link */
#mymenu ul.ul-main-menu li ul {display:none;visibility: hidden;}
#mymenu ul.ul-main-menu li:hover ul#ul-inner-menu {display:block;visibility: visible;list-style-type:none;width:220px;height:auto;float:left;margin-top:0px;position:absolute;left:0px;background-color:#303030;text-align:left;z-index:999 !important;overflow:hidden;border:0px solid #CCC;
-o-transition:color .4s ease-out, background .1s ease-in;
-ms-transition:color .4s ease-out, background .1s ease-in;
-moz-transition:color .4s ease-out, background .1s ease-in;
-webkit-transition:color .4s ease-out, background .1s ease-in;
/* ...and now override with proper CSS property */
transition:color .4s ease-out, background .1s ease-in;
/*-moz-border-radius: 0px 0px 6px 6px;
-webkit-border-radius: 0px 0px 6px 6px;*/
border-radius: 0px 0px 6px 6px; /* future proofing */
/*-khtml-border-radius: 0px 0px 6px 6px; /* for old Konqueror browsers */

/*-webkit-box-shadow: rgba(115,115,115,.25) 6px 6px 6px;
-moz-box-shadow: rgba(115,115,115,.25)  6px 6px 6px;
box-shadow: rgba(115,115,115,.25)  6px 6px 6px;
text-shadow: rgba(115,115,115,.25)  6px 6px 6px;
*/
}

#mymenu ul.ul-main-menu li:hover ul li {width:100%;height:auto;float:left;position:relative;}
#mymenu ul.ul-main-menu li:hover ul li a {font-size:14px;line-height:32px;color:#fff;max-height:42px;height:auto;padding:2px 4px 4px 8px;margin:0;font-weight:500;}
#mymenu ul.ul-main-menu li:hover ul li a:hover {text-decoration:none;background-color:#7bcced;width:100%;text-align:left;max-height:42px;height:auto;}
#mymenu li {position:relative;} /*keeps inner menu lined up with the main menu item above it*/


.menu-left{display:inline-block;}
.menu-right{display:none;visibility:hidden;}

/*MOBILE*/

@media all and (max-width:800px){
.hide-menu-button{display:block;visibility:visible;}

.menu-left{width:50%;border:0px solid #FFF;text-align:left;display:inline-block;}
.menu-right{width:50%;border:0px solid #FFF;text-align:right;display: inline-block;visibility:visible;font-family: 'Poppins', sans-serif;color:#fff;font-weight:600;font-size:14px;line-height:32px;text-decoration:none;padding:0px 16px 0px 0px;max-height:42px;}


#mymenu{min-width:100%;height:auto;width:100%;overflow:hidden;text-align:center;}

#mymenu{min-width:100%;height:auto;width:100%;}
#mymenu ul.ul-main-menu{min-width:100%;height:auto;width:100%;background-color:#303030;text-align:left;}
#mymenu ul.ul-main-menu li.highlight > a {background-color:transparent;}

 /*main menu headings*/
#mymenu ul.ul-main-menu li a {line-height:32px;color:#fff;text-decoration:none;border:0px solid #5a471c;padding:2px 0px 2px 20px;height:auto;max-height:42px;margin:0;text-align:left;width:100%;}
#mymenu ul.ul-main-menu li a {border-bottom:1px solid #505050;}

#mymenu ul.ul-main-menu li:hover {width:100%;
-o-transition:color 0s ease-out, background 0s ease-in;
  -ms-transition:color 0s ease-out, background 0s ease-in;
  -moz-transition:color 0s ease-out, background 0s ease-in;
  -webkit-transition:color 0s ease-out, background 0s ease-in;
  /* ...and now override with proper CSS property */
transition:color 0s ease-out, background 0s ease-in;
/*-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;*/
border-radius: 0px 0px 0px 0px; /* future proofing */
/*-khtml-border-radius: 0px 0px 0px 0px; /* for old Konqueror browsers */
} 

#mymenu ul.ul-main-menu li ul {display:none;visibility:hidden;list-style-type:none;width:100%;height:auto;float:none;margin-top:0px;position:relative;text-align:left;overflow:hidden;z-index:999 !important;
/*-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;*/
border-radius: 0px 0px 0px 0px; /* future proofing */
/*-khtml-border-radius: 0px 0px 0px 0px; /* for old Konqueror browsers */

}

#mymenu ul.ul-main-menu li ul#ul-inner-menu li a{padding:4px 0 4px 20px;color:#fff;font-weight:400;font-family: 'Poppins', sans-serif;border-bottom:1px solid #303030;}

#mymenu ul.ul-main-menu li ul#ul-inner-menu.toggle-service-off{display:none;visibility:hidden;
/*-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;*/
border-radius: 0px 0px 0px 0px; /* future proofing */
/*-khtml-border-radius: 0px 0px 0px 0px; /* for old Konqueror browsers */}

#mymenu ul.ul-main-menu li ul#ul-inner-menu.toggle-service-on{display:block;visibility:visible;list-style-type:none;width:100%;height:auto;float:none;top:0px;position:relative;text-align:left;overflow:hidden;z-index:999 !important;background-color:#505050;color:#fff;line-height:0;border:0;
/*-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;*/
border-radius: 0px 0px 0px 0px; /* future proofing */
/*-khtml-border-radius: 0px 0px 0px 0px; /* for old Konqueror browsers */
}
#mymenu ul.ul-main-menu li:hover ul#ul-inner-menu.toggle-service-on{display:block;visibility:visible;position:relative;float:none;overflow:hidden;background-color:#505050;color:#fff;height:auto;float:none;
/*-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;*/
border-radius: 0px 0px 0px 0px; /* future proofing */
/*-khtml-border-radius: 0px 0px 0px 0px; /* for old Konqueror browsers */
}/*display inline-block pushes the inner-menu down correctly */

.hide-menu-button{font-size:18px;padding:4px;color:#FFF;border:none;display:inline-block;}

.fa-angle-right{
  transform: rotate(0deg);
  transition: transform 0s linear;
}

.fa-angle-right.open{
  transform: rotate(90deg);
  transition: transform 0s linear;
}
}
@media print {
html, body {background-image:none;}
}