
/* ----------------------------------------------------------------
	:: 1.0 Import All CSS & Fonts
-----------------------------------------------------------------*/

/* @import 'bootstrap-v4.1.3.min.css';
@import 'responsive.css';
@import 'font-awesome/css/fontawesome-all-v5.3.1.min.css';
@import 'swiper.min.css';
@import 'date_resv.css';
@import 'photobox.css'; */

/* Web Fonts */

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Playball|Poppins:400,600,800');

/* ----------------------------------------------------------------
	:: 2.0 Typography CSS
-----------------------------------------------------------------*/






/* ----------------------------------------------------------------
	:: 3.0 Helper Class CSS
-----------------------------------------------------------------*/



.bgPulse {
	width: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 1;
	left: 0;
	height: 100%;
}

  
  .lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	margin: auto;
	z-index: 1;
	width: 90vw;
	display: flex;
	justify-content: space-between; /* Distribute lines evenly */
  }
  
  .line {
	position: relative;
	width: 1px;
	height: 100%;
	/*background: #ffffff;  /* Line color */
	overflow: hidden;
  }
  
  .line::after {
	content: '';
	display: block;
	position: absolute;
	height: 15vh;
	width: 100%;
	top: -50%;
	left: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
	animation: drop 7s 0s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
  }
  
  /* Different colors for each line's pseudo-element */
  .line:nth-child(1)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF4500 75%, #FF4500 100%);
	animation-delay: 0.5s;
  }
  
  .line:nth-child(2)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #32CD32 75%, #32CD32 100%);
	animation-delay: 1s;
  }
  
  .line:nth-child(3)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #1E90FF 75%, #1E90FF 100%);
	animation-delay: 1.5s;
  }
  
  .line:nth-child(4)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FFD700 75%, #FFD700 100%);
	animation-delay: 2s;
  }
  
  .line:nth-child(5)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #8A2BE2 75%, #8A2BE2 100%);
	animation-delay: 2.5s;
  }
  
  .line:nth-child(6)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #20B2AA 75%, #20B2AA 100%);
	animation-delay: 3s;
  }
  
  .line:nth-child(7)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #DC143C 75%, #DC143C 100%);
	animation-delay: 3.5s;
  }
  
  .line:nth-child(8)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00FA9A 75%, #00FA9A 100%);
	animation-delay: 4s;
  }
  
  .line:nth-child(9)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #FF1493 75%, #FF1493 100%);
	animation-delay: 4.5s;
  }
  
  .line:nth-child(10)::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #00BFFF 75%, #00BFFF 100%);
	animation-delay: 5s;
  }
  
  @keyframes drop {
	0% {
	  top: -50%;
	}
	100% {
	  top: 110%;
	}
  }
  
 .bgPulse span {
	position: absolute;
	width: 80px;
	height: 80px;
	background: #719A0A;
	
}

.bgPulse span:nth-child(3n+1) {
	background: transparent;
	border: 9px solid #FBAF32;
}

.bgPulse span:nth-child(1) {
	top: 50%;
	left: 20%;
	animation: animate 10s linear infinite;
}

.bgPulse span:nth-child(2) {
	top: 80%;
	left: 40%;
	animation: animate 12s linear infinite;
}

.bgPulse span:nth-child(3) {
	top: 10%;
	left: 65%;
	animation: animate 15s linear infinite;
}

.bgPulse span:nth-child(4) {
	top: 50%;
	left: 70%;
	animation: animate 6s linear infinite;
}

.bgPulse span:nth-child(5) {
	top: 10%;
	left: 30%;
	animation: animate 9s linear infinite;
}

.bgPulse span:nth-child(6) {
	top: 90%;
	left: 95%;
	animation: animate 8s linear infinite;
}

.bgPulse span:nth-child(7) {
	top: 80%;
	left: 5%;
	animation: animate 5s linear infinite;
}

.bgPulse span:nth-child(8) {
	top: 35%;
	left: 50%;
	animation: animate 14s linear infinite;
}

.bgPulse span:nth-child(9) {
	top: 5%;
	left: 5%;
	animation: animate 11s linear infinite;
}

.bgPulse span:nth-child(10) {
	top: 25%;
	left: 90%;
	animation: animate 10s linear infinite;
}

.bgPulse span:nth-child(10) {
	top: 25%;
	left: 90%;
}

@keyframes animate {
	0% {
		transform: scale(0) translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) translateY(-100px) rotate(360deg);
		opacity: 0;
	}
}
