/*!
Theme Name: ukuleleTechnique
Theme URI: http://underscores.me/
Author: Vera Sebert
Author URI: https://verasebert.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ukuleletechnique
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*########################################################################################################################*/

/* FONTS */

@font-face {
   font-family:'Karrik';
   src: 
   url(fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Regular.ttf) format('ttf'),
   url(fonts/karrik_fonts-main/fonts/Web/WOFF2/Karrik-Regular.woff2) format('woff2'),
   url(fonts/karrik_fonts-main/fonts/Web/WOFF/Karrik-Regular.woff) format('woff');
   font-style: normal;
   font-weight: normal;
}

@font-face {
   font-family:'Karrik-Italic';
   src: 
   url(fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Italic.ttf) format('ttf'),
   url(fonts/karrik_fonts-main/fonts/Web/WOFF2/Karrik-Italic.woff2) format('woff2'),
   url(fonts/karrik_fonts-main/fonts/Web/WOFF/Karrik-Italic.woff) format('woff');
   font-style: normal;
   font-weight: normal;
}

/*########################################################################################################################*/

/* VARIABLEN */

    :root {
        /*--brand-color: rgb(20, 0, 0);*/
        --brand-color: rgb(33, 13, 12);
        --bg-color: #f4ece1;
        --link-color: #E7A10B;
        --bg-colorTransparent: rgba(244, 236, 225, 0.9);
        --main-padding: 20px;
        --menu-padding: 10px;
        --content-padding: clamp(44px, 3.9vw, 3.9vw);
        --line-widthButton: 5px;
    }

@media only screen and (max-width: 555px){
    :root {
        --main-padding: 15px;
    }
}

/*########################################################################################################################*/

*{margin: 0; padding:0; font-family: 'Karrik';}

body{
    background-color: var(--bg-color); 
    color: var(--brand-color);
    width: 100%; 
    height: 100%; 
    overflow-x: hidden;
    /*
    overflow: hidden;
    overscroll-behavior-x: contain;*/
    overflow-y: visible !important;
}

a{text-decoration: none;}
ul{list-style: none;}
.mobile{display: none;}
.mobileInvisible{display: block;}
.headerMobile{display: none;}
#mobileOverlay{display: none;}

.deselect ::selection {background: transparent; color: inherit;}
.deselect ::-moz-selection {background: transparent; color: inherit;}
.deselect {-ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;}

/*########################################################################################################################*/

/* FONT STYLES */

.siteBrand-font-style{
    font-size: clamp(45px, 3.8vw, 4vw);
}

.mainMenu-font-style{
    font-size: clamp(25px, 2.3vw, 2.5vw);
    letter-spacing: 0.5px;
}

.plainTextStyle{
    font-size: clamp(18px, 1.3vw, 1.4vw);
    line-height: 1.7;
    letter-spacing: 0.7px;
}

.mini-font-style{
    font-size: 16px; letter-spacing: 0.5px;
}

/*########################################################################################################################*/

/* MAIN MENU */

header{
    z-index: 10000;
}

.main-navigation a{
    color: var(--brand-color);
    padding: var(--menu-padding);
    box-sizing: border-box;
    display: flex;
}

.site-branding{
    position: absolute; top: -1px;
    /*left: calc((var(--content-padding)/2) - 20px);*/
    background-color: var(--bg-colorTransparent);
}

.site-branding div{display: inline-block;}
.site-branding div:first-child a{padding-left: 60px;}
.site-branding .siteBrand a{padding-top: 16px; display: block;}
.site-branding a.ep{padding-top: 30px; height: 100%;}

#site-navigation li.current-menu-item a,
#imprint-navigation li.current-menu-item a,
#site-navigation a:hover,
#imprint-navigation a:hover,
.main-navigation a:hover{
    color: var(--bg-color);
    background-color: var(--brand-color);
}

#site-navigation, 
#imprint-navigation{
    position: absolute;
    bottom: 0;
}

