/* Övergripande stilar för hela sidan */


/* Stil för huvudinnehållet */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
	font-family: Garamond, Georgia; 
}

/* Återställ standardmarginaler och utfyllnad */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

/* Flexbox container */
.flex-container {
    flex: 1;
    display: flex;
}

/*----------------------------------------------------------*/

/* Alla stilar för header */
header {
    height: 100px; /* Justera höjden efter behov */
    max-width: 100%;
    max-height: 100px;
    background-color: #005BA1;
}

.headertxt {
    font-size: 40px;
    color: #ede8da;
    align-items: center;
    padding-top: 10px;
    padding-left: 150px;
    font-family: Garamond, Georgia;
    text-shadow: 0px 0px 0 rgb(227,222,208),
                 1px 1px 0 rgb(216,211,197),
                 2px 2px 0 rgb(206,201,187),
                 3px 3px 0 rgb(195,190,176),
                 4px 4px 0 rgb(185,180,166),
                 5px 5px 0 rgb(174,169,155),
                 6px 6px 0 rgb(164,159,145),
                 7px 7px 0 rgb(153,148,134),
                 8px 8px 0 rgb(143,138,124),
                 9px 9px 0 rgb(132,127,113),
                 10px 10px  0 rgb(122,117,103),
                 11px 11px 10px rgba(235,5,5,0.52),
                 11px 11px 1px rgba(235,5,5,0.5),
                 0px 0px 10px rgba(235,5,5,.2);
}

.headertxt_small {
    font-size: 20px;
    color: #ede8da;
    align-items: center;
    padding-top: 10px;
    padding-left: 150px;
    font-family: Garamond, Georgia;
    text-shadow: 0px 0px 0 rgb(227,222,208),
                 1px 1px 0 rgb(216,211,197),
                 2px 2px 0 rgb(206,201,187),
                 3px 3px 0 rgb(195,190,176),
                 4px 4px 0 rgb(185,180,166),
                 5px 5px 0 rgb(174,169,155),
                 6px 6px 0 rgb(164,159,145),
                 7px 7px 0 rgb(153,148,134),
                 8px 8px 0 rgb(143,138,124),
                 9px 9px 0 rgb(132,127,113),
                 10px 10px  0 rgb(122,117,103),
                 11px 11px 10px rgba(235,5,5,0.52),
                 11px 11px 1px rgba(235,5,5,0.5),
                 0px 0px 10px rgba(235,5,5,.2);
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

/*----------------------------------------------------------*/

/* Alla stilar för vänstermenyn */

.menu_left {
    background-color: black; 
    color: white; /* Vit textfärg */
    padding-top: 0px;
    margin-top: 0px;
}

.menutxt {
    color: white;
    font-weight: bold;
    font-variant: normal;
    font-size: 25px;
    padding-left: 10px;
}
.menu_left a {
    color: white; /* Vit hyperlinkfärg */
    text-decoration: none;
    padding-top: 0px;
    padding-left: 30px;
    padding-right: 20px;
    font-size: 20px;
    font-variant: normal;
    text-decoration: underline;
    /*font-style: italic;
    font-weight: bold;*/
}

.green_light {  /* Ikonen som visar på vilken sida man befinner sej */
  width: 10px;
}

.menuimg {
    background-image: url('AdobeStock_175086954.jpeg');
    background-size: cover;
    background-position: center;
    object-fit: fill;
    width: 100%;
    height: 100%;
    /* display: block; Ta bort extra utrymme under bilden */
}

/*----------------------------------------------------------*/

/* Alla stilar för main */

main {
    flex: 1;
    background-color: #f2f2f2; /* Grå bakgrundsfärg */
    padding: 0px;
}


/*----------------------------------------------------------*/

/* Stil för footer */
footer {
    background-color: #333;
    color: white; /* Vit textfärg */
    padding: 0px;
    text-align: center;
}

.footerimg {
background-image: url('AdobeStock_175086954.jpeg');
    background-size: cover;
    background-position: center;
	
    object-fit: scale-down;
width: 100%;
height: 100%;
display: /*block; remove extra space below image */
}

/*##################LÖSNING FÖR OPASITY#####################*/

.demo-wrap {
  overflow: hidden;
  position: relative; height: 100%
}

.demo-bg {
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.demo-content {
  position: relative;

font-weight: bold;
    font-variant: normal;
    font-size: 25px;
    text-align: center;
}

ul.myUL {
  display: inline-block;
  text-align: left;
}


@media (max-width: 700px) {
	
	h2 {
		font-size: 14px;
	}
	
	h5 {
		font-size: 12px;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	h6 {
		font-size: 14px;
		padding-left: 10px;
		padding-right: 10px;
	}
/*###########ALLA INSTÄLLNINGAR FÖR HEADERN. HAMBURGERMENYN LIGGER OCKSÅ HÄR##########*/
	header {
    min-height: 70px; /* Justera höjden efter behov */
    max-width: 100%;
    max-height: 100%;
    background-color: #005BA1;
}
	
	.headertxt {
    font-size: 20px;
    color: #000000;
    align-items: right;
    padding-top: 10px;
    padding-left: 150px;
    font-family: Garamond, Georgia; 
    }

	.headertxt_small {
	display: none;
    font-size: 0px;
    color: #000000;
    align-items: center;
    padding-left: 50px;
    font-family: Garamond, Georgia; 
}
	
/*##################LÖSNING FÖR HAMBURGERMENYN#####################*/
.menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center; 			
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 
	display: none;
  }
  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1); 
	display: inherit;
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #222; cursor:auto; 
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444; 
  }
#menu-toggle {
  display: none;
}
	
.menu > li a {
    color: white; /* Vit hyperlinkfärg */
    text-decoration: none;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 15px;
    font-variant: normal;
	position: absolute; /* För att få menyn att ligga ovanpå main */
          z-index: 1; /* För att få menyn att ligga ovanpå main */
    /*text-decoration: underline;
    font-style: italic;
    font-weight: bold;*/
}
	
/*----------------------------------------------------------*/
/*##################ALLA STILAR FÖR VÄNSTERMENYN#####################*/

	.menu_left {
		
		display: none;
		/*width: 0%;
		 overflow: hidden;
		*/
	}
	
}