/* 
 Theme Name:   spectory 26
 Theme URI:    
 Description:  
 Author:       spectory
 Author URI:   https://www.spectory.at
 Template:     hello-elementor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

 /* == Add your own styles below this line ==
--------------------------------------------*/

h1, h2, h3, h4, h5, h6, h7, p {
	margin-bottom: 0 !important;
}

.elementor-widget-text-editor p > strong, .elementor-widget-text-editor p > b {
	font-weight: 600;
}

.elementor-widget-text-editor p > strong > b, .elementor-widget-text-editor p > b > strong {
	font-weight: 700;
}

.projekt-text {
	font-size: 30px;
	line-height: 1.15;
}

.wave-reveal {
    overflow: hidden;
    display: block;
	padding-left: 4px;
    transform: translate(-5px, 6px);
}

.swiper-pagination-progressbar {
	bottom: -50px !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60% !important;
}

.projekt-text__titel {
	display: inline;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: 600;
}

.projekt-text__beschreibung {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	font-weight: 400;
}
#elementor-popup-modal-321 {
  --overlay-color: 0, 0, 0;
  --overlay-opacity: 0.65;

  animation: popup-overlay-fade-in 0.5s ease-out both;
}

@keyframes popup-overlay-fade-in {
  from {
    background-color: rgba(var(--overlay-color), 0);
  }

  to {
    background-color: rgba(
      var(--overlay-color),
      var(--overlay-opacity)
    );
  }
}

#elementor-popup-modal-321:has(.dialog-widget-content.reverse) {
  animation: popup-overlay-fade-out 0.2s ease-in forwards !important;
}

#elementor-popup-modal-321 .dialog-widget-content.reverse {
  animation-duration: 0.2s !important;
}

@keyframes popup-overlay-fade-out {
  from {
    background-color: rgba(
      var(--overlay-color),
      var(--overlay-opacity)
    );
  }

  to {
    background-color: rgba(var(--overlay-color), 0);
  }
}

.offcanvas-image-fade {
  --overlay-opacity: 1;
  --overlay-fade-in: 0.5s;
  --overlay-fade-out: 0.2s;
}

.offcanvas-image-fade .e-off-canvas__overlay {
  opacity: 0 !important;

  transition:
    opacity var(--overlay-fade-out) ease-in !important;

  will-change: opacity;
}

.offcanvas-image-fade
.e-off-canvas[aria-hidden="false"]
.e-off-canvas__overlay {
  opacity: var(--overlay-opacity) !important;

  transition-duration: var(--overlay-fade-in) !important;
  transition-timing-function: ease-out !important;
}

.sp-carousel .swiper-slide {
	aspect-ratio: 1320 / 777;
}

.sp-carousel .swiper-slide-inner, .sp-carousel .swiper-slide-inner > img {
	height: 100%;
}
.sp-carousel .swiper-slide-inner > img {
	height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.sp-carousel .elementor-element.elementor-pagination-position-outside .swiper {
	padding-bottom: 68px !important;
}

.sp-carousel span.swiper-pagination-bullet {
    border-radius: 0;
    margin: 0 !important;
    background: #BBB;
    opacity: 1;
    width: 10.14vw;
}

.sp-carousel span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #0E0E0E;
}

.team-hover-member:hover h2 {
	text-decoration: underline !important;
}

.team-hover-member .elementor-icon svg {
	transition: transform 200ms ease-out;
}

.team-hover-member:hover .elementor-icon svg {
	transform: translateX(25%);
}

header .e-n-menu-title .e-link {
	position: relative;	
}

header .e-current .e-link::after, header .e-n-menu-title .e-link:hover::after,
.underline-menu .e-current .e-link::after{
	display: block;
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #0E0E0E;
}

header .e-current .e-link::after, header .e-n-menu-title .e-link:hover::after {
	background-color: #FFFDF3 !important;
}

@media only screen and (min-width: 768px) {
	.contact-form form .elementor-form-fields-wrapper {
		display: grid !important;
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
	}

	.contact-form .elementor-field-group-name {
		grid-row: 1;
		grid-column: 1 / 3;
	}

	.contact-form .elementor-field-group-email {
		grid-row: 2;
		grid-column: 1 / 3;
	}

	.contact-form .elementor-field-group-phone {
		grid-row: 3;
		grid-column: 1 / 3;
	}

	.contact-form .elementor-field-group-betreff {
		grid-row: 4;
		grid-column: 1 / 3;
	}

	.contact-form .elementor-field-group-message {
		grid-row: 1 / 5;
		grid-column: 3 / 7;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	.contact-form .elementor-field-group-datenschutz {
		grid-row: 5;
		grid-column: 3 / 6;
	}

	.elementor-field-type-submit {
		grid-row: 5;
		grid-column: 6 / 7;
	}
}

.contact-form .elementor-field-type-text input {
	padding: 0px 0px 5px 0px;
}

.contact-form .elementor-field-group-message textarea {
	border-width: 1px !important;
	padding-top: 11px;
	padding-left: 10px;
}

.contact-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.4;
}

