/* ********************************************************************************************
	Navigation
*********************************************************************************************** */


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

      /* Default Navigation ***********/
      .nav-container{}
      .nav-container #nav { float:left;text-transform:capitalize;height: 60px;}
      #nav ul { top: 46px; left:-10000px;  border-top: 3px solid #e74c3c;}
      .nav-container #nav a {  }
      .nav-container #nav li{float:left;text-align:left;padding-bottom: 10px;}
      .nav-container #nav li:hover{}
      .nav-container #nav li, .nav-container #nav li:hover{position: relative;}
      .nav-container #nav a{display:block; color: #FFF;font-weight: 500;font-size: 14px;line-height: 60px;text-transform: uppercase;position: relative;z-index: 1;padding-left: 39px;padding-right: 39px;}
      .nav-container #nav a .drop-active{left:0;right: 0;}
      .nav-container #nav li a.over{background:#e74c3c;color:#FFF;}
      .nav-container #nav a:hover{background:#e74c3c;color:#FFF;}
      .nav-container #nav li.active a.level-top{background:#e74c3c;color:#FFF;}
      
		.nav-container #nav > li.parent  > a:before{
			content: " ";
			display: block;
			border-bottom: 7px solid #e74c3c;
			border-left: 7px solid transparent;
			border-right: 7px solid transparent;
			border-top: none;
			position: absolute;
			left: 0px;
			bottom: -10px;
			right: 0;
			width: 0;
			height: 0;
			margin: 0 auto;
			display: none;	 
		}
		
		.nav-container #nav > li.parent:hover > a:before{
			z-index: 1000;
			display: block;
		}      
      /* 2nd Level */
      .nav-container #nav ul.level0 { position:absolute; z-index: 1501; padding: 20px 32px 15px 32px; }
      .nav-container #nav ul { position:absolute; width:200px; top:70px; left:-10000px; z-index: 10000; }
      .nav-container #nav div ul { position:static; width:auto;  }
      
      .nav-container #nav li ul li{float: none;padding-bottom: 0px;}
      .nav-container #nav li ul li a{text-transform:inherit;line-height:normal;display:block;color: #34495e;padding: 9px 20px;}
      .nav-container #nav li ul li a .drop-active{display: none;}
      .nav-container #nav li ul li a span{padding: 0px !important;}
      .nav-container #nav li ul li a span.errow{font-family: 'FontAwesome';}
      .nav-container #nav li ul li a.over{color: #e74c3c;background-color: #ECF0F1;}
      .nav-container #nav li ul li a:hover{color: #e74c3c;background-color: #ECF0F1;}
      .nav-container #nav li ul li ,.nav-container #nav li ul li:hover{margin:0px;}
      .nav-container #nav li ul li:last-child a{}
      .nav-container #nav li ul li.last a{}
      .nav-container #nav li ul li a span{}
      
      /*Category Label*/
      .nav-container #nav li ul li a span.category-label{top: 6px;padding: 0 6px !important;margin-left: 5px;right: 10px;}
      .nav-container #nav li ul li a span.category-label:before{display: none;}
      
      /*Fixed Header Label*/
      .nav-maincontainer.fixed div.menu a span.category-label,
      .nav-maincontainer.fixed .nav-container #nav a span.category-label{display: none;}
      
      /* 3rd+ Level */
      .nav-container #nav ul ul,
      .nav-container #nav ul div { top:0px; }
      .nav-container #nav ul span,
      .nav-container #nav ul li.last li span {}
      .nav-container #nav li ul li ul.shown-sub {left:200px;top: 0px;border-top: none;border-left: 3px solid #e74c3c;}
		.nav-container #nav li ul li ul:before{
		    content: " ";
		    display: block;
		    border-bottom: 7px solid transparent;
		    border-right: 7px solid #e74c3c;
		    border-top: 7px solid transparent;
		    position: absolute;
		    left: -10px;
		    top: 12px;
		    width: 0;
		    height: 0;
		    margin: 0 auto;
		}
      .nav-container #nav li ul.shown-sub, #nav li .shown-sub {left:0px;padding:0px;}
      .nav-container #nav li ul.shown-sub {}

}



