/*a{
	color: #000000;  
	text-decoration: none;
}
a:visited{
	color: #000000;  
}
a:link{
	color: #000000;  
}
a:hover{
	color: #0000b0; 
}*/
body{ /* Generellt för alla element i body om inget annat specificeras */
	background:rgb(238, 238, 238);
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding:0;
	overflow-x:hidden; 					/* Gömmer Scroll-listen nertill */
    margin-left: 0px;
	padding-left: 0px;	
	background-image: url("bg_first_dimension.jpg");
	background-size: 100%;
	background-position: -120px;
}
.mainPageApp
{
	width: 100%;
	height: 105vh;
	overflow-y: scroll;
	padding-right: 2px; /* Göm scroll-baren lite */  
}
header{
	width: 100%;
	text-align: center;
}
cite{
	font-style: normal;
}

														/****************************/
.IconAndTitle{											/*****		TITEL		*****/
														/****************************/												
	width:85%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	min-width: 0; 
	background-color: rgba(255,255,255,0.85);
	margin: 4%;
	margin-top: 0%;
	margin-bottom: 0px;
	padding: 3%;
    border-radius: 30px 30px 0 0; 
	
	border-width: 5px;
    border-color: #0000b0; 
	border-style: solid;
	
	border-bottom-width: 0px; 
}
	#Icon{
		display: flex;
		align-self: center; /* Hindrar att bliden stretchas */
		justify-content: center;
		width: 50%;  /* Skalar bilden så den passar i Flexboxen*/
		margin: 4%;
		margin-bottom: 0px;
		box-shadow: 3px 3px 10px rgba(0,55,155,0.3);
	}
	.Title{
		color: #000000;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;    
		align-items: center;      	/* Centrerar i höjdled */
 		
		margin: 2%;
		top: 5%;
		font-size: 1.5vw;  

	}
	#underrubrik{
		position: relative;
		color: #000000;
		top: -10%;
		text-align: center;

		padding-right: 30px;
		padding-left: 30px;

		font-size: 3.7vw;

		@media (min-width: 750px) {
		 
				padding-bottom: 30px;
				position: relative;
				top: -15%;
				
				border-width: 0px;
				border-color: #0000b0;
				border-style: solid;
				border-bottom-width: 2px;
				
				font-size: 28px
		 
		}

	}
														/********************************/
#Description{											/*****		BESKRIVNING		*****/
														/********************************/
	width:85%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;  
	background-color: rgba(255,255,255,0.85);
	margin: 4%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 3%;
	padding-top: 0px;
	padding-bottom: 0px;
	
	border-width: 5px;
    border-color: #0000b0; 
	border-style: solid;
	
	border-bottom-width: 0px;
	border-top-width: 0px; 
}
ul{
	position: relative;
	left: 4%;
}
li{
	position: relative;
	left: -7%;
	top: -7%;
	color: #000000;

	font-size:  2.9vw;
	@media (min-width: 750px) {
		font-size:  22px;
	}
	@media (min-width: 1020px) {
		font-size:  24px;
	}
}
p{
	font-size:  1.4em;
	text-align: center;
	color: #000000;
}
													/************************************/
.BildOchDownLoad{ /* Stående bild */				/*****		BILD O DOWNLOAD		*****/
													/************************************/
	width:85%;
	display: flex;
	justify-content: space-evenly;  /*Sprider ut och skapar lite luft runt om, snyggt! */
	background-color: rgba(255,255,255,0.85);
	margin: 4%;
	margin-top: 0px;
	margin-bottom: 0%;
	padding: 3%;
	padding-bottom: 10%;
    border-radius: 0 0 30px 30px; 
	
	border-width: 5px;
    border-color: #0000b0; 
	border-style: solid;
	
	border-top-width: 0px; 
} 
#Image{


	width: 60%; /*  Skalar bilden så den passar i Flexboxen*/
	align-self: center; /* Hindrar att bliden stretchas */
	/*box-shadow: 3px 3px 10px rgba(0,55,155,0.3);*/
	text-align: center;
	margin: 3%;
	filter: drop-shadow( 10px 30px 10px rgba(0,55,155,0.3));
}

.DownloadKnappar2 h2 {
	font-size:  0.50em;
}
.ImgDownloadHere2{
	max-width: 155px;
	height: auto;
	margin: 0px; /* valfritt: ger en liten mellanrum mellan bilderna */
	transform-origin: 75% center;
	transition: transform 0.4s ease;

	position: relative;
	left: -10%;
	
	width: 20vw;
	align-self: center; /* Hindrar att bliden stretchas */
	/*	max-width: 165px; */

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

	padding-left: 10vw;
	@media (min-width: 750px) {
		padding-left: 7vw;

		padding-top: 2vw;


	}
	@media (min-width: 1020px) {
		padding-left: 5vw;
		padding-top: 30px;
		margin-top: -10px;
	}

}
.ImgDownloadHere2:hover 
{
	transform: scale(1.2);
}

.radbrytning{	/* Fiffig lösning för att alltid bryta till en ny rad, blir som <BR> fast med FLEX */
	width:100%;

}

