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

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

.chk_cookies {  }
.chk_cookies input[type="checkbox"]  { width:20px;display:inline; }

:root                                           {
                                                --font1:          'eurostile', sans-serif; /* 500, 800*/
                                                --font2:          'eurostile-extended', sans-serif; /* 900 */

                                                --color0:       #252525;
                                                --color1:       #004593;
                                                --color1b:      #00326c;
                                                --color2:       #c00d19;
                                                --color2b:      #92030d;
                                                --color3:       #58abff;
                                                --color3b:      #3b8ddf;

                                                --wrapper-side:   5vw;
                                                --section-padding:min(6rem, calc(2rem + 3vw));
                                                --gap1:           1rem;
                                                --gap2:           min(2rem, calc(0.5rem + 3vw));
                                                --border-radius1: 0.6rem;

                                                --skew:           skew(13deg);
                                                --skew-rev:       skew(-13deg);
                                                
                                                --swiper-button-width: min(3rem, calc(1rem + 4vw));                                                   
                                                }


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                                            {font-size: min(17px, calc(10px + 1vw));}
html, body, form                                {width: 100%;}
body                                            { display: block !important; margin: 0 auto; font-family: var(--font1); color: var(--color0); font-weight: 500; line-height: 1.25; position: relative; }
form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}

body.fixed                                      {overflow-y: hidden;}
body.fixed :is(.main, .footer)                  {opacity: 0.1; filter: blur(5px);}
.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 64rem; flex-wrap: wrap; margin-inline: auto; position: relative;}
  @media screen and (min-width: 1081px)         {
  .wrapper.wide                                 {max-width: 78rem;}
  .wrapper.narrow                               {max-width: 48rem;}
  }


.header                                         {display: block; width: 100%; height: var(--header-height); position: relative; z-index: 10000;}
.header .wrapper                                {height: 100%; justify-content: space-between; align-items: center;}
.header .logo                                   {display: block; width: var(--logo-width);}    
.header .logo img                               {display: block; width: 100%;}    
.header .collapse                               {display: flex;}
.header nav                                     {display: flex; width: 100%; justify-content: space-between;}
.header nav > ul                                {display: flex;}
.header nav > ul > li                           {display: flex; align-items: center; position: relative;}
.header nav > ul > li > a                       {display: flex; align-items: center; color: var(--color0); font-weight: 800; position: relative; box-sizing: border-box; transition: .2s ease-in-out;}
.header nav > ul > li > a[href]:hover,
.header nav > ul > li > a[aria-current="page"]  {color: var(--color2) !important;}
.header nav .button                             {font-size: 1.1em;}
  @media screen and (min-width: 1081px)         {
  .header                                       {--header-height: 8em; --logo-width: 11em;}
  .header #navicon                              {display: none;}
  .header :is(nav, ul)                          {gap: 2.7em;}
  .header nav > ul > li > a                     {font-size: 1.3em;}
  }
  @media screen and (max-width: 1080px)         {
  .header                                       {--header-height: 5em; --logo-width: 8.5em;}
  .header .collapse                             {width: 100%; height: calc(100vh - var(--header)); overflow-y: auto; position: fixed; left: -9999px; top: var(--header-height); box-sizing: border-box; opacity: 0; transform: scale(1.15); transition: opacity .5s ease-in-out, transform .5s ease-in-out;} 
  .header nav                                   {width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.8rem 0; padding: 3rem 13%; box-sizing: border-box;} 
  .header nav > ul                              {width: 100%; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; align-content: flex-start;}
  .header nav > ul > li                         {width: 100%; flex-wrap: wrap;}
  .header nav > ul > li > a                     {font-size: 1.7em;}
  .header nav .button                           {font-size: 1.2em; margin-top: 2em;}
  .header #navicon                              {display: flex; width: 1.5em; height: 14px; font-size: 1em; cursor: pointer; margin-right: 4.5em; position: relative; z-index: 10;}
  .header #navicon:after                        {display: flex; height: 100%; align-items: center; font-size: 1.4em; color: var(--color1); font-weight: 800; position: absolute; left: 1.5em; top: -0.05em; content: "MENU";}
  .header #navicon span                         {display: block; width: 100%; height: 0.18em; background: var(--color1); position: absolute; transition: .2s ease-in-out;}
  .header #navicon:hover span                   {background: var(--color1);}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 0.09em);}
  .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 .collapse                        {left: 0; opacity: 1; transform: scale(1);}
  .header.show.hide .collapse                   {opacity: 0; transform: scale(1.15);}
  }

