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

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

#in_message {
    position: absolute;
    left: -9999em;
    top: 0;
}

:root                                           {

                                                --font1:                "rig-sans", sans-serif; /* 300, 700 */



                                                --color0:               #161835;

                                                --color0b:              #404370;

                                                --color0b-opacity:      rgba(55,58,96,0.55);

                                                --color0c:              #404370;

                                                --color0d:              #545999;

                                                --color0e:              #b8bcef;                                                

                                                --color1:               #FFBF80; 

                                                --color1b:              #eba158; 



                                                --header-height:        min(8rem, calc(4rem + 4vw));

                                                --wrapper-side:         4.5vw;

                                                --section-padding:      min(7rem, calc(1.6rem + 7vw));



                                                --box-shadow1:          0 0.2em 0.3em -0.12em rgba(10,13,18,0.03), 0 0.6em 0.7em -0.2em rgba(10,13,18,0.08);

                                                --gap1:                 0.75rem;

                                                --gap2:                 min(3rem, calc(0.8rem + 3vw));

                                                --gap3:                 4rem;

                                                --border-radius0:       0.5rem;

                                                --border-radius1:       1rem; 

                                                }



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

html                                            {height: 100%; overflow-x: hidden; background: var(--color0);}

body                                            {display: flex; min-height: 100%; font-size: min(16px, calc(6px + 2vw)); color: white; font-weight: 300; line-height: 1.5; padding-top: var(--header-height); position: relative; font-family: var(--font1); overflow-x: hidden;}

body.fixed :is(.main, .footer)                  {filter: blur(10px);}

form                                            {display: flex; flex-direction: column;}



body:before                                     {display: block; width: 100%; height: 100%; opacity: 0.25; background: url("../images/hero.webp") no-repeat center top; background-size: min(100rem, 120%) auto; position: absolute; left: 0; top: 0; content: "";}



.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 100rem; flex-wrap: wrap; margin-inline: auto; position: relative;}

.wrapper.medium                                 {max-width: 58rem;}



.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                                  {height: calc(0.7 * var(--header-height)); background: rgba(0,0,0,0.35); backdrop-filter: blur(20px);}

.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center; gap: 0.6em; position: relative;}

.header .logo                                   {display: block; width: 15em; position: relative; z-index: 10;}    

.header .logo img                               {display: block; width: 100%;}    

.header .collapse                               {display: flex; box-sizing: border-box;}

.header nav                                     {display: flex; height: 100%;}

.header nav ul                                  {display: flex; align-items: center; align-content: center; flex-wrap: wrap; flex-grow: 2; box-sizing: border-box;}

.header nav ul li                               {display: block;}

.header nav ul li a                             {display: flex; align-items: center; font-size: 0.9em; color: white; font-weight: 700; box-sizing: border-box; cursor: pointer; transition: .2s ease-in-out;}

.header nav ul li :is(a:hover, a.sel)           {color: var(--color1);}

  @media screen and (min-width: 1081px)         {

  .header .collapse                             {height: 100%;}

  .header nav ul                                {height: 100%; gap: 1em;}

  .header nav ul li                             {height: calc(0.7 * var(--header-height));}

  .header nav ul li a                           {height: 100%; padding-inline: 1.2em; border-top: solid 0.1em transparent; border-bottom: solid 0.1em transparent}

  .header nav ul li a.sel                       {border-bottom-color: var(--color1);} 

  .header #navicon                              {display: none;}

  }

  @media screen and (min-width: 1081px) and (max-width: 1280px){

  .header                                       {font-size: 0.9em;}

  }

  @media screen and (max-width: 1080px)         {

  .header .collapse                             {width: 100%; height: 100svh; background: rgba(0,0,0,0.35); backdrop-filter: blur(20px); padding-top: var(--header-height); overflow-X: hidden; position: fixed; right: -100%; top: 0; opacity: 0; transform: scale(0.9); transition: opacity .5s ease-in-out, transform .5s ease-in-out;} 

  .header nav                                   {width: 100%; flex-direction: column; padding: 0 10% 2em; box-sizing: border-box;} 

  .header nav ul                                {width: 100%;}

  .header nav ul li                             {width: 100%;}

  .header nav ul li a                           {display: inline-block; font-size: 1.2em; font-weight: 300; padding: 0.9em 1.7em; border-left: solid 0.1em transparent;}

  .header nav ul li a.sel                       {border-color: var(--color1);}

  .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.12em; background: var(--color1); position: absolute; transition: .2s ease-in-out;}

  .header #navicon:hover span                   {background: white;}

  .header #navicon span:nth-child(1)            {top: 0;}

  .header #navicon span:nth-child(2),

  .header #navicon span:nth-child(3)            {top: calc(50% - 0.06em);}

  .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                                  {height: calc(0.7 * var(--header-height)); background: transparent !important; backdrop-filter: blur(0);}

  .header.show .collapse                        {right: 0; opacity: 1; transform: scale(1);}

  }



