@charset "utf-8";
.w3-content{max-width:1240px !important;padding:5px;}
*::selection{background-color:transparent;}
ul{list-style:none;}
.no-js{text-align:center;border-radius:5px;}
p{text-align:justify;}

header{margin-top:30px}
.logo{width:120px;height:100px;border-right: 1px solid lightgray;background-image:url('../img/logo.png');background-repeat:no-repeat;}
header > .w3-row > .w3-rest{padding-left:25px;}
header h1, header h2{margin:0;font-weight:bolder;}
/* navigace */
nav{margin:15px 0;text-align:right;border-bottom:1px solid lightgray;height:30px;padding-bottom:5px}
nav span{width:25px;height:25px;display:inline-block;}
span.help{background-image:url('../img/help.png')}
span.home{background-image:url('../img/home.png')}
/* obsah */
div.grid{padding:5px;}
.desc > .obal{position:relative;display:block;width:100%;height:100%;border-radius:10px;}
.desc > .obal > div.ikony{padding:5px;}
.desc > .obal > div.ikony a{float: right;margin: 0 3px;}
.desc > .obal > div.ikony abbr{float:left;}
.desc > .obal > div.info{position:absolute;padding:10px;bottom:0px;}
.desc > .obal > div.info h2{margin:0;font-weight:bolder;}
.desc > .obal > div.info p{margin:0;font-size:.75em;text-align:justify;font-style:italic;}
.desc > .obal > div.ikony button{float: right;padding: 0;margin: 0 3px;border: none;outline: none;background: transparent;cursor: pointer;}
/*barvy*/
main div.w3-row:nth-child(3n+1) .w3-col:nth-child(1) .desc > .obal{background-color:#84bed6;}
main div.w3-row:nth-child(3n+1) .w3-col:nth-child(2) .desc > .obal{background-color:#f0c24b;} 
main div.w3-row:nth-child(3n+2) .w3-col:nth-child(1) .desc > .obal{background-color:#ea7066;}    
main div.w3-row:nth-child(3n+2) .w3-col:nth-child(2) .desc > .obal{background-color:#a597e7;}  
main div.w3-row:nth-child(3n+3) .w3-col:nth-child(1) .desc > .obal{background-color:#b5d56a;}    
main div.w3-row:nth-child(3n+3) .w3-col:nth-child(2) .desc > .obal{background-color:#cc9966;}
/* obrazky */
div.w3-col .grid .img{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius:10px;
    display:block;
    height:100%;   
}
.img.lumo{background-image: url('../img/pr/luminografie.png');}
.img.ostro{background-image: url('../img/pr/ostrost.png');}
.img.rekl{background-image: url('../img/pr/rek_pr.png');}
.img.til{background-image: url('../img/pr/til-shift.png');}
.img.kalen{background-image: url('../img/pr/kalendar.png');border:1px solid Gray;}
.img.komix{background-image: url('../img/pr/komix.png');}
.img.vyber{background-image: url('../img/pr/vyber.jpg');}

.FAQ .w3-half{line-height:1.9em;}
.FAQ .w3-half:nth-child(odd){padding-right:10px;}
.FAQ .w3-half:nth-child(even){padding-left:10px;}
sup{cursor:pointer;}

/* paticka */
body > footer{margin-top:30px;border-top:2px solid lightgray;display:flex;align-items: center; justify-content: space-around;/*background:#efefef;*/}
#loga img{max-height:85px;}
/*
#loga img{max-height:85px;}
#loga img.DiGr{max-height:40px;}
*/

/* title */
abbr > a{text-decoration:none;}
abbr > a > img{margin-right:3px;}
abbr > a:active:after, abbr > a:focus:after, p > abbr > a:active:after, p > abbr > a:focus:after{ 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+1,e4e5f0+100 */
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 1%, rgba(228,229,240,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 1%,rgba(228,229,240,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 1%,rgba(228,229,240,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e4e5f0',GradientType=0 ); /* IE6-9 */       
    border-radius:3px;
    font-size:.75em;
    border: 1px gray;
    content: attr(title);
    padding: .25em;
     white-space:nowrap;
}
p > abbr > a{position:relative;}
p > abbr > a:after {
        bottom: 5%;
        color: rgb(0,0,0);
        content: "?";
        font-size: 75%;
        left: 100%;
        margin: -.5em;
        padding: .5em;
        position: absolute;
}

p > abbr > sup:active:after, p > abbr > sup:focus:after{
    white-space:nowrap;
    position:absolute;
    font-size:1em;
}

/* 404 */
.w3-third.v404{text-align:center;}
.i404 h1, .v404 h2{font-size: 5em;font-weight: bold !important;}
ul li a{font-weight: bolder;color: #8fbe22;}

/* blink */
.warning {
  animation: blinker 1s linear infinite;
  color:red;
  font-weight:bold;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* modal */
#close{border-radius: 0 5px;font-weight: bold;}
.w3-modal-content{border-radius:5px;}
.w3-modal-content > footer{padding: 10px 0;text-align: center;}
.w3-modal-content button{border: 2px solid;border-radius: 5px;background:transparent;font-weight: bold;cursor: pointer;outline:none;}
/* barvy tlacitek a zavirani */ 
button.inp_0,button.inp_4{color: #84bed6;border-color:#84bed6;}
button.inp_0:hover,button.inp_4:hover{color:white;background:#84bed6;}
button.inp_1{color: #f0c24b;border-color:#f0c24b;}
button.inp_1:hover{color:white;background:#f0c24b;}
button.inp_2{color: #ea7066;border-color:#ea7066;}
button.inp_2:hover{color:white;background:#ea7066;}
button.inp_3{color: #a597e7;border-color:#a597e7;}
button.inp_3:hover{color:white;background:#a597e7;} 


span.zav_0,span.zav_4{background:#84bed6;}
span.zav_1{background:#f0c24b;}
span.zav_2{background:#ea7066;}
span.zav_3{background:#a597e7;}

label.ok{color:green;}
label.nok{color:red;}

/* radio */
label {
  display: block;
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radiomark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border:2px solid;
  border-radius: 50%;
}
/* barvy */
.radiomark.v_0,.radiomark.v_4{border-color:#84bed6;}
.radiomark.v_1{border-color:#f0c24b;}
.radiomark.v_2{border-color:#ea7066;}
.radiomark.v_3{border-color:#a597e7;}  

/* On mouse-over, add a grey background color */
label:hover input ~ .radiomark{
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
label input:checked ~ .radiomark{
  background-color: White;
}

/* disabled */
label input[disabled] ~ .radiomark{
    opacity: .5;
    background: white;
    cursor: default;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after{
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
label input:checked ~ .radiomark:after{
  display: block;
}

/* Style the indicator (dot/circle) */
label .radiomark:after{
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
/* barvy */
.radiomark.v_0:after, .radiomark.v_4:after{background:#84bed6;}
.radiomark.v_1:after{background:#f0c24b;}
.radiomark.v_2:after{background:#ea7066;}
.radiomark.v_3:after{background:#a597e7;}