* {margin: 0; padding: 0;}
body {font-family: "Noto Sans", sans-serif; display: flex; flex-direction: column; min-height: 100vh;/* background: rgb(185,50,50);*/}

*:focus {outline: 0;}

/* light gray: rgb(240,240,240) */

div.identity {height: 80px; padding: 25px 0; background: #fff;}
div.identity div.identity-in {width: 75%; margin: 0 auto;}

a.logo img {height: 80px;}

a.rent {border: 1px solid #000; color: #000; padding: 13px 20px; margin-top: -2px; display: inline-block; text-decoration: none; transition: 0.2s;}
a.rent:hover {background-color: #000; color: #fff;}

a.cart {border: 1px solid #000; color: #000; margin-left: 0.5em; padding: 13px 0.5em 13px 2.9em; margin-top: -2px; display: inline-block; text-decoration: none; transition: 0.2s; background-position: 0.5em center; background-repeat: no-repeat; background-size: 1.8em; background-image: url("/images/Ecommerce-Shopping-Cart-icon.png");}
a.cart:hover {background-image: url("/images/Ecommerce-Shopping-Cart-icon-white.png"); background-color: #000; color: #fff;}

div.third {float: left; clear: right; width: 33.3333%;}
div.inpos {width: 75%; margin: 0 auto; padding: 3em 0;}
div.inpos .inpos__content img {max-width: 100%; width: 33%;}
div.inpos .inpos__content h2 {text-align: left;}

nav {height: 20px; background: rgb(185,50,50); color: #fff; padding: 30px 0; overflow: hidden;}
nav div.nav-in {width: 75%; margin: 0 auto;}

nav ul li {float: left; clear: right; list-style: none; margin-right: 3em;}
nav ul li a {color: #fff; font-weight: 600; padding: 1.45em 0; text-decoration: none; text-transform: uppercase;}
nav ul li a:hover, nav ul li.current a {border-bottom: 6px solid #fff;}

div.poster {background: url("/images/covers/book-black.jpg") center center no-repeat; background-size: cover; min-height: 70vh; text-align: center;}
div.poster-in {padding-top: 20vh;}

div.poster h1 {color: #fff; text-align: center; font-weight: 700; letter-spacing: -1px; font-size: 3.3em; margin-bottom: 1em;}
div.poster h1 span.extra {font-size: 1.525em;}

div.grid {background: orange; padding-top: 10%; padding-bottom: 10%;}
div.grid div.cell {width: 25%; float: left; clear: right; display: table-cell; vertical-align: middle; text-align: center; overflow: hidden; background: orange}

.button {background: rgb(185,50,50); padding: 0.8em 1.8em; font-size: 2em; text-decoration: none; color: #fff; border-radius: 4px; margin: 0 0.1em; transition: 0.15s;}
.button:hover {background: rgb(200,80,80);}
.button:active {background: rgb(160,30,30);}

div.start {background: #fff;}
div.start h1 {font-size: 2.8em; font-weight: 400; letter-spacing: -1px; text-transform: uppercase;}

div.info-stripe {padding-bottom: 1rem; background: rgb(185, 50, 50); margin-bottom: -1em;}

div.right-avatar {max-width: 20%; float: right; clear: left; margin: 0 0 1.5em 1.5em;}
div.right-avatar img {max-width: 100%;}

.syl_syl {float: left; clear: right; display: block; width: 43%; margin: 1%; border: 1px solid #ccc; text-align: center; padding: 2em 2%;}
.syl_syl:hover {border-color: #000;}
a.syl_syl {text-decoration: none;}

.syl_syl h2 {font-size: 2.2em; padding-bottom: 0.4em;}
.syl_syl .co_sy_img {margin-right: 0.4em;}

.syl_syl p.description {text-align: center;}
.syl_syl .price {background: #000; color: #fff; padding: 0.6em 1.2em; margin-right: 0.1em;}
.syl_syl .buy-button {background: rgb(185,50,50); color: #fff; padding: 0.6em 1.2em; text-decoration: none;}
.syl_syl .buy-button:hover {background: #000;}

span.black {background: #000; color: #fff; padding: 0.6em 1.2em; margin-right: 0.1em; margin-bottom: 0.15em; margin-left: 1em; display: inline-block;}
span.red {background: rgb(185,50,50); color: #fff; padding: 0.6em 1.2em; margin-right: 0.1em; margin-bottom: 0.15em; margin-left: 1em; display: inline-block;}

.exh-info-left {width: 75%; float: left; clear: right;}
.exh-info-right {float: right; text-align: right; font-size: 1.05em; width: 20%;}

.exh-info-left a {color: #000;}
.exh-info-left a:hover {text-decoration: none;}

.exh-info-left a.fancybox {margin-right: 0.5em; height: 200px; margin-bottom: 0.4em; display: inline-block; border: 4px solid #000; transition: 0.2s;}
.exh-info-left a.fancybox:hover {border-color: rgb(185,50,50);}
.exh-info-left a.fancybox img {height: 200px;}

table.cart-products {text-align: left; width: 100%; border-collapse: collapse;}
table.cart-products tr th, table.cart-products tr.black td {background: #000; color: #fff; font-weight: 300; padding: 1em;}
table.cart-products tr.black td {font-size: 1.4em;}
table.cart-products tr td.name {width: 60%;}
table.cart-products tr td {border-bottom: 1px solid #ccc; padding: 1em;}
table.cart-products tr td.input, table.cart-products .minpad {padding: 0 1em;}
table.cart-products tr td input {border: 1px solid #ccc; padding: 0.3em; font-size: 1.05em; border-radius: 2px; width: 3em;}
table.cart-products tr td input:hover, table.cart-products tr td input:focus {border-color: #000;}
table.cart-products a.cart-delete-button {text-decoration: none; color: #000; font-size: 2.2em;}

h2 {font-size: 2.8em; color: #000; font-weight: 300; letter-spacing: -1px;}
p {margin: 0.5em 0 1em 0; color: #000; font-size: 1.2em; text-align: justify; letter-spacing: -1px;}

p a {color: #000; text-decoration: none; border-bottom: 1px solid #000;}
p a:hover {text-decoration: none; border-bottom: none;}

p.images a {border-bottom: none;}
p.images a img {height: 250px}

footer {background: rgb(185,50,50); text-align: center; padding: 2em 0; color: #fff; font-size: 1.1em; margin-top: auto;}
footer span.author {font-size: 0.8em;}
footer a {color: #fff;}
footer a:hover {text-decoration: none;}

.rentform input, .rentform select, textarea {padding: 0.6em; border: 1px solid #ccc; font-size: 1.15em; margin: 0.3em 0 0 0; border-radius: 4px; font-weight: 300; font-family: "Noto Sans", sans-serif; width: 400px;}
.rentform input:hover, .rentform input:focus, .rentform select:hover, .rentform select:focus, .rentform textarea:hover, .rentform textarea:focus {border-color: #000;}

.rentform textarea {height: 120px;}
.rentform .button {border-radius: 0px; background: rgb(185,50,50); color: #fff; border: none; padding: 1em 3em; width: auto;}
.rentform .button:hover {background: #000; cursor: pointer; cursor: hand;}

.idark {border-color: rgb(185,50,50) !important;}

.padd {padding: 20px 0;}
.min {height: 185px; border: 4px solid rgb(0,0,0); transition: 0.15s;}
.min:hover {border-color: rgb(185,50,50);}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.font-white, .font-white * {color: #fff;}
.font-white a:hover {text-decoration: none;}

.bg-red {background: rgb(185,50,50);}

.both {clear: both !important;}

/* co takhle vzdycky */
.syl_syl_box {display: flex; flex-wrap: wrap;}
.syl_syl_box > * {flex: 1 0 40%;}
.syl_syl span {display: block;}
.syl_syl span.price {margin-right: 0; margin-bottom: 1px;}
.syl_syl h2 {font-size: 1.8em;}
.syl_syl img {margin-top: .8rem; margin-bottom: .4rem; max-width: 100%;}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575px) {

}

/* UNDER Medium devices (tablets, 768px and up) */
@media (max-width: 767px) {

}

/* UNDER Large devices (desktops, 992px and up) */
@media (max-width: 991px) {
    .syl_syl {width: 100%;}
    .syl_syl_box > * {flex: 1 0 100%;}
}

/* UNDER Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199px) {
    .syl_syl img {width: auto; height: 200px;}
    .syl_syl span {display: block;}
    .syl_syl span.price {margin-right: 0; margin-bottom: 1px;}
}