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

.newsadmin  { display:flex!important; }
.newsadmin .col { width:45%; }
.newsadmin .col h3 { margin-bottom:1rem; }

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

:root                                           {
                                                --font1:          "Montserrat", sans-serif; /* font-weight: 100-900 */
                                                --font2:          "Cormorant", sans-serif; /* font-weight: 300-700 */
                                                --font3:          "Sacramento", cursive; /* 400 */

                                                --color0:       #787878;
                                                --color0b:      #A5B2BD;
                                                --color1:       #1E3957;
                                                --color1b:      #2e527c;
                                                --color1c:      #A3CCFB;
                                                --color1d:      #d1e6ff;
                                                --color1e:      #E8EDF1;
                                                
                                                --wrapper-side:         7vw;
                                                --header-height:        7rem;
                                                --section-padding:      min(7rem, calc(2rem + 5vw));
                                                --gap1:                 min(2.8rem, calc(0.4rem + 4vw));
                                                --gap2:                 min(1.5rem, calc(0.25rem + 4vw));




                                                --swiper-button-width:  min(3.6rem, calc(2rem + 4vw));  

                                                --border-radius1:       min(1rem, 3vw); 
                                                --border-radius2:       min(3.6rem, calc(1.2rem + 3vw)); 
                                                --padding1:             min(1.2rem, 2vw);
                                                --padding2:             min(3.5rem, 7vw);                                               
                                                }


body                                            { display: block !important; }


button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: 'lato', sans-serif; transition: .15s ease-in-out;}

html, body, form                                {width: 100%;}
body                                            {margin: 0 auto; font-size: min(17px, calc(10px + 1vw)); color: var(--color0); font-weight: 400; line-height: 1.5; background: #F8F8F8; position: relative; padding-top: var(--header-height); box-sizing: border-box; font-family: var(--font1);}
form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}

body.fixed                                      {overflow-y: hidden;}
body.fixed :is(.main, .footer)                  {opacity: 0.65; filter: blur(4px);}
.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 90rem; flex-wrap: wrap; margin-inline: auto; position: relative;}
  @media screen and (min-width: 1081px)         {
  .wrapper.medium                               {max-width: 62rem;}
  }
  @media screen and (max-width: 1080px)         {
  .wrapper                                      {justify-content: center;}
  }

