#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: 65px;
			padding: 0 30px;
			color: #fff;
			font-size: 20px;

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

			&:focus {
				outline: none;
			}
		}

		.search-submit {
			i {
				color: #fff;
				width: 65px;
				height: 65px;
				padding-right: 15px;

				svg {
					width: 20px;
					height: 20px;
				}
			}

			&:focus {
				outline: none;
			}
		}
	}

	// form animation
	.ct-modal-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) }
}