/*
Theme Author: Cortec AG
Author URL: https://cortecag.ch
Version: 1.0.0
*/

@font-face {
  	font-family: "Canela";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/Canela-Regular-Web.woff2") format("woff2"),
    	 url("https://gourmetbox.ch/wp-content/uploads/2020/12/Canela-Regular-Web.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
  	font-family: "Canela";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/Canela-RegularItalic-Web.woff2") format("woff2"),
    	 url("https://gourmetbox.ch/wp-content/uploads/2020/12/Canela-RegularItalic-Web.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}

@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-Bold-1.ttf") format("ttf")
	font-weight: bold;
	font-style: normal;
}
@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-BoldItalic.ttf") format("ttf")
	font-weight: bold;
	font-style: italic;
}
@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-Italic.ttf") format("ttf")
	font-weight: normal;
	font-style: italic;
}
@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-Medium.ttf") format("ttf")
	font-weight: 600;
	font-style: normal;
}
@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-MediumItalic.ttf") format("ttf")
	font-weight: 600;
	font-style: italic;
}
@font-face {
  	font-family: "DM Sans";
  	src: url("https://gourmetbox.ch/wp-content/uploads/2020/12/DMSans-Regular-1.ttf") format("ttf")
	font-weight: normal;
	font-style: normal;
}

#site-content {
	background-color: #ddd;
	overflow: hidden;
}

.row-4 {
	margin-left: -2.5rem!important;
	margin-right: -2.5rem!important;
}
@media (max-width: 767px) {
	.row-4 {
		margin-left: -1.5rem!important;
	    margin-right: -1.5rem!important;
	}
}
.row-5 {
	margin-left: -4rem!important;
	margin-right: -4rem!important;
}

button:focus, button:active {
	outline: none;
	text-decoration: none;
}
button.empty {
	background: none!important;
	border: 2px solid #333;
	color: #333!important;
}
button.no-border {
	border: none!important;
}


input.form-control {
	height: auto;
}
input[type=radio] {
	height: 20px;
	width: 20px;
}

input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

@media (max-width: 1023px) {
	.w-sm-100 {
		width: 100%!important;
	}
	.d-sm-none {
		display: none!important;
	}
}

#bestellprozess input[type=date], #bestellprozess input[type=email], #bestellprozess input[type=number], #bestellprozess input[type=password], #bestellprozess input[type=search], #bestellprozess input[type=tel], #bestellprozess input[type=text], #bestellprozess input[type=url], #bestellprozess select, #bestellprozess textarea {
	outline: none!important;
}
.form-group {
	position: relative;
    transition: .25s;
    height: auto;
    left: 0;
	position: relative;
}
.form-group input {
	outline: none!important;
	box-shadow: none!important;
}
.form-group label.inside {
	color: #7A7A7A;
	position: absolute;
    left: 2rem;
	top: 0.9rem;
	transition: 150ms ease-out;
	pointer-events: none;
}
.form-group .col-4 label.inside,
.form-group .col-8 label.inside {
    left: 2rem;
}
.form-group input:focus + label.inside,
.form-group input:valid + label.inside {
	padding: 0 8px;
    left: calc(2rem - 8px);
    top: -0.5rem;
    background: white;
}
.form-group .col-4  input:focus + label.inside,
.form-group .col-4  input:valid + label.inside,
.form-group .col-8  input:focus + label.inside,
.form-group .col-8  input:valid + label.inside {
    left: calc(2em - 8px);
}

.floating-label {
	padding: 0 8px!important;
    left: calc(2rem - 8px)!important;
    top: -0.5rem!important;
    background: white!important;
}

.bg-success {
	background-color: rgb(216,213,45)!important;
	color: black!important;
}
.bg-lightgrey {
	background: #F0EDEB;
}
.alert.bg-success:after {
	display: none;
}


/* margin */
/*.m-4 {
	margin: 2.5rem!important;
}
.mt-4, .my-4 {
    margin-top: 2.5rem!important;
}
.mb-4, .my-4 {
    margin-bottom: 2.5rem!important;
}
.mr-4, .mx-4 {
    margin-right: 2.5rem!important;
}
.ml-4, .mx-4 {
    margin-left: 2.5rem!important;
}*/


