/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* General Variables */
:root {
	--ob-orange: #e46809;
	--ob-gray-dark: #58585a;
	--ob-gray-light: #888888;
	
	--font-1: 'Outfit', sans-serif;
	--font-header: 'Outfit', sans-serif;
	--font-4: 'Outfit', sans-serif;
	
	--speed: 30s;
}


.elementor-widget-text-editor {
	p:last-of-type {
		margin-bottom: 0;
	}
}

/* Button: Hamburger */
#hamburger-icon {
	display: block;
	width: 20px;
	margin: 0 0 0 auto;
	cursor: pointer;

	span {
		display: block;
		background-color: var(--ob-orange);
		width: auto;
		height: 3px;
		margin-bottom: 6px;
		transition: 0.2s ease-in-out;
		
		&:first-of-type {
			margin-right: 10px;
		}

		&:last-of-type {
			margin-bottom: 0;
			margin-left: 10px;
		}
	}

	&.open {
		span:nth-child(1) {
			transform: translate(0, 9px) rotate(45deg);
			margin-right: 0;
		}

		span:nth-child(2) {
			opacity: 0;
		}

		span:nth-child(3) {
			transform: translate(0, -9px) rotate(-45deg);
			margin-left: 0;
		}
	}
}

.mobile-menu {
	transform: translate(100%, 0);
	
	&.active {
		transform: translate(0, 0);
	}
}

.wrapper-buttons {
	.elementor-widget-container {
		display: flex;
		justify-content: center;

		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 260px;
			height: 80px;
			position: relative;
			text-align: center;
			color: #fff;
			font-family: var(--font-4);
			font-size: 18px;
			background-color: var(--ob-orange);
			transition: background-color 150ms ease-in-out;
			@media only screen and (max-width: 768px) { 
				font-size: 18px;
			}
			
			&:hover {
				background-color: var(--ob-gray-light);
			}
			
			&:first-of-type {
				&:after {
					content: '';
					width: 1px;
					height: calc(100% - 20px);
					position: absolute;
					right: 0;
					background-color: #fff;
				}
			}
		}
	}
}

.scroll-down {
	position: absolute;
	right: 0;
	transform: rotate(90deg);
	@media only screen and (max-width: 1024px) { 
		right: -60px;
	}
	@media only screen and (max-width: 768px) { 
		display: flex;
		max-width: max-content !important;
		position: absolute;
		bottom: 70px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.elementor-widget-container {
		display: flex;
		align-items: center;
		animation: scrollDown 2s infinite;
		@media only screen and (max-width: 768px) {
			translateX(-50%);
			animation: scrollDownPhone 2s infinite;
		}
		span {
			display: block;
			margin-right: 16px;
			margin-top: -3px;
			font-family: var(--font-1);
			font-size: 20px;
			font-weight: 500;
			color: #fff;
			white-space: nowrap;
			@media only screen and (max-width: 768px) { 
			    margin-right: 0;
					font-size: 16px;
			}
		}

		svg {
			display: block;
			width: 20px;
			height: 20px;
			transform: rotate(-90deg);
			@media only screen and (max-width: 768px) { 
			    position: absolute;
				top: 30px;
				left: 50%;
				transform: rotate(0deg) translateX(-50%);
			}
		}
	}
}

@keyframes scrollDown {
	0% {
		transform: translate(0,0);
	}
	20% {
		transform: translate(10px,0);
	}
	40% {
		transform: translate(0,0);
	}
}
@keyframes scrollDownPhone {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(0deg) translateY(10px);
	}
	40% {
		transform: rotate(0deg);
	}
}

