/*--------------------------------------------------------------
    404 Error / Not-found Page
--------------------------------------------------------------*/

	.error404, .error404 > .wrapper { width:100%; height:100%; }
	.error404 > .wrapper { display: flex; padding: 50px 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: 170px; font-weight: bold; }
	.error404 h3 { font-size:70px; font-weight:bold; }
	.error404 h4 { font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3.75rem); /* Min-36 & Max-60 */ font-weight:var(--wdtFontWeight_H4); }
	.error404 .wdt-button, .error404 .wdt-button.type2 { padding: var(--wdtPadding_Btn); display: inline-block; letter-spacing: 0; margin: 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; }



	/*----*****---- << Type 2 >> ----*****----*/
	.error404 .type2 h2 { 
		font-size:200px; font-weight:var(var(--wdtFontWeight_H2)); display:inline-block; line-height: 1; 
		top:0; position:relative; margin-bottom: 20px; margin-top: 0; }
	.error404 .type2 h3 { font-size:100px; font-weight:300; letter-spacing:20px; text-transform:uppercase; line-height: 90px; }
	.error404 .type2 h4 { 
		text-transform: capitalize; border-bottom: 0 solid var(--wdtBorderColor); padding-bottom: 0; margin: 0; width:100%; }

	.error404 .type2 { font-size:16px; color: var(--wdtBodyTxtColor); }
	.error404 .type2 p { font-size: var(--wdtFontSize_Base); }

	.error404 .type2 a.wdt-back { color: var(--wdtAccentTxtColor); display: inline-block; padding: 15px 50px; font-size:16px; letter-spacing:1px; text-transform:uppercase; border-radius:25px; }

	/* Accents */
	.error404 .type2 a.wdt-back { background-color: var(--wdtPrimaryColor); }
	.error404 .type2 h2 { color: var(--wdtPrimaryColor); }
	.error404 .type2.wdt-dark-bg h2 { color: var(--wdtPrimaryColor); } 

	.error404 .type2 a.wdt-back:hover { background-color: var(--wdtSecondaryColor); }

	/* custom css */

	.wrapper.type2 { position: relative; }

	.wrapper.type2 .container { position: static; }

	.wrapper.type2 .center-content-wrapper { display: flex }

	.error404 .type2 .center-content-wrapper .center-content { display: inline-flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-end; }

	.error404 .type2 .center-content-wrapper .center-content .error-box.square  .error-box-inner {
		width: fit-content; margin: 0 0 0 auto; }

	.error404 .type2 .center-content-wrapper .center-content .wdt-error-image img {
		position: absolute; top: 0; bottom: 0; left: 0; right: 0; 
		width: 100%; height: 100vh; pointer-events: none; padding: 30px 0 50px 0; }

	.error404 .type2 .center-content-wrapper .center-content .wdt-error-text { text-align: left; align-content: center; height: 50vh; z-index: 1; }

	.error404 .type2 .center-content-wrapper .center-content .wdt-error-text p { 
		margin: clamp(0.625rem, 0.5rem + 0.625vw, 1.25rem) 0 clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem) 0; max-width: 600px; }

	.error404 .type2.wdt-dark-bg .center-content-wrapper .center-content .wdt-error-text p { color: var(--wdtAccentTxtColor); } 


	.error404 .type2 .wdt-button {
		position: relative;
		overflow: hidden;
	}

	.error404 .type2 .wdt-button:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: auto;
		top: 50%;
		width: auto;
		z-index: 0;
		background-color: currentColor;
		color: rgb(var(--wdtAccentTxtColorRgb), 0.05);
		-webkit-transition: inherit;
		transition: inherit;
		-webkit-transform: rotate(45deg) scale(1.25) translate(0,-50%);
		transform: rotate(45deg) scale(1.25) translate(0,-50%);
		-webkit-transform-origin: center top;
		transform-origin: center top;
	}

	.error404 .type2 .wdt-button:hover:after,
	.error404 .type2 .wdt-button:focus:after {
		height: auto;
    	padding-top: 100%;
	}


/*--------------------------------------------------------------
    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 .menu-links li:hover a { color: var(--wdtAccentTxtColor); }

	.error404 .wdt-button { background-color: var(--wdtPrimaryColor); color: var(--wdtLinkColor); }
	.error404 .wdt-button:hover { background-color: var(--wdtSecondaryColor); color: var(--wdtAccentTxtColor); }
	.error404 .wdt-dark-bg .wdt-button:hover { background-color: var(--wdtAccentTxtColor); color: var(--wdtSecondaryColor); }
	.error404 .menu-links li a { color: var(--wdtHeadAltColor); }



/*--------------------------------------------------------------
    Accents
--------------------------------------------------------------*/

	.error404 h2 { color: var(--wdtPrimaryColor); }



/*--------------------------------------------------------------
 Responsive
--------------------------------------------------------------*/


/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/


    @media only screen and (min-width:768px) and (max-width:1024px) {
		.error404 .type2 h2 { font-size: 150px; }
		.error404 .type2 h3 { font-size: 90px; }
		.error404 .type2 h4 { font-size:33px; }
	}

    @media only screen and (min-width: 480px) and (max-width: 767px) {
		/* .error404 .container { width: 100%; padding: 0 10%; } */
		.error404 .type2 h4 { width: 100%; }
		.error404 .type2 h3 { font-size: 80px; letter-spacing: 0px; }
		.error404 .type2 h2 { line-height: 120px; font-size: 120px; }
	}

    @media only screen and (max-width: 479px) {
		/* .error404 .container { width: 100%; padding: 0 10%; } */
		.error404 .type2 h4 { width: 100%; }
		.error404 h1, .error404 h2, .error404 h3, .error404 h4, .error404 h5, .error404 h6 { line-height: normal; }
		.error404 .type2 h3 { font-size:70px; letter-spacing:0; }
		.error404 .type2 h2 { line-height: 120px; font-size: 120px; }
	}

	@media only screen and (min-width: 320px) and (max-width: 479px) {
		.error404 .type2 h3 { font-size:60px; }
		.error404 .type2 h2 { font-size:100px; top:0; line-height: 1; }
	}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 319px) {
		.error404 .type2 h3 { font-size:30px; margin-top:20px; }
		.error404 .type2 h2 { font-size:80px; line-height:normal; top:-20px; }
		.error404 .type2 h4 { text-transform:capitalize; font-size:19px; }
	}


/* Common Styles for the devices below 479px width */
/* @media only screen and (max-width: 479px) {

	.error404 h2 { font-size: var(--wdtFontSize_H1); }
	.error404 h3 { font-size: var(--wdtFontSize_H2); }
	.error404 h4 { font-size: var(--wdtFontSize_H3); }

} */