/* 30 let CKAIT
Jindrich Sladek (jindrich.sladek@digisvet.cz)
Digitalni svet s.r.o. (http://digisvet.cz) */



/* fonts */

@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-Regular.woff') format('woff'); font-weight:normal; font-style:normal;}
@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-Italic.woff') format('woff'); font-weight:normal; font-style:italic;}
@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-Medium.woff') format('woff'); font-weight:600; font-style:normal;}
@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-MediumItalic.woff') format('woff'); font-weight:600; font-style:italic;}
@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-Bold.woff') format('woff'); font-weight:bold; font-style:normal;}
@font-face {font-family:'GeneralSans'; src:url('fonts/GeneralSans-BoldItalic.woff') format('woff'); font-weight:bold; font-style:italic;}
@font-face {font-family:'Symbols'; src:url('fonts/Symbols.woff') format('woff'); font-weight:normal; font-style:normal;}



/* reset */

html {width:100%; height:100%; margin:0; padding:0;}
body {font:24px/1.5 GeneralSans, Verdana, Arial, Helvetica, sans-serif; max-width: 80em; margin:0 auto; padding:0 4em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; box-sizing:border-box; text-size-adjust: none; -webkit-text-size-adjust:none;}

header, main, footer, section, article, aside {display:block; box-sizing:border-box;}
li {box-sizing:border-box;}

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

h1, h2, h3, h4, h5, h6 {line-height: 1.25;}

p {margin:0 0 .5em;}

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

dl, dt, dd {margin:0;}
dl {margin-bottom: .5em;}

nav>ul {margin:0;}

img {display:block;}

