:root
{
	--bs-body-bg: #fbf9fc;
	--bs-primary: #64267f;
	--bs-primary-rgb: 100, 38, 127;
	--bs-body-font-family: 'Palatino Linotype', serif;
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color-rgb: var(--bs-primary-rgb);
	--royal-purple-light: #e7d5ed;
	--royal-purple-bright: #8b35b0;
	--royal-purple-dark: #742c94;
}

/* Navbar */

.navbar-royal
{
	--bs-navbar-brand-color: var(--royal-purple-light);
	--bs-navbar-brand-hover-color: var(--bs-white);
	--bs-navbar-color: var(--royal-purple-light);
	--bs-navbar-hover-color: var(--bs-white);
	--bs-navbar-active-color: var(--bs-white);
	--bs-navbar-toggler-border-color: transparent;
	--bs-navbar-brand-font-size: 1.4375rem;
	--bs-nav-link-font-size: 0.9375rem;
}

.navbar-royal .navbar-brand
{
	transition: color 1s;
}

/* Hero */

.hero-h1
{
	font-size: 100px;
}

.mobile-hero-text
{
	font-size: 50px;
}

.hero-image
{
	height: 700px;
	background: url(/img/General/Homepage/tudor_succession.jpg) no-repeat center;
	background-size: cover;
}

/* Image galleries */

.hover-transparent:hover
{
	opacity: 0.5;
	transition: opacity 0.3s;
}

.container-box:hover .box-hover
{
	opacity: 0.5;
}

.opaque-container-box:hover .box-hover
{
	opacity: 0.3;
}

.container-box:hover .info-box,
.container-box:hover .pedigree-box,
.container-box:hover .case-study-box,
.opaque-container-box:hover .case-study-box
{
	opacity: 1;
	transition: opacity 0.3s;
}

/* Ribbon */

.ribbon
{
	--ribbon-width: 72%;
	width: var(--ribbon-width);
	background: var(--royal-purple-bright);
}

.ribbon::before,
.ribbon::after
{
	position: absolute;
	bottom: -1.2em;
	display: block;
	border: 1.5em solid var(--royal-purple-dark);
	content: '';
	z-index: -1;
}

.ribbon::before
{
	left: -2em;
	border-right-width: 1.2em;
	border-left-color: transparent;
}

.ribbon::after
{
	right: -2em;
	border-left-width: 1.2em;
	border-right-color: transparent;
}

.ribbon .ribbon-content::before,
.ribbon .ribbon-content::after
{
	position: absolute;
	bottom: -1em;
	display: block;
	border-style: solid;
	border-color: var(--bs-primary) transparent transparent transparent;
	content: '';
}

.ribbon .ribbon-content::before
{
	left: 0;
	border-width: 1em 0 0 0.7em;
}

.ribbon .ribbon-content::after
{
	right: 0;
	border-width: 1em 0.7em 0 0;
}

@media (min-width: 768px) and (max-width: 991.98px)
{
	.ribbon
	{
		--ribbon-width: 78%;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px)
{
	.ribbon
	{
		--ribbon-width: 82%;
	}
}

@media (min-width: 1200px)
{
	.ribbon
	{
		--ribbon-width: 100%;
	}
}

/* Timeline */

.timeline-popup
{
	transition: opacity 0.3s;
}

.timeline-bullet a:hover .timeline-popup,
.timeline-bullet a:focus-visible .timeline-popup
{
	opacity: 1;
}
