.tags
	{
	display: block;
	position: relative;
	float: none;
	max-width: 520px;
	margin: 3% 0;
	padding: 0;
	}
	
	@media screen and (max-width: 560px)
		{ .tags { margin: 5% 0 2% 0; } }	
	
.tags p
	{
	font-family: roboto, helvetica, arial, sans-serif;
	font-size: 13px;
	line-height: normal;
	letter-spacing: normal;
	display: inline-block;
	background: #333333;
	color: #808080;
	padding: 0.8% 1.8%;
	margin: 2% 1%;
	/* border-radius: 5px; */
	}
	
.tags p:hover { background: #009900; }	

	@media screen and (max-width: 1200px)
		{ tags p { font-size: 13px; } }		
	
	@media screen and (max-width: 560px)
		{ tags p { font-size: 11.5px; padding: 3px 2% 3px 2%; /* border-radius: 4px; */ } }
	
.material-icons.tags-ikon
	{
	font-size: 15px;
	position: relative;
	float: left;
	top: 0;
	left: -2px;
	color: #808080;
	margin: 1px 2px -1px 0;
	padding: 0;
	}
	
	@media screen and (max-width: 1200px)
		{ .material-icons.tags-ikon { } }

	@media screen and (max-width: 800px)
		{ .material-icons.tags-ikon { font-size: 15px; top: 0; left: -2px; margin: 0 4px 0 0; } }

	@media screen and (max-width: 560px)
		{ .material-icons.tags-ikon { font-size: 14px; top: 0; left: -4px; margin: 0 4px 0 0; } }
		
	@media screen and (max-width: 560px)
		{ .material-icons.tags-ikon { font-size: 13px; top: 2px; left: 0; margin: 0 3px 0 0; } }
		
.album-tags-tn
	{
	display: inline-block;
	width: 15%;
	height: auto;
	max-width: 520px;
	vertical-align: middle;
	margin: 4px;
	padding: 0;
	}
	
	@media screen and (max-width: 1200px)
		{ .album-tags-tn { width: 23%; } }			

	@media screen and (max-width: 560px)
		{ .album-tags-tn { width: 31%; margin: 1px; } }
		
.album-tags-tn-2
	{
	width: 100%;
	max-width: 520px;
	height: auto;
	position: relative;
	text-align: center;
	margin: 0;
	padding: 0;
	}

.album-tags-tn-2 img
	{
	border: 1px solid transparent;
	width: 100%;
	max-width: 518px;
	height: auto;
	margin: 0;
	padding: 0;
	}
	
.album-tags-tn-2-l img
	{	
	border: 1px solid transparent;
	width: 100%;
	max-width: 518px;
	height: auto;
	max-height: 100px;
	margin: 0;
	padding: 0;
	}

.album-tags-tn-2:hover img
	{
	opacity: 1;
	filter: brightness(105%);
	/* filter: contrast(95%); */
	}	
	
/* info */

.tags-info
	{
	display: block;
	position: relative;
	text-align: center;
	margin: 0 0 2em 0;
	padding: 0;
	}	

.tags-info p
	{
	font-family: arvo, roboto, helvetica, arial, sans-serif;
	font-size: 1.06em;
	font-weight: 700;
	line-height: normal;
	color: #808080;
	background: #333333;
	display: inline-block;
	padding: 0.7% 0.8% 0.4% 0.8%;
	margin: 0.6% 0.6%;
	/* border-radius: 6px; */
	}

.tags-info p:hover { background: #009900; color: #ffffff; }

	@media screen and (max-width: 1200px)
		{ .tags-info p { font-size: 0.95em; } }	

	@media screen and (max-width: 400px)
		{ .tags-info p { font-size: 0.9em; padding: 1% 2%; /* border-radius: 5px; */ } }

.material-icons.tags-info-ikon
	{
	font-size: 22px;
	position: relative;
	float: left;
	top: -2px;
	left: -3px;
	color: #808080;
	margin: 0 3px 0 0;
	padding: 1px;
	}
	
	@media screen and (max-width: 1200px)
		{ .material-icons.tags-info-ikon { font-size: 24px; top: 1px; left: -2px; margin: 0 3px 0 0; } }

	@media screen and (max-width: 800px)
		{ .material-icons.tags-info-ikon { font-size: 20px; top: 1px; left: -2px; margin: 0 3px 0 0; } }

	@media screen and (max-width: 740px)
		{ .material-icons.tags-info-ikon { font-size: 17px; top: 1px; left: -4px; margin: 0 3px 0 0; } }
		
	@media screen and (max-width: 560px)
		{ .material-icons.tags-info-ikon { font-size: 16px; top: 2px; left: 0; margin: 0 3px 0 0; } }
		
/* bildtext */

.tags-text
	{
	color: #4b4b4b;
	margin: 0 2px 2px 0;
	padding: 0;
	}
	
.tags-text:hover { filter: none; }
		
.vit-bubbla
	{
	background-image: linear-gradient(0deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
	/* border-radius: 4px; */
	padding: 3px 7px 3px 4px;
	margin: 8px 4px 0 1px;
	}
	
	/*
	@media screen and (max-width: 740px)
		{ .vit-bubbla { padding: 3px 7px 2px 5px; } }	
	*/
	
.svart-bubbla
	{
	background-image: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4));
	/* border-radius: 4px; */
	padding: 4px 8px 4px 4px;
	margin: 8px 4px 0 1px;
	}
	
	/*
	@media screen and (max-width: 740px)
		{ .svart-bubbla { padding: 3px 7px 2px 5px; } }	
	*/
		
.vit-bubbla-enhance
	{
	display: inline-block;
	background-image: linear-gradient(0deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5));
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	}	
	
