:root {
  --color-orange: #ff6600;
  --color-green: #78b829;
  --color-green-dark: #195201;
  --color-black: #222222;
  --color-white: #ffffff;
  --color-dark: #000;
  --color-gray-dark: #333;
  --color-gray-soft: #c3c6c8;
  --color-blue: #268bb5;
  --color-purple: #2d26b5;
  --color-red: #c02400;
  --color-gold: #b5a226;

  --color-primary: var(--color-green);
  --color-secondary: var(--color-orange);

  --color-layout: #f4f4f4;
  --swiper-theme-color: var(--color-green);
  --swiper-pagination-color: var(--color-green);
  --color-twitter: #1da1f2;
  --color-instagram: #833ab4;
  --color-linkedin: #0077b5;
  --color-facebook: #4267b2;
  --color-whatsapp: #25d366;
  --color-youtube: #ff0000;

  --gradient-direction: to right;
  --gradient-dark: linear-gradient(
    25deg,
    var(--color-dark),
    var(--color-gray-dark)
  );

  --font-family: "Noto Sans", sans-serif;
  --font-family-title: "DobraSlabW04", sans-serif;
  --fontawesome: "Font Awesome 6 Pro";
  --fontawesome-brands: "Font Awesome 6 Brands";
  --font-size: 16px;
  --line-height: 28px;
  --font-weight: 400;

  --section-spacing: 60px;
  --offset: 60px;
  --offset-small: 30px;
  --offset-tiny: 15px;
  --base: 1620px;

  --z-index-header: 3000;
  --z-index-navigation: 2000;

  --transition-speed: 0.25s;

  --column: calc((var(--base) - (var(--offset) * 11)) / 12);
  --grid-1: var(--column);
  --grid-2: calc((var(--column) * 2) + (var(--offset) * 1));
  --grid-3: calc((var(--column) * 3) + (var(--offset) * 2));
  --grid-4: calc((var(--column) * 4) + (var(--offset) * 3));
  --grid-5: calc((var(--column) * 5) + (var(--offset) * 4));
  --grid-6: calc((var(--column) * 6) + (var(--offset) * 5));
  --grid-7: calc((var(--column) * 7) + (var(--offset) * 6));
  --grid-8: calc((var(--column) * 8) + (var(--offset) * 7));
  --grid-9: calc((var(--column) * 9) + (var(--offset) * 8));
  --grid-10: calc((var(--column) * 10) + (var(--offset) * 9));
  --grid-11: calc((var(--column) * 11) + (var(--offset) * 10));
  --grid-12: calc((var(--column) * 12) + (var(--offset) * 11));
}

@media screen and (max-width: 1679px) {
  :root {
    --section-spacing: 80px;
    --offset: 40px;
    --offset-small: 20px;
    --offset-tiny: 10px;
    --base: 90%;
  }
}

@media screen and (max-width: 1360px) {
  :root {
    --section-spacing: 50px;
    --offset: 40px;
    --offset-small: 20px;
    --base: 90%;
    --font-size: 14px;
    --line-height: 24px;
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --base: 100%;
    --offset: 40px;
    --offset-small: 20px;
    --font-size: 14px;
    --line-height: 24px;
  }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, p {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

figure {
	font-size: 0;
	line-height: 0; 
}

*, *:before, *:after {
	box-sizing: border-box;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes bounce-in {
	0% {
		transform: scale(1)
	}

	20% {
		transform: scale(1.4)
	}

	40% {

		transform: scale(.8)
	}

	60% {

		transform: scale(1.2)
	}

	80% {

		transform: scale(.9)
	}

	100% {
		transform: scale(1)
	}
}

@keyframes movein-from-right {
	0% {
		transform: translateX(var(--movein-start, 100px));
	}

	100% {
		transform: translateX(var(--movein-end, 0px));
	}
}

@keyframes rotate-y {
	0% {
		transform: rotate3d(0, 1, 0, 0deg);
	}

	50% {
		transform: rotate3d(0, 1, 0, 180deg);
	}

	100% {
		transform: rotate3d(0, 1, 0, 360deg);
	}
}

@keyframes spin-z {
	0% {
		backface-visibility: visible;
		transform: rotate3d(0, 0, 1, 0deg);
	}

	100% {
		backface-visibility: visible;
		transform: rotate3d(0, 1, 0, 720deg);
	}
}

@keyframes phone-ring {

	0%,
	100% {
		transform: rotate3d(0, 0, 1, 0deg);
	}

	10%,
	20%,
	30%,
	40% {
		transform: rotate3d(0, 0, 1, 15deg);
	}

	5%,
	15%,
	25%,
	35%,
	50% {
		transform: rotate3d(0, 0, 1, -15deg);
	}
}

@keyframes dropPins {
	0% {
		transform: translateY(-200px) scaleY(0.9) rotate3d(0, 1, 0, 0deg);
		opacity: 0;
	}

	5% {
		opacity: 0.7;
	}

	50% {
		transform: translateY(20px) scaleY(.5) rotate3d(0, 1, 0, 840deg);
		opacity: 1;
	}

	100% {
		transform: translateY(0px) scaleY(1) rotate3d(0, 1, 0, 720deg);
		opacity: 1;
	}
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  font-display: swap;
}

h1,
h2 {
  --line-w: 120px;
  --line-h: 2px;
  --line-x: 0%;
  --origin: center left;
}

[data-text-align="right"] h1,
[data-text-align="right"] h2 {
  --line-x: calc(100% - (var(--line-w) / 2));
  --origin: center right;
}

[data-text-align="center"] h1,
[data-text-align="center"] h2 {
  --origin: 50% 50%;
  --line-x: calc(50% - (var(--line-w) / 2));
}

/* h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-family-title);
} */

h1,
h2 {
  font-size: 40px;
  line-height: 42px;
  font-weight: 600;
  /*letter-spacing: -0.25px;*/
  position: relative;
  margin-bottom: var(--offset-small);
}

h1 span,
h2 span {
  display: block;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  position: relative;
  font-family: var(--font-family-title);
}

h1.large,
h2.large {
  font-size: 50px;
  line-height: 46px;
}

h3 {
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
}

h5 {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
}

em,
i {
  font-style: italic;
}

b,
strong {
  font-weight: 700;
}

a {
}

*[data-title-color="yellow"] {
  --color: var(--color-yellow);
}
*[data-title-color="blue"] {
  --color: var(--color-blue);
}
*[data-title-color="red"] {
  --color: var(--color-red);
}
*[data-title-color="green"] {
  --color: var(--color-green);
}
*[data-title-color="gray"] {
  --color: var(--color-black);
}
*[data-title-color="white"] {
  --color: white;
}
*[data-title-color="black"] {
  --color: var(--color-dark);
}
*[data-title-color] {
  color: var(--color);
}

h1:before,
h2:before {
  position: absolute;
  width: 0;
  height: var(--line-h);
  left: var(--line-x);
  transform-origin: var(--origin);
  bottom: -20px;
  display: block;
  content: "";
  background: var(--color-green);
  opacity: 0;
}

/* ---------- visible ---------- */
h1[data-observe="visible"]:before,
h2[data-observe="visible"]:before {
  animation: title-line-in 0.5s forwards;
}

@keyframes title-line-in {
  0% {
    opacity: 0;
  }
  10% {
    width: calc(var(--line-w) / 5);
    opacity: 1;
  }

  25% {
    transform: scale(0.4);
  }

  50% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.6);
  }

  100% {
    width: var(--line-w);
    left: var(--line-x);
    opacity: 1;
  }
}

@keyframes title-width-in {
}

@media screen and (max-width: 1023px) {
  h1,
  h2 {
    --line-w: 90px;
  }

  h1,
  h2 {
    font-size: 30px;
    line-height: 34px;
  }

  h1 span,
  h2 span {
    font-size: 18px;
    line-height: 28px;
  }

  h1.large,
  h2.large {
    font-size: 36px;
    line-height: 40px;
  }
}

/* ---------- vars ---------- */
body {
	background: var(--color-dark);
	overflow-x: hidden;
	--header-height: 80px;
	--scroll-margin: calc(var(--header-height) + var(--section-spacing));
	--blur: 3px;
}

.hide { display: none; }

body.blur main,
body.blur footer {
	filter: blur(var(--blur));
}

body.blur footer:before,
body.blur main:before {
	position: absolute;
	content: "";
	display: block;
	height: 100%;
	width: 100vw;
	z-index: 1000;
	background: rgba(0,0,0,.5);
}

main {
	transition: all var(--transition-speed);
	background: white;
}


main > section {
	scroll-margin: var(--scroll-margin);
}

main > section:last-child {
	padding-bottom: var(--offset);
}

main > section.no-margin-bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

main *[data-offset-top="large"] { padding-top: var(--section-spacing); }
main *[data-offset-top="normal"] { padding-top: var(--offset); }
main *[data-offset-top="small"] { padding-top: var(--offset-small); }
main *[data-offset-top="none"] { padding-top: 0; }
main *[data-offset-bottom="large"] { padding-bottom: var(--section-spacing); }
main *[data-offset-bottom="normal"] { padding-bottom: var(--offset); }
main *[data-offset-bottom="small"] { padding-bottom: var(--offset-small); }
main *[data-offset-bottom="none"] { padding-bottom: 0; }
main *[data-offset-both="none"] { padding-bottom: 0; padding-top: 0; }

.far:not(.no-margin), .fas:not(.no-margin), .fal:not(.no-margin) {
	/*margin-right: 5px;*/
}

.drop {
	backface-visibility: visible;
	animation-name: dropPins;
	animation-duration: var(--delay-time);
	animation-timing-function:ease-in;
}

#loading-div {
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 5000;
	text-align: center;
	color: #ffffff;
	vertical-align: middle;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#loading-div i {
	top: 50%;
	font-size: 100px;
}

.hide {
	display: none !important;
}
.tags.container{
	display: flex;
    justify-content: center;
    gap: 50px;
	align-items: center;
	& > button{
		padding: 5px 50px;

	}
}
.tags.container button.active{
background-color: var(--color-dark);
color: white;
	}

/* ---------- layout---------- */
header#header {
  position: fixed;
  z-index: var(--z-index-header);
  width: 100vw;
  top: 0;
}

header#header .wrapper {
  display: grid;
  grid-template-columns: var(--grid-2) 1fr auto auto auto;
  gap: var(--offset-small);
  align-items: center;
  height: 100%;
}

header#header .wrapper .logo {
  align-self: center;
}

[data-interactive="1"] header#header {
  position: relative;
  display: block;
}

/* ---------- lipstick ---------- */
header#header {
  background: var(--color-dark);
  color: white;
}

header#header a {
  text-decoration: none;
}

header#header > .wrapper {
  padding: var(--offset-small, 30px) 0;
  transition: all var(--transition-speed);
}

header#header.scroll {
  box-shadow: 0 0 60px rgba(17, 17, 17, 0.2);
}

header#header.scroll > .wrapper {
  padding: 15px 0;
}

[data-interactive="1"] header#header {
  position: relative;
}

/* ---------- media query ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1023px) {
  header#header > .wrapper {
    padding: var(--offset-small);
    padding-right: 0px;
    grid-template-columns: 1fr auto auto auto auto;
  }

  header#header.scroll > .wrapper {
    padding: var(--offset-small);
  }
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */


/* ---------- lipstick ---------- */

header#header .logo img {
	max-width: 100%;
	transition: all var(--transition-speed);
}

header#header.scroll .logo img {
	max-width: 200px;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {
	header#header .logo img {
		max-width: 200px;
	}
}
/* ---------- vars ---------- */

header#header .phone, header#header .login {
	--circle: 50px;	
}
/* ---------- layout ---------- */
header#header .phone a, header#header .login a {
	display: grid;
	grid-template-columns: var(--circle) auto;
	align-items: center;
	gap: 10px;
}

header#header .phone a .circle, header#header .login a .circle {
	grid-column: 1;
	grid-row: 1;
	width: var(--circle);
	height: var(--circle);
	display: flex;
	justify-content: center;
	align-items: center;
}

header#header .phone a .circle + div, header#header .login a .circle + div {
	grid-column: 2;
	grid-row: 1;
}
header#header .phone a .circle + div span, header#header .login a .circle + div span {
	display: block;
	font-weight: 700;
}

/* ---------- lipstick ---------- */
header#header .phone a, header#header .login a {
	text-decoration: none; 
	font-family: var(--font-family-title);
	color: white;
	font-size: 18px;
	transition: var(--transition-speed);
}

header#header .phone a .circle, header#header .login a .circle {
	background: var(--color-green);
	color: white; 
	transition: var(--transition-speed);
	border-radius: 50%;
}

header#header .phone:hover a .circle{
	animation: phone-ring 1.8s infinite linear .5s;
}

header#header .login:hover a .circle span {
	animation: pulse 1.2s ease-in-out infinite .5s;
}

header#header .phone a .circle + div, header#header .login a .circle + div {
	line-height: 20px;
	
}

header#header .phone a .circle + div span, header#header .login a .circle + div span {
	color: var(--color-green);
	font-size: 16px;
	transition: var(--transition-speed);
}

header#header .phone a:hover .circle, header#header .login a:hover .circle { background: var(--color-orange); }

header#header .phone a:hover .circle + div span, header#header .login a:hover .circle + div span { color: var(--color-orange);  }

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	header#header .phone, header#header .login  {
		--circle: 40px;	
	}

	header#header .phone a, header#header .login a {
		grid-template-columns: var(--circle);
	}
	header#header .phone a > *:last-child, header#header .login a > *:last-child { display: none; }
}

@media screen and (max-width: 1023px) {

}
/* ---------- vars ---------- */
header#header .locale {
  --size: 50px;
  --padTop: calc((var(--size) - var(--line-height)) / 2);
}

/* ---------- layout ---------- */
header#header .locale {
  justify-self: center;
  display: grid;
  grid-template-columns: auto 35px;
  grid-template-rows: 50px;
  justify-content: start;
  align-items: center;
  gap: 5px;
}

header#header .locale ul {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 0px;
  padding-bottom: var(--padTop);
}

/* header#header .locale ul li:nth-child(1) {
    order: 2;
}

header#header .locale ul li:nth-child(2) {
    order: 1;
}

header#header .locale ul li:nth-child(3) {
    order: 3;
} */

#header .locale:hover ul {
    top: 25px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
}

#header .locale:hover ul:before {
display: none;
}

header#header .locale ul:before {
  display: block;
  width: 10px;
  height: 10px;
  content: "\f0d7";
  position: absolute;
  right: -10px;
  top: 4%;
}

header#header .locale ul li {
  display: none;
}

header#header .locale:hover ul li,
header#header .locale ul li.active {
  display: block;
}

/* ---------- lipstick ---------- */
header#header .locale {
  transition: all var(--transition-speed);
  color: var(--color-green);
  padding-left: calc(var(--size) / 4);
  padding-right: calc(var(--size) / 3);
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(var(--size) / 2);
}

.locale-dropdown {
        display: inline-table;
        cursor: pointer;
    }

    .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        border-radius: 5px;
        margin-top: 10px;
    }

    .dropdown li {
        list-style: none;
    }

    .dropdown li a {
        text-decoration: none;
        /* padding: 10px; */
        display: block;
        color: var(--color-green);
    }

    .locale-dropdown:hover .dropdown {
        display: block;
    }

    .dropdown li a:hover {
        background-color: #f0f0f0;
    }

header#header .locale:hover lu {
  margin-top: 20px;
}

header#header .locale:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-orange);
}

header#header .locale ul:before {
  font-family: var(--fontawesome);
  font-weight: 700;
  font-size: 10px;
}

header#header .locale ul li {
  text-align: center;
}

/* header#header .locale ul li:not(.active) {
  transition: all 0.25s;
  opacity: 0;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} */

/* header#header .locale:hover ul li:not(.active) {
  animation: fade-in 0.2s forwards ease-in 0.2s;
} */

header#header .locale ul li a {
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  /* transition: all 0.25s; */
}

header#header .locale ul li.active {
  opacity: 1;
}

header#header .locale ul li a:hover {
  color: var(--color-orange);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
  header#header .locale {
    --size: 40px;
    grid-template-rows: 40px;
  }
}

@media screen and (max-width: 520px) {
    #header .locale:hover ul {
        top: 25px;
        background-color: black;
    }


    .dropdown {
        top: unset;
    }
}

/* ---------- vars ---------- */
header#header .navigation-trigger {
  --size: 50px;
}

/* ---------- layout ---------- */
header#header .navigation-trigger {
  display: none;
  width: var(--size);
  height: var(--size);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 5px;
}

header#header .navigation-trigger:before {
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  content: "";
}

header#header .navigation-trigger span {
  height: 2px;
  width: 70%;
}

header#header .navigation-trigger span:nth-child(odd) {
  width: 50%;
}

/* ---------- lipstick ---------- */

header#header .navigation-trigger,
header#header .navigation-trigger:before,
header#header .navigation-trigger span {
  transition: all var(--transition-speed);
}

header#header .navigation-trigger:before {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

header#header .navigation-trigger:hover:before {
  background: rgba(255, 255, 255, 0.2);
}

header#header .navigation-trigger span {
  background: var(--color-green);
}
header#header .navigation-trigger:hover span {
  animation: rotate-y 0.8s infinite linear;
  background: var(--color-orange);
}

header#header .navigation-trigger:hover span:first-child {
  animation-delay: 0.3s;
}

header#header .navigation-trigger:hover span:last-child {
  animation-delay: 0.6s;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1023px) {
  header#header .navigation-trigger {
    display: flex;
    --size: 40px;
  }

  header#header.scroll > .wrapper {
    padding-right: 0px;
  }
}

/* ---------- vars ---------- */
header#header .links a {
  --size: 50px;
  --padding: calc((var(--size) - var(--line-height)) / 2) calc(var(--size) / 3);
}

/* ---------- layout ---------- */
header#header .links {
  display: flex;
  justify-content: center;
  gap: 6%;
}

header#header .links a {
  position: relative;
  display: flex;
	justify-content: flex-start;
	gap: 5px;
}

header#header .links a div {
	line-height: 22px;
}

header#header .links a:before {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
}

.subtext-nav{
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}

/* ---------- lipstick ---------- */
header#header .links a {
  color: var(--color-gray-soft);
  font-size: 18px;
  font-weight: 700;
  padding: var(--padding);
  transition: all var(--transition-speed) 0.2s;
}
header#header .links a:nth-child(3) div span{
  color: var(--color-green);
}

header#header .links a:hover {
  color: white;
}

header#header .links a:before {
  transition: all var(--transition-speed);
  border-radius: calc(var(--size) / 2);
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: rotate3d(0, 0, 1, 5deg) translateY(15px) translateX(-20px)
    scale(0.8);
}

header#header .links a i {
  transition: all var(--transition-speed) 0.2s;
  color: var(--color-green);
  font-size: 20px;
  margin-right: 8px;
}

header#header .links a:hover i {
  color: var(--color-orange);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  header#header .links a {
    font-size: 16px;
    --size: 40px;
  }
  header#header .links {
    gap: 0%;
  }
}

@media screen and (max-width: 1491px) {
  header#header .links {
    gap: 0%;
  }
  header#header .links a {
    font-size: 16px;
    & > i{
      font-size: 17px;
    }
    .subtext-nav {
      font-size: 13px;
  }
}
}

@media screen and (max-width: 1361px) {
  header#header .links {
    gap: 0%;
  }
  header#header .links a {
    font-size: 15px;
    & > i{
      font-size: 18px;
    }
    .subtext-nav {
      font-size: 13px;
  }
}
}
@media screen and (max-width: 1151px) {
  header#header .links {
    gap: 0%;
  }
  header#header .links a {
    padding: 5px;
    font-size: 14px;
    & > i{
      font-size: 17px;
    }
    .subtext-nav {
      font-size: 12px;
  }
}
}
@media screen and (max-width: 1023px) {
  header#header .links {
    display: none;
  }
  
}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
nav {
  position: fixed;
  top: 110px;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  z-index: var(--z-index-navigation);
  width: 100vw;
}

.navigation-close {
  display: none;
  z-index: calc(var(--z-index-navigation) - 1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

nav.open + .navigation-close {
  display: block;
}

header#header.scroll + nav {
  top: 80px;
}

[data-interactive="1"] nav {
  display: grid;
  position: relative;
  width: 90vw;
  top: 0;
}

/* ---------- lipstick ---------- */

nav {
  transition: all var(--transition-speed);
  transition-delay: 0.2s;
}

.navigation-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0);
  z-index: 9999;
  overflow-y: auto;
  padding-top: 20px;
  padding-bottom: 34px;
}

[data-interactive="1"] .navigation-mobile {
  display: block;
  position: relative;
}

