html{
	--black-color:black;
	--white-color:white;
	--oragne-color:#FF6A3D;
	--light-orange-color: #f78a6a;
	--darkblue-color: #1A2238;
	--link-desc-color:#3e5983;
	--lighblue-color: #9DAAF2;
	--yellow-color: #F4DB7D;
	--cover-bg-color:linear-gradient(9deg, rgba(0,0,0,1) 10%, rgba(255,255,255,0) 100%);
	--hover-speed: all 0.3s 0s ease;
	--margin-photo-box: 30px 0px;
}
*{
	text-decoration: none;
}

/*Ikony*/
a .icon, h2 .icon{
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
}

.icon svg {
	width: 100%;
	height: 100%;
	fill:var(--oragne-color);
	transition: var(--hover-speed);
}
a:hover .icon svg{
	opacity: 80%;
}

.login-form{
	margin: 40px auto;
}
.form table{
	max-width: 500px;
}
.form tbody{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.form tr{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	width: 100%;
}
.form th, .form td{
	display: block;
	width: 100%;
}
.form td{
	grid-area: 1 / 1 / 2 / 2;
}
.form td input{
	width: 100%;
	border: none;
	border: var(--darkblue-color) 2px solid;
	border-radius: 4px;
	font-size: 2rem;
	transition: var(--hover-speed);
}

.form th{
	grid-area: 2 / 1 / 3 / 2;
	text-align: left;
}


body{
	margin: 0;
}


/* Barva popisků */
label {
	color: rgba(0, 0, 0, 0.87);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* Barva a styl pro označení (focus) */
select:focus {
	border-color: #4285f4;
	box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25);
}

/* Barva pozadí pro dropdown list */
select {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: rgba(0, 0, 0, 0.87);
	font-size: 16px;
	height: 40px;
	padding: 8px;
	width: 100%;
}

/* Styl pro option elementy */
select option {
	color: #757575;
	font-size: 16px;
	fon
}

/*select*/



h1,h2, h3, h4, h5, h6, a, span, p, input, th, select option {
	font-family: 'BebasNeue';
	letter-spacing:1px;
	margin-block-start: 0em;
	margin-block-end: 0em;
}

.text-orange{
	color: var(--oragne-color);
}

.text-blue{
	color: var(--link-desc-color);
}

.text-bg-purpel{
	display: inline-block;
	background-color: var(--lighblue-color);
	color: var(--white-color);
	padding: 3px 8px;
	border-radius: 4px;
}

.text-bg-yellow{
	display: inline-block;
	background-color: var(--yellow-color);
	padding: 7px 8px 1px 8px;
	border-radius: 4px;
}

a{
	color: var(--darkblue-color);
	font-size: 1rem;
}


.admin-btn{
	width: fit-content;
	position: relative;
	padding: 10px;
	margin: 20px auto;
	background-color: var(--yellow-color);
	border-radius: 4px;
	opacity: 80%;
	transition: var(--hover-speed);
	z-index: 14;
}
.admin-btn:hover{
	opacity: 100%;
}
.project-admin-btn{
	position: absolute;
	margin: 10pxx;
}
a:hover .project-background{
	opacity: 50%;
}

h1{
	color: var(--black-color);
	font-size: 3rem;
	text-align: center;
}
h2{
	color: var(--white-color);
	font-size: 2.125;
}
.filtr-projects h2{
	color: var(--oragne-color);
}

.filtr-projects a{
	padding: 5px 5px 0px 5px;
	color: var(--black-color);
	opacity: 70%;
	transition: var(--hover-speed);
}

.filtr-projects a:hover{
	opacity: 100%;
}
.filtr-projects a.active{
	border-bottom: 2px solid;
	border-color: var(--oragne-color);
	opacity: 100%;
}
.me{
	display: flex;
	flex-wrap: wrap;
}
.me h2{
	font-size: 2.5rem;
	margin: 20px 10px;
}
.me p {
	color: var(--white-color);
	text-align: left;
	margin: 20px 10px 0px 10px;
}
.me span{
	background-color: var(--oragne-color);
	color: var(--white-color);
	padding: 5px 10px;
	border-radius: 10px;
	text-align: center;
	width: fit-content;
	margin: auto;
}

.max-width{
	max-width: 1080px;
}

.block-center{
	margin: auto;
}

/*Footer*/
footer{
	background-color: var(--black-color);
	display: block;
	flex-wrap: nowrap;
	position: relative;
	width: 100%;
	bottom: 0px;
}

footer section{
	display: flex;
	align-items: baseline;
}

.footer-box{
	padding: 20px 10px
}

.footer-box p{
	color: var(--white-color);
	text-align:left;
}

.footer-box.about{
	margin-right: 30px;
}


footer .instagram-box{
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}


.instagram-box .ig-1{ grid-area: 1 / 1 / 2 / 2; }
.instagram-box .ig-2{ grid-area: 1 / 2 / 2 / 3; }
.instagram-box .ig-3{ grid-area: 1 / 3 / 2 / 4; }
.instagram-box .ig-4{ grid-area: 2 / 1 / 3 / 2; }
.instagram-box .ig-5{ grid-area: 2 / 2 / 3 / 3; }
.instagram-box .ig-6{ grid-area: 2 / 3 / 3 / 4; }

footer .instagram-box a img{
	width: 100%;
	max-width: 350px;
	transition: var(--hover-speed);
}
footer .instagram-box a:hover img{
	transform: scale(1.1);
}

footer .social-box{
	display: grid;
	margin-top: 15px;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	width: 25%;
}

.social-box .soc-1{ grid-area: 1 / 1 / 2 / 2;}
.social-box .soc-2{ grid-area: 2 / 1 / 3 / 2;}
.social-box .soc-3{ grid-area: 3 / 1 / 4 / 2;}
.social-box .soc-4{ grid-area: 1 / 2 / 2 / 3;}
.social-box .soc-5{ grid-area: 2 / 2 / 3 / 3;}
.social-box .soc-6{ grid-area: 3 / 2 / 4 / 3;}

.social-box a{
	color: var(--oragne-color);
	font-size: 1.2rem;
	transition: var(--hover-speed);
}
.social-box a:hover{
	color: var(--light-orange-color);
}

.cookie-box{
	margin-top: 15px;
	padding: 20px 10px;
}

.cookie-box p{
	color: gray;
	font-size: 0.5rem;
	font-family: sans-serif;
	text-align: left;
}
.footer-box h2{
	color: var(--oragne-color);
}

.footer-box p{
	color: var(--white-color);
	text-align:left;
}

.mb {
	margin-bottom: 1em;
}

.adminTable {
	border-collapse: collapse;
}

.adminTable th {
	background-color: #f4da7d;
}

.adminTable td {
	padding: 10px
}

.adminTable tbody tr:nth-child(even) {
	background-color: #eee
}
.adminTable tbody  tr:nth-child(odd) {
	background: #fff
}

.adminTable tbody  tr:hover {
	background: #F4DB7D50;
}

.inactive {
	color: #999;
}

.danger {
	color:red;
}

@media only screen and (max-width: 720px) {
	footer section{
		flex-wrap: wrap;
		justify-content: center;
	}
	.footer-box{
		padding: 20px 25px;
		margin: auto;
	}
	.footer-box.about{
		margin-right: 0px;
	}
	.cookie-box p{
		text-align: center;
	}

}

.alert{
	width: 200px;
	background-color: var(--lighblue-color);
	border-radius: 4px;
	position: fixed;
	top: 10px;
	padding: 10px;
	transform: translate(-50%, 50%);
	left: 50%;
}
.footer-box h2{
	padding-bottom: 10px;
}

.text-content{
	max-width: 720px;
	margin: 20px auto 0px;
	padding: 0px 30px;
}
.text-content a{
	font-size: 1.2rem;
	color: var(--link-desc-color);
}
.last-text{
	margin-bottom: 20px;
}
.project-detail-info{
	margin: 10px auto 20px;
}




.main-btn,input.button{
	background-color: var(--darkblue-color);
	opacity: 90%;
	height: 45px;
	border: 0;
	border-radius: 12px;
	transition: var(--hover-speed);
	width: fit-content;
	padding: 0 30px;
	color: var(--white-color);
	text-decoration: none;
	font-size: 1.23rem;
}
.main-btn:hover,input.button:hover{
	opacity: 100%;
}

.center-button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 50px auto;
}

