@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap'); /*Importerar Poppins*/

*{
	/*color: #cbcfcf;*/
	border: none;
	font-family: 'Poppins', Verdana, sans-serif;
	font-weight: 300; 
}

body 
{
	width: 100%;
	height: 100%;
	overflow: hidden; 
	background-color: rgb(53, 53, 53);
	padding: 0px;
	margin: 0px;

	position: relative;

	user-select: none; /* Gör att inget går att markera på hela sidan (Förhindrar fula blåa markeringar på mobila-enheter)*/
  
}
.mainPage
{
	width: 100%;
	height: 95vh;
	overflow-y: scroll;
	padding-right: 2px; /* Göm scroll-baren lite */  
}
#menu
{  
	display: flex;  justify-content: flex-start;  align-items: center; align-content: center; 
	color: rgb(230, 230, 230); background-color :rgb(53, 53, 53); 
	font-family: 'Poppins', Verdana, sans-serif; font-weight: 500; font-size: 48px; 
	z-index:21; 

	position:  sticky; 
	
	width: 100%; 
	min-height: fit-content;
	overflow: hidden;

	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);  

	border-top: 3vw solid #000000; 
	border-bottom: 1vw solid #84cf41; 
	@media (min-width: 750px) {
		border-top: 10px solid #000000;
		border-bottom: 10px solid #84cf41; 
	}
}   
#menu.hiddenMenu 
{
	display: none; 
} 
 
.menuButton
{   
	min-width: fit-content; 
	display: flex; justify-content: center; align-items: center; flex-grow: 0; background-color : rgb(53, 53, 53); 
	transition: background-color 0.4s ease;  padding-left: 2%; padding-right: 2%; font-weight: 300; 
	z-index:31;

	font-size: 4.1vw;  
	border-top-right-radius: 3vw;   
	@media (min-width: 750px) {
		font-size: 30px;
		border-top-right-radius: 25px;
	}

}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.menuButton:hover{ background-color : #000000; color: rgb(255, 255, 255); z-index:35;}

}

.menuButton.selected{ 
	background-color : #84cf41; color: rgb(255, 255, 255);  font-weight: 500;  
	z-index:30;

	border-top-right-radius: 3vw;   
	@media (min-width: 750px) {border-top-right-radius: 25px;}
}

/****************************/

/*
	Följande sektion är till för att hamburger-menyn ska kunna gömmas samt visa den riktiga menyn.
	Används på alla undersidor som även används som "landnings-sidor" vid delning och ev. annonser.
	du sätter dess unika färg direkt i det unika html-dokumentet med klassen: .menyIconColor
*/

#menuIcon
{
	display: block;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	float: right;
	transition: 0.3s;
	border-bottom-left-radius: 8px 8px ; 
	border-bottom-right-radius: 8px 8px ; 
	transition: 0.3s;
}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	#menuIcon:hover
	{
		cursor: pointer; 
	}

}
.aLine
{
	border-style: solid;
	border-left:0px;
	border-right:0px;
	border-top:4px;
	width: 20px;
	padding-top: 5px;
	transition: 0.3s;
}
#menuIcon.hiddenBurger 
{
	display: none; 
}

/****************************/

.dela
{
	position: relative;
	left: 50%;	

	transform: translateX(-50%); 
	-webkit-transform: translateX(-50%);

	background-color:  #84cf41;
	width: 50px; 
	height: 50px;
	border-radius: 50%; 
	/*box-shadow: 3px 3px 10px rgba(0,55,155,0.3);     Lite blå-aktig....    */
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
.dela img 
{
	position: relative;
	width: 35px;
	height: 35px;
	opacity: 0.85;
	transition: opacity 0.3s;

	transform: translateX(-2px) translateY(3px);
	-webkit-transform: translateX(-2px) translateY(3px);
}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.dela:hover img 
	{
		opacity: 1.0;
		transition: opacity 0.3s;
	}
	.dela:hover
	{
		transition: 0.3s;
		box-shadow: 0 0 15px #84cf41, 0 0 20px #84cf41;

		cursor: pointer; 
	}

}


