:root {
	--color__green: #14906c;   
		--color__green--dark: #097152;       
		--color__green--dark2: #086549;      
		--color__green--light: #d5eee7;     
		--color__green--light2: #a4dacb;   
		--color__green--light3: #edf5f3;     
	--color__gray: #999999;       
	--color__yellow: #E9FC26;    
	--color__red: #EE2A2E;      
	--color__silver: #ddd;        
		--color__silver--bg: #f1f1f1;
	--color__orange: #FF8F1D;      
	--color__blue: #4078B4;       
	 
	--color__facebook: #3B5998;      
	--color__twitter: #55acee;   
	--color__gplus: #d71d1e;   
	--color__instagram: #3d6d92;   
	--color__youtube: #DE1A2A; 
	--color__flickr: #FE0084;   
	 
	--color__one: #118161; 
	
	--font__regular: 'Open Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--font__condensed: 'Open Sans Condensed', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	
	--flow__space: 1em;
	
	--wrapper__bodyPadding: 1.5rem;
	--wrapper__padding: 3em 0;
	--wrapper__gridOffsetLeft: 2;
	--wrapper__gridOffsetRight: -2;
		--wrapper__gridOffset: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
	--wrapper__gridGap: 0.5em;
	--wrapper__bodyPaddingInner: calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap));
	
	--grid: grid;
}

.wrapper {
	display: grid;
	grid-template-columns: 
		calc(var(--wrapper__bodyPadding) - (var(--wrapper__gridGap) * 2)) 
		repeat(12, minmax(1em, 1fr)) 
		calc(var(--wrapper__bodyPadding) - (var(--wrapper__gridGap) * 2));
	
	align-content: start; 
	column-gap: var(--wrapper__gridGap);
	padding: var(--wrapper__padding);
}

.wrapper > * {
	grid-column: var(--wrapper__gridOffset);
}

.wrapper--columns2 {
	grid-template-areas: " . left left left left left left right right right right right right . ";
}

.wrapper--columns3 {
	grid-template-areas: " . left left left left center center center center right right right right . ";
}

.wrapper--columns4 {
	grid-template-areas: " . one one one two two two three three three four four four . ";
}

.wrapper--grid,
.wrapper--grid3 {
	grid-column: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
	row-gap: var(--wrapper__gridGap);
	column-gap: var(--wrapper__gridGap);
}

.wrapper--narrow {
	grid-column: var(--wrapper__gridOffsetLeft) / var(--wrapper__gridOffsetRight);
}

@media (min-width: 23em) {
	:root {
		--wrapper__bodyPaddingInner: var(--wrapper__bodyPadding);
	}
	
	.wrapper {
		grid-template-columns: 
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap)) 
			repeat(12, minmax(1em, 1fr)) 
			calc(var(--wrapper__bodyPadding) - var(--wrapper__gridGap));
	}
}

@media (min-width: 32em) {	
	.wrapper--grid > * {
		grid-column: span 6;
	}
	
	.wrapper--grid > *:nth-child(2n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 6;
	}
	
	.wrapper--grid3 > * {
		grid-column: span 6;
	}
	
	.wrapper--grid3 > *:nth-child(2n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 6;
	}
}

@media (min-width: 48em) {
	.wrapper--columns2 > *:nth-child(1) {
		grid-area: left;
	}
	
	.wrapper--columns2 > *:nth-child(2) {
		grid-area: right;
	}
	
	
	
	
	.wrapper--columns3 > *:nth-child(1) {
		grid-area: left;
	}
	
	.wrapper--columns3 > *:nth-child(2) {
		grid-area: center;
	}
	
	.wrapper--columns3 > *:nth-child(3) {
		grid-area: right;
	}


	
	
	.wrapper--columns4 > * {
		grid-column: span 6;
	}
	
	.wrapper--columns4 > *:nth-child(2n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 6;
	}
	
	
	
	
	.wrapper--grid > * {
		grid-column: span 4;
	}
	
	.wrapper--grid > *:nth-child(2n+1) {
		grid-column: span 4;
	}
	
	.wrapper--grid > *:nth-child(3n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 4;
	}
	
	
	
	.wrapper--grid3 > * {
		grid-column: span 4;
	}
	
	.wrapper--grid3 > *:nth-child(2n+1) {
		grid-column: span 4;
	}
	
	.wrapper--grid3 > *:nth-child(3n+1) {
		grid-column: var(--wrapper__gridOffsetLeft) / span 4;
	}
	
	
	
	
	.wrapper--narrow > * {
		grid-column: 3 / -3;
	}
} 