#site-navigation a, 
#imprint-navigation a{
    display: block;
    background-color: var(--bg-colorTransparent);
}

#zoomNavWrapper.zoomOverlayActive,
.site-branding.zoomOverlayActive,
#site-navigation.zoomOverlayActive a, 
#imprint-navigation.zoomOverlayActive a{
    background-color: transparent;
}

#site-navigation.zoomOverlayActive a:hover,
#imprint-navigation.zoomOverlayActive a:hover{
    color: var(--bg-color);
    background-color: var(--brand-color);
}

#imprint-navigation{
    transform-origin: top left;
    transform: rotate(-90deg);
}

#site-navigation{
   position: absolute;
   left: 4vw; 
}

#primary-menu li{
    display: inline-block;
    margin-right: 20px;
}

@media only screen and (max-width: 1111px){
    
    .site-branding div:first-child{display: block;}
    .site-branding div:first-child a{padding-left: var(--main-padding);}
    .site-branding div:nth-of-type(2){padding-left: calc(var(--main-padding) + 5px);}
    .site-branding a.ep{padding-top: 0;}
    
    #primary-menu,
    #imprint-navigation{display: none;}
    
    .mobile{display: block;}
    .mobileInvisible{display: none !important;}
}

@media only screen and (max-width: 766px){
    #site-branding{
        background-color: var(--bg-color); width: 100vw; z-index: 10; padding-bottom: calc(var(--main-padding) - 5px);}
    #mobileMenuButton{z-index: 11;}
    /*.headerMobile{display: none;}*/
    #site-branding div:first-child a{font-size: 40px; padding-bottom: 5px;}
    .headerMobile:first-of-type{display: block;}
}

@media only screen and (max-width: 450px){
    .headerMobile{display: block;}
    /*#site-branding div:first-child a,
    #site-branding div.mainMenu-font-style
    {font-size: 21px;}*/
    .site-branding div:nth-of-type(2){padding-left: var(--main-padding); margin-top: -10px;}
    body.chrome .site-branding div:nth-of-type(2){padding-left: var(--main-padding); margin-top: -10px; vertical-align: top;}
    body.chrome .site-branding div:nth-of-type(3){margin-top: -10px; vertical-align: top;}
    .site-branding a.ep{padding-left: 0;}
    #site-branding div:first-child a{padding-bottom: 0px;}
}

@media only screen and (max-width: 340px){
    #site-branding div:first-child a
    {font-size: 29px; padding-bottom: 5px;}
    #site-branding div.mainMenu-font-style{font-size: 19px;}
}

/* MOBILE MENU */

#mobileMenuButton{
   position: absolute;
   top: 0; right: 0; transform: scaleX(2);
   font-size: 35px;
   transition: all 300ms ease;
   line-height: 0.25;
   cursor: pointer;
    padding-top: 40px;
    padding: 30px;
    background-color: var(--bg-colorTransparent);
}

#page.zoomOverlayActive #mobileMenuButton{
    background-color: transparent;   
}

@media only screen and (max-width: 1111px){
    #mobileMenuButton{padding-top: var(--main-padding);}
}

#mobileMenuWrapperOverlay{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--bg-colorTransparent);
    height: 100dvh; width: 100vw;
    z-index: 10000;
    display: none;
}

#mobileMenuWrapper{
    position: fixed;
    top: 0; right: 0;
    width: calc(100dvh + var(--main-padding)*2); height: 100dvh;
    min-width: 50vw;
    background-color: var(--brand-color);
    color: var(--bg-color);
    padding-bottom: 30px;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

#mobileMenuWrapper::-webkit-scrollbar{
    display: none; /* Chrome, Safari */
}

#mobileMenuWrapperOverlay.open{
    display: block;
}

.closeButton{
  position: fixed;
  top: 45px; right: 30px;
  width: 20px; height: 20px;
  cursor: pointer;
}
      
