* { margin:0; padding:0; box-sizing:border-box; }
body { 
    color:#e0e0e0; 
    background-color:#121212; /* Bardzo ciemny grafit */
    text-align:center; 
    font:300 1em/1.6 "Segoe UI", "Toronto", sans-serif; 
}

main { text-align:left; position:relative; padding-bottom: 50px; }
.wx { width:990px; max-width:100%; margin:0 auto; }

/* LINKI - TWÓJ POMARAŃCZ */
a { color:#f39c12; text-decoration:none; display:inline-block; transition:.4s; cursor:pointer; }
a:hover { color:#fff; }

nav { display:block; text-align:right; margin-top:50px; background: rgba(18,18,18,0.9); }
nav ul { list-style:none; padding-left:0 }
nav ul li { display:inline-block; }
nav ul li a { display:block; padding:12px 1.5em; color:#bbb; text-decoration:none; text-transform: uppercase; font-size: 0.9em; letter-spacing: 1px; }
nav ul li a:hover, nav ul li a.activ { color:#f39c12; }

h1:before { content:' '; display:block; clear:both; height:1px }
h1 span, h1 a { font-weight:400; display:block; color:#e0e0e0; font-size:22px; -webkit-tap-highlight-color:rgba(224, 224, 224, 1); }
.n2 { text-align:center; padding-left:0 }
.n2  li a { color:#28508b; padding:12px .6em; font-size:.85em; }
.n2 li a:hover { color:coral; }
strong, b { font-weight:600 }
.center { text-align:center }
.rt { text-align:right }
.no { list-style-type:none } 
.m-li1em li { display:inline-block; margin:0 1em }
#fotografia { float:left;width:170px;height:170px;background:url('../img/mik.webp') no-repeat;background-size:cover;position:relative;transition:opacity .5s; z-index:3; -webkit-tap-highlight-color:rgba(0,0,0,0); }
#fotografia:hover { opacity:.6 }
#fotografia a { position:absolute; top:0; left:0; width:100%; height:100% }
a:not(.not-a):after { content:''; display:block; height:1px; width:0; background:#cecece; transition:width .3s; margin:auto }
a:hover:after, ul li a.activ:after { width:100% }
.not-a a:hover:after { width:0 }
.not-a2 a:after { display:none }
.hr, nav ul:after { 
    content:''; display:block; width:100%; height:1px; 
    background: linear-gradient(90deg, transparent, #444, transparent);
    box-shadow: none; opacity:1; margin: 2em 0;
}
.hr { margin:1em 0 2em 0 }
p { margin:.6em 0}
img, video, iframe { max-width:100% }
ul.inl li { display:inline; }
ul.d-inl li { display:inline-block; vertical-align:middle; }
ul.yt li { position:relative; cursor:pointer; margin:1% }
ul.yt li:not(.no-yt):before { content:''; background:url('../img/yt.svg') no-repeat; position:absolute; width:40%; height:50%; top:50%; left:50%; transform:translate(-50%, -50%); opacity:.75; transition:all .4s }
ul.yt li:hover:before { width:60%; height:70%; opacity:.85 }
.ul { padding-left:1em; margin:1em 0 }
.ul li { margin:.5em 0 }
.br { height:16px }
.fs10 { line-height:16px }
.dot:after { content:url('../img/dot.svg'); display:inline-block; width:9px; padding:0 5px; opacity:.8 }
article { line-height:155% }
.l2 { display:block; text-align:center }
.l2:before, .l2:after { display:inline-block; width:40%; height:1px;box-shadow:black 1px 1px 1px 1px;opacity:0.6 }
.L-logo { overflow:hidden; text-align:center; width:100%; position:relative; margin:1.8em 0 0 0 }
.L-logo div { width:calc(50% - 30px); position:absolute; top:0; height:1px }
.L-logo div:first-child { left:0; }
.L-logo div:last-child { right:0; }
footer { font-size:80%; color:#3d3d3d; display:block; margin-top:26px; overflow:hidden }
header { position:relative; }
.play2 { color:#3d3d3d; padding-right:2em; font-size:86%; -webkit-tap-highlight-color:rgba(0,0,0,0) }
.play2:before { content:url('start-play.svg'); display:inline-block; vertical-align:middle; transition:.4s; width:40px; height:40px; margin-right:9px }
.play2:hover { opacity:.7 }
.play2.p-stop:before { content:url('stop-play.svg') }
.hsize:hover:before { transform:scale(1.1) }
.l-r { position:relative; min-height:70px }
.l-r a { position:absolute; top:0; height:70px }
.l-r a:first-child { left:0; }
.l-r a:last-child { right:0; }
.p-stop,.p-start {position:relative; z-index:2 }
.mr2 { margin-right:2em }
.c25 { text-align:center; list-style:none; padding:0; }
.c25 li { text-align:center; list-style:none; padding:0; display:inline-block; vertical-align:middle; }
.m9 li { margin:0 6px }
.dsp-no { display:none }
.show-next { color:coral; cursor:pointer }
.fil1{ fill:#3d3d3d;transition:fill .7s }
.fil1:hover{ fill:coral }
.p-stop.adb:after { position:static; margin-left:.5em; }
.adb { color:#28508b  }
.adb:hover { color:coral  }

.szary-blok, .gradient-blok { 
    background: #1e1e1e; 
    padding: 25px; 
    border-radius: 15px; 
    margin: 20px 0; 
    border: 1px solid #2a2a2a; 
    box-shadow: 8px 8px 16px #0b0b0b, -4px -4px 12px #262626; 
    transition: all 0.3s ease; 
}

.szary-blok:hover { 
    background-color: #252525; 
    border-color: #f39c12; 
    transform: translateY(-3px);
}

.grafit-blok { background-color: #232323; padding: 15px; border-radius: 7px; margin: 10px 0; transition: all 0.3s ease; }

.orange-blok { 
    background: linear-gradient(145deg, #f39c12, #d35400); 
    padding: 15px; 
    border-radius: 12px; 
    margin: 10px 0; 
    color: white; 
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.gradient-blok { background: linear-gradient(145deg, #3d3d3d, #232323); padding: 15px; border-radius: 7px; margin: 10px 0; transition: all 0.3s ease; }

.moja-lista { list-style-type: decimal; margin-left: 20px; padding: 10px; }

.moja-lista li::marker { color: black; font-weight: bold; }

.moja-lista li { margin-bottom: 8px; }

@media(min-width:990px){
.mflex { display:flex; justify-content:space-between; }
.s-cloud { position:absolute; bottom:50px; right:0; z-index:3; }
.c25 li { width:19%; }
.flo-l { float:left }
.flo-r { float:right }
img.flo-l, .flo-l img { padding-right:1em; padding-bottom:1em; }
img.flo-r, .flo-r img { padding-left:1em; padding-bottom:1em; }
nav { position:sticky; top:0; z-index:2; }
nav ul li:first-child a, .n2  li a { padding-left:5px }
nav ul li:last-child a, .n2  li a { padding-right:5px }
ul.yt li { max-width:30%; }
}

@media(max-width:989px){
.s-cloud { position:absolute; top:30px; right:10px; z-index:3; }
.c25 li { width:auto; margin:9px }
main { padding:0 1em; margin:0 auto 1em auto }
nav { text-align:center }
nav ul { display:inline-block }
nav ul li { display:block; }
#fotografia { float:none; display:block; margin:-1em auto 0 auto; }
img.flo-l, img.flo-r { display:block; margin:auto; }
.l-r a { position:static; top:0; height:70px }
footer { text-align:center }
}