/*===============



File Name: Daleth - Mobile-First Responsive Menu;

Version: 1.0;

Author: Tiberiu Alexander;

Author URL: http://codecanyon.net/user/tiberiualexander/portfolio ;

E-mail: tiberiu.alexander@gmail.com ;

Created: 17/10/2013;

=================*/



/* The main container */

.flexnav {	/* Some stylesheet reset 	margin: 0 0 0 5px; */

	padding: 0;

	list-style: none;

	line-height: 1;

	/* Layout */

	display: block;

	overflow: visible;

	width: 100%;

	height: 100%;

	/* Background & typography */	/*font-family: "Noto Sans", Helvetica, sans-serif;*/

}



.flexnav:after {

  content: "";

  display: table;

  clear: both; 

}



/* Displaying the main links on the same line */

.flexnav>li {

  float: left;

}



.flexnav li {

  display: block;

  position: relative;

  height: 100%;

  /*margin-top: 2px;*/

}



/* The items which contain submenus have right padding */

.flexnav>li.item-with-ul>a {

  padding-right: 8px;  /* vzdalenost sipky od leveho okraje menu */

  /*padding-left: 15px;*/

}



/* The links */

.flexnav li a {

  /* Layout */

  position: relative;

  display: block;

  z-index: 2;

  /*padding: 25px 10px;*/ /* vzdalenosti mezi menu*/

  padding: 12px;  height: 36px;  box-sizing: border-box;

  overflow: hidden;



	/* Typography */

	/* velikost fontu v menu */

  color: #ddd;

  text-decoration: none;

  /* Background & effects */}



/* The submenu links */

.flexnav ul li a {

  /*max-width: 130px;*/

  position: relative;

  display: block;

  min-width: 100px;

  font-weight: 400;

  font-size: 0.8em;

  padding: 8px 5px 8px 10px;

  left:0px;  /* posun submenu do leva */





  /*border-top:1px solid white;*/ 

}



/* The hover state of the links */

.flexnav li a:hover, .flexnav li.active>a {

  /*color: #2eb398;

  color: #f07f00;

  background: #f2f2f2;

  color: #012a3c;*/

}



/* The submenus */

.flexnav ul {

  position: absolute;

  top: auto;

  left: 0;

  display: block;

  padding: 0;

}



/* The first level submenus */

.flexnav>li>ul {

  /*left: auto;*/

  left: 0;

  right: 0;

}



/* Level 2+ submenus */

.flexnav ul ul {

  margin-left: 100%;

  top: 0; 

}



/*  */

.flexnav li ul li {

  position: relative;

  overflow: hidden; 

}

.flexnav li ul {display:none;}



.flexnav li ul.show li {

  overflow: visible; 

}



.flexnav li ul li a {

  background: #1e282c;

} 



.flexnav ul li ul li a {

  background: #253136; 

}



.flexnav ul li ul li ul li a {

  background: #2c3b40; 

}



.flexnav li ul.open {

  display: block;

  opacity: 1;

  visibility: visible;

  z-index: 1; 

}



.flexnav li ul.open li {

  overflow: visible;

  max-height: 100px; 

}



.flexnav li ul.open ul.open {

  margin-left: 100%;

  top: 0; 

}





/* The buttons which shows/hides the menu on click/tap */

.flexnav .touch-button {

  position: absolute;

  z-index: 999;

  top: 0;

  /*left: 36%;

  width: 50px;

  height: 30px;*/

  right:0;

  width:15px;

  height:6px;

  display: inline-block;

  background: rgba(255, 255, 255, .05);

  /*background: #1e282c;*/

  background: #171f22;

  text-align: center; 

}



.flexnav .touch-button:hover {

  cursor: pointer; 

}



/* The arrow which indicates a submenu */

