/*================================================================
/*
/* Handcrafted with love by all the good people of STUDIO SYNAPSE
/*
/*	    www.studiosynapse.cz | justwow@studiosynapse.cz
/*
/*================================================================


/* ********************************************** */
/* ********************************************** */
/* -----  RESPONSIVE Design  ----------------------- */
/* ********************************************** */
/* ********************************************** */
@media (pointer: coarse) {
    .scrollcontainer {
        cursor: default !important;
        user-select: auto !important;
    }
    .card-item {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* =========================================================== */
/* -----  Big screens >1200 px  ------------------------------ */
@media screen and (min-width: 1200px) {
}

/* =========================================================== */
/* -----  Landscape Tablets 1320 px  ------------------------------ */
@media screen and (max-width: 1320px) {
	#theRibbon { font-size:1.25em; transform:translate(-30%, 50px) rotate(323deg);}
}

/* =========================================================== */
/* -----  Landscape Tablets 1200 px  ------------------------------ */
@media screen and (max-width: 1200px) {
/* -----  lawyers  ------------------------------ */
.contactbox.lawyers .inside  { text-align:center;}
.contactbox.lawyers .crew-member { width:30%;}
/* -----  news  ------------------------------ */
.newsbox h1 { font-size:1.875em;}
.longtextbox.news h1 { font-size:4em;}
}

/* =========================================================== */
/* -----  Portait Tablets < 1000 px  ------------------------------ */
@media screen and (max-width: 1000px) {
/* body, table, ul, input, select, textarea, label { font-size:92%;} */
/* -----  logo  ------------------------------ */
#logoPart1 { width:128px; top:18px;}
#logoPart2 { width:92px; bottom:12px;}
/* -----  menu  ------------------------------ */
#theMenu #theFrontPart { display:block; position:relative;}
#theMenu #theFrontPart .logo-lawyer { display:none;}
#theMenu #theFrontPart .back-link { float:none; margin:24px 12px 0 0; text-align:center;}
#theMenu { display:block; opacity:0; position:fixed; left:0; bottom:0; margin:0; padding:0; width:100%; height:0; z-index:0; background:var(--fi-color-white); background:rgba(255,255,255,0);
	-moz-transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; transition:all 0.25s ease-out;}
.mobilemenu-on #theMenu { display:block; width:100%; height:100%; margin:0 auto; opacity:1; z-index:1200; background:rgba(255,255,255,0.98); overflow-y:scroll;}
#theMenu ul.main-menu { display:flex; position:relative; left:auto; top:auto; width:100%; height:100%; margin:0 auto; vertical-align:middle; text-align:center; padding:0; flex-direction:column; justify-content:center;}
#theMenu ul.main-menu li { list-style-type:none; display:block; clear:both; text-align:center;}
#theMenu ul.main-menu li a { display:inline-block; float:none; font-size:1.5em; line-height:1em; padding:0.25em 0.55em 0.25em; margin:0.25em auto 0.25em;}
#theMenu ul.main-menu li ul.sub-menu { display:none;}
#theMenu ul.main-menu > li.current-menu-item ul.sub-menu { display:none;}
.main-menu > li { margin:0 !important;}
.main-menu > li::after { display:none !important;}
.main-menu li#menu-item-294 { font-size:1.25em; top:8px; margin-left:0;}
.main-menu li#menu-item-294 a { padding:0.5em 1em 0.5em 1em;}
/* -----  Menu  ------------------------------ */
#theMenuSwitch { position:fixed; right:16px; top:16px; display:flex; flex-direction:column; justify-content:center; align-items:center; width:64px; height:64px; z-index:1250; background-color:var(--fi-color-black); color:var(--fi-color-white); border-radius:50%; font-weight:500; transition:all 0.25s;}
#theMenuSwitch::after { content:"Menu"; display:block; position:relative; top:9px; font-size:0.75rem;}
#theMenuSwitch i { display:none;}
#theMenuSwitch span { display:block; position:relative; width:22px; height:2px; margin-top:4px; background-color:rgba(255,255,255,1); border-radius:2px; transition:all 0.15s;}
#theMenuSwitch span::before { content:""; display:block; position:relative; width:22px; height:2px; top:-7px; background-color:var(--fi-color-white); border-radius:2px; transition:all 0.25s;}
#theMenuSwitch span::after { content:""; display:block; position:relative; width:22px; height:2px; top:5px; background-color:var(--fi-color-white); border-radius:2px; transition:all 0.25s;}
#theMenuSwitch:active { background-color:var(--fi-color-neutral);}
.mobilemenu-on #theMenuSwitch { background-color:var(--fi-color-white); color:var(--fi-color-black);}
.mobilemenu-on #theMenuSwitch::after { content:"Pryč";}
.mobilemenu-on #theMenuSwitch span { background-color:rgba(255,255,255,0);}
.mobilemenu-on #theMenuSwitch span::before { top:0px; transform:rotate(45deg); background-color:var(--fi-color-black);}
.mobilemenu-on #theMenuSwitch span::after { top:-2px; transform:rotate(-45deg); background-color:var(--fi-color-black);}
/* -----  Buy box  ------------------------------ */
.islawyer #buybox { width:100%; right:auto;}
#buybox.isnarrowcontent { width:100%; right:auto;}
/* -----  Journal logo  ------------------------------ */
#theJournalLogo { left:28px; top:24px; transform:scale(.5);}
.scrolled #theJournalLogo { top:24px; transform:scale(.35);}
/* -----  Cards  ------------------------------ */
.cardbox .cards .card-item { min-height:264px;}
.cardbox.type-2 .cards .card-item { min-height:290px;}
.personcardbox.firstslide .inside > p { text-align:center; left:auto;}
.personcardbox .card-item-person:nth-of-type(odd) { transform:none; margin-top:0;}
.personcardbox .card-item-person:nth-of-type(even) { transform:none;}
.personcardbox .card-item-person .card-item-image { width:300px; height:300px;}
.personcardbox .card-item-person .card-item-text { width:400px;}
.servicesbox .card-item { float:none; width:85%; max-width:560px; margin:12px auto 40px;}
.servicesbox .card-item:nth-of-type(even) { float:none;}
/* -----  Long Text  ------------------------------ */
.longtextbox .longtext-content { max-width:560px; column-count:1;}
.longtextbox .longtext-content.col-3 { max-width:600px; column-count:2; column-gap:3em;}
.longtextbox .longtext-content.col-2 { max-width:600px; column-count:2; column-gap:3em;}
.longtextbox .longtext-content.col-1 { column-count:1; max-width:560px;}
.gallery-container { width:calc(100% - 18px);}
.gallery-container img.big.limited { max-width:none; max-height:none;}
.people-container .one-face { width:320px;}
/* -----  Journal  ------------------------------ */
.journalbox > h1 { font-size:clamp(3em, 7.75vh, 6em);}
/* -----  Reference  ------------------------------ */
.referencebox .one-item { float:none; width:88%; margin:3.5em auto; text-align:center;}
.referencebox .item-lawyer { justify-content:center;}
.longtextbox h2 { font-size:2em;}
/* -----  Prices  ------------------------------ */
.pricebox .pricetable.small table { width:80%;}
.pricelist-item { width:88%;}
.pricelist-item.selected { margin:24px 14px;}
/* -----  Timeline  ------------------------------ */
.timeline-item { flex-direction:column; width:90%; margin:2em auto 3em; /* border:1px dotted red; */}
.timeline-item .timestamp { width:100%; margin-right:0; font-size:1rem; padding:0.75em;}
.timeline-item .timestamp strong { display:inline-block; vertical-align:baseline; margin:0 0.1rem; font-size:2em;}
.timeline-item .timestamp em { display:inline-block; vertical-align:baseline; margin:0 0.1rem;}
.timeline-item .timestamp small { display:inline-block; vertical-align:baseline; margin:0 0.1rem;}
.timeline-item .content { width:100%;}
.timeline-item h3 { height:auto; padding:3em 1em 1.75em; font-size:1.875em; line-height:1.05; text-align:center; justify-content:center;}
.timeline-item:not(.is-gone) h3:after { width:48px; height:48px;}
.timeline-item .crew { top:0; left:0; flex-direction:row; width:100%; height:auto; margin:0;/*  border:1px dotted red; */}
.timeline-item .crew-member { margin:1.25em 8px 0;}
.timeline-item .crew-member .member-thumb { width:48px; height:48px; margin-right:8px;}
.timeline-item .crew-member h4 { font-size:1em;}

/* -----  Contact  ------------------------------ */
.contactbox .form-text { float:none; width:85%; margin:0 auto;}
.contactbox .form-text.right { float:none;}
.contactbox .form-form { float:none; width:85%; margin:5em auto 0; text-align:center;}
.contactbox .form-form.left { float:none;}
.contactbox.lawyers .crew-member span { width:40px; height:40px; margin-left:-56px; margin-top:4px;}
.contactbox.lawyers .crew-member span b { line-height:2.1em;}
/* -----  Profile  ------------------------------ */
.fancyprofilepicture { position:absolute; left:18px; top:16px; height:46vh; width:calc(100% - 36px);}
.slide.profile { width:auto; margin:0 auto;}
.slide.profile#part1 { padding-top:46vh;}
/* -----  Workshop  ------------------------------ */
.slide.workshop { width:auto; margin:0 auto;}
.slide.workshop#part1 { padding-top:40vh;}
}


/* =========================================================== */
/* -----  Portait Small Tablets and Big Phones 600 px  ------------------------------ */
@media screen and (max-width: 600px) {
/* body, table, ul, input, select, textarea, label { font-size:88%;} */
/* -----  logo  ------------------------------ */
#logoPart1 { width:80px; top:4px; left:22px;}
#logoPart2 { width:56px; bottom:8px; right:22px;}

/* -----  up down box  ------------------------------ */
.updown-navi { width:40px; height:40px;}
.updown-navi#updownDown { left:8px; bottom:8px;}
.updown-navi#updownUp { right:8px; top:8px; display:none;}
/* -----  Buy box  ------------------------------ */
#buybox .button { top:-32px; margin:0 2px; transform:none !important;}
.activepart1 #buybox .button { transform:none !important;}
.activepart4 #buybox .button,
.activepart5 #buybox .button,
.activepart8 #buybox .button,
.activepart12 #buybox .button,
.activepart13 #buybox .button { transform:none !important;}
/* -----  FancyBcg  ------------------------------ */
.fancybcg { left:8px; top:18px; height:calc(100vh - 36px); width:calc(100% - 16px);}
/* -----  FancyCandy  ------------------------------ */
.fancycandy { left:8px; top:18px; height:calc(100vh - 36px); width:calc(100% - 16px);}
.fancycandy.center-1 img { height:50vh; top:22vh; max-width:90vw;}
.fancycandy.center-2 img { height:38vh; top:26vh; max-width:90vw;}
.fancycandy.right-down-1 img { height:45vh; top:35vh; right:0vw;}
.fancycandy.left-down-1 img { height:30vh; top:65vh; left:-5vw;}
/* -----  Profile  ------------------------------ */
.fancyprofilebcg { left:8px; top:16px; height:calc(100vh - 36px); width:calc(100% - 16px);}
.fancyprofilepicture { left:8px; top:16px; height:46vh; width:calc(100% - 16px);}
.slide.profile#part1 { padding-top:46vh;}
.slide.profile .longtextbox h1 { font-size:3em;}
.slide.workshop .longtextbox .workshop-logo { margin-bottom:-1.5em;}
.slide.workshop .longtextbox h1 { font-size:2.5em;}
.slide.workshop .longtextbox h2 { font-size:2em;}
.slide.workshop .crew-member { margin:1em 0.5em;}
.slide.workshop .workshop-time { font-size:1.25em;}
.slide.workshop .workshop-time small { font-size:0.975em;}
.longtextbox .longtext-content ul li { font-size:1em;}
.longtextbox.withnumbers .longtext-content ul li { font-size:1em;}
.longtextbox.withnumbers .longtext-content p.number:before { line-height:2em;}
/* -----  Content Parts  ------------------------------ */
.quotebox p { width:80%; min-width:0;}
.promobox h1 { width:90%; min-width:0;}
.promobox p { width:80%; min-width:0;}
.textbox h1 { width:80%; min-width:0; font-size:4vh;}
.textbox p { width:80%; min-width:0; font-size:3vh;}
.footerbox h1 { width:80%; min-width:0;}
.footerbox p { width:88%; min-width:0; font-size:1.25em; line-height:1.75em;}
.footerbox .partners .logo-partner { max-height:32px; margin:6px 24px;}
.footerbox .logo-footer { width:102px;}
/* -----  Texts  ------------------------------ */
.longtextbox .longtext-content { margin:2em auto 2em;}
.longtextbox .longtext-content.col-2 { column-count:1;}
.longtextbox .longtext-content.col-3 { column-count:1;}
.longtextbox h1 { font-size:2.5em; line-height:1;}
.gallery-container { padding:1px 0; margin:24px auto; width:auto;}
.gallery-container img { float:none; width:calc(100% - 16px);margin:0 8px 8px 8px;}
.gallery-container img.big { float:none; width:calc(100% - 16px);}
.people-container { margin:24px auto; padding:24px 0;}
.people-container .one-face { width:auto; max-width:320px; margin:0 0 1.5em;}
.people-container .one-face h2 { margin:0.5em auto 0.15em auto; width:auto;}
/* -----  Journal  ------------------------------ */
:root {
	--card-box-shadow-lite:0px 16px 16px 0px rgba(0,0,0,0.1);
}
.journalbox .journalsection-items.grid-with-hero { grid-template-columns:1fr; gap:0;}
.journalbox .journalsection-intro h1 { font-size:3rem;}
/* -----  Cards  ------------------------------ */
.cardbox .cards { width:96%; text-align:center;}
.cardbox h1 { width:98%; font-size:3.5em; text-align:center;}
.cardbox h2 { width:90%; text-align:center;}
.cardbox .cards .card-item { width:248px; min-height:264px; margin:12px 8px}
.cardbox.type-2 h1 { text-align:center;}
.cardbox.type-2 h2 { text-align:center;}
.cardbox.type-2 .cards .card-item { width:90%; max-width:412px; min-height:296px; margin:12px 8px;}
.cardbox.type-3 .cards .card-item { width:90%; margin:12px 8px; padding-bottom:64px;}
.cardbox.type-3 .cards .card-item .card-number { bottom:24px; left:25px; font-size:2.25em;}
.cardbox.type-3 .cards .card-item h2 { font-size:2em; padding:1px 24px;}
.cardbox.type-3 .cards .card-item p { padding:1px 24px;}
.cardbox.type-3 .cards .card-item .button { margin:0.875em 0 0.5em 24px;}
.cardbox.type-3 .cards .card-item.nonumber { padding-bottom:24px;}
.servicesbox .card-item { width:94%; margin:12px auto 24px;}
.longtextbox .servicesbox .card-item h2 { font-size:2.5em; padding:1px 24px;}
.longtextbox .servicesbox .card-item h3 { padding:1px 24px;}
.longtextbox .servicesbox .card-item p { font-size:1.25em; padding:1px 24px;}
.longtextbox .servicesbox .card-item ul { font-size:1.3334em; padding:1px 24px;}
.personcardbox h1 { font-size:3.5em; text-align:center;}
.personcardbox.firstslide .inside > p { margin:0.5em auto 0.5em; font-size:1.5em;}
.personcardbox .card-item-person { display:block; }
.personcardbox .card-item-person .card-item-image { width:60vw; height:60vw; margin:0 auto;}
.personcardbox .card-item-person .card-item-text { width:86%; margin:-24px auto 0; padding:1.75em 0 2em;}
.personcardbox .card-item-person .card-item-text h2 { margin:0.25em 0 0.5em; padding:1px 24px; font-size:1.6667em;}
.personcardbox .card-item-person .card-item-text p { padding:1px 22px; margin:0.5em 0 1em;}
.personcardbox .card-item-person.tiny .card-item-image { width:128px; height:128px; margin:0 auto;}
.personcardbox .card-item-person.tiny .card-item-text { width:90%; margin:-24px auto 0;}
.personcardbox .card-item-person.tiny .card-item-text h2 { padding:1px 24px;}
.personcardbox .card-item-person.tiny .card-item-text p { padding:1px 24px; margin:.25em 0 1em;}
.newsbox .card-item { margin:12px 10px;}
.newsbox .card-item:first-of-type { margin-left:64px;}
.newsbox .card-item:last-of-type { margin-right:64px;}
/*.newsbox { right:auto; text-align:center;}
.newsbox .card-item { display:block; width:90%; margin:16px auto 16px; text-align:center;}
.newsbox .card-item h2 { padding:1px 24px; text-align:center;}
.newsbox .card-item p { padding:1px 24px;}
.newsbox .card-item .button:first-of-type { margin:0 .05em .5em;}*/
/* -----  Prices  ------------------------------ */
.pricebox { display:block; width:100vw;}
.pricebox .inside { display:block; width:100vw;}
.pricebox h1 { font-size:4.5em; text-align:center;}
.pricebox h2 { font-size:2em;}
.pricebox .pricetable { width:98%; margin:0.5em 0 0.5em auto; overflow:scroll;}
.pricebox .pricetable.small.links { width:auto; margin:0.5em 24px 0.5em 24px;}
.pricebox .pricetable table { width:auto; min-width:780px;}
.pricebox .pricetable.small table { width:94%; min-width:auto;}
.pricebox .pricetable table td.label { padding:.75em 0.25em .75em 0;}
.pricebox .pricetable table span.price-new { font-size:1.25em; white-space:nowrap;}
.pricelist { width:100vw;}
.pricebox .inside { padding:0;}
.pricelist h1 { font-size:4.5em;}
.pricelist h2 { font-size:2em;}
/* -----  Timeline  ------------------------------ */
.timeline h1 { font-size:4.5em;}
.timeline h2 { font-size:2em; text-align:center;}
/* -----  Contact  ------------------------------ */
.contactbox .form-text { width:auto;}
.contactbox .form-text .crew-member .member-thumb { float:none; width:104px; height:104px;}
.contactbox .form-text .crew-member p { line-height:1.75em; padding-left:0;}
.contactbox .form-form { width:auto;}
.contactbox.lawyers .crew-member { width:50%;}
.contactbox.lawyers .crew-member span { width:32px; height:32px; margin-left:-44px;}
.contactbox.lawyers.onecol .crew-member span { position:relative; margin:0 auto 8px;}
.contactbox.lawyers .crew-member span b { line-height:1.75em;}
.contactbox.lawyers .crew > h1  { font-size:2.5em;}
/* -----  Form  ------------------------------ */
.form-form label { margin-top:-50px;}
.form-form label.txtar { margin-top:-153px;}
/* -----  Button  ------------------------------ */
.button { font-size:1.125em; padding:0.5em 1.75em 0.5em 0.75em;}
.button:after { right:0.15em; bottom:0.2em; transform:scale(1.1,1.1);}
/* -----  offset  ------------------------------ */
.offset-1 { left:4vh;}
.offset-2 { left:-12vh;}
.offset-3 { left:13vh;}
}


/* =========================================================== */
/* -----  Portait Phones in general 450 px  ------------------------------ */
@media screen and (max-width: 450px) {
/* -----  Journal logo  ------------------------------ */
#theJournalLogo { left:20px; top:16px;}
.scrolled #theJournalLogo { top:22px;}
/* -----  lawyers  ------------------------------ */
.personcardbox.firstslide .inside > p { font-size:1.275em;}
.contactbox.lawyers .crew-member { width:70%; margin:1em 0 1.5em;}
.contactbox.lawyers.twocol .crew-member { width:70%; margin:1.5em 0 1.5em;}
/* -----  crew  ------------------------------ */
.longtextbox .crew-member { /*width:148px;*/}
/* -----  news  ------------------------------ */
.newsbox h1 { margin-left:48px;}
.newsbox .card-item { width:240px; height:270px; margin:12px 8px;}
.newsbox .card-item h2 { font-size:1.75em;}
.newsbox .card-item:first-of-type { margin-left:32px;}
.newsbox .card-item:last-of-type { margin-right:32px;}
.newsbox .card-item:after { width:48px; height:48px;}
.longtextbox .longtext-perex { font-size:1.25em; line-height:1.5em;}
.longtextbox.news h1 { font-size:2.5em;}
.longtextbox.news.archive h1 { font-size:3.5em;}
.longtextbox.news .gallery-container { padding:0 0 24px;}
.longtextbox.news .video-container { position:relative; width:100%; margin:2em auto 0; padding:0;}
.longtextbox.news .longtext-content.buttons { margin-top:2em;}
.longtextbox.news .breadcrumbs { font-size:0.875em;}
.longtextbox.news .breadcrumbs a { margin:0 .75em;}
.longtextbox.news .breadcrumbs b { margin:0 .75em;}
.longtextbox.news .breadcrumbs i { margin:0 .75em;}
.longtextbox.news .author img { width:48px; height:48px;}
/* -----  Journal  ------------------------------ */
:root {
	--journal-item-width:auto;
	--journal-item-headline-size:1.875em;
	--journal-item-headline-padding:1px 30px 1px 0px;
	--journal-item-headline-margin:1.25em 0 0;
	--journal-item-text-size:.9375em;
	--journal-item-author-thumbnail:42px;
	--journal-item-author-margin:.75em 0 16px 0px;
}
.journalbox .journalsection { width:86%;}
.journalbox .journalsection-items { gap:40px;}
.longtextbox.journal { width:92%; margin:0 auto;}
.longtextbox.journal .longtext-perex,
.longtextbox.journal .longtext-content,
.longtextbox.journal h1,
.longtextbox.journal h2,
.longtextbox.journal h3 { width:auto;}
.journalbox > h1 { left:0.7vh; top:1vh; font-size:clamp(2.5em, 3vh, 6em);}
.longtextbox.journal .longtext-perex { font-size:1.5em; line-height:1.5em;}
.longtextbox.journal .longtext-content { font-size:1.275em;}
.longtextbox.journal .longtext-content ul li { font-size:1em;}
.journalbox .journalsection.center > h2 { font-size:2em; margin:0em 0 0.5em;}
.longtextbox.journal .longtext-content.buttons { font-size: 1em;}
.button.document:after { width:1.5em; height:1.5em;}
.button.lite:after { bottom:0.2em;}
/* -----  Prices  ------------------------------ */
.pricelist h1 { font-size:3.5em;}
/* -----  Timeline  ------------------------------ */
.timeline h1 { font-size:3.5em;}
.timeline .longtext-perex { font-size:1.25em; line-height:1.5em;}
/* -----  Reference  ------------------------------ */
.referencebox .one-item { width:94%;}
.referencebox .one-item p { font-size:1.4125em;}
.referencebox .item-lawyer { flex-direction:column;}
.referencebox .item-lawyer img { width:56px; height:56px; margin-right:0; margin-bottom:0.5em;}
/* -----  Footer box  ------------------------------ */
.footerbox .button { margin:0 2px;}
.fancymap { width:calc(100% - 18px); height:calc(100vh - 32px);}
.ctabox { left:0; width:100%;}

}