// .arrow-right {
//     display: block;
//     height: 40px;
//     // background-color: $color_placeholder;
// }

/*
>>================================================================================>
Arrow Animations
>>================================================================================>
*/

/*
All Resolutions
>>------------->
*/

.dotted-arrow {
	position: absolute;
}

.arrow-left-animation {
	.animation-stage {
		height: 40px;
		width: 110px;
	}

	.dotted-arrow {
		&.three {
			left: 0;
		}

		&.two {
			left: 50%;
			transform: translateX(-50%);
		}

		&.one {
			right: 0;
		}
	}
}

.arrow-up-animation {
	.animation-stage {
		height: 110px;
		width: 40px;
	}

	.dotted-arrow {
		&.one {
			top: 50%;
			transform: translateY(-50%);
		}

		&.two {
			top: 0;
		}
	}
}

/*
Desktop
>>------------->
*/

@media screen and (min-width: $breakpoint_desktop) {
	.dotted-arrow {
		height: 40px;
		width: 23px;

		&.up {
			height: 23px;
			width: 40px;
		}
	}

	// .arrow-right-animation {
	//     width: 110px;
	//     height: 40px;
	// }

	// .arrow-up-animation {
	//     width: 40px;
	//     height: 106px;
	// }
}

/*
Mobile
>>------------->
*/

@media screen and (max-width: $breakpoint_mobile) {
	.arrow-left-animation {
		width: 77px;
		height: 28px;

		.animation-stage {
			transform: scale(0.7);
		}
	}
}

/*
>>================================================================================>
How It Works
>>================================================================================>
*/

.how-it-works {
	/*
    All Resolutions
    >>------------->
    */

	/*
    Desktop
    >>------------->
    */

	@media screen and (min-width: $breakpoint_desktop) {
		.container {
			padding-top: 82px;
		}

		h2 {
			font-size: 100px;
			line-height: 103px;
			margin-bottom: 77px;
		}

		.columns {
			display: flex;
			justify-content: space-between;

			.column {
				width: 31.5%;
				display: flex;
				flex-direction: column;

				&:nth-child(1) {
					.box {
						.copy {
							margin: 0 auto;
							max-width: 340px;
						}
					}
				}
			}
		}

		.arrow-right-animation {
			margin-bottom: 23px;
			margin-left: 5px;
		}

		.box {
			height: 100%;
			padding-top: 53px;

			.animation {
				background-color: $color_placeholder;
				margin: 0 auto;
				width: 234px;
				height: 234px;
			}

			.copy {
				padding: 22px 35px 12px 35px;

				h3 {
					font-size: 30px;
					letter-spacing: 2px;
					line-height: 33px;
					margin-bottom: 15px;
				}

				p {
					font-size: 15px;
					line-height: 27px;
				}
			}
		}

		.hiw-1 {
			margin: 0 auto;
			width: 234px;
			height: 234px;

			@media screen and (max-width: 860px) {
				width: 210px;
				height: 210px;
			}
		}

		.hiw-2 {
			margin: 0 auto;
			width: 234px;
			height: 234px;

			@media screen and (max-width: 860px) {
				width: 210px;
				height: 210px;
			}
		}

		.hiw-3 {
			margin: 0 auto;
			width: 234px;
			height: 234px;

			@media screen and (max-width: 860px) {
				width: 210px;
				height: 210px;
			}
		}

		@media screen and (max-width: 860px) {
			.animation-stage {
				transform: scale(0.9);
			}
		}
	}

	/*
    Mobile
    >>------------->
    */

	@media screen and (max-width: $breakpoint_mobile) {
		h2 {
			font-size: 50px;
			line-height: 50px;
			margin-bottom: 40px;
		}

		.arrow-right-animation {
			display: none;
		}

		.box {
			padding-top: 50px;
			margin-bottom: 23px;

			.animation {
				background-color: $color_placeholder;
				margin: 0 auto;
				width: 234px;
				height: 234px;
			}

			.copy {
				padding: 13px 35px 2px 35px;

				h3 {
					font-size: 24px;
					letter-spacing: 1.6px;
					line-height: 33px;
					margin-bottom: 4px;
				}

				p {
					font-size: 14px;
					line-height: 25px;
				}
			}
		}

		.hiw-1 {
			margin: 0 auto;
			width: 234px;
			height: 234px;
		}

		.hiw-2 {
			margin: 0 auto;
			width: 234px;
			height: 234px;
		}

		.hiw-3 {
			margin: 0 auto;
			width: 234px;
			height: 234px;
		}
	}
}

/*
>>================================================================================>
Logo Carousel
>>================================================================================>
*/

.logo-carousel {
	/*
    All Resolutions
    >>------------->
    */

	@keyframes slideshow {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-#{170px * 5});
		}
	}

	/*
    Desktop
    >>------------->
    */

	@media screen and (min-width: $breakpoint_desktop) {
		.container {
			max-width: 1500px;
			padding-top: 110px;
			padding-bottom: 35px;
		}

		.logos {
			padding-top: 20px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.logo {
				width: 20%;
				display: flex;
				justify-content: center;
				align-items: center;

				@media screen and (max-width: 1023px) {
					picture {
						transform: scale(0.8);
					}
				}

				&:nth-child(2) {
					picture {
						margin-left: -18px;
					}
				}

				&:nth-child(3) {
					picture {
						margin-left: -52px;
					}
				}

				&:nth-child(4) {
					picture {
						margin-left: -10px;
					}
				}

				&.mobile-only {
					display: none;
				}
			}
		}
	}

	/*
    Mobile
    >>------------->
    */

	@media screen and (max-width: $breakpoint_mobile) {
		.container {
			padding-bottom: 80px;
		}

		.logos {
			padding-top: 10px;
			display: flex;
			animation: slideshow 12s linear infinite;

			.logo {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 170px;
				height: 50px;
				flex-shrink: 0;
				img {
					margin: 0 auto;
					width: 70%;
				}
			}
		}
	}
}
