/*----------fonts---------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chonburi&family=DM+Serif+Display:ital@0;1&display=swap');
/*--------Farver-----------*/

:root {
  --color-primary: #0f0f0e;
  --color-primary-light: #f5f2e1;
  --color-highlight:  #d1cfb0;
  --color-light:  #f7f7f7;
  
  --color-highlight-hover:  #3fd5ff;
  --color-primary-hover:  #085891;
}

.baggrund-dark{
    background-color: var(--color-primary);
    color:#fff;
}

.baggrund-light{
    background-color:var(--color-primary-light);
    color:var(--color-primary);
}

.baggrund-white{
    background-color:#fff;
    color:var(--color-primary);
}

.baggrund-highlight{
    background-color:var(--color-highlight);
    color:#000;
}

.baggrund-light-grey{
    background-color:var(--color-light);
}

/*---*/
.tekst-dark{
    color: var(--color-primary);
}

.tekst-light{
    color:var(--color-primary-light);
}

.tekst-white{
    color:#fff;
}

.tekst-highlight{
    color:var(--color-highlight);
}






/*--------------generelt---------------------*/

h1, h2, h3{
  
    font-weight: 800;
    margin-bottom:3%;
    max-width: 800px;
    margin: 25px auto;
    font-family: "Chonburi", serif;
    

}

h1{
font-size: clamp(1.5625rem, 1.1161rem + 2.2321vw, 3.125rem);
    
}

h2{
    font-size: clamp(1.25rem, 0.9821rem + 1.3393vw, 2.1875rem);
}


li::marker {
   color:var(--color-highlight);
}

ul{
    line-height:2rem;
}


a {
    text-decoration:none;
    color:#8b7e35;
}

.logo-image{
    height: 100px;
    object-fit:scale-down;
    overflow:hidden;
}

.breadcrumb{
        max-width: 800px;
        margin: 0 auto;
}


p{
    font-size:larger;
    max-width:800px;
    margin:0 auto;
}
/*
.container {
    padding:5% 0;
}*/

section{
    padding-top:5%;
    padding-bottom:5%;
}

body{
    
    font-family: Arial, sans-serif;
    color:var(--color-primary);
    background-color:var(--color-primary-light);
}

.flag-img{
    width:25px;
    height:25px;
}

.tekstkolonne{
    padding:5% 40px;
}

.ikontekst-sektion{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: space-between;
    align-items: center;
    
}

.ikonTekst{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
   
    align-items: center;
    gap: 10px;
    font-size:1.5em;
}

@media only screen and (max-width: 1140px) {
  .ikonTekst{
    flex-basis: 50%;
  }
}

.under-citat{
    padding-top:30px;
    color:var(--color-highlight);
}

blockquote{
    padding: 40px;
    position: relative;
    background-color: white;
    border-radius: 30px;
    color:var(--color-primary);
}

.boks{
    padding: 40px;
    position: relative;
    background-color: white;
    border-radius: 30px;
    color:var(--color-primary);
}

.linktekst:before{
    content:"── ";
}

blockquote::before{
  font-family:Georgia;
  content: "\201C";
  color:var(--color-highlight);
  font-size: 6em;
    position: absolute;
    left: -10px;
    top: -20px;
}

blockquote::after{
  font-family:Georgia;
  content: "\201d";
  color:var(--color-highlight);
  font-size: 6em;
  position: absolute;
  right: -10px;
  bottom: -60px;
}

.person-block{
    margin-bottom:60px;
}



/*____________Knapper_________________*/

.knap-lys{
    background-color:var(--color-highlight);
    color:#fff;
}

.knap-dark{
    background-color:var(--color-primary);
    color:#fff;
}

.knap-dark:hover{
    background-color:var(--color-primary-hover);
    color:#fff;
}

.baggrund-dark .knap-dark{
    background-color:var(--color-primary-light);
    color:var(--color-primary);
}



.baggrund-light .knap-dark:hover, .baggrund-dark .knap-dark:hover{
    background-color:var(--color-primary-hover);
    color:#fff;
}



.knap-lys:hover{
    background-color:var(--color-highlight-hover);
    color:#fff;
}



.knap{
    
    padding:30px;
    font-weight:700;
    margin: 30px;
}



/*_________Nyheds blocks___________*/

.nyheds-block{
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 30px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}   

.nyheds-block-img{
    
    max-height: 240px;
    margin: -30px -30px 15px -30px;
    overflow: hidden;
}

.nye-nyheder a{
    text-decoration:none;
    color:var(--color-primary);
}

.nyheds-block-titel {
    color:var(--color-highlight);
}

/*---------Hero ---------------*/

