/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* untuk ukuran layar 700px kebawah */
@media screen and (max-width: 780px) {

    body {

        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }

    #bg-inside-header
    {
        height:48px;
        background: none;
    }

    .page-header
    {
        position: fixed;
        top:0px;
        left:0px;
        right:0px;
        z-index:100;
        background: #FFFFFF;
        -moz-box-shadow: 0px 1px 5px #333;
        -webkit-box-shadow: 0px 1px 5px #333;
        box-shadow: 0px 1px 5px #333;
        -webkit-transition: top 0.8s;
        -moz-transition: top 0.8s;
        transition: top 0.8s;
    }

    .page-header.off-canvas {
        top: 0px;
    }

    .page-header.fixed {
        top: 0;
        z-index: 999;
    }

    #header
    {
        width: 100%;
        display:inline-block;
    }

    #full-header
    {
        display:none;
    }

    #header-mobile
    {
        width: 100%;
        padding:0px;
        height:70px;
        text-align:center;
        border:#FF0000 0px solid;
        display:flex;
        align-items:center;
    }

    #caption-header
    {
        width: auto;
        margin-left:10px;
        border:0px red solid;
        display:inline-block;
        margin-top:0px;
    }


    #menu-top
    {
        border:#FF0000 0px solid;
        margin-bottom:0px;
        margin-top:0px;
        background:rgba(0, 13, 51, 0.8);
    }

    #kiri-header
    {
        display: none;
    }

    #kanan-header
    {
        width: auto;
        padding:0px;
        float:none;
        text-align:center;
        display:block;
        height:0px;
        align-items:center;
    }

    #spotlight-col
    {
        width: 100%;
        display:inline-block;
        border:#333 0px solid;
    }

    #menu-res
    {
        width: auto;
        display:block;
    }

    #spot-kiri
    {
        width: 45%;
        padding:10px;
        float:none;
        height: auto;
        border: #aaa 0px dashed;
        display:inline-block;
        align-items:center;
        text-align: justify;
        border-radius:10px;
        margin-top:20px;
        margin-right:0px;
        vertical-align:top;

    }

    #spot-kanan
    {
        width: auto;
        padding:0px;
        float:none;
        height: auto;
        display:inline-block;
        align-items:center;
        text-align: center;
        margin-right:0px;
        border-radius:50px;
        margin-top:20px;
        padding:25px;
        background:url(../images/what-the-hex.png);
    }

    #spot-break
    {
        width: auto;
        padding:0px;
        float:none;
        height: auto;
        border: #aaa 0px dashed;
        display:inline-block;
        align-items:center;
        padding:0px;
        text-align: justify;
        border-radius:10px;
        margin-top:20px;
        margin-right:0px;
        clear:both;
    }

    #spot-widget-home
    {
        width: auto;
        padding:0px;
        float:none;
        height: auto;
        border: #0099CC 0px solid;
        display:inline-block;
        align-items:center;
        padding:10px;
        text-align: justify;
        margin-right:0px;
        border-radius:10px;
        margin-top:10px;
    }

    #kotak-widget-home
    {
        background:rgba(255,255,255, 0.5);
        width: auto;
        height: auto;
        padding:10px;
        border:#fff solid 1px;
        text-align:center;
        border-radius:10px;
        -moz-box-shadow: 0px 3px 5px #333;
        -webkit-box-shadow: 0px 3px 5px #333;
        box-shadow: 0px 3px 5px #333;
        margin:auto;

    }

    #quote-container
    {
        width: auto;
        padding:10px;
    }


    #footer-spot-col1
    {
        width: 100%;
        float: none;
        height: auto;
        border-bottom:#999 0px dashed;
        padding-left:0px;
        border-left: #fff 0px dashed;
        padding-bottom:10px;
        text-align: left;
        border-radius:0px;
        color:#fff;
        margin-bottom: 15px;
    }

    #footer-spot-col2
    {
        width: 100%;
        float: none;
        height: auto;
        border-bottom: #999 0px dashed;
        padding-left:0px;
        border-left: #fff 0px dashed;
        padding-bottom:10px;
        text-align: left;
        border-radius:0px;
        color:#fff;
        margin-bottom: 25px;
    }

    #footer-spot-col3
    {
        width: 100%;
        float: none;
        height: auto;
        border: #333333 0px dashed;
        padding-left:0px;
        border-left: #fff 0px dashed;
        padding:0px;
        text-align: left;
        border-radius:0px;
        color:#fff;
    }


    #quote-spot
    {
        width: auto;
        border:#FF0000 0px solid;
        display:inline-block;
        padding:20px;
        font-size:20px;
        font-weight:bold;
        line-height:30px;
        letter-spacing:0px;
        color:#FFFFFF;
        text-shadow: 0 2px 0 #000;
        float:none;
    }

    #kontak-kiri
    {
        width: auto;
        float:none;
        height: auto;
        border: #333333 1px dashed;
        margin-right:0px;
        padding:10px;
        text-align: left;
        border-radius:10px;
        font-size:20px;
        margin-bottom: 15px;
    }

    #kontak-kanan
    {
        width: auto;
        float:none;
        height: auto;
        border: #333333 1px dashed;
        padding:10px;
        text-align: justify;
        border-radius:10px;
    }

    #menu-trigger {
        display: none;
    }

    .center-cropped {
        object-fit: cover; /* Do not scale the image (cover / contain) */
        object-position: center; /* Center the image within the element */
        width: 100%;
        height: auto;
    }

    #main-container
    {
        width: 100%;
        display:inline-block;
        padding-top:20px;
        padding-bottom:20px;
        padding-left: 0px;
        padding-right: 0px;
        border: red 0px dashed;
        height: auto;
        margin-top:0px;
    }

    #leftside-menu
    {
        display:none;
    }

    #main-content
    {
        width:auto;
        float: none;
        height: auto;
        border: orange 0px dashed;
        margin-right: 0px;
        padding:15px;
        padding-bottom:0px;
        text-align: left;
        border-radius:0px;
        height: auto;
        margin-bottom:0px;
    }

    #rightside-menu
    {
        width: auto;
        float:none;
        height: auto;
        border: blue 0px dashed;
        padding:15px;
        text-align: center;
        border-radius:0px;
        padding-bottom:0px;
        height: auto;
    }

    #rightside-widget-berita
    {
        border:dashed 1px #0099FF;
        padding:5px;
        border-radius:10px;
        margin-bottom:15px;
        display:block;
    }

    #rightside-widget-link
    {
        border:dashed 1px #0099FF;
        padding:5px;
        border-radius:10px;
        margin-bottom:15px;
    }

    #product-kiri
    {
        width: 98%;
        display:inline-block;
        float:none;
        height: auto;
        border: #666 0px dashed;
        margin-right: 0px;
        padding:5px;
        text-align: left;
        border-radius:10px;
        font-size:10px;
        margin-bottom:15px;
    }

    #product-kanan
    {
        width: auto;
        display:inline-block;
        float:none;
        height: auto;
        border: #666 0px dashed;
        padding:5px;
        text-align: justify;
        border-radius:10px;
    }

    #title-product
    {
        text-align:center;
        padding-top:10px;
    }

    #sticky-menu
    {
        width:100%;
    }

    .float-panel {
        position:static!important;
    }

    .gallery-desktop {
        display:none;
    }
    .gallery-mobile {
        display: block;
    }

    .center-cropped-gallery {
        object-fit: cover; /* Do not scale the image (cover / contain) */
        object-position: center; /* Center the image within the element */
        width: 100%;
        height: 180px;
        border-radius:0px;
    }
}