#logo
{
	width: 90%;
	height: auto;
	max-width: 800px;

	display: flex;
	justify-content: center;
					
	padding: 0px;
	margin: 0px;
	margin-top: 5vw;
	margin-left: auto;
	margin-right: auto;
}
#logo2
{	
	display: flex;
	justify-content: center;
	width: 82vw; 
	max-width: 500px; 
	height: auto;
	padding:0px;
	margin:0px;
	border: none;
	padding: 5%;
	margin-left: auto;
	margin-right: auto;
}
#shadowOnTop_Tab
{
	position: fixed;/* absolute;*/
	top: 0px;
	left: -100px;
	width: 0px;
	height: 0px;
	box-shadow: 0.5vw -0.9vw 0.9vw rgba(0, 0, 0);  /* Skugga för pseudo-elementet */
	pointer-events: none; /* Låt händelser passera genom pseudo-elementet */
	z-index:22; 

	top: 3vw ; 
	border-top-right-radius: 3vw;  
	@media (min-width: 750px) {
		 top: 10px ;
		 border-top-right-radius: 25px;
	}
}

b{
	font-weight: 500; /* all fet-stil ska använda feta Poppins 500 */
}

.anchor{ /* Gör en fin lagom offset på alla interna sidlänkar */
	
    position: relative;
    top: -10em;
    visibility: hidden;
}

.infoRuta
{
	position: relative;
	color: #cbcfcf;

	margin-top: 1.5em;
	margin-bottom:0em;
	
	background-color: #000000;
	padding-top: 1em;
	text-shadow: 4px 4px 10px rgba(0,0,0,0.5);
	width: 95vw;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: thin solid;
	border-color: #222222;

	box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}

.infoRutaEnd
{
	justify-content: center;

	position: relative;
	color: #cbcfcf;
	
	margin-top: 0em;
	margin-bottom:1.5em;
	
	background-color: #000000;
	padding-top: 1em;
	text-shadow: 4px 4px 10px rgba(0,0,0,0.5);
	width: 95vw;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	border-bottom: thin solid;
	border-color: #222222;

	box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}

.topDecoration
{
	position: relative;
	color: #cbcfcf;
		
	padding: 1em;
	margin-bottom: 0.75em;
	width: 82vw;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	border: thin solid;
	border-color: #555555;
	
	border-bottom: none;
}
.endDecoration
{
	position: relative;
	color: #cbcfcf;
		
	padding: 1em;
	margin-bottom: 1.5em;
	margin-top: 0;
	width: 82vw;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	border: thin solid;
	border-color: #555555;
	
	border-top: none;
}
.helDecoration
{		
	padding: 1em;
	margin-bottom: 1.5em;
	width: 82vw;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	border: thin solid;
	border-color: #555555;
}

h1
{	
	font-size: 1.5em;
	color: #ffffff;
	text-align: center;
	/*font-family: verdana;*/
	font-weight: bold;
	font-weight: 500;

	padding-bottom: 0.15em;
}

.parentheses
{
	color: #4e7926;
}

p{	
	font-size: 1.0em;
	text-align: center;
	/* font-family: verdana;*/
}
.spaceOut{

	margin: 1em;
	margin-top: 0px;
	font-weight: 500;
	color: rgb(194, 193, 193);

	border-style: solid;
	border-width: 0px;
 	border-top-width: 1px;
	border-top-color: rgb(132, 207, 65,0.6); 
	border-bottom-width: 1px;
	border-bottom-color: rgb(132, 207, 65,0.6); 

	@media (max-width: 360px) {

		margin-left: 4px;
		margin-right: 4px;
	}

	@media (max-width: 260px) {

		margin-left: 1px;
		margin-right: 1px;
	}

	transition: 0.5s;

}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.spaceOut:hover{

		color: rgb(255, 255, 255);
	
		border-style: solid;
		border-width: 0px;
		 border-top-width: 1px;
		border-top-color: rgb(132, 207, 65,1); 
		border-bottom-width: 1px;
		border-bottom-color: rgb(132, 207, 65,1); 
	
		transition: 0.0s;
	
	}
}



.breadtext
{	
	/*font-family: 'Poppins', Verdana,sans-serif;*/
	font-size: 0.8em;
	text-align: left;
	color:  rgb(230, 230, 230); 
}
.centerMe
{	
 	flex: 1;  
    text-align: center;
	color:  rgb(230, 230, 230); 
}

a{
	 color:  rgb(230, 230, 230); 
	 text-decoration: none;
}