/*.m-5 {
	margin: 5rem!important;
}
.mt-5, .my-5 {
    margin-top: 5rem!important;
}
.mb-5, .my-5 {
    margin-bottom: 5rem!important;
}
.mr-5, .mx-5 {
    margin-right: 5rem!important;
}
.ml-5, .mx-5 {
    margin-left: 5rem!important;
}*/

/*padding*/
/*.p-4 {
	padding: 2.5rem!important;
}
.pt-4, .py-4 {
    padding-top: 2.5rem!important;
}
.pb-4, .py-4 {
    padding-bottom: 2.5rem!important;
}
.pr-4, .px-4 {
    padding-right: 2.5rem!important;
}
.pl-4, .px-4 {
    padding-left: 2.5rem!important;
}*/

/*.p-5 {
	padding: 5rem!important;
}
.pt-5, .py-5 {
    padding-top: 5rem!important;
}
.pb-5, .py-5 {
    padding-bottom: 5rem!important;
}
.pr-5, .px-5 {
    padding-right: 5rem!important;
}
.pl-5, .px-5 {
    padding-left: 5rem!important;
}*/


@media (max-width: 1023px) {
	#bestellprozess {
		margin-top: 20px;
	}
	#bestellprozess .p-mobile-0 {
		padding: 0!important;
	}
}

/*p, .desc {
	font-size: 1.5rem;
}
.desc-small {
	font-size: 1.2rem;
}*/




@media (max-width: 767px) {
	#bestellProzessBar {
		display: none;
	}

	#bestellProzessCircle {
		display: flex;
	    align-items: center;
	    justify-content: center;
	}

	.stepTitle {
		width: calc(100% - 80px);
		text-align: right;
	}
	.stepTitle div:not(.active) {
		display: none;
	}
	.stepTitle div span:first-of-type {
		font-size: 14px;
		font-family: Canela, sans-serif;
		opacity: 0.8;
		letter-spacing: 1.4px;
	}
	.stepTitle div span:nth-of-type(2) {
		display: block;
	    font-weight: 500;
	    font-size: 22px;
	    margin-top: -5px;
	}
	.stepTitle div span:nth-of-type(3) {
	    font-size: 12px;
	    color: #A69792;
	}

	.single-chart {
	  width: 80px;
	  height: 80px;
	}

	.circular-chart {
	  display: block;
	}

	.circle-bg {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 3.8;
	}

	.circle {
	  fill: none;
	  stroke-width: 2.8;
	  stroke-linecap: round;
	}

	.circular-chart .circle {
		stroke: black;
		transition: stroke-dasharray .3s;
		stroke-dasharray: 25 100;
	}

	.percentage {
	  fill: #666;
	  font-family: sans-serif;
	  font-size: 0.4em;
	  text-anchor: middle;
	}
}


@media (min-width: 768px) {

	.single-chart,
	#bestellProzessCircle {
		display: none;
	}

	#bestellProzessBar {
		display: flex;
	    align-items: center;
	    justify-content: space-around;
	    height: 100px;
	}
	#bestellProzessBar > .backgroundbar {
		position: absolute;
	    width: 100%;
	    height: 6px;
	    margin-top: -6px;
	    border-radius: 5px;
	    background: #ccc;
	    border: none;
	}
	#bestellProzessBar > .foregroundbar {
		position: absolute;
	    width: 12.5%;
	    height: 6px;
	    margin-top: -6px;
	    border-radius: 5px;
	    background: #6f3543;
	    left: 0;
	    transition: .25s;
	    border: none;
	}


		#bestellProzessBar > .step {
			position: relative;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    width: 100%;
		    cursor: pointer;
		}
		#bestellProzessBar > .step > span:nth-of-type(1) {
			background-color: black;
			color: white;
			font-size: 1rem;
			height: 1.5rem;
			width: 1.5rem;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: -1rem;
			transition: .25s;
		}
		#bestellProzessBar > .step.active ~ .step > span:nth-of-type(1) {
			background-color: #ccc;
		}
		#bestellProzessBar > .step > span:nth-of-type(2) {
			/*font-size: 1rem;*/
			transform: translateY(100%);
			color: black;
		}
		#bestellProzessBar > .step.active ~ .step {
			/*cursor: default;*/
		}
		#bestellProzessBar > .step.active ~ .step > span:nth-of-type(2) {
			color: #ccc;
		}
}




