@media screen and (max-width:1280px){
	.blog-detail .left{width:65%;}
	.blog-detail .right{width:35%;}
	.mobileshow {
	display:block;
	border: #cccccc 2px solid;
	position: absolute;
	top: 132px;
	/*margin: 0 40px;*/
	left:21%;
	width:215px;
	padding: 10px;}
}
@media screen and (max-width:1100px){
	.map-canvas, .the-slider{width:50%;}
	.contact-form, .the-content{width:50%;}

}
@media screen and (max-width:1000px){
	.content .box p{width:80%;}
	.apps .blog-list .box{width:33.33%;}
	.apps .blog-list .box-promo{width:48.5%;margin:10px 0.75%;}
	.blog-detail .right .box .inner .img{height:150px;}

}
@media screen and (max-width:800px){
	.header.contact-us{ height:100% !important; }
	.header.menu .the-content{ height:100% !important; }
	.header.menu .the-content .inner .text{ height:100% !important; overflow:visible !important;}
	.header.menu{ height:100% !important; }

	.map-canvas, .the-slider{width:100%; float:none;}
	.the-slider{height:400px !important; overflow:hidden;}
	.contact-form, .the-content{width:100%; float:none; height:auto !important;}
	.contact-form .ctc-frm{height:auto !important;}
	.contact-form .ctc-frm, .contact-form .inner{padding-bottom:0;}

	.top .logo{float:none; margin:20px auto;}
	.top ul{padding-right:0; text-align:center;}
	.slider{padding-top:174px; height:100% !important;}
	.apps .blog-list .box{width:50%;}
	.apps .blog-list .box-promo{width:100%;margin:10px 0;}

	.blog-detail .right{width:100%; float:none; position:static;}
	.blog-detail .right .box{padding:0;}
	.blog-detail .right .box .inner{margin-bottom:10px;}
	.blog-detail .left{width:100%; margin-right:0; float:none;}
	.blog-detail .right .box .inner .img{height:150px;}
	#trip{float:none;width:auto;display:block;}
	#trip_kecil{display:flex;
	justify-content: center;}
	#trip_besar{display:none;}

}
@media screen and (max-width:480px){
	.main-logo{width:200px; margin-left:-100px; left:50%;}
	.content .box p{width:calc(100% - 30px); font-size:0.8em; padding:30px 0px 0px;}
	.footer .foot-note p{font-size:0.636em; padding:0;}
	.footer .social ul{padding:0;}
	.footer .social ul li{display:block; padding:5px 0; margin:0;}

	.slider-nav .item{width:100px; height:80px;}
	.slider-for .item{width:100%;}
	.slider-for .prev-img, .slider-for .next-img{display:none;}
	.slider-for .slick-prev, .slider-for .slick-next{background:none; width:40px;}

	.the-slider{height:300px !important;}
	.contact-form form .info{display:block; padding:20px 0;}

	.slider{padding-top:155px;}
	.desk-menu ul{display:none;}
	.mobile-menu{display:block; line-height:normal; height:61px;}

	.nav .dl-menuwrapper{margin:8px 0; display:block; max-width:none; position:relative; z-index:999; text-align:center;}
	.nav .dl-menuwrapper .dl-menu li a{color:#FFFFFF !important;}

	.nav .dl-menuwrapper ul{background:#000000; height:auto !important; line-height:normal !important; margin:0;}
	.nav .dl-menuwrapper ul li{padding:0; text-align:left;}
	.nav .dl-menuwrapper ul li a{font-family:'DINProBold'; font-size:0.818em; text-transform:uppercase;}

	.nav .dl-menuwrapper button:after{
		box-shadow:0 10px 0 #000, 0 20px 0 #000;
		background-color:#000;
		width:100%;
		left:0;}
	.nav .dl-menuwrapper button{background-color:#FFF; width:40px;}
	.nav .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active{background-color:#FFF;}

	.apps .blog-list .box-promo .split{float:none;display:block;margin-bottom:10px;}



}
@media screen and (max-width:384px){
	.the-content .inner .menu-cat li{display:block; border-bottom:1px solid #DDDDDD; padding-bottom:5px;}
	.the-content .inner .menu-cat li:after{content:'';}
	.apps .blog-list .box{width:100%;}
	.apps .blog-list .box-promo{margin:10px 0;}

	.slider{padding-top:67px;}
	.top .logo, .home .top .logo{margin:20px; float:left; width:100px;}
	.mobile-menu, .home .top .mobile-menu{float:right; display:block; margin:0 20px;}
	.mobile-menu label{font-size:0.7em;}
	.mobile-menu button::after{box-shadow:0 8px 0 #000000, 0 16px 0 #000000; height:3px;}
	.mobile-menu button{height:53px;}
	.mobile-menu ul{max-height:300px; overflow-y:scroll;
		left: 0;
		/*max-height:250px;*/
		position: absolute;
		right: 0;
		top: 67px;
		width: 100%;}

	.home .mobile-menu{float:none; margin:0; width:auto;}
	.the-content .inner .menu-cat{display:none;}
	.the-content .inner .text{margin-top:0;}
	.mobileshow{left:18%;}

}
@media screen and (max-width:320px){
	.contact-form input[type="button"]{width:100%;}
	.contact-form form{position:relative;}
	.contact-form form .info{text-align:center; padding:10px 0;}
	.contact-form form .loader{bottom:0; left:50%; margin-left:-8px; position:absolute;}
	.mobileshow{left:12%;}

}

@media screen and (max-height:360px){
	.slider{padding-top:67px;}
	.top .logo, .home .top .logo{margin:20px; float:left; width:100px;}
	.desk-menu{display:none;}
	.mobile-menu, .home .top .mobile-menu{float:right; display:block; margin:0 20px;}
	.mobile-menu label{font-size:0.7em;}
	.mobile-menu button::after{box-shadow:0 8px 0 #000000, 0 16px 0 #000000; height:3px;}
	.mobile-menu button{height:53px;}
	.mobile-menu ul{max-height:300px; overflow-y:scroll;
		left: 0;
		/*max-height:250px;*/
		position: absolute;
		right: 0;
		top: 67px;
		width: 100%;}

	.home .mobile-menu{float:none; margin:0; width:auto;}
	.home .top .mobile-menu ul{max-height:200px;}
	.the-content .inner .menu-cat{display:none;}
	.the-content .inner .text{margin-top:0;}

}
@media screen and (max-height:320px){
	.mobile-menu ul{max-height:250px;}
	.home .top .mobile-menu ul{max-height:250px;}
}