@charset "utf-8";
/*

01) GRAX BASE
02) GRAX TOPBAR
03) GRAX MOBILE MENU
04) GRAX HERO
05) GRAX ABOUT
06) GRAX PORTFOLIO
07) GRAX TALK
08) GRAX NEWS
09) GRAX CONTACT
10) GRAX COPYRIGHT
11) GRAX CURSOR
12) GRAX PARTICLE EFFECT
13) GRAX GLITCH EFFECT
14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)


/*---------------------------------------------------*/
/*	01) GRAX BASE
/*---------------------------------------------------*/

/* cambay-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cambay';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cambay-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/barlow-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --text: #565656;
  --blau: #043567; /* 4,53,103 */
  --gruen: #ABB91C; /* 171,185,28 */
  --hell: #f1f1f1;
}

html {
	overflow-x: hidden;
	padding: 0px;
	margin: 0px
}
body{
	font-family: "Barlow";
	font-size: 18px;
	word-wrap: break-word;
	font-weight: 400;
	background-color: #fff;
	color: var(--text);
}
svg{
	fill: currentcolor;
	width: 15px;
	height: 15px;
}
img.svg{
	width: 15px;
	height: 15px;
}
img.img-fluid-h {
  display: inline-block;
  width: calc(50% - 24px);
  margin-left: 12px;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.25);
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #6f6f6f;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #6f6f6f;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #6f6f6f;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #6f6f6f;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color: #6f6f6f;
}

::placeholder { /* Most modern browsers support this now. */
   color: #6f6f6f;
}

h1, h2{
	font-weight: 400;
	line-height: 1.2;
	font-family: "Cambay";
	color: var(--blau);
  text-transform: uppercase;
  letter-spacing: 1px;
}

h3, h4, h5, h6{
	font-weight: 600;
	line-height: 1.2;
	font-family: "Barlow";
	color: var(--blau);
}

h1 { font-size: 45px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

a {
  color: var(--blau);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--gruen);
  text-decoration: none;
}
input:not([type="checkbox"]):not([type="radio"]), textarea {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  outline: none;
  resize: none;
  border: none !important;
  border-radius: 8px !important;
  text-align: left;
}
.all_wrap{
	width: 100%;
	height: auto;

	position: relative;
}
.all_wrap,
.all_wrap *{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box; /* Firefox, other Gecko */
			box-sizing: border-box; /* Opera/IE 8+ */
}
.section{
  padding: 120px 0;
}
.text-blau {
  color: var(--blau); 
}
.bg-blau {
  background-color: var(--blau); 
}
.text-gruen {
  color: var(--gruen); 
}
.bg-gruen {
  background-color: var(--gruen); 
}
.text-hell {
  color: var(--hell); 
}
.text-white-2 * {
  color: #fff; 
}
.bg-hell {
  background-color: var(--hell); 
}
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  display: flex
}
#preloader:before, #preloader:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
  background-color: #fff;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s
}
#preloader:after {
  left: auto;
  right: 0
}
#preloader .loader_line {
  margin: auto;
  width: 1px;
  height: 250px;
  position: relative;
  overflow: hidden;
  -webkit-transition: all .6s ease 0s;
  -o-transition: all .6s ease 0s;
  transition: all .6s ease 0s
}
.loader_line:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #000;
  -webkit-animation: lineheight 750ms ease-in-out 0s forwards;
  -o-animation: lineheight 750ms ease-in-out 0s forwards;
  animation: lineheight 750ms ease-in-out 0s forwards
}
.loader_line:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--hell);
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-animation: lineround 900ms linear 0s infinite;
  -o-animation: lineround 900ms linear 0s infinite;
  animation: lineround 900ms linear 0s infinite;
  animation-delay: 1000ms
}
@keyframes lineheight {
  0% {
    height: 0%
  }
  100% {
    height: 100%
  }
}
@keyframes lineround {
  0% {
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%)
  }
  100% {
    -webkit-transform: translateY(200%);
    -ms-transform: translateY(200%);
    -o-transform: translateY(200%);
    transform: translateY(200%)
  }
}
.preloaded .loader_line:after {
  opacity: 0
}
.preloaded .loader_line {
  opacity: 0;
  height: 100% !important
}
.preloaded:before, .preloaded:after {
  -webkit-animation: preloadedzero 1000ms ease-in-out 200ms forwards;
  -o-animation: preloadedzero 1000ms ease-in-out 200ms forwards;
  animation: preloadedzero 1000ms ease-in-out 200ms forwards
}
@keyframes preloadedzero {
  0% {
    width: 50%
  }
  100% {
    width: 0%
  }
}

/*---------------------------------------------------*/
/*	02) GRAX TOPBAR
/*---------------------------------------------------*/

