.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%;}
.embedBlok--audio { max-width: 660px; margin: 15px auto; }
.embedBlok--audio iframe { display: block; }

.in_website_hp { position: absolute; left: -9999px; opacity: 0; height: 0px; width: 0px; z-index: -1; }

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

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

.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }


@font-face {
    font-family: 'Fashion Fetish';
    src: url('font/FashionFetishHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fashion Fetish';
    src: url('font/FashionFetish.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root                                           {
                                                --font1:        'roboto-condensed', sans-serif; /* 300, 700 */
                                                --font2:        'Fashion Fetish', sans-serif; /* 400, 900 */

                                                --color0:       #383737;
                                                --color0b:      #595757;
                                                --color0c:      #1e1e1e;
                                                --color1a:      hsl(0,0%,92%); /* ; */ 
                                                --color1b:      hsl(0,0%,80%); /* ; */ 
                                                --color1c:      hsl(0,0%,70%); /* ; */ 
                                                --color1d:      hsl(0,0%,60%); /* ; */
                                                --color1e:      rgba(255,255,255,0.92); /* ; */ 

                                                --wrapper-gap: 1.5rem;     
                                                --wrapper-padding: 5vw;
                                                --wrapper-width: 62rem;
                                                --header-height:  6rem;
                                                --form-item-height: 2.4rem;
                                                --box-shadow1:   0.07em 0.11em 0.25em rgba(0,0,0,0.2);
                                                --gallery-gap: 1.2rem;
                                                --img-text-min-height: 16vw;

                                                --border-radius1: 0.8rem;
                                                --section-padding: min(5rem, calc(1.2rem + 5vw));                                           
                                                }

html                                            {display: block; width: 100%; height: 100%; background: #f2f2f2; font-size: min(16px, calc(11px + 1vw)); color: var(--color0); line-height: 1.3; font-family: var(--font1);}

body                                            {display: block; width: 100%; height: 100%; margin-inline: auto; position: relative; overflow-x: hidden; overflow-y: auto;}

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

form                                            {display: flex; width: 100%; min-height: 100%; flex-direction: column; justify-content: space-between; overflow-x: hidden;}

.wrapper                                        {display: flex; width: min(var(--max-width), calc(100vw - 2 * var(--wrapper-padding))); --max-width: var(--wrapper-width); flex-wrap: wrap; gap: var(--wrapper-gap); margin-inline: auto; position: relative; box-sizing: border-box; z-index: 1;}
.wrapper.wide                                   {--max-width: 72rem;}

strong                                          {font-weight: 700;}
em                                              {font-style: italic;}
a                                               {transition: .15s ease-in-out;}

ol, ul                                          {box-sizing: border-box; padding: 0; margin: 0;}

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: .15s ease-in-out;}

.header                                         {display: flex; width: 100%; height: var(--header-height); align-items: center; box-sizing: border-box; position: fixed; z-index: 1000; isolation: isolate; transition: .15s ease-in-out;}
.header:before                                  {display: block; opacity: 0; background-image: linear-gradient(to bottom, white, transparent); position: absolute; inset: 0; content: ""; transition: .4s ease-in-out;}
.header > .wrapper                              {justify-content: space-between; align-items: center;}
.header .logo                                   {display: block; width: 8rem; position: relative; z-index: 4;}
.header .logo img                               {display: block; width: 100%;} 
.header .collapse                               {display: block; width: 100vw; max-height: 100dvh; background: white; opacity: 0; overflow: auto; position: fixed; right: -1000vw; top: -1000vw; z-index: 5; transition: opacity .4s ease-in-out;}
.header .collapse .overflow                     {display: flex; width: 100%;  padding-block: var(--header-height) 2rem; box-sizing: border-box;}
.header .collapse .overflow:after               {display: block; width: 100%; height: calc(2rem + var(--header-height)); background-image: linear-gradient(to bottom, white, transparent); position: fixed; left: 0; top: 0; z-index: 2; content: ""; transition: .4s ease-in-out;}
.header .collapse .wrapper                      {/* align-content: flex-start; align-items: flex-start; */ padding-right: 2rem;}
.header .menu                                   {display: flex; width: 100%;}
.header .contact                                {display: block; flex: 1;}
.header .textme .title                          {margin-top: -0.3em;}
.header .booking                                {display: flex; width: 100%; flex-wrap: wrap; gap: 1.2rem;}
.header .booking .row                           {display: flex; width: 100%; justify-content: space-between; gap: 1.2rem;}
.header .booking .row > div                     {display: flex; width: 48%; flex-wrap: wrap;}
.header .booking .calendar                      {display: block; width: 100%; padding: 1em; box-sizing: border-box; border: solid 1px var(--color1a);}
.header .selected-photos                        {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2em; padding: 1em; box-sizing: border-box;}
.header .selected-photos > div                  {display: flex; align-items: center;}
.header .selected-photos > div > span           {display: block; width: 4.5em; aspect-ratio: calc(3 / 2); border-radius: 0.2em; overflow: hidden; transform: rotate(-5deg); margin: -1em; box-shadow: var(--box-shadow1); position: relative;}
.header .selected-photos > div > span img       {display: block; width: 100%; height: 100%; object-fit: cover;}
.header .selected-photos > div > span.more span {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 1.15em; color: white; font-weight: 400; background: rgba(0,0,0,0.7); opacity: 0.8; position: absolute; inset: 0; z-index: 2;}
.header .selected-photos > span                 {display: block; font-size: 1em; color: var(--color1b); font-family: var(--font2);}
.header #navicon                                {display: flex; height: 20px; align-items: center; gap: 0.4em; cursor: pointer; position: relative; z-index: 10;}
.header #navicon > span                         {display: block; font-size: 20px; color: var(--color0); font-weight: 400; line-height: 1; font-family: var(--font2);}
.header #navicon .icon                          {display: flex; width: 1.4rem; height: 15px; position: relative;}
.header #navicon .icon span                     {display: block; height: 2px; background: var(--color0); position: absolute; left: 0; transition: .2s ease-in-out;}
.header #navicon .icon span:nth-child(1)        {width: 100%; top: 0;}
.header #navicon .icon span:nth-child(2),
.header #navicon .icon span:nth-child(3)        {width: 80%; top: calc(50% - 1px);}
.header #navicon .icon span:nth-child(4)        {width: 50%; bottom: 0;}
.header #navicon div                            {display: none; width: 5rem; height: 100%; position: absolute; right: 0; top: 0; z-index: 2;}
.header.show #navicon:before                    {opacity: 0;}
.header.show #navicon span:nth-child(2)         {transform: rotate(50deg);}
.header.show #navicon span:nth-child(3)         {transform: rotate(-50deg);}
.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; top: 0; opacity: 1;}
.header.show.hide .collapse                     {opacity: 0;}
.header.scroll                                  {padding-bottom: 1.5em;}
.header.scroll:before                           {opacity: 1;}
.header.scroll .logo                            {z-index: 6;}
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .header .menu                                 {font-size: 0.9rem;}
  .header .primary-nav                          {flex-direction: column; flex-wrap: wrap;}
  .header .booking .row                         {flex-wrap: wrap;}
  .header .booking .row > div                   {width: 100%;}
  }
  @media screen and (min-width: 769px)          {
  .header .primary-nav                          {padding-right: 3em; border-right: solid 2px var(--color1b);}
  .header .contact                              {padding-left: 3em;}
  }
  @media screen and (max-width: 768px)          {
  .header .collapse .wrapper                    {max-width: 30rem;}
  .header .menu                                 {flex-wrap: wrap; gap: 2rem;}
  .header :is(.primary-nav, .contact)           {width: 100%;}
  .header .primary-nav                          {padding-left: 2rem;}
  .header .booking .row                         {flex-wrap: wrap; gap: 1em;}
  .header .booking .row > div                   {width: 100%;}
  }
  @media screen and (max-width: 440px)          {
  .header .primary-nav                          {gap: 2rem; padding-left: 1.5rem;}
  }

