﻿/*
	AUTHOR:	Anna Romańska
				info@dronka.org
				http://dronka.org
*/

/* RESETES & BASIC PAGE SETUP */
*, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;}									

article, aside, figure, footer, header, hgroup, nav, section {display:block;}
.clickable, label, input[type=button], input[type=submit], button {cursor:pointer;}
html 			{overflow-y:scroll;}
ul 				{list-style:none;}
a 				{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
del 			{text-decoration:line-through;}
hr 				{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
.ie7 img 		{-ms-interpolation-mode:bicubic;}
.ie6 html 		{filter:expression(document.execCommand("BackgroundImageCache", false, true));}

input, select 						{vertical-align:middle;}
input[type="radio"] 				{vertical-align:text-bottom;}
input[type="checkbox"] 				{vertical-align:bottom; *vertical-align:baseline;}
.ie6 input 							{vertical-align:text-bottom;}
select, input, textarea 			{font:99% sans-serif;}
button, input, select, textarea 	{margin:0;}
button 								{width:auto; overflow:visible;}

a:hover, a:active 					{outline:none;}
strong, th 							{font-weight:700;}
td, td img 							{vertical-align:top;} 
sub, sup 							{font-size:75%; line-height:0; position:relative;}
sup 								{top:-0.5em;}
sub 								{bottom:-0.25em;}
pre, code, kbd, samp 				{font-family:monospace, sans-serif;}

/* TOOLBOX */
.fl 			{float:left;}
.fr 		{float:right;}
.clear 				{clear:both;}
.clearfix:before,
.clearfix:after 	{content:""; display:table;}  
.clearfix:after 	{clear:both;}  
.clearfix 			{zoom:1;} 
.trans, .trans *, .trans:after, .trans *:after, .trans *:before,
.btn	{-moz-transition:all 0.5s; transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s; }

.t-center {text-align:center;}
.t-right {text-align:right;}
.img-resp {max-width:100%;}
.viol {color:#822a85}

/* LINKS & COLORS */
::selection				{background:#000; color:#fff; text-shadow:none;}
::-moz-selection 		{background:#000; color:#fff; text-shadow:none;}

/* STRUCTURE AND STUFF */
body 				{font-size:62.5%; font-family:"Open Sans", Freesans, sans-serif; height:100%; line-height:1.4; width:100%; min-width:980px; font-weight:400;}
.wrap {width:980px; margin:0 auto; position:relative;}

.btn {font-weight:700; text-transform:uppercase; padding:8px 10px; border:1px #000 solid; letter-spacing:-0.5px; text-decoration: none; color:#000; font-size:1.2em;}
.btn:hover {color:#822882; border-color:#822882; text-decoration:none; background:#fff;}

.intro {font-size:1.4em; padding:30px 0; font-weight:300;}
.intro img {margin-bottom:20px; max-width:60%;}
.intro p {margin-bottom:15px;}


ul.kroki {list-style:none; margin-bottom:30px;}r
ul.kroki li {display:inline; }
ul.kroki li div {display:block; float:left;width:20%; text-align:center; position:relative;}
ul.kroki li div>strong {display:block; width:70px; height:70px; background:#eee; color:#000; text-align:center; border-radius:70px; text-transform:uppercase; font-size:2.4em; margin:0 auto; font-weight:700; line-height:1; position:relative; z-index:3; margin-bottom:10px;}
ul.kroki li.start div>strong, ul.kroki li.koniec div>strong {line-height:68px; font-size:1.4em;}
ul.kroki li div>strong>span {font-weight:300; display:block; padding:14px 0 4px; font-size:0.6em;}
ul.kroki li>div:after {display:block; content:''; background:#eee; width:50%; height:8px; right:0; top:31px; position:absolute; z-index:1;}
ul.kroki li>div:before {display:block; content:''; background:#eee; width:50%; height:8px; left:0; top:31px; position:absolute; z-index:1;}
ul.kroki li.koniec div:after, ul.kroki li.start div:before {display:none;}

ul.kroki div.txt {border:1px #999 solid; padding:0 15px; height:70px; color:#333; text-transform:uppercase; font-size:1.1em; display: table; width:95%;}
ul.kroki div.txt p {display: table-cell; vertical-align: middle; font-weight:400;}
ul.kroki span.time {clear:both; display:inline-block; font-weight:700; color:#000; text-align:center; padding:5px 0 0 15px; text-transform:uppercase; position:relative; }
ul.kroki span.time:before {display:block; position:absolute; top:6px; left:0; width:12px; height:12px; content:''; background:url(/WWW/img/partner/ico-time.png) no-repeat;}

/* aktywny krok */
ul.kroki li.active div.txt {border-color:#822a85}
ul.kroki li.active div.txt p {color:#822a85}
ul.kroki li.active div>strong, ul.kroki li.done div>strong {color:#fff; background:#822a85;}
ul.kroki li.active>div:before {background:#822a85;}

/* krok wykonany */
ul.kroki li.done>div:after, ul.kroki li.done>div:before {background:#822a85;}


h2 {font-weight:300; font-size:3.6em; margin-top:2em;}

table {border:1px #822a85 solid; border-top: none; background:#f8f8f8; border-collapse:collapse; border-spacing:0; font-size:1.4em; font-weight:400; width:100%; margin:20px 0;}
td {padding:30px 5px;}
td:first-child, th:first-child {padding-left:10px;}
td:last-child {padding-right:10px;}
th {background:#822a85; color:#fff; font-wieght:700; text-transform:uppercase; text-align:left; padding:5px; vertical-align:middle;}
th span {display:block; font-size:0.6em;}
tr {border-top:1px #822a85 solid;}

table.order td:first-child, table.order th:first-child {width:33%;}
table.order td:nth-of-type(2), table.order td:nth-of-type(5), table.order td:nth-of-type(6) {width:16%;}
table.order td:nth-of-type(3), table.order td:nth-of-type(3) {width:7%;}
table.order td:nth-of-type(7) {width:2%;}
table.order td:first-child input {font-size:0.9em; line-height:3.9em}
table.order th:last-child {text-indent:-9999px; display:block; background:url(/WWW/img/partner/ico-delete2.png) no-repeat center center #822a85; line-height:2.3em;}

input[type=text], input[type=email], select {width:100%; padding:0 10px; background:#fff; border:1px #f8f8f8 solid; color:#000; box-shadow:inset 1px 1px 3px rgba(0,0,0,0.3); border-radius:4px; line-height:3.5em; outline:none; font-family:"Open Sans", sans-serif;  margin-bottom:5px;}
select {height:50px; width:100%; min-width:55px;}
input[type=text]:focus, input[type=email]:focus {border-color:#000; box-shadow:none;}
input[disabled] {background:#eee; cursor:not-allowed;}

a.delete {display:block; width:28px; height:28px; background:url(/WWW/img/partner/ico-delete.png) no-repeat center center #d1d1d1; border-radius:4px; box-shadow:1px 1px rgba(0,0,0,0.3); text-indent:-9999px;}
a.delete:hover {background-color:#000; cursor:pointer;}

button.main-btn {display:block; font-size:1.6em; color:#fff; text-decoration:none; background:#000; border-radius:5px 0 0 5px; text-transform:uppercase; padding:20px; font-weight:700; position:relative; letter-spacing: 0; border:none; font-family:"Open Sans", sans-serif; margin-top:30px; margin-bottom:30px; margin-right:40px;}
button.main-btn:after {content:''; position:absolute; top:0; right:-40px; display:block; background:url(/WWW/img/partner/arrow.png) no-repeat center center #f4f4f4; border-radius: 0 5px 5px 0; width:40px; height:100%;}
button.main-btn:hover {padding:20px 30px; margin-right:60px; background:#250826;}
button.main-btn:hover:after {width:60px; right:-60px; }


#footer {background:#eeeeee; padding-top:50px; margin-top:50px; font-size:1.2em;}
#footer .kol {width:20%; float:left;}
#footer .kol1 {float:right;}
#footer footer {width:100%; padding:20px 0; margin-top:40px; border-top:1px #fff solid;}
#footer .kol2 img {max-width:50%; margin-bottom:20px;}
#footer a {text-decoration:none; color:#000; font-weight:400;}
#footer h4 {height;:20px; margin-bottom:20px; text-transform: uppercase;}

#footer ul li {line-height:2em;}
#footer ul li a {margin-left:10px; position:relative; text-transform:uppercase;}
#footer ul li a:before {content:''; display:block; width:3px; height:3px; border-radius:20px; background:#000; position:absolute; top:6px; left:-9px;}
#footer ul li a:hover:before {top:5px; width:5px; height:5px; background:#822a85; left:-10px;}
#footer ul li a:hover {color:#822a85}
#footer .kol5 ul {margin-top:40px;}

#footer .kol1 span {position:relative; height:20px; margin-left:25px; display:block; line-height:20px;}
#footer .kol1 span:before {content:''; display:block; width:25px; height:20px; background-position: center center; background-repeat: no-repeat; position:absolute; top:0; left:-25px;}
#footer .kol1 span.mail:before {background-image: url(/WWW/img/partner/ico-mail.png)}
#footer .kol1 span.tel:before {background-image: url(/WWW/img/partner/ico-tel.png)}
#footer footer, #footer footer a {color:#999;}




/* _____________ mniej niż 1024 _____________ */

@media screen and (max-width:1023px) {
body 							{min-width:780px;}
.wrap 							{width:780px;}

ul.kroki div.txt {height:100px;}
}




/* _____________ mniej niż 800 _____________ */

@media screen and (max-width:799px) {
body 							{min-width:620px;}
.wrap 							{width:620px;}

ul.kroki div.txt {height:120px;}

table.order td:first-child input {font-size:1em; line-height:auto;}

table, thead, tbody, th, td, tr {display: block; }
tr th{position: absolute; top: -9999px;left: -9999px; width:100%!important;}

td {position: relative; padding:20px 15px 0;width:100%!important;}
td:last-child {padding-bottom:20px;}
select {height:40px;}
table.order td {padding:35px 10px 20px; }

table.order td:before {position: absolute; top: 0; left: 0; width: 100%; padding:4px 10px; white-space: nowrap; text-transform:uppercase; background:#822a85; color:#fff; font-weight:700; font-size:0.8em;}

table.order tr:nth-child(odd) td:before {background: #333;}
table.order tr:nth-child(even) td:before {background: #822a85}

table.order td:nth-of-type(1):before { content: "Przedmiot leasingu"; }
table.order td:nth-of-type(2):before { content: "cena brutto / netto"; }
table.order td:nth-of-type(3):before { content: "ilość"; }
table.order td:nth-of-type(4):before { content: "VAT"; }
table.order td:nth-of-type(5):before { content: "wartość VAT"; }
table.order td:nth-of-type(6):before { content: "wartość brutto / netto"; }
table.order td:nth-of-type(7):before { content: "usuń"; }


#footer {font-size:1em;}
#footer .kol2 img {max-width:75%;}
}





/* _____________ mniej niż 640 _____________ */

@media only screen and (max-width :639px) {
body 							{min-width:460px;}
.wrap 							{width:460px;}

ul.kroki li {display:block; clear:both;}
ul.kroki li>div {display:block; float:none; width:100%;}

ul.kroki li>div:before {display:none;}
ul.kroki li>div:after {height:120px; width:8px; bottom:0; left:71px;}

ul.kroki li>div>strong {float:left; margin-left:40px;}
ul.kroki li div.txt {width:65%; float:right; height:70px;}
ul.kroki li.start div.txt {margin-bottom:30px;}
ul.kroki li span.time {float:right; margin-bottom:30px; padding-top:0;}
ul.kroki li span.time:before {top:1px;}


#footer {font-size:1.2em}
#footer .kol2 img {max-width:50%;}
#footer .kol1, #footer .kol2 {width:50%; height:150px;}
#footer .kol3, #footer .kol4, #footer .kol5 {width:33.3%;}





}





/* _____________ mniej niż 480 _____________ */

@media only screen and (max-width :479px) {

body 							{font-size:47.5%; min-width:300px;}
.wrap 							{width:300px;}

ul.kroki li>div:after {left:36px;}

ul.kroki li>div>strong {margin-left:0; width:60px; height:60px; margin-left:10px;}
ul.kroki li div.txt {font-size:1.2em; height:60px;}
ul.kroki li.start div>strong, ul.kroki li.koniec div>strong {line-height:58px;}

}



input[type="email"], input[type="number"], input[type="text"], select { height: 45px; }
