/*

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

*/

/*
global vars
*/

:root {
	/* global */
	--global-page-width: 2560px;
	--global-content-width: 1280px;
	--global-font-family: 'Campton', sans-serif;
	/* colors */
	--color-green: #9EBE8A; /* green */
	--color-green-dark: #556B48; /* green dark */
	--color-blue: #208DAB; /* blue */
	--color-blue-dark: #17738C; /* blue dark */
	--color-blue-alpha: rgba(32, 141, 171, 0.25); /* blue alpha */
	--color-white: #ffffff; /* white */
	--color-grey: #4A4949; /* grey */
	--color-error: #E40400; /* red */
	/* headline */
	--headline-font-family: 'Campton Bold', sans-serif;
	--headline-color: var(--color-grey);
	--headline-hero-font-size: clamp(54px, 7vw + 0.6rem, 64px);;
	--headline-h1-font-size: clamp(45px, 7vw + 0.6rem, 55px);
	--headline-h2-font-size: clamp(30px, 5vw + 0.6rem, 40px);
	--headline-h3-font-size: clamp(24px, 3vw + 0.6rem, 24px);
	--headline-h4-font-size: clamp(24px, 2vw + 0.6rem, 24px);
	--headline-h5-font-size: clamp(24px, 2vw + 0.6rem, 24px);
	--headline-h6-font-size: clamp(24px, 2vw + 0.6rem, 24px);
	/* text */
	--text-color-dark: var(--color-grey);
	--text-color-light: var(--color-white);
	--text-font-size: clamp(16px, 1.5vw + 0.6rem, 18px);
	--text-font-size-large: clamp(18px, 2vw + 0.6rem, 20px);
	--text-font-size-small: clamp(14px, 2vw + 0.6rem, 16px);
	--text-font-size-smallest: clamp(12px, 2vw + 0.6rem, 14px);
	--text-font-size-tiny: clamp(10px, 2vw + 0.6rem, 12px);;
	/* primary button dark */
	--button-padding: 17px 50px 14px 24px;
	--button-fontfamily: 'Campton', sans-serif;
	--button-font-size: var(--text-font-size);
	--button-background: var(--color-green);
	--button-background-hover: var(--color-green);
	--button-color: var(--color-white);
	--button-color-hover: var(--color-white);
	--button-border: 0px solid transparent;
	--button-border-radius: 50px;
	--button-transistion: 0.3s;
	/* primary button light */
	--button-lig-background: transparent;
	--button-lig-background-hover: transparent;
	--button-lig-color: var(--color-white);
	--button-lig-color-hover: var(--color-white);
	--button-lig-border: 2px solid var(--color-white);
	--button-lig-border-hover: 2px solid var(--color-white);
	/* secondary button dark */
	--button-sec-background: var(--color-blue);
	--button-sec-background-hover: var(--color-blue);
	--button-sec-color: var(--color-white);
	--button-sec-color-hover: var(--color-white);
	--button-sec-border: 0px solid transparent;
	/* secondary button light */
	--button-sec-lig-background: var(--color-blue);
	--button-sec-lig-background-hover: var(--color-blue);
	--button-sec-lig-color: var(--color-white);
	--button-sec-lig-color-hover: var(--color-white);
	--button-sec-lig-border: 05px solid transparent;
	/* form */
	--form-font-size: var(--text-font-size);
	--form-field-padding: 22px;
	--form-field-color: var(--color-grey);
	--form-field-background: var(--color-white);
	--form-field-border-width: 0px;
	--form-field-border: var(--form-field-border-width) solid var(--color-white);
	--form-field-border-radius: 0px;
	--form-field-placeholder-color: var(--color-grey);
	--form-field-height: 56px;
	--form-field-gap: 22px;
	--form-dropdown-arrow-size: 6px;
	/* spacing */
	--spacing-xxs: 8px;
	--spacing-xs: 16px;
	--spacing-sm: 24px;
	--spacing-md: 32px;
	--spacing-lg: 48px;
	--spacing-xl: 64px;
	--spacing-xxl: 128px;
	--spacing-column-gap: var(--spacing-md);
	--spacing-section: var(--spacing-xl);
}

/*
layout
*/

.et_section_regular.et_pb_section {
	max-width: var(--global-page-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing-section) 0;
}

.et_section_regular.et_pb_section .et_pb_row {
	max-width: var(--global-content-width);
	width: 100%;
}

.et_flex_column, .et_flex_group, .et_flex_module, .et_flex_row, .et_flex_section {
	row-gap: var(--spacing-column-gap);
}

.et_grid_column, .et_grid_grid, .et_grid_group, .et_grid_module, .et_grid_row, .et_grid_section {
	row-gap: var(--spacing-column-gap);
}

.et_section_regular.et_pb_section .et_pb_row .et_pb_row {
	padding-left: 0;
	padding-right: 0;
}

.et_section_regular.et_pb_section .et_pb_row.small {
	padding-left: var(--spacing-xxl);
	padding-right: var(--spacing-xxl);
}