.footer                                         {display: block; width: 100%; background: var(--color1); overflow: hidden;}
.footer .wrapper                                {justify-content: space-between;}
.footer .wrapper ul                             {display: flex; flex-wrap: wrap; gap: 0.3em 0; position: relative; z-index: 1; box-sizing: border-box;}
.footer .wrapper ul:first-child                 {gap: 0.3em 1.2em;}
.footer .wrapper ul li                          {display: flex; align-items: center; font-size: 1em; font-weight: 500;}
.footer .wrapper ul li a                        {display: flex; align-items: center; color: white; gap: 0.35em; transition: .15s ease-in-out;}
.footer .wrapper ul li a img                    {display: block; width: 1em;}
.footer .wrapper ul li a:hover                  {color: var(--color2);}
  @media screen and (min-width: 1081px)         {
  .footer .wrapper ul                           {padding-block: min(1.6em, calc(0.8em + 5vw));}
  .footer .wrapper ul:nth-child(1)              {padding-right: 2.5em;}
  .footer .wrapper ul:nth-child(1):before       {display: block; width: 200%; height: 100%; opacity: 0.2; background-image: linear-gradient(to right, transparent, var(--color3)); position: absolute; right: 0; top: 0; z-index: -1; content: ""; transform: var(--skew-rev);}
  }
  @media screen and (max-width: 1080px)         {
  .footer                                       {padding-block: min(2em, calc(0.8em + 5vw));}
  .footer .wrapper,
  .footer .wrapper ul                           {justify-content: center;}
  .footer .wrapper ul:nth-child(1)              {font-size: 1.15em; padding: 1em 1.5em; margin-bottom: 1.2em;}
  .footer .wrapper ul:nth-child(1):before       {display: block; width: 100%; height: 100%; opacity: 0.2; background: var(--color3); border-radius: 0.3em; position: absolute; left: 0; top: 0; z-index: -1; content: ""; transform: var(--skew-rev);}
  .footer .wrapper ul:nth-child(2)              {width: 100%; font-size: 0.85em;}
  }
  @media screen and (min-width: 541px)          {
  .footer .wrapper ul:not(:first-child) li:not(:last-child):after   
                                                {display: block; width: 0.1em; height: 0.9em; background: var(--color2); margin-inline: 0.8em; position: relative; top: 0.02em; content: "";}
  }
  @media screen and (max-width: 540px)          {
  .footer .wrapper ul:nth-child(2)              {gap: 0.5em 1em;}
  }

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

h1, h2, h3                                      {display: block; width: 100%; color: var(--color1); font-weight: 900; line-height: 1.1; box-sizing: border-box; position: relative; font-family: var(--font2);}
h1                                              {font-size: min(3.5rem, calc(1.2rem + 5vw)); color: var(--color1);}
h2                                              {font-size: min(3.5rem, calc(1.2rem + 5vw));}
h3                                              {font-size: min(1.5rem, calc(0.9rem + 5vw));}
h2 span, h3 span                                {color: var(--color1);}

.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%; 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(--color1); text-decoration-color: transparent;}

p.large                                         {font-size: 1.3em; line-height: 1.3;}

.section                                        {display: block; width: 100%; position: relative; padding-block: var(--section-padding); overflow: hidden;}
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}
.section.gradient:before                        {display: block; width: 100%; height: 30rem; opacity: 0.15; background-image: linear-gradient(to bottom, var(--color3), transparent); position: absolute; left: 0; top: 0; z-index: -1; content: "";}

.section:has(.page-head)                        {padding-top: calc(0.5 * var(--section-padding));}
.page-head                                      {display: block; width: 100%; padding-inline: var(--gap2); margin-bottom: var(--gap2); box-sizing: border-box;}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.6em;}

.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 1.1em; color: white; font-weight: 800; white-space: nowrap; padding: 0.6em 1.3em; border: none; outline: none; border-radius: 0.3em; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}
.button img                                     {display: block; width: 0.8em; height: auto;}
.button:hover                                   {transform: scale(0.95);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}
.button.color3                                  {background: var(--color3);}
.button.color3:hover                            {background: var(--color3b);}

.link1                                          {display: flex; align-items: center; gap: 0.4em; font-size: 1.25em; color: var(--color0); font-weight: 800; text-decoration: underline ;cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}
.link1 img                                      {display: block; width: 0.85em; height: auto; position: relative; top: 0.08em;}
.link1:hover                                    {color: var(--color2); text-decoration-color: transparent;}

