:root {
	--color0: #000000;
	--color1: #FFFFFF;
	--color2: #C0C0C0;
	--color3: #939393;
	--color4: #DDDDDD;
	--color5: #00CA25;
	--color6: #292929;
	--font1: arial, helvetica, sans-serif;
	--font2: comic sans, cursive, sans-serif;
	--font3: 'Brush Script MT', cursive;
	--font4: Barlow,Sans-serif;
	--shadow1: 0.5vw -0.5vw 0vw var(--color0), -0.5vw 0.5vw 0vw var(--color0), 0.5vw 0.5vw 0vw var(--color0), -0.5vw -0.5vw 0vw var(--color0), 0.5vw 0.5vw 1vw var(--color0), 0vw -0.5vw 0vw var(--color0), 0vw 0.5vw 0vw var(--color0), -0.5vw 0vw 0vw var(--color0), 0.5vw 0vw 0vw var(--color0);
	--shadow2: 0 0 2.5vw var(--color0);
	--shadow3: 0.1vw -0.1vw 0 var(--color0), -0.1vw 0.1vw 0 var(--color0), 0.1vw 0.1vw 0 var(--color0), -0.1vw -0.1vw 0 var(--color0), 0.3vw 0.3vw 0.3vw var(--color0);
}

/*mobile first, slideshow :after a :before*/


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: var(--color6);
	font-family: var(--font4);
	font-size: 0;
	color: var(--color0);
	/* overflow-x: hidden; */
	position: relative;
	/* z-index: 999999999999; */
}

body {
	display: flex;
	flex-direction: column;
}

main {
	display: flex;
	flex-direction: column;
	padding: 3vw 1vw;
	box-shadow: 0 -0.5vw 2vw var(--color0);
	position: relative;
	background: var(--color1);
}

#main {
	display: flex;
	flex: 70%;
	flex-direction: column;
	padding: 0vw 2vw 0vw 2vw;
	box-sizing: border-box;
	max-width: 80vw;
}

#sidebar {
	display: flex;
	flex: 30%;
	flex-direction: column;
	width: 100%;
}

#content {
	display: flex;
	justify-content: center; 
	align-items: start;
	flex-direction: row-reverse;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5vw 10vw;
	border-top: 0.7vw solid var(--color5);
	box-shadow: 0 -0.5vw 2vw var(--color0);
	height: 20vw;
	background: var(--color6);
	z-index: 1;
	color: #9099a3;
	font-size: 1.5vw;
	text-align: center;
}

#counter {
	display: block;
	position: absolute;
	left: 0;
	margin-left: 2vw;
	padding: 0.5vw;
	width: 18vw;
	box-sizing: border-box;
	border: 0.1vw solid var(--color0);
	background-color: var(--color1);
	font-size: 0.95vw;
	color: var(--color0);
}

#counter > div {
	display: grid;
    grid-template-columns: 3fr 1fr;
}

a {
	text-decoration: none;
	color: var(--color0);
}

.text a {
	text-decoration: underline;
	color: #2500ff;
}

input[type="radio"] {
	display: none;
}

.red {
	color: red;
}

.title {
	font-family: var(--font2);
	font-size: 3vw;
	font-weight: bold;
}

#heading {
	display: flex;
	justify-content: flex-start;
	padding: 0vw 5vw 0vw 1vw;
	font-size: 3.5vw;
	text-shadow:  0.1vw -0.1vw 0vw var(--color0), -0.1vw 0.1vw 0vw var(--color0), 0.1vw 0.1vw 0vw var(--color0), -0.1vw -0.1vw 0vw var(--color0), 0.3vw 0.3vw 0.3vw var(--color0);
	/* background-image: url('background.jpg'); */
	/* background-position: 50% 0%; */
	font-family: var(--font4);
	font-weight: bold;
	align-items: center;
}

#heading a:nth-child(1) {
	display: block;
	width: 4.5vw;
	height: 4.5vw;
	margin-right: 1vw;
	background-image: url('favicon.ico');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 1vw;
}

#heading a:nth-child(2) {
	color: var(--color1);
}

header > div:nth-of-type(1) {
	display: flex;
	align-items: center;
	box-shadow: 0 0.5vw 2vw var(--color0);
	position: fixed;
	border-bottom: 0.7vw solid var(--color5);
	font-family: var(--font4);
	width: 100%;
	background: white;
	top: 0;
	z-index: 5;
}

#menu {
	display: flex;
	position: relative;
	box-sizing: border-box;
	/* box-shadow: 0 0 1vw var(--color0); */
	/* z-index: 1; */
	flex: 1;
}