.hero-tekst{
    position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*------Footer-----------*/

footer{
    overflow;hidden;
}

footer h2{
    
    font-size:1.6rem;
    
}

footer p{
    font-size:1rem;
}

footer{
    background-color:var(--color-primary);
    padding:2% 5%;
}

footer a{
    color:var(--color-light);
    text-decoration:none;
}

footer a:hover{
    color:var(--color-highlight);
    text-decoration:none;
}

.footer-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow:hidden;
}

.footer-columns{
    padding:30px;
}

 
/*_____________________Burger Menu navigation________________________*/

/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 50px;
  left: 50px;
  
  z-index: 1000;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: #8b7e35;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: var(--color-primary);
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle span:nth-child(odd)
{
  width:25px;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 400px;
  width: 100vw;
  max-height: 100vh;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  box-sizing: border-box;
  overflow-y: visible;
  background: #fff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-200%, 0);
  
  transition: transform 0.7s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
  overflow-y:auto;
}

#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

/**----------------------accordion-----------------------------------------*/

.accordion-body {
    background-color:var(--color-highlight);
}
.accordion-button:not(.collapsed){
    background-color:var(--color-primary-light);
}

.accordion-flush .accordion-item {
    background: var(--color-primary-light);
    box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);   
}    


.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
    border:none;
}

.accordion-header {
  line-height: 34px;
 
}



.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-radius: 0;
    color: var(--color-primary);
    background:var(--color-primary-light);
    font-family: 'hm_light', sans-serif;
    font-size: 20px;
    line-height: 34px;
    border-bottom:solid 3px var(--color-highlight);
}


.form-control:valid {
  background-color:  white!important;
}

.form-floating.float_success > .form-control-plaintext ~ label::after,
.form-floating.float_success > .form-control:focus ~ label::after,
.form-floating.float_success > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating.float_success > .form-select ~ label::after {
    background: white;
    color: var(--bs-success-text-emphasis);
}

.form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 2.9rem;
    padding-bottom: 1rem;
}

/*------------------Billede banner Slider-------------*/

.mySwiper {
      width: 100%;
      height: 60vh;
    }

    .mySwiper .swiper-wrapper .swiper-slide {
      background-position: center;
      background-size: cover;
    }

    .mySwiper .swiper-wrapper .swiper-slide img {
      display: block;
      width: 100%;
      height:100%;
      object-fit:cover;
    }
    
    /*------------------citat Slider-------------*/
    
    .c-carousel-citat {
      overflow-x: hidden;
      overflow-y: clip;
      width: 100%;
    }
    
    .c-carousel__wrapper.swiper-citat {
    margin: 0 48px;
    position: static;
}
    /*------------------Logo Slider-------------*/

.swiper-slide img {
  max-width: 100%;
  display: block;
}

.u-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.c-carousel {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

.c-carousel__wrapper.swiper {
  margin: 0 48px;
  position: static;
}



.c-carousel__inner-wrapper.swiper-wrapper {
  display: flex;
  align-items: center;
}

.c-carousel img {
  margin: 0 auto;
  max-height:100px;
}

.c-carousel__controls {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-carousel__button--next,
.c-carousel__button--prev {
  cursor: pointer;
  z-index:100;
}

.c-carousel__button--next svg,
.c-carousel__button--prev svg{
  stroke:var(--color-highlight);
}

.c-carousel__button--prev.swiper-button-disabled,
.c-carousel__button--next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.c-carousel__item.swiper-slide {
  max-width: 300px;
  width: auto;
  flex-shrink: 0;
     height: 100px;
    border-radius: 20px;
    padding: 10px 16px;
    background-color: #223e47;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    transition:0.5s;
}

.c-carousel__item.swiper-slide:hover{
    background-color:#274a55;
    transition:0.5s;
}

 /*--------------media query---------------------*/


    
        .centered{
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

@media only screen and (min-width: 770px) {
  .menu-row{
    flex-wrap:nowrap;
  }
} 

@media only screen and (max-width: 770px) {
  #menuToggle span {
    background: #000!important;
    }
    #menuToggle {
    top: 15px;
    }
    .standardpage{
        margin-top:0!important;
    }
}  



    
@media only screen and (max-width: 993px) {
  #menu
    {
     
      transform: translate(-100%, 0);
    }  
}    
    

/**umb_name:normal*/
p {
}

/**umb_name:Overskrift 1*/
h2 {
}

/**umb_name:Overskrift 2*/
h3 {
}

/**umb_name:Overskrift 3*/
h4 {
}

/**umb_name:Farvet tekst*/
.tekst-color {
	color:var(--color-highlight);
}