/* let's define screen-fraction-pixels (new non-standard term) 1000 sfpx on every possible screen. */
  :root {
    --lead-color-compound-1: 0;
    --lead-color-compound-2: 0;
    --lead-color-compound-3: 0;
    --lead-color: rgba(var(--lead-color-compound-1), var(--lead-color-compound-2), var(--lead-color-compound-3), 1);
    --scroll: 0;
    --font-size-factor:1.1;
    --sfpx:0.1vw;
    --sfpxh:0.1vh;
    --sfpxr:calc(0.05vw + 0.05vh); /* px ratioed, tries to in a simple way take into account that some screens can be both "little" and "too" flat (16:9 or more) and not contain content in a expected by a developer space */
    /* s means like --px/10 so 10000 px on a screen use them if you need greater granularity but measured in integer values */
    --ssfpx:0.01vw;
    --ssfpxh:0.01vh;
    --ssfpxr:calc(0.005vw + 0.005vh);

    --pddng-base: 3em;
    --pddng-top-bottom-base: var(--pddng-base);
    --pddng-l: var(--pddng-base);
    --pddng-r: var(--pddng-l);
    --pddng-t: calc(var(--pddng-top-bottom-base) / 1.7);
    --pddng-b: var(--pddng-t) * 1.1;
  }

  .ren-bud {font-size: 0.8em !important; margin-top: -0.5em !important;}
  .kontynuacja-ren-bud {font-size: 0.8em !important;display: block;margin-top: -1em;margin-bottom: 0.7em;position: relative;top: -0.5em;text-align: center;}

  body {
    margin: 0;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    /* Important: See .fs class and classes like .fn, .fw, .fh, .fr and possibly similar */
    /*font-size: calc((12pt + 1rem) / 2);*/
    font-size: 13pt; 
    line-height: 1.5em;
    letter-spacing: 0.06em;
    padding-top: 0em;
  }

  h1,h2,h3,h4 {margin:0;}
  p {margin: 0 0 1em 0;}

  html {
      scroll-behavior: smooth;

  }
  @media screen and (-webkit-min-device-pixel-ratio: 1.25) {
    body {
      font-size: 12.5pt; 
    }
  }
  @media screen and (-webkit-max-device-pixel-ratio: 1.25) {
    body {
      font-size: 13pt; 
    }
  }

  @media screen and (-webkit-max-device-pixel-ratio: 1.00) {
    body {
      font-size: 14.5pt; 
    }
  }

  /*old screens, possibly quirky devices*/
  @media screen and (max-width: 400px) {
    body {    
      font-size: 11pt;
    }
  }
  @media screen and (max-width: 850px) and (min-aspect-ratio: 16/9) {
    body {    
      font-size: 11pt;
    }
  }
  @media screen and (max-width: 850px) and (min-aspect-ratio: 16/9) {
    body {    
      font-size: 11pt;
    }
  }
  @media screen and (max-width: 600px) and (orientation: landscape) {
    body {    
      font-size: 11pt;
    }
  }

  /*old screens, possibly quirky devices*/
  @media screen and (max-width: 240px) {
    body {    
      font-size: 9pt;
    }
  }
  @media screen and (max-width: 350px) and (orientation: landscape) {
    body {    
      font-size: 9pt;
    }
  }


  .f {font-size: calc(var(--font-size-factor) * 10 * var(--sfpx));}  
  .fh {font-size: calc(var(--font-size-factor) * 10 * var(--sfpxh));}  
  .fr {font-size: calc(var(--font-size-factor) * 10 * var(--sfpxr));}  

  header, ul, li, nav {display: inline;list-style:none;margin: 0;padding:0}

  .topnav {
    overflow: visible;
    background-color: rgba(255,255,255,0.75);
    position: fixed;
    z-index: 1000000;
    top:0;
    width: calc(100% - var(--pddng-l) - var(--pddng-r));
    height: 3.6em;
    line-height: 1em;
  }
  
  .topnav li a, .topnav li span {
    cursor: pointer;
    float: left;
    display: block;
    color: var(--lead-color);
    text-align: center;
    padding: 1.3em 2em;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
  }


  .topnav li:last-child {
    float:right;
  }

  @media screen and (max-width: 849px) {
      .topnav li:last-child {
        float:inherit;
        filter:invert(100%)
      }
  }


