/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        XXXXXXXXXXXXXXXXXXXXXXX          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/


/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 


/*MEDIASCREEN DATOR*/
@media only screen and (min-width: 993px) {
	
}

/*MEDIASCREEN PLATTA*/
@media only screen and (min-width: 769px) and (max-width: 992px) {
	
}

/*MEDIASCREEN MOBILE*/
@media only screen and (max-width: 768px) {

}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        Fonter - inläsning          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/


/* XXXXXXXX */
@font-face {
font-family: xxxxxxx;
font-weight: XXX;
font-style: XXXXXX;
}


/* XXXXXXXX */
@font-face {
font-family: xxxxxxx;
font-weight: XXX;
font-style: XXXXXX;
}


/* XXXXXXXX */
@font-face {
font-family: xxxxxxx;
font-weight: XXX;
font-style: XXXXXX;
}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        Fonter - Anpassning          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/


h1 {
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	line-height:120%;
}

h2 {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

h3 {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

h4 {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

h5 {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

h6 {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

p, li, ul {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
	color:black;
}

.fl-main-content a span {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
	
}

button {
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

.menu-item a { 
	font-family: "Open Sans", sans-serif;
	line-height:120%;
}

.fl-rich-text a, .kontaktformular a {
	color: #0B4929;
	text-decoration: underline;
}


/*MEDIASCREEN DATOR*/
@media only screen and (min-width: 993px) {
	
	h1 {
		font-size:40px;
		margin-top:0px;
		margin-bottom:20px;
	}
	
	h2 {
		margin-top:0px;
		margin-bottom:20px;
		
	}
	
	h3 {
		font-size:30px;
	}
	
	h4 {
		font-size:20px;
		margin-bottom:10px;
	}
	
	
	h5 {
		font-size:20px;
	}
	
	h6 {
		font-size:18px;
	}
	
	p, li, ul	{
		font-size:16px;
	}
	
	a	{
		font-size:16px;
	}
	
	.obs-rad .fl-icon-text p {
		font-size:20px;
		font-weight: bold;
	}
	
}

/*MEDIASCREEN PLATTA*/
@media only screen and (min-width: 769px) and (max-width: 992px) {
	
	h1 {
		font-size:30px;
		margin-top:10px;
	}
	
	h2 {
		font-size:30px;
		margin-top:10px;
	}
	
	h3 {
		font-size:25px;
	}
	
	h4 {
		font-size:20px;
		margin-bottom:0px;
	}
	
	
	h5 {
		font-size:18px;
	}
	
	h6 {
		font-size:16px;
	}
	
	p	{
		font-size:16px;
	}
	
	a	{
		font-size:16px;
	}
}

/*MEDIASCREEN MOBILE*/
@media only screen and (max-width: 768px) {

	h1 {
		font-size:30px;
		margin-top:10px;
	}
	
	h2 {
		font-size:30px;
		margin-top:10px;
	}
	
	h3 {
		font-size:25px;
	}
	
	h4 {
		font-size:20px;
		margin-bottom:0px;
	}

	
	h5 {
		font-size:18px;
	}
	
	h6 {
		font-size:16px;
	}
	
	p	{
		font-size:16px;
	}
	
	a	{
		font-size:16px;
	}
	
	
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        Header        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/


/* Meny */
.main-menu .menu-item a { 
	display: inline-block;
  	font-family: var(--ff-font);
  	font-weight: 500;
  	line-height:120%;
  	text-transform: ;
	/*border-bottom: 2px solid transparent; */
	-webkit-transition : border 500ms ease-out;
  	-moz-transition : border 500ms ease-out;
  	-o-transition : border 500ms ease-out;
  	transition : border 500ms ease-out;
	margin: 0 !important;
}

.main-menu .menu-item a:hover {
	background: transparent;
	/*border-bottom: 2px solid transparent; */
}

.main-menu .menu-item a:before {
	content: "";
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 0%;
	left: 0;
	background-color: #16633B;
	transition: all 0.2s;
}

.main-menu .menu-item a:hover:before {
	width: 100%;
}

.current-menu-item a {
	color: #16633B !important;
}

.main-menu .current-menu-item a:before {
	width: 100%;
}

.main-menu .menu > li > a:focus {
	border: none !important;
	border-radius: 0 !important;
}


/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        Generella ändringar          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/

.tre-kolumn-padding-text, .femti-femti-kolumner  {
	padding-top:3%;
	padding-bottom:3%;
	padding-left:3%;
	padding-right:3%;
}


/*MEDIASCREEN MOBILE*/
@media only screen and (max-width: 768px) {
	.tre-kolumn-padding-text, .femti-femti-kolumner  {
	padding-top:7%;
	padding-bottom:7%;
	padding-left:7%;
	padding-right:7%;
}
}

a:hover, a:visited {
	text-decoration:none;
}

/******** KNAPP MOT MÖRK ********/
.knapp-mot-mork a.fl-button {
	background:none;
	border:solid white;
	border:solid white 1px;
}

.knapp-mot-mork a.fl-button:hover {
	background:white;
	border:solid white 1px;
}

/*knapptexten*/
.knapp-mot-mork a.fl-button span {
  	color:white;
}

.knapp-mot-mork a.fl-button:hover span {
  	color:#F28F00 !important;
}


/******** KNAPP MOT LJUS ********/

.knapp-mot-ljus a.fl-button, .knapp-mot-ljus button, .knapp-mot-ljus input {
	background:none;
	border:solid black 1px;
}

.knapp-mot-ljus a.fl-button:hover, .knapp-mot-ljus button:hover, .knapp-mot-ljus input:hover {
	background:black !important;
	border:solid black 1px !important;

}


/*knapptexten*/
.knapp-mot-ljus a.fl-button span, .knapp-mot-ljus button, .knapp-mot-ljus button a, .knapp-mot-ljus input {
  	color:black;
}

.knapp-mot-ljus a.fl-button:hover span, .knapp-mot-ljus button:hover, .knapp-mot-ljus button:hover a, .knapp-mot-ljus input:hover {
  	color:#F28F00 !important;
	text-decoration:none;
}

.rund-bild img {
	border-radius:50%;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        startsida          @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/





/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@        Kontaktsidan         @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/



/* =======================================================================================================================================================================
                                                                Kontaktformulär styling
======================================================================================================================================================================= */

.kontaktformular label {
	font-weight: 400;
}

.kontaktformular .text-base,
.kontaktformular .text-base span,
.kontaktformular .text-base a {
	line-height: 0.75rem;
	font-weight: 300; 
}

.kontaktformular .wpcf7-submit {
	border-radius: 5px;
	transition: ease-in-out .1s;
	color: #ffffff;
	padding: 10px 40px;
	width: 15rem;
}

.kontaktformular .grid {
	display: flex;
}

.kontaktformular .grid p {
	width: 100%;
}

.kontaktformular .grid .block {
	padding-right: 20px;
	display: flex;
}

.kontaktformular .wpcf7-form-control-wrap {
	display: flex;
	flex-direction: column;
	height: fit-content;
	width: 100%;
}

.kontaktformular .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	margin-top: 10px;
	font-size: 0.85em;
}

.kontaktformular .wpcf7-form-control-wrap .wpcf7-text {
	margin-top: 0;
	margin-bottom: 0;
	color: #000;
	border-radius: 5px;
}

.kontaktformular .wpcf7-form-control-wrap .wpcf7-textarea {
	width: 100%;
	height: 150px;
}


/* Gör CF7 acceptance-checkboxen till "radio-look" */
.kontaktformular .wpcf7 .wpcf7-acceptance label {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.4;
}

/* Dölj den riktiga checkboxen men behåll tillgänglighet och klickbarhet */
.kontaktformular .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Skapa vår runda "radio" */
.kontaktformular .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  padding-left: 28px; /* plats för cirkeln */
  display: inline-block;
}

/* Yttre cirkeln */
.kontaktformular .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #dadada;
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.9;
	background: #fff;
}

/* Inre "fylld" prick (syns bara när ikryssad) */
.kontaktformular .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.15em + 3px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #177344;
  transform: scale(0);
  transition: transform 120ms ease-in-out;
}

/* När checkboxen är ikryssad: visa pricken */
.kontaktformular .wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  transform: scale(1);
}

/* Fokus-stil för tangentbord (tillgänglighet) */
.kontaktformular .wpcf7 .wpcf7-acceptance input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


.kontaktformular .wpcf7-submit:hover {
	background: #1e9e5d !important;
	text-decoration:none;
}

.sr-only {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (max-width: 800px) {
  /* Gör så grid-raden blir kolumn istället för rad */
  .kontaktformular .grid {
    flex-direction: column;
  }

  /* Se till att varje fält tar hela bredden */
  .kontaktformular .grid p {
    width: 100%;
  }

  /* Ta bort sidopadding som annars kan kännas trångt */
  .kontaktformular .grid .block {
    padding: 0;
  }
}