@font-face {
        font-family: 'fontawesome';
        src:url('../fonts/fontawesome/fontawesome.eot?-v92fkb');
        src:url('../fonts/fontawesome/fontawesome.eot?#iefix-v92fkb') format('embedded-opentype'),
            url('../fonts/fontawesome/fontawesome.woff?-v92fkb') format('woff'),
            url('../fonts/fontawesome/fontawesome.ttf?-v92fkb') format('truetype'),
            url('../fonts/fontawesome/fontawesome.svg?-v92fkb#fontawesome') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    .noscroll {
        overflow: hidden;
    }

    .grid-wrap {
        margin: 10px auto 0;
        width: 100%;
        padding: 0;
        -webkit-perspective: 1500px;
        perspective: 4500px;
    }

    .grid {
        position: relative;
        -webkit-transition: all 0.5s cubic-bezier(0,0,0.25,1);
        transition: all 0.5s cubic-bezier(0,0,0.25,1);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .view-full .grid {
        -webkit-transform: translateZ(-1500px);
        transform: translateZ(-1500px);
    }

    .grid figure,
    .grid .placeholder {
        width: 16.66666667%;
        height: 100%;
    }

    .grid figure {
        margin: 10px;
        display: inline-block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #eef3f6;
        padding: 10px;
    }

    .grid figure.active {
        opacity: 0;
    }

    .grid .placeholder {
        pointer-events: none;
        position: absolute;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

    .placeholder > div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .placeholder .front img {
        width: 100%;
        height: 100%;
    }

    .placeholder .back {
        background: white;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .view-full .placeholder {
        -webkit-transition: all 0.5s 0.1s cubic-bezier(0,0,0.25,1);
        transition: all 0.5s 0.1s cubic-bezier(0,0,0.25,1);
    }

    .vertical .view-full .placeholder {
        -webkit-transform: translateZ(1500px) rotateX(-179.9deg);
        transform: translateZ(1500px) rotateX(-179.9deg); /* FF, Chrome, can we agree on one direction, pleeease? */
    }

    .horizontal .view-full .placeholder {
        -webkit-transform: translateZ(1500px) rotateY(-179.9deg);
        transform: translateZ(1500px) rotateY(-179.9deg);
    }

    .grid figure img {
        display: block;
        width: 100%;
    }

    .content,
    .loading {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none; /* Careful, does not work in IE < 11 http://caniuse.com/#search=pointer-events */
    }

    .content {
        overflow-y: scroll;
        height: 0; /* What seems to be the problem, officer? Well, we have a second scroll bar in Chrome! */
        background: #fff;
        visibility: hidden;
        z-index: 99999;
        -webkit-overflow-scrolling: touch;
    }

    .loading {
        opacity: 0;
        z-index: 1;
        background: transparent url(img/preloader.gif) no-repeat center center;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
    }

    .loading.show {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .content.show {
        height: auto;
        pointer-events: auto;
        visibility: visible;
    }

    .content > div {
        z-index: 10;
        position: absolute;
        top: 0;
        width: 100%;
        overflow: hidden;
        height: 0;
        opacity: 0;
        background: #fff;
    }

    .content > div.show {
        height: auto;
        opacity: 1; 
        -webkit-transition: opacity 0.6s;
        transition: opacity 0.6s;
    }

    .icon:before {
        font-family: 'fontawesome';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .close-content {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 10px;
        font-size: 1.6em;
        color: #aaa;
        cursor: pointer;
        pointer-events: none;
        padding: 1em;
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .close-content:hover {
        color: #999;
    }

    .content > div.show ~ .close-content {
        opacity: 1;
        pointer-events: auto;
    }

    .close-content:before {
        content: "\e602";
    }

    /* Dummy content */

    .dummy-img,
    .dummy-text {
        width: 70%;
        opacity: 0;
        -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
        transition: opacity 0.5s, transform 0.5s;
    }

    .vertical .dummy-img,
    .vertical .dummy-text {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    .content > div.show .dummy-img,
    .content > div.show .dummy-text {
        opacity: 1;
    }
    .vertical {
        text-align: center;
    }

    .vertical .content > div.show .dummy-img,
    .vertical .content > div.show .dummy-text {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    p.dummy-text:nth-child(2) {
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;
    }

    p.dummy-text:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .dummy-img {
        height: 400px;
        background-color: #ddd;
        margin: 30px auto;
    }

    .dummy-text {
        text-align: left;
        margin: 0 auto;
        padding: 10px 0;
        color: #000;
        font-size: 1em;
        font-family: 'Blokk', Arial, serif;
    }

    .dummy-text:last-child {
        padding-bottom: 100px;
    }


    @media screen and (max-width: 1000px) {

        .grid figure,
        .grid .placeholder {
            width: 240px;
            height: 100%;
        }

    }
    .berita-image {
        margin-bottom: 20px;
    }
    .grid figure .meta {
        line-height: 1.4;
        text-transform: uppercase;
        top: 0;
        left: 1em;
        text-align: center;
    }
    .grid figure .meta .day {
        font-size: 17px;
        position: relative;
        padding: 5px 10px;
        color: #fff;
        background: #429FFD;
    }
    .grid figure .meta .month {
        font-size: 14px;
        font-weight: 400;
        padding: 5px 10px;
        color: gray;
        background: #fff;
    }
    .grid figure .meta span {
        display: block;
        color: #000;
        font-weight: 700;
    }
    .berita-subject {
        height: 130px;
        line-height: 1.2;
        font-size: 16px;
        color: black;
    }