 
#aLink{
	color: #000000;  
	text-decoration: none;
}
#aLinka:visited{
	color: #000000;  
}
#aLink:link{
	color: #000000;  
}
#aLinka:hover{
	color: #e48d24; 
} 
body{ /* Generellt för alla element i body om inget annat specificeras */
	/* background:#eeeeee; */
	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_math_squares.gif");
	background-size: 50vw;  
	
	@media (min-width : 1024px){
		background-size: 512px;  
	}
 
}
.mainPageApp
{
	width: 100%;
	height: 105vh;
	overflow-y: scroll;
	padding-right: 2px; /* Göm scroll-baren lite */  
}
header{
	width: 100%;
	text-align: center;
}
 														/****************************/
.IconAndTitle{											/*****		TITEL		*****/
														/****************************/
	width:80%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	background-color: rgba(255,255,255,0.75);
	margin: 5%;
	margin-top: 2.5%;
	margin-bottom: 0px;
	padding: 3%;
    border-radius: 30px 30px 0 0; 
	
	border-width: 2px;
    border-color: #e48d24; 
	border-style: solid;
	
	border-bottom-width: 0px; 
}
	#Icon{
		display: flex;
		align-self: center; /* Hindrar att bliden stretchas */
		justify-content: center;
		width: 30%;  /* Skalar bilden så den passar i Flexboxen*/
		margin: 3%;
		margin-bottom: 0px;
		box-shadow: 3px 3px 10px rgba(0,55,155,0.3);
	}
	.Title{
		margin: 2%;
		position: relative;
		top: 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;    
		align-items: center;      	/* Centrerar i höjdled */
		font-size: 1.5vw;           /* Skalar texten så den passar i Flexboxen */
	

	}
	#underrubrik{
		position: relative;
		color :#000000;
		font-weight: 300;;
		top: -10%;
		font-size: 	3vw;
		text-align: center;
		@media (min-width : 1024px){
			font-size: 28px; 
		}

	}
														/********************************/
#Description{											/*****		BESKRIVNING		*****/
														/********************************/
	width:80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;  
	background-color: rgba(255,255,255,0.75);
	margin: 5%;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 3%;
	padding-top: 0px;
	padding-bottom: 0px;
	
	border-width: 2px;
    border-color: #e48d24; 
	border-style: solid;
	
	border-bottom-width: 0px;
	border-top-width: 0px; 
}
li{
	position: relative;
	left: -7%;
	top: -7%;

	font-size:  2.9vw;
	@media (min-width: 750px) {
		font-size:  2.7vw;
	}
	@media (min-width: 1024px) {

		position: relative;
		left: -2%;
		font-size:  22px;
	}
}
ul{
	margin-top: 5vw;
	margin-bottom: 0px;
}
p{
	font-size:  1.4em;
	text-align: center;
}
#discount{
	color: #4968bd;
	font-size:  2.5vw;
	font-weight: 300;
	@media (min-width: 1024px) {
		font-size:  1.5em;
	}
}
										/************************************/
.BildOchDownLoad { /* Stående bild */	/*****		BILD O DOWNLOAD		*****/
										/************************************/
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly; /*Sprider ut och skapar lite luft runt om, snyggt! */
	background-color: rgba(255,255,255,0.75);

	margin: 5%;
	margin-top: 0px;
	margin-bottom: 5%;
	padding: 3%;
	padding-bottom: 10%;
	border-radius: 0 0 30px 30px;
    border-width: 2px;
	border-color: #e48d24;  
	border-style: solid;
	border-top-width: 0px;


}
#Image {
	position: relative;
	left: -3%;

	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 20px 10px rgba(0,55,155,0.3));
}
.VideoDiv {
	margin: 0%;
	margin-top: 7%;
}
.Video {
	box-shadow: 3px 3px 10px rgba(0,55,155,0.3);
	text-align: center;
	margin: 0;
	max-width: 100%;
}
.DownloadKnappar2 {
	width: 25%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; /* Centrerar i höjdled */
	text-align: center;

	margin-top: 3vw;

	@media (min-width: 1024px) {
		font-size:  24px;
		margin: 0px;
		padding: 0px;
		padding-bottom: 2%;
		padding-top: 2%;
		border-width: 0px;
		border-color: rgba(228, 141, 36, 0.5);
		/*	border-style: solid; */
		border-left-width: 2px;
	}
}
.DownloadKnappar2 h2 {
font-size:  0.45em;
}
.ImgDownloadHere2{
 
	position: relative;
	left: -10%;

	max-width: 155px;
	height: auto;
	margin: 5%; /* valfritt: ger en liten mellanrum mellan bilderna */
	transform-origin: center center;
	transition: transform 0.4s ease;
	
	width: 20vw;
	transition: transform 0.2s ease, box-shadow 0.2s ease;  
 
}
.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%;
}

