@media only screen and (max-width: 999px)
{
	DIV.container{width: 97%}
	
	/************************* HEADER *******************/
	#header DIV.container P.nav A{margin: 0px 0px 0px 30px}

	/************************* BANNER *******************/
	#banner-inner{height: auto; position: relative; overflow: hidden}
	#banner{width: auto; height: 450px; margin-left: 0%; position: relative; left: 0%}
	
	/************************* RESERVE *******************/
	#reserve{margin-left: 10px; left: 0%}	
	
	/************************* LUXURY VILLAS *******************/
	#villa-prices P.villa-prices-intro{padding-left: 50px; padding-right: 50px}	
	
	/************************* ABOUT *******************/	
	#about-content{margin-left: 260px}
	#about-content H1, #about-content P.intro, #about-content P.main, DIV.about-photo{padding-left: 20px}
	#about-reviews{width: 260px}	
	#ratings{padding-right: 20px}
	DIV.reviews{margin-right: 20px}	
	
	/************************* CONTACT PAGE *******************/
	#contact-left{width: 300px}
	#contact-right{margin-left: 330px}	
}

@media only screen and (max-width: 840px)
{
	/************************* FONTS *******************/
	H1{color: #303030; font-size: 32px; line-height: 35px; padding-bottom: 10px}
	H2{color: #202020; font-size: 26px; line-height: 28px}
	P.intro{font-size: 24px; line-height: 28px}
	P.intro-sub{color: #585858; font-size: 18px; line-height: 24px; padding: 0px 0px 25px 0px}

	/************************* HEADER *******************/
	#header DIV.container{width: 100%}
	#header DIV.container H1{margin: 0px 0px 0px 10px}	
	
	#icon-menu{display: block}
	#responsive-nav{overflow: hidden}
	#header DIV.container P.nav{text-align: left; height: 0px; margin: 0px; border-top: solid 1px #fff; position: static; left: 0px; top: 0px; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out}
	#header DIV.container P.nav-active{height: 140px; margin-top: 20px; border-top: solid 1px #d0d0d0}
	#header DIV.container P.nav A.index{width: auto; height: auto; padding: 0px; background: transparent}
	#header DIV.container P.nav A, #header DIV.container P.nav A.index, #header DIV.container P.nav A.index-active, #header DIV.container P.nav A.index SPAN, #header DIV.container P.nav A.index-active SPAN{color: #000; font-size: 14px; line-height: 14px; text-decoration: none; font-weight: bold; letter-spacing: -1px; margin: 0px; padding: 10px 10px 9px 10px; border-bottom: solid 1px #d0d0d0; float: none; background: #transparent}
	#header DIV.container P.nav A.index SPAN{padding: 0px; border: none}	
	
	#header DIV.container P.nav A:hover, #header DIV.container P.nav A.index SPAN{background: #fffff2}
	#header DIV.container P.nav A.active, #header DIV.container P.nav A.index-active, #header DIV.container P.nav A.index-active SPAN{background: #fff0c0}	
	
	/************************* BANNER *******************/
	#banner{width: auto; height: 350px; margin-left: -10%}	
	#banner-shadow{display: none}
		
	/************************* RESERVE *******************/
	#reserve{width: 100%; margin: -2px 0px 0px 0px; padding-left: 0px; padding-right: 0px; border-bottom: solid 1px #d0d0d0; position: relative; left: 0%; top: 0%; background: url(../images/header-book-now.png) no-repeat center top}	
	#reserve-inner{padding: 0px 120px 0px 120px}
	#reserve P.reserve{color: #606060; font-size: 14px; line-height: 14px; font-weight: bold; letter-spacing: -1px}
	#reserve INPUT.reserve, #reserve SELECT{font-size: 14px; line-height: 14px; width: 98%; padding: 5px 1px 5px 1px}
	#reserve SELECT{width: 59.5%}
	#reserve DIV.arrival-departure-1, #reserve DIV.arrival-departure-2{width: 47%; margin-right: 0px}
	#reserve DIV.arrival-departure-2{float: right}

	#reserve-responsive-wrapper-1, #reserve-responsive-wrapper-2{width: 47%; float: left}
	#reserve-responsive-wrapper-2{float: right}
	
	#reserve IMG.button-submit-reservation, #reserve #reservation-throbber{margin-top: 5px}
	
	/************************* CALENDAR *******************/
	DIV.calendar-departure{left: 53%}	

	/************************* HOME *******************/
	#features-amenities{margin: 0px}

	#features-amenities DIV.left{left: 20px}
	#features-amenities-inner{padding: 0px 20px 0px 110px}

	#villa-section{padding: 15px 0px 25px 0px}
	#villa-section DIV.outer{width: 100%; float: none}
	#villa-section P.read-more{padding: 25px 0px 0px 0px}	

	/************************* LUXURY VILLAS *******************/
	#villa-intro{margin-bottom: -10px}
	DIV.villa-intro{width: 100%; float: none}
	DIV.villa-intro-left P{padding-right: 0px}	
	DIV.villa-intro-right P{padding-left: 0px}		
	
	#villa-gallery{padding: 15px 0px 15px 0px}
	
	#villa-prices P.villa-prices-intro{padding-left: 10px; padding-right: 10px}	
	DIV.villa-dates P SPAN{font-size: 14px; line-height: 14px}
	DIV.villa-prices P{font-size: 26px; line-height: 26px}	
	
	#availability-calendar DIV.calendar-month, #availability-calendar DIV.calendar-month-active{width: 33.33%}	
	#villa-sub-text P.read-more{display: block}
	
	/************************* POPUP *******************/
	#popup{width: 96%; margin-left: -10px; left: 2%}

	/************************* ABOUT *******************/	
	#about-content{margin: 0px; background: transparent}
	#about-reviews{display: none}	
	#about-content H1, #about-content H2, #about-content P.intro, #about-content P.main{text-align: center; padding-left: 0px}
	
	DIV.about-photo{margin: 0px 0px 25px 0px; padding: 0px; border: none}
	DIV.about-photo DIV{font-size: 1px; line-height: 0px; padding: 2px; border: solid 1px #d0d0d0}
	DIV.about-photo DIV IMG{width: 100%; height: auto}

	/************************* CONTACT *******************/
	#contact-left{width: 290px}
	#contact-right{margin-left: 320px}
	FORM.contact-table{width: 100%}
}

@media only screen and (max-width: 710px)
{
	/************************* BANNER *******************/
	#banner{margin-left: -20%}			
	
	/************************* RESERVE *******************/
	#reserve-inner{padding: 0px 60px 0px 60px}	
	
	/************************* CALENDAR *******************/
	DIV.calendar-departure{margin-left: -250px; left: 100%}		
	
	/************************* FOOTER *******************/
	P.footer-main SPAN.divider{padding: 0px 15px 0px 15px}
	
	/************************* HOME *******************/
	#features-amenities{padding-bottom: 10px}
	#features-amenities DIV.center, #features-amenities DIV.right{width: 100%; float: none}
	
	/************************* LUXURY VILLAS *******************/
	#villa-gallery P{display: none}
	#villa-gallery DIV.outer{width: 100%; float: none}
	#villa-gallery IMG{cursor: text}	
	#review-form-inner{width: 500px; padding: 15px 15px 0px 15px}
	DIV.villa-dates P SPAN{font-size: 13px; line-height: 13px}
	DIV.villa-prices P{font-size: 22px; line-height: 22px}
	
	/************************* CONTACT *******************/
	#contact-left{width: auto; margin: 0px 0px 25px 0px; padding: 30px 0px 10px 0px; float: none; border-bottom: solid 1px #d0d0d0}
	#contact-right{margin: 0px; padding: 0px 0px 30px 0px; background: none}
	FORM.contact-table FIELDSET{padding: 22px 15px 20px 20px; border: solid 1px #d0d0d0; background: #fffff0}		
}

@media only screen and (max-width: 660px)
{
	/************************* BANNER *******************/
	#banner{height: 300px}
	
	************************* RESERVE *******************/
	#reserve-inner{padding: 0px 20px 0px 20px}

	/************************* HOME *******************/
	#villa-section{padding: 10px 0px 10px 0px}
	#villa-section P.read-more{padding: 25px 0px 15px 0px}	
	
	/************************* LUXURY VILLAS *******************/
	#villa-prices P.villa-prices-intro{padding-left: 0px; padding-right: 0px}	
	DIV.villa-dates P, DIV.villa-dates P SPAN{font-size: 12px; line-height: 16px; font-weight: bold; letter-spacing: 0px}
	DIV.villa-dates P SPAN{font-size: 12px; line-height: 12px; font-weight: normal}
	DIV.villa-prices P{font-size: 18px; line-height: 18px}	
	
	#availability-calendar DIV.calendar-month, #availability-calendar DIV.calendar-month-active{width: 50%}	
	#villa-gallery{padding: 10px 0px 10px 0px}
}

@media only screen and (max-width: 520px)
{
	/************************* HEADER *******************/
	#header DIV.container H1{width: 265px; background: url(../images/ya-nui-beach-villas-small.png) no-repeat}	
	
	/************************* BANNER *******************/		
	#banner-transparent-strip P.banner-text{line-height: 22px; padding-top: 18px} 
	#banner-transparent-strip P.banner-text SPAN{display: none}	
	
	/************************* RESERVE *******************/
	#reserve-inner{padding: 0px 10px 0px 10px}
	
	/************************* FOOTER *******************/
	P.footer-main{display: none}	
	P.footer-misc{margin: 0px; padding: 0px 0px 15px 0px; border: none}
	
	/************************* HOME *******************/
	#features-amenities DIV.left{width: auto; position: static; left: 0px; top: 0px}
	#features-amenities-inner{padding: 0px}
	#features-amenities DIV.left P{padding: 0px 0px 10px 0px}	
	#features-amenities DIV.features-amenities-list P{padding-right: 0px}
	
	/************************* LUXURY VILLAS *******************/
	#review-form{display: none}
	DIV.villa-prices P{font-size: 16px; line-height: 16px}		
	
}

@media only screen and (max-width: 420px)
{
	/************************* BANNER *******************/
	#banner{width: 200%; height: auto; margin-left: -50%}
	
	/************************* HOME *******************/
	DIV.features-amenities{padding-right: 0px; background: #fffff8}
	DIV.features-amenities IMG{display: none}
	#villa-section{padding: 5px 0px 5px 0px}
	#villa-section P.read-more{padding-bottom: 20px}	
	
	/************************* LUXURY VILLAS *******************/
	DIV.villa-dates, DIV.villa-prices{padding-left: 2px; padding-right: 2px}
	DIV.villa-dates P, DIV.villa-dates P SPAN{font-size: 10px; line-height: 12px; font-weight: normal; letter-spacing: 0px}
	DIV.villa-dates P SPAN{font-size: 10px; line-height: 10px}
	DIV.villa-prices P{font-size: 14px; line-height: 14px}		
	
	#villa-gallery{padding: 5px 0px 5px 0px}
	
	/************************* CONTACT *******************/
	FORM.contact-table FIELDSET{padding: 15px 15px 18px 15px}		
}

@media only screen and (max-width: 340px)
{
	/************************* LUXURY VILLAS *******************/
	DIV.villa-dates P SPAN{font-size: 9px; line-height: 9px}
	DIV.villa-prices P{font-size: 13px; line-height: 13px}		
		
}

@media only screen and (min-width: 1220px)
{
	DIV.container{width: 1200px}		
	
	/************************* FONTS *******************/
	P.intro-sub{padding-left: 80px; padding-right: 80px}
	
	/************************* HEADER *******************/
	#header DIV.container P.nav A{margin: 0px 0px 0px 100px}
	
	/************************* RESERVE *******************/
	#reserve{margin-left: -600px}

	/************************* FOOTER *******************/
	P.footer-main SPAN.divider{padding: 0px 35px 0px 35px}
	
	/************************* LUXURY VILLAS *******************/
	#villa-prices P.villa-prices-intro{padding-left: 250px; padding-right: 250px}	

	/************************* ABOUT *******************/	
	#about-content{margin-left: 350px}
	#about-reviews{width: 350px}	
}

@media only screen and (min-width: 1620px)
{
	/************************* BANNER *******************/
	#banner-inner{height: auto}
	#banner{width: 100%; height: auto; margin: 0px; position: relative; left: 0%}
}