.topbar{
  top: 0;
	left: 0px;
	right: 0px;
	position: fixed;
	z-index: 10;
	padding: 6px 0;
  background: rgba(255,255,255,0.67);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.topbar.opened{
	transform: translateY(0);
}
.topbar.animate{
	background-color: #fff;
	padding: 10px 0px;
	box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
.topbar .topbar_inner{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.topbar.animate .logo .dark{display: block;}
.topbar .logo img{max-width: 300px;}
.topbar.animate .logo .light img{max-width: 158px;}
.topbar .logo a{display: inline-block;}
.topbar .menu ul{
	margin: 0px;
	list-style-type: none;
}
.topbar .menu ul li{
	margin: 0px 16px 0px 0px;
	display: inline-block;
}
.topbar .menu ul li:last-child{margin-right: 0px;}
.topbar .menu ul li a{
	text-decoration: none;
	color: var(--blau);
  font-size: 19px;
	font-weight: 400;
	transition: all .3s ease;
}
.topbar .menu ul li.active a{
	color: var(--blau);
	font-weight: bold;
}
.topbar .menu ul li.current a{color: var(--gruen);}
.topbar .menu ul li a:hover{color: var(--gruen);}
.topbar.animate .menu ul li a{color: var(--blau);}

/*---------------------------------------------------*/
/*	03) GRAX MOBILE MENU
/*---------------------------------------------------*/

.mobile_menu{
	width: 100%;
	height: auto;
	position: relative;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 10;
}
.mobile_menu .topbar_inner{
	width: 100%;
	height: auto;

	background-color: #fff;
	padding: 20px 0px;
	border-bottom: 1px solid rgba(0,0,0,.2);
}
.mobile_menu .topbar_in{
	width: 100%;
	height: auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
}
.my_trigger .hamburger{
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
.my_trigger .hamburger-box{
    width: 30px;
    height: 18px;
    display: inline-block;
    position: relative;
}
.my_trigger .hamburger-inner{
    display: block;
    top: 50%;
    margin-top: -2px;
}
.my_trigger .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
    width: 30px;
    height: 2px;
    background-color: #333333;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
	
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}
.my_trigger .hamburger-inner::before,
.my_trigger .hamburger-inner::after{
    content: "";
    display: block;
}
.my_trigger .hamburger-inner::before{top: -8px;}
.my_trigger .hamburger-inner::after{ bottom: -10px;}
.my_trigger .hamburger--collapse-r .hamburger-inner{
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0.13s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r .hamburger-inner::after{
    top: -16px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}
.my_trigger .hamburger--collapse-r .hamburger-inner::before{
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner{
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::after{
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}
.my_trigger .hamburger--collapse-r.is-active .hamburger-inner::before{
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.my_trigger .hamburger{
	padding: 0px;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.my_trigger .hamburger-box{display: block;}
.my_trigger .hamburger .hamburger-inner::before,
.my_trigger .hamburger .hamburger-inner::after,
.my_trigger .hamburger .hamburger-inner{
	background-color: var(--blau);
	width: 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.mobile_menu .dropdown{
	width: 100%;
	height: auto;

	background-color: #fff;
	border-bottom: 1px solid rgba(0,0,0,.2);
	display: none;
}
.mobile_menu .dropdown .dropdown_inner{
	width: 100%;
	height: auto;

	padding: 12px 0px 6px 0;
}
.mobile_menu .dropdown .dropdown_inner ul{
	margin: 0px;
  padding:0 12px;
	list-style-type: none;
}
.mobile_menu .dropdown .dropdown_inner ul li{
	margin: 0px;
  padding: 12px 0;
  border-top: 1px solid var(--gruen);
	width: 100%;
}
.mobile_menu .dropdown .dropdown_inner ul li:first-child{
  border-top: none;
  padding: 0 0 12px 0;
}

.mobile_menu .dropdown .dropdown_inner ul li a{
  font-size: 21px;
	text-decoration: none;
	color: var(--blau);
	display: inline-block;
	padding: 4px 0px;
}
.mobile_menu .logo img{
  max-width: 25vw;
  min-width: 170px;
}

/*---------------------------------------------------*/
/*	04) GRAX HERO
/*---------------------------------------------------*/

.hero{
	width: 100%;
	height: 70vh;
  margin-bottom: -130px;

	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 100%);
	overflow: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.hero.creative{clip-path: none;}
.hero.creative.shape{clip-path:none;}
.hero.shape{clip-path: polygon(0 0, 100% 0, 100% 83%, 25% 100%, 0 83%);}
.hero .bg{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.hero.subpage {
  height: 40vh;
  min-height: 500px;
}
.hero .bg .image{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.hero .bg .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: rgba(0,0,0,.2);
}
.hero .content{
	width: 100%;
	height: 100%;

	position: relative;
	z-index: 2;
}
.hero .details{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
.hero.subpage .details {
  top: calc(50% + 70px);
}
.hero h1 {
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hero h2 span {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
}
.hero h2 span.name{
  display: inline-block;
	font-size: 66px;
	color: #fff;
	background: var(--blau);
  padding: 18px 25px 0;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.hero h2 span.job{
  display: block;
	font-size: 66px;
	color: #fff;
	background: var(--gruen);
  padding: 18px 25px 0;
  margin: 0 0 0 100px;
  width: auto;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero .details[data-animation="toTop"] .fn_animation .character{top: 15px;}
.hero .details[data-animation="toTop"] .fn_animation .character.opened{top: 0px;}

.hero .details[data-animation="toRight"] .fn_animation .character{right: 15px;}
.hero .details[data-animation="toRight"] .fn_animation .character.opened{right: 0px;}

.hero .details[data-animation="scale"] .fn_animation .character{
	opacity: 1;
	visibility: visible;
	transform: scale(0);
}
.hero .details[data-animation="scale"] .fn_animation .character.opened{transform: scale(1);}

.hero .details[data-animation="rotate"] .fn_animation .character{transform: rotate(30deg);}
.hero .details[data-animation="rotate"] .fn_animation .character.opened{transform: rotate(0);}

.fn_animation{
  opacity: 0;
}
/*.fn_animation.ready{opacity: 1;}*/
.fn_animation .character{
	display: inline-block;
	position: relative;
	opacity: 0;
	visibility: hidden;
	transform: translateZ(0);
	transition: all .4s ease;
}
.fn_animation .character.opened{
	opacity: 1;
	visibility: visible;
}
.fn_animation.job .character{
  transition: all .33s ease;
}

/* Container fixieren */
.side-buttons {
  position: fixed;
  top: 126px;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}
.side-buttons.opened {
  top: 80px;
}
/* Grunddesign für alle Buttons */
.side-btn {
  max-width: 50px;
  height: 50px;
  background: var(--blau);
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: max-width 1.2s ease, background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
  font-size: 16px;
  padding-left: 12px;
  margin-bottom: 1px;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.side-btn span {
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.side-btn:hover {
  max-width: 440px;
  padding-right: 12px;
  color: var(--blau);
  background: var(--gruen);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* Hover-Effekt: Breite vergrößern + Text sichtbar */
.side-btn:hover span {
  opacity: 1;
}

.side-btn:last-child {
  border-radius: 0 0 12px 0;
}

/* Zusätzliche Icons stylen */
.side-btn i {
  font-size: 24px;
}

/*---------------------------------------------------*/
/*	05) GRAX ABOUT
/*---------------------------------------------------*/

.about{
	background-color: #fff;
	padding-top: 150px;
}
.about .about_inner{
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-start;
}
.about .left{
	width: 42%;
  padding: 0 30px 0 0;
}
.about .left .image{position: relative;}
.about .left .image img{
	opacity: 0;
	min-width: 100%;
}
.about .left .main{
	position: absolute !important;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.about .right{
  width: 58%;
  transition: width 0.9s cubic-bezier(0.25, 0.1, 0.25, 1); /* sanfter easing */
  will-change: width; /* Browser optimiert die Übergänge */
}
.about .right .text{
	width: 100%;

	padding-top: 27px;
	padding-bottom: 28px;
}
.about .right li img {
  height: 30px;
  margin: 9px 9px 0 0;
}
/* Fixierte Position oben rechts */
#scrollBox {
  background: var(--blau);
  position: fixed;
  top: 80px;
  right: 0;
  width: 300px;              /* feste Breite */
  z-index: 1050;             /* über Inhalt, aber unter Modals */
  border-radius: 0 0 0 20px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateX(100px); /* Startposition: leicht außerhalb des Viewports */
  pointer-events: none;
  transition: 
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* weiches Easing */
  z-index: 9999;
}

/* Sichtbar */
#scrollBox.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Für sanftes Ausfaden beim Schließen */
#scrollBox.fade-out {
  opacity: 0;
}
#closeBox {
  position: absolute;
  right: 0;
  z-index: 1051;
  padding: 0 6px;
  font-size: 32px;
  color: var(--gruen);
  cursor: pointer;
}
.scrollBox-inner {
  padding: 12px;
}
.scrollBox-inner * {
  color: #fff;
}
.scrollBox-inner p {
  font-size: 15px;;
}
ul.signet {
  list-style: none;           /* Standard-Bullets ausblenden */
  padding-left: 0;            /* Einzug entfernen */
}
ul.signet li {
  position: relative;
  padding-left: 40px;         /* Platz für das Symbol schaffen */
  margin-bottom: 10px;
}
ul.signet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 30px;
  height: 30px;
  background: url('../img/logo/signet.png') no-repeat center center;
  background-size: contain;   /* skaliert sauber */
}
ul.signetw {
  list-style: none;           /* Standard-Bullets ausblenden */
  padding-left: 0;            /* Einzug entfernen */
}
ul.signetw li {
  position: relative;
  padding-left: 35px;         /* Platz für das Symbol schaffen */
  margin-bottom: 10px;
  font-size: 15px;
}
ul.signetw li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 25px;
  height: 25px;
  background: url('../img/logo/signet_w.png') no-repeat center center;
  background-size: contain;   /* skaliert sauber */
}
#scrollBox img.slogo {
  background: #fff;
  padding: 0 12px 16px;
}
/* Übergangsanpassung der rechten Spalte */
.right {
  transition: all 0.6s ease;
}

.progress_part{
	width: 100%;
	height: auto;

	padding: 135px 0px 140px 0px;
}
.progress_part .part_inner{
	width: 100%;
	height: auto;
	display: flex;
}
.progress_part .left{
	width: 50%;
	padding-right: 50px;
}
.progress_part .left h3{
	font-weight: 600;
	margin-bottom: 27px;
}
.progress_part .right{
	width: 50%;
	padding-left: 50px;
}
.kioto_progress{
	width: 100%;
	height: auto;

}
.progress_inner{
	width:100%;
	margin-bottom:27px;
}
.progress_inner:last-child{margin-bottom: 0px;}
.progress_inner > span{
	margin:0px 0px 7px 0px;
	width:100%;
	display:block;
	text-align:left;
	font-family: "Cambay";
	font-weight: 400;
	color: var(--blau);
}
.progress_inner span.number{float: right;}
.progress_inner .background{
	background:rgba(0,0,0,.09);
	width:100%;
	min-width:100%;
	position:relative;
	height:8px;
	border-radius: 5px;
}
.progress_inner .background .bar_in{
	height:100%;
	background:var(--gruen);
	width:0px;
	overflow:hidden;
	border-radius: 5px;
}
.progress_inner .background .bar{
	width:0px;
	height:100%;
}
.progress_inner .background .bar.open{
	-webkit-animation: wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.043567);  /* Safari 4+ */
	-moz-animation:    wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.043567);  /* Fx 5+ */
	animation:         wow 2s cubic-bezier(0.165, 0.840, 0.440, 1.043567);  /* IE 10+ */
	width:100%;	
}

@-webkit-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@-moz-keyframes wow {0%{ width:0%; } 100%{ width:100%; }}
@keyframes wow {0%{ width:0%; } 100%{ width:100%; }}

/*---------------------------------------------------*/
/*	06) GRAX PORTFOLIO
/*---------------------------------------------------*/

.title_holder{
	width: 100%;
}
.title_holder span{color: var(--gruen);	}
.title_holder h2, .title_holder h1{
	font-size: 24px;	
}
.title_holder h3{
	font-weight: 600;
	font-size: 48px;	
}
.portfolio{
	width: 100%;
  background-color: var(--hell);
}
.portfolio .list_inner{
	width: 100%;
  margin: 36px 0 0;
  flex: 1;
}
.list_inner h2 {
  font-family: "Mulish", sans-serif;  text-align: center;
  font-size: 24px;
  color: var(--rot);
  margin-bottom: 30px;
}
.portfolio .image{position: relative;}
.portfolio .image img{
	min-width: 100%;
	opacity: 0;
}
.portfolio .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 5px;
}
.portfolio .overlay{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
	background-color: var(--hell);
	border-radius: 5px;
	
	opacity: 0;
	visibility: hidden;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.portfolio ul li .list_inner:hover .overlay{
	opacity: 1;
	visibility: visible;
}
.portfolio .details {  
  background-color: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 24px;
  padding: 25px 15px;
  border-radius: 12px;
  overflow: hidden;
}
.portfolio .details.short {
  height: calc(100% - 60px);
}
.portfolio .details a { 
  margin-top: 15px;
}
.portfolio .details h3 {
  color: var(--blau);
  margin: 15px 12px 0;
}
.portfolio .details p {
  margin: 20px 12px 12px;
  text-align: left;
}
.portfolio .details h5 {
  margin: 0 12px;
  text-align: left;
}
.portfolio .details ul li {
  text-align: left;
}
.full_link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 4;
}
.overlay_effect{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 3;
	border-radius: 5px;
}
.overlay_effect:after{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: var(--hell);
	z-index: 1;
}
.overlay_effect:before{
	position: absolute;
	content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.my_waypoint.load .overlay_effect:before{
	z-index: 2;
  	background-color: var(--blau);
  	animation: anim 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.my_waypoint.load .overlay_effect:after{
 	animation: anim2 2s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes anim{
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes anim2{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/*---------------------------------------------------*/
/*	07) GRAX TALK
/*---------------------------------------------------*/

.talk{
	width: 100%;
	height: auto;

	padding: 0 20px 0 20px;
	position: relative;
}
.talk:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.25)), url("../img/platzhalter1.jpg") no-repeat center center/cover;
  z-index: 2;
}
.talk.talk2:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.25)), url("../img/ernaehrungsberatung2.jpg") no-repeat center center/cover;
  z-index: 2;
}
.talk:after{
	position: absolute;
    content: "";
    top: 0px;
   	bottom: 0px;
   	left: 0px;
   	right: 0px;
   	background-color: var(--blau);
   	z-index: 1;
}
.talk .talk_inner{
	width: 100%;
	height: auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	z-index: 3;
}
.talk .text{
  padding: 100px 20px;
}
.talk .text h3{
	color: #fff;
}
.talk .text h3 span{position: relative;}

.talk .text p{
	font-family: "Cambay";
}
.talk .premium {
  background: #fff;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.button a, .button button{
	color: #fff;
	text-decoration: none;
	font-family: "Cambay";
	font-weight: 400;
	position: relative;
  display: inline-block;
  background-color: var(--gruen);
	border: 2px solid var(--gruen);
  padding: 10px 40px 8px;
  border-radius: 12px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.button a:hover, .button button:hover{
	background-color: rgba(171,185,28,0.5);
	color: var(--blau);
}

.talk .button a:hover{
  color: #fff;
}

/*.button a:before, .button button:before{
	content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.2);
}
.button a:after, .button button:after{
	content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor;
}
.button a:hover:after, .button button:hover:after{
	width:100%;
	left:0;
	right:auto;
}*/

/*---------------------------------------------------*/
/*	08) GRAX NEWS
/*---------------------------------------------------*/

.news{
	width: 100%;
	height: auto;

	background-color: var(--hell);
	padding: 140px 0px 90px 0px;
}
.news .news_list{
	width: 100%;
	height: auto;

	padding-top: 90px;
}
.news .news_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
.news .news_list ul li{
	margin: 0px 0px 50px 0px;

	width: 33.3333%;
	padding-left: 50px;
}
.news .news_list ul li .list_inner{
	width: 100%;
	height: 100%;

	position: relative;
}
.news .news_list ul li .image{
	position: relative;
	overflow: hidden;
}
.news .news_list ul li .image img{
	min-width: 100%;
	opacity: 0;
}
.news .news_list ul li .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center; 
	transform: scale(1) translateZ(0);
	border-radius: 5px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.news .news_list ul li .list_inner .image:hover .main{transform: scale(1.1) rotate(3deg);}
.news .news_list ul li .details{
	width: 100%;

	padding-right: 15px;
	padding-top: 32px;
}
.news .news_list ul li .details .title{margin-bottom: 10px;}
.news .news_list ul li .details .title a{
	text-decoration: none;
	color: var(--blau);
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.news .news_list ul li .details .title a:hover{color: var(--gruen);}
.news .news_list ul li .details .date{
	text-transform: uppercase;
	font-family: "Cambay";
	font-size: 12px;
	color: var(--text);
}
.news .news_list ul li .details .date a{
	text-decoration: none;
	color: var(--text);
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.news .news_list ul li .details .date a:hover{color: var(--gruen);}
.news .news_list ul li .details .date span{
	position: relative;
	margin-left: 11px;
}
.news .news_list ul li .details .date span:before{
	position: absolute;
	content: "";
	margin-top: 1px;
	top: 50%;
	transform: translateY(-50%) rotate(15deg);
	right: 100%;
	background-color: #939393;
	width: 1px;
	height: 9px;
	margin-right: 7px;
}
.news .description{
	opacity: 0;
	visibility: hidden;
	position: absolute;
	z-index: -11;
	display: none;
}
body.modal{
	overflow-y: hidden;
}
.modalbox_news{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 100vh;
	z-index: 15;
	background-color: rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}
.modalbox_news.opened{
	opacity: 1;
	visibility: visible;
}
.modalbox_news .container{
	height: 100vh;
}
.modalbox_news .box_inner{
	position: absolute;
	top: 70px;
	bottom: 70px;
	width: 1200px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	margin-top: -20px;
	transition: all .3s ease;
	transition-delay: .3s;
}
.modalbox_news.opened .box_inner{
	opacity: 1;
	visibility: visible;
	margin-top: 0px;
}
.modalbox_news .close{
	position: fixed;
	left: 100%;
	top: 0px;
	margin-left: 40px;
	z-index: 111111;
}
.modalbox_news .close a{
	text-decoration: none;
	color: #fff;
}
.modalbox_news .close .svg{
	width: 50px;
	height: 50px;
}
.modalbox_news .description_wrap{
	position: relative;
	width: 100%;
	height: 100%;

	overflow: hidden;
	padding: 50px;
}
.modalbox_news .details{
	width: 100%;

	margin-bottom: 30px;
}
.modalbox_news .description{
	width: 100%;

}
.modalbox_news .description p{
	margin-bottom: 15px;
}
.modalbox_news .description blockquote{
	color: var(--blau);
	border-left: 2px solid var(--gruen);
	padding-left: 20px;
	margin-bottom: 15px;
}
.modalbox_news .description_wrap .image{
	position: relative;
	max-height: 450px;
	z-index: -1;
	margin-bottom: 40px;
}
.modalbox_news .description_wrap .image img{
	min-width: 100%;
}
.modalbox_news .description_wrap .image .main{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 5px;
}
.modalbox_news .details .title{
	font-weight: 600;
	margin-bottom: 5px;
}
.modalbox_news .date{
	text-transform: uppercase;
    font-family: "Cambay";
    font-size: 12px;
    color: var(--text);
}
.modalbox_news .date a{
	text-decoration: none;
    color: var(--text);
	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.modalbox_news .date a:hover{color: var(--gruen);}
.modalbox_news .date span{
	position: relative;
    margin-left: 11px;
}
.modalbox_news .date span:before{
	position: absolute;
    content: "";
    margin-top: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(15deg);
    right: 100%;
    background-color: #939393;
    width: 1px;
    height: 9px;
    margin-right: 7px;
}
.modalbox_news .share{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
}
.modalbox_news .share span{
	font-family: "Cambay";
	color: var(--blau);
	font-weight: 400;
	display: inline-block;
	padding-right: 20px;
}
.modalbox_news .share ul{
	margin: 0px;
	list-style-type: none;
}

.modalbox_news .share ul li{
	margin: 0px 10px 0px 0px;
	display: inline-block;
}
.modalbox_news .share ul li a{
	text-decoration: none;
	color: var(--blau);
}


.faq {
  /*background: linear-gradient(to bottom, rgba(4,53,103,0.1) 10%, rgba(4,53,103,0.5) 90%), url("../img/istock-1266812095.jpg") no-repeat center center/cover;*/
  background: var(--hell);
	width: 100%;
}
.faq-list {
  margin-top: 90px; 
}
.faq-list ul, .member ul {
  padding: 0;
  list-style: none;
}

.faq-list li+li {
  margin-top: 10px;
}

.faq-list li {
  padding: 20px 12px 20px 20px;
  background: #fff;
  /*border-bottom: 10px solid rgba(4,53,103,0.5);*/
  border-radius: 12px;
}

.faq-list li ul li {
  padding: 0;
  margin: 5px 0;
  background: transparent;
}

.faq-list li > a {
  display: flex;
  justify-content: space-between;
  font-size: 21px;
  line-height: 24px;
  font-weight: 400;
  padding: 0 25px 0 0;
  outline: none;
  cursor: pointer;
  text-decoration: none;
}

.faq-list .icon-show,
.faq-list .icon-close {
  font-size: 30px;
  right: 0;
  top: 0;
}

.faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.faq-list .icon-show {
  display: none;
}

.faq-list a.collapsed {
  color: var(--blau);
}

.faq-list a.collapsed:hover {
  color: var(--gruen);
}

.faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq-list a.collapsed .icon-close {
  display: none;
}

/*---------------------------------------------------*/
/*	09) GRAX CONTACT
/*---------------------------------------------------*/

.contact{
  padding: 120px 0;
	width: 100%;
	height: auto;
	position: relative;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0.45) 90%), url("../img/istock-907559296.jpg") no-repeat center center/cover;
}
.contact h3, .contact h2 {
  color: #fff;
}
.contact .contact_inner{
	width: 100%;
	height: auto;
	display: flex;
}
.contact .info_list{
	width: 100%;
	height: auto;

}
.contact .info_list ul{
	margin: 0px;
  padding: 0;
	list-style-type: none;
}
.contact .info_list li{
	margin: 0px 0px 18px 0px;

	width: 100%;
	position: relative;
}
.contact .info_list ul li .list_inner{
	width: 100%;
	height: auto;

	position: relative;
	padding-left: 27px;
}
.contact .info_list ul li span{
	font-family: "Cambay";
	font-weight: 400;
	color: var(--blau);
}
.contact .info_list ul li a{
	text-decoration: none;
	color: inherit !important;
	transition: all .3s ease;
	display: inline-block;
	position: relative;
}
.contact .info_list ul li a:hover{color: var(--blau);}
.contact .info_list ul li a:after{
	content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    transition: width .6s cubic-bezier(.25,.8,.25,1) 0s;
    background: currentColor;
}
.contact .info_list ul li a:hover:after{
	width:100%;
	left:0;
	right:auto;
}
.contact .info_list ul li a:hover{color: var(--blau) !important;}
.contact .info_list ul li i{
	font-size: 24px;
	position: absolute;
	left: 0px;
	top: 0%;
	color: var(--blau);
	margin-top: -5px;
  display: block;
}
.contact .info_list ul li p {
  margin-left: 10px; 
}
.contact .contact_inner {
  background: rgba(255,255,255,0.75);
  padding: 24px;
  border-radius: 12px;
  overflow: hidden;
}
.contact .button button{
	display: block;
	text-align: center;
  width: 100%;
  padding: 10px 40px 8px;
}

/*---------------------------------------------------*/
/*	10) GRAX COPYRIGHT
/*---------------------------------------------------*/

.footer {
  background: var(--hell);
  padding-bottom: 0;
}
.copyright{
	width: 100%;
	background-color: var(--hell);
	padding: 0 0px 20px 0px;
	position: relative;
}
.copyright .copyright_inner{
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
  position: relative;
  z-index: 1;
}
.copyright .logo img{max-width: 200px;}
.copyright .social ul{
	margin: 0px;
	list-style-type: none;
}
.copyright .social ul li{
	margin: 0px 25px 0px 0px;
	display: inline-block;
}
.copyright .social ul li:last{margin-right: 0px;}
.copyright .social ul li a{
	text-decoration: none;
	color: #fff;
}
.copyright .social .svg{
	width: 17px;
	height: 17px;
}
.copyright .copy p{
	text-transform: uppercase;
	color: #fff;
	font-family: "Cambay";
	font-weight: 400;
	font-size: 14px;
}
.copyright .copy a{
	text-decoration: none;
	color: #fff;
}
.my_wave{
	position: absolute;
	bottom: 0;
	left: 0px;
	width: 100%;
  z-index: 0;
}
.my_wave svg{
	overflow: hidden;
	vertical-align: middle;
  height: 160px;
	width: 100%;
	fill: #fff;
}

.progressbar{
    position: fixed;
	height: 100px;
    width: 1px;
	bottom: 25px;
    right: -25px;
    background-color: rgba(0,0,0,.08);
    z-index: 10;
    transition: all .3s ease;
}
.progressbar.animate{
	right: 25px;
}

.progressbar .line {
	position: absolute;
    width: 1px;
	height: auto;
    background-color: rgba(0,0,0,.4);
}

.progressbar .text{
	position: absolute;
	top: -77%;
    left: 0px;
	font-family: "Cambay";
	font-size: 13px;
    transform: rotateZ(90deg);
	text-transform: uppercase;
    transform-origin: left;
	white-space: nowrap;
}
.progressbar a{
	text-decoration: none;
	color: var(--blau);
}

/*---------------------------------------------------*/
/*  WAXON SETTINGS
/*---------------------------------------------------*/

.settings{
	position: fixed;
	z-index: 20;
	top: 20%;
	right: -200px;
	width: 200px;
	background-color: rgba(0,0,0,1.00);
	padding: 40px 20px 33px 30px;
	
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	    -ms-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
}
.settings.opened{
	right: 0px;
}
.settings .wrapper{
	width: 100%;
	height: auto;

}
.settings .icon{
	position: absolute;
	top: 0px;
	right: 100%;
	background-color: var(--blau);
	padding: 12px 12px 4px 12px;
}
.settings .icon .svg{
	color: #fff;
	width: 25px;
	height: 25px;
	animation: fa-spin 2s infinite linear;
}
.settings .link{
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 1;
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.settings .title{
	color: #fff;
	font-family: "Montserrat";
	font-weight: 600;
	position: relative;
	display: inline-block;
}
.settings .title:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(255,255,255,.2);
	left: 0px;
	bottom: 0px;
}
.settings .colors{
	margin: 0px 0px 22px 0px;
	list-style-type: none;
	padding-top: 32px;
}
.settings .colors li{
	margin: 0px;
	display: inline-block;
}
.settings .colors li a{
	text-decoration: none;
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100%;
}
.settings .direction{
	list-style-type: none;
	margin: 0px 0px 20px 0px;
}
.settings .direction li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.settings .direction li a{
	opacity: .4;
	text-decoration: none;
	color: #fff; 
}
.settings .direction li a.active{
	opacity: 1;
}
.settings .direction li .svg{
	width: 25px;
	height: 25px;
}
.settings .colors li.bl{
	display: inline-block;
}
.settings .colors li.wh{
	display: none;
}
body.dark .settings .colors li.bl,
.settings.changed .colors li.bl{
	display: none;
}
body.dark .settings .colors li.wh,
.settings.changed .colors li.wh{
	display: inline-block;
}
body.dark .settings,
.settings.changed{
	background-color: #fff;
}
body.dark .settings .icon,
.settings.changed .icon{
	background-color: #fff;
}
body.dark .settings .icon .svg,
.settings.changed .icon .svg{
	color: var(--blau);
}
body.dark .settings .title,
.settings.changed .title{
	color: var(--blau);
}
body.dark .settings .title:before,
.settings.changed .title:before{
	background-color: rgba(0,0,0,.5);
}
body.dark .settings .direction li a,
.settings.changed .direction li a{
	color: var(--blau);
}
body.dark .settings .cursor li:nth-child(1) a,
.settings.changed .cursor li:nth-child(1) a{
	border-color: var(--blau);
}
body.dark .settings .cursor li:nth-child(1) a:before,
.settings.changed .cursor li:nth-child(1) a:before{
	background-color: var(--blau);
}
body.dark .settings .cursor li .svg,
.settings.changed .cursor li .svg{
	color: var(--blau);
}
.settings .cursor{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
}
.settings .cursor li{
	margin: 0px 20px 0px 0px;
	display: inline-block;
}
.settings .cursor li a{
	text-decoration: none;
	color: #fff;
	opacity: .4;
	font-weight: 600;
}
.settings .cursor li a.showme{
	opacity: 1;
}
.settings .cursor li:nth-child(1) a{
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 2px solid #fff;
	position: relative;
	display: inline-block;
}
.settings .cursor li:nth-child(1) a:before{
	position: absolute;
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #fff;
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
}
.settings .cursor li .svg{
	width: 25px;
	height: 25px;
	color: #fff;
}
.settings .cursor li:nth-child(2){
	position: relative;
	top: -2px;
}
.settings .effect{
	margin: 0px;
	list-style-type: none;
	padding-top: 15px;
	padding-bottom: 25px;
}
.settings .effect li{
	margin: 0px 0px 5px 0px;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 100%;
	background-color: #fff;
	opacity: .4;
}
.settings .effect li a{
	text-decoration: none;
	color: var(--blau);
	font-size: 13px;
	font-weight: 600;
	font-family: "Montserrat";
	display: block;
	position: relative;
	top: 2px;
}
.settings .effect li.selected{
	background-color: #fff;
	opacity: 1;
}

/*---------------------------------------------------*/
/*	GRAX INTRO
/*---------------------------------------------------*/

.intro_hero{
	width: 100%;
	height: 100vh;

	position: relative;
	margin-bottom: 150px;
}
.intro_hero:before{
	position: absolute;
    content: "";
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;  
    background-image: url(..//img/patterns/light-honeycomb.png);
    background-repeat: repeat;
    opacity: .4; 
    z-index: 2;
}
.intro_hero:after{
	position: absolute;
    content: "";
    top: 0px;
   	bottom: 0px;
   	left: 0px;
   	right: 0px;
   	background-color: var(--blau);
   	z-index: 1;
}
.intro_hero .content{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 100%;
	padding: 0px 20px;
	text-align: center;
}
.intro_hero .content .name{
	font-size: 50px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 10px;
	margin-bottom: 20px;
}
.intro_hero .content p{
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	font-family: "Cambay";
	font-weight: 400;
}
.intro_hero .fn_animation .character{top: 15px;}
.intro_hero .fn_animation .character.opened{top: 0px;}
.intro_content{
	width: 100%;
	height: auto;
}
.intro_content .demo_list{
	width: 100%;
	height: auto;
	padding-top: 100px;
	margin-bottom: 70px;
}
.intro_content .demo_list ul{
	margin: 0px 0px 0px -50px;
	list-style-type: none;
}
.intro_content .demo_list ul li{
	margin: 0px 0px 50px 0px;

	width: 50%;
	padding-left: 50px;
	position: relative; 
}
.intro_content .demo_list ul li .list_inner{
	width: 100%;
	height: auto;

	position: relative;
	text-align: center;
	transition: all .3s ease;
	top: 0px;
	transform: translateZ(0);
}
.intro_content .demo_list ul li .list_inner:hover{
	top: -10px;
}
.intro_content .demo_list ul li .list_inner h3{
	font-size: 20px; 
	font-weight: 600;
	padding-top: 20px;
}


/*---------------------------------------------------*/
/*	14) GRAX MEDIA QUERIES (FOR SMALL DEVIVES)
/*---------------------------------------------------*/

@media (max-width: 1399px) {
	.modalbox_news .box_inner{width: 900px;}
  .topbar .logo img{max-width: 250px;}
  .topbar .menu ul li{
    margin: 0px 10px 0px 0px;
  }
  .topbar .menu ul li a{
    font-size: 18px;
  }
  .hero h1 {
    font-size: 19px;
  }
  .hero h2 span.name{
    font-size: 48px;
    padding: 20px 20px 0;
    letter-spacing: 1.5px;
  }
  .hero h2 span.job{
    font-size: 48px;
    padding: 20px 20px 0;
    letter-spacing: 1.5px;
    margin-left: 50px;
  }
}
@media (max-width: 1199px) {
  .hero .details {
    margin-left: 50px; 
  }
  .topbar .logo img{max-width: 200px;}
  .topbar .menu ul li a{
    font-size: 17px;
  }
	.modalbox_news .box_inner{width: 100%;top: 0px;bottom: 0px;}
	.modalbox_news .close{position: absolute;top: 20px;left: auto;right: 20px;margin-left: 0px;}
	.modalbox_news .close .svg{color: #777;width: 25px;height: 25px;}
}
@media (max-width: 1039px) {
	#preloader{display: none;}
	.mouse-cursor{display: none;}
	.cursor-inner{display: none;}
	.cursor-inner.cursor-hover{display: none;}
	.cursor-outer{display: none;}
	.topbar{display: none;}
	.mobile_menu{display: block;}
	.hero .name{font-size: 55px;}
	.about .about_inner{display: block;}
	.about .left{padding-right: 0px;width: 100%;margin-bottom: 40px;}
	.about .right{padding-left: 0px;width: 100%!important;}
	.portfolio ul{margin-left: -20px;}
	.portfolio ul li{padding-left: 20px;margin-bottom: 20px;}
	.news .news_list ul{margin-left: -30px;}
	.news .news_list ul li{padding-left: 30px;margin-bottom: 30px;}
  .hero h1 {
    font-size: 18px;
  }
  .hero h2 span.name{
    font-size: 40px;
    padding: 10px 16px 0;
    letter-spacing: 1.2px;
  }
  .hero h2 span.job{
    font-size: 40px;
    padding: 10px 16px 0;
    letter-spacing: 1.2px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .section{
    padding: 60px 0;
  }
  .hero .details {
    margin-left: 10px; 
  }
  .hero h1 {
    font-size: 16px;
  }
  .hero h2 span.name{
    line-height:1;
    font-size: 24px;
    padding: 15px 12px 0;
    letter-spacing: 1px;
  }
  .hero h2 span.job{
    font-size: 24px;
    padding: 15px 12px 0;
    letter-spacing: 1px;
  }
	.about .right .list ul{margin: 0px;}
	.about .right .list ul li{width: 100%;padding-left: 0px;}
	.portfolio ul li{width: 50%;}
	.progress_part .part_inner{display: block;}
	.progress_part .left{width: 100%;padding-right: 0px;margin-bottom: 20px;}
	.progress_part .right{width: 100%;padding-left: 0px;}
	.talk .talk_inner{display: block;}
	.talk .text{padding-right: 0px;margin-bottom: 30px;}
	.news .news_list ul li{width: 50%;}
	.news .news_list ul li .details .date span{margin-left: 0px;}
	.news .news_list ul li .details .date span:before{display: none;}
	.contact .contact_inner{display: block;}
	.contact .left{width: 100%;margin-bottom: 20px;}
	.contact .right{width: 100%;padding-left: 0px;}
	.copyright .copyright_inner{display: block;}
	.copyright .logo{margin-bottom: 17px;}
	.copyright .social{margin-bottom: 10px;}
	.modalbox_news .details .title{font-size: 25px;}
	.modalbox_news .description_wrap{padding: 20px;}
  .hero h1 span.name, .hero h1 span.job {font-size: 40px;}
  .hero .details[data-animation="toTop"] .fn_animation .character.opened {
    top: -3px;
  }
	.intro_fixed_price{display: none;}
	.intro_content .demo_list ul{margin: 0px;}
	.intro_content .demo_list ul li{width: 100%;padding-left: 0px;}
}
@media (max-width: 479px) {
	.hero .name{font-size: 30px;}
	.hero .job{font-size: 15px;}
	.portfolio ul{margin: 0px;}
	.portfolio ul li{width: 100%;padding-left: 0px;}
	.news .news_list ul{margin: 0px;}
	.news .news_list ul li{width: 100%;padding-left: 0px;}
}

.hero-waves {
  display: block;
  width: 100%;
  height: 6.9vw;
  position: relative;
  z-index: 3;
  margin-top: -5.2vw;
}

/* Farbgestaltung */
.wave1 use { fill: rgb(171,185,28); opacity: 1; }
.wave2 use { fill: rgb(171,185,28); opacity: .5; }
.wave3 use { fill: #fff; opacity: 1; }

/* Animation: bewegt ganze Gruppen */
.wave {
  transform-box: fill-box;       /* wichtig für relative Bewegung */
  transform-origin: left center;
}

/* sanfte, endlose Bewegung (keine Sprünge) */
.wave1 { animation: waveScroll 20s linear infinite; }
.wave2 { animation: waveScrollReverse 15s linear infinite; }
.wave3 { animation: waveScroll 10s linear infinite; }

/* Keyframes – verschieben um exakt eine Wellenbreite (50%) */
@keyframes waveScroll {
  from { transform: translateX(0%); }
  to   { transform: translateX(-50%); }
}
@keyframes waveScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0%); }
}
.linkliste li {
  display: inline-block;
  border-radius: 12px;
  padding: 6px 12px;
  background: var(--hell);  
}