* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 100vw;
}

body {
}

header {
  position: sticky;
}

/*  This is the header Image */
.image-container1 {
  position: relative;
  max-width: 100%;
  min-width: 10px;
  margin: 0 auto;
  padding: 0;
  /*   background-color: rgba(243, 233, 233, 0.5); */
  border: 1px solid black;
}

.bg-image1 {
  width: 100%;
  padding-top: 10%;
  background: url(/img/Banner-miljo-hand-ihand-text-sv.png) no-repeat center;
  background-size: contain;
}

/*  This is the END of header Image */

main {
  max-width: 100vw;
  margin: 20px;
  background-color: rgb(129, 127, 131);
}

nav {
  display: flex;
  margin: 20px;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  padding-right: 15px;
  list-style: none;
}

nav ul li a {
  text-decoration: none;
}

.h3-blue {
  color: blue;
}

.h3-red {
  color: rgb(255, 0, 0);
}

.h3-green {
  color: rgb(14, 230, 42);
}

h2 {
  margin-left: 20px;
}

main > h3 {
  padding-left: 100px;
  padding-top: 15px;
}
.box > p {
  text-align: center;
}

.big-box-wrapper {
  justify-content: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: none;
}

.box {
  display: flex;
  flex-direction: column;
  width: 250px;
  align-items: center;
  text-align: center;
  justify-content: start;
  background-color: rgb(201, 198, 198);
  margin: 15px;
  border-radius: 10px;
  box-shadow: 0.3em 0.3em 1em;
}

.main-text-wrap {
  max-width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 25px;
}

.main-text-wrap-akut {
  max-width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  margin-bottom: 25px;
}

.red {
  color: red;
}
.p-red {
  color: red;
}
.main-text {
  margin: 5px;
  max-width: 350px;
  text-align: left;
  background-color: rgb(195, 197, 202);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0.3em 0.3em 1em;
  /*text-align: center; */
}

.main-text-kalkyl {
  margin: 5px;
  width: 370px;
  text-align: left;
  background-color: rgb(195, 197, 202);
  padding: 10px;
  box-shadow: 0.3em 0.3em 1em;
}

.box-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.kalkyl-wrapper {
  max-width: 350px;
  background-color: grey;
  box-shadow: 0.3em 0.3em 1em;
}

.main-doc-wrapper {
  display: flex;
  flex-direction: column;
  margin: 5px;
  width: 95%;
  text-align: left;
  background-color: rgb(195, 197, 202);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0.3em 0.3em 1em;
}

.doc-wrap {
  max-width: 90vw;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px red dotted;
  border-radius: 5px;
}

.pdf-wrapper {
  border: 1px solid blue;
  max-width: 130px;
  color: black;
  margin: 5px;
  box-shadow: 0.3em 0.3em 1em;
}

.kylinventering-pdf {
  box-shadow: 0.3em 0.3em 1em;
  color: black;
}

.kylinventering-pdf:hover {
  color: rgb(12, 12, 102);
}

.pdf-wrap {
  display: flex;
  flex-direction: column;
  margin-right: 40px;
}

.pdf-total-wrapper {
  display: flex;
  flex-direction: row;
}

/* Kontaktsidans styling */
.main-contact-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.contact-card-wrapper {
  alignt-items: center;
  display: flex;
  flex-direction: column;
  border: 2px red solid;
  border-radius: 10px;
  /*  align-items: center;*/
  text-align: center;
  background-color: rgb(215, 224, 215);
  margin: 20px;
  padding: 15px;
  box-shadow: 0.3em 0.3em 2em;
}

.contact-card-wrapper:hover {
}

.contact-image {
  margin: 10px 10px 10px 10px;
  border-radius: 50%;
  box-shadow: 0.3em 0.3em 2em;
  color: black;
  width: 120px;
}

.contact-image:hover {
  color: red;
}

.contact-card-wrapper h3 {
  padding-bottom: 10px;
}

.contact-card-wrapper p {
  padding-bottom: 20px;
}

.mail-symbol {
  margin: 10px;
  border-radius: 50%;
  box-shadow: 0.3em 0.3em 2em;
  color: black;
}

.mail-symbol:hover {
  color: red;
}