@view-transition {
	navigation: auto;
}

html {
	scroll-behavior: smooth;
	background-color: var(--cerna);
}
/*////////////////////////////////////////*/
body::-webkit-scrollbar {
	width:15px;
}
body::-webkit-scrollbar-track {
	background: #fff;
	box-shadow: inset 2px 0 0 0 #000;
	box-shadow: inset 0 0 0 2px #000;
	cursor: pointer;
}
body::-webkit-scrollbar-thumb {
	background: #000;
}
body::-webkit-scrollbar-thumb:hover {
	background: #000;
}
/*////////////////////////////////////////*/
:root {
	--bila: #fcfcfc;
	--bila2: #fff;
	--seda: #efeff0;
	--cerna: #171c21;
	--fialova: #921cc0;
	--oranzova: #ed5e29;
	--modra: #00a1ff;
	--cernvena: #f22427;
}
::selection{
	color: black;
	background-color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 0 0 #000;
}
/*////////////////////////////////////////*/
@font-face
{
	font-family: 'LabilGrotesk';
	src:
	url('/TEMPLATE/CSS/LabilGrotesk/LabilGrotesk-Regular.woff2') format('woff2'),
	url('/TEMPLATE/CSS/LabilGrotesk/LabilGrotesk-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'LabilGrotesk';
	src:
	url('/TEMPLATE/CSS/LabilGrotesk/LabilGrotesk-Bold.woff2') format('woff2'),
	url('/TEMPLATE/CSS/LabilGrotesk/LabilGrotesk-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
/*////////////////////////////////////////*/
body
{
	font-family: 'LabilGrotesk', sans-serif;
	font-weight: 400;
	line-height: 160%;
	color: var(--cerna);
	background-color: var(--bila);
	margin: 0;
	font-size: 18px;
	letter-spacing: .2px;
}
a,a:hover,a:focus
{
	color: var(--cerna);
	text-decoration: none;
}
h1, h2,h3{font-family: 'LabilGrotesk', sans-serif;font-weight: normal;line-height: 160%}
/*////////////////////////////////////////*/
h1{
	font-size: 50px;
}
/*////////////////////////////////////////*/
header{
	color: var(--bila);
	background-color: var(--cerna);
	display: flex;
	position: sticky;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 20px;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}
header .logo{
	color: var(--bila);
	width: 80px;
}
header .logo IMG{display: block;width: 100%;}

header .menu a{
	color: #c7c7c7;
	cursor: pointer;
	transition: .2s all linear;
	position: relative;
}

header .menu a:hover{
	    text-shadow: 0 0 1px white;
}
header .menu a:hover,
header .menu a.active{
	color: var(--bila2);
}
header .menu{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 40px;
}
/*////////////////////////////////////////*/
.menu a::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 6px;
	border-radius: 50%;
	background: var(--fialova);
	opacity: 0;
	transform: scale(.5);
	transition: opacity .2s ease, transform .2s ease;
	position: absolute;
	top: calc(50% - 3px);
	left: -13px;
}

.menu a.active::before {
	opacity: 1;
	transform: scale(1);
}
/*////////////////////////////////////////*/
.hero{
	position: relative;
}
.hero .centered{
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
}
.hero .centered h1{
	color: var(--bila);
	line-height: 100%;
	font-size: 70px;
}
.hero .centered .btn{}
.hero picture img{width: 100%;display: block;}

/*////////////////////////////////////////*/
footer{
	color: var(--bila);
	background-color: var(--cerna);
	overflow: hidden;
	
	a:hover{
		color: var(--bila2);
	}
	.line{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 40px;
		
		

		
		.legal1{
			width: 300px;
		}
		.legal2{
			width: 300px;
		}
	}
	.social{
		display: flex;
		gap: 20px;
		a{}
		img{
			width: 100px;
		}
	}
	.line_big{
		display: flex;
		max-width: 100%;
		width: 1440px;
		margin: 20px auto;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 50px;
		box-sizing: border-box;
	}
}
.neon_line{
	text-align: center;
	color: var(--bila);
	display: block;
	border-top: 1px solid  var(--bila);
	margin: auto;
	margin-top: 20px;
	padding: 20px 0 20px;
	/*width: 1440px;*/
	max-width: 100%;

}
.big_text{
	color: var(--bila);
	background-color: var(--cerna);
	text-align: center;
	font-size: 7.4vw;
	line-height: 100%;
	display: none;
}
.big_text_img{
	width: 100%;
}
/*////////////////////////////////////////*/
.top_claim{
	max-width: 100%;
	padding: 20px;
	box-sizing: border-box;
	width: 440px;
	margin: 80px auto;
}
.top_claim .ctas{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	
}
.top_claim .text{
	text-align: center;
}
.top_claim .text+.ctas{
	margin-top: 30px;
}
.top_claim .ctas+.text{
	margin-top: 60px;
}
/*////////////////////////////////////////*/
.cont{
	max-width: calc(100% - 40px);
	width: 1440px;
	margin: auto;
	overflow: hidden;
}
/*////////////////////////////////////////*/
.loga{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	/* gap: 20px; */
	margin: 100px auto;
}
.loga a{
	width: calc(100% / 7);
	min-width: 200px;
}
.loga img{
	width: 100%;
	display: block;
}
/*////////////////////////////////////////*/
.bg_seda{
	background-color: var(--seda);
	overflow: hidden;
}
.bg_white{
	background-color: var(--bila2);
}
.bg_purple{
	background-color: var(--fialova);
}
.txt_purple{
	color: var(--fialova);
}
/*////////////////////////////////////////*/
.btn{
	transition: .2s all ease-in-out;
	transition-delay: .05s;
	background-color: var(--bila);
	padding: 8px 22px;
	border-radius: 20px;
}
.btn span{
	margin-right: 10px;
}
.btn.purple{
	background-color: var(--fialova);
	color: var(--bila);
	border: 2px solid var(--fialova);
}
.btn.purple:hover{
	color: var(--fialova);
	background-color: var(--bila);
}
.btn.purple:active{
	color: var(--fialova);
	background-color: var(--bila2);
}

.btn.blue{
	background-color: var(--modra);
	color: var(--bila);
	border: 2px solid var(--modra);
}
.btn.blue:hover{
	color: var(--modra);
	background-color: var(--bila);
}
.btn.blue:active{
	color: var(--modra);
	background-color: var(--bila2);
}

.btn.orange{
	background-color: var(--oranzova);
	color: var(--bila);
	border: 2px solid var(--oranzova);
}
.btn.orange:hover{
	color: var(--oranzova);
	background-color: var(--bila);
}
.btn.orange:active{
	color: var(--oranzova);
	background-color: var(--bila2);
}

.btn.black{
	background-color: var(--cerna);
	color: var(--bila);
	border: 2px solid var(--cerna);
}
.btn.black:hover{
	color: var(--cerna);
	background-color: var(--bila);
}
.btn.black:active{
	color: var(--cerna);
	background-color: var(--bila2);
}

.btn.white{
	background-color: var(--bila);
	color: var(--cerna);
	border: 2px solid var(--bila);
}
.btn.white:hover{
	color: var(--cerna);
	background-color: transparent;
}
.btn.tran{
	background-color: transparent;
	color: var(--cerna);
	border: 2px solid var(--bila);
}
.btn.tran:hover{
	color: var(--cerna);
	background-color: var(--bila);;
}

/*////////////////////////////////////////*/
.hp_panel{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	margin-bottom: 120px;

}
.hp_panel a{
	width: calc(50% - 10px);
	position: relative;
	
	
}



.hp_panel a img{
	width: 100%;
	display: block;
	transition: all .3s ease;
}





.hp_panel a .title{
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
	color: var(--bila);
	font-size: 60px;
	line-height: 100%;
	transition: .2s all linear;
}
.hp_panel a:hover .title{
	color: var(--bila2);
}
.hp_panel:hover img{
	filter: brightness(0.8);
}

.hp_panel a:hover img{
	filter: brightness(1);
}
/*////////////////////////////////////////*/
.hamburger{
	filter: invert(1);
	display: block;
	width: 40px;
	cursor: pointer;
	display: none;
}
/*////////////////////////////////////////*/
.text_mobule{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 80px;
	gap: 20px;
}
.text_mobule .left{
	width: calc(50% - 20px);
}
.text_mobule .left .title{
	font-size: 50px;
	margin: initial;
	line-height: 140%;
}
.text_mobule.blue .left .title{
	color: var(--modra);
}
.text_mobule.purple .left .title{
	color: var(--fialova);
}
.text_mobule.orange .left .title{
	color: var(--oranzova);
}
.text_mobule .right{
	width: 50%;
	padding-top: 16px;
}
/*////////////////////////////////////////*/
.slider_widget{
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
	gap: 1rem;
	margin: 50px 10px 150px;
	padding-bottom: 40px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - 20px);
	overflow-y: auto;
}
.slider_widget .item {
	/* flex: 0 0 auto; */
	width: 100%;
	/* border-radius: 15px; */
	padding: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	scroll-snap-align: start;
	width: auto;
	object-fit: cover;
	height: 500px;
	overflow: hidden;
}
.slider_widget .item img{
	height: 100%;
	width: auto;
	display: block;
}

.slider_widget::-webkit-scrollbar {
	width: 5px;
	border-radius:10px;
	-webkit-appearance: none;

}
/* Track */
.slider_widget::-webkit-scrollbar-track {
	background: #fff;
	background: #CACACA;
	border-radius:10px;
}


/* Handle */
.slider_widget::-webkit-scrollbar-thumb {
	background: #000;
	border-radius:10px;
	transition: .2s all linear ;
}

/* Handle on hover */
.slider_widget::-webkit-scrollbar-thumb:hover {
	background: #000;
}
/*////////////////////////////////////////*/

.smalltext_img{
	display: none;
}

.program_page .panel{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: calc(100% - 40px);
	margin: auto;
	margin-bottom: 30px;
	gap: 30px;
}
.program_page{
	
	.panel{
		.cta_l{
			.mesic{
				font-size: 50px;
				line-height: 120%;
			}
		}
		.cta_r{
			.btn{

			}
			
			display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;gap: 10px;

		}

	}
}

.program_page .cover{
    margin-bottom: 20px;
}
.program_page .cover img{
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
    display: block;
}
.program_page .additional{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
}
.program_page .additional .back{}
.program_page .additional .nav{
    display: flex;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.program_page .additional .nav a{
    text-align: center;
}
.program_page .date{
    font-size: 50px;
    line-height: 100%;
    margin: 100px 0;
    max-width: 100%;
    width: 700px;
}
.program_page .date .dash{

}
.program_page .text{
    max-width: 100%;
    width: 530px;
    width: 500px;
    min-width: 50%;
}
.program_page .content{}



.photo_page> .title,
.program_page>.title
{
	text-align: center;
	font-size: 70px;
	line-height: 110%;
	margin: 100px auto;
}
.program_page .title.small{
	max-width: 800px;
}

.program_page .program {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	min-height: 300px;
}

.program_page .program .program_mesic{
	display: flex;
	flex-direction: row;
	width: 100%;
	font-size: 50px;
	line-height: 120%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: calc(100% - 40px);
	margin: auto;
	margin-bottom: 30px;
	gap: 30px;
	margin-top: 100px;
}

.program_page .program .item {
	width: 33.333%;
	padding: 10px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
}

.program_page .program .item picture {
	display: block;
}

.program_page .program .item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.program_page .program .item .tag{
	position: absolute;
	right: 20px;
	top: 20px;
	background-color: var(--cerna);
	color: var(--bila);
	border-radius: 20px;
	padding: 0px 10px;
	font-size: 14px;
}

.program_page .program .item .desc {
	padding: 20px;
	background-color: white;

	flex: 1;
}
.program_page .program .item .desc .time{
	font-weight: bold;
	margin-bottom: 1rem;
}
.program_page .program .item .desc .text{}

.photo_panels{
	display: flex;
	margin-bottom: 200px;
	flex-direction: row;
	flex-wrap: wrap;
}
.photo_panels .photo_panel{
	width: calc(50% - 0px);
	position: relative;
	box-sizing: border-box;
	padding: 10px;
}
.photo_panel .title{
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	text-align: center;
	font-size: 30px;
	color: white;
	mix-blend-mode: difference;
	isolation: isolate;
}
.photo_panel img{
	width: 100%;
	display: block;
	object-fit: cover;
	height: 100%;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 100px;
    gap: 0;
}

.gallery img {
    display: block;
    width: 50%;
    padding: 8px;
    box-sizing: border-box;
    height: auto;
    transition: opacity .3s ease;
}

.gallery img.big {
    width: 100%;
}

.gallery:hover img {
    opacity: .80;
}

.gallery img:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    .gallery img {
        padding: 4px;
    }
}



@media only screen and (max-width: 1224px){
	.program_page .program .item{
		width: calc(50% - 10px);
	}
}

@media only screen and (max-width: 1024px){
	header .menu{
		display: none;
	}
	.hero picture img{width: 100%;aspect-ratio: 1236/889}
	.hp_panel a{
		width: 100%;
	}
	.hamburger{
		display: block;
	}
	.program_page .program .item{
		width: calc(50% - 10px);
	}
}

@media only screen and (max-width: 820px){
	.slider_widget .item
	{
		width: 90%;
		height: initial;
	}
	.slider_widget .item img{
		height: initial;
		width: 100%;
	}
	.hero .centered h1{
		font-size: 50px;
		line-height: 120%;
	}
	.big_text_img{
		display: none;
	}
	.smalltext_img{
		display: block;
		width: 100%;
	}

	footer .legal1{
		width: 100%;
		text-align: center;
	}
	footer .legal2{
		width: 100%;
		text-align: center;
	}

	footer .line {
		order: 2;
		display: flex;
		flex-direction: column;
		width: 100%;
		align-content: center;
	}
	footer .social {
		order: 1;
		margin-bottom: 40px;
	}
	footer .line_big {
		display: flex;
		justify-content: center;
		padding: 10px;
	}


	.text_mobule .right{
		width: 100%;
	}

	.text_mobule .left{
		width: 100%;
	}
	.program_page .program .item{
		width: 100%;
	}
	.program_page .date{
		text-align: center;
		font-size: 40px	;
	}
	.program_page .date .dash{
		opacity: 0;
		display: flex;
		height: 1px;
	}
	.program_page .title{
		font-size: 40px	;
	}
	.program_page .additional {
	    display: flex;
	    flex-direction: column;
	    flex-wrap: wrap;
	    align-content: center;
	    align-items: center;
	    gap: 10px;
	    margin-top: 20px;
	}
	.program_page .additional a,
	.program_page .additional span
	{

		width: 200px;
		text-align: center;
	}
	.cont{
	    max-width: calc(100% - 20px);
	}
	.program_page .panel{
		display: flex;
		justify-content: center;
	}
	.program_page .text{
		width: 100%;
	}
	.program_page .panel .cta_l .mesic {
	    font-size: 40px;
	}

	.panel .cta_r{
		order: 1;
	}
	.panel .cta_l{
		order: 2;
	}
}

@media only screen and (max-width: 500px){
	.hero .centered h1{
		font-size: 40px;
		line-height: 120%;
	}
}


@supports (-webkit-touch-callout: none) {
	.slider_widget::-webkit-scrollbar
	{
		display: none;
	}
	.scrollbar-track-h {
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100% - 0px);
		height: 16px;
		background: rgba(0, 0, 0, 0.08);
		border-radius: 10px;
	}

	.scrollbar-thumb-h {
		position: absolute;
		height: 16px;
		background: rgba(0, 0, 0, 1);
		border-radius: 20px;
		transition: background 0.2s;
		cursor: grab;
	}

	.scrollbar-thumb-h:hover {
		background: rgba(0, 0, 0, 0.5);
	}

	.scrollbar-thumb-h.active {
		background: rgba(0, 0, 0, 0.6);
		cursor: grabbing;
	}
}

s