﻿a.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;
}

.editor { padding:20px; }

.news-detail {
    max-width: 705px; margin: 10px auto;
    border: 1px solid black;
    padding: 10px;
    height: auto!important;
}

.enRozvrzeni {
}

.deRozvrzeni {
}
    
body {
    display: block !important;
}

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

/*------------------------------------------------------*/



@font-face {

  font-family: 'Panchang';

  src: url('font/Panchang-Medium.woff2') format('woff2'),

       url('font/Panchang-Medium.woff') format('woff'),

       url('font/Panchang-Medium.ttf') format('truetype');

  font-weight: 500;

  font-display: swap;

  font-style: normal;

}

@font-face {

  font-family: 'Panchang';

  src: url('font/Panchang-Semibold.woff2') format('woff2'),

       url('font/Panchang-Semibold.woff') format('woff'),

       url('font/Panchang-Semibold.ttf') format('truetype');

  font-weight: 600;

  font-display: swap;

  font-style: normal;

}



button                                          {background: none; outline: none; cursor: pointer; position: relative; border: none; box-sizing: border-box; padding: 0; white-space: nowrap; font-family: var(--font1); transition: .25s ease-in-out;}



:root                                           {

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

                                                --font2:            "Panchang", sans-serif; /* 500, 600 */



                                                --black-50:         rgba(0,0,0,0.4);

                                                --black-80:         rgba(0,0,0,0.8);

                                                --dark-gray-80:     rgba(40,40,40,0.8);

                                                --white-15:         rgba(255,255,255,0.15);

                                                --white-30:         rgba(255,255,255,0.3);

                                                --white-45:         rgba(255,255,255,0.45);

                                                --white-60:         rgba(255,255,255,0.6);

                                                --white-80:         rgba(255,255,255,0.8);



                                                --color0:           #E8E4E0;

                                                --color0b:          white; 

                                                --color1:           #A97142;

                                                --color1b:          #c28350;

                                                --color-error:      #d54420;



                                                --font1-line:       1.65;

                                                --font2-line:       1.35;

                                                --font2-spacing:    0.15em;  

                                                --blur:             6px;    

                                                --gap1:             0.75em;

                                                --border-radius1:   0.6rem;

                                                --box-shadow1:      0 0.2em 1em var(--black-80);

                                                --text-shadow:      0 0.03em 0.5em var(--black-80);

                                                --header:           8rem;

                                                --header-lower:     6rem;

                                                --border-white-15:  solid 0.08rem var(--white-15);

                                                --border-white-30:  solid 0.08rem var(--white-30);

                                                --border-radius0:   0.25rem;



                                                --gradient1:          linear-gradient(to top, , );

                                                --wrapper-max:        62rem;

                                                --wrapper-wide-max:   72rem;

                                                --wrapper-narrow-max: 50rem;

                                                --wrapper-thin-max:   40rem;

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

                                                --gap2:               1.5rem;

                                                --form-item-height:   3.2rem;

                                                }









html                                            {background: black; text-align: center; font-size: min(18px, calc(12px + 1vw)); color: var(--color0); font-weight: 300; line-height: var(--font1-line); text-shadow: var(--text-shadow); font-family: var(--font1);}

html, body, form                                {width: 100%;}

body                                            {display: block; overflow-x: hidden; position: relative;}

form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}



body.fixed                                      {overflow-y: hidden;}

body.fixed:after                                {display: block; width: 100%; height: 100%; background: black; opacity: 0.2; position: absolute; left: 0; top: 0; z-index: 998; content: "";}



.wrapper                                        {display: flex; width: 90%; max-width: var(--wrapper-max); flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap2); margin: 0 auto; box-sizing: border-box; position: relative; z-index: 5;}

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

  .wrapper.wide                                 {width: 94%; max-width: var(--wrapper-wide-max);}

  .wrapper.narrow                               {max-width: var(--wrapper-narrow-max);}

  .wrapper.thin                                 {max-width: var(--wrapper-thin-max);}

  }



.header                                         {display: flex; width: 100%; height: var(--header); box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 9999; transition: .25s ease-in-out;}

.header .wrapper                                {height: 100%; flex-direction: row; justify-content: space-between; align-items: center;}