.header                                         {display: block; width: 100%; height: var(--header-height); position: fixed; left: 0; top: 0; z-index: 10000; transition: .2s ease-in-out;}
.header.scroll                                  {background: rgba(255,255,255,0.75); backdrop-filter: blur(4px);}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center; gap: 1em;}
.header .logo                                   {display: block; width: 5.5em; position: relative; z-index: 10; transition: .2s ease-in-out;}    
.header .logo img                               {display: block; width: 100%;}    
.header .collapse                               {display: flex;}
.header nav                                     {display: flex;}
.header nav > ul                                {display: flex;}
.header nav > ul > li                           {display: block;}
.header nav > ul > li > a                       {display: block; transition: .2s ease-in-out;}
  @media screen and (min-width: 1081px)         {
  .header .wrapper                              {container-type: inline-size;}
  .header .collapse                             {height: 100%; justify-content: flex-end; align-items: center; gap: 7cqw;}
  .header nav                                   {align-items: center;} 
  .header nav > ul                              {gap: 7cqw;}
  .header nav > ul > li > a                     {color: var(--color0); font-weight: 500;}
  .header nav > ul > li > a:hover,
  .header nav > ul > li > a.sel,
  .header nav > ul > li > a[aria-current="page"]{color: var(--color1c);}
  .header #navicon                              {display: none;}
  .hp .header .logo                             {top: 1.5em;}
  .hp .header.scroll .logo                      {top: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .header                                       {--logo-width: 9em;}
  .header .collapse                             {width: 18em; height: calc(100vh - 2rem); flex-wrap: wrap; gap: 1.4rem; background: var(--color1c); --inner-padding: 2rem; padding-top: var(--header-height); overflow-y: auto; position: fixed; right: -19em; top: 0 ; border-radius: 0 0 0 3em; box-sizing: border-box; opacity: 0; transition: opacity .5s ease-in-out, right .5s ease-in-out;} 
  .header nav                                   {width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;} 
  .header nav > ul                              {width: 100%; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
  .header nav > ul > li                         {width: 100%; flex-wrap: wrap;}
  .header nav > ul > li > a                     {width: 100%; font-size: 1.2em; color: var(--color1); padding: 0.6rem var(--inner-padding); box-sizing: border-box;}
  .header nav > ul > li > a.sel,
  .header nav > ul > li > a[aria-current="page"]{background: var(--color1d);}
  .header .soc                                  {padding-inline: var(--inner-padding); margin-bottom: 3rem;}
  .header #navicon                              {display: flex; width: 1.8em; height: 16px; font-size: 1em; cursor: pointer; position: relative; z-index: 10;}
  .header #navicon span                         {display: block; width: 100%; height: 0.16em; background: var(--color1); position: absolute; transition: .2s ease-in-out;}
  .header #navicon:hover span                   {background: var(--color1c);}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 0.08em);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header #navicon div                          {display: none; width: 6em; height: 2em; position: absolute; left: 0; top: calc(50% - 1em); z-index: 2;}
  .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 !important;}
  .header.show #navicon div                     {display: block;}
  .header.show #navicon:hover span              {background: var(--color1b);}
  .header.show .collapse                        {right: 0; opacity: 1;}
  }

.footer                                         {display: block; width: 100%; background: var(--color1c); padding-block: 1.5rem;}
.footer .wrapper                                {justify-content: center;}
.footer .wrapper span                           {display: block; text-align: center; font-size: 0.9em; color: var(--color1);}

.soc                                            {display: flex; align-items: center; gap: 0.11em; box-sizing: border-box;}
.soc a                                          {display: flex; width: 1.9em; height: 1.9em; justify-content: center; align-items: center; border-radius: 100%; transition: .2s ease-in-out;}
.soc a img                                      {display: block; width: 60%;}
.soc a:hover                                    {background: var(--color1d);}

strong                                          {font-weight: 700;}
em                                              {font-style: italic;}

h1, h2, h3                                      {display: block; width: 100%; text-align: center; color: var(--color1); font-weight: 400; line-height: 1.15; text-transform: uppercase; box-sizing: border-box; position: relative; font-family: var(--font2);}
h1                                              {font-size: min(3.4rem, calc(1.5rem + 3vw));}
h2                                              {font-size: min(3.4rem, calc(1.5rem + 3vw)); margin-bottom: var(--gap1);}
h3                                              {font-size: min(2rem, calc(0.6rem + 3vw));}

.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 1; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; transition: .3s ease-in-out;}
.main :is(p, li)                                {font-size: 1.1em;}
.main p                                         {display: block; width: 100%; text-align: center; box-sizing: border-box;}
.main p.large                                   {font-size: min(1.6em, calc(0.9em + 1vw));}
.main p a, .main li a, .main td a               {text-decoration: underline; color: var(--color0); text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover, .main td a:hover
                                                {color: var(--color1c); text-decoration-color: transparent;}

.section                                        {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-block: var(--section-padding); box-sizing: border-box; overflow:hidden;}
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section.color1c                                {background: var(--color1c);}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em; box-sizing: border-box; margin-top: var(--gap1);}
 
.page-head                                      {background: var(--color1c);}
.page-head h1                                   {margin-bottom: 1rem;}
.page-head p                                    {color: var(--color1);}

.button                                         {display: flex; height: 2.8em; justify-content: center; align-items: center; gap: 0.4em; font-size: 0.8em; font-weight: 400; text-transform: uppercase; white-space: nowrap; padding: 0.02em 3.6em 0; border-radius: 1.4em; border: solid 0.1em transparent; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}
.button.color1                                  {background: var(--color1); color: white;}
.button.color1:hover                            {background: var(--color1b);}
.button.border1                                 {border-color: var(--color1); color: var(--color1);}
.button.border1:hover                           {border-color: var(--color1b); color: var(--color1b); background: var(--color1d);}

.subheadline1                                   {display: block; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: -1em; box-sizing: border-box;}