.closeButton div{
  position: absolute; transform-origin: center; top: 50%; left: 50%; 
  width: 100%; height: var(--line-widthButton); background-color: var(--bg-color);}
.closeButton div:first-child{transform: translate(-50%, -50%) rotate(45deg) scaleX(2);}
.closeButton div:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg) scaleX(2);}

#mobile-menu{
    padding-top: 30px;
    padding-left: 50px;
    line-height: 0.9;
}

#mobile-menu li:nth-of-type(4){
    padding-bottom: 55px;
}

#mobile-menu ul.sub-menu, 
#mobile-navigation .layer-2_Wrapper, 
#mobile-navigation .layer-2_Wrapper .layer-3_Wrapper{
    padding-left: 60px;
}

#techStylesChildrenListWrapper .childItem,
#mobile-menu ul.sub-menu .sub-menu, 
#mobile-navigation .layer-2_Wrapper .layer-3_Wrapper{
    font-size: 22px;
}

#techStylesChildrenListWrapper .childItem .ucn,
#mobile-navigation .layer-2_Wrapper .layer-3_Wrapper .ucn{
    margin-left: 10px;
    font-size: 14px; letter-spacing: 0.5px;
    opacity: 0.7;
}

#mobileMenuWrapper #mobile-menu a, 
#mobile-navigation a{
    display: block;
    width: fit-content;
    color: var(--bg-color); 
    position: relative;
}

#techStylesChildrenListWrapper a::before,
#mobileMenuWrapper #mobile-menu a::before, 
#mobile-navigation a::before{
    content: "";
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: -25px;
    background-color: var(--bg-color);
    width: 12px; height: 12px;
    border-radius: 50%;
    display: none;
}

#mobile-navigation a.layer-1::before,
#mobile-navigation .layer-2_Wrapper a::before{left: 25px;}

#mobile-navigation a.menu-item{
    line-height: 0.9;
    padding-left: 60px; 
}

.mobileMenuPaddingBottom{height: 70px;}

#techStylesChildrenListWrapper a:hover::before,
#mobileMenuWrapper #mobile-menu a:hover::before,
#mobile-navigation a.menu-item:hover::before{
    display: block;
}

@media only screen and (max-width: 1000px){
    
    #mobileMenuButton{
        background-color: transparent;
    }
    
    #mobileMenuWrapper{width: 100vw;}
    
    #mobile-navigation a.menu-item, 
    #mobile-menu{padding-left: var(--main-padding);}
    
    #techStylesChildrenListWrapper a::before,
    #mobileMenuWrapper #mobile-menu a::before, 
    #mobile-navigation a::before{
        width: 0;
    }
    
    #mobile-menu ul.sub-menu, 
    #mobile-navigation .layer-2_Wrapper, 
    #mobile-navigation .layer-2_Wrapper .layer-3_Wrapper{
        padding-left: 40px;
    }
    
    #techStylesChildrenListWrapper .childItem .ucn,
    #mobile-navigation .layer-2_Wrapper .layer-3_Wrapper .ucn{
        margin-left: 0;
    }

    .closeButton{top: 35px;}
    
}

@media only screen and (max-width: 450px){
    
    #mobile-menu ul.sub-menu, 
    #mobile-navigation .layer-2_Wrapper, 
    #mobile-navigation .layer-2_Wrapper .layer-3_Wrapper{
        padding-left: 20px;
    }
    
    #mobile-menu a{padding-left: 0;}
    
}

/*########################################################################################################################*/

/* SCROLLBARS */

.scrollBarWrapper{
    position: fixed;
    right: 30px; bottom: var(--content-padding);
    height: calc(100dvh - 2 * var(--content-padding) - 75px); 
    padding-left: 20px;
}

.scrollBar{
    position: relative;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 20px; height: 55dvh;
}

.scrollTrack{
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 5px; height: 100%;
    background-color: var(--bg-color);
}

