* { 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 { 
  width: 180px; 
  /* Tło z przezroczystością 85% */
  background: linear-gradient(145deg, rgba(34, 34, 34, 0.85), rgba(24, 24, 24, 0.85)); 
  border-radius: 8px;
  border: 1px solid rgba(61, 61, 61, 0.5);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  cursor: pointer;
  position: relative; 
  height: 48px; 
  /* Efekt szronionego szkła (rozmycie tła pod menu) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

/* Napis MENU ze strzałką */
.menu-label {
  padding: 12px 20px;
  color: #f39c12;
  font-weight: 600;
  text-align: center;
  font-size: 1.1em;
  line-height: 24px;
}

.menu-label::after {
  content: ' ▼';
  font-size: 0.7em;
  vertical-align: middle;
  transition: transform 0.4s;
  display: inline-block;
  margin-left: 8px;
}

/* Lista linków - przezroczysta i płynna */
nav ul { 
  display: flex; 
  flex-direction: column; 
  list-style: none; 
  padding: 0; 
  margin: 0;
  position: absolute; 
  top: 46px; 
  left: -1px; 
  width: calc(100% + 2px); 
  /* Tło listy (85% krycia) */
  background: rgba(24, 24, 24, 0.85); 
  border: 1px solid rgba(61, 61, 61, 0.5);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

  /* Animacja płynności */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transform: translateY(-10px);
  transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-out, visibility 0.5s;
}

/* Efekty po najechaniu myszką */
nav:hover { 
  border-color: rgba(243, 156, 18, 0.6); 
}

nav:hover .menu-label::after { 
  transform: rotate(180deg); 
}

nav:hover ul { 
  max-height: 600px; 
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0);
}

/* Elementy listy */
nav ul li { 
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
  width: 100%;
}

nav ul li:last-child { 
  border-bottom: none; 
}

nav ul li a { 
  display: block; 
  padding: 12px 20px; 
  color: #bbb; 
  text-decoration: none; 
  font-size: 1.1em;
  text-align: left; 
  width: 100%;
  transition: all 0.3s ease;
}

nav ul li a:hover { 
  color: #f39c12;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 25px; 
}

nav ul li a.activ { 
  color: #f39c12;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 4px 0 0 #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:150px;height:150px;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); margin-top: 20px; }
#fotografia:hover { opacity:.6 }
#fotografia a { position:absolute; top:20; 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: 5px 5px 16px #0b0b0b, -4px -4px 12px #262626; 
    transition: all 0.3s ease; 
}

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

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

.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; 
    align-items: flex-start;
    margin-bottom: -160px; 
  }
  .s-cloud { 
    position: absolute; 
    top: 360px; 
    right: 20px; 
    z-index: 20; 
    display: block !important;
  }
  nav { position: relative; top: 0; }
  .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; }
}

@media(max-width:989px){
  main { 
    padding: 0 20px; 
    margin: 0 auto;
  }
  .mflex { 
    display: block; 
    width: 100%;
  }
  
  nav { 
    margin: 40px auto 20px auto; 
    width: 100%; 
    max-width: 280px; 
    height: 48px;
    clear: both;
    position: relative;
    display: block;
    /* Z-INDEX ustawiamy na niższy niż widżet FB */
    z-index: 5; 
  }

  nav:hover {
    height: auto;
  }
  
  nav ul {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: none;
    border: 1px solid #3d3d3d;
    border-radius: 0 0 8px 8px;
    /* Upewniamy się, że tło menu nie jest przezroczyste */
    background: #181818; 
  }

  nav ul li a { 
    text-align: center; 
  }

  #fotografia { 
    float: none; 
    display: block; 
    margin: 20px auto; 
  }

  .s-cloud { 
    position: static; 
    margin: 20px auto; 
    width: 100%;
  }
}