.bildContainer
{
	position: relative;
	top: 0em;
	padding:0px;
	margin:0px;
	border: none;
	width: 95vw;
	max-width: 600px;
	max-height: 600px;
	height: 95vw;
	overflow: hidden; /* Gör så att bilden klipps av utanför div:en */
	
	box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
	
	border: thin solid;
	border-color: #000000;

	margin-left: auto;
	margin-right: auto;
}
.bild
{	
	position: relative;
	height: 95vw;
	max-height: 600px;
	width: auto;
	padding:0px;
	margin:0px;
	border: none;
}
.bildAnimatedHeight
{	
	position: relative;
	width: 95vw;
	max-width: 600px;
	height: auto;
	padding:0px;
	margin:0px;
	border: none;
}


.textOnImageTop
{
	position: absolute; 
	text-align: left;
	/*font-family: verdana;*/
	font-style:italic; 
	top:2.5%;
	right: 0;  

	color:#cecece;

	background:linear-gradient(to right, rgb(53, 53, 53), rgba(0, 0, 0)); 

	padding-top:1.8%;
	padding-bottom:2.0%;
	padding-right: 2.5%;
	padding-left:1.5%;

	font-size: 3.3vw;
	border-bottom-left-radius: 3vw;
	@media (min-width: 600px) {	 
		font-size: 20px;
		border-bottom-left-radius: 20px;
   	}

	border-top: thin solid;
	border-color: rgb(94, 94, 94);
	border-left: thin solid;
	border-left-color: rgb(71, 71, 71);
	border-bottom: medium solid;
	border-bottom-color: rgb(0, 0, 0);

	box-shadow: 1.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);

}

/* Markera klickbara rutor med classen clickable om de har en undersida som kan öppnas */
.clickable
{
	transition: border-color 0.3s ease; 
	transition: box-shadow 0.3s ease; 
}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.clickable:hover
	{
		/* GREEN FRAME: */
		box-shadow: 1.5vw 0.9vw 0.9vw  rgba(132, 207, 65,0.3);
		border-color: rgba(104, 216, 6, 0.95);
	}

}

.punkt
{
	color:rgb(132, 207, 65);
	/*font-size: 125%;*/
	font-size: 125%; 
	text-shadow: 0 0 10px  rgba(104, 216, 6, 1);	

	animation: pulse 2s infinite; /* Justera tiden (2s) för att öka eller minska pulsationens hastighet */
 
}

@keyframes pulse {
	0% {
		color:rgb(132, 207, 65,0.5);
		text-shadow: 0 0 3px  rgba(104, 216, 6, 1), 0 0 5px  rgba(104, 216, 6, 1);	
	}
	50% {
		color:rgb(132, 207, 65,1);
		text-shadow: 0 0 8px  rgba(104, 216, 6, 1), 0 0 20px  rgba(104, 216, 6, 1),0 0 10px  rgba(104, 216, 6, 1),0 0 15px  rgba(104, 216, 6, 1);	
	}
	100% {
		color:rgb(132, 207, 65,0.5);
		text-shadow: 0 0 3px  rgba(104, 216, 6, 1),0 0 5px  rgba(104, 216, 6, 1);	
	}
}

 
.textOnImage-top-left
{
	position: absolute; 
	text-align: right;
	/* font-family: verdana;*/ 
	font-style:italic; 
	top:2.5%;
	left:0;  
 
	color:#cecece;

	background:linear-gradient(to left, rgb(53, 53, 53), rgba(0, 0, 0)); 

	padding-top:1.8%;
	padding-bottom:2.0%;
	padding-right:3%;
	padding-left: 2.5%;

	font-size: 3.3vw;
	border-bottom-right-radius: 3vw;
	@media (min-width: 600px) {	 
		font-size: 20px;
		border-bottom-right-radius: 20px;
   	}

	border-top: thin solid;
	border-color: rgb(148, 146, 146);
	border-right: thin solid;
	border-right-color: rgb(0, 0, 0);
	border-bottom: medium solid;
	border-bottom-color: rgb(0, 0, 0);

	box-shadow: 0.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);
}

