/*
BootStrap 5
$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
  // XX-Large devices (larger desktops, 1400px and up)
  xxl: 1400px
);
*/

/****************************************************************************** 
* Imported Fonts
******************************************************************************/
@font-face {
	font-family: "sriracha-regular";
	src: url("../fonts/Sriracha-Regular.ttf") format("truetype");
}

/****************************************************************************** 
* Set variables
******************************************************************************/
:root {
	/* Bootstrap break points */
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--breakpoint-xxl: 1400px;

	/* Define Colors as colors */
	--blue: dodgerblue;
	--green: green;
	--white: white;
	--black: black;
	--red: #ff5470;
	--grey: #bfbfbf;
	--lightGrey: #f2f4f6;
	--yellow: rgba(255, 255, 0, 0.9);

	/* Define Colors Intentions */
	--siteMenuColor: var(--blue);
	--outsideLinksColor: var(--green);
	--primary: var(--blue);
	--danger: var(--red);
	--background: var(--white);
	--textColor: var(--black);
	--lineColor: var(--grey);
	--pageHeaderBackgroundColor: var(--yellow);
	--borderColor: var(--black);

	/* Styles */
	--line: solid 1px var(--lineColor);

	/* Type */
	--headingFont: "Oswald", sans-serif;
	--bodyFont: "Oswald", sans-serif;
	--handwrittenFont: "sriracha-regular", sans-serif;
	--baseFontSize: 100%;
	--h1: 3.052rem;
	--h2: 2.441rem;
	--h3: 1.953rem;
	--h4: 1.563rem;
	--h5: 1.25rem;
	--smallText: 0.8em;
	--copyrightText: 0.9rem;

	/* Elevation */
	--mainShadow: 6px 6px #000;
	--mainShadowHover: 10px 10px #000;
	--noShadow: none;
	--shadowTransition: 0.3s ease;

	/* Border Style */
	--borderWidthFull: 0.4em;
	--borderWidth: 0.2em;

	--borderWidthFull: 6px;
	--borderWidth: 3px;

	--border: var(--borderWidth) solid var(--borderColor);
	--borderFull: var(--borderWidthFull) solid var(--borderColor);
	--margin-adjustment: calc(var(--borderWidth) * -1);
}

/****************************************************************************** 
* Utilities
******************************************************************************/
.no-padding {
	padding: 0;
}

.top-border {
	border-top: var(--border);
	border-top: var(--borderFull);
}
.right-border {
	border-right: var(--border);
	border-right: var(--borderFull);
}
.bottom-border {
	border-bottom: var(--border);
	border-bottom: var(--borderFull);
}
.left-border {
	border-left: var(--border);
	border-left: var(--borderFull);
}

.top-border-none {
	border-top: none;
}
.right-border-none {
	border-right: none;
}
.bottom-border-none {
	border-bottom: none;
}
.left-border-none {
	border-left: none;
}

@media (min-width: 576px) { 
	.top-border-sm {
		border-top: none;
	}
	.top-border-sm-none {
		border-top: none;
	}
	.bottom-border-sm {
		border-bottom: var(--border);
		border-bottom: var(--borderFull);
	}
	.bottom-border-sm-none {
		border-bottom: none;
	}
	.right-border-sm {
		border-right: var(--border);
		border-right: var(--borderFull);
	}
	.right-border-sm-none {
		border-right: none;
	}
	.left-border-sm {
		border-left: var(--border);
		border-left: var(--borderFull);
	}
	.left-border-sm-none {
		border-left: none;
	}
}

@media (min-width: 768px) { 
	.top-border-md {
		border-top: var(--border);
		border-top: var(--borderFull);
	}
	.top-border-md-none {
		border-top: none;
	}
	.bottom-border-md {
		border-bottom: var(--border);
		border-bottom: var(--borderFull);
	}
	.bottom-border-md-none {
		border-bottom: none;
	}
	.right-border-md {
		border-right: var(--border);
		border-right: var(--borderFull);
	}
	.right-border-md-none {
		border-right: none;
	}
	.left-border-md {
		border-left: var(--border);
		border-left: var(--borderFull);
	}
	.left-border-md-none {
		border-left: none;
	}
}