@keyframes shake {
  2.5%,
  22.5% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  5%,
  20% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  7.5%,
  12.5%,
  17.5% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  10%,
  15% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  25.5% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  51% {
    transform: rotate3d(0, 0, 0, 0deg);

  }
  100% {    
    transform: rotate3d(0, 0, 0, 0deg);
  }
}


  .topnav li ~ li a strong, .topnav li ~ li li span strong {
    font-size: 2em;
    line-height: 0.2em;
    position: relative;top: 0.3em;
    display: inline-block;margin-top: -0.3em;margin-bottom:-0.1em;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    animation-name: shake;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite;  
  }

  .topnav li:last-child a em, .topnav li:last-child span em {
    font-style: normal;
  }
  @media screen and (min-width: 850px) and (max-width: 1199px) {
      .topnav li:last-child a em, .topnav li:last-child span em {
        display: none;
      }
  }
  @media screen and (max-width: 1050px) {
    .topnav li a, .topnav li span {
      padding-left: 1.5em; padding-right: 1.4em;
    }  
  }  

  .topnav li:not(:first-child) a:hover, .topnav li:not(:first-child) a.active, .topnav li:not(:first-child) span.active, .topnav li:not(:first-child) a:active {
    background-color: var(--lead-color);;
    color: white;
  }
  

  @media screen and (min-width: 851px) and (max-width: 1000px) {

    .topnav li:first-child + li a, .topnav li:first-child + li + li + li a {
      line-height:0;color:rgba(255,255,255,0);
    }
    
    .topnav li:first-child + li a:first-line, .topnav li:first-child + li + li + li a:first-line {
      font-size:0;
    }
      
    .topnav li:first-child + li a:before, .topnav li:first-child + li + li + li a:before  {
      content:"";display:inline-block;width:2em;height: 1em;
      margin:0;padding:0;background: url('img/home_material_design_hover_2.png') no-repeat center;background-size: contain !important;
      transform: scale(1.35);
      margin-left: -0.5em;
      margin-right: -1.2em;
    }
    .topnav li:first-child + li + li + li a:before {
      background-image: url('img/mail_material_design_hover_2.png');
      padding-right: 0.7em;
      position: relative;left: -0.2em;
    }

    .topnav li:first-child + li + li + li a:before {
        filter:grayscale(0%) hue-rotate(80deg) saturate(0%) contrast(300%)
    }

    
    .topnav li:first-child + li a:hover:before,
    .topnav li:first-child + li a:active:before,
    .topnav li:first-child + li a.active:before,
    .topnav li:first-child + li + li + li a:hover:before,
    .topnav li:first-child + li + li + li a:active:before,
    .topnav li:first-child + li + li + li a:active:before {
      filter:grayscale(100%) invert(100%) brightness(200%); 
    }
 
  }


  .topnav {padding:0 var(--pddng-r) 0 var(--pddng-r)}

  .topnav li:first-child a {white-space: nowrap;display:inline-block !important;margin:0 0 0 -0.3em;padding:0.3em 4em 0 0;}
  .topnav li:first-child strong {white-space: nowrap;font-size: 2.0em;font-weight:bold;letter-spacing: -0.03em;position:relative;top: -0.1em;padding-left: 0.2em;
    color: rgba(var(--lead-color-compound-1), var(--lead-color-compound-2), var(--lead-color-compound-3), 0.9);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 48;
  }


  .topnav li:first-child a img {max-height: 3em;filter: drop-shadow(-1px 1px 2px var(--lead-color));margin-bottom:-10px;margin-top: 0px;transform: scale(1.12)}

  .swiper-slide.swiper-slide-active {z-index: 10000000 !important;margin-right: 0 !important;}

  .roboty-wykonczeniowe-slider {
    position: absolute;
    top: 0;
    left:0;
    z-index: 7;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;    
    background: url('img/lazienka.jpg') top center repeat;
  }    

  .roboty-wykonczeniowe-slider:before {
    content:'';display:block;width:100%;height:100%;
    height: 4%;
    opacity:0.5;
    position:absolute;bottom:0;left:0;z-index:8;
    background:url('img/slide_1.png');
    transform: scale(1) skew(-50deg,0deg);
    background-size: 0.2em;
    mask-image: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    mix-blend-mode:normal;
  }
  

  .swiper-wrapper, .swiper-slide {height: 100%;}
  


  .pcontainer {
    position:relative;
    font-size: 5.0em;
    margin:0em 0.5em 0 calc(var(--pddng-l) / 5);
    padding-top: 1.3em;  margin-bottom: 0.2em;
    height: calc((100% - 1.3em - 0.2em));
  }





