:root{
	--gold: #b59410;
}

*{
	outline-width: 0px;
	margin: 0px;
	padding: 0px;
	font-family: Poppins, Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: #050505;

/*
	-webkit-touch-callout: none;	// iOS Safari
	-webkit-user-select: none;		// Safari
	-khtml-user-select: none;		// Konqueror HTML
	-moz-user-select: none;			// Old versions of Firefox
	-ms-user-select: none;			// Internet Explorer/Edge
	user-select: none;				// Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox
*/
	-webkit-text-size-adjust: none;
    touch-action: manipulation;
}

body{
	background-color: #ffffff;
}

body *{
	font-size: 1rem;
}

a{
	text-decoration: none;
	transition: ease all 0.5s;
}

a:hover{
	color: var(--gold) !important;
	transition: ease all 0.5s;
}

input[type=submit]{
	transition: ease all 0.5s;
}

input[type=submit]:hover{
	background-color: var(--gold) !important;
	transition: ease all 0.5s;
}

h1{
	font-size: 4.375rem;
	font-weight: bold;
	color: #000000;
}

h2{
	font-size: 1.375rem;
	font-weight: normal;
	color: var(--gold);
	padding-bottom: 1.563rem;
}

h3{
	font-size: 1rem;
	font-weight: normal;
	color: var(--gold);
	padding-bottom: 0rem;
}

img{
	max-width:100%;
	max-height:100%;
}

input, textarea{
	-webkit-touch-callout: text;	/* iOS Safari */
	-webkit-user-select: text;		/* Safari */
	-khtml-user-select: text;		/* Konqueror HTML */
	-moz-user-select: text;			/* Old versions of Firefox */
	-ms-user-select: text;			/* Internet Explorer/Edge */
	user-select: text;				/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

input:focus, select:focus, textarea:focus, button:focus{
	outline: none;
}

label{
	margin-left: 0.4rem;
}

.flex-container{
	display: flex;
	flex-wrap: nowrap;
}


#top-menu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: fit-content;
}

#top-left, #top-right{
	width: 50%;
}

#logo{
	width: 100%;
	min-width: 5.625rem;
	max-width: 100%;
	margin-left: 10px;
	margin-top: 10px;
}

#logo img{
	width: 3.125rem;
}

#top-menu li a{
	display: block;
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 1.125rem;
	color: #666666;
	font-weight: 400;
	text-align: center;
}

#top-menu li:first-child a{
	margin-left: 0px;
}

#top-menu li:last-child a{
	margin-right: 0px;
}

#top-menu .active{
	color: var(--gold);
}

#shopping-basket{
	width: 100%;
}

#basket{
	position: relative;
	width: fit-content;
	margin-left: auto;
	margin-right: 10px;
	margin-top: 10px;
}

#shopping-basket img{
	width: 3.125rem;
	min-width: 3.125rem;
}

#shopping-list{
	 margin-top: 40px;
}

#number-of-products{
	position: absolute;
	top: 0;
	right: 0;
	min-width: 0.625rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: normal;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 2px;
	height: 1.25rem;
	color: #ffffff;
	background-color: #ee0000;
	border-radius: 1.25rem;
}

.element-visible{
	display: block;
}

.element-hidden{
	display: none;
}

.center{
	justify-content: center;
}

#slide{
	padding-bottom: 50px;
}

#slide-container{
	display: flex;
	justify-content: center;
}

.slides{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
}

.slides div {
	grid-row-start: 1;
	grid-column-start: 1;
}

.crossFade__image{
	opacity: 0;
	transition: all 2s ease-in-out;
}

.crossFade__image--active{
	opacity: 1;
	transition: all 2s ease-in-out;
}

.crossFade__image--active-no-delay{
	opacity: 1;
}

.content-text{
	max-width: 37.5rem;
}

.opening-hours, .delivery-info{
	padding-top: 10px;
	padding-bottom: 30px;
}

.opening-hours{
	background-color: #eeeeee;
}

.opening-hours h1, .delivery-info h1{
	font-size: 3.125rem;
	margin-right: 50%;
}

.default-gap{
	row-gap: 1.25rem;
	column-gap: 1.25rem;
}

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

