@import url('simple-lightbox.css?v2.14.0');
  :root {
    --mgc: #C12D69;
    --white: #ffffff;
    --dark: #333333;
    --light: #efefef;
  }
  html { scroll-behavior: smooth; }
  body {  font-family: "Poppins", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; margin: 0; padding: 0; line-height: 150% }
  nav { text-align: center; margin: 30px }
  nav ul { margin: 0 auto; padding: 0; list-style: none }
  nav ul li { display: inline-block; }
  nav ul li a { color: var(--mgc); font-weight: bold; margin: 12px 10px; padding: 10px 20px; text-decoration: none; transition: 0.7s;  -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; border: var(--white) solid 1px; }
  nav ul li a.act { background: var(--mgc); color: var(--white); font-weight: bold; margin: 10px;  }
  nav ul li a:hover { border: var(--mgc) solid 1px; }
  footer { background: var(--mgc); background-repeat: no-repeat; color: #fff; padding: 50px; text-align: center; margin-top: -7px; }
  footer ul { padding: 0; margin: 20px; list-style: none; }
  footer ul li { display: inline-block; margin: 10px}
  footer ul li a { text-decoration: none; color: #fff; border-bottom: solid 1px rgba(255,255,255,0); transition: 0.7s; font-size: 14px }
  footer ul li a:hover { border-bottom: solid 1px rgba(255,255,255,1); }
  footer hr { background: none; border: none; border-top: 1px solid rgba(255,255,255,0.5); margin: 40px auto}
  footer small { font-size: 12px }
  .hr { width: 100%; margin: 50px automatycznie}
  .smi { width: 32px; margin: 10px }
  .tel { color: var(--dark); background: var(--white); padding: 15px 20px; display: inline-block; margin: 10px; transition: 0.7s; text-decoration: none }
  .tel:hover { color: var(--white); background: var(--dark); }
  .radius-10 { -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
  .radius-20 { -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; }
  .radius-50 { -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; }
  .radius-250 { -webkit-border-radius: 250px;-moz-border-radius: 250px;border-radius: 250px; }
  header { text-align: center; color: var(--white); line-height: 150%; padding: 100px 30% 100px 0; text-transform: uppercase; font-size: 24px; position: absolute; top: 15vh; width: 70% }
  header { font-family: "Lato", sans-serif; }
  header b { font-family: "Poppins", sans-serif; }
  header #logo { width: 520px; max-width: 100% }
  header #logob { display: none; }
  .logo { width: 320px; max-width: 100%; margin: 50px auto;}
  .logoline { width: 80px; max-width: 100%; margin: 0 20px;}
  #who { background: var(--dark); text-align: right; padding: 20px;}
  .mt { height: 30px; }
  #kontakt { background: var(--dark); color: var(--white); text-align: left; padding: 50px 20px; }
  #kontakt>div { width: 900px; margin: 0 auto}
  #kontakt .tel:hover { background: var(--mgc);}
  #o-mnie { background: var(--mgc); color: var(--white); text-align: center;}
  #o-mnie div {margin: 0 auto; width: 1000px; max-width: calc( 100% - 100px ); padding: 50px }
  #triwings { background: #000 url(triwings_bg.jpg) left center; background-size: cover; }
  #triwings>div { color: var(--white); margin: 0 auto; width: 1000px; max-width: calc( 60% - 50px ); padding: 170px 50px 170px 40%; font-size: 62px; line-height: 90%; font-weight: 100; }
  #triwings_txt { background: var(--white); }
  #triwings_txt>div { margin: 0 auto; width: 1000px; max-width: calc( 100% - 100px ); padding: 20px; display: grid; grid-template-columns: 70% auto }
  #triwings_txt>div ul { list-style: none; margin: 0; padding: 0}
  #triwings_txt>div ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; background: var(--light); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc)}
  .neauvia_devices { margin-top: -70px; margin-bottom: 30px; max-width: 100%; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; border-left: solid 2px var(--mgc) }
  .lampy { max-width: 100%; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; border-left: solid 2px var(--mgc) }
  .lampa { max-width: 100%; margin-top: -200px}
  .triwings_post { max-width: 100%; margin: 20px; margin-top: -20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; border-left: solid 2px var(--mgc) }
  #triwings_sec { background: var(--light) url('bg_sec.svg') center no-repeat; background-size: 120%; }
  #triwings_sec>div { margin: 0 auto; width: 1000px; max-width: calc( 100% - 40px ); padding: 50px 20px; display: grid; grid-template-columns: auto auto auto }
  #triwings_sec>div div { margin: 10px }
  #triwings_sec>div div ul { list-style: none; margin: 0; padding: 0}
  #triwings_sec>div div ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; background: var(--white); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc)}
  #nrose { background: #CE0539 url(nrose_bg.jpg) left center; background-size: cover; }
  #nrose>div { color: var(--white); margin: 0 auto; width: 1000px; max-width: calc( 60% - 50px ); padding: 170px 50px 170px 40%; font-size: 62px; line-height: 90%; font-weight: 100; }
  #nrose small { font-size: 18px; line-height: 100%}
  #nrose_txt { background: var(--white); }
  #nrose_txt>div { margin: 0 auto; width: 1000px; max-width: calc( 100% - 40px ); padding: 40px 20px; display: grid; grid-template-columns: auto auto; grid-gap: 50px}
  #nrose_sec { background: var(--light) url('bg_sec.svg') center no-repeat; background-size: 120%; }
  #nrose_sec>div { margin: 0 auto; width: 1000px; max-width: calc( 100% - 40px ); padding: 40px 20px; display: grid; grid-template-columns: auto auto; grid-gap: 50px }
  #nrose_sec>div div ul { list-style: none; margin: 0; padding: 0}
  #nrose_sec>div div ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; background: var(--white); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc)}
  #uslugi { background: var(--dark) url('bg_sec.svg') center no-repeat; background-size: 120%; color: var(--white);  }
  #uslugi>div {margin: 0 auto; width: 1000px; max-width: calc( 100% - 100px ); padding: 50px }
  #uslugi h3 { margin-top: 0 }
  .uslugi { background: var(--mgc); padding: 70px 20px 20px 20px; margin: -70px 20px 20px 20px }
  .uslugi-img { max-width: calc( 100% - 80px) ; margin: 20px 20px 20px 0px}
  .diagnoza { background: var(--white); color: var(--dark); padding: 20px 20px 90px  20px; margin: 20px 20px -100px 20px  }
  .uslugi ul, .diagnoza ul { list-style: none; margin: 0; padding: 0 }
  .uslugi ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 10px 10px 10px;-moz-border-radius: 0 10px 10px 10px;border-radius: 0 10px 10px 10px; background: var(--white); color: var(--dark); font-size: 12px; }
  .diagnoza ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 10px 10px 10px;-moz-border-radius: 0 10px 10px 10px;border-radius: 0 10px 10px 10px; background: var(--light); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc) }
  .diagnoza-img { max-width: calc( 100% - 60px) ; margin: 20px 0px 20px 60px}
  #cennik { background: #EC9A89; color: var(--dark); text-align: center; border-top: 5px solid var(--mgc); padding: 50px 0 }
  #cennik>div {margin: 0 auto; width: 1000px; max-width: calc( 100% - 100px ); padding: 50px; display: grid; grid-template-columns: auto auto }
  #cennik h4 { border-bottom: 2px solid var(--mgc); width: auto; display: inline-block;}
  #cennik table { margin: 0 auto }
  #cennik table tr td { padding: 3px; text-align: left }
  #cennik table tr td:last-child { white-space: nowrap; text-align: right;}
  #cennik td span { transition: 0.7s; display: block; padding: 10px 20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; background: var(--light); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc)}
  #cennik tr:hover td span { background: var(--mgc); color: var(--white); }
  #cennik img { max-height: 500px; max-width: 90%}
  #cennik .cennik h4 { margin-top: 0}
  #cennik .cennik { -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background: rgba(255,255,255,0.7); color: var(--dark); padding: 30px 20px; }
  #certyfikaty { color: var(--dark); background: var(--white); }
  #certyfikaty>div {margin: 0 auto; width: 1000px; max-width: calc( 100% - 100px ); padding: 150px 50px }
  #certyfikaty a { color: var(--mgc); }
  #certyfikaty ul { list-style: none; margin: 0; padding: 0}
  #certyfikaty ul li { margin: 10px; padding: 10px 20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; background: var(--light); color: var(--dark); font-size: 12px; border-left: solid 2px var(--mgc)}
  #galeria { display: grid;grid-template-columns: auto auto auto auto auto auto; overflow: }
  #galeria div { margin-bottom: -3px; position: relative; overflow: hidden; aspect-ratio: 4 / 4; -webkit-box-shadow: inset 0px 0px 43px -30px rgba(0, 0, 0, 1); -moz-box-shadow: inset 0px 0px 43px -30px rgba(0, 0, 0, 1); box-shadow: inset 0px 0px 43px -30px rgba(0, 0, 0, 1); }
  #galeria img { max-width: 100%; transition: 0.7s; height: 100%; width: 100%; object-fit: cover; }
  #galeria div a b { opacity: 0; transition: 0.7s; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: calc(50% - 10px) 0; text-align: center; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.6); font-size: 84px; font-family: "Lato", sans-serif; font-weight: 100; font-style: normal;}
  #galeria div a:hover img { transform: scale(1.2);}
  #galeria div a:hover b { opacity: 1 }
  .cert {max-width: 100% }
  .certyfikaty { grid-template: 33% 33% 33% !important; }
  .certyfikaty div { text-align: center; padding: 20px; }
  label { display: block; font-size: 12px; padding: 20px 0 10px 0 }
  label.list { display: block; font-size: 12px; padding: 0px 0 }
  input.submit { border: 1px solid var(--mgc); padding: 10px; width: 300px; background: var(--mgc); color: var(--white); margin: 0 auto; text-transform: uppercase; cursor: pointer; }
  input.submit:hover { color: var(--mgc); background: : var(--white); }
  input { border: 1px solid var(--mgc); padding: 10px; width: 80%}
  input[type=radio] { width: 15px }
  video { background: #efefef; width: 100%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    margin-bottom: -10px;
  }
  #map iframe,
   #map { margin: 0; padding: 0; border: 0; background: #fff; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); }
   .grid-3 { display: grid; grid-template-columns: auto auto auto; }
   .grid-2 { display: grid; grid-template-columns: auto auto; }

  .magdalena { width: 300px; float: left; background: #fff; border: 7px solid var(--white);margin: 20px}
  .magdalena2 { width: 300px; float: right; background: #fff; border: 7px solid var(--white);margin: 20px}
  .shd {
    -webkit-box-shadow: 0px 0px 68px -34px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 68px -34px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 68px -34px rgba(0, 0, 0, 1);
  }

  .modal { display: none; position: fixed; z-index: 1;  padding-top: 100px; left: 0; top: 0;width: 100%; height: 100%; overflow: auto;background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
  .modal-content {position: relative;background-color: #fefefe; margin: auto;padding: 0;border: 1px solid #888;width: 80%;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s;animation-name: animatetop;animation-duration: 0.4s}

    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }
    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }

  .close {color: white;float: right;font-size: 24px;font-weight: bold; padding: 20px; }
  .close:hover, .close:focus {color: #ccc;text-decoration: none;cursor: pointer;}
  .modal-header {padding: 2px 16px;background-color: var(--dark);color: white;}
  .modal-body {padding: 20px 40px; height: 50vh; overflow-y: scroll}
  .clr { clear: both; padding: 10px !important }

      @media (max-width: 1000px) {
        header { position: relative; top: 0; text-align: center; color: var(--dark); padding: 50px 0px; width: 100%}
        header #logob { width: 320px; max-width: 100%; display: inline-block; }
        header #logo { display: none; }
        video { display: none }
        .magdalena, .magdalena2 { float: none }
        #certyfikaty>div { max-width: calc( 100% - 40px); padding: 50px 20px;}
        #kontakt { grid-template-columns: auto;}
        #kontakt>div { max-width: calc( 100% - 40px); padding: 0px 20px;}
      }
      @media (max-width: 660px) {
        header { padding: 50px 0; text-align: center; width: 100%}
        nav ul li { display: inline-block; margin: 15px; }
        nav ul li:last-child { margin-top: 20px; }
        header { font-size: 18px; }
        header #logob { width: calc( 100% - 40px ); margin: 0 20px}
        footer { padding: 20px }
        #kontakt img { display: block; margin: 30px auto}
        #galeria { grid-template-columns: auto auto auto; }
        .grid-2 { grid-template-columns: auto; }
        .grid-3 { grid-template-columns: auto; }
        #triwings { padding: 20px; background: var(--mgc)}
        #triwings>div { grid-template-columns: auto; max-width: calc( 100% - 20px ); padding: 10px }
        #triwings_txt>div { grid-template-columns: auto;max-width: calc( 100% - 20px ); padding: 10px }
        #triwings_sec>div { grid-template-columns: auto;max-width: calc( 100% - 20px ); padding: 10px }
        #nrose { padding: 20px; background-image: none }
        #nrose>div { grid-template-columns: auto; max-width: calc( 100% - 20px ); padding: 10px }
        #nrose_txt>div { grid-template-columns: auto;max-width: calc( 100% - 20px ); padding: 10px }
        #nrose_sec>div { grid-template-columns: auto;max-width: calc( 100% - 20px ); padding: 10px }
        #uslugi>div { max-width: calc( 100% - 20px ); padding: 10px }
        #o-mnie div { max-width: calc( 100% - 40px ); padding: 20px;}
        #cennik  { max- padding: 5px; }
        #cennik div { max-width: calc( 100% - 10px ); padding: 5px; grid-template-columns: auto}
        .magdalena { max-width: 80%; }
        .lampa { max-width: 60%; margin: 0 auto;}
        .triwings_post { max-width: 90%; margin: 20px; margin-top: -20px; -webkit-border-radius: 0 20px 20px 20px;-moz-border-radius: 0 20px 20px 20px;border-radius: 0 20px 20px 20px; border-left: solid 2px var(--mgc) }
          .neauvia_devices { margin-top: 0px; }
      }