body {
    /* overflow-x: initial; */
    /* overflow-y:initial; */
    /* position: static; */
    overflow: auto;
    /* overflow-x: scroll; */
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.75em;
    color: black;
    background-color: #f8f9fa;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}
#footer {
    text-align: center;
}

.main-container {
    text-align: center;
    margin-top: 100px;
    max-width: 2004px;
    /* this is for the width of the container center */
    width: 100%;
    margin: 0 auto;

}
.content pages page-ready {
    text-align: center;
}
.header {
    text-align: left;
}

        html {
            overflow-x: hidden;
            overflow-y: hidden;
            -ms-text-size-adjust: 100%;
            text-size-adjust: 100%
        }


        @keyframes wifi-border {
            0% {
                border-color: #e74f35
            }

            50% {
                border-color: #951e0a
            }

            100% {
                border-color: #e74f35
            }
        }

        @keyframes wifi-bg {
            0% {
                background-color: #e74f35
            }

            50% {
                background-color: #951e0a
            }

            100% {
                background-color: #e74f35
            }
        }

        @-webkit-keyframes dash-loop {
            100% {
                stroke-dashoffset: 0
            }
        }

        @keyframes dash-loop {
            100% {
                stroke-dashoffset: 0
            }
        }

        @keyframes window-enter {
            0% {
                opacity: .2;
                transform: scale(.1)
            }

            20% {
                transform: scale(.8);
                opacity: 1
            }

            40% {
                transform: scale(1.12)
            }

            60% {
                transform: scale(.92)
            }

            80% {
                transform: scale(1.06)
            }

            100% {
                transform: scale(1);
                opacity: 1
            }
        }
        @font-face {
            font-family: Lato;
            font-style: italic;
            font-weight: 400;
            font-display: fallback;
            src: local("Lato Italic"), local("Lato-Italic"), url('https://fonts.gstatic.com/s/lato/v14/cT2GN3KRBUX69GVJ2b2hxn-_kf6ByYO6CLYdB4HQE-Y.woff2') format("woff2");
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
        }

        @font-face {
            font-family: Lato;
            font-style: italic;
            font-weight: 400;
            font-display: fallback;
            src: local("Lato Italic"), local("Lato-Italic"), url('https://fonts.gstatic.com/s/lato/v14/1KWMyx7m-L0fkQGwYhWwuuvvDin1pK8aKteLpeZ5c0A.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+2212, U+2215
        }

        @font-face {
            font-family: Lato;
            font-style: normal;
            font-weight: 400;
            font-display: fallback;
            src: local("Lato Regular"), local("Lato-Regular"), url('https://fonts.gstatic.com/s/lato/v14/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2') format("woff2");
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
        }

        @font-face {
            font-family: Lato;
            font-style: normal;
            font-weight: 400;
            font-display: fallback;
            src: local("Lato Regular"), local("Lato-Regular"), url('https://fonts.gstatic.com/s/lato/v14/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.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+2212, U+2215
        }

        @font-face {
            font-family: Lato;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Lato Bold"), local("Lato-Bold"), url('https://fonts.gstatic.com/s/lato/v14/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2') format("woff2");
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
        }

        @font-face {
            font-family: Lato;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Lato Bold"), local("Lato-Bold"), url('https://fonts.gstatic.com/s/lato/v14/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.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+2212, U+2215
        }

        @font-face {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Montserrat Bold"), local("Montserrat-Bold"), url('https://fonts.gstatic.com/s/montserrat/v12/IQHow_FEYlDC4Gzy_m8fcrllaL-ufMOTUcv7jfgmuJg.woff2') format("woff2");
            unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F
        }

        @font-face {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Montserrat Bold"), local("Montserrat-Bold"), url('https://fonts.gstatic.com/s/montserrat/v12/IQHow_FEYlDC4Gzy_m8fcpsnFT_2ovhuEig4Dh-CBQw.woff2') format("woff2");
            unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
        }

        @font-face {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Montserrat Bold"), local("Montserrat-Bold"), url('https://fonts.gstatic.com/s/montserrat/v12/IQHow_FEYlDC4Gzy_m8fcnv4bDVR720piddN5sbmjzs.woff2') format("woff2");
            unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB
        }

        @font-face {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Montserrat Bold"), local("Montserrat-Bold"), url('https://fonts.gstatic.com/s/montserrat/v12/IQHow_FEYlDC4Gzy_m8fcjrEaqfC9P2pvLXik1Kbr9s.woff2') format("woff2");
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
        }

        @font-face {
            font-family: Montserrat;
            font-style: normal;
            font-weight: 700;
            font-display: fallback;
            src: local("Montserrat Bold"), local("Montserrat-Bold"), url('https://fonts.gstatic.com/s/montserrat/v12/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.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+2212, U+2215
        }

        :focus {
            outline-color: 0;
            outline-style: none;
            outline-width: 0
        }

        ::selection {
            background-color: #98d4ff;
            color: #fff
        }

        ::-moz-selection {
            background-color: #98d4ff;
            color: #fff
        }

        #page-header .view li:after,
        .cf_:after,
        .game .message li:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0
        }

        *,
        :after,
        :before {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        input,
        textarea {
            /* -webkit-appearance: none !important; */
            -webkit-border-radius: 0 !important;
            border-radius: 0 !important
        }

        canvas,
        img {
            image-rendering: optimin izeSpeed;
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: optimize-contrast;
            -ms-interpolation-mode: nearest-neighbor
        }

        img[src$=".gif"],
        img[src$=".png"] {
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor
        }

        #page-header .view li,
        .cf_,
        .game .message li {
            display: inline-block
        }

        #page-header .view html[xmlns] li,
        .game .message html[xmlns] li,
        html[xmlns] #page-header .view li,
        html[xmlns] .cf_,
        html[xmlns] .game .message li {
            display: block
        }

        #page-header .view * html li,
        * html #page-header .view li,
        * html .cf_,
        * html .game .message li,
        .game .message * html li {
            height: 1%
        }

        #about,
        #contact,
        #demo,
        #error,
        #labs,
        #page-content,
        #page-content>section,
        #page-header .view,
        #page-header .view .content,
        #page-header nav,
        #portfolio,
        .about-container,
        .about-list,
        .avatar-container,
        /* .avatar-loader.def, */
        /* .avatar-loader.def .avatar svg, */
        .game,
        .game .message,
        .game .status,
        .game canvas,
        .grid-list .bar h2,
        .grid-list .bar h3,
        .grid-list .imgs,
        .quick-search {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            display: block;
            text-align: center;
        }

        #page-header .burger,
        .filters,
        .game .status {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .grid-list .bar,
        article .bar {
            display: block;
            position: relative;
            height: 24px;
            background-color: #ddd;
            width: 100%;
            color: #6a6a6a;
            z-index: 10
        }

        .grid-list .bar i,
        .grid-list .bar i:after,
        .grid-list .bar i:before,
        article .bar i,
        article .bar i:after,
        article .bar i:before {
            height: 12px;
            width: 12px;
            display: inline-block;
            background-color: #ff5f57;
            border-radius: 50%;
            position: absolute;
            top: 6px;
            left: 10px
        }

        .grid-list .bar i:before,
        article .bar i:before {
            content: " ";
            left: 16px;
            background-color: #ffbd2e;
            top: 0
        }

        .grid-list .bar i:after,
        article .bar i:after {
            content: " ";
            left: 32px;
            background-color: #28ca41;
            top: 0
        }

        button {
            border: none
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: inherit;
            color: black;
        }

        a {
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: inherit;
            color: inherit;
            text-decoration: none
        }

        ul {
            list-style: none;
            /* margin-left: -13px; */
        }

        body {
            font-family: Lato, Helvetica, Arial, sans-serif;
            -webkit-tap-highlight-color: rgba(201, 224, 253, 0)
        }

        awesome-button {
            font-weight: 700;
            text-transform: uppercase;
            font-family: MontSerrat, Tahoma, Arial, sans-serif
        }

        body.animating #page-content .page-control .next {
            -moz-transition-delay: .1s, .4s;
            -o-transition-delay: .1s, .4s;
            -webkit-transition-delay: .1s, .4s;
            transition-delay: .1s, .4s
        }

        body.animating #page-content .page-control .prev {
            -moz-transition-delay: .24s, .5s;
            -o-transition-delay: .24s, .5s;
            -webkit-transition-delay: .24s, .5s;
            transition-delay: .24s, .5s
        }

        body.animating #page-content .page-control .back-list {
            -moz-transition-delay: .38s;
            -o-transition-delay: .38s;
            -webkit-transition-delay: .38s;
            transition-delay: .38s
        }

        body.animating .github-fork {
            -moz-transition-delay: 0s, .95s, .95s;
            -o-transition-delay: 0s, .95s, .95s;
            -webkit-transition-delay: 0s, .95s, .95s;
            transition-delay: 0s, .95s, .95s
        }

        body.animating #page-header .burger {
            -moz-transition: -moz-transform .3s cubic-bezier(.63, .02, .03, 1);
            -o-transition: -o-transform .3s cubic-bezier(.63, .02, .03, 1);
            -webkit-transition: -webkit-transform .3s cubic-bezier(.63, .02, .03, 1);
            transition: transform .3s cubic-bezier(.63, .02, .03, 1)
        }

        body.animating #page-header .burger i {
            -moz-transition: -moz-transform .35s cubic-bezier(.69, .03, .03, .93);
            -o-transition: -o-transform .35s cubic-bezier(.69, .03, .03, .93);
            -webkit-transition: -webkit-transform .35s cubic-bezier(.69, .03, .03, .93);
            transition: transform .35s cubic-bezier(.69, .03, .03, .93)
        }

        body.animating #page-header .burger i:nth-child(1) {
            -moz-transition-delay: .52s;
            -o-transition-delay: .52s;
            -webkit-transition-delay: .52s;
            transition-delay: .52s
        }

        body.animating #page-header .burger i:nth-child(2) {
            -moz-transition-delay: 555ms;
            -o-transition-delay: 555ms;
            -webkit-transition-delay: 555ms;
            transition-delay: 555ms
        }

        body.animating #page-header .burger i:nth-child(3) {
            -moz-transition-delay: .59s;
            -o-transition-delay: .59s;
            -webkit-transition-delay: .59s;
            transition-delay: .59s
        }

        @media all and (max-width:600px) {
            body.animating.page-exit .burger {
                -moz-transform: translate3d(150px, 0, 0) rotate(180deg);
                -ms-transform: translate3d(150px, 0, 0) rotate(180deg);
                -webkit-transform: translate3d(150px, 0, 0) rotate(180deg);
                transform: translate3d(150px, 0, 0) rotate(180deg)
            }
        }

        body.animating.page-exit .burger i {
            -moz-transform: translate3d(150px, 0, 0);
            -ms-transform: translate3d(150px, 0, 0);
            -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0)
        }

        body.animating.page-exit .github-fork {
            opacity: 0;
            -moz-transform: rotate(45deg) translate3d(0, -170px, 0);
            -ms-transform: rotate(45deg) translate3d(0, -170px, 0);
            -webkit-transform: rotate(45deg) translate3d(0, -170px, 0);
            transform: rotate(45deg) translate3d(0, -170px, 0)
        }

        .btn-destroy {
            padding: 6px 20px
        }

        #page-header {
            position: fixed;
            width: 100%;
            display: block;
            z-index: 100
        }

        #page-header.hidden nav {
            -moz-transform: translate3d(0, -100%, 0);
            -ms-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0)
        }

        #page-header.hidden nav:before {
            opacity: 0;
            -moz-transform: translate3d(0, 30px, 0);
            -ms-transform: translate3d(0, 30px, 0);
            -webkit-transform: translate3d(0, 30px, 0);
            transform: translate3d(0, 30px, 0)
        }

        #page-header.hidden nav a {
            -moz-transform: translate3d(0, -120px, 0);
            -ms-transform: translate3d(0, -120px, 0);
            -webkit-transform: translate3d(0, -120px, 0);
            transform: translate3d(0, -120px, 0)
        }

        #page-header nav {
            position: fixed;
            background-color: #333;
            z-index: 100;
            padding: 10% 0;
            -moz-transition: -moz-transform .45s cubic-bezier(.45, 0, 0, 1);
            -o-transition: -o-transform .45s cubic-bezier(.45, 0, 0, 1);
            -webkit-transition: -webkit-transform .45s cubic-bezier(.45, 0, 0, 1);
            transition: transform .45s cubic-bezier(.45, 0, 0, 1)
        }

        #page-header nav:before {
            content: "for a quick search just start typing ..";
            position: absolute;
            bottom: 5%;
            left: calc(50% - 150px);
            width: 300px;
            color: #8a8a8a;
            text-align: center;
            font-size: 13px;
            -moz-transition: -moz-transform .2s ease-out .9s, opacity .1s ease-out .95s;
            -o-transition: -o-transform .2s ease-out .9s, opacity .1s ease-out .95s;
            -webkit-transition: -webkit-transform .2s ease-out, opacity .1s ease-out;
            /* -webkit-transition-delay: .9s, .95s; */
            transition: transform .2s ease-out .9s, opacity .1s ease-out .95s
        }

        .is-touch #page-header nav:before {
            display: none
        }

        #page-header nav a {
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center;
            text-align: center;
            color: #5a5a5a;
            text-decoration: none;
            width: 90%;
            max-width: 600px;
            margin: 0 auto;
            height: calc(100% / 4);
            position: relative;
            font-size: 2em;
            background-color: rgba(0, 0, 0, .02);
            overflow: hidden;
            -moz-transition: -moz-transform .55s cubic-bezier(0, .35, 0, 1), color .15s ease-out .1s;
            -o-transition: -o-transform .55s cubic-bezier(0, .35, 0, 1), color .15s ease-out .1s;
            -webkit-transition: -webkit-transform .55s cubic-bezier(0, .35, 0, 1), color .15s ease-out;
            /* -webkit-transition-delay: 0s, .1s; */
            transition: transform .55s cubic-bezier(0, .35, 0, 1), color .15s ease-out .1s
        }

        #page-header nav a:nth-child(1) {
            -moz-transition-delay: .36s;
            -o-transition-delay: .36s;
            -webkit-transition-delay: .36s;
            transition-delay: .36s
        }

        #page-header nav a:nth-child(2) {
            -moz-transition-delay: .24s;
            -o-transition-delay: .24s;
            -webkit-transition-delay: .24s;
            transition-delay: .24s
        }

        #page-header nav a:nth-child(3) {
            -moz-transition-delay: .12s;
            -o-transition-delay: .12s;
            -webkit-transition-delay: .12s;
            transition-delay: .12s
        }

        #page-header nav a:after,
        #page-header nav a:before {
            content: " ";
            height: 75%;
            width: 100%;
            left: 0;
            position: absolute;
            -moz-transition: -moz-transform .4s cubic-bezier(.65, .15, 0, 1);
            -o-transition: -o-transform .4s cubic-bezier(.65, .15, 0, 1);
            -webkit-transition: -webkit-transform .4s cubic-bezier(.65, .15, 0, 1);
            transition: transform .4s cubic-bezier(.65, .15, 0, 1)
        }

        #page-header nav a:before {
            top: 0;
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
            background-color: #2e2e2e;
            z-index: -1
        }

        #page-header nav a:after {
            bottom: 0;
            -moz-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            -moz-transition-delay: 125ms;
            -o-transition-delay: 125ms;
            -webkit-transition-delay: 125ms;
            transition-delay: 125ms;
            background-color: #2d2d2d;
            z-index: -2
        }

        #page-header nav a:hover {
            color: #7f7f7f
        }

        #page-header nav a:hover:after,
        #page-header nav a:hover:before {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        #page-header nav a.active {
            color: #9f9f9f
        }

        #page-header nav a span {
            display: block;
            width: 100%;
            text-align: center
        }

        #page-header .burger {
            position: fixed;
            right: 83px;
            top: 35px;
            z-index: 9998;
            cursor: pointer;
            padding: 5px 4px;
            background-color: transparent
        }

        #page-header .burger.white i {
            background-color: #fff
        }

        #page-header .burger:active,
        #page-header .burger:focus {
            outline-color: 0;
            outline-style: none;
            outline-width: 0
        }

        #page-header .burger i {
            display: block;
            width: 42px;
            height: 2px;
            margin: 8px;
            background-color: #7a7a7a
        }

        #page-header .burger i:nth-child(n) {
            -moz-transition: -moz-transform .45s cubic-bezier(.43, .77, .15, 1.5), background .3s ease;
            -o-transition: -o-transform .45s cubic-bezier(.43, .77, .15, 1.5), background .3s ease;
            -webkit-transition: -webkit-transform .45s cubic-bezier(.43, .77, .15, 1.5), background .3s ease;
            transition: transform .45s cubic-bezier(.43, .77, .15, 1.5), background .3s ease
        }

        #page-header .burger.hover i:nth-child(1) {
            -moz-transform: translate3d(0, -4px, 0);
            -ms-transform: translate3d(0, -4px, 0);
            -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0)
        }

        #page-header .burger.hover i:nth-child(3) {
            -moz-transform: translate3d(0, 4px, 0);
            -ms-transform: translate3d(0, 4px, 0);
            -webkit-transform: translate3d(0, 4px, 0);
            transform: translate3d(0, 4px, 0)
        }

        #page-header .burger.st-1 {
            animation: rotate-back-in .8s cubic-bezier(.2, .86, .35, 1) forwards;
            -webkit-animation: rotate-back-in .8s cubic-bezier(.2, .86, .35, 1) forwards
        }

        #page-header .burger.st-1 i:nth-child(1) {
            -moz-transform: translate3d(0, 9px, 0);
            -ms-transform: translate3d(0, 9px, 0);
            -webkit-transform: translate3d(0, 9px, 0);
            transform: translate3d(0, 9px, 0)
        }

        #page-header .burger.st-1 i:nth-child(3) {
            -moz-transform: translate3d(0, -9px, 0);
            -ms-transform: translate3d(0, -9px, 0);
            -webkit-transform: translate3d(0, -9px, 0);
            transform: translate3d(0, -9px, 0)
        }

        #page-header .burger.st-2 {
            animation: rotate-back-out .85s cubic-bezier(.2, .86, .35, 1) forwards;
            -webkit-animation: rotate-back-out .85s cubic-bezier(.2, .86, .35, 1) forwards
        }

        #page-header .burger.st-2 i:nth-child(1) {
            -moz-transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.5);
            -ms-transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.5);
            -webkit-transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.5);
            transform: translate3d(0, 10px, 0) rotate(45deg) scale(1.5)
        }

        #page-header .burger.st-2 i:nth-child(2) {
            opacity: 0
        }

        #page-header .burger.st-2 i:nth-child(3) {
            -moz-transform: translate3d(0, -10px, 0) rotate(-45deg) scale(1.5);
            -ms-transform: translate3d(0, -10px, 0) rotate(-45deg) scale(1.5);
            -webkit-transform: translate3d(0, -10px, 0) rotate(-45deg) scale(1.5);
            transform: translate3d(0, -10px, 0) rotate(-45deg) scale(1.5)
        }

        #page-header .burger.st-2.hover i:nth-child(1) {
            -moz-transform: translate3d(0, 10px, 0) rotate(50deg) scale(1.5);
            -ms-transform: translate3d(0, 10px, 0) rotate(50deg) scale(1.5);
            -webkit-transform: translate3d(0, 10px, 0) rotate(50deg) scale(1.5);
            transform: translate3d(0, 10px, 0) rotate(50deg) scale(1.5)
        }

        #page-header .burger.st-2.hover i:nth-child(3) {
            -moz-transform: translate3d(0, -10px, 0) rotate(-50deg) scale(1.5);
            -ms-transform: translate3d(0, -10px, 0) rotate(-50deg) scale(1.5);
            -webkit-transform: translate3d(0, -10px, 0) rotate(-50deg) scale(1.5);
            transform: translate3d(0, -10px, 0) rotate(-50deg) scale(1.5)
        }

        #page-header .view {
            display: block;
            background-color: #2a2a2a;
            z-index: 5;
            position: fixed;
            overflow-y: auto;
            -moz-transition: -moz-transform .45s cubic-bezier(.45, 0, 0, 1);
            -o-transition: -o-transform .45s cubic-bezier(.45, 0, 0, 1);
            -webkit-transition: -webkit-transform .45s cubic-bezier(.45, 0, 0, 1);
            transition: transform .45s cubic-bezier(.45, 0, 0, 1)
        }

        #page-header .view::-webkit-scrollbar {
            width: 3px
        }

        #page-header .view::-webkit-scrollbar-track-piece {
            background-color: #2a2a2a
        }

        #page-header .view::-webkit-scrollbar-thumb {
            background-color: #6a6a6a
        }

        #page-header .view.hidden {
            -moz-transform: translate3d(0, -100%, 0);
            -ms-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0)
        }

        #page-header .view.hidden section {
            -moz-transform: translate3d(0, -100px, 0);
            -ms-transform: translate3d(0, -100px, 0);
            -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
            opacity: 0
        }

        #page-header .view .content {
            display: table
        }

        #page-header .view section {
            margin-bottom: 12px;
            max-width: 740px;
            width: 90%;
            margin: 0 auto 40px;
            -moz-transition: -moz-transform .6s cubic-bezier(.1, .35, .25, 1), opacity .4s ease-out;
            -o-transition: -o-transform .6s cubic-bezier(.1, .35, .25, 1), opacity .4s ease-out;
            -webkit-transition: -webkit-transform .6s cubic-bezier(.1, .35, .25, 1), opacity .4s ease-out;
            transition: transform .6s cubic-bezier(.1, .35, .25, 1), opacity .4s ease-out
        }

        #page-header .view section:nth-child(1) {
            -moz-transition-delay: .15s, .15s;
            -o-transition-delay: .15s, .15s;
            -webkit-transition-delay: .15s, .15s;
            transition-delay: .15s, .15s
        }

        #page-header .view section:nth-child(2) {
            -moz-transition-delay: .2s, .2s;
            -o-transition-delay: .2s, .2s;
            -webkit-transition-delay: .2s, .2s;
            transition-delay: .2s, .2s
        }

        #page-header .view header strong {
            display: block;
            margin-bottom: -.05em
        }

        #page-header .view h2 {
            color: #cfcfcf;
            font-size: 3em;
            line-height: 1em;
            font-weight: 700;
            letter-spacing: -.05em;
            text-transform: lowercase;
            width: 100%;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
            margin-bottom: .5em
        }

        #page-header .view ul {
            max-width: 665px;
            margin: 0 auto
        }

        #page-header .view li,
        #page-header .view p {
            color: #8a8a8a;
            margin-bottom: 8px
        }

        #page-header .view .wrapper {
            display: table-cell;
            width: 100%;
            height: 100%;
            vertical-align: middle;
            text-align: center;
            padding: 60px 0
        }

        @media all and (min-height:900px) {
            #page-header .view .wrapper {
                padding: 80px 0
            }
        }

        #page-header .view .close {
            width: 80px;
            height: 80px
        }

        #page-header .view .board {
            max-width: 600px;
            width: 90%;
            margin-top: 20px;
            margin-bottom: 45px
        }

        #page-header .view .avatar-wrapper {
            width: 142px;
            height: 142px
        }

        #page-header .view .disqus {
            margin: 50px 0 30px;
            min-height: 350px
        }

        #page-header .leaderboard>awesome-button {
            margin-top: 12px
        }

        #page-header .leaderboard.hard .board,
        #page-header .leaderboard.hard .disqus,
        #page-header .leaderboard.hard .sharer {
            display: none
        }

        #page-header .leaderboard .sharer p {
            font-size: 14px;
            color: #8a8a8a;
            margin-bottom: 22px;
            -moz-transition-delay: .57s;
            -o-transition-delay: .57s;
            -webkit-transition-delay: .57s;
            transition-delay: .57s
        }

        #page-header .leaderboard .sharer awesome-button {
            margin: 0 6px
        }

        #page-header .leaderboard .sharer awesome-button:nth-child(1) {
            -moz-transition-delay: ".64s";
            -o-transition-delay: ".64s";
            -webkit-transition-delay: ".64s";
            transition-delay: ".64s"
        }

        #page-header .leaderboard .sharer awesome-button:nth-child(2) {
            -moz-transition-delay: ".68s";
            -o-transition-delay: ".68s";
            -webkit-transition-delay: ".68s";
            transition-delay: ".68s"
        }

        #page-header .leaderboard .sharer awesome-button:nth-child(3) {
            -moz-transition-delay: ".72s";
            -o-transition-delay: ".72s";
            -webkit-transition-delay: ".72s";
            transition-delay: ".72s"
        }

        #page-header .leaderboard .sharer awesome-button:nth-child(4) {
            -moz-transition-delay: ".76s";
            -o-transition-delay: ".76s";
            -webkit-transition-delay: ".76s";
            transition-delay: ".76s"
        }

        #page-header .leaderboard .board {
            position: relative;
            left: 10px
        }

        #page-header .leaderboard ._d:before {
            content: attr(data-pos);
            width: 50px;
            height: 50px;
            position: absolute;
            left: -50px;
            top: 0
        }

        #page-header .leaderboard .disqus,
        #page-header .leaderboard awesome-button,
        #page-header .leaderboard li,
        #page-header .leaderboard>h2,
        #page-header .leaderboard>p,
        #page-header .leaderboard>small,
        #page-header .leaderboard>strong {
            -moz-transition: -moz-transform .325s cubic-bezier(.1, .45, .05, .9), opacity .15s ease-out;
            -o-transition: -o-transform .325s cubic-bezier(.1, .45, .05, .9), opacity .15s ease-out;
            -webkit-transition: -webkit-transform .325s cubic-bezier(.1, .45, .05, .9), opacity .15s ease-out;
            transition: transform .325s cubic-bezier(.1, .45, .05, .9), opacity .15s ease-out
        }

        #page-header .leaderboard li:nth-child(1) {
            -moz-transition-delay: ".067s";
            -o-transition-delay: ".067s";
            -webkit-transition-delay: ".067s";
            transition-delay: ".067s"
        }

        #page-header .leaderboard li:nth-child(2) {
            -moz-transition-delay: ".089s";
            -o-transition-delay: ".089s";
            -webkit-transition-delay: ".089s";
            transition-delay: ".089s"
        }

        #page-header .leaderboard li:nth-child(3) {
            -moz-transition-delay: ".111s";
            -o-transition-delay: ".111s";
            -webkit-transition-delay: ".111s";
            transition-delay: ".111s"
        }

        #page-header .leaderboard li:nth-child(4) {
            -moz-transition-delay: ".133s";
            -o-transition-delay: ".133s";
            -webkit-transition-delay: ".133s";
            transition-delay: ".133s"
        }

        #page-header .leaderboard li:nth-child(5) {
            -moz-transition-delay: ".155s";
            -o-transition-delay: ".155s";
            -webkit-transition-delay: ".155s";
            transition-delay: ".155s"
        }

        #page-header .leaderboard li:nth-child(6) {
            -moz-transition-delay: ".177s";
            -o-transition-delay: ".177s";
            -webkit-transition-delay: ".177s";
            transition-delay: ".177s"
        }

        #page-header .leaderboard li:nth-child(7) {
            -moz-transition-delay: ".199s";
            -o-transition-delay: ".199s";
            -webkit-transition-delay: ".199s";
            transition-delay: ".199s"
        }

        #page-header .leaderboard li:nth-child(8) {
            -moz-transition-delay: ".221s";
            -o-transition-delay: ".221s";
            -webkit-transition-delay: ".221s";
            transition-delay: ".221s"
        }

        #page-header .leaderboard li:nth-child(9) {
            -moz-transition-delay: ".243s";
            -o-transition-delay: ".243s";
            -webkit-transition-delay: ".243s";
            transition-delay: ".243s"
        }

        #page-header .leaderboard li:nth-child(10) {
            -moz-transition-delay: ".265s";
            -o-transition-delay: ".265s";
            -webkit-transition-delay: ".265s";
            transition-delay: ".265s"
        }

        #page-header .leaderboard li:nth-child(11) {
            -moz-transition-delay: ".287s";
            -o-transition-delay: ".287s";
            -webkit-transition-delay: ".287s";
            transition-delay: ".287s"
        }

        #page-header .leaderboard li:nth-child(12) {
            -moz-transition-delay: ".309s";
            -o-transition-delay: ".309s";
            -webkit-transition-delay: ".309s";
            transition-delay: ".309s"
        }

        #page-header .leaderboard li:nth-child(13) {
            -moz-transition-delay: ".331s";
            -o-transition-delay: ".331s";
            -webkit-transition-delay: ".331s";
            transition-delay: ".331s"
        }

        #page-header .leaderboard li:nth-child(14) {
            -moz-transition-delay: ".353s";
            -o-transition-delay: ".353s";
            -webkit-transition-delay: ".353s";
            transition-delay: ".353s"
        }

        #page-header .leaderboard .logout {
            position: relative;
            margin-top: 0;
            -moz-transition-delay: .55s;
            -o-transition-delay: .55s;
            -webkit-transition-delay: .55s;
            transition-delay: .55s
        }

        #page-header .leaderboard>p {
            max-width: 620px;
            width: 90%;
            margin: 0 auto 1em;
            line-height: 1.75em;
            font-size: 1em;
            -moz-transition-delay: 20ms;
            -o-transition-delay: 20ms;
            -webkit-transition-delay: 20ms;
            transition-delay: 20ms
        }

        #page-header .leaderboard>p b {
            color: #cfcfcf
        }

        #page-header .leaderboard>small {
            -moz-transition-delay: 22.5ms;
            -o-transition-delay: 22.5ms;
            -webkit-transition-delay: 22.5ms;
            transition-delay: 22.5ms;
            display: block;
            font-size: 14px;
            color: #8a8a8a;
            margin-bottom: 6px
        }

        #page-header .leaderboard>awesome-button {
            -moz-transition-delay: 45ms;
            -o-transition-delay: 45ms;
            -webkit-transition-delay: 45ms;
            transition-delay: 45ms
        }

        #page-header .leaderboard>strong {
            -moz-transition-delay: 0s;
            -o-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s
        }

        #page-header .leaderboard>strong {
            display: block
        }

        #page-header .leaderboard.hidden li,
        #page-header .leaderboard.hidden small,
        #page-header .leaderboard.hidden>awesome-button,
        #page-header .leaderboard.hidden>h2,
        #page-header .leaderboard.hidden>p,
        #page-header .leaderboard.hidden>strong {
            opacity: 0;
            -moz-transform: translate3d(0, -20px, 0);
            -ms-transform: translate3d(0, -20px, 0);
            -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0)
        }

        #page-header .leaderboard.hidden .disqus,
        #page-header .leaderboard.hidden .sharer awesome-button,
        #page-header .leaderboard.hidden .sharer p {
            opacity: 0;
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0)
        }

        #page-header .leaderboard .disqus {
            -moz-transition-delay: .9s;
            -o-transition-delay: .9s;
            -webkit-transition-delay: .9s;
            transition-delay: .9s
        }

        #page-header .leaderboard .avatar-wrapper {
            width: 40%;
            height: 40%
        }

        #page-header .view .close,
        .game .message .close,
        .quick-search .close {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 5%;
            right: 5%;
            cursor: pointer
        }

        #page-header .view .close:hover:before,
        .game .message .close:hover:before,
        .quick-search .close:hover:before {
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg)
        }

        #page-header .view .close:hover:after,
        .game .message .close:hover:after,
        .quick-search .close:hover:after {
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        #page-header .view .close:after,
        #page-header .view .close:before,
        .game .message .close:after,
        .game .message .close:before,
        .quick-search .close:after,
        .quick-search .close:before {
            content: " ";
            width: 80%;
            height: 2px;
            background-color: #7a7a7a;
            position: absolute;
            top: calc(50% - 1px);
            transform-origin: 50% 50%;
            left: 10%
        }

        #page-header .view .close:before,
        .game .message .close:before,
        .quick-search .close:before {
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -moz-transition: -moz-transform .29s cubic-bezier(.5, 0, .3, .9) .1s;
            -o-transition: -o-transform .29s cubic-bezier(.5, 0, .3, .9) .1s;
            -webkit-transition: -webkit-transform .29s cubic-bezier(.5, 0, .3, .9);
            /* -webkit-transition-delay: .1s; */
            transition: transform .29s cubic-bezier(.5, 0, .3, .9) .1s
        }

        #page-header .view .close:after,
        .game .message .close:after,
        .quick-search .close:after {
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -moz-transition: -moz-transform .29s cubic-bezier(.5, 0, .3, .9);
            -o-transition: -o-transform .29s cubic-bezier(.5, 0, .3, .9);
            -webkit-transition: -webkit-transform .29s cubic-bezier(.5, 0, .3, .9);
            transition: transform .29s cubic-bezier(.5, 0, .3, .9)
        }

        #page-content {
            background-color: #f8f9fa;
            /* display: block; */
            /* text-align: center; */
            
            text-align: center;
            width: 100%;
            margin: 0 auto;
            
               
        }

        #page-content.transition {
            -moz-perspective: 1200px;
            -webkit-perspective: 1200px;
            perspective: 1200px;
            background-color: #3f3f3f
        }

        #page-content.transition>section {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d
        }

        #page-content>section {
            visibility: hidden;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* overflow-scrolling: touch; */
        }

        .is-touch #page-content>section {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            /* overflow-scrolling: touch; */
        }

        #page-content>section .centered,
        #page-content>section .pages.content {
            -moz-transition: background .2s ease-out;
            -o-transition: background .2s ease-out;
            -webkit-transition: background .2s ease-out;
            transition: background .2s ease-out
        }

        #page-content>section::-webkit-scrollbar {
            width: 3px
        }

        #page-content>section::-webkit-scrollbar-track-piece {
            background-color: #2a2a2a;
            -moz-transition: background-color .5s ease-out;
            -o-transition: background-color .5s ease-out;
            -webkit-transition: background-color .5s ease-out;
            transition: background-color .5s ease-out
        }

        #page-content>section::-webkit-scrollbar-thumb {
            background-color: #6a6a6a;
            -moz-transition: background-color .5s ease-out;
            -o-transition: background-color .5s ease-out;
            -webkit-transition: background-color .5s ease-out;
            transition: background-color .5s ease-out
        }

        #page-content>.on-top {
            z-index: 1000
        }

        #page-content>.green {
            background-color: #333
        }

        #page-content>.blue {
            background-color: #333
        }

        #page-content>.current {
            visibility: visible;
            text-align: center;
            /* margin-top: 30px; */
            max-width:none;
            border: none;
            /* this is for the width of the container center */
            width: 100%;
            /* margin: 0 auto; */
            /* z-index: 200 */
        }

        .loading #page-content>.current .pages.content {
            background-color: #282828
        }

        .loading #page-content>.current .centered {
            background-color: #282828
        }

        .loading #page-content>.current .input-block input,
        .loading #page-content>.current .input-block textarea {
            background-color: #282828
        }

        #page-content>.pt-page-ontop {
            z-index: 500
        }
