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

:root                                           {
                                                --font1:          'inter-variable', sans-serif; /* -10-0 / 100-900 */

                                                --color1:         #050549;
                                                --color1b:        #012867;
                                                --color2:         #b69b62;
                                                --color2b:        #dac28f;
                                                
                                                --wrapper-side:         5vw;

                                                --section-padding:      min(7rem, calc(2rem + 6vw));
                                                --gap0:                 0.7em;
                                                --gap1:                 min(1.4rem, calc(0.3rem + 4vw));
                                                --gap2:                 min(3rem, calc(1rem + 4vw));
                                                --padding1:             min(4rem, calc(0.4rem + 5vw));                                                
                                                --border-radius1a:      min(8rem, calc(1rem + 10vw));
                                                --border-radius1b:      0.7rem;                                            
                                                }
  @media screen and (min-width: 1081px)         {
  :root                                         {--header-height: 6rem;}
  }
  @media screen and (max-width: 1080px)         {
  :root                                         {--header-height: 4rem;}
  }  

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

html                                            {font-size: min(17px, calc(10px + 1vw));}
  @media screen and (min-width: 2500px)         {
  html                                          {font-size: 20px;}
  }

html, body, form                                {width: 100%;}
body                                            {margin: 0 auto;; color: var(--color0); font-variation-settings: "slnt" 0, "wght" 400; line-height: 1.65; position: relative; font-family: var(--font1);}
form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap;}

.wrapper                                        {display: flex; width: calc(100vw - 2 * var(--wrapper-side)); max-width: 76rem; flex-wrap: wrap; margin-inline: auto; position: relative;}
  @media screen and (max-width: 1080px)         {
  .wrapper                                      {max-width: 50rem;}
  }

strong                                          {font-variation-settings: "wght" 700;}
em                                              {font-variation-settings: "slnt" -8;}
.text-clr2                                      {color: var(--color2) !important;}

h1, h2, h3                                      {display: block; width: 100%; color: var(--color1); line-height: 1.15; box-sizing: border-box; position: relative;}
      h1, h2                                          {font-size: min(2.4rem, calc(0.7rem + 4vw)); font-variation-settings: "wght" 500;}
h3                                              {font-size: min(1.5rem, calc(0.3rem + 4vw)); font-variation-settings: "wght" 700; color: var(--color2) !important;}

.main                                           {display: flex; width: 100%; flex-direction: column; flex-grow: 1; flex-wrap: wrap; margin: 0 auto; box-sizing: border-box; position: relative; transition: .3s ease-in-out;}
.main :is(p, li)                                {font-size: 1em; color: var(--color1);}
.main p                                         {display: block; width: 100%; box-sizing: border-box;}
.main p a, .main li a                           {text-decoration: underline; color: var(--color0); text-decoration-color: var(--color1); transition: .15s ease-in-out;}
.main p a:hover, .main li a:hover               {color: var(--color1b); text-decoration-color: transparent;}
.main ul                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 0.2em;}
.main ul li                                     {padding-left: 1em; box-sizing: border-box; position: relative;}
.main ul li:before                              {display: block; width: 0.36em; height: 0.36em; background: var(--color1); border-radius: 100%; position: absolute; left: 0; top: 0.7em; content: "";}               

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

.section .background                            {display: block; width: calc(100% + 10vw); height: 100%; position: absolute; inset: 0 -5vw; border-radius: 15vw 0;}
.section .background.bg1                        {background-image: linear-gradient(45deg, var(--color1), var(--color1b));}
.section .background.bg1:before                 {display: block; position: absolute; inset: 0; content: ""; background: url("../images/background-circles.webp") no-repeat center center; background-size: clamp(70rem, 100%, 130rem) auto;}
.section:has(.background.bg1) *                 {color: white;}

