@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');

html {
	scroll-behavior: smooth;
	width: 100%;
	height: 100%;
}

body {
	margin: 0px;

	font-family: 'Ubuntu', sans-serif;
	font-size: 22px;
	line-height: 32px;
}

#backgroundImageHolder {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;

	overflow: hidden;
	background-color: #333333;
}

#background {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	display: block;
	min-width: 100%;
	min-height: 100%;
	filter: brightness(50%);
}

#top {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	z-index: 1000;
	display: block;
	width: 100%;

	color: #ffffff;
	text-align: center;
	background-color: #4f3773;

	padding: 7px;
}

#buttMobNav, #navMob {
	display: none;
}

#fpSpacer {
	position: relative;
	display: block;
	height: calc(100vh - 130px);
	margin-top: 80px;
}

#spacerContent div {
	position: absolute;
	left: 50%;
	top: calc(50% - 50px);
	transform: translate(-50%, -50%);
	display: block;
}

#logoTripAdvisor {
	display: block;
	width: calc(100% - 100px);
	max-width: 200px;
	margin: auto;
	margin-bottom: 30px;
}

.review {
	display: block;
	font-family: 'Times New Roman', Times, serif;
	font-size: 40px;
	line-height: 50px;
	font-style: italic;
	text-align: center;
	color: #ffffff;
}

.review::before, .review::after {
	content: '"';
}

.stars {
	display: block;
	height: 30px;
	margin: auto;
	margin-top: 30px;
}

#fpLogo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -100px;
	height: 200px;
}

.holderRed {
	display: block;
	background-color: #a40000;
	color: #ffffff;
}

.holderGrey {
	position: relative;
	display: block;
	background-color: #222222cc;
	color: #ffffff;
}

.divider {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -75px;
	height: 150px;
}

.holderWhite {
	display: block;
	background-color: #ffffff;
	color: #333333;
}

.withDividerBottom {
	padding-bottom: 100px;
}

.withDividerTop {
	padding-top: 100px;
}

.content {
	display: block;
	width: calc(100% - 100px);
	max-width: 1400px;
	padding: 50px;
	margin: auto;
}

#openingTimes {
	display: block;
	background-color: #840000;
}

#openingTimes .content {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;

	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

#bottom {
	display: block;
	width: 100%;
	background-color: #4f3773ee;
}

#bottomInner {
	display: flex;
	width: calc(100% - 100px);
	max-width: 1300px;
	margin: auto;
	gap: 50px;
	align-items: center;

	font-size: 16px;
	line-height: 26px;
	color: #ffffff;

	padding: 50px;
}

#bottomInner div {
	flex: 1;
}

#bottomInner div:first-child {
	border-right: 1px dotted #ffffff;
}

#bottomInner div:nth-child(2) {
	text-align: right;
	line-height: 40px;
}

#bottomInner div:nth-child(2) img {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-left: 15px;
	margin-right: 15px;
	vertical-align: middle;
	filter: invert(100%);

	border: 2px solid #00000000;
	border-radius: 50%;
	padding: 10px;

	transition: border 0.3s ease-in-out;
}

#bottomInner div:nth-child(2) img:hover {
	border: 2px solid #000000ff;
}

.centre, .centre p {
	text-align: center;
}

#mapDirections {
	display: block;
	height: 500px;
	border: 1px solid #888888;
	filter: saturate(40%);
}

#start {
	display: block;
	margin: auto;
	margin-bottom: 20px;
	padding: 10px;
}

#distanceText {
	display: block;
	text-align: center;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: bold;
}

#fpFeatureFlex {
	display: flex;
	width: 100%;
	gap: 100px;
	text-align: left;
}

#fpFeatureFlex div {
	flex: 1;
}

#fpFeatureFlex img {
	display: block;
	width: calc(100% - 2px);

	border: 1px solid #cccccc;
	border-bottom: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#fpFeatureFlex p {
	font-size: 16px;
	line-height: 26px;
	text-align: left;
}

#fpFeatureFlex span {
	display: block;

	margin-left: 1px;
	margin-right: 1px;

	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0px;
	padding-bottom: 2px;

	border-top: 1px solid #555555;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;

	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background-color: #333333;
}

