:root {
	--color-blue-dark-1: #04559e;
	--color-red: #e81d2a;
	--color-blue-light: #68c5ef;
	--color-green: #ffd600;
	--color-green-dark: #bbd807;
		
	--font-color-black: #343434;
	--font-rubik: 'Rubik','Arial', sans-serif;
	--font-nunito: 'Nunito Sans','Arial', sans-serif;
}

.bg-blue-dark-1 {
	background-color: var(--color-blue-dark-1);
}
.bg-red {
	background-color: var(--color-red);
}
.bg-blue-light {
	background: var(--color-blue-light);
}
.bg-green {
	background: var(--color-green);
}
.bg-white {
	background: #FFF;
}
.bg-green-dark {
	background: var(--color-green-dark);
}
.c-blue-dark-1 {
	color: var(--color-blue-dark-1);
}
.c-red {
	color: var(--color-red);
}
.c-black {
	color: var(--font-color-black);
}
	.c-black > a {
		color: var(--font-color-black);
	}

* {
	margin: 0;
	padding: 0;
}


html {
	font-family: var(--font-nunito);
	font-size: 18px;
	line-height: 1.5em;
	color: var(--font-color-black);
	font-weight: 300;
}

html, body {
	height: 100vh;
}

h1, h3 {
	color: var(--color-blue-dark-1);
}

h1 {
	font-size: 2.5rem;
	font-weight: 300;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-family: 'Rubik';
	padding: 0 5%;
}
h2 {
	font-size: 2.1rem;
	font-weight: 300;
	font-family: 'Rubik';
}
h3 {
	font-size: 1.9rem;
	font-weight: 300;
	font-family: 'Rubik';
	padding: 0 5%;
	color: var(--color-red);
	line-height: 2.5rem;
}
h4 {
	font-size: 1.6rem;
	font-weight: 300;
	font-family: 'Rubik';
}
h5 {
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 150%;
}
h6 {
	line-height: 150%;
}

nav {
	box-shadow: none;	
	background: var(--color-blue-light);
	
}
nav, nav .nav-wrapper i, nav .sidenav-trigger i {
	height: 80px;
	line-height: 80px;	
}

nav .nav-wrapper i,  {
	line-height: 80px;

}
nav .sidenav-trigger	 {
	height: 80px;
}

.navbar-fixed {
	z-index: 99999;
	/*background: transparent;
	position: fixed;*/
}

.nav-wrapper, .page-cont, .form-cont{
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;	
}
#page {
	padding: 0 5%;
	margin-left: auto;
	margin-right: auto;	
	padding-bottom: 50px;
}
#main {
	min-height: 800px;	
}

.page-cont {
	width: 95%;
}

nav ul a {
	-webkit-transition: all .5s;
	transition: all .5s;
	font-size: 1.2rem;
	color: var(--color-blue-dark-1);
	display: block;
	padding: 0 25px;
	cursor: pointer;
	font-weight: 500;
	border-bottom: 3px solid transparent;
	font-family: var(--font-rubik);
	height: 80px;
	line-height: 80px;
}
nav ul a:hover {
	border-bottom: 3px solid var(--color-red);
}
nav .brand-logo i, nav .brand-logo [class^="mdi-"], nav .brand-logo [class*="mdi-"], nav .brand-logo i.material-icons {
	margin-right: 15px;
	margin-left: 15px;
}
.nav-wrapper {
	padding: 0 2%;
}
nav .brand-logo {
	top: 0px;
	font-size: 1.2rem;
}

.page-footer li {
	padding: 10px 0;
}

.page-footer li a {
	color: #FFF;
}

.page-footer .footer-copyright {
	background-color: var(--color-red);
}