.scrollThumb{
    position: absolute;
    top: 0;
    left: 50%; transform: translateX(-50%);
    background-color: var(--bg-color);
    width: 15px; height: 15px;
    border-radius: 50%;
    cursor: pointer;
}

/*########################################################################################################################*/

/* ZOOM WINDOW */

#zoomFrame {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100dvh;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  z-index: 1000;
  overflow: visible; /* <- entscheidend */
    z-index: 0;
}

#zoomFrame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
}

#zoomWindow {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  overflow: visible;
  --scale: 1;
  --dx: 0px;
  --dy: 0px;
  transform: scale(var(--scale)) translate(var(--dx), var(--dy));
}

#svgRoot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#markerContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

#zoomNavWrapper{
      position: absolute;
      bottom: var(--content-padding);
      right: 77px;
      width: calc(95dvh - 2 * var(--content-padding) - 75px);
      height: 75px;
      transform-origin: bottom right;
      transform: rotate(90deg) translateX(-5vh);
      box-sizing: border-box;
      background-color: var(--bg-colorTransparent);
    }

@media only screen and (max-width: 1000px){
    #zoomNavWrapper{display: none;}
}

#zoomNavWrapper input {
      position: absolute;
      width: 55dvh;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(180deg);
    }

.zoomNav {
      position: absolute;
      width: 75px; height: 75px;
      color: var(--brand-color);
      line-height: 75px;
      text-align: center;
      cursor: pointer;
    }

#zoomIn, #zoomOut{top: 0; font-size: 28px; -webkit-text-stroke: 2px black;}
#zoomIn {left: 0; } #zoomOut {right: 0.5vw;}

#zoomOverlay{
    position: fixed;
    width: 100vw; height: 100dvh;
    top: 0; left: 0;
    background-color: var(--bg-colorTransparent);
    z-index: 0;
    display: none;
}

#zoomOverlay.active{
    display: block;
}

/* ZOOM SLIDER */

input[type=range] {
  -webkit-appearance: none; 
  width: 100%;        
  background: transparent; 
  cursor: pointer;
}

/* ===== TRACK ===== */
input[type=range]::-webkit-slider-runnable-track {height: 5px; background: var(--brand-color);}
input[type=range]::-moz-range-track {height: 5px; background: var(--brand-color);}

/* ===== THUMB ===== */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* nötig in Chrome */
  height: 15px;
  width: 15px;
  background: var(--brand-color);
  border-radius: 50%;
  margin-top: -5px; 
  cursor: pointer;
  border: none;
}

input[type=range]::-moz-range-thumb {
  appearance: none;
  border: none;
  width: 15px;
  height: 15px;
  background: var(--brand-color);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* damit der Thumb zentriert sitzt */
}

/*########################################################################################################################*/

/* TREE STYLES */

#svgRoot {display: block; width: 100vw; height: 100vh; background-color: #f4ece1;}
#markerContainer {position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;}

.marker{
  position: absolute;
  width: 10px; height: 10px;
  background-color: var(--brand-color);
  color: var(--bg-color);
  border: 2px solid var(--brand-color);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
      
.marker.depth-1{width: 20px; height: 20px;}
.marker.depth-2{width: 15px; height: 15px;}
.marker.depth-3{width: 12px; height: 12px;}

#markerContainer.scaledActive .marker.depth-3 .markerBox{display: block;}
.marker:first-of-type{display: none;}
.marker:hover {color: var(--brand-color); background-color: #f4ece1; cursor: pointer; z-index: 100;}
.marker:hover > .markerBox{display: block;}

#markerContainer .marker.depth-3 .markerBox,
.markerBox{
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  border: 2px solid var(--brand-color);
  background-color: var(--brand-color);
  color: var(--bg-color);
  padding: 7px;
  display: none;
}

#markerContainer .marker.depth-3:has(.markerBox.active){
   background-color: var(--bg-color);
   color: var(--brand-color);
}

#markerContainer .marker.depth-3:hover .markerBox{
    display: block;
}

