*{
    box-sizing: border-box;
    margin: 0em;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/*---------farvekoder------------*/
/*        #32A6A6                          */
/*        #A63232                         */
/*        #E8973A                          */
/*        #D1C6BA                        */
/*--------farvekoder SLUT-------*/

/*-------skrifttyper-----------*/
.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*---------------skrifttyper SLUT-----------*/
/* -----------------opsætning af brødtekst, overskrifter, links--------------*/
p {
    font-family: barlow;
    font-size: 18px;
    line-height: 30px;
    margin: 10px 0;
    padding-bottom: 10px ;
}

em {
    font-weight: 600;
}

h1 {
    font-family: barriecito;
    font-weight: 400;
    font-size: 56px;
    text-transform: uppercase;
    padding-bottom: 40px;
    padding-top: 40px;
    letter-spacing: 0.1em;
}

h2, h3, h4 {
    font-family: barriecito;
    font-weight: 400;
    font-size: 36px;
    padding-bottom: 25px;
    padding-top: 30px;
    letter-spacing: 0.1em;
}

a {
    font-weight: 600;
    font-family: barlow;
    color: #A63232
}

a:hover {
    font-size: 20px;
    text-transform: underline;
}

.knap {
    background-color: #E8973A;
    padding: 7px 15px;
    line-height: 1.7;
    border-color: #E8973A;
    border-radius: 10px;
    filter: drop-shadow(5px 5px 5px black);
    letter-spacing: 0.1em;
}

a.knap {
    color: black;
    font-family: barriecito;
    font-weight: 600;
}

/* -----------------opsætning af brødtekst, overskrifter, links, knap SLUT--------------*/
/*----------Grid area---------*/
body {
    display: grid;
    grid-template-columns: 30px repeat(5, 1fr) 30px;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas:
        "header header header header header header header"
        ". main main main main main ."
        "footer footer footer footer footer footer footer";
    min-height: 100vh;
}

header {
    grid-area: header;
    background-color: #32a6a6;
    position: sticky;
    top: 0;
}

/*------------------brødkrummer-----------------*/

ul.breadcrumb {
    padding: 5px;
    list-style: none;
}

ul.breadcrumb li+li:before {
    padding: 5px;
    color:#A63232;
    font-weight: 600;
    content: "/\00a0";
}

ul.breadcrumb li {
    display: inline;
    font-size: 16px;
    font-family: barlow;
}

ul.breadcrumb li a{
    color: #A63232;
    text-decoration: none;
    font-family: barlow;
    font-size: 16px;
}

ul.breadcrumb li a:hover {
    text-decoration: underline;
    font-size: 20px;
}

/*-----------brødkrummer SLUT-----------*/

main {
    grid-area: main;
    background-color: #ffffff;
}

footer {
    grid-area: footer;
    background-color: #32a6a6;
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
    align-items: center;
    padding: 0 0.5em
}

.some {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    align-items: center;
}

/*------grid area SLUT---------*/

/*------------Header & Navigation--------------*/

.logo {
    width: auto;
    height: 135px;
    filter: drop-shadow(5px 5px 15px black);
    padding: 1em;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav {
    display: none;
}

#bars {
    font-size: 50px;
    background-color: transparent;
    border: none;
    color: white;
    filter: drop-shadow(5px 5px 5px black);
    padding-top: 0.5em;
    padding-right: 0.5em;
}

.show {
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    background-color: #fcfefe;
    width: 100%;
}

.menu {
    list-style: none;
    margin: 1em;
    padding: 0;
}

.menu li a {
    font-family:  "Barriecito", system-ui;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    color: #A63232;
    font-size: 32px;
    letter-spacing: 0.1em;
}

.menu a:hover {
    font-size: 50px;
}

/* ------------------navigation SLUT------------------*/

/*---------------footer----------------*/

.omos {
    font-family: barriecito;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0.1em;
    filter: drop-shadow(5px 5px 5px black); 
    color: #E8973A;
     -webkit-text-stroke: 0.1px black;
    text-decoration: none;
}

.footer img{
    width: 45px;
    height: auto;
    filter: drop-shadow(5px 5px 5px black);
}

.footer a:hover {
    font-size: 50px;
}

.brugdineord {
    font-family: barriecito;
    font-weight: 300;
    font-size: 20px;
    color: #ffffff;
    filter: drop-shadow(5px 5px 5px black);
    text-align: right;
    -webkit-text-stroke: 0.4px black;
}


/*---------------footer SLUT----------------*/

/*-----------indhold index mobil-----------*/

.ramme {
    border: 2px solid darkgray;
    background-color: #D1C6BA;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    filter: drop-shadow(5px 5px 5px black); 
}

.who {
    font-family: barriecito;
    letter-spacing: 0.1em;
    font-size: 28px;
    text-transform: uppercase;  
    text-align: center;
}

.citat {
    font-style: italic;
    font-weight:400;
    text-align: center;
}

/*-----------indhold index mobil SLUT-----------*/

/*-----------indhold historierne mobil-----------*/

.baggrund {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(5px 5px 5px black); 
}

.number {
    font-family: barriecito;
    font-size: 80px;
    font-weight: 800;
    opacity: 50%;
    color: #E8973A;
}

.inddeling {
    display: grid;
    grid-area: 1 / 1/ 3 / 5;
    gap: 1em;
}

.del {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/*-----------indhold  historierne mobil SLUT-----------*/

/*-----------indhold konflikter mobil -----------*/



/*-----------indhold konflikter mobil SLUT-----------*/

/*-----------indhold kontakt mobil-----------*/



.sendbesked img {
    height: 65px;
    width: auto;
    border-radius: 0;
}

.count {
    border: 7px solid #32a6a6;
    border-radius: 3px;
    padding: 0.1em;
    font-weight: 700;
    font-family: barriecito;
    font-size: 34px;
}

/*------kontaktformular------*/

.kontaktform {
    border-radius: 10px;
    background-color: #D1C6BA;
    padding: 5px;
    font-family: barlow;
    font-size: 16px;
    margin-bottom: 20px;
}

form {
    display: block;
    margin-top: 10px;
}

input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 5px;
    border: 2px solid darkgray;
    border-radius: 10px;
    margin-top: 0.5em;
    margin-bottom: 1em;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#besked {
    font-family: barlow;
    font-size: 16px;
}

fieldset {
    border: none;
}

input[type=submit]{
    background-color:#E8973A;
    color: black;
    padding: 0.7em;
    border: 2px solid darkgray;
    border-radius: 10px;
    font-size: 20px;
    font-family: barriecito;
    text-transform: uppercase;
    text-align: center;
}


/*-----------indhold kontakt mobil SLUT-----------*/

/*-----------indhold om os mobil-----------*/



/*-----------indhold om os mobil SLUT-----------*/

/*------------------------------------------Webversion--------------------------------------------*/

@media screen and (min-width: 450px) {
 
#bars {
    display: none;
}

/*----------grid area--------------*/
body {
    display: grid;
    grid-template-columns: 15% repeat(5, 1fr) 15%;
    grid-template-rows: 150px 1fr 100px;
    grid-template-areas:
        "header header header header header header header"
        ". main main main main main ."
        "footer footer footer footer footer footer footer";
    min-height: 100vh;
}

footer {
    grid-area: footer;
    background-color: #32a6a6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5em;
}


/*-------------grid area SLUT-----------*/

/*--------------navigation & header-------------*/
.logo {
    width: auto;
    height: 185px;
    filter: drop-shadow(5px 5px 15px black);
    margin-left: 1.5em;
}

header nav {
    display: inline-block;
    margin-top: 3em;
    filter: drop-shadow(5px 5px 15px black);
}

.menu {
    margin: 1em;
    padding: 0;
    grid-area: menu;
    display: flex;
    gap: 3em;
}   

.menu li a {
    font-family:  "Barriecito", system-ui;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 32px;
}

/*------------navigation & header SLUT------------*/

/*---------footer-------*/

.some {
    gap: 1.5em;
}

.omos {
    font-size: 30px;
}

.brugdineord {
    font-size: 30px;
    letter-spacing: 0.1em;
    color: #ffffff;
}

/*---------footer SLUT-------*/

/*------------Indhold Index web-------------*/

.hero {
    display: flex;
    justify-content: center;
}

.hero img {
    max-width: 1000px;
    filter: drop-shadow(5px 5px 15px black);
}

.columns {
    columns: 2;
}

section {
    padding-top: 3em;
}

.kasse {
    display: grid;
    grid-template-columns: 60% 1fr;
    gap: 3em;
}

.venstre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 1em;
}