.header .logo                                   {display: flex; height: 100%; justify-content: center; align-items: center; position: absolute; top: 0; z-index: 2;}

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

.header .collapse                               {display: block; width: 100%;}

.header .collapse .inner                        {display: flex; width: 100%; box-sizing: border-box;}

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

.header nav ul                                  {display: flex; align-content: center; flex-wrap: wrap;}

.header nav ul li                               {display: block;}

.header nav ul li a                             {display: flex; align-items: center; color: white; font-weight: 500; line-height: 1.25; letter-spacing: var(--spacing1); text-transform: uppercase; padding-top: 0.05em; box-sizing: border-box; position: relative; transition: .25s ease-in-out;}

.header .header-elements                        {display: flex; align-items: center; flex-wrap: wrap; gap: 1.5em 0.4em;}

.header .header-elements .phone                 {display: flex; align-items: center; gap: 0.4em; color: white; font-weight: 400; transition: .25s ease-in-out;}

.header .header-elements .phone img             {display: block; height: 0.95em; position: relative; top: 0.03em;}

.header .header-elements .phone:hover           {opacity: 0.85;}

.header.scroll                                  {height: var(--header-lower); background: var(--black-50); backdrop-filter: blur(10px);}

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

  .header .wrapper                              {container-type: inline-size; --header-item: 3.2cqw;}

  .header .logo                                 {width: 8em; left: calc(50% - 4em);}

  .header .collapse                             {width: 100%;}

  .header .collapse .inner                      {justify-content: space-between; align-items: center;}

  .header nav                                   {flex-grow: 2;}

  .header nav ul                                {gap: 1em;}

  .header nav ul li:nth-child(4)                {margin-right: 15.6cqw;}

  .header nav ul li a                           {font-size: 0.9em; padding: 0.5em 1.7em 0.46em; border-top: var(--border-white-30); border-bottom: var(--border-white-30);}

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

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

  .header .header-elements .button              {font-size: 0.65em; margin-inline: 0.8em;}

  .header .header-elements .icon                {font-size: 1.1em;}

  .header :is(.home, #navicon)                  {display: none;}                 

  }

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

  body                                          {--header: var(--header-lower);}

  .header .home                                 {display: block; width: 1.3em; height: 1.3em;}

  .header .home svg                             {display: block; width: 100%; height: 100%; fill: white; transition: .25s ease-in-out;}

  .header .home:hover svg                       {fill: white;}

  .header .logo                                 {width: 7em; left: calc(50% - 3.5em);}

  .header .collapse                             {width: 16rem; height: 100svh; background: var(--dark-gray-80); backdrop-filter: blur(8px); overflow-y: auto; position: fixed; right: -19rem; top: 0; z-index: 5; box-sizing: border-box; opacity: 0; transition: .5s ease-in-out;}                                              

  .header .collapse .inner                      {min-height: 100%; flex-direction: column; align-content: flex-start; gap: 2em; padding: var(--header) 2rem 2rem;}

  .header nav ul                                {width: 100%; flex-direction: column;}

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

  .header nav ul li a                           {width: 100%; text-align: left; font-size: 1.15em; padding: 0.9em 0;}              

  .header nav ul li a[aria-current="page"]      {padding-left: 1.4em;}

  .header nav ul li a[aria-current="page"]:after{display: block; width: 0.9em; height: 0.1em; background: white; position: absolute; left: 0; top: 1.2em; content: "";}

  .header .header-elements                      {align-content: flex-end; flex-grow: 2; font-size: 0.85em;}

  .header .header-elements .phone               {flex-grow: 2; font-size: 1.15em;}

  .header .header-elements .button              {width: 100%; order: 2;}

  .header .header-elements .icon                {font-size: 1.2em; position: relative; top: -0.08em;}

  .header .navicon                              {display: block; width: 1.5em; height: 1em; cursor: pointer; position: relative; z-index: 10;}

  .header .navicon span                         {display: block; width: 100%; height: 0.12em; background: white; border-radius: 2px; position: absolute; left: 0; transition: .25s ease-in-out;}

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

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

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

  .header .navicon span:nth-child(4)            {bottom: 0;}

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

  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}

  .header.show:before                           {opacity: 0.85 !important;}

  .header.show #navicon:after                   {color: white;}

  .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                        {right: 0; opacity: 1;}

  }