#rubrik{
	text-align: center;
	font-weight: 500;
	color: #000000;
    margin: 0px;
	padding:0px;
	font-size:  2.5em;	 								/* 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 */
 
	@media (min-width: 1020px) {
		color: #000000;
		margin: 0px;
		padding:0px;
		font-size:  35px;	 								
		white-space: nowrap; 	
	}

}

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 */
}

#downloadNow
{
	font-size: 5vw;
	position: relative;
	font-weight: 600;
	font-style: italic;
	color: #e48d24;
	
	right: 50%;
	top: -8%;

	@media (min-width : 1024px){
		font-size: 2em;
		right: 20%;
	}


}

.dela_landing
{
	position: relative;
	left: -100%;					/* Justerar elementets X-position */
	transform: translateX(-50%); 	/* Justerar elementets egna mitt-punkt */
	top: 10%;
	background-color:  #84cf41;
	width: 50px; 
	height: 50px;
	border-radius: 50%; 

	box-shadow: 3px 3px 10px rgba(0,55,155,0.3);

	@media (min-width : 1024px){
 
	}
}
.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 */
	
	.ImgDownloadHere2{
		width: 60px;
		align-self: center; /* Hindrar att bliden stretchas */
	}
	
}


@media (min-width:425px){ /* Mobile Large */
		
	li{
		position: relative;
		left: -2%;
	}
		
	.ImgDownloadHere2{
		width: 80%;
		min-width: 80px;												
		align-self: center; /* Hindrar att bliden stretchas */
	}

	
}

@media (min-width:768px){ /* Tablet */
		
    li{
		position: relative;
		left: -2%;
	}
	.ImgDownloadHere2{
		width: 80%;
		min-width: 150px;												
		align-self: center; /* Hindrar att bliden stretchas */
	}

}
@media (min-width:1024px){ /* Desktop */
	
	.IconAndTitle{	
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 	

		width:84%;
		max-width: 1100px;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: nowrap; 
		background-color: rgba(255,255,255,0.75);
		margin: 5%;
		margin-top: 28px;
		margin-bottom: 0px;
		padding: 1%;
		
		border-radius: 30px 30px 0 0; 
		border-width: 2px;
		border-color: #e48d24; 
		border-style: solid;
		border-bottom-width: 0px; 
	}
	#Icon{
		display: flex;
		align-self: center; /* Hindrar att bliden stretchas */
		justify-content: center;
		position: relative;
		left: 0%;
		top: 0%;
		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: 1vw;           /* Skalar texten så den passar i Flexboxen */
		
		border-style:hidden;
		border-bottom:#e48d24;
		border-bottom-style: solid;
		border-width: 2px;

		margin-bottom: 0px;
		margin-top: 15px;
	}

	h2{
		margin: 0px;
		padding: 0px;
		padding-top: 2px;
		font-size:  2em;	 								
		white-space: nowrap; 						 
	}
 
	#Description{	
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 

		width:84%;
		max-width: 1100px;
		padding: 1%;
		padding-top: 10px;
		padding-bottom: 5px;
	}
 
	ul{
		margin-top: 40px;
		margin-bottom: 0px;
		padding: 0px;
	}
	.BildOchDownLoad{
		position: relative;	
		left: 50%;
		transform: translateX(-57%); 

		width:84%;
		max-width: 1100px;
		padding: 1%;
		padding-top: 0px;
		padding-bottom: 75px;
	}
	#Image{
		width: 80%;	/*  Skalar bilden så den passar i Flexboxen*/
		align-self: center; /* Hindrar att bliden stretchas */
		text-align: center;
		margin: 0px;
		padding: 0px;
		/*box-shadow: 6px 6px 20px rgba(0,55,155,0.3);*/
		filter: drop-shadow( 10px 40px 10px rgba(0,55,155,0.3));

		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
	}
 
	.ImgDownloadHere2{
		width: 80%;
		min-width: 150px;												
		align-self: center; /* Hindrar att bliden stretchas */
	}
	.DownloadKnappar2 h2 {
		font-size:  1.2em;                     
	}
		
}