strong                                          {font-weight: 700;}

em                                              {font-style: italic;}



h1, h2, h3                                      {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 0 0.6em; color: white; font-weight: 700; line-height: 1.3; box-sizing: border-box; position: relative;}

h2                                              {font-size: min(2.6rem, calc(0.9rem + 3vw)); justify-content: center; text-align: center; margin-bottom: var(--gap2);}

h3                                              {font-size: min(1.4rem, calc(0.3rem + 3vw)); color: var(--color1);}



h2:before                                       {display: block; width: 4.2em; height: 1em; background: url("../images/arrow-right-long-color1.svg") no-repeat right center; background-size: 100% auto; content: "";}

h2.reversed:before                              {order: 2; transform: rotate(180deg);}

  @media screen and (max-width: 540px)          {

  h2:before                                     {width: 1.5em; background-size: auto 0.5em;}

  }



.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 2; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2; transition: .3s ease-in-out;}

.main :is(p, li)                                {font-size: 1em;}

.main p                                         {display: block; width: 100%; box-sizing: border-box;}

.main p a, .main li a, .main td a               {text-decoration: underline; color: white; text-decoration-color: var(--color1); transition: .15s ease-in-out;}

.main p a:hover, .main li a:hover, .main td a:hover

                                                {color: var(--color1); text-decoration-color: transparent;}

                                        

.section                                        {display: flex; width: 100%; flex-direction: column; align-items: center; position: relative; padding-top: var(--section-padding); box-sizing: border-box;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; color: var(--color0); font-weight: 700; background: var(--color1); padding: 0.6em 1.6em 0.5em; border-radius: var(--border-radius0); border: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}

.button:hover                                   {background: var(--color1b);}



.box-style1                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; background: var(--color0b-opacity); backdrop-filter: blur(5px); padding: min(6em, calc(0.8em + 5vw)); box-sizing: border-box; border-radius: var(--border-radius1); border: solid 0.08em var(--color0d);}



.icon                                           {display: flex; width: 3em; aspect-ratio: 1; justify-content: center; align-items: center; font-weight: 700; border-radius: var(--border-radius0); border: solid 0.12em var(--color1); box-sizing: border-box;}

.icon img                                       {display: block; width: 50%; height: auto;}



.hero                                           {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 9%;}

.hero .img                                      {display: block; position: relative; z-index: 2;}

.hero .img:before                               {display: block; width: 70%; aspect-ratio: 1; background: url("../images/pattern.svg") no-repeat center center; background-size: contain; position: absolute; right: 40%; top: 30%; z-index: -1; content: "";}

.hero .img img                                  {display: block; width: 100%; height: auto;}

.hero .content                                  {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1em; position: relative; z-index: 3;}

.hero h1 span                                   {display: block; width: 100%; font-size: 0.85em; margin-top: 0.2rem; box-sizing: border-box;}

.hero .info                                     {display: block; position: relative;}

.hero .info > div                               {display: flex; align-items: center; gap: 0.8em; font-size: 1em; color: var(--color1); position: absolute;}

.hero .info .icon                               {width: 2.5em;}

.hero .info .text                               {display: block; width: 13em;}

.hero p:has(em)                                 {max-width: 27em;}

