.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/*------------------------RESET---------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ul,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; text-decoration:none; list-style-type: none;}
article, aside, details, figcaption, figure, hgroup, menu, nav, section { display: block; }
/*------------------------------------------------------*/

html                                            {background: white; overflow-x: hidden;}
html, body, form                                {width: 100%;}
body                                            {display: block; max-width: 2000px; background: #f5f5f5; margin: 0 auto; font-family: 'usual', 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;}
  }

::-webkit-scrollbar                             {width: 0.6em; height: 0.6em; -webkit-overflow-scrolling: auto !important;}
::-webkit-scrollbar-track                       {border-radius: 0; background: var(--color3);}
::-webkit-scrollbar-thumb                       {background:  var(--color2);}
::-webkit-scrollbar-thumb:hover                 {background:  var(--color2b);}

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

:root                                           {
                                                --color0:  #252525;
                                                --color0b: black;
                                                --color1:  #01bbeb;
                                                --color1b: #0199c0;
                                                --color2:  #ff4006;
                                                --color2b: #ce3101;
                                                --color3:  #2b334b;
                                                --color3b: #1a2034;
                                                --color4:  #bcc6da;
                                                --color5:  rgba(0,0,0,0.07);
                                                --gap: 2rem;
                                                --border-radius: 0.2rem;
                                                }

.hp .header                                     {position: absolute; top: 0; left: 0; z-index: 1000;}

.header                                         {display: block; width: 100%; position: relative; z-index: 1000;}
.header .logo-navicon                           {display: block;}
.header .logo-navicon .wrapper                  {height: 100%;}
.header .logo-navicon .wrapper .logo            {display: flex; width: auto; align-items: center; position: relative; z-index: 10000;}
.header .logo-navicon .wrapper .logo img        {display: block; width: auto; height: 100%;} 
.header .collapse nav span                      {display: flex;}
.header .collapse nav span a                    {display: flex; color: var(--color4); font-weight: 600; transition: .15s ease-in-out;}
.header .collapse .menu                         {display: block; width: 100%;}
.header .collapse .menu .wrapper                {align-items: center; gap: 1.5em;}
.header .collapse .menu .wrapper .phone         {display: flex; align-items: center; font-weight: 700; transition: .15s ease-in-out;}
.header .collapse .menu .wrapper .phone svg     {display: block; width: 1.2em; height: 1.2em; fill: var(--color2); margin-right: 0.4em;}
.header .collapse .menu .wrapper .phone:hover   {color: var(--color2);}
.header .collapse .menu .wrapper .lang          {/*display: flex; -- az bude AJ toto vratit*/display:none; align-items: center; gap: 0.4em;}
.header .collapse .menu .wrapper .lang a        {display: block; font-size: 0.85em; opacity: 0.4; font-weight: 400; transition: .15s ease-in-out;}
.header .collapse .menu .wrapper .lang a:hover  {opacity: 0.8;}
.header .collapse .menu .wrapper .lang a.sel    {opacity: 1; font-weight: 700;}
  @media screen and (min-width: 1081px)         {
  .header .logo-navicon                         {display: block; width: 100%; height: 5rem; position: absolute; top: 3.2rem;}
  .header .logo-navicon .wrapper                {justify-content: flex-start;}
  .header .logo-navicon .wrapper .logo          {height: 80%;}
  .header .logo-navicon .wrapper .logo img:last-child
                                                {display: none;}
  .header .logo-navicon .wrapper #navicon       {display: none;}
  .header .collapse                             {display: block; width: 100%;}
  .header .collapse nav                         {display: flex; width: 100%; height: 3.2rem; justify-content: center; flex-wrap: wrap; background: var(--color3);}
  .header .collapse nav span                    {height: 100%; font-size: 1em; border-right: solid 1px black;}
  .header .collapse nav span:first-child        {border-left: solid 1px black;}
  .header .collapse nav span a                  {height: 100%; align-items: center; font-size: 0.85em; padding: 0 2.5em; transition: .15s ease-in-out;}
  .header .collapse nav span a:hover,
  .header .collapse nav span a.sel              {background: var(--color3b); color: white;}
  .header .collapse .menu                       {height: 5rem; position: absolute; top: 3.2rem;}
  .header .collapse .menu .wrapper              {height: 100%; justify-content: flex-end;}
  .header .collapse .menu .wrapper .phone       {font-size: 1em;}
  .header .collapse .menu .wrapper .phone,
  .header .collapse .menu .wrapper .lang a      {color: var(--color0);}
  }
  @media screen and (max-width: 1080px)         {
  .header .logo-navicon                         {width: 100%; height: 5rem;}
  .header .logo-navicon .wrapper                {justify-content: space-between;}
  .header .logo-navicon .wrapper .logo          {height: 70%;}
  .header .logo-navicon .wrapper .logo img:first-child
                                                {display: none;}
  .header #navicon                              {display: block; width: 1.7em; height: 18px; cursor: pointer; position: relative; z-index: 10002;}
  .header #navicon span                         {display: block; width: 100%; height: 2px; background: white; 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: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header #navicon:hover span                   {background: var(--color2);}
  .header .collapse                             {width: 100vw; height: 100vh; min-height: 20em; font-size: 1.3em; background: var(--color3); padding: 6em 15% 3em; position: fixed; left: -200vw; top: 0; z-index: 1000; box-sizing: border-box; opacity: 0; overflow-y: auto; transform: scale(0.7,0.7); transition: opacity .6s ease-in-out, transform .6s ease-in-out;}
  .header .collapse nav                         {width: 100%;}
  .header .collapse nav span                    {font-size: 1em; margin-bottom: 0.8em;}
  .header .collapse nav span a:hover            {color: white;}                  
  .header .collapse nav span a.sel              {color: var(--color2);}                  
  .header .collapse .menu .wrapper              {width: 100%; margin: 3rem 0 0;}
  .header .collapse .menu .wrapper .phone,
  .header .collapse .menu .wrapper .lang a      {color: var(--color4);}
  .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.show .collapse                        {left: 0; transform: scale(1,1); opacity: 1;}
  .header:not(.hp)                              {background: var(--color3);}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .header .collapse .menu .wrapper              {justify-content: space-between;}
  .header .collapse .menu .wrapper .phone       {font-size: 0.9em; position: absolute; right: 0; top: -15rem;}
  }
  @media screen and (max-width: 540px)          {
  .header .collapse .menu .wrapper              {display: block;}
  .header .collapse .menu .wrapper .phone       {font-size: 0.9em;}
  .header .collapse .menu .wrapper .button      {margin: 2em 0;}
  }  

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