body:has(.hero)                                 {padding-top: 0;}
.hero                                           {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap1) 0;}
.hero > *                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2) 0;}
.hero .text                                     {width: 100%; max-width: 40rem; justify-content: center;}
.hero .text h2                                  {margin: 0;}
.hero .text :is(h2, .subheadline, p)            {text-align: center;}
.hero .text p                                   {color: var(--color1);}
.hero .text .button                             {margin-top: 0.5rem;}
.hero .img                                      {width: calc(20rem + 40vw); justify-content: flex-start; order: -1; position: relative;}
.hero .img span                                 {display: block; width: 140%; margin-right: -40%;
                                                 -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: contain; mask-repeat: no-repeat; mask-position: center center;
                                                 -webkit-mask-image: linear-gradient(to left, transparent, black 40%); mask-image: linear-gradient(to left, transparent, black 40%);  
                                                }
.hero .img span img                             {display: block; width: 100%; height: 100%; object-fit: cover;}
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .hero .img span                               {-webkit-mask-image: none; mask-image: none;}
  }
  @media screen and (min-width: 1081px)         {
  .hero                                         {justify-content: space-between; padding-top: var(--header-height);}
  .hero .text                                   {width: 30%; max-width: 100%; justify-content: flex-start; margin-top: 5%;}
  .hero .text :is(h1, .subheadline1, p)         {text-align: left;}
  .hero .img                                    {width: 68%; order: 1; margin-top: -3%;}
  .hero .img span                               {min-width: 70rem; width: calc(100% + var(--wrapper-side)); margin-right: calc(0px - var(--wrapper-side));}
  }

.section#o-mne                                  {overflow: visible;}
.img-text                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) 0;}
.img-text > *                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0;}
.img-text .img                                  {width: calc(10rem + 30vw); height: calc(10rem + 30vw); order: -1; position: relative; margin-top: calc(-7% - var(--section-padding)); container-type: inline-size;}
.img-text .img span                             {display: block; position: absolute; inset: 0; border-radius: 50cqw; overflow: hidden; transition: .15s ease-in-out;}
.img-text .img span img                         {display: block; width: 100%; height: 100%; object-fit: cover;}
.img-text .img span:hover                       {filter: brightness(1.2);}
.img-text .text                                 {width: 100%; max-width: 40rem;}
.img-text .text .subheadline2                   {display: block; font-size: min(3.2rem, calc(1.5rem + 3vw)); color: white; position: relative; margin-top: calc(-0.1em - var(--gap1)); font-family: var(--font3); transform: rotate(1.2deg);}
.img-text .text h2                              {margin: 0;}
.img-text .text :is(h2, .subheadline, p)        {text-align: center;}
.img-text .text p                               {color: var(--color1);}
.img-text .text .button                         {margin-top: 0.5rem;}
  @media screen and (min-width: 1081px)         {
  .img-text                                     {justify-content: space-between;}
  .img-text .img                                {width: 36%; height: auto; margin: 0;}
  .img-text .img span                           {top: calc(-20% - var(--section-padding)); bottom: -3%;}
  .img-text .text                               {width: 56%; max-width: 100%; justify-content: flex-start;}
  .img-text .text :is(h2, .subheadline2, p)     {text-align: left;}
  }
  @media screen and (max-width: 1080px)         {
  .section#o-mne                                {margin-top: 7%;}
  }

.infographics                                   {display: flex; width: 100%; justify-content: space-between; gap: 0.9em; flex-wrap: wrap;}
.infographics > div                             {display: flex; width: 100%; flex-direction: column; justify-content: space-between; flex-wrap: wrap; gap: 0.8em; padding: min(2.5rem, calc(1rem + 5vw)); border: solid 0.095em var(--color0b); border-radius: 2em; box-sizing: border-box;}
.infographics > div .num                        {display: block; width: 100%; text-align: center; font-size: 3em; color: var(--color0b); font-weight: 400; line-height: 1; font-family: var(--font3);}
.infographics > div h3                          {margin: 0;}
.infographics > div p                           {font-size: 0.9em;}
  @media screen and (min-width: 1081px)         {
  .infographics > div                           {width: calc(33.33% - 0.6em);}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .infographics > div                           {width: calc(50% - 0.45em);}
  }

