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

html, body, form                                {width: 100%; height: 100%; font-size: 46px;}
body                                            {background: white; font-family: 'Darker Grotesque', sans-serif; overflow-x: hidden; overflow-y: auto;}
  @media screen and (max-width: 1200px)         {html, body {font-size: 44px;}}
  @media screen and (max-width: 1150px)         {html, body {font-size: 42px;}}
  @media screen and (max-width: 1100px)         {html, body {font-size: 40px;}}
  @media screen and (max-width: 1050px)         {html, body {font-size: 38px;}}
  @media screen and (max-width: 1000px)         {html, body {font-size: 36px;}}
  @media screen and (max-width: 950px)          {html, body {font-size: 34px;}}
  @media screen and (max-width: 900px)          {html, body {font-size: 32px;}}
  @media screen and (max-width: 850px)          {html, body {font-size: 30px;}}
  @media screen and (max-width: 800px)          {html, body {font-size: 28px;}}
  @media screen and (max-width: 750px)          {html, body {font-size: 26px;}}
  @media screen and (max-width: 700px)          {html, body {font-size: 24px;}}
  @media screen and (max-width: 650px)          {html, body {font-size: 22px;}}
  @media screen and (max-width: 600px)          {html, body {font-size: 20px;}}
  @media screen and (max-width: 550px)          {html, body {font-size: 18px;}}
  @media screen and (max-width: 500px)          {html, body {font-size: 16px;}}
  @media screen and (max-width: 450px)          {html, body {font-size: 14px;}}
  @media screen and (max-width: 400px)          {html, body {font-size: 12px;}}
  
