/*
 Theme Name:   Bricks Pies Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks from Fresh Pies.
 Author:       Bricks
 Author URI:   https://www.freshpies.co.uk
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Header Styling */
header.scrolling svg #bean-logo,
header svg #bean-icon {
  opacity: 0;
  transition: all 0.2s ease;
}

header.scrolling:not(.slide-up) svg #bean-icon {
  opacity: 1;
  transition: all 0.2s ease;
}

header svg {
  width: 100%;
  height: auto;
}

/* Floaty McFloaty Beanies */
.floaty-bean-1 {
  width: 100vw;
  height: 100vw;
  background: radial-gradient(circle, rgba(177, 59, 142, 0.28) 0%, rgba(80, 50, 80, 0.72) 100%);
  opacity: 0.8;
  position: absolute;
  top: -88vw;
  left: calc(50% - 100vw);
  border-radius: 45%;
  animation: rotate 90s infinite;
}

.home .floaty-bean-1 {
  top: -83vw;
  left: calc(50% - 105vw);
}

.floaty-bean-2 {
  width: 100vw;
  height: 100vw;
  background: radial-gradient(circle, rgba(177, 59, 142, 0.28) 0%, rgba(80, 52, 80, 0.72) 100%);
  opacity: 0.8;
  position: absolute;
  bottom: -80vw;
  left: calc(50% + 20vw);
  border-radius: 45%;
  animation: rotate 120s infinite;
}

.home .floaty-bean-2 {
  bottom: -65vw;
  left: calc(50% + 20vw);
}

.floaty-bean-2::before {
  content: "";
  width: 105%;
  height: 105%;
  background: #503450;
  position: absolute;
  top: -2%;
  left: -2%;
  border-radius: 40%;
  opacity: 0.3;
  animation: rotate 1200s infinite;
}

.home .floaty-bean-2::before {
  top: -5%;
  left: -5%;
}

@media (max-width: 768px) {
  .floaty-bean-1 {
    top: -70vw;
    left: calc(50% - 95vw);
  }
  .floaty-bean-2 {
    left: calc(50% + 10vw);
  }
  .home .floaty-bean-2 {
    bottom: -45vw;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Background */
.floaty-mcfloaty {
  position: relative;
  overflow: hidden;
  background: linear-gradient(62deg, #6c3c6d, #9d2579, #6c3c6d, #95367c, #95367c, #6c3c6d, #6c3c6d, #ff31bb);
  animation: gradient 60s ease infinite;
  background-size: 400% 400%;
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Footer image width fix */

.footer-logo img {
	width: auto!important;
}