/*

Theme Name: 8create
Theme URI: https://www.8create.digital
Version: 1.3.4
Description: 8create child theme
Author: 8create
Author URI: https://www.8create.digital
Template: Divi

*/

/*
global vars
*/

:root {
	/* global */
	--global-page-width: 1300px;
	--global-font-family: 'FiraCode', sans-serif;
	--global-drag-cursor: default;
	/* colors */
	--color1: #000; /* black */
	--color2: #fff; /* white */
	--color3: #45247A; /* flieder*/
	--color4: #FEC300; /* gelb */
	--color5: #4EA5B1; /* petrol */
	/* headline */
	--headline-font-family: 'Bagnard', sans-serif;
	--headline-color: var(--color3);
	--headline-h1-font-size: clamp(48px, 10vw + 0.6rem, 108px);
	--headline-h2-font-size: clamp(28px, 5vw + 0.6rem, 61px);
	--headline-h3-font-size: clamp(25px, 3vw + 0.6rem, 49px);
	--headline-h4-font-size: clamp(22px, 2vw + 0.6rem, 39px);
	/* text */
	--text-color-dark: var(--color3);
	--text-color-light: var(--color2);
	--text-font-size: clamp(14px, 1vw + 0.6rem, 16px);
	/* primary button dark */
	--button-padding: 18px 30px;
	--button-fontfamily: 'FiraCode', sans-serif;
	--button-font-size: var(--text-font-size);
	--button-background: var(--color4);
	--button-background-hover: var(--color4);
	--button-color: var(--color3);
	--button-color-hover: var(--color3);
	--button-border: 2px solid transparent;
	--button-border-radius: 40px;
	/* secondary button dark */
	--button-sec-background: var(--color2);
	--button-sec-background-hover: var(--color3);
	--button-sec-color: var(--color3);
	--button-sec-color-hover: var(--color2);
	--button-sec-border: 2px solid var(--color3);
	/* secondary button light */
	--button-sec-lig-background: transparent;
	--button-sec-lig-background-hover: var(--color4);
	--button-sec-lig-color: var(--color4);
	--button-sec-lig-color-hover: var(--color3);
	--button-sec-lig-border: 2px solid var(--color4);
	/* menu */
	--menu-font-family: 'Bagnard', sans-serif;
	--menu-lvl1-font-size: clamp(28px, 2vw + 0.6rem, 39px);
	--menu-lvl1-line-height: clamp(42px, 4vw + 0.6rem, 78px);
	--menu-lvl2-font-size: clamp(15px, 1vw + 0.4rem, 20px);
	--menu-lvl2-line-height: clamp(30px, 2vw + 0.4rem, 40px);
	/* form */
	--form-font-size: var(--text-font-size);
	--form-field-padding: var(--button-padding);
	--form-field-color: var(--color3);
	--form-field-background: transparent;
	--form-field-border-width: 2px;
	--form-field-border: var(--form-field-border-width) solid var(--color3);
	--form-field-border-radius: var(--button-border-radius);
	--form-field-placeholder-color: rgba(69, 36, 122, 0.5);
	--form-field-height: 62px;
}

/*
fonts
*/

@font-face {
	font-family: 'Bagnard';
	src: url('/wp-content/themes/8create/fonts/Bagnard.otf') format('opentype');
}

@font-face {
	font-family: 'FiraCode';
	src: url('/wp-content/themes/8create/fonts/FiraCode.ttf') format('truetype');
}

body .et_pb_module {
	font-family: var(--global-font-family);
}

.et_pb_module.et_pb_bg_layout_light {
	color: var(--text-color-dark);
}

.et_pb_module.et_pb_bg_layout_dark {
	color: var(--text-color-light);
}

.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6 {
	font-family: var(--headline-font-family);
	color: var(--headline-color);
}

.et_pb_module h1 {
	font-size: var(--headline-h1-font-size);
	line-height: 100%;
}