.hero .button                                   {margin-block: -0.8em 0.2em;}

  @media screen and (min-width: 769px)          {

  .hero                                         {margin-top: calc(-1 * var(--section-padding) - var(--header-height));}

  }

  @media screen and (max-width: 768px)          {

  .hero                                         {margin-top: -3rem;}

  }

  @media screen and (min-width: 1081px)         {

  .hero                                         {margin-bottom: calc(-1.5 * var(--section-padding));}

  .hero .img                                    {width: 35%; left: 4.5%;}

  .hero .content                                {width: 28em; align-items: flex-start; margin-block: 1em -1em;}

  .hero h1                                      {font-size: 3rem;}

  .hero .info > div                             {left: 10.6em; top: -4.2rem;}

  }

  @media screen and (max-width: 1080px)         {

  .hero .img                                    {width: 70%; max-width: 25em; left: 3%;}

  .hero .content                                {width: 100%; align-items: center; margin-top: -5em;}

  .hero h1                                      {justify-content: center; font-size: 3em;}

  .hero h1 span                                 {text-align: center; padding-right: 6.45em;}

  .hero .info > div                             {left: -2.3em; top: -4.3em;}

  .hero p:has(em)                               {text-align: center;}

  }

  @media screen and (max-width: 540px)          {

  .hero .content                                {font-size: 0.8em;}

  }



.about .icon                                    {margin-bottom: 0.3em;}

.about .inner                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) var(--gap3);}

.about .inner > div                             {display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap1);}

  @media screen and (min-width: 961px)          {

  .about .inner > div                           {width: calc(33.33% - 2/3 * var(--gap3));}

  }



.services                                       {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.services:before                                {display: block; width: 18em; aspect-ratio: 1; background: url("../images/pattern-color0.svg") no-repeat center center; background-size: contain; opacity: 0.5; position: absolute; right: 11%; top: -12%; z-index: -1; content: "";}

.services .item                                 {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--gap1); position: relative; z-index: 2; padding: 2em 0 2em 8em; box-sizing: border-box;}

.services .item .img                            {display: block; height: 100%; aspect-ratio: 9/16; border-radius: var(--border-radius1) 0 0 var(--border-radius1); border: solid 0.1em var(--color1); border-right: none; padding: 0.8em 0 0.8em 0.8em; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: -1;}

.services .item .img .inner                     {display: block; width: 100%; height: 100%; border-radius: calc(0.5 * var(--border-radius1)); overflow: hidden;

                                                 -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center;

                                                 -webkit-mask-image: linear-gradient(to left, transparent, black); mask-image: linear-gradient(to left, transparent, black);

                                                }

.services .item .img .inner img                 {display: block; width: 100%; height: 100%; object-fit: cover;}

.services .item .button                         {font-size: 0.8em; margin-top: 0.45em;}

  @media screen and (min-width: 1281px)         {

  .services .item                               {width: 30%; min-height: 24em;}

  }

  @media screen and (min-width: 769px) and (max-width: 1280px){

  .services .item                               {width: 47%; min-height: 20em;}

  }



.steps                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1em 0;}  

.steps:before                                   {display: block; width: 18em; aspect-ratio: 1; background: url("../images/pattern-color0.svg") no-repeat center center; background-size: contain; opacity: 0.5; position: absolute; left: 11%; top: -12%; z-index: -1; content: "";}



.steps > div                                    {display: flex; width: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--gap1); backdrop-filter: none; position: relative; background-repeat: no-repeat; background-position: center center;}

.steps > div:before                             {display: block; background: var(--color0b-opacity); position: absolute; inset: 0; z-index: 1; content: "";}

.steps > div > *                                {position: relative; z-index: 2;}

.steps .icon                                    {margin-bottom: 0.5em;}

