body {font-family: "Noto Serif", serif; font-size: calc(13px + 0.390625vw); line-height: calc(17px + 0.390625vw); background-color: #f7f6ea; color:#000000;}
    p{margin-bottom:2rem;}
    
	h1 {position: relative; font-style: italic; font-size: 3.7rem;}
	h1.sticked, h1.small-font {background-color: #f7f6ea; font-size: 2rem;font-weight: 700; padding-bottom: 30px;}
	/*a:focus {outline: 2px solid #000; outline-radius: 0px;color: #000;}
	a:active {outline: 20px solid #0F0;; outline-radius: 0px; color: transparent;}*/
	.grid-frame h3 {position: relative; font-style: italic; font-size: 3rem;}
	.grid-frame h3 span { font-size: 1.2rem;}
	.grid-frame h3::after {display: block;   content: "";   z-index: 1;   background: #000;  position: absolute;   width: 60%; height: 3px;}
	.logo{background-color: #dddbc0; display: block; text-align: right; padding: 12px; box-sizing: content-box; width: 84%; margin-left: -30px; z-index:100;}
	.logo img {max-height: 75px; }
	.number {text-align: center; font-family: "Grenze Gotisch", serif;}
	.release{display:flex;}
	.release a {margin:auto 0;}
	.release .arrow, .pageArticle .back {max-width:30px; filter: invert(96%) sepia(7%) saturate(659%) hue-rotate(7deg) brightness(92%) contrast(89%); align-self: center;}
	.release .arrow:hover {filter: none;}
	.release img.arrow.left, .back img.arrow.left  {transform: scale(-1);}
	.left-side {margin-top:20vh;}
	
	.left-side p.number {font-size: 3.4rem; font-weight: 700; line-height: 4rem; padding-top: 6rem;}
.left-side .number span {font-size: 30rem; font-weight: 300; text-decoration:none; color:#000000;}
	.left-side .number a {font-size: 30rem; font-weight: 300; text-decoration:none; color:#000000;}
	
	.nadpisy-clanku {margin-bottom: 50px;}
	.nadpisy-clanku h1::before {display: block;   content: "";   z-index: 1;   background: #000000;   position: absolute;   width: 115px; left: 0; bottom:0;   height: 3px; }
	.obsah-clanku {margin-left: 5vw; margin-right:3vw; position: relative; font-size: 1.2.rem; line-height: 2.3rem; counter-reset: section-counter;}	
	.obsah-clanku h3 {margin-top: 2.3rem; counter-increment: section-counter;}
	.obsah-clanku h3::before {display: block;   content: "";   z-index: 1;   background: #dddbc0;  color: #dddbc0; font-weight: 800;   position: absolute;   width: 4.5vw; left: -5vw; margin-top: 15px;   height: 7px; content: counter(section-counter) ". ";}
    .obsah-clanku img {max-width: 100%;height: auto;display: block;}	
    .obsah-clanku a {color:black; font-weight:bold;}
    .obsah-clanku p {padding:.6rem;}
    .obsah-clanku p:hover {background-color:#efeddc; transition: all 1.3s ease;}
    .obsah-clanku p:hover:has(img) {background-color: initial; transition: none;}
	.w600px {max-width: 600px;}
	.w100pct {width: 100% !important;}
	.grid-frame {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; width: 100%; max-width:1160px; }
	.grid-item a{aspect-ratio: 1 / 1; overflow: hidden; padding: 40px;  text-decoration:none;  color:#000000; display:block; width:280px; transition: all 1.3s ease;}	
	.grid-item a:hover { background-color:#dddbc0; transition: all 1.3s ease;}
	
	.footer { background-color:#dddbc0;}
	.footer a {text-decoration:none; color:#000000;}
	.navbar-toggler { border: none; box-shadow: none;}
	.obsah-clanku-zdroje {font-size: .9rem;  margin-top: 3vw;  padding-left: 1vw;  line-height: 1rem;  border-left: 5px solid black;  margin-left: 1vw;  opacity: .8;}
	.obsah-clanku-zdroje p {margin-bottom:0;}

	
.article-buttons button { background-color: #dddbc0; color: transparent; border: 1px solid #f7f6ea; padding: 10px 20px; margin: 5px; font-size: 16px; cursor: pointer; transition: transform 0.3s, height 0.3s;  background-repeat: no-repeat; background-position: center; background-size: contain; width: 10vw; max-width: 40px; aspect-ratio: 1 / 1; padding: 0; background-size: 50%; }
.article-buttons button[onclick="increaseFontSize()"]:hover { transform: scale(1.2); }
.article-buttons button[onclick="decreaseFontSize()"]:hover { transform: scale(0.8); }
.article-buttons button#toggleButton:hover {transform: scaleX(1.2); }
.article-buttons button[onclick="increaseFontSize()"] {background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%235f6368%22%3E%3Cpath d=%22M784-120%20532-372q-30%2024-69%2038t-83%2014q-109%200-184.5-75.5T120-580q0-109%2075.5-184.5T380-840q109%200%20184.5%2075.5T640-580q0%2044-14%2083t-38%2069l252%20252-56%2056ZM380-400q75%200%20127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75%200-127.5%2052.5T200-580q0%2075%2052.5%20127.5T380-400Zm-40-60v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z%22/%3E%3C/svg%3E');}
.article-buttons button[onclick="decreaseFontSize()"] {background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%235f6368%22%3E%3Cpath d=%22M784-120%20532-372q-30%2024-69%2038t-83%2014q-109%200-184.5-75.5T120-580q0-109%2075.5-184.5T380-840q109%200%20184.5%2075.5T640-580q0%2044-14%2083t-38%2069l252%20252-56%2056ZM380-400q75%200%20127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75%200-127.5%2052.5T200-580q0%2075%2052.5%20127.5T380-400ZM280-540v-80h200v80H280Z%22/%3E%3C/svg%3E');}
.article-buttons button#toggleButton {background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220%20-960%20960%20960%22 width=%2224px%22 fill=%22%235f6368%22%3E%3Cpath d=%22M280-320%20120-480l160-160%2057%2056-64%2064h414l-63-64%2056-56%20160%20160-160%20160-56-56%2063-64H273l63%2064-56%2056Z%22/%3E%3C/svg%3E');}
.article-buttons{ display:flex; flex-direction:column; position:fixed; bottom:10px; right:1vw; z-index:500;}
	
.pageArticle .back { display: block; position: absolute; left: -5vw; top: 2px; max-width: 2rem;}
blockquote {    position: relative;    padding-left: 1vw;    background-color: #fffdef;    margin: 0;    padding: 1em;    border-left: 5px solid #dddbc0;    quotes: "“" "”" "‘" "’";    margin:1vw;    margin-left: -.1vw;}
blockquote:before {    content: open-quote;    font-size: 2em;    position: absolute;    left: -0.5em;    top: -0.2em;    color: #dddbc0;}
blockquote:after {    content: close-quote;   font-size: 2em;    position: absolute;    right: -0.5em;    bottom: -0.2em;    color: #dddbc0;}


.offcanvas-body { padding-left: 2vw;}
.pageBasic {margin-top:5vh; margin-bottom:10vh;}
.pageBasic .left-side {margin-top:0vh;}
.pageBasic .weare {margin-left: 3rem;}

/*	
@media (min-aspect-ratio: 21/9) { .grid-frame {background-color: coral; }
    .row-cols-xxl-4 > * { flex: 0 0 auto; width: 20%;}
    .grid-frame {  max-width: 100%;}
}    
@media (smin-aspect-ratio: 2/1){ .grid-frame {background-color: pink; max-height: 70vw;}}
  */  
    



@media screen and (max-width: 960px) {
.obsah-clanku {margin-left: 0px; }
.left-side p.number {  font-size: 3.4rem;  line-height: 4rem;}
.left-side .number span { font-size: 9rem;}
.left-side p.number {  font-size: 2rem;  line-height: 3rem;padding: 0 1rem;}
.left-side .number span { font-size: 4rem;}
.logo {padding-bottom: 40px; }
.pageArticle {margin-top: 10px;}
}	
@media screen and (max-width: 768px) {
.left-side {margin-top:20px;} 
.logo{width: auto; margin-left: auto;}
.release {margin-top:-120px;}
p.weare {padding-left:1rem;}
.weare br {display:none;}
.release .arrow {max-width: 19px; filter: invert(90%) sepia(86%) saturate(168%) hue-rotate(302deg) brightness(107%) contrast(94%);}
.obsah-clanku h3::before, .pageArticle .back {display: none; }
.pageBasic {  margin-top: 1vh;  margin-bottom: 10vh;}
}

@media screen and (max-width: 576px) {
.grid-item a{aspect-ratio: auto; padding: 20px;  width:100%;}	
}