/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

body,html{overflow-x:hidden;background-image: linear-gradient(270deg, #F6F4F0 50%, #001219 0%);}
@font-face {
  font-family: Gilbert-Font;
  src: url("/wp-content/uploads/fonts/Gilbert-Bold-Preview5.otf");
}

@font-face {
  font-family: Gilbert;
  src: url("/wp-content/uploads/fonts/GilbertBoldPreview5.woff");
}
.wirsindtxt h2 {
    font-family: Gilbert-Font !important;
}
/* Hamburger button styles. */
.hamburger-button {
	position: absolute;
	transition: .3s ease-in-out;
	width: 45px;
	height: 34px;
	display: block;
	top: -0.95rem;
	right: 0;
	z-index: 100;
}

a.hamburger-button:before {
    content: "Menu";
    position: absolute;
    right: 50%;
    top: 0;
    bottom: 0;
    color: #001219;
    transform: translate(-50%, 10%);
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    margin-right:15px;
}
a.hamburger-button:hover:before {
    color: #00B3E3;
}
a.hamburger-button.active::before {
    content: "";
}

.hamburger-button span {
	position: absolute;
	height: 4px;
	border-radius: 0;
	width: 100%;
	background-color: #001219;
	top: 0;
	transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

.hamburger-button span:nth-child(1) {
	top: 0px;
}

.hamburger-button span:nth-child(2),
.hamburger-button span:nth-child(3) {
	top: 13px;
}

.hamburger-button span:nth-child(4) {
	top: 26px;
}

.hamburger-button.active span {
	background-color: #001219;
}

.hamburger-button.active span:nth-child(1),
.hamburger-button.active span:nth-child(4) {
	opacity: 0;
}

.hamburger-button.active span:nth-child(2) {
	transform: rotate(45deg);
}

.hamburger-button.active span:nth-child(3) {
	transform: rotate(-45deg);
}

.overlay {
	position: fixed;
	background: #F6F4F0;
	top: -150%;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s, height .3s;
	/*display: flex;*/
	align-items: center;
	z-index: 9;
	justify-content: center;
	transition: all .3s ease-in-out;

}

.overlay.visible {
	opacity: 1;
	top:0;
	visibility: visible;
	height: 100%;
}
section#my-navigation:has(.active) {
    opacity: 1 !important;
}
/* 2. Add the animation. */
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translate3d(-25%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

	.overlay.visible li {
		animation: fadeInLeft .4s ease forwards;
	}

		.overlay.visible li:nth-of-type(1) {
			animation-delay: 0.23s;
		}

		.overlay.visible li:nth-of-type(2) {
			animation-delay: 0.30s;
		}

		.overlay.visible li:nth-of-type(3) {
			animation-delay: 0.37s;
		}

		.overlay.visible li:nth-of-type(4) {
			animation-delay: 0.44s;
		}

		.overlay.visible li:nth-of-type(5) {
			animation-delay: 0.51s;
		}
/***HOME PAGE***/

/* #main-section{
	position:absolute;
	top:0;
} */
#my-navigation {
    background-image: linear-gradient(270deg, #F6F4F0 50%, #001219 0%) !important;
    background: transparent;
	transition: all .4s ease!important;
}

.swiper-slide{
	filter: grayscale(1);
}
.swiper-slide-active {
    filter: grayscale(0);
}
.container-images {
	overflow: hidden;
}
span.color-text{
	color:#9BF6FF;
}
button#uc-btn-accept-banner {
    background: #bdb2fe !important;
    color: #000 !important;
}
button#uc-btn-deny-banner {
    background: #FFADAD !important;
    color: #000 !important;
}
button#uc-btn-more-info-banner {
    border: 1px solid;
}
/**SOCIAL ICONS FOOTER***/
a.elementor-icon.elementor-social-icon.elementor-social-icon-facebook-f.elementor-repeater-item-f2b460a:hover {
    background: #BDB2FF;
}
a.elementor-icon.elementor-social-icon.elementor-social-icon-instagram.elementor-repeater-item-84f2855:hover{
	background:#FFC6FF;
}
a.elementor-icon.elementor-social-icon.elementor-social-icon-twitter.elementor-repeater-item-f4cb2b0:hover{
	background: #FFADAD;
}
a.elementor-icon.elementor-social-icon.elementor-social-icon-linkedin-in.elementor-repeater-item-5470456:hover{
	background:#CAFFBF;
}