.menu-close {
  position: fixed !important;
  top: 22px;
  right: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.25s;
  height: 40px;
  width: 40px;
  color: #fff;
  cursor: pointer;
  background: white;
  border-radius: 50%;
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.menu-close span {
  left: 8.5px;
  top: 2px;
  color: var(--color-green);
  position: absolute;
  font-size: 42px;
}

.menu-contact {
  font-size: 18px;
  text-decoration: none;
  width: var(--circle);
  height: var(--circle);
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-contact .circle {
  background: var(--color-green);
  color: white;
  transition: var(--transition-speed);
  border-radius: 50%;
  position: fixed;
  right: 80px;
  height: 40px;
  width: 40px;
  margin-top: 42px;
  text-align: center;
  font-size: 18px;
}

.menu-contact .circle span {
  margin-top: 11px;
}

.navigation-mobile figure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 122px;
  height: 80px;
  margin-left: 25%;
  margin-right: auto;
}

.navigation-mobile figure a {
  width: auto;
  height: auto;
  position: relative;
  position: absolute;
  left: 0px;
  /* animation: ; */
}

.navigation-mobile figure a img {
  width: auto;
  height: auto;
  max-width: 200px;
  min-width: 200px;
}

.navigation-mobile ul,
.navigation-mobile-under {
  list-style: none;
  padding: 30px;
  padding-bottom: 0px;
  padding-left: 45px;
  margin: 0;
  animation: slideInFromRight 0.5s;
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.navigation-mobile li {
  margin-bottom: 30px;
}

.navigation-mobile a,
.navigation-mobile-under h5,
.navigation-mobile-under a {
  text-decoration: none;
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  padding-left: 20px;
  position: relative;
  display: flex;
  gap: 5px;
  align-items: center;
}

.navigation-mobile a i:before,
.navigation-mobile-under h5 i:before {
  margin-left: -15px;
  text-decoration: none;
  color: #78b828;
}

.navigation-mobile h5 {
  margin-bottom: 10px;
}

.navigation-mobile h5 a,
.navigation-mobile .navigation-mobile-under h5 {
  margin: 0 0 5px 0;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.navigation-mobile ul li:nth-child(1) h5 a i {
  transition: all var(--transition-speed) 0.2s;
  font-size: 24px;
  margin-left: -174px !important;
}

.navigation-mobile ul li:nth-child(2) h5 a i {
  position: relative;
  left: -232px;
}

.navigation-mobile ul li:nth-child(3) h5 a i {
  position: relative;
  left: -188px;
}

.navigation-mobile ul li:nth-child(4) h5 a i {
  position: relative;
  left: -108px;
}

.navigation-mobile-under h5 i {
  position: relative;
  left: -218px;
}

.navigation-mobile-under {
  color: white;
  padding-top: 0px;
}

.navigation-mobile-under .contact .socialmedia {
  display: flex;
  flex-direction: row;
}

.socialmedia {
  padding-bottom: 30px;
  margin-top: 30px;
}

.navigation-mobile-under .contact > div > address {
  margin-left: 21px;
}

.navigation-mobile-under .contact .links a i {
  position: absolute;
  left: 6px;
  top: 10px;
  font-size: 20px;
}

.navigation-mobile-under .contact .socialmedia a i:before {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  font-size: 30px;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
  /* nav {
    display: none;
  } */
}

@media screen and (max-width: 1023px) {
}

@media screen and (max-width: 1680px) {
  nav {
    top: 88px;
  }
}

@media screen and (max-width: 1360px) {
  nav .links {
    grid-template-columns: auto !important;
    gap: 0px !important;
  }

  nav {
    top: 68px !important;
  }
}

@media screen and (min-width: 1024px) {
  /* ---------- vars ---------- */

  /* ---------- layout ---------- */

  nav .navigation {
    display: none;
    grid-template-columns: var(--base);
    justify-content: center;
  }

  nav .navigation.active {
    display: grid;
  }

  /* body:not(:has(nav .navigation.active)) {
	filter: blur(4px);
} */

  nav .navigation .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 30vw));
    gap: var(--offset);
    justify-content: start;
    width: 100vw;
  }

  nav .navigation .container .contact-method {
    max-width: 20vw;
  }

  [data-interactive="1"] nav .navigation {
    display: grid;
    margin-left: 200px;
  }
  [data-interactive="1"] nav .navigation .container {
    display: block;
  }

  /* ---------- lipstick ---------- */

  nav .navigation {
    opacity: 0;
    transform: translateY(60px);
    background: var(--background);
    color: var(--color);
  }

  nav .navigation .container {
    padding: var(--offset) 0;
  }

  nav .navigation.active {
    animation: nav-desktop-in 0.3s forwards ease-out;
  }

  [data-interactive="1"] nav .navigation {
    animation: none;
    opacity: 1;
    transform: translateY(0);
    display: block;
  }

  @keyframes nav-desktop-in {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ---------- colors ---------- */

  nav .navigation[data-theme],
  nav .navigation[data-theme="green"] {
    --background: var(--color-green);
    --color: var(--color-black);
    --color-hover: white;
  }

  nav .navigation[data-theme="orange"] {
    --background: var(--color-orange);
    --color: var(--color-black);
  }

  nav .navigation[data-theme="blue"] {
    --background: var(--color-blue);
    --color: white;
    --color-hover: var(--color-black);
  }

  nav .navigation[data-theme="red"] {
    --background: var(--color-red);
    --color: white;
    --color-hover: var(--color-black);
  }

  nav .navigation[data-theme="gold"] {
    --background: var(--color-gold);
    --color: var(--color-black);
    --color-hover: white;
  }

  nav .navigation[data-theme="purple"] {
    --background: var(--color-purple);
    --color: white;
    --color-hover: var(--color-black);
  }

  /* ---------- mediaquery ---------- */
}

@media screen and (max-width: 1024px) {
  /* ---------- vars ---------- */

  /* ---------- layout ---------- */

  nav .navigation {
    display: none;
    grid-template-columns: var(--base);
    justify-content: center;
  }

  nav .navigation.active {
    display: grid;
  }

  /* body:not(:has(nav .navigation.active)) {
	filter: blur(4px);
} */

  nav .navigation .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, var(--grid-4)));
    gap: var(--offset);
    justify-content: start;
    width: 100vw;
  }

  nav .navigation .container .contact-method {
    max-width: 20vw;
  }

  [data-interactive="1"] nav .navigation {
    display: grid;
  }
  [data-interactive="1"] nav .navigation .container {
    display: block;
  }

  /* ---------- lipstick ---------- */

  nav .navigation {
    opacity: 0;
    transform: translateY(60px);
    background: var(--background);
    color: var(--color);
  }

  nav .navigation .container {
    padding: var(--offset) 0;
  }

  nav .navigation.active {
    animation: nav-desktop-in 0.3s forwards ease-out;
  }

  [data-interactive="1"] nav .navigation {
    animation: none;
    opacity: 1;
    transform: translateY(0);
    display: block;
  }

  @keyframes nav-desktop-in {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ---------- colors ---------- */

  nav .navigation[data-theme],
  nav .navigation[data-theme="green"] {
    --background: var(--color-green);
    --color: var(--color-black);
    --color-hover: white;
  }

  nav .navigation[data-theme="orange"] {
    --background: var(--color-orange);
    --color: var(--color-black);
  }

  nav .navigation[data-theme="blue"] {
    --background: var(--color-blue);
    --color: white;
    --color-hover: var(--color-black);
  }

  nav .navigation[data-theme="red"] {
    --background: var(--color-red);
    --color: white;
    --color-hover: var(--color-black);
  }

  nav .navigation[data-theme="gold"] {
    --background: var(--color-gold);
    --color: var(--color-black);
    --color-hover: white;
  }

  nav .navigation[data-theme="purple"] {
    --background: var(--color-purple);
    --color: white;
    --color-hover: var(--color-black);
  }

  /* ---------- mediaquery ---------- */
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
nav .links[data-column="2"] {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: start;
	gap: var(--offset-small); 
}

nav .links[data-column] > div {
	display: flex;
	flex-direction: column;
}

/* ---------- lipstick ---------- */
nav .links {
	margin-top: var(--offset-tiny); 
}

nav .links a {
	color: var(--color);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}

nav .links a {
    transition: all var(--transition-speed);
    color: var(--color);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
}

nav .links a:hover {
	color: var(--color-hover);
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */

nav .navigation div.contact-method,
nav .navigation div.contact-method figure[data-border] { --image-size: 120px; }
nav .navigation div.contact-method figure a.icon { --icon-size: 40px; }

/* ---------- layout ---------- */
nav .navigation .column[data-size="large"] {
	grid-column: span 2;
}

/* ---------- lipstick ---------- */

nav .navigation div.contact-method {
	padding-top: 0;
}

nav .navigation div.contact-method:hover figure:before {
	background-color: var(--color-hover); 
}

nav .navigation div.contact-method h4 span,
nav .navigation div.contact-method div a i {
	color: var(--color-hover); 
}

nav .navigation div.contact-method h4 {
	font-size: 26px;
}

nav .navigation div.contact-method h4 span { font-size: 16px; } 

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- layout---------- */
.wrapper {
	width: var(--base); 
	margin-left: auto; 
	margin-right: auto; 
}

/* ---------- lipstick ---------- */


/* ---------- media query ---------- */

@media screen and (max-width: 1023px) {
	.wrapper {
		padding-left: var(--offset-small);
		padding-right: var(--offset-small)
	}
}
/* ---------- vars ---------- */

footer p {
  --font-size: 14px;
  --line-height: 24px;
}

/* ---------- layout ---------- */
footer .top,
footer .bottom {
  display: grid;
  grid-template-columns: var(--grid-4) repeat(2, var(--grid-2)) var(--grid-2);
  gap: var(--offset);
  justify-content: center;
}

footer .bottom {
  grid-template-columns: repeat(2, var(--grid-6));
  align-items: center;
}

footer .bottom .partners,
footer .bottom .legal {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 10px;
}

footer .bottom .legal {
  column-gap: 15px;
  justify-content: flex-end;
}

footer > * + * {
  margin-top: var(--offset);
}
footer h5 {
  padding-bottom: var(--offset-small);
}

/* ---------- lipstick ---------- */
footer {
  color: var(--color-gray-soft);
  padding: var(--offset) 0;
  transition: all var(--transition-speed);
}

footer {
  font-size: 14px;
  line-height: 24px;
}
footer .link-all > a{
  display: flex;
  gap: 8px;
}

footer .veldwerk4all {
	margin-top: 35px;
	font-size: 12px;
}

footer .veldwerk4all img {
	width: 150px;
}

footer a {
  transition: all var(--transition-speed);
  color: var(--color-gray-soft, #c3c6c8);
}

footer .bottom .legal a i {
  display: none;
}
footer .bottom .legal a:hover {
  color: white;
}

[data-interactive="1"] footer * {
  animation: none;
}



/* ---------- mediaquery ---------- */
@media screen and (max-width: 1679px) {
  footer .story .inner-story figure img {
    max-width: calc(15vw);
  }
}

@media screen and (max-width: 1360px) {
  footer .top {
    grid-template-columns: repeat(2, var(--grid-4));
    grid-template-rows: auto auto;
  }

  footer .top > div:nth-child(-n + 2) {
    grid-row: 1;
  }
  footer .top > div:nth-child(n + 3) {
    grid-row: 2;
  }
  footer .bottom {
    margin-left: 10%;
    margin-right: 10%;
  }
}

@media screen and (max-width: 750px) {
  footer .top {
    display: flex;
    flex-direction: column;
  }

  footer .top .story .inner-story {
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
  }

footer .veldwerk4all {
  	text-align: center;
    min-width: 200px;
}

  footer .top .column {
    align-self: center;
    min-width: 200px;
  }

  footer .top .column .contact {
    display: flex;
    flex-direction: column;
  }
  footer .bottom {
    display: flex;
    flex-direction: column;
  }
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */
footer .contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-2), 1fr));
  gap: var(--offset-tiny);
}

footer .contact > div:first-child {
  display: grid;
  grid-template-columns: 15px auto;
  gap: 5px;
}

/* ---------- lipstick ---------- */
footer .contact > div i {
  color: var(--color-green);
}

footer .contact > div:nth-child(3) {
  font-weight: 700;
}

footer .contact a {
  text-decoration: none;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  footer .contact {
    grid-template-columns: auto;
  }
}

