/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


@font-face {
	font-family: "Vintage fair";
	src: url('../fonts/vintage_fair.woff2');
	src: url("../fonts/vintage_fair.woff2") format("woff2"),
		 url("../fonts/vintage_fair.woff") format("woff"),
		 url("../fonts/vintage_fair.ttf") format("truetype");
	font-display: swap;
}
:root {
	--cnvs-themecolor: #ED7B7B;
	--cnvs-themecolor-rgb: 34, 34, 34;
	
	--cnvs-color1: #ED7B7B;
	--cnvs-color2: #ED7B7B;
	--cnvs-color3: #ED7B7B;
	--cnvs-header-sticky-bg: #000;
	--cnvs-body-font: 'Roboto', sans-serif;
	--cnvs-primary-font: 'Vintage fair', serif;

	--cnvs-body-bg: #ffffd2;
}

::selection {
	color: var(--cnvs-header-sticky-bg);
  }
  
.cnvs-hamburger .cnvs-hamburger-inner, .cnvs-hamburger .cnvs-hamburger-inner::before, .cnvs-hamburger .cnvs-hamburger-inner::after {
    background-color: var(--cnvs-color1);
}
.cnvs-hamburger {
    --cnvs-hamburger-size: 2rem;
    --cnvs-hamburger-width: 6px;
}
.cursor-pointer {
	cursor: pointer;
}
body,
#wrapper,
.css3-spinner,
#header.dark.sticky-header.transparent-header #header-wrap:not(.not-dark) {
	background-color: var(--cnvs-body-bg); 
}
span.display-2,span.display-3 {
	position: relative;
}

span.display-2::before,
span.display-2::after,
span.display-3::before,
span.display-3::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 40px;
	background: url(../images/star.svg);
	background-size: cover;
	background-repeat:no-repeat;
	left: -35px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .8;
}
span.display-2::after,
span.display-3::after {
	left: auto;
	right: -30px;
	transform: translateY(-50%);
}
img {
    width: 100%;
}
.button {
	position: relative;
	box-shadow: 0 0 3px rgba(0,0,0,.2);
	border-radius: 2px;
	top: 0;
}
.button:hover {
    opacity: 1 !important;
	top: -5px;
	transition: all 200ms ease-in-out;
}
.button::before, .button::after {
	content: "";
	width: 50px;
	height: 40px;
	clip-path: polygon(50% 0%, 100% 0, 51% 48%, 100% 100%, 0 100%, 0% 60%, 0 0);
	background-color: #d36e6e;
	position: absolute;
	right: -25px;
	bottom: -10px;
	z-index: -1;
}
.button::after {
	left: -25px;
	right: auto;
	transform: rotate(180deg);
} 
.hero-title {
    margin-top: -36px;
    font-size: clamp(48px, 7rem, 126px);
}
.hero-date {
	margin-top: -40px;
}
.hero-subtitle {
    font-size: clamp(36px, 6vw, 60px);
}
@media (max-width: 991.98px){
	div#header-wrap a.menu-link {
		font-size: 2rem;
		line-height: 3rem;
	}
	.hero-title {
		margin-top: -20px;
		font-size: clamp(48px, 3rem, 126px);
	}
	.hero-date {
		margin-top: -10px;
	}
	.primary-menu .menu-link {
		color: var(--cnvs-color1) !important;
	}
	.responsive-sticky-header {
		position: fixed !important;
		bottom: 0;
		left: 0;
		z-index: 99999;
		width: 100%;
	}
}
.responsive-sticky-header.dark #header-wrap { background-color: transparent }

