/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYmK-4W4nIppT4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYoK-4W4nIp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYmK-4W4nIppT4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYoK-4W4nIp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYmK-4W4nIppT4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/exo2/v10/7cHmv4okm5zmbtYoK-4W4nIp.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}hr{border: 0;}address,caption,cite,code,dfn,em,th,samp,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}

html {
font-size: 15px;
line-height: 15px;
}

.cleaner {
clear: both;
}

body {
background: #000;
font-family: 'Exo 2', sans-serif;
}

body.block {
overflow: hidden;
}

#navBox {
display: block;
position: fixed;
width: 100%;
z-index: 100;
background: #FFF;
color: #000;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
height: 76px;
}

#logoBox {
padding: 22px 0 0 0;
float: left;
}

#logoBox h3 {
padding-top: 0;
font-size: 26px;
line-height: 26px;
}

#logoBox h3 span {
font-weight: 300;
}

#logoBox h3 a {
text-decoration: none;
color: #000;
}

.navLeft, .navRight {
float: left;
width: calc(50% - 640px);
background: #FFF;
height: 76px;
}

.navMain {
position: relative;
float: left;
width: 1280px;
background: #FFF;
height: 76px;
display: block;
}

#nav {
padding: 0;
font-weight: 500;
text-transform: uppercase;
text-align: right;
margin-right: -20px;
float: right;
position: relative;
}

#nav ul {
display: inline-block;
position: relative;
}

#nav ul li {
display: block;
float: left;
}

#nav ul li a {
display: block;
text-decoration: none;
color: #000;
font-size: 19px;
line-height: 19px;
padding: 28px 20px 26px 20px;
transition: 0.2s;
}

#nav ul li a span {
display: block;
padding: 0 0 3px 0;
}

#nav ul li a span.active {
padding: 0 0 2px 0;
border-bottom: 1px solid #d20000;
}

#nav ul li a:hover {
color: #d20000;
}

#hamburgerBox {
position: absolute;
top: -200px;
z-index: 30;
}

.hamburger {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
cursor: pointer;
}

.hamburger:focus > .hamburger__container {
box-shadow: 0 0 2px 2px #51a7e8;
}

.hamburger__container {
display: flex;
align-items: center;
position: relative;
width: 30px;
height: 22px;
}

.hamburger__bars {
position: absolute;
width: 30px;
height: 2px;
background-color: #000;
transition: transform 220ms ease-in-out;
}

.hamburger__bars:before, .hamburger__bars:after {
display: block;
position: absolute;
 width: 30px;
height: 2px;
background-color: #000;
content: '';
}
.hamburger__bars:before {
top: -8px;
transition: top 100ms 250ms ease-in, transform 220ms ease-in-out;
}

.hamburger__bars:after {
bottom: -8px;
transition: bottom 100ms 250ms ease-in,  transform 220ms ease-in-out;
}

.hamburger--active .hamburger__bars {
transform: rotate(225deg);
transition: transform 220ms 120ms ease-in-out;
}

.hamburger--active .hamburger__bars:before {
top: 0;
transition: top 100ms ease-out;
}

.hamburger--active .hamburger__bars:after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 100ms ease-out,  transform 220ms 120ms ease-in-out;
}

.hamburger:focus, .hamburger__container:focus {
outline: none;
}

#top2 {
border-top: 76px solid #000;
width: 100%;
}

#top2 .topGroup {
padding: 1.3rem 0 1.3rem 0;
display: flex;
/*
flex-direction: row;
flex-wrap: nowrap;
*/
justify-content: space-between;
align-content: center;
align-items: center;
}


#top2 h1 {
display: block;
font-size: 46px;
line-height: 48px;
font-weight: 700;
color: #FFF;
padding: 0 0 15px 0;
position: relative;
}

#top2 h1 span	{
font-weight: 300;
font-size: 22px;
line-height: 24px;
display: block;
padding-top: 14px;
position: relative;
top: 5px;	
}

#top2 .coupons {
background: url('../img/coupons_d.webp') center right no-repeat;
background-size: auto 172px;
height: 172px;
padding-left: 2.4rem;
}

#top .coupons.nowebp {
background-image: url('../img/coupons_d.png');
}

#top2 img {
width: auto;
height: 174px;
}