section#bestellprozess button {
	outline: none!important;
}
	section#bestellprozess .adblock-error {
		color: #6f3543;
	    background: #ffffff;
	    padding: 32px;
	    width: 100%;
	    position: relative;
	    padding-right: 100px;
	    max-width: 600px;
	    margin-right: auto;
	    margin-left: auto;
	}
	section#bestellprozess .adblock-error:after {
		content: '!';
	    width: 28px;
	    height: 28px;
	    background-color: #6F3543;
	    position: absolute;
	    right: 32px;
	    color: white;
	    text-align: center;
	    border-radius: 50%;
	    padding-left: 1px;
	    top: 50%;
	    transform: translateY(-50%);
	    font-family: "Dm Sans", sans-serif;
	    font-size: 16px;
	    line-height: 28px;
	    letter-spacing: 0.4px;
	}
	.gutscheine section#bestellprozess .adblock-error {
		margin-bottom: 40px;
	}
	#loginbutton {
		display: block;
		/*border-radius: 2px!important;*/
	}
	section#bestellprozess > .container {
		height: inherit;
		position: relative;
	}
		section#bestellprozess > .container .step {
			opacity: 0;
			position: absolute;
			position: relative;
			width: 100%;
			height: inherit;
			pointer-events: none;
			transition: margin 0.5s, opacity 0.2s;
			margin-left: -100%;
			height: 0;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
		}
		section#bestellprozess > .container .step.active {
			opacity: 1;
			pointer-events: all;
			margin: 0;
			height: auto;
		}
		section#bestellprozess > .container .step.active ~ .step {
			margin-left: 100%;
			position: absolute;
			top: 0;
		}

		section#bestellprozess > .container .step input.invalid {
			border-color: rgba(255,0,0,0.1);
    		background: rgba(255,0,0,0.1);
		}

		section#bestellprozess > .container #step1 input[name=lieferdatum] {
			transition: .25s;
		}
			@media (max-width: 767px) {
				#step1 > .row {
					margin: 0;
				}
			}
			#bestellprozess:not(.gutscheine) #step1 .menuSelector { position: relative; }
			#bestellprozess:not(.gutscheine) #step1 .menuSelector h2 {
				position: absolute;
				top: 0;
				right: 0;
				margin: 0;
				padding: 17px 30px 17px 30px;
				color: #F8FBFF;
				background-color: #6F3543;
				font-family: "Dm Sans", Sans-serif;
				font-size: 16px;
				font-weight: 600;
				line-height: 20px;
				letter-spacing: 2.24px;
			}
			section#bestellprozess:not(.gutscheine) > .container > #step1 .menuSelector .thumbnail {
				border-radius: 0;
				margin: 0;
				padding-bottom: calc(70%);
			}


			section#bestellprozess > .container > #step2 > .row {
				height: inherit;
			}

			section#bestellprozess > .container > #step2 > .row #menuBar {
				height: 100%;
	    		/*overflow-y: scroll;*/
				direction: rtl;
				opacity: 1;
				transition: .25s;
				/*background-color: inheri;*/
			    -webkit-background-clip: text;
			    transition: background-color .25s;
			}
			@media (max-width: 767px) {
				section#bestellprozess > .container > #step2 > .row #menuBar {
					display: none;
				}
			}
			@media (max-width: 1023px) {
				#menuBar h2 {
					font-size: 20px;
				}
			}
			section#bestellprozess > .container > #step2 > .row #menuBar:hover {
				background-color: rgba(0,0,0,0.18);
			}
			section#bestellprozess > .container > #step2 > .row #menuBar.hidden {
				opacity: 0;
				margin-left: -25%;
			}
				section#bestellprozess > .container .menuSelector {
					cursor: pointer;
					transition: .25s;
					height: 100%;
				}
				section#bestellprozess > .container .menuSelector:hover {
					/*box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)*/
				}
					section#bestellprozess > .container .menuSelector .thumbnail {
						/*margin: 0 10%;*/
						padding-bottom: 90%;
						background-position: center;
						/*border-radius: 50%;*/
    					background-size: auto 100%;
    					transition: all ease-out .25s;
    					margin: -1.5rem -1.5rem 0 -1.5rem;
					}
					section#bestellprozess > .container .menuSelector:hover .thumbnail {
						background-size: auto 110%;
					}

			section#bestellprozess > .container > #step2 > .row #menuBar::-webkit-scrollbar {
				width: 8px;
			}
			section#bestellprozess > .container > #step2 > .row #menuBar::-webkit-scrollbar-track,
			section#bestellprozess > .container > #step2 > .row #menuBar::-webkit-scrollbar-thumb {
				background: transparent;
				transition: .25s;
			}
			section#bestellprozess > .container > #step2 > .row #menuBar::-webkit-scrollbar-thumb {
				background-color: inherit;
				border-radius: 5px;
			}

				section#bestellprozess > .container #step2 #contentDisplay {}
					section#bestellprozess > .container #step2 #contentDisplay .menu {
						opacity: 0;
						position: absolute;
						pointer-events: none;
						transition: opacity .25s;
						height: 100%;
					}
					section#bestellprozess > .container #step2 #contentDisplay .menu.active {
						opacity: 1;
						pointer-events: all;
						height: 100%;
						position: unset;
						padding: 0;
    					margin-left: 15px;
					}
					@media (max-width: 767px) {
						section#bestellprozess > .container #step2 #contentDisplay .menu.active {
							margin-left: 0;
						}
					}
					section#bestellprozess > .container .thumbnail {
						/*margin: 0 10%;*/
						padding-bottom: 80%;
						background-position: center;
						/*border-radius: 50%;*/
    					background-size: auto 100%;
    					background-repeat: no-repeat;
					}
						section#bestellprozess > .container #step2 #contentDisplay .menu form {
							height: 100%;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu h2 span {
							font-size: 1rem;
    						margin-left: 8px;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu:not(#menu0) h2.mb-3 {
							position: absolute;
							top: 0;
							right: 0;
							margin: 0;
							padding: 17px 30px 17px 30px;
							color: #F8FBFF;
							background-color: #6F3543;
							font-family: "Dm Sans", Sans-serif;
							font-size: 16px;
							font-weight: 600;
							line-height: 20px;
							letter-spacing: 2.24px;
							z-index: 1;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu img {
							position: absolute;
							height: 100%;
							object-fit: cover;
							object-position: center;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option {
    						border-bottom: 1px solid #ddd;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .carousel {
							margin: -1rem -1rem 0 -1rem;
						}
						@media (min-width: 1024px) {
							section#bestellprozess > .container #step2 #contentDisplay .menu .carousel {
								margin: -3rem -3rem 0 -3rem;
							}
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .carousel-item {
							padding-bottom: 60%;
    						height: 0;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .carousel-indicators {
							top: 100%;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .carousel-indicators li {
							/*background-color: #333;*/
							background-color: #ded6d3;
							height: 5px;
							width: 40px;
							opacity: 1;
							transition: .3s;
							margin-left: 5px;
							margin-right: 5px;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .carousel-indicators li.active {
							background-color: #6F3542;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .desc + .option {
							border-top: 2px solid #F0EDEB;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option input[type="checkbox"] {
							height: 1.5rem;
							width: 1.5rem;
							float: right;
							background-color: #FFFFFF;
							border-color: #F0EDEB;
							border-width: 2px 2px 2px 2px;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option input[type="checkbox"]:checked {
							background-color: #eee;
							border-color: black;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option input[type="checkbox"]::before {
							height: 1.5rem;
							width: 1.5rem;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option .currency,
						section#bestellprozess > .container #step2 #contentDisplay .menu .option .price {
							opacity: 0;
						    float: right;
						    margin-right: 10px;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .option input[type=checkbox]:checked ~ .currency,
						section#bestellprozess > .container #step2 #contentDisplay .menu .option input[type=checkbox]:checked ~ .price {
							opacity: 1;
						}
						section#bestellprozess > .container #step2 #contentDisplay .menu .menge {}
							section#bestellprozess > .container .mengeSelect {
								display: flex;
								align-items: center;
							}
							@media (max-width: 1023px) {
								section#bestellprozess > .container .mengeSelect {
									justify-content: center;
								}
								section#bestellprozess > .container .menge .text-right {
									text-align: center;
									justify-content: flex-end;
    								display: flex;
								}
								section#bestellprozess > .container #step2 #contentDisplay .menu .option .price {
									white-space: nowrap;
									margin: 20px 0 0 0;
									position: absolute;
									right: 47px;
									top: -20px;
								}
							}
							section#bestellprozess > .container .menge button {
								height: 1.5rem;
								width: 1.5rem;
								padding: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
								text-decoration: none!important
							}
							section#bestellprozess > .container .gutscheindelete button {
								height: 1.5rem;
								width: 1.5rem;
								padding: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
								text-decoration: none!important
							}
							section#bestellprozess > .container .menge input[type=number] {
								width: 80px;
								padding: 0;
								font-size: 4rem;
								border: none;
								outline: none;
								text-align: center;
								-moz-appearance: textfield !important;
							}
								section#bestellprozess > .container .titel {
									font-size: 1.2rem;
								}
								section#bestellprozess > .container .menge,
								section#bestellprozess > .container .priceWrap {
									display: flex;
    								align-items: center;
								}
								section#bestellprozess > .container .priceWrap {
									justify-content: flex-end;
								}
								section#bestellprozess > .container .priceWrap .rabattprice {
									font-size: 13px;
								}
								@media (max-width: 1023px) {
									section#bestellprozess > .container .menge,
									section#bestellprozess > .container .priceWrap {
	    								justify-content: center;
									}
									section#bestellprozess > .container .priceWrap {
										justify-content: center!important;
									}
								}
								section#bestellprozess > .container .menge button:disabled {
									opacity: 0.5;
								}
								section#bestellprozess > .container .menge input[type=number] {
									font-size: 1.5rem;
								}
								section#bestellprozess > .container .itemWrap .menge,
								section#bestellprozess > .container .itemWrap .priceWrap {
									visibility: hidden;
								}
								section#bestellprozess > .container .itemWrap .menge input[type=number] {
									background: none;
									color: white;
								}
								section#bestellprozess > .container .itemWrap .menge button {
									opacity: 0;
								}
								section#bestellprozess > .container  .price {
									display: flex;
    								align-items: center;
    								justify-content: flex-end;
								}
							@media (min-width: 1024px) {
								section#bestellprozess > .container .menge .currency {
									font-size: 1.5rem;
								}
								section#bestellprozess > .container .menge .price {
									font-size: 1.5rem;
								}
							}
					section#bestellprozess > .container .warenkorb {
						position: absolute;
						opacity: 0;
						transition: .25s;
						pointer-events: all;
					}
					section#bestellprozess > .container .warenkorb.visible {
						opacity: 1;
					}

					section#bestellprozess > .container .footer {
    					width: 100%;
    					font-size: 1rem;
					}
						section#bestellprozess > .container .footer .zwischentotal {
							display: flex;
    						align-items: center;
    						justify-content: space-between;
    						background-color: #333;
    						color: white;
    						height: 100%;
						}
						section#bestellprozess > .container .footer button {
							width: 100%;
						}



				.removeItemPopup,
				.emptyCartPopup {
					position: absolute;
					top: 0;
					left: 0;
					background: rgba(255,255,255,0.8);
					background: rgba(0,0,0,0.8);
					width: 100%;
					height: 100%;
					backdrop-filter: blur(10px);
					opacity: 0;
					transition: .25s;
					visibility: hidden;
					color: white;
				}
				.removeItemPopup.visible,
				.emptyCartPopup.visible {
					opacity: 1;
					visibility: visible;
				}
					.removeItemPopup button,
					.emptyCartPopup button {
						background-color: rgba(0,0,0,0.5)!important;
						width: 75px;
					}





		#bestellprozess > .container #step3 #additionalWrapper {}
			#bestellprozess > .container #step3 #additionalWrapper .desc {
				overflow: hidden;
			}
			#bestellprozess > .container #step3 #additionalWrapper .desc .showMore {
				cursor: pointer;
			}
			#bestellprozess > .container .desc .showMore i {
				text-transform: uppercase;
				font-weight: 700;
			}
			#bestellprozess > .container #step3 #additionalWrapper .desc .showMore i.fas {
				transition: .25s;
			}
			#bestellprozess > .container #step3 #additionalWrapper .desc .showMore.visible i.fas {
				transform: rotate(180deg);
			}
			#bestellprozess > .container #step3 #additionalWrapper .desc .long {
				transition: .25s;
				opacity: 0;
				height: 0;
				/*transform: translateX(100%);*/
			}
			#bestellprozess > .container #step3 #additionalWrapper .desc .long.visible {
				opacity: 1;
				height: auto;
				/*transform: translateX(0);*/
			}


			#bestellprozess > .container #step3 #additionalWrapper button.upselling-button {
				transition: .25s;
				position: relative;
				background-color: white;
				border: 2px solid #333;
				margin-right: 30px;
				color: #333;
				z-index: 1;
			}
			section#bestellprozess > .container #step3 #additionalWrapper .mengeSelect {
				/*transition: transform .25s, opacity .5s;
				transform: translateX(-100%);
				opacity: 0;*/
			}
			section#bestellprozess > .container #step3 #additionalWrapper button.upselling-button.added ~ .menge .mengeSelect {
				/*transform: translateX(30px);
				opacity: 1;*/
			}
			section#bestellprozess > .container #step3 #additionalWrapper .priceWrap {
				transition: .25s;
				opacity: 1;
			}
			section#bestellprozess > .container #step3 #additionalWrapper .priceWrap.hidden {
				opacity: 0;
			}
			section#bestellprozess > .container #step3 #additionalWrapper button.upselling-button.added ~ div .priceWrap {
				/*opacity: 1;*/
			}
			section#bestellprozess > .container #step3 #additionalWrapper .priceWrap .einheit {
				position: absolute;
    			left: 0;
			}



			section#bestellprozess > .container #step3 #additionalWrapper::-webkit-scrollbar {
				width: 8px;
			}
			section#bestellprozess > .container #step3 #additionalWrapper::-webkit-scrollbar-track,
			section#bestellprozess > .container #step3 #additionalWrapper::-webkit-scrollbar-thumb {
				transition: .25s;
			}
			section#bestellprozess > .container #step3 #additionalWrapper::-webkit-scrollbar-thumb {
				border-radius: 5px;
				background-color: #ccc;
			}