.message                                        {display: block; width: 100%; font-size: 0.85em; position: absolute; left: 0; top: var(--header); z-index: 100;}

.message .wrapper > div                         {display: block; width: 100%; background: var(--white-15); border: var(--border-white-15); padding: 0.5em 3em; box-shadow: var(--box-shadow1); border-radius: 0.45em; backdrop-filter: blur(5px); box-sizing: border-box; position: relative;}

.message .wrapper > div:before                  {display: block; width: 0.85em; height: 100%; background: url("images/icons/info-white.svg") no-repeat center center; background-size: contain; position: absolute; left: 1.3em; top: 0; z-index: 1; content: "";}

.message .wrapper > div p                       {text-align: left; font-size: 0.9em; font-weight: 500; margin: 0;}

.message .close                                 {display: block; width: 0.8em; height: 1em; position: absolute; right: 0.8em; top: calc(50% - 0.5em); z-index: 1;cursor: pointer; transition: .2s ease-in-out;}

.message .close span                            {display: block; width: 100%; height: 0.12em; background: white; position: absolute; left: 0; top: calc(50% - 0.06em);}

.message .close:hover                           {opacity: 0.7;}

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

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



.footer                                         {display: block; width: 100%; position: relative; z-index: 10; padding-block: var(--section-padding) 0;}

.footer-contacts                                {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--gap1) var(--gap2); padding: 0.75em 1.3em; box-sizing: border-box; background: var(--white-15); border: var(--border-white-15); border-radius: var(--border-radius0); position: relative; z-index: 2;}

.footer-contacts a                              {display: flex; align-items: center; gap: 0.5em; font-size: 1.1em; color: inherit; font-weight: 700; transition: .25s ease-in-out;}

.footer-contacts a img                          {display: block; height: 1.1em;}

.footer-contacts a:hover                        {color: var(--color1b);}

.footer .img                                    {display: block; width: 100%; max-width: 40rem; margin-block: -8%;}

.footer .img span                               {display: block; width: auto; height: 100%;

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

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

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

                                                }

.footer .img span img                           {display: block; width: 100%;}

.footer .address                                {font-size: 0.75em; color: white; opacity: 0.8; position: relative; z-index: 2; transition: .25s ease-in-out;}

.footer .address:hover                          {opacity: 1;}

.footer .soc                                    {display: flex; width: 100%; justify-content: center; gap: 0.4em;}

.footer .soc .icon                              {font-size: 1.3em;}

.footer .hours                                  {display: flex; width: 100%; flex-direction: column; align-items: center;}

.footer .hours h2                               {font-size: min(1.25em, calc(0.35em + 3vw));}

.footer .hours ul                               {display: flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2em 0; font-size: 0.9em;}

.footer .hours ul li                            {display: flex; align-items: center; text-align: center;}

.footer .bottom                                 {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.2em 1.2em; font-size: 0.75em; background: var(--dark-gray-80); padding: 1.1em 1em 1.2em; box-sizing: border-box; margin-top: 3em; position: relative; z-index: 5;}

.footer .bottom li                              {display: block; color: var(--white-60);}

.footer .bottom li a                            {color: inherit; text-decoration: underline; transition: .25s ease-in-out;}

.footer .bottom li a:hover                      {color: var(--white-80); text-decoration-color: transparent;}

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

  .footer .hours ul                             {flex-direction: row;}

  .footer .hours ul li:not(:first-child):before  {display: block; width: 0.08em; height: 1em; background: var(--color1b); margin: 0 0.7em; content: "";}

  }

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

  .footer .address                              {flex-direction: column; max-width: 16em; text-align: center;}

  .footer .address img                          {height: 1.3em;}

  }



.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 2; position: relative; z-index: 5;}



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

.section.padding-top-0                          {padding-top: 0;}

.section.padding-bottom                         {padding-bottom: var(--section-padding);}



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



strong                                          {font-weight: 700;}

em                                              {font-style: italic;}



