:root {
	--fialova: #ae2853;
	--piskova: #f6e6d9;
	--oranzova: #e57459;
}


/*=======================================================
			Page Loader
========================================================*/
#loader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255,255,255,1);
	z-index: 999999;
	opacity: 1;
	text-align: center;
}
.loaderContainer {
	position: relative;
}
@-webkit-keyframes loader {
 0% {
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 -ms-transform: translateX(0px);
 -o-transform: translateX(0px);
 transform: translateX(0px);
}
 50% {
 -webkit-transform: translateX(120px);
 -moz-transform: translateX(120px);
 -ms-transform: translateX(120px);
 -o-transform: translateX(120px);
 transform: translateX(120px);
}
}
@keyframes loader {
 0% {
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 -ms-transform: translateX(0px);
 -o-transform: translateX(0px);
 transform: translateX(0px);
}
 50% {
 -webkit-transform: translateX(120px);
 -moz-transform: translateX(120px);
 -ms-transform: translateX(120px);
 -o-transform: translateX(120px);
 transform: translateX(120px);
}
}
#loader .position-center-center {
	padding-top: 20%;
	width: 100%;
}
#loader p {
	padding-top: 100px;
	margin: 20px 0;
}
.loaderContainer .loaderBG {
	background: rgba(0,0,0,0.3);
	width: 10%;
	height: 4px;
	margin: 0 auto;
}
.loaderContainer .loaderCircle {
	background: #fff;
	width: 120px;
	height: 6px;
	border-radius: 0;
	position: absolute;
	top: -1px;
	left: 43%;
	/* calling our animation keyframe */
	-webkit-animation: loader 1000ms infinite ease-in-out;
	-moz-animation: loader 1000ms infinite ease-in-out;
	-ms-animation: loader 1000ms infinite ease-in-out;
	-o-animation: loader 1000ms infinite ease-in-out;
	animation: loader 1000ms infinite ease-in-out;
}

body {  font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 15px;
	background: var(--piskova);
    font-optical-sizing: auto;
    font-weight: <weight>;
	line-height: 23px;
    font-style: normal; overflow-x: hidden;  }

p { line-height: 23px; font-size: 15px; }
section { padding: 0; margin: 0; }


header { position: fixed; background: #F6E6D9; width: 100%; padding-top: 10px; }

.nadpis {
	position: relative;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 60px !important;
	margin-bottom: 2rem;
  }
  
  .nadpis::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -20px; /* Vzdálenost podtržení pod textem */
	width: 164px;
	height: 11px;
	background-image: url('../images/nadpis-vlnovka.svg'); /* Cesta k tvému SVG */
	background-repeat: no-repeat;
	background-size: contain;
  }

#home { padding-top: 80px; height: 600px;
background: url("/images/bg-header.png"); background-size: cover;  }

#home .container { padding-top: 80px; padding-right: 0px; }
#home .row { padding-right: 0px !important; margin-right: 0px;}


#home .claim {
	background: #41909C none repeat scroll 0 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #fff;
display: inline;
line-height: 46px;
margin-bottom: 10px;
border:solid 1px #41909C;
font-size: 42px;
text-transform: uppercase;
font-weight: 900;
}	 

#home .icons {  max-height: 190px !important; padding-right: 0; }

