#menu-holder {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	display: none;
	padding-bottom: 0px;

	.menu-overlay {
		height: 100%;
	}
}

#menus {
    width: 100%;
    height: 100vh;
    float: left;
    background-image: url(../images/menus-background.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.4);
    background-blend-mode: multiply;
    color: white;
    z-index: 1;
    position: relative;
    min-height: 800px;

	.menu-container {
		width: auto;
		height: auto;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		font-family: "neutraface-bold";
		padding-bottom: 5px;
		border-bottom: 1px solid #73abdd;

		@media (max-width: $tabletBreakpoint) {  
			border-bottom: none;
		}

		h1 {
			text-align: center;
			font-size: 44px;
			letter-spacing: 3px;
			text-transform: uppercase;

			@media (max-width: $tabletBreakpoint) {  
			    border-bottom: 2px solid #597b9a;
			}
		}

		.menu-buttons {
			width: 100px;
			height: 30px;
			float: left;
			font-family: "neutraface-text";
			letter-spacing: 1px;
			text-transform: uppercase;
			line-height: 33px;
			cursor: pointer;

			&:hover {
				font-family: "neutraface-bold";
			}


			@media (max-width: $tabletBreakpoint) { 
				width: 100%;
				text-align: center;
				height: 50px;
				font-size: 20px;
			}
		}

		.center-text {
			text-align: center;
		}

		.right-text {
			text-align: right;

			@media (max-width: $tabletBreakpoint) { 
				text-align: center;
			}
		}
	}

	.logo-menu {
	    position: absolute;
	    bottom: 0%;
	    width: auto;
	    height: auto;
	    top: inherit;
	    transform: translate(-50%, 50%);
	    left: 50%;
	    z-index: 1;

		img {
			width: 350px;
		}
	}
}


.mobile-image {
    width: 60%;
    height: 18%;
    position: absolute;
    left: 40%;
    background-image: url(../images/slide1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
    transform: translate(0%, 17%);

    @media (min-width: $tabletBreakpoint) { 
    	display: none;
    }
}

#menu-info {
	width: 100%;
	height: auto;
	background: #000000;
	top: 100px;
    padding-bottom: 70px;
	padding-top: 10%;
	z-index: 9999;
	float: left;

	.menu-starters {
	    width: 1000px;
	    height: 500px;
	    margin: 0 auto;

	    @media (max-width: $tabletBreakpoint) { 
	        width: 100%;
    		height: 350px;
    		margin: 15% auto;
		}
	}

	.slider-menu {
		height: 500px;
		width: 40%;
		background: black;
		float: left;

		@media (max-width: $tabletBreakpoint) { 
	        display: none;
		}


		img {
			height: 100%;
			display: block;
			width: 100%;
			margin: 3px 2px;
			float: left;
			position: relative;
		}

		.image-slide {
			width: 100%;
			height: 100%;
		}
	}

	.slider-menu-plates {
		height: 500px;
		width: 40%;
		background: black;
		float: left;
		img {
			height: 100%;
			display: block;
			width: 100%;
			margin: 3px 2px;
			float: left;
			position: relative;
		}

		.image-slide {
			width: 100%;
			height: 100%;
		}
	}


	.slider-buttons {
        width: 45px;
	    height: 45px;
	    background: #fff;
	    position: absolute;
	    z-index: 2;
	    margin-left: -22px;
	    margin-top: 200px;

	    @media (max-width: $tabletBreakpoint) { 
	    	display: none;
		}
	}

	.menu-list {
		height: auto;
		width: 50%;
		float: right;
		font-family: "neutraface-bold";
		color: #fff;

		@media (max-width: $tabletBreakpoint) { 
            float: left;
		    width: 83%;
		    position: absolute;
		    z-index: 1;
		    left: 17%;
		}


		.list-starter {
			width: 100%;
			height: auto;
			font-size: 22px;
			text-transform: uppercase;
			letter-spacing: 3px;
			line-height: 50px;
			border-bottom: 1px solid #73abdd;

			@media (max-width: $tabletBreakpoint) { 
				.plats-title {
				    padding-right: 23px;
				}
			}
		}

		.list-starter-foods {
			width: 100%;
			height: auto;
			text-transform: uppercase;

			.food {
				letter-spacing: 2px;
				font-size: 17px;
			}

			.food-elements {
				line-height: 15px;
				font-family: "neutraface-text";
				margin-top: -7px;
				font-size: 14px;
			}

			.food-price {
				float: right;
				width: auto;
				height: auto;
				margin-top: -30px;
				font-family: "neutraface-text";
				font-size: 22px;
				letter-spacing: 3px;

				@media (max-width: $tabletBreakpoint) { 
				    float: left;
				    margin-top: -3px;
				    font-size: 18px;
				    color: #73abdd;
				}
			}
		}

		.foods-margin-top {
			margin-top: 40px;
		}
	}

	.menu-plates {
		// display: none;
		.starters-list {
			float: left !important;
		}

		.slider-menu {
			float: right !important;
		}

		.plates-buttons {
		    width: 45px;
	    	height: 45px;
		    z-index: 3;
		    background: #fff;
		    float: right;
		    margin-top: 20%;
		    margin-left: -28px;
		    position: relative;

		    @media (max-width: $tabletBreakpoint) { 
		    	display: none;
		    }
		}
	}

	.slider-plates {
		height: 500px;
		width: 40%;
		background: black;
		float: right;
		img {
			height: 100%;
			display: block;
			width: 100%;
			margin: 3px 2px;
			float: left;
			position: relative;
		}

		.image-slide {
			width: 100%;
			height: 100%;
		}

		@media (max-width: $tabletBreakpoint) { 
	    	display: none;
	    }
	}
}

#plates {
	@media (max-width: $tabletBreakpoint) { 
		margin: 30% auto !important;
		text-align: right;
	}
}

.plates-price {
	@media (max-width: $tabletBreakpoint) { 
		float: right !important;
	}
}

.food-plates {
	@media (max-width: $tabletBreakpoint) { 
		width: 95% !important;
	}
}

.plates-image {
	@media (max-width: $tabletBreakpoint) { 
		left: 0% !important;
	}
}

.slider-desserts {
	height: 500px;
	width: 40%;
	background: black;
	float: left;
	img {
		height: 100%;
		display: block;
		width: 100%;
		margin: 3px 2px;
		float: left;
		position: relative;
	}

	.image-slide {
		width: 100%;
		height: 100%;
	}

	@media (max-width: $tabletBreakpoint) { 
    	display: none !important;
    }
}