.et_pb_module h2 {
	font-size: var(--headline-h2-font-size);
	line-height: 95%;
}

.et_pb_module h3 {
	font-size: var(--headline-h3-font-size);
	line-height: 100%;
}

.et_pb_module h4 {
	font-size: var(--headline-h4-font-size);
	line-height: 105%;
}

.et_pb_module p {
	font-size: var(--text-font-size);
	line-height: 145%;
}

.et_pb_module.large p {
	font-size: clamp(16px, 1vw + 0.6rem, 18px);
	line-height: 145%;
}

.et_pb_module.small p {
	font-size: clamp(10px, 1vw + 0.6rem, 12px);
	line-height: 145%;
}

/*
buttons
*/

/* primary dark */

.et_pb_module .et_pb_button {
	border: var(--button-border);
	border-radius: var(--button-border-radius);
	background-color: var(--button-background);
	color: var(--button-color);
	font-size: var(--button-font-size);
	line-height: 1em !important;
	padding: var(--button-padding);
}

.et_pb_module .et_pb_button:hover {
	padding: var(--button-padding);
	border: var(--button-border);
	color: var(--button-color-hover);
	background-color: var(--button-background-hover);
}

.et_pb_module .et_pb_button:after {
	display: none;
}

/* secondary dark */

.et_pb_module .et_pb_button.secondary {
	border: var(--button-sec-border);
	background-color: var(--button-sec-background);
	color: var(--button-sec-color);
}

.et_pb_module .et_pb_button.secondary:hover {
	border: var(--button-sec-border);
	background-color: var(--button-sec-background-hover);
	color: var(--button-sec-color-hover);
}

/* secondary light */

.et_pb_module .et_pb_button.secondary.light {
	border: var(--button-sec-lig-border);
	background-color: var(--button-sec-lig-background);
	color: var(--button-sec-lig-color);
}

.et_pb_module .et_pb_button.secondary.light:hover {
	border: var(--button-sec-lig-border);
	background-color: var(--button-sec-lig-background-hover);
	color: var(--button-sec-lig-color-hover);
}

/* inline buttons within section/row/column */

.inline_buttons .et_pb_button_module_wrapper {
	display: inline-block;
	vertical-align: middle;
	margin: 0 20px 0 0;
}

.inline_buttons.right .et_pb_button_module_wrapper {
	margin: 0 0 0 20px;
}

/* burger buttons */

.et_pb_module .et_pb_button.ec_burger,
.et_pb_module .et_pb_button.ec_burger_close {
	font-family: 'ETmodules';
	font-size: 30px;
	padding: 12px 11px 10px 11px;
}

.et_pb_module .et_pb_button.ec_burger:hover,
.et_pb_module .et_pb_button.ec_burger_close:hover {
	font-family: 'ETmodules';
	font-size: 30px;
	padding: 12px 11px 10px 11px;
}

.et_pb_module .et_pb_button.ec_burger {
	background: var(--color2);
	color: var(--color3);
}


.et_pb_module .et_pb_button.ec_burger:hover {
	background: var(--color2);
	color: var(--color3);
	/*transform: rotate(180deg)*/
}

.et_pb_module .et_pb_button.ec_burger_close {
	background: transparent;
	color: var(--color2);
	border-color: var(--color2);
}

.et_pb_module .et_pb_button.ec_burger_close:hover {
	background: transparent;
	color: var(--color2);
	border-color: var(--color2);
}

/*
links
*/

.et_pb_module.et_pb_text.et_pb_bg_layout_light a {
	/*text-decoration: underline;*/
	color: var(--color5);
}

.et_pb_module.et_pb_text.et_pb_bg_layout_light a {
}

.et_pb_module.et_pb_text.et_pb_bg_layout_dark a {
}

/*
navigation & menu
*/

.ec_burger_menu {
	/*visibility: hidden;
	opacity: 0;
	transition: visibility 0.5s, opacity 0.5s;*/
	display: none;
	overflow-y: scroll;
}