@media (min-width: 65em) {
	:root {
		--wrapper__gridGap: 1em;
		--wrapper__gridOffsetLeft: 3;
		--wrapper__gridOffsetRight: -3;
	}
	
	.wrapper {
		grid-template-columns: 
			1fr
			var(--wrapper__bodyPadding) 
			repeat(12, minmax(1em, 96px)) 
			var(--wrapper__bodyPadding)
			1fr;
	}
	
	
	
	.wrapper--columns2 {
		grid-template-areas: " . . left left left left left left right right right right right right . . ";
	}
	
	.wrapper--columns3 {
		grid-template-areas: " . . left left left left center center center center right right right right . . ";
	}
	
	.wrapper--columns4 {
		grid-template-areas: " . . one one one two two two three three three four four four . . ";
	}
	
		.wrapper--columns4 > * {
			grid-column: span 3;
		}
		
		.wrapper--columns4 > *:nth-child(2n+1) {
			grid-column: span 3;
		}
		
		.wrapper--columns4 > *:first-child {
			grid-column: var(--wrapper__gridOffsetLeft) / span 3;
		}
	
	.wrapper--narrow > * {
		grid-column: 6 / -6;
	}
	
	.wrapper--grid > * {
		grid-column: span 3;
	}
	
		.wrapper--grid > *:nth-child(2n+1) {
			grid-column: span 3;
		}
		
		.wrapper--grid > *:nth-child(3n+1) {
			grid-column: span 3;
		}
		
		.wrapper--grid > *:nth-child(4n+1) {
			grid-column: var(--wrapper__gridOffsetLeft) / span 3;
		}
}

body {
	overflow: unset;
	padding: 0;
}

h2 {
	font-size: 2em;
}

.flow > * + * {
	margin-top: var(--flow__space, 1.5rem);
}

.offscreen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; 
}


.btn {
	display: inline-block;
	padding: 0.5em 2em;
	
	border: 1px solid var(--color1, var(--color__green));
	text-transform: uppercase;
	text-align: center;
	background-color: var(--color1, var(--color__green));
	color: var(--color2, #fff);
	font-family: inherit;
	font-weight: 300;
	
	transition: color .3s,
		background-color .3s,
		border-color .3s;
}

	.btn--large {
		padding: 0.5em 2em;
		font-size: 1.3em;
	}
	
	.btn--small {
		padding: 0.5em 1em;
		text-transform: initial;
	}

	.btn--green {
		--color1: var(--color__green);
		--color2: #fff;
	}

		.btn--green:hover {
			--color1: var(--color__green--dark);
			--color2: #fff;
		}

	.btn--ghost {
		--color1: #fff;
		background-color: transparent;
	}
	
		.btn--ghost:hover {
			background-color: #fff;
			color: var(--color__green);
		}
	
	.pohodw a.btn {
		text-decoration: none; 
	}

.iconNew {
	display: inline-block;
	width: 1em;
	height: 1em;
	
	fill: currentColor;
}





.pohod body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	
	color: #fff;
}




.pohodw {	
	padding: 0;
	width: 100%;
	flex: 1 1 auto;
	align-content: center;
	
	background: rgb(0,64,56);
	background: linear-gradient(180deg, rgba(0,64,56,1) 0%, rgba(0,110,73,1) 100%);  
}

.pohodw__content {	
	padding-right: 4em;
}

	.pohodw a {
		text-decoration: underline;
	}
	
	.pohodw h1 {
		font-size: 2.5em;
		font-weight: 600;
	}

.pohodw__notice {
	padding: 0.5em 1em;
	
	background-color: #fff;
	color: var(--color__green--dark);
	font-weight: 600;
	text-align: center;
}

.pohodw__inner {
	grid-column: 1 / -1;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wrapper__bodyPadding);
	min-height: 100dvh; 
}

