/* untuk ipad landscape */
 /*@media screen and (max-width: 1024px) {*/



 @media screen and (max-width: 1194px) {
		
		#wrapper {
			width: 100% !important;
		}

		#wrapper.content #sidebar{
			width: 0%;  
		}


		#wrapper.content #center{
			float: left; 
			width: 100%;
			padding-left: 252px;
			padding-bottom: 30px;

			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;

			overflow: visible;
		}

		#wrapper.content #center img{
			width: auto;
			min-width: auto;
			max-width: 100%;
		}

		#wrapper.cotnent #center #interactiveRoom {
			height: auto !important;
		}

		#wrapper.content #center #interactiveRoom .room {
			height: auto;
		}

		#wrapper.content #center #interactiveRoom #options img{
			width: 30px;
			min-width: auto;
			max-width: auto;
		}

		#wrapper.content #center #wrapceramic{
			width: 80%;
		}

		#wrapper.content #center #gallery{
			width: 100% !important;
		}

		.jcarousel-skin-tangocer .jcarousel-container-horizontal{
			width: 100%;
		}

		.jcarousel-skin-tangoku .jcarousel-container-horizontal {
			width: 70%;
		}

		.jcarousel-skin-tangoku .jcarousel-clip-horizontal,
		.jcarousel-skin-tangoku .jcarousel-clip-horizontal {
			width: 100%;
		}





		#center .two-side { overflow: visible; }
		#center .two-side .right { border: none; }
		#center .two-side .black-box{ width: 100%; }

 }





 /* untuk ipad portait */
 @media screen and (max-width: 768px) {

		#wrapper.content{
		}

		#wrapper.content #sidebar{
		}
		
		#wrapper.content #center{
		}




		#center .two-side .left{ width: 100%; float: none; }
		#center .two-side .link-by-month{ border-bottom: 1px solid #000; }
		#center .two-side .right{ width: 100%; float: none; display: block; }


		#center .left-contact { width: 100%; float: none; display: block; }
		#center .right-contact { 
			width: 100%; float: none; display: block; 
			padding-left: 0; margin-top: 20px; padding-right: 0;
		}

 }






 /* untuk iphone landscape */
 /*@media screen and (max-width: 480px) {*/
 @media screen and (max-width: 680px) {


		html, body{ background: #fff; }
	
		#bgslide{
			display: none;
		}

		#copyright{ display: none; }

		#wrapper.content{
			width: 100%; padding:0; margin:0;
		}




		#wrapper.content #center #interactiveRoom {
			height: auto !important; background:#eee;
		}

		#wrapper.content #center #interactiveRoom .room {
			height: auto;
		}

		#wrapper.content #center #interactiveRoom #options img{
			width: 30px !important;
			min-width: auto;
			max-width: auto;
		}




		#wrapper.content #sidebar{
			position: absolute;
			left: -223px; height: 100%;

		}

		#wrapper #sidebar nav{ 
			background: none; display: block; 
			top: 100px;
		}
		#wrapper.content #sidebar nav{ 
			position: relative;
			top: 0px;
		}
		#sidebar #openNav{
			left: 15px;
			display: none;
		}
		#wrapper.content #openNav{ display: block; }

		#wrapper.content #center{ 
			left:0; top:0; bottom:0;
			min-height: 100%;
			width: 100%; height: auto;
			padding:10px;
			margin:0;  
			overflow: hidden;
			background:#fff;


			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}

		#wrapper.content #center img{
			width: 100% !important;
		}


		#wrapper.content #center:after{ display: none; }
		#wrapper.content #sidebar:after{ 
			content: '';
			display: block; height: 100%; 
			position: fixed !important; width: 20px; left: 214px;
			z-index: -1; top:25px; background: #fff;
			box-shadow: 2px -2px 3px #fff;
		}
		#wrapper.content #sidebar:before{ 
			content: '';
			width: 1px; height: 100%; display: block;			
			z-index: -1;
			position: fixed; top: 0; left: 222px;
			box-shadow: 0px 0px 10px 2px #000;
		}
		

		#wrapper.content #center #responsiveMenu{ display: block; }

		#wrapper.menuresponsiveActive #sidebar:before{
			display: block;
			z-index: 1;
		}
		#wrapper.menuresponsiveActive #sidebar:after{
			display: block;
			z-index: 3;
			left: 222px; width: 10px;
		}
		#wrapper.menuresponsiveActive #sidebar{
			left: 0px;
		}

		#wrapper.menuresponsiveActive #center{
			z-index: 1000;
			position: relative; left: 222px;
		}










		/* setting jcarousel */
		#wrapceramic, #gallery{
			width: 100% !important;
		}

		.jcarousel-skin-tangocer .jcarousel-container {
		
		}
		
		.jcarousel-skin-tangocer .jcarousel-direction-rtl {
			direction: rtl;
		}
		
		.jcarousel-skin-tangocer .jcarousel-container-horizontal {
		    width: 230px; width: 100%; 
		    padding: 0px 0px;
				position: relative;
				/*left: 50%; margin-left: -60px;*/
		}
		
		.jcarousel-skin-tangocer .jcarousel-container-vertical {
		    width: 75px;
		    height: 245px;
		    padding: 40px 20px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip {
				width: 230px !important;
				width: 100% !important;
		    overflow: hidden;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip-horizontal {
		    width:  300px;
		    height: 110px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip-vertical {
		    width:  75px;
		    height: 245px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item {
		    width: 100px;
		    height: 100px;
		    border: 4px solid #808080;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-horizontal {
			margin-left: 0;
		    margin-right: 10px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-direction-rtl .jcarousel-item-horizontal {
			margin-left: 10px;
		    margin-right: 0;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-vertical {
		    margin-bottom: 10px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-placeholder {
		    background: #fff;
		    color: #000;
		}


		.jcarousel-skin-tangocer .jcarousel-next-horizontal {
			top: auto; bottom: -35px !important;
			right: 45%;
		}

		.jcarousel-skin-tangocer .jcarousel-prev-horizontal {
			top: auto; bottom: -35px !important;
			left: 45%;	margin-left: -20px;
		}
		
		.jcarousel-skin-tangoku .jcarousel-container {
		}

		.jcarousel-skin-tangoku .jcarousel-direction-rtl {
			direction: rtl;
		}

		.jcarousel-skin-tangoku .jcarousel-container-horizontal {
			width: 100% !important;
			height: auto;
			padding: 0px 0px;
		}

		.jcarousel-skin-tangoku .jcarousel-container-vertical {
			width: 75px;
			height: 245px;
			padding: 40px 20px;
		}

		.jcarousel-skin-tangoku .jcarousel-clip {
			overflow: hidden;
			width: 100% !important;
		}

		.jcarousel-skin-tangoku .jcarousel-clip-horizontal {
			width:  100% !important;
		}

		.jcarousel-skin-tangoku .jcarousel-clip-vertical {
			width:  75px;
			height: 245px;
		}
		
		.jcarousel-skin-tangoku .jcarousel-item{
			width: 100 !important;
		}

		.jcarousel-skin-tangoku .jcarousel-item img {
			height: auto;
		}

		.jcarousel-skin-tangoku .jcarousel-item-horizontal {
			margin-left: 0;
			margin-right: 0px;
		}

		.jcarousel-skin-tangoku .jcarousel-direction-rtl .jcarousel-item-horizontal {
			margin-left: 0px;
			margin-right: 0;
		}

		.jcarousel-skin-tangoku .jcarousel-item-vertical {
			margin-bottom: 10px;
		}

		.jcarousel-skin-tangoku .jcarousel-item-placeholder {
			background: #fff;
			color: #000;
		}

		



		/* setting jquery lightbox */
		#jquery-lightbox #lightbox-image {
			width: 100% !important;
			display: none;
		}

		#jquery-lightbox #lightbox-container-image-box{
			width: 100% !important;
			height: auto !important;
		}

		
		#jquery-lightbox #lightbox-container-image-data-box {
			width: 100% !important;
			padding: 0;
		}










		/**
		 * BLACK BOX */
		#center .two-side{ height: auto; }

		#center .two-side .left{ 
			width: 100% !important; 
			padding: 0 !important;
		}
		#center .two-side .right{ 
			width: 100% !important; 
			padding: 0 !important;
			border: none;
			margin:0;
			padding-top: 15px;
			padding-bottom: 25px; border-top: 1px solid #000;
		}

		#center .two-side .black-box{
			width: 100%; height: auto; background: none;
			color: #000; overflow-y: none;

			padding: 0 !important;
		}

		#center .two-side .link-by-month{ display: block; border-bottom:none; }
		 
		#center .two-side .link-by-month ul li{ display: block; padding: 3px 0px;
		}







		#center .left-contact{
			width: 100% !important;
			display: block;
		}

		#center .right-contact{
			margin-top: 20px;
			width: 100% !important;
			display: block;
			padding:0;
		}


		#center .form{ margin:0; padding:0; }

		#center .form input,
		#center .form textarea{ width: 90%; }
		#center .form input[type="submit"]{
			width: 50%;
			margin-left: 0 !important;
		}





		/* OPTIONS OF INTERACTIVE ROOM */
		#interactiveRoom{ overflow: visible; }

		#interactiveRoom #options {
			top: 0;  
			position: relative; overflow: hidden;
			background: none;
			border: none;
			padding: 5px 0px 0px 0px;
		}


 }


 /* untuk iphone portait */
 @media screen and (max-width: 320px) {

		html, body{ background: #fff; }
	
		#bgslide{
			display: none;
		}

		#copyright{ display: none; }

		#wrapper.content{
			width: 100%; padding:0; margin:0;
		}


		#wrapper.content #sidebar{
			position: absolute;
			left: -223px; height: 100%;

		}

		#wrapper #sidebar nav{ 
			background: none; display: block; 
			top: 100px;
		}
		#wrapper.content #sidebar nav{ 
			position: relative;
			top: 0px;
		}
		#sidebar #openNav{
			left: 15px;
			display: none;
		}
		#wrapper.content #openNav{ display: block; }

		#wrapper.content #center{ 
			left:0; top:0; bottom:0;
			min-height: 100%;
			width: 100%; height: auto;
			padding:10px;
			margin:0;  
			overflow: hidden;
			background:#fff;


			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}

		#wrapper.content #center img{
			width: 100% !important;
		}


		#wrapper.content #center:after{ display: none; }
		#wrapper.content #sidebar:after{ 
			content: '';
			display: block; height: 100%; 
			position: fixed !important; width: 20px; left: 214px;
			z-index: -1; top:25px; background: #fff;
			box-shadow: 2px -2px 3px #fff;
		}
		#wrapper.content #sidebar:before{ 
			content: '';
			width: 1px; height: 100%; display: block;			
			z-index: -1;
			position: fixed; top: 0; left: 222px;
			box-shadow: 0px 0px 10px 2px #000;
		}
		

		#wrapper.content #center #responsiveMenu{ display: block; }

		#wrapper.menuresponsiveActive #sidebar:before{
			display: block;
			z-index: 1;
		}
		#wrapper.menuresponsiveActive #sidebar:after{
			display: block;
			z-index: 3;
			left: 222px; width: 10px;
		}
		#wrapper.menuresponsiveActive #sidebar{
			left: 0px;
		}

		#wrapper.menuresponsiveActive #center{
			z-index: 1000;
			position: relative; left: 222px;
		}










		/* setting jcarousel */
		#wrapceramic, #gallery{
			width: 100%;
		}

		.jcarousel-skin-tangocer .jcarousel-container {
		
		}
		
		.jcarousel-skin-tangocer .jcarousel-direction-rtl {
			direction: rtl;
		}
		
		.jcarousel-skin-tangocer .jcarousel-container-horizontal {
		    width: 230px;
				width: 100% !important;
		    padding: 0px 0px;
				position: relative;
		}
		
		.jcarousel-skin-tangocer .jcarousel-container-vertical {
		    width: 75px;
		    height: 245px;
		    padding: 40px 20px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip {
				width: 230px !important;
				width: 100% !important;
		    overflow: hidden;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip-horizontal {
		    width:  300px;
		    height: 110px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-clip-vertical {
		    width:  75px;
		    height: 245px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item {
		    width: 100px;
		    height: 100px;
		    border: 4px solid #808080;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-horizontal {
			margin-left: 0;
		    margin-right: 10px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-direction-rtl .jcarousel-item-horizontal {
			margin-left: 10px;
		    margin-right: 0;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-vertical {
		    margin-bottom: 10px;
		}
		
		.jcarousel-skin-tangocer .jcarousel-item-placeholder {
		    background: #fff;
		    color: #000;
		}


		.jcarousel-skin-tangocer .jcarousel-next-horizontal {
			top: auto; bottom: -35px !important;
		}

		.jcarousel-skin-tangocer .jcarousel-prev-horizontal {
			top: auto; bottom: -35px !important;
		}
		
		.jcarousel-skin-tangoku .jcarousel-container {
		}

		.jcarousel-skin-tangoku .jcarousel-direction-rtl {
			direction: rtl;
		}

		.jcarousel-skin-tangoku .jcarousel-container-horizontal {
			width: 100% !important;
			height: auto;
			padding: 0px 0px;
		}

		.jcarousel-skin-tangoku .jcarousel-container-vertical {
			width: 75px;
			height: 245px;
			padding: 40px 20px;
		}

		.jcarousel-skin-tangoku .jcarousel-clip {
			overflow: hidden;
			width: 100% !important;
		}

		.jcarousel-skin-tangoku .jcarousel-clip-horizontal {
			width:  100% !important;
		}

		.jcarousel-skin-tangoku .jcarousel-clip-vertical {
			width:  75px;
			height: 245px;
		}
		
		.jcarousel-skin-tangoku .jcarousel-item{
			width: 100 !important;
		}

		.jcarousel-skin-tangoku .jcarousel-item img {
			height: auto;
		}

		.jcarousel-skin-tangoku .jcarousel-item-horizontal {
			margin-left: 0;
			margin-right: 0px;
		}

		.jcarousel-skin-tangoku .jcarousel-direction-rtl .jcarousel-item-horizontal {
			margin-left: 0px;
			margin-right: 0;
		}

		.jcarousel-skin-tangoku .jcarousel-item-vertical {
			margin-bottom: 10px;
		}

		.jcarousel-skin-tangoku .jcarousel-item-placeholder {
			background: #fff;
			color: #000;
		}

		



		/* setting jquery lightbox */
		#jquery-lightbox #lightbox-image {
			width: 100% !important;
			display: none;
		}

		#jquery-lightbox #lightbox-container-image-box{
			width: 100% !important;
			height: auto !important;
		}

		
		#jquery-lightbox #lightbox-container-image-data-box {
			width: 100% !important;
			padding: 0;
		}










		/**
		 * BLACK BOX */
		#center .two-side{ height: auto; }

		#center .two-side .left{ 
			width: 100% !important; 
			padding: 0 !important;
		}
		#center .two-side .right{ 
			width: 100% !important; 
			padding: 0 !important;
			border: none;
			margin:0;
			padding-top: 15px;
			padding-bottom: 25px; border-top: 1px solid #000;
		}

		#center .two-side .black-box{
			width: 100%; height: auto; background: none;
			color: #000; overflow-y: none;

			padding: 0 !important;
		}

		#center .two-side .link-by-month{ display: block; }
		 
		#center .two-side .link-by-month ul li{ display: block; padding: 3px 0px;
		}







		#center .left-contact{
			width: 100% !important;
			display: block;
		}

		#center .right-contact{
			margin-top: 20px;
			width: 100% !important;
			display: block;
			padding:0;
		}


		#center .form{ margin:0; padding:0; }

		#center .form input,
		#center .form textarea{ width: 90%; }
		#center .form input[type="submit"]{
			width: 50%;
			margin-left: 0 !important;
		}



		/* OPTIONS FOR INTERACTIVE ROOM */
		#interactiveRoom .options .block{
			width: 100%;

			border-sizing: border-box;
			-moz-border-sizing: border-box;
			-webkit-border-sizing: border-box;

			float: none; display: block; overflow: hidden;

			margin-top: 7px;
		}

		#interactiveRoom .options .block:first-child{ margin-top: 0; }

} /* END OF RESPONSIVE DESIGN */