* {
    font-family: "Roboto Serif", serif;
}

body {
    background-image: url(image/BACKGROUNDBARU.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
}

.social i {
    width: 50px;
}

nav.sticky {
    padding: 15px 20px;
    background: rgba(176, 155, 113, 0.9);
    /* background: #b09b71; */
    transition: 0.4s;
}

/* tablet */
@media only screen and (min-width: 700px) and (max-width: 768px) {
    .judul {
        width: 350px !important;
        position: absolute;
        top: 37% !important;
        right: 50%;
        transform: translate(50%, -50%);
    }
    nav.navbar-brand {
        font-size: 10px !important;
    }
    #poster {
        width: 270px !important;
        position: absolute;
        top: 90% !important;
        right: 50%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .isi {
        width: 200px !important;
        position: absolute;
        top: 90% !important;
        right: 50%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .pmbcr {
        position: absolute;
        top: 145% !important;
        right: 70%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .pmbcr img {
        width: 200px !important;
    }
    .mdrt {
        position: absolute;
        top: 145% !important;
        right: 30%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .mdrt img {
        width: 200px !important;
    }
    footer {
        position: absolute;
        top: 185% !important;
        right: 50%;
        transform: translate(50%, -50%);
    }
    nav.sticky {
        padding: 15px 20px;
        background: #b09b71;
        transition: 0.4s;
    }
}

/* iphone xr */
@media only screen and (max-width: 415px) {
    nav.sticky {
        padding: 15px 20px;
        background: #b09b71;
        transition: 0.4s;
    }
    .judul {
        width: 300px !important;
        position: absolute;
        top: 18% !important;
        right: 50%;
        transform: translate(50%, -50%);
        padding-top: 8rem;
    }
    #poster {
        width: 200px !important;
        position: absolute;
        top: 65% !important;
        right: 50% !important;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .isi {
        width: 200px !important;
        position: absolute;
        top: 105% !important;
        right: 50% !important;
        transform: translate(50%, -50%);
        z-index: 1;
        padding-top: 6rem;
    }
    .isi p {
        font-size: small;
    }
    .pmbcr {
        position: absolute;
        top: 135% !important;
        right: 50%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .pmbcr img {
        width: 200px !important;
        padding-top: 12rem;
    }
    .mdrt {
        position: absolute;
        top: 160% !important;
        right: 47%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .mdrt img {
        width: 200px !important;
        padding-top: 20rem;
    }
    footer {
        position: absolute;
        top: 160% !important;
        right: 50%;
        transform: translate(50%, -50%);
        padding-top: 60rem;
    }
}

/* iphone 6 7 8 */
@media only screen and (max-width: 361px) {
    nav.sticky {
        padding: 15px 20px;
        background: #b09b71;
        transition: 0.4s;
    }
    .judul {
        width: 270px !important;
        position: absolute;
        top: 18% !important;
        right: 50%;
        transform: translate(50%, -50%);
    }
    #poster {
        width: 200px !important;
        position: absolute;
        top: 65% !important;
        right: 50% !important;
        transform: translate(50%, -50%);
    }
    .isi {
        width: 200px !important;
        position: absolute;
        top: 115% !important;
        right: 50% !important;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .pmbcr {
        position: absolute;
        top: 155% !important;
        right: 50%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .pmbcr img {
        width: 200px !important;
    }
    .mdrt {
        position: absolute;
        top: 185% !important;
        right: 47%;
        transform: translate(50%, -50%);
        z-index: 1;
    }
    .mdrt img {
        width: 200px !important;
    }
    footer {
        position: absolute;
        top: 160% !important;
        right: 50%;
        transform: translate(50%, -50%);
        padding-top: 65rem;
    }
}

/* ip 6/7/8 */
@media only screen and (max-width: 376px) {
    .judul {
        width: 250px !important;
        position: absolute;
        top: 25% !important;
        right: 50%;
        transform: translate(50%, -50%);
    }
    #poster {
        width: 150px;
        position: absolute;
        top: 80% !important;
        right: 50%;
        margin-top: 10px;
        transform: translate(50%, -50%);
    }
    .isi {
        width: 200px !important;
        position: absolute;
        top: 110% !important;
        right: 50%;
        margin-top: 15%;
        transform: translate(50%, -50%);
        z-index: 1;
        padding-top: 10rem;
    }
    .pmbcr {
        position: absolute;
        top: 140% !important;
        right: 50%;
        margin-top: 15%;
        transform: translate(50%, -50%);
        z-index: 1;
        padding-top: 15px;
    }
    .pmbcr img {
        width: 200px !important;
        margin-top: 15%;
    }
    .mdrt {
        position: absolute;
        top: 165% !important;
        right: 50%;
        margin-top: 15%;
        transform: translate(50%, -50%);
        z-index: 1;
        padding-top: 15px;
    }
    .mdrt img {
        margin-top: 15%;
        width: 200px !important;
    }
    footer {
        position: absolute;
        top: 210% !important;
        right: 50%;
        transform: translate(50%, -50%);
        margin-top: 15%;
        padding-top: 20rem;
    }
}