.contact-form .elementor-acceptance-field {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1px solid #0e0e0e !important;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
	position: relative;
}

.contact-form .elementor-acceptance-field:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #0e0e0e;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.contact-form .elementor-acceptance-field:focus-visible {
	outline: 2px solid #0e0e0e;
	outline-offset: 3px;
}

.contact-form .elementor-field-type-acceptance label {
	flex: 1;
	margin: 0;
	cursor: pointer;
}

body:has(.black-header) header {
	background-color: #0e0e0e;
}

body:has(.black-header) header .e-n-menu-title-text {
	color: #FFFDF3 !important;
}

body:has(.black-header) header .e-current .e-link::after,
body:has(.black-header) header .e-n-menu-title .e-link:hover::after {
	background-color: #FFFDF3 !important;
}

body:has(.black-header) header .default-logo {
	display: none !important;
}


body:has(.black-header) header .logo-in-white {
	display: block !important;
}

body:has(.black-header) header .sp-open-mm svg {
	fill: #FFFDF3 !important;
}

.logo-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.logo-slider .swiper-slide {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slider .swiper-slide-inner {
    width: 140px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slider .swiper-slide-image {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 64px !important;
    object-fit: contain;
}

/* First-line: wipe in from the left */
.animate-grafik .first-line::after {
	transition: clip-path .5s ease;
	clip-path: inset(0 0 0 0);
}
.animate-grafik .first-line.hide-line::after {
	clip-path: inset(0 100% 0 0);
}
/* First-line: wipe in from the left */
.animate-grafik .first-line::after {
	transition: clip-path .5s ease;
	clip-path: inset(0 0 0 0);
}
.animate-grafik .first-line.hide-line::after {
	clip-path: inset(0 100% 0 0);
}

/* Headline, circle, labels: fade in */
.animate-grafik .headline,
.animate-grafik .circle-headline,
.animate-grafik .right-label {
	transition: opacity .4s ease;
}
.animate-grafik .headline.vc-hidden,
.animate-grafik .circle-headline.vc-hidden,
.animate-grafik .right-label.vc-hidden {
	opacity: 0;
}

.cky-consent-bar, .cky-preference-center {
	background-color: #FFFDF3 !important;
}

.cky-consent-container *, .cky-preference-center * {
	font-family: 'Inter' !important;
}

.cky-preference-center .cky-preference-btn-wrapper .cky-btn-preferences {
    border-color: black !important;
	color: black !important;
}

.cky-btn-revisit-wrapper {
	background-color: black !important;
}

@media (max-width: 767px), (pointer: coarse) {
  	a, button, [role="button"],
  	input[type="button"], input[type="submit"] {
   	 outline: none !important;
  	  -webkit-tap-highlight-color: transparent;
  	}
}

.video-sound-controls {
    position: relative;
}

.video-volume-control {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;
}

.video-volume-button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: url('/wp-content/themes/spectory-26/assets/sound-on.svg') center / contain no-repeat;
    cursor: pointer;
}

.video-volume-control.is-muted .video-volume-button {
    background-image: url('/wp-content/themes/spectory-26/assets/sound-off.svg');
}

.video-volume-slider {
    width: 70px;
    height: 4px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.video-volume-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: #fff;
}

.video-volume-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    margin-top: -3.5px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.video-volume-slider::-moz-range-track {
    height: 3px;
    background: #fff;
}

.video-volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.handmade-underline {
    position: relative;
    display: inline-block;
	text-decoration: none !important;
}

.handmade-underline::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    height: 24px;
    transform: translateY(55%) rotate(6deg);
    background: url('/wp-content/themes/spectory-26/assets/underline.svg') center / 100% 100% no-repeat;
}

.handmade-underline.white::after {
	filter: brightness(1000) !important;
}

@media only screen and (max-width: 767px) {	
	.toggle-height .elementor-widget-text-editor {
		display: none !important;
	}

	.toggle-height.toggled .elementor-widget-text-editor {
		display: flex !important;
	}
	
	.toggle-height.toggled svg {
		transform: rotate(180deg) !important;		
	}
}