.menu-cont {
	width: 100%;
	height: 100%;
	max-width: 900px;
	max-height: 600px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
}
	.menu-item {
		width: 33%;
		height: 50%;
		display: block;
		float: left;
		box-shadow: none;
		overflow: hidden;
		text-decoration: none;
		text-shadow: 1px 1px 4px black;
		text-transform: uppercase;
		transition: all 300ms ease-in-out;
	}

		.menu-item:hover {
			box-shadow: inset 0px 0px 0px 20px black;
		}
		
		.menu-item:after {
		  content: "";
		  display: table;
		  clear: both;
		}
		
		.menu-item span {
			width: 100%;
			height: 100%;
			text-align: center;
			display: block;
			margin: 40% auto 0;
		}
	
	#menu-item-1 {
		background-color: #f6921e;
	}

	#menu-item-2 {
		background-color: #00adee;
	}

	#menu-item-3 {
		background-color: #f5eb33;
	}

	#menu-item-4 {
		background-color: #84c341;
	}

	#menu-item-5 {
		background-color: #652d90;
	}

	#menu-item-6 {
		background-color: #ec297b;
	}


/* PRUEBAS------------------------------------------------------------------- */

.md-modal {
	position: fixed;
	width: 100%;
	background-color: transparent;
	min-width: 320px;
	height: 100%;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	top: 0;
	left: 0;
}

.md-show {
	visibility: visible;
}

.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	transition: all .6s ease-in-out;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Modal Effect */
.md-effect-12 .md-content {
	width: 100%;
	height: 100%;
	transition: all .6s ease-in-out;
	opacity: 0;
}

.md-content,
.md-content a {
	color: white;
}

.md-show.md-effect-12 ~ .md-overlay {
	background: black;
} 

.md-show.md-effect-12 .md-content {
	opacity: 1;
}


/* 768 - 960 */

@media screen and (min-width: 768px) and (max-width: 960px) {
	.menu-cont {
		max-width: 700px;
		max-height: 466px;
		font-size: 25px;
		transform: translate(-50%, -45%);
	}
}


/* 481 - 767 */

@media screen and (min-width: 481px) and (max-width: 767px) {
	.menu-cont {
		max-width: 400px;
		max-height: 266px;
		font-size: 20px;
		transform: translate(-50%, -40%);
	}

			.menu-item:hover {
				box-shadow: inset 0px 0px 0px 10px black;
			}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	.menu-cont {
		max-width: 233px;
		max-height: 350px;
		font-size: 20px;
		transform: translate(-50%, -45%);
	}
	
		.menu-item {
			width: 50%;
			height: 33%;
		}
		
			.menu-item:hover {
				box-shadow: inset 0px 0px 0px 5px black;
			}
}


/* <= 319 */

@media screen and (max-width: 319px) {
	.md-content {
		min-width: 319px;
	}
	
	.menu-cont {
		max-width: 233px;
		max-height: 350px;
		font-size: 20px;
		transform: translate(-50%, -45%);
	}
	
		.menu-item {
			width: 50%;
			height: 33%;
		}
		
			.menu-item:hover {
				box-shadow: inset 0px 0px 0px 5px black;
			}
}


/* <= 374 height */

@media screen and (max-height: 374px) {
	.menu-cont {
		max-width: 270px;
		max-height: 180px;
		font-size: 14px;
		transform: translate(-50%, -35%);
	}
	
			.menu-item:hover {
				box-shadow: inset 0px 0px 0px 5px black;
			}

}