#fpFeatureFlex span img {
	display: inline;
	width: auto;
	margin-right: 15px;
	height: 20px;
	filter: invert(100%);

	margin-top: -4px;
	vertical-align: middle;
}

#fpFeatureFlex a {
	display: block;
}

#fpFeatureFlex button {
	display: inline;
}

#findUsHolder {
	display: flex;
	width: 100%;
	gap: 100px;
	align-items: center;
}

#findUsHolder div:first-child {
	display: block;
	flex: 1;
}

#findUsHolder div:nth-child(2) {
	display: block;
	flex: 1.3;
}

#findUsHolder #mapDirections {
	height: 500px;
}

#messageForm {
	display: block;
	width: 100%;
}

#messageHolder {
	display: flex;
	gap: 50px;
}

#messageHolder div {
	display: block;
	flex: 1
}

.orange {
	color: #ed8a19;
}

label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}

.contactInputs {
	width: calc(100% - 40px);
	max-width: 280px;
	padding: 10px;
	text-align: center;
	border: 1px solid #aaaaaa;
}

#messageForm select {
	width: calc(100% - 20px);
	max-width: 300px !important;
}

#messageBody {
	resize: none;
	width: calc(90% - 40px);
	max-width: 600px;
	height: 317px;
	padding: 20px;
	border: 1px solid #aaaaaa;
}

#sentMessage {
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #e4002b;
	color: #ffffff;
	font-weight: bold;
	margin-bottom: 20px;
	display: block;
}

.galleryHolder {
	display: inline-block;
	vertical-align: top;
	width: calc(25% - 10px);
}

.galleryThumb {
	width: calc(100% - 2px);
	max-height: 100%;
	display: block;
	margin-bottom: 5px;
	cursor: pointer;
	border: 1px solid #aaaaaa;

	filter: brightness(100%);
	transition: filter 0.5s ease-in-out;
}

.galleryThumb:hover {
	filter: brightness(150%);
}


#blocker {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: -1;

	opacity: 0;
	transition: opacity 1s ease-in-out;
}

#bigPhoto img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100vw - 100px);
	max-height: calc(100vh - 150px);

	border: 5px solid #ffffff;
}

#bigPhoto #bigCloser {
	position: absolute;
	top: 50px;
	right: 50px;
	font-size: 24px;
	font-weight: bold;
	padding-left: 10px;
	padding-right: 10px;
	cursor: pointer;
	user-select: none;

	color: #333333;
	background-color: #FFDD00;
	transition: all 0.3s ease-in-out;
}

#bigPhoto #bigCloser:hover {
	background-color: #e4002b;
	color: #ffffff;
}

.subtitle {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
}

.tBox {
	width: calc(100% - 20px);
	max-width: 400px;
	padding: 10px;
	text-align: center;
	border: 1px solid #333333;
}

.tArea {
	width: calc(100% - 80px);
	max-width: 800px;
	height: 300px;
	padding: 10px;
	resize: none;
	border: 1px solid #aaaaaa;
	color: #333333;
}

#loginForm {
	display: block;
	width: 100%;
}

.pCentre p {
	text-align: center;
}

.listItem {
	display: flex;
	width: calc(100% - 20px);
	gap: 30px;
	align-items: center;

	user-select: none;
	border-radius: 3px;

	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;

	background-color: #00000066;
	transition: background-color 0.3s ease-in-out !important;
}

.listItem:hover {
	background-color: #00000099;
}

.listItemImageHolder {
	display: block;
	width: 100px;
	height: 100px;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.headline {
	display: block;
	color: #fff4b4;
}

.newsSub {
	display: block;
	font-size: 16px;
	font-weight: normal;
	color: #ffffff;	
}

.bigNewsImage {
	display: block;
	width: 100%;
	max-width: 450px;
	float: right;
	margin-left: 50px;
	margin-bottom: 40px;

	border: 2px solid #ffffff;
	border-radius: 5px;
	margin-bottom: 20px;
	box-shadow: 0px 0px 50px rgba(0,0,0,0.3);
}

.spacer {
	display: block;
	clear: both;
}



#displayGrid {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: top;
	gap: 20px;
}