.section:has(.reviews):before                   {display: block; width: 94%; height: 100%; background: var(--color1c); border-radius: 0 0 10em 0; position: absolute; left: 0; top: 0; z-index: -2; content: "";}  
.reviews                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2);}
.reviews .subheadline1                          {color: white;}
.reviews .review                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2); background: white; padding: min(4rem, calc(1rem + 3vw)); box-sizing: border-box; transition: .8s ease-in-out;}
.reviews .review .img                           {display: block; display: block; width: 48%; aspect-ratio: 3/4; position: relative;}
.reviews .review .img span                      {display: block; position: absolute; inset: 0;}
.reviews .review .img span img                  {display: block; width: 100%; height: 100%; object-fit: cover;}
.reviews .review .text                          {display: block; width: 100%; text-align: center; font-size: 0.9em;}
.reviews .review .name                          {display: block; width: 100%; text-align: center; font-size: min(1.6em, calc(0.85em + 3vw)); color: var(--color1); line-height: 1.2; text-transform: uppercase; margin-top: -0.35em; font-family: var(--font2);}
.reviews .swiper                                {width: clamp(20em, 72%, 42rem); overflow: visible;}
.reviews .swiper-slide-active .review           {transform: scale(1.05); transform-origin: center top;}
.reviews .controls                              {display: flex; width: 100%; justify-content: center; align-items: center; gap: 1.4em; margin-top: var(--gap2); box-sizing: border-box;}
.reviews .controls .swiper-button               {position: relative; inset: auto;}
  @media screen and (min-width: 1081px)         {
  .section:has(.reviews):before                 {width: calc(50% + 10rem);}
  .reviews :is(.subheadline1, h2)               {width: 100%; text-align: left; padding-left: 30%;}
  .reviews .controls                            {padding-right: 10%;}
  }
  @media screen and (min-width: 641px)          {
  .section:has(.reviews):after                  {display: block; opacity: 0.6; background-image: url("images/decor.svg"), url("images/decor2.svg"), url("images/dots.webp"); background-repeat: no-repeat; background-size: min(12vw, 9em) auto, min(12vw, 9em) auto, min(22vw, 17em) auto; background-position: left 7vw bottom 12%, right 7vw top 14%, left 19vw bottom 12%; position: absolute; inset: 0;; z-index: -1; content: "";}  
  }

.swiper                                         {width: 100%;}
.swiper-slide                                   {display: flex; height: auto; align-items: flex-start; align-content: flex-start; position: relative; overflow: visible; flex-shrink: 0;}

.swiper-button                                  {display: flex; width: 2.4em; height: auto; margin: 0; cursor: pointer; transition: .15s ease-in-out;}                                
.swiper-button svg                              {display: block; width: 100%; fill: var(--color1); transition: .15s ease-in-out;}
.swiper-button:before,
.swiper-button:after                            {display: none;}
.swiper-button-prev                             {transform: rotate(180deg);}
.swiper-button-disabled                         {opacity: 0.15 !important;}
.swiper-button:hover svg                        {fill: var(--color1b);}

.carousel                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); position: relative; box-sizing: border-box;}

.contacts                                       {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--section-padding) 0;}
.contacts > div                                 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2);}
.contacts .contact                              {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap;}
.contacts .contact span                         {display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: -0.5em;}
.contacts .contact a                            {font-size: min(3.2rem, calc(0.75rem + 4vw)); color: var(--color1); text-transform: uppercase; font-family: var(--font2); transition: .15s ease-in-out;}
.contacts .contact a:hover                      {color: var(--color1b);}
.contacts .contact:nth-of-type(2)               {margin-bottom: var(--gap2);}
.contacts .soc                                  {font-size: 1.35em;}
.contacts .certificates                         {display: flex; width: 100%; justify-content: center; align-items: center; gap: 1em;}
.contacts .certificates a                       {display: block; width: 5em; height: 5em; transition: .15s ease-in-out;}
.contacts .certificates a img                   {display: block; width: 100%; height: 100%; object-fit: contain;}
.contacts .certificates a:hover                 {filter: brightness(1.2);}
.contacts h2                                    {margin: 0;}
  @media screen and (min-width: 1081px)         {
  .contacts                                     {justify-content: space-between;}
  .contacts > div                               {width: 44%; justify-content: space-between;}
  .contacts .contact                            { align-items: flex-start;}
  .contacts .contact span                       {text-align: left;}
  .contacts .certificates                       {width: auto;}
  .contacts h2                                  {text-align: left;}
  }

