.error404{
    display: table;
    width: 100%;
    height: 100vh;
    padding:50px;    
    position: relative;
    font-family: 'Titillium Web', sans-serif;
    
    }    
    .content404{
        position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 450px;
      height: 500px;
      z-index: 5;
    
    }
    .content404:before{
    content:'';
    background: url(//cms.dynabic.com/templates/aspose/img/404.png) no-repeat top left;
    position: absolute;
    width:1000px ;
    height: 100vh;
    z-index: -1;
    left: -50%;
    top:-10%
    
    }
    
    .error404 h4{
        font-size: 30px;
        font-weight: bold;
        color:#233366;
        margin: 35px 0 0;
        text-indent: 200px;
    }
    .error404 h2{
        font-size:250px;
        font-weight: bold;
        color:#3293dc;
        text-shadow: 2px 8px rgba(0,0,0,0.3);
        margin: -50px 0 0;
        text-indent: 200px;
    }
    .error404 p{
        font-size: 16px;
        font-weight: bold;
        color:#233366;
        background: #a2d1e2;
        padding: 15px;
        border-radius: 100px;
        text-align: center;
        box-shadow: 0px 3px rgba(0,0,0,0.3);
        margin-left: 200px;
        width: 85%;
    
    }
    .error404 span a{
        color:#157cdc;
        font-size: 16px;
        text-decoration: underline!important;
        margin-right: 10px;
        }
    .error404 span {
        margin-left: 200px;
        width: 100%;
    }

    @media(max-width:1024px){
       
        .content404:before {
            background: url(https://cms.dynabic.com/templates/aspose/img/404.png) no-repeat top center;
            width: 100%;
            left: 0;
            top: 100px;
        }
        .content404{
            position: static;
            padding-top: 100px;
        }
        .error404 h4, .error404 h2, .error404 p {
            display: block;
            text-align: center;
            margin: 0;
            text-indent: 0;
        }

        .error404 span, .error404 p {
            display: block;
            margin: 0 0 10px;
            width: 100%;
            text-align: center
        }
    }

   

    @media(max-width:868px){
        .error404 {
            display: block;
            width: 100%;
            height: 65vh;
            padding: 20px 0;
            position: relative;
            font-family: 'Titillium Web', sans-serif;
            text-align: center;
        }
        .content404 {
            position: static;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: inherit;
            z-index: 5;
        }
        .content404:before {
        background-size:60%;
        }
        .error404 h4 {
            margin: 15px 0 0;
            text-indent: 0;
        }
        .error404 h2 {
            font-size: 170px;
            font-weight: bold;
            color: #3293dc;
            text-shadow: 2px 8px rgba(0,0,0,0.3);
            margin: -30px 0 0;
            text-indent: 0;
        }
        .error404 p {
            font-size: 16px;
            font-weight: bold;
            color: #233366;
            background: #a2d1e2;
            padding: 15px;
            border-radius: 100px;
            text-align: center;
            box-shadow: 0px 3px rgba(0,0,0,0.3);
            margin: 10px auto 30px;
            width: 80%;
        }
        .error404 span {
            margin-left: 0;
            width: 100%;
            display: block;
            text-align: center;
        }
    }
    @media(max-width:668px){
        .content404:before {
            background-size:100%;
            }
            .error404 {
                display: block;
                width: 100%;
                height: inherit;
            }
            .content404 {
                padding-top: 30px;
            }
    }