.button                                         {display: flex; justify-content: center; align-items: center; gap: 0.4em; font-size: 0.8em; font-weight: 600; color: white; letter-spacing: var(--font2-spacing); text-transform: uppercase; padding: 0.6em 1.6em 0.55em; border-radius: var(--border-radius0); border: none; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; font-family: var(--font2); transition: .25s ease-in-out;}

.button img                                     {display: block; height: 0.95em; position: relative; top: -0.06em;}

.button.color1                                  {background: var(--color1);}

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

.button.border                                  {border: solid 0.12em var(--color0);}

.button.border:hover                            {background: var(--white-15); border-color: var(--color0b);}



.link                                           {display: block; font-weight: 500; text-decoration: underline; transition: .15s ease-in-out;}

.link:hover                                     {text-decoration-color: transparent; filter: brightness(0.9)Ĺ‚}

.link.color1                                    {color: var(--color1);}



.icon                                           {display: flex; width: 1.5em; aspect-ratio: 1; justify-content: center; align-items: center; box-shadow: var(--box-shadow1); border-radius: var(--border-radius0); box-sizing: border-box; transition: .25s ease-in-out;}

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

.icon.glass                                     {background: var(--white-15); border: var(--border-white-15);}

.icon.glass[href]:hover                         {background: var(--white-30);}



.box1                                           {display: flex; flex-direction: column; align-items: center; gap: var(--gap1); background: var(--white-15); backdrop-filter: blur(var(--blur)); padding: 1.4em 1.8em; border-radius: var(--border-radius1); border: var(--border1); box-shadow: var(--box-shadow1); box-sizing: border-box;}



h1, h2, h3, .subheadline                        {display: block; text-align: center; color: white; font-weight: 600; letter-spacing: var(--font2-spacing); line-height: var(--font2-line); box-sizing: border-box; font-family: var(--font2); position: relative; top: 0.05em;}

h2                                              {font-size: min(2em, calc(0.9em + 3vw)); margin-bottom: 0.8em;}

h3                                              {font-size: min(1.4em, calc(0.5em + 3vw));}

.subheadline                                    {font-size: min(0.75em, calc(0.2em + 2vw)); font-weight: 500;}



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

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

.main :is(p a, li a):hover                      {color: var(--color1); text-decoration-color: transparent;}

.main :is(ul, ol)                               {display: block; margin-top: -0.4em;}

.main li                                        {width: 100%; text-align: left; padding-left: 1.6em; box-sizing: border-box; position: relative; margin-top: 0.4em;}

.main li:before                                 {display: block; position: absolute; content: "";}

.main ul li:before                              {width: 0.35em; height: 0.35em; background: var(--color1); left: 0; top: 0.43em; border-radius: 100%;}



.pattern-gradient-top:before, 

.pattern-gradient-bottom:before                 {display: block; width: 100%; height: clamp(10rem, 25vh, 16rem); opacity: 0.15; background: url("images/pattern-seamless-white.svg") repeat center bottom; background-size: auto 50%; position: absolute; left: 0; z-index: 2; content: "";

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

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

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

                                                }

.pattern-gradient-top:before                    {transform: rotate(180deg); top: 0;}

.pattern-gradient-bottom:before                 {bottom: 0;}



.mask-sides                                     {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;

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

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

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

                                                }



.address                                        {display: flex !important; align-items: center; gap: 0.4em; text-align: left; font-size: 0.8em; font-weight: 400;}

.address img                                    {display: block; height: 0.9em; flex-shrink: 0;}



.hero                                           {padding-top: calc(var(--section-padding) + var(--header) + 7em);}

.hero .video                                    {display: flex; width: 100%; height: 100%; justify-content: center; position: absolute; inset: 0; overflow: hidden; opacity: 0.8;}

.hero .video > div                              {display: block; width: auto; height: 100%; aspect-ratio: 16/9;

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

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

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

                                                }

.hero .wrapper                                  {height: 100%;}

.hero *                                         {text-shadow: var(--text-shadow1);}

.hero h1                                        {font-size: min(0.9em, calc(3vw - 0.1em)); font-weight: 500; text-transform: uppercase;}

.hero .subheadline                              {font-size: min(2em, calc(3vw + 0.6em)); font-weight: 600; margin-top: calc(-0.5 * var(--gap2));}