@media (min-width: 992px) { 
	.top-border-lg {
		border-top: var(--border);
		border-top: var(--borderFull);
	}
	.top-border-lg-none {
		border-top: none;
	}
	.bottom-border-lg {
		border-bottom: var(--border);
		border-bottom: var(--borderFull);
	}
	.bottom-border-lg-none {
		border-bottom: none;
	}
	.right-border-lg {
		border-right: var(--border);
		border-right: var(--borderFull);
	}
	.right-border-lg-none {
		border-right: none;
	}
	.left-border-lg {
		border-left: var(--border);
		border-left: var(--borderFull);
	}
	.left-border-lg-none {
		border-left: none;
	}
}

@media (min-width: 1200px) { 
	.top-border-xl {
		border-top: var(--border);
		border-top: var(--borderFull);
	}
	.top-border-xl-none {
		border-top: none;
	}
	.bottom-border-xl {
		border-bottom: var(--border);
		border-bottom: var(--borderFull);
	}
	.bottom-border-xl-none {
		border-bottom: none;
	}
	.right-border-xl {
		border-right: var(--border);
		border-right: var(--borderFull);
	}
	.right-border-xl-none {
		border-right: none;
	}
	.left-border-xl {
		border-left: var(--border);
		border-left: var(--borderFull);
	}
	.left-border-xl-none {
		border-left: none;
	}
}

@media (min-width: 1400px) { 
	.top-border-xxl {
		border-top: var(--border);
		border-top: var(--borderFull);
	}
	.top-border-xxl-none {
		border-top: none;
	}
	.bottom-border-xxl {
		border-bottom: var(--border);
		border-bottom: var(--borderFull);
	}
	.bottom-border-xxl-none {
		border-bottom: none;
	}
	.right-border-xxl {
		border-right: var(--border);
		border-right: var(--borderFull);
	}
	.right-border-xxl-none {
		border-right: none;
	}
	.left-border-xxl {
		border-left: var(--border);
		border-left: var(--borderFull);
	}
	.left-border-xxl-none {
		border-left: none;
	}
}

.no-border-top {
	border-top: none !important;
}

.vertical-text-lr {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}


.text-justify {
	text-align: justify;
}

/****************************************************************************** 
* SVG 
******************************************************************************/
text {
	font-family: var(--headingFont);
	text-align: center;
	text-transform: uppercase;
	color: black;
	font-size: var(--h2);
	font-weight: 800;
}

svg {
	width: 100%;
	display: block;
}

/****************************************************************************** 
* Colour Overlays
******************************************************************************/
.color-overlay {
	background-blend-mode: overlay;
}

/****************************************************************************** 
* Background Colours
******************************************************************************/
.bg-yellow {
	background-color: var(--yellow);
}
.bg-purple {
	background-color: mediumpurple;
}
.bg-red {
	background-color: tomato;
}
.bg-green {
	background-color: mediumaquamarine;
}
.bg-black {
	background-color: black;
}
.bg-black-slight {
	background-color: rgba(0, 0, 0, 0.5);
}

.bg-orange {
	background-color: orangered;
}

.bg-white {
	background-color: black;
}

.bg-steelblue {
	background-color: steelblue;
}
.bg-blueviolet {
	background-color: blueviolet;
}
.bg-sandybrown {
	background-color: sandybrown;
}
.bg-plum {
	background-color: plum;
}
.bg-palegreen {
	background-color: palegreen;
}
.bg-salmon {
	background-color: salmon;
}
.bg-palegoldenrod {
	background-color: palegoldenrod;
}



.bg-outsidelink {
	background-color: var(--primary);
}

/****************************************************************************** 
* Text Color
******************************************************************************/
.color-white {
	color: white;
}
.color-black {
	color: var(--black);
}

