@charset "UTF-8";
/* CSS Document */

/*
Barlow+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400
Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400
*/

html, body {
	width:100%;
	height:100%;
	background-color:#ffffff;
	font-family:'Rubik', sans-serif;
	font-weight: 400;
	color:#181a1c; /*jasniejszy: 4b5157*/
	line-height: 160%;
}

b {
	font-weight: 600;
	color: #181a1c;
}

/* likwiduje 3px dolnego
marginesu - bug w html5?*/
img {
	vertical-align: middle;
}

/* centruje tresc
na duzych ekranach,
ogranicza tla */
#wrapper {
	/*po przekroczeniu 1400:
	max-width: 1200px;*/
	width: 100%;
	margin: 0 auto;
}

/* warstwa centrująca */
.center-1020 {
	width: 100%;
	max-width: 1020px;
	margin: 0 auto;
	position: relative;
}

/* definicje kolumn
lt-do lewej
rt-do prawej */


/* line break (3 w pierwszym rzedze, 2 w kolejnym itp.) */
.line_break {
	width: 100%;
	float: left;
}

/*
==================================
        nowe listy summary
==================================
*/
#summary {
	float: left;
	width: 94.1176470588%;
	max-width: 960px;
	background-color: #fafafa;
	border: dashed 1px #181a1c; /*#478EF0;*/
	border-radius: 10px;
	padding: 0;
	margin-top: 3%;
}
#summary h6 {
	font-size: .76em;
	font-weight: 500;
	color: #94989D; /*#94989D;*/
	margin: 0 0 0 0;
	padding:0 0 .3em 24px;
}
#summary ul {
	list-style: none;
	font-size: .85em;
	padding: 0 0 0 24px;
	opacity: .8;
}
#summary ul li {
	line-height: 150%;
	padding-bottom: .5em;
}

#summary .one-column-lt {
	width: 31.25%;
	max-width: 300px;
	margin:2% 0 2.2% 3.125%;
	float: left;
}
#summary #klient, #summary #rezultaty {
	width: 28.125%;
	max-width: 270px;
}
/* wyrównanie ikonki klucza do lewej krawędzi kolumny */
#summary #metody {
	margin-left: 2.91666666667%;
}

#summary #klient h6 {
	background: url(../gfx/icons/ico_recap_user.png) left 50% no-repeat;
}
#summary #metody h6 {
	background: url(../gfx/icons/ico_recap_wrench.png) left 50% no-repeat;
}
#summary #rezultaty h6 {
	background: url(../gfx/icons/ico_recap_lightning.png) left 50% no-repeat;
}

.one-column-lt {
	width: 29.4117647%;
	max-width: 300px;
	margin:0 0 0 2.94117647%;
	float: left;
}

.one-column-rt {
	width: 29.4117647%;
	max-width: 300px;
	margin:0 2.94117647% 0 0;
	float: right;
}

.two-columns-lt {
	width: 61.7647059%;
	max-width: 630px;
	margin:0 0 0 2.94117647%;
	float: left;
	position: relative;
}

.two-columns-rt {
	width: 61.7647059%;
	max-width: 630px;
	margin:0 2.94117647% 0 0;
	float: right;
	position: relative;
}

.three-columns {
	width: 94.1176471%;
	max-width: 960px;
	margin:0 0 0 2.94117647%;
	float: left;
}

/* marginesy screenów
z aplikacji */
.one-column-lt img, .one-column-rt img {
	width: 100%;
	/*margin: 8% 0 8% 0;*/
	margin-top: 12%;
}

/* marginesy pod
screenami z aplikacji:
tylko do sekcji zawierającej
takie obrazki, na dole,
górne marginesy ma sam
obrazek powyżej */

.app-img {
	padding-bottom: 4%;
}

.three-columns img {
	width: 100%;
	margin: 8% 0 8% 0;
}

figcaption {
	color: #95989c;
	font-size:0.9375em;
	font-weight: 300;
	font-style: italic;
	margin: 1em 0 4em 0;
	line-height: 120%;
}
figcaption.enlarge {
	padding-left: 1.7em;
	background: url(../gfx/icons/ico-zoom-in.png) left 0% top 1px no-repeat;
}


