:root {
	--jta_black: #111;
	--jta_darkgrey: #444;
	--jta_grey: #888;
	--jta_lightgrey: #ccc;
	--jta_red: #c80025;      /* c80025 -> 200, 0, 37 */
	--jta_lightred: #f0002c; /* f0002c -> 240, 0, 44 */
	--jta_white: #eee;
}
body {
	background-color: var(--jta_white);
	box-sizing: border-box;
	color: var(--jta_darkgrey);
	/* Prefer "Work Sans", but failing that, "Arial", or any sans-serif. */
	font-family: "Work Sans", Arial, sans-serif;
	font-size: 18px;
}
div.banner_home {
	/* Path relative to this css file. */
	background-image: url("../../inc/jpg/HillsRoadPerformance_HillsRoad.jpg");
	background-position-x: center;
	background-position-y: -16px;
	color: var(--jta_white);
	padding-bottom: 450px;
	padding-top: 24px;
	text-align: center;
	text-shadow: 2px 2px var(--jta_black);
}
div.banner_other {
	background-image: linear-gradient(to bottom right, var(--jta_darkgrey), var(--jta_red));
	color: var(--jta_white);
	padding: 32px;
	text-align: center;
}
div.banner_other a {
	color: var(--jta_white);
	text-decoration-color: var(--jta_grey);
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
div.event {
	padding-left: 16px;
}
div.event h3 {
	color: var(--jta_red);
}
div.container {
	text-align: start;
}
div.content {
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
}
div.content a {
	color: var(--jta_black);
	text-decoration-color: var(--jta_grey);
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
div.content a:hover {
	color: var(--jta_white);
	background-color: var(--jta_red);
}
div.content h2 {
	background-color: var(--jta_white);
	color: var(--jta_red);
}
div.centre_photo {
	color: var(--jta_grey);
	width: 55%;
	min-width: 200px;
	text-align: end;
	font-size: 12px;
	position: relative;
	margin: auto;
}
div.copyright {
	background-color: var(--jta_black);
	color: var(--jta_white);
	padding: 16px;
	position: relative;
	text-align: center;
}
div.feature_icon {
	background-color: var(--jta_red);
	width: fit-content;
}
div.footer_panel {
	background-color: var(--jta_red);
	color: var(--jta_white);
	display: flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
	padding: 0px 8px 0px 8px;
}
div.footer_panel a {
	color: var(--jta_white);
	font-weight: bold;
	text-decoration-line: none;
}
div.footer_panel img {
	vertical-align: middle;
}
div.footer_panel li {
	list-style-type: none;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 8px;
}
h1 {
	font-size: 44px;
	font-weight: bold;
}
h2 {
	font-size: 26px;
}
h3 {
	font-size: 20px;
}
p {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 1.5px;
}
/* TODO: How to make this trigger only when scrolled into view? */
p.slide_right {
	/* fly in */
	opacity: 0;
	transform: translate(100px);
	animation: slide_right 2.5s ease-in-out forwards;
}

/* Nav menu.  Was relative and not right.  Need to check right margin though.... */
div.nav_menu {
	position: absolute;
	display: inline-block;
	right: 8px;
}
/* On hovering over menu, change button. */
div.nav_menu:hover button.nav_menu_button {
	background-color: var(--jta_black);
	color: var(--jta_white);
}
div.nav_menu:hover div.nav_menu_options {
	display: block;
}
button.nav_menu_button {
	background-color: transparent;
	cursor: pointer;
}
/* Background on which the options are displayed */
div.nav_menu_options {
	display: none;
	position: absolute;
	background-color: var(--jta_black);
	min-width: 160px;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
	z-index: 1;
	right: 0;
	top: 52px;
	text-decoration: none;
	font-size: 20px;
	color: var(--jta_white);
	height: 100vh;
}
div.nav_menu_options a {
	background-color: var(--jta_black);
	padding: 16px 192px 16px 16px;
	display: block;
	text-decoration: none;
	color: var(--jta_white);
}
div.nav_menu_options a:hover {
	background-color: var(--jta_red);
	text-decoration: none;
	color: var(--jta_white);
}
button.floating_button {
  position: fixed;
  right: 16px;
  bottom: 24px;
  background-color: var(--jta_red);
  color: var(--jta_white);
  z-index: 1000;
  border-radius: 16px;
  font-weight: bold;
}

/* Slide in / fly in, uses div around the h1 or p. */
div.fly_down {
	opacity: 0;
	transform: translate(100px);
	animation: slide_down 1s ease-in-out forwards;
}
div.fly_up {
	opacity: 0;
	transform: translate(100px);
	animation: slide_up 1s ease-in-out forwards;
}


/* Container for carousel (used for 'top' Testamonials and Events) */
.carousel_container {
	position: relative;
	margin: 32px auto 32px auto; /* trbl */
	text-align: center;
	padding: 16px 8px 16px 8px;
}
.carousel_container p {
	padding: 0px 48px 0px 48px;
}
.carousel_container h2 {
	font-size: 20px;
	line-height: 0.8;
}
.carousel_container img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: solid;
	position: center;
}
/* Hide all cards in the carousel unless unhidden by javascript */
.carousel_card {
	display: none;
}
/* Common styles for carousel next and previous 'buttons' (used for 'top' testamonials and events). */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: var(--jta_white);
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 16px 0px 0px 16px;
	border: solid;
	border-color: var(--jta_darkgrey);
	user-select: none;
	left: 0;
}
/* Specific extras for carousel next 'button' (right-hand side) */
.next {
	left: unset;
	right: 0;
	border-radius: 0px 16px 16px 0px;
}
/* Hover changes for carousel prev and next buttons */
.prev:hover, .next:hover {
	background-color: var(--jta_red);
}
/* Carousel tracking dots */
.tracking_dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: var(--jta_lightgrey);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
.active, .tracking_dot:hover {
	background-color: var(--jta_darkgrey);
}
/* Carousel fading animation */
.carousel_fade {
	animation-name: carousel_fade;
	animation-duration: 1.5s;
}
@keyframes carousel_fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

/* Testamonial PAGE styles (not the carousel) */
div.list_page_item {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	max-width: 1080px;
	padding: 8px 8px 24px 8px;
}
div.list_page_image img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	border: solid;
	position: center;
}
div.list_page_image a {
	background-color: var(--jta_white);
}
div.list_page_image a:hover {
	background-color: var(--jta_white);
}
div.list_page_title a {
	color: var(--jta_red);
}
div.list_page_text {
	padding-left: 16px;
}
div.list_page_text h3 {
	margin-bottom: 0px;
}
div.list_page_text h5 {
	margin-top: 0px;
}


/* Gallery page list-all */
div.gallery_thumb {
	color: var(--jta_darkgrey);
	width: 40%;
	min-width: 200px;
	text-align: start;
	font-size: 12px;
	position: relative;
	margin: auto;
}


/* Orientation */
@media (orientation: landscape) {
	div .footer_panel {
		flex-direction: row;
	}
	div .list_page_item {
		flex-direction: row;
	}
	div.site_map_panel {
		width: 50%;
		font-size: 14px;
		font-weight: normal;
	}
	div.social_panel {
		width: 50%;
		font-size: 14px;
		font-weight: normal;
	}
}
@media (orientation: portrait) {
	div.footer_panel {
		flex-direction: column;
	}
	div .list_page_item {
		flex-direction: column;
	}
}

/* Slide in / fly in text */
@keyframes slide_down {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slide_up {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slide_right {
	0% {
		opacity: 1;
		transform: translateX(-200px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}