@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: block;
	color: #01407F;
	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;
}
h3 {
	display: block;
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	font-weight: bold;
	letter-spacing: 0.05rem;
	text-decoration: none;
	padding: 0rem 0rem 0rem 0rem;
	margin-block-start: 0rem;
    margin-block-end: 0.25rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
	-webkit-margin-before: 0rem;
	-webkit-margin-after: 0.25rem;
	-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;
}

main a:link, main a:visited {
	color: #01407F;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-decoration: none;
}

main a:hover, main a:active {
	color: #000000;
	font-family: EB Garamond, serif;
	font-size: 1.25rem;
	letter-spacing: 0;
	text-decoration: none;
}

#images > figure {
	animation-name: imageAnimation;
	animation-duration: 36s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	background-size: contain;
	background-repeat: no-repeat;
	color: transparent;
	opacity: 0;
	position: absolute;
	margin: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#images > figure:nth-child(1) { background-image: url(/lettings/residential/images/baytree-2011-10-01-v3.jpg); }
#images > figure:nth-child(2) { animation-delay: 6s; background-image: url(/lettings/residential/images/home-farmhouse-2022-05-14.jpg); }
#images > figure:nth-child(3) { animation-delay: 12s; background-image: url(/lettings/residential/images/the-lodge-2017-10-06-v3.jpg); }
#images > figure:nth-child(4) { animation-delay: 18s; background-image: url(/lettings/residential/images/old-hall-2018-08-06-v3.jpg); }
#images > figure:nth-child(5) { animation-delay: 24s; background-image: url(/lettings/residential/images/home-farmhouse-2022-05-14.jpg); }
#images > figure:nth-child(6) { animation-delay: 30s; background-image: url(/lettings/residential/images/the-lodge-2017-10-06-v3.jpg); }

#mimages > figure {
	animation-name: imageAnimation;
	animation-duration: 36s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	background-size: contain;
	background-repeat: no-repeat;
	color: transparent;
	opacity: 0;
	position: absolute;
	margin: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#mimages > figure:nth-child(1) { background-image: url(/lettings/residential/images/m-baytree-2011-10-01-v3.jpg); }
#mimages > figure:nth-child(2) { animation-delay: 6s; background-image: url(/lettings/residential/images/m-home-farmhouse-2022-05-14.jpg); }
#mimages > figure:nth-child(3) { animation-delay: 12s; background-image: url(/lettings/residential/images/m-the-lodge-2017-10-06-v3.jpg); }
#mimages > figure:nth-child(4) { animation-delay: 18s; background-image: url(/lettings/residential/images/m-old-hall-2018-08-06-v3.jpg); }
#mimages > figure:nth-child(5) { animation-delay: 24s; background-image: url(/lettings/residential/images/m-home-farmhouse-2022-05-14.jpg); }
#mimages > figure:nth-child(6) { animation-delay: 30s; background-image: url(/lettings/residential/images/m-the-lodge-2017-10-06-v3.jpg); }


@keyframes 
imageAnimation {
0% { animation-timing-function: ease-out; opacity: 0; }
8% { animation-timing-function: ease-out; opacity: 1; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}


#intro {
	display: block;
	width: 77.5%;
	padding: 35rem 2rem 1rem 2rem;
	line-height: 1.25;
	text-align: left;
}

#properties {
	display: block; /*set to block when properties available*/
	width: 100%;
	padding: 1rem 0rem 2.5rem 1.5rem;
	vertical-align: middle;
	text-align: left;
}

.boxoutside {
	display: inline-block;
	width: 23rem; /* 30rem for one or 16.5rem for more than one property */
	margin: 0rem 0.5rem 1rem 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	border-radius: 0.5rem;
    background-color: rgba(204, 204, 204, 0.75);
}

.boxinside {
	display: block;
	width: 100%;
	padding: 0rem 0rem 0rem 0rem;
}

.name {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1.25;
	padding: 0rem 0rem 0.5rem 0rem;
}

.picture {
	display: block;
	width: 100%;
	padding: 0rem 0rem 0rem 0rem;
}

.picture img {
	width: 100%;
	border-radius: 0.5rem;
}

#hrnarrow {
	display: block; /*set to block when properties available, else none*/
	padding: 0rem 2rem 0rem 2rem;
}


@media all and (min-width: 1181px) {
#hrnarrow {
   display: none;
}
}

@media all and (max-width: 1180px) {
main {
	margin-top: 0rem;
}
#intro {
	display: block;
	width: 100%;
	padding: 22rem 2rem 2rem 2rem;
}
#properties {
	display: block; /*set to block when properties available, else none*/
	width: 100%;
	padding: 2.5rem 0rem 1rem 0rem;
	text-align: center;
}
.boxoutside {
	width: 30.25rem;
	margin: 0rem 0.75rem 1.75rem 0.75rem;
}
}

@media all and (max-width: 868px) {
#intro {
	padding: 19rem 1rem 2rem 1rem;
}
#properties {
	padding: 2.5rem 0rem 1rem 0rem;
}
.boxoutside {
	width: 22.75rem;
}
#hrnarrow {
	padding: 0rem 1rem 0rem 1rem;
}
}

@media all and (max-width: 668px) {
#intro {
	padding: 12.5rem 1rem 1.5rem 1rem;
}
#properties {
	padding: 2rem 1rem 1rem 1rem;
}
.boxoutside {
	width: 100%;
	margin: 0rem 0rem 1rem 0rem;
}
}

@media all and (max-width: 468px) {
#intro {
	padding: 10rem 1rem 1.5rem 1rem;
}
}