a.elementor-icon.elementor-social-icon.elementor-social-icon-facebook-f.elementor-repeater-item-f2b460a:hover i,
a.elementor-icon.elementor-social-icon.elementor-social-icon-instagram.elementor-repeater-item-84f2855:hover i,
a.elementor-icon.elementor-social-icon.elementor-social-icon-twitter.elementor-repeater-item-f4cb2b0:hover i,
a.elementor-icon.elementor-social-icon.elementor-social-icon-linkedin-in.elementor-repeater-item-5470456:hover i{
	color:#000;
}

/****MATTER JS LOGOS STYLE****/
.tricks-circle {
  background-image: url("https://uploads-ssl.webflow.com/60527e7df12213d4e40ecd2a/611283f9fe870ae1c251f6d6_basketball.png");
  overflow: hidden;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius:50%;
}

.tricks-circle:nth-child(1) {
	background-image: url("/wp-content/uploads/2022/12/1-share-solid-1.gif");
	background-size: 90% !important;
    background-color: #BDB2FE;
}

.tricks-circle:nth-child(2) {
	background-image: url("/wp-content/uploads/2022/12/8-account-solid.gif");
	background-size: 90% !important;
    background-color: #FFC5FE;
}

.tricks-circle:nth-child(3) {
	background-image: url("/wp-content/uploads/2022/12/48-favorite-heart-solid.gif");
	background-size: 90% !important;
    background-color: #CAFEBF;
}

.tricks-circle:nth-child(4) {
	background-image: url("/wp-content/uploads/2022/12/21-bug-solid.gif");
	background-size: 90% !important;
    background-color: #9FC4FF;
}

.tricks-circle:nth-child(5) {
	background-image: url("/wp-content/uploads/2022/12/14-article-solid.gif");
	background-size: 90% !important;
    background-color: #FDFFB6;
}

.tricks-circle:nth-child(6) {
	background-image: url("/wp-content/uploads/2022/12/134-celebration-solid.gif");
	background-size: 90% !important;
    background-color: #FFD6A4;
}

.tricks-circle:nth-child(7) {
	background-image: url("/wp-content/uploads/2022/12/10-analytics-solid.gif");
	background-size: 90% !important;
    background-color: #9BF6FF;
}

.tricks-circle:nth-child(8) {
	background-image: url("/wp-content/uploads/2022/12/45-category-solid.gif");
	background-size: 90% !important;
    background-color: #FFADAD;
}

/* .tricks-circle:nth-child(9) {
	background-image: url("/wp-content/uploads/2022/12/8-account-solid.gif");
	background-size: 75% !important;
    background-color: red;
} */


.tricks-canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
touch-action: auto !important; 
}

.tricks-elements, .tricks-spacer {
pointer-events: none;
margin-top: 8px;
}

.tricks-m-link {
display: none;
}

.tricks-view{
position: absolute;
left: 0;
top: auto;
right: 0;
bottom: 0;
height: 80%;
margin-bottom: 30px;
}
.tricks-spacer{
position: relative;
z-index: 9;
width: 100%;
height: 50vh;
}

.s-left.distribute{
position: relative;
overflow: hidden;
width: 50vw;
/* height: 100vh; */
/* height: 160vh; */
/* background-color: #efefef; */
}
/* .s-distribution{
position:relative;
height:auto;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
-webkit-flex-direction:column-reverse;
-ms-flex-direction:column-reverse;
flex-direction:column-reverse;
display:flex;
width:100vw;
height:100%;
} */

.tricks-matter{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
height: 100%;
}

/* #distribution {
display: flex;
height: 100vh;
width: 100vw;
}    */

/***END LOGOS***/
/***PULSE EFFECT***/

.container-circle{
  min-height: 24em;
  display: flex;
  align-items: center;
  justify-content: center;
 }

.pulse{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  color: #fff;
  font-size: 4em;
  line-height: 0.5em;
  text-align: center;
  border-radius: 50%;
   
}
 .pulses{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  color: #fff;
  font-size: 4em;
  line-height: 0.5em;
  text-align: center;
  border-radius: 50%;
 }

.pulse2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  color: #fff;
  font-size: 4em;
  line-height: 0.5em;
  text-align: center;
  border-radius: 50%;
 }