#step3 .alert, .couponNotification.alert {
	top: 3rem;
	left: 3rem;
	height: calc(100% - 6rem);
	opacity: 0;
	transition: .3s;
	padding-right: 32px!important;
}
#step3 .alert.added, .couponNotification.alert.added {
	opacity: 1;
}
@media (max-width: 767px) {
	#step3 .alert, .couponNotification.alert {
		top: 1rem;
	    left: 1rem;
	    height: calc(100% - 1rem);
	    opacity: 0;
	    transition: .3s;
	    width: calc(100% - 2rem);
	}
}



#smartNotificationWrapper {
	top: 100px;
	right: 0;
	width: 400px;
	margin-top: -2.5em;
	pointer-events: none;
	z-index: 999;
}
	#smartNotificationWrapper .smartNotification {
		background-color: rgb(216,213,45)!important;
		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
		animation: smartNotification 5s forwards;
		margin-bottom: 2em;
		color: #000!important;
		padding-right: 100px;

	}
	#smartNotificationWrapper .smartNotification.error {
		background-color: rgba(111, 53, 67, 0.95)!important;
		color: #fff!important;

	}
	#smartNotificationWrapper .smartNotification .gotocart {
		pointer-events: all;

	}

	#smartNotificationWrapper .smartNotification .smartNotificationButtonbox {
		display:block; 
		margin-top:20px
	}

	#smartNotificationWrapper .smartNotification.smartNotificationExit {
		z-index: 0!important;
		animation: smartNotificationExit 5s forwards!important;
		padding: 2em;
		margin-bottom: 2em;
		height: auto;
		pointer-events: all;
	}

