/************************************************************************************
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:116px; background: none;
}

.mobile-search {
  display: none;
  border-bottom: 0px solid #ccc;
}

.mobile-search form {
  display: flex;
  border: 0px solid #aaa;
  border-radius: 6px;
  overflow: hidden; width:200px;
}

.mobile-search input {
  flex: 1;
  border: none;
  padding: 10px;
  outline: none;
  font-size: 12px;
}

.mobile-search button {
  background: #002b5c;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

	.page-header
	{
	position: fixed;top:0px;left:0px; right:0px; z-index:100; background:url(pics/blue_bg2.jpg); 
	-moz-box-shadow: 0px 1px 5px #111; -webkit-box-shadow: 0px 1px 5px #111; box-shadow: 0px 1px 5px #111;
  -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);
}

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

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

#boxshadow_photo {
    -moz-box-shadow: 0px 3px 5px #666;
    -webkit-box-shadow: 0px 3px 5px #666;
    box-shadow: 0px 3px 5px #666;
	margin:auto;
	width:150px;
}


	#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;
	}
	
	#col-left-note
	{
	width: auto; float:none; height: auto; border: #333333 0px dashed; margin-right:0px;
	padding:20px; text-align: left; border-radius:40px; margin-bottom: 15px;
	}
	
	#col-right-note
	{
	width: auto; float:none; height: auto; border: #333333 0px dashed;
	padding:20px; text-align: justify; border-radius:40px;
	}
	
	#col-left-headline
	{
	width: auto; float:none; height: auto; border: #333333 0px dashed; margin-right:0px;
	padding:0px; text-align: left; border-radius:20px; margin-bottom: 15px; background:#FFFFFF;
	}
	
	#col-right-headline
	{
	width: auto; float:none; height: auto; border: #333333 0px dashed;
	padding:15px; text-align: justify; border-radius:20px;
	}
	
	
	#menu-res
	{
	width: auto; display:block;
	}
	
	#spot-kiri
	{
	width: 100%; 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;
	}
	
	#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:20px;
}

#headline-container
{
width: auto; padding:20px;
}

#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:30px; font-weight:bold; line-height:30px; letter-spacing:-2px; 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: 99%;
	  height: 260px;
	  }
	  
	.center-cropped-news {
	  object-fit: cover; /* Do not scale the image (cover / contain) */
	  object-position: center; /* Center the image within the element */
	  width: 99%;
	  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;
  }
}