.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.embedBlok                                      {display: block; 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; }
/*------------------------------------------------------*/

.imgPreview img { width:auto !important; }

.contactsPage h2, .contactsPage h3   {display: block; width: 100%; text-align: left; color: var(--color0); font-size:2em; line-height: 1.1em; letter-spacing: 0.03em; font-weight: 600; font-family: 'transducer-condensed', sans-serif;}
.article h1 svg     { height: 1.1em; margin-right:0.3em; position:relative; top:0.1em; }

.checkbox                                 {width: 100%; font-size: 0.8em;}
.checkbox label                           {height: auto;}
.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; font-size: 1.2em; line-height: 1.3em; padding-left: 1.35em; font-weight: 500; color: #666666; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label a,
.chk1:checked + label a                               {color: #252525; text-decoration: underline;}
.chk1:not(:checked) + label a:hover,   
.chk1:checked + label a:hover                         {color: black; text-decoration: none;}
.chk1:not(:checked) + label:hover                     {color: #252525;}
.chk1:checked + label                                 {color: #252525; font-weight: 700;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                          {display: block; width: 1em; height: 1em; border-radius: 0.2em; position: absolute; left: 0; top: 0em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before                    {background-color: #e5e5e5;}
.chk1:checked + label:before                          {background: URL('images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color2);}
.chk1:disabled + label,                  
.chk1:disabled + label:before                         {opacity: 0.4;}
.no-font-weight .chk1:checked + label                 {font-weight: 500;}

html                                            {background: #ebebeb;}
html, body, form                                {width: 100%;}
body                                            {margin: 0 auto; font-family: 'elza-text', sans-serif; overflow-y: auto; overflow-x: hidden; position: relative;}
body.fixed                                      {height: 100vh; overflow: hidden;}
form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}
  @media screen and (max-width: 2000px)         {
  body                                          {font-size: 18px;}
  }
  @media screen and (max-width: 1600px)         {
  body                                          {font-size: 17px;}
  }  
  @media screen and (max-width: 1300px)         {
  body                                          {font-size: 16px;}
  }
  @media screen and (max-width: 540px)          {
  body                                          {font-size: 15px;}
  }
  @media screen and (max-width: 380px)          {
  body                                          {font-size: 14px;}
  }

.wrapper                                        {display: flex; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; flex-wrap: wrap; position: relative;}
  @media screen and (min-width: 1081px)         {
  .wrapper                                      {width: 90%; max-width: 74em; margin: 0 auto;}
  .wrapper.narrow                               {max-width: 65em;}
  }
  @media screen and (max-width: 1080px)         {
  .wrapper                                      {width: 86%; margin: 0 7%;}
  }

:root                                           {
                                                --color0:  #333333;
                                                --color0b: black;
                                                --color1:  #7cb91d;
                                                --color1b: #639611;
                                                --color2:  #e50081;
                                                --color2b: #c20c73;
                                                --color3:  rgba(0,0,0,0.06);
                                                --color3b: rgba(0,0,0,0.12);

                                                --section-padding: 3rem;
                                                --section-padding2: calc(2vw + 2rem);
                                                --gap: 1.5rem;
                                                --border-radius: 0.3rem;
                                                }


.message-top                                    {display: block; width: 100%; background: var(--color2); padding: 0.7rem 0; box-sizing: border-box;}
.message-top .wrapper                           {justify-content: center; gap: 0.5em; flex-wrap: nowrap;}
.message-top .icon                              {display: block; font-size: 0.8em; position: relative; top: -0.15em;}
.message-top p                                  {display: flex; width: auto; max-width: calc(100% - 1.7rem); align-items: center; font-size: 0.75em; font-weight: 600; line-height: 1.3em; color: white; margin: 0; position: relative; box-sizing: border-box;}
.message-top a { color:#ffd823; text-decoration:underline; }
.message-top .close                             {display: block; width: 1.2em; height: 1.2em; background: var(--color0); border-radius: 100%; position: relative; top: -0.1em; z-index: 1; cursor: pointer; transition: .2s ease-in-out;}
.message-top .close:before,
.message-top .close:after                       {display: block; width: 60%; height: 2px; background: white; position: absolute; left: 20%; content: ""; transition: .2s ease-in-out;}
.message-top .close:before                      {top: calc(50% - 1px); transform: rotate(45deg);}
.message-top .close:after                       {top: calc(50% - 1px); transform: rotate(-45deg);}
.message-top .close:hover                       {background: var(--color0b);}
.message-top .close:hover:before,
.message-top .close:hover:after                 {background: #cccccc;}

.header                                                 {display: block; width: 100%; position: relative; z-index: 1000; box-sizing: border-box;}
.header:before                                          {display: block; width: 100%; background: white; position: absolute; left: 0; top: 0; content: "";}
.header .wrapper                                        {height: 100%; justify-content: space-between;}
.header .logo                                           {display: flex; height: 100%; align-items: center; position: relative; z-index: 10000;}
.header .logo img                                       {display: block; width: 100%; height: auto;} 
.header .collapse                                       {display: flex; flex-wrap: wrap; box-sizing: border-box;}
.header .collapse .opening                              {display: flex; height: 3em; align-items: center; gap: 0 0.4em;}
.header .collapse .opening svg                          {display: block; width: 1.2em; height: 1.2em; fill: var(--color2);}
.header .collapse .opening > a                       {display: flex; align-items: center; gap: 0.4em; line-height: 1em; color: var(--color0); font-weight: 600; position: relative; top: 0.13em;}
.header .collapse .opening > a > span                {color: var(--color2);}
.header .collapse .header-contacts                      {display: flex; align-items: center;}
.header .collapse .header-contacts ul li                {display: block;}
.header .collapse .header-contacts ul li:first-child    {margin-bottom: 0.4em;}
.header .collapse .header-contacts ul li a              {display: flex; align-items: center; gap: 0.4em; font-size: 1em; color: var(--color0); font-weight: 600; transition: .15s ease-in-out;}
.header .collapse .header-contacts ul li a svg          {display: block; width: 1.1em; height: 1.1em; fill: var(--color1); position: relative; top: -0.1em;}
.header .collapse .header-contacts ul li a:hover        {color: var(--color1);}
.header .collapse .header-contacts div a                {display: block; height: auto;}
.header .collapse .header-contacts div a:first-child    {margin-bottom: 0.3em;}
.header .collapse .header-contacts div a img            {display: block; width: 100%; height: auto; transition: .15s ease-in-out;}
.header .collapse .header-contacts div a:hover img      {filter: brightness(1.2); transform: scale(1.15);}
.header .collapse nav                                   {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 1.5em; box-sizing: border-box;}
.header .collapse nav > ul                              {display: flex; width: 100%; align-items: center; flex-wrap: wrap;}
.header .collapse nav > ul > li                         {display: block; position: relative; box-sizing: border-box;}
.header .collapse nav > ul > li > a                     {display: flex; align-items: center; line-height: 1.2em; position: relative; box-sizing: border-box; font-family: 'transducer-condensed', sans-serif; transition: .15s ease-in-out;}
.header .collapse .button                               {font-size: 1em;}
  @media screen and (min-width: 1081px)                 {
  .header                                               {height: 9rem; padding-bottom: 3rem;}
  .header:before                                        {height: 6rem; z-index: -1;}
  .header .logo                                         {width: 10rem;}
  .header .collapse                                     {width: calc(50% + 10rem); justify-content: space-between;}
  .header .collapse .opening                            {padding: 0 1em; background: var(--color3); border-radius: 1.5em;}
  .header .collapse .opening > span                     {font-size: 1em;}
  .header .collapse .header-contacts ul                 {display: block; margin-right: 1em; padding-right: 1em; border-right: solid 1px rgba(0,0,0,0.2);}
  .header .collapse .header-contacts div                {display: block;}
  .header .collapse .header-contacts div a              {width: 1.1em;}
  .header .collapse nav                                 {height: 3rem; background: var(--color0); border-radius: 0 0 var(--border-radius) var(--border-radius); overflow: hidden; position: absolute; left: 0; bottom: -3rem;}
  .header .collapse nav > ul                            {height: 100%;}
  .header .collapse nav > ul > li                       {height: 100%; flex-grow: 1; border-right: solid 1px black;}
  .header .collapse nav > ul > li:last-child            {border: none;}
  .header .collapse nav > ul > li > a                   {width: 100%; height: 100%; justify-content: center; text-align: center; font-size: 1.2em; letter-spacing: 0.03em; font-weight: 600; color: white; opacity: 0.85;}
  .header .collapse nav > ul > li > a:hover             {background: black; opacity: 1;}
  .header .collapse nav > ul > li > a.sel               {background: var(--color2); opacity: 1;}
  .header .collapse nav > ul > li > a svg               {display: none;}
  .header #navicon                                      {display: none;}
  }
  @media screen and (max-width: 1080px)                 {
  body                                                  {padding-top: 5em;}
  .header                                               {height: 5em; position: absolute; left: 0; top: 0;}
  .header:before                                        {height: 5em; z-index: 1;}
  .header .logo                                         {width: 8rem;}
  .header .collapse                                     {width: 100vw; height: 100vh; min-height: 20em; align-items: flex-start; font-size: 1.15em; background: white; padding: 5em 15% 8em; margin-top: 2em; position: fixed; left: -200vw; top: 0; z-index: -1; box-sizing: border-box; opacity: 0; overflow-y: auto; overflow-x: hidden; transition: opacity .6s ease-in-out, margin-top .6s ease-in-out;}
  .header .collapse .opening                            {position: relative;}
  .header .collapse .opening:before                     {display: block; width: 2000px; height: 100%; background: var(--color3); position: absolute; left: -500px; top: 0; z-index: -1; content: "";}
  .header .collapse .opening > span                     {font-size: 0.9em;}
  .header .collapse nav                                 {width: 100%; margin: 2.2em 0 2.6em;}
  .header .collapse nav > ul                            {width: 100%;}
  .header .collapse nav > ul > li                       {width: 100%; justify-content: center; padding: 1rem 0; border-bottom: solid 1px rgba(0,0,0,0.15);}
  .header .collapse nav > ul > li:first-child           {padding-top: 0;}
  .header .collapse nav > ul > li:last-child            {padding-bottom: 0; border: none;}
  .header .collapse nav > ul > li > a                   {width: 100%; font-size: 1.3em; color: var(--color0); padding-right: 1.2em;}
  .header .collapse nav > ul > li > a svg               {display: block; width: auto; height: 0.6em; fill: var(--color1); position: absolute; right: 0em; top: calc(50% - 0.3em); transform: rotate(-90deg);}
  .header .collapse nav > ul > li > a.sel               {color: var(--color2);}
  .header .collapse nav > ul > li > a.sel svg           {display: none;}
  .header .collapse .header-contacts                    {flex-wrap: wrap;}
  .header .collapse .header-contacts ul                 {display: flex; flex-wrap: wrap; gap: 0.5em 1.5em;}
  .header .collapse .header-contacts div                {display: flex; width: 100%; gap: 0 0.4em; margin-top: 1em;}
  .header .collapse .header-contacts div a              {width: 1.4em;}
  .header #navicon                                      {display: block; width: 1.7rem; height: 21px; cursor: pointer; margin-right: 3.9rem; position: relative; z-index: 10002;}
  .header #navicon:after                                {display: block; font-size: 1.8rem; font-weight: 600; color: var(--color0); line-height: 1em; margin: -0.32rem 0 0 2.4rem; font-family: 'transducer-condensed', sans-serif; content: "MENU"; transition: .2s ease-in-out;}
  .header #navicon span                                 {display: block; width: 100%; height: 3px; background: var(--color2); position: absolute; left: 0; 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: 9px;}
  .header #navicon span:nth-child(4)                    {bottom: 0;}
  .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:after                          {color: var(--color2);}
  .header.show                                          {}
  .header.show .collapse                                {left: 0; margin-top: 0; opacity: 1;}
  }

.main                                            {display: block; width: 100%; flex-grow: 1; position: relative; z-index: 2; overflow: hidden;}
  @media screen and (min-width: 1081px)         {
  .main                                         {margin-top: -3rem;}
  }

.footer                                         {display: block; width: 100%; background: white; margin-top: 10.5rem; position: relative; z-index: 1;}
.footer .wrapper                                {justify-content: space-between; align-items: flex-start; gap: 1.5rem; position: relative; z-index: 2;}
.footer .wrapper > div                          {display: block;}
.footer .wrapper .logos                         {display: block; width: 100%; margin: -8rem 0 2em;}
.footer .wrapper .logos > div                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em 2em; background: white; padding: 2em; box-sizing: border-box; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.15); position: relative;}
.footer .wrapper .logos > div:before            {display: block; width: 100%; height: 0.6em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.6em; content: "";}
.footer .wrapper .logos > div a                 {display: block; width: auto;}
.footer .wrapper .logos > div a img             {display: block; height: 100%; width: auto;}
.footer .links                                  {display: block;}
.footer .links li                               {display: inline-block; font-size: 0.9em; color: var(--color0); font-weight: 600; margin-top: 0.5em; padding-left: 0.8em; position: relative;}                                
.footer .links li:before                        {display: block; font-size: 0.8em; border-style: solid; border-width: 0.4em 0.6em 0.4em 0; border-color: transparent var(--color1) transparent transparent; position: absolute; left: 0; top: 0.1em; transform: rotate(180deg); content: "\A";}
.footer .links li a                             {color: var(--color0); text-decoration: underline; transition: .2s ease-in-out;}
.footer .links li a:hover                       {text-decoration-color: transparent; color: var(--color1);}
.footer .footer-contacts li                     {display: block;}
.footer .footer-contacts li:first-child         {margin-bottom: 0.4em;}
.footer .footer-contacts li a                   {display: flex; align-items: center; gap: 0.4em; font-size: 1em; color: var(--color0); font-weight: 600; transition: .15s ease-in-out;}
.footer .footer-contacts li a svg               {display: block; width: 1.1em; height: 1.1em; fill: var(--color1); position: relative; top: -0.1em;}
.footer .footer-contacts li a:hover             {color: var(--color1);}
.footer .address                                {display: block; width: 100%; line-height: 1.3em; color: var(--color0); font-weight: 400; margin-top: 1.2rem;}
.footer .address strong                         {font-weight: 600;}
.footer .soc                                    {display: flex; width: 100%; gap: 0.3em;}
.footer .soc a                                  {display: block; width: 1.6em; height: auto;}
.footer .soc a img                              {display: block; width: 100%; height: auto; transition: .15s ease-in-out;}
.footer .soc a:hover img                        {filter: brightness(1.2); transform: scale(1.15);}
.footer .more-links                             {display: flex; width: 100%; flex-wrap: wrap; gap: 0 0.2em; font-size: 0.8em; line-height: 1.4em; color: #666666; font-weight: 400; margin-top: 2.1rem;}
.footer .more-links a                           {display: flex; align-items: center; color: #666666; text-decoration: underline; transition: .2s ease-in-out;}
.footer .more-links a:after                     {display: block; width: 1px; height: 1em; background: black; opacity: 0.3; margin: 0 0.2em 0 0.5em; position: relative; top: -0.15em; content: "";}
.footer .more-links a:last-child:after          {display: none;}
.footer .more-links a:hover                     {color: var(--color0); text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {
  .footer                                       {padding-bottom: 3rem;}
  .footer .wrapper > div:nth-child(2)           {width: calc(100% - 13em - 13em - 1.5rem - 1.5rem);}
  .footer .wrapper > div:nth-child(3)           {width: 13em;}
  .footer .wrapper > div:nth-child(4)           {width: 13em;}
  .footer .wrapper .logos > div a               {height: 5em;}
  .footer .links                                {column-count: 3; column-gap: 1.5em; margin-top: -0.5em;}
  .footer .links li                             {width: 100%;}
  .footer .footer-contacts                      {display: block;}
  .footer .address                              {font-size: 0.8em;}
  .footer .soc,
  .footer .more-links                           {justify-content: flex-end;}
  .footer .more-links a:nth-child(2):after      {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .footer                                       {padding-bottom: 1rem;}
  .footer .wrapper > div                        {width: 100%;}
  .footer .wrapper .logos > div a               {height: 4em;}
  .footer .links                                {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2em 1em;}
  .footer .footer-contacts                      {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3em 1em; font-size: 1.3em; margin: 0.8rem 0;}
  .footer .address                              {text-align: center; font-size: 1em;}
  .footer .soc,
  .footer .more-links                           {justify-content: center;}
  }
  @media screen and (max-width: 768px)          {
  .footer .wrapper .logos > div                 {padding: 1.2em;}
  }  

article                                         {display: block; width: 100%;}

.main p, .main li                               {display: block; width: 100%; font-size: 1em; line-height: 1.4em; color: var(--color0); font-weight: 400;}
.main p                                         {margin-top: 0.7rem;}
.main strong                                    {font-weight: 700;}
.main em                                        {font-style: italic;}
.main p a, .main li a, .main td a               {color: var(--color1); text-decoration: underline; transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover,
.main td a:hover                                {color: var(--color1b); text-decoration-color: transparent;}
.main ul                                        {display: block; width: 100%; padding-left: 1.5rem; margin: 0; box-sizing: border-box;}
.main ul li                                     {display: block; font-size: 1em; padding-left: 0.8em; position: relative;}
.main ul li:before                              {display: block; font-size: 0.8em; border-style: solid; border-width: 0.4em 0.6em 0.4em 0; border-color: transparent var(--color1) transparent transparent; position: absolute; left: 0; top: 0.37em; transform: rotate(180deg); content: "\A";}
.main ol                                        {list-style: none; counter-reset: li; padding-left: 1.5rem; margin: 0; box-sizing: border-box;}
.main ol > li                                   {text-align: left; counter-increment: li; padding-left: 1.7em; box-sizing: border-box; position: relative;}
.main ol > li:first-child                       {margin-top: 0;}
.main ol > li:before                            {display: block; content: counter(li) "."; font-size: 1em; font-weight: bold; color: var(--color1); position: absolute; left: 0; top: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}

.section                                        {display: block; width: 100%; box-sizing: border-box; position: relative;}                                             
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section .wrapper > h2                          {margin-top: 0;}
  @media screen and (min-width: 1801px)         {
  .section                                      {padding: var(--section-padding) 0;}
  }
  @media screen and (max-width: 1800px)         {
  .section                                      {padding: var(--section-padding2) 0;}
  }

.button                                         {display: flex; justify-content: center; align-items: center; font-size: 1rem; line-height: 1em; font-weight: 600; color: white; text-align: center; border: none; padding: 0.9em 1em 0.8em; border: none; box-sizing: border-box; border-radius: var(--border-radius); cursor: pointer; transition: .15s ease-in-out;}
.button svg                                     {display: block; width: 0.7em; height: auto; fill: white; margin-left: 0.3em; position: relative; top: -0.11em; transform: rotate(-90deg); transition: .15s ease-in-out;}
.button.color0                                  {background: var(--color0);}
.button.color0:hover                            {background: black;}
.button.color1                                  {background: var(--color1);}
.button.color1:hover                            {background: var(--color1b);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}

.headline                                       {display: block; width: 100%; background: var(--color1); position: relative;}
.headline:after                                 {display: block; width: 100%; height: 100%; opacity: 0.5; mix-blend-mode: multiply;  background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; top: 0; content: "";}
.headline .wrapper                              {z-index: 5;}
.headline .wrapper h1                           {display: block; width: 100%; text-align: center; font-size: 3.5em; line-height: 1.1em; color: white; font-weight: 600;letter-spacing: 0.03em; font-family: 'transducer-condensed', sans-serif;}
  @media screen and (min-width: 1081px)         {
  .hp .headline                                 {padding: 6rem 0 10rem;}
  .headline                                     {padding: 6rem 0 4rem;}
  .headline:after                               {background-image: URL("images/hero.webp"); background-size: auto 180%;}
  }
  @media screen and (max-width: 1080px)         {
  .headline                                     {padding: 2rem 0 3rem;}
  .headline:after                               {background-image: URL("images/hero-mobile.jpg"); background-size: cover;}
  }

.headline2                                      {display: block; width: 100%; font-weight: 600; color: var(--color0); line-height: 1.1em; margin: 0 0 1.3rem; padding: 0 2rem; box-sizing: border-box; font-family: 'transducer-condensed', sans-serif;}
  @media screen and (min-width: 1081px)         {
  .headline2                                    {font-size: 2.3em;}
  }
  @media screen and (max-width: 1080px)         {
  .headline2                                    {text-align: center; font-size: 2em;}
  }

.flex                                           {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--gap); box-sizing: border-box;}
  @media screen and (min-width: 1081px)         {
  .flex.show-more                               {justify-content: flex-end; padding-inline: 2rem;}
  .flex.show-more .button                       {font-size: 0.9rem;}
  }

.pagination                                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.2em; background: var(--color3); border-radius: var(--border-radius); margin-top: var(--gap); padding: 0.8em; box-sizing: border-box;}
.pagination > a                                 {display: flex; width: 2.4em; height: 2.4em; justify-content: center; align-items: center; text-align: center; font-size: 0.9em; font-weight: 600; color: #666666; border-radius: 100%; cursor: pointer; transition: .2s ease-in-out;}
.pagination > a:hover                           {color: var(--color0); background: var(--color3);}
.pagination > a.sel                             {color: white; background: var(--color1); border: none;}

.breadcrumbs                                    {display: block; width: 100%;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; margin: 0; padding: 0 !important;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.9em; padding: 0 1.1em 0 0; margin: 0 0 0.15em 0.5em; position: relative;}
.breadcrumbs ul li:first-child                  {margin-left: 0;}
.breadcrumbs ul li:last-child                   {padding-right: 0; margin-right: 0;}
.breadcrumbs ul li:before                       {display: none;}
.breadcrumbs ul li:after                        {display: inline-block; width: 0.6em; height: 0.6em; opacity: 0.4; margin: 0; background: URL('images/arrow-black-right.svg') no-repeat center center; background-size: contain; position: absolute; right: 0; top: 0.2em; content: "";}
.breadcrumbs ul li:last-child:after             {display: none;}
.breadcrumbs ul li a                            {display: block; color: #252525; text-decoration: underline; font-weight: 500; opacity: 0.6; line-height: 1.3em; border: none; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; color: #252525 !important; font-weight: 600; padding-right: 1em; opacity: 1;}
.breadcrumbs ul li a:hover                      {opacity: 1; color: var(--color1); text-decoration-color: transparent;}
  @media screen and (min-width: 1081px)         {  
  .breadcrumbs                                  {margin: 1.4rem 0 1rem;}
  }
 @media screen and (max-width: 1801px)         {  
  .breadcrumbs                                  {margin: 0.3rem 0 1rem;}
  }
 @media screen and (min-width: 1800px)         {  
  .breadcrumbs                                  {margin: 1rem 0 1rem;}
  }
  @media screen and (max-width: 1080px)         {  
  .breadcrumbs                                  {margin: -0.6rem 0 1.1rem;}
  }
  @media screen and (max-width: 768px)          {  
  .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}
  .breadcrumbs::-webkit-scrollbar               {display: none;}
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs ul li a                          {white-space: nowrap;}
  } 

.cols                                           {display: flex; width: 100%; justify-content: space-between; gap: 0.6em; flex-wrap: wrap;}
.cols > *                                       {display: block; box-sizing: border-box; margin: 0; position: relative;}
.cols > *:before                                {display: block; width: 100%; height: 0.6em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.6em; content: "";}
.cols aside                                     {background: white; border-radius: var(--border-radius);}
.cols > div .article                            {padding: 0;}
  @media screen and (min-width: 1801px)         {
  .cols                                         {margin-bottom: var(--section-padding);}
  }
  @media screen and (max-width: 1800px)         {
  .cols                                         {margin-bottom: var(--section-padding2);}
  }
  @media screen and (min-width: 1081px)         {  
  .cols aside                                   {width: 20em; padding: 1em 1.5em;}                                       
  .cols > div                                   {width: calc(100% - 20.6em); background: white; padding: 3rem;}                                       
  }
  @media screen and (max-width: 1080px)         {  
  .cols aside,                                       
  .cols > div                                   {width: 100%;}                                       
  }

.aside-nav                                              {display: block; width: 100%; height: auto; box-sizing: border-box;}
.aside-nav nav                                          {display: block; width: 100%;}
.aside-nav nav li                                       {padding-left: 0;}
.aside-nav nav li:before                                {display: none;}

.aside-nav nav > ul > li > ul > li:before                              {display: block; font-size: 0.8em; border-style: solid; border-width: 0.4em 0.6em 0.4em 0; border-color: transparent var(--color1) transparent transparent; position: absolute; left: 0.5em; top: 0.37em; transform: rotate(180deg); content: "\A";}


.aside-nav nav li a                                     {display: block; width: 100%; color: black; font-weight: var(--color0); text-decoration: none; box-sizing: border-box; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.aside-nav nav li > svg                                 {display: block; width: 0.65em; height: 0.65em; fill: var(--color0); position: absolute; z-index: 2; cursor: pointer; transition: .15s ease-in-out;}
.aside-nav nav li > svg:hover                           {fill: var(--color1);}
.aside-nav nav > ul                                     {display: block; width: 100%; padding: 0;}
.aside-nav nav > ul > li                                {display: flex; width: 100%; flex-wrap: wrap; font-size: 1em; padding-top: 0.7em; padding-bottom: 0.6em; border-top: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; position: relative;}  
.aside-nav nav > ul > li:first-child                    {border-top: none;}
.aside-nav nav > ul > li > a,
.aside-nav nav > ul > li > span                         {font-size: 1em; font-weight: 600; padding-right: 1.5em; cursor:pointer; } 
.aside-nav nav > ul > li > svg                          {right: 0; top: 1em;}
.aside-nav nav > ul > li > a:hover,
.aside-nav nav > ul > li > span:hover                   {color: #15cc89;}
.aside-nav nav > ul > li > ul                           {display: none; width: 100%; padding: 0.3em 0}  
.aside-nav nav > ul > li > ul > li                      {display: block; width: 100%; margin-top: 0.2em; padding-left: 1.5em; box-sizing: border-box;}
.aside-nav nav > ul > li > ul > li > a                  {font-size: 0.9em; font-weight: 400;} 
.aside-nav nav > ul > li > ul > li > svg                {left: 0; top: 0.23em;}
.aside-nav nav > ul > li > ul > li > ul                 {display: none; width: 100%; padding: 0.2em 0 0.35em 0.9em;}  
.aside-nav nav > ul > li > ul > li > ul > li            {display: block; width: 100%; margin-top: 0.2em;}
.aside-nav nav > ul > li > ul > li > ul > li > a        {font-size: 0.9em; font-weight: 400; padding-left: 1em; box-sizing: border-box;} 
.aside-nav nav > ul > li > ul > li > ul > li > a:before {display: block; width: 0.65em; height: 0.65em; background: url('https://www.srovnani-makleru.cz/images/arrow-right-black.svg') no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.3em; content: "";}
.aside-nav nav > ul > li.show > svg,  
.aside-nav nav > ul > li > ul > li.show > svg           {transform: rotate(90deg);} 

.aside-nav nav > ul > li.show > ul                           { display: block; }  
.aside-nav nav > ul > li.show > ul li .sel                   { color: var(--color1); } 
 
  @media screen and (min-width: 1081px)                 {  
  .nav-show                                             {display: none;}
  }
  @media screen and (max-width: 1080px)                 {  
  .nav-show                                             {display: flex; width: 100%; height: 3.6rem; justify-content: space-between; align-items: center; background: var(--color0); padding: 0 1rem; border-radius: var(--border-radius); box-sizing: border-box; transition: .15s ease-in-out;}
  .nav-show span                                        {display: block; width: calc(100% - 1.5em); font-size: 1em; color: white; font-weight: 600;}
  .nav-show svg                                         {display: block; width: auto; height: 0.8em; fill: white; transition: .15s ease-in-out;}
  .nav-show:hover,
  .nav-show.show                                        {background: black;}
  .nav-show.show svg                                    {transform: rotate(90deg);}
  .aside-nav                                            {display: none; width: 100%; max-height: 20em; background: white; padding: 1rem; position: absolute; left: 0; top: 3.6rem; z-index: 1000; overflow-y: auto; box-shadow: 0 0.3em 0.5em rgba(0,0,0,0.2);}
  }

.grid                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6rem; position: relative; z-index: 5;}
.grid > div                                     {display: flex; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; padding: 1.6em; box-sizing: border-box; position: relative; border-radius: var(--border-radius); transition: .15s ease-in-out;}
.grid > div:before                              {display: block; width: 100%; height: 0.6em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.6em; content: "";}
.grid > div:after                               {display: block; width: 100%; height: 100%; opacity: 0.6; background-repeat: no-repeat; background-size: auto 100%; background-position: right center; position: absolute; left: 0; top: 0; content: ""; border-radius: var(--border-radius); overflow: hidden; transition: .35s ease-in-out;}
.grid > div > *                                 {position: relative; z-index: 2;}
.grid > div svg                                 {display: block; width: 2.3em; height: auto;}
.grid > div h2                                  {display: block; width: 100%; text-align: left; font-size: 1.8em; line-height: 1em; font-weight: 600; margin: 0.5rem 0 0; font-family: 'transducer-condensed', sans-serif;}
.grid > div div                                 {display: none; padding-top: 0.8em;}
.grid > div div ul                              {display: flex; flex-wrap: wrap; gap: 0.3em 0.8em; padding: 0;}
.grid > div div ul li                           {width: auto; font-size: 0.9em;}
.grid > div div ul li a                         {color: var(--color0);}
.grid > div div ul li a:hover                   {color: var(--color1);}

.grid > div.knihovna:after                  {background-image: URL("images/grid/img1.webp");}
.grid > div.katalog:after                  {background-image: URL("images/grid/img2n.webp");}
.grid > div.akce:after                  {background-image: URL("images/grid/img3n.webp");}
.grid > div.sluzby:after                  {background-image: URL("images/grid/img4.webp");}
.grid > div.zdroje:after                  {background-image: URL("images/grid/img5.webp");}
.grid > div.knihovny:after                  {background-image: URL("images/grid/img6.webp");}

.grid > div:hover:after                         {opacity: 0.1;}
  @media screen and (min-width: 1081px)         {
  .grid                                         {margin-top: -6rem;}
  .grid > div                                   {width: calc(33.33% - 0.4rem); min-height: 15rem;}
  .grid > div:nth-child(-n+3)                   {background: white;}
  .grid > div:nth-child(-n+3) h2                {color: var(--color0);}
  .grid > div:nth-child(-n+3) svg               {fill: var(--color1);}
  .grid > div:nth-child(n+4)                    {background: var(--color1);}
  .grid > div:nth-child(n+4) h2                 {color: white;}
  .grid > div:nth-child(n+4) svg                {fill: white;}
  .grid > div:nth-child(n+4) div ul li a        {color: white;}
  .grid > div:nth-child(n+4) div ul li a:hover  {color: white; opacity: 0.8;}
  .grid > div:nth-child(n+4) div ul li:before   {border-right-color: white;}
  }
  @media screen and (max-width: 1080px)         {
  .grid                                         {margin-top: 2rem;}
  .grid > div                                   {background: white;}
  .grid > div h2                                {color: var(--color0);}
  .grid > div svg                               {fill: var(--color1);}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .grid > div                                   {width: calc(50% - 0.3rem); min-height: 12rem;}
  } 
  @media screen and (max-width: 768px)          {
  .grid > div                                   {width: 100%; min-height: 12rem;}
  }    

.section-content                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1em; position: relative;}
.section-content > *:first-child                {margin-top: 0 !important;}
.section-content p                              {max-width: 56rem;}                    

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

.swiper                                         {display: block; width: 100%;}
.swiper-slide                                   {display: flex; height: auto; position: relative; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}

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

.date                                           {display: flex; width: 100%; align-items: center; gap: 0.5em; font-size: 1em; color: #666666; margin-top: 0.5em;}
.date svg                                       {display: block; width: 1.15em; height: auto; fill: #666666; position: relative; top: -0.1em;}	
.blog-articles                                  {display: flex; width: 100%; flex-wrap: wrap; gap: 12px; position: relative;}	
.blog-article-preview                           {display: flex; flex-direction: column; flex-wrap: wrap; background: white; border-radius: var(--border-radius); position: relative; box-sizing: border-box;}	
.blog-article-preview:before                    {display: block; width: 100%; height: 0.6em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.6em; content: "";}	
.blog-article-preview .img                      {display: block; width: 100%; flex-grow: 0; border-radius: var(--border-radius) var(--border-radius) 0 0; overflow: hidden; position: relative;}	
.blog-article-preview .img span                 {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}	
.blog-article-preview .img span img             {display: block; width: auto; height: 100%; object-fit: cover; transition: .15s ease-in-out;}	
.blog-article-preview .img:hover span img       {opacity: 0.8;}	
.blog-article-preview .info                     {display: block; width: 100%; flex-wrap: wrap; flex-grow: 2; padding: 1.35rem 1.35rem 4.4rem; position: relative; box-sizing: border-box;}	
.blog-article-preview .info .title              {display: block; width: 100%; text-align: left; font-size: 1.1em; line-height: 1.2em; font-weight: 600; color: var(--color0);} 	
.blog-article-preview .info .title a            {color: var(--color0); transition: .15s ease-in-out;}	
.blog-article-preview .info .title a:hover      {color: var(--color1);}	
.blog-article-preview .info .date               {font-size: 0.8em; margin-top: 0.5em;}	
.blog-article-preview .info .button             {font-size: 0.75em; margin-top: 0.6em; position: absolute; bottom: 1.35rem;}	
  @media screen and (min-width: 1281px)         {	
  .blog-articles.b4 .blog-article-preview       {width: calc(25% - 9px);}	
  .blog-articles.b3 .blog-article-preview       {width: calc(33.33% - 8px);}	
  }	
  @media screen and (min-width: 1081px) and (max-width: 1280px){	
  .blog-articles .blog-article-preview          {width: calc(33.33% - 8px);}	
  }	
  @media screen and (min-width: 641px) and (max-width: 1080px){	
  .blog-articles .blog-article-preview          {width: calc(50% - 6px);}	
  }	
  @media screen and (max-width: 640px)          {	
  .blog-articles .blog-article-preview          {width: 100%;}	
  }	
 	
.blog-articles.b3 .blog-article-preview .img    {padding-top: 60%;}	
.blog-articles.b4 .blog-article-preview .img    {padding-top: 100%;}	
.blog-articles .swiper .swiper-slide            {padding-bottom: 0.6em;}	
.blog-articles .swiper .blog-article-preview    {width: 100%; height: auto;}	
  @media screen and (min-width: 641px) and (max-width: 1080px){	
  .blog-articles .swiper                        {width: 100%; overflow: visible;}	
  .blog-articles .swiper .swiper-slide          {opacity: 0.35;}	
  .blog-articles .swiper .swiper-slide-active,	
  .blog-articles .swiper .swiper-slide-next     {opacity: 1;}	
  }	
  @media screen and (max-width: 640px)          {	
  .blog-articles .swiper                        {width: 100%; overflow: visible;}	
  .blog-articles .swiper .swiper-slide          {opacity: 0.35;}	
  .blog-articles .swiper .swiper-slide-active   {opacity: 1;}	
  }	
  @media screen and (min-width: 1081px)         {	
  .hp .blog-articles .flex                      {width: auto; position: absolute; right: 0; top: 1.6em;}	
  }	
  @media screen and (max-width: 1080px)         {	
  .hp .blog-articles .flex                      {justify-content: center;}	
  }	
 	

 
.article                                        {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap); box-sizing: border-box; position: relative;}
.article h1, .article h2, .article h3,
.cols h1                                        {display: block; width: 100%; text-align: left; color: var(--color0); line-height: 1.1em; letter-spacing: 0.03em; font-weight: 600; font-family: 'transducer-condensed', sans-serif;}
.article h2                                     {margin-bottom: -0.5rem;}
.article h3                                     {margin-bottom: -0.5rem; color: var(--color1);}
.article .date                                  {margin-top: -0.7rem;}
.article p                                      {text-align: left;}
.article .imgFull                               {display: block; width: 100%; }
.article .imgFull img                           {display: block; width: 100%; }
.article .img                                   {display: block; width: 100%; padding-top: 56%; position: relative; border-radius: var(--border-radius); overflow: hidden;}
.article .img span                              {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.article .img span img                          {display: block; width: 100%; height: auto; transition: .15s ease-in-out;}
.article .embed                                 {display: block; width: 100%; overflow: hidden;}
.article .embed > *                             {display: block; width: 100%;}
.article .highlighted                           {display: block; width: 100%; padding: 1.5rem 2rem; background: var(--color1);}
.article .highlighted > *                       {text-align: center; color: white;}
.article .highlighted > *:first-child           {margin-top: 0;}
  @media screen and (min-width: 1801px)         {
  .article                                      {margin-bottom: var(--section-padding);}
  .cols .article                                {margin-bottom: 0;} 
  }
  @media screen and (max-width: 1800px)         {
  .article                                      {margin-bottom: var(--section-padding2);}
  .cols .article                                {margin-bottom: 0;} 
  }
  @media screen and (min-width: 1281px)         {
  .article                                      {padding: 3rem 15rem;} 
  }
  @media screen and (min-width: 769px) and (max-width: 1280px){
  .article                                      {padding: 3rem calc(1rem + 7vw);}
  }
  @media screen and (min-width: 1081px)         {
  .article                                      {background: white; border-radius: var(--border-radius); /* border: solid 1px rgba(0,0,0,0.1); */}
  .article:before                               {display: block; width: 100%; height: 0.6em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.6em; content: "";}
  .article h1, .cols h1                         {font-size: 2.8rem;}
  .article h2                                   {font-size: 2.2rem;}
  .article h3                                   {font-size: 1.7rem;}
  }
  @media screen and (max-width: 1080px)         {
  .article                                      {padding-bottom: calc(1.35 * var(--gap)); margin-bottom: var(--gap); border-bottom: solid 2px rgba(0,0,0,0.2);}
  .article h1, .cols h1                         {font-size: 2.2rem;}
  .article h2                                   {font-size: 1.8rem;}
  .article h3                                   {font-size: 1.4rem;}
  }

.carousel                                       {display: block; width: 100%; position: relative;}
.carousel .swiper-slide                         {display: block; position: relative; box-sizing: border-box; overflow: hidden;}
.carousel .swiper-slide > a                     {display: block; width: 100%; padding-top: 65%; border-radius: var(--border-radius); overflow: hidden; position: relative;}
.carousel .swiper-slide > a span                {display: flex; width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 0;}
.carousel .swiper-slide > a span img            {display: block; width: 100%; height: 100%; object-fit: cover; transition: .25s ease-in-out;}
.carousel .swiper-slide:hover a span img        {opacity: 0.8;}
  @media screen and (min-width: 1081px)         {
  .carousel .swiper                             {overflow: hidden;}
  }
  @media screen and (max-width: 1080px)         {
  .carousel .swiper                             {overflow: visible;}
  }

.table                                          {display: block; width: 100%; overflow-x: auto; position: relative;}
.table.sign                                     {padding-bottom: 1.7rem;}
.table.sign:after                               {display: block; width: 100%; text-align: center; font-size: 0.85em; color: #666666; font-weight: 500; position: absolute; left: 0; bottom: 0; content: "Pohyb do stran";}
.table.sign:before                              {display: block; width: 10em; height: 0.8em; font-size: 0.8em; background: URL('images/arrow-black-left.svg') no-repeat left center, URL('images/arrow-black-right.svg') no-repeat right center; background-size: auto 100%; opacity: 0.55; position: absolute; left: calc(50% - 5em); bottom: 0.26em; content: ""; animation-name: overflow; animation-duration: 1.7s; animation-iteration-count: infinite;}
.table .overflow                                {display: block; min-width: 100%; overflow-x: auto; overflow-y: visible; scrollbar-color: var(--color1) rgba(0,0,0,0.15); scrollbar-width: thin;}
.table table                                    {min-width: 100%;}
.table table th,
.table table td                                 {text-align: center; font-size: 0.8em; line-height: 1.3em; font-weight: 400; padding: 0.8em 0.5em 0.5em; background: var(--color3)}
.table table th                                 {background: var(--color0); color: white;}
.table table .emp1 td                           {background: var(--color3b);}
.table.typ2 table tr td:first-child             {background: var(--color0); color: white; text-align: left;}
.table.typ3 table th                            { font-weight:600; }
.table.typ3 table th,
.table.typ3 table tr:nth-child(even) td         { background-color:rgb(221, 221, 221); color:Black; }
.table.typ3 table tr:nth-child(odd) td          { background-color:#ffffff; color:Black; }

@keyframes overflow                             {
                                                0%      {opacity: 0; width: 10em; left: calc(50% - 5em);}
                                                100%    {opacity: 0.4; width: 12em; left: calc(50% - 6em);}
}

.contacts                                       {display: flex; width: 100%; flex-wrap: wrap; gap: 2em 1.8em;}
.contacts > div                                 {display: block;}
.contacts > div h2                              {display: block; width: 100%; text-align: left; font-size: 1.4em; color: var(--color0); line-height: 1.1em; letter-spacing: 0.03em; font-weight: 600; font-family: 'transducer-condensed', sans-serif;}
.contacts > div a                               {white-space: nowrap;}
  @media screen and (min-width: 1081px)         {
  .contacts > div                               {width: calc(33.33% - 1.2em);}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .contacts > div                               {width: calc(50% - 0.9em);}
  }
  @media screen and (max-width: 640px)          {
  .contacts > div                               {width: 100%;}
  }

.team                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em 0.6em; margin: calc(2 * var(--gap)) 0;}
.team > div                                     {display: flex; gap: 1em; background: white; position: relative; border: solid 1px rgba(0,0,0,0.15); border-radius: var(--border-radius); box-sizing: border-box;}
.team > div:before                              {display: block; width: 100%; height: 0.4em; opacity: 0.3; background: URL("images/shadow.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; bottom: -0.4em; content: "";}
.team > div .img                                {display: block; width: 6em; height: 6em; border-radius: var(--border-radius); overflow: hidden;}
.team > div .img img                            {display: block; width: 100%; height: 100%; object-fit: cover;}
.team > div div                                 {display: block;}
.team > div div h2                              {display: block; width: 100%; text-align: left; font-size: 1.4em; color: var(--color0); line-height: 1.1em; letter-spacing: 0.03em; font-weight: 600; font-family: 'transducer-condensed', sans-serif;}
.team > div div a                               {white-space: nowrap;}
  @media screen and (min-width: 961px)          {
  .team > div                                   {width: calc(50% - 0.3em);}
  }
  @media screen and (max-width: 960px)          {
  .team > div                                   {width: 100%; justify-content: center; flex-wrap: wrap;}
  }  
  @media screen and (min-width: 769px)          {
  .team > div                                   {justify-content: space-between;}
  .team > div div                               {width: calc(100% - 7em);}
  }
  @media screen and (max-width: 768px)          {
  .team > div                                   {justify-content: center; flex-wrap: wrap;}
  .team > div div                               {width: 100%;}
  .team > div div h2,
  .team > div div p                             {text-align: center;}
  }
  @media screen and (min-width: 641px)          {
  .team > div                                   {padding: 1.6em;}
  }
  @media screen and (max-width: 640px)          {
  .team > div                                   {padding: 1.2em;}
  } 

.form                                           {display: flex; width: 100%; justify-content: space-between; row-gap: 0.6rem; flex-wrap: wrap; background: white; margin-top: calc(2 * var(--gap)); box-sizing: border-box;}
.form h2                                        {text-align: center;}
.form .form-item                                {display: block; position: relative;}
.form .form-item:nth-of-type(4),
.form .form-item:nth-of-type(5)                 {width: 100%;}
.form .form-item.full                           { width:100%; }
.form .form-item input,
.form .form-item textarea                       {display: block; width: 100%; font-size: 1em; font-weight: 600; color: var(--color0); background: var(--color3b); border: none; outline: solid 1px transparent; padding: 1.4em 1.4em 1.2em; border-radius: 0.2rem; box-sizing: border-box; font-family: 'proxima-nova', sans-serif; transition: .2s ease-in-out;}
.form .form-item textarea                       {height: 18em;}
.form .form-item input:focus,
.form .form-item textarea:focus                 {background: var(--color3); outline-color: var(--color2);}
.form .form-item input::placeholder             {color: #666666; opacity: 1; font-weight: 500;}
.form .form-item textarea::placeholder          {color: #666666; opacity: 1; font-weight: 500;}
.form .flex                                     {justify-content: center; margin: 0;}  
.form p                                         {width: 100%; text-align: center; font-size: 0.9em; margin: 0.5rem 0 0.3rem; opacity: 0.8;}
  @media screen and (min-width: 1081px)         {
  .form                                         {padding: 3rem 10%;}
  }
  @media screen and (max-width: 1080px)         {
  .form                                         {padding: calc(1rem + 3vw);}
  }  
  @media screen and (min-width: 769px)          {
  .form .form-item                              {width: calc(33.33% - 0.4rem);}
  }
  @media screen and (max-width: 768px)          {
  .form .form-item                              {width: 100%;}
  }

.gallery-grid                                   {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
.gallery-grid > div                             {display: block; position: relative; border-radius: var(--border-radius); overflow: hidden;}
.gallery-grid > div img                         {display: block; width: 100%; height: 100%; object-fit: cover; transition: .2s ease-in-out;}
.gallery-grid > div:after                       {display: block; width: 100%; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); position: absolute; left: 0; bottom: 0; z-index: 1; content: ""; transition: .2s ease-in-out;}
.gallery-grid > div h2                          {display: flex; width: 100%; height: 100%; justify-content: center; align-items: flex-end; text-align: center; font-size: 1.5em; color: white; line-height: 1.1em; letter-spacing: 0.03em; font-weight: 600; font-family: 'transducer-condensed', sans-serif; padding: 1.5rem; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2;}
.gallery-grid > div a                           {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3;}
.gallery-grid > div:hover img,
.gallery-grid > div:hover:after                 {opacity: 0.8;}
  @media screen and (min-width: 1081px)         {
  .gallery-grid > div                           {width: calc(33.33% - 0.4em); height: 16rem;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .gallery-grid > div                           {width: calc(50% - 0.3em); height: 26vw;}
  }
  @media screen and (max-width: 640px)          {
  .gallery-grid > div                           {width: 100%; height: 40vw;}
  }

.calendar                                       {display: flex; width: 100%; flex-wrap: wrap; gap: 1em 0;}
.calendar h2                                    {display: block; width: 100%; text-align: center; color: black; font-weight: 700; font-size: 1.3em; line-height: 1em; margin: 1em 0 0; padding: 0.8rem 1rem 0.6rem; background: var(--color3); box-sizing: border-box;}
.calendar h2:not(:first-of-type)                {margin-top: 2rem;}
  @media screen and (min-width: 769px)          {
  .calendar .article-preview                    {background: var(--color3);}
  .calendar .article-preview:after              {display: none;}
  }