* {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;}
html {scroll-behavior: smooth;}
html, body {margin: 0; padding: 0; height: 100%;}
#menu {display: flex; flex-direction: row; align-items: flex-end; background: #ffffff url('title.png') top center/auto 60% no-repeat;}
#menu img {width: 60%; cursor: url('pointer.png'), crosshair;}
#menu div {font-size: 1.5em; height: 100%; flex: 14.2%; text-align: center;}
#menu div:last-child {text-align: right; padding-right: 0.3em;}
#banner, #banner_kotle, #banner_klimatizace, #banner_tepelna_cerpadla {height: 60%; position: relative; background-image: url('bg.jpg'); background-repeat: no-repeat; background-size: cover; background-position: top center; z-index: -10;}
#banner_kotle {background-image: url('bg_kotle.jpg');}
#banner_klimatizace {background-image: url('bg_klimatizace.jpg');}
#banner_tepelna_cerpadla {background-image: url('bg_tepelna_cerpadla.jpg');}
#top {width: 100%; height: 50px; background: url('bg_top.png') repeat-x; background-size: contain;}
#bottom {width: 100%; height: 50px; position: absolute; bottom: 0; background: url('bg_bottom.png') repeat-x; background-size: contain;}
.link {text-decoration: none; color: #000000;}
.link:hover {text-decoration: underline 4px solid #ffd42a;}
h1 {text-decoration: underline 4px solid #ffd42a; margin-bottom: 0.5em;}
#content {margin: auto; width: 60%; min-height: 60%; padding: 1em 0 0 0; line-height: 1.4; text-align: justify;}
#content p {padding: 0 1em 0 1em;}
#footer {color: #ffffff; background-color: #666666; padding-top: 1em;}
#kontakt {display: flex; flex-direction: row;  align-items: flex-start;}
#kontakt div {flex: 25%; padding: 1em; text-align: justify;}
#kontakt p {line-height: 1.6;}
#footer a {color: #ffffff;}
#footer a:hover {text-decoration: underline 1px solid #ffd42a;}
hr {border: 1px solid #444444;}
h2, h3 {padding-top: 0.8em; padding-bottom: 0.4em;}
iframe {width: 100%; height: 100%;}
ul, ol {margin: 0 1em 0 4em;}
ol ul {margin-left: 2em; list-style-type: disc;}
#content p {margin: 0.2em 0 0.2em 0;}
.bold {font-weight: bold;}
.center {text-align: center;}
#up {display: block; margin-top: 2em; background-color: #ffd42a; color: #000000; text-decoration: none; text-align: center; font-weight: bold;}
table {margin: auto; border-collapse: collapse;}
td, th {border: 1px solid #444444; padding: 1em;}
.icon {width: 16px;}
#gdpr {padding: 1em;}
.warning {width: 25px;}
.red_warning {text-align: center; margin: 2em auto; background-color: #FFC90E; padding: 0.5em; border-radius: 0.5em; border-style: solid; border-color: #FF7F27;}
.brand {margin: 0 2em 0 0;}
th {background-color: #ffd42a;}
table {text-align: initial;}

#tiles {display: flex; flex-direction: row;  align-items: flex-start;}
#tiles .flip-card:nth-child(1) .flip-card-front, #tiles .flip-card:nth-child(1) .flip-card-back {background-color: #ffd42a;}
#tiles .flip-card:nth-child(2) .flip-card-front, #tiles .flip-card:nth-child(2) .flip-card-back {background-color: #0587ff;}
#tiles .flip-card:nth-child(3) .flip-card-front, #tiles .flip-card:nth-child(3) .flip-card-back {background-color: #ff5757;}

.flip-card {flex: 33%; height: 18em; text-align: center; margin: 2em; color:#000000; perspective: 1000px;}
.flip-card-inner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 1em;}
.flip-card-front {color: #ffffff;}
.flip-card-front img {width: 50%;}
.flip-card-back {color: #ffffff; transform: rotateY(180deg);}
.flip-card-back a {line-height: 18em; background-color: #ffffff; padding: 1em; border-radius: 1em; text-decoration: none; font-weight: bold;}
#tiles .flip-card:nth-child(1) .flip-card-back a {color: #ffd42a;}
#tiles .flip-card:nth-child(2) .flip-card-back a {color: #0587ff;}
#tiles .flip-card:nth-child(3) .flip-card-back a {color: #ff5757;}

#sub_menu {margin-bottom: 1em;}
#sub_menu h1, #sub_menu a {display: inline; font-size: 2em; margin: 0.67em 1em 0 0; font-weight: bold;}
#sub_menu a {color: #aaaaaa; text-decoration: none;}
#sub_menu a:hover {color: #000000; text-decoration: underline 4px solid #ffd42a;}

@media only screen and (max-width: 1300px) {
    #menu div {flex: 16.6%;}
    #menu div:last-child {display: none;}
    #content {width: 80%;}
}

@media only screen and (max-width: 1200px) {
    #content {width: 85%;}
}

@media only screen and (max-width: 1000px) {
    .flip-card {margin: 1em;}
}

@media only screen and (max-width: 900px) {
    #menu div {font-size: 1em;}
    #content {width: 90%;}
    #kontakt {align-items: center; flex-wrap: wrap;}
    #kontakt div {flex: 100%;}
    .flip-card {margin: 1em;}
}

@media only screen and (max-width: 800px) {
    #tiles {align-items: center; flex-wrap: wrap;}
    #tiles .flip-card {flex: 100%;}
    .flip-card-front img {width: auto; height: 60%;}
    .brand {display: block; margin: 1em auto 1em auto;}
}

@media only screen and (max-width: 500px) {
    #menu {flex-direction: column;  align-items: center; background-image: initial;}
    #menu div {flex: 100%; font-size: 1.5em; margin-top: 0.3em;}
    #banner, #banner_kotle, #banner_klimatizace, #banner_tepelna_cerpadla {background-image: none; height: auto;}
    #bottom {display: none;}
    #content {width: 92%;}
    ul, ol {margin: 0 1em 0 2.5em;}
}

@media only print {
    #menu, #banner, #banner_kotle, #banner_klimatizace, #banner_tepelna_cerpadla, #tiles, #sub_menu a, #up, #gdpr, .icon, #kontakt div:nth-child(1), #kontakt div:nth-child(2), #kontakt div:nth-child(4), .copy {display: none;}
    #menu {background-image: initial;}
    #content {width: 100%;}
    #footer {color: #000000; background-color: #ffffff; padding-top: 1em;}
    #kontakt div {flex: 100%; padding: 1em; text-align: justify; border-top: 1px solid #aaaaaa;}
    #kontakt div a {color: #000000; text-decoration-line: none;}
    #facebook::after {content: " (" attr(href) ") ";}
    #contacts a::before {content: attr(data-type) ": ";}
    #contacts p:nth-child(3)::after {content: "Web: www.kachnaservis.cz"; display: block;}
    #content::before {content: url('logo_small.png'); display: block; margin: auto; text-align: center;}
    th {background-color: #ffffff;}
}