:root {
	--brand: #101820;
	--brand-rgb: rgb(10, 18, 20);
	--black: #101820;
	--white: #ffffff;
	--t-black: #101820;

	--b-primary-1: #D9895B;
	--b-primary-1-rgb: rgb(217, 137, 91);

	--b-accent-1: #BF604B;
	--b-accent-1-rgb: rgb(191, 96, 75);

	--b-button-1: #F2DA91;
	--b-button-1-rgb: rgb(242, 218, 145);

	--b-button-1-rgb-50: rgba(242, 218, 145, 0.5);

}
html {
	min-height: 100vh;
}
body {
	background-color: var(--brand);
	color: var(--t-black);
	min-height: 100vh;
	font-family: 'Source Sans 3', sans-serif
}
.text-black {
	color: var(--t-black);
}

.bg-t-white {
	background-color: var(--white);
}
.bg-b-primary-1 { background-color: var(--b-primary-1); }
.bg-brand { background-color: var(--brand); }

.b-border-top {
		border-top: 6px solid var(--b-primary-1) !important
}

h4 {
	color: var(--brand);
}

a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: var(--b-accent-1);
}

a svg {
	fill: var(--t-black);
}
a:hover svg {
	fill: var(--brand);
}

.text-black a:not(.btn) {
	color: var(--black);
	text-decoration: none;
}
.text-black a:not(.btn):hover {
	color: var(--b-primary-1);
}

.text-accent {
	color: var(--b-button-1);
}

footer {
	color: var(--white);
}

footer svg {
	fill: #fff;
	width: 1.7rem;
}
footer svg:hover {
	fill: var(--b-accent-1);
}
.bg-image {
	background-size: cover;
	background-position: center;
}

hr {
	opacity: 1;
	border-color: var(--b-accent-1);
}

/*
// -----------------------------------------------
// -----------------------------------------------
// Navbar
// -----------------------------------------------
// -----------------------------------------------
*/
.navbar {
	transition: padding 0.3s;
	--bs-navbar-padding-y: 0.25rem;
	--bs-navbar-padding-x: 0.5rem;
	background: transparent;
}

.navbar-brand h1 {
	line-height: 1.1;
	color: var(--white);
	font-family: "Michroma", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
}

.navbar-brand svg {
	fill: var(--white);
}

.navbar-brand img {
	height: 60px;
	transition: height 0.3s ease;
}
.navbar.scrolled {
	padding-top: 2px;
	padding-bottom: 2px;
	background: var(--brand);
}
.navbar.scrolled .navbar-brand img {
	height: 40px;
}
.display-1, .navbar-brand {
	font-weight: 900;
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--white);
	text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.navbar-brand,
.navbar-brand:hover,
.navbar-brand:active,
.navbar-brand:visited {
	--bs-navbar-brand-color: var(--white)!important;
	--bs-navbar-brand-hover-color: var(--white)!important;
}
.display-1 {
	margin-top: 3rem;
}

.external-link-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	margin-left: 0.3rem;
}

.external-link-icon .icon-color {
	fill: var(--t-black);
}
.text-black a:hover svg.external-link-icon .icon-color,
.text-black a:active svg.external-link-icon .icon-color {
	fill: var(--b-primary-1)!important;
}

.nav-item:not(.no-hover) .nav-link:hover .external-link-icon .icon-color {
	fill: var(--t-black);
}
.nav-item:not(.no-hover) .nav-link:active .external-link-icon .icon-color {
	fill: var(--white);
}

/*
// -----------------------------------------------
// -----------------------------------------------
// Buttons
// -----------------------------------------------
// -----------------------------------------------
*/
.btn-primary {
	--bs-btn-color: var(--white);
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-color: var(--brand);
	--bs-btn-hover-bg: var(--white);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: 0, 0, 0;
	--bs-btn-active-color: var(--brand);
	--bs-btn-active-bg: var(--b-accent-1);
	--bs-btn-active-border-color: var(--brand);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: var(--brand);
	--bs-btn-disabled-bg: var(--b-accent-1);
	--bs-btn-disabled-border-color: var(--b-accent-1);
}

.btn-primary.inverted {
	--bs-btn-color: var(--brand);
	--bs-btn-bg: var(--white);
	--bs-btn-border-color: var(--white);
	--bs-btn-hover-color: var(--brand);
	--bs-btn-hover-bg: var(--b-button-1);
	--bs-btn-hover-border-color: var(--b-button-1);
	--bs-btn-focus-shadow-rgb: 0, 0, 0;
	--bs-btn-active-color: var(--t-black);
	--bs-btn-active-bg: var(--b-button-1);
	--bs-btn-active-border-color: var(--b-button-1);
	--bs-btn-active-shadow: none;
	--bs-btn-disabled-color: var(--white);
	--bs-btn-disabled-bg: var(--b-button-1);
	--bs-btn-disabled-border-color: var(--b-button-1);
}


.news-item {
	padding: 0.5rem 0 0.5rem 0.8rem;
	margin-bottom: 1rem;
	border-left: 6px solid var(--b-primary-1);
}

.news-item small {
	color: var(--b-primary-1);
}

.square {
	position: absolute;
	top: -1100px;
	right: -1000px;
	width: 1px;
	height: 1px;
	transition: right 1s ease;
	pointer-events: none;
}

/* Positions second square offset to the right */
#square2 {
	right: -400px;
	bottom: -1200px;
	top: unset;
}


.square-shape  {
	width: 10px; 
	height: 10px; 
	background-color: var(--b-accent-1);
	transform: scale(100) rotate(-45deg); 
	transform-origin: center center; 
	shape-rendering: geometricPrecision;

}

#square2 #square2-shape {
	background-color: var(--b-primary-1);
	transform: scale(80) rotate(45deg)
}

.shape-shadow {
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.square-fixed {
	top: -100px!important;
	right: 0!important;
}
#square2.square-fixed {
	bottom: -200px!important;
	right: 0!important;
	top: unset!important;
}


.shadow-box {
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.shadow-text {
	text-shadow: 0 0 20px rgba(0,0,0,0.5);
}


.stat {
	font-family: "Michroma", sans-serif;
	font-style: normal;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
}
.stat-caption {
	font-size: .8rem;
	font-weight: 700;
}


.b-card {
	padding: 1.5rem;
	height: 100%;
	background-repeat: no-repeat;
	border-top: 2px solid var(--b-accent-1);
}


.full-transparency {
	background-image: url('../images/performance_line.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}
.studio-security {
	background-image: url('../images/lock_fill.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}
.part-of-the-team {
	background-image: url('../images/group_3_fill.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}
.update-monitoring {
	background-image: url('../images/task_line.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}
.outstanding-reliability {
	background-image: url('../images/alarm_1_fill.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}
.flexibility {
	background-image: url('../images/schedule_line.svg');
	background-position: 97% 8%;
	background-size: 50px 50px;
}