h1, .roboty-wykonczeniowe-slider .header + div a {--header-size-factor:1}
h2, .roboty-wykonczeniowe-slider h2.header + div a {--header-size-factor:0.9}
h2.header_smaller, .roboty-wykonczeniowe-slider h2.header.header_smaller + div a {--header-size-factor:0.82}
h3, .roboty-wykonczeniowe-slider h3.header + div a {--header-size-factor:0.8}

.roboty-wykonczeniowe-slider .header {
  color: var(--lead-color);padding: 0;
  margin:0 0 0.1em 0;
  position: relative;z-index:15;
  font-size: calc(1em * var(--header-size-factor));text-shadow: 3px 3px 3px rgba(255,255,255,0.3); 
  letter-spacing: 0.02em;
  line-height: 1.3em;
  font-weight: 900;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.roboty-wykonczeniowe-slider .header + div {
  position: relative;z-index: 11;
  margin-bottom: 0.2em;
  clear:both;
  display: block  !important;width: 100% !important;
}

.roboty-wykonczeniowe-slider .header + div a {
  white-space:nowrap;
  position: relative;z-index:15;
  display:block;
  float:left;
  padding: 0.17em 0.7em 0.22em 0.9em;
  background: rgba(var(--lead-color-compound-1), var(--lead-color-compound-2), var(--lead-color-compound-3), 0.9);
  font-size: 0.6em;
  line-height: 1.15em;
  font-weight:normal;
  text-decoration: none;
  color: white;
  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 48;
  margin-top: 0.0em;
  margin-bottom: 0.5em;
  margin-right: 0.25em;
}

.roboty-wykonczeniowe-slider .header + div a span {
  display:inline-block;
  margin-top: -0.4em;
  margin-bottom: -0.2em;
  font-size: 1.0em;
  position: relative;top: 0.17em;
}

.topnav {padding:0 var(--pddng-r) 0 var(--pddng-r)}



@media screen and (min-width: 1300px) {
  :root {
    --pddng-base: 4em;
  }
}

@media screen and (max-width: 1299px) {
  .roboty-wykonczeniowe-slider .header {
    font-size: calc(0.78em * var(--header-size-factor));
    line-height: 1.3em;
    letter-spacing: 0;
  }
  .roboty-wykonczeniowe-slider .header + div a {
    font-size: calc(0.78em * var(--header-size-factor) / 1.8);
  }
  :root {
    --pddng-base: 4.1em;
  }
  
}

@media screen and (max-width: 880px) {
  .roboty-wykonczeniowe-slider .header {
    font-size: calc(0.8em * var(--header-size-factor));
  }
  .roboty-wykonczeniowe-slider .header + div a {
    font-size: calc(0.8em * var(--header-size-factor) / 1.8);
  }


  :root {
    --pddng-base: 2.1em;
    --pddng-top-bottom-base:calc(1.5 * var(--pddng-base));
    /*newer*/
  }
  @media screen and (max-width: 800px) {
    .topnav li:first-child a {padding-right: 3em;}
  }
}

@media screen and (max-width: 870px) {
  .roboty-wykonczeniowe-slider .header {
    font-size: calc(0.636em * var(--header-size-factor));
  }
  .roboty-wykonczeniowe-slider .header + div a {
    font-size: calc(0.636em * var(--header-size-factor) / 1.8);
  }
}

@media screen and (max-width: 600px) {
  :root {
    --pddng-base: 1em;
    --pddng-top-bottom-base:calc(3 * var(--pddng-base));
  }
}


.roboty-wykonczeniowe-slider .header  span, .roboty-wykonczeniowe-slider .header span ~ span {display: inline-block;background: rgba(255,255,255,0.75); padding-left: 0.2em; padding-right:0.2em;margin-bottom: 0.15em;}
.roboty-wykonczeniowe-slider .header .smhd, .roboty-wykonczeniowe-slider .header .smhd ~ span {font-size: 0.6em !important;}

@media screen and (orientation: landscape) and (max-width: 700px) {
  .roboty-wykonczeniowe-slider .header .smhd + span + br {display:none}
}
.roboty-wykonczeniowe-slider img {
    position:absolute;
    top: 0%;
    left: 50%;
    min-height: 100%;
    max-height: 120%;
    transform: translateX(-50%) translateY(0%);
}

.roboty-wykonczeniowe-slider .header span:first-child ~ span u {text-decoration:none;white-space:nowrap;}

.material-symbols-outlined {display:none;}
.material-symbols-outlined.material-symbols-outlined-displayed {display:auto;}
.roboty-wykonczeniowe-slider .header + div a span.material-symbols-outlined, .roboty-wykonczeniowe-slider .header span.material-symbols-outlined {font-size: 1.05em;position:relative;top: 0.20em;display:none;}
.roboty-wykonczeniowe-slider .header + div a span.material-symbols-outlined.school-icon {
  font-size: 1.3em;
  top: 0.27em;
}
.roboty-wykonczeniowe-slider .header + div a span.material-symbols-outlined.material-symbols-outlined-displayed,
.roboty-wykonczeniowe-slider .header span.material-symbols-outlined.material-symbols-outlined-displayed {display:inline-block;}



@media screen and (orientation: landscape) and (max-width: 900px) {
  .roboty-wykonczeniowe-slider .header span, .roboty-wykonczeniowe-slider .header span ~ span {margin-bottom: 0.15em;}
}

/* nested because for some reason didn't work the single "@media screen and (orientation: landscape) and (max-width: 600px) {...} */
@media screen and (orientation: landscape) {
  @media screen and (max-width: 900px) {
    .roboty-wykonczeniowe-slider .header {
      font-size: calc(0.636em * var(--header-size-factor) * 1.3);
    }
    .roboty-wykonczeniowe-slider .header + div a {
      font-size: calc(0.636em * var(--header-size-factor) / 2 * 1.3);
    }
  }
  @media screen and (max-width: 900px) and (min-aspect-ratio: 4/3) {
    .roboty-wykonczeniowe-slider .header {
      font-size: calc(0.545em * var(--header-size-factor) * 1.3);
    }
    .roboty-wykonczeniowe-slider .header + div a {
      font-size: calc(0.545em * var(--header-size-factor) / 2 * 1.3);
    }
      .pcontainer {padding-top: 1em;
          height: calc(100% - 1em - 0.2em)
      }
  }
  @media screen and (max-width: 900px) and (min-aspect-ratio: 16/9) {
    .roboty-wykonczeniowe-slider .header {
      font-size: calc(0.4545em * var(--header-size-factor) * 1.15);
    }
    .roboty-wykonczeniowe-slider .header + div a {
      font-size: calc(0.4545em * var(--header-size-factor) / 2  * 1.15);
    }
      .pcontainer {padding-top: 0.8em;
        height: calc(100% - 0.8em - 0.2em)
    }
  }
}

  .roboty-wykonczeniowe-slider .awarie-slider {
    display:block;
    width: 10em;height: 1.47em;position: relative;overflow:hidden;
    font-style:normal;
  }
  .roboty-wykonczeniowe-slider .awarie-slider > *:first-child {display:block;font-style:normal;}  
  .roboty-wykonczeniowe-slider .awarie-slider > * > * {display:block;font-style:normal;}
 


  main {display: inline;}
  .overflow-test {    width: 100%;height:auto;overflow-x: hidden;overflow-y:hidden; }
  
  .roboty-wykonczeniowe-slider + div {position: absolute;top: 100%;left:0;
    width: 100%;
    padding:0 0 0 0em;margin:0;
    z-index: 110;   
  }

  .roboty-wykonczeniowe-slider + div:first-child > div:first-child + div {    
    position: relative; width: 100%;height: 100%;z-index: 10000000;overflow-x:visible;overflow-y:visible;   
  }


@keyframes awarie {
  0% {       opacity:1 ; 
      color: var(--lead-color);
      background: rgba(255,255,255, 0.75);
  }
  7.99% {       opacity:1 ; 
      color: var(--lead-color);
      background: rgba(255,255,255, 0.75);
  }
  8% {       opacity:1; 
      color: rgba(255,255,255, 1);
      background: rgba(255,0,0, 0.9);
  }
  18.99% {       opacity:1; 
      color: rgba(255,255,255, 1);
      background: rgba(255,0,0, 0.9);
  }
  19% {            opacity: 1 ;
      color: var(--lead-color);
      background: rgba(255,255,255, 0.75);
  }
  100% {            
    opacity: 1
  }
}

  .roboty-wykonczeniowe-slider #awarie > span:first-child, 
  .roboty-wykonczeniowe-slider #awarie > span:first-child + span {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    animation-name: awarie;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite;  
  }

