/* Table of Content ================================================== 1.0 - 404 2.0 - Responsive*/ /*-------------------------------------------------------------- 1.0 - 404 --------------------------------------------------------------*/ .error404 .dt-sc-dark-bg { background: #000; } .error404 .vc_row.vc-default-row { margin-left: 0; } .error404, .error404 > .wrapper { height: 100%; width: 100%; } .center-content-wrapper { display: table; height: 100%; width: 100%; } .center-content-wrapper .center-content { display: table-cell; height: 100%; vertical-align: middle; width: 100%; } .error404 h2 { color: #f00; font-size: 170px; font-weight: bold; } .error404 h3 { font-size: 70px; font-weight: bold; } .error404 h4 { font-size: 60px; font-weight: 300; } .error404 .dt-sc-button.type2 { color: #fff; display: inline-block; letter-spacing: 1.5px; padding: 15px 35px; } .error404 .type2 #dt-style-picker ul li::before, .error404 #dt-style-picker ul li:before { content: none; } .error404 .type2 #dt-style-picker h3, .error404 #dt-style-picker h3 { letter-spacing: 0; text-transform: capitalize; } .error404 #dt-style-picker h2 { top: 0; } .error404 .dt-sc-fancy-list { display: inline-block; list-style: none; } .error404 ul.dt-sc-fancy-list li { padding-left: 0; } .error404 ul.dt-sc-fancy-list li:before { content: '\f22d'; font-family: FontAwesome; margin-right: 10px; position: inherit; top: 0; } .error404 .type1 .dt-style-picker-wrapper i { color: #fff; } .error404 .menu-links { margin: 40px 0; } .error404 .menu-links li { display: inline-block; font-size: 16px; margin: 0 2px 5px; padding: 0; text-transform: uppercase; } .error404 .menu-links li a { background: rgba(0, 0, 0, .05); color: #131313; display: inline-block; padding: 7px 20px; } .error404 .menu-links li:hover a { background: #000; color: #fff; } .error404 #searchform .dt-search-icon { display: none; } .error404 #searchform { display: inline-block; margin: 0 auto; position: relative; } .error404 #searchform input[type='text'], .error404 #searchform input[type='submit'] { height: 52px; } .error404 #searchform input[type='submit'] { border-radius: 0; margin-top: 0; padding: 13px 20px 13px; position: absolute; right: 0; top: 0; } .dt-sc-button.bordered { border:2px solid; margin-right:15px; background-color:transparent; font-size: 14px; padding: 15px 30px; color: #000000; position: relative; text-transform: uppercase; z-index: 1; font-weight: bold; line-height: normal;} .dt-sc-button.bordered:hover{color:#FFF;} /*----*****---- << Type 1 >> ----*****----*/ .error404 .type1 h2 { line-height: 170px; } .error404 .type1 .center-content-wrapper { text-align: center; } .error404 .type1 h3 { font-size: 100px; font-weight: 300; letter-spacing: 20px; margin-bottom: 0; text-transform: uppercase; } .error404 .type1 h4 { font-size: 42px; font-weight: 300; text-transform: uppercase; } .error404 .type1 .dt-sc-go-back { border-bottom: 1px solid #000; border-top: 1px solid #000; display: inline-block; min-width: 530px; padding: 35px 0; } .error404 .type1 i { color: #000; display: inline-block; font-size: 16px; font-style: normal; font-weight: bold; margin-bottom: 25px; } .error404 .type1 .dt-sc-button { background: #000; color: #fff; display: inline-block; font-size: 18px; line-height: 29px; padding: 15px 35px 16px 15px; position: relative; text-transform: uppercase; } .error404 .type1 .dt-sc-button:before { border-bottom: 30px solid transparent; border-right: 30px solid #000; border-top: 30px solid transparent; content: ''; display: inline-block; height: 0; left: -30px; position: absolute; top: 0; transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; width: 0; } .error404 .type1 .dt-sc-button:hover { background-color: #1a1a1a; } .error404 .type1 .dt-sc-button:hover:before { border-right-color: #1a1a1a; } .error404 .type1 #searchform { display: inline-block; float: none; padding: 0; position: relative; width: 530px; } .error404 .type1 #searchform input[type='text'] { background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.06); font-size: 16px; padding: 15px 15px; width: 100%; } .error404 .type1 #searchform input[type='submit'] { background: url(../images/submit-ico-dark.png) no-repeat 0 0 / 20px 22px; display: block; height: 26px; margin-top: 0; padding: 0; position: absolute; right: 18px; text-indent: -9999px; top: 15px; width: 25px; } /* white */ .error404 .type1 .white h3, .error404 .type1 .white h4, .error404 .type1 .white i { color: #fff; } .error404 .type1 .white .dt-sc-newsletter-section input[type='email'] { background: #000; border-color: #d3d3d3; } /*----*****---- << Type 2 >> ----*****----*/ .error404 .type2 .vc_col-sm-6:first-child { padding: 0 20px; text-align: center; } .error404 .type2 h2 { display: inline-block; font-size: 200px; font-weight: bold; line-height: 200px; margin-bottom: 20px; position: relative; top: -20px; } .error404 .type2 h3 { font-size: 100px; font-weight: 300; letter-spacing: 20px; line-height: 90px; text-transform: uppercase; } .error404 .type2 h4 { border-bottom: 2px solid #d0d0d0; font-size: 42px; font-weight: 300; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding-bottom: 30px; text-transform: uppercase; width: 570px; } .error404 .type2 .vc_col-sm-6 { padding: 0 0 0 30px; } .error404 .type2 { color: #888; font-size: 16px; } .error404 .type2 p { font-size: 15px; } .error404 .type2 a.dt-sc-back { border-radius: 25px; color: #fff; display: inline-block; font-size: 16px; letter-spacing: 1px; padding: 15px 50px; text-transform: uppercase; } /*----*****---- << Type 4 >> ----*****----*/ .error404 .type4 { text-align: center; } .error404 .type4 .error-box { border-radius: 100px 0 100px 0; box-sizing: border-box; display: inline-block; height: 350px; margin-bottom: 40px; margin-top: 40px; padding: 50px; width: 350px; } .error404 .type4 .error-box h2, .error404 .type4 .error-box h3, .error404 .type4 .error-box h4 { color: #fff; text-transform: uppercase; } .error404 .type4 .error-box h2 { color: #fff; font-family: 'Courgette', cursive; font-size: 120px; margin-bottom: 0; position: relative; top: -16px; } .error404 .type4 .error-box h3 { font-size: 54px; margin-bottom: 0; } .error404 .type4 .error-box h4 { font-size: 24px; } .error404 .type4 .error-text { color: #999; font-size: 24px; font-weight: 300; line-height: 36px; } .error404 .type4 #searchform input[type='text'], .error404 .type4 .error-text { font-family: 'Josefin Sans', sans-serif; } .error404 .type4 #searchform { display: inline-block; float: none; min-width: 475px; padding: 0; width: auto; } .error404 .type4 #searchform { float: none; position: relative; width: auto; } .error404 .type4 #searchform input[type='text'] { background: #fafafa; border: 1px solid #e6e6e6; border-radius: 3px 4px 4px 3px; color: #000; font-size: 18px; height: 60px; margin-right: 0; padding: 19px 12px 18px; width: 100%; } .error404 .type4 #searchform input[type='submit'] { border-radius: 0 3px 3px 0; font-size: 20px; font-weight: normal; height: 60px; margin-top: 0; padding: 16px 30px 17px; position: absolute; right: 0; text-transform: capitalize; top: 0; } /*----*****---- << Square >> ----*****----*/ .error404 .type4 .error-box.square { border-radius: 0; margin-bottom: 80px; position: relative; } .error404 .type4 .error-box.square:before { bottom: 0; content: ''; height: 100%; left: 0; margin: auto; position: absolute; right: 0; top: 0; transform: rotate(45deg); width: 100%; z-index: 0; } .error404 .type4 .error-box.square .error-box-inner { position: relative; z-index: 1; } .error404 .type4 .error-box.square h2 { font-family: Open Sans,sans-serif; line-height: 140px; } .error404 .type4 .white .error-text { color: #fff; } /*----*****---- << Type 5 >> ----*****----*/ .error404 .type5 { text-align: center; } .error404 .type5 .wpb_wrapper { margin: 0 auto; } .error404 .type5 #searchform { position: relative; width: 500px; } .error404 .type5 #searchform input[type='text'] { background: #f5f5f5; border-radius: 35px; font-size: 16px; margin-right: 0; padding: 20px; width: 100%; } .error404 .type5 #searchform input[type='submit'] { background: url(../images/submit-bg1.png) no-repeat; background-size: 23px 24px; display: block; height: 24px; margin-top: 0; padding: 0; position: absolute; right: 24px; text-indent: -9999px; top: 13px; width: 23px; } .error404 .type5 h2 { color: #f00; font-size: 280px; line-height: 270px; position: relative; text-shadow: 0 20px 0 #1a1a1a; top: -20px; } .error404 .type5 h3 { color: #666; font-family: 'Lato', sans-serif; font-size: 70px; font-style: italic; font-weight: bold; } .error404 .type5 .error-top, .error404 .type5 .error-bottom { color: #fff; font-size: 40px; position: relative; } .error404 .type5 .error-top { top: 35px; } .error404 .type5 .error-bottom { top: -41px; } .error404 .type5 a.dt-go-back { background: #5c5c5c; color: #fff; display: inline-block; padding-right: 20px; } .error404 .type5 a.dt-go-back i { background: #fff; color: #1a1a1a; display: inline-block; line-height: 20px; margin-right: 15px; padding: 15px; transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; } .error404 .type5 a.dt-go-back:hover { background: #fff; color: #1a1a1a; } .error404 .type5 a.dt-go-back:hover i { background: #5c5c5c; color: #fff; } /*----*****---- << Type 6 >> ----*****----*/ .error404 .type6 { text-align: center; } .error404 .type6 .error-box { display: inline-block; margin-bottom: 20px; min-height: 410px; padding: 50px 20px 20px 20px; position: relative; width: 390px; z-index: 1; } .error404 .type6 .error-box:before { background: rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.3); content: ''; display: inline-block; height: 385px; left: 0; position: absolute; right: 0; top: 0; transform: rotate(-2deg); width: 385px; z-index: -1; } .error404 .type6 .error-box:after { background: rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.3); content: ''; display: inline-block; height: 385px; left: 0; position: absolute; right: 0; top: 0; transform: rotate(2deg); width: 385px; z-index: -1; } .error404 .type6 .error-box h3 { color: #fff; font-size: 65px; font-weight: 300; letter-spacing: 15px; text-transform: uppercase; } .error404 .type6 .error-box h2 { color: #f00; font-size: 164px; line-height: 120px; margin-bottom: 20px; position: relative; text-shadow: 0 5px 5px #000; top: -15px; } .error404 .type6 .error-box h4 { color: #fcdb34; font-size: 30px; text-transform: uppercase; } .error404 .type6 .error-text { color: #fff; font-size: 22px; font-weight: normal; line-height: 40px; } .error404 .type6 a.dt-go-back { background: rgba(255,255,255,.3); color: #fff; display: inline-block; font-size: 18px; font-weight: 500; margin-bottom: 10px; padding: 13px 25px; text-transform: uppercase; } .error404 .type6 a.dt-go-back:hover { background-color: #fff; color: #000; } /*----*****---- << Type 7 >> ----*****----*/ .error404 .type7 { text-align: center; } .error404 .type7 .error-content { display: inline-block; float: left; text-align: center; width: 630px; } .error404 .type7 h2 { line-height: 170px; } .error404 .type7 .dt-go-back { background: #000; border: 5px solid #fff; color: #fff; display: inline-block; font-size: 16px; height: 98px; line-height: 98px; position: relative; text-transform: uppercase; transform: rotate(45deg); width: 98px; } .error404 .type7 .dt-go-back i { display: inline-block; font-style: normal; transform: rotate(-45deg); } .error404 .type7 .error-text { font-size: 42px; line-height: 55px; margin-bottom: 0; } .error404 .type7 #searchform { display: inline-block; min-width: 500px; padding: 0; position: relative; } .error404 .type7 #searchform input[type='text'] { background: rgba(0, 0, 0, .1); border: 0; border-radius: 3px; font-size: 16px; height: 54px; margin-right: 0; padding: 16px 20px 15px; width: 100%; } .error404 .type7 #searchform input[type='submit'] { background: #000; border-radius: 0 3px 3px 0; color: #fff; height: 54px; margin-top: 0; padding: 18px 20px 19px; position: absolute; right: 0; top: 0; } .error404 .type7 #searchform input[type='submit']:hover { background: #fff; color: #000; } /** White **/ .error404 .type7 .white .menu-links li a, .error404 .type7 .white .error-text, .error404 .type7 .white input[type='text'] { color: #fff; } /*----*****---- << Type 8 >> ----*****----*/ .error404 .type8 { color: #8997a7; font-size: 16px; line-height: 30px; } .error404 .type8 h3 { font-size: 100px; font-weight: 100; margin-bottom: 0; position: relative; text-transform: uppercase; z-index: 1; } .error404 .type8 h2 { position:relative; color: #d34444; font-size: 300px; line-height: 300px; } .error404 .type8 h4 { font-size: 24px; font-weight: bold; text-transform: capitalize; } .error404 .type8 .error-text { color: #a5a5a5; font-size: 20px; font-style: normal; line-height: 40px; } .error404 .type8 .dt-go-back { color: #000; display: inline-block; font-size: 20px; padding: 14px 20px; } .error404 .type8 .dt-go-back i { color: #fff; margin-right: 5px; transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; -webkit-transition: all .3s linear; } .error404 .type8.ad .dt-go-back:hover { background: #fff; color: #000; } .error404 .container { height: 100%; } .error404 .type8 h2 span { color: #e9f028; font-size: 90px; font-weight: normal; left: -100%; line-height: 70px; position: absolute; top: 181px; } .error404 .type8 .search-form { display: block; margin-bottom: 30px; } .error404 .type8 #searchform { width: 50%; } .error404 .type8 #searchform input[type='submit'] { background-color: transparent; border: none; border-width: 0; } /*----*****---- << Dark Bg >> ----*****----*/ .error404 .type1.dt-sc-dark-bg #searchform input[type='text'], .error404 .dt-sc-dark-bg #searchform input[type='text'] { background: rgba(255,255,255,.1); } .error404 .dt-sc-dark-bg .menu-links li a { background: rgba(255,255,255,.1); color: #fff; } .error404 .type1.dt-sc-dark-bg .dt-sc-button { background: #fff; color: #000; } .error404 .type1.dt-sc-dark-bg .dt-sc-button:before { border-right-color: #fff; } .error404 .type1.dt-sc-dark-bg .dt-sc-button:hover { background-color: rgba(255,255,255,.5); color: #d3d3d3; } .error404 .type1.dt-sc-dark-bg .dt-sc-button:hover:before { border-right-color: rgba(255,255,255,.5); } .error404 .type2.dt-sc-dark-bg h4 { border-bottom-color: rgba(255,255,255,.1); } .error404 .type4.dt-sc-dark-bg #searchform input[type='text'] { border-color: rgba(255,255,255,.06); color: #d3d3d3; } .error404 .type7.dt-sc-dark-bg #searchform input[type='submit'] { background: rgba(255,255,255,.7); color: #333; } .error404 .type7.dt-sc-dark-bg #searchform input[type='submit']:hover { background: #fff; } .error404 .type8.dt-sc-dark-bg h3, .error404 .type8.dt-sc-dark-bg h4 { color: #fff; } .error404 .type6.dt-sc-dark-bg .error-box:before, .error404 .type6.dt-sc-dark-bg .error-box:after { background: rgba(255,255,255,.4); } /*-------------------------------------------------------------- 2.0 - Responsive --------------------------------------------------------------*/ /* Note: Design for a width of 960px */ @media only screen and (min-width:992px) and (max-width:1199px) { /*** 404 ***/ .error404 .type4 .vc_col-sm-6, .error404 .type7 .vc_col-sm-6, .error404 .type8 .vc_col-sm-6 { margin: 0; width: 100%; } .error404 .type8 .vc_col-sm-6.alignleft { text-align: center; width: 100%; } .error404 .type8 h2{ font-size:200px;} .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 #1a1a1a; } .error404 .type3 #searchform { width: 100%; } .error404 .type7 .error-content, .error404 .type7 .wpb_wrapper > .alignright { width: 100%; } .error404 .type5 .wpb_column:first-child .wpb_wrapper { width: 70%; } } /* Note: Design for a width of 768px */ @media only screen and (min-width:768px) and (max-width:991px) { /*** 404 ***/ .error404 .type2 h2 { font-size: 190px; } .error404 .type2 h3 { font-size: 90px; } .error404 .type2 h4 { font-size: 33px; } .error404 .type8 h2{ font-size:200px;} .error404 .type4 .vc_col-sm-6, .error404 .type7 .vc_col-sm-6, .error404 .type8 .vc_col-sm-6, .error404 .type5 .vc_col-sm-6 { margin: 0; width: 100%; } .error404 .type8 .vc_col-sm-6.alignleft { text-align: center; width: 100%; } .error404 .type5 .vc_col-sm-6 { display: inline-block; height: auto; } .error404 .type5 .dt-sc-newsletter-section, .error404 .type5 .error-right { display: inline-block; } .error404 .type3 .wpb_column { margin: 0; width: 100%; } .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) { /*** 404 ***/ .error404 .type4 .error-box.square:before { height: 90%; width: 90%; } .error404 .type7 .error-content { width: 100%; } .error404 .type8 h2{ font-size:200px;} .error404 .type8 h2 span{ font-size: 60px; left: -50%;} } /* Common Styles for the devices below 479px width */ @media only screen and (max-width: 479px) { /*** 404 ***/ .error404 .type4 .error-box h4 { font-size: 12px; } .error404 .type1 h3 { font-size: 70px; letter-spacing: 0; } .error404 .type6 .error-box::before, .error404 .type6 .error-box::after { height: 225px; width: 225px; } .error404 .type6 .error-box { min-height: 200px; width: 190px; } .error404 .type6 .error-box h3 { font-size: 28px; } .error404 .type6 .error-box h2 { font-size: 60px; line-height: 60px; top: -22px; } .error404 .type6 .error-box h4 { font-size: 19px; text-transform: capitalize; } .error404 .type4 .error-box.square h2 { font-size: 50px; line-height: 50px; top: -6px; } .error404 .type5 h3 { font-size: 40px; } .error404 .type2 .vc_col-sm-6 { padding: 0 15px; } .error404 .type1 .dt-sc-newsletter-section input[type='submit'] { background-color: #faf5c8; background-position: center; padding: 0 10px; width: 37px; } .error404 .type8 h2 span{position: initial; display: block;} } /* 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; } .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 { height: 200px; width: 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 .type2 h3 { font-size: 30px; margin-top: 20px; } .error404 .type2 h2 { font-size: 80px; line-height: normal; top: -20px; } .error404 .type2 h4 { font-size: 19px; text-transform: capitalize; } .error404 .type4 .error-box { border-radius: 50px 0 50px 0; height: 170px; padding: 27px; width: 170px; } .error404 .type4 .error-box h2 { font-size: 50px; } .error404 .type4 .error-box h3 { font-size: 25px; } .error404 .type4 .dt-sc-newsletter-section input[type='submit'] { border-radius: 5px; float: none; margin-bottom: 10px; margin-top: 5px; position: inherit; } .error404 .type1 img { max-width: 70%; } .error404 .type1 h4 { font-size: 22px; } .error404 .type1 .dt-sc-newsletter-section input[type='email'] { font-size: 12px; } .error404 .type1 .dt-sc-newsletter-section input[type='submit'] { right: 13px; } .error404 .type7 .error-text { font-size: 20px; line-height: 40px; } .error404 .type7 input[type='submit'] { margin-top: 10px; position: inherit; } .error404 .type7 input[type='submit'], .error404 .type4 .dt-sc-newsletter-section input[type='email'] { float: none; } .error404 .type3 h5, .error404 .type8 h4 { font-size: 22px; } .error404 .type3 .dt-sc-newsletter-section input[type='submit'] { float: none; margin-bottom: 10px; margin-top: 0; position: inherit; } .error404 .type8 h2 { font-size: 100px; line-height: 110px; top: -17px; } .error404 .type8 h3 { font-size: 60px; letter-spacing: 0; } .error404 .type8 .error-text { font-size: 18px; line-height: 30px; } .error404 .type5 h2 { font-size: 100px; line-height: 200px; text-shadow: 0 11px 0 #1a1a1a; top: -7px; } }