.marker.depth-1 .markerBox, 
.marker.depth-2 .markerBox, 
#markerContainer.scaledActive .marker.depth-3 .markerBox{
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: center;
    display: block;}

.marker.depth-1 .markerBox{font-size: 30px; padding: 12px;}
.marker.depth-2 .markerBox{font-size: 20px;}
.marker.depth-3 .markerBox{font-size: 14px; letter-spacing: 1; padding: 5px; white-space: nowrap;}
.markerBox.active,
.marker.depth-1 .markerBox:hover, 
.marker.depth-2 .markerBox:hover, 
#markerContainer.scaledActive .marker.depth-3 .markerBox.active, 
#markerContainer.scaledActive .marker.depth-3 .markerBox:hover > .ucn, 
#markerContainer.scaledActive .marker.depth-3 .markerBox:hover{color: var(--brand-color); background-color: #f4ece1;}
#markerContainer .marker.depth-3 .markerBox.active .ucn,
#markerContainer .marker.depth-3 .markerBox:hover > .ucn, 
#markerContainer .marker.depth-3 .markerBox:hover{text-align: center; color: var(--brand-color); background-color: #f4ece1;}

.marker.depth-3 .markerBox .ucn{
    /*font-family:'Karrik-Italic';*/
    display: block;
    color: rgba(244, 236, 225, 0.6);
    font-size: 12px;
    padding-top: 3px;
    white-space: nowrap;
    text-align: center;
}

.branch {stroke: var(--brand-color);} 

/*########################################################################################################################*/

/* CUSTOM CONTENT */

#techStylesCloseButton,
#customContentCloseButton{position: absolute; top: 55px; right: 31px;}

.contentWrapper{
    position: absolute;
    bottom: var(--content-padding);
    /* left: var(--content-padding);
    right: var(--content-padding);
    width: calc(100vw - 1 * var(--content-padding));
    */
    right: 0;
    width: 60vw;
    height: calc(100dvh - 2 * var(--content-padding) - 25px);
    padding: var(--main-padding);
    padding-right: 0; 
    box-sizing: border-box;
    z-index: 1000;
}

#customContentOuterWrapper.open{
    position: absolute;
    bottom: var(--content-padding);
    right: 0;
    width: 60vw;
    height: calc(100dvh - 2 * var(--content-padding) - 25px);
    padding: var(--main-padding);
    padding-right: 0; /* optional */
    box-sizing: border-box;
    z-index: 1000; 
}

.customContentWrapper{
    margin-top: 50px;
    width: 100%; height: 100%; 
    padding: calc(var(--content-padding)/2);
    padding-left: calc(var(--content-padding)/2 + 5px);
    padding-right: calc(var(--content-padding)/2 + 5px);
    box-sizing: border-box;
    background-color: var(--brand-color);
    color: var(--bg-color);
}

.customScrollContentWrapper{
    padding-bottom: calc(var(--content-padding)/2);
    box-sizing: border-box;
    width: 100%; height: 100%;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

#customContentScrollContent{width: 80%;}

.customScrollContentWrapper::-webkit-scrollbar{display: none; /* Chrome, Safari */}
.customContentWrapper .mainMenu-font-style{padding-bottom: 20px;}

#colorCodeWrapper,
blockquote{
   font-size: 13px; letter-spacing: 0.5px;
}

.customContentWrapper ul{list-style: disc; list-style-position: inside;}
.customContentWrapper ul li{display: list-item; list-style-type: disc;}

blockquote, p{
    padding-bottom: 10px;
}

@media only screen and (max-width: 1111px){
    .contentWrapper, 
    #customContentOuterWrapper.open{
        bottom: 0;
        width: 100vw;
        right: none; left: 0;
        padding: 0;
    }
    
    .customScrollContentWrapper{width: 100%;}
    #customContentScrollContent{width: 100%;}
}

