html, body, h1, h2, h3, div, span, p, form, fieldset, img, ul, li, table, td, th, input {margin: 0; padding: 0; border: 0}
ul, li {list-style: none}

:root {
 --c1: #F1C738;
 --c2: rgba(0,0,0,0.7);
 --c3: rgba(255,255,255,0.7);
 --f1: Georgia, "Times New Roman", Times, serif;
 --f2: Inter, Tahoma, Verdana, Helvetica, sans-serif;
 --w1: 1280px;
 --w2: 960px;
 --w3: 300px;
 
 --t1: 300ms;
 --t2: ease-in-out;
}

@view-transition {navigation: auto}

a {text-decoration: none; color: var(--c1)}
a img {border: 0}
:-moz-any-link:focus, a:active {outline: none}
a:hover {color: var(--c1)}
:focus {-moz-outline-style: none}
p::selection,a::selection,h1::selection,h2::selection {background: var(--c1); color: #000}
textarea:focus,input:focus{outline: none}

body {background: #F6F6F6; font: 400 14px/18px var(--f1); color: #333; user-select: none}
img {font-size: 10px; color: #999}

#pgFtr,
.specs,
.coVi,
#nws img {content-visibility: auto}

a,
.mnMn a,
.nwsLst .itm p a,
.nwsOld a,
#pgFtr a,
#pgFtr .takeMeUp,
.spprt,
.header a,
.nwsLst .itm a:hover h2,
.carforumlink,
.chrts a,
.brdc a,
.carGal h1 a,
.carGal.bigGal .backLnk,
#copy a,
#spis a,
#spis.news a,
.mks a,
.mksLst .url,
.crDna a {transition: color var(--t1) var(--t2)}

.mnMn a,
.shRm li h2,
.artLst a span,
.cmtBtn,
#nws a.readNext,
.itm a:hover::before {transition: background-color var(--t1) var(--t2)}

.shRm .image,
.cGal .image,
.artLst .image,
.mks a img,
.mksLst .url img,
.crDna a img,
#spis img,
#pgFtr a.spprtLnk {transition: opacity var(--t1) var(--t2)}

#logo,
#logo .subs,
.mnMn a.dna span,
.nwsLst .itm h2::before {transition: var(--t1) var(--t2)}
.mnSoc .icon {transition: fill var(--t1) var(--t2)}
#srcBx input.submit {transition: background-position var(--t2)}
.mnMn a.dna span {will-change: transform;}

#srcBx input.submit, .mnSwtc, .readTime {background: url(https://autogen.pl/gfx/icons_new.png) no-repeat;}
#shareBtn.cmtBtn, .seeImg, #mnSwtc, .mnSwtc {display: none}
#pgWrp::after, #pgFtr .hldr::after, .nwsLst .itm a::after, .smf .list::after, .nwsOld li::after, .artLst::after, .crDna::after, #spis::after {content: ''; display: block; clear: both}
.shRm .image, .cGal .image, #nws .mnImg .img, #nws img, .theArt img, .crImg img, #srcBx input, .nwsLst .itm a:hover::before, .smf .list, .pgr a, .nTable td, .pTable td, .artTable td {background-color: #EEE}
.theCar h1, #nws h1, .theArt h1, .e404 h1 {font: 700 40px/50px var(--f2)}

#pgWrp {box-sizing: border-box; margin: 0 auto; padding: 115px 10px 10px 10px; background: #FFF; width: 100%; max-width: var(--w1); min-width: var(--w2)}

#pgHdr {position: fixed; width: 100%; border-bottom: 2px solid var(--c1); z-index: 999; background: #000}
#pgHdr .hldr {width: 100%; max-width: var(--w1); min-width: var(--w2); position: relative; margin: 0 auto}
.logoLevel {background: #333; padding-bottom: 5px}

#logo {display: block; color: var(--c1); text-align: center}
#logo .auto {font: 700 36px var(--f2); padding: 2px 0; display: block}
#logo .subs {text-transform: uppercase; font: 200 12px var(--f2); display: block; letter-spacing: 4px}
#logo:hover {letter-spacing: 3px}
#logo:hover .subs {letter-spacing: 6px}

#srcBx {position: absolute; inset: 0 0 -5px auto; margin: auto 0; font-size: 12px; overflow: hidden; display: flex; align-items: center}
#srcBx form {height: 24px}
#srcBx input {border: 0; color: #666}
#srcBx input.text {width: 190px; padding: 0 4px; float: right; position: relative; z-index: 1; font: 200 13px/24px var(--f2); text-transform: uppercase}
#srcBx input.submit, .mnSwtc {cursor: pointer; border: 0; background-color: #666; background-position: 5px 5px; width: 24px; height: 24px; float: right; text-indent: -999px; overflow: hidden}
#srcBx input.submit:hover {background-position: 5px -15px}
#srcBx label {font-size: 0; position: absolute; right: -1000px}

.mnSoc {position: absolute; z-index: 1; inset: 0 auto -5px 0; display: flex; align-items: center}
.mnSoc .icon {display: block; height: 20px; width: 20px; fill: #FFF}
.mnSoc .icon:hover {fill: var(--c1)}
.mnSoc a {float: left; margin: 0 15px 0 0}

.mnMn {font-size: 0; clear: both; text-align: center}
.mnMn a {display: inline-block; color: #FFF; font: 200 18px/36px var(--f2); padding: 0 15px; text-transform: uppercase}
.mnMn a:hover {background: var(--c1); color: #000}
.mnMn a.dna span {display: inline-block}
.mnMn a.dna:hover span {transform: rotate(360deg); display: inline-block}

#pgFtr {clear: both; color: #FFF; background: #333; position: relative}
#pgFtr .hldr {width: 100%; max-width: var(--w1); min-width: var(--w2); position: relative; margin: 0 auto; padding: 20px 0}
#pgFtr .copy {color: #FFF; font: 200 13px var(--f2); letter-spacing: 2px; position: absolute; bottom: 10px; right: 10px}
#pgFtr .takeMeUp {color: #EEE; font: 200 20px var(--f2); position: absolute; top: 5px; right: 10px; padding: 0}
#pgFtr a {color: #EEE; display: block; padding: 0 30px 5px 0}
#pgFtr a:hover {color: var(--c1)}
#pgFtr ul {margin: 5px 10px 10px 10px; float: left; border-right: 1px dotted #444}
#pgFtr .footMenu1 a {font: 200 14px/25px var(--f2); text-transform: uppercase; letter-spacing: 3px}
#pgFtr .footMenu2 a {font: 200 12px/20px var(--f2); letter-spacing: 2px}

.spprt {color: #EEE; float: left; margin-top: 5px; font: 200 12px/18px var(--f2); letter-spacing: 2px}
.spprtTxt {display: block; margin-bottom: 10px}
#pgFtr a.spprtLnk {width: 150px; margin-bottom: 5px; opacity: 0.8}
#pgFtr a.spprtLnk:hover {opacity: 1}

.clmns {display: grid; grid-template-columns: calc(100% - 380px) 370px; gap: 10px}
#clmnL {box-sizing: border-box; padding: 5px 20px 10px 10px; border-right: 1px dotted #EEE}
#clmnR {padding: 5px 10px 10px 10px}

.header {font: 200 14px/24px var(--f2); text-transform: uppercase; background: #666; color: #FFF; padding: 0 10px; position: relative; letter-spacing: 5px; float: right; margin: 0 -30px 0 0}
.header a {color: #FFF}
.header a:hover {color: var(--c1)}
.smf .header {font-size: 14px; float: left; margin: 0 0 -24px -30px}
.header::before {display: block; content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 0; border-color: #999 transparent transparent transparent; position: absolute; right: 0; bottom: -9px}
.smf .header::before {border-width: 0 10px 10px 0; border-color: transparent #999 transparent transparent; left: 0}

.shRm {padding: 20px 0 0 0; clear: both}
.shRm li {position: relative; margin: 0 0 5px 0; min-height: 80px}
.shRm li h2 {position: absolute; inset: auto 0 0 0; display: block; background-color: var(--c2); padding: 2px 5px; color: #FFF; font: 200 18px var(--f2); text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.shRm a:hover h2 {color: #000; background-color: var(--c3)}
.shRm a:hover .image, .cGal a:hover .image {opacity: 1.0}
.headerLi {border-bottom: 3px solid #333; color: #000; font: 200 15px var(--f2); text-transform: uppercase; z-index: 1; padding: 0 0 2px 0; letter-spacing: 3px}
.shRm .image, .cGal .image {display: block; opacity: 0.7; height: auto}
.shRm li.headerLi {background: transparent; min-height: 0}
.shRm:last-child {position: sticky; top: 95px}

.nwsLst {clear: both; padding-top: 5px}
.nwsLst .itm {padding: 10px 0 20px 0; margin: 10px 0; border-bottom: 1px solid var(--c1)}
.nwsLst .itm h2 {position: relative; font: 700 32px/40px var(--f2); text-transform: none; color: #333; padding: 0 0 10px 15px}
.nwsLst .itm h2::before {content: ''; position: absolute; left: 0; bottom: 5px; width: 5px; height: 5px; background:var(--c1)}
.nwsLst .itm a {display: block; position: relative}
.nwsLst .itm a::before {content: ''; position: absolute; inset: -10px}
.nwsLst .itm a:hover h2 {color: #000}
.nwsLst .itm a:hover h2::before {height: calc(100% - 5px)}
.nwsLst .image {display: block; width: 192px; height: 144px}
.nwsLst .newsImg {clear: both; float: left; position: relative; margin: 0 20px 0 0; padding: 0 0 0 10px; border-left: 5px solid var(--c1)}
.nwsLst .itm p {position: relative; font: 20px/26px var(--f1); color: #222; margin-top: -5px}
.nwsLst .itm p a {color: #999; text-decoration: none; display: inline}
.nwsLst .itm p a:hover {color: var(--c1)}

.smf {padding: 10px 0 20px; border-bottom: 1px solid var(--c1)}
.smf .list {clear: both; padding: 30px 0 10px 0}
#clmnL .smf li {padding: 0 10px; border: 0; margin: 0; width: calc(33% - 30px); float: left; clear: none}
.smf h5 {text-transform: uppercase; text-align: center; font-weight: 700; color: var(--c1); margin: 0 0 5px 0}
.smf a {color: #000; font: 200 16px/26px var(--f2); display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.smf a:hover {color: var(--c1)}

.pgr {font: 16px/24px var(--f1); color: #333; padding: 20px 0 10px}
.pgr a {display: inline-block; color: #000; padding: 4px 11px 5px; margin: 0 5px}
.pgr a:hover {background: #333; color: #FFF}
.pgr span {display: inline-block; background: var(--c1); color: #000; padding: 4px 11px 5px 11px; margin: 0 5px}

.nwsOld {padding: 20px 0 45px 0; clear: both}
.nwsOld li {border-bottom: 1px solid #EEE; padding: 5px 2px}
.nwsOld a {color: #333; font-size: 16px}
.nwsOld a:hover {color: var(--c1)}

#nws {padding: 25px 0 0 0; clear: both; font: 400 20px/32px var(--f1); color: #222}
#nws h1 {display: block; color: #000; padding: 0 20px 20px 20px}
#nws .date {font: 200 16px var(--f2); color: #666; display: block; padding: 0 20px}
#nws p, .theCar p, .theArt p, p.p404 {text-indent: 20px; padding: 20px; clear: both; font: 400 20px/32px var(--f1); color: #222; text-align: left}
.theCar p.dateAuthor,.theArt p.dateAuthor {text-indent: 0; text-align: right; color: #666; font: italic 14px/20px var(--f1)}
#nws p:first-of-type {clear: none}
#nws p.br {text-indent: 0}
#nws p span.update {color: #999}
#nws .noClear {clear: none; padding: 0 0 20px 0}
#nws .quest::before {content: '■'; color: var(--c1); font-size: 26px; margin: 0 5px 0 0}
p .lineth {text-decoration: line-through}
.theArt, .theCar {font: 400 14px/20px var(--f1); color: #222}
.theCar article {clear: both}
#nws p a, .theArt p a, .theCar p a {color: #666; text-decoration: underline}
#nws p a:hover, .theArt p a:hover, .theCar p a:hover {color: var(--c1)}
#nws img, .theArt img {display: block; margin: 10px auto; border-bottom: 5px solid var(--c1); border-top: 5px solid var(--c1); max-width: 100%; height: auto}
#nws img {padding: 5px 0}
#nws .mnImg {float: right; margin: 0 0 20px 20px; position: relative}
#nws .mnImg .img {border: 0; padding: 0; margin: 0; width: 192px; height: 144px; position: relative; z-index: 1}
#nws .mnImg::before {content: ''; display: block; position: absolute; bottom: -10px; left: -10px; width: 30px; height: 30px; background: var(--c1)}
#nws .rightImg {float: left; margin: 0 20px 10px 0; border: 0; padding: 0}
.theArt .ga {float: left; border: 0; margin: 3px; padding: 0}
p.p404 {margin-bottom: 40px}

.nTable {border: 0; padding: 0; margin: 20px 0; width: 100%; text-align: left; border-spacing: 0; border-collapse:collapse}
.nTable td {padding: 5px 10px; font-size: 16px; border-bottom: 2px solid #FFF; text-align: center; border-right: 2px solid #FFF}
.nTable td:first-child {text-align: right}
.nTable .notFc {text-align: center}
.nTable td:last-child {border-right: 0}
.nTable .win {background: #E6FFCC}
.nTable th {background: var(--c1); padding: 5px; font: 200 20px var(--f2); text-align: center; border-bottom: 2px solid #FFF}

.pTable {border: 0; padding: 0; margin: 20px 0; width: 100%; text-align: left; border-spacing:0; border-collapse:collapse}
.pTable td {padding: 5px 10px; font-size: 18px; border-bottom: 2px solid #FFF; text-align: left; border-right: 2px solid #FFF}
.pTable td:first-child {text-align: right;width:20px}
.pTable td:last-child {border-right: 0;width:100px}
.pTable th {background: var(--c1); padding: 5px; font: 200 20px var(--f2); text-align: center; border-bottom: 2px solid #FFF}

.pTable.counter1 {counter-reset: counter1}
.pTable.counter1 td:first-child::before{display: inline; counter-increment: counter1; content: counters(counter1,".") ""}
.pTable.counter2 {counter-reset: counter2}
.pTable.counter2 td:first-child::before{display: inline; counter-increment: counter2; content: counters(counter2,".") ""}

.artLst {margin-bottom: 40px}
.artLst li {display: block; text-align: left; list-style: none; color: var(--c1); position: relative; float: left; padding: 0; width: 33.33%}
.artLst li span {position: absolute; inset: auto 0 0 0; display: block; background-color: var(--c2); padding: 2px 5px; color: #FFF; font: 200 16px var(--f2); text-transform: uppercase}
.artLst a {color: #FFF; display: block; margin: 5px; position: relative}
.artLst a:hover span {color: #000; background-color: var(--c3)}
.artLst .image {display: block; opacity: 0.7; border: 0; padding: 0; margin: 0; width: 100%; height: auto}
.artLst a:hover .image {opacity: 1}

.nwsrc {display: block; font: italic 14px/18px var(--f1); text-align: right; color: #666; margin: 10px 0; padding: 0 20px 10px; border-bottom: 1px solid var(--c1); list-style: none}
.urls {display: block; font-size: 18px; margin: 0 20px; color: #666}
.urls::before {content: ''; display: block; float: left; width: 10px; height: 10px; background: var(--c1); margin: 11px 7px 0 0}
.rss {display: block; font-size: 14px; color: #666; border-top: 1px solid var(--c1); padding: 10px 10px 0 0; margin: 10px 0 0 0; text-align: right}
.rss .icon {width: 14px; height: 14px; fill: var(--c1); margin: 0 10px 0 0}
.rss:hover {color: var(--c1)}

#clmnR .cGal {clear: both; padding: 15px 0 0 0}
.cGal a, .cGal .image {display: block; border: 0; margin: 0; clear: none; width: 100%}
#crImg img {min-height: 100px; height: auto}
#clmnR .cGal li {float: left; clear: none; margin: 3px; width: calc(50% - 3px)}
#clmnR .cGal .wide {clear: both; float: none; width: calc(100% - 6px)}
#clmnR .cGal li:nth-child(even) {margin-right: 0}
#clmnR .cGal li:nth-child(odd) {margin-left: 0}

.carGal .cGal .image, .theArt .cGal .image, #crImg img, #spis img {background: transparent url(https://autogen.pl/gfx/loading.gif) center center no-repeat}

#clmnL.theCar {padding: 5px 20px 25px 10px}
.theCar h1 {color: var(--c1); background-color: var(--c2); position: absolute; inset: 0 0 auto 0; padding: 5px 10px; border-bottom: 1px solid #666}
.crImg img {display: block; margin: 0; padding: 0; float: none; max-width: 100%; height: auto}
.crImg {clear: both; position: relative; margin: 0 0 20px 0; min-height: 200px}
.theCar .crImg {min-height: unset}
.crImg ul {position: absolute; inset: auto 0 0 0; background-color: var(--c2); color: #EEE; border-top: 1px solid #333}
#clmnL .crImg ul li {display: block; float: left; width: 25%; box-sizing: border-box; clear: none; text-align: center; padding: 10px 0; font: 200 24px/30px var(--f2); border-right: 1px solid #999}
#clmnL .crImg ul li:last-child {border-right: 0}
#clmnL .crImg ul li span {font: 200 12px/12px var(--f2)}
#copy {text-align: right; font-size: 11px; color: #666; font-style: italic; display: block; margin: 0 0 15px 0}
#copy a {color: #666}
#copy a:hover {color: var(--c1)}
.carforumlink {display: block; margin: 15px 0 20px 0; padding: 10px 0; color: #FFF; font: 200 18px var(--f2); text-align: center; background: var(--c1)}
.carforumlink:hover {color: #000}
#clmnR audio {width: 100%}

#specs {border: 0; padding: 0; margin: 55px 0 30px 0; width: 100%; text-align: left; border-spacing:0; border-collapse:collapse}
#specs td {background: #F5F5F5; padding: 5px 10px; font-size: 16px; border-bottom: 2px solid #FFF; color: #444}
#specs td:first-child {border-right: 2px solid #FFF}
#specs th {position: relative; background: var(--c1); color: #000; padding: 0 10px; font: 200 12px/22px var(--f2); letter-spacing: 2px; border-bottom: 2px solid #FFF; text-align: right}
#specs td i {color: #4F4F4F; font-style: italic}
#specs th::before {content: ''; display: block; position: absolute; inset: 0 auto 0 10px; margin: auto 0; width: 10px; height: 10px; background: #F5F5F5}

#crImg {text-align: center; position: relative}
#crImg img {display: block; margin: 10px auto; max-width: 100%}
a.nx, a.pv {position: absolute; top: 0; width: 50%; height: 100%; transition-duration: 0s}
a.nx {right: 0}
a.pv {left: 0}
a.pv::before, a.nx::before {content: ''; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 100px; height: 100px; border: solid var(--c1); border-width: 0 30px 30px 0; opacity: 0}
a.pv::before {left: 50px; transform: rotate(135deg)}
a.nx::before {right: 50px; transform: rotate(-45deg)}
a.pv:hover::before, a.nx:hover::before {opacity: 1}
.carGal h1 {font: 700 34px/34px var(--f2); color: #000; border-top: 1px solid var(--c1); text-align: center; padding: 20px 0}
#clmnFw.carGal.bigGal h1 {border: 0; padding: 10px 0; margin: 0}
.carGal.bigGal .backLnk {display: block; color: #000; font: 700 34px/34px var(--f2); padding: 0 0 20px 0; text-align: center}
.carGal h1 a {color: #000}
.carGal h1 a:hover, .carGal.bigGal .backLnk:hover {color: var(--c1)}
.carGal h1 a::before, .carGal.bigGal .backLnk::before {content: '← '}
.carGal .cGal li, .theArt .cGal li {float: left; clear: none; display: block; padding: 5px; width: calc((100% - 60px) / 6)}
.theArt .cGal {margin: 25px auto 0 auto; padding: 0}
.carGal ul.cGal {margin: 0 auto; width: 90%}
#galCopy {display: block; clear: both; font-size: 11px; text-align: right; font-style: italic; color: #999; margin: 10px 0; padding: 0 10px 10px 0; border-bottom: 1px solid #EEE}
#galCopy a {color: #999}

#clmnL.theArt {font-size: 12px; padding: 5px 20px 25px 10px}
.theArt article ul {border-bottom: 1px dotted #CCC; margin: 0 0 40px 0; padding: 0 0 40px 20px}
.theArt h1, .e404 h1 {display: block; color: #000; text-align: left; padding: 0 20px 20px 20px}
.theArt h1:first-child {padding: 20px}
.anchorLink {scroll-margin-top: 120px}

.theMk .header {float: left; margin: 30px 0 0 -30px; clear: both}
.theMk .header::before {border-width: 0 10px 10px 0; border-color: transparent #999 transparent transparent; left: 0; bottom: -9px}
.theMk ul {clear: both; padding: 10px 0 0 0}

.mks {color: #CCC; font: 200 20px/20px var(--f2)}
.mks li {margin: 10px 0; position: relative}
.mks li:nth-child(even) {background: #F6F6F6}
.mks a {color: #333; font: 200 24px/85px var(--f2); display: block; height: 85px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative}
.mks a img {opacity: 0.8; display: block; float: left; width: 165px; height: 85px; margin-right: 20px}
.mks li.dna::before {content: 'DNA'; display: block; font-size: 16px; letter-spacing: 3px; width: 85px; position: absolute; z-index: 1; left: -27px; bottom: 33px; color: #EEE; text-align: center; transform: rotate(-90deg)}
.mks a:hover {color: var(--c1)}
.mks a:hover img {opacity: 1}
.mks a span {font-family: var(--f1)}
.mks .mpt {font-size: 16px; color: #999}

.mksLst {color: #CCC; font: 200 16px/20px var(--f2)}
.mksLst .url {display: block; float: left; width: calc(100% / 8); padding: 0 0 20px 0; color: #333; text-align: center}
.mksLst .url img {opacity: 0.7; display: block; margin: 0 auto; font-size: 10px; height: auto}
.mksLst .url:hover {color: var(--c1)}
.mksLst .url:hover img {opacity: 1}
.theMk h1, .theMks h1 {font: 700 34px/34px var(--f2); display: block; color: #000; border-bottom: 3px solid var(--c1); margin: 0 0 20px 0; padding: 0 0 20px 0; text-align: center}
.theMk .logo {float: left; margin: 0 20px 0 0; padding: 5px}
.theMk p {padding: 0 0 0 130px; text-indent: 20px; font: 20px/32px var(--f1)}
.theMks p {padding: 10px 70px 30px 70px; font: 20px/32px var(--f1); text-align: center}
#clmnFw h1 {margin-top: 10px; font-weight: 700; clear: both}
#clmnFw .artLst + h1 {margin-top: 40px}

.brdc {font-size: 0; color: #333; margin: 0 0 10px; display: block}
.brdc li {display: inline; font: 200 14px/20px var(--f2)}
.brdc li:first-child::before {content: ''; display: block; width: 13px; height: 13px; float: left; margin: 3px 5px 0 0; background: var(--c1)}
.brdc a {color: #595959}
.brdc a:hover {color: var(--c1)}
.brdc li a::after {content: '\203A'; color: var(--c1); letter-spacing: -1px; font-weight: 700; margin: 0 5px}

#tpGr {text-align: left; font: 18px/30px var(--f1)}
#tpGr hr {margin: 15px 0; height: 0; border-bottom: 3px dotted #EEE}
a.tg {font-size: 14px}

.chrts {text-align: right}
.chrts table {width: 100%; margin: 20px 0}
.chrts td {padding: 10px 5px; font-size: 18px; text-align: left}
.chrts a {display: block; color: #000}
.chrts a:hover {color: var(--c1)}
.chrts tr:nth-child(even) {background: #F9F9F9}
.chrts tr:nth-child(odd) {background: #F3F3F3}

.mprs h1 {margin-bottom: 20px}
.mprs .header {margin-bottom: 15px}
.mprs ul {text-align: left; font: 18px/30px var(--f1); border: 0; margin: 0; padding: 0 0 20px 0}
.mprs hr {border: 0; border-bottom: 1px dotted #CCCCCC; height: 0; color: #FFF; margin: 5px 0 30px 0}
.mprs ul li {padding: 0 0 0 40px; margin: 0}
.mprs ul li.nopersona:first-child, .mprs ul li:first-child {padding-top: 40px}
.mprs ul li.nopersona {color: #999; padding: 5px 0}

.openFoto {border: 0}
.theArt p.author {text-align: right; font-size: 14px; font-style: italic; padding-bottom: 20px; padding-top: 0; color: #999}

.crDna {color: #CCC; font: 200 20px/20px  var(--f2)}
.crDna li {float: left; width: calc(25% - 20px); border-bottom: 1px dotted #EEE; text-align: center; padding: 10px}
.crDna a img {opacity: 0.7; display: block; font-size: 10px; margin: 0 auto 10px auto; border-radius: 5px; height: auto}
.crDna a {color: #333; display: block; text-align: center}
.crDna a:hover {color: var(--c1)}
.crDna a:hover img {opacity: 1}
.crDna li:nth-child(4n+5) {clear: both}

#spis {margin: 0; padding: 0; border: 0}
#spis li {text-align: left}
#spis.cars li {text-align: center; display: block; float: left; width: 25%}
#spis.cars li:nth-child(4n+5) {clear: both}
#spis.cars li a {display: block; margin: 5px}
#spis a {font: 200 14px/18px var(--f1); color: #666}
#spis.news a {font: 400 16px/26px var(--f1)}
#spis a:hover {color: #000}
#spis a:hover img {opacity: 1.0}
#spis img {border: 0; margin: 0 0 10px 0; display: block; opacity: 0.7; display: block; width: 100%; height: auto}

.cmtBtn {cursor: pointer; text-transform: uppercase; background: #666; display: block; margin: 30px auto 20px auto; padding: 0 30px; color: #FFF; font: 200 18px/30px var(--f2); text-align: center; position: relative; width: 100%; max-width: 250px; transform: skew(-30deg)}
.cmtBtn .text {display: block; transform: skew(30deg)}
.cmtBtn:hover {background: var(--c1); color: #FFF}

#nws a.readNext {background: #CCC; font: 200 14px/14px var(--f2); display: block; width: 300px; margin: 20px auto; padding: 7px 0; color: #FFF; text-align: center; position: relative}
#nws a.readNext:hover {background: var(--c1); color: #FFF}
#nws a.readNext::after {border-style: solid; display: block; width: 0; height: 0; content: ''; border-width: 14px 0 14px 20px; border-color: transparent transparent transparent #CCC; position: absolute; right: -20px; top: 0}
#nws a.readNext:hover::after {border-color: transparent transparent transparent var(--c1)}

.readTime {display: block; clear: both; font: italic 12px/15px var(--f1); color: #999; text-align: right; padding-right: 55px; background-position: right bottom; margin: 0 0 20px 0}

.artTable {width: 100%; margin: 20px auto}
.artTable td {padding: 5px 10px; font: 18px/30px var(--f1); border-bottom: 2px solid #FFF; text-align: center; border-right: 2px solid #FFF}
.artTable td i {font: 12px/16px var(--f1); display: block}
.artTable .heading td {font-weight: 700; background: #CCC; line-height: 24px}
.artTable .heading_two td {font-weight: 700; background: #DDD; line-height: 20px}
.artTable .heading_two_simple td {line-height: 20px}
.artTable .legend td {font: 12px/16px var(--f1); color: #666}
.artTable.heading_vertical tr:not(.heading) td:first-child,
.artTable.heading_vertical tr:not(.heading_two_simple) td:first-child {font-weight: 700; background: #DDD}
.artTable a {color: #000}
.artTable a:hover {text-decoration: underline}

@media screen and (max-width: 1280px) {
	#clmnR .header {margin-right: -20px}
	#clmnR .header::before {display: none}
}

@media screen and (max-width: 768px) {
	.shRm .image, .cGal .image, .artLst .image, .mks a img, .mksLst .url img, .crDna a img, #spis img, .mnMn a, .shRm li h2, .nwsLst .itm h2, .artLst a span {transition: none}
	
	.header::before, #clmnL.newsPage .header, #srcBx, .mnSoc, .nwsLst .itm h2::before, .cmtBtn {display: none}
	#nws h1, .theArt h1, .e404 h1, .theCar h1 {font: 700 26px/30px var(--f2)}
	
	#pgWrp {padding-top: 80px; min-width: var(--w3); max-width: 100%; width: 100%}
	.header, #clmnR .header {margin-right: -10px; font: 200 12px/20px var(--f2); letter-spacing: 3px}
	.theMk .header {margin: 0 0 0 -10px}

	#logo .auto {font-size: 20px}
	#logo .subs {font-size: 8px; letter-spacing: 1px}
	#logo:hover {letter-spacing: 0}
	#logo:hover .subs {letter-spacing: 1px}
	
	#srcBx input.text {width: calc(100% - 35px)}
	.mnSwtc {display: block; position: absolute; inset: 5px 10px 0 auto; margin: auto 0}
	#mnSwtc:checked ~ .mnSwtc {background-position: 5px -15px}
	#mnSwtc:checked ~ #srcBx, #mnSwtc:checked ~ .mnSoc {display: block; inset: auto 0 0 0; background: #000; padding: 30px 10px; z-index: 2; margin: 0; box-sizing: border-box; height: calc(100vh - 100px)}
	#mnSwtc:checked ~ #srcBx {top: 42px}
	#mnSwtc:checked ~ .mnSoc {top: 100px}
	.mnSoc a {margin: 15px 0; display: block; float: none}
	.mnSoc .icon {margin: 0 auto}
	
	.mnMn {overflow: hidden; overflow-x: scroll; white-space: nowrap; height: 24px}
	.mnMn a {font: 200 14px/24px var(--f2); padding: 0 10px}

	.clmns {display: block}
	#clmnL, #clmnR, #clmnL.theArt, #clmnL.theCar {width: 100%; float: none; border: 0; padding: 0}
	#clmnR {padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--c1)}
	.brdc {margin: 0; white-space: nowrap; overflow: hidden; overflow-x: scroll}
	.brdc li {font: 200 12px/16px var(--f2)}
	.brdc li:first-child::before {margin-top: 2px; width: 10px; height: 10px}
	
	.smf .header {margin-left: 0}
	.smf a {font: 12px/24px var(--f1)}
	.smf ul {padding: 10px 0}
	#clmnL .smf li {width: calc(50% - 15px); padding-right: 0}
	.shRm .image, .cGal .image {width: 100%}

	#pgFtr {padding: 10px 10px 0 10px}
	#pgFtr .hldr, #pgHdr .hldr {min-width: var(--w3); max-width: 100%; width: 100%}
	#pgFtr ul {margin: 0 10px 20px 0}
	#pgFtr .footMenu3 {margin-right:0;padding-right:0;border:0}
	#pgFtr .copy {display: block; text-align: center; clear: both; position: relative; padding: 10px 0}
	#pgFtr .footMenu2 a {line-height: 22px}
	#pgFtr .footMenu1 a {line-height: 30px}
	.spprt {clear: both; float: none; text-align: center; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dotted #444; letter-spacing: 0}
	#pgFtr a.spprtLnk {margin-top: 5px; opacity: 1}
	.spprtLnk {margin-left: auto; margin-right: auto}
	
	.pgr {font: 14px/18px var(--f1); padding: 10px 0; margin: 10px 0 -10px 0}
	
	.mksLst {font: 200 12px/16px var(--f2)}
	.mksLst .url {width: calc(100% / 3)}
	.mksLst .url:nth-child(3n+1) {clear: both}

	.nwsLst .itm h2 {font: 700 24px/30px var(--f2); padding-left: 0}
	.nwsLst .newsImg {padding-left: 0; margin: 0 10px 0 0; border: 0; height: 105px; width: auto}
	.nwsLst .newsImg .image {width: auto; height: 100%}
	.nwsLst .itm p {font: 16px/22px var(--f1); margin-top: 0}
	
	#nws {margin: 0; padding-top: 10px}
	#nws h1 {display: block; clear: both; padding: 10px; z-index: 1; position: absolute; inset: auto 0 0 0; background: var(--c2); color: var(--c1)}
	#nws p ~ img, .theArt img {margin: 10px -10px; width: calc(100% + 20px); max-width: calc(100% + 20px)}
	#nws p, .theCar p, .theArt p, p.p404 {font: 17px/26px var(--f1); text-indent: 20px; text-align: left; padding: 10px 0}
	#nws .date {padding: 0 0 10px 0; font-size: 14px}
	#nws .mnImg {display: block; float: none; width: 100%; aspect-ratio: 4/2; overflow: hidden; margin: 0}
	#nws .mnImg .img {width: 100%; height: auto; aspect-ratio: 4/2; filter: blur(2px); object-fit: cover; object-position: center center}
	#nws .ttlImg {position: relative; margin-bottom: 10px}
	.nwsrc {font: italic 12px/14px var(--f1)}
	
	.theArt h1, .e404 h1, .theArt h1:first-child {padding: 0 0 10px 0}
	
	.readTime {font-size: 10px; margin-bottom: 10px}
	.theCar p.dateAuthor, .theArt p.dateAuthor {font: italic 10px/12px var(--f1)}
	.urls {margin: 0; font-size: 14px}
	
	.crImg {margin: 5px -10px 5px -10px}
	.theCar h1 {padding-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2}
	#clmnL .crImg ul li {font: 200 14px/16px var(--f2); background: #333; padding: 5px 0; margin-bottom: 10px}
	.crImg ul {position: relative; border-top: 0}
	.seeImg {display: inline-block; padding: 5px 10px; letter-spacing: 3px; text-transform: uppercase; font: 200 12px/16px var(--f2); background-color: var(--c2); position: absolute; bottom: 10px; right: 10px; color: #FFF}
	.seeImg:hover {color: #FFF}
	#specs td {font-size: 14px}
	
	.artLst li {width: 50%}
	.artLst li .image, .carGal .cGal li, .carGal .cGal .image, .theArt .cGal .image {width: 100%; max-width: 100%; margin: 0}
	.artLst a {margin: 2px}
	.artLst li span {font-size: 14px}
	
	.carGal .cGal li, .theArt .cGal li {width: calc(33.33% - 10px)}
	.theArt .cGal {margin: 0; padding: 0 0 20px 0}
	
	.carGal #crImg {margin: 0 -10px}
	.carGal ul.cGal {width: 100%}
	.carGal h1, .carGal.bigGal .backLnk {font: 700 16px/22px var(--f2); padding: 10px 0}
	
	.theMk h1, .theMks h1 {padding: 10px}
	.theMks p, .theMk p {padding: 10px 0 30px; font: 17px/26px var(--f1)}
	.crDna li {float: none; width: 100%; padding: 10px 0}
	.theMk .logo {float: none; margin: 0 auto 10px auto; display: block}
	
	.mks a {font: 200 14px/40px var(--f1); height: 40px}
	.mks a img {width: auto; height: 50px; margin-right: 5px}
	.mks li.dna::before {font-size: 10px; width: 40px; left: -10px; bottom: 10px}
	.mks .mpt {font-size: 14px}
	
	.nTable {margin: 10px 0}
	.nTable th, .pTable th {font-size: 16px}
	.nTable td, .pTable td {font-size: 12px}
	
	.artTable {width: 100%; overflow: scroll}
	.artTable td {font: 12px/16px var(--f1)}
	.artTable .heading td {line-height: 20px}

	#shareBtn.cmtBtn {display: block; margin-bottom: 30px}
}

@media screen and (max-width: 500px) {
	.nwsLst {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px}
	.nwsLst .itm {padding: 0 0 10px 0; margin-bottom: 0}
	.nwsLst .itm p,
	.nwsLst .itm a::before {display: none}
	.nwsLst .itm a {display: grid}
	.nwsLst .newsImg {margin: 0 0 10px 0; padding: 0; width: 100%; height: auto; order: 1}
	.nwsLst .itm h2 {font-size: 14px; line-height: 16px; order: 2; padding: 0}
	.smf {grid-column: 1 / -1;}
}