@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-Bold.eot');
    src: url('../fonts/GalanoGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GalanoGrotesque-Bold.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-Bold.woff') format('woff'),
        url('../fonts/GalanoGrotesque-Bold.ttf') format('truetype'),
        url('../fonts/GalanoGrotesque-Bold.svg#GalanoGrotesque-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-Medium.eot');
    src: url('../fonts/GalanoGrotesque-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GalanoGrotesque-Medium.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-Medium.woff') format('woff'),
        url('../fonts/GalanoGrotesque-Medium.ttf') format('truetype'),
        url('../fonts/GalanoGrotesque-Medium.svg#GalanoGrotesque-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Grotesque';
    src: url('../fonts/GalanoGrotesque-Light.eot');
    src: url('../fonts/GalanoGrotesque-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GalanoGrotesque-Light.woff2') format('woff2'),
        url('../fonts/GalanoGrotesque-Light.woff') format('woff'),
        url('../fonts/GalanoGrotesque-Light.ttf') format('truetype'),
        url('../fonts/GalanoGrotesque-Light.svg#GalanoGrotesque-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

p {
    font-family: 'Galano Grotesque', sans-serif !important;
    font-weight: 300; /* Nutzt die Light-Variante */
}

body {
    font-family: 'Galano Grotesque', sans-serif !important;
}

#sp-top-bar {
	display: none;
}

.logo-image{
	height: 63px !important;
}

body {
	padding: 65px;
}

.modal-menu-active #modal-menu {
	padding: 65px;
}

#modal-menu-toggler {
	z-index: 9999;
}

#sp-main-body {
	margin-top: -80px;
}

#sp-header {
	background: transparent;
}

.sp-contact-info {
	display: none;
}

#modal-menu {
	top: 0px;
}

body.modal-menu-active {
	overflow-y: scroll;
    position: fixed;
  	width: 100%;
}

.mod-finder {
	display: none;
}

.modal-menu-inner {
	background: black;
}


.sp-menu-item a {
	color: white !important;
}

.burger-icon span {

	background: #BE9F56;
}

.modal-menu-active .burger-icon span {
	background: white !important;
}

.logo {
	z-index: 999;
}


#sp-header > .container {
 	max-width: 99% !important
}

.burger-icon span {
	height: 11px;
	width: 44px;
}

.burger-icon {
	width: 44px;
}

#modal-menu-toggler.active .burger-icon > span:nth-child(2) {
  transform: translate(0) rotate(45deg);
	opacity: 1;
}

#modal-menu-toggler.active .burger-icon > span:nth-child(1) {
  transform: translate(0, 16px) rotate(-45deg);
}

#modal-menu-toggler.active .burger-icon > span:nth-child(3) {
  transform: translate(0, -16px) rotate(0deg);
}

#modal-menu-toggler .burger-icon > span {
    transition: all 400ms ease-out;
}

.ms-3 {
  margin-left: -5rem !important;
}

header .container-inner .justify-content-between {
	height: 100px;
}

body.modal-menu-active .logo-image {    
	content: url('/images/iage-logo-weiss.svg');
			animation: changeContent 0.3s ease;
} 

@keyframes changeContent {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.big-text-start span {
	font-weight: 700;
}

#section-id-17687984-ce70-437d-b0d1-be3ebd3b249b .sppb-row-container {
	max-width: unset;
}

#section-id-17687984-ce70-437d-b0d1-be3ebd3b249b .sppb-row-container #column-wrap-id-f3f8dc4d-8694-49af-910d-dce3b2547665 {
	padding-left: 0px !important;
}

.sp-dropdown {
	display: block !important;
	padding-top: 20px !important;
}

.sp-menu-item a::after {
	display: none;
}

.sp-dropdown-inner {
	background-color: unset !important;
	padding: 0px !important;
}

.sp-menu-item a {
	font-size: 50px !important;
	font-weight: 700 !important;
}

#modal-menu ul.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner ul > li > a {
	font-size: 50px !important;
	font-weight: 700 !important;
}
/*
.sp-megamenu-parent {
	width: 100%;
}*/



#sp-header.header-with-modal-menu.center-layout .sp-megamenu-wrapper .sp-megamenu-parent > li > .sp-dropdown.sp-dropdown-main {
	width: unset !important;
	left: 0px !important;
  position: relative;
	top: 0px !important;
	padding-top: 0px !important;
}