/* Logo homepage hero positioning */
.hp                                             {          
                                                --hero-margin-top:   5rem;
                                                --hero-top-padding:  10rem;
                                                }
  @media screen and (min-width: 1081px)         {  
  .hp                                           {
                                                --hero-logo-width:   24rem;
                                                --hero-text-width:   50%;
                                                }
  }
  @media screen and (max-width: 1080px)         {  
  .hp                                           {
                                                --hero-logo-width:   12rem;
                                                --hero-text-width:   60%;
                                                }
  }

.hp .header .logo                               {position: relative; left: calc(var(--hero-text-width) - var(--hero-logo-width)); transition: .3s ease-in-out;}
.hp .header .logo:after                         {display: block; width: 100%; padding-top: 9.1%; background: url('images/logo-claim.png') no-repeat right center; background-size: contain; position: absolute; right: 0; bottom: -40%; content: ""; transition: .3s ease-in-out;}
.hp .header:not(.scroll) .logo                  {width: var(--hero-logo-width);}
.hp .header.scroll .logo                        {top: 0; left: 0;}
.hp .header.scroll .logo:after                  {opacity: 0;}
  @media screen and (min-width: 1081px)         {  
  .hp .header .logo                             {top: calc(var(--hero-margin-top) + var(--section-padding));}
  }
  @media screen and (max-width: 1080px)         {  
  .hp .header .logo                             {top: calc(var(--hero-margin-top));}
  }

.footer                                         {display: block; width: 100%; padding-block: 2.5rem;}
.footer .wrapper                                {justify-content: space-between;}
.footer .logo                                   {display: block; width: 8rem; margin-bottom: 1.4rem;}
.footer .logo img                               {display: block; width: 100%;}
.footer .primary-nav p                          {font-size: 0.9em; line-height: 1.4; font-family: var(--font1);}
.footer .textme                                 {margin-top: 1.4rem;}
.footer .textme .title                          {cursor: pointer; transition: .15s ease-in-out;}
.footer .textme .title:hover                    {opacity: 0.8;}
  @media screen and (min-width: 1281px)         {
  .footer .textme                               {padding-right: 5rem;}
  }
  @media screen and (max-width: 1280px)         {
  .footer .textme                               {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; order: -1;}
  .footer .textme > *                           {max-width: 100%;}
  .footer .textme .title                        {left: -2rem;}
  .footer .textme .text                         {width: 100%; text-align: center; padding-inline: 15vw;}
  }
  @media screen and (min-width: 769px) and (max-width: 1280px){
  .footer .wrapper > div                        {display: flex; width: 100%; flex-wrap: wrap;}
  .footer .primary-nav                          {width: 100%; justify-content: space-between;}
  }
  @media screen and (max-width: 768px)          {
  .footer                                       {--wrapper-padding: 10vw;}                             
  .footer .primary-nav                          {justify-content: space-between; flex-wrap: wrap;}
  .footer .primary-nav > div:nth-child(-n+2)    {width: ;}
  .footer .primary-nav > div:nth-child(3)       {width: 100%;}
  .footer .textme .text                         {padding-inline: 5vw;}
  }

.primary-nav                                    {display: flex; gap: 2rem 2.5rem; font-family: var(--font2); box-sizing: border-box;}
.primary-nav > div                              {display: block;}
.primary-nav > div > span                       {display: block; color: var(--color1c); line-height: 1.8; margin-bottom: 0.2rem;}
.primary-nav ul li                              {margin-top: 0.2rem;}
.primary-nav ul li a                            {display: inline-block; font-size: 0.9em; color: var(--color0); line-height: 1.8; white-space: nowrap;}
.primary-nav ul li a:hover                      {opacity: 0.4;}

.textme                                         {display: block; margin-bottom: 1rem;}
.textme > *                                     {display: block; max-width: 21rem; text-align: right; box-sizing: border-box; position: relative;}
.textme .title                                  {font-size: 4.5em; font-weight: 900; font-family: var(--font2); margin-bottom: -0.1em;}
.textme .title a                                {display: block; width: 0.6em; height: 0.6em; position: absolute; right: -0.75em; top: calc(50% - 0.22em);}
.textme .title a svg                            {display: block; width: 100%; height: 100%; fill: var(--color0);}
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .textme .title                                {font-size: 4em;}
  }
  @media screen and (max-width: 768px)          {
  .textme .text                                 {max-width: 100%;}
  }
  @media screen and (max-width: 440px)          {
  .textme .title                                {display: inline-block; max-width: auto; text-align: left; font-size: 4em;}
  }

.soc                                            {display: flex !important; align-items: center; gap: 1em;}
.soc a                                          {display: block; width: 1.8em !important; height: 1.8em !important; border-radius: 0.3em; border: solid 2px var(--color0); box-sizing: border-box;}
.soc a svg                                      {display: block; width: 100%; height: 100%; fill: var(--color0); transition: .15s ease-in-out;}
.soc a:hover                                    {border-color: var(--color1c);}
.soc a:hover svg                                {fill: var(--color1c);}

