@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0; height: 72vh;}
/* Target the scrollbar */
::-webkit-scrollbar {
  width: 12px; 
  height: 12px; 
}
::-webkit-scrollbar-track {
  background-color: #1e1e1e; 
}
::-webkit-scrollbar-thumb {
  background-color: #444; 
  border-radius: 6px; /* Round edges */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #555; 
}
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@font-face {
	font-family: LeagueSpartan;
	font-style: normal;
	font-weight: 400;
	src: url("fonts/LeagueSpartan-Regular.ttf") format("truetype");
}
@font-face {
	font-family: LeagueSpartan ExtraBold;
	font-style: normal;
	font-weight: 800;
	src: url("fonts/LeagueSpartan-ExtraBold.ttf") format("truetype");
}
@font-face {
	font-family: LeagueSpartan Light;
	font-style: normal;
	font-weight: 300;
	src: url("fonts/LeagueSpartan-Light.ttf") format("truetype");
}
@font-face {
	font-family: LeagueSpartan ExtraLight;
	font-style: normal;
	font-weight: 200;
	src: url("fonts/LeagueSpartan-ExtraLight.ttf") format("truetype");
}
body {
	font-family: LeagueSpartan, sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	overflow: visible;
	background: #000;
}
#box {
  width: 100%;
  height: 100vh;
  margin: auto; /* Center horizontally */
  position: relative;
  top: 0;
  transform: translateY(0%);
  background-color: #FFFFFF; /* White box background */
  overflow: auto; /* Allow scrolling within the box */
  box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Optional: shadow for effect */
}
header .row:first-of-type {
	padding-top: 1rem;
}
p {
	font-family: LeagueSpartan, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
}
h1, 
.h1 {
	font-family: "LeagueSpartan ExtraLight", sans-serif;
	font-size: clamp(3vw, 5vw, 5vw);
	line-height: 1;
	font-weight: 200;
	text-transform: uppercase;
	background: -webkit-linear-gradient(180deg, #D6D6D6 0%, #333333 100% );
	background: linear-gradient(180deg, #D6D6D6 0%, #333333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2, 
.h2 {
	font-family: "LeagueSpartan Light", sans-serif;
	font-size: 5rem;
	line-height: 1;
	font-weight: 300;
	font-style: italic;
}
.h2--last {
	font-family: "LeagueSpartan", sans-serif;
	font-size: 8.45rem;
	line-height: 0.9;
	font-weight: 400;
  color: #A9A9A9;
  font-style: normal;
	background: -webkit-linear-gradient(180deg, #A9A9A9 0%, #4B4B4B 100%);
	background: linear-gradient(180deg, #A9A9A9 0%, #4B4B4B 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
h3, 
.h3 {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 800;
}
h4,
.h4 {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 800;
}
.title {
	max-width: 356px;
}
button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.btn {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 800;
	text-transform: uppercase;
	color: #FFFFFF;
	background: #F58220;
	padding: 1.2rem 4rem;
	border: 0;
	box-shadow: 0 0 21px 4px rgba(255,255,255,0.50);
	border-radius: 50px;
}
.btn:hover,
.btn:active,
.btn:focus {
	background: #F58220 !important;
}
.btn-secondary {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	font-size: 0.75rem;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 800;
	width: initial;
}
.splide__track {
	transform: translateX(-0.5px) !important;
}
.splide__pagination__page.is-active {
	opacity: 1;
}
.splide__slide {
	transform: scale(0.95);
	transition: transform ease 0.2s;
	padding-top: 0;
	padding-bottom: 3rem;
	overflow:hidden;
}
.splide__slide.is-active {
	transform: scale(1);
}
.splide__slide.is-active .splide__slide__img {
  scroll-behavior: smooth;
  transition: all ease 1s;
	filter: brightness(1);
	opacity: 1;
}
.splide__slide__img {
	clip-path: polygon(50.3% 0%, 0% 100%, 100% 100%, 100% 0%);
	filter: brightness(0.1);
	opacity: 0;
}
.splide__pagination__page {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	width: 12vw;
	font-size: 0.75rem;
	padding: 0;
	transition: color 0.5s ease;
	color: #B2B2B2;
	background-image: url('assets/timeline-dot.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 4.5rem 0 0;
  height: 6rem;
}
.splide__pagination__page.is-active {
	background-image: url('assets/timeline-dot-active.svg');
	color: #FFFFFF;
}
.splide__arrows {
	display: none;
}
.splide__pagination-wrapper {
	width: 100%;
	padding-bottom: 1rem;
	overflow-x: scroll;
	scroll-behavior: smooth;
	mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}
.splide__pagination {
	flex-wrap: nowrap;
	justify-content: start;
	padding-left: 5rem;
}
.splide__pagination li:first-child {
  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1));
}
#welcome {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
  background-image: url('assets/bg-home-DK7JjqAv.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#welcome.hide {
  opacity: 0;
  transform: scale(1);
}
#main {
  transform: scale(1);
  background-image: url('assets/bg-sub-BSH45_Td.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}
#main.hide {
  opacity: 0;
  transform: scale(0.95);
}
.details {
	width: 70%;
	top: 100px;
	left: 50px;
}
.details p {
	padding-right: 18rem;
}
.overview__single {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	background-size: 88%;
	background-repeat: no-repeat;
	background-position: bottom right;
	text-align: left;
	padding-top: 5rem;
	padding-left: 0;
	padding-right: 0;
	font-weight: 600;
	overflow: hidden;
}
.overview__single p {
	font-family: "LeagueSpartan ExtraBold", sans-serif;
	text-shadow: 0 0 12px #000000;
	margin-left: 0.7rem;
}
@keyframes opacity {
  0% {
	  opacity: 0.8;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.8;
  }
}
.collapsing {
	-webkit-transition: transform ease 0.05s;
	transition: transform ease 0.05s;
	opacity: 0.2;
}
.opening {
	animation: opening 3s forwards;
}
@keyframes opening {
  0% {
	  opacity: 0;
	  transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#timeline-overview {
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.addMe {
	/*background: #000000;*/
    position: absolute;
    height: 18vw;
    width: 18vw;
    border-radius: 100rem;
    right: 1vw;
    bottom: 1vw;
    display: flex;
	flex-direction: column;
	text-decoration: none;
	align-items: center;
}
header .addMe {
    right: 1rem;
    bottom: inherit;
    top: 0.5rem;
    height: 7rem;
    width: 7rem;
}
#svgCurve {
	position: absolute;
	top: -4vw;
}
path#curve {
	fill: transparent;
}
text {
	fill: #FFFFFF;
    font-size: 2.9rem;
    font-weight: 600;
}
.addMe img {
	width: 70%;
    height: 70%;
    margin: 0.5rem;
}
header .addMe img {
    margin: 0.25rem;
}
.addMe span {
	text-decoration: none;
	color: #FFF;
	line-height: 1;
	text-align: center;
}
header .addMe span {
	font-size: 0.8rem;
}
#insertButton p {
	z-index: 5;
	position: relative;
}
#insertButton img {
    clip-path: polygon(42.3% 0%, 20% 100%, 80% 100%, 100% 0%);
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
	right: 9%;
}
#insertButton .img-container::after {
	content: '';
    clip-path: polygon(54.3% 0%, 0% 100%, 51% 100%, 100% 0%);
    width: 35%;
    height: 105%;
    position: absolute;
    bottom: 0;
    right: 0px;
    background: #f38511;
}
.add-me-page {
	width: 100%;
	margin: auto; /* Center horizontally */
	position: relative;
	top: 0;
	transform: translateY(0%);
	background-color: #FFFFFF; /* White box background */
	box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Optional: shadow for effect */
  }
.add-me-page .sticky-wrapper {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    bottom: 2rem;
}
.add-me-text {
	font-size: 1.25rem;
	margin: 0 auto;
}
@media (orientation:landscape){
 	/*body {
		border: 5px solid pink !important;
	}*/
	
	#timeline-overview {
        max-height: 90vh;
    }

	@media (min-width: 767px) { 
		#timeline-overview {
			max-height: 70vh;
            overflow-y: scroll;
            margin-top: 1rem;
		}
		.splide__slide__img {
			max-height: 60vh;
		}
		.splide__track {
			height: 63vh;
		}
		.splide__pagination__page {
			padding: 2.5rem 0 0;
			height: 4rem;
		}
		.splide__slide .glock-continues {
			height: 60vh;
			width: auto !important;
			top: 0;
			position: absolute;
			transform: translate(-1.5rem, 0);
		}
	}
	@media (min-width: 1920px) { 
		.addMe {
			height: 13vw;
			width: 13vw;
		}
		#svgCurve {
			top: -3vw;
		}
	}
}
@media (orientation: portrait){
 	/*body {
		border: 5px solid orange !important;
	}*/

	#timeline-overview {
        grid-gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        max-height: 70vh;
        overflow-y: scroll;
    }
	.splide__slide__img {
		max-height: 67vh;
	}
	.splide__track {
		height: 63vh;
	}
	.splide__pagination__page {
		padding: 2.5rem 0 0;
		height: 4rem;
	}
	@media (min-width: 575.98px) { 
		.splide__slide .glock-continues {
			height: 70vh;
			width: auto !important;
			top: 0;
			position: absolute;
			transform: translate(-3%, 0);
		}
	}
}