@media screen and (max-width: 1360px) {
  footer .contact {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media screen and (max-width: 1023px) {
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .socialmedia {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: var(--offset-small);
}

/* ---------- lipstick ---------- */
footer .socialmedia a {
	font-size: 18px;
}

footer .socialmedia a i {
	transition: all var(--transition-speed);
}

footer .socialmedia a[href*="whatsapp"]:hover i { color: var(--color-whatsapp); } 
footer .socialmedia a[href*="facebook"]:hover i { color: var(--color-facebook); } 
footer .socialmedia a[href*="instagram"]:hover i { color: var(--color-instagram); } 
footer .socialmedia a[href*="youtube"]:hover i { color: var(--color-youtube); }
footer .socialmedia a[href*="twitter"]:hover i { color: var(--color-twitter); }

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {

}
/* ---------- vars ---------- */
footer .story .inner-story {
  --size: 50px;
}

/* ---------- layout ---------- */
footer .story .inner-story {
  display: grid;
  grid-template-columns: var(--size) auto;
  grid-template-rows: auto 1fr;
  gap: var(--offset-small);
  align-items: start;
}

footer .story .inner-story figure {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
}

footer .story .inner-story .story-icon {
  grid-column: 1;
  grid-row: 2;
}
footer .story .inner-story article {
  grid-column: 2;
  grid-row: 2;
}

/* ---------- lipstick ---------- */
footer .story .inner-story figure img {
  max-width: var(--grid-2);
}

footer .story .inner-story .story-icon {
  color: var(--color-green);
  font-size: var(--size);
}

footer .story .inner-story article {
  color: white;
}

footer .story .inner-story article p + a {
  display: inline-block;
  margin-top: var(--line-height);
  font-weight: 700;
  text-decoration: none;
}

footer .story .inner-story article p + a:hover {
  color: white;
}

footer .story .inner-story article p + a i {
  color: var(--color-green);
}

/* ---------- mediaquery ---------- */
@media screen and (max-width: 1679px) {
  footer .story .inner-story figure img {
    max-width: calc(15vw);
  }
}

@media screen and (max-width: 1023px) {
  footer .story .inner-story figure img {
    max-width: 150px;
  }
}

@media screen and (max-width: 750px) {
  footer .inner-story .story-icon {
    display: none;
  }

  footer .inner-story .story {
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  footer .inner-story .story figure {
    align-self: center;
  }

  footer .inner-story .story figure img {
    width: 250px;
  }

  footer .bottom .legal {
    justify-content: center;
    align-content: center;
  }
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
footer .links {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}

footer .links a i {
	position: absolute;
	left:-5px;
	top: 5px;
}

/* ---------- lipstick ---------- */
footer .links a {
	position: relative;
	text-decoration: none;
	color: var(--color-gray-soft);
	padding-left: 15px;
}

footer .links a i {
	color: var(--color-green); 
	transition: all var(--transition-speed); 
	transition-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55);;
}

footer .links a:hover { color: white; }
footer .links a:hover i { left: 0px; }

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.textmedia {
  --size: var(--grid-4);
  --image-size: var(--grid-3);
  --columns: repeat(2, var(--size));
  --areas: "text aside";
  --offset-top: var(--section-spacing);
  --offset-bottom: var(--section-spacing);
  --vertical-align: "center";
}

section.textmedia[data-size="small"] {
  --size: var(--grid-3);
}
section.textmedia[data-size="normal"] {
  --size: var(--grid-4);
}
section.textmedia[data-size="large"] {
  --size: var(--grid-5);
}
section.textmedia[data-size="full"] {
  --size: var(--grid-6);
}

section.textmedia[data-layout="right"] {
  --areas: "aside text";
}
section.textmedia[data-layout="right"] aside {
  justify-self: end;
}

section.textmedia[data-vertical="top"] {
  --vertical-align: "start";
}
section.textmedia[data-vertical="bottom"] {
  --vertical-align: "end";
}

/* ---------- layout ---------- */
section.textmedia {
  display: grid;
  grid-template-columns: minmax(auto, var(--base));
  grid-template-rows: auto auto;
  justify-content: center;
  gap: var(--offset-small) var(--offset);
}

section.textmedia[data-title="none"] {
  grid-template-rows: auto;
}
section.textmedia[data-title="none"] .title {
  display: none;
}

section.textmedia .title,
section.textmedia .content {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: var(--offset);
}

section.textmedia .title {
  grid-template-columns: var(--grid-6);
}

section.textmedia .content {
  grid-template-columns: var(--columns);
  grid-template-areas: var(--areas);
}

section.textmedia .content article {
  grid-area: text;
}
section.textmedia .content aside {
  grid-area: aside;
}

section.textmedia .content aside {
  justify-self: center;
}

/* ---------- lipstick ---------- */
section.textmedia {
  padding-top: var(--offset-top);
  padding-bottom: var(--offset-bottom);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  section.page .contents > .media-text figure {
    --image-size: 70vw;
  }
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1023px) {
  section.textmedia {
    --areas: "text" "aside";
    grid-template-columns: 1fr;
    --columns: repeat(auto-fit, minmax(260px, 1fr));
    padding-left: var(--offset-small);
    padding-right: var(--offset-small);
    --image-size: 360px !important;
  }

  section.textmedia[data-layout="right"] {
    --areas: "aside" "text";
  }

  section.textmedia .title {
    grid-template-columns: 1fr;
  }
  section.textmedia aside,
  section.textmedia[data-layout="right"] aside {
    justify-self: center;
  }

  section.textmedia[data-size="small"],
  section.textmedia[data-size="normal"],
  section.textmedia[data-size="large"],
  section.textmedia[data-size="full"] {
    --size: 1fr;
  }

  section.page .contents > .media-text figure {
    --image-size: 360px;
  }
}

/* ---------- vars ---------- */
section.companies {
  --logo: 150px;
  --icon-size: 60px;
}

/* ---------- layout ---------- */
section.companies .content {
  display: grid;
  grid-template-columns: var(--grid-4) var(--grid-6);
  justify-content: center;
  align-items: center;
  gap: var(--offset);
}

section.companies .container {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: calc((var(--logo) * 2) + var(--offset));
  align-items: center;
  gap: var(--offset-small) var(--offset);
  position: relative;
}

section.companies .container .more {
  position: absolute;
  right: -100px;
  z-index: 1000;
}

section.companies .swiper {
  width: 100%;
  height: calc((var(--logo) * 2) + var(--offset));
  overflow: hidden;
  grid-column: 1;
  grid-row: 1;
}

section.companies .swiper-slide {
  width: var(--logo);
  height: var(--logo);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- lipstick ---------- */
section.companies {
  padding: var(--section-spacing) 0;
  background: var(--color-layout);
}

section.companies figure {
  padding: var(--offset-tiny);
}

section.companies figure img {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: all var(--transition-speed);
}

section.companies figure[data-observe="visible"] img {
  animation: bounce-in 0.3s forwards ease-in var(--delay, 0.3s),
    fade-in 0.2s forwards ease-in var(--delay, 0.3s);
}

section.companies .container .more a {
  transition: all var(--transition-speed);
  text-decoration: none;
}

section.companies .container .more a:hover {
  background: var(--color-black);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1360px) {
  section.companies .content {
    grid-template-columns: repeat(2, var(--grid-6));
  }

  section.companies .container .more {
    right: -5%;
  }
}

@media screen and (max-width: 1023px) {
  section.companies {
    padding: var(--section-spacing) var(--offset-small);
  }

  section.companies .content {
    grid-template-columns: 1fr;
  }

  /* Center the <a> element */
  .text a.button {
    display: flex;
    text-align: center; /* Center the button's text horizontally */
    justify-content: center;
    margin-right: 10%;
  }
}

@media screen and (max-width: 1168px) {
  section.companies .container .more {
    right: 5%;
  }
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */

section.departments {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

section.departments .container {
  display: grid;
  grid-template-columns: 1fr var(--grid-5) var(--offset) var(--grid-7) 1fr;
  grid-template-rows: var(--offset) minmax(50vh, 1fr) var(--offset);
  grid-template-areas:
    ". . . map map"
    ". list . map map"
    ". . . map map";
  justify-content: center;
}

section.departments .container > .list {
  grid-area: list;
}
section.departments .container > .map {
  grid-area: map;
}

section.departments .container > .map {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

section.departments .container .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--offset-small);
}
/* ---------- lipstick ---------- */

/* ---------- mediaquery ---------- */

@media screen and (max-width: 850px) {
  section.departments {
    display: flex;
    flex-direction: column;
  }

  section.departments .container {
    display: flex;
    flex-direction: column;
  }

  .map {
    display: none;
  }

  .action {
    display: none;
  }

  section.departments .container .list {
    margin-left: 5%;
    margin-right: 5%;
  }
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.departments .department {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 20px 20px;
	margin-bottom: 20px;
}
section.departments .department .box {
	grid-row: 1 / 3;
	grid-column: 1;
	display: flex; 
	flex-direction: column;
	gap: 10px;
}

section.departments .department .action {
	grid-row: 2 / 4;
	grid-column: 1;
	justify-self: center;
}

section.departments .department .contactdata {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* ---------- lipstick ---------- */
section.departments .department .box {
	padding: var(--offset-small);
	padding-bottom: calc(var(--offset-small) + 20px);
	background: white;
	border-radius: 15px 15px 60px 15px;
	box-shadow: 5px 5px 30px rgba(17,17,17,.1);
	transition: all var(--transition-speed);
}

section.departments .department div.address {
	display: grid;
	grid-template-columns:18px 1fr;
	font-size: 14px;
	line-height: 24px;
	font-weight: 700;
	color: var(--color-gray-dark);
}

section.departments .department div.address i {
	color: var(--color-green); 
	margin-top: 5px;
}

section.departments .department h4 {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
}

section.departments .department h4 span {
	display: block;
	color: var(--color-green); 
	font-size: 14px;
}

section.departments .department .contactdata a {
	overflow: hidden;
	white-space: nowrap;
	max-width: 245px;
	transition: all var(--transition-speed);
	color: var(--color-black);
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	text-decoration: none;
}

section.departments .department .contactdata a i {
	color: var(--color-green); 
}

div.gm-style-iw-d {
	font-size: 15px;
	line-height: 24px;
}

div.gm-style-iw-d h4 {
	font-weight: 700;
}

div.gm-style-iw-d a {
	color: var(--color-green);
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.page .contents > *[data-size="full"] { --column: 1fr; }
section.page .contents > *[data-size="wide"] { --column: var(--grid-12); }
section.page .contents > *[data-size="large"] { --column: var(--grid-10); }
section.page .contents > *[data-size="normal"] { --column: var(--grid-8); }
section.page .contents > *[data-size="small"] { --column: var(--grid-6); }

section.page .contents > *[data-background-color="gray"] { background-color: var(--color-layout); }

/* ---------- layout ---------- */
section.page .contents {
	scroll-margin: var(--scroll-margin);
	padding: calc(var(--section-spacing)) 0 0 0 ;  
}

/* ---------- lipstick ---------- */


/* ---------- mediaquery ---------- */

@media screen and (max-width: 1360px) {
	section.page .contents > *[data-size="small"] { --column: var(--grid-8); }
	section.page .contents > *[data-size="normal"] { --column: var(--grid-10); }
	section.page .contents > *[data-size="large"] { --column: var(--grid-12); }
}

@media screen and (max-width: 1023px) {
	section.page .contents > *[data-size="full"] { --column: 1fr; }
	section.page .contents > *[data-size="wide"],
	section.page .contents > *[data-size="large"],
	section.page .contents > *[data-size="normal"],
	section.page .contents > *[data-size="small"] { --column: calc(100vw - var(--offset)); }
}
/* vars */
div.generator .portrait {
    --default-size: 150px;
}

/* layout */

div.generator form {
    display: grid;
    grid-template-columns: var(--grid-8) var(--grid-4);
    gap: var(--offset);
    justify-content: center;
}

div.generator form .form {
    grid-column: 1;
}

div.generator form .form > * {
    margin-top: var(--offset);
}

div.generator .navigation {
    display:  grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    gap: var(--offset);
    justify-content: center;
    justify-items: space-between;
    > *:last-child {
        text-align: right;
    }
}

div.generator .parent > * + * {
    margin-top: 15px;
}

div.generator .driver-licenses .checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    gap: 15px var(--offset-small);
    justify-items: start;
}

div.generator .portrait {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 30px 30px;
    justify-items: center;
}

div.generator .portrait label:not(.icon) {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
}

div.generator .portrait figure,
div.generator .portrait figure:before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--default-size);
    height: var(--default-size);
    overflow: hidden;

}
div.generator .portrait figure:has(img) {
    width: calc(var(--default-size) * 2);
    height: calc(var(--default-size) * 2);
}

div.generator .portrait:has(img) figure:before { display: none; }

div.generator .portrait .icon {
    grid-column: 1;
    grid-row: 2 / 4;
    z-index: 100;
}

/* lipstick */

div.generator .form .row.line {
    border-top: 1px solid var(--color-gray-soft);
    margin-top: 10px;
    padding-top: var(--offset-small);
}

div.generator .cv-fields {
    box-shadow: 5px 5px var(--offset-small) rgba(17, 17, 17, .2);
    border-radius: var(--offset-tiny);
    padding: var(--offset-small);
}

div.generator .portrait input[type="file"] { display: none; }
div.generator .portrait .icon {
    text-decoration: none;
    transition: all var(--transition-speed);
    cursor: pointer;
}

div.generator .portrait .icon:hover {
    background: var(--color-black);
}

div.generator .portrait figure:before {
    background: var(--color-layout);
    content: "\f4fb";
    font-family: var(--fontawesome);
    font-size: 90px;
    border-radius: 50%;
    color: rgba(17,17,17,.4);
}

div.generator .portrait figure img {
    width: calc(var(--default-size) * 2);
    height: calc(var(--default-size) * 2);
    object-fit: cover;
    border-radius: 50%;
}

div.generator .navigation {
    padding-bottom: var(--offset);
}

div.generator button span.fa-solid { color: #fff; }

div.generator input::placeholder, div.generator textarea::placeholder {
    color: gray;
}

div.generator .button[data-add] {
    width: 18em;

    i {
        margin-top: .2em;
    }
}

/* media */
/* ---------- vars ---------- */
section.page > .title {
  --height-min: 400px;
  --height-max: 65vh;
  --degrees: -6;
  --degrees-deg: -186deg;
}

section.page > .title[data-size="small"] {
  --height-min: 300px;
  --height-max: 470px;
}

/* ---------- layout ---------- */

section.page > .title,
section.page > .title .background {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(var(--height-min), var(--height-max));
  background-color: var(--color-layout);
}

section.page > .title > *,
section.page > .title .background > * {
  grid-row: 1;
  grid-column: 1;
}

section.page > .title .background {
  position: relative;
  z-index: 100;
  width: 100%;
}

section.page > .title[data-size="small"] .background {
}

section.page > .title .background .image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

section.page > .title .background .color {
  grid-column: 1 / -1;
  grid-row: 1;
  height: calc(var(--height-max) + calc(var(--offset) * 1.5));
  position: absolute;
  width: 20%;
}

section.page > .title .overlay {
  z-index: 200;
  display: grid;
  grid-template-columns: var(--grid-5) var(--grid-7);
  gap: var(--offset);
  justify-content: left;
  margin-left: 100px;
  margin-top: 125px;
}

section.page > .title .overlay > article {
  grid-column: 1;
  grid-row: 1;
}

section.page > .title .text header + p {
  margin-top: 20px;
}

/* ---------- lipstick ---------- */
section.page > .title {
}

section.page > .title .background .color {
  background: radial-gradient(circle at right, #7cbb2d, #5c8b23);
  clip-path: circle(10% at 55% 39%);
  transform: scale(3.8);
  position: absolute;
  animation: title-shape-in 0.5s forwards;
}

@keyframes title-shape-in {
  0% {
    opacity: 1;
    clip-path: circle(10% at 55% 39%);
    transform: scale(2);
  }

  100% {
    opacity: 1;
    clip-path: circle(10% at 55% 48%);
    transform: scale(8);
    z-index: 995;
  }
}

section.page > .title[data-size="small"] .background .color {
  background: radial-gradient(circle at right, #7cbb2d, #5c8b23);
}

section.page > .title .background .image {
  background-size: cover;
}

.background-top {
    background-position: top;
}

.background-middle {
    background-position: center;
}

.background-bottom {
    background-position: bottom;
}

.background-left {
    background-position: left;
}

.background-right {
    background-position: right;
}

section.page > .title .overlay {
  padding-top: var(--offset);
}

section.page > .title .overlay > article {
  color: white;
  font-size: 1.2em;
  line-height: 38px;
}

/* ---------- mediaquery ---------- */
@media screen (max-width: 1679px) {
  section.page > .title .overlay {
    grid-template-columns: var(--grid-6) var(--grid-6);
  }
}

@media screen (max-width: 1360px) {
  section.page > .title .overlay {
    grid-template-columns: var(--grid-7) var(--grid-5);
  }

  section.page > .title .text header + p {
    line-height: 32px;
  }
}

@media screen and (max-width: 1135px) {
  section.page > .title .text header + p {
    line-height: 28px;
  }

  section.page > .title .overlay {
    margin-left: 60px;
  }
}

@media screen and (max-width: 815px) {
  section.page > .title .overlay > article {
    font-size: 1.4em;
    max-width: 85%;
  }
}

@media screen and (max-width: 750px) {
  .overlay {
    margin-right: 30%;
  }
  section.page > .title .overlay {
    margin-left: 25px;
    margin-top: 0px;
    grid-template-columns: auto auto !important;
    min-width: 75%;
    margin-right: 0px;
  }

  section.page > .title .overlay > article {
    min-width: 100%;
    line-height: 23px;
    font-size: 1.3em;
  }

  section.page > .title .background .color {
    max-width: 50%;
  }

  @keyframes title-shape-in {
    0% {
      opacity: 1;
      clip-path: circle(10% at 55% 39%);
      transform: scale(2);
    }

    100% {
      opacity: 1;
      clip-path: circle(10% at 66% 46%);
      transform: scale(9);
      z-index: 995;
    }
  }
}

@media screen and (max-width: 345px) {
  @keyframes title-shape-in {
    0% {
      opacity: 1;
      clip-path: circle(10% at 55.5% 40%);
      transform: scale(3);
    }

    100% {
      opacity: 1;
      clip-path: circle(10% at 55.5% 46%);
      transform: scale(9);
      z-index: 997;
    }
  }

  section.page > .title .background .color {
    max-width: 100%;
  }

  .text p {
    font-size: 14px;
  }

  section.page > .title .overlay {
    grid-template-columns: 1fr auto;
    padding-left: var(--offset-small);
    padding-right: var(--offset-small);
    margin-left: 0px;
    justify-items: center;
    margin-top: 0px;
  }
}

@media screen and (max-height: 600px) {
  @keyframes title-shape-in {
    0% {
      opacity: 1;
      clip-path: circle(10% at 55.5% 40%);
      transform: scale(3);
    }

    100% {
      opacity: 1;
      clip-path: circle(10% at 55.5% 48%);
      transform: scale(9);
      z-index: 998;
    }
  }
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */

section.page .constructor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--offset) var(--offset-small);
}

section.page .constructor > div {
  display: grid;
  grid-template-columns: repeat(12, var(--column));
  grid-template-rows: 1fr;
  gap: 60px;
  justify-content: center;
}

section.page .constructor > .standard-text article {
  grid-column: 4 / span 6;
}

[data-interactive="1"] section.page .constructor {
  display: block;
}
[data-interactive="1"] section.page .constructor > div {
  grid-template-columns: var(--grid-6);
}
[data-interactive="1"] section.page .constructor > div > * {
  grid-column: 1;
}

/* ---------- lipstick ---------- */
section.page .constructor {
  padding-bottom: var(--offset);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  section.page .constructor > .standard-text article {
    grid-column: 4 / span 6;
  }
}

@media screen and (max-width: 1360px) {
  /* section.page .constructor > div {
    margin-left: 30%;
    margin-right: 30px;
  } */
}

@media screen and (max-width: 1023px) {
  section.page .constructor > div {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-left: var(--offset-small);
    padding-right: var(--offset-small);
  }

  section.page .constructor > .standard-text article {
    grid-column: 1;
  }
}

/* ---------- vars ---------- */
section.page .constructor > .standard-image aside .rounded {
  --image-size: 360px;
}

/* ---------- layout ---------- */

section.page .constructor > .standard-image {
  align-items: center;
}

section.page .constructor > .standard-image aside {
  grid-column: 3 / span 3;
  grid-row: 1;
}

section.page .constructor > .standard-image article {
  grid-column: 6 / span 4;
  grid-row: 1;
}

section.page .constructor > .standard-image[data-image-position="right"] aside {
  grid-column: 8 / span 3;
}

section.page
  .constructor
  > .standard-image[data-image-position="right"]
  article {
  grid-column: 4 / span 4;
}

/* ---------- lipstick ---------- */

section.page .constructor > .standard-image img {
  border-radius: var(--offset-tiny);
  box-shadow: 5px 5px 30px rgba(17, 17, 17, 0.2);
  max-width: 100%;
}

section.page .constructor > .standard-image figure.rounded img {
  border-radius: 50%;
}

[data-interactive="1"] section.page .constructor > .standard-image {
  grid-template-columns: var(--grid-5) var(--grid-5);
}

[data-interactive="1"] section.page .constructor > .standard-image > aside {
  grid-column: 1;
}
[data-interactive="1"] section.page .constructor > .standard-image > article {
  grid-column: 2;
}

[data-interactive="1"]
  section.page
  .constructor
  > .standard-image[data-image-position="right"]
  > aside {
  grid-column: 2;
}
[data-interactive="1"]
  section.page
  .constructor
  > .standard-image[data-image-position="right"]
  > article {
  grid-column: 1;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  section.page .constructor > .standard-image aside .rounded {
    --image-size: 20vw;
  }

  section.page .constructor > .standard-image aside {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  section.page .constructor > .standard-image article {
    grid-column: 7 / span 3;
    grid-row: 1;
  }

  section.page
    .constructor
    > .standard-image[data-image-position="right"]
    aside {
    grid-column: 7 / span 5;
  }

  section.page
    .constructor
    > .standard-image[data-image-position="right"]
    article {
    grid-column: 2 / span 5;
  }
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1023px) {
  body[data-page="page-2"]
    > main
    > section.textmedia
    > div.content
    > aside
    > figure
    > a
    > img {
    position: relative !important;
  }

  section.page .constructor > .standard-image aside .rounded {
    --image-size: 260px;
  }

  section.page
    .constructor
    > .standard-image[data-image-position="right"]
    article,
  section.page .constructor > .standard-image aside {
    grid-column: 1;
    grid-row: 1;
  }

  section.page
    .constructor
    > .standard-image[data-image-position="right"]
    aside,
  section.page .constructor > .standard-image article {
    grid-column: 1;
    grid-row: 2;
  }

  section.page .constructor > .standard-image aside {
    display: flex;
    justify-content: center;
  }
}

/* ---------- vars ---------- */

section.page .constructor .video {
	--icon-size: 90px; 
	--icon-font-size: 40px;
}

/* ---------- layout ---------- */
section.page .constructor .video {
	display: grid;
	grid-template-columns: var(--grid-6);
}

section.page .constructor .video a {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-content: center;
	align-items: center;
}

section.page .constructor .video a > * {
	grid-column: 1;
	grid-row: 1;
}

section.page .constructor .video a > div {
	width: 100%;
	height: 100%;
	z-index: 200;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

section.page .constructor .video a > div:before {
	position: absolute;
	width: 100%;
	height: 100%;
	content: "";
}

section.page .constructor .video a > div span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);
	z-index: 400;

}

/* ---------- lipstick ---------- */

section.page .constructor .video a {
	text-decoration: none;
	clip-path: inset(10% 10% 10% 10%);
	transition: all .2s;
}

section.page .constructor .video[data-observe="visible"] a {
	animation: clippy .7s forwards ease-in;  
}

section.page .constructor .video a > div:before {
	clip-path: polygon(0% 0%, 30% 0, 50% 50%, 30% 100%, 0% 100%);
	background: linear-gradient(to right, var(--color-green) 25%, var(--color-green-dark) 50%); 
	opacity: .7;
	margin-left: 0px;
	transition: all .2s;
	transition-timing-function: ease-in;
}

section.page .constructor .video a:hover > div:before {
	/* clip-path: polygon(100% 0%, 70% 0, 50% 50%, 70% 100%, 100% 100%); */
	animation: video-clip .5s forwards ease-in;
} 

section.page .constructor .video a > div {
	background: rgba(17,17,17,.3);
	transition: all .5s;
}

section.page .constructor .video a:hover > div {
	background: rgba(17,17,17,.5);
}

section.page .constructor .video img {
	max-width: 100%;
	filter: drop-shadow(5px 5px 30px rgba(17,17,17,.4));
}

section.page .constructor .video a > div span {
	background: var(--color-green);
	color: white;
	font-size: var(--icon-font-size);
	border-radius: 50%;
	transition: all var(--transition-speed);
}

section.page .constructor .video a:hover > div span {
	animation: bounce-in .6s forwards ease-in .2s;
	background: var(--color-black);
}
/* ---------- mediaquery ---------- */


@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	section.page .constructor .video {
		--icon-size: 60px; 
		--icon-font-size: 24px;
	}

	section.page .constructor .video {
		display: grid;
		grid-template-columns: var(--grid-10);
	}
}

@media screen and (max-width: 1023px) {
	section.page .constructor .video {
		display: grid;
		grid-template-columns: 1fr;
		padding-left: var(--offset-small);
		padding-right: var(--offset-small);
	}
}

@keyframes video-clip {
	0% {
		clip-path: polygon(0% 0%, 30% 0, 50% 50%, 30% 100%, 0% 100%);
	}

	40% {
		clip-path: polygon(0% 0%, 20% 0, 100% 50%, 20% 100%, 0% 100%);
	}

	100% {
		clip-path: polygon(0% 0%, 100% 0, 100% 50%, 100% 100%, 0% 100%);
	}
}

@keyframes clippy {
	20% {
		clip-path: inset(20% 20% 20% 20%);
	}

	40% {
		clip-path: inset(10% 30% 10% 0%);
	}

	75% {
		clip-path: inset(10% 0% 10% 30%);
	}

	100% {
		clip-path: inset(0% 0% 0% 0%);
	}
}

/* @import layout/page/title/background; */
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.page .contents > .centered {
	display: grid; 
	grid-template-columns: var(--column);
	justify-content: center;
}

/* ---------- lipstick ---------- */


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1360px) {

}

@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.page .contents > .page-block { --grad-direction: to left; }
section.page .contents > .page-block[data-media-position="right"] { --grad-direction: to right; }

/* ---------- layout ---------- */
section.page .contents > .page-block {
	display: grid; 
	grid-template-columns: 1fr var(--offset) repeat(12, var(--column)) var(--offset) 1fr;
	grid-template-rows: var(--offset) auto var(--offset);
	gap: 0 var(--offset);
}

section.page .contents > .page-block > .content {
	grid-column: 8 / span 6;
	grid-row: 2;
	z-index: 200;
	align-self: center;
}


section.page .contents > .page-block .media {
	grid-column: 3 / span 5;
	grid-row: 2;
	z-index: 100;
}

section.page .contents > .page-block[data-media-position="right"] > .content { grid-column: 3 / span 6; }
section.page .contents > .page-block[data-media-position="right"] .media { grid-column: 9 / span 6; }

section.page .contents > .page-block .background {
	grid-column: 2 / span 3;
	grid-row: 1 / -1;
}

/* ---------- lipstick ---------- */
section.page .contents > .page-block .background {
	display: none;
}

section.page .contents > .page-block .media {
	background-size: cover;
}

section.page .contents > .page-block > .content > article {
	padding: var(--offset);
	font-size: 18px;
	line-height: 34px;
	background: linear-gradient(var(--grad-direction), var(--color-layout) 0%, rgba(244,244,244, 0) 100%);
	filter: drop-shadow(-10px 10px 60px rgba(17,17,17,.23))
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.page .contents > .media-text figure {
  --image-size: 360px;
}
section.page .contents > .media-text .brand figure {
  --image-size: 250px;
}

section.page .contents > .media-text .content[data-position="right"] {
  --areas: "media text";
}
section.page .contents > .media-text .content[data-position="left"] {
  --areas: "text media";
}

/* ---------- layout ---------- */
section.page .contents > .media-text {
  display: grid;
  grid-template-columns: var(--column);
  justify-content: center;
}

section.page .contents > .media-text .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: var(--areas);
  gap: var(--offset);
  align-items: center;
}

section.page .contents > .media-text .content > article {
  grid-area: text;
}
section.page .contents > .media-text .content > aside {
  grid-area: media;
  justify-self: center;
}

section.page .contents > .media-text {
  display: grid;
  grid-template-columns: var(--column);
  justify-content: center;
}

section.page .contents > .media-text .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: var(--areas);
  gap: var(--offset);
  align-items: center;
}
/* ---------- lipstick ---------- */
section.page .contents > .media-text-2 {
  display: grid;
  grid-template-columns: var(--grid-4) var(--grid-4); /* Updated to have two columns */
  justify-content: center;
}

section.page .contents > .media-text-2 .content {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
section.page .contents > .media-text-2 .content > article {
  width: 80%;
}
section.page .contents > .media-text figure {
  --image-size: 20vw;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1600px) {
  section.page .contents > .media-text-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 1360px) {
}

@media screen and (max-width: 1023px) {
  section.page .contents > .media-text figure {
    --image-size: 260px;
  }

  section.page .contents > .media-text .content {
    grid-template-columns: 1fr;
  }
  section.page .contents > .media-text .content[data-position="right"] {
    --areas: "text" "media";
  }
  section.page .contents > .media-text .content[data-position="left"] {
    --areas: "media" "text";
  }
}

@media screen and (max-width: 800px) {
  section.page .contents > .media-text-2 {
    display: flex;
    flex-direction: column;
  }
}

/* ---------- vars ---------- */

section.page .job-apply .form .fields .row {
  --default-row: 150px 1fr;
}

/* ---------- layout ---------- */
section.page .job-apply {
  display: grid;
  grid-template-columns: var(--grid-1) var(--grid-7) var(--grid-3) var(--grid-1);
  gap: var(--offset);
  justify-content: center;
}

section.page .job-apply .form {
  grid-column: 2;
}

section.page .job-apply .action {
  grid-column: 1 / -1;
  grid-row: auto;
}

section.page .job-apply.job-detail aside {
  grid-column: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--offset);
  align-content: start;
}

section.page .job-apply.job-detail[data-open="1"] aside > div:not(:last-child) {
  display: none;
}

/* ---------- lipstick ---------- */
section.page .job-apply .form .fields {
  padding: var(--offset-small);
  background: white;
  border-radius: 10px;
  box-shadow: 10px 10px 30px rgba(17, 17, 17, 0.1);
}

section.page .job-apply .form .row > h3 {
  margin-top: 0;
}

section.page .job-apply .form .fields + .fields {
  margin-top: var(--offset);
}

section.page .job-apply .side h4 {
  font-size: 24px;
}

section.page .job-apply .side > div {
  padding: var(--offset-small);
  border-radius: var(--offset-small);
  background: var(--color-layout);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  section.page .job-apply {
    display: flex;
    flex-direction: column;
  }
}

section.team .employee { grid-template-rows: none; !important }
section.team .employee > .portrait { display: none; !important }



/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.team .team-content {
  display: grid;
  grid-template-columns: var(--grid-12);
  justify-content: center;
}

section.team .department {
  display: grid;
  grid-template-columns: var(--grid-3) 1fr;
  grid-template-rows: auto;
  gap: var(--offset);
}

section.team .department .employees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-3), 1fr));
  gap: var(--offset);
}

section.team .department .team-content .employees {
  background-color: red;
}

/* .team-content:nth-of-type(4) .department .employees {
  grid-template-columns: inherit;
} */

section.team .department address,
section.team .department .data > div {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 10px;
  align-items: center;
}

section.team .department address {
  align-items: start;
}

section.team .department .data > div[data-value=""] {
  display: none;
}

section.team .team-content + * {
  margin-top: var(--offset);
}

/* ---------- lipstick ---------- */
section.team {
  padding: var(--section-spacing) 00;
  padding-bottom: 0px;
  padding-top: 0px;
}

section.team .team-content .text {
  scroll-margin: var(--scroll-margin); /* see layout.css */
}
section.team .team-content:nth-child(even) {
  padding: var(--offset) 0;
  background: var(--color-layout);
}

section.team .department > article {
  padding-top: var(--offset-small);
}

section.team .department > article h3 span {
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-primary);
}

