@charset "UTF-8";
/* CSS Document */
/** {	border: 1px solid red;}*/
@keyframes fade {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes fade {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadein {
	0% {
		opacity: 1;
		transform: none;
	}
	100% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
}
@-webkit-keyframes fadein {
	0% {
		opacity: 1;
		transform: none;
	}
	100% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
}
@keyframes fadefull {
	0% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
	15% {
		opacity: 0.95;
		filter: grayscale(0%);
	}
	35% {
		opacity: 0.95;
		filter: grayscale(0%);
	}
	50% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
	100% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
}
@-webkit-keyframes fadefull {
	0% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
	15% {
		opacity: 0.95;
		filter: grayscale(0%);
	}
	35% {
		opacity: 0.95;
		filter: grayscale(0%);
	}
	50% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
	100% {
		opacity: 0.15;
		filter: grayscale(100%);
	}
}
@keyframes stamphead {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
		transform-origin: 50% 50%;
		transform: scale(8) rotate(-30deg);
		transition: all .3s cubic-bezier(0.6, 0.004, 0.98, 0.035);
	}
	100% {
			opacity: 1;
			transform: scale(1);
			transform: rotate(0deg);
	}
}
@-webkit-keyframes stamphead {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0;
		transform-origin: 50% 50%;
		transform: scale(8) rotate(-30deg);
		transition: all .3s cubic-bezier(0.6, 0.004, 0.98, 0.035);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		transform: rotate(0deg);
	}
}
html {
	height: 100%;
}
html, body, header, main, footer, div, span, article,h1, h2, h3, h4, h5, h6, p, a, address, big, code, em, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	box-sizing: border-box;
}
*:before,*:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, menu, nav, section, label {
	display: block;
}
ul {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	padding-inline-start: 0;
}
ol, ul {
	list-style: none;
}
li {
	display: inline-block;
}
.footerprint {
	display: none;
}
/*--------------------------------------------------Reset done--*/

