/*

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

*/

/*
global vars
*/

:root {
	/* global */
	--global-page-width: 1080px;
	--global-font-family: 'Arial', sans-serif;
	--global-drag-cursor: default;
	/* colors */
	--color1: #000; /* black */
	--color2: #fff; /* white */
	--color3: #15183e; /* darkblue*/
	--color4: #86cccc; /* lightblue */
	--color5: #fee71e; /* yellow */
	--color-error: #c0392b;
	/* headline */
	--headline-font-family: 'Arial', sans-serif;
	--headline-color: var(--color3);
	--headline-h1-font-size: clamp(50px, 10vw + 0.6rem, 80px);
	--headline-h2-font-size: clamp(30px, 5vw + 0.6rem, 60px);
	--headline-h3-font-size: clamp(25px, 3vw + 0.6rem, 50px);
	--headline-h4-font-size: clamp(20px, 2vw + 0.6rem, 40px);
	/* text */
	--text-color-dark: var(--color3);
	--text-color-light: var(--color2);
	--text-font-size: clamp(16px, 1vw + 0.6rem, 18px);
	--text-font-size-large: clamp(18px, 1vw + 0.6rem, 20px);
	--text-font-size-small: clamp(14px, 1vw + 0.6rem, 16px);
	/* primary button dark */
	--button-padding: 18px 30px;
	--button-fontfamily: 'Arial', sans-serif;
	--button-font-size: var(--text-font-size);
	--button-background: var(--color3);
	--button-background-hover: var(--color4);
	--button-color: var(--color2);
	--button-color-hover: var(--color3);
	--button-border: 2px solid transparent;
	--button-border-radius: 50px;
	--button-transistion: 0.3s;
	/* primary button light */
	--button-lig-background: var(--color4);
	--button-lig-background-hover: var(--color5);
	--button-lig-color: var(--color2);
	--button-lig-color-hover: var(--color2);
	--button-lig-border: 2px solid var(--color4);
	--button-lig-border-hover: 2px solid var(--color5);
	/* 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);
	/* form */
	--form-font-size: var(--text-font-size);
	--form-field-padding: 20px;
	--form-field-color: var(--color3);
	--form-field-background: transparent;
	--form-field-border-width: 1px;
	--form-field-border: var(--form-field-border-width) solid var(--color3);
	--form-field-border-radius: 5px;
	--form-field-placeholder-color: rgba(0, 0, 0, 0.3);
	--form-field-height: 62px;
	--form-dropdown-arrow-size: 6px;
	/* ec_drag_slider */
	--ec-drag-slider-cursor: normal; /* url('') 45 45, auto; */
	--ec-drag-slider-gap: 50px;
	--ec-drag-slider-img-ratio: 1 / 1;

	/* IMPORTANT: search also for "ADAPTION NEEDED" and do respective style changes */
}

/*
general
*/

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

.scrollblock {
	overflow: hidden;
}

/*
fonts
*/

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

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

body,
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,
.et_pb_module ul {
	font-size: var(--text-font-size);
	line-height: 145%;
}

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

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

/*
buttons
*/

/* global */

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

/* 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);
	transition: all var(--button-transistion);
}

.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);
}

/* primary light */

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

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

/* 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 !important;
}

/* burger buttons */

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

.et_pb_module .et_pb_button.burger:hover,
.et_pb_module .et_pb_button.burger_close:hover {
	font-family: 'ETmodules';
	font-size: 30px;
	padding: 12px 11px 10px 11px;
	background: var(--color4);
	color: var(--color3);
/*	transform: rotate(180deg)*/
}

/*
links
*/

.et_pb_module.et_pb_text.et_pb_bg_layout_light a {
	color: var(--color3);
	border-bottom: 1px solid var(--color3);
}

.et_pb_module.et_pb_text.et_pb_bg_layout_dark a {
	color: var(--color4);
	border-bottom: 1px solid var(--color4);
}

/*
navigation & menu
*/

.burger_menu {
	display: none;
	overflow-y: scroll;
}

.burger_menu.active {
	display: block;
}

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

	.navigation .et_pb_column {
		float: none;
	}
}

/*
forms
*/

.gform_wrapper label.gfield_label,
.gform_wrapper legend {
	font-size: var(--text-font-size-small) !important;
	font-weight: normal !important;
	color: var(--text-color-dark);
}

.gform_wrapper label a {
	color: var(--color3);
	border-bottom: 1px solid var(--color3);
}

.gform_wrapper .gfield_required .gfield_required_text {
	font-size: var(--text-font-size-small);
	font-style: normal;
	color: var(--color-error);
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea  {
	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);
}

.gform_wrapper textarea  {
	resize: none;
}

.gform_wrapper select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	background-image:
	linear-gradient(135deg, var(--color3)  50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, var(--color3) 50%);
  background-position:
    calc(100% - var(--form-field-padding)) 50%,
    calc(100% - var(--form-field-padding) - var(--form-dropdown-arrow-size)) 50%;
  background-size:
    var(--form-dropdown-arrow-size) var(--form-dropdown-arrow-size),
    var(--form-dropdown-arrow-size) var(--form-dropdown-arrow-size);
  background-repeat: no-repeat;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
	line-height: 2em;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
	font-size: var(--form-font-size) !important;
	color: var(--color3);
}

.gform_wrapper input[type="submit"] {
	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);
	transition: all var(--button-transistion);
}

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

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

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

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

.gform_wrapper .gform_ajax_spinner {
	margin-left: 20px;
}

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

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

.gform_wrapper .gform_validation_errors > h2 {
	font-family: var(--global-font-family) !important;
	font-size: var(--text-font-size) !important;
	line-height: 150% !important;
	color: var(--color-error);
	font-weight: bold;
}

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

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	border: none !important;
	background: none !important;
	padding: 0 !important;
	color: var(--color-error);
}

.gform_wrapper .gfield_error [aria-invalid=true] {
	border-color: var(--color-error);
}

/*
ec_drag_slider
*/

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

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

.ec_drag_slider .et_pb_row {
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
	margin-right: var(--ec-drag-slider-gap);
}

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

/* 1 column: */
.ec_drag_slider .et_pb_row {
	width: calc(var(--global-page-width) - var(--ec-drag-slider-gap));
}

/* 2 columns */
.ec_drag_slider.col2 .et_pb_row {
	width: calc(var(--global-page-width) / 2 - var(--ec-drag-slider-gap));
}

/* 3 columns */
.ec_drag_slider.col3 .et_pb_row {
	width: calc(var(--global-page-width) / 3 - var(--ec-drag-slider-gap));
}

/* 4 columns */
.ec_drag_slider.col4 .et_pb_row {
	width: calc(var(--global-page-width) / 4 - var(--ec-drag-slider-gap));
}

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

/* same image height with aspect ratio */
.ec_drag_slider.equalimg img {
	aspect-ratio: var(--ec-drag-slider-img-ratio);
	object-fit: cover;
}

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

@media (max-width: 767px) {
	.ec_drag_slider .et_pb_row:first-child {
		margin-left: 10%;
	}

	.ec_drag_slider .et_pb_row {
		width: 66% !important;
	}
}

/*
global tablet
*/

@media (max-width: 980px) {

	/* open menu elements on mobile instead of 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;
	}
}