/*
===========
Logo i menu
===========
*/

header {
	/*padding: 4% 0 15% 0;*/
	padding-top: 4%;
	color: #262626;
}

header + article {
	margin-top: 6%;
}

header h1 {
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	font-size: 1.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.00em;
	line-height: 0.78em;
	color: #95989c;
}

header h1 a span#marzec {
	color: #181a1c;
}

header h1 a span {
	display: block;
}

header h1 a span#ui span {
	display: inline;
	font-weight: 400;
}

header h1 a {
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 0.78em;
	text-decoration: none;
	color: #95989c;
}

/* HOVER LOGO */
header h1 a:hover {
	color: #181a1c;
}

/* menu top */
header nav ul {
	width: 100%;
	height: 66px;
	padding: 0;
}

header nav ul li {
	display:inline;
	text-align: left;
	line-height: 66px;
	margin-right: 8%;
}

header nav ul li a {
	color:#181a1c;
	font-size:0.9375em;
	font-weight:500;
	text-decoration:none;
	padding:2px 0 8px 0;
}

header nav ul li a:hover, #urhere {
	border-top: solid 2px #181a1c;
}





/*
=================
     Treść
=================
*/

article, section, footer {
	width: 100%;
	float: left;
	position: relative;
}

#project-info {
	padding: 0;
}

/* linki w treści */

p a {
	color: #181a1c;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: solid 1px #181a1c;
}

p a:hover {
	color: #4b5157;
	border-bottom: none;
}

/* listy w treści */

ul {
	list-style-type: square;
	list-style-position: outside;
	padding: 0 0 0 4%;
}

article ul li {
	max-width: 500px;
}
article ul li span, .przypis {
	color: #95989c;
	font-weight: 300;
	/*header grey: 95989c
	text grey: 4b5157*/
}

h1 {
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	font-size: 2.5em;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.0em;
	line-height: 0.85em; /*0.79em;*/
	color: #181a1c;
}

h1#bez-dopiska {
	display: block;
	margin: 0 0 48px 0;
}

h1 #dopisek {
	display: block;
	font-size: 0.6em;
	font-weight: 200;
	letter-spacing: -0.02em;
	margin: 4px 0 32px 0;
}

h2 {
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	font-size: 1.5em;
	font-weight: 300;
	text-transform: none;
	letter-spacing: 0.00em;
	line-height: 0.8em;
	color: #95989c;
}

article .przypis {
	text-indent: -0.65em;
}

.two-columns-rt p, .two-columns-lt p {
	width: 79.3650794%; /*500 / 630*/
	max-width: 500px;
	position: relative;
	display: block;
	margin-bottom: 1em; /* ==================!!!!!==================== */
}

/* pozioma kreska
'zaczynajaca' paragraf */
.kreska-DISABLED {
	display: block;
	width: 50px;
	height: 2px;
	position: relative;
	left: -1000%; /*-47%;*/
	top: 1em;
}

ul#legend {
	margin: 2% 0 8% 0;
	padding: 0;
}

ul#legend li {
	display: inline;
	color: #95989c;
	font-size: 0.875em;
	font-weight: 300;
}
ul#legend li::after {
	content: " \0000a0\0000a0 /\0000a0";
}

ul#legend li#no-slash::after {
	content: "";
}

/* link do następnego
projektu */

#go-next {
	width: 100%;
	background-color: #ffffff;
	float: left;
	text-align: center;
	padding: 10% 0 12% 0;
}

#go-next a {
	color: #181a1c;
	font-size:0.9375em;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	padding:15px 24px 15px 0;
	background: url(../gfx/icons/arrow-next.png) right 50% no-repeat;
}

#go-next a:hover {
	opacity: .6;
}

/*
=================
     Stopka
=================
*/

footer ul {
	padding: 0;
}

footer ul li:last-child {
  border-right: solid 1px #27292a;
}

footer ul li {
	display: inline-block;
  border-left: solid 1px #27292a;
  padding: 8% 0 8% 0;
}