/*udelat child elementama a ne originalnima tridama*/

.menu {
	display: flex;
	position: relative;
	flex: 1;
	flex-direction: column;
	/* z-index: 5; */
}

.submenu {
	display: none;
	flex-direction: column;
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	box-shadow: 0vw 0vw 1vw var(--color0);
	z-index: 1;
}

.item {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1vw 0;
	box-sizing: border-box;
	white-space: nowrap;
	font-weight: bold;
	font-size: 1.7vw;
	/* text-shadow: 0.1vw 0.1vw 0 var(--color0), -0.1vw -0.1vw 0 var(--color0), -0.1vw 0.1vw 0 var(--color0), 0.1vw -0.1vw 0 var(--color0), 0 0 1vw var(--color0); */
	position: relative;
	/* z-index: 2; */
	overflow: hidden;
	flex: 1;
	font-family: var(--font4);
	color: var(--color0);
	border-top: 0.7vw solid white;
	border-bottom: 0.7vw solid white;
	transition: border-top 0.3s;
}

.item span {
	transition: transform 0.3s;
}

.subitem {
	display: block;
	padding: 0.7vw 0.3vw;
	/*white-space*/
	background-color: var(--color1);
	font-family: var(--font2);
	font-weight: bold;
	font-size: 1.3vw;
	text-align: center;
	color: var(--color0);
	overflow: hidden;
}

@media only screen and (min-width: 60em) {
	.menu:hover .submenu {
		/*display: flex;*/
	}
}

.subitem:hover {
	background-color: var(--color2);
}

footer {
}

footer > a {
	color: white;
}

.item:hover span {
	transform: scale(130%);
}

.item:hover {
	border-top: 0.7vw solid var(--color5);
}

#title-image {
	display: block;
	height: 30vw;
	background-image: url('background.jpg');
	background-size: cover;
	background-position: 0% 80%;
	margin-top: 6.1vw;
}

.sidebar-item {
	display: block;
	/* flex: 100%; */
	padding: 1.5vw 0.5vw;
	margin-bottom: 0.5vw;
	box-sizing: border-box;
	border-radius: 1vw;
	/* box-shadow: 0 0 2vw var(--color0); */
	/* background-image: radial-gradient(var(--color1), var(--color1), var(--color2)); */
	color: var(--color0);
	font-family: var(--font4);
	font-size: 1.5vw;
	font-weight: bold;
	text-align: center;
	border-bottom: 0.7vw solid var(--color5);
	width: 100%;
}

.sidebar-item:hover {
	background: var(--color2);
}

.text {
	word-wrap: break-word;
	white-space: pre-wrap;
	font-size: 1.5vw;
}

.board {
    display: flex;
    flex-direction: column;
    padding: 1vw;
    font-size: 1.5vw;
    background: var(--color2);
}

.board > div:not(.slideshow) {
    padding: 0.8vw;
    margin-bottom: 0.5vw;
}

.board > div:nth-child(3) {
	padding: 0.5vw 0.8vw;
}

.board > div:not(:first-of-type) {
    display: grid;
    grid-template-columns: 7fr 2fr 2fr;
}

.board-item {
    display: grid;
    grid-template-columns: 7fr 2fr 2fr;
	user-select: none;
    cursor: pointer;
	font-weight: bold;
    background-color: var(--color4);
    padding: 0.8vw;
    margin-bottom: 0.5vw;
    align-items: baseline;
}

.board > div:first-of-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.board > div:first-of-type > label {
	user-select: none;
    cursor: pointer;
	padding: 0.2vw;
}

input[type="checkbox"] ~ div:first-of-type > label:after {
	content: "\274C";
}

input[type="checkbox"]:checked ~ div:first-of-type > label:after {
	content: "\1F4DC";
}

input[type="checkbox"]:checked ~ section {
	display: none;
}

.board > div:nth-of-type(1) {
    font-weight: bold;
    font-size: 2vw;
}

.board > div:nth-of-type(2) {
    font-weight: bold;
    background-color: var(--color4);
}

.board > section {
	animation: fade 0.7s ease forwards;
}

.article {
	display: flex;
	width: 100%;
	margin: 0.5vw 0 0.5vw 0;
	box-sizing: border-box;
	box-shadow: 0 0 1vw var(--color0);
	border-radius: 1vw;
	font-family: var(--font1);
	color: var(--color0);
}

.article:hover {
	background-color: var(--color2);
}

.article img {
	height: 8vw;
	border-radius: 1vw;
	/* box-shadow: 0 0 1vw var(--color0); */
	object-fit: cover;
	width: 14vw;
}