.chyba { background-color:#c81816; color:#ffffff; text-align:center; font-size:14px; padding:5px 0px 5px 0px; margin:1px auto 10px auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.wrapper                                        {display: flex; width: 1400px; height: 100%; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; align-content: center; box-sizing: border-box; flex-wrap: wrap; position: relative;}
.content                                        {display: block; width: 100%; height: 100%; min-height: 500px; box-sizing: border-box; position: relative;}
  @media screen and (max-width: 1600px)         {
  .wrapper                                      {width: 1248px;}
  }
  @media screen and (max-width: 1300px)         {
  .wrapper                                      {margin: 0 7%; width: 86%;}
  }

/* HEADER ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.section                                        {padding: 160px 0 70px;}
.hp .header                                     {background: none;}
.hp .header.bg                                  {background: #1f2731;}
.header                                         {display: block; width: 100%; height: 90px; background: #1f2731; padding: 10px 0; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 1000; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out;}
.header .wrapper                                {display: flex; height: 100%; justify-content: center; align-items: center; position: relative;}
.header .cross                                  {display: none;}
.header .navicon                                {display: none;}
.header nav                                     {display: flex; width: auto; height: 100%; align-items: center;}
.header nav span                                {display: flex; height: 100%; align-items: center; margin: 0 17px;}
.header nav span a                              {display: inline-block; color: white; letter-spacing: 0.2em; font-size: 15px; font-weight: 600; text-transform: uppercase; line-height: 1em; -webkit-transition:.15s ease-in-out; transition: .15s ease-in-out;}
.header nav span a.sel, .header nav span a:hover{color: #26ae29;}
  @media screen and (max-width: 1600px)         {
  .header nav span a                            {font-size: 14px;}
  }
  @media screen and (max-width: 1200px)         {
  .header nav span                              {margin: 0 15px;}
  .header nav span a                            {font-size: 13px;}
  }
  @media screen and (max-width: 960px)          {
  .header nav span                              {margin: 0 12px;}
  .header nav span a                            {font-size: 12px;}
  }
  @media screen and (max-width: 768px)          {
  .header nav span                              {margin: 0 9px;}
  }
    
  @media screen and (max-width: 640px)          {
  .header                                       {background: none !important;}
  .header .navicon                              {display: block; width: 26px; height: 26px; position: fixed; right: 25px; top: 25px; z-index: 1000; cursor: pointer;}
  .header .navicon span                         {display: block; width: 100%; height: 2px; background: white; cursor: pointer; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
  .header .navicon span:before,
  .header .navicon span::after                  {display: block; width: 100%; height: 2px; background: white; position: absolute; left: 0; content: ""; cursor: pointer; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
  .header .navicon span:before                  {top: 10px;}
  .header .navicon span::after                  {top: 19px;}
  .header .navicon.blue span,
  .header .navicon.blue span:before,
  .header .navicon.blue span:after              {background: #2e3a47;}
  .header .navicon:hover span,
  .header .navicon:hover span:before,
  .header .navicon:hover span:after             {background: #26ae29;}
  .header nav                                   {display: block; position: fixed; width: 300px; right: -310px; top: 0; z-index: 1001; height: 100%; padding: 68px 30px 15px; box-sizing: border-box; background: rgba(11, 21, 33, 1); -webkit-transition: 0.4s; -moz-transition: 0.4s; transition: 0.4s; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
  .header nav.show                              {right: 0;}
  .header nav span                              {display: block; width: 100%; height: auto; text-align: left; margin-left: 0; margin-bottom: 30px;}
  .header nav span a                            {display: block; font-size: 18px; font-weight: 400; padding: 0;}
  .header nav span a.button                     {display: inline-block; width: 100%; padding: 8px 0;}
  .header nav .cross                            {display: block; position: absolute; top: 20px; right: 20px; opacity: 0.4; margin: 0; width: 20px; height: 20px; background: URL('../images/cross.svg') no-repeat center center; background-size: 100% 100%; cursor: pointer; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
  .header nav .cross:hover                      {opacity: 1;}
  }
  @media screen and (max-width: 600px)          {
  .section                                      {padding: 138px 0 60px;}
  .header                                       {height: 48px; padding: 5px 0;}  
  }

/* GENERAL ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.section                                        {display: block; width: 100%; min-height: 100%; box-sizing: border-box; position: relative; z-index: 0;}                                             
.section .navline                               {display: block; width: 2px; height: 110px; position: absolute; left: calc(50% - 1px); top: -60px; overflow: hidden;}
.section .navline span                          {display: block; width: 100%; height: 100%; background: #26ae29; content: "";}
.section .wrapper                               {z-index: 3;}
.section h2                                     {display: block; width: 100%; color: #2e3a47; text-align: center; font-size: 50px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.25em; line-height: 1em; margin-bottom: 75px; position: relative;}
.section h2:after                               {display: block; width: 80px; height: 2px; background: #26ae29; position: absolute; left: calc(50% - 40px); bottom: -14px; content: "";}
.section ul                                     {display: block; width: 100%;}
.section p, .section ul li                      {display: block; width: 100%; color: #3c3c3c; line-height: 1.4em; font-weight: 400; text-align: center; font-size: 19px; letter-spacing: 0.1em;}                                  
.section p strong, .section ul li strong        {font-weight: 600;}
.section p em, .section ul li em                {font-style: italic;}
.section p a, .section ul li a                  {color: #26ae29; text-decoration: underline; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.section p a:hover, .section ul li a:hover      {color: #25db90; text-decoration: none;}
.section ul li                                  {text-align: left; padding-left: 18px; margin-bottom: 0.4em; box-sizing: border-box; position: relative;}
.section ul li:before                           {display: block; width: 10px; height: 10px; border: solid 2px #26ae29; position: absolute; left: 0; top: 0.53em; box-sizing: border-box; content :"";}
.section.color                                  {background: #2e3a47;}
.section.color h2, .section.color p             {color: white;}
  @media screen and (max-width: 1600px)         {
  .section h2                                   {font-size: 45px;}
  .section p                                    {font-size: 18px;}
  .section ul li                                {font-size: 18px; padding-left: 17px;}
  .section ul li:before                         {width: 9px; height: 9px;}
  }
  @media screen and (max-width: 1080px)         {
  .section                                      {height: auto;}
  .section h2                                   {font-size: 40px; margin-bottom: 65px;}
  .section h2:after                             {width: 70px; left: calc(50% - 35px); bottom: -12px;}
  .section p                                    {font-size: 17px;}
  .section ul li                                {font-size: 17px; padding-left: 16px;}
  .section ul li:before                         {width: 8px; height: 8px;}
  }
  @media screen and (max-width: 768px)          {
  .section h2                                   {font-size: 35px; margin-bottom: 55px;}
  .section h2:after                             {width: 60px; left: calc(50% - 30px); bottom: -10px;}
  .section p                                    {font-size: 16px;}
  .section ul li                                {font-size: 16px; padding-left: 15px;}
  .section ul li:before                         {width: 7px; height: 7px; border-width: 1px; top: 0.6em;}
  }
  @media screen and (max-width: 640px)          {
  .section h2                                   {font-size: 30px; margin-bottom: 45px;}
  .section h2:after                             {width: 50px; left: calc(50% - 25px);}
  .section p, .section ui li                    {font-size: 15px;}
  }
  @media screen and (max-width: 480px)          {
  .section h2                                   {font-size: 25px;}
  .section h2:after                             {width: 40px; left: calc(50% - 20px);}
  .section p, .section ul li                    {font-size: 14px;}
  }  

.button                                         {display: block; padding: 0; background: #26ae29; border: solid 1px #26ae29; outline: none; position: relative; cursor: pointer; font-family: 'Darker Grotesque', sans-serif;}
.button:before, .button:after                   {display: block; width: 51%; height: 100%; background: white; position: absolute; top: 0; z-index: 0; content: ""; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.button:before                                  {left: 0;}
.button:after                                   {right: 0;}
.button span                                    {display: block; font-size: 17px; font-weight: 700; line-height: 1em; color: #26ae29;; text-transform: uppercase; padding: 14px 45px 16px; text-align: center; position: relative; z-index: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.button:hover:before, .button:hover:after       {width: 0;}
.button:hover span                              {color: white;}
  @media screen and (max-width: 1080px)         {
  .button span                                  {font-size: 16px; padding: 13px 42px 15px;}
  }  
  @media screen and (max-width: 768px)          {
  .button span                                  {font-size: 15px; padding: 12px 36px 14px;}
  }
  
  
/* SLIDER CONTROLS */
.swiper-container.pagi                          {padding-bottom: 100px;}
.swiper-button-prev, .swiper-button-next        {display: block; opacity: 0.3; width: 20px; height: 50px; position: absolute; z-index: 500; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}                                  
.swiper-button-prev                             {background-image: URL('../images/arrow-l.png');}
.swiper-button-next                             {background-image: URL('../images/arrow-r.png');}
.swiper-button-prev:hover, .swiper-button-next:hover
                                                {opacity: 0.7; cursor: pointer;} 
.swiper-button-disabled                         {display: none;}
.swiper-pagination                              {position: absolute; text-align: center; bottom: 0; z-index: 10;}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction                     {bottom: 15px; left: 0; width: 100%;}
.swiper-pagination-bullet                       {display: inline-block; width: 12px; height: 12px; border-radius: 100%; background: black; opacity: .2; cursor: pointer;}
.swiper-pagination-bullet:hover                 {opacity: .3;}
.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover          {background: #26ae29; opacity: 1 !important;}

.color .swiper-button-prev                      {background-image: URL('../images/arrow-l2.png');}
.color .swiper-button-next                      {background-image: URL('../images/arrow-r2.png');}
.color .swiper-pagination-bullet                {opacity: .35;}
.color .swiper-pagination-bullet:hover          {opacity: .7;}

/* Top --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.top                                            {display: block; width: 100%; height: 100%; position: relative; background: URL("../images/top.jpg") no-repeat center center; background-size: cover;}
.top:after                                      {display: block; width: 100%; height: 70%; background: black; opacity: 0.25; position: absolute; left: 0; top: 15%; z-index: 1; content: "";}
.top .box                                       {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; padding: 8%; box-sizing: border-box; position: relative; z-index: 2;}
.top .box .img                                  {display: block; width: 140px; height: 140px; margin-bottom: 10px; background: rgba(0,0,0,0.35); border-radius: 100%; overflow: hidden;}
.top .box .img img                              {display: block; width: 100%;}
.top .box h1                                    {display: block; width: 100%; text-align: center; font-size: 85px; line-height: 1.3em; color: white; font-weight: 700;}
.top .box h1 > span                             {display: block; max-width: 580px; font-size: 0.22em; line-height: 1.23em; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 auto;}
.top .box h1 > span > span                      {color: #26ae29;}
  @media screen and (max-width: 1600px)         {
  .top .box h1                                  {font-size: 78px;}
  }
  @media screen and (max-width: 960px)          {
  .top .box h1                                  {font-size: 70px;}
  }
  @media screen and (max-width: 768px)          {
  .top .box h1                                  {font-size: 60px;}
  }
  @media screen and (max-width: 640px)          {
  .top .box h1                                  {font-size: 50px;}
  .top .box h1 > span                           {font-size: 0.3em;}
  } 
  @media screen and (max-width: 540px)          {
  .top .box h1                                  {font-size: 40px;}
  }     

/* ABOUT  */                                                
.about .swiper-container.s1                     {display: flex; width: 100%; padding-left: 10%; padding-right: 10%; justify-content: center; align-items: center; box-sizing: border-box;}
.about .swiper-slide                            {display: flex; width: 70%; height: auto; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; padding: 0 5%; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.about .swiper-slide p                          {display: block; text-align: center; width: 100%; height: auto;}     
.about .swiper-slide-prev,
.about .swiper-slide-next                       {opacity: 0.5;}
.about .swiper-button-prev,   
.about .swiper-button-next                      {top: calc(50% - 60px);}
.about .swiper-button-prev                      {right: calc(75% + 27px);}
.about .swiper-button-next                      {left: calc(75% + 27px);}
  @media screen and (max-width: 1400px)         {
    .about .swiper-slide                        {width: 80%;}
    .about .swiper-button-prev                  {right: calc(78% + 27px);}
    .about .swiper-button-next                  {left: calc(78% + 27px);}
  }
  @media screen and (max-width: 1000px)         {
    .about .swiper-container.s1                 {padding-left: 0; padding-right: 0;}
    .about .swiper-slide                        {width: 100%; padding: 0 50px;}
    .about .swiper-button-prev,   
    .about .swiper-button-next                  {top: calc(50% - 80px);}
    .about .swiper-button-prev                  {right: auto; left: 0;}
    .about .swiper-button-next                  {left: auto; right: 0;}
    }

/* SERVICES  */                                                
.services                                       {background: URL("../images/services.png") no-repeat center center; background-size: 80% auto;}
.services .wrapper                              {justify-content: space-between; align-items: flex-start;}
.services .item                                 {display: flex; width: 33.33%; align-items: flex-start; flex-wrap: wrap; padding: 25px 25px 25px 80px; position: relative; box-sizing: border-box; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.services .item:before                          {display: block; width: 42px; height: 100%; font-size: 30px; line-height: 1em; font-weight: 400; color: #26ae29; position: absolute; left: 25px; top: 25px; content: ""; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.services .item:nth-of-type(1):before           {content: "#1";}
.services .item:nth-of-type(2):before           {content: "#2";}
.services .item:nth-of-type(3):before           {content: "#3";}
.services .item:nth-of-type(4):before           {content: "#4";}
.services .item:nth-of-type(5):before           {content: "#5";}
.services .item:nth-of-type(6):before           {content: "#6";}
.services .item:nth-of-type(7):before           {content: "#7";}
.services .item:nth-of-type(8):before           {content: "#8";}
.services .item:nth-of-type(9):before           {content: "#9";}
.services .item:nth-of-type(10):before          {content: "#10";}
.services .item:nth-of-type(11):before          {content: "#11";}
.services .item:nth-of-type(12):before          {content: "#12";}
.services .item:nth-of-type(13):before          {content: "#13";}
.services .item:nth-of-type(14):before          {content: "#14";}
.services .item:nth-of-type(15):before          {content: "#15";}
.services .item h3                              {display: block; width: 100%; font-size: 30px; font-weight: 500; line-height: 1em; text-align: left; margin-bottom: 15px; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.services .item p                               {text-align: left; font-size: 17px; color: #26ae29; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; position: relative;}  
.services .item p:after                         {display: block; width: 30px; height: 100%; background: URL("../images/link-arrow.png") no-repeat right center; background-size: auto 10px; position: absolute; top: 2px; left: 52px; content: ""; overflow: hidden; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}
.services .item a                               {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5;}
.services .item:hover                           {background: rgba(0,0,0,0.07);}
.services .item:hover p:after                   {width: 45px;}
  @media screen and (max-width: 1400px)         {
    .services .item                             {padding: 22px 22px 22px 75px;}
    .services .item:before                      {width: 38px; font-size: 27px; left: 22px; top: 22px;}
    .services .item h3                          {font-size: 27px; margin-bottom: 13px;}
    .services .item p                           {font-size: 16px;}  
    .services .item p:after                     {width: 27px; background-size: auto 9px;}
    } 
  @media screen and (max-width: 1080px)         {
    .services .item                             {width: 50%;}
    }
  @media screen and (max-width: 768px)          {
    .services .item                             {padding: 18px 18px 18px 65px;}
    .services .item:before                      {width: 35px; font-size: 24px; left: 18px; top: 18px;}
    .services .item h3                          {font-size: 24px; margin-bottom: 11px;}
    .services .item p                           {font-size: 15px;}  
    .services .item p:after                     {width: 25px; top: 1px; left: 48px;}
    }
  @media screen and (max-width: 640px)          {
    .services .item                             {padding: 15px 15px 15px 55px;}
    .services .item:before                      {width: 32px; font-size: 20px; left: 15px; top: 15px;}
    .services .item h3                          {font-size: 20px; margin-bottom: 10px;}
    .services .item p                           {font-size: 14px;}  
    .services .item p:after                     {width: 22px; top: 2px; left: 44px;}
    }
  @media screen and (max-width: 540px)          {
    .services .item                             {width: 100%;}
    } 

/* PROJECTS / REFERENCES  */                                                
.projects .wrapper > h2                         {margin-bottom: 22px;}
.projects .wrapper > p                          {font-size: 18px; font-weight: bold; color: #26ae29; margin-bottom: 30px;}
.projects .swiper-container.s2                  {display: flex; width: 100%; padding-left: 10%; padding-right: 10%; justify-content: center; align-items: center; box-sizing: border-box;}
.projects .swiper-slide                         {display: flex; width: 70%; height: auto; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; padding: 0 5%; position: relative; box-sizing: border-box; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.projects .swiper-slide:after                   {display: flex; width: 250px; height: 250px; justify-content: center; align-items: center; font-size: 240px; color: black; font-weight: bold; opacity: 0.3; position: absolute; left: calc(50% - 125px); top: calc(50% - 145px); z-index: 1; content: "";}
.projects .swiper-slide.sl1:after               {content: "1";}
.projects .swiper-slide.sl2:after               {content: "2";}
.projects .swiper-slide.sl3:after               {content: "3";}
.projects .swiper-slide.sl4:after               {content: "4";}
.projects .swiper-slide.sl5:after               {content: "5";}
.projects .swiper-slide.sl6:after               {content: "6";}
.projects .swiper-slide.sl7:after               {content: "7";}
.projects .swiper-slide.sl8:after               {content: "8";}
.projects .swiper-slide p                       {display: block; width: 100%; height: auto; text-align: center; font-size: 34px; font-weight: bold; margin-bottom: 0; position: relative; z-index: 2;}     
.projects .swiper-slide-prev,
.projects .swiper-slide-next                    {opacity: 0.5;}
.projects .swiper-button-prev,  
.projects .swiper-button-next                   {top: calc(50% - 70px);}
.projects .swiper-button-prev                   {right: calc(75% + 27px);}
.projects .swiper-button-next                   {left: calc(75% + 27px);}
  @media screen and (max-width: 1400px)         {
    .projects .wrapper > h2                     {margin-bottom: 20px;}
    .projects .wrapper > p                      {font-size: 17px; margin-bottom: 27px;}
    .projects .swiper-slide p                   {font-size: 31px;}     
    }  
  @media screen and (max-width: 1080px)         {
    .projects .wrapper > h2                     {margin-bottom: 18px;}
    .projects .wrapper > p                      {font-size: 16px; margin-bottom: 25px;}
    .projects .swiper-slide                     {width: 80%;}
    .projects .swiper-slide p                   {font-size: 26px;}     
    .projects .swiper-button-prev,  
    .projects .swiper-button-next               {top: calc(50% - 72px);}
    .projects .swiper-button-prev               {right: calc(78% + 27px);}
    .projects .swiper-button-next               {left: calc(78% + 27px);}
    } 
  @media screen and (max-width: 768px)          {
    .projects .swiper-container.s2              {padding-left: 0; padding-right: 0;}
    .projects .wrapper > h2                     {margin-bottom: 16px;}
    .projects .wrapper > p                      {font-size: 15px; margin-bottom: 23px;}
    .projects .swiper-slide                     {width: 100%; padding: 0 50px;}
    .projects .swiper-slide p                   {font-size: 25px;}     
    .projects .swiper-button-prev,  
    .projects .swiper-button-next               {top: calc(50% - 75px);}
    .projects .swiper-button-prev               {right: auto; left: 0;}
    .projects .swiper-button-next               {left: auto; right: 0;}
    }     
  @media screen and (max-width: 640px)          {
    .projects .wrapper > p                      {font-size: 15px;}
    .projects .swiper-slide                     {padding: 0 45px;}
    .projects .swiper-slide p                   {font-size: 22px;}     
    .projects .swiper-button-prev,  
    .projects .swiper-button-next               {top: calc(50% - 73px);}
    }
  @media screen and (max-width: 540px)          {
    .projects .wrapper > p                      {font-size: 14px;}
    .projects .swiper-slide p                   {font-size: 18px;}     
    } 

/* GALLERY (SLIDER)  */                                                
.photo                                          {height: auto;}
.photo .wrapper                                 {display: block;}
.photo .swiper-container.s3                     {display: block; width: calc(100% + 30px); position: relative; left: -15px; overflow: hidden;}
.photo .swiper-slide                            {display: block; width: calc(33.33% - 30px); height: 600px; margin: 0 15px; background: #1f2731; box-sizing: border-box; position: relative; overflow: hidden; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0;}
.photo .swiper-slide .img                       {display: block; width: 100%; height: 100%; opacity: 0.7; position: relative; z-index: 1; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out;}     
.photo .swiper-slide.sl1 .img                   {background-image: URL("../images/photos/REAL ESTATE - commercial.jpg");}
.photo .swiper-slide.sl2 .img                   {background-image: URL("../images/photos/REAL ESTATE - appartment buildings.jpg");}
.photo .swiper-slide.sl3 .img                   {background-image: URL("../images/photos/HYDRO POWER PLANT.jpg");}
.photo .swiper-slide.sl4 .img                   {background-image: URL("../images/photos/SOLAR POWER PLANT.jpg");}
.photo .swiper-slide.sl5 .img                   {background-image: URL("../images/photos/COAL FUELED POWER PLANT.jpg");}
.photo .swiper-slide.sl6 .img                   {background-image: URL("../images/photos/GAS PIPELINE.jpg");}
.photo .swiper-slide.sl7 .img                   {background-image: URL("../images/photos/POULTRY FARM.jpg");}
.photo .swiper-slide.sl8 .img                   {background-image: URL("../images/photos/MILK FARM.jpg");}
.photo .swiper-slide.sl9 .img                   {background-image: URL("../images/services/pig-reproductors-pig-farms-pig-slaughter-houses.jpg");}
.photo .swiper-slide.sl10 .img                  {background-image: URL("../images/photos/CHICKEM FARM WITH SOLAR POWER PLANT.jpg");}
.photo .swiper-slide .info                      {display: flex; width: 100%; height: 100%; justify-content: center; align-items: flex-end; align-content: flex-end; flex-wrap: wrap; padding: 10%; box-sizing: border-box; position: absolute; left: 0; top: 0; z-index: 2;}
.photo .swiper-slide .info h3                   {display: block; width: 100%; text-align: center; font-size: 34px; line-height: 1.1em; color: white; font-weight: 600; margin-bottom: 30px; position: relative;}
.photo .swiper-slide .info h3:after             {display: block; width: 50px; height: 2px; background: #26ae29; position: absolute; left: calc(50% - 25px); bottom: -15px; content: "";}
/*.photo .swiper-slide .info p                    {display: none; width: 100%; height: auto; font-size: 17px; color: white; overflow: hidden;}
.photo .swiper-slide:hover .img                 {opacity: 0.25; -ms-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}*/
.photo .swiper-button-prev,   
.photo .swiper-button-next                      {top: calc(50% - 60px + 50px);}
.photo .swiper-button-prev                      {left: -50px;}
.photo .swiper-button-next                      {right: -50px;}
  @media screen and (max-width: 1600px)         {
  .photo .swiper-slide .info h3                 {font-size: 30px;}
  /*.photo .swiper-slide .info p                  {font-size: 16px;}*/
  }
  @media screen and (max-width: 1400px)         {
  .photo .swiper-container.s3                   {width: calc(100% - 60px); left: 0;}
  .photo .swiper-slide                          {width: calc(33.33% - 20px); height: 480px; margin: 0 10px;}
  .photo .swiper-slide .info h3                 {font-size: 26px;}
  .photo .swiper-slide .info h3:after           {width: 44px; left: calc(50% - 22px); bottom: -12px;}
  .photo .swiper-button-prev,   
  .photo .swiper-button-next                    {top: calc(50% - 60px + 40px);}
  .photo .swiper-button-prev                    {left: -10px;}
  .photo .swiper-button-next                    {right: -10px;}
  }  
  @media screen and (max-width: 1080px)         {
  .photo .swiper-container.s3                   {width: calc(100% - 50px);}
  .photo .swiper-slide                          {width: calc(50% - 20px); height: 480px;}
  .photo .swiper-slide .info h3                 {font-size: 24px;}
  .photo .swiper-slide .info h3:after           {width: 40px; left: calc(50% - 20px);}
  .photo .swiper-button-prev,   
  .photo .swiper-button-next                    {top: calc(50% - 60px + 20px);}
  }
  @media screen and (max-width: 768px)          {
  .photo .swiper-slide                          {height: 420px;}
  .photo .swiper-slide .info h3                 {font-size: 20px;}
  .photo .swiper-button-prev,   
  .photo .swiper-button-next                    {top: calc(50% - 60px + 20px);}
  }
  @media screen and (max-width: 640px)          {
  .photo .swiper-container.s3                   {width: calc(100% - 70px);}
  .photo .swiper-slide                          {height: 320px;}
  .photo .swiper-slide .info h3                 {font-size: 18px;}
  .photo .swiper-button-prev,   
  .photo .swiper-button-next                    {top: calc(50% - 60px + 10px);}
  }
  @media screen and (max-width: 540px)          {
  .photo .swiper-slide                          {width: 100%; margin: 0; height: 480px;}
  .photo .swiper-slide .info h3                 {font-size: 20px;}
  }      
  @media screen and (max-width: 480px)          {
  .photo .swiper-slide                          {height: 440px;}
  .photo .swiper-slide .info h3                 {font-size: 18px;}
  }
  @media screen and (max-width: 480px)          {
  .photo .swiper-slide                          {height: 400px;}
  .photo .swiper-slide .info h3                 {font-size: 17px;}
  }  

/* CONTACT  */                                                     
.contacts                                       {background: #f5f5f5;}

.links                                          {display: flex; width: 100%; justify-content: center; flex-wrap: wrap; margin-bottom: 20px;}
.links p                                        {width: auto; font-size: 37px; font-weight: 500; padding: 0 25px; margin-bottom: 25px;}
.links p a                                      {text-decoration: none;}
.links p a:hover                                {color: #2e3a47;}
  @media screen and (max-width: 1600px)         {
  .links p                                      {font-size: 32px; padding: 0 20px; margin-bottom: 20px;}
  }
  @media screen and (max-width: 1200px)         {
  .links p                                      {font-size: 28px; padding: 0 18px; margin-bottom: 18px;}
  } 
  @media screen and (max-width: 960px)          {
  .links p                                      {font-size: 24px; padding: 0 16px; margin-bottom: 16px;}
  }   
  @media screen and (max-width: 768px)          {
  .links p                                      {font-size: 20px; padding: 0 14px;}
  } 

.form                                           {display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 800px; height: auto; background: white; padding: 50px; border: solid 1px transparent; box-sizing: border-box; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.form:hover                                     {border-color: rgba(0,0,0,0.05);  -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.1);}
.form .input                                    {display: block; width: calc(33.33% - 4px); height: auto; font-weight: 400; position: relative;}
.form .input input, .form textarea              {display: block; width: 100%; color: #363636; font-size: 22px; outline: none; box-sizing: border-box; border: none; border-bottom: solid 1px rgba(0,0,0,0.1); overflow: hidden; position: relative; font-family: 'Darker Grotesque', sans-serif;}
.form .input input                              {height: 50px; padding: 0 15px;}
.form .textarea                                 {display: block; width: 100%; height: 200px; position: relative;}
.form .textarea textarea                        {height: 100%; padding: 15px;}
.form .input:after, .form .textarea:after       {display: block; width: 0; height: 1px; background: #26ae29; position: absolute; left: 0; bottom: 0; content: ""; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
.form .input:hover:after,
.form .textarea:hover:after                     {width: 100%;}
.form .input input:focus,
.form .textarea textarea:focus                  {background: rgba(0,0,0,0.03);}
.form button                                    {width: 170px; margin: 30px auto 0;}
  @media screen and (max-width: 1600px)         {
  .form .input input, .form textarea            {font-size: 20px;}
  }
  @media screen and (max-width: 1200px)         {
  .form                                         {padding: 45px;}
  .form .input input, .form textarea            {font-size: 18px;}
  }
  @media screen and (max-width: 960px)          {
  .form                                         {padding: 35px;}
  .form .input input, .form textarea            {font-size: 16px;}
  .form button                                  {width: 160px;}
  }  
  @media screen and (max-width: 640px)          {
  .form .input                                  {width: 100%; margin-bottom: 8px;} 
  .form button                                  {width: 150px;}
  }
  @media screen and (max-width: 540px)          {
  .form                                         {padding: 28px;}
  .form .input input, .form textarea            {font-size: 15px;}
  }   

/* ARTICLE */
.article .content                               {height: auto;}
.article article                                {min-height: 100%; justify-content: space-between; align-content: flex-start; align-items: flex-start;}
.article article .left                          {display: block; width: 55%;}
.article article .left h1                       {display: block; width: 100%; color: #2e3a47; text-align: left; font-size: 42px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.25em; line-height: 1em; margin-bottom: 60px; position: relative;}
.article article .left h1:after                 {display: block; width: 80px; height: 2px; background: #26ae29; position: absolute; left: 0; bottom: -30px; content: "";}
.article article .left p                        {text-align: justify;}
.article article .left .back                    {display: inline-block; font-size: 24px; color: #26ae29; font-weight: 600; line-height: 1em; padding-left: 16px; margin-top: 30px;  position: relative; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.article article .left .back::before            {display: block; width: 10px; height: 10px; border-top: solid 2px #26ae29; border-left: solid 2px #26ae29; transform: rotate(-45deg); position: absolute; left: 0; top: 8px; content: ""; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.article article .left .back:hover              {color: #1f2731;}
.article article .left .back:hover::before      {border-color: #1f2731;}
.article article .img                           {display: block; width: 40%;}
.article article .img img                       {display: block; width: 100%; margin-bottom: 13px;}
  @media screen and (max-width: 1400px)         {
  .article article .left h1                     {font-size: 37px; margin-bottom: 50px;}
  .article article .left h1:after               {width: 75px; bottom: -25px;}
  .article article .left .back                  {font-size: 22px; padding-left: 15px; margin-top: 27px;}
  .article article .left .back::before          {width: 9px; height: 9px; top: 7px;}
  }  
  @media screen and (max-width: 1080px)         {
  .article article .left h1                     {font-size: 33px;}
  .article article .left .back                  {font-size: 20px; padding-left: 14px; margin-top: 25px;}
  .article article .left .back::before          {width: 8px; height: 8px; top: 7px;}
  } 
  @media screen and (max-width: 768px)          {
  .article article .img                         {width: 100%; order: 0; margin-bottom: 25px;}
  .article article .left                        {width: 100%; order: 1;}
  .article article .left h1                     {font-size: 33px;}
  }     
  @media screen and (max-width: 640px)          {
  .article .section                             {padding-top: 80px;}
  .article article .left h1                     {font-size: 28px;}
  }
  @media screen and (max-width: 540px)          {
  .article article .left h1                     {font-size: 24px;}
  }      

/* CONTACT - FOOTER */
.hp .footer                                     {background: #f5f5f5;}
.footer                                         {display: block; width: 100%; padding: 35px 0px 25px; text-align: center;}
.footer.fixed                                   {position: fixed; left: 0; bottom: 0;}
.footer p                                       {color: #898989; font-size: 18px; font-weight: 600;}
.footer p a                                     {color: #898989; -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.footer p a:hover                               {color: #26ae29;}
  @media screen and (max-width: 1080px)         {
  .footer                                       {padding: 38px 0px 23px;}
  .footer p                                     {font-size: 17px;}
  }
  @media screen and (max-width: 768px)          {
  .footer                                       {padding: 30px 0px 21px;}
  .footer p                                     {font-size: 16px;}
  }
  @media screen and (max-width: 540px)          {
  .footer                                       {padding: 22px 0px 18px;}
  .footer p                                     {font-size: 15px;}
  }