@charset "utf-8";
/* CSS Document */
body {
	background-color: #960E1A;
	background-attachment: fixed;
	color: #fff;
	font-family: Montserrat Regular;
}
html {
  scroll-behavior: smooth;
}
html,body {
	height:100%;
}

#container {
	width: 100%;
	margin: 0px auto; 
	overflow: hidden;
}
.decor {
	background-image: url("images/decor.svg");
	background-repeat: no-repeat;
	background-size: 100%;
	width: 99%;
	height: 1500px;
	position: absolute;
	top: 0;
	z-index: -1;
}
.logo {
	width: 32%;
	margin: 0px auto;
	margin-top: 6%;
	filter: drop-shadow(30px 10px 41px rgba(0, 0, 0, 0.3));
}
.mobo_img {
    width: 100%;
	visibility:hidden;
}
/* cadeaus */
.gifts_container {
	width: 65%;
	margin: 0px auto;
	margin-top: 16%;
	font-size: 70px;
	background-image: url("images/Background_Small.webp");
	  background-position: top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: contain;
	overflow:hidden;
}
@media only screen and (max-width: 1000px) {
  .gifts_container {
    width: 100%!important;
  }
}
.gifts_inner {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 13%;
	position: relative;
}
.popup-container{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.51);
	margin: 0px auto;
	top: 0;
	left: 0;
	display: none;
	z-index: 201;
}
.popup-close {
	background: #ffffff;
	width: 30px;
	height: 30px;
	position: absolute;
	right: 0;
	cursor: pointer;
	text-align: center;
	border-radius: 500px;
	font-family:sofia-pro;
	line-height: 16px
}
.popup {
	position: fixed;
	width: 650px;
	height: auto;
	min-height: 200px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	color: black;
	padding: 70px 40px 30px 40px;
	border-radius: 20px;
	display: block;
}
.popup-gift {
	position: absolute;
	background-image: url("images/popup-gift.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: contain;
	width: 650px;
	height: 100%;
	top: -220px;
	z-index: 1;
}
button.gift-button {
	background-color: #EF5953;
	color: #fff;
	border-radius: 100px;
	padding: 10px;
	font-size: 1rem;
	cursor: pointer;
	border: none;
	width: 100%;
	font-weight: 550;
}
button.gift-button:hover{
	background-color: #F4453E;
}
.dag_img {
	width: 50px;
	margin-top: 16px;
}
.c1 {
	width: 17.6%;
	height: 22.8%;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 10vw #000000;*/
	position: absolute;
	top:0;
}
.c2 {
	height: 11.3%;
	width: 17.6%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:0;
	left: 20%;
}
.c3 {
	height: 11.3%;
	width: 17.6%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:0;	
	left: 40%;
}
.c4 {
	height: 11.3%;
	width: 17.6%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw; 
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:0;
	left: 60%;
}
.c5 {
	height: 11.3%;
	width: 17.6%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:0;
	left: 80%;
}
.c6 {
	width: 24%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:11.5%;
	left: 20%
}
.c7 {
	width: 17%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw; 
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:11.5%;	
	left: 46.4%
}
.c8 {
	width: 16%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:11.5%;
	left: 65.8%;
}
.c9 {
	width: 13.5%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:11.5%;
	left: 84.1%;
}
.c10 {
	width: 24%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:23.1%;
}
.c11 {
	height: 22.9%;
	width: 17.6%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 10vw #000000;*/
	position: absolute;
	top:23.1%;
	left: 26.4%;
}
.c12 {
	width: 25%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:23.1%;
	left: 46.4%;
}
.c13 {
	width: 23.78%;
	height: 11.3%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:23.1%;
	left:73.8%;
}
.c14 {
	height: 22.9%;
	width: 10.8%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:34.7%;
}
.c15 {
	height: 11.3%;
	width: 10.8%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:34.7%;
	left: 13.15%;
}
.c16 {
	height: 11.3%;
	width: 22%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:34.7%;
	left: 46.4%;
}
.c17 {
	height: 11.3%;
	width: 26.8%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:34.7%;
	left: 70.8%;
}
.c18 {
	height: 11.3%;
	width: 26%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:46.3%;
	left:13.15%;
}
.c19 {
	height: 11.3%;
	width: 29%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:46.3%;
	left: 41.5%;
}
.c23 {
	height: 11.3%;
	width: 15.4%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:57.9%;
	left: 55.1%;
}
.c20 {
	height: 11.3%;
	width: 16%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:57.9%;
}
.c21 {
	height: 11.3%;
	width: 16%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:57.9%;
	left: 18.4%;
}
.c22 {
	height: 11.3%;
	width: 16%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 8vw #000000;*/
	position: absolute;
	top:57.9%;
	left: 36.8%;
}
.c24 {
	height: 22.9%;
	width: 24.65%;
	float: left;
	transition-duration: 0.2s;
	border: .2vw solid white;
	font-size: 3vw;
	padding-left: 2%;
	/*box-shadow: inset 0 0 10vw #000000;*/
	position: absolute;
	top:46.3%;
	left: 72.9%;
}
/*.gifts_inner span {
	color: #E4C396;
	display: inline-block;
    background-color: white;
    border-radius: 50%; 
    padding: 5px;
	padding-top: 11px;
    text-align: center;
    min-width: 37px;
    min-height: 30px; 
    line-height: 30px; 
	font-size: 30px;
	font-style:italic;
	font-weight: 400;
	border: 2px solid;
	margin-top: 16px;
	font-family:new-spirit;
}*/







.c1on, .c2on, .c3on, .c4on, .c5on, .c6on, .c7on, .c8on, .c9on, .c10on, .c11on, .c12on, .c13on, .c14on, .c15on, .c16on, .c17on, .c18on, .c19on, .c20on, .c21on, .c22on, .c23on, .c24on{
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	background: transparent;
	position: absolute;
}
.c1slot, .c2slot, .c3slot, .c4slot, .c5slot, .c6slot, .c7slot,.c8slot, .c9slot, .c10slot, .c11slot, .c12slot, .c13slot, .c14slot, .c15slot, .c16slot, .c17slot, .c18slot, .c19slot, .c20slot, .c21slot, .c22slot, .c23slot, .c24slot{
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	position: absolute;
	opacity: 0.1;

}
.c31slot, .c25slot, .c14slot, .c15slot  {
	background-size: 25%;
}
.c31on, .c25on, .c14on, .c15on {
	background-size: 70%;
}
.c1.open:hover, .c2.open:hover, .c3.open:hover, .c4.open:hover, .c5.open:hover, .c6.open:hover, .c7.open:hover, .c8.open:hover, .c9.open:hover, .c10.open:hover, .c11.open:hover, .c12.open:hover, .c13.open:hover, .c14.open:hover, .c15.open:hover, .c16.open:hover, .c17.open:hover, .c18.open:hover, .c19.open:hover, .c20.open:hover, .c21.open:hover, .c22.open:hover, .c23.open:hover, .c24.open:hover {
	box-shadow: inset 0 0 8vw #EAAE36;
	cursor: pointer;
}
.product-image {
	width: 37%;
	float: left;
	margin-top: 20px;
}
.product-image img {
	border-radius: 8px;	
}
.product-action{ 
	width: 60%;
	float:	right;
	color: #000000;
	padding-left: 10px;
	margin-top: 20px;
}
.product-action h2{ 
	margin-top: 0;
	font-size: 23pt;
	font-family: sofia-pro;
	line-height: 20pt;
} 
.product-action p.text{
	margin-top: -12px;
	font-size: 16pt;
	line-height: 18pt;
	font-weight: 300;
	font-family: sofia-pro;
}
.product-action p.van{
	margin-top: -20px;
	font-size: 18pt;
	width: 60%;
	float: left;
	font-family: sofia-pro;
}
.product-action p.van strike{
	font-weight: 550;
	font-size: 22pt;
	font-family: sofia-pro;
}
.product-action p.voor{
	margin-top: -5px;
	font-size: 18pt;
	width: 40%;
	float: left;
	font-family: sofia-pro;
	font-weight: 550;
	line-height: 30pt;
}
.product-action p.voor span{
	font-size: 30pt;
	font-weight: 40%;
	font-style:italic;
	font-family:new-spirit;
}
.product-action  span{
	color: #F4453E;
}
.past > .popup {
	z-index: 10;
	  filter: grayscale(100%);
}
.past::before {
	content:url('images/FR.webp');
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 350px);
	z-index: 100;
	}
