/* wp-content/themes/Schlenker Spannwerkzeuge/style.css */

7/* wp-content/themes/Schlenker Spannwerkzeuge/style.css */

/*
 Theme Name:   Schlenker Spannwerkzeuge by LT (Child)
 Theme URI:    https://www.schlenker-spannwerkzeuge.de
 Description:  Child Theme per Schlenker Spannwerkzeuge (by LT) per estensioni e fix custom
 Author:       Luca Terranova
 Author URI:   https://www.lucaterranova.com
 Template:     Divi
 Version:      1.0.0
 Tags:         child-theme, divi
 Text Domain:  schlenker-spannwerkzeuge-lt
*/
html, body {
  /*
  scrollbar-gutter: stable both-edges!important;
  */
}

body {
      /*mix-blend-mode: lighten;*/
}
/*
.lt-glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 1px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 2px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
*/
/*
.ltx-image img{
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.ltx-image img::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 2;
}
*/
.ltx-compare{
  overflow: visible!important;
}

.ltx-header-image img {
    transform: translateY(var(--ltx-header-image-offset, 0px)) scale(var(--ltx-header-image-scale, 1));
    transform-origin: center center;
}
/*
.ltx-compare img,
.ltx-list-image img {
    transform: translateY(var(--ltx-list-image-offset, 0px)) scale(var(--ltx-list-image-scale, 1));
    transform-origin: center center;
}

*/


.ltx-list-image{
  overflow: hidden;
  /*mix-blend-mode: screen;*/
}

.ltx-list-image img {
    transform:
        translate3d(0, var(--ltx-list-image-offset, 0px), 0)
        scale(calc(
            var(--ltx-list-image-scale, 1) *
            var(--ltx-product-list-image-scale, 1)
        ));
    transform-origin: center center;
    will-change: transform;
}

.ltx-compare img {
    transform:
        translate3d(0, var(--ltx-compare-image-offset, 0px), 0)
        scale(calc(
            var(--ltx-compare-image-scale, 1) *
            var(--ltx-product-list-image-scale, 1)
        ));
    transform-origin: center center;
    will-change: transform;
}

/* layer temporanei usati dal pulsante "Compare section" */
.ltx-compare__transition-surface,
.ltx-compare__transition-gap {
    transform:
        translate3d(0, var(--ltx-list-image-offset, 0px), 0)
        scale(
            calc(
                (var(--ltx-builder-viewport-scale, 100) / 100)
                * var(--ltx-compare-image-scale, 1)
            )
        );
    transform-origin: center center;
    will-change: transform;
}

/* se il plugin applica transform inline ai layer temporanei,
   questa variante ha priorità maggiore */
.ltx-compare.is-transitioning .ltx-compare__transition-surface,
.ltx-compare.is-transitioning .ltx-compare__transition-gap {
    transform:
        translate3d(0, var(--ltx-list-image-offset, 0px), 0)
        scale(
            calc(
                (var(--ltx-builder-viewport-scale, 100) / 100)
                * var(--ltx-compare-image-scale, 1)
            )
        ) !important;
}
/*
.lt-glass-card{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 20px rgba(255,255,255,.14),
    0 0 60px rgba(255,255,255,.08),
    0 0 120px rgba(255,255,255,.05);
}*/

.lt-glass-card::before {
  visibility: visible!important;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.lt-glass-card.lt-bottom::before {
  top: unset;
  bottom:0;
}

.lt-shadow {
  position: relative;
  box-shadow: 
              0 0 0 1px rgba(255, 255, 255, 0.06), 
              0 22px 55px #000000,
              /*
              inset 0 0 0 1px rgba(255, 255, 255, 0.10),
              inset 0 1px 18px rgba(255, 255, 255, 0.08);
              */
  
}

.lt-shadow {
    position: relative;
}

.lt-shadow::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.15),
        inset 0 1px 18px rgba(255,255,255,.25);
}

.lt-shadow.bottom{
  box-shadow: 0 30px 30px rgba(0, 0, 0, .75);
}