.ec_burger_menu.active {
	/*visibility: visible;
	opacity: 1;*/
	display: block;
}

.ec_burger_menu .current-menu-parent > a,
.ec_burger_menu .current-menu-item > a {
	color: var(--color4) !important;
}

.ec_menu_vertical {
	background-color: transparent !important;
	overflow-y: scroll;
	margin: 0 !important;
}

.ec_menu_vertical ul {
	width: 100% !important;
	padding: 0 !important;
	position: relative !important;
	top: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	flex-direction: column !important;
	border-top: 0 !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	margin: 0 !important;
}

.ec_menu_vertical li {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ec_menu_vertical li a {
	color: var(--color2) !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ec_menu_vertical li a:hover {
	color: var(--color4) !important;
	opacity: 1 !important;
}

.ec_menu_vertical ul.nav > li > a {
	font-family: var(--menu-font-family);
	font-size: var(--menu-lvl1-font-size);
	line-height: var(--menu-lvl1-line-height) !important;
}

.ec_menu_vertical .submenu_animation ul.sub-menu {
	padding: 0 0 0 30px !important;
}

.ec_menu_vertical .submenu_animation ul.sub-menu {
	height: 0;
	overflow: hidden;
	transition: height 0.5s;
}

.ec_menu_vertical ul.sub-menu > li > a {
	font-size: var(--menu-lvl2-font-size) !important;
	line-height: var(--menu-lvl2-line-height);
}

.ec_menu_vertical .menu-item-has-children > a:first-child:after {
	display: none;
}

/*
forms
*/

.ec_gform input[type="text"],
.ec_gform input[type="email"],
.ec_gform select  {
	width: 100% !important;
	font-size: var(--form-font-size) !important;
	padding: var(--form-field-padding) !important;
	color: var(--form-field-color);
	background-color: var(--form-field-background);
	border: var(--form-field-border);
	border-radius: var(--form-field-border-radius);
	line-height: 1em !important;
	height: var(--form-field-height);
}

.ec_gform select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ec_gform input[type="submit"] {
	width: 100% !important;
	cursor: pointer;
	border: var(--button-border);
	border-radius: var(--button-border-radius);
	background-color: var(--button-background);
	color: var(--button-color);
	font-size: var(--button-font-size);
	padding: var(--button-padding);
	line-height: 1em !important;
	height: var(--form-field-height);
}

.ec_gform input[type="submit"]:hover {
	padding: var(--button-padding);
	border: var(--button-border);
	color: var(--button-color-hover);
	background-color: var(--button-background-hover);
}

.ec_gform ::placeholder {
	color: var(--form-field-placeholder-color);
	opacity: 1;
}

.ec_gform :-ms-input-placeholder {
	color: var(--form-field-placeholder-color);
}

.ec_gform ::-ms-input-placeholder {
	color: var(--form-field-placeholder-color);
}

.ec_gform .gform_footer {
	align-items: center;
}

.ec_gform .gform_ajax_spinner {
	margin-left: 10px;
}

.ec_gform_wrapper .gform_validation_errors {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.ec_gform_wrapper .gform_validation_errors .gform-icon--close:before {
	display: none;
}

.ec_gform_wrapper .gform_validation_errors > h2 {
	font-family: var(--global-font-family) !important;
	font-size: var(--text-font-size) !important;
	line-height: 150% !important;
}

.ec_gform .gfield_error [aria-invalid=true] {
	border-width: var(--form-field-border-width) !important;
}

.ec_gform .gfield_validation_message,
.ec_gform .validation_message {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

/*
ec_drag_slider
*/

.ec_drag_slider {
	white-space: nowrap;
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	overflow-x: scroll !important;
	cursor: var(--global-drag-cursor);	
}

.ec_drag_slider::-webkit-scrollbar {
    display: none;
}

.ec_drag_slider .et_pb_row {
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
}

.ec_drag_slider .et_pb_row:first-child {
	margin-left: calc(50vw - (var(--global-page-width) / 2));
}

.ec_drag_slider .et_pb_module {
	white-space: initial;
}

.ec_drag_slider.col3 .et_pb_row {
	width: calc(var(--global-page-width) / 3 - 30px);
	margin-right: 30px;
}

.ec_drag_slider img {
	aspect-ratio: 5 / 6;
	object-fit: cover;
}

/* TODO:  change max-width to [global_page_width * 1,25] */
@media (max-width: 1625px) {
	.ec_drag_slider .et_pb_row:first-child {
		margin-left: 10%;
	}
}

@media (max-width: 767px) {
	.ec_drag_slider.col3 .et_pb_row {
		width: 66%;
	}
}

/*
general
*/

.et_pb_row {
	max-width: var(--global-page-width);
}

.scrollblock {
	overflow: hidden;
}


/* tablet */

@media (max-width: 980px) {
	.ec_navigation {
		display: flex;
		justify-content: space-between;
	}

	.ec_navigation .et_pb_column {
		float: none;
	}

	/* oprn menu on mobile, no burger */

	.ec_mobile_menu_open .et_pb_menu__wrap {
		justify-content: normal;
	}

	.ec_mobile_menu_open .et_pb_menu__menu {
		display: flex!important;
	}
	.ec_mobile_menu_open .et_mobile_nav_menu {
		display: none!important;
	}
}

/*
custom styles
*/

/* global adaptions */

.ec_menu_vertical ul.nav > li {
	padding-bottom: 10px !important;
}

.ec_burger_menu .sub-menu .current-menu-item > a {
	color: var(--color2) !important;
}

.ec_drag_slider .et_pb_image_wrap {
	box-shadow: 0px 4.00417px 8.00833px rgba(136, 136, 136, 0.35), 0px 16.0167px 20.0208px rgba(136, 136, 136, 0.2);
}

/* divi fixes */

@media (max-width: 980px) {
	.et_pb_row .et_pb_column.et_pb_column_1_4 {
		margin-bottom: 30px;
	}
}

/* buttons */

.et_pb_module .et_pb_button:hover {
	box-shadow: 0px 4px 8px rgba(249, 176, 0, 0.4), 0px 16px 20px rgba(254, 195, 0, 0.25);
}

.et_pb_module .et_pb_button.secondary:hover {
	box-shadow: 0px 4px 8px rgba(96, 66, 188, 0.4), 0px 16px 20px rgba(96, 66, 188, 0.2);
}

.et_pb_module .et_pb_button.secondary.light:hover {
	box-shadow: 0px 4px 8px rgba(249, 176, 0, 0.4), 0px 16px 20px rgba(254, 195, 0, 0.25)
}

.et_pb_module .et_pb_button.secondary.white {
	border: 2px solid var(--color2);
	background-color: transparent;
	color: var(--color2);
}

.et_pb_module .et_pb_button.secondary.white:hover {
	border: 2px solid var(--color2);
	background-color: var(--color2);
	color: var(--color3);
	box-shadow: none;
}

.et_pb_module .et_pb_button.ec_burger:hover,
.et_pb_module .et_pb_button.ec_burger_close:hover {
	box-shadow: none;
}

.et_pb_module .et_pb_button.ec_icon_button {
	font-family: 'ETmodules';
	font-size: 30px;
	background: var(--color4);
	color: var(--color3);
	padding: 12px 11px 10px 11px;
}

.et_pb_module .et_pb_button.ec_icon_button:hover {
	background: var(--color4);
	color: var(--color3);
	box-shadow: none;
}

.et_pb_module .et_pb_button.ec_burger.dark {
	background: var(--color3);
	color: var(--color2);
}


.et_pb_module .et_pb_button.ec_burger.dark:hover {
	background: var(--color3);
	color: var(--color2);
}

/* font */

.et_pb_module p strong {
	font-weight: 800;
}

.et_pb_module h1 span,
.et_pb_module h2 span,
.et_pb_module h3 span,
.et_pb_module h4 span,
.et_pb_module h5 span,
.et_pb_module h6 span {
	position: relative;
}

.et_pb_module h1 span:after,
.et_pb_module h2 span:after,
.et_pb_module h3 span:after,
.et_pb_module h4 span:after,
.et_pb_module h5 span:after,
.et_pb_module h6 span:after {
	content: '';
	background-image: url(/wp-content/uploads/2022/07/line-yellow.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	position: absolute;
	height: 20px;
	width: 100%;
	bottom: -5px;
	left: 0;
	transform: rotate(1deg);
}

.et_pb_module h3 span:after {
	bottom: -10px;
}

.et_pb_module h1 span.yellow:after,
.et_pb_module h2 span.yellow:after,
.et_pb_module h3 span.yellow:after,
.et_pb_module h4 span.yellow:after,
.et_pb_module h5 span.yellow:after,
.et_pb_module h6 span.yellow:after {
	background-image: url(/wp-content/uploads/2022/07/line-yellow.svg);
}

.et_pb_module h1 span.purple:after,
.et_pb_module h2 span.purple:after,
.et_pb_module h3 span.purple:after,
.et_pb_module h4 span.purple:after,
.et_pb_module h5 span.purple:after,
.et_pb_module h6 span.purple:after {
	background-image: url(/wp-content/uploads/2022/07/line-purple.svg);
}

.et_pb_module h1 span.white:after,
.et_pb_module h2 span.white:after,
.et_pb_module h3 span.white:after,
.et_pb_module h4 span.white:after,
.et_pb_module h5 span.white:after,
.et_pb_module h6 span.white:after {
	background-image: url(/wp-content/uploads/2022/07/line-white.svg);
}

/* forms */

.ec_gform input[type="submit"] {
	transition: all 0.2s;
	font-weight: 500;
}

.ec_gform input[type="submit"]:hover {
	box-shadow: 0px 4px 8px rgba(249, 176, 0, 0.4), 0px 16px 20px rgba(254, 195, 0, 0.25);
}

.ec_gform .ginput_container_date {
	position: relative;
}

.ec_gform .ginput_container_date:after {
	content: '';
	width: 16px;
	height: 16px;
	background-image: url('/wp-content/uploads/2022/07/icon-calendar-purple.svg');
	position: absolute;
	right: 30px;
	z-index: -1;
}

.ec_burger_menu .ec_gform_wrapper.request_wrapper,
.ec_gform.request {
	width: 350px !important;
}

.ec_gform.request input {
	width: 100% !important;
}

.ec_burger_menu .ec_gform input[type="text"] {
	color: var(--color2);
	border-color: var(--color2);
}

.ec_burger_menu .ec_gform ::placeholder {
	color: rgba(255,255,255,0.5);
	opacity: 1;
}

.ec_burger_menu .ec_gform :-ms-input-placeholder {
	color: rgba(255,255,255,0.5);
}

.ec_burger_menu .ec_gform ::-ms-input-placeholder {
	color: rgba(255,255,255,0.5);
}

.ec_burger_menu .ec_gform .ginput_container_date:after {
	background-image: url('/wp-content/uploads/2022/07/icon-calendar.svg');
}

.footer_form .ec_gform input[type="submit"],
.footer_form .ec_gform input[type="submit"]:hover {
	border-color: var(--color3);
	background-color: var(--color3);
	color: var(--color4);
}

.footer_form .ec_gform input[type="submit"]:hover {
	box-shadow: 0px 4px 8px rgba(96, 66, 188, 0.4), 0px 16px 20px rgba(96, 66, 188, 0.2);
}

.footer_form .ec_gform.request {
	width: 100% !important;
	align-items: start;
}

@media (min-width: 1450px) {
	.footer_form .ec_gform.request {
		display: flex;
	}

	.footer_form .ec_gform.request .gform_fields {
		display: flex !important;
	}

	.footer_form .ec_gform.request .gform_footer {
		padding: 0 !important;
		margin: 0 0 0 10px !important;
	}
}

.ec_gform.contact .gfield .ginput_container {
	display: flex;
	align-items: center;
}

.ec_gform.contact .gfield .ginput_container:after {
	content: '';
	width: 16px;
	height: 16px;
	position: absolute;
	right: 30px;
	z-index: -1;
}

.ec_gform.contact .gfield.herberge .ginput_container:after {
	background-image: url('/wp-content/uploads/2022/07/icon-home.svg');
}

.ec_gform.contact .gfield.name .ginput_container:after {
	background-image: url('/wp-content/uploads/2022/07/icon-person.svg');
}

.ec_gform.contact .gfield.email .ginput_container:after {
	background-image: url('/wp-content/uploads/2022/07/icon-mail.svg');
}

/* accordion */

.et_pb_toggle_title {
	font-family: var(--global-font-family) !important;
	font-weight: 800;
	color: var(--text-color-dark) !important;
	line-height: 1.3em;
	font-size: var(--text-font-size);
}

.et_pb_toggle_title:before {
	content: '\e044';
	transition: all .3s ease-in-out;
}

.et_pb_toggle_content p {
	color: var(--text-color-dark) !important;
}

.et_pb_toggle {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	margin-bottom: 0 !important;
}

.et_pb_toggle:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.et_pb_toggle_open,
.et_pb_toggle_close {
	background-color: transparent;
	padding: 30px 0;
}


/* herbergen */

@media (min-width: 981px) {
	body:not(.et-fb) .et_pb_section.ec_herberge {
		position: absolute !important;
		top: 0;
		left: 0;
		min-height: 100vh;
		width: 100vw;
		z-index: 9999;
		display: none;
	}

	body:not(.et-fb) .et_pb_section.ec_herberge.active {
		display: block;
	}

	.ec_herberge .navigation span {
		vertical-align: middle;
		margin: 0 15px;
		width: 100px;
		display: inline-block;
		text-align: center;
		color: var(--color3);
	}

	.ec_herberge .navigation span:first-child {
		text-align: right;
	}

	.ec_herberge .navigation span:last-child {
		text-align: left;
	}

	.ec_herberge .navigation span a.prev img {
		transform: rotate(180deg);
	}

	body:not(.et-fb) .ec_herberge .et_pb_row {
		opacity: 0;
		transition: opacity 0.2s;
	}

	body:not(.et-fb) .ec_herberge .et_pb_row.active {
		opacity: 1;
	}
}

@media (max-width: 1200px) and (min-width: 981px) {
	.ec_herberge .content .et_pb_column {
		width: 50% !important;
	}

	.ec_herberge .content .et_pb_column:nth-child(2) {
		display: none;
	}
}

@media (max-width: 767px) {
	.ec_herberge {
		overflow-x: hidden;
	}

	.ec_herberge .et_pb_column {
		width: 100% !important;
	}
}

/* mobile column change */

@media all and (max-width: 980px) {
	/*** wrap row in a flex box ***/
	.custom_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	 
	/*** custom classes that will designate the order of columns in the flex box row ***/
	.first-on-mobile {
		-webkit-order: 1;
		order: 1;
	}
	 
	.second-on-mobile {
		-webkit-order: 2;
		order: 2;
	}
	 
	.third-on-mobile {
		-webkit-order: 3;
		order: 3;
	}
	 
	.fourth-on-mobile {
		-webkit-order: 4;
		order: 4;
	}
}

/* mobile */

@media (max-width: 767px) {
	.inline_buttons .et_pb_button_module_wrapper,
	.inline_buttons.right .et_pb_button_module_wrapper {
		display: block;
		margin: 0;
	}

	.inline_buttons .et_pb_button_module_wrapper a,
	.inline_buttons.right .et_pb_button_module_wrapper a {
		margin-bottom: 10px;
	}
}

@media (max-width: 479px) {
	.ec_icon_list .et_pb_column {
		width: 50% !important;
	}
}