@charset "UTF-8";
/* CSS Document */

/*
 Theme Name:   Twenty Twenty-Two Child
 Description:  LK Twenty Twenty-Two Child Theme 
 Author:       Lutz Kasper
 Author URI:   https://lutzkasper.de
 Template:     twentytwentytwo
 Version:      1.0
 Text Domain:  twentytwentytwo-child
*/

/* START +++++++++ farbige Balken i.e. for color bars ++++++++++++ */

.noMarginTop {
  margin-top: 0 !important;
}

.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline a {
 transition: all .2s ease-in-out;
}

.wp-block-button.is-style-outline:hover {
  background-color: #fff;
}

.wp-block-button.is-style-outline a:hover {
  color: #006dae !important;
}

/* avoid buttons to collapse */
.barContainer {
  flex-wrap: wrap !important;
}
.barButton {
  flex-basis: 100% !important;
}

/* ========= lokale Fonts ======== */

/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-italic - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-700italic - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-serif-v21-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* Noto Sans */

/* noto-sans-regular - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-700italic - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/wp-content/uploads/fonts/noto-sans-v27-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* icon font */
@font-face {
  font-family: 'Kasper-Icons';
  font-style: normal;
  font-weight: normal;
  src: local(''),
       url('/wp-content/uploads/fonts/Kasper-Icons.woff2') format('woff2'), /*  */
       url('/wp-content/uploads/fonts/Kasper-Icons.woff') format('woff'); /*  */
}

/* ========= END lokale Fonts ======== */

/* +++++++++ START header +++++++++ */

.header-top-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Nav bar less top space */
/*.wp-block-group.wp-container-6, .wp-block-group.wp-container-16 {
row-gap: 0.1rem;}*/

/* +++++++++ START Menu - underline from center animation on hover +++++++++ */
/* https://stackoverflow.com/questions/55398733/how-to-hover-underline-start-from-center-instead-of-left */
/* reset styles */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus,
.wp-block-site-title a:hover {
text-decoration: none !important;
text-decoration-style: unset;
}

/* animation */
.wp-block-navigation-item a::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0px;
  background: #333;
  transition: all 0.45s;
  height: 2px;
  bottom: -2px;
}

.wp-block-navigation-item a:hover::after {
  width: 100%;
  left: 0;
}

.current-menu-item.wp-block-navigation-link::after {
  width: 100% !important;
  left: 0;
}

.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative;
}
.wp-block-site-title {
  position: relative;
}

/* +++++++++ END Menu - underline from center animation on hover +++++++++ */

/* nav submenu - text right-justified */

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  text-align: right;
  border-right: 2px solid rgba(0,0,0,.15);
  border-left: none;
  border-top: none;
  border-bottom: none;
  background-color: #ffffffed;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  background-color: #ffffffed;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  justify-content: flex-end;
}


/* mobile menu - show background */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #ffffffeb;
}

/* Links */
a {
  color: #0355d5;
}
.wp-block-site-title a {
  color: #000;
}

/* define theme fonts */

body,
h2, h4, h6, p, .wp-block-post-title {
	font-family: "Noto Serif", serif;
}

h1, h3, h5, .wp-block-site-title {
	font-family: "Noto Sans", sans-serif;
}

h3, .wp-block-site-title {
	font-weight: 700;
}

h6 {
	letter-spacing: 0.02em;
}

.initiale::first-letter {
  float: left;
  font-size: 5.2em;
  color: #666;
  letter-spacing: 0.05em;
  margin-left: -4px;
  padding-top: 10px;
  line-height: 62px;
}

/* header */

.wp-container-4.is-content-justification-space-between.wp-block-group.alignwide.header-lutz {
  border-bottom: 2px solid #888;
}

.wp-block-site-logo {
  line-height: inherit;
}

.wp-block-site-title {
  /* font-size: 3em; */
  font-style: normal;
}

.wp-block-site-title a {
  text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: Noto Sans;
}

/* content */

main {
  margin-top: 3rem !important;
}

/* ++++++++++++ START box hoverShadow ++++++++++++ */

.hoverShadowBlock .wp-block-column {
  border-top: 1px solid #f8f8f8;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #fff;
  padding-top: 18px;
  border-radius: 18px;
}
.hoverShadowBlock .wp-block-column:hover {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
  box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15);
}

/* crop images */
.hoverShadow img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}

.hoverShadowBlock .wp-block-column h4 {
  padding: 0 12px 0 20px;
}

.hoverShadowBlock .wp-block-column p {
  padding: 0 12px 10px 20px;
}

.hoverShadow h4 {
  padding: 0 20px;
}

.hoverShadow p {
  padding: 0 20px;
}

.hoverShadow h5 {
  padding: 0 20px 30px 20px;
}

