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

    @font-face {
        font-family: "couture";
        src: url('couture-bld.otf');
    }

    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 400;
        src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    html body {
        background-image: url(./Gedung.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        margin: 0;
    }

    img,
    canvas {
        max-width: 100%;
        height: auto !important;
        margin: auto
    }

    canvas {
        display: inline-block;
        vertical-align: baseline
    }

    p {
        font-family: open sans, sans-serif;
        text-shadow: 0 4px 12px rgba(0, 0, 0, .5)
    }

    h1 {
        max-width: 820px;
        margin: auto;
        position: relative;
        text-align: center;
    }

    h2 {
        font-size: 18px;
        font-family: lato;
        color: #212C48;
    }

    .segitigaatas {
        width: 140px;
        top: -3px;
        left: -3px;
        position: fixed;
    }

    .segitigabawah {
        width: 150px;
        float: right;
        position: fixed;
        right: 0;
        bottom: -30px;
    }

    figure {
        margin-top: 0;
        margin-bottom: 0
    }

    #preloader {
        z-index: 10001;
        background-color: #fff;
        width: 100%;
        height: 100%;
        position: fixed
    }

    #status,
    #statusedit {
        position: absolute;
        left: 50%;
        top: 50%;
        background-repeat: no-repeat;
        background-position: center center;
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
        text-align: center
    }

    .images-caman {
        width: 100%;
        margin: auto
    }

    .container {
        padding: 45px 20px;
        color: #fff;
    }

    .inner-container {
        max-width: 500px;
        margin: auto;
        margin-top: 130px;
        text-align: center;
    }

    .logo-1 {
        max-width: 100%;
        margin: auto
    }

    #attachment {
        display: none
    }

    .attachment label {
        font-family: lato;
        box-sizing: border-box;
        font-weight: bold;
        background: #212C48;
        background-size: 200%;
        transition: .5s;
        color: #fff;
        font-size: 16pt;
        padding: 12px 10px;
        display: inline-block;
        margin: 1px 0;
        cursor: pointer;
    }

    .segitiga1 {
        width: 0;
        height: 0;
        position: relative;
        left: -18px;
        top: 49px;
        border-left: 172px solid transparent;
        border-right: 12px solid #212C48;
        border-bottom: 48px solid transparent;
    }