html {
    margin: 0;
    padding: 0;
    background: white;
    font-family: lato, tahoma, helvetica;
    font-style: normal;
    font-weight: 300;
    color: #666;
    font-size: 16px;
    line-height: 18px;
}

body {
    margin: 0;
    padding: 0;
}

ol { overflow: hidden;  }

header {position: relative; margin: auto; width: 98%; height: 120px;}
footer {background-color: #DFDFDF; color: #666; padding: 20px 0; line-height: 1.5em;}
h1 {font-size: 1.6em; line-height: .7em; margin: 2rem auto;}
h2 {margin: 0 0 10px 0; padding: 0; font-weight: 900; font-size: 2.6em; line-height: 0.7em; color: #2E7D32;}
h2 span {font-size: .5em; font-weight: 300;}
h2 span span {font-size: 1em;}
h3 {margin: 30px 0; padding: 0; font-weight: 400; text-transform: uppercase; text-align: center; font-size: 2em; line-height: 1em; color: #2E7D32;}
h3 b {font-weight: 900;}
h4 {width: 100%; text-align: center; color: #fff; background-color: #2E7D32; margin: 0; padding: 20px 0; font-size: 1.3em; line-height: 1em; font-weight: 700; font-style: italic; text-transform: uppercase; border-radius: 10px 10px 0 0;}
ol li, ul li { margin: .4rem auto; }

A:link {color: #666; text-decoration: underline;}
A:visited {color: #666; text-decoration: none;}
A:hover {color: #666; text-decoration: none;}
A:active {color: #666; text-decoration: none;}

A.menu:link {color: #2E7D32; text-decoration: none; text-transform: uppercase; border: 2px solid #ffffff; padding: 6px; margin: 0 5px; font-weight: 400;}
A.menu:visited {color: #2E7D32; text-decoration: none; border: 2px solid #ffffff;}
A.menu:hover {color: #81C784; text-decoration: none;}
A.menu:active {color: #2E7D32; text-decoration: none; border: 2px solid #ffffff;}

A.menu2:link {color: #666; text-decoration: none;}
A.menu2:visited {color: #666; text-decoration: none;}
A.menu2:hover {color: #666; text-decoration: underline;}
A.menu2:active {color: #666; text-decoration: none;}
footer .menu2 {margin: 5px;}
footer p {padding: 0; margin: 10px 5px; font-size: 0.8em;}

A.cta {position: absolute; display: block; width: 36%; margin: -25px 31% 0 33%; color: #ffffff; background-color: #81C784; border-radius: 10px; text-decoration: none; text-transform: uppercase; border: 3px solid #ffffff; padding: 0.5em 0; text-align: center; font-size: 1.2em; font-weight: 400;}
A.cta {color: #ffffff; text-decoration: none;}
A.cta:hover {color: #ffffff; background-color: #2E7D32; text-decoration: none; cursor: pointer;}
A.cta {color: #ffffff; text-decoration: none;}

.pt A.cta {position: static; width: 100%; margin: 0;  background-color: #2E7D32; padding: 1em 0;}
.pt A.cta:hover {background-color: #81C784;}

A.wiecej:link {color: #81C784; text-decoration: underline; text-transform: uppercase; font-weight: 400;}
A.wiecej:visited {color: #81C784; text-decoration: none;}
A.wiecej:hover {color: #81C784; text-decoration: none;}
A.wiecej:active {color: #81C784; text-decoration: none;}

A.sob:link {color: #1B5E20; text-decoration: none; font-weight: 600;}
A.sob:visited {color: #1B5E20; text-decoration: none;}
A.sob:hover {color: #1B5E20; text-decoration: none; background-color: #A5D6A7 !important;}
A.sob:active {color: #1B5E20; text-decoration: none;}

#rwdtest {display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 5px; height: 30px; background-color: magenta;}
#content {width: 100%; position: absolute;}
#logo {
    margin-top: 40px;
    font-size: 2.8em;
    font-weight: 700;
    color: #2E7D32;
    text-decoration: none;
    font-family: 'Montserrat', 'Lato', sans-serif;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #43A047 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    line-height: 1.2em;
    padding: 0.1em 0;
}
#menu_mob {display: none; position: absolute; right: 0; top: 0;}
#menu_desk {position: absolute; right: 0; bottom: 5px; text-align: right; line-height: 3em; color: #ccc;}
#top_desk {width: 100%; background: url(../design/bgr_top_desk.jpg) no-repeat; background-position: center; background-size: cover; background-color: #E4E9EF; margin-bottom: 50px;}
#icons {width: 45%; padding: 20px 0; margin: 0 0 0 55%;}
#icons img {width: 90px; margin: 10px 30px 10px 0;}
#icons b {font-weight: 900;}

#main_mob {display: none; width: 100%;}

.container {margin: auto; width: 100%; max-width: 1680px;}
.left {float: left; width: 58%; margin: 1%;}
.right {float: right; width: 38%; margin: 1%;}
footer .right {text-align: right;}
.box {position: relative; float: left; display: inline; width: 500px; border: 3px solid #2E7D32; border-radius: 10px; margin: 0 27px 50px 27px; color: #666;}
.box ul {margin: 0 0 0 40px; padding: 0;}
.box2 {position: relative; float: left; display: inline; width: 48%; margin: 0 1% 50px 1%;}
.box2 img {border-radius: 0 0 10px 10px;}
#telefon .box {margin-bottom: 75px}
#internet .box {width: 380px; border: 3px solid #2E7D32; border-radius: 10px; margin: 0 17px 50px 17px; color: #666;}
#internet p {margin: 10px;}
.kanal {border: solid 1px #E8E8E8; border-radius: 5px; margin: 5px;}
#telewizja .kanal {border: 0; border-radius: 5px; width: 9%; margin: 0.5%;}
.belka {width: 100%; background-color: #DFDFDF;}
.belka .nazwa {padding: 10px 10px 10px 10px; float: left;}
.belka .opis {text-align: right; padding: 10px 10px 10px 10px;}
.pakiet {padding: 40px 0px 0px 0px}
.pakiet p {padding: 0px 10px;}
.bgr_pakiet {background-color: #2E7D32; border-radius: 8px 6px 6px 8px; display: table; width: 100%;}
.bgr_pakiet img {border-radius: 6px 0 0 6px;}
.bgr_pakiet .left {margin: 0;}
#uslugi .box .bgr_pakiet h3 {color: #fff; text-align: left;}
.bgr_pakiet .right {color: #fff;}
#dodatki {background-color: #f5f5f5;}
#dodatki .box {float: none; display: block; border: 0; margin: 0 auto; padding: 10px; width: 80%; max-width: 1100px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
#dodatki .box h3 {color: #2E7D32; margin: 20px 0 0 0;}
#uslugi {background-color: #fff;}
#uslugi .box {float: none; display: block; border: 0; margin: 0 auto; padding: 10px; width: 80%; max-width: 1100px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
#uslugi .box h3 {color: #2E7D32; margin: 20px 0 0 0;}
#uslugi .box2 {width: 23%; margin: 0 1% 50px 1%;}

/* OGO */
#uslugi .more {  display: none; }
#uslugi .pakiety-telefoniczne {  display: none; }
#uslugi .box2, #uslugi .pt { display: none;  }
#pakiety-programowe, #pakiety-tematyczne, #uslugi .pakiety-programowe, #uslugi .pakiety-tematyczne, .dodatki {  display: none; }
#uslugi .box { margin-top: 4em; }
#tti { margin: -12em 0 0 1em; position: absolute; display: none; background-color: red1; width: 93%;}
#tti h2 { line-height: 1.2em; text-shadow: 1px 1px 1px #fff; font-size: 1.8em; text-align: right;}
.wiecej { color: #81C784; text-decoration: underline; text-transform: uppercase; font-weight: 400; cursor: pointer; padding: 0px 10px; display: inline-block;}
.wiecej:hover { text-decoration: none; }
#dekoder { max-width: 100%; display: block; margin: auto; border-radius: 10px;}
.dodatki h3 {  margin: 10px 0; }
.all_programs { text-align: center; font-weight: 400; }
.lmenu:hover, #logo:hover, .box2.cta { cursor: pointer; }
.lmenu h2:hover{ color: #81C784; }
.header-list {
  display: flex;
  justify-content: center;
}
.header-list > div {
  width: 65.5%;
  text-align: left;
  padding: 1em 0;
  font-weight: 600;
}
.lista {
  display: flex;
  justify-content: center;
  text-align: left;
  padding: 0 0;
}
.lista > div:nth-child(1), .lista > div:nth-child(2) {
  padding: 1em;
  width: 32%;
  font-weight: 400;
  font-size: .8em;
  padding: 0 1em;
}
.lista div:first-child a:last-child .doc {
    margin-bottom: 1.6em;
}
.doc {
  font-size: 1em;
  border: 1px solid #ebebed;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: .2em;
}
.doc > div span {
  font-size: .8em;
  font-weight: 300;
  color: #555;
}


#pdf {
  width: 3em;
}
.kontakt {
  display: flex;
  justify-content: center;
  text-align: left;
  padding: 0 0;
}

.kontakt > div {
  padding: 1em 2em;
  width: 18%;
  font-weight: 400;

}

.sob {
  width: 90%;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-weight: 400;
}

.sob li {padding-top: .65rem;}
.sob li:nth-child(1) {padding-top: 0;}

.docsob {font-size: 1.25rem !important; line-height: 1.4rem;}

/*1792*/
@media (max-width: 1792px) {
#rwdtest {background-color: blue;}
.box {width: 30.5%; border: 3px solid #2E7D32; margin: 0 1% 50px 1%;}
#internet .box {width: 22.5%; border: 3px solid #2E7D32; margin: 0 1% 10px 1%;}
}

/*1600*/
@media (max-width: 1600px) {
#rwdtest {background-color: orange;}
.box .kanal {width: 29%; margin: 1%;}
}

/*1536*/
@media (max-width: 1536px) {
#rwdtest {background-color: red;}

}

/*1440*/
@media (max-width: 1440px) {
#rwdtest {background-color: silver;}
h5 {font-weight: 300; font-size: 1.2em; line-height: 1em;}
.box ul {margin: 0 10px 0 30px; padding: 0;}
}

/*1366*/
@media (max-width: 1366px) {
#rwdtest {background-color: yellow;}
h2 {margin: 0 0 5px 0; font-size: 2em; line-height: 0.6em;}
html {font-size: 15px; line-height: 20px;}
.container {max-width: 1140px;}
.box {width: 360px; border: 3px solid #2E7D32; border-radius: 10px; margin: 0 7px 50px 7px;}
#internet .box {width: 450px; border: 3px solid #2E7D32; border-radius: 10px; margin: 0 57px 50px 57px; font-size: 14px;}
#icons img {width: 70px; margin: 0 20px 0 0;}
#menu_desk {bottom: 15px;}
.box ul {margin: 0 0 0 25px; padding: 0;}
.doc { font-size: 1.2em;}
.doc > div span { font-size: .8em; }
.header-list > div { font-size: 1.2em; }
}

/*1280*/
@media (max-width: 1280px) {
#rwdtest {background-color: green;}
}


@media (max-width: 1024px) and (orientation: landscape) {
#rwdtest {background-color: pink;}
html {font-size: 15px; line-height: 18px;}
#content {top: 60px;}
#menu_mob {display: inline;}
#menu_desk {display: none;}
header {height: 60px;}
h2 {font-size: 2.2em; line-height: .7em;}
h2 span {font-size: .45em;}
A.cta:link {width: 50%; margin: -12% 25% 0 25%;}
.container {width: 100%;}
#logo {margin-top: 15px; font-size: 1.8em;}
#icons {width: 55%; padding: 20px 0; margin: 0 0 0 45%;}
#icons img {width: 60px; margin: 0 10px 0 0;}
.box {width: 30%; border: 3px solid #2E7D32; margin: 0 1% 50px 1%; font-size: 0.8em;}
.box ul {margin: 0 20px 0 20px;}
#internet .box {width: 47%; border: 3px solid #2E7D32; margin: 0 1% 10px 1%;}
#telefon .box2 {width: 60%; margin: 0 20% 50px 20%;}
#uslugi .box2 {width: 40%; margin: 0 5% 50px 5%;}
.pakiet .kanal {width: 12%; margin: .5%;}
.left {float: none; width: 94%; margin: 1% 3%;}
.right {float: none; width: 94%; margin: 1% 3%;}
footer .left {float: none; width: 94%; margin: 1% 3%;}
footer .right {float: none; width: 94%; margin: 1% 3%; text-align: left;}
footer p {margin-top: 20px;}
footer {padding: 25px 0;}
.bgr_pakiet {border-radius: 6px 6px 8px 8px;}
.bgr_pakiet img {border-radius: 0 0 6px 6px;}
.bgr_pakiet .left {margin: 0; width: 100%;}
.bgr_pakiet .right {margin: 10px; text-align: center;}
#uslugi .box .bgr_pakiet h3 {text-align: center;}

.lista > div:nth-child(1), .lista > div:nth-child(2) {
  width: 40%;
  font-size: .8em;
}
.header-list > div {
  width: 82%;
}
.kontakt > div {
  width: 23%;
  font-weight: 400;
  padding: 1em 0;
}

}

@media (max-width: 1024px) and (orientation: portrait), (max-width: 440px)  {
#rwdtest {background-color: black;}
html {font-size: 13px; line-height: 18px;}
#content {top: 60px;}
#menu_mob {display: inline;}
#menu_desk {display: none;}
#main_mob {display: inline;}
header {height: 60px;}
A.cta {width: 50%; margin: -25px 23% 0 27%; font-size: 1em;}
#telewizja .kanal {width: 24%; margin: 0.5%;}
h1 {font-size: 1.2em; line-height: .7em;}
h2 {font-size: 2.2em; line-height: .7em;}
h2 span {font-size: .45em;}
h3 {font-size: 1.3em; line-height: 1em;}
h4 {font-size: 1.1em; line-height: 1em;}
.container {width: 100%;}
#logo {margin-top: 15px; margin-left: 15px; font-size: 1.5em;}
#top_desk {width: 100%; background: none;}
#icons img {width: 60px; margin: 10px 10px 10px 0;}
.box {float: left; display: inline; width: 93%; border: 3px solid #2E7D32; border-radius: 10px; margin: 0 2.5% 50px 2.5%;}
.box ul {margin: 0 10px 0 30px;}
#internet .box {width: 93%; border: 3px solid #2E7D32; margin: 0 2.5% 50px 2.5%;}
.box2 {width: 90%; margin: 0 5% 50px 5%;}
#telefon .box2 {width: 90%; margin: 0 5% 50px 5%;}
#uslugi .box2 {width: 40%; margin: 0 5% 50px 5%;}
.pakiet .kanal {width: 22%; margin: 1%;}
.bgr_pakiet {border-radius: 6px 6px 8px 8px;}
.bgr_pakiet img {border-radius: 0 0 6px 6px;}
.bgr_pakiet .left {margin: 0; width: 100%;}
.bgr_pakiet .right {margin: 10px; text-align: center;}
#uslugi .box .bgr_pakiet h3 {text-align: center;}
.left {float: none; width: 94%; margin: 3%;}
.right {float: none; width: 94%; margin: 3%;}
footer .left {float: none; width: 94%; margin: 1% 3%;}
footer .right {float: none; width: 94%; margin: 1% 3%; text-align: left;}
footer p {margin-top: 20px;}
footer {padding: 25px 0;}
footer .menu2 {display: block;}
.belka .nazwa {float: none; padding: 10px 0px 0px 10px;}
.belka .opis {text-align: left; padding: 0px 0px 10px 10px;}
.lista {
  flex-direction: column;
  align-items: center;
}
.lista > div:nth-child(1), .lista > div:nth-child(2) {
  width: 90%;
  padding: 0;
}
.header-list > div {
  width: 90%;
}
.kontakt {
  flex-direction: column;
  text-align: center;
}

.kontakt > div {

 width: 100%;
 padding: 1em 0;

}

.sob {
  font-size: 1.4rem;
  line-height: 1.8rem;

}

/* OGO */
#telefon .box { margin-bottom: 50px; }
#dekoder { padding: 0; }
#icons { display: none; width: 95%; padding: 2% 0 0 5%; margin: 0; background-color: #eaeaea;}
#top_desk { margin-bottom: 0; }
#main_mob { display: block; }
#tti { display: block; }
}