/*  -------------------- ANIMAZIONE PRO -------------------- */
@keyframes ticker {
	 0% {
		 transform: translate3d(25%, 0, 0);
	}
	 100% {
		 transform: translate3d(-25%, 0, 0);
	}
}
 section.pro-animation {
	 text-align: center;
	 position: relative;
	 z-index: 1;
	 background-color: transparent;
	 overflow-x: hidden;
}
 section.pro-animation .group {
	 width: 100vw;
	 display: -webkit- flex;
	/* Safari */
	 display: flex;
	 -webkit-flex-direction: column;
	/* Safari */
	 flex-direction: column;
	 -webkit-align-items: center;
	 align-items: center;
	 -webkit-justify-content: space-evenly;
	 justify-content: space-evenly;
	 overflow: hidden;
}
 section.pro-animation .group .row {
	 width: 300vw;
	 display: -webkit- flex;
	/* Safari */
	 display: flex;
	 -webkit-flex-direction: row;
	/* Safari */
	 flex-direction: row;
	 -webkit-align-items: flex-start;
	 align-items: flex-start;
	 -webkit-justify-content: space-evenly;
	 justify-content: space-evenly;
	 transform: translate3d(25%, 0, 0);
	 white-space: nowrap;
	 animation-iteration-count: infinite;
	 animation-timing-function: linear;
	 animation-name: ticker;
	 animation-duration: 30s;
}
 section.pro-animation .group .row:hover {
	 animation-play-state: paused;
}
 section.pro-animation .group .row:nth-child(even) {
	 animation-direction: reverse;
}
 section.pro-animation .group .row span {
	 font-family: "Urbanist", Sans-serif;
	 color: black;
	 background-color: white;
	 padding: 50px;
	 margin: 10px;
	 border-radius: 50px;
	 font-size: 80px;
	 font-weight: 500;
}
@media screen and (max-width: 600px) {
    section.pro-animation .group .row span {
        font-family: "Urbanist", Sans-serif;
    	color: black;
    	background-color: white;
    	padding: 30px;
    	margin: 10px;
    	border-radius: 35px;
    	font-size: 40px;
    	font-weight: 500;
    }
}
/*  -------------------- FINE ANIMAZIONE PRO -------------------- */

/*  -------------------- ANIMAZIONE LIGHT -------------------- */
.light-animation {
  background: transparent;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  height: 560px;
  overflow: hidden;
}
@media screen and (max-width: 600px) {
    .light-animation {
        height: 400px;   
    }
}
.light-animation .main {
  margin: 0px auto;
  width: 480px;
  height: 480px;
  position: relative;
}
@media screen and (max-width: 600px) {
   .light-animation .main {
        width: 320px;
        height: 320px;
   } 
}
@media screen and (max-width: 400px) {
   .light-animation .main {
        width: 290px;
        height: 290px;
   } 
}
.light-animation .big-circle {
  height: 100%;
  width: 100%;
  position: relative;
  border: 3px solid #FFFFFFDB;
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  animation: Rotate 20s linear infinite;
  -webkit-animation: Rotate 20s linear infinite;
}
.light-animation .icon-block {
  width: 64px;
  height: 64px;
  position: absolute;
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  background-color: white;
}
@media screen and (max-width: 600px) {
   .light-animation .icon-block {
        width: 45px;
        height: 45px;   
   } 
}
.light-animation .icon-block img {
  margin: 0px auto;
  width: 45%;
  animation: Rotate-reverse 20s linear infinite;
  -webkit-animation: Rotate-reverse 20s linear infinite;
  filter: brightness(0) saturate(100%) invert(21%) sepia(97%) saturate(4380%) hue-rotate(335deg) brightness(102%) contrast(101%);
}
.icon-block:first-child {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.icon-block:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
}
.icon-block:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
}
.icon-block:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
/* circle content */
.circle {
  animation: circle-rotate 20s linear infinite;
  -webkit-animation: circle-rotate 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  width: 75%;
  height: 75%;
  border: 3px solid #FFFFFFDB;
  border-radius: 50%;
}
.circle .icon-block img {
  animation: img-rotate 20s linear infinite;
  -webkit-animation: img-rotate 20s linear infinite;
}
/* center services */
.center-services {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
  font-family: "Urbanist", Sans-serif;
  font-size: 32px;
  line-height: 38px;
  color: #4E4E4E;
}
@media screen and (max-width: 600px) {
    .center-services {
        font-size: 20px;
        line-height: 24px;
    }
}

/* keyframe animation */

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes Rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes Rotate-reverse {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes img-rotate {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes img-rotate {
  from {
    -webkit-transform: rotate(-45deg);
  }
  to {
    -webkit-transform: rotate(-405deg);
  }
}
/*  -------------------- FINE ANIMAZIONE LIGHT -------------------- */