/*------------------------------------------------------------------



Project: Lucha Multipage Template

Author : The_Krishna

Primary use:  Restaurants Site Template

------------------------------------------------------------------/*



/********** Menu List Layout CSS  **********/



/*menu layout-2 css*/

.layout-2 .food_item_desc{

	text-align: left;

}



/*menu layout-3 css*/

.food_item_desc-3{

	padding: 110px 30px 30px 30px;

	border: 1px solid #616F7D;

	background-color: #ffffff;

    margin-top: -85px;

    position: relative;

	-webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.food_item_desc-3:after{

	position: absolute;

	content: "";

	height: 100%;

	width: 100%;

	background-color: transparent;

	z-index: -1;

	opacity: 0;

	top: 0;

	right: 0;

	visibility: hidden;

	border: 1px solid #616F7D;

	-webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.food_item_desc-3:hover{

    box-shadow: 10px 10px 30px rgba(29, 26, 37, 0.1);

}

.menu-list-item-3{

	margin-bottom: 30px;

	text-align: center;

	display: block;

}

.food-img-price-3{

	display: inline-block;

	z-index: 2;

	position: relative;

}

.food-img-price-3 img{

	border-radius: 0px 0px 20px 20px;

}

.food_item_desc-3:hover .food-name{

	color: #eb0500;

}

.food_item_desc-3:hover:after{

	right: -10px;

	top: -10px;

	visibility: visible;

	opacity: 1;

}



/*menu layout-4 css*/



.food-img-price-4 img{

	border-radius: 20px;

}

.menu-list-item-4{

	display: flex;

	align-items: center;

	position: relative;

	margin-bottom: 30px;

	-webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.food_item_desc-4{

	padding-left: 30px;

}

.food_item_desc-4 .f_price{

	padding: 20px 10px;

	display: inline-block;

	position: absolute;

	right: 0;

	top: 0;

	font-size: 20px;

	line-height: 20px;

	border-radius: 10px;

}

.food_item_desc-4 .food-name{

	font-weight: 400;

    line-height: 24px;

    margin-bottom: 30px;

    padding-right: 70px;

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.menu-list-item-4:hover .food-name{

	color: #eb0500;

}

.food-img-price-4 img{

    -webkit-transition: all 0.4s ease-in-out;

    -moz-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    -ms-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

}

.menu-list-item-4:hover .food-img-price-4 img{

    transform: rotateY(180deg);

}



/************** menu layout -5 *******************/

.menu-list-item-5{

	margin-bottom: 30px;

	display: block;



}

.food-img-price-5 img{

	border-radius: 20px;

	width: 100%;

	height: auto;

	-moz-transform: rotate(0) scale(1);

	-ms-transform: rotate(0) scale(1);

	-webkit-transform: rotate(0) scale(1);

	transform: rotate(0) scale(1);

	-moz-transition: .3s ease-in-out;

	-ms-transition: .3s ease-in-out;

	-webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}

.menu-list-item-5:hover .food-img-price-5 img{

	-moz-transform: rotate(10deg) scale(1.2);

	-ms-transform: rotate(10deg) scale(1.2);

	-webkit-transform: rotate(10deg) scale(1.2);

    transform: rotate(10deg) scale(1.2);

    -moz-transition: .3s ease-in-out;

	-ms-transition: .3s ease-in-out;

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}

.food_item_desc-5 .food-name{

	float: left;

	margin-top: 30px;

	-webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    -ms-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}

.menu-list-item-5:hover .food-name{

	color: #eb0500;

}

.food_item_desc-5 .about-food{

	clear: both;

}

.f_price-5{

	margin-top: 30px;

	float: right;

	font-weight: 700;

	font-size: 24px;

	line-height: 24px;

}

.food-img-price-5{

	border-radius: 20px;

	overflow: hidden;

}



/********** menu layout  **********/

.menu-list-item-6{

	text-align: center;

	position: relative;

	border-radius: 20px;

	overflow: hidden;

	margin-bottom: 30px;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	-ms-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

	display: block;

}

.food_item_desc-6{

	position: absolute;

	bottom: -10px;

	margin: 0 auto;

	text-align: center;

	left: 0;

	right: 0;

	color: #ffffff;

	z-index: 1;

	-webkit-transition: all 0.3s ease-in-out;

	-moz-transition: all 0.3s ease-in-out;

	-ms-transition: all 0.3s ease-in-out;

	transition: all 0.3s ease-in-out;

}

.menu-list-item-6:hover .food_item_desc-6{

	bottom: 30px;

}

.food_item_desc-6 .food-name{

	color: #ffffff;

}

.menu-list-item-6:hover .food-name{

	color: #eb0500;

}

.single-pagebtn{

	opacity: 0;

	visibility: hidden;

	-webkit-transition: all 0.5s ease-in-out;

	-moz-transition: all 0.5s ease-in-out;

	-ms-transition: all 0.5s ease-in-out;

	transition: all 0.5s ease-in-out;

}

.single-pagebtn svg path{

	fill: #ffffff;

}

.menu-list-item-6:hover .single-pagebtn{

	opacity: 1;

	visibility: visible;

}

.menu-list-item-6:hover .single-pagebtn svg path{

	fill: #eb0500;

}

.food-img-price-6 img{

	width: 100%;

	height: auto;

}

.food-img-price-6 img,

.food-img-price-6{

	border-radius: 20px;

}

.food-img-price-6{

	position: relative;

		-webkit-transition: all 0.5s ease-in-out;

	-moz-transition: all 0.5s ease-in-out;

	-ms-transition: all 0.5s ease-in-out;

	transition: all 0.5s ease-in-out;

}

.food-img-price-6:before{

	position: absolute;

	content: "";

	height: 100%;

	width: 100%;

	top: 0;

	border-radius: 20px;

	left: 0;



	background: linear-gradient(180deg, rgba(29, 26, 37, 0) 0%, rgba(29, 26, 37, 0.85) 100%);

}

.menu-list-item-6:hover .food-img-price-6:before{

	background: linear-gradient(180deg, rgba(29, 26, 37, 0) -100%, rgba(29, 26, 37, 0.85) 100%);

}



/*all menu layout responsive*/



@media(max-width: 1199px){

	.menu-list-item-4{

   		align-items: flex-start;

	}

	

	.food_item_desc-4{

		padding-left: 20px;

	}

	.food-img-price-4 img{

		width: 150px;

		height: 150px;

	}

}

@media(max-width: 1199px) and (min-width: 768px){

	.food_item_desc-4 .f_price{

	    position: initial;

	}

	.food_item_desc-4 .food-name{

		margin-bottom: 15px;

	    margin-top: 15px;

	    padding-right: 0;

	}

}



@media(max-width: 991px){

	.layout-2 .food_item_desc {

	    text-align: left;

	    padding-right: 30px;

	    padding-left: 110px;

	}

	.layout-2 .menu-list-item{

		padding-right: 0;

		padding-left: 30px;

	}

	.food-img-price {

	    right: auto;

	    left: 0;

	}

	.food_item_desc-3{

		padding-bottom: 15px;

		padding-right: 15px;

		padding-left: 15px;

	}

	.food-img-price-4 img{

		width: 120px;

		height: 120px;

	}

}

@media(max-width: 767px){

	.layout-2 .food_item_desc {

	    text-align: left;

	    padding-right: 20px;

	}

	.food_item_desc-3{

		margin-top: -60px;

		padding-top: 80px;

	}

	.food_item_desc-4 .f_price{

	    font-size: 18px;

    	line-height: 18px;

	    padding: 13px 7px;

	}

}

@media(max-width: 575px){

	.layout-2 .menu-list-item{

		padding-left: 15px;

	}

	.layout-2 .food_item_desc{

	    padding-left: 120px;

	}

	.food_item_desc-4 .f_price{

	    position: initial;

	}

	.food_item_desc-4 .food-name{

		margin-bottom: 15px;

	    margin-top: 15px;

	    padding-right: 0;

	}

	.food-img-price-4 img {

	    width: 100px;

	    height: 100px;

	}

	.food_item_desc-4 {

	    padding-left: 15px;

	}

	.f_price-5{

	    font-size: 20px;

    	line-height: 20px;

	}

}

@media(max-width: 420px){

	.layout-2 .food_item_desc {

	    text-align: left;

	    padding-right: 30px;

	    padding-left: 80px;

	}

}