/* TINY MCE EDITOR OVERRIDE*/
.tox-tinymce-inline .tox-editor-header, .tox-toolbar-overlord, .tox-toolbar__primary,.tox .tox-toolbar, .tox .tox-dialog__footer, .tox .tox-dialog__header, .tox .tox-textfield {border:none !important; background:none !important; background-color: transparent !important;}
.tox .tox-tbtn svg {fill:var(--txt) !important;} .tox .tox-tbtn span {color:var(--txt) !important;}
.tox .tox-tbtn {cursor:pointer;}
.tox .tox-tbtn:hover {background:var(--bgAlt) !important;}
.tox .tox-tbtn--enabled {background:var(--themeAlt) !important;}
.tox .tox-dialog__header, .tox .tox-dialog__body {color:var(--txt) !important;}
.tox .tox-dialog__footer {border-top:var(--line) !important;}
.tox .tox-dialog-wrap__backdrop {background-color:var(--pageBg) !important; opacity:.8 !important;}
.tox .tox-dialog {background-color:var(--cardBg) !important; border:var(--line) !important;}
.tox .tox-button {font-size:14px !important; font-weight:600 !important; text-transform:uppercase !important; color:var(--txt) !important; background:none !important; border:none !important;}
.tox .tox-button:hover {color:var(--theme) !important; background:var(--bgAlt) !important; border:none !important;}
.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {background:var(--themeAlt) !important;}
.tox .tox-textfield {border-radius:0 !important; border-bottom:var(--line) !important; color:var(--txt) !important;}
.tox .tox-textfield:focus {border-color: var(--theme) !important; background:var(--themeLight) !important; outline:none !important;}
.tox .tox-dialog__body-nav-item, .tox .tox-label {color:var(--txtAlt) !important;}
.tox .tox-dialog__body-nav-item:hover {color:var(--theme) !important;}
.tox .tox-dialog__body-nav-item--active {color:var(--theme) !important; border-color:var(--theme) !important;}
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {border-right:var(--line) !important;}
.mceHide #newPostForm, #addPost:not(.mceHide) #mceShow .postBox, .mceHide #mceToolbar {visibility:hidden; height:0; margin:0; padding:0; overflow:hidden;}
.mceHide #mceShow {cursor:pointer;}
#mceToolbar {margin: 10px 20px 10px 84px;}
.rateBar {display:flex; flex-direction:column; justify-content:space-between;}
.rating {margin:10px 15px; display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:center;}
.rating > input, .dropdown li > input {display:none;}
.rating > label, .dropdown li > label {cursor:pointer; display:block; padding-left:5px !important;}
.dropdown li > label::before {display:inline-block; content:""; width:16px; height:16px; margin-right:10px;}
/*.rating > label:before, i.star:before {margin:3px; font-size:1.25em; font-family:star; display:inline-block; content: "\\e800"; font-style:normal;}*/
.rating > input:checked ~ label, .dropdown li > input:checked ~ label { color:var(--theme);  } /* show gold star when clicked */
.rating:hover > input:checked ~ label { color:var(--txtAlt);  } /* show gold star when clicked */
.rating > input:checked ~ label:before, .rating:hover > input:checked ~ label:before { content: '\e806'; } /* show empty star */
.dropdown li > input:checked ~ label:before { content: '\e82f'; } /* check */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* hover current selection */
.rating > input:checked ~ label:hover ~ label,
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label  { color:var(--pageTxt);  } /* hover previous stars in list */
.fancybox-slide--iframe .fancybox-content { max-width :600px; height:auto; /*max-height:80%; overflow:auto;*/ background:var(--pageBg); box-shadow:var(--shadowpopup);}
.systemMsg {font-style:italic; color:var(--txtAlt);}
.claFull p.tstQ {margin:25px 0 10px; padding:20px 15px 5px 50px; border-top:var(--line); text-align:left; font-weight:500; position:relative; color:var(--theme);}
.claFull p.tstQ b {display:inline-block; border-radius:50%; color:var(--txtAlt); width:32px; height:32px; line-height:32px; font-weight:300; text-align:center; position:absolute; left:10px; top:17px;}
.claFull p.tstA, .tblRow {margin:5px; position:relative; display:flex; align-content:center; text-align:left;}
.tblRow {border-radius:8px; padding:8px 15px; margin:0 20px;} .tblRowAlt {background:var(--bgAlt);}
.tstA label {clear:both; display:block; width:100%; padding:8px 15px 8px 45px; position:relative; z-index:5; border-radius:8px; background:var(--bgAlt);}
.tstA label:hover {background:var(--themeLight); cursor:pointer;}
.tstA input {display:block; margin-top:-10px; top:50%; left:10px; width:20px; height:20px; border:2px solid #808080; background:var(--cardBg); border-radius:4px; position:absolute; z-index:10; pointer-events:none; transition: all 0.2s ease; box-shadow: inset 2px 2px 6px rgba(0,0,0,.1);}
.tstA input:checked ~ label {background:var(--themeLight);}
.tstA:hover input, .tstA input:checked {border:2px solid var(--theme);}
.tstA input[type=radio] {border-radius:50%;}
.tstA input[type=radio]::before {content:""; position:absolute; top:10px; bottom:10px; left:10px; right:10px; border-radius:50%; background:var(--theme); opacity:0; transition: all 0.2s ease;}
.tstA input[type=radio]:checked::before {top:4px; bottom:4px; left:4px; right:4px; border-radius:50%; background:var(--theme); opacity:1;}
.tstA input[type=checkbox]:checked::after {content:""; position:absolute; left:4px; top:.5px;width:8px; height:12px; border:solid var(--theme); border-width:0 4px 4px 0; transform:rotate(45deg);}
.tstImg {max-width:100%;}
.postActions .btnCheck {padding-left:36px; position:relative;}
.btnCheck::before {content:""; position:absolute; height:24px; width:24px; left:5px; top:6px; background:var(--theme); border-radius:50%;}
.btnCheck::after {content:""; position:absolute; left:13px; top:10.5px; width:8px; height:12px; border:solid var(--cardBg); border-width:0 4px 4px 0; transform:rotate(45deg);}
.test img.nahled {max-width: 150px; float:left; margin-right:var(--spacing);}

/*#mceShow .postBox {visibility:hidden; height:0;}*/
/* MOBILE */
article {margin: 30px 5px 0; padding:0; position:relative;}
article.comment::before, .addComment article::before {content:""; display:block; width:2px; height:35px; position:absolute; top:-30px; left:36px; background:var(--txtAlt);}
article section a {text-decoration:none;}
article h2 {margin-bottom:.1em; color:var(--txt);}
article p {text-align:justify; line-height:1.4; margin: 20px 0;}
article img {/*clear:both; display:block;*/ margin: 0 auto 1em;}
img.left {float:left; margin: 0 1em 0.5em 0;}
img.right {float:right; margin: 0 0 0.5em 1em;}
img.nahled {max-width:100%; padding-bottom:.5em;}
img.full {margin:20px -20px; max-width:calc(100% + 40px); display:block;}
img.obrLand {display:inline-block; width:100%; height:auto; margin:0 0 3px; border-radius:3px;}
img.obrPort, .popupBox img.obrLand{float:left; max-width:30%; margin:5px 15px 0 0; border-radius:3px;}
article:not(.hodnoceni):not(.clanek):not(.postFull) img.obrPort {max-height:3em;}
.linkBox img.obrPort {max-height:none !important;}
.hodnoceni img.obrPort {max-width:50%; margin: 5px auto 0;}
hr {margin: 20px 0;}
.card {background:var(--cardBg); box-shadow:var(--cardShadow); border-radius:8px; position:relative; /*z-index:20;*/ overflow:auto;}
/*.minePost .card {background:var(--themeLight);}*/
p.secondaryTxt {color:var(--txtAlt); font-size:15px !important;}

.header {margin: 0 5px; position:relative; z-index:30; height:47px; overflow:visible;}
.header .texts {flex-grow:1;}
.post .header .texts span, .comment .header .texts span {display:block; margin:2px 0 0 10px; font-size:14px;}
.postBox, .odpovedNa {padding: 27px 15px 14px; margin:0;} .claBox {padding: 36px 15px 15px; margin:0;}
.hodnoceni .postBox p:not(.ratingStars) {margin-top:9px;}
#gate {display:flex; flex-direction:column; align-items:center; margin-top:0;}
#gate .trekkiesTopCenter {position:absolute; width:64px; height:64px; margin:0 auto; z-index:30;}
#gate .card {margin-top:20px; align-self:stretch;}
#gate .card h2 {margin-top:40px; text-align:center;}
#gate #base, #gate #login {display:flex; flex-direction:row; justify-content:space-between; align-items:center;}
#gate #login {flex-direction:column;}
#gate #base a, #gate #login a {display:inline-block; padding: 10px var(--spacing); color:var(--txt); border:none; background:none; font-size:14px; font-weight:600; text-transform:uppercase; text-decoration:none; text-align: center; cursor:pointer; border-radius:4px; margin:10px;}
.gateBase #login, .gateLogin #base, .gateLogin img {display:none !important;}
#gate #login form, #gate #login a {width:200px; margin:20px auto;}
#loginForm .btnStd, #loginForm .inputField {display:block; font-size:14px; margin: 10px 0; padding: 10px 15px; width:100%;}
#gate a:hover, #gate #login a:hover {color:var(--theme); background:var(--bgAlt);}

/* OLD */
.postBox, .claBox {display:block; text-decoration:none;}
article::after, .postBox::after, .claBox::after, .postBoxFull::after, .linkBox::after {content: ""; display: table; clear: both;} /* clearfix */
article section, .cardPost, .cardLogin, #addPost, .addComment {color:var(--txtAlt); display:flex; flex-direction:row; justify-content:flex-start;}
.pageNav + article.prispevek {margin-top:20px;}
#addPost .header {height:20px;}
#addPost:not(.addComment) .post/*, .clanek*/ {margin-top:0;}
#addPost .postBox {padding: 20px 20px 20px 84px; margin:0; font-weight: 600; font-size:14px; text-transform: uppercase;}
.claFull h2, .claFull p, .claFull ul, .postFull .postInfo {margin:1em 15px;}
.morePosts, .moreLoad {text-align:center; padding:0; margin-top:20px;}
.moreLoad::before {
  display: inline-block; content:"";
  border: 6px solid var(--themeLight);
  border-top: 6px solid var(--theme);
  border-radius: 50%;
  width: 37px; height: 37px;
  animation: spin 1.5s linear infinite;
}
#linkField .moreLoad {margin:0 0 0 10px;}
#linkField .moreLoad::before{width:24px; height:24px; border-width:3px;}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.claCover {width:25vw; height:25vw; margin:.2em .7em 0 0; display:block; float:left;
  background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:1vw;}