.button                                         {display: block; font-size: 0.9em; text-transform: uppercase; font-variation-settings: "wght" 700; white-space: nowrap; padding: 0.95em 1.8em; border-radius: 0.35em; border: none; outline: none; box-sizing: border-box; overflow: hidden; cursor: pointer; position: relative; z-index: 1; font-family: var(--font1); transition: .15s ease-in-out;}
.button:before, .button:after                   {display: block; position: absolute; inset: 0; z-index: -1; content: ""; transition: .15s ease-in-out;}
.button:before                                  {background-image: linear-gradient(to right, var(--color2), var(--color2b));}
.button:after                                   {background-image: linear-gradient(to right, var(--color2b), var(--color2)); z-index: -2;}
.button > span                                  {display: flex; align-items: center; gap: 0.4em; color: var(--color1) !important;}                                   
.button > span img                              {display: block; width: 1em; height: auto;}
.button:hover:before                            {opacity: 0;}

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

.parallax                                       {position: relative;}
 
.hero .background                               {border-top-left-radius: 0;}
.hero .wrapper                                  {justify-content: center; gap: var(--gap2);}
.hero .logo                                     {display: block; width: min(45rem, calc(10rem + 25vw)); height: auto;}
.hero .image                                    {display: block; width: 100%; position: relative; border-radius: min(10em, calc(3em + 5vw)) 0.8em; overflow: hidden; box-shadow: 0 0.3em 1em black;}
.hero .image span                               {display: block; position: absolute; inset: 0;}
.hero .image span img                           {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.hero .perex                                    {display: block; width: 100%; padding: 3rem var(--padding1) 0; box-sizing: border-box;}
.hero .perex .inner                             {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1); position: relative; box-sizing: border-box;}
.hero .perex h1                                 {display: block; font-size: min(2.5rem, calc(0.6rem + 4vw)); font-variation-settings: "wght" 500;}
.hero .perex p                                  {display: block; font-size: min(1.7rem, calc(0.1rem + 4vw)); line-height: 1.3;}
.hero .perex p strong                           {display: block; font-size: 1.15em; font-variation-settings: "wght" 600;}
.hero .perex .logo2                             {display: block; width: min(7em, calc(2em + 10vw)); height: auto;}
  @media screen and (min-width: 1081px)         {
  .hero .image                                  {padding-top: 40%;}
  .hero .perex .inner                           {padding-right: 30%;}
  .hero .perex .logo2                           {position: absolute; right: 0; top: 0.55rem;}
  }
  @media screen and (max-width: 1080px)         {
  .hero .image                                  {padding-top: 56%;}
  .hero .perex .inner                           {justify-content: center; text-align: center;}
  }
  @media screen and (max-width: 540px)          {
  .hero .image                                  {padding-top: 75%;}
  }

.hero.page-head                                 {padding-block: calc(0.5 * var(--section-padding));}
.hero.page-head .logo                           {width: min(25rem, calc(10rem + 15vw));}

.box                                            {display: flex; width: 100%; justify-content: center; padding: var(--padding1); border-radius: var(--border-radius1b) var(--border-radius1a) var(--border-radius1b) var(--border-radius1b); box-sizing: border-box;}
.box.color2                                     {background-image: linear-gradient(45deg, var(--color2), var(--color2b));}
.box.color2 h3                                  {color: var(--color1) !important;}
.box.border1                                    {border: solid 0.1em var(--color1);}
      .box.border2                                    {border: solid 0.1em var(--color2);}
.box.gray                                       {background: rgba(0,0,0,0.06);}

.cols                                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap2) 0;}
.cols > *                                       {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: var(--gap0); padding-inline: var(--padding1); position: relative; box-sizing: border-box;}
.cols > *:has(.img)                             {padding-inline: 0;}
.cols.switched.both > *:last-child              {order: -1;}
.cols .img                                      {display: block; width: 100%; overflow: hidden;}
.cols .img img                                  {display: block; width: 100%;}
  @media screen and (min-width: 1081px)         {
  .cols > *                                     {width: 48%;}
  .cols.switched > *:last-child                 {order: -1;}
  }

.stamp                                          {display: block; container-type: inline-size; box-sizing: border-box;}
.stamp .inner                                   {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; line-height: 1.3; padding: 16% 15% 15%; border-radius: 100%; box-shadow: 0 0.15em 0.5em rgba(0,0,0,0.2); box-sizing: border-box; position: absolute; inset: 0;}
.stamp.color1 .inner                            {color: white !important; background-image: linear-gradient(45deg, var(--color1), var(--color1b));}
.stamp.color2 .inner                            {color: var(--color1) !important; background-image: linear-gradient(45deg, var(--color2), var(--color2b));}