.opening-hours-table{
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	font-size: 0.875rem;
	font-weight: normal;
	color: #666666;
}

.todaytext, .red{
	color: #cc0000 !important;
}

.opening-hours td{
	padding-right: 20px;
}

.footer{
	padding-top: 30px;
	padding-bottom: 50px;
	background-color: #252525;
	display: flex;
	justify-content: center;
}

.footer *{
	color: #ffffff;
	font-weight: normal;
	white-space: nowrap;
}

.footer h1{
	font-size: 1.5rem;
}

.footer img{
	vertical-align: middle;
}

.footer-text{
	padding-top: 10px;
}

.footer-text img{
	width: 1.8125rem;
	height: 1.8125rem;
}

.footer-text span{
	padding-left: 15px;
}

#copyright{
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.copyright-text{
	font-size: 0.875rem;
}

.grid-container{
	display: grid;
	grid-template-columns: auto auto auto;
	padding: 10px;
}

.grid-container:div{
	padding: 20px;
}

#product, #customer-data, #conditions{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width: 75%;
	padding-bottom: 50px;
}

#response, #contact{
	padding-bottom: 50px;

}

#product h1, #customer-data h1, #response h1, #contact h1, #conditions h1{
	font-size: 3.125rem;
    margin-bottom: 30px !important;
}

.info-icon{
	width: 1.875rem;
	height: 1.875rem;
	margin-bottom: 0.625rem;
}

.info-icon-contents{
    position: absolute;
    right: 10px;
    top: 10px;;
	width: 1.875rem;
	height: 1.875rem;
}

.cursor{
    cursor: pointer; /* Add a pointer on hover */
}

#customer-data h1, #response h1, #contact h1, #conditions h1{
	margin-bottom: 40px;
}

#product h2{
	font-size: 1.375rem;
	color: #111111;
	padding-top: 25px;
	padding-bottom: 15px;
}

#product h2 span{
	font-size: 0.9rem;
}

