* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	color: black;
}

body {

}

.backgroundChange {
	-webkit-animation: myfirst 20s infinite;
}

.aboutcontainer {
	position: fixed;
	width: 100%;
	max-width: 440px;
	padding: 0 40px;
	margin-top: 60px;
}

.dim {
	opacity: 1;
}

.description {
	position: relative;
	/* font-family: georgia, serif; */
	font-family: "ratio-1","ratio-2",sans-serif;
	font-weight: 700;
	font-size: 28px;
	margin-top: 24px;
	margin-bottom: 24px;
	line-height: 36px;
}

.description a {
	text-decoration: none;
	border-bottom: 1px solid black;
	color: black;
}

/*
.description a:hover {
	color: red;
	border-bottom: 1px solid red;
}
*/

a.title {
	position: relative;
	font-family: "ratio-1","ratio-2",sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #333;
	text-decoration: none;
}

ul.footerlinks{
	font-family: "ratio-1","ratio-2",sans-serif;
	font-weight: 700;
	font-size: 14px;
	position: relative;
	list-style: none;
	float: left;
	padding: 0;
}

ul.footerlinks li{
	float: left;
	margin-right: 20px;
}

ul.footerlinks li a{
	text-decoration: none;
	color: #929292;
}

ul.footerlinks li a.selected {
	text-decoration: line-through;
}

/* content */


a.closebutton {
	display: block;
	cursor: url('/i/close.png'), default;
}

a.visibleclose {
	background-image: url('/i/close.png');
	display: none;
	position: fixed;
	left: 8px;
	top: 10px;
	width: 16px;
	height: 16px;
	background-size: 16px 16px;
}


a #content ul.worklist li.work1 .workdesc{
	color: #333;
}


#content {
	display: block;
	padding: 36px;
	position: relative;
	z-index: 100;
}

/*
.closelink {
	position: fixed;
	z-index: 1000;
	bottom: 20px;
	width: 32px;
	height: 32px;
	background-image: url('/i/close_2x.png');
	cursor: pointer;
}
*/



.workList {
	padding: 0;
	margin: 0 auto;
	width: calc(100vw - 72px);
	list-style: none;
	text-align: center;
}

.work {
	margin: 0 auto 36px;
	position: relative;
}

.work1 {
	margin: 0 auto 50px;
	position: relative;
}

.work1 img{
	max-height: calc(100vmin - 150px);
	height: auto;
	width: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.workdesc {
	padding-top: 10px;
	font-family: "ratio-1","ratio-2",sans-serif;
	font-size: 14px;
}

.worktitle {
	font-weight: 700;
}

.projectlink {
	font-weight: 700;
	color: #929292;
	margin-top: 6px;
	display: inline-block
}

.work img {
	max-height: calc(100vmin - 88px);
	height: auto;
	width: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.contactcontainer {
	position: relative;
	list-style: none;
	margin-top: 20px;
	display: inline-block;
	width: 400px;
}

.contactcontainer li {
	display: block;
	font-family: "ratio-1","ratio-2",sans-serif;
	padding-bottom: 2px;	
}

.contactcontainer li a{
	text-decoration: none;
	color: #333;
}

/* animations */

/*
@-webkit-keyframes myfirst 
	{
	0%   {background: white;}
	20%  {background: #f7fbfc;}
	40%  {background: #f5f7f3;}
	60%  {background: #fef8f8;}
	80%  {background: #fbfafc;}
	100% {background: white;}
}
*/

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
	   only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {

	a.closebutton {
		cursor: url('/i/close_2x.png'), default;
	}
	a.visibleclose {
		background-image: url('/i/close_2x.png');
	}

}

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

	.dim {
		opacity: 1;
	}
	
	a.closebutton {
		pointer-events: none;	
	}
	
	a.visibleclose {
		display: block;
	}

}

.cf:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .cf {
	display: block;
}

* html .cf {
	height: 1%;
}