/*--------------------------------------------------------------
    404 Error / Not-found Page
--------------------------------------------------------------*/
.error404 .type2 .center-content .error-box-inner img {
	max-width: 600px; display: block; margin: auto; 
	margin-bottom: clamp(1.25rem, 1rem + 1.25vw, 2.5rem); /*40px - 20px*/
	animation: wdt-404-page-img-animation 3s linear infinite;
	-webkit-animation: wdt-404-page-img-animation 3s linear infinite; 
}

@keyframes wdt-404-page-img-animation {
	0% { transform: translateY(0); -webkit-transform: translateY(0); }
	50% { transform: translateY(10px); -webkit-transform: translateY(10px); }
	100% { transform: translateY(0); -webkit-transform: translateY(0); }
}

@-webkit-keyframes wdt-404-page-img-animation {
	0% { transform: translateY(0); -webkit-transform: translateY(0); }
	50% { transform: translateY(10px); -webkit-transform: translateY(10px); }
	100% { transform: translateY(0); -webkit-transform: translateY(0); }
}

body.error404 div.wrapper:before { 
	content: ""; 
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #323232;
	opacity: 0;
	width: 100%;
	height: 100%;
}
.error404, .error404 > .wrapper { width:100%; height:100%; }
.error404 > .wrapper { display: flex; padding: 35px 0 50px; }

.center-content-wrapper { display:table; width:100%; height:100%; }
.center-content-wrapper .center-content { display:table-cell; width:100%; height:100%; vertical-align:middle; }

.error404 h1, .error404 h2, .error404 h3, .error404 h4, .error404 h5, .error404 h6 { line-height: 1em; }
.error404 h2 {
	font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem);
	font-weight: var(--wdtFontWeight_H1);
	display: inline-block;
	line-height: 1.1;
	position: relative;
	margin-bottom: 20px;
	margin-top: 0;
}
.error404 h3 { font-size:70px; font-weight:bold; }
.error404 h4 { 
	font-size: clamp(2.5rem, 2rem + 2.5vw, 5rem); /* Min-40 & Max-80 */
	font-weight: calc(var(--wdtFontWeight_Alt) + 100); 
	text-transform: uppercase; 
	margin: 0; 
	line-height: var(--wdtLineHeight_Alt);
 }
.error404 .wdt-button,
.error404 .wdt-button.type2 {
	font-size: var(--wdtFontSize_Base);
	padding: var(--wdtPadding_Btn);
	display: inline-block;
	margin-top: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem); /*30px - 20px*/
	margin-bottom: 0;
}
.error404 .wdt-dark-bg .wdt-button:hover { background-color: var(--wdtSecondaryColor, var(--wdtDarkSecondaryColor)); 
	color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor)); }
.error404 .type2 #wdt-style-picker ul li::before, .error404 #wdt-style-picker ul li:before { content:none; }
.error404 .type2 #wdt-style-picker h3, .error404 #wdt-style-picker h3 { letter-spacing:0; text-transform:capitalize; }
.error404 #wdt-style-picker h2 { top:0; }

.error-box-inner * { text-align: center; }

.error404 .menu-links { margin:40px 0; }
.error404 .menu-links li { display:inline-block; text-transform:uppercase; font-size:16px; padding:0; margin:0 2px 5px; }
.error404 .menu-links li a { padding:7px 20px; display:inline-block; }

.error404 #searchform .wdt-search-icon { display:none; }
.error404 #searchform { display: inline-block; margin: 0 auto; position: relative; width: 60%; }
.error404 #searchform input[type="text"], .error404 #searchform input[type="submit"] { height:52px; }
 .error404 #searchform input[type="submit"] { border-radius: 0; padding: 13px 20px 13px; position: absolute; right: 0; top: 0; margin-top:0; }

.error404 .container { height:100%; text-align:center; }
.error404 .type2 p { 
	font-size:var(--wdtFontSize_Base); max-width: 650px; margin-inline: auto; 
	color: var(--wdtBodyTxtColor, var(--wdtDarkBodyTxtColor)); 
	margin-top: clamp(0.625rem, 0.375rem + 1.25vw, 1.875rem); /*30px - 10px*/
	margin-bottom: 0; 
 }


/*--------------------------------------------------------------
 Default Colors
--------------------------------------------------------------*/

.error404 .menu-links li:hover a { background: var(--wdtHeadAltColor, var(--wdtDarkHeadAltColor)); }
.error404 .wdt-dark-bg { background-color: var(--wdtTertiaryColor, var(--wdtDarkTertiaryColor)); }
/* body.error404 div.wrapper.wdt-dark-bg { background-color: var(--wdtTertiaryColor, var(--wdtDarkTertiaryColor)); } */
.error404 .menu-links li a { background:rgba(var(--wdtHeadAltColorRgb, var(--wdtDarkHeadAltColorRgb)),0.05); }

.error404 .wdt-button, .error404 .wdt-button.type2, .error404 .menu-links li:hover a { color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor)); }

.error404 .wdt-button { 
	color: var(--wdtTertiaryColor, var(--wdtDarkTertiaryColor)); background-color: transparent; 
	background-image: linear-gradient(-90deg, var(--wdtQuaternaryColor, var(--wdtDarkQuaternaryColor)) 51%, 
                                              var(--wdtTertiaryColor, var(--wdtDarkTertiaryColor)) 0%, 
                                              var(--wdtTertiaryColor, var(--wdtDarkTertiaryColor)) 100%);
	background-size: 250% auto; background-position: 100% 100%;
}
.error404 .wdt-button:hover,
.error404 .wdt-button:focus { 
	background-color: transparent;
	color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor));
	background-position: 0 100%;
}

.error404 .menu-links li a { color: var(--wdtHeadAltColor, var(--wdtDarkHeadAltColor)); }



/*--------------------------------------------------------------
 Accents
--------------------------------------------------------------*/

.error404 h2 { color: var(--wdtPrimaryColor, var(--wdtDarkPrimaryColor)); }
.error404 .wdt-dark-bg h2 { color: var(--wdtAccentTxtColor, var(--wdtDarkAccentTxtColor)); }



/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media screen and (max-width: 1280px){
	.error404 .type2 .center-content .error-box-inner img{
		max-width: 500px;
	}
}

@media screen and (max-width: 1024px){
	.error404 .type2 .center-content .error-box-inner img{
		max-width: 450px;
	}
}

@media screen and (max-width: 767px){
	.error404 .type2 .center-content .error-box-inner img{
		max-width: 400px;
	}
}

@media screen and (max-width: 479px){
	.error404 .type2 .center-content .error-box-inner img{
		max-width: 260px;
	}
}