/*------------------------------Basic layout for small screens--*/
/*-------------------------------------------------Main blocks--*/
:root {
	--white: rgb(255,255,255);
	--white-rgb: 255,255,255;
	--bg: rgb(254,254,252);
	--bg-rgb: 254,254,252;
	--grey: rgb(195,195,198);
	--grey-rgb: 195,195,198;
	--black: rgb(0,0,0);
	--black-rgb: 0,0,0;
	--text: rgb(32,28,20);
	--text-rgb: 32,28,20;
	--ltext: rgb(244,245,246);
	--ltext-rgb: 244,245,246;
	--red: rgb(184,50,37);
	--red-rgb: 184,50,37;
	--green: rgb(112,135,81);
	--green-rgb: 112,135,81;
	--glass: rgb(211,237,233);
	--glass-rgb: 211,237,233;
	font-size: 16px;
	line-height: 28px;
}
body {
	position: absolute;
	top: 0;
	left: 0;
	min-height: 100vh;
	min-width: 100vw;
	color: var(--text-colour);
	font-family: dico-typewriter, justus-pro, monospace;
	font-weight: 400;
	text-align: left;
	background-color: var(--bg);
	background-image: url("images/paper_bg.png");
}
header {
	position: absolute;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	top: 0;
	width: 100vw;
	height: 160px;
	margin: 0;
	padding: 50px 40px 0 40px;
	z-index: 100;
	border-top: 9px solid;
	border-image-source: url("images/torn_edge_transparent.png");
	border-image-slice: 100% 0% 0% 0%;
	border-image-repeat: round;
}
header > div {
	position: relative;
	display: block;
}
header > div:nth-child(2) {
	width: 150px;
	text-align: left;
	position: relative;
}
header > div:nth-child(3) {
	width: 0;
	height: 0;
}
header > div:last-child {
	width: 32px;
	height: 32px;
}
main {
	display: flex;
	position: relative;
	top: 0;
	min-height: calc(100vh - 50px);
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-between;
	height: auto;
	padding: 160px 40px 50px 40px; 
	width: 100%; /* lets try 100% */
}
nav {
	height: 0;
	display: none;
}
.full, .thumbs {
	display: block;
	background-color: var(--ltext);
	align-self: center;
	text-align: center;
	overflow: hidden;
}
.full {
	position: relative;
	--widthfull: calc(100vw - 80px);
	--widthpaddall: calc(var(--widthfull) - var(--widthport));
	--widthpaddone: calc(var(--widthpaddall) / 2);
	width: var(--widthfull);
	max-width: 350px;
	height: var(--widthfull);
	max-height: 350px;
	vertical-align: middle;
	margin: 0 0 12vw 0;
	filter: opacity(15%) grayscale(100%);
}
.full:hover, .full:focus {
	filter: opacity(100%);
	animation: none;
}
.one {
	animation: fadefull 12s ease-in 1s infinite;
}
.two {
	animation: fadefull 12s ease-in 4s infinite;
}
.three {
	animation: fadefull 12s ease-in 8s infinite;
}
.four {
	animation: fadefull 12s ease-in 11s infinite;
}
.portfolio {
	background-color: var(--ltext);
}
.thumbs {
	width: 160px;
	height: 160px;
	margin: 0 30px 60px 30px;
}
.portfolio_small {
	box-sizing: border-box;
	position: relative;
	background-color: var(--ltext);
}
.pv {
	width: 100%;
	height: auto;
	top: -15%;
	left: 0;
}
.ph {
	height: 100%;
	width: auto;
	top: 0;
	left: -15%;
}
.sqv {
	width: 100%;
	height: auto;
	top: -5%;
	left: 0;
}
.sqh {
	height: 100%;
	width: auto;
	top: 0;
	left: -5%;
}
.sq {
	height: 100%;
	width: auto;
	top: 0;
	left: 0;
}
div.about {
	position: relative;
	top: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: space-between;
	align-items: flex-start;
	--widthpaddone: calc(var(--widthpaddall) / 2);
	padding: calc(var(--widthpaddone) / 2) calc(var(--widthpaddone) / 2) calc(var(--widthpaddone) / 1.618) calc(var(--widthpaddone) / 2);
	width: var(--widthfull);
	height: auto;
	align-self: center;
	text-align: center;
}
div.about p {
	text-align: left;
	width: 100%;
	max-width: 660px;
}
div.about p > a {
	color: var(--red);
	white-space: nowrap;
}
div.about p > a:hover {
	color: var(--text);
}
div.about img {
	max-width: 200px;
	align-self: flex-end;
	margin-top: calc(0.3rem + 7px);
	margin-left: 5vw;
	background: none;
	-moz-box-shadow: none;
	-webkit--box-shadow: none;
	box-shadow: none;
}
footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	bottom: 0;
	height: 50px;
	width: 100vw;
	padding: 0 40px auto 0;
	font-size: 13px;
	text-align: left;
	vertical-align: top;
	color: var(--text);
}
footer > div:first-child {
	width: calc(100vw - 72px);
	text-align: left;
	vertical-align: top;
}
footer > div:last-child {
	width: 32px;
	height: 50px;
	text-align: right;
}
footer span.line {
	display: block;
	height: 10px;
	font-size: 14px;
	line-height: 5px;
	text-shadow: var(--ltext) -1px -1 1px, var(--white) 1px 0 2px;
}
footer address {
	font-style: normal;
	line-height: 18px;
	margin-left: 40px;
}
/*----------------------------------------------------Headers--*/
h1 {
	display: none;
	
}
h2 {
	position: fixed;
	top: 30vh;
	width: 100vw;
	height: auto;
	padding: 50px 0;
	margin: 0 auto;
	z-index: 140;
	background-color: var(--bg);
	background-image: url("images/paper_bg.png");
	box-shadow: 0 1px 7px 1px rgba(var(--text-rgb),0.2);
	opacity: 0;
	animation: fade 4s 500ms 1 ease-in-out;
}
h2 > span {
	display: block;
	font-family: typeka, chandler-42-regular, dico-typewriter, justus-pro, monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 38px;
	text-align: center;
	margin: 0 auto;
	opacity: 0.15;
	/*filter: blur(1px);*/
}
h4 { /*Overlay header */
	width: calc(100vw - 60px);
	max-width: 700px;
	margin: 50px auto 0 auto;
	font-family: typeka, chandler-42-regular, dico-typewriter, justus-pro, monospace;
	font-size: 28px;
	font-weight: 400;
	line-height: 38px;
	text-align: left;
	color: var(--text);
	text-shadow: var(--ltext) 0 -1px 0, var(--white) -0 1px 3px;
	hanging-punctuation: first;
	letter-spacing: 0.1em;
}
h5 {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
h5 span {
	display: block;
	visibility: hidden;
	position: absolute;
	bottom: 0;
	left: 0;
	height: auto;
	width: 100%;
	padding: 20px 20px 20px 20px;
	font-family: dico-typewriter, justus-pro, monospace;
	font-weight: 300;
	font-size: 14px;
	font-kerning: auto;
	letter-spacing: 0.06em;
	line-height: 22px;
	color: var(--bg);
	background-color: rgba(var(--text-rgb),0.7);
}
h5:hover span {
	visibility: visible;
}
h5:active span {
	visibility: visible;
}

/*-----------------------------------------------SVG styling---*/
p {
	padding-top: 0.3rem;
	padding-bottom: 0.7rem;
}
a {
	text-decoration: none;
	background: none;
}
#top {
	border: none;
}
.name, .gallery, .behance, .pinterest, .back, .icontop {
	display: block;
	position: relative;
}
.gallery, .gallery > img, .behance, .pinterest, .back, .icontop {
	width: 32px;
	height: 32px;
}
.name {
	width: 60vw;
	max-width: 350px;
	height: auto;
	top: -2vw;
	left: 1vw;
	z-index: 102;
}
.name > img.horiz {
	width: 100%;
	height: auto;
	transform: rotate(-3deg);
}
.back {
	margin: 0;
	right: 0;
}
.behance, .behance > img, .pinterest, .pinterest > img {
	display: none;
	width: 0;
	height: 0;
	mix-blend-mode: overlay;
}
.icontop {
	position: fixed;
	bottom: 20px;
	right: 40px;
}
.back {
	transform: rotate(-90deg);
}