@media (max-width: 1520px) {
	.et_section_regular.et_pb_section .et_pb_row {
		padding-left: var(--spacing-column-gap);
		padding-right: var(--spacing-column-gap);
		max-width: 100%;
	}
}

@media (max-width: 1200px) {
	.et_section_regular.et_pb_section .et_pb_row {
		padding-left: var(--spacing-xs);
		padding-right: var(--spacing-xs);
	}

	.et_section_regular.et_pb_section .et_pb_row.small {
		padding-left: var(--spacing-xs);
		padding-right: var(--spacing-xs);
	}
}

/*
general
*/

header {
	position: relative;
	z-index: 99;
}

body header {
	position: fixed;
	width: 100%;
}

.scrollblock {
	overflow: hidden;
}

.mfp-removing img {
	opacity: 0 !important;
}

.et_pb_module svg {
	display: block;
}

/*
fonts
*/

@font-face {
	font-family: 'Campton';
	src: url('/wp-content/themes/8create/fonts/CamptonMedium.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Campton Bold';
	src: url('/wp-content/themes/8create/fonts/CamptonBold.woff2') format('woff2');
	font-weight: 550;
	font-style: normal;
}

body,
body .et_pb_module {
	font-family: var(--global-font-family);
	color: var(--text-color-dark);
	font-size: var(--text-font-size);
}

.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,
.et_pb_module p.h1,
.et_pb_module p.h2,
.et_pb_module p.h3,
.et_pb_module p.h4,
.et_pb_module p.h5,
.et_pb_module p.h6 {
	font-family: var(--headline-font-family) !important;
	color: var(--headline-color);
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	padding-bottom: 0;
}

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

h1,
h1.h1,
h2.h1,
h3.h1,
h4.h1,
h5.h1,
h6.h1,
.et_pb_module p.h1 {
    font-size: var(--headline-h1-font-size);
    line-height: 117%;
}

h2,
h1.h2,
h2.h2,
h3.h2,
h4.h2,
h5.h2,
h6.h2,
.et_pb_module p.h2 {
    font-size: var(--headline-h2-font-size);
    line-height: 150%;
}

h3,
h1.h3,
h2.h3,
h3.h3,
h4.h3,
h5.h3,
h6.h3,
.et_pb_module p.h3 {
    font-size: var(--headline-h3-font-size);
    line-height: 150%;
}

h4,
h1.h4,
h2.h4,
h3.h4,
h4.h4,
h5.h4,
h6.h4,
.et_pb_module p.h4 {
    font-size: var(--headline-h4-font-size);
    line-height: 150%;
}

h5,
h1.h5,
h2.h5,
h3.h5,
h4.h5,
h5.h5,
h6.h5,
.et_pb_module p.h5 {
    font-size: var(--headline-h5-font-size);
    line-height: 150%;
}

h6,
h1.h6,
h2.h6,
h3.h6,
h4.h6,
h5.h6,
h6.h6,
.et_pb_module p.h6 {
    font-size: var(--headline-h6-font-size);
    line-height: 150%;
}

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

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

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

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

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

.et_pb_module strong {
	font-family: var(--headline-font-family);
}

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

h1 span::after,
h2 span::after,
h3 span::after,
h4 span::after,
h5 span::after,
h6 span::after,
p span::after {
	content: '';
	width: 100%;
	height: 30%;
	position: absolute;
	left: 0;
	bottom: 15%;
	z-index: -1;
}

h1 span.green::after,
h2 span.green::after,
h3 span.green::after,
h4 span.green::after,
h5 span.green::after,
h6 span.green::after,
p span.green::after {
	background-color: var(--color-green);
}

h1 span.blue::after,
h2 span.blue::after,
h3 span.blue::after,
h4 span.blue::after,
h5 span.blue::after,
h6 span.blue::after,
p span.blue::after {
	background-color: var(--color-blue);
}

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

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

.et_pb_module .et_pb_button::after {
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="15" viewBox="0 0 19 15" fill="none"><path d="M10.364 0.999991L16.7279 7.36395L10.364 13.7279" stroke="white" stroke-width="2" stroke-linecap="round"/><line x1="16.1591" y1="7.2937" x2="0.999992" y2="7.2937" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>');
	display: inline-block;
	width: 19px;
	height: 15px;
	background-image: none !important;
	background-color: transparent !important;
	opacity: 1;
	position: absolute;
	margin-left: 0;
	font-family: sans-serif;
	right: 20px;
}

body #page-container .et_pb_section .et_pb_row .et_pb_button:after,
body #page-container .et_pb_section .et_pb_row .et_pb_button:hover:after {
	font-size: 0 !important;
	line-height: 0 !important;
}


/* 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 {
	padding: var(--button-padding);
	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;
}

/* block buttons with full width */

.et_pb_button.block {
	display: block;
	width: 100%;
	text-align: center;
}

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

/*
links
*/

.et_pb_module.et_pb_text a {
	color: var(--text-color-dark);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

/*
navigation
*/

.navigation_section {
	background: transparent;
	padding: 0 !important;
	transition: background-color .3s;
}

.navigation {
	display: grid;
	grid-template-columns: auto 1fr;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) 0;
}

.navigation .menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 52px;
}