#top {
border-top: 76px solid #000000;
width: 100%;
height: 480px;
}

#top h1 {
display: block;
height: 152px;
font-size: 36px;
line-height: 54px;
font-weight: 300;
}

#top h1 strong {
font-weight: 700;
}

#top .topGroup, #top2 .topGroup {
position: relative;
width: 1280px;
margin: auto;
}

#top .desktop {
position: absolute;
padding: 40px 0 0 0;
width: 1280px;
height: 440px;
background: url('../img/desktop_d.webp') bottom right no-repeat;
background-size: auto 440px;	
}

#top .desktop.nowebp {
background-image: url('../img/desktop_d.png');
}

#top .desktop img {
display: none;
}

#top .coupons {
position: absolute;
color: #FFF;
background: url('../img/coupons_d.png') bottom left no-repeat;
background-size: auto 250px;
padding-top: 30px;
padding-bottom: 250px;
}

#top .coupons.nowebp {
background-image: url('../img/coupons_d.png');
}

#top .coupons img {
display: none;
}

#content {
background: #FFF;
color: #000;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 300;
text-align: justify;
}

.boxContent {
padding: 2rem 0 2.4rem 0;
margin: auto;
width: 1280px;
}

#content strong, #content strong {
font-weight: 700;
}

#content p {
padding: 0 0 1.1rem 0;
}

#content p.cent {
padding: 0 0 0.5rem 0;
text-align: center;
}

#content h2.realiz {
padding: 0.8rem 0 1.5rem 0;
}

#content h2, #content h3, #content h3 a, #content h4 {
color: #d20000;
font-weight: 700;
font-size: 2.1rem;
line-height: 2.2rem;
padding: 0.4rem 0 1rem 0;
text-align: center;
}

#content h3, #content h3 a {
font-size: 1.7rem;
line-height: 1.8rem;
border-bottom: none;
}

#content h3 a {
position: relative;
top: -77px;
}

#content h3 a:hover {
color: #d20000;
border-bottom: none;
}

#content h3.nag_form {
padding: 0.8rem 0 1.2rem 0;
}

#content h3 span {
font-weight: 300;
}

#content h4 {
font-weight: 500;
font-size: 1.6rem;
line-height: 1.9rem;
}

#content a {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #999;
font-weight: 500;
}

#content a:hover {
color: #d20000;
border-bottom: 1px solid #d20000;
}

#content ol {
list-style: none;
display: block;
list-style-type: decimal;
padding: 0.2rem 0 0 2.2rem;
}

#content ol li {
padding: 0 0 0.9rem 0;
}

.buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-start;
}

.ce {
justify-content: center !important;
}

.buttons a {
display: block;
background: #d20000;
color: #FFFFFF !important;
text-align: center;
margin: 0 0 1rem 0;
padding: 0.9rem 1.8% 1.2rem 1.8%;
width: 44.8%;
border: none !important;
font-size: 1.6rem;
line-height: 2rem;
font-weight: 500;
border: none !important;
}

.buttons a:hover {
background: #ff2525;
}

#benefits {
overflow: hidden;
margin-bottom: 0;
}

#benefits div {
margin: 0.6% 3.2% 2.6% 0;
padding: 0.8rem 1.8% 0.4rem 1.8%;
width: calc(44.8% - 2px);
float: left;
background: #eee;
background: #fff;
border: 1px solid #000;
text-align: center;
}

#benefits div:nth-child(2n) {
margin-right: 0 !important;
}

#benefits div h3 {
padding: 0.4rem 0 0.6rem 0;
font-weight: 500;
font-size: 1.5rem;
line-height: 1.6rem;
}