#h1Rubrik{
	color: #000000;
    margin: 0px;
	padding:0px;				 
	white-space: nowrap; 								/* Gör så att rubriken inte kan brytas av på mitten o hoppa ner en rad */
	font-weight: 500;
    text-align: center;
	padding-left: 30px;
	padding-right: 30px;

	font-size:  4em;	
	@media (min-width: 750px) {
		font-size:  50px;	
	}
}

h2{
    margin: 0px;
	padding: 0px;
	padding-top: 2px;
	font-size:  1.8em;	 								/* Skalar fonten baserat på fönster-bredden */
	white-space: nowrap; 								/* Gör så att rubriken inte kan brytas av på mitten o hoppa ner en rad */
}

#readMore
{
	color: #000000;
	justify-content: center;  
	text-align: center; 

	font-size: 3vw;  
	@media (min-width: 750px) {
		font-size: 20px;  
		text-align: left; 
  
		padding: 0px;
		justify-content: left; 
	}
	
}

#downloadNow
{
	font-size: 5vw;
	position: relative;
	font-weight: 600;
	font-style: italic;
	color: #1e21c9;
	
	top: -20px;
	right: 30%;
	 

	@media (min-width : 1024px){
		font-size: 3em;
		right: 20%;
		top: 0px;
	}

}

.dela_landing
{
	position: relative;
	left: -25%;					/* Justerar elementets X-position */
	transform: translateX(-50%); 	/* Justerar elementets egna mitt-punkt */
 
	background-color:  #84cf41;
	width: 50px; 
	height: 50px;
	border-radius: 50%; 
	box-shadow: 3px 3px 10px rgba(0,55,155,0.3);

	bottom: -8vw;
	@media (min-width : 450px){
	
		bottom: -15vw;
	}

	@media (min-width : 1024px){
	
		top: 120px;
	}
}
.dela_landing img 
{
	position: relative;
	width: 35px;
	height: 35px;
	opacity: 0.85;
	transition: opacity 0.3s;

	transform: translateX(-3px) translateY(3px);
	-webkit-transform: translateX(-3px) translateY(3px);

}
.dela_landing:hover img 
{
	opacity: 1.0;
	transition: opacity 0.3s;
}
.dela_landing:hover  
{
	cursor: pointer; 
}



/*      *************************************************		*/
/* 		*****	MEDIA QUERIES - Responsiv Design: 	*****		*/	
/*      *************************************************		*/

@media (min-width:375px){ /* Mobile Mid */

	
	.DownloadKnappar h2 {
		font-size:  0.50em;
	}
	.ImgDownloadHere{
		width: 80px;
		align-self: center; /* Hindrar att bliden stretchas */
	}
	
}


@media (min-width:425px){ /* Mobile Large */

	.DownloadKnappar h2 {
		font-size:  0.6em;
	}
	
}

@media (min-width:768px){ /* Tablet */
		

	.DownloadKnappar h2 {
		font-size:  0.9em;
	}
}
@media (min-width:1024px){ /* Desktop */
	 
	.IconAndTitle{	
		
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 	
		max-width: 1100px;

		width:84%;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: nowrap; 
		margin: 4%;
		margin-top: 40px;
		margin-bottom: 0px;
		padding: 3%;
		padding-top: 40px;
		padding-bottom: 40px;
		
	}
	#Icon{
		display: flex;
		align-self: center; /* Hindrar att bliden stretchas */
		justify-content: center;
		position: relative;
		left: 0%;
		top: -5%;
		width: 15%;  /* Skalar bilden så den passar i Flexboxen*/
		margin: 4%;
		margin-bottom: 0px;
		box-shadow: 6px 6px 20px rgba(0,55,155,0.3);
	}
	.Title{
		margin: 2%;
		position: relative;
		top: 10%;
		left: -10%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;    
		align-items: center;      	/* Centrerar i höjdled */
		font-size: 1.2vw;           /* Skalar texten så den passar i Flexboxen */
		
	}
	h2{
		margin: 0px;
		padding: 0px;
		padding-top: 2px;
		font-size:  2em;	 								
		white-space: nowrap; 								/* Gör så att rubriken inte kan brytas av på mitten o hoppa ner en rad */
	}

	#Description{	
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 	
		max-width: 1100px;
		width:84%;
	}

	ul{
		margin: 0px;
		padding: 0px;

		padding-bottom: 5%;
	}
	.BildOchDownLoad{
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 	
		max-width: 1100px;

		width:84%;

		margin-top: 0px;
		padding-top: 0px;
		padding-bottom: 100px;
	}
	#Image{
		width: 80%;	/*  Skalar bilden så den passar i Flexboxen*/
	
		margin: 0px;
		padding: 0px;
		position: relative;
		left:-20px;
 
		filter: drop-shadow( 10px 40px 10px rgba(0,55,155,0.3));

		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
	}
 
	.ImgDownloadHere{
		
		width: 80%;
		min-width: 150px;												
		align-self: center; /* Hindrar att bliden stretchas */
	}
	.DownloadKnappar h2 {
		font-size:  1.2em;                     
	}
	
		
}