@keyframes awarie-kontakt {
  0% {       opacity:1 ; 
      background: var(--lead-color);
      transform: scale(1)
  }
  8% {       opacity:1; 
      background: rgba(0,150,0, 1);
      transform: scale(1)
  }
  11.99% {       opacity:1; 
      background: rgba(0,150,0, 1);
      transform: scale(1)
  }
  12% {       opacity:1; 
      background: rgba(0,150,0, 1);
      transform: scale(0.94)
  }
  14% {            opacity: 1 ;
      background: var(--lead-color);
  }
  27.99% {            opacity: 1 ;
      transform: scale(0.95)
  }
  28% {            opacity: 1 ;
      transform: scale(1)
  }
  100% {            
    opacity: 1
  }
}
  .roboty-wykonczeniowe-slider .awarie_kontakt {
    font-weight: bold;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48 !important;
  }

  .roboty-wykonczeniowe-slider .awarie_kontakt:first-of-type {
    animation-name: awarie-kontakt;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite;  
  }

@keyframes awarie-kontakt-scale {
  0% {
    transform: scale(1);
  }
  60% {       transform: scale(1);
  }
  61% {            transform: scale(1.3);
  }
  65% {            transform: scale(1.3);
  }
  70% {            transform: scale(1);
  }
  100% {            
    opacity: 1
  }
}

  .roboty-wykonczeniowe-slider .awarie_kontakt:first-of-type span {
    animation-delay: 0.3s;
    animation: shake;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite, infinite;  
  }

  .roboty-wykonczeniowe-slider .awarie_kontakt:first-of-type em {
    position: relative; top: -0.02em;
    animation-delay: 0.3s;
    animation: awarie-kontakt-scale;
    display: inline-block;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite, infinite;  
  }

  #map, #map > *:first-child {width: 100%;height:25em;border: 0;position:relative;overflow:hidden;}
  #map {
    background: url('img/mapa_bez_js.jpg') no-repeat center;
    background-size:cover;
  }

  #map > *:first-child {margin: -1px;}

  @keyframes arrow-down {
    0% { opacity:0.7; transform: scale(0.9);}
    2% {opacity:0.8; transform: scale(1);}
    4% { opacity:0.7; transform: scale(0.9);}
    6% { opacity:0.8;transform: scale(1); }
    8% {opacity:0.7;transform: scale(0.9);}
  }
  
  .arrow_down {
    width: 5em;
    margin-left: calc(50% - 2.5em) ;
    margin-right:calc(50% - 2.5em);
    height: 4em;
    transform: scale(1.1);
    opacity: 0.8;
    position: relative;
    z-index:8;
    top:-1em;
    background: url('img/arrow_circle_down.svg') center no-repeat;
    filter: drop-shadow(0em 0em 1em rgba(0,0,0,1));
    background-size: 4em;z-index: 1000;position: relative;
    margin-top: -4em;
    cursor:pointer;
    animation-name: arrow-down;
    animation-duration: 7.0s;
    transition: 0.5s;
    animation-iteration-count: infinite;  
    animation-delay: 2s;
    }

  .arrow_down a {display:block;width: 100%;height:100%;position:absolute;}


  #diagnostics {width: 50vw; height:1.5em;color:#fff;background: #000;position:fixed;top:0;left:0; opacity:1;
  z-index: 100000000;display:none;}


  @media screen and (max-width: 850px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav > span:last-child {
      float: right;
      display: block;
      background: var(--lead-color);
      width: 4em;
      height: 3.6em;
    }
  }
  
  @media screen and (max-width: 850px) {
    .topnav > span:last-child  {
      display:block;
      position: absolute;
      right: 0;
      top: 0;
    }
    
    .topnav > span:last-child i, .topnav > span:last-child i::before, .topnav > span:last-child i::after {
        display: block;
        position: absolute;
        overflow: visible;
        left: 1.15em;
        height: 0.13em;
        background: white;
        width: 2em;        
        top: 1.3em;
    }

    .topnav > span:last-child i::before {        
        content: "";        
        margin-top: 5px;
        position: absolute;
        left: 0;
        top: 0.62em;
    }
    .topnav > span:last-child i::after {
        content: "";
        position: absolute;
        left:0;
        top: 0.45em;
    }
  }
  @media screen and (min-width: 851px) {
    .topnav a {
      display:block;
    }
  }  
  @media screen and (max-width: 850px) {
    
    .topnav li:first-child ~ li > a {
      display:none;
    }
    .topnav.responsive li:first-child ~ li a {display: block;}
    .topnav.responsive li:first-child + li a {margin-top:3.4em;}
    .topnav.responsive li:first-child ~ li > a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav li:first-child ~ li a, .topnav li:first-child ~ li span {
      background-color: rgba(255,255,255,0.9);
      text-align: left;
    }
      
    .topnav li:first-child ~ li a:hover, .topnav li:first-child ~ li a.active, .topnav li:first-child ~ li span.active, .topnav li:first-child ~ li a:active {
      background-color: var(--lead-color);
    }

}

