@import url('https://fonts.googleapis.com/css2?family=Megrim&family=Roboto+Condensed:wght@400;700&subset=latin,latin-ext&display=swap');

* {-ms-text-size-adjust:none; -webkit-text-size-adjust:none}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, menu, li, table, td, th, form, iframe {margin:0; padding:0}
img {border:0; vertical-align:middle; -ms-interpolation-mode:bicubic}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){img {image-rendering:-webkit-optimize-contrast}}
a {color:inherit; text-decoration:underline}
body {position:relative; font-family:'Roboto Condensed', sans-serif; line-height:1.375; color:#000; background:#FFF}

header {position:absolute; z-index:99; width:100% !important /* kvuli JS */; padding:2.5em 0 .5em; color:#FFF; background:transparent; box-sizing:border-box; transition:box-shadow .4s, padding .4s}
header.fixed {padding:.5em 0; color:#FFF; background:#00408D; box-shadow:0 .75em .75em rgba(0,0,0,.2)}
header .content {display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1400px; margin:0 auto; padding:0 1em}
header .logo {display:block; width:10em; height:2em; text-indent:-99em; overflow:hidden; background:url('logo-tickeportal.png') no-repeat 0 50% / contain}

.menu {position:relative;}
.menu .menu-nav {display:block; width:2em; height:2em; border:1px solid #FFF; border-radius:.25rem; background:url('icon-menu.svg') no-repeat 50% 50% / 60% 60%; box-sizing:border-box; cursor:pointer}
.menu.active .menu-nav {background-image:url('icon-close-i.svg')}
.menu ul {position:absolute; top:2em; right:0; z-index:2; display:none; flex-direction:column; margin:3px 0 0; color:#FFF; background:#00408D; box-shadow:0 0 .75em rgba(0,0,0,.2)}
.menu.active ul {display:flex}
.menu li {list-style:none; white-space:nowrap}
.menu a {display:block; padding:.5em 1em; text-decoration:none}
.menu a:hover {background-color:#003678}
@media all and (min-width:1000px){
.menu .menu-nav {display:none}
.menu ul {position:static; display:flex; flex-direction:row; margin:0; background:none; box-shadow:none}
.menu li {font-size:87.5%}
}

footer {color:#4B4B4B; background:#F1F1F1;}
footer p {font-size:87.5%}
footer p + p {margin-top:2em}

/* section */
.extrarow {display:flex; flex-direction:column; justify-content:flex-end; height:100vh; color:#FFF; background:#00408D url('backgr-top.png') no-repeat 50% 50% / cover}

.clame {flex:1; display:flex; flex-direction:column; justify-content:center; padding:3em 1em 0; text-transform:uppercase; text-align:center; font-size:100%; line-height:1.4}
.clame big {display:block; font-family:'Megrim', cursive; font-size:250%}
.clame small {display:block; font-weight:700; font-size:200%}
.clame b:after {content:"."; color:#00FF72}
@media all and (min-width:1000px){
.clame {padding:0 1em 10vh}
.clame big {font-size:5vw}
.clame small {font-size:3vw}
}

.shift {flex:0; margin:0 auto 6vh; text-align:center; text-transform:uppercase; text-decoration:none}
.shift h2 {margin:0 auto .5em; font-weight:700; font-size:150%; color:#00FF72; text-shadow:0 .1em .3em rgba(0,255,114,.63)}
.shift .more {display:block; font-weight:700; font-size:112.5%; line-height:2}
.shift:hover .more {text-decoration:underline}
.shift .more:before {content:''; display:block; width:1em; height:1em; margin:auto; background:url('icon-arr-b.svg') no-repeat 50% 50% / contain; animation:mysa 1000ms infinite}
@keyframes mysa {
	50% {transform:scale(1.4); transform-origin:center 100%;}
}
@media all and (min-width:1000px){
.shift h2 {font-size:225%}
}

.content {max-width:1000px; margin:0 auto; padding:3em 1em; box-sizing:border-box}
@media all and (min-width:1000px){
.content {padding:4em 1em}
}
.bgb {color:#000; background:#F0F7FF}
.bgc {color:#000; background:#F0F7FF url('bckg-triangle-blue2.png') no-repeat 50% 0 / 100% 45px}
.bgw {color:#000; background:#FFF url('bckg-triangle-blue1.png') no-repeat 50% 0 / 100% 45px}
@media all and (min-width:1150px){
.bgc.poradatel {background:url('bckg-triangle-blue2.png') no-repeat 50% 0, #F0F7FF url('telefon.png') no-repeat 100% 100%; background-size:100% 45px, auto auto}
}

h1 {font-weight:700; font-size:87.5%; line-height:2.29; text-transform:uppercase}
.bgb h1, .bgc h1 {color:#00408D}
.bgw h1 {color:#00813A}
h2 {margin:0 0 1em; font-weight:700; font-size:200%; line-height:1.2}
@media all and (min-width:750px){
h2 {font-size:225%}
}

.boxes, .boxhalf {display:grid; grid-template-columns:1fr; gap:2em}
.boxes .item {padding:0 0 0 1em; border-left:3px solid #00408D;}
.boxes h3 {margin:0 0 .5rem; font-weight:700; font-size:125%; line-height:1.6}
.boxes p {font-size:112.5%; line-height:1.444; color:#4B4B4B}
.boxes p small {display:block; padding:.5rem 0 0; font-size:66.67%}
.boxes li {list-style:none; display:block; margin:0 0 .5rem; padding:0 0 0 1.5em; font-size:112.5%; line-height:1.444; color:#4B4B4B; background:url('icon-dot.svg') no-repeat .65em .622em / .2em .2em}
.boxes img, .boxhalf img {width:100%; height:auto}
.vstup .boxes {max-width:750px}
.vstup .boxes h3:after {content:''; display:inline-block; vertical-align:top; width:1rem; height:1.6em; margin-left:.5rem; background:url('icon-done.svg') no-repeat 0 50% / contain}
.kontakt .boxhalf {max-width:750px; align-items:center; gap:0}
@media all and (min-width:750px){
.boxes {grid-template-columns:1fr 1fr}
.boxhalf {grid-template-columns:5fr 4fr; align-items:end}
.boxes .item2 {order:1}
.kontakt .item2 {display:flex; flex-direction:column; justify-content:space-between; height:84%}
}

.kontakt h4 {font-weight:700; font-size:125%; line-height:1.6}
.kontakt p {font-size:112.5%; line-height:1.777}
.icon-phone, .icon-mail {padding-left:1.5em; background:no-repeat 0 .3em / 1em 1em }
.icon-phone {background-image:url('icon-mobile.svg')}
.icon-mail {background-image:url('icon-mail2.svg')}

.list1, .list2 {display:flex; flex-direction:column; gap:.5rem}
.list1 li, .list2 li {list-style:none; padding:0 0 0 1.5em; font-size:112.5%; line-height:1.444; background:url('icon-done.svg') no-repeat 0 .2em / 1em 1em}
.list1 li {line-height:1.777; background-position:0 calc(1.777em / 2 - .5rem); background-size:1rem 1rem}
.list2 li {background-image:url('icon-arr-r.svg')}

.boxfix {width:100%; margin:0 -1em; padding:0 1em; overflow:auto}

.manual {display:flex; gap:6em; width:calc(1000px - 2em)}
.manual li {flex:1 1 25%; list-style:none; position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:1.5em}
.manual li:before {content:''; position:absolute; top:0; left:-3em; height:100%; border-left:1px dashed #00FF72; }
.manual i {display:block; width:1.8em; height:1.8em; margin:0 0 .5em; border:1px solid #000; border-radius:100%; font-style:normal; line-height:1.8; text-align:center}
.manual p {font-size:112.5%}
.manual p + div {flex:0 1 64%}
.manual img {max-width:100%; height:auto}

.reference {background:url('backgr-ref.png') no-repeat 50% 50% / cover}
.blockquote-list {display:flex; gap:4em; width:calc(1000px - 2em); padding:0 1.5em 1em 0}
blockquote {flex:1; display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:.5em; margin:0; padding:1em; border-radius:.5em; color:#4B4B4B; background:#FFF; box-shadow:0 .125em .5em rgba(28,42,75,.06), .5em .5em 0 #F3F3F3;}
blockquote img {width:3.5em; height:3.5em;}
blockquote h4 {padding-top:.5em; font-weight:400; font-size:100%}
blockquote p {font-style:italic; font-size:100%}
@media all and (min-width:1000px){
.blockquote-list {padding:1em 0 6em}
blockquote:nth-child(2) {position:relative; top:5em}
}

.outlink {margin-top:2rem; font-weight:700; font-size:112.5%; line-height:1.444}
.outlink a:after {content:''; display:inline-block; vertical-align:top; width:1em; height:1.444em; margin-left:.5em; background:url('icon-link.svg') no-repeat 50% 50% / 1em 1em}