body, html {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

body, input, textarea, p {
    font-family: 'Jaldi',sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Khand', sans-serif;
    color: rgb(0, 74, 109);
    line-height: 140%;
 
}

h1 {
    font-size: 3.4rem;
    margin: 0 0 .2em 0;
    font-weight: 300;
    line-height: 100%;
}

    h2.title, h2 {
        font-weight: 300;
        font-size: 2.2rem;
        margin-bottom: 0;
    }

h2.title {
    margin-left: .5em;
}

h3 {
    font-weight: 400;
    font-size: 1.8rem;
}

h4 {
    font-weight: 600;
    font-size: 1.5rem;
}

h5 {
    font-weight: 600;
    font-size: 1.3rem;
}

h6 {
    font-weight: 600;
    font-size: 1.1rem;
}

p, blockquote, .text-content ul li, .text-content ol li {
    font-family: 'Jaldi',sans-serif;
}

.text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6 {
    margin: 1em 0 0 0;
}

.text-content ul, .text-content ol {
    margin: 0;
    margin-block-start: 0.20em;
    margin-block-end: 0;
}

    .text-content ul ul, .text-content ol ol {
        margin-block-start: 0.20em;
    }

.text-content a {
 color:rgb(0, 74, 109);
 text-decoration:underline;
}

.text-content a:hover {
    text-decoration: none;
}

.text-content ul li, .text-content ol li {
    margin-bottom: .3em;
    font-size:1.1rem;
}

.strong {
    font-weight: bold;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
}

.w-20 {
    width: 20%;
}


.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-50 {
    width: 50%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

a, header, main, footer, section, p, img, .flex, nav, .fal, .far, .fas, .fab {
    transition: .5s;
}

a, header, main, div, footer, section, p, img, .flex, nav, .fal, .far, .fas, .fab {
    box-sizing: border-box;
}

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

    .relative{
        position:relative;
    }

    .justify-center{
        justify-content:center;
    }

blockquote {
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    margin: 1em;
    padding: 2em;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
}

    blockquote:before {
        color: #ccc;
        content: open-quote;
        font-size: 4em;
        line-height: 0.1em;
        margin-right: 0.25em;
        vertical-align: -0.4em;
        width: 100%;
        font-family: 'Font Awesome 5 Pro';
       
    }

    blockquote p {
        display: inline;
    }

/*  --- Table ---*/

table {
    width:100% !important;
    margin:0.5em 0;
}

table tr td {
    vertical-align:top;
}

    table tr td, table tr td p {
        font-size:1rem;
    }

/* IFrames ----------- */
.video-wrapper {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    width:100%;
}

iframe {
    aspect-ratio: 16/9;
    width: 100% !important;
    height: auto !important;
    margin-top: 1em;
}

    .video-wrapper iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

/* MainHeader ---- */
#MainHeader {
    background: rgba(255,255,255,.95);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001;
    padding: .58em 1em;
    align-items: center;
    align-content: center;
    min-width: 280px;
   
}

body.mob-open #MainHeader {
    border-bottom: 1px solid rgba(148, 179, 206, .2);
}

#MainHeader #Logo {
    justify-self: center;
    align-items: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100px;
    position: relative;
    top: -.1em;
    
}

    #MainHeader #Logo img {
        max-width: 100%;
        max-height: 40px;
    }

#MainHeader .link {
    color: rgba(84, 133, 156,1.0);
}

    #MainHeader .link:hover {
        color: rgba(101, 190, 236, 1.0);
    }


#MainHeader .contact-link {
    align-items: center;
    align-content: center;
    border: 1px solid rgba(100, 144, 165,1.0);
    padding: .2em .7em .1em .7em;
    border-radius: 100px;
    height: 32px;
    align-self: center;
    font-size: .9rem;
    font-weight: 500;
}

    #MainHeader .contact-link span.mob {
        font-size: 0;
    }

    #MainHeader .contact-link .fal {
        margin-right: .3em;
    }

