@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--background: #EDEDED;
	--backgroundDark: #101920;
	--white: #FFFFFF;
	--blue: #057ABA;
	--red: #D62410;
	--placeholder: #4F4F4F;
	--black: #000000;
}

#innerheader p {
    margin: 0;
}



#innerheader a:focus,
.ac-s-container>.ac-s-input-container>input:focus-visible ,
.ac-s-container>.ac-s-input-container.focus{
	outline: 2px solid #fff;
}


.ac-s-container>.ac-s-input-container {
    overflow: visible;
}

.padding {
	padding: 90px 0;

	@media screen and (max-width: 480px) {
		padding: 40px 0;
	}

	&.padding-intro {
		@media screen and (min-width: 768px) and (max-width: 1024px) {
			padding: 70px 0;
		}
	}

	&.low-padding-top {
		padding-top: 40px;
	}

	&.padding-top {
		padding-top: 90px;
		padding-bottom: unset;
			
		@media screen and (max-width: 480px) {
			padding-top: 40px;
		}
	}
}



.b_btn {
	background-color: var(--red);
	border-radius: 5px;
	padding: 12px 20px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	transition: all 0.3s ease-in-out;
	color: var(--white);
	border: unset;
	cursor: pointer;
	text-decoration: none;
	gap: 10px;

	input {
		background: transparent;
		color: var(--white);
		border: unset;
		cursor: pointer;
	}

	&.b_btn-transparent {
		border: 1px solid var(--white);
		background-color: transparent;

		&:hover {
			transition: all 0.3s ease-in-out;
		}

		&.arrow {
			color: var(--white);
		}
	}

	&.arrow {
		&::after {
			content: '\f061';
			font-family: "Font Awesome 6 Pro";
			position: relative;
			left: 0;
			transition: all 0.3s ease-in-out;
			font-size: 16px;
			line-height: 1;
		}

		&:hover {
			transition: all 0.3s ease-in-out;

			&::after {
				transition: all 0.3s ease-in-out;
				left: 5px;
			}
		}
	}

	&:hover {
		transition: all 0.3s ease-in-out;
	}

	a {
		color: var(--white);
	}
}


.jive {
    header.custom.topheader {	
        padding:0;
        height:100px;
        background:transparent;

		&.active {
			position: unset;

			.b_header-wrapper {
				#ctl00_menu {
					&.b_menu-open {
						height: 250vh;
					}
					.sub-menu-wrapper {
						.subMenu {
							@media screen and (max-width: 1024px) {
								row-gap: unset;
								
							}
						}
					}
				}
			}
		}
    
        &.b_menu-open,
		&.active {
            height: 450px;
    
            #innercontainer {
                header {
                    overflow: unset;

					.menu.b_menu-open {
						top: 100px;
					}
                }
            }
        }
    }
}

#header_top,
#menu_top,
#apptitle {
	display: none;
}

#mainwrapper {
	padding-bottom: unset;
}

.ballroom_custompage {
	.ssr-ac-container {
		display: none;
	}
}

.page_home #innercontainer header, .page_homeleiden #innercontainer header {
	background: linear-gradient(90deg,rgba(16, 25, 32, 1) 0%, rgba(16, 25, 32, 1) 50%, rgba(237, 237, 237, 1) 50%, rgba(237, 237, 237, 1) 100%);

	.b_header-wrapper {
		box-shadow: 0px 0px 0px 10px rgba(16, 25, 32, 1);
	}
}

#innercontainer header {
	background: var(--backgroundDark);

	figure.image {
        margin: unset;
    }
	
	#header_top {
		display: none;
	}

	.sub-menu-wrapper {
		
left: 0;
		
z-index: 900;
		
display: none;
		
width: 100%;
		
height: 100%;
		
background-color: var(--white);
		
		
		


		@media screen and (min-width: 1025px) {
		
			top: 80px;
			position: absolute;
			height: min-content;					
		}
		
	}

	.b_header-wrapper {
		display: flex;
		max-width: 1260px;
        width: calc(100% - 20px);
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		padding: 18px 0;
		background: var(--backgroundDark);
		
    

	

		#container_menu {
			overflow: unset;
		}

		.b_menu-search-wrapper {
                position: unset;
        }

        #pull {
			display: none;
            @media screen and (max-width: 1024px) {
                display: flex;
                align-items: center;
                text-decoration: none;
                color: var(--white);
    
                &::after {
                    display: inline-block;
                    margin-left: 0.5rem;
                    color: var(--white);
                    font-weight: 600;
                    font-size: 16px;
                    content: "\f0c9";
                    width: 15px;
                    font-family: "Font Awesome 6 Pro";
                }
            }
        }

		#ctl00_menu {
            display: flex;
            justify-content: space-between;
            /* height: 30px; */
            width: 100%;
            gap: 30px;
            list-style-type: none;
            padding: unset;
            margin: unset;
            padding-left: 4px;
            padding-right: 4px;
			/* position: relative; */

			#p103 {
	
				a {
					&::after {
						content: "\f078";
						display: inline-block;
						margin-left: 0.5rem;
						/* color: var(--white); */
						font-weight: 600;
						font-size: 16px;
						width: 15px;
						font-family: "Font Awesome 6 Pro";
						transition: all 0.3s ease-in-out;
					}
				}

				&.has-submenu {
					&::after {
						color: var(--black);
					}

					&.sub-menu-open {
						&::after {
							color: var(--white);
						}
					}
					
				}
			}
    
            @media screen and (max-width: 1024px) {
                display: none;
                justify-content: unset;
                gap: 25px;
                align-items: start;
                padding-left: 10px;
                transition: all 0.3s ease-in-out;
                height: 0;
    
                &.b_menu-open {
                    transition: all 0.3s ease-in-out;
                    height: 150vh;
                    line-height: 160%;
                    display: flex;
                    flex-direction: column;
                    gap: unset;
                    background-color: var(--white);
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 88px;
                    right: 0;
                    bottom: 0;
                    padding: unset;
                    z-index: 910;
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                  
    
                    li {
                        padding: 10px 20px;
                        width: 100%;
                    }
                }
            }


    
            * {
                font-size: 16px;
            }
        }

		.menu {
			display: flex;
			align-items: center;
			gap: 20px;
			padding-left: unset;
			list-style-type: none;

			li {
				a,
				span {
					font-family: "Open Sans", sans-serif;
					text-decoration: none;
					color: var(--white);
					font-weight: 700;

					@media screen and (max-width: 1024px) {
						color: var(--black);
					}
				}
			}
		}
	}
}