.article .image                                 {display: block; width: 100%; padding-top: 56%; position: relative; border-radius: var(--border-radius1) var(--border-radius2); overflow: hidden; transition: .15s ease-in-out;} 
.article .image span                            {display: block; position: absolute; inset: 0; transition: .15s ease-in-out;} 
.article .image span img                        {display: block; width: 100%; height: 100%; object-fit: cover;}
.article .image:hover                           {opacity: 0.8;}
.article :is(h2, h3):not(:first-child)          {margin-top: 0.5em;}
  @media screen and (min-width: 1081px)         {
  .section1                                     {margin-top: calc(0px - 2 * var(--section-padding));}
  .section1 .cols                               {align-items: flex-end; align-content: flex-end;}
  }

.section3 .cols .img                            {border-radius: var(--border-radius1b) var(--border-radius1b) var(--border-radius1a) var(--border-radius1b); box-shadow: 0 0.3em 1em rgba(0,0,0,0.8);}
.section3 .stamp                                {width: 14em; height: 14em; position: absolute; z-index: 2;}
.section3 .stamp .inner                         {font-size: 8.5cqw;}
  @media screen and (min-width: 1081px)         {
  .section3 .cols,                               
  .section3 .cols > *:has(.img)                 {align-items: stretch; align-content: stretch;}              
  .section3 .cols .img                          {height: auto; padding-top: 0;}
  .section3 .cols .img img                      {height: 100%; object-fit: cover; object-fit: right top;}
  .section3 .stamp                              {left: -5%; top: 10%;}
  }
  @media screen and (max-width: 1080px)         {
  .section3 .stamp                              {left: var(--padding1); top: -1%;}
  }
  @media screen and (max-width: 640px)          {
  .section3 .stamp                              {font-size: calc(0.4em + 1vw);}
  }

.section4 .small                                {font-size: 0.85em;}
.section4 .payment                              {display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gap1); margin-block: 0.75em 0.5em;}
.section4 .table                                {display: block;}
.section4 .table > div                          {display: flex; position: relative;}
.section4 .table > div:nth-child(odd):after     {display: block; opacity: 0.6; background: var(--color2b); position: absolute; inset: 0; content: "";}
.section4 .table > div span                     {display: block; width: 8em; padding: 0.35em 0.8em 0.25em; position: relative; z-index: 1; box-sizing: border-box;}
.section4 .table > div span:last-child          {text-align: right; border-left: solid 1px var(--color1b);}
.section4 .stamp                                {width: 9em; height: 9em; position: relative; z-index: 2;}
.section4 .stamp .inner                         {font-size: 11.5cqw;}
  @media screen and (min-width: 541px)          {
  .section4 .stamp                              {margin-top: -2em;}
  }
  @media screen and (max-width: 540px)          {
  .section4 .table > div span                   {width: 6.4em; font-size: 0.85em;}
  .section4 .stamp                              {width: 5.8em; height: 5.8em;}
  }

.form                                           {display: flex; width: 100%; max-width: 50rem; justify-content: center; flex-wrap: wrap; gap: var(--form-gap); --form-gap: 1.2rem;}
.form :is(h1, h2, p)                            {max-width: 46rem; text-align: center;}
.form-items                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; gap: var(--form-gap);}
.form-items .headline                           {display: block; width: 100%; font-size: 1.4em; color: var(--color1); font-variation-settings: "wght" 700; margin-block: 0.3em -0.6em;}
.form-items .checkbox                           {display: block; width: 100%;}
.form-item                                      {display: flex; width: 100%; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; border-bottom: solid 0.1em rgba(0,0,0,0.15); transition: .15s ease-in-out;}
.form-item :is(input, textarea)                 {display: block; width: 100%; height: 3em; background: white; font-size: 1em; color: var(--color1) !important; font-variation-settings: "wght" 600; border: none; border: none; outline: none; padding: 0 0.8em; border-radius: 0.4em; box-sizing: border-box; position: relative; z-index: 2; font-family: var(--font1); transition: .15s ease-in-out;}
.form-item textarea                             {padding-block: 0.9em;}
.form-item:focus-within                         {border-color: var(--color1);}
.form-item label                                {display: block; font-size: 0.9em; font-variation-settings: "wght" 700; color: var(--color2); margin-bottom: 0.35em;}
.form-bottom                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.9em;}
.form-bottom > span                             {display: block; width: 100%; text-align: center; font-size: 0.85em; color: var(--color1b);}
.form-bottom > span a                           {color: inherit; text-decoration: underline; transition: .15s ease-in-out;}
.form-bottom > span a:hover                     {color: var(--color0); text-decoration-color: transparent;}
.form-item:has(textarea)                        {width: 100% !important;}
  @media screen and (min-width: 769px)          {
  .form .form-item                              {width: calc(33.33% - 0.67 * var(--form-gap));}
  .form-item textarea                           {height: 8em !important;}
  }
  @media screen and (max-width: 768px)          {
  .form-item textarea                           {height: 14em !important;}
  }

