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

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



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

html, body, form                                {width: 100%;}
body                                            {min-height: 100vh; margin: 0 auto; background-size: 100% auto; font-family: 'semplicitapro', sans-serif; overflow-x: hidden; position: relative;}
form                                            {display: flex; min-height: 100vh; flex-direction: column; flex-wrap: wrap; position: relative; /*z-index: 2;*/}
  @media screen and (min-width: 2001px)         {
  body                                          {font-size: 20px;}
  }
  @media screen and (max-width: 2000px)         {
  body                                          {font-size: 19px;}
  }
  @media screen and (max-width: 1800px)         {
  body                                          {font-size: 18px;}
  }
  @media screen and (max-width: 1600px)         {
  body                                          {font-size: 17px;}
  }  
  @media screen and (max-width: 1300px)         {
  body                                          {font-size: 16px;}
  }
  @media screen and (max-width: 540px)          {
  body                                          {font-size: 15px;}
  }
  @media screen and (max-width: 380px)          {
  body                                          {font-size: 14px;}
  }

body.fixed                                      {overflow-y: hidden;}

main                                            {display: block; width: 100%; flex-grow: 1;}

.wrapper                                        {display: flex; width: calc(100% - 4em); max-width: 70rem; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 3;}

:root                                           {
                                                --color0:  #252525;
                                                --color1:  #0a101a;
                                                --color2:  #9fbcdd;
                                                --color3:  #eeb223;
                                                --color3b: #c89112;
                                                --color4:  rgba(0,0,0,0.06);
                                                --color5:  #104b91;

                                                --gap:      min(5rem, calc(2rem + 5vw));
                                                }


.form a         { color:Black !important; text-decoration:underline !important; }

