@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&display=swap');


:root {
	--color-primary:            #E6C97A;
	--color-primary-hover:      #F5EDE3;

	--color-bg:                 #000000;
	--color-text:               #ffffff;
	--color-border:             #b08550;
	--color-negative:           #EB5757;
	--color-neutral:            #2F80ED;
	--color-positive:           #27AE60;
	--color-disabled:           #828282;

	--color-black:              #000;
	--color-gray-1:             #333;
	--color-gray-2:             #4F4F4F;
	--color-gray-3:             #828282;
	--color-gray-4:             #BDBDBD;
	--color-gray-5:             #E0E0E0;
	--color-gray-6:             #E5E5E5;
	--color-gray-7:             #C4C4C4;
	--color-white:              #fff;

	--offset-base-y:             10px;
	--offset-base-x:             5px;


	/* ------------------------- */
	/*   TYPOGPRAPHY             */
	/* ------------------------- */
	--font-family:                  'system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-size:                    18px;
	--font-size-mobile:             18px;
	--font-weight:                  300;
	--font-line-height:             2em;

	--color-heading:                var(--color-primary);
	--heading-line-height:          1.333em;
	--heading-font-weight:          600;

	--h1-font-size:                 42px;
	--h1-font-size-mobile:          32px;
	--h1-line-height:               var(--heading-line-height);
	--h1-font-weight:               var(--heading-font-weight);

	--h2-font-size:                 28px;
	--h2-font-size-mobile:          20px;
	--h2-line-height:               var(--heading-line-height);
	--h2-font-weight:               var(--heading-font-weight);

	--h3-font-size:                 28px;
	--h3-font-size-mobile:          20px;
	--h3-line-height:               var(--heading-line-height);
	--h3-font-weight:               var(--heading-font-weight);

	--h4-font-size:                 20px;
	--h4-font-size-mobile:          18px;
	--h4-line-height:               var(--heading-line-height);
	--h4-font-weight:               var(--heading-font-weight);

	--h5-font-size:                 18px;
	--h5-font-size-mobile:          18px;
	--h5-line-height:               var(--heading-line-height);
	--h5-font-weight:               var(--heading-font-weight);

	--h6-font-size:                 18px;
	--h6-font-size-mobile:          18px;
	--h6-line-height:               var(--heading-line-height);
	--h6-font-weight:               var(--heading-font-weight);

	/* ------------------------- */
	/*        LAYOUT             */
	/* ------------------------- */
	--container-width-xl: 			1170px;
	--container-width-lg: 		    970px;
	--container-width-md: 		    750px;
	--container-width-sm: 			100%;
	--gutter: 						30px;
	--gutter-sm: 					20px;


	/* ------------------------- */
	/*        FANCYBOX           */
	/* ------------------------- */
	--fancybox-thumbs-border-radius: 	var(--border-radius);
	--fancybox-accent-color:			var(--color-primary);
	--fancybox-thumbs-width:			96px;

	/* ------------------------- */
	/*          REST             */
	/* ------------------------- */
	--border-radius:                5px;
	--trans-speed:             		.3s;
}

/*
    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;} */


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);
}
main {
	margin-top:-91px;
}
footer,
header {
	background-color:rgba(90, 45, 45, 0.7);
}
p,a,h1,h2,h3,h4,ul,li {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
}
h1,h2,h3,h4 {
	font-weight: 400;
	text-transform:uppercase;
}
.header.on_top {
	background-color:transparent;
	opacity:0;
}
.menu__logo {
	height:50px;
	text-transform:uppercase;
	line-height:50px;
}
.menu__logo img {
	height:50px;
	width:auto;
	margin-right:15px;
	display:none
}
.npx-slider {
  position: relative;
  height: 90vh;
  overflow: hidden;
}
.npx-over,
.npx-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.npx-slide.active {
  opacity: 1;
  z-index: 1;
}
.npx-over {
  opacity: 1;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 800px;
}
.npx-over * {
	text-shadow: 0px 0px 10px rgba(19,26,55,0.7);
	color:#fff;
}
.npx-over .menu__logo {
	margin:0px;
}
.npx-over .menu__logo img {
	height:120px;
	margin:0px auto;
	display:none;
}
.npx-over h1 {
	text-transform:uppercase;
}
.npx-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
}
.npx-slide h3 {
	color:#fff;
}
.npx-text {
  position: absolute;
  top: calc(50% + 110px);
  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;
  z-index:10;
}
.npx-indicators span {
  display: block;
  width: 14px;
  height: 4px;
  background-color: rgba(255,255,255,0.9);
  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(100px, 12vw, 120px);
  height: clamp(100px, 12vw, 120px);
  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(102px,13vmin,142px);height:clamp(102px,13vmin,142px);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:64%;height:64%}
@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:10px 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);
}

#what,
#gallery {
	background-color:#6F1919;
}

#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%;
	font-family: "Oswald", sans-serif;
}
.program__part__timing {
	font-style:italic;
	display:block;
	font-size:60%;
}
.program__part__perex {
	display:block;
	font-family: "Oswald", sans-serif;
}

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

@media (max-width: 1000px) {

	#justin{
		flex-direction:column-reverse;
	}
	.npx-cta {
		width: clamp(72px, 10vmin, 102px);
    	height: clamp(72px, 10vmin, 102px);
	}
}

.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); }
}

    h1{
      position:relative;
      line-height:1;
      text-align:center;
      text-transform:uppercase;
      user-select:none;
      margin:0px auto;
      font-family:serif;
    }
    h1 .top,
    h1 .bottom{
      display:block;
      text-align:left;
      font-weight:400;
      font-size:clamp(28px,8vw,96px);
      /* jemná záře jako na plakátu */
      text-shadow:
        0 0 6px rgba(255,255,255,.35),
        0 0 18px rgba(255,255,255,.15);
    }
	h1 .bottom {
		text-align:right;
	}
    h1 .amp{
      position:absolute; inset:50% auto auto 50%;
      transform:translate(-50%,-40%);
      font-weight:300;
      font-size:clamp(60px,15vw,170px); /* opravdu velké & */
      color:rgba(255,255,255,.5);
      line-height:1;
      pointer-events:none;
      text-shadow:none;
      margin-left:-70px;
    }