/*
.lt-glass-card::after {
  visibility: visible!important;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}
/*
.lt-glass {
  box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
  border-radius: 10px;
  border:3px solid rgba(255, 255, 255, 0);
  overflow: hidden;
  filter:drop-shadow(2px 2px 4px black);
}

.lt-glass::after {
  content: '';
  position: absolute;
  top:0;
  left:0;
  background-color: rgba(255, 255, 255, .2);
   background: linear-gradient(
    to right,
     rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.35) 1%,
    rgba(255,255,255,0.15) 15%,
    rgba(255,255,255,0) 60%
  );
  width:100% ;
  height:100%;   
  transform:  translate(50%,0) skewX(20deg);
  z-index: 9;
  

}



.lt-glass-card{
  background: rgba(26, 26, 26, 0.88);         
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);   
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),             
    inset 0 1px 0 rgba(255,255,255,0.06);      

  position: relative;
  overflow: hidden;
}
*/
.metallic {
    /*
  width: 99.5%;
  height: 4.1em;
  top: 1.65em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0.25em;
  */
  background: #666;
  background: 
    /* texture */
    repeating-linear-gradient(transparent 0 13%, #ffffff02 0 calc(13% + 1px), transparent 0) 30% 0% / 40% 100%,
    repeating-linear-gradient(transparent 0 7%, #ffffff03 0 calc(7% + 1px), transparent 0) 70% 0% / 33% 100%,
    repeating-linear-gradient(transparent 0 11%, #ffffff02 0 calc(11% + 1px), transparent 0) -10% 0% / 35% 100%,
    repeating-linear-gradient(transparent 0 17%, #ffffff04 0 calc(17% + 1px), transparent 0) 110% 0% / 27% 100%,
    repeating-linear-gradient(transparent 0 13%, #00000002 0 calc(13% + 1px), transparent 0) 60% -10% / 33% 100%,
    repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 21% 2% / 27% 100%,
    repeating-linear-gradient(transparent 0 8%, #00000001 0 calc(8% + 1px), transparent 0) 31% 7% / 19% 100%,
    /* /texture */
    /* texture? */
    radial-gradient(farthest-side, #00000011, #0000 60%) 20% 50% / 50% 5%,
    radial-gradient(farthest-side, #ffffff08, #0000 60%) 50% 30% / 50% 7%,
    /* colors and shadows */
    radial-gradient(100% 10% at 60% 3%, #fff1, #0000 50%),
    radial-gradient(100% 10% at 60% 97%, #fff3, #0000 50%),
    radial-gradient(150% 10% at 50% 99%, #0009, #0000 50%),
    linear-gradient(#fff1, #fff0 15%, #fff1 85%, #fff3),
    linear-gradient(#fff2, #fff0 20%, #0000 96%, #0006),
    linear-gradient(90deg, #555, #333 10%, #ccc 33%, #666 48% 52%, #fff 66% 75%, #555 90% 95%, #ccc)
}

/*
.black-metal{
    background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(67, 67, 67, 1), rgba(0, 0, 0, 1));
    -webkit-background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(67, 67, 67, 1), rgba(0, 0, 0, 1));
    -moz-background: linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(67, 67, 67, 1), rgba(0, 0, 0, 1));
}
/*
.black-metal {
  background:
    linear-gradient(
      to bottom,
      #2b2f33 0%,
      #1e2226 35%,
      #14171a 50%,
      #1e2226 65%,
      #2b2f33 100%
    );

  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(0,0,0,.9);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -10px 20px rgba(0,0,0,.65),
    0 8px 18px rgba(0,0,0,.7);
}
*/
.black-metal1 {
  background:
    /* micro spazzolatura quasi invisibile */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.015) 0,
      rgba(255,255,255,.015) 1px,
      rgba(0,0,0,.02) 2px,
      rgba(0,0,0,.02) 3px
    ),
    /* riflesso principale */
    linear-gradient(
      to bottom,
      #1f2326 0%,
      #15181b 35%,
      #0e1013 50%,
      #15181b 65%,
      #1f2326 100%
    );

  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(0,0,0,.9);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -14px 26px rgba(0,0,0,.85),
    0 10px 28px rgba(0,0,0,.9);
    
}




/*
.black-metal::after {
  content: "";
  position: absolute;
  width:100%;
  height:100%;
  left:50%!important;
  top:50%!important;
  inset: 0;
    background: linear-gradient(
    180deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0) 15%
    

    );
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  pointer-events: none;
}
*/
.lt-black-gradient{
    overflow: hidden!important;
    position: relative;
}

.lt-black-gradient::after {
  visibility: unset !important;
  z-index:99;
  content: "";
  position: absolute;
  width:50%;
  height:100%;
  left:50%!important;
  top:50%!important;
  inset: 0;
    background: linear-gradient(
    0deg,
    rgba(255,255,255,0.25) 0%,
    rgba(255,255,255,0) 100%  
    );
  transform: translateX(-50%) translateY(calc(-50% - 3px)) rotate(0deg);
  pointer-events: none;
  /* MASCHERA orizzontale */
  -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  );
  mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  );
}


.lt-glossy{
    overflow: hidden!important;
    position: relative;
}

.lt-glossy::before {
  opacity: 0.7;
  visibility: unset !important;
  z-index:99;
  content: "";
  position: absolute;
  width:100%;
  height:100%;
  left:50%!important;
  top:50%!important;
  inset: 0;
  background: rgba(255,255,255,0.1);
 
  background: linear-gradient(
  0deg,
  rgba(255,255,255,1) 0%,
  rgba(255,255,255,0.1) 1%,
  rgba(255,255,255,0) 50%  
  );
  
  transform: translateX(-50%) translateY(calc(-50% + 0px)) skew(0deg, 0deg);
  pointer-events: none;      
  -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  );
  mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  );
  
}
.lt-black-gradient.updown::after {
 transform: translateX(-50%) translateY(calc(-50% + 3px)) rotate(180deg);
}
.lt-glossy.updown::before {
 transform: translateX(-50%) translateY(calc(-50% + 3px)) skew(0deg, 0deg) rotate(180deg);
}


.lt-horizontal-fade{
   -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  )!important;
  mask-image: linear-gradient(
      90deg,
      transparent 0%,
      black 50%,    
      transparent 100%
  )!important;
}

.lt-fade-separator::after{
  content:"";
  position:	absolute;
  height:1px;
  width:100%;
  left:0;
  top:0;
  z-index: 99999;
  background:#71717f;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 50%,    
        transparent 100%
    )!important;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 50%,    
        transparent 100%
    )!important;
}

.lt-fade-separator.lt-no-separator::after{
  content:unset!important;
  display:none!important;
}

/*
*::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: transparent;
}

*::-webkit-scrollbar{
	width: 10px;
	background-color: transparent;
}

*::-webkit-scrollbar-thumb{
	background-color: #ffe100;
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 3px;	
}
*/

/* WebKit */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.lt-shine {
  position: relative;
  overflow: hidden;
}

.lt-shine::before {
  z-index: 99;
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,0.45) 49%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.55) 53%,
    transparent 70%
  );

  animation: ltShineAnim 650ms ease-out forwards;
}

@keyframes ltShineAnim {
  0% {
    left: -120%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}


/* Shining Button 1*/
/*
HTML SCSSResult Skip Results Iframe
EDIT ON
@import "bourbon";

$col-primary: #00c7ec;
$corner-radius: 5px;

body {
  background-color: #012839;
  text-align: center;
  padding-top: 50px;
}

.button {
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Exo 2', sans-serif;
  font-weight: 300;
  font-size: 30px;

  display: inline-block;
  position: relative;
  text-align: center;
  color: $col-primary;
  border: 1px solid $col-primary;
  border-radius: $corner-radius;

  line-height: 3em;
  padding-left: 5em;
  padding-right: 5em;

  box-shadow: 0 0 0 0 transparent;

  @include transition(all 0.2s ease-in);

  &:hover {
    color: white;
    box-shadow: 0 0 30px 0 transparentize($col-primary, 0.5);
    background-color: $col-primary;

    @include transition(all 0.2s ease-out);

    &:before {
      @include animation(shine 0.5s 0s linear);
    }
  }

  &:active {
    box-shadow: 0 0 0 0 transparent;
    @include transition(box-shadow 0.2s ease-in);
  }

  &:before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;

    opacity: 0;
    background: white;
    box-shadow: 0 0 15px 3px white;
    @include transform(skewX(-20deg));
  }
}

@include keyframes(shine) {
  from {
    opacity: 0;
    left: 0%;
  }

  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    left: 100%;
  }
}
View Compiled


Resources1× 0.5× 0.25×Rerun
*/
/*
.ltx-product-light {
  position: relative;
  overflow: visible;
}

.ltx-product-light img {
  position: relative;
  z-index: 1;
  display: block;
}

.ltx-product-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  filter:
    brightness(2.2)
    contrast(2.8)
    blur(10px);

  mix-blend-mode: screen;
  opacity: .35;

  animation: ltx-metal-bloom 5s ease-in-out infinite;
}

@keyframes ltx-metal-bloom {
  0% {
    opacity: .18;
    transform: translateX(-2px) scale(1.01);
  }

  50% {
    opacity: .48;
    transform: translateX(3px) scale(1.025);
  }

  100% {
    opacity: .18;
    transform: translateX(-2px) scale(1.01);
  }
}
*/