.header                                         {display: block; width: 100%; position: fixed; left: 0; top: 0; z-index: 1000; backdrop-filter: blur(10px); transition: .15s ease-in-out;}
.header:before                                  {display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.9); opacity: 0; position: absolute; left: 0; top: 0; z-index: -1; content: ""; transition: .15s ease-in-out;}
.header.scroll:before                           {opacity: 1;}
.header .wrapper                                {height: 100%; border-bottom: solid 1px rgba(0,0,0,0.2);}
.header .logo                                   {display: flex; height: 100%; align-items: center; position: absolute; top: 0; z-index: 2; transition: .15s ease-in-out;}
.header .logo img                               {display: block; width: 100%; height: auto;}
.header nav                                     {display: flex; width: 100%; height: 100%; justify-content: space-between; align-items: center;}
.header nav > div a                             {display: flex; justify-content: center; align-items: center; font-size: 1em; color: #999999; font-weight: 700; box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.header nav > div a:hover                       {color: var(--color3);}
.header nav > div a.sel                         {color: var(--color0);}
  @media screen and (min-width: 1081px)         {
  .header                                       {height: 6rem;}
  .header .logo                                 {width: 16rem; left: calc(50% - 8rem);}
  .header .mobile-only                          {display: none;}
  .header nav > div                             {display: flex; height: 100%;}
  .header nav > div:nth-child(1)                {gap: 2.9rem;}
  .header nav > div:nth-child(2)                {gap: 3.4rem;}
  .header nav > div a                           {height: 100%; flex-grow: 1;}
  .header nav > div a:after                     {display: block; width: 100%; height: 2px; background: var(--color3); opacity: 0; position: absolute; left: 0; bottom: -1px; content: ""; transition: .15s ease-in-out;}
  .header nav > div a.sel:after                 {opacity: 1;}
  .header.scroll                                {height: 5em;}
  }
  @media screen and (max-width: 1080px)         {
  .header                                       {height: 5em;}
  .header .desktop-only                         {display: none;}
  .header .logo                                 {width: 14em; left: calc(50% - 7em);}
  .header nav a.home                            {display: block; width: 1.3em; height: 1.3em; position: relative; z-index: 1000;}
  .header nav a.home svg                        {display: block; width: 100%; height: 100%; fill: var(--color0); transition: .15s ease-in-out;}
  .header nav a.home:hover svg                  {fill: var(--color3);}
  .header #navicon                              {display: block; width: 1.3em; height: 18px; font-size: 1.1em; cursor: pointer; position: relative; z-index: 10002;}
  .header #navicon span                         {display: block; width: 100%; height: 2px; background: var(--color0); position: absolute; left: 0; z-index: 50; transition: .2s ease-in-out;}
  .header #navicon:hover span                   {color: var(--color3);}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 1px);}
  .header #navicon span:nth-child(4)            {bottom: 0;}
  .header #navicon div                          {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
  .header.show #navicon span:nth-child(2)       {transform: rotate(45deg);}
  .header.show #navicon span:nth-child(3)       {transform: rotate(-45deg);}
  .header.show #navicon span:nth-child(1), 
  .header.show #navicon span:nth-child(4)       {opacity: 0 !important;}
  .header.show #navicon div                     {display: block;}
  .header .collapse                             {display: flex; width: 100%; height: 100vh; background-color: transparent; padding: 7em 2em 2em; box-sizing: border-box; position: fixed; left: -99999px; top: 0; transition: background-color .4s ease-in-out;}
  .header .collapse ul                          {display: block; width: 100%; position: relative; opacity: 0; top: 4em; transition: .4s ease-in-out;} 
  .header .collapse ul li                       {display: flex; width: 100%; justify-content: center; text-align: center; font-size: 1.2em; margin-top: 1em;} 
  .header .collapse ul li:first-child           {margin: 0;}
  .header .collapse ul li a                     {font-size: 1em; color: var(--color0); font-weight: 700; text-decoration: none; transition: .15s ease-in-out;}
  .header .collapse ul li a.sel,
  .header .collapse ul li a:hover               {color: var(--color3);}
  .header.show .collapse                        {background-color: rgba(255,255,255,0.9); left: 0;}
  .header.show .collapse ul                     {opacity: 1; top: 0;}
  .header.show.hide .collapse                   {background-color: transparent;}
  .header.show.hide .collapse ul                {opacity: 0; top: 4em;}
  }

.section                                        {display: flex; width: 100%; align-items: center; flex-wrap: wrap; position: relative; padding: var(--gap) 0; box-sizing: border-box; overflow: hidden;}
.section.gray                                   {background: var(--color4);}
.section.dark                                   {background: var(--color1);}
.section.dark h2                                {color: var(--color3);}
.section.dark h2 span:before,
.section.dark h2 span:after                     {color: var(--color2);}
.section.dark :is(p, li, p a, li a)             {color: white;}
.section.pattern                                {background-image: URL("images/pattern.svg"); background-repeat: repeat; background-size: 14em auto;}

.section .wrapper > p                           {max-width: 46rem;}

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

.button                                         {display: flex; height: 3em; justify-content: center; align-items: center; gap: 0.5em; font-size: 1em; font-weight: 700; color: white; padding: 0 1.5em; border: none; outline: none; border-radius: 1.5em; box-sizing: border-box; white-space: nowrap; cursor: pointer; font-family: 'Open Sans', sans-serif; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.button svg                                     {display: block; height: 0.8em; fill: white;}
.button.color3                                  {background: var(--color3);}
.button.color3:hover                            {background: var(--color3b);}

p                                               {display: block; width: 100%; text-align: center; font-size: 1.1em; line-height: 1.35em; color: var(--color0); font-weight: 400;}
p strong, li strong                             {font-weight: 700;;}
p a, li a                                       {color: var(--color0); text-decoration: underline; transition: .15s ease-in-out;}
p a:hover, li a:hover                           {color: var(--color3) !important; text-decoration-color: transparent;}
h1, h2, h3                                      {display: block; width: 100%; text-align: center; font-weight: 400; line-height: 1em; color: var(--color1);}
h2                                              {font-size: min(2.5rem, calc(1.2rem + 2vw)); margin-bottom: 0.8rem;}
h2 span                                         {display: inline-block;}
h2 span:before, h2 span:after                   {position: relative; color: var(--color3); top: -0.1em; margin: 0 0.35em; content: "/";}
h3                                              {font-size: min(1.8rem, calc(0.9rem + 2vw)); margin-bottom: 1em;}

.paragraphs                                     {display: flex; width: 100%; height: 100vh; min-height: 44rem; max-height: 54rem; opacity: 0.6; position: fixed; left: 0; top: 0;}
.paragraphs > span                              {display: block; width: 50%; height: 100%; background-size: min(100%,28rem) auto; background-repeat: no-repeat;}
.paragraphs > span:nth-child(1)                 {background-image: URL("images/paragraphs2.jpg"); background-position: left bottom;}
.paragraphs > span:nth-child(2)                 {background-image: URL("images/paragraphs1.jpg"); background-position: right top;}

.anim                                           {opacity: 0; transform: translate(0, 3em); transition: 0.6s ease-in-out; transition-delay: 0.35s;}
.anim.zoom                                      {transform: translate(0) scale(0.6);}
.anim.from-bottom                               {transform: translate(0, 3em);}
.anim.play                                      {opacity: 1; transform: translate(0) scale(1) !important;}
  @media screen and (min-width: 1081px)         {
  .anim.from-left                               {transform: translate(-3em, 0);}
  .anim.from-right                              {transform: translate(3em, 0);}
  }

.hero                                           {min-height: 44rem;}
.hero .wrapper                                  {justify-content: space-between; align-items: center; margin-top: min(4rem, calc(2rem + 5vw));}
.hero .wrapper > div                            {display: flex; flex-wrap: wrap; position: relative;}
.hero h1                                        {font-size: min(3.4rem, calc(2rem + 2vw)); line-height: 1.4em;}
.hero h1 span                                   {display: block; font-size: 0.4em; line-height: 1.3em; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 0.15em;}
.hero p                                         {display: inline-block; font-size: min(1.8rem, calc(0.8rem + 2vw)); color: var(--color2); padding-top: 1rem; margin-top: 1.2rem; position: relative;}
.hero p:before                                  {display: block; background: var(--color2); position: absolute; top: 0; content: "";}
.hero .flex                                     {margin-top: 1.5rem;}
.hero picture                                   {display: flex; width: 100%; justify-content: center; position: relative;}
.hero picture img                               {display: block; width: 100%;}
.hero picture:before                            {display: block; width: 100%; padding-top: 100%; border-radius: 100%; background: var(--color3); position: absolute; right: -2%; bottom: 2%; z-index: -1; content: "";}
.hero .hero-contacts li                         {display: flex; align-items: center;}
.hero .hero-contacts li a                       {display: flex; height: 100%; align-items: center; gap: 0.4em; font-size: 1.2em; font-weight: 500; color: var(--color0); text-decoration: none; white-space: nowrap; transition: .15s ease-in-out;}
.hero .hero-contacts li a svg                   {display: block; width: 1em; height: auto; fill: var(--color3);}
.hero .hero-contacts li a:hover                 {color: var(--color2);}
  @media screen and (min-width: 1081px)         {
  .hero                                         {height: 100vh; max-height: 54rem;}
  .hero .left                                   {width: 55%;}
  .hero .right                                  {width: 40%;}
  .hero :is(h1, p)                              {text-align: left;}
  .hero h1 span                                 {margin-left: 0.15em;}
  .hero p                                       {width: auto;}
  .hero p:before                                {width: 40rem; height: 4px; right: 0;}
  .hero .flex                                   {justify-content: flex-start;}
  .hero .hero-contacts                          {display: block; position: absolute; left: 12em; bottom: 2em; transform: skew(-25deg);}
  .hero .hero-contacts li                       {display: block; padding: 0.4em 0.9em; background: white; margin-top: 0.2em;}
  .hero .hero-contacts li a                     {font-size: 0.95em; transform: skew(25deg);}
  }
  @media screen and (min-width: 1601px)         {
  .hero p:before                                {width: calc(100% + 3rem);}
  }  
  @media screen and (max-width: 1080px)         {
  .hero .left                                   {margin-bottom: 1.5rem;}
  .hero p:before                                {width: 8rem; height: 3px; left: calc(50% - 4rem);}
  .hero picture                                 {max-width: 26rem; margin-inline: auto;}
  .hero .hero-contacts                          {display: flex; width: 100%; max-width: 40rem; justify-content: center; flex-wrap: wrap; gap: 0.6em 1.2em; margin: 2rem auto 0;}
  }

.about                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 3rem;}
.about > div                                    {display: flex; width: 100%; justify-content: center; align-items: flex-start;; flex-wrap: wrap; gap: 1em 3em;}
.about > div h3                                 {position: relative; color: var(--color2); box-sizing: border-box;}
.about > div h3 svg                             {display: block; width: 1.2em; height: 1.2em; fill: var(--color3); position: absolute;}
.about > div h3 span                            {display: inline-block; position: relative; padding-bottom: 0.5em;}
.about > div h3 span:before                     {display: block; height: 2px; background: var(--color2); position: absolute; bottom: 0; content: "";}
.about > div p                                  {flex-basis: 30rem; flex-grow: 1;}
  @media screen and (min-width: 1081px)         {
  .about > div h3                               {width: 14rem;}
  .about > div h3 svg                           {top: -0.05em;}
  .about > div h3 span:before                   {width: calc(100% + 5rem);}
  .about > div:nth-child(odd) h3                {text-align: left;}
  .about > div:nth-child(even) h3               {order: 1; text-align: right;}
  .about > div:nth-child(even) p                {order: 0;}
  .about > div:nth-child(odd) h3                {padding-left: 1.7em;}
  .about > div:nth-child(odd) h3 svg            {left: 0;}
  .about > div:nth-child(even) h3               {padding-right: 1.7em;}
  .about > div:nth-child(even) h3 svg           {right: 0;}
  .about > div:nth-child(odd) h3 span:before    {right: 0;}
  .about > div:nth-child(even) h3 span:before   {left: 0;}
  .about > div:nth-child(odd) p                 {text-align: left;}
  .about > div:nth-child(even) p                {text-align: right;}
  }
  @media screen and (max-width: 1080px)         {
  .about > div h3                               {padding-top: 1.6em; margin-bottom: 0.4rem;}
  .about > div h3 svg                           {left: calc(50% - 0.6em); top: 0;}
  .about > div h3 span:before                   {width: 6rem; left: calc(50% - 3rem);}
  }

#o-mne                                          {overflow: visible;}

.special-box                                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;  gap: 0.8rem; background: URL("images/special-box.jpg") no-repeat center center; background-size: cover; margin-block: 2rem calc(0px - var(--gap) - 10rem); padding: max(2.5rem, 6%) max(3rem, 10%); box-sizing: border-box; box-shadow: 0 0.5em 0.5em rgba(0,0,0,0.2);}
.special-box h3                                 {font-weight: 700; margin: 0 0 0.3rem;}
.special-box p                                  {color: var(--color0) !important;}
.special-box svg                                {display: block; width: 2.4em; height: 2.4em; fill: var(--color5);}  

