@import url(../css/base.css);
@import url(jbar.css);
@import url(ie6.css);

html {font-size:100.1%;}
body {background: #fff url('../img/bg1.gif') top repeat-x; font-size:16px; } 
h2, h3, h5, li, input, textarea {font-family: Arial, Verdana, sans-serif; }
p {font-family: Arial, Verdana, sans-serif; font-weight:normal;}

a:link {text-decoration:none;} 
a:focus, :focus {outline:none;}

.boxShadow {-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */ -webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */ filter:progid:DXImageTransform.Microsoft.Shadow(color='#969699', Direction=145, Strength=3); }

p.signature {background:url("../img/signature.png") 5% 50% no-repeat; width:106px; height:22px;}

div#header {width:900px; height:4em; position:relative; padding-bottom:0.5em; border-bottom:1px dotted #333; margin:0 auto;}

div#logo {width:450px; height:4em; float:left; text-align:left;}
div#logo h1 {padding: 0; font-weight:bold; margin-top:0.5em; text-shadow: 0px 0px 2px #999; }
div#logo h1 a {color:#eee; width:450px;}
div#logo h2 {padding: 0 0 0 2px; font-size:.7em; margin-top:0.1em; font-weight:bold; letter-spacing: .2em; text-shadow: 0px 0px 1px #aaa;}  
div#logo h2 a {color:#444; width:450px;}
div#logo h1 a:hover, 
div#logo h2 a:hover {opacity:0.6;}
div#logo div a, div#header p a:visited {color:#333;}
div#logo div a:hover {opacity:0.7;}
div#logo div p {color:#333; }
@media (prefers-reduced-motion: reduce) {
	div#photo:hover {transition:none;}
	div.cta1 a:hover, div.cta2 a:hover {background-position:0 0;}
}

div#keyword {width:450px; height:4em; float:left; text-align:right; position:relative;}
div#keyword h3 {padding: 0; margin-top:2.8em; font-weight:bold; text-shadow: 0px 0px 1px #aaa; font-size:.7em; bottom:.7em; }

div#content1 {width:900px; margin:0 auto; position:relative; overflow:hidden; border-top:1px dotted #333;}

div#photo {width:300px; height:422px; margin-top:30px; float:left; background:url("klienci-biura-rachunkowego-as.png") no-repeat; overflow:hidden;}
div#photo:hover {position:relative; top:1px; cursor:pointer; opacity:0.9; background-position:-300px 0px;}

div#mainContent {width:570px; float:left;}
div#mainContent h4 {font-size:24px; font-weight:bold; text-shadow: 0px 0px 2px #999; color:#fff; background-color: #333;}
div#mainContent ol {margin:30px 0 25px 0; padding:0;}
div#mainContent ol li {font-size:.75em; list-style-image:url("kciuk.png"); margin:10px 0 0 30px; padding:0; color:#444; font-family: Georgia, serif;}
div#mainContent li strong {color:#29c; font-size:1.3em; font-family: Arial, Verdana, sans-serif;}
div#photo {margin-right:30px;}
div#photo img {width:300px; height:351px;}

div#mainContent h5, p {width:100%; text-align:center; font-weight:bold; padding:0;}
div#mainContent p {color:#444; font-size:0.8em; margin-top:0.5em; font-family: Georgia, serif;}
div#mainContent a img {margin-right:20px;}

div#subheader {width:900px; margin:26px auto; }
div#subheader h6 {font-size:20px; font-weight:bold; text-shadow: 0px 0px 2px #999; color:#fff; background-color:#333; width:250px; float:left; height:35px; line-height:38px; margin:0;}
div#subheader img {float:right; width:35px; height:35px; margin-left:3px;  border-bottom:5px dotted #6a7591;}
div#subheader p {font-size: 10px; text-align:right; height:33px; margin:0; color:#6a7591; border-bottom:5px dotted #6a7591; width:530px; float:right; padding-top:2px;}

div#content2 {width:100%; background: #bbc3ca url("bg2.gif") repeat-x; margin:0; color:#666; clear:both; height:820px;}

div.cta1 {width:570px; clear:both; padding:0;}
div.cta1 a {display:block; background:url(button1.jpg); width:455px; height:73px; margin:0 auto;}
div.cta1 a:hover {background-position:0 74px;}

div#offer {width:900px; margin:0 auto;}
div#offer div.offer {background:url("offer.png") no-repeat 20px 0; height:200px; width:300px; margin:0; padding:0; float:left; margin-top:20px;}
div#offer div.offer p {padding:20px 0 0 90px; width:160px; margin:0 0 0 5px; font-size:12px; }
div#offer div.offer p strong {color:#29c; font-size:13px; font-weight:bold; text-transform:uppercase; border-bottom:3px double #99d3e4;}
/*div#offer p {padding-left:14px; width:160px; font-weight:bold; font-family:Arial, Verdana, sans-serif; font-size:12px;}*/

div#offer div.cta2 {width:900px; clear:both;}
div#offer div.cta2 h5 {width:300px; height:67px; color:#444; font-weight:bold; float:left; margin:40px 0 30px 150px; text-align:center; padding:10px 0 0 0;}
div#offer div.cta2 a {display:block; width:400px; float:left; margin:40px 0 30px 0; padding:0; background:url(button2.jpg); width:259px; height:65px; overflow:hidden;}
div#offer div.cta2 a:hover {background-position:0 65px;}

div#comments {width:900px; margin:0 auto; height:165px; border-bottom:5px dotted #ddd; border-top:5px dotted #ddd; clear:both; padding:10px 0;}
div#comments p.comment {width:60px; height:44px; float:left; background:url(komentarz.png) no-repeat; margin-left:25px;}
div#comments p {text-align:left; float:left; font-family: Georgia, serif; font-style:italic; font-size:13px; color:#fff; font-weight:normal;}
div#comments p.one {width:270px; margin-left:10px; padding-right:10px;}
div#comments p.two {width:410px; margin-left:10px; padding-right:10px;}
div#comments p span {float:right; }
/*
div#comments ul {margin:0 0 0 30px; float:left; text-align:left; }
div#comments ul.one {width:280px;}
div#comments ul.two {width:420px; margin-left:50px;}
div#comments ul li {font-family: Georgia, serif; font-style:italic; font-size:0.8em; margin:0; list-style-image:url("komentarz.png"); padding:0; color:#fff; }
div#comments ul li span {float:right; }
*/
div#footer {width:100%; height:130px; background:#1c1c1c; margin:0; padding:0;}
div#footer div {width:900px; margin:0 auto;}
div#footer p {font-weight:normal; font-size:12px; margin:0; padding-top:20px; width:50%;}
div#footer p, div#footer p a {color:#999da0;}
p.left {float:left; text-align:left;}
p.right {float:right; text-align:right;}

/*.button {-moz-box-shadow: 1px -1px 4px 1px #fff6af; -webkit-box-shadow: 1px -1px 4px 1px #fff6af; box-shadow: 1px -1px 4px 1px #fff6af; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); background:-moz-linear-gradient(center top, #ffec64 5%, #ffab23 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23'); background-color:#ffec64; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:1px solid #ffaa22; display:inline-block; color:#333333; font-family:arial; font-size:24px; font-weight:bold; padding:8px 32px 8px 22px; text-decoration:none; text-shadow:0px 1px 0px #ffee66;}

.button{background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64)); background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64'); background-color:#ffab23;}
.button:active {position:relative; top:1px;}*/



/* Faza 4: responsywnosc */
@media (max-width: 920px) {
	div#header, div#content1, div#subheader, div#offer, div#comments, div#footer div {width:100%; box-sizing:border-box; padding-left:12px; padding-right:12px;}
	div#content2 {height:auto;}
	div#comments {height:auto; overflow:hidden;}
	div#mainContent {width:auto; float:none;}
	div#photo {display:none;}
	div#offer div.offer {width:50%; background-position:10px 0;}
	div#offer div.offer p {width:calc(100% - 110px);}
	div#offer div.cta2 h5 {width:auto; margin:40px 12px 30px 12px; float:none; text-align:center;}
	div#offer div.cta2 a {float:none; margin:0 auto 30px;}
	div#footer {height:auto; padding-bottom:20px;}
	div#footer p {width:100%; float:none; text-align:left;}
}
@media (max-width: 620px) {
	div#offer div.offer {width:100%;}
	div#comments p.one, div#comments p.two {width:auto; float:none; margin-left:25px; padding-right:12px;}
	div#subheader p {width:auto; float:none; text-align:left; height:auto;}
	div#subheader img {float:left; margin-left:0; margin-right:6px;}
	.helloinner {width:100%;}
	.text {padding:10px 60px 10px 10px; text-align:left; font-size:12px;}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {animation-duration:.001ms !important; transition-duration:.001ms !important;}
	.jBar, .jRibbon {transition:none !important;}
}

@media (max-width: 375px) {
	div#header {height:auto; padding-bottom:.3em;}
	div#logo {width:auto; float:none; height:auto;}
	div#logo h1 {font-size:1.1em; margin-top:0.4em;}
	div#logo h2 {font-size:.6em;}
	div#keyword {width:auto; float:none; text-align:left; height:auto;}
	div#keyword h3 {margin-top:.6em; font-size:.6em;}
	div#subheader h6 {width:auto; float:none; height:auto; line-height:1.4; padding:6px 8px;}
	div#subheader img {display:none;}
	div#footer p {font-size:11px;}
	.helloinner {width:100%;}
	.text {padding:10px 60px 10px 10px; text-align:left; font-size:12px;}
	div#content1 {padding-left:0; padding-right:0;}
	div#mainContent {padding-left:12px; padding-right:12px;}
	div#mainContent h4 {font-size:18px;}
	div.cta1 a, div.cta2 a {max-width:100%; width:100%; background-size:contain; background-repeat:no-repeat; height:auto; aspect-ratio:455/73;}
	div.cta2 a {aspect-ratio:259/65;}
}