/*------------------------RESET---------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {

	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}

article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }

/*------------------------------------------------------*/



:root   {

        --font1:        'indivisible', sans-serif; /* 400, 600 */

        --font2:        'pressio-compressed', sans-serif; /* 400, 600, 700 */



        --color0:                   #252525;

        --color0b:                  rgba(0,0,0,0.06);

        --color1:                   #6c0026;  

        --color1b:                  #ba1c53;

        --color1c:                  rgba(190,30,70,0.1);  

        --color1d:                  #ff86b0;

        --color2:                   #21447a;

        --border-radius1:           0.25rem;  

        --border-radius2:           0.5rem;  

        --font2-spacing:            0.015em;

        --font2-line-height:        0.95;

        --preview-padding:          0.6rem;

        --top-gap:                  min(2em, 2vw);



        --winter:                                rgb(27, 109, 240);

        --marianske-lazne:                       #00ba85;

        --chebsky:                               #ffb700;

        --karlovarsky:                           #1577b8;

        --plzensky:                              #7f0012;

        --chotesovsky:                           #b5005f;

        --kozel:                                 #d30f42;

        --presticky:                             #e24500;

        --rakovnicky:                            #d52d1c;

        --svatomartinsky-kost-plzen:             #c11d4a;

        --svatomartinske-slavnosti-podebrady:    #c11d4a;

        --pisecky:                               #0152a1;

        --podebradsky:                           #2569ba;

        --cerveny-hradek:                        #CC3A4F;

        --kdyne:                                 #5A9327;

        --strakonice:                            #79C12C;

        --teplice:                               #FFCD00;

        --ricansky:                              #7fad37;

        --chomutovsky:                           #75441a;

        --domazlicky:                            #e0aa32;

        --mostecky:                              #42c64b;

        --stankovsky:                            #00a1d5;

        --ostrovsky:                             #05a54f;

        --frantiskovy-lazne:                     #57609E;

        --stribrsky:                             #acd1ea; 

        --tachovsky:                             #c31c25;

        --rokycansky:                            #ea3118;

        }



.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }

.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }



.embedBlok { width:100%; }



html                                            {font-size: min(18px, calc(11px + 1vw)); line-height: 1; position: relative;}

html, body                                      {width: 100%; overflow-x: hidden;}

body                                            {width: 100%; font-family: var(--font1); box-sizing: border-box;}

body.fixed                                      {height: 100vh; overflow: hidden;}



html:has(.hp):before                            {display: block; width: 80em; aspect-ratio: 2; border-radius: 40em 40em 0 0; background: var(--color1b); box-sizing: border-box; position: absolute; opacity: 0.07; right: calc(50% - 5em); bottom: 0; z-index: 1; content: "";

                                                  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-type: luminance; -webkit-mask-type: luminance;

                                                  mask-image: linear-gradient(to left, black, transparent);                                           

                                                  -webkit-mask-image: linear-gradient(to left, black, transparent);



                                                }



.wrapper                                        {display: flex; margin-left: auto; margin-right: auto; max-width: 60em; width: calc(100% - 10vw); justify-content: center; align-items: center; align-content: center; box-sizing: border-box; flex-wrap: wrap; position: relative;}

.hp .wrapper                                    {max-width: 75em;} 



body                                            {padding-top: 5em;}

body.hp                                         {padding-top: 0;}



.header                                         {display: block; width: 100%; height: min(5.4em, calc(3.5em + 5vw)); font-size: 1.1em; position: absolute; top: 0; left: 0; z-index: 1000; box-sizing: border-box; transition: .25s ease-in-out;}

.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; transition: .25s ease-in-out;}

.header .logo                                   {display: block; width: 7.6em; position: relative; z-index: 10;}

.header .logo img                               {display: block; width: 100%;}

.header #navicon                                {display: none;}

.header .menu                                   {display: flex; align-items: center;} 

.header .menu .collapse                         {display: block; width: 100%;}

.header .menu nav                               {display: flex; align-items: center; gap: 0.2em; flex-wrap: wrap;}

.header .menu nav a                             {display: flex; align-items: center; color: var(--color0); font-weight: 400; position: relative; box-sizing: border-box; transition: .15s ease-in-out; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.header .menu .soc                              {display: flex; gap: 0.25em; position: relative; z-index: 2000;}

.header .menu .soc a                            {display: flex; width: 1.55em; height: 1.55em; justify-content: center; align-items: center; border-radius: 100%; background: var(--color1); transition: .15s ease-in-out;}

.header .menu .soc a img                        {display: block; width: 50%;}

.header .menu .soc a:hover                      {background: var(--color1b);}

  @media screen and (min-width: 1081px)         {

  .header .wrapper                              {width: calc(100% - 5vw); max-width: 80em;}

  .header .menu                                 {width: calc(100% - 8em);} 

  .header .menu nav                             {flex: 2; justify-content: center; container-type: inline-size;}

  .header .menu nav a                           {height: 1.6em; font-size: min(1.5em, 3.3cqw); padding: 0 0.75em 0.075em; border-radius: 0.8em; top: -0.075em;}

  .header .menu nav a:hover                     {color: var(--color1b); background: var(--color1c);}

  .header .menu nav a.sel                       {color: white !important; background: var(--color1);}

  .header .menu > div                           {top: -0.1em;}

  }

  @media screen and (max-width: 1080px)         {

  .header #navicon                              {display: block; width: 1.4em; height: 1.4em; background: URL('images/navicon.svg') no-repeat center top; background-size: 100% 400%; position: relative; top: -0.1em; z-index: 2000; box-sizing: border-box; cursor: pointer; transition: top .25s ease-in-out;}

  .header #navicon:hover                        {background-position: center top 33.33%;}

  .header .menu                                 {width: calc(100% - 12em); justify-content: flex-end; position: relative;}

  .header .menu .collapse                       {width: 100%; height: 100%; background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); opacity: 0; position: fixed; right: -101%; top: 0; overflow-y: auto; transition: opacity .45s ease-in-out;}

  .header .menu nav                             {max-width: 100%; max-height: 19em; flex-direction: column; align-content: flex-start; align-items: flex-start; gap: 1.2em 12vw; padding: calc(5em + 5vw) 10vw 2em; box-sizing: border-box; overflow-y: auto;}

  .header .menu nav a                           {font-size: 1.7em;}

  .header .menu nav a:hover                     {color: var(--color1);}

  .header .menu nav a.sel                       {color: var(--color1); font-weight: 600;}

  .header .menu > div                           {font-size: 1.1em;}

  .header.show .menu .collapse                  {right: 0; opacity: 1;}

  .header.show #navicon                         {background-position: center top 66.66%;}

  .header.show #navicon:hover                   {background-position: center top 100%;}

  }



.footer                                         {display: block; width: 100%; padding: 4.5em 0 4em; background: var(--color1); margin-top: 3em; position: relative; z-index: 1; overflow: hidden;

                                                -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: auto max(100%, 30em); mask-size: auto max(100%, 30em); mask-type: luminance; -webkit-mask-type: luminance;

                                                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000'%3E%3Cpath d='M2000,16c-134.29,0-390.83,28.71-1000,0S102.32,16,0,16v984h2000V16Z' width='1' height='1' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E");                                           

                                                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000'%3E%3Cpath d='M2000,16c-134.29,0-390.83,28.71-1000,0S102.32,16,0,16v984h2000V16Z' width='1' height='1' fill='white' stroke='none' stroke-width='0' stroke-linecap='round'/%3E%3C/svg%3E");



                                                }

.footer:before, .footer:after                   {display: block; width: var(--footer-shapes); aspect-ratio: 1; --footer-shapes: min(90vw, 60rem); position: absolute; border-radius: 100%; box-sizing: border-box; content: ""; z-index: 1;}

.footer:before                                  {border: solid 2em var(--color1b); opacity: 0.3; left: calc(-0.3 * var(--footer-shapes)); bottom: calc(-0.85 * var(--footer-shapes));}

.footer:after                                   {background: var(--color1b); opacity: 0.5; right: calc(-0.3 * var(--footer-shapes)); top: calc(-0.85 * var(--footer-shapes));}

.footer .wrapper                                {z-index: 2;}

.footer .wrapper > div                          {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative;}

.footer .wrapper > div:first-child              {margin-bottom: 2em;}

.footer .wrapper > div ul                       {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.2em 0; padding: 0;}

.footer .wrapper > div ul li                    {display: block; width: auto; font-size: 1.7em; font-weight: 600; padding: 0; margin: 0; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.footer .wrapper > div ul li:before             {display: none;}

.footer .wrapper > div ul li a                  {display: flex; justify-content: center; align-items: center; color: white; position: relative; padding: 0; border: none; transition: .15s ease-in-out;}

.footer .wrapper > div ul li a:hover            {color: var(--color1d);}

.footer .wrapper > div ul li.soc a              {width: 1.1em; height: 1.1em; border-radius: 100%; border: solid 0.07em white; box-sizing: border-box;}

.footer .wrapper > div ul li.soc a img          {display: block; width: 55%;} 

.footer .wrapper > div ul li.soc a:hover        {transform: scale(0.9);}

.footer .wrapper > div ul li:nth-child(1)       {margin-right: 0.3em;}

.footer .wrapper > div ul li:nth-child(3)       {margin-right: 0.5em; padding-right: 0.5em; border-right: solid 1px white;}

.footer .wrapper > div > a                      {display: block; width: 15em;}

.footer .wrapper > div > a img                  {display: block; width: 100%;}

.footer .wrapper > div nav                      {display: flex; align-items: center; flex-wrap: wrap; gap:  0.9em 1.2em;}

.footer .wrapper > div nav a                    {display: block; font-size: 0.8em; color: white; transition: .15s ease-in-out;}

.footer .wrapper > div nav a:hover              {color: var(--color1d);}

.footer .wrapper > div p                        {display: block; width: auto; font-size: 0.8em;}

.footer .wrapper > div p a                      {display: inline-block; color: white; padding: 0; border: none; transition: .15s ease-in-out;}

.footer .wrapper > div p a:hover                {color: var(--color1d);}

  @media screen and (min-width: 961px)          {

  .footer .wrapper > div ul li:nth-child(3)     {margin-left: 0.5em;}

  }

  @media screen and (max-width: 960px)          {

  .footer                                       {padding-bottom: 1.5em;}

  .footer .wrapper > div                        {justify-content: center;}

  .footer .wrapper > div ul                     {width: 100%; margin-bottom: 2.5em;}

  .footer .wrapper > div ul li.soc              {display: flex; width: 48%;}

  .footer .wrapper > div ul li.soc:nth-child(1) {justify-content: flex-end;}

  .footer .wrapper > div:first-child            {margin-bottom: 3em;}

  .footer .wrapper > div nav                    {justify-content: center;}

  .footer .wrapper > div p                      {width: 100%; text-align: center; font-size: 0.6em; margin-top: 3em;}

  }



.anim                                           {transition-delay: 2s; -ms-transform: scale(0.8,0.8); transform: scale(0.8,0.8); opacity: 0; transition: .5s ease-in-out;}

.anim.play                                      {opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}



.button                                         {display: flex; height: 2.2em; align-items: center; gap: 0.4em; font-size: 1.3em; color: white !important; font-weight: 600; text-transform: uppercase; padding: 0 1.1em; background: var(--color1); border: none !important; outline: none; cursor: pointer; border-radius: 1.1em; box-sizing: border-box; font-family: var(--font2); letter-spacing: 0.075em; line-height: var(--font2-line-height); transition: .15s ease-in-out;}

.button img                                     {display: block; height: 0.65em; position: relative; top: -0.03em;}

.button:hover                                   {background: var(--color1b);}

.button.border                                  {color: var(--color0) !important; background: none; border: solid 0.1em var(--color0) !important;}

.button.border:hover                            {color: white !important; background: var(--color1); border-color: var(--color1) !important;}



.full-width-button                              {display: flex; width: 100%; justify-content: center; align-items: center; overflow: hidden;}

.full-width-button > a                          {display: block; font-size: 0.85rem; text-transform: uppercase; color: var(--color1); letter-spacing: 0.04em; text-decoration: underline; padding-inline: 1em; position: relative; font-family: var(--font2); transition: .15s ease-in-out;}

.full-width-button > a:hover                    {color: var(--color0); text-decoration-color: transparent;}

.full-width-button > a::before,

.full-width-button > a:after                    {display: block; width: 3000px; height: 1px; background: black; opacity: 0.25; position: absolute; top: 52%; content: "";}

.full-width-button > a::before                  {right: 100%;}

.full-width-button > a:after                    {left: 100%;}



.section                                        {display: block; width: 100%; padding: 2em 0;}

section h1                                      {display: block; width: 100%; font-size: min(4.6rem, calc(2rem + 5vw)); font-weight: 700; color: var(--color0); margin: var(--top-gap) 0 0.5em; box-sizing: border-box; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

section .heading-filters                        {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em 0; margin-block: var(--top-gap) 1.6em;}

section .heading-filters h1                     {width: auto; margin-right: 1em; margin: 0;}

section .heading-filters > div                  {display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 1.2em}

section .heading-filters > div a                {display: block; font-size: 1.7em; color: var(--color0); font-weight: 400; position: relative; font-family: var(--font2); transition: .35s ease-in-out;}   

section .heading-filters > div a:hover          {color: var(--color1);}

section .heading-filters > div a.sel            {color: var(--color1); font-weight: 600;}



h2                                              {display: block; width: 100%; font-size: min(2.4rem, calc(1rem + 4vw)); font-weight: 700; color: var(--color0); box-sizing: border-box; margin: 1em 0 0.5em; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height)}

h2 span                                         {font-weight: 400;}

p, li, td                                       {display: block; width: 100%; text-align: left; font-size: 1em; line-height: 1.5; color: var(--color0); font-weight: 300; box-sizing: border-box;}

p strong, li strong, td strong                  {color: var(--color0); font-weight: 600;}

em                                              {font-style: italic;}

p a, li a                                       {color: var(--color0); text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}

p a:hover, li a:hover                           {color: var(--color1); text-decoration-color: transparent;}

td                                              {display: table-cell; width: auto; text-align: left; vertical-align: top;}

ul, ol                                          {padding-left: 1em; margin: 0;}

ul > li > :is(ul, ol), ol > li > :is(ul, ol)    {padding-left: 0;}

li                                              {text-align: left; padding-left: 1.6em; position: relative;}

li:not(:last-child)                             {margin-bottom: 0.15em;}

li:before                                       {display: block; width: 0.6em; height: 0.15em; background: var(--color1b); position: absolute; left: 0; top: 0.68em; content: "";}

li :is(ul, ol)                                  {margin-block: 0.2em 0.6em;}

li:not(:first-child):has(> ul, > ol)            {margin-top: 0.55em;}

ol                                              {list-style-type: none; counter-reset: lvl1;}

ol > li                                         {counter-increment: lvl1;}

ol > li:before                                  {width: auto; height: auto; background: none; color: var(--color1b); font-weight: 600; left: -0.05em; top: 0; content: counter(lvl1)".";}

ol > li > ol                                    {counter-reset: lvl2;}

ol > li > ol > li                               {counter-increment: lvl2; padding-left: 2.4em;}

ol > li > ol > li:before                        {content: counter(lvl1)"."counter(lvl2)".";}



.cols2                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;}