#zkusenosti h2                                  {margin-top: 10rem;}

.exp                                            {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem;}
.exp > div                                      {flex-basis: 26rem;}
.exp > div img                                  {display: block; width: 100%;}
.exp > ol                                       {display: flex; flex-wrap: wrap; gap: 1.4em; flex-basis: 30rem; flex-grow: 1; padding: 0;}
.exp > ol li                                    {display: block; width: 100%; box-sizing: border-box; position: relative; counter-increment: li;} 
.exp > ol li:before                             {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; text-align: center; font-size: 1em; font-weight: 700; color: white; background: var(--color3); border-radius: 100%; position: absolute; z-index: 1; content: counter(li);}
  @media screen and (min-width: 60rem)          {
  .exp > ol li                                  {padding-left: 2.6em;}
  .exp > ol li:before                           {left: 0; top: -0.28em;}
  }
  @media screen and (max-width: 60rem)          {
  .exp > ol li                                  {text-align: center; padding-top: 2.6em;}
  .exp > ol li:before                           {left: calc(50% - 1em); top: 0;}
  }

.meeting                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem; padding: 0;}
.meeting li                                     {display: block; width: 100%; box-sizing: border-box; position: relative; counter-increment: li;} 
.meeting li:nth-child(odd)                      {padding-left: calc(50% + 2.4em);}
.meeting li:nth-child(even)                     {padding-right: calc(50% + 2.4em); text-align: right}
.meeting li:before                              {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; text-align: center; font-size: 1.1em; font-weight: 700; color: var(--color1); background: var(--color2); border-radius: 100%; position: absolute; left: calc(50% - 1em); top: -0.22em; z-index: 1; content: counter(li);}
.meeting li:after                               {display: block; width: 4px; height: 100%; background: var(--color2); position: absolute; left: calc(50% - 2px); top: 2em; content: "";}
.meeting li:last-child::after                   {display: none;}
  @media screen and (max-width: 640px)          {
  .meeting                                      {font-size: 0.9em;}
  }