@keyframes smartNotification {
	0% {
		transform: translateX(100%);
		padding: 2em;
	}
	15% {
		transform: translateX(0);
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 0;
		padding: 2em;
		margin-bottom: 2em;
		height: auto;
	}
	100% {
		opacity: 0;
	    height: 0;
	    margin: 0;
	    padding: 0;
	}
}

@keyframes smartNotificationExit {
	0% {
		transform: translateX(100%);
		padding: 2em;
	}
	15% {
		transform: translateX(0);
	}
	80% {
		opacity: 1;
	}
	90% {
		opacity: 1;
		padding: 2em;
		margin-bottom: 2em;
		height: auto;
	}
}


.gutscheine .menge {
	transition: .1s;
}
.gutscheine .menge.hidden {
	opacity: 0;
}


#ui-datepicker-div {
}
	#ui-datepicker-div .ui-datepicker-unselectable {
		position: relative;
		color: transparent;
	}
	#ui-datepicker-div .ui-datepicker-unselectable::after {
		content: ' ';
		position: absolute;
		top: calc(50% - 2px);
		left: 0;
		width: 100%;
		height: 4px;
		background: #ddd;
		transform: rotate(45deg);
		border-radius: 2px;
	}
	#ui-datepicker-div .ui-datepicker-header {
		padding: 1rem;
		background: white;
    	border-bottom: none;
	}
		#ui-datepicker-div .ui-datepicker-prev {
			float: left;
			cursor: pointer;
		}
		#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled {
			display: none;
		}
		#ui-datepicker-div .ui-datepicker-next {
			float: right;
			cursor: pointer;
		}
		#ui-datepicker-div .ui-datepicker-title {
			text-align: center;
		}

	#ui-datepicker-div .ui-datepicker-calendar {
		margin: 0;
	}
		#ui-datepicker-div .ui-datepicker-calendar th {
			text-align: center;
			background-color: white;
		}
		#ui-datepicker-div .ui-datepicker-calendar td {
			text-align: center;
			width: calc(100% / 7);
			cursor: pointer;
			background-color: white;
		}
		/*#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today {
			background-color: #ddd;
		}*/
		#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day {
			background-color: #ccc;
		}
			#ui-datepicker-div .ui-datepicker-calendar td a {
				color: black;
				text-decoration: none;
				transition: none;
			}
			#ui-datepicker-div .ui-datepicker-calendar td:hover a {
				/*color: white;*/
			}




