@font-face {
font-family: 'BOLDE';
font-style: normal;
font-weight: normal;
src: local('BOLDE'), url('../font/BOLDE.woff') format('woff'); }

body {
padding: 0;
line-height: 1.7em;
margin: 0;
text-aling: center;
font-family: "Open sans"; }

.page {
max-width: 1200px;
margin: 0 auto; }

#header {
min-height: 3em; }

.content .page  {
padding: 2em 2em; }

.nezaplaceno {
background-color: pink !important; }

.seznam {
border-collapse: collapse;
width: 100%; }

.seznam tr:nth-child(odd) {
background-color: #efefef; }

.seznam td,.seznam th {
text-align: left;
padding: 0.3em 0.5em; }

.chyba {
color: red; }

.doprava {
text-align: right !important; }

.doleva {
text-align: left !important; }

.nahore {
top: 0% }

.dole {
bottom: 0% }

.vlevo {
left: 0% }

.vpravo {
right: 0% }

/* welcome grafika */
#logos {
background-color: white;
text-align: center; }

#logos > img {
margin-bottom: 1em;
max-width: 70%;
height: auto; }

#sublogos img {
margin: 0 25%;
max-width: 50%;
height: auto; }

#sublogos > div {
flex: 1 1 0; }

#images {
position: relative;
z-index: 10;
overflow: hidden;
aspect-ratio: 3/2; }

#images-bg {
height: 100%;
z-index: 3000;
position: relative;
background-image: url('../img/header.png');
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: auto 100%;
}


#images img.active{
    display:block;
}

#images img {
position: absolute;
display:none;
top:0;
left:0;
z-index: 860;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover; }

#site-navigation {
position: relative; }

#facebook {
position: absolute;
z-index: 1500;  }

.ikony {
z-index: 1500;
position: relative;
float: left;
margin: 7px 0 0 7px;
height: 30px;
width: auto; }


/* counter uvod */
#counter {
background-color: #efefef;
text-align: center;  }

#counter .page {
margin: 0 auto 2em auto; }

.sub {
float: left;
box-sizing: border-box;
text-align: center;
color: black;
padding: 2em 0;
width: 50%; }

.sub span {
color: #ffbd00;
font-family: Bolde;
font-weight: 900;
padding: 15px;
border-bottom: 1px solid #aaa;
margin-bottom: 15px !important;
font-size: 6.0em; }

.last{
border-right: none; }

/* clanky */
#articles .page {
padding: 1em; }

.clanek {
background-image: url('../img/clanek5.png');
background-repeat: repeat-y;
background-size: auto 125%;
margin-bottom: 1em; }

.clanek_obr {
display: none; }

.clanek a {
text-decoration: none;
font-weight: bold;
color: black; }

.clanek a:hover {
text-decoration: underline; }

.clanek p {
padding: 1em; }

.clanek_obr img {
position: absolute;
top: 50%;                        
left: 50%;
transform: translate(-50%, -50%); }

.eshop_obr {
overflow: hidden;
aspect-ratio: 1/1;
width: 100%; }

.eshop_obr img {
transition-duration: 500ms;
object-position: 50% 50%;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover; }

.eshop_obr img:hover {
opacity: 0.8; }

.vyska {
width: 125% !important;
height: auto; }

.sirka {
height: 125% !important;
width: auto; }

/* home - akce */
#akce .page {
padding: 1em; }

.akce {
padding: 1.5em 1em;
color: #447;
background-image: url('../img/clanek.png');
background-repeat: repeat;
background-size: auto 150px;
margin-bottom: 1em; }

.akce2 {
padding: 1.5em 1em;
color: #447;
background-repeat: repeat;
background-size: auto 150%;
margin-bottom: 1em;
background-image: url('../img/clanek5.png'); }

.akce a, .akce2 a {
display: inline-block;
margin-bottom: 5px;
text-decoration: none;
color: black;
font-weight: bold; }

.akce i,.akce2 i {
font-size: 1.3em;
display: inline-block;
margin-right: 1em; }


