/*=============================================================

	1366px
	
============================================================== */


@media screen and (max-width: 1366px) {
	
	#responsiveBar
		{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 30px;
		background: #b0b;
		opacity: .8;
		z-index: 9999;
		text-align: center;
		display: block;
			}
		
	#responsiveBar p
		{
		font: normal 14px 'Raleway Semibold', serif;
		line-height: 24px;
		color: #fff;
			}
		
	#responsiveBar p:after
		{
		content: '1366px';
			}
	
	}



/*=============================================================

	1366 down to 1280px
	
============================================================== */


@media screen and (max-width: 1280px) {
	
	#responsiveBar
		{
		background: #0bb;
			}
		
	#responsiveBar p:after
		{
		content: '1280px';
			}
	
	section#header #headerCenter
		{
		width: 1000px;
			}

	section#top .inner
		{
		width: 1000px;
			}



	}









/*=============================================================

	1280px down to 1024px
	
============================================================== */


@media screen and (max-width: 1024px) {
	
	#responsiveBar
		{
		background: #b00;
			}
		
	#responsiveBar p:after
		{
		content: '1024px';
			}
	
	section#header #headerCenter
		{
		width: 835px;
			}
	
	section#header #headerCenter #mainNav
		{
		display: none;
			}
	
	section#header #headerCenter #navToggle
		{
		display: block;
			}

	section#top .inner
		{
		width: 700px;
			}

	section#top .inner h1
		{
		font: normal 50px 'Kanit Thin', serif;
		line-height: 56px;
		margin: 0px auto 30px auto;
			}
	
	section#top .inner h4
		{
		font: normal 18px 'Kanit Extra Light', serif;
		line-height: 32px;
		margin: 15px auto 50px auto;
		text-align: left;
			}

	section .inner .gallery
		{
		width: 90%;
		margin: 0px auto 50px auto;
		padding: 1px 0px 20px 0px;
		display: block;
			}

	section .inner .gallery .item
		{
		width: 100%;
		display: block;
		vertical-align: top;
		margin: 20px 0px;
		padding: 20px;
		border-bottom: 1px solid #ccc;
			}
	
	section .inner .gallery .item img
		{
		float: left;
		margin: 6px 40px 10px 0px;
			}

	section .inner .gallery .item h4
		{
		text-align: left;
		font: normal 36px 'Kanit Extra Light', serif;
		line-height: 36px;
		margin: 10px 0px 0px 0px;
		color: #333;
			}

	section .inner .gallery .item p
		{
		text-align: left;
		font: normal 18px 'Kanit Light', serif;
		line-height: 24px;
		color: #333;
		margin: 10px 0px 0px 0px;
			}

	section .inner .gallery .item p.visit
		{
		position: relative;
		left: auto;
		bottom: auto;
		-webkit-transform: translate(-0%, 0px);
		-moz-transform: translate(-0%, 0px);
		transform: translate(-0%, 0px);
		text-align: right;
		margin: 20px 0px 0px 0px;
		width: auto;
			}

	section .inner .gallery .item p.visit a
		{
		display: inline-block;
		font: normal 16px 'Kanit Medium', serif;
		line-height: 28px;
		padding: 4px 12px;
		border-radius: 6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		color: #fff;
		background: #f50;
		max-width: 100px;
			}
	
	}


/*=============================================================

	1024px down to 850px
	
============================================================== */


@media screen and (max-width: 850px) {
	
	#responsiveBar
		{
		background: #4c4;
			}
		
	#responsiveBar p:after
		{
		content: '850px';
			}
	
	section#header #headerCenter
		{
		width: 785px;
			}

	section#top .inner
		{
		width: 700px;
			}
	
	}


/*=============================================================

	850px down to 800px
	
============================================================== */


@media screen and (max-width: 800px) {
	
	#responsiveBar
		{
		background: #c44;
			}
		
	#responsiveBar p:after
		{
		content: '800px';
			}
	
	section#header #headerCenter
		{
		width: 750px;
			}
	
	}


/*=============================================================

	800px down to 768px
	
============================================================== */


@media screen and (max-width: 768px) {
	
	#responsiveBar
		{
		background: #44c;
			}
		
	#responsiveBar p:after
		{
		content: '768px';
			}
	
	section#header #headerCenter
		{
		width: 700px;
			}

	}