.steps h3 span                                  {display: block; width: 100%; font-size: 0.7em;}

  @media screen and (min-width: 961px)          {

  .steps > div                                  {width: 31.9%; padding: min(4em, 4vw); background-image: url("../images/pelhrimov.webp"); background-size: auto 100%;}

  .steps > div:nth-child(1)                     {background-position: left center;}

  .steps > div:nth-child(3)                     {background-position: right center;}

  }

  @media screen and (max-width: 960px)          {

  .steps > div                                  {background-image: url("../images/pelhrimov-mobile.webp");}

  .steps > div:nth-child(1)                     {background-position: center top;}

  .steps > div:nth-child(3)                     {background-position: center bottom;}

  }



.section:has(.price-head):before                {display: block; width: 160rem; height: 50rem; background-image: linear-gradient(to bottom, var(--color0b), transparent); opacity: 0.5; position: absolute; left: calc(50% - 80rem); top: -6rem; z-index: -1; content: "";

                                                 -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center;

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent); mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);}



.price-head                                     {align-items: flex-start; gap: 0 var(--gap2); padding: min(4em, calc(0.8em + 5vw)); margin-bottom: var(--section-padding);}  

.price-head p:first-of-type                     {margin-bottom: var(--gap1);}

  @media screen and (min-width: 1281px)         {

  .price-head                                   {flex-wrap: nowrap;}

  .price-head h3                                {width: 11rem;}

  .price-head p                                 {font-size: 1.2em; line-height: 1.53;}

  .price-head p:first-of-type                   {width: 50%;}

  .price-head p:last-child                      {width: calc(100% - 50% - 11rem - 2 * var(--gap2)); text-align: right;}

  }

  @media screen and (min-width: 769px) and (max-width: 1280px){

  .price-head                                   {justify-content: flex-end;}

  .price-head h3                                {width: 11rem;}

  .price-head p                                 {width: calc(100% - var(--gap2) - 11rem)}             

  .price-head p:first-of-type                   {font-size: 1.15em;}

  }

  @media screen and (max-width: 768px)          {

  .price-head h3                                {margin-bottom: var(--gap1);}

  }



.pricing                                        {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0; box-sizing: border-box;}

.pricing > div                                  {display: flex; width: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: var(--gap1); padding-left: 4.3rem; position: relative; box-sizing: border-box;}

.pricing > div .icon                            {position: absolute; left: 0; top: 0.25em;}

.pricing > div .button                          {font-size: 0.8em; margin-top: 0.4em;}

  @media screen and (min-width: 641px)          {

  .pricing                                      {padding-inline: 4.3rem;}

  }

  @media screen and (min-width: 641px)          {

  .pricing > div                                {width: 47%;}

  }



.price-bottom                                   {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--gap1) var(--gap2); padding-top: 2em; border-top: solid 0.1em var(--color0b); box-sizing: border-box; margin-top: var(--section-padding);}  

.price-bottom h3                                {font-size: 1em;}

.price-bottom .button                           {font-size: 0.8em; margin-top: 0.4em;}

  @media screen and (min-width: 1081px)         {

  .price-bottom                                 {flex-wrap: nowrap;}

  .price-bottom h3                              {width: 6rem;}

  .price-bottom p                               {width: calc(100% - 2 * var(--gap2) - 15rem);}

  }

  @media screen and (min-width: 641px)          {

  .price-bottom                                 {padding-inline: 4.3rem;}

  }



.form                                           {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box;}

.form-items                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1.8em;}

.form-bottom                                    {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; gap: 1.2em; margin-top: 1.4em;}

.form-bottom .consent                           {display: block; width: 100%; position: relative;}

.form-bottom .consent a                         {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.form-bottom .consent a:hover                   {color: white; text-decoration-color: transparent;}

.form-bottom .button                            {width: 100%; font-size: 1em;}

  @media screen and (min-width: 481px)          {

  .form .checkboxes .checkbox                   {width: calc(50% - 0.5 * var(--checkboxes-gap));}

  }



.form-item                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 0.5em; position: relative;}

.form-item-element                              {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; border: solid var(--form-item-border-width) var(--color0-300); border-radius: var(--border-radius0); box-sizing: border-box;}

.form-item :is(input, textarea)                 {display: block; width: 100%; background: none; font-size: 1.15em; color: white; border: none; border-bottom: solid 0.1em var(--color0d); outline: none; padding-bottom: 0.6em; box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;}