form.form-horizontal .unimportant {
	display: none;
    /*opacity: 0.25;*/
    /*left: 100%;*/
    /*position: relative;*/
    /*height: 0;*/
}


#sameAsDeliveryContent {
	display: none;
	font-size: 0.8em;
}

#adressform.hidden,
#adressform + .footer.hidden {
	display: none;
}

#detailSpecialWrap.hidden{
	display: none;
}

#lieferadresse .adressWrap.pickup,
#rechnungsform .adressWrap.pickup {
	display: none;
}


#lieferadresse .adresse,
#rechnungsform .adresse {
	border-top: 1px solid #ddd;
}
#lieferadresse .adresse:last-of-type,
#rechnungsform .adresse:last-of-type {
	/*border-bottom: 1px solid #ddd;*/
}
	#lieferadresse .adresse p {
		margin: 0;
	}
	#lieferadresse .adresse i.fa-trash-alt {
		font-size: 1.5em;
	}


#rechnungsadresse {
    position: relative;
	top: 100px;
    opacity: 0;
	transition: .5s;
}
	#rechnungsadresse .adresse p {
		margin: 0;
	}
#lieferadresse.selected + #rechnungsadresse {
	top: 0;
    opacity: 1;
}

#zahlungsartwrapper, #agbwrapper, #kommentarwrapper {
    position: relative;
	top: 100px;
    opacity: 0;
	transition: .5s;
}
#lieferadresse.selected ~ #zahlungsartwrapper,
#lieferadresse.selected ~ #agbwrapper,
#lieferadresse.selected ~ #lieferartwrapper,
#lieferadresse.selected ~ #kommentarwrapper {
	top: 0;
    opacity: 1;
}