.standard {
  font-size: 1.2em;
  margin:0;
  padding:calc(var(--pddng-t)) calc(var(--pddng-r)) calc(var(--pddng-b)) calc(var(--pddng-l))
}

.standard.reverse_colors {color: rgba(255,255,255,1);background:var(--lead-color);}

.standard h2 {text-align: center;color: var(--lead-color);margin: 0;padding:0 0 calc(var(--pddng-base) / 4) 0;text-align: center;}
.standard.reverse_colors h2 {color: rgba(255,255,255,1);}
.standard a {color: var(--lead-color)}
.standard.reverse_colors a {color: rgba(255,255,255,1);}


.prace_budowlane ul {display: block;width: 100%;margin-top: -0.8em;}
.prace_budowlane ul li {list-style:none;display: block;float:left;border: 0;margin:0;padding:0.8em 0 0 0;width: 25%;font-size: 1.2em;font-weight: bold;text-align: center;color:var(--lead-color);}
.prace_budowlane ul li:before {content:"";display:block;width: 170px;margin:0 calc(100% - 170px) 0 0;position: relative;left: calc(50% - 85px);height: 170px;background: url('img/piktogramy.png') -625px -445px no-repeat;
    filter:grayscale(0%) hue-rotate(170deg) contrast(100%) saturate(40%) brightness(0%);
    transform:scale(0.7);margin:0px 0 -10px 0 
}