@media (max-width: 575.98px) {
	h1 {
		font-size: 7vw;
	}
	header .row:first-of-type {
		padding-top: 1rem;
	}
	header img {
		max-width: 55px !important;
	}
	header .addMe img {
		height: 4rem;
		width: 4rem;
	}
	header .addMe img {
		max-width: inherit !important;
	}
	.splide__track {
		height: 62vh;
	}
	.splide__slide {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.splide__list,
	.splide__slide,
	.splide__slide__container {
		height: 100%;
		position: relative;
	}
	.splide__pagination__page {
		padding: 2rem 0 0;
	}
	.splide__pagination {
		padding-left: 1rem;
	}
	.details {
		width: 80%;
		top: 10px;
		left: 20px;
	}
	.details p {
		padding-right: 1rem;
	}
	.splide__slide__img {
		width: 60%;
		position: absolute;
		bottom: 0;
	}
	#timeline-overview {
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
        max-height: 70vh;
    }
	.addMe {
		height: 10rem;
		width: 10rem;
		right: 2rem;
	}
	#svgCurve {
		top: -35px;
	}
	.add-me-page .addMe {
		display: none;
	}
	.add-me-text {
		font-size: 1rem;
	}
	.splide__slide__container h2 {
		font-size: 3.75rem;
	}
	.splide__slide__container h3 {
		font-size: 1rem;
	}
	.splide__slide__container p {
		font-size: 0.875rem;
	}
}
@media (min-width: 1600px) { 
	h1 {
		font-size: 5rem;
	}
}