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

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


:root                                           {
                                                --font1:          '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("/medirecoprime/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.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;}
  }

      .box:has(ul.benefits)                           {flex-wrap: wrap;}
      .box:has(ul.benefits) h2                        {text-align: center;}
      .box ul.benefits                                {display: block; width: 100%; margin-block: var(--gap1);}
        @media screen and (min-width: 769px)          {
        .box ul.benefits                              {column-count: 2; column-gap: 5%;}
        }
        
.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); 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('/medirecoprime/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(.sent)                             {min-height: 90vh; margin-block: 5vh; flex-direction: row; align-items: stretch;}   
.section:has(.sent) {}  
.sent                                           {display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap1);}
.sent h1                                        {display: block; width: 100%; text-align: center; font-size: 2.8em; font-variation-settings: "wght" 700;}
.sent p                                         {display: block; width: 100%; text-align: center; font-size: 1em; font-variation-settings: "wght" 500; margin-block: -0.5em 1em;}
.sent .img                                      {display: block; width: 15em; height: auto; margin-top: 1em;}
.sent .img img                                  {display: block; width: 100%; height: auto;}




input[type="text"].disabled,
input[type="date"].disabled,
input[type="email"].disabled,
input[type="tel"].disabled,
input[type="number"].disabled,
textarea.disabled {
    background-color: #f0f0f0;
    color: #a0a0a0;
    border: 1px solid #d0d0d0;
    cursor: not-allowed;
    opacity: 0.7;
}

.formular-select {
  height: 52px;
  padding: 0 12px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 1em;
  color: #333333;
  appearance: menulist;
  display:block;
  width:100%;
}


#loader { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; justify-content: center; align-items: center; }
#loader .loader-obsah { text-align: center; color: white; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:-30px; }
#loader .kruh { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: toceni 1s linear infinite; margin: 0 auto 20px auto; }
@keyframes toceni  
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}