.material-icons.tags-text-ikon
	{
	font-size: 11px;
	position: relative;
	top: 1px;
	left: 0;
	margin: 0 3px 0 0;
	padding: 1px;
	}
	
	@media screen and (max-width: 1200px)
		{ .material-icons.tags-text-ikon { font-size: 12px; top: 1px; left: 0; margin: 0 3px 0 0; } }

	@media screen and (max-width: 800px)
		{ .material-icons.tags-text-ikon { font-size: 12px; top: 1px; left: 0; margin: 0 3px 0 0; } }
		
	@media screen and (max-width: 560px)
		{ .material-icons.tags-text-ikon { font-size: 11px; top: 1px; left: 0; margin: 0 3px 0 0; } }	
		
.morkgra { color: #5a5a5a; }
.ljusgra { color: #999999; } /* b3b3b3 */

.tags-bild-block
	{	
	width: 100%;
	float: left;
	margin: 16px 0 0 0;
	}
	
	@media screen and (max-width: 740px)
		{ .tags-bild-block { margin: 0 0 4px 0; } }		

/* bild */

.tags-bild
	{
	display: block;
	position: relative;
	width: 98%;
	height: auto;
	float: left;
	/*max-width: 800px;*/	/* synk med maxbredd på bild */
	text-align: left;
	font-family: roboto, helvetica, arial, sans-serif;
	font-size: 13px;
	margin: 8px 0 0 0;
	top: 10px;
	padding: 0;
	overflow: visible;
	}
	
	@media screen and (max-width: 740px)
		{ .tags-bild { font-size: 11.5px; margin: 8px 0 0 3%; top: 8px; } }	
		
.tags-bild-v2
	{
	display: block;
	position: relative;
	width: 98%;
	height: auto;
	float: left;
	text-align: left;
	font-family: roboto, helvetica, arial, sans-serif;
	font-size: 13px;
	margin: 0;
	top: 0;
	padding: 0;
	overflow: visible;
	}
	
	@media screen and (max-width: 740px)
		{ .tags-bild-v2 { font-size: 11.5px; margin: 0; padding: 0; top: 0; } }	

/* översikt	*/

.tags-oversikt { display: block; position: relative; margin: 0; padding: 0; }	

.tags-oversikt p
	{
	display: inline-block;
	background: #ededed;
	position: relative;
	width: auto;
	height: auto;
	font-family: arvo, helvetica, arial, sans-serif;
	font-size: 22px;
	line-height: normal;
	letter-spacing: normal;
	font-weight: 400;
	/* color: #333333; */
	color: #808080;
	padding: 0.6% 1%;
	margin: 0.6% 0.6%;
	/* border-radius: 8px; */
	}
	
.tags-oversikt p:hover { background: #009900; color: #ffffff; }		

	@media screen and (max-width: 1200px)
		{ .tags-oversikt p { font-size: 20px; } }	

	@media screen and (max-width: 800px)
		{ .tags-oversikt p { font-size: 18px; padding: 1% 2%; /* border-radius: 5px; */ } }		
	
	/*
	@media screen and (max-width: 560px)
		{ .tags-oversikt p { font-size: 17px; padding: 1% 2%; border-radius: 5px; } }
	*/		

	@media screen and (max-width: 560px)
		{ .tags-oversikt p { font-size: 17px; padding: 1% 2%; margin: 1.5% 0.9%; } }	

.material-icons.tags-oversikt-ikon
	{
	display: inline-block;
	position: relative;
	font-size: 20px;
	float: left;
	top: 4px;
	left: 0;
	margin: 2px 4px -1px 0;
	padding: 1px;
	}
	
	@media screen and (max-width: 1200px)
		{ .material-icons.tags-oversikt-ikon { font-size: 18px; top: 5px; margin: 0 3px 0 0; } }

	@media screen and (max-width: 800px)
		{ .material-icons.tags-oversikt-ikon { font-size: 18px; top: 4px; left: -3px; margin: 0 2px 0 0; } }

	@media screen and (max-width: 560px)
		{ .material-icons.tags-oversikt-ikon { font-size: 15px; top: 4px; left: -1px; margin: 0 2px 0 0; } }

/* rubrik */		
		
.tags-rubrik
	{
	position: relative;
	top: 7px;
	margin: 0 6px 0 0;
	padding: 0;
	}
	
	@media screen and (max-width: 800px)
		{ .tags-rubrik { top: 4px; margin: 0 3px 0 0; } }		
	
	@media screen and (max-width: 560px)
		{ .tags-rubrik { top: 4px; margin: 0 1px 0 0; } }
		
.tags-meny
	{
	position: relative;
	top: 4px;
	margin: 0 6px 0 0;
	padding: 0;
	}
	
	@media screen and (max-width: 800px)
		{ .tags-meny { top: 2px; margin: 0 1px 0 0; } }		
	
	@media screen and (max-width: 560px)
		{ .tags-meny { top: 1px; margin: 0 1px 0 0; } }
		
.blink { animation:blinkingtext 2s infinite; }

@keyframes blinkingtext
	{
	0% { color: #808080; }
    49% { color: #808080; }
    60% { color: #cccccc; }
    99% { color: #cccccc;  }
    100% { color: #808080; }
	}

.blink-mork { animation:blinkingtext-mork 2s infinite; }
.blink-mork:hover { animation: none; color: #00cc33; }	

@keyframes blinkingtext-mork
	{
	0% { color: #5a5a5a; }
    49% { color: #5a5a5a; }
    60% { color: #333333; }
    99% { color: #333333;  }
    100% { color: #5a5a5a; }
	}

.blink-svart { animation:blinkingtext-svart 2s infinite; }

@keyframes blinkingtext-svart
	{
	0% { color: #000000; }
    49% { color: #000000; }
    60% { color: #b3b3b3; }
    99% { color: #b3b3b3;  }
    100% { color: #000000; }
	}
	
.blink-mork { animation:blinkingtext-mork 2s infinite; }
.blink-mork:hover { animation: none; color: #00cc33; }	

.blink-gron { animation:blinkingtext-gron 1.2s infinite; }

@keyframes blinkingtext-gron
	{
	0% { color: #00cc33; }
    100% { color: transparent; }
	}