.pagination                                     {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 0.3em; margin-top: var(--gap2); padding-inline: var(--gap2); box-sizing: border-box;}
.pagination a                                   {display: flex; width: 2.2em; height: 2.2em; justify-content: center; align-items: center; font-size: 0.9em; line-height: 1em; color: var(--color1);; font-weight: 800; border-radius: 0.3em; box-sizing: border-box; overflow: hidden; position: relative; z-index: 1; transition: .2s ease-in-out;}
.pagination a:before                            {display: block; background: var(--color3); opacity: 0.15; position: absolute; inset: 0; z-index: -1; content: ""; transition: .2s ease-in-out;}
.pagination a:hover:before                      {opacity: 0.3;}
.pagination a.sel                               {color: white;}
.pagination a.sel:before                        {background: var(--color1); opacity: 1;}
  @media screen and (max-width: 1080px)         {
  .pagination a                                 {font-size: 0.9em;}
  }

.anim                                           {transition-delay: 2s; opacity: 0; transform: scale(0.9,0.9); transition: .6s ease-in-out;}
.anim.play                                      {opacity: 1; transform: scale(1,1);}

.hero                                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap1) 0;}
.hero article                                   {display: flex; flex-wrap: wrap; gap: var(--gap1);}
.hero article h1                                {font-size: min(4rem, calc(1.5rem + 5vw));}
.hero article p                                 {font-size: 1.3em;}
.hero .img                                      {display: block; position: relative;}
.hero .img .background                          {display: block; width: 100%; position: absolute; border-radius: var(--border-radius1); transform: var(--skew); background-image: linear-gradient(to right, var(--color1) 0%, var(--color1) 30%, var(--color2) 30%, var(--color2) 33%, var(--color1) 33%, var(--color1) 35%, var(--color1b) 35%, var(--color1b) 55%, var(--color1) 55%, var(--color1) 57%, var(--color1b) 57%, var(--color1b) 70%, var(--color1) 70%);}
.hero .img > img                                {display: block; width: 100%; position: relative; z-index: 2;}
.hero .img .hero-contacts                       {display: flex; gap: 0.3em; position: absolute; z-index: 2; transform: var(--skew-rev);}
.hero .img .hero-contacts > span                {display: block; background: var(--color3); border-radius: 0.25em; transition: .15s ease-in-out;}
.hero .img .hero-contacts > span a              {display: flex; width: 100%; height: 2.8em; align-items: center; gap: 0.4em; font-size: 1em; color: white; font-weight: 800; padding: 0 1em; box-sizing: border-box; transform: var(--skew);}
.hero .img .hero-contacts > span a img          {display: block; width: 1.15em;} 
.hero .img .hero-contacts > span:hover          {background: var(--color3b);}          
  @media screen and (min-width: 1081px)         {
  .hero article                                 {width: 40%;}
  .hero article p                               {position: relative; left: -0.6em;}
  .hero .img                                    {width: 55%;}
  .hero .img .background                        {width: 80%; height: calc(100% + 2 * var(--section-padding)); left: 10%; top: calc(0px - var(--section-padding));}
  .hero .img > img                              {transform: scale(1.4) translateX(2em);}
  .hero .img .hero-contacts                     {flex-direction: column; align-items: flex-start; position: absolute; right: -15%; bottom: 0;}
  .hero .img .hero-contacts > span              {width: 100%;}
  .hero .img .hero-contacts > span a            {font-size: 1.15em;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .hero .img .background                        {width: 150%;}
  .hero .img .hero-contacts                     {width: 25rem; right: calc(25rem - 50vw);}
  }
  @media screen and (max-width: 1080px)         {
  .hero                                         {justify-content: center;}
  .hero .img                                    {order: -1;}
  .hero .img .background                        {width: 80%; height: 75%; left: 10%; top: 0;}
  .hero .img .hero-contacts                     {width: 100%; justify-content: center; flex-wrap: wrap; bottom: 10%;}
  .hero article                                 {justify-content: center;}
  .hero article *                               {text-align: center;}
  }
  @media screen and (max-width: 540px)          {
  .hero .img .hero-contacts > span a            {font-size: 0.85em;}
  .hero .img .hero-contacts > span a span       {display: none;}
  }


.hp-about                                       {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap1) 0;}
.hp-about article                               {display: flex; flex-wrap: wrap; gap: var(--gap1);}
.hp-about article p                             {font-size: 1.3em;}
.hp-about .hp-infographics                      {display: block; position: relative; box-sizing: border-box;}
.hp-infographics .background                    {display: block; width: 100%; position: absolute; border-radius: var(--border-radius1); transform: var(--skew); background: var(--color3); opacity: 0.1;}
.hp-infographics > div                          {display: flex; flex-wrap: wrap; gap: var(--gap1) var(--gap2);}
.hp-infographics > div > span                   {display: block; font-size: 2em; line-height: 1;}
.hp-infographics > div > span strong            {font-size: 2.2em; color: var(--color2); font-weight: 900; font-family: var(--font2);}
  @media screen and (min-width: 1081px)         {
  .hp-about                                     {margin-top: var(--section-padding);}
  .hp-about article                             {width: 45%; order: 2;}
  .hp-about article p                           {position: relative; left: -0.6em;}
  .hp-infographics                              {width: 45%;}
  .hp-infographics .background                  {width: 115%; height: calc(100% + 2 * var(--section-padding)); right: 10%; top: calc(0px - var(--section-padding));}
  .hp-infographics > div                        {min-height: 16rem; flex-direction: column; justify-content: center; align-items: flex-start;}
  .hp-infographics > div > span strong          {display: inline-block; width: 2em;}
  }
  @media screen and (min-width: 1081px) and (max-width: 1600px){
  .hp-infographics .background                  {width: 150%;}
  }
  @media screen and (max-width: 1080px)         {
  .hp-about                                     {justify-content: center;}
  .hp-about article                             {justify-content: center;}
  .hp-about article *                           {text-align: center;}
  .hp-infographics                              {order: -1; padding: min(3rem, 5%) min(4rem, 10%);}
  .hp-infographics .background                  {width: 100%; height: 100%; left: 0; top: 0;}
  .hp-infographics > div span                   {margin-left: 1rem;}
  .hp-infographics > div span strong            {display: block; position: relative; left: -1rem;}
  }
  @media screen and (max-width: 540px)          {
  .hp-infographics                              {font-size: 0.75em;}
  }