.services                                       {display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.5rem 3rem;}
.services > div                                 {display: flex; max-width: 100%; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; gap: 1rem;}
.services > div svg                             {display: block; width: 4em; height: 4em; fill: var(--color5);}
.services > div h3                              {font-size: 1.3rem; font-weight: 700; margin: 0 0 -0.3rem;}
  @media screen and (min-width: 641px)          {
  .services > div p                             {font-size: 0.95em;}
  .services > div .button                       {font-size: 0.8em;}
  }

.meeting                                        {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem; padding: 0;}
.meeting li                                     {display: block; width: 100%; box-sizing: border-box; position: relative; counter-increment: li;} 
.meeting li:nth-child(odd)                      {padding-left: calc(50% + 2.4em);}
.meeting li:nth-child(even)                     {padding-right: calc(50% + 2.4em); text-align: right}
.meeting li:before                              {display: flex; width: 2em; height: 2em; justify-content: center; align-items: center; text-align: center; font-size: 1.1em; font-weight: 700; color: var(--color1); background: var(--color2); border-radius: 100%; position: absolute; left: calc(50% - 1em); top: -0.22em; z-index: 1; content: counter(li);}
.meeting li:after                               {display: block; width: 4px; height: 100%; background: var(--color2); position: absolute; left: calc(50% - 2px); top: 2em; content: "";}
.meeting li:last-child::after                   {display: none;}
  @media screen and (max-width: 640px)          {
  .meeting                                      {font-size: 0.9em;}
  }