@media only screen and (max-width: 450px){
    .customContentWrapper{
        padding-left: var(--main-padding);
    }
    
}

/*########################################################################################################################*/

/* TECH STYLES CONTENT */

#techStylesContentWrapper, 
#customContentOuterWrapper{
    width: 44px; height: 44px;
    bottom: 15px; right: 20px; left: auto;
    transition: width 350ms ease, height 350ms ease;
    color: var(--bg-color);
    right: var(--main-padding);
    overflow: hidden;
}

#techStylesContentWrapper.open{
    width: calc(100vw - var(--content-padding));
    height: calc(100dvh - 2 * var(--content-padding) - 25px);
    right: 0;
    bottom: var(--content-padding);
    background-color: transparent;
}

#techStylesContentWrapper.open .techStylesContentWrapperInner{top: 0;}
#customContentOuterWrapper.open .customContentWrapper{margin-top: 0;}

.techStylesContentWrapperInner{
    position: absolute;
    padding: var(--main-padding);
    width: calc(50% - var(--main-padding));
    height: 100%;
    background-color: var(--brand-color);
    box-sizing: border-box;
    top: 50px;
}

#techStylesContentRight{right: 0;}
#techStylesContentLeft{left: 0;}

#techStylesContentLeft .techStylesVideoWrapper{
      position: absolute;      /* <-- wichtig */
      bottom: var(--main-padding);
      width: calc(100% - 2 * var(--main-padding));
      padding-bottom: 56.25%;  /* 16:9 box */
      height: 0; overflow: hidden;
}

#techStylesContentLeft .techStylesVideoWrapper iframe{
      position: absolute;
      width: 100% !important;
      height: 100% !important;
      border: 0;
}

.openContentButton{
    position: fixed; bottom: 0; right: 0;
    width: auto; height: auto;
    background-color: var(--bg-color);
    cursor: pointer;
    display: none;
}

.openContentButton.active{display: block;}

.openContentButton .cornerWrapper{
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    align-items: center; /* vertikal zentrieren */
    justify-content: center; /* optional: horizontal zentrieren */
    padding-left: var(--menu-padding);
    box-sizing: border-box;
  }

.openContentButton:hover{background-color: var(--brand-color);}
.openContentButton .cornerWrapper .oCLabel{color: var(--brand-color); white-space: nowrap; padding: var(--menu-padding);}
.openContentButton:hover .cornerWrapper .oCLabel{color: var(--bg-color);}


.openContentButton .cornerWrapper div.corner{
      position: absolute;
      box-sizing: border-box;
      width: 16px; height: 16px;
  }
/*
.openContentButton .cornerWrapper div.corner:nth-child(2){
      left: 0; bottom: 0; transform-origin: left bottom; border-left: var(--line-widthButton) solid #302f2d; border-bottom: var(--line-widthButton) solid #302f2d;
  }

.openContentButton .cornerWrapper div.corner:nth-child(3){
      right: 0; bottom: 0; transform-origin: right bottom; border-right: var(--line-widthButton) solid #302f2d; border-bottom: var(--line-widthButton) solid #302f2d;
  }
*/
.openContentButton .cornerWrapper div.corner:nth-child(4){
      left: 0; top: 0; transform-origin: left top; border-left: var(--line-widthButton) solid #302f2d; border-top: var(--line-widthButton) solid #302f2d;
  }

.openContentButton:hover .cornerWrapper div.corner:nth-child(4){border-left: var(--line-widthButton) solid var(--bg-color); border-top: var(--line-widthButton) solid var(--bg-color);}

/*
.openContentButton .cornerWrapper div.corner:nth-child(5){
      right: 0; top: 0; transform-origin: right top; border-top: var(--line-widthButton) solid #302f2d; border-right: var(--line-widthButton) solid #302f2d;
  }*/