.hp-services                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2);}
.hp-services h2                                 {text-align: center;}
  @media screen and (min-width: 769px)          {
  .hp-services .services                        {margin-block: 1em;}
  }

.services                                       {display: flex; width: 100%; justify-content: space-between;}
.services > div                                 {display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 1em; position: relative; z-index: 1; box-sizing: border-box;}
.services > div .img                            {display: block; width: 100%; position: relative; z-index: 1; padding-block: 0.6em;}
.services > div .img img                        {display: block; width: 100%; transition: .25s ease-in-out;}
.services > div .img:before                     {display: block; width: 6em; height: 100%; background: var(--color2); opacity: 0.12; border-radius: 0.3em; position: absolute; left: calc(50% - 3em); top: 0; z-index: -1; Content: ""; transform: var(--skew-rev); transition: .15s ease-in-out;}
.services > div > span                          {text-align: center; font-size: 1.3em; color: var(--color0); font-weight: 800; line-height: 1.2; font-family: var(--font1); transition: .15s ease-in-out;}
.services > div .link                           {display: block; position: absolute; inset: 0; z-index: 2; box-sizing: border-box;}
.services:not(.submenu) > div:hover .img img    {transform: scale(1.05);}
.services:not(.submenu) > div:hover .img:before {opacity: 0.2;}
.services:not(.submenu) > div:hover h3          {color: var(--color2)}
.services.submenu > div                         {width: 32.5%; padding: min(1.5em, calc(0.2em + 5vw));}
.services.submenu > div:before                  {display: block; position: absolute; inset: 0; opacity: 0.3; border: solid 0.09em var(--color3); border-radius: var(--border-radius1); content: "";}
.services.submenu > div > span                  {font-size: 1.15em;}
.services.submenu > div .button                 {font-size: 0.9em;}
.services.submenu > div:hover:hover             {opacity: 1;}
  @media screen and (min-width: 1081px)         {
  .services.submenu                             {width: 110%; margin-inline: -5%;}
  }
  @media screen and (min-width: 769px)          {
  .services > div                               {width: 28%;}
  }
  @media screen and (max-width: 768px)          {
  .services > div                               {width: 30%;}
  .services > div > span                        {font-size: 1.1em;}
  }
  @media screen and (max-width: 540px)          {
  .services > div > span                        {font-size: 1em;}
  .services.submenu > div > span                {font-size: 1em;}
  .services.submenu > div .button span          {display: none;}
  }

.hp-cars                                        {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2);}
.hp-cars h2                                     {text-align: center;}

.swiper                                         {width: 100%;}
.swiper-slide                                   {display: flex; height: auto; position: relative; overflow: hidden; flex-shrink: 0;}

.swiper-button                                  {display: flex; width: calc(0.8 * var(--swiper-button-width)); height: var(--swiper-button-width); justify-content: center; align-items: center; background: var(--color2); font-size: 1em; border-radius: 0.35em; position: absolute; top: calc(50% - var(--swiper-button-width) / 2); z-index: 100; margin: 0; cursor: pointer; transform: var(--skew-rev); transition: .15s ease-in-out;}                                
.swiper-button-prev                             {transform: rotateY(180deg) var(--skew-rev);}
.swiper-button img                              {display: block; width: 30%; height: auto;}
.swiper-button:after                            {display: none;}
.swiper-button-disabled                         {opacity: 0 !important;}
.swiper-button:hover                            {background: var(--color1b);}

