:root {
    --purple: rgba(115, 115, 115, 1);
    --pink: rgba(115, 115, 115, 1);
    --blue: rgba(115, 115, 115, 1);
    --black: rgba(115, 115, 115, 0.25);
    --white: rgba(252, 255, 255, 1);
    --trans: rgba(0, 0, 0, 0);
    --devhive: rgba(83, 132, 232, 1);
}


.purple-bg {
  background: var(--purple);
}



/*
.dark-gradient {
  background-image: url('../img/bg-gradient/Scuro-100.jpg');
  background-size: 100% auto;
  background-repeat: repeat-y;
}

*/





/* -------------------------------- */
/* g1-pink */
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 120%;
}
@property --y1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

.g1-pink {
  /* Required for Firefox */
  --x1: 120%;
  --y1: 80%;
  /**/
  background: radial-gradient(
    circle at var(--x1) var(--y1),
    var(--pink) 10%,
    var(--trans) 25%
  );
  /* This block includes noise/grain
      // background: radial-gradient(
      //   circle at var(--x1) var(--y1), 
      //   var(--pink) 5%, var(--trans) 25%),
      //   url(https://grainy-gradients.vercel.app/noise.svg);  
      // filter: contrast(50%) brightness(50%);
      */
  animation: g 5s ease-in-out infinite alternate;
}

@keyframes g1 {
  from {
    --x1: random() * 100%;
    --y1: random() * 100%;
  }
  to {
    --x1: random() * 100%;
    --y1: random() * 100%;
  }
}

/* -------------------------------- */
/* g2-blue */
@property --x2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}
@property --y2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

.g2-blue {
  /* Required for Firefox */
  --x2: 20%;
  --y2: 80%;
  /**/
  background: radial-gradient(
    circle at var(--x2) var(--y2),
    var(--blue) 0%,
    var(--trans) 30%
  );
  animation: g2 7s ease-in-out infinite alternate;
}

@keyframes g2 {
  from {
    --x2: 20%;
    --y2: 80%;
  }
  to {
    --x2: 40%;
    --y2: -20%;
  }
}

/* -------------------------------- */
/* g3-blue */
@property --x3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}
@property --y3 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -20%;
}

.g3-blue {
  /* Required for Firefox */
  --x3: 70%;
  --y3: -20%;
  /**/
  background: radial-gradient(
    circle at var(--x3) var(--y3),
    var(--blue) 0%,
    var(--trans) 30%
  );
  animation: g3 4s ease-in-out infinite alternate;
}

@keyframes g3 {
  from {
    --x3: 70%;
    --y3: -20%;
  }
  to {
    --x3: 85%;
    --y3: 120%;
  }
}

/* -------------------------------- */
/* g4-purple */
@property --x4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --y4 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 110%;
}

.g4-purple {
  /* Required for Firefox */
  --x4: 50%;
  --y4: 110%;
  /**/
  background: radial-gradient(
    circle at var(--x4) var(--y4),
    var(--purple) 0%,
    var(--trans) 40%
  );
  animation: g4 9s ease-in-out infinite alternate;
}

@keyframes g4 {
  from {
    --x4: 50%;
    --y4: 110%;
  }
  to {
    --x4: 85%;
    --y4: 120%;
  }
}

/* -------------------------------- */
/* g5-blue */
@property --x5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -10%;
}
@property --y5 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

.g5-blue {
  /* Required for Firefox */
  --x5: -10%;
  --y5: 20%;
  /**/
  background: radial-gradient(
    circle at var(--x5) var(--y5),
    var(--blue) 0%,
    var(--trans) 25%
  );
  animation: g5 13s ease-in-out infinite alternate;
}

@keyframes g5 {
  from {
    --x5: -10%;
    --y5: 20%;
  }
  to {
    --x5: 35%;
    --y5: 120%;
  }
}

/* -------------------------------- */
/* g6-purple */
@property --x6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}
@property --y6 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -20%;
}

.g6-purple {
  /* Required for Firefox */
  --x6: 15%;
  --y6: -20%;
  /**/
  background: radial-gradient(
    circle at var(--x6) var(--y6),
    var(--purple) 0%,
    var(--trans) 30%
  );
  animation: g6 7s ease-in-out infinite alternate;
}

@keyframes g6 {
  from {
    --x6: 15%;
    --y6: -20%;
  }
  to {
    --x6: -35%;
    --y6: 70%;
  }
}



#mobileMenuContainer {
    z-index: 1001; 
}

.dark-gradient {
    background-image: url('../img/sfondi-repeat/sfondo-scuro.jpg');
    background-size: 100% auto;
    background-repeat: repeat-y;
}


.bg-titleBg {
    background-image: url('../img/sfondi-repeat/header-pagine.jpg');
    background-position: center;
    background-attachment: fixed; 
}

.bg-bgMedia {
    background-image: url('../img/sfondi-repeat/sfondo-esagoni.jpg');
    background-size: auto;
    background-position: center top;
}

.bg-bgLightColor {
    background-image: url('../img/sfondi-repeat/sfondo-frasi.jpg');
}

.bg-bgLightGray {
    background-image: url('../img/sfondi-repeat/sfondo-contattaci.jpg');
    background-size: auto auto;
    background-position: center top;
}

.bg-bgBlack {
    color: #fff;
    background-image: url('../img/sfondi-repeat/sfondo-scuro.jpg');
    background-size: 100% auto;
    background-position: center top;
}











    /* ################################################### */
    /* ## HOME  ########################################## */
    /* ################################################### */
    .scrolldown-item {
        z-index: 1;
    }


.hero-container {
    background-image: url('../img/bg-gradient/slide-fondo.jpg');
    background-size: auto 100%;
    /*background-position: center bottom;*/
    background-position: left top;
    height: 100vh;
    background-attachment: fixed;
    position: relative;
}

    .hero-container .owl-stage-outer {
        height: 100%;
        width:100%; 
    }

    .hero-container .owl-stage {
        height: 100%;
    }
        .hero-container .owl-stage .owl-item {
            height: 100%;
        }

        .hero-image-container {
            position: relative;
            z-index: 0;
            height: 100%;
        }



.hero-image-container .hex-white {
    position:absolute; 
}

    .hero-image-container .hex-yellow {
        position: absolute;
    }

    .hero-image-container .hero-image {
        
    }

.hero-container .owl-dots-container {
    position: absolute;
    left: 0; right:0;
    /*bottom: 10rem;*/
    z-index: 1;
}

    .hero-container .owl-dots .owl-dot {
        display: block;
        background: #707070;
        height: 8px;
        position: relative;
        flex: 0 1 auto;
        flex-basis: auto;
        min-width: 10%;
    }

        .hero-container .owl-dots .owl-dot:after {
            content: ""; 
            background: #F9B21E;
            position:absolute;
            top:0;
            left:0;
            right:100%; 
            bottom:0; 
            transition-duration: 0.2s; 
            transition-timing-function: ease-out; 


        }
        .hero-container .owl-dots .owl-dot.active:after {
            animation: owldotsanimation .2s ease-out 1 alternate;
            animation-fill-mode: forwards;
        }



@keyframes owldotsanimation {
    from {
        right:100%; 
    }

    to {
        right:0; 
    }
}