.name, .gallery, .back, .icontop {
	filter: drop-shadow(-1px -1px 0px rgba(var(--ltext-rgb),0.5)) drop-shadow(1px 1px 1px var(--white));
}
.gallery > img:hover, .icontop > img:hover {
	opacity: 0.5; 
}

/*--------------------------------------------Overlay Section--*/
.overlay {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	margin-top: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	/*background: rgba(var(--text-rgb),0.98);*/
	background-image: url("images/paper_bg.png");
	opacity: 0;
	transition: opacity 1s;
	display: none; 
	z-index: 9000;
	text-align: center;
}
.overlay:target {
	display: block;
	opacity: 1;
	z-index: 10000;
	overflow-y: scroll;
}
.overlay .border {
	border-top: 9px solid;
	border-image-source: url("images/torn_edge_transparent.png");
	border-image-slice: 100% 0% 0% 0%;
	border-image-repeat: round;
	height: 9px;
	width: 100%;
}
.overlay p {
	box-sizing: border-box;
	position: relative;
	height: auto;
	width: calc(100vw - 60px);
	max-width: 700px;
	margin: 20px auto 0 auto;
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	color: var(--text);
	font-family: dico-typewriter, justus-pro, monospace;
	text-shadow: var(--ltext) 0 -1px 0, var(--white) -0 1px 3px;
}
.overlay hr {
	border: none;
	border-top: 1px solid rgba(var(--text-rgb),0.1);
	width: calc(100vw - 60px);
	max-width: 700px;
}
.overlay img {
	display: block;
	box-sizing: border-box;
	position: relative;
	width: calc(100vw - 60px);
	height: auto;
	margin: 20px 0 25px 0;
	border: none;
}
.overlay img.v {
	max-width: 500px;
}
.overlay img.h {
	max-width: 700px;
}
.overlay a, .overlay img {
	margin-left: auto;
	margin-right: auto;
}
.overlay a > p:last-child {
	margin-bottom: 60px;
}
a.close_button1, a.close_button2 {
	position: absolute;
	top: 38px;
	right: 30px;
	font-family: typeka, chandler-42-regular, dico-typewriter, justus-pro, monospace;
	font-weight: 100;
	font-size: 50px;
	color: var(--text-rgb);
}
a.close_button1, a.close_button2 {
	position: absolute;
	top: 30px;
	right: 30px;
	font-family: typeka, chandler-42-regular, dico-typewriter, justus-pro, monospace;
	font-weight: 100;
	font-size: 30px;
	color: var(--text-rgb);
}
a.close_button1 {
	transform: rotate(-18deg);
}
a.close_button2 {
	transform: rotate(-108deg);
}
a.close_button1::before, a.close_button2::before {
	content: '\5c';
}

