:root {
	--foreground-color: var(--black-color);
	--background-color: var(--white-color);
}

html { 
	height: 100%; 
	width: 100%; 
}

body { 
	width: 100%; 
	min-height: 100vh; 
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'GoodSans';
	font-size: 24px;
	line-height: 1.5;
	color: var(--foreground-color);
	background-color: var(--background-color);
	overflow-x: hidden;
}

input#hamburger-cb {
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	opacity: 0;
}

div#pagewrapper {
	position: relative;
	width: 100%;
	min-height: 100%;
	transform: none;
	will-change: transform;
	transition: .5s transform;
}

div#pagewrapper > .wrapper {
	position: relative;
	height: 100%;
}

header {
	padding-top: 54px;
	margin-bottom: 54px;
	padding-bottom: 107px;
	border-bottom: 3px solid var(--foreground-color);
}

input#hamburger-cb:checked + div#pagewrapper {
	transform: translateX(-750px);
}

header#branding #flexwrapper {
	display: flex;
	flex-flow: row nowrap;
	gap: 100px;
	justify-content: space-between;
	align-items: flex-start;
}

header#branding #flexwrapper > #hamburger {
	flex: 60px 0 0;
	align-self: flex-start;
}

header#branding #flexwrapper > #hamburger > label {
	cursor: pointer;
	transition: 5ms opacity;
}

input#hamburger-cb:checked + div#pagewrapper header#branding #flexwrapper > #hamburger > label {
	opacity: 0;
}

header#branding #flexwrapper > #hamburger > label > span {
	display: block;
	height: 9px;
	margin-bottom: 8px;
	background-color: var(--foreground-color);
}

header#branding #flexwrapper > #hamburger > label > span:last-child {
	margin-bottom: 0;
}

header#branding #flexwrapper > #site-identity {
	flex: 0 1 987px;
}

header#branding #flexwrapper > #site-identity #blog-logo {
	position: relative;
}

header#branding #flexwrapper > #site-identity #blog-logo img {
	display: inline-block;
	max-width: 100%;
}

header#branding #flexwrapper > #site-identity #blog-logo #sz-logo {
	position: absolute;
	top: 0.5%;
	left: 36.5%;
	width: 10.5%;
	height: 43%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(../img/logo/sz1.svg);
	animation: szCycle 3.8s steps(1, end) infinite;
}

@keyframes szCycle {
	0%      { background-image: url(../img/logo/sz1.svg); }
	26.3%   { background-image: url(../img/logo/sz2.svg); }
	31.6%   { background-image: url(../img/logo/sz3.svg); }
	36.8%   { background-image: url(../img/logo/sz4.svg); }
	42.1%   { background-image: url(../img/logo/sz5.svg); }
	47.4%   { background-image: url(../img/logo/sz6.svg); }
	52.6%   { background-image: url(../img/logo/sz7.svg); }
	57.9%   { background-image: url(../img/logo/sz8.svg); }
	63.2%   { background-image: url(../img/logo/sz9.svg); }
	68.4%   { background-image: url(../img/logo/sz10.svg); }
	73.7%   { background-image: url(../img/logo/sz1.svg); }
	100%    { background-image: url(../img/logo/sz1.svg); }
}

header#branding #main-navigation {
	position: fixed;
	top: 0;
	left: 100vw;
	width: 750px;
	height: 100%;
	background-color: var(--red-color);
	color: var(--white-color);
}

header#branding #main-navigation > .inside {
	position: sticky;
	top: 0;
	padding: 50px;
}

header#branding #main-navigation label {
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: 140px;
	position: relative;
	left: 100%;
	top: 0;
	transform: translateX(-100%);
	cursor: pointer;
}

header#branding #main-navigation label > span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 9px;
	background-color: var(--white-color);
	transform-origin: 50% 50%;
}

header#branding #main-navigation label > span:first-child {
	transform: translate(-50%,-50%) rotate(45deg);
}

header#branding #main-navigation label > span:last-child {
	transform: translate(-50%,-50%) rotate(-45deg);
}

header#branding #main-navigation nav {
	margin-bottom: 140px;
}

header#branding #main-navigation nav > ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
	border-top: 3px solid var(--white-color);
}

header#branding #main-navigation nav > ul > li {
	padding: 0;
	margin: 0;
	border-bottom: 3px solid var(--white-color);
}

header#branding #main-navigation nav > ul > li > a {
	display: inline-block;
	padding: 30px 0;
	font-size: 40px;
	color: var(--white-color);
	text-transform: uppercase;
}

header#branding #main-navigation .widget {
	margin-bottom: 90px;
}

header#branding #main-navigation a {
	color: var(--white-color);
}

main nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

