html{overflow-y:scroll !important;}
body{margin:0;background:#f8f8f8;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:14px;line-height:1.4;color:#666;font-weight:400;display: flex;flex-direction: column;min-height: 100vh;}
a {color:#fe4c4c;outline:none;text-decoration:none;}
#home a span, a {
-webkit-transition-property: color, background-color, border-color, opacity;-webkit-transition-duration: 0.4s;-webkit-transition-timing-function: ease-out;
transition-property: color, background-color, border-color, opacity;transition-duration: 0.4s;transition-timing-function: ease-out;
}
a:hover{color:#666666;}
a img {border:none;}
#wdrozenia a img {border:1px solid #e4dbc2;}
ul {list-style:none;}
ul, p {margin: 0; padding:0 10px 12px 10px;}
h3, strong {font-weight:700;}
#content li {background:url('https://static.kodhtml.pl/images/punkt.png') no-repeat 0 7px;padding-left:16px; margin-bottom:4px;}
#audyt-optymalizacja, #kontakt {margin-bottom: 12px;}
hr {border:none;background:none;border-bottom:1px solid #e4dbc2;clear:both;height:0;display:block;margin:0 0 12px 0;box-shadow: 0 0 15px #c2b07d;}
.clr {clear:both !important;float: none !important;margin: 0 !important;padding: 0 !important;height: auto !important;width: auto !important; display: block !important;}
.container {width:980px;margin:0 auto;position:relative;padding: 0 10px;}
#logo {float:right;margin:37px 0 12px 0;width:176px;height:38px;background:url('https://static.kodhtml.pl/images/logo-kodhtml.png') no-repeat center center;display:block;}
#header {background:#f8f8f8 url('https://static.kodhtml.pl/images/top.png') repeat-x left top;}
#header ul {float:left;margin:41px 0 12px 0;padding:0;font-size:16px;line-height:28px;}
#header li {margin:0 5px;float:left;}
#header li:first-child {margin-left:0;}
#header li a {padding:0 10px;text-decoration:none;display:block;}
#header ul:hover li#active a, #header li a {background:none;color:#fe4c4c;}
#wdrozenia h3, #kontakt h3, #header li#active a{background:#ff0f0f;color:#fff;}
#header li:hover a{background:#ff0f0f !important;color:#fff !important;}
#kontakt h3, #wdrozenia h3 {padding:10px;margin:16px 0;font-size:16px;}
#home {padding-bottom: 20px;}
#home > p {padding-bottom:20px;}
#home > div > a {width:244px;height: 225px;float:left;position:relative;color:#fff;text-align: center;padding:20px 0 0 0;border-left-width: 1px;border-left-style: solid;border-left-color: transparent;}
#home > div > a#kodowanie {border-left-style: none;border-left-width: 0;width:245px;}
#home > div:hover > a {background: #aaa;border-left-color:#fff;}
#home > div:hover > a span {color: #aaa;}
#home a span {text-align:center;font-size:10px;background:#fff;width:74px;height:26px;line-height: 26px;display:block;margin:27px auto 0 auto;text-transform:uppercase;border:1px solid #fff;}
#home > div:hover > a:hover span {background:none;color:#fff;}
#home strong {text-align:center;margin:0 0 17px 0;display: block;}
#kodowanie span {color:#fe4b4a;}
#cms span {color:#ff6b3f;}
#sklepy span {color:#ffa63f;}
#audyt span {color:#feb73d;}
#cms {border-left:1px solid #ff6b3f;}
#sklepy {border-left:1px solid #ffa63f;}
#audyt {border-left:1px solid #feb73b;}
#home > div > a#kodowanie:hover, #kodowanie {background: #fe4a49;}
#home > div > a#cms:hover, #cms {background: #ff6b3f;}
#home > div > a#sklepy:hover, #sklepy {background: #ffa63f;}
#home > div > a#audyt:hover, #audyt {background: #feb73b;}
#content {border-top:1px solid #e0ddd4;position:relative;overflow:hidden;padding-top: 20px;background:#f3eee0 url('https://static.kodhtml.pl/images/tlo.jpg') no-repeat fixed center top;flex-grow: 1;}
.opis {float:right;width:790px;padding: 0;}
#ciecie ul.przyklady {position: relative;overflow: hidden;}
#ciecie ul.przyklady li {margin-left:50px;margin-bottom: 0;float:left;text-align:center;width:152px;padding: 0;background: none;}
#ciecie ul.przyklady li.first {margin-left: 0;}
#ciecie ul.przyklady li.last {margin-left: 0;float: right;}
#ciecie ul.przyklady a img{display:block;clear:both;margin: 0 auto;}
#wdrozenia-sklepow ul.przyklady li, #wdrozenia-cms ul.przyklady li {background: none;border-bottom: 1px solid #e4dbc2;padding: 0 0 12px 0;margin-bottom: 12px;}
#wdrozenia-sklepow ul.przyklady li.last, #wdrozenia-cms ul.przyklady li.last {margin: 0;padding: 0;border-bottom: none;}
#wdrozenia-sklepow ul.przyklady p, #wdrozenia-cms ul.przyklady p {margin: 0;}
#wdrozenia-cms li > a, #wdrozenia-sklepow li > a {display: inline-block;float:left;}
#wdrozenia-cms li img, #wdrozenia-sklepow li img {display: block;}
.akt_h3{cursor:pointer;position:relative;}
#wdrozenia h3.akt_h3 {padding-right: 70px;}
.akt_h3 span {right:10px;position:absolute;top:10px;}
h3 .zwin, h3.rozwiniete .rozwin{display:none;}
h3 .rozwin, h3.rozwiniete .zwin{display:inline;}
h3 .zwin, h3 .rozwin{font-size:12px;}
h4 {font-size: 16px;margin: 12px 0;font-weight: normal;}
/*.label{width:120px;display:inline-block;}*/
#dane_kontaktowe, #dane_logo, #dane_firmowe {float:left;width: 33.3333%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0 10px;}
#dane_kontaktowe {text-align: right;}
#dane_kontaktowe a {font-weight: bold;}
#dane_logo img {margin:13px auto 0 auto;display: block;}
#dane_firmowe {text-align: left;}
#bottom{padding:12px 0;border-top:1px solid #e0ddd4;background:#fff;margin-top:12px;}
#bottom h3{margin:12px 0 0 0;color:#fe4c4c;}
#bottom .container > img, #home img{margin:0 auto;display:block;clear:both;}
#bottom ul {list-style: none;margin: 0;padding: 0;}
#bottom li {margin-left:79px;margin-bottom: 0;float:left;background: none;padding: 0;}
#bottom a {display:inline-block;opacity:0.5;}
#bottom a img {display:block;}
#bottom a:hover {opacity:1;}
#bottom li.first {margin-left:0;}
#bottom li.last {margin-left: 0;float: right;}
#footer{border-top:1px solid #e4dbc2;padding:10px 0;background:#f8f8f8;}
@media (max-width:999px){
.container {width:480px;padding: 0;}
#logo {margin-right: 10px;}
#header li {margin: 0 2px;}
#header li a {padding: 0 7px;}
#header li span {display: none;}
#home > div > a {width:239px;height: 219px;}
#home > div > a#sklepy, #home > div > a#kodowanie {width:240px;border-left: none !important;}
#home > div > a#kodowanie {border-bottom: 1px solid #fe4a49;}
#home > div > a#cms {border-bottom: 1px solid #ff6b3f;}
#home > div:hover > a#kodowanie, #home > div:hover > a#cms {border-bottom-color:#fff;}
#home strong {margin-bottom: 12px;}
#home a span {margin-top: 20px;}
#bottom li {margin-left:0;text-align: center;width:50%;float: left;}
#ciecie ul.przyklady li {margin:0 0 10px 0;width:100%;}
#ciecie ul.przyklady li.last, #bottom li.last {display: none;}
#footer {text-align: center;}
.opis {width: 100%;padding-top:12px;}
h4 {text-align: center;}
#kontakt img {margin: 13px auto;display: block;}
#dane_firmowe, #dane_logo, #dane_kontaktowe {float: none;display: block;text-align: center;width: auto;}
#dane_kontaktowe a {display: block;margin-bottom: 10px;}
#dane_kontaktowe a + br {display: none;}
#home > p:first-child img {width: 100%;height: auto;}
#wdrozenia-cms li > a, #wdrozenia-sklepow li > a {display: block;float: none;margin: 0 auto;width:152px;}
}
@media (max-width:479px){
body {font-size: 12px;}
h4 {font-size: 14px;}
.container {width:320px;}
#kontakt h3, #wdrozenia h3 {font-size: 14px;}
#header {padding-top: 15px;padding-bottom: 15px;background-position: 0 -22px;}
#bottom {padding:10px 0; margin-top: 10px;}
#header ul {display:table;margin:0 auto;float:none;}
#logo {margin: 0 auto 14px auto;float:none;}
#home a span {margin-top: 6px;}
#home > div > a {width:300px !important;height: auto;padding:10px;border-left:none !important;}
#home > div:hover > a {border-bottom-color:#fff !important;}
#home > div > a#sklepy {border-bottom:1px solid #ffa63f;}
#home > div > a br {display: none;}
#bottom li {width:100%;float:none;margin:0;text-align: center;}
}
@media (max-width:319px){
#kontakt h3, #wdrozenia h3 {padding-right: 0;}
.container {width:240px;}
#ciecie ul.przyklady li {width:100%;float:none;margin:12px 0 0 0;text-align: center;}
#ciecie ul.przyklady li:first-child {margin-top: 0;}
#home > div > a {width:220px !important;}
#header ul {font-size: 14px;}
#header li {margin: 0 1px;}
#header li a {padding: 0 5px;}
.label {display:block;width:100%;padding-top: 12px;}
#dane_kontaktowe .label:first-child {padding-top: 0;}
#footer span {display: block;}
#footer span span {display: none;}
}