section.team .department + .department {
  margin-top: var(--offset);
}

section.team .department a {
  transition: all var(--transition-speed);
  color: var(--color-black);
  font-weight: 600;
}

section.team .department i {
  color: var(--color-green);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
  section.team .department .employees {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-left: 10px;
  }

  .team-content:nth-of-type(4) .department .employees {
    grid-template-columns: auto;
  }
}

@media screen and (max-width: 1379px) {
  section.team .department .employees {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-left: 35px;
  }
}

@media screen and (max-width: 1179px) {
  section.team .department .employees {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    margin-left: 70px;
  }
}

@media screen and (max-width: 1130px) {
  section.team .team-content:nth-child(even) {
    padding-left: 20px;
    padding-right: 20px;
  }

  section.team .team-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 1023px) {
  section.team .department {
    grid-template-columns: 1fr;
  }
  section.team .department .employees {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-left: 45px;
  }
}

@media screen and (max-width: 620px) {
  section.team .department .employees {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-left: 10px;
    margin-right: 10px;
    justify-self: center;
  }
}

/* ---------- vars ---------- */

section.team .employee {
  /* 	--delay: 0; */
  --flag: 30px;
  --overlay-color: var(--color-black);
  --video: 60px;
}

/* ---------- layout ---------- */

section.team .employee {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 150px 200px 1fr;
  /*grid-template-rows: 10px 10px 1fr;*/
  align-items: start;
  position: relative;
}

section.team .employee > .portrait {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 10px;
  align-items: end;
  justify-content: center;
}

section.team .employee > .video {
  grid-column: 1;
  grid-row: 1 / 3;
  position: absolute;
  left: calc(50% - (var(--video) / 2));
  bottom: 30px;
  z-index: 300;
}
section.team .employee > .video,
section.team .employee > .video a {
  display: flex;
  justify-content: center;
  align-items: center;
}

section.team .employee > .video a {
  width: var(--video);
  height: var(--video);
}

section.team .employee > .content {
  grid-column: 1;
  grid-row: 2 / 4;
  z-index: 100;
  height: 100%;
}

section.team .employee .language {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--offset-tiny);
  margin-top: var(--offset-tiny);
}
section.team .employee .language > div {
  width: var(--flag);
  height: var(--flag);
}

section.team .employee .data {
  margin-top: var(--offset-tiny);
}

section.team .employee .data > div {
  justify-content: center;
  grid-template-columns: 15px auto;
}

/* ---------- lipstick ---------- */
section.team .employee {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-delay: var(--delay), 0, 0;
  transition-duration: 0.5s, var(--transition-speed), var(--transition-speed);
  transform-origin: center left;
  transform: rotate(0deg);
}

section.team .employee[data-observe="visible"] {
  opacity: 1;
}

section.team .employee[data-observe="visible"]:hover {
  z-index: 100;
  filter: drop-shadow(15px 15px 30px rgba(17, 17, 17, 0.5));
  transform: scale(1.05) rotate(-2deg);
}

section.team .employee img {
  max-width: 100%;
}

section.team .employee > .portrait {
  transition: all 0.3s;
  background-size: cover;
  background-position: 50% 0%;
  border-radius: var(--offset-small) var(--offset-small) 0 0;
  filter: contrast(95%);
}

section.team .employee:hover > .portrait {
  filter: contrast(110%);
}

section.team .employee > .video a {
  transition: all var(--transition-speed);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  font-size: 24px;
  text-decoration: none;
}
section.team .employee > .video a i {
  transition: all var(--transition-speed);
}

section.team .employee > .video a:hover {
  background: rgba(120, 184, 41, 1);
}

section.team .employee > .video a:hover i {
  color: var(--color-black);
}

section.team .employee > .content {
  opacity: 1;
  color: white;
  padding: var(--offset-small);;
  /*padding-top: 200px;
	background: linear-gradient(to bottom, rgba(34,34,34,0) 0px, rgba(34,34,34,1) 180px, rgba(34,34,34,1));*/
  /*padding-top: 100px;*/
  background: rgba(34, 34, 34, 1);
  /*border-radius: 0 0 120px var(--offset-small);*/
  border-radius: 0 0 var(--offset-small) var(--offset-small);
    /*var(--offset-small) 120px var(--offset-small)*/;
  text-align: center;
  transition: all 0.5s;
  max-width: 360px;
  max-height: 221px;
}

section.team .employee > .content h4 {
  line-height: 36px;
  font-size: 24px;
  font-weight: 400;
}

section.team .employee > .content h4 span {
  font-size: 16px;
  line-height: 24px;
  display: block;
  color: var(--color-green);
  font-weight: 700;
}

section.team .employee .language img {
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(17, 17, 17, 0.1);
}

section.team .employee .data a {
  font-size: 14px;
  color: white;
  max-width: 220px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.team .filter {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: var(--offset-small);
}

/* ---------- lipstick ---------- */
section.team .filter {
	padding: var(--offset-small) 0 var(--offset) 0;
}
section.team .filter > * {
	font-weight: 700;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
	section.team .filter {
		text-align: center;
		grid-template-columns: 1fr;
		justify-content: center;
	}

	section.team .filter .button-container {
		justify-content: center;
	}

}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.contact {
  display: grid;
}

section.contact > div {
  grid-column: 1;
  grid-row: 1;
}

section.contact .image {
  z-index: 100;
  display: grid;
  grid-template-columns:
    1fr calc(50% - var(--grid-4)) var(--offset) var(--grid-7)
    auto;
  align-items: end;
  justify-content: center;
}

section.contact .image .color {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: stretch;
}

section.contact .image .picture {
  grid-column: 1;
  grid-row: 1;
  z-index: 200;
}

section.contact .content {
  z-index: 100;
  display: grid;
  grid-template-columns: var(--grid-3) var(--grid-4) var(--grid-5);
  justify-content: center;
  gap: var(--offset);
}

section.contact .content .story {
  grid-column: 2;
}
section.contact .content .cta {
  grid-column: 3;
  align-self: center;
}

/* ---------- lipstick ---------- */

section.contact:last-child {
  padding-bottom: 0;
  background: linear-gradient(120deg, white 30%, var(--color-layout));
}

section.contact .image {
  font-size: 0;
  line-height: 0;
}

section.contact .image .color {
  background: radial-gradient(circle at right, #7cbb2d, #5c8b23);
  clip-path: circle(10% at 50% 46%);
  right: 40%;
  position: relative;
}

section.contact .image > div {
  opacity: 0;
}

section.contact .image img {
  max-width: 100%;
}

section.contact .content {
  padding: 90px 0 var(--offset) 0;
}

section.contact[data-observe="visible"] .image > .picture[data-show="1"] {
  animation: fade-in 0.5s forwards ease-in-out;
  z-index: 2;
}
section.contact[data-observe="visible"] .image > .color {
  animation: circle-shape-in 1.5s forwards;
}

@keyframes circle-shape-in {
  0% {
    opacity: 1;
    clip-path: circle(40% at 1% 47%);
  }

  75% {
    clip-path: circle(40% at 1% 47%);
  }

  100% {
    opacity: 1;
    clip-path: circle(
      40% at 45% 47%
    ); /* Adjust the circle size and positioning */
    z-index: 1;
  }
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
  section.contact .content {
    grid-template-columns: var(--grid-4) var(--grid-8);
  }

  section.contact .content .cta {
    grid-column: 2;
    grid-row: 2;
  }
  section.contact .content .story {
    grid-column: 2;
    grid-row: 1;
  }

  @keyframes circle-shape-in {
    0% {
      opacity: 1;
      clip-path: circle(40% at 1% 47%);
    }

    75% {
      clip-path: circle(40% at 1% 47%);
    }

    100% {
      opacity: 1;
      clip-path: circle(
        40% at 45% 65%
      ); /* Adjust the circle size and positioning */
      z-index: 1;
    }
  }
}

@media screen and (max-width: 1023px) {
  section.contact {
    padding-left: var(--offset-small);
    padding-right: var(--offset-small);
  }

  /* section.contact .content {
    padding-top: 0px;
  } */

  section.contact .image {
    display: none;
  }

  section.contact .content {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  section.contact .content .story,
  section.contact .content .cta {
    grid-column: 1;
  }

  section.contact .content .cta {
    grid-row: 2;
  }

  @keyframes circle-shape-in {
    0% {
      opacity: 1;
      clip-path: circle(40% at 1% 47%);
    }

    75% {
      clip-path: circle(40% at 1% 47%);
    }

    100% {
      opacity: 1;
      clip-path: circle(
        60% at 45% 50%
      ); /* Adjust the circle size and positioning */
      z-index: 1;
    }
  }
}

/* ---------- vars ---------- */

section.contact .cta .form {
	--row: 140px 1fr;
	--input-size: 36px;
}
/* ---------- layout ---------- */

section.contact .cta form{
	display: grid;
	grid-template-rows: auto 25px 25px;
}
section.contact .cta .form {
	grid-column: 1;
	grid-row: 1 / 3;
}

section.contact .cta .action {
	grid-row: 2 / 4;
	grid-column: 1;
	display: flex;
	justify-content: center;
}

section.contact .cta .form .fields .row {
	grid-template-columns: 1fr;
	gap: 0px;
}


/* ---------- lipstick ---------- */

section.contact .cta .form {
	background: linear-gradient(60deg, var(--color-green), var(--color-green-dark)); 
	padding: var(--offset-small);
	padding-bottom: var(--offset); 
	border-radius: var(--offset-tiny); 
	box-shadow: 10px 10px 30px rgba(17,17,17,.3);
	color: white;
}

section.contact .cta .form .fields .row label {
	padding-left: 15px;
}

section.contact .cta .form input,
section.contact .cta .form textarea,
section.contact .cta .form select {
	background: rgba(255,255,255,.2);
	color: white;
}

section.contact .cta .form select option {
	color: var(--color-black);
} 

section.contact .cta .form *::placeholder {
	color: rgba(255,255,255,.5);
} 

section.contact .cta .form textarea {
	min-height: calc(var(--line-height) * 3);
}

section.contact .cta button:hover i:before {
	color: black;
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.contact .story > div + div {
	margin-top: var(--offset); 
}

section.contact .story .data {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--offset-tiny);
}

section.contact .story .data .column {
	display: flex;
	justify-content: flex-start;
	column-gap: 10px;
}

section.contact .story .data strong {
	display: block;
}

/* ---------- lipstick ---------- */
section.contact .story > div {
	font-size: 16px;
	line-height: 30px;
}

section.contact .story .data i {
	color: var(--color-green); 
	font-size: 1.5em;
}


section.contact .story .data a {
	transition: all var(--transition-speed);
	color: var(--color-black); 
	font-weight: 400;
	
}
section.contact .story .data a:hover {
	color: var(--color-green); 
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {

	section.contact .story .data {
		grid-template-columns: 1fr;
	}

	section.contact .story .data .column:nth-child(2) {
		padding-left:34px;
	}
}
.button {
	--size: 50px;
	--line-height: 32px;
	--padding: calc((var(--size) - var(--line-height)) / 3) 25px;
	--radius: calc(var(--size) / 2);
}

.button[data-size="small"] {
	--size: 50px;
	--line-height: 32px;
	/*--padding: calc((var(--size) - var(--line-height)) / 4) calc(var(--line-height) / 2);*/
	--padding: calc((var(--size) - var(--line-height)) / 3) 25px;
}

.button[data-size="tiny"] {
	--size: 30px;
	--line-height: 24px;
	--padding: calc((var(--size) - var(--line-height)) / 4) 25px;
	--radius: 20px;
}

.button {
	display: inline-grid; 
	grid-template-columns: 20px 1fr;
	grid-template-rows: 1fr;
	gap: 5px;
	place-items: center;
	background: var(--color-green);
	font-family: var(--font-family);
	border-radius: var(--radius); 
	font-size: 15px;
	font-weight: 600;
	cursor: pointer !important;
	padding: var(--padding);
	color: var(--color-black); 
	text-decoration: none;
	border: 0; 
	min-height: var(--size); 
	box-shadow: 10px 10px 20px rgba(17,17,17,.2);
	transition: all var(--transition-speed);
	transform: translateY(-3px);
}

.button i:before {
	margin-right: 10px;
	color: white;
	transition: all var(--transition-speed);
}

.button[data-size="small"] {
	font-size: 15px;
}

.button[data-size="tiny"] {
	font-size: 12px;
	grid-template-columns: 10px 1fr;
	box-shadow: 4px 4px 10px rgba(17,17,17,.2);
	transform: translateY(-2px);
}

.button:hover,
.button[data-color]:hover {
	background: var(--color-black); 
	color: white;
	box-shadow: 5px 5px 10px rgba(17,17,17,.3);
	transform: translateY(0);
}

.button[data-size="tiny"]:hover {
	box-shadow: 1px 1px 5px rgba(17,17,17,.3);
}

.button[data-color="black"]:hover {
	background: white;
	color: var(--color-black); 
}

.button[data-color="orange"] {
	background: var(--color-orange); 
	color: var(--color-black);
}

.button[data-color="gold"] {
	background: var(--color-gold); 
	color: var(--color-black);
}

.button[data-color="blue"] {
	background: var(--color-blue); 
	color: white;
}

.button[data-color="red"] {
	background: var(--color-red); 
	color: white;
}

.button[data-color="green"] {
	background: var(--color-green); 
}

.button[data-color="black"] {
	background: var(--color-black); 
	color: white;
}

.button[data-color="gray"] {
	background: var(--color-layout);
	color: var(--color-black); 
}

.button[data-color="black"]:hover i:before,
.button[data-color="gray"]:not(:hover) i:before { 
	color: var(--color-black); 
}

@media screen and (max-width: 1439px) {
	.button {
		--size: 40px;
	}	
}

@media screen and (max-width: 1023px) {
	.button {
		--size: 40px;
		--line-height: 32px;
		font-size: 14px;
	}	
}
@media screen and (max-width: 500px) {
	.button {
		--size: 37px;
		--line-height: 32px;
		font-size: 14px;
	}	
}
.orange-hover:hover{
	background: var(--color-orange); 
	color: var(--color-black);
}
/* ---------- vars ---------- */
.icon {
	--size: var(--icon-size, 60px); 
	--color-background: var(--icon-background, var(--color-green));
	--color-text: var(--icon-color,white);
}

.icon[data-size="small"] {
	--size: 40px;
}

/* ---------- layout ---------- */
.icon {
	display: flex; 
	justify-content: center;
	align-items: center;
	width: var(--size);
	height: var(--size); 
	border: 0; 
}

.icon[data-hover] {
	cursor: pointer;
}

/* ---------- lipstick ---------- */
.icon {
	border-radius: 50%;
	font-size: calc(var(--size) / 2.5); 
	background: var(--color-background);
	color: var(--color-text); 
	transition: all var(--transition-speed); 
}

.icon[data-color="green"] {
	background: var(--color-green);
	color: white;
}

.icon[data-color="purple"] {
	background: var(--color-purple);
	color: white;
}

.icon[data-color="red"] {
	background: var(--color-red);
	color: white;
}

.icon[data-color="blue"] {
	background: var(--color-blue);
	color: white;
}

.icon[data-color="gold"] {
	background: var(--color-gold);
	color: white;
}

.icon[data-color="orange"] {
	background: var(--color-orange);
	color: white;
}

.icon[data-hover="orange"]:hover {
	background: var(--color-orange);
	color: white
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


} 
/* ---------- vars ---------- */

/* ---------- layout ---------- */
div.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--offset-small) calc(var(--offset-small) / 2);
  justify-content: start;
}

/* ---------- lipstick ---------- */

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
}

/* ---------- vars ---------- */
section.hero {
  --content: 650px;
  --search: 156px;
}

/* ---------- layout ---------- */
section.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:
    calc(var(--content) - (var(--search) / 2)) calc(var(--search) / 2)
    calc(var(--search) / 2);
  gap: 0;
  overflow: hidden;
  padding-bottom: 20px;
}

section.hero > * {
  grid-column: 1;
}
section.hero > .content {
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: 1fr var(--grid-6) 1fr;
  grid-template-rows: auto;
  align-items: end;
  justify-content: center;
}

section.hero > .content .image,
section.hero > .content .shape,
section.hero > .content .overlay {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 100%;
}

section.hero > .content .shape {
  position: relative;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

section.hero > .content .shape > div {
  position: absolute;
  z-index: 10;
  width: 15%;
  height: calc(100% + 90px);
}

section.hero > .content .overlay {
  z-index: 200;
}

section.hero > .content .title {
  grid-column: 2;
  grid-row: 1;
  z-index: 300;
}

section.hero > .search {
  grid-row: 2 / 4;
  z-index: 400;
  display: grid;
  grid-template-columns: 1fr var(--grid-10) 1fr;
  grid-template-rows: auto;
}

section.hero > .search > * {
  grid-column: 2;
  grid-row: 1;
}

/* ---------- lipstick ---------- */

section.hero > .content > .image {
  background-size: cover;
  background-position: 50%;
}

section.hero > .content .overlay {
  background: radial-gradient(
    at 50% 100%,
    rgba(17, 17, 17, 0.8) 150px,
    rgba(17, 17, 17, 0) 50%
  );
}

section.hero > .content > .title {
  padding: var(--offset) 0 calc((var(--search) / 2) + var(--offset)) 0;
}

section.hero > .content .shape > div {
  background: radial-gradient(circle at right, #7cbb2d, #5c8b23);
  clip-path: circle(0% at 0% 0%);
  opacity: 1;
  position: absolute;
}

section.hero[data-observe="visible"] > .content .shape > div {
  animation: hero-shape-in 0.5s forwards;
}

.bubble-article {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-width: 20%;
  top: 25%;
  left: 10%;
  opacity: 0;
  display: flex;
  z-index: 999;
  cursor: pointer;
  animation: button-grow 1s forwards 0.5s;
}

.bubble-article header h1 {
  margin-bottom: 0px;
}

div.button-container {
  justify-content: flex-start;
}

@keyframes hero-shape-in {
  0% {
    opacity: 0;
    clip-path: circle(0% at 0% 0%);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    clip-path: circle(10% at 52% 48%);
    transform: scale(9);
    z-index: 995;
    overflow: hidden;
  }
}

@keyframes button-grow {
  0% {
    /* transform: translate(-50%, -50%) scale(0); */
    opacity: 0;
  }

  100% {
    /* transform: translate(-30%, -50%) scale(0.3); Adjust the final scale as needed */
    opacity: 1;
    z-index: 996;
  }
}

section.hero > .search > .search-form > form > .action > .button {
  display: none;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1360px) {
  section.hero {
    --content: 70vh;
    --search: 228px;
  }
  section.hero > .content {
    grid-template-columns: 1fr var(--grid-12) 1fr;
  }

  .bubble-article {
    top: 20%;
    left: 5%;
  }

  @keyframes button-grow {
    0% {
      /* transform: translate(-50%, -50%) scale(0); */
      opacity: 0;
    }

    100% {
      /* transform: translate(-30%, -50%) scale(0.3); Adjust the final scale as needed */
      opacity: 1;
      transform: scale(1);
      z-index: 996;
    }
  }
}

@media screen and (max-width: 1160px) {
  section.hero > .search > .search-form > form > .action > .button {
    display: flex;
    margin-left: 15px;
    margin-bottom: 0px;
    max-height: 60px;
    min-height: 60px;
    margin-top: 2px;
  }

  .bubble-article {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  section.hero {
    --content: 45vh;
    --search: 120px;
    grid-template-rows:
      calc(var(--content) - (var(--search) / 2)) calc(var(--search) / 2)
      auto;
  }

  section.hero > .content > .title > .text > header > .large > span {
    color: white;
  }

  section.hero > .content .overlay {
    background: none;
  }

  section.page > .title .overlay {
    margin-top: 100px;
  }

  @keyframes hero-shape-in {
    0% {
      opacity: 0;
      clip-path: circle(10% at 40% 46%);
      transform: scale(0);
    }

    100% {
      opacity: 1;
      clip-path: circle(10% at 54% 50%);
      transform: scale(8);
      z-index: 997;
      
    }
  }

  .bubble-article {
    display: none;
  }

  @keyframes button-grow {
    0% {
      /* transform: translate(-50%, -50%) scale(0); */
      opacity: 0;
    }

    100% {
      /* transform: translate(-30%, -50%) scale(0.3); Adjust the final scale as needed */
      opacity: 1;
      transform: scale(0.8);
      z-index: 996;
    }
  }
}

@media screen and (max-width: 800px) {
  .bubble-article {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  section.hero > .content .shape > div {
    width: 30%;
    left: -40%;
  }
}

/* ---------- vars ---------- */
.search .search-form {
  --icon-size: 80px;
  --input-size: 50px;
}

/* ---------- layout ---------- */

.search .search-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}

.search .search-form form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr var(--icon-size);
  justify-content: space-evenly;
  align-items: center;
  gap: var(--offset-small);
}

.search .search-form form label {
  display: block;
}

.search .search-form form > div.action {
  grid-column: 4;
}

.search .select {
  position: relative;
}
.search .select:has(select):before {
  position: absolute;
  display: block;
  top: 10px;
  right: 25px;
  z-index: 200;
}

/* ---------- lipstick ---------- */
.search .search-form {
  color: white;
  background: var(--gradient-dark);
  border-radius: var(--offset-small);
  padding: var(--offset-small);
}

.search .search-form form label {
  font-weight: 700;
  color: white;
  padding: 5px 15px;
}

.search .search-form form label i {
  color: var(--color-green);
  font-size: 24px;
}
.search .select:has(select):before {
  font-family: var(--fontawesome);
  color: var(--color-green);
  font-weight: 700;
  content: "\f0d7";
}

.search .select:has(select) select {
  transition: all var(--transition-speed);
  font-weight: 700;
}

.search .select:has(select) select.focussed {
  background: #ffc7a2;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
}

@media screen and (max-width: 1160px) {
  .search .search-form {
    --icon-size: 60px;
    --input-size: 40px;
  }

  .search .search-form form {
    grid-template-columns: 1fr 1fr;
  }

  .search .search-form form > div.action {
    grid-column: 2 / -1;
    display: flex;
    justify-content: flex-start;
    align-self: end;
    margin-left: 15px;
  }

  section.hero > .search > .search-form > form > .action > .button {
    color: white;
    width: 100%;
    margin-right: 5px;
    border-radius: 40px;
    font-size: 16px;
  }

  .action .icon {
    min-width: 60px;
    min-height: 60px;
    height: 60px;
    width: 60px;
  }
}

@media screen and (max-width: 700px) {
  .search .search-form form {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .search .search-form form > div.action {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-left: 0px;
  }
}

/* ---------- layout---------- */
.form {
	--input-size: 50px;
	--border-radius: calc(var(--input-size) / 2);
	--default-row: var(--row);  
}

.form .fields,
.form .fields .columns > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 15px var(--offset-small); 
}

.form .fields .row.extended {
	grid-column: 1 / -1;
}

.form .fields .row {
	display: grid;
	grid-template-columns: var(--default-row, 120px 1fr);
	gap: var(--offset-small); 
	justify-content: center;
	align-items: center;
}

.form .fields .columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--offset);
}