.parallax-container {
	height: 550px;
}
	.bg-white-opacity, .header-text {
		width: 100%;
		position: absolute;
		height: 130px;
		background: #FFF;
		opacity: .8;
		bottom:0;
		left:0;
		z-index: 99;
	}
	
	.header-text {
		background: transparent;
		z-index: 999;
	}
	.header-text p {
		font-family: var(--font-rubik);
		font-size: 2.5rem;
		text-transform: uppercase;
		line-height: 150px;
		padding: 0 100px;
		color: #000;
		letter-spacing: 10px;
		text-shadow: 1px 2px 3px #808080;
	}
	.bullets-big {
		position: absolute;
		bottom: 105px;
		z-index: 999;
		left: 100px;
	}
	.bullets-big-bottom {
		position: absolute;
		bottom: -25px;
		z-index: 999;
		right: 100px;
	}
	
	.bullets-small {
		position: relative;
		top: -13px;
		padding-left: 400px;
		box-sizing: content-box;		
	}
	
	.bullets-big .bullet, .bullets-big-bottom .bullet {
		width: 50px;
		height: 50px;
		border-radius: 50px;
		float: left;
		margin: 0 5px;
		border: 3px solid #FFF;
	}
	
	.bullets-small .bullet {
		width: 25px;
		height: 25px;
		border-radius: 25px;
		float: left;
		margin: 0 5px;
		border: 2px solid #FFF;
	}
	
	.bullet-check {
		width: 70px;
		height: 70px;
		border-radius: 70px;
		text-align: center;
		display: inline-block;
		color: #FFF;
		margin-bottom: 25px;
	}
		.bullet-check i {
			line-height: 70px;
			font-size: 3rem;
		}
	
	.line-top-blue-light {
		border-top: 10px solid var(--color-blue-light);		
	}
	.line-top-red {
		border-top: 30px solid var(--color-red);		
	}
	.line-top-green {
		border-top: 30px solid var(--color-green);		
	}
	.line-bottom-red {
		border-bottom: 30px solid var(--color-red);		
	}
	.line-bottom-blue-light {
		border-bottom: 30px solid var(--color-blue-light);	
	}
	.line-bottom-green {
		border-bottom: 30px solid var(--color-green);	
	}
	.line-bottom-blue-dark {
		border-bottom: 30px solid var(--color-blue-dark-1);	
	}
	
.card {
	background: #fafafa;
}
.a-as-button {
	display: inline-block;
	padding: 24px 35px;
	font-size: 1.6rem;
	color: var(--color-blue-dark-1);
	border: 3px solid var(--color-blue-dark-1);
	font-family: var(--font-rubik);
	border-radius: 3px;
}

.page-logo-header {
	height: 80px;
	line-height: 80px;
	top: 16px;
}
	.page-logo-header .header-text {
		height: 80px;
		text-align: center;
	}
	
	
	.page-logo-header p {
		font-size: 1.7rem;
		line-height: 80px;
		padding: 0 25px;
		letter-spacing: 5px;
	}
.page-header  h1{
	font-family: var(--font-rubik);
	font-weight: 400;
	margin-top: 2.5rem;
	color: var(--color-blue-dark-1);
	font-size: 1.8rem;
}
.card-program h4 {
	padding: 15px 25px;
	text-align: center;
	margin: 0;
}
.card-program .card-content {
	padding: 24px 0;
}

.program-list div {
 	padding: 15px 25px;
 	border-radius: 15px;
 	position: relative;
 	background: #e0f2f1;
 	margin-bottom: 15px;
 	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.program-list div:hover {
	transform: scale(1.05);

}
.program-list-right div {
	background: #f9fbe7;
}

	.program-list i {
		font-size: 1.5rem;
		color: var(--color-red);
		position: relative;
		top: 5px;
		margin-right: 5px;	
	}
.h3-header, .h3-header-slogan {
	background: var(--color-red);
	color: #FFF;	
	padding: 10px 25px;
	letter-spacing: 10px;
	text-align: center;
	position: relative;
}
	.h3-header-slogan {
		letter-spacing: 1px;
		background: var(--color-blue-dark-1);
		padding: 15px 25px;
		border-radius: 40px;
		font-size: 1.5rem;
	}

	.h3-header div {
		width: 80px;
		height: 80px;
		border-radius: 50px;
		margin: 0;
		border: 3px solid #FFF;
		position: absolute;
		background: var(--color-blue-dark-1);
		top: -10px;
	}

.logo-circle {
	width: 250px;
	height: 250px;
	border-radius: 125px;
	overflow: hidden;
	text-align: center;
}
	.logo-circle a {
		display: inline-block;
	}
	
.card-panel .material-icons-round, #modal-msg .material-icons-round {
	position: relative;
	top: 8px;
	margin-right: 10px;
}