/*---------------------------------------------Overlay section end--*/

/*------------------------------------------For min 550px wide--------*/
@media screen and (min-width: 550px) {
	
	/*--Gallery styling--*/
	.full {
		--widthfull: 350px;
	}
}

/*------------------------------------------For min 760px wide--------*/
@media screen and (min-width: 760px) and (min-height: 560px) {
	body {
	}
	header {
		padding: 80px 40px 0 40px;
	}
	header > div:nth-child(3) {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: flex-start;
		width: calc(100vw - 242px);
		margin-right: 5vw;
	}
	.name {
		width: 50vw;
		max-width: 370px;
		height: auto;
		top: -42px;
		left: 160px;
	}
	.name > img.horiz {
		transform: rotate(-5deg);
	}
	.behance, .pinterest, .behance > img, .pinterest > img {
		display: block;
		top: 10px;
		width: 22px;
		height: 22px;
	}
	.behance, .pinterest {
		margin-right: 40px;
	}
	.behance > img, .pinterest > img {
		opacity: 0.5;
	}
	.behance > img:hover, .pinterest > img:hover {
		opacity: 1.0;
	}
	.icontop {
		right: 44px;
}
	main {
		width: 100vw;
		justify-content: space-around;
		padding: 200px 90px 80px 90px;
	}

/*--Navigation for 760px and wider--*/
	nav {
		display: block;
		position: fixed;
		top: 210px;
		width: 70px;
		font-family: typeka, chandler-42-regular, dico-typewriter, justus-pro, mono;
		font-weight: 400;
		font-size: 16px;
		letter-spacing: 0.7em;
		line-height: 44px;
		text-shadow: var(--ltext) 0 -1px 0, var(--white) -0 1px 3px;
	} 
	nav > ul {
		display: flex;
		flex-wrap: nowrap;
	}
	.nav1 > ul {
		flex-direction: row-reverse;
		text-align: right;
	}
	.nav2 > ul {
		flex-direction: row;
		text-align: left;
		margin-left: 0.7em;
	}
	nav li {
		padding: 0;
		min-width: 300px;
	}
	.nav1 {
		left: 0;
		transform: rotate(270deg);
	}
	.nav2 {
		right: 0;
		transform: rotate(90deg);
	}
	nav li > a {
		color: rgba(var(--text-rgb), 1.0);
	}
	nav li > a:visited {
		color: rgba(var(--text-rgb), 1.0);
	}
	nav li > a:hover {
		color: rgba(var(--red-rgb), 0.8);
	}
	nav li > a:active {
		color: rgba(var(--red-rgb), 1.0);
	}
	nav li > a.here {
		color: rgba(var(--red-rgb), 1.0);
	}
	
	/*--Gallery styling--*/ 
	.full {
		margin: 0 20px 5vw 20px;
	}
	div.about {
		--widthfull: calc(100vw - 240px);
		--widthport: calc(100vw - 240px);
	}
	div.about:first-child {
		max-width: 350px;
	}
	h2 {
		position: absolute;
		top: 25px;
		left: 80px;
		width: auto;
		padding: 0;
		margin: 0;
		background: none;
		box-shadow: none;
		animation: none;
		opacity: 1;
		z-index: -1;
}
	h2 > span {
		font-size: 50px;
		line-height: 50px;
		text-align: left;
		margin: 0;
		opacity: 0.05;
}
	.overlay {
		/*padding: 50px;*/
}
	.overlay img {
		width: calc(100vw - 100px);
}

/*------------------------------------------For min 850px wide--------*/
@media screen and (min-width: 850px) {
/*--Gallery styling--*/
	.full {
		--widthfull: 400px;
		--widthport: 400px;
	}
	.overlay img.v {
		max-width: 700px;
	}
	.overlay img.h {
		max-width: 1000px;
	}
	header > div:nth-child(3) {
		margin-right: 7vw;
	}
}

/*------------------------------------------For min 1919px wide--------*/
@media screen and (min-width: 1919px) {

/*--Index gallery limitation to 1759px--*/
	main.index {
		--widthpadmain: calc(100vw - 1759px);
		--widthpad1: calc(var(--widthpadmain) / 2);
	}
	header > div:nth-child(3) {
		margin-right: 10vw;
	}
}