.form .fields .row .inline {
	display: flex; 
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap; 
} 

.form .fields .row .inline > * + * {
	margin-left: var(--offset-small); 
}

.form .fields .top-align {
	align-self: start;
} 


/* ---------- lipstick ---------- */
.form .fields .row div:first-child {
	line-height: 18px;
}

.form .fields .row label {
	font-weight: 700;
	font-size: 13px;
}

.form .fields .row label > span {
	font-size: 14px;
	font-weight: 18px;
	font-weight: 300;
	display: block; 
}
.form .hide {
	display: none;
}

.form .fields .row.action {
	margin-top: var(--offset-small); 
	display: flex;
	justify-content: flex-end;
}

.form .fields .row > h3 {
	position: relative;
	margin-top: var(--line-height); 
	margin-bottom: calc(var(--line-height) / 2); 
	font-weight: 700;
	font-size: 16px;
	color: var(--color-black); 
	grid-column: 1 / -1;
}

.form .fields .row > h3 i {
	color: var(--color-green); 
}

.form .fields .row > h3.first {
	margin-top: 0;
}

/* ---------- media query ---------- */

@media screen and (max-width: 1360px) {
	.form {
		--input-size: 40px;
	}
}

@media screen and (max-width: 1023px) {

	.form .fields {
		grid-template-columns: 1fr;
	}

	.form .fields .row.extended {
		grid-column: 1;
	}

	.form .fields .row {
		grid-template-columns: 1fr;
		gap: 5px;
	}

}

/* ---------- layout---------- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
textarea,
select {
	font-size: 14px;
	line-height: var(--line-height);
	border: 0px; 
	padding: calc((var(--input-size) - var(--line-height)) / 2) calc(var(--input-size) / 2);
	border-radius: calc(var(--input-size) / 2); 
	width: 100%;
	font-family: var(--font-family);
	background: var(--color-layout); 
}

.search-form select,
.form select {
	appearance: none;
	outline: none;
}

.form select::placeholder,
.form input::placeholder,
.form textarea::placeholder {
	font-size: 13px; 
	font-weight: 600;
	font-style: italic;
	color: var(--color-gray-light); 
}

select { position: relative; }


/* ---------- lipstick ---------- */
select {
	min-height: var(--input-size);
}

textarea {
	min-height: calc(var(--line-height) * 4);
}


/* ---------- media query ---------- */
/* ---------- vars ---------- */

.form .fields .row.date  {
	--default-row: 120px auto auto auto;  
}

/* ---------- layout ---------- */
.form .fields .row.date  {
	display: grid; 
	justify-content: start;
}

.form .fields .row.date > div {
	display: flex;
	gap: 10px;
	align-items: center;
} 

/* ---------- lipstick ---------- */
.form .fields .row.date > div:nth-child(n+2) label {
	color: var(--color-gray-dark); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- layout---------- */
.checkboxes label {
	display: inline-flex;
	justify-content: start;
	gap: 5px;
}

.checkboxes label input { display: none; }

/* ---------- lipstick ---------- */

.checkboxes label {
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.checkboxes label > span {
	display: inline-block;
	margin-right: 5px;
}

.checkboxes label > span:before {
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: "\f058";
	color: var(--color-gray);
	opacity: .2;
	font-weight: 700;
	font-size: 20px;
}

.checkboxes label > input:checked + span:before {
	color: var(--color-primary);
	content: "\f058";
	opacity: 1;
}

/* ---------- media query ---------- */

/* ---------- vars ---------- */


/* ----------  ---------- */

*[data-text-align="center"] {
    text-align: center;
}
*[data-text-align=""],
*[data-text-align="left"] {
    text-align: left;
}

*[data-text-align="right"] {
    text-align: right;
}

.text[data-text-size="small"],
.text[data-text-size="small"] p {
	--font-size: 14px;
	--line-height: 24px;
	font-size: var(--font-size); 
	line-height: var(--line-height);
}

.text > * + *,
[data-interactive="1"] .text > * + * {
	margin-top: var(--line-height); 
}

.text h3 + p {
	margin-top: 20px; 
}

.text-large p {
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: 600;
}

.text ul {}
.text ul li,
.text ol li {
	padding-left: var(--offset-small); 
}

.text ul li:before,
.text ol li:before {
	font-family: "Font Awesome 6 Pro";
	content: "\f105";
	color: var(--color-primary);
	position: absolute; 
	margin-left: -20px;
}

.text ol li:before { font-family: var(--font-family); font-weight: 700; }
.text ol li:nth-child(1):before { content: "1"; }
.text ol li:nth-child(2):before { content: "2"; }
.text ol li:nth-child(3):before { content: "3"; }
.text ol li:nth-child(4):before { content: "4"; }
.text ol li:nth-child(5):before { content: "5"; }
.text ol li:nth-child(6):before { content: "6"; }
.text ol li:nth-child(7):before { content: "7"; }
.text ol li:nth-child(8):before { content: "8"; }
.text ol li:nth-child(9):before { content: "9"; }
.text ol li:nth-child(10):before { content: "10"; }

.text p a,
.text ul a:not(.button) {
	color: var(--color-text); 
	display: inline-block;
	padding: 0 8px;
	font-weight: 600;
	background: var(--color-layout); 
	border-radius: 5px;
	transition: all var(--transition-speed);
}

.text p a:not(.button):hover {
	background: rgba(120, 184, 41,.3); 
}

.text ul a:not(.button) {
	background: none;
	padding: 0; 
}

.text ul a:not(.button):hover {
	color: var(--color-green); 
}

.text figure img {
	max-width: 100%;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
	.text-large p {
		font-size: 18px;
		line-height:28px;
		font-weight: 600;
	}
}

/* ---------- vars ---------- */
blockquote {
  --fill-color: var(--color, var(--color-primary));
  --icon-size: 60px;
}

/* ---------- layout ---------- */
.text blockquote {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--icon-size) / 2)) var(--grid-4);
  grid-template-rows: calc(var(--icon-size) / 2) auto auto;
  gap: 0 var(--offset-tiny);
  justify-items: center;
  justify-content: center;
  align-items: start;
}

.text blockquote .shape {
  grid-column: 1 / 1;
  grid-row: 1 / -1;
}

.text blockquote .content {
  grid-column: 3;
  grid-row: 2;
}

.text blockquote .author {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
}

.text blockquote + p {
  margin-top: 48px;
}

/* ---------- lipstick ---------- */

.text blockquote > * {
  opacity: 0;
}

.text blockquote .shape svg {
  max-width: 100%;
}

.text blockquote svg * {
  fill: var(--fill-color);
  opacity: 0;
}

.text blockquote .shape i {
  color: var(--fill-color);
  font-size: 64px;
  font-style: italic;
}

.text blockquote .content p {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  font-style: italic;
  color: var(--fill-color);
}

.text blockquote .author {
  font-weight: 700;
  font-style: italic;
  color: var(--color-gray-soft);
}

.text blockquote .author:empty {
  display: none;
}

/* ---------- visible ---------- */

.text blockquote[data-observe="visible"] .shape,
.text blockquote[data-observe="visible"] .content,
.text blockquote[data-observe="visible"] .author {
  animation: fade-in 0.4s forwards ease-out;
}
.text blockquote[data-observe="visible"] svg circle {
  animation: quote-ball-in 0.6s forwards ease-out 0.2s;
}

.text blockquote[data-observe="visible"] svg path {
  animation: fade-in 0.4s forwards ease-out 0.6s;
}

.text blockquote[data-observe="visible"] .content {
  animation-delay: 0.7s;
}
.text blockquote[data-observe="visible"] .author {
  animation-delay: 0.8s;
}

@keyframes quote-ball-in {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  20% {
    transform: translateY(5px);
  }

  40% {
    opacity: 1;
    transform: translateY(-25px);
  }

  60% {
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  .text blockquote .shape {
    grid-column: 1 / 1;
  }
}

@media screen and (max-width: 550px) {
  .text blockquote {
    display: flex;
    margin-right: 10%;
    margin-left: 10%;
  }

  .text blockquote .shape i {
    font-size: 32px;
  }
}

/* ---------- vars ---------- */
section.usp {
  --min-column: 260px;
  --icon-size: 24px;
}

/* ---------- layout ---------- */
section.usp {
  display: grid;
  grid-template-columns: var(--grid-8);
  justify-content: center;
}
section.usp .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-column), 1fr));
  gap: var(--offset);
}

section.usp .item {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  gap: 10px;
  justify-content: start;
  align-items: start;
}

section.usp .item > div {
  position: relative;
}
section.usp .item i {
  position: absolute;
}

/* ---------- lipstick ---------- */
section.usp {
  padding: var(--offset) 0;
}

section.usp .item {
  font-size: 16px;
  line-height: 26px;
}

section.usp .item h3 {
  font-size: 18px;
}

section.usp .item i {
  font-size: 24px;
  color: var(--color-green);
}

/* ---------- visible ---------- */

section.usp[data-observe] .item > div:last-child,
section.usp[data-observe] .item > div:first-child i {
  opacity: 0;
}

section.usp[data-observe="visible"] .item > div:first-child i {
  animation: usp-check-in 0.2s forwards ease-in-out;
}
section.usp[data-observe="visible"] .item > div:last-child {
  animation: fade-in 0.1s forwards ease-in-out 0.1s;
}
section.usp[data-observe="visible"] .item:nth-child(2) > div:first-child i {
  animation-delay: 0.2s;
}
section.usp[data-observe="visible"] .item:nth-child(2) > div:last-child {
  animation-delay: 0.3s;
}
section.usp[data-observe="visible"] .item:nth-child(3) > div:first-child i {
  animation-delay: 0.4s;
}
section.usp[data-observe="visible"] .item:nth-child(3) > div:last-child {
  animation-delay: 0.7s;
}
section.usp[data-observe="visible"] .item:nth-child(4) > div:first-child i {
  animation-delay: 0.6s;
}
section.usp[data-observe="visible"] .item:nth-child(4) > div:last-child {
  animation-delay: 0.9s;
}

@keyframes usp-check-in {
  0% {
    top: -50px;
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
  }
  20% {
    transform: scale(1.6);
  }
  70% {
    top: 25px;
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: 5px;
    opacity: 1;
  }
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1555px) {
  section.usp .container {
    gap: 20px;
  }
}

@media screen and (max-width: 1475px) {
  section.usp .container {
    gap: 40px;
  }

  section.usp {
    --min-column: 400px;
  }
}

@media screen and (max-width: 1023px) {
  section.usp {
    --min-column: 260px;
  }
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.sectors {
	display: grid;
	grid-template-columns: var(--grid-3) var(--grid-7);
	gap: var(--offset);
	justify-content: center;
	align-items: start;
}

section.sectors > .container {
	display: grid; 
	grid-template-columns: repeat(auto-fill,  minmax(240px, 1fr));
	gap: var(--offset);
}

/* ---------- lipstick ---------- */
section.sectors {
	padding: var(--offset) 0; 
	background: var(--color-layout);
}

section.sectors > article {
	padding-top: var(--offset); 
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {

}

@media screen and (max-width: 1360px) {
	section.sectors {
		grid-template-columns: var(--grid-4) var(--grid-8);
	}
}

@media screen and (max-width: 1023px) {
	section.sectors {
		padding-left: var(--offset-small);
		padding-right: var(--offset-small);
		grid-template-columns: 1fr;
	}

	section.sectors > article {
		padding-top: 0; 
	}

}
/* ---------- vars ---------- */
section.sectors .sector .icon {
	--icon-size: 40px;
}

/* ---------- layout ---------- */
section.sectors > .container .sector {
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 1fr calc(var(--icon-size) / 2) calc(var(--icon-size) / 2);
}

section.sectors > .container .sector .box {
	grid-column: 1;
	grid-row: 1 / 3;
	display: grid; 
	grid-template-columns: 1fr;
	grid-template-rows: 120px 60px auto;
}

section.sectors > .container .sector .box .image {
	grid-column: 1;
	grid-row: 1 / 3;
}

section.sectors > .container .sector .box article {
	grid-column: 1;
	grid-row: 1 / 4;
	z-index: 100;
}

section.sectors > .container .sector .action {
	grid-column: 1;
	grid-row: 2 / 4;
	display: flex;
	justify-content: center;
	align-self: end;
	min-height: var(--icon-size); 
	position: relative;
}

section.sectors > .container .sector .action a {
	position: relative;
}

/* ---------- lipstick ---------- */

section.sectors > .container {
	padding: 0 var(--offset-small); 
}

section.sectors > .container .sector { 
	cursor: pointer;
	opacity: 0; 
	transition: all var(--transition-speed); 
}

section.sectors > .container .sector:hover {
	transform: translateY(-5px);
} 

section.sectors > .container .sector .box {
	box-shadow: 5px 5px 30px rgba(17,17,17,.3);
	border-radius: 15px 15px 15px 15px;
	transition: color var(--transition-speed), 
	box-shadow .2s, 
	background .5s; 
	transform: rotate3d(0,0,0, 30deg);
	perspective: 500px;
	color: white;
}

section.sectors > .container .sector .box .image {
	background-size: cover;
	background-position: 50%;
	border-radius: 15px 15px 0 0;
}

section.sectors > .container .sector .box article {
	border-radius: 15px;
	padding: 180px var(--offset-small) var(--offset-small) var(--offset-small); 
	/* background: linear-gradient(to bottom, rgba(255,255,255,0) 80px, rgba(255,255,255,1) 180px, rgba(255,255,255,1) 100%); */
	background: linear-gradient(to bottom, rgba(17,17,17,0) 80px, rgba(17,17,17,1) 180px, rgba(17,17,17,1) 100%);
}

section.sectors > .container .sector:hover .box {
	box-shadow: 2px 2px 10px rgba(17,17,17,.2);
	background: #f1f1f1;
}

section.sectors > .container .sector .box h3 {
	font-size: 20px;
	line-height: 26px;
}

section.sectors > .container .sector .box h3 span { display: block; }
section.sectors > .container .sector a { text-decoration: none; }

section.sectors > .container .sector:hover .icon {
	background-color: var(--color-black); 
	color: white; 
}

[data-interactive="1"] section.sectors > .container .sector { display: grid; opacity: 1; }

/* ---------- visible ---------- */
section.sectors > .container .sector[data-observe="visible"] { display: grid; opacity: 1; }
section.sectors > .container .sector .box,
section.sectors > .container .sector .action a { opacity: 0; }
section.sectors > .container .sector[data-observe="visible"] .action a { animation: sector-action-in .3s forwards ease-in; }
section.sectors > .container .sector[data-observe="visible"] .box { animation: sector-box-in .4s forwards ease-out .2s; }

section.sectors > .container .sector[data-observe="visible"]:nth-child(4n+1) .action a { animation-delay: 0s}
section.sectors > .container .sector[data-observe="visible"]:nth-child(4n+1) .box { animation-delay: .2s}

section.sectors > .container .sector[data-observe="visible"]:nth-child(3n+1) .action a { animation-delay: .3s}
section.sectors > .container .sector[data-observe="visible"]:nth-child(3n+1) .box { animation-delay: .5s}

section.sectors > .container .sector[data-observe="visible"]:nth-child(2n+1) .action a { animation-delay: .15s}
section.sectors > .container .sector[data-observe="visible"]:nth-child(2n+1) .box { animation-delay: .35s}



@keyframes sector-action-in {
	0% { top: -60px; opacity: 0; transform: scale(.5); }
	30% { opacity: 1;}
	70% { top: 40px; opacity: 1; transform: scale(1.6); }
	100% { top: 0; opacity: 1; transform: scale(1); }
}

@keyframes sector-box-in {
	0% { transform: rotate3d(0,1,0, 30deg); opacity: 1; }
	30% { opacity: 1; transform: rotate3d(0,1,0, 30deg); }
	100% { opacity: 1; transform: rotate3d(0,1,0, 0deg);}
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {

}
/* ---------- vars ---------- */


/* ---------- layout ---------- */
section.contact-bar {
	display: grid;
	grid-template-columns: var(--grid-10);
	justify-content: center;
}

section.contact-bar .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--offset); 
}

/* ---------- lipstick ---------- */
section.contact-bar {
	padding: var(--offset-small) 0; 
}

/* ---------- visible ---------- */

section.contact-bar .container .contact:nth-child(2) figure[data-border][data-observe="visible"]:before { animation-delay: .3s; }
section.contact-bar .container .contact:nth-child(3) figure[data-border][data-observe="visible"]:before { animation-delay: .5s; }

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {
	section.contact-bar {
		grid-template-columns: 1fr;
		justify-content: center;
	}
}
/* ---------- vars ---------- */
div.contact-method,
div.contact-method figure[data-border] { --image-size: 120px; }

div.contact-method figure a.icon {
	--icon-size: 50px;
}

/* ---------- layout ---------- */
div.contact-method {
	display: grid;
	grid-template-columns: var(--image-size) 1fr;
	gap: var(--offset-small);
	align-items: center;
}

div.contact-method figure a.icon {
	position: absolute;
	right: calc((var(--icon-size) / 3) * -1);
	bottom: calc((var(--icon-size) / 2) * -1);
}

div.contact-method:hover figure a.icon {
	bottom: 5px;
}

div.contact-method h4 span {
	display: block;
}

/* ---------- lipstick ---------- */

div.contact-method {
	padding: var(--offset-small) 0;
}

div.contact-method[data-link] { cursor: pointer; }

div.contact-method figure img {
	border-radius: 50%;
	z-index: 100;
	max-width: var(--image-size);
}

div.contact-method figure a.icon {
	z-index: 200;
}

div.contact-method figure:before,
div.contact-method figure a.icon,
div.contact-method figure a.icon i,
div.contact-method h4 span,
div.contact-method div a,
div.contact-method div a i {
	transition: all var(--transition-speed);
}

div.contact-method:hover figure:before {
	background-color: var(--color-orange);
	transition-delay: .3s;
}

div.contact-method:hover figure a.icon  {
	background: var(--color-black);
	color: white;
}

div.contact-method figure a.icon,
div.contact-method div a {
	color: var(--color-black);
	text-decoration: none;
}


div.contact-method h4,
div.contact-method h4 span,
div.contact-method div a {
	font-weight: 700;
	font-size: 32px;
}

div.contact-method h4 span {
	color: var(--color-green); 
	font-size: 18px;
}
div.contact-method:hover h4 span,
div.contact-method:hover div a i {
	color: var(--color-orange); 
}

div.contact-method div a {
	font-size: 14px;
}

div.contact-method:hover div a {
	padding-left: 10px;
	transition-timing-function: cubic-bezier(0.175, 0.285, 0.32, 1.275);
}

div.contact-method div a i {
	color: var(--color-green);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1679px) {
	div.contact-method {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	div.contact-method figure {
		grid-row: 1;
		justify-self: center;
	}

	div.contact-method > div {
		padding-top: var(--offset-small); 
		grid-row: 2;
		justify-self: center;
		text-align: center;
	}
	div.contact-method figure a.icon {
		right: calc(50% - (var(--icon-size) / 2));
		bottom: calc((var(--icon-size) / 2) * -1);
	}

	div.contact-method:hover figure a.icon {
		bottom: calc(((var(--icon-size) / 2) * -1) + 10px);
	}
}

@media screen and (max-width: 1023px) {

	div.contact-method figure[data-border] { --image-size: 80px; }
	
	div.contact-method figure:before {
		background: var(--color-green);
		border-radius: 50%;
	}

	div.contact-method figure a.icon {
		--icon-size: 40px;
	}

}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
div.contact-data address,
div.contact-data .openingstimes,
div.contact-data .socialmedia {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  gap: var(--offset-small) var(--offset-tiny);
}

div.contact-data .openingstimes {
  grid-template-columns: 30px 1fr;
}

div.contact-data .openingstimes .time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--offset-tiny);
}

