--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

	/* header styles
	------------------------------------------------------------------ */
	header .banner-text h1 {
		margin: 0 auto 12px auto;
	}

}

/* screenwidth less than 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
	.row{
		max-width: 660px;
	}
	.title-area{
		max-width: 690px;
	}
	.main-text{
		top: 50%;
	}
	/* header styles
	------------------------------------------------------------------ */
	header .banner { padding-bottom: 12px; }
	header .banner-text h1 {
			letter-spacing: -1px;      
	}
	header .banner-text h3 {
		width: 80%;
	}
	header .banner-text hr {
		width: 65%;
		margin: 12px auto;
	}
	/* nav-wrap */
	#nav-wrap {
		letter-spacing: 1.5px;
	}

	/* Resume Section
	------------------------------------------------------------------- */
	#resume .main-col { padding-right: 5%; }   

	/* Call to Action Section
	------------------------------------------------------------------- */
	#call-to-action .header-col h1:before {
		font-size: 66px;
		line-height: 66px;
	}

	/* Contact Section
	------------------------------------------------------------------- */
	#contact .section-head { margin-bottom: 30px; }
	#contact .header-col h1:before {
		font-size: 66px;
		line-height: 66px;
	}
	#contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; }


}

/* mobile wide/smaller tablets
---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	/* mobile navigation
	-------------------------------------------------------------------- */
	#nav-wrap {
		background: white;
		letter-spacing: 1.5px;  
		width: auto;
		position: fixed;
		top: 0;
		right: 0;
	}
	#nav-wrap > a.mobile-btn {
		width: 50px;
		height: 50px;
		text-align: left;
		position: relative;
		border: none;
		float: right;

		font: 0/0 a;
		text-shadow: none;
		color: transparent;

		position: relative;
		top: 0px;
		right: 10px;
	}

	#nav-wrap > a.mobile-btn:before,
	#nav-wrap > a.mobile-btn:after {
		position: absolute;
		border: 1px solid #c1aa06;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
	#nav-wrap > a.mobile-btn:after { top: 60%; }

	/* toggle buttons */
	#nav-wrap:not( :target ) > a.mobile-btn:first-of-type,
	#nav-wrap:target > a.mobile-btn:last-of-type  {
		display: block;
		transition:2s;
	}

	/* hide menu panel */
	#nav-wrap ul#nav {
		height: auto;
		display: none;
		clear: both;
		width: auto; 
		float: right;
		position: relative;
		top: 12px;
		right: 0;
	}
	#nav-wrap > a.mobile-btn.close:before{
		transform:rotate(45deg);
		top: 45%;
		left: 25%;
		right: 25%;
		content: '';
		transition:2s;
	}
	#nav-wrap > a.mobile-btn.close:after{
		transform:rotate(135deg);
		top: 45%;
		left: 25%;
		right: 25%;
		content: '';
		transition:2s;
	}
	/* display menu panels */
	#nav-wrap:target > ul#nav	{
		display: block;
		height: 100vh;
		margin: 0 30px;
		clear: both;
	}

	ul#nav li {
		display: block;
		height: auto;      
		margin: 0 auto; 
		padding: 0 4%;
	}

	ul#nav li a {  
		display: block;    
		margin: 0;
		padding: 0;      
		margin: 20px 0; 
		line-height: 16px; /* reset line-height from 48px */
		border: none;
		text-align: center;
	}  


	/* Header Styles
	-------------------------------------------------------------------- */
	header .banner {
		padding-bottom: 12px;
		padding-top: 6px;
	}
	header .banner-text h1 {
		
	}
	header .banner-text h3 {
		width: 85%;
	}
	header .banner-text hr {
		width: 80%;
		margin: 18px auto;
	}

	/* header social links */
	header .social {
		margin: 18px 0 24px 0;
		font-size: 24px;
		line-height: 36px;      
	}
	header .social li { margin: 0 10px; }

	/* scrolldown link */
	header .scrolldown { display: none; }


	/* about Section
	----------------------------------------------------------------------- */
	#about{
		background-attachment: scroll;
	}

	/* Control Nav */
	.flex-control-nav {
		text-align: center;
		margin-left: -30px;
	}

	/* footer
	------------------------------------------------------------------------ */

	/* copyright */
	footer .copyright li:before { content: none; }
	footer .copyright li { margin-right: 12px; }

	/* social links */
	footer .social-links { font-size: 22px; }
	footer .social-links li { margin-left: 18px; }

	/* Go To Top Button */
	#go-top { margin-left: -22px; }
	#go-top a {
		width: 54px;
		height: 54px;
		font-size: 18px;
		line-height: 54px;
	}


}

/* mobile narrow
-------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {

	/* mobile navigation
	-------------------------------------------------------------------- */
	#nav-wrap ul#nav { width: auto; float: none; }

	/* header styles
	-------------------------------------------------------------------- */
	header .banner { padding-top: 24px; }
	header .banner-text h1 {
		font: 40px/1.1em 'Advent Pro', sans-serif;      
		margin: 0 auto 24px auto;
		font-weight: 100;
	}
	header .banner-text h3 {
		width: 90%;
	}

	/* header social links */
	header .social { font-size: 20px;}
	header .social li { margin: 0 6px; }
	
	/* footer
	------------------------------------------------------------------------ */

	/* social links */
	footer .social-links { font-size: 20px; }
	footer .social-links li { margin-left: 14px; }
	
	/*custom*/
	h2{
		font-size: 24px;
		margin-bottom: 30px;
	}
	h3{
		margin-bottom: 16px;
	}
	p{
		font-size: 14px;
	}
	.column, .columns{
		padding: 0 15px;
	}
	.block{
		padding-top: 80px;
		padding-bottom: 40px;
		margin-top: -40px;
	}
	#welcome p{
		font-size: 13px;
	}
	#menu h4{
		font-size: 14px;	
	}
	.price{
		font-size: 12px;
		padding-left: 0;
	}
	.guide{
		padding-left: 0;{
			padding: 0 15px;
		}
		font-size: 11px;
		line-height: 1.8;
	}
	#about .inner p{
		font-size: 12px;
		line-height: 2.1;
	}
	#about h2{
		font-size: 12px;	
	}
	#about .text-container{
		padding-top: 40px;
		padding-bottom: 0;
	}
	#about h2{
		font-size: 16px;
	}
	#about p{
		font-size: 13px;
	}
	#reservation h3{
		font-weight: bold;
		font-size: 14px;
	}
	#reservation p{
		margin: 0 0 40px;
	}
	.reservation-btn{
		font-size: 12px;
		padding: 12px 30px 12px;
		margin: 40px auto 0;
	}
	#information p{
		font-size: 13px;
		padding-left: 0;
	}
	#recruit p{
		font-size: 13px;
	}
	#recruit li{
		font-size: 12px;
	}
}