.view-more {  border-radius: 25px; margin-top: 26px;
    background: #ee844f; display: inline-block;
    padding: 10px; width: 140px; text-align: center; color: #fff; text-transform: uppercase; }
.view-more:hover { color: #fff; text-decoration: underline;}    

h1 { display: none; visibility: hidden;}
h2, h3, h4 { font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
a {  color: #000 }
a:hover { color: var(--oranzova) !important; text-decoration: underline; }

	.logo {	display: inline; float: left; padding-left: 20px;  font-size: 1px;}
	.logo a, .logo span { display: block; height: 90px; width: 200px; }
	.logo a {color: #000; position: relative; line-height: 53px; }
	.logo span { position: absolute; top: 0; left: 0; cursor: pointer; display: none; }
	.logo_  { background: url('/images/logo.png') 0 0 no-repeat; background-size: cover; }

nav { margin: 0 auto; max-width: 100%; }
nav ul {  margin: 0 auto; list-style: none; font-size: 15px; padding-top: 0px; padding-left: 30px; }
nav ul li { float: left; padding: 10px; }
nav ul li a {  line-height: 40px; text-decoration: none; color: #000; }
nav ul li ul { display:none; position: absolute; left: 0; top: 35px; z-index: 2; list-style: none; margin: 0; padding: 0; width: 250px; background:  #fff; padding-left: 0px !important;  }
nav ul li ul li a {  text-decoration: none; line-height: 5px !important; }
nav ul li ul li{ list-style: none!important; margin:0px!important; padding: 0 !important; color:#4EA7D2!important; width: 100% !important; line-height: 15px !important; }
nav ul li a.active { color: var(--oranzova); font-weight: 900; }

#about { padding-top: 50px; line-height: 31px; padding-bottom: 50px;}
#about p { line-height: 23px; }
#about { background: url("/images/bg-lista.png"); background-position: bottom; background-repeat: repeat-x; padding-bottom:  100px;}
#about .figure { text-align: center; margin: 0 auto; }
.cleaner { clear: both; }
#article { min-height: 600px; display: block; padding-top: 150px; padding-bottom: 30px; background: url("/images/bg-lista.png");background-position: bottom; background-repeat: repeat-x; padding-bottom:  100px;}

#article h1, #article h2, #article h3, #article h4 { color: #36707C; padding: 0 !important; margin: 0 !important; display: block !important; visibility: visible;letter-spacing: 2px; font-weight: 900;text-transform: uppercase; padding-bottom: 15px !important; padding-top: 15px !important;  }
#article ul { padding-left: 18px; }
#article h1 { color: #57A3B5; font-size: 42px;   }
#article h2 { }
#article h3 { color: #EE844f; font-size: 15px; text-transform: initial; padding-top: 0px !important; padding-bottom: 0px !important; letter-spacing: 0; }

#article .article-title { color: #EE844f; font-size: 20px; }


.homepage-goal { background: #ae2853; color: #fff; text-align: left;}
.homepage-goal .claim { padding: 50px; padding-left: 0;}
.goal-placeholder { position: relative; width: 320px;}
.goal-placeholder img.goal-otvirak { z-index: 20; position: absolute; height: 320px; top: 30px; }
.goal-placeholder img.goal-star { position: absolute; top: 170px; right: 0; z-index: 21; }
.homepage-goal p { font-size: 24px; font-weight: regular; line-height: 150%;}

.homepage-news { background: var(--piskova); color: #000; text-align: left;}

.news-image { width: 100%;  background-position: center; }
.news-image img { width: 100%; background-size: cover; background-position: center; }

.homepage-news .nadpis { color: #000;}
.goal-placeholder { position: relative; width: 320px;}
.goal-placeholder img.goal-otvirak { z-index: 20; position: absolute; height: 320px; top: 30px; }
.goal-placeholder img.goal-star { position: absolute; top: 170px; right: 0; z-index: 21; }
.homepage-goal p { font-size: 24px; font-weight: regular; line-height: 150%;}

.homepage-about { background: #fff; color: #000; text-align: left;}
.homepage-about .nadpis { color: #000;}

#links h2 { padding: 40px; margin: 40px; text-transform: uppercase; }
#links ul { list-style-image: url('/images/list-custom-sipka.png'); padding: 40px;}


#article h2 { padding-left: 50px; padding-right: 50px;}

   .section-title {
      font-weight: 700;
      margin-bottom: 1rem;
    }
    .btn-orange {
      background-color: #f7915c;
      color: white;
      border: none;
    }
    .icon-download {
      font-size: 2rem;
      color: #aa1e50;
    }
    .circle-img {
      border-radius: 50%;
      width: 100%;
      max-width: 250px;
      height: auto;
      object-fit: cover;
    }
    .video-thumbnail {
      position: relative;
    }
    .video-thumbnail::after {
      content: '▶';
      font-size: 3rem;
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-shadow: 0 0 10px black;
    }
    .wave-footer {
      background-color: #aa1e50;
      color: white;
    }
	
.linka { background: url("/images/bg-lista.png"); background-position: bottom; background-repeat: repeat-x; padding-bottom:  100px; }

header { z-index: 10;  }
header nav {  margin: 0 auto; top: 0px;}
header .socials { position:  absolute; right: 50px; top: 20px;}
header .socials a { padding-left: 10px; color: #000; text-decoration: none; }
header .socials .kE { padding-right: 40px; }
header .guestbook { position: absolute; right: -60px; top: 300px; transform: rotate(270deg); background: #002696; line-height: 40px; width: 160px; color: #fff; }
header .guestbook a { color: #fff;}

.footer-getin-touch { background: var(--fialova); }

footer { background: var(--piskova);  color: #000; padding-top: 50px; padding-bottom: 50px; }
footer h4 { font-size: 24px; color: #000; letter-spacing: normal; font-weight: 600; padding: 0 !important; padding: 0 !important; margin: 0 !important; line-height: normal !important; padding-bottom: 10px !important;  };
footer p { font-size: 12px; line-height: 19px; padding: 0 !important; margin: 0 !important; }
footer .section-title { padding-top: 60px; padding-bottom: 60px; text-transform: none !important; }
footer .section-title h2 { text-transform: none !important; }
footer .row { padding-bottom: 20px;}
footer .socialButton { padding-bottom: 15px; }
footer .socials { font-size: 7px; line-height: 8px; text-align: center; padding-top: 50px;}
footer li { line-height: 37px; font-size: 21px; font-weight: normal;}
#debug { width: 100%; height: 100px; bottom: 0; right: 0; z-index: 20; background: #000; color: #fff; font-size: 9pt; overflow: auto;  }

a.link-orange { color: #EE844f; font-weight: 900; } 
a.link-black { color: #000; font-weight: 900;}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
	.container { width: 100% !important;}

}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
	.container { width: 100% !important;}
    }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
	.container { width: 100% !important;}
    }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
	.container { width: 100% !important;}
    }

@media (max-width: 320px) {
	.container { width: 100%; }     
}

@media (max-width: 575.98px) {

.container { width: 100% !important;}
.row { margin-left: 10px; margin-right: 10px;} 
nav ul { padding: 0px;}
nav ul li { padding: 2px; padding-left: 30px; float: none; background: #fff;}
nav { position: absolute; right: 0px; top: 10px; width: 100%;}
.logo a, .logo span { display: block; height: 70px; width: 200px; }
.showhide { text-align: right; background: none !important; height: 60px; padding-right: 10px; padding-top: 10px; position: absolute; right: 0; }
header .row { padding: 0 !important;}
header .container { padding: 0px !important;}
.icons img { display: none;}

#main-objectives { background: url("/images/bg-structure.png"); background-repeat: repeat-y; background-position: left;}
#main-objectives .container { padding: 0px; }
#main-objectives .objectives { margin-bottom: 10px;}
#main-objectives .row { width: 100% !important; padding: 0; padding-left: 0 !important; margin-left: 0 !important; }
#main-objectives .title { background-size: cover; min-height: 100px;}
#main-objectives .title h2 { padding: 10px; margin: 10px; padding-top: 10px; text-transform: uppercase; width: 100%; }
#main-objectives ul { line-height: 31px; padding-top: 50px; padding-bottom: 50px;}

#partners { display: none;}

#article h3 { line-height: 20px !important; padding-bottom: 10px !important;}
footer .socialButton  { width: 20% !important;}
footer a { color: #fff !important;}
#structure img { max-width: 90%; margin: 0 auto;
}
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { 
	.container { width: 100% !important;}
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 
	.container { width: 100% !important;}

}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { 
	.container { width: 100% !important;}
}