.error404 {

    .site-content {

        > .page-header {
            background-size: cover;
            background-repeat: no-repeat;
            padding: 60px 0;
            min-height: 510px;
            position: relative;
            z-index: 1;
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: center;

            &:before {
                content: "";
                background: rgba($black_color, 0.4);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
            }

            .page-title {
                color: $white_color;
                font-family: $secondary_font;
                font-weight: 600;
            }//.page-title

            .page-desc {
                max-width: 600px;
                margin: 20px auto 0 auto;
                color: $white_color;
            }//.page-desc
        }//> .page-header
    }//.site-content

    .error-404 {
        text-align: center;

        .error-num {
            font-size: 20em;
            line-height: 1em;
            font-weight: 700;
            color: $secondary_color;
            text-shadow: 0px -10px rgba($black_color, 0.1);
        }//.error-num

        .btn-readmore {
            display: inline-block;
            background: #202020;
            color: $white_color;
            border: 1px solid #202020;
            text-transform: uppercase;
            font-size: 0.7em;
            font-weight: 700;
            letter-spacing: 1px;
            padding: 10px 40px;
            margin-top: 40px;

            &:hover {
                background: none;
                color: #202020;
            }
        }//.btn-readmore

        .search-form {
            max-width: 640px;
            margin: 80px auto 0 auto;

            .search-field {
                font-size: 0.7em;
            }//.search-field

            .search-submit {
                background-color: #202020;

                &:hover {
                    background-color: $primary_color;
                    background-image: url('data:image/svg+xml; utf-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill=" %23202020" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>');
                }
            }//.search-submit
        }//.search-form
    }//.error-404
}//.error404

@include media(xs) {
    .error404 {

        .site-content {

            > .page-header {
                min-height: auto;
            }//> .page-header
        }//.site-content

        .error-404 {

            .error-num {
                font-size: 8em;
                text-shadow: 0px -5px rgba($black_color, 0.1);
            }//.error-num

            .btn-readmore {
                margin-top: 20px;
                padding-left: 30px;
                padding-right: 30px;
            }//.btn-readmore

            .search-form {
                margin-top: 40px;
            }//.search-form
        }//.error-404
    }//.error404
}//media(xs)