.flexnav .touch-button::after {

  height: 0;

  width: 0;

  content: "";

  /*border: 6px solid transparent;

  border-top-color: #ddd;*/

  /*display: block;

  position: absolute;*/

  /*top: 22px;

  left: 40px; *//* posun sipky smerem k textu */

}



/* Changing the color of the arrow when the submenu is opened */

.flexnav>li:hover>.touch-button::after, .sm-screen .submenu-open::after {

  /*border-top-color: #2eb398;*/

  border-top-color: #c4cf01;

}



/* The button is smaller when it's contained by a submenu */

.flexnav ul li .touch-button {

  width: 39px;

  height: 39px;

  background: rgba(255, 255, 255, .05);

  border-top-color: transparent;

}



.flexnav ul li .touch-button::after {

  top: 15px;

}



.flexnav.lg-screen ul li .touch-button::after {

  border-left-color: #ddd;

  border-top-color: transparent;

  border-width: 5px;

}



.flexnav.lg-screen ul li:hover>.touch-button::after {

  /*border-left-color: #2eb398;*/

  border-left-color: #c4cf01;

}



.flexnav.sm-screen ul li .touch-button::after {

  border-width: 5px;

  left: 14px;

  top: 17px;

}



.flexnav.sm-screen ul li a

{

  padding:15px 10px !important;

}



/* The button which opens the menu on mobile devices */

.menu-button {

  position: relative;

  display: none;

  padding: 15px 0 15px 40px;

  background: #171f22;

  color: #ddd;

  cursor: pointer;

  /*font-family: "Noto Sans", Helvetica, sans-serif;*/

  line-height: 1; 

  font-weight: 700;

  font-size: 0.9em;

}

.menu-button.one-page {

  position: fixed;

  top: 0;

  right: 5%;

  padding-right: 45px; 

}



.menu-button .touch-button {

  background: transparent;

  position: absolute;

  z-index: 999;

  top: 0;

  right: 0;

  width: 50px;

  height: 50px;

  display: inline-block;

  text-align: center; 

}



.menu-button .touch-button .navicon {

  font-size: 16px;

  position: relative;

  top: 1em;

  color: #666; 

}



.menu-button::after {

  position: absolute;

  content: "";

  /*left: 18em;*/

  left:10px;

  top: 16px;

  height: 3px;

  width: 20px;

  border-top: 2px solid #ddd;

  border-bottom: 2px solid #ddd;

  z-index: 1;

}



.menu-button::before {

  position: absolute;

  content: "";

  /*left: 18em;*/

  left:10px;

  top: 23px;

  height: 3px;

  width: 20px;

  border-bottom: 2px solid #ddd;

  z-index: 1;

}



/* Styling for the mobile view */

@media(max-width:1023px){

	.flexnav{

		height: auto;

	}

}

@media all and (max-width: 530px) {

  .flexnav {

    overflow: hidden;

    max-height: 0px; 

    line-height: 0;

  }



  .flexnav.show {

    border-top: 1px solid #1e282c;

    overflow: visible;

    max-height: 2000px;

  }



  .flexnav li {

    float: none;

  }



  .flexnav li a

  {

    padding: 15px 10px;

  }



  .flexnav ul li a {

    width: auto;

  }



  .flexnav ul, .flexnav ul ul {

    position: relative;

    margin-left: 0;

    width: 100%;

  }



  .flexnav ul li a {

    /*padding-left: 37px;*/

    padding: 15px 5px 15px 37px;

  }



  .flexnav ul ul li a {

    padding-left: 49px;

  }



  .flexnav ul ul ul li a {

    padding-left: 61px;

  }



  .menu-button {

    display: block;

  }



  .flexnav .touch-button {

    left: 36%;

    width: 50px;

    height: 30px;

  }	

  .flexnav .touch-button::after {

    height: 0;

    width: 0;

    content: "";

    border: 6px solid transparent;

    border-top-color: #ddd;

    display: block;

    position: absolute;

    top: 25px;

    left: 0px; /* posun sipky smerem k textu */

  }



}