@import "/typsnitt.css";
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
/*  --huvud-fot-bakgrundsfärg: #68b;*/
  --huvud-fot-bakgrundsfärg: rgb(0,0,0);
  --huvud-fot-textfärg: white;
	--huvud-aktiv-textfärg:#8cf;
	--bröd-bakgrundsfärg:white;
	--bröd-textfärg:#6c6c6c;
}
.pnil {
	--bröd-textfärg:#333;
	--bröd-bakgrundsfärg:#fff;
}



body {
/*	font-family: 'nunito_sans';*/
	font-family:'Roboto';
	font-style:normal;
	font-size:14px;
	color:var(--bröd-textfärg);
	margin:0;
	padding:0;
	line-height: 1.5em;
	letter-spacing:1px;
	
}
* {
	box-sizing: border-box;
}
#grund {
	position:absolute;
	margin:0px;
	top:0;
	right:0;
	bottom:0;
	left:0;
  display: flex;
	flex-direction: column;
	align-items:center;
}
#kropp, #huvud, #fot {
	position:absolute;
	margin:0px;
	padding:0px 5vw;
	width:100%;
}	
#huvud {
	top:0px;
  display: flex;
	justify-content:flex-end;
	align-items:center;
	flex-direction: row;
/*	justify-content:space-evenly;*/
	height:60px;
/*	line-height:60px;*/
}
#kropp {
	top:60px;
	bottom:30px;
	padding:60px 5vw;
	overflow-y:scroll;
	background-color: var(--bröd-bakgrundsfärg);
	color:var(--bröd-textfärg);
}
#fot{
	height:30px; 
	bottom:0px;
	font-size:80%;
	line-height:30px;
	
}

#huvud, #fot{	
	background-color:var(--huvud-fot-bakgrundsfärg);
	color:var(--huvud-fot-textfärg);
}
.zoombild {
	cursor:pointer;
}
.insta {
	height: 2em;
	margin-bottom:-0.7em;
}
.instalogga {
	margin-bottom:-0.6em;
	display: inline-block;
	width: 1.8em;
	height: 1.8em;
	background-color: var(--bröd-textfärg);
	mask: url(/ui_bilder/instagram.svg);
	-webkit-mask: url(/ui_bilder/instagram.svg);
	mask-size: cover;
	-webkit-mask-size: cover;
}
#kropp h1:first-of-type {
	font-size:120%;
	margin: 15px 0;
}

h1 {
	margin: 13px 0 6px;
	font-size:100%;
	font-weight:700;
}

p {
	margin: 5px 0 5px;
/*	font-size:100%;*/
/*	font-weight:700;*/
}

#huvud h1 {
	line-height: 1.6em;
/*	font-family: 'Josefin Slab';*/
	font-family: 'Roboto';
	letter-spacing: 0.4vw;
	margin: 0;
	flex: 0 1 content;
	color:var(--huvud-aktiv-textfärg);
	text-transform:uppercase;
	font-size: 110%;
	display: inline-block;
/*	opacity: 0.8;*/
	letter-spacing:5px;
	padding: 0 2vw;
}
/*#huvud h1:nth-child(1n+3)::before {
	color:#fff;
	content:"｜";
	margin:0 10px;
}
*/
#huvud h1:nth-child(1n+3) {
	border-left:2px solid #fff;;
}
#huvud h1:first-child {
	flex:0 1 100%;
	padding:0;
}
#huvud h1:last-child {
	padding-right:0;
}
#huvud a:link, #huvud a:visited {
	color:var(--huvud-fot-textfärg);
	font-weight:700;
/*	font-weight:normal;*/
}

.galleri {
  display: flex;
	flex-direction: row;
	flex-flow:wrap;
	align-items:baseline; /*flex-end baseline center*/
	justify-content:flex-start;/*flex-start space-between center*/
	margin:-30px -2.5vw;
	
}
.bildruta, .galleri>p>img {
/*	max-width:300px;*/
	min-width:200px;
	margin-bottom:20px;
	margin:30px 2.5vw;
	
/*	margin-right:10px;*/
/*	padding:5px;*/
	flex: 0 1 auto;
/*	border:1px solid #f8f8f8;*/
}
.bildruta p, .bildruta h1 {
	margin:8px 0;
	text-align:center;
	
}
.bildruta *:first-child {
	margin:0;
}
.bildruta p  {
	line-height:1.2em;
	font-size:80%;	
}
.bildruta h1, #kropp .bildruta h1:first-of-type{
/*	font-family: 'Josefin Slab';*/
	font-size:90%;
	letter-spacing:1px;
	text-transform:uppercase;
}

.galleri img {
	max-width:300px;
	max-height:300px;
}
.galleri .kvadrat {
	max-width:240px;
	max-height:240px;
}


.vflex{
	float:left;
	margin-right:4vw;
/*	height:600px;*/
}
.vflex img{
	max-width:30vw;
}
@media only screen and (min-width: 600px) {
	.vflex{
		min-height:80vh;
	}
}
	

/* STORBILDVISARE */
#bbas, #bbas::after {
	top:0;
	left: 0;
	width:100%;
	height:100%;
}

#bbas {
	display:flex;
	position:fixed;
	pointer-events:none;
	opacity:0;
	filter:opacity(0%);
	justify-content:center;
	align-items:center;
}
#bbas::after {
	content: ''; 
	background-color: #888; 
	filter:opacity(80%);
	opacity: 0.8; 
	position: absolute; 
	z-index: -1;
}
#storbild {
	display:block;
	flex: 0 1 auto;
	max-height:80vh;
	max-width:80vw;
}

textarea,input { 
	width:50%; 
	font-family: 'Courier new', monospace; 
	font-size:80%;  
/*	font-weight:bold;*/
	padding:5px; 
	padding-bottom:3px;
}
textarea { height:150px; }

/* LÄNKAR */
a img { border:none;}
a:link, a:visited {
	color:inherit;
	text-decoration:none;
	font-weight:bold;
	color:#46e;
}
.bold { font-weight:bold; }
.köp {
	 font-weight:normal; 
	 font-size:80%;
	 cursor: pointer;
 }
.halvbredd { width:50%; }
.röd { color:red; }
.dold {display:none;}

.en{
	font-style:italic;
	font-size:90%;
}
.mindre { font-size:80%; }
/* EDIT */
.editobj table {
	width:100%;
}
.editobj td{
	width:85%;
}
.editobj td:first-child {
	text-align: right;
	width:15%;
}
.editobj img {
	max-width:100%;
	max-height:300px;
}
.editobj input[type='checkbox'] {
	width:auto;
}
.editobj input {
	width:100%;
}