/* button */
.hoverShadowBlock .wp-block-column .is-layout-flex.wp-block-buttons {
  margin-top: 10px;
}
.hoverShadowBlock .wp-block-column .wp-block-button {
  padding: 10px 20px 30px 20px;
}
.hoverShadowBlock .wp-block-column .wp-block-button a {
background-color: #0355d5;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hoverShadowBlock .wp-block-column .wp-block-button a:hover {
background-color: #000;
}

/* ++++++++++++ END hoverShadow ++++++++++++ */

/* images */
.wp-block-image {
  padding-top: 8px;
}
.wp-block-latest-posts__featured-image.alignleft {
  padding-top: 6px;
}

/* START WP-Gallery fade in */

/*.capOverlay figure figcaption {
	border: 1px solid red;
}
 .capOverlay figure figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.6;
}

.figure.wp-block-image,
.capOverlay figure figcaption:hover {
  height: 100%;
}
*/




/* funzt: */

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  background: linear-gradient(0deg,rgba(0,0,0,.3),rgba(0,0,0,.5) 50%);
  bottom: 0;
  color: #fff;
  font-size: 13px;
  left: 0;
  margin-bottom: 0;
  max-height: 60%;
  overflow: auto;
  padding: 10px 8px 8px;
  position: absolute;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 30%;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  opacity: 0.2;
  transition: opacity 1s ease-in;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption:hover {
  opacity: 1;
}

/* END WP-Gallery fade in */
/* START Smart Slider 3 - Animation Caption Block */

/*
     @keyframes slideInLeft {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(0);
        }
      }

div#n2-ss-2 .n-uc-mG2k8HLSPV4a,
div#n2-ss-2 .n-uc-W5vG5zV3AlRw {
  animation: 1s ease-out 0s 1 slideInLeft;
}
*/

/* END Smart Slider 3 - Animation Caption Block */

/* START +++++++++ Ken Burns Effect ++++++++++++ */

/* oder auch: .wp-block-image.size-full.ken-burns */
/* .ken-burns {
  height: 300px;
  overflow: hidden;
} */

.ken-burns {
  width: 100%;
  height: 20vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.ken-burns img {
  width: 100%;
  animation: move 80s ease infinite;
  /* Add infinite to loop. */
/* Add both to go back and forth to loop. */
  
  -ms-animation: move 80s ease infinite;
  -webkit-animation: move 80s ease infinite;
  -0-animation: move 80s ease infinite;
  -moz-animation: move 80s ease infinite;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  50% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
    
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
    
    -o-transform: scale(1.2);
    /* Opera */
    
    -moz-transform: scale(1.2);
    /* Firefox */
  }
  100% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
    
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
    
    -o-transform: scale(1.0);
    /* Opera */
    
    -moz-transform: scale(1.0);
    /* Firefox */
  }
}
/* END Ken Burns effect */

/* ++++++++++++++ START Tabs +++++++++++++ */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.6s;
  font-size: 1em;
  font-family: Noto Sans, sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*If you want to fade in the tab content, add the following CSS:*/

.tabcontent {
  animation: fadeEffect 2s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
/* ++++++++++++++ END Tabs +++++++++++++ */

/* ++++++++++++++ START "Lightbox for Gallery & Image Block" +++++++++++++ */
#baguetteBox-overlay .full-image figcaption {
  font-family: inherit;
  padding: 10px 0;
}
/* ++++++++++++++ END "Lightbox for Gallery & Image Block" +++++++++++++ */

.audiocaption {
  margin-top: 0 !important;
}

/* ++++++++++++++ START Parallax (has MediaQueries) ++++++++++++ */

.parallax_wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px; }

.intro_screen {
 }

.outro_screen {
  height: 100vh;
  /*background-color: teal;*/
  display: flex;
  justify-content: center;
  align-items: center; }

.parallax_group {
  position: relative;
  height: 100vh;
  /* means: every group is as high as the viewport */
  transform-style: preserve-3d;
  /* makes shure, 3D depth shows up in every browser */ }

.parallax_group_no_height {
  position: relative;
  transform-style: preserve-3d;
}

.parallax_layer {
  position: absolute;
  inset: 0;
  /*top, right, bottom, left: all 0 */
  display: flex;
  justify-content: center;
  align-items: center; }

.base_layer {
  /* scale calculation: (base_layer Z transform value  *  -1)  /  initial parallax_wrapper perspective)  +1 */
  /* -300 * -1 / 300 +1 =2 */
 transform: translateZ(-300px) scale(2); } /* translateZ > 0 heißt: scrollt schneller als normal */

.mid_layer {
  transform: translateZ(0);
  /* moves with "0" as fast as scrolling */ }

.top_layer {
  
transform: translateZ(210px) scale(0.3);}

#intro {
  z-index: 0; }

#group-1 {
  z-index: -1; }

