/* 
    Created on : 8. jan. 2026, 11.02.12
    Author     : Jonas Primdahl
    Design Philosophy: Mobil first
*/
:root{
    /* frontpage color 
    dark blue: #234d71
    light blue: #5badf3
    #234d71;*/
    --text_alignment: center;
    --button_width_desktop: 20%;
    --button_width_smartphone: 100%;
    --button_color_one: #fdc800;
    --button_color_two: #ed7633;
    --angle: 45deg;
    --button_text_color: #f2f2f2;
    --border_color: #333;
    --border_radius: 0.35em;
    --padding: 0.5em;
    --button_padding: 1em;
    --page_width_phone: 95%;
    --page_width_tablet: 95%;
    --page_width_desk: 60%;
    --frontpage_color: #395177;
    --footer_color: #fff;
    --footer_text_color: #395177;
    --body_color: #395177;
    --image_radius: 0.35em;
    --text_color: #fff;
    --header_text: #234d71;
    --top_nav_color: #fff;
    --top_nav_text: #395177;

    /*cms billeder phone & desktop*/
    --img_small_phone: 100px;
    --img_medium_phone: 150px;
    --img_big_phone: 200px;
    --img_small_desk: 300px;
    --img_medium_desk: 450px;
    --img_big_desk: 600px;

    --quote_width_phone: 90%;
    --quote_width_desk: 83%;

    --frame_color: #748fbb;
    --frame_width: 100%;
}
html {
    scroll-behavior: smooth;
}

body{
    background-color: var(--body_color);
    margin: 0;
    padding: 0;
    color: var(--text_color);
}
h1{
    text-align: center;
}
h2{
    text-align: center;
}
phone{
    color: black;
}

footer{
    position: sticky;
    bottom: 0em;
    background-color: var(--footer_color);
    text-align: center;
    padding: 0.5em;
    color: var(--footer_text_color);
}
.contact_form{
    width: 90%;
    text-align: center;
    margin: auto;
    border: 2px solid #5286a6;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 6em;
}
.contact_form input{
    text-align: center;
    width: 90%;
    margin: 0.25em;
    padding: 0.25em;
}
.contact_form textarea{
    font-size: 1.25em;
    resize: none;
    text-align: left;
    width: 90%;
    height: 100px;
    margin: 0.25em;
    padding: 0.5em;
}
a{
    color: blanchedalmond;
}
/* Smartphone*/
.topnav {
    overflow: hidden;
    background-color: var(--top_nav_color);
    text-align: center;
}

.topnav a {
    float: left;
    display: block;
    color: var(--top_nav_text);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a:first-child {
    background-image: linear-gradient(var(--angle), var(--button_color_one), var(--button_color_two));
    color: white;
}

.topnav .icon {
    display: none;
}
.scrollToTop {
    width: 100px;
    height: 30px;
    padding: 10px;
    border-radius: var(--border_radius);
    text-align: center;
    background: whiteSmoke;
    font-weight: bold;
    color: var(--footer_text_color);
    text-decoration: none;
    position: fixed;
    bottom: 75px;
    right: 40px;
    display: none;
}

.scrollToTop:hover {
    text-decoration: none;
}
.page{
    margin: auto;
    text-align: left;
    width: var(--page_width_phone);
    word-break: break-word;
}
.page h1{
}
.page h2{
    font-size: 1.2em;
}
.page p{
    text-align: var(--text_alignment);
}
.page_element{
    clear: both;
}
.element{
    margin: 1em 0 1em 0;
}
.image img{
    width: 98%;
    border-radius: var(--image_radius);
}
.icons{
    width: 36px;
}
/*cms image size*/

.img_small{
    width: var(--img_small_phone);
}
.img_medium{
    width: var(--img_medium_phone);
}
.img_big{
    width: var(--img_big_phone);
}
.sub_element{
    padding: var(--padding);
    margin-bottom: 1em;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.quotes{
    display: flex;
    justify-content: space-evenly;
    /*border: 2px solid #130955;*/
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-radius: var(--border_radius);
    padding: var(--padding);
}
.quote{
    /*border: 2px solid #130955;*/
    width: var(--quote_width_phone);
    text-align: justify;
    margin: 0.25em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-radius: var(--border_radius);
    padding: var(--padding);
}
.frame{
    background-color: var(--frame_color);
    border: 2px solid black;
    width: var(--frame_width);
    margin: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-radius: var(--border_radius);
    padding: var(--padding);
}
/*cookie*/
.cookie{
    margin: auto;
    text-align: center;
    background-color: white;
    color:var(--frame_color);
    opacity: 0.75;
/*    position: absolute;
    bottom: -25px;
    right: 2px;*/
    height: 2.5em;
    width: 2.5em;
    border: 1px solid gray;
    border-radius: 0.5em;
    transition: all 2s;
}
.cookie img{
    width: 2em;
    padding: 0.25em;
}
.cookie h1{
    font-size: 1em;
    margin: 0;
}
.cookie p{
    margin: 1em;
}
#cookie_politics{
    display: none;
    padding: 1em;
    cursor: pointer;
}
.help{
    cursor: help;
}


@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}


/* Tablet / Ipad / Desktop*/
@media (min-width: 48em) {
    .topnav{
        display: flex;
    }
       .page{
        width: var(--page_width_tablet);
        text-align: justify;
    } 
}

@media (min-width: 49em) {

    /*    .menu{
            justify-content: space-evenly;
        }*/
    .topnav {
        justify-content: space-evenly;
    }
    .button{
        width: var(--button_width_desktop);
    }
    .page{
        width: var(--page_width_desk);
        text-align: justify;
    }
    .image img{
        width: 40%;
    }
    /*cms image size*/
    .img_small{
        width: var(--img_small_desk);
    }
    .img_medium{
        width: var(--img_medium_desk);
    }
    .img_big{
        width: var(--img_big_desk);
    }
    .quote{
        width: var(--quote_width_desk);
    }
    .contact_form{
    width: 60%;
    margin: auto;
    border: 2px solid #5286a6;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 2em;
}
.contact_form textarea{
    width: 60%;
}
}