<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <base href="<?php echo SITE_LINK; ?>">
        <title><?php echo $title; ?></title>
        <style>
            html, body{
                width:100%;
                height:100%;
            }
            *{
                padding:0;
                margin:0;
            }
            .container {
                position:relative;
                width: 100%;
                height: 100%;
                height: 100vh;
                /*overflow: hidden !important;*/
            }
            h1 {
                font-family: "Source Sans Pro", sans-serif;
                font-weight: bold;
                font-size: 90px;
                letter-spacing: 20px;
                text-transform: uppercase;
                text-align: center;
                color: #B5B5B5;
                margin: 0px;
                padding: 0px;
            }

            h2 {
                font-family: "Source Sans Pro", sans-serif;
                font-size: 30px;
                font-weight: 600;
                letter-spacing: 20px;
                text-transform: uppercase;
                text-align: center;
                color: #B5B5B5;
                line-height: 50px;
                padding: 0px;
                margin: 0px;
            }
            h2 a {
                color: #B5B5B5;
                text-decoration: none;
                border-bottom: 5px solid #B5B5B5;
                margin: 0;
                padding: 0;
            }
            h2 a span {
                letter-spacing: 0px !important;
                padding-right: 3px;
            }
            h2 a:hover {
                color: #808080;
                border-bottom: 5px solid #808080;
            }
            #scene, #scene ul {
                top: 0%;
                width: 100% !important;
                height: 100% !important;
                height: 100vh !important;
                overflow: hidden;
                position: absolute;
            }
            .text {
                position: relative;
                top: 20%;
                padding-bottom:50px;
                /*top: 50%;
                -webkit-transform: translateY(-50%) !important;
                -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;*/
                z-index: 3;
                display: block;
            }
            .toppattern {
                position: absolute;
                margin-top: -700px;
                right: 100px !important;
                z-index: 2;
            }
            .sidepattern {
                position: absolute;
                top: 0px !important;
                bottom: 0px !important;
                left: 0px !important;
                right: 0px !important;
                z-index: 1;
            }
            .bottompattern {
                position: absolute;
                margin-top: 150px;
                right: 0px !important;
                z-index: 1;
            }
            /*@media screen and (max-height: 600px) {
                .toppattern {
                    margin-top: -900px;
                }
            }
            @media screen and (max-height: 900px) {
                .toppattern {
                    margin-top: -850px;
                }
            }
            @media screen and (max-height: 600px) {
                .bottompattern {
                    margin-top: -100px;
                }
            }
            @media screen and (max-height: 900px) {
                .bottompattern {
                    margin-top: 30px;
                }
            }*/
        </style>
    </head>
    <body>


        <div class="container">
            <div class="text">
                <h1> ERROR <?php echo $statusCode; ?> </h1>
                <h2>Go <a href="<?php echo SITE_LINK; ?>" >home</a>&nbsp; <?php echo $message; ?> </h2>
                <h2 style="margin-top:80px;"><a href="<?php echo SITE_LINK; ?>smc/doLogout" >..Go Logout..</a> </h2>
            </div>
            <ul id="scene" >
                <li class="layer sidepattern" data-depth="0.40"><img src="<?php echo THEME_PATH; ?>img/404/sidepattern.jpg"></li>
                <li class="layer toppattern" data-depth="0.20"><img src="<?php echo THEME_PATH; ?>img/404/toppattern.jpg"></li>
                <li class="layer bottompattern" data-depth="0.70"><img src="<?php echo THEME_PATH; ?>img/404/bottompattern.jpg"></li>
            </ul>
        </div>

        <script src="<?php echo THEME_PATH; ?>plugins/jquery/jquery-1.11.1.min.js"></script>
        <script src='<?php echo JS_PATH; ?>jquery.parallax.js'></script>

        <script>
            $('#scene').parallax();
        </script>






    </body>
</html>