/* ! Base Style */
/* ----------------------------------------------------------------------------------- */
body{ background:#333; color:#fff; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;}
a{text-decoration: none;color: #ceff00}
p{line-height: 1.3;}

.progress-bar{position:fixed; top:0; left: 0;z-index:9999; background: #000; width: 100%; height: 4px; }
.progress-bar::-webkit-progress-value{background:#ceff00;}


/* ! Title System */
/* ----------------------------------------------------------------------------------- */
.text-0{font-size: 5rem;}
h1, .text-1{font-size: 3.4rem;}
h2, .text-2{font-size: 2.2rem;}
h3, .text-3{font-size: 1.5rem;}
h4, p, .text-4{font-size: 1.3rem;}

h1, h2, h3, h4, h5, h6{font-family: Staatliches; font-weight: normal;}
h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
}


/* ! Button system */
/* ----------------------------------------------------------------------------------- */
.button,
.wp-block-button__link{font-size: 1.2rem;background: #aed700; color:#000; padding: 14px 25px;border-radius: 4px}
.button:hover,
.wp-block-button__link:hover{background: #ceff00; }


/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 1200px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

.available{width: 300px; height: 300px; position:absolute; top:25%; right:10%;}
@media (max-width: 768px) {
  .available{width: 200px; height: 200px;  top:8%; right:2%;}
}

/* ! Colums */
.wp-block-columns{max-width:1250px; margin: 0 auto; padding: 0 15px;}
.container-items{display: flex;flex-wrap:wrap;}
.item-colums{width: 50%;margin-bottom: 20px;}
.item-colums h2{margin-bottom: 0px;}

/* ! testimoninza */
.testimonianza{position:relative;padding-left: 100px;margin-bottom: 60px;}
.testimonianza img{width: 80px;height: 80px;position: absolute;top:20px; left:0;}


/*  media text */

@media (max-width: 768px) {
  .wp-block-media-text__media{padding-bottom: 30px;}
}


/* ! Slider */
.splide{margin-top: 100px;}
.splide__slide{padding: 30px;}

/* ! Tiles */

.tiles{min-height: 500px; border-radius: 30px; color:#fff; position: relative;overflow: hidden; display:block}
.tiles__label{position: absolute; bottom: 30px; left:30px}
.tiles__content{
  padding: 30px;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
}





/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}

.rotate{ animation: rotation 20s linear infinite}

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

.slide-right{position:relative; right: -200px}
.slide-left{position:relative; left: -200px}



/* ! Cursor
* {cursor:none}
.outline {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid #fff;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0px;
  top: 0px;
  z-index: 999999;
  transform: translate( 50vw, -100px );
}

.cursor {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: #fff;
  opacity: .3;
  position: fixed;
  left: 0px;
  top: 0px;
  pointer-events: none;
  z-index: 999999;
  transform: translate( 50vw, -100px );
}

.hover {
  opacity: 0.5;
  border: 5px solid #ceff00;
  z-index: 999999;
}

@media (max-width: 768px) {

  .cursor,
  .outline{display: none;}

}
*/