/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

html, body {
	min-width: 350px !important;
	overflow-x: hidden;
}

h1, h2 {
	text-wrap: balance;
}

.text--bold {
  font-weight: 700;
}

.text--italic {
  font-style: italic;
}

@media (min-width: 1201px) {
	.nav__kontakt-button {
		display: none;
	}
}

/* Hero */

@media (min-width: 768px) {
	.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 55%; 
  height: 100%;
  background-color: #094036;
  opacity: 0.84;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  z-index: 1;
	}
}

/* Animations */

/* Avoid FUC on frontend*/
.bricks-is-frontend .animation-trigger{
  opacity:0;
}

/* Animated Class*/
.animate, .animate-loop .loop-items{
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 1) * 200ms);
  animation-duration: var(--duration, 450ms);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
 
/* Change translate Origin*/
.animation--left-to-right{
  --translate: -20px,0,0;
}
.animation--right-to-left{
  --translate: 20px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-20px,0;
}
.animation--bottom-to-top{
  --translate: 0,20px,0;
}

.animation--fade-in {
  --translate: 0,0,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

.animate-loop .loop-items:nth-child(1) { --delay: 0; }
.animate-loop .loop-items:nth-child(2) { --delay: 1; }
.animate-loop .loop-items:nth-child(3) { --delay: 2; }

.animation-hover--scale-down:hover {
  transform: scale(0.8);
}