#clientFormWrapper .wrap {
	opacity: 0;
	margin-left: -100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: margin-left .5s, opacity .25s;

}
#clientFormWrapper .wrap.active {
	opacity: 1;
	margin-left: 0;
	position: relative;
}
#clientFormWrapper .wrap.active ~ .wrap {
	margin-left: 100%;
}









.cartWrap {
	min-height: 100px;
}
.cartLoader {
	position: absolute;
    width: 100%;
    height: calc(100% - 80px);
    left: 0;
    top: 80px;
    background-color: rgba(255,255,255,1);

	z-index: 1;
    opacity: 1;
    transition: .5s;
}
.cartLoader.hidden {
	opacity: 0;
	pointer-events: none;
}

.upsellingWrap div:nth-of-type(2) {
	display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 767px) {
	.cartWrap > .row {
		margin: 0;
	}
	.cartWrap > .row:not(:last-of-type) {
		border-bottom: 1px solid #A69792;
		padding-bottom: 20px;
	}
	.cartWrap > .row div:first-of-type {
		padding-left: 0;
	}
	section#bestellprozess > .container .priceWrap {
		justify-content: flex-end!important;
	}
	.cartWrap .optional,
	.itemWrap .optional {
		font-size: 12px;
	}
	section#bestellprozess > .container #step2 .footer .zwischentotal {
		height: 50px;
		/*margin-right: -15px;*/
	}
	.upsellingWrap .priceWrap {
		margin-bottom: 1rem;
	}
}



