.fn-container{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing: padding:0px 15px;background:#decae2;padding:0px; margin:0px; }

.fn-container *,.fn-container *:before,.fn-container *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; background:transparent;}

/* menu word and main bar and mobile drop down background*/

.fn-container-sm{padding:33px 0 0 0; border-bottom: 1px solid #653e92;}

.fn-container-sm.fn-container {min-height:33px; background-color:#653e92; color:#cccccc;  } 

.fn-container-sm .fn-name,.fn-container-sm .fn-button{display:block; }

.fn-container-lg .fn-name,.fn-container-lg .fn-button{display:none; }
 
 
 
/* menu WORDS ONLY and box showing all categories to line up with word MENU */

.fn-name{position:absolute;top:7px;left:12px; font: bold 12px verdana, arial, helvetica, san-serif;text-decoration:none; color:#fff; }



/* navicon bar */

.fn-button{position:absolute;right:11px;top:0px;box-sizing:border-box;margin:3px 0px 3px 0px;padding:6px;width:39px;border-radius:3px;}

.fn-button:hover{cursor:pointer;}@include box-shadow(inset 0 0 8px rgba(0, 0, 0, 0.3));
  

/* thickness of navicon bar */

.fn-bar{display:block;width:28px;height:2px;border-radius:1px;background-color:#ffffff;}

.fn-button .fn-bar+.fn-bar{margin-top:4px;}

.flexnav {
    padding: 8px 0;
}
.flexnav > ul {
    display: flex;
    justify-content: center;
    gap: 8px;
}
    .flexnav > ul li:hover ul {
        display: block;
    }

    .flexnav > ul ul {
        position: absolute;
        top: 18px;
        z-index: 9;
        display: none;
    }

.flexnav:before,
.flexnav:after{display:table;content:" ";}

.flexnav:after{clear:both;}

.flexnav ul {position:relative;margin:0px;padding:0px;list-style:none; }

.flexnav li{position:relative; }

 


/* sub drop down font size and font background for all dimensions  */

.flexnav a{ text-align:left; 
font: bold 12px arial, helvetica, san-serif;text-decoration:none; background-color:#decae2; }


.flexnav a:hover{text-decoration:none; }


.flexnav #current{ text-align:left; color:#672f8b; 
font: bold 12px  arial, helvetica, san-serif;text-decoration:underline; background:#decae2;}


.flexnav #current:hover {  font: bold 12px  arial, helvetica, san-serif;  color:#ffffff; background:#7645b0; text-decoration: underline;}


/* sub font dash border */
 
.flexnav a:hover,.flexnav a:focus {border-bottom:1px solid #000000;}  

.flexnav a,.flexnav a:link,.flexnav a:visited {color:#421379; text-decoration: none;border-bottom:1px dashed #672f8b;-webkit-transition:border-color 0.3s ease-in; } 
   
 
.fn-lg{ max-width:877px; padding:0px 1px;background:#decae2;text-align:center; margin:0px auto;  }

.fn-lg .navicon:after {border:6px solid transparent;border-top-color:#fff;content:"";
position:absolute;right:-2px;top:11px; }

.fn-lg .fn-back{display:none;}

/* dropdown outside box around all syb categories stroke */
 
 
.fn-lg ul ul{display:none;z-index:99;position:absolute;border-radius:4px;border:1px solid #7645b0;}

.fn-lg ul ul .navicon:after{border:5px solid transparent;border-left-color:#fff;top:10px;}

 
/* main font visible on top before any subs */


.fn-lg li a:hover{color:#7645b0; text-decoration: underline;}

.fn-lg li.active>a,.fn-lg li:hover>a{background:#7645b0;color:#ffffff;}

.fn-lg>ul>li{float:left;position:relative; white-space:nowrap;}

.fn-lg>ul>li a{display:block;padding:6px 13px 6px 13px;}
   
.fn-lg>ul>li>a{font: bold 12px  arial, helvetica, san-serif; }

.fn-lg>ul>li:first-child>a{border-left:none;}

.fn-lg>ul>li:hover>ul{opacity:1;visibility:visible;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}

.fn-lg>ul>li>ul{display:block;left:0;top:100%;padding-top:1px;opacity:0;visibility:hidden;}

  

/* 2nd level secondary sub drops  */


.fn-lg>ul>li>ul li:hover>ul{opacity:1;visibility:visible;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;}
 



.fn-lg>ul>li>ul ul{display:block;top:0;left:100%;padding-left:25px;opacity:0;visibility:hidden;}

.fn-lg>ul>li>ul ul:after{position:absolute;left:1px;top:10px;content:"";border:8px solid transparent;border-right:8px solid #7645b0;}

/* 2nd level subs */

.fn-sm{display:none;}




/* 2nd level I beam line */

.fn-sm .navicon{position:absolute;top:5px;right:2px;height:20px;width:50px;border-left:1px solid #612877;}

.fn-sm .navicon:hover{cursor:pointer;}

/* 2nd level arrow after I beam line */

.fn-sm .navicon:after{position:absolute;top:3px;right:10px;content:"";border:8px solid transparent;border-left:8px solid #612877;}


 
/* hover color 2nd level subs */

.fn-sm .fn-back{position:relative;background:#b7a5cb; color: #ffffff}



 /* left arrow after category select, hover after sub click before main category */

.fn-sm .fn-back:before{position:absolute;top:8px;left:18px;content:"";border:8px solid transparent;border-right:8px solid #612877;}

.fn-sm .fn-back a{display:block;padding-left:45px;}



 /* sub category indent spacing to right of menu after sub click before main category */
 
.fn-sm a{display:block;padding:7px 13px;}

.fn-sm a:hover{background-color:#9c62a8;color:#ffffff;}

/* Drop down arrow I beam color  */

.fn-sm li:hover>.navicon{border-left-color:#c5e2bc;}

.fn-sm li:hover>.navicon:after{border-left-color:#612877;}
  




/* Drop down arrow I beam color  */


.fn-sm .sub-ul{display:none;}

@-webkit-keyframes slide{0%{-webkit-transform:translateX(100%);opacity:0;} 100%{-webkit-transform:translateX(0px);opacity:1;}}@-moz-keyframes slide{0%{-moz-transform:translateX(100%);opacity:0;} 100%{-moz-transform:translateX(0px);opacity:1;}}@keyframes slide{0%{transform:translateX(100%);opacity:0;} 100%{transform:translateX(0px);opacity:1;}}.fn-sm.fn-subview li,.fn-sm.fn-subview li.fn-subviewopen>a,.fn-sm.fn-subview li.fn-subviewopen>.navicon,.fn-sm.fn-subview li.fn-subview>a,.fn-sm.fn-subview li.fn-subview>.navicon {display:none;}

.fn-sm.fn-subview li.fn-subview,.fn-sm.fn-subview li.fn-subview .sub-ul,.fn-sm.fn-subview li.fn-subviewopen,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul>li>a,.fn-sm.fn-subview li.fn-subviewopen>.sub-ul>li{display:block;-webkit-animation:slide 0.25s ease-in-out;-moz-animation:slide 0.25s ease-in-out;animation:slide 0.25s ease-in-out;}


/* main navicon hover background */

.fn-light .fn-button:hover,.fn-dark .fn-button:hover{background-color:#a069ac;}

 
.fn-light .fn-button:hover .fn-bar,.fn-dark .fn-button:hover .fn-bar{background-color:#fff;}

 
/* main navicon hover background */


.fn-light ul ul li,.fn-dark ul ul li{background:#ffffff;}


.fn-light{color:#4a794a;}.fn-light a{color:#b086b7;}

.fn-light .fn-bar{background-color:#ffffff;}

.fn-dark{color:#ffffff;}.fn-dark a{color:#ffffff;}

.fn-dark .fn-bar{background-color:#ffffff;}

 
   
 
  

@media only screen and (max-width : 950px) {
  

.fn-lg{ max-width:825px; padding:0px 1px;background:transparent;text-align:center; margin:0px auto;  }


 
.fn-lg>ul>li a{display:block;padding:6px 10px 6px 10px;}
 

 }

   
 
  

@media only screen and (max-width : 890px) {


   
.fn-lg{ max-width:800px; padding:0px 1px;background:#decae2;text-align:left; margin:0px;  }

 
/* main font visible on top before any subs */ 
 
 

.flexnav #current{ text-align:left; color:#672f8b; 
font: bold 12px  arial, helvetica, san-serif;text-decoration:underline; background:#decae2;}


.flexnav #current:hover {  font: bold 12px  arial, helvetica, san-serif;  color:#ffffff; background:#7645b0; text-decoration: underline;}
   
 
.fn-lg>ul>li a{display:block;padding:6px 8px 6px 9px;}
 

.fn-lg>ul>li>a{font: bold 12px  arial, helvetica, san-serif; }



  

 }

   
 