/*GRID*/
.gallery {
	display: grid;
	grid-gap: 10px;
	margin: var(--margin-photo-box);
}

.grid-projects{
	grid-template-columns: repeat(3, 1fr);
}

.grid-homepage{
	grid-template-columns: repeat(3, 1fr);
	margin-left: 10px;
}

/*Grid-project*/
.square { grid-column: span 1; }

.landscape { grid-column: span 2; }

/*Homepage grid */
.item1 { grid-area: 2 / 1 / 3 / 3; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 3 / 1 / 4 / 2; }
.item4 { grid-area: 3 / 3 / 5 / 4; }
.item5 { grid-area: 4 / 1 / 5 / 3; }
.item6 { grid-area: 3 / 2 / 4 / 3; }

.project{
	background-repeat: no-repeat;
	background-size: cover;
	height: 290px;
	background-position: center center;
}


.mobile-project{
	display: none;
}

.homepage-btn{
	width: 100%;
	display: flex;
	justify-content: center;
	grid-area: 5 / 5 / 5 / 1;
}
.homepage-btn .center-button{
	margin: 25px;
}
.homepage-btn p{
	color: var(--white-color);
	margin-left: 10px;
}
.homepage-btn i{
	color: var(--white-color);
}
/*Fotky na výšku muí mít vždy jiné rozměry. 330x2+30*/
.project.portrait{
	height: 590px;
}



