﻿@media only screen and (min-width : 0px) and (max-width : 85rem) {
    body.mob-open {
        position: fixed;
        left: 0;
        top: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

        body.mob-open #Blanket {
            position: fixed;
            left: 0;
            top: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            z-index: 10000;
        }

/* Header  ----------- */

 
    #MainHeader #MenuIcon {
        max-width: 40px;
        padding: 0 1em 0 1em;
    }

    #MainNav .mob-link {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    #MainHeader .fal, #MainHeader .far, #MainHeader .fas, #MainHeader .fad {
        font-size: 1.3rem;
    }

    #MainHeader .search-box input {
        height: 40px;
        font-size:1.2rem;
    }

    #MainHeader .search-box button {
        top: .8em;
        right: .6em;
    }

/* Mainnav --------- */
    #MainNav {
        position: fixed;
        width: 300px;
        max-width: 90%;
        height: -moz-calc(100% - 76px);
        height: -webkit-calc(100% - 76px);
        height: -o-calc(100% - 76px);
        height: calc(100% - 76px);
        background: Rgba(238,238,238,1);
        top: 76px;
        z-index: 10001;
        right: -300px;
        box-sizing: border-box;
        padding: 0;
        color: #fff;
        overflow-y: auto;
    }

    .mob-open #MainNav {
        right: 0;
    }

    #MainNav section {
        padding: 1em 2em 1em 2em;
        width: 100%;
        border-bottom: 1px solid rgba(148, 179, 206, .2);
    }

    #MainNav a {
        margin-right: 0;
    }

    #MainNav a, #MainNav a * {
        font-size: 1.4rem;
    }

       #MainNav a .fal {
            justify-self: flex-end;
            margin-left: auto;
            align-self: center;
            margin-top: auto;
            margin-bottom: auto;
        }

    #MainNav .inner {
        max-height: 0;
        overflow: hidden;
        transition: .5s;
        box-sizing: border-box;
        position: relative;
        background: none;
        top: 0;
        max-width: 100%;
    }

        #MainNav .inner a {
            margin-bottom: .5em;
        }

            #MainNav .inner a span {
                font-size: 1.1rem !important;
                max-width: 90%;
            }

            #MainNav .inner a .fal {
                font-size: 1rem !important;
            }

        #MainNav .inner.open {
            max-height: 10000000px;
            padding: 1em .2em .5em 1em;
        }

    #MainNav a .fal {
        font-size: 1.4rem;
    }

/* Main ------------- */
    #Main {
        min-height: -moz-calc(100vh - 235px);
        min-height: -webkit-calc(100vh - 235px);
        min-height: -o-calc(100vh - 235px);
        min-height: calc(100vh - 235px);
        margin-top: 75px;
    }

/* Nyheter --------*/
    .news-list article {
        width: -moz-calc(33.33% - 1em);
        width: -webkit-calc(33.33% - 1em);
        width: -o-calc(33.33% - 1em);
        width: calc(33.33% - 1em);
    }

    #kontor1, #kontor2, #kontor3, #kontor4 {
                top: -75px;
 
    }
}

@media only screen and (min-width : 0px) and (max-width : 65rem) {
    iframe {
        width: 100%!important;
    }


/* Nyheter ------------ */
    .news-list article {
        width: -moz-calc(50% - 1em);
        width: -webkit-calc(50% - 1em);
        width: -o-calc(50% - 1em);
        width: calc(50% - 1em);
    }

    .news-index {
        flex-direction: column;
        padding-left: 2em;
        padding-right: 1em;
        padding-top: 1.5em;
    }

        .news-index article {
            width: 100%;
            margin-bottom: 1em;
            flex-direction: row;
        }

        .news-index article a{
            flex-wrap:nowrap;
        }

            .news-index article .img {
         /*       width: auto;*/
                /*    max-width:150px;*/
          /*      height: 150px;*/
                width: 150px;
                /* height: 110px;*/
                height: 100% !important;
                display: block;
                margin-left: 1em;
                margin-top:1em;
            }

            .news-index article .desc {
                width: -moz-calc(100% - 170px);
                width: -webkit-calc(100% - 170px);
                width: -o-calc(100% - 170px);
                width: calc(100% - 170px);
            }

        .news-index .buttons {
            margin-top: 0;
        }

      /*  .news-index .buttons {
            margin-left: -1em;
        }*/

            .news-index .buttons .view-all {
                margin-left: 0;
            }

/*  --- Footer ---  */
    #MainFooter .footer-wrap {
        padding: 0;
    }

    #MainFooter .footer-box {
        width: 50%;
        margin-bottom:2em;
    }

