.cards-box {
	position: relative;
	/*transform: translateX(-15px);*/
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.cards-box .card {
		width: 100%;
		background: #ffffff;
		border-radius: 14px;
		cursor: pointer;
	}

		.cards-box .card.hide {
			visibility: hidden;
		}

		.cards-box .card:not(.hide) {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 0.8s cubic-bezier(0.18, 0.98, 0.45, 1);
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
		}

			.cards-box .card:not(.hide)[data-slide='0'] {
				transform: translate(0px, 0px);
				opacity: 1;
			}

			.cards-box .card:not(.hide)[data-slide='1'] {
				transform: translate(20px, 20px);
				opacity: 0.9;
			}

			.cards-box .card:not(.hide)[data-slide='2'] {
				transform: translate(25px, 25px);
				opacity: 0.8;
			}

			.cards-box .card:not(.hide)[data-slide='3'] {
				transform: translate(30px, 30px);
				opacity: 0.7;
			}

			.cards-box .card:not(.hide)[data-slide='4'] {
				transform: translate(35px, 35px);
				opacity: 0.6;
			}

			.cards-box .card:not(.hide)[data-slide='5'] {
				transform: translate(40px, 40px);
				opacity: 0.5;
			}

			.cards-box .card:not(.hide)[data-slide='-1'], .cards-box .card:not(.hide)[data-slide='-2'], .cards-box .card:not(.hide)[data-slide='-3'], .cards-box .card:not(.hide)[data-slide='-4'], .cards-box .card:not(.hide)[data-slide='-5'] {
				transform: translate(-100px, 0px);
				opacity: 0;
			}

			.cards-box .card:not(.hide)[data-slide='0'] {
				transition: all 0.32s cubic-bezier(0.18, 0.98, 0.45, 1);
			}

	.cards-box .card:not(.hide)[data-slide='1'] *, .cards-box .card:not(.hide)[data-slide='2'] *, .cards-box .card:not(.hide)[data-slide='3'] *, .cards-box .card:not(.hide)[data-slide='4'] *, .cards-box .card:not(.hide)[data-slide='5'] * {
    	visibility: hidden;
	}


	.cards-box .cards-dots{
		position: absolute;
		top: calc(39vw + 20px);
		display: flex;
		align-items: center;
	}
	
	
	@media screen and (max-width: 48em) {
		.cards-box .cards-dots{
		position: absolute;
		top: calc(57vw + 15px);
		display: flex;
		}
	}
	
	@media screen and (max-width: 35.5em) {
		.cards-box .cards-dots{
		position: absolute;
		top: calc(56vw + 30px);
		display: flex;
		}
	}

	.cards-box .cards-dot {
		height: 10px;
		width: 10px;
		border-radius: 50%;
		background-color: #BCBCBC;
		margin: 0 5px;
		cursor: pointer;
	}

	.cards-box .cards-dot.active {
		background-color: #1A4278;
	}

	.cards-box .cards-rightarrow, .cards-box .cards-leftarrow {
    	cursor: pointer;
		padding: 5px;
		margin-top:1px;
	}
	
	.cards-box .cards-rightarrow .arrow-icon {
        height: 10px;
        width: 10px;
		margin: 0 10px;
        background-color: #BCBCBC;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
        cursor: pointer;
    }

    .cards-box .cards-leftarrow .arrow-icon {
        height: 10px;
        width: 10px;
		margin: 0 10px;
        background-color: #BCBCBC;
        clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
        cursor: pointer;
    }
/*------
	.cards-box .cards-leftarrow {
		height: 10px;
		width: 10px;
		background-color: #BCBCBC;
		margin: 0 20px;
		clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
		cursor: pointer;
	}

	.cards-box .cards-rightarrow {
		height: 10px;
		width: 10px;
		background-color: #BCBCBC;
		margin: 0 20px;
		clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
		cursor: pointer;
	}

----*/