.article > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2vw;
	text-align: left;
	overflow: hidden;
}

.article > div > div:nth-child(1) {
	font-weight: bold;
	font-size: 1.75vw;
}

.article > div > div:nth-child(2) {
	font-style: italic;
	font-size: 1.2vw;
}

.menu-icon {
	display: none;
}

input[type=checkbox] {
	display: none;
}

.submenu-icon {
	display: none;
}







.slideshow0 {
	position: relative;
	height: 30vw;
	margin-top: 6vw;
	/* z-index: 0; */
	/* background: var(--color1);*/
}

.slideshow0 > div {
	position: absolute; /*absolute*/
	width: 100%;
	height: 100%;
	opacity: 0;
	/* z-index: 0; */
}

.slideshow0 > div > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;
	backface-visibility: hidden;
}

@keyframes slideshow {
	0% { opacity: 0; }
	100% { opacity: 1; }
}







.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18vw, 1fr));
	gap: 2vw;
	margin: 1vw 0;
}

.gallery label:nth-last-child(-n + 3) {
    /* margin-bottom: 0; */
}

.gallery label {
	display: block;
	box-shadow: 0.1vw 0.1vw 0.5vw var(--color0);
	cursor: pointer;
	user-select: none;
	transition: transform 0.5s ease;
	display: flex;
	width: 100%;
}

.gallery img:not(.portrait) {
	width: 100%;
	height: 15vw;
	object-fit: cover;
}

.gallery img.portrait {
    width: 100%;
    /* height: 18vw; */
    object-fit: cover;
}

.gallery label:hover {
	transform: scale(1.05);
}

.slideshow input[type="radio"] {
	display: none;
}

.slideshow input[type="radio"] + div {
	display: none;
}

.slideshow input[type="radio"]:checked + div {
	display: flex;
}

.slideshow > div {
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
	background-color: #00000080;
	backdrop-filter: blur(0.3vw);
	z-index: 5;
	user-select: none;
	overflow: hidden;
}

.slideshow-close {
	position: absolute;
	margin: 2vw;
	right: 0;
	top: 0;
	font-size: 1.5vw;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	color: var(--color1);
	text-shadow: var(--shadow3);
	transition: transform 0.5s;
}

.slideshow-close:hover {
	transform: scale(150%);
}

.slideshow > div > div {
	position: relative;
	box-sizing: border-box;
	margin: 1vw;
	box-shadow: 1vw 1vw 5vw var(--color0);
	/* overflow: hidden; */
	animation: fade 0.5s ease forwards;
}

.slideshow > div > div > div {
	display: flex;
	background-color: var(--color6);
	padding: 0.5vw;
	gap: 2vw;
}

.slideshow > div > div > div > a {
	display: flex;
	border-radius: 5vw;
	justify-content: center;
	align-items: center;
	background: var(--color6);
	padding: 0.5vw;
	flex: 1;
	font-size: 2vw;
}

.slideshow > div > div > iframe {
	border: none;
	width: 60vw;
	height: 80vh;
	margin-bottom: 0;
}

.slideshow-background {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	cursor: pointer;
	user-select: none;
}

.slideshow-arrow {
	font-size: 7vw;
	font-weight: bold;
	text-shadow: var(--shadow3);
	cursor: pointer;
	user-select: none;
	color: var(--color1);
	transition: transform 0.2s;
	padding: 1vw;
}

.slideshow-arrow:nth-of-type(1) {
	margin-right: auto;
	margin-left: 2vw;
}

.slideshow-arrow:nth-of-type(2) {
	margin-left: auto;
	margin-right: 2vw;
}

.slideshow-arrow:nth-of-type(1):hover {
	transform: translateX(-0.5vw);
}

.slideshow-arrow:nth-of-type(2):hover {
	transform: translateX(0.5vw);
}

.slideshow img {
	max-width: 90vw;
	max-height: 90vh;
}