.pulse:before{
  display: block;
  position: absolute;
  content: '';
  display: block;
  border: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  left: -40px;
  right: -40px;
  top: -40px;
  bottom: -40px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
}
.pulse:after{
  display: block;
  position: absolute;
  content: '';
  display: block;
  border: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
}

.pulses:before{
  display: block;
  position: absolute;
  content: '';
  display: block;
  border: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;

}
.pulses:after{
  display: block;
  position: absolute;
  content: '';
  display: block;
  border: 50%;
  border: 5px solid rgba(255, 255, 255, 0.5);
  left: -20px;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: animate 1.5s linear infinite;
}

.pulse:before{
  animation-delay: 0.5s;
  opacity: 0;
}
.pulse:after{
  animation-delay: 0.7s;
  opacity: 0;
}
.pulses:after{
  animation-delay:0.9s;
  opacity: 0;
}
.pulses:before{
  animation-delay: 1.1s;
  opacity: 0;
}

@keyframes animate{
  0%{
    transform: scale(0.7);
    opacity: 0;
  } 
  50%{
    transform: scale(1.2);
        opacity: 0.8;
  }
   100%{
    transform: scale(1.6);
    opacity: 0;
  } 
}

/***END PULSE***/
/***TEXT ANIMATIONS***/
mark {
    background: transparent;
    color: #9BF6FF;
}
h2.ih-projekt{
	font-size:24px !important;
}
h2.gs-text {
color: #FFFFFF;
    font-family: "DM Sans", Sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2em;
}
h3.gs-text, h4.gs-text {
color: #001219;
    font-family: "DM Sans", Sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2em;
}
h2.gs-text span, h3.gs-text span, h4.gs-text span {
  display: block;
  overflow: hidden;
}
/* .slick-slide img {
    padding: 5px;
}
.slick-slide {
    filter: grayscale(1);
}
.slick-slide.slick-current.slick-active {
    filter: grayscale(0);
} */

.owl-item{
	filter:grayscale(1);
}
.owl-item.center{
	filter:grayscale(0) !important;
}

/***CONTACT FORM***/
/* .custom-form input {
    height: 70px;
} */
.custom-form input#form-field-name,
.custom-form input#form-field-email{
	height:70px;
	padding-top: 20px;
}
.custom-form textarea#form-field-message {
    padding-top: 30px;
}

.elementor-field-group .elementor-field-textual:hover {
    box-shadow: inset 0 0 0 2px rgb(5, 206, 124);
    outline: 0;
}
/* .custom-form input#form-field-name:hover,
.custom-form input#form-field-email:hover,
.custom-form textarea#form-field-message:hover{
    border: 2px solid #05CE7C;
	background:#CAFFBF;
	overflow: hidden !important;   
} */
.custom-form textarea::placeholder, .custom-form input::placeholder{
    position: absolute;
    top: 30px;
    opacity: 1 !important;
    color: #000 !important;
    font-weight:bold;	
}
.custom-form label.elementor-field-label {
    position: absolute;
    top: 12px;
    left: 20px;
    font-weight: bold;
    font-size: 10px;
}

input[type="checkbox"]{
	border:0;
	clip: rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}
.elementor-field-group-mt_checkbox > div label:before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 0.5em;
	vertical-align: -3px;
	border: 2px solid #001219;
/* 	padding: 0.12em; */
	background-color: #001219;
	padding: 1em;
    border-radius: 50px;
/* 	background-clip: content-box; */
	transition: all 0.2s ease;
}
.elementor-field-group-mt_checkbox > div input:hover + label:before {
	border:2px solid #CAFFBF;
}
.elementor-field-group-mt_checkbox > div label {
	margin-right: 1em;
	position: relative;
}
.elementor-field-group-mt_checkbox > div label:after {
/* 	border-right: 6px solid #fff;
	border-top: 6px solid #fff; */
	content: "";
	height: 11px;
	left:11px;
	position: absolute;
	top: 15px;
/* 	transform: scaleX(-1) rotate(135deg); */
/* 	transform-origin: left top; */
	width: 6px;
	display: none;
}