.carousel                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); position: relative; padding-inline: calc(var(--swiper-button-width) - 1.5em); box-sizing: border-box; overflow: hidden;}
.carousel .swiper-slide > *                     {width: 100%;}
.carousel .controls                             {display: flex; width: 100%; justify-content: center; gap: 0.5em; margin-top: 1.5rem;}
  @media screen and (min-width: 769px)          {
  .carousel                                     {padding-inline: 4.6rem;}
  .carousel .swiper-button-prev                 {left: 0.4rem;}
  .carousel .swiper-button-next                 {right: 0.4rem;}
  }
  @media screen and (max-width: 768px)          {
  .carousel                                     {width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 3.5rem;}
  .carousel .swiper                             {overflow: visible;}
  .carousel .swiper-slide                       {opacity: 0.25; transition: opacity .25s ease-in-out;}
  .carousel .swiper-slide-active                {opacity: 1;}
  .carousel .swiper-button                      {height: calc(2 * var(--swiper-button-width)); top: calc(50% - var(--swiper-button-width)); transform: skew(0); border-top-right-radius: 0; border-bottom-right-radius: 0;}
  .carousel .swiper-button-prev                 {left: 0; transform: rotate(180deg);}
  .carousel .swiper-button-next                 {right: 0;}
  }

.preview                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.7rem;}
.preview .img                                   {display: flex; width: 100%; padding-top: 75%; overflow: hidden; border-radius: var(--border-radius1); position: relative; transition: .15s ease-in-out;}
.preview .img span                              {display: block; position: absolute; inset: 0;}
.preview .img:hover                             {opacity: 0.85;}
.preview .img span img                          {display: block; width: 100%; height: 100%; object-fit: cover;}
.preview .row1                                  {display: flex; width: 100%; justify-content: space-between; padding-inline: 0.8em; box-sizing: border-box;}
.preview .row1 > div:nth-child(1)               {display: block; width: calc(100% - 6.5em);}
.preview .row1 > div:nth-child(2)               {display: block; width: 6em;}
.preview .title                                 {display: block; font-size: 1.7em; font-weight: 800; line-height: 1.05;}
.preview .title a                               {color: var(--color0); transition: .15s ease-in-out;}
.preview .title a:hover                         {color: var(--color2);}
.preview .info1                                 {display: block; font-size: 1.15em; margin-top: 0.1em;}
.preview .price-note                            {display: block; text-align: right; font-size: 0.85em;}
.preview .price                                 {display: block; text-align: right; font-size: 0.85em; color: var(--color2); line-height: 1.1;}
.preview .price strong                          {display: block; font-size: 1.35em;}
.preview .row2                                  {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; gap: 0.8em 1em; padding: 0.7rem; box-sizing: border-box; position: relative; z-index: 1;}
.preview .row2:before                           {display: block; background: var(--color3); opacity: 0.15; border-radius: 0.25em; position: absolute; inset: 0; z-index: -1; content: "";}
.preview .info2                                 {display: block; font-size: 0.8em; color: var(--color1); line-height: 1.1;}
.preview .link1                                 {font-size: 1.1em;}

.cars                                           {display: flex; width: 100%; flex-wrap: wrap; gap: 2.2rem 1.35rem;}
  @media screen and (min-width: 1081px)         {
  .cars .preview                                {width: calc(33.33% - 0.9rem);}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .cars .preview                                {width: calc(50% - 0.675rem);}
  }

.infographics                                   {display: block; width: 100%; position: relative; padding: min(3rem, 5%) min(4rem, 10%); box-sizing: border-box;}
.infographics .background                       {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); transform: var(--skew); background: var(--color3); opacity: 0.1;}
.infographics > div                             {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2);}
.infographics > div > span                      {display: block; font-size: 2em; line-height: 1; margin-left: 1rem;}
.infographics > div > span strong               {font-size: 2.2em; color: var(--color2); font-weight: 900; font-family: var(--font2);}
  @media screen and (min-width: 1081px)         {
  .infographics                                 {width: 110%; margin-inline: -5%;}
  .infographics > div > span strong             {display: inline-block; width: 2em;}
  }
  @media screen and (max-width: 1080px)         {
  .infographics > div span strong               {display: block; position: relative; left: -1rem;}
  }
  @media screen and (max-width: 540px)          {
  .infographics                                 {font-size: 0.75em;}
  }