.tags-box{
	position:relative;
	top:10px;
	text-align: right;
	right: 10px;
	z-index: 5
}

.tags-box span{
	padding: 5px 10px 3px 10px;
	border-radius: 10px;
	color: var(--white-color);
	text-decoration: none;
	text-align: center;
}

.tag-box.projekt1{

	color: black;
}
.tag-box.projekt2{
	background-color: var(--yellow-color);
	color: black;
}

.project-header{
	margin: 0px;
	z-index: 3;
	position: relative;
	height: 100%;

}

.project-header .fake-btn{
	background-color: var(--light-orange-color);
	transition: var(--hover-speed);
	color:var(--black-color);
}

.project-background{
	z-index: 1;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	background: var(--cover-bg-color);
	transition: var(--hover-speed);
	opacity: 25%;
}

.header-content{
	position: absolute;
	bottom: 10px;
	margin-left: 10px;
	z-index: 5
}
.header-content.me{
	height: 100%;
	width: 100%;
	bottom: none;
	margin-left: 0px;
}
.header-content.me .fake-btn{
	position: absolute;
	bottom: 0;
	margin: auto;
	left: 50%;
	transform: translateX(-50%);
}
.project-header:hover .fake-btn{
	background-color: var(--oragne-color);
}

.header-content span{
	color: var(--white-color);
}

/*Form album*/
form{
	margin: auto;
	flex-wrap: wrap;
	justify-content: center;

}
table{
	width: 70%;
	margin: auto;
	text-align: center;
}

form .main-btn{
	margin: 35px auto;
}

/* CSS pro Masonry */

.gallery-row {
	margin: 0 -5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.gallery-item {
	margin: 5px;
	flex-grow: 1;
}

.gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Přizpůsobení stylu pro mobilní zařízení */
@media (max-width: 768px) {
	.gallery-row {
		margin: -5px;
	}

	.gallery-item {
		margin: 5px;
	}
}
/*Filtry*/
.filtr-projects{
	margin: 50px  auto;
	text-align: center;
}

/*Project-detail*/
.video-box iframe{
	width: 100%;
	height: 350px;
	margin:10px auto 20px;
	border: none;
}
.video-box{
	padding: 10px;
	width: 100%;
}

.project-detail-info p{
	margin: auto 30px;
}

.fa-tags{
	color: var(--oragne-color);
	margin-left: 10px;
}

.fa-calendar{
	color: var(--oragne-color);
}


@media only screen and (max-width: 720px) {
	/*Homepage grid */
	.grid-homepage{
		display: grid;
		grid-template-columns: repeat(2, 1fr);

		grid-column-gap: 0px;
		grid-row-gap: 0px;
		gap: 10px;
	}
	.item1 { grid-area: 2 / 1 / 3 / 3; }
	.item2 { grid-area: 3 / 1 / 4 / 2; }
	.item3 { grid-area: 4 / 1 / 5 / 2; }
	.item4 { grid-area: 3 / 2 / 5 / 3; }
	.item5 { grid-area: 5 / 1 / 6 / 3; }
	.item6 { grid-area: 6 / 1 / 7 / 3; }

	.homepage-btn{
		width: 100%;
		display: flex;
		justify-content: center;
		grid-area: 7 / 1 / 7 / 3;
	}

	.grid-projects{
		display: block;
		width: 100%;
	}
	.grid-projects .project{
		margin-bottom: 20px;
	}


	.gallery-detail a {
		flex-basis: calc(50% - 5px);
		margin-bottom: 5px;
	}



	.project{
		background-repeat: no-repeat;
		background-size: cover;
		height: 230px;
		transition: var(--hover-speed);
	}


	.mobile-project{
		display: block;
	}

	.desktop-mobil{
		display: none;
	}

	/*Fotky na výšku muí mít vždy jiné rozměry. 330x2+30*/
	.project.portrait{
		height: 470px;
	}

	.filtr-projects{
		margin: 20px auto 20px auto;
	}
	.gallery{
		margin: 20px auto;
		width: 95%;
	}

	.flex-box{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 10px 16px;
		justify-content: center;
	}

	.center-button{
		margin: 0;
	}
}