/* vybor */
.vybor {
padding: 1em;
margin-bottom: 1em;
background-color: #efefef;  }

.vybor a {
text-decoration: none;
color: black; }

.vybor a:hover {
text-decoration: underline; }

.vybor_foto {
float: right;
max-width: 10%;
height: auto;
margin: 0 0 1em 1em; }


/* sponzori */
.sponzori {
text-align: center;
width: 50%;
float: left; }

.sponzori img {
margin: 0.5em auto;
max-width: 80%;
height: auto; }

/* partneri */
.partneri {
text-align: center;
width: 50%;
float: left; }

.partneri img {
box-shadow: 0px 0px 7px 7px rgba(0,0,0,0.3);
margin: 0.5em auto 1em auto;
max-width: 80%;
height: auto; }


.clear {
clear: both; }

/* dobrovolnici a fotogalerie */
.dobrovolnik {
height: 10em;
background-color: #efefef;
background-image: url('../img/clanek3.png');
background-repeat: no-repeat;
background-size: auto 100%;
margin-bottom: 1em; }

.galerie {
height: 9em;
background-color: #efefef;
margin-bottom: 1em; }


.dobrovolnik_obr, .galerie_obr {
display: inline-block;
height: 100%;
float: left;
width: 20%;
margin-right: 1em;
position: relative;
overflow: hidden; }

.dobrovolnik_obr img, .galerie_obr img {
position: absolute;
background-color: silver;
overflow: hidden; }


.dobrovolnik_obr img.stred {
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }

.dobrovolnik_obr img.nahore {
top: 0%;
left: 50%;
transform: translate(-50%, 0%); }


.dobrovolnik p, .galerie p {
margin: 0;
padding: 0.5em 1em; }

/* galerie */
.fotky {
display: block;
box-sizing: border-box;
float: left;
text-align: center;
border: 1px solid transparent;
width: 50%;
padding-top: 50%;
overflow: hidden !important;
position: relative; }

.fotky2 {
display: block;
box-sizing: border-box;
float: left;
text-align: center;
border: 1px solid transparent;
text-decoration: none !important;
width: 50%;
padding-top: 50%;
overflow: hidden !important;
position: relative; }


.fotky:hover {
filter:opacity(70%);
grayscale(100%); }

.fotky img, .fotky2 img {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);  }


.fotky2 span {
text-align: left;
border: 0;
display: block;
color: black;
text-decoration: none !important;
width: 100%;
padding: 0 1em;
background-color: rgba(196,196,196,0.7);
height: 2em;
line-height: 2em;
overflow: hidden;
font-weight: bold;
position: relative;
z-index: 1750; }

.fotky2:hover span {
color: white;
background-color: rgba(128,128,128,0.8); }

.w75 {
width: 75px; }

.w120 {
width: 120px; }

.content label {
display: inline-block;
margin: 0 5px 3px 0;
padding: 5px;
width: 150px;
background-color: #efefef; }

label.povinne {
font-weight: bold; }

.tlacitko {
background-color: #00b9f2;
color: white !important;
font-weight: bold;
border: 1px solid #00b9f2;
font-size: 14px;
padding: 1em 1em;
padding: 0.5em 1em;
margin-top: 1em;
margin-right: 5px;
text-decoration: none;
display: inline-block; }

.tlacitko:hover {
text-decoration: none !important;
border: 1px solid grey;
background-color: grey; }

.tlacitko_modre {
border: 1px solid #00b0e9;
background-color: #00b0e9 !important;
color: white; }

.tlacitko_modre:hover {
background-color: #0090b9 !important; }

.tlacitko_ruzove {
background-color: #fc78b9 !important;
color: white; }

.tlacitko_ruzove:hover {
background-color: #dc5899 !important; }

.nobg {
background: none !important; }

.legenda {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid black; }

.prihlaseny {
background-color: #f4d03f !important; }

.modra {
background-color: #50aff4 !important; }

.collapsible {
cursor: pointer; }

.ccontent {
max-height: 0;
text-align: justify;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-weight: normal; }

#minilogo {
display: none; }

#dobrovolnikem, #prispevek {
background-color: #00b0e9;
color: white; }

#dobrovolnikem .page, #prispevek .page {
padding: 2em 2em; }

#dobrovolnikem img {
margin: 0 auto;
max-width: 50%;
height: auto; }

#dobrovolnikem a, #prispevek a {
border: 1px solid white;
color: #00b0e9;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
background-color: white;
font-size: 0.9em; }

#dobrovolnikem a:hover {
background-color: #00b0e9;
color: white; }

#prispevek .page {
text-align: left; }

#ohafikovi .page {
padding: 2em 2em; }

#ohafikovi .page #info {
padding-bottom: 2em; }

#info2 div {
height: 2em;
overflow: hidden;
line-height: 2em; }

#info2 img {
max-height: 1.5em;
position: relative;
margin-right: 0.5em;
top: 7px;
width: auto; }