/*=============================================================

	768px down to 720px
	
============================================================== */


@media screen and (max-width: 720px) {
	
	#responsiveBar
		{
		background: #44c;
			}
		
	#responsiveBar p:after
		{
		content: '720px';
			}
	
	section#header #headerCenter
		{
		width: 550px;
			}

	section#top .inner
		{
		width: 550px;
			}
	
	section#top .inner h4
		{
		line-height: 28px;
			}

	}


/*=============================================================

	720px down to 600px
	
============================================================== */


@media screen and (max-width: 600px) {
	
	#responsiveBar
		{
		background: #990;
			}
		
	#responsiveBar p:after
		{
		content: '600px';
			}
	
	section#header #headerCenter
		{
		width: 420px;
			}

	section#top .inner
		{
		width: 420px;
			}

	section .inner .gallery .item h4
		{
		text-align: left;
		font: normal 30px 'Kanit Extra Light', serif;
		line-height: 36px;
		margin: 10px 0px 0px 0px;
		color: #333;
			}

	section .inner .gallery .item p
		{
		text-align: left;
		font: normal 15px 'Kanit Light', serif;
		line-height: 21px;
		color: #333;
		margin: 10px 0px 0px 0px;
			}
	
	}


/*=============================================================

	600px down to 480px
	
============================================================== */


@media screen and (max-width: 480px) {
	
	#responsiveBar
		{
		background: #090;
			}
		
	#responsiveBar p:after
		{
		content: '480px';
			}
	
	section#header #headerCenter
		{
		width: 380px;
			}

	section#top .inner
		{
		width: 380px;
		padding: 20px 30px 20px 20px;
			}

	section#top .inner h1
		{
		font: normal 40px 'Kanit Thin', serif;
		line-height: 44px;
		width: 100%;
			}

	section#top .inner h4
		{
		width: 100%;
			}

	section .inner .gallery .item img
		{
		width: 100px;
		height: 100px;
			}
	
	}


/*=============================================================

	480px down to 400px
	
============================================================== */


@media screen and (max-width: 400px) {
	
	#responsiveBar
		{
		background: #009;
			}
		
	#responsiveBar p:after
		{
		content: '400px';
			}
	
	section#header #headerCenter
		{
		width: 320px;
			}

	section#top .inner
		{
		width: 320px;
			}

	section#top .inner h1
		{
		font: normal 40px 'Kanit Extra Light', serif;
		line-height: 44px;
		width: 100%;
			}
	
	section#top .inner h4
		{
		font: normal 15px 'Kanit Extra Light', serif;
		line-height: 22px;
			}

	section#top .inner p
		{
		font: normal 15px 'Kanit Extra Light', serif;
		line-height: 22px;
			}

	section .inner .gallery .item img
		{
		width: 130px;
		height: 130px;
		float: none;
		display: block;
		margin: 0px auto;
		border-radius: 65px;
		-webkit-border-radius: 65px;
		-moz-border-radius: 65px;
		-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.99);
		-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.99);
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.99);
			}

	section .inner .gallery .item h4
		{
		text-align: center;
		margin: 10px 0px 0px 0px;
		color: #333;
			}
	
	section .inner .gallery .item p
		{
		text-align: center;
		margin: 10px 20px 0px 20px;
		color: #333;
			}

	section .inner .gallery .item p.visit
		{
		text-align: center;
		margin: 30px 0px 15px 0px;
			}
	
	}


/*=============================================================

	400px down to 375px
	
============================================================== */


@media screen and (max-width: 375px) {
	
	#responsiveBar
		{
		background: #000;
			}
		
	#responsiveBar p:after
		{
		content: '375px';
			}
	
	section#header #headerCenter
		{
		width: 300px;
			}

	section#top .inner
		{
		width: 300px;
				}
	
	}

@media screen and (max-width: 1024px) {
    section#header,
    section#top {
        background-attachment: scroll !important; /* Fixed can be jumpy on mobile – fallback to scroll */
        background-position: center 60% !important; /* Adjust if top/bottom gets cut off */
    }
    
    section#top .inner {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 20px auto !important;
        padding: 30px 20px !important;
    }
}