/* Bootstrap Primary Color Override */
:root {
	--bs-primary: #166e89;
	--bs-primary-rgb: 22, 110, 137;
	
	/* Override Bootstrap success with green */
	--bs-success: #6f7f46;
	--bs-success-rgb: 111, 127, 70;
}

/* Alert Success - Custom green theme */
.alert-success {
	background-color: #e8f0dd !important;
	border-color: #a8b896 !important;
	color: #4a5533 !important;
}

/* Alert Info - Custom light blue theme */
.alert-info {
	background-color: #d1ecf1 !important;
	border-color: #bee5eb !important;
	color: #0c5460 !important;
}

.btn-primary {
	--bs-btn-bg: #166e89;
	--bs-btn-border-color: #166e89;
	--bs-btn-hover-bg: #135566;
	--bs-btn-hover-border-color: #135566;
	--bs-btn-active-bg: #0f4450;
	--bs-btn-active-border-color: #0f4450;
	background-color: #166e89;
	border-color: #166e89;
}

.btn-primary:hover {
	background-color: #135566;
	border-color: #135566;
}

.btn-primary:active,
.btn-primary:focus {
	background-color: #0f4450;
	border-color: #0f4450;
}


[data-scroll] {
	will-change: transform;
}



.content {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	padding: 12rem 0;
	counter-reset: figure;
}

.item {
	margin: 0vh auto;
	padding: 0;
	max-width: 100%;
	position: relative;
	will-change: transform;
}

.item::before {
/*
	counter-increment: figure;
	content: counter(figure, decimal-leading-zero);
 */
	position: absolute;
/* 	font-family: paralucent, sans-serif; */
/* 	font-size: 10rem; */
/* 	color: var(--color-deco); */
/* 	bottom: calc(100% - 3rem); */
}

.item:nth-child(even)::before {
	right: 0;
}

.item__img-wrap {
	--aspect-ratio: 1/1.5;
	overflow: hidden;
	width: 500px;
	margin: 0;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
	max-width: calc(100% - 2rem);
	will-change: transform;
}




.item__img {
	--overflow: 40px;
	height: calc(100% + (2 * var(--overflow)));
	top: calc( -1 * var(--overflow));
	width: 100%;
	position: absolute;
	background-image: var(--image);
	background-size: cover;
	background-position: 50% 0%;
	will-change: transform;
}

.item__img--t1 {
	--aspect-ratio: 8/10;
	--overflow: 60px;
	--image: url(/images/demo-foto-1.jpg);
}

.item__img--t2 {
	--aspect-ratio: 120/76;
	--overflow: 80px;
	--image: url(/images/demo-foto-2.jpg);
}

.item__img--t3 {
	--aspect-ratio: 60/75;
	--overflow: 120px;
	--image: url(/images/demo-foto-3.jpg);
}

.item__img--t6 {
	--aspect-ratio: 1687/1076;
	--overflow: 120px;
	--image: url(/images/demo-foto-6.jpg);
}

.item__caption {
	padding: 2rem 1rem;
}




.round-button {
  width: 100px;
  height: 100px;
}
.round-button-circle {
  width: 150px;
  height:150px;
  border-radius: 75px;
  border:0px;
  overflow:hidden;

	line-height: 1em;

	text-align: center;
	color: #e2eaf3;
	font-family: Verdana;
	font-size: 0.9em;
	font-weight: normal;
	text-decoration: none;
	font-style: default;
	font-variant: normal;
  background: #166e89;
}
/* .round-button-circle:hover { color: #ffffff; } */
.round-button a
{
	display: block;
	float: left;
	width: 100%;
	padding-top: 50%;
	padding-bottom: 50%;
	line-height: 1em;
	margin-top: -0.5em;
	text-align: center;
	color: #e2eaf3;
	font-family: Verdana;
	font-size: 0.9em;
	font-weight: normal;
	text-decoration: none;
	font-style: default;
	font-variant: normal;
}
.round-button-circle:hover {
  box-shadow:none;
  filter: brightness(0.98); /* 2% donkerder */
}

.c-purple
{
	color: #c983b6;
}

.c-blue
{
	color: #166e89;
}

.c-green
{
	color: #6f7f46;
}

.bg-white, .bg-light
{
	background: #ffffff;
}

.bg-yellow
{
	background: #f4e067;
}
.bg-purple
{
	background: #c983b6;
}
.bg-orange
{
	background: #ef763a;
}
.bg-blue
{
	background: #166e89;
}
.bg-green
{
	background: #6f7f46;
}
.bg-beige
{
	background: #aa8557;
}


.button-yellow
{
	background: #f4e067;
}

.button-purple
{
	background: #c983b6;
}

.button-orange
{
	background: #ef763a;
}

.button-green
{
	background: #6f7f46;
}

.button-dark
{
	color:#ffffff;
  	background: #000000;
}


.button-single-text
{
position: relative;
left: 0px;
top: 0.2em;
}
.button-double-text
{
position: relative;
line-height: 1.5em;
left: 0px;
top: -0.2em;
}


[data-bs-theme="dark"] {
	.bg-white,
	.bg-yellow,
	.bg-purple,
	.bg-orange,
	.bg-blue,
	.bg-green,
	.bg-beige,
	.bg-light

	{
		background: #333333;
		color: #eeeeee;

	}
	body, .text-link
	{
		color: #eeeeee !important;
	}


  }
}