:root { --wx:1020px; --bg1:#295148; --body-bg:#f6f7f6; --c1:#122; --c2:#292f51; --c3:#46539b; --c4:#515253; --h:#e2e3e4; --a:#08d; --ah:#4cf; --nav-a:#eee; --nav-ah:#8df; --marker:#386; 
  --slide-bg:#e9eeff; --slide-font-color:#335caa; --slide-text-shadow:-1px 0 #111, 0 1px #111, 1px 0 #111, 0 -1px #111; }
* { 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(--marker); color:var(--nav-a); }
main article { padding:1rem; font-size:1.1rem; }
footer { background:var(--bg1); color:var(--h); border-top:2px solid #00bc74; }
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 rgb(77,140,250); margin:10px 0; width:100%; border-collapse:collapse; }
.th td, .th { color:#fff; %tshadow:0 1px 1px #16437D; border:1px solid rgb(117,154,206); padding:4px 2px; text-align:center; }
th, td { padding:5px; font-size:88%; border:1px solid #78A2D2; }
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; font-size:150%; }
.ital, .przypis { font-style:italic; font-size:110%; font-family:serif; }
.serif { font-family:serif }
.blue { color:#345E89 !important; }
.blu2, .blu2 a { color:#347cc3; }

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:#58a493; }
h2 { text-align:center; }
sidebar h2:not(.wp-block-heading) { color:#2a6456; 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, #edf2ef 70%, #f0f4f100); border:1px solid #ced; border-right:none; border-left-width:4px; }
.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:#f0f4f1; margin:1em 0; padding:0 1rem; border-left:4px solid #295148; border-bottom:1px solid #295148; background:var(--bgc); }
sidebar section h3 { margin:0 -1rem .5rem -1rem; background:#295148; color:#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:#219e86; --ah:#0da; display:flex; align-items:center; gap:1.2ch; margin-bottom:.5rem; border:1px solid #bdc; background:#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:#bed; }
footer a:hover { color:#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 .2rem; 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; }
@keyframes slide { from { opacity:0; } to { opacity:1; } }
@keyframes hid { from { opacity:1; } to { opacity:0; } }

@media(min-width:900px){
  .grid, header, nav, footer:not(article footer), .slide { display:grid; grid-template-columns:1fr minmax(290px, 320px) minmax(auto, 800px) 1fr; }
  body.grid { grid-template-rows:auto auto 1fr auto; }
  .wx { grid-column:2/span 2; }
  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){
  h1 {padding:1em 5px; }
  .tel-mail, .adres { margin:1em auto; width:320px; }
  sidebar, main { grid-column:1/-1; }
  .sidebar-content { width:370px; max-width:98%; margin:auto; }
  .sidebar-content:after { content:''; display:block; height:3px; background:linear-gradient(90deg, #3540, #354, #3540); margin:1em auto; width:50%; }
  .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; }
}

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

p { margin:1em 0 }
p:first-child { margin-top:0; }
main ul, ol { margin:1.2em 0 1em 1.5em }
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; }
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; }

#zespol { font:88%/1.4 sans-serif; display:flex; gap:3%; justify-content:center; margin:1em 0; }
.zesp { border:1px solid #ddd; text-align:center; padding:1.3em 1em; flex:1; cursor:pointer; background:#f0f4f1; 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:#345E89 !important; }
.blu2, .blu2 a { color:#347cc3; }

.blok { border:1px solid #ddd; padding:1em; background:#f0f4f1;  }
main sidebar { display:none; }