/* Container for the image */
.animated-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw; /* Adjust as needed */
  height: 100vh; /* Adjust as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Wrapper for the animated image */
.animated-wrapper {
  position: relative;
  animation: moveUpDown 6s infinite; /* 6s // 8s // Combined animation */
  animation-timing-function: ease-in-out;
  /* filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4)); /* Drop shadow with transparency */
}
	
/* Wrapper for the animated image */
.image-wrapper {
  position: relative;
  
  height: 68vh; /* 562px; */
  width: 225px; /* 225px; */
  
  background-image: url('stelz-can.png'); /* Replace with actual path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Multi-layered shadow with a further distance effect */
  filter:
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.4))     /* Shadow closer to the object */
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4))     /* Shadow closer to the object */
    drop-shadow(12px 24px 64px rgba(0, 0, 0, 0.2))     /* Shadow further from the object */
    drop-shadow(24px 48px 128px rgba(0, 0, 0, 0.2));   /* Faint, distant shadow */
  
  animation: rotateImage 8s infinite; /* 8s // 12s // Combined animation */
  animation-timing-function: ease-in-out;
}

/* Animation to move image up and down (60px every 6s) */
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(-60px); /* Initial position */
  }
  50% {
    transform: translateY(60px); /* Move up 60px */
  }
}

/* Animation to rotate image from -20 to +20 degrees (12s total) */
@keyframes rotateImage {
  0%, 100% {
    transform: rotate(-20deg); /* Start and end at -20deg */
  }
  50% {
    transform: rotate(20deg); /* Rotate to +20deg */
  }
}



/*
	Slideshow
*/

#slides {
	position:absolute;
	z-index:100;
}

.slides_container {
	width:240px;
	height:240px;
	overflow:hidden;
	position:relative;
	display:none;
}

.slides_control {
}

.content_placeholder {
	width:100%;
	height:100%;
	display:block;
	/*background:url(../img/polaroid-placeholder.png) no-repeat center;*/
}

#slides .slide {
	padding:0;
	margin:0;
	width:240px;
	height:240px;
	overflow:hidden;
	display:block;
	/*background:url(../img/polaroid-bg.png) repeat center;*/
}

.slide_img {
	padding:0;
	margin:0;
}
.slide_vid {
	padding:0;
	margin:0;
	background-color: #000;
}

.video {
	z-index:40;
}
.video_label {
	position:absolute;
	z-index:42;
}

.slide_iframe {
	padding:0;
	margin:0;
	background-color: #000;
}

.iframe {
	z-index:40;
}
.iframe_label {
	position:absolute;
	z-index:42;
}

#slides .next,#slides .prev {
	position:absolute;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
	background:url(../img/arrow-prev.png) no-repeat center;
	cursor:pointer;
}
#slides .next {
	background:url(../img/arrow-next.png);
}

.social-info-container {
	font-family: GothamBoldWeb;
	font-size: 26px;
	line-height: 72px;
	text-shadow: 0px -2px 2px #222, 0px 1px 1px #333;
	margin:0;
	position:absolute;
	display:block;
	z-index:103;
	color:#f7f7f7;
	background:url(../img/social-info-bg.png) repeat-x center;
	box-shadow: 0px 0px 8px #000;
}
.social-info {
	margin: 0;
	padding: 0;
	background: 0 0 no-repeat;
}

.pagination {
	margin:0;
	padding:0 1px;
	position:absolute;
	display:block;
	z-index:102;
	background-color:transparent;
	outline:none;
	box-shadow:none;
	border-radius:7px;
	transition:background-color .25s linear;
}

.pagination li {
	float:left;
	margin:5px;
	padding:0;
	width:4px;
	height:4px;
	list-style:none;
	display:-moz-inline-stack; display:inline-block; *display:inline; *zoom:1;
	background:url(../img/pagination.png) 0 0 no-repeat;
	cursor:pointer;
	background:#fff;
	border:1px solid transparent;
	outline:none;
	box-shadow:none;
	border-radius:50%;
	transition:background-color .25s linear, border-color .25s linear;
}
.pagination li.current {
	margin:2px;
	width:10px;
	height:10px;
	background-color:transparent;
	border:1px solid #fff;
	box-shadow:none;
}