.header-menu {
	.e-con-inner {
		transition: all 300ms ease-in-out;
		
		img {
			transition: all 300ms ease-in-out;
		}
	}

	&.small {
		background-color: #fff !important;
		box-shadow: 0 0 10px rgba(0,0,0,0.15);

		.e-con-inner {
			padding-top: 10px;
			padding-bottom: 10px;

			img {
				max-width: 160px;
			}

			.logo-wit {
				display: none;
			}

			.logo-normal {
				display: block;
			}

			.elementor-nav-menu {
				.menu-item {
					a {
						color: var(--ob-gray-light);
						
						.sub-arrow {
							svg {
								fill: var(--ob-gray-light);
							}
						}
					}
					
					&:hover {
						> a {
							color: var(--ob-orange);

							.sub-arrow {
								svg {
									fill: var(--ob-orange);
								}
							}
						}
					}
				}
			}
			
			.sub-menu {
				padding-top: 0;
				
				&:before {
					display: none;
					border-color: var(--ob-gray-light);
				}
				
				.menu-item {
					a {
						padding-right: 20px;
						background-color: #ededed;
						color: var(--ob-gray-light);
					}
				}
			}
		}
	}

	.menu-item {
		a {
			@media only screen and (min-width: 1025px) and (max-width: 1300px) { 
				margin-left: 0 !important;
				margin-right: 0 !important;
			}
		}

		.elementor-item-active {
			.sub-arrow {
				svg path {
					fill: var(--ob-orange);
				}
			}
		}
	}
}


.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:first-child)>.scroll-down, 
.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:first-child)>.scroll-up, 
.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:first-child)>ul {
	left: auto !important;
	right: 50px;

	@media only screen and (min-width: 1025px) and (max-width: 1300px) { 
		right: 20px;
	}
}

.section-geheel-aanbod {
	&:before {
		content: '';
		position: absolute;
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		height: 60%;
		background-color: var(--ob-orange);
		@media only screen and (max-width: 768px) {
			height: 40%;
		}
	}
	
	.media-carousel-oranjeborch {
		.elementor-swiper-button {
			position: absolute;
			bottom: -16px;
			top: auto;
			@media only screen and (max-width: 768px) { 
				bottom: -76px;
			}

			&.elementor-swiper-button-prev {
				right: 70px;
				left: auto;
			}
			
			&.elementor-swiper-button-next {
				right: 0;
				left: auto;
			}
		}
	}
	
	.swiper-wrapper {
		.swiper-slide {
			cursor: url(https://oranjeborch.reddstone.nl/wp-content/themes/hello-elementor-child/images/icon-swipe.png) 20 20, auto;
		}
	}
	
	&.version-2 {
		&:before {
			top: 0;
			bottom: auto;
			@media only screen and (max-width: 768	px) { 
				height: 70%;
			}
		}
		
		.media-carousel-oranjeborch {
			.elementor-swiper-button {
				svg {
					path {
						fill: var(--ob-orange);
					}
				}
			}
		}
	}
}


.marquee {
	overflow: hidden;
	display: flex;

	h2 {
		white-space: nowrap;
	}
}


/* Background video / image */
.bg-video {
	display: none;
	
	&.show-bg-video-1 {
		display: block;
	}
}

.hide-bg-image-1 {
	display: none;
}

.height-100 {
	height: 100%;
}

.diensten-template {
	.elementor-element {
		.elementor-widget-text-editor {
			.elementor-widget-container {
				p:has(strong) {
					margin-bottom: 0;
				}
			}
		}
	}
}


/* Main menu */
#main-menu-desktop, #main-menu-mobile {
	.menu-item {
		&.phone {
			a {
				color: var(--ob-orange);
				font-weight: bold;
			}
		}
	}
	
	.sub-menu {
		display: none !important;
	}
}

#main-menu-mobile {
	.menu-item {
		&.phone {
			a {
				color: #fff;
				font-weight: bold;
			}
		}
	}
}


.peer-filters {
	button, select, input[type="number"] {
		border: 1px solid var(--ob-orange) !important;
//		border-right: 10px solid #fff !important;
	}
	
	button {
		background-color: #fff !important;
		color: var(--ob-orange) !important;
		transition: all 150ms ease-in-out;
		
		&:hover {
			background-color: var(--ob-orange) !important;
			color: #fff !important;
		}
	}
	
	select {
		appearance: none;
		background-image: url('images/icons/icon-caret-down-1.0.svg');
		background-size: 14px;
		background-position: 95% 50%;
		background-repeat: no-repeat;
		cursor: pointer;
	}
}


.quote-inner {
	br {
		@media only screen and (max-width: 768px) {
			display: none;
		}
	}
}



/* Icon animations */