#MainHeader .open-admin-menu {
    color: rgb(0, 74, 109);
    font-size: 1rem;
    padding: .5em 0 .5em .5em;
    text-align: center;
    justify-content: center;
}



    #MainHeader .open-admin-menu .fa-cog {
        display: block;
    }

    #MainHeader .open-admin-menu .fa-times, #MainHeader .open-admin-menu.active .fa-cog {
        display: none;
    }

    #MainHeader .open-admin-menu.active .fa-times {
        display: block;
    }

    #MainHeader .open-admin-menu:hover {
        cursor: pointer;
        color: #65beec;
    }

#MainHeader .open-admin-menu span{
  font-size:.7rem;
}

#MainHeader .admin-menu {
    position: absolute;
    top: 60px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 74, 109, .2);
    background: #eaf0f5;
}

    #MainHeader .admin-menu a {
        color: rgba(0, 74, 109,1.0);
        width: 100%;
        border-bottom: 1px solid rgba(0, 74, 109, .2);
        padding: 1em;
        margin: 0 0 0 0;
        display: block;
    }

#MainHeader .admin-menu a:hover {
    color: #65beec;
}


    #MainHeader .admin-menu span.w-100 {
    display: block;
    color:#333;
    }

        #MainHeader .admin-menu .flex {
            padding:1em;
        }

            #MainHeader .admin-menu .flex .k-combobox .k-select {
                border-color: #fff;
                background-color: #fff;

            }

#MainHeader #HeaderNav {
    align-items: center;
    align-content: center;
}

#MainHeader #MenuIcon {
    padding: .5em 1em 0 1em;
    margin-right: 0;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    max-width: 0;
    overflow: hidden;
    padding: 0;
}

    #MainHeader #MenuIcon:hover {
        cursor: pointer;
    }

    #MainHeader #MenuIcon span {
        font-size: .7rem;
        display: block;
    }

#MainHeader .mobile-menu {
    width: 320px;
    justify-content: flex-end;
    align-items: center;
}

#MainHeader .search-box {
    justify-content: flex-start;
    justify-self: center;
    padding-left: .5em;
    width: 320px;
    position: relative;
}

    #MainHeader .search-box .flex.relative {
        width: 155px;
    }

    #MainHeader .search-box input {
        background: rgba(148, 179, 206, .4);
        box-shadow: none;
        outline: none;
        border: 0;
        height: 30px;
        border-radius: 40px;
        width: 100%;
        padding-left: .7em;
        padding-right: 1em;
        box-sizing: border-box;
        color: #000;
        font-size: 1rem;
        padding-top: .2em;
        padding-bottom: .1em;
        font-weight: 500;
    }

    #MainHeader .search-box a {
        color: #000;
    }

    #MainHeader .search-box button {
        position: absolute;
        right: .4em;
        top: .45em;
        font-size: .8rem;
        opacity: .9;
        border:0;
        background:none;
    }

        #MainHeader .search-box button:hover {
            cursor: pointer;
            opacity: 1.0;
        }


/* setup menu ------ */
#MainNav {
    position: fixed;
    width: 100%;
    right: 0;
    top: 60px;
    z-index: 100;
    background: rgba(255,255,255,.95);
    margin-top: -1px;
    box-sizing: border-box;
    padding: .3em 1em;
}

    #MainNav .wrap {
        justify-content: center;
    }

    #MainNav a {
        position: relative;
        margin-right: 1em;
        flex-wrap: nowrap;
    }

        #MainNav a, #MainNav a * {
            color: rgba(84, 133, 156,1.0);
            align-items: center;
            align-content: center;
            font-size: 1.2rem;
        }

            #MainNav a:hover, #MainNav a:hover * {
                color: rgba(101, 190, 236, 1.0);
                cursor:pointer;
            }

            #MainNav a.flex.w-100 .fal {
                font-size: 0;
            }

    #MainNav .inner {
        max-height: 0;
        overflow: hidden;
        transition: .5s;
        box-sizing: border-box;
        position: absolute;
        background: #fff;
        top: 2em;
        max-width: 240px;
    }

        #MainNav .inner.open {
            max-height: 10000000px;
            padding: 1em .2em .5em 1em;
        }

    #MainNav .mob-link {
        display: none;
    }
 
    /* Main --------- */