.contacts-bottom                                {display: flex; width: 100%; align-items: center; flex-wrap: wrap; gap: 1em 2em; font-family: var(--font2); font-weight: 900; margin-top: 1rem;}
.contacts-bottom > a                            {font-size: 1em; color: var(--color0);}
.contacts-bottom > a:hover                      {color: var(--color1c);}
.contacts-bottom span                           {display: block; flex-grow: 2; text-align: right; color: var(--color0); font-weight: 500;}
.contacts-bottom span a                         {color:var(--color0); font-weight: 900; transition: .15s ease-in-out;}
.contacts-bottom span a:hover                   {color: var(--color1b);}
  @media screen and (max-width: 640px)          {
  .contacts-bottom                              {font-size: 0.9rem;}
  }
  @media screen and (max-width: 440px)          {
  .contacts-bottom .soc                         {width: 100%;}
  }

.main                                           {display: flex; width: 100%; flex-wrap: wrap; flex-grow: 3;}
.main :is(h1, h2, h3, h4)                       {display: block; width: 100%; font-weight: 900; color: var(--color0); line-height: 1.3; box-sizing: border-box; position: relative; font-family: var(--font2);}
.main h2                                        {font-size: min(5rem, calc(2rem + 5vw));}

.main h1                                        {font-size: min(3rem, calc(1.4rem + 4vw));}
.main h3                                        {font-size: min(1.3rem, calc(0.7rem + 2vw)); margin-bottom: 0.5rem;}
.main h4                                        {font-size: min(1.1rem, calc(0.9rem + 2vw)); font-weight: 500;}
.main :is(p, li)                                {display: block; width: 100%; font-size: 0.9em;}
.main p strong, .main li strong                 {font-weight: 700;}
.main p a, .main li a                           {color: var(--color0); text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color1b); text-decoration-color: transparent;}
.main .note                                     {font-size: 0.8em;}

.section                                        {display: block; width: 100%; position: relative; padding-block: var(--section-padding); isolation: isolate;}
.section .wrapper                               {z-index: 2;}
.section.padding-top-0                          {padding-top: 0;}
.section.padding-bottom-0                       {padding-bottom: 0;}

.headline                                       {display: flex; width: 100%; font-family: var(--font2);}
.headline > div                                 {display: block; position: relative; isolation: isolate;}
.headline > div > *                             {width: auto;}
.headline .subheadline                          {display: block; font-size: min(2rem, calc(1rem + 3vw)); color: var(--color1b); font-weight: 400; line-height: 1.7; margin-top: -0.8em; position: relative; z-index: -1;}
.headline .subheadline.right                    {text-align: right;}
.headline.centered                              {justify-content: center;}
.headline.centered > div > *                    {text-align: center;}
.headline.right                                 {justify-content: flex-end;}
  @media screen and (min-width: 1081px)         {  
  .headline.right > div                         {min-width: 50%;}
  }

.section.dark                                   {background: var(--color0c);} 
.section.dark :is(h2, p, li)                    {color: white;}
.section.dark .subheadline                      {opacity: 0.3;}

.flex                                           {display: flex !important; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; box-sizing: border-box;}

.button                                         {display: flex; --button-height: 2.5em; height: var(--button-height); justify-content: center; align-items: center; outline: solid 2px transparent; cursor: pointer; text-decoration: none !important; font-size: 0.8em; color: white; font-weight: 400; line-height: 1em; background: var(--color0); position: relative; border: none; padding: 0 2em; border-radius: calc(var(--button-height) / 2); box-sizing: border-box; font-family: var(--font2); transition: .15s ease-in-out;}
.button:hover                                   {background: var(--color0b);}

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

.swiper-pagination                              {display: flex; width: auto !important; height: 0.5rem; gap: 0.3rem; position: relative; inset: auto !important;}
.swiper-pagination > *                          {width: 1.8rem; height: 0.5rem; background: black; opacity: 1; margin: 0 !important; border-radius: 0.4rem; transition: .15s ease-in-out;}
.swiper-pagination > *:hover                    {background: var(--color1d);}
.swiper-pagination .swiper-pagination-bullet-active
                                                {background: var(--color1d); opacity: 1;}

.carousel                                       {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap2);}
.carousel .swiper-slide                         {display: flex; height: auto; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; container-type: inline-size; box-sizing: border-box; flex-shrink: 0; transition: .15s ease-in-out;}
.carousel .swiper-slide > *                     {width: 100%;}

.carousel:has(.carousel-pagination)             {padding-bottom: 3.5rem;}
.carousel-pagination                            {display: flex; width: 100%; justify-content: center; position: absolute; left: 0; bottom: 0;}

.thumbs1                                        {display: block;}
.thumbs1 .swiper                                {display: flex; width: 100%; justify-content: center;}
.thumbs1 .swiper-wrapper                        {width: auto; gap: 2rem; border-bottom: solid 1px rgba(0,0,0,0.3); transform: none !important;}
.thumbs1 .swiper-slide                          {width: auto !important; font-size: 1.6em; font-weight: 900; line-height: 1.6; padding-bottom: 0.2rem; margin-bottom: -1px; border-bottom: solid 2px transparent; box-sizing: border-box; font-family: var(--font2); transition: .15s ease-in-out;}
.thumbs1 .swiper-slide:hover                    {color: var(--color0b); cursor: pointer;}
.thumbs1 .swiper-slide-thumb-active             {border-color: var(--color0);}
  @media screen and (max-width: 1080px)         { 
  .thumbs1                                      {font-size: min(2.3vw, 1em);}
  .thumbs1 .swiper-wrapper                      {gap: 5vw;}
  }

.section:has(.hero)                             {background: url("images/hero.jpg") no-repeat center top;}
.section:has(.hero) > img                       {display: block; position: absolute; z-index: 2;}
  @media screen and (min-width: 1081px)         { 
  .section:has(.hero)                           {background-size: contain; z-index: 2;}
  .section:has(.hero) > img                     {width: 42rem; left: 51%; top: -6rem;}
  }
  @media screen and (max-width: 1080px)         { 
  .section:has(.hero)                           {background-size: auto 100%;}
  .section:has(.hero) > img                     {width: 37rem; left: calc(var(--hero-text-width) - 1rem); top: -3rem;}
  }