a {color: black;}
a:hover {text-decoration: underline; color: #a9872a;}

hr {border:none; height:1px; background: #999; margin: 1.5em 0 2.5em;}

dt {color: #a9872a; font-weight: bold;}
dt:after {content:':';}
dd {margin: 0 0 .75em 1em;}

dl dl {margin: .25em 0;}
dl dl dt {font-weight: 600;}
dl dl dd {margin: 0 0 .25em 1em;}

dl dl dl dt {font-weight: normal;}

dl.inline dt {font-weight: normal; margin-right: .25em; display: inline;}
dl.inline dd {display: inline; margin: 0;}
dl.inline dd:after{display: block; content: ''; margin: 0 0 .25em;}

dl.black dt {color: black;}
dl.dd-bold dd {font-weight: bold;}

/* modificators */

.fl {float:left !important;}
.fr {float:right !important;}

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

.hidden {display:none;}



/* colors */
.ckait-modra {color: #143b62;}
.ckait-zlata {color: #a9872a;}



/* header */

.site-header {position: relative; height: 6em;}

.site-logo {float:left; font-size: 1em; height: 100%; line-height: 1; margin: 0; font-weight: normal; text-transform: uppercase;}
.site-logo a {display: flex; align-items: center; width: 100%; height: 100%; text-decoration: none; color: black; position: relative;}
.site-logo .all-text {font-size: 1.25em; margin: 0 0 0 5.125em;}
.site-logo:before {content:'30'; position: absolute; font-size: 10em; left: 0; top: -.25em; font-weight: bold; color: #ddd; z-index:-1;}

.ckait-30-let {display: block; position: absolute; right: 0; top: 1em; width: 4em; height: 4em; background: url(images/ckait-30-let-logo.png) no-repeat center; background-size: contain;}
.ckait-30-let span {display: none;}



/* header */

.main-photo {position: relative; margin: 0 -4em 4em; aspect-ratio: 16/9;}
.main-photo img {width: 100%;}
.main-photo__background {aspect-ratio: 16/9;}
.main-photo__personality {position: absolute; left:0; top: 0;}

.main-photo__text {position: absolute; left: 4em; top: 3em; width:20em; z-index: 10; color: white;}
.personalities .main-photo__text {left: 4em; top: 6em;}

.main-photo video {position: absolute; left: 0; top: 0; width: 100%;}

#image-list {position: absolute; left: 0; top:0; width: 100%; height: 100%; margin: 0; padding: 0;}
#image-list li {position: absolute; left:0; top: 0;}

#spinner {position: absolute; left: 0; top:0; width: 100%; height: 100%; background: #ddd;}
#spinner img {position: absolute; left:50%; top: 50%; width: 4em; height: 4em; margin: -2em 0 0 -2em;}

.tagline {position: absolute; top: 4em; right:4em; text-align: right; color: white;}
.tagline span {font-size: 1.25em;}

.ckait-logo {position: absolute; right: 4em; bottom: 4em;}
.ckait-logo a {font-family: 'Symbols'; font-size: 8em; color: white; line-height: 1; text-decoration: none;}
.ckait-logo a:hover {color: #a9872a;}


.arrow {color: white; text-decoration: none; font-family: 'Symbols'; color: white;}
.arrow:hover {text-decoration: none;}
.arrow span {display: none;}

.big-logo {position: absolute; left: 4em; top: 50%; font-size: 4em; line-height: 0; margin-top: -.125em; color: white; text-transform: uppercase;}
.big-logo:before {content:'30'; position: absolute; font-size: 8em; left: -.64em; top: -.03em; font-weight: bold; color: rgba(255,255,255,.2);}
.big-logo .arrow {position: absolute; right: -.75em; top: 0;}


.date {font-size: 4em; font-weight: bold; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,.5);}
.date>span {line-height: 1;}


.name {font-size: 2.5em; font-weight: normal; line-height: 1.125; margin-bottom: 1em;}
.name strong {font-size: 2em;}
.motto {font-size: 1.75em; line-height: 1.25;}


.personalities-nav {position: absolute; right: 4em; bottom: 4em; line-height: 1;}
.personalities-nav .arrow {font-size: 4em;}


.download-pdf {position: absolute; left: 4em; bottom: 4em; color: white;}
.download-pdf a {color: white;}
.download-pdf a:hover {color: #a9872a;}


.constructions .tagline,
.constructions .big-logo,
.constructions .ckait-logo a {color: black;}
.constructions .ckait-logo a:hover {color: white;}

.constructions .big-logo:before {color: rgba(0,0,0,.2); }
.constructions .big-logo .arrow {color: black;}
.constructions .big-logo .arrow:hover {color: white;}

.constructions .download-pdf a {color: black;}
.constructions .download-pdf a:hover {color: white;}



/* main content */

.main {margin: 0 auto;}

.two-columns:after {display:block; content:""; clear:both;}
.left-column {width: 60%; float: left;}
.right-column {width: 35%; float: right;}

.left-column p {text-align: justify;}
.left-column p.question {text-align: left;}
.left-column img {max-width: 100%; margin: 1em auto;}

.left-column .author-signature {text-align: right; margin: 2em 0;}


.left-column ul,
.right-column ul {list-style-type: disc; padding-left: 1.25em;}

.title-more-about {display: none;}



/* index */

.guidepost {display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; right:0; bottom:0; padding: 0 3em;}
.cover {position: relative; display: block; width:48%; width: calc(50% - 1em); color: black; margin: 0 1em;}
.cover img {width:100%; margin: 0; border: 1px solid black; box-shadow: 0 0 1em black;}
.cover span {display:block; position: absolute; left: 1em; bottom: 1em; line-height: 1; color: white;}
.cover:hover img {border: 1px solid #a9872a; box-shadow: 0 0 2em black;}
.cover:hover span {text-decoration: underline;}

.left-column .author-photo {float: left; width: 20%; margin: 0 1em .25em 0;}
.index .perex {text-align: left;}

article {margin: 0 0 2em;}
article img {width: 100%; margin: 0;}
article h4 {margin: .5em 0 .25em;}



/* personalities */

.question {font-weight: bold; text-align: left;}

.cv {font-weight: bold;}
.cv dt {display: none;}
.cv dd {margin-left: 0;}

.cv {font-size: 1.25em;}
.born {margin-bottom: 1.5em;}




/* constructions */

.title {font-size: 4em; line-height: 1.125em; margin: -.125em 0 .75em;}
.place {font-size: 1.5em; margin: 0 0 1em; font-weight: bold;}
.perex {font-size: 1.25em; margin: 0 0 1em; font-weight: 600; line-height: 1.25;}

.right-column h3 {margin-top: 0;}
.right-column section {margin: 0 0 1.5em; padding: 0 0 1em; border-bottom: 1px solid #999;}
.right-column section:last-child {margin: 0; padding: 0; border-bottom: none;}


.quote {margin: 1em 0; padding-left: 1em; border-left: 2px solid #ddd; font-style: italic; font-weight: 600;}
/*.quote:before, .quote:after {content:'„'; font-size: 4em; position: absolute; color: #999;}
.quote:before {top: -.9125em; left: 0;}
.quote:after {content:'“'; bottom:-.8em; margin-left:-.05em}*/
.author {display: block; font-size: .875em; font-weight: normal; margin: .25em 0 1.5em; text-align:left;}



/* buttons */

.button {display: block; font-size: 2em; line-height: 1em; width: 1em; height: 1em; text-align: center; background: rgba(128,128,128,.5); color: white; border-radius: .5em; font-family: 'Symbols'; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer;}
.button span {display: none;}
.button:hover {color: #a9872a;}


/* list */

.list:after {display:block; content:""; clear:both;}
.list li {width: 48%; width: calc(50% - 1em); margin-bottom: 2em; float: left; aspect-ratio: 16/9; background: #aaa;}
.list li:nth-child(even) {float:right}
.list a {position: relative; display: block; text-decoration: none;}
.list a:hover {box-shadow: 0 0 1em black;}

.list img {width: 100%; margin: 0;}
.list p {position: absolute; left: .75em; top: .75em; font-weight: bold; color: white; font-size: 1.5em; line-height: 1;}

.list h3 {position: absolute; color: white; line-height: 1.25; margin: 0; box-sizing:border-box;}
.constructions .list h3 {bottom: 0; left: 0; padding: .75em 1em; width: 100%; background: rgba(0,0,0,.5);}
.personalities .list h3 {font-size: 1em; left: 2em; top: 2em; width: 40%; font-weight: normal;}
.personalities .list h3 strong {font-size: 1.5em;}



/* foto reference */

#lightbox {display: none;}
#close {display: none;}

#reference .button {position: absolute; margin: -.5em 0 0;}
#reference #previous {left: -1.5em; top: 50%;}
#reference #next {right: -1.5em; top: 50%;}

#reference-list {margin: 1em -.5em; list-style-type:none; padding: 0;}
#reference-list:after {display:block; content:""; clear:both;}
#reference-list li {width: 22%; width: calc(25% - 1em); margin: 0 .5em 1em; float: left;}
#reference-list a {display:block; height:100%;}
#reference-list img {max-width: 100%; max-height: 100%; margin: 0 auto;}

#reference.expanded {position: fixed; left:0; top: 0; right: 0; bottom: 0; background: white; z-index: 100;}
#reference.expanded h3 {position: absolute; font-size: 1em; line-height: 1.25; left: 4em; top: 0em; right: 4em; height: 4em; color: black; margin: 0; display:flex; justify-content: center; align-items: center; text-align: center; font-weight: normal;}

#reference.expanded #lightbox{display: block; position: absolute; left: 4em; top: 4em; right: 4em; bottom: 6em;}
#reference.expanded #close {display: block; right: .5em; top: 1em;}
#reference.expanded #image-container {display: flex; position: relative; width: 100%; height: 100%; align-items:center; justify-content:center;}

#reference.expanded #lightbox img {max-width: 100%; max-height: 100%;}

#reference.expanded #reference-list {display: flex; justify-content: center; position: absolute; bottom: 1em; height: 4em; width: 100%; margin: 0; }
#reference.expanded li {width: auto; height: 100%;}
#reference.expanded a {border: 1px solid black;}
#reference.expanded .active a {border: 1px solid #a9872a;}
#reference.expanded a:hover {border: 1px solid #a9872a;}



/* footer*/
footer {padding: 0 0 2em;}
.logos h3 {text-align: center; font-size: 1em; color: #999;}
.logos ul {display:flex; flex-wrap: wrap; justify-content: center;}
.logos li {margin: 1em; width: 7em;}
.logos img {width: 100%;}

/* responsive */

@media (max-width:1600px) {
body {font-size:20px;}
}

@media (max-width:1440px) {
body {font-size:18px;}
}

@media (max-width:1280px) {
body {font-size:16px;}
.logos li {width: 8em;}
}

@media (max-width:1120px) {
body {font-size:14px;}
.logos li {width: 10em;}
}

@media (max-width:960px) {
body {font-size:12px;}
.logos li {width: 12em;}
}

@media (max-width:800px) {
.personalities .main-photo__text {left: 4em; top: 6em;}
.name {font-size: 2.25em; margin-bottom: .25em;}
.left-column .perex {text-align: left;}
}

@media (max-width:768px) {
.big-logo {font-size: 3.5em; }
.personalities .main-photo__text {left: 4em; top: 4em;}
.name {font-size: 2em; margin-bottom: .25em;}
}

@media (max-width:640px) {
body {padding: 0 2em;}
.main-photo {position: relative; margin: 0 -2em 2em;}
.big-logo {font-size: 3em; }
.tagline {top: 2em; right:2em;}
.ckait-logo {right: 2em; bottom: 2em;}
.ckait-logo a {font-size: 6em;}
.download-pdf {left: 2em; bottom: 2em;}
.guidepost {padding: 0 1em;}
.title {font-size: 3em;}
.name {font-size: 1.5em; margin-bottom: .25em;}
.motto {font-size: 1.75em; line-height: 1.25;}
.personalities .main-photo__text {position: relative; left: auto; top: auto; margin: 1.5em 2em; width: auto; color: black;}
.personalities-nav {bottom: auto; left: 2em; top: 2em;}
.constructions .list h3 {font-size: 1em;}
}

@media (max-width:480px) {
.site-logo .all-text {margin: 0 0 0 1.65em;}
.site-logo .part-text {display:block; line-height: 1.25;}
.site-logo .point {display:none}
.big-logo {font-size: 2.25em;}
.cover span {width: 50%;}
.title {font-size: 2.5em;}
.name {font-size: 1.25em;}
.two-columns:after {display:block; content:""; clear:both;}
.left-column {width: auto; float: none; }
.right-column {width: auto; float: none; border-top: 1px solid #999; margin: 1.5em 0; padding: 1.5em 0 0;}
.index .right-column {padding: 2em 0;}
.title-more-about {display: block; margin-bottom: 1em;}
.cv dt {display: block;}
.list {padding-bottom: 1em;}
.list li {width: auto; float: none;}
.list li:nth-child(even) {float:none;}
.constructions .list h3 {font-size: 1.5em;}
}

@media (max-width:400px) {
.big-logo {font-size: 1.75em;}
}

@media (max-width:360px) {
.big-logo {font-size: 1.25em;}
.tagline span {font-size: 1em;}
.ckait-logo {bottom:1em;}
.ckait-logo a {font-size: 4em;}
.download-pdf {bottom: 1em;}
}

@media (max-height:400px) {
#reference.expanded #lightbox{left: 4em; top: 4em; right: 4em; bottom: 2em;}
#reference.expanded #reference-list {display:none;}
}