.pohodw__content {
	padding: 0 var(--wrapper__bodyPadding);
	text-align: center;
}

	.pohodw__content h3 {
		font-size: 1.3em;
	}

	.pohodw__content .hint {
		font-size: 0.9em;
	}

.pohodw__header {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: var(--wrapper__bodyPadding) var(--wrapper__bodyPadding) 0 var(--wrapper__bodyPadding);
}

	.pohodw__header img {
		max-width: 12em;
		margin-bottom: var(--wrapper__bodyPadding);
	}

.pohodw__header .separator {
	width: 80%;
	height: 1px;
	
	background-color: #fff;
}

.pohodw__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3em;
	padding: var(--wrapper__bodyPadding);
	
	background-color: #fff;
}

	.pohodw__footer img {
		display: block;
	}
	
	.pohodw__footer img {
		height: 4em;
	}














.tocka {
	flex: 1;
}

.zig {
	width: 100%;
	margin-bottom: 1em;
	
	background-color: #fff;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

	.zig,
	.zig img {
		display: block;
	}

	.zig--1 {
		padding: 0.4em 0.2em 0.4em 0.6em;
	}
	
	.zig--2 {
		padding: 0.7em 0.3em 0.1em 0.5em;
	}
	
	.zig--3 {
		padding: 0.4em 0.6em 0.4em 0.2em;
	}

.kartoncek {
	display: flex;
	gap: 2em;
	margin-top: 2em;
}

.tocka__time {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}


#formId {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	
	margin-top: 2em;
	width: 12rem;
}

#formId input {
	width: 100%;
	padding: 0.4rem 0.5rem;
	
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	
	border: 0;
}


	#formId button {
		width: 100%;
	}

.status.error {
	color: yellow;
}


.share {
	display: flex;
	gap: 0.5em;
	justify-content: center;
}

.share > div {
	display: none;
}

.share.share--old .share__old {
	display: flex;
	gap: 0.5em;
}

.share.share--api .share__api {
	display: flex;
}

.share__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	width: 2em;
	height: 2em;
	padding: 0;
	
	font-size: 1.3em;
	border: 1px solid #fff;
	border-radius: 50%;
	background-color: transparent;
}

.share__option img {
	width: 1.5em;
	height: 1.5em;
}


.share__option.tooltipped {
	position: relative;
}
	
.share__option.tooltipped:after {
	position: absolute;
	left: 50%;
	top: 110%;
	transform: translateX(-50%);
	
	padding: 0.3em 0.6em;
	
	border-radius: 0.3em;
	white-space: nowrap;
	font-size: 0.8rem;
	background-color: var(--color__green);
	color: #fff;
	content: attr(data-tooltip);
}

.signupForm fieldset {
	background-color: transparent;
}

.signupForm .form__group--inline {
	text-align: left;
}

.signupForm .error label, .signupForm .error label b {
	color: var(--color__yellow); 
}

.signupForm .form__status.error {
	display: block;
	color: var(--color__yellow); 
	text-align: center;
}

#nagradna {
	padding: 2em 1em;
	
	border: 0;
	background-color: var(--color__green);
	color: #fff;
	
}

	#nagradna::backdrop {
		backdrop-filter: blur(4px);
	}

.nagradna__options {
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: flex-start; 
	margin-top: 2em;
}

.nagradna__options button {
	padding-left: 1em;
	padding-right: 1em; 
}




@media (min-width: 48em) {
	.signupForm .form__group label {
		text-align: left;
	}
	
	#nagradna {
		padding: 3em 2em;
		max-width: 26em;
	}
	
	.pohodw {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.pohodw__header img {
		max-width: 18em; 
	}
	
	.pohodw__inner {
		min-height: 0; 
		width: 32em;
		overflow: hidden;
		gap: calc(var(--wrapper__bodyPadding) * 2);
		
		border-radius: 0.5em;
		box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
	} 
	
		.pohodw__header {
			padding-top: calc(var(--wrapper__bodyPadding) * 3)
		}

		.pohodw__header img {
			margin-bottom: calc(var(--wrapper__bodyPadding) * 2)
		}
	
	.pohodw__footer {
		margin-top: 2em;
	}
}