.kandidat .circle {
	max-width: 300px;
	max-height: 300px;
	border-radius: 150px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
	.kand-order {
		background: var(--color-blue-dark-1);
		color: #FFF;
		font-size: 2rem;
		position: absolute;
		top: 0;
		right: 0;
		font-family: var(--font-rubik);
		padding: 15px 25px;
		font-weight: 500;
	}
	.motto p {
		margin-bottom: 0 !important;
		font-weight: 500;
		font-style: italic;
		text-align: center;
	}

#news-box {
	
}	
	#news-box .col {
		padding: 0 25px;
	}
	
	#news-box .card-image {
		height: 240px;
		overflow: hidden;	
	}
	
	#news-box .card-image img:hover {
		opacity: 1;
		transform: scale(1.1);
	}
	
	#news-box img {
		opacity: .9;
	}
	
	#news-box .card {
		/*background: #FFF;*/
	}
	
	#news-box .card-content {
		position: relative;
		top: -25px;
		bottom: 0;
		margin: 0 12px;
		background:#FFF;
		padding: 18px;
		padding-bottom: 10px;
		border-radius: 4px;
		border: 3px solid var(--color-blue-dark-1);
	}
		#news-box .card-content .arrow-up {
			width: 30px;
			height: 30px;
			transform: rotate(45deg);
			background: #FFF;
			position: absolute;
			border-left: 3px solid var(--color-blue-dark-1);
			border-top: 3px solid var(--color-blue-dark-1);
			border-radius: 4px;
			top: -18px;
		}
		
		.btn-large-white {
			border: 3px solid var(--color-blue-dark-1);
			display: inline-block;
			padding: 15px 25px;
			color: var(--color-blue-dark-1);
			font-family: var(--font-rubik);
			font-weight: 500;
			border-radius: 4px;
			font-size: 18px;
			background: var(--color-white);
		}	
	
	#news-box h5 {
		padding: 0;
		font-size: 1.2rem;
		text-transform: uppercase;
		color: var(--color-blue-dark-1);
		font-weight: 500;
		line-height: 1.8rem;
		font-family: var(--font-rubik);
	}
	
	#news-box .notice {
		font-size: 14px;
		font-weight: 400;
		margin-top: 10px;
	}
	
	#news-box a {
		color: var(--font-color-black);
	}
	#news-box p {
		margin-bottom: 5px !important;
	}
	
.bullet-vote {
	background: var(--color-red);
	width: 150px;
	height: 150px;
	z-index: 9999999;
	position: absolute;
	bottom: -150px;
	left: 50%;
    transform: translate(-50%, -50%); /* Posune prvek o polovinu jeho vlastní šířky a výšky zpět na střed */
	border-radius: 75px;
	color: #FFF;
	font-size: 3.5rem;
	line-height: 150px;
	text-align: center;
	font-weight: 700;
	font-family: var(--font-rubik);
}

.bullet-vote-mobile {
	background: var(--color-red);
	width: 75px;
	height: 75px;
	z-index: 9;
	position: absolute;
	left: 50%;
    transform: translate(-50%, -50%); /* Posune prvek o polovinu jeho vlastní šířky a výšky zpět na střed */
	top: 230px;
	border-radius: 75px;
	color: #FFF;
	font-size: 2rem;
	line-height: 75px;
	text-align: center;
	font-weight: 700;
	font-family: var(--font-rubik);
}
.collection {
	border: none;
	padding: 0 10px;
}