.hero                                           {display: flex; width: 100%;}
.hero .text                                     {display: flex; width: var(--hero-text-width); justify-content: flex-end; flex-wrap: wrap; gap: 1.5rem;}
.hero .text img                                 {display: block; width: var(--hero-logo-width); height: auto;}
.hero .text p                                   {text-align: right;}
  @media screen and (min-width: 1081px)         {  
  .hero                                         {margin-top: var(--hero-margin-top);}
  .hero .text                                   {padding-top: var(--hero-top-padding);}
  .hero .text .words                            {display: block; width: 100%; text-align: right;}
  .hero .text .words span                       {display: block; font-size: 3rem; color: rgba(0,0,0,0.1); font-weight: 900; font-family: var(--font2);}
  }
  @media screen and (max-width: 1080px)         {  
  .hero                                         {padding-top: var(--hero-top-padding);}
  .hero .text .words                            {display: none;}
  .hero .text p                                 {margin-block:  4rem 6rem;}
  }

.img-text                                       {display: flex; width: 100%; flex-wrap: wrap;}
.img-text .text                                 {display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap;}
.img-text .img                                  {display: block; overflow: hidden; background: white; position: relative;}
.img-text .img img                              {display: block; width: 100%; height: 100%; object-fit: cover;}
.img-text .img.filter1:after                    {display: block; width: 100%; height: 100%; background: white; opacity: 0.6; position: absolute; left: 0; top: 0; z-index: 2; content: "";}
.img-text p                                     {margin-top: 1rem;}
.img-text.reversed p                            {text-align: right;}
.img-text .img                                  {border-radius: 0 var(--border-radius1) var(--border-radius1) 0;}
.img-text.reversed .img                         {border-radius: var(--border-radius1) 0 0 var(--border-radius1);}
  @media screen and (min-width: 1801px)         {  
  .img-text                                     {min-height: var(--img-text-min-height);}
  }
  @media screen and (min-width: 1081px)         {  
  .img-text                                     {justify-content: flex-end;}
  .img-text.reversed                            {justify-content: flex-start;}
  .img-text .img                                {width: calc(50vw + 2rem) !important; right: calc(50vw - 2rem);}
  .img-text.reversed .img                       {right: auto; left: calc(50vw - 2rem);}
  .section:has(.img-text) .wrapper              {position: static;}
  .img-text .text                               {width: 43%; padding-block: max(3rem, 3vw);}
  .img-text .headline                           {margin-top: -1em;}
  .img-text .img                                {width: 53%; height: calc(100% - 2 * var(--section-padding)); position: absolute; top: var(--section-padding);}
  }
  @media screen and (max-width: 1080px)         { 
  .img-text .text                               {width: 100%; order: -1; position: relative; z-index: 2;}
  .img-text .img                                {width: calc(100% + var(--wrapper-padding)); margin: 1.5rem 0 0 calc(0px - var(--wrapper-padding));}
  .img-text.reversed .img                       {margin: 1.5rem calc(0px - var(--wrapper-padding)) 0 0;}
  }

.who .text .flex                                {margin-top: 1.5rem;}
  @media screen and (min-width: 1081px)         { 
  .who .img                                     {height: calc(100% - var(--section-padding));}
  .who .text .flex                              {justify-content: flex-end;}
  } 
  @media screen and (max-width: 1080px)         { 
  .section:has(.who)                            {isolation: unset;}
  .section:has(.who) .wrapper                   {position: static;}
  .who .headline                                {justify-content: flex-start;}
  .who .text                                    {position: relative; z-index: 5;}
  .who .img                                     {position: relative; z-index: -5;}
  }

.where-to .img .swiper                          {height: 100%;}
.where-to .img .swiper-wrapper                  {height: 100%;}
.where-to .img .swiper-slide                    {width: 100%; height: 100%;}
.where-to .thumbs1                              {width: 100%; margin-top: 1.5rem;}
  @media screen and (min-width: 1081px)         { 
  .where-to .thumbs1                            {font-size: 0.75rem;}
  .where-to .thumbs1 .swiper                    {justify-content: flex-start;}
  .where-to .thumbs1 .swiper-wrapper            {gap: 1.8em; margin: 0;}
  }
  @media screen and (max-width: 1080px)         { 
  .section:has(.where-to)                       {position: relative; z-index: 2;}
  .where-to                                     {margin-bottom: calc(-3rem - var(--section-padding));}
  .where-to .thumbs1                            {margin-bottom: 1rem;}
  .where-to .headline                           {padding-left: 50%;}
  }

.how                                            {display: block; width: 100%; position: relative; --how-slide-padding: 2rem;}
.how .swiper                                    {overflow: visible;}
.how .swiper-slide                              {padding-bottom: 2rem; padding-right: var(--how-slide-padding);}
.how .num                                       {display: block; width: 100%; text-align: center; font-size: 95cqw; color: white; font-weight: 900; font-family: var(--font2); opacity: 0.3; padding-right: var(--how-slide-padding); box-sizing: border-box; position: absolute; left: 0; top: 30cqw;}
.how .img                                       {display: block; width: 100%; aspect-ratio: 1; border-radius: var(--border-radius1); overflow: hidden;}
.how .img img                                   {display: block; width: 100%; height: 100%; object-fit: cover;}
.how .text                                      {display: block; width: calc(100% + var(--how-slide-padding)); margin: 0.65em calc(0px -  var(--how-slide-padding)) 0 0; padding-left: 45%; box-sizing: border-box; position: relative; z-index: 1;}
.how .text > *                                  {display: block; font-size: 0.85em; color: white;}
.how .text .title                               {font-size: 1.1em; font-family: var(--font2); margin-bottom: 0.2em;}
  @media screen and (max-width: 1080px)         { 
  .section:has(.how) .headline                  {margin-top: 3rem;}
  .how .swiper                                  {padding-right: 20%; overflow: visible;}
  }
  @media screen and (min-width: 541px) and (max-width: 1080px){ 
  .how .text                                    {padding-left: 7vw;}
  }

