body {
	background: #2d2b2b;
	height: 100%;
	margin: 0%;
	padding-left: 12%;
	padding-right: 12%;
}

/* --------------
HEADER 
-----------------*/

/* Denna "låda" gör headern plexibel */
.header-container {
	display: flex;
}

/* Länk till headbilden, dess utseende och position  
header {
	background-image: url(image/glod.jpg);
	background-size: auto;
	height: 100%;
	width: 100%;
}*/

.hero-image {
	background-image: url("image/glod.jpg");
	width: 100%;
	height: 400px;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

/* Webbplatsens logga, egenskaper och placering */
header .logo {
	width: 10%;
	height: auto;
	margin-left: 7.5em;
	background-color: #e8e8e8;
}

/* Positionering av introtexten i headern */
.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #e8e8e8;
	font-size: 2em;
	font-weight: 900;
}

/* -------------
MENY HEADER
----------------*/

/* Egenskaper för menyn placering och utseende i headern */
header nav {
	float: right;
}

/* Punkterna försvinner och texten placeras till höger */
header nav ul {
	list-style: none;
	padding: 0;
	justify-content: flex-end;
}

/* Listan läggs vågrätt med marginaler mellan varje val */
header nav li {
	display: inline-block;
	margin: 1.25em;
	margin-top: 0px;
	margin-right: 1.8em;
}

/* Egenskaper för valen i menyraden, utseende och storlek */
nav a {
	font-family: Georgia, verdana;
	font-size: 1.5rem;
	font-weight: bold;
	color: white;
	text-decoration: none;
}

/* När man för musen över menyvalen visas en ruta runt valet man är över */
nav a:hover {
	padding: 0.32em;
	border: solid 2px black;
}

/*-----------------------
TEXTEGENSKAPER 
-------------------------*/

/* Introtexten under herobilden, font, storlek, färg, skugga */
.intro p {
	font-family: Alkalami, helvetica, monospace;
	font-size: 2em;
	color: white;
}

/* Egenskaper för huvudrubik */
h1,
h4 {
	font-size: 4.5em;
	font-family: Alkalami, helvetica, monospace;
	font-weight: normal;
	margin-bottom: -2rem;
	text-align: center;
	color: white;
	text-shadow: 2px 2px 5px #f37d1d;
}

h4 {
	font-size: 3rem;
	text-shadow: 2px 2px 5px #f37d1d;
}
/* Rubrikerna märkta med h3, storlek, font, placering m.m. */
h3 {
	font-size: 2em;
	font-family: Alkalami, helvetica, monospace;
	font-weight: normal;
	text-align: left;
	margin-bottom: 2rem;
	text-align: center;
	color: white;
	text-shadow: 2px 2px 5px #f37d1d;
}

/* Brödtexten i flex-item/artiklarna */
p {
	font-family: verdana, arial, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: white;
	text-shadow: none;
}

/* Egenskapen på texten i footern, och texten i listan på analyssidan */
footer div p,
a {
	font-family: Georgia, arial, sans-serif;
	font-size: 1.1em;
	line-height: 1.5;
	color: black;
	text-shadow: none;
	text-decoration: none;
}

.flex-container a,
.div2 a,
.julmarknad a {
	color: blanchedalmond;
}

.div1 h3,
.div2 h3 {
	text-align: center;
	margin-bottom: -1rem;
	margin-top: 2.5rem;
	text-decoration: underline;
}

.div1 p,
.div2 p {
	text-align: center;
}

.div2 {
	margin-bottom: 2.5rem;
}
/* Placering av copytexen*/
.copy p {
	clear: both;
	font-size: 0.7em;
	text-align: right;
}

.center {
	text-align: center;
}

/* ---------------------------
BILDER, LOGO OCH KNAPPAR 
------------------------------*/

/* Knappegenskaper för knappar */
button {
	display: block;
	width: 8em;
	padding: 0.5em;
	font-size: 1.1em;
	box-shadow: 0.06em 0.18em;
	margin: auto;
	margin-bottom: 2rem;
}

.img_skylt {
	width: 40%;
	height: auto;
	margin: 2.5rem 0rem 2.5rem 0rem;
	padding-right: 30%;
	padding-left: 30%;
}

.img_index {
	float: left;
	width: 31%;
	height: auto;
	margin: 2.5rem 0rem 2.5rem 0rem;
	padding: 1%;
}

.img_produkt {
	width: 150%;
	height: auto;
}

/* Egenskaper för loggan i footern */
footer img {
	width: 50%;
	height: auto;
	margin-right: 0;
	padding: 1.87em;
}

/* Egenskaper för media-loggorna i footern */
.facebook,
.instagram {
	height: 1.5em;
	width: auto;
	margin: 0;
	padding: 0;
	padding-right: 0.62em;
}

/* ----------
FOOTER
-------------*/

/* Egenskaper för fotnoten, storlek och färg */
footer {
	clear: both;
	width: 100%;
	height: auto;
	background-image: linear-gradient(to right, #3a3030, #f2f2f2);
	display: flex;
}

/* Kolumnernas storlek och utseende i footern*/
.column {
	float: left;
	width: 20%;
	padding: 0.1em;
	padding-bottom: 0;
}

/* När man för musen över menyvalen ändras valets bakrundsfärg */
footer a:hover,
button:hover {
	padding: 0.32em;
	color: #f37d1d;
}

/* STILSÄTTER BREADCRUMB */
/* Style the list */
ul.breadcrumb {
	padding: 10px 16px;
	list-style: none;
	background-image: linear-gradient(to right, #3a3030, #f2f2f2);
}

/* Display list items side by side */
ul.breadcrumb li {
	display: inline;
	font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li + li:before {
	padding: 8px;
	color: black;
	content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
	text-decoration: none;
	font-weight: 900;
	font-size: 1.5rem;
	color: white;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
	color: #f37d1d;
	text-decoration: underline;
}

/* Stylar kartbilden på Kontakts  */
.gmap_canvas {
	overflow: hidden;
	background: none !important;
	height: 400px;
	width: 400px;
	padding: 2rem;
	border: solid #7d7878;
}

.mapouter {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
	padding: 2rem;
}

/* Style the container/contact section */
.container {
	background-color: #f2f2f2;
	padding: 10px;
	box-sizing: border-box;
}

.divfloat {
	float: left;
	padding: 1em;
}

.div1 {
	float: right;
	width: 50%;
}

.div2 {
	float: left;
	width: 50%;
}
.clearfix {
	overflow: auto;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.flex-container {
	display: flex;
	margin-top: 3rem;
	width: 100%;
	column-gap: 30px;
}

.flex-container div {
	padding: 20px;
	width: 33%;
	/*background-color: #3a3030;*/
	background-color: #4f4647;
	border: solid 1px blanchedalmond;
	border-radius: 2rem;
}

.flex-container div img {
	width: 70%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.flex-container .produkt {
	border: none;
	background-color: #2d2b2b;
}

.hallbarhet {
	clear: both;
}