.article                                        {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2);}
.article .page-head                             {margin-bottom: 0;}
.article :is(h2, h3)                            {padding-inline: var(--gap1); margin-bottom: calc(0px - 0.5 * var(--gap2));}
.article h2                                     {font-size: min(2.2rem, calc(0.7rem + 4vw));}
.article h3                                     {font-size: min(1.7rem, calc(0.5rem + 4vw)); color: var(--color0);}
.article :is(p, li, td)                         {font-size: 1.2em;}
.article .block                                 {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2);}
.article p + ul                                 {margin-top: -1em;}
.article :is(ul, ol)                            {display: flex; flex-wrap: wrap; gap: 0.2em; padding: 0 0 0 1em; margin: -0.15em 0 0;}
.article :is(ul li, ol li)                      {padding-left: 1.3em; position: relative; box-sizing: border-box;}
.article li:before                              {display: block; position: absolute; content: "";}
.article ul li:before                           {width: 0.5em; height: 0.18em; background: var(--color1); left: 0.1em; top: 0.58em; transform: var(--skew);}
.article ol                                     {list-style-type: none; counter-reset: li;}
.article ol li                                  {counter-increment: li;}
.article ol li:before                           {color: var(--color1); font-weight: 800; left: -0.05em; top: 0; content: counter(li)".";}
.article .image                                 {display: block; width: 100%; padding-top: 75%; border-radius: var(--border-radius1); overflow: hidden; box-sizing: border-box; position: relative; transition: .15s ease-in-out;} 
.article .image span                            {display: block; position: absolute; inset: 0;}
.article .image span img                        {display: block; width: 100%; height: 100%; object-fit: cover;}
.article .image:hover                           {opacity: 0.8;}
.article .highlight                             {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); padding: 1.5em 1.5em; border: solid 0.14em var(--color1); border-radius: var(--border-radius1); box-sizing: border-box;}
.article .highlight > *:first-child             {margin-top: 0 !important;}

.gallery-slider                                 {margin-block: 0.8rem;}
.gallery-slider .swiper-slide a                 {display: block; width: 100%; padding-top: 75%; position: relative; border-radius: var(--border-radius1); overflow: hidden; transition: .15s ease-in-out;}
.gallery-slider .swiper-slide a span            {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; inset: 0;}
.gallery-slider .swiper-slide a span img        {display: block; width: 100%; height: 100%; object-fit: cover;;}
.gallery-slider .swiper-slide a:hover           {opacity: 0.85;}
.gallery-slider .swiper-slide-next              {opacity: 1;}
  @media screen and (min-width: 769px)          {
  .gallery-slider                               {width: calc(100% + 3rem); margin-inline: -1.5rem; padding-inline: 1.5rem;}
  }

.contacts                                       {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) 0; position: relative; box-sizing: border-box;}
.contacts > div                                 {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1) var(--gap2); box-sizing: border-box;}
.contacts > div h2                              {font-size: min(1.8rem, calc(0.4rem + 4vw));} 
.contacts .contacts1                            {gap: 0.3em var(--gap2); padding: max(1.6rem, 6%); border: solid 0.15em var(--color1); border-radius: var(--border-radius1);;}
.contacts .contacts1 h2                         {margin-bottom: 0.3em;}
.contacts .contacts1 a                          {display: flex; align-items: center; gap: 0.35em; font-size: min(1.5rem, calc(0.3rem + 4vw)); color: var(--color1); transition: .15s ease-in-out;}
.contacts .contacts1 a img                      {display: block; width: 1em;}
.contacts .contacts1 a:hover                    {color: var(--color2); text-decoration-color: transparent;}
.contacts .contacts2 h2                         {margin-block: 0 calc(0px - 0.3 * var(--gap1));}
.contacts .contacts2 h2:not(:first-child)       {margin-top: 1em;}
.contacts .contacts2 ul                         {display: block;}
.contacts .contacts2 ul li .small               {display: inline-block; font-size: 0.7em; line-height: 1.4; margin-top: 0.8em;}
  @media screen and (min-width: 1081px)         {
  .contacts > div                               {width: 46%;}
  .contacts .contacts2 ul:nth-of-type(2)        {width: 17em;}
  }
  @media screen and (max-width: 1081px)         {
  .contacts .contacts2                          {padding-inline: var(--gap2);}
  }

.map                                            {height: 26rem; padding: 0;}
.map .wrapper                                   {height: 100%;}
.map .wrapper iframe                            {display: block; width: 100%; height: 100%; position: absolute; inset: 0;}
  @media screen and (min-width: 1801px)         {
  .map .wrapper                                 {overflow: hidden; border-radius: var(--border-radius1);}
  }
  @media screen and (max-width: 1801px)         {
  .map .wrapper                                 {width: 100%; max-width: 100%;}
  }

.contact-form                                   {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1rem 0; padding: 10%; position: relative; z-index: 1; box-sizing: border-box;}
.contact-form:before                            {display: block; background: var(--color3); opacity: 0.15; border-radius: var(--border-radius1); position: absolute; inset: 0; z-index: -1; content: "";}
.contact-form h2                                {font-size: min(2.2rem, calc(0.7rem + 4vw));} 

