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

.mce-content-body  { max-width:750px; }
.mce-content-body p,
.mce-content-body ol,
.mce-content-body ul { width:100%; }

.instagram-media    { margin-top:1.3em !important; }

.PKWin_ImageBox.img img { max-width:100%; }

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

.rCenter       { width:100%; }
.rCenter > div { margin:0px auto; }

.TFseznamAd--wrapper                                  { position:fixed; bottom:0px; width:100%; z-index:999999; }
.TFseznamAd--wrapper .TFseznamAd--cButton               { background-color:Black; width:160px; cursor:pointer; line-height:52px; text-align:center; font-size:18px; position:absolute; right:0px; color:White; }
.TFseznamAd--wrapper .content                         { /*height:120px;*/ width:100%; background-color:Black; margin-top:52px; }
.TFseznamAd--wrapper .content > div                   { width:320px; /*height:100px;*/ margin:0px auto; display:block; position:relative; top:10px; }

.banner-200h > div          { margin:0px auto; }

html                                            {display: block; width: 100%; height: 100%; background: #7b8089;}
body                                            {display: block; width: 100%; position: relative; font-family: var(--font1); overflow-x: hidden; overflow-y: auto;}
body.fixed                                      {overflow: hidden;}
form                                            {display: block; width: 100%; overflow-x: hidden;}
.wrapper                                        {display: block; width: 100%; background: var(--color1); margin: 0 auto; position: relative; overflow: hidden; z-index: 1;}
.container                                      {display: block; width: 100%; position: relative; box-sizing: border-box; overflow: hidden;}
  @media screen and (min-width: 1081px)         {
  .wrapper                                      {max-width: 1060px; border-radius: var(--border-radius) var(--border-radius) 0 0;}
  }
  @media screen and (min-width: 769px)          {
  body                                          {font-size: 17px;}
  } 
  @media screen and (max-width: 768px)          {
  body                                          {font-size: 16px;}
  }     
  @media screen and (max-width: 440px)          {
  body                                          {font-size: 15px;}
  }  

:root                                           {
                                                --font1:        'komet', sans-serif;

                                                --color1:       #110528;
                                                --color1b:      #2b174f;
                                                --color1c:      #7c699e;
                                                --color1d:      #04000c; 
                                                --color2:       #ffe000;
                                                --color2b:      #f4b300;

                                                --color3:       rgb(240,240,240);

                                                --border-radius:  0.3rem;
                                                --gap1:       1rem;
                                                --gap2:       2rem;
                                                }

.background                                     {display: block; width: 100%; height: 100%; background: URL('images/pattern.jpg') repeat center top; background-size: auto 5rem; position: fixed; left: 0; top: 0;}

.banner-2000x1400                               {display: block; width: 2000px; position: fixed; left: calc(50% - 1000px); top: 0;}
.banner-2000x1400 img                           {display: block; width: 2000px;}
  @media screen and (max-width: 1080px)         {
  .banner-2000x1400                             {display: none !important;}
  }

.banner-200h                                    {display: block; width: 100%; height: 259px;}
  @media screen and (max-width: 1080px)         {
  .banner-200h                                  {display: none;}
  }

/* HEADER ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.header                                         {display: block; width: 100%; position: relative; z-index: 1000;}
.header .topbar                                 {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; background: var(--color1); padding: var(--gap1); box-sizing: border-box; position: relative;}
.header .logo                                   {display: flex; align-items: center;}
.header .logo a                                 {display: block; padding-right: var(--gap1); margin-right: var(--gap1); border-right: solid 0.14em var(--color2);}
.header .logo a img                             {display: block; width: 100%;} 
.header .logo .title                            {display: block; color: white; font-weight: 700;}
.header .search                                 {display: Flex; position: relative;}
.header .search svg                             {display: block; width: 0.8em;; height: 0.8em; fill: var(--color1c); opacity: 1; position: absolute; left: 1.1em; top: calc(50% - 0.4em); z-index: 2;}
.header .search input                           {display: block; width: 100%; font-size: 0.9em; color: white; font-weight: 700; background: var(--color1d); border: solid 2px transparent; outline: none; padding: 1em 6em 1em 2.5em; border-radius: var(--border-radius); box-sizing: border-box; font-family: var(--font1); transition: .15s ease-in-out;}
.header .search input::placeholder              {color: var(--color1c); font-weight: 500; opacity: 1;}
.header .search button                          {display: flex; width: auto; height: 100%; align-items: center; font-size: 0.9em; color: var(--color2); font-weight: 700; background: none; border: none; outline: none; cursor: pointer; padding: 0 1em 0 0; position: absolute; right: 0; top: 0; font-family: var(--font1); transition: .15s ease-in-out;}
.header .search button:hover                    {color: var(--color2b);}
.header .search input:focus                     {border-color: var(--color1c);}
.header .search .whisperer                      {display: none; height: 200px; background: white; border-radius: 0 0 var(--border-radius) var(--border-radius); border: solid 1px #d9d9d9; box-sizing: border-box; position: absolute; z-index: 10000;}
.header .soc                                    {display: flex; align-items: center; gap: 0.5em; position: relative;}
.header .soc a                                  {display: block; width: 1.6em;} 
.header .soc a svg                              {display: block; width: 100%; height: 100%; fill: var(--color2); transition: .15s ease-in-out;}
.header .soc a:hover svg                        {fill: var(--color2b);}
.header nav                                     {display: block; width: 100%; background: var(--color2);}
.header nav ul                                  {display: flex; width: 100%; gap: 4%;}
.header nav ul li                               {display: block;}
.header nav ul li a                             {display: inline-block; color: var(--color1); font-weight: 700; opacity: 0.6; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav ul li a:hover                       {opacity: 1;}
.header nav ul li a.sel                         {text-decoration: underline; opacity: 1;}
  @media screen and (min-width: 961px)          {
  .header .logo a                               {width: 4em;}
  .header .logo .title                          {font-size: 1.1em;}
  .header .search                               {width: calc(100% - 28em);}
  .header #navicon                              {display: none;}
  .header nav ul                                {justify-content: center; align-items: center; padding: 0.6em 1em 0.7em;}
  .header nav ul li a                           {font-size: 1.15em;}
  }
  @media screen and (max-width: 960px)          {
  .header .topbar                               {padding-bottom: calc(var(--gap1) + var(--search-height)); --search-height: 3rem;}
  .header .logo a                               {width: 3.2em;}
  .header .logo .title                          {font-size: 1em;}
  .header .soc                                  {position: absolute; right: 3.7rem; top: 1.8rem;}
  .header .search                               {width: 100%; height: var(--search-height); position: absolute; left: 0; bottom: 0;}
  .header .search input                         {border-radius: none;}
  .header .search .whisperer                    {width: 100%; top: 100%; left: 0;}
  .header #navicon                              {display: block; width: 1.5em; height: 21px; cursor: pointer; position: relative; z-index: 10002;}
  .header #navicon span                         {display: block; width: 100%; height: 3px; background: var(--color2); position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header.show #navicon span                    {background: var(--color1);}
  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg); opacity: 1;}
  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg); opacity: 1;}
  .header.show #navicon span:nth-child(1), 
  .header.show #navicon span:nth-child(4)       {opacity: 0 !important;}
  .header nav                                   {width: 20rem; height: 100%; position: fixed; right: -21rem; top: 0; overflow-y: auto; transition: .45s ease-in-out;}
  .header nav ul                                {flex-wrap: wrap; margin-block: 4.5em 1em;}
  .header nav ul li                             {width: 100%;}
  .header nav ul li a                           {font-size: 1.3em; padding: 0.4em 1.2em;}
  .header.show nav                              {right: 0;}
  }
  @media screen and (max-width: 440px)          {
  .header .logo a                               {width: 2.8em; padding-right: 0.6em; margin-right: 0.6em;}
  .header .logo .title                          {font-size: 0.85em;}
  .header .soc                                  {font-size: 0.85em; right: 3rem; top: 1.82rem;}
  .header #navicon                              {width: 1.3em; height: 18px;}
  }

.footer                                         {display: flex; width: 100%; flex-wrap: wrap; font-size: 0.85em; background: var(--color1); gap: var(--gap1); padding: var(--gap1); box-sizing: border-box;}
.footer :is(h2, p, li, p a, li a)               {color: white;}
.footer h2                                      {display: block; width: 100%; font-size: 1.4em; font-weight: 800; margin-block: 0.3rem 0.15rem;}
.footer p                                       {line-height: 1.4em;}
.footer :is(p a, li a)                          {text-decoration: underline; transition: .15s ease-in-out;}
.footer :is(p a:hover, li a:hover)              {color: var(--color2); text-decoration-color: transparent;}
.footer .blog-article-preview .info             {padding: 0;}
.footer .blog-article-preview .info .title a    {color: white;}
.footer .blog-article-preview .info:hover .title a  
                                                {color: var(--color2);}
.footer .footer-cols                            {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}       
.footer .footer-cols > div                      {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.4rem;}
.footer .soc a                                  {display: flex; align-items: center; gap: 0.4em; font-size: 1em; color: white; font-weight: 700; transition: .15s ease-in-out;} 
.footer .soc a svg                              {display: block; width: 1.4em; fill: var(--color2); transition: .15s ease-in-out;}
.footer .soc a:hover                            {color: var(--color2);}
.footer ul                                      {width: 100%;}
.footer ul li                                   {font-size: 0.85em;}
.footer .copyright                              {display: block; font-size: 0.85em; color: var(--color1c); font-weight: 700;}
.footer .copyright a                            {color: var(--color1c); text-decoration: underline; transition: .15s ease-in-out;}
.footer .copyright a:hover                      {color: white; text-decoration-color: transparent;}
  @media screen and (min-width: 961px)          {
  .footer                                       {justify-content: space-between;}
  .footer .blog-article-preview                 {width: calc(33.33% - var(--gap1) * 2 / 3);}
  .footer .blog-article-preview .img            {width: 30%;}
  .footer .blog-article-preview .info           {width: calc(70% - var(--gap1));}
  .footer .blog-article-preview .info .title    {font-size: 1.05em;}
  .footer .footer-cols > div:nth-child(odd)     {width: calc(33.33% - var(--gap1) * 2 / 3);}
  .footer .footer-cols > div:nth-child(even)    {width: calc(66.66% - var(--gap1) * 1 / 3);}
  .footer .soc                                  {display: block;}
  .footer .soc a                                {margin-block: 0.6em;}
  .footer ul                                    {display: block;}
  .footer ul li                                 {margin-block: 0.4em;}
  .footer .copyright                            {position: absolute; left: var(--gap1); bottom: var(--gap1);}
  }
  @media screen and (max-width: 960px)          {
  .footer .soc                                  {display: flex; align-items: center; gap: 0.71em; margin-block: 0.5em 0.8em;}
  .footer ul                                    {display: flex; flex-wrap: wrap; gap: 0.3em 1em;}
  } 
  @media screen and (min-width: 641px) and (max-width: 960px){
  .footer .footer-cols > div:nth-child(1)       {width: 13em;}
  .footer .footer-cols > div:nth-child(2)       {width: calc(100% - 13em - var(--gap1));}
  .footer .blog-article-preview                 {width: calc(50% - var(--gap1) / 2);}
  .footer .blog-article-preview .img            {width: 45%;}
  .footer .blog-article-preview .info           {width: calc(55% - var(--gap1));}
  .footer .blog-article-preview .info .title    {font-size: 1.1em;}
  }
  @media screen and (min-width: 441px) and (max-width: 640px){
  .footer .blog-article-preview                 {width: calc(33.33% - var(--gap1) * 2 / 3);}
  }
  @media screen and (max-width: 440px)          {
  .footer .blog-article-preview                 {width: calc(50% - var(--gap1) / 2);}
  .footer ul li                                 {width: 100%;}
  }

.form                                           {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75em 0;}
.form .flex                                     {align-items: center; margin-top: 0.6em;}
.form .flex p                                   {font-size: 0.85em;}
.form .flex button                              {display: block; font-size: 1em; color: var(--color2); font-weight: 700; text-decoration: underline; background: none; border: none; padding: 0; cursor: pointer; transition: .15s ease-in-out;}
.form .flex button:hover                        {color: var(--color2b); text-decoration-color: transparent;}
  @media screen and (min-width: 961px)          {
  }
  @media screen and (min-width: 769px)          {
  .form .form-item:not(.width100)               {width: calc(33.33% - 0.3rem);}
  }
  @media screen and (max-width: 768px)          {
  .form .form-item                              {width: 100%;}
  }
  @media screen and (min-width: 641px)          {
  .form .flex                                   {justify-content: space-between;}
  } 
  @media screen and (max-width: 640px)          {
  .form .flex                                   {justify-content: flex-end; gap: 1em;}
  .form .flex p                                 {width: 100%;}
  } 

.form-item                                      {display: flex; width: 100%; --form-item-height: 3.6em; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}
.form-item :is(input, textarea)                 {display: block; width: 100%; background: var(--color1d); font-size: 1em; color: white; font-weight: 700; border: solid 1px rgba(0,0,0,0.1); outline: solid 2px transparent; border-radius: var(--border-radius); box-sizing: border-box; position: relative; font-family: var(--font1), sans-serif; transition: .2s ease-in-out;}
.form-item input                                {height: var(--form-item-height); padding: 0.9em 1.2em 0.25em;}
.form-item textarea                             {height: 13em; padding: 1.4em 1.2em 0.9em;}
.form-item :is(input:focus, textarea:focus)     {outline-color: var(--color);}
.form-item label                                {display: block; font-size: 1em; font-weight: 700; color: var(--color1c); position: absolute; left: 1.4em; top: 1.24em; transition: .15s ease-in-out;}
.form-item input[value]:not(.empty) + label,
.form-item input[type="text"].touched:not(.empty) + label,
.form-item input[type="text"]:focus + label,
.form-item textarea.touched:not(.empty) + label,
.form-item textarea:focus + label               {font-size: 0.75em; color: var(--color2); left: 1.66em; top: 0.5em;}
  @media screen and (max-width: 1080px)         {
  .form-item                                    {justify-content: center;}
  }

.main                                           {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); margin: 0 auto; background: white; padding: var(--gap1); box-sizing: border-box;}
.main h1, .main h2, .main h3                    {display: block; width: 100%; color: var(--color1); font-weight: 800; line-height: 1.3em; font-family: var(--font1); box-sizing: border-box;}
.main h1                                        {width: 100%; font-size: min(2.6rem, calc(1rem + 3vw)); margin: 0; padding-inline: var(--gap1);}
.main h2                                        {font-size: 1.6rem; margin: 0 0 -0.5rem;}
.main h3                                        {font-size: 1.2rem; margin: 0 0 -0.5rem;}
.main p, .main li                               {display: block; font-size: 1em; color: var(--color1); line-height: 1.4em; font-weight: 400; width:100%; }
.main strong                                    {font-weight: 700;}
.main em                                        {font-style: italic;}
.main p a, .main li a                           {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color1c); text-decoration-color: transparent;}

.section                                        {display: flex; width: 100%; flex-wrap: wrap; gap: calc(0.6 * var(--gap1));}

.flex                                           {display: flex !important; width: 100%; flex-wrap: wrap;}
.flex.width100 > *                              {width: 100%;}

.button                                         {display: flex; justify-content: center; align-items: center; outline: none; cursor: pointer; text-transform: uppercase; text-decoration: none !important; font-size: 0.8em; font-weight: 700; position: relative; border: none; padding: 0.95em 2em 0.9em; border-radius: var(--border-radius); box-sizing: border-box; white-space: nowrap; font-family: var(--font1); transition: .15s ease-in-out;}
.button.color1                                  {background: var(--color1); color: white !important;}
.button.color1:hover                            {background: var(--color1c);}

.banner-480x480, .banner-970x310,
.banner-300x300, .banner-300x600                {display: block; width: 100%;}
.banner-480x480 > div, .banner-970x310 > div,
.banner-300x300 > div, .banner-300x600 > div    {display: block; width: 100%; margin:0px auto;}
.banner-480x480 > div img, .banner-970x310 > div img,
.banner-300x300 > div img, .banner-300x600 > div img
                                                {display: block; width: 100%;}
  @media screen and (min-width: 961px)          {
  .banner-480x480                               {display: none !important;}
  }
  @media screen and (max-width: 960px)          {
  .banner-970x310, .banner-300x300, 
  .banner-300x600                               {display: none !important;}
  }

.banner-480x480 img                             {max-width: 480px;}

.blog-article-info                              {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0.8em; box-sizing: border-box; padding-top: 1em; background: linear-gradient(to top, black 0%, transparent 100%);}
.blog-article-info > *                          {display: block;}
.blog-article-info .tag                         {font-size: 0.8em; color: var(--color1); font-weight: 700; background: var(--color2); padding: 0.6em 0.8em; box-sizing: border-box;}
.blog-article-info .date                        {font-size: 0.7em; color: white; font-weight: 400;}

.blog-article-preview                           {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1); position: relative; box-sizing: border-box;}
.blog-article-preview:nth-child(1)              {border-top: none;}
.blog-article-preview .img                      {display: block; position: relative; border-radius: var(--border-radius); overflow: hidden; order: 0;}
.blog-article-preview .img a                    {display: block; aspect-ratio: 1.78; position: relative;}
.blog-article-preview .img a span               {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.blog-article-preview .img a span img           {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.blog-article-preview .img .blog-article-info   {position: absolute; left: 0; bottom: 0; padding-inline: var(--gap1);}
.blog-article-preview .info                     {display: block; order: 1; box-sizing: border-box;}
.blog-article-preview .info .title              {font-weight: 800; margin-block: -0.2em 0;}
.blog-article-preview .info .title a            {color: var(--color1); text-decoration: none; transition: .15s ease-in-out;}
.blog-article-preview .info p                   {width: 100%; font-size: 0.9em; margin-top: 0.4em;}
.blog-article-preview .info > a                 {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.blog-article-preview .info:hover .title a      {color: var(--color2b);}
.blog-article-preview:hover .img span img,
.blog-article-preview .img:hover span img       {opacity: 0.8;}
  @media screen and (min-width: 641px)          {
  .blog-article-preview .img                    {width: 15em;}
  .blog-article-preview .info                   {width: calc(100% - 15em - var(--gap1));}
  .blog-article-preview .info .title            {font-size: 1.15em;}
  .blog-article-preview .info p                 {font-size: 0.9em;}
  }
  @media screen and (max-width: 640px)          {
  .blog-article-preview :is(.img, .info)        {width: 100%;}
  .blog-article-preview .blog-article-info      {padding-inline: var(--gap1);}
  .blog-article-preview .info                   {padding-left: var(--gap1);}
  .blog-article-preview .info .title            {font-size: 1.1em;}
  }

.blog-articles                                  {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1); box-sizing: border-box;}

.blog-articles.special-layout .blog-article-preview:nth-child(1) .img           {width: 100%;}
.blog-articles.special-layout .blog-article-preview:nth-child(1) .info          {width: 100%;}
  @media screen and (min-width: 641px)                                          {
  .blog-articles.special-layout .blog-article-preview:nth-child(1)               {margin-bottom: 1rem;}
  .blog-articles.special-layout .blog-article-preview:nth-child(1) .blog-article-info
                                                                                {font-size: 1.1em; padding-inline: var(--gap2);}
  .blog-articles.special-layout .blog-article-preview:nth-child(1) .info        {padding-left: var(--gap2);}
  .blog-articles.special-layout .blog-article-preview:nth-child(1) .info .title {font-size: 2em;}
  .blog-articles.special-layout .blog-article-preview:nth-child(2),
  .blog-articles.special-layout .blog-article-preview:nth-child(3),
  .more-articles .blog-articles .blog-article-preview:nth-child(1),
  .more-articles .blog-articles .blog-article-preview:nth-child(2)              {width: calc(50% - 0.5 * var(--gap1));}
  .blog-articles.special-layout .blog-article-preview:nth-child(2) :is(.img, .info),
  .blog-articles.special-layout .blog-article-preview:nth-child(3) :is(.img, .info),
  .more-articles .blog-articles .blog-article-preview:nth-child(1) :is(.img, .info),
  .more-articles .blog-articles .blog-article-preview:nth-child(2) :is(.img, .info)
                                                                                {width: 100%;}
  .blog-articles.special-layout .blog-article-preview:nth-child(2) .info,
  .blog-articles.special-layout .blog-article-preview:nth-child(3) .info        {padding-left: var(--gap1);}

  .blog-articles.special-layout .blog-article-preview:nth-child(4)              {margin-top: 1rem;}
  }
  @media screen and (max-width: 640px)                                          {
  .blog-articles.special-layout .blog-article-preview:nth-child(-n+3) .info .title
                                                                                {font-size: 1.35em;}
  }

.more-articles                                                        {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}

.show-more                                                            {display: flex; width: 100%; justify-content: center; background: var(--color3); padding: 0.7em; box-sizing: border-box; border-radius: var(--border-radius);}

.cols                                                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1); box-sizing: border-box;}
.cols > div                                                           {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1);}
.cols > div > *:first-child                                           {margin-top: 0;}
.cols > aside                                                         {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1);}
.cols > aside h2                                                      {margin-bottom: calc(0.2 * var(--gap1));}
.cols > aside .flex                                                   {margin-top: 0.6rem;}
.cols > aside .fixing-area                                            {display: block; width: 100%; flex-grow: 2; /*background: red;*/ position: relative;}
.cols > aside .fixing-area .fixing-element                            {display: block;}
  @media screen and (min-width: 961px)                                {
  .cols > div                                                         {width: calc(100% - 300px - var(--gap1)); align-self: flex-start;}
  .cols > aside                                                       {width: 300px; flex-direction: column;}
  .cols > aside .fixing-area                                          {top: -1rem; z-index: 1;}
  .cols > aside .fixing-area.no-fixing                                {margin-bottom: -2rem;}
  .cols > aside .fixing-area .fixing-element                          {width: 300px; padding: var(--gap1) 0; box-sizing: border-box;}
  .cols > aside .fixing-area .fixing-element.fixed                    {position: fixed; top: 0;}
  .cols > aside .fixing-area .fixing-element.fixed-middle             {position: fixed; bottom: 0; top: auto;}
  .cols > aside .fixing-area .fixing-element.fixed.fixed-end,
  .cols > aside .fixing-area .fixing-element.fixed-middle.fixed-end   {position: absolute; top: auto; bottom: -2rem;}
  }
  @media screen and (max-width: 960px)                                {
  .cols > div, .cols > aside                                          {width: 100%;}
  }