#Main {
    min-width: 280px;
    min-height: -moz-calc(100vh - 270px);
    min-height: -webkit-calc(100vh - 270px);
    min-height: -o-calc(100vh - 270px);
    min-height: calc(100vh - 270px);
    display: block;
    margin-top: 99px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

    #Main .text-content {
        max-width: 890px;
        margin: 0 auto;
        line-height: 130%;
        color: rgb(0, 74, 109);
        padding: 2em;
        box-sizing: border-box;
    }

    #Main .text-content.widget {
        padding: 0 2em 2em 2em;
    }

        #Main .text-content.first {
            padding-bottom: 0;
        }


        #Main .text-content h1 {
            font-size: 3.4rem;
            font-family: Khand, sans-serif;
            font-weight: 300;
            line-height: 100%;
        }

        #Main .text-content p {
            line-height: 140%;
            font-size: 1.1rem;
            margin:0.20em 0 0.5em 0;
            
        }

        #Main .text-content img {
           max-width:100%;
        }


        #Main .text-content p, #Main .text-content h1, #Main .text-content h2, #Main .text-content h3, #Main .text-content h4, #Main .text-content h5, #Main .text-content h6 {
            width: 100%;
            max-width: 100% !important;
        }

/* Infopages ---------------- */
.info-pages {
    margin-bottom: 2em;
}

.large-img {
    width: 100%;
    margin: 0;
    padding: 0;
    height: auto;
    position: relative;
    overflow: hidden;
    align-items: flex-start;
    align-content: flex-start;
}

    .large-img:before {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: -5vw;
        width: 110vw;
        height: 100%;
    }

    .large-img img {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        height: auto;
        max-height: 600px;
        min-height: 200px;
    }

/* Kontaktformulär ------ */
.contact-form {
    background: #eaf0f5;
    padding:0 2em 2em 2em;
}
    .contact-form input, .contact-form textarea {
        margin-bottom: .5em;
    }
/* Nyheter --------- */
.news {
    background: rgba(148, 179, 206, .2);
    padding: 1em 0 1em 1em;
    flex-wrap: wrap;
    /*align-items: flex-start;*/
    align-content: center;
}

    .news article {
        width: -moz-calc(25% - 1em);
        width: -webkit-calc(25% - 1em);
        width: -o-calc(25% - 1em);
        width: calc(25% - 1em);
        background: #fff;
        margin-right: 1em;
    }

        .news article:hover {
            cursor: pointer;
        }

        .news article .img {
            width: 100%;
            height: 300px;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

            .news article .img img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }

        .news article:hover .img img {
            transform: scale(1.06);
        }

        .news article .desc {
            padding: 0 2em .6em 2em;
            color: rgb(0, 74, 109);
            width: 100%;
        }

            .news article .desc h3 {
                margin-bottom: .3em;
            }

            .news article .desc p {
                margin-top: 0;
            }

            .news article .desc .news-date, .news-detail .news-date {
                text-align: right;
            }

            .news a.arrow {
                width: 20px;
                color: rgba(101, 190, 236, .7);
                font-size: 2rem;
            }

        .news a.arrow:hover {
            color: rgba(101, 190, 236, 1);
        }

        .news a.arrow.left {
            margin-right: .5em;
        }

        .news a.arrow.right {
            text-align: right;
        }

.news-list {
    padding: 1em 0 1em 1em;
    flex-wrap: wrap;
}

    .news-list article {
        margin-bottom: 1em;
    }

.news-detail .img {
    margin: 0 0 1.5em 0;
    padding: 0;
    width: 100%;
    background:#fafafa;
    height:auto;
    align-items:flex-start;
    align-content:flex-start;
}

    .news-detail .img img {
        max-width: 100%;
        height:auto;
        object-fit: contain;
    }