.footer                                         {display: block; width: 100%; padding: 5rem 0; background: var(--color3); overflow: hidden;}
.footer .wrapper                                {justify-content: space-between; align-items: flex-start;}
.footer .wrapper > div                          {display: block; position: relative;}
.footer .wrapper > div h2                       {display: block; width: 100%; font-size: 1.1em; color: white; font-weight: 700; margin: 0 0 1rem; padding: 0; position: relative; z-index: 2;}
.footer .wrapper > div h2:after                 {display: none;}
.footer .wrapper > div ul                       {display: block;}
.footer .wrapper > div ul li                    {display: flex; font-size: 0.9em; color: var(--color4); font-weight: 400; margin-bottom: 0.7em;}
.footer .wrapper > div ul li:last-child         {margin-bottom: 0;}
.footer .wrapper > div ul li svg                {display: block; width: auto; height: 1.1em; fill: var(--color1); margin-right: 0.4em;}
.footer .wrapper > div ul li a                  {display: flex; color: var(--color4); transition: .15s ease-in-out;}
.footer .wrapper > div ul li a:hover            {color: white;}
.footer .wrapper > div > img                    {display: block;}
.footer .wrapper > ul                           {display: flex; align-items: center; position: absolute; left: 0; bottom: 0;}
.footer .wrapper > ul li                        {display: flex; align-items: center;  font-size: 0.7em; color: var(--color4); font-weight: 400; gap: 0.4em;}
.footer .wrapper > ul li:first-child:after      {display: block; margin: -0.15em 0.4em 0.15em 0; content: "|";}
.footer .wrapper > ul li a                      {color: var(--color4); transition: .2s ease-in-out;}
.footer .wrapper > ul li a:hover                {color: white;}
  @media screen and (min-width: 1081px)         {
  .footer .wrapper                              {padding-bottom: 4rem;}
  .footer .wrapper > div:nth-child(1)           {width: 14em;}           
  .footer .wrapper > div:nth-child(2)           {width: 26em;}           
  .footer .wrapper > div:nth-child(3)           {width: 16em;}           
  .footer .wrapper > div:nth-child(2) ul        {display: flex; flex-wrap: wrap;}
  .footer .wrapper > div:nth-child(2) ul li     {width: 50%; font-size: 0.8em;}
  .footer .wrapper > div > img                  {height: 22em; width: auto; position: absolute; left: -11.8em; top: -4em;}
  }
  @media screen and (max-width: 1080px)         {
  .footer .wrapper                              {gap: 3em;}
  .footer .wrapper > div                        {width: 100%;}           
  .footer .wrapper > div h2                     {text-align: center; font-size: 1.4em;}
  .footer .wrapper > div ul                     {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.4em 1em;}           
  .footer .wrapper > div:nth-child(1) ul li     {font-size: 1.1em;}           
  .footer .wrapper > div:nth-child(3)           {height: 23em;}           
  .footer .wrapper > div > img                  {width: 60em; height: auto; position: absolute; left: calc(50% - 30em); top: -7em;}
  .footer .wrapper > ul                         {width: 100%; justify-content: center;}
  }

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

