/*
    custom styles
*/

/* @font-face {font-family: 'font_name'; src: url('../font/font_name/300.ttf') format('truetype'); font-weight: 300; font-style: normal;}
@font-face {font-family: 'font_name'; src: url('../font/font_name/400.ttf') format('truetype'); font-weight: 400; font-style: normal;}
@font-face {font-family: 'font_name'; src: url('../font/font_name/500.ttf') format('truetype'); font-weight: 500; font-style: normal;}
@font-face {font-family: 'font_name'; src: url('../font/font_name/700.ttf') format('truetype'); font-weight: 700; font-style: normal;} */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


body {
	-webkit-box-shadow: inset 0px 0px 25px 10px rgba(0,0,0,0.5); 
	box-shadow: inset 0px 0px 25px 10px rgba(0,0,0,0.5);
}

footer,
header {
	background-color:rgba(19, 26, 55, 0.7);
}

p,a,h1,h2,h3,h4,ul,li {
	font-family: "Spectral", serif;
	font-weight: 300;
}
h1,h2,h3,h4 {
	font-weight: 600;
}
.header.on_top {
	background-color:transparent;
}
.menu__logo {
	height:50px;
}
.menu__logo img {
	height:50px;
	width:auto;
	margin-right:15px;
}
.npx-slider {
  position: relative;
  height: 75vh;
  overflow: hidden;
}
.npx-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.npx-slide.active {
  opacity: 1;
  z-index: 1;
}
.npx-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
}
.npx-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 800px;
}
.npx-text.text-white > * {
	text-shadow: 0px 0px 10px rgba(19,26,55,0.7);
}
.npx-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.npx-indicators span {
  display: block;
  width: 14px;
  height: 4px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.npx-indicators span.active {
  background-color: #fff;
}
.scroll-btn {
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(50px, 6vw, 60px);
  height: clamp(50px, 6vw, 60px);
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
}
.scroll-btn svg {
  width: 50%;
  height: 50%;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(4px); opacity: 0.7; }
}
  /* CTA scroll button */
.npx-cta{position:fixed;left:50%;bottom:clamp(16px,3vmin,28px);transform:translateX(-50%);width:clamp(52px,6.5vmin,72px);height:clamp(52px,6.5vmin,72px);border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;transition:background .2s, transform .2s}
.npx-cta:hover{background:rgba(255,255,255,.18);transform:translateX(-50%) scale(1.03)}
.npx-cta svg{width:44%;height:44%}
@keyframes npx-pulse{0%{transform:translateY(0);opacity:.8}50%{transform:translateY(18%);opacity:1}100%{transform:translateY(0);opacity:.8}}
.npx-cta .arrow{animation:npx-pulse 1.4s ease-in-out infinite;transform-origin:center}

.tc {
	text-align:Center;
}

.person {
	width:60%;
	height:0px;
	padding-top:60%;
	border-radius:50%;
	overflow:hidden;
	margin:50px auto;
	position:relative;
}
.person img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover; 
	transform: translate(-50%, -50%);
}

.btn {
	padding:10px 20px;
	text-align:center;
	line-height:20px;
	font-size:120%;
	background-color:var(--color-primary);
	border-radius:5px;
	color:#131a37;
}
.btn:hover {
	background-color:var(--color-primary-hover);
}

#who,
#gallery {
	background-color:rgba(49, 56, 85, 0.7);
}

#justin {
	margin-bottom:50px;
}


.program__part {
	margin:10px 0px 10px 0px;
}
.program__part:before{
	content:'';
	display:inline-block;
	width:20px;
	height:20px;
	border-radius:10px;
	background-color:var(--color-primary);	
}
.program__part__title {
	display:block;
	color:var(--color-primary);
	font-size:120%;
}
.program__part__timing {
	font-style:italic;
	display:block;
	font-size:60%;
}
.program__part__perex {
	display:block;
	font-size:80%;
}

#formular {
	max-width:500px;
	margin:20px auto;
}

@media (max-width: 1000px) {

	#justin{
		flex-direction:column-reverse;
	}
}

.galerie {
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:0; 
}

.galerie img{
  display:block;
  width:100%;
  height:auto;
}
@media (max-width: 480px){
  .galerie{ grid-template-columns: 2fr; }
}
@media (min-width: 1200px){
  .galerie{ grid-template-columns: repeat(5, 1fr); }
}