.hero .buttons                                  {display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em 0.4em;}

.hero .button                                   {font-size: 0.7em;}

          

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

.features > div                                 {display: flex; width: 100%; min-height: 18em; align-items: flex-end; aspect-ratio: 16/9; border-radius: var(--border-radius1); overflow: hidden; position: relative; container-type: inline-size; box-shadow: 0 -0.8em 0.8em var(--black-80);}

.features > div:before,

.features > div:after                           {display: block; position: absolute; content: "";

                                                 -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: cover; mask-size: cover;

                                                 mask-image: linear-gradient(to top, transparent, black 10em);                                           

                                                 -webkit-mask-image: linear-gradient(to top,  transparent, black 10em);

                                                }



.features > div:after                           {inset: 4cqw 4cqw 0; border-radius: calc(0.7 * var(--border-radius1)); border: solid 0.1em var(--color1);}

.features > div:before                          {inset: 0; background-repeat: no-repeat; background-position: center center; background-size: cover;}

.features > div:nth-child(1):before             {background-image: url("images/features/img1-mobile.webp");}

.features > div:nth-child(2):before             {background-image: url("images/features/img2-mobile.webp");}

.features > div:nth-child(3):before             {background-image: url("images/features/img3-mobile.webp");}

.features > div p                               {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 1em; text-align: center; font-size: clamp(0.8em, 7cqw, 1.1em); font-weight: 500; position: relative; z-index: 5; margin-bottom: 1em; font-family: var(--font2); letter-spacing: var(--font2-spacing); line-height: var(--font2-line);}

.features > div p img                           {display: block; width: 1.4em;}

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

  .features > div                               {width: 32.6%; aspect-ratio: 3/4;}

  .features > div:not(:nth-child(2))            {top: -2em;}

  .features > div:nth-child(1):before           {background-image: url("images/features/img1.webp");}

  .features > div:nth-child(2):before           {background-image: url("images/features/img2.webp");}

  .features > div:nth-child(3):before           {background-image: url("images/features/img3.webp");}

  }



.about                                          {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);}

.about .logo                                    {display: flex; flex-direction: column; align-items: center; gap: 1em; font-size: 0.8em; color: var(--color1b); font-weight: 500;}

.about .logo img                                {display: block; width: 8em;}



.infographics                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap2) 0; margin-top: var(--gap2); position: relative; z-index: 2;}

.infographics div                               {display: flex; width: 14em; flex-direction: column; align-items: center; gap: var(--gap1); text-align: center; font-size: 0.85em; font-weight: 500; font-family: var(--font2); line-height: var(--font2-line); letter-spacing: var(--font2-spacing);}

.infographics div .icon                         {width: 8em; background: black; position: relative; border-radius: 100%;}

.infographics div .icon:before                  {display: block; position: absolute; inset: 0.6em; border-radius: 100%; border: solid 0.1em var(--color1b); content: "";}

.infographics div .icon img                     {width: 40%;}



.infographics                                   {margin-bottom: -5em;}

.section:has(.img-pricelist) .wrapper           {margin-top: 5em;}



.img-pricelist                                  {display: flex; width: 100%; height: 26em; justify-content: center; position: absolute; inset: 0; overflow: hidden; opacity: 0.8;}

.img-pricelist > div                            {display: block; width: 100%; max-width: 60rem; height: 100%; aspect-ratio: 1; background: url("images/pricelist.webp") no-repeat center top; background-size: cover;

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

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

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

                                                }



.pricelist                                      {display: block; width: 100%; font-family: var(--font2); line-height: var(--font2-line); letter-spacing: var(--font2-spacing);}

.pricelist table                                {width: 100%; border-collapse: collapse;}

.pricelist table td                             {text-align: left; font-size: 0.85em; vertical-align: top; padding-top: 1.5em;}

.pricelist table td:last-child                  {text-align: right; white-space: nowrap; padding-left: 1.2em;}

.pricelist table tr:first-child td              {padding-top: 0;}

.pricelist table tr:not(:last-child) td         {padding-bottom: 1.5em; border-bottom: solid 1px var(--white-30);}

