/* cmsms stylesheet: Responsive Menu modified: 01/26/20 19:55:34 */


#main-menu-container {border:none;overflow-y:scroll;display:none;}

#main-menu {
	font-family: sans-serif;
        font-size: 1em; 
	font-weight: 500;
        margin:60px auto;
        width:100%;
        border:none;
        letter-spacing:2px;
        
}


#main-menu > li {
	display: block;
	position: relative;
        width:97%;
        text-align:left;
        padding:0;

        
}

#main-menu > li:last-child {
	border-bottom: none;
}

#main-menu > li > a,
#main-menu > li.sectionheader > span {
	background-color:#666
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	padding:0 0 0 .5em;
	display: block;
	position: relative;
        font-size:1em;
        line-height:2em;
        border:none;

}

#main-menu > li.current > a,
#main-menu > li.current.sectionheader > span,
#main-menu > li:hover > a,
#main-menu > li.sectionheader:hover > span {
	color: #fff;
        background-color:#ccc;

}


#main-menu > li > ul,
#main-menu > li > ul > li > ul  {
	position: relative;
	left: 1em;
        border:none;
}

#main-menu > li:hover > ul,
#main-menu > li.active > ul,
#main-menu > li > ul > li:hover > ul, 
#main-menu > li > ul > li.active > ul {
	position: relative;
	left: 1em;
        border:none;
}

#main-menu > li > ul > li > a,
#main-menu > li > ul > li.sectionheader > span,
#main-menu > li > ul > li > ul > li > a, 
#main-menu > li > ul > li > ul > li.sectionheader > span {
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	display: block;
	padding:0;
        border:none;
        line-height:2em;
}

#main-menu > li > ul > li:hover > a,
#main-menu > li > ul > li.sectionheader:hover > span,
#main-menu > li > ul > li > ul > li:hover > a,
#main-menu > li > ul > li > ul > li.sectionheader:hover > span {
	color: #ccc;
        background-color:#fff;
        width:97%;
        border:none;
}


#main-menu > li > ul > li > ul > li > a,
#main-menu > li > ul > li > ul > li.sectionheader > span {
	padding-left: 15px;
	font-size: .875em;
	text-transform: none;
}


#main-menu > li > a i,
#main-menu > li > ul > li > a i,
#main-menu > li.sectionheader > span i,
#main-menu > li > ul > li.sectionheader > span i {
	float: right;
	position: relative;
	padding-top: 6px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform 250ms ease-out 0s;
	-moz-transition: -moz-transform 250ms ease-out 0s;
	-o-transition: -o-transform 250ms ease-out 0s;
	transition: transform 250ms ease-out 0s;
}

#main-menu > li:hover > a i,
#main-menu > li.active > a i,
#main-menu > li > ul > li:hover > a i,
#main-menu > li > ul > li.active > a i,
#main-menu > li.sectionheader:hover > span i,
#main-menu > li.active.sectionheader > span i,
#main-menu > li > ul > li.sectionheader:hover > span i,
#main-menu > li > ul > li.active.sectionheader > span i {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}




/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button styling */
.menu-toggle {
  display: none;
  width:40px;
  height:38px;
  position:absolute;
  top:10px;
  left:10px;
  padding:0;
  line-height: 1em;
  font-size: 1em;
  color: #333;
  background-color:#fff;
  background-image:url(/uploads/images/layout/menu_open.png);
  background-repeat:no-repeat;
  background-size:contain;
  border:1px solid #666;
  border-radius:3px;
}