.sp-menu-item {
	padding-top: 20px !important;
}

.sp-menu-item a:hover {
	color: #BE9F56 !important;
}



.home-menu {
	display: none !important;
}

li.sp-has-child:nth-child(1)::before{
	content: "Services";
	display: block;
	margin-top: -64px;
	font-weight: 400;
	font-size: 20px;
	opacity: 1 !important; 
	padding-bottom: 20px;
	color: white !important;
	pointer-events: none;
}

li.sp-has-child:nth-child(2)::before{
	content: "Unternehmen";
	display: block;
	margin-top: -64px;
	font-weight: 400;
	font-size: 20px;
 	opacity: 1 !important; 
  	padding-bottom: 20px;
	color: white !important;
}


li.sp-has-child:nth-child(3)::before{
	content: "Referenzen";
  	display: block;
  	margin-top: -64px;
  	font-weight: 400;
  	font-size: 20px;
	opacity: 1 !important; 
	padding-bottom: 20px;
	color: white !important;
}
/*
li.sp-has-child:nth-child(2) > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(4) {
	margin-top: 90px !important;
}


li.sp-has-child:nth-child(3) > div:nth-child(2) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) {
	margin-top: 275px !important;
}
*/
.sp-megamenu-parent > .sp-menu-item {
  width: 33%;
	padding-left: 116px;
}

.sp-megamenu-parent {
	width: 100%;
}

.modal-menu-inner > .container {
	max-width: 100%;
}

.icon-group, .link-group2, .link-group{
	width: 33%;
	padding-left: 116px;
}

.link-group2 a, .link-group a{
font-size: 50px !important;
  font-weight: 700 !important;
	color: white !important;
}

.link-group2 a:hover, .link-group a:hover{
	color: #BE9F56 !important;
}

.social-icon2 , .social-icon3 {
	padding-left: 30px;
}

.second-menu * {
	display: inline-block;
}

.second-menu{
	position: relative;
  top: 70px;
}

.sp-menu-item > a {
	word-break: break-word; 
  hyphens: auto;
}

/*
BILD ON HOVER
*/
.hover-word-container {
    position: relative;
    display: inline-block;
    color: inherit;
    transition: color 0.3s ease-in-out;
}

 .hover-word-container {
    color: #BE9F56;
}

.hover-word-container:hover{
	color: #C4B593
}

.hover-word-container .hover-image {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    margin-bottom: 10px;
    width: 400px;
    height: auto;

    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
	
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}

.hover-word-container:hover .hover-image {
    opacity: 1; 
    visibility: visible; 
}
/* on hover */

#mod-custom124 {
padding-top: 60px;
}

/* SLIDE ------------------*/

.owl-spotlight {
  margin-left: -250px;
  width: 95%;
}
.owl-spotlight .active {
  margin-top: 85px;
  filter: blur(5px);
  left: 250px;
}

.owl-spotlight .firstactiveitem {
  margin-top: -20px;
  filter: blur(0);
  z-index: 999;

  /* Animation Blur*/
  animation-name: unblurEffect;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.owl-spotlight .owl-item .content {
    display: none;
}

.owl-spotlight .firstactiveitem .content {
  display: block;
}

.owl-spotlight .firstactiveitem .item{
  width: 150%;
  border-right: 20px solid #fff;
	
	/* Animation für main bild grösse anpassen*/
	transition: filter 0.4s ease;
	animation-name: growEffect;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards; 
}

.lastactiveitem .item {
	width: 80%;
	  animation-name: shrinkEffect;
  animation-duration: 0.5s; /* Dauer der Animation */
  animation-fill-mode: forwards; /* Behält den Endzustand (80%) bei */
}

/*
.owl-item .item {
	width: 80%;
}*/



@keyframes growEffect {
  /* Startpunkt der Animation */
  from {
    transform: scale(0.85); /* Das Element startet klein (so wie die anderen) */
  }

  /* Endpunkt der Animation */
  to {
    transform: scale(1); /* Das Element endet in Normalgrösse */
  }
}

/* Animation für den Weichzeichner des Bildes */
@keyframes unblurEffect {
  from {
    filter: blur(5px);
  }
  to {
    filter: blur(0);
  }
}

@keyframes shrinkEffect {
  /* Startpunkt der Animation */
  from {
    width: 100%;
  }

  /* Endpunkt der Animation */
  to {
    width: 80%;
  }
}