@media only screen and (min-width:641px){
    body { margin-top: 75px; }
    .hp { display:none;}
    .pc { display:block;}
    
    .bingkai-satu {
        display: inline-block;
        width: 250px;
        padding: 10px;
        border: 1px;
        background-color: none;
    }
    
    .bingkai {
        display: inline-block;
        width: 150px;
        padding: 10px;
        border: 1px;
        background-color: none;
    }
}
@media only screen and (max-width:640px){
    .smartphone { text-align: center; }
    .hp { display:block;}
    .pc { display:none;}
    
    .bingkai-satu {
        display: inline-block;
        width: 49%;
        padding: 5px;
        border: 1px;
        background-color: none;
    }
    
    .bingkai {
        display: inline-block;
        width: 24%;
        padding: 5px;
        border: 1px;
        background-color: none;
    }
}

@media print {
    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}
.blink { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }

	
.h-style {
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}    
.strike { display: block; text-align: center; overflow: hidden; white-space: nowrap; }

.strike > span { position: relative; display: inline-block; }

.strike > span:before, .strike > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 3px; background: red; }

.strike > span:before { right: 100%; margin-right: 15px; }

.strike > span:after { left: 100%; margin-left: 15px; }

.getar:hover { animation: shake 0.5s; animation-iteration-count: infinite; }

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.badge { background: red; }

.gradien { background: linear-gradient(90deg, #617C58, #428BCA, #428BCA, #617C58); border:1px solid #8100C2; }

.judul { margin:0px; font-weight: bold; }

.blur{ -webkit-filter: grayscale(220%); filter: grayscale(220%); }

.bingkai-blur{ filter: blur(2px); -webkit-filter: blur(2px); }

.center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.devy { transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s }
.devy:hover { transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); box-shadow: 2px 4px 3px 2px #222 }