.statements {
	.statement-1 {
		svg {
			.svg-elem-1 {
				stroke-dashoffset: 1018.2225341796875px;
				stroke-dasharray: 1018.2225341796875px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
			}

			.svg-elem-2 {
				stroke-dashoffset: 112.73295593261719px;
				stroke-dasharray: 112.73295593261719px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
			}

			.svg-elem-3 {
				stroke-dashoffset: 1430.4742431640625px;
				stroke-dasharray: 1430.4742431640625px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
			}

			.svg-elem-4 {
				stroke-dashoffset: 107.60000610351562px;
				stroke-dasharray: 107.60000610351562px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
			}

			.svg-elem-5 {
				stroke-dashoffset: 142.5px;
				stroke-dasharray: 142.5px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
			}

			.svg-elem-6 {
				stroke-dashoffset: 281.79998779296875px;
				stroke-dasharray: 281.79998779296875px;
				-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
				transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
			}
		}
	}
	
	.statement-2 {
		.svg-elem-1 {
			stroke-dashoffset: 628.162353515625px;
			stroke-dasharray: 628.162353515625px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
		}

		.svg-elem-2 {
			stroke-dashoffset: 1326.411376953125px;
			stroke-dasharray: 1326.411376953125px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
		}

		.svg-elem-3 {
			stroke-dashoffset: 737.4081420898438px;
			stroke-dasharray: 737.4081420898438px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
		}
	}
	
	.statement-3 {
		.svg-elem-1 {
			stroke-dashoffset: 1897.1341552734375px;
			stroke-dasharray: 1897.1341552734375px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
		}

		.svg-elem-2 {
			stroke-dashoffset: 315.43426513671875px;
			stroke-dasharray: 315.43426513671875px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
		}

		.svg-elem-3 {
			stroke-dashoffset: 248.0777130126953px;
			stroke-dasharray: 248.0777130126953px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
		}

		.svg-elem-4 {
			stroke-dashoffset: 248.07763671875px;
			stroke-dasharray: 248.07763671875px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
		}

		.svg-elem-5 {
			stroke-dashoffset: 383.9459533691406px;
			stroke-dasharray: 383.9459533691406px;
			-webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
			transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
		}
	}
	
	.statement-4 {
		.svg-elem-1 {
			stroke-dashoffset: 284.8208923339844px;
			stroke-dasharray: 284.8208923339844px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
		}

		.svg-elem-2 {
			stroke-dashoffset: 224.2925567626953px;
			stroke-dasharray: 224.2925567626953px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
		}

		.svg-elem-3 {
			stroke-dashoffset: 143.68235778808594px;
			stroke-dasharray: 143.68235778808594px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
		}

		.svg-elem-4 {
			stroke-dashoffset: 835.3515014648438px;
			stroke-dasharray: 835.3515014648438px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.18s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.18s;
		}

		.svg-elem-5 {
			stroke-dashoffset: 189.78558349609375px;
			stroke-dasharray: 189.78558349609375px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
		}

		.svg-elem-6 {
			stroke-dashoffset: 63.19999313354492px;
			stroke-dasharray: 63.19999313354492px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.30s;
		}

		.svg-elem-7 {
			stroke-dashoffset: 59.300697326660156px;
			stroke-dasharray: 59.300697326660156px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
		}

		.svg-elem-8 {
			stroke-dashoffset: 276.87945556640625px;
			stroke-dasharray: 276.87945556640625px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.42s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.42s;
		}

		.svg-elem-9 {
			stroke-dashoffset: 276.8795471191406px;
			stroke-dasharray: 276.8795471191406px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
		}

		.svg-elem-10 {
			stroke-dashoffset: 219.74522399902344px;
			stroke-dasharray: 219.74522399902344px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.56s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.56s;
		}

		.svg-elem-11 {
			stroke-dashoffset: 227.9476318359375px;
			stroke-dasharray: 227.9476318359375px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.02s;
		}

		.svg-elem-12 {
			stroke-dashoffset: 657.1067504882812px;
			stroke-dasharray: 657.1067504882812px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s;
		}

		.svg-elem-13 {
			stroke-dashoffset: 657.1787109375px;
			stroke-dasharray: 657.1787109375px;
			-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s;
			transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.14s;
		}
	}
	
	&.in-view {
		[class^="svg-elem-"], [class*=" svg-elem-"] {
			stroke-dashoffset: 0 !important;
		}
	}
}