.form                                           {display: flex; justify-content: center; flex-wrap: wrap; --form-gap: 1.2rem; box-sizing: border-box;}
.form-items                                     {display: flex; width: 100%; flex-wrap: wrap; gap: 0.6em;}
.form .consent                                  {display: block; width: 100%; text-align: center; font-size: 0.8em; margin-block: 1.2em;}
.form .consent a                                {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.form .consent a:hover                          {color: var(--color1b); text-decoration-color: transparent;}
.form .button                                   {font-size: 1em;}
  @media screen and (min-width: 1081px)         {
  .form                                         {justify-content: flex-start;}
  .form .consent                                {text-align: left;}
  }

.form-item                                      {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}
.form-item :is(input, textarea)                 {display: block; width: 100%; height: 3.4em; background: none; font-size: 1em; color: var(--color0); font-weight: 700; border: none; border-bottom: solid 0.07em var(--color0); outline: none; padding: 1.3em 0 0.7em; box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item :is(input, textarea):focus           {border-color: var(--color1c);}
.form-item label                                {display: block; font-size: 0.75em; font-weight: 700; color: var(--color1); position: absolute; left: 0; top: 0; transition: .15s ease-in-out;}
.form-item :is(input, textarea)::placeholder    {font-weight: 400; color: var(--color0);}
  @media screen and (max-width: 768px)          {
  .form-item textarea                           {height: 7em;}
  }

.services                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.5em; counter-reset: article;}
.services article                               {display: block; width: 100%; max-width: 76rem; counter-increment: article;}
.services article h2                            {text-align: left; font-size: min(2.2rem, calc(0.6rem + 3vw)); padding: 1.65rem 5rem 1.62rem 3.4em; border: solid 0.1rem rgba(0,0,0,0.1); border-bottom-width: 0.27rem; margin: 0; position: relative; transition: .15s ease-in-out;}
.services article h2:before                     {display: block; width: 1em; height: 1em; font-size: 1.3em; color: var(--color0); font-weight: 400; position: absolute; top: calc(50% - 0.45em); left: 0.7em; content: counter(article, decimal-leading-zero); font-family: var(--font3);}
.services article h2:after                      {display: block; width: 1em; height: 1em; font-size: 1.6em; font-weight: 400; position: absolute; top: calc(50% - 0.6em); right: 0; content: "+"; font-family: var(--font1); transition: .15s ease-in-out;}
.services article h2:hover                      {color: var(--color0b); cursor: pointer;}
.services article.sel h2:after                  {content: "-";}
.services article .collapse                     {display: none; width: 100%; background: var(--color1e); padding: min(3.8rem, calc(1rem + 3vw)); box-sizing: border-box;}
.services article .collapse .inner              {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1) 0;}
.services article .collapse .inner > div        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1em;}
.services article h3                            {text-align: left; margin: 0;}
.services article :is(p, li)                    {text-align: left; font-size: 1em; color: var(--color1);}
.services article .gallery                      {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2em;}
.services article .gallery a                    {display: block; width: calc(50% - 0.6em); aspect-ratio: 1; position: relative;}
.services article .gallery a span               {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;}
.services article .gallery a span img           {display: block; width: 100%; height: 100%; object-fit: cover;}
.services article .gallery a span:hover         {filter:  brightness(1.2);}
  @media screen and (min-width: 1081px)         {
  .services article .collapse .inner > div.col  {width: 45%;}
  .services article .gallery a                  {width: calc(25% - 0.9em);}
  }

.article-styles ul                              {display: flex; flex-wrap: wrap; gap: 0.2em;}
.article-styles ul li                           {display: block; width: 100%; padding-left: 1.45em; position: relative; box-sizing: border-box;}
.article-styles ul li:before                    {display: block; width: 1em; height: 1em; background: url("images/bullet-color1c.svg") no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.28em; content: "";}