/****************************************************************************** 
* General Body Styles
******************************************************************************/
* {
	font-family: var(--bodyFont);
	font-weight: 200;
}

[role="main"] {
	padding-top: 64px;
}

/* lg and up have side bar for navigation rather than top bar so padding is 0 */
@media (min-width: 992px) {
	[role="main"] {
		padding-top: 0;
		padding-bottom: 0;
	}
}

body {
	/* background-color: black; */
	color: black;
}

/****************************************************************************** 
* Headings
******************************************************************************/
h1 {
	font-family: var(--headingFont);
	font-weight: 400;
	color: black;
	text-transform: uppercase;
	padding-right: 10px;
}

.carousel-caption.page-header {
	bottom: 5px;
}

h2,
h3,
h4 {
	font-family: var(--headingFont);
	text-align: center;
	text-transform: uppercase;
	color: black;
}

.invert h2,
.invert h3,
.invert h4 {
	color: var(--white);
}

@media (max-width: 575px) {
	h4 {
		font-size: 1.2rem;
	}
}

/****************************************************************************** 
* Type Scale
******************************************************************************/
html {
	font-size: var(--baseFontSize);
}

body {
	font-family: var(--bodyFont);
	font-weight: 400;
	line-height: 1.65;
}

p {
	margin-bottom: 1.15rem;
}
p:only-child {
	margin-bottom: 0;
}

address {
	margin-bottom: 1.5rem;
}

h2,
h3,
h4,
h5 {
	margin: 1.15rem 0 2.75rem;
	font-family: var(--headingFont);
	font-weight: 400;
	line-height: 1.15;
}

h1,
.h1 {
	margin-top: 0;
	font-size: var(--h1);
	font-weight: 800;
}



h2 {
	font-size: var(--h2);
	font-weight: 800;
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h4);
}

h5 {
	font-size: var(--h5);
	font-family: var(--bodyFont);
}

small,
.text_small {
	font-size: var(--smallText);
}

.copyrightText {
	font-size: var(--copyrightText);
}

/****************************************************************************** 
* Small Phone Heading Tweaks
******************************************************************************/
@media (max-width: 575px) {
	/* h2 {
		font-size: var(--h4);
	}

	h3 {
		font-size: var(--h5);
	} */
}

/****************************************************************************** 
* Paragraph Styles
******************************************************************************/
p,
address {
	font-family: var(--bodyFont);
	color: var(--textColor);
	font-size: 1.3em;
}

.invert p,
address {
	color: var(--white);
}

p.highlight {
	font-size: 2rem;
}

p mark {
	background-color: yellow;
}

@media (max-width: 960px) {
	p.highlight {
		line-height: 1.5;
	}
}

.handwritten,
.handwritten a {
	font-family: var(--handwrittenFont);

	font-size: 1.1rem;
	margin-bottom: 1.25rem;

	font-weight: 200;
	color: #333333;
}

p a,
address a,
blockquote a,
td a {
	color: var(--textColor);
	text-decoration: none;
	border-bottom: solid 0.2rem var(--primary);
}
p a:hover,
address a:hover,
blockquote a:hover,
td a:hover {
	color: var(--primary);
	text-decoration: none;
}

/****************************************************************************** 
* Style for Container (BootStrap Container Overrides)
******************************************************************************/
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
	width: 100%;

	padding-right: 0;
	padding-left: 0;

	margin-right: auto;
	margin-left: auto;
}

.invert .container,
.invert .container-fluid,
.invert .container-sm,
.invert .container-md,
.invert .container-lg,
.invert .container-xl {
	color: white;
	background-color: var(--black);
}

.container-fluid {
}

.page-container  ~ .page-container {
	border-top: black solid calc(var(--borderWidth) * 2);
}

.container > .row,
.container-fluid > .row,
.container-sm > .row,
.container-md > .row,
.container-lg > .row,
.container-xl > .row {
	background-color: white;
}

.invert .container > .row,
.invert .container-fluid > .row,
.invert .container-sm > .row,
.invert .container-md > .row,
.invert .container-lg > .row,
.invert .container-xl > .row {
	background-color: var(--black);
}

