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

:root {
  --background-dark: #2d3548;
  --text-light: rgba(255, 255, 255, 0.6);
  --text-lighter: rgba(255, 255, 255, 0.9);
  --accent-color: #f67b50;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
}

a,
a:visited,
a:hover,
a:active,
button,
button:visited,
button:hover,
button:active,
input,
input:visited,
input:hover,
input:active,
textarea,
textarea:visited,
textarea:hover,
textarea:active {
  outline: none !important;
}

a:hover {
  text-decoration: none;
}

*,
* {
  /*padding: 0;*/
  margin: 0;
  box-sizing: border-box;
}

/*ul {
	padding-inline-start: 20px;
}*/

.bricks-mobile-menu-wrapper {
  padding-top: 10rem;
}

/*Aggiustamento bugs Gutemberg*/
.bodypage > .ct-span {
  width: 100%;
}
figure {
  margin-bottom: 0;
}
figure img {
  height: auto;
}
/*Align Full*/
.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
  width: 100%;
  height: auto;
  margin: 0 !important;
}
.wp-block-image {
  margin-left: 0;
  margin-right: 0;
}

.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2);
  position: relative;
  width: 100vw !important;
}

/* CSS Popup */
.brxe-popup-610 .brx-popup-content.brxe-container {
  overflow: visible;
}

/* CSS Home Page */
/* CSS Filtri */
.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 115%;
  height: 0.2rem;
  background-color: #282d73;
}

/* CSS La nostra Storia */
.timeline {
  position: relative;
  margin: 0 auto;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 8px;
  background: linear-gradient(190deg, #b7cceb 0%, #282d73 100%) !important;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  height: 0;
  transition: height 1.5s ease-out, opacity 1.5s ease-out;
}

.timeline-container {
  position: relative;
  width: 50%;
  padding: var(--spacing-l) var(--spacing-xl);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-container.left {
  left: 0;
}

.timeline-container.right {
  left: 50%;
}

.content {
  padding: var(--spacing-xl);
  background-color: var(--text-lighter);
  position: relative;
  border-radius: var(--spacing-l);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.timeline.show-line::after {
  height: 100%;
  opacity: 1;
}

.timeline.hide-line::after {
  height: 0;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-container {
    width: 100%;
    padding-left: 5rem;
    padding-right: 0;
    margin-bottom: var(--spacing-l);
  }

  .timeline-container.left::before,
  .timeline-container.right::before {
    left: 31px;
  }

  .timeline-container.right {
    left: 0%;
  }

  .timeline-container.left,
  .timeline-container.right {
    left: 0;
  }
}