.pricelist table td span                        {display: block; font-size: 0.9em; font-family: var(--font1); letter-spacing: 0; line-height: 1.4; margin-top: 0.5em; opacity: 0.8;}

.pricelist .free                                {display: flex; justify-content: center; align-items: center; gap: 0.65em; font-size: 1.1em; margin-top: 2em;}

.pricelist .free img                            {display: block; width: 2.8em;}

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

  .pricelist table td                           {font-size: 0.7em;}

  .pricelist table td span                      {font-size: 1em;}

  }



.cta                                            {width: 100%; gap: var(--gap2) 10%; margin-top: calc(0.7 * var(--section-padding)); padding: 0.8em 6%;}

.cta .text                                      {display: block;}

.cta .text h2                                   {font-size: 1em; margin-bottom: 0.3rem;}

.cta .text p                                    {font-size: 0.85em;}

.cta .img                                       {display: block; width: 10em;}

.cta .img img                                   {display: block; width: 100%;}

.cta .logo                                      {display: block; width: min(30%, 10em);}

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

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

  .cta                                          {flex-direction: row;}

  .cta .text *                                  {text-align: left;}

  .cta .img                                     {transform: scale(1.5) translateY(-0.3em);}

  }

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

  .cta                                          {padding-bottom: 2em;}

  .cta .img                                     {order: -1; margin-top: -2.5em;}

  }



.swiper-slide                                   {display: flex; height: auto; flex-shrink: 0; box-sizing: border-box; transition: .35s ease-in-out;}



.swiper-button                                  {display: flex; justify-content: center; align-items: center; background: var(--color1); position: absolute; z-index: 5; margin: 0; box-sizing: border-box; cursor: pointer;  transition: .35s ease-in-out;} 

.swiper-button-prev                             {right: auto; transform: rotate(-180deg);}

.swiper-button-next                             {left: auto;}                                 

.swiper-button img                              {display: block; height: 33%;}

.swiper-button:after                            {display: none;}

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

.swiper-button-lock                             {opacity: 0 !important;}

.swiper-buttons-edges .swiper-button            {width: 1.6em; height: 3.2em; padding-left: 0.2em; border-radius: 3.2em 0 0 3.2em; top: calc(50% - 1.6em);}

.swiper-buttons-edges .swiper-button-prev       {left: 0 !important;}

.swiper-buttons-edges .swiper-button-next       {right: 0 !important;}

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

  .swiper-button                                {width: 2.6em; height: 2.6em; top: calc(50% - 1.3em); border-radius: 100%;}

  }

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

  .swiper-button                                {width: 3.2em; height: 3.2em; padding-right: 1.25em; border-radius: 3.2em; top: calc(50% - 1.6em);}

  .swiper-button-prev                           {left: calc(-50vw + 50% - 1.1em)}

  .swiper-button-next                           {right: calc(-50vw + 50% - 1.1em);}

  }

  @media screen and (max-width: 1640px) and (pointer: coarse){

  .swiper-button-prev                           {left: calc(-50vw + 50% - 1.65em)}

  .swiper-button-next                           {right: calc(-50vw + 50% - 1.65em);}

  }



.section:has(.carousel)                         {overflow: hidden;}



.carousel                                       {display: block; width: 100%; position: relative; box-sizing: border-box;}

.carousel-inner                                 {display: block; width: 100%; box-sizing: border-box; overflow: hidden;

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

                                                 mask-image: linear-gradient(to right, transparent, black var(--carousel-edge), black calc(100% - var(--carousel-edge)), transparent);                                           

                                                 -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);

                                                }

.carousel .swiper                               {display: block; width: 100%; box-sizing: border-box; overflow: visible;}

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

  .carousel-inner                               {width: 80rem; margin-inline: calc(50% - 40rem); }

  .carousel .swiper                             {overflow: visible;}

  .about-slider .swiper-button-prev,

  .carousel .swiper-button-prev                 {left: -6rem;}

  .about-slider .swiper-button-next,

  .carousel .swiper-button-next                 {right: -6rem;}

  }

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

  .carousel-inner                               {width: 100vw; margin-inline: calc(50% - 50vw);}

  }



.carousel-gallery .swiper-slide                 {padding: 0.4em;}