.tekstblok {
	width: 71%;
	margin: 0px auto;
	background: #fff;
	border-radius: 10px;
	color: #000;
	padding: 2%;

	}
.tekstblok h2 {
	font-size: 1.4vw;
	}
.tekstblok p {
	font-size: 1vw;
	}
.spacer {
	height: 4%;
	}
/*.c1:has(> .todayglow), .c2:has(> .todayglow), .c3:has(> .todayglow), .c4:has(> .todayglow), .c5:has(> .todayglow), .c6:has(> .todayglow), .c7:has(> .todayglow), .c8:has(> .todayglow), .c9:has(> .todayglow), .c10:has(> .todayglow), .c11:has(> .todayglow), .c12:has(> .todayglow), .c13:has(> .todayglow), .c14:has(> .todayglow), .c15:has(> .todayglow), .c16:has(> .todayglow), .c17:has(> .todayglow), .c18:has(> .todayglow), .c19:has(> .todayglow), .c20:has(> .todayglow), .c21:has(> .todayglow), .c22:has(> .todayglow), .c23:has(> .todayglow), .c24:has(> .todayglow), .c25:has(> .todayglow), .c26:has(> .todayglow), .c27:has(> .todayglow), .c28:has(> .todayglow), .c29:has(> .todayglow), .c30:has(> .todayglow), .c31:has(> .todayglow){
	box-shadow: inset 0 0 8vw #fcb23d;
}*/
.todayglow {
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	background: transparent;
	position: absolute;
	box-shadow: inset 0 0 2vw #EAAE36;	
}
/* sneeuwvlokjes */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:199;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
