@keyframes navigationItemEnter {
	0% { transform: translate(0, -50px); opacity: 0 }
	100% { transform: translate(0, ); opacity: 1 }
}

.navigation {
	position: absolute;
	top: 0; left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 200px;
	z-index: 99999;
	text-align: justify;
  	text-justify: inter-word; }

.navigation .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	 }


.navigation .menu {
	display: flex;
/*	width: 35%;*/
	gap: 30px; }

	.navigation .menu.left { 
		animation: navigationItemEnter 0.5s both;
		animation-delay: 1.2s;
		justify-content: right; }
	.navigation .menu.right { 
		animation: navigationItemEnter 0.5s both;
		animation-delay: 1.4s;
		justify-content: left; }

	.navigation .menu .item {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		color: white;
		padding: 10px 15px; }
		.navigation .menu .item:before {
			content: "";
			position: absolute;
			bottom: 0; left: 0;
			width: 100%;
			border-bottom: 2px solid white;
			transform: scaleX(0);
			transform-origin: left;
			transition: 0.5s; }
			.navigation .menu .item:hover:before {
				transform: scaleX(1);
				transition: 0.3s; }

.navigation ul {
	list-style-type: none; }

.navigation .logo {
	animation: navigationItemEnter 0.5s both;
	animation-delay: 1s; }

.navigation .mobile-menu-btn {
	display: none; }
.mobile-menu {
	display: none; }

@media (max-width: 900px) {
	.navigation {
    	height: 150px; }

    .navigation .container {
    	padding: 0 30px; }

    .navigation .mobile-menu-btn {
    	display: block;
	    font-size: 20px; }

	.navigation .menu { display: none; }	
	
	.mobile-menu {
		position: absolute;
		top: 0; left: 0;
		display: flex;
		flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
		width: 100%;
        height: 100%;
		background-color: black;
		padding: 0 30px;
        z-index: 101;
		transform: translateY(-100vh); opacity: 0;
		transition:0.5s; }
	.mobile-menu ul {
		list-style-type: none;
		gap: 30px;
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 0; 
		margin: 0; }
	.mobile-menu.open {
		transform: translateY(0); opacity: 1;
		transition:0.5s; }
}