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

/*------------------------------------------------------*/
html, body, form                                {width: 100%;}
body                                            {margin: 0 auto; background: #ededed; color: #252525; box-sizing: border-box; font-family: 'Montserrat', sans-serif; overflow-y: auto; overflow-x: hidden; position: relative;}
.flex-area                                      {display: flex; min-height: calc(100vh - 5em); flex-direction: column; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap;}
.wrapper                                        {display: flex; width: 100%; flex-wrap: wrap; align-content: space-between; flex-grow: 2; background: #ededed; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 1;}
.content                                        {display: block; width: 100%; position: relative; box-sizing: border-box;}
  @media screen and (min-width: 1080px)         {
  .wrapper                                      {max-width: 960px;}
  .content                                      {padding: 0 1.4rem;}
  }
  @media screen and (max-width: 1080px)         {
  .content                                      {padding: 0 calc(0.8rem + 5%) 1.4rem;}
  }
  @media screen and (max-width: 768px)          {
  body                                          {font-size: 16px;}
  }
  @media screen and (max-width: 540px)          {
  body                                          {font-size: 15px;}
  .content                                      {padding: 0 0.6rem 1.4rem;}
  }
  @media screen and (max-width: 440px)          {
  body                                          {font-size: 14px;}
  }

body .content:after                             {display: block; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); position: fixed; left: -101vw; top: 0; z-index: 500; content: ""; transition: opacity .15s ease-in-out;}
body.fixed                                      {overflow-y: hidden;}
body.fixed .content:after                       {left: 0; opacity: 1;}

::selection                                     {background: var(--color2); color: white;}

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

:root                                           {
                                                --color1:       #2e4553;
                                                --color1b:      #112430;
                                                --color2:       #84c143;
                                                --color2b:      #689e2e;
                                                --color-red:    #ca401e;
                                                --color-yellow: #c9b024;
                                                --border-radius:  0.4em;
                                                --margin-top:     1.4em;
                                                }

.header                                             {display: block; width: 100%; background: white; position: relative; z-index: 1000; box-sizing: border-box;}
.header:before                                      {display: block; width: 100vw; height: 100%; background: white; position: absolute; left: calc(50% - 50vw); top: 0; z-index: -1; content: "";}
.header > div                                       {display: block; width: 100%; height: 5rem;}
.header > div .wrapper                              {height: 100%; justify-content: space-between; align-items: center; background: white;}
.header > div .logo                                 {display: flex; width: 13em; height: 100%; align-items: center; position: relative; z-index: 2;}
.header > div .logo img                             {display: block; width: 100%;}
.header > div .collapse                             {display: flex; align-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
.header > div .search                               {display: block; width: 18em; height: 2.6em; position: relative; border-radius: var(--border-radius); overflow: hidden;}
.header > div .search > form > input                         {display: block; width: 100%; height: 100%; font-size: 0.9em; font-weight: 500; background: rgba(0,0,0,0.08); padding: 0 3.3em 0 0.8em; box-sizing: border-box; border: solid 3px transparent; border-radius: var(--border-radius); outline: none; font-family: 'Montserrat', sans-serif; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.header > div .search input::placeholder            {color: #999999; opacity: 1;}
.header > div .search input:-ms-input-placeholder   {color: #999999;}
.header > div .search input::-ms-input-placeholder  {color: #999999;}
.header > div .search input:focus                   {background: white; border-color: var(--color1);}
.header > div .search button                        {display: block; width: 2.6em; height: 2.6em; font-size: 1em; background: URL('../images/button-search.svg') no-repeat center center, var(--color2); background-size: 35% 35%; outline: none; border: none; cursor: pointer; position: absolute; right: 0; top: 0; transition: .15s ease-in-out;}
.header > div .search button:hover                  {background-color: var(--color2b);}
.header .account-tab                                {display: flex; height: 100%; align-items: center;}
.header .account-tab .info                          {display: flex; align-items: center;}
.header .account-tab .info .img                     {display: block; width: 2.2em; height: 2.2em; border-radius: 100%; overflow: hidden; position: relative;}
.header .account-tab .info .img img                 {display: block; width: 100%;}
.header .account-tab .info .img:after               {display: block; width: 100%; height: 100%; background: white; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; content: ""; transition: .15s ease-in-out;}
.header .account-tab .info .img:hover:after         {opacity: 0.2;}
.header .account-tab .account                       {display: block; margin-left: 0.6em;}
.header .account-tab .account .name                 {display: block; font-size: 0.85em; color: var(--color1); font-weight: 700; margin-top: -0.1em;}
.header .account-tab .account .name a               {color: var(--color1); transition: .15s ease-in-out;}
.header .account-tab .account .name a:hover         {color: var(--color1b);}
.header .account-tab .account > div                 {display: flex; align-items: center; margin-top: 0.1em;}
.header .account-tab .account > div .credits        {display: block; font-size: 0.65em; color: white; font-weight: 600; background: #de8d00; padding: 0.2em 0.4em; margin: 0 0.6em 0 0.05em; border-radius: var(--border-radius);}
.credits a {
  color: white;
}
.header .account-tab .account > div a               {display: block; font-size: 0.75em; color: var(--color1); font-weight: 500; text-decoration: underline; transition: .15s ease-in-out;}
.header .account-tab .account > div a:hover         {color: var(--color1b); text-decoration-color: transparent;}
.header .account-tab .buttons {
  height: 2.6em;
  align-items: center;
  font-size: 0.8em;
  background: rgba(0, 0, 0, 0.07);
  padding: 0.8em 1em;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-right: 0.3em;
}
.header .account-tab .buttons .bt-reg               {display: flex; align-items: center; color: var(--color1); font-weight: 600; text-decoration: underline; opacity: 0.7; margin-left: 1em; transition: .15s ease-in-out;}
.header .account-tab .buttons .bt-reg:hover         {opacity: 1; text-decoration-color: transparent;}
.header .account-tab.logged .account                {display: block;}
.header .account-tab.logged .buttons                {display: none;}
.header .account-tab.not-logged .account            {display: none;}
.header .account-tab.not-logged .buttons            {display: flex;}
.header nav                                         {display: block; background: var(--color1); box-sizing: border-box;}
.header nav .wrapper                                {background: none;}
.header nav .wrapper ul                             {display: flex; width: 100%; flex-wrap: wrap;}
.header nav .wrapper ul li                          {display: flex; box-sizing: border-box;}
.header nav .wrapper ul li a                        {display: flex; align-items: center; color: white; font-weight: 600; opacity: 0.7; box-sizing: border-box; transition: .15s ease-in-out;}
.header nav .wrapper ul li a:hover                  {opacity: 1; background: var(--color1b);}
.header nav .wrapper ul li a.sel                    {opacity: 1; background: var(--color2); color: white; font-weight: 700; border: none;}
  @media screen and (min-width: 1081px)             {
  .header                                           {width: calc(100% + 2.8rem); height: 8em; margin: 0 -1.4rem; padding: 0 1.4rem; overflow-x: hidden /* Kvuli tooltipu */;}
  .header #navicon                                  {display: none;}
  .header > div .search                             {margin-right: 1.8rem;}
  .header .account-tab .buttons                     {height: 3.4rem; margin: -0.2rem 0;}
  .header nav                                       {width: calc(100% + 2.8rem); margin: 0 -1.4rem; height: 3em; background: var(--color1);}
  .header nav .wrapper                              {height: 100%;}
  .header nav .wrapper ul                           {height: 100%; align-items: center; justify-content: center;}
  .header nav .wrapper ul li                        {height: 100%; flex-grow: 1;}
  .header nav .wrapper ul li a                      {height: 100%; justify-content: center; flex-grow: 1; font-size: 0.85em; border-right: solid 1px rgba(0,0,0,0.3);}
  .header nav .wrapper ul li:first-child a          {border-left: solid 1px rgba(0,0,0,0.3);}
  }
  @media screen and (max-width: 1080px)             {
  .header                                           {height: 5rem;}
  .header > div .wrapper                            {padding-left: 2.2em;}
  .header #navicon                                  {display: block; width: 1.4em; height: 18px; cursor: pointer; position: absolute; left: 4px; top: calc(2.6rem - 9px); z-index: 10002;}
  .header #navicon span                             {display: block; width: 100%; height: 3px; background: var(--color1); position: absolute; left: 0; z-index: 1; transition: .2s ease-in-out;}
  .header #navicon:hover span                       {color: white;}
  .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.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>div .logo {
    width: 11em;
    left: 0.3em;
  }
  .header > div .collapse                           {width: 20rem; height: 7.6rem; font-size: 0.9em; padding: 0 1.5rem; background: #f2f2f2; position: absolute; top: 5rem; left: -25rem; transition: .4s ease-in-out;}
  .header > div .search                             {width: 100%; margin-bottom: 0.55em;}
  .header > div .bt-videokurzy                      {width: 100%;}
  .header nav                                       {display: block; width: 20rem; height: calc(100vh - 11.6rem); position: absolute; left: -25rem; top: 12.6rem; transition: .4s ease-in-out;}
  .header nav .wrapper ul                           {height: auto;}
  .header nav .wrapper ul li                        {width: 100%;}
  .header nav .wrapper ul li a                      {width: 100%; padding: 1rem 1.5rem; border-top: solid 1px rgba(0,0,0,0.6);}
  .header nav .wrapper ul li:first-child a          {border-top: none;}
  /* .header.show .collapse, .header.show nav          {left: calc(-1.4rem - 5%);} */
  /* U tabletu */
   .header.show .collapse,
   .header.show nav {
     left: -60px;
   }
  }
  /*  u mobilu je to menu menší */
    @media screen and (max-width: 541px) {
       .header.show .collapse,
       .header.show nav {
         left: -20px;
       }

    }
  @media screen and (min-width: 541px) and (max-width: 1080px){
  .header .account-tab .buttons                     {height: 3.4rem; margin: -0.2rem 0;}
  }
  @media screen and (max-width: 540px)              {
  .header .account-tab .info                        {font-size: 0.95em;}
  .header .account-tab .buttons                     {background: none; padding: 0;}
  }
  @media screen and (min-width: 441px)              {
  .header .account-tab.not-logged .info .img        {display: none;}
  }
  /* @media screen and (max-width: 440px)              { // fix pro supermalé mobily ale tech uz moc není co mají width mene nez 360 px
  .header .account-tab .info > div                  {display: none !important;}
  } */

.footer                                             {display: block; width: 100%; background: var(--color1); position: relative; margin-top: var(--margin-top); flex-grow: 0;}
.footer > *                                         {padding: 1.5em; box-sizing: border-box;}
.footer .upper                                      {display: flex; width: 100%; flex-wrap: wrap;}
.footer .upper nav                                  {display: block;}
.footer .upper nav ul                               {display: flex; width: 100%; flex-wrap: wrap;}
.footer .upper nav ul li                            {display: block; margin-top: 0.2em;}
.footer .upper nav ul li a                          {display: inline-block; color: #d0dde4; font-weight: 600; transition: .15s ease-in-out;}
.footer .upper nav ul li a:hover                    {color: white;}
.footer .upper .note                                {display: block; font-size: 0.8em; color: #d0dde4; line-height: 1.5em; font-weight: 500;}
.footer .upper .note a                              {color: #d0dde4; font-weight: 600; text-decoration: underline; transition: .15s ease-in-out;}
.footer .upper .note a:hover                        {color: white; text-decoration-color: transparent;}
.footer .upper .webs                                {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}
.footer .upper .webs li                             {display: flex; width: 20em; align-items: center; margin-top: 0.5em;}
.footer .upper .webs li img                         {display: block; width: 1.1em; margin-right: 0.35em; border-radius: 100%; overflow: hidden;}
.footer .upper .webs li a                           {font-size: 0.8em; color: #d0dde4; font-weight: 600; transition: .15s ease-in-out;}
.footer .upper .webs li a:hover                     {color: white;}
.footer .bottom                                     {display: flex; width: 100%; flex-wrap: wrap; background: #1e313d; position: relative;}
.footer .bottom > *                                 {order: 1;}
.footer .bottom p                                   {display: block; max-width: 44em; font-size: 0.8em; line-height: 1.4em; color: #7c86a0; font-weight: 500;}
.footer .bottom .soc                                {display: flex;}
.footer .bottom .soc a                              {display: block; width: 2.2em;}
.footer .bottom .soc a svg                          {display: block; width: 100%;}
.footer .bottom .soc a svg > *                      {transition: .15s ease-in-out;}
.footer .bottom .soc a.fb svg .bg                   {fill: #087bea;}
.footer .bottom .soc a.fb svg .logo                 {fill: white;}
.footer .bottom .soc a.ig svg .bg                   {fill: #ee1c48;}
.footer .bottom .soc a.ig svg .logo                 {fill: white;}
.footer .bottom .soc a.tt svg .bg                   {fill: #e2e2e2;}
.footer .bottom .soc a.tt svg .logo                 {fill: black;}
.footer .bottom .soc a.yt svg .bg                   {fill: #ff0000;}
.footer .bottom .soc a.yt svg .logo                 {fill: white;}
.footer .bottom .soc a.fb:hover svg .bg             {fill: #3896ed;}
.footer .bottom .soc a.ig:hover svg .bg             {fill: #fb3b64;}
.footer .bottom .soc a.tt:hover svg .bg             {fill: white;}
.footer .bottom .soc a.yt:hover svg .bg             {fill: #ff3030;}
.footer .bottom ul                                  {display: flex; align-items: center; flex-wrap: wrap; margin-top: 1.2em;}
.footer .bottom ul li                               {display: block; line-height: 1em; padding-right: 0.5em; border-right: solid 1px #7c86a0; margin-right: 0.5em;}
.footer .bottom ul li:last-child                    {padding-right: 0; border: none; margin-right: 0;}
.footer .bottom ul li a                             {font-size: 0.8em; line-height: 1em; color: #7c86a0; font-weight: 600; transition: .15s ease-in-out;}
.footer .bottom ul li a:hover                       {color: white;}
.footer .bottom .licence {
  max-width: 26em;
}
.footer .bottom .licence a {
    color: #7c86a0;
    transition: .15s ease-in-out;
}
.footer .bottom .licence a:hover{
  color: white;
}
.footer .bottom .licence strong                     {display: block; font-weight: 600;}
  @media screen and (min-width: 1081px)             {
  .footer > *                                       {justify-content: space-between;}
  .footer .upper nav                                {width: 37em;}
  .footer .upper nav ul li                          {width: 33.33%;}
  .footer .upper nav ul li a                        {font-size: 0.8em;}
  .footer .upper nav ul li:nth-child(-n+3)          {margin-top: 0;}
  .footer .upper .note                              {width: 24em; text-align: right;}
  .footer .bottom                                   {justify-content: space-between;}
  .footer .bottom .soc                              {position: relative; top: -2.4rem;}
  .footer .bottom .soc a                            {margin-left: 0.4em;}
  .footer .bottom ul                                {width: 35em;}
  .footer .bottom .licence                          {text-align: right;}
  }
  @media screen and (max-width: 1080px)             {
  .footer > *                                       {padding: 1.3rem calc(0.8rem + 5%) 2rem;}
  .footer .upper                                    {justify-content: center;}
  .footer .upper nav                                {width: 100%;}
  .footer .upper nav ul                             {justify-content: center;}
  .footer .upper nav ul li                          {margin: 0.7rem 0.5rem 0;}
  .footer .upper nav ul li a                        {font-size: 0.9em;}
  .footer .upper .note                              {width: 100%; text-align: center; font-size: 0.9em; margin-top: 1.5rem;}
  .footer .upper .webs                              {width: 27em; margin-bottom: 1em;}
  .footer .upper .webs li:nth-child(odd)            {width: 60%;}
  .footer .upper .webs li:nth-child(even)           {width: 40%;}
  .footer .upper .webs li:before                    {top: 0.55em;}
  .footer .upper .webs li a                         {padding: 0.15em 0;}
  .footer .bottom                                   {justify-content: center;}
  .footer .bottom .soc                              {width: 100%; justify-content: center; order: 0; margin: -2.4rem 0 0;}
  .footer .bottom .soc a                            {margin: 0 0.2rem;}
  .footer .bottom p                                 {width: 100%; text-align: center; font-size: 0.9em; margin-top: 1.5rem;}
  .footer .bottom ul                                {width: 100%; justify-content: center;}
  }
  @media screen and (max-width: 480px)              {
  .footer .upper .webs                              {width: 14em;}
  .footer .upper .webs li:nth-child(odd),
  .footer .upper .webs li:nth-child(even)           {width: 100%;}
  }

/* Celoplosny banner v pozadi */
.background-2000x1400                           {display: block; width: 2000px; position: fixed; left: calc(50% - 1000px); top: 0;}
.background-2000x1400 img                       {display: block; width: 2000px;}
.outer-top                                      {display: block; width: 100%; height: 200px;}
  @media screen and (max-width: 1080px)         {
  .background-2000x1400                         {display: none !important;}
  .outer-top                                    {display: none;}
  }

/* Zruseni celoplosneho banneru v pozadi - defaultne plati, ze banner (branding) je zobrazen. Pro jeho vypnuti je potreba pridat nasledujici tridu */
.no-background .outer-top,
.no-background .background-2000x1400            {display: none; height: 0;}
  @media screen and (min-width: 1081px)         {
  .no-background .content                       {padding: 8em 0 0; overflow: visible;}
  .no-background .header                        {width: 100vw; margin: 0; padding: 0; position: absolute; top: 0; left: calc(480px - 50vw);}
  .no-background .header nav                    {width: 100%; margin: 0;}
  .no-background .footer > *                    {padding: 2rem 0;}
  .no-background .footer:before                 {display: block; width: 100vw; height: 100%; background: var(--color1); position: absolute; left: calc(50% - 50vw); top: 0; z-index: -1; content: "";}
  .no-background .footer .bottom:before         {display: block; width: 100vw; height: 100%; background: #1e313d; position: absolute; left: calc(50% - 50vw); top: 0; z-index: -1; content: "";}
  .no-background .footer .bottom .soc           {top: -3.2rem;}
  }
/* ----- */

.breadcrumbs                                    {display: block; width: 100%; margin-top: var(--margin-top);}
.breadcrumbs nav                                {display: flex; left: -0.5em; position: relative;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; margin: 0; padding: 0;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; font-size: 0.9em; padding: 0 1.2em 0 0; margin: 0 0 0.15em 0.5em; position: relative;}
.breadcrumbs ul li:last-child                   {padding-right: 0; margin-right: 0;}
.breadcrumbs ul li:before                       {display: none;}
.breadcrumbs ul li:after                        {display: inline-block; width: 0.6em; height: 0.6em; opacity: 0.6; margin: 0; background: URL('../images/arrow-black-right.svg') no-repeat center center; background-size: cover; position: absolute; right: 0; top: 0.3em; content: "";}
.breadcrumbs ul li:last-child:after             {display: none;}
.breadcrumbs ul li a                            {display: block; color: #252525; text-decoration: underline; font-weight: 500; opacity: 0.6; line-height: 1.3em; border: none; transition: .15s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; color: #252525 !important; font-weight: 600; padding-right: 1em; opacity: 1;}
.breadcrumbs ul li a:hover                      {opacity: 1; color: var(--color1); text-decoration-color: transparent;}
  @media screen and (max-width: 768px)          {
  /* .breadcrumbs                                  {overflow-x: auto; scrollbar-width: none;}
  .breadcrumbs::-webkit-scrollbar               {display: none;}
  .breadcrumbs ul                               {flex-wrap: nowrap;}
  .breadcrumbs ul li a                          {white-space: nowrap;} */
  .breadcrumbs {
    display: none;
  }
  }

.button                                         {display: flex; justify-content: center; align-items: center; font-size: 0.95em; font-weight: 700; color: white !important; padding: 0.8em; border-radius: var(--border-radius); text-decoration: none !important; border: none; outline: none; box-sizing: border-box; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: .25s ease-in-out;}
.button svg                                     {display: block; width: 1.1em; height: 1.1em; fill: white; margin: 0 0.2em;}
.button span                                    {margin: 0 0.2em;}
.button.color1                                  {background: var(--color1);}
.button.color1:hover                            {background: var(--color1b);}
.button.color2                                  {background: var(--color2);}
.button.color2:hover                            {background: var(--color2b);}
  @media screen and (max-width: 768px)          {
  .button                                       {font-size: 0.85em;}
  }

.banner-desktop,
.banner-desktop-tablet,
.banner-desktop-tablet-mobile                   {display: block; width: 100%; margin-top: var(--margin-top);}
.banner-desktop *,
.banner-desktop-tablet *,
.banner-desktop-tablet-mobile *                 {display: block; max-width: 100%;}
  @media screen and (max-width: 1080px)         {
  .banner-desktop                               {display: none;}
  }
  @media screen and (max-width: 768px)          {
  .banner-desktop-tablet                        {display: none;}
  .banner-desktop-tablet-mobile {
    display: flex;
    justify-content: space-around;
  }
  }

.flex                                           {display: flex !important; width: 100%; flex-wrap: wrap;
  /* margin-top: var(--margin-top); */
}
.flex.end                                       {justify-content: flex-end;}

.main                                           {display: flex; width: 100%; justify-content: space-between;}
.main > div                                     {display: flex; width: calc(100% - 300px - 1.1em); align-items: flex-start; align-content: flex-start; flex-wrap: wrap;}
.main aside                                     {display: flex; width: 300px; flex-wrap: wrap; position: relative;}
.stickyElement{
  position: sticky;
  top:20px;
}
.main aside .fixingArea                         {display: block; width: 100%; position: relative;}
.main aside .fixingElement                      {display: block;}
  @media screen and (min-width: 1081px)         {
  .main aside .fixingArea                       {box-sizing: border-box;}
  .main aside .fixingElement                    {width: 300px;}
  .main aside .fixingElement.fixed              {position: fixed; top: 0;}
  .main aside .fixingElement.fixed-middle       {position: fixed; bottom: 1em; top: auto;}
  .main aside .fixingElement.fixed-middle.fixed-end,
  .main aside .fixingElement.fixed.fixed-end    {position: absolute; top: auto; bottom: 0;}
  }
  @media screen and (max-width: 1080px)         {
  .main > div                                   {width: 100%;}
  .main aside                                   {display: none;}
  }

.main h1, .main h2, .main h3                    {display: block; width: 100%; font-size: 1.2em; line-height: 1.3em; font-weight: 700; box-sizing: border-box;}
.main h1 span, .main h2 span, .main h3 span     {font-weight: 500;}
.main h1                                        {font-size: 1.9em; color: var(--color1); margin: 1rem 0 -0.4rem;}
.main h2                                        {font-size: 1.5em; color: var(--color1); margin: 1.4rem 0 -0.4rem;}
.main h3                                        {font-size: 1.35em; color: var(--color1); margin: 1rem 0 -0.4rem;}
.main p, .main li                               {display: block; width: 100%; font-size: 1em; color: #252525; line-height: 1.5em; font-weight: 500;}
.main p                                         {margin-top: 0.6rem;}
.main p.medium                                  {font-size: 1.1em;}
.main strong, .main b                                    {font-weight: 800}
.main em                                        {font-style: italic;}
.main ul                                        {margin-top: var(--margin-top); box-sizing: border-box;}
.main ul li                                     {padding-left: 0.75em; box-sizing: border-box; position: relative; margin-top: 0.1em;}
.main ul li:before                              {display: block; width: 0.4em; height: 0.7em; background: URL('../images/bullet.svg') no-repeat left top; background-size: auto 100%; position: absolute; left: 0; top: 0.42em; content: "";}
.main ul li:first-child                         {margin-bottom: 0;}
.main ol                                        {display: block; width: 100%; list-style: none; counter-reset: li; margin-top: var(--margin-top); box-sizing: border-box;}
.main ol > li                                   {display: block; text-align: left; margin-top: 0.1em; counter-increment: li; padding-left: 1.5em; box-sizing: border-box; position: relative;}
.main ol > li:first-child                       {margin-top: 0;}
.main ol > li:before                            {display: block; content: counter(li) "."; font-size: 1em; font-weight: bold; color: var(--color2); position: absolute; left: 0; top: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.main ol li ul                                  {margin: 0.5em 0 0.7em;}
.main p a, .main li a, .main td a               {color: #252525; font-weight: 500; text-decoration: underline; transition: .1s ease-in-out;}
.main p a, .main p strong{font-weight: 800;}
.main p a:hover, .main li a:hover,
.main td a:hover                                {color: var(--color2); text-decoration-color: transparent;}

.box                                            {display: block; width: 100%; background: white; border-radius: var(--border-radius); padding: 1.5em; border: solid 1px rgba(0,0,0,0.1); margin-top: var(--margin-top); box-sizing: border-box;}
 @media screen and (max-width: 541px) {
   /* aby se dobře koukalo na mobilu */
   .box {
     padding: 0.5em;
   }
   .article table{
     padding:0.2em !important;
     border: none !important;
   }
   .table table th,
   .table table td {
     padding: 0.5em 0.4em !important;
   }
  }
.box > *:first-child                            {margin-top: 0 !important;}
.box.gray                                       {background: #e2e2e2;}
.article table{
  display: block;
  width: 100%;
  background: white;
  border-radius: var(--border-radius);
  padding: 1.5em;
  border: solid 1px rgba(0, 0, 0, 0.1);
  margin-top: var(--margin-top);
  box-sizing: border-box;
}
.table                                          {width: 100%; margin-top: var(--margin-top);}
.table table                                    {min-width: 100%; font-size: 0.9em;}
.table table th, .table table td                {text-align: left; color: #252525; line-height: 1.35em; font-weight: 500; padding: 0.5em 1em; border-left: solid 1px rgba(0,0,0,0.08); border-bottom: solid 1px rgba(0,0,0,0.08); box-sizing: border-box;}
.table table th:first-child,
.table table td:first-child                     {padding-left: 0; border-left: none;}
.table table th:last-child,
.table table td:last-child                      {padding-right: 0;}
.table table tr:last-child td                   {border-bottom: none;}
.table table th                                 {font-weight: 700; padding-top: 0; border-left: none;}
.table .button.view                             {display: inline-block; padding: 0.5em;}
.table .button.view svg                         {margin: 0;}
.table .with-tooltip                            {position: relative;} /* Kvuli tooltipu */
.tento {font-weight: 900 !important;
color:#000 !important;
}
  @media screen and (min-width: 1081px)         {
  .table table                                  {width: 100%;}
  }
  @media screen and (max-width: 1080px)         {
  .table                                        {overflow-x: auto;} /* Na desktopu nemuze byt kvuli tooltipu */
  .table table                                  {width: 100%; min-width: 20em;}
  }

.account-type                                   {display: flex; width: 100%; flex-wrap: wrap; padding: 0.65em 0; border-top: solid 1px rgba(0,0,0,0.15); border-bottom: solid 1px rgba(0,0,0,0.15); margin-top: var(--margin-top);}
.account-type p                                 {font-size: 1.1em; font-weight: 600; margin-top: 0;}
.account-type p span                            {display: inline-block; font-weight: 500;}
  @media screen and (min-width: 541px)          {
  .account-type p                               {width: auto; margin-right: 0.6em; padding-right: 0.6em; border-right: solid 1px rgba(0,0,0,0.15);}
  .account-type p:last-child                    {margin-right: 0; padding-right: 0; border-right: none;}
  }
  @media screen and (max-width: 540px)          {
  .account-type p                               {width: 100%;}
  .account-type p span                          {width: 7em;}
  }
.t-form {
  display: flex;
  border-top: solid 1px rgba(0, 0, 0, 0.2);
  position: relative;
  top: 0.3em;
}

.t-form p {
      white-space: nowrap;
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  box-sizing: border-box;
  margin: 0;
  position: relative;
}

.t-form p:nth-child(1) {
  padding: 0.3em 0.7em 0 0.3em;
  border-right: solid 1px rgba(0, 0, 0, 0.2);
}

.t-form p:nth-child(2) {
  padding: 0.3em 0.3em 0 0.7em;
}

.t-form p:before {
  display: block;
  width: 2.6em;
  background: var(--color1);
  text-align: center;
  font-size: 0.45em;
  color: white;
  line-height: 2.2em;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  position: absolute;
  top: -1.3em;
  content: "";
}

.t-form p:nth-child(1):before {
  left: calc(50% - 1.7em);
  content: "MD";
}

.t-form p:nth-child(2):before {
  right: calc(50% - 1.7em);
  content: "D";
}

.t-form p a {
  font-weight: 600;
}

.t-form-no-title {
  display: flex;
  border-top: solid 1px rgba(0, 0, 0, 0.2);
  position: relative;
  top: 0.3em;
}

.t-form-no-title p {
  display: block;
  /* white-space: nowrap; // u zaporneho čisla se hodí, jinak jak je vic učtu škodí */
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  box-sizing: border-box;
  margin: 0;
  position: relative;
}

.t-form-no-title p:nth-child(1) {
  padding: 0.3em 0.7em 0 0.3em;
  border-right: solid 1px rgba(0, 0, 0, 0.2);
}

.t-form-no-title p:nth-child(2) {
  padding: 0.3em 0.3em 0 0.7em;
}

.t-form-no-title p:before {
  display: block;
  width: 2.6em;
  background: var(--color1);
  text-align: center;
  font-size: 0.45em;
  color: white;
  line-height: 2.2em;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  position: absolute;
  top: -1.3em;
  content: "";
}


.t-form-no-title p a {
  font-weight: 600;
}

.operation                                      {display: flex; align-items: center;}
.operation .t-form                              {display: flex; font-size: 1.2em; margin-right: 1.5em; border-top: solid 1px rgba(0,0,0,0.2); position: relative; top: 0.4em;}
  @media screen and (min-width: 441px)          {
  .operation > p                                {width: auto; margin: 0;}
  }
  @media screen and (max-width: 440px)          {
  .operation                                    {flex-wrap: wrap;}
  .operation > p                                {margin-top: 1.4em;}
  }

.author-info                                    {display: block; width: 100%; padding-left: 4.8em; box-sizing: border-box; position: relative; margin: 1em 0;}
.author-info .photo                             {display: block; width: 4em; height: 4em; border-radius: 100%; position: absolute; left: 0; top: -0.1em; overflow: hidden;}
.author-info .photo img                         {display: flex; width: 100%;}
.author-info h1                                 {font-size: 1.8em;}
.author-info p                                  {padding-left: 1.6em; margin-top: 0.45em; position: relative;}
.author-info p:before                           {display: block; width: 1.2em; height: 1.2em; background: URL('../images/contacts-icon-mail.svg') no-repeat center center; background-size: contain; position: absolute; left: 0; top: 0.2em; content: "";}
  @media screen and (max-width: 4400px)         {
  .author-info                                  {padding-left: 4em;}
  .author-info .photo                           {width: 3.3em; height: 3.3em; top: 0;}
  .author-info h1                               {font-size: 1.5em;}
  }

.banner-480x480                                 {display: block; width: 100%; padding: 1.1em 0;}
.banner-480x480 img                             {display: block; width: 100%; max-width: 480px;}
  @media screen and (min-width: 1080px)         {
  .banner-480x480                               {display: none !important;}
  }

.banner-970x310                                 {display: block; width: 100%; padding-top: 1.1em;}
.banner-970x310 img                             {display: block; width: 100%; max-width: 970px;}
  @media screen and (max-width: 1080px)         {
  .banner-970x310                               {display: none !important;}
  }

.slider                                         {padding: 0;}
.slider .slides                                 {width: 100%; overflow: hidden;}
.slider .slides .swiper-slide                   {display: flex; width: 100%; height: auto; align-items: center; align-content: center; flex-wrap: wrap; padding: 2em 0 2em 2em; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.slider .slides .swiper-slide.kalkulacky        {background-image: URL('../images/slide1.jpg'); background-repeat: no-repeat;}
.slider .slides .swiper-slide.stranky           {background-image: URL('../images/slide2.jpg'); background-repeat: no-repeat;}
.slider .slides h2                              {margin: 0;}
.slider .slides ul                              {display: block; margin-top: 0.5rem;}
.slider .slides ul li                           {font-size: 0.9em;}
.slider .slides ul li a                         {display: inline-block;}
.slider .slides .button                         {font-size: 0.8em; margin-top: 1em;}
.slider .thumbs                                 {width: 100%; border-radius: 0 var(--border-radius) var(--border-radius) 0; overflow: hidden;}
.slider .thumbs .swiper-slide                   {display: flex; width: 50%; justify-content: center; align-items: center; text-align: center; font-size: 0.9em; color: #666666; font-weight: 600; padding: 0.9em 0; background: rgba(0,0,0,0.06); cursor: pointer; transition: .2s ease-in-out; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.slider .thumbs .swiper-slide:hover             {color: #252525; background: rgba(0,0,0,0.08);}
.slider .thumbs .swiper-slide-thumb-active      {color: var(--color2) !important; background: transparent !important;}
  @media screen and (min-width: 1081px)         {
  .slider .slides .swiper-slide.kalkulacky      {background-position: right -4em center; background-size: auto 16em;}
  .slider .slides .swiper-slide.stranky         {background-position: right -8em center; background-size: auto 16em;}
  .slider .slides ul li                         {max-width: 19em;}
  }
  @media screen and (min-width: 769px) and (max-width: 1080px){
  .slider .slides .swiper-slide.kalkulacky      {background-position: right 10% center; background-size: auto 16em;}
  .slider .slides .swiper-slide.stranky         {background-position: right -5em center; background-size: auto 16em;}
  .slider .slides ul li                         {max-width: 19em;}
  }
  @media screen and (min-width: 641px) and (max-width: 768px){
  .slider .slides .swiper-slide.kalkulacky      {background-position: right -3em center; background-size: auto 16em;}
  .slider .slides .swiper-slide.stranky         {background-position: right -12em center; background-size: auto 16em;}
  .slider .slides ul li                         {max-width: 17em;}
  }
  @media screen and (max-width: 640px)          {
  .slider .slides .swiper-slide                 {padding: 16em 2em 2em;}
  .slider .slides .swiper-slide.kalkulacky,
  .slider .slides .swiper-slide.stranky         {background-position: center top 1em; background-size: auto 14em;}
  .slider .slides ul li a                       {padding: 0.15em 0;}
  .slider .slides ul li:before                  {top: 0.5em;}
  }
  @media screen and (min-width: 441px) and (max-width: 640px){
  .slider .slides ul                            {column-count: 2;}
  }
  @media screen and (min-width: 441px)          {
  .slider .thumbs .swiper-slide br              {display: none;}
  }

.articles                                                       {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}
  @media screen and (min-width: 769px)                          {
  body.hp .articles article:nth-of-type(-n+2)                   {width: calc(50% - 0.5rem);}
  body.hp .articles article:nth-of-type(1)                      {margin-right: 1rem;}
  body.hp .articles article:nth-of-type(n+3)                    {width: calc(33.33% - 0.6rem); margin: 1.2rem 0.9rem 0 0; font-size: 0.9em;}
  body.hp .articles article:nth-of-type(n+3):nth-of-type(3n+5)  {margin-right: 0;}
  body:not(.hp) .articles article                               {width: calc(33.33% - 0.6rem); margin: 1.2rem 0.9rem 0 0; font-size: 0.9em;}
  body:not(.hp) .articles article:nth-of-type(-n+3)             {margin-top: 0;}
  body:not(.hp) .articles article:nth-of-type(3n+3)             {margin-right: 0;}
  }
  @media screen and (min-width: 541px) and (max-width: 768px){
  .articles article                                             {width: calc(50% - 0.6rem); margin: 1.6rem 1.2rem 0 0;}
  .articles article:nth-of-type(-n+2)                           {margin-top: 0;}
  .articles article:nth-of-type(even)                           {margin-right: 0;}
  }
  @media screen and (max-width: 540px)                          {
  .articles article                                             {width: 100%; margin-top: 1.6rem;}
  .articles article:nth-of-type(1)                              {margin-top: 0;}
  }

.preview {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
  transition: .25s ease-in-out;
}
.preview .img                                   {display: block; width: 100%; padding-top: 60%; border-radius: var(--border-radius); position: relative; overflow: hidden;}
.preview .img > a                               {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.preview .img > a span                          {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.preview .img > a span img                      {display: block; width: 100%; transition: .2s ease-in-out;}
.preview .img > a:hover span img                {opacity: 0.8;}
.preview .img .tags                             {display: flex; width: 100%; padding: 0 1.2em 1em; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 3;}
.preview .img .tags span                        {display: block; font-size: 0.75em; font-weight: 600; color: white; background: var(--color1); padding: 0.6em 0.7em; border-radius: var(--border-radius); margin: 0.2em 0.2em 0 0;}
.preview .title                                 {display: block; text-align: left; font-size: 1.1em; font-weight: 700; margin-top: 0.7em;}
.preview .title a                               {color: var(--color1); transition: .15s ease-in-out;}
.preview .title a:hover                         {color: var(--color2);}
.preview .date-info                             {color: #666666; margin-top: 0.8em;}
.preview p                                      {margin-top: 0.4em;}
  @media screen and (min-width: 769px)          {
  .preview p                                    {font-size: 0.9em;}
  }
  /* mnou přidané jiné pro mobily rozpis */
   @media screen and (max-width: 541px) {
     .preview{
          display: flex;
          align-items: start;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: space-evenly;
          flex-direction: row;
          gap: 1em;
     }
.preview .img .tags, .preview .date-info, .preview p {
  display: none;
}
.preview .img > a span {
justify-content: flex-start;
align-items: start;
}
.preview .img {
  width: 55%;
  padding-top: 20%;
   }
   .preview .title {
     margin-top: 0;
  }
  /* videokurzy */
  .videocourse--play {
    position: absolute;
    background-color: white;
    width: 24% !important;
    left: 35%;
    top: 33%;
    border-radius: 100%;
    background-position: center;
  }
}
.videocourse--play {
  position: absolute;
  background-color: white;
  width: 4em;
  border-radius: 100%;
  background-position: center;
}
/* Pokud vis predem, ze clanek bude vzdy pouze jeden nebo dva */
  @media screen and (min-width: 541px)          {
  .articles.only-one .preview                       {width: calc(100% - 0.3rem) !important; min-height: 8.5em; justify-content: space-between; align-items: flex-start; align-content: flex-start; padding-left: 14.2em;}
  .articles.only-one .preview .img                  {width: 13em; height: 8.5em; padding: 0; position: absolute; left: 0; top: 0;}
  .articles.only-one .preview .title                {margin-top: 0;}
  .articles.only-two article                        {width: calc(50% - 0.6rem) !important; margin: 0 1.2rem 0 0 !important;}
  .articles.only-two article:nth-of-type(even)      {margin-right: 0 !important;}
  }

.selection                                      {display: flex; width: 100%; flex-wrap: wrap; margin-top: calc(var(--margin-top) - 0.2em);}
.selection > div                                {display: flex; width: 100%; flex-wrap: wrap;}
.selection > div a                              {display: flex; justify-content: center; font-size: 0.85em; color: var(--color1); font-weight: 600; text-decoration: underline; padding: 0.5em 0.9em; background: white; margin: 0.2em 0.2em 0 0; border-radius: var(--border-radius); border: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position: relative; transition: .15s ease-in-out;}
.selection > div a:hover                        {color: var(--color2); border-color: var(--color2); text-decoration-color: transparent;}
.selection > div a.sel                          {color: white; background: var(--color2); border-color: var(--color2); text-decoration-color: transparent;}
.selection > div a:after                        {display: block; width: 100%; height: 0.2em; opacity: 0.35; background: URL('../images/shadow.png') no-repeat center top; background-size: 100% 100%; position: absolute; left: 0; bottom: calc(-0.2em + 1px); z-index: 1; content: "";}

.soc-embeds                                     {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: var(--margin-top);}
.soc-embeds > div                               {display: block; background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 1em 1rem 2.8rem; box-sizing: border-box; border-radius: var(--border-radius); overflow: hidden; position: relative;}
.soc-embeds > div.fb                            {padding: 0;}
.soc-embeds > div.ig                            {background-image: URL('../images/soc-embeds-ig.jpg');}
.soc-embeds > div.tt                            {background-image: URL('../images/soc-embeds-tt.jpg');}
.soc-embeds > div.yt                            {background-image: URL('../images/soc-embeds-yt.jpg');}
.soc-embeds > div.ig:after,
.soc-embeds > div.tt:after,
.soc-embeds > div.yt:after                      {display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%); position: absolute; left: 0; top: 0; content: "";}
.soc-embeds > div > *                           {width: 100%; position: relative; z-index: 2;}
.soc-embeds > div > .img                        {display: block; width: 2.7em; height: 2.7em; background: white; border-radius: 100%;  box-shadow: 0 0 0.2em rgba(0,0,0,0.5);}
.soc-embeds > div > .img img                    {display: block; width: 100%; padding: 20%; box-sizing: border-box;}
.soc-embeds > div > p                           {font-size: 1em; color: white; font-weight: 700; margin-top: 0.15em; text-shadow: 0 0 0.2em rgba(0,0,0,0.5);}
.soc-embeds > div > span                        {display: flex; width: auto; align-items: center; background: white; font-size: 0.75em; color: #252525; font-weight: 700; padding: 0.4em 0.6em; border-radius: var(--border-radius); position: absolute; left: 1.1rem; bottom: 1.1rem;}
.soc-embeds > div > span img                    {display: block; width: 1.1em; margin-right: 0.4em;}
.soc-embeds > div > a                           {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; transition: .15s ease-in-out;}
.soc-embeds > div:hover > a                     {background: rgba(255,255,255,0.2);}
  @media screen and (min-width: 641px)          {
  .soc-embeds > div                             {width: calc(25% - 0.2em);}
  }
  @media screen and (max-width: 640px)          {
  .soc-embeds > div                             {width: calc(50% - 0.2em); margin-top: 0.4em;}
  .soc-embeds > div:nth-child(-n+2)             {margin-top: 0;}
  }

.article                                        {display: block; width: 100%; box-sizing: border-box;}
.article .info                                  {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}
.article .info span,
.article .info time {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: var(--color1);
  font-weight: 600;
}
.article .info span:after,
.article .info time:after {
  display: block;
  width: 1px;
  height: 1em;
  background: var(--color1);
  opacity: 0.5;
  margin: -0.05em 0.5em 0.05em 0.5em;
  content: "";
}
.article .info span:last-child:after            {display: none;}
.article .info span a                           {color: var(--color2); font-weight: 600; text-decoration: underline; transition: .1s ease-in-out;}
.article .info span a:hover                     {color: var(--color2b); text-decoration-color: transparent;}
.article .info span.author:before               {margin-right: 0.3em; content: "Autor:";     align-items: flex-start;}
.article .perex ,
.article > p:first-child {
  font-size: 1.1em;
  font-weight: 600;
}
.article .img                                   {display: block; width: 100%; position: relative;
   /* padding-top: 56%; */
    margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}
    .border, .border td{
      border: 1px solid #dedede;
    }
.article .img span                              {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.article .img img ,  .article  img                             {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
/* .article .img:hover img ,.article img                        {opacity: 0.8;} */
.article .video, .article>iframe                                 {display: block; width: 100%; margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden;}
.article .video iframe                          {display: block; width: 100%;}
.article .button                                {font-size: 0.9em;}
.article ol, .article ul                        {padding-left: 1em; margin-top: var(--margin-top);}
.article .highlighted ,#zlute, #zlute2                          {display: block; width: 100%; background: var(--color1); padding: 1em;  margin-top: var(--margin-top); border-radius: var(--border-radius); overflow: hidden; box-sizing: border-box;}
.article .highlighted ,#zlute, #zlute2 > *:first-child           {margin-top: 0;}
.article .highlighted ,#zlute, #zlute2 p , #zlute2                        {text-align: center; font-size: 1em; color: white;}
.article .highlighted ,#zlute, #zlute2 p a                       {color: white;}
.article .highlighted,
#zlute,
#zlute2 p a:hover {
  color: var(--color2);
} .article .flex                                  {margin-top: calc(var(--margin-top) - 0.3em);}
.article .flex > *                              {margin: 0.3em 0.25em 0 0;}
.article .form                                  {margin-top: var(--margin-top);}
.form--search{height: 100%}
.tooltip.with-icon                              {display: inline-block;}
.tooltip .icon                                  {display: block; width: 0.9rem; height: 0.9rem; background: var(--color1); border-radius: 100%; position: relative; top: 0.2em;}
.tooltip .icon:after                            {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0.7em; color: white; font-weight: 700; position: absolute; left: 0; top: 0; content: "?";}
.tooltip .info                                  {display: block; text-align: center; background: #43657b; padding: 2.4em 1.2em 1.4em; color: white; font-size: 0.75rem; font-weight: 500; line-height: 1.5em; border-radius: var(--border-radius); box-sizing: border-box; visibility: hidden; opacity: 0; z-index: 1001; transition: .3s ease-in-out;}
.tooltip .info .close                           {display: block; width: 1.1em; height: 1.1em; background: URL('../images/cross-white.svg') no-repeat center center; background-size: 100% 100%; position: absolute; right: 0.85em; top: 0.85em; opacity: 0.5; cursor: pointer; transition: .3s ease-in-out;}
.tooltip .info .close:hover                     {opacity: 1;}
.tooltip.sel .info                              {visibility: visible; opacity: 1;}
  @media screen and (min-width: 1081px)         {
  .tooltip .info {
    width: 12rem;
    position: absolute;
    left: calc(50% - 6rem);
    bottom: calc(100% + 1.2rem);
    white-space: normal;
  }
  .tooltip .info:before                         {display: block; width: 1em; height: 1em; background: #43657b; transform: rotate(45deg); position: absolute; left: calc(50% - 0.5em); bottom: -0.3rem; content: "";}
  .tooltip.with-icon                            {position: relative;}
  .tooltip.sel .info                            {bottom: calc(100% + 0.5rem);}
  }
  @media screen and (max-width: 1080px)         {
  .tooltip .info                                {width: calc(100% - 8em); position: fixed; left: 4em; bottom: 3em;}
  .tooltip.sel .info                            {bottom: 1em;}
  }
.help{
  border-bottom: 1px dotted #252525;
  cursor: help;
}
.chk1:not(:checked),
.chk1:checked                                   {position: absolute; left: 0; opacity: 0; background-position: left top;}
.chk1:not(:checked) + label,
.chk1:checked + label                           {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.5em; padding-left: 1.6em; color: #252525; cursor: pointer; box-sizing: border-box;}
.chk1:not(:checked) + label a,
.chk1:checked + label a                         {color: #252525; text-decoration: underline;}
.chk1:not(:checked) + label a:hover,
.chk1:checked + label a:hover                   {color: var(--color2); text-decoration: none;}
.chk1:not(:checked) + label:before,
.chk1:checked + label:before                    {display: block; width: 1.15em; height: 1.15em; border-radius: 0.2em; position: absolute; left: 0; top: 0.14em; overflow: hidden; content: "";}
.chk1:not(:checked) + label:before              {background-color: #cfcfcf;}
.chk1:not(:checked) + label:hover:before        {opacity: 0.8;}
.chk1:checked + label:before                    {background: URL('../images/check.svg') no-repeat center center; background-size: 100% 100%; background-color: var(--color2);}
.chk1:disabled + label,
.chk1:disabled + label:before                   {opacity: 0.4;}
.label--remind-email{
    position: relative;
    top: -15px;
    left: 10px;
}
.label310 {
  width: 310px;
}
.radio                                          {position: relative; padding-left: 1.35em; box-sizing: border-box;}
.radio input[type=radio]                        {position: absolute; visibility: hidden; left: -9999px;}
.radio label                                    {display: block; position: relative; text-align: left; font-size: 1em; line-height: 1.3em; font-weight: 500; color: #666666; cursor: pointer; transition: .15s ease-in-out;}
.radio label:hover                              {color: #252525;}
.radio .check                                   {display: block; width: 1em; height: 1em; background-color: white; border: solid 1px rgba(0,0,0,0.2); border-radius: 100%; box-sizing: border-box; position: absolute; left: 0; top: 0.1em; overflow: hidden; transition: .15s ease-in-out;}
.radio .check:after                             {display: block; width: 100%; height: 100%; position: absolute; border: solid 0.22em white; opacity: 0; background: var(--color2); border-radius: 100%; box-sizing: border-box; left: 0; top: 0; content: ""; transition: .15s ease-in-out;}
.radio input[type=radio]:checked ~ label        {color: #252525; font-weight: 500;}
.radio input[type=radio]:checked ~ .check:after {opacity: 1;}

.form                                               {display: flex; width: 100%; flex-wrap: wrap; margin-top: var(--margin-top);}
.form .form-items                                   {display: flex; width: 100%; flex-wrap: wrap;}
.form .row                                          {display: flex; width: 100%; flex-wrap: wrap;}
.form .form-aside                                   {display: flex; min-height: 3.4em; align-items: center; align-content: center; flex-wrap: wrap; box-sizing: border-box;}
.form .form-item                                    {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; position: relative; margin: 0.7em 0 0.3em;}
.form .form-item label                              {display: flex; align-items: center; height: 3.4em; font-size: 1em; color: #999999; line-height: 1em; font-weight: 500; padding: 0 1.2em; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 1; cursor: text; transition: .25s ease-in-out;}
.form .form-item label span                         {margin-left: 0.2em; font-weight: 500;}
.form .form-item.focus label,
.form .form-item.always-focus label,
.form-item-sm {
  width: auto;
  height: 1.8em;
  font-size: 0.8em;
  color: var(--color1);
  font-weight: 600;
  background: #ededed;
  border-radius: var(--border-radius);
  padding: 0 0.4em;
  left: 0.8em;
  top: -0.8em;
}
.form-input--velky {
  font-size:1.3em;
  padding: 0.8em;
}
/* .form .form-item.always-focus label,
.form-item,
.form-item-sm {
  width: auto;
  height: 1.8em;
  font-size: 0.8em;
  color: var(--color1);
  font-weight: 600;
  background: #ededed;
  border-radius: var(--border-radius);
  padding: 0 0.4em;
  left: 0.8em;
  top: -0.8em;
} */
.form .form-item > div                              {display: block; width: 100%; position: relative;}
.form .form-item input,
.form .form-item select,
.form .form-item .input-file label,
.form .form-item textarea,
.form-item-sm {
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: 700;
  color: var(--color1);
  background: white;
  border: solid 1px rgba(0, 0, 0, 0.15);
  outline: none;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  font-family: 'Montserrat', sans-serif;
  transition: .2s ease-in-out;
}
/* .form .form-item textarea,
.form-item,
.form-item-sm {
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: 700;
  color: var(--color1);
  background: white;
  border: solid 1px rgba(0, 0, 0, 0.15);
  outline: none;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  font-family: 'Montserrat', sans-serif;
  transition: .2s ease-in-out;
} */
.form .form-item input                         {height: 3.4em; padding: 0 0.8em;}
.form .form-item select                             {height: 3.4em; padding: 0 0.8em;}
/* .form .form-item input   ,.form-item                           {height: 3.4em; padding: 0 0.8em;}
.form .form-item select ,.form-item                             {height: 3.4em; padding: 0 0.8em;} */
.form .form-item textarea                           {height: 10em; padding: 1em 0.8em;}
.form .form-item.focus input                     {padding-top: 0.5em;}
.form-item-sm{padding: 0, 0.4em; height: 2.2em }
.form .form-item input:focus,
.form .form-item textarea:focus                     {border-color: var(--color2);}
.form .form-item input::placeholder                 {color: #999999; opacity: 1; font-weight: 500;}
.form .form-item input:-ms-input-placeholder        {color: #999999; font-weight: 500;}
.form .form-item input::-ms-input-placeholder       {color: #999999; font-weight: 500;}
.form .form-item textarea::placeholder              {color: #999999; opacity: 1; font-weight: 500;}
.form .form-item textarea:-ms-input-placeholder     {color: #999999; font-weight: 500;}
.form .form-item textarea::-ms-input-placeholder    {color: #999999; font-weight: 500;}
.form .form-item .btn-icon                          {display: flex; width: 3.4em; height: 100%; justify-content: center; align-items: center; padding: 0.7em 1em 0.8em; background: none; border: none; box-sizing: border-box; position: absolute; right: 0; top: 0; z-index: 2; cursor: pointer;}
.form .form-item .btn-icon svg                      {display: block; width: 100%; fill: var(--color1); opacity: 0.5; transition: .2s ease-in-out;}
.form .form-item .btn-icon:hover svg                {opacity: 1;}
.form .form-item .input-file:after                  {display: block; width: 3.4em; height: 3.4em;
  /* background: URL('../images/input-file.png') no-repeat center top; */
   background-size: 100% 200%; cursor: pointer; position: absolute; right: 0; top: 0; z-index: 1; content: "";}
.form .form-item .input-file:hover:after            {background-position: center bottom;}
.form .form-item .input-file input[type='file']     {position: absolute; left: -9999px;}
.form .form-item .input-file label                  {display: flex; align-items: center; height: 3em; padding: 0 3em 0 0.8em; font-size: 1em; margin-bottom: 0; position: relative; z-index: 2; cursor: pointer;}
.form .checkbox                                     {margin: 0.6em 0; position: relative;}
.form .checkboxes                                   {margin: 0.7em 0 0.4em;}
.form .checkboxes .checkbox                         {margin: 0 0 0.4em;}
.form p                                             {font-size: 0.85em;}
.form .note                                         {display: block; font-size: 0.85em; font-weight: 500; color: #666666; margin-top: 0.25em;}
.form .note a                                       {color: #999999; text-decoration: underline; cursor: pointer; transition: .2s ease-in-out;}
.form .note a:hover                                 {color: #666666; text-decoration-color: transparent;}
.form .result,
.result {
  width: 100%;
  text-align: center;
  display: block;
  background-color: #f1f7f2a3;
  font-size: 1.35em;
  padding: 0.6em 0.8em;
  border-radius: var(--border-radius);
  border: solid 2px var(--color2);
  box-sizing: border-box;
  margin-top: var(--margin-top);
}
.form .result > *:first-child                       {margin-top: 0;}
.form .flex                                         {justify-content: flex-end; margin-top: 0.5em;}
.box.gray .form .form-item.focus label,
.box.gray .form .form-item.always-focus label       {background: #e2e2e2;}
  @media screen and (min-width: 641px)              {
  .form .form-aside                                 {max-width: calc(50% - 0.2em);}
  .form .form-item                                  {width: calc(50% - 0.2em);}
  .form .form-item:first-of-type                    {margin-right: 0.4em;}
  }
  @media screen and (max-width: 640px)              {
  .form .form-item                                  {width: 100%;}
  .form .row                                        {justify-content: space-between;}
  .form .row .form-item                             {width: calc(100% - 1.5em);}
  .form .form-aside                                 {width: 100%; margin: -0.5em 0 0.5em; padding-left: 2em;}
  .form .form-aside.only-icon                       {width: auto; margin: 0; padding: 0;}
  .form .form-aside .form-item > div                {width: auto;}
  .form .form-aside .note                           {order: 0; margin: 1.1em 0 -0.4em;}
  .form .form-aside > div                           {order: 1;}
  }

.forum                                          {padding: 6%;}
.forum .post                                    {display: block; width: 100%; margin-top: 1.8em; padding: 1.2em 1em 1em; border: solid 1px rgba(0,0,0,0.3); border-radius: 0.2em; box-sizing: border-box; position: relative;}
.forum .post:first-of-type                      {margin-top: 0;}
.forum .post > span                             {display: flex; flex-wrap: wrap; font-size: 0.9em; font-weight: 700; color: #252525; background: #e2e2e2; padding: 0 0.4em; position: absolute; left: 0.65em; top: -0.63em;}
.forum .post > span .date                       {display: flex; align-items: center; font-weight: 500;}
.forum .post > span .date:before                {display: block; margin-right: 0.4em; content: ",";}
.forum .post p                                  {display: block; font-size: 0.9em; font-weight: 500; color: #252525; margin: 0;}
.forum .post a{
  color: #252525;
  border-bottom: 1px dotted #252525;
}
.forum .post a:hover{
  border-bottom: none;
}
.forum .form                                    {margin-top: 0.3em;}
.forum .form .form-item:nth-of-type(3)          {width: 100%;}

.add-example .flex .button                      {margin: 0;}
  @media screen and (min-width: 641px)          {
  .add-example                                  {justify-content: space-between; align-items: center;}
  .add-example .form-items                      {width: calc(100% - 6.5em); justify-content: space-between; align-items: center;}
  .add-example .form-item                       {margin: 0 !important;}
  .add-example .form-item:nth-child(1)          {width: calc(100% - 12em);}
  .add-example .form-item:nth-child(2),
  .add-example .form-item:nth-child(3)          {width: 5em;}
  .add-example .form-item textarea              {height: 3em;}
  .add-example .flex                            {width: auto; margin: 0;}
  .add-example .flex .button                    {height: 3em;}
  }
  @media screen and (min-width: 541px) and (max-width: 640px){
  .add-example                                  {justify-content: space-between; align-items: center;}
  .add-example .form-items                      {justify-content: space-between; align-items: center;}
  .add-example .form-item                       {margin: 0 !important;}
  .add-example .form-item:nth-child(1)          {width: calc(100% - 12em);}
  .add-example .form-item:nth-child(2),
  .add-example .form-item:nth-child(3)          {width: 5em;}
  .add-example .form-item textarea              {height: 3em;}
  }
  @media screen and (max-width: 540px)          {
  .add-example .form-items                      {align-items: center;}
  .add-example .form-item:nth-child(1)          {width: 100%; margin: 0;}
  .add-example .form-item:nth-child(2)          {width: 5em; margin-right: 0.5em;}
  .add-example .form-item:nth-child(3)          {width: 5em; margin-left: 0.5em;}
  .add-example .form-item textarea              {height: 5em;}
  }

.cta-test                                       {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.cta-test .info                                 {display: block;}
.cta-test .info > *:first-child                 {margin-top: 0;}
  @media screen and (min-width: 541px)          {
  .cta-test .info                               {width: calc(100% - 11em);}
  .cta-test .info h2                            {font-size: 1.35em;}
  .cta-test .flex                               {width: auto; margin: 0;}
  .cta-test .flex .button                       {font-size: 0.85em; margin: 0;}
  }
  @media screen and (max-width: 540px)          {
  .cta-test .info                               {width: 100%;}
  }

.account-class                                  {display: block; width: 100%; padding-top: 1em;}
.account-class > *:first-child                  {margin-top: 0;}

.ucet-aktivni strong                            {color: #69c80c; text-decoration: underline; text-decoration-style: dotted; transition: .15s ease-in-out;}
.ucet-aktivni-i-pasivni strong                  {color: #333333; text-decoration: underline; text-decoration-style: dotted; transition: .15s ease-in-out;}
.ucet-pasivni strong                            {color: #c8a20c; text-decoration: underline; text-decoration-style: dotted; transition: .15s ease-in-out;}
.ucet-nakladovy strong                          {color: #c8340c; text-decoration: underline; text-decoration-style: dotted; transition: .15s ease-in-out;}
.ucet-vynosovy strong                           {color: #0c95c8; text-decoration: underline; text-decoration-style: dotted; transition: .15s ease-in-out;}
.ucet-aktivni strong:hover                      {color: #58ac04; text-decoration-color: transparent;}
.ucet-aktivni-i-pasivni strong:hover            {color: #343434; text-decoration-color: transparent;}
.ucet-pasivni strong:hover                      {color: #9e7f05; text-decoration-color: transparent;}
.ucet-nakladovy strong:hover                    {color: #a12604; text-decoration-color: transparent;}
.ucet-vynosovy strong:hover                     {color: #017aa5; text-decoration-color: transparent;}

.box.search .form-item                          {width: 100%; margin: 0;}
.box.search .form-item > div                    {width: 100%; justify-content: space-between;}
.box.search .form-item > div input              {padding-right: 4em;}
.box.search .form-item > div button             {display: block; width: 3.4em; height: 3.4em; font-size: 1em; background: URL('../images/button-search.svg') no-repeat center center, var(--color2); background-size: 35% 35%; outline: none; border: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; cursor: pointer; position: absolute; right: 0; top: 0; transition: .15s ease-in-out;}
.box.search .form-item > div button:hover       {background-color: var(--color2b);}

.vocabulary                             {display: block; width: 100%; margin: var(--margin-top) 0 -1.5em; column-gap: 1.5em;}
.vocabulary > div                       {display: inline-block; width: 100%; margin-bottom: 1.5em;}
.vocabulary > div h2                    {margin: 0; font-weight: 600;}
.vocabulary > div ul                    {margin: 0;}
  @media screen and (min-width: 769px)  {
  .vocabulary                           {column-count: 3;}
  }
  @media screen and (max-width: 768px)  {
  .vocabulary                           {column-count: 2;}
  }

.contacts p                                {margin: 1em 0 0;}
.contacts ul                               {margin: 0.2em 0 0; padding: 0;}
.contacts ul li                            {padding-left: 1.8em; margin: 0.1em 0 0;}
.contacts ul li:before                     {width: 1.3em; height: 1.3em; background-repeat: no-repeat; background-position: center center; background-size: contain; background-color: transparent; border-radius: 0; top: 0.1em;}
.contacts ul li:nth-child(1):before        {background-image: URL('../images/contacts-icon-mail.svg');}
.contacts ul li:nth-child(2):before        {background-image: URL('../images/contacts-icon-location.svg');}
.contacts ul li span                       {display: block; margin-top: 0.4em;}

.contact-form                              {margin-top: 0;}
.contact-form .form-item:nth-of-type(3)    {width: 100%;}
.contact-form .flex .checkbox              {font-size: 0.8em;}
  @media screen and (min-width: 541px)     {
  .contact-form .flex                      {justify-content: space-between;}
  .contact-form .flex .checkbox            {width: calc(100% - 10rem);}
  }
  @media screen and (max-width: 540px)     {
  .contact-form .flex .checkbox            {width: 100%;}
  .contact-form .flex .button              {width: 100%; margin-top: 0.8em;}
  }

.test-symbol                                {display: inline-block; font-size: 0.75em; color: white; font-weight: 700; padding: 0em 0.5em; margin: 0 0.2em; border-radius: var(--border-radius); border: none; position: relative; top: -0.15em;}
.test-symbol.f                              {background: var(--color2);
cursor: help;}
.test-symbol.k {
  background: var(--color1);
  cursor: help;
}
.after-reg {
  width: 100%;
  text-align: center;
  padding: 0.6em !important;
}

.tests td                                   {font-size: 0.9em;}
.tests td .test-symbol                      {font-size: 1em; margin: 0; padding: 0.4em 0.55em;}
.tests td strong                            {font-size: 1.3em;}
.tests td .infop                             {display: flex; align-items: center; flex-wrap: wrap; margin-top: 0.2em;}
.tests td .infop .new                        {display: block; font-size: 0.9em; color: white; font-weight: 600; background: var(--color2); padding: 0.2em 0.4em; margin: 0 0.6em 0 0; border-radius: var(--border-radius);}
.tests .button                              {font-weight: 700; padding: 0.6em;}

.log-reg                                          {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.log-reg .box                                     {padding: calc(4% + 1em);}
.log-reg .box h2                                  {margin: 0 0 0.1em;}
.log-reg .form .form-item                         {width: 100%; margin-right: 0;}
.log-reg .form .checkbox                          {font-size: 0.9em;}
.log-reg .form .button                            {width: 100%; margin-top: 1em;}
  @media screen and (min-width: 641px)            {
  .log-reg .box                                   {width: calc(48% - 0.2em);}
  .log-reg .box:first-child                       {margin-right: 0.4em;}
  }
  @media screen and (max-width: 640px)            {
  .log-reg .box                                   {width: 100%;}
  .log-reg .box:first-child                       {margin-bottom: 0.6em;}
  }

.profile-info                                     {display: block; width: 100%; padding-left: 3.9em; position: relative; margin-top: 1rem;}
.profile-info img {
  display: block;
  width: 3.3em;
  position: absolute;
  left: 0;
  top: 0.2em;
  border-radius: 100%;
}
.profile-info h1                                  {font-size: 1.5em; margin: 0;}
.profile-info > div                               {display: flex; width: 100%; align-items: center; flex-wrap: wrap;}
.profile-info > div > *                           {margin-top: 0.4em;}
.profile-info > div .credits                      {display: block; font-size: 0.8em; color: white; font-weight: 600; background: #de8d00; padding: 0.2em 0.4em; margin: 0 0.6em 0 0.05em; border-radius: var(--border-radius);}

.tab-nav                                        {display: flex; width: 100%; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 0;}
.tab-nav a                                      {display: block; padding: 0.5em 0.4em; font-size: 0.85em; color: #666666; font-weight: 500; text-decoration: underline; border-radius: var(--border-radius); box-sizing: border-box; cursor: pointer; transition: .15s ease-in-out;}
.tab-nav a:hover                                {color: black; text-decoration-color: transparent;}
.tab-nav a.sel                                  {color: white; font-weight: 500; background: var(--color1); text-decoration: none;}
  @media screen and (max-width: 768px)          {
  .tab-nav a                                    {font-size: 0.8em;}
  }
  @media screen and (min-width: 541px)          {
  .tab-nav                                      {margin-left: -0.5rem;}
  .tab-nav a.sel                                {margin: 0 0.5rem; padding: 0.4em 0.6em;}
  }
  @media screen and (max-width: 540px)          {
  .tab-nav                                      {}
  .tab-nav a                                    {width: calc(33.33% - 0.2em); background: rgba(0,0,0,0.06); padding: 0.6em 0.6em; margin: 0.3em 0.3em 0 0;}
  .tab-nav a:nth-child(3n+3)                    {margin-right: 0;}
  }

.message                                        {display: block; width: 100%; padding-bottom: 1em;}
.message > div                                  {display: block; width: 100%; padding: 0.6em 1em; border-radius: var(--border-radius); border: solid 2px transparent; box-sizing: border-box; position: relative; z-index: 2; overflow: hidden;}
.message > div p                                {font-size: 1em; margin: 0; color: white;}
.message > div:before                           {display: block; width: 100%; height: 100%; background: white; position: absolute; left: 0; top: 0; z-index: -1; content: "";}
.message.green > div                            {border-color: var(--color2);}
.message.green > div p                          {color: var(--color2);}
.message.yellow > div                           {border-color: var(--color-yellow);}
.message.yellow > div p                         {color: var(--color-yellow);}
.message.red > div                              {border-color: var(--color-red);}
.message.red > div p                            {color: var(--color-red);}

.profile                                              {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.profile .box                                         {}
.profile .box h2                                      {margin-top: 0;}
.profile .box .form                                   {margin: 0.8em 0 0;}
.profile .box .form-items                             {justify-content: space-between;}
.profile .box:nth-child(n+2)                          {margin-top: 0.8em;}
.profile .box .form .form-item                        {width: 100%; margin-right: 0;}
.profile .box .button                                 {margin-top: 1em;}
.profile .profile-foto                                {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: 0.8em;}
.profile .profile-foto .foto                          {display: block; width: 100%; padding-top: 100%; position: relative; background: #f2f2f2; border: solid 1px rgba(0,0,0,0.1); border-radius: var(--border-radius); overflow: hidden;}
.profile .profile-foto .foto span                     {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.profile .profile-foto .foto span img                 {display: block; width: 100%;}
.profile .profile-foto > div                          {display: block;}
  @media screen and (min-width: 541px)                {
  .profile .box:nth-child(1) .form-item,
  .profile .box:nth-child(3) .form-item,
  .profile .box:nth-child(4) .form-item               {width: calc(50% - 0.2em);}
  .profile .form-item.width100,
  .width100 {
    width: 100% !important;
  }
  .profile .profile-foto .foto                        {width: 8em; padding-top: 8em; margin-top: 0;}
  .profile .profile-foto .form                        {width: calc(100% - 9.5em); margin-top: 0 !important;}
  .profile .profile-foto .form .form-item             {height: 3.4em; margin: 0;}
  .profile .profile-foto .form .form-item > *,
  .profile .profile-foto .form .form-item > * > *     {width: 100%; height: 100%;}
  }
  @media screen and (min-width: 381px) and (max-width: 540px){
  .profile .profile-foto .foto                        {max-width: 14em; padding-top: 14em;}
  }

.payment.box                                    {display: flex; justify-content: space-between; flex-wrap: wrap; background: rgba(0,0,0,0.05); border: none; margin-top: var(--margin-top);}
.payment.box:after                              {display: none;}
.payment.box h2                                 {margin-top: 0;}
.payment.box > a                                {display: block; font-size: 0.85em; padding: 0.7em; background: white; border-radius: var(--border-radius); box-sizing: border-box;}
.payment.box > a img                            {display: block; width: 100%;}
  @media screen and (min-width: 541px)          {
  .payment.box > *                              {width: 100%; justify-content: center;}
  .payment.box > div                            {width: calc(100% - 17em);}
  .payment.box > div p                          {font-size: 0.85em;}
  .payment.box > a                              {width: 16em;}
  }
  @media screen and (max-width: 540px)          {
  .payment.box > *                              {width: 100%; justify-content: center;}
  .payment.box > a                              {width: 26em; margin-top: var(--margin-top);}
  }

.tests.complete td strong                       {font-size: 1em;}

.percentil-result                               {font-weight: 700; white-space: nowrap;}
.percentil-result.r1                            {color: #0ea104;}
.percentil-result.r2                            {color: #7ec11a;}
.percentil-result.r3                            {color: #d3a605;}
.percentil-result.r4                            {color: #c33019;}

.test .progress                                 {display: inline-block; color: var(--color2); font-weight: 700;}

.tasks                                              {display: block; width: 100%;}
.tasks .task                                        {display: block; width: 100%;}
.tasks .task .thead                                 {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box; margin: 2em 0 0;}
.tasks .task .thead > *                             {display: block; font-size: 0.9em; color: #252525; font-weight: 700;}
.tasks .task .tbody                                 {display: flex; width: 100%; flex-wrap: wrap; box-sizing: border-box; margin-top: 0.8em;}
.tasks .task .tbody h4                              {display: block; width: 100%; font-size: 1.3em; color: var(--color1); font-weight: 700; margin: 1.8em 0 1em;}
.tasks .task .tbody .topic                          {display: block; width: 100%;}
.tasks .task .tbody .topic > div                    {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; border-top: solid 1px rgba(0,0,0,0.1); padding-top: 1em; margin-top: 1em;}
.tasks .task .tbody .topic > div:first-child        {padding-top: 0; margin-top: 0; border-top: none;}
.tasks .task .tbody .topic > div span               {font-size: 0.9em; font-weight: 400; line-height: 1.5em;}
.tasks .task .tbody .topic > div > *                {display: block; box-sizing: border-box; position: relative;}
.tasks .task .tbody .topic > div > *:nth-child(1)   {font-weight: 700;}
.tasks .task .tbody .topic > div > *:after          {width: 1.1em; height: 1.1em; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; right: 0.6em; bottom: 1em; content: "";}
.tasks .task .tbody .topic > div > *.good:after     {display: block; background: URL('../images/task-right.svg');}
.tasks .task .tbody .topic > div > *.bad:after      {display: block; background: URL('../images/task-wrong.svg');}
.tasks .task .tbody .topic > div > *.good,
.tasks .task .tbody .topic > div > *.bad            {justify-content: flex-start; text-align: left !important; font-weight: 700; padding: 0 2em 0 0.8em !important;}
.tasks .task .tbody .topic > div > * .correction    {display: inline-block; color: var(--color-red); font-size: 1em; text-decoration: line-through; margin-right: 0.2em;}
.tasks .task .tbody .topic > div > * .correction:before  {content:"(";}
.tasks .task .tbody .topic > div > * .correction:after   {content:")";}
.tasks .task .tip                                   {display: block; width: 100% !important; text-align: left !important; background: rgba(255,255,255,0.6); font-size: 0.8em !important; color: #252525; line-height: 1.4em; padding: 0.8em; border-radius: var(--border-radius); border-left: solid 2px var(--color1); box-sizing: border-box; margin-top: 1em;}
.tasks .task .input                                 {display: flex !important; justify-content: center; align-items: center; text-align: center; height: 3em; font-size: 1em; color: #252525; font-weight: 700; background: rgba(0,0,0,0.05); border-radius: var(--border-radius); padding: 0 !important; position: relative;}
.tasks .task .input input                           {display: block; width: 100%; height: 3em; font-size: 1em; font-weight: 700; color: var(--color1); background: white; padding: 0 2.6em 0 0.8em; border: solid 1px rgba(0,0,0,0.1); outline: none; box-sizing: border-box; border-radius: var(--border-radius); font-family: 'Montserrat', sans-serif; transition: .2s ease-in-out;
}
.tasks .task .input input::-webkit-outer-spin-button,
.tasks .task .input input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.tasks .task .input input[type=number] {
  -moz-appearance: textfield;
}
.tasks .task .input input::placeholder              {color: #999999; opacity: 1; font-weight: 400;}
.tasks .task .input input:-ms-input-placeholder     {color: #999999; font-weight: 400;}
.tasks .task .input input::-ms-input-placeholder    {color: #999999; font-weight: 400;}
.tasks .task.type1                                  {display: flex; flex-wrap: wrap; margin-top: 0.8em;}
.tasks .task.type1 > *                              {display: block; box-sizing: border-box; position: relative;}
.tasks .task.type1 > *:before                       {width: 1.5em; height: 1.5em; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; right: 1.2em; top: 1.2em; content: "";}
.tasks .task.type1 > *.correct:before               {display: block; background: URL('../images/task-right.svg');}
.tasks .task.type1 > *.incorrect:before             {display: block; background: URL('../images/task-wrong.svg');}
.tasks .task.type1 > * .title                       {display: block; width: 100%; font-size: 1em; font-weight: 700; color: var(--color1); padding-right: 1.5em; box-sizing: border-box;}
.tasks .task.type1 > * .opts                        {display: block; width: 100%; margin-top: 0.7em;}
.tasks .task.type1 > * .opts .opt                   {font-size: 0.9em; margin-top: 0.4em; position: relative;}
.tasks .task.type1 > * .opts .opt:before            {width: 0.9em; height: 0.9em; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; left: -1.2em; top: 0.1em; content: "";}
.tasks .task.type1 > * .opts .opt.good label        {font-weight: 600; color: #252525;}
.tasks .task.type1 > * .opts .opt.good:before       {display: block; background: URL('../images/task-right.svg');}
.tasks .task.type1 > * .opts .opt.bad input:checked ~ label
                                                    {text-decoration: line-through; font-weight: 400;}

.tasks .task .thead                                 {display: none;}
.tasks .task .tbody .topic > div > *:nth-child(1)   {width: 1.5rem;}
.tasks .task .tbody .topic > div > *:nth-child(2)   {width: calc(100% - 1.5rem);}
.tasks .task .tbody .topic > div > *:nth-child(n+3) {width: calc(33.33% - 0.3em); margin-top: 2.6em;}
.tasks .task .tbody .topic > div > *:nth-child(n+3)::before
                                                    {display: block; width: 100%; font-size: 0.85em; text-align: center; font-weight: 700; color: #252525; box-sizing: border-box; position: absolute; left: 0; top: -1.9em;}
.tasks .task .tbody .topic > div > *:nth-child(3):before {content: "Montant";}
.tasks .task .tbody .topic > div > *:nth-child(4):before {content: "Débit";}
.tasks .task .tbody .topic > div > *:nth-child(5):before {content: "Crédit";}

.test-result                                        {display: flex; width: 100%; align-items: center; flex-wrap: wrap; margin-top: 1em;}
.test-result > span                                 {display: flex; width: 3.4em; height: 2.8em; justify-content: center; align-items: center; font-size: 1.3em; color: white; font-weight: 700; border-radius: var(--border-radius);}
.test-result.red > span                             {background: var(--color-red);}
.test-result.yellow > span                          {background: var(--color-yellow);}
.test-result.orange>span {
  background: orange;
}
.test-result.green > span                           {background: var(--color2);}
.test-result > div                                  {display: block; margin-left: 1em;}
.test-result > div > span                           {display: block; margin: 0.2em 0;}
  @media screen and (min-width: 641px)              {
  .test .problem,
  .tasks .task .tbody                               {background: #efefef; border-radius: var(--border-radius); padding: 2.1rem;}
  .tasks .task .thead                               {padding: 0 2.1rem;}
  .tasks .task.type1 > *                            {width: calc(50% - 0.2em); margin: 0.45em 0.4em 0 0; padding: 1.5em; background: #efefef; border-radius: var(--border-radius);}
  .tasks .task.type1 > *:nth-child(-n+2)            {margin-top: 0;}
  .tasks .task.type1 > *:nth-child(even)            {margin-right: 0;}
  }
  @media screen and (max-width: 640px)              {
  .test .problem,
  .tasks .task .tbody                               {}
  /* .tasks .task .tbody input                         {background: rgba(0,0,0,0.03);} */
  .tasks .task .tbody .topic > div > *:after        {right: 0.3em;}
  .tasks .task .thead                               {padding: 0 1.4rem;}
  .test .flex .button                               {width: 100%;}
  .tasks .task.type1 > *                            {width: 100%; margin: 1em 0 0.5em;}
  .tasks .task.type1 > *:nth-child(1)               {margin-top: 0;}
  }
  /* Tomas pridal  */
  strike{
    text-decoration: line-through;
  }
  .article--download{
-webkit-border-radius: 15px;
-moz-border-radius:15px;
border-radius:15px;
border: dashed 2px #888;
padding:20px;
margin-top:20px !important;
margin:0 auto;
justify-content: space-between;
align-content: space-around;
flex-wrap: wrap;
max-width: 90%;
align-items: center;
  }
    .article--download h3 {
 margin-bottom: 1em !important; }
   @media screen and (max-width: 730px) {
  .article--download{
    font-size:0.85em;
  }
   }

      @media screen and (max-width: 620px) {
        .article--download {
          flex-direction: column;
          align-items: flex-start;
        }
         .article--download  .button{
           margin-top:0.4rem;
             margin-bottom:1.4rem;
         }
      }

      .onlyprint{
        display:none;
      }

      .pdf
{padding-right: 35px;
margin-bottom:15px !important;
background: url('../images/filetype_pdf.png') no-repeat right  top;
 margin-left:20px;
  padding-bottom:5px;

}
.zfo
{padding-right: 35px;
margin-bottom:15px !important;
background: url('../images/zfo.png') no-repeat right  top;
 margin-left:20px;
  padding-bottom:5px;

}
.doc, .docx, .odt
{padding-right: 35px;
font-size:15px;
padding-top:3px;
 padding-bottom:5px;
margin-bottom:15px !important;
background: url('../images/word.png') no-repeat right  top;
margin-left:20px;


}
.jpg, .JPG, .jpeg, .png, .gif
{padding-right: 35px;
font-size:15px;
padding-top:3px;
padding-bottom:5px;
margin-bottom:15px !important;
background: url('../images/jpg.png') no-repeat right  top;

margin-left:20px;
}
.excel, .xls, .xlsx ,.ods{padding-right: 35px;
margin-bottom:15px !important;
margin-left:20px;
padding-bottom:5px;
background: url('../images/excel.png') no-repeat right top ;

}
.pbix {padding-right: 35px;
margin-bottom:15px !important;
margin-left:20px;
padding-bottom:5px;
background: url('../images/power-bi-logo.png') no-repeat right top ;

}
.zapomenutihesla_click {
  margin-top: 1.4em !important;
  display: inline-block;
  cursor: pointer;
  border-bottom: dashed 1px #333;
}

   .skryj_zobraz_vypl_testy {
                font-size: 14px;
                text-decoration: none;
                color: #333 !important;
                border-bottom: 1px dotted #333;
                position: relative;
                top: 10px
              }

              .switch {
                position: relative;
                display: inline-block;
                top: 8px;
                height: 24px;
                left: 14px;
                width: 46px;
              }

              .switch input {
                opacity: 0;
                width: 0;
                height: 0;
              }

              .slider2 {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                -webkit-transition: .4s;
                transition: .4s;
              }

              .slider2:before {
                position: absolute;
                content: "";
                height: 17px;
                width: 17px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
              }

              input:checked+.slider2 {
                background-color: #2196F3;
              }

              input:focus+.slider2 {
                box-shadow: 0 0 1px #2196F3;
              }

              input:checked+.slider2:before {
                -webkit-transform: translateX(20px);
                -ms-transform: translateX(20px);
                transform: translateX(20px);
              }

              /* Rounded sliders */
              .slider2.round {
                border-radius: 34px;
              }

              .slider2.round:before {
                border-radius: 50%;
              }
.center {
  justify-content: center !important;
}
script {
  display: none !important;
}
cite{font-size: 0.8em;
    font-style: italic;
  }
  .popis--small{
    font-size:11px;
  }