@media (min-width: 769px) {  // monitor
body{
    background-color:#f0f0f0;
}   
.head_top{
    *background-color:#0288D1;
    height:50px;
    padding:5px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
.head_sub{
    *background-color:#A5C9DC;
    height:40px;
    padding:10px 5px 5px 20px;
    position:fixed;
    top:52px;
    left:0;
    right:0;
}
.top_image{
    margin-top:95px;
    *border-radius:10px;
}
.produk_image{
    width:80%;
    *float:left;
    padding:10px;
    *background-color:#f5f5f5;
    margin:1%;
    max-width:1200px;
    font-size:20px;
    margin-top:100px;
    *box-shadow:1px 2px 5px #a0a0a0;
    *border-radius:20px;
}
.produk_image:hover{
    width:80%;
    *float:left;
    padding:10;
    background-color:#444;
    margin:1%;
    *box-shadow:1px 2px 5px #4FC3F7;
    max-width:1200px;
    margin-top:100px;
    border-radius:20px;
    font-size:20px;
}
.logo_lp{
   height:40px;
   border-radius:5px;
}
.a_link{
    color:#fff;
    text-decoration:none;
    margin-right:20px;
    font-size:16px;
}
.tag_line{
    margin-top:10px;
    margin-bottom:30px;
    width:70%;
    font-family:poppins;
    color:#fff;
    font-size:22px;
    text-shadow:1px 2px #aaa;
    background-color:#111;
    padding:10px;
    border-radius:5px;
}
.bottom_text{
    margin-top:20px;
    margin-bottom:20px;
    width:80%;
    font-family:poppins;
    color:#fff;
    font-size:22px;
    text-shadow:1px 3px #aaa;
    background-color:#111;
    padding:10px;
    border-radius:5px;
}
.bottom_info{
    width:100%
    margin-top:20px;
    font-family:poppins;
    color:#555;
    font-size:18px;
    background-color:#eee;
    padding:10px;
    bottom:0;
    left:0;
    right:0;
}
.title_post{
    font-size:25px;
    color:#0288D1;
}
.content_post{
    max-width:600px;
    font-size:16px;
}
}
@media (max-width: 768px) {  // android
body{
   * background-color:#f5f5f5;
}
.head_top{
    *background-color:#0288D1;
    height:50px;
    padding:5px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
.head_sub{
    *background-color:#A5C9DC;
    height:40px;
    padding:10px 5px 5px 20px;
    position:fixed;
    top:52px;
    left:0;
    right:0;
    
}
.top_image{
    margin-top:95px;
    *border-radius:10px;
}
.produk_image{
    width:98%;
    float:left;
    padding:15px;
    *background-color:#f5f5f5;
    margin:1%;
    font-size:16px;
    margin-top:30px;
}
.produk_image:hover{
    width:98%;
    float:left;
    padding:15px;
    background-color:#444;
    margin:1%;
    *box-shadow:1px 2px 5px #a0a0a0;
    font-size:16px;
    margin-top:30px;
}
.logo_lp{
   height:40px;
   border-radius:5px;
}
.a_link{
    color:#fff;
    text-decoration:none;
    margin-right:20px;
    font-size:16px;
}
.tag_line{
    margin-top:10px;
    margin-bottom:30px;
    width:80%;
    font-family:poppins;
    color:#fff;
    font-size:22px;
    text-shadow:1px 2px #aaa;
    background-color:#111;
    padding:10px;
    border-radius:5px;
}
.bottom_text{
    margin-top:20px;
    margin-bottom:20px;
    width:100%;
    font-family:poppins;
    color:#fff;
    font-size:22px;
    text-shadow:1px 3px #aaa;
    background-color:#111;
    padding:10px;
    border-radius:5px;
}
.bottom_info{
    width:100%
    margin-top:20px;
    font-family:poppins;
    color:#555;
    font-size:15px;
    background-color:#eee;
    padding:10px;
    bottom:0;
    left:0;
    right:0;
}
.title_post{
    font-size:20px;
    color:#0288D1;
}
.content_post{
    max-width:600px;
    font-size:16px;
}
}