/* INFO LISTA VYPIS */
.claIntro .claInfo, .comment .claInfo {width:100%; margin:0 0 20px; padding:0; position:relative; display:flex; flex-direction:row;}
.cardPost, #addPost, .addComment {width:100%; /*margin:1em 0;*/ padding:.5em; position:relative;}
.cardLogin {width:300px; margin:0 auto; padding:.5em; position:relative; flex-direction:column;}
.cardLogin #loginForm {padding-top:20px;}
#addPost, .addComment {flex-direction: column; padding:0;}
#addPost .card {overflow:visible;}
.newPostTop {display:flex; flex-direction:row; justify-content:space-between; align-items:center; width:100%; height: 64px; padding:var(--spacing);}
.newPostTop .texts {align-self:stretch; line-height:34px;}
#newPostForm, #newPost, .formControl {width:100%; margin:0;}
#newPost {padding: 0 15px; min-height:64px; outline:none; line-height:1.4; border-top:var(--line); border-bottom:var(--line);}
.claFull #newPost {min-height:250px;}
#newPost * {color:var(--txt);}

.postActions, .commentActions, .linkCla {clear:both; display:flex; flex-direction:row; justify-content:space-between; border-top:var(--line);}
.postInfo {display:block; padding: 0; color:var(--txt); /*border-bottom:var(--line);*/}
.commentActions {justify-content:center;}
a.linkCla {width:100%; justify-content:center; padding:.8em calc(var(--spacing) + .4em); background:none; font-size:14px; font-weight:600; text-transform:uppercase; text-decoration:none; color:var(--txtAlt);}
.avatar span, .avatar a {display:block; position:relative;}
.avatar span::after, .avatar a::after {content:""; position:absolute; top:5px; right:5px; left:5px; bottom:5px; border-radius:50%; z-index:-5; background: url('img/profiles/avatar_bgr.png') no-repeat; background-size: contain;}
.avatar, .ratevatar {width:64px; height:64px; position:relative; margin:0;}
.avatar img {width:48px; height:48px; border-radius:24px; margin:8px;}
.ratevatar img {width:64px; height:64px; margin:0px;}
/* INFO LISTA U CLANKU */
.claInfo .texts, .cardPost .texts, #addPost .texts, .addComment .texts {flex-grow:1; margin-left: 15px;}
.claInfo .texts span, .claInfo .right span {display:block; margin:5px 0;}
.claInfo a {color:var(--txtAlt);} .claInfo a:hover {color:var(--theme);}
.actions a, a.dots, .dots, .actions span {display:block; margin-left:10px; border-radius:4px; position:relative; overflow:visible; color:var(--txtAlt); cursor:pointer;}
.actions span {cursor:default;}
.actions a.zeroed, .actions span.zeroed {color:var(--txtAlt);}
a.dots i, .dots i {width:30px; height:30px; font-size:30px; line-height:30px;}
.actions a:hover i, a.dots:hover i, .dots:hover i {color:var(--theme);}
.actions a:hover, a.dots:hover, .dots:hover {color:var(--theme);background:var(--bgAlt);}
.actions .dropdown {margin-top:0;}
.spoiler .postBox *, .spoiler .linkBox * {filter: blur(4px); position:relative;}
.spoiler .postBox .postInfo, .claFull .linkBox * {filter:none;}
/*.spoiler .postBox:before {content:'Spoiler'; display:block; background:var(--bgAlt); position:absolute; margin: -5px auto 5px; padding: 5px 10px;}*/
div.searchON {justify-content:flex-end;} 
div.searchON>span:first-child {display:none;}
form#search {display:flex; flex-direction:row; align-items:center;}
form#search input[type=submit] {margin:9px 0;}
#searchInput {background-color:var(--bgAlt); color:var(--txt); outline:none; border-radius:4px; padding: 10px var(--spacing); font-size:14px; margin: 0 5px;}
#searchForm {position:relative;}
#searchForm * {position:absolute;right:0; margin:5px 0 5px 5px;}
.searchField {border:none; background:none; outline:none; color:var(--pageTxt); font-size:16px; padding:.4em; border-radius:4px;}
.searchField:hover, .searchField:focus {background:var(--themeLight);}
#searchForm .tr5-search {font-size:28px; width:28px; height:28px; line-height:28px; border-radius:4px; cursor:pointer; pointer-events:none;}
.postBox, .postBoxFull, .claBox {display:block; overflow:hidden; position:relative;}
.postBox h2, .postBox p, .postBoxFull h2, .postBoxFull p, .claBox h2, .claBox p, .popupBox h2, .popupBox p {margin:0; padding:0; font-size:1em; line-height:1.4}
.postBox p:not(:last-child) {margin-bottom:1em;}
.postBox p:not(:first-child) {margin-top:1em;}
/*.postBox p:not(:first-child):not(:last-child) {margin:1em 0;}*/
.claFull {padding-top:20px;}
.claBox h2, .claFull h2, .popupBox h2 {color:var(--theme); margin-bottom:.4em;}
.popupBox h2, .popupBox p {margin: 15px;}
.popupBox {display:flex; flex-direction:column; background:var(--cardBg);}
.popupBox .topBar {display:flex; flex-direction:row; justify-content:space-between;}
.popupBox #newPostForm  {flex-grow:1; display:flex; flex-direction:column; }
.popupBox #newPost {flex-grow:1; padding:0;}
.popupBox > .uspech, .popupBox > .chyba {margin:15px;}
a.claBox:hover, a.postBox:hover {background:var(--bgAlt);}
.claFull h2 {font-size:1em;}
#addPost.claFull .newPostTop .texts {margin-left:0;}
.claFull #mceToolbar {margin:0;}
article:not(.hodnoceni):not(.comment):not(.postFull) .postBox, article:not(.hodnoceni) .claBox {max-height:260px;}
article:not(.hodnoceni):not(.comment):not(.postFull) .postBox::after, article:not(.hodnoceni) .claBox::after, .fadePart::after {display:block; content:""; position:absolute; top:160px; left:0; right:0; height:100px; background:var(--coverBase);}
.fadePart {max-height:100px; position:relative; overflow:hidden; margin-top:5px; padding-bottom:10px; color:var(--txt);} .fadePart::after {top:0px;}
.odpovedNa {font-size:14px; padding-bottom:8px; color:var(--txtAlt);}
.odpovedNa span {color:var(--theme); cursor:pointer;}
.odpovedNa span:hover {color:var(--pageTxt);}
.odpoveOrig {animation: highLightIt 4s linear;}
@keyframes highLightIt {
  0% {background-color: var(--cardBg);}
  20% {background-color: var(--themeLight);}
  100% {background-color: var(--cardBg);}
}
.odpovedNa ~ .postBox {padding-top:0px;}
article:not(.hodnoceni) a.postBox:hover::after, article:not(.hodnoceni) a.claBox:hover::after {background:var(--coverBaseAlt);}
div.hiddenPostBox {padding: 18px 20px 18px 84px;}
/*.postBox p {position:relative; max-height:5.6em;}
.postBox p::after {content:""; position:absolute; top:calc(4.5em + 27px); right:0; width:60px; height:1.5em; background:var(--coverBase);}*/
#topField {width:100%; border:none; border-top:var(--line); padding: 10px var(--spacing) 0; display:none;}
.topFieldShow #topField {display:block;}
#topField span {display:block; width:100%; padding:0; font-size:14px; color:var(--txtAlt);}
#topField span.replyTo {padding-bottom:10px;}
#topField input {display:block; width:100%; padding: 5px 0 10px; border:none; outline:none; border-radius:0; background:transparent; color:var(--pageTxt); font-size:1.1rem;}
.imgTopBar {width:100%; display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding: 5px 15px;}
.imgTopBar input {flex-grow:1; padding: 5px 15px 7px 5px; margin:0; border:none; outline:none; border-radius:0; background:transparent; color:var(--pageTxt); font-size:1.1rem;}
#linkField, .imgBox {width:100%; border:none; border-bottom:var(--line); padding:0; display:none; padding-right:var(--spacing);}
#linkField input {flex-grow:1; padding:var(--spacing); border:none; outline:none; border-radius:0; background:transparent; color:var(--pageTxt); font-size:14px;}
#linkField i, .linkBox .tr5-close, .imgBox .tr5-close, .imgBox .tr5-search {font-size:32px; width:32px; height:32px; line-height:32px; border-radius:4px; cursor:pointer;}
.imgBox .tr5-search {cursor:auto;}
.linkBox .tr5-close {position:absolute; top:0px; right:4px;}
#linkField .tr5-check {margin-right:5px;}
#linkField i:hover, .linkBox .tr5-close:hover {background:var(--bgAlt); color:var(--txt);}
.linkFieldShow #linkField {display:flex; flex-direction:row; align-items:center;}
.imgBoxShow .imgBox {display:flex; flex-direction:column; align-items:stretch; padding:0;}
.linkFieldShow #showLinkField, .linkBoxShow  #showLinkField, .imgBoxShow #showLinkField {display:none;}
#imgRow {overflow-x:auto; overflow-y: hidden; padding: 0 15px 10px; height:140px;}
#imgRowFlow {width:9999px;}
#imgRowFlow img:last-child {padding-right:20px;}
#imgRow img {max-height:120px; float:left; margin-left:5px;}
#newImg {display:block; float:left; height:120px; width:120px; background:var(--bgAlt); border:2px dashed var(--txtAlt); border-radius:8px; text-align:center; font-size:14px; font-weight:600; padding:8px; text-decoration:none; color:var(--txtAlt);}
#newImg .tr5-addImage {font-size:48px; width:48px; height:48px; line-height:48px;}
a#newImg:hover {color:var(--theme); border-color:var(--theme);}
#newPostForm .linkBox {display:none;}
.linkBoxShow .linkBox {display:block !important; border-top:none; border-bottom:var(--line);}
.linkBox {display:block; margin:0; padding:5px; width:100%; max-height:calc (5.6em + 10px); color:var(--txt); border-top:var(--line); position:relative;}
/*.linkBox img {display:inline-block; width:100%; height:auto; margin:0 0 15px; border-radius:3px;}*/
a.linkBox {text-decoration:none;} a.linkBox:hover h3 {color:var(--theme);} a.linkBox:hover p {color:var(--txt);}
a.linkBox:hover/*, a.postBox:hover*/ {background:var(--bgAlt);}
a.linkBox:hover p::after/*, a.postBox:hover::after*/ {background:var(--coverLinkAlt);}
.linkBox h3, .linkBox p, .linkBox .link {margin:0; padding:0; font-size:.9em; line-height:1.4;}
.linkBox p {display:none;/*display:block; max-height:3em; overflow:hidden; position:relative; color:var(--txtAlt);*/}
.linkBox p::after {content:""; position:absolute; top:1.5em; right:0; width:60px; height:1.5em; background:var(--coverLink);}
.minePost .linkBox p::after {background:var(--coverLinkTheme);}
.linkBox h3 {margin: 10px 0 4px;}
.linkBox .link {color:var(--txtAlt); margin-top:6px; display:inline-block;}
.linkBox .link i {display:inline-block; width:25px; height:25px; font-size:25px; line-height:25px; vertical-align:top; position:relative; left:-3px; top:-2px;}
.hodnoceni .claBox {padding-top:32px; display:flex; flex-direction:column;}
.hodnoceni h3 {font-size: 19px; color:var(--pageTxt); margin:15px 0 5px; text-transform:none;}
.hodnoceni .ratingStars {color:var(--txtAlt); font-size:15px;}
.hodnoceni .serie {color:var(--txt); font-weight:300; text-transform:uppercase; margin-top:5px; letter-spacing: 1px;}
.ratingStars {text-align:center; margin:30px 0 5px; font-weight:300;}
.ratingStars i, .rating label {width:48px; height:48px; font-size:48px; line-height:48px;}
.ratingStars i.tr5-starFull {color:var(--theme);}
.comment .ratingStars {margin:15px; width:calc(100% - 30px);}
.ratingStars b {color:var(--theme);}
.rateBgr, .rateMtr {display:block; height:10px; border-radius:5px;}
.rateBgr {width:100%; background:var(--bgAlt); margin-bottom:10px; box-shadow:var(--shadow-1);}
a.claBox:hover  .rateBgr {background:var(--cardBg);}
.rateMtr {background:var(--theme);}
.actions {display:flex; flex-direction:column;}
.actions a, .actions span {width:50%; display:flex; flex-direction:row; align-content:center; justify-content:center; line-height:30px;
  text-decoration:none; color:var(--txt);}
