:root {
  --body-bg:#fcfbfa;
  --c1: #22352c;
  --c2: #333230;
  --c3: #5e9b46;
  --c4: #515253;
  --h: #e2e3e4;
  --a: #a97000;
  --ah: #df9a10;
  --nav-bg:#4a463a;
  --nav-in:#4a463ae0;
  --nav-a: #eee;
  --nav-ah: #cbff88;
  --marker: #338866;
  --blok-bg:#fffdec80;
  --bord:#b19f0a;
  --fff:#fff;
  --sidebar-bg:#f2f1e6;
  --sidebar-bord:#f2f1e6;
  
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:17px; }
body { font:1rem/1.6 sans-serif; min-height:100vh; min-height:100dvh; color:var(--c1); background:var(--body-bg); }
::selection { background-color:var(--bord); color:var(--fff); }
main article { padding:1rem; font-size:1.1rem; }
footer { background:var(--nav-bg); color:var(--h); }
footer .wx { display:flex; align-items:center; padding:1em; gap:1em; font-size:90%; opacity:.8; }
/* - header elements - */

@keyframes mPoint { 0% { opacity:1; transform:scale(1)} 50% { opacity:.5; transform:scale(.5)} 100% { opacity:1; transform:scale(1)} }
@keyframes sidebar { 50% { transform:translateY(-35px) } 100% { transform:translateY(0) } }
@keyframes navIN { 0% { padding:.75em 1.5em;  } 100% { padding:.65em 1.5em;  } }
@keyframes to-l { from { opacity:0; transform:translateX(40px)} to { opacity:1; transform:translateX(0)} }
@keyframes to-r { from { opacity:0; transform:translateX(-40px)} to { opacity:1; transform:translateX(0)} }

