.klikaci-body {overflow-y:scroll}
body {color:#FFF; background:#000; cursor:default; font-size:100%}
#main {width:100%; min-width:972px; margin:0 auto}
a, a:hover {color:inherit}

.col-foto {position:relative; z-index:1; padding:50px 0 0 10px}
.col-b {position:relative; z-index:5; float:right; width:300px; padding:50px 8px 0 20px}
.col-b + .col-foto { margin-right: 325px }

#logo, #navigation {height:50px; line-height:50px; padding:0}
#logo {position:absolute; top:0; left:10px; z-index:3}
#logo-zavrit {display:block; height:24px; padding:13px 0}
#logo-zavrit img {vertical-align:top; width:auto; height:100%; /*transition:opacity .5s ease*/}

#navigation {position:absolute; top:0; left:50%; transform:translateX(-50%); min-width:calc(4em + 100px); margin:0 auto; font-size:112.5%; text-align:center; color:#FFF}
a.img-prev, a.img-next {float:right; width:50px; height:50px; background:url('/u/icon/fff/arrow1-right.svg') no-repeat 50% 50% / 24px 24px}
a.img-prev {float:left; transform:rotate(180deg)}

#zavrit {position:absolute; right:9px; top:0; z-index:6; font-weight:600; font-size:14px; line-height:50px; color:#FFF; text-decoration:none; text-transform:capitalize}
.img-close {float:right; width:20px; height:20px; margin:15px 0 15px 12px; background:url('/u/icon/fff/close.svg') no-repeat 50% 50%}

#nahledy {position:absolute; right:0; top:0; z-index:6; font-weight:400; font-size:14px; line-height:50px; color:#FFF; text-decoration:none}
.img-thumbs {float:left; width:20px; height:20px; margin:15px 12px; background:url('/u/icon/fff/categories.svg') no-repeat 50% 50%}

#logo-zavrit, #nahledy, a.img-prev, a.img-next, .desc-close:after, #zoomovat {opacity:.7; transition:opacity .2s ease}
#logo-zavrit:hover, #nahledy:hover, a.img-prev:hover, a.img-next:hover, .desc-close:hover:after, #zoomovat:hover {opacity:1}

.r-head {position:relative; margin-top: -14px }

.item { display: none; margin: auto; position: relative; max-height: calc(100vh - 50px); max-width: 100%; }
.item u { display: block; margin: auto; width: 100%; height: 100%; background-position: 50% 0%; background-repeat: no-repeat; background-size: contain }
.item .desc { text-align: left; margin: auto; overflow: hidden; max-width: 100% }
.item .desc-in {position:relative; display:inline-block; margin:1rem 1.125rem; padding:1rem 1rem 1rem 2.5rem; border-radius:6px; background:rgba(0,0,0,.79); transition: 0.5s background-color}
.hide-desc .item .desc-in {background: rgba(0,0,0,0); /*padding-right:0*/}
.item .desc h2 {margin:0 0 .2em; font-weight:400; font-size:100%; font-family:inherit; transition: 0.25s opacity}
.item .desc p {font-size:81.25%; color:#B0BEC5}
.hide-desc .item p, .hide-desc .item h2 {opacity: 0; /*display:none*/}

.desc-close:after {content:''; position:absolute; left:.5em; bottom:1rem; width:1.5rem; height:1.5rem; background:url('/u/icon/fff/close-i.svg') no-repeat 50% 50%; cursor:pointer; border-radius: 0.1px}
.hide-desc .desc-close:after {/*bottom:.25rem;*/ background-image:url('/u/icon/fff/info.svg'); background-color: rgba(0,0,0,0.79); box-shadow: 0 0 0 0.5em rgba(0,0,0,0.79) }

.m-bg-4, .klikaci-body .m-bg-4 {background:#000}
#content {padding:0 9px 20px; background:#000}
#content:after {content:''; display:block; clear:both}
#content .item {max-height:none}
#content .item .desc-in {margin:0; padding:1rem 0}
#content .item p, #content .item h2 {display:block}
#content .item .desc-close {display:none}
#content .col-foto {min-height:1300px; padding-left:0}
#content .col-b {padding-right:0}
#content .col-b + .col-foto {margin-right:320px}
#content #logo {left:24px}
#content #zavrit {right:24px}
@media (max-height: 880px) { #content .item {max-height:600px} }

#foto-thumbs {margin:0 auto}
#foto-thumbs img {display:block; width:135px; height:101px; position:relative}
#foto-thumbs a {position:relative; float:left; margin:0 5px 10px; padding:2px; border:3px solid rgba(255,255,255,0); border-radius:6px; width:135px; height:101px; overflow:hidden; transition:.2s border}
#foto-thumbs a.active {border-color:rgba(255,255,255,1)}
#foto-thumbs a:hover {border-color:rgba(255,255,255,.7)}

#zoomovat {display:none; position:absolute; top:50px; right:0; z-index:6; width:2rem; height:2rem; margin:1rem; border-radius:5px; background:rgba(0,0,0,.2) url('/u/icon/fff/zoom-in.svg') no-repeat 50% 50%; box-shadow:0 0 .625rem 0 rgba(0,0,0,.5); cursor:pointer}

.foto-zoom body { background: #000 }
.foto-zoom .col-foto { position: static; padding: 0 }
.foto-zoom .ahead { display: none !important }
.foto-zoom #navigation, .foto-zoom #nahledy, .foto-zoom #logo, .foto-zoom #zavrit, .foto-zoom .col-b { display: none }
.foto-zoom .gallery { min-height: 100vh !important; padding-bottom: 0 !important; }
.foto-zoom .gallery .item { max-width: none; max-height: none }
.foto-zoom .item .desc { display: none }
.foto-zoom #zoomovat { background-image:url('/u/icon/fff/zoom-out.svg'); top: 0; position: fixed }
.foto-zoom .m-bg-1 { padding: 0 }
.foto-zoom .m-bg-3 { max-width: none; width: auto; background: #000 }
.foto-zoom .m-bg-4, .foto-zoom #content { padding: 0; position: static }
.foto-zoom .m-bg-4 { width: auto; position: static }
.foto-zoom #content .col-foto { min-height: auto }
.foto-zoom .col-b + .col-foto { margin-right: 0 !important; }

body > img {position:absolute; top:-999em; left:-999em}

/* hlasovani */
.hlasovani {margin:0 0 1.5rem; padding:1.5em 1em; border-radius:6px; color:#FFF; background:#102447; text-align:center}
.r-main ~ .hlasovani {margin-top:1.5rem}
.hlasovani h2 {margin:0 0 .4em; font-weight:700; font-size:112.5%; font-family:inherit}
.hlasovani .box-in {width:200px; margin:0 auto}
.hlasovani p {margin:0 auto 1rem; font-size:87.5%}
.hlasovani a {color:#CFDCF1; text-decoration:underline; opacity:1}
.hlasovani a:hover {color:inherit}
.buttons {display:flex; justify-content:space-between; gap:4px; text-align:center}
.buttons button {flex:1 1 50%; display:flex; justify-content:center; align-items:center; height:3em; margin:0; padding:0 .5em; border:0; border-radius:3px; font-size:14px; color:#FFF; background:#678AC6; white-space:nowrap; cursor:pointer; overflow:visible}
.buttons button:hover {background-color:#1b3e7a}
.thumbs-up, .thumbs-down {display:inline-block; vertical-align:middle; width:20px; height:20px; margin-right:.5em; background:url('/u/icon/fff/like-full.svg') no-repeat}
.thumbs-down {background-image:url('/u/icon/fff/like-dislike.svg')}

.hlasovani form { transition: 0.25s }
.hlasovani form.loading { opacity: 0.5; pointer-events: none; -o-pointer-events: none; -ms-pointer-events: none; -moz-pointer-events: none; -webkit-pointer-events: none; }

/* captcha */
.captcha {width:200px; margin:0 auto 1rem; text-align:left}
.cnfimg {width:200px; height:80px; border:none; margin:0 auto 1rem}
.captcha label {display:block; width:100%; height:auto !important; font-size:87.5%; text-transform:uppercase; color:#B0BEC5}
.captcha input#overeni, .captcha .ico-voice {float:left; height:40px; line-height:40px; margin:6px 0 0; border-radius:3px}
.captcha input#overeni {width:156px; margin-right:4px; padding:0 14px; border:1px solid #678AC6; font-size:16px; color:#263238; background:#FFF; box-sizing:border-box}
.captcha .ico-voice span {display:block; width:40px; height:40px; border-radius:3px; color:#1B3E7A; background:#CFDCF1 url('/u/icon/137/sound.svg') no-repeat 50% 50% / 50% 50%; text-decoration:none; cursor:pointer}
.captcha .ico-voice:before {display:none}
.captcha .ico-voice:hover span {background-color:#EFF3F9}
.captcha .ico-voice span.alter-text {position:absolute; width:auto; height:auto; top:-9999px; left:-9999px;}

/*mark-video*/
.mark-video {position:relative}
.mark-video span {position:absolute; bottom:16px; right:20px; z-index:2; width:70px; height:70px; background:url('/u/n4/play.svg') no-repeat}
.midi {width:80px; height:60px}
.p135 {width:135px; height:101px}
.mark-video.midi span, .mark-video.p135 span {width:31px; height:31px; bottom:7px; right:9px}
.sp5 {width:172px; height:129px}
.sph {width:215px; height:161px}
.mark-video.sp5 span, .mark-video.sph span {width:45px; height:45px; bottom:8px; right:10px}