.actions a i, .actions span i {width:26px; height:26px; font-size:26px;}
.postFull {margin-top:20px;}
.profil {position:relative; margin-top:0;}
.profil #logout {position:absolute; top:8px; right:8px;}
.profil h2 {font-size:28px; text-align: center; font-weight:400; margin:10px 0 0; text-transform:none;}
.profil h4 {margin: 25px 20px 10px; text-align:center; color:var(--txtAlt)}
.profil .header {flex-direction:column; height:45px;}
.profil .secondaryTxt {margin:0; text-align:center;}
.profil .avatar {width:160px; height:160px; position:relative; margin: 0 auto 15px;}
.profil .avatar img {width:120px; height:120px; border-radius:60px; margin:20px;}
.profil .avatar span::after, .profil .avatar a::after {top:19px; right:19px; left:19px; bottom:24px;} 
.profil .card {min-height:200px; padding-top:200px;}
.profil .motto {display:block; color:var(--txtAlt); font-size:17px; margin: 20px 15px 15px; line-height:1.4;}
.profil .about {margin: 20px 15px; font-size:17px; line-height:1.4;}
.profil .combo {position:absolute; top:50px; right:0;}
.profil .dropdown {margin-top:1px;}
.profilInfo {border-top:var(--line); padding: 20px 15px; font-size:14px; color:var(--txtAlt); display:flex; flex-direction:row; align-items:center;}
.profilInfo i {display:inline-block; width:30px; height:30px; font-size:30px; line-height:30px; margin-right:5px; color:var(--txt);}
.profilInfo span {margin-right:25px;}
/* TABLET */
@media only screen and (min-width:750px) {
  .linkBox h3 {margin-top:0;}
  .linkBox p {display:block; max-height:3em; overflow:hidden; position:relative; color:var(--txtAlt);}
  img.obrPort {max-height:calc(9.8em - 5px); width:auto;}
  img.obrLand {float:left; width:auto; height:calc(5.6em - 5px); margin:5px var(--spacing) 0 0;}
  img.nahled {max-width:300px; padding-bottom:.5em;}
  .linkBox {padding:var(--spacing); border: none; border-top:var(--line); border-radius:0;}
  .linkBox img {float:left; width:auto; height:6em; margin:0 var(--spacing) 0 0;}
  #gate #login {flex-direction:row;}
  #gate .card h2 {margin-top:0; text-align:left;}
  #gate #login form, #gate #login a {width:auto; margin:10px;}
  #gate #login form {display:flex; flex-direction:row;}
  #loginForm .inputField {/*width:160px;*/ margin-right:10px;}
  #loginForm .btnStd {margin: 10px 0; display:block; /*width:auto;*/}
  div.searchON {justify-content:space-between;}
  .claFull p.tstA {margin:5px 15px;}
  .claFull p.tstQ {padding-left:60px;}
  .claFull p.tstQ b {left:22px;}
  .postBox, .odpovedNa {padding-top: 36px;}
  /*.postBox p::after {top:calc(4.5em + 40px);}*/
  .post .header {height:40px;}
  .post .header .texts, .comment .header .texts {margin-top:10px;}
  .post .header .texts span, .comment .header .texts span {display:inline-block;}
  .hodnoceni .claBox {display:flex; flex-direction:row; align-items: flex-start;}
  .hodnoceni .claBox>div {align-self:stretch; display:flex; flex-direction:column; flex-grow:1; align-items:stretch; justify-content:space-between;}
  .hodnoceni h3 {margin-top:5px;}
  /*.hodnoceni .postBox p {display:inline-block;}*/
  .ratingStars {text-align:right; margin-bottom:0; width:400px; align-self:flex-end;}
  .rateBar {flex-direction:row; align-items: center;}
  .hodnoceni .postBox .ratingStars {margin:0; width:100%;}
  .hodnoceni img.obrPort {max-width:auto; margin: 5px 15px 0 0;}
  /*.hodnoceni img.obrLand {height:calc(150px);}*/
  .commentActions {justify-content:flex-end;}
  .postActions span, .commentActions span, .postActions a, .commentActions a {margin: 3px 10px;}
  .claFull h2 {font-size:1.3em;}
  .profil h2 {margin:40px 0 0; line-height:40px;}
  .profil h4 {margin: 25px 20px 25px 190px; text-align:left;}
  .profil .secondaryTxt {text-align:left;}
  .profil .header {flex-direction:row; height:100px;}
  .profil .avatar {margin:15px;}
  .profil .card {min-height:140px; padding-top:0;}
  .profil .motto {min-height:50px; margin:20px 15px 15px 190px;}
  div.searchON>span:first-child {display:flex;}
}
/* WIDESCREEN */
@media only screen and (min-width: 1200px) {
  article {margin-top: 20px;}
  article.comment::before, .addComment article::before {height:25px; top:-20px;}
  .postBox, .claBox {padding: 40px 30px 25px;}
  /*#newPost {padding: 0;}*/
  .odpovedNa {padding: 30px 30px 8px;}
  .claFull h2, .claFull p, .claFull ul, .postFull .postInfo  {margin:1em 30px;}
  .claFull p.tstA {margin:5px 30px;}
  .claFull p.tstQ {padding-left:75px;}
  .claFull p.tstQ b {left:32px;}
  .linkBox {padding: 15px 30px;}
  .comment .ratingStars {margin:15px 30px; width:calc(100% - 60px);}
  .hodnoceni .serie {font-size:14px;}
  .ratingStars {width:600px;}
  .ratingStars i, .rating label {width:32px; height:32px; font-size:32px; line-height:32px;}
}