/* Responsive Menu ======================================================================== */

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

      .toggleMenu {
          height: 60px;
          font-weight: 500;
          line-height: 60px;
          font-size: 14px;
          color: #FFF;
          padding-left: 20px;
          padding-right: 20px;
          display: inherit !important;
          text-transform: uppercase;
      }
      .toggleMenu.active{
          background: #0F1111;
          color: #FFF;
      }
      .toggleMenu.active,
      .toggleMenu:hover{background: #e74c3c;text-decoration: none;color: #FFF;}
      .toggleMenu:before{font-family: FontAwesome;padding-right: 7px;}
      
      .container.radius .nav-maincontainer .toggleMenu{
          border-radius: 5px 5px 0px 0px;
      }    
      #nav {
          list-style: none;
          position: absolute;
          z-index: 999;
          margin-top: 0px;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -o-box-sizing: border-box;
          -ms-box-sizing: border-box;
          width: 100%;
          margin: 0 auto;
          background-color: #323a45;
          left: 0;
          right: 0;
      }
      #nav:before,
      #nav:after {
          content: " "; 
          display: table; 
      }
      #nav:after {
          clear: both;
      }
      #nav ul {
          list-style: none;
          width: 9em;
          background: none !important;
      }
      #nav a {
          padding: 15px 20px 15px 20px !important;
          margin-right: 0px;
          display: block;
          text-decoration: none;
          font-size: 14px;
          color: #FFF !important;
      }
      #nav a.over{background-color: transparent !important;}
      #nav a:hover{
          background-color: #e74c3c !important;
      }
      .nav-container #nav a span.category-label{
          top: inherit !important;
          margin-left: 5px;
          right: 60px;
      }
      .nav-container #nav a span.category-label:before{
          display: none;
      }
      #nav li {
          position: relative;
      }
      #nav li a{
		border-bottom-color: #48515C; /* IE8 */
          border-bottom: 1px solid rgba(160, 160, 160, 0.22);
      }
      #nav li a .drop-active{
          display: none;
      }
      #nav > li {
          float: left;
          list-style-type:none;
      }
      #nav > li > .parent {
          background-image: url("http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/images/downArrow.png");
          background-repeat: no-repeat;
          background-position: right;
      }
      #nav > li > a {
          display: block;
      }
      #nav > li > a:active{
      
      }
      #nav li  ul {
          position: absolute;
          left: -9999px;
      }
      #nav > li.hover > ul {
          left: 0;
      }
      #nav li li.hover ul {
          left: 100%;
          top: 0;
      }
      #nav li li a {
          display: block;
          position: relative;
          z-index:100;
          padding-left: 30px !important;
          text-decoration:none;
      }
      #nav li li li a {
          padding-left: 40px !important;
          z-index:200;
          
      }
      #nav .active {
          display: block;
         
      }
      #nav > li {
          float: none;
      }
      #nav > li > .parent {
          background-position: 95% 50%;
      }
      #nav > li > .parent {
        background-image: none; 
      }
      #nav li .more {
          position: absolute;
          right: 20px;
          top: 7px;
          display: block;
          cursor: pointer;
          font-family: FontAwesome;
          width: 34px;
          height: 34px;
          background-color: #2C343D;
          background-color: rgba(0,0,0, 0.10);
          background-position: center center;
          background-repeat: no-repeat;
          border-radius: 3px;
          color: #FFF;
          font-size: 1.2em;
          text-align: center;
          line-height: 34px;
          z-index: 101;
      }
      #nav li .more:hover{
          background-color:#34495e; /*IE*/
          background-color:rgba(0,0,0, 0.20);        
      }
      
      #nav ul {
          display: block;
          width: 100%;
      }
      #nav > li.hover > ul , #nav li li.hover ul {
           position: static;
      }

}