#reference  {
background-color: #efefef; }

#reference .page {
margin: 2em auto; }

#footer {
margin-top: 1em;
background-image: url('../img/paticka-mobil.jpg');
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: cover;
min-height: 10em; }

#footer_contact {
width: 450px;
float: right;
min-height: 17em;
padding-top: 0em;
background-image: url('../img/paticka.png');
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 90% auto; }

#footer_contact div {
height: 1.7em;
font-size: 0.9em;
line-height: 1.7em;
max-width: 340px;
margin-right: 20%;
white-space: nowrap;
margin-left: 23%; }

#footer_contact div:first-child {
white-space: normal;
height: auto; }

#footer_contact div a {
color: black;
text-decoration: none; }

#footer_contact div img {
height: 1.3em;
position: relative;
top: 2px;
margin-right: 0.6em;
float: left;
width: auto; }

#copyright {
text-align: center;
padding: 2em; }

.sipka_nadpis {
position: absolute;
height: 1.4em;
margin-left: 10px;
width: auto;
top: 2px; }

#images2 .page {
text-align: center; }

#images2 img {
margin: 1em auto;
max-width: 40%;
height: auto; }

h1 {
position: relative; }


textarea {
min-width: 75%; }

.submit {
background-color: #00b0e9 !important;
border: 1px solid #00b0e9;
color: white;
font-size: 14px;
padding: 0.9em 1em;
margin-top: 1em;
margin-right: 5px;
text-decoration: none;
display: inline-block; }

.delsi {
min-width: 50%; }

.blok_chyba {
margin-bottom: 2em;
background-color: pink;
padding: 1em; }

#vyroci {
width: 100%;
height: auto; }

#blok_vyroci {
position: relative; }

#vyroci_odkaz {
max-width: 15%;
height: auto;
position: absolute;
top: 40%;
left: 50%;
filter: brightness(90%);
transform: translate(-50%, -50%);
z-index: 500; }

#vyroci_odkaz:hover {
filter: brightness(100%); }

#blok_vyroci p {
text-align: center;
font-size: 0.8em;
margin-top: -1em;
color: grey; }

.prehrat {
background-image: url('../img/play.png');
background-repeat: no-repeat;
background-position: 0% 50%;
background-size: auto 100%;
padding-left: 60px;
}

#reference .page {
padding: 2em; }

/* eshop detail */
#eblok {
background-color: #efefef;
padding: 2em 1em; }

#ecena {
color: black;
font-size: 1.4em;
font-weight: bold;}

#epocet {
margin-right: 1em;
background-color: white;
border: 1px solid black;
border-radius: 0;
font-size: 1em;
padding: 0.5em; }

#ekoupit {
background-color: #00b0e9;
border: 1px solid  #00b0e9;
color: #fff;
border-radius: 0;
font-size: 1em;
margin-top: 1em;
padding: 0.5em 1em; }

#ekoupit:hover {
background-color: #00a0d9;
border: 1px solid #00a0d9;
cursor: pointer; }


#efotky > div {
overflow: hidden;
max-width: 49%;
float: left;
aspect-ratio: 1/1; }

#efotky div img {
border: 3px solid white;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover; }

.mkosik {
position: relative; }


.mkosik span {
background-color: red;
color: white;
font-size: 0.7em;
font-weight: bold;
border-radius: 50%;
width: 15px;
height: 15px;
line-height: 15px;
aspect-ratio: 1/1;
text-align: center;
position: absolute; }

#ekosik td {
padding: 1em; }

.enahled {
display: none;
max-width: 15%;
aspect-ratio: 1/1; }

#ekosik .enahled img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover; }

#ekosik td {
vertical-align: middle; }
 
.mensi {
font-size: 0.8em;
color: grey; }

.hledani tr td:first-child {
min-width: 40%; }

#li_kosik {
margin-right: 20px; }

.collaps_button {
margin: 1em 0 0.5em 0; }

.collaps_button:hover {
cursor: pointer; }

.collaps_content {
display: none; }

#dotaznik {
font-size: 0.9em; }

#dotaznik input,
#dotaznik textarea {
padding: 5px 10px; }

.otazka {
margin-bottom: 1em; }

/* prispevky */
.prispevek {
text-align: center; }

.prispevek img {
max-width: 90%;
height: auto;
margin: 0 5% 1em 5%; }