footer ul li a {
	color: #95989c;
	font-size: 0.9375em;
	text-decoration: none;
	font-weight: 400;
  margin-left: 20px;
  /*padding: 5px 0 4px 0;*/
}

footer ul li a:hover {
  color: #ffffff;
  border-bottom: solid 2px #ffffff;
}

#to-top {
  float: right;
  margin-right: 20px;
  padding-right: 23px;
  background: url(../gfx/icons/arrow-up.png) right 55% no-repeat;
}

a#to-top:hover {
  border-bottom: none;
  opacity: .6;
}

a#footmail {
	/*visibility:hidden;*/
}
/*
=================
=================
definicje kolorów

black: 181a1c
header grey: 95989c
text grey: 4b5157
light bg grey: e8e9e9
text 'white
on black: aeb1b5
lines on black: 27292a
=================
=================
*/

/* definicje kolorów
tła */

.bg-dark {
	background-color: #181a1c;
}

.bg-grey {
	background-color: #95989c;
}

.bg-light {
	background-color: #e8e9e9;
}

/* tło paragrafu
pod info, pozioma
linia pod info */

.bg-text {
	width: 100%;
	background-color: #ffffff;
	float: left;
	padding: 5% 0 5% 0; /* 8% 0 10% 0; ===============!!!!!!================= */
}

.light-line-up {
	border-top: solid 1px #e8e9e9;
	padding: 5% 0 5% 0; /* 6% 0 8% 0; ===============!!!!!!================= */
}
.light-line-down {
	border-bottom: solid 1px #e8e9e9;
}



/*
=========================================================
       										RWD
=========================================================
*/

@media only screen and (min-width:1400px) {
	#wrapper {
		max-width: 1120px;
	}
	/* górny margines galerii
	screenów z app w dużej
	rozdzielczości
	==========================
	to nie może tak zostać:(
	nie każda strona ma bg-text
	 */
	.app-img .bg-text {
		margin-bottom: 2%;
	}
	.app-img {
		padding-bottom: 6%;
	}
}

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

	header nav ul {
		position: relative;
		float: right;
		text-align: right;
	}

	header nav ul li {
		margin-right:0;
		margin-left: 11%;

	}

	header + article {
		margin-top: 12%;
	}

	/* TREŚĆ - paragraf */

	/* pozioma kreska
	'zaczynajaca' paragraf */
	.kreska {
		position: relative;
		left: 0%;
		top: -0.5em;
	}
	/* listy w treści kejsow */
	ul {
		padding: 0 0 0 6%;
	}

	/* ramka z podsumowaniem od 768 w dol */
	#project-info .three-columns {
		width: 80%;
		float: left;
	}

	#summary {
		padding: 5% 0 2% 0;
	}

	#summary .one-column-lt, #summary #metody, #summary #rezultaty, #summary #klient {
		width: 90%;
		max-width: 90%;
		margin:0 0 5% 5%;
		float: left;
	}


	.with-h2 /*1 col z lewej z h2 podrozdzialu*/ {
		width: 65%;
		max-width: none;
		float: left;
		margin-bottom: 2em;
	}

	article .two-columns-rt {
		width: 75%;
		max-width: none;
		margin: 0 0 0 14%;
		float: left;
	}

	article .two-columns-rt p {
		width: 100%;
		max-width: none;
		font-size: 1em;
		line-height: 1.6;
		font-weight: 300;
	}
		article .two-columns-rt p.first-under-img {
			margin-top: 2em;
		}

	/* obrazki z aplikacji */

	figure.one-column-lt {
		width: 100%;
		max-width: none;
		display: block;
		text-align: center;
		margin: 0;
	}

	figure.one-column-lt img {
		width: auto;
		margin: 5% 0 0 0;
	}

	#go-next {
		padding: 15% 0 16% 0;
		/*font-size: 1.2em;*/
	}

	footer ul li a {
		font-size: 1em;
	}
}