.product-item{
	position: relative;
	width: 12.5rem;
	min-width: 12.5rem;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	border: 2px;
	border-style: dotted;
	border-color: #666666;
	border-top-left-radius: 1.25rem;
	border-bottom-right-radius: 1.25rem;
	text-align: center;
	align-items: center;
	display: flex;
	flex-flow: column;
	background-color: #ffffff;
	filter: drop-shadow(10px 10px 5px #eeeeee);
}

.product-item h2{
	padding: 0px;
	color: #050505;
	font-weight: bold;
}

.product-item .product-image{
    width: 150px;
    height: 150px;
    margin-top: 20px;
}

.product-list{
	flex-wrap: wrap;
	row-gap: 1.25rem;
	column-gap: 1.25rem;
	padding-bottom: 1em;
}

.product-price{
	color: var(--gold);
	font-size: 1.5rem;
	font-weight: bold;
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
}

.product-text{
	margin-top: 10px;
	font-size: 1rem;
	font-weight: 300;
	color: #3b3b3b;
}

.order-button-container{
	display: flex;
	margin-top: 20px;
	align-items: center;
}

.order-button{
	width: 8.125rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 50px;
	filter: drop-shadow(5px 5px 5px #aaaaaa);
}

.order-button a{
	width: 100%;
	display: block;
	font-size: 1rem;
	font-weight: normal;
	color: #ffffff;
	background-color: #252525;
	text-align: center;
	padding: 8px 0px;
	border-radius: 4px;
}

.submit-button{
	margin-top: 50px;
	font-size: 1rem;
	font-weight: normal;
	color: #ffffff;
	background-color: #252525;
	padding: 8px 16px;
	border-width: 0px;
	border-radius: 4px;
	cursor: pointer;
	filter: drop-shadow(5px 5px 5px #aaaaaa);
}

.reservation-button{
	width: 12rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	text-align: center;
	margin-top: 50px;
	filter: drop-shadow(5px 5px 5px #aaaaaa);
}

.reservation-button a{
	width: 100%;
	display: block;
	font-size: 1rem;
	font-weight: normal;
	color: #ffffff;
	background-color: #252525;
	text-align: center;
	padding: 8px 0px;
	border-radius: 4px;
}

.order-button a:hover, .submit-button:hover, .reservation-button a:hover{
	color: #ffffff !important;
	background-color: var(--gold);
}

.order-plus-minus{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: normal;
	width: 30px;
	height: 30px;
	color: #ffffff;
	background-color: #252525;
	border-radius: 50%;
	vertical-align: middle;
}

.order-plus-minus:hover{
	color: #ffffff !important;
	background-color: var(--gold);
}

.trash-can{
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
}

.order-amount{
	width: 1.875rem;
	margin-left: 10px;
	margin-right: 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #999999;
	border-radius: 10px;
	font-size: 1.25rem;
	text-align: center;
}

.order-amount:focus{
	outline: none;
}

.input-field{
	float: left;
	width: 20em;
	border-width: 1px;
	border-style: solid;
	border-color: #999999;
	border-radius: 4px;
	padding-left: 5px;
	padding-right: 5px;
}

.pc-hnr{
	width: 4.5rem;
}

#no-delivery{
	display: none;
}

.error{
	color: #ff0000;
}

textarea{
	resize: none;
	overflow: hidden;
}

.contact-content, .response-content{
	row-gap: 1.25rem;
	column-gap: 1.25rem;
}

.response-intro, .contact-content, .customerdata-content{
    width: 35.9rem;
}

.heading{
	color: var(--gold);
	font-weight: 400;
}

#total-price{
	display: flex;
	align-items: center;
	justify-content: right;
	margin-right: 10px;
	width: 100%;
}

#response-form{
	padding-bottom: 1.875rem;
}

.default-left, .response-image, .contact-map, .customerdata-image{
	width: 100%;
	min-width: 20rem;
    max-width: 37.5rem;
    margin-top: 90px;
    margin-bottom: 40px;
}

.response-image, .customerdata-image{
	text-align: center;
}

.response-image img, .customerdata-image img{
	width: 80%;
	max-width: 14rem;
}

.contact-map{
    width: 33rem;
    border: 0;
    aspect-ratio: 1 / 1;
}

.response-text{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	padding: 10px;
	max-width: 75%;
	background-color: #eeeeee;
	border-top-left-radius: 1.25rem;
	border-bottom-right-radius: 1.25rem;
	filter: drop-shadow(10px 10px 5px #eeeeee);
}

.response-date{
	font-size: 0.6875rem;
}

#overlay{
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.95);
	z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
}

#overlay-content{
	position: relative;
	min-width: fit-content;
	padding: 10px;
	margin: auto;
	margin-top: 10%;
	width: 50%;
	color: #333333;
	font-weight: bold;
	font-size: 1rem;
	background-color: #eeeeee;
}

#overlay-content h1{
	font-weight: bold;
	font-size: 2rem;
	color: #111111;
	padding-top: 0px;
	padding-bottom: 0px;
}

#overlay-content h2{
	font-weight: normal;
	font-size: 1.5rem;
	color: #111111;
	padding-bottom: 15px;
}

#close{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	cursor: pointer; /* Add a pointer on hover */
}

.logo-ideal{
	width: 93px;
	height: 82px;
	margin-right: 10px;
	vertical-align:middle;
}