/* Filer ------------ */
    .files {
        padding: 0 1em 3em 1em;
    }

        .files.files-detail {
            padding: 0 1em 1em 1em;
        }

    .kontor {
        padding: 2.5em 0 0 0;
    }

/* --- Logotyp --- */

    #MainHeader #Logo img {
        max-height: 40px;
 
}

@media only screen and (min-width : 0px) and (max-width : 50rem) {
    .text-content {
        flex-wrap:wrap:
    }

        .text-content .created-div{
            width:100%!important;
        }
        /* Sidhuvud ---------------- */

   
        #MainHeader .mobile-menu, #MainHeader .search-box {
            width: 155px;
        }

    #MainHeader .contact-link {
        border: 0px solid rgba(100, 144, 165,1.0);
        padding: 1em .5em .5em;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        border-radius: 0;
        height: auto;
    }

        #MainHeader .contact-link span {
            display: block;
            font-size: 0;
        }

            #MainHeader .contact-link span.mob {
                font-size: .7rem;
            }

        #MainHeader .contact-link .fal {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: .05em;
        }

/* Main ---------------- */
    #Main .text-content {
        padding: 0 1em 2em 1em;
    }

        #Main .info-pages .text-content, #Main .text-content.first {
            padding-top: 2.2em;
        }

        #Main .text-content h1 {
            line-height: 100%;
            margin-top: 0 !important;
            margin-bottom: 5%;
            font-size: 2rem;
            font-weight: 400;
        }


        h2.title, h2 {
            font-size: 1.6rem;
        }


    
/* News ---------------*/
    .news-buttons {
        margin: -1em auto 0 auto;
        padding: 0 1em 4em 1em;
    }

/* Contact -------------- */
    .contact-form {
        flex-wrap: wrap;
    }

        .contact-form .text {
            padding-right: 0;
        }

        .contact-form div, .contact-form fieldset {
            width: 100%;
        }

        .contact-form fieldset {
            margin-top: 1em;
        }

/* Footer -------------- */
    #MainFooter h2 {
        font-size: 1.6rem;
        margin-bottom: 5%;
    }

    #MainFooter p {
        font-size: 1em;
    }

 
}

