.billow {
	&.error404 {
		overflow: hidden;

		section.error-404 {
			display: flex;
			height: 100vh;

			.first-section {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 60%;
				padding: 3rem;
				background-color: $color_dark_blue;

				.error-content {
					.title {
						font-size: 3.5rem;
						line-height: 4.5rem;
						color: $color_white;
						margin-top: 0;
					}

					p {
						font-size: 1.5rem;
						color: $color_white;
					}
				}

				.search-content {
					display: flex;

					form.search-form {
						width: 60%;
						margin: 0;
						margin-right: 2rem;
						height: fit-content;

						input {
							.search-submit {
								border-radius: 0 !important;
							}
						}
					}

					a.backhome {
						display: block;
						color: $color_white;
						border: 1px solid $color_white;
						border-radius: 2px;
						padding: 0.75rem 1.25rem;
						height: fit-content;
						width: fit-content;
						line-height: normal;
						text-decoration: none;

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
							@include transition;
							background-color: #ffffff47;

						}
					}
				}
			}

			.second-section {
				position: relative;
				width: 40%;

				img {
					height: 100%;
					width: 100%;
				}

				&:before {
					content: "";
					position: absolute;
					width: 100%;
					top: 0;
					bottom: 0;
					background-color: inherit;
					z-index: 0;
					background: rgba(255, 255, 255, 0.15);
					pointer-events: none;
				}
			}
		}

		header.site-header,
		footer.site-footer {
			display: none;
		}
	}
}

@media only screen and (max-width: 68.5rem) {
	.billow {
		&.error404 {
			section.error-404 {
				.first-section {
					.search-content {
						flex-direction: column;

						form.search-form {
							width: 100%;
							margin-right: 0;
						}

						a.backhome {
							margin-top: 2rem;
						}
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 48rem) {
	.billow {
		&.error404 {
			section.error-404 {
				flex-direction: column;

				.first-section {
					width: 100%;
				}

				.second-section {
					width: 100%;
					position: relative;

					img {
						height: auto;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 32rem) {
	.billow {
		&.error404 {
			section.error-404 {
				.first-section {
					height: 100%;

					.error-content {
						h2 {
							font-size: 2rem !important;
							line-height: 3rem !important;
						}

						p {
							font-size: 1rem;
						}
					}
				}

				.second-section {
					display: none;
				}
			}
		}
	}
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}