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

/* Navigation */

#navbar{

}
#nav{
width:100%;
position: relative;
font-weight:bold;
background-image:url(menufix.gif);
background-color:#ffffff;
margin-top:20px;

}
#nav ul{
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
float:right;
}
#nav > a, #nav .mobnav{
display: none;
}
#nav li{
position: relative;
list-style:none;
}
#nav li a{
color: #333333;
display: block;
text-decoration:none;
-webkit-transition: background-color .3s linear, color .3s linear;
-moz-transition: background-color .3s linear, color .3s linear;
-o-transition: background-color .3s linear, color .3s linear;
-ms-transition: background-color .3s linear, color .3s linear;
transition: background-color .3s linear, color .3s linear;
}
#nav>ul>li>a.selected{
background-color: #f8f8f8;
color:#7413dc;
}
#nav ul ul li a.selected{
background-color: #f8f8f8;
color:#7413dc;
}

/* first level */

#nav > ul{
}
#nav > ul > li{
height: 100%;
float: left;
background-image:url(menufix.gif);
}
#nav > ul > li > a{
padding:10px 12px 10px 12px;
font-size: 1.1em;
text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
*/border-right: 1px solid #ffffff;*/
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.selected > a, #nav > ul > li:focus-within > a, #nav > ul:not( :focus-within ) > li.selected > a{
background-color: #f8f8f8;
color:#7413dc;

}

/* second level */

#nav li ul{
background-image:url(menufix.gif);
position: absolute;
left: -9999px;
opacity:0;
top: 100%;
z-index:999;
}
#nav>ul>li>ul{
padding-top:10px;
padding-bottom:10px;
background-color:#ffffff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
}
#nav>ul>li>ul>li>ul{
margin-left:10px;
padding-top:10px;
padding-bottom:10px;
background-color:#ffffff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
}
#nav li ul li{
background-color:#ffffff;
z-index:9;


padding:0px 10px 0px 10px;
}
				

    #nav>ul>li{
    
    }
    #nav li ul{
    width:300px;
    -webkit-transition: opacity .3s linear;
    -moz-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    }
    /* third level */
    #nav ul ul li:not( :first-child ):hover ul, #nav ul ul li:not( :first-child ):focus-within ul{
    left:300px;
    top:-10px;
    }
    #nav ul ul li:hover ul, #nav ul ul li:focus-within ul{
    left:300px;
    top:-10px;
    }
        .edge ul li:not( :first-child ):hover ul{
left:-320px !important;
}
.edge ul li:hover ul{
left:-320px !important;
}
    #nav li:hover>ul, #nav li:focus-within>ul{
    display: block;
    opacity:1;
    left: 0;
    right: 0;
    }
    #nav ul::after, #nav ul::before {
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    height: 9px;
    width: 9px;
    }

   
    #nav>ul>li>ul>li>ul::before {
    height: 100%;
    width: 10px;
    background: transparent;
    z-index: 99;
    top: 0;
    left: -10px;
    }	
    
        #nav>ul>li.edge>ul>li>ul::after {
left: 296px;
}
#nav>ul>li.edge>ul>li>ul::before {
left: 300px;
}	

#nav li:not( :first-child ):hover>ul, #nav li:not( :first-child ):focus-within>ul{
left: -1px;
}
#nav li ul a{
font-size: 1em;
padding: 10px; 
border-bottom: 1px solid #d7dada;
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.selected a, #nav li ul li a:focus-within, #nav li ul:not( :focus-within ) li.selected a{
color: #7413dc;
background-color:#f8f8f8;
}

.menucontrolouter, .menucontrol, .searchnav{
display:none;
}
}
@media screen and (max-width: 600px) {

/* Navigation */

.menucontrolouter{
background-color:#ffffff;
}
.menucontrol{
max-width:1100px;
padding:10px 0px 10px 0px;
margin-left:auto;
margin-right:auto;
text-align:right;
}
.menucontrol:hover, .menucontrol:focus{
color:#7413dc;
}

#navbar{
 background: #ffffff;
 width: 300px;
 height: 100vh;
 position: fixed;
 top: 0;
 left: -300px;
 overflow-y: auto;
 transition: 0.6s ease;
 transition-property: left;
font-size:1.2em;
font-weight:700;
z-index:99999;
border-right:1px solid #d7dada;
}
#navbar header{
text-align:right;
padding:0px 20px 0px 20px;
}

