/*--------------------------------------*/
.storemenuimagebox {
	height: 170px;
	margin: 0 -15px;
	position: relative;
}

	.storemenuimagebox > .img {
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		width: 100%;
		height: 100%;
	}

		.storemenuimagebox > .img::after {
			content: '';
			opacity: .53;
			width: 100%;
			height: 100%;
			display: block;
			background: linear-gradient(47deg,#3fedcc 0,#1a00cc87 100%);
		}

	.storemenuimagebox > .title {
		position: absolute;
		color: white;
		top: 10px;
		right: 20px;
	}

		.storemenuimagebox > .title > * {
			font-size: 2em;
		}

@media (max-width:992px) {
	.storemenuimagebox {
		height: 110px;
	}
}
/*--------------------------------------*/
.menuitemcontent {
	overflow: hidden;
	border-right: 1px solid #ddd;
	margin: 10px 0px;
	font-size: 1em;
}

	.menuitemcontent > .menuitem {
		border: 1px solid #ddd;
		border-right-color: transparent;
		border-top-color: transparent;
		padding: 0;
		transition: all 0.5s;
		margin-bottom: -1px;
		position: relative;
		transition: all 0.5s;
		display: flex;
		flex-direction: column;
	}
		/*edit button*/
		.menuitemcontent > .menuitem > .edit {
			display: inline-block;
			position: absolute;
			top: 0ex;
			right: 0px;
			color: #f55;
			padding: 0;
			margin: 0;
			line-height: 0;
			z-index: 1;
		}
		/*title*/
		.menuitemcontent > .menuitem > .title {
			height: 6ex;
			vertical-align: bottom;
			margin: 0px;
			/*display: flex;
			justify-content: center;
			flex-direction: initial;*/
			padding: 0 2px;
			text-align: center;
			color: #bf0000;
			font-size: 1.1em;
			transition: all 0.5s;
			margin-top: 20px;
		}

		.menuitemcontent > .menuitem > .imagecontainer {
			display: block;
			overflow: hidden;
			transition: all 0.5s;
			text-align: center;
		}

			.menuitemcontent > .menuitem > .imagecontainer > .img {
				background-repeat: no-repeat;
				background-position: top center;
				background-size: contain;
				transition: all 0.5s;
				width: 100%;
				height: auto;
				padding: 0 20px;
			}

		.menuitemcontent > .menuitem > .description {
			color: #555;
			font-size: 0.9em;
			overflow: hidden;
			text-overflow: ellipsis ellipsis;
			height: 8.9em;
			text-align: justify;
			padding: 0.5ex 1em;
			line-height: 1.42em;
			margin-top: 0.5em;
		}

		.menuitemcontent > .menuitem > .menuitemprice {
			color: orangered;
			font-size: 1.2em;
			text-align: center;
			/*line-height: 3rem;*/
			border-top: 1px solid lightgray;
			margin: 0 10px 5px 10px;
		}

			.menuitemcontent > .menuitem > .menuitemprice::after {
				font-size: 0.8em;
				content: " تومان";
			}

			.menuitemcontent > .menuitem > .menuitemprice[price="0"] {
				display: none;
			}

		.menuitemcontent > .menuitem > .menuitemdate {
			text-align: center;
			font-size: 0.9em;
			color: #777;
		}

			.menuitemcontent > .menuitem > .menuitemdate > .datefrom:not(:empty):before {
				content: "فرصت ثبت نام از ";
			}

			.menuitemcontent > .menuitem > .menuitemdate > .datefrom:not(:empty) + .dateto:not(:empty):before {
				content: " تا ";
			}

			.menuitemcontent > .menuitem > .menuitemdate > .datefrom:empty + .dateto:not(:empty):before {
				content: "فرصت ثبت نام تا ";
			}

		.menuitemcontent > .menuitem > .menuitemcnt[maxiszero="yes"] {
			display: none;
		}

		.menuitemcontent > .menuitem > .menuitemcnt {
			text-align: center;
			color: #5aa;
			font-size: 1.5em;
		}

			.menuitemcontent > .menuitem > .menuitemcnt > .maxcnt:not(:empty):before {
				content: "تعداد ";
				font-size: 0.8em;
			}

			.menuitemcontent > .menuitem > .menuitemcnt > .maxcnt:not(:empty):after {
				content: " نفر";
				font-size: 0.8em;
			}

			.menuitemcontent > .menuitem > .menuitemcnt > .remaincnt {
				font-size: 0.7em;
			}

				.menuitemcontent > .menuitem > .menuitemcnt > .remaincnt:not(:empty):before {
					/*content: " (";*/
					content: " ظرفیت: ";
				}

				.menuitemcontent > .menuitem > .menuitemcnt > .remaincnt:not(:empty):after {
					/*content: " نفر باقیمانده)";*/
					content: " نفر باقیمانده";
				}

			.menuitemcontent > .menuitem > .menuitemcnt[maxiszero="no"] > .remaincnt[remain="0"] {
				color: transparent;
			}

				/*.menuitemcontent > .menuitem > .menuitemcnt[maxiszero="no"] > .remaincnt[remain="0"]:after {
					color: red;
					content: "تکمیل ظرفیت";
				}*/

		.menuitemcontent > .menuitem > .menuitemempty {
			flex-grow: 1;
		}

		.menuitemcontent > .menuitem > .menuitemproduce {
			background-color: #30a0bf;
			color: white;
			display: block;
			width: 100%;
			text-align: center;
			line-height: 2.5rem;
			border-radius: 0 0 15px 15px;
		}

			.menuitemcontent > .menuitem > .menuitemproduce::after {
				content: "تهیه درس";
			}

			.menuitemcontent > .menuitem > .menuitemproduce:hover {
				color: white;
			}

			.menuitemcontent > .menuitem > .menuitemproduce.menuitemproduce_دوره_حضوری::after {
				content: "شرکت در کلاس";
			}

		.menuitemcontent > .menuitem.finished > .menuitemproduce::after {
			content: "پایان ثبت نام";
		}

		.menuitemcontent > .menuitem > .menuitemproduce[price="0"] {
			display: none;
		}

		.menuitemcontent > .menuitem.finished:before {
			position: absolute;
			background-color: #333;
			opacity: 0.4;
			height: 100%;
			width: 100%;
			display: inline-block;
			content: " ";
			z-index: 1;
		}

		.menuitemcontent > .menuitem.finished:after {
			position: absolute;
			content: "پایان ثبت نام";
			font-size: 1.5rem;
			border: 3px solid white;
			padding: 0px 5px;
			border-radius: 5px;
			color: white;
			transform: rotate(-20deg) translate(-50%, -50%);
			left: 50%;
			top: 50%;
			z-index: 2;
		}
/*-----------hover------------*/
@media (pointer: fine) {
	.menuitemcontent:hover > .menuitem {
		opacity: 0.5;
	}

		.menuitemcontent:hover > .menuitem:hover {
			opacity: 1;
		}

	.menuitemcontent > .menuitem:hover > .title {
		text-shadow: 0 0 12px #bf0000ef;
	}

	.menuitemcontent > .menuitem:hover > .imagecontainer > .img {
		transform: scale(1.1);
	}
}

@media (-moz-touch-enabled) {
	.menuitemcontent:hover > .menuitem {
		opacity: 1;
	}

	.menuitemcontent > .menuitem:hover > .imagecontainer > .img {
		transform: none;
	}
}

/*----------for touch events----------*/
.menuitem_hover > .imagecontainer > .img {
	transform: scale(1.1);
}





.searchResult {
	background-color: #ee5f5f;
	color: white;
	padding: 3px 1em;
}