.venstre h2 {
    grid-column: 1/span3;
}

.tekst {
    grid-column: 2/3;
}

.hojre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

.hojre h3 {
    grid-column: 1/span3;
}

.hojre div {
    grid-column: 1/span3;
}
/*------------Indhold Index web SLUT-------------*/

/*------------Indhold kontakt web-------------*/

.sendbesked {
    display: flex;
    justify-content: center;
    margin-bottom: 3em;
    gap: 1em;
    margin-left: 5em;
}

.sendbesked img {
    width: 200px;
    height: auto;
    filter: drop-shadow(5px 5px 5px black);
}

.sendbesked p {
    font-size: 30px;
    line-height: 1.7;
}

.kontaktform {
    margin-bottom: 2em;
    filter: drop-shadow(5px 5px 15px black);
}

/*------------Indhold kontakt web SLUT-------------*/

/*------------Indhold om os web-------------*/

.anton {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: auto 1fr;
    gap: 1em;
}

.anton h1 {
    grid-row: 1/2;
    grid-column: 1/span3;
}

.anton img {
    grid-row: 2/3;
}

.anton div {
    grid-row: 2/3;
}

.lykke {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: auto auto 1fr;
    gap: 1em;
}

.lykke h2 {
    grid-row: 1/2;
    grid-column: 1/span3;
}

.lykke img {
    grid-row: 2/4;
    grid-column: 2/3;
}

.lykke p {
    grid-row: 2/3;
    grid-column: 1/2;
}

.lykke div {
    grid-row: 3/4;
    grid-column: 1/2;
}
/*------------Indhold om os web SLUT-------------*/

/*------------Indhold konflikter web-------------*/

.konflikt2 {
    display: grid;
    grid-template-columns: 30% 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 2em;
}

.konflikt2 h2 {
    grid-row: 1/2;
    grid-column: 1/-1;
}

.konflikt3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

.konflikt3 h3 {
    grid-row: 1/2;
    grid-column: 1/-1;
}

.konflikt3 img {
    grid-row: 1/3;
    grid-column: 2/3;
    filter: drop-shadow(5px 5px 15px black);
}

.konflikt3 div {
    grid-row: 2/3;
    grid-column: 1/2;
}

/*------------Indhold konflikter web SLUT-------------*/

/*------------Indhold historierne web -------------*/


.lykkeanton {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 2em;
}

.lykkeanton h1 {
    grid-column: 1/-1;
}

.kol1 {
    grid-column: 1/2;
    grid-row: 2/3;
}

.kol2 {
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kol3 {
    grid-column: 3/4;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inddeling {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

.del {
    display: flex;
    align-items: flex-start;
}

.inddeling h3 {
    grid-row: 1/2;
    grid-column: 1/-1;
}


/*------------Indhold  historierne web SLUT-------------*/

}