@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
*/

/* style specyficzne dla list (nie kejsow) portfolio i brulionu */
/*============================================*/


/* galeria linków */
article {
	padding: 5% 0 10% 0;
}

article h1 {
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	font-size: 2.9em;
	font-weight: 300;
	letter-spacing: -0.02em;
	color: #34383c;
	text-transform: none;
	margin: 0 0 6% 2.94117647%;
}

/* lista linkow w portfolio */

ul.gallery {
	list-style: none;
	padding: 0;
}
.gallery li {
	width: 100%;
	max-width: 100%;
}

ul.gallery li a {
	display: table;
	width: 100%;
	border-bottom: solid 1px #27292a;
	padding: 50px 0 10px 0;
	color: #95989c;
	text-decoration: none;
	font-size: 0.875em;
}

ul.gallery li a span {
	display: table-cell;
	text-align: left;
}

ul.gallery li a:hover, ul.gallery li a:hover #project-name span {
	background-color: #ffffff;
	color: #181a1c;
	opacity: 1;
}

#lp {
	width: 12%;
	padding-left: 20px;
}
#project-name {
	/*width: 65%;*/
	font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
	text-transform: none;
	font-size: 2.2em;
	font-weight: 400;
	letter-spacing: -0.02em;
}
#project-name span {
	display: inline;
	font-weight: 200;
	font-size: .9em;
	opacity: .5;
}
#scope {
	width: 20%;
	text-align: right;
	padding-right: 20px;
}

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

@media only screen and (max-width:880px) {
	article {
		padding: 8% 0 10% 0;
	}

	#lp {
		width: 10%;
		padding-left: 20px;
	}
	#project-name {
	/*	width: 58%;*/
	}
	#project-name span {
		font-size: .85em;
	}
	#scope {
		width: 30%;
	}
}

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

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

	article {
		padding: 8% 0 10% 0;
	}

	#lp {
		width: 10%;
		padding-left: 20px;
	}
	#project-name {
/*		width: 68%;*/
	}
	#project-name span {
		font-size: .85em;
	}
	#scope {
		width: 30%;
	}
}

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

	.three-columns {
		width: 100%;
		max-width: none;
		margin: 0;
	}
	article {
		padding: 0 0 10% 0;
	}

	article h1 {
		color: #181a1c;
		/*margin: 0 0 6% 2.94117647%;*/
		display: block;
		width: 100%;
		margin: 0;
		padding: 0.5em 0 1.5em 0;
		background-color: #ffffff;
		text-align: center;
		font-size: 2em;
		font-weight: 400;
	}

	ul.gallery {
		border-top: solid 20px #181a1c;
	}

	ul.gallery, ul.gallery li {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	ul.gallery li a, ul.gallery li a:hover {
		width: 100%;
		margin: 0;
		padding: 25px 0 10px 0;
	}

	#lp {
		display: none;
	}
	#project-name {
		width: 90%;
		max-width: 90%;
		text-align: left;
		font-weight: 400;
		padding-left: 22px;
	/*	overflow: hidden;*/
		text-overflow: ellipsis;
	}
	#project-name span {
		font-size: .85em;
	}
	#scope {
		display: none;
	}
}