html{
	width:100%;
	height:100%;
	background: url("img/ricepaper2.png");
	background-size: 242px 242px;
	font-family:Lato;
	font-weight:200;
	font-size:24px;
	overflow-y:scroll;
	text-transform:lowercase;
}
body{
  min-height:100%;
  display:flex;
  box-shadow: inset 0 0 5em rgba(120,80,0,0.25);
}
main{	
	width: 90%;
	max-width:1200px;
	min-height:100%;
	margin: auto;
	display:flex;
}
.block{
	display:block;
}
#sigtrygg{
	position:fixed;
	background: url("img/sigtrygg.png");
	opacity:0.15;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:50% 50%;
	width:100%;
	height: 90%;
	margin:auto;
	top:5%;
	z-index:-1;
	transition:opacity 1s;
}
#sigtrygg.highop{
	transition:none;
	opacity:0.7;
}
.links{
	margin:auto;
	width:100%;
	font-size:2em;
}
.links a:link{
	border:none;
}
a:link{
	position:relative;
	text-decoration:none;
	cursor:pointer;
	color:black;
	outline:none;
	border-bottom:1px solid rgba(0,0,0,0.2);
	box-sizing:border-box;
}
a:hover, .info_body a:hover{
	top:-1px;
	left:-1px;
	border-bottom:1px solid rgba(0,0,0,0.25);
	color:black;
}
a:active, a:focus{
	top:1px;
	left:1px;
	color:black;
}
a:visited{
	color:black;
}
a[target]{
	margin-left:0.75em;
}
a[target]:before{
	font-family:Fontawesome;
	content:"\f08e";
	margin-left:-1.5em;
	padding-right:0.5em;
	font-size:0.5em;
	vertical-align:middle;
	opacity:0.2;
}
a[target]:hover:before{
	opacity:0.4;
}
.info_body a[target]{
	margin:0;
}
.info_body a[target]:before {
	content:"";
	margin:0;
	padding:0;
}
.links li{
	position:relative;
	height:1.1em;
}
.links li a{
	display:block;
	position:relative;
	height:1em;
	width:100%;
}
.links li a:hover{
	border:none;
	top:0;
	left:0;
}
.links li a span{
	position:absolute;
	transition:opacity 0.4s;
	text-align:center;
	width:100%;
	top:0;
	left:0;
}
.links a .old, article h1, section.machine h2{
	font-family:MedievalSharp;
	text-transform:lowercase;
	opacity:0.75;
}
section.machine{
	width:100%;
	position:relative;
	margin-top:2em;
}
section.machine:last-child{
	margin-bottom:2em;
}
section.machine img{
	position:relative;
	width:100%;
	max-width:1200px;
	opacity:0.8;
	transition:opacity 1s;
	border-radius:5px;
}
section.machine h2{
	font-size:1.5em;
}
section.machine h3, p.moreAboutThis{
	font-size:0.5em;
	opacity:0.3;
	font-weight:300;
}
p.moreAboutThis, .article_body p.moreAboutThis{
	width:100%;
	text-align:right;
}
section.machine h3, p.moreAboutThis{
	border:none;
}
section.machine div.info{
	text-align:right;
	position:absolute;
	bottom:1em;
	right:1em;
}
section.machine div.info div.info_body{
	max-height:0;
	transition:max-height 2s;
	overflow:hidden;
	text-align:justify;
	text-align-last:right;
}
section.machine div.info div.info_body p{
	margin:0.25em 0;
}
section.machine div.info div.info_body p:last-child{
	margin-top:0.75em;
}
section.machine:hover > img{
	opacity:0.2;
}
section.machine:hover > div.info > div.info_body{
	max-height:10em;
}
article{
	padding:5em 0;
	width:100%;
}
article.simple{
	padding:0;
	text-align:center;
}
article.simple iframe{
	min-width:350px;
	opacity:0.8; 
	height:600px;
}
article .article_body iframe{
	margin:0.5em 0;
}
article:after{
	content:'';
	clear:both;
}
article h1{
	font-size:1.5em;
	margin-bottom:0.75em;
}
div.article_body p{
	text-align:justify;
	margin-bottom:0.75em;
}
article.simple p{
	text-align:center;
}
article img{
	border-radius:5px;
	width:100%;
	margin-bottom:0.75em;
}
article .articleinfo{
	width:100%;
	text-align:right;
	font-size:0.5em;
	font-weight:300;
	opacity:0.4;
	margin-top:-1em;
	margin-bottom:1em;
}
article time:before, article span.catlink:before{
	color:grey;
}
article time:first-child:before{
	content:"posted: ";
}
article time span{
	color:grey;
	font-size:0.8em;
	vertical-align:baseline;
	margin-left:0.25em;
}
article span.catlink:before{
	content: "category: ";
	margin-left:1em;
}
article ul{
	list-style: none;
	padding: 0;
}
article ul li{
	text-align:justify;
	padding-left: 0.75em;
	margin-bottom:0.5em;
}
article ul li strong:first-child{
	opacity: 0.3;
}
article ul li:last-child{
	margin-bottom:0.75em;
}
article ul li:before {
	content: "\f105";
	font-family: Fontawesome;
	display: inline-block;
	margin-left: -1em;
	width: 1em;
	opacity:0.3;
	font-size:0.5em;
	vertical-align:35%;
}
blockquote{
	font-weight:300;
	opacity:0.2;
	margin:1em 0.5em;
	margin-right:0;
	padding-left:1em;
	border-left:2px solid grey;
}
blockquote p:first-child:before, blockquote p:nth-last-child(2):after{
		font-family: Fontawesome;
		font-size:0.4em;
		vertical-align:text-top;
		opacity:0.4;
}	
blockquote p:first-child:before{
	content:"\f10d";
	margin-left:-1em;
}
blockquote p:nth-last-child(2):after{
	content:"\f10e";
}
blockquote p:last-child{
	text-align:right;
	font-size:0.5em;
}
.comments{
	margin-top:2em;
	position:relative;
	min-height:3em;
	display:table;
	width:100%;
}
.load_com{
	width:100%;
	text-align:center;
	display:none;
}
.fa-spin{
	opacity:0.1;
	margin-left: 0.275em;
	animation: fa-spin 4s infinite linear;
	vertical-align:middle;
}
.load_com span{
	position: absolute;
	top: 1.375em;
	font-size: 0.75em;
}
.comment{
	width:100%;	
	display:table;
	padding-bottom:0.75em;
	margin-bottom:0.75em;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.comment:last-child{
	padding:0;
	margin:0;
	border:0;
}
.comment div{
	font-size:0.75em;
	display:table-cell;
	width:20%;
}
.comment .info{
	font-weight:300;
}
.com_link{
	font-size:0.75em;
	font-weight:300;	
	vertical-align:baseline;
}
.comment .info a, .com_link{
	opacity:0.5;
}
.comment .info a:hover, .com_link:hover{
	opacity:0.75;
}
.comment .info time{
	font-size:0.5em;
	opacity:0.5;
}
.comment .body{
	width:80%;
}
.comment .in{
	font-size:1em;
	opacity:1;
	padding:0 0.25em;
}
.light{
	opacity:0.5;
}
sup{
	vertical-align: super;
    font-size: 0.5em;
}
sub{
    vertical-align: baseline;
    font-size: 0.5em;
}
strong{
	font-family:MedievalSharp;
	text-transform:lowercase;
	opacity:0.75;
}
em{
	font-weight:300;
	opacity:0.75;
}
body > footer{
	position:fixed;
	bottom:0;
	left:0;
	font-weight:300;
	padding:0.75em;
	opacity:0.6;
}
#contact{
	font-size:1.25em;
	padding:0;
}
input, textarea, button{
	width: 100%;
	font-family: Lato;
	font-size: 0.4em;
	margin-bottom: 0.5em;
	padding: 0.2em 0.4em;
	border-radius: 0.2em;
	border: 1px solid grey;
	background: white;
	opacity:0.5;
	text-align:center;
	display:block;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
	box-sizing:border-box;
	text-transform:lowercase;
	position:relative;
}
input.third{
	display:inline;
	padding-right:1em;
	width:32%;
	margin-right:2%;
}
input.third:nth-child(3){
	margin-right:0;
}
button.third{
	width:32%;
	float:right;
}
button{
	cursor:pointer;
}
button:hover{
	position:relative;
	top:-1px;
	left:-1px;
}
button:focus, button:active{
	top:1px;
	left:1px;
}
textarea{
	resize: vertical; 
	min-height:6.3em;
}
textarea::placeholder{
	line-height:5.5em;
}
input:hover, input:focus, textarea:hover, textarea:focus{
	opacity:0.75;
}
.comment.in div{
	display:inline;
}
.grecaptcha-badge, .g-recaptcha{	
	opacity:0.5;
	filter:grayscale(100%);
}
.grecaptcha-badge:hover, .g-recaptcha:hover{
	opacity:1;
}
label.error {
    position: absolute;
    top: -2em;
    display: inline;
    font-size: 0.5em;
    color: crimson;
    font-weight: 500;
}
i.fa{
	font-size: 0.5em;
	padding: 0 0.25em;
	opacity: 0.3;
	vertical-align: middle;
}
@media screen and (max-width: 599px){
	section.machine{
		font-size:0.8em;
	}
	section.machine div.info{
		left:1em;
	}
}
@media screen and (min-width: 600px){
	section.machine div.info{
		width:50%;
	}
}
@media screen and (max-width: 999px){
	html{
		overflow-x: hidden;
	}
	.links li{
		height:1.75em;
	}
	.links a .new{
		font-size:0.75em;
		margin-top:1em;
	}
	body{
		position:relative;
	}
	body > footer{
		position:absolute;
	}
	/*main:not(#main_home)+footer{*/
	main+footer{
		width:100%;
		text-align:center;
	}
	#sigtrygg ~ main+footer{
		width:auto;
	}
}
@media screen and (min-width: 1000px){
	html{
		background-size: 364px 364px;
	}
	body{
		font-size:30px;
	}
	article .articleinfo, body > footer{
		font-size:0.45em;
	}
	article img{
		opacity:0.8;
		filter:grayscale(50%);
		transition:opacity 1s, filter 1s;
	}
	article img:hover{
		opacity:1;
		filter:grayscale(25%);
	}
	main{	
		width: 70%;
	}
	.links{
		width:35%;
	}
	.links a .new{
		margin-top:-.1em;
		opacity:0;
		transition:opacity 0.6s;
	}
	.links a:hover .new{
		opacity:1;
	}
	.links a:hover .old{
		opacity:0;
	}
	article.simple iframe{
		width:600px;
	}
}
@media screen and (min-width: 1200px){
	html{
		background-size: 485px 485px;
	}
	body{
		font-size:36px;
	}
	article .articleinfo, body > footer{
		font-size:0.4em;
	}
	main{	
		width: 80%;
	}
}
@media screen and (min-width: 1600px){
	body{
		font-size:42px;
	}
	article .articleinfo, body > footer{
		font-size:0.35em;
	}
	main{	
		width: 90%;
	}
}