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

html, body {height: 100%;}

body {margin: 0 auto;
      padding: 0;
      font-family: Nunito, sans-serif;
      font-size: 18px;
      line-height: 33px;
      color: #193f76;}

input[type='text'], input[type='email'], input[type='submit'], textarea, input[type='tel'], input[type='password']
{font-family:  Nunito, 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-container {width: 100%;
                   margin: 0 auto;
                   height: 96px;
                   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: 305px;
        padding-top: 12px;}

.logo img {width: 100%;}


.menu-phone {display: flex;
             justify-content: center;}

.menu-phone ul li {display: inline-block;
                    padding: 0 15px;}

.menu-phone ul li a {color: #193f76;
                      display: block;
                       padding: 35px 0 10px 0;
                       transition: all .3s ease .10s;
                      position: relative;}


.menu-phone ul li a:before {display: block;
                              position: absolute;
                              width: 100%;
                              height: 1px;
                              content:'';
                              background:  #193f76;
                              bottom: 18px;
                              left: 0;
                              opacity: 0;
                              transition: all .3s ease .10s;}

.menu-phone ul li a:hover:before,
.menu-phone ul li.current-menu-item a:before {opacity: 1;}

.menu-phone ul li > ul {display: none;
                        position: absolute;
                        background: #EBEEF3;
                        margin-left: -15px;}

.menu-phone ul li > ul li a {padding-top: 10px;}


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


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

.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%;}


.slider-box {text-align: center;}

.slider h1 {font-size: 98px;
            line-height: 33px;
            font-weight: 800;}

.slider p {font-size: 21px;
           line-height: 39px;
           font-weight: 400;}

.omnie-over {width: 100%;
             overflow: hidden;
             background: url(img/bg_white.jpg) repeat;}

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

.omnie-img {width: 430px;}

.omnie-img-phone {display: none;}

.omnie-img img {width: 100%;
                 border-radius: 15px;
                 -moz-border-radius: 15px;
                 -webkit-border-radius: 15px;}


.omnie-text {width: calc(100% - 460px);
             padding-top: 35px;}

.ngl-box {padding-bottom: 20px;}

.ngl {font-size: 32px;
      font-weight: 800;
      position: relative;
      display: inline-block;}

.ngl:before {display: block;
             position: absolute;
             width: 60px;
             height: 5px;
             content:'';
             border-radius: 3px;
             -moz-border-radius: 3px;
             -webkit-border-radius: 3px;
             background: #f9bb00;
             bottom: -13px;
             left: 0;}

.ngl-center:before {left: calc(50% - 30px);}

.button  {font-size: 17px;
         color: #193f76;
         font-weight: 800;
         display: inline-block;
         padding: 5px 24px 5px 24px;
         border-radius: 12px;
         -moz-border-radius: 12px;
         -webkit-border-radius: 12px;
         background: #E0E5EB;
         transition: all .3s ease .10s;}

.oferta-box-over {width: 100%;
                  padding: 55px 0 60px 0;
                  overflow: hidden;
                  background: url(img/bg_blue.jpg) repeat;}

.ngl-box {text-align: center;}

.omnie-text .ngl-box {text-align: left;}

.center-button {text-align: center;}

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

.oferta-box {width: calc(33.3333% - 30px);}

.o-ngl {font-size: 26px;
        font-weight: 800;
        display: block;
        width: 100%;}

.oferta-ico {width: 54px;
             float: left;
             padding-top: 15px;}

.oferta-box p:first-child {margin-top: 0;}

.ref-box-over {width: 100%;
             overflow: hidden;
             background: url(img/bg_white.jpg) repeat;
             padding: 55px 0 60px 0;}

.ref-row {width: 100%;
         max-width: 1160px;
         margin: 0 auto;
         padding: 0 20px;}

.ref-box {width: 100%;
          padding: 20px 33px 33px 33px;
          background: url(img/quote.svg) no-repeat;}

.ref-text {font-style: italic;}

.ref-podpis {font-size: 14px;}

.ref-podpis b,
.ref-podpis strong {font-weight: 800;}

.faq-box-over {width: 100%;
               overflow: hidden;
               background:#E8EDF3;
               padding: 55px 0 60px 0;}

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

.faq-box h3 {margin: 0;
             font-size: 18px;
             font-weight: 800;
             padding: 8px 25px 8px 50px;
             position: relative;}

#faqs:nth-child(2n) h3 {background: #F6F7F8;}

#faqs div {padding: 0 25px 17px 50px;}

.faq-box h3:before {content: '';
                      transition: all 0.35s;
                      display: block;
                      position: absolute;
                      top: 20px;
                      left: 15px;
                      width: 24px;
                      height: 14px;
                      background: url(img/collapse.svg) no-repeat;}

.faq-box h3.active:before {background: url(img/collapse.svg) no-repeat;
                           -webkit-transform: rotate(180deg);
                          -moz-transform: rotate(180deg);
                          left: 7px;}

.blog-over-container {width: 100%;
                      overflow: hidden;
                      background: url(img/bg_white.jpg) repeat;
                      padding: 55px 0 60px 0;}

.blog-row {width: 100%;
         max-width: 1360px;
         margin: 0 auto;
         padding: 19px 9px 0 9px;
         display: flex;
         justify-content: left;
         flex-wrap: wrap;}

.box-blog {width: calc(25% - 22px);
           margin: 0 11px 25px 11px;}

.box-img img {width: 100%;
               border-radius: 15px 0 15px 0;
               -moz-border-radius: 15px 0 15px 0;
               -webkit-border-radius: 15px 0 15px 0;}

h2.title-news {font-size: 26px;
               font-weight: 700;
               margin: 0;
               line-height: 26px;}

h2.title-news a {color: #193f76;}

.data {font-size: 13px;
       color: #f9bb00;
        font-weight: 800;
        line-height: 15px;}

.zajawka {line-height: 27px;}




.footer-container {width: 100%;
                   background: #042555;
                   clear: both;
                   margin: 0 auto;
                   padding: 55px 0 60px 0;
                   color: #fff;}

.f-ngl {font-size: 18px;}

.footer-container a {color: #fff;}

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

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

.logo-footer {width: 160px;}

.logo-footer img {width: 100%;}

.f-sm img {margin: 0 0 0 15px;}

.f-sm a:first-child img {margin: 0;}


/*BUTTON*/

.menu-button {
  position: absolute;
  top: 22px;
  right: 30px;
  background: transparent;
  display: none;
  cursor: pointer;
  border: 1px solid #193f76;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
   padding: 10px; }


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

.menu-button .menu-ico {display: block;
                       width: 22px;
                        height: 1px;
                         background: #193f76;}


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

/*KONTAKT*/

.kontakt-over {width: 100%;
               overflow: hidden;
               background: url(img/bg_grey.jpg) repeat;
               padding: 70px 0 60px 0;}

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

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

.form-cell {width: calc(50% - 10px); 
            margin: 0 0 20px 0;}

.form-cell-ta {width: 100%;}

.kontakt-box input[type='text'],
.kontakt-box input[type='email'],
.kontakt-box input[type='tel'],
.kontakt-box textarea {width: 100%;
                        height: 45px;
                        background: rgba(255, 255, 255, 0);
                        border: 1px solid #193F76;
                        border-radius: 12px;
                        -moz-border-radius: 12px;
                        -webkit-border-radius: 12px;
                        padding: 0 20px;
                        font-size: 18px;
                        color: #193f76;}

.kontakt-box textarea {height: 200px;
                        padding: 20px ;}

.kontakt-box input[type='submit'] {width: 100%;
                                    height: 45px;
                                    background: #E0E5EB;
                                    border: none;
                                    border-radius: 12px;
                                    -moz-border-radius: 12px;
                                    -webkit-border-radius: 12px;
                                    cursor: pointer;
                                    font-size: 17px;
                                    color: #193f76;
                                    font-weight: 800;}

.kontakt-box ::-webkit-input-placeholder {font-size: 18px;
                                          color: #193f76;
                                          opacity: 0.8;}

.kontakt-box :-moz-placeholder {font-size: 18px;
                                          color: #193f76;
                                          opacity: 0.8;}

.kontakt-box ::-moz-placeholder {font-size: 18px;
                                          color: #193f76;
                                          opacity: 0.8;}

.kontakt-box :-ms-input-placeholder {font-size: 18px;
                                          color: #193f76;
                                          opacity: 0.8;}

h1.title {font-size: 32px;
      font-weight: 800;
      position: relative;
      margin: 0;}

h1.title:before {display: block;
             position: absolute;
             width: 60px;
             height: 5px;
             content:'';
             border-radius: 3px;
             -moz-border-radius: 3px;
             -webkit-border-radius: 3px;
             background: #f9bb00;
             bottom: -13px;
             left: calc(50% - 30px);}

.panel-container {width: 100%;
                  max-width: 900px;
                  margin: 0 auto;
                  padding: 0 20px ;}

.panel-text {padding: 30px 0 ;}

.panel-section {border-radius: 15px;
                 -moz-border-radius: 15px;
                 -webkit-border-radius: 15px;
                 padding: 40px 30px;
                 margin-bottom: 30px;
                 background: #F3F5F6;}

.panel-box {width: 100%;
             padding: 7px 0 7px 43px;
            background: url(//www.ogarnijchemie.com.pl/wp-content/uploads/2024/09/youtube_lekcja.svg) no-repeat;
            background-position: 0 5px;
            line-height: 25px;}

.panel-box a {display: block;
              color: #f9bb00;
              text-decoration: underline;
              font-weight: 800;}

.navigacja {clear: both;
            width: 100%;
            padding: 25px 0;
            font-size: 16px;
            font-weight: 400;
            line-height: 16px;}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li { display: inline-block;
                 margin: 0 5px;
                 text-align: center; }

.navigation li a {border-radius: 12px 0 12px 0;
                 -moz-border-radius: 12px 0 12px 0;
                 -webkit-border-radius: 12px 0 12px 0;
                 display: block;
                 box-sizing: border-box;
                  padding: 10px 12px;
                  border: 1px solid #3C3C3C;
                  transition: all .3s ease .10s;}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {cursor: pointer;}

.navigation li a:hover,
.navigation li.active a {
	background-color:  #3C3C3C;
    color: #fff;
}

.navigation ul {padding: 0;}

.navigation {display:flex;
        justify-content:center;

        display:-webkit-flex;
        -webkit-justify-content:center;}


/*19-09-2024 wpis blogowy*/

.wpis-box {width: 100%;
           max-width: 1000px;
           margin: 0 auto;
           padding: 0 20px ;}

.wpis-single-img img {border-radius: 15px 0 15px 0;
                 -moz-border-radius: 15px 0 15px 0;
                 -webkit-border-radius: 15px 0 15px 0;
                 width: 100%;}

h1.blog-title {font-size: 26px;
               line-height: 22px;
                margin: 0;
               font-weight: 700;}

/*21-09-2024*/

.kontakt-over {background: url(img/bg_white.jpg) repeat;}

.ref-pds-row { width: 100%;
	          max-width: 1400px;
              display: flex;
              justify-content: left;
              flex-wrap: wrap;
              padding-top: 35px;
              margin: 0 auto;
             padding: 35px 20px 0 20px;}

.ref-pds-row .ref-box {width: 50%;}

.f5 br {display: none;}

.button-opinie {text-align: center;}

.panel-text a,
.c-box a {color: #f9bb00;
               text-decoration: underline;}

input[type='password']  {width: 200px;
                        height: 45px;
                        background: rgba(255, 255, 255, 0);
                        border: 1px solid #193F76;
                        border-radius: 12px;
                        -moz-border-radius: 12px;
                        -webkit-border-radius: 12px;
                        padding: 0 10px;
                        font-size: 18px;
                        color: #193f76;}

.post-password-form input[type='submit'] {width: 140px;
                                    height: 45px;
                                    background: #E0E5EB;
                                    border: none;
                                    border-radius: 12px;
                                    -moz-border-radius: 12px;
                                    -webkit-border-radius: 12px;
                                    cursor: pointer;
                                    font-size: 17px;
                                    color: #193f76;
                                    font-weight: 800;}

.post-password-form {padding: 60px 0;}

.form-row p {margin: 0;}

/*checkbox*/


.kontakt-box input[type='checkbox'] {display: none;}

.kontakt-box label {position: relative;}

.form-checkbox {display: inline-block;}

.wpcf7-list-item-label {padding-left: 28px;}


.kontakt-box .wpcf7-list-item-label:before { position: absolute;
                                                      top: 0;
                                                      left: 0;
                                                      content: "";
                                                      width: 20px;
                                                      height: 20px;
                                                     border-radius: 6px;
                                                     -moz-border-radius: 6px;
                                                     -webkit-border-radius: 6px;
                                                     background: #ffffff;
                                                     border: 1px solid #d4d4d4;}


.wpcf7 .form-checkbox input[type='checkbox']:checked + .wpcf7-list-item-label:before {
                                                  background-image: url("img/check.svg");
                                                  background-position: center;
                                                  background-repeat: no-repeat;
                                                 background-size: 14px;}

.c-box .wpcf7-list-item { margin: 0;}

.panel-container ul li {position: relative;
                        padding: 4px 0 4px 30px;}


.panel-container ul li:before {content: '';
                               display: block;
                               width: 6px;
                               height: 6px;
                               border-radius: 50%;
                               -moz-border-radius: 50%;
                               -webkit-border-radius: 50%;
                               background: #f9bb00;
                               left: 10px;
                               top: 18px;
                               position: absolute;}