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

.clear { clear: both;height: 1px; line-height: 1px; overflow: hidden; margin-bottom: -1px; }
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:2px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }


html                                            {height: 100%; background: #e6e6e6; overflow-x: hidden;}
html, body                                      {width: 100%;}
body                                            {width: 100%; max-width: 100em; background: #f5f5f5; overflow-x: hidden; border-left: solid 1px rgba(0,0,0,0.1); border-right: solid 1px rgba(0,0,0,0.1); margin: 0 auto; font-family: 'Roboto Condensed', sans-serif; box-sizing: border-box;}
body.fixed                                      {height: 100vh; overflow: hidden;}
body form                                       {display: flex; width: 100%; min-height: 100vh; flex-direction: column; justify-content: space-between; flex-wrap: wrap;}
  @media screen and (min-width: 2200px)         {
  body                                          {font-size: 20px;}
  }
  @media screen and (max-width: 2200px)         {
  body                                          {font-size: 18px;}
  }
  @media screen and (max-width: 2000px)         {
  body                                          {font-size: 17px;}
  }  
  @media screen and (max-width: 1400px)         {
  body                                          {font-size: 16px;}
  }
  @media screen and (max-width: 768px)          {
  body                                          {font-size: 15px;}
  }

:root                                           {
                                                --color6: #29166f;
                                                --color6-hover: #1b0a58;
                                                --color5: #222b81;
                                                --color5-hover: #29166f;
                                                --color4: #18499c;
                                                --color4-hover: #222b81;
                                                --color3: #0f66b6;
                                                --color3-hover: #18499c;
                                                --color2: #077ecb;
                                                --color2-hover: #0f66b6;
                                                --color1: #0093dd;
                                                --color1-hover: #077ecb;
                                                }

.wrapper                                        {display: flex; margin-left: auto; margin-right: auto; width: 90%; box-sizing: border-box; flex-wrap: wrap; position: relative;}
.wrapper.w2                                     {width: 84%;}

.header                                         {display: flex; width: 100%; align-items: center; position: relative; z-index: 1000;}
.header .logo                                   {display: block; height: 100%; padding: 1.1em; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2000;}
.header .logo img                               {display: block; height: 100%;}
.header .menu                                   {width: 100%;}
.header .topbar ul li                           {display: block;}
.header .topbar ul li a                         {display: flex; align-items: center; font-size: 1em; color: var(--color1); font-weight: 600; transition: .2s ease-in-out;}
.header .topbar ul li a img                     {display: block; margin: -0.07em 0.4em 0 0;}
.header .topbar ul li a:hover                   {color: #252525;}
.header .topbar .soc                            {display: flex; align-items: center;}
.header .topbar .soc a                          {display: block; width: 1.4em; height: 1.4em; background: var(--color1); margin-left: 3px; transition: .2s ease-in-out;}
.header .topbar .soc a:first-child              {margin-left: 0;}
.header .topbar .soc a img                      {display: block; width: 100%;}
.header .topbar .soc a:hover                    {background: #252525;}
.header nav                                     {display: flex; width: 100%; justify-content: flex-end; align-items: center;}                            
.header nav ul li                               {display: block; font-size: 1em;}
.header nav ul li:first-of-type                 {padding-left: 0;}
.header nav ul li:last-of-type                  {padding-right: 0; border: none;}
.header nav ul li a                             {display: inline-block; font-size: 1.15em; color: #252525; font-weight: 600; text-transform: uppercase; transition: .2s ease-in-out;}
.header nav ul li a:hover,
.header nav ul li a.sel                         {color: var(--color1);}
.header .searchbar                              {display: flex;}
.header .searchbar input                        {display: block; width: calc(100% - 3em); height: 3em; font-size: 1em; font-weight: 500; color: black; padding: 0 0.8em; background: white; border-radius: 0; border: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; outline: none; box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; transition: .2s ease-in-out;}
.header .searchbar input:focus                  {border-color: var(--color1);}
.header .searchbar button                       {display: block; width: 3em; height: 3em; font-size: 1em; background: var(--color1); outline: none; border: none; padding: 0; cursor: pointer; transition: .2s ease-in-out;}
.header .searchbar button img                   {display: block; width: 100%;}
.header .searchbar button:hover                 {background: var(--color1-hover);}
.header #navicon                                {display: none;}
  @media screen and (min-width: 1080px)         {
  .header                                       {height: 7em;}
  .header .logo                                 {padding: 1.3em;}
  .header .wrapper                              {display: block;}
  .header .menu                                 {display: block;}
  .header .topbar                               {display: flex; width: 100%; justify-content: flex-end; align-items: center; font-size: 0.95em;}                            
  .header .topbar ul                            {display: flex; align-items: center;}
  .header .topbar ul li                         {margin-left: 1em;}
  .header .topbar ul li:nth-of-type(5)          {margin-left: 2em;}
  .header .topbar ul li a img                   {height: 1.1em;}
  .header .topbar .soc                          {margin-left: 2em;}
  .header nav                                   {margin-top: 1em;}
  .header nav ul                                {display: flex; align-items: center;}
  .header nav ul li                             {padding: 0.3em 1.05em; border-right: solid 2px var(--color1);}
  .header nav ul li a                           {letter-spacing: 0.03em;}
  .header .searchbar                            {width: calc(36% - 5em); position: absolute; right: 0; bottom: -9.5em;} 
  .header .searchbar input                      {background: white;}
  .hp .header .searchbar                        {bottom: -4.3em;} 
  }
  @media screen and (min-width: 540px) and (max-width: 1080px){
  .header .searchbar input                      {background: #f5f5f5;}
  .hp .header .searchbar input                  {background: white;}
  }
  @media screen and (max-width: 1080px)         {
  .header                                       {height: 6em;}
  .header .logo                                 {background: none; border: none;}
  .header .wrapper                              {display: flex; width: 90% /* Same as wrapper1 */; justify-content: flex-end;}
  .header .menu                                 {display: flex; min-height: 100vh; justify-content: space-between; background: white; padding: 7em 8% 5em; position: fixed; left: -9999px; top: 0; z-index: 999; opacity: 0; box-sizing: border-box; transition: opacity .2s ease-in-out;}
  .header .topbar                               {display: block; width: 100%; order: 1; padding-left: 60%; position: absolute; left: 0; top: 7em; box-sizing: border-box;}
  .header .topbar ul                            {display: block;}
  .header .topbar ul li                         {margin-bottom: 0.5em;}
  .header .topbar ul li a img                   {width: 1.1em;}
  .header .topbar ul li:nth-of-type(5)          {position: absolute; font-size: 1.15em; left: 8%; top: 17em;}
  .header .topbar ul li:nth-of-type(6)          {position: absolute; font-size: 1.15em; left: 8%; top: 18.8em;}
  .header .topbar .soc                          {font-size: 1.1em; margin-top: 1em;}
  .header nav                                   {display: block; width: 50%; order: 0; position: relative; z-index: 1;}
  .header nav ul                                {display: block;}
  .header nav ul li                             {display: block;}
  .header nav ul li a                           {font-size: 1.6em; text-transform: none; margin-bottom: 0.4em;} 
  .header .searchbar                            {width: 20em; margin-right: 3.5em;}
  .header #navicon                              {display: block; width: 2em; height: 21px; cursor: pointer; position: absolute; right: 0; top: 0.8em; z-index: 10002;}
  .header #navicon span                         {display: block; width: 100%; height: 3px; background: #252525; position: absolute; left: 0; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
  .header #navicon span:nth-child(1)            {top: 0;}
  .header #navicon span:nth-child(2),
  .header #navicon span:nth-child(3)            {top: calc(50% - 1.5px);}
  .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;}
  .header #navicon:hover span                   {background: var(--color1);}
  .header.show .menu                            {left: 0; opacity: 1;}
  }
  @media screen and (min-width: 540px)          {
  .header                                       {background: white;}  
  .hp .header                                   {background: none;}
  }
  @media screen and (max-width: 540px)          {
  .header                                       {margin-bottom: 2.5em;}
  .header .searchbar                            {width: 100%; margin: 0; position: absolute; left: 0; top: 3.5em;}
  .header #navicon                              {top: -0.5em; margin-right: 4.6em;}
  .header #navicon:after                        {display: block; font-size: 1.6em; font-weight: 500; color: #252525; position: relative; right: -1.7em; top: -0.17em; content: "MENU";}
  }

.footer                                                     {display: block; width: 100%; padding: 4em 0; margin-top: 5em; background: white;}
.hp .footer                                                 {margin-top: 0;}
.footer .wrapper > div                                      {display: flex; flex-wrap: wrap;} 
.footer .wrapper > div:nth-child(1) > div                   {display: block;}
.footer .wrapper > div:nth-child(1) h2                      {font-size: 1.2em; font-weight: 600; color: var(--color6); margin: 0 0 0.2em;}
.footer .wrapper > div:nth-child(1) ul                      {display: block; width: auto;}
.footer .wrapper > div:nth-child(1) ul li                   {display: block; font-size: 1em; line-height: 1.4em; color: black; font-weight: 400;}
.footer .wrapper > div:nth-child(1) ul li strong            {font-weight: 600;}
.footer .wrapper > div:nth-child(1) ul li a                 {display: inline-block; color: #252525; text-decoration: underline; text-decoration-color: var(--color1); transition: .2s ease-in-out;}
.footer .wrapper > div:nth-child(1) ul li a:hover           {color: var(--color1-hover); text-decoration-color: transparent;}
.footer .wrapper > div:nth-child(1) > div:last-child        {display: flex; max-width: 100%; flex-wrap: wrap;}
.footer .wrapper > div:nth-child(1) > div:last-child a      {display: block; height: 3em;}
.footer .wrapper > div:nth-child(1) > div:last-child a img  {display: block; height: 100%;}
.footer .wrapper > div:nth-child(2) .logo                   {display: block; width: 6em;}
.footer .wrapper > div:nth-child(2) .logo img               {display: block; width: 100%;}
.footer .wrapper > div:nth-child(2) > div                   {display: flex; justify-content: flex-end; flex-wrap: wrap;}
.footer .wrapper > div:nth-child(2) .soc                    {display: flex; align-items: center;}
.footer .wrapper > div:nth-child(2) .soc a                  {display: block; width: 1.6em; height: 1.6em; background: var(--color1); transition: .2s ease-in-out;}
.footer .wrapper > div:nth-child(2) .soc a:first-child      {margin-left: 0;}
.footer .wrapper > div:nth-child(2) .soc a img              {display: block; width: 100%;}
.footer .wrapper > div:nth-child(2) .soc a:hover            {background: #252525;}
.footer .wrapper > div:nth-child(2) > div > a               {display: inline-block; font-size: 0.95em; color: var(--color1); text-decoration: underline; margin-top: 1em; transition: .2s ease-in-out;}
.footer .wrapper > div:nth-child(2) > div > a:hover         {color: var(--color1-hover); text-decoration-color: transparent;}
.footer .wrapper > div:nth-child(2) p                       {display: block; width: 100%; font-size: 0.85em; color: #666666; margin-top: 1em;}
.footer .wrapper > div:nth-child(2) p a                     {color: #666666; text-decoration: underline;}
.footer .wrapper > div:nth-child(2) p a:hover               {color: #252525; text-decoration: none;}
  @media screen and (min-width: 1080px)                     {
  .footer .wrapper                                          {justify-content: space-between; align-items: stretch;}
  .footer .wrapper > div:nth-child(1)                       {padding-bottom: 6em;}
  .footer .wrapper > div:nth-child(1) > div                 {max-width: 14em; margin-right: 2.3em;}
  .footer .wrapper > div:nth-child(1) > div:last-child      {position: absolute; left: 0; bottom: 0;}
  .footer .wrapper > div:nth-child(1) > div:last-child a    {margin-right: 0.5em;}
  .footer .wrapper > div:nth-child(2)                       {display: block; width: 10em; position: relative;}
  .footer .wrapper > div:nth-child(2) .logo                 {position: absolute; right: -0.5em; top: 0;}
  .footer .wrapper > div:nth-child(2) > div                 {position: absolute; right: 0; bottom: 0;}
  .footer .wrapper > div:nth-child(2) .soc a                {margin-left: 3px;}
  .footer .wrapper > div:nth-child(2) p                     {text-align: right;}
  }
  @media screen and (max-width: 1080px)                     {
  .footer .wrapper > div:nth-child(1)                       {width: 100%; justify-content: center;}
  .footer .wrapper > div:nth-child(1) h2                    {width: 100%; text-align: center;}
  .footer .wrapper > div:nth-child(1) ul                    {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;} 
  .footer .wrapper > div:nth-child(1) ul li                 {text-align: center;}
  .footer .wrapper > div:nth-child(1) ul li:after           {display: inline-block; margin-right: 0.5em; content: ",";}
  .footer .wrapper > div:nth-child(1) ul li:last-child:after{display: none;}
  .footer .wrapper > div:nth-child(1) ul li br              {display: none;}
  .footer .wrapper > div:nth-child(1) > div                 {width: 100%; justify-content: center; margin: 0 0 2.5em;}
  .footer .wrapper > div:nth-child(1) > div:last-child a    {margin: 0.2em;}
  .footer .wrapper > div:nth-child(2)                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
  .footer .wrapper > div:nth-child(2) > div                 {display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
  .footer .wrapper > div:nth-child(2) .soc                  {width: 100%; justify-content: center; margin: 2em 0;}
  .footer .wrapper > div:nth-child(2) .soc a                {margin: 0 2px;}
  .footer .wrapper > div:nth-child(2) p                     {text-align: center;}
  }

.anim                                           {transition-delay: 2s; -ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); opacity: 0; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.anim.play                                      {opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}

.button                                         {display: flex; justify-content: center; align-items: center; font-size: 0.9em; font-weight: 600; padding: 1em 1.2em; border: none; outline: none; cursor: pointer; box-sizing: border-box; position: relative; font-family: 'Roboto Condensed', sans-serif; transition: .2s ease-in-out;}
.button.color                                   {background: var(--color6); color: white;}
.button.color:hover                             {background: var(--color4);}
.button.gray                                    {background: #b3b3b3; color: white;}
.button.gray:hover                              {background: #999999;}
.button.arrow                                   {padding-right: 3em;}
.button.arrow:after                             {display: block; width: 1.5em; height: 100%; background: URL("images/arrow-white-right.svg") no-repeat center center; background-size: 100% auto; position: absolute; right: 1.2em; top: 0; content: "";} 

/*
.button-arrow                                   {display: block; width: 2em; height: 2em; background: URL("images/arrow-white-right.svg") no-repeat center center; background-size: cover; border: solid 0.13em white; box-sizing: border-box;}
*/

.link                                           {display: inline-block; color: var(--color1); font-weight: 600; text-decoration: underline; transition: .15s ease-in-out;}
.link:hover                                     {color: var(--color1-hover); text-decoration-color: transparent;}

.flex                                           {display: flex; width: 100%; flex-wrap: wrap; margin-top: 2.5em;}
.flex.center                                    {justify-content: center;}

section                                         {display: block; width: 100%; padding-top: 4em;}
section.white                                   {background: white;}
section h2                                      {display: block; width: 100%; text-align: center; font-size: 2.4em; line-height: 1.3em; color: #252525; font-weight: 600; box-sizing: border-box; margin: 0 0 0.6em;}

main                                            {display: block; width: 100%; flex-basis: 100%; flex-grow: 1;}
main h1, .main h1                                         {display: block; text-align: left; font-size: 2.2em; line-height: 1.1em; color: #252525; font-weight: 600; margin: 0 0 0.8em;}
main p, main li,
.main p, .main li                                {display: block; width: 100%; text-align: justify; font-size: 1em; line-height: 1.7em; color: #252525; font-weight: 400; box-sizing: border-box;}
main li,
.main li                                         {text-align: left;}
main strong,
.main strong                                     {font-weight: 600;}
main em,
.main em                                         {font-style: italic;}
main p a, main li a,
.main p a, .main li a                            {color: #252525; text-decoration: underline; text-decoration-color: var(--color1); transition: .15s ease-in-out;}
main p a:hover, main li a:hover,
.main p a:hover, .main li a:hover                {color: var(--color1); text-decoration-color: transparent;}
main hr,
.main hr                                         {display: block; width: 100%; height: 1px; background: rgba(0,0,0,0.2); margin: 2.5em 0 2em; border: none;}

.overflow                                       {display: block; width: 100%; overflow-x: auto; margin-top: 1.5rem;}
.overflow > *                                   {min-width: 30em; margin-top: 0;}

.article                                        {display: block; width: 100%; box-sizing: border-box;}
.article .date                                  {display: block; width: 100%; font-size: 1em; color: #666666; font-weight: 600; margin: -1.5em 0 0;}
.article h2                                     {display: block; text-align: left; font-size: 1.8em; line-height: 1.25em; color: var(--color1); font-weight: 700; margin: 1.2em 0 -0.4em;}
.article h3                                     {display: block; font-size: 1.35em; line-height: 1.25em; color: #252525; font-weight: 700; margin: 1.5em 0 -0.4em;}
.article h4                                     {display: block; font-size: 1.1em; line-height: 1.25em; color: #252525; font-weight: 700; margin: 1.5em 0 -0.4em;}
.article .img                                   {display: block; width: 100%; position: relative; padding-top: 56%; margin-top: 1.5rem;}
.article .img.pano                              {padding-top: 28%;}
.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 span img                          {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.article .img:hover span img                    {opacity: 0.8;}
.article p, .article li, .article td            {font-size: 1.1em; text-align: left;}
.article p                                      {margin-top: 1.5rem;}
.article p.small                                {font-size: 0.9em;}
.article ol,
.article ul                                     {margin-top: 1.5rem; padding-left: 3em; box-sizing: border-box;}
.article ul li                                  {display: block; width: 100%; padding-left: 1.25em; box-sizing: border-box; position: relative; margin-top: 0.5em;}
.article ul li:before                           {display: block; width: 0.6em; height: 0.2em; background: var(--color1); position: absolute; left: 0; top: 0.75em; content: "";}
.article ol                                     {list-style: none; counter-reset: li;}
.article ol > li                                {padding-left: 1.6em; position: relative; margin: 0.2em 0 1em; counter-increment: li;}
.article ol > li::before                        {display: bloc; width: 1.75em; content: counter(li) "."; font-size: 1em; color: var(--color1); font-weight: 600; position: absolute; left: 0; top: 0;}
.article ol li:first-child,
.article ul li:first-child                      {margin-top: 0;}
.article ol li ul,
.article ul li ul                               {margin-top: 0.5em;}
.article ol li ul li,
.article ul li ul li                            {font-size: 0.85em;}
.article .highlight                             {display: block; width: 100%; background: var(--color1); padding: 1.5em 2em; margin-top: 1.5rem; box-sizing: border-box;}
.article .highlight > *:first-child             {margin-top: 0;}
.article .highlight p                           {text-align: center; font-size: 1.1em; color: white;}
.article .embed                                 {display: block; width: 100%; margin-top: 1.5em;}
.article .embed > *                             {display: block; width: 100%;}
.article .cols > *                              {margin-top: 1.5em;}
.article .iframe                                {margin-top: 1.5em;}
.article table                                  {width: 100%;}
.article table td, .article table th            {padding: 0.7em; margin-top: 1.5rem;}
.article table th                               {font-size: 1.1em; background: var(--color6); text-align: left; color: white; font-weight: 600;}
.article table tr:nth-child(even) td            {background: rgba(0,0,0,0.04);}
  @media screen and (max-width: 960px)          {
  .article ul                                   {padding-left: 2em;}
  }
.article .floatingbox                               {background: var(--color1); text-align: center; font-size: 1em; line-height: 1.4em; color: white; padding: 1.2em; box-sizing: border-box;}
@media screen and (min-width: 768px)          {
  .article .floatingbox                             {display: inline-block; width: 10em; float: right; margin: 0 0 1em 1em;}
}  
@media screen and (max-width: 768px)          {
  .article .floatingbox                             {display: block; width: 100%; margin: 0 0 1em;}
}

.swiper-button-prev,
.swiper-button-next                             {display: block; position: absolute; top: 50%; width: 2em; height: 2em; opacity: 0.3; z-index: 5; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; margin: 0; cursor: pointer; transition: .2s ease-in-out;}                                  
.swiper-button-prev                             {left: 0; right: auto; background-image: URL('images/arrow-black-left.svg');}
.swiper-button-next                             {right: 0; left: auto; background-image: URL('images/arrow-black-right.svg');}
.swiper-button-prev:hover,
.swiper-button-next:hover                       {opacity: 0.5;}                 
.swiper-button-prev:after,
.swiper-button-next:after                       {display: none;}
.swiper-button-disabled                         {opacity: 0 !important;}

.gallery                                        {display: block; width: 100%; margin-top: 1.5em; position: relative;}
.gallery .slider                                {display: block; width: calc(100% - 6em); margin: 0 3em; overflow: hidden;}
.gallery .swiper-slide                          {display: block; position: relative; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.gallery .swiper-slide > a                      {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; overflow: hidden; position: absolute; left: 0; top: 0;}
.gallery .swiper-slide > a:after                {display: block; width: 100%; height: 100%; border: solid 3px var(--color1); box-sizing: border-box; position: absolute; left: 0; top: 0; content: ""; opacity: 0; transition: .25s ease-in-out;}
.gallery .swiper-slide > a img                  {display: block; width: 100%; transition: .25s ease-in-out;}
.gallery .swiper-slide:hover a:after            {opacity: 1;}
.gallery .swiper-slide:hover a img              {opacity: 0.8;}
.gallery .swiper-button-prev,
.gallery .swiper-button-next                    {top: calc(50% - 1em);}                                  
  @media screen and (min-width: 580px)          {
  .gallery .swiper-slide                        {padding-top: 33%;}
  }
  @media screen and (max-width: 580px)          {
  .gallery .swiper-slide                        {padding-top: 66%;}
  }

.grid                                           {display: flex; width: 100%; flex-wrap: wrap; margin-top: 0.5em;}
.grid > div                                     {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; background: white; padding: 1.4em; box-sizing: border-box; box-shadow: 0 0 0.2em rgba(0,0,0,0.1);}
.grid > div .title                              {font-size: 1em; line-height: 1.3em; font-weight: 600; margin: 0;}
.grid > div .link                               {font-size: 1.1em; margin: 0.1em 0 0;}
  @media screen and (min-width: 1080px)         {
  .grid.g2 > div                                {width: calc(50% - 0.3em); margin: 0.6em 0.6em 0 0;}
  .grid.g2 > div:nth-child(even)                {margin-right: 0;}
  .grid.g2 > div:nth-child(-n+2)                {margin-top: 0;}
  .grid.g3 > div                                {width: calc(33.33% - 0.4em); margin: 0.6em 0.6em 0 0;}
  .grid.g3 > div:nth-child(3n+3)                {margin-right: 0;}
  .grid.g3 > div:nth-child(-n+3)                {margin-top: 0;}
  }
  @media screen and (min-width: 960px) and (max-width: 1080px){
  .grid > div                                   {width: calc(50% - 0.3em); margin: 0.6em 0.6em 0 0;}
  .grid > div:nth-child(even)                   {margin-right: 0;}
  .grid > div:nth-child(-n+2)                   {margin-top: 0;}
  }
  @media screen and (min-width: 768px) and (max-width: 960px){
  .grid.g2 > div                                {width: calc(50% - 0.3em); margin: 0.6em 0.6em 0 0;}
  .grid.g2 > div:nth-child(even)                {margin-right: 0;}
  .grid.g2 > div:nth-child(-n+2)                {margin-top: 0;}
  .grid.g3 > div                                {width: calc(33.33% - 0.4em); margin: 0.6em 0.6em 0 0;}
  .grid.g3 > div:nth-child(3n+3)                {margin-right: 0;}
  .grid.g3 > div:nth-child(-n+3)                {margin-top: 0;}
  }
  @media screen and (min-width: 480px) and (max-width: 768px){
  .grid > div                                   {width: calc(50% - 0.3em); margin: 0.6em 0.6em 0 0;}
  .grid > div:nth-child(even)                   {margin-right: 0;}
  .grid > div:nth-child(-n+2)                   {margin-top: 0;}
  }
  @media screen and (max-width: 480px)          {
  .grid > div                                   {width: 100%; margin: 0.6em 0 0;}
  .grid > div:nth-child(1)                      {margin-top: 0;}
  }

.grid.links1 .title                             {font-weight: 400;}
.grid.links1 a                                  {color: var(--color1); font-size: 1.2em; font-weight: 600; text-decoration: underline; margin-top: 0.3em;}
.grid.links1 a:hover                            {text-decoration-color: transparent;}
.grid.links2                                    {margin-top: 1.5em;}
.grid.links2 > div                              {padding: 0;}
.grid.links2 > div a                            {display: flex; width: 100%; min-height: 100%; align-items: center; flex-wrap: wrap; color: #252525; font-weight: 600; padding: 0.9em 2.1em 0.9em 0.9em; background: URL('images/arrow-blue-right.svg') no-repeat right 0.7em center; background-size: 1.2em auto;  border: solid 1px transparent; box-sizing: border-box; transition: .25s ease-in-out;}
.grid.links2 > div a:hover                      {color: var(--color1); border-color: var(--color1-hover);}
.grid.contacts .title                           {font-size: 1.2em;}
.grid.contacts p                                {margin-top: 0;}
.grid.contacts p:nth-child(2)                   {margin-bottom: 0.25em;}
.grid.contacts a                                {color: var(--color1); font-size: 1em; font-weight: 600; text-decoration: underline; margin-top: 0.3em;}
.grid.contacts a:hover                          {text-decoration-color: transparent;}

.div-aside                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.div-aside > *                                  {display: block;}
.div-aside > aside h2                           {text-align: left;color: #252525; font-weight: 600; margin: 0.5em 0;}
.div-aside > aside .flex                        {margin-top: 1.5em;}
  @media screen and (min-width: 960px)          {
  .div-aside > *                                {width: calc(64% + 1em);}
  .div-aside > aside                            {width: calc(36% - 5em) /* Same as search */; padding-top: 4em;}
  .div-aside > aside h2                         {font-size: 1.5em;}
  .div-aside > aside .flex .button              {width: 100%;}
  }
  @media screen and (max-width: 960px)          {
  .div-aside > *                                {width: 100%; margin-bottom: 3em;}
  .div-aside > aside                            {width: 100%; padding-top: 2em; margin: 0; border-top: solid 1px rgba(0,0,0,0.2);}
  .div-aside > aside h2                         {font-size: 1.8em;}
  .div-aside > aside .flex                      {justify-content: center;}
  }

.cols                                           {display: flex; width: 100%; flex-wrap: wrap;}
.cols > *                                       {display: block;}
.cols > * > *:first-child                       {margin-top: 0;}
  @media screen and (min-width: 480px)          {
  .cols.c2 > *                                  {width: calc(50% - 1em); margin: 1.5em 2em 0 0;}
  .cols.c2 > *:nth-child(even)                  {margin-right: 0;}
  }
  @media screen and (max-width: 480px)          {
  .cols.c2 > *                                  {width: 100%; margin: 1.5em 0 0;}
  }

  @media screen and (min-width: 1080px)         {
  .cols.c3 > *                                  {width: calc(33.33% - 1em); margin: 1.5em 1.5em 0 0;}
  .cols.c3 > *:nth-child(3n+3)                  {margin-right: 0;}
  }
  @media screen and (min-width: 960px) and (max-width: 1080px){
  .cols.c3 > *                                  {width: calc(50% - 1em); margin: 1.5em 2em 0 0;}
  .cols.c3 > *:nth-child(even)                  {margin-right: 0;}
  }
  @media screen and (min-width: 768px) and (max-width: 960px){
  .cols.c3 > *                                  {width: calc(33.33% - 1em); margin: 1.5em 1.5em 0 0;}
  .cols.c3 > *:nth-child(3n+3)                  {margin-right: 0;}
  }
  @media screen and (min-width: 480px) and (max-width: 768px){
  .cols.c3 > *                                  {width: calc(50% - 1em); margin: 1.5em 2em 0 0;}
  .cols.c3 > *:nth-child(even)                  {margin-right: 0;}
  }
  @media screen and (max-width: 480px)          {
  .cols.c3 > *                                  {width: 100%; margin: 1.5em 0 0;}
  .cols.c3 > *:nth-child(1)                     {margin-top: 0;}
  }

.breadcrumbs                                    {display: block; width: 100%;}
.breadcrumbs ul                                 {display: flex; flex-wrap: wrap; padding-bottom: 0.5em;}
.breadcrumbs ul li                              {display: flex; width: auto; align-items: center; padding-left: 1.5em; margin: 0 0 0 0.5em; position: relative;}
.breadcrumbs ul li:first-child                  {padding-left: 0; margin-left: 0;}
.breadcrumbs ul li:before                       {display: inline-block; width: 1.1em; height: 1.1em; opacity: 0.6; margin: 0 1em 0 0; background: URL('images/arrow-black-right.svg') no-repeat center center; background-size: cover; position: absolute; left: 0; top: 0.1em; content: "";}
.breadcrumbs ul li:first-child:before           {display: none;}
.breadcrumbs ul li a                            {display: block; color: #252525; text-decoration: underline; font-weight: 400; opacity: 0.6; line-height: 1.3em; border: none; transition: .25s ease-in-out;}
.breadcrumbs ul li:last-child a                 {text-decoration: none; color: #252525 !important; font-weight: 600; opacity: 1;}
.breadcrumbs ul li a:hover                      {opacity: 1; color: var(--color1); text-decoration-color: transparent;}
  @media screen and (min-width: 1080px)         {  
  .breadcrumbs                                  {margin: -1.5em 0 1em;}
  }
  @media screen and (max-width: 1080px)         {  
  .breadcrumbs                                  {margin: -2em 0 0.5em;}
  }
  @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;}
  } 

.submenu                                        {display: block; width: 100%;}
.submenu > ul                                   {display: flex; width: 100%; flex-wrap: wrap; position: relative;}
.submenu > ul > li                              {display: block; width: 100%; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.submenu > ul > li a                            {display: flex; width: 100%; line-height: 1.1em; color: #252525; font-weight: 600; text-decoration: none; align-items: center; padding: 0.7em 0; border: none; box-sizing: border-box; position: relative; transition: .2s ease-in-out;}
.submenu > ul > li a.sel                        {color: var(--color1);}
.submenu > ul > li > a:after                    {display: block; width: 100%; height: 1px; background: black; opacity: 0.15; position: absolute; left: 0; top: 0; content: "";}
.submenu > ul > li:first-child > a:after        {display: none;}
.submenu > ul > li a:before                     {display: block; width: 1.3em; height: 1.3em; background: URL('images/arrow-blue-right.svg') no-repeat center center; background-size: cover; position: absolute; top: 0.6em; content: "";}
.submenu > ul > li a:hover                      {color: var(--color1);}
  @media screen and (min-width: 960px)          {  
  .submenu > ul > li a                          {padding-left: 1.3em;}  
  .submenu > ul > li a:before                   {left: -0.2em;}
  .submenu > ul > li > ul                       {padding-left: 1.3em; margin-bottom: 0.6em; box-sizing: border-box;}
  .submenu > ul > li > ul > li > a              {padding-top: 0; padding-bottom: 0.6em;}
  .submenu > ul > li > ul > li a:before         {top: -0.1em;}
  .submenu.mobile                               {display: none;}
  }
  @media screen and (max-width: 960px)          {  
  aside .submenu                                {display: none;}
  .submenu.mobile                               {background: rgba(0,0,0,0.06); margin-bottom: 2em;}
  .submenu.mobile > ul > li                     {order: 1;}
  .submenu.mobile > ul > li.responsive          {display: flex; width: 100%; height: 3em; align-items: center; font-weight: 600; color: white; font-weight: 600; background: var(--color1); padding: 0 1em; order: 0; z-index: 2; box-sizing: border-box; cursor: pointer;}
  .submenu.mobile > ul > li.responsive:after    {display: block; width: 3em; height: 3em; background: URL('images/arrow-white-right.svg') no-repeat center center; background-size: 50%; position: absolute; right: 0; top: 0; z-index: 2; content: ""; transition: .2s ease-in-out;} 

  .submenu.mobile > ul > li a                   {height: 0; padding: 0 3em 0 1em; overflow: hidden;}
  .submenu.mobile > ul > li a:before            {right: 0.9em; top: 0.8em;}
  .submenu.mobile > ul > li a.sel               {background: rgba(255,255,255,0.7);}
  .submenu.mobile > ul > li > ul > li           {position: relative; overflow: hidden;}
  .submenu.mobile > ul > li > ul > li:before    {display: block; width: 0.8em; height: 2px; background: var(--color1); position: absolute; left: 1em; top: 1.4em; z-index: 2; content: "";}
  .submenu.mobile > ul > li > ul > li a         {padding-left: 2.2em;}
  .submenu.mobile.show > ul > li a              {height: 3em;}
  .submenu.mobile.show .responsive:after        {transform: rotate(-90deg);}
  }
  @media screen and (min-width: 540px) and (max-width: 960px){  
  .submenu.mobile                               {font-size: 1.2em;}
  }
  @media screen and (max-width: 540px)          {  
  .submenu.mobile                               {font-size: 1.1em;}
  }
  @media screen and (max-width: 440px)          {  
  .submenu.mobile                               {font-size: 1em;}
  }  
  @media screen and (max-width: 360px)          {  
  .submenu.mobile                               {font-size: 0.9em;}
  } 

.pagination                                     {display: flex; width: 100%; justify-content: center; align-items: center; margin-top: 3em;}
.pagination a                                   {display: block; font-size: 1.1em; color: #b8b8b8; font-weight: 600; padding: 0.4em 0.7em; transition: .2s ease-in-out;}   
.pagination a:hover                             {color: var(--color1);}
.pagination a.sel                               {color: white; background: var(--color1); margin: 0 0.3em;}
.pagination a:first-child                       {margin-left: 0 !important;}
.pagination a:last-child                        {margin-right: 0 !important;}

.margin-top                                     {margin-top: 0.3em !important;}
.margin-top-0                                   {margin-top: 0 !important;}
.padding-top-0                                  {padding-top: 0;}
.padding-bottom-0                               {padding-bottom: 0;}

.link-arrow                                     {display: inline-block !important; width: auto !important; font-size: 1em; line-height: 1em; color: #b8b8b8; text-transform: uppercase; font-weight: 300; padding-right: 1.1em; position: relative; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.link-arrow:before,
.link-arrow:after                               {display: block; width: 0.75em; height: 0.75em; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; position: absolute; right: 0; top: 0.1em; content: ""; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}  
.link-arrow:before                              {background-image: URL('images/arrow-gray-right.png');}  
.link-arrow:after                               {background-image: URL('images/arrow-orange.png'); opacity: 0;}  
.link-arrow:hover                               {color: #F27900 !important;}  
.link-arrow:hover:before                        {opacity: 0;}  
.link-arrow:hover:after                         {opacity: 1;}  
.link-arrow.black                               {color: #252525;}
.link-arrow.black:before                        {background-image: URL('images/arrow-black.png');}  

.top                                                        {display: flex; position: relative; padding: 0;}
.top .text                                                  {display: block; width: 100%; position: absolute; left: 0; z-index: 100;}
.top .text h1                                               {display: block; font-size: 3.8em; color: white; font-weight: 600; text-shadow: 0 0 0.2em rgba(0,0,0,0.2), 0 0 0.4em rgba(0,0,0,0.3), 0 0 0.5em rgba(0,0,0,0.6), 0 0 1em rgba(0,0,0,0.6);}
.top .text p                                                {display: block; font-size: 2em; line-height: 1.2em; color: white; font-weight: 600; position: relative; text-shadow: 0 0 0.2em rgba(0,0,0,0.2), 0 0 0.4em rgba(0,0,0,0.3), 0 0 0.5em rgba(0,0,0,0.6), 0 0 1em rgba(0,0,0,0.6);}
.top .text p:after                                          {display: block; width: 10000px; height: 3px; background: var(--color1); position: absolute; content: "";}
.top .slider                                                {display: block; width: 100%; margin: 0; box-sizing: border-box;}
.top .swiper-container                                      {display: block; width: 100%; overflow: hidden; background: black;}
.top .slider .swiper-slide                                  {display: block; width: 100%; opacity: 0.85; background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.top .slider .swiper-slide.s1                               {background-image: URL('images/sliderHP/1.jpg');}
.top .slider .swiper-slide.s2                               {background-image: URL('images/sliderHP/2.jpg');}
.top .slider .swiper-slide.s3                               {background-image: URL('images/sliderHP/3.jpg');}
.top .slider .swiper-slide.s4                               {background-image: URL('images/sliderHP/4.jpg');}
.top .slider .swiper-slide.s5                               {background-image: URL('images/sliderHP/5.jpg');}
.top .slider .swiper-slide.s6                               {background-image: URL('images/sliderHP/6.jpg');}
  @media screen and (min-width: 1080px)                     {
  .top .text                                                {top: 35%;}
  .top .text .wrapper                                       {justify-content: space-between; align-items: flex-start;}
  .top .text h1                                             {width: 63%; order: 1;}
  .top .text p                                              {width: 35%; order: 0; text-align: right; margin-top: 0.2em;}
  .top .text p:after                                        {right: 0; bottom: -0.6em;}
  .top .slider                                              {padding-right: 36%;}
  .top .slider .swiper-slide                                {padding-top: 60%;}
  .top .slider .bullets                                     {display: block; width: 100%; position: absolute; left: 0; bottom: 2.3rem; z-index: 5;}
  .top .slider .swiper-pagination                           {display: flex; width: 100%;}
  .top .slider .swiper-pagination-bullet                    {display: block; width: calc(100% / 6); height: 0.4em; background: transparent; margin: 0 !important; border-radius: 0; transition: .2s ease-in-out;}
  .top .slider .swiper-pagination-bullet-active             {background: white;}
  .top .img-school                                          {display: block; width: 36%; background: URL('images/img-school-color.jpg') no-repeat center center; background-size: cover; height: calc(100% - 7em); position: absolute; right: 0; top: 7em;}
  }
  @media screen and (max-width: 1080px)                     {
  .top .text                                                {bottom: 15%;}
  .top .text h1                                             {max-width: 15em; font-size: 3em;}
  .top .text p                                              {font-size: 1.6em; margin-top: 2em;}
  .top .text p:after                                        {left: 0; top: -1em;}
  .top .text p br                                           {display: none;}
  .top .slider .swiper-slide                                {height: 35em; opacity: 0.6;}
  .top .slider .bullets                                     {display: none;}
  } 
  @media screen and (max-width: 768px)                      {
  .top .text h1                                             {font-size: 2.6em;}
  .top .text p                                              {font-size: 1.4em;}
  }

.disciplines                                                {margin-top: -3rem; padding: 0; position: relative; z-index: 5;}
.disciplines .wrapper                                       {justify-content: center;}
.disciplines .wrapper > div                                 {display: block; padding: 1.5em 1.5em 5em; position: relative; box-sizing: border-box; overflow: hidden;}
.disciplines .wrapper > div:nth-child(1)                    {background: var(--color6);}
.disciplines .wrapper > div:nth-child(2)                    {background: var(--color5);}
.disciplines .wrapper > div:nth-child(3)                    {background: var(--color4);}
.disciplines .wrapper > div:nth-child(4)                    {background: var(--color3);}
.disciplines .wrapper > div:nth-child(5)                    {background: var(--color2);}
.disciplines .wrapper > div:nth-child(6)                    {background: var(--color1);}
.disciplines .wrapper > div:after                           {display: block; width: 100%; height: 100%; opacity: 0.5; mix-blend-mode: multiply; background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; left: 0; top: 0; z-index: 1; content: ""; transition: .2s ease-in-out;}
.disciplines .wrapper > div:nth-child(1):after              {background-image: URL('images/sliderHP/1.jpg');}
.disciplines .wrapper > div:nth-child(2):after              {background-image: URL('images/sliderHP/2.jpg');}
.disciplines .wrapper > div:nth-child(3):after              {background-image: URL('images/sliderHP/3.jpg');}
.disciplines .wrapper > div:nth-child(4):after              {background-image: URL('images/sliderHP/4.jpg');}
.disciplines .wrapper > div:nth-child(5):after              {background-image: URL('images/sliderHP/5.jpg');}
.disciplines .wrapper > div:nth-child(6):after              {background-image: URL('images/sliderHP/7.jpg');}
.disciplines .wrapper > div h2                              {display: block; width: 100%; text-align: left; font-size: 1.4em; color: white; font-weight: 600; line-height: 1.3em; margin: 0; position: relative; z-index: 3;}
.disciplines .wrapper > div .button-arrow                   {position: absolute; right: 1.5em; bottom: 1.5em; z-index: 3;}
.disciplines .wrapper > div a                               {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 4;}
.disciplines .wrapper > div:hover:after                     {opacity: 0.9;}
  @media screen and (min-width: 1080px)                     {
  .disciplines .wrapper > div                               {width: calc(100% / 6);}
  }
  @media screen and (min-width: 640px) and (max-width: 1080px){
  .disciplines .wrapper                                     {justify-content: space-between;}
  .disciplines .wrapper > div                               {width: calc(33.33% - 0.16em); margin-top: 0.24em;}
  .disciplines .wrapper > div:nth-child(-n+3)               {margin-top: 0;}
  }
  @media screen and (max-width: 640px)                      {
  .disciplines .wrapper                                     {justify-content: space-between;}
  .disciplines .wrapper > div                               {width: calc(50% - 0.1em); margin-top: 0.2em;}
  .disciplines .wrapper > div:nth-child(-n+2)               {margin-top: 0;}
  }
  @media screen and (max-width: 380px)                      {
  .disciplines .wrapper > div                               {font-size: 0.9em;}
  }

.message:before                                             {padding: 3em 0;}
.message .wrapper > div                                     {display: flex; width: 100%; align-items: center; flex-wrap: wrap; border: solid 0.15em var(--color1); box-sizing: border-box; position: relative;}
.message .wrapper > div:before                              {display: block; width: 3em; height: 3em; background: URL("images/icon-message.svg") no-repeat center center; background-size: 100% 100%; position: absolute; content: "";}
.message .wrapper > div > div                               {display: block;}
.message h2                                                 {display: block; width: 100%; text-align: left; font-size: 1.4em; font-weight: 600; margin: 0;}
.message h2 a                                               {display: inline-block; color: #252525; transition: .2s ease-in-out;}
.message h2 a:hover                                         {color: var(--color1);}
.message p                                                  {display: block; width: 100%; font-size: 1em; line-height: 1.4em; color: #252525; font-weight: 400; margin-top: 0.1em;}
  @media screen and (min-width: 1080px)                     {
  .message .wrapper > div                                   {justify-content: space-between; padding: 1.5em 1.5em 1.5em 4em;}
  .message .wrapper > div:before                            {left: -1px; top: calc(50% - 1.5em);}
  .message .wrapper > div > div                             {width: calc(100% - 12em);}
  }
  @media screen and (max-width: 1080px)                     {
  .message .wrapper > div                                   {justify-content: center; padding: 4em 1.5em 1.5em;}
  .message .wrapper > div:before                            {top: -1px; left: calc(50% - 1.5em);}
  .message .wrapper > div > div                             {width: 100%; margin-bottom: 1.5em;}
  .message h2, .message p                                   {text-align: center;}
  }

.hp .uchazec-grid                                           {margin-top: 0;}
.uchazec-grid                                               {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin-top: 1.5rem;}
.uchazec-grid > div                                         {display: flex; justify-content: space-between; align-items: flex-end; background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 1.8em; overflow: hidden; position: relative; box-sizing: border-box;}
.uchazec-grid > div:nth-child(1)                            {background-image: URL("images/rozcestnikHP/1.jpg");}
.uchazec-grid > div:nth-child(2)                            {background-image: URL("images/rozcestnikHP/2.jpg");}
.uchazec-grid > div:nth-child(3)                            {background-image: URL("images/rozcestnikHP/3.jpg");}
/*.uchazec-grid > div:nth-child(4)                            {background-image: URL("images/rozcestnikHP/4.jpg");}*/
.uchazec-grid > div:nth-child(4)                            {background-image: URL("/data/images/dospeli_n.jpg");}

.uchazec-grid > div:before                                  {display: block; width: 100%; height: 100%; border: solid 0.3em transparent; position: absolute; left: 0; top: 0; z-index: 2; box-sizing: border-box; content: ""; transition: .2s ease-in-out;}
.uchazec-grid > div:after                                   {display: block; width: 100%; height: 100%; background: URL("images/gradient1.png") repeat-x center center; background-size: auto 100%; position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box; content: "";}
.uchazec-grid > div h2                                      {display: block; width: auto; text-align: left; font-size: 1.8em; color: white; font-weight: 600; line-height: 1.2em; margin: 0; position: relative; z-index: 4;}
.uchazec-grid > div h2:after                                {display: block; width: 10000px; height: 3px; background: var(--color1); position: absolute; right: 0; bottom: -0.3em; content: "";}
.uchazec-grid > div .button-arrow                           {position: relative; z-index: 4;}
.uchazec-grid > div > a                                     {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;}
.uchazec-grid > div:hover:before                            {border-color: var(--color1);}
  @media screen and (min-width: 1081px)                     {
  .uchazec-grid > div                                       {width: calc(25% - 0.2em); padding-top: 9em;}
  .uchazec-grid > div h2                                    {font-size: 1.5em;}
  }
  @media screen and (min-width: 640px) and (max-width: 1080px){
  .uchazec-grid > div                                       {width: calc(50% - 0.2em); padding-top: 10em; margin-top: 0.4em;}
  .uchazec-grid > div:nth-child(-n+2)                       {margin-top: 0;}
  }
  @media screen and (max-width: 640px)                      {
  .uchazec-grid > div                                       {width: 100%; padding-top: 12em; margin-top: 0.3em;}
  .uchazec-grid > div:nth-child(1)                          {margin-top: 0;}
  }

.news                                                       {display: flex; width: 100%; flex-wrap: wrap;}
.news article                                               {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
.news article .img                                          {display: block; width: 100%; padding-top: 56%; position: relative; order: 0; margin-bottom: 0.9em; overflow: hidden;} 
.news article .img span                                     {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: absolute; left: 0; top: 0;}
.news article .img span img                                 {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.news article .img:hover span img                           {opacity: 0.9; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
.news article > div                                         {display: flex; width: 100%; flex-wrap: wrap; order: 1;}
.news article .date                                         {font-size: 0.9em; color: #666666; font-weight: 600; margin: 0 0 0.1em; order: 0;}
.news article h2, .news article h3                          {display: block; width: 100%; font-size: 1.5em; line-height: 1.2em; font-weight: 600; margin: 0; order: 1;}
.news article h2 a, .news article h3 a                      {display: inline-block; color: #252525; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.news article h2 a:hover, .news article h3 a:hover          {color: var(--color1);}
.news article p                                             {text-align: left; font-size: 0.9em; color: #252525; line-height: 1.4em; font-weight: 400; margin-top: 0.3em; order: 2;}
.news article .button                                       {font-size: 0.75em; margin-top: 1.1em; order: 3;}
  @media screen and (min-width: 960px)                      {
  .news article                                             {width: calc(33.33% - 1.2em); margin: 2.5em 1.8em 0 0;}
  .news article:nth-of-type(-n+3)                           {margin-top: 0;}
  .news article:nth-of-type(3n+3)                           {margin-right: 0;}
  aside .news                                               {display: block;}
  aside .news article                                       {width: 100%; margin-bottom: 2em;}
  aside .news article:last-child                            {margin-bottom: 0;}
  }
  @media screen and (max-width: 960px)                      {
  .news article                                             {background: white; padding: 8%; margin-top: 1em; border: solid 1px rgba(0,0,0,0.1);}
  }
  @media screen and (min-width: 640px) and (max-width: 960px){
  .news article                                             {width: 100%; justify-content: space-between; font-size: 0.9em; padding: 4%;}
  .news article:nth-of-type(1)                              {margin-top: 0;}
  .news article .img                                        {width: 35%; padding-top: 25%;}
  .news article > div                                       {width: calc(65% - 1.5em);}
  }
  @media screen and (max-width: 640px)                      {
  .news article                                             {width: 100%; padding: 8%;}
  .news article:nth-of-type(1)                              {margin-top: 0;}
  }

.do-you-know                                                {background: var(--color6); padding: 5em 0; margin-top: 4em; overflow: hidden;}
.do-you-know h2                                             {color: white; font-style: italic; position: relative;}
.do-you-know h2:after                                       {display: block; width: 10000px; height: 3px; background: var(--color1); position: absolute; content: "";}
.do-you-know .swiper-container                              {display: block; margin: 0; padding-bottom: 2em; position: relative; overflow: hidden;}
.do-you-know .swiper-slide                                  {display: block; width: 100%; height: auto; padding-left: 5px; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.do-you-know .swiper-slide p                                {text-align: left; font-size: 1.35em; font-style: italic; color: white; margin: 0;}
.do-you-know .swiper-pagination                             {display: flex; position: absolute; left: 0; bottom: 0;}
.do-you-know .swiper-pagination-bullet                      {display: block; width: 1em; height: 1em; margin: 0 0.4em 0 0 !important; border: none;  border-radius: 100%; box-sizing: border-box; opacity: 0.5; cursor: pointer; transition: .2s ease-in-out;}
.do-you-know .swiper-pagination-bullet:hover,
.do-you-know .swiper-pagination-bullet-active               {background: var(--color1); opacity: 1;}
  @media screen and (min-width: 1080px)                     {
  .do-you-know .wrapper                                     {justify-content: center; align-items: flex-start;}
  .do-you-know h2                                           {width: auto; text-align: right; margin-right: 1em;}
  .do-you-know h2:after                                     {right: 0; bottom: -0.3em;}
  .do-you-know .swiper-container                            {width: 50%;}
  }
  @media screen and (max-width: 1080px)                     {
  .do-you-know h2                                           {width: auto; text-align: left;}
  .do-you-know h2:after                                     {right: 0; bottom: -0.3em;}
  .do-you-know .swiper-container                            {width: 100%;}
  }

.infographics                                               {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.infographics > div                                         {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
.infographics > div img                                     {display: block; width: 4.5rem;}
.infographics > div p                                       {display: block; text-align: left; font-size: 1.2em; font-weight: 500; line-height: 1.4em;}
  @media screen and (min-width: 768px)                      {
  .infographics > div                                       {width: 50%;}
  .infographics > div:nth-child(1)                          {padding: 0 3em 3em 0; border-right: solid 1px rgba(0,0,0,0.15); border-bottom: solid 1px rgba(0,0,0,0.15);}
  .infographics > div:nth-child(2)                          {padding: 0 0 3em 3em; border-bottom: solid 1px rgba(0,0,0,0.15);}
  .infographics > div:nth-child(3)                          {padding: 3em 3em 0 0; border-right: solid 1px rgba(0,0,0,0.15);}
  .infographics > div:nth-child(4)                          {padding: 3em 0 0 3em;}  
  .infographics > div img                                   {margin-right: 1.5rem;}
  .infographics > div p                                     {width: calc(100% - 6rem);}
  }
  @media screen and (min-width: 768px) and (max-width: 960px){
  .infographics > div img                                   {margin: 0 !important;}
  .infographics > div p                                     {width: 100%; text-align: center; margin-top: 1.2em;}
  }  
  @media screen and (max-width: 768px)                      {
  .infographics > div                                       {margin-top: 1.5em;}
  .infographics > div:nth-child(1)                          {margin-top: 0;}  
  .infographics > div img                                   {margin-right: 1.5rem;}
  .infographics > div p                                     {width: calc(100% - 6rem);}
  }
  @media screen and (max-width: 540px)                      {
  .infographics > div                                       {font-size: 0.9em;}
  .infographics > div p                                     {line-height: 1.25em;}
  }

.hp-calendar                                                {display: block; width: 100%; position: relative;}
.hp-calendar:before                                         {display: block; width: 100%; height: 4px; background: var(--color1); position: absolute; left: 0; top: 1.85em; content: "";}
.hp-calendar .swiper-container                              {display: block; width: 100%; padding: 0 1em; box-sizing: border-box; overflow: hidden;}
.hp-calendar .swiper-slide                                  {display: flex; justify-content: center; align-items: flex-start; align-content: flex-start; flex-wrap: wrap; padding: 0 2em; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.hp-calendar .swiper-slide .date                            {display: flex; width: 2.8em; height: 2.8em; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; background: var(--color1); text-align: center; color: white; font-size: 1.3em; line-height: 1em; font-weight: 600; margin: 0 0 0.8em;}
.hp-calendar .swiper-slide .date span                       {display: block; width: 100%; font-size: 0.65em; line-height: 1.1em; margin-top: 0.1em;}
.hp-calendar .swiper-slide h3                               {display: block; width: 100%; text-align: center; font-size: 1.2em; font-weight: 600; margin-bottom: 0.2em;}
.hp-calendar .swiper-slide h3 a                             {display: inline-block; color: #252525; transition: .2s ease-in-out;}
.hp-calendar .swiper-slide h3 a:hover                       {color: var(--color1);}
.hp-calendar .swiper-slide p                                {display: block; width: 100%; text-align: center; font-weight: 500; line-height: 1.3em;}
.hp-calendar .swiper-slide .button                          {font-size: 0.8em; margin-top: 1em;}
  @media screen and (min-width: 1080px)                     {
  .hp-calendar .swiper-slide                                {width: 25%;}
  }
  @media screen and (min-width: 960px) and (max-width: 1080px){
  .hp-calendar .swiper-slide                                {width: 33.33%;}
  }
  @media screen and (min-width: 768px) and (max-width: 960px){
  .hp-calendar .swiper-slide                                {width: 50%;}
  }
  @media screen and (max-width: 960px)                      {
  .hp-calendar .swiper-slide                                {width: 100%;}
  }  

.quote                                                      {display: flex; width: 100%; flex-wrap: wrap; background: white; border: solid 1px rgba(0,0,0,0.1); box-sizing: border-box;}
.quote > a                                                  {display: block; width: 11em; position: relative; overflow: hidden;} 
.quote > a span                                             {display: flex; width: 100%; height: 100%; justify-content: center; align-items: flex-start; position: absolute; left: 0; top: 0;}
.quote > a span img                                         {display: block; width: 100%;}
.quote p                                                    {display: block; font-style: italic; font-weight: 400; font-size: 1em;}
.quote p span                                               {display: block; font-style: normal; font-weight: 600; margin-top: 1em;}
  @media screen and (min-width: 960px)                      {
  .quote                                                    {justify-content: space-between; padding: 3.5em 4.5em;}
  .quote > a                                                {height: 100%;}
  .quote p                                                  {width: calc(100% - 13em); text-align: left;}
  } 
  @media screen and (max-width: 960px)                      {
  .quote                                                    {justify-content: center; padding: 3em 10%;}
  .quote > a                                                {height: 11em;}
  .quote p                                                  {width: 100%; text-align: center; line-height: 1.3em; margin-top: 1em;}
  }

.video                                                      {display: block; width: 100%; padding-top: 45%; position: relative; z-index: 1;}
.video:before                                               {display: block; width: 200%; height: 50%; background: white; position: absolute; left: -50%; bottom: -1px; z-index: -1; content: "";}
.video iframe                                               {display: block; width: 100%; height: 100%; background: black; position: absolute; left: 0; top: 0; z-index: 2;}

.reviews                                                    {display: block; width: 100%;}
.reviews .swiper-container                                  {display: block; width: 100%; padding: 0 2em; position: relative; box-sizing: border-box; overflow: hidden;}
.reviews .swiper-container:before                           {display: block; width: 2em; height: 100%; background: white; position: absolute; left: 0; top: 0; z-index: 2; content: "";} 
.reviews .swiper-container:after                            {display: block; width: 2em; height: 100%; background: white; position: absolute; right: 0; top: 0; z-index: 2; content: "";} 
.reviews .swiper-slide                                      {display: block; padding: 0 2.1em; box-sizing: border-box; position: relative; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.reviews .swiper-slide:before                               {display: block; width: 4em; height: 4em; opacity: 0.5; background: URL("images/quotes.png") no-repeat center center; background-size: contain; position: absolute; left: 1em; top: -1em; content: "";}
.reviews .swiper-slide p                                    {font-style: italic; text-align: left; color: black; font-size: 1.1em; line-height: 1.4em;}
.reviews .swiper-slide p.name                               {font-style: normal; font-weight: 600; color: var(--color1); font-size: 1.1em; margin-top: 0.8em;}
.reviews .swiper-slide p.post                               {font-style: normal; font-weight: 400; color: #666666; font-size: 0.9em; line-height: 1.3em;}
.reviews .swiper-button-prev, .reviews .swiper-button-next  {top: calc(50% - 1em);}
  @media screen and (min-width: 960px)                      {
  .reviews .swiper-slide                                    {width: 50%;}
  }
  @media screen and (max-width: 960px)                      {
  .reviews .swiper-slide                                    {width: 100%;}
  }
  @media screen and (max-width: 640px)                      {
  .reviews .swiper-slide                                    {padding: 0 1.5em;}
  .reviews .swiper-slide p                                  {font-size: 1em;}
  }

.logos                                                      {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap; padding: 2em; box-sizing: border-box;}
.logos a                                                    {display: block; width: auto; height: 3em; margin: 0.6em 1em 0.6em;}
.logos a img                                                {display: block; width: auto; height: 100%;}
  @media screen and (max-width: 960px)                      {
  .logos a                                                  {height: 2.4em;}
  }

.calendar                                                   {display: block; width: 100%;}
.calendar .month                                            {display: flex; width: 100%; flex-wrap: wrap; overflow: hidden; margin-bottom: 4em; box-sizing: border-box;}
.calendar .month h2                                         {display: block; width: auto; font-size: 1.3em; color: var(--color1); font-weight: 600; margin: 0; position: relative;}
.calendar .month h2:before                                  {display: block; width: 10000px; height: 3px; background: var(--color1); position: absolute; right: calc(100% + 0.5em); top: calc(0.55em + 1px); content: "";}
.calendar .month h2:after                                   {display: block; width: 10000px; height: 3px; background: var(--color1); position: absolute; left: calc(100% + 0.5em); top: calc(0.55em + 1px); content: "";}
.calendar .month article                                    {display: flex; width: 100%; flex-wrap: wrap; margin-top: 2em; padding-top: 2em; border-top: solid 1px rgba(0,0,0,0.15);}
.calendar .month article:first-of-type                      {padding-top: 0; border-top: none;}}
.calendar .month article > *                                {order: 1;}
.calendar .month article .date                              {color: var(--color1); margin: 0; order: 0;}
.calendar .month article h3                                 {margin-top: 0;}
.calendar .month article h3 a                               {color: #252525; transition: .2s ease-in-out;}
.calendar .month article h3 a:hover                         {color: var(--color1);}
.calendar .month article p                                  {margin-top: 0.5em;}                             
.calendar .month article .flex                              {margin-top: 1em;}
  @media screen and (min-width: 960px)                      {
  .calendar .month                                          {padding: 0 8em;}
  aside .calendar .month                                    {padding: 0; margin-bottom: 2em;}
  aside .calendar .month h2                                 {font-size: 0.9em;}
  aside .calendar .month article                            {margin-top: 1em;}}
  aside .calendar .month article h3                         {font-size: 1.3em;}
  aside .calendar .month article p                          {font-size: 0.9em; text-align: left;}
  aside .calendar .month article .flex                      {justify-content: flex-start;}
  aside .calendar .month article .flex .button              {width: auto; font-size: 0.8em;}
  }
  @media screen and (max-width: 960px)                      {
  }


.hours span                                                 {display: inline-block; width: 5em; font-weight: 600;}

iframe                                                      {width: 100%;}
.map1 iframe                                                {height: 15em;}
  @media screen and (max-width: 640px)                      {
  .map1 iframe                                              {height: 20em;}
  }

.form                                                       {display: block; width: 100%;}
.form .inputs                                               {display: flex; width: 100%; flex-wrap: wrap;}
.form .inputs > div                                         {display: block; background: white; box-sizing: border-box; position: relative; box-shadow: 0 0 0.2em rgba(0,0,0,0.1);}
.form .inputs > div input,
.form .inputs > div textarea                                {display: block; width: 100%; font-size: 1.1em; font-weight: 600; color: #252525; padding: 1.2em; background: none; border: solid 1px transparent; outline: none; box-sizing: border-box; font-family: 'Roboto Condensed', sans-serif; transition: .2s ease-in-out;}
.form .inputs > div textarea                                {font-weight: 400;}
.form .inputs > div input:focus,
.form .inputs > div textarea:focus                          {border-color: var(--color1);}
.form .inputs > div input::placeholder                      {color: #666666; font-weight: 400;}
.form .inputs > div input:-ms-input-placeholder             {color: #666666; font-weight: 400;}     
.form .inputs > div input::-ms-input-placeholder            {color: #666666; font-weight: 400;}
.form .inputs > div textarea::placeholder                   {color: #666666; font-weight: 400;}
.form .inputs > div textarea:-ms-input-placeholder          {color: #666666; font-weight: 400;}     
.form .inputs > div textarea::-ms-input-placeholder         {color: #666666; font-weight: 400;}
.form .inputs .input-file                                   {display: block; width: 100%;}
.form .inputs .input-file input[type='file']                {position: absolute; left: -9999px;}
.form .inputs .input-file .button                           {font-size: 0.8em; position: absolute; right: 0.7em; top: 1em;}
.form .inputs .input-file label                             {display: flex; width: 100%; height: 100%; align-items: center; font-size: 1.1em; color: #252525; padding: 1.2em; box-sizing: border-box; position: relative; z-index: 2; cursor: pointer;}
.form p span                                                {color: var(--color1);}
.form .flex                                                 {margin-top: 1em;}
  @media screen and (min-width: 640px)                      {
  .form .inputs > div:nth-child(-n+4)                       {width: calc(50% - 0.3em); margin: 0 0.6em 0.6em 0;}
  .form .inputs > div:nth-child(even)                       {margin-right: 0;}
  .form .inputs > div:nth-child(5)                          {width: 100%;}
  .form .inputs > div textarea                              {height: 15em;}
  }
  @media screen and (max-width: 640px)                      {
  .form .inputs > div                                       {width: 100%; margin-bottom: 0.6em;}
  .form .inputs > div textarea                              {height: 20em;}
  .form .flex .button                                       {width: 100%;}
  }  

.search-results                                             {display: block; width: 100%;}
.search-results .phrase                                     {display: block; width: 100%; text-align: center; background: rgba(0,0,0,0.06); padding: 0.8em; box-sizing: border-box;}
.search-results .phrase span                                {font-weight: 600;}
.search-results .result                                     {display: block; max-width: 40em; margin: 1em auto 0; padding-top: 1em; border-top: solid 1px rgba(0,0,0,0.1);}
.search-results .result:first-of-type                       {margin-top: 2em; padding-top: 0; border-top: none;}
.search-results .result .title                              {font-size: 1.3em; font-weight: 600;}
.search-results .result .title a                            {color: var(--color1); text-decoration: underline; transition: .2s ease-in-out;}
.search-results .result .title a:hover                      {text-decoration-color: transparent; color: var(--color1-hover);}
.search-results .result p span                              {font-weight: 600;}