.navigation-is-open {
	#innercontainer header {
		background: var(--white);
			.b_header-wrapper {
				background: var(--white);
				box-shadow: none;
				
				#pull, #pull:after {
					color: var(--backgroundDark);
				}

				img {
					filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(126deg) brightness(105%) contrast(101%);
				}

				.sub-menu-wrapper {
					box-shadow: none;
				}
			}
	}	


}

#innercontainer header {
	&.active {
		.b_header-wrapper {
			background: var(--white);
			box-shadow: none;

			ul {
				li {
					a {
					color: #000;
					}
				}
			}
		}

		.sub-menu-wrapper {
				display: block;
				box-shadow: 0px 12px 21px -7px rgba(0,0,0,0.1);
				
					.subMenu {
						display: grid;
						grid-template-columns: repeat(1, 1fr);
						grid-template-rows: auto;
						column-gap: 120px;
						list-style-type: none;
						max-width: 1260px;
						width: calc(100% - 20px);
						margin: 0 auto;
						gap: 0;
						padding: 0;
						
						

						@media screen and (min-width: 1025px) {
							grid-template-columns: repeat(3, 1fr);
							row-gap: 20px;
							padding: 90px 0;
						}
					}
	
					* {
						color: var(--black);
					}

					a::after {
						content: none!important;
					}
			}

		


		position: unset;
		@media screen and (max-width: 1024px) {
			.menu.b_menu-open {
				height: 250vh;

				#p103 {
					padding-bottom: unset;
				}
			}


		

			.sub-menu-wrapper {
					display: block;
					max-height: unset;
					top: unset;
					position: relative;
					background-color: unset;
					height: 97%;

					.subMenu {
						row-gap: 0;
						

						&.padding {
							padding-top: unset;
							padding-bottom: unset;
						}
					}
			}


			
		}

		@media screen and (min-width: 1025px) {
			background: var(--white);

			

			#ctl00_menu #p103 a{
				&::after {
					color: var(--black);
					content: "\f077";
				}

			
			}

				#ctl00_menu .subMenu a::after {
					content: none!important;
				}

			

			
			img {
				filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(126deg) brightness(105%) contrast(101%);
			}
	
		
		}
	}
}


.icon.envelope {
    display: flex;
    align-items: flex-start;
    gap: 10px !important;
    flex-direction: row;

	&::before{
		content: '\f1d8';
		display: block;
		width: 20px;
		font-family: "Font Awesome 6 Pro";
		position: relative;
		font-size: 16px;
		color: var(--white);
		font-weight: 300;
	}
}

#footer {
	background-color: var(--backgroundDark);
	margin-top: auto;

	#innerfooter {
		max-width: 1260px;
		width: calc(100% - 20px);
		margin: 0 auto;
	}
	.footer {
		padding: 40px 0;

		@media screen and (min-width: 768px) {
			padding: 90px 0;
		}

		.footer-wrapper {
			/* display: flex;
			
			justify-content: space-between; */
	
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(326px, 1fr));
			grid-template-rows: auto;
			row-gap: 80px;
	
			@media screen and (max-width: 600px) {
				display: flex;
				flex-direction: column;
				gap: 80px;
			}
	
			@media screen and (min-width: 1024px) {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
			}
	
			* {
				color: var(--white);
			}
	
			
	
			.footer-container {
				max-width: 326px;
	
				div.footer-list, span, ul {
					margin: unset;
					list-style-type: none;
					padding-left: unset;
	
					a {
						text-decoration: none;
						color: var(--white);
						border-bottom: 1px solid transparent;
						transition: all 0.3s ease-in-out;
	
						&:hover {
							border-bottom: 1px solid var(--white);
							transition: all 0.3s ease-in-out;
						}
					}
	
					div, span, li {
						&.icon {
							display: flex;
							align-items: center;
							gap: 10px;
							&::before {
								content: '';
								display: block;
								width: 20px;
								font-family: "Font Awesome 6 Pro";
								position: relative;
								font-size: 16px;
								color: var(--white);
								font-weight: 300 !important;
							}
	
							&.location {
								&::before {
									content: '\f3c5';
								}
							}
	
							&.privacy {
								&::before {
									content: '\e3a6';
								}
							}
							&.informatie {
								&::before {
									content: '\f05a';
								}
							}

						}
					}
				}
	
				/* &.right {
					@media screen and (min-width: 1024px) {
						margin-top: 57px;
						
					}
				} */
			}
		}
	}
}


.column__spacing {
	display: flex;
	flex-direction: column;

	&.gap-10 {
		gap: 10px;
	}

	&.gap-12 {
		gap: 12px;
	}

	&.gap-20 {
		gap: 20px;
	}

	&.gap-24 {
		gap: 24px;
	}

	&.gap-40 {
		gap: 40px;
	}
}

#innerfooter .footer{
	font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    font-variation-settings: "wdth" 100;
	h2{
		margin: 0;
		font-size: 1.5625rem;
	}
}