/*------------------------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; }
.center { text-align:center !important; }
b, strong { font-weight:bold; }
a   { color:#000000; }
h2  { font-size:20px; font-weight:normal; color:#767676; }
.cervena                                                { color:#d20119 !important; }

.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; line-height:20px; height:20px; padding:5px 0px 5px 0px; margin:0px auto 0px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

html                                            {display: block; width: 100%; height: 100%; background: white;}
body                                            {display: block; height: 100%; background: URL('images/bg.jpg') no-repeat center top; background-size: 100% auto; margin: 0 auto; position: relative; font-family: 'Montserrat', sans-serif; overflow-x: hidden; overflow-y: auto;}
form                                            {display: block; height: 100%;}
body.fixed                                      {overflow: hidden;}
body.hp                                         {background: none;}
  @media screen and (min-width: 2000px)         {
  body                                          {font-size: 20px;}
  }
  @media screen and (max-width: 2000px)         {
  body                                          {font-size: 19px;}
  }
  @media screen and (max-width: 1800px)         {
  body                                          {font-size: 18px;}
  }  
  @media screen and (max-width: 1600px)         {
  body                                          {font-size: 17px;}
  }  
  @media screen and (max-width: 1400px)         {
  body                                          {font-size: 16px;}
  }  
  @media screen and (max-width: 1200px)         {
  body                                          {font-size: 15px;}
  }  
  @media screen and (max-width: 960px)          {
  body                                          {font-size: 17px;}
  }  
  @media screen and (max-width: 768px)          {
  body                                          {font-size: 16px;}
  }  
  @media screen and (max-width: 540px)          {
  body                                          {font-size: 15px;}
  }  
  @media screen and (max-width: 380px)          {
  body                                          {font-size: 14px;}
  }       

.content                                        {display: block; width: 100%; height: 100%; padding-top: 7em; box-sizing: border-box; position: relative;}
.hp .content                                    {padding-top: 0;}
.wrapper                                        {display: flex; width: 86%; max-width: 55em; justify-content: flex-start; align-items: center; align-content: center; flex-wrap: wrap; margin: 0 auto; position: relative; box-sizing: border-box;}
.hp .wrapper                                    {max-width: 70em;}

/* HEADER ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.header                                         {display: flex; width: 100%; height: 5rem; justify-content: space-between; align-items: center; background: none; position: relative; position: fixed; top: 0; left: 0; z-index: 1000; box-sizing: border-box; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header:hover                                   {background: white;}
.header .logo                                   {display: block; width: 9rem; height: auto; position: relative; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.header .logo img                               {display: block; width: 100%; height: auto;} 
.header #navicon                                {display: none;}
.header nav                                     {display: block; height: 100%;}
.header nav ul                                  {display: flex; width: 100%; height: 100%; align-items: center; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.header nav ul li                               {display: flex; height: 100%; align-items: center;}                                       
.header nav ul li a                             {display: flex; align-items: center; color: #242424; font-size: 0.85rem; font-weight: 700; padding: 0.65em 1em; text-transform: uppercase; border-radius: 0.2em; box-sizing: border-box; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.header nav ul li:hover > a                     {color: #0173c0;}
.header nav ul li a.sel                         {color: white; background: #115c9b; background: -moz-linear-gradient(left,  #115c9b 0%, #0184dc 100%); background: -webkit-linear-gradient(left,  #115c9b 0%,#0184dc 100%); background: linear-gradient(to right,  #115c9b 0%,#0184dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#115c9b', endColorstr='#0184dc',GradientType=1 );}
.header nav ul li a img                         {display: block; width: 1.2em; margin-right: 0.5em;}
.header nav ul li ul                            {height: 0; justify-content: center; align-items: flex-start; position: absolute; margin-top: -1rem; left: 0; top: 5rem; overflow: hidden; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header nav ul li ul::before,
.header nav ul li ul::after                     {display: block; width: 100%; height: 100%; background: white; position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header nav ul li ul li                         {height: auto; opacity: 0; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header nav ul li ul li a                       {padding: 0.5em 0.7em; font-size: 0.9rem; font-weight: 600; text-transform: none;}
.header nav ul li:hover ul                      {height: 2.5rem; margin-top: 0; overflow: visible;}
.header nav ul li:hover ul li                   {opacity: 1;}
.header .soc                                    {display: flex;}
.header .soc a                                  {display: block; position: relative; border-radius: 0.2em; overflow: hidden;}
.header .soc a img                              {display: block; width: 0.7em; height: auto; padding: 0.3em 0.8em; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.header .soc a img:last-child                   {position: absolute; left: 0; top: 0; opacity: 0;}
.header .soc a:hover img                        {opacity: 0; background: #0173c0;}
.header .soc a:hover img:last-child             {opacity: 1;} 
  @media screen and (min-width: 1600px)         {
  .header                                       {padding: 0 calc(50% - 45rem);}
  }
  @media screen and (max-width: 1600px)         {
  .header                                       {padding: 0 1.5rem;}
  }
  @media screen and (min-width: 960px)          {
  .header.bg                                    {background: white;}
  .header.bg nav ul li ul::before               {opacity: 0;}
  .header.bg nav ul li ul::after                {opacity: 1;}
  }
  @media screen and (max-width: 960px)          {
  .header                                       {position: absolute;}
  .header #navicon                              {display: block; position: relative; z-index: 2000;}
  .header #navicon span                         {display: block; width: 1.5em; height: 1.5em; background: URL('images/navicon.png') no-repeat center top; background-size: 100% 200%; cursor: pointer;}
  .header .logo                                 {position: absolute; top: 1.5rem; left: 4rem;}
  .header nav                                   {display: block; width: 100%; height: 100%; overflow: auto; opacity: 0; position: fixed; left: -9999px; top: 0; background: white; z-index: -1; padding: 5rem 2.15rem 2rem; box-sizing: border-box; overflow-y: auto; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s;}
  .header nav > ul                              {display: block; width: 100%; height: auto; position: relative;}
  .header nav > ul::before                      {display: block; width: 100%; height: 5rem; background: white; position: fixed; top: 0; left: 0; z-index: 1; content: "";} 
  .header nav > ul li                           {display: block; width: 100%; opacity: 0; height: auto;}
  .header nav.show > ul > li                    {animation-name: show; animation-duration: .2s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-fill-mode: forwards;}
  .header nav.show > ul > li:nth-child(1)       {animation-delay: 0.1s;} 
  .header nav.show > ul > li:nth-child(2)       {animation-delay: 0.2s;} 
  .header nav.show > ul > li:nth-child(3)       {animation-delay: 0.3s;} 
  .header nav.show > ul > li:nth-child(4)       {animation-delay: 0.4s;} 
  .header nav.show > ul > li:nth-child(5)       {animation-delay: 0.5s;} 
  .header nav > ul > li > a                     {display: inline-block; font-size: 2em; font-weight: 900; text-transform: none; padding: 0.5rem 1.8rem; border-radius: 0 0.25rem 0.25rem 0;}
  .header nav > ul li a.sel                     {background: none; color: #0173c0;}
  .header nav > ul > li > ul                    {display: block; height: auto !important; padding-left: 0.7rem; margin: 0 0 0.8rem; position: relative; top: auto !important; left: auto; box-sizing: border-box;}
  .header nav > ul > li > ul:before,
  .header nav > ul > li > ul::after             {display: none;}
  .header nav > ul > li > ul > li               {display: flex; height: auto; opacity: 1;}
  .header nav > ul > li > ul > li > a           {font-size: 1.1em; font-weight: 800; padding: 0.2rem 1.2rem;}
  .header nav.show                              {left: 0; opacity: 1;}
  .header #navicon.cross span                   {background-position: center bottom;}
  .header nav.show > ul > li:nth-child(5)       {width: auto; position: absolute; right: 0; top: 0.8rem;}
  .header nav.show > ul > li:nth-child(5) a     {display: flex; font-size: 1.2em; padding: 0.2rem 0; font-weight: 800;}
  }
  @media screen and (max-width: 640px)          {
  .header nav.show > ul > li:nth-child(5)       {width: auto; position: relative; right: auto; top: auto; padding-left: 1.9rem; margin-top: 1.8rem;}
  }
  @keyframes show                               {
                                                0% {opacity: 0; margin-left: -35px;}
                                                100% {opacity: 1; margin-left: 0px;}
  } 

.footer                                         {display: block; width: 100%; background: #1e1e1e; padding: 5em 0;}
.footer .wrapper                                {display: block; max-width: 70em;}
.footer .wrapper .row                           {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 1.9em;}
.footer .wrapper .row:last-child                {margin-bottom: 0;}
.footer .wrapper .row .side                     {display: flex; align-items: center; flex-wrap: wrap;}
.footer ul                                      {display: block; margin-right: 2.2em;}
.footer ul:last-child                           {margin-right: 0;}
.footer ul li                                   {display: block; font-size: 0.9em; font-weight: 500; color: white;}
.footer ul li a                                 {display: inline-block; color: #2997e0;}
.footer ul li a:hover                           {text-decoration: underline; color: #20a6ff;}
.footer .soc                                    {display: flex; align-items: center;}
.footer .soc a                                  {display: block; width: 1.6em; margin-right: 0.2em;}
.footer .soc a:last-child                       {margin-right: 0;}
.footer .soc a img                              {opacity: 0.85; display: block; width: 100%; height: auto; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.footer .soc a:hover img                        {opacity: 1;}
.footer .motto                                  {display: block; font-size: 1.3em; color: #595959; font-style: italic; font-weight: 600;}
.footer .copyright                              {font-size: 15px; text-align: right; color: #595959; font-weight: 600;}
.footer .copyright a                            {color: #595959; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.footer .copyright a:hover                      {color: white;}
  @media screen and (max-width: 960px)          {
  .footer .wrapper .row                         {display: block;}
  .footer ul                                    {width: 100%; margin: 0 0 1.5em;}
  .footer ul li                                 {text-align: center; font-size: 1em;}
  .footer .soc                                  {width: 100%; justify-content: center; margin-bottom: 0;}
  .footer .motto                                {width: 100%; text-align: center; margin-bottom: 1.5em;}
  .footer .soc a                                {width: 2em; margin-right: 0.2em;}
  .footer .copyright                            {width: 100%; text-align: center; font-size: 0.8em;}
  }       
  
.button                                         {display: flex; justify-content: center; align-items: center; outline: none; border: solid 0.15em transparent; cursor: pointer; background: none; font-size: 0.9em; font-weight: 600; position: relative; padding: 0.8em 1.8em; box-sizing: border-box; font-family: 'Montserrat', sans-serif; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.button.border                                  {color: #0877c1; border-color: #0877c1;}
.button.border:hover                            {background: #0877c1; color: white;}

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

.content article h1                             {display: block; font-size: 2.8em; font-weight: 800; margin-bottom: 0.8rem; color: #0173c0; background: -webkit-linear-gradient(0deg, #115b99, #0088e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.content article h2                             {display: block; font-size: 1.8em; font-weight: 800; margin: 1.5em 0 0.35em; color: #1c1c1c; background: -webkit-linear-gradient(0deg, #1c1c1c, #5f5f5f); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.content article ul.list1,
.content article p                              {display: block; width: 100%; font-size: 1em; font-weight: 300; color: #1c1c1c; text-align: left; line-height: 1.5em; margin-bottom: 2em;}
.content article .highlight                     {display: block; font-size: 1.2em; line-height: 1.3em; text-align: left; font-weight: 700; margin: 0; color: #0173c0; color: #0173c0; background: -webkit-linear-gradient(0deg, #115b99, #0088e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.list1                                          {display: block;}
.list1 li                                       {padding-left: 1em; font-weight: 300; box-sizing: border-box; position: relative; margin-bottom: 0.1em;}
.list1 li::before                               {display: block; width: 0.5em; height: 0.5em; background: white; border: 0.14em solid #0877c1; border-radius: 0.1em; box-sizing: border-box; position: absolute; left: 0.05em; top: 0.48em; content: "";}
.list1 li strong,
.content article p strong                       {font-weight: 500;}
.content article .cols                          {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 2em 0;}
.content article .cols > div                    {display: flex; flex-wrap: wrap; margin-bottom: 5em;}
.content article .cols > div > div              {display: block; width: 100%; order: 0;} 
.content article .cols > div > .text            {display: flex; flex-wrap: wrap; order: 1;}
.content article .cols img                      {display: block; width: 100%; height: auto;}
.content article .cols.c2 > div                 {width: 47.5%;}
.content article .cols.c2 img                   {margin-bottom: 1rem;}
  @media screen and (max-width: 600px)          {
  .content article .cols                        {display: block; margin-bottom: 1.4em;}
  .content article .cols > div                  {width: 100% !important;}
  }

/* HOMEPAGE--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.top                                            {display: block; width: 100%; height: 100%; min-height: 35em; background: URL("images/top2024.jpg") no-repeat center bottom, URL("images/top.jpg") no-repeat center bottom; background-size: auto 95%; position: relative;}
.top:after                                      {display: block; width: 100%; height: 100%; background: URL("images/top-mask.png") no-repeat center center; background-size: 100% 100%; position: absolute; left: 0; top: 0; z-index: 1; content: "";} 
.top .wrapper                                   {justify-content: center; align-items: center; height: 100%; z-index: 2;}
.top .wrapper .text                             {display: block; position: relative;}
.top .wrapper .text h1                          {display: block; text-align: center; font-size: 5.5em; font-weight: 900; line-height: 1em; color: #242424; text-shadow: 0 0 0.2em white, 0 0 0.3em white, 0 0 0.35em white, 0 0 0.4em white, 0 0 0.45em white;}
.top .wrapper .text h1 span                     {color: #0173c0;}
.top .wrapper .text p                           {display: block; text-align: center; font-size: 1.5em; font-weight: 900; line-height: 1.2em; color: #242424; text-shadow: 0 0 0.2em white, 0 0 0.3em white, 0 0 0.35em white, 0 0 0.4em white, 0 0 0.6em white, 0 0 0.8em white, 0 0 1em white;;}
  @media screen and (max-width: 960px)          {
  .top .wrapper .text h1                        {font-size: 4em;}
  .top .wrapper .text p                         {font-size: 1.2em;}
  }
  @media screen and (max-width: 400px)          {
  .top .wrapper .text p br                      {display: none;}
  }  
  
.icon-scroll, .icon-scroll:before               {position: absolute; margin-bottom: 10px; left: 50%; bottom: 50px;}
.icon-scroll                                    {width: 30px; height: 50px; margin-left: -15px; box-shadow: inset 0 0 0 2px #0173c0; border-radius: 15px;}
.icon-scroll:before                             {content: ''; width: 6px; height: 6px; background: #0173c0; left: calc(50% - 3px); top: 8px; border-radius: 100%; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: scroll;}
  @media screen and (max-width: 1080px)         {
  .icon-scroll                                  {width: 26px; height: 46px; margin-left: -13px; border-radius: 13px;}
  }      
  @keyframes scroll                             {
                                                0%   {opacity: 1;}
                                                100% {opacity: 0; transform: translateY(26px);} 
  }    

.infographics                                   {display: block; width: 100%;}
.infographics .wrapper                          {justify-content: space-between; align-items: flex-start; padding: 5em 0;}
.infographics .wrapper > div                    {display: block; width: calc(25% - 1.1em); padding-top: 2em; position: relative; -ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.infographics .wrapper > div.anim               {animation: scale1 0.3s ease-in-out forwards 1;}
.infographics .wrapper > div.anim:nth-child(1)  {animation-delay: 0.2s;}
.infographics .wrapper > div.anim:nth-child(2)  {animation-delay: 0.4s;}
.infographics .wrapper > div.anim:nth-child(3)  {animation-delay: 0.6s;}
.infographics .wrapper > div.anim:nth-child(4)  {animation-delay: 0.8s;}
.infographics img                               {display: block; width: 5em; height: auto; margin: 0 auto 1em;}
.infographics p                                 {display: block; width: 100%; text-align: center; font-size: 1em; line-height: 1.35em; color: #242424; font-weight: 400;}
.infographics p strong                          {font-weight: 600; color: black;}
.infographics .wrapper > div::after             {display: block; width: 100%; text-align: center; font-size: 11em; font-weight: 900; color: #f5f5f5; position: absolute; left: 0; top: 0; z-index: -1; content: "";}
.infographics .wrapper > div:nth-child(1)::after{content: "1";}
.infographics .wrapper > div:nth-child(2)::after{content: "2";}
.infographics .wrapper > div:nth-child(3)::after{content: "3";}
.infographics .wrapper > div:nth-child(4)::after{content: "4";}
  @keyframes scale1                             {
                                                0%    {-ms-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8);}
                                                100%  {-ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
  }  
  @media screen and (min-width: 960px) and (max-width: 1200px){
  .infographics .wrapper > div                  {display: flex; width: calc(50% - 1.1em); align-items: center;}
  .infographics img                             {width: 4.5em; margin: 0 1em 0 0;}
  .infographics p                               {text-align: left;}
  .infographics .wrapper > div::after           {display: none;}
  }
  @media screen and (max-width: 960px)          {
  .infographics .wrapper > div                  {width: 45%; padding-top: 7%;}
  .infographics .wrapper > div:nth-child(1),
  .infographics .wrapper > div:nth-child(2)     {margin-bottom: 1.5em;}
  .infographics img                             {width: 6em; margin: 0 auto 0.7em;}
  .infographics .wrapper > div::after           {font-size: 12em;}
  } 
  @media screen and (max-width: 540px)          {
  .infographics .wrapper                        {display: block;}
  .infographics .wrapper > div                  {width: 100%; max-width: 20em; margin: 0 auto; padding-top: 3em;}
  }             

.services-grid                                  {display: block; width: 100%;}
.services-grid .wrapper                         {justify-content: space-between; padding-bottom: 5em; align-items: stretch;}
.services-grid .wrapper > div                   {display: block; width: 33.33%; padding: 3%; box-sizing: border-box; border-radius: 0.3em; position: relative; top: -3.5em; opacity: 0; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.services-grid .wrapper > div.anim              {animation: fade-in 0.8s ease-in-out forwards 1;}
.services-grid .wrapper > div > a               {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.services-grid .img                             {display: block; width: 100%; max-width: 20em; position: relative; margin: 0 auto;}
.services-grid .img img                         {display: block; width: 100%; height: auto; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.services-grid .img img:last-child              {position: absolute; left: 0; top: 0; opacity: 0; -ms-transform: scale(.7,.7); -webkit-transform: scale(.7,.7); transform: scale(.7,.7);}
.services-grid .text                            {display: block; width: 100%;}
.services-grid .text p                          {display: block; width: 100%; text-align: center; font-size: 1em; line-height: 1.45em; color: #242424; font-weight: 400; margin-top: 0.5em; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.services-grid .text p.title                    {font-size: 1.2em; line-height: 1.1em; font-weight: 800; margin: 0;}
.services-grid .text p.link                     {font-size: 0.8em; font-weight: 500; text-transform: uppercase; text-decoration: underline; color: #0173c0; margin-top: 1em; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.services-grid .text p.link:hover               {color: #44adf3; text-decoration: none;}
.services-grid .wrapper > div:hover .img img    {opacity: 0; -ms-transform: scale(.7,.7); -webkit-transform: scale(.7,.7); transform: scale(.7,.7);}
.services-grid .wrapper > div:hover .img img:last-child
                                                {opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
  @keyframes fade-in                            {
                                                0%    {opacity: 0; top: -70px;}
                                                100%  {opacity: 1; top: 0;}
  } 
  @media screen and (min-width: 1200px)         {
  .services-grid .wrapper > div:hover           {background: #0173c0;}
  .services-grid .wrapper > div:hover .text p   {color: #d0edff;}
  .services-grid .wrapper > div:hover .text p.title,
  .services-grid .wrapper > div:hover .text p a {color: white;}
  }
  @media screen and (max-width: 1200px)         {
  .services-grid .wrapper > div                 {width: calc(50% - 1em); padding: 0; margin-bottom: 2.5em;}
  .services-grid .wrapper > div:hover           {background: none;}
  } 
  @media screen and (max-width: 540px)          {
  .services-grid .wrapper                       {justify-content: center;}
  .services-grid .wrapper > div                 {width: 100%; max-width: 20em;}
  .services-grid .wrapper > div:last-child      {margin: 0;}
  }        

.reviews                                        {display: block; width: 100%; padding: 5em 0; background: rgba(0,0,0,0.05);}
.reviews .wrapper                               {display: block;}
.reviews .swiper-container                      {display: block; margin: 0 auto; position: relative;}
.reviews .swiper-slide                          {display: block; width: auto; height: auto; opacity: 0; box-sizing: border-box; background: URL('images/reviews.jpg') no-repeat left 1em top; background-size: 1.5em auto; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.reviews .swiper-slide.anim                     {animation: opacity 0.8s ease-in-out forwards 1;}
.reviews .swiper-slide-next                     {animation-delay: 0.3s !important;}
.reviews .swiper-slide .client                  {display: flex; align-items: center; margin-bottom: 1em;}
.reviews .swiper-slide .client img              {display: block; width: 2.5em; height: 2.5em; margin-right: 1em; border-radius: 100%;}
.reviews .swiper-slide .client p                {display: block; font-size: 1em; line-height: 1.4em; color: #252525; font-weight: 600;}
.reviews .swiper-slide .client p span           {display: block; font-size: 0.75em; color: #252525; font-weight: 400;}
.reviews .swiper-slide .text                    {display: block;  color: black; font-size: 0.9em; color: black; font-weight: 300; line-height: 1.4em; font-style: italic;}     
.reviews .swiper-button-prev,
.reviews .swiper-button-next                    {display: block; width: 2.5em; height: 2.5em; opacity: 0.15; background-position: center center; background-repeat: no-repeat; background-size: auto 100%; position: absolute; top: calc(50% - 1.25em); z-index: 500; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}                                  
.reviews .swiper-button-prev                    {background-image: URL('images/reviews-prev.jpg');}
.reviews .swiper-button-next                    {background-image: URL('images/reviews-next.jpg');}
.reviews .swiper-button-prev:hover,
.reviews .swiper-button-next:hover              {opacity: 0.3; cursor: pointer;} 
  @keyframes opacity                            {
                                                0%    {opacity: 0;}
                                                100%  {opacity: 1;}
  } 
  @media screen and (min-width: 768px)          {
  .reviews .swiper-container                    {width: calc(100% + 5em); left: -2.5em;}
  .reviews .swiper-slide                        {padding: 1em 3em 0;}
  .reviews .swiper-button-prev                  {left: -3em;}
  .reviews .swiper-button-next                  {right: -3em;}
  }
  @media screen and (max-width: 768px)          {
  .reviews .swiper-container                    {width: 100%;}
  .reviews .swiper-slide                        {padding: 1em 2em 0; background-position: left 0.5em top;}
  .reviews .swiper-button-prev                  {left: -1.5em;}
  .reviews .swiper-button-next                  {right: -1.5em;}
  }                  

.partners                                       {display: block; width: 100%; padding: 5em 0; background: white;}
.partners .wrapper                              {max-width: 70em; justify-content: center;}
.partners .wrapper a                            {display: block; width: auto; height: 4.5em; margin: 1em 1.3em; opacity: 0;}
.partners .wrapper a.anim                       {animation: opacity2 0.8s ease-in-out forwards 1;}
.partners .wrapper a img                        {display: block; width: auto; height: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.partners .wrapper a:nth-child(1)               {animation-delay: 0s;}
.partners .wrapper a:nth-child(2)               {animation-delay: 0.1s;}
.partners .wrapper a:nth-child(3)               {animation-delay: 0.2s;}
.partners .wrapper a:nth-child(4)               {animation-delay: 0.3s;}
.partners .wrapper a:nth-child(5)               {animation-delay: 0.4s;}
.partners .wrapper a:nth-child(6)               {animation-delay: 0.5s;}
.partners .wrapper a:nth-child(7)               {animation-delay: 0.6s;}
.partners .wrapper a:nth-child(8)               {animation-delay: 0.7s;}
.partners .wrapper a:nth-child(9)               {animation-delay: 0.8s;}
.partners .wrapper a:nth-child(10)              {animation-delay: 0.9s;}
.partners .wrapper a:nth-child(11)              {animation-delay: 1s;}
.partners .wrapper a:nth-child(12)              {animation-delay: 1.1s;}
.partners .wrapper a:nth-child(13)              {animation-delay: 1.2s;}
.partners .wrapper a:nth-child(14)              {animation-delay: 1.3s;}
.partners .wrapper a:nth-child(15)              {animation-delay: 1.4s;}
.partners .wrapper a:nth-child(16)              {animation-delay: 1.5s;}
.partners .wrapper a:nth-child(17)              {animation-delay: 1.6s;}
.partners .wrapper a:nth-child(18)              {animation-delay: 1.7s;}
.partners .wrapper a:nth-child(19)              {animation-delay: 1.8s;}
.partners .wrapper a:nth-child(20)              {animation-delay: 1.9s;}
.partners .wrapper a:nth-child(21)              {animation-delay: 2s;}
.partners .wrapper a:nth-child(22)              {animation-delay: 2.1s;}
.partners .wrapper a:nth-child(23)              {animation-delay: 2.2s;}
.partners .wrapper a:nth-child(24)              {animation-delay: 2.3s;}
  @keyframes opacity2                           {
                                                0%    {opacity: 0;}
                                                100%  {opacity: 1;}
  } 

.calculation                                    {display: block; width: 100%; background: URL("images/calculation.jpg") no-repeat right top; background-size: cover;}
.calculation .wrapper                           {padding: 5em 0; max-width: 70em;}
.calculation .main                              {display: block; width: 30em;}
.calculation .main h2                           {display: block; font-size: 2.5em; font-weight: 900; margin-bottom: 0.3em; color: #0173c0; background: -webkit-linear-gradient(0deg, #115b99, #0088e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.calculation .main p                            {display: block; font-size: 1em; font-weight: 500; color: #2d2d2d; line-height: 1.4em; margin: 1em 0 1.3em;}
.calculation .main p strong                     {font-weight: 800; color: black;}
.calculation .main .button                      {display: inline-block;}
.hp .calculation .main h2,
.hp .calculation .main p,
.hp .calculation .main .button                  {opacity: 0;}
.hp .calculation .main h2.anim,
.hp .calculation .main p.anim,
.hp .calculation .main .button.anim             {animation: opacity3 0.8s ease-in-out forwards 1;}
.hp .calculation .main h2.anim                  {animation-delay: 0s;}
.hp .calculation .main p.anim                   {animation-delay: 0.3s;}
.hp .calculation .main .button.anim             {animation-delay: 0.6s;}      
  @keyframes opacity3                           {
                                                0%    {opacity: 0;}
                                                100%  {opacity: 1;}
  } 
  @media screen and (max-width: 960px)          {
  .calculation                                  {background-image: URL("images/calculation-mobile.jpg"); background-size: cover; background-position: center center;}
  .calculation .wrapper                         {justify-content: center;}
  .calculation .main                            {width: 100%;}
  .calculation .main h2                         {width: 100%; text-align: center;}
  .calculation .main p                          {width: 100%; text-align: center;}
  .calculation .main .button                    {display: flex; width: 13em; margin: 0 auto;}
  }    

.filter                                         {display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; background: rgba(0,0,0,0.03); padding: 0.8em 1.2em; box-sizing: border-box;}
.filter p                                       {display: block; width: 10em; color: #acacac; font-size: 0.85em; font-weight: 500;}
.filter .overflow                               {display: block; width: calc(100% - 9em);}
.filter .options                                {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap;}
.filter .options span                           {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; opacity: 0.45; font-size: 0.85em; color: #252525; font-weight: 500; padding: 0.5em 1em; position: relative; border-right: solid 1px rgba(0,0,0,0.08); cursor: pointer; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.filter .options span:last-child                {border: none;}
.filter .options span::before                   {display: block; width: 1.5em; height: 1.5em; margin-right: 0.4em; background-size: 100% 200%; background-repeat: no-repeat; background-position: center top; content: "";}
.filter .options span:nth-child(1)::before      {background-image: URL("images/filter-icon-web.png");}
.filter .options span:nth-child(2)::before      {background-image: URL("images/filter-icon-eshop.png");}
.filter .options span:nth-child(3)::before      {background-image: URL("images/filter-icon-logo.png");}
.filter .options span:nth-child(4)::before      {background-image: URL("images/filter-icon-print.png");}
.filter .options span:nth-child(5)::before      {background-image: URL("images/filter-icon-fb.png");}
.filter .options span:nth-child(6)::before      {background-image: URL("images/filter-icon-other.png");}
.filter .options span:hover                     {opacity: 0.7;}
.filter .options span.sel                       {opacity: 1; color: #0173c0;}
.filter .options span.sel::before               {background-position: center bottom;}
  @media screen and (max-width: 960px)          {
  .filter                                       {padding: 0; background: none; margin-top: 20px;}
  .filter p                                     {width: 100%; font-size: 1.15em; color: #252525; font-weight: 600; text-align: center; margin-bottom: 0.8em;}  
  .filter .overflow                             {width: 100%; background: rgba(0,0,0,0.03); padding: 0.9em 0;}
  } 
  @media screen and (max-width: 768px)          {
  .filter .options span                         {display: block; padding: 6px 20px;}
  .filter .options span::before                 {width: 1.8em; height: 1.8em; margin: 0 auto 0.3em;}
  }  

  @media screen and (max-width: 520px)          {
  .filter .overflow                             {overflow: auto;}
  .filter .options                              {width: 30em;}
  }                    

.portfolio                                      {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin: 1.7em 0 6em;}
.portfolio .item                                {display: block; width: calc(33.33% - 0.15em); margin-bottom: 0.2em; background: white; position: relative; overflow: hidden; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.portfolio .item.empty                          {height: 1px; visibility: hidden; background: none;}
.portfolio .item .img                           {display: block; width: 100%; overflow: hidden;} 
.portfolio .item .img img                       {display: block; width: 100%; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;} 
.portfolio .item::after                         {display: block; width: 4em; height: 4em; background: URL("images/portfolio-icon-more.png") no-repeat center center; background-size: cover; position: absolute; right: -4em; bottom: -4em; z-index: 3; content: ""; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.portfolio .item .info                          {display: block; width: 100%; height: 100%; padding: 11% 10%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; box-sizing: border-box; -ms-transform: scale(0.9,0.9); -webkit-transform: scale(0.9,0.9); transform: scale(0.9,0.9); -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.portfolio .item h2                             {display: block; width: 100%; font-size: 1.2em; font-weight: 800; color: #0173c0; background: -webkit-linear-gradient(0deg, #115b99, #0088e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.portfolio .item ul                             {display: flex; width: 100%; flex-wrap: wrap; margin-top: 0.5em;}
.portfolio .item ul li                          {display: block; font-size: 0.8em; line-height: 1.5em; font-weight: 400; color: black;}
.portfolio .item ul li:after                    {display: inline-block; margin-right: 0.25em; content: ",";}
.portfolio .item ul li:last-child:after         {display: none;}
.portfolio .item p                              {display: block; font-size: 0.8em; line-height: 1.5em; font-weight: 400; color: black; margin-top: 0.5em;}
.portfolio .item a                              {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; cursor: pointer;}
.portfolio:hover .item:hover::after             {bottom: 0; right: 0;}
.portfolio .item:hover .info                    {opacity: 1; -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1);}
.portfolio .item:hover .img img                 {opacity: 0.1; -webkit-filter: grayscale(100%); filter: grayscale(100%); -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
.portfolio .item.others:after                   {display: none;}
.portfolio .item.others:hover .img img          {opacity: 0.9; -webkit-filter: none; filter: none;}
  @media screen and (max-width: 768px)          {
  .portfolio .item                              {width: calc(50% - 0.1em);}
  }
  @media screen and (max-width: 420px)          {
  .portfolio .item                              {width: 100%;}
  } 
                      
.web-building                                   {display: flex; justify-content: space-between; flex-wrap: wrap; background: rgba(0,0,0,0.04);}
.web-building li                                {display: flex; width: calc(50% - 2em); justify-content: space-between; align-items: center; margin: 0 0 3em; color: black; font-size: 1em; line-height: 1.4em; font-weight: 400; position: relative;}
.web-building li strong                         {font-weight: 500;}
.web-building li img                            {display: block; width: 6em; height: auto; background: white; border: solid 1px rgb(230,230,230); border-radius: 0.3em; box-sizing: border-box;}
.web-building li span                           {display: block; width: calc(100% - 7em);} 
.web-building li::before                        {display: flex; width: 1.5em; height: 1.5em; justify-content: center; align-items: center; font-size: 0.8em; color: white; font-weight: 600; background: #0173c0; border-radius: 0.2em; position: absolute; left: -0.2em; top: -0.2em; box-sizing: border-box; content: ""} 
.web-building li:nth-child(1)::before           {content: "1";}
.web-building li:nth-child(2)::before           {content: "2";}
.web-building li:nth-child(3)::before           {content: "3";}
.web-building li:nth-child(4)::before           {content: "4";}
.web-building li:nth-child(5)::before           {content: "5";}
.web-building li:nth-child(6)::before           {content: "6";}
.web-building li:nth-child(7)::before           {content: "7";}
.web-building li:nth-child(8)::before           {content: "8";}
.web-building li:nth-child(9)::before           {content: "9";}
.web-building li:nth-child(10)::before          {content: "10";}
.web-building li:last-child                     {width: 100%; margin: 0; font-size: 0.9em; text-align: center; font-style: italic; color: white; line-height: 1.5em; padding: 5%; box-sizing: border-box; border-radius: 5px; background: #115c9b; background: -moz-linear-gradient(left,  #115c9b 0%, #0184dc 100%); background: -webkit-linear-gradient(left,  #115c9b 0%,#0184dc 100%); background: linear-gradient(to right,  #115c9b 0%,#0184dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#115c9b', endColorstr='#0184dc',GradientType=1 );}
.web-building li:last-child::before             {display: none;} 
  @media screen and (min-width: 960px)          {
  .web-building                                 {width: calc(100% + 6em); padding: 4em; margin: 1.5em -3em;}
  }
  @media screen and (max-width: 960px)          {
  .web-building                                 {width: 100%; padding: 3em; margin: 1.5em 0;}
  .web-building li                              {display: block; text-align: center; margin: 0 0 3em;}
  .web-building li img                          {margin: 0 auto 1.1em;}
  .web-building li span                         {width: 100%;} 
  .web-building li::before                      {left: calc(50% - 49px); top: -5px;} 
  }  
  @media screen and (max-width: 768px)          {
  .web-building li                              {width: calc(50% - 1em);}
  .web-building li img                          {width: 5em; margin: 0 auto 1em;}
  }
  @media screen and (max-width: 540px)          {
  .web-building li                              {width: 100%; max-width: 260px; margin: 0 auto 3em;}
  }                 

 .links                                         {display: flex; width: 100%; flex-wrap: wrap; margin: 1em 0;}
 .links p                                       {display: block; width: auto !important; margin: 0.3em 1.4em 0.3em 0 !important;}
 .links p:last-child                            {margin-right: 0;}
 .links p a                                     {display: flex; align-items: center; font-size: 1em; font-weight: 600; color: #1e1e1e; text-decoration: none; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
 .links p a:hover                               {color: #0173c0;}
 .links p a::before                             {display: block; width: 1.4em; height: 1.4em; margin-right: 0.4em; background-position: center center; background-repeat: no-repeat; background-size: cover; content: "";}
 .links p a.web::before                         {background-image: URL("images/packages-icon-web.png");}
 .links p a.fb::before                          {background-image: URL("images/packages-icon-fb.png");}
 .links p a.ig::before                          {background-image: URL("images/packages-icon-ig.png");}    

.images                                         {display: flex; justify-content: space-between; align-items: flex-start; width: 100%; flex-wrap: wrap; margin: 1em 0 3.5em;}
.images a                                       {display: block; margin-bottom: 2em;}
.images a img                                   {display: block; width: 100%; height: auto;}                                        
.images.i4 a                                    {width: 25%;}
.images.i3 a                                    {width: 33.33%;}
  @media screen and (max-width: 1080px)         {
  .images.i4 a                                  {width: 50%;}
  }
  @media screen and (max-width: 768px)          {
  .images.i4 a                                  {width: calc(50% - 15px); margin-bottom: 1.8em;}
  }
  @media screen and (max-width: 640px)          {
  .images.i3 a                                  {width: 100%;}
  }
  @media screen and (max-width: 540px)          {
  .images.i4 a                                  {width: 100%; margin-bottom: 1.9em;}
  }      

.heading-flex                                   {display: flex; width: 100%; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}

.contacts                                       {display: flex; flex-wrap: wrap; margin: 1em 0;}
.contacts li                                    {display: flex; align-items: center; margin-right: 1.3em; position: relative; box-sizing: border-box;}
.contacts li:first-child                        {margin-left: 0;}
.contacts li:before                             {display: block; width: 1.5em; height: 1.5em; margin-right: 0.6em; background-size: cover; background-position: center center; background-repeat: no-repeat; content: "";}
.contacts li.tel:before                         {background-image: URL("images/contact-tel.png");}
.contacts li.mail:before                        {background-image: URL("images/contact-mail.png");}
.contacts li a                                  {display: block; font-size: 1em; color: #252525; font-weight: 700; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.contacts li a:hover                            {color: #0173c0;}
  @media screen and (max-width: 960px)          {
  .contacts                                     {width: 100%; margin: 0 0 2em;}
  }       

.team                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.team > div                                     {display: flex; width: calc(33.33% - 0.2em); justify-content: center; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; background: rgba(0,0,0,0.04); padding: 2em; box-sizing: border-box;}
.team > div img                                 {display: block; width: 6em; height: auto; margin-bottom: 0.7em;}
.team > div .info                               {display: block; width: 100%;}
.team > div .info p                             {display: block; width: 100%; text-align: center; margin: 0;}
.team > div .info p:nth-child(1)                {font-size: 1.1em; color: #252525; font-weight: 800; line-height: 1.3em;}
.team > div .info p:nth-child(2)                {font-size: 0.7em; color: #0173c0; font-weight: 500; line-height: 1.3em; margin: 0.3em 0 0.5em;}
.team > div .info p:nth-child(3)                {font-size: 0.8em; color: #252525; font-weight: 400;}
  @media screen and (min-width: 540px) and (max-width: 960px){
  .team > div                                   {width: 100%; justify-content: space-between; align-items: center; margin-bottom: 0.2em; padding: 2em;}
  .team > div img                               {width: 8.5em; margin: 0;}
  .team > div .info                             {width: calc(100% - 10em);}
  .team > div .info p                           {text-align: left;}
  }  
  @media screen and (max-width: 540px)          {
  .team > div                                   {width: 100%; margin-bottom: 0.2em;}
  } 
           
.form                                           {display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap; margin: 5em 0; box-sizing: border-box;}
.form h2                                        {width: 100%; text-align: center; margin: 0 !important; padding-bottom: 1em;}
.form > div                                     {display: block; width: 31.5%; height: auto; margin-bottom: 0.3em; font-weight: 400; position: relative;}
.form > div label                               {color: #858585; font-size: 1em; font-weight: 300; position: absolute; left: 0.8em; top: 1em; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.form > div.focus label                         {left: 0; top: -1.2em; font-size: 0.7em; color: #0173c0; font-weight: 600;}
.form > div input                               {display: block; width: 100%; height: 3em; color: black; font-size: 1em; padding: 0 0.8em; outline: none; border: none; border-bottom: solid 1px rgba(0,0,0,0.2); font-family: 'Montserrat', sans-serif; box-sizing: border-box; -webkit-transition: .2s ease-in-out; transition: .2s ease-in-out;}
.form > div:last-of-type                        {width: 100%;}
.form > div textarea                            {display: block; color: black; width: 100%; height: 13em; padding: 0.8em; font-size: 1em; outline: none; border: none; border-bottom: solid 1px rgba(0,0,0,0.2); box-sizing: border-box; font-family: 'Montserrat', sans-serif;}
.form > div textarea::placeholder               {color: #858585; font-weight: 300;}
.form > div textarea:-ms-input-placeholder      {color: #858585; font-weight: 300;}     
.form > div textarea::-ms-input-placeholder     {color: #858585; font-weight: 300;}
.form > div input:focus,
.form > div textarea:focus                      {background: rgba(0,0,0,0.04); border: none;}
.form button                                    {width: 9em; margin: 1em auto 0; font-size: 1em; padding: 0.7em 0px;}
  @media screen and (max-width: 768px)          {
  .form > div                                   {width: 100%; margin-bottom: 1.5em;}
  }   
  @media screen and (max-width: 540px)          {
  .form > div textarea                          {height: 15em;}
  }   

.billing                                        {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; background: rgba(0,0,0,0.04); padding: 3em; margin-bottom: 5em; box-sizing: border-box;}
.billing h2                                     {width: 100%; text-align: center; font-size: 1.2em !important; margin: 0 0 1em !important;}
.billing ul                                     {display: block; margin-right: 2em;}
.billing ul:last-child                          {margin-right: 0;}
.billing ul li                                  {display: block; font-size: 0.9em; font-weight: 300; color: #252525;}
.billing p                                      {width: 100%; text-align: center !important; font-size: 0.7em !important; opacity: 0.5; margin: 1em 0 0 !important;}
  @media screen and (max-width: 960px)          {
  .billing                                      {justify-content: space-between;}
  .billing ul                                   {width: 48%; margin: 1em 0 0;}
  .billing ul:nth-child(1),
  .billing ul:nth-child(2)                      {margin: 0;}
  } 
  @media screen and (max-width: 640px)          {
  .billing ul                                   {width: 100%; text-align: center;}
  }                   

.map                                            {display: block; width: 100%; position: relative; overflow: hidden;}
.map img                                        {display: block; width: 100%; position: relative; z-index: -2;}
.map .info                                      {display: flex; height: 100%; align-items: center; position: absolute; left: 50%; top: 0;}
.map .info .box                                 {display: block; padding: 1.2em 1.3em 1.2em 1.2em; margin-left: 0.4em; border-radius: 0.2em; position: relative; box-sizing: border-box; background: #115c9b; background: -moz-linear-gradient(left,  #115c9b 0%, #0184dc 100%); background: -webkit-linear-gradient(left,  #115c9b 0%,#0184dc 100%); background: linear-gradient(to right,  #115c9b 0%,#0184dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#115c9b', endColorstr='#0184dc',GradientType=1 );}
.map .info .box p                               {display: block; color: white; margin: 0;}
.map .info .box p:nth-child(1)                  {font-size: 1.1em; font-weight: 800; margin-bottom: 0.5em;}
.map .info .box p:nth-child(2)                  {font-size: 0.8em; font-weight: 700; line-height: 1.4em;}
.map .info .box p:nth-child(2) span             {font-size: 0.7e,; font-weight: 400; opacity: 0.6;}
.map .info .box::before                         {display: block; width: 2em; height: 2em; background: #115c9b; position: absolute; left: -0.4em; top: calc(50% - 1em); z-index: -1; content: ""; transform: rotate(45deg);}
  @media screen and (max-width: 960px)          {
  .map img                                      {width: 960px; left: calc(50% - 480px);}
  }
  @media screen and (max-width: 768px)          {
  .map .info                                    {width: 100%; height: 50%; justify-content: center; align-items: flex-end; left: 0;}
  .map .info .box                               {padding: 1em; margin: 0 0 0.4em; text-align: center;}
  .map .info .box::before                       {background: #0970bb; left: calc(50% - 1em); top: auto; bottom: -0.4em;}
  } 
   
.gallery                                            {display: block; width: 100%; min-height: 100%; position: relative; overflow: hidden; padding: 0 90px; box-sizing: border-box;}
.gallery .swiper-container                          {display: block; width: 100%; height: 100%; position: relative; z-index: 0;}
.gallery .swiper-container .swiper-slide            {display: flex; width: 100%; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; padding: 60px 0; margin-bottom: 50px; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.gallery .swiper-container .swiper-slide img        {display: block; width: 100%; min-width: 200px; max-width: 700px; position: relative; z-index: 3;}
.gallery.bigger .swiper-container .swiper-slide img {max-width: 1200px;}
.gallery .swiper-container .swiper-slide p          {display: block; width: 100%; text-align: center; font-size: 14px; color: #252525; font-weight: 300; line-height: 1.4em; padding: 50px 18% 0; margin: 0; box-sizing: border-box;}
.gallery .swiper-container .swiper-slide p strong   {font-weight: 500;}
.gallery .swiper-button-prev,
.gallery .swiper-button-next                        {display: block; opacity: 0.18; position: absolute; top: calc(50% - 18px); width: 22px; height: 36px; z-index: 2; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; cursor: pointer; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}                                  
.gallery .swiper-button-prev                        {left: 0; background-image: URL('images/arrow-l.svg?r=1');}
.gallery .swiper-button-next                        {right: 0; background-image: URL('images/arrow-r.svg?r=1');}
.gallery .swiper-button-disabled                    {opacity: 0.08 !important; cursor: default;}
.gallery .swiper-button-prev:hover,                  
.gallery .swiper-button-next:hover                  {opacity: 0.4;}
  @media screen and (min-width: 1300px)             {
  .gallery.cards .swiper-container .swiper-slide    {width: 50%;}
  }
  @media screen and (max-width: 1300px)             {
  .gallery                                          {padding: 0 70px;}
  .gallery .swiper-container .swiper-slide          {padding: 55px 0; margin-bottom: 40px;}
  .gallery .swiper-container .swiper-slide p        {padding: 8% 25% 0;}
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next                      {top: calc(50% - 16px); width: 18px; height: 32px;}                                  
  }
  @media screen and (max-width: 960px)              {
  .gallery                                          {padding: 0 45px;}
  .gallery .swiper-container .swiper-slide          {padding: 50px 0; margin-bottom: 35px;}
  .gallery .swiper-container .swiper-slide p        {font-size: 13px; padding: 11% 22% 0;}
  .gallery .swiper-button-prev,
  .gallery .swiper-button-next                      {top: calc(50% - 14px); width: 16px; height: 28px;}                                  
  }
  @media screen and (max-width: 768px)              {
  .gallery                                          {padding: 0 35px;}                                 
  .gallery .swiper-container .swiper-slide          {padding: 40px 0; margin-bottom: 30px;}
  } 
  @media screen and (max-width: 640px)              {
  .gallery                                          {padding: 0 30px;}                                 
  .gallery .swiper-container .swiper-slide          {padding: 35px 0; margin-bottom: 25px;}
  .gallery .swiper-container .swiper-slide p        {font-size: 12px; padding: 12% 16% 0;}
  }  
  @media screen and (max-width: 440px)              {
  .gallery .swiper-container .swiper-slide          {padding: 30px 0;}
  .gallery .swiper-container .swiper-slide p        {font-size: 11px; padding: 15% 12% 0;}
  }        

.window                                             {display: flex; width: 100%; height: 100%; min-height: 600px; justify-content: center; background: rgba(0,0,0,0.9); overflow: hidden; opacity: 0; padding: 30px; box-sizing: border-box; position: fixed; top: 0; left: -9999px; z-index: 10000;  -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;}
.window.show                                        {left: 0; opacity: 1;}
.window .box                                        {display: block; width: 100%; max-width: 70em; height: auto; overflow: auto; padding: 4em 2em 2em; background: URL('images/bg.jpg') no-repeat center top, white; background-size: 100% auto; border: solid 1px rgba(0,0,0,0.1); box-sizing: border-box; position: relative;}
.window .box .cross                                 {display: block; width: 1.5em; height: 1.5em; position: absolute; right: 1.5em; top: 1.5em; z-index: 10; cursor: pointer;}
.window .box .cross img                             {display: block; width: 100%; height: 100%; opacity: 0.2; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.window .box .cross:hover img                       {opacity: 0.4;}
.window .review                                     {width: 100% !important; box-sizing: border-box;}   
.window .review .title, .wrapper.review .title      {display: block; font-size: 2em; font-weight: 800; margin-bottom: 0.5em; color: #0173c0; line-height: 1.2em; text-align: left; background: -webkit-linear-gradient(0deg, #115b99, #0088e3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.window .review p                                   {display: block; font-size: 1em; font-weight: 300; margin-bottom: 1em; line-height: 1.4em; color: #252525;}
.window .box .review .gallery                       {min-height: auto;}
.window .box .gallery                               {height: 100%; min-height: 30em;}
.window .box .web-mockup                            {margin-bottom: 0;}

.review .project                                    {display: flex; width: 100%; flex-wrap: wrap; margin-bottom: 0.7em;}
.review .project p                                  {display: block; width: auto; font-size: 1em; color: #252525; font-weight: 700; margin: 0 1em 0.5em 0; padding-right: 1em; border-right: solid 1px #0173c0;}
.review p a                                         {color: #0173c0; font-weight: 400; text-decoration: underline;}
.review p a:hover                                   {color: #0d83d3; text-decoration: none;}
.review .project p:last-child                       {margin-right: 0; padding-right: 0; border: none;}
.review .web-link                                   {width:100%;}
.review .web-link a                                 {color: #0173c0; font-size: 1em !important; font-weight: 700 !important; text-decoration: none !important}
.review .web-link a:hover                           {text-decoration: underline !important;}
.review .gallery .swiper-container                  {height: auto;}
.review .web-mockup                                 {display: block; width: 100%; margin-bottom: 5em; margin-top: 2.5em;}
.review .web-mockup img                             {display: block; width: 100%;}          

.mceContentBody     { /*float:left !important; width:850px; border:1px solid red;*/ }