/*    crossover slides    */
.crossover_bg {
	margin: 0px;
	padding: 0px;
	z-index: 101;
}
.crossover_fg {
	cursor: pointer;
	position: absolute;
	overflow: hidden;
	z-index: 102;
}
.crossover_visible {
	opacity: 0;
}


/*    polaroid slides    */
.polaroid {
	font-family: GothamBlackWeb;
	color: #fff;
	margin: 0;
	padding: 0;
}
.polaroid-container {
	margin: 0;
	padding: 0;
}

.polaroid-placeholder {
	margin: 0;
	padding: 0;
	background: url(../img/polaroid-bg.png) repeat center;
	box-shadow: 1px 2px 8px #000, 0 0 16px rgba(26,24,23,.42) inset;
}

.polaroid-image {
	width: 320px;
	height: 320px;
	margin: 0;
	padding: 0;
	border-radius: 6px;
	box-shadow: 0 0 4px rgba(26,24,23,.42) inset;
	background: url(../img/polaroid-placeholder.png) no-repeat center;
	background-size: 100% Auto;
	/*
	border: solid #fff 8px;
	left: -8px;
	background: #fff;
	*/
}

.polaroid-txt {
	font-family: CaflischScriptWeb;
	font-style: italic;
	font-size: 36px;
	line-height: 72px;
	text-align: center;
	overflow: hidden;
	color: #1a1817;
	display: block;
	margin: 0;
	padding: 0;
	/*background-color: #CCFF00;*/
}

/*
	Counter-slides-style
	
	Proost
	default:		margin-top:106px;
	
	Dependance
	Carnaval:		margin-top:52px;
	NYE-2024:		margin-top:-270px;
	NYE-2025:		margin-top:-230px;
*/
.countdown{ position:absolute; width:2076px; height:432px; margin-top:52px; }
.countdown ul.cd{ float:left; list-style-type:none; margin:0; padding:0; }
.countdown li{ background:url(../img/counter-digits-4k-white.png) 0 0 no-repeat; }
.countdown li.t{ background-position:0 0; width:240px; height:180px; }
.countdown li.b{ background-position:0 0; width:240px; height:180px; }
.countdown li.s{ background-position:0 -4800px; width:52px; height:360px; }
.countdown li.txt{ background-position:-480px -4800px; width:480px; height:72px; display:inline-block; }
.countdown li.space{ background-position:-52px -4800px; width:52px; height:72px; display:inline-block; }



/*    tick slides    */
/*
body { background-color: rgb(213, 222, 224) !important; }
*/

.tick {
	font-size: 2.2vw; /* 2.6vw; */
	white-space: nowrap;
	/* font-family: arial, sans-serif; */
	font-family: Impact, Charcoal, sans-serif;
}
.tick-flip, .tick-text-inline {
	font-size: 2.5em;
}
.tick-label {
	margin-top: 0.1em; /* 1em; */
	font-size: 0.8em;
}
.tick-char {
	width: 1.5em;
}
.tick-text-inline {
	display: inline-block;
	text-align: center;
	min-width: 3em;
}
.tick-text-inline + .tick-text-inline {
	margin-left: -0.325em;
}
.tick-group {
	margin: 0 0.5em;
	text-align: center;
}
.tick-text-inline {
	color: rgb(244, 244, 244) !important;
}
.tick-label {
	color: rgb(244, 244, 244) !important;
}
.tick-flip-panel {
	color: rgb(66, 52, 122) !important; /* rgb(248, 255, 52) rgb(255, 172, 122) rgb(204, 255, 0) */
}
.flip-container-1 .tick-flip-panel {
	color: rgb(249, 255, 98) !important; /* rgb(248, 255, 52) rgb(255, 172, 122) rgb(204, 255, 0) */
}
.tick-flip {
	font-family: Impact, Charcoal, sans-serif !important;
}
.tick-flip-panel-text-wrapper {
	line-height: 1.45 !important;
}
.tick-flip-panel {
	background-color: rgb(244, 244, 244) !important; /* rgb(66, 52, 122) rgb(86, 9, 113) rgb(64, 64, 144) */
}
.flip-container-1 .tick-flip-panel {
	background-color: rgb(28, 28, 28) !important; /* rgb(66, 52, 122) rgb(86, 9, 113) rgb(64, 64, 144) */
}
.tick-flip {
	border-radius: 0.12em !important;
}