@media (min-width: 576px) {
	.container,
	.container-sm {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container,
	.container-sm,
	.container-md {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl {
		max-width: 1140px;
	}
}

@media only screen and (orientation: landscape) and (max-width: 991px) {
	.container {
		margin-right: 0;
		margin-left: 20vw;
		width: calc(100% - 20vw);
	}
}

@media only screen and (orientation: landscape) and (min-width: 768px) and (max-width: 991px) {
	.container,
	.container-md,
	.container-sm {
		max-width: none;
	}
}
@media only screen and (orientation: landscape) and (min-width: 576px) and (max-width: 991px) {
	.container,
	.container-sm {
		max-width: none;
	}
}

/****************************************************************************** 
* Page-Container
******************************************************************************/
.page-container {
	margin-left: 0rem;
	margin:0;
}

/* Have page-container shifted for lg and xl to accomodate site menu */
@media (min-width: 992px) {
	.page-container {
		margin-left: 10rem;
		/* margin-left: 10.5rem; */
	}
}

.page-container.invert {
	background-color: var(--black);
}

/****************************************************************************** 
* Content Layout Classes
******************************************************************************/
.slice {}

.slice-page-header {
	border: none;
	background-color: var(--black);
}
/* Borders on left and right for content that is >576px and <992px or >1525px*/
/* @media (max-width: 991px) and (min-width: 576px), (min-width: 1525px) { */
@media (min-width: 1525px) {
	.slice,
	.slice-page-header {
		border-left: none;
	}
}

@media (max-width: 991px) and (min-width: 576px) {
	.slice,
	.slice-page-header {
		border-left: none;
	}
}

.slice-page-header-title {
	background-color: var(--pageHeaderBackgroundColor);
}

@media (max-width: 575px) {
	.slice-page-header-title h1.long {
		font-size: calc(var(--h1) * 0.8);
	}
}

/* @media (min-width: 992px) { */
	/* @media (min-width: 768px) { */
		@media (min-width: 576px) {
	.slice-page-header-title h1 
	{
		font-size: 8rem;
		line-height: .8;
	}
	.slice-page-header-title h1.long {
		font-size: 4rem;
		line-height: 1.1;
	}
}
@media (min-width: 1200px) {
	.slice-page-header-title h1 
	{
		font-size: 10rem;
		line-height: 1.05;
		line-height: 0.95;
	}
	.slice-page-header-title h1.long {
		font-size: 6rem;
	}
}

.slice-section-right {
	border-right: var(--border);
	border-right: var(--borderFull);
}
.slice-section-left {
	border-left: var(--border);
	border-left: var(--borderFull);
}

.slice h2 {
	margin-bottom: 0;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* No borders xs */
@media (max-width: 575px) {
	.slice,
	.slice-page-header,
	.slice-page-header {
		border-right: none;
		border-left: none;
	}
}

.slice h2 {
	margin: 0;
	padding: 2.6rem;
	padding-right: 2rem;
	padding-left: 2rem;
}

/****************************************************************************** 
* Cell Image Background Classes
******************************************************************************/
.cell-image-background {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.cell-image-background-10 {
	height: 10%;
}
.cell-image-background-20 {
	height: 20%;
}
.cell-image-background-30 {
	height: 30%;
}
.cell-image-background-40 {
	height: 40%;
}
.cell-image-background-border-bottom {
	border-bottom: var(--border);
	border-bottom: var(--borderFull);
}

.cell-image-background-position-top {
	background-position: top;
}

/****************************************************************************** 
* BootStrap Card Overrides
******************************************************************************/
.card {
	border: none;
	border-radius: 0;
	padding: 1.25rem;
}

.card-body {
	padding: 0;
}

.card-text {
	text-align: justify;
	color: white;
	font-size: var(--h2);
	font-weight: 800;
	font-family: var(--headingFont);
	line-height: 1.15;
	text-transform: uppercase;
}
.card-text small {
}

.card-text .text-thin {
	font-weight: 200;
}

.card-text .text-dark {
	color: black;
}

.card-text.smaller-font {
	font-size: var(--h4);
}

@media (max-width: 575px) {
	.card-text {
		font-size: var(--h4);
	}
	.card-text.smaller-font {
		font-size: var(--h5);
	}
}

/****************************************************************************** 
* Carousel
******************************************************************************/
.carousel-caption.page-header {
	left: 10px;
	right: 10px;
	text-align: left;
}

/****************************************************************************** 
* Images
******************************************************************************/
img.page-header {
	border: var(--border);
	margin-bottom: 1rem;
}

/****************************************************************************** 
* HR tags
******************************************************************************/
hr {
	width: 90%;
	border-color: black;
	border-width: 5px;
}

.hr-large-space {
	margin-top: 100px;
	margin-bottom: 100px;
}

.hr-large-space-top {
	margin-top: 100px;
}

.hr-large-space-bottom {
	margin-bottom: 100px;
}

.hr-medium-space-top {
	margin-top: 50px;
}

.hr-medium-space-bottom {
	margin-bottom: 50px;
}

/****************************************************************************** 
* Style for the site navigation bar/menu
******************************************************************************/
.site-navigation-menu {
	background: var(--siteMenuColor);
	width: 10rem;

	border-right: var(--border);
	border-right-width: calc(var(--borderWidth) * 2);
}

@media (min-width: 1300px) {
	.site-navigation-menu {
		border-right: var(--border);
		border-right-width: calc(var(--borderWidth) * 2);
	}
}

@media (min-width: 992px) and (max-width: 1250px) {
	.site-navigation-menu {
		font-size: 0.6rem;
	}
}

.site-navigation-menu ul {
	padding-bottom: 1rem;
}

.site-navigation-menu .nav-link {
	display: block;
	padding: .25rem 1rem;
	}

.site-navigation-menu .nav-link {
	font-family: var(--headingFont);
	font-size: 1.2rem;

	color: white;
	font-weight: 400;
}

@media (max-width: 1199px) {
	.site-navigation-menu .nav-link {
		font-size: 1.2rem;
	}
}

.site-navigation-menu .nav-item mark {
	font-family: var(--headingFont);
	background-color: white;
}

@media (max-width: 768px) {
	.site-navigation-menu ul {
		padding-top: 1rem;
	}
}

@media (max-width: 539px) {
	.site-navigation-menu ul {
		padding-top: 1rem;
	}

	.site-navigation-menu .nav-link,
	.site-navigation-menu .nav-item mark {
		font-size: 0.75rem;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS */
	.site-navigation-menu {
		background: dodgerblue;
	}
}

/****************************************************************************** 
* Style for navbar and offcanvas
******************************************************************************/
.navbar {
	border-bottom: var(--border);
	border-bottom: var(--borderFull);
	padding: 0;
}

.navbar-brand {
	background-color: rgba(0, 0, 0, 0);
	box-shadow: none;
}
.navbar-brand img {
	border-right: var(--borderFull);
	border-bottom: none;
}

@media (min-width: 992px) {
	.navbar-brand img {
	background-color: none !important;
	border-bottom: var(--border);
	border-bottom: var(--borderFull);
	border-right: none;
}
}

@media (max-width: 991px) {
	.navbar-brand {
		padding: 0;
	}
}

.navbar-toggler {
	border-color: var(--black);
	border: none;
	border-radius: 0;
}
.navbar-toggler-icon {
	background-image: url("../images/menu/hamburger-menu-svgrepo-com.svg");
	width: 4rem;
	height: 4rem;
}

.navbar-collapse {
	border-top: var(--border);
}

.navbar.bg-blue {
	background: var(--siteMenuColor);
}

.offcanvas-header {
	border-bottom: var(--borderFull);
}
.offcanvas-body {
	background: var(--siteMenuColor);
}


 .nav-link {
	display: block;
	padding: .25rem 1rem;
	}

 .nav-link {
	font-family: var(--headingFont);
	font-size: 1.2rem;

	color: white;
	font-weight: 400;
}

@media (max-width: 1199px) {
	 .nav-link {
		font-size: 1.2rem;
	}
}

 .nav-item mark {
	font-family: var(--headingFont);
	background-color: white;
}

@media (max-width: 768px) {
	 ul {
		padding-top: 1rem;
	}
}

@media (max-width: 539px) {
	 ul {
		padding-top: 1rem;
	}

	 .nav-link,
	.nav-item mark {
		font-size: 1.25rem;
	}
}

/****************************************************************************** 
* Style for navbar alongside site-navigation-menu
******************************************************************************/
.navbar.site-navigation-menu {
	position: fixed;
	top: 0;
	z-index: 100;
}

.navbar.site-navigation-menu .navbar-brand img {
	border: none;
}

/* @media only screen and (orientation: portrait) {
	.navbar.site-navigation-menu {
		position: relative;
		position: fixed;
		display: flex;

		width: 100%;

		border-bottom: var(--border);
		border-right: none;
	}

	body {
		margin-top: 5rem;
	}

	.navbar.site-navigation-menu .navbar-brand {
		border-right: var(--border);
		margin: 0;
	}

	.navbar.site-navigation-menu .navbar-brand img {
		height: 5rem;
	}
}
@media only screen and (orientation: landscape) {
	.navbar.site-navigation-menu {
		position: fixed;
		display: block;

		width: 20vw;
		height: 100%;
		border-bottom: none;

		border-right: none;
	}

	.navbar.site-navigation-menu .navbar-brand {
		width: 100%;
		margin: 0;
		border-bottom: var(--border);
		border-right: none;
	}

	.navbar-collapse {
		position: absolute;
		top: 0;
		left: 20vw;
		background-color: var(--siteMenuColor);
		border-right: var(--border);
		border-top: none;
		height: 100%;
	}
} */

/****************************************************************************** 
* Style for the outside links bar(s)
******************************************************************************/
.outside-links {
	background-color: var(--outsideLinksColor);
	color: white;
}

.outside-links img {
	box-shadow: var(--mainShadow);
	transition: var(--shadowTransition);
}

.outside-links img:hover {
	box-shadow: var(--mainShadowHover);
}

.outside-links p {
	margin-top: 10px;
	text-align: left;
	font-size: 16px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* IE10+ CSS */
	.outside-links {
		background: green;
	}
}

/*Custom setting for outside links bar on xl display*/
@media (min-width: 1140px) {
	.outside-links {
	}
}

.outside-links-items {
	background-color: black;
}

@media (max-width: 575px) {
	.outside-links-column {
		margin-right: var(--margin-adjustment);
		margin-left: var(--margin-adjustment);
	}
	.outside-links .performance-cards-slice .outside-links-item {
		margin-right: var(--borderWidth);
		margin-left: var(--borderWidth);
	}
}

.outside-links-item {
	width: 100%;
	height: 10vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

footer {
}

footer.outside-links {
	border-top: var(--border);
}

footer.outside-links .outside-links-items {
	background-color: black;
}

footer.outside-links .outside-links-item {
	height: 100%;
}

footer.outside-links .outside-links-item img {
	border-radius: 0;
}

footer .container .row.footer-text {
	border-left: var(--border);
	border-right: var(--border);
}

@media (max-width: 576px) {
	footer .container .row.footer-text {
		border: none;
	}
}

/****************************************************************************** 
* Style for the sidebars from dashboard.css
******************************************************************************/
.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100; /* Behind the navbar */
	padding: 0 0 0; /* Height of navbar */
}

.rightbar {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 100; /* Behind the navbar */
	padding: 0 0 0; /* Height of navbar */
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);

	border-right: var(--border);
}

@media (min-width: 5800px) {
	.sidebar {
		max-width: 300px;
		max-width: 240px;
	}
	.rightbar {
		max-width: 150px;
		max-width: 100px;
	}

	.container {
		max-width: calc(100vw - 560px);
		margin-left: 350px;
	}

	.video-tweak .offset-xl-2 {
		margin-left: 300px;
		margin-left: 210px;
	}
	.video-tweak .col-xl-10 {
		-ms-flex: 0 0 calc(100% - 210px);
		flex: 0 0 calc(100% - 210px);
		max-width: calc(100% - 210px) !important;
	}
}

@media only screen and (orientation: landscape) and (max-width: 991px) {
	.video-tweak {
	}
}

/****************************************************************************** 
* Style for Media (used in Media page)
******************************************************************************/
.media {
	margin-bottom: 50px;
}

.media .media-body small {
	font-weight: 200;
}

.media-body .btn {
	margin-top: 8px;
}

.gallery-row {
	height: 10rem;
	height: 15em;
	border-bottom: var(--border);
}

.gallery-row:first-child {
	margin-bottom: 100px;
}

/****************************************************************************** 
* Style for tables
******************************************************************************/
table {
	font-size: 1.25rem;
}

th {
	font-weight: 400;
}

.table-sm td,
.table-sm th {
	padding: 0.5rem;
}

.table td,
.table th,
.table-bordered td,
.table-bordered th,
.table thead th {
	border-color: var(--black);
}

.table-bordered td,
.table-bordered th {
	border: none;
}

tr > :first-child {
	padding-left: 1.5rem;
}
tr > :last-child {
	padding-right: 1.5rem;
}

/****************************************************************************** 
* Style for photo carousel in Media page
******************************************************************************/
#photoCarousel .carousel-inner,
.carousel-indicators-images {
}

.carousel-indicators-images .row {
	margin: 0;
	margin-right: var(--margin-adjustment);
}

.carousel-indicators-images img {
	border-top: var(--border);
	border-right: var(--border);
}

/****************************************************************************** 
* Style for audio in Media page
******************************************************************************/
.aud iframe {
	margin-bottom: 30px;
	border: black 3px solid;
}

/****************************************************************************** 
* Style for videos and iframe in Media page
******************************************************************************/
.video-card {
	padding: 0;

	border-left: var(--borderFull);
	border-bottom: var(--borderFull);
}

.video-cards-slice {
	margin: 0;
	border-top: none;
	margin-bottom: calc((var(--borderWidth) / 2) * -1);

	margin-left: calc((var(--borderWidthFull)) * -1);;
}

.video-cards-slice.slice {
	border-right: none;
	margin-bottom: calc((var(--borderWidthFull)) * -1);
}

@media (max-width: 576px) {
	.video-card {
		border-left: none;
		margin-right: 0 !important;
	}

	.video-cards-slice{
		margin-left: 0;
	}
}

.video-background {
	background-color: black;
}


div + p {
	background-color: yellow;
}

/****************************************************************************** 
* Style for upcoming shows cards
• Wrapping text shadow based on https://codepen.io/yhunter/pen/EgmZVw
******************************************************************************/
.performance-card {
	padding: 0;

	/* Text styles */
	text-align: center;
	color: white;

	margin: calc(var(--borderWidth) / 2);
}
.performance-card a {
	text-decoration: none;
}


/* Class for slice containing performance cards to align right/top properly */
.performance-cards-slice {
	border-top: none;

	margin: calc((var(--borderWidth) / 2));
	margin-bottom: calc((var(--borderWidth) / 2) * -1);

	background-color: var(--black);
}

.invert .performance-cards-slice {
	background-color: var(--white);
}

.performance-cards-slice.top-margin {
	margin-top: 0;
}

.performance-cards-slice.slice {
	border-right: none;
}

.performance-cards-slice .d-flex {
}

@media (max-width: 576px) {
	.performance-cards-slice .d-flex,
	.performance-card {
		margin-right: 0 !important;
	}
}

/******************************************************************************/

.performance-card a {
	color: var(--textColor);
}
.performance-card a:hover {
	text-decoration: none;
}

.performance-info {
	text-align: center;
	padding: 0.5rem;
	background: rgba(30, 144, 255, 0);
	transition: background 0.3s ease-in-out;
}

.performance-info a{
	text-decoration: none;
}

.performance-info:hover {
	color: var(--primary);
	background: rgba(30, 144, 255, 0.6);
}

.performance-info:hover .performance-info-shadow {
	opacity: 1;
}

.performance-info .wrapper {
	padding-top: 0.3em;
	padding-bottom: 0.3rem;
}

.performance-info .performance-info-shadow {
	display: inline;
	background: var(--background);
	opacity: 0.95;
	padding: 0.1em;

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

.performance-info .show-title {
	font-style: normal;
	font-weight: 500;
	font-size: 31.25px;
	line-height: 1.6em;
}

.performance-info .show-location {
	font-style: normal;
	font-weight: normal;
	font-size: 25px;
	line-height: 1.6em;
}

.performance-info .show-date {
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	line-height: 1.6em;
}

.performance-info .show-link {
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;
}

/****************************************************************************** 
* Style for on YouTube advert text on homepage
******************************************************************************/
.on-youtube,
.on-youtube-flipped {
	font-family: var(--headingFont);
	text-align: center;
	text-transform: uppercase;
	color: black;
	font-size: calc(var(--baseFontSize) * 0.9);
	font-weight: 800;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}



@media (min-width: 576px) {
	.on-youtube {
		font-size: var(--h4);
	}
}

@media (min-width: 768px) {
	.on-youtube {
		font-size: var(--h3);
	}
}

@media (min-width: 992px) {
	.on-youtube {
		font-size: var(--h2);
	}
}

@media (min-width: 1200px) {
	.on-youtube {
		font-size: var(--h1);
	}
}

.on-youtube-image {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: 0.5s ease;
	backface-visibility: hidden;

	background-color: var(--primary);
}

.on-youtube-image:hover {
	opacity: 0.5;
}





/****************************************************************************** 
* OLD Style for upcoming shows cards
• Wrapping text shadow based on https://codepen.io/yhunter/pen/EgmZVw
******************************************************************************/
.performance-card {
	background: #ffffff;

	box-shadow: var(--mainShadow);
	transition: var(--shadowTransition);

	border: 4px solid #000000;
	border-radius: 5px;

	padding: 0;
	margin-right: 0.5rem;
	margin-bottom: 1rem;
	margin-left: 0.5rem;

	/* Text styles */
	text-align: center;
	color: white;
}

.invert .performance-card {
	border-color: var(--white);
}

.performance-card:hover {
	box-shadow: var(--mainShadowHover);
}

.performance-card a {
	color: var(--textColor);
}
.performance-card a:hover {
	text-decoration: none;
}

.performance-info {
	text-align: center;
	padding: 0.5rem;

	background: rgba(30, 144, 255, 0);
	transition: background 0.3s ease-in-out;
}

.performance-info:hover {
	color: var(--primary);

	background: rgba(30, 144, 255, 0.6);
}

.performance-info:hover .performance-info-shadow {
	opacity: 1;
}

.performance-info .wrapper {
	padding-top: 0.3em;
	padding-bottom: 0.3rem;
}

.performance-info .performance-info-shadow {
	display: inline;
	background: var(--background);
	opacity: 0.95;
	padding: 0.1em;

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

.performance-info .show-title {
	font-style: normal;
	font-weight: 500;
	font-size: 31.25px;
	line-height: 1.6em;
}

.performance-info .show-location {
	font-style: normal;
	font-weight: normal;
	font-size: 25px;
	line-height: 1.6em;
}

.performance-info .show-date {
	font-style: normal;
	font-weight: 300;
	font-size: 25px;
	line-height: 1.6em;
}

.performance-info .show-link {
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;
}



/****************************************************************************** 
* Style for a background to be a video
******************************************************************************/
.background-video video {
	object-fit: cover !important;
}
.background-video.ratio-16x9 {
	--bs-aspect-ratio: 56.25%;
}