.pricelist                                      {display: flex; width: 100%; flex-wrap: wrap; gap: 2rem;}
.pricelist > div                                {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8rem; background: var(--color4); padding: calc(1rem + max(2.5rem, 6%)) max(3rem, 10%) max(2.5rem, 6%); margin-top: 1.8em; box-sizing: border-box; position: relative; box-shadow: 0 0.5em 0.5em rgba(0,0,0,0.2);}
.pricelist > div h3                             {font-weight: 700; margin: 0 0 0.3rem;}
.pricelist > div h3 span                        {display: block; width: 100%; font-size: 0.75em; font-weight: 400; margin-top: 0.3em;}
.pricelist > div .icon                          {display: block; width: 3.6em; height: 3.6em; background: var(--color5); padding: 0.5em; border: solid 0.35em white; border-radius: 100%; box-sizing: border-box; position: absolute; left: calc(50% - 1.8em); top: -1.8em;}  
.pricelist > div .icon svg                      {display: block; width: 100%; height: 100%; fill: white;}  
.pricelist > div ol                             {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 1.5rem 2rem; padding: 0;}
.pricelist > div ol li                          {display: block; box-sizing: border-box; position: relative; box-sizing: border-box; counter-increment: li;} 
.pricelist > div ol li:before                   {display: block; font-size: 1.6em; font-weight: 400; color: var(--color5); position: absolute; z-index: 1; content: counter(li);}
  @media screen and (min-width: 769px)          {
  .pricelist > div ol li                        {width: calc(50% - 1rem); padding-left: 1.5em;}
  .pricelist > div ol li:before                 {left: 0; top: -0.1em;}
  }
  @media screen and (max-width: 768px)          {
  .pricelist > div ol li                        {text-align: center; padding-top: 2.2em;}
  .pricelist > div ol li:before                 {width: 2em; text-align: center; font-weight: 700; left: calc(50% - 1em); top: 0;}
  }

.footer                                         {padding-bottom: 0;}
.footer:after                                   {display: block; background: URL("images/kontakt.webp") no-repeat center top, var(--color1); background-size: min(100em, calc(100% + 20em)) auto; position: absolute; inset: 0; z-index: 1; content: "";}
.footer .footer-contacts                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.8em 1.2em;}
.footer .footer-contacts li                     {display: flex; align-items: center;}
.footer .footer-contacts li a                   {display: flex; height: 100%; align-items: center; gap: 0.4em; font-size: 1.2em; font-weight: 500; color: white; text-decoration: none; transition: .15s ease-in-out;}
.footer .footer-contacts li a svg               {display: block; width: 1em; height: auto; fill: var(--color3);}
.footer .footer-contacts li a:hover             {color: var(--color2);}
.footer .note                                   {width: 20em; font-style: italic; padding: 2em 0; position: relative;}
.footer .note:before                            {display: block; width: 80rem; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 50%, transparent 100%); position: absolute; left: calc(50% - 40rem); top: 0; z-index: -1; content: "";}
.footer .info                                   {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 0.3em 0.5em;}
.footer .info li                                {color: white;}
.footer .info li strong                         {color: var(--color3); font-weight: 700;}

