/* cmsms stylesheet: Main Menu modified: 02/01/26 11:22:33 */
#main-menu-container {border:none;overflow-y:scroll;}

div.main-navigation {
    height: auto;
    float: none;
    display: block;
    margin-left: 0;
    width: 100%;
    clear: left;
    border:none;
    text-transform:uppercase;
}

#main-menu {
    border:none;
    padding:0;
    list-style:none;
    font-weight:400;
    line-height:1.75em;
    font-size: 1.25em; 
    margin:80px 0 0 0;
    width:99%;
}


#main-menu > li {
	display: block;
	position: relative;
        width:97%;
        text-align:left;
        padding:0;
        list-style:none;
        border: none;
        margin:0 0 .5em 0;
        background-color:#ecc743;
        
}

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

#main-menu > li > a,
#main-menu > li.sectionheader > span {
	color:#0344aa;
	text-decoration: none;
	cursor: pointer;
	padding:0 0 0 2em;
	display: block;
	position: relative;
        font-size:1em;
        line-height:2.5em;
        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: #ecc743;
        background-color:#0344aa;
        border:none;

}


#main-menu > li > ul,
#main-menu > li > ul > li > ul  {
	position: relative;
	left:0;
        border:none;
        list-style:none;
        padding:0;
        width:auto;
        margin:0;
}

#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:0;
        border:none;
        margin:0;
        padding;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 {
	text-decoration: none;
	color: #0344aa;
	text-transform: uppercase;
	display: block;
	padding:.25em 0 .25em .5em;
        border:none;
        line-height:2em;
        margin:0;
}

#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: #ecc743;
        background-color:#0344aa;
        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: inline-block;
  width:40px;
  height:40px;
  position:absolute;
  top:50px;
  right:15px;
  padding:0;
  line-height: 1em;
  font-size: 1em;
  color: #333;
  background-color:transparent;
  background-image:url(/uploads/images/layout/menu_open.png);
  background-repeat:no-repeat;
  background-size:contain;
  border:none;
  border-radius:3px;
}


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

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

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


.main-menu .menu-close {
  position: absolute;
  top:10px;
  right:15px;
  width:40px;
  height:40px;
  background-image:url(/uploads/images/layout/menu_close.png);
  background-repeat:no-repeat;
  background-size:contain;
  border:none;
  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: 95%;
  height: 90%;
  z-index: 998;
  background: #fff;
  cursor: default;
  border:none;
  opacity:0.95;
  overflow-y:scroll;
}

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

/* FLEX 1 */


/* =====================================
 SCREENS IPAD 700px - 1000px
 ===================================== */

@media screen and (min-width: 700px)    {

/* HAMBURGER MENU */


/* Button styling */
.menu-toggle {
  width:60px;
  height:60px;
  top:50px;
  right:20px;
}

.main-menu .menu-close {
  width:60px;
  height:60px;
  top:15px;
  right:20px;
}



}

/* FLEX 2*/

/* =====================================
 SCREENS BIGGER THAN 1000px 
 ===================================== */

@media screen and (min-width: 1000px) {

div.main-navigation {
    height: auto;
    float: none;
    display: block;
    margin-left: 0;
    width: 100%;
    clear: left;
    text-transform:uppercase;
}

#main-menu {
    border:none;
    padding:0;
    list-style:none;
    font-weight:600;
    line-height:1.5em;
    font-size: 1.25em; 
    margin:120px 200px 0 auto;
    width:50%;
}

.menu-toggle {
  width:150px;
  height:150px;
  top:60px;
  right:20px;
}

.main-menu .menu-close {
  width:80px;
  height:80px;
  top:60px;
  right:90px;
}

.main-menu:target,
.main-menu[aria-expanded="true"] {
  left: 0;
  outline: none;
  -moz-box-shadow: -3px 0 -12px rgba(0,0,0,.25) inset;
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25) inset;
  box-shadow: -3px 0 -12px rgba(0,0,0,.25) inset;
border:none;
   width:100%;
}

.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  left: 230px;
  top: 50px;
  width: 100%;
  height: 90%;
  z-index: 998;
  background: #fff;
  cursor: default;
  border:none;
  opacity:0.9;
  overflow-y:scroll;
  border-radius: 15px 0 0 15px; 
}



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

}