/*
Theme Name: Amio Child
Description: Child theme of Amio
Template: amio
Version: 1.0
Text Domain: amio-child
*/ 
/*******Add Your Css Below This Line*********/

/* ========================================================================== */
/*                                  MENU BAR                                  */
/* ========================================================================== */

/* KL - Adjustments for Menu bar Top, transparent landing page, HamburgerIcon */

/* Logo adjustments MENU BAR */
.navbar-brand,
.site-logo,
.logo {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Adjust the menu to flex-grow */
.navigation,
.navbar-nav {
  flex-grow: 1;
}

/* Make sure menu links align center vertically */
.navigation ul.nav > li > a,
.navbar-nav > li > a {
  display: flex;
  align-items: center !important;
  height: 45px !important;
  transform: translateY(5px) !important; /* <--- Pushes text down by 5px without resizing yellow bar */
}

.navbar-nav > li > a:hover {
  color: #bab6b6 !important;
}

/* DEFAULT: Fixed menu on top with yellow background for ALL inner pages */
.navigation {
  position: fixed !important;
  top: 0px !important;
  left: 0px;
  right: 0px;
  background-color: #e2ff3f !important;
  padding: 10px 7% 10px 10% !important;
  box-shadow: none !important;
  z-index: 9999 !important;
}

/* ========================================================================== */
/* LANDING PAGE MENU BAR SETTINGS                                             */
/* ========================================================================== */

/* DESKTOP ONLY (769px and wider) */
@media (min-width: 769px) {
  body.home .navigation {
    position: absolute !important;
    top: 0px !important;
    left: 0px;
    right: 0px;
    background-color: #e2ff3f !important;
    z-index: 9999 !important;

    /* Resting idle state when not hovering */
    opacity: 0 !important;

    /* Smooth transition for mouse enter (0.3s) and leave (0.8s) */
    -webkit-transition: opacity 0.8s ease-in-out !important;
    transition: opacity 0.8s ease-in-out !important;
  }

  /* Temporary solid state added by JS on initial page load */
  body.home .navigation.is-loading {
    opacity: 1 !important;
  }

  /* When hovering over the header area */
  body.home .navigation:hover {
    opacity: 1 !important;
    -webkit-transition: opacity 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out !important;
  }
}

/* MOBILE ONLY (768px and smaller): Always fixed & 100% solid */
@media (max-width: 768px) {
  body.home .navigation {
    position: fixed !important;
    top: 0px !important;
    left: 0px;
    right: 0px;
    background-color: #e2ff3f !important;
    opacity: 1 !important;
    z-index: 9999 !important;
  }
}

/* Force HTML5 video canvas to match theme background during load */
body.home .n2-ss-slider video,
body.home .n2-ss-slide-background video,
body.home video {
  background-color: #bab6b6 !important;
  background: #bab6b6 !important;
}

/* ========================================================================== */
/*                                  END                                       */
/* ========================================================================== */

/* MOBILE SETTINGS */
@media (max-width: 768px) {
  .amio-navbar-collapse,
  .navigation {
    background-color: #e2ff3f !important;
    z-index: 9999999999 !important;
    padding: 10px 7% 10px 10% !important;
    box-shadow: none !important;
  }

  /* Keep mobile drawer yellow on homepage when opened */
  body.home .amio-navbar-collapse {
    background-color: #e2ff3f !important;
  }

  .amio-navbar-toggle {
    background: transparent !important;
    border: none !important;
    position: relative !important;
    width: 50px !important;
    height: 40px !important;
  }

  .amio-navbar-toggle .icon-bar {
    display: none !important;
  }

  .amio-navbar-toggle::before {
    content: "";
    background-image: url('http://tmp.kaiserlicht.at/wp-content/uploads/2026/10/hamburgerICON.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none !important;
  }
}

/* ========================================================================== */
/* HIDING MENUS WHICH ARE NOT ACTIVE RIGHT NOW                                */
/* ========================================================================== */
/* Hide specific menu items with the class(hide-menu-item) which is setup in the menu of appearence*/
.hide-menu-item {
  display: none !important;
}
/* ========================================================================== */
/*                                  END                                       */
/* ========================================================================== */


/* ========================================================================== */
/* GLOBAL LOGO POSITION ADJUSTMENT (ALL PAGES)                                */
/* ========================================================================== */
@media (min-width: 769px) {
  .navigation .navbar-brand,
  .navigation .navbar-brand img,
  .navigation .logo img {
    transform: translateY(0px) !important; /* Move higher by changing -5px to -8px or -10px */
    position: relative !important;
  }
}
/* ========================================================================== */
/*                                  END                                       */
/* ========================================================================== */

/* ========================================================================== */
/*                              END MENU BAR                                  */
/* ========================================================================== */

/* ========================= FONTS =========================*/
/* KL - Fonts Adjustment for h1-h5 and p and navaigation Bar*/

h1, h2, h3, h5, h6 {
  font-family: AvenirNextLTPro-Bold, Arial, sans-serif !important;
}

h4 {
  font-family: AvenirNextLTPro-Bold, Arial, sans-serif !important;
  font-size: 24px !important;
}

p {
  font-family: AvenirNextLTPro-Demi, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Menu links */
.navigation .nav > li > a,
.navigation .navbar-nav > li > a,
.navbar-nav > li > a {
  font-family: AvenirNextLTPro-Demi, Arial, sans-serif !important;
  font-size: 15px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}


/* ========================================================================== */
/*                            BODY & LAYOUT                                   */
/* ========================================================================== */
/* KL - Setting body padding for inner pages vs. homepage */

/* Standard pages get padding top to prevent navbar overlap */
body {
  padding-top: 69px !important;
  background-color: #bab6b6 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  body {
    padding-top: 75px !important;
    background-color: #bab6b6 !important;
  }
}

/* HOMEPAGE ONLY: Remove top padding so the video slider hits the top edge under transparent menu */
body.home {
  padding-top: 0px !important;
}

html body p {
  margin-bottom: 0 !important;
}

#about {
  background: inherit !important;
}

html {
  background: inherit !important;
}

/* KL - setting sections to zero for all stuff */
.sections {
  padding-top: 0 !important; 
  margin-top: 0 !important;
}




/* ========================================================================== */
/* 4K & ULTRA-WIDE SCREEN CONSTRAINTS                                         */
/* ========================================================================== */

/* Cap maximum content width and center on 4K/ultra-wide screens 
@media (min-width: 1600px) {
  #about,
  .sections,
  .main-content,
  body.single-portfolio #portfolio {
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}*/

/* ======================= LOADER =======================*/
/* KL - Loader not fading to Top and Spinning 3D Logo */
.loaded #loader-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-transition: opacity 0.5s ease-out, visibility 0s 0.5s !important;
  transition: opacity 0.5s ease-out, visibility 0s 0.5s !important;
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

.loaded #loader-wrapper .loader-section.section-left,
.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/* Safari and WebKit fix */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .loaded #loader-wrapper {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
      -webkit-transition: opacity 0.5s ease-out, visibility 0s 0.5s !important;
      transition: opacity 0.5s ease-out, visibility 0s 0.5s !important;
    }
  }
}

