@font-face {
    font-family: 'DIN 30640 Std Neuzeit Grotesk Light';
    font-style: normal;
    font-weight: normal;
    src: local('DIN 30640 Std Neuzeit Grotesk Light'), url('DINNeuzeitGroteskStdLight.woff') format('woff');
    }
    

    @font-face {
    font-family: 'DIN 30640 Std Neuzeit Grotesk Bold Cond';
    font-style: normal;
    font-weight: normal;
    src: local('DIN 30640 Std Neuzeit Grotesk Bold Cond'), url('DINNeuzeitGroteskStdBdCond.woff') format('woff');
    }
	:root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1em;
	--numcards: 6;
	--outline-width: 0px;
}
html {
  scroll-behavior: smooth;
}
body{
	font-family:'DIN 30640 Std Neuzeit Grotesk Light';
	font-weight:normal;
	font-size:16px;
	color:#565656 !important;
	background-color:#fcfcfc;
}
a{
	text-decoration:none !important;
}
h1,h2,h3,h4,h5,h6{
	font-family:'DIN 30640 Std Neuzeit Grotesk Bold Cond';
	font-weight:normal;
}
.display-4{
	font-family:'DIN 30640 Std Neuzeit Grotesk Bold Cond';
	font-weight:normal;
	font-size:42px;
}
.small a{
	text-decoration:none;
	color:#565656;
}
.product-slug{
	font-size:14px;
	line-height:24px;
}
.content {
	position: relative;
	margin: 0 auto 4rem;
	padding: 2rem;
}
.lead{
	font-size:16px;
	line-height:26px;
	text-align:justify;
}
/*.content:before {
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: #fcfcfc;
  z-index: 99;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}*/
.nav a{
	font-size:12px;
}
.vl {
	border-left: 6px solid #575a5d;
}
.vlbanner {
	height: 150px; 
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top: 0vh;
}
.vlbanner2 {
	height: 240px;
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top:100%; z-index:4;
}
.vlfooter {
	height: 170px;
	position: absolute;
	left: 50%;
	margin-left: -3px;
	top: 93%;
}
.border {
	border: 1px solid #000000 !important;
}
.border-left {
	border-left: 1px solid #000000 !important;
}
.border-right {
	border-right: 1px solid #000000 !important;
}
.about-bg {
	background: url(../../../assets/dist/img/about-bg.jpg) center center;
}
.display-5{
	font-size:35px;
	word-spacing:0.5px;
}

figure{
	margin:0 !important;
}
.about-para {
	font-family: 'DIN 30640 Std Neuzeit Grotesk Light';
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 30px;
	color: #565656;
}
.card-text{
	line-height:25px !important;
	font-size:14px;
}
#cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset)); /* Make place at bottom, as items will slide to that position*/
	margin-bottom: var(--card-margin); /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}


#card_1 {
	--index: 1;
}

#card_2 {
	--index: 2;
}

#card_3 {
	--index: 3;
}

#card_4 {
	--index: 4;
}
#card_5 {
	--index: 5;
}

#card_6 {
	--index: 6;
}
#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
	padding-left:0 !important;
}
.card {
	position: sticky;
	top: 0;
	/* padding-top: calc(var(--index) * var(--card-top-offset)); */
	--bs-card-border-width:transparent;
	background-color:#ffffff;
}
.card__content{
	background-color:#ffffff;
}
.card__content p{
	font-size: 16px;
    font-weight: 100;
	color:#808080;
}

/* width */
::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px white;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: grey;
	border-radius: 5px;
}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #b30000;
	}

@supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
		source: selector(body);
		scroll-offsets:
			/* Start when the start edge touches the top of the scrollport */
			selector(#cards) start 1,
			/* End when the start edge touches the start of the scrollport */
			selector(#cards) start 0
		;
		start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
		end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
		time-range: 4s;
	}

	.card {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
	}
	
	.card__content {
		transform-origin: 50% 0%;
		will-change: transform;

		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);

		animation: var(--duration) linear scale var(--delay) forwards;
		animation-timeline: cards-element-scrolls-in-body;
	}

	@keyframes scale {
		to {
			transform:
				scale(calc(
					1.1
					-
					calc(0.1 * var(--reverse-index))
				));
		}
	}
}