.menu-toggle:hover,
.menu-toggle:focus {
  color: #666;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/

.main-menu {
  position: absolute;
  left: -98%;
  top: 0;
  height: 100%;
  overflow-y: visible;
  overflow-x: visible;
  border:none;
  z-index: 999;
}


.main-menu .menu-close {
  position: absolute;
  top:10px;
  left:10px;
  width:40px;
  height:38px;
  background-image:url(/uploads/images/layout/menu-close.png);
  background-repeat:no-repeat;
  background-size:contain;
  border:1px solid #666;
  border-radius:3px;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  left: 0;
  outline: none;
  -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  box-shadow: 3px 0 12px rgba(0,0,0,.25);
border:none;
   width:97%;
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
  z-index: 1001;

}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/* 
 We could us `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  left: 0;
  top: 0;
  width: 97%;
  height: 100%;
  z-index: 998;
  background: #fff;
  cursor: default;
  border:none;
  opacity:0.9;
  overflow-y:scroll;
}

@supports (position: fixed) {
  .main-menu,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop {
    position: fixed;
  }
}

/* FLEX 1 */
@media screen and (min-width: 768px) {

div.main-navigation {
		height: auto;
		float: none;
		display: none;
		margin-left: 0;
		width: 100%;
		clear: left;
                border:none;
	}
	
	#main-menu {
		margin-top: 15px;
		margin-bottom: 15px;
		border-bottom: none;
		float: none;
		display: block;
		font-size:.9em;
	}
	
	#main-menu > li {
		margin: 0;
		bottom: -1px;
		text-align: center;
		border:none;
	}
	
	#main-menu > li.current {
		border-bottom-color: #fff;
		border-top-color:#ccc;
	}
	
	#main-menu > li.current > a {
		border:none;
		
	}
	
	#main-menu > li:first-child {
		border:none;
	}
	
	#main-menu > li > a,
	#main-menu > li > span {
		padding-left: 12px;
		padding-right: 6px;

	}
	
	#main-menu > li:hover > ul,
	#main-menu > li.active > ul {
		top: 46px;
	}



}

/* FLEX 2 */
@media screen and (min-width: 1000px) {



#main-menu-container {overflow-y:visible;}

	div.main-navigation {
		z-index: 990;
		height: 55px;
		line-height: 1.5em;
                width:100%;
		margin-top:0;
                position: relative;
                margin-bottom:1em;
                border:none;
	}
.menu-toggle,.main-menu .menu-close {
    display: none;
  }
  
  /* Undo positioning of off-canvas menu */
  .main-menu {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
  }

  

	#main-menu {
		font-size:1.0em;
                font-weight:600;
                float: none;
		margin:1em auto 0 auto;
                width:100%;
                height:auto;
                padding:0;
                border:none;
                position:relative;
                top:-8px;
                letter-spacing:2px;
                overflow:visible;
	}
	
	
	#main-menu > li {
		display: inline-block;
		padding: 0;
		margin: 0 4px;
		border: none;
                width:10%;
                text-align:center;
                white-space:nowrap;
	}
#main-menu > li:nth-child(1) {padding-left:18%;border:none;}

	
	#main-menu > li i {
		display: none;
	}
	
	.touch-device #main-menu > li i {
		display: inline-block;
		float: none;
	}
	
	.touch-device #main-menu > li li i {
		float: left;
		display: inline-block;
		margin-right: 8px;
		padding-top: 2px;
		text-align: left;
	}
	
	.touch-device #main-menu > li:first-child li i {
		float: right;
	}

	#main-menu > li:first-child, #main-menu > li.first {
		margin-left: 0;


	}


	#main-menu > li:last-child, #main-menu > li.last {
		margin-right: 0;
	}

	#main-menu > li > a, 
	#main-menu > li.sectionheader span {
		padding:10px 10px 7px 10px;
		line-height: 2em;
                font-size:1em;
                border:none;
                background-color:transparent;
                color:#666;
	}



	#main-menu > li.parent:hover > a, 
	#main-menu > li.sectionheader.parent:hover > span,
	#main-menu > li.parent.active > a, 
	#main-menu > li.parent.active > span {
		color: #ccc
                background-color:transparent;
	        border:none;	
                opacity:0.9;
	}

#main-menu > li.current {
         background-color:transparent;
         color:#666;
}

