@import url("fonts/stylesheet.css");

html, body {height: 100%;}

body {margin: 0 auto;
      padding: 0;
      font-family: "Exo 2", sans-serif;
      font-size: 15px;
      line-height: 23px;
      color: #728ea5;
      font-weight: 300;}

input[type='text'], input[type='email'], input[type='submit'], textarea, input[type='tel'],input[type="date"]
{font-family:  "Exo 2", sans-serif;
box-sizing: border-box;}



*:focus {outline: 0;}

a {text-decoration: none;
   cursor: pointer;}

b, strong {font-weight: 700;}

div {box-sizing: border-box;}


.f-left {float: left;}

.f-right {float: right;}

.clear {clear: both;}

.center {text-align: center;}


ul {margin: 0;
    padding: 0;
    list-style: none;}

.header-top-container {width: 100%;
                   margin: 0 auto;
                   height: 35px;
                   position: relative;
                   z-index: 10;
                   background: #f9f9f9;}

.header-top {width: 100%;
           max-width: 1360px;
           margin: 0 auto;
          padding: 0 20px;
         position: relative;
         display: flex;
         justify-content: space-between;
          font-size: 14px;
          color: #1a4b72;
          font-weight: 400;}

.header-top a {color: #1a4b72;}

.header-top span {padding: 6px 52px 0 25px;
                   display: inline-block;
                   position: relative;}

.header-top span:before {display: block;
                          content: '';
                          position: absolute;
                          width: 19px;
                          height: 19px;
                          top: 9px;
                          left: 0;}

.header-top span.h-adres:before {background: url(img/pin.svg) no-repeat;}

.header-top span.h-time:before {background: url(img/godziny.svg) no-repeat;}

.header-top a {padding: 6px 52px 0 25px;
                   display: inline-block;
                   position: relative;}

.header-top a:before {display: block;
                          content: '';
                          position: absolute;
                          width: 19px;
                          height: 19px;
                          top: 9px;
                          left: 0;}

.header-top a.top-tel:before {background: url(img/telefon.svg) no-repeat;}

.header-top a.top-mail:before {background: url(img/e-mail.svg) no-repeat;
                               top: 12px;}

.header-top a.top-mail {padding-right: 0;}

.header-container {width: 100%;
                   margin: 0 auto;
                   height: 86px;
                   position: relative;
                   z-index: 10;}

.header { width: 100%;
           max-width: 1360px;
           margin: 0 auto;
          padding: 0 20px;
         position: relative;
         display: flex;
         justify-content: space-between;}

.logo {width: 237px;
        padding-top: 23px;}

.logo img {width: 100%;}

.menu-phone ul li {display: inline-block;}

.menu-phone ul li a {font-size: 15px;
                      text-transform: uppercase;
                      color: #1a4b72;
                       font-weight: 600;
                       transition: all .3s ease .10s;
                       padding: 36px 30px 0 30px;
                       display: block;}

.menu-phone ul li:last-child a  {padding-right: 0;}

.menu-phone ul a:hover {color: #d7375d;}

.slider-over-container {position: relative;
                   z-index: 1;
                   width: 100%;
                   height: 670px;
                   clear: both;
                   overflow: hidden;}

.slider-container {position: relative;
                   z-index: 1;
                   width: 100%;
                   height: 670px;
                   clear: both;
                   overflow: hidden;}


.slider {width: 100%;
         max-width: 1360px;
         margin: 0 auto;
         position: relative;
         padding: 0 20px 0 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
         color: #ffffff;}

.slider-box {width: 100%;
             color: #fff;
             height: 670px;
             display: flex;
             align-items: center;
             text-align: center;
             padding-top: 85px;}

.slider-content {width: 100%;}

.slider-text .more-box a {padding: 0;}

.slider h1 {font-size: 72px;
            line-height: 72px;
            text-transform: uppercase;
            font-weight: 600;
            margin: 0;}

.slider-text {font-size: 32px;
              line-height: 38px;
              color: #ffffff;
              font-weight: 400;
              padding: 15px 0 25px 0;
              display: block;}

.oferta-container { width: 100%;
                    max-width: 1360px;
                    margin: 0 auto;
                   padding: 55px 20px;
                   position: relative;
                   display: flex;
                   justify-content: space-between;
                   flex-wrap: wrap;}

.oferta-left {width: 40%;
              padding-top: 50px;}

.oferta-left .ngl-bg h2 {margin: 0;
                         padding: 58px 0 0 0;
                         color: #1a4b72;}

.oferta-left h3 {font-size: 33px;
                 color: #d7375d;
                 font-weight: 400;
                 margin: 0;}

.oferta-left .ngl-bg {text-align: left;}

.oferta-left .ngl-bg .bg {text-align: right;}

.oferta-right {width: 60%;
               background: url(img/kolka.svg) no-repeat 40px 30px;
               position:  relative;
               height: 540px;}

.o-foto {position: absolute;}

.o-foto img {width: 100%;
              border-radius:  50%;
              -moz-border-radius: 50%;
              -webkit-border-radius: 50%;}

.o-foto1 {width: 285px;
         height: 285px;
         top: 260px;
         left: 0;
         z-index: 10; }

.o-foto2 {width: 359px;
         height: 359px;
         top: 0;
         left: 117px;
         z-index: 1; }

.o-foto3 {width: 421px;
         height: 421px;
         top: 30px;
         left: 357px;
         z-index: 10;}

.produkty-container {width: 100%;
                    max-width: 1360px;
                    margin: 0 auto;
                   padding: 0 14px;
                   position: relative;
                   display: flex;
                   justify-content: space-between;
                   flex-wrap: wrap;}

.ngl-bg {width: 100%;
         position: relative;
         text-align: center;
         padding: 0 20px 30px 20px;}

.bg {position: absolute;
     width: 100%;
     color: #f8f8f8;
     font-size: 173px;
     font-weight: 400;
     font-family: "Noto Serif";
     z-index: 1;
     line-height: 130px;}

.ngl-bg h2 {font-family: "Noto Serif";
             font-size: 53px;
             font-weight: 400;
             margin: 58px 0 0 0;
             position: relative;
             z-index: 2;
             line-height: 72px;}


h2.red {color: #d7375d;}


.produkty-row {width: 100%;
               display: flex;
               justify-content: left;
               flex-wrap: wrap;}

.produkt-box {width: calc(25% - 14px);
              margin: 0 7px 25px 7px;}

.pr-foto {width: 100%;}

.pr-foto img {width: 100%;
              border-radius:  40px 0 40px 0;
              -moz-border-radius: 40px 0 40px 0;
              -webkit-border-radius: 40px 0 40px 0;}

.pr-title {font-size: 28px;
            font-weight: 400;
            line-height: 45px;}

.pr-title a {color: #1a4b72;}

.pr-opis {padding-bottom: 10px;}

.cena-row {width: 100%;
           display: flex;
           justify-content: space-between; }

.cena {display: block;
       font-size: 28px;
       color: #d7375d;
       font-weight: 400;
       line-height: 30px;}

.pr-button {font-size: 11px;
            text-transform: uppercase;
            color: #1a4b72;
            font-weight: 600;
            display: block;
            padding: 5px 15px;
            background:  #d8e8f6;
            border-radius:  6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;}

.more-box {text-align: center;
            width: 100%;
            padding: 10px 0 0 0;}

.more-box a,
.kontakt-button {font-size: 15px;
              color: #ffffff;
              font-weight: 600;
              display: inline-block;
              width: 158px;
              height: 40px;
              border-radius:  6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
             background: #d7375d;
             margin: 0 auto;
             box-sizing: border-box;
             padding: 8px 0 0 0;}

.icon-row {width: 100%;
            display: flex;
           justify-content: center;
           flex-wrap: wrap;
           padding: 80px 20px 50px 20px;}

.icon-box {width: 375px;
           text-align: center;
           padding: 0 40px;}

.icon-ngl {display: block;
            font-size: 33px;
            line-height: 34px;
            color: #d7375d;
            font-weight: 400;}

.realizacje-container {width: 100%;
                    max-width: 1360px;
                    margin: 0 auto;
                   padding: 0 20px;
                   position: relative;
                   display: flex;
                    flex-wrap: wrap;}

.home-galeria {width: 100%;}

.faq-container {width: 100%;
                max-width: 1360px;
                margin: 0 auto;
                padding: 0 20px;
                display: flex;
                 flex-wrap: wrap;}

.faq-over-container {width: 100%;}

.faq-box h3 {font-size: 28px;
             color: #1a4b72;
             font-weight: 400;
             position: relative;
             padding: 25px 0 25px 40px;
             transition: all 0.5s ease;
             margin: 0;}

.faq-box h3.active {color: #d7375d;}

.faq-box h3:before,
.faq-box h3:after {position: absolute;
                     width: 20px;
                     height: 22px;
                     content: '';
                     display: block;
                     top: 30px;
                     left: 0;
                     transition: all 0.5s ease;}

.faq-box h3:before {background: url(img/rozwin.svg) no-repeat;
                     transform: rotate(0deg);
                     opacity: 1;}

.faq-box h3:after {background: url(img/zwin.svg) no-repeat;
                     transform: rotate(-180deg);
                     opacity: 0;}

.faq-box h3.active:before {opacity: 0;
                           transform: rotate(180deg);}


.faq-box h3.active:after {background: url(img/zwin.svg) no-repeat;
                          opacity: 1;
                          transform: rotate(0deg);}

#faqs div {padding: 0 0 0 40px;
           font-size: 18px;
            line-height: 30px;}

.kontakt-over-baner {width: 100%;
                     max-width: 840px;
                     margin: 0 auto;
                     padding: 60px 20px;}

.kontakt-baner {width: 100%;
                border: 2px dashed #d7375d;
                border-radius:  40px;
               -moz-border-radius: 40px;
               -webkit-border-radius: 40px;
               text-align: center;
               padding: 40px 20px;}

.kontakt-haslo {font-family: "Noto Serif";
                 font-size: 53px;
                 line-height: 72px;
                 color: #d7375d;
                 display: block;
                 padding-bottom: 20px;}


.seo-box {width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: 0 20px 60px 20px;
          display: flex;
          flex-wrap: wrap;}

.seo-text {width: 100%;
           column-count: 2;}

.seo-text p:first-child {margin-top: 0;}

.seo-text p:last-child {margin-bottom: 0;}

.footer-container {width: 100%;
                   background: #F6F6F6;
                   clear: both;
                   margin: 0 auto;
                   padding: 30px 0 30px 0;
                   color: #1a4b72;}

.footer-container a {color: #1a4b72;}

.footer {width: 100%;
           max-width: 1360px;
           margin: 0 auto;
          padding: 0 20px;
         position: relative;}


.footer-top {display: flex;
             justify-content: space-between;
              flex-wrap: wrap;}

.footer-menu ul {display: flex;
                 justify-content: left;
                 flex-wrap: wrap;}

.footer-menu ul li {font-size: 15px;
                     text-transform: uppercase;
                     font-weight: 600;
                     padding: 0 60px 0 0;}


.footer-bottom {width: 100%;
                 padding: 30px 20px 0 20px;
                 text-align: center;
                 font-size: 15px;
                 line-height: 22px;
                 font-weight: 600;}

.kontakt-mobile,
.adres-mobile {display: none;}



/*BUTTON*/

.menu-button {
  position: absolute;
  top: 20px;
  right: 30px;
  background: transparent;
  display: none;
  cursor: pointer;}


.menu-button:focus {outline: none;}

.menu-button .menu-ico {display: block;
                       width: 36px;
                        height: 6px;
                         background: #d7375d;}


.menu-button .menu-ico + .menu-ico { margin-top: 6px;}

#gallery-1 img {width: 100%;
              border-radius:  40px 0 40px 0;
              -moz-border-radius: 40px 0 40px 0;
              -webkit-border-radius: 40px 0 40px 0;
              border: none!important;}

#gallery-1 {display: flex!important;
             flex-wrap: wrap;}

#gallery-1 .gallery-item {margin: 7px!important;
	                      width: calc(25% - 14px)!important;}

#gallery-1 br {display: none!important;}

/*BLOKI*/

.block {width: 100%;
        clear: both;}

.block-ngl {padding-top: 30px;}

.ngl-bg h1 {font-family: "Noto Serif";
             font-size: 53px;
             font-weight: 400;
             margin:0;
             position: relative;
             z-index: 2;
             line-height: 72px;
             color: #d7375d;
             padding: 58px 0 0 0;}

.wysiwyg {width: 100%;
          max-width: 1360px;
           margin: 0 auto;
          padding: 0 20px; }

.block .ngl-bg h2 {color: #d7375d;
                    padding: 58px 0 0 0;
                     margin: 0; }

.cennik-row {width: 100%;
          max-width: 1360px;
           margin: 0 auto;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;}

.cennik-col1,
.cennik-col2 {width: calc(50% - 25px);}

.cennik-row {font-size: 18px;
             line-height: 30px;}

.cennik-row ul li {position: relative;
                    display: block;
                    padding: 0 0 0 15px;}

.cennik-row ul li:before {position: absolute;
                           display: block;
                           top: 12px;
                           left: 0;
                           content: '';
                           width: 5px;
                           height: 5px;
                           border-radius:  50%;
                           -moz-border-radius: 50%;
                           -webkit-border-radius: 50%;
                           background: #d7375d;}

.cennik-row h3 {font-size: 28px;
                 color: #d7375d;
                 font-weight: 400;
                 margin: 0;
                 line-height: 32px;
                 padding-bottom: 20px;}

.block-prod     {width: 100%;
                    max-width: 1360px;
                    margin: 0 auto;
                   padding: 0 14px; }

.carousel-over {width: 100%;
                max-width: 1360px;
                margin: 0 auto;
                padding: 0 20px;}

.kontakt-text {width: 100%;
               max-width: 1360px;
               margin: 0 auto;
               padding: 0 20px;}

.kontakt-row {width: 100%;
              max-width: 1360px;
               margin: 0 auto;
               padding: 30px 20px;
              display: flex;
              justify-content: space-between;
              flex-wrap: wrap;}

.kontakt-col {width: calc(50% - 18px);}

.form-box {width: 100%;
           padding-bottom: 18px;}

.kontakt-col input[type='text'],
.kontakt-col input[type='email'],
.kontakt-col textarea,
.kontakt-col input[type='tel'],
.kontakt-col input[type='date']  {width: 100%;
                                   border: 2px solid #E7EEF4;
                                   height: 38px;
                                   border-radius: 19px;
                                   -moz-border-radius: 19px;
                                   -webkit-border-radius: 19px;
                                   padding: 0 20px;
                                   color: #1a4b72;}

.kontakt-col textarea {height: 205px;
                        padding:15px 20px;}

.kontakt-col input[type='submit'] {width: 100%;
                                   border: none;
                                   height: 38px;
                                   color: #fff;
                                   background:#d7375d;
                                   border-radius: 6px;
                                   -moz-border-radius: 6px;
                                   -webkit-border-radius: 6px;}

.form-submit {padding-bottom: 0;}

.kontakt-col ::-webkit-input-placeholder {font-size: 14px;
                                          color: #1a4b72;
                                          font-weight: 400;
                                           opacity: 1;}

.kontakt-col :-moz-placeholder {font-size: 14px;
                                          color: #1a4b72;
                                          font-weight: 400;
                                           opacity: 1;}

.kontakt-col ::-moz-placeholder {font-size: 14px;
                                          color: #1a4b72;
                                          font-weight: 400;
                                           opacity: 1;}

.kontakt-col :-ms-input-placeholder {font-size: 14px;
                                          color: #1a4b72;
                                          font-weight: 400;
                                           opacity: 1;}

.col-mapa {border-radius: 6px;
           -moz-border-radius: 6px;
           -webkit-border-radius: 6px;
           overflow: hidden;}

.form-box p {margin: 0;}

.block-kontakt {padding-top: 50px;}

.block-button {padding-bottom: 50px;}

.block-wysiwyg {padding: 30px 0;}

.block-wysiwyg ul li {position: relative;
                      padding: 0 0 0 25px;}

.block-wysiwyg ul li:before {position: absolute;
                           display: block;
                           top: 10px;
                           left:8px;
                           content: '';
                           width: 5px;
                           height: 5px;
                           border-radius:  50%;
                           -moz-border-radius: 50%;
                           -webkit-border-radius: 50%;
                           background: #d7375d;}

.footer-sm a {padding:  0 5px;}