/*
Theme Name: CKAIT
Author: Jindrich Sladek (hes@digisvet.cz)
Description: CKAIT zpravy a informace
Version: 0.0.1
Tags: magazine
*/


/* Fonts */

@font-face {font-family: 'Symbol'; src: url('fonts/CKAITSymbols-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'Raleway'; src: url('fonts/Raleway-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'Raleway'; src: url('fonts/Raleway-Bold.woff') format('woff'); font-weight: bold; font-style: normal;}

@font-face {font-family: 'Raleway'; src: url('fonts/Raleway-Italic.woff') format('woff'); font-weight: normal; font-style: italic;}

@font-face {font-family: 'Raleway'; src: url('fonts/Raleway-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic;}

@font-face {font-family: 'RobotoSlab'; src: url('fonts/RobotoSlab-Regular.woff') format('woff'); font-weight: normal; font-style: normal;}

@font-face {font-family: 'RobotoSlab'; src: url('fonts/RobotoSlab-Bold.woff') format('woff'); font-weight: bold; font-style: normal;}




/* Blocks */

html {width: 100%; height: 100%; margin: 0; padding: 0; background: white;}
body {position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; font: 16px/1.25 Raleway, Verdana, Arial, Helvetica, sans-serif; color: #202020; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%;}

/* colors */
.ckait-modra {color: #143b62;}
.ckait-zlata {color: #a9872a;}
.cik2022 {color: #8b0030;}
.colour {color: #8a0e16;}


.smaller {font-size: 12px;}
.bigger {font-size: 20px;}

header, main, footer, section, article, aside {display: block;}

header, main, footer, section, article, aside, blockquote, iframe, li {position: relative; box-sizing: border-box;}

section {clear: both;}

iframe {border: none; width: 100%; min-height: 10em; aspect-ratio: 16/9;}
.ratio_4x3 {aspect-ratio: 4/3;}
.ratio_16x9 {aspect-ratio: 16/9;}


h1 {font-size: 2.5em; margin: 0 0 .2em;}
h2 {font-size: 2em; margin: 0 0 .25em;}
h3 {font-size: 1.75em; margin: 1em 0 .5em;}
h4 {font-size: 1.5em; margin: 1.25em 0 .75em;}
h5 {font-size: 1.25em; margin: 1.325em 0 .875em;}
h6 {font-size: 1em; margin: 1.5em 0 1em;}

h1, h2, h3, h4, h5, h6 {font-family: RobotoSlab; line-height: 1.125;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit;}

h3.highlighted {font-size: 1.75em; color: #004b98;}

p+h4, ul+h4 {margin-top: 1em;}

a {color: #8a0e16;}
a:hover {color: black;}

p {margin: 0 0 .5em;}

ul, ol {padding: 0; margin: 0 0 .5em; list-style-type: none;}

dl, dt, dd {margin: 0;}

nav>ul {margin: 0;}

img {display: block;}

hr {border: none; height: 1px; background: #929292; margin: 2em 0;}

blockquote {margin: 1em auto; background: #f3f3f3; padding: 1em;}
blockquote *:first-child {margin-top: 0;}
blockquote *:last-child {margin-bottom: 0;}

form, fieldset {padding: 0; margin: 0; border: none;}

label {display: block;}
input, textarea, select {display: block; color: inherit; font: inherit; box-sizing: border-box;}
input:required {border-right: 1px solid orange;}
input.error {border-right: 1px solid red;}
input[type=submit] {cursor: pointer;}

table {display:block; table-layout: fixed; border-spacing: 2px; min-width: 100%; margin: 0 auto 1em; overflow-x: auto;}
th, td {text-align: left; vertical-align: top; padding: 2px 4px;}
th {background: #e8e8e8;}
tr:nth-child(even) {background: #f8f8f8;}

table.th-right th {text-align: right;}
table.td-right td {text-align: right;}

table.th-center th {text-align: center;}
table.td-center td {text-align: center;}

table.th-middle th {vertical-align: middle;}

table.th-right.not-first th:first-child {text-align: left;}
table.td-right.not-first td:first-child {text-align: left;}
table.th-center.not-first th:first-child {text-align: left;}
table.td-center.not-first td:first-child {text-align: left;}


.table-date td:first-child {background: #f3f3f3; white-space: nowrap;}

.user-photo {float: left; margin: .25em 1em .5em 0 !important; width: 8em; height: 8em;}
.user-photo.rounded {margin-top:0; border-radius: 50%; width: 5em; height: 5em;}


/* modificators */

.fl, .alignleft {float: left !important; margin: 0 1em .5em 0 !important;}
.fr, .alignright {float: right !important; margin: 0 0 .5em 1em !important;}

.cl {clear: left;}
.cr {clear: right;}
.cb {clear: both;}

.hidden {display: none;}

.half {width: 50% !important;}
.third {width: 33.33% !important;}
.third2quarter {width: 37.5% !important;}
.quarter {width: 25% !important;}
.three-quarter {width: 75% !important;}

.flex-horizontal {display: flex; flex-flow: row;}
.flex-vertical {display: flex; flex-flow: column;}

.text-align-left {text-align: left !important;}
.text-align-right {text-align: right !important;}
.text-align-center {text-align: center !important;}



/* Site header */

.site-header {position: relative; width: 81em; height: 15em; margin: 0 auto; overflow: hidden;}


/* Site content */

.site-content {width: 84em; margin: 0 auto 3em; overflow: hidden;}
.site-content__title {margin: 0 .25em 1em; padding: 0 .5em;}
.site-content__title span {color: #505252;}

/* Footer */

.site-footer {background: #8e9190;}

.site-footer__content {width: 84em; padding: 1.5em 0; margin: 0 auto; color: white; box-sizing: border-box; overflow: hidden;}
.site-footer__content>div {float: left; margin: 0 8px; padding: 0; width: 20em;}

.site-footer__content a {color: white; text-decoration: none;}
.site-footer__content a:hover {text-decoration: underline;}

.site-footer__content .column {padding: .5em 1em; flex-grow: 1; box-sizing: border-box;}

.profesis-logo {display: block; width: 4em; float: left; margin-right: 1em;}






.site-logo {position: absolute; font-size: 1em; left: 0; bottom: 1.5em; width: 100%; font-weight: normal; margin: 0; color: #505253;}
.site-logo a {color: inherit;}
.site-logo a:hover {color: #333;}
.site-logo a span {display: none}

/* First part of logo*/
.site-logo a:before {display: block; position: absolute; left: 0; bottom: .375em; content: "™"; font: 8em/1 Symbol;}

/* Second part of logo */
.site-logo:after {display: block; position: absolute; right: 0; bottom: 0; content: "℠"; font: 11em/1 Symbol;}

/* Issue number */
.issue-number {display: block; position: absolute; bottom: 0; width: 8.25em; height: 2em; background: #505253;}
.issue-number strong {display: block; color: white; text-align: center; font-size: 1.75em; line-height: 1.125;}
.issue-number__separator {display: inline-block; background: #8d9191; width: .25em; height: .25em; margin: 0.25em;}
.issue-number__separator span {display: none;}


.issue-list {position: relative; display: table; height: 100%; margin: 0 auto;}
.issue-list ul, ul.issue-list {margin: 0; display: table-cell; vertical-align: bottom; padding-bottom: .5em;}
.issue-list ul:after, ul.issue-list:after {display: block; content: ""; clear: both;}
.issue-list li {float: left; width: 7em; height: 9.975em; padding-bottom: 1em; margin: 2em .5em 0; background-image: url(images/shadow.png); background-repeat: no-repeat; background-position: center 9.5em; background-size: 100% 1em; box-sizing: content-box;}
.issue-list li.active {width: 8.5em; height: 12.1125em; margin-top: -.1125em; background-position: center 11.75em;}
.issue-list li>a, .issue-list li>div {display: block; height: 100%; background-size: cover;}
.issue-list li span {display: none;}
.all-issues {position: absolute; display: block; width: 0; height: 0; right: -1.5em; bottom: 1.5em; border-style: solid; border-width: 1em 0 1em 1em; border-color: transparent transparent transparent #505253;}
.all-issues span {display: none;}

.complete.issue-list {display: block; height: auto; margin: 0;}
.complete.issue-list li {width: 20em; height: 28.5em; padding-bottom: 2em; margin: 0 .5em 1.5em; background-position: center 28em;}
.complete.issue-list li span {display: block; position: absolute; bottom: 0; left: 1em;}
.complete.issue-list li>span {left: auto; right: 1em;}
.complete.issue-list li a {color: #505252; text-decoration: none;}
.complete.issue-list li a:hover {color: black;}


/* Site navigation */

.site-navi {position: relative; height: 2.5em; margin-bottom: 2em; background: #8e9191; font-family: RobotoSlab;}

.site-navi-show {position: relative; display: none; width: 2.5em; height: 2.5em; cursor: pointer;}
.site-navi-show:before {display: block; position: absolute; left: .125em; top: .125em; width: 100%; content: "↧"; font: 2em/1 Symbol; color: white;}
.site-navi-show:hover {background: rgba(0,0,0,.5);}

.site-menu {width: 83em; margin: 0 auto; overflow: hidden;}
.site-menu li {float: left;}
.site-menu a {display: block; color: white; text-decoration: none; line-height: 2.5; padding: 0 1em;}
.site-menu a:hover {background: rgba(0,0,0,.5);}
.site-menu .active>a {color: black;}
.site-menu .active>a:hover {color: black; cursor: default;}

.site-search {display: table; position: absolute; top: 0; right: 50%; margin-right: -41em; width: 12em; height: 100%;}
.site-search label {display: table-cell; width: 9em; height: 100%; vertical-align: middle;}
.site-search span {display: none;}
.site-search input {border: none; background: none; margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none;}
.site-search input[type=text] {width: 100%; height: 1.75em; font-family: Raleway; font-size: 1em; line-height: 1.75; padding: 0 .5em; background: white;}
.site-search input[type=submit] {float: right; width: 1.75em; height: 100%; font-family: Symbol; font-size: 1.5em; color: white;}
.site-search input[type=submit]:hover {background: rgba(0,0,0,.5);}

.site-navi p {text-align: center; color: white; line-height: 2.5;}









/* Article info */

.article__info dt {display: none;}
.article__info dd {color: #333;}
.article__info a {color: inherit; text-decoration: none;}
.article__info a:hover {color: black; text-decoration: underline;}
.article__comments:before {content: '🗨'; font: 1.25em/1 Symbol; margin-right: .325em; color: #999;}




/* Article list */

.article-list {margin: 0;}
.article-list:after {display: block; content: ""; clear: both;}


/* --- default article --- */
.article-list li {float: left; margin: 0 8px 16px; padding: 0 0 1em; /*background: #f6f6f6;*/ background: linear-gradient(to bottom, rgba(0,0,0,.15),rgba(0,0,0,.03));} /* <-- Height +1 */
.article-list article {width: 20em; height: 19em; padding: 11em 1em 0; overflow: hidden;} /* <-- Height -1 */

.article-list .article__image {position: absolute; left: 0; top: 0; width: 100%; height: 10em; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.article-list .no-picture .article__image {display: none;}

.article-list header {margin-bottom: .125em;}

.article-list .article__title {font-size: 1em; min-height: 2em; max-height: 3.25em; line-height: 1; margin: .875em 0 0; overflow: hidden;}
.article-list .article__title a:before {display: block; position: absolute; left: -1em; top: -11.875em; width: 20em; height: 10em; content: "";} /* <-- link over picture */
.article-list .article__title a {display: block; color: inherit; text-decoration: none;}
.article-list .article__title a:hover {text-decoration: underline;}
.article-list .article__title span {display: block; font-size: 1.25em; line-height: 1.25;}

.article-list .article__info {position: absolute; left: 0; top: -.25em; right: 0;}
.article-list dd {position: absolute; bottom: 0; line-height: 1;}
.article-list dd a,
.article-list dd time {font-size: .75em;}

.article-list .article__published {display: none;}
.article-list .article__author {left: 0;}
.article-list .article__author span {display: block;} /* separate name and occupation */
/*.article-list .article__author a {white-space: nowrap;}*/
.article-list .article__comments {right: 0;}
.article-list .article__category {display: none; /*right: 0; bottom: 10.75em;*/}
/*.article-list .article__category a {padding: .25em; background: rgba(0,0,0,.6); color: white; white-space: nowrap;}*/
.article__comments:before {font-size: 1em;}



.article-list p {margin-bottom: 0em;}


/* --- only text --- */

.article-list .text-only article {padding: 1em 1em 0;} /* <-- Height -1 */
.article-list .text-only .article__title {max-height: none; margin-bottom: .5em;}


/* --- small article --- */

/*.article-list .small {clear: left; background: yellow;}
.article-list .small + .small: nt {background: red; clear: none;}*/

.article-list .small article {height: 8.5em; padding: 5em 0 0; overflow: visible;} /* <-- Height -1 */
.article-list .small.no-picture article {padding: 1em;} /* <-- Height -1 */

.article-list .small .article__image {height: 9.5em;}
.article-list .small header {padding: 1em 1em 0; margin-bottom: 0; background: rgba(255,255,255,.9); height: 4em;}
.article-list .small.no-picture header {background: none; padding: 1.5em 0; height: 4em;}

.article-list .small header:after {display: block; position: absolute; left: 0; bottom: -.5em; width: 100%; height: .5em; content: ""; background: rgba(255,255,255,.9);} /* <-- rest of background */
.article-list .small.no-picture header:after {display: none;}

.article-list .small .article__title {margin-top: -.375em;}
.article-list .small .article__title a:before {left: 0; top: -5em; height: 5em;} /* <-- link over picture */
.article-list .small.no-picture .article__title a:before {display: none;}

.article-list .small .article__content {display: none;}
.article-list .small.no-picture .article__content {display: block;}
.article-list .small .article__category {bottom: 3.25em;}

.article-list .small .article__author {display: none;}
.article-list .small.no-picture .article__author {display: block;}
.article-list .small .article__category {display: none;}


/* --- small article vertical --- */

.article-list .small-v article {height: 8.5em; padding: 1em 1em 0 10.5em; overflow: visible;} /* <-- Height -1 */
.article-list .small-v .article__image {height: 9.5em;}

.article-list .small-v .article__title {margin-top: -.375em; max-height: 7.75em;}
.article-list .small-v .article__title a:before {left: -10.5em; top: -.6em; width: 9.5em;height: 9.5em;} /* <-- link over picture */
.article-list .small-v .article__content {display: none;}
.article-list .small-v .article__category {bottom: 3.25em;}

/*.article-list .small-v .article__author {left: -9.5em; bottom: -7.75em; width: 7em; white-space: normal;}
.article-list .small-v .article__author a {white-space: normal; display: block;}*/

/*.article-list .small-v .article__category {right: 10.5em; bottom: -1.5em;}*/

.article-list .small-v .article__author {display: none;}
.article-list .small-v .article__category {display: none;}


/* --- big article --- */

.article-list .big article {width: 41em; height: 29.5em; padding: 0; overflow: visible;} /* <-- Height -1 */
.article-list .big article:after {display: block; position: absolute; left: 0; bottom: -1em; width: 100%; height: 1em; content: ""; background: rgba(255,255,255,.9);} /* <-- rest of background */
.article-list .big .article__image {height: 30.5em; background-position: top center;}

.article-list .big .article__background {position: absolute; left: 0; right: 0; bottom: 0; height: 9em; padding-top: 20.5em; overflow: hidden;}
.article-list .big header {padding: 1em 1em .25em; margin-bottom: 0; background: rgba(255,255,255,.9);}
.article-list .big .article__title a:before {left: 0; top: -21.5em; width: 41em; height: 22em;} /* <-- link over picture */
.article-list .big .article__content {position: relative; padding: 0 1em; background: rgba(255,255,255,.9); min-height: 6.5em;}

.article-list .big .article__info {left: 1em; top: 1.75em; right: 1em;}

.article-list .big.smaller-img article:after {display: none;} /* <-- rest of background */
.article-list .big.smaller-img .article__image {height: 20.5em;}
.article-list .big.smaller-img header {background: none;}
.article-list .big.smaller-img .article__content {background: none;}



/*.article-list .big .article__author {left: 1em; bottom: -1.75em;}*/
/*.article-list .big .article__category {right: 1em; bottom: 18.25em;}*/


/* --- editorial article --- */

.article-list .editorial {background: linear-gradient(to bottom, rgba(0,0,0,.08),rgba(0,0,0,.03));}
.article-list .editorial article {width: 41em; height: 29.5em; padding: 8em 1em 0 22em;} /* <-- Height -1 */
.article-list .editorial .article__image {left: 1em; top: 1em; width: 20em; height: 28.5em;}
.article-list .editorial .article__author-photo {position: absolute; right: 0; top: -7em; width: 6em; height: 6em; background-size: cover;}
.article-list .editorial header {padding: 0 0 .25em;}
.article-list .editorial .article__title {margin: 0;min-height: 0;}
.article-list .editorial .article__title a:before {left: -21em; top: -7em; width: 20em; height: 28.5em;} /* <-- link over picture */

.article-list .editorial dd a,
.article-list .editorial dd time {}
.article-list .editorial .article__author {bottom: .75em; width: 8em;}
.article-list .editorial .article__author a {padding: 0; background: none; color: inherit; white-space: normal;}
.article-list .editorial .article__category {left: 0; bottom: 4em;}


/* --- advertisement article --- */

.article-list .advert {padding: 0;}
.article-list .advert article {height: 9.5em; padding: 0; overflow: visible;}
.article-list .advert .article__image {left: 0; top: 0; height: 9.5em; margin: 0; padding: 0;}
.article-list .advert header {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.article-list .advert .article__title {position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; max-height: none;}
.article-list .advert .article__title a {display: block; width: 100%; height: 100%;}
.article-list .advert .article__title span {display: none}
.article-list .advert .article__title a:before {content: none;} /* <-- link over picture */
.article-list .advert .article__info,
.article-list .advert .article__content {display: none;}




/* Article detail */

.article-detail {width: 50em; float: left;}

.article-detail header {padding: 0 2em .5em; position: relative;}

.article-detail blockquote h3 {margin-top: 0;}

.article-detail .question {font-weight: bold; color: #8b0030; margin-top: 1.5em;}
.article-detail .greek {font-weight: bold; font-style: italic;}
.article-detail .variable {font-weight: bold; font-style: italic;}


.article-detail .article__info {position: relative; overflow: hidden; margin-bottom: 1em;}
.article-detail .article__info dd {font-size: .875em; color: #333; margin-bottom: .25em;}
.article-detail .article__info a {color: inherit; text-decoration: none;}
.article-detail .article__info a:hover {color: black;}
.article-detail .article__author {float: left; max-width: 50%;}
.article-detail .article__author a {display: block;}
.article-detail .article__author span {display: none;}

.article-detail .article__attributes {float: right; max-width: 50%;}
.article-detail .article__published,
.article-detail .article__category {float: right; margin-left: .5em;}
.article-detail .article__published:before {content: '|'; margin-right: .5em;}

.article-detail .article__comments {clear: both; float: right;}

.article-detail .author-photo {width: 10em; float: left; margin: 0 1em 1em 0;}
.article-detail img {max-width: 100% !important; height: auto !important;}
.article-detail p + img,
.article-detail ul + img {margin-top:2em;}

.article-detail .main-image/*, .article-detail .main-image img*/ {width: 100%; margin: 0;}
.article-detail .main-image figcaption {padding: .5em 2em; background: linear-gradient(to bottom, rgba(0,0,0,.15),rgba(0,0,0,.03));}

.article-detail p.important {color: #8c072e; padding-left: 2em; font-weight: bold; font-style: italic; position: relative;}
.article-detail p.important:before {content: '✏'; display: block; position: absolute; left: 0; top: 0; font: 1.5em/1 Symbol;}

.article-detail ul.important>li,
.article-detail ol.important>li {color: #8c072e; font-weight: bold;}
.article-detail ul.important>li::marker,
.article-detail ol.important>li::marker {color: #8c072e;}

.article-detail .person-quote {margin: 0 0 1em;}
.article-detail .person-quote>div {display: table; margin: 0 0 .5em;}
.article-detail .person-quote>div>div {display: table-cell; vertical-align: middle;}
.article-detail .person-quote div h4 {margin-bottom: .5em;}
.article-detail .person-quote div p {margin: 0;}
.article-detail .person-quote img {width: 6em; height: 6em; margin: 0 1em 0 0; border-radius: 50%;}


.article-detail .main-image figcaption span {font-size: 0.875em; color: #2d2d2d;}

.article-detail__content {padding: 2em; line-height: 1.5;}
.article-detail__content img {margin-bottom: 2em;}
.article-detail__content>div {overflow: hidden;}
.article-detail__perex {margin-bottom: 1em; overflow: hidden;}
.article-detail__perex p {font-weight: bold; font-size: 1.125em; color: #333;}
.article-detail__perex p:last-child {margin: 0;}

.article-detail__perex .portrait {position: relative; float:left; width: 8em; height: 8em; margin: 0 1em 0 0; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%;}



.article-detail__content ul {margin: 0 0 1em 0;}
.article-detail__content ul>li {padding-left: 1em; margin-bottom: .25em; position: relative;}
.article-detail__content ul>li:after {position: absolute; display: block; content: ''; width: .5em; height: .5em; left: 0; top: .5em; background: #797979; border: 1px solid #929292; box-sizing: border-box;}
.article-detail__content li>ul,
.article-detail__content li>ol {margin-top: .25em;}

.article-detail__content ol {list-style-type: decimal; list-style-position: outside; margin-left: 3em;}
.article-detail__content ol>li::marker {font-weight: bold; color: #797979;}
.article-detail__content ol.lower-greek {list-style-type: lower-greek;}
.article-detail__content ol.lower-latin {list-style-type: lower-latin;}
.article-detail__content ol.upper-latin {list-style-type: upper-latin;}
.article-detail__content ol.lower-roman {list-style-type: lower-roman;}
.article-detail__content ol.upper-roman {list-style-type: upper-roman;}
.article-detail__content ol li {margin-bottom: .25em;}

.article-detail__content ol.parenthesed-latin {list-style: none; counter-reset: level1; margin-left:0; }
.article-detail__content ol.parenthesed-latin > li {counter-increment: level1; position: relative; padding-left:1.25em;}
.article-detail__content ol.parenthesed-latin > li::before {content: counter(level1, lower-alpha) ")"; position: absolute; left: 0; font-weight: bold;}
.article-detail__content ol.parenthesed-latin ol {list-style: none; counter-reset: level2; margin-left:1em;}
.article-detail__content ol.parenthesed-latin ol > li {counter-increment: level2; position: relative; padding-left: 1.25em;}
.article-detail__content ol.parenthesed-latin ol > li::before {content: counter(level2, lower-roman) ")"; position: absolute; left: 0;}



.article-detail__content .wp-caption {margin: 2em 0; max-width: 100% !important;}
.article-detail__content .wp-caption img {width: 100% !important; height: auto !important; margin: 0;}
.article-detail__content .wp-caption+ul {margin-top: -1em;}

.article-detail__content .citation {padding-left: 1em; border-left: 1px solid #797979;}
.article-detail__content .highlight {background: #eee; padding: .5em; margin-bottom: 1em;}


.article-detail__content .wp-caption-text {font-size: 0.875em; background: linear-gradient(to bottom, rgba(0,0,0,.15),rgba(0,0,0,.03)); margin-bottom: 0; padding: .25em .5em;}


.building-list>li {margin-bottom: 2em !important;}
.building-list>li h4 {margin: .5em 0 1em 0;}
.building-list>li img {margin: 1em 0;}


.article-detail__content nav, .site-page nav {margin: 2em auto 1em; background: #f3f3f3; padding: 1em;}
.article-detail__content nav ul, .site-page nav ol {margin-bottom: 0;}
.article-detail__perex+nav {margin-top: 1em;}


.event h3, .event h4, .event h5 {margin: 0 0 .5em;}



.article-detail__content blockquote.book {overflow: hidden;}
.article-detail__content blockquote.book img {float: left; margin: 0 1em .5em 0; width: 25%;}

.other-articles {width: 31em; float: right; clear: none;}
.other-articles .article-list li {width: 100%; margin: 0 0 1em;}
.other-articles .article-list article {width: auto; height: 8.5em; padding: 1em 1em 0 10.5em; overflow: visible;} /* <-- Height -1 */
.other-articles .article__image {height: 9.5em; width: 9.5em;}
.other-articles .active .article__image:after {position: absolute; content: ''; left: -.325em; top: 0; width: .25em; height: 100%; background: #505252;}

.other-articles .article__info {top: -.125em; right: 0;}



.other-articles .article__background {height: 8em; padding-top: .125em; margin-top: -.15em; overflow: hidden;}
.other-articles .article__title {margin-top: .85em;}
.other-articles .article__title a:before {left: -10.5em; top: -.6em; width: 9.5em; height: 9.5em; background: red;} /* <-- link over picture */

.other-articles .article__category {display: none;}

.other-articles .article-list .text-only article {padding: 1em 1em 0 1em;}
.other-articles .text-only .article__title {min-height: 0; max-height: none;}



/* Comments */

.comments {margin: 4em 0 2em; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; padding: 1em 0;}
.comments textarea {width: 100%; height: 10em; border: 1px solid #ccc; margin-bottom: .5em; max-width: 100%;}
.comments input[type=submit] {width: 100%; line-height: 2em; background: #8e9191; color: white; border: none;}
.comments input[type=submit]:hover {background: #666;}

.comments ul {margin-top: 2em;}
.article-detail__content .comments li {padding: 0 0 1em 1em; border: 1px solid #ccc; border-top: none; border-right: none; margin-bottom: 1em;}
.article-detail__content .comments li:after {display: none;}

.comments li h3 {font-size: 1em;}
.comments li p {margin-bottom: .25em;}
.comments li p:last-child {margin-bottom: 0;}
.comment__info {display: inline-block; padding: 0 .5em; background: #ddd; margin-bottom: .5em; overflow: hidden;}
.comment__info dt {display: none;}
.comment__info dd {float: left; margin-right: .5em;}
.comment__author {font-weight: bold; margin-right: 0 !important;}



/* Page */

.page {padding: 0 1.5em;}
.site-page {line-height: 1.5;}
.site-page h2 {margin-bottom: 1em;}
.site-page h3 {margin-top: 1em;}
.site-page ul {margin-bottom: 1em;}
.site-page li {margin-bottom: .125em; list-style-type: disc; margin-left: 1.375em;}




/* Article list tik */

.article-list-tik {margin: 2em 0 0;}
.article-list-tik:after {display: block; content: ""; clear: both;}


/* --- default article --- */
.article-list-tik li {float: left; margin: 0 8px 16px; background: linear-gradient(to bottom, #fafafa, #f0f0f0);}
.article-list-tik article {width: 41em; height: 23em; padding: 11.5em 1.5em 1.5em; position: relative;}

.article-list-tik .portrait {position: absolute; left: 1.5em; top: 1.75em; width: 8em; height: 8em; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%;}

.article-list-tik .author {display: table; position: absolute; left: 11em; top: 0em; height: 11.5em; width: 28.5em;}

.article-list-tik dl {display: table-cell; vertical-align: middle;}
.article-list-tik dt {display: none;} 

.article-list-tik h3 {margin: 0 0 .5em; overflow: hidden;} 
.article-list-tik h3 a {color: #ea5b0c; text-decoration: none;} 
.article-list-tik h3 a:hover {color: black; text-decoration: underline;} 

.article-list-tik p {height: 7.5em; overflow: hidden;}

.article-detail.tik header {padding: 11.5em 2em 0;}

.article-detail.tik .portrait {position: absolute; left: 1.5em; top: 1.75em; width: 8em; height: 8em; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%;}

.article-detail.tik .author {position: absolute; left: 11em; top: 0em; height: 11.5em; right: 0em;}
.article-detail.tik .author>div {display: table; width: 100%; height: 100%;}


.article-detail.tik dl {display: table-cell; vertical-align: middle;}
.article-detail.tik dt {display: none;} 

.article-detail.tik h2 {color: #ea5b0c; margin: 0;}

.other-articles-tik {width: 31em; float: right; clear: none;}
.other-articles-tik .article-list li {width: 100%; margin: 0 0 1em;}
.other-articles-tik .article-list article {width: auto; height: 8.5em; padding: 4em 1em 0 10em; overflow: visible;}
.other-articles-tik .article__image {height: 9.5em; width: 9.5em;}

.other-articles-tik .portrait {position: absolute; left: .75em; top: .75em; width: 8em; height: 8em; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%;}

.other-articles-tik .author {position: absolute; left: 10em; top: 3.5em; width: 20em;}

.other-articles-tik dt {display: none;} 


.other-articles-tik h3 {font-size: 1.25em} 
.other-articles-tik h3 a {color: #ea5b0c; text-decoration: none;} 
.other-articles-tik h3 a:hover {color: black; text-decoration: underline;} 

.test {max-width: 80%;}
.test h2 {margin:0 0 1em;}
.test li {margin: 0 0 .25em;}


/* Calculator */

#calculator>div {padding: 1em; margin-bottom: 1em; background:#eee;}

#calculator table {width: 100%; border-collapse: collapse; margin-top: 1em;}
#calculator th, #calculator td {border: 1px solid #ccc; padding: .5em; text-align: left;}
#calculator th {background: #f4f4f4;}
#calculator .h-background {background: rgb(154, 0, 2);}

#calculator input {width:auto; background: white; border: none; display: inline-block; color: inherit; font-size: inherit;}

#calculator {counter-reset: heading;}
#calculator h3 {margin:0 0 .5em; counter-increment: heading;}
#calculator h3:before {content: counter(heading)". ";}




/* Responsive */

@media (min-width: 1264px) and (max-width: 1343px) {
body {font-size: 15px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 1264px;}
.article-list .editorial article,
.article-list .big article {width: 616px;}
}

@media (min-width: 1184px) and (max-width: 1263px) {
body {font-size: 14px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 1184px;}
.article-list .editorial article,
.article-list .big article {width: 576px;}
}

@media (min-width: 1104px) and (max-width: 1183px) {
body {font-size: 13px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 1104px;}
.article-list .editorial article,
.article-list .big article {width: 536px;}
}

@media (min-width: 1024px) and (max-width: 1103px) {
body {font-size: 12px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 1024px;}
.article-list .editorial article,
.article-list .big article {width: 496px;}
}

@media (min-width: 944px) and (max-width: 1023px) {
body {font-size: 11px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 944px;}
.article-list .editorial article,
.article-list .big article {width: 456px;}
}

@media (min-width: 864px) and (max-width: 943px) {
body {font-size: 10px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 864px;}
.article-list .editorial article,
.article-list .big article {width: 416px;}
}

@media (min-width: 784px) and (max-width: 863px) {
body {font-size: 9px;}
#calculator {font-size: 16px;}
.site-content,
.site-footer__content {width: 784px;}
.article-list .editorial article,
.article-list .big article {width: 376px;}
}

@media (max-width: 783px) {
body {font-size: 16px;}
#calculator {font-size: 16px;}
.site-header {font-size: 8px; margin-bottom: 1em; width: 79em;}
.site-navi {margin-bottom: 1.25em;}
.site-menu a {padding: 0 .75em;}
.site-search {margin-right: -21em; width: 10em; height: 100%;}
.site-content,
.site-footer__content {width: 672px;}

.article-detail {width: 100%; float: none;}
.article-detail header {padding: 0 1em .5em;}
.article-detail__content {padding: 1em;}
.article-detail .article__author {width: 50%;}

.other-articles, .other-articles-tik {width: 100%; padding: 0 1em; float: none;}

.other-articles ul {font-size: 14px;}

.test {max-width: 100%;}

/*.site-footer__content .column {width: 50%;}
.site-footer__content .column:nth-child(3) {width: 100%;}*/

.article-detail.tik header {padding: 11.5em 1em 0;}


.site-navi {padding: 0 1em; height: auto; min-height: 2.5em;}
.site-navi-show {display: block;}
.site-search {right: 1em; margin-right: 0; width: 12em; height: 2.5em;}
.site-search label {width: auto;}

.closed .site-menu {display: none;}
.site-menu {margin-left: -1em; margin-right: -1em; width: auto; border-top: 1px solid white;}
.site-menu li {float: none; margin: 0 0 .125em;}
.site-menu a {padding: 0 1em;}
}

@media (max-width: 672px) {
body {font-size: 15px;}
#calculator {font-size: 16px;}
.site-header {width: 600px;}
/*.site-menu {width: 624px;}*/
.site-content,
.site-footer__content {width: 632px;}
.article-list .editorial article,
.article-list .big article {width: 616px;}

}

@media (max-width: 632px) {
body {font-size: 14px;}
#calculator {font-size: 16px;}
.site-header {width: 564px;}
/*.site-menu {width: 584px;}*/
.site-content,
.site-footer__content {width: 592px;}
.article-list .editorial article,
.article-list .big article {width: 576px;}
}

@media (max-width: 592px) {
body {font-size: 13px;}
#calculator {font-size: 16px;}
.site-header {font-size: 7px;width: 526px;}
/*.site-menu {width: 544px;}*/
.site-content,
.site-footer__content {width: 552px;}
.article-list .editorial article,
.article-list .big article {width: 536px;}

}

@media (max-width: 552px) {
body {font-size: 12px;}
#calculator {font-size: 16px;}
.site-header {width: 488px;}
/*.site-menu {width: 504px;}*/
.site-content,
.site-footer__content {width: 512px;}
.article-list .editorial article,
.article-list .big article {width: 496px;}
}

@media (max-width: 512px) {
body {font-size: 11px;}
#calculator {font-size: 16px;}
.site-header {width: 450px;}
/*.site-menu {width: 466px;}*/
.issue-list {font-size: 6px;}
.site-content,
.site-footer__content {width: 472px;}
.article-list .editorial article,
.article-list .big article {width: 456px;}
}

@media (max-width: 472px) {
body {font-size: 10px;}
#calculator {font-size: 16px;}
.site-header {width: 412px;}
/*.site-menu {width: 426px;}*/
.issue-list {font-size: 5px;}
.site-content,
.site-footer__content {width: 432px;}
.article-list .editorial article,
.article-list .big article {width: 416px;}

}

@media (max-width: 432px) {
body {font-size: 16px;}
.site-header {font-size: 12px; width: 100%; height: 16em;}
.site-logo {position: relative; bottom: auto; height: 14em; width: 24em; margin: 0 auto;}
.site-logo a:before {left: 16px;}
.site-logo:after {right: 16px;}
.issue-list {display: none;}
.issue-number {left: 16px; bottom: 0; width: 8.25em; height: 2em; background: #505253;}

/*.site-navi {padding: 0 1em; height: auto; min-height: 2.5em;}
.site-navi-show {display: block;}
.site-search {right: 1em; margin-right: 0; width: 12em; height: 2.5em;}
.site-search label {width: auto;}

.closed .site-menu {display: none;}
.site-menu {margin-left: -1em; margin-right: -1em; width: auto; border-top: 2px solid white;}
.site-menu li {float: none; margin: 0 0 .125em;}
.site-menu a {padding: 0 1em;}*/

.site-content,
.site-footer__content {width: 100%;}
.page {padding: 0 1em;}

.article-list li {margin-left: 0; margin-right: 0; float: none; width: 100% !important;}
.article-list article {width: 100% !important;}
.article-list .editorial {padding-bottom: 0;}
.article-list .editorial article {height: auto; padding: 1em;}
.article-list .editorial .article__title {position: absolute; top: 1em; left: 7em;}
/*.article-list .editorial .article__image {position: relative; left: auto; top: auto; width: 10em; height: 14.25em; margin: -7em 1em .5em 0; float: left;}*/
.article-list .editorial header {height: 7em;}
.article-list .editorial .article__image {position: relative; margin: 0 auto 1em; left: auto; top: auto;}
/*.article-list .editorial .article__author {bottom: .8865em; width: auto;}*/
.article-list .editorial .article__author-photo {position: relative; left: auto; top: auto; margin: .5em 1em 0 0; float: left;}
.article-list .editorial dl {left: 7em; top: auto; bottom: 0; width: auto; }
.article-list .editorial .article__title a:before {z-index: 5; left: 0; top: 0; width: 6em; height: 6em; display: none;} /* <-- link over picture */

.article-detail__content blockquote.book img {float: none; margin: 0 0 1em 0; width: 100%;}

.other-articles-tik .article-list article {padding: 2em 1em 0 9.5em; }
.other-articles-tik .author {left: 9.5em; top: 1.5em;}
.other-articles-tik .author dd {font-size: .75em;}

.other-articles-tik h3 {font-size: 1em} 

.site-footer__content>div {margin: 0; padding: 0; float: none; width: 100% !important;}
}

@media (max-width: 320px) {
.article-list .editorial article {height: auto; padding-top: 0;}
.article-list .editorial .article__image {margin: 0 0 1em -1em;}
}