@media only screen and (max-width: 950px){
	body *{
		font-size: 0.75rem;
	}

	.wrap{
		flex-wrap: wrap;
	}

	#slide{
		padding-bottom: 15px;
	}

	.slides{
		width: 80%;
	}

	.default-left{
		margin-top: 0px;
	}

	.content-text{
		width: 90%;
		max-width: 90%;
	}

	h1{
		font-size: 3.255rem;
	}

    h1.mobile-space{
        margin-left: 1rem;
    }

	h2{
		font-size: 1.02rem;
		padding-bottom: 1rem;
	}

	.opening-hours h1, .delivery-info h1{
		font-size: 2.32rem;
	}

	#top-left{
		width: fit-content;
	}

	#top-right{
		width: 100%;
	}

	#logo{
		margin-left: 5px;
		margin-top: 5px;
		margin-right: 10px;
		width: 1.976rem;
		min-width: 1.976rem;
	}

	#top-menu li a{
		margin-top: 10px;
		margin-left: 5px;
		margin-right: 5px;
		font-size: 1rem;
	}

	#logo img{
		width: 1.976rem;
		min-width: 1.976rem;
	}

	#basket{
		margin-right: 5px;
		margin-top: 5px;
	}

	#shopping-basket img{
		width: 1.976rem;
		min-width: 1.976rem;
	}

	#number-of-products{
		height: 1.038rem;
		min-width: 0.79rem;
		border-radius: 0.52rem;
		font-size: 0.648rem;
	}

	#shopping-cart-empty{
		width: 60%;
	}

	#product h1, #customer-data h1, #response h1, #contact h1, #conditions h1{
		font-size: 2.316rem;
		margin-bottom: 0px !important;
	}

	.info-icon{
		width: 1.389rem;
		height: 1.389rem;
		margin-bottom: 1.172rem;
	}

    .info-icon-contents{
        right: 2px;
        top: 2px;;
		width: 1.3rem;
		height: 1.3rem;
    }

	#product h2{
		font-size: 1.02rem;
	}

	#product h2 span{
		font-size: 0.669rem;
	}

	.product-item{
		width: 14.9%;
		min-width: 14.9%;
		padding-bottom: 10px;
	}

    .product-item .product-image{
		width: 80px;
		height: 80px;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.product-item h2{
		padding: 0px !important;
	}

	.product-list{
		row-gap: 1rem;
		column-gap: 1rem;
	}

	.product-price{
		font-size: 1.111rem;
	}

	.order-plus-minus{
		font-size: 0.929rem;
		font-weight: normal;
		width: 1.4rem;
		height: 1.4rem;
	}

	.trash-can{
		width: 1rem;
		height: 1rem;
	}

	.pc-hnr{
		width: 3.56rem;
	}

	.order-amount{
		width: 1.235rem;
		font-size: 0.925rem;
		margin-left: 5px;
		margin-right: 5px;
	}

	.order-button{
		width: 6.02rem;
		padding: 0px;
	}

	.order-button a{
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 0.741rem;
		font-weight: normal;
	}

	.submit-button{
		font-size: 0.741rem;
	}

	.submit-button{
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.footer{
		padding-left: 5%;
		justify-content: start;
	}

	.footer h1{
		font-size: 1.11rem;
	}

	.footer-text img{
		width: 1.344rem;
		height: 1.344rem;
	}

	.copyright-text{
		font-size: 0.648rem;
	}

    #product, #conditions{
    	width: 90%;
        max-width: 90%;
    }

    .response-intro, .contact-content, .customerdata-content{
        width: 90%;
        max-width: 90%;
		min-height: 12rem;
    }

    .contact-map{
        width: 90%;
        max-width: 90%;
    }

	.contact-map, .response-image, .customerdata-image{
		margin-top: 40px;
	}

	.response-text{
		margin-bottom: 50px;
	    width: 85%;
	    max-width: 85%;
		border-top-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		filter: drop-shadow(5px 5px 2px #eeeeee);
	}

	.response-date{
		font-size: 0.51rem;
	}

	#overlay-content{
		position: relative;
		min-width: auto;
		padding: 10px;
		margin: 0px;
		width: auto;
		height: 100%;
		font-size: 2rem;
		font-size: 0.791rem;
		background-color: transparent;
		overflow-y: scroll;
	}

	#overlay-content h1{
		font-size: 1.186rem;
	}

	#overlay-content h2{
		font-size: 1rem;
	}

	#close{
		width: 12px;
		height: 12px;
	}

	.logo-ideal{
		width: 56px;
		height: 49px;
	}
}

@media only screen and (max-width: 800px){
	.product-item{
		width: 18.8%;
		min-width: 18.8%;
	}
}

@media only screen and (max-width: 650px){
	.product-item{
		width: 25.5%;
		min-width: 25.5%;
	}
}

@media only screen and (max-width: 500px){
	.product-item{
		width: 38%;
		min-width: 38%;
	}
}

@media only screen and (max-width: 350px){
	#top-menu li a{
		font-size: 0.824rem;
	}
}