div.contact-data > * + * {
  margin-top: var(--offset-small);
}

div.contact-data .socialmedia *:last-child {
  display: flex;
  column-gap: var(--offset-small);
}

div.socialmedia > div:nth-child(3) > a:nth-child(1) {
  margin-left: 30px;
}

/* ---------- lipstick ---------- */

div.contact-data a {
  transition: all var(--transition-speed);
}

div.contact-data i[class*="fa"] {
  color: var(--color-green);
  transition: all var(--transition-speed);
}

div.contact-data h5 {
  font-weight: 700;
  color: var(--color-black);
}
div.contact-data address a {
  color: var(--color-black);
}
div.contact-data address a:hover {
  color: var(--color-green);
}

div.contact-data > * > i {
  font-size: 30px;
}

div.contact-data .socialmedia a {
  text-decoration: none;
}

div.contact-data .socialmedia a:hover i {
  color: var(--color-black);
}

div.contact-data .socialmedia *:last-child i {
  font-size: 24px;
}

div.contact-data .socialmedia a[href*="whatsapp"]:hover i {
  color: var(--color-whatsapp);
}
div.contact-data .socialmedia a[href*="facebook"]:hover i {
  color: var(--color-facebook);
}
div.contact-data .socialmedia a[href*="instagram"]:hover i {
  color: var(--color-instagram);
}
div.contact-data .socialmedia a[href*="youtube"]:hover i {
  color: var(--color-youtube);
}
div.contact-data .socialmedia a[href*="twitter"]:hover i {
  color: var(--color-twitter);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  div.contact-data address,
  div.contact-data .openingstimes,
  div.contact-data .socialmedia {
    display: grid;
    grid-template-columns: 20px 1fr;
  }

  div.contact-data address > div {
    grid-column: 2;
  }

  div.contact-data > * > i {
    font-size: 18px;
    align-self: start;
    margin-top: 7px;
  }

  div.contact-data .openingstimes .time {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 10px;
  }

  div.contact-data .openingstimes .time + .time {
    margin-top: var(--offset-tiny);
  }

  div.contact-data .openingstimes .time > div:first-child {
    font-weight: 700;
  }
}

/* ---------- vars ---------- */
figure[data-border] {
  --size: var(--image-size, 120px);
  --color: var(--border-color, var(--color-green));
}

figure[data-border="green"] {
  --color: var(--color-green);
}
figure[data-border="purple"] {
  --color: var(--color-purple);
}
figure[data-border="orange"] {
  --color: var(--color-orange);
}
figure[data-border="blue"] {
  --color: var(--color-blue);
}
figure[data-border="red"] {
  --color: var(--color-red);
}
figure[data-border="gold"] {
  --color: var(--color-gold);
}
figure[data-border="white"] {
  --color: white;
}

/* ---------- layout ---------- */

figure[data-border],
figure[data-border]:has(a) {
  position: relative;
}

figure[data-border] {
  display: block;
  width: var(--size);
  height: var(--size);
}

figure[data-border]:before {
  position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
  content: "";
  left: -3px;
  bottom: -3px;
  z-index: 1;
}

figure[data-border][data-observe]:before {
  display: none;
  left: 0;
  bottom: 0;
  z-index: 1;
}

figure[data-border] img {
  z-index: 100;
  position: absolute;
}

/* ---------- lipstick ---------- */

figure[data-border]:before {
  border-radius: 50%;
  background: var(--color);
}

figure.rounded img {
  max-width: 100%;
  border-radius: 50%;
}

/* ---------- visible ---------- */
figure[data-border][data-observe="visible"]:before {
  display: block;
  animation: figure-border-in 0.4s forwards
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-delay: 0.1s;
}

body[data-page="page-2"]
  figure.rounded[data-border="green"][data-observe="visible"][data-observe-type="once"] {
  position: relative !important;
}

@keyframes figure-border-in {
  0% {
    left: 0;
    bottom: 0;
  }
  30% {
    left: -10px;
    bottom: -10px;
  }
  100% {
    left: -3px;
    bottom: -3px;
  }
}

/* ---------- mediaquery ---------- */

@media screen and (min-width: 1024px) and (max-width: 1679px) {
  body[data-page="page-2"]
    figure.rounded[data-border="green"][data-observe="visible"][data-observe-type="once"] {
    position: relative !important;
  }

  /* figure.rounded[data-border="green"][data-observe="visible"][data-observe-type="once"]:before {
    position: absolute;
  } */

  /* figure.rounded[data-border="green"][data-observe="visible"][data-observe-type="once"]
    img {
    position: absolute;
    max-width: calc(20vw);
  } */
}

@media screen and (min-width: 1024px) and (max-width: 1679px) {
  figure[data-border]:before {
  }

  /* figure[data-border] img {
    position: relative;
  } */

  figure.rounded img {
    max-width: calc(20vw);
    position: relative;
  }

  section.textmedia {
    --image-size: calc(20vw);
  }
}

@media screen and (max-width: 1679px) {
  figure[data-border][data-observe="visible"]:before {
    display: block;
    animation: none;
    left: calc((50% - (var(--size) / 2)) - 3px);
    bottom: -3px;
  }
}

@media screen and (max-width: 1025px) {
  section.page .contents > .media-text .content > article {
    text-align: left;
  }
}

/* ---------- vars ---------- */

div.media-split {
	--image: 640px;
	--radius: calc(var(--image) / 2); 
	--image-size: calc((var(--image) - var(--offset)) / 2);
	--image-part: calc(var(--image-size) / 6);

	--columns: repeat(6, var(--image-part)) 2px repeat(6, var(--image-part));
	--rows: repeat(6, var(--image-part)) 2px repeat(6, var(--image-part));
}

/* ---------- layout ---------- */
div.media-split {
	display: grid;
	grid-template-columns: var(--columns);
	grid-template-rows: var(--rows);
	justify-content: center;
}

div.media-split .color {
	grid-column: 2 / 7;
	grid-row: 1 / 5;
}

div.media-split .image-top {
	grid-column: 1 / 7;
	grid-row: 1 / 13;
	z-index: 100;
}

div.media-split > .content {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
	z-index: 200;
	display: grid;
	grid-template-columns: var(--grid-3);
	justify-content: center;
	align-items: center;
}

div.media-split .image-bottom {
	grid-column: 8 / -1;
	grid-row: 2 / -1;
	z-index: 100;
}

/* ---------- lipstick ---------- */

div.media-split .color {
	background: var(--color-orange); 
	border-radius: 50%;
}

div.media-split > .content article {
	background: var(--color-green);
	padding: var(--offset-small); 
	font-family: var(--font-family-title);
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
}

div.media-split .image-top {
	border-radius: var(--radius) 0% 0% var(--radius);
	background-position: calc(100% + 320px) 0%;
	background-repeat: no-repeat;
}

div.media-split .image-bottom {
	border-radius: 0 var(--radius) var(--radius)  0;
	background-position: -320px 50%;
	background-repeat: no-repeat;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
section.job-map .action {
  --height: 50px;
}

/* ---------- layout ---------- */
section.job-map {
  display: grid;
  grid-template-columns: 1fr repeat(12, var(--column)) 1fr;
  grid-template-rows: var(--offset) auto minmax(354px, auto) auto;
  gap: var(--offset-small) var(--offset);
  justify-content: center;
}

section.job-map > article {
  grid-row: 2;
  grid-column: 2 / span 4;
  z-index: 50;
}

section.job-map > .map {
  grid-row: 1 / -1;
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

section.job-map > .jobs {
  grid-row: 3;
  grid-column: 2 / span 6;
  z-index: 100;
}

section.job-map .jobs .empty {
  max-width: 60%;
}

section.job-map > .action {
  grid-row: 4;
  grid-column: 2 / span 4;
  z-index: 200;
}

section.job-map > .action form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--offset-small);
}

section.job-map > .action form > div #job-map-search-trigger {
  transform: none;
}

section.job-map > .action form > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--height);
  align-items: center;
  gap: 10px;
}

/* ---------- lipstick ---------- */
section.job-map {
  padding: var(--offset) 0;
}

section.job-map > .map {
  background: var(--color-green);
}

section.job-map .jobs .card {
  opacity: 0;
}

section.job-map .jobs .empty {
  background: white;
  padding: var(--offset-small) var(--offset-small) var(--offset-small) 0px;
  border-radius: var(--offset-small);
}

section.job-map .jobs .card[data-observe="visible"] {
  animation: fade-in 0.3s forwards 0.2s, movein-from-right 0.3s forwards 0.1s;
}

section.job-map > .action form > div:first-child {
  background: white;
  padding: 0 15px;
  border-radius: calc(var(--height) / 2);
  box-shadow: 10px 10px 20px rgba(17, 17, 17, 0.2);
}

section.job-map > .action form > div:first-child input {
  background: transparent;
  font-weight: 700;
  outline: none;
}

section.job-map > .action form > div:first-child i {
  color: var(--color-green);
}

/* ---------- mediaquery ---------- */
@media screen and (min-width: 1680px) and (max-width: 1736px) {
  section.job-map > .map {
    width: 96%;
  }
}

@media screen and (max-width: 1360px) {
  section.job-map > .action form {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

@media screen and (max-width: 1023px) {
  section.job-map {
    padding: var(--offset) var(--offset-small);
    grid-template-columns: 1fr;
    grid-template-rows: auto 50vh minmax(auto, 1fr) auto;
    gap: var(--offset);
  }

  section.job-map > article {
    grid-row: 1;
    grid-column: 1;
  }

  section.job-map > .map {
    grid-row: 2;
    grid-column: 1;
  }

  section.job-map > .jobs {
    grid-row: 3;
    grid-column: 1;
    z-index: 100;
  }
  section.job-map > .action {
    grid-row: 4;
    z-index: 100;
    grid-column: 1;
  }
  section.job-map > .action form {
    background: var(--color-black);
    padding: var(--offset-small);
    border-radius: var(--offset-small);
    box-shadow: 10px 10px 30px rgba(17, 17, 17, 0.2) l;
  }

  section.job-map .jobs .empty {
    max-width: 100%;
  }

  section.job-map .jobs .card[data-observe="visible"] {
    animation: fade-in 0.3s forwards 0.2s;
  }
}

/* ---------- vars ---------- */
div.infowindow {
	--theme: var(--color-green);
	max-width: 260px; 
}

div.infowindow[data-theme="blue"] { --theme: var(--color-blue); }
div.infowindow[data-theme="red"] { --theme: var(--color-red); }
div.infowindow[data-theme="green"] { --theme: var(--color-green); }
div.infowindow[data-theme="purple"] { --theme: var(--color-purple); }
div.infowindow[data-theme="orange"] { --theme: var(--color-orange); }
div.infowindow[data-theme="gold"] { --theme: var(--color-gold); }

/* ---------- layout ---------- */


/* ---------- lipstick ---------- */

div.infowindow article {
	text-align: center;
}

div.infowindow h3 { 
	font-size: 18px;
	line-height: 26px;
}

div.infowindow h3 span { 
	display: block;
	font-size: 14px; 
	color: var(--theme); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
.jobs .card {
	--icon-size: 50px;
	--image-size: 120px;
	--padding: 15px;
	--content-padding: calc((var(--image-size) / 2) + var(--padding)) var(--padding) calc((var(--icon-size) / 2) + var(--padding)) var(--padding);
	--theme: var(--color-green); 
}

.jobs .card[data-type="horizontal"] {
	--content-padding: var(--padding) var(--padding)  calc((var(--icon-size) / 2) + var(--padding)) var(--padding);
	--tag-radius: 0px 0px 8px 8px;
}

.jobs .card figure[data-border] {
	--image-size: var(--image-size, 120px);
}

/* .jobs .card .icon { --icon-background: var(--theme, var(--color-green)); } */

/* ---------- layout ---------- */
.jobs .card {
	width: 100%;
	min-width: 300px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2,calc(var(--image-size) / 2)) auto repeat(2,calc(var(--icon-size) / 2));
	justify-items: center;
}
.jobs .container{
	margin-bottom: 40px;
}
.jobs .card[data-type="horizontal"] {
	position: relative;
	grid-template-columns: 1fr;
	grid-template-rows: auto repeat(2,calc(var(--icon-size) / 2));
	gap: 0 var(--offset-small); 
}

.jobs .card > * { grid-column: 1; } 
.jobs .card figure { grid-row: 1 / 3; position: relative; }
.jobs .card .content { grid-row: 2 / -2; }
.jobs .card .action { grid-row: 4 / -1; }

.jobs .card[data-type="vertical"] .content,
.jobs .card[data-type="vertical"] .content article {
	width: 100%;
} 

.jobs .card[data-type="horizontal"] > * { grid-column: 1; }
.jobs .card[data-type="horizontal"] .content { 
	grid-row: 1 / 3;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--offset-small); 
}
.jobs .card[data-type="horizontal"] .action { grid-row: 2 / -1; }
.jobs .card[data-type="horizontal"] .tag { position: absolute; right: calc(var(--offset-small)); }

.jobs .card .content {
	display: grid;
	justify-items: center;
	align-items: start;
	grid-template-rows: auto 1fr;
}

.jobs .card .info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	justify-content: start;
	gap: 5px 15px;
}

.jobs .card .action {
	position: relative;
	display: flex;
	justify-content: center;
}

.jobs .card .action a {
	position: absolute;
}

/* ---------- lipstick ---------- */

.jobs .card[data-link] {
	cursor: pointer;
}

.jobs .card figure img { 
	max-width: 100%;
	border-radius: 50%;
}

.jobs .card .content {
	background: white;
	box-shadow: 5px 5px 30px rgba(17,17,17,.1);	
	border-radius: var(--offset-small);
}

.jobs .card .content {
	padding: var(--content-padding);
}

.jobs .card .info,
.jobs .card .content p {
	font-size: 14px;
	line-height: 24px;
}

.jobs .card .content p {color: #65676b;}

.jobs .card .content h3 { 
	line-height: 32px; 
	font-size: 24px;
}

.jobs .card .content h3 span {
	display: block;
	font-size: 18px;
}

.jobs .card figure[data-border] { --border-color: var(--theme); }
.jobs .card .tag { --tag-background: var(--theme); }

.jobs .card .content h3 span,
.jobs .card .info i { color: var(--theme); font-size: 18px; }
.jobs .card .info > div { font-weight: 700; line-height: 24px; }
.jobs .card .info > div[data-value=""] { display: none; }

.jobs .card .action a { 
	text-decoration: none; 
	transition: all var(--transition-speed); 
}

.jobs .card:hover .action a.icon {
	animation: icon-action-hover .5s forwards ease-in-out; 
	background: var(--color-black);
}

/* ---------- colors ---------- */

.jobs .card[data-theme="green"] { --theme: var(--color-green); }
.jobs .card[data-theme="purple"] { --theme: var(--color-purple); }
.jobs .card[data-theme="red"] { --theme: var(--color-red); }
.jobs .card[data-theme="blue"] { --theme: var(--color-blue); }
.jobs .card[data-theme="orange"] { --theme: var(--color-orange); }
.jobs .card[data-theme="gold"] { --theme: var(--color-gold); }

/* ---------- mediaquery ---------- */
@keyframes icon-action-hover {
	0%, 100% { transform: scale(1);  }
	10% { transform: scale(.6); }
	40% { transform: scale(1.3); }
	70% { transform: scale(.9); }
}

@media screen and (max-width: 1023px) {
}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.latest {
  /* display: grid;
  grid-template-columns: repeat(4, var(--grid-4));
  grid-template-rows: auto auto auto; */
  gap: 30px;
  justify-content: center;
}

section.latest.related {
  margin-top: var(--offset);
}

section.latest > article,
section.latest > .action {
  grid-column: 2 / span 2;
  grid-row: 1;
}

section.latest > .container {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, var(--grid-3)));
  gap: var(--offset);
}

section.latest > .action {
  grid-row: 3;
}

/* ---------- lipstick ---------- */
section.latest {
  padding: var(--section-spacing) 0;
  background: var(--color-layout);
}

section.latest[data-color="white"] {
  background: white;
}

/* ---------- Indeed vacatures ---------- */

section.indeed-vacatures {

}


/* ---------- mediaquery ---------- */
@media screen and (max-width: 1023px) {
  section.latest {
    grid-template-columns: 1fr;
    padding: var(--section-spacing) var(--offset-small);
  }

  section.latest > article,
  section.latest > .action {
    grid-column: 1;
  }
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.jobs .container {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-3)));
  gap: 60px;
  justify-content: center;
  margin-top: 15px;
}

section.jobs .contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--offset);
}

section.jobs .contents .filter {
  grid-row: 1;
}

section.jobs .contents .empty {
  grid-row: 2;
}

/* ---------- Form ---------- */

/* ---------- Jobs Form ---------- */