@media only screen and (min-width: 700px) {


    #sublogos {
    align-items: center;
    display: flex; }

    #pada {
    max-height: 100px; }

    #sublogos img {
    margin: 0 10%;
    max-width: 70%; }

    #hledat {
    height: 1.2em;
    width: auto; }

    #ekosik td:first-child {
    display: flex;
    align-items: center; }

    .enahled {
    margin-right: 1em;
    display: block; }

    #edata {
    width: 50%;
    float: left; }
    
    #efotky {
    box-sizing: border-box;
    padding: 0 3em; 
    float: right;
    width: 50%; }

    .sub {
    width: 25%; }

    .clanek {
    height: 10em; }

    .clanek_obr {
    display: block; }

    .eshop_obr {
    max-width: 23%;
    margin-right: 1em;
    float: left;
    height: 100%; }

    .container {
    padding-bottom: 33.333333%;
    width: 33.333333%; }

    .dobrovolnik {
    width: 50%;
    float: left; }

    .dobrovolnik_obr {
    width: 20%; }

    .sponzori {
    width: 25%; }

    .partneri {
    width: 25%; }

    .fotky {
    width: 33.33333%;
    padding-top: 33.3333%; }

    .fotky2 {
    width: 33.333333%;
    padding-top: 33.333333%; }
    
    #dobrovolnikem .page {
    background-image: url('../img/hafik-banner.png');
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: auto 60%;
    text-align: left; }
    
    #dobrovolnikem p, #dobrovolnikem h1 {
    max-width: 70%; } 
    
    #dobrovolnikem img {
    display: none;
    max-width: 20%;
    float: right;
    margin: 2em 0 1em 1em; }

    .clanek_obr {
    display: inline-block;
    height: 100%;
    float: left;
    width: 20%;
    margin-right: 1em;
    position: relative;
    overflow: hidden; }

    .akce div, .akce2 div  {
    display: inline-block;
    margin-right: 3em; }
}


@media only screen and (min-width: 1000px) {
    #header {
        background-color: #efefef;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 920;
    }

    #header .page {
        background-color: #efefef; }

    .scrollheader {
        box-shadow: 5px 5px 10px #777;
    }
    
    #counter {
    margin-top: -30px; }

    #counter .page {
    margin: 2em auto; }

    .icony {
    margin: 12px 0 0 12px; }

    .container {
    padding-bottom: 25%;
    width: 25%; }

    .sponzori {
    width: 20%; }

    .partneri {
    width: 25%; }


    .fotky {
    width: 20%;
    padding-top: 20%; }

    .fotky2 {
    width: 25%;
    padding-top: 25%; }

    #dobrovolnikem .page {
    padding: 3em 1em; }

    #info, #info2 {
    box-sizing: border-box;
    width: 50%;
    float: left; }
    
    #info {
    border-right: 2px solid #ddd;
    padding-right: 2em; }

    #info2 {
    padding-top: 1em;
    padding-left: 2em; }

    #footer {
    background-image: url('../img/paticka.jpg'); }

    #footer_contact {
    padding-top: 1em;
    font-size: 1.2em;
    margin-bottom: 50px;
    background-size: auto 100%;
    width: 50%; }

    #footer_contact div {
    margin-left: 22%;
    margin-bottom: 0.5em; }

    #blok_vyroci p {
    top: 50%;
    margin-top: -3em; }

    .eshop_obr {
    width: 20%; }

    .e50 {
    width: 50%;
    float: left;
    box-sizing: border-box; }

    #graphic {
    overflow: hidden;
    align-items: center;
    display: flex; }

    #logos {
    width: 25%; }

    #images {
    aspect-ratio: 3/1.4;
    width: 75%; }

    #sublogos {
    display: block; }

    #pada {
    max-height: 110px; }

    #images-bg {
    background-position: 0% 0%;
    background-size: auto 100%; }


    .prispevky {
    display: flex;
    align-content: center;
    text-align: center; }

    .prispevek {
    }
}


.center {
text-align: center; }

.etlacitko {
display: inline-block;
padding: 1em 2em;
font-size: 1.2em;
text-decoration: none;
font-weight: bold;
color: #333;
background-repeat: repeat;
background-size: auto 150%;
margin: 5px;
background-image: url('../img/clanek5.png'); }

.etlacitko_aktivni,
.etlacitko:hover {
  filter: brightness(85%);
}

#iframe_container {
display: none;
  min-height: 900px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 100%; }


#balikovna_iframe {
position: fixed;
width: 100%;
height: 100%; }