.carousel-gallery .img                          {display: block; width: 100%; padding-top: 133%; position: relative; box-sizing: border-box;}

.carousel-gallery .img a                        {display: block; position: absolute; inset: 0; border-radius: var(--border-radius1); overflow: hidden;}

.carousel-gallery .img a img                    {display: block; width: 100%; height: 100%; object-fit: cover;}

.carousel-gallery .swiper-button                {margin-top: calc(-1 * var(--preview-padding));}



.contact-form                                   {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; border-radius: var(--border-radius1); box-shadow: 0 0 1.5em rgba(0,0,0,0.2);}

.contact-form .form-items                       {display: flex; width: 100%; flex-wrap: wrap; gap: 0.9em;}

.contact-form .form-item                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em;}

.contact-form .form-item :is(input, textarea)   {display: block; width: 100%; color: white; font-size: 0.9em; font-weight: 700; background: none; padding-inline: 1.1em; border: solid 0.1em var(--white-30); outline: none; border-radius: var(--border-radius0); font-family: var(--font1); box-sizing: border-box; transition: .25s ease-in-out;}

.contact-form .form-item input                  {height: 3.6em; padding-bottom: 0.05em;}

.contact-form .form-item textarea               {height: 10rem; padding-block: 1em;}

.contact-form :is(input, textarea)::placeholder {color: var(--white-45); font-weight: 400;}

.contact-form .form-item :is(input, textarea):focus        

                                                {border-color: var(--color1);}

.contact-form .form-item .error                 {display: none; font-size: 0.7em; color: var(--color-error); font-weight: 600; margin-top: 0.4em;}

.contact-form .send                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.2em 0; margin-top: var(--gap2);}

.contact-form .send span                        {display: block; width: 100%; text-align: center; font-size: 0.8em; line-height: 1.3; opacity: 0.6;} 

.contact-form .send span a                      {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}

.contact-form .send span a:hover                {opacity: 0.9; text-decoration-color: transparent;}

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

  .contact-form .form-items > div:not(:nth-child(4))  

                                                {width: calc(33.33% - 0.6em);}

  }



.cross-links                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: var(--gap1) 0.6em;}

.cross-links h2                                 {width: 100%; font-size: min(1.45em, calc(0.9em + 3vw)); margin-bottom: -0.1rem;}

.cross-links p                                  {width: 100%; margin-bottom: var(--gap2);}

.cross-links > a                                {display: flex; width: 100%; min-height: 10em; justify-content: center; align-items: center; border-radius: var(--border-radius1); position: relative; overflow: hidden; isolation: isolate;}

.cross-links > a:before                         {display: block; opacity: 0.5; position: absolute; inset: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; content: ""; z-index: -1; transition: .3s ease-in-out;}

.cross-links > a:nth-of-type(1):before          {background-image: url("images/cross-links/amos.webp");}

.cross-links > a:nth-of-type(2):before          {background-image: url("images/cross-links/komenskeho.webp");}

.cross-links > a:nth-of-type(3):before          {background-image: url("images/cross-links/yosi.webp");}

.cross-links > a img                            {display: block; height: 8em;}

.cross-links > a:hover:before                   {opacity: 0.8;}

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

  .cross-links > a                              {width: calc(33.33% - 0.4em); aspect-ratio: 4/3;}

  }



.anim                                           {transition-delay: 2s; opacity: 0; transition: .6s ease-in-out;}

.anim.play                                      {opacity: 1;}



.anim.from-bottom                               {transform: translateY(4em);}

.anim.from-bottom.play                          {transform: translateY(0);}

.anim.zoom                                      {transform: scale(0.9,0.9);}

.anim.zoom.play                                 {transform: scale(1,1);}



.section:first-child .content                   {margin-top: calc(0.7 * var(--section-padding));}

.content                                        {display: flex; width: 100%; flex-direction: column; align-items: center; gap: var(--gap2);}

.content .icon:has(+ h1)                        {font-size: 2.6em; border-width: 0.02em;}

.content h1                                     {font-size: min(1.8em, calc(3vw + 0.6em)); font-weight: 600;}

.content h1 + p                                 {margin-top: calc(-0.4 * var(--gap2));}

.content .button                                {font-size: 0.65em;}