table.cennik {
float: left;
width: calc(48.4% - 1px);
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

table.cennik caption {
text-align: center;
font-size: 1.3rem;
padding: 0 0 0.8rem 0;
}


table.wiz {
float: right !important;
}

table.cennik tr:first-child td.left {
border-top: 1px solid #000 !important;
}

table.cennik td {
border-top: 1px solid #000;
text-align: center;
}

td.left {
width: 38%;
color: #FFF;
background: #000;
border-top: 1px solid #FFF !important;
font-size: 1.3rem;
line-height: 1.5rem;
}

td.right {
font-size: 1.5rem;
line-height: 1.6rem;
font-weight: 700 !important;
height: 4.7rem;

color: #d20000;
}

td.right em {
font-size: 1.2rem;
font-weight: 500 !important;
}

td.right span {
font-size: 1.2rem;
font-weight: 500 !important;

color: #000;
}

td.right span em {
font-size: 0.95rem;
font-weight: 300 !important;
}

span.netto {
color: #d20000;
font-size: 1.35rem;
font-weight: 700;
}

span.netto em {
font-size: 1.15rem;
font-weight: 500;
}

span.brutto {
font-size: 1.2rem;
font-weight: 500;
}

span.brutto em {
font-size: 1rem;
font-weight: 300;
}

footer {
position: relative;
background: #000000;
z-index: 5;
}

#footer {
margin: auto;
width: 1280px;
color: #FFFFFF;
font-size: 15px;
line-height: 29px;
padding: 14px 0 14px 0;
display: flex;
/*
flex-direction: row;
flex-wrap: nowrap;
*/
justify-content: space-between;
align-content: center;
align-items: center;
}

#footer p {
order: 0;
flex: 0 1 auto;
align-self: auto;
}

.fLeft, .fRight {
padding: 6px 0 8px 0;
}

.fLeft {
text-transform: uppercase;
margin-left: -0.6rem;
}

.fLeft a {
display: inline-block;
padding: 0 0.6rem 0 0.6rem;
}

.fLeft span {
padding-bottom: 2px;
}

.fLeft span.active {
border-bottom: 1px solid #d20000;
padding-bottom: 1px;
}

.fRight span {
font-weight: 700;
}

#footer p a {
color: #FFFFFF;
text-decoration: none;
}

#footer p a:hover {
color: #d20000;
}

#realizacje {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}

#realizacje img {
margin: 0.8rem 0 1.2rem 0;
}

#realizacje .z01, #realizacje .z03 {
width: 25.6%;
}

#realizacje .z02 {
width: 30.4%;
}

#makieta {
width: 260px;
float: right;
padding: 18px 0 8px 24px;
}

.spis {
text-align: center;
padding: 0 0 0.5rem 0 !important;
}


@media all and (min-width: 100px) and (max-width: 1379px) {

.navLeft, .navRight {
width: 50px;
}

.navMain {
width: calc(100% - 100px);
}

#top .topGroup, #top2 .topGroup {
width: calc(100% - 100px);
}

#top h1 {
height: 152px;
font-size: 33px;
line-height: 49px;
}

#top .desktop {
width: calc(100%);
}

#top .coupons {
padding-top: 32px;
padding-bottom: 250px;
}

.boxContent {
width: calc(100% - 100px);
}

footer {
background-size: 120%;
}

#footer {
width: calc(100% - 100px);
}

}


@media all and (min-width: 100px) and (max-width: 1199px) {

html {
font-size: 14px;
line-height: 14px;
}

#top {
height: 440px;
}

#top .desktop {
height: 400px;
background-size: auto 400px;
}

#top .coupons {
background-size: auto 225px;
padding-top: 30px;
padding-bottom: 225px;
}


#top h1 {
height: 143px;
font-size: 30px;
line-height: 45px;
}

footer {
background-size: 140%;
}

#nav {
margin-right: -14px;
}

#nav ul li a {
font-size: 17px;
line-height: 17px;
padding: 29px 13px 27px 14px;
}

.check {
padding-top: 13px !important;
}

}


@media all and (min-width: 100px) and (max-width: 1099px) {

html {
font-size: 13px;
line-height: 13px;
}

#top {
height: 489px;
}

#top h1 {
height: 156px;
}

#top .coupons {
padding-top: 24px;
}

#top .desktop {
padding: 89px 0 0 0;
}

}


@media all and (min-width: 100px) and (max-width: 999px) {

#top2 {
border-top: 63px solid #000000;
}

#top2 .coupons {
background-size: auto 150px;
height: 150px;
}

#top2 img {
height: 150px;
}
	
#top2 h1 {
font-size: 42px;
line-height: 42px;
}

#top2 h1 span	{
font-size: 19px;
line-height: 22px;
}
	
#top {
height: 450px;
border-top: 63px solid #000000;
}

#top h1 {
font-size: 28px;
line-height: 42px;
height: 144px;
}