@keyframes fade {
	from {
		opacity: 0;
		/*transform: translateX(-10%);*/
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.newsletter form {
	display: flex;
	flex-direction: column;
	background: #29303b;
	padding: 2vw;
	margin: 1vw 0;
	border-radius: 1vw;
	box-shadow: var(--shadow2)
}

.newsletter input {
	font-size: 1.5vw;
	padding: 1vw;
	outline: none;
	border: none;
	font-family: var(--font4);
}

.newsletter input[type="submit"] {
	cursor: pointer;
	background: white;
	border-radius: 1vw;
	font-weight: bold;
	color: var(--color0);
}

.newsletter label {
	display: flex;
	align-items: center;
	font-size: 1.5vw;
	color: white;
	user-select: none;
	cursor: pointer;
	padding: 1vw 0;
}

.newsletter label > input {
	display: inline-block;
	width: 2vw;
	height: 2vw;
	margin-right: 1vw;
}

.file {
    display: flex;
    justify-content: space-between;
    padding: 1vw;
    margin: 0.5vw 0;
    border-radius: 0.5vw;
    box-shadow: 0 0 0.5vw var(--color0);
    background: var(--color1);
    font-size: 2vw;
}

/*NEW*/
.articles-box {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3vw;
}

.articles-box > a:hover {
	transform: scale(105%);
}

.articles-box > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.2s;
}

.articles-box > a:hover {
	background: white;
}

.articles-box > a > img {
	width: 100%;
	height: 15vw;
	margin: vw;
	border-radius: vw;
}

.articles-box > a > div > div:first-of-type {
	font-size: 2vw !important;
	text-align: center;
}

.articles-box > a > div {
	text-align: center;
	gap: 0.5vw;
	width: 100%;
	box-sizing: border-box;
	flex: 1;
}

.articles-box > a > div > div:nth-of-type(2) {
	font-size: 1.8vw !important;
	text-align: center;
}

.contacts {
	display: flex;
	justify-content: space-between;
	margin: 1vw 0;
}

.contacts > div:first-of-type {
	width: calc(50% - 1vw);
	box-shadow: var(--shadow2);
	padding: 2vw;
	box-sizing: border-box;
}

.contacts > div:nth-of-type(2) {
	width: calc(50% - 1vw);
	height: 30vw;
	box-shadow: var(--shadow2);
	box-sizing: border-box;
}

.contacts > div:nth-of-type(2) > iframe {
	height: 100%;
	width: 100%;
	border: 0;
}

.images-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
	height: 10vw;
	margin: 1vw 0;
	box-sizing: border-box;
}