input, textarea, .custom-select                 {display: block; width: 100%; height: var(--form-item-height); font-size: 1.1em; font-weight: 800; color: var(--color0); background: white; padding: 0 1rem; border: solid 0.1em transparent; border-radius: var(--border-radius1); outline: none; box-sizing: border-box; font-family: var(--font1); transition: .2s ease-in-out;}
textarea                                        {padding: 1rem;}
input:focus, textarea:focus                     {border-color: var(--color3);}

.form-items                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 1rem var(--form-items-gap); --form-item-height: 3.4rem; --form-items-gap: 1rem;}
.form-item                                      {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 0.45rem; position: relative;}
.form-item label                                {display: block; width: 100%; text-align: left; font-size: 1.1em; color: var(--color1); font-weight: 800; padding: 0 1rem; box-sizing: border-box;}
.form-item:has(textarea)                        {width: 100%;}
.form-item input                                {height: var(--form-item-height);}
.form-item textarea                             {height: 11em;}
.form-item input:focus,
.form-item textarea:focus                       {outline-color: var(--color1);}
.form-item .form-error                          {display: block; width: 100%; font-size: 0.85em; color: var(--color2); font-weight: 800; padding-inline: var(--gap1); box-sizing: border-box;}
.permission                                     {display: block; width: 100%; font-size: 0.95em; color: var(--color1b); margin-top: 1rem;}
.permission a                                   {color: var(--color1b); text-decoration: underline; font-weight: 800; transition: .15s ease-in-out;}
.permission a:hover                             {color: var(--color2); text-decoration: none;}
.contact-form .button                           {margin-top: 0.9rem;}
  @media screen and (min-width: 725px)          {
  .form-item                                    {width: calc(50% - 0.5 * var(--form-items-gap));}
  .permission                                   {width: calc(100% - 14rem); text-align: right;}
  }
  @media screen and (max-width: 724px)          {
  .contact-form                                 {justify-content: center;}
  .contact-form h2                              {text-align: center;}
  .form-item                                    {width: 100%;}
  .permission                                   {text-align: center;}
  .permission br                                {display: none;}
  }

.custom-select                                  {position: relative;}
.custom-select select                           {position: absolute; left: -9999px;}
.custom-select .sel                             {display: flex; width: 100%; height: var(--form-item-height); align-items: center; font-size: 1em; color: var(--color0); font-weight: 700; line-height: 1.2; letter-spacing: 0; padding-inline: 1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: solid 0.1em transparent; box-sizing: border-box; cursor: pointer; position: absolute; left: 0; top: -0.1em; z-index: 2; transition: .2s ease-in-out;}
.custom-select .sel:hover                       {color: var(--color0);}
.custom-select > svg                            {display: block; width: 0.65em; fill: var(--color1); position: absolute; right: 1rem; top: 1.15em; z-index: 1;}
.custom-select .dropdown                        {display: none; width: calc(100% + 2px); background: white; box-shadow: 0 0 0.25em rgba(0,0,0,0.10); border-radius: 0.6em; overflow: hidden; box-sizing: border-box; margin-top: 0.2em; position: absolute; left: -1px; top: var(--form-item-height); z-index: 8;}
.custom-select .dropdown .inner                 {display: flex; width: 100%; max-height: 16em; flex-wrap: wrap; gap: 0.6rem; --dropdown-padding: 1rem; overflow-y: auto;}
.custom-select .inner ul                        {display: block; width: 100%;}
.custom-select .inner ul li                     {display: flex; width: 100%; min-height: 2em; align-items: center; font-size: 0.9em; font-weight: 500; line-height: 1.1em; letter-spacing: 0; color: #666666; border-top: solid 1px rgba(0,0,0,0.1); padding: 0.65em 1rem; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:after               {display: block; width: 0.6em; height: 0.6em; opacity: 0.5; position: absolute; right: 0.9em; top: calc(50% - 0.3em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='254.5,271 81.3,97.7 0,179 254.5,433.5 509,179 427.7,97.7' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; transform: rotate(-90deg); transition: .15s ease-in-out;}
.custom-select .inner ul li:hover               {color: var(--color0); background: rgba(0,0,0,0.04);}
.custom-select .inner ul li:hover:after         {opacity: 0.9;}

.detail                                         {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap2) 0;}
.detail > div                                   {display: flex; width: 100%; flex-wrap: wrap;}
.detail .image .cover                           {padding: 0; overflow: visible;}
.detail .image .cover .swiper                   {border-radius: var(--border-radius1) var(--border-radius1) 0 0;}
.detail .image .cover .swiper-slide a           {display: block; width: 100%; padding-top: 75%; position: relative; transition: .15s ease-in-out;}
.detail .image .cover .swiper-slide a span      {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; inset: 0;}
.detail .image .cover .swiper-slide a span img  {display: block; width: 100%; height: 100%; object-fit: cover;;}
.detail .image .cover .swiper-slide a:hover     {opacity: 0.85;}
.detail .image .thumbs                          {padding: 0;}
.detail .image .thumbs .swiper                  {border-radius: 0 0 var(--border-radius1) var(--border-radius1);}
.detail .image .thumbs .swiper-slide            {opacity: 1 !important;}
.detail .image .thumbs .swiper-slide:after      {display: block; width: 100%; height: 0.2em; background: var(--color2); position: absolute; left: 0; top: 0; opacity: 0; content: ""; transition: .15s ease-in-out;}
.detail .image .thumbs .swiper-slide-thumb-active:after
                                                {opacity: 1 !important;}
