@charset "UTF-8";

.hamburger,
.nav {
  display: none;
}

@media (max-width: 450px) {

	.hamburger {
		position:absolute;
		z-index: 2000;
		right:0;
		width: 32px;
		height: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		margin-right:6px;
	}

	.hamburger span {
		display: block;
		height: 3px;
		background:#293C02;
		border-radius: 3px;
		transition: 0.2s;
		width: 100%;       
	}

	@media (hover: none) and (pointer: coarse) {
	  .hamburger:active span {
		transform: scale(0.9);
		background:#547909; 
	  }
	}
	

		.hamburger.active span:nth-child(1) {
		  transform: translateY(8.5px) rotate(45deg);
		}

		.hamburger.active span:nth-child(2) {
		  opacity: 0;
		}

		.hamburger.active span:nth-child(3) {
		  transform: translateY(-8.5px) rotate(-45deg);
		}

	
	
	.nav {
		display: block;
		position: absolute;
		top: 100%;
		right: 0;
		margin-right:2px;
		margin-top:2px;
		width: 100px;
		background: var(--themeColor01);
		transform: translateY(-10px);
		opacity: 0;
		pointer-events: none;
		transition: 0.3s ease;
		 border-radius: 9px; 
		overflow: hidden; 
	}


	.nav.active {
		transform: translateY(0);
		opacity: 0.88;
		pointer-events: auto;
	}


	.nav ul {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}

	.nav li {
	}

	.nav a {
		font-size:0.7rem;
		display: block ;
		padding: 14px;
		text-decoration: none;
		
	}

	@media (hover: none) and (pointer: coarse) {
	  .nav a:active {
		background:  var(--themeColor02);
		transform: scale(0.97);
	  }
	}
}