#navbar::-webkit-scrollbar {
  width: 0px;
}

#navbar ul{
	margin:0px;
	padding:0px;
}
#nav>ul{
margin-bottom:50px;
}
#nav li{
position: relative;
list-style:none;
}
#nav li a{
color:#333333;
text-decoration:none;
}
#nav ul li ul{
display:none;
background-color:#ffffff;
}
#nav ul li ul li ul{
display:none;
}
#nav ul li ul li ul li:not(:last-child){
border-bottom:1px solid #f8f8f8;
}
#nav ul li a{
	padding:20px 0px 20px 20px;
	display:inline-block;

	width:80%;
}

#nav ul li a.selected{
color:#7413dc;
}
#nav ul li ul li a{
padding:10px 0px 10px 15px;
width:80%;
}

#nav ul li ul li ul li a{
padding:10px 20px 10px 15px;
width:100%;
}
#nav>ul>li ul{
	padding:0px 0px 0px 20px;
}


#nav ul li:hover, #nav ul li:focus, #nav ul li.selected{
background-color:#f8f8f8;
}
#nav ul li:hover>a, #nav ul li:focus>a, #nav ul li.selected>a{
color:#7413dc;
}
#navbar.active{
 left: 0;
}
.menu-btn{
 color: #333333;
font-size:2em;
 cursor: pointer;
}
.menuclose-btn{
color:#333333;
font-size:2em;
cursor:pointer;
}
#nav>ul>li{
border-bottom: 1px solid #f8f8f8;
}
#nav>ul>li>span{
border-left: 1px solid #f8f8f8;
padding:20px 0px 20px 0px;
display:inline-block;
width:20%;
text-align:center;

float:right;
}
#nav>ul>li>ul>li>span{
text-align:center;
width:20%;
float:right;
padding-top:10px;
}
#nav>ul>li span i{
color:#333333;
transition: 300ms linear all;

}
#nav>ul>li>span.rotate i, .navexpand.rotate i, #nav>ul>li>ul>li>span.rotate i{
transform: rotate(90deg); 
}

/* #nav>ul>li>ul>li:not(:last-child)::after{
content: '';
        position: absolute;
        margin: auto;
        top:-1;
        right: 0;
        bottom: 0;
        left: 0px;
        width: calc(100% - 40px);
        height: 1px;
        background-color: #d7dada;
}*/

#nav>ul>li>ul>li:hover::before, #nav>ul>li>ul>li:focus::before, #nav>ul>li>ul>li a.selected::before{
content: '';
background-color:#7413dc;

position:absolute;
height:calc(100% + 2px);
width:5px;
left:-5px;
top:-1px;

}

#nav>ul>li>ul>li:not(:last-child){
border-bottom:1px solid #d7dada;
}


#nav li.searchnav{
padding:20px 0px 20px 20px;
}
#nav li.searchnav .searchbox{
color:#333333;
width:calc(85% - 20px);font-size:1em;

}
#nav li.searchnav .searchbox::placeholder { 
  color: rgba(0,0,0,0.7);
  
  }
  

  
#nav li.searchnav #searchsubmit{
background:transparent;
color:#333333;
font-size:1.2em;
width:15%;
text-align:left;
}
#nav li.searchnav #searchsubmit:hover{
color:#7413dc;
}
.searchmain{
display:none;
}
}
@media only screen and ( max-width: 1100px )
        {
.menu-btn{
padding-left:20px;
padding-right:20px;
}
}
@media only screen and ( max-width: 600px )
        {
        .menu-btn{
        text-align:center;
        }
        }