.prace_budowlane ul:after {content:"";display:block;height:0;clear:both;}

.prace_budowlane ul li.li_set_1:before {background-position: -244px -45px;}
.prace_budowlane ul li.li_set_1 + li:before {background-position: -624px -45px;}
.prace_budowlane ul li.li_set_1 + li + li:before {background-position: -810px -45px;}
.prace_budowlane ul li.li_set_1 + li + li + li:before {background-position: -246px -257px;}

.prace_budowlane ul li.li_set_2:before {background-position: -441px -253px;}
.prace_budowlane ul li.li_set_2 + li:before {background-position: -61px -452px;}
.prace_budowlane ul li.li_set_2 + li + li:before {background-position: -245px -455px;}
.prace_budowlane ul li.li_set_2 + li + li + li:before {background-position: -440px -454px;}

.prace_budowlane ul li.li_set_3:before {background-position: -250px -632px;}
.prace_budowlane ul li.li_set_3 + li:before {background-position: -439px -632px;}
.prace_budowlane ul li.li_set_3 + li + li:before {background-position: -441px -257px;}
.prace_budowlane ul li.li_set_3 + li + li + li:before {background-position: -818px -637px;}


@media screen and (max-width: 1349px) {
  .prace_budowlane ul li {width: 33%;}
}

@media screen and (max-width: 999px) {
  .prace_budowlane ul li {width: 50%;}
}

@media screen and (max-width: 599px) {
  .prace_budowlane ul li {width: 100%;}
}


