/*
 * Menu Section
 */

.menu-section {
	position: fixed;
	z-index: 9;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	pointer-events: none;
	/*background-image: linear-gradient( to bottom, rgba(242, 243, 235, 0) 0%, rgba(242, 243, 235, .75) 50%);*/
}

.menu-section .columns {
	text-align: center;
}

.menu-section .menu {
	display: inline-block;
	pointer-events: all;
	color: var(--light);
	background-color: rgba(24, 186, 137, 0.95);
	box-shadow: 0 0 0 2px rgba(35, 31, 32, 1);
}

.menu-section .menu * {
	pointer-events: none;
}

@media( min-width: 640px )  {
	.menu-section {
		position: absolute;
		z-index: 9;
		bottom: auto;
		top: 30px;
		/*background-image: none;*/
	}

	.menu-section .menu {
		color: var(--dark);
		background-color: transparent;
		background-image: none;
		box-shadow: none;
	}

	.menu-section .menu:hover {
		background-position: 100% 50%;
	}

	
	.menu-section.fixed {
		position: fixed;
	    transform: translateY(-450px);
	}

	.menu-section.fixed {
		top: 0;
		position: fixed;
		animation: dropIn forwards 1s cubic-bezier(0.54, 1.81, 0.57, 0.69);
	}


	@keyframes dropIn {
		0% {
			transform: translateY(-450px);
		}
		100% {
			transform: translateY(0);
		}
	}

	.menu-section.fixed .menu {
		color: var(--light);
		background-color: rgba(24, 186, 137, 0.95);
		box-shadow: 0 0 0 2px rgba(35, 31, 32, 1);
	}

	.menu-section .columns {
		text-align: right;
	}

}
@media( min-width: 1040px ) {
	.menu-section {
		top: 29px;
	}
}
@media( min-width: 1480px ) {
	.menu-section {
		top: 29px;
	}

	.menu-section.fixed .menu {
		box-shadow: 0 0 0 3px rgba(35, 31, 32, 1);
	}
}