@charset "UTF-8";

/*------------------------------------------
Om skärmen blir mindre än 1000px händer detta 
---------------------------------------------*/

@media screen and (max-width: 1000px) {
	/* Kolumnen med loggan i fotnoten försvinner */
	footer .logga {
		display: none;
	}

	/* Resterande i fotnoten breder ut sig till 100%  */
	footer .column {
		width: 25%;
		padding: 0em;
	}

	/* Skapar luft mot vänsterkanten i fotnoten */
	footer .adress {
		padding-left: 1em;
	}

	/* Atikel bredden korrigeras på analyssidan */
	.analys {
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}

	/*------------------------------------------
Om skärmen blir mindre än 740px händer detta 
---------------------------------------------*/

	@media screen and (max-width: 740px) {
		/* Korrigerar webbplatsens logga storlek och centrerar */
		header .logo {
			width: 18%;
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		/* Menylistans minskar lite i storlek */
		nav li {
			margin: 0.8em;
			margin-top: 0;
			margin-right: 0.5em;
		}

		/* Storleken på rubrikerna och texter minskar */
		h3 {
			font-size: 1.2em;
		}

		footer div p {
			font-size: 0.7em;
		}

		p {
			font-size: 0.7em;
		}

		h1 {
			font-size: 1.5em;
		}

		/* Spalten Sociala medier i footern döljs */
		footer .sociala-medier {
			display: none;
		}

		/* Storleken på resterande spalter flyter ut till 100% totalt */
		footer .column {
			width: 33.3%;
		}

		/* Innehållet flyttas upp på analyssidan */
		.flex-container {
			margin-top: 4em;
		}

		/*-------------------------------------------
Om skärmen blir mindre än 490px händer detta 
---------------------------------------------*/

		@media screen and (max-width: 490px) {
			/* Storleken på rubrikerna och texter minskar */
			nav a {
				font-size: 0.8em;
			}

			header nav li {
				margin: 0.8em;
			}

			.intro p {
				font-size: 1em;
			}

			h3 {
				margin-top: 2em;
			}

			h1 {
				font-size: 1.2em;
			}

			/* Placeringen av bilders magrinal korrigeras */
			.flex-container img {
				margin-left: 2em;
				margin-right: 2em;
				margin-top: -4em;
			}

			/* Positionerar om artiklarna till att lägga sig lodrätt men nya marginaler  */
			.flex-container {
				flex-direction: column;
				flex: 70%;
				margin: 1em;
				margin-top: 4em;
			}

			/* Korrigerar bildens placering mot artikeln */
			.flex-container img {
				margin-top: -6em;
			}
		}
	}
}