#top .topGroup, #top2 .topGroup {
width: calc(100% - 70px);
}

#top .coupons {
background-size: auto 200px;
padding-top: 30px;
padding-bottom: 200px;
}

#top .desktop {
padding: 95px 0 0 0;	
height: 355px;
background-size: auto 355px;
}

.navLeft, .navRight {
width: 35px;
}

.navMain {
width: calc(100% - 70px);
}

#navBox {
height: 63px;
}

#nav {
transform: translateY(-100%);
transition: 0.3s;
margin: 0;
position: fixed;
left: 0;
top: 0;
width: 100%;
min-height: 100vh;
overflow: auto;
z-index: -1;
background-color: rgba(0, 0, 0, 0.84);
max-height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling:touch; 
}

#nav.active {
transform: translateY(0);
transition: 0.3s;
}
	
#hamburgerBox {
display: block;
right: 0;
top: 20px;
}

#logoBox {
padding: 16px 0 0 0;
}

.navLeft {
height: 63px;
}

.navRight {
height: 63px;
}

.navMain {
height: 63px;
}

#nav ul {
top: 0px;
display: block;
position: absolute;
background: #FFFFFF;
width: 100%;
padding: 63px 0 6px 0;
}

#nav ul li {
float: none;
border-top: 1px solid #e9e9e9;
text-align: center;
padding: 0;
}

#nav ul li a span {
display: inline-block;
}

#nav ul li:last-child {
border-bottom: 1px solid #e9e9e9;
}

#nav ul li a {
font-size: 19px;
line-height: 19px;
padding: 15px 35px 12px 35px;
}

#nav ul li a.submenu {
padding-right: 55px;
background-position: calc(100% - 35px) center;
}


#nav ul li ul {
position: static;
display: block;
text-align: center;
transform: translateY(-0%);
padding: 0;
border-top: none;
}

.boxContent {
width: calc(100% - 70px);
}

footer {
background-size: 160%;
}

#footer {
width: calc(100% - 70px);
}

#realizacje {
justify-content: center;
}

#realizacje img {
margin: 0.8rem 1.2rem 1.2rem 1.2rem;
}

#realizacje .z01, #realizacje .z03 {
width: 33%;
}

#realizacje .z02 {
width: 39%;
order: 2;
}

}


@media all and (min-width: 100px) and (max-width: 899px) {

#top2 .coupons {
background-image: url('../img/coupons_m.png');
}

#top2 .coupons.nowebp {
background-image: url('../img/coupons_m.png');
}

#top {
height: 438px;
}	
	
#top h1 {
text-align: center;
width: 100%;
height: 160px;
}

#top .coupons {
width: 100%;
background-size: auto 174px;
padding-top: 22px;
padding-bottom: 174px;
background-image: url('../img/coupons_m.webp') !important;
}

#top .coupons.nowebp {
background-image: url('../img/coupons_m.png') !important;
}

#top .desktop {
padding: 122px 0 0 0;
height: 316px;
background-size: auto 316px;
background-image: url('../img/desktop_m.webp') !important;
}

#top .desktop.nowebp {
background-image: url('../img/desktop_m.png') !important;
}

#footer {
flex-direction: column;
}

.fLeft, .fRight {
text-align: center;
padding: 3px 0 5px 0;	
}

.fLeft {
margin-left: 0;
}

}


@media all and (min-width: 100px) and (max-width: 767px) {

.navLeft, .navRight {
width: 25px;
}

.navMain {
width: calc(100% - 50px);
}

#top {
height: 385px;
}

#top .topGroup, #top2 .topGroup {
width: calc(100% - 50px);
}

#top h1 {
height: 142px;
font-size: 26px;
line-height: 37px;
}

#top .desktop {
padding: 115px 0 0 0;
height: 270px;
background-size: auto 270px;
}

#top .coupons {
background-size: auto 150px;
padding-top: 22px;
padding-bottom: 150px;
}

#hamburgerBox {
right: 0;
}

#nav ul li a {
padding-left: 25px;
padding-right: 25px;
}

.boxContent {
width: calc(100% - 50px);
}

#footer {
width: calc(100% - 50px);
}

#makieta {
width: 220px;
float: none;
display: block;
margin: auto;
padding: 10px 2.1rem 8px 0;
}

}


