.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; }

/*------------------------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; }

.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-disabled                         {opacity: 0 !important;}
/*------------------------------------------------------*/

.nobefore:before   { background-image:none !important; }


html                                            {background: #d3dce4;}
html, body                                      {width: 100%; overflow-x: hidden;}
body                                            {display: block; width: 100%; max-width: 2000px; min-height: 100vh; background: #EBEFF3; font-family: 'Roboto', sans-serif; font-weight: 400; margin: 0 auto; overflow-x: hidden; box-sizing: border-box; transition: .2s ease-in-out;}
body.fixed                                      {height: 100vh; overflow: hidden;}
body.blur main,
body.blur .header,
body.blur .footer                               {filter: blur(0.1rem);}               
body > form                                     {display: flex; min-height: 100vh; flex-direction: column; align-items: flex-start; align-content: space-between; flex-wrap: wrap;}
  @media screen and (min-width: 2001px)         {
  body                                          {font-size: 18px;}
  }
  @media screen and (max-width: 2000px)         {
  body                                          {font-size: 17px;}
  }
  @media screen and (max-width: 1600px)         {
  body                                          {font-size: 16px;}
  }  
  @media screen and (max-width: 960px)          {
  body                                          {font-size: 16px;}
  }
  @media screen and (max-width: 768px)          {
  body                                          {font-size: 15px;}
  }

:root                                           {
                                                --color1: #C70102;
                                                --color2: #056DC3;  
                                                --color3: #72B739;
                                                --color4: #8d9aa8;
                                                --color5: #152b41;
                                                --color1-hover: #9e0909;
                                                --color2-hover: #0d5b9b;  
                                                --color3-hover: #59942a;
                                                --border-radius: 0.4rem;
                                                --margin-top: 1.2rem;
                                                }

.wrapper                                        {display: flex; margin-left: auto; margin-right: auto; box-sizing: border-box; flex-wrap: wrap; position: relative; z-index: 5;}
  @media screen and (min-width: 1081px)         {
  .wrapper                                      {width: 86%; max-width: 74rem;}
  .wrapper.w2                                   {width: 80%; max-width: 68rem;}
  }
  @media screen and (max-width: 1080px)         {
  .wrapper                                      {width: 90%; max-width: 56rem;}
  }

.header                                             {display: block; width: 100%; background: #252525; box-sizing: border-box; position: relative; z-index: 10000; flex-grow: 0;}
.header .wrapper                                    {height: 100%; justify-content: space-between; align-items: center; align-content: center;}
.header .logo                                       {display: block; position: relative; z-index: 5;}
.header .logo img                                   {display: block; width: 100%;}
.header .menu                                       {display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;} 
.header nav                                         {display: flex; align-items: center; flex-wrap: wrap;}
.header nav > ul                                    {display: flex; align-items: center; flex-wrap: wrap;}
.header nav > ul > li                               {display: flex; justify-content: center; flex-wrap: wrap; position: relative;}
.header nav > ul > li > a                           {display: flex; align-items: center; font-size: 1em; color: white; font-weight: 400; cursor: pointer; transition: .2s ease-in-out;}
.header nav > ul.nav1 li:nth-child(1)               {margin-right: 3px;}
.header nav > ul.nav1 li a                          {background: #141414; padding: 0.8em 1.5em;}
.header nav > ul.nav1 li a:hover                    {background: black;}
.header nav > ul.nav1 li a:focus                    {outline: solid 2px white;}
.header nav > ul.nav1 li:nth-child(1) a             {border-radius: 0.5em 0 0 0.5em;}
.header nav > ul.nav1 li:nth-child(2) a             {border-radius: 0 0.5em 0.5em 0;}
.header nav > ul.nav1 li:nth-child(1) a.sel         {background: var(--color2);}
.header nav > ul.nav1 li:nth-child(2) a.sel         {background: var(--color3);}
.header nav > ul.nav2 li a:hover                    {background: #141414;}
.header nav > ul.nav2 li a.sel                      {background: var(--color1);}
.header .icon-search                                {display: block; width: 2em; height: 2em; background: #f2f2f2; border-radius: 0.4em; padding: 0.5em; position: absolute; top: calc(50% - 1em); box-sizing: border-box; cursor: pointer; transition: .2s ease-in-out;}
.header .icon-search svg                            {display: block; width: 100%; height: 100%; fill: #252525; transition: .2s ease-in-out;}
.header .icon-search:hover                          {background: var(--color1);}
.header .icon-search:hover svg                      {fill: white;}

.header .lang ul                                    {display: flex;}
.header .lang ul li                                 {display: block;}
.header .lang ul li a                               {display: block; font-size: 1em; color: white; padding: 0.4em; border-radius: 0.4em; transition: .2s ease-in-out;}
.header .lang ul li a:hover                         {background: black;}
.header .lang ul li a.sel                           {background: var(--color1); color: white; margin: 0 0.15em;}
.header .lang ul li:first-child a.sel               {margin-left: 0;}
.header .lang ul li:last-child a.sel                {margin-right: 0;}
.header .navicon                                    {display: none;}
  @media screen and (min-width: 1081px)             {
  .header                                           {height: 5.5em;}
  .header .logo                                     {width: 12rem;}
  .header .menu                                     {width: calc(100% - 16rem); height: 100%; font-size: 0.9em;}
  .header nav                                       {height: 100%;}
  .header nav > ul.nav2                             {height: 100%; margin-left: 1.5rem;}
  .header nav > ul.nav2 li                          {height: 100%;} 
  .header nav > ul.nav2 li a                        {height: 100%; padding: 0 1em;}
  .header .icon-search                              {right: 6em;}
  .header .lang                                     {display: flex; height: 100%; align-items: center;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1300px){
  .header .logo                                     {width: 11rem}
  .header .menu                                     {width: calc(100% - 13rem);}
  .header nav > ul.nav1 li a                        {padding: 0.8em 1.3em;}
  .header nav > ul.nav2                             {margin-left: 1.2rem;}
  .header nav > ul.nav2 li a                        {padding: 0 0.8em;}
  .header .icon-search                              {right: 5em;}
  }  
  @media screen and (max-width: 1080px)             {
  .header                                           {height: 4.5em;}
  .header .logo                                     {width: 9rem;}
  .header .icon-search                              {right: 6.5em;}
  .header .navicon                                  {display: block; width: 2em; height: 2em; background: #f2f2f2; border-radius: 0.4em; padding-right: 4.1em; position: absolute; right: 0; top: calc(50% - 1em); z-index: 10002; cursor: pointer;}
  .header .navicon:after                            {display: block; font-size: 1.1em; color: #252525; font-weight: 600; position: absolute; right: 0.5em; top: 0.3em; content: "MENU";}
  .header .navicon span                             {display: block; width: 1.6em; height: 2px; background: #252525; position: absolute; left: 0.5em; transition: .2s ease-in-out;}
  .header .navicon span:nth-child(1)                {top: 0.55em;}
  .header .navicon span:nth-child(2),
  .header .navicon span:nth-child(3)                {top: calc(50% - 1px);}
  .header .navicon span:nth-child(4)                {bottom: 0.55em;}
  .header .menu                                     {width: 100vw; height: 100vh; min-height: 18em; font-size: 1.1em; justify-content: center; position: fixed; background: #252525; padding: 5em 0 3em; left: -200vw; top: 0; box-sizing: border-box; opacity: 0; transform: scale(0.7,0.7); transition: opacity .6s ease-in-out, transform .6s ease-in-out;}
  .header nav                                       {width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start;}
  .header nav > ul                                  {justify-content: center; align-items: flex-start;}
  .header nav > ul.nav2                             {order: 0; width: 100%;}
  .header nav > ul.nav2 > li                        {width: 100%; text-align: center;}
  .header nav > ul.nav2 > li a                      {font-size: 1.1em; padding: 0.5em 0.8em; border-radius: 0.4em;}
  .header nav > ul.nav2 > li a.sel                  {margin: 0.5em 0;}
  .header nav > ul.nav1                             {order: 1; margin: 2em 0;}
  .header nav > ul.nav1 > li a                      {font-size: 0.9em; font-weight: 700;}
  .header .lang                                     {display: flex; width: 100%; justify-content: center;}
  .header.show .navicon span:nth-child(2)           {transform: rotate(45deg);}
  .header.show .navicon span:nth-child(3)           {transform: rotate(-45deg);}
  .header.show .navicon span:nth-child(1), 
  .header.show .navicon span:nth-child(4)           {opacity: 0;}
  .header .navicon:hover span                       {background: var(--color1);}
  .header.show .menu                                {left: 0; transform: scale(1,1); opacity: 1;}
  }

.footer                                             {display: block; width: 100%; background: #252525; padding: 4em 0; flex-grow: 0;}
.footer .wrapper                                    {justify-content: space-between;}
.footer .wrapper .side                              {display: flex; position: relative; flex-wrap: wrap;}
.footer .wrapper .side > div                        {display: block;}
.footer .wrapper .side > div:last-of-type           {margin-right: 0;}
.footer h2                                          {display: block; color: white; font-size: 1.2em; font-weight: 800; margin-bottom: 0.5em; font-family: 'Alegreya Sans', sans-serif;}
.footer h2 a                                        {color: white; text-decoration: underline; text-decoration-color: transparent; transition: .1s ease-in-out;}
.footer h2 a:hover                                  {text-decoration-color: white;}
.footer ul                                          {display: block;}
.footer ul li                                       {display: block; margin-top: 0.25em; padding-left: 1.45em; position: relative; box-sizing: border-box;}
.footer ul li:before                                {display: block; width: 1.1em; height: 1.1em; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0.13em; content: "";}
.footer ul li a                                     {display: inline-block; font-size: 0.9em; color: #d9d9d9; text-decoration: underline; text-decoration-color: transparent; font-weight: 700; transition: .1s ease-in-out;}
.footer ul li a:hover                               {color: white; text-decoration-color: white;}
.footer .menu ul li:before                          {background-image: URL('images/arrow1-right-red.svg');} 
.footer .obcan ul li:before                         {background-image: URL('images/arrow1-right-blue.svg');} 
.footer .turista ul li:before                       {background-image: URL('images/arrow1-right-green.svg');} 
.footer .text                                       {display: block;}
.footer .text p                                     {display: block;}
.footer .text p:nth-of-type(1)                      {color: white; font-size: 1.2em; font-weight: 800; font-family: 'Alegreya Sans', sans-serif;}
.footer .text p:nth-of-type(2)                      {color: #d9d9d9; font-size: 0.8em; font-weight: 400;}
.footer .text p a                                   {display: inline-block; color: white; text-decoration: underline; font-weight: 700; transition: .1s ease-in-out;}
.footer .text p a:hover                             {color: #d9d9d9; text-decoration-color: transparent;}
.footer .soc                                        {display: flex; justify-content: flex-end;}
.footer .soc a                                      {display: block; width: 2.5em; height: 2.5em; background: #141414; padding: 0.5em; margin-left: 0.3em; border-radius: 0.3em; box-sizing: border-box; transition: .2s ease-in-out;}
.footer .soc a svg                                  {display: block; width: 100%; height: 100%; fill: #d9d9d9; transition: .2s ease-in-out;}
.footer .soc a:hover                                {background: black;}
.footer .soc a:hover svg                            {fill: white;}
.footer .soc a:focus                                {outline: solid 2px white;}
.footer .bottom                                     {display: flex; justify-content: flex-end; position: absolute; right: 0; bottom: 0;}
.footer .bottom p                                   {display: block; font-size: 0.75em; color: #d9d9d9;}
.footer .bottom p:first-child                       {padding-right: 0.7em; margin-right: 0.7em; border-right: solid 1px var(--color1);}
.footer .bottom p a                                 {display: inline-block; color: #d9d9d9; transition: .1s ease-in-out;}
.footer .bottom p a:hover                           {color: white;}
  @media screen and (min-width: 1301px)             {
  .footer .wrapper .side > div                      {margin-right: 4em;} 
  } 
  @media screen and (min-width: 1081px) and (max-width: 1300px){
  .footer .wrapper .side > div                      {margin-right: 2em;}
  .footer ul li                                     {font-size: 0.9em;}
  } 
  @media screen and (min-width: 1081px)             {
  .footer .text p                                   {text-align: right;}
  .footer .soc                                      {margin-top: 2em;}
  }
  @media screen and (max-width: 1080px)             {
  .footer .wrapper .side                            {width: 100%; justify-content: space-between; position: relative; padding-bottom: 3em;}
  }
  @media screen and (min-width: 961px) and (max-width: 1080px){
  .footer .turista ul                               {columns: 2; column-gap: 2em;} 
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .footer .soc                                      {position: absolute; right: 0; top: 0;}
  }
  @media screen and (max-width: 540px)              {
  .footer .wrapper .side > div                      {width: 100%; margin-bottom: 2em;}
  .footer ul                                        {display: flex; justify-content: space-between; flex-wrap: wrap;}
  .footer ul li                                     {width: 48%;}
  .footer .soc                                      {margin: 2em 0 -2em;} 
  }


main                                                {display: block; width: 100%; flex-grow: 2;}

.gradient                                       {background: linear-gradient(to right, var(--color0) 0%, var(--color1) 100%);}

.button                                         {display: flex; justify-content: center; align-items: center; padding: 0.9em 1.2em; font-size: 1em; color: white; font-weight: 700; background: none; border: none; outline: none; border-radius: 0.3em; overflow: hidden; position: relative; z-index: 1; cursor: pointer; font-family: 'Roboto', sans-serif; box-shadow: 0 0 0.5rem rgba(0,0,0,0.2); transition: .15s ease-in-out;}
.button:hover                                   {box-shadow: 0 0 0rem rgba(0,0,0,0)}
.button.arrow                                   {padding-right: 2.6em;}
.button.arrow:before                            {display: block; width: 0.8em; height: 0.8em; background: URL('images/arrow2-white-right.svg') no-repeat center center; background-size: contain; position: absolute; right: 1.2em; top: calc(50% - 0.4em); z-index: 3; content: "";}
.button.black                                   {background: #252525;}
.button.black:hover                             {background: black;}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2-hover);}
.button.color3                                  {background: var(--color3);}
.button.color3:hover                            {background: var(--color3-hover);}
.button2                                        {display: flex; justify-content: center; align-items: center; font-size: 1em; color: var(--color4); font-weight: 700; background: none; border: none; position: relative; z-index: 1; cursor: pointer; font-family: 'Roboto', sans-serif; transition: .15s ease-in-out;}
.button2 svg                                    {display: block; width: 0.8em; height: 0.8em; fill: var(--color4); margin-left: 0.3em; transition: .25s ease-in-out;}
.button2:hover                                  {color: var(--color5);}
.button2:hover svg                              {fill: var(--color5);}

.link                                           {display: inline-block; font-size: 1em; color: var(--color1) !important; font-weight: 700; text-decoration: underline; transition: .15s ease-in-out;}
.link:hover                                     {color: var(--color1-hover) !important; text-decoration-color: transparent;}
.obcan .link                                    {color: var(--color2) !important;}
.obcan .link:hover                              {color: var(--color2-hover) !important;}
.turista .link                                  {color: var(--color3) !important;}
.turista .link:hover                            {color: var(--color3-hover) !important;}

.header-bg                                      {position: relative;}
.header-bg:before                               {display: block; width: 100%; height: 1.5em; background: #252525; position: absolute; left: 0; top: -1px; content: "";}
.shadow                                         {position: relative;}
.shadow:after                                   {display: block; width: 100%; height: 0.5em; opacity: 0.4; background: URL('images/shadow.png') no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.5em; content: "";}

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

.section                                        {display: block; width: 100%; position: relative; box-sizing: border-box;}
.section.white                                  {background: white;}
.section .wrapper > h2                          {margin-bottom: 0.5em;}
  @media screen and (min-width: 1081px)         {
  .section                                      {padding: 0 0 3em;}
  .hp .section                                  {padding: 3em 0;}
  }
  @media screen and (max-width: 1080px)         {
  .section                                      {padding: 0 0 calc(5vw + 1em);}
  .hp .section                                  {padding: calc(5vw + 1em) 0;}
  }

.section h1, .section h2, .section h3           {display: block; width: 100%; line-height: 1.1em; color: #252525; font-weight: 800; box-sizing: border-box; margin-bottom: -0.5rem; font-family: 'Alegreya Sans', sans-serif;}
.section h1                                     {font-size: 2.4em; margin-bottom: 0;}
.section h2                                     {font-size: 1.8em; color: var(--color1)}
.section h3                                     {font-size: 1.3em;}
.hp .section h2                                 {color: #252525;}
.obcan .section h2                              {color: var(--color2);}
.turista .section h2                            {color: var(--color3);}
  @media screen and (max-width: 540px)          {
  .section h1                                   {font-size: 2.1em;}
  .section h2                                   {font-size: 1.6em;}
  .section h3                                   {font-size: 1.2em;}
  }

.article                                        {display: block; width: 100%;}
.article h2, .article h3                        {margin-top: var(--margin-top);}
.article p, .article li                         {display: block; width: 100%; text-align: left; font-size: 1em; line-height: 1.4em; color: #252525; font-weight: 400; box-sizing: border-box;}
.article p                                      {margin-top: var(--margin-top);}
.article p.large                                {font-size: 1.3em;}
.article p.date                                 {font-weight: 700; color: var(--color1); margin-top: 0.9em;}
.article strong                                 {font-weight: 700;}
.article em                                     {font-style: italic;}
.article p a, .article li a,
.article td a, label a                          {color: #252525; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.article p a:hover, .article li a:hover,
.article td a:hover, label a:hover              {color: var(--color1); text-decoration-color: transparent;}
.article ol,
.article ul                                     {display: block; padding-left: 1em; margin-top: 1em; box-sizing: border-box;}
.article ul li                                  {padding-left: 0.85em; position: relative;}
.article ul li:before                           {display: block; width: 0.4em; height: 0.4em; background: var(--color1); border-radius: 0.15em; position: absolute; left: 0; top: 0.5em; content: "";}
.article ol                                     {list-style: none; counter-reset: li;}
.article ol > li                                {padding-left: 1.6em; position: relative; margin: 0.2em 0 1em; counter-increment: li;}
.article ol > li::before                        {display: block; width: 1.75em; content: counter(li) "."; font-size: 1em; color: var(--color1); font-weight: 600; position: absolute; left: 0; top: 0;}
.article ol li:first-child,
.article ul li:first-child                      {margin-top: 0;}
.article ol li ul,
.article ul li ul                               {margin: 0.5em 0;}
.article .img                                   {display: block; width: 100%; position: relative; padding-top: 56%; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}
.article .img.no-span                           {padding: 0;}
.article .img.pano                              {padding-top: 28%;}
.article .img span                              {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.article .img img                               {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.article .img:hover img                         {opacity: 0.8;}
.article .highlight                             {display: block; width: 100%; background: #252525; padding: 1.5em 2em; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;}
.article .highlight > *:first-child             {margin-top: 0;}
.article .highlight p                           {text-align: center; font-size: 1em; color: white;}
.article .embed                                 {display: block; width: 100%; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}
.article .embed > *                             {display: block; width: 100%;}
.article table                                  {margin-top: var(--margin-top);}
.article table td                               {padding: 0.4em 1.2em 0.4em 0; border-top: solid 1px rgba(0,0,0,0.15);}
.article table td:last-child                    {padding-right: 0;}
.article table tr:first-child td                {border: none;}

.obcan .article p a, .obcan .article li a,
.obcan .article td a, .obcan .article label a   {text-decoration-color: var(--color2);}
.obcan .article ul li:before                    {background: var(--color2);}
.obcan .article ol > li::before                 {color: var(--color2);}
.obcan .article p a:hover,
.obcan .article li a:hover,
.obcan .article td a:hover,
.obcan .article label a:hover                   {color: var(--color2); text-decoration-color: transparent;}

.turista .article p a, .turista .article li a,
.turista .article td a,
.turista .article label a                       {text-decoration-color: var(--color3);}
.turista .article ul li:before                  {background: var(--color3);}
.turista .article ol > li::before               {color: var(--color3);}
.turista .article p a:hover,
.turista .article li a:hover,
.turista .article td a:hover,
.turista .article label a:hover                 {color: var(--color3); text-decoration-color: transparent;}

  @media screen and (min-width: 441px)          {
  .section ul.cols.c2                           {column-count: 2; column-gap: 1.2em;}
  }

.swiper-button-prev,
.swiper-button-next                             {display: block; width: 1.6rem; height: 1.6rem; position: absolute; z-index: 5; margin: 0; cursor: pointer;}                                  
.swiper-button-prev                             {left: -0.8rem; right: auto;}
.swiper-button-next                             {right: -0.8rem; left: auto;}                
.swiper-button-prev svg,
.swiper-button-next svg                         {display: block; width: 100%; height: 100%; fill: #252525; border-radius: 0.2em; overflow: hidden; transition: .2s ease-in-out;}
.swiper-button-prev:hover svg,
.swiper-button-next:hover svg                   {fill: var(--color1);}
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none; display: block; width: 80%; height: 80%; background: white; position: absolute; left: 10%; top: 10%; z-index: -1; content: "";}
.swiper-button-disabled                         {opacity: 0 !important;}
.swiper-button-prev,
.swiper-button-next                             {top: calc(50% - 1.2rem);}   

.gallery                                        {display: block; width: 100%; margin-top: var(--margin-top); position: relative;}
.gallery .slider                                {display: block; width: 100%; overflow: hidden;}
.gallery .swiper-slide                          {display: block; position: relative; box-sizing: border-box; border-radius: var(--border-radius); overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.gallery .swiper-slide > a                      {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.gallery .swiper-slide > a:after                {display: block; width: 100%; height: 100%; border: solid 3px var(--color1); box-sizing: border-box; position: absolute; left: 0; top: 0; content: ""; opacity: 0; transition: .25s ease-in-out;}
.gallery .swiper-slide > a img                  {display: block; width: 100%; transition: .25s ease-in-out;}
.gallery .swiper-slide:hover a:after            {opacity: 1;}
.gallery .swiper-slide:hover a img              {opacity: 0.8;}
.gallery .swiper-button-prev,
.gallery .swiper-button-next                    {top: calc(50% - 1em);}                                  
.obcan .gallery .swiper-slide > a:after         {border-color: var(--color2);}
.turista .gallery .swiper-slide > a:after       {border-color: var(--color3);}
  @media screen and (min-width: 1081px)         {
  .gallery .swiper-slide                        {padding-top: 19%;}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .gallery .swiper-slide                        {padding-top: 33%;}
  }
  @media screen and (max-width: 540px)          {
  .gallery .swiper-slide                        {padding-top: 66%;}
  }

.more                                           {display: flex; justify-content: flex-end;}
.more .button                                   {font-size: 0.8em;}
  @media screen and (min-width: 1081px)         {
  .more                                         {position: absolute; right: 4.5%; top: -3.5em;}
  }
  @media screen and (max-width: 1080px)         {
  .more                                         {width: 100%; margin-top: 1em;}
  }

.box                                            {display: flex; flex-wrap: wrap; background: white; padding: 1.5em; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; position: relative;}
.box:after                                      {display: block; width: 100%; height: 0.5em; opacity: 0.4; background: URL('images/shadow.png') no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.5em; content: "";}

.flex                                           {display: flex; width: 100%; flex-wrap: wrap;}
.flex.center                                    {justify-content: center;}
.flex.end                                       {justify-content: flex-end;}

.div-aside                                      {display: block; width: 100%;}
.div-aside .wrapper                             {justify-content: space-between;}
.div-aside .wrapper > div                       {display: block;}
.div-aside .wrapper > aside                     {display: block;}
.div-aside .wrapper > aside h2                  {font-size: 1.8em; color: #252525; margin: 1em 0 0.3em;}
.div-aside .wrapper > aside .box h2             {margin: 0 0 -0.3em;}
.div-aside .wrapper > aside > *:first-child     {margin-top: 0;}
.div-aside .wrapper > aside .flex               {margin-top: 0.8em;}
  @media screen and (min-width: 1081px)         {
  .div-aside .wrapper > div                     {width: 66%;}
  .div-aside .wrapper > aside                   {width: 30%; margin-top: 0.2em;}
  }
  @media screen and (max-width: 1080px)         {
  .div-aside .wrapper > div                     {width: 100%;}
  .div-aside .wrapper > aside                   {width: 100%; margin-top: 3em;}
  }

.grid                                           {display: flex; width: 100%; flex-wrap: wrap; margin: 0;}
.grid > div                                     {display: block;}
.grid > div .img                                {display: block; width: 100%; padding-top: 40%; border-radius: var(--border-radius); overflow: hidden; position: relative; margin: 0;}
.grid > div .img span                           {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.grid > div .img span img                       {display: block; width: 100%; transition: .25s ease-in-out;}
.grid > div .img:hover span img                 {opacity: 0.8;}
.grid > div p                                   {font-size: 1.4em; font-weight: 800; line-height: 1.1em; margin-top: 0.5em; font-family: 'Alegreya Sans', sans-serif;}
.grid > div p a                                 {display: inline-block; color: #252525; text-decoration: underline; text-decoration-color: transparent !important; transition: .25s ease-in-out;}
.grid > div p a:hover                           {color: black; text-decoration-color: black !important;}
.grid > div ul                                  {padding: 0; margin-top: 0.3em;}
.grid > div ul li                               {padding-left: 1.1em;}
.grid > div ul li:before                        {width: 0.8em; height: 0.8em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; background-color: transparent !important; top: 0.26em;}
.grid > div ul li a                             {text-decoration-color: transparent !important;}
.grid > div ul li a:hover                       {text-decoration-color: #252525 !important;}
.grid > ul                                      {display: flex; width: 100%; flex-wrap: wrap; padding: 0; font-size: 0.4em;}
.grid > ul > li                                 {padding: 0;}
.grid > ul > li:before                          {display: none;}
.grid > ul > li a                               {display: flex; width: 100%; min-height: 100%; align-items: center; flex-wrap: wrap; color: #252525; font-weight: 700; font-size: 2.3em; line-height: 1.2em; font-weight: 600; text-decoration: none; background: white; padding: 0.9em 2.5em 0.9em 0.9em; position: relative; border: solid 1px rgba(0,0,0,0.15); box-sizing: border-box; transition: .25s ease-in-out;}
.grid > ul > li a svg                           {display: block; width: 0.8em; height: 0.8em; position: absolute; right: 1em; top: calc(50% - 0.4em); transition: .25s ease-in-out;}
.grid > ul > li a:hover                         {color: var(--color1); border-color: var(--color1);}
.grid > ul > li a:hover svg                     {fill: var(--color1);}
.obcan .grid > div ul li:before                 {background-image: URL('images/arrow2-blue-right.svg');}
.obcan .grid ul li a:hover                      {color: var(--color2); border-color: var(--color2);}
.obcan .grid ul li a:hover svg                  {fill: var(--color2);}
.turista .grid > div ul li:before               {background-image: URL('images/arrow2-green-right.svg');}
.turista .grid ul li a:hover                    {color: var(--color3); border-color: var(--color3);}
.turista .grid ul li a:hover svg                {fill: var(--color3);}
.grid.gallery > div .img                        {padding-top: 60%;}
  @media screen and (min-width: 769px)          {
  .grid > div,
  .grid > ul > li                               {width: calc(33.33% - 0.8em); margin: 1.8em 1.2em 0 0;}
  .grid > div:nth-of-type(-n+3),
  .grid > ul > li:nth-of-type(-n+3)             {margin-top: 0;}
  .grid > div:nth-of-type(3n+3),
  .grid > ul > li:nth-of-type(3n+3)             {margin-right: 0;}
  }
  @media screen and (min-width: 441px) and (max-width: 768px){
  .grid > div,
  .grid > ul > li                               {width: calc(50% - 0.6em); margin: 1.8em 1.2em 0 0;}
  .grid > div:nth-of-type(-n+2),
  .grid > ul > li:nth-of-type(-n+2)             {margin-top: 0;}
  .grid > div:nth-of-type(even),
  .grid > ul > li:nth-of-type(even)             {margin-right: 0;}
  }
  @media screen and (max-width: 440px)          {
  .grid > div,
  .grid > ul > li                               {width: 100%; margin: 1.5em 0 0 0;}
  .grid > div:nth-of-type(1),
  .grid > ul > li:nth-of-type(1)                {margin-top: 0;}
  }

.files                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: var(--margin-top);}
.files > div                                    {display: flex; width: 100%; min-height: 4em; font-size: 0.9em; align-items: center; align-content: center; flex-wrap: wrap; padding: 0.7em 0.7em 0.7em 3.2em; position: relative; margin-top: 0.4em; box-sizing: border-box;}
.files > div:first-child                        {margin-top: 0;}
.files > div svg                                {display: block; width: 1.5em; height: auto; fill: var(--color1); position: absolute; left: 1em; top: 1em;}
.files > div p                                  {margin: 0;}
.files > div p a                                {font-size: 1em; line-height: 1em !important; font-weight: 700; text-decoration: none;}
.files > div p span                             {display: block; font-size: 0.8em; margin-top: -0.15em;}
  @media screen and (min-width: 769px)          {
  .files.c2 > div                               {width: calc(50% - 0.2em);}
  }


.obcan .files > div svg                         {fill: var(--color2);}
.turista .files > div svg                       {fill: var(--color3);}

.search-bar                                     {display: block; width: 100%; position: relative;}
.search-bar input                               {display: block; width: 100%; height: 3em; font-size: 0.9em; font-weight: 600; color: #252525; background: rgba(255,255,255,0.9); padding: 0 7.2em 0 0.7em; border: solid 2px transparent; border-radius: 0.3em; outline: none; box-sizing: border-box; font-family: 'Roboto', sans-serif; transition: .2s ease-in-out;}
.search-bar input:focus                         {border-color: var(--color1);}
.search-bar input::placeholder                  {color: #666666; font-weight: 400;}
.search-bar input:-ms-input-placeholder         {color: #666666; font-weight: 400;}     
.search-bar input::-ms-input-placeholder        {color: #666666; font-weight: 400;}
.search-bar button                              {display: flex; width: 6.5em; height: calc(100% - 0.4em); justify-content: center; align-items: center; font-size: 0.9em; color: white; font-weight: 400; background: var(--color1); border-radius: 0.25em; border: solid 2px transparent; outline: none; position: absolute; right: 0.2em; top: 0.2em; cursor: pointer; font-family: 'Roboto', sans-serif; transition: .2s ease-in-out;}
.search-bar button svg                          {display: block; width: 1em; height: 1em; fill: white; margin-right: 0.5em;}
.search-bar button:hover                        {background: var(--color1-hover);}
.search-bar button:focus                        {outline: solid 2px #252525;}

.search                                         {display: block; width: 100%; height: 100%; background-color: transparent; position: fixed; left: -9999px; top: 0; z-index: 50000; overflow-y: auto; transition: background-color .2s ease-in-out;}
.search > div                                   {display: flex; width: 100%; min-height: 100%; justify-content: center; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; padding: calc(5vw + 3em) 2em 2em; box-sizing: border-box; margin: -4em 0 4em; opacity: 0; transition: .2s ease-in-out;;}
.search > div > p                               {display: block; width: 100%; text-align: center; font-size: 2em; color: white; font-weight: 800; margin: 0 0 0.5em; font-family: 'Alegreya Sans', sans-serif;}
.search > div > div                             {display: block; width: 90%; max-width: 600px; border-radius: var(--border-radius); box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);}
.search .search-bar                             {font-size: 1.1em;}
.search .search-bar input                       {background: white;}
.search .whisperer                              {display: none; width: 100%; background: white; padding: 1em; border-radius: var(--border-radius); margin-top: 3px; box-sizing: border-box;}
.search .whisperer > p                          {display: block; width: 100%; font-size: 0.8em; color: #666666;}
.search .close                                  {display: block; width: 2.4em; height: 2.4em; background: #f2f2f2; border-radius: 100%; position: absolute; right: 2em; top: 2em; z-index: 1; cursor: pointer; transition: .2s ease-in-out;}
.search .close span                             {display: block; width: 60%; height: 4px; background: #252525; position: absolute; left: 20%; top: calc(50% - 2px); transition: .2s ease-in-out;}
.search .close span:nth-child(1)                {transform: rotate(45deg);}
.search .close span:nth-child(2)                {transform: rotate(-45deg);}
.search .close:hover                            {background: var(--color1);}
.search .close:hover span                       {background: white;}
.search.show                                    {left: 0; background-color: rgba(0,0,0,0.7);}
.search.show > div                              {margin: 0; opacity: 1;}

.breadcrumbs                                    {display: block; width: 100%; margin: 1.5em 0;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; padding-bottom: 0.5em;}
.breadcrumbs ul li                              {display: flex; align-items: center;}
.breadcrumbs ul li:before                       {display: inline-block; width: 1em; height: 2px; margin: 0 0.5em; background: var(--color4); content: "";}
.breadcrumbs ul li:first-child:before           {display: none;}
.breadcrumbs ul li a                            {display: block; color: var(--color5); text-decoration: underline; font-weight: 400; line-height: 1.5em; transition: .25s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; font-weight: 700;}
.breadcrumbs ul li a[href]:hover                {color: var(--color4); text-decoration-color: transparent;}
  @media screen and (max-width: 768px)          {  
  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none; margin: 1em 0;}
  .breadcrumbs::-webkit-scrollbar               {display: none;}
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs a                                {white-space: nowrap;}
  } 

.pagination                                     {display: block; width: 100%; margin-top: 3em;}
.pagination > div                               {display: flex; flex-wrap: wrap; position: relative; box-sizing: border-box;}
.pagination a                                   {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; text-align: center; font-size: 1em; color: white; font-weight: 700; background: var(--color5); margin: 0.1em; border-radius: var(--border-radius); transition: .2s ease-in-out;}
.pagination a:hover                             {background: var(--color4);}
.pagination a.sel                               {background: var(--color1);}
.pagination a img                               {display: block; width: 35%; transition: .2s ease-in-out;}
.obcan .pagination a.sel                        {background: var(--color2);}
.turista .pagination a.sel                      {background: var(--color3);}

.filters                                        {display: block; width: 100%; flex-wrap: wrap; margin-top: 0.5em;}
.filters > div                                  {display: none; width: 100%; flex-wrap: wrap; padding: 0.6em 0; border-top: solid 1px rgba(0,0,0,0.15);}
.filters > div:nth-of-type(1)                   {display: block; border-top: none;}
.filters > div.show                             {display: block;}
.filters > div > div                            {display: flex; width: 100%; flex-wrap: wrap;}
.filters > div > div a                          {display: block; font-size: 1.1em; color: var(--color5); font-weight: 700; margin: 0.15em 1em 0.2em 0; cursor: pointer; transition: .25s ease-in-out;}
.filters > div > div a:hover                    {color: var(--color4);}
.filters > div > div a.sel                      {color: var(--color1);}
.filters > div:nth-of-type(1) > div a           {background: var(--color5); color: white; font-size: 1em; padding: 0.4em 0.7em; border-radius: 1em; margin: 0.15em 0.3em 0.15em 0;} 
.filters > div:nth-of-type(1) > div a.sel       {background: var(--color1); color: white;}
.filters > div:nth-of-type(1) > div a:hover     {background: var(--color4);}
.obcan .filters > div > div a.sel               {color: var(--color2);}
.obcan .filters > div:nth-of-type(1) > div a.sel{background: var(--color2); color: white;}
.turista .filters > div > div a.sel             {color: var(--color3);}
.turista .filters > div:nth-of-type(1) > div a.sel
                                                {background: var(--color3); color: white;}

.content                                        {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}

.submenu                                        {display: block; width: 100%;}
.submenu ul                                     {display: flex; width: 100%; position: relative; border-radius: var(--border-radius); overflow: hidden;}
.submenu ul li                                  {display: flex; flex-grow: 1; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.submenu ul li a                                {display: flex; width: 100%; color: white; font-weight: 700; align-items: center; flex-wrap: wrap; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.obcan .submenu ul                              {background: var(--color2);}
.obcan .submenu ul li a:hover,
.obcan .submenu ul li.sel a                     {background: var(--color2-hover);}
.turista .submenu ul                            {background: var(--color3);}
.turista .submenu ul li a:hover,
.turista .submenu ul li.sel a                   {background: var(--color3-hover);}
  @media screen and (min-width: 961px)          {  
  .submenu ul li                                {border-right: solid 1px rgba(0,0,0,0.15);}
  .submenu ul li:last-child                     {border-right: none;}
  .submenu ul li a                              {justify-content: center; text-align: center; padding: 0.9em 1.2em 1.1em;}  
  .submenu ul li.responsive                     {display: none;}
  }
  @media screen and (min-width: 961px) and (max-width: 1200px){  
  .submenu ul li a                              {font-size: 0.9em;}  
  }  
  @media screen and (max-width: 960px)          {  
  .submenu ul                                   {flex-wrap: wrap;}
  .submenu ul li                                {width: 100%; order: 1;}
  .submenu ul li.responsive                     {display: flex; width: 100%; height: 3em; align-items: center; font-weight: 600; color: white; font-weight: 600; padding: 0 1em; order: 0; z-index: 2; box-sizing: border-box; cursor: pointer;}
  .submenu ul li.responsive:after               {display: block; width: 3em; height: 3em; background: URL('images/arrow2-white-right.svg') no-repeat center center; background-size: 30%; position: absolute; right: 0; top: 0; z-index: 2; content: ""; transition: .2s ease-in-out;} 
  .submenu ul li a                              {height: 0; padding: 0 3em 0 1em; overflow: hidden;}
  .submenu.show ul li a                         {height: 3em;}
  .submenu.show .responsive:after               {transform: rotate(90deg);}
  }
  @media screen and (min-width: 441px) and (max-width: 960px){  
  .submenu                                      {font-size: 1.1em;}
  }
  @media screen and (max-width: 440px)          {  
  .submenu                                      {font-size: 1em;}
  }  

.submenu2                                       {padding-bottom: 45%;}
.submenu2:before                                {display: block; width: 100%; padding-top: 40%; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; left: 0; bottom: 0; content: "";}
.submenu2 > ul                                  {display: flex; width: 100%; flex-wrap: wrap; position: relative; margin-top: var(--margin-top);}
.submenu2 > ul > li                             {display: block; width: 100%; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.submenu2 > ul > li a                           {display: inline-block; line-height: 1.2em; color: #252525; font-weight: 700; text-decoration: underline; text-decoration-color: transparent; padding: 0.2em 0; border: none; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.submenu2 > ul > li a.sel                       {color: var(--color1); font-weight: 700; text-decoration: none;}
.submenu2 > ul > li > a                         {font-size: 1.05em; padding-left: 1.45em;}
.submenu2 > ul > li:first-child > a:after       {display: none;}
.submenu2 > ul > li > a:before                  {display: block; width: 1.05em; height: 1.05em; background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; left: 0; top: 0.25em; content: "";}
.submenu2 > ul > li a:hover                     {text-decoration-color: #252525;}
.submenu2 > ul > li > ul                        {padding-left: 1.65em; margin: 0.35em 0 0.25em; box-sizing: border-box;}
.submenu2 > ul > li > ul li                     {font-size: 0.95em; padding-left: 1.1em; position: relative;}
.submenu2 > ul > li > ul li:before              {display: block; width: 0.8em; height: 0.8em; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; background-color: transparent; position: absolute; left: 0; top: 0.18em; content: "";}
.submenu2 > ul > li > ul > li > a               {font-weight: 400; padding-top: 0; padding-bottom: 0.4em;}
.obcan .submenu2:before                         {background-image: URL('images/img-obcan.png');}
.obcan .submenu2 h2                             {color: var(--color2);}
.obcan .submenu2 > ul > li > a:before           {background-image: URL('images/arrow1-right-blue.svg');}
.obcan .submenu2 > ul > li ul li:before         {background-image: URL('images/arrow2-blue-right.svg');}
.obcan .submenu2 > ul > li a.sel                {color: var(--color2);}
.turista .submenu2:before                       {background-image: URL('images/img-turista.png');}
.turista .submenu2 h2                           {color: var(--color3);}
.turista .submenu2 > ul > li > a:before         {background-image: URL('images/arrow1-right-green.svg');}
.turista .submenu2 > ul > li ul li:before       {background-image: URL('images/arrow2-green-right.svg');}
.turista .submenu2 > ul > li a.sel              {color: var(--color3);}
  @media screen and (max-width: 1080px)         {  
  .submenu2                                     {display: none;}
  }


.top                                            {padding: 0 !important;}
.top .wrapper > div                             {display: block; width: 100%; background: URL('images/top.jpg') no-repeat center center; background-size: cover; padding: 6em 2em; border-radius: var(--border-radius); box-sizing: border-box;}
.top h1                                         {text-align: center; font-size: 2.8em; color: white; text-shadow: 0 0 0.4em rgba(0,0,0,0.5), 0 0 0.6em rgba(0,0,0,0.7), 0 0 0.8em rgba(0,0,0,0.7);}
.top h1 span                                    {display: block; font-size: 0.9em; font-weight: 500;}
.top .search-bar                                {max-width: 24em; margin: 1em auto 0; box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);}
  @media screen and (max-width: 1080px)         {
  .top h1                                       {font-size: 2.4em;}
  }
  @media screen and (max-width: 540px)          {  
  .top .wrapper > div                           {padding: 5em 2em;}
  .top h1                                       {font-size: 2em;}
  }

.targets                                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.targets .box h3                                {display: flex; width: 100%; height: 4rem; align-items: center; color: white; padding: 0 2rem; border-radius: var(--border-radius); position: absolute; left: 0; top: 0;}
.targets .box:before                            {display: block; height: 8em; background-repeat: no-repeat; background-size: contain; background-position: center bottom; position: absolute; z-index: 5; content: "";}
.targets .box ul                                {display: block; width: 100%;}
.targets .box ul li                             {display: block; font-size: 1.15em; line-height: 1.1em; margin-top: 0.3em; padding-left: 1.45em; position: relative; box-sizing: border-box;}
.targets .box ul li:before                      {display: block; width: 1.1em; height: 1.1em; background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; content: "";}
.targets .box ul li a                           {display: inline-block; font-size: 0.9em; color: #252525; text-decoration: underline; text-decoration-color: transparent; font-weight: 700; transition: .1s ease-in-out;}
.targets .box ul li a:hover                     {color: black; text-decoration-color: black;}
.targets .box.obcan h3                          {background: var(--color2);}
.targets .box.obcan:before                      {background-image: URL('images/img-obcan.png');}
.targets .box.obcan ul li:before                {background-image: URL('images/arrow1-right-blue.svg');} 
.targets .box.turista h3                        {background: var(--color3);}
.targets .box.turista:before                    {background-image: URL('images/img-turista.png');}
.targets .box.turista ul li:before              {background-image: URL('images/arrow1-right-green.svg');} 
  @media screen and (min-width: 1200px)         {
  .targets .box ul                              {column-count: 2; column-gap: 1em;}
  }
  @media screen and (min-width: 641px)          {
  .targets .box                                 {width: 49%; padding: 5rem 2rem 2rem;}
  .targets .box:before                          {width: 16em; right: 2rem; bottom: calc(100% - 4rem);}
  }
  @media screen and (min-width: 725px) and (max-width: 960px){
  .targets .box:before                          {width: 13em; right: 1rem;}
  }
  @media screen and (max-width: 724px)          {
  .targets .box                                 {padding: 4rem 1.5rem 11em;}
  .targets .box:before                          {width: 100%; height: 9em; left: 0; bottom: 0;}
  .targets .box h3                              {height: 3.5rem; padding: 0 1.5rem;}
  }
  @media screen and (max-width: 640px)          {
  .targets .box                                 {width: 100%;}
  .targets .box:nth-child(2)                    {margin-top: 1.5em;}
  }

.preview                                        {display: flex; flex-wrap: wrap; margin-bottom: 3em; position: relative; box-sizing: border-box;}
.preview > a                                    {display: block; width: 100%; padding-top: 56%; position: absolute; left: 0; top: 0; order: 0; border-radius: var(--border-radius); overflow: hidden;} 
.preview > a span                               {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.preview > a span img                           {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.preview > a:hover span img                     {opacity: 0.8;}
.preview > div                                  {display: flex; width: 100%; flex-wrap: wrap; font-size: 1em; order: 1; position: relative; box-sizing: border-box;}
.preview > div h2,
.preview > div h3                               {display: block; width: 100%; font-size: 1.4em; line-height: 1.1em; font-weight: 800; order: 1; margin-bottom: 0.35em; font-family: 'Alegreya Sans', sans-serif;}
.preview > div h2 a,
.preview > div h3 a                             {color: #252525; transition: .25s ease-in-out;}
.preview > div h2 a:hover,
.preview > div h3 a:hover                       {color: var(--color1);}
.preview > div .date                            {display: flex; align-items: center; font-size: 0.85em; color: #666666; margin: 0 0 0.5em; order: 0; }
.preview > div .date span                       {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; color: white; font-size: 0.8em; font-weight: 700; background: var(--color1); border-radius: 0.2em; margin: 0 0.65em 0 0;}
.preview > div .flex                            {justify-content: space-between; align-self: flex-end; order: 2;}
.preview > div .flex > *                        {font-size: 0.85em; color: #666666; text-decoration: underline; transition: .2s ease-in-out;}
.preview > div .flex > *:hover                  {text-decoration-color: transparent; color: #252525;}
.preview > div .flex .distance                  {text-decoration: none; font-weight: 700;}
.obcan .preview > div h2 a:hover,
.obcan .preview > div h3 a:hover                {color: var(--color2);}
.turista .preview > div h2 a:hover,
.turista .preview > div h3 a:hover              {color: var(--color3);}
  @media screen and (min-width: 1081px)         {
  .preview                                      {width: calc(33.33% - 0.8em); margin: 1.2em 1.2em 0 0; padding-top: 19.5%;}
  .preview:nth-of-type(-n+3)                    {margin-top: 0;}
  .preview:nth-of-type(3n+3)                    {margin-right: 0;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .preview                                      {width: calc(50% - 0.6em); margin: 1.2em 1.2em 0 0; padding-top: 29.3%;}
  .preview:nth-of-type(-n+2)                    {margin-top: 0;}
  .preview:nth-of-type(even)                    {margin-right: 0;}
  }
  @media screen and (max-width: 640px)          {
  .preview                                      {width: 100%; margin: 1.2em 0 0 0; padding-top: 58%;}
  .preview:nth-of-type(1)                       {margin-top: 0;}
  }
/*
.calendar .content > h2                         {display: block; font-size: 1.6em; font-weight: 700; color: var(--color1); margin: 2em auto 0;}
.calendar .content > h2:first-of-type           {margin: 0 auto 0.7em;}
.calendar .preview                              {padding-top: 1.5rem;}
*/
.calendar .content > h2                         {display: block; font-size: 1.6em; font-weight: 700; color: var(--color1); margin: 1.3em auto 0.5em;}
.calendar .content > h2:first-of-type           {margin-top: 0;}
.calendar .content > div                        {display: flex; width: 100%; flex-wrap: wrap;}
.calendar .preview                              {padding-top: 1.5rem;}

  @media screen and (min-width: 1081px)         {
  .calendar .content > h2                       {width: 91.8%;}
  }
  @media screen and (max-width: 1080px)         {
  .calendar .content > h2                       {width: 100%;}
  }

.calendar-slider                                {width: 100%; padding: 0; background: none; border: none;}
.calendar-slider:after                          {display: none;}
.calendar-slider .swiper-container              {display: block; width: 100%; padding-bottom: 0.6em; border-radius: var(--border-radius); overflow: hidden;}
.calendar-slider .swiper-slide                  {margin: 0 !important; border: none; border-left: solid 1px rgba(0,0,0,0.2); border-top: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; border-radius: 0; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}                              
  @media screen and (min-width: 1081px)         {
  .calendar-slider .swiper-slide                {width: 25%;}
  }
  @media screen and (min-width: 441px) and (max-width: 1080px){
  .calendar-slider .swiper-slide                {width: 50%;}
  }
  @media screen and (max-width: 440px)          {
  .calendar-slider .swiper-slide                {width: 100%;}
  }

aside .calendar                                 {display: flex; width: 100%; flex-wrap: wrap;}
  @media screen and (min-width: 1201px)         {
  aside .calendar .preview                      {width: calc(50% - 0.3em); font-size: 0.85em; margin: 0.6em 0.6em 0 0; padding: 1.2em;}
  aside .calendar .preview:nth-of-type(-n+2)    {margin-top: 0;}
  aside .calendar .preview:nth-of-type(even)    {margin-right: 0;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1200px){
  aside .calendar .preview                      {width: 100%; font-size: 0.85em; margin: 0.6em 0 0 0; padding: 1.2em;}
  aside .calendar .preview:nth-of-type(1)       {margin-top: 0;}
  }
  @media screen and (min-width: 961px) and (max-width: 1080px){
  aside .calendar .preview                      {width: calc(25% - 0.4em); font-size: 0.85em; margin: 0.3em 0.3em 0 0;}
  aside .calendar .preview:nth-of-type(-n+4)    {margin-top: 0;}
  aside .calendar .preview:nth-of-type(4n+4)    {margin-right: 0;}
  }
  @media screen and (min-width: 541px) and (max-width: 960px){
  aside .calendar .preview                      {width: calc(50% - 0.3em); font-size: 0.85em; margin: 0.6em 0.6em 0 0;}
  aside .calendar .preview:nth-of-type(-n+2)    {margin-top: 0;}
  aside .calendar .preview:nth-of-type(even)    {margin-right: 0;}
  }
  @media screen and (max-width: 540px)          {
  aside .calendar .preview                      {width: 100%; margin: 1.2em 0 0 0;}
  aside .calendar .preview:nth-of-type(1)       {margin-top: 0;}
  }

.news                                           {display: flex; width: 100%; flex-wrap: wrap; position: relative; z-index: 5;}
.news .preview.okenko:before                    {display: block; width: 3em; height: 3em; background: URL('images/quotes.svg') no-repeat center center, var(--color1); background-size: 50% auto; border-radius: var(--border-radius); position: absolute; right: 0; top: 0;  z-index: 5; content: "";}
.news .preview.okenko > a                       {display: flex; justify-content: space-between; align-items: center;}
.news .preview.okenko > a span:first-child      {width: 7rem; height: 7rem; left: 2rem; top: calc(50% - 3.5rem); border-radius: 100%; overflow: hidden;}
.news .preview.okenko > a span:last-child       {display: flex; width: calc(100% - 10rem); height: 100%; justify-content: flex-start; align-items: center; font-size: 1.8em; color: var(--color1); line-height: 1em; font-weight: 800; left: 10rem; font-family: 'Alegreya Sans', sans-serif;}
.news .preview.okenko > a:after                 {display: block; width: calc(100% - 3rem); height: 1px; background: black; opacity: 0.2; position: absolute; left: 1.5rem; bottom: 0; content: "";}
  @media screen and (min-width: 1081px)         {
  .hp .news .preview:nth-child(n+4)             {padding: 1em 1em 1em 7em;}
  .hp .news .preview:nth-child(n+4) > a         {width: 6em; height: 100%; padding: 0;}
  .hp .news .preview:nth-child(n+4) > a img     {transform: scale(1.2);}
  .hp .news .preview:nth-child(n+4) > div       {font-size: 0.9em;}
  .hp .news .preview:nth-child(n+4) > div h2,
  .hp .news .preview:nth-child(n+4) > div h3    {font-size: 1.2em;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1300px){
  .news .preview.okenko > a span:first-child    {width: 5rem; height: 5rem; top: calc(50% - 2.5rem);}
  .news .preview.okenko > a span:last-child     {font-size: 1.5em; left: 8rem;}
  }
  @media screen and (min-width: 641px) and (max-width: 768px){
  .news .preview.okenko > a span:first-child    {width: 5rem; height: 5rem; top: calc(50% - 2.5rem);}
  .news .preview.okenko > a span:last-child     {font-size: 1.5em; left: 8rem;}
  }
  @media screen and (max-width: 640px)         {
  .hp .news .preview:nth-child(n+4)             {padding: 1em 1em 1em 7em;}
  .hp .news .preview:nth-child(n+4) > a         {width: 6em; height: 100%; padding: 0;}
  .hp .news .preview:nth-child(n+4) > a img     {transform: scale(1.2);}
  .hp .news .preview:nth-child(n+4) > div       {font-size: 0.9em;}
  .hp .news .preview:nth-child(n+4) > div h2,
  .hp .news .preview:nth-child(n+4) > div h3    {font-size: 1.2em;}
  }
  @media screen and (max-width: 360px)          {
  .news .preview.okenko > a span:first-child    {width: 5rem; height: 5rem; top: calc(50% - 2.5rem);}
  .news .preview.okenko > a span:last-child     {font-size: 1.5em; left: 8rem;}
  }

  @media screen and (min-width: 1081px)         {
  aside .news .preview                          {width: 100%; margin: 0.6em 0 0 0; padding: 1em 1em 1em 7em;}
  aside .news .preview:nth-of-type(1)           {margin-top: 0;}
  aside .news .preview > a                      {width: 6em; height: 100%; padding: 0;}
  aside .news .preview > a img                  {transform: scale(1.2);}
  aside .news .preview > div                    {font-size: 0.9em;}
  aside .news .preview > div h2,
  aside .news .preview > div h3                 {font-size: 1.2em;}
  aside .news .preview.okenko                   {margin-top: 3em;}
  aside .news .preview.okenko:before            {display: block; width: 100%; font-size: 1.1em; color: var(--color1); font-weight: 700; background: none; position: absolute; left: 0; top: -1.8em; content: "Okénko paní starostky";}
  aside .news .preview.okenko > a span:first-child
                                                {width: 5em; height: 5em; left: 1em; top: calc(50% - 2.5em);}
  aside .news .preview.okenko > a span:last-child
                                                {display: none;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  aside .news .preview                          {width: calc(50% - 0.3em); margin: 0.6em 0.6em 0 0;}
  aside .news .preview:nth-of-type(-n+2)        {margin-top: 0;}
  aside .news .preview:nth-of-type(even)        {margin-right: 0;}
  }
  @media screen and (max-width: 640px)          {
  aside .news .preview                          {width: 100%; margin: 1.2em 0 0 0; padding-top: 58%;}
  aside .news .preview:nth-of-type(1)           {margin-top: 0;}
  }

.church .img                                    {display: block;}
.church .stripe                                 {display: block; background: var(--color1); position: absolute;}
.church .icon                                   {display: block; width: 5em; height: 5em; background: var(--color1); padding: 0.9em; border: solid 0.35em white; border-radius: 100%; position: absolute; left: calc(50% - 2.5em); box-sizing: border-box;}
.church .icon svg                               {display: block; width: 100%; height: 100%; fill: white;}
.church h2                                      {margin-top: 0;}
.church p.large                                 {margin-top: 0.6em;}
.church ul                                      {padding: 0;}
.church ul li                                   {font-size: 0.9em;}
.church .links                                  {display: block;}
.church .links strong                           {display: block;}
.church .links a                                {display: inline-block; color: var(--color1); line-height: 0.8em;}
.church .links a:first-of-type                  {padding-right: 0.5em; margin-right: 0.5em; border-right: solid 1px #252525;}
  @media screen and (min-width: 1081px)         {
  .church .img                                  {width: 50%; height: 100%; background: URL('images/musov.jpg') no-repeat left center; background-size: cover; position: absolute; left: 50%; top: 0;}
  .church .stripe                               {width: 1em; height: 100%; position: absolute; left: calc(50% - 0.5em); top: 0;}
  .church .icon                                 {top: calc(50% - 2.5em);}
  .church .article                              {max-width: 42%;}
  }
  @media screen and (max-width: 1080px)         {
  .church                                       {padding-top: 0 !important;}
  .church .img                                  {width: 100%; height: 20em; background: URL('images/musov-mobile.jpg') no-repeat center center; background-size: cover;}
  .church .stripe                               {width: 100%; height: 1em; left: 0; top: ;}
  .church .icon                                 {top: 18em;}
  .church .article                              {padding-top: calc(5vw + 2.5em);}
  }

.brands                                         {display: flex; width: calc(100% + 2em); flex-wrap: wrap; margin-bottom: -2em;}
.brands a                                       {display: block; margin: 0 3em 2em 0; transition: .2s ease-in-out;}
.brands a:hover                                 {opacity: 0.8;}
.brands a:focus                                 {outline: solid 2px #252525;}
.brands a img                                   {display: block; height: 100%;}
  @media screen and (min-width: 769px)          {
  .brands a                                     {height: 4.5em; margin: 0 3em 2em 0;}
  }
  @media screen and (min-width: 441px) and (max-width: 768px)          {
  .brands a                                     {height: 3.8em; margin: 0 2em 2em 0;}
  }
  @media screen and (max-width: 440px)          {
  .brands a                                     {height: 3.2em; margin: 0 1.5em 1.5em 0;}
  }

.img-map:after                                  {display: block; width: 25%; padding-top: 25%; background: URL('images/img-map.svg') no-repeat center bottom; background-size: contain; position: absolute; left: 1.2em; bottom: 1.2em; z-index: 3; content: "";}                                        

.calendar-detail h1                               {min-height: 2.1em; padding-left: 4.2rem;}
.calendar-detail .article .date                   {width: 3.6em; background: white; text-align: center; position: absolute; left: 0; top: -0.55em; border-radius: var(--border-radius); overflow: hidden;}
.calendar-detail .article .date span:nth-child(1) {display: block; width: 100%; font-size: 0.9em; text-align: center; font-weight: 700; color: white; background: var(--color1); padding: 0.6em 0;}
.calendar-detail .article .date span:nth-child(2) {display: block; width: 100%; font-size: 0.9em; text-align: center; font-weight: 400; color: #666666; padding: 0.3em 0;border-radius: 0 0 var(--border-radius) var(--border-radius); border: solid 1px rgba(0,0,0,0.15); box-sizing: border-box;}

aside .info                                     {position: relative;}
aside .info ul                                  {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}
aside .info ul li                               {display: block; width: auto; font-size: 1em; line-height: 1.2em; font-weight: 600; color: #252525; padding: 0 1.2em 0 1.6em; margin-bottom: 0.7em; position: relative;}
aside .info ul li:before                        {display: none;}
aside .info ul li:after                         {display: block; width: 1.2em; height: 1.2em; background-size: contain; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0.05em; content: "";}
aside .info ul li:nth-child(1):after            {background-image: URL("images/icon-phone.svg");}
aside .info ul li:nth-child(2):after            {background-image: URL("images/icon-marker.svg");}
aside .info ul li:nth-child(3):after            {background-image: URL("images/icon-mail.svg");}
aside .info ul li:nth-child(4):after            {background-image: URL("images/icon-web.svg");}
aside .info ul li a                             {color: #252525; text-decoration-color: transparent;}
aside .info ul li a:hover                       {color: var(--color1); text-decoration-color: var(--color1);}
aside .info .map                                {display: block; width: 100%; position: absolute; left: 0; bottom: 0;}
aside .info .map iframe                         {display: block; width: 100%; height: 100%;}
  @media screen and (min-width: 1081px)         {
  aside .info                                   {padding-bottom: 16em;}
  aside .info .map                              {height: 15em;}
  }
  @media screen and (max-width: 1080px)         {
  aside .info                                   {padding-bottom: 20em;}
  aside .info .map                              {height: 19em;}
  }  

.search-results                                 {display: block; width: 100%;}
.search-results .phrase                         {display: block; width: 100%;}
.search-results .phrase span                    {font-weight: 700;}
.search-results .result                         {display: block; max-width: 40em; margin: 1.3em 0 0; padding-top: 1em; border-top: solid 1px rgba(0,0,0,0.1);}
.search-results .result:first-of-type           {margin-top: 2em; padding-top: 0; border-top: none;}
.search-results .result .title                  {font-size: 1.2em; font-weight: 700; margin: 0 0 -0.7em;}
.search-results .result .title a                {color: var(--color1); text-decoration: underline; transition: .2s ease-in-out;}
.search-results .result .title a:hover          {text-decoration-color: transparent; color: var(--color1-hover);}
.search-results .result p span                  {font-weight: 700;}

.form                                               {display: block; width: 100%; margin-top: var(--margin-top);}
.form .inputs                                       {display: flex; width: 100%; flex-wrap: wrap;}
.form .inputs > div                                 {display: block; border-radius: var(--border-radius); box-sizing: border-box; position: relative;}
.form .inputs > div input,
.form .inputs > div textarea                        {display: block; width: 100%; font-size: 1em; font-weight: 600; color: #252525; padding: 1.2em; background: rgba(255,255,255,0.8); border: solid 1px rgba(0,0,0,0.1); outline: none; box-sizing: border-box; border-radius: 0.3em; font-family: 'Montserrat', sans-serif; transition: .2s ease-in-out;}
.form .inputs > div textarea                        {font-weight: 400;}
.form .inputs > div input:focus,
.form .inputs > div textarea:focus                  {border-color: var(--color2);}
.form .inputs > div input::placeholder              {color: var(--color4); font-weight: 400;}
.form .inputs > div input:-ms-input-placeholder     {color: var(--color4); font-weight: 400;}     
.form .inputs > div input::-ms-input-placeholder    {color: var(--color4); font-weight: 400;}
.form .inputs > div textarea::placeholder           {color: var(--color4); font-weight: 400;}
.form .inputs > div textarea:-ms-input-placeholder  {color: var(--color4); font-weight: 400;}     
.form .inputs > div textarea::-ms-input-placeholder {color: var(--color4); font-weight: 400;}
.form .flex                                                 {margin-top: 1.5em;}
.form .flex .checkbox                                       {display: block; max-width: calc(100% - 14em);}
  @media screen and (min-width: 641px)                      {
  .form .inputs > div:nth-child(-n+2)                       {width: calc(50% - 0.3em); margin: 0 0.6em 0.6em 0;}
  .form .inputs > div:nth-child(even)                       {margin-right: 0;}
  .form .inputs > div:nth-child(3)                          {width: 100%;}
  .form .inputs > div textarea                              {height: 15em;}
  .form .flex                                               {justify-content: space-between; align-items: center;}
  }
  @media screen and (max-width: 640px)                      {
  .form .inputs > div                                       {width: 100%; margin-bottom: 0.6em;}
  .form .inputs > div textarea                              {height: 20em;}
  .form .flex                                               {justify-content: center;}
  .form .flex .checkbox                                     {width: 100%; max-width: 30em; margin-bottom: 1.5em;}
  } 

.chk1:not(:checked),
.chk1:checked                                               {position: absolute; left: -9999px; background-position: left top;}
.chk1:not(:checked) + label,
.chk1:checked + label                                       {display: block; position: relative; text-align: left; padding-left: 1.7em; color: #252525; cursor: pointer; box-sizing: border-box;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                                {display: block; width: 1.2em; height: 1.2em; border-radius: 0.2em; position: absolute; left: 0; top: 0.03rem; background-image: URL('images/checkbox.svg'); background-repeat: no-repeat; background-size: 100% 200%; background-color: rgba(0,0,0,0.15); overflow: hidden; content: "";}
.chk1:not(:checked) + label:before                          {background-position: left top;}
.chk1:not(:checked) + label:hover:before                    {opacity: 0.8;}
.chk1:checked + label:before                                {background-position: left bottom; background-color: var(--color1);}
.chk1:disabled + label,                  
.chk1:disabled + label:before                               {opacity: 0.4;}

.obcan .chk1:checked + label:before                         {background-color: var(--color2);}
.turista .chk1:checked + label:before                       {background-color: var(--color3);}




.search-results                                             {display: block; width: 100%; margin-top:1em;} 
.search-results .phrase                                     {display: block; width: 100%; text-align: center; background: rgba(0,0,0,0.06); padding: 0.8em; box-sizing: border-box;}
.search-results .phrase span                                {font-weight: 600;}
.search-results .result                                     {display: block; max-width: 40em; margin: 1em auto 0; padding-top: 1em; border-top: solid 1px rgba(0,0,0,0.1);}
.search-results .result:first-of-type                       {margin-top: 2em; padding-top: 0; border-top: none;}
.search-results .result .title                              {font-size: 1.3em; font-weight: 600; margin-bottom:1em;}
.search-results .result .title a                            {color: var(--color1); text-decoration: underline; transition: .2s ease-in-out;}
.search-results .result .title a:hover                      {text-decoration-color: transparent; color: var(--color1-hover);}
.search-results .result p span                              {font-weight: 600;}



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

.arrow-next.disabled,
.arrow-prev.disabled { display:none; }
.hrefdis a { cursor:pointer !important; }