#group-1 > .base_layer {
/* background-image: url("/wp-content/uploads/2022/09/Duesseldf_Hafen-HQ-scaled.jpg"); */
}

#group-2 > .mid_layer {
 /* background-color: yellowgreen;*/ }

#outro {
	margin-top: 0;
}

/* blocks called "cover" with background-image */
/*.wp-block-cover__inner-container {
  display: flex;
  justify-content: center;
  align-content: center;
}

.wp-block-cover__inner-container p {
  border: 2px solid white;
  padding: 0px 18px 6px 18px;
}
*/
/* ++++++++++++++ END Parallax ++++++++++++ */

/* ++++++++++++++ START like Event boxes with hoverShadow ++++++++++++++ */

.hoverShadow {
  border-top: 1px solid #f8f8f8;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #fff;
  padding-top: 18px;
  border-radius: 18px;
}

.hoverShadow:hover {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
  box-shadow: 0 22px 43px rgba(0, 0, 0, 0.15);
}


/* ++++++++++++++ END hoverShadow ++++++++++++++ */


/* ++++++++++++++ START Accordions ++++++++++++ */

/* slide down added */
@keyframes lwopen {
	0%    {opacity: 0;
	transform: scale(1,0);
  transform-origin: top;}
	100%  {opacity: 1;
	transform: scale(1,1);
  transform-origin: top;}
}

/* ++++++++++++++ END Accordions ++++++++++++ */

/* START +++++++++ Slide-in box ++++++++++++ */
.item {
/* width: 300px; */
height: auto;
  position: relative;
  height: 19rem;
  background-color: lightGrey;
  overflow-y: hidden;
  box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
  margin: 0;
  display: block;
  background-color: #03199082;
  padding: 1rem;
  transform: translate3d(0, -100%, 0);
  transition: transform 300ms;
  color: #fff;
  height: 40%; /* align different text lengths */
}
.item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
  transform: translate3d(0, 0, 0);
}
.item a:hover ~ .item__overlay h3, .item a:focus ~ .item__overlay h3 {
  transform: translate3d(0, 0, 0);
}
.item a:hover ~ .item__overlay .item__body, .item a:focus ~ .item__overlay .item__body {
  opacity: 1;
}

.slidein-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  transition: transform 300ms;
  background-color: #fefeff;
  transform: translate3d(0, 100%, 0);
  opacity: 0.8;
}

.item__body {
  flex-grow: 1;
  padding: 1rem;
  opacity: 0;
  transition: opacity 500ms 100ms;
}
.item__body p {
  margin: 0;
}
/* dark overlay */ 
.item::after {
  content: "";
  display: block;
  position: absolute;
  padding: 100px 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(13, 81, 244, 0.21);
}

/* END ++++++++++++ Slide-in box ++++++++++++ */

/* START +++++++++ like Lobo Theme Agnes Weegen ++++++++++++ */
.img-block {
  padding-top: 0;
}

.img-block img {
  width: 100%;
}

.no-gap-container {
  gap: 0 !important;
  margin-top: 0 !important;
}
.fw-text-group {
  padding: 40px;
}

/* Image with caption overlay */
/* nach https://www.30secondsofcode.org/css/s/image-overlay-hover */
.imgCaptCont {
  position: relative;
}
.imgwithcaption::before, .imgwithcaption::after {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  opacity: 0;
  transition: all 0.9s ease;
}

.imgwithcaption .caption-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  color: #fff;
  transition-delay: 0.1s;
  transition: all 0.9s ease;
}

.imgwithcaption:hover::before, .imgwithcaption:hover::after,
.imgwithcaption:focus::before, .imgwithcaption:focus::after {
  opacity: 1;
}

.imgwithcaption:hover .caption-overlay,
.imgwithcaption:focus .caption-overlay {
  opacity: 1;
}


/* END +++++++++ like Lobo Theme Agnes Weegen ++++++++++++ */

/* START +++++++++ Footer ++++++++++++ */

/* less distance to content / more space at the bottom */
/*.is-layout-constrained.wp-container-25.wp-block-group {
  padding-top: 3rem !important;
  padding-bottom: 3rem;
}*/

.footer-lutz {
/* max-width: 1500px !important; defined in .json */
  background-color: #f7fbff;
  border-top: 2px solid #777;
  padding-top: 2rem !important;
padding-bottom: 30px;
}

.footer-lutz p {
  border-bottom: 1px solid;
  padding-bottom: 16px;
}

.wp-block-group.wp-container-22 {
  flex-wrap: wrap;
}

.footerColumn p a {
  text-decoration: none;
  color: var(--wp--preset--color--foreground);
}