.form-item textarea                             {height: 10em;}

.form-item :is(input, textarea):focus           {border-color: var(--color1);}

.form-item :is(input, textarea)::placeholder    {color: var(--color0e);}

.form-item .form-error                          {display: block; width: 100%; font-size: 0.8em; color: #ff3352; font-weight: 700; padding-inline: 0.2em; box-sizing: border-box;}



.chk1                                           {position: absolute; left: -9999px; top: 0;}

.chk1:not(:checked) + label,   

.chk1:checked + label                           {display: block; min-width: 0.9em; min-height: 0.9em; position: relative; text-align: left; font-size: 0.85em; color: var(--color0e); font-weight: 400; padding-inline-start: 1.45em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}

.chk1:not(:checked) + label:before,

.chk1:checked + label:before                    {display: block; width: 0.9em; height: 0.9em; background: var(--color0e); background-size: 100% 100%; opacity: 0.7; border-radius: 0.2em; position: absolute; left: 0; top: 0.28em; overflow: hidden; content: "";}

.chk1:checked + label:before                    {background-image: URL('../images/check.svg'); background-color: var(--color1); opacity: 1;}



.footer                                         {display: block; width: 100%; padding-top: var(--section-padding); position: relative;}

.footer .contact                                {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--gap2) 0;}

.footer .form                                   {position: relative; z-index: 2;}

.footer .info                                   {display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--gap2); box-sizing: border-box;}

.footer .info > *:not(.map)                     {position: relative; z-index: 1;}

.footer  h2                                     {margin-bottom: 1rem;}

.footer .contact-type                           {display: flex; align-items: center; gap: 0.5em; font-size: 1.25em; color: white; font-weight: 700; text-decoration: underline; margin-top: calc(-0.8 * var(--gap2)); transition: .15s ease-in-out;}

.footer .contact-type img                       {display: block; width: 1.15em; height: auto;}

.footer .contact-type:hover                     {color: var(--color1); text-decoration-color: transparent;}

.footer .map                                    {display: flex; width: 100%; height: 8em; justify-content: center; align-items: center; position: relative;}

.footer .map:before                             {display: block; position: absolute; inset: -150% -80%; background-repeat: no-repeat; background-position: center center; background-size: contain; content: "";}

.footer .map img                                {display: block; width: 3em; height: auto; position: relative; top: -1.5em;}

.footer .info p                                 {font-size: 0.9em; line-height: 1.7;}

.footer .bottom                                 {display: flex; width: 100%; justify-content: center; padding-block: var(--gap3) 1.2em;}

.footer .bottom ul                              {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5em 1em; font-size: 0.8em;}

.footer .bottom ul li                           {display: block; color: var(--color0e);}

.footer .bottom ul li a,
.footer .bottom ul li span {color: inherit; text-decoration: underline;}

.footer .bottom ul li a:hover,
.footer .bottom ul li span:hover {color: white; text-decoration: none;}

  @media screen and (min-width: 961px)          {

  .footer .contact > div                        {width: 46%;}

  .footer h2                                    {justify-content: flex-start; text-align: left;}

  .footer .info                                 {padding-block: 3em; order: 2;}

  .footer .map                                  {left: -30%; bottom: -1em;}

  .footer .info p span                          {display: block;}

  }

  @media screen and (max-width: 960px)          {

  .footer:before                                {display: block; width: 160rem; height: 50rem; background-image: linear-gradient(to bottom, var(--color0b), transparent); opacity: 0.5; position: absolute; left: calc(50% - 80rem); top: 0; z-index: -1; content: "";

                                                 -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; ; mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: center center;

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent); mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);}

  .footer                                       {margin-top: var(--section-padding)}

  .footer .info                                 {flex-direction: row; flex-wrap: wrap;}

  .footer .info p                               {max-width: 30em; text-align: center;}

  .footer .info p span                          {display: inline-block; margin: 0.15em 0.3em;}

  }

  @media screen and (min-width: 769px)          {

  .footer .map:before                           {background-image: url("../images/map.webp");}

  }

  @media screen and (max-width: 768px)          {

  .footer .contact-type                         {font-size: 1.1em;}

  .footer .map:before                           {inset: -300% calc(50% - 50vw); background-image: url("../images/map-mobile.webp");}

  }



