/* GLOBAL STYLES */

* {
 }
 
 body {
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
 }

a:not(.img) {
   color: rgb(89, 35, 189);
   font-weight: 300;
   letter-spacing: 2px;
   text-decoration: none;
   background: rgb(3, 3, 3); /* Should be black  */
   padding: 0px 5px;
   display: inline-block;
   width: 100%;
   text-align: center;
   line-height: 80px;
}

#m2{
   background: none;
}

a  {
   height: 80px;
   line-height: 80px;
   background: rgb(3, 3, 3); /* Should be black  */
   width: 100%;
   padding: 0px 0px;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
}


.main {
   max-width: 100%;
   margin: 0 auto;
   padding: 0 3em 1.5em;
}

.navigation ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   behavior: url("../htc/cssmenu.htc");
}

.navigation ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    behavior: url("../htc/cssmenu.htc");
 }

a:hover {
   background: rgba(3, 3, 3, 0.75);
}

.navigation a:hover
{
    color: rgb(3, 3, 3);  /* Should be black  */
}
/* .navigation a.arrow
{
    background: url(../images/arrow.gif) no-repeat right center;
}   */
.navigation ul a.arrow
{
    background: black;  /* url(../images/right.gif) no-repeat 97% center;  */

}

.navigation li {
   padding: 0;
   /*margin: 0;
   display: block; TODO: I am testing them if they can be removed. If can, remove them.*/
   float: left;
   height: 80px;
   line-height: 80px;
   position: relative;
   flex: 3;    
}
.navigation li:hover, .navigation li.onhover
{
    background: rgb(22, 22, 22); /* url(../images/bg.gif) repeat-x 0 -48px;*/
}

.navigation .user {
   flex: 1;
}

@media all and (max-width: 1000px) {
   .navigation ul {
      flex-wrap: wrap;
   }
   
   .navigation li {
      flex: 1 1 50%;
   }

   .navigation .user {
      flex: 1 1 33.33%;
   }
}

@media all and (max-width: 480px) {
   .navigation li {
      flex-basis: 100%;
   }

   .navigation .user {
      flex-basis: 50%;
   }
}

/*######sub level###########*/
        
ul.navigation ul
{
    width: auto;
    position: absolute;
    left: -9999px;
    background: rgb(3, 3, 3);    
    text-align: left;
    list-style: none; margin: 0;  
    /*Following 1px(padding-right) will determine how much it is overlapped by the sub-sub-menu */
    padding: 10px 0;
    box-sizing:content-box;
}

.navigation li li
{
    float: none;
    white-space:nowrap;
}
.navigation li li:hover, .navigation li li.onhover
{
    background:#070707;
}
.navigation ul a    /* Menu Text  */
{
    padding: 0 0px;
    font-size: 1em;
    font-weight: normal;
    color: #ffffff;   /* Main menu text Leave it white */
    text-align: center;
    vertical-align: middle;
}

.navigation ul a:hover
{
    color: red;
}

.navigation li:hover ul, .navigation li.onhover ul
{
    left: -1px;/*Use this property to change offset of the dropdown*/
    top: auto;
    display:block;
}

.navigation li:hover .dropToLeft, .navigation li.onhover .dropToLeft
{
    left: auto;
    right: -1px;
    top: auto;
}
.navigation ul ul
{
    
}

.navigation li:hover ul ul, .navigation li:hover ul ul ul, .navigation li:hover ul ul ul ul,
.navigation li.onhover ul ul, .navigation li.onhover ul ul ul, .navigation li.onhover ul ul ul ul
{
    left: -9999px;
    top:0;
}

.navigation li li:hover ul, .navigation li li li:hover ul, .navigation li li li li:hover ul,
.navigation li li.onhover ul, .navigation li li li.onhover ul, .navigation li li li li.onhover ul
{
    left: 260px;
}