.elementor-field-group-mt_checkbox > div input:checked + label:before {
	border-color: #CAFFBF;
	background: #CAFFBF;
}
.elementor-field-group-mt_checkbox > div input:checked + label:after {
	-moz-animation: check 0.8s ease 0s running;
	-webkit-animation: check 0.8s ease 0s running;
	animation: check 0.8s ease 0s running;
	display: block;
	width: 25px;
	height: 25px;
	background-repeat:no-repeat;
	background-image:url(/wp-content/uploads/2022/12/Vector.svg);
}
/*  @keyframes check {
 0% {
 height: 0;
 width: 0;
}
 25% {
 height: 0;
 width: 25px;
}
 50% {
 height: 25px;
 width: 25px;
}
}  */
.acceptance-text{
	padding-left: 60px !important;
    margin-top: -40px;
    line-height: 1.4em;
    font-size: 14px;
}
#senden-btn{
    margin-top: 10px !important;
}
.elementor-field-type-acceptance.elementor-field-group.elementor-column.elementor-field-group-mt_checkbox.elementor-col-100.elementor-field-required{
	margin-top:10px;
}
.elementor-field-type-acceptance.elementor-field-group.elementor-column.elementor-field-group-mt_checkbox.elementor-col-100.elementor-field-required div .elementor-field-option {
    display: -webkit-inline-flex;
}


/*****MEDIA QUERY****/
@media(max-width:1024px){
.elementor-element-76a90f6 {
    padding-right: 40px;
}
div#kontakt-section {
    margin-top: -20px;
    padding-bottom: 28px;
}
}

@media screen and (max-width: 1200px) and (min-width: 768px){
	h2.gs-text, h3.gs-text, h4.gs-text{font-size:40px;}
	.smal-font-tab h2 {
    font-size: 36px !important;
}
	.images-section.elementor-section .elementor-container {
    justify-content: flex-end !important;
}
	/*HIDE COLUMN WITH IMAGE ON HOME PAGE ON TABLET*/
	.on-tab-remove-col{display:none;}
	.images-section .elementor-col-33 {
    width: 50% !important;
}
	#main-section, #wirSind, #projekte{padding:0 50px 0 50px}
	#top-footer, #footer{padding:30px}
	#my-navigation{padding:0 30px 0 30px;}
	#img-header img {
    width: 500px !important;
    max-width: 600px !important;
}
}

@media(max-width:767px){
.elementor-2829 .elementor-element.elementor-element-efd1bbe:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap{background-color: #001219 !important;}
h2.ih-projekt{
	font-size:20px !important;
}
	section#mob-menu-section {
	display:flex;
    align-items: flex-start;
/*     align-items: stretch; */
    height: 90vh !important;
}
	section#mob-menu-section .elementor-container.elementor-column-gap-default{gap:70px}
	.elementor-element-bb35103 .elementor-widget-wrap.elementor-element-populated{gap:50px;}
	.soc-menu-txt, .soc-menu{
    padding-left:20px;
   }
	.elementor-75 .elementor-element.elementor-element-9ea0088{text-align:left !important;} /*follow us header*/
	.videoCol{height:100vh;}
	#second-section{padding:0 0 0 50px;background-image: none !important; background-color:#FFADAD !important;}
	#top-footer, #footer{padding:0px}
	#second-section{padding:50px 10px 50px 10px;}
	section#top-footer {
		background-image:none;
/*     background-image: linear-gradient(180deg, #F6F4F0 50%, #9BF6FF 10%) !important; */
}
#kontakt-page-section{background-image:none !important;}
#error-page{background-image:none !important;}
.footer-blue-col{
    background: #9BF6FF !important;
}
.footer-beige-col{
    background: #F6F4F0 !important;
}
	#my-navigation{background-image:none!important; background-color:#001219 !important;}
	.kontakt-header p, a.hamburger-button:before{color: #9BF6FF !important;}
	.hamburger-button.active span{background-color:#001219 !important;}
	.hamburger-button span{background-color: #9BF6FF !important;}
	a.hamburger-button:before {content: "";}
	
	#animation-logos{background-image:none !important;}
	#logosEffects{background-color:#001219;}
	#wirSind{background-color:#F6F4F0;  padding:0 10px 0 10px}
	#projekte{padding:0 10px 0 10px}
h2.gs-text, h3.gs-text, h4.gs-text {
    font-size: 36px;
}
	
.s-left.distribute{width: 100vw !important;}

/* #distribution{height:auto !important;} */
}