/*--------------------------------------------------------------
    404 Error / Not-found Page
--------------------------------------------------------------*/

	.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(2rem, 1.5962rem + 1.7949vw, 3.75rem); font-weight: var(--wdtFontWeight_H2); display: block; line-height: var(--wdtLineHeight_H2); position: relative; margin: 0 auto 20px; max-width: 650px; color: var(--wdtHeadAltColor); }
	.error404 h3 { font-size:70px; font-weight:bold; }
	.error404 h4 { font-size:60px; font-weight:300; }
	.error404 .wdt-button, .error404 .wdt-button.type2 { padding: 15px 35px; display: inline-block; letter-spacing: 0; }
	.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; }



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

	.error404 .wdt-dark-bg, .error404 .menu-links li:hover a { background: var(--wdtHeadAltColor); }
	.error404 .menu-links li a { background:rgba(var(--wdtHeadAltColorRgb),0.05); }

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

	.error404 .wdt-button { background-color: var(--wdtPrimaryColor); }
	.error404 .wdt-button:hover { background-color: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); }

	.error404 .wdt-button { position: relative; overflow: hidden; z-index: 1; }
	.error404 .wdt-button:before, .error404 .wdt-button:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 110%; bottom: 0; margin: auto; z-index: -1; background-color: var(--wdtSecondaryColor); }
	.error404 .wdt-button:before{ width: 135%; -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); transform: translate3d(-100%, 0, 0); }
	.error404 .wdt-button:hover:before{ transform: translate3d(0,0,0); transition: transform 0.3s linear; }
	.error404 .wdt-button:after{ width: 105%; transform: translate3d(100%, 0, 0); transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); }
	.error404 .wdt-button:hover:after{ transform: translate3d(0,0,0); transition: transform 0.01s 0.3s cubic-bezier(0.7, 0, 0.2, 1); }

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

	.error404 .error-box-inner .error-image { max-width: 565px; width: 100%; }



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



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

/* Common Styles for the devices below 479px width */
@media only screen and (max-width: 479px) {

	.error404 h3 { font-size: var(--wdtFontSize_H2); }
	.error404 h4 { font-size: var(--wdtFontSize_H3); }
	.error404 .error-box-inner .error-image { max-width: 320px; }

}
/* Common Styles for the devices above 480px width */

#game-div {
	width: 100%;
	display: block;
	border-radius: 25px;
	position: relative;
	padding-bottom: 30px;
}

#ball {
	width: 120px;
	height: 120px;
	bottom: 0;
	left: 0 !important;
	cursor: pointer;
	z-index: 10;
	position: relative;
}

#innerBall {
	bottom: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

#ballShadow {
	background: var(--wdtSecondaryColor);
	position: absolute;
	transform: translate(0,0);
	border-radius: 100%;
	height: 10px;
	bottom: -30px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: .1;
}

.click-the-ball {
	font-family: var(--wdtFontTypo_Alt);
	font-weight: var(--wdtFontWeight_Alt);
	text-transform: capitalize;
	font-size: var(--wdtFontSize_Ext);
	line-height: var(--wdtLineHeight_Alt);
	position: relative;
	margin: 40px auto 20px;
	z-index: 10;
	color: var(--wdtHeadAltColor);
	font-style: italic;
}
.error404 .error-image-ball{
	margin-bottom: calc(clamp(1.25rem, 1.0337rem + 0.9615vw, 2.1875rem)* -1);
	animation: rotate 5s infinite linear;
	-webkit-animation: rotate 5s infinite linear;
}