/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 31 2023 | 09:14:38 */
.swipe-box{
	visibility: hidden;
}


@media only screen and (max-width:768px) {
	
	.swipe-box{
		position: absolute;
		bottom: 0;
		left:50%;
		transform: translateX(-50%);
		height: 60px;
		width:  150px;
		z-index: 10;
		border: 1px solid black;
	}

	.dot {
		height: 20px;
		width: 20px;
		z-index:10;
		border-radius: 10px;
	}
	.dot.dot-animate {
		animation: swipe 1s forwards, swipe-3 .7s 1s forwards, swipe-4 .5s 1.7s forwards,swipe-6 .5s 3.2s forwards;
		-webkit-animation: swipe 1s forwards, swipe-3 .7s 1s forwards, swipe-4 .5s 1.7s forwards,swipe-6 .5s 3.2s forwards;
		visibility: visible;
	}
	
	.dot.dot-animate::after {
		animation: swipe-2 1s .3s forwards, swipe-5 2s 2.2s forwards;
		-webkit-animation: swipe-2 1s .3s forwards, swipe-5 2s 2.2s forwards;
		visibility: visible;
		
	}

	.dot::after {
		content: "";
		opacity: 1;
		height: 15px;
		width: 15px;
		border-radius: 50%;
	}

	.dot, .dot::after {
		visibility: hidden;
		transition:  0.3s ease all 0s visibility;
		box-sizing: border-box;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) scale(2);
		
		border: solid black 1px;
	}



	@keyframes swipe {

		100%{
			border: solid black 3px;
			height: 10px;
			width: 10px;
			border-radius: 5px;
			background-color: black;
		}
	}

	@keyframes swipe-2 {
		100% {
			opacity: 0;
			height: 25px;
			width: 25px;
		}
	}

	@keyframes swipe-3 {
		100%{
			border-radius: 5px;
			width: 100px;
			transform: translate(-105px,-50%);
		}
	}
	@keyframes swipe-4 {
		100%{
			width: 10px;
		}
	}
	@keyframes swipe-5 {
		0%{
			opacity: 1;
			height: 10px;
			width: 10px;
		}
		100% {
			height: 25px;
			width: 25px;
		}
	}
	
	@keyframes swipe-6 {
   
    100% {
        opacity:0;
		visibility:hidden;
    }
}
}