.main .headline                                 {display: flex; width: 100%; font-weight: 700; line-height: 1.3em; color: var(--color1); margin-bottom: 2rem; position: relative; z-index: 5;}
.main .headline span                            {display: block; background: #f5f5f5; padding-right: 1rem; box-sizing: border-box;}
.main .headline span:after                      {display: block; width: 100%; height: 2px; background: var(--color1); position: absolute; left: 0; top: calc(50% - 1px); z-index: -1; content: "";}
.main h1, .main h2, .main h3                    {display: block; width: 100%; color: var(--color3); font-weight: 700; line-height: 1.3em; position: relative;}
.main h2                                        {margin: 0 0 0.8rem;}
.main h3                                        {margin: 0 0 0.6rem;}
.main h2 span, .main h3 span                    {font-weight: 400;}                 
.main p, .main li                               {display: block; width: 100%; font-size: 1em; line-height: 1.5em; 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                           {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color0b); text-decoration-color: transparent;}
.main .highlighted                              {font-size: 1.2rem; line-height: 1.2em; font-weight: 700;}
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .main .headline span:after                    {width: 200%;}
  }
  @media screen and (min-width: 1081px)         {
  .main .headline                               {margin-top: 1.5rem;}
  .main h1                                      {font-size: 3rem;}
  .main h2                                      {font-size: 1.8rem;}
  .main h3                                      {font-size: 1.4rem;}
  .hp .main h2                                  {font-size: 2.2rem;}
  }
  @media screen and (max-width: 1080px)         {
  .main .headline                               {justify-content: center; margin-top: -1rem;}
  .main .headline span                          {padding-left: 1rem;}
  .main h1                                      {font-size: 2.1rem;}
  .main h2                                      {font-size: 1.5rem;}
  .main h3                                      {font-size: 1.2rem;}
  .hp .main h2                                  {font-size: 1.8rem;}
  }

.title                                          {padding-bottom: 0.5em; position: relative;}
.title:after                                    {display: block; width: 3em; height: 0.12em; background: linear-gradient(to right, var(--color1) 0%, var(--color1) 50%, var(--color2) 50%, var(--color2) 100%); border-radius: var(--border-radius); position: absolute; left: 0; bottom: 0; content: "";}
.title.centered:after                           {left: calc(50% - 1.5em);} 

.article.sluzba-zivotni-prostredi h3            {color: var(--color1);}
.article.sluzba-bozp-po h3                      {color: var(--color2);}
.article.sluzba-investice h3                    {color: var(--color3);}
.article.sluzba-ostatni h3                      {color: var(--color4);}

.section                                        {display: block; width: 100%; padding: calc(3vw + 2rem) 0; box-sizing: border-box; position: relative;}                                             
.section.dark                                   {background: var(--color3);}
.section.dark h2                                {color: white;}
.section-content                                {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--gap); position: relative;}

.swiper-slide                                   {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: 2.4em; height: 2.4em; font-size: 1em; padding: 0.5em; border-radius: var(--border-radius); box-sizing: border-box; position: absolute; z-index: 5; margin: 0; cursor: pointer; top: calc(50% - 1.2em); transition: .15s ease-in-out;} 
.swiper-button-prev                             {right: auto;}
.swiper-button-next                             {left: auto;}                                 
.swiper-button-prev svg,
.swiper-button-next svg                         {display: block; width: 100%; height: 100%; transition: .15s ease-in-out;}
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-disabled                         {opacity: 0.2 !important;}
  @media screen and (min-width: 1301px)         {
  .swiper-button-prev,
  .swiper-button-next                           {background: transparent; border: solid 2px var(--color2);} 
  .swiper-button-prev svg,
  .swiper-button-next svg                       {fill: var(--color0);}
  .swiper-button-prev:hover,
  .swiper-button-next:hover                     {background: var(--color2);}
  .swiper-button-prev:hover svg,
  .swiper-button-next:hover svg                 {fill: white;} 
  .swiper-button-prev                           {left: -4rem;}
  .swiper-button-next                           {right: -4rem;}
  }
  @media screen and (max-width: 1300px)         {
  .swiper-button-prev,
  .swiper-button-next                           {background: var(--color2); border: none;} 
  .swiper-button-prev svg,
  .swiper-button-next svg                       {fill: white;}
  .swiper-button-prev:hover,
  .swiper-button-next:hover                     {background: var(--color2b);}
  .swiper-button-prev                           {left: -1.2rem;}
  .swiper-button-next                           {right: -1.2rem;}
  }