.news-buttons {
    justify-content: flex-start;
    max-width: 890px;
    margin: -.5em auto 0 auto;
    padding: 0 2em 4em 2em;
}

.view-all, .view-all:hover, .send-btn, .send-btn:hover, .contact-form .k-button {
    background: #e5007d;
    border: 0;
    box-shadow: none;
    padding: .5em 1em;
    font-family: 'Khand', sans-serif;
    font-weight: normal;
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

    .view-all:hover, .send-btn:hover {
        cursor: pointer;
        background: #c1036b;
    }

    .view-all span {
        font-weight: 500;
    }

.news-index .buttons {
    width: 100%;
    margin-bottom: 0;
    margin-top: 1em;
}

/* Files --------------------*/
h2.files-title {
    margin-left: 0 !important;
}

.files {
    padding: 0 3.3em 3em 3.3em;
    color: rgb(0, 74, 109);
    max-width: 800px;
    margin: 0 auto;
}

    .files.files-detail {
        max-width: 890px;
        padding: 0 2em 3em 2em;
    }

    .files .filter {
        margin: 0 0 .5em 0;
        border: 1px solid rgb(0, 74, 109);
        align-items: center;
        align-content: center;
        outline: none !important;
        padding: .3em 1em;
        color: rgb(0, 74, 109);
  /*      background: rgba(0, 74, 109, .1);*/
    }

.total {
    width: 100%;
    font-size: 1.2rem;
}

.filter-select {
    margin-bottom: 2em;
    width: -moz-calc(50% - .5em);
    width: -webkit-calc(50% - .5em);
    width: -o-calc(50% - .5em);
    width: calc(50% - .5em);
    margin-right: .5em;
}

.toggle-select {
    margin: 0 0 .5em 0;
    align-items: center;
    align-content: center;
    outline: none !important;
    padding: .1em .3em;
    color: rgb(0, 74, 109);
    margin-right: .5em;
    text-decoration: underline;
}

    .toggle-select:hover {
        cursor: pointer;
    }

    .toggle-select.selected {
        font-weight: bold;
        text-decoration: none;
        cursor: default;
    }

.filter-select:hover {
    cursor: pointer;
}

.filter-select:last-of-type {
/*    margin-left: auto;*/
    margin-right: 0;
}

.files .filter-sliders {
    max-height: 0;
    overflow: hidden;
    transition: .5s;
    opacity: 0;
    margin-bottom: 1em;
}

    .files .filter-sliders.show {
        max-height: 10000000px;
        opacity: 1.0;
    }

    .files .filter-sliders select {
        font-family: 'Jaldi',sans-serif;
        height: 50px;
        -webkit-appearance: none;
        appearance: none;
        color: rgba(0, 74, 109,.8);
        border: 1px solid rgba(0, 74, 109, .2);
        outline: 0;
        padding: .45em 2.5em .45em 0.75em;
        border-radius: 0;
        background-color: #fff;
        background: url(/img/select.jpg) no-repeat right center;
        background-size: auto 30px;
        font-size: 1.15rem;
    }

        .files .filter-sliders select:hover {
            border: 1px solid rgba(0, 74, 109, .4);
        }

    .files article {
        background: rgba(148, 179, 206, .2);
        padding: 1em;
        box-sizing: border-box;
        margin: 0 0 .5em 0;
        align-content: center;
        align-items: center;
        color: rgb(0, 74, 109);
    }

.files article a{
    color:rgb(0, 74, 109);
}


    .files article:hover {
        background: rgba(148, 179, 206, .4);
        cursor: pointer;
    }

    .files article .fal {
        margin-left: auto;
        justify-self: flex-end;
    }

.files .view-all {
    margin-top: .5em !important;
    display: inline-block;
}

    .files a .fal {
        margin-left: auto;
        justify-self: flex-end;
    }

.files article .name {
    width: 50%;
    word-break:break-all;

}

.files article .date {
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    opacity: .7;
    text-align: left;
}


/* Footer ---- */
#MainFooter {
    padding: 0 0 4em 0;
}

   

    #MainFooter p {
        margin-bottom: 10px;
        margin-top: 0;
        font-weight: 400;
        font-size: 1.1em;
        line-height: 140%;
        color: #004a6d;
    }

