/* Fonts */ 
@font-face {
  font-family: wotfard;
  src: url(fonts/Wotfard-Regular.otf);
}
html, body {
	margin: 0px;
	padding: 0px;
	font-family: wotfard;
}
html {
	padding-bottom: 5em;
}
hr {
	border: 1px solid #000;
}
/* Grid */
.content_contener {
	width: 90%;
	max-width: 1720px;
	margin: 0px 7%;
  display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-column-gap: 2%;
	justify-content: center;
	position: absolute;
	z-index: 9;
}

/* Grid placing */
.header {
  grid-column-start: 1;
  grid-column-end: 4;
}
.header_background {
	background: url(img/mateusz_antczak.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 50%;
}
.main_photo {
	grid-column-start: 1;
  grid-column-end: 5;	
}
.main_photo img {
	width: 100%;
}
.paragraph-0 {
	grid-column-start: 1;
  grid-column-end: 5;

  display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-column-gap: 2%;
}
.paragraph-1 {
	grid-column-start: 1;
  grid-column-end: 3;
  padding: 4em 0%;
  padding-top: 8em;
}
.paragraph-2 {
	grid-column-start: 4;
  grid-column-end: 4;
  padding: 5em 0%;
  padding-top: 9em;
}
.paragraph-3 {
	grid-column-start: 2;
  grid-column-end: 4;
	padding-top: 4em;
}
.paragraph-4 {
	grid-column-start: 3;
  grid-column-end: 5;
	padding-bottom: 4em;
}
.paragraph-5 {
	grid-column-start: 1;
  grid-column-end: 3;
	padding-top: 4em;
}
.paragraph-6 {
	grid-column-start: 3;
  grid-column-end: 5;
	padding-bottom: 4em;
}
.paragraph-7 {
	grid-column-start: 3;
  grid-column-end: 5;
	padding: 4em 0%;
	padding-top: 8em;
}
.paragraph-8 {
	grid-column-start: 3;
  grid-column-end: 5;
	padding: 4em 0%;
	padding-top: 8em;
}
/* Link */
a {
	color: #000;
}
a:hover {
	background: #000;
	color: #fff;
}
.portfolio a {
	font-size: 25pt;	
	color: #000;	
}
.portfolio a:hover {
	background: unset;
}
.portfolio a:hover span {
	font-size: 25pt;	
	color: #fff;	
	background: #000;
}

/* Process */
.process {
	grid-column-start: 1;
  grid-column-end: 5;

	display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-column-gap: 2%;
  grid-template-rows: 32% 32% 32%;
  grid-row-gap: 2%;
}
.process .step-1 {
	grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}
.process .step-2 {
	grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.process .step-3 {
	grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
}
.process .step-4 {
	grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}
.process .step-5 {
	grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 3;

	display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-column-gap: 2%;
}
.process div {
	border-top: 2px solid #000;
	padding-top: 1em;
	position: relative;
}
.process div.step-5 {
	border-top: unset;
	border-bottom: 2px solid #000;
	padding-top: unset;
	padding-bottom: 3em;
}
.process div.step-5 div {
	border-top: unset;	
	grid-column-start: 4;
  grid-column-end: 5;
}
.left-arrow::before, .double-arrow::before {
	content: '.';
  width: 8px;
  color: #fff;
  height: 8px;
  float: left;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
  position: absolute;
  right: 1px;
  top: -6px;
}
.double-arrow::after {
	content: '.';
  width: 8px;
  color: #fff;
  height: 8px;
  float: left;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(135deg);
  position: absolute;
  left: 1px;
  top: -6px;
}
.right-arrow::after {
	content: '.';
  width: 8px;
  color: #fff;
  height: 8px;
  float: left;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(135deg);
  position: absolute;
  left: 1px;
  bottom: -6px;
}

/* Portfolio */
.portfolio {
	grid-column-start: 1;
  grid-column-end: 5;

	display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-column-gap: 2%;
  grid-row-gap: 2%;

  margin-bottom: 12em;
}
.portfolio div img {
	max-width: 100%;
	margin-bottom: 1em;
}
.portfolio .work-1-3 {
	grid-column-start: 1;
  grid-column-end: 3;
}
.portfolio .work-3-5 {
	grid-column-start: 3;
  grid-column-end: 5;
}
.portfolio .work-1-4 {
	grid-column-start: 1;
  grid-column-end: 4;
}
.portfolio .work-4-5 {
	grid-column-start: 4;
  grid-column-end: 5;
}

/* Header */
.header h1 {
	margin: 2em 0em;
}

/* Headline & Text */
h1 {
	font-size: 5em;
	font-weight: 500;
}
h2 {
	font-size: 1.3em;
  font-weight: 600;
}
p {
	font-size: 25pt;	
}
p.small {
	font-size: 16pt;
}

/* List */
ul {
	font-size: 16pt;
	list-style: none;
  padding-left: 0px;
  column-count: 2;
  column-gap: 2em;
}
ul li {
	border-bottom: 2px solid #000;
	-webkit-column-break-inside: avoid;
	padding-bottom: .5em;
	margin-bottom: .75em;
}

@media only screen and (max-width: 1500px) {
	.content_contener {
	  grid-template-columns: 32% 32% 32%;
	  grid-column-gap: 2%;
	}
	/* Grid placing */
	.header {
	  grid-column-start: 1;
	  grid-column-end: 4;
	}
	.paragraph-0 {
		grid-column-start: 1;
	  grid-column-end: 4;

	  display: grid;
	  grid-template-columns: 32% 32% 32%;
	  grid-column-gap: 2%;
	}
	.paragraph-1 {
		grid-column-start: 1;
	  grid-column-end: 3;
	}
	.paragraph-2 {
		grid-column-start: 3;
	  grid-column-end: 4;
	}
	.paragraph-4 {
		grid-column-start: 2;
	  grid-column-end: 4;
	}
	.paragraph-5 {
		grid-column-start: 1;
	  grid-column-end: 3;
	}
	.paragraph-6 {
		grid-column-start: 2;
	  grid-column-end: 4;
	}
	.paragraph-7 {
		grid-column-start: 2;
	  grid-column-end: 4;
	}
	.paragraph-8 {
		grid-column-start: 1;
	  grid-column-end: 3;
	}
}
@media only screen and (max-width: 1500px) { 
	.paragraph-8 {
		grid-column-start: 1;
	  grid-column-end: 5;
	}
}
@media only screen and (max-width: 1200px) { 
	.portfolio .work-1-3 {
		grid-column-start: 3;
	  grid-column-end: 5;
    margin-top: 35%;
	}
	.portfolio .work-3-5 {
		grid-column-start: 2;
	  grid-column-end: 5;
	}
	.portfolio .work-1-4 {
		grid-column-start: 1;
	  grid-column-end: 4;
	}
	.portfolio .work-4-5 {
		grid-column-start: 1;
	  grid-column-end: 3;
	}
}
@media only screen and (max-width: 1200px) { 
	.process {
		grid-column-start: 1;
	  grid-column-end: 4;

		display: grid;
	  grid-template-columns: 49% 49%;
	  grid-column-gap: 2%;
	}
	.process .step-1 {
		grid-column-start: 1;
	  grid-column-end: 2;
	  grid-row-start: 1;
	  grid-row-end: 2;
	}
	.process .step-2 {
		grid-column-start: 2;
	  grid-column-end: 3;
	  grid-row-start: 1;
	  grid-row-end: 2;
	}
	.process .step-3 {
		grid-column-start: 1;
	  grid-column-end: 2;
	  grid-row-start: 2;
	  grid-row-end: 3;
	}
	.process .step-4 {
		grid-column-start: 2;
	  grid-column-end: 3;
	  grid-row-start: 2;
	  grid-row-end: 3;
	}
	.process .step-5 {
		grid-column-start: 1;
	  grid-column-end: 3;
	  grid-row-start: 3;
	  grid-row-end: 4;

		display: grid;
	  grid-template-columns: 49% 49%;
	  grid-column-gap: 2%;
	}
	.process div.step-5 div {
		border-top: unset;	
		grid-column-start: 2;
	  grid-column-end: 3;
	}
	.process div.step-5 {
		border-top: 2px solid #000;
		border-bottom: unset;
		padding-top: unset;
	}
	.right-arrow::after {
		top: -6px;
	}
	.paragraph-1 {
		grid-column-start: 1;
	  grid-column-end: 4;
	}
	.paragraph-2 {
		grid-column-start: 2;
	  grid-column-end: 4;
		padding: 4em 0%;
    padding-top: 0em;
	}
	.paragraph-3 {
		grid-column-start: 1;
	  grid-column-end: 4;
	}
	.paragraph-4 {
		grid-column-start: 1;
	  grid-column-end: 4;
	}
}
@media only screen and (max-width: 930px) { 
	h1 {
		font-size: 4em;
	}
	p {
		font-size: 20pt;
	}
	.paragraph-7 {
		grid-column-start: 1;
	  grid-column-end: 4;		
	}
	.paragraph-1 {
		padding: 0em 0%;
    padding-top: 8em;
	}
	.portfolio a {
		font-size: 20pt;
	}
	.portfolio a:hover span {
		font-size: 20pt;
	}	
	.content_contener {
		width: 80%;
	}
}
@media only screen and (max-width: 750px) { 
	.content_contener {
		grid-template-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75%;
	}
	.header, .main_photo {
		grid-column-start: 1;
    grid-column-end: 9;		
	}
	h1 {
		font-size: 3em;
	}
	.portfolio {
		grid-column-start: 1;
	  grid-column-end: 9;

		display: grid;
	  grid-template-columns: 22% 22% 22% 22%;
	  grid-column-gap: 4%;
	  grid-row-gap: 2%;
	}
	.portfolio .work-1-3 {
		grid-column-start: 3;
	  grid-column-end: 5;
    margin-top: 35%;
	}
	.portfolio .work-3-5 {
		grid-column-start: 2;
	  grid-column-end: 5;
	}
	.portfolio .work-1-4 {
		grid-column-start: 1;
	  grid-column-end: 5;
	}
	.portfolio .work-4-5 {
		grid-column-start: 1;
	  grid-column-end: 3;
	}
	.paragraph-1 {
		grid-column-start: 1;
	  grid-column-end: 7;
		padding-top: 5em;
	}
	.paragraph-2 {
		grid-column-start: 3;
	  grid-column-end: 9;
	}
	.paragraph-3 {
		grid-column-start: 1;
	  grid-column-end: 9;
		padding-top: 0em;
	}
	.paragraph-4 {
		grid-column-start: 1;
    grid-column-end: 7;	
		padding-bottom: 0em;
	}
	.paragraph-4 ul {
		column-count: 1;
	}
	.paragraph-5 {
		grid-column-start: 3;
	  grid-column-end: 9;
	}
	.paragraph-6 {
		grid-column-start: 3;
	  grid-column-end: 9;
	}
	.paragraph-7 {
		grid-column-start: 1;
	  grid-column-end: 8;
	 	padding-top: 5em;
	}
	.paragraph-8 {
		grid-column-start: 1;
	  grid-column-end: 9;
		padding: 2em 0%;
    padding-top: 6em;
	}
	.paragraph-0 {
		grid-column-start: 1;
	  grid-column-end: 9;
		grid-template-columns: 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75% 10.75%;
    grid-column-gap: 2%;		
	}
	.process {
		grid-column-start: 1;
	  grid-column-end: 9;
	}
}

.is-resizing .logo {
  opacity: 0;
}
.logo {
  opacity: 1;
  width: 50px;
  will-change: transform;
}
.logo img {
	width: 100%;
}
@media (min-width: 500px) {
  .logo {
    width: 200px;
  }
}
@media (min-width: 767px) {
  .logo {
    width: 250px;
  }
}
@media (min-width: 1200px) {
  .logo {
    width: 300px;
  }
}
.overlay-bars,
.overlay-rgb {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}
.overlay-rgb {
  opacity: 0.5;
}
.overlay-bars {
  -webkit-animation: jank 40000ms linear infinite;
          animation: jank 40000ms linear infinite;
  opacity: 0.08;
  height: 200%;
}
@-webkit-keyframes jank {
  0% {
    transform: translatey(0);
  }
  100% {
    transform: translatey(-50%);
  }
}
@keyframes jank {
  0% {
    transform: translatey(0);
  }
  100% {
    transform: translatey(-50%);
  }
}