@keyframes spin3D {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.loader-img img {
  animation: spin3D 3s linear infinite;
  -webkit-animation: spin3D 2s linear infinite;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: center center;
  -webkit-transform-origin: center center;
}

/* ======================= LINKS =======================*/
/* KL - Classic Link hover color for all links an cursor*/
a:hover {
  color: #e2ff3f !important;
  cursor: pointer !important;
}

.button {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: auto !important;
}

/* ======================= FOOTER =======================*/
/* KL - Footer Social Media Buttons Reordering etc. */
.footer-social li i {
  font-size: 20px;
  color: #333;
}
.footer-social li:hover i {
  color: #e2ff3f;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 25px; 
}

.footer-social li {
  margin: 0 !important;
  display: flex;
  padding-top: 50px !important;
}

.footer-social li:nth-child(1) { order: 3; }
.footer-social li:nth-child(2) { order: 1; }
.footer-social li:nth-child(3) { order: 2; }
.footer-social li:nth-child(4) { order: 4; }

.footer-details {
  margin-left: -5px !important;
  margin-top: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 50px !important;
}

/* ======================= IMPRINT =======================*/
/* KL - IMPRINT REMOVING BG, BoxDesign usw. SMALL BROWSER */

.vc_tta-panel-heading {
  background-color: #afacac !important;
  border-color: transparent !important;
  margin: 0px 0px 5px 0px !important;
}

.vc_tta-panel-title>a {
  font-family: AvenirNextLTPro-Bold, Arial, sans-serif !important;
  font-size: 20px !important;
  padding: 4px 20px !important;
  color: #333 !important;
}

.vc_tta-panel-title>a:hover {
  color: #e2ff3f !important;
}

.vc_tta-panel.vc_active .vc_tta-panel-title>a {
  color: #e2ff3f !important;
}

/* KL - IMPRINT REMOVING BG, BoxDesign usw. DESKTOP */

.vc_tta-tab > a {
  background-image: none !important;
  background-color: #afacac !important;
  border-width: 0px !important;
  margin: 0px 0px 5px 0px;
}

.vc_tta-panel-body, .vc_tta-panel-heading {
  background-image: none !important;
}

.vc_tta.vc_general .vc_tta-tabs-container {
  margin-top: 20px !important;
}

.vc_tta.vc_general .vc_tta-tab {
  font-family: AvenirNextLTPro-Bold, Arial, sans-serif !important;
  font-size: 20px !important;
}

.vc_tta.vc_general .vc_tta-tab>a {
  padding: 4px 20px !important;
  color: #333333 !important;
}

.vc_tta.vc_general .vc_tta-tab>a:hover {
  color: #e2ff3f !important;
}

.vc_tta.vc_general .vc_tta-tab.vc_active > a {
  color: #e2ff3f !important;
}

/* ============ KL - Setup LIGHTHOUSE Settings ============== */
.lb-container {
  padding: 0 !important;
}

.lightbox .lb-image {
  border: 0px !important;
}

/* ============ KL - Settings the size of the single images only for portfolio pages ============== */
body.post-type-archive-portfolio .wpb_single_image,
body.single-portfolio .wpb_single_image {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

body.post-type-archive-portfolio .wpb_single_image img,
body.single-portfolio .wpb_single_image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.single-portfolio .wpb_single_image.no-cover {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Image itself */
body.single-portfolio .wpb_single_image.no-cover img {
  position: static !important;
  width: auto !important;
  max-width: 90% !important;
  height: 200px !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============ KL - Settings for the portfoliopages to make it a little bit more space to the pictures and the text ============== */
body.single-portfolio .vc_column-inner,
body.post-type-archive-portfolio .vc_column-inner {
  padding-right: 10px !important;
}

/* ============ KL - making some pragrphas in the porotfolio section not so hight top margin ============== */
.portfolio-p {
  margin-top: -20px !important;
}

/* KL - SEPERATOR SIZES and COLORS (FLUID & RESPONSIVE) */
.separator-big { 
  width: 100%;
  max-width: 350px;
  height: 2px;
  background: #e2ff3f none repeat;
  margin-top: 30px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

/* Medium & Tablet Screens (1200px down to 769px): Shrinks earlier */
@media (max-width: 1200px) {
  .separator-big { 
    max-width: 220px;
  }
}

/* Mobile Screens (768px and smaller) */
@media (max-width: 768px) {
  .separator-big { 
    max-width: 150px;
    height: 1px;
    margin-top: 30px;
  }
}

.separator-med { 
  width: 200px;
  height: 2px;
  background: #e2ff3f none repeat;
  margin-top: 30px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 768px) {
  .separator-med { 
    width: 100px;
    height: 1px;
    background: #e2ff3f none repeat;
    margin-top: 30px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
}

.separator-min { 
  width: 80px;
  height: 2px;
  background: #e2ff3f none repeat;
  margin-top: 30px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 768px) {
  .separator-min { 
    width: 40px;
    height: 1px;
    background: #e2ff3f none repeat;
    margin-top: 30px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
}

/* KL - Overriding the global version of the serperator from the ANIMO Wordpress theme, only in use for the footer */
.separator-small { 
  width: 80px !important;
  height: 2px !important;
  background: #e2ff3f none repeat !important;
  margin-top: 30px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 768px) {
  .separator-small { 
    width: 40px !important;
    height: 1px !important;
    background: #e2ff3f none repeat !important;
    margin-top: 30px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
}

/* KL - PORTFOLIO setting VIDEO to top under the menu bar */
#about {
  padding-top: 0 !important;
  padding: 0 !important;
}

@media (min-width: 992px) {
  .col-md-6 {
    width: 100% !important;
  }
}

/* KL - PORTFOLIO setting extra Class no-side-padding for the main text */
.no-side-padding .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-side-padding3 > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.no-side-padding2 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* KL - PORTFOLIO extra iFrame Youtube Videos position from the iFrame Container */
.customVideoPortfolio {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.customVideoPortfolio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* KL - PORTFOLIO setting some Spaces bottom and top from the h3 Titles and the margin spaces between videos and Text */
.brief-portfolio-page .brief {
  margin-top: 50px;
}

.portfolio-page .wpb_button,
.portfolio-page .wpb_content_element,
.portfolio-page ul.wpb_thumbnails-fluid > li {
  margin-bottom: 10px;
}

/* KL - PORTFOLIO setting Credits next to the Arrow and smaller field with extra Class .credits*/
.brief a {
  margin-top: 0 !important;
  border-bottom: none !important;
}

.credits .vc_tta-panel-title>a {
  font-family: AvenirNextLTPro-Bold, Arial, sans-serif !important;
  font-size: 20px !important;
  padding: 4px 40px !important;
}

/* KL - PORTFOLIO background same grey like rest */
#portfolio {
  position: relative;
  background: #bab6b6 !important;
  padding-bottom: 0px !important;
}
@media (max-width: 768px) {
  #portfolio {
    position: relative;
    background: #bab6b6 !important;
    padding-bottom: 0px !important;
  }
} 

/* KL - Remove left/right padding for columns inside portfolio pages */
.portfolio-page .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* KL - Optional: remove padding for sections inside portfolio too */
.portfolio-page .section-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ========================================================================== */
/*                                COMMERCIAL                                  */
/* ========================================================================== */
/* Slide-in is disabled and the soft fade-in is done in functions.php */

/* Grid directly under the menu bar */
body.page-slug-commercial #about .section-content,
body.page-slug-commercial .commercial-page > .vc_column-inner,
body.page-slug-commercial .commercial-page .wpb_wrapper,
body.page-slug-commercial .commercial-page #portfolio,
body.page-slug-commercial .commercial-page .section-content-full,
body.page-slug-commercial .commercial-page [data-uk-grid] {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* No theme animations on the tiles themselves */
body.page-slug-commercial .work {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Hover: zoom the image only */
body.page-slug-commercial .work img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  transition: transform 0.4s ease !important;
}

body.page-slug-commercial .work:hover img {
  transform: scale(1.1) !important;
}

/* Hover: no grey overlay, no title text */
body.page-slug-commercial .work .hover {
  background: transparent !important;
}

body.page-slug-commercial .work .hover * {
  display: none !important;
}

/* Mobile: grid directly under the menu bar */
@media (max-width: 768px) {
  body.page-slug-commercial {
    padding-top: 60px !important;
  }
}

/* Smooth rearranging when the window is resized (only after load) */
body.page-slug-commercial [data-uk-grid].kl-grid-animate > .work {
  transition: top 0.4s ease, left 0.4s ease !important;
}

body.page-slug-commercial [data-uk-grid].kl-grid-animate {
  transition: opacity 0.6s ease, height 0.4s ease !important;
}

/* Always reserve space for the scrollbar, so the grid width stays stable */
html:has(body.page-slug-commercial) {
  scrollbar-gutter: stable;
}

/* Grid over the full width, like the film page */
body.page-slug-commercial #about .section-content,
body.page-slug-commercial .commercial-page > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.page-slug-commercial #about .vc_row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ========================================================================== */
/*                                      FEATURE FILM                          */
/* ========================================================================== */
/* KL - FEATURE FILM Main site settings */

/* KL - Setting the hover effects from the FeatureFilm Section */
.featureFilm-page .work {
  position: relative;
  overflow: hidden !important;
  padding: 0;
  margin: 3px !important;
  box-sizing: border-box;

  /* Desktop Version 4 Pics in a Row scaling down so its matching */
  flex: 0 0 calc(25% - 6px); 
  max-width: calc(25% - 6px);
}

/* KL - mobile Version 2 Pics in a Row scaling down so its matching */
@media (max-width: 767px) { 
  .featureFilm-page .work {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    margin: 3px;
  }
}

/* KL - setting first row of the pictures up so it´s sitting directly under the menu bar */
.featureFilm-page [data-uk-grid] {
  margin-top: -3px;
  margin-left: -3px;
  display: flex;
  flex-wrap: wrap;
}

.featureFilm-page .work img {
  display: block !important;
  width: 100% !important;
}

.featureFilm-page .work .hover {
  background: #999595e6;
  position: absolute;
  inset: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}
  
/* KL - setting up the font which apears when hovering the pictures */
.featureFilm-page .work .hover p {
  position: absolute;
  top: 50%;
  left: 50%;
  letter-spacing: 3px;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #e2ff3f !important;
  font-family: AvenirNextLTPro-Demi, Arial, sans-serif !important;
  font-size: 30px !important;
}

/* KL - mobile Version scaling Font size to match picture size */
@media (max-width: 767px) {
  .featureFilm-page .work .hover p {
    font-size: 18px !important;
  }
}
  
.featureFilm-page .work:hover .hover {
  opacity: 1;
}

/* KL - setting the scaling of the posters not too much */
.featureFilm-page .work:hover img {
  -o-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* ========================================================================== */
/* CLIENT LOGO ABOUT PAGE                                                     */
/* ========================================================================== */

/* BRAND TEXT GRID */
.brand-text-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 5px;
}

.brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Subtle divider line */
}

.brand-row:last-child {
  border-bottom: none; /* Removes bottom border on last row */
}

.brand-row span {
  flex: 1;
  text-align: center;
  font-family: AvenirNextLTPro-Bold, Helvetica Neue, Arial, sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  /*opacity: 0.85;
  transition: opacity 0.3s ease;*/
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
  .brand-row {
    flex-direction: column;
    gap: 12px;
    padding: 15px 0;
  }
}
/* ========================================================================== */
/* END                                                                        */
/* ========================================================================== */