#MainFooter .foot-title {
margin-bottom: 2px;
}

    #MainFooter a {
        color: #004a6d;
        transition: .5s;
        
    }

        #MainFooter a:hover {
            text-decoration: none;
            color: #65beec;
        }



#MainFooter .copy {
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: .8rem;
    color: #000;
    opacity: .8;
    border-top: 1px solid #eee;
    padding-top: 5em;
}

    #MainFooter .footer-wrap {
        width: 98%;
        padding: 2.5em 0;
        display:flex;
        flex-wrap:wrap;
        margin: 0 1%;
    }

    #MainFooter .footer-box {
        width: 25%;
        text-align: left;
        justify-content: left;
        padding: 2.5em;
        /*background:red;*/
    }

    #MainFooter .powered {
        margin-top: .7em;
        opacity: .5;
        display: inline-block;
    }

        #MainFooter .powered:hover {
            opacity: .6;
        }

    #MainFooter h2 {
        font-size: 2em;
        margin-bottom: 3%;
        color: #004a6d;
        line-height: 1.1em;
    }


#kontor1, #kontor2, #kontor3, #kontor4 {
    display: block;
    position: relative;
    top: -130px;
    visibility: hidden;
}

/* Alert ------------- */
.alert {
    background: rgb(220, 247, 206);
    border: 1px solid rgba(37, 86, 11, .5);
    padding: 1.5em 2em;
    border-radius: 3px;
    margin: 0 0 1em 0;
    flex-wrap: nowrap;
    font-size: 1rem;
    transition: .5s;
    width: 100%;
}

.alerts {
    background: #fff;
    border: 0;
    padding: 0;
    border-radius: 0;
}

.alert.fail {
    background: rgb(244, 205, 205);
    border: 1px solid rgb(165, 109, 109);
}


.alert.hide {
    padding: 0 2em;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
}

.alert p {
    margin: 0;
}

.alert a {
    text-decoration: underline;
}

.alert .fa-smile-beam {
    margin-right: .2em;
}

.alert .fa-times {
    margin-left: auto;
    justify-self: flex-end;
    opacity: .7;
}

    .alert .fa-times:hover {
        cursor: pointer;
        opacity: 1.0;
    }

        /* Ie fix -------- */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            #MainHeader #HeaderNav {
                flex-wrap: nowrap;
            }

            #MainHeader #Logo img {
                max-height: 40px;
            }

            .large-img {
                position: relative;
                min-height: 10px;
            }

                .large-img img {
                    height: auto;
                    margin: auto;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    max-width: 100%;
                    min-height: 10px;
                    object-fit: contain;
                }

            select::-ms-expand {
                display: none;
            }

            .news-detail .img img {
                width: 100%;
                max-width: 890px;
                height: auto;
            }
        }
        /* Tas bort när kendo-menyn byts ut ------- */
        .k-menu:not(.k-context-menu) {
    background: none;
    padding:.1em 0 0 0!important;
}

#MainNav a, #MainNav a span {
    font-family: 'Khand', sans-serif;
}

#MainNav .k-link, #MainNav .k-item {
    outline: none !important;
    box-shadow: none !important;
}

.k-menu-group .k-item > .k-state-active, .k-menu.k-context-menu .k-item > .k-state-active{
    color:rgba(101, 190, 236, 1.0);
    background:#fff;
}

.k-menu .k-icon {
    display: none;
}

.k-menu-link {
    padding: 0;
}

/* Editor -----------------*/
.input-wrapper {
    display:none;
}