main nav ul li {
	display: block;
	border-top: 7px solid var(--foreground-color);
	padding: 30px 0 30px 20%;
	font-size: 55px;
}

main nav ul li:last-child {
	border-bottom: 7px solid var(--foreground-color); 
}

header .widget, footer#further .widget {
	font-family: 'GoodMono';
	font-size: 16px;
}

.widget nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.widget nav ul li {
	display: inline-block;
	padding: 0;
	margin: 0 10px;
}
.widget nav ul li:first-child {
	margin-left: 0;
}
.widget nav ul li:last-child {
	margin-right: 0;
}

.inside {
	padding: 10px 0;
}
.wrapper {
	width: 100%;
	max-width: 1226px;
	margin: 0 auto;
}
.wrapper > .inside {
	padding: 0;
}

.align-left {
	text-align: left;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.alignwide {
	margin-left: -54px;
	margin-right: -54px;
}
.alignfull {
	margin-left: calc(((100vw - 100%) / 2) * -1);
	margin-right: calc(((100vw - 100%) / 2) * -1);
}

p {
	margin: 1.2em 0;
}

p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}
.mono {
	font-family: 'GoodMono';
	font-size: 20px;
}

a {
	color: var(--red-color);
	transition: .5s opacity;
	text-decoration: none;
}

a:hover {
	opacity: .6;
}

a#chatButton {
	display: inline-block;
	width: 72px;
	height: 72px;
	position: sticky;
	left: 100%;
	bottom: 50px; 
}

a#chatButton:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../img/chatbutton.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}

h1 {
	font-size: 65px;
}

h2 {
	font-size: 40px;
}

h3 {
	font-size: 28px;
}

.wp-block-separator {
	border: none;
	border-top: 3px solid var(--foreground-color)!important;
	margin: 54px 0!important;
}
.wp-block-gallery.is-layout-flex {
	display: flex;
	flex-flow: row wrap;
}
.wp-block-site-logo a, .wp-block-site-logo img {
	width: 100%;
}
.wp-block-quote {
	font-family: 'GoodMono';
	font-size: 45px;
	font-style: italic;
}
.wp-block-quote > cite {
	font-size: 15px;
	font-style: normal;
}
.wp-block-columns {
	gap: 20px;
}
.wp-block-column *:first-child {
	margin-top: 0;
}
.wp-block-column *:last-child {
	margin-bottom: 0;
}

.studiogallery {
	gap: 107px!important;
}
.studiogallery > * {
	width: calc(50% - 107px / 2)!important;
}

.logogallery > .wp-block-image > img {
	max-height: 50px;
}

.flex-flow-column {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

.portfolio-navigation {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin-bottom: -80px;
	margin-top: 80px;
}
.portfolio-navigation > div {
	flex: 33.3333% 0 0;
}
.portfolio-navigation > .nav-previous {
	text-align: left;
}
.portfolio-navigation > .nav-overview {
	text-align: center;
}
.portfolio-navigation > .nav-next {
	text-align: right;
}

.portfolio-navigation a {
	font-family: 'GoodMono';
	font-size: 16px;
	color: var(--red-color);
	transition: .5s color;
}
.portfolio-navigation a:hover {
	color: var(--foreground-color);
	opacity: 1;
}

section.portfolio-content + section.portfolio {
	margin-top: 54px;
	padding-top: 0px;
	border-top: 3px solid var(--foreground-color);
}

ul.portfolio-grid {  width:100%;
	max-width: 1120px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 107px;
	list-style: none;
	padding: 0;
	margin: 107px 0 0 0;
}

ul.portfolio-grid li.portfolio-item {
	height: 403px;
}  
ul.portfolio-grid li.portfolio-item:nth-of-type(18n+3), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+7), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+14) {
	height: calc(100% - 107px);
}

ul.portfolio-grid li.portfolio-item:nth-of-type(18n+4), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+6), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+10), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+11), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+17), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+18) {
	height: 324px;
}

ul.portfolio-grid li.portfolio-item:nth-of-type(18n+5), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+12), ul.portfolio-grid li.portfolio-item:nth-of-type(18n+16) {
	height: calc(100% - 54px);
}

ul.portfolio-grid li.portfolio-item a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

ul.portfolio-grid li.portfolio-item a > span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	text-align: center;
	font-size: 40px;
	transform: translate(-50%,-50%);
}

nav.pagination {
	text-align: center;
	margin-top: 54px;
	font-family: 'GoodMono';
	font-size: 16px;
}

nav.pagination > * {
	margin-right: 22px;
}

footer {
	padding: 27px 0 54px 0;
	margin-top: 107px;
	position: relative;
	border-top: 3px solid var(--foreground-color);
}

footer#additional + footer#further {
	margin-top: 0;
}

footer a {
	color: var(--foreground-color);
}