.collection a.collection-item {
	color: var(--color-blue-dark-1);
	margin-bottom: 15px;
	/*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);*/
	border: 1px solid #e0e0e0;
}
.main-list .collection-item:hover {
	background: #e3f2fd !important;
}

.collection .collection-item:last-child {
	border-bottom: 1px solid #e0e0e0;
}



/* Flexbox kontejner pro zarovnání kruhu a textu vedle sebe */
.section-row {
    display: flex;
    align-items: flex-start; /* Zarovná obsah k hornímu okraji kruhu */
    gap: 20px; /* Mezera mezi kruhem a textem */
}

/* Definice rozměrů a tvaru kruhu */
.color-circle {
    width: 80px;  /* Šířka kruhu */
    height: 80px; /* Výška kruhu (musí být stejná jako šířka) */
    border-radius: 50%; /* Udělá z čtverce dokonalý kruh */
    flex-shrink: 0; /* Zabrání zmenšování kruhu při menší šířce obrazovky */
}

.main-list {
	margin: 0;
    padding-left: 20px; /* Odsazení pro odrážky */
}
/* Kontejner pro text (zajistí, že nadpis a seznam budou pod sebou) */
.my-card-text {
    display: flex;
    flex-direction: column; /* Klíčové: skládá nadpis a seznam pod sebe */
    flex-grow: 1;
}
.slogan-container {
	margin: 40px;
}

.slogan-container p, .slogan-mobile {
	font-size: 1.4rem;
	font-weight: 600;
}

.slogan-mobile {
	font-size: 1.2rem;
	margin: 0 20px;
}


.main-image {
	line-height: 0;
}
.line-height-0 {
	line-height: 0;
}

.insta {
	width: 32px;
	height: 32px;
}
.insta-blue {
	width: 48px;
}

.hr-line {
	height: 1px;
}
.hr-line-dotted {
	height: 1px;
	border-bottom: 1px dotted var(--font-color-black);
}
#modal-msg {
	z-index: 999999999 !important;
	top: 200px !important;
}

.img-thumb {
	max-width: 50px;
}
.errors li {
	color: var(--color-red);
	font-size: 0.9rem;
}

p {
	margin-bottom: 15px !important;
	line-height: 1.8em;		
}	

.rel {
	position: relative;
}
.row .bc {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.trans {
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.ml-10	{margin-left: 10px;}
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
.mb-0  { margin-bottom: 0; }
.mb-30  { margin-bottom: 30px; }
.pb-50  { padding-bottom: 50px; }
.p-24 	{ padding: 24px;}
.ptb-20 {
	padding: 20px 0;
}

.fs-2rem {
	font-size: 1.5rem;
	font-weight: 500;
}

.clear {
	clear: both;
}

@media only screen and (max-width: 600px)
{
	.page-cont {
		width: 100%;
	}
	#mobile-menu {
		z-index: 99999999;
		top: 80px;
	}
	#mobile-menu li > a {
		font-size: 18px;
		padding: 5px 32px;
		height: auto;		
	}
	#mobile-menu li {
		border-bottom: 1px solid #CCC;
	}
	.a-as-button {
		font-size: 1.4rem;
		padding: 5px 7px;
	}
	.page-logo-header p {
		font-size: 1.5rem;
		letter-spacing: 2px;
		line-height: 90px;
	}
	.bullets-big .bullet, .bullets-big-bottom .bullet {
		width: 30px;
		height: 30px;
		border-radius: 15px;
	}
	.bullets-big-bottom {
		bottom: -10px;
		right: 20px;
	}
	.color-circle {
        width: 55px;
        height: 55px;
    }
    .section-row {
        gap: 12px; /* Zmenšíme i mezeru mezi kruhem a textem */
    }
    .section-row {
        flex-direction: column; /* Skládá prvky pod sebe */
        align-items: center;    /* Zarovná je na střed */
        text-align: left;     /* Zarovná text na střed */
    }
}

@media only screen and (min-width: 993px)
{
	#modal-msg {width: 40%}
}