.sticky-header .menu-link {
    color: var(--cnvs-color1) !important;
}
.programma-item .time {
	border-right: #000 solid 1px;
	min-width: 100px;
	text-align: right;
    padding-right: 10px;
}
.dark #header-wrap:not(.not-dark) .menu-container:not(.header-button) > .menu-item.current > .menu-link,
.dark #header-wrap:not(.not-dark) .menu-container:not(.header-button) > .menu-item:hover > .menu-link,
.gradient-text {
	background: -webkit-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: -o-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.gradient-underline {
	font-family: var(--cnvs-primary-font);
	background-image: -webkit-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background-image: -o-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background-image: linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
	background-position: 0 88%;
}

.button-effect::after {
	content:  '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border: 2px solid #FFF;
	-webkit-transform: translate(3px, 3px);
	transform: translate(3px, 3px);
	-webkit-transition: -webkit-transform .15s ease-out;
	transition: transform .15s ease-out;
}

.button-effect:hover::after {
	 -webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
}

/* .device-sm .gradient-underline,
.device-xs .gradient-underline { background-image: none; } */

.button.button-xxlarge {
	padding: 0 44px;
	font-size: 20px;
	height: 72px;
	line-height: 70px;
}

.button-effect,
.button.button-gradient-hover:hover,
.button.button-gradient {
	background: -webkit-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: -o-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
}

.button.button-gradient:hover { opacity: .9; }

.gradient-bg {
	position: relative;
	padding: 4px;
}

.gradient-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: -o-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
	background: linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
}

.gradient-bg * {
	position: relative;
	z-index: 2;
}

.card-columns .team {
	display: inline-block;
	width: 100%;
	margin-bottom: 40px;
	transition: opacity .25s ease;
}

.card-columns:hover .team:not(:hover) { opacity: .3; }

.team-image {
	width: 100%;
	margin-left: auto;
	border-radius: 1000px;
    overflow: hidden;
    border: solid 8px;
	aspect-ratio: 1/1;
}
.team:nth-of-type(even) .team-image{
	border-color: var(--cnvs-color1);
}
.team:nth-of-type(odd) .team-image{
	border-color: #000;
}
.team-image img {
	aspect-ratio: 1/1;
}

.team-desc {
	width: 100%;
	text-align: left;
	transition: transform .2s ease-out;
}

.team-title span {
	font-style: normal;
	color: #AAA;
}

.team:hover .team-desc { transform: scale(1.05); }

.joinspeaker .team-image i {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 60px;
	transform: translate(-50%,-50%);
}

.device-xs .display-2 { font-size: 48px; }

#section-location .container-bg {
	position: relative;
	bottom: -2px;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,1) 100%);
}

#section-location .container-bg .container { padding: 150px 0; }


@media (min-width: 992px) {

	.menu-link {
		font-size: 16px;
	}

	.about-img > div {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 75%;
		transform: rotate(15deg);
	}

	.about-img > div + div {
		top: 130px;
		left: 0;
		right: auto;
		z-index: 0;
		transform: rotate(-11deg);
	}

	#section-location #headquarters-map {
		position: -webkit-sticky !important;
		position: sticky !important;
	}

	footer .footer-widgets-wrap { padding: 100px 0; }

	.dark .widget_links li a,
	.dark .widget_meta li a {
		font-size: 15px;
		line-height: 1.8;
		color: #FFF;
	}

}

@media (max-width: 991.98px) {

	#header.transparent-header.responsive-sticky-header #header-wrap {
		background-color: #000;
		border-bottom-color: rgba(255,255,255,0.2);
	}

	.menu-item > .button-effect {
		background: -webkit-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
		background: -o-linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
		background: linear-gradient( 280deg, var(--cnvs-color1) 12.08%, var(--cnvs-color2) 53.53%, var(--cnvs-color3) 95.62% );
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		border-top: 1px solid rgba(255,255,255,0.1) !important;
	}

	.menu-item > .button-effect::after { display: none; }

}
.devider {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 0;
}

.swiper  img {
    width: 100%;
}
footer {
	background-image: url('../images/kermis-berghem-achtergrond-footer.svg') !important;
	background-color: var(--cnvs-body-bg); 
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
}
.social-icon i {
    color: #fff;
}
.social-icon {
    --cnvs-socialicon-size: 4.5rem;
    --cnvs-socialicon-fontsize: calc( var(--cnvs-socialicon-size) / 2.5);
    width: var(--cnvs-socialicon-size);
    height: var(--cnvs-socialicon-size);
    font-size: var(--cnvs-socialicon-fontsize);
}

@media (max-width: 991.98px) {
	footer {
		margin-bottom: 30px;
	}
	#gotoTop {
		display: none;
	}
}
.toggle  {
	border-bottom: 1px solid rgb(0, 0, 0, .2);
}
.toggle i {
	height: fit-content;
	transition: all 200ms ease-in-out;
}
.toggle-active i {
	transform: rotate(180deg);
}