@charset "utf-8";
/* CSS Document */
/* navigasi */
	.menu {
		display:grid;
		grid-template-columns:70px 2fr ;
		align-items:center;
		margin-left:15px; margin-right:15px;
		}
	.menu .brand{ font-size: 1.3em;
	color:#333;}
			.menu ul { list-style:none;
			 display:grid;
			 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			 gap:5px;
				}
				.menu .brand h1{ font-size:1.1em; color:#fff; font-weight:700;}
				.menu a{
					display:block;
					background-color:#000;
					color:white;
					text-decoration:none;
					text-align:center;
					padding:5px;
					text-transform:uppercase;
					font-size:0.9em;}
										/* humberger menu */

					.menu-toggle {
						display:none;
						flex-direction:column;
						justify-content: space-between;
						height: 20px;
						position:relative;
						z-index: 999;
						}
						.menu-toggle span {
							display:block;
							width: 28px;
							height: 2px;
							background: #fff;
							border-radius: 3px;
							transition: all 0.5s;
							}
					.menu-toggle input {
						display:block;
						position:absolute;
						 background-color: black;
						 width: 40px;
						 height: 28px;
						 left:-5px;
						 top:-5px;
						 cursor:pointer;
						 opacity: 0;
						 z-index: 2;
						 }
						 /* animation mrnu hamburger */
						 .menu-toggle span:nth-child(2){
							 transform-origin: 0 0;
							 width:20px;
							 }
							 .menu-toggle span:nth-child(3){
							 width:24px;
							 }
							 .menu-toggle span:nth-child(4){
								 transform-origin: 0 100;
								 }
								 .menu-toggle input:checked ~ span:nth-child(2){
									 background-color:#0091df;
									 width:28px;
									 transform: rotate(45deg) translate(8px, 0px);
									 }
									 .menu-toggle input:checked ~ span:nth-child(4){
									 background-color:#0091df;
									 transform: rotate(-45deg) translate(2px, 0);
									 }
									 .menu-toggle input:checked ~ span:nth-child(3){
									  opacity: 0;
									  transform: scale(0);
									
									 }
									 
									 	@media (max-width: 768px){
						
											

						.menu { order: -1;
						justify-items:star;
						background-color:#0091df;  padding:20px;
					 box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
														 }	
						
						.menu-toggle {
							display:flex;
							}
							.menu ul {
								display: flex;
								position:absolute;
								right: 0;
								height: 100vh;
								top: 0;
								 background-color:#624963;
								 width:100%;
								 flex-direction:column;
								 justify-content: space-evenly;
								 align-items:center;
								 z-index: 1;
								 transform: translateX(-100%);
								 opacity: 0;
								 transition: all 1s;
								 }
								 
								 .menu a{
					background-color:#624963;
					color:white;
					font-size:0.9em;}
								 
								 .menu ul.slide {
									opacity: 1;
									transform: translateX(0); 
									 }
						
						}