@charset "utf-8";

p {
	display: block;
	margin-block-start: 0.5rem;
    margin-block-end: 0.5rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
	-webkit-margin-before: 0.5rem;
	-webkit-margin-after: 0.5rem;
	-webkit-margin-start: 0rem;
	-webkit-margin-end: 0rem;
}
h1 {
	display: block;
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.075rem;
	text-decoration: none;
	padding: 0rem 0rem 0rem 0rem;
	margin-block-start: 0rem;
    margin-block-end: 0rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
	-webkit-margin-before: 0rem;
	-webkit-margin-after: 0rem;
	-webkit-margin-start: 0rem;
	-webkit-margin-end: 0rem;
}
h2 {
	display: inline;
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.075rem;
	text-decoration: none;
	padding: 0rem 0rem 0rem 0rem;
	margin-block-start: 0rem;
    margin-block-end: 0rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
	-webkit-margin-before: 0rem;
	-webkit-margin-after: 0rem;
	-webkit-margin-start: 0rem;
	-webkit-margin-end: 0rem;
}

main {
	display: block;
	margin-top: 8.25rem;
	position: relative;
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-decoration: none;
	text-align: center;
	padding: 0rem 0rem 0rem 0rem;
}
main a:link, main a:visited {
	color: #01407F;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
}
main a:hover, main a:active {
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-decoration: 0;
	cursor: pointer;
}

#temp {
	display: block;
	width: 100%;
	text-align: left;
	padding-left: 2.5rem;
	line-height: 5rem;
}

#introduction {
	display: block;
	width: 100%;
	margin: 8.25rem auto 0rem auto;
	text-align: left;
	padding: 0rem 1rem 0rem 0rem;
}
#intropanelone {
	display: inline-block;
	width: 60%;
	vertical-align: top;
	background-color: #01407F;
}
#intropaneltwo {
	display: inline-block;
	width: 40%;
	margin: 0rem 0rem 0rem -0.30rem;
	padding: 1rem 0rem 0rem 1rem;
	vertical-align: top;
	line-height: 1.25;
}

#mainimage {
	display: block;
}
#mainimage img {
	width: 100%;
	cursor: pointer;
}
#thumbnails {
	display: block;
	width: 100%;
	background-color: #01407F;
	padding: 0.25rem 0.25rem 0.30rem 0.25rem;
	overflow-x: auto !important;
	overflow-y: hidden;
	white-space: nowrap;
}
#thumbnails img {
	display: inline-block;
	height: 4rem;
	width: auto;
	border-style: solid;
	border-width: 0.025rem;
	border-color: #FFFFFF;
}
#thumbnails img:hover {
	transition: 0.2s;
	filter: brightness(75%);
	cursor: pointer;
}

#property {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0.5rem 0rem;
}
#propertyfirst {
	display: inline-block;
	width: 82.5%;
	vertical-align: top;
}
#propertysecond {
	display: inline-block;
	width: auto;
	padding: 0rem 0rem 0rem 0.5rem;
}
#name, #namemob {
	display: block;
}
#location {
	display: block;
	margin: 0.5rem 0rem 0.5rem 0rem;
}
#locationmob {
	display: block;
	margin: 0.5rem 0rem 0.5rem 0rem;
}
.w3w img {
	height: 1.75rem;
	margin: 0rem 0.25rem 0rem 0rem;
	vertical-align: middle;
}
#particulars {
	float: right;
}
.arrow {
	color: #FF0000;
}
#particularspage {
	display: block;
	line-height: 0;
}
#particularspage img {
	width: 5.75rem;
	border: solid;
	border-width: 0.075rem;
	border-color: #01407F;
}
#description {
	display: block;
	width: 100%;
	padding: 0.25rem 0rem 0.5rem 0rem;
}
#highlights {
	display: block;
	text-align: center;
	padding: 0.25rem 0rem 0.5rem 0rem;
}
#highlights ul {
	display: block;
	padding: 0rem 0rem 0rem 0rem;
}
#highlights li {
	display: inline-block;
	list-style-type: none;
	line-height: 1.25;
	padding: 0.125rem 0.5rem 0.125rem 0.5rem;
}
#highlightstabhz {
	display: inline-block;
	width: 58%;
	padding: 0.75rem 0rem 0.75rem 0rem;
	text-align: center;
	vertical-align: middle;
}
#highlightstabhz ul {
	display: block;
	padding: 0rem 0rem 0rem 0rem;
}
#highlightstabhz li {
	display: inline-block;
	list-style-type: none;
	line-height: 1.25;
	padding: 0.125rem 0.5rem 0.125rem 0.5rem;
}
.dthr {
	display: block;
}
#introlower {
	display: block;
	padding: 0.5rem 0rem 0.625rem 0rem;
	line-height: 1.25;
	text-align: center;
}
#introlowertabhz {
	display: inline-block;
	width: 40%;
	padding: 0rem 0rem 0rem 0rem;
	line-height: 1.25;
	text-align: center;
	vertical-align: middle;
}
.availability {
	text-align: center;
	padding: 0rem 2rem 0rem 0rem;
}
.viewing {
	padding: 0rem 0.5rem 0rem 0rem;
}

