body {min-width:960px;width:100%;background: #2B2B2B;font-family:lato,arial,verdana,tahoma;padding:0px;margin:0 auto;text-align:center;font-size:16px;color:#3F4348;}

h1,h2{font-size:25px;color:#FBA81B;font-weight:400;font-family:aharoni,arial,tahoma,verdana;text-align:center;margin:20px 0 50px 0;letter-spacing:2px;}
h3 {font-size:34px;color:#fff;font-weight:300;font-family:lato, arial,tahoma,verdana;text-align:center;margin:20px 0;line-height:42px;}
h4 {font-size:34px;color:#fff;font-weight:400;font-family:aharoni, arial,tahoma,verdana;text-align:center;margin:15px 0 40px 0;line-height:32px;}
p {font-size:19px;color:#fff;font-weight:300;font-family:lato, arial,tahoma,verdana;text-align:center;line-height:32px;margin:20px 0;}
a{text-decoration:none;color:#135D9E;font-family:lato, arial,tahoma,verdana;}
a:hover{text-decoration:none;color:#1666AC;}
button{padding:0 38px;height:50px;background:#135D9E;border:2px solid #135D9E;color:#fff;font-size:17px;font-weight:300;cursor:pointer;margin:-8px 0 0 0;-webkit-transition: background 0.5s;transition: background 0.5s;}
button:hover{background:#1666AC;}
strong{font-weight:700;}
::-moz-selection { background: #FBA81B; color:#000; text-shadow: none; }
::selection { background: #FBA81B; color:#000; text-shadow: none; }

#menu {clear:both;height:auto;min-width:960px;max-width:100%;margin: -75px 0 0;width: 100%;text-align:center;background:#fff;position:relative;}
.menu {min-width:960px;width:96%;padding: 0 0 0;text-align:left;margin:0 auto;}
nav {background-color: inherit; margin: 0px; padding: 0px; z-index: 1;}
nav ul { display: inline-block;text-align:right;margin: 0 auto; padding: 24px 0 16px;height: 35px;}
nav ul li {display: inline-block; list-style: none; padding: 7px 0; line-height: 15px; }
nav ul li a {color: #3A3B35; text-decoration: none; font-family:lato,arial,verdana,tahoma; font-size:20px;font-weight:300;padding:27px 22px 37px;margin:0;-webkit-transition: all 0.7s; transition: all 0.7s;}
nav ul li a:hover {color: #FBA81B;text-decoration: none;text-shadow:0 0 1px #FBA81B;}
.gora{top:0px;position:sticky !important; position:fixed;  position: -webkit-sticky;  position: -moz-sticky;  position: -ms-sticky; position: -o-sticky;z-index: 100;background-color: white !important;}
.logo{float:left;margin:12px 40px 0 0;} 
nav ul li:last-child a{border: 1px solid #FBA81B;padding:10px 25px;font-size:16px;margin-left:20px;}
/* Pasek rozwiajny*/

.pasek-rozwijany{padding: 0 0;z-index:2000;top:0;margin:-427px 0 0 0;right:40px;position:fixed;background: url('i/pasek-tlo.png') no-repeat center center;width:293px;height:465px;-webkit-transition: all 0.8s;transition: all 0.8s;}
.pasek-rozwijanyP {margin:0;-webkit-transition: all 1s;transition: all 1s;}
#bg{ opacity:0.7;-moz-transition: opacity 1s; -o-transition:  opacity 1s; -webkit-transition: opacity 1s;transition: opacity 1s;}
.bg{position: fixed; top:0; left:0; width: 100%; height: 100%;z-index: 101; background: #000; -moz-transition: opacity 1s; -o-transition:  opacity 1s; -webkit-transition: opacity 1s;transition: opacity 1s;}
.masks{opacity: 0.7;-moz-transition: opacity 1s; -o-transition:  opacity 1s; -webkit-transition: opacity 1s;transition: opacity 1s;}
#mask{-webkit-transition: opacity 1s;transition: opacity 1s;}

.pasek-rozwijany p {color:#fff;font-size:15px;font-weight:300;cursor:default;text-shadow:1px 1px 1px #CD8102;margin-top:10px;}
.pasek-rozwijany h4 {padding-bottom:10px;color:#2b2b2b;font-size:12px;font-weight:300;cursor:default;text-shadow:1px 1px 1px #fff;font-family:lato,arial,tahoma,verdana;margin:0 auto;width:80%;line-height:16px;}
.pasek-rozwijany strong {font-weight:400;}
.pasek-rozwijany hr {border:0;border-bottom:1px solid #ddd;width:50%;}
.pasek-rozwijany img {margin:5px 0;opacity:1;}
.pasek-rozwijany img:first-child {margin:6px 0 9px;opacity:1;}
#start { margin: 0 auto; height: 100%;  background: #000;}
.start{width:100%; text-align:left;margin:-420px 0 0;padding-top:0;height:320px;position: absolute;}
#start-mobile{display:none;}
.slogan{text-align:left;width:90%;margin:0 auto;height:250px;}
#animacja-slogan{width: 1160px; height: 69px;}  
.pfr {float:right;margin:18px auto 0;text-align: right;}
#misja {width: 100%; padding:70px 0 40px 0;height:auto;background: transparent;margin: 0;}
.misja {max-width:950px;width:96%;text-align:left;margin: 0 auto;}
.misja h1, .wstep h3 {margin: 30px auto 0;font-family:aharoni,arial;font-weight:700;}

#portfolio {clear:both;width: 100%; padding: 0 0 0;height:auto;background: transparent;margin:  0 0;}
.portfolio {width:100%;min-width:960px;margin: 0 auto;}



#kompetencje {clear:both;width: 100%; padding:60px 0 50px 0;height:auto;background: transparent;margin: 0;}
.kompetencje {max-width:1000px;width:96%;text-align:left;margin: 0 auto;}
.kompetencje h2, .kompetencje h3 {margin: 20px auto 0;}
.kompetencje p {margin:0 auto;margin-top:40px;}

#ikonki {background: transparent;text-align:center;width:100%;margin:0 auto;max-width:1200px}
.ikonki-blok {margin: 0 2%;padding: 0 0 100px;height:auto;line-height:15px;font-family:lato,arial,verdana,tahoma;width:46%;float:left}
.ikonki {position: relative;display: inline-block;float:left;width:33%;padding-top:42px;height: 130px;-webkit-transition: all 0.3s; transition: all 0.3s;}
.ikonki-txt {opacity:0;width: 100%;color: #FBA81B;text-align: center; font-weight:700;position: absolute;z-index: 1;margin: 145px 0 0 -88%;font-size:14px;-webkit-transition: all 0.3s; transition: all 0.3s;font-family:lato,arial,tahoma,verdana;}
.ikonki:hover .ikonki-txt{opacity:1;}
.ikonki:hover{opacity:1;padding-top:22px;padding-bottom:20px}

#loga {width: 100%; padding:60px 0 150px 0;height:auto;background: transparent;margin: 0;}
.loga {clear:both;width:96%;min-width:960px;max-width:1200px;margin: 0 auto;}

.referencje {clear:both;width:96%;min-width:960px;max-width:1200px;margin: 0 auto;}
.referencje h2 {font-size:37px;color:#2B2B2B;font-weight:700;font-family:lato,arial,tahoma,verdana;text-align:center;margin:20px 0 40px 0;line-height:32px;letter-spacing:1px;}
.referencje p {font-size:20px;color:#2B2B2B;font-weight:300;font-family:lato,arial,tahoma,verdana;text-align:center;margin:0 auto;line-height:32px;font-style:italic;max-width:850px;margin-top:20px;margin-bottom:30px;padding:10px 50px;background: url('i/cyt.jpg') no-repeat top left, url('i/cyt2.jpg') no-repeat bottom right;}
.referencje small {font-size:16px;font-style:normal;color:#2B2B2B;font-weight:300;font-family:lato,arial,tahoma,verdana;text-align:center;}

#referencje { background:#FBA81C; padding: 80px 0 0 0;}
#referencje .nano-content { height:360px; }
#referencje .references .ref { width: 100%; float: left; color: #666; text-align: center; }
.referencje a {opacity:0.25;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.referencje a:hover {opacity:1;}
#kontakt {width: 100%; padding: 80px 0 0;height:auto;background: transparent;margin: 0 0 80px 0;}
.kontakt {clear:both;width:96%;min-width:960px;max-width:1200px;margin: 0 auto;text-align:left;}
.kontakt-l {width:45%;float:left;text-align:left;}
.kontakt-r {width:40%;float:right;text-align:left;}
.kontakt p {font-size:18px;color:#fff;font-weight:300;font-family:lato,arial,tahoma,verdana;text-align:left;margin:20px 0;line-height:28px;}
.kontakt a {color:#fff;}
.kontakt a:hover {color:#FBA81C;}
.logo-stopka{text-align:left;margin-bottom:20px;}
.kontakt strong {color:#FBA81C;font-weight:700;}
.kontakt-pracownicy{margin-top:158px;width:45%;float:right;text-align:right;}
.kontakt-pracownicy p{text-align:right;}

.pole {font-weight:300;font-size:17px; border:0;width:96%;height:42px;padding:4px 0 16px 3%;margin:8px 0 3px 0;background:transparent url('i/form-linia.png') repeat-x bottom center;color:#888;font-family:lato, arial, tahoma, verdana;-webkit-transition: border 0.7s; transition: border 0.7s;}
.pole-opis {font-weight:300;font-size:17px; border:0;width:96%;height:110px;padding:4px 0 16px 3%;margin:8px 0 3px 0;background:transparent url('i/form-linia.png') repeat-x bottom center;color:#888;font-family:lato, arial, tahoma, verdana;-webkit-transition: border 0.7s; transition: border 0.7s;}
.wyslij{font-weight:300;font-family:lato, arial, tahoma, verdana;font-size:17px;background: transparent;cursor:pointer;margin:2px 0 0 1px ;border:0;-webkit-transition: color 0.3s; transition: color 0.3s;color:#ccc;padding:10px 0 0 3%;}
.wyslij:hover{color:#fff;}


.pole:hover, .pole-opis:hover{color:#fff;}
#mapa {clear:both;width: 100%; padding:0;height:370;background: #000;margin: 80px 0 0;}
.mapa {width: 100%;height: 370px;}
#stopka {clear:both;width: 100%; padding:27px 0 43px 0;height:auto;background: #000;margin: 0;color:#AFAFAF;font-size:15px;font-weight:300;}
.stopka {max-width:1000px;width:100%;text-align:center;margin: 0 auto;}
.stopka a{color:#AFAFAF;font-size:15px;font-weight:300;}
.stopka a:hover{color:#ddd;}
.stopka-blok {width:100%;text-align:center;}
.ikony-oferta-img{display:none;}

.portfolio .boxOut {
	background: rgba(43, 43, 43, 0.8);
    width: 100%;
    height: 100%; 
    display: block;
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 5;
    opacity: 0;
     transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease
}
.portfolio .boxIn {
	 position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-5%);
    -webkit-transform: translateY(-5%);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease
}
.portfolio .boxOut:hover { 
    opacity: 1;
}
.portfolio .boxOut:hover .boxIn {
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.portfolio .titlePortfolio {
	color: #fff;
    margin: 15px 0 0 0;
    font-size: 18px;
    line-height:24px;
    width: 90%;
    font-weight: 700;
    font-family: arial,arial,tahoma,verdana;
    text-shadow: 1px 1px 1px #000;
    padding:0 5%;
}
.portfolio .subtitlePortfolio {
    color: #fff;
    font-size: 16px;
    width: 90%;
    padding:0 5%;
    font-weight: 400;
    font-family: lato,arial,tahoma,verdana;
    line-height: 20px;
    text-shadow: 1px 1px 1px #000;
    margin: 15px 15px 0 15px auto;
}
.portfolio .buttonPortfolio {
	font-weight: 300;
	font-size: 16px;
	line-height: 1;
    margin: 0;
    border: 1px #ffffff solid;
    padding: 12px 20px;
    display: inline-block;
    margin-top: 1%;
    transition: all 0.3s ;
    -webkit-transition: all 0.3s ;
}
.portfolio .buttonPortfolio:hover {
    background: rgba(237, 160, 28, 1);
    border: 1px #eda01c solid;
}


/* mobile */

@media (max-width: 1260px) {
	.sBoxPortfolio .titlePortfolio {
		font-size: 18px;
	}
	.sBoxPortfolio .subtitlePortfolio {
		font-size: 14px;
	}
}
@media (max-width: 991px) {
	.portfolio > div > div {
		width: 100% !important;
	}
	.sBoxPortfolio .titlePortfolio {
		font-size: 28px;
	}
	.sBoxPortfolio .subtitlePortfolio {
		font-size: 18px;
	}
}

@media (max-width: 800px) {
    body {min-width:241px;max-width:799px;padding:0;}
.pasek-rozwijany, #menu, #start, .ikony-oferta, .kontakt-r {display:none;}    
.kontakt, .stopka, .referencje, .portfolio {min-width:241px;max-width:799px;padding:0;}
#start-mobile{display:block;min-width:241px;max-width:799px;padding:0;text-align:center;background:#fff;}
.portfolio-l, .portfolio-r {float:none;width:90%;margin: 0 auto;background:transparent;}
.k1, .k2, .k3, .k4, .k5, .k6 {margin:10px 2%;height:250px;width:96%;}
.kafelek-opis, .kafelek-opis-duzy, .kafelek-opis:hover, .kafelek-opis-duzy:hover {padding:45px 0 48px 0;}
.kafelek-kolumna-l {width:100%;float:left;height:540px;}
.kafelek-kolumna-l:first-child {width:100%;float:left;height:250px;margin:0 0 20px 0;}
.kafelek-kolumna-r {width:100%;float:left;height:540px;}
.kafelek-kolumna-r:last-child {width:100%;float:left;height:250px;}
.kafelek-opis h3, .kafelek-opis-duzy h3 {color:#fff;margin:15px 0 0 0;font-size:18px;width:100%;font-weight:700;font-family:arial,arial,tahoma,verdana;text-shadow:1px 1px 1px #000;}
.kafelek-opis h4, .kafelek-opis-duzy h4 {display:block;height:65px;color:#fff;margin:0 auto;font-size:16px;width:90%;font-weight:400;font-family:lato,arial,tahoma,verdana;line-height:20px;text-shadow:1px 1px 1px #000;}
#misja {margin: 0;padding:30px 0 0;}
#portfolio {margin:0;padding:0;}
#kompetencje {padding:50px 0;}
#stopka, #kontakt {margin: 0;padding:50px 0 110px 0;}
.ikony-oferta-img{display:block;width:100%;padding: 0;}
#mapa{height:200px;}
.mapa {width: 100%;height: 200px;}

#kontakt, #referencje, #mapa {margin:0;}
.kontakt-l, .stopka-blok, .stopka-blok:first-child, .misja, .kompetencje {width:90%;float:none;text-align:center;padding: 0 5%;line-height:32px;}
.kontakt p {text-align:center;}
h1, h2{font-size:20px;letter-spacing:0;}
.referencje h2{font-size:20px;margin:0;}
h3 {font-size:22px;line-height:32px;}
h4 {font-size:22px;line-height:32px;}
p {font-size:17px;line-height:26px;}
.referencje p {font-size:17px;line-height:26px;padding:0;background:none;}
#ikonki {display:none}
}       

.pdf_oferta {display: inline-block;
    border: 1px solid #FBA81B;
color: #FBA81B;
    text-decoration: none;
    font-family: lato,arial,verdana,tahoma;
    font-size: 15px;
    font-weight: 400;
    padding: 12px 32px 12px;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
    margin: 40px 0 50px;
  }
  .pdf_oferta:hover {color: #222;background:#FBA81B;}
  @media (min-width: 800px) {
    .pdf_oferta {display: none;}
  }

  
  #menu-mobile {display:flex;bottom:0;left:0;right:0;z-index:18;width: 100%;margin:auto;position: fixed;background-image: linear-gradient(to bottom, #ffffffe2 , #ffffff);backdrop-filter: blur(6px); border-top: 1px solid #fffffffa;width: 98%;padding:2px 1% 0;max-width: 500px;margin:auto;display:flex;font-family: 'lato';}
#menu-mobile  .button {float:left;text-align: center;cursor: pointer;width: 32%; padding: 0 5% 8px;  border-bottom: 4px solid #fba81c;margin: 0 4%;}
#menu-mobile  .ico {  width: 22px;  height: auto;padding: 10px;margin: 0 auto 0;-webkit-transition: all .5s;transition: all .5s;}
#menu-mobile  a {color: #333;font-weight: 500;font-size: 8px;letter-spacing: 1px;-webkit-transition: all .5s;transition: all .5s;text-transform: uppercase;}
#menu-mobile  a:hover {color:#999999;}
#menu-mobile  .sep {border-left: 1px solid #eee;float: left;height: 65px;width: 1px;}

.mobile-menu {display: grid;}
.mobile-menu img {width: 22px;margin: -3px 12px 0px 0;opacity: 1;-webkit-transition: all .5s;transition: all .5s;border: 1px solid #fff9;border-radius: 50%;padding: 6px;}
@media (min-width: 800px) {
#menu-mobile {display: none;}
}

/*cookies*/
  #cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #111111d6;
      backdrop-filter: blur(10px);
      color: #fff;
      padding: 20px 20px;
      z-index: 9999;
      display: none;
      font-family: 'Poppins', sans-serif;
      font-size: 14px;
    }

    .cookie-content {
      max-width: 1200px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .cookie-text {
      flex: 1 1 70%;
      line-height: 1.6;
      font-weight: 300;
    }

    .cookie-text a {
      color: #fba81c;
      text-decoration: underline;
    }

    .cookie-buttons {
      flex: 1 1 30%;
      text-align: right;
      display: flex;
      gap: 10px;
    }

    .cookie-buttons button {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 600;
    }

    #accept-cookies {
      background: #fba81c;font-size: 12px;
      color: #000;transition: all 0.3s;
    }

    #decline-cookies {
      background: #666;font-size: 12px;
      transition: all 0.3s;
      color: #ccc;
    }
     #accept-cookies:hover {box-shadow: 0 0 12px #fba81c;color: #fff;}
#decline-cookies:hover{background: #999;color:#fff}
    @media (max-width: 768px) {
      .cookie-buttons {
        flex: 1 1 100%;
        justify-content: flex-start;
      }
      .cookie-text {font-size: 10px;}
      .cookie-buttons button {padding: 7px 18px;letter-spacing: 0.2px;}
      #accept-cookies, #decline-cookies {font-size: 10px;}
    }