/* ------------------------------------------------------------------------ */
/* START Main Navigation
--------------------------------------------------------------------------- */

nav > ul > li > div {
    position: absolute;
    left: 0;
    opacity: 0;
    display: none; /*--Hidden for those with js turned off--*/
    text-align: left;

}
nav > ul > li:last-child > div {
    left: unset;
    right: 0;
}

ul.mainNav li .sub {
    background-color: #fce3af;/**/
    padding: 2em 2%;
    right: 0;
}

/*nav { position: relative; z-index: 1; }*/
nav > ul { display: block; text-align: center; margin: 0; padding: 0; }
nav > ul > li { /*display: inline-block;*/ margin: 0; padding: 0; }

nav > ul > li > a { display: block; background: none; color: #ffffff; padding: .75em 1em; /*font-weight: bold;*/
                                     -webkit-transition: all .15s ease;
    -moz-transition: all .15s ease;
    -o-transition: all .15s ease;
    transition: all .15s ease;
}

.header nav a.back {
        display: none!important;
    }
[off-canvas] ul.mainNav li .sub {padding: 0;}
[off-canvas] li {position: unset;}
[off-canvas] nav {background-color: unset !important;}
[off-canvas] nav a.back {display:block!important;background-color: #fff;}
[off-canvas] nav > ul a:hover { background: #fce3af; color: #0A1434; text-decoration: none; }

[off-canvas] nav {background-color: transparent;}
    [off-canvas] nav > ul li {
        position: relative;
        display: block;
        text-align: left;
        letter-spacing: 1px;
        font-size: .95em;
        background-color: #fff;
    }
[off-canvas] nav > ul > li a {position:relative; display:block; padding: .75em 2.5em .75em 2em; color: #000; background-color:#fff; border-top: 1px solid #eee;}
    [off-canvas] nav > ul > li:not(.ghost) a:not(.back):not(.delete)::after {
        position: absolute;
        right: 2em;
        top: .9em;
        font-family: "Font Awesome 5 Free";
        content: '\f105';
        color: #888;
        font-weight: bold;
    }

[off-canvas] ul {position: relative; left: 0; -moz-transition: left 300ms; -o-transition: left 300ms; -webkit-transition: left 300ms; transition: left 300ms;}
[off-canvas] nav > ul li > div {position:absolute; top: 0; left: 255px; right: unset; width: 255px; opacity: 1!important; padding: 0; background-color: unset; }
[off-canvas] nav > ul li > div div {top: -3em; background-color:#f5f5f5}
[off-canvas] ul.expanded { left: -255px; }

[off-canvas] nav > ul > li.expanded > div,
[off-canvas] nav > ul li.expanded > div > ul { display:block!important; }
[off-canvas] nav > ul li a.back::before { font-family: "Font Awesome 5 Free"; content:'\f104'; font-weight: bold; padding-right: .5em; }
[off-canvas] nav > ul li a.delete {
    top: 10px !important;
    right: 15px !important;
}

.header ul.mainNav li .sub ul li a { line-height: normal; display: block; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; }
.header ul.mainNav li .sub ul li ul li { font-weight: normal; }



/* for testing only 
ul.mainNav li.sub1 .sub,
ul.mainNav li.sub7 .sub { display: block!important; opacity: 100!important; filter: alpha(opacity=100)!important; }*/
 
/* ---------------------- */
/* customizations
------------------------- */

  .header   ul.mainNav li .sub > ul {margin: 0 auto; width: 100%;}
	.header ul.mainNav li .sub > ul.horiz { max-width: 1600px;  }
  .header   ul.mainNav li .sub > ul.vert { max-width: 1000px;  }

	.header 	div.sub ul li a { padding: .7em 1.75em; color: #0a1434; }


        /*optional next level*/
	div.sub ul.horiz li ul { display: none; }
    /*div.sub ul.horiz li ul.bloom { display: block;}*/

      .header   div.sub ul.horiz li ul li a {
                padding: .45em .75em .45em 1.5em;
                margin: .25em .7em;
                background-color: rgba(255,255,255,.8);
                -moz-box-shadow: 0 0 0.3em -0.1em #000;
                -webkit-box-shadow: 0 0 0.3em -0.1em #000;
                box-shadow: 0 0 0.3em -0.1em #000;
            }
      

	.header 	div.sub ul li a:hover,
     .header    div.sub ul.horiz li ul li a:hover { background-color: #fff; -moz-box-shadow: 0 0 0.3em #000; -webkit-box-shadow: 0 0 0.3em #000; box-shadow: 0 0 0.3em #000; }

      .header   ul.mainNav li .sub ul li.view { text-align: center; padding: .7em 0; background-color: transparent;}
      .header   ul.mainNav li .sub ul.vert li.view {display:block; margin: 1em auto 0; background-color: rgba(0,0,0,.3); -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; font-size: .8em; letter-spacing: 1px}
      .header   ul.mainNav li .sub ul li.view a {
                padding: .45em .75em;
                font-weight: bold;
                display: inline;
                background: none;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                letter-spacing: .1em;
            }
		.header ul.mainNav li .sub ul li.view a:hover { background-color: #fff; }

       .header  ul.mainNav li .sub ul.vert li.view a {color: #fff;}

       .header ul.mainNav li .sub ul.vert li.view a {color: #fff;}
       .header ul.mainNav li .sub ul.vert li.view a:hover { background-color: #fff; color: #000; }
.header div.sub ul > li {
    margin: .7%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    background-color: rgba(255,255,255,.7);
    -moz-box-shadow: 0 0 3em -1.5em #000;
    -webkit-box-shadow: 0 0 3em -1.5em #000;
    box-shadow: 0 0 3em -1.5em #000;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
}      
 .header  div.sub ul.vert li {
      background-color: rgba(255,255,255,.8);
      display: inline-block;
    width: 31%;
    border: solid 2px #aaa;
        }  
      .header div.sub > ul > li > a { font-weight:bold; font-size:1.1em; }


@media only screen and (min-width : 1024px) {
   .header  ul.mainNav li .sub {
        background: #fce3af url(/files/freestyle/1920/abstract-1850424_1920.jpg);
        background-size: cover;
        background-attachment: fixed;
    }

   .header  div.sub ul.horiz > li {
        width: 23.25%;
        display: inline-block;
        padding: 1em;
    }

    .header div.sub ul.horiz li a {
        padding: .25em .75em;
    }

    .header div.sub ul.horiz li ul { margin-top: .8em; display: block!important;}

    .header div.sub ul.horiz li ul li a { margin: .25em 0; }

    .header div.sub ul.horiz li li.view { padding: .7em 0 .25em;}
}