/* ============================
   ============================
	 ============================ */

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

	/* logo */
	header h1.one-column-lt {
		width: 100%;
		max-width: none;
		margin: 5% 0 0 0;
		text-align: center;
		position: relative;
		font-size: 1.5em;
	}

	header h1.one-column-lt a, header h1.one-column-lt a span {
		display: inline-block;
		width: auto;
		max-width: none;
		margin: 0 auto;
	}

	#grafik, #projektant, #ui {
		text-indent: -9999px;
		display: none;
	}

	/* menu główne poniżej 668 */

	header nav.two-columns-rt {
		width: 100%;
		max-width: none;
		margin: 4% 0 6% 0;
	}

	header nav.two-columns-rt ul {
		display: table;
		width: 100%;
		height: 44px;
		border-bottom: solid 1px #e8e9e9;
	}

	header nav.two-columns-rt ul li {
		display: table-cell;
		text-align: center;
		margin: 0;
		line-height: 44px;
		width: 33.33%;
	}

	header nav.two-columns-rt ul li a {
		font-size:1em;
		font-weight:600;
		letter-spacing: -0.02em;
		text-decoration:none;
		padding:2px 0 12px 0;
	}

	header nav.two-columns-rt ul li a:hover, #urhere {
		border-top: none;
		border-bottom: solid 2px #181a1c;
	}

	/* ramka z podsumowaniem od 668 w dol */
	#project-info h1 {
		font-size: 2em;
		line-height: 0.78em;
	}
	span#dopisek {
		font-weight: 400;
	}

	#project-info .three-columns {
		width: 88%;
		float: left;
	}

	/* pozioma kreska
	'zaczynajaca' paragraf */
	.kreska {
		visibility: hidden;
	}

	/* listy w treści kejsow */
	ul {
		padding: 0 0 0 7%;
	}

	article .two-columns-rt {
		/*width: 94.1176471%;*/
		width: 90%;
		max-width: none;
		/*margin:0 0 0 2.94117647%;*/
		margin: 0 0 0 5%;
		float: left;
	}

	article .two-columns-rt p {
		width: 100%;
		max-width: none;
		font-size: 1em;
		line-height: 1.5em;
		font-weight: 300;
		text-align: left; /*justify;*/
	}
	article .przypis {
		text-indent: -0.65em;
		margin-left: 2%;
	}

	article .two-columns-rt h1, article .two-columns-rt h2 {
		width: 100%;
		max-width: none;
		text-align: center;
	}
	/* ramka z podsumowaniem */
	#summary {
		width: 75%;
		max-width: none;
		margin: 4% 0 6% 5%;
		float: left;
	}
	.with-h2 /*1 col z lewej z h2 podrozdzialu*/ {
		width: auto;
		max-width: none;
		margin: 4% 0 4% 5%;
		font-size: 1.1em;
	}

	figcaption /* poniżej 668 */{
		margin: -1em 0 1.4em 0;
		font-size:0.8em;
	}
	figcaption.enlarge {
		padding-left: 1.7em;
		background: url(../gfx/icons/ico-zoom-in.png) left 0% top 0 no-repeat;
		padding-top: 2px;
	}

	#legend {
		text-align: center;
	}

	#go-next {
		padding: 21% 0 23% 0;
	}

	/* stopka od 668 */
	footer .two-columns-lt {
		width: 100%;
		max-width:none;
		margin: 0;
	}
	footer .one-column-rt {
		width: 100%;
		max-width:none;
		margin: 0;
	}
	footer ul {
		padding: 0;
	}
	footer ul li:last-child {
	  border-right: none;
	}

	footer ul li {
		display: block;
		border-left: none;
	  padding:0;
		margin: 0;
		text-align: center;
	}
	footer ul li a {
		display: block;
	  border-bottom: solid 1px #27292a;
	  padding:20px 0 20px 0;
		margin: 0;
		text-align: center;
		font-size: 1em;
	}
	footer ul li a:hover {
		color: #ffffff;
	  border-bottom: solid 1px #535759;
	}
	/*a#lang-version {
		display: none;
	}*/
	#to-top {
		text-indent: -9999px;
	  clear: both;
		width: 100%;
	  margin: 0 auto;
	  background: url(../gfx/icons/arrow-up.png) 50% 50% no-repeat;
		border-bottom: none;
	}

}