/* 
        #page-content>.loader {
            display: none;
            visibility: visible
        }

        #page-content.transition .loader {
            display: block
        }

        #page-loader {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -moz-transition: -moz-transform 625ms cubic-bezier(.4, .2, .1, 1) 25ms;
            -o-transition: -o-transform 625ms cubic-bezier(.4, .2, .1, 1) 25ms;
            -webkit-transition: -webkit-transform 625ms cubic-bezier(.4, .2, .1, 1);
            -webkit-transition-delay: 25ms;
            transition: transform 625ms cubic-bezier(.4, .2, .1, 1) 25ms
        }

        #page-loader .avatar {
            -moz-transition: -moz-transform 375ms cubic-bezier(1, 0, .55, 1);
            -o-transition: -o-transform 375ms cubic-bezier(1, 0, .55, 1);
            -webkit-transition: -webkit-transform 375ms cubic-bezier(1, 0, .55, 1);
            transition: transform 375ms cubic-bezier(1, 0, .55, 1)
        }

        #page-loader.go-down {
            -moz-transform: translate3d(0, 100%, 0);
            -ms-transform: translate3d(0, 100%, 0);
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0)
        }

        #page-loader.go-down .avatar {
            -moz-transform: translate3d(0, 100%, 0) rotate(225deg);
            -ms-transform: translate3d(0, 100%, 0) rotate(225deg);
            -webkit-transform: translate3d(0, 100%, 0) rotate(225deg);
            transform: translate3d(0, 100%, 0) rotate(225deg)
        }

        #page-loader.hidden {
            opacity: 0;
            visibility: hidden
        }

        #page-loader.fade {
            opacity: 1;
            background-color: transparent;
            visibility: visible
        } */

        .pages {
            /* display:table-row; */
            text-align: left;
        }

        .pages header {
            margin: 0 20px;
            text-align: left
        }

        .pages header h2,
        .pages header h3 {
            font-size: 1.15em;
            color: black;
            font-family: Lato, Helvetica, Arial, sans-serif;
            line-height: 1.7em;
            word-spacing: .02em;
            font-weight: 400
        }

        .pages header h1 {
            color: black;
            font-size: 2.625em;
            line-height: 1.45em;
            font-weight: 700;
            letter-spacing: -2px;
            margin-bottom: .1em;
            text-transform: capitalize;
            width: 100%;
            text-shadow: 2px 2px 0 rgba(0, 0, 0, .15)
        }

        .pages .centered {
            display: flex;
            padding: 80px 0 60px;
            align-items: center;
            justify-content: center;
        }

        .pages .game-lettering {
            margin-top: -31px;
            max-width: 890px;
            width: 100%;
            padding: 0 30px
        }

        @media all and (max-width:1024px) {
            .pages .game-lettering {
                max-width: 720px
            }
        }

        @media all and (max-width:840px) {
            .pages .game-lettering {
                max-width: 640px
            }
        }

        .pages .game-lettering ul {
            width: 100%;
            display: block;
            margin-bottom: 12px;
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        .pages .game-lettering li {
            display: inline-block;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            margin: 0 5px;
            color: #7a7a7a
        }

        .pages .game-lettering h1 {
            font-size: 2.625em;
            line-height: 1.25em;
            margin-bottom: .2em;
            letter-spacing: -.05em;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            color: #cacaca
        }

        .pages .game-lettering h2 {
            font-size: 1.4em;
            line-height: 1.4em;
            padding: 0 1.5em
        }

        @media all and (max-width:1024px) {
            .pages .game-lettering h1 {
                font-size: 2.1em
            }

            .pages .game-lettering h2 {
                font-size: 1.12em
            }
        }

        @media all and (max-width:840px) {
            .pages .game-lettering h1 {
                font-size: 1.8375em
            }

            .pages .game-lettering h2 {
                font-size: .98em
            }
        }

        @media all and (max-width:500px) {
            .pages .game-lettering h1 {
                font-size: 2.1em;
                line-height: 1.16em
            }

            .pages .game-lettering h2 {
                font-size: 1.12em
            }
        }

        .pages .wrapper {
            max-width: 1000px;
            /* margin: 130px; */
            margin-top: 70px;
            text-align: center;
            
        }

        @media all and (max-width:1600px) {
            .pages .wrapper {
                max-width: 880px
            }
        }

        @media all and (max-width:1440px) {
            .pages .wrapper {
                max-width: 800px
            }
        }

        @media all and (max-width:1300px) {
            .pages .wrapper {
                max-width: 760px
            }
        }

        @media all and (max-width:1100px) {
            .pages .wrapper {
                max-width: 700px;
                
            }
        }

        @media all and (max-width:900px) {
            .pages .wrapper {
                max-width: 600px
            }
        }

        @media all and (max-width:800px) {
            .pages .wrapper {
                max-width: 500px
            }
        }

        .pages header {
            position: relative
        }

        .pages .filter {
            display: none
        }

        .pages footer {
            line-height: 20px;
            color: #8a8a8a;
            margin-top: 42px
        }

        .pages footer nav {
            margin-bottom: 12px
        }

        .pages footer nav:after {
            content: "";
            height: 1px;
            width: 40px
        }

        .pages footer nav a {
            padding: 4px 6px
        }

        .pages footer nav span {
            margin: 0 4px;
            display: inline-block
        }

        .pages footer h4 {
            color: #cacaca;
            font-weight: 700;
            margin-bottom: 2px;
            font-size: 1.15em;
            line-height: 1.7em
        }

        .pages footer p {
            font-size: 1em;
            line-height: 1.45em
        }

        .twitter-follow-button {
            margin-top: 1em;
            display: inline-block;
            margin-right: 5px
        }

        .disqus {
            padding: 2em;
            background-color: #363636;
            margin: 25px 20px;
            position: relative;
            min-height: calc(52px + 4em)
        }

        /* .disqus .disqus-loader {
            display: block;
            position: absolute;
            left: calc(50% - 27px);
            top: calc(50% - 26px);
            height: 52px;
            width: 54px
        }

        .disqus .disqus-loader.hidden {
            display: none
        }

        .disqus .disqus-loader.animated:after {
            transform: rotate(360000deg)
        }

        .disqus .disqus-loader:after,
        .disqus .disqus-loader:before {
            content: " ";
            width: 54px;
            height: 52px;
            position: absolute;
            top: 0;
            left: 0
        }

        .disqus .disqus-loader:before {
            background: url('') 0 -52px no-repeat
        }

        .disqus .disqus-loader:after {
            box-sizing: border-box;
            width: 26px;
            height: 26px;
            position: absolute;
            top: 13px;
            left: 15px;
            border-width: 3px;
            border-style: solid;
            border-color: rgba(223, 228, 237, .4) transparent;
            border-radius: 13px;
            transform-origin: 50% 50% 0;
            transition: transform 700s linear
        } */

        #disqus_thread>div {
            display: none !important
        }

        #disqus_thread img.ninja {
            left: 14%
        }

        #disqus_thread iframe {
            opacity: .7 !important
        }

        a.github-fork {
            position: fixed;
            display: block;
            width: 330px;
            z-index: 901;
            right: -62px;
            top: 80px;
            background-size: 100% auto;
            cursor: pointer;
            background-color: #5c5c5c;
            color: #f0f0f0;
            padding: 1em 0 .95em;
            line-height: 1.04em;
            text-decoration: none;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: 1.04em;
            box-shadow: -2px 3px 1px rgba(0, 0, 0, .23);
            opacity: 0;
            -moz-transform: rotate(45deg) translate3d(0, -170px, 0);
            -ms-transform: rotate(45deg) translate3d(0, -170px, 0);
            -webkit-transform: rotate(45deg) translate3d(0, -170px, 0);
            transform: rotate(45deg) translate3d(0, -170px, 0);
            -moz-transition: background-color .2s ease-out, -moz-transform .45s cubic-bezier(.15, 0, 0, 1) 2.15s, opacity .2s 2.15;
            -o-transition: background-color .2s ease-out, -o-transform .45s cubic-bezier(.15, 0, 0, 1) 2.15s, opacity .2s 2.15;
            -webkit-transition: background-color .2s ease-out, -webkit-transform .45s cubic-bezier(.15, 0, 0, 1), opacity .2s 2.15;
            /* -webkit-transition-delay: 0s, 2.15s, 0s; */
            transition: background-color .2s ease-out, transform .45s cubic-bezier(.15, 0, 0, 1) 2.15s, opacity .2s 2.15
        }

        .page-ready a.github-fork {
            opacity: 1;
            -moz-transform: rotate(45deg) translate3d(0, 0, 0);
            -ms-transform: rotate(45deg) translate3d(0, 0, 0);
            -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
            transform: rotate(45deg) translate3d(0, 0, 0)
        }

        a.github-fork:hover {
            background-color: #4b4b4b;
            color: #fff
        }

        a.github-fork:before {
            content: " ";
            background: url('') repeat-x top left;
            position: absolute;
            top: 3px;
            width: 100%;
            left: 0;
            height: 1px;
            z-index: 1
        }

        a.github-fork:after {
            content: " ";
            background: url('') repeat-x top left;
            position: absolute;
            bottom: 2px;
            z-index: 1;
            left: 0;
            width: 100%;
            height: 1px
        }

        .filters {
            margin-left: -4px;
            margin-top: 20px
        }

        .filters:after,
        .filters:before {
            content: " ";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            text-align: center;
            transition: transform .5s cubic-bezier(.65, .05, .1, 1)
        }

        .filters:before {
            height: 60%;
            background-color: #282828;
            vertical-align: bottom;
            transform: translate3d(100%, 0, 0)
        }

        .filters:after {
            top: 50%;
            height: 60%;
            background-color: #313131;
            transform: translate3d(-100%, 0, 0)
        }

        .filters.status b {
            opacity: 1;
            transform: translate3d(0, 0, 0)
        }

        .filters.filtering:after,
        .filters.filtering:before {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .filters.filtered:after {
            -moz-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0)
        }

        .filters.filtered:before {
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0)
        }

        .filters.filtered em {
            opacity: 0;
            transform: translate3d(-45px, 0, 0)
        }

        .filters.hidden:after,
        .filters.hidden:before {
            display: none
        }

        .filters.hidden em {
            visibility: hidden
        }

        .filters li {
            display: inline-block;
            padding: 8px 5px;
            background-color: #313131;
            color: #999;
            border-width: 1px 1px 2px 1px;
            border-style: solid;
            border-color: #222;
            border-radius: 3px;
            text-transform: uppercase;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: .75em;
            line-height: 1em;
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
            margin: 3px;
            opacity: 1;
            cursor: pointer;
            position: relative;
            overflow: hidden
        }

        .filters li:after,
        .filters li:before {
            content: " ";
            top: 0;
            left: 0;
            height: 50%;
            display: block;
            width: 100%;
            position: absolute;
            z-index: 1;
            -moz-transition: -moz-transform .3s cubic-bezier(.65, .05, .1, 1);
            -o-transition: -o-transform .3s cubic-bezier(.65, .05, .1, 1);
            -webkit-transition: -webkit-transform .3s cubic-bezier(.65, .05, .1, 1);
            transition: transform .3s cubic-bezier(.65, .05, .1, 1)
        }

        .filters li:after {
            background-color: #3f3f3f;
            top: 50%;
            -moz-transform: translate3d(105%, 0, 0);
            -ms-transform: translate3d(105%, 0, 0);
            -webkit-transform: translate3d(105%, 0, 0);
            transform: translate3d(105%, 0, 0);
            -moz-transition-delay: 75ms;
            -o-transition-delay: 75ms;
            -webkit-transition-delay: 75ms;
            transition-delay: 75ms
        }

        .filters li:before {
            top: 0;
            background-color: #515151;
            -moz-transform: translate3d(-105%, 0, 0);
            -ms-transform: translate3d(-105%, 0, 0);
            -webkit-transform: translate3d(-105%, 0, 0);
            transform: translate3d(-105%, 0, 0)
        }

        .filters li.active:after,
        .filters li.active:before,
        .filters li:hover:after,
        .filters li:hover:before {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .filters span {
            position: relative;
            z-index: 2
        }

        .filters em {
            position: fixed;
            top: 50%;
            left: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            margin-top: -20px;
            font-size: 20px;
            letter-spacing: -1px;
            color: #8a8a8a;
            text-align: center;
            z-index: 9000;
            font-style: normal;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            -moz-transition: -moz-transform .2s ease-out, opacity .2s ease-out;
            -o-transition: -o-transform .2s ease-out, opacity .2s ease-out;
            -webkit-transition: -webkit-transform .2s ease-out, opacity .2s ease-out;
            transition: transform .2s ease-out, opacity .2s ease-out
        }

        .filters b {
            display: inline-block;
            margin: 0 4px;
            opacity: 0;
            transform: translate3d(45px, 0, 0);
            -moz-transition: -moz-transform .4s cubic-bezier(0, 0, 0, 1), opacity .2s ease-out;
            -o-transition: -o-transform .4s cubic-bezier(0, 0, 0, 1), opacity .2s ease-out;
            -webkit-transition: -webkit-transform .4s cubic-bezier(0, 0, 0, 1), opacity .2s ease-out;
            transition: transform .4s cubic-bezier(0, 0, 0, 1), opacity .2s ease-out
        }

        .filters b:nth-child(2) {
            -moz-transition-delay: 50ms;
            -o-transition-delay: 50ms;
            -webkit-transition-delay: 50ms;
            transition-delay: 50ms
        }

        .filters b:nth-child(3) {
            -moz-transition-delay: .1s;
            -o-transition-delay: .1s;
            -webkit-transition-delay: .1s;
            transition-delay: .1s
        }

        .filters small {
            color: black;
            font-size: .75em;
            line-height: 1em;
            padding: 0 4px;
            margin: 26px 0 4px;
            display: block;
            font-size: .9em
        }

        article {
            display: block;
            padding: 80px 0;
            text-align: left
        }

        article.blog .text>div:first-child:first-letter {
            float: left;
            font-size: 3.8em;
            line-height: .7em;
            padding-top: 3px;
            padding-right: 3px;
            padding-left: 2px;
            color: #cacaca;
            font-weight: 700
        }

        article.custom .ad {
            display: block;
            text-align: center;
            margin: 0 20px;
            min-height: 129px;
            background-color: rgba(255, 255, 255, .02)
        }

        article.custom .copy-code {
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        article.custom .copy-code:hover {
            text-decoration: underline
        }

        article.custom .shortcut {
            font-weight: 700
        }

        article.custom header {
            margin-bottom: 40px !important
        }

        article.custom header h1 {
            text-transform: none !important
        }

        article.custom header ul {
            width: 100%;
            display: block;
            margin-bottom: 6px;
            margin-left: -3px;
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        article.custom header li {
            display: inline-block;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            margin: 0 5px;
            color: #7a7a7a
        }

        article.custom header p {
            padding-right: 2px
        }

        article.custom .author {
            margin: 25px 20px;
            border-radius: 0
        }

        article.custom .text {
            margin-top: 60px
        }

        article.custom .text .green {
            color: #3be660
        }

        article.custom .text .yellow {
            color: #e3f45e
        }

        article.custom .text .blue {
            color: #338bdc
        }

        article.custom .text .red {
            color: #f05f70
        }

        article.custom .text strong {
            font-weight: 700
        }

        article.custom .text ul {
            margin: 1.2em 0
        }

        article.custom .text li {
            margin-bottom: 1.2em !important;
            font-size: 1em !important
        }

        article.custom .text li p {
            margin-bottom: 0
        }

        article.custom .text li h3 small {
            display: inline-block;
            margin-left: 10px;
            font-size: .7em
        }

        article.custom .text small {
            font-size: .8em;
            display: block
        }

        article.custom .text code {
            margin-bottom: 0 !important;
            font-size: 1em;
            margin: .3em 0
        }

        article.custom .text p {
            margin-bottom: 1.2em
        }

        article.custom .text section {
            margin-bottom: 1.2em
        }

        article.custom .text .coded em {
            display: inline-block;
            font-style: normal;
            background-color: rgba(0, 0, 0, .15);
            padding: 0 6px;
            font-family: monospace;
            white-space: pre;
            color: #cacaca;
            font-size: .7em;
            vertical-align: -1px
        }

        article .caniuse iframe {
            width: 100%;
            height: 500px;
            border: none
        }

        article .extra-cookies {
            text-align: center;
            max-width: 600px;
            padding: .5em;
            margin-top: .6em;
            margin: 0 auto
        }

        article .extra-cookies p {
            font-size: .85em
        }

        article .bottom-share {
            text-align: center
        }

        article .bottom-share small {
            display: block;
            font-size: .85em;
            margin-bottom: 12px
        }

        article .bottom-share awesome-button {
            margin: 10px
        }

        article .media {
            margin: 20px 20px 60px;
            position: relative;
            display: block;
            width: calc(100% - 40px);
            background-color: #333;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, .15);
            overflow: visible
        }

        @media all and (max-width:600px) {
            article .media {
                width: 100%
            }
        }

        article .media small {
            background-color: transparent;
            padding: 4px 10px;
            text-align: center;
            font-weight: 700;
            display: block;
            position: absolute;
            top: 0;
            z-index: 10;
            right: 0;
            color: #3f3f3f;
            line-height: 17px;
            font-size: 11px
        }

        article .media small a {
            font-family: Lato, Helvetica, Arial, sans-serif;
            font-size: 11px;
            font-weight: 700
        }

        article .media small a:hover {
            text-decoration: underline
        }

        article .media .current,
        article .media img {
            -moz-transition: -moz-transform .15s ease-out, opacity .15s ease-out;
            -o-transition: -o-transform .15s ease-out, opacity .15s ease-out;
            -webkit-transition: -webkit-transform .15s ease-out, opacity .15s ease-out;
            transition: transform .15s ease-out, opacity .15s ease-out
        }

        article .media .current.hidden,
        article .media img.hidden {
            opacity: 0;
            -moz-transform: scale(.95);
            -ms-transform: scale(.95);
            -webkit-transform: scale(.95);
            transform: scale(.95)
        }

        article awesome-slider {
            display: block;
            max-width: 110%;
            width: 100%
        }

        article .bar {
            display: block;
            width: 100%
        }

        @media all and (max-width:720px) {
            article .follow-me {
                display: none !important
            }
        }

        article .share {
            opacity: 1;
            visibility: visible;
            display: block;
            width: 100%;
            margin-top: 20px
        }

        article .share .s_ {
            float: right
        }

        article .share .g_ {
            margin-right: 0
        }

        article .share awesome-button {
            margin: 0 8px 8px 0
        }

        article .share>div {
            vertical-align: text-top !important
        }

        article .promote {
            margin: 0 20px
        }

        article .promote>div {
            vertical-align: text-top !important
        }

        article .tweet {
            border-left: 5px solid #4a4a4a;
            padding: 16px;
            margin: 25px 20px;
            background-color: #363636;
            display: block;
            font-family: inherit
        }

        article .tweet .thumb {
            float: left;
            width: 50px;
            height: 50px
        }

        article .tweet img {
            width: 50px;
            height: 50px
        }

        article .tweet .info {
            margin-left: 60px
        }

        article .tweet h3 {
            color: #efefef;
            font-size: 1.1em;
            line-height: 1.4em;
            font-weight: 600
        }

        article .tweet span {
            margin-bottom: 6px;
            display: block;
            color: #8a8a8a;
            font-size: .8em
        }

        article .tweet p {
            font-size: 1em;
            line-height: 1.4em;
            color: #8a8a8a
        }

        article .fb_iframe_widget iframe,
        article .fb_iframe_widget span {
            width: 90px !important;
            height: 20px !important
        }

        article .support {
            max-width: 250px;
            width: 90%;
            margin: 10px 0
        }

        article .support:nth-last-child(1) {
            margin-bottom: 0
        }

        article .author {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 4em;
            background-color: rgba(255, 255, 255, .05);
            padding: 1em;
            border-radius: 4px
        }

        article .author>figure {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 16px;
            flex: none
        }

        article .author img {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        article .author>div {
            padding-top: 4px
        }

        article .author h4 {
            font-family: Lato, Helvetica, Arial, sans-serif;
            margin-bottom: .3em;
            font-size: .95em;
            line-height: 1.5em
        }

        article .author h5 {
            margin-bottom: 6px;
            font-size: 1em;
            font-weight: 700;
            line-height: 1em
        }

        article .author p,
        article .author small {
            font-size: .9em;
            line-height: 1.5em
        }

        article .author small {
            display: block;
            margin-top: .3em
        }

        article .text {
            text-align: left;
            margin: 0 20px 35px;
            color: #8a8a8a
        }

        article .text del {
            text-decoration: line-through
        }

        article .text li,
        article .text p {
            font-size: 1.3em;
            line-height: 1.65em
        }

        article .text h2 {
            font-size: 2em;
            line-height: 1.35em;
            font-weight: 600;
            position: relative;
            display: block;
            letter-spacing: -.045em;
            padding: 0;
            margin-bottom: .4em
        }

        article .text em {
            font-style: italic
        }

        article .text hr {
            display: block;
            height: 1px;
            width: 50%;
            background-color: #484848;
            position: relative;
            border: 0;
            margin: .5em 0 1em
        }

        article .text hr.s_ {
            width: 35%
        }

        article .text h3 {
            font-size: 1.55em;
            line-height: 35px;
            margin-bottom: .4em;
            margin-top: 1.5em;
            font-weight: 700;
            letter-spacing: -.03em
        }

        article .text blockquote {
            border-left: 4px solid #8a8a8a;
            color: #8a8a8a;
            font-style: normal;
            margin: 1.5em 0;
            font-size: 1.5em;
            line-height: 1.55em;
            padding: .75em 1em;
            background-color: rgba(0, 0, 0, .1)
        }

        article .text p {
            margin-bottom: 1em
        }

        article .text ul {
            list-style: circle;
            padding: 0 1.4em;
            margin-bottom: .6em
        }

        article .text ol {
            list-style: decimal;
            padding: 0 1.4em;
            margin-bottom: .6em
        }

        article .text li {
            margin-bottom: 3px
        }

        article .text>div {
            margin-bottom: 3em
        }

        article .text code {
            display: block;
            padding: 12px;
            background-color: rgba(0, 0, 0, .2);
            margin-bottom: 40px
        }

        article .text .tag {
            color: #f92672;
            font-style: normal;
            font-weight: 700
        }

        article .text .prop {
            color: #e6db74;
            font-weight: 400
        }

        article .text .fancy a {
            font-weight: 700;
            padding: 1px 1px 0;
            font-size: .9em;
            text-transform: uppercase;
            display: block;
            color: #cacaca
        }

        article .text strong {
            color: #9f9f9f
        }

        article .text .media {
            margin: 2em 0 2em;
            width: 100%
        }

        article footer {
            line-height: 20px;
            color: #8a8a8a;
            margin-top: 30px;
            text-align: center
        }

        .debugger-box {
            position: fixed;
            z-index: 9999;
            background-color: #fff;
            width: 100%;
            height: 100px;
            top: 10%;
            right: 10%
        }

        .grid-list {
            display: flex;
            margin: 50px; /* i change the margin of the grid here */
            flex-wrap: wrap;
            position: relative;
            -moz-transition: opacity .3s ease-out;
            -o-transition: opacity .3s ease-out;
            -webkit-transition: opacity .3s ease-out;
            transition: opacity .3s ease-out
        }

        .grid-list.hidden {
            opacity: 0
        }

        .grid-list picture {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0
        }

        .grid-list picture img {
            object-fit: cover
        }

        .grid-list .back {
            z-index: 1
        }

        .grid-list .item {
            position: relative;
            display: block;
            padding: 1.2em;
            width: 50%
        }

        .grid-list .item .title {
            display: flex;
            background-color: #2f2f2f;
            height: 100%;
            width: 100%;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 10%;
            align-items: center;
            justify-content: center
        }

        .grid-list .item .title>div {
            position: relative;
            margin-top: -.5em
        }

        .grid-list .item .title:before {
            content: " ";
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url('');
            background-size: 50% auto;
            background-repeat: no-repeat;
            background-position: center center;
            filter: grayscale(1);
            opacity: .05
        }

        .grid-list .item .title strong {
            position: relative;
            top: -.2em;
            text-align: center;
            width: 100%
        }

        .grid-list .item .title .blue {
            font-style: italic;
            color: #3ba3c7
        }

        .grid-list .item.hidden {
            display: none
        }

        .grid-list .item.active .imgs,
        .grid-list .item.hover .imgs {
            opacity: 1;
            transform: translate3d(0, 0, 0)
        }

        .grid-list .item.active .tags:before,
        .grid-list .item.hover .tags:before {
            opacity: 1;
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .grid-list .item.active .tags li,
        .grid-list .item.hover .tags li {
            opacity: 1;
            -moz-transform: translate3d(0, 0, 0) rotateX(0);
            -ms-transform: translate3d(0, 0, 0) rotateX(0);
            -webkit-transform: translate3d(0, 0, 0) rotateX(0);
            transform: translate3d(0, 0, 0) rotateX(0)
        }

        .grid-list .item.ready .tags li,
        .grid-list .item.ready .tags:before,
        .grid-list .item.ready h2 {
            -moz-transition-delay: 0s, 0s;
            -o-transition-delay: 0s, 0s;
            -webkit-transition-delay: 0s, 0s;
            transition-delay: 0s, 0s
        }

        .grid-list .item:nth-child(2) .awarded,
        .grid-list .item:nth-child(2) .blog,
        .grid-list .item:nth-child(2) .coding,
        .grid-list .item:nth-child(2) .fresh,
        .grid-list .item:nth-child(2) .fwa,
        .grid-list .item:nth-child(2) .github {
            -moz-transition-delay: .2s;
            -o-transition-delay: .2s;
            -webkit-transition-delay: .2s;
            transition-delay: .2s
        }

        .grid-list .item:nth-child(3) .awarded,
        .grid-list .item:nth-child(3) .blog,
        .grid-list .item:nth-child(3) .coding,
        .grid-list .item:nth-child(3) .fresh,
        .grid-list .item:nth-child(3) .fwa,
        .grid-list .item:nth-child(3) .github {
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        .grid-list .item:nth-child(4) .awarded,
        .grid-list .item:nth-child(4) .blog,
        .grid-list .item:nth-child(4) .coding,
        .grid-list .item:nth-child(4) .fresh,
        .grid-list .item:nth-child(4) .fwa,
        .grid-list .item:nth-child(4) .github {
            -moz-transition-delay: .6s;
            -o-transition-delay: .6s;
            -webkit-transition-delay: .6s;
            transition-delay: .6s
        }

        .grid-list .awarded {
            width: 160px;
            height: 100px;
            line-height: 160px;
            background-color: #313131;
            position: absolute;
            right: -60px;
            top: -30px;
            z-index: 10;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            text-transform: lowercase;
            font-weight: 700;
            letter-spacing: -1.5px;
            font-style: normal;
            font-size: 16px;
            color: #888;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
            background-image: url('');
            background-repeat: no-repeat;
            background-position: 50% 41px;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -moz-transition: -moz-transform .5s cubic-bezier(.2, 0, 0, 1);
            -o-transition: -o-transform .5s cubic-bezier(.2, 0, 0, 1);
            -webkit-transition: -webkit-transform .5s cubic-bezier(.2, 0, 0, 1);
            transition: transform .5s cubic-bezier(.2, 0, 0, 1)
        }

        .grid-list .awarded.hidden {
            -moz-transform: rotate(45deg) translate3d(0, -80px, 0);
            -ms-transform: rotate(45deg) translate3d(0, -80px, 0);
            -webkit-transform: rotate(45deg) translate3d(0, -80px, 0);
            transform: rotate(45deg) translate3d(0, -80px, 0)
        }

        .grid-list .article h2 {
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-size: 21px;
            letter-spacing: -.04em;
            font-weight: 700;
            position: relative;
            z-index: 5;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
            line-height: 1.15em
        }

        @media all and (max-width:1300px) {
            .grid-list .article h2 {
                font-size: 19px
            }
        }

        @media all and (max-width:1100px) {
            .grid-list .article h2 {
                font-size: 19px
            }
        }

        @media all and (max-width:900px) {
            .grid-list .article h2 {
                font-size: 19px
            }
        }

        @media all and (max-width:800px) {
            .grid-list .article h2 {
                font-size: 19px;
            }
        }

        @media all and (max-width:500px) {
            .grid-list .article h2 {
                font-size: 18px
            }
        }

        @media all and (max-width:420px) {
            .grid-list .article h2 {
                font-size: 18px
            }
        }

        @media all and (max-width:360px) {
            .grid-list .article h2 {
                font-size: 17px;
            }
        }

        .grid-list .article .imgs {
            background-color: rgba(0, 0, 0, .5)
        }

        .grid-list .screen {
            position: relative;
            display: block;
            z-index: 10;
            box-shadow: 8px 8px 0 rgba(0, 0, 0, .05);
            overflow: hidden
        }

        .grid-list .bar h2,
        .grid-list .bar h3 {
            content: attr(data-text);
            text-align: center;
            font-size: 10px;
            text-transform: uppercase;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            line-height: 26px;
            letter-spacing: -.5px;
            color: #8a8a8a
        }

        .grid-list .main {
            background-size: cover;
            padding-top: 58%;
            position: relative;
            background-position: center center;
            display: block;
            width: 100%;
            border-radius: 0;
            -moz-transform-style: flat;
            -webkit-transform-style: flat;
            transform-style: flat
        }

        .grid-list .main:before {
            content: "";
            position: absolute;
            z-index: 20;
            box-shadow: 0 0 50px rgba(0, 0, 0, .75) inset;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .grid-list .main:after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background-image: url('') !important;
            background-color: #333;
            background-blend-mode: initial;
            background-size: auto 75px;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 1;
            transform: translate3d(0, 0, 0);
            -webkit-filter: grayscale(.75);
            filter: grayscale(.75)
        }

        .grid-list .imgs {
            left: -2px;
            width: calc(100% + 4px);
            border-radius: 0;
            opacity: 0;
            z-index: 3;
            overflow: hidden;
            -moz-transform: translate3d(0, -100%, 0);
            -ms-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            -moz-transform-style: flat;
            -webkit-transform-style: flat;
            transform-style: flat;
            -moz-transition: opacity .15s ease-out, -moz-transform .25s cubic-bezier(0, .75, 0, 1);
            -o-transition: opacity .15s ease-out, -o-transform .25s cubic-bezier(0, .75, 0, 1);
            -webkit-transition: opacity .15s ease-out, -webkit-transform .25s cubic-bezier(0, .75, 0, 1);
            transition: opacity .15s ease-out, transform .25s cubic-bezier(0, .75, 0, 1)
        }

        .grid-list .imgs:before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(10, 10, 10, .7);
            background-blend-mode: luminosity
        }

        .is-ie .grid-list .imgs {
            background-image: none !important
        }

        .grid-list .tags {
            opacity: 1;
            position: absolute;
            text-align: left;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 8;
            display: block
        }

        .grid-list .tags:before {
            content: "more ..";
            display: block;
            position: absolute;
            bottom: 20px;
            font-weight: 400;
            width: 60px;
            left: calc(50% - 30px);
            padding: 0 .5em;
            font-size: .75em;
            opacity: 0;
            text-align: center;
            border-radius: 3px;
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
            background-color: #313131;
            color: #999;
            text-shadow: -1px -1px 0 #3f3f3f, -1px 0 0 #3f3f3f, -1px 1px 0 #3f3f3f, 0 -1px 0 #3f3f3f, 0 0 0 #3f3f3f, 0 1px 0 #3f3f3f, 1px -1px 0 #3f3f3f, 1px 0 0 #3f3f3f, 1px 1px 0 #3f3f3f;
            -moz-transform: translate3d(0, 20px, 0);
            -ms-transform: translate3d(0, 20px, 0);
            -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
            -moz-transition: -moz-transform .225s cubic-bezier(.65, 1.55, .5, 1.3) .9s, opacity .1s ease-out .9s;
            -o-transition: -o-transform .225s cubic-bezier(.65, 1.55, .5, 1.3) .9s, opacity .1s ease-out .9s;
            -webkit-transition: -webkit-transform .225s cubic-bezier(.65, 1.55, .5, 1.3), opacity .1s ease-out;
            /* -webkit-transition-delay: .9s, .9s; */
            transition: transform .225s cubic-bezier(.65, 1.55, .5, 1.3) .9s, opacity .1s ease-out .9s
        }

        .grid-list .tags div {
            display: block;
            height: 100%;
            margin: 0 auto;
            width: 80%;
            position: relative;
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center
        }

        .grid-list .tags ul {
            display: block;
            text-align: center;
            position: relative;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d
        }

        .grid-list .tags li {
            display: inline-block;
            padding: 0 .5em;
            background-color: #313131;
            color: #999;
            border-width: 1px 1px 2px 1px;
            border-style: solid;
            border-color: #222;
            border-radius: 3px;
            text-transform: uppercase;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            font-size: .75em;
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
            margin: 2px;
            opacity: 0;
            position: relative;
            text-shadow: -1px -1px 0 #3f3f3f, -1px 0 0 #3f3f3f, -1px 1px 0 #3f3f3f, 0 -1px 0 #3f3f3f, 0 0 0 #3f3f3f, 0 1px 0 #3f3f3f, 1px -1px 0 #3f3f3f, 1px 0 0 #3f3f3f, 1px 1px 0 #3f3f3f;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform-origin: 50% 50% -10px;
            -webkit-transform-origin: 50% 50% -10px;
            transform-origin: 50% 50% -10px;
            -moz-transform-style: flat;
            -webkit-transform-style: flat;
            transform-style: flat;
            -moz-transform: rotateX(92deg);
            -ms-transform: rotateX(92deg);
            -webkit-transform: rotateX(92deg);
            transform: rotateX(92deg);
            -moz-transition: -moz-transform .285s cubic-bezier(.5, 1.5, .5, 1.5);
            -o-transition: -o-transform .285s cubic-bezier(.5, 1.5, .5, 1.5);
            -webkit-transition: -webkit-transform .285s cubic-bezier(.5, 1.5, .5, 1.5);
            transition: transform .285s cubic-bezier(.5, 1.5, .5, 1.5)
        }

        .grid-list .tags li:nth-child(1) {
            -moz-transition-delay: .45s, .45s;
            -o-transition-delay: .45s, .45s;
            -webkit-transition-delay: .45s, .45s;
            transition-delay: .45s, .45s;
            z-index: 12
        }

        .grid-list .tags li:nth-child(2) {
            -moz-transition-delay: .49s, .49s;
            -o-transition-delay: .49s, .49s;
            -webkit-transition-delay: .49s, .49s;
            transition-delay: .49s, .49s;
            z-index: 11
        }

        .grid-list .tags li:nth-child(3) {
            -moz-transition-delay: .53s, .53s;
            -o-transition-delay: .53s, .53s;
            -webkit-transition-delay: .53s, .53s;
            transition-delay: .53s, .53s;
            z-index: 10
        }

        .grid-list .tags li:nth-child(4) {
            -moz-transition-delay: .57s, .57s;
            -o-transition-delay: .57s, .57s;
            -webkit-transition-delay: .57s, .57s;
            transition-delay: .57s, .57s;
            z-index: 9
        }

        .grid-list .tags li:nth-child(5) {
            -moz-transition-delay: .61s, .61s;
            -o-transition-delay: .61s, .61s;
            -webkit-transition-delay: .61s, .61s;
            transition-delay: .61s, .61s;
            z-index: 8
        }

        .grid-list .tags li:nth-child(6) {
            -moz-transition-delay: .65s, .65s;
            -o-transition-delay: .65s, .65s;
            -webkit-transition-delay: .65s, .65s;
            transition-delay: .65s, .65s;
            z-index: 7
        }

        .grid-list .tags li:nth-child(7) {
            -moz-transition-delay: .69s, .69s;
            -o-transition-delay: .69s, .69s;
            -webkit-transition-delay: .69s, .69s;
            transition-delay: .69s, .69s;
            z-index: 6
        }

        .grid-list .tags li:nth-child(8) {
            -moz-transition-delay: .73s, .73s;
            -o-transition-delay: .73s, .73s;
            -webkit-transition-delay: .73s, .73s;
            transition-delay: .73s, .73s;
            z-index: 5
        }

        .grid-list .tags li:nth-child(9) {
            -moz-transition-delay: .77s, .77s;
            -o-transition-delay: .77s, .77s;
            -webkit-transition-delay: .77s, .77s;
            transition-delay: .77s, .77s;
            z-index: 4
        }

        .grid-list .tags li:nth-child(10) {
            -moz-transition-delay: .81s, .81s;
            -o-transition-delay: .81s, .81s;
            -webkit-transition-delay: .81s, .81s;
            transition-delay: .81s, .81s;
            z-index: 3
        }

        .grid-list .tags li:nth-child(11) {
            -moz-transition-delay: .85s, .85s;
            -o-transition-delay: .85s, .85s;
            -webkit-transition-delay: .85s, .85s;
            transition-delay: .85s, .85s;
            z-index: 2
        }

        .grid-list .tags li:nth-child(12) {
            -moz-transition-delay: .89s, .89s;
            -o-transition-delay: .89s, .89s;
            -webkit-transition-delay: .89s, .89s;
            transition-delay: .89s, .89s;
            z-index: 1
        }

        .grid-list .tags .hidden {
            display: none
        }

        @media all and (max-width:1100px) and (min-width:800px) {
            .grid-list .tags li {
                font-size: .7em
            }

            .grid-list .tags:before {
                font-size: .65em
            }
        }

        .grid-list figure {
            width: 100%
        }

        .grid-list img {
            max-width: 100%
        }

        .grid-list .blog,
        .grid-list .coding,
        .grid-list .fresh,
        .grid-list .fwa,
        .grid-list .fwa-mobile,
        .grid-list .github {
            background-color: transparent;
            background-image: url('');
            background-size: cover;
            display: block;
            height: 100px;
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            z-index: 1001;
            text-indent: -9999em;
            -moz-transition: -moz-transform .5s cubic-bezier(.2, 0, 0, 1);
            -o-transition: -o-transform .5s cubic-bezier(.2, 0, 0, 1);
            -webkit-transition: -webkit-transform .5s cubic-bezier(.2, 0, 0, 1);
            transition: transform .5s cubic-bezier(.2, 0, 0, 1)
        }

        .grid-list .blog.hidden,
        .grid-list .coding.hidden,
        .grid-list .fresh.hidden,
        .grid-list .fwa-mobile.hidden,
        .grid-list .fwa.hidden,
        .grid-list .github.hidden {
            -moz-transform: translate3d(100px, -100px, 0);
            -ms-transform: translate3d(100px, -100px, 0);
            -webkit-transform: translate3d(100px, -100px, 0);
            transform: translate3d(100px, -100px, 0)
        }

        /* .grid-list .fwa.mobile {
            background-image: url('')
        }

        .grid-list .github {
            background-image: url('')
        }

        .grid-list .blog {
            background-image: url('')
        }

        .grid-list .coding {
            background-image: url('')
        }

        .grid-list .fresh {
            background-image: url('')
        } */

        /* #loader-bar {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            height: 12px;
            background-color: #6a6a6a;
            z-index: 900;
            width: 100%;
            overflow: hidden;
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0)
        }

        #loader-bar:after,
        #loader-bar:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%
        }

        #loader-bar:before {
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
            -moz-transition: -moz-transform .7s cubic-bezier(.45, .1, .1, 1);
            -o-transition: -o-transform .7s cubic-bezier(.45, .1, .1, 1);
            -webkit-transition: -webkit-transform .7s cubic-bezier(.45, .1, .1, 1);
            transition: transform .7s cubic-bezier(.45, .1, .1, 1);
            background-color: #009688
        }

        #loader-bar:after {
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
            -moz-transition: -moz-transform 1.4s cubic-bezier(.45, .1, .1, 1);
            -o-transition: -o-transform 1.4s cubic-bezier(.45, .1, .1, 1);
            -webkit-transition: -webkit-transform 1.4s cubic-bezier(.45, .1, .1, 1);
            transition: transform 1.4s cubic-bezier(.45, .1, .1, 1);
            background-color: #6a6a6a
        }

        #loader-bar.first {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        #loader-bar.second:before {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        #loader-bar.third:after {
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        #loader-bar.animated {
            will-change: transform;
            -moz-transition: -moz-transform .575s cubic-bezier(.45, .1, .1, 1);
            -o-transition: -o-transform .575s cubic-bezier(.45, .1, .1, 1);
            -webkit-transition: -webkit-transform .575s cubic-bezier(.45, .1, .1, 1);
            transition: transform .575s cubic-bezier(.45, .1, .1, 1)
        }

        #loader-bar.exit {
            -moz-transition-duration: 425ms;
            -o-transition-duration: 425ms;
            -webkit-transition-duration: 425ms;
            transition-duration: 425ms;
            -moz-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0)
        } */

        .back-list {
            position: fixed;
            top: 30px;
            left: 90px;
            width: 52px;
            height: 55px;
            display: block;
            -moz-transition: -moz-transform .25s ease-out .3s;
            -o-transition: -o-transform .25s ease-out .3s;
            -webkit-transition: -webkit-transform .25s ease-out;
            /* -webkit-transition-delay: .3s; */
            transition: transform .25s ease-out .3s
        }

        .back-list i {
            display: block;
            width: 8px;
            height: 8px;
            background-color: #7a7a7a;
            position: absolute;
            top: calc(50% - 4px);
            left: calc(50% - 4px);
            -moz-transition: -moz-transform .15s ease-out;
            -o-transition: -o-transform .15s ease-out;
            -webkit-transition: -webkit-transform .15s ease-out;
            transition: transform .15s ease-out
        }

        .back-list i:nth-child(1) {
            -moz-transform: translateY(-11px) translateX(-11px);
            -ms-transform: translateY(-11px) translateX(-11px);
            -webkit-transform: translateY(-11px) translateX(-11px);
            transform: translateY(-11px) translateX(-11px)
        }

        .back-list i:nth-child(2) {
            -moz-transform: translateY(-11px) translateX(0);
            -ms-transform: translateY(-11px) translateX(0);
            -webkit-transform: translateY(-11px) translateX(0);
            transform: translateY(-11px) translateX(0)
        }

        .back-list i:nth-child(3) {
            -moz-transform: translateY(-11px) translateX(11px);
            -ms-transform: translateY(-11px) translateX(11px);
            -webkit-transform: translateY(-11px) translateX(11px);
            transform: translateY(-11px) translateX(11px)
        }

        .back-list i:nth-child(4) {
            -moz-transform: translateX(-11px);
            -ms-transform: translateX(-11px);
            -webkit-transform: translateX(-11px);
            transform: translateX(-11px)
        }

        .back-list i:nth-child(6) {
            -moz-transform: translateX(11px);
            -ms-transform: translateX(11px);
            -webkit-transform: translateX(11px);
            transform: translateX(11px)
        }

        .back-list i:nth-child(7) {
            -moz-transform: translateY(11px) translateX(-11px);
            -ms-transform: translateY(11px) translateX(-11px);
            -webkit-transform: translateY(11px) translateX(-11px);
            transform: translateY(11px) translateX(-11px)
        }

        .back-list i:nth-child(8) {
            -moz-transform: translateY(11px);
            -ms-transform: translateY(11px);
            -webkit-transform: translateY(11px);
            transform: translateY(11px)
        }

        .back-list i:nth-child(9) {
            -moz-transform: translateY(11px) translateX(11px);
            -ms-transform: translateY(11px) translateX(11px);
            -webkit-transform: translateY(11px) translateX(11px);
            transform: translateY(11px) translateX(11px)
        }

        .no-touch .back-list:hover i:nth-child(1) {
            -moz-transform: translateY(-14px) translateX(-14px);
            -ms-transform: translateY(-14px) translateX(-14px);
            -webkit-transform: translateY(-14px) translateX(-14px);
            transform: translateY(-14px) translateX(-14px)
        }

        .no-touch .back-list:hover i:nth-child(2) {
            -moz-transform: translateY(-14px) translateX(0);
            -ms-transform: translateY(-14px) translateX(0);
            -webkit-transform: translateY(-14px) translateX(0);
            transform: translateY(-14px) translateX(0)
        }

        .no-touch .back-list:hover i:nth-child(3) {
            -moz-transform: translateY(-14px) translateX(14px);
            -ms-transform: translateY(-14px) translateX(14px);
            -webkit-transform: translateY(-14px) translateX(14px);
            transform: translateY(-14px) translateX(14px)
        }

        .no-touch .back-list:hover i:nth-child(4) {
            -moz-transform: translateX(-14px);
            -ms-transform: translateX(-14px);
            -webkit-transform: translateX(-14px);
            transform: translateX(-14px)
        }

        .no-touch .back-list:hover i:nth-child(6) {
            -moz-transform: translateX(14px);
            -ms-transform: translateX(14px);
            -webkit-transform: translateX(14px);
            transform: translateX(14px)
        }

        .no-touch .back-list:hover i:nth-child(7) {
            -moz-transform: translateY(14px) translateX(-14px);
            -ms-transform: translateY(14px) translateX(-14px);
            -webkit-transform: translateY(14px) translateX(-14px);
            transform: translateY(14px) translateX(-14px)
        }

        .no-touch .back-list:hover i:nth-child(8) {
            -moz-transform: translateY(14px);
            -ms-transform: translateY(14px);
            -webkit-transform: translateY(14px);
            transform: translateY(14px)
        }

        .no-touch .back-list:hover i:nth-child(9) {
            -moz-transform: translateY(14px) translateX(14px);
            -ms-transform: translateY(14px) translateX(14px);
            -webkit-transform: translateY(14px) translateX(14px);
            transform: translateY(14px) translateX(14px)
        }

        .back-list.active {
            -moz-transform: translateX(-200px) rotate(90deg);
            -ms-transform: translateX(-200px) rotate(90deg);
            -webkit-transform: translateX(-200px) rotate(90deg);
            transform: translateX(-200px) rotate(90deg)
        }

        .current .back-list.active i:nth-child(1) {
            -moz-transform: translateY(-6px) translateX(-6px);
            -ms-transform: translateY(-6px) translateX(-6px);
            -webkit-transform: translateY(-6px) translateX(-6px);
            transform: translateY(-6px) translateX(-6px)
        }

        .current .back-list.active i:nth-child(2) {
            -moz-transform: translateY(-6px) translateX(0);
            -ms-transform: translateY(-6px) translateX(0);
            -webkit-transform: translateY(-6px) translateX(0);
            transform: translateY(-6px) translateX(0)
        }

        .current .back-list.active i:nth-child(3) {
            -moz-transform: translateY(-6px) translateX(6px);
            -ms-transform: translateY(-6px) translateX(6px);
            -webkit-transform: translateY(-6px) translateX(6px);
            transform: translateY(-6px) translateX(6px)
        }

        .current .back-list.active i:nth-child(4) {
            -moz-transform: translateX(-6px);
            -ms-transform: translateX(-6px);
            -webkit-transform: translateX(-6px);
            transform: translateX(-6px)
        }

        .current .back-list.active i:nth-child(6) {
            -moz-transform: translateX(6px);
            -ms-transform: translateX(6px);
            -webkit-transform: translateX(6px);
            transform: translateX(6px)
        }

        .current .back-list.active i:nth-child(7) {
            -moz-transform: translateY(6px) translateX(-6px);
            -ms-transform: translateY(6px) translateX(-6px);
            -webkit-transform: translateY(6px) translateX(-6px);
            transform: translateY(6px) translateX(-6px)
        }

        .current .back-list.active i:nth-child(8) {
            -moz-transform: translateY(6px);
            -ms-transform: translateY(6px);
            -webkit-transform: translateY(6px);
            transform: translateY(6px)
        }

        .current .back-list.active i:nth-child(9) {
            -moz-transform: translateY(6px) translateX(6px);
            -ms-transform: translateY(6px) translateX(6px);
            -webkit-transform: translateY(6px) translateX(6px);
            transform: translateY(6px) translateX(6px)
        }

        .page-control {
            z-index: 200;
            position: fixed;
            width: 1px;
            height: 1px
        }

        .page-exit .page-control .next {
            -moz-transform: translate3d(500px, 0, 0);
            -ms-transform: translate3d(500px, 0, 0);
            -webkit-transform: translate3d(500px, 0, 0);
            transform: translate3d(500px, 0, 0)
        }

        .page-exit .page-control .back-list,
        .page-exit .page-control .prev {
            -moz-transform: translate3d(-500px, 0, 0);
            -ms-transform: translate3d(-500px, 0, 0);
            -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0)
        }

        .page-control.hidden-prev .prev {
            -moz-transform: translate3d(-500px, 0, 0);
            -ms-transform: translate3d(-500px, 0, 0);
            -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0)
        }

        .game-on .page-control .back-list {
            -moz-transform: translate3d(-150px, 0, 0);
            -ms-transform: translate3d(-150px, 0, 0);
            -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0)
        }

        .no-touch .page-control .next:hover em:before,
        .no-touch .page-control .prev:hover em:before {
            -moz-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
            -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg)
        }

        .no-touch .page-control .next:hover em:after,
        .no-touch .page-control .prev:hover em:after {
            -moz-transform: rotate(-150deg);
            -ms-transform: rotate(-150deg);
            -webkit-transform: rotate(-150deg);
            transform: rotate(-150deg)
        }

        .page-control .next em,
        .page-control .prev em {
            display: block;
            position: absolute;
            height: 36px;
            width: 36px;
            top: calc(50% - 18.5px);
            left: calc(50% - 18px);
            -moz-transition: -moz-transform .2s ease-out .2s;
            -o-transition: -o-transform .2s ease-out .2s;
            -webkit-transition: -webkit-transform .2s ease-out;
            /* -webkit-transition-delay: .2s; */
            transition: transform .2s ease-out .2s
        }

        .page-control .next em:after,
        .page-control .next em:before,
        .page-control .prev em:after,
        .page-control .prev em:before {
            content: " ";
            position: absolute;
            right: 0;
            height: 100%;
            width: 2px;
            background-color: #7a7a7a;
            -moz-transform-origin: 50% 100% 0;
            -webkit-transform-origin: 50% 100% 0;
            transform-origin: 50% 100% 0;
            -moz-transition: -moz-transform .16s ease-out;
            -o-transition: -o-transform .16s ease-out;
            -webkit-transition: -webkit-transform .16s ease-out;
            transition: transform .16s ease-out
        }

        .page-control .next em:before,
        .page-control .prev em:before {
            top: -50%;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .page-control .next em:after,
        .page-control .prev em:after {
            top: calc(-50% + -1px);
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg)
        }

        .no-touch .page-control .prev:hover em:before {
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg)
        }

        .no-touch .page-control .prev:hover em:after {
            -moz-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg)
        }

        .page-control .prev em:after,
        .page-control .prev em:before {
            right: auto;
            left: 0
        }

        .page-control .prev em:before {
            top: -50%;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .page-control .prev em:after {
            top: calc(-50% + -1px);
            -moz-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        .current .page-control .active.prev em:after,
        .current .page-control .active.prev em:before {
            -moz-transform: rotate(90deg) scale(.75);
            -ms-transform: rotate(90deg) scale(.75);
            -webkit-transform: rotate(90deg) scale(.75);
            transform: rotate(90deg) scale(.75)
        }

        .current .page-control .active.next em:after,
        .current .page-control .active.next em:before {
            -moz-transform: rotate(-90deg) scale(.75);
            -ms-transform: rotate(-90deg) scale(.75);
            -webkit-transform: rotate(-90deg) scale(.75);
            transform: rotate(-90deg) scale(.75)
        }

        .page-control .next,
        .page-control .prev {
            position: fixed;
            top: 25%;
            width: 240px;
            height: 50%;
            -moz-transition: -moz-transform .7s cubic-bezier(.7, 0, .25, 1) .25s, opacity .2s ease-out .75s;
            -o-transition: -o-transform .7s cubic-bezier(.7, 0, .25, 1) .25s, opacity .2s ease-out .75s;
            -webkit-transition: -webkit-transform .7s cubic-bezier(.7, 0, .25, 1), opacity .2s ease-out;
            /* -webkit-transition-delay: .25s, .75s; */
            transition: transform .7s cubic-bezier(.7, 0, .25, 1) .25s, opacity .2s ease-out .75s
        }

        .page-control .next:hover span,
        .page-control .prev:hover span {
            opacity: 1;
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        .page-control .next {
            right: 0
        }

        .page-control .next.active {
            opacity: 0;
            -moz-transform: translate3d(100%, 0, 0);
            -ms-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0)
        }

        .page-control .next.active em {
            -moz-transform: translate3d(120px, 0, 0);
            -ms-transform: translate3d(120px, 0, 0);
            -webkit-transform: translate3d(120px, 0, 0);
            transform: translate3d(120px, 0, 0)
        }

        .page-control .next span {
            right: calc(50% + 5px);
            -moz-transform: translate3d(30px, 0, 0);
            -ms-transform: translate3d(30px, 0, 0);
            -webkit-transform: translate3d(30px, 0, 0);
            transform: translate3d(30px, 0, 0)
        }

        .page-control .prev {
            left: 0
        }

        .page-control .prev.active {
            opacity: 0;
            -moz-transform: translate3d(-100%, 0, 0);
            -ms-transform: translate3d(-100%, 0, 0);
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0)
        }

        .page-control .prev.active em {
            -moz-transform: translate3d(-120px, 0, 0);
            -ms-transform: translate3d(-120px, 0, 0);
            -webkit-transform: translate3d(-120px, 0, 0);
            transform: translate3d(-120px, 0, 0)
        }

        .page-control .prev span {
            left: calc(50% + 5px);
            -moz-transform: translate3d(-30px, 0, 0);
            -ms-transform: translate3d(-30px, 0, 0);
            -webkit-transform: translate3d(-30px, 0, 0);
            transform: translate3d(-30px, 0, 0)
        }

        .page-control span {
            display: inline-block;
            color: #8a8a8a;
            position: absolute;
            white-space: nowrap;
            top: calc(50% - 15.5px);
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            opacity: 0;
            text-transform: lowercase;
            font-size: 1.15em;
            line-height: 1.7em;
            -moz-transition: opacity .1s ease .125s, -moz-transform .3s cubic-bezier(0, 0, 0, 1) .125s;
            -o-transition: opacity .1s ease .125s, -o-transform .3s cubic-bezier(0, 0, 0, 1) .125s;
            -webkit-transition: opacity .1s ease, -webkit-transform .3s cubic-bezier(0, 0, 0, 1);
            /* -webkit-transition-delay: .125s, .125s; */
            transition: opacity .1s ease .125s, transform .3s cubic-bezier(0, 0, 0, 1) .125s
        }

        .page-control .ribbon {
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            width: 200px;
            height: 200px;
            z-index: 9000
        }

        .page-control .ribbon.r_ a {
            transition-delay: 0s, .6s, 1s;
            transition-duration: .2s, .4s, .2s
        }

        .page-control .ribbon a {
            position: absolute;
            display: block;
            width: 200%;
            left: -20%;
            top: -30%;
            z-index: 901;
            cursor: pointer;
            background-color: #cf1702;
            color: white;
            font-size: 13px;
            padding: 0;
            line-height: inherit;
            text-decoration: none;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            box-shadow: -2px 3px 1px rgba(0, 0, 0, .23);
            opacity: 1;
            text-transform: uppercase;
            transform: translate3d(0, 0, 0) rotate(45deg);
            transform-origin: 0 0;
            height: 44px;
            line-height: 47px;
            transition: background-color .2s ease-out 0s, transform .7s cubic-bezier(.7, 0, .25, 1) 1s, opacity .2s ease-out 1s
        }

        .page-exit .page-control .ribbon a {
            transform: rotate(45deg) translate3d(0, -170px, 0)
        }

        @media all and (max-width:4000px) {
            .page-exit .page-control .ribbon a {
                transform: rotate(45deg) translate3d(0, -290px, 0)
            }
        }

        @media all and (max-width:2000px) {
            .page-exit .page-control .ribbon a {
                transform: rotate(45deg) translate3d(0, -290px, 0)
            }
        }

        @media all and (max-width:1700px) {
            .page-exit .page-control .ribbon a {
                transform: rotate(45deg) translate3d(0, -240px, 0)
            }
        }

        @media all and (max-width:1440px) {
            .page-exit .page-control .ribbon a {
                transform: rotate(45deg) translate3d(0, -190px, 0)
            }
        }

        .page-control .ribbon a:hover {
            background-color: aqua;
            color: rgb(26, 24, 24)
        }

        .page-control .ribbon a:after,
        .page-control .ribbon a:before {
            content: " ";
            position: absolute;
            z-index: 1;
            left: 0;
            width: 100%;
            height: 1px
        }

        .page-control .ribbon a:before {
            top: 3px
        }

        .page-control .ribbon a:after {
            bottom: 3px
        }

        @media all and (max-width:3000px) {
            .page-control .ribbon a {
                width: 220%;
                left: -35%;
                top: -20%
            }
        }

        @media all and (max-width:1920px) {
            .page-control .ribbon a {
                width: 220%;
                left: -35%;
                top: -20%
            }
        }

        @media all and (max-width:1460px) {
            .page-control .ribbon a {
                width: 200%;
                left: -15%;
                top: -25%
            }
        }

        @media all and (max-width:1024px) {
            .page-control .ribbon a {
                width: 200%;
                left: -12%;
                top: -29%;
                font-size: 11px
            }
        }

        @media all and (max-width:740px) {
            .page-control .ribbon a {
                width: 200%;
                left: -10%;
                top: -31%
            }
        }

        @media all and (max-width:560px) {
            .page-control .ribbon a {
                width: 200%;
                left: -4%;
                top: -37%
            }
        }

        /* .avatar-loader.def {
            display: table;
            z-index: 500
        }

        .avatar-loader.def .avatar-wrapper {
            width: 25%;
            height: 25%;
            display: block
        }

        .avatar-loader.def .circle path {
            fill: #999
        }

        .avatar-loader.def img.ninja {
            position: absolute;
            top: 15%;
            left: 12.8%;
            height: 70%;
            width: 70%;
            -moz-transition-delay: 0s;
            -o-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s
        }

        .avatar-loader.def .fill:nth-child(1) {
            stroke: #2f2f2f
        }

        .avatar-loader.def .fill:nth-child(2) {
            stroke: #3c3c3c
        }

        .avatar-loader.def .fill:nth-child(3) {
            stroke: #2f2f2f
        }

        .avatar-loader.def .out {
            stroke: #8a8a8a
        }

        .avatar-loader .avatar.no-delay svg {
            -moz-transition-delay: 70ms, 70ms;
            -o-transition-delay: 70ms, 70ms;
            -webkit-transition-delay: 70ms, 70ms;
            transition-delay: 70ms, 70ms
        }

        .avatar-loader .avatar.no-delay .ninja {
            -moz-transition-delay: 0s, 0s;
            -o-transition-delay: 0s, 0s;
            -webkit-transition-delay: 0s, 0s;
            transition-delay: 0s, 0s
        }

        .avatar-loader .avatar.exit svg {
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        .avatar-loader .avatar.exit .ninja {
            -moz-transform: translate3d(0, 2px, 0) rotate(180deg) scale(.01);
            -ms-transform: translate3d(0, 2px, 0) rotate(180deg) scale(.01);
            -webkit-transform: translate3d(0, 2px, 0) rotate(180deg) scale(.01);
            transform: translate3d(0, 2px, 0) rotate(180deg) scale(.01)
        } */

        #labs {
            background-color: #2f2f2f
        }

        #labs .centered {
            background: linear-gradient(to top, #2f2f2f 96%, #393939 100%)
        }

        #labs header {
            margin: 0 20px
        }

        #portfolio {
            text-align: center;
            background-color: #2a2a2a
        }

        #portfolio .centered {
            background-color: #2a2a2a
        }

        #portfolio .grid-list {
            margin-bottom: 40px
        }

        #error {
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center;
            text-align: center;
            background-color: #912b2b
        }

        #error .centered {
            width: 100%;
            text-align: center
        }

        #error h1 {
            text-shadow: none;
            font-size: 4.5em
        }

        #error p {
            color: #fff;
            margin-bottom: 4px
        }

        #error a {
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            text-decoration: underline;
            display: block;
            margin-top: 12px
        }

        #error a:hover {
            text-decoration: underline;
            color: #fafafa
        }

        #contact {
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center;
            text-align: center;
            background-color: #2f2f2f
        }

        #contact header a {
            font-size: 1em
        }

        #contact p {
            font-size: 1.15em;
            line-height: 1.7em;
            color: #8a8a8a
        }

        #contact .centered {
            width: 100%;
            background-color: #2f2f2f
        }

        #contact .lets-talk {
            margin: 80px 20px 0
        }

        #contact .submit {
            text-align: left
        }

        #contact .share {
            text-align: left;
            margin: 70px 0 0
        }

        #contact .share h4 {
            font-size: 1.4em;
            line-height: 1.7em;
            color: #8a8a8a;
            font-weight: 700;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700
        }

        #contact .share p {
            margin-bottom: 16px
        }

        #contact .share awesome-button {
            margin: 0 8px 8px 0
        }

        #contact h1 {
            text-transform: none
        }

        @media all and (max-width:600px) {
            #contact {
                display: block
            }
        }

        @media all and (max-height:600px) {
            #contact {
                display: block
            }

            #contact .lets-talk {
                margin-top: 65px
            }

            #contact .share {
                margin-top: 65px
            }
        }

        .lets-talk {
            position: relative;
            -moz-transition: -moz-transform .16s ease-out;
            -o-transition: -o-transform .16s ease-out;
            -webkit-transition: -webkit-transform .16s ease-out;
            transition: transform .16s ease-out
        }

        .lets-talk form {
            position: relative
        }

        .lets-talk.textarea .input-block {
            height: auto
        }

        .lets-talk.textarea .input-block li:nth-child(3) {
            display: block;
            position: relative
        }

        .lets-talk.sent .label {
            left: -100px;
            opacity: 0
        }

        .lets-talk awesome-button {
            margin: 0 8px 8px 0
        }

        .lets-talk .common {
            display: block;
            opacity: 0;
            position: absolute;
            z-index: 1;
            left: 7px;
            width: 20px;
            height: 18px;
            top: 11px
        }

        .lets-talk .common path {
            fill: #797979
        }

        .input-block {
            position: relative;
            margin-bottom: 15px;
            cursor: text;
            height: 50px;
            padding: 0
        }

        .input-block .name .i-svg {
            margin-top: 4px
        }

        .input-block .name .label {
            -moz-transition-delay: 0s, 0s, .1s, .1s;
            -o-transition-delay: 0s, 0s, .1s, .1s;
            -webkit-transition-delay: 0s, 0s, .1s, .1s;
            transition-delay: 0s, 0s, .1s, .1s
        }

        .input-block .email .i-svg {
            margin-top: 5px
        }

        .input-block .email .label {
            -moz-transition-delay: 0s, 0s, .15s, .15s;
            -o-transition-delay: 0s, 0s, .15s, .15s;
            -webkit-transition-delay: 0s, 0s, .15s, .15s;
            transition-delay: 0s, 0s, .15s, .15s
        }

        .input-block .msg .i-svg {
            margin-top: 5px
        }

        .input-block .msg .label {
            -moz-transition-delay: 0s, 0s, .2s, .2s;
            -o-transition-delay: 0s, 0s, .2s, .2s;
            -webkit-transition-delay: 0s, 0s, .2s, .2s;
            transition-delay: 0s, 0s, .2s, .2s
        }

        .input-block .focus .label {
            cursor: pointer;
            padding: 10px 7px
        }

        .input-block .focus .label:hover {
            background-color: #333 !important
        }

        .input-block .focus label {
            cursor: pointer
        }

        .input-block .focus .common {
            opacity: 1
        }

        .input-block.animated .label {
            -moz-transition: -moz-transform .16s ease-out, background .3s ease-out, left .2s ease-out, opacity .2s ease-out, padding .16s ease-out;
            -o-transition: -o-transform .16s ease-out, background .3s ease-out, left .2s ease-out, opacity .2s ease-out, padding .16s ease-out;
            -webkit-transition: -webkit-transform .16s ease-out, background .3s ease-out, left .2s ease-out, opacity .2s ease-out, padding .16s ease-out;
            transition: transform .16s ease-out, background .3s ease-out, left .2s ease-out, opacity .2s ease-out, padding .16s ease-out
        }

        .input-block .label {
            position: absolute;
            top: 2px;
            left: 2px;
            padding: 0 7px;
            z-index: 10;
            color: #000;
            line-height: 50px;
            font-weight: 700;
            font-size: 18px;
            color: #6a6a6a;
            cursor: text;
            max-width: 620px;
            overflow: hidden;
            text-align: left;
            padding: 15px 7px;
            height: 50px;
            -moz-transform-origin: 0 50% 0;
            -webkit-transform-origin: 0 50% 0;
            transform-origin: 0 50% 0
        }

        .input-block .label .i-svg {
            height: 18px;
            width: 20px;
            display: block;
            float: left;
            margin-top: -1px;
            margin-left: -2px
        }

        .input-block .label .i-svg path {
            fill: #7a7a7a
        }

        .input-block .i-svg path {
            -moz-transition: fill .2s ease-out;
            -o-transition: fill .2s ease-out;
            -webkit-transition: fill .2s ease-out;
            transition: fill .2s ease-out
        }

        .input-block .error .label {
            color: #985c5c
        }

        .input-block .error .label path {
            fill: #985c5c
        }

        .input-block .error input,
        .input-block .error textarea {
            border-bottom-color: #955f5f;
            color: #985c5c
        }

        .input-block .error path {
            fill: #985c5c
        }

        .input-block label {
            cursor: text;
            overflow: hidden;
            position: relative;
            display: block;
            line-height: 18px;
            /* vertical-align: middle; */
            margin-left: 25px;
            -moz-transition: color .2s ease-out;
            -o-transition: color .2s ease-out;
            -webkit-transition: color .2s ease-out;
            transition: color .2s ease-out
        }

        .input-block li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .input-block li.active {
            z-index: 120
        }

        .input-block input,
        .input-block textarea {
            position: absolute;
            top: 0;
            left: 0;
            width: 80%;
            height: 100%;
            padding: 6px 14px 5px 33px;
            font-size: 18px;
            font-weight: 700;
            color: #797979;
            border-width: 0 0 1px 0;
            border-style: solid;
            border-color: #797979;
            background-color: #2f2f2f;
            line-height: 100%;
            -moz-transition: background .2s ease-out, border .2s ease-out, color .2s ease-out;
            -o-transition: background .2s ease-out, border .2s ease-out, color .2s ease-out;
            -webkit-transition: background .2s ease-out, border .2s ease-out, color .2s ease-out;
            transition: background .2s ease-out, border .2s ease-out, color .2s ease-out
        }

        .input-block textarea {
            padding: 17px 14px 10px 33px;
            resize: none;
            position: relative;
            display: block;
            font-family: inherit;
            overflow: hidden;
            overflow-x: hidden;
            overflow-y: hidden;
            height: 22px;
            width: calc(80% - 47px);
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            -moz-transition: background .4s ease-out, height 50ms ease-out;
            -o-transition: background .4s ease-out, height 50ms ease-out;
            -webkit-transition: background .4s ease-out, height 50ms ease-out;
            transition: background .4s ease-out, height 50ms ease-out
        }

        .shadow-area {
            position: absolute;
            padding: 17px 14px 10px 33px;
            line-height: 18px;
            resize: none;
            font-size: 18px;
            font-family: Lato, Helvetica, Arial, sans-serif;
            font-weight: 700
        }

        #demo {
            overflow: hidden;
            display: table;
            background-color: #2f2f2f
        }

        #demo .awesome {
            display: table-cell;
            vertical-align: middle
        }

        #demo h1 {
            letter-spacing: -1px;
            margin: 0 0 5px;
            color: #cfcfcf;
            line-height: 32px;
            font-size: 32px;
            text-shadow: 2px 2px 0 rgba(100, 100, 100, .15)
        }

        #demo p {
            margin: 0 0 45px;
            color: #6a6a6a
        }

        #demo awesome-button {
            display: inline-block;
            margin: 5px 3px
        }

        #demo .use {
            display: inline-block;
            margin-top: 55px
        }

        #about {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            text-align: center;
            background-color: #2f2f2f;
            font-size: 1em;
            z-index: 10
        }

        #about awesome-button {
            background: 0 0
        }

        .about-container {
            overflow: hidden
        }

        .about-list {
            padding-top: 40px;
            z-index: 1;
            transform: translateY(100%);
            transform: translateY(100vh)
        }

        .follow-me {
            z-index: 1001;
            position: fixed;
            left: 0;
            top: calc(50% - (275px / 2));
            width: 55px;
            height: 275px
        }

        .follow-me small {
            position: absolute;
            top: -30px;
            left: -2px;
            width: 100%;
            text-align: right;
            color: #7a7a7a;
            font-weight: 600;
            font-size: .65em
        }

        .follow-me.hidden li,
        .page-exit .follow-me li {
            opacity: 0;
            -moz-transform: translate3d(-150px, 0, 0);
            -ms-transform: translate3d(-150px, 0, 0);
            -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0)
        }

        .follow-me li {
            transition: transform 425ms cubic-bezier(.69, .03, .03, .93), opacity .15s ease-out
        }

        .follow-me li:nth-child(1) {
            transition-delay: .65s, .65s
        }

        .follow-me li:nth-child(2) {
            transition-delay: .7s, .7s
        }

        .follow-me li:nth-child(3) {
            transition-delay: .75s, .75s
        }

        .follow-me li:nth-child(4) {
            transition-delay: .8s, .8s
        }

        .follow-me li:nth-child(5) {
            transition-delay: .85s, .85s
        }

        .follow-me li:nth-child(6) {
            transition-delay: .9s, .9s
        }

        .follow-me.r_ li:nth-child(1) {
            transition-delay: .3s, .3s
        }

        .follow-me.r_ li:nth-child(2) {
            transition-delay: .35s, .35s
        }

        .follow-me.r_ li:nth-child(3) {
            transition-delay: .4s, .4s
        }

        .follow-me.r_ li:nth-child(4) {
            transition-delay: .45s, .45s
        }

        .follow-me.r_ li:nth-child(5) {
            transition-delay: .5s, .5s
        }

        .follow-me.r_ li:nth-child(6) {
            transition-delay: .55s, .55s
        }

        .follow-me span {
            display: block;
            width: 35px;
            height: 35px;
            background: url('') no-repeat 0 1px;
            background-size: 100% auto;
            text-indent: -9999em
        }

        .is-safari .follow-me span {
            width: 34px;
            height: 34px
        }

        .follow-me a {
            display: -webkit-flex;
            -webkit-align-items: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 75px;
            height: 55px;
            padding-left: 20px;
            margin-left: -20px;
            transition: transform 425ms cubic-bezier(.05, .65, .18, 1)
        }

        .follow-me a:hover {
            -moz-transform: translate3d(20px, 0, 0);
            -ms-transform: translate3d(20px, 0, 0);
            -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0)
        }

        .follow-me .facebook {
            background-color: #4868ad
        }

        .follow-me .facebook span {
            background-position: -3px -104px
        }

        .follow-me .twitter {
            background-color: #3299ff
        }

        .follow-me .twitter span {
            background-position: 0 -69px
        }

        .follow-me .linkedin {
            background-color: #0077ba
        }

        .follow-me .linkedin span {
            background-position: 0 -140px
        }

        .follow-me .instagram {
            background: radial-gradient(circle at 25% 110%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%), radial-gradient(circle at 25% 110%, #b9a800 0, #938500 5%, #b10f00 45%, #8c0061 60%, #002ca9 90%)
        }

        .follow-me .club {
            background-color: transparent;
            opacity: .0005;
            height: 10px;
            width: 10px
        }

        .follow-me .github {
            background-color: #4e545a
        }

        .follow-me .github span {
            background-position: 0 -35px
        }

        .follow-me .location {
            background-color: #d6492f
        }

        @media all and (max-width:720px) {
            .follow-me {
                bottom: 35px;
                width: 100%;
                height: auto;
                top: auto;
                left: 0;
                text-align: left
            }

            .follow-me li {
                display: inline-block
            }

            .follow-me small {
                text-align: left;
                padding-left: 15px
            }

            .follow-me a {
                height: 50px;
                width: 50px;
                padding-left: 0;
                margin-left: 0
            }

            .follow-me a:hover {
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }

        @keyframes scroll {
            0% {
                transform: translate(0, 0);
                opacity: 0
            }

            40% {
                opacity: 1
            }

            80% {
                transform: translate(0, 25px);
                opacity: 0
            }

            100% {
                opacity: 0
            }
        }

        @keyframes cursorAnimation {
            0% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .game-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #393939
        }

        .game-container .scroll-down {
            display: block;
            position: absolute;
            background: 0 0;
            cursor: default;
            opacity: .45;
            z-index: 1001;
            bottom: 200px;
            left: calc(50% - 13px);
            transition: opacity 165ms ease-out, transform 165ms ease-out
        }

        .game-container .scroll-down.hidden,
        .game-on .game-container .scroll-down {
            transform: translate3d(0, 25px, 0);
            opacity: 0
        }

        .game-container .scroll-down span {
            display: block;
            width: 26px;
            height: 50px;
            border: 2px solid #7a7a7a;
            border-radius: 25px
        }

        .game-container .scroll-down span:before {
            content: " ";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #7a7a7a;
            position: absolute;
            top: 10px;
            left: calc(50% - 3px);
            animation: scroll 1.25s infinite
        }

        .game-container .scroll-down span:after {
            content: "Scroll or Destroy";
            position: absolute;
            bottom: -30px;
            line-height: 20px;
            font-size: 12px;
            color: #7a7a7a;
            left: calc(50% - 50px);
            width: 100px;
            text-align: center;
            padding-top: 12px
        }

        @media all and (max-height:1024px) {
            .game-container .scroll-down {
                bottom: 200px
            }
        }

        @media all and (max-height:880px) {
            .game-container .scroll-down {
                bottom: 180px
            }
        }

        @media all and (max-height:730px) {
            .game-container .scroll-down {
                bottom: 160px
            }
        }

        @media all and (max-height:670px) {
            .game-container .scroll-down {
                bottom: 145px
            }
        }

        @media all and (max-height:600px) {
            .game-container .scroll-down {
                bottom: 135px
            }

            .game-container .scroll-down span:after {
                content: ""
            }
        }

        @media all and (max-height:580px) {
            .game-container .scroll-down {
                bottom: 80px
            }
        }

        @media all and (max-height:530px) {
            .game-container .scroll-down {
                bottom: 50px
            }
        }

        @media all and (max-width:1024px) {
            .game-container .scroll-down {
                bottom: 100px
            }

            .game-container .scroll-down span:after {
                content: ""
            }
        }

        @media all and (max-width:740px) {
            .game-container .scroll-down {
                bottom: 80px
            }
        }

        @media all and (max-width:600px) {
            .game-container .scroll-down {
                bottom: 27px
            }
        }

        .game-container canvas {
            opacity: 1;
            position: absolute;
            top: 0;
            left: 0;
            background-color: transparent;
            -moz-transition: -moz-transform .45s cubic-bezier(0, .75, 0, 1);
            -o-transition: -o-transform .45s cubic-bezier(0, .75, 0, 1);
            -webkit-transition: -webkit-transform .45s cubic-bezier(0, .75, 0, 1);
            transition: transform .45s cubic-bezier(0, .75, 0, 1)
        }

        .game-container canvas.hidden {
            -moz-transform: translate3d(0, 150px, 0);
            -ms-transform: translate3d(0, 150px, 0);
            -webkit-transform: translate3d(0, 150px, 0);
            transform: translate3d(0, 150px, 0)
        }

        .game-container.game-on {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .game-lettering {
            width: 100%;
            color: #fff;
            text-shadow: 1px 1px 0 #0b8be7 inset;
            text-align: center;
            visibility: hidden;
            position: relative;
            z-index: 100
        }

        .game-lettering .location {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0
        }

        .game-lettering .blue {
            font-style: italic;
            color: #3ba3c7
        }

        .game-lettering span.h {
            visibility: hidden
        }

        .game-lettering b.cursor {
            position: absolute;
            animation: cursorAnimation .5s forwards infinite
        }

        .game-lettering.visible {
            visibility: visible
        }

        .game-lettering.exit address,
        .game-lettering.exit h1,
        .game-lettering.exit h2,
        .game-lettering.exit h3,
        .game-lettering.exit p,
        .game-lettering.exit ul {
            opacity: 0;
            -moz-transform: translate3d(0, -40px, 0);
            -ms-transform: translate3d(0, -40px, 0);
            -webkit-transform: translate3d(0, -40px, 0);
            transform: translate3d(0, -40px, 0)
        }

        .game-lettering h1,
        .game-lettering h2,
        .game-lettering p {
            color: #8a8a8a;
            font-size: 1.05em;
            line-height: 1.95em;
            font-weight: 400;
            font-family: Lato, Helvetica, Arial, sans-serif
        }

        .game-lettering a {
            font-family: inherit;
            font-size: 1.15em;
            line-height: 1.125em;
            font-weight: 700;
            color: #9a9a9a;
            -moz-transition: color .75s ease-out;
            -o-transition: color .75s ease-out;
            -webkit-transition: color .75s ease-out;
            transition: color .75s ease-out
        }

        .game-lettering address,
        .game-lettering h1,
        .game-lettering h2,
        .game-lettering h3,
        .game-lettering p,
        .game-lettering ul {
            -moz-transition: opacity .135s ease-out, -moz-transform .135s cubic-bezier(.79, 0, .71, 1);
            -o-transition: opacity .135s ease-out, -o-transform .135s cubic-bezier(.79, 0, .71, 1);
            -webkit-transition: opacity .135s ease-out, -webkit-transform .135s cubic-bezier(.79, 0, .71, 1);
            transition: opacity .135s ease-out, transform .135s cubic-bezier(.79, 0, .71, 1)
        }

        .game-lettering h1:nth-child(1),
        .game-lettering h2:nth-child(1),
        .game-lettering p:nth-child(1),
        .game-lettering ul:nth-child(1) {
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        .game-lettering h1:nth-child(2),
        .game-lettering h2:nth-child(2),
        .game-lettering p:nth-child(2),
        .game-lettering ul:nth-child(2) {
            -moz-transition-delay: .48s;
            -o-transition-delay: .48s;
            -webkit-transition-delay: .48s;
            transition-delay: .48s
        }

        .game-lettering h1:nth-child(3),
        .game-lettering h2:nth-child(3),
        .game-lettering p:nth-child(3),
        .game-lettering ul:nth-child(3) {
            -moz-transition-delay: .56s;
            -o-transition-delay: .56s;
            -webkit-transition-delay: .56s;
            transition-delay: .56s
        }

        .game-lettering h1:nth-child(4),
        .game-lettering h2:nth-child(4),
        .game-lettering p:nth-child(4),
        .game-lettering ul:nth-child(4) {
            -moz-transition-delay: .64s;
            -o-transition-delay: .64s;
            -webkit-transition-delay: .64s;
            transition-delay: .64s
        }

        .game-lettering h3 {
            color: #cacaca;
            font-size: 1.8em;
            line-height: 1.7em;
            font-weight: 700;
            letter-spacing: -1.5px;
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        .game-lettering address {
            color: #8a8a8a;
            display: block;
            font-style: normal;
            font-size: 1.05em;
            line-height: 1.95em;
            -moz-transition-delay: .72s;
            -o-transition-delay: .72s;
            -webkit-transition-delay: .72s;
            transition-delay: .72s
        }

        .game-lettering .fancy a {
            display: inline-block;
            padding: 4px 0
        }

        .game-lettering .fancy a:hover {
            color: #b6b6b6
        }

        .quick-search {
            background-color: #222;
            z-index: 101;
            opacity: 1;
            padding: 0 10%;
            -moz-transition: opacity .1s ease-out;
            -o-transition: opacity .1s ease-out;
            -webkit-transition: opacity .1s ease-out;
            transition: opacity .1s ease-out
        }

        .quick-search.hidden {
            opacity: 0
        }

        .quick-search.done {
            visibility: hidden
        }

        .quick-search .close {
            width: 50px;
            height: 50px;
            top: 37px;
            right: 0
        }

        .quick-search input {
            display: block;
            width: 100%;
            border-bottom: 3px solid #7a7a7a;
            border-width: 0 0 3px 0;
            background-color: transparent;
            height: 80px;
            line-height: 80px;
            font-size: 52px;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            color: #8a8a8a;
            letter-spacing: -4px
        }

        .quick-search .content {
            max-width: 820px;
            padding: 20px 0;
            margin: 0 auto;
            position: relative;
            display: table;
            height: 100%
        }

        .quick-search .results {
            padding-top: 25px
        }

        .quick-search .results a {
            text-decoration: none;
            display: block;
            padding: 10px 14px
        }

        .quick-search .results a.hover {
            background-color: #292929
        }

        .quick-search .results strong {
            font-size: 22px;
            display: block
        }

        .quick-search .results span {
            display: block;
            font-size: 13px
        }

        .quick-search .results p {
            display: block;
            font-size: 22px;
            font-weight: 700;
            text-decoration: none;
            padding: 10px 14px;
            color: #8a8a8a;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700
        }

        .quick-search a {
            display: block
        }

        .game-view #about,
        .game-view #page-content {
            z-index: 9999
        }

        #page-header .view li,
        .game .message li {
            display: block;
            line-height: 1.4em;
            color: #8a8a8a;
            position: relative;
            cursor: default
        }

        #page-header .view li:before,
        .game .message li:before {
            content: " ";
            width: 100%;
            height: 1px;
            background: url('') repeat-x bottom left;
            position: absolute;
            bottom: 6px;
            left: 0
        }

        #page-header .view li.selected,
        .game .message li.selected {
            color: #0ff
        }

        #page-header .view li.selected:before,
        .game .message li.selected:before {
            border-top-color: #0ff
        }

        #page-header .view li.selected a,
        .game .message li.selected a {
            color: #0ff
        }

        #page-header .view li.selected a:hover,
        .game .message li.selected a:hover {
            color: #0ff
        }

        #page-header .view li.divide,
        .game .message li.divide {
            height: 8px
        }

        #page-header .view li.divide:before,
        .game .message li.divide:before {
            width: 50px;
            left: calc(50% - 25px);
            border-top: 1px solid #444;
            bottom: 0
        }

        #page-header .view li.divide span,
        .game .message li.divide span {
            display: none
        }

        #page-header .view li a,
        .game .message li a {
            -moz-transition: color .15s ease-out;
            -o-transition: color .15s ease-out;
            -webkit-transition: color .15s ease-out;
            transition: color .15s ease-out
        }

        #page-header .view li a:hover,
        .game .message li a:hover {
            color: #b6b6b6
        }

        #page-header .view li>div,
        .game .message li>div {
            float: left;
            text-align: right;
            font-style: normal;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            position: relative;
            z-index: 5
        }

        #page-header .view li>div:nth-child(1),
        .game .message li>div:nth-child(1) {
            width: 180px
        }

        #page-header .view li>div:nth-child(1) span,
        .game .message li>div:nth-child(1) span {
            float: left
        }

        #page-header .view li>div:nth-child(2),
        .game .message li>div:nth-child(2) {
            width: calc(100% - 180px)
        }

        #page-header .view li>div:nth-child(2) span,
        .game .message li>div:nth-child(2) span {
            float: right
        }

        #page-header .view li span,
        .game .message li span {
            background-color: #2b2b2b;
            padding: 0 5px;
            z-index: 10;
            position: relative
        }

        @keyframes tip-enter {
            0% {
                visibility: visible;
                opacity: 0;
                -moz-transform: translate3d(0, 10px, 0);
                -ms-transform: translate3d(0, 10px, 0);
                -webkit-transform: translate3d(0, 10px, 0);
                transform: translate3d(0, 10px, 0)
            }

            100% {
                opacity: 1;
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                visibility: visible
            }
        }

        @-webkit-keyframes tip-enter {
            0% {
                visibility: visible;
                opacity: 0;
                -moz-transform: translateY(10px);
                -ms-transform: translateY(10px);
                -webkit-transform: translateY(10px);
                transform: translateY(10px)
            }

            100% {
                opacity: 1;
                -moz-transform: translateY(0);
                -ms-transform: translateY(0);
                -webkit-transform: translateY(0);
                transform: translateY(0);
                visibility: visible
            }
        }

        @keyframes tip-exit {
            0% {
                visibility: visible;
                opacity: 1
            }

            100% {
                visibility: visible;
                opacity: 0
            }
        }

        @-webkit-keyframes tip-exit {
            0% {
                visibility: visible;
                opacity: 1
            }

            100% {
                visibility: visible;
                opacity: 0
            }
        }

        .game {
            overflow: hidden
        }

        .game .destroy {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 142px;
            z-index: 100
        }

        .game-on .game {
            z-index: 198
        }

        .game.on-top {
            z-index: 199
        }

        .game.started .destroy {
            -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            transform: translateY(100%)
        }

        .game .bar,
        .game .board,
        .game .bullet,
        .game .controls,
        .game .points,
        .game .shield,
        .game .time {
            -moz-transition: -moz-transform .6s cubic-bezier(0, .75, 0, 1);
            -o-transition: -o-transform .6s cubic-bezier(0, .75, 0, 1);
            -webkit-transition: -webkit-transform .6s cubic-bezier(0, .75, 0, 1);
            transition: transform .6s cubic-bezier(0, .75, 0, 1)
        }

        .game .status {
            height: 100px
        }

        .game .status.hidden .bar,
        .game .status.hidden .board,
        .game .status.hidden .bullet,
        .game .status.hidden .controls,
        .game .status.hidden .points,
        .game .status.hidden .shield,
        .game .status.hidden .time {
            -moz-transform: translate3d(0, -100px, 0);
            -ms-transform: translate3d(0, -100px, 0);
            -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0)
        }

        .game .message {
            display: table
        }

        .game .message.hidden .box {
            -moz-transform: translate3d(0, -30px, 0);
            -ms-transform: translate3d(0, -30px, 0);
            -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
            opacity: 0
        }

        .game .message.away .box {
            -moz-transform: translate3d(0, 30px, 0);
            -ms-transform: translate3d(0, 30px, 0);
            -webkit-transform: translate3d(0, 30px, 0);
            transform: translate3d(0, 30px, 0);
            opacity: 0
        }

        .game .message .wrapper {
            display: table-cell;
            vertical-align: middle
        }

        .game .message ul {
            margin: 16px auto;
            max-width: 320px;
            width: 100%
        }

        .game .message li {
            font-size: .8em;
            line-height: 1.6em
        }

        .game .message .box {
            display: block;
            max-width: 460px;
            width: 90%;
            margin: 0 auto;
            background-color: #2b2b2b;
            box-shadow: 8px 8px 0 rgba(15, 15, 15, .45);
            padding: 24px 16px 26px;
            position: relative;
            opacity: 1;
            -moz-transition: -moz-transform .275s cubic-bezier(.4, .2, .2, 1.35), opacity .15s ease-out;
            -o-transition: -o-transform .275s cubic-bezier(.4, .2, .2, 1.35), opacity .15s ease-out;
            -webkit-transition: -webkit-transform .275s cubic-bezier(.4, .2, .2, 1.35), opacity .15s ease-out;
            transition: transform .275s cubic-bezier(.4, .2, .2, 1.35), opacity .15s ease-out
        }

        .game .message .box>p {
            color: #8a8a8a;
            font-size: .9em;
            line-height: 1em;
            margin-bottom: .4em;
            padding: 0
        }

        .game .message small {
            font-size: .8em;
            display: block;
            line-height: 1.5em;
            color: #8a8a8a
        }

        .game .message nav {
            margin-top: 20px;
            text-align: center
        }

        .game .message h4 {
            font-size: .8em;
            line-height: 1.45em;
            margin-top: 1em;
            font-family: Lato, Helvetica, Arial, sans-serif;
            color: #8a8a8a
        }

        .game .message button {
            text-align: left;
            font-size: 12px;
            text-transform: uppercase;
            cursor: pointer;
            padding: 0 2px;
            color: #8a8a8a;
            font-weight: 600;
            background-color: transparent;
            display: inline-block;
            margin: 0 8px
        }

        .game .message button span {
            display: inline-block;
            position: relative;
            z-index: 1;
            padding: 4px 0
        }

        .game .message h3 {
            font-size: 30px;
            margin-bottom: 6px;
            font-weight: 800;
            letter-spacing: -1px
        }

        .game .message strong {
            font-size: .9em;
            line-height: 1em;
            margin-top: 1.2em;
            padding: 0;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            display: block;
            margin-bottom: .65em
        }

        .game .message .close {
            top: 20px;
            right: 20px
        }

        .game .tips {
            display: block;
            position: fixed;
            bottom: calc(25% + 12px);
            left: calc(50% - 130px);
            color: #fff;
            z-index: 10;
            width: 260px;
            font-size: 12px;
            color: #8a8a8a;
            list-style: none;
            line-height: 16px
        }

        .game .tips li {
            display: inline-block;
            margin: 0 2px;
            position: relative;
            visibility: hidden
        }

        .game .tips li:after {
            content: ","
        }

        .game .tips li:nth-child(1):after,
        .game .tips li:nth-last-child(1):after {
            display: none
        }

        .game .tips.enter li {
            animation: tip-enter .3s cubic-bezier(.1, .4, .35, 1) forwards;
            -webkit-animation: tip-enter .3s cubic-bezier(.1, .4, .35, 1) forwards
        }

        .game .tips.enter li:nth-child(1) {
            animation-delay: 0s;
            -webkit-animation-delay: 0s
        }

        .game .tips.enter li:nth-child(2) {
            animation-delay: 50ms;
            -webkit-animation-delay: 50ms
        }

        .game .tips.enter li:nth-child(3) {
            animation-delay: .1s;
            -webkit-animation-delay: .1s
        }

        .game .tips.enter li:nth-child(4) {
            animation-delay: .15s;
            -webkit-animation-delay: .15s
        }

        .game .tips.exit li {
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            animation: tip-exit 125ms ease-out forwards;
            -webkit-animation: tip-exit 125ms ease-out forwards
        }

        .game .time {
            display: block;
            position: absolute;
            top: 22px;
            font-size: 18px;
            line-height: 25px;
            height: 25px;
            color: #8a8a8a;
            left: calc(83px + 258px);
            width: 40px;
            text-align: right;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700
        }

        .game .bar {
            max-width: 300px;
            width: 75%;
            height: 25px;
            background-color: #ea0000;
            position: absolute;
            top: 50px;
            left: 83px;
            box-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
            -moz-transition-delay: .2s;
            -o-transition-delay: .2s;
            -webkit-transition-delay: .2s;
            transition-delay: .2s
        }

        .game .bar span {
            display: block;
            background-color: #f1ff00;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            -moz-transition: width .35s ease-out;
            -o-transition: width .35s ease-out;
            -webkit-transition: width .35s ease-out;
            transition: width .35s ease-out
        }

        .game .points {
            font-size: 20px;
            color: #8a8a8a;
            position: absolute;
            left: 83px;
            top: 20px;
            line-height: 25px;
            height: 25px;
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
            -moz-transition-delay: .3s;
            -o-transition-delay: .3s;
            -webkit-transition-delay: .3s;
            transition-delay: .3s
        }

        .game .points strong {
            margin-right: 4px
        }

        .game .board,
        .game .bullet,
        .game .controls,
        .game .shield {
            font-size: 18px;
            position: absolute;
            height: 25px;
            line-height: 25px;
            top: 22px;
            left: calc(38px + 260px);
            font-family: MontSerrat, Tahoma, Arial, sans-serif;
            font-weight: 700;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
            color: #8a8a8a;
            cursor: help
        }

        .game .board span,
        .game .bullet span,
        .game .controls span,
        .game .shield span {
            display: none
        }

        .game .board svg,
        .game .bullet svg,
        .game .controls svg,
        .game .shield svg {
            width: 22px;
            height: 22px;
            margin: 0;
            vertical-align: text-top
        }

        .game .bullet.disabled,
        .game .shield.disabled {
            opacity: .35
        }

        .game .shield {
            left: calc(83px + 235px);
            -moz-transition-delay: .4s;
            -o-transition-delay: .4s;
            -webkit-transition-delay: .4s;
            transition-delay: .4s
        }

        .game .shield svg {
            margin-top: -1px
        }

        .game .bullet {
            left: calc(83px + 205px);
            -moz-transition-delay: .5s;
            -o-transition-delay: .5s;
            -webkit-transition-delay: .5s;
            transition-delay: .5s
        }

        .game .board,
        .game .controls {
            top: 82px;
            left: 83px;
            text-align: left;
            font-size: 11px;
            text-transform: uppercase;
            cursor: pointer;
            padding: 0 1px;
            line-height: 18px
        }

        .game .board span,
        .game .controls span {
            display: inline-block;
            position: relative;
            z-index: 1;
            padding: 4px 0
        }

        .game .board {
            left: calc(83px + 210px);
            -moz-transition-delay: .1s;
            -o-transition-delay: .1s;
            -webkit-transition-delay: .1s;
            transition-delay: .1s
        }

        .game canvas.animated {
            -moz-transition: -moz-transform .5s cubic-bezier(0, .75, 0, 1);
            -o-transition: -o-transform .5s cubic-bezier(0, .75, 0, 1);
            -webkit-transition: -webkit-transform .5s cubic-bezier(0, .75, 0, 1);
            transition: transform .5s cubic-bezier(0, .75, 0, 1)
        }

        .game canvas.hidden {
            -moz-transform: translate3d(0, 150px, 0);
            -ms-transform: translate3d(0, 150px, 0);
            -webkit-transform: translate3d(0, 150px, 0);
            transform: translate3d(0, 150px, 0)
        }

        .game .destroy .btn {
            width: 260px;
            height: 38px;
            line-height: 38px;
            font-size: 12px
        }

        .game .destroy .btn em {
            line-height: 35px
        }

        .game .destroy.enter {
            -moz-transition: -moz-transform .35s cubic-bezier(.2, .75, .25, 1), opacity .2s ease-out;
            -o-transition: -o-transform .35s cubic-bezier(.2, .75, .25, 1), opacity .2s ease-out;
            -webkit-transition: -webkit-transform .35s cubic-bezier(.2, .75, .25, 1), opacity .2s ease-out;
            transition: transform .35s cubic-bezier(.2, .75, .25, 1), opacity .2s ease-out;
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1
        }

        .game .destroy.exit {
            opacity: 0;
            -moz-transform: translate3d(0, 40px, 0);
            -ms-transform: translate3d(0, 40px, 0);
            -webkit-transform: translate3d(0, 40px, 0);
            transform: translate3d(0, 40px, 0);
            -moz-transition: -moz-transform .3s cubic-bezier(.5, 0, 1, 1), opacity .2s ease-out .1s;
            -o-transition: -o-transform .3s cubic-bezier(.5, 0, 1, 1), opacity .2s ease-out .1s;
            -webkit-transition: -webkit-transform .3s cubic-bezier(.5, 0, 1, 1), opacity .2s ease-out;
            /* -webkit-transition-delay: 0s, .1s; */
            transition: transform .3s cubic-bezier(.5, 0, 1, 1), opacity .2s ease-out .1s
        }

        .game .destroy svg {
            margin-right: 4px
        }

        @media all and (max-width:1460px) {
            .game .time {
                left: calc(38px + 258px)
            }

            .game .bar {
                left: 38px
            }

            .game .points {
                left: 38px
            }

            .game .board,
            .game .bullet,
            .game .controls,
            .game .shield {
                left: calc(38px + 260px)
            }

            .game .shield {
                left: calc(38px + 235px)
            }

            .game .bullet {
                left: calc(38px + 205px)
            }

            .game .board,
            .game .controls {
                left: 38px
            }

            .game .board {
                left: calc(38px + 210px)
            }
        }

        button.fancy,
        div.fancy,
        span.fancy {
            display: inline-block;
            position: relative
        }

        button.fancy:after,
        button.fancy:before,
        div.fancy:after,
        div.fancy:before,
        span.fancy:after,
        span.fancy:before {
            -moz-transition: width .325s cubic-bezier(.65, .2, 0, 1);
            -o-transition: width .325s cubic-bezier(.65, .2, 0, 1);
            -webkit-transition: width .325s cubic-bezier(.65, .2, 0, 1);
            transition: width .325s cubic-bezier(.65, .2, 0, 1)
        }

        button.fancy:after,
        button.fancy:before,
        div.fancy:after,
        div.fancy:before,
        span.fancy:after,
        span.fancy:before {
            content: " ";
            position: absolute;
            height: 16px;
            width: 0
        }

        button.fancy:before,
        div.fancy:before,
        span.fancy:before {
            top: 0;
            left: 0;
            background-color: #3a3a3a;
            -moz-transition-delay: 0s;
            -o-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s
        }

        button.fancy:after,
        div.fancy:after,
        span.fancy:after {
            bottom: 0;
            right: 0;
            background-color: #3d3d3d;
            -moz-transition-delay: .1s;
            -o-transition-delay: .1s;
            -webkit-transition-delay: .1s;
            transition-delay: .1s
        }

        button.fancy a,
        div.fancy a,
        span.fancy a {
            display: block;
            position: relative;
            z-index: 2;
            color: #9a9a9a;
            -moz-transition: color .25s ease-out .1s;
            -o-transition: color .25s ease-out .1s;
            -webkit-transition: color .25s ease-out;
            /* -webkit-transition-delay: .1s; */
            transition: color .25s ease-out .1s
        }

        button.fancy:hover:after,
        button.fancy:hover:before,
        div.fancy:hover:after,
        div.fancy:hover:before,
        span.fancy:hover:after,
        span.fancy:hover:before {
            width: 100%
        }

        button.fancy:hover a,
        div.fancy:hover a,
        span.fancy:hover a {
            color: #b6b6b6
        }

        @media all and (max-width:1460px) {
            #page-header .burger {
                right: 38px
            }

            .back-list {
                left: 45px
            }

            .page-control .next,
            .page-control .prev {
                width: 150px
            }

            .page-exit .page-control .next {
                -moz-transform: translate3d(150px, 0, 0);
                -ms-transform: translate3d(150px, 0, 0);
                -webkit-transform: translate3d(150px, 0, 0);
                transform: translate3d(150px, 0, 0)
            }

            .page-exit .page-control .back-list,
            .page-exit .page-control .prev {
                -moz-transform: translate3d(-150px, 0, 0);
                -ms-transform: translate3d(-150px, 0, 0);
                -webkit-transform: translate3d(-150px, 0, 0);
                transform: translate3d(-150px, 0, 0)
            }
        }

        @media all and (max-width:1024px) {
            .game {
                display: none
            }

            #page-header .burger {
                right: 23px
            }

            .back-list {
                left: 29px
            }

            .page-control .next,
            .page-control .prev {
                -moz-transform: scale(.8);
                -ms-transform: scale(.8);
                -webkit-transform: scale(.8);
                transform: scale(.8);
                width: 120px
            }

            .page-control .next span,
            .page-control .prev span {
                display: none
            }

            github-fork {
                display: none
            }
        }

        @media all and (max-width:800px) {
            #page-header .burger {
                right: 13px
            }

            .back-list {
                left: 19px
            }

            .page-control .next,
            .page-control .prev {
                width: 100px
            }

            .grid-list {
                margin: 10px auto 0
            }

            .grid-list .item {
                width: 100%
            }

            .grid-list h2 {
                font-size: 1.2em;
                opacity: 1;
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }

            .content.pages .centered {
                padding: 42px 0
            }

            article .share awesome-button[type=twitter],
            article .share awesome-button[type=facebook],
            article .share awesome-button[type=plus] {
                display: none
            }
        }

        @media all and (max-width:600px) {
            .filters li {
                padding: 6px 5px
            }

            .input-block .msg.focus .label {
                display: none
            }

            .input-block label {
                font-size: 15px
            }

            a.github-fork {
                display: none
            }

            #page-header .burger {
                right: 10px;
                top: auto;
                bottom: 30px;
                background-color: #232323;
                border-radius: 50%;
                padding: 10px;
                box-shadow: 0 0 3px rgba(0, 0, 0, .15);
                width: 59px;
                height: 59px
            }

            #page-header .burger i {
                width: 24px;
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }

            #page-header:before {
                visibility: visible
            }

            #about .game-lettering h3 {
                font-size: 1.3em
            }

            #about .game-lettering h1,
            #about .game-lettering h2,
            #about .game-lettering p,
            #about address {
                display: inline-block;
                margin-right: 4px;
                font-size: 1em;
                line-height: 1.75em
            }

            #about .game-lettering .fancy a {
                padding: 2px 0
            }

            #about .fancy {
                line-height: 1em
            }

            #about .game-lettering {
                padding: 0 1.2em
            }

            .grid-list h2 {
                font-size: 1em
            }

            .content.pages header h1 {
                font-size: 2.5em;
                line-height: 1em;
                margin-bottom: .15em
            }

            .content.pages header p {
                font-size: 1em;
                line-height: 1.5em
            }

            #page-header nav {
                padding: 10% 0
            }

            .grid-list .screen span:before {
                font-size: 9px
            }
        }

        @media all and (max-width:400px) {
            article footer br {
                display: none
            }
        }

        @media all and (max-width:740px) {

            .page-control .next,
            .page-control .prev {
                display: none
            }
        }

        @media all and (max-height:820px) {
            .game .destroy {
                height: 115px
            }
        }

        @media all and (max-height:740px) {
            .game .destroy {
                height: 103px
            }
        }

        @media all and (max-height:680px) {
            .game .destroy {
                height: 95px
            }
        }

        @media all and (max-height:580px) {
            .game {
                display: none
            }

            #page-header nav a {
                font-size: 1.6em
            }
        }

        @media all and (max-height:500px) {
            #page-header nav a {
                font-size: 1.4em
            }
        }

        @keyframes rotate-back-out {
            0% {
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }

            45% {
                -moz-transform: rotate(185deg);
                -ms-transform: rotate(185deg);
                -webkit-transform: rotate(185deg);
                transform: rotate(185deg)
            }

            100% {
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }
        }

        @-webkit-keyframes rotate-back-out {
            0% {
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }

            45% {
                -moz-transform: rotate(185deg);
                -ms-transform: rotate(185deg);
                -webkit-transform: rotate(185deg);
                transform: rotate(185deg)
            }

            100% {
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }
        }

        @keyframes rotate-back-in {
            0% {
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

            45% {
                -moz-transform: rotate(-5deg);
                -ms-transform: rotate(-5deg);
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg)
            }

            100% {
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
        }

        @-webkit-keyframes rotate-back-in {
            0% {
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

            45% {
                -moz-transform: rotate(-5deg);
                -ms-transform: rotate(-5deg);
                -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg)
            }

            100% {
                -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
        }

        .rotateFoldLeft {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            -webkit-animation: rotateFoldLeft .8s both cubic-bezier(.65, .05, .125, .95);
            animation: rotateFoldLeft .8s both cubic-bezier(.65, .05, .125, .95)
        }

        .rotateFoldRight {
            -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-animation: rotateFoldRight .8s both cubic-bezier(.65, .05, .125, .95);
            animation: rotateFoldRight .8s both cubic-bezier(.65, .05, .125, .95)
        }

        .moveFromRightFade {
            -webkit-animation: moveFromRightFade .8s both cubic-bezier(.65, .05, .125, .95);
            animation: moveFromRightFade .8s both cubic-bezier(.65, .05, .125, .95)
        }

        .moveFromLeftFade {
            -webkit-animation: moveFromLeftFade .8s both cubic-bezier(.65, .05, .125, .95);
            animation: moveFromLeftFade .8s both cubic-bezier(.65, .05, .125, .95)
        }

        @-webkit-keyframes rotateFoldRight {
            to {
                opacity: 1;
                -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg)
            }
        }

        @keyframes rotateFoldRight {
            to {
                opacity: 1;
                -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
                transform: translate(100%, 0, 0) rotateY(90deg)
            }
        }

        @-webkit-keyframes rotateFoldLeft {
            to {
                opacity: 1;
                -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg)
            }
        }

        @keyframes rotateFoldLeft {
            to {
                opacity: 1;
                -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
                transform: translate3d(-100%, 0, 0) rotateY(-90deg)
            }
        }

        @-webkit-keyframes moveFromRightFade {
            from {
                opacity: 1;
                -webkit-transform: translate3d(100%, 0, 0)
            }
        }

        @keyframes moveFromRightFade {
            from {
                opacity: 1;
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0)
            }
        }

        @-webkit-keyframes moveFromLeftFade {
            from {
                opacity: 1;
                -webkit-transform: translate3d(-100%, 0, 0)
            }
        }

        @keyframes moveFromLeftFade {
            from {
                opacity: 1;
                -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0)
            }
        }

        .ps-container {
            overflow: hidden !important
        }

        .ps-container.ps-active-x>.ps-scrollbar-x-rail,
        .ps-container.ps-active-y>.ps-scrollbar-y-rail {
            display: block
        }

        .ps-container.ps-in-scrolling {
            pointer-events: none
        }

        .ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
            background-color: #eee;
            opacity: .9
        }

        .ps-container.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
            background-color: #999
        }

        .ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
            background-color: #eee;
            opacity: .9
        }

        .ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
            background-color: #999
        }

        .ps-container>.ps-scrollbar-x-rail {
            display: none;
            position: absolute;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            opacity: 0;
            -webkit-transition: background-color .2s linear, opacity .2s linear;
            -moz-transition: background-color .2s linear, opacity .2s linear;
            -o-transition: background-color .2s linear, opacity .2s linear;
            transition: background-color .2s linear, opacity .2s linear;
            bottom: 3px;
            height: 8px
        }

        .ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
            position: absolute;
            background-color: #6a6a6a;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            -webkit-transition: background-color .2s linear;
            -moz-transition: background-color .2s linear;
            -o-transition: background-color .2s linear;
            transition: background-color .2s linear;
            bottom: 0;
            height: 8px
        }

        .ps-container>.ps-scrollbar-y-rail {
            display: none;
            position: absolute;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            opacity: 0;
            -webkit-transition: background-color .2s linear, opacity .2s linear;
            -moz-transition: background-color .2s linear, opacity .2s linear;
            -o-transition: background-color .2s linear, opacity .2s linear;
            transition: background-color .2s linear, opacity .2s linear;
            right: 0;
            width: 4px
        }

        .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
            position: absolute;
            background-color: #6a6a6a;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            border-radius: 4px;
            -webkit-transition: background-color .2s linear;
            -moz-transition: background-color .2s linear;
            -o-transition: background-color .2s linear;
            transition: background-color .2s linear;
            right: 0;
            width: 4px
        }

        .ps-container:hover.ps-in-scrolling {
            pointer-events: none
        }

        .ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail {
            background-color: #eee;
            opacity: .9
        }

        .ps-container:hover.ps-in-scrolling.ps-x>.ps-scrollbar-x-rail>.ps-scrollbar-x {
            background-color: #6a6a6a
        }

        .ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
            background-color: #eee;
            opacity: .9
        }

        .ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
            background-color: #6a6a6a
        }

        .ps-container:hover>.ps-scrollbar-x-rail,
        .ps-container:hover>.ps-scrollbar-y-rail {
            opacity: .6
        }

        .ps-container:hover>.ps-scrollbar-x-rail:hover {
            background-color: #eee;
            opacity: .9
        }

        .ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
            background-color: #999
        }

        .ps-container:hover>.ps-scrollbar-y-rail:hover {
            background-color: #eee;
            opacity: .9
        }

        .ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
            background-color: #999
        }

        code[class*=language-],
        pre[class*=language-] {
            color: #f8f8f2;
            background: 0 0;
            text-shadow: 0 1px rgba(0, 0, 0, .3);
            font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
            text-align: left;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            tab-size: 4;
            -webkit-hyphens: none;
            -moz-hyphens: none;
            -ms-hyphens: none;
            hyphens: none
        }

        pre[class*=language-] {
            padding: 1em;
            margin: .5em 0;
            overflow: auto;
            border-radius: .3em
        }

        :not(pre)>code[class*=language-],
        pre[class*=language-] {
            background: #272822
        }

        :not(pre)>code[class*=language-] {
            padding: .1em;
            border-radius: .3em;
            white-space: normal
        }

        .token.cdata,
        .token.comment,
        .token.doctype,
        .token.prolog {
            color: #708090
        }

        .token.punctuation {
            color: #f8f8f2
        }

        .namespace {
            opacity: .7
        }

        .token.constant,
        .token.deleted,
        .token.property,
        .token.symbol,
        .token.tag {
            color: #f92672
        }

        .token.boolean,
        .token.number {
            color: #ae81ff
        }

        .token.attr-name,
        .token.builtin,
        .token.char,
        .token.inserted,
        .token.selector,
        .token.string {
            color: #a6e22e
        }

        .language-css .token.string,
        .style .token.string,
        .token.entity,
        .token.operator,
        .token.url,
        .token.variable {
            color: #f8f8f2
        }

        .token.atrule,
        .token.attr-value,
        .token.function {
            color: #e6db74
        }

        .token.keyword {
            color: #66d9ef
        }

        .token.important,
        .token.regex {
            color: #fd971f
        }

        .token.bold,
        .token.important {
            font-weight: 700
        }

        .token.italic {
            font-style: italic
        }

        .token.entity {
            cursor: help
        }

        .cc-window {
            opacity: 1;
            transition: opacity 1s ease
        }

        .cc-window.cc-invisible {
            opacity: 0
        }

        .cc-animate.cc-revoke {
            transition: transform 1s ease
        }

        .cc-animate.cc-revoke.cc-top {
            transform: translateY(-2em)
        }

        .cc-animate.cc-revoke.cc-bottom {
            transform: translateY(2em)
        }

        .cc-animate.cc-revoke.cc-active.cc-bottom,
        .cc-animate.cc-revoke.cc-active.cc-top,
        .cc-revoke:hover {
            transform: translateY(0)
        }

        .cc-grower {
            max-height: 0;
            overflow: hidden;
            transition: max-height 1s
        }

        .cc-link,
        .cc-revoke:hover {
            text-decoration: underline
        }

        .cc-revoke,
        .cc-window {
            position: fixed;
            overflow: hidden;
            box-sizing: border-box;
            font-family: Helvetica, Calibri, Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5em;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            z-index: 9999
        }

        .cc-window.cc-static {
            position: static
        }

        .cc-window.cc-floating {
            padding: 2em;
            max-width: 24em;
            -ms-flex-direction: column;
            flex-direction: column
        }

        .cc-window.cc-banner {
            padding: 1em 1.8em;
            width: 100%;
            -ms-flex-direction: row;
            flex-direction: row
        }

        .cc-revoke {
            padding: .5em
        }

        .cc-header {
            font-size: 18px;
            font-weight: 700
        }

        .cc-btn,
        .cc-close,
        .cc-link,
        .cc-revoke {
            cursor: pointer
        }

        .cc-link {
            opacity: .8;
            display: inline-block;
            padding: .2em
        }

        .cc-link:hover {
            opacity: 1
        }

        .cc-link:active,
        .cc-link:visited {
            color: initial
        }

        .cc-btn {
            display: block;
            padding: .4em .8em;
            font-size: .9em;
            font-weight: 700;
            border-width: 2px;
            border-style: solid;
            text-align: center;
            white-space: nowrap
        }

        .cc-highlight .cc-btn:first-child {
            background-color: transparent;
            border-color: transparent
        }

        .cc-highlight .cc-btn:first-child:focus,
        .cc-highlight .cc-btn:first-child:hover {
            background-color: transparent;
            text-decoration: underline
        }

        .cc-close {
            display: block;
            position: absolute;
            top: .5em;
            right: .5em;
            font-size: 1.6em;
            opacity: .9;
            line-height: .75
        }

        .cc-close:focus,
        .cc-close:hover {
            opacity: 1
        }

        .cc-revoke.cc-top {
            top: 0;
            left: 3em;
            border-bottom-left-radius: .5em;
            border-bottom-right-radius: .5em
        }

        .cc-revoke.cc-bottom {
            bottom: 0;
            left: 3em;
            border-top-left-radius: .5em;
            border-top-right-radius: .5em
        }

        .cc-revoke.cc-left {
            left: 3em;
            right: unset
        }

        .cc-revoke.cc-right {
            right: 3em;
            left: unset
        }

        .cc-top {
            top: 1em
        }

        .cc-left {
            left: 1em
        }

        .cc-right {
            right: 1em
        }

        .cc-bottom {
            bottom: 1em
        }

        .cc-floating>.cc-link {
            margin-bottom: 1em
        }

        .cc-floating .cc-message {
            display: block;
            margin-bottom: 1em
        }

        .cc-window.cc-floating .cc-compliance {
            -ms-flex: 1 0 auto;
            flex: 1 0 auto
        }

        .cc-window.cc-banner {
            -ms-flex-align: center;
            align-items: center
        }

        .cc-banner.cc-top {
            left: 0;
            right: 0;
            top: 0
        }

        .cc-banner.cc-bottom {
            left: 0;
            right: 0;
            bottom: 0
        }

        .cc-banner .cc-message {
            display: block;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            max-width: 100%;
            margin-right: 1em
        }

        .cc-compliance {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-line-pack: justify;
            align-content: space-between
        }

        .cc-floating .cc-compliance>.cc-btn {
            -ms-flex: 1;
            flex: 1
        }

        .cc-btn+.cc-btn {
            margin-left: .5em
        }

        @media print {

            .cc-revoke,
            .cc-window {
                display: none
            }
        }

        @media screen and (max-width:900px) {
            .cc-btn {
                white-space: normal
            }
        }

        @media screen and (max-width:414px) and (orientation:portrait),
        screen and (max-width:736px) and (orientation:landscape) {
            .cc-window.cc-top {
                top: 0
            }

            .cc-window.cc-bottom {
                bottom: 0
            }

            .cc-window.cc-banner,
            .cc-window.cc-floating,
            .cc-window.cc-left,
            .cc-window.cc-right {
                left: 0;
                right: 0
            }

            .cc-window.cc-banner {
                -ms-flex-direction: column;
                flex-direction: column
            }

            .cc-window.cc-banner .cc-compliance {
                -ms-flex: 1 1 auto;
                flex: 1 1 auto
            }

            .cc-window.cc-floating {
                max-width: none
            }

            .cc-window .cc-message {
                margin-bottom: 1em
            }

            .cc-window.cc-banner {
                -ms-flex-align: unset;
                align-items: unset
            }

            .cc-window.cc-banner .cc-message {
                margin-right: 0
            }
        }

        .cc-floating.cc-theme-classic {
            padding: 1.2em;
            border-radius: 5px
        }

        .cc-floating.cc-type-info.cc-theme-classic .cc-compliance {
            text-align: center;
            display: inline;
            -ms-flex: none;
            flex: none
        }

        .cc-theme-classic .cc-btn {
            border-radius: 5px
        }

        .cc-theme-classic .cc-btn:last-child {
            min-width: 140px
        }

        .cc-floating.cc-type-info.cc-theme-classic .cc-btn {
            display: inline-block
        }

        .cc-theme-edgeless.cc-window {
            padding: 0
        }

        .cc-floating.cc-theme-edgeless .cc-message {
            margin: 2em 2em 1.5em
        }

        .cc-banner.cc-theme-edgeless .cc-btn {
            margin: 0;
            padding: .8em 1.8em;
            height: 100%
        }

        .cc-banner.cc-theme-edgeless .cc-message {
            margin-left: 1em
        }

        .cc-floating.cc-theme-edgeless .cc-btn+.cc-btn {
            margin-left: 0
        }

        #carbonads {
            margin: 0;
            display: flex;
            max-width: 100%
        }

        #carbonads a {
            color: inherit;
            text-decoration: none
        }

        #carbonads a:hover {
            color: inherit
        }

        #carbonads span {
            position: relative;
            display: block;
            width: 100%;
            overflow: hidden
        }

        #carbonads .carbon-wrap {
            display: flex
        }

        .carbon-img {
            display: block;
            margin: 0;
            line-height: 1
        }

        .carbon-img img {
            display: block
        }

        .carbon-text {
            font-size: 13px;
            padding: 10px;
            line-height: 1.5;
            text-align: left;
            width: 100%;
            display: flex;
            align-items: center
        }

        .carbon-poweredby {
            background-color: rgba(255, 255, 255, .02);
            display: block;
            text-align: center;
            padding: 10px;
            text-transform: uppercase;
            letter-spacing: .5px;
            font-weight: 600;
            font-size: 9px;
            line-height: 1
        }

        @media (max-width: 800px) {
            .pages .wrapper {
                /* max-width: 500px; */
                width: 100%;
            }
        }