/* styles for chrudim dnes (c) michal@prolidi.cz */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

html { font-size: 1em; font: Arial, Helvetica, sans-serif; }
body { font-family: 'Roboto', sans-serif; font-size: 1em; background: #000; color: #FFF; padding: 0; margin: 0; }
input[type=button] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
a { color: #FFF; transition: all 0.1s ease-in-out; text-decoration: none; }
/* a:hover { color: #d91c3c !important; text-decoration: none; } */
a:hover, a:focus, .link:hover, .link:focus { color: #A32136; }
a:active, .link:active { color: #A32136;}
.red { color: #A32136; }
.green { color: green; }
h1 { margin-top: 1rem; margin-bottom: 1rem; text-transform: uppercase; }

/* bootstrap changes */
.btn-check:active+.btn-outline-success, .btn-check:checked+.btn-outline-success, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show, .btn-outline-success:active { background-color: #A32136; border-color: #A32136; }
.btn, .btn-outline-success, .btn-primary, .btn-primary:active, .btn-primary:visited { background-color: #A32136; border-color: #A32136; color: #FFF; outline: none !important; box-shadow: none !important; }
.btn-outline-success:hover, .btn:hover { background-color: #FFF; border-color: #FFF; color: #A32136; }
.bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.card { overflow: hidden; color: #FFF; background-color: #000; transition: all 0.1s ease-in-out; text-decoration: none; }
.card img { width: 100%; transition: transform 1.0s ease-in-out; }
.card:hover img { transform: scale(1.05); }
.card-body { height: 200px; overflow: hidden; text-align: center; }
.card:hover { /* box-shadow: 2px 2px 10px #000; */ color: #A32136; /* border-color: #A32136; */ }
.nav-link { text-transform: uppercase; font-weight: bold; color: #FFF !important; font-size: 1.3em; }
.nav-link:hover { color: #a32136 !important; }
nav .btn, nav .btn-outline-success { background-color: #000; border-color: #000; color: #FFF; text-transform: uppercase; font-weight: bold; font-size: 1.3em; }
nav .btn-outline-success:hover { background-color: #000; border-color: #A32136; color: #A32136; }
nav .form-control { background-color: #888; color: #FFF; border-radius: 0; border: 0; height: 33px; margin-top: 5px; }
nav .form-control::placeholder { color: #555; }
.navbar-brand img { -webkit-filter: invert(100%); filter: invert(100%); margin-right: 20px; height: 40px; }

/* main styles */
header, footer { padding: 0 4% !important; }
header nav { background-color: #000; }
main { margin-top: 80px; }
main > .container { max-width: 100% !important; padding: 0 4% !important; }
h4 { overflow: hidden; text-align: center; text-transform: uppercase; font-size: 2em; margin: 20px 0 40px 0 !important; }
h4:before, h4:after { background-color: #A32136; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 10%; }
h4:before { right: 0.5em; margin-left: -50%; }
h4:after { left: 0.5em; margin-right: -50%; }

hr { opacity: 1; width: 75%; margin: 20px auto; }

.banner { margin-bottom: 20px; }
.banner img { width: 100%; }
.kupto { position: absolute; bottom: 10px; left: 0; right:0; margin-left: auto; margin-right: auto; width: 50%; }
.btn-spot { position: absolute; bottom: 10px; left: 10px; height: 38px; }
.btnh { opacity: 0.8; transition: all 0.1s ease-in-out; }
.btnh:hover { opacity: 1; }

.tituly { background: #222; padding: 25px; background-image: url(/img/bg-albums.jpg); }
.tituly>* { padding-left: 5px; padding-right: 5px;}
.tituly .card-title { max-height: none; overflow: hidden; font-size: 1em; }
.tituly .card-body { height: auto; }
.tituly hr { background-color: #A32136; width: 50%; }

.titul { text-align: center;}
.titul-banner { width:100%; max-width: 600px; height: auto; }
.titul-text { width: 100%; margin: 0 auto; max-width: 800px; }
.titul img { width: 90%; }
.titul iframe { width: 90%; }

.novinka { text-align: center;}
.novinka-banner { width:100%; max-width: 800px; height: auto; }
.novinka-text { width: 100%; margin: 0 auto; max-width: 800px; }
.novinka img { width: 90%; }
.novinka iframe { width: 90%; }

.koncerty { background: #222; padding: 25px; background-image: url(/img/bg-concerts.jpg); background-position: center; }
.koncerty .btn, .koncerty .btn-outline-success { background-color: transparent; border-color: #A32136; color: #FFF; padding: 0.2rem 0.5rem; }
.koncerty .btn:hover, .koncerty .btn-outline-success:hover { color: #A32136; }
.koncerty .row:nth-child(even) { background-color: rgba(0,0,0,0.2); }

.kapely .card-body { height: 100px; }

.kapela { text-align: center;}
.kapela-banner { width:100%; /* height: 250px; object-fit: cover; */ max-width: 800px; }
.kapela-hlavni { width: 100%; margin: 0 auto; max-width: 800px; }
.kapela-social a { opacity: 0.5; margin: 5px; }
.kapela-social a:hover { opacity: 1; }
.kapela-social img { width: 30px; }
.kapela-text img { width: 90%; }
.kapela-text iframe { width: 90%; }
.kapela .row { justify-content: center;}
.kapela h1 { border-bottom: 1px solid #DDD; margin-bottom: 15px; padding-bottom: 10px;}
.kapela .videa .card-body { height: 100px; }

#rotuj { overflow-x: scroll; margin-bottom: -40px; padding-bottom: 40px; }
.scrl { position:absolute;left:3px;top:40%;width:auto;background:#a32136;color:#fff;cursor:pointer;padding:7px 10px;border-radius:3px; border: 1px solid #a32136; }
.scrr { position:absolute;right:3px;top:40%;width:auto;background:#a32136;color:#fff;cursor:pointer;padding:7px 10px;border-radius:3px; border: 1px solid #a32136; }
.scrl:hover { background: #fff; color: #a32136; }
.scrr:hover { background: #fff; color: #a32136; }

footer { margin-top: 4%; }
footer img { width: 20px; opacity: 0.5; margin-top:5px; }
footer img:hover { opacity: 1; }
footer .f-c { text-align: center; }
footer .f-r { text-align: right; }

/* media specific styles */
@media (min-width: 768px) {
 .bd-placeholder-img-lg { font-size: 3.5rem; }
}

@media (max-width: 767px) {
 .card-body { height: auto; }
 .card-body h5 { font-size: 100%; }
 .card-body .small { font-size: 80%; }
 /* .novinky .card-body, .videa .card-body { position: absolute; bottom: 0px; margin: 0 auto; background: #FFF; opacity: 0.6; width: 100%; color: #000; } */
 .tituly .card-title { font-size: 1em !important; }
 .tituly { padding: 20px 5px; }
 .tituly .card-body { height: 200px; }
 h4 { font-size: 1.2em; }
 h4:before, h4:after { width: 20%; }
 footer .f-c, footer .f-l, footer .f-r { text-align: center; }
 footer img { width: 30px; }
}