/**** header ****/

.navbar {
  background: #000;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 1s ease;
}
.logo {
  z-index: 4;
  margin: 0;
  padding: 0 15px;
}
.logo img {
  height: 70px;
  transition: all 0.5s ease-in-out;
}
.tools {
  z-index: 2;
}

.mainNav {
  text-align: center;
  text-transform: uppercase;
  z-index:3;
  transition: all 1s ease;
}
.mainNav ul{
  margin: 0;
  padding: 0;
}
.mainNav li {
  display: inline-block;
  margin: 0 20px;
  font-weight: 700;
  list-style-type:none;
}
.mainNav li a {
  color: #ffffff;
  text-decoration:none;
  transition: all .2s ease;
}
.burgerMenu{
  display:none;
  z-index:4;
}
.burgerMenu svg{
  fill: #fff;
  font-size: 26px;
  cursor:pointer;
}
.burgerMenu svg.close{
	display:none;
}
.burgerMenu svg.open{
	display:block;
}
.hasOpenMenu .burgerMenu svg.close{
	display:block;
}
.hasOpenMenu .burgerMenu svg.open{
	display:none;
}


/**** footer ****/



























/**** responsive ****/

@media screen and (max-width: 800px){
	.mainNav{
		background-color: #000;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 100vh!important;
		flex: 0 0 100%!important;
		max-width: 100%!important;
		transition: all .7s ease;
		transform: translate(-1000px,0);
		position: absolute!important;
	}
	.mainNav ul{
		width: 0;
		display: none;
		margin-top: 0;
		transition: all .7s ease;
	}
	.hasOpenMenu .mainNav{		
		transform: translate(0, 0);		
	}
	.hasOpenMenu .mainNav ul{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 150px;
	}
	.hasOpenMenu .mainNav ul li{
		text-align: left;
		margin: 10px 20px;
	}
	.burgerMenu{
		display:block;
	}
}