#customContentOuterWrapper.open #openCustomContentButton,
#techStylesContentWrapper.open #openTechStylesContentButton{
    display: none;
}

#customContentOuterWrapper.open .scrollBarWrapper, 
#techStylesContentWrapper.open .scrollBarWrapper{position: fixed;}

#customContentOuterWrapper .scrollBarWrapper, 
#techStylesContentWrapper .scrollBarWrapper{position: static;}

.techStylesScrollContentWrapper{
    position: absolute;
    width: 80%; height: calc(100% - 3 * var(--main-padding));
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.techStylesScrollContentWrapper::-webkit-scrollbar{display: none; /* Chrome, Safari */}

#techStylesContentRight #techStylesScrollContent{min-height: 120%;}

#intersectionTracker{width: 100%; height: 50px;}

#scrollLayerWrapper{position: relative; border: 1px solid transparent;}
.scrollLayer{transition: opacity 300ms ease; opacity: 0; z-index: -1;}
.scrollLayer.active{opacity: 1; z-index: 10;}
#scrollLayer-2{position: absolute; width: 100%; height: auto; bottom: 0; border: 1px solid transparent;}
#scrollLayer-2.active{opacity: 1;}

#scrollLayerWrapper .imgWrapper{
    width: 65%; height: auto;
    margin: auto;
    margin-bottom: var(--main-padding);
    display: flex;          
    justify-content: center;
    align-items: center;  
    flex-direction: column;
    margin-bottom: 40px;
}

#scrollLayerWrapper .imgWrapper{
    position: relative;
    border-radius: 50%;
    aspect-ratio: 1/1;
    margin-top: var(--main-padding);
}

#scrollLayerWrapper .imgWrapper #threeD_marker{
    position: absolute;
    /*top: 10%; left: 10%;*/ top: 0; left: 0;
    width: 30px; height: 30px;
    line-height: 30px; text-align: center;
    border-radius: 50%;
    border: 1px solid var(--bg-color);
    background-color: var(--brand-color);
    letter-spacing: 0;
}

#scrollLayerWrapper .imgWrapper #gltfWrapper{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden; 
    border: 1px solid var(--bg-color);
    cursor: pointer;
}

#gltfWrapper.dragging {
    cursor: grabbing !important;
}

a-scene {
    width: 100%; height: 100%;
    background-color: var(--brand-color);
}

  .a-enter-vr-button,
  .a-enter-ar-button,
  .a-fullscreen-button {
    display: none !important;
  }

#sceneOverlay{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background-color: rgba(33, 13, 12, 0.7);
}

#gltfIcon{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40%; height: 40%;
    background-image: url(icons/glft-overlay.svg);
    background-size: contain;
    background-position: center;
}

#scrollLayerWrapper .imgWrapper img{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: auto;}

#scrollLayerWrapper .imgWrapper.hand{background-color: var(--brand-color); border: 1px solid var(--bg-color);}
#scrollLayerWrapper .imgWrapper.hand img{transform: translate(-45%, -55%);}
#scrollLayerWrapper .imgWrapper.radarChart {margin-bottom: 75px;}
#scrollLayerWrapper .imgWrapper.radarChart img{width: 150%;}

#colorCodeWrapper{line-height: 1.3; /*padding-left: 20%; padding-right: 10%; */
    box-sizing: border-box; text-align: left; margin-top: -20px; margin-bottom: 70px;}
/*#colorCodeWrapper .colorCode{ display: inline-flex; justify-content: left; align-items: center; margin-right: 10px;}*/
#colorCodeWrapper .colorCode span{display: inline-flex; width: 10px; height: 10px; margin-right: 10px; background-color: gray; border-radius: 50%;}
#colorCodeWrapper .colorCode span.sD{background-color: #00AFFF;}
#colorCodeWrapper .colorCode span.sU{background-color: #06FF00;}
#colorCodeWrapper .colorCode span.p{background-color: #8200E7;}
#colorCodeWrapper .colorCode span.p-s{background-color: #FF00D0;}

