/*
 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
*/

/* Prevent page flickering if vertical scrollbar is hidden */
/* html {
	margin-right: calc(-1 * (100vw - 100%));
} */

html.no-scroll,
body.no-scroll {
  overflow-y: hidden;
}

body {
  text-rendering: optimizeLegibility;
}

.tap-highlight-none {
  -webkit-tap-highlight-color: transparent;
}

@media (width <=991px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (width <=478px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Safari-specific fixes here */

/* @media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .reference-card {
			  height: auto !important;
    }
  }
} */

/* Combine Texture & Gradient */
.texture-1 {
  --texture-current-asset: var(--texture-asset, var(--texture-1-asset));
  --texture-current-position: var(--texture-position, var(--texture-1-position, center center));
  --texture-current-repeat: var(--texture-repeat, var(--texture-1-repeat));
  --texture-current-size: var(--texture-size, var(--texture-1-size));
  --texture-current-attachment: var(--texture-attachment, var(--texture-1-attachment));
}

.texture-2 {
  --texture-current-asset: var(--texture-asset, var(--texture-2-asset));
  --texture-current-position: var(--texture-position, var(--texture-2-position, center center));
  --texture-current-repeat: var(--texture-repeat, var(--texture-2-repeat));
  --texture-current-size: var(--texture-size, var(--texture-2-size));
  --texture-current-attachment: var(--texture-attachment, var(--texture-2-attachment));
}

.texture-3 {
  --texture-current-asset: var(--texture-asset, var(--texture-3-asset));
  --texture-current-position: var(--texture-position, var(--texture-3-position, center center));
  --texture-current-repeat: var(--texture-repeat, var(--texture-3-repeat));
  --texture-current-size: var(--texture-size, var(--texture-3-size));
  --texture-current-attachment: var(--texture-attachment, var(--texture-3-attachment));
}

.texture-4 {
  --texture-current-asset: var(--texture-asset, var(--texture-4-asset));
  --texture-current-position: var(--texture-position, var(--texture-4-position, center center));
  --texture-current-repeat: var(--texture-repeat, var(--texture-4-repeat));
  --texture-current-size: var(--texture-size, var(--texture-4-size));
  --texture-current-attachment: var(--texture-attachment, var(--texture-4-attachment));
}

.texture-5 {
  --texture-current-asset: var(--texture-asset, var(--texture-5-asset));
  --texture-current-position: var(--texture-position, var(--texture-5-position, center center));
  --texture-current-repeat: var(--texture-repeat, var(--texture-5-repeat));
  --texture-current-size: var(--texture-size, var(--texture-5-size));
  --texture-current-attachment: var(--texture-attachment, var(--texture-5-attachment));
}

[class*="texture-"][class*="gradient-"] {
  background-image:
    linear-gradient(180deg, var(--gradient-top-1) 0%, var(--gradient-top-2) 20px, transparent 5%, transparent 95%, var(--gradient-bottom-2) calc(100% - 20px), var(--gradient-bottom-1) 100%),
    var(--texture-current-asset);

  background-position:
    center center,
    var(--texture-current-position, center center);

  background-repeat:
    no-repeat,
    var(--texture-current-repeat, repeat);

  background-size:
    100% 100%,
    var(--texture-current-size, auto);

  background-attachment:
    scroll,
    var(--texture-current-attachment, scroll);
}

@media (width <=991px) {
[class*="texture-"][class*="gradient-"] {
		background-image:
			linear-gradient(180deg,
				var(--gradient-top-1) 0%,
				var(--gradient-top-2) 12px, transparent 5%, transparent 95%,
				var(--gradient-bottom-2) calc(100% - 12px),
				var(--gradient-bottom-1) 100%),
			var(--texture-current-asset);
	}
}

@media (width <=478px) {
[class*="texture-"][class*="gradient-"] {
		background-image:
			linear-gradient(180deg,
				var(--gradient-top-1) 0%,
				var(--gradient-top-2) 8px, transparent 3%, transparent 97%,
				var(--gradient-bottom-2) calc(100% - 8px),
				var(--gradient-bottom-1) 100%),
			var(--texture-current-asset);
	}
}