/*NEW*/
@media only screen and (max-width: 60em) {

	html, body {
		font-family: var(--font4);
	}

	main {
		padding: 5vw;
	}
	
	#title-image{
		margin: 0;
		height: 50vw;
	}

	#menu {
		display: flex;
		width: 100%;
		background: var(--color1);
		box-shadow: 0 0.5vw 2vw var(--color0);
		position: fixed;
		top: -100vh;
		margin-top: 20vw;
		transition: top 1s;
		flex-direction: column;
		border-bottom: 2vw solid var(--color5);
		z-index: 3;
		max-height: calc(100% - 18vw);
	}

	.submenu {
		display: none;
		position: relative;
	}
	
	.item {
		font-size: 6vw;
		padding: 2vw;
		
	}

	.item:hover {
		border-top-color: var(--color1);
	}

	.subitem {
		padding: 3vw 0 3vw 0;
		font-size: 5vw;
	}

	.submenu-icon {
		display: flex;
		position: absolute;
		right: 0;
		margin-right: 3vw;
		padding: 1vw;
		justify-content: center;
		align-items: center;
		font-size: 6vw;
		cursor: pointer;
	}

	.menu-icon {
		display: flex;
		padding: 0;
		box-sizing: border-box;
		/*border: 0.5vw solid var(--color0); box-shadow???*/
		font-size: 10vw;
		font-weight: bold;
		color: var(--color0);
		text-shadow: 0.2vw 0.2vw 0.2vw black;
		text-align: center;
		background: var(--color1);
		cursor: pointer;
		user-select: none;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	input[type=checkbox]:checked ~ #menu{
		top: 0;
	}

	header input[type=checkbox]:checked ~ div:not(#menu) {
		position: fixed;
		background-color: #00000080;
		backdrop-filter: blur(0.3vw);
		width: 100%;
		height: 100%;
		animation: fade 0.7s ease forwards;
	}

	input[type=checkbox]:checked ~ .a {
		position: fixed;
	}

	header > div:nth-of-type(1) > div:nth-of-type(1) {
		z-index: 5;
		background: white;
		position: fixed;
		z-index: 5;
		border-bottom: 2vw solid var(--color5);
		box-shadow: 0 0.5vw 2vw var(--color0);
	}
	
	header > div:nth-of-type(1) {
		border-bottom: none;
	}

	input[type=checkbox]:checked + .submenu{
		display: flex;
	}
		
	#heading {
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 12vw;
		background-position: 50% 70%;
		/* flex: 1; */
	}

	#heading > a {
		text-shadow: var(--shadow1);
		font-size: 10vw;
	}

	#heading > a:nth-child(1) {
		width: 14vw;
        height: 14vw;
        margin: 2vw;
	}

	#content {
		flex-direction: column;
	}

	#main {
		margin: 0;
		width: 100%;
		max-width: unset;
	}

	#sidebar {
		padding: 10vw 0vw 0 0vw;
		box-sizing: border-box;
	}

	.text {
		font-size: 5vw;
	}

	.title {
		font-size: 9vw;
	}

	.article {
		flex-direction: column;
		padding: 2vw;
		box-shadow: var(--shadow2);
		margin: 2vw 0;
		border-radius: 5vw;
	}

	.article > div > div {
		text-align: center;
	}

	.article > div > div:nth-child(1) {
		font-size: 5vw;
	}

	.article > div > div:nth-child(2) {
		font-size: 4vw;
	}

	.article img {
		height: 25vw;
		width: 40vw;
		margin: 2vw auto;
	}

	.article > div {
		gap: 2vw;
	}

	.gallery {
		/* justify-content: space-evenly; */
		gap: 5vw;
		grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
		margin: 2.5vw 0;
	}

	.gallery img {
		box-shadow: var(--shadow2)
	}

	.gallery img:not(.portrait) {
		height: 25vw;
	}

	.gallery img.portrait {
	    /* width: 12vw; */
	    height: 50vw;
	}

	.slideshow-arrow {
	    font-size: 20vw;
	}

	.slideshow-close {
		display: none;
	}

	.slideshow img {
		max-width: 70vw;
	}

	.sidebar-item {
		padding: 2vw;
		font-size: 7vw;
		border-bottom-width: 2vw;
	}

	.board {
		font-size: 5vw;
	}

	.board > div:first-of-type {
		font-size: 7vw;
		flex-direction: column;
	}

	.board > div:first-of-type > label {
		flex: 1;
	}

	.board > div:nth-of-type(2) {
		display: none;
	}

	.board > label {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0.5vw 2vw;
		gap: 3vw;
		padding: 2vw;
	}

	.board > label > span:first-of-type {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		flex: 20%;
	}

	.board > section > label {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0.5vw 2vw;
		gap: 3vw;
		padding: 2vw;
	}

	#counter {
		display: none;
	}

	footer {
		flex-direction: column;
		padding: 10vw 5vw;
		font-size: 3vw;
		border-top-width: 2vw;
	}

	footer > *:after {
		display: none;
	}

	footer > *:not(:first-child):not(:last-child) {
		margin: 1vw;
	}

	header > div:nth-of-type(1) {
		flex-direction: column;
		position: relative;
	}

	header > div > div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		/* z-index: 1; */
	}

	.slideshow0 {
		margin-top: 20vw;
		height: 50vw;
	}

	.newsletter form {
		padding: 5vw;
	}
	
	.newsletter input {
		font-size: 4vw;
		padding: 3vw;
	}
	
	.newsletter label {
		font-size: 2.5vw;
		padding: 2vw 0;
	}

	.file {
	    padding: 5vw;
	    margin: 2vw 0;
	    border-radius: 5vw;
	    box-shadow: 0 0 5vw var(--color0);
	    font-size: 6vw;
	}

	/*NEW*/

	.articles-box {
		grid-template-columns: 1fr;
		gap: 5vw;
	}

	.articles-box > a > div > div:nth-of-type(1) {
		font-size: 5vw !important;
	}

	.articles-box > a > div > div:nth-of-type(2) {
		font-size: 4vw !important;
	}

	.contacts {
		flex-direction: column;
		gap: 3vw;
	}

	.contacts > div {
		width: 100% !important;
	}
	
	.contacts > div:first-of-type {
		padding: 5vw;
	}

	.images-box {
		flex-direction: column;
		height: auto;
		gap: 5vw;
	}

}








.alert {
    position: fixed;
    width: 50%;
    padding: 1vw;
    top: -10vw;
    animation: alert 2s ease-out 2 alternate;
    box-sizing: border-box;
    font-size: 2vw;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	justify-content: start;
	align-items: center;
	left: 25%;
	border-radius: 1vw;
	margin: 1vw 0 0 0;
    box-shadow: 0vw 0.2vw 1vw #000000;
	cursor: pointer;
	z-index: 5;
}

.warning {
	color: #FFFFFF;
	background: #7B0000;
}

.confirmation {
	color: #FFFFFF;
	background: #44A049;
}

.alert span {
	margin-right: 1vw;
}

@keyframes alert {
	0%   {top: -10vw;}
	50% {top: 0;}
	100% {top: 0;}
}

.alert:nth-child(1 of .alert) {
	animation-delay: 0s;
}