.detail .image .thumbs .swiper-slide a          {display: block; width: 100%; padding-top: 75%; position: relative; cursor: pointer; transition: .15s ease-in-out;}
.detail .image .thumbs .swiper-slide a span     {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; inset: 0;}
.detail .image .thumbs .swiper-slide a span img {display: block; width: 100%; height: 100%; object-fit: cover;;}
.detail .image .thumbs .swiper-slide a:hover    {opacity: 0.85;}
.detail h1                                      {font-size: min(2.6rem, calc(1.2rem + 4vw));}
.detail .info1                                  {display: block; width: 100%; font-size: min(1.6rem, calc(0.6rem + 4vw)); margin-top: 0.12em;}
.detail-infographics                            {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.1em 0; margin-top: var(--gap1); position: relative;}
.detail-infographics > div                      {display: flex; width: 32.6%; align-items: flex-start; align-content: flex-start; gap: 0.5em; padding: min(1.2em, calc(0.4em + 3vw)); box-sizing: border-box; position: relative; z-index: 1;}
.detail-infographics > div:before               {display: block; border-radius: 0.6em; border: solid 0.1em var(--color3); box-sizing: border-box; opacity: 0.25; position: absolute; inset: 0; content: "";}
.detail-infographics > div img                  {display: block; width: 1.8em; position: relative; top: 0.18em;}
.detail-infographics > div > span               {display: block;}
.detail-infographics > div > span span          {display: block; font-size: 0.8em; color: var(--color2); font-weight: 800; line-height: 1.2;}
.detail .info2                                  {display: block; width: 100%; margin-top: var(--gap1);}
.detail .price-info                             {display: flex; width: 100%; position: relative; margin-top: var(--gap2);}
.detail .price-info .price-note                 {display: block; font-size: 0.9em; color: var(--color1); font-weight: 800; background: white; padding-inline: 0.6rem; position: absolute; left: 1.1rem; top: -0.55rem;}
.detail .price-info .price                      {display: block; text-align: right; font-size: 1em; font-weight: 800; padding: 0.7rem 1.5rem 1rem; border: solid 0.15em var(--color1); border-radius: 0.5em; box-sizing: border-box;}
.detail .price-info .price strong               {display: block; font-size: 1.6em;}
  @media screen and (max-width: 1600px)         {
  .section:has(.detail)                         {padding-top: 0;}
  } 
  @media screen and (max-width: 1366px)         {
  .detail-infographics > div                    {justify-content: center; flex-wrap: wrap;}
  .detail-infographics > div img                {top: auto;}
  .detail-infographics > div > span             {width: 100%; text-align: center;}
  }
  @media screen and (min-width: 1081px)         {
  .detail > div                                 {width: 47%;}
  }
  @media screen and (min-width: 769px)          {
  .detail .image .cover .swiper-button-prev     {left: -1rem;}
  .detail .image .cover .swiper-button-next     {right: -1rem;}
  }
  @media screen and (max-width: 440px)          {
  .detail-infographics                          {padding: min(1.2em, calc(0.4em + 3vw));}
  .detail-infographics:before                   {display: block; border-radius: 0.6em; border: solid 0.1em var(--color3); box-sizing: border-box; opacity: 0.25; position: absolute; inset: 0; content: "";}
  .detail-infographics > div                    {padding: 0;}
  .detail-infographics > div:before             {display: none;}
  }

.info-page                                      {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1); border: solid 0.15em var(--color3); border-radius: var(--border-radius1); padding: min(5rem, calc(1rem + 5vw)) min(8rem, calc(1rem + 5vw)); box-sizing: border-box);}
.info-page .icon                                {display: block; width: 4em;}
.info-page :is(h1, p)                           {text-align: center;}
  @media screen and (max-width: 1600px)         {
  .section:has(.info-page)                         {padding-top: 0;}
  }