* { margin: 0; padding: 0; text-indent: 0; border: 0 }
h1, h2, h3, a img { padding: 0; margin: 0; border: 0 }
ul, ol { list-style: none }
table, td, th { border: 0; font-size: 1em; font-weight: normal }
li { margin: 0; list-style-type: none }
hr { display: none }

body { font-family: 'segoe ui', sans-serif }
p, li { color: #333; font-size: .925em; letter-spacing: .3px; line-height: 1.6em }
h1 { color: #cf181f; font-size: 1.4em; letter-spacing: -0.5px; line-height: 1.2em; margin-top: 35px; margin-bottom: 40px }
h1 span { color: #009044 }
h2, h3, .uprava { max-width: 600px; color: #009044; font-size: 2em; text-align: center; letter-spacing: -0.5px; line-height: 1.1em; margin: 0 auto; margin-bottom: 7px }
h2 span { color: #cf181f }

strong { color: #221D4D }
img { max-width: 100%; height: auto }
a { color: #cf181f; text-decoration: underline }
a:hover { text-decoration: none }

.obsah { padding: 0 30px }
.blok { max-width: 920px; margin: 0 auto }
.prava { margin-left: 30px; float: right }
.center { text-align: center }
.clear { clear: both }

#hlava { height: 62px; text-align: center; background-color: #FFF }
.logo { margin-top: 30px; }
.logo span { color: #111 }
.logo a { color: #cf181f; text-decoration: none }

#pozadi { background-image: url(../img/kaldaro-large.jpg); background-position: center top; padding: 70px 0; position: relative }
#pozadi:after { content: ''; width: 100%; height: 100%; top: 0; background-color: #005327; opacity: .85; position: absolute; background-image: linear-gradient(to bottom, #005327, #1B1929) }
#pozadi img { margin-top: -10px; margin-bottom: 20px; animation: anim 4s ease-out }
.vlna { height: 150px; background: url(../img/vlna.svg) center bottom no-repeat; margin-top: -125px; margin-bottom: -10px; position: relative }
.top { position: relative; z-index: 50 }
.zuby { height: 10px; background: url(../img/zuby.png) repeat-x center; margin: 0 -25px; margin-top: 71px; margin-bottom: 63px }
@keyframes anim { 0% { opacity: 0 } 100% { opacity: 1 }}

.flags { margin: 70px 50px; margin-bottom: 60px; line-height: 4em; text-align: left; display: flex; justify-content: center; flex-wrap: wrap }
.flags li { width: 180px; display: inline-block; border-radius: 30px; margin: 5px; padding: 10px 25px; background-color: #e8fff3 }
.flags img { vertical-align: middle; margin-right: 15px; border-radius: 50%; box-shadow: 0 2px 4px rgb(0 0 0 / 45%) }
.flags a { color: #009044; text-decoration: underline; padding: 20px 0 }
.flags a:hover { text-decoration: none }
.flags a:hover img { opacity: .5; transition: all 0.7s cubic-bezier(0.2, 1, 0.22, 1); box-shadow: none }

.tlacitka { margin: 15px 0; margin-bottom: 50px }
.tlacitka li { margin: 0 20px; display: inline-block }
.tlacitko strong { color: #222 }
.tlacitko { width: 250px; font-size: 1.1em; letter-spacing: .5px; word-spacing: -1px; text-decoration: none; text-align: center; margin-top: 25px; padding: 12px 15px; padding-bottom: 15px; display: inline-block; border-radius: 25px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4) }
.tlacitko:hover { text-decoration: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: all .2s ease-in-out }
.bila { color: #222; background: #FFF }
.bila:hover { background-color: rgba(255, 255, 255, .9) }

.vlnka { height: 130px; background: url(../img/vlnka.svg) center bottom; margin-bottom: -30px }
.lista { background-color: #009044; padding: 40px 0 }
.lista .tlacitko { font-size: 1.1em; margin-top: -55px; display: block }
.lista .tlacitko strong { color: #111 }
.akce { max-width: 600px; color: #111; font-size: .935em }
.akce span { color: #FFF; font-size: 1.45em; font-weight: bold; word-spacing: -1px }

#pata { background-color: #111; padding: 20px 0 }
#pata p { color: #FFF; text-align: center }
#pata a { color: #FFF }
.odkaz a { color: #777; line-height: 2em; letter-spacing: .5px; text-decoration: none; transition: all .3s ease }
.odkaz a:hover { color: #FFF }
.odkaz span { margin-left: 3px; margin-right: 8px; border-right: 1px solid #444 }
.copy { color: #777; letter-spacing: .5px; text-align: right; margin-top: -24px; padding-right: 5px; float: right }

/* responzivne */

@media (max-width: 990px) {
html { -webkit-text-size-adjust: 100% }
.flags { margin: 70px 25px; margin-bottom: 60px }
.prava { margin: 0; text-align: center; float: none }
.lista { text-align: center; padding: 40px 15px }
.lista .tlacitko { margin-top: 25px; display: inline-block }
.akce { margin: 0 auto }
#pata { text-align: center; padding: 20px }
.odkaz a { font-size: 1.1em; display: inline-block }
.copy { font-size: 1.01em; text-align: center; margin-top: 3px; padding: 0; float: none }
}

@media (max-width: 830px) {
.flags { margin-bottom: 40px }
}

@media (max-width: 675px) {
h1 { margin-top: 15px }
h2, h3, .uprava { font-size: 1.6em }
h2 br, .popis br, .poznamka br { display: none }
.tlacitka { margin-bottom: 35px }
.zuby { margin: 52px 0; margin-top: 58px }
}

@media (max-width: 625px) {
#pozadi { background-image: url(../img/kaldaro-medium.jpg) }
#pozadi img { max-width: 80% }
}

@media (max-width: 590px) {
.flags { margin-bottom: 10px }
}

@media (max-width: 425px) {
.obsah { padding: 0 15px }
#pozadi { background-image: url(../img/kaldaro-slim.jpg); padding: 45px 0 }
}

@media (max-width: 375px) {
#informace h2 { font-size: 1.7em }
}

/* kaldaro.com */