/*=======================================================
			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 styles
========================================================*/


body {  font-family: "DM Sans", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #808285;
    font-optical-sizing: auto;
    font-weight: <weight>;
	line-height: 23px;
    font-style: normal; overflow-x: hidden; background: url('/images/background.png') no-repeat; background-position: top 150px left;  }

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

.container { width: 927px;}
.row { }

header { position: fixed; background: #fff; width: 100%; height: 70px;}
header .container { background: #0072bc; padding: 0;}
header .col-md-3, header .col-md-9 { padding: 0; margin: 0;}

.table { color: #808285 !important; }

h1 { display: none; visibility: hidden;}
h2, h3, h4 { color: #0072bc; font-weight: 400; font-size: 20px; display: block; }

h3 { color: #808285;}
h3 a { color: #808285; text-decoration: none; }
a {  color: #0072bc; }
a:hover { color: #ffd400 !important; text-decoration: none; }

.logo {	display: inline; float: left; font-size: 1px;}
.logo a, .logo span { display: block; width: 200px; }
.logo a {color: #000; position: relative; line-height: 53px; }
.logo span { position: absolute; top: 0; left: 0; cursor: pointer; display: none; }

nav { margin: 0 auto; max-width: 100%; }
nav ul {  margin: 0 auto; list-style: none; font-size: 15px; padding-top: 5px; padding-left: 0px; }
nav ul li { float: left; padding: 5px; padding-left: 0px; text-transform: lowercase;}
nav ul li a {  line-height: 40px; text-decoration: none; color: #fff; }
nav ul li a:hover { color: #57A3B5 !important; }
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: #ffd400; }
.mnOddelovac { padding: 15px; padding-left: 12px; color: #fff;}

#slideshow .container { padding: 0; padding-top: 65px; }
.gallery { display: flex; overflow: hidden; width: 100%; position: relative; }
.image-container { position: relative; flex: 0 0 100%; transition: transform 1s ease-in-out; display: flex; justify-content: center; align-items: center; }
.image-container img { width: 100%; height: auto; }
.caption { position: absolute; bottom: 20px; right: 20px; width: 40%; color: #0072bc; background-color: rgba(237, 239, 235, 0.708); padding: 20px; font-weight: 200; font-size: 20px; letter-spacing: 2px; }


section { padding-top: 5px; padding-bottom: 10px;  }
section h2 { padding-top: 20px; padding-bottom: 20px;}
#homepage-profil .container { background: #edeeee; color: #808285; padding: 20px; }

#homepage-bannery { background: #fff; padding-top: 0px;  }
#homepage-bannery .col-md-4 .row { padding: 10px; height: 130px;}
#homepage-bannery .vyroci30 .claim30 { display: inline-block; width: 30% !important; padding-top: 20px; height: 130px; }
#homepage-bannery .vyroci30 .claim30 img { height: 100px; }
#homepage-bannery .vyroci30 .claim { display: inline-block; padding: 5px; font-size: 12px; color: #0072bc; text-align: left; width: 65%; float: right; }
#homepage-bannery .vyroci30 .claim h3 { font-size: 20px; color: #0072bc; line-height: 21px; padding-top: 30px; padding-left: 15px; }
#homepage-bannery .nase-uspechy { background: #ffd400;}
#homepage-bannery .nase-uspechy h3 { font-size: 20px; width: 70%; display: inline-block; padding-top: 40px; padding-left: 30px; }
#homepage-bannery .nase-uspechy a { color: #0072bc;}
#homepage-bannery .certifikace { background: #0071bc; color: #fff;}
#homepage-bannery .certifikace h3 { color: #fff; font-size: 20px; width: 70%; display: inline-block; padding-top: 40px; padding-left: 30px;}
#homepage-bannery .certifikace a { color: #fff;}
#homepage-bannery .certifikace a:hover { color: #ffd400 !important;}
#homepage-bannery .certifikace img { height: 53px; padding-top: 10px; margin-bottom: 0px;  }

.modra { background: #0072bc; color: #fff;  }


#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 { display: block; background-position: bottom; background-repeat: repeat-x; padding-top: 75px;}

#article ul { padding-left: 18px; }
#article h1 { color: #0072bc; font-size: 42px;   }
#article h3 { color: #0072bc; font-size: 15px; text-transform: initial; padding-top: 0px !important; padding-bottom: 0px !important; letter-spacing: 0; }
#article .article-title { font-size: 20px; }


#homepage-reference h2 a { padding-left: 20px; color: #808285; font-size: 20px; }
#reference { padding-top: 5px;}
#reference h3.homepage-panel a { color: #fff !important; list-style: circle; }
#reference h3, #reference h3 a, #reference h2 { padding-top: 20px; padding-bottom: 20px; line-height: normal; letter-spacing: normal; }
#reference h3, #homepage-reference h3 a, #homepage-reference h2, #reference-detail h3, .reference-random h3 { color: #808285; font-size: 14px; padding-top: 20px; padding-bottom: 20px; line-height: normal; font-size: 16px; letter-spacing: normal; }
#homepage-reference h3 { padding-top: 10px; padding-bottom: 10px;}

.reference-vice { background: #f1f1f2; color: #808285; margin-top: 30px; margin-bottom: 30px; padding-top: 10px; padding-bottom: 10px; }

#reference-detail { padding-top: 75px;}
#reference-detail .obrazek img { width: 100%;}
#reference-detail .nahledy img { width: 100%; height: 100%; padding: 10px; }
#reference .obrazek img { width: 100%;}
h3.homepage-panel { background: #0072bc; color: #fff; padding: 10px; font-size: 15px; list-style: circle;text-indent: -18px; padding-left: 30px; }
h3.homepage-panel::before {
    content: "• ";  /* Přidání odrážky */
    color: white;   /* Barva odrážky */
    font-size: 1.2em; /* Velikost */
    margin-right: 5px; /* Mezera mezi odrážkou a textem */
}

h3.reference-panel { background: #ccc; color: #fff; padding: 10px; font-size: 15px; list-style: circle;text-indent: -18px; padding-left: 30px; margin-bottom: 20px; }
h3.reference-panel::before {
    content: "  ";  /* Přidání odrážky */
    color: white;   /* Barva odrážky */
    font-size: 1.2em; /* Velikost */
    margin-right: 5px; /* Mezera mezi odrážkou a textem */
}

.reference-random h2 { padding-top: 20px; padding-bottom: 20px;}
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 { background: #0072bc;  color: #fff; padding-top: 50px; padding-bottom: 50px; }
footer h2 { color: #fff; font-size: 21px; text-transform: uppercase;}
footer h3 { color: #fff; font-size: 12px; 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 form input { background: none; border: 0; border-bottom: 1px #fff solid; color: #fff;}
footer form textarea { background: none; border: 1px #fff solid; width: 100%; height: 200px; color: #fff; }
footer .socialButton { padding-bottom: 15px; }
footer .socials { font-size: 7px; line-height: 8px; text-align: center; padding-top: 50px;}
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: #ffd400 !important;}
#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 { }
.certifikace img { display: none;} 
.loaderContainer img { width: 75%;}
.fa-bars { color: #ffd400; font-size: 30px; padding-top: 10px; padding-right: 10px; }
nav ul { padding: 0px;}
nav ul li { padding: 2px; padding-top: 0px; padding-left: 30px; float: none; background: #ffd400;}
nav ul li a { color: #0072bc;}
span.mnOddelovac { display: none;}
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;}
}