.displayHolder {
	display: block;
	width: calc(33% - 30px);
}

.displayHolder img {
	display: block;
	width: 100%;

	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.displayHolder span {
	display: block;
	padding: 10px;
	background-color: #333333;
	font-size: 18px;
	text-align: center;
	color: #ffffff;

	border-top: 1px solid #555555;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.massivePageImage {
	display: block;
	width: 100%;
	max-width: 1440px;
	margin: auto;
}

.smallPageImage {
	display: block;
	width: 300px;
	float: right;
	margin-left: 50px;
	margin-bottom: 40px;
}

.flexWithImageRight {
	display: flex;
	gap: 50px;
	align-items: center;
}

.flexWithImageRight div {
	flex: 1;
}

.flexWithImageRight img {
	display: block;
	width: calc(50% - 100px);
	max-width: 400px;
	border-radius: 3px;
	align-self: flex-start;
}

#fpDirectionsFlex {
	display: flex;
	gap: 100px;
}

#fpDirectionsFlex1 {
	flex: 1.2;
}

#fpDirectionsFlex2 {
	flex: 0.8;
}






.flexWithSlideshowRight {
	display: flex;
	gap: 50px;
	align-items: top;
}

#slideContent {
	flex: 1;
}

#slideHolder {
	position: relative;
	display: block;
	width: 500px;
	height: 400px;
	margin-top: 20px;
}

.slide {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
	display: block;

	width: 100%;
	height: 100%;

	border-radius: 3px;

	opacity: 0;
	transition: opacity 1s ease-in-out;
}

#findUsHolder label, #findUsHolder span {
	display: block;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 0px;
}

#openingBar {
	display: block;
	background-color: #cd6a00;
	color: #ffffff;
	text-align: center;
	padding: 10px;
}

.halkirkHolder {
	margin-bottom: 50px;
}

.halkirkHolder h2 {
	margin-top: 0px;
}






















h1 {
	display: block;
	text-align: center;
	background-color: #000000dd;

	font-size: 24px;
	color: #ffffff;

	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;
	padding-bottom: 80px;

	margin: 0px;
}

#h1Fp {
	padding-top: 130px;
}

h1 span {
	display: block;
	font-size: 40px;
	color: #ed8a19;
	margin-top: 10px;
}

h2 {
	display: block;
	font-size: 30px;
}

.holderGrey h2 {
	color: #fff4b4;
}

hr {
	display: block;
	border: none;
	border-top: 1px dotted #cccccc;
	margin-top: 50px;
	margin-bottom: 50px;
}

button {
	display: block;
	color: #ffffff;
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	border: none;

	cursor: pointer;

	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;

	background-color: #e4002b;
	transition: background-color 0.3s ease-in-out;
}

button:hover {
	background-color: #c4000b;
}

li {
	margin-top: 15px;
	margin-bottom: 15px;
}












a:link, a:active, a:visited, a:hover {
	text-decoration: none;
	font-weight: bold;

	color: #e4002b;
	transition: color 0.3s ease-in-out;
}

a:hover {
	color: #ed8a19;
}



a:link.linksTop, a:active.linksTop, a:visited.linksTop, a:hover.linksTop {
	display: inline-block;

	text-decoration: none;
	font-size: 16px;
	font-weight: bold;

	margin-left: 13px;
	margin-right: 13px;

	color: #ffffff;
	transition: color 0.3s ease-in-out;
}

a:hover.linksTop {
	color: #fff4b4;
}



.holderGrey a:link, .holderGrey a:active, .holderGrey a:visited, .holderGrey a:hover {
	text-decoration: none;
	font-weight: bold;

	color: #fff4b4;
	transition: color 0.3s ease-in-out;
}

.holderGrey a:hover {
	color: #bfb474;
}



#bottom a:link, #bottom a:active, #bottom a:visited, #bottom a:hover {
	text-decoration: none;
	font-weight: bold;

	color: #ffffff;
	transition: color 0.3s ease-in-out;
}

#bottom a:hover {
	color: #fff4b4;
}