/*-------------------------------------------------------------- 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 { padding: var(--wdtPadding_Btn); display: inline-block; letter-spacing: 0; } .error404 .wdt-button{ background-image: linear-gradient(45deg, var(--wdtPrimaryColor) 50%, var(--wdtSecondaryColor) 80%); box-shadow: inset rgba(var(--wdtBodyBGColorRgb),1) 0 0 0 0, inset rgba(var(--wdtBodyBGColorRgb),1) 0 0 0 0; -webkit-box-shadow: inset rgba(var(--wdtBodyBGColorRgb),1) 0 0 0 0, inset rgba(var(--wdtBodyBGColorRgb),1) 0 0 0 0; border-width: 1px 0; border-style: solid; border-color: transparent; position: relative; } .error404 .wdt-button:hover{ box-shadow: inset rgba(var(--wdtBodyBGColorRgb),1) 0 2em 0 0, inset rgba(var(--wdtBodyBGColorRgb),1) 0 -2em 0 0; -webkit-box-shadow: inset rgba(var(--wdtBodyBGColorRgb),1) 0 2em 0 0, inset rgba(var(--wdtBodyBGColorRgb),1) 0 -2em 0 0; border-color: var(--wdtHeadAltColor); color: var(--wdtHeadAltColor); } .error404 .wdt-button:before, .error404 .wdt-button:after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 15 52' style='enable-background:new 0 0 15 52;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M7,22.8v25h1v-25H7z'/%3E%3Crect x='4' y='12.8' width='7' height='7'/%3E%3Cpath d='M11,10.8H4v-7h7V10.8z M5,9.8h5v-5H5V9.8z'/%3E%3C/g%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 15 52' style='enable-background:new 0 0 15 52;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M7,22.8v25h1v-25H7z'/%3E%3Crect x='4' y='12.8' width='7' height='7'/%3E%3Cpath d='M11,10.8H4v-7h7V10.8z M5,9.8h5v-5H5V9.8z'/%3E%3C/g%3E%3C/svg%3E%0A"); mask-repeat: no-repeat; mask-size: contain; mask-position: center; background-color: var(--wdtAccentTxtColor); transition: var(--wdtBaseTransition); -webkit-transition: var(--wdtBaseTransition); } .error404 .wdt-button:after{ left: unset; right: 0; } .error404 .wdt-button:hover:before, .error404 .wdt-button:hover:after{ background-color: var(--wdtHeadAltColor); } .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; } /* Unit_Test */ .error404 .type8 { color: var(--wdtBodyTxtColor); font-size:16px; line-height:30px; } .error404 .type8 h3 { z-index: 1; position: relative; text-transform: uppercase; margin-bottom: 0; font-weight: 100; font-size: 100px; } .error404 .type8 h2 { font-size: clamp(7.5rem, 5.9135rem + 7.0513vw, 14.375rem); /* 120px to 230px */ line-height: 1; margin-bottom: 0; position: relative; top: -20px; margin: 0 0 clamp(0rem, -0.0721rem + 0.3205vw, 0.3125rem); /* 0px to 5px */ } .error404 .type8 h4 { font-size: clamp(1.875rem, 1.4423rem + 1.9231vw, 3.75rem); /* 30px to 60px */ text-transform:uppercase; font-weight:var(--wdtFontWeight_H4); } .error404 .type8 .error-text { font-size:20px; color: var(--wdtBodyTxtColor); font-style:normal; line-height:40px; } .error404 .type8 .wdt-go-back { padding:14px 20px; color: var(--wdtHeadAltColor); font-size:20px; display:inline-block; } .error404 .type8 .wdt-go-back i { color: var(--wdtAccentTxtColor); margin-right:5px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear;} .error404 .type8.ad .wdt-go-back:hover { background: var(--wdtBodyBGColor); color: var(--wdtHeadAltColor); } .error404 .type8 h6 { font-family: var(--wdtFontTypo_Ext); font-size: var(--wdtFontSize_Ext); font-weight: var(--wdtFontWeight_Ext); display: inline-flex; align-items: center; color: var(--wdtPrimaryColor); letter-spacing: var(--wdtLetterSpacing_1X); margin-bottom: clamp(0.9375rem, 0.7933rem + 0.641vw, 1.5625rem); /* 15px to 25px */ } .error404 .type8 h6:before, .error404 .type8 h6:after { content: ""; position: relative; display: inline-block; width: 50px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: cover; mask-repeat: no-repeat; mask-position: center; mask-size: cover; -webkit-transition: var(--wdt-Ad-Transition); transition: var(--wdt-Ad-Transition); } .error404 .type8 h6:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .wdt-left-dot-icon%7Bfill:none;stroke:currentColor;%7D %3C/style%3E%3Cg%3E%3Cpath d='M42.9,51.1h54.3v-2.2H42.9V51.1z'/%3E%3Crect x='21.2' y='42.4' width='15.2' height='15.2'/%3E%3Crect x='2.8' y='43.5' class='wdt-left-dot-icon' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .wdt-left-dot-icon%7Bfill:none;stroke:currentColor;%7D %3C/style%3E%3Cg%3E%3Cpath d='M42.9,51.1h54.3v-2.2H42.9V51.1z'/%3E%3Crect x='21.2' y='42.4' width='15.2' height='15.2'/%3E%3Crect x='2.8' y='43.5' class='wdt-left-dot-icon' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E"); margin-right: 10px; } .error404 .type8 h6:after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .wdt-right-dot-icon%7Bfill:none;stroke:currentColor;%7D %3C/style%3E%3Cg%3E%3Cpath d='M57.1,48.9H2.8v2.2h54.3V48.9z'/%3E%3Crect x='63.6' y='42.4' width='15.2' height='15.2'/%3E%3Crect x='84.2' y='43.5' class='wdt-right-dot-icon' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .wdt-right-dot-icon%7Bfill:none;stroke:currentColor;%7D %3C/style%3E%3Cg%3E%3Cpath d='M57.1,48.9H2.8v2.2h54.3V48.9z'/%3E%3Crect x='63.6' y='42.4' width='15.2' height='15.2'/%3E%3Crect x='84.2' y='43.5' class='wdt-right-dot-icon' width='13' height='13'/%3E%3C/g%3E%3C/svg%3E"); margin-left: 10px; } .error404 .type8 .center-content > p { width: 100%; max-width: 744px; margin: 0 auto clamp(1.25rem, 0.8173rem + 1.9231vw, 3.125rem); /* 20px to 50px */ } .type8.wdt-dark-bg h4 { margin-bottom: clamp(1rem, 0.8846rem + 0.5128vw, 1.5rem); /* 16px to 24px */ color: var(--wdtHeadAltColor); } body.error404 div.wrapper.type8 { background-color: var(--wdtBodyBGColor); } /*-------------------------------------------------------------- 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: var(--wdtPrimaryColor); } .error404 .wdt-button:hover { background-color: var(--wdtSecondaryColor); } .error404 .menu-links li a { color: var(--wdtHeadAltColor); } /*-------------------------------------------------------------- Accents --------------------------------------------------------------*/ .error404 h2 { color: var(--wdtHeadAltColor); } /*-------------------------------------------------------------- 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); } }