@media all and (min-width: 100px) and (max-width: 679px) {

#benefits div {
margin: 0.6% 0 2.6% 0;
padding: 0.8rem 3% 0.4rem 3%;
width: calc(94% - 2px);
float: none;
}

#benefits {
padding-bottom: 0.4rem;
}

table.cennik {
margin-top: 0.2rem;
float: none;
width: calc(100% - 1px);
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

table.wiz {
float: none !important;
margin-top: 1.4rem;
}

#realizacje .z01, #realizacje .z03 {
width: 38%;
}

#realizacje .z02 {
width: 44.6%;
}

}


@media all and (min-width: 100px) and (max-width: 639px) {


#top {
height: 368px;
}

#top h1 {
height: 132px;
}

#top .desktop {
padding: 112px 0 0 0;
height: 256px;
background-size: auto 256px;
}

#top .coupons {
padding-top: 22px;
padding-bottom: 130px;
background-size: auto 130px;
}

}


@media all and (min-width: 100px) and (max-width: 574px) {

#top2 .topGroup {
flex-direction: column;
}

#top2 .coupons {
background-size: auto 130px;
height: 130px;
padding: 0;
}

#top2 img {
height: 132px;
}

#top2 h1 {
font-size: 36px;
line-height: 38px;
padding: 0 16px 15px 16px;
text-align: center;
}

#top2 h1 span	{
font-size: 17px;
line-height: 19px;
padding: 6px 0 6px 0; 
}

#top {
height: auto;
}

#top .topGroup, #top2 .topGroup {
width: calc(100% - 50px);
}

#top h1 {
height: auto;
width: 100%;
margin: auto;
padding: 0 0 18px 0;
font-size: 23px;
line-height: 31px;
}

#top .desktop {
position: static;
padding: 0;
margin: -105px 0 0 0;
height: auto;
background-size: 78% auto;
}

#top .desktop img {
display: block;
height: auto;
width: 79%;
}

#top .coupons {
padding-top: 16px;
position: static;
text-align: left;
background-size: 40% auto;
padding-bottom: 0;
}

#top .coupons img {
display: block;
height: auto;
width: 40%;
}

.buttons a {
padding: 0.9rem 2% 1.2rem 2%;
width: calc(96%);
}

#realizacje .z01, #realizacje .z03 {
width: 42%;
}

#realizacje .z02 {
width: 49%;
}

}


@media all and (min-width: 100px) and (max-width: 479px) {

#top .topGroup, #top2 .topGroup {
width: 100%;
}

#top h1 {
width: calc(100% - 32px);
}

#top .desktop {
margin: -14px 0 0 0;
background-position: bottom left;
background-size: 86% auto;
}

#top .desktop img {
width: 87%;
}

#top .coupons {
background-size: 47% auto;
background-position: bottom center;
}

#top .coupons img {
width: 47%;
}

#logoBox {
padding: 18px 0 0 0;
}

#logoBox h3 {
font-size: 24px;
line-height: 24px;
}

.navLeft, .navRight {
width: 16px;
}

.navMain {
width: calc(100% - 32px);
}

.boxContent {
width: calc(100% - 32px);
}

#hamburgerBox {
right: 0;
}

#footer {
width: calc(100% - 32px);
}

#realizacje {
flex-direction: column;
align-content: center;
align-items: center;
}

#realizacje .z01, #realizacje .z03 {
width: 55%;
}

#realizacje .z02 {
width: 64.6%;
order: 0;
}


}


@media all and (min-width: 100px) and (max-width: 379px) {

html {
font-size: 12px;
line-height: 12px;
}

#realizacje .z01, #realizacje .z03 {
width: 64%;
}

#realizacje .z02 {
width: 75%;
}

}


@media all and (min-width: 100px) and (max-width: 360px) {

html {
font-size: 11px;
line-height: 11px;
}


h1 {
font-size: 2.4rem;
line-height: 2.6rem;
}

#content h3 {
font-size: 1.8rem;
line-height: 2.2rem;
}

}


@media all and (min-width: 100px) and (max-width: 319px) {

body {
width: 320px;
}

#logoBox {
padding: 20px 0 0 0;
}

#logoBox h3 {
font-size: 18px;
line-height: 18px;
}

}