@media only screen and (min-width: 1024px) {

	
}


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

	.container { display: flex; margin:0 auto; width: 100%; padding-left: 30px; padding-right: 30px; max-width: 1420px; }
	.column-left, #footer-top-left {width: 100%; margin-right: 0;}
	.column-right, #footer-top-right {width: 100%; margin-left: 0;}

	header nav {display: none;}
	
	#footer-top-left {margin-bottom: 50px;}
	#footer-bottom {margin: 25px 0 0 0;}

	#home-hero h1.hero-title, #home-hero div.hero-title {font-size: 72px;}

	#about ul {margin-top: 50px;}
	
	#gallery ul li {width: calc(50% - 30px);}
	#reviews ul li {width: calc(50% - 30px);}
	
}


@media only screen and (max-width: 768px){
	
	#footer #contact {width: 100%; margin: 10px 0 0 0;}
	
	#gallery ul li {width: calc(100% - 30px);}
	#reviews ul li {width: calc(100% - 30px);}
	
	/* pricing */
	#pricing .column-right .button {float: none; margin-top: 20px;}
	
	#pricing table thead {display: none;}
	
	#pricing table,
	#pricing table tbody,
	#pricing table tr,
	#pricing table td {
		display: block; width: 100% !important;
	}

	#pricing table tr {
		border-top: solid 1px var(--Gray); padding: 12px 14px; margin: 10px 0;
	}
		#pricing table tr:first-of-type {border-top: none; margin-top: 0;}

	#pricing table td {border: 0; padding: 10px 0; text-align: right; display: flex; justify-content: space-between; gap: 16px;}	
	
	#pricing table td::before {
		content: attr(data-label);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
		flex: 0 0 45%;
		text-align: left;
	}

	/* optional: make price stand out */
	#pricing table td:nth-child(3) {padding-right: 0; color: var(--Black);} /* pricing label */
				
	#pricing table td:nth-child(4) {font-weight: 700;}
	
}


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

	h3 {font-size: 42px;}
	
	#header .header-right .button { display: none; }
	
	#footer hr {margin-top: 50px;}
	.footer .button-holder .button {margin: 0 0 10px 0; display: block;}
	
	#home-hero h1.hero-title, #home-hero div.hero-title {font-size: 64px;}
	#home-hero .slider .flex-control-nav {bottom: 50px; left: 0; transform: none; padding-left: 30px; padding-right: 30px;}
	
	#book-unit-form form {min-width: 320px;}	
	
	#contact form input[type="email"] {display: block; padding: 0 20px; margin: 0 0 10px 0; width: 100%;}
	
}


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

	body {font-size: 16px;}
	
	h3 {font-size: 36px;}
	
	.button {display: block; width: 100%; max-width: 100%;}
	
	#home-hero h1.hero-title, #home-hero div.hero-title {font-size: 48px;}
	
	#pricing table tr {padding: 0;}
	
}