.article                                            {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1);}

.article h1                                         {font-size: min(2.3rem, calc(1rem + 3vw)); padding: 0; margin-block: -0.15em;}
.article h2                                         {font-size: min(1.9rem, calc(0.8rem + 3vw));}
.article h3                                         {font-size: min(1.4rem, calc(0.6rem + 3vw));}
.article .blog-article-detail-info                  {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em 1.1em; font-size: 0.9em;}
.article .blog-article-detail-info > *              {display: flex; width: auto; align-items: center; gap: 0.4em;}
.article .blog-article-detail-info > * svg          {display: block; width: auto; height: 1em; fill: var(--color0);}
.article .blog-article-detail-info > a              {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.article .blog-article-detail-info > a:hover        {color: var(--color1); text-decoration-color: transparent;}
.article .image                                     {display: block; width: 100%; aspect-ratio: 1.78; position: relative; border-radius: var(--border-radius); overflow: hidden; position: relative;} 
.article .image img                                 {display: block; width: 100%; height: 100%; object-fit: cover; transition: .15s ease-in-out;}
.article .image:hover img                           {opacity: 0.9;}
.article .image .blog-article-info                  {font-size: 1.15em; padding-block: 0 1em; background: linear-gradient(to bottom, black 0%, transparent 100%); position: absolute; left: 0; top: 0; padding-inline: var(--gap1); box-sizing: border-box;}

.article .source                                    {display: block; width: 100%; font-size: 0.8em; color: var(--color1b); font-style: italic; margin-top: -0.5rem;}
.article-styles iframe { max-width:100%; }
.article-styles li                                  {box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles ul li                               {padding-left: 1.8em;}
.article-styles ul li:before                        {display: block; width: 0.4em; height: 0.2em; background: var(--color1); border-radius: var(--border-radius); position: absolute; left: 0.9em; top: 0.6em; content: "";}
.article-styles ul li:last-child                    {margin-bottom: 0;}
.article-styles li :is(ul, ol)                      {margin-top: 0.4em;}
.article-styles li li                               {font-size: 1em !important;}
.article-styles ol                                  {list-style: none; counter-reset: li; padding: 0; margin: 0;}
.article-styles ol > li                             {counter-increment: li; padding-left: 2em;}
.article-styles ol > li:before                      {display: block; content: counter(li) "."; font-size: 1em; font-weight: 700; color: var(--color1); position: absolute; left: 0.8em; top: 0;}
.article-styles .highlight                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem; background: var(--color1c); padding: var(--gap1); box-sizing: border-box; border-radius: var(--border-radius);}
.article-styles .highlight > *                      {text-align: center; color: white;}
.article-styles .highlight :is(h2, h3)              {margin-block: 0 -0.4rem;}
.article-styles .highlight > *:first-child          {margin-top: 0;}                  

.article .embed                                     {display: block; width: 100%; border-radius: var(--border-radius);}
.article .embed iframe                              {display: block; width: 100%;}
  @media screen and (max-width: 768px)              {
  }
  @media screen and (max-width: 540px)              {
  article .gallery .swiper-slide                    {width: 49%; margin-right: 2%; padding-top: 32%;}
  }   

/*.share-bar                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1);}
.share-bar > div                                    {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
.share-bar .share-buttons                           {gap: 0.35em; background: var(--color1); padding: 1em; border-radius: var(--border-radius);}
.share-bar .share-buttons span                      {display: block; font-size: 0.9em; color: white; font-weight: 700; margin-right: 0.4em;}
.share-bar .share-buttons a                         {display: block; width: 1.2em;}
.share-bar .share-buttons a svg                     {display: block; width: 100%; fill: var(--color2); transition: .15s ease-in-out;}
.share-bar .share-buttons a:hover svg               {fill: var(--color2b);}
.share-bar .discussion                              {gap: 0.6em 1em;}
.share-bar .discussion > *                          {display: flex; flex-wrap: wrap;}
.share-bar .discussion img                          {height: 1em;}
.share-bar .discussion p                            {display: flex;width: auto; flex-wrap: wrap; font-size: 0.95em; color: #990000; font-family: 'Arial', sans-serif;}
.share-bar .discussion p span                       {display: inline-block; color: #990000; margin-left: 0.3em;}
.share-bar .discussion p svg                        {width: 1em; height: 1em; fill: #990000; margin: 0.25em 0.4em 0 0;}
.share-bar .discussion .discussion-promo            {display: block; font-size: 0.9em; color: #990000; font-weight: 700; text-decoration: underline; transition: .15s ease-in-out;}
.share-bar .discussion .discussion-promo:hover      {color: #ff0842; text-decoration-color: tan;}*/

.share-bar                                          {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 1em; background: var(--color1); padding: 0.8em; border-radius: var(--border-radius); margin-top: calc(0.6 * var(--gap1)); box-sizing: border-box; position: relative;}
.share-bar > div                                    {display: flex; align-items: center; gap: 1em;}
.share-bar > div > *                                {display: block; position: relative;}
.share-bar > div img                                {height: 1em;}
.share-bar > div p                                  {display: flex; flex-wrap: wrap; font-size: 0.95em; color: #990000; margin: 0; font-family: 'Arial', sans-serif;}
.share-bar > div p span                             {display: inline-block; color: #990000; margin-left: 0.3em;}
.share-bar > div p svg                              {width: 1em; height: 1em; fill: #990000; margin: 0.25em 0.4em 0 0;}
.share-bar .discussion-promo                        {font-size: 0.8em;}
.share-bar .discussion-promo.color2                 { background: var(--color2); color: black !important; font-size:0.7em; padding:0.6em !important; /*display:none !important;*/ }
.share-bar .discussion p                            { font-size:1em; color: white !important; margin-bottom:0.2em; /*display:none !important;*/ }
.share-bar .discussion p svg                        { color: white !important; }
.share-bar .discussion p span                       { font-size:1em; color: white !important; }
.share-bar > div.share-buttons                      {justify-content: center; gap: 0.3em;}
.share-bar > div.share-buttons span                 {color: #999999;}
.share-bar > div.share-buttons a                    {display: block; width: 1.5em; height: 1.5em; cursor: pointer;}
.share-bar .libise                                  { font-size:1.5em; }
#discussion.sDis { width:100% !important; }
/*.share-bar > div.share-buttons a img                {display: block; width: 100%; height: auto; filter: grayscale(1); transition: .15s ease-in-out}
.share-bar > div.share-buttons a:hover img          {filter: grayscale(0);}*/

.share-bar .share-buttons a                         {display: block; width: 1.2em;}
.share-bar .share-buttons a svg                     {display: block; width: 100%; fill: var(--color2); transition: .15s ease-in-out;}

  @media screen and (min-width: 1081px)             {
  .share-bar                                        {justify-content: space-between;}
  .share-bar > div.share-buttons                    {/*width: 100%;*/}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .share-bar > div.share-buttons                    {position: absolute; right: 0.8em; top: 0.8em;}
  }
  @media screen and (max-width: 640px)              {
  .share-bar                                        {justify-content: space-between;}
  .share-bar > div.share-buttons                    {/*width: 100%;*/}
  }
  @media screen and (max-width: 640px)              {
  .share-bar,
  .share-bar > div                                  {width: 100%; justify-content: center;}
  }

.article .blog-articles                             {margin-top: calc(0.6 * var(--gap1));}

.swiper-button-prev,
.swiper-button-next                                   {display: block; width: 3em; height: 1.6em; font-size: 1em; background: var(--color2); border-radius: var(--border-radius) var(--border-radius) 0 0; padding: 0.5em; box-sizing: border-box; position: absolute; top: calc(50% - 0.8em); z-index: 5; margin: 0; cursor: pointer; transition: .15s ease-in-out;} 
.swiper-button-prev                                   {right: auto; transform: rotate(90deg);}
.swiper-button-next                                   {left: auto; transform: rotate(-90deg);}                                 
.swiper-button-prev svg,
.swiper-button-next svg                               {display: block; width: 100%; height: 100%; fill: var(--color0);}
.swiper-button-prev:after,
.swiper-button-next:after                             {display: none;}
.swiper-button-disabled                               {opacity: 0.2 !important;}
.swiper-button-prev:hover,
.swiper-button-next:hover                             {background: var(--color2b);}

.gallery                                              {display: block; width: 100%; position: relative;}
.gallery .swiper-container                            {display: block; width: 100%; overflow: hidden;}
.gallery .swiper-slide                                {display: block; width: auto; height: auto; background: var(--color1); border-radius: var(--border-radius); overflow: hidden; position: relative; -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; position: absolute; left: 0; top: 0;}     
.gallery .swiper-slide a img                          {display: block; width: 100%; transition: .15s ease-in-out;}     
.gallery .swiper-slide:hover a img                    {opacity: 0.8;}
.gallery .swiper-button-prev                          {left: -0.72em;}
.gallery .swiper-button-next                          {right: -0.72em;}
.gallery.i1 .swiper-slide                             {padding-top: 56%;}
.gallery.i2 .swiper-slide                             {padding-top: 33%;}

.gallery-detail :is(.main, .section)                  {padding: 0; gap: 0;}

.gallery-head                                         {display: flex; width: 100%; align-items: center; background: var(--color1); padding: var(--gap1); position: relative; box-sizing: border-box;}
.gallery-head .logo                                   {display: block; width: 2.8em; padding-right: var(--gap1); margin-right: var(--gap1); border-right: solid 0.12em var(--color2);}
.gallery-head .logo img                               {display: block; width: 100%;}
.gallery-head h1                                      {width: calc(100% - 4rem); font-size: 1.25em; color: white; padding-inline: 0 2rem; box-sizing: border-box;}
.gallery-head .close                                  {display: block; width: 1.2em; height: 1.2em; position: absolute; right: 1.2rem; top: 1.55rem;}
.gallery-head .close:before,
.gallery-head .close:after                            {display: block; width: 100%; height: 3px; background: white; position: absolute; left: 0; top: calc(50% - 2px); content: ""; transition: .15s ease-in-out;}
.gallery-head .close:before                           {transform: rotate(-45deg);}
.gallery-head .close:after                            {transform: rotate(45deg);}
.gallery-head .close:hover:before,
.gallery-head .close:hover:after                      {background: var(--color2);}

.gallery-detail .cols                                 {padding: var(--gap1); box-sizing: border-box;}

.gallery-detail .gallery .title                       {display: block; width: 100%; text-align: center; font-size: 1.25em; color: var(--color1); font-weight: 800; line-height: 1em; margin: 0 0 0.8rem; font-family: 'Teko', sans-serif;}
.gallery-detail .gallery .source                      {display: block; width: 100%; text-align: center; font-size: 0.8em; color: var(--color1b); font-style: italic; margin-top: 0.8rem;}


.article .embedBlok.anketa { width:100%; }
.article .poll {display: block; width: 100%; font-family: 'Arial', sans-serif; margin-top:1em;}
.article .poll > div {display: flex; width: 100%; height: 2.5em; justify-content: space-between; align-items: center; background: #f5f5f5; margin-bottom: 8px; padding: 0 1.2em; box-sizing: border-box; position: relative; transition: .2s ease-in-out; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.article .poll > div:hover {background: #e8e8e8; transform: translateY(-2px); height: calc(2.5em + 4px);}
.article .poll > div:last-of-type {margin-bottom: 0;}
.article .poll > div > div {display: block; height: 100%; background: #ffe00080; position: absolute; left: 0; top: 0; z-index: 1; border-radius: 6px;}
.article .poll > div > p {display: block; width: calc(100% - 4.5em); font-size: 0.9em; line-height: 1.3em; font-weight: 500; position: relative; z-index: 2; color: #333;}
.article .poll > div > span {display: block; width: 4.5em; font-weight: 700; color: #201341; text-align: right; position: relative; z-index: 2;}
.article .poll > div > a {display: block; width: 100%; height: 100%; position: absolute; border: none; left: 0; top: 0; z-index: 3; cursor: pointer;}
.article .poll > p {font-size: 0.85em; color: #777; margin-top: 0.8em;}