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

	body {
		font-size: 16px;
	}

	h1 {
		font-size: 30px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	#review span {
		font-size: 26px;
	}
	
	#review p {
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 20px;
	}
	
	#review img {
		height: 20px;
		margin-left: 5px;
		margin-right: 5px;
	}
	
	#videoHolder {
		height: 400px;
	}

	.content, #contactDetails {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	#start {
		font-size: 14px;
		margin-bottom: 20px;
	}
	
	#bottom, #bottom p {
		font-size: 14px;
		line-height: 22px;
	}
	
	#bottLinks img {
		height: 20px;
	}

	hr {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	#copyright {
		margin-top: 10px;
		font-size: 14px !important;
	}
	
	#messageHolder {
		gap: 30px;
	}
}


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

	#top {
		height: 60px;
	}

	#topInner {
		width: calc(100% - 40px);
	}
	
	#logoTop {
		height: 60px;
		margin-top: 0px;
		font-size: 24px;
	}

	#navDesktop {
		display: none;
	}
	
	#socialHolder {
		display: none;
	}

	#buttMobNav {
		position: absolute;
		right: 0px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 52px;
		height: 52px;
		padding: 0px;
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	#buttMobNav span {
		display: block;
		width: 24px;
		height: 2px;
		margin-left: auto;
		margin-right: auto;
		background-color: #f4ede4;
		border-radius: 1px;
	}
	
	#messageHolder {
		display: block;
	}

	#homeWelcomeLayout,
	#displayDetailLayout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.contentImageIntro {
		grid-template-columns: minmax(220px, 0.7fr) minmax(0px, 1.3fr);
		gap: 28px;
	}

	#featureContainer,
	#displayGrid,
	.publicGalleryGrid {
		grid-template-columns: 1fr 1fr;
	}

	.interiorHeroInner {
		width: calc(100% - 50px);
		padding-left: 25px;
		padding-right: 25px;
	}

	.interiorHeroTitle {
		font-size: 42px;
	}

	#homeHeroPanel {
		width: calc(100% - 50px);
		height: calc(100% - 100px);
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 50px;
		padding-bottom: 50px;
	}

	#homeHeroInner {
		max-width: 100%;
	}

	#homeHeroTitle {
		font-size: 46px;
		line-height: 1.05;
	}

	.interiorHero {
		height: 220px;
	}

	.interiorHeroTitle {
		font-size: 34px;
	}

	#homeHeroText {
		font-size: 20px;
		line-height: 30px;
	}

	#openingTimesExtra {
		grid-template-columns: 1fr;
		max-width: 620px;
	}

	input, select, textarea {
		width: calc(100% - 50px);
		max-width: 400px;
	}
	
	select {
		max-width: 422px;
	}
	
	textarea {
		max-width: 600px;
		height: 200px;
	}
	
	#messageHolder select {
		margin-bottom: 30px;
	}

	.contactField textarea {
		width: 100%;
		max-width: none;
	}
}


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

	#bottom {
		flex-direction: column-reverse;
		width: 100%;
		box-sizing: border-box;
		gap: 0px;
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	#bottInfo {
		width: 100%;
		text-align: center;
	}

	#bottLinks {
		flex: 1;
		text-align: center;
	}
	
	.content, #contactDetails {
		width: calc(100% - 40px);
		padding-left: 20px;
		padding-right: 20px;
	}

	#homeWelcomeLayout,
	#homeFeatureHeader,
	#featureContainer,
	#displayIntroLayout,
	#displayGridHeader,
	#displayGrid,
	#displayDetailLayout,
	.contentImageIntro,
	.pageMediaIntro,
	#isabellaGalleryIntro,
	.publicGalleryGrid,
	#visitHolder,
	#homeReviewWrap,
	#contactFormWrap {
		width: calc(100% - 50px);
		padding-left: 25px;
		padding-right: 25px;
		box-sizing: border-box;
	}
}


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

	.homeSectionTitle {
		font-size: 38px;
		line-height: 1.08;
	}

	#featureContainer,
	#displayGrid {
		grid-template-columns: 1fr;
	}

	.publicGalleryGrid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.contentImageIntro {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.contentImageIntroImage {
		margin-top: 0px;
	}

	#featureContainer a {
		display: block;
		margin-bottom: 20px;
	}
		
	#featureContainer a img {
		display: block;
		width: 100%;
		max-width: 300px;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
	
	#featureContainer a p {
		font-size: 14px;
	}
	
	#featureContainer a p, #featureContainer a span {
		text-align: center;
	}
	
	#contactHolder {
		display: block;
		padding-bottom: 30px;
	}

	.contactFormGrid {
		grid-template-columns: 1fr;
	}

	.contactField input,
	.contactField select,
	.contactField textarea {
		width: 100%;
		max-width: none;
	}

	#mapContact {
		width: calc(100% - 40px);
		height: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	#donationFormWrap {
		padding-top: 60px;
		padding-bottom: 70px;
	}

	.donationDetailsGrid {
		grid-template-columns: 1fr;
	}
}


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

	#review {
		width: 100%;
		max-width: 100%;
	}
}


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

	#top {
		height: 40px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	#logoTop {
		height: 40px;
		font-size: 18px;
	}

	#buttMobNav {
		width: 40px;
		height: 40px;
	}

	#openingTimes {
		font-size: 12px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 5px;
		padding-bottom: 7px;
	}

	#homeHeroActions {
		flex-direction: column;
		align-items: flex-start;
	}

	.homeAction {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	#openingTimesSummary {
		flex-direction: column;
		gap: 10px;
	}

	#bottom {
		padding-top: 46px;
	}

	#navMob {
		width: 100%;
		right: -100%;
	}

	#bottInfo,
	#bottLinks > p:first-child,
	#bottLinks > hr {
		display: none;
	}

	#bottSocial {
		text-align: center;
	}

	#copyright {
		margin-top: 18px;
		text-align: center;
	}
}