/*animated navigation button for small screens---*/
.NavToggle
{
	display:block;
	position:absolute;
	min-width:40px;
	width:50px;
	height:33px;
	cursor:pointer;
	right:20px;
	top:20px;
}

.bars
{
	display:block;
	position:absolute;
	width: 50px;
	height: 7px;
	left:0;
	transition: 0.4s;	
	background-color:rgb(220,220,220);
}

#bar1
{
	top:0;
}

#bar2
{
  top:13px;
}

#bar3
{
  top:26px;
}

.open #bar1
{
  -webkit-transform:  translate(0,16px) rotate(-45deg);
  transform:  translate(0,13px) rotate(-45deg);
}

.open #bar2 {opacity: 0;}

.open #bar3 
{
  /*-webkit-transform: rotate(45deg) translate(-8px, -8px);*/
  transform:translate(0, -13px) rotate(45deg) ;
}

/********************menu items***********************/
nav
{
  width:100%;
	display:none;
	flex-wrap:nowrap;
 user-select: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
 -ms-user-select: none;
}
nav.open
{
	display:flex !important;
}


.NavItem, .NavTitle /*the item that goes inside any nav*/
{}

.NavItem > a /* links inside menu elemetns*/
{
	text-decoration:none;
}

.NavItemActive /*the item that goes inside any nav*/
{}

.NavItemActive > a /* links inside menu elemetns*/
{}

.NavTitle
{
	cursor:pointer;
}

.titleName
{
	display:inline-block;
	width:90%;
}

.titleArrow
{
	display:inline-block;
	width:10%;	
	text-align:center;
	transition-property:transform;
	transition-duration:0.3s;
}

.open>.titleArrow
{
	transform:rotateX(180deg);
}


/*=========================responsive change at 50 rems===========================*/
/* changes the main menu to multiple buttons*/

@media only screen and (min-width:50rem)
{
	.NavToggle
{
	display:none;
}


}