.flex                                           {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem; margin-top: var(--gap);}

.button                                         {display: flex; justify-content: center; align-items: center; line-height: 1em; font-weight: 700; text-align: center; gap: 0.45em; background: transparent; border: none; padding: 0.9em 1.3em; box-sizing: border-box; border-radius: var(--border-radius); cursor: pointer; transition: .15s ease-in-out;}
.button svg                                     {display: block; width: 1em; height: auto; margin: 0.1em 0 0 0; transition: .15s ease-in-out;}
.button.color1                                  {background: var(--color1); color: white;} 
.button.color1:hover                            {background: var(--color1b);}
.button.border-color2                           {color: var(--color0); border: solid 2px var(--color2);} 
.button.border-color2 svg                       {fill: var(--color2);}
.button.border-color2:hover                     {color: white; background: var(--color2);}
.button.border-color2:hover svg                 {fill: white;}
.button.border-color4                           {color: var(--color4); border: solid 2px var(--color4);} 
.button.border-color4:hover                     {color: var(--color3); background: white;}
  @media screen and (min-width: 769px)          {
  .button                                       {font-size: 1rem;}
  }
  @media screen and (max-width: 768px)          {
  .button                                       {font-size: 0.9rem;}
  }

.hero                                           {overflow-x: hidden; overflow-y: visible;}
.hero:before                                    {display: block; height: 100%; position: absolute; top: 0; content: "";}
.hero .text                                     {display: block;}
.hero .text h1 > span                           {display: block; font-size: 0.45em; line-height: 1.3em;}
.hero .text h1 > span > span                    {font-weight: 400; margin: 0 0.1em; position: relative; top: -0.05em;}
.hero .text h1 > span > span:nth-child(1)       {color: var(--color1);}
.hero .text h1 > span > span:nth-child(2)       {color: var(--color2);}
  @media screen and (min-width: 1081px)         {
  .hero                                         {padding: 11em 0 8em;}
  .hero:before                                  {width: 200%; left: -50%; background: URL("images/hero.webp") no-repeat center top 3rem; background-size: auto calc(100% - 3rem);}
  .hero .wrapper                                {display: block;}
  .hero .text                                   {width: 22.5em;}
  .hero .text h1                                {text-align: left;}
  .hero .text p                                 {text-align: left;}
  .hero .text .flex                             {justify-content: flex-start;}
  }
  @media screen and (max-width: 1080px)         {
  .hero                                         {padding: 8em 0 10em;}
  .hero:before                                  {width: 100%; left: 0; background: URL("images/hero-mobile.jpg") no-repeat center top; background-size: cover;}
  .hero .wrapper .text                          {width: 100%; max-width: 32em;}
  .hero .text h1                                {font-size: 2.7rem;}
  .hero .wrapper .text h1,
  .hero .wrapper .text p,
  .hero .wrapper .text .button                  {text-align: center; color: white;}
  }

.infographics                                   {display: flex; width: 100%; justify-content: space-between; gap: 0.4em; flex-wrap: wrap; margin-top: 2rem;}
.infographics > div                             {display: flex; flex-wrap: wrap; background: white; border: solid 1px rgba(0,0,0,0.1); padding: 1.2em; box-sizing: border-box;}
.infographics > div img                         {display: block; width: 3.4rem; height: 3.4rem;}
.infographics > div span                        {display: block; font-size: 0.8em; color: var(--color0); font-weight: 400;}
  @media screen and (min-width: 1081px)         {
  .hp .infographics                             {margin: -8em 0;}
  .infographics > div                           {justify-content: space-between; align-items: center;}
  .infographics > div span                      {width: calc(100% - 4.2rem); text-align: left;}                 
  }
  @media screen and (max-width: 1080px)         {
  .hp .infographics                             {margin: -8em 0 0;}
  .infographics > div                           {justify-content: center; align-items: flex-start;}
  .infographics > div span                      {width: 100%; text-align: center; margin-top: 0.9em;}                 
  }
  @media screen and (min-width: 769px)          {
  .infographics > div                           {width: calc(25% - 0.3em);}
  }
  @media screen and (max-width: 768px)          {
  .infographics > div                           {width: calc(50% - 0.3em);}
  }