.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: auto;

  margin-top: 50px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}


.profilseite .user-box {
	background: white;
	height: 200px;

}
.profilseite .user-box a {
	widows: 100%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 2rem;
    color: black;
}
.profilseite .user-box:nth-of-type(odd) {
	margin-left: -25px;
	margin-right: 25px;
}
.profilseite .user-box:nth-of-type(even) {
	margin-left: 25px;
	margin-right: -25px;
}

.noMenusAvailable .desc {
	max-width: 800px;
}
.noMenusAvailable .desc strong {
	color: #6f3543;
    font-weight: 600;
    font-style: italic;
}
.noMenusAvailable .desc:after {
	content: '!';
    width: 28px;
    height: 28px;
    background-color: #6F3543;
    position: absolute;
    right: 72px;
    color: white;
    text-align: center;
    border-radius: 50%;
    padding-left: 1px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Dm Sans", sans-serif;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.4px;
}


#blockUI {
	opacity: 0;
	visibility: hidden;
	position: fixed;
    background: #f0edeb;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    transition: .33s;
}
#blockUI .sk-cube-grid {
    margin-top: 0;
    margin-bottom: 0;
}
#blockUI h2 {
	text-align: center;
    margin-top: 40vh;
}
body.blocked {
	overflow: hidden;
}
body.blocked #blockUI {
	opacity: 1;
	visibility: visible;
}


main + .elementor-location-footer .elementor-section-wrap > section:first-of-type {
	display: none;
}

body.no-scroll {
	overflow-y: hidden;
}

#bestellProzessCirclePopup {
    position: fixed;
    top: 0;
    left: -100vw;
    height: 100vh;
    width: 100vw;
    background: rgb(240,237,235);
    z-index: 1;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 0 34px;
    font-size: 22px;
    line-height: 1.3;
    font-family: "DM Sans";
    transition: left 0.3s;
	display: flex;
	opacity: 0;
	visibility: hidden;
}
#bestellProzessCirclePopup.visible {
    left: 0;
	opacity: 1;
	visibility: visible;
}
#bestellProzessCirclePopup .step {
    margin: 12px 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    font-weight: 500;
}
#bestellProzessCirclePopup .step > span:first-of-type {
	font-size: 14px;
    color: #a69792;
    font-family: 'Canela';
}
#bestellProzessCirclePopup .step.active {
	color: #6f3543;
}
#bestellProzessCirclePopup .close {
	font-size: 12px;
	text-decoration: underline;
    padding: 15px 0px;
    position: fixed;
    top: 120px;
    color: #A69792;
}

@media (min-width: 1024px) {
	#bestellProzessCirclePopup {
		display: none!important;
	}
}


@media (max-width: 767px) {
	#bestellprozess {
		padding-bottom: 60px;
	}
	.desc {
		font-size: 16px;
    	line-height: 20px;
	}

	.removeConfirmButtons {
		width: auto!important;
		display: inline-flex;
		margin: -8px 0 20px 7px;
	}
	#additionalWrapper img {
		height: 180px;
	}
	.guestWeiterButton {
		width: 100%!important;
		margin-bottom: 20px;
	}
	.btn-secondary-mobile {
		background-color: #a69792!important;
    	border-color: #a69792!important;
	}
	#lieferform,
	#rechnungsform2 {
		padding-left: 0px!important;
	}
	#lieferform .form-check:first-of-type,
	#rechnungsform2 .form-check:first-of-type {
		margin-left: 15px;
	}
	table.ui-datepicker-calendar th,
	table.ui-datepicker-calendar td {
		padding: 10px;
	}
	#logoutBtn,
	#cartAmountValueHolder {
		font-size: 12px;
    	letter-spacing: 0.24px;
	}
}