.textOnImage-bottom-left
{
	position: absolute; 
	text-align: right;
	/* font-family: verdana;*/ 
	font-style:italic; 
	bottom:2.5%;
	left:0;  
 
	color:#cecece;

	background:linear-gradient(to left, rgb(53, 53, 53), rgba(0, 0, 0)); 

	padding-top:1.8%;
	padding-bottom:2.0%;
	padding-right:3%;
	padding-left: 2.5%;

	font-size: 3.3vw;
	border-top-right-radius: 3vw;
	@media (min-width: 600px) {	 
		font-size: 20px;
		border-top-right-radius: 20px;
   	}

	border-top: thin solid;
	border-color: rgb(148, 146, 146);
	border-right: thin solid;
	border-right-color: rgb(0, 0, 0);
	border-bottom: medium solid;
	border-bottom-color: rgb(0, 0, 0);

	box-shadow: 0.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);
}

.textOnImage-bottom-right
{
	position: absolute; 
	text-align: left;
	/* font-family: verdana; */
	font-style:italic; 
	bottom:2.5%;
	right: 0;  
 
	color:#cecece;

	background:linear-gradient(to right, rgb(53, 53, 53), rgba(0, 0, 0)); 

	padding-top:1.8%;
	padding-bottom:2.0%;
	padding-right: 2.5%;
	padding-left:1.5%;

	font-size: 3.3vw;
	border-top-left-radius: 3vw;
	@media (min-width: 600px) {	 
		font-size: 20px;
		border-top-left-radius: 20px;
   	}

	border-top: thin solid;
	border-color: rgb(148, 146, 146);
	border-left: thin solid;
	border-left-color: rgb(71, 71, 71);
	border-bottom: medium solid;
	border-bottom-color: rgb(0, 0, 0);

	box-shadow: 1.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);
}

/* iOS & Android nerladdningsknappar */
.DownloadKnappar
{	
	position: absolute;
	bottom: 37px;
	text-align: center; 
	width: 19%;
	right: 12%;
	z-index: 1;
}
.DownloadKnappar h2 
{	
	/*Texten till download-knapparna, som nu är gömd*/
	visibility: hidden;   

	text-align: center; 
	color: #cbcfcf;
	font-weight: normal;

   font-size: 1vw;  
   @media (min-width: 750px) {
	   font-size: 10px;
 
   }

 
}
.ImgDownloadHere
{	
	max-width: 155px;
	height: auto;
	margin: 0px; /* valfritt: ger en liten mellanrum mellan bilderna */
	transform-origin: center center;
	transition: transform 0.4s ease;
	
	width: 20vw;
	/*align-self: center;  Hindrar att bliden stretchas */
	/*	max-width: 165px; */

	transition: transform 0.2s ease, box-shadow 0.2s ease;  

}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.ImgDownloadHere:hover 
	{
		transform: scale(1.2);
		box-shadow: 1.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);
	}
	.ImgDownloadHere:hover.glow
	{
		box-shadow: -20px -10px 25px  rgba(177, 177, 177, 0.25), 1.5vw 0.9vw 0.9vw  rgba(0, 0, 0, 0.3);
		border-style: solid;
		border-color: rgb(132, 207, 65);
		border-width: 0;
		border-right-width: 5px;
	}

}

.followIcons
{
	overflow: visible;

	position: relative;
	padding: 2vw;
	padding-left: 2vw;
	padding-right: 2vw;
	width: 50px;
	height: 50px;

	filter: drop-shadow( 0 0 2px rgba(132, 207, 65));
    
	transition: 0.3s;

	@media (min-width: 1020px) {
		padding-left: 20px;
		padding-right: 20px;
	}

	@media (max-width: 320px) {
		padding-left: 4px;
		padding-right: 4px;
	}

}
@media (hover:hover) {  /* Använd endast om enheten stödjer hover-funktionalitet (en mobiler med touch t.ex.) */

	.followIcons:hover
	{
		transition: 0.3s;

		filter: drop-shadow( 0 0 2px rgba(132, 207, 65))
				drop-shadow( 0 0 5px rgba(132, 207, 65))
				drop-shadow( 0 0 15px rgba(132, 207, 65)
		); 
	}
}

.followIconsRow
{
	display: flex;
	justify-content: center;
	overflow: visible;
	position: relative;
}

#container
{
	display: flex;  justify-content: center;  /*display: flex; justify-content: center; align-items: center; align-content: center; */
	height: 100vh;
}

.special
{
	flex: 0.1;
}

@media (min-width:768px)  /* Tablet */
{
	p{
		font-size: 1.0em;
	}	
}