* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
}

html, body {
    font-size: 20px;
    line-height: 1.4rem;
    font-family: Panton-Regular, Arial  !important;
    height: 100%;
    margin: 0;
    overflow: auto;
}

body {
    margin: 0;
    color: #3D3935;

    background: #F1F0F0;
    background-image: url(https://www.primeq.se/wp-content/themes/primeq2/images/q_vitt.svg);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    background-size: 700px;
}

p {
    font-size: 20px;
    line-height: 1.4rem;
    font-family: Panton-Regular, Arial  !important;
}

h1, h2 {
    font-family: Panton-Regular !important;
    font-size: 1.5rem;
    line-height: 2.25rem;
}

h3, h4, h5 {
    font-family: Panton-Regular, Arial !important;
    font-size: 1.25rem;
    line-height: 2rem;
}

img {
    max-width: 100%;
    max-height: 100%;
}


#page {
    position: relative;
}

#page-inner {
    max-width: 1920px;
    margin: 0px auto 0;
}

.container {
    width: 100%;
    max-width: 1500px;
    margin: 0px auto;
    padding: 0px 50px 50px;
}

header {
    width: 100%;
    max-width: 1500px;
    padding: 40px 40px 0px;
    margin: 0px auto;
    display: flex;
}
header > .heading {
    flex-grow: 1;
    text-align: center;
    margin: 0px 30px;
}

header > .heading > h1 {
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
}

header > .logo {
    width: 175px;
    height: 70px;
}

header > .user-nav {
    width: 250px;
    text-align: center;
}

header > .user-nav > .user-nav-items {
    text-align: left;
}

header > .user-nav > .user-nav-items > .item > .user-info {
    list-style: none;
    margin:0;
    padding: 0;
}

header > .user-nav > .user-nav-items > .item > .user-info > .user-name { font-weight: bold; color: #CE0E2D; }
header > .user-nav > .user-nav-items > .item > .user-info > .user-job-title { font-style: italic; font-size: 0.8rem; }
header > .user-nav > .user-nav-items > .item > .user-info > .user-office-location { font-size: 0.8rem; }
header > .user-nav > .user-nav-items > .item > .user-info > .user-email { font-size: 0.8rem; }
header > .user-nav > .user-nav-items > .item > .user-info > .user-mobile-phone { font-size: 0.8rem; }

#bread-nav {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #CE0E2D;
}

.container-welcome {
    margin-top: 30px;
}

.container-grid {
    display: grid;
    column-gap: 50px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(4, 1fr);
}

.container-grid > .col {
    position: relative;
    border: 1px solid #8d8b8c;
    min-height: 450px;
    background-size: cover;
    background-position: top;
}

.container-grid > .col.support {
    background-image: url('../images/background-support.jpg');
}

.container-grid > .col.applikationer {
    background-image: url('../images/background-applikationer.jpg');
}

.container-grid > .col.medarbetare {
    background-image: url('../images/background-medarbetare.jpg');
}

.container-grid > .col.inkop {
    background-image: url('../images/background-inkop-lexium.jpg');
}

.container-grid > .col.finans {
    background-image: url('../images/lexium-finans.jpg');
}

.container-grid > .col.iso-hseq {
    background-image: url('../images/background-hseq.jpg');
}

.container-grid > .col.marknad {
    background-image: url('../images/background-marknad.jpg');
}

.container-grid > .col.fordon {
    background-image: url('../images/background-fordon.jpg');
}

.container-grid > .col.forsaljning {
    background-image: url('../images/background-forsaljning.jpg');
}

.container-grid > .col > .inner {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background:rgba(255,255,255,0.5);
    padding: 30px 30px 30px 30px;
}

.container-grid > .col > .inner > .icon {
    width: 70px;
}

.container-grid > .col > .inner > .content {
    color: #FFF;
    background:rgba(0,0,0,0.4);
    padding: 10px 15px;
    margin-top: 20px;
}

.container-grid > .col > .inner > .content > h2 {
    margin: 0;
}

.container-grid > .col > .inner > .content > p {
    margin-top: 0.3rem;
}

.container-grid > .col > .inner > .cta {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: -24px;

    padding: 10px 20px;

    background: #CE0E2D;
    color: #fff;

    box-shadow: rgba(0,0,0,0.7) 0px 5px 9px -3px;
}

.container-grid > .col:hover > .inner > .cta {
    background: #F50E30;
    transition: 500ms;
}

.container-grid > .col:hover > .inner {
    background:rgba(255,255,255,0.2);
    transition: 500ms;
    cursor: pointer;
}


.container-textnav-grid {
    display: grid;
    column-gap: 50px;
    grid-row-gap: 50px;
    grid-template-columns: repeat(4, 1fr);
}

.container-textnav-grid > .col {
    position: relative;
    border: 1px solid #8d8b8c;
    background-size: cover;
    background-position: top;
    background: rgba(255,255,255,0.7);
}

.container-textnav-grid > .col > .inner {
    padding: 30px;
    height: 100%;
}

.container-textnav-grid > .col > .inner > .content > h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 2rem;
}

.container-textnav-grid > .col > .inner > .content > p {
    margin-top: 10px;
}

.container-textnav-grid > .col > .inner > .cta {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: -24px;
    border: none;
    outline: none;
    cursor: pointer;

    padding: 10px 20px;

    background: #CE0E2D;
    color: #fff;

    box-shadow: rgba(0,0,0,0.7) 0px 5px 9px -3px;

    text-align: center;
    text-decoration: none;
}

.container-textnav-grid > .col > .inner > .cta:hover {
    background: #F50E30;
    transition: 500ms;
}
/*
.container-textnav-grid > .col:hover > .inner {
    transition: 500ms;
    cursor: pointer;
}

.container-textnav-grid > .col:hover > .inner > .cta {
    background: #F50E30;
    transition: 500ms;
}*/


.footer-nav-back {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 12px 0px;

    cursor: pointer;

    background: #F50E30;
    color: #FFF;

    box-shadow: rgba(0,0,0,0.7) 0px -5px 6px -3px;
}

.inner > .logo {
    height: 80px;
    text-align: center;
    padding-bottom: 20px;
}

.inner > .logo > img {
    height: 80px;
    max-width: 100%;
}

@media only screen and (max-width: 1200px) {
    .container-grid, .container-textnav-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-row-gap: 50px;
    }
}

@media only screen and (max-width: 1000px) {
    .container-grid, .container-textnav-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 50px;
    }
}

@media only screen and (max-width: 700px) {
    .container-grid, .container-textnav-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-row-gap: 50px;
    }
}