#information {
	display: block;
	width: 100%;
	margin: 1rem auto 0rem auto;
	padding: 0rem 1rem 0rem 1rem;
	line-height: 1.25;
	text-align: left;
}
#infopanelone {
	display: inline-block;
	width: 59.5%;
	padding: 0rem 1rem 1rem 0rem;
	vertical-align: top;
}
#infopaneltwo {
	display: inline-block;
	width: 40.5%;
	margin: 0rem 0rem 0rem -0.30rem;
	padding: 0rem 0rem 1rem 1rem;
	vertical-align: top;
}
#infopaneltwotabhz {
	display: inline-block;
	width: 38.5%;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0.5rem 0rem 0.5rem 1rem;
	vertical-align: top;
}
.title {
	display: block;
	text-align: left;
	line-height: 1.25;
	width: 100%;
	padding: 0.75rem 0rem 0rem 0rem;
}

#layout {
	display: block;
	width: 100%;
	background-color: #CCCCCC;
	margin: 1rem auto 0rem auto;
	padding: 0rem 1rem 0rem 1rem;
}
.layoutone {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
	padding: 1rem 0rem 0rem 0rem;
}
#layouttwo {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
	padding: 1rem 0rem 1rem 0rem;
}
.layoutone img, #layouttwo img {
	width: 100%;
}
.drawing {
	display: inline-block;
	width: 49%;
	margin: 0rem 1rem 0rem 0rem;
	padding: 1rem 1rem 1rem 1rem;
	vertical-align: top;
	background-color: white;
}
.drawing img:hover {
	transition: 0.2s;
	filter: brightness(75%);
	cursor: pointer;
}
.details {
	display: inline-block;
	width: 50%;
	margin: 0rem 0rem 0rem -0.30rem;
	padding: 0.5rem 1rem 1rem 1rem;
	text-align: left;
	vertical-align: top;
	background-color: white;
	line-height: 1.25;
}

.close {
	color: #FFFFFF;
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 3rem;
	font-weight: bold;
	transition: 0.3s ease;
	z-index: 11;
}
.close:hover {
	color: #CCCCCC;
	font-weight: bold;
	font-size: 3rem;
	transition: 0.3s ease;
	cursor: pointer;
}
.prev {
	cursor: pointer;
	position: absolute;
	left: 2rem;
	top: 50%;
	width: auto;
	padding: 0rem 0rem 0rem 0rem;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.75rem;
	transition: 0.3s ease;
	border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
	user-select: none;
	-webkit-user-select: none;
	z-index: 11;
}
.prev:hover {
	color: #CCCCCC;
	font-weight: bold;
	font-size: 1.75rem;
	transition: 0.3s ease;
}
.next {
	cursor: pointer;
	position: absolute;
	right: 2rem;
	top: 50%;
	width: auto;
	padding: 0rem 0rem 0rem 0rem;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.75rem;
	transition: 0.3s ease;
	border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
	user-select: none;
	-webkit-user-select: none;
	z-index: 11;
}
.next:hover {
	color: #CCCCCC;
	font-weight: bold;
	font-size: 1.75rem;
	transition: 0.3s ease;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 12;
	margin: auto auto auto auto;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: rgba(0,0,0,0.90);
}
.modal-content {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color:rgba(0,0,0,0);
}
.pop {
	display: inline-block;
	position: relative;
	width: auto;
	text-align: center;
	margin: 0rem 0rem 0rem 0rem;
	line-height: 0;
	z-index: 11;
}
.pop img {
	height: 95vh;
	width: 95vw;
	object-fit: contain !important;
	padding: 2rem;
}
.pop video {
	height: 95vh;
	width: 95vw;
	object-fit: contain !important;
	padding: 2rem;
}