/* tabelka */
table { border:1px solid var(--bord); margin:10px 0; width:100%; border-collapse:collapse; }
.th td, .th { color:var(--fff); %tshadow:0 1px 1px #16437D; border:1px solid var(--bord); padding:4px 2px; text-align:center; }
th, td { padding:5px; font-size:88%; border:1px solid var(--bord); }
thead td { text-align:center }

.center { text-align:center }
.right { text-align:right }
hr { background:#BEDF53; height:2px; border:none; margin:1.5em 0; }
.ukos { font-style:italic; text-align:center; font-family:times,serif; %tshadow:none; }
.ital, .przypis { font-style:italic; font-family:serif; }
.serif { font-family:serif }
.blue { color:#896134 !important; }
.blu2, .blu2 a { color:#5ba055; }

a { color:var(--a); transition:color .5s; text-decoration:none; cursor:pointer; }
main a { position:relative; }
a:hover { color:var(--ah); }
main a:after { content:''; width:0; background:var(--a); position:absolute; bottom:-1px; left:0; transition:.3s; height:1px; display:block; }
main a:hover:after { width:100%; }

/* sidebar */
sidebar { --clr1:#bcbc9e; }
h2 { text-align:center; }
sidebar h2:not(.wp-block-heading) { color:#9e6d21; margin:1rem auto .5rem; font-size:1.3rem; max-width:390px; animation:toBot 1s .3s both; margin-bottom:.8em; line-height:1.2; padding:1rem; 
background:linear-gradient(90deg, #f2f1ed, #f4f4f000); border:1px solid #baac5f; border-right:none; border-left-width:4px; overflow:hidden; border-radius:9px 0 0 9px; }
.sidebar { animation:sidebar 1.8s both; }
main h2 { color:#354; margin:1rem auto .5rem; font-size:1.3rem; animation:toBot 1s .3s both; }
main h2:not(:first-child):before { content:''; display:block; width:40%; height:2px; background:#2951481c; margin:3em auto 1em auto; }
sidebar section { --bgc:#f2f1e6; margin:1em 0; padding:0 1rem; border-left:4px solid #686353; border-bottom:1px solid #686353; background:var(--bgc); overflow:hidden; border-radius:9px 0 0 9px; }
sidebar section h3 { margin:0 -1rem .5rem -1rem; background:#686353; color:var(--fff); padding:.5rem; font:600 1rem/1.4 sans-serif; }
section h3 + p { margin-top:0; }
section p:first-line  { font-weight:600; line-height:2.2rem; }
section a { --a:#9e6d21; --ah:#6c5b00; display:flex; align-items:center; gap:1.2ch; margin-bottom:.5rem; border:1px solid #d8cfb4; background:var(--fff); border-radius:1rem; }
section a svg { display:block; width:2rem; height:2rem; background:var(--bgc); outline:6px solid var(--bgc); border-radius:50%; }
.sdb { border-top:5px solid var(--clr1); border-bottom:5px solid var(--clr1); }

footer .wx { justify-content:center; margin-top:1rem; }
footer a { color:#fffcce; }
footer a:hover { color:var(--fff); }

a .screen-reader-text { display:none; }

.flex { display:flex; }
.sp-bet { justify-content:space-between; }
.r {  text-align:right; }
.c { text-align:center; }
.j { text-align:justify; }
.l { text-align:left; }
.c3 { color:var(--c3)}

/* header */
header { padding-bottom:16.8%; position:relative; background-image:url('https://www.ciechanow-psychoterapia.pl//wp-content/uploads/slider/0.webp'); background-repeat:no-repeat; background-size:100% 100%; background-position:top center; display:grid; overflow:hidden; }
header .wx { position:relative; height:100%; }
header h1 { color:var(--h); font-size:1.5rem; text-shadow:0 1px 1px #000; position:absolute; z-index:3; top:20px; left:9px; padding:.5rem .8rem .5rem .3rem; background:#00000080; line-height:1.2; animation:to-r 1s .2s both; }
header h1 a, header h1 a:hover { color:inherit; display:flex; gap:.2rem; }
h1 a svg { width:60px; height:60px; }
.slide { position:absolute; inset:0; background-repeat:no-repeat; background-size:auto; background-attachment:fixed; background-position:top center; opacity:0; transform:scale(1.1); transition:all 1.5s ease, transform 1.5s ease; }
.slide p { color:#eee; font-size:1.2rem; padding:9px 4rem 9px 1rem; background:#00000040; width:fit-content; max-width:90%; position:absolute; }
.r-bot { right:9px; bottom:10px; font-weight:700; }
.r-mid { right:0; top:43%; }
.curr .to-l { animation:to-l 1.3s .4s both; }
.curr .to-r { animation:to-r 1.3s .4s both; }
.slide.curr { opacity:1; transform:scale(1.05); z-index:2; }
.slide.hid { animation:hid 3s both; }
  body.grid { grid-template-rows:auto auto 1fr auto; }
@keyframes slide { from { opacity:0; } to { opacity:1; } }
@keyframes hid { from { opacity:1; } to { opacity:0; } }
  .grid, header, nav, footer:not(article footer), .slide { display:grid; grid-template-columns:1fr minmax(290px, 320px) minmax(auto, 800px) 1fr; }
  .wx { grid-column:2/span 2; }
  .bord { border:5px solid #e5eeda !important; outline:#acd4a8 solid 1px; box-sizing:content-box; }
  img.flo-l { float:left; margin-bottom:5px; margin-right:1em; }
  img.flo-r { float:right; margin-bottom:5px; margin-left:1em; }

p { margin:1em 0 }
p:first-child { margin-top:0; }
main ul, main ol { margin:1.2em 0 1em 1.5em }
main .blok ul, main .blok ol { font-size:.96rem; color:var(--c4); }
sidebar ul, sidebar ol { margin:0 } 
main > article { animation:toBot 1s both}
main li { margin:.5em 0 .5em 1em; padding-left:0; position:relative; }
main li::marker { color:var(--marker) }
main ul { list-style:none; }
main li ul { margin-left:0; }
main li ol { margin-left:1em; }
main ol ol li { list-style-type:lower-latin }
main li ul { list-style:disc; margin-top:0; }
main ul > li:before { content:url('https://www.ciechanow-psychoterapia.pl//wp-content/themes/psyche/img/listek.svg'); display:inline-block; width:1em; margin-left:-1em; position:relative; top:2px; left:-5px; opacity:.5; }
main li li:before, main ul li.first:before  { content:none; }
main ul li.first { font-weight:bold; }

img, svg { max-width:100%; max-height:100vh; width:auto; height:auto; shape-margin:.7rem; background-repeat:no-repeat; background-size:cover; font-style:italic; vertical-align:middle; }
svg { fill:currentColor; stroke:currentColor; }
#popup a.ajx {display:inline-block; margin-top:2em; }

@media(min-width:900px){
  main { grid-column:3; }
  sidebar { grid-column:2; grid-row:3; }
  header, nav, footer, .gc3 { grid-column:1/-1 }
  .sidebar-content { position:sticky; top:52px; }
  .flo-l { float:left; }
  .flo-r { float:right; }
  .marg.flo-l { margin-right:1em; margin-bottom:1em; }
  .marg.flo-r { margin-left:1em; margin-bottom:1em; }
}


@media(max-width:1399px){
  header h1 { font-size:1.7vw; top:5px; }
  h1 a svg { width:4vw; height:4vw; }
  .slide p { font-size:1.6vw; }
  .r-bot { bottom:-5px; }
  .r-mid { top:6.2vw; right:12px; }
}


@media(max-width:899px){
  body.grid { grid-template-rows:auto auto auto 1fr auto; grid-template-columns:1fr; }
  h1 {padding:1em 5px; }
  sidebar { overflow:hidden; }
  sidebar, main { grid-column:1; }
  .sidebar-content { width:370px; max-width:96%; margin:auto; }
  .sidebar-content:after { content:''; display:block; height:2px; background:linear-gradient(90deg, #3540, #bdc092, #3540); margin:1em auto; width:68%; }
  .o-nas p:first-child { text-align:center; }
  .adres a:after { right:5rem; }
  .flo-r img, .flo-l img { display:block; margin:auto; }
  footer .wx { flex-direction:column; }
  header { padding-bottom:15.9%; }
  header, .slide { background-size:contain; }
  .r-mid { display:none; }
  .m-br:after { content:''; display:block; height:3px; width:100%; }
}

@media(max-width:590px){
  header h1 { font-size:3.3vw; top:2vw; }
  .slide p { display:none; }
  h1 a svg { width:8vw; height:8vw; }
  img.flo-l, img.flo-r { float:none; display:block; margin:1rem auto; }
  main ul, ol { margin:1.2em 0 1em .5em }
}

@media(max-width:460px){
  .zesp h3, .zesp .koment { font-size:3.3vw; }
}

#zespol { font:88%/1.4 sans-serif; display:flex; gap:3%; justify-content:center; margin:1em 0; }
.zesp { border:1px solid #ddc; border-radius:9px 9px 0 0; text-align:center; padding:1.3em 1em; flex:1; cursor:pointer; background:var(--blok-bg); transition:all .5s; }
.zesp:hover, .zesp.blu2 { border-color:#bbbbbb00; background:inherit; }
.zesp img { width:100%; margin:9px 0; }
.zesp a { display:block; text-align:right; font-weight:700; }
.koment { display:block; width:fit-content; margin:0 0 0 auto; }
.blue { color:#896434 !important; }
.blu2, .blu2 a { color:#b6665e; }

.blok { border:1px solid #ddd; padding:1em; background:var(--blok-bg); border-radius:9px; }
main sidebar { display:none; }