.kontakt ul {display: block;margin:0;width: 100%;text-align:center;}
.kontakt ul li {list-style:none;font-size: 1.7em;line-height: 1.5em;display: inline-block;border: 0;margin:0;padding-top: 0.5em;width: 25%;font-weight: bold;text-align: center;color:var(--lead-color);}
.kontakt ul li:nth-child(2) {display: block;width: 100%;}
.standard.standard.reverse_colors.kontakt ul li {color: rgba(255,255,255,1)}
.kontakt ul li:nth-last-child(3) {color: #fff !important; display: block;width: 100%;font-size: 3.2em;letter-spacing: 0.07em;position: relative;top: -0.2em;}

@media screen and (max-width: 999px) {
  .kontakt ul li:nth-last-child(3) {font-size: 2.5em;}
  .kontakt ul li:nth-last-child(3) span:last-child {display: none;}
}

@media screen and (max-width: 649px) {
  .kontakt ul li:nth-last-child(3) {font-size: 2.0em;}
}
@media screen and (max-width: 499px) {
  .kontakt ul li:nth-last-child(3) {font-size: 1.8em;letter-spacing: 0.07em;position: relative;top: -0.2em;left:-0.1em}
}
@media screen and (max-width: 449px) {
  .kontakt ul li:nth-last-child(3) {font-size: 1.7em;letter-spacing: 0.04em;}
}

.kontakt ul li:nth-last-child(2) {display: block;width: 100%;padding-top: 0.1em;}
.kontakt ul li:last-child, .kontakt ul li:first-child {width: 100%;text-align: center;font-size: 2.1em;}
.kontakt ul li:first-child {font-size: 2.1em;}


  @keyframes awarie_kontakt_button {
    0% { transform: scale(1);}
    45% {transform: scale(1);}
    46% {transform: scale(0.97);}
    55% { transform: scale(0.97);}
    56% { transform: scale(1); }
    100% {opacity:0.7;transform: scale(1);}
  }


.kontakt .awarie_kontakt {
  display:inline-block;
  padding: 0.1em;background: #fff;color: #000 !important;
  border: 0.2em solid #000;
  border-radius: 0.2em;
  box-shadow: 0.03em 0.02em 0.2em #fff;
  animation-delay: 0.3s;
  animation: awarie_kontakt_button;
  animation-duration: 3s;
  transition: 0.5s;
  animation-iteration-count: infinite, infinite;  
}

.kontakt .awarie_kontakt:hover, .kontakt .awarie_kontakt:active  {
  display:inline-block;
  padding: 0.1em;background: #fff;color: #000 !important;
  border: 0.2em solid #000;
  border-radius: 0.2em;
  box-shadow: 0.03em 0.02em 0.2em #fff;
  animation: none;
  transition: 0.5s;
    transform: scale(0.97);
}


.kontakt .awarie_kontakt .material-symbols-outlined {font-size: 0.9em;
  position: relative;
  top: 0.08em;
   animation-delay: 0.3s;
    animation: shake;
    animation-duration: 3s;
    transition: 0.5s;
    animation-iteration-count: infinite, infinite;  
 }


footer {display: inline;clear:both;}
.footer ul, .footer li {display: block;}
.footer {display: block;position:relative;clear:both; z-index: 100000;}
.footer > div:first-child {
  height: 2.5em;
  width: 30%;position: relative;overflow:visible;
  float:left;
}
.footer > div:first-child + div {
  width: 40%;position: relative;overflow:hidden;
  float:left;
}

.footer > div:last-child {
  width: 30%;  position: relative;overflow:hidden;
  float:left;
}
.footer:after {content:"";display:block;position: relative;height:0;overflow:hidden;clear:both;}

.footer > div:first-child > nav ul li:first-child {position: relative;top: -0.5em;}
.footer > div:first-child > nav ul li:first-child img {width: 5em;}
.footer > div:first-child > nav ul li:first-child strong {position: relative;top: -0.8em;}

.footer > div:first-child a,
.footer > div:first-child + div a {text-decoration: none;}

.footer .material-symbols-outlined {position:relative;top:0.1em;}


@media screen and (max-width: 1399px) {
 .footer > div:first-child {float:none;width:50%;} 
 .footer > div:first-child > nav ul li:first-child img {margin-left:-0.5em;}
 .footer > div:first-child + div {width: 50%}
 .footer > div:last-child {margin-top: -2.40em;width: 50%;}

}


@media screen and (max-width: 649px) {
.footer > div:first-child {float:none;width:100%;} 
  .footer > div:first-child + div {width: 100%;margin-bottom: 1em;}
 .footer > div:last-child {margin-top: 0em;width: 100%;margin-bottom: 1em;}
 .footer > div {text-align: center;}
 .footer > div:first-child > nav ul li:first-child img {margin-left:-0.3em;}
}