/*-------------------------------------------------------------- 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: 15px 35px; display: inline-block; letter-spacing: var(--wdtAdLetterSpaceing); } .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 4 >> ----*****----*/ .error404 .type4 { text-align:center; } .error404 .type4 .error-box { padding:50px; border-radius: 100px 0 100px 0; display: inline-flex; align-items: center; justify-content: center; width:400px; height:400px; box-sizing:border-box; margin-top:40px; margin-bottom:40px; } .error404 .type4 .error-box h2, .error404 .type4 .error-box h3, .error404 .type4 .error-box h4 { color: var(--wdtAccentTxtColor); text-transform: capitalize; } .error404 .type4 .error-box h2 { font-size:120px; font-family: var(--wdtFontTypo_Alt); color: var(--wdtAccentTxtColor); margin-bottom:0; position:relative; top:-18px; } .error404 .type4 .error-box h3 { font-size:54px; } .error404 .type4 .error-box h4 { font-size:24px; margin-bottom: 0; } .error-box-inner > *:not(:last-child) { margin: 0 0 clamp(1.25rem, 1.1058rem + 0.641vw, 1.875rem); } .error-box-inner > *:last-child { margin: 0; } .error404 .type4 .error-text { font-size:24px; color: var(--wdtBodyTxtColor); line-height:36px; font-weight:300; } .error404 .type4 #searchform input[type="text"], .error404 .type4 .error-text { font-family: var(--wdtFontTypo_Base); } .error404 .type4 #searchform { display: inline-block; min-width:475px; float:none; width:auto; padding:0; } .error404 .type4 #searchform { position:relative; float:none; width:auto; } .error404 .type4 #searchform input[type="text"] { width:100%; background:#fafafa; border:1px solid var(--wdtBorderColor); border-radius:3px 4px 4px 3px; font-size:18px; color: var(--wdtHeadAltColor); padding:19px 12px 18px; margin-right:0; height:60px; } .error404 .type4 #searchform input[type="submit"] { position:absolute; right:0; top:0; margin-top:0; border-radius:0 3px 3px 0; height: 60px; padding: 16px 30px 17px; text-transform:capitalize; font-size:20px; font-weight:normal; } /*----*****---- << Square >> ----*****----*/ .error404 .type4 .error-box.square { border-radius:0; margin-bottom: 80px; position: relative; } .error404 .type4 .error-box.square:before { content: ""; height: 100%; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%; z-index: 0; transform:rotate(45deg); border: 1px solid var(--wdtBorderColor); mix-blend-mode: multiply; } .error404 .type4 .error-box.square .error-box-inner { position: relative; z-index: 1; } .error404 .type4 .error-box.square h2 { font-family: var(--wdtFontTypo_Alt); line-height:110px; } .error404 .type4 .white .error-text { color: var(--wdtAccentTxtColor); } /* Accents */ .error404 .type4 .error-box:before { background-color: var(--wdtPrimaryColor); } /*-------------------------------------------------------------- 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); color: var(--wdtSecondaryColor); position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--wdtSecondaryColor); } .error404 .wdt-button:focus, .error404 .wdt-button:hover { background-color: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); } .error404 .menu-links li a { color: var(--wdtHeadAltColor); } .error404 .wdt-button:before { content: ""; left: -10%; right: -10%; top: -2px; bottom: -2px; width: 120%; position: absolute; display: block !important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: bottom right; transform-origin: bottom right; -webkit-clip-path: polygon(91% 0, 100% 50%, 91% 100%, 0% 100%, 8% 50%, 0% 0%); z-index: -1; clip-path: polygon(91% 0, 100% 50%, 91% 100%, 0% 100%, 8% 50%, 0% 0%); background-color: var(--wdtSecondaryColor); -webkit-transition: transform .35s ease-out; transition: transform .35s ease-out; } .error404 .wdt-button:focus:before, .error404 .wdt-button:hover:before { left: -10%; right: -10%; top: -2px; bottom: -2px; width: 120%; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: bottom left; transform-origin: bottom left; } /*-------------------------------------------------------------- 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); } } /*-------------------------------------------------------------- Responsive --------------------------------------------------------------*/ /* Note: Design for a width of 960px */ @media only screen and (min-width:1025px) and (max-width:1280px) { /*** 404 ***/ .error404 .type3 #searchform { width:100%; } .error404 .type5 .wpb_wrapper { width:100%; } .error404 .type5 h2 { font-size:210px; } .error404 .type5 h3 { font-size:50px; } .error404 .type5 #searchform { width:100%; } .error404 .type5 h2 { text-shadow:0 13px 0 var(--wdtHeadAltColor); } .error404 .type5 .wpb_column:first-child .wpb_wrapper { width: 70%; } .error404 .type7 .error-content, .error404 .type7 .wpb_wrapper > .alignright { width:100%; } } /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:1024px) { /*** 404 ***/ /* .error404 .type2 h2 { font-size: 190px; } .error404 .type2 h3 { font-size: 90px; } .error404 .type2 h4 { font-size:33px; } */ .error404 .type3 .wpb_column { width:100%; margin:0; } .error404 .type5 .error-right { display:inline-block; } .error404 .type7 .error-content, .error404 .type7 .wpb_wrapper > .alignright { width:100%; } .error404 .type8 .alignleft { text-align:center; } } /*----*****---- << Mobile (Landscape) >> ----*****----*/ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .error404 .container { width: 100%; padding: 0 10%; } .error404 .type2 h4 { width: 100%; } .error404 .type1 h3, /* .error404 .type2 h3, */ .error404 .type5 h3, .error404 h3 { font-size: 80px; letter-spacing: 0px; } .error404 .type1 h2, /* .error404 .type2 h2, */ .error404 .type5 h2, .error404 h2 { line-height: 120px; font-size: 120px; } /*** 404 ***/ .error404 .type4 .error-box.square:before { height: 90%; width: 90%; } .error404 .type5 h2 { top: 0; } .error404 .type7 .error-content { width:100%; } .error404 .type8 h2 { font-size: 160px; line-height: 160px; top: 0px; } } /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) { /*** 404 ***/ .error404 .container { width: 100%; padding: 0 10%; } .error404 .type2 h4 { width: 100%; } .error404 .type4 .error-box.square { margin-bottom: 50px; } .error404 h1, .error404 h2, .error404 h3, .error404 h4, .error404 h5, .error404 h6 { line-height: normal; } .error404 .type1 h3, /* .error404 .type2 h3, */ .error404 .type5 h3, .error404 h3 { font-size:70px; letter-spacing:0; } .error404 .type1 h2, /* .error404 .type2 h2, */ .error404 .type5 h2, .error404 h2 { line-height: 120px; font-size: 120px; } .error404 .type4 .error-box { padding: 25px; } .error404 .type4 .error-box h4 { font-size: 16px; } .error404 .type4 .error-box.square h2 { line-height: 50px; top: -14px; } .error404 .type5 h3 { font-size:40px; } .error404 .type5 h2 { top: 0; } .error404 .type6 .error-box::before, .error404 .type6 .error-box::after { width:225px; height:225px; } .error404 .type6 .error-box::before, .error404 .type6 .error-box::after { left: -20px; right: auto; } .error404 .type6 .error-box { width:190px; min-height:200px; padding: 35px 20px 50px 20px; } .error404 .type6 .error-box h3 { font-size: 24px; letter-spacing: 0; } .error404 .type6 .error-box h2 { font-size:60px; line-height:60px; top:-12px; margin-bottom: 0; } .error404 .type6 .error-box h4 { font-size:19px; text-transform:capitalize; margin: 0; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (min-width: 320px) and (max-width: 479px) { /*** 404 ***/ .error404 .type1 img { max-width:55%; } .error404 .type1 h4 { font-size:32px; line-height: normal; } .error404 .type2 h3 { font-size:60px; } /* .error404 .type2 h2 { font-size:130px; top:-30px; } */ .error404 .type2 h4 { font-size:25px; } .error404 .type3 h5, .error404 .type8 h4 { font-size:31px; } .error404 .type4 .error-box { width:200px; height:200px; } .error404 .type4 .error-box h2 { font-size:60px; } .error404 .type4 .error-box h3 { font-size:35px; } /* .error404 .type5 h2 { font-size:160px; } */ .error404 .type7 img { width:50%; } .error404 .type7 .error-text { font-size:22px; line-height:40px; } .error404 .type8 h2 { font-size:140px; top:-15px; } .error404 .type8 h3 { font-size:70px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 319px) { /*** 404 ***/ .error404 .type1 img { max-width:70%; } .error404 .type1 h4 { font-size:22px; } .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; } .error404 .type3 h5 { font-size:22px; } .error404 .type4 .error-box { width:170px; height:170px; padding:27px; border-radius:50px 0 50px 0; } .error404 .type4 .error-box h2 { font-size:50px; } .error404 .type4 .error-box h3 { font-size:25px; } .error404 .type5 h2 { font-size:100px; line-height:200px; top:-7px; text-shadow:0 11px 0 var(--wdtHeadAltColor); } .error404 .type7 .error-text { font-size:20px; line-height:40px; } .error404 .type7 input[type="submit"] { position:inherit; margin-top:10px; float:none; } .error404 .type8 h2 { font-size:100px; top:-17px; line-height:110px; } .error404 .type8 h3 { font-size:60px; letter-spacing:0; } .error404 .type8 h4 { font-size:22px; } .error404 .type8 .error-text { font-size:18px; line-height:30px; } } /* Custom Background */ body.error404 div.wrapper { background-image: url(../images/404-01.jpg); background-attachment: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat; }