.blog-article-preview                                 {display: block; position: relative;}
.blog-article-preview .img                            {display: block; width: 100%; padding-top: 60%; overflow: hidden; position: relative; background: white; border-radius: var(--border-radius);}
.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: 100%; height: auto; transition: .15s ease-in-out;}
.blog-article-preview .info                           {display: block; width: 100%; margin-top: 1.15rem; padding-left: 3.4em; position: relative; box-sizing: border-box;}
.blog-article-preview .info .title                    {text-align: left; font-size: 1.3em; margin: 0.8rem 0 0; padding: 0; transition: .15s ease-in-out;} 
.blog-article-preview .info .title:after              {display: none;}
.blog-article-preview .info p                         {font-size: 0.9em; margin-top: 0.3rem;}
.blog-article-preview .info .date                     {display: block; width: 2.6em; position: absolute; left: 0; top: 0;}
.blog-article-preview .info .date span                {display: block; width: 100%; text-align: center;}
.blog-article-preview .info .date span:nth-child(1)   {color: white; font-size: 1.1em; font-weight: 700; background: var(--color2); padding-top: 0.3rem; border-radius: var(--border-radius) var(--border-radius) 0 0;}
.blog-article-preview .info .date span:nth-child(2)   {color: white; font-size: 0.7em; font-weight: 700; background: var(--color2); padding: 0.1rem 0 0.4rem; border-radius: 0 0 var(--border-radius) var(--border-radius);}
.blog-article-preview .info .date span:nth-child(3)   {color: var(--color2); font-size: 0.8em; font-weight: 700; margin-top: 0.25rem;}
.blog-article-preview > a                             {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;}
.blog-article-preview:hover .img span img             {opacity: 0.8;}
.blog-article-preview:hover .info .title              {color: var(--color2) !important;}
  @media screen and (min-width: 1081px)               {
  aside .blog-article-preview:not(:first-child)       {margin-top: -1rem;}
  aside .blog-article-preview .info                   {padding: 0; margin-top: 0.5rem; font-size: 0.8em;}
  aside .blog-article-preview .info .date             {width: 100% !important; position: relative !important; left: auto !important; top: auto !important;}
  aside .blog-article-preview .info .date span        {display: inline-block !important; width: auto !important; text-align: left !important; font-size: 1em !important; color: var(--color2) !important; font-weight: 700 !important; background: none !important; padding: 0 !important;}
  aside .blog-article-preview .info .date span:nth-child(1)::after
                                                      {content: ".";} 
  aside .blog-article-preview .info p                 {display: none;}  
  }

.blog-articles                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; position: relative; gap: 2.5em 3em;}
  @media screen and (min-width: 769px)              {
  .blog-articles .blog-article-preview              {width: calc(50% - 1.5em);}
  }  
  @media screen and (max-width: 768px)              {
  .blog-articles .blog-article-preview              {width: 100%;}
  }    

.hp-blog .blog-article-preview .info .title         {color: white;}
.hp-blog .blog-article-preview .info p              {color: var(--color4);}

.reviews .swiper-slide                          {display: flex; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: var(--color3); padding: 2.5em 3em; border-radius: var(--border-radius); box-shadow: 0 0 0.5em rgba(0,0,0,0.2); position: relative;}
.reviews .swiper-slide > *                      {position: relative; z-index: 2;}
.reviews .swiper-slide .img                     {display: flex; width: 6em; height: 6em; justify-content: center; border-radius: 100%; overflow: hidden;}
.reviews .swiper-slide .img img                 {display: block; width: auto; height: 100%;}
.reviews .swiper-slide h3                       {text-align: center; color: white; font-size: 1.2em; margin: 1rem 0 0;}
.reviews .swiper-slide span                     {display: block; width: 100%; text-align: center; font-size: 0.9em; font-weight: 600; color: var(--color1); margin-top: 0.2rem;}
.reviews .swiper-slide p                        {text-align: center; font-size: 0.8em; font-style: italic; margin-top: 0.7rem; color: var(--color4);}
  @media screen and (min-width: 1301px)         {
  .reviews                                      {padding: 0;}
  .reviews > svg                                {display: block; width: 100%; height: auto; fill: var(--color3); position: absolute; left: 0; top: -1px; z-index: 0;}
  .reviews h2                                   {color: white;}
  .reviews .swiper-slide:after                  {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.15); position: absolute; left: 0; top: 0; z-index: 1; content: "";}
  .reviews .swiper-button-next svg              {fill: white;}
  }
  @media screen and (max-width: 1300px)         {
  .reviews > svg                                {display: none;}
  }

.logos                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.4em 2.2em; margin-top: calc(2 * var(--gap));}
.logos a                                        {display: block; width: auto; height: 3.5em;}
.logos a img                                    {display: block; width: auto; height: 100%;}

