/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 31 2025 | 01:00:12 */
@import 'vars.scss';
@import 'media_queries.scss';


//Global
@mixin form_border_radius{ border-radius: 100px!important; }
@mixin page_settings{
	background-color: $evoke_white!important;
	background-image: url('/wp-content/uploads/404_bg_35.png');
}



//Search Button
$search_button_width: 130px;
@mixin search_button_settings{
	width: $search_button_width;
	background-color: $evoke_purple!important;
	color: $evoke_white!important;
	font-size: 14px!important;
	line-height: 1.0em!important;
	transition: .3s ease-out all;
	@include bold;
}
@mixin search_button_hover_settings{
	background-color: $evoke_tan!important;
	color: $evoke_purple!important;
}

//Input
@mixin input_settings{
	color: $evoke_black!important;
	background-color: $evoke_tan!important;
	border: none!important;
	font-size: 14px!important;
	letter-spacing: 1px;
}

//Title
@mixin title_settings{
	@include light;
	font-size: 18vw;
	line-height: .8em;
	margin-bottom: 30px;
	color: $evoke_tan!important;
}

//Content
$content_color: $evoke_black;

//Home Button
$home_button_width: auto;
@mixin home_button_settings{
	width: $home_button_width;
	background-color: $evoke_tan!important;
	color: $evoke_purple!important;
	font-size: 14px!important;
	line-height: 1.0em!important;
	transition: .3s ease-out all;
	@include bold;
	display: inline-block;
}
@mixin home_button_hover_settings{
	color: $evoke_tan!important;
	background-color: $evoke_purple!important;
}

//Placeholders
@mixin placeholder{
	::placeholder {color: $evoke_black!important; opacity: 1!important;	}
	:-ms-input-placeholder { color: $evoke_black!important; }
	::-ms-input-placeholder { color: $evoke_black!important; }

	::selection{
		background-color: $evoke_pink!important;
		color: $evoke_white!important;
	}
}




.error404{
	opacity: 0;
	transition: .45s ease-out opacity;
		&.animate_page{
			opacity: 1;
		}
		header#header{
			border-bottom: none!important;
				#header_main{
					border-bottom: none!important;
				}
				.main_menu,
				.header_bg,
				#header_meta{
					display: none!important;
				}
				span.logo{
					padding: 25px 30px 25px 0px;
				}
		}
		#footer-page,
		#socket,
		#scroll-top-link{
			display: none!important;
		}

		#main{
			@include page_settings;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none!important;
			padding-top: 0!important;
				.main_color{
					background-color: transparent!important;
					border-top: none!important;
					width: 100%;
					margin: 0 auto;
					display: flex;
					justify-content: center;
						.entry-content-wrapper{
							text-align: center;
						}
						.entry-content{
							display: none!important;
						}
				}
		}
		.error404_content{
			text-align: center;
			margin-bottom: 75px;
				h1{
					@include title_settings;
				}
				h2{
					font-size: 24px!important;
					line-height: 1em!important;
					text-transform: none!important;
					color: $content_color!important;
					@include regular;
				}
				p{
					font-size: 18px!important;
					line-height: 1.5em!important;
					color: $content_color!important;
				}
		}
		.error404_form{
			display: flex;
			align-items: center;
			justify-content: space-between;
			max-width: 900px;
			margin: 0 auto 60px;
				form{
					width: calc(100% - (#{$search_button_width} + 15px));
					padding-bottom: 0!important;
						> div{
							max-width: 100%!important;
						}
						#searchsubmit{
							background-color: transparent!important;
							border-color: transparent!important;
							color: $evoke_purple;
							@include form_border_radius;
						}
						input[type="text"]{
							@include form_border_radius;
							@include input_settings;
							padding-left: 20px!important;
							line-height: 1.0em!important;
						}
				}
				button{
					@include search_button_settings;
					@include form_border_radius;
					cursor: pointer;
					box-shadow: none!important;
					border: none!important;
					padding: 11px;
					transition: .3s ease-out all;
						&:hover{
							@include search_button_hover_settings;
						}
				}
		}
		a.return_home{
			@include home_button_settings;
			@include form_border_radius;
			cursor: pointer;
			box-shadow: none!important;
			border: none!important;
			padding: 15px 25px!important;
			transition: .3s ease-out all;
			min-width: 225px;
			margin: 0 auto;
				&:hover{
					@include home_button_hover_settings;
				}
		}
}

.error404_recommendation{
	text-align: center;
	display: none!important;
		> p{
			strong{
				font-size: 16px!important;
				color: $evoke_black!important;
			}
		}
		ul{
			margin: 0!important;
		}
		li{
			display: inline-block;
			list-style: none;
			width: auto;
			background-color: $evoke_purple!important;
			color: $evoke_white!important;
			padding: 10px;
			border-radius: 100px;
			margin: 5px;
		}
}

@include placeholder;

@include maxmedia($sm) {
	.error404{
		header#header{
			position: fixed!important;
		}
		.error404_content{
			h1{
				font-size: 25vw!important;
			}
		}
	}
}

@include maxmedia(500px) {
	.error404{
		.error404_form{
			flex-wrap: wrap!important;
				form#searchform,
				.search_trigger{
					width: 100%!important;
				}
				form#searchform{
					margin-bottom: 20px!important;
				}
		}
	}
}