/*GENERAL SHAPE SETTINGS*/
.full-circle {
	border-radius: 100%;
}
.top-half-circle {
	border-radius: var(--shape-h-size) var(--shape-h-size) 0 0;
}
.left-half-circle {
	border-radius: var(--shape-h-size) 0 0 var(--shape-h-size);
}
.right-half-circle {
	border-radius: 0 var(--shape-h-size) var(--shape-h-size) 0;
}
.bottom-half-circle {
	border-radius: 0 0 var(--shape-h-size) var(--shape-h-size);
}
.top-left-circle {
	border-radius: 100% 0 0 0;
}
.top-right-circle {
	border-radius: 0 100% 0 0;
}
.bottom-left-circle {
	border-radius: 0 0 0 100%;
}
.bottom-right-circle {
	border-radius: 0 0 100% 0;
}
.shape-with-image {
	position: relative;
	overflow: hidden;
}	
	.shape-with-image img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.half-h-shape {
	width: var(--shape-half-size) !important;
}

.half-v-shape {
	height: var(--shape-half-size) !important;
}

/*OUTLINE SHAPES + ANIMATION*/
.shape-outline-ani {
  fill: none;
  stroke-width: 1;
  stroke: rgb(78, 78, 78);
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
body.loaded .in-view .shape-outline-ani:not(.custom-ani) {
  animation: line 2s ease-in;
  animation-fill-mode: forwards;
}
/*
body.loaded .in-view svg:nth-child(odd) .shape-outline-ani:not(.custom-ani) {
  animation: line01 10s infinite;
}
body.loaded .in-view svg:nth-child(even) .shape-outline-ani:not(.custom-ani) {
  animation: line01 15s infinite;
}
*/
/*
body.loaded .in-view svg:nth-child(3) .shape-outline-ani:not(.custom-ani) {
  animation: line01 10s infinite;
}

body.loaded .in-view svg:nth-child(8) .shape-outline-ani:not(.custom-ani) {
  animation: line01 15s infinite;
}
body.loaded .in-view svg:nth-child(18) .shape-outline-ani:not(.custom-ani) {
  animation: line01 30s infinite;
}
*/

body.loaded .in-view svg:hover .shape-outline-ani:not(.custom-ani) {
  animation: lineHover .8s ease-in;
}




	@keyframes line {
	  0% {
	    stroke-dashoffset: 1400;
	    opacity: 0;
	  }
	  
	  20% {
		 opacity: 1;
	  }
	  
	  100% {
		stroke-dashoffset: 0;
		opacity: 1;
	  }
	}
		@keyframes lineHover {
		  0% {
		    stroke-dashoffset: 0;
		    opacity: 1;
		  }

		  100% {
			 opacity: 1;
			 stroke-dashoffset: -1400;
		  }
		}
	
		@keyframes line01 {
		  0% {
		    stroke-dashoffset: 1400;
		    opacity: 1;
		  }
		  
		  33% {
			 opacity: 1;
			 stroke-dashoffset: 0;
		  }
		  
		  66% {
			 opacity: 1;
			 stroke-dashoffset: -1400;
		  }
		  
		  100% {
			 opacity: 1;
			 stroke-dashoffset: 1400;
		  }
		}
		
	
	@keyframes linehide {
	  0% {
	    stroke-dashoffset: 0;
	    opacity: 1;
	  }
	  
	  20% {
		 opacity: 0;
	  }
	  
	  100% {
	    stroke-dashoffset: 1400;
	    opacity: 0;
	  }
	}