.footerColumn p a:hover {
  color: #006fc0;
}
/* Logo */
.wp-image-561 {
  margin-right: 40px;
}
/* hover Icons */
.footerColumn p a:hover .iconHome,
.footerColumn p a:hover .iconMail {
  background: #006fc0;
}

/* Icons */

.footerColumn i {
  display: inline-block;
  color: #f1f1f1;
  background: #8c8c8c;
  height: 22px;
  width: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  font-family: 'Kasper-Icons';
  margin-right: 4px;
}

.iconPhone::before {
  content: "A";
}
.iconHome::before {
  content: "B";
}
.iconMail::before {
  content: "D";
}

/* icons + text on colored BG */

.icon-item-block {
display: flex;
justify-content: flex-start;
align-content: center;
border-bottom: 2px solid;
padding-bottom: 20px;
color: #fff;
font-family: Noto Sans, sans;
font-weight: bold;
text-transform: uppercase;
}

.icon-item-block a,
.soak-like-col-right p a,
.soak-like-col-left p a {
  display: flex;
  text-decoration: none;
  color: #fff;
  transition: all ease 0.7s;
}
.icon-item-block a:hover, 
.soak-like-col-right p a:hover, 
.soak-like-col-left p a:hover {
  color: #000;
}


/* Container icons + text */
.icon-item {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  border-bottom: 1px solid;
  padding-bottom: 16px;
}
/* Container icons */
.icon-circle {
  position: relative;
  display: flex;
  align-items: center;
  width: 2em;
  justify-content: center;
  margin-right: 1.3em;
  margin-left: 0.4em;
}

.iconCircle, .iconFacebook, .iconInstagram,
.iconFacebookCol, .iconInstagramCol, .iconTwitterCol {
  font-family: 'Kasper-Icons';
  font-style: normal;
  position: absolute;
}

.iconCircle {
  font-size: 3em;
}

.iconFacebook {
  color: #fff;
}
.iconFacebook, .iconFacebookCol {
  font-size: 1.5em;
}

.iconFacebookCol, .iconInstagramCol, .iconTwitterCol {
  color: #3e5f6f;
  font-size: 1.5em;
}

.iconCircle::before {
  content: "=";
}

.iconFacebook::before,
.iconFacebookCol::before {
  content: "0";
}
.iconInstagram::before,
.iconInstagramCol::before {
  content: "2";
}
.iconTwitterCol::before {
  content: "3";
}

/* footer SoAk-like */
/* container */
.soak-like-footer {
  padding-top: 0;
  padding-bottom: 0;
  background-image: linear-gradient(90deg, #738d99 50%, #3e5f6f 50%);
}
/* 2 main columns */
.soak-like-col-left {
  padding-top: 20px;
  padding-bottom: 30px;
}
.soak-like-col-right {
  background-color: #3e5f6f;
  padding-top: 20px;
  padding-left: 20px;
}
/* columns */
.soak-like p {
color: #fff;
font-family: Noto Sans, sans;
font-weight: bold;
text-transform: uppercase;
border-bottom: 2px solid #fff;
padding-bottom: 9px;
line-height: 1.6em;
margin-top: 9px;
}
.soak-like-subline {
  background-color: #2d444f;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  padding-left: var(--wp--custom--spacing--outer);
  padding-right: var(--wp--custom--spacing--outer);
}
.soak-like-subline p {
color: #fff;
font-family: Noto Sans, sans;
font-weight: bold;
}

/* START +++++++++ Media Queries ++++++++++++ */

/* 1-column layout */
@media (max-width: 781px) {

/* mobile menu */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  padding-top: 0.5rem;
}
	
.parallax_group {
padding-left: 20px;
padding-right: 20px;
}
/* full width blocks Weegen */
.imgCaptCont {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.imgwithcaption::before, .imgwithcaption::after {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  opacity: 0;
  transition: all 0.5s ease;
  height: 100%;
}

.img-block {
  padding-top: 0;
  height: 600px;
  width: 900px;
}

.soak-like-footer {
  padding-top: 10px;
  padding-bottom: 10px;
  background-image: none;
  background-color: #3e5f6f !important;
}
.soak-like-col-left {
	display:none;
}
.soak-like-col-right {
  background-color: transparent;
  padding-top: 0;
  padding-left: 0;
}
	
}
/* Media Query */
@media (min-width: 782px) {
	
}

/* Media Query */
@media (min-width: 782px) and (max-width: 1333px) { 
  /* Slide-in box */
	.item {
  height: 29rem;
}
}

/* Media Query large screens */
@media (min-width: 1501px) {

/* if elements shall touch left and right viewport width: Test CSS for Full Width Layout */
.wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align="full"] > .wp-block-group, .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-psb-parallax .psbParallaxSection .block-editor-block-list__layout > *, .wp-block-psb-parallax .psbParallaxSection p {
  max-width: 100%;
  padding: 0px 140px 20px;
}
	
}