.wndw                                           {display: flex; width: 100%; height: 100%; flex-direction: row; justify-content: center; align-items: center; padding: min(1rem, 5%); box-sizing: border-box; position: fixed; left: -99999px; top: 0; z-index: 1000000;}

.wndw:before                                    {display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); position: absolute; left: 0; top: 0; z-index: -1; content: ""; opacity: 0; transition: opacity .3s ease-in-out;}

.wndw > .outer                                  {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}

.wndw > div                                     {display: flex; width: 100%; max-width: 40em; max-height: calc(100vh - 2rem); background: var(--color0b); backdrop-filter: blur(2px); position: relative; border-radius: 1.2em; top: 0; z-index: 2; box-shadow: 0 0 0.6em rgba(0,0,0,0.12); transform: scale(0.8); transition: .3s ease-in-out;}

.wndw > div .overflow                           {display: block; width: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box;}

.wndw > div .overflow > div                     {display: block; width: 100%; height: auto;}

.wndw.show                                      {left: 0;}

.wndw.show:before                               {opacity: 1;}

.wndw.show > div                                {transform: scale(1);}

.wndw.show.hide                                 {left: -99999px; transition: left 0s ease-in-out; transition-delay: 0.3s;}

.wndw.show.hide:before                          {opacity: 0;}

.wndw.show.hide > div                           {transform: scale(0.8) !important; opacity: 0;}

.wndw .cross                                    {display: block; width: 1.5em; height: 1.5em; font-size: 1em; background: var(--color1); border-radius: 100%; cursor: pointer; position: absolute; right: -0.4em; top: -0.4em; z-index: 10002; box-shadow: 0 0 0.4em rgba(0,0,0,0.1); transition: .2s ease-in-out;}

.wndw .cross span                               {display: block; width: 50%; height: 0.1em; background: var(--color0); border-radius: 2px; position: absolute; left: 25%; top: calc(50% - 0.05em); z-index: 1;}

.wndw .cross:hover                              {background: white;}

.wndw .cross span:nth-child(1)                  {transform: rotate(45deg);}

.wndw .cross span:nth-child(2)                  {transform: rotate(-45deg);}

.wndw .wndw-content                             {display: flex; width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1.2em; font-size: 1rem; padding: max(2rem, 8%) min(6rem, 7vw); box-sizing: border-box;}

.wndw .wndw-content .icon                       {margin-bottom: -0.35em;}

.wndw .wndw-content .title                      {display: block; width: 100%; text-align: center; font-size: 1.6em; color: var(--color1); font-weight: 700; line-height: 1.1; margin-bottom: -0.15em;}

.wndw .wndw-content .title:has(+ p)             {margin-bottom: -0.15em;}

.wndw .wndw-content p                           {display: block; width: 100%; text-align: center;}

.wndw .wndw-content p strong                    {font-weight: 700;}

.wndw .wndw-content .list-cols                  {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.8em 0;}

.wndw .wndw-content ul                          {display: block; width: 100%; margin-top: -0.2em;}

.wndw .wndw-content ul li                       {display: inline-block; width: 100%; padding-left: 1.5em; position: relative; box-sizing: border-box; margin-top: 0.2em;}

.wndw .wndw-content ul li:before                {display: block; width: 0.4em; height: 0.11em; background: white; border-radius: 0.05em; position: absolute; left: 0.5em; top: 0.67em; content: "";}

.wndw .wndw-content .flex                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em;}

.wndw .wndw-content .flex .button               {min-width: 8em; font-size: 0.9em;}  

.wndw.article > div                             {max-width: 55em;}

.wndw.article .wndw-content p                   {text-align: left;}

  @media screen and (min-width: 769px)          {

  .wndw .wndw-content ul                        {column-count: 2; column-gap: 1.4em;}

  .wndw .wndw-content .list-cols ul             {width: calc(50% - 0.7em); column-count: 1;}

  }