#customContentWrapper p a,
#techStylesContentRight .techStylesInfoText p a{
    color: var(--link-color);
}

#techStylesContentRight #gif img{visibility: hidden; height: 0;}
#techStylesContentRight #gif img.active{visibility: visible; height: auto;}

#techStylesFacts{
    margin-top: var(--main-padding);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

#techStylesFacts .parentStyles a, 
#techStylesFacts .crossRef a, 
#techStylesFacts .methodReference a{
    color: var(--link-color);
    margin-left: 8px;
}

#techStylesFacts .parentStyles a:hover, 
#techStylesFacts .crossRef a:hover, 
#techStylesFacts .methodReference a:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

#techStylesChildrenListWrapper{margin-top: var(--main-padding);}

#techStylesChildrenListWrapper a{
    position: relative;
    left: 25px;
    color: var(--bg-color);
    display: block;
    padding: var(--menu-padding);
}

#techStylesChildrenListWrapper a.childItem{margin-left: 60px;}

@media only screen and (max-width: 1111px){
    #techStylesContentWrapper.open{
        top: 120px;
        bottom: auto; height: calc(100dvh - 120px);
        width: 100vw;
        right: auto; left: 0;
        padding: 0;
        overflow: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    
    .techStylesContentWrapperInner{position: static; width: 100%; height: auto;}
    #techStylesFacts{margin-bottom: var(--main-padding);}
    #techStylesContentLeft .techStylesVideoWrapper{position: relative; bottom: auto; width: 100%;}
    
    .techStylesScrollContentWrapper{
        position: static;
        width: 100%; height: auto;
        overflow: hidden;
    }
    
    .scrollLayer{opacity: 1;}
    #scrollLayer-2{position: static;}
}

@media only screen and (max-height: 760px) and (min-width: 1111px) {
    #techStylesContentLeft .techStylesVideoWrapper{
        width: 70vh;
        left: 50%; transform: translateX(-50%);
        padding-bottom: calc(70vh * 9 / 16);
        height: 0;
    }
    
    #scrollLayerWrapper .imgWrapper{
        width: 40vh;
    }
}

@media only screen and (max-width: 1000px){
    #techStylesChildrenListWrapper a{left: 0; padding-left: 0;}
    #techStylesChildrenListWrapper a.childItem{margin-left: 40px;}
    
    #mobileOverlay{
        display: block; position: fixed;
        height: calc(100dvh - 2 * var(--content-padding) - 25px);
        bottom: 0; left: 0; right: 0;
        background-color: var(--brand-color);
        color: var(--bg-color);}
    
    #mobileOverlay div{
        position: absolute;
        top: 50%; transform: translateY(-50%);
        width: 90%;
        padding: var(--main-padding);
        box-sizing: border-box;
        font-size: 40px;
        line-height: 1.3;
    }
    
    #mobileOverlay div a{
        color: var(--bg-color);
        text-decoration: underline;
    }
}

@media only screen and (max-width: 580px){
    #customContentOuterWrapper.open, 
    #techStylesContentWrapper.open,
    #mobileOverlay{
        height: calc(100dvh - 180px);
        bottom: 0; top: auto;
        overflow: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    .customContentWrapper{padding-top: 0;}
    .customScrollContentWrapper{padding-top: var(--main-padding);}
}

@media only screen and (max-width: 500px){
        #mobileOverlay div{
            position: absolute;
            /*top: 0; transform: none;*/
            width: 100%;
            padding: var(--main-padding);
            box-sizing: border-box;
            font-size: 7vw;
            line-height: 1.3;
        }
}

@media only screen and (max-width: 340px){
    #customContentOuterWrapper.open,
    #techStylesContentWrapper.open,
    #mobileOverlay{
        height: calc(100dvh - 150px);
    }
}