/* vietnamese */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6XvptnsBXw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6Xvp9nsBXw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6Xvqdns.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6XvptnsBXw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6Xvp9nsBXw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Cabin';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(/fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6Xvqdns.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body {
    padding: 0;
    margin: 0
}

#notfound {
    position: relative;
    height: 100vh
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

.notfound {
    max-width: 460px;
    width: 100%;
    text-align: center;
    line-height: 1.4
}

    .notfound .notfound-404 {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 auto 50px
    }

        .notfound .notfound-404 > div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #ffa200;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            border: 5px dashed #000;
            border-radius: 5px
        }

            .notfound .notfound-404 > div:first-child:before {
                content: '';
                position: absolute;
                left: -5px;
                right: -5px;
                bottom: -5px;
                top: -5px;
                -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
                box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
                border-radius: 5px
            }

        .notfound .notfound-404 h1 {
            font-family: cabin,sans-serif;
            color: #000;
            font-weight: 700;
            margin: 0;
            font-size: 90px;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            left: 50%;
            text-align: center;
            height: 40px;
            line-height: 40px
        }

    .notfound h2 {
        font-family: cabin,sans-serif;
        font-size: 33px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 7px
    }

    .notfound p {
        font-family: cabin,sans-serif;
        font-size: 16px;
        color: #000;
        font-weight: 400
    }

    .notfound a {
        font-family: cabin,sans-serif;
        display: inline-block;
        padding: 10px 25px;
        background-color: #8f8f8f;
        border: none;
        border-radius: 40px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        -webkit-transition: .2s all;
        transition: .2s all
    }

        .notfound a:hover {
            background-color: #2c2c2c
        }