/* CSS for Mobile Menu */

#navigation-container {
  z-index: 15;    
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 0px solid blue;
  position: relative;
}

#mobile-menu-icon {
  display: none;
  transform: scale(1);
  min-width: 35px;
  min-height: 41px;
  cursor: pointer;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000; /* Keep above most elements but below mobile menu itself */
}

#mobile-menu #m-menu-nav-bar #m-nav-prev::before{
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  visibility: hidden; 
  transform: translateY(-50%) scale(.60);
  width: 19px;
  height: 38px;
  background-image: url('../../../plugins/cm-alpha/images/sprites/cm-sprites.png');
  background-repeat: no-repeat;
  background-position: -272px -142px;
}

#mobile-menu .menu-item-has-children::after{
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%) scale(.60); 
  width: 19px;
  height: 38px;
  opacity: .6;
  background-image: url('../../../plugins/cm-alpha/images/sprites/cm-sprites.png');
  background-repeat: no-repeat;
  background-position: -272px -86px;
}

#mobile-menu {
  width: 300px;
  position: fixed;
  display: none;
  z-index: 1001;
  top: 0;
  left: 0;
}

.menu-item-has-children {
  pointer-events: all;
}
.menu-item-has-children {
  position: relative;
  z-index: 14;
}

.mobile-sub-menu {
  position: absolute;
  z-index: 13;
}

.m-menuitems-active{
  display: block !important;
}  

#m-menu-nav-bar .m-main-menu-heading {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
#m-nav-prev{
  display: flex;
  align-items: center;
  position: relative;

  text-align: left;
  padding: .75em 0 .75em 35px;
  cursor: pointer;    
}
 
.m-menuitems-not-active {
  display: none;
}

.mobile-menu-fade-site {
  display: none;
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(45, 39, 14, 0.8);
  z-index:10;
}

#mobile-menu-close {
  position: absolute;
  top: 0px;
  right: -42px;
  width: 35px;
  height: 37px;
  font-size: 41px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 3px;
}


.m-menu-heading-active{
   display:block !important;
}

/* ensures the < arrow is visible when you need it to be */
#mobile-menu #m-menu-nav-bar #m-nav-prev.m-show-sprite::before {
  visibility: visible; /* Show the sprite when class is applied */
}

#mobile-menu .menu-m-nav-prev-home{
  position: relative !important;
  padding: 0px 0px 0px 0px !important;
  display: block !important;
  width: 100%;
  text-align: center;
}
#m-menu-heading-bar{
  padding: .25em 0px .25em 0px;
  width: 100%;
  position:relative;
  z-index: 1;
  text-align: center;
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none; /* For Safari */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For Internet Explorer/Edge */    
}

#mobile-menu .m-zero-padding-heading-bar-home{
  padding:0px !important;
}

#mobile-menu .menu-item, #mobile-menu .menu-item span  {
  padding: 15px 0 15px 6px;
  cursor: pointer;
}
#m-menu-nav-bar span{
  padding: 0 0 0 6px;
  font-size: clamp(16px, 1.4vw, 32px);
}
 

#mobile-menu .mobile-sub-menu {
  display: none;
}

#mobile-menu-close{
  background-color: #892020;
  color: #ccc7c7;
}
#mobile-menu-close:hover {
  background-color: #555;
}

#mobile-menu .cm-main-heading{
  border: solid thin;
} 

#mobile-menu .cm-section-heading{
  border-bottom: solid 1px;
}


#m-menu-heading-bar{
   padding: .25em 0px .25em 0px;
   width: 100%;
   border-bottom: solid thin;
   position:relative;
   z-index: 1;
   user-select: none; /* Prevent text selection */
   -webkit-user-select: none; /* For Safari */
   -moz-user-select: none; /* For Firefox */
   -ms-user-select: none; /* For Internet Explorer/Edge */    
}


/* COLORS ONLY BELOW THIS LINE */


#mobile-menu .cm-main-heading{
  border-color: #777772;
  color: #FFFFFF;   
} 

/* Secondary Menu Heading */
#mobile-menu .cm-section-heading{
  background-color: #2a75b7;
  color: #FFFFFF; 
}

/* Menu Item */
#mobile-menu .cm-page-link{
   background-color: #B0C8DD;
   color: #000000;
   border-color: #879aaa;
}


#mobile-menu .cm-page-link{
  border-bottom: solid thin;
}

/* Menu Navigation Bar */
#m-menu-nav-bar{
   background-color:rgb(213, 226, 230);
   color: #000000;
}

/* Menu Heading Bar */
#m-menu-heading-bar{
   background-color: #751717;
   color: #FFFFFF;
   box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

#mobile-menu .cm-main-heading {background-color: rgb(206,198,166);}
#mobile-menu .cm-main-heading {color: rgb(57,56,56);}
#mobile-menu .cm-section-heading {background-color: rgb(121,136,111);}
#mobile-menu .cm-section-heading {color: #FFFFFF;}
#mobile-menu .cm-page-link {background-color: rgb(225,220,199);}
#mobile-menu .cm-page-link {color: #000000;}
#m-menu-nav-bar {background-color: rgb(83,96,80);}
#m-menu-nav-bar {color: #FFFFFF;}
#m-menu-heading-bar {background-color: rgb(206,198,166);}
#m-menu-heading-bar {color: rgb(79,74,74);}