@media screen and (min-width: 1181px) {
#infopaneltwotabhz, #highlightstabhz, #introlowertabhz {
	display: none;
}
}

@media screen and (max-width: 1180px) {
#infopaneltwo, #highlights, #introlower {
	display: none;
}
main {
	margin-top: 0rem;
}
#introduction {
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}
#intropanelone {
	display: block;
	width: 100%
}
#intropaneltwo {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
	padding: 1rem 1rem 0rem 1rem;
}
#propertyfirst {
	width: 89.5%;
}
.dthr {
	display: none;
}

.availability {
	display: block;
	padding: 0rem 0rem 0.5rem 0rem;
}
.viewing {
	display: block;
}
#information {
	margin: 0.5rem auto 0rem auto;
}
#infopanelone {
	width: 60.5%;
	padding: 0.5rem 1rem 1rem 0rem;
}
.drawing {
	width: 50%;
}
.details {
	width: 48%;
}
.pop img {
	height: 92.5vh;
	width: 92.5vw;
}
.pop video {
	height: 92.5vh;
	width: 92.5vw;
}
}

@media screen and (min-width: 869px) {
}

@media screen and (max-width: 868px) {
#infopaneltwotabhz {
	display: none;
	}
#propertyfirst {
	width: 86%;
}
#introlowertabhz {
	width: 45.5%;
	padding: 0rem 0rem 0rem 0.5rem;
}
#highlightstabhz {
	width: 53.5%;
	padding: 0.75rem 0.75rem 0.75rem 1.25rem;
}
#infopanelone {
	display: block;
	width: 100%;
	padding: 0rem 0rem 0rem 0rem;
}
#infopaneltwo {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}
#layout {
	margin: 2rem 0rem 0rem 0rem;
}
.drawing {
	display: block;
	width: 100%;
	margin: 0rem 1rem 0rem 0rem;
}
.details {
	display: block;
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
}
.pop img {
	height: 92vh;
	width: 92vw;
}
.pop video {
	height: 92vh;
	width: 92vw;
}
}

@media screen and (min-width: 669px) {
#locationmob {
		display: none;
}
}

@media screen and (max-width: 668px) {
#location, #particulars, #introlowertabhz, #highlightstabhz {
		display: none;
}
#propertyfirst {
	width: 76%;
}
.w3w img {
	margin: 0rem 0.25rem 0.25rem 0rem;
}
#particularspage img {
	width: 7rem;
}
#description {
	padding: 0.75rem 0rem 1rem 0rem;
}
#introlower {
	display: block;
	padding: 0.75rem 0rem 1rem 0rem;
}
#highlights {
	display: block;
	width: 100%;
	padding: 0.75rem 4rem 1rem 4rem;
}
.dthr {
	display: block;
}
#infopaneltwo {
	margin: 1rem 0rem 0rem 0rem;
}
.pop img {
	height: 91vh;
	width: 91vw;
}
.pop video {
	height: 91vh;
	width: 91vw;
}
}

@media screen and (min-width: 469px) {
#namemob {
	display: none;
}
}

@media screen and (max-width: 468px) {
#name {
	display: none;
}
#propertyfirst {
	width: 71%;
}
#propertysecond {
	padding: 0.375rem 0rem 0rem 0rem;
}
#particularspage img {
	width: 6.5rem;
}
#highlights {
	padding: 0.75rem 0.5rem 1rem 0.5rem;
}
.pop img {
	height: 85vh;
	width: 85vw;
}
.pop video {
	height: 85vh;
	width: 85vw;
}
}