#main-menu > li.current > a,
#main-menu > li.current.sectionheader > span,
#main-menu > li:hover > a,
#main-menu > li.sectionheader:hover > span {
	background-color:transparent;
        color:#666;

}

	


#main-menu > li > ul,
#main-menu > li > ul > li > ul  {
	position: absolute;
	left:-999em;
}


	#main-menu > li > ul,
	#main-menu > li > ul > li > ul  {
		display: block;
		width: 100%;
                background-color: #fff;
                
            
	}

        #main-menu > li:hover > ul,
	#main-menu > li.active > ul,
	#main-menu > li > ul > li:hover > ul,
	#main-menu > li > ul > li.active > ul {
		height: auto;
		position: absolute;
		z-index: 9999;
		top: 46px;
		right: auto;
		left: 0;
		display: block;
		border-radius: 0;
                opacity:0.9;
                border:none;
                width:20em;
                padding:0;
	}
	
        #main-menu > li:first-child > ul {
                border:none;
                margin-left:200px;
}
	
	#main-menu > li > ul > li {
		position: relative;
		line-height: 1.25;
		margin: 0;
		padding:0;
               border:none;
	}
	
	#main-menu > li:first-child > ul > li {
		padding-right: 0;
		padding-left: 0;

                
	}
	
	#main-menu > li > ul > li > a,
	#main-menu > li > ul > li.sectionheader > span,
	#main-menu > li > ul > li > ul > li > a,
	#main-menu > li > ul > li > ul > li.sectionheader > span {
		color: #666;
		display: block;
		text-transform: uppercase;
		line-height: 1.25em;
		border-bottom: none;
		background-color: #fff;
		padding: 5px;
		font-size: 1em;
		text-decoration: none;
                text-align:left;
                border:none;
                width:15em;
	}
	
	#main-menu > li > ul > li.current > a, 
	#main-menu > li > ul > li.current.sectionheader > span,
	#main-menu > li > ul > li > ul > li.current > a, 
	#main-menu > li > ul > ul > li > li.current.sectionheader > span {
		color: #ccc;
	}

#main-menu > li > ul > li:hover > a,
#main-menu > li > ul > li.sectionheader:hover > span,
#main-menu > li > ul > li > ul > li:hover > a,
#main-menu > li > ul > li > ul > li.sectionheader:hover > span {
	color: #ccc;
        background-color:#fff;
        width:95%;
        border:none;
}

	
	#main-menu > li > ul > li:hover > ul,
	#main-menu > li > ul > li.active > ul {
		width: 15em;
		height: auto;
		top: 0;
		right: auto;
		left: -15em;
	}
	
	#main-menu > li:first-child > ul > li:hover > ul,
	#main-menu > li:first-child > ul > li.active > ul {
		left: auto;
		right: -250px;

	}
	
	.lt-ie9 #main-menu > li > ul > li:hover > ul,
	.lt-ie9 #main-menu > li > ul > li.active > ul {
		left: -247px;
	}

	#main-menu > li > ul > li:hover > ul:after,
	#main-menu > li > ul > li.active > ul:after {
		content: ' ';
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 0;
		border-color: transparent;
		position: absolute;
		right: -6px;
		top: 12px;
	}
	
	.lt-ie9 #main-menu > li:first-child > ul > li:hover > ul,
	.lt-ie9 #main-menu > li:first-child > ul > li.active > ul {
		left: auto;
		right: -247px;
	}
	
	#main-menu > li:first-child > ul > li:hover > ul:after,
	#main-menu > li:first-child > ul > li.active > ul:after {
		left: -10px;
		right: auto;

	}

	#main-menu li ul li a:hover, 
	#main-menu li ul li span.sectionheader:hover {
		box-shadow: 0;
		z-index: 2;
	}

	#main-menu > ul > li:last-child > a,
	#main-menu > ul > li.sectionheader:last-child > span,
	#main-menu > ul > li > ul > li:last-child > a,
	#main-menu > ul > li > ul > li.sectionheader:last-child > span {
		border-bottom: none;
	}

}