@font-face { font-family: 'PremierLeague'; src: url("/fonts/premier_league.woff") format('woff'); font-weight: normal; font-style: normal; }
html { font-size: 16px; line-height: 1.5; height: 100%; }
body { height: 100%; margin: 0; color: #4D4D4D; background-color: #1A1A1A; font-family: 'Merriweather', serif; }
main { background: #CCC url(/img/jpg/bg-wall.jpg); background-size: 384px; }
a:link, a:visited { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: 'PremierLeague'; font-weight: normal; color: #7F6E4C; line-height: 1.3; }
h1, h2 { font-size: 2rem; border-bottom: 3px solid #F1E3C3; text-align: center; background: url(/img/svg/flourish-cream.svg) left/3.6rem no-repeat, url(/img/svg/flourish-cream2.svg) right/3.6rem no-repeat; padding: 0 2rem; }
ul { padding: 0; list-style: none; margin: 0; }
header { color: rgba(255,255,255,0.75); background-color: #1A1A1A; font-family: 'PremierLeague'; font-size: 1.2rem; }
nav { max-width: 50rem; margin: 0 auto; text-align: center; }
.navlinks { padding: 1rem 0.5rem 0.5rem 0.5rem; display: inline-block; margin: 0; border-bottom: #1A1A1A solid 5px; background-color: #1A1A1A; vertical-align: top; position: relative; z-index: 999; }
.navlinks:hover, .navlinks:active, #homepage .homeselect, #signs .signselect, #aboutpage .aboutselect, #contactpage .contactselect { color: rgba(255,255,255,1); border-bottom: #E3C786 solid 5px; background-color: #000; }
.dropdown { position: relative; display: inline-block; vertical-align: top; }
.dropdown-content { top: -12rem; position: absolute; z-index: 10; background-color: #7F6E4C; font-size: 1.25rem; width: 9rem; transition: all 0.2s ease-in-out; display: none; /*visibility: hidden;*/ }
.dropdown-content a { padding: 0.5rem 1rem; display: block; }
.dropdown-content a:hover, .dropdown-content a:active, .dropdown-content a:focus { color: rgba(255,255,255,1); background-color: rgba(0,0,0,0.25); }
.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content, .dropdown:focus .dropdown-content { top: 4rem; /*visibility: visible;*/ }
#tophome { display: inline-block; opacity: 0.7; padding: 1rem 0.75rem 0.25rem 0.75rem; }
#tophome:hover, #tophome:active, #tophome.active { background-color: #000; opacity: 1; }
#toplogo, #tophometext { display: none; }
#flickrlogo { display: none; }
#flickr, #footlinks { justify-content: space-between; align-items: center; }
#intro { align-items: flex-end; }
#intro ul { margin-bottom: 1rem; }
#intro li:before { content: "\2771 \2002 "; color: #E3C786; }
#intro li { margin: 0.25rem 0; }
#ukmap { display: none; }
#flickr img { margin: 2rem 0; max-width: 100%; height: auto; }
section.heroimg { height: calc(100vh - 3rem); transition: all 0.5s ease; background: url(/img/jpg/tudor-house02m.jpg) no-repeat center; background-size: cover; color: #FFF; -webkit-align-items: center; align-items: center; justify-content: flex-end; flex-direction: column; }
section.heroimg span { display: none; }
.flexcontainer { display: -webkit-flex; display: flex; flex-direction: column; }
.scrollbtn { opacity: 0.7; margin: 1.5rem; }
.scrollbtn:hover, .scrollbtn:active { opacity: 1; }
section.panel { background-color: #FFF; margin-left: auto; margin-right: auto; padding: 1rem 1rem 3rem 1rem; box-shadow: 0 0 1rem rgba(0,0,0,0.1); }
section.panel > div { border-bottom: 3px solid #F1E3C3; }
section.panel.dark { background-color: #222; color: #CCC; }
section.panel.dark h1 { color: #E3C786; border-bottom: 3px solid rgba(255,255,255,0.2); background: url(/img/svg/flourish-white.svg) left/3.6rem no-repeat, url(/img/svg/flourish-white2.svg) right/3.6rem no-repeat; }
section.panel.dark > div { border-bottom: 3px solid rgba(255,255,255,0.2); }
span.fixkern { letter-spacing: -0.15rem; }
.divider { height: 6rem; background: url(/img/svg/brush-divider.svg) center/18rem no-repeat; overflow: hidden; position: relative; }
.divider:before, .divider:after { background-color: #7F6E4C; opacity: 0.2; content: ""; display: inline-block; height: 0.25rem; position: absolute; top: 48%; width: 50%; }
.divider:before { right: -15rem; }
.divider:after { left: -15rem; }
.gold { color: #E3C786; }
section .actionbtn { color: #FFF; display: inline-block; padding: 0.6rem 1.6rem 0.6rem 5.6rem; margin: 3rem 0 1rem 0; background: #7F6E4C url(/img/svg/icon-point.svg) 1.25rem/3.5rem no-repeat; border-radius: 0.3rem; font-family: 'PremierLeague'; font-size: 1.6rem; line-height: 1.3; text-align: left; }
.actionbtn:hover, .actionbtn:active { background-color: #E3C786; }
section.aboutimg { height: calc(100vh - 3rem); transition: all 0.5s ease; background-image: url(/img/jpg/about02.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; color: #FFF; -webkit-align-items: center; align-items: center; justify-content: flex-end; flex-direction: column; }
section.aboutimg h2 { display: inline-block; background: rgba(0,0,0,0.8); border: none; border-radius: 0.3rem; margin: 1rem; padding: 0.8rem 1.25rem 0.7rem 1.25rem; max-width: 24.5rem; }
#about { overflow: auto; }
#about p:first-of-type { font-size: 1.25rem; }
#about img { width: 100%; height: auto; object-fit: cover; display: block; padding-bottom: 0.5rem; }
.floatright { float: right; }
#about .imgholder { width: 100%; margin: 2rem 0; padding-bottom: 0.5rem; background-color: #333; color: #CCC; display: inline-block; position: relative; text-align: center; }
.floatclear { clear: both; }
.mt-5 { margin-top: 5rem; }
.mr-4 { margin-right: 1rem; }
.text-small { font-size: 14px; }
.text-center { text-align: center; }
hr { opacity: 0.5; margin-block: 2rem; }


/*_____Image gallery_____*/

section.gallery { /*height: calc(100% - 3rem);*/ background-color: #000; padding: 2rem 1rem; }
section.gallery > div { max-width: 96rem; margin: 0 auto; }
section.gallery .nGY2GThumbnailAlbumTitle { font-family: 'PremierLeague'; font-size: 1.2rem; }
section.gallery div.nGY2GThumbnailLabel, section.gallery div.nGY2GThumbnail { background-color: #000; }


/*_____Form styles_____*/

#contactform .flexcontainer { justify-content: space-between; margin-top: 4rem; }
#contactform .flexcontainer > div { padding-right: 2rem; margin-bottom: 2rem; border-bottom: 2px solid rgba(255,255,255,0.1); }
#contactform p { margin: 0 0 1.5rem 0; }
#contactform p a:hover { text-decoration: underline; color: #FFF; }
#contactform input[type=submit].actionbtn { margin: 2rem 0 0 0; }
form { margin-bottom: 2rem; }
input[type=text], input[type=email], input[type=tel], textarea { width: calc(100% - 1.6rem); display: inline-block; font-family: 'Merriweather', serif; font-size: 1rem; line-height: 1.5; padding: 0.5rem 0.8rem; border: none; opacity: 0.6; color: #4D4D4D; }
input[type=button], input[type=submit] { border: none; text-decoration: none; cursor: pointer; }
input[type=button]:hover, input[type=submit]:hover { opacity: 1; }
input:hover, textarea:hover { opacity: 0.8; }
input:focus, textarea:focus { opacity: 1; }
textarea { vertical-align: top; }
#contactform h3 { color: #FFF; background-image: url(/img/svg/icon-info.svg); background-repeat: no-repeat; background-size: 1.5rem; background-position: left; padding-left: 2rem; display: inline-block; }
label { display: inline-block; margin-bottom: 0.25rem; }
.g-recaptcha { max-width: 100%; margin-bottom: 1.5rem; }


/*_____Footer_____*/

footer { color: rgba(255,255,255,0.5); background: #1A1A1A url(/img/jpg/bg-footer.jpg); background-size: 256px; border-top: 0.5rem solid #7F6E4C; padding: 1rem 0 3rem 0; }
footer section { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.footerdec { text-align: center; margin: 0.5rem 0 1.5rem 0; position: relative; background: url(/img/svg/flourish-white.svg) left/3.6rem no-repeat, url(/img/svg/flourish-white2.svg) right/3.6rem no-repeat; }
.footerdec a { padding: 0.5rem; display: inline-block; opacity: 0.2; position: relative; top: 0.7rem; }
.footerdec a:hover, .footerdec a:active { opacity: 1; }
.footerdec:before, .footerdec:after { background-color: #FFF; opacity: 0.2; content: ""; display: inline-block; height: 2px; position: absolute; top: 3.2rem; width: calc(49% - 10rem); }
.footerdec:before { left: 5rem; }
.footerdec:after { right: 5rem; }
#footlinks { padding-top: 1rem; border-top: solid 2px rgba(0,0,0,0.25); }
footer ul { padding: 0; margin-left: -0.75rem; }
footer li { display: inline-block; margin-right: 1rem; }
footer ul a { padding: 0.25rem 0.75rem; display: inline-block; border: solid 1px rgba(255,255,255,0); border-radius: 0.25rem; }
footer ul a:hover, footer ul a:active { color: rgba(255,255,255,1); border: solid 1px rgba(255,255,255,1); }


/*_____Responsive styles for large screens_____*/

@media screen and (min-width: 720px) {
	
	h1 { font-size: 2.4rem; padding: 0 4rem; }
	section.heroimg { background: url(/img/jpg/blackhorse01.jpg) no-repeat center 25%; background-size: cover; }
	section.heroimg, section.aboutimg { justify-content: space-between; flex-direction: row; -webkit-align-items: flex-end; align-items: flex-end; }
	section.heroimg span { margin: 2rem 2rem 4rem 4rem; padding: 0.9rem 1.2rem 0.8rem 3.2rem; background: rgba(0,0,0,0.75) url(/img/svg/icon-info.svg) 0.8rem/1.7rem no-repeat; border-radius: 0.3rem; display: inline-block; }
	section.aboutimg h2 { margin: 4rem; }
	section.gallery { padding: 6rem 1rem 5rem 1rem; }
	.divider { height: 12rem; background-size: 24rem; }
	.scrollbtn { margin: 2rem 4rem 3.5rem 2rem; }
	#about .imgholder.floatright { width: 50%; margin: 0.5rem 0 3rem 5rem; }
	#about .imgholder.floatright:first-of-type { margin-top: 1.75rem; }
	#about .imgholder.floatright:last-of-type { margin-top: 1.25rem; }
	#intro.flexcontainer, #footlinks.flexcontainer { flex-direction: row; }
	#ukmap { margin: 2rem 2rem 0 2rem; display: inline-block; }
	#intro div:last-of-type { text-align: right; }
	form { text-align: right; }
	input[type=text], input[type=email], input[type=tel], textarea { width: calc(100% - 10rem); margin-left: 1.2rem; }
	label { margin-top: 0.5rem; }
	.g-recaptcha { margin-left: 2rem; float: right; }
	#contactform input[type=submit].actionbtn { margin-left: 2rem; }
}

@media screen and (min-width: 840px) {
	header { font-size: 1.5rem; max-height: 4rem; }
	#tophome { display: none; }
	#tophometext { display: inline-block; }
	#toplogo { display: inline-block; position: relative; z-index: 1000; top: 0.25rem; margin: 0 0.5rem; }
	#toplogo img { box-shadow: 0 0 0.5rem rgba(0,0,0,0.5); }
	#toplogo img:hover, #toplogo img:active { box-shadow: 0 0 0.5rem #000; }
	#flickrlogo { display: inline-block; opacity: 0.75; }
	#flickrlogo:hover, #flickrlogo:active { opacity: 1; }
	section.panel { padding: 3rem 6rem 6rem 6rem; max-width: 72rem; }
	#ukmap { margin: 2rem 3.5rem 0 5rem; }
	nav { max-width: 64rem; }
	.navlinks { padding: 0.95rem 1rem 0.5rem 1rem; width: 7rem; }
	section.heroimg, section.aboutimg { height: calc(100vh - 4rem); }
	#contactform { padding: 5rem 5rem 9rem 5rem; }
	#contactform .flexcontainer > div { border-right: 2px solid rgba(255,255,255,0.1); border-bottom: none; min-width: 14rem; }
	form { width: calc(100% - 2rem); }
	input[type=text], input[type=email], input[type=tel], textarea { width: calc(100% - 11rem); }
	/* #flickr div { margin-right: 1rem; } */
	#flickr { gap: 1rem; }
	.flexcontainer { flex-direction: row; }
	#aboutpage p { max-width: 41rem; }
}