.navigation .menu a {
	color: var(--color-white);
	line-height: 1em;
	transition: color .3s;
}

.navigation .menu a.contact {
	color: var(--color-grey);
	background-color: var(--color-white);
	padding: 10px 14px 7px;
	border-radius: 50px;
	font-size: var(--text-font-size-smallest);
	font-family: 'Campton Bold';
	transition: color .3s, background-color .3s;
}

/* sticky */

.navigation_section.sticky {
	background-color: var(--color-white);
}

.navigation_section.sticky svg path.colorchange {
	fill: var(--color-blue);
}

.navigation_section.sticky .navigation .menu a {
	color: var(--color-blue);
}

.navigation_section.sticky .navigation .menu a.contact {
	color: var(--color-white);
	background-color: var(--color-green);
}

/*
forms
*/

.gform_wrapper .gform_fields {
	row-gap: var(--form-field-gap) !important;
}

.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 .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) !important;
	background-color: var(--form-field-background) !important;
	border: var(--form-field-border) !important;
	border-radius: var(--form-field-border-radius) !important;
	line-height: 1em !important;
	height: var(--form-field-height) !important;
	font-weight: 500 !important;
}

.gform_wrapper textarea  {
	resize: none;
}

.gform_wrapper select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	background-image:
	linear-gradient(135deg, var(--color-green)  50%, transparent 50%),
    linear-gradient(45deg, transparent 50%, var(--color-green) 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,
.gform_wrapper .gfield--type-choice label {
	font-size: var(--form-font-size-small) !important;
	color: var(--color-green) !important;
	font-weight: 500 !important;
}

.gform_wrapper input[type="submit"] {
	cursor: pointer !important;
	border: var(--button-border) !important;
	border-radius: var(--button-border-radius) !important;
	background-color: var(--button-background) !important;
	color: var(--button-color) !important;
	font-size: var(--button-font-size) !important;
	padding: 9px 50px 9px 20px !important;
	line-height: 1em !important;
	transition: all var(--button-transistion) !important;
    background-image: 
        url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2210%22%20viewBox%3D%220%200%2014%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.388184%204.13602H11.1642L8.40418%200.296021H10.2762L13.6122%205.00002L10.2762%209.70402H8.40418L11.1642%205.86402H0.388184V4.13602Z%22%20fill%3D%22%23fe653e%22/%3E%3C/svg%3E"),
        linear-gradient(var(--color-white), var(--color-white));
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 17px center, right 10px center !important; 
    background-size: 14px 10px, 26px 26px !important;
    height: 46px !important;
    font-weight: 700 !important;
}

.gform_wrapper input[type="submit"]:hover {
	padding: 9px 50px 9px 20px !important;
	border: var(--button-border) !important;
	color: var(--button-color-hover) !important;
	background-color: var(--button-background-hover) !important;
}

.gform_wrapper input[type="submit"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

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

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

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

.gform_wrapper .gform_ajax_spinner {
	margin-top: 7px;
	margin-left: 20px !important;
	width: 32px !important;
	height: 32px !important;
}

.gform_wrapper .gform_validation_errors {
	background-color: rgba(255, 255, 255, 0.7) !important;
	border: none !important;
	box-shadow: none !important;
	padding: 10px !important;
	border-radius: 0 !important;
}

.gform_wrapper .gform_validation_errors:focus {
    outline: none !important;
    box-shadow: none !important;
}

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

.gform_wrapper .gform_validation_errors h2 span {
	display: none !important;
}

.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;
	padding: 0 !important;
	color: var(--color-error) !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
	padding: 5px !important;
	width: fit-content;
}

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

.gform_wrapper .gform_confirmation_message {
	font-size: var(--text-font-size);
	font-weight: 700;
}

/*
header
*/

.header {
	background: var(--color-blue);
	padding-top: 270px !important;
}

.header .gradients {
	background: 
		radial-gradient(circle at 52% 50%, rgba(153, 205, 222, 1) 0%, rgba(23, 115, 140, 1) 100%),
		linear-gradient(180deg, rgba(74, 73, 73, 0.38) 0%, rgba(176, 174, 174, 0.00) 50%);
	background-blend-mode: multiply;
	overflow: hidden;
	height: 100%;
	width: 100%;
	max-width: 100% !important;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.header .gradients::before {
	content: '';
	position: absolute;
	top: -35svw;
	left: -35svw;
	width: 70svw;
	height: 70svw;
	border-radius: 50svw;
	background: radial-gradient(circle,rgba(73, 73, 73, 0.5) 5%, rgba(73, 73, 73, 0) 60%);
}

.header .gradients::after {
	content: '';
	position: absolute;
	top: -50svw;
	right: -40svw;
	width: 90svw;
	height: 90svw;
	border-radius: 90svw;
	background: radial-gradient(circle,rgba(73, 73, 73, 0.3) 0%, rgba(73, 73, 73, 0) 65%);
}


/*
footer
*/

footer .footer_menu,
footer .footer_menu a {
	color: var(--color-white);
}

footer .footer_menu {
	text-align: right;
}

footer .footer_menu a {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}