/*---------------------------------------------------------*\
    WIZATA RESPONSIVE STYLE Oketheme.com
\*---------------------------------------------------------*/

@media screen and (max-width: 1120px) {
	:root {
		--maxwidth: 740px;
	}
	.gridpad {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.testi,#testislider {
		width:100%;
	}
	.testi {
		text-align:center;
		border-bottom:1px solid #F9F9F9;
		margin-bottom:30px;
	}
	.tourbox {
		padding-top: 0;
	}
	.boxview,.boxdetail {
		width:100%;
		float:none;
	}
	.boxview {
		max-width: 600px;
		margin: 0 auto 30px;
	}
	.boxdetail {
		border-top: 5px solid rgba(0, 0, 0, 0.1);
		padding-top: 20px;
	}
	.scontain,.sidecontain {
		width:100%;
		padding:0;
	}
	.sidecontain {
		margin-top: 20px;
	}
	#randomside {
		max-width : 360px;
		margin:0 auto;
	}
	.banxs {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 20px;
	}
	
}
@media screen and (max-width: 768px) {
	:root {
		--maxwidth: 600px;
	}
	.naviku {
	background : #222;
	position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
	}
	.naviku > li {
		float: none;
		text-align:left;
	}
	.naviku ul {
		display: block;
		width: 100%;
	}
	.naviku li li .parent {
		background-image: url(img/downArrow.png);
		background-repeat: no-repeat;
	}
	.naviku li li.hover ul,
	.naviku>li.hover>ul {
		position: static
	}
	.naviku li ul {
	padding:0;
	background : #444;
	}
	.toggleMenu {
		display: block
	}	
	.whypad {
		grid-template-columns: repeat(1, 1fr);
	}
	.why {
		text-align: left;
	}
	.why img {
		float: left;
		max-width: 100px;
		margin: 0 10px 5px 0;
	}
	.why:hover img {
		padding: 5px;
	}
	.why h2 {
		margin-top: 5px;
	}
	.tourcs {
		display: none;
	}
	.tourt {
		display: block;
		text-align: center;
		margin: 0;
	}
	.tourc select,.tourc button {
		width:100%;
		margin-right:0;
	}
	.tabdetail {
		margin-top: 0;
		padding-top: 10px;
	}
	.ui-tabs .ui-tabs-nav {
		font-size: 90%;
	}
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-content .ui-state-active a {
		background : var(--colorborder);
	}
	.listblog img {
		max-width: 200px;
	}
	#footerwrap {
		grid-template-columns: repeat(1, 1fr);
	}
	.copyright {
		grid-column: 1 / 1;
	}
	.jumbo {
	font-size : 200%;
	}
	h1,.headline,.testi h2,.intro h2  {
	font-size : 170%;
	}
	h2,.big {
	font-size : 150%;
	}
	h3 {
	font-size : 130%;
	}
	h4,.listblog h2 {
	font-size : 110%;
	}
	h5 {
	font-size : 100%;
	}
	#tourgoal {
		width:100%;
		border:none;
		padding:0;
	}
	#tourgoal2 {
		width:100%;
		margin-top:20px;
	}
	.rentdetail img {
	float: none;
	width: 100%;
	margin: 0 auto;
	}
}
@media screen and (max-width: 640px) {
	:root {
		--autopad: 15px;
	}
}

@media screen and (max-width: 500px) {
	#headerwrap {
		grid-template-columns: repeat(1, 1fr);
	}
	#headerwrap > div {
		text-align: center;
	}
	.gridpad {
		gap: 10px;
	}
	#tourreview {
		width:100%;
		padding: 0;
		float:none;
	}
	#tourreview img {
		float: left;
		margin: 0 10px 10px 0;
		max-width: 200px;
	}
	#tourform {
		width: 100%;
		margin-top: 20px;
	}
	.jumdiv,#datetour {
		width:100%;
		margin-bottom:0;
	}
	.harpil {
		font-size:95%;
	}
	.tomb {
		width:100%;
		margin:15px 0 10px;
	}
	.toursent {
		padding: 10px;
	}
	.blogsearch, .invsearch {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media screen and (max-width: 420px) {
	.gridpad {
		grid-template-columns: repeat(1, 1fr);
		padding: 10px 15px;
		gap: 15px;
	}
	.listblog img {
		max-width: 100px;
		padding: 5px;
		margin: 5px 10px 2px 0;
	}
	.pilhar {
		display:none;
	}
	.newsticker:after,.newsticker:before {
		display: none
	}
	#tourgoal img, #tourreview img {
		float: none;
		margin: 0;
		max-width: 100%;
		display: block;
		margin-bottom: 10px;
	}
	.element1,.element2,.element3,#captcha_code,#captchaimg {
		width:100%;
		float : none;
	}
}