.cols2 > *                                      {display: block; width: 48%; margin-top: 4em;}

.main-aside                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: var(--top-gap);}

.main-aside > *                                 {display: block;}

.main-aside > aside > *                         {margin-bottom: 1em;}

.main-aside > aside > *:last-child              {margin-bottom: 0;}

.main-aside > aside > div > h2                  {font-size: min(2.6em, calc(1.2em + 5vw)); color: var(--color1); font-weight: 700; margin: 0.3em 0 0.5em; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

  @media screen and (min-width: 960px)          {

  p.cols                                        {column-count: 2; column-gap: 5em;}

  .cols2 > *:nth-child(1),

  .cols2 > *:nth-child(2)                       {margin-top: 0;}

  .main-aside > *                               {width: 58%;}

  .main-aside > aside                           {width: 35%;}

  .main-aside > aside .news article > div p     {font-size: 1em;}

  .main-aside > aside .news article > div ul    {font-size: 0.85em;}

  }

  @media screen and (max-width: 960px)          {

  section .heading-filters h1                   {margin-right: 1em;}

  .cols2 > *                                    {width: 100%; margin-top: 2em;}

  .cols2 > *:nth-child(1)                       {margin-top: 0;}

  .main-aside > *                               {width: 100%; margin-bottom: 3em;}

  .main-aside > aside                           {width: 100%;}

  }



.winter .button.fb                              {background: var(--winter);}

.cerveny-hradek .button.fb                      {background: var(--cerveny-hradek);}

.plzensky .button.fb                            {background: var(--plzensky);}

.marianske-lazne .button.fb                     {background: var(--marianske-lazne);}

.chebsky .button.fb                             {background: var(--chebsky);}

.chotesovsky .button.fb                         {background: var(--chotesovsky);}

.kozel .button.fb                               {background: var(--kozel);}

.presticky .button.fb                           {background: var(--presticky);}

.rakovnicky .button.fb                          {background: var(--rakovnicky);}

.svatomartinske-slavnosti-podebrady .button.fb  {background: var(--svatomartinske-slavnosti-podebrady);}

.svatomartinsky-kost-plzen .button.fb           {background: var(--svatomartinsky-kost-plzen);}

.pisecky .button.fb                             {background: var(--pisecky);}

.podebradsky .button.fb                         {background: var(--podebradsky);}

.kdyne .button.fb                               {background: var(--kdyne);}

.strakonice .button.fb                          {background: var(--strakonice);}

.teplice .button.fb                             {background: var(--teplice);}

.ricansky .button.fb                            {background: var(--ricansky);}

.chomutovsky .button.fb                         {background: var(--chomutovsky);}

.domazlicky .button.fb                          {background: var(--domazlicky);}

.mostecky .button.fb                            {background: var(--mostecky);}

.stankovsky .button.fb                          {background: var(--stankovsky);}

.ostrovsky .button.fb                           {background: var(--ostrovsky);}

.frantiskovy-lazne .button.fb                   {background: var(--frantiskovy-lazne);}

.strakonice .button.fb                          {background: var(--strakonice);}

.tachovsky .button.fb                           {background: var(--tachovsky);}

.rokycansky .button.fb                          {background: var(--rokycansky);}

.stribrsky .button.fb                           {background: var(--stribrsky);}



.submenu                                          {display: block; width: 100%; margin-block: -0.2rem -0.5em;}

.submenu nav                                      {display: flex; flex-wrap: wrap; gap: 0.4em 0.5em; font-size: 1.7em;}

.submenu nav a                                    {font-size: 1em; font-weight: 600; color: var(--color0); border-top: solid 1px transparent; border-bottom: solid 1px var(--color1); box-sizing: border-box; font-family: var(--font2); transition: .15s ease-in-out;}

.submenu nav a:hover                              {color: var(--color1); border-color: transparent;}

  @media screen and (max-width: 580px)            {

  .submenu nav a                                  {font-size: 0.75em;}

  }



.nav-block                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; padding-top: 1.8rem;}

.nav-block > *:first-child                        {margin-top: 0 !important;}

.nav-block :is(h2)                                {margin-bottom: 0;}



.team                                             {display: block; width: 100%; overflow: hidden; --team-gap: 0.6rem; --team-photo: 4rem; --team-padding: 1.5rem;}

.team > div                                       {display: flex; flex-wrap: wrap; margin-bottom: calc(0px - var(--team-padding));}

.team > div > div                                 {display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; gap: var(--team-gap); box-sizing: border-box; padding-block: var(--team-padding); border-bottom: solid 1px rgba(0,0,0,0.2);}

.team .photo                                      {display: block; width: var(--team-photo); height: var(--team-photo); background: rgba(0,0,0,0.1); border-radius: 100%; overflow: hidden;}

.team .photo img                                  {display: block; width: 100%; height: 100%; object-fit: cover;}

.team :is(h3, .post, p)                           {width: 100%; text-align: center; margin: 0;}

.team h3                                          {font-size: min(1.15rem, calc(0.9rem + 2vw)); margin: 0;}

.team .post                                       {display: block; font-size: 0.8em; font-weight: 600; margin-top: -0.6rem;}

.team p                                           {font-size: 0.8em;}

  @media screen and (min-width: 581px)            {

  .team > div > div                               {width: 50%;}

  .team > div > div:nth-child(-n+2)               {padding-top: 0; border-top: none;}

  .team > div > div:nth-child(odd)                {padding-right: var(--team-padding); border-right: solid 1px rgba(0,0,0,0.2);}

  .team > div > div:nth-child(even)               {padding-left: var(--team-padding);}

  }

  @media screen and (max-width: 580px)            {

  .team > div > div                               {width: 100%;}

  .team > div > div:nth-child(1)                  {padding-top: 0; border-top: none;}

  }



.partners                                         {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem 1.6rem;}

.partners a                                       {display: block; width: auto; height: 2.5em; border: none;}

.partners a img                                   {display: block; width: auto; height: 100%;}



.pagination                                     {display: flex; width: 100%; justify-content: flex-end; align-items: center; gap: 0.2em; margin-top: 1em;}

.pagination a                                   {display: flex; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; font-size: 1.2em; font-weight: 600; color: var(--color0); position: relative; border-radius: 100%; padding-bottom: 0.075em; font-family: var(--font2); transition: .35s ease-in-out;}   

.pagination a:hover                             {color: var(--color1); background: var(--color1c);}

.pagination a.sel                               {color: white; background: var(--color1);}

.pagination a img                               {display: block; width: 0.4em; transition: .15s ease-in-out;}

.pagination a img:nth-child(2)                  {opacity: 0; position: absolute; left: 0; top: 0;}

.pagination a:hover img:nth-child(1)            {opacity: 0;}

.pagination a:hover img:nth-child(2)            {opacity: 1;}

  @media screen and (max-width: 960px)          {

  .pagination a                                 {font-size: 1.4em;}

  }



.article                                        {display: flex; width: 100%; flex-wrap: wrap; --article-gap: 1rem; gap: var(--article-gap); text-align: left; font-size: 1em; color: var(--color0); font-weight: 400;}

.article h1                                     {margin-block: 0.1em -0.05em;}

.article h1.small                               {font-size: min(4rem, calc(1.6rem + 5vw));}

.article strong                                 {font-weight: 700;}

.article em                                     {font-style: italic;}

.article :is(p a, li a, td a)                   {display: inline-block; font-weight: 600; color: var(--color0); box-sizing: border-box; transition: .15s ease-in-out;}

.article :is(p a, li a, td a):hover             {color: var(--color1); border-color: transparent;}

.article :is(h1, h2, h3)                        {display: block; width: 100%; text-align: left;}

