/*-------------------------------------------------------------- 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: 170px; font-weight: bold; } .error404 h3 { font-size:70px; font-weight:bold; } .error404 h4 { font-size:60px; font-weight:300; } .error404 .wdt-button, .error404 .wdt-button.type2 { border: 0px solid transparent; display: inline-flex; align-items: stretch; margin: 0; overflow: visible; position: relative; z-index: 0; text-decoration: none; text-transform: uppercase; -webkit-transition: var(--wdt-elementor-base-transition); transition: var(--wdt-elementor-base-transition); justify-content: center; align-items: center; text-align: center; background-size: 250%; background-position: left top; font-size: var(--wdtFontSize_Ext); padding: var(--wdtPadding_Btn); font-family: var(--wdtFontTypo_Base); font-weight: var(--wdtFontWeight_Alt); line-height: 1; position: relative; } .error404 .wdt-button::before, .error404 .wdt-button.type2::before { content: '\e803'; font-family: "wdt-custom-hrhub-icon"; position: absolute; right: 21px; display: inline-block; color: var(--wdtAccentTxtColor); } .error404 .wdt-button:hover::before, .error404 .wdt-button.type2:hover::before { animation: wdt-btn-icon 0.3s ease; -webkit-animation: wdt-btn-icon 0.3s ease; } .error404 .wdt-button::after, .error404 .wdt-button.type2::after { content: ''; width: 44px; min-height: 44px; height: 44px; display: inline-block; background-color: var(--wdtSecondaryColor); margin: -15px -20px -15px 15px; border-radius: calc(var(--wdtRadius_2X) - 7px); -webkit-border-radius: calc(var(--wdtRadius_2X) - 7px); transition: var(--wdt-elementor-base-transition); -webkit-transition: var(--wdt-elementor-base-transition); } .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; } @keyframes wdt-btn-icon { 0% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } 49% { transform: translate(10px,-10px) scale(0.5); -webkit-transform: translate(10px,-10px) scale(0.5); opacity: 0; } 50% { transform: translate(-10px,10px) scale(0.5); -webkit-transform: translate(-10px,10px) scale(0.5); opacity: 0; } 100% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } } @-webkit-keyframes wdt-btn-icon { 0% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } 49% { transform: translate(10px,-10px) scale(0.5); -webkit-transform: translate(10px,-10px) scale(0.5); opacity: 0; } 50% { transform: translate(-10px,10px) scale(0.5); -webkit-transform: translate(-10px,10px) scale(0.5); opacity: 0; } 100% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } } @keyframes wdt-btn-icon-left { 0% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } 49% { transform: translate(10px,-10px) scale(0.5); -webkit-transform: translate(-10px,-10px) scale(0.5); opacity: 0; } 50% { transform: translate(-10px,10px) scale(0.5); -webkit-transform: translate(10px,10px) scale(0.5); opacity: 0; } 100% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } } @-webkit-keyframes wdt-btn-icon-left { 0% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } 49% { transform: translate(10px,-10px) scale(0.5); -webkit-transform: translate(-10px,-10px) scale(0.5); opacity: 0; } 50% { transform: translate(-10px,10px) scale(0.5); -webkit-transform: translate(10px,10px) scale(0.5); opacity: 0; } 100% { transform: translate(0px,0px); -webkit-transform: translate(0px,0px); opacity: 1; } } /*-------------------------------------------------------------- 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(--wdtAccentTxtColor); } .error404 .wdt-button { background-color: transparent; background-image: linear-gradient(140deg, var(--wdtPrimaryColor), var(--wdtQuaternaryColor), var(--wdtPrimaryColor)); } .error404 .wdt-button:hover { background-color: transparent; background-position: right bottom; } .error404 .menu-links li a { color: var(--wdtHeadAltColor); } /*-------------------------------------------------------------- Accents --------------------------------------------------------------*/ .error404 h2 { color: var(--wdtPrimaryColor); } /*-------------------------------------------------------------- Responsive --------------------------------------------------------------*/ /* 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); } }