.highlights                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: -1;}
.highlights .list                               {list-style: none; counter-reset: li;}
.highlights .list > div                         {display: flex; width: 100%; justify-content: flex-end; flex-wrap: wrap; text-align: right; padding: 0.7em 2.4em 0.7em 0; counter-increment: div; position: relative; box-sizing: border-box; position: relative;}
.highlights .list > div:after                   {display: block; width: 1em; text-align: center; font-size: 2.4em; color: transparent; font-weight: 900; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: white; position: absolute; right: 0; top: -0.12em; content: counter(div);}
.highlights .list > div h3                      {font-size: 1.1em; color: white; font-weight: 400;}
.highlights .list > div p                       {display: none; max-width: 15em;}
.highlights .list > div.hover p                 {display: block;}
.highlights .img                                {display: block; position: relative; overflow: hidden; transition: .15s ease-in-out;}
.highlights .img div                            {display: block; opacity: 0; position: absolute; inset: 0; transition: .15s ease-in-out;}
.highlights .img div img                        {display: block; width: 100%; height: 100%; object-fit: cover;}
.highlights .img div.hover                      {opacity: 1;}
  @media screen and (min-width: 1801px)         { 
  .highlights                                   {min-height: var(--img-text-min-height);}
  }
  @media screen and (min-width: 1081px)         { 
  .highlights                                   {min-height: 34rem;}
  .highlights .list                             {width: 55%;}
  .highlights .img                              {width: calc(42% + 0.5 * (100vw - var(--wrapper-width))); height: 34rem; position: absolute; left: 58%; top: 0; border-radius: var(--border-radius1) 0 0 var(--border-radius1);}
  }
  @media screen and (max-width: 1080px)         { 
  .highlights .list                             {width: 100%;}
  .highlights .img                              {width: calc(90vw - 14rem); height: 20em; border-radius: 0 var(--border-radius1) var(--border-radius1) 0; position: absolute; left: calc(0px - var(--wrapper-padding)); top: -10rem;}
  .section:has(.highlights) .headline           {margin-top: 5rem;}
  }

.what .swiper                                   {overflow: visible;}
.what .swiper-wrapper                           {align-items: flex-start;}
.what .swiper-slide                             {display: flex; justify-content: flex-end; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: white; padding: 1.5rem; border-radius: var(--border-radius1); box-shadow: var(--box-shadow1);}
.what .swiper-slide .icon                       {display: block; width: 100%; height: 2.2em; margin-bottom: 18cqw;}
.what .swiper-slide .icon img                   {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center;}
.what .swiper-slide .title                      {display: block; width: 100%; font-size: min(1.05rem, calc(0.7rem + 2vw)); font-weight: 400; color: var(--color0); line-height: 1.3; font-family: var(--font2); margin-bottom: 0.2rem;}
.what .swiper-slide p                           {color: var(--color0);}
.what .swiper-slide .hidden                     {display: none; /*padding-top: 1em;*/}
.what .swiper-slide .more                       {display: none; width: 1.8em; height: 1.8em; justify-content: center; align-items: center; background: var(--color0); border-radius: 100%; margin-top: 0.8rem; cursor: pointer; transition: .15s ease-in-out;}
.what .swiper-slide .more svg                   {display: block; width: 30%; height: 30%; fill: white;}
.what .swiper-slide .more:hover                 {background: var(--color0b);}
.what .swiper-slide:has(.hidden) .more          {display: flex;}
.what .swiper-slide.show .more                  {transform: rotate(-90deg);}
  @media screen and (min-width: 769px)          { 
  .what .swiper-slide                           {width: 15em;}
  }
  @media screen and (max-width: 768px)          { 
  .what .swiper-slide                           {width: 11em;}
  }