.article :is(h2, h3)                            {font-weight: 700; margin: 0.2em 0 0; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.article h2                                     {font-size: min(3.3em, calc(1.8em + 5vw)); font-weight: 700;}

.article :is(h3, .title)                        {font-size: min(2.3em, calc(1.4em + 5vw)) !important; color: var(--color1); font-weight: 600;}

.article .title                                 {color: var(--color0);}

.article :is(h1 a, h2 a, h3 a)                  {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.article :is(h1 a, h2 a, h3 a):hover            {text-decoration-color: transparent; filter: brightness(0.85);}

.article :is(p + p, p + ul, p + ol)             {margin-top: calc(-0.5 * var(--article-gap));}

.article .date-tag                              {display: flex; width: 100%; font-size: 0.8em; align-items: center; flex-wrap: wrap; margin-bottom: 0.6em; padding: 0;}

.article .date-tag li                           {display: block; width: auto; font-size: 1em; color: #666666; font-weight: 400; padding: 0; margin: 0; position: relative;}

.article .date-tag li:before                    {display: none;}

.article .date-tag li:first-child               {padding-right: 0.6em; margin-right: 0.6em;}

.article .date-tag li:first-child:after         {display: block; width: 1px; height: 1em; background: black; opacity: 0.1; position: absolute; right: 0; top: 0.25em; content: "";}

.article .date-tag li a                         {font-weight: 700; text-decoration-color: inherit; border: none; padding: 0; border: none; transition: .15s ease-in-out;}

.article .date-tag li a:hover                   {color: var(--color0); text-decoration-color: transparent;}

.article .single-img                            {display: block; width: 100%;}

.article .single-img a                          {display: block; width: 100%; border-radius: var(--border-radius2); padding: 0; border: none; overflow: hidden; transition: .25s ease-in-out;}

.article .single-img a img                      {display: block; width: 100%;}

.article .single-img a[href]:hover              {opacity: 0.9;}

.article .single-img figcaption                 {display: block; width: 100%; font-size: 0.85em; opacity: 0.7; margin-top: 0.6em;}

.article .image-text                            {margin-block: 0.3rem;}

.article .image-text .text                      {gap: calc(0.7 * var(--article-gap)); font-size: 0.85em;}

.article .image-text .button                    {font-size: 1.1em; margin-top: 0.15em;}

.article .image-text.even .image                {margin-left: -8%;}

.article .image-text.odd .image                 {margin-right: -8%;}

.article .signature                             {font-size: 1.2em;}

.article .signature span                        {display: inline-block; padding-top: 1em; border-top: solid 1px rgba(0,0,0,0.3);}

.article .graybox                               {background: rgba(0,0,0,0.04); padding: 1.4em 1.7em; margin-bottom: 5px; box-sizing: border-box;}

.article .graybox > *:first-child               {margin-top: 0 !important;}

  @media screen and (min-width: 961px)          {

  .article :is(.cover, .highlight, .image-text) {width: calc(100% + var(--article-offset)); margin-left: calc(-1 * var(--article-offset));}

  }

  @media screen and (min-width: 641px) and (max-width: 960px){

  .article .image-text.even .image              {width: 33%; margin-left: 0;}

  .article .image-text.odd .image               {width: 33%; margin-right: 0;}

  }

  @media screen and (min-width: 641px)          {

  .article                                      {--article-offset: 1.8rem;}

  .article .image-text                          {justify-content: space-between; align-items: center;}

  .article .image-text .image                   {width: 37%;}

  .article .image-text .text                    {width: 57%; padding: var(--article-offset) 0 var(--article-offset) var(--article-offset); background-image: linear-gradient(to right, rgba(0,0,0,0.07), transparent);}

  .article .image-text.odd                      {flex-flow: row-reverse;}

  }

  @media screen and (max-width: 640px)          {

  .article .image-text .image                   {max-width: 18rem; position: relative; top: 1em;}

  .article .image-text .text                    {align-items: center; padding: 0 2.2em 2.2em; background-image: linear-gradient(to top, rgba(0,0,0,0.07), transparent);}

  .article .image-text .text > *                {max-width: 40rem; text-align: center;}

  }



.article .goals                                 {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; margin: 0; padding: 0;}

.article .goals li                              {width: 48%; font-size: 1em; line-height: 1.2em; font-weight: 500; padding-left: 2.6em; margin-bottom: 1em;}

.article .goals li::before                      {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; font-size: 0.8em; color: white; font-weight: 600; background: var(--color1); border-radius: 100%; left: 0; top: 0.3em;}

.article .goals li:nth-child(1)::before         {content: "1";}

.article .goals li:nth-child(2)::before         {content: "2";}

.article .goals li:nth-child(3)::before         {content: "3";}

.article .goals li:nth-child(4)::before         {content: "4";}

.article .goals li:nth-child(5)::before         {content: "5";}

  @media screen and (max-width: 540px)          {

  .article .goals li                            {width: 100%; max-width: 20em;}

  }



.gallery                                        {display: block; width: 100%; position: relative;}

.gallery .swiper-container                      {display: block; width: 100%; overflow: hidden;}

.gallery .swiper-slide                          {display: block; height: auto; border-radius: var(--border-radius2); overflow: hidden; background: white; position: relative; flex-shrink: 0;}

.gallery .swiper-slide a                        {display: flex; width: 100%; aspect-ratio: 4/3; padding: 0; border: none;}     

.gallery .swiper-slide a img                    {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;}     

.gallery .swiper-slide:hover a img              {opacity: 0.85;}

.gallery .swiper-button-prev,

.gallery .swiper-button-next                    {--swiper-button: 2em; outline: solid 0.3em white;} 

.gallery .swiper-button-prev                    {left: calc(-0.5 * var(--swiper-button));}

.gallery .swiper-button-next                    {right: calc(-0.5 * var(--swiper-button));}



.article.from2025 .embed                                       {display: block; width: 100%; border-radius: var(--border-radius2); overflow: hidden;}

.article.from2025 .embed iframe                                {display: block; width: 100%;}

.article.from2025 .highlight                                   {display: flex; width: 100%; flex-wrap: wrap; gap: calc(0.7 * var(--article-gap)); --highlight-left: 2.65rem; padding: 1.3rem 0 1.3rem var(--highlight-left); border-top: solid 0.18em var(--color1b); border-bottom: solid 0.18em var(--color1b); box-sizing: border-box; margin-block: 0.7rem; position: relative;}

.article.from2025 .highlight :is(h2, h3)                       {color: var(--color0);}

.article.from2025 .highlight :is(h2, h3):first-child           {margin-top: -0.025em;}

.article.from2025 .highlight :is(h2, h3, p):first-child::before{display: block; width: 0.8em; height: 0.8em; background: var(--color1b); margin-top: 0.08em; box-sizing: border-box; position: absolute; left: 0; border-radius: 100%; content: "";}

.article.from2025 .highlight:has(p:first-child:last-child)     {padding-left: 0;}

.article.from2025 .highlight p:first-child:last-child          {font-size: 1.1em; color: var(--color1b); font-weight: 600;}

.article.from2025 .highlight p:first-child:last-child:before   {display: none;}

.article.from2025 .highlight .button                           {font-size: 1.05em; margin-top: 0.15em;}

.article.from2025 .highlight .button:last-child                {margin-bottom: 0.15rem;}

.article.from2025 .table                                       {display: block; width: 100%; background: rgba(0,0,0,0.05); border: solid 0.1em rgba(0,0,0,0.15); border-radius: var(--border-radius2); box-sizing: border-box; overflow-x: auto;}

.article.from2025 .table table                                 {min-width: 100%; padding: 1.2em; box-sizing: border-box; font-size: 0.9em;}

.article.from2025 .table table td                              {padding: 0.5em; line-height: 1.3;}

.article.from2025 .table table tr:not(:last-child) td          {border-bottom: solid 0.09em rgba(0,0,0,0.2);} 



.article.to2025 .img                                           {display: block; width: 100%; border-radius: 0.3em; padding: 0; border: none; overflow: hidden;}

.article.to2025 .img img                                       {display: block; width: 100%; transition: .25s ease-in-out;}

.article.to2025 .img[href]:hover img                           {opacity: 0.9; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}

.article.to2025 > iframe                                       {display: block; width: 100%; margin: 1em 0;}

.article.to2025 .embeded                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.05); padding: 1em; box-sizing: border-box; margin: 1em 0;}

.article.to2025 table                                          {width: 100%; background: rgba(0,0,0,0.05); padding: 2em; box-sizing: border-box; margin: 1.1em 0;}



.winter .date-tag li a                                {color: var(--winter);}

.marianske-lazne .date-tag li a                       {color: var(--marianske-lazne);}

.chebsky .date-tag li a                               {color: var(--chebsky);}

.karlovarsky .date-tag li a                           {color: var(--karlovarsky);}

.plzensky .date-tag li a                              {color: var(--plzensky);}

.chotesovsky .date-tag li a                           {color: var(--chotesovsky);}

.kozel .date-tag li a                                 {color: var(--kozel);}

.presticky .date-tag li a                             {color: var(--presticky);}

.rakovnicky .date-tag li a                            {color: var(--rakovnicky);}

.svatomartinsky-kost-plzen .date-tag li a             {color: var(--svatomartinsky-kost-plzen);}

.svatomartinske-slavnosti-podebrady .date-tag li a    {color: var(--svatomartinske-slavnosti-podebrady);}

.pisecky .date-tag li a                               {color: var(--pisecky);}

.podebradsky .date-tag li a                           {color: var(--podebradsky);}

.cerveny-hradek .date-tag li a                        {color: var(--cerveny-hradek);}

.kdyne .date-tag li a                                 {color: var(--kdyne);}

.strakonice .date-tag li a                            {color: var(--strakonice);}

.teplice .date-tag li a                               {color: var(--teplice);}

.ricansky .date-tag li a                              {color: var(--ricansky);}

.chomutovsky .date-tag li a                           {color: var(--chomutovsky);}

.domazlicky .date-tag li a                            {color: var(--domazlicky);}

.mostecky .date-tag li a                              {color: var(--mostecky);}

.stankovsky .date-tag li a                            {color: var(--stankovsky);}

.ostrovsky .date-tag li a                             {color: var(--ostrovsky);}

.frantiskovy-lazne .date-tag li a                     {color: var(--frantiskovy-lazne);}

.stribrsky .date-tag li a                             {color: var(--stribrsky);}

.rokycansky .date-tag li a                            {color: var(--rokycansky);}

.tachovsky .date-tag li a                             {color: var(--tachovsky);}



.margin-top                                     {margin-top: 4em;}

.padding-top-0                                  {padding-top: 0;}

.padding-bottom-0                               {padding-bottom: 0;}



.link-arrow                                     {display: inline-block !important; width: auto !important; font-size: 1em; line-height: 1em; color: #b8b8b8; text-transform: uppercase; font-weight: 300; padding-right: 1.1em; position: relative; transition: .35s ease-in-out;}

.link-arrow:before,

.link-arrow:after                               {display: block; width: 0.75em; height: 0.75em; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; position: absolute; right: 0; top: 0.1em; content: ""; transition: .35s ease-in-out;}  

.link-arrow:before                              {background-image: URL('images/arrow-gray-right.png');}  

.link-arrow:after                               {background-image: URL('images/arrow-orange.png'); opacity: 0;}  

.link-arrow:hover                               {color: #F27900 !important;}  

.link-arrow:hover:before                        {opacity: 0;}  

.link-arrow:hover:after                         {opacity: 1;}  

.link-arrow.black                               {color: var(--color0);}

.link-arrow.black:before                        {background-image: URL('images/arrow-black.png');}  



.top                                                        {position: relative; box-sizing: border-box; overflow: hidden; z-index: 2;}

.top .video                                                 {display: none; justify-content: center; position: absolute; inset: 0; z-index: -1; overflow: hidden;

                                                            }

.top .video video                                           {display: block; width: 80em; height: calc(80 * 9/16);

                                                             -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-type: luminance; -webkit-mask-type: luminance;

                                                             mask-image: linear-gradient(to left, transparent 5%, black);                                           

                                                             -webkit-mask-image: linear-gradient(to left, transparent 5%, black);

                                                            }

.top h1                                                     {width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; position: absolute;}

.top .slider                                                {display: block; width: 100%; padding-bottom: min(1.5rem, 8vw);}

.top .slider .swiper-slide                                  {display: block; width: 100%; box-sizing: border-box; padding-block: 7em 4em; overflow: hidden; flex-shrink: 0; opacity: 0 !important; pointer-events: none; transition: .35s ease-in-out;}

.top .slider .swiper-slide-active                           {opacity: 1 !important; pointer-events: all;}

.top .slider .swiper-slide .wrapper                         {height: 100%; height: 100%; align-items: center; gap: 2em 0;}

.top :is(.info, .image)                                     {transform: scale(0.75); transition: .75s ease-in-out;}

.top .swiper-slide-active :is(.info, .image)                {transform: scale(1);}



.top .info                                                  {display: flex; width: 100%; flex-direction: column; align-items: center;}

.top .info h2                                               {display: block; color: var(--color1); margin: 0; line-height: 0.9;}

.top .info h2 span                                          {display: block; font-weight: 700;}

.top .info p                                                {display: flex; width: auto; height: 2.2em; align-items: center; gap: 0.3em; font-size: 0.7em; color: var(--color0); background: var(--color1c); font-weight: 600; text-transform: uppercase; padding: 0.15em 1em 0; box-sizing: border-box; border-radius: 1.1em; order: -1; margin-bottom: 0.8em;}

.top .info ul                                               {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.4em 0; margin-top: 1.2em; padding: 0; position: relative; left: 0.1em;}

.top .info ul li                                            {display: block; width: auto; font-size: 1.5em; font-weight: 600; color: var(--color0); margin: 0; padding: 0; position: relative; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.top .info ul li:not(:first-child)                          {margin-left: 0.8em;}

.top .info ul li:not(:first-child):before                   {display: block; width: 0.06em; height: 0.8em; background: var(--color1); position: absolute; top: 0.05em; left: -0.45em; content: "";}

.top .info ul li:before                                     {display: none;}

.top .info .button                                          {margin-top: 1.2em;}

.top .image                                                 {display: flex; width: 100%; justify-content: center; container-type: inline-size;}

.top .image .inner                                          {display: block; width: 94%; max-width: 26em; aspect-ratio: 1; position: relative;}

.top .image a                                               {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden; position: relative;}

.top .image a img                                           {display: block; width: 100%; height: 100%; object-fit: cover;}

.top .image .logo                                           {display: block; width: 30cqw; height: 30cqw; background: white; border-radius: 100%; padding: 2%; box-sizing: border-box; position: absolute;box-shadow: 0 0 0.6em rgba(0,0,0,0.15);}

.top .image .logo img                                       {display: block; width: 100%; height: 100%; object-fit: cover; overflow: hidden; }

.top .image :is(.inner, .logo):after,

.top .image :is(.inner, .logo):before                       {display: block; aspect-ratio: 1; position: absolute; border-radius: 100%; content: "";}                

.top .image .inner:after                                    {width: 200%; border-style: solid; border-width: 4em; opacity: 0.12; position: absolute; left: -40%; bottom: 40%; z-index: -1;}

.top .image .inner:before                                   {width: 50%; opacity: 0.8; position: absolute; left: -1%; top: O; z-index: -1;}

.top .image .logo:after                                     {width: 40%; right: -150%; bottom: 30%; z-index: 2;}

.top .image .logo:before                                    {width: 15%; z-index: 2;}

.top .slider-pagination                                     {display: block;}

.top .slider-pagination .wrapper                            {align-items: center;}

.top .swiper-pagination                                     {display: flex; align-items: center; gap: 0.2em; position: relative; z-index: 5;}

.top .slider .swiper-pagination-bullet                      {display: block; width: 1.6em; height: 1.6em; font-size: 1.1em; font-weight: 600; cursor: pointer; opacity: 1; background: var(--color0b);}

.top .slider .swiper-pagination-bullet::after               {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; color: var(--color0); border-radius: 100%; font-family: var(--font2); transition: .15s ease-in-out;}

.top .slider .swiper-pagination-bullet:nth-child(1):after   {content: "1";}

.top .slider .swiper-pagination-bullet:nth-child(2):after   {content: "2";}

.top .slider .swiper-pagination-bullet:nth-child(3):after   {content: "3";}

.top .slider .swiper-pagination-bullet:nth-child(4):after   {content: "4";}

.top .slider .swiper-pagination-bullet:nth-child(5):after   {content: "5";}

.top .slider .swiper-pagination-bullet:hover:after          {color: var(--color1b); background: var(--color1c);}

.top .slider .swiper-pagination-bullet-active:after         {color: white !important; background: var(--color1) !important;}

  @media screen and (min-width: 1081px) and (min-height: 769px){

  .top .slider                                              {height: 90vh; max-height: 44rem;}

  }

  @media screen and (min-width: 1081px)                     {

  .top .video                                               {display: flex;}

  .top .slider .swiper-slide .wrapper                       {justify-content: space-between;}

  .top .info                                                {width: 50%; align-items: flex-start;}

  .top .info h2                                             {font-size: min(6em, calc(1.5em + 6vw));}

  .top .image                                               {width: 50%;}

  .top .image .logo                                         {left: -5%; bottom: -5%;}

  .top .image .logo:before                                  {left: -14%; top: -10%;}

  .top .slider-pagination                                   {position: absolute; inset: 0;}

  .top .slider-pagination .wrapper                          {height: 100%; justify-content: flex-end;}

  .top .swiper-pagination                                   {flex-direction: column; width: auto;}

  }

  @media screen and (max-width: 1080px)                     {

  .top .image                                               {order: -1;}

  .top .info h2                                             {text-align: center; font-size: min(5em, calc(2em + 7vw));}

  .top .info ul                                             {justify-content: center;}

  .top .image .logo                                         {left: 0; bottom: 0;}

  .top .image .logo:before                                  {left: -5%; top: -30%;}

  .top .slider-pagination                                   {margin-bottom: 3em;}

  }  

  @media screen and (max-width: 640px)                      {

  .top .video video                                         {left: calc(50% - 800px);}

  .top .info ul li                                          {text-align: center; font-size: 1.7em;}

  .top .info ul li:last-child                               {width: 100%; margin: 0; font-size: 1.3em;}

  .top .info ul li:last-child:before                        {display: none;}

  }

  @media screen and (max-width: 440px)                      {

  .top .video video                                         {left: calc(50% - 1000px);}

  }



.top .winter .info p                                        {color: white; background: var(--winter); padding-left: 0.6em;}

.top .winter .info p:before                                 {display: block; width: 1.25em; height: 1.25em; position: relative; top: -0.1em; background: url("images/snowflake.svg") no-repeat center center; background-size: 100%; content: "";}

.top .winter .image :is(.inner, .logo):after,

.top .winter .image :is(.inner, .logo):before               {background-image: url("images/snowflake.svg"); background-repeat: no-repeat; background-position: center center; background-size: 70%;}                

.top .winter .image .inner:before                           {background-size: 82%;}



.top .slider .empty .image .logo                            {padding: 10%;}

.top .slider .empty .image .logo img                        {object-fit: contain;}



.top .slider .empty h2 span                                 {color: var(--color1b);}

.top .slider .empty .image .inner:after                     {border-color: var(--color1b);}

.top .slider .empty .image .inner:before,

.top .slider .empty .image .logo:after,

.top .slider .empty .image .logo:before                     {background-color: var(--color1b);}



.top .slider .marianske-lazne h2 span                       {color: var(--marianske-lazne);}

.top .slider .marianske-lazne .image .inner:after           {border-color: var(--marianske-lazne);}

.top .slider .marianske-lazne .image .inner:before,

.top .slider .marianske-lazne .image .logo:after,

.top .slider .marianske-lazne .image .logo:before           {background-color: var(--marianske-lazne);}



.top .slider .chebsky h2 span                               {color: var(--chebsky);}

.top .slider .chebsky .image .inner:after                   {border-color: var(--chebsky);}

.top .slider .chebsky .image .inner:before,

.top .slider .chebsky .image .logo:after,

.top .slider .chebsky .image .logo:before                   {background-color: var(--chebsky);}



.top .slider .karlovarsky h2 span                           {color: var(--karlovarsky);}

.top .slider .karlovarsky .image .inner:after               {border-color: var(--karlovarsky);}

.top .slider .karlovarsky .image .inner:before,

.top .slider .karlovarsky .image .logo:after,

.top .slider .karlovarsky .image .logo:before               {background-color: var(--karlovarsky);}



.top .slider .plzensky h2 span                              {color: var(--plzensky);}

.top .slider .plzensky .image .inner:after                  {border-color: var(--plzensky);}

.top .slider .plzensky .image .inner:before,

.top .slider .plzensky .image .logo:after,

.top .slider .plzensky .image .logo:before                  {background-color: var(--plzensky);}



.top .slider .chotesovsky h2 span                           {color: var(--chotesovsky);}

.top .slider .chotesovsky .image .inner:after               {border-color: var(--chotesovsky);}

.top .slider .chotesovsky .image .inner:before,

.top .slider .chotesovsky .image .logo:after,

.top .slider .chotesovsky .image .logo:before               {background-color: var(--chotesovsky);}



.top .slider .kozel h2 span                                 {color: var(--kozel);}

.top .slider .kozel .image .inner:after                     {border-color: var(--kozel);}

.top .slider .kozel .image .inner:before,

.top .slider .kozel .image .logo:after,

.top .slider .kozel .image .logo:before                     {background-color: var(--kozel);}



.top .slider .presticky h2 span                             {color: var(--presticky);}

.top .slider .presticky .image .inner:after                 {border-color: var(--presticky);}

.top .slider .presticky .image .inner:before,

.top .slider .presticky .image .logo:after,

.top .slider .presticky .image .logo:before                 {background-color: var(--presticky);}



.top .slider .rakovnicky h2 span                            {color: var(--rakovnicky);}

.top .slider .rakovnicky .image .inner:after                {border-color: var(--rakovnicky);}

.top .slider .rakovnicky .image .inner:before,

.top .slider .rakovnicky .image .logo:after,

.top .slider .rakovnicky .image .logo:before                {background-color: var(--rakovnicky);}



.top .slider .svatomartinsky-kost-plzen h2 span             {color: var(--svatomartinsky-kost-plzen);}

.top .slider .svatomartinsky-kost-plzen .image .inner:after {border-color: var(--svatomartinsky-kost-plzen);}

.top .slider .svatomartinsky-kost-plzen .image .inner:before,

.top .slider .svatomartinsky-kost-plzen .image .logo:after,

.top .slider .svatomartinsky-kost-plzen .image .logo:before {background-color: var(--svatomartinsky-kost-plzen);}



.top .slider .svatomartinske-slavnosti-podebrady h2 span    {color: var(--svatomartinske-slavnosti-podebrady);}

.top .slider .svatomartinske-slavnosti-podebrady .image .inner:after {border-color: var(--svatomartinske-slavnosti-podebrady);}

.top .slider .svatomartinske-slavnosti-podebrady .image .inner:before,

.top .slider .svatomartinske-slavnosti-podebrady .image .logo:after,

.top .slider .svatomartinske-slavnosti-podebrady .image .logo:before {background-color: var(--svatomartinske-slavnosti-podebrady);}



.top .slider .pisecky h2 span                               {color: var(--pisecky);}

.top .slider .pisecky .image .inner:after                   {border-color: var(--pisecky);}

.top .slider .pisecky .image .inner:before,

.top .slider .pisecky .image .logo:after,

.top .slider .pisecky .image .logo:before                   {background-color: var(--pisecky);}



.top .slider .podebradsky h2 span                           {color: var(--podebradsky);}

.top .slider .podebradsky .image .inner:after               {border-color: var(--podebradsky);}

.top .slider .podebradsky .image .inner:before,

.top .slider .podebradsky .image .logo:after,

.top .slider .podebradsky .image .logo:before               {background-color: var(--podebradsky);}



.top .slider .cerveny-hradek h2 span                        {color: var(--cerveny-hradek);}

.top .slider .cerveny-hradek .image .inner:after            {border-color: var(--cerveny-hradek);}

.top .slider .cerveny-hradek .image .inner:before,

.top .slider .cerveny-hradek .image .logo:after,

.top .slider .cerveny-hradek .image .logo:before            {background-color: var(--cerveny-hradek);}



.top .slider .kdyne h2 span                                 {color: var(--kdyne);}

.top .slider .kdyne .image .inner:after                     {border-color: var(--kdyne);}

.top .slider .kdyne .image .inner:before,

.top .slider .kdyne .image .logo:after,

.top .slider .kdyne .image .logo:before                     {background-color: var(--kdyne);}



.top .slider .strakonice h2 span                            {color: var(--strakonice);}

.top .slider .strakonice .image .inner:after                {border-color: var(--strakonice);}

.top .slider .strakonice .image .inner:before,

.top .slider .strakonice .image .logo:after,

.top .slider .strakonice .image .logo:before                {background-color: var(--strakonice);}



.top .slider .teplice h2 span                               {color: var(--teplice);}

.top .slider .teplice .image .inner:after                   {border-color: var(--teplice);}

.top .slider .teplice .image .inner:before,

.top .slider .teplice .image .logo:after,

.top .slider .teplice .image .logo:before                   {background-color: var(--teplice);}



.top .slider .ricansky h2 span                              {color: var(--ricansky);}

.top .slider .ricansky .image .inner:after                  {border-color: var(--ricansky);}

.top .slider .ricansky .image .inner:before,

.top .slider .ricansky .image .logo:after,

.top .slider .ricansky .image .logo:before                  {background-color: var(--ricansky);}



.top .slider .chomutovsky h2 span                           {color: var(--chomutovsky);}

.top .slider .chomutovsky .image .inner:after               {border-color: var(--chomutovsky);}

.top .slider .chomutovsky .image .inner:before,

.top .slider .chomutovsky .image .logo:after,

.top .slider .chomutovsky .image .logo:before               {background-color: var(--chomutovsky);}



.top .slider .domazlicky h2 span                            {color: var(--domazlicky);}

.top .slider .domazlicky .image .inner:after                {border-color: var(--domazlicky);}

.top .slider .domazlicky .image .inner:before,

.top .slider .domazlicky .image .logo:after,

.top .slider .domazlicky .image .logo:before                {background-color: var(--domazlicky);}



.top .slider .mostecky h2 span                              {color: var(--mostecky);}

.top .slider .mostecky .image .inner:after                  {border-color: var(--mostecky);}

.top .slider .mostecky .image .inner:before,

.top .slider .mostecky .image .logo:after,

.top .slider .mostecky .image .logo:before                  {background-color: var(--mostecky);}



.top .slider .stankovsky h2 span                            {color: var(--stankovsky);}

.top .slider .stankovsky .image .inner:after                {border-color: var(--stankovsky);}

.top .slider .stankovsky .image .inner:before,

.top .slider .stankovsky .image .logo:after,

.top .slider .stankovsky .image .logo:before                {background-color: var(--stankovsky);}



.top .slider .ostrovsky h2 span                             {color: var(--ostrovsky);}

.top .slider .ostrovsky .image .inner:after                 {border-color: var(--ostrovsky);}

.top .slider .ostrovsky .image .inner:before,

.top .slider .ostrovsky .image .logo:after,

.top .slider .ostrovsky .image .logo:before                 {background-color: var(--ostrovsky);}



.top .slider .frantiskovy-lazne h2 span                     {color: var(--frantiskovy-lazne);}

.top .slider .frantiskovy-lazne .image .inner:after         {border-color: var(--frantiskovy-lazne);}

.top .slider .frantiskovy-lazne .image .inner:before,

.top .slider .frantiskovy-lazne .image .logo:after,

.top .slider .frantiskovy-lazne .image .logo:before         {background-color: var(--frantiskovy-lazne);}



.top .slider .stribrsky h2 span                             {color: var(--stribrsky);}

.top .slider .stribrsky .image .inner:after                 {border-color: var(--stribrsky);}

.top .slider .stribrsky .image .inner:before,

.top .slider .stribrsky .image .logo:after,

.top .slider .stribrsky .image .logo:before                 {background-color: var(--stribrsky);}



.top .slider .rokycansky h2 span                            {color: var(--rokycansky);}

.top .slider .rokycansky .image .inner:after                {border-color: var(--rokycansky);}

.top .slider .rokycansky .image .inner:before,

.top .slider .rokycansky .image .logo:after,

.top .slider .rokycansky .image .logo:before                {background-color: var(--rokycansky);}



.top .slider .tachovsky h2 span                             {color: var(--tachovsky);}

.top .slider .tachovsky .image .inner:after                 {border-color: var(--tachovsky);}

.top .slider .tachovsky .image .inner:before,

.top .slider .tachovsky .image .logo:after,

.top .slider .tachovsky .image .logo:before                 {background-color: var(--tachovsky);}



.preview                                                    {display: flex; width: 100%; justify-content: center; padding: var(--preview-padding); box-sizing: border-box; position: relative; container-type: inline-size;}

.preview .box                                               {display: block; width: 100%; aspect-ratio: 10/16; border-radius: var(--border-radius2); position: relative; margin-bottom: 15cqw; box-sizing: border-box; transition: .25s ease-in-out;}

.preview .box:before                                        {display: block; background: hsl(0, 0%, 90%); border-radius: var(--border-radius2); position: absolute; inset: 0; content: "";}

.preview .box:after                                         {display: block; width: 5cqw; height: 10cqw; border-radius: 0 5cqw 5cqw 0; position: absolute; left: 0; top: 40cqw; z-index: 2; content: ""; transform: scale(1, 4.5); filter: brightness(2); opacity: 0.2;}

.preview .inner                                             {display: flex; width: 100%; height: 100%; flex-direction: column; align-items: flex-start; gap: 0.6em; padding: 12cqw; border-radius: var(--border-radius2); overflow: hidden; position: relative; box-sizing: border-box;}

.preview .inner:before,                                      

.preview .inner:after                                       {display: block; aspect-ratio: 1; border-radius: 0 0 0 30vw; position: absolute; content: "";} 

.preview .inner:before                                      {width: 26cqw; border-radius: 0 0 0 30vw; border-style: solid; border-width: 6cqw; right: -10cqw; top: -10cqw; z-index: 2; opacity: 0.2;}

.preview .inner:after                                       {width: 60cqw; border-radius: 100%; left: -32cqw; bottom: -25cqw; z-index: 2;}

.preview.winter .inner:after,

.preview.winter .img:before                                 {background-image: url("images/snowflake.svg"); background-repeat: no-repeat; background-position: center center; background-size: 60% auto;}

.preview h2                                                 {display: block; width: 100%; font-size: 14.6cqw; color: var(--color0); font-weight: 600; margin: 0; position: relative; z-index: 2; font-family: var(--font2); line-height: var(--font2-line-height); letter-spacing: var(--font2-spacing);}

.preview ul                                                 {display: flex; width: 100%; margin: 0; padding: 0; position: relative; z-index: 2;}

.preview ul li                                              {display: block; width: auto; font-size: 8.5cqw; color: var(--color0); font-weight: 600; line-height: 0.9em; padding: 0; margin: 0; font-family: var(--font2);}

.preview ul li:first-child                                  {margin-right: 0.8em;}

.preview ul li:first-child:after                            {display: block; width: 0.08em; height: 0.9em; position: absolute; right: -0.45em; top: -0.015em; content: "";}

.preview ul li:before                                       {display: none;}

.preview .tag                                               {display: block; font-size: 4cqw; color: white; font-weight: 600; padding: 0.55em 0.75em; border-radius: 1em; margin-top: 0.2em; box-sizing: border-box; position: relative; z-index: 2;}

.preview .img                                               {display: block; width: 98cqw; height: 98cqw;  position: absolute; right: 0; bottom: 0; z-index: 1;}

.preview .img span                                          {display: block; position: absolute; inset: 0; border-radius: 98cqw 0 0 0; overflow: hidden;}

.preview .img span img                                      {display: block; width: 100%; height: 100%; object-fit: cover;}

.preview .img:before                                        {display: block; width: 11cqw; height: 11cqw; border-radius: 100%; position: absolute; right: 10cqw; top: -3cqw; z-index: 2; content: ""}

/* .preview .img:after                                         {display: block; width: 40cqw; height: 70cqw; background: url("images/glass1-piktogram.webp") no-repeat center top; background-size: contain; position: absolute; left: -17.5cqw; bottom: 0; z-index: 2; content: ""} */

.preview p                                                  {display: block; width: 40cqw; height: 40cqw; padding: 3cqw; background: white; border-radius: 100%; overflow: hidden; box-sizing: border-box; position: absolute; left: 11cqw; bottom: -15cqw; z-index: 3; transition: .25s ease-in-out;}

.preview p img                                              {display: block; width: 100%; height: 100%; position: relative; transition: .25s ease-in-out;}

.preview p span                                             {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; font-size: 1.1em; color: white; font-weight: 400; line-height: 1.2em; padding: 0 3cqw 0.1em; border-radius: 100%; border: solid 3cqw white; box-sizing: border-box; position: absolute; left: 0; top: 0; opacity: 0; font-family: var(--font2); line-height: var(--font2-line-height); letter-spacing: var(--font2-spacing); transform: scale(0,0); transition: .25s ease-in-out;}

.preview .box > a                                           {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4;}

.preview:hover .box                                         {filter: brightness(1.06); transform: scale(1.04); box-shadow: 0 0 0.5em rgba(0,0,0,0.15);}

.preview:hover p img                                        {opacity: 0; transform: scale(0,0);} 

.preview:hover p span                                       {opacity: 1; transform: scale(1,1);} 

  @media screen and (min-width: 541px)                      {

  .preview.wide                                             {padding: 0;}

  .preview.wide .box                                        {aspect-ratio: 21/7; margin: 0;}

  .preview.wide .box:after                                  {display: none;}

  .preview.wide .inner                                      {justify-content: center; padding: 6cqw;}

  .preview.wide .inner:before                               {right: 21cqw; z-index: 0;}

  .preview.wide .inner:after                                {display: none;}

  .preview.wide h2                                          {width: 45cqw; font-size: 8cqw;}

  .preview.wide ul li                                       {font-size: 4cqw;}

  .preview.wide .tag                                        {font-size: 2cqw;}

  .preview.wide .img                                        {width: 50cqw; height: 50cqw; bottom: calc(50% - 25cqw);}

  .preview.wide .img span                                   {border-radius: 50cqw 0 0 0;}

  .preview.wide .img:before                                 {width: 6cqw; height: 6cqw; right: 32cqw; top: 11.3cqw;}

  .preview.wide p                                           {width: 16cqw; height: 16cqw; padding: 1.5cqw; left: auto; right: -5cqw; bottom: calc(50% - 8cqw);}

  .preview.wide p span                                      {border-width: 1.5cqw;}

  }



.swiper-button-prev,

.swiper-button-next                                         {display: block; --swiper-button: 2.5em; width: var(--swiper-button); height: var(--swiper-button); position: absolute; top: calc(50% - 0.5 * var(--swiper-button)); z-index: 4; margin: 0; background: url("images/arrow-white.svg") no-repeat center center, var(--color1); background-size: 25% auto; border-radius: 100%; transition: .15s ease-in-out;}                                  

.swiper-button-prev                                         {left: 1em; transform: rotate(180deg);}

.swiper-button-next                                         {right: 1em;}

.swiper-button-prev:after,

.swiper-button-next:after                                   {display: none;}

.swiper-button-prev:hover,                  

.swiper-button-next:hover                                   {background-color: var(--color1b); cursor: pointer;}

.swiper-button-disabled,

.swiper-button-lock                                         {display: none;}





.carousel                                                   {display: block; width: 100%; position: relative; top: -1.5em; z-index: 5; margin: 0 auto 2em;}

.carousel .anchor                                           {display: block; width: 1px; height: 1px; position: absolute; left: -9999px; top: -6em;}

.carousel > a                                               {display: block; width: 8em; position: absolute; right: 1em; top: -9em; z-index: 5;}

.carousel > a img                                           {display: block; width: 100%; transition: .15s ease-in-out;}

.carousel > a img:nth-child(2)                              {opacity: 0; position: absolute; left: 0; top: 0;}

.carousel > a:hover img:nth-child(1)                        {opacity: 0;}

.carousel > a:hover img:nth-child(2)                        {opacity: 1;}

.carousel .slider2                                          {display: block; width: 100%; box-sizing: border-box;

                                                             -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-type: luminance; -webkit-mask-type: luminance;

                                                             mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);                                           

                                                             -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);

                                                            }

.carousel .slider2 .swiper-slide                            {width: auto; flex-shrink: 0;}

  @media screen and (min-width: 1701px)                     {

  .carousel                                                 {max-width: 92em; border-radius: var(--border-radius2); overflow: hidden;}

  .carousel .slider2:before,

  .carousel .slider2:after                                  {display: none;}

  }

  @media screen and (max-width: 1700px)                     {

  .carousel .slider2                                        {padding-inline: 7%;}

  }

  @media screen and (min-width: 541px) and (max-width: 1080px){

  .carousel .slider2                                        {padding-inline: 15%;}

  }

  @media screen and (max-width: 540px)                      {

  .carousel .slider2                                        {padding: 0 15%;}

  } 



.festivals                                                  {display: flex; width: calc(100% + 2 * var(--preview-padding)); flex-wrap: wrap; margin: calc(-1 * var(--preview-padding));}

  @media screen and (min-width: 960px)                      {

  .festivals .preview                                       {width: calc(100% / 3);}

  }

  @media screen and (min-width: 541px) and (max-width: 960px){

  .festivals .preview                                       {width: 50%;}

  }



.preview.winter ul li:after,

.preview.winter p span,

.preview.winter .box:after,

.preview.winter .inner:after,

.preview.winter .img:before,

.preview.winter .tag                              {background-color: var(--winter);}

.preview.winter .inner:before                     {border-color: var(--winter);}



.preview.marianske-lazne ul li:after,

.preview.marianske-lazne p span,

.preview.marianske-lazne .box:after,

.preview.marianske-lazne .inner:after,

.preview.marianske-lazne .img:before,

.preview.marianske-lazne .tag                     {background-color: var(--marianske-lazne);}

.preview.marianske-lazne .inner:before            {border-color: var(--marianske-lazne);}



.preview.chebsky ul li:after,

.preview.chebsky p span,

.preview.chebsky .box:after,

.preview.chebsky .inner:after,

.preview.chebsky .img:before,

.preview.chebsky .tag                             {background-color: var(--chebsky);}

.preview.chebsky .inner:before                    {border-color: var(--chebsky);}



.preview.plzensky ul li:after,

.preview.plzensky p span,

.preview.plzensky .box:after,

.preview.plzensky .inner:after,

.preview.plzensky .img:before,

.preview.plzensky .tag                            {background-color: var(--plzensky);}

.preview.plzensky .inner:before                   {border-color: var(--plzensky);}



.preview.chotesovsky ul li:after,

.preview.chotesovsky p span,

.preview.chotesovsky .box:after,

.preview.chotesovsky .inner:after,

.preview.chotesovsky .img:before,

.preview.chotesovsky .tag                         {background-color: var(--chotesovsky);}

.preview.chotesovsky .inner:before                {border-color: var(--chotesovsky);}



.preview.presticky ul li:after,

.preview.presticky p span,

.preview.presticky .box:after,

.preview.presticky .inner:after,

.preview.presticky .img:before,

.preview.presticky .tag                           {background-color: var(--presticky);}

.preview.presticky .inner:before                  {border-color: var(--presticky);}



.preview.rakovnicky ul li:after,

.preview.rakovnicky p span,

.preview.rakovnicky .box:after,

.preview.rakovnicky .inner:after,

.preview.rakovnicky .img:before,

.preview.rakovnicky .tag                          {background-color: var(--rakovnicky);}

.preview.rakovnicky .inner:before                 {border-color: var(--rakovnicky);}



.preview.svatomartinsky-kost-plzen ul li:after,

.preview.svatomartinsky-kost-plzen p span,

.preview.svatomartinsky-kost-plzen .box:after,

.preview.svatomartinsky-kost-plzen .inner:after,

.preview.svatomartinsky-kost-plzen .img:before,

.preview.svatomartinsky-kost-plzen .tag           {background-color: var(--svatomartinsky-kost-plzen);}

.preview.svatomartinsky-kost-plzen .inner:before  {border-color: var(--svatomartinsky-kost-plzen);}



.preview.svatomartinske-slavnosti-podebrady ul li:after,

.preview.svatomartinske-slavnosti-podebrady p span,

.preview.svatomartinske-slavnosti-podebrady .box:after,

.preview.svatomartinske-slavnosti-podebrady .inner:after,

.preview.svatomartinske-slavnosti-podebrady .img:before,

.preview.svatomartinske-slavnosti-podebrady .tag  {background-color: var(--svatomartinske-slavnosti-podebrady);}

.preview.svatomartinske-slavnosti-podebrady .inner:before

                                                  {border-color: var(--svatomartinske-slavnosti-podebrady);}



.preview.pisecky ul li:after,

.preview.pisecky p span,

.preview.pisecky .box:after,

.preview.pisecky .inner:after,

.preview.pisecky .img:before,

.preview.pisecky .tag                             {background-color: var(--pisecky);}

.preview.pisecky .inner:before                    {border-color: var(--pisecky);}



.preview.podebradsky ul li:after,

.preview.podebradsky p span,

.preview.podebradsky .box:after,

.preview.podebradsky .inner:after,

.preview.podebradsky .img:before,

.preview.podebradsky .tag                         {background-color: var(--podebradsky);}

.preview.podebradsky .inner:before                {border-color: var(--podebradsky);}



.preview.cerveny-hradek ul li:after,

.preview.cerveny-hradek p span,

.preview.cerveny-hradek .box:after,

.preview.cerveny-hradek .inner:after,

.preview.cerveny-hradek .img:before,

.preview.cerveny-hradek .tag                      {background-color: var(--cerveny-hradek);}

.preview.cerveny-hradek .inner:before             {border-color: var(--cerveny-hradek);}



.preview.kdyne ul li:after,

.preview.kdyne p span,

.preview.kdyne .box:after,

.preview.kdyne .inner:after,

.preview.kdyne .img:before,

.preview.kdyne .tag                               {background-color: var(--kdyne);}

.preview.kdyne .inner:before                      {border-color: var(--kdyne);}



.preview.strakonice ul li:after,

.preview.strakonice p span,

.preview.strakonice .box:after,

.preview.strakonice .inner:after,

.preview.strakonice .img:before,

.preview.strakonice .tag                          {background-color: var(--strakonice);}

.preview.strakonice .inner:before                 {border-color: var(--strakonice);}



.preview.teplice ul li:after,

.preview.teplice p span,

.preview.teplice .box:after,

.preview.teplice .inner:after,

.preview.teplice .img:before, 

.preview.teplice .tag                             {background-color: var(--teplice);}

.preview.teplice .inner:before                    {border-color: var(--teplice);}



.preview.chomutovsky ul li:after,

.preview.chomutovsky p span,

.preview.chomutovsky .box:after,

.preview.chomutovsky .inner:after,

.preview.chomutovsky .img:before,

.preview.chomutovsky .tag                         {background-color: var(--chomutovsky);}

.preview.chomutovsky .inner:before                {border-color: var(--chomutovsky);}



.preview.domazlicky ul li:after,

.preview.domazlicky p span,

.preview.domazlicky .box:after,

.preview.domazlicky .inner:after,

.preview.domazlicky .img:before,

.preview.domazlicky .tag                          {background-color: var(--domazlicky);}

.preview.domazlicky .inner:before                 {border-color: var(--domazlicky);}



.preview.stankovsky ul li:after,

.preview.stankovsky p span,

.preview.stankovsky .box:after,

.preview.stankovsky .inner:after,

.preview.stankovsky .img:before,

.preview.stankovsky .tag                          {background-color: var(--stankovsky);}

.preview.stankovsky .inner:before                 {border-color: var(--stankovsky);}



.preview.ostrovsky ul li:after,

.preview.ostrovsky p span,

.preview.ostrovsky .box:after,

.preview.ostrovsky .inner:after,

.preview.ostrovsky .img:before,

.preview.ostrovsky .tag                           {background-color: var(--ostrovsky);}

.preview.ostrovsky .inner:before                  {border-color: var(--ostrovsky);}



.preview.frantiskovy-lazne ul li:after,

.preview.frantiskovy-lazne p span,

.preview.frantiskovy-lazne .box:after,

.preview.frantiskovy-lazne .inner:after,

.preview.frantiskovy-lazne .img:before,

.preview.frantiskovy-lazne .tag                   {background-color: var(--frantiskovy-lazne);}

.preview.frantiskovy-lazne .inner:before          {border-color: var(--frantiskovy-lazne);}



.preview.stribrsky ul li:after,

.preview.stribrsky p span,

.preview.stribrsky .box:after,

.preview.stribrsky .inner:after,

.preview.stribrsky .img:before,

.preview.stribrsky .tag                           {background-color: var(--stribrsky);}

.preview.stribrsky .inner:before                  {border-color: var(--stribrsky);}



.preview.rokycansky ul li:after,

.preview.rokycansky p span,

.preview.rokycansky .box:after,

.preview.rokycansky .inner:after,

.preview.rokycansky .img:before,

.preview.rokycansky .tag                          {background-color: var(--rokycansky);}

.preview.rokycansky .inner:before                 {border-color: var(--rokycansky);}



.preview.tachovsky ul li:after,

.preview.tachovsky p span,

.preview.tachovsky .box:after,

.preview.tachovsky .inner:after,

.preview.tachovsky .img:before,

.preview.tachovsky .tag                           {background-color: var(--tachovsky);}

.preview.tachovsky .inner:before                  {border-color: var(--tachovsky);}



.news                                             {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 5;}

.news article                                     {display: flex; width: 49%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; margin-bottom: 3em; position: relative; box-sizing: border-box;}

.news article > a                                 {display: block; width: 100%; padding-top: 56%; position: relative; order: 0; margin-bottom: 1.6em; border-radius: var(--border-radius2); overflow: hidden;} 

.news article > a span                            {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}

.news article > a span img                        {display: block; width: 100%; transition: .25s ease-in-out;}

.news article > a:hover span img                  {opacity: 0.9; transform: scale(1.04,1.04);}

.news article > div                               {display: block; width: 100%; font-size: 1em; order: 1;}

.news article > div :is(h2, h3)                   {font-size: min(2.8em, calc(1em + 5vw)); font-weight: 700; margin-block: -0.12em 0.2em; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.news article > div :is(h2 a, h3 a)               {color: var(--color0); transition: .25s ease-in-out;}

.news article > div :is(h2 a, h3 a):hover         {color: var(--color1b);}

.news article > div p                             {font-size: 0.9em;}

.news article > div ul                            {display: flex; width: 100%; align-items: center; flex-wrap: wrap; font-size: 0.7em; margin-top: 0.5em; padding: 0;}

.news article > div ul li                         {display: block; width: auto; line-height: 1em; color: var(--color0); padding: 0; margin: 0.5em 0 0;}

.news article > div ul li:before                  {display: none;}

.news article > div ul li:nth-child(n+2)          {padding-left: 0.7em; margin-left: 0.7em; border-left: solid 1px rgba(0,0,0,0.3);}

.news article > div ul li a                       {font-weight: 600; padding: 0; border: none; transition: .25s ease-in-out;}

.news article > div ul li a:hover                 {color: var(--color0) !important;}

.news article > div .logo                         {display: block; width: auto; height: 2.7em; margin-top: 0.8em;}

.news article > div .logo img                     {display: block; width: auto; height: 100%;}

.news article > div .logo.medium                  {height: 2em;}

.news article > div .logo.small                   {height: 1.6em;}



.hp .news article                                           {width: 100%; margin-bottom: 1.8em;}

.hp .news aside article > a                                 {width: 38%; padding-top: 24%; margin-bottom: 0;}

.hp .news aside article > div                               {width: 58%;}

.hp .news + .flex .button                                   {font-size: 1.1em; padding-inline: 2em;}

  @media screen and (min-width: 961px)                      {

  .hp .news :is(main, aside)                                {display: block; width: calc(50% - 1.5rem);}

  .hp .news aside article                                   {width: 100%; font-size: 0.75em;}

  .hp .news aside article p                                 {font-size: 1.1em;}

  }

  @media screen and (max-width: 960px)                      {

  .hp .news :is(main, aside)                                {width: 100%;}

  }

  @media screen and (max-width: 480px)                      {

  .hp .news aside article > a                               {width: 38%; padding-top: 0;}

  .hp .news aside article > a span                          {height: auto; position: relative; left: auto; top: auto;}

  }



.main-aside > aside .news                                   {font-size: 0.9em;}

.main-aside > aside .news article                           {width: 100%; font-size: 0.8em; margin-bottom: 1.8em;}

.main-aside > aside .news article > a                       {width: 36%; padding-top: 24%; margin-bottom: 0;}

.main-aside > aside .news article > div                     {width: 59%;}

.main-aside > aside .news article > div h3                  {font-size: 1.4em;}

  @media screen and (min-width: 961px)                      {

  .news article:nth-child(n+3) > a,

  .news.media article > a                                   {width: 38%; padding-top: 24%; margin-bottom: 0;}

  body:not(.hp) .news article:nth-child(n+3) > div,

  .news.media article > div                                 {width: 58%; font-size: 0.9em;}

  }

  @media screen and (max-width: 960px)                      {

  .news article                                             {width: 100%;}

  .news article:nth-child(n+3),

  .news.media article                                       {width: 100%; font-size: 1em;}

  .main-aside > aside .news                                 {display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 1em;}

  .main-aside > aside .news article                         {width: 49%; font-size: 1em;}

  .main-aside > aside .news article > a                     {width: 38%; padding-top: 24%;}

  }

  @media screen and (max-width: 768px)                      {

  .main-aside > aside .news article                         {width: 100%;}

  }

  @media screen and (min-width: 481px)                      {

  .news.media article                                       {width: 48%; font-size: 0.8em; box-sizing: border-box;}

  }

  @media screen and (max-width: 400px)                      {

  .news article ul                                          {display: block;}

  .news article ul li:first-child                           {padding-right: 0; margin-right: 0; border-right: none; margin-bottom: 0.8em;}

  }

.news .winter ul li a                                       {color: var(--winter);}

.news .marianske-lazne ul li a                              {color: var(--marianske-lazne);}

.news .chebsky ul li a                                      {color: var(--chebsky);}

.news .karlovarsky ul li a                                  {color: var(--karlovarsky);}

.news .plzensky ul li a                                     {color: var(--plzensky);}

.news .chotesovsky ul li a                                  {color: var(--chotesovsky);}

.news .kozel ul li a                                        {color: var(--kozel);}

.news .presticky ul li a                                    {color: var(--presticky);}

.news .rakovnicky ul li a                                   {color: var(--rakovnicky);}

.news .svatomartinsky-kost-plzen ul li a                    {color: var(--svatomartinsky-kost-plzen);}

.news .svatomartinske-slavnosti-podebrady ul li a           {color: var(--svatomartinske-slavnosti-podebrady);}

.news .pisecky ul li a                                      {color: var(--pisecky);}

.news .podebradsky ul li a                                  {color: var(--podebradsky);}

.news .cerveny-hradek ul li a                               {color: var(--cerveny-hradek);}

.news .kdyne ul li a                                        {color: var(--kdyne);}

.news .strakonice ul li a                                   {color: var(--strakonice);}

.news .teplice ul li a                                      {color: var(--teplice);}

.news .ricansky ul li a                                     {color: var(--ricansky);}

.news .chomutovsky ul li a                                  {color: var(--chomutovsky);}

.news .domazlicky ul li a                                   {color: var(--domazlicky);}

.news .mostecky ul li a                                     {color: var(--mostecky);}

.news .stankovsky ul li a                                   {color: var(--stankovsky);}

.news .ostrovsky ul li a                                    {color: var(--ostrovsky);}

.news .frantiskovy-lazne ul li a                            {color: var(--frantiskovy-lazne);}

.news .stribrsky ul li a                                    {color: var(--stribrsky);}

.news .rokycansky ul li a                                   {color: var(--rokycansky);}

.news .tachovsky ul li a                                    {color: var(--tachovsky);}



.image-text                                    {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2.5em 0; position: relative;}

.image-text .image                             {display: block; position: relative;}

.image-text .img                               {display: block; aspect-ratio: 1; position: relative;}

.image-text .img span                          {display: block; width: 100%; height: 100%; border-radius: 100%; overflow: hidden;}

.image-text .img span img                      {display: block; width: 100%; height: 100%; object-fit: cover;}

.image-text .img svg                           {display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2;}

.image-text .img svg text                      {font-size: 1.7em; font-weight: 600; font-family: var(--font2); letter-spacing: var(--font2-spacing); filter: drop-shadow(0 0 0.8em black);}

.image-text .img:before,

.image-text .img:after                         {display: block; aspect-ratio: 1; border-radius: 100%; box-sizing: border-box; position: absolute; content: "";}

.image-text .img:before                        {background: var(--color1b);}

.image-text .img:after                         {background: var(--color2);} 

.image-text .i1                                {width: 100%;}

.image-text .i2                                {width: 54%; position: absolute;}

.image-text.even .i2                           {left: 64%; top: 6%;}

.image-text.odd .i2                            {right: 64%; bottom: 6%;}

.image-text .text                              {display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box;}

.image-text .text h2                           {font-size: min(3.6em, calc(1.5em + 5vw)); margin-top: 0;}

.image-text .i1:after                          {width: 12%;}

.image-text.even .i1:after                     {left: 16%; top: 4%;}

.image-text.odd .i1:after                      {right: 16%; bottom: 4%;}

.image-text .i2:after                          {width: 7%;}

.image-text.even .i2:after                     {left: 74%; bottom: -8%;}

.image-text.odd .i2:after                      {right: 74%; top: -8%;}

.image-text .i1:before                         {width: 80%; background: none; border: solid 2em var(--color1b); z-index: -1; opacity: 0.2;}

.image-text.even .i1:before                    {left: 33%; top: 14%;}

.image-text.odd .i1:before                     {right: 33%; bottom: 14%;}

.image-text .i2:before                         {width: 60%; opacity: 0.8;}

.image-text.even .i2:before                    {right: 130%; bottom: -80%;}

.image-text.odd .i2:before                     {left: 130%; top: -80%;}

.image-text.even svg                           {transform: rotate(100deg);}



.hp-about                                      {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 5em 0; padding-top: 4em;}

.hp-about .image-text.even .image              {margin-left: -11%;}

.hp-about .image-text.odd .image               {margin-right: -11%;}

  @media screen and (min-width: 1401px)        {

  .hp-about .image-text.even                   {margin-top: -18em;}  

  }

  @media screen and (min-width: 1081px) and (max-width: 1400px){

  .hp-about .image-text.even                   {margin-top: max(-20em, calc(1em - 18vw));}  

  }

  @media screen and (min-width: 1081px)        {

  .hp-about .image-text                        {justify-content: space-between;}

  .hp-about .image-text .image                 {width: 48%;}

  .hp-about .image-text .text                  {width: 48%; padding-block: 4em;}

  .hp-about .image-text.odd                    {align-items: flex-start; flex-flow: row-reverse;}

  .hp-about .image-text.even                   {align-items: flex-end;}

  }

  @media screen and (max-width: 1080px)        {

  .hp-about .image-text .image                 {max-width: 30rem;}

  .hp-about .image-text .text                  {align-items: center;}

  .hp-about .image-text .text > *              {max-width: 40rem; text-align: center;}

  }



.places                                                     {display: block; width: 100%; position: relative;}

.places .left                                               {display: flex; width: 100%; min-height: 100%; align-items: center; position: absolute; z-index: 1;}

.places .left .swiper-container                             {display: block; height: 100%;}

.places .left .swiper-slide                                 {display: flex; width: 100%; height: 100%; justify-content: center; align-content: center; align-items: center; flex-wrap: wrap; padding: 6em 0; box-sizing: border-box; opacity: 0 !important; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}

.places .left .swiper-slide-active                          {opacity: 1 !important;}

.places .left .swiper-slide > img                           {order: 0; display: block; width: 8em; margin: 0 0 0.3em;}

.places .left .swiper-slide h2                              {order: 1; display: block; width: 100%; text-align: center; font-size: min(5em, calc(1.5em + 8vw)); color: var(--color1); line-height: 0.9; margin: 0;}

.places .left .swiper-slide h2 span                         {font-weight: 700;}

.places .left .swiper-slide ul                              {order: 2; display: flex; width: 100%; justify-content: center; flex-wrap: wrap; font-size: 0.9em; margin-top: 1em; padding: 0;}

.places .left .swiper-slide ul li                           {display: block; width: auto; text-align: center; font-weight: 600; color: var(--color1); line-height: 0.9em; padding: 0; margin: 0 0 0.6em;}

.places .left .swiper-slide ul li:first-child               {padding-right: 0.6em; margin-right: 0.6em; border-right: solid 1px var(--color1);}

.places .left .swiper-slide ul li:before                    {display: none;}

.places .left .swiper-slide ul li:last-child                {width: 100%;}

.places .left .swiper-slide .button                         {order: 3; font-size: 1.1em; margin-top: 1em;}

.places .map                                                {display: block; width: 48%; margin-left: 52%; position: relative; z-index: 2;}

.places .map img                                            {display: block; width: 100%;}

.places .map .swiper-container                              {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}

.places .map .swiper-slide                                  {display: block; width: 2em; height: 2em; opacity: 0.4; background: URL("images/place.png") no-repeat center center; background-size: 100% 100%; cursor: pointer; position: absolute; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; transition: .25s ease-in-out;}  

.places .map .swiper-slide:hover                            {opacity: 1;}

.places .map .swiper-slide-active                           {opacity: 1; background-image: URL("images/place-sel.png"); z-index: 2;}

  @media screen and (min-width: 1801px)                     {

  .places .map                                              {width: 45em;}

  .places .map img                                          {

                                                             -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-type: luminance; -webkit-mask-type: luminance;

                                                             mask-image: linear-gradient(to right, black, black 80%, transparent);                                           

                                                             -webkit-mask-image: linear-gradient(to right, black, black 80%, transparent);

                                                            }

  }

  @media screen and (min-width: 961px)                      {

  .places .left .swiper-container                           {width: 52%; margin: 0; position: relative; top: -1em;}

  .places .left .wrapper                                    {justify-content: flex-start; min-height: 100%; height: auto;} 

  }

  @media screen and (max-width: 960px)                      {

  .places                                                   {margin-top: 3em;}

  .places .left .swiper-container                           {width: 100%; max-width: 30rem;}

  .places                                                   {display: flex; flex-wrap: wrap;}

  .places .map                                              {order: 0; width: 90%; margin-left: 10%;}

  .places .left                                             {order: 1; position: relative; left: auto; top: auto; background: none; margin: -3em 0 0;}

  .places .left .wrapper                                    {padding: 0;}

  }



.places .map .winter                                        {left: ; top: ;}

.places .map .marianske-lazne                               {left: 13%; top: 40%;}

.places .map .chebsky                                       {left: 6.5%; top: 36%;}

.places .map .karlovarsky                                   {left: 15.5%; top: 31%;}

.places .map .plzensky                                      {left: 25%; top: 50%;}

.places .map .chotesovsky                                   {left: 22%; top: 52%;}

.places .map .kozel                                         {left: 30%; top: 51.5%;}

.places .map .presticky                                     {left: 25.5%; top: 55%;}

.places .map .rakovnicky                                    {left: 41.5%; top: 34.5%;}

.places .map .pisecky                                       {left: 55%; top: 66%;}

.places .map .podebradsky                                   {left: 85%; top: 33%;}

.places .map .mlada-boleslav                                {left: 76%; top: 25%;}

.places .map .strakonice                                    {left: 50%; top: 69%;}

.places .map .svatomartinsky-kost-plzen                     {left: 27%; top: 48%;}

.places .map .svatomartinske-slavnosti-podebrady            {left: 82%; top: 34%;}

.places .map .ricansky                                      {left: 72%; top: 42%;}

.places .map .chomutovsky                                   {left: 35.5%; top: 19.5%;}

.places .map .kdyne                                         {left: 23%; top: 62%;}

.places .map .teplice                                       {left: 47%; top: 14%;}

.places .map .cerveny-hradek                                {left: 37.5%; top: 19%;}

.places .map .mostecky                                      {left: 41%; top: 17%;}

.places .map .domazlicky                                    {left: 20.5%; top: 61.5%;}

.places .map .stankovsky                                    {left: 23%; top: 55%;}

.places .map .ostrovsky                                     {left: 17%; top: 28%;}

.places .map .frantiskovy-lazne                             {left: 5%; top: 34.5%;}

.places .map .stribrsky                                     {left: 18.8%; top: 49.5%;}

.places .map .rokycansky                                    {left: 28.5%; top: 50%;}

.places .map .tachovsky                                     {left: 13.5%; top: 47%;}



.places .left .winter h2 span                               {color: var(--winter);}

.places .left .marianske-lazne h2 span                      {color: var(--marianske-lazne);}

.places .left .chebsky h2 span                              {color: var(--chebsky);}

.places .left .karlovarsky h2 span                          {color: var(--karlovarsky);}

.places .left .plzensky h2 span                             {color: var(--plzensky);}

.places .left .chotesovsky h2 span                          {color: var(--chotesovsky);}

.places .left .kozel h2 span                                {color: var(--kozel);}

.places .left .presticky h2 span                            {color: var(--presticky);}

.places .left .rakovnicky h2 span                           {color: var(--rakovnicky);}

.places .left .svatomartinsky-kost-plzen h2 span            {color: var(--svatomartinsky-kost-plzen);}

.places .left .svatomartinske-slavnosti-podebrady h2 span   {color: var(--svatomartinske-slavnosti-podebrady);}

.places .left .pisecky h2 span                              {color: var(--pisecky);}

.places .left .podebradsky h2 span                          {color: var(--podebradsky);}

.places .left .cerveny-hradek h2 span                       {color: var(--cerveny-hradek);}

.places .left .kdyne h2 span                                {color: var(--kdyne);}

.places .left .strakonice h2 span                           {color: var(--strakonice);}

.places .left .teplice h2 span                              {color: var(--teplice);}

.places .left .ricansky h2 span                             {color: var(--ricansky);}

.places .left .chomutovsky h2 span                          {color: var(--chomutovsky);}

.places .left .domazlicky h2 span                           {color: var(--domazlicky);}

.places .left .mostecky h2 span                             {color: var(--mostecky);}

.places .left .stankovsky h2 span                           {color: var(--stankovsky);}

.places .left .ostrovsky h2 span                            {color: var(--ostrovsky);}

.places .left .frantiskovy-lazne h2 span                    {color: var(--frantiskovy-lazne);}

.places .left .stribrsky h2 span                            {color: var(--stribrsky);}

.places .left .rokycansky h2 span                           {color: var(--rokycansky);}

.places .left .tachovsky h2 span                            {color: var(--tachovsky);}



.logos                                                      {display: flex; align-items: center; flex-wrap: wrap; gap: 1em 2em; width: 100%; margin-top: 4em; position: relative; z-index: 5;}

.logos h2                                                   {margin-top: 0;}

.logos .wrapper                                             {justify-content: flex-start; gap: 1em 2em;}

.logos a                                                    {display: block; width: auto; height: 3em;}

.logos a img                                                {display: block; width: auto; height: 100%; transition: .15s ease-in-out;}

.logos a:hover img                                          {-ms-transform: scale(1.04,1.04); -webkit-transform: scale(1.04,1.04); transform: scale(1.04,1.04);}

  @media screen and (min-width: 1200px)                     {

  .hp .logos                                                {margin-top: -3em;}

  .hp .logos .wrapper                                       {padding-right: min(30em, 25%);}

  }

  @media screen and (max-width: 960px)                      {

  .logos .wrapper                                           {justify-content: center;}

  .logos a                                                  {height: 3em;}

  }



.cta-trhy-ales                                        {display: block; width: 100%; font-size: 0.9em; padding: min(4em, calc(1em + 5vw)); box-sizing: border-box; border: dashed 0.14em var(--color0); border-radius: var(--border-radius2); margin-block: 4rem 1rem; position: relative; z-index: 1;}

.cta-trhy-ales .inner                                 {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; gap: 1.5em 8%;}

.cta-trhy-ales .inner .info                           {display: flex; flex-direction: column; align-items: center; gap: 0.6em; flex-grow: 2;}

.cta-trhy-ales .inner .info :is(h2, p)                {text-align: center; margin: 0;}

.cta-trhy-ales .inner .info .buttons                  {display: flex; justify-content: center; align-items: center; gap: 1.5em;  margin-top: 0.35em;}

.cta-trhy-ales .inner .info .button                   {font-size: 1.15em;}

.cta-trhy-ales .inner .info .logo                     {display: block; width: 7em;}

.cta-trhy-ales .inner .info .logo img                 {display: block; width: 100%;}

.cta-trhy-ales .inner > img                           {display: block; width: 100%; max-width: 23em; flex-shrink: 0; order: -1;}

  @media screen and (min-width: 1581px)               {

  .cta-trhy-ales                                      {width: calc(100% + 8em); margin-inline: -4em;}

  }  

  @media screen and (min-width: 961px)                {

  .cta-trhy-ales .inner                               {flex-direction: row; justify-content: space-between;}

  .cta-trhy-ales .inner .info                         {align-items: flex-start;}

  .cta-trhy-ales .inner .info :is(h2, p)              {text-align: left;}

  .cta-trhy-ales .inner > img                         {margin-block: -2em; order: 2;}

  }



.event-detail                                   {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--event-gap) 0; box-sizing: border-box; --event-gap: 1.5em;}

.event-detail > *                               {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem;}

.event-detail aside                             {justify-content: space-between; align-items: stretch; gap: 0.8em;}

.event-detail h2                                {font-size: min(3em, calc(1.7em + 5vw)); color: var(--color1); font-weight: 700; margin: 0.5em 0 0; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.event-detail .cta-buttons                      {display: flex; width: 100%; justify-content: space-between; gap: 0.35rem; font-size: 0.9em;}

.event-detail .cta-buttons .button              {width: calc(50% - 0.175rem); justify-content: center; padding: 0.9em 1.2em 0.85em; white-space: nowrap;}

.event-detail .cta-buttons .button img          {width: 0.9em; height: 0.9em; position: relative; top: 0.02em;}

.event-detail .cta-buttons .button.fb:hover     {filter: brightness(1.1);}

.event-detail :is(.map, .file)                  {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: flex-start; flex-wrap: wrap; gap: 0.8em 0; border-radius: 0.4em; overflow: hidden; position: relative;}

.event-detail .map iframe                       {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}

.event-detail .file img                         {display: block; width: 100%;}

.event-detail .file span                        {font-size: 0.9em; font-weight: 700; padding-inline: 0.8em; box-sizing: border-box;}

.event-detail .file span a                      {display: flex; height: 2.4em; align-items: center; gap: 0.3em; font-size: 0.82em; color: white; font-weight: 600; background: var(--color1); padding: 0.11em 0.7em 0; border-radius: 1.2em; box-sizing: border-box; transition: .35s ease-in-out;}

.event-detail .file span a:before               {display: block; width: 1.2em; height: 1.2em; content: ""; position: relative; top: -0.13em; background: url("images/icon-download-white.svg") no-repeat center center; background-size: contain;}

.event-detail .file span a:hover                {background: var(--color1b);}

  @media screen and (min-width: 961px)          {

  .event-detail                                 {padding-inline: 4em; box-sizing: border-box;}

  .event-detail > div                           {width: 60%;}

  .event-detail > aside                         {width: 35%;}

  .event-detail .map                            {height: 20em;}

  }

  @media screen and (max-width: 960px)          {

  .event-detail aside .map                      {order: -1; width: 100%; height: 18em;}

  }

  @media screen and (min-width: 581px) and (max-width: 960px){

  .event-detail aside :is(.schedule, .file)     {width: calc(50% - 0.4em);}

  .event-detail aside .schedule                 {padding: calc(0.5em + 3vw);}

  }

  @media screen and (max-width: 440px)          {

  .event-detail .cta-buttons .button            {width: auto;} 

  .event-detail .cta-buttons .button.glass      {flex: 1;} 

  }



.heading-festival                                 {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: var(--top-gap) 0 1.5em;}

.heading-festival h1                              {width: auto; color: var(--color1); margin: 0;}

.heading-festival h1 span                         {display: block;}

.heading-festival img                             {display: block; width: min(10em, calc(4em + 8vw));}

.heading-festival .info                           {display: flex; width: 100%; gap: 0.5em 1.5em; margin-top: 1.5em; padding: 1.5em 0 0; border-top: solid 0.09em rgba(0,0,0,0.14);}

.heading-festival .info li                        {display: block; width: auto; font-size: 1.5em; font-weight: 600; color: var(--color0); padding: 0 0 0 2.2em; position: relative; box-sizing: border-box; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.heading-festival .info li:last-child             {margin-right: 0;}

.heading-festival .info li:before                 {display: block; width: auto; height: auto; background: none; font-size: 0.8em; color: var(--color1); position: relative; left: auto; top: auto; margin-bottom: 0.2em;}

.heading-festival .info li:nth-child(1):before    {content: "Datum";}

.heading-festival .info li:nth-child(2):before    {content: "Čas";}

.heading-festival .info li:nth-child(3):before    {content: "Místo";}

.heading-festival .info li:nth-child(4):before    {content: "Vstupné";}

.heading-festival .info li:after                  {display: block; width: 1.76em; height: 1.76em; background-color: var(--color1); background-size: 60% auto; background-repeat: no-repeat; background-position: center center; border-radius: 100%; position: absolute; left: 0; top: 0.028em; content: "";}

.heading-festival .info li:nth-child(1):after     {background-image: URL("images/icons/calendar-white.svg");}

.heading-festival .info li:nth-child(2):after     {background-image: URL("images/icons/time-white.svg");}

.heading-festival .info li:nth-child(3):after     {background-image: URL("images/icons/place-white.svg");}

.heading-festival .info li:nth-child(4):after     {background-image: URL("images/icons/entry-white.svg");}

  @media screen and (max-width: 1080px)           {

  .heading-festival .info                         {justify-content: space-between; flex-wrap: wrap;}

  .heading-festival .info li                      {width: calc(50% - 0.75em);}                   

  } 

  @media screen and (max-width: 540px)            {

  .heading-festival .info li                      {width: 100%;}

  }



.festival .img                                    {display: block; width: 100%; padding-top: 40%; position: relative; overflow: hidden; border-radius: 0.3em; margin-bottom: 3em;} 

.festival .img span                               {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}

.festival .img span img                           {display: block; width: 100%; transition: .25s ease-in-out;}

.festival .img:hover span img                     {opacity: 0.9; transform: scale(1.04,1.04);}

.festival .graybox                                {display: flex; width: 100%; flex-wrap: wrap; gap: 1rem; background: var(--color0b); padding: 2em; box-sizing: border-box; border-radius: var(--border-radius1);}

.festival .schedule                               {display: block; width: 100%; padding: 1.6em; border-radius: 0.4em; border: solid 0.16em var(--color1); box-sizing: border-box;}

.festival .schedule h2                            {margin-block: -0.1em 0.35em;}

.festival .schedule ul                            {display: flex; flex-wrap: wrap; gap: 0.05em; font-size: 0.9em; padding: 0;}

.festival .schedule ul li                         {color: var(--color0);}

.festival .schedule ul li:before                  {width: 0.3em; height: 0.3em; border-radius: 0.08em; border-style: solid; border-width: 0.14em; border-color: var(--color1); background: none; left: 0.2em; top: 0.44em; transform: rotate(-45deg);}

.festival .gallery                                {margin-top: 0.5em;}

.festival .participants                           {display: flex; width: 100%; flex-wrap: wrap; overflow: hidden;}

.festival .participants > div                     {display: flex; justify-content: center; align-items: center; padding: 3% 5%; border-right: solid 1px rgb(210,210,210); box-sizing: border-box; position: relative;}

.festival .participants > div:before              {display: block; width: 10000px; height: 1px; background: rgb(210,210,210); position: absolute; left: 0; top: 0; content: "";}

.festival .participants > div a                   {display: block; width: 100%;}

.festival .participants > div a img               {display: block; width: 100%; transition: .25s ease-in-out;}

.festival .participants > div a:hover img         {transform: scale(1.04,1.04);}

  @media screen and (min-width: 1081px)                  {

  .festival .participants > div                          {width: 20%; min-height: 10em;}

  .festival .participants > div:nth-of-type(-n+5):before {display: none;}  

  .festival .participants > div:nth-of-type(5n+5)        {border-right: none;}

  }

  @media screen and (min-width: 769px) and (max-width: 1080px){

  .festival .participants > div                          {width: 25%; min-height: 12em;}

  .festival .participants > div:nth-of-type(-n+4):before {display: none;}  

  .festival .participants > div:nth-of-type(4n+4)        {border-right: none;}

  }

  @media screen and (min-width: 540px) and (max-width: 768px){

  .festival .participants > div                          {width: 33.33%; padding: 4% 7%; min-height: 13em;}

  .festival .participants > div:nth-of-type(-n+3):before {display: none;}  

  .festival .participants > div:nth-of-type(3n+3)        {border-right: none;}

  }

  @media screen and (max-width: 960px)                   {

  .festival .img                                         {padding-top: 65%; margin-bottom: 2em;}

  }

  @media screen and (max-width: 540px)                   {

  .festival .participants > div                          {width: 50%; padding: 7% 12%; min-height: 13em;}

  .festival .participants > div:nth-of-type(-n+2):before {display: none;}  

  .festival .participants > div:nth-of-type(even)        {border-right: none;}

  }  

  @media screen and (max-width: 540px)                   {

  .festival .schedule                                    {padding: 2em;}

  }



.winter .heading-festival h1 span                 {color: var(--winter);}

.marianske-lazne .heading-festival h1 span        {color: var(--marianske-lazne);}

.chebsky .heading-festival h1 span                {color: var(--chebsky);}

.karlovarsky .heading-festival h1 span            {color: var(--karlovarsky);}

.plzensky .heading-festival h1 span               {color: var(--plzensky);}

.chotesovsky .heading-festival h1 span            {color: var(--chotesovsky);}

.kozel .heading-festival h1 span                  {color: var(--kozel);}

.presticky .heading-festival h1 span              {color: var(--presticky);}

.rakovnicky .heading-festival h1 span             {color: var(--rakovnicky);}

.svatomartinsky-kost-plzen .heading-festival h1 span

                                                  {color: var(--svatomartinsky-kost-plzen);}

.svatomartinske-slavnosti-podebrady .heading-festival h1 span

                                                  {color: var(--svatomartinske-slavnosti-podebrady);}

.pisecky .heading-festival h1 span                {color: var(--pisecky);}

.podebradsky .heading-festival h1 span            {color: var(--podebradsky);}

.cerveny-hradek .heading-festival h1 span         {color: var(--cerveny-hradek);}

.kdyne .heading-festival h1 span                  {color: var(--kdyne);}

.strakonice .heading-festival h1 span             {color: var(--strakonice);}

.teplice .heading-festival h1 span                {color: var(--teplice);}

.ricansky .heading-festival h1 span               {color: var(--ricansky);}

.chomutovsky .heading-festival h1 span            {color: var(--chomutovsky);}

.domazlicky .heading-festival h1 span             {color: var(--domazlicky);}

.mostecky .heading-festival h1 span               {color: var(--mostecky);}

.stankovsky .heading-festival h1 span             {color: var(--stankovsky);}

.ostrovsky .heading-festival h1 span              {color: var(--ostrovsky);}

.frantiskovy-lazne .heading-festival h1 span      {color: var(--frantiskovy-lazne);}

.stribrsky .heading-festival h1 span              {color: var(--stribrsky);}

.rokycansky .heading-festival h1 span             {color: var(--rokycansky);}

.tachovsky .heading-festival h1 span              {color: var(--tachovsky);}



.winter .schedule ul li:before                    {border-color: var(--winter);}

.marianske-lazne .schedule ul li:before           {border-color: var(--marianske-lazne);}

.chebsky .schedule ul li:before                   {border-color: var(--chebsky);}

.karlovarsky .schedule ul li:before               {border-color: var(--karlovarsky);}

.plzensky .schedule ul li:before                  {border-color: var(--plzensky);}

.chotesovsky .schedule ul li:before               {border-color: var(--chotesovsky);}

.kozel .schedule ul li:before                     {border-color: var(--kozel);}

.presticky .schedule ul li:before                 {border-color: var(--presticky);}

.rakovnicky .schedule ul li:before                {border-color: var(--rakovnicky);}

.svatomartinsky-kost-plzen .schedule ul li:before {border-color: var(--svatomartinsky-kost-plzen);}

.svatomartinske-slavnosti-podebrady .schedule ul li:before

                                                  {border-color: var(--svatomartinske-slavnosti-podebrady);}

.pisecky .schedule ul li:before                   {border-color: var(--pisecky);}

.podebradsky .schedule ul li:before               {border-color: var(--podebradsky);}

.cerveny-hradek .schedule ul li:before            {border-color: var(--cerveny-hradek);}

.kdyne .schedule ul li:before                     {border-color: var(--kdyne);}

.strakonice .schedule ul li:before                {border-color: var(--strakonice);}

.teplice .schedule ul li:before                   {border-color: var(--teplice);}

.ricansky .schedule ul li:before                  {border-color: var(--ricansky);}

.chomutovsky .schedule ul li:before               {border-color: var(--chomutovsky);}

.domazlicky .schedule ul li:before                {border-color: var(--domazlicky);}

.mostecky .schedule ul li:before                  {border-color: var(--mostecky);}

.stankovsky .schedule ul li:before                {border-color: var(--stankovsky);}

.ostrovsky .schedule ul li:before                 {border-color: var(--ostrovsky);}

.frantiskovy-lazne .schedule ul li:before         {border-color: var(--frantiskovy-lazne);}

.stribrsky .schedule ul li:before                 {border-color: var(--stribrsky);}

.rokycansky .schedule ul li:before                {border-color: var(--rokycansky);}

.tachovsky .schedule ul li:before                 {border-color: var(--tachovsky);}



.infographics                                               {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 2em;}

.infographics p                                             {display: flex; width: 49%; align-items: center; flex-wrap: wrap; text-align: left; font-weight: 400; box-sizing: border-box;}

.infographics p:nth-child(1),

.infographics p:nth-child(3),

.infographics p:nth-child(4),

.infographics p:nth-child(6)                                {font-size: 2.3em; line-height: 1.15em; font-family: 'Abril Fatface', serif;}

.infographics p img                                         {display: block; width: 4em; margin-right: 1em;}

  @media screen and (max-width: 1080px)                     {

  .infographics p:nth-child(1),

  .infographics p:nth-child(3),

  .infographics p:nth-child(4),

  .infographics p:nth-child(6)                              {font-size: 2.2em;}

  }

  @media screen and (min-width: 960px)                      {

  .infographics p:nth-child(2),

  .infographics p:nth-child(5)                              {padding: 0 4%;}

  }

  @media screen and (min-width: 480px) and (max-width: 960px){

  .infographics                                             {align-items: flex-start;}

  .infographics p                                           {margin-bottom: 7%;}

  .infographics p:nth-child(1)                              {order: 0; display: block; text-align: center;}

  .infographics p:nth-child(2)                              {order: 2; width: 100%; text-align: justify;}

  .infographics p:nth-child(3)                              {order: 4; display: block; text-align: center;}

  .infographics p:nth-child(4)                              {order: 1; display: block; text-align: center;}

  .infographics p:nth-child(5)                              {order: 5; width: 100%; text-align: justify;}

  .infographics p:nth-child(6)                              {order: 3; display: block; text-align: center;}

  .infographics p img                                       {width: 60%; max-width: 5em; margin: 0 auto;}

  }  

  @media screen and (max-width: 768px)                      {

  .infographics p:nth-child(1),

  .infographics p:nth-child(3),

  .infographics p:nth-child(4),

  .infographics p:nth-child(6)                              {font-size: 2em;}

  }

  @media screen and (max-width: 480px)                      {

  .infographics p                                           {width: 100%; margin-bottom: 5%;}

  .infographics p:nth-child(2),

  .infographics p:nth-child(5)                              {text-align: justify;}

  }

  @media screen and (max-width: 380px)                      {

  .infographics p:nth-child(1),

  .infographics p:nth-child(3),

  .infographics p:nth-child(4),

  .infographics p:nth-child(6)                              {font-size: 1.8em;}

  }



.upcoming                                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}  

.upcoming > div                                             {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; box-sizing: border-box; position: relative; z-index: 2; transition: .25s ease-in-out;}

.upcoming > div:before                                      {display: block; position: absolute; inset: -0.6em; background: black; opacity: 0; border-radius: var(--border-radius2); z-index: -1; content: ""; transition: .25s ease-in-out;}

.upcoming > div:not(:first-of-type)                         {margin-top: 0.85rem;}

.upcoming > div img                                         {display: block; width: 5em}

.upcoming > div > div                                       {display: block; width: calc(95% - 5em);}

.upcoming > div > div h3                                    {display: block; width: 100%; font-size: 1.9em; line-height: 1.1em; color: var(--color0); font-weight: 700; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line-height);}

.upcoming > div > div h3 span                               {display: block;}

.upcoming > div > div ul                                    {display: flex; width: 100%; align-items: center; flex-wrap: wrap; margin-top: 0.25em; padding: 0;}

.upcoming > div > div ul li                                 {display: block; width: auto; font-size: 0.65em; color: #252525; font-weight: 600; padding: 0; margin: 0;}

.upcoming > div > div ul li:first-child                     {padding-right: 0.6em; margin-right: 0.6em;}

.upcoming > div > div ul li:after                           {display: block; width: 1px; height: 1em; background: black; opacity: 0.1; position: absolute; right: 0; top: 0.25em; content: "";}

.upcoming > div > div ul li:before                          {display: none;}

.upcoming > div > a                                         {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; content: "";}

.upcoming > div:hover:before                                {opacity: 0.06;}

  @media screen and (min-width: 580px) and (max-width: 960px){

  .upcoming > div                                           {width: 50%;}

  .upcoming > div:nth-of-type(2)                            {margin-top: 0;}

  } 

  @media screen and (max-width: 580px)                      {

  .upcoming > div                                           {width: 100%; margin-bottom: 0.4em;}

  .upcoming > div img                                       {width: 5.5em;}

  .upcoming > div > div                                     {width: calc(100% - 6.5em);}

  }



.upcoming .winter h3 span                                   {color: var(--winter);}

.upcoming .marianske-lazne h3 span                          {color: var(--marianske-lazne);}

.upcoming .chebsky h3 span                                  {color: var(--chebsky);}

.upcoming .karlovarsky h3 span                              {color: var(--karlovarsky);}

.upcoming .plzensky h3 span                                 {color: var(--plzensky);}

.upcoming .chotesovsky h3 span                              {color: var(--chotesovsky);}

.upcoming .kozel h3 span                                    {color: var(--kozel);}

.upcoming .presticky h3 span                                {color: var(--presticky);}

.upcoming .rakovnicky h3 span                               {color: var(--rakovnicky);}

.upcoming .svatomartinsky-kost-plzen h3 span                {color: var(--svatomartinsky-kost-plzen);}

.upcoming .svatomartinske-slavnosti-podebrady h3 span       {color: var(--svatomartinske-slavnosti-podebrady);}

.upcoming .pisecky h3 span                                  {color: var(--pisecky);}

.upcoming .podebradsky h3 span                              {color: var(--podebradsky);}

.upcoming .cerveny-hradek h3 span                           {color: var(--cerveny-hradek);}

.upcoming .kdyne h3 span                                    {color: var(--kdyne);}

.upcoming .strakonice h3 span                               {color: var(--strakonice);}

.upcoming .teplice h3 span                                  {color: var(--teplice);}

.upcoming .ricansky h3 span                                 {color: var(--ricansky);}

.upcoming .chomutovsky h3 span                              {color: var(--chomutovsky);}

.upcoming .domazlicky h3 span                               {color: var(--domazlicky);}

.upcoming .mostecky h3 span                                 {color: var(--mostecky);}

.upcoming .stankovsky h3 span                               {color: var(--stankovsky);}

.upcoming .ostrovsky h3 span                                {color: var(--ostrovsky);}

.upcoming .frantiskovy-lazne h3 span                        {color: var(--frantiskovy-lazne);}

.upcoming .stribrsky h3 span                                {color: var(--stribrsky);}

.upcoming .rokycansky h3 span                               {color: var(--rokycansky);}

.upcoming .tachovsky h3 span                                {color: var(--tachovsky);}



.gallery-preview                                            {display: block; width: 100%; border-radius: var(--border-radius2); overflow: hidden; position: relative; border-bottom: solid 0.4em transparent; container-type: inline-size;}

.gallery-preview:after                                      {display: block; width: 100%; height: 80%; opacity: 0.7; background-image: linear-gradient(to top, black, transparent); position: absolute; left: 0; bottom: 0; z-index: 1; content: "";}

.gallery-preview .img                                       {display: block; width: 100%; padding-top: 65%; position: relative;} 

.gallery-preview .img span                                  {display: block;  position: absolute; inset: 0;}

.gallery-preview .img span img                              {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;}

.gallery-preview:hover .img span img                        {opacity: 0.9; transform: scale(1.04,1.04);}

.gallery-preview .info                                      {display: flex; width: 100%; justify-content: space-between; align-items: center; align-content: flex-end; gap: 1.5em; padding: 1.5em; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 2;}

.gallery-preview .info h2                                   {display: flex; flex-direction: column; align-items: flex-start; width: auto; flex-grow: 2; color: white; font-size: 1.8em; font-weight: 600;; margin: 0; position: relative;}

.gallery-preview .info img                                  {display: block; width: 4rem; flex-shrink: 0; filter: drop-shadow(0 0 0.8em black);}

.gallery-preview > a                                        {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3;}

  @media screen and (min-width: 541px)                      {

  .gallery-preview.wide                                     {align-items: center; border-bottom: none; border-right: solid 0.4em transparent;}

  .gallery-preview.wide:after                               {height: 100%; opacity: 1; background-image: linear-gradient(to right, black, black 30%, transparent);}

  .gallery-preview.wide .img                                {width: 70%; padding-top: 25%;}

  .gallery-preview.wide .info                               {height: 100%; font-size: min(7cqw, calc(1em + 3cqw)); padding: 5cqw;}

  .gallery-preview.wide .info h2                            {font-size: 1em; margin-top: -0.12em;}

  .gallery-preview.wide .info h2:before                     {display: flex; height: 1.6em; align-items: center; font-size: 0.45em; background: var(--color1b); font-weight: 400; padding: 0 0.7em 0.1em; box-sizing: border-box; border-radius: 0.8em; margin: 0  0 0.5em -0.1em; content: "Fotogalerie";}

  .gallery-preview.wide .info img                           {width: 14cqw;}

  }

  @media screen and (max-width: 540px)                      {

  .gallery-preview .info h2                                 {font-size: 2em;}

  }  



.gallery-preview.wide .info h2:before                       {display: flex; height: 1.6em; align-items: center; font-size: 0.5em; background: var(--color1b); font-weight: 400; padding: 0 0.7em 0.1em; box-sizing: border-box; border-radius: 0.8em; margin: 0  0 0.5em -0.1em; content: "Fotogalerie";}

  @media screen and (max-width: 540px)                      {

  .gallery-preview.wide .info h2:before                     {position: absolute; left: 0; top: -2.4em;}

  }



.main-gallery                                               {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2em;}

  @media screen and (min-width: 1081px)                     {

  .main-gallery .gallery-preview                            {width: calc(33.33% - 0.8em);}

  }

  @media screen and (min-width: 540px) and (max-width: 1080px){

  .main-gallery .gallery-preview                            {width: calc(50% - 0.6em);}

  }



.gallery-preview.marianske-lazne                            {border-color: var(--marianske-lazne);}

.gallery-preview.chebsky                                    {border-color: var(--chebsky);}

.gallery-preview.karlovarsky                                {border-color: var(--karlovarsky);}

.gallery-preview.plzensky                                   {border-color: var(--plzensky);}

.gallery-preview.chotesovsky                                {border-color: var(--chotesovsky);}

.gallery-preview.kozel                                      {border-color: var(--kozel);}

.gallery-preview.presticky                                  {border-color: var(--presticky);}

.gallery-preview.rakovnicky                                 {border-color: var(--rakovnicky);}

.gallery-preview.svatomartinsky-kost-plzen                  {border-color: var(--svatomartinsky-kost-plzen);}

.gallery-preview.svatomartinske-slavnosti-podebrady         {border-color: var(--svatomartinske-slavnosti-podebrady);}

.gallery-preview.pisecky                                    {border-color: var(--pisecky);}

.gallery-preview.podebradsky                                {border-color: var(--podebradsky);}

.gallery-preview.cerveny-hradek                             {border-color: var(--cerveny-hradek);}

.gallery-preview.kdyne                                      {border-color: var(--kdyne);}

.gallery-preview.strakonice                                 {border-color: var(--strakonice);}

.gallery-preview.teplice                                    {border-color: var(--teplice);}

.gallery-preview.ricansky                                   {border-color: var(--ricansky);}

.gallery-preview.chomutovsky                                {border-color: var(--chomutovsky);}

.gallery-preview.domazlicky                                 {border-color: var(--domazlicky);}

.gallery-preview.mostecky                                   {border-color: var(--mostecky);}

.gallery-preview.stankovsky                                 {border-color: var(--stankovsky);}

.gallery-preview.ostrovsky                                  {border-color: var(--ostrovsky);}

.gallery-preview.frantiskovy-lazne                          {border-color: var(--frantiskovy-lazne);}

.gallery-preview.stribrsky                                  {border-color: var(--stribrsky);}

.gallery-preview.rokycansky                                 {border-color: var(--rokycansky);}

.gallery-preview.tachovsky                                  {border-color: var(--tachovsky);}

.gallery-preview.belol                                      {border-color: #000;}



.growers                                      {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}

.growers > div                                {display: flex; width: 47%; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6%;}

.growers > div > a                            {display: block; width: 25%;}

.growers > div > a img                        {display: block; width: 100%;}

.growers > div > div                          {display: block; width: calc(75% - 1.5em); padding-left: 1.5em; border-left: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;}

.growers > div > div h2                       {font-size: 1.6em; margin: 0 0 0.5em;}

.growers > div > div p                        {text-align: left; font-size: 0.8em;}

.growers > div > div p a                      {display: flex; align-items: center; font-weight: 600; padding: 0; border: none; margin-top: 1em;}

.growers > div > div p a img                  {display: block; width: 0.4em; margin-left: 0.5em;}

  @media screen and (max-width: 960px)        {

  .growers > div                              {width: 100%;}

  .growers > div > a                          {width: 6em;} 

  .growers > div > div                        {width: calc(100% - 7.5em); margin-bottom: 1em;}

  }

  @media screen and (max-width: 380px)        {

  .growers > div > a                          {width: 5em;} 

  .growers > div > div                        {width: calc(100% - 6.5em); margin-bottom: 1.5em}

  .growers > div > div p                      {font-size: 0.9em;}

  }



.files                                            {display: block; width: 100%; font-size: 0.9em; overflow-x: auto;}

.files table                                      {width: 100%;}

.files table td                                   {padding: 0.4em;}

.files table tr:not(:last-child) td               {border-bottom: solid 1px rgba(0,0,0,0.2);}

.files table td:nth-child(1)                      {font-weight: 600;}

.files table td:nth-child(2)                      {color: #999999;}

.files table td:nth-child(3)                      {width: 7em; text-align: right;}

.files table td a                                 {display: flex; justify-content: flex-end; align-items: center; gap: 0.3em; color: var(--color1); font-size: 0.92em; font-weight: 600; text-decoration: underline; transition: .25s ease-in-out;}

.files table td a:hover                           {color: var(--color1b); text-decoration-color: transparent;}

.files table td a img                             {display: block; width: 1.1em; height: 1.1em;}

  @media screen and (max-width: 540px)            {

  .files table                                    {min-width: 500px;}

  }



.contacts                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}

.contacts > div                               {display: block; min-width: 25%; margin-bottom: 1.2em;}

.contacts > div h2                            {margin: -0.2em 0 0.2em;}

.contacts > div ul                            {display: block; width: 100%; padding: 0;}

.contacts > div ul li                         {padding: 0; margin: 0;}

.contacts > div ul li:before                  {display: none;}

.contacts > p                                 {text-align: left; font-size: 0.85em; color: #666666;}

  @media screen and (max-width: 960px)        {

  .contacts > *                               {width: 50%;}

  }

  @media screen and (min-width: 640px) and (max-width: 768px){

  .contacts                                   {font-size: 0.9em;}

  }

  @media screen and (max-width: 640px)        {

  .contacts                                   {font-size: 1em;}

  .contacts > *                               {width: 100%;}

  }



.form                                             {display: block; width: 100%; margin-top: 4em;}

.form > div                                       {display: flex; width: 100%; flex-wrap: wrap; position: relative; background: rgba(0,0,0,0.05); border: solid 1px rgba(0,0,0,0.05);}

.form > div > div                                 {display: block; padding: 1em 2em; box-sizing: border-box;}

.form > div > div:nth-of-type(1)                  {width: 30%; border-right: solid 1px rgba(0,0,0,0.1);}

.form > div > div:nth-of-type(2)                  {width: 70%;}

.form > div > div input,

.form > div > div textarea                        {display: block; width: 100%; font-size: 1em; font-weight: 400; color: black; padding: 1.5em 0; background: none; border: none; outline: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}

.form > div > div input                           {border-bottom: solid 1px rgba(0,0,0,0.1);}

.form > div > div textarea                        {height: calc(100% - 6em); padding: 0; margin-top: 1.5em;}

.form > div > div input::placeholder,

.form > div > div textarea::placeholder           {color: #666666; font-weight: 400;}

.form > div > div.send                            {display: flex; width: 70%; justify-content: flex-end; align-items: center; flex-wrap: nowrap; position: absolute; right: 0; bottom: 0; padding: 2em; box-sizing: border-box;}

.form > div > div.send .link-arrow                {font-weight: 500;}

  @media screen and (min-width: 1080px)           {

  .form .inputs > div:last-of-type input          {border-bottom: none;}

  }

  @media screen and (max-width: 1080px)           {

  .form > div > div                               {display: flex; flex-wrap: wrap; padding: 1em;}

  .form > div > div:nth-of-type(1)                {width: 100%; border-bottom: solid 1px rgba(0,0,0,0.1); border-right: none;}

  .form > div > div:nth-of-type(2)                {width: 100%;}

  .form > div > div > div                         {width: 33.33%; border-right: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;}

  .form > div > div > div:last-of-type            {border: none;}

  .form > div > div input,

  .form > div > div textarea                      {padding: 0.5em 1em;}

  .form > div > div input                         {border-bottom: none;}

  .form > div > div textarea                      {height: 10em; padding-top: 0; padding-bottom: 0; margin-top: 1em;}

  .form > div > div.send                          {width: 100%; position: relative; bottom: auto; right: auto;}

  }

  @media screen and (max-width: 640px)            {

  .form > div > div:nth-of-type(1)                {border: none;}

  .form > div > div > div                         {width: 100%; border-right: none;}

  .form > div > div > div input                   {border-bottom: solid 1px rgba(0,0,0,0.1); padding: 1em;}

  .form > div > div textarea                      {margin-top: 0;}

  }