#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;
	}


	.ct-search-input {
		input[type="search"] {
			height: 100px;
			@include action-fields((
				type: modern,
				background: false,
				padding-left: 25px,
				padding-right: 25px,
				border-color: rgba(255, 255, 255, 0.2),
			));

			font-size: 35px;
			font-weight: 500;
			color: #fff !important;
			letter-spacing: 0.03em;
			border-radius: 0;

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

		.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.15);
					}
				}
			}

			&:focus {
				outline: none;
			}
		}
	}


	// 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) }
}