.price                                          {display: block; width: 100%; position: relative;}
.price .thumbs1                                 {width: 100%;}
.price .slider                                  {display: block; width: 100%; margin-top: 1.5rem;}
.price .slider .swiper-slide                    {display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6em 0; opacity: 0 !important;}
.price .slider .swiper-slide .watermark         {display: block; width: 100%; height: 100%; text-align: center; color: var(--color1a); line-height: 1.2; font-weight: 900; word-wrap: break-word; font-family: var(--font2); position: absolute; inset: 0; z-index: -1;}
.price .slider .swiper-slide-active             {opacity: 1 !important;}
.price .slider .swiper-slide > div              {display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.7em; padding-inline: 0.8em; box-sizing: border-box;}
.price .slider .swiper-slide > div h3           {font-size: min(1.2rem, calc(0.7rem + 2vw)); margin: 0;}
.price .slider .swiper-slide > div h3:before,
.price .slider .swiper-slide > div h3:after     {content: ".";}
.price .slider .swiper-slide > div .subtitle    {font-size: 0.9em; margin-top: -0.35em; font-family: var(--font2);}
.price .slider .swiper-slide > div p:first-of-type
                                                {flex-grow: 2;}
  @media screen and (min-width: 1081px)         {
  .price .thumbs1                               {position: relative;}
  .price .thumbs1 .swiper                       {width: auto; position: absolute; right: 0; top: -4rem;}
  .price .slider .swiper-slide .watermark       {font-size: min(13em, 16vw);}
  .price .slider .swiper-slide.c5 > div         {width: 20%;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(-n+2)
                                                {text-align: right;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(-n+2) h3::before  
                                                {display: none;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(3)
                                                {text-align: center;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(n+4) h3::after  
                                                {display: none;}
  .price .slider .swiper-slide.c4 > div         {width: 25%;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(-n+2)
                                                {text-align: right;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(-n+2) h3::before  
                                                {display: none;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(n+3) h3::after  
                                                {display: none;}
  .price .slider .swiper-slide.c3 > div         {width: 33.33%;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(1)
                                                {text-align: right;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(1) h3::before  
                                                {display: none;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(2)
                                                {text-align: center;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(3) h3::after  
                                                {display: none;}
  }
  @media screen and (max-width: 1080px)         {
  .price .thumbs1                               {margin-top: 1.5rem;}
  }
  @media screen and (min-width: 641px) and (max-width: 1080px){
  .price .slider .swiper-slide .watermark       {font-size: min(20em, 25vw);}
  .price .slider .swiper-slide.c5 > div         {width: 33.33%;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(1),
  .price .slider .swiper-slide.c5 > div:nth-of-type(4)  
                                                {text-align: right;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(1) h3::before,
  .price .slider .swiper-slide.c5 > div:nth-of-type(4) h3::before    
                                                {display: none;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(2)
                                                {text-align: center;}
  .price .slider .swiper-slide.c5 > div:nth-of-type(3) h3::after,
  .price .slider .swiper-slide.c5 > div:nth-of-type(5) h3::after    
                                                {display: none;}
  .price .slider .swiper-slide.c4 > div         {width: 50%;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(odd)  
                                                {text-align: right;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(odd) h3::before   
                                                {display: none;}
  .price .slider .swiper-slide.c4 > div:nth-of-type(even) h3::after   
                                                {display: none;}                                                
  .price .slider .swiper-slide.c3 > div         {width: 50%;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(1)
                                                {text-align: right;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(1) h3::before  
                                                {display: none;}

  .price .slider .swiper-slide.c3 > div:nth-of-type(2) h3::after  
                                                {display: none;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(3)
                                                {text-align: center;}
  }
  @media screen and (max-width: 640px)          {
  .price .slider .swiper-slide .watermark       {font-size: 30vw;}
  .price .slider .swiper-slide > div            {width: 50%;}
  .price .slider .swiper-slide > div:nth-of-type(odd)
                                                {text-align: right;}
  .price .slider .swiper-slide > div:nth-of-type(odd) h3::before    
                                                {display: none;}
  .price .slider .swiper-slide > div:nth-of-type(even) h3::after   
                                                {display: none;}
  .price .slider .swiper-slide > div:last-child h3:before
                                                {display: inline !important;}
  .price .slider .swiper-slide.c3 > div:nth-of-type(3),
  .price .slider .swiper-slide.c5 > div:nth-of-type(5)
                                                {text-align: center;}
  }

.gallery                                        {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gallery-gap);}
.gallery > a                                    {display: block; width: calc(100% / var(--gallery-count) - var(--gallery-gap) * ((var(--gallery-count) - 1) / var(--gallery-count))); aspect-ratio: 1; background: white; container-type: inline-size; border-radius: var(--border-radius1); overflow: hidden; position: relative; box-shadow: var(--box-shadow1); font-weight: 900; font-family: var(--font2);}
.gallery > a img                                {display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: grayscale(1); transition: .15s ease-in-out;}
.gallery > a:after                              {display: block; background: rgba(150,150,150,05); opacity: 0.35; position: absolute; inset: 0; content: "";}
.gallery > a .date                              {display: flex; width: 100%; height: 100%; align-items: center; flex-wrap: wrap; gap: 0.5em; opacity: 0.25; padding: 0.85em; box-sizing: border-box; position: absolute; inset: 0; z-index: 4; resize: vertical;}
.gallery > a .date > span                       {display: block; width: 100%; text-align: right; font-size: 2em; font-size: 25cqw; color: black; line-height: 1;}
.gallery > a .title                             {display: block; width: 100%; font-size: 0.8em; font-size: 7cqw; color: var(--color0); padding: 3em 1em 1em; background-image: linear-gradient(to top, rgba(255,255,255,0.65), transparent); box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 5;}
.gallery > a.locked:before                      {display: block; width: 1.5em; height: 1.5em; position: absolute; right: 1em; top: 1em; z-index: 6; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 512'%3E%3Cpath d='M360,204.8h-32V128C328,57.3,270.7,0,200,0S72,57.3,72,128v76.8H40c-17.7,0-32,14.3-32,32V480 c0,17.7,14.3,32,32,32h320c17.7,0,32-14.3,32-32V236.8C392,219.1,377.7,204.8,360,204.8z M264,204.8H136V128c0-35.3,28.7-64,64-64 s64,28.7,64,64V204.8z' width='1' height='1' fill='white' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: "";}
.gallery > a:hover img                          {opacity: 1; filter: grayscale(0);}
.gallery .flex                                  {gap: 0.6rem var(--gallery-gap);}
.gallery .flex a                                {width: 14em; font-size: 0.8em;}
  @media screen and (min-width: 769px)          {
  .gallery                                      {--gallery-count: 4;}
  }
  @media screen and (max-width: 768px)          {
  .gallery                                      {--gallery-count: 2;}
  }

.section:has(.others)                           {z-index: 1;}

.others                                         {display: block; width: 100%; --others-gap: 2rem;}
.others .content                                {display: flex; width: 100%; justify-content: flex-end; margin-inline: auto;}
.others .content .box                           {display: flex; flex-wrap: wrap; gap: 3rem var(--others-gap); background: var(--color1e); padding: 4rem 2rem 2rem 3rem; margin-top: -3rem; box-sizing: border-box;}
.others .content .box > div                     {display: flex; flex-wrap: wrap; gap: 0.6em;}
.others .content .box .link                     {display: block; width: 100%; margin-top: 0.6rem;}
.others .content .box .link a                   {color: var(--color0); font-weight: 900; font-family: var(--font2); transition: .15s ease-in-out;}
.others .content .box .link a:hover             {color: var(--color0b);}
  @media screen and (min-width: 1801px)         {
  .others .content                              {width: 1700px;}
  .others .content .box                         {border-radius: var(--border-radius1);}
  }
  @media screen and (max-width: 2000px)         {
  .others .content .box                         {border-radius: var(--border-radius1) 0 0 var(--border-radius1);}
  }
  @media screen and (min-width: 961px)          {
  .others .content .box > div                   {width: 25rem; max-width: calc(50% - 0.5 * var(--others-gap));}
  }
  @media screen and (max-width: 960px)          {
  .others .content .box > div                   {width: 100%;}
  }
  @media screen and (max-width: 1080px)         {
  .others .content .box                         {width: 85%;}
  }

.portfolio                                      {display: block; width: 100%; position: relative;}
.portfolio .images                              {display: block; width: 100%; aspect-ratio: 1.5; position: relative;}
.portfolio .images a                            {display: block; aspect-ratio: calc(3 / 2); position: absolute; transition: .5s ease-in-out;}
.portfolio .images a span                       {display: block; width: 100%; height: 100%;}
.portfolio .images a span img                   {display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: var(--box-shadow1); transition: .2s ease-in-out;}
.portfolio .images a:hover span img             {transform: scale(1.1);}
.portfolio > img                                {display: block; width: 90%; position: absolute; left: -41%; top: -92%; z-index: -2;}
.portfolio .flex                                {justify-content: flex-end;}

.portfolio .images a:nth-child(1)               {width: 35%; left: -40%; top: 10%; z-index: 9; transform: scale(0.8,0.8) translate(5rem, 4rem);}
.portfolio .images a:nth-child(1) span          {transform: rotate(5deg);}
.portfolio .images a:nth-child(2)               {width: 18%; left: -27%; top: 47%; transform: scale(0.8,0.8) translate(5rem, -4rem);}
.portfolio .images a:nth-child(2) span          {transform: rotate(-4deg);}
.portfolio .images a:nth-child(3)               {width: 33%; left: 34%; top: 10%; transform: scale(0.8,0.8) translate(-5rem, 4rem);}
.portfolio .images a:nth-child(3) span          {transform: rotate(-10deg);}
.portfolio .images a:nth-child(4)               {width: 23%; left: 31%; top: 45%; z-index: 5; transform: scale(0.8,0.8) translate(-5rem, 0);}
.portfolio .images a:nth-child(4) span          {transform: rotate(7deg);}
.portfolio .images a:nth-child(5)               {width: 26%; left: 39%; top: 67%; transform: scale(0.8,0.8) translate(-5rem, -4rem);}
.portfolio .images a:nth-child(5) span          {transform: rotate(-9deg);}
.portfolio .images a:nth-child(6)               {width: 22%; left: 60%; top: 14%; z-index: 10; transform: scale(0.8,0.8) translate(-10rem, 4rem);}
.portfolio .images a:nth-child(6) span          {transform: rotate(-10deg);}
.portfolio .images a:nth-child(7)               {width: 38%; left: 71%; top: 20%; transform: scale(0.8,0.8) translate(-10rem, 3rem);}
.portfolio .images a:nth-child(7) span          {transform: rotate(7deg);}
.portfolio .images a:nth-child(8)               {width: 22%; left: 54%; top: 45%; transform: scale(0.8,0.8) translate(-15rem, 0);}
.portfolio .images a:nth-child(8) span          {transform: rotate(10deg);}
.portfolio .images a:nth-child(9)               {width: 35%; left: 75%; top: 56%; transform: scale(0.8,0.8) translate(-15rem, -4rem);}
.portfolio .images a:nth-child(9) span          {transform: rotate(-9deg);}
.portfolio .images a:nth-child(10)              {width: 22%; left: 108%; top: 17%; transform: scale(0.8,0.8) translate(-20rem, 0);}
.portfolio .images a:nth-child(10) span         {transform: rotate(-8deg);}
.portfolio .images a:nth-child(11)              {width: 28%; left: 105%; top: 47%; transform: scale(0.8,0.8) translate(-20rem, -4rem);}
.portfolio .images a:nth-child(11) span         {transform: rotate(9deg);}

.anim                                           {transition-delay: 1s; transition: .5s ease-in-out;}
.anim.play                                      {transform: scale(1,1) translate(0) !important;}

.section:has(.reviews)                          {z-index: 1;}

.reviews .swiper                                {overflow: visible;}
.reviews .swiper-wrapper                        {align-items: flex-start;}
.reviews .swiper-slide                          {display: flex; width: 18em; aspect-ratio: 1; justify-content: flex-end; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: var(--color1e); padding: 1.5rem; box-sizing: border-box; border-radius: var(--border-radius1); box-shadow: var(--box-shadow1);}
.reviews .swiper-slide .stars                   {display: block; width: 100%; height: 1em; margin-bottom: 18cqw;}
.reviews .swiper-slide .stars svg               {display: block; width: auto; height: 100%; fill: var(--color1a);}
.reviews .swiper-slide :is(.title, .name)       {display: block; width: 100%; font-size: min(1.1rem, calc(0.7rem + 2vw)); font-weight: 400; line-height: 1.3; font-family: var(--font2);}
.reviews .swiper-slide .title                   {color: var(--color1b);}
.reviews .swiper-slide .title2                   {color: var(--color1b);}
.reviews .swiper-slide .name                    {color: var(--color0);}
.reviews .swiper-slide .text                    {display: block; width: 100%; margin-top: 1em;}

.reviews .swiper-slide .stars.s5-0 svg > *,
.reviews .swiper-slide .stars.s4-5 svg > *:nth-child(-n+9),      
.reviews .swiper-slide .stars.s4-0 svg > *:nth-child(-n+8),      
.reviews .swiper-slide .stars.s3-5 svg > *:nth-child(-n+7),      
.reviews .swiper-slide .stars.s3-0 svg > *:nth-child(-n+6)
                                                {fill: var(--color0);}

.logos                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.2em 2.2em;}
.logos a                                        {display: block; height: min(4.6em, 15vw);}
.logos a img                                    {display: block; height: 100%; filter: grayscale(1); opacity: 0.7; transition: .15s ease-in-out;}
.logos a:hover img                              {filter: grayscale(0); opacity: 1;}
  @media screen and (min-width: 961px)          {
  .logos                                        {margin-top: min(4vw, 5rem);}
  }

.follow                                         {display: flex; width: 100%; justify-content: space-between; gap: 1.5rem;}
.follow .headline                               {padding-bottom: 2.4rem; position: relative;}
.follow .headline .soc                          {width: auto; justify-content: flex-end; position: absolute; right: 0; bottom: 0;}
.follow .ig-widget                              {display: flex; flex-wrap: wrap; gap: var(--ig-widget-gap); --ig-widget-gap: 1rem;}
.follow .ig-widget > a                          {display: block; width: calc(100% / var(--ig-widget-count) - var(--ig-widget-gap) * ((var(--ig-widget-count) - 1) / var(--ig-widget-count))); aspect-ratio: 1; background: white; border-radius: var(--border-radius1); overflow: hidden; position: relative; box-shadow: var(--box-shadow1);}
.follow .ig-widget > a:after                    {display: block; width: 100%; height: 100%; background: white; opacity: 0.4; position: absolute; inset: 0; content: ""; transition: .15s ease-in-out;}
.follow .ig-widget > a img                      {display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .15s ease-in-out;}
.follow .ig-widget > a:hover img                {filter: grayscale(0);}
.follow .ig-widget > a:hover:after              {opacity: 0;}
  @media screen and (max-width: 1080px)         {
  .follow                                       {flex-wrap: wrap;}
  .follow .headline .soc                        {left: 0; right: auto;}
  .follow .ig-widget                            {width: 100%;}
  }
  @media screen and (min-width: 769px)          {
  .follow .ig-widget                            {--ig-widget-count: 4;}
  }
  @media screen and (max-width: 768px)          {
  .follow .ig-widget                            {--ig-widget-count: 2;}
  }

.form                                                 {display: flex; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 0.45rem;}
.form-items                                           {display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: var(--form-gap);}
.form-item                                            {display: flex; width: 100%; min-height: var(--form-item-height); align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative;}
.form-item :is(input, textarea, .custom-select)       {display: block; width: 100%; background: var(--color1a); text-align: right; font-size: 0.8em; color: var(--color0); font-weight: 700; border: none; outline: solid 2px transparent; border-radius: calc(0.5 * var(--form-item-height)); box-sizing: border-box; position: relative; font-family: var(--font2); transition: .15s ease-in-out; box-shadow: var(--box-shadow1);}
.form-item input                                      {height: var(--form-item-height); padding: 0 1rem;}
.form-item textarea                                   {height: 8em; padding: 1rem;}
.form-item :is(input, textarea)::placeholder          {color: var(--color1c); font-weight: 400;}
.form-item :is(input, textarea):focus                 {outline-color: var(--color1);}
.form-item .error                                     {display: block; width: 100%; font-size: 0.85em; padding: 0.2rem 1rem 0; box-sizing: border-box;}
  @media screen and (min-width: 541px)                {
  .form-item.w50                                      {width: calc(50% - var(--form-gap) / 2);}
  }

.custom-select                                        {position: relative; height: var(--form-item-height);}
.custom-select .sel                                   {display: block; width: 100%; height: var(--form-item-height); align-items: center; flex-wrap: wrap; font-size: 1em; color: var(--color0); font-weight: 700; line-height: var(--form-item-height); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 2rem; box-sizing: border-box; cursor: pointer; position: relative; z-index: 2; transition: .2s ease-in-out;}
.custom-select .sel:hover                             {color: var(--color0);}
.custom-select > svg                                  {display: block; width: 0.7em; fill: var(--color1); position: absolute; right: 1.2em; top: 1.2em; z-index: 1;}
.custom-select .dropdown                              {display: none; width: calc(100% + 2px); background: white; box-shadow: 0 0 0.35em rgba(0,0,0,0.25); border-radius: calc(0.5 * var(--form-item-height)); 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; 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; color: var(--color1c); font-weight: 400; border-top: solid 1px rgba(0,0,0,0.1); padding: 1em 1.25rem 1em 1rem; position: relative; box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.custom-select .inner ul li:after                     {display: block; width: 0.4em; height: 0.6em; opacity: 0.5; position: absolute; right: 1rem; top: calc(50% - 0.3em); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 512'%3E%3Cpolygon points='-1.1,46.4 208.6,256 -1.1,465.6 45.3,512 301.3,256 45.3,0' width='1' height='1' fill='black' stroke='white' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center; content: ""; 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;}

.checkbox                                       {display: flex; width: 100%; --chk-size: 1.6em;}
.chk1:not(:checked),
.chk1:checked                                   {width: 1px; height: 1px; position: absolute !important; left: -9999px; background-position: left top;}
.chk1:not(:checked) + label,   
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.2; padding-left: calc(var(--chk-size) + 0.45em); font-weight: 500; color: #666666; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:not(:checked) + label                     {color: var(--color0);}
.chk1:not(:checked) + label a,
.chk1:checked + label a                         {color: var(--color0); text-decoration: underline;}
.chk1:not(:checked) + label a:hover,   
.chk1:checked + label a:hover                   {color: var(--color1b); text-decoration: none;} 
.chk1:not(:checked) + label:hover,
.chk1:checked + label:hover                     {color: var(--color1b);}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: var(--chk-size); height: var(--chk-size); background-color: var(--color1a); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; border-radius: 100%; position: absolute; left: 0; top: -0.15em; z-index: 1; overflow: hidden; content: "";}
.chk1:checked + label:before                    {background-image: URL('images/check.svg');}
.chk1:disabled + label,                  
.chk1:disabled + label:before                   {opacity: 0.4;}





.article-styles                                 {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; gap: 1.4rem; flex-wrap: wrap;}
.article-styles .image                          {display: block; width: 100%;} 
.article-styles .image img                      {display: block; width: 100%; transition: .15s ease-in-out;}
.article-styles .image:hover img                {opacity: 0.75;;}
.article-styles .image.auto                     {width: auto; max-width: 100%;} 

.article-styles figcaption                      {display: block; width: 100%; font-size: 0.8em; color: #666666; margin-top: -0.5rem;}
.article-styles .box.rounded2                   {display: flex; flex-wrap: wrap; gap: 1rem; padding: min(calc(0.4rem + 4vw), 2.6rem); border-radius: 1.2em 0 1.2em 0;}
.article-styles  .images                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.7em;}
.article-styles  .images .img                   {display: block; width: auto; max-width: 100%; height: 12em;}
.article-styles  .images .img img               {width: auto; max-width: 100%; height: 100%; object-fit: contain; transition: .15s ease-in-out;}
.article-styles  .images .img:hover img         {opacity: 0.85;}
.article-styles .embed                          {display: block; width: 100%; margin-top: calc(0.6 * var(--gap1)); border-radius: var(--border-radius);}
.article-styles .embed iframe                   {display: block; width: 100%;}



.article-styles .image:hover > span img         {opacity: 0.9;}
.article-styles h3                              {font-size: min(1.8rem, calc(1rem + 2vw)); margin-block: 0.5rem -0.3rem;}
.article-styles h4                              {margin-block: 0.4rem -0.3rem;}
.article-styles p                               {margin-top: 0 !important;}
.article-styles :is(h2, h3, h4, p, li)          {max-width: 100%; text-align: left;}
.article-styles li                              {box-sizing: border-box; position: relative; margin-bottom: 0.15em;}
.article-styles ul li                           {padding-left: 1.55em;}
.article-styles ul li:before                    {display: block; width: 0.3em; height: 0.3em; background: white; border-radius: var(--border-radius); position: absolute; left: 0.8em; top: 0.58em; content: "";}
.article-styles ul li:last-child                {margin-bottom: 0;}
.article-styles li :is(ul, ol)                  {margin-block: 0.4em 0.8em;}
.article-styles li li                           {font-size: 1em !important;}
.article-styles li li:before                    {background: none; border: solid 0.06em white; box-sizing: border-box;}
.article-styles ol                              {list-style: none; counter-reset: li; padding: 0; margin: 0;}
.article-styles ol > li                         {counter-increment: li; padding-left: 2em;}
.article-styles ol > li:before                  {display: block; content: counter(li) "."; font-size: 1em; font-weight: 500; color: white; position: absolute; left: 0.65em; top: 0;}
.article-styles .highlight                      {display: block; width: 100%; background: var(--color1b); padding: 1.8em; box-sizing: border-box; border-radius: var(--border-radius1);}