@media screen and (max-width: 770px){
    body,html{height: 100%;}
    body{background: #14283F;}
    .wrapper{overflow: hidden; min-height:100%;}
    .header{
        text-align:left; 
        padding:10px 20px; 
        box-sizing:border-box; 
        -moz-box-sizing:border-box; 
        position:relative;
        background:#031730;
    }

    .header .logo-mobile{display:inline-block; vertical-align:middle; max-width: 125px;}
    .header .logo-mobile img{display:block; padding: 3px 0;}
    .header .logo{display:none;}


    .content{background: #fff;}
    .content section{padding:55px 0; margin:0 20px;}
    img{max-width:100%;}
    .scroll-top{position:fixed; right:20px;}
    .scroll-top img{width:50px; height:}

/*nav-slide*/
    .wrapper.nav-slide .header {position:static;}

    .header-container,
    .wrapper .content{
        -webkit-transition: .2s;
        -moz-transition: .2s;
        transition: .2s;
        /*-webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);*/
    }

    .wrapper.nav-slide .header-container{
       -webkit-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        -moz-transform: translateX(-270px);
        transform: translateX(-270px);
    }
    .wrapper.nav-slide .content{
        position:fixed;
        -webkit-transform: translateX(-270px);
        -ms-transform: translateX(-270px);
        -moz-transform: translateX(-270px);
        transform: translateX(-270px);
    }


    /* navigation */
    .navigation{ 
        position:absolute; 
        right: 0px; 
        top:0px; 
        z-index:-1; 
        width: 270px;
        padding-bottom: 20px;
        -webkit-transition: .2s
        -moz-transition: .2s;
        transition: .2s;
        /*-webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);*/
    }
    .wrapper.nav-slide .navigation{
        -webkit-transform: translateX(270px);
        -ms-transform: translateX(270px);
        -moz-transform: translateX(270px);
        transform: translateX(270px);
    }

    .navigation li{margin:0px; display: block; text-align:center;}
    .navigation li a{ display:block; width:100%; padding:10px 20px; box-sizing:border-box; -moz-box-sizing: border-box; text-transform: uppercase;}
    .navigation:after{content:''; position:absolute; bottom:0px; height:2px; width: 30px; left:50%; margin-left:-15px; background:#1F4D6B ;}

    .menu-btn{
        cursor: pointer; position:absolute; right:0; top:0; padding:15px 12px 15px 15px; width: 30px; height: 25px;  border-left: 1px solid #292D49;
    }
    .menu-btn .icon{
        display:block;
        width: 100%; 
        height: 2px; 
        margin: 12px 0; 
        background: #A0A6BE  ; 
        background-size: 29px auto; 
        -webkit-transition: background-color .4s;
        transition:background-color .4s; position: relative; 
        border-radius: 3px;
}
    .menu-btn .icon:before,
    .menu-btn .icon:after{
        border-radius: 3px;
        content: '';
        position: absolute;
        right:0px;
        height: 2px;
        width: 100%;
        background: #A0A6BE  ;
        -webkit-transform-origin: 0.28571rem center;
        transform-origin: 0.28571rem center;
        -webkit-transition: 0.2s ease-in-out;
        -moz-transition: 0.2s ease-in-out;
        -o-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }
    .menu-btn .icon:after{ bottom:-11px; }
    .menu-btn .icon:before{ top:-11px; }

    .nav-slide .menu-btn .icon{background: transparent;}
    .nav-slide .menu-btn .icon:before{
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        top: 0;
    }
    .nav-slide .menu-btn .icon:after{
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        bottom: 0;
    }

    
}


@media screen and (min-width: 770px) and (max-width: 1200px){
    .content section{margin:0 20px;}
    .scroll-top{position:fixed; right:30px;}
}

/* ====== PRODUKTBOXAR ======== */
@media screen and (min-width: 320px) and (max-width: 380px){
    .content section.products .box .box-content {padding:33px;}
    .content section.products .box .box-content h2{
        font-size: 1.27em; 
        -ms-word-break: break-all; 
        word-break: break-all; 
        word-break: break-word;

        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
    }
}

@media screen and (min-width: 320px) and (max-width: 500px){
    .content section.products .box .box-header{height: 140px;}
    .content section.products .box .box-header .icon{padding-top: 33px;}
    .content section.products .box .box-header .icon img{width:75px; height:auto;}
}


@media screen and (min-width: 320px) and (max-width: 700px){
    .content section.products .box.first,
    .content section.products .box.last,
    .content section.products .box{width: 100%; padding: 0; min-height:0px;}
    .content section.products .box .box-inner{min-height:0px;}
}

@media screen and (min-width: 700px) and (max-width: 990px){
    .content section.products .box.first,
    .content section.products .box.last,
    .content section.products .box{width: 50%; padding: 0 12px; min-height:414px;}
}

@media screen and (min-width: 990px) and (max-width: 1170px){
    .content section.products .box .box-content h2{font-size:1.2em;}
}


/* ====== NYHETER / DRIFTINFORMATION ======== */

@media screen and (max-width: 1200px){
    .content section.news{margin:0 20px;}
}
@media screen and (min-width: 320px) and (max-width: 770px){
    .content section.news .box{float:none; width:100%; padding:55px 0px;}
    .content section.news .box.last{padding-top: 55px; border-top: 1px solid #d4d4d4;}
    .content section.news h2{margin-bottom:10px;}
}

/* ====== SUPPORT/KONTAKT ======== */

@media screen and (max-width: 770px){
     .content section.contact .box.first{
        width: 100%; 
        margin: auto; 
        text-align: right; 
        background: #444E67; 
        background: -moz-linear-gradient(45deg,  rgba(77,88,114,1) 31%, rgba(68,78,103,1) 31%); 
        background: -webkit-gradient(linear, left bottom, right top, color-stop(31%,rgba(77,88,114,1)), color-stop(31%,rgba(68,78,103,1))); 
        background: -webkit-linear-gradient(45deg,  rgba(77,88,114,1) 31%,rgba(68,78,103,1) 31%); 
        background: -o-linear-gradient(45deg,  rgba(77,88,114,1) 31%,rgba(68,78,103,1) 31%); 
        background: -ms-linear-gradient(45deg,  rgba(77,88,114,1) 31%,rgba(68,78,103,1) 31%); 
        background: linear-gradient(45deg,  rgba(77,88,114,1) 31%,rgba(68,78,103,1) 31%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d5872', endColorstr='#444e67',GradientType=1 );

        padding:0; 
        margin-top:0;
    }
}
@media screen and (min-width: 550px) and (max-width: 770px){
    .content section.contact .box{width:50%; margin-top: 40px;}
    .content section.contact .box.first img{width: auto; display:block; float:right; clear:right;}
    .content section.contact .box.last{padding:0px;}
}

@media screen and (min-width: 320px) and (max-width: 550px){
    .content section.contact .box{width:100%; margin-top: 40px; padding:0px!important;}
    .content section.contact .box.last{position:relative; margin-top: 20px; padding-top:20px!important;}
    .content section.contact .box p{margin-bottom:0px;}
    .content section.contact .box.last:before{
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        height: 1px;
        width: 30%;
        background: #74A4A8;
    }
    .content section.contact h2{font-size: 1.2em;}
}