:root {
	--brand-color: rgb(16, 125, 74);
}

header {
	border-color: #000;
}

footer {
	background-color: var(--brand-color) !important;
}

.top-bar {
	background-color: var(--brand-color) !important;
}

.bg_primary {
	background-color: var(--brand-color) !important;
	color: contrast-color(var(--brand-color)) !important;
}

.bg_thirdary {
	background-color: hsl(from var(--brand-color) h s l / 30%) !important;
	color: contrast-color(hsl(from var(--brand-color) h s l / 30%)) !important;
}

.bd_thirdary {
	background-color: hsl(from var(--brand-color) h s l / 30%) !important;
}

.checkout .button {
	border: solid 2px #fff;
	padding-right: 2.5rem;
}

.checkout .button span {
	width: auto;
}

table.calendar tbody th {
	background-color: hsl(from var(--brand-color) h s l / 30%) !important;
	color: contrast-color(hsl(from var(--brand-color) h s l / 30%)) !important;
}

.board-top {
	position: relative;
	text-align: right;
	min-height: 400px;
}

	.avatar {
		width: 35%;
		height: 100%;
		position: absolute;
		right: 0;
	}

	.board-top a img {
		min-width: 35%;
		max-width: 40%;
		width: auto;
		height: 400px
	}

	.board-top sep {
		display: block;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 76%;
		padding: 2rem 10% 2rem 3rem !important;
		clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
		opacity: 0.85;
	}

.info {
	position: absolute;
	top: 0;
	left: 0;
	width: 75%;
	height: 100%;
	background-color: var(--brand-color);
	background-image: linear-gradient(30deg,rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0.6) 100%), url('/images/bg_card.jpg');
	background-size: cover;
	background-blend-mode: multiply;
	padding: 2rem 10% 2rem 3rem !important;
	color: color: contrast-color(var(--brand-color)) !important;
	text-align: left;
	clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 0% 100%);
}


	.info h6 {
		transform: skewX(-20deg);
		display: inline-block !important;
		border: 1px solid #fff;
		margin: 0.5rem auto 1rem;
		margin-left: 10px;
		mix-blend-mode: hard-light;
		background-color: var(--brand-color) !important;
	}

		.info h6 span {
			display: inline-block;
			letter-spacing: 4px;
			padding: 0.2rem 0.7rem;
			margin: auto 1rem;
			text-transform: uppercase;
			transform: scaleY(1.2);
			color: contrast-color(var(--brand-color)) !important;
		}

	.info h5 {
		padding: 0.5rem;
		line-height: 100%;
		border: 2px solid #fff;
		text-align: center;
		mix-blend-mode: hard-light;
		background-color: var(--brand-color) !important;
	}

		.info h5 span {
			transform: skewX(-10deg);
			font-weight: 500;
			display: inline-block;
			text-transform: uppercase;
			color: contrast-color(var(--brand-color)) !important;
			letter-spacing: 3px;
		}

	.info h2, .info h3 {
		transform: skewX(-10deg);
		text-transform: uppercase;
		font-weight: 900;
		line-height: 80%;
		text-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
		letter-spacing: 2px;
	}

	.info h2 {
		font-size: 6rem;
		color: contrast-color(var(--brand-color)) !important;
	}

	.info h3 {
		font-size: 5rem;
		mix-blend-mode: overlay;
		color: contrast-color(var(--brand-color)) !important;
	}

	.info p {
		font-weight: 400;
		letter-spacing: 1px;
		color: contrast-color(var(--brand-color)) !important;
	}

a.card-tab.selected {
	background-color: var(--brand-color) !important;
	color: contrast-color(var(--brand-color)) !important;
}

a.card-tab {
	background-color: hsl(from var(--brand-color) h s l / 30%) !important;
	color: var(--brand-color) !important;
}

.square a.available {
	color: var(--brand-color) !important;
}

	.square a.available:hover {
		background-color: hsl(from var(--brand-color) h s l / 30%) !important;
		border: solid 1px var(--brand-color) !important;
	}

h2 {
	color: contrast-color(var(--brand-color)) !important;
}

.radTabStrip .tab .rtsTxt {
	color: var(--brand-color) !important;
}

.radTabStrip .tab.hoveredTab .rtsTxt {
	background-color: var(--brand-color) !important;
	color: contrast-color(var(--brand-color)) !important;
}


@media only screen and (max-width: 42.999em) {
	.board-top {min-height: 180px}
		.board-top a img {height: 180px;}

	.info {padding: 0.5rem 10% 0.5rem 0.75rem !important;}
		.info h6 {font-size: 0.5rem; margin: 0; margin-bottom: 0.5rem;}
		.info h6 span {margin: auto 0.5rem;}
		.info h2 {font-size: 2.5rem;}
		.info h3 {font-size: 2.0rem;}
		.info h5 {padding: 0.25rem;}
		.info h5 span {font-size: 0.6rem; letter-spacing: 1px;}
		.info p {font-size: 0.7rem;}

	.checkout {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding-top: 0.5rem;
		z-index: 99;
		background-color: var(--brand-color) !important;
		color: contrast-color(var(--brand-color)) !important;
		border-top: 3px solid #fff;
	}

	footer {padding-bottom: 14rem;}

}

@media only screen and (min-width: 43em) and (max-width: 63.999em) {
	.board-top {min-height: 300px}
		.board-top a img {height: 300px;}

	.info {padding: 1.5rem 10% 1.5rem 1.5rem !important;}
		.info h6 {font-size: 0.8rem; margin: 0.5rem; margin-bottom: 1rem;}
		.info h6 span {margin: auto 0.75rem;}
		.info h2 {font-size: 4rem;}
		.info h3 {font-size: 3.0rem;}
		.info h5 {padding: 0.25rem;}
		.info h5 span {font-size: 0.8rem; letter-spacing: 2px;}
		.info p {font-size: 1rem;}
}