.form.reg                                       {max-width: 40rem;}
.form .form-item.w66                            {width: calc(66.6% - 0.5 * var(--form-gap));}
.form .form-item.w33                            {width: calc(33.3% - 0.5 * var(--form-gap));}
  @media screen and (min-width: 769px)          {
  .form .form-item.w50                          {width: calc(50% - 0.5 * var(--form-gap));}
  }

.chk1:not(:checked),
.chk1:checked                                   {position: absolute; left: -9999px;}
.chk1:not(:checked) + label,   
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 0.9em; color: var(--color1); font-variation-settings: "wght" 550; line-height: 1.15; padding-inline-start: 1.35em; cursor: pointer; box-sizing: border-box; transition: .15s ease-in-out;}
.chk1:checked + label                           {color: var(--color1); font-variation-settings: "wght" 700;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 0.9em; height: 0.9em; border-radius: 0.2em; position: absolute; left: 0; top: 0.1em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: rgba(0,0,0,0.14);}
.chk1:checked + label:before                    {background: URL('../images/check.svg') no-repeat center center, var(--color2); background-size: 100% 100%;}
.chk1:disabled + label,                  
.chk1:disabled + label:before                   {opacity: 0.4;}

.footer .background                             {border-bottom-right-radius: 0;}
.footer .inner                                  {display: flex; width: 100%; flex-wrap: wrap; gap: var(--gap1) 0; padding-inline: var(--padding1); box-sizing: border-box; position: relative;}
.footer .inner > div                            {display: flex; flex-direction: column; gap: 0.7em; font-size: 0.85em;}
.footer .inner a                                {color: white; transition: .15s ease-in-out;}
.footer .inner a:hover                          {color: var(--color2);}
.footer .inner img                              {display: block; position: absolute;}
.footer .inner ul                               {display: flex; flex-wrap: wrap; gap: 0.4em 0.7em;}
.footer .inner ul li                            {display: block; font-size: 0.8em;}
.footer .inner ul li a                          {color: white; text-decoration: underline; opacity: 0.6; transition: .15s ease-in-out;}
.footer .inner ul li a:hover                    {text-decoration-color: transparent; opacity: 1;}
  @media screen and (min-width: 1081px)         {
  .footer .inner                                {justify-content: space-between;}
  .footer .inner > div:nth-of-type(1)           {width: 30%;}
  .footer .inner > div:nth-of-type(2)           {width: 46%;}
  .footer .inner ul                             {margin-top: 0.8em;}
  .footer .inner img                            {width: 8%; left: 38%; top: calc(0px - 0.5 * var(--section-padding));}
  }
  @media screen and (max-width: 1080px)         {
  .footer .inner                                {padding-right: calc(20% + var(--padding1));}
  .footer .inner img                            {width: 14%; right: var(--padding1); top: 0;}
  .footer .inner ul                             {margin-top: 1.8em;}
  }

      .section:has(.fullbox)                          {min-height: 90vh; margin-block: 5vh; flex-direction: row; align-items: stretch;}   
      .fullbox                                        {display: flex; width: 100%; max-width: 26em; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap1); margin-inline: auto;}
      .fullbox h1                                     {display: block; width: 100%; text-align: center; font-size: 2.8em; font-variation-settings: "wght" 700;}
      .fullbox p                                      {display: block; width: 100%; text-align: center; font-size: 1em; font-variation-settings: "wght" 500; margin-block: -0.5em 1em;}
      .fullbox .img                                   {display: block; width: 15em; height: auto; margin-top: 1em;}
      .fullbox .img img                               {display: block; width: 100%; height: auto;}

      .login .form-items                              {max-width: 20em;}

      .fullbox:has(.account)                          {max-width: 56em;}
      .account                                        {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 1em 0; flex-wrap: wrap; margin-block: 0.6em;}
      .account .box                                   {flex-direction: column; align-items: center; gap: 1em; border-radius: 0.5em 2.5em; position: relative; z-index: 1; overflow: hidden; backdrop-filter: blur(4px);}
      .account .box:after                             {display: block; background: var(--color1b); opacity: 0.55; position: absolute; inset: 0; z-index: -1; content: "";}
      .account .box:nth-child(odd)                    {border-radius: 2.5em 0.5em;}
      .account-info1                                  {display: flex; width: 100%; flex-direction: column; align-items: center; flex-wrap: wrap;}
      .account-info1 img                              {display: block; width: 3em; margin-bottom: 0.6em;}
      .account-info1 span                             {display: block; text-align: center;}
      .account-info1 .name                            {font-size: 1.2em; font-variation-settings: "wght" 700;}
      .account-info2                                  {display: block;}
      .account-info2 span                             {display: block; width: 100%; text-align: center; font-size: 0.85em;}
      .account-info2 .title                           {font-size: 1em; color: var(--color2) !important; font-variation-settings: "wght" 700;}
      .account-info2 .title:not(:first-child)         {margin-top: 1em;}
      .account-note                                   {display: block; width: 100%; text-align: center; font-size: 0.7em; opacity: 0.6; margin-top: 0.6em;}
      .account-headline1, .account-headline2          {display: block; width: 100%; text-align: center; font-size: 2em; font-variation-settings: "wght" 700;}
      .account-headline2                              {font-size: 1.45em; margin-top: 0.65em;}
      .account .contract                              {display: flex; height: 2.6em; align-items: center; gap: 0.3em; font-size: 0.85em; text-decoration: underline; font-variation-settings: "wght" 500; opacity: 0.7; background: rgba(0,0,0,0.6); border-radius: 1.3em; padding: 0 1.2em; margin-top: -0.6em; transition: .15s ease-in-out;}
      .account .contract img                          {display: block; width: 0.75em; position: relative; top: -0.03em;}
      .account .contract:hover                        {text-decoration-color: transparent; opacity: 0.85;}
      .account .payment-change                        {font-size: 0.75em; padding: 0.65em 1em;}
      .account .button2                               {font-size: 0.9em; text-decoration: underline; font-variation-settings: "wght" 600; opacity: 0.7; transition: .15s ease-in-out;}
      .account .button2:hover                         {text-decoration-color: transparent; opacity: 0.85;}
      .account .payments                              {display: flex; width: 100%; flex-direction: column; align-items: center; gap: 0.7em;}
      .account .payments table                        {width: 100%;}
      .account .payments table :is(th, td)            {text-align: left; font-size: 0.8em; padding: 0.8em; border-top: solid 1px rgba(255,255,255,0.25);}
      .account .payments table th                     {padding-top: 0; color: var(--color2) !important; font-variation-settings: "wght" 700; border: none;}
      .account .payments .button2                     {font-size: 0.75em;}
        @media screen and (min-width: 961px)          {
        .account > *                                  {width: 49%;}
        }

      .quick-contacts                                 {display: flex; width: 100%; justify-content: center; align-items: center; gap: 0.25em; flex-wrap: wrap;}
      .quick-contacts a                               {display: flex; height: 2.6em; align-items: center; gap: 0.35em; font-size: 1.15em; font-variation-settings: "wght" 600; background: rgba(0,0,0,0.3); border-radius: 1.3em; padding: 0 1.2em; transition: .15s ease-in-out;}
      .quick-contacts a img                           {display: block; width: 1.1em;}
      .quick-contacts a:hover                         {color: var(--color2) !important;}