@media only screen and (min-width : 0px) and (max-width : 40rem) {
    /* Misc ---------- */
    h2.title {
        margin-top: .5em;
        font-size: 1.6rem;
        margin-left: .5em;
        font-weight: 400;
    }

    h3 {
        font-size: 1.3rem;
    }

    .view-all, .view-all:hover, .send-btn, .send-btn:hover, .contact-form .k-button {
        width: auto;
        justify-content: left;
        font-size: 1.1em;
    }

    /* Header ---------------- */
    #MainHeader {
        padding: .5em .5em .5em .5em;
        box-sizing: border-box;
        height: 52px !important;
        max-height: 52px !important;
        min-height: 42px !important;
    }

        #MainHeader .contact-link, #MainHeader .open-admin-menu, #MainHeader #MenuIcon {
            margin-top: .4em;
        }

            #MainHeader .contact-link span, #MainHeader .open-admin-menu span, #MainHeader #MenuIcon span {
                position: relative;
                top: -.3em;
            }


        #MainHeader #Logo {
            order: 1;
            margin-left: 0;
            max-width: 80px;
            position: relative;
            top: -.1em;
        }

            #MainHeader #Logo img {
                max-width: 100%;
                height: auto;
                object-fit: contain;
            }

        #MainHeader .search-box {
            padding-left: 0;
            width: 95px;
            order: 2;
            margin-right: 1em;
        }


            #MainHeader .search-box input {
                height: 30px;
                font-size: .8rem;
            }

            #MainHeader .search-box button {
                top: .58em;
            }

            #MainHeader .search-box .fal, #MainHeader .search-box .far, #MainHeader .search-box .fas, #MainHeader .search-box .fad {
                font-size: 1rem;
            }

        #MainHeader .mobile-menu {
            width: auto;
            order: 3;
        }





    /* MainNav ------------- */
    #MainNav {
        height: -moz-calc(100% - 42px);
        height: -webkit-calc(100% - 42px);
        height: -o-calc(100% - 42px);
        height: calc(100% - 42px);
        top: 42px;
    }

    /* Main ----------- */
    .mob-content {
        padding-top: 2em !important;
    }


    #Main {
        margin-top: 50px;
        min-height: -moz-calc(100vh - 260px);
        min-height: -webkit-calc(100vh - 260px);
        min-height: -o-calc(100vh - 260px);
        min-height: calc(100vh - 260px);
    }

    #MainNav {
        height: -moz-calc(100% - 53px);
        height: -webkit-calc(100% - 53px);
        height: -o-calc(100% - 53px);
        height: calc(100% - 53px);
        top: 53px;
    }

    #Main .text-content {
        padding: 1em 1em 0 1em;
    }

        #Main .info-pages .text-content, #Main .text-content.first {
            padding-top: 3em;
        }

    /* News -------------*/
    .news a.arrow {
        width: 15px;
        font-size: 1.5rem;
    }

    .news-list article {
        width: 100%;
        margin-right: .6em;
    }

    .news-index {
        padding-left: 1.5em;
        padding-right: .5em;
        padding-top: 1em;
        padding-bottom: 1em;
    }

        .news-index .buttons {
            justify-content: left;
        }

        .news-index article {
            margin-bottom: .5em;
        }

            .news-index article .img {
                width: 70px;
                /* height: 110px;*/
                height: 100% !important;
                display:block;
                margin-left:1em;
            }

            .news-index article .desc {
                width: -moz-calc(100% - 80px);
                width: -webkit-calc(100% - 80px);
                width: -o-calc(100% - 80px);
                width: calc(100% - 80px);
            }

                .news-index article .desc p {
                    font-size: .95rem;
                    margin: 0;
                    overflow: hidden;
                }

                .news-index article .desc h3 {
                    margin: .3em 0 .3em 0;
                }

            .news-index article .desc {
                padding: .3em 1em 1em 1em;
            }

        .news-index .buttons .view-all {
            margin-left: 0;
            width: auto;
        }

    .news-list {
        padding: 1em .5em 1em 1em;
    }

    .news-buttons {
        margin: 1em auto;
        padding: 0 1em 4em 1em;
    }

    .news-index .buttons {
        margin-top: .5em;
        text-align: center;
    }


    /* Files ------------*/
    .files {
        padding: 0 1em 1em 1em;
        color: rgb(0, 74, 109);
    }

        .files .view-all {
            margin-left: auto;
            margin-right: auto;
            display: inline-flex;
            justify-self: center;
        }

        .files .view-all {
            width: 100%;
        }

        .files.files-detail {
            padding: 0 1em 1em 1em;
        }

        .files .filter-sliders select {
            width: 100%;
            margin: 0 0 .5em 0;
        }

        .files .buttons {
            width: auto;
            justify-content: left;
        }

    /* --- Footer --- */

    #MainFooter .footer-box {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-bottom: 0;
        padding: 0.5em;
    }

    #MainFooter p {
        line-height: 160%;
    }

    #MainHeader .admin-menu {
        top: 47px;
    }

    blockquote {
        padding: 1em;
    }
}


@media only screen and (min-width : 0px) and (max-width : 30rem) {
    /* Header -------- */

    #MainHeader .search-box {
        margin-right: .5em;
    }

    #MainHeader .open-admin-menu {
        padding: 1em .5em .5em;
    }




    .view-all {
        width: 100%;
    }

    /*  --- Table ---*/

    table tr td p, table tr td {
        font-size: 0.85rem !important;
    }

  
}

@media only screen and (min-width : 0px) and (max-width : 21rem) {
/* Header -------------- */
    #MainHeader {
        padding: .5em .25em .5em .25em;
    }


        #MainHeader .contact-link {
            padding: 1em .5em .5em;
        }

        #MainHeader .open-admin-menu {
            padding: 1em .5em .5em;
            margin-right:-.5em;
        }

    #MainHeader .search-box {
        width: 75px;
        margin-right: .5em;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .large-img {
        margin-top: 3em !important;
    }
}