.rnFormGroup {
    margin: 20px 0px;
    display: grid;
    grid-template-columns: 150px 1fr;
    place-items: center;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(2) > div {
    grid-template-columns: 50px 1fr;
    justify-items: start;
    width: 100%;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(2) > div > div.rnFieldWrap {
    order: 1;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(2) > div > label {
    order: 2;
    margin-bottom: 0px;
}

.rnFormGroup label {
    justify-self: flex-start;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.rnPhoneNumberInput {
    width: 100%;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > div.rnFormGroup.rnField.valid.rninternationalphoneField.rnmobilePhoneNumber > div > div > label.rnPhoneCountry > span > span {
    display: none;
}

.rnFieldWrap {
    width: 90%;
}

phoneSelector_mobilePhoneNumber {
    margin-bottom: 15px;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > div.rnFormGroup.rnField.valid.rninternationalphoneField.rnmobilePhoneNumber > label {
    align-self: baseline;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > div.rnFormGroup.rnField.valid.rntextField.rnmotivation-text {
    align-self: baseline;
}

#phoneNumber_mobilePhoneNumber {
    font-size: 14px;
    line-height: var(--line-height);
    border: 0px;
    border-radius: 25px;
    padding: calc((var(--input-size) - var(--line-height)) / 2) calc(var(--input-size) / 2);
    width: 100%;
    font-family: var(--font-family);
    background: var(--color-layout);
}

.rnFormControl {
  color: #555;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: var(--color-layout);
  width: 100%;
  font-size: 14px;
}

.rnmail-and-whatsapp-consent {

}

.rnFormControl::-webkit-file-upload-button {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px 12px;
  color: #666;
  margin-right: 10px;
}

.rnFileUpload {
    display: flex;
    align-items: center;
    min-height: var(--input-size);
    background: var(--color-layout);
    border-radius: calc(var(--input-size) / 2);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.rnFilename {
    flex: 1;
    padding: calc((var(--input-size) - var(--line-height)) / 2) calc(var(--input-size) / 2);
    font-size: 14px;
    color: var(--color-gray-light);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rnAction {
    background: var(--color-primary, #4a90e2);
    color: white;
    padding: calc((var(--input-size) - var(--line-height)) / 2) calc(var(--input-size) / 2);
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.rnFileUpload input[type="file"] {
    position: absolute;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    z-index: 0;
    border-radius: calc(var(--input-size) / 2);
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

legend {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    padding: 0;
}

.rncheckboxField .rnLabel {
    display: flex;
    font-size: 14px;
    margin-bottom: 10px;
}

.rncheckboxField .rnCheckbox {
    display: flex;
    align-items: center;
}

.rncheckboxField input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: var(--color-primary, #4a90e2);
}

.rncheckboxField a {
    color: var(--color-primary, #4a90e2);
    text-decoration: none;
}

.rncheckboxField a:hover {
    text-decoration: underline;
}

.rnButtons {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--offset-small);
}

#phoneSelector_mobilePhoneNumber, #phoneNumber_mobilePhoneNumber {
    margin: 10px 0px;
}

.rnInternationalPhone {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.rnInternationalPhone .rnPhoneCountry {
  flex-basis: 35%;
  flex-shrink: 0;
}

.rnInternationalPhone .rnPhone {
  flex-grow: 1;
}

.rnInternationalPhone .rnPhoneNumberInput .rnFormControl {
    width: 100%;
}

.rnButton {
    padding: 6px 25px;
    min-height: 50px;
    border: none;
    border-radius: 50px;
    background: var(--color-green);
    color: white;
    gap: 5px;
    place-items: center;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer !important;
    box-shadow: 10px 10px 20px rgba(17, 17, 17, .2);
    transition: all var(--transition-speed);
    transform: translateY(-3px);
    margin-top: 10px;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnButtons > button:before {
    content:"\e20a";
    font-family: 'Font Awesome 6 Pro';
    color: #fff;
    margin-right: 10px;
}

.rnmobilePhoneNumber {
    margin-top: 10px;
}

.rnmotivation-text {
    margin-top: 10px;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > legend:before {
    content: "\f007";
    font-family: 'Font Awesome 6 Pro';
    color: var(--color-green);
    margin-right: 10px;
    position: relative;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div.form {
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 10px 10px 30px rgba(17, 17, 17, 0.1);
}

.rnErrors.rnHelpBlock {
    /*display: none;*/
    width: 825px;
    margin: auto;
    text-align: center;
    font-weight: bold;
    color: #81bf40;
}

.rnmail-and-whatsapp-consent .rnErrors.rnHelpBlock
{
    display: none;
}

#rnSelectValue {
    display: none !important;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > div.rnFormGroup.rnField.valid.rninternationalphoneField.rnmobilePhoneNumber > label {
    margin-top: 18px;
}

body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > div.rnFormGroup.rnField.valid.rntextField.rnmotivation-text > label {
    align-self: baseline;
}

/* ---------- Open sign Form ---------- */

.oe_widget {
    padding: var(--offset-small);
    background: white;
    border-radius: 10px;
    box-shadow: 10px 10px 30px rgba(17, 17, 17, 0.1);
}

.oe_widget .oe_radioListElement input, .oe_widget .oe_checkboxListElement input {
    position: relative !important;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(2) > div > div.oe_block.oe_block_contact.oe_blockRequired > div:nth-child(2) {
    margin: 25px 0px !important;
}

.oe_widget .oe_help, .oe_widget .oe_validation {
    margin: -5px 0px 25px !important;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(2) > div > div.oe_block.oe_block_contact.oe_blockRequired > div.oe_formElement.oe_required.oe_error {
    margin-top: 25px;
    justify-self: center;
    font-size: 16px;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(6) > div > div > div:nth-child(2) > div > div > label > span > img {
    object-fit: contain;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(6) > div > div > div.oe_formElement.oe_required > div > label {
    justify-content: center;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(2) > div > div.oe_block.oe_block_contact.oe_blockRequired > div.oe_formElement.oe_required.oe_error > fieldset {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(2) > div > div.oe_block.oe_block_contact.oe_blockRequired > div.oe_formElement.oe_required.oe_error > fieldset > label.oe_textElement.oe_phoneNumber {
    display: flex;
    flex-direction: row;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div:nth-child(2) > div > div.oe_block.oe_block_contact.oe_blockRequired > div.oe_formElement.oe_required.oe_error > fieldset > label.oe_textElement.oe_phoneNumberInput {
    grid-template-columns: 40px 1fr;
    gap: 5px;
}

.oe_textElement input {
    font-size: 14px;
    border: 0 !important;
    border-radius: 50px;
    line-height: 28px;
    font-family: var(--font-family);
    background: var(--color-layout);
    width: 100%;
    min-height: 50px;
    margin-bottom: 8px !important;
    text-indent: 10px !important;
}

.oe_fieldset {
    display: flex;
    flex-direction: row;
    margin-right: 20px;
}

.oe_selector.oe_phoneSelector {
    width: 25vw;
}

.oe_textElement.oe_phoneNumberInput {
    grid-template-columns: 40px 1fr !important;
}

.oe_textElement.oe_phoneNumber {
    display: flex;
    flex-direction: row;
    margin-right: 10px;
}

.oe_googleMaps .oe_label {
    justify-content: center;
}

.oe_functions input[name="Profession"] {
    text-indent: 10px !important;
    border: 0 !important;
}


.oe_step label::placeholder, .oe_step input::placeholder {
    text-indent: 10p !important;
    color: black;
    font-weight: 500;
}

.oe_textElement.oe_phoneNumberInput {
    gap: 0 !important;
}

.oe_functions input {
    font-size: 14px;
    border: 0;
    border-radius: 50px;
    line-height: 28px;
    font-family: var(--font-family);
    background: var(--color-layout);
    width: 100%;
    min-height: 50px;
}

.oe_label input:focus-visible {
    outline: 2px solid var(--color-green);
}

.oe_label input::placeholder {
    text-indent: 10px;
}

.oe_selectorValue {
    border-radius: 25px;
}

.oe_widget .oe_uploader {
    border: unset !important;
}

.oe_widget .oe_uploader .oe_uploaderButton {
    background-color: #78b829 !important;
}

.oe_widget .oe_mapResult {
    background-color: unset !important;
}

.oe_selector select,
.oe_select,
.oe_mapResult select {
    font-size: 14px;
    border: 0;
    border-radius: 50px;
    line-height: 28px;
    font-family: var(--font-family);
    background: var(--color-layout);
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
    cursor: pointer;
}

.oe_selector select:focus,
.oe_select:focus,
.oe_mapResult select:focus {
    outline: 2px solid var(--color-green);
}

/* ------- File Upload Styling ------- */
.oe_uploader {
    display: flex;
    align-items: center;
    background: var(--color-layout);
    border-radius: 50px;
    overflow: hidden;
    width: 100%;
}

.oe_uploaderValue {
    flex: 1;
    padding: 10px 15px;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oe_uploaderButton {
    background: var(--color-green);
    color: white;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

.oe_uploader input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* ------- Map Styling ------- */
.oe_googleMaps {
    margin: 20px 0;
}

#oe_map {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(17, 17, 17, 0.05);
    height: 300px;
    margin-top: 10px;
}

.oe_mapResult {
    margin-top: 15px;
    background: white;
    padding: 15px;
    border-radius: 10px;
}

/* ------- Checkbox Styling ------- */
.oe_checkboxElement .oe_checkboxList {
    margin-top: 10px;
}

.oe_checkboxListElement {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.oe_checkboxListElement input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-layout);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.oe_checkboxListElement input[type="checkbox"]:checked {
    background-color: var(--color-green);
}

.oe_checkboxListElement input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.oe_checkboxListElement .oe_label {
    font-size: 14px;
    line-height: 1.4;
}

/* ------- Button Styling ------- */
.oe_buttons button {
    display: inline-grid;
    grid-template-columns: 1fr;
    place-items: center;
    background: unset !important;
    background-colour: #78b829 !important;
    font-family: var(--font-family);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer !important;
    padding: 15px 25px;
    color: var(--color-black);
    text-decoration: none;
    border: 0;
    min-height: 50px;
    box-shadow: 10px 10px 20px rgba(17, 17, 17, .2);
    transition: all var(--transition-speed);
    width: 100%;
    margin-top: 20px;
}

.oe_buttons button:hover {
    transform: translateY(-3px);
    box-shadow: 10px 10px 25px rgba(17, 17, 17, .25);
}

.oe_widget .oe_radioListElement .oe_label:after, .oe_widget .oe_checkboxListElement .oe_label:after {
    color: #78b829 !important;
    background-color: #78b829 !important;
}

body > main > section.page > div.contents > div > article > div > div > div > div > div.oe_buttons > button {
    background-color: #78b829 !important;
}

.oe_textElement {
    display: grid;
    grid-template-columns: 150px 1fr;
    place-items: center;
    gap: 20px;
    justify-items: flex-start;
}

.oe_textElement:has(.oe_select) {
    grid-template-columns: 150px 1fr;
}

.oe_widget .oe_phoneNumberInput {
    display: flex !important;
    flex-direction: row;
    width: 100%;
}

.oe_widget .oe_radioListElement .oe_label, .oe_widget .oe_checkboxListElement .oe_label {
    padding: 0 10px 0 0px !important;
}

.oe_widget .oe_radioListElement .oe_label:after, .oe_widget .oe_checkboxListElement .oe_label:after {
    height: 21px !important;
    top: 1px !important;
    width: 22px !important;
    left: unset !important;
    right: 20vw !important;
    border-radius: 50%;
}

.oe_checkboxListElement {
    margin-left: 20px;
    grid-template-columns: 1fr;
}

.oe_checkboxListElement input[name="privacy-link"] {
    right: 20vw;
    top: 0px;
    position: absolute !important;
}

.oe_widget .oe_radioListElement .oe_label:before, .oe_widget .oe_checkboxListElement .oe_label:before {
    left: unset !important;
    top: 0 !important;
    right: 20vw !important;
    border-radius: 50%;
}

#phoneNumber_MobilePhonenumber {
    width: 100%;
}

.oe_fileElement .oe_label {
    margin-top: 25px;
    font-size: 16px;
    justify-content: center;
}

.oe_label {
    font-weight: 600;
    gap: 5px;
    display: flex !important;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1600x) {
  section.jobs .container {
    grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-6)));
  }
}

@media screen and (max-width: 1355px) {
  section.jobs .container {
    grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-10)));
  }

    .rnErrors.rnHelpBlock {
    /*display: none;*/
    width: 550px;
    }
}

@media screen and (max-width: 767px) {
    .oe_textElement {
        grid-template-columns: 1fr;
        padding: 10px !important;
        justify-items: center !important;
    }

    .rnErrors.rnHelpBlock {
        /*display: none;*/
        width: 750px;
    }

    .oe_fieldset {
        flex-direction: column;
        align-items: center;
    }

    .oe_selector.oe_phoneSelector {
        width: 80vw;
    }

    .oe_widget .oe_phoneNumberInput .oe_phone_prefix {
        margin-right: 15px;
    }

    .oe_widget .oe_radioListElement .oe_label:after, .oe_widget .oe_checkboxListElement .oe_label:after {
        right: 37vw !important;
        top: 75px !important;
    }

    .oe_widget .oe_radioListElement .oe_label:before, .oe_widget .oe_checkboxListElement .oe_label:before {
        right: 37vw !important;
        top: 75px !important;
    }

    .oe_widget .oe_radioListElement .oe_label, .oe_widget .oe_checkboxListElement .oe_label {
        padding: 0 10px 10px 0px !important;
    }

    .oe_widget .oe_radioListElement .oe_label, .oe_widget .oe_checkboxListElement .oe_label {
        margin-bottom: 50px !important;
    }
}

@media screen and (max-width: 665px) {
  section.jobs .container {
    grid-template-columns: auto;
  }

.rnErrors.rnHelpBlock {
    /*display: none;*/
    width: 300px;
}

  section.jobs .contents {
    /* overflow: hidden; */
  }

  .rnFormGroup {
      display: flex;
      flex-direction: column;
      place-items: baseline;
  }

  .rnFieldWrap {
      width: 100%;
  }

  .rnButtons {
      justify-content: flex-start;
  }


  .rnFormGroup label {
      margin-bottom: 10px;
      justify-self: flex-start;
      display: flex;
      place-items: center;
      gap: 15px;
      width: 100%;
  }

  body > main > section.page.jobs > div.contents > div.job-detail.job-apply > div > div > div > div.rnFieldList.rnNoSteps > fieldset:nth-child(1) > legend:before {
      transform: unset;
      position: relative;
  }
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.jobs .container[data-type="list"] {
  max-width: var(--grid-10);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--grid-5));
  gap: var(--offset-small) var(--offset);
  justify-content: center;
  margin-top: 15px;
}

/* ---------- lipstick ---------- */

/* ---------- mediaquery ---------- */
@media screen and (max-width: 1600px) {
  section.jobs .container[data-type="list"] {
    grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-6)));
  }
}

@media screen and (max-width: 1355px) {
  section.jobs .container[data-type="list"] {
    grid-template-columns: repeat(auto-fit, minmax(260px, var(--grid-10)));
  }
}

@media screen and (max-width: 1023px) {
  section.jobs .container[data-type="list"] {
    grid-template-columns: auto;
    gap: var(--offset);
  }
}

/* ---------- vars ---------- */
.jobs .item {
  --icon-size: 50px;
  --image-size: 120px;
  --padding: 15px;
  --theme: var(--color-green);
}

.jobs .item figure[data-border] {
  --image-size: var(--image-size, 120px);
}

/* ---------- layout ---------- */
.jobs .item {
  display: grid;
  grid-template-columns: calc(var(--image-size) / 2) calc(var(--image-size) / 2) 1fr;
  grid-template-rows: 15px minmax(var(--image-size), 1fr);
  gap: 0;
  justify-content: start;
}

.jobs .item .content .columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px var(--offset-small);
}

.jobs .item .info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: start;
  gap: 5px 15px;
}

.jobs .item .info div[data-value=""] {
  display: none;
}

.jobs .item figure {
  grid-column: 1 / 3;
  grid-row: 2;
  position: relative;
}

.jobs .item figure.logo {
  grid-column: 1 / 3;
  grid-row: 2;
  z-index: 100;
}

.jobs .item figure.logo a {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 100px;
}

.jobs .item .content {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}

/* ---------- lipstick ---------- */
.jobs .item:hover {
  cursor: pointer;
}

.jobs .item figure.logo a {
  border-radius: 50%;
  background: white;
  padding: 5px;
}
.jobs .item figure.logo img {
  border-radius: 50%;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 2px 2px 15px rgba(17, 17, 17, 0.2);
}

.jobs .item .content {
  background: white;
  padding: var(--offset-small);
  padding-left: calc((var(--image-size) / 2) + var(--offset-small));
  box-shadow: 2px 2px 15px rgba(17, 17, 17, 0.2);
  border-radius: var(--offset-tiny);
  transition: all var(--transition-speed);
}

.jobs .item .content .columns p + .button-container,
.jobs .item .content .columns p + a {
  margin-top: var(--line-height);
}

.jobs .item .content h3 span {
  display: block;
  font-size: 18px;
  color: var(--theme);
}

.jobs .item:hover .content {
  background: #78b8290f;
}

.jobs .item > .link {
  padding-right: var(--offset-small);
}

.jobs .item > .link a {
  text-decoration: none;
  transition: all var(--transition-speed);
}

.jobs .item > .link a:hover {
  animation: bounce-in 0.5s forwards;
  background: var(--color-black);
}

.jobs .item figure img {
  max-width: 100%;
  background: white;
  border-radius: 50%;
}

.jobs .item .info {
  padding: 5px 10px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 5px;
}

.jobs .item .info i {
  color: var(--color-green);
}
.item > .company {
  position: relative;
  margin-top: 100px;
  left: 70px;
  z-index: 100;
}

.item > .company > .video {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -13%;
  & a {
    text-decoration: none;
  }
  & i {
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    padding-left: 3px;
    background: var(--color-green);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
}
/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  .jobs .item {
    grid-template-columns: 1fr;
    grid-template-rows: calc(var(--image-size) / 2) calc(var(--image-size) / 2) 1fr 25px 25px;
  }

  .jobs .item .content {
    grid-column: 1;
    grid-row: 2 / 5;
    padding: var(--offset-small);
    padding-left: var(--offset-small);
    padding-top: calc((var(--image-size) / 2) + var(--offset-small));
  }

  .jobs .item > .link {
    grid-column: 1;
    grid-row: 4 / 6;
    justify-self: center;
    align-self: center;
  }

  .jobs .item figure {
    grid-row: 0;
    justify-self: center;
    align-self: center;
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 1330px) {
}

/* ---------- vars ---------- */

/* ---------- layout ---------- */
div.job-detail {
  display: grid;
  grid-template-columns: var(--grid-5) var(--grid-3);
  gap: var(--offset-small) var(--offset);
  justify-content: center;
}

div.job-detail .main {
  grid-column: 1;
  grid-row: 1;
}

div.job-detail .process {
  grid-row: 2;
  grid-column: 1 / -1;
}

div.job-detail .side {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--offset);
  align-content: start;
}

div.job-detail .main .job-intro .info .data {
  display: grid;
  grid-template-columns: 50% 50%;
}

div.job-detail .side .data > div[data-value=""] {
  display: none;
}

div.job-detail .action {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* ---------- lipstick ---------- */

div.job-detail {
  padding-bottom: var(--offset);
}

div.job-detail .main {
  font-size: 18px;
  line-height: 32px;
}

div.job-detail .main > * + * {
  margin-top: var(--offset);
}

div.job-detail .main .job-intro > div {
  padding: var(--offset-small);
  border-radius: var(--offset-small);
}

div.job-detail .main p:empty {
  display: none;
}

div.job-detail .side h4 {
  font-size: 24px;
}

div.job-detail .side > div:not(.company) {
  padding: var(--offset-small);
  border-radius: var(--offset-small);
}

div.job-detail .side > div:not(.company) > * + * {
  margin-top: var(--offset-tiny);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1360px) {
  div.job-detail {
    grid-template-columns: 2fr 1fr;
    padding-left: var(--offset-small);
    padding-right: var(--offset-small);
  }
}

@media screen and (max-width: 1023px) {
  div.job-detail {
    grid-template-columns: 1fr !important;
  }

  div.job-detail .summary {
    grid-column: 1;
    grid-row: 1;
  }

  div.job-detail .main {
    grid-column: 1;
    grid-row: 2;
  }

  div.job-detail .side {
    grid-column: 1;
    grid-row: 3;
  }
  div.job-detail .action {
    grid-column: 1;
    grid-row: 4;
  }
}

/* ---------- vars ---------- */
div.job-detail .side .company {
  --icon-size: 50px;
  --icon-font-size: 18px;
}

/* ---------- layout ---------- */
div.job-detail .side .company {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

div.job-detail .side .company:has(figure) {
  grid-template-rows:
    minmax(120px, 150px) calc(var(--icon-size) / 2) calc(var(--icon-size) / 2)
    15px auto;
}

div.job-detail .side .company figure {
  grid-column: 1;
  grid-row: 1 / 3;
}

div.job-detail .side .company figure,
div.job-detail .side .company .video {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.job-detail .side .company .video {
  grid-column: 1;
  grid-row: 2 / 4;
  z-index: 100;
}

div.job-detail .side .company .video a {
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.job-detail .side .company:has(figure) article {
  grid-column: 1;
  grid-row: 5;
}

div.job-detail .side .company article {
  grid-column: 1;
  grid-row: 1;
}

/* ---------- lipstick ---------- */
div.job-detail .side .company figure img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--offset-tiny);
  box-shadow: 5px 5px 15px rgba(17, 17, 17, 0.2);
  transition: all var(--transition-speed);
}

div.job-detail .side .company .video a {
  background: var(--color-green);
  font-size: var(--icon-font-size);
  border-radius: 50%;
  color: white;
  transition: all var(--transition-speed);
  text-decoration: none;
}

div.job-detail .side .company .video a:hover {
  background: var(--color-black);
  animation: bounce-in 0.3s forwards;
}

div.job-detail .side > .company article {
  padding: var(--offset-small);
  border-radius: var(--offset-small);
  background: var(--color-layout);
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  .company {
    left: 0px !important;
    display: flex;
    margin-top: 72px !important;
    margin-left: 64px;
    margin-right: auto;
  }

  .company figure img {
    max-height: 100px;
    position: relative;
    margin-left: 50%;
    margin-right: 50%;
    border: 1px solid #0000003b;
  }

  .item > .company > .video {
    margin-top: 55px;
    display: none;
  }
}

/* ---------- vars ---------- */
div.job-detail .process {
  --icon-size: 120px;
  --arrow-size: 30px;
}

div.job-detail .process .item.active {
  --arrow-size: 40px;
}

/* ---------- layout ---------- */
div.job-detail .process .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  grid-template-rows: auto auto;
  gap: var(--offset-small);

  justify-content: space-evenly;
  align-items: start;
}

div.job-detail .process .summary {
  min-height: 156px;
}

div.job-detail .process .summary > article {
  display: none;
}

div.job-detail .process .summary > article.active {
  display: block;
}

div.job-detail .process .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
  position: relative;
}

div.job-detail .process .item:not(:last-child):after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--arrow-size);
  height: var(--arrow-size);
  right: calc(var(--offset-small) * -1);
  top: calc((var(--icon-size) / 2) - var(--arrow-size) / 2);
}

div.job-detail .process .item figure {
  width: var(--icon-size);
  height: var(--icon-size);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- lipstick ---------- */

div.job-detail .process .container {
  padding: var(--offset-small) 0 0 0;
}

div.job-detail .process .summary {
  opacity: 0;
  background: var(--color-layout);
  padding: var(--offset-small);
  border-radius: var(--offset-tiny);
}

div.job-detail .process .title h4 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}

div.job-detail .process .item:not(:last-child):after {
  content: "\f061";
  background: var(--color-gray-soft);
  color: white;
  border-radius: 50%;
  font-family: var(--fontawesome);
  opacity: 0;
  transition: all var(--transition-speed);
}

div.job-detail .process .item.active:not(:last-child):after {
  background: var(--color-green);
  animation: bounce-in 0.5s forwards, fade-in 0s forwards;
}

div.job-detail .process .item div {
  font-weight: 700;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  opacity: 0;
}

div.job-detail .process .item figure {
  padding: 20px;
  background: white;
  box-shadow: 5px 5px 15px rgba(17, 17, 17, 0.1);
  border-radius: 50%;
  font-size: 0;
  opacity: 0;
  transition: all var(--transition-speed);
}

div.job-detail .process .item.active figure,
div.job-detail .process .item:hover figure {
  box-shadow: 2px 2px 10px rgba(17, 17, 17, 0.3);
  padding: 25px;
  background: var(--color-black);
}

div.job-detail .process .item svg {
  fill: var(--color-green);
  max-width: 100%;
  max-height: 100%;
  transition: all var(--transition-speed);
}

div.job-detail .process .item.active svg,
div.job-detail .process .item:hover svg {
  fill: white;
}

div.job-detail .process .item[data-observe="visible"] figure {
  animation: fade-in 0.3s forwards, bounce-in 0.3s forwards;
}

div.job-detail .process .item[data-observe="visible"] div {
  animation: fade-in 0.3s forwards;
}

div.job-detail .process .summary[data-observe="visible"],
div.job-detail .process .item[data-observe="visible"]:after {
  animation: fade-in 0.3s forwards 0.5s;
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {
  .process {
    display: none;
  }
}

/* ---------- vars ---------- */


/* ---------- layout ---------- */
div.job-detail .side .reference {
	
}

div.job-detail .side .reference > * + * {
	margin-top: var(--offset-tiny); 
}

/* ---------- lipstick ---------- */

div.job-detail .side .reference {
	padding: var(--offset-small); 
	border-radius:var(--offset-small);
	background: var(--color-layout);
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */

div.job-detail .contact {
	--icon-size: 30px;
}
/* ---------- layout ---------- */

div.job-detail .contact a {
	position: relative;
}

div.job-detail .contact a:before {
	position: absolute; 
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon-size);
	height: var(--icon-size);  
}

div.job-detail .contact .data {
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
}

/* ---------- lipstick ---------- */
div.job-detail .contact {
	background: var(--color-layout);
/* 	box-shadow: 5px 5px 30px rgba(17,17,17,.1); */
}

div.job-detail .contact a {
	transition: all var(--transition-speed); 
	padding-left: 35px;
	text-decoration: none;
	font-weight: 700;
	color: var(--color-black);
	font-size: 16px;
}


div.job-detail .contact a:before { 
	background: white;
	border-radius: 50%;
	transition: all var(--transition-speed); 
	font-family: var(--fontawesome); 
	color: var(--color-primary); 
	font-size: 16px;
}

div.job-detail .contact a[href*="whatsapp.com"]:before { 
	font-family: var(--fontawesome-brands); 
	content: "\f232"; 
}

div.job-detail .contact a[href*="mailto"]:before { content: "\f0e0"; }
div.job-detail .contact a[href*="tel"]:before { content: "\f095"; }

div.job-detail .contact a:hover { color: var(--color-secondary); } 
div.job-detail .contact a:hover:before {
	background: var(--color-secondary);
	color: white;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


} 
/* ---------- vars ---------- */


/* ---------- layout ---------- */
div.job-detail .react {
	position: sticky; 
	top: 140px;
}

/* ---------- lipstick ---------- */
div.job-detail .react {
	background: var(--gradient-dark);
	color: white;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */

/* ---------- layout ---------- */
section.jobs .filter {
	display: grid; 
	grid-template-columns: var(--grid-10);
	justify-content: center;
}


/* ---------- lipstick ---------- */

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
div.job-detail .info {
	--icon: 30px;
}

/* ---------- layout ---------- */
div.job-detail .info .data > div {
	display: grid;
	grid-template-columns: var(--icon) 1fr;
	gap: 10px;
	align-items: start;
}

div.job-detail .info .data > div > div:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon);
	height: var(--icon);
}

/* ---------- lipstick ---------- */
div.job-detail .info {
	background: var(--color-layout);
}

div.job-detail .info .data > div {
	line-height: 26px;
}

div.job-detail .info .data > div > div:first-child {
	text-align: center;
	border-radius: 50%;
	background: white;
}

div.job-detail .info .data > div + div:not(:nth-child(2)) {
	margin-top: var(--offset-tiny);
}

div.job-detail .info .data h4 {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-gray);
}

div.job-detail .info .data i {
	font-size: 16px;
	color: var(--color-green);
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
.filters-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--base);
    margin: 0 auto;
    padding: 60px 0 60px;
    gap: 40px;
}

.filter-group {
    width: 300px;
    display: flex;
    align-items: center;
}

.filter-group label {
    width: 80%;
    font-weight: 600;
    color: var(--color-dark);
}

.filter-select {
    padding: 10px 15px;
    border: 2px solid var(--color-green);
    border-radius: 25px;
    background-color: white;
    color: var(--color-dark);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 30px;
}

.filter-select:hover, .filter-select:focus {
    border-color: var(--color-dark);
    outline: none;
}

section.news .list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: var(--base);
    gap: var(--offset);
    margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    section.news .list {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media screen and (max-width: 750px) {
    section.news .list {
        grid-template-columns: 1fr !important;
    }

    .filters-container {
        flex-direction: column;
        gap: 0px;
    }

    .filter-group {
        margin-bottom: 15px;
    }

    .filter-select {
        width: 100%;
    }
}

section.news .list img {
    max-width: 300px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: flex;
    margin: 0 auto;
    gap: var(--offset);
    border-radius: 210px;
}

section.news .list .text{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    & > h5{
        font-weight: 700;
        margin-top: 10px;
        position: relative;
    }
    & > p{
        margin-top: 5px;
    }
}


section.news .list .item .text h5::before{
    position: relative;
    width: 70px;
    height: 1px;
    left: 42%;
    transform-origin: var(--origin);
    bottom: -33px;
    display: block;
    content: "";
    background: var(--color-green);
    opacity: 1;
}
section.news{
	padding:60px 0;
}
section.news .text-grid{
	text-align: left;
}
section.news .list .item a{
    color: unset;
    text-decoration: unset;
    display: unset;
}
.text-grid{
    margin-top: 30px;
    display: flex;
    max-width: var(--grid-6);
    margin: 0 auto;
    padding-bottom: 30px;
    & > p{
        text-align: left;

    }
}
.margin-auto{
display: flex;
justify-content: center;
margin-top: 20px ;
}

section.news.module {
	border-top: 1px solid #e4e4e4;
}

section.news.module a{
    display: flex;
    max-width: 175px;
    margin: 0 auto;
}

div.container.news ul {
    list-style: none;
    margin-left: 10px;
}

div.container.news ul li {
    position: relative;
    padding-left: 20px;
}

div.container.news ul li::before {
    content: "\f061";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: var(--color-green);
    position: absolute;
    left: 0;
    top: 0;
}

div.container.news ol {
    list-style: numbers;
    margin-left: 10px;
}

div.container.news ol li {
    margin-left: 20px;
}

div.news a {
	color: var(--color-green);
}

div.news p {
	padding-bottom: 10px;
}

.text-grid.image {
    display: grid;
    max-width: var(--grid-6);
    grid-template-columns: 3fr 1fr;
    & > img {
        border-radius: 100%;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        max-width: 200px;
        margin-left: 180px;
    }
}

.tag-button {
    display: inline-block;
    background-color: rgba(120, 184, 41, 0.20);
    color: black !important;
    padding: 2px 10px;
    margin:  5px;
    text-decoration: none;
    font-size: 14px;
}

@media screen and (min-width: 1723px) {
    .content > .news{
        padding-top: 90px;
    }

}
@media screen and (max-width: 1023px) {
    section.news .list{

        grid-template-columns: 1fr 1fr;
    }
    .content > .news{
        padding-top: 60px;
    }
}
@media screen and (max-width: 750px) {
    section.news .list {
        grid-template-columns: 1fr;
    }
    .content > .news{
        padding-top: 40px;
    }
    .text-grid{
        max-width: var(--grid-12);
    }
    .text-grid.image{
        display: grid;
       gap: 30px;
       max-width: var(--grid-12);
        grid-template-columns: 1fr;
        & > img{
            border-radius: 100%;
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            max-width: 100%;
            margin-left: unset;
        }
    }
}

/* ---------- vars ---------- */
.tag {
	--text: var(--tag-color, white); 
	--background: var(--tag-background, var(--color-green)); 
	--radius: var(--tag-radius, 8px);
}

/* ---------- layout ---------- */
.tag { display: inline-block; }

/* ---------- lipstick ---------- */
.tag {
	font-size: .8em;
	line-height: 1em;
	font-weight: 700;
	text-transform: lowercase;
	padding: 8px 10px;
	color: var(--text);
	background: var(--background);
	border-radius: var(--radius); 
}


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */

section.paginate {
	--size: 30px;
	--color-active: var(--color-primary); 
}

/* ---------- layout ---------- */
section.paginate {
	display: flex;
	justify-content: center;
}

section.paginate .wrapper,
section.paginate a:not(.text)  {
	display: flex;
	justify-content: center;
	align-items: center;
}


/* ---------- lipstick ---------- */

section.paginate {
	padding: var(--offset) 0;
}

section.paginate a:not(.text) {
	width: var(--size); 
	height: var(--size);
	background: var(--color-layout);

	margin: 0 2px;
	border-radius: 50%;
	font-weight: 700;
	color: var(--color-black); 
	text-decoration: none;
	transition: all var(--transition-speed); 
}

section.paginate a:not(.text):hover {
	color: white;
	background: var(--color-black);
}

section.paginate a.active {
	background: var(--color-green); 
	color: white;
}

section.paginate a.text {
	font-size: 14px;
	font-weight: 700;
	color: var(--color-black); 
	margin-right: var(--offset-small); 
}

section.paginate a.text.next {
	margin-left: var(--offset-small); 
	margin-right: 0; 
}

section.paginate a.text:hover {
	color: var(--color-primary); 
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
div.notice {
	--icon: 80px;
	--icon-half: calc(var(--icon) / 2); 
	--icon-bg-color: var(--color-orange);
	--icon-color: var(--icon-black); 
}

/* ---------- layout ---------- */
div.notice {
	display: grid; 
	grid-template-columns: repeat(2, var(--icon-half)) auto;
	align-items: center;
	justify-content: center;
}

div.notice .notice-icon {
	grid-column: 1 / 3;
	grid-row: 1;
	width: var(--icon); 
	height: var(--icon);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
}

div.notice .notice-content {
	grid-column: 2 / 4;
	grid-row: 1;
}

/* ---------- lipstick ---------- */
div.notice .notice-icon {
	background: var(--icon-bg-color);
	color: var(--icon-black);
	font-size: 40px;
	border-radius: 50%;
	text-align: center;
}

div.notice .notice-content {
	padding: var(--offset-small) var(--offset-small) var(--offset-small) calc(var(--offset-small) + var(--icon-half)); 

	background: white; 
	box-shadow: 5px 5px 30px rgba(17,17,17,.1);
	border-radius: 15px;
}

div.notice > div:last-child > * + * {
	margin-top: 15px;
}

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
div.documents {
	--icon: 90px;
}

/* ---------- layout ---------- */
div.documents .container {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--offset-small);
}

div.documents .container a {
	display: grid;
	grid-template-columns: calc(var(--icon) / 2) calc(var(--icon) / 2) 1fr;
	grid-template-rows: calc((var(--icon) / 2) * 1) 1fr;
}

div.documents .container a .pictogram {
	grid-row: 1 / 3;
	grid-column: 1 / 3;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--icon);
	height: var(--icon); 
}

div.documents .container a .content {
	grid-row: 2 / 4;
	grid-column: 2 / 4;
	z-index: 100;
	position: relative;
}

div.documents .container a .content > span {
	position: absolute;
	bottom: var(--offset-small);
}

/* ---------- lipstick ---------- */
div.documents .container a {
	text-decoration: none;
	font-size: 14px;
	line-height: 22px;
}

div.documents .container a .pictogram {
	font-size: 2.6em;
	border-radius: 50%;
	background: linear-gradient(to bottom, var(--color-green), #40690e);
	box-shadow: 2px 2px 15px rgba(17,17,17,.1);
	color: var(--color-black); 
	transform: rotate(-5deg);
	transition: all var(--transition-speed); 
	opacity: 0;
}

div.documents .container a .content {
	background: white;
	box-shadow: 5px 5px 30px rgba(17,17,17,.1);
	border-radius: var(--offset-tiny);
	border-bottom-right-radius: var(--offset);
	padding: var(--offset-small);
	padding-bottom: var(--offset);
	transition: all var(--transition-speed); 
	opacity: 0;
}

div.documents .container a:hover .content {
	box-shadow: 2px 2px 10px rgba(17,17,17,.2);
} 

div.documents .container a .content h3 + p {
	margin-top: 20px;
	margin-bottom: 10px;
}

div.documents .container a .content > span {
	font-size: 16px;
	font-weight: 600;
	font-family: var(--font-family-title);
	color: var(--color-black); 
}

div.documents .container a .content > span i { color: var(--color-green);  }

div.documents .container a h3 {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
}

div.documents .container a h3,
div.documents .container a p {
	color: var(--color-black); 
}

/* ---------- observer ---------- */
div.documents .container a[data-observe="visible"] .pictogram { animation: documents-picto-in .5s forwards ease-in var(--delay);}

div.documents .container a[data-observe="visible"] .content { animation: fade-in .35s forwards ease-in var(--delay-content); }

@keyframes documents-picto-in {
	0% {
		transform: scale(.1) rotate(-5deg);
		opacity: 0;
	}
	
	20% { transform: scale(1.2) rotate(10deg); }
	40% { transform: scale(.8) rotate(20deg); }
	50% { transform: scale(1.3) rotate(10deg); }

	100% {
		opacity: 1;
		transform: scale(1) rotate(-5deg);
	}
}

/* ---------- mediaquery ---------- */

@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
div.calltoaction .pictogram {
	--size: 90px;
	--font-size: 30px;
}

/* ---------- layout ---------- */

div.calltoaction .pictogram {
	display: none; 
	justify-content: center;
	align-items: center;
	width: var(--size);
	height: var(--size);
}

div.calltoaction .actions {
	display: flex;
	flex-direction: column;
	justify-items: center;
	row-gap: 10px;
}
div.calltoaction h3 + *,
div.calltoaction > * + * {
	margin-top: 15px;
}


div.calltoaction .actions a {
	position: relative;
}

div.calltoaction .actions a:before,
div.calltoaction .actions a:after {
	position: absolute;
	width: 30px;
	height: 30px;
	content: "";
	left: 0;
}

/* ---------- lipstick ---------- */

div.calltoaction { 
	padding: var(--offset-small); 
	border-radius: var(--offset-small); 
}

div.calltoaction h3 {
	font-family: var(--font-family-title);
}

div.calltoaction p{
	font-size: .85em;
	line-height: 1.7em;
}

div.calltoaction .pictogram {
	background: var(--color-green);
	color: white;
	font-size: var(--font-size); 
	border-radius: 50%;
}

div.calltoaction .actions a {
	text-decoration: none;
	padding-left: 37px;
	color: var(--color-black);
	font-weight: 600;
	font-size: 14px;
	transition: all var(--transition-speed); 
}

div.calltoaction .actions a:after,
div.calltoaction .actions a:before { transition: all var(--transition-speed); }

div.calltoaction .actions a:before {
	text-align: center;
	border-radius: 50%;
	background: white;
}

div.calltoaction .actions a:after {
	content: "\f105";
	font-family: var(--fontawesome);
	text-align: center;
	line-height: 30px;
	color: var(--color-green);
}

div.calltoaction .actions a[href^="tel:"]:after { content: "\f095"; }
div.calltoaction .actions a[href*="whatsapp"]:after { content: "\f232"; font-family: var(--fontawesome-brands); font-size: 1.2em;}
div.calltoaction .actions a[href*="mailto:"]:after { content: "\f0e0"; }

div.calltoaction[data-theme="gray"] { background: var(--color-layout); }
div.calltoaction[data-theme="black"] { background: var(--color-black); color: white; }
div.calltoaction[data-theme="white"] { background: white; box-shadow: 5px 5px 30px rgba(17,17,17,.2); }

div.calltoaction[data-theme="black"] a { color: var(--color-white); }
div.calltoaction[data-theme="black"] a:hover { color: var(--color-green); }
div.calltoaction[data-theme="black"] .actions a:before { background: var(--color-green); }
div.calltoaction[data-theme="black"] .actions a:after { color: var(--color-black); }

div.calltoaction[data-theme="white"] .actions a:before { background: white; box-shadow: 1px 1px 5px rgba(17,17,17,.2);  }
div.calltoaction[data-theme="white"] .actions a:after { color: var(--color-green); }
div.calltoaction[data-theme="white"] a:hover { color: var(--color-green); }


/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
/* ---------- vars ---------- */
div.faq {
	--color-trigger: #000;
	--color-active: var(--color-green);
}

/* ---------- layout ---------- */

div.faq	ul li + li {
	margin-top: var(--line-height);
}

div.faq	ul li:before { display: none; }

div.faq	ul li a.trigger {
	display: block;
	position: relative;
}

div.faq	ul li a.trigger > span {
	position: absolute;
	left: 10px;
}

div.faq	ul li .anwser {
	overflow: hidden;
	height: 0;
} 


div.faq	ul li.active .anwser { 
	overflow: initial;
	height: auto;
}

/* ---------- lipstick ---------- */

div.faq	ul li { 
	transition: all var(--transition-speed);
	transform-origin: 50% 50%; 
}

div.faq	ul li.active {
	background: var(--color-green-light);
	transition: all var(--transition-speed);
}

div.faq	ul li a.trigger {
	padding: 5px 20px 5px 40px;
	border-bottom: 1px solid #666;
	border-radius: 0; 
	font-size: 18px;
	text-decoration: none;
	transition: all var(--transition-speed); 
	color: var(--color-gray-dark);
}

div.faq	ul li.active a.trigger {
	border-color: var(--color-active); 
	color: var(--color-black); 
}

div.faq	ul li a.trigger > span:before {
	content: "\2b";
	font-family: var(--fontawesome);
	font-size: 18px;
	transition: all var(--transition-speed); 
}

div.faq	ul li.active a.trigger > span:before {
	content: "\f068";
	color: var(--color-green); 
} 

div.faq	ul li .anwser {
	opacity: 0; 
	transition: all var(--transition-speed); 
}

div.faq	ul li.active .anwser {
	opacity: 1;
	padding: var(--offset-tiny);
}

div.faq	ul li.active .anwser > .button {
	margin-top: var(--line-height); 
} 

/* ---------- mediaquery ---------- */


@media screen and (max-width: 1023px) {


}
section.v-card {
    min-height: 25rem;
}

section.v-card .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
    margin: 25px 300px;
    margin-top: 14rem;
    position: relative;
    justify-content: center;
}

section.v-card .container .image,
section.v-card .container .gegevens,
section.v-card .container .adres {
    display: flex;
    flex-direction: column;
}

section.v-card .container .button {
    margin: 10px 0px;
}

section.v-card .container .image img, section.v-card .container figure.rounded:before, section.v-card .container figure, section.v-card .container .image {
    width: 20rem;
    height: 20rem;
    max-width: 20rem;
    align-self: center;
}

section.v-card figure[data-border][data-observe="visible"]:before {
    left: 4px;
}

section.v-card .color {
    background: radial-gradient(circle at right, #7cbb2d, #5c8b23);
    clip-path: circle(50% at 35% 25%);
    transform: scale(3.5);
    width: 20rem;
    height: 20rem;
    position: absolute;
    z-index: 1;
}

.usp.grey-background {
    z-index: 2;
    position: relative;
}

section.v-card i {
    color: var(--color-green);
}

section.v-card .fa-address-card::before {
    position: absolute;
    top: 5px;
    font-size: 1.8rem;
    top: 0px;
    left: -40px;
}

body > main > section > div.container > div.gegevens > p {
    position: relative;
}

body > main > section.v-card > div.container > div.adres > h4:nth-child(1), body > main > section.v-card > div.container > div.adres > h4:nth-child(5) {
    font-size: 18px;
    font-weight: 600;
}

body > main > section.v-card > div.container > div.adres > h4:nth-child(5) {
    margin: 20px 0;
}

body > main > section.v-card > div.container > div.adres > a.button {
    margin-top: 20px;
}

body > main > section.v-card > div.container > div.adres > h4:nth-child(1) {
    position: relative;
}

section.v-card .fa-location-dot::before {
    position: absolute;
    top: 5px;
    font-size: 1.8rem;
    top: 0px;
    left: -30px;
}

section.v-card .gegevens h3 {
    color: var(--color-primary);
    line-height: 20px;
    margin-bottom: 25px;
}

body > main > section.v-card > div.container > div.gegevens > a:nth-child(3) i, body > main > section.v-card > div.container > div.gegevens > a:nth-child(4) i, body > main > section.v-card > div.container > div.adres > a:nth-child(6) i, body > main > section.v-card > div.container > div.adres > a:nth-child(7) i {
    margin-right: 10px;
}

body > main > section.v-card > div.container > div.gegevens > a:nth-child(5) {
    margin-top: 20px;
}

section.v-card .gegevens a, section.v-card .adres a {
    color: black !important;
    justify-items: start;
}

section.v-card .gegevens a:hover, section.v-card .adres a:hover {
    color: var(--color-orange) !important;
}

section.v-card .gegevens a.button:hover, section.v-card .adres a.button:hover {
    color: white !important;
}


section.v-card .gegevens a.button, section.v-card .adres a.button {
    width: 300px;
    justify-items: start;
}



section.v-card .gegevens h4 {
    margin-right: 10px;
}

.grey-background {
    background: var(--color-layout);
}

@media screen and (max-width: 1620px) {
    section.v-card .container {
        margin: 14rem 10% 25px;
    }

    section.v-card .color {
        clip-path: circle(50% at 25% 25%);
        transform: scale(3);
    }
}

@media screen and (max-width: 1160px) {
     section.v-card .container {
         display: flex;
         flex-direction: column;
         margin: 10rem 10% 50px;
         align-items: center;
     }
     section.v-card .color {
        clip-path: circle(50% at 35% 20%);
     }
     section.v-card {
         overflow: hidden;
         position: relative;
     }
}

@media screen and (max-width: 768px) {
    section.v-card .container {
        display: flex;
        flex-direction: column;
        margin: 10rem 10% 50px;
        align-items: center;
        clip-path: unset;
        z-index: 2;
    }

    section.v-card .color {
        clip-path: circle(50% at 35% 28%);
        transform: scale(3);
        z-index: 1;
    }
}