.form                                           {display: flex; width: 100%; justify-content: space-between; row-gap: 0.6rem; flex-wrap: wrap; background: white; padding: 6% 8%; margin: 1.5rem 0 4rem; border-radius: var(--border-radius); box-sizing: border-box;}
.form h3                                        {font-weight: 700;}
.form .form-item                                {display: block; position: relative;}
.form .form-item:nth-of-type(4),
.form .form-item:nth-of-type(5)                 {width: 100%;}
.form .form-item input,
.form .form-item textarea                       {display: block; width: 100%; font-size: 0.9em; font-weight: 700; color: var(--color0); background: var(--color4); border: none; outline: solid 2px transparent; padding: 1.4em; border-radius: var(--border-radius); box-sizing: border-box; font-family: 'proxima-nova', sans-serif; transition: .2s ease-in-out;}
.form .form-item textarea                       {height: 15em;}
.form .form-item input:focus,
.form .form-item textarea:focus                 {outline-color: var(--color2);}
.form .form-item input::placeholder             {color: #999999; opacity: 1; font-weight: 500;}
.form .form-item textarea::placeholder          {color: #999999; opacity: 1; font-weight: 500;}
.form .flex                                     {justify-content: center;}  
.form p                                         {width: 100%; text-align: center; color: var(--color0) !important; font-size: 0.9em; margin: 0.8rem auto; opacity: 0.8;}
.form p a                                       {color: var(--color0);}
.form p a:hover                                 {color: var(--color3);} 
  @media screen and (min-width: 769px)          {
  .form .form-item                              {width: calc(33.33% - 0.4rem);}
  }
  @media screen and (max-width: 768px)          {
  .form .form-item                              {width: 100%;}
  }

.footer .map                                    {display: block; width: 100%; height: 25rem; position: relative; z-index: 2;}
.footer .copyright                              {display: block; width: 100%; height: auto; text-align: center; font-size: 0.75em; font-weight: 700; color: var(--color0) !important; background: white; padding: 1.4em; box-sizing: border-box; position: relative; z-index: 2;}
.footer .copyright a                            {color: var(--color0) !important; transition: .2s ease-in-out;}
.footer .copyright a:hover                      {color: var(--color3) !important;}

.article                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; gap: 2rem;}
.article .headline                              {display: block; width: 100%; text-align: center; font-size: min(2.8rem, calc(1rem + 5vw)); font-weight: 400; color: var(--color1); margin-top: min(5rem, calc(3rem + 5vw));}
.article .headline span                         {display: inline-block;}
.article .headline span:before,
.article .headline span:after                   {position: relative; color: var(--color3); top: -0.1em; margin: 0 0.35em; content: "/";}
.article .img                                   {display: block; width: 70%; padding-top: 35%; position: relative; overflow: hidden;}
.article .img span                              {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.article .img span img                          {display: block; width: 100%; max-height: 100%; object-fit: cover;}
.article :is(h2, h3, ul)                        {max-width: 44rem;}
.article h2                                     {font-size: min(1.8rem, calc(1rem + 2vw)); line-height: 1.4em; margin-bottom: 0; padding-top: 2rem; position: relative;}
.article h2:before                              {display: block; width: 8rem; height: 3px; background: var(--color2); position: absolute; left: calc(50% - 4rem); top: 0; content: "";}
.article h3                                     {font-size: min(1.25rem, calc(1rem + 0.5vw)); color: var(--color5); font-weight: 700; line-height: 1.4em; margin-bottom: -1.7rem;}
.article p                                      {max-width: 52rem;}
.article ul                                     {display: block; width: 100%; }
.article ul li                                  {display: inline-block; width: 100%;  padding-left: 1.3em; position: relative; box-sizing: border-box;}
.article ul li:before                           {display: block; width: 0.8em; height: 3px; background-color: var(--color3); position: absolute; left: 0; top: 0.7em; content: "";}
  @media screen and (min-width: 769px)          {
  .article ul                                   {column-count: 2; column-gap: 1.5em;}
  }