.img-text .wrapper > *                          {order: 1; position: relative; z-index: 10;}
.img-text .wrapper h2                           {margin-bottom: var(--gap);}
.img-text .wrapper .img                         {display: flex;justify-content: center; align-items: center;}
.img-text .wrapper .img img                     {display: block; height: auto;}
  @media screen and (min-width: 1081px)         {
  .img-text .wrapper                            {justify-content: space-between;}
  .img-text .wrapper > div                      {width: 46%;}
  .img-text .wrapper .img img                   {width: 170%;} 
  .img-text .wrapper .flex                      {justify-content: flex-start;}
  .img-text.switched .wrapper .img              {order: 2;}
  }
  @media screen and (max-width: 1080px)         {
  .img-text .wrapper                            {gap: 2em;}
  .img-text .wrapper > div                      {width: 100%;}
  .img-text .wrapper .img img                   {width: 100%;}
  .img-text .wrapper p,
  .img-text .wrapper h2                         {text-align: center;}
  .img-text .wrapper h2:after                   {left: calc(50% - 1.5em);}
  }

  @media screen and (min-width: 1301px)         {
  .hp-locality                                  {padding-bottom: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .hp-locality .img                             {margin: -5em 0 -1em;}
  }  

.hp-services h2,
.hp-services p,
.hp-services .button                            {color: white;}
  @media screen and (min-width: 1301px)         {
  .hp-services                                  {padding: 14em 0 0; margin-top: -14em;}
  .hp-services > svg                            {display: block; width: 100%; height: auto; fill: #f5f5f5; position: absolute; left: 0; top: -1px; z-index: 0;}
  }
  @media screen and (max-width: 1300px)         {
  .hp-services .img                             {margin-top: -10em;} 
  .hp-services > svg                            {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .hp-services                                  {margin-top: 10em;}
  }

.blog-article:before                            {display: block; width: 100%; height: 0.4em; background: linear-gradient(to right, var(--color3) 0%, var(--color1) 33.33%, var(--color2) 66.66%, var(--color4) 100%); position: absolute; left: 0; top: 0; content: "";}
.blog-article .article                          {justify-content: center;}
.blog-article h1, .blog-article h2,
.blog-article h3, .blog-article p,
.blog-article ul, .blog-article ol,
.blog-article .blog-article-info                {max-width: 46rem;}
.blog-article .article h1                       {font-size: 2em; margin-bottom: -1rem;}

.about                                          {display: block; width: 100%;}
.about h2                                       {margin-top: 2rem;}
.about h2:first-of-type                         {margin-top: 0;}

.services                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 2rem 0;}
.services > div                                 {display: block;}
  @media screen and (min-width: 961px)          {
  .services > div                               {width: calc(50% - 1.5rem);}
  .services > div h2                            {font-size: 1.5rem;}
  }
  @media screen and (max-width: 960px)          {
  .services > div                               {width: 100%;}
  }

.cols                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.cols > *                                       {display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
.cols aside h2                                  {display: flex; font-weight: 700; color: var(--color1); margin: 0 0 0.8rem; position: relative; z-index: 5;}
.cols aside h2 span                             {display: block; font-weight: 700; background: #f5f5f5; padding-right: 1rem; box-sizing: border-box; position: relative;}
.cols aside h2 span:after                       {display: block; width: 100%; height: 2px; background: var(--color1); position: absolute; left: 0; top: calc(50% - 1px); z-index: -1; content: "";}
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .cols aside h2 span:after                     {width: 500%;}
  }
  @media screen and (min-width: 1081px)         {
  .cols                                         {margin-top: var(--gap);}
  .cols > *:first-child                         {width: calc(100% - 20em);}
  .cols > *:last-child                          {width: 14em;}
  .cols aside h2                                {text-align: left; font-size: 1.3em;}
  .cols aside .blog-articles > *                {width: 100%; font-size: 0.9rem;}
  }
  @media screen and (max-width: 1080px)         {
  .cols                                         {margin-top: -1rem;}
  .cols > *:first-child                         {width: 100%;}
  .cols > *:last-child                          {width: 100%; padding-top: var(--gap); margin-top: calc(2 * var(--gap)); border-top: solid 1px rgba(0,0,0,0.2);}
  .cols aside h2                                {justify-content: center;}
  .cols aside h2 span                           {padding-left: 1rem;}
  }

.gallery                                        {display: flex; width: 100%; flex-wrap: wrap; padding: 0;}
.gallery a                                      {display: block; position: relative; background: black; overflow: hidden;}
.gallery a span                                 {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.gallery a span img                             {display: block; width: 100%; transition: .3s ease-in-out;}
.gallery a:after                                {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0em; line-height: 1em; color: white; font-weight: 500; position: absolute; left: 0; top: 0; content: "+"; transition: .2s ease-in-out;}
.gallery a:hover span img                       {opacity: 0.5;}
.gallery a:hover:after                          {font-size: 3em;}
  @media screen and (min-width: 961px)          {                                                   
  .gallery a                                    {width: 33.33%; padding-top: 20%;} 
  }
  @media screen and (max-width: 960px)          {                                                   
  .gallery a                                    {width: 50%; padding-top: 28%;} 
  }

.cleaning                                       {background: var(--color2);}
.cleaning .wrapper h2                           {color: white;}
.cleaning .wrapper > img                        {display: block; height: auto;}
.cleaning .wrapper .img                         {display: block; position: absolute; right: 0; background-image: URL("images/cleaning.webp"); background-repeat: no-repeat;}
  @media screen and (min-width: 1081px)         {                                                   
  .cleaning                                     {overflow: hidden;}
  .cleaning .wrapper                            {justify-content: space-between;}
  .cleaning .wrapper h2                         {width: 12em; font-size: 2.3rem;}
  .cleaning .wrapper > img                      {width: 10em; position: absolute; left: calc(50% - 5em); bottom: -6em;}
  .cleaning .wrapper .img                       {width: 50%; height: 260%; top: -65%; background-size: contain; background-position: right center;}
  }
  @media screen and (max-width: 1080px)         {                                                   
  .cleaning .wrapper                            {max-width: 30em; justify-content: center; position: static; margin: 0 auto;}
  .cleaning .wrapper h2                         {order: 1; text-align: center; position: relative; z-index: 2; margin: 1.5rem 0 0;}
  .cleaning .wrapper > img                      {order: 0; width: 6em; margin-top: -5em; position: relative; z-index: 2;}
  .cleaning .wrapper .img                       {order: 2; width: 100%; height: 100%; top: 0; background-size: auto 100%; background-position: center center; z-index: 1; opacity: 0.35;}
  }

.article                                        {display: flex; flex-wrap: wrap; gap: var(--gap);}
.article > *                                    {margin-top: 0 !important;}
.article .date                                  {display: block; width: 100%; font-size: 1em; color: var(--color2); font-weight: 700; margin-top: -0.6rem !important;}
.article .date span:nth-child(1)::after         {content: ".";} 
.article h1, .article h2, .article h3           {text-align: left; margin-bottom: -0.8rem !important;}
.article p                                      {text-align: left;}
.article .img                                   {display: block; width: 100%; padding-top: 56%; position: relative; overflow: hidden; border-radius: var(--border-radius);}
.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 ul, .article ol                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.3em; padding: 0; box-sizing: border-box;}
.article ul li                                  {text-align: left; padding-left: 0.8em; box-sizing: border-box; position: relative;}
.article ul li:before                           {display: block; width: 0.6em; height: 0.6em; background: URL("images/arrow-black-right.svg") no-repeat left center; position: absolute; left: 0; top: 0.4em; content: "";}
.article ol                                     {list-style: none; counter-reset: li;}
.article ol > li                                {text-align: left; counter-increment: li; padding-left: 1.7em; box-sizing: border-box; position: relative;}
.article ol > li:first-child                    {margin-top: 0;}
.article ol > li:before                         {display: block; content: counter(li) "."; font-size: 1em; font-weight: bold; color: var(--color0); position: absolute; left: 0; top: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.article .embed                                 {display: block; width: 100%; overflow: hidden;}
.article .embed > *                             {display: block; width: 100%;}
.article .highlighted                           {padding: 1.5rem; background: var(--color5);}
.article .highlighted > *                       {text-align: center;}
.article .highlighted > *:first-child           {margin-top: 0;}
  @media screen and (min-width: 769px)          {
  .article h1                                   {font-size: 2.2rem;}
  }
  @media screen and (max-width: 768px)          {
  .article h1                                   {font-size: 1.6rem;}
  }

.article-gallery                                {display: block; width: 100%; position: relative;}
.article-gallery .slider                        {display: block; width: 100%; overflow: hidden;}
.article-gallery .swiper-slide                  {display: block; position: relative; box-sizing: border-box; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.article-gallery .swiper-slide > a              {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.article-gallery .swiper-slide > a img          {display: block; width: 100%; transition: .25s ease-in-out;}
.article-gallery .swiper-slide:hover a img      {opacity: 0.8;}
.article-gallery .swiper-button-prev,
.article-gallery .swiper-button-next            {top: calc(50% - 1em);}                                  
  @media screen and (min-width: 641px)          {
  .article-gallery .swiper-slide                {padding-top: 30%;}
  }
  @media screen and (max-width: 640px)          {
  .article-gallery .swiper-slide                {padding-top: 60%;}
  }

.pagination                                         {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-top: var(--gap);}
.pagination a                                       {display: flex; width: 2.6em; height: 2.6em; justify-content: center; align-items: center; font-size: 0.9rem; color: var(--color0); font-weight: 700; background: rgba(0,0,0,0.12); border: none; box-sizing: border-box; border-radius: var(--border-radius); cursor: pointer; transition: .15s ease-in-out;}  
.pagination a:hover                                 {background: rgba(0,0,0,0.08);}
.pagination a.sel                                   {background: var(--color1); color: white;}
  @media screen and (max-width: 768px)              {
  .pagination a                                     {font-size: 0.75rem;}
  }

.faq                                                {display: block; width: 100%; margin-bottom: 1.5rem;}
.faq article                                        {display: block; width: 100%; border-bottom: solid 1px rgba(0, 0, 0, 0.1); padding: 1rem 0; position: relative; box-sizing: border-box; transition: .35s ease-in-out;}
.faq article:last-child                             {border-bottom: none;}
.faq article h3                                     {display: block; width: 100%; font-size: 1.25rem; font-weight: 700; margin: 0; cursor: pointer; position: relative; padding-right: 3rem; box-sizing: border-box; transition: .15s ease-in-out;}
.faq article h3:hover                               {color: var(--color2);}
.faq article h3:after                               {display: flex; width: 1.2em; height: 1.2em; justify-content: center; align-items: center; font-size: 0.8em; line-height: 1em; color: white; font-weight: 700; background: var(--color2); border-radius: var(--border-radius); position: absolute; right: 0; top: 0.35em; content: "+";}
.faq article > div                                  {display: none; width: 100%; padding-bottom: 1.5rem;}
.faq article.sel                                    {background-color: transparent;}
.faq article.sel h3:after                           {content: "-";}
.faq article p                                      {text-align: left;}
  @media screen and (max-width: 768px)              {
  .faq article h3                                   {font-size: 1.15rem;}
  }

.contacts                                           {display: flex; width: 100%; flex-wrap: wrap;}
.contacts > div                                     {display: block;}                                    
.contacts > div > *                                 {margin: 0.1em 0 0; line-height: 1.4em;}
.contacts > div a                                   {display: flex; align-items: center; font-size: 1em; color: var(--color0); transition: .15s ease-in-out;}
.contacts > div a svg                               {display: block; width: 1.1em; height: auto; fill: var(--color1); margin-right: 0.4em;}
.contacts > div a:hover                             {color: var(--color1);} 
  @media screen and (min-width: 1081px)             {
  .contacts                                         {justify-content: space-between;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .contacts                                         {gap: 1rem 0;}
  .contacts > div:nth-child(3n+1)                   {width: 13em;}
  .contacts > div:nth-child(3n+2)                   {width: 17em;}
  .contacts > div:nth-child(3n+3)                   {width: 10em;}
  }
  @media screen and (max-width: 768px)              {
  .contacts                                         {gap: 1rem 0;}
  .contacts > div:nth-child(odd)                    {width: 13em;}
  .contacts > div:nth-child(even)                   {width: 15em;}
  }

.hours                                              {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; background: var(--color5); gap: 1rem 1.5rem; padding: 1.5rem; margin: calc(1.2 * var(--gap)) 0; box-sizing: border-box;}
.hours > p                                          {display: block; width: auto; margin: 0;} 
  @media screen and (max-width: 768px)              {
  .hours                                            {justify-content: flex-start;}
  }

.form                                               {display: flex; width: 100%; justify-content: space-between; row-gap: 0.6rem; flex-wrap: wrap; margin-top: var(--gap); box-sizing: border-box;}
.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 input,
.form .form-item textarea                           {display: block; width: 100%; font-size: 0.9em; font-weight: 700; color: var(--color0); background: rgba(0,0,0,0.06); border: none; outline: none; padding: 1.4em; border-radius: 0.2rem; box-sizing: border-box; font-family: 'Rubik', sans-serif; transition: .2s ease-in-out;}
.form .form-item textarea                           {height: 18em;}
.form .form-item input:focus,
.form .form-item textarea:focus                     {background: rgba(0,0,0,0.1);}
.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 p                                             {text-align: center; font-size: 0.9em; margin-top: 0.5rem; opacity: 0.5;}
  @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%;}
  }

.map                                                {padding: 0; height: 34rem; position: relative;}  
.map > iframe                                       {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}


.mce-content-body .faq .hidden { display:block; }
.mce-content-body { background-color:White; }