#search-modal {

	form {
		width: 100%;

		@include media-breakpoint-down (sm) {
			width: 85%;
		}

		@include media-breakpoint-only (md) {
			width: 90%;
		}

		@include media-breakpoint-up (lg) {
			width: 80%;
			max-width: 800px;
		}
		margin-left: auto;
		margin-right: auto;

		input[type="search"] {
			height: 100px;
			padding: 0 25px;
			color: #fff;
			font-size: 35px;
			letter-spacing: 0.02em;
			border: 0;

			@include input-placeholder {
				color: #fff;
			}

			&:focus {
				outline: none;
			}
		}

		.search-submit {
			top: calc(50% - 28px);
			right: 25px;

			i {
				color: #fff;
				width: 56px;
				height: 56px;
				border-radius: 100%;
				background: var(--paletteColor1);

				svg {
					width: 16px;
					height: 16px;
					transition: transform 0.2s ease;
				}

				&:hover {
					svg {
						transform: scale(1.1);
					}
				}
			}

			&:focus {
				outline: none;
			}
		}

		&:focus-within {
			.ct-search-input:after {
				width: 100%;
			}
		}
	}

	.ct-search-input {
		margin-bottom: 10px;

		&:before, &:after {
			position: absolute;
			content: '';
			left: 0;
			bottom: 0;
			height: 2px;
			border-radius: 3px;
		}

		&:before {
			width: 100%;
			opacity: 0.2;
			background: #fff;
		}

		&:after {
			width: 0;
			background: var(--paletteColor1);
			transition: width 0.4s ease 0.2s;
		}
	}

	// form animation
	.ct-bag-container {
		&.ct-fade-in form {
			animation-name: move-in;
		}

		&.ct-fade-out form {
			animation-name: move-out;
		}

		&.ct-animated form {
			animation-duration: 0.3s;
			animation-fill-mode: both;
		}
	}
}

@keyframes move-in {
	0% { transform: translate3d(0, -40px, 0) }
	100% { transform: translate3d(0, 0, 0) }
}

@keyframes move-out {
	0% { transform: translate3d(0, 0, 0) }
	100% { transform: translate3d(0, 40px, 0) }
}