|  | @@ -2,141 +2,4 @@ page-hall {
 | 
	
		
			
				|  |  |      ion-content {
 | 
	
		
			
				|  |  |          background: #3f50b4 !important;
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  | -// Animation properties
 | 
	
		
			
				|  |  | -$anim-width:    200px;
 | 
	
		
			
				|  |  | -$anim-height:   250px;
 | 
	
		
			
				|  |  | -$anim-duration: 4s;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -// Splash properties
 | 
	
		
			
				|  |  | -$splash-width:  $anim-width;
 | 
	
		
			
				|  |  | -$splash-height: $anim-width / 2;
 | 
	
		
			
				|  |  | -$splash-origin: $splash-height / 2;
 | 
	
		
			
				|  |  | -$water-level:   $splash-origin;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -// Drip properties
 | 
	
		
			
				|  |  | -$drip-size:     15px;
 | 
	
		
			
				|  |  | -$drip-pos:      ($splash-width / 2) - ($drip-size / 2);
 | 
	
		
			
				|  |  | -$drip-rebound:  40px;
 | 
	
		
			
				|  |  | -$drip-re-size:  5px;
 | 
	
		
			
				|  |  | -$drip-re-pos:   ($splash-width / 2) - ($drip-re-size / 2);
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -// Colours
 | 
	
		
			
				|  |  | -$c-drip:        #FFF;
 | 
	
		
			
				|  |  | -$c-splash:      #FFF;
 | 
	
		
			
				|  |  | -$c-bg:          #43A2CE;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -.drip {
 | 
	
		
			
				|  |  | -  width: $anim-width;
 | 
	
		
			
				|  |  | -  height: $anim-height;
 | 
	
		
			
				|  |  | -  display: flex;
 | 
	
		
			
				|  |  | -  flex-wrap: wrap;
 | 
	
		
			
				|  |  | -  justify-content: center;
 | 
	
		
			
				|  |  | -  margin: auto;
 | 
	
		
			
				|  |  | -  position: relative;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  &:before {
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    left: $drip-pos;
 | 
	
		
			
				|  |  | -    top: 0;
 | 
	
		
			
				|  |  | -    content: '';
 | 
	
		
			
				|  |  | -    width: $drip-size;
 | 
	
		
			
				|  |  | -    height: $drip-size;
 | 
	
		
			
				|  |  | -    background-color: $c-drip;
 | 
	
		
			
				|  |  | -    border-radius: 50%;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    animation: drip $anim-duration ease infinite;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -  &:after {
 | 
	
		
			
				|  |  | -    box-sizing: border-box;
 | 
	
		
			
				|  |  | -    position: absolute;
 | 
	
		
			
				|  |  | -    bottom: 0;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | -    content: '';
 | 
	
		
			
				|  |  | -    width: 0px;
 | 
	
		
			
				|  |  | -    height: 0px;
 | 
	
		
			
				|  |  | -    border: solid 4px $c-drip;
 | 
	
		
			
				|  |  | -    border-radius: 50%;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    animation: splash $anim-duration ease infinite;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -@keyframes drip {
 | 
	
		
			
				|  |  | -  10% {
 | 
	
		
			
				|  |  | -    top: 0;
 | 
	
		
			
				|  |  | -    opacity: 1;
 | 
	
		
			
				|  |  | -    animation-timing-function: cubic-bezier(.24,0,.76,.14);
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  25% {
 | 
	
		
			
				|  |  | -    opacity: 1;
 | 
	
		
			
				|  |  | -    top: $anim-height - $water-level;
 | 
	
		
			
				|  |  | -    animation-timing-function: ease-out;
 | 
	
		
			
				|  |  | -    width: $drip-size;
 | 
	
		
			
				|  |  | -    height: $drip-size;
 | 
	
		
			
				|  |  | -    left: $drip-pos;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  30% {
 | 
	
		
			
				|  |  | -    opacity: 1;
 | 
	
		
			
				|  |  | -    top: $anim-height - ($water-level + $drip-rebound);
 | 
	
		
			
				|  |  | -    width: $drip-re-size;
 | 
	
		
			
				|  |  | -    height: $drip-re-size;
 | 
	
		
			
				|  |  | -    animation-timing-function: ease-in;
 | 
	
		
			
				|  |  | -    left: $drip-re-pos;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  33% {
 | 
	
		
			
				|  |  | -    top: $anim-height - $water-level;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    animation-timing-function: ease-out;
 | 
	
		
			
				|  |  | -    left: $drip-re-pos;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  33.001% {
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  100% {
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -@keyframes splash {
 | 
	
		
			
				|  |  | -  0% {
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  25% {
 | 
	
		
			
				|  |  | -    bottom: $splash-height / 2;
 | 
	
		
			
				|  |  | -    left: $splash-width / 2;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    width: 0px;
 | 
	
		
			
				|  |  | -    height: 0px;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  25.001% {
 | 
	
		
			
				|  |  | -    opacity: 1;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  33% {
 | 
	
		
			
				|  |  | -    bottom: 0;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    width: $splash-width;
 | 
	
		
			
				|  |  | -    height: $splash-height;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  33.001% {
 | 
	
		
			
				|  |  | -    bottom: $splash-height / 2;
 | 
	
		
			
				|  |  | -    left: $splash-width / 2;
 | 
	
		
			
				|  |  | -    opacity: 1;
 | 
	
		
			
				|  |  | -    width: 0px;
 | 
	
		
			
				|  |  | -    height: 0px;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  43% {
 | 
	
		
			
				|  |  | -    bottom: 0;
 | 
	
		
			
				|  |  | -    left: 0;
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -    width: $splash-width;
 | 
	
		
			
				|  |  | -    height: $splash-height;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -  43.001% {
 | 
	
		
			
				|  |  | -    opacity: 0;
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -}
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |  }
 |