/* Erfator */

@import url("https://unpkg.com/aos@2.3.1/dist/aos.css");
@import url("https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap");

@import url("https://use.typekit.net/thc7nqf.css");

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap");

@import url("https://use.typekit.net/uvs8psd.css");

/* ==========================================================================
Generellt
========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media only screen and (hover: none) {

    *,
    *::before,
    *::after {
        background-attachment: scroll !important;
        background-position: center center;
    }
}

html {
    font-size: 62.5%;
}

body {
    background-position: center center;
    overflow-x: hidden !important;
    font-family: "museo-sans", sans-serif;

}

body.isMobile .body-background {
    background-position: center center;
    background-size: cover;
}

.LayoutPage .section-block,
.SubPage .LayoutPage .section-block {
    padding: 15rem 5rem;
}

@media only screen and (max-width: 1024px) {

    .LayoutPage .section-block,
    .SubPage .LayoutPage .section-block {
        padding: 10rem 2rem;
    }
}

@media only screen and (max-width: 480px) {

    .LayoutPage .section-block,
    .SubPage .LayoutPage .section-block {
        padding: 7.5rem 1.5rem;
    }
}

.section-block-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.LayoutPage .section-block-wrapper {
    max-width: 120rem;
}

.width-1200 .section-block .section-block-wrapper {
    max-width: 120rem;
}

.width-1500 .section-block .section-block-wrapper {
    max-width: 150rem;
}

.display-none {
    display: none;
}

.EditMode .display-none {
    display: block;
}

.primary-color {
    color: #799647;
}

.secondary-color {
    color: #ead7d1;
}

.text-white {
    color: #fff;
}

.gray .section-block {
    background-color: #403e3f;
}

.gray .section-block p {
    color: #fff;
}

.light-gray .section-block {
    background-color: #f8f8f8;
}

.black {
    color: #111 !important;
}

.orange {
    color: #ff671f !important;
}

.bg-beige .section-block {
    background-color: #f9f8f2;
}

/* Specifika paddings */

.pb-2 {
    padding-bottom: 2rem;
}

.pt-2 .section-block,
.pt-2:not(.section-wrapper) {
    padding-top: 2rem !important;
}

.EditMode #editBtns {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
Buttons
========================================================================== */

.btn {
    max-width: 42rem;

    box-sizing: border-box;
    padding: 1.6rem 5rem;
    border-radius: 0rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    line-height: 1em;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline-block;
    text-align: center !important;
}

.btn::after {
    display: inline-block;
    content: " \2023";
    margin-left: 1rem;
    transition: all 0.4s ease;
}

.btn:hover::after {
    transform: translateX(1rem);
    transition: all 0.4s ease;
}

.btn-white,
.btn-white:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000000;
}

.btn-link,
.btn-link:hover {
    background-color: transparent;
    border-color: transparent;
    color: #000;
}

.btn-primary,
.btn-primary:hover {
    background-color: #ff671f;
    border-color: #ff671f;
    color: #fff !important;
    cursor: pointer;
}

.btn-secondary,
.btn-secondary:hover {
    background-color: #1f1a38;
    border-color: #1f1a38;
    color: #fff;
}

.btn-wrapper {
    margin-top: 2rem;
}

.btn-wrapper.center {
    display: flex;
    justify-content: center;
}

/* Button with arrow */

.btn.arrow span {
    display: inline-block;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.btn.arrow:hover span {
    transform: translateX(8px);
    transition: all 0.3s ease;
}

.btn.arrow::before,
.btn.arrow::after {
    position: relative;
    display: inline-block;
}

.btn.arrow::before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0da";
    transform: translateX(-30px);
    opacity: 0;
    transition: all 0.5s ease;
}

.btn.arrow::after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f0da";
    transform: translateX(8px);
    opacity: 1;
    transition: all 0.5s ease;
}

.btn.arrow:hover::before {
    transform: translateX(-8px);
    opacity: 1;
    transition: all 0.5s ease;
}

.btn.arrow:hover::after {
    transform: translateX(30px);
    opacity: 0;
    transition: all 0.5s ease;
}

@media only screen and (max-width: 480px) {
    .btn {
        display: block;
        width: 100%;
        line-height: 1.4;
        font-size: 1.3rem;
        letter-spacing: 1px;
        padding: 1.6rem 2rem;
        text-align: center !important;
    }

    .btn-wrapper .btn {
        margin: 1.5rem 0;
    }
}

/* ==========================================================================
Text och typsnitt
========================================================================== */
p,
li {
    line-height: 1.8;
    font-size: 1.6rem;
    color: #333;
    font-family: inherit;
    font-weight: 400;
    text-decoration: none;
}

a {
    line-height: inherit;
    font-size: inherit;
    color: #f46d20;
    font-family: inherit;
    font-weight: inherit;
}

a:hover {
    text-decoration: underline;
    color: #f46d20;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: museo-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0px;
    line-height: 1.3;
    color: #111;
    padding-bottom: 2rem;
    text-transform: normal;
}

h1 {
    font-size: 5rem;
}

h2,
h2.section-title+h3 {
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h3 {
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

h4 {
    font-size: 2rem;
}

.lead {
    font-size: 1.25em;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding-bottom: 1em;
}

.small-title {
    padding-bottom: .3em;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.4;
}

.bold {
    font-weight: 700;
    padding-top: 2rem;
    padding-bottom: 0rem;
}

.bg-color {
    background-color: #333 !important;
}

.italic {
    font-style: italic;
}

.white-text {
    color: #fff !important;
}

.h-intro {
    font-style: normal;
    font-size: 0.6em;
}

.ingress {
    font-weight: 700;
    font-size: 1.7rem;
    margin-bottom: 2rem;
}

/* lilla "abc"-blocket */
.smalltext-type {
    max-width: none;
}

/* stora "ABC"-blocket */
.normaltext-type {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
}

.no-uppercase {
    text-transform: none !important;
}

@media only screen and (max-width: 1024px) {
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.5rem;
    }

    h4 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 630px) {
    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.3rem;
    }

    p,
    a,
    h2,
    h3,
    h4,
    h5,
    .heading-type h1,
    .heading-type h2,
    .heading-type h3 {
        text-align: left !important;
    }

    nav.mainmenu a {
        text-align: center;
    }
}

@media only screen and (max-width: 380px) {
    h2 {
        font-size: 2.5rem;
    }
}

.full-width-textblock {
    position: relative;
    top: 0;
    max-width: 130rem;
    width: 100%;
    height: 100%;
    padding: 0 5rem 2rem;
    margin: 0 auto;
}

.text-wrapper {
    max-width: 60rem;
    width: 100%;
    text-align: left;
}

/* ==========================================================================
Split Wrapper
========================================================================== */

.section-split .section-block .normaltext-type {
    max-width: none;
}

.section-split .section-block .section-block-wrapper {
    max-width: 160rem;
}

.split-wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.split-wrapper.reverse {
    flex-direction: row-reverse;
}

.split-content {
    width: 55%;
    display: flex;
    padding: 8rem;
    text-align: left;
    background-color: #fff;
}

.split-content .align-self-start {
    align-self: unset;
}

.split-image {
    width: 45%;
    position: relative;
    overflow: hidden;
}

.split-text {
    align-self: center;
    max-width: 70rem;
}

.split-image img {
    position: absolute;
    transform: translate(-50%, -50%);
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: unset !important;
}

@supports (object-fit: cover) {
    .split-image img {
        position: relative;
        transform: none;
        top: unset;
        left: unset;

        object-fit: cover;
        object-position: center;
        height: 100% !important;
        width: 100% !important;
    }

    .split-image.contain img {
        object-fit: contain;
        object-position: center top;
    }
}

@media only screen and (max-width: 1200px) {
    .split-content {
        padding: 6rem;
    }
}

@media only screen and (max-width: 1000px) {
    .split-content {
        padding: 2rem;
        width: 100%;
    }

    .split-image {
        width: 100%;
        padding: 0;
    }
}

@media only screen and (max-width: 696px) {
    .split-wrapper {
        padding-top: 3rem;
    }
}

/* ==========================================================================
Header / Navigation
========================================================================== */

header {
    background-color: transparent;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    box-shadow: none;
    height: 10rem;
}

header .container {
    max-width: none;
    padding: 0 3rem;
}

header.scrolled {
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    height: 8rem;
    background-color: #fff;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1024px) {
    header .container {
        padding: 0 2rem;
    }
}

header .container::after {
    content: "";
    display: table;
    clear: both;
}

header .header-logo {
    width: 20rem;
    line-height: 10rem;
    padding: 0;
    display: block;
    float: left;
    transition: all 300ms linear;
}

header.scrolled .header-logo {
    display: block;
}

header.scrolled .header-logo a {
    background-image: url("/assets/images/Logo_CMYK.png");
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
    width: 29rem;
    position: absolute;
}

header .header-logo a {
    height: 8rem;
    background-image: url("/assets/images/Logo_Vit_CMYK.png");
    background-size: auto 4.2rem;
    background-repeat: no-repeat;
    margin-top: 2rem;
}

nav.mainmenu {
    text-align: right;
}

nav.mainmenu ul {
    text-align: right;
}

nav.mainmenu ul.TemplateMenu>li {
    line-height: normal;
    height: auto;
}

nav.mainmenu ul.TemplateMenu>li:first-child {
    display: none;
}

.EditMode nav.mainmenu ul.TemplateMenu>li:first-child {
    display: inline-block !important;
}

nav.mainmenu a {
    font-family: museo-sans, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 1.55rem;
    color: #fff;
    text-transform: uppercase;
    padding: 0 1.5rem;
    letter-spacing: 1px;
    display: block;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    line-height: 8rem;
    margin-bottom: -1px;
}

header.scrolled nav.mainmenu a,
.EditMode header nav.mainmenu a {
    color: #111;
}

header nav.mainmenu a {
    display: inline-block;
}

nav.mainmenu li:hover,
nav.mainmenu li.active {
    background-color: transparent;
}

nav.mainmenu li:hover a,
nav.mainmenu li.active a,
header.scrolled nav.mainmenu .fab {
    color: #ff671f !important;
}

/* Dropdown menu */
nav.mainmenu ul>li.expandable-li:hover {
    background-color: transparent;
}

nav.mainmenu li:hover,
nav.mainmenu li.active {
    background-color: transparent !important;
}

nav.mainmenu ul>li.expandable-li:hover>a {
    color: #afd39e;
    padding-bottom: 0;
}

nav.mainmenu ul>li>ul {
    background: #f7f7f7;
    padding: 0;
    box-sizing: border-box;
    line-height: normal;
    height: auto;
    min-width: 100%;
    width: auto;
    text-align: left;
    z-index: 10;
}

.EditMode nav.mainmenu ul>li>ul {
    max-height: 75vh;
    overflow: auto;
}

nav.mainmenu ul>li>ul>li {
    padding: 0 15px;
    background: #f8f8f8;
}

nav.mainmenu ul>li>ul a {
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 30px;
}

nav.mainmenu ul>li>ul>li>a {
    color: #444 !important;
    text-transform: unset;
    letter-spacing: normal;
    padding: 10px;
}

nav.mainmenu ul>li>ul>li>ul a {
    color: #444 !important;
}

nav.mainmenu ul>li>ul>li>ul {
    /*     top: -20px; */
    right: 0px;
}

nav.mainmenu ul>li.expandable-li:hover ul {
    background: #e6e8e9;
}

nav.mainmenu ul>li>ul>li:hover a,
nav.mainmenu ul>li>ul>li.active a {
    color: #ff671f !important;
}

nav.mainmenu ul>li>ul>li.expandable-li:hover>a {
    color: #afd39e;
    border-bottom: none;
    padding-bottom: 10px;
}

nav.mainmenu .expandable:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 700;
    content: "\f0d7";
    margin-left: 7px;
    text-decoration: none;
    display: inline-block;
}

nav.mainmenu li:hover .nav-dropdown:after {
    text-decoration: none !important;
}

nav.mainmenu .parent.expandable {
    cursor: default;
}

nav.mainmenu .parent.expandable:after {
    content: "\f0da";
}

nav.mainmenu ul.TemplateMenu>li {
    line-height: 72px;
    height: auto;
}

nav.mainmenu ul>li.expandable-li:hover>a {
    color: #ff671f !important;
}

@media only screen and (min-width: 1301px) {
    .hamburger {
        display: none;
    }

    .expandable:after {
        font-family: "Font Awesome 5 Pro";
        font-weight: 700;
        content: "\f0d7";
        margin-left: 7px;
        text-decoration: none;
        display: inline-block;
        font-size: 0.8em;
        vertical-align: middle;
    }
}

@media only screen and (max-width: 1300px) {

    header,
    header.scrolled {
        background-color: #fff !important;
        height: 7rem;
    }

    header.scrolled .header-logo {
        display: block;
        z-index: 101;
    }

    header.scrolled .header-logo a {
        background-image: url("/assets/images/Logo_CMYK.png");
        -webkit-transition: all 500ms linear;
        -moz-transition: all 500ms linear;
        -o-transition: all 500ms linear;
        -ms-transition: all 500ms linear;
        transition: all 500ms linear;
        width: 22rem;
        position: absolute;
    }

    header .header-logo a {
        height: 8rem;
        background-image: url("/assets/images/Logo_CMYK.png");
        background-size: auto 4.2rem;
        background-repeat: no-repeat;
        margin-top: 2rem;
    }

    /* Navigation */
    nav.mainmenu {
        text-align: left;
        display: none;
        position: fixed;
        height: 100%;
        left: 0;
        width: 35rem;
        background-color: #fff;
        z-index: 15;
        top: 0;
        box-shadow: none;
        overflow-y: scroll;
    }

    nav.mainmenu .Padding {
        margin: 8rem 0 !important;
    }

    nav.mainmenu li {
        text-align: left;
        display: block;
    }

    nav.mainmenu ul {
        left: 0;
    }

    nav.mainmenu ul>li>ul {
        background: #fff !important;
    }

    nav.mainmenu ul>li>ul>li {
        background-color: #fff;
    }

    .SubPage nav.mainmenu a,
    nav.mainmenu li a {
        color: #000 !important;
        margin: unset;
        padding: unset;
        padding-left: 4rem;
        font-size: 1.6rem;
        line-height: 3.7;
        display: block;
    }


    nav.mainmenu .header-btn {
        left: 4rem;
        margin-top: 2rem;
    }

    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        z-index: 7;
    }

    /* Hamburger */
    .hamburger {
        position: absolute;
        z-index: 99;
        left: auto;
        right: 2rem;
        top: 0.7rem;
        color: white;
    }

    .hamburger-inner,
    .hamburger-inner::after,
    .hamburger-inner::before {
        color: #111;
        background-color: #111;
    }

    /* Dropdown */
    nav.mainmenu ul>li>ul {
        background-color: #fff !important;
        width: auto !important;
        border: none;
    }

    nav.mainmenu ul>li>ul {
        display: contents !important;
    }

    nav.mainmenu ul>li>ul>li a {
        color: #333 !important;
    }

    nav.mainmenu ul>li>ul>li>a {
        width: auto;
        padding: 0 0 0 4rem;
        display: block;
    }

    nav.mainmenu li.expandable {
        display: block;
    }

    nav.mainmenu ul>li.expandable-li:hover>a {
        padding-bottom: 0;
    }

    nav.mainmenu ul.TemplateMenu>li,
    .scrolled nav.mainmenu ul.TemplateMenu>li {
        line-height: unset;
        height: unset;
    }

    header .header-logo a {
        background-size: auto 4.2rem;
        margin-top: 1.4rem;
    }
}

@media only screen and (max-width: 768px) {
    header .header-logo a {
        margin-left: -2.5rem;
        margin-top: -0.5rem;
    }
}

@media only screen and (max-width: 767px) {
    header .header-logo a {
        margin-left: 0rem;
        margin-top: 1.3rem;
    }

    header .job-item li a {
        padding: 1rem;
    }

    nav.mainmenu {
        width: 100%;
    }

    header {
        background-color: transparent;
    }

    header.scrolled {
        background-color: #fff;
    }
}

@media only screen and (max-width: 499px) {
    header .header-logo a {
        margin-left: -2rem;
        margin-top: -0.5rem;
    }
}

/* ==========================================================================
Top-section
========================================================================== */

.top-section {
    height: auto;
    background-color: rgba(51, 51, 51, 0.6);
    z-index: 1;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-title-wrap {
    top: 52%;
    left: 50%;
    width: 100%;
    max-width: none;
    text-align: left;
    padding: 0;
}

.page-title-innerwrap {
    padding-left: 15rem;
    max-width: 80rem;
}

.page-title-wrap h1 {
    font-weight: 900;
    color: #fff;
    font-size: 6rem;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: none;
    text-transform: uppercase;
}

.page-title-wrap .btn {
    max-width: 45rem;
}

@media only screen and (max-width: 1450px) {
    .page-title-wrap h1 {
        font-size: 5rem;
        padding-top: 4rem;
    }
}

@media only screen and (max-width: 1150px) {
    .page-title-wrap h1 {
        font-size: 4.5rem;
    }
}

@media only screen and (max-width: 780px) {
    .page-title-wrap h1 {
        font-size: 4rem;
    }

    .page-title-innerwrap {
        padding-left: 10rem;
    }
}

@media only screen and (max-width: 780px) {

    .IndexPage .page-title-wrap,
    .page-title-wrap {
        width: 80%;
        padding: 0rem;
    }

    .page-title-innerwrap {
        padding-left: 0rem;
    }

    .page-title-wrap h1 {
        font-size: 3.1rem;
        line-height: 1.4;
    }
}

@media only screen and (max-width: 320px) {
    .page-title-wrap h1 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
Parallax
========================================================================== */
.parallax {
    max-width: 100% !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.parallax .section-block {
    background-color: rgba(0, 0, 0, 0);
    height: 55rem;
}

/* Video background */
.fullscreen-bg-video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Tjänster
========================================================================== */

/* BOX */
/* .services-wrap {
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
}

.service-box {
width: 52%;
margin: 0%;
text-align: center;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
padding: 3.5rem;
background-color: #403e3f;
border-radius: 2rem;
}

.service-icon {
padding: 0 2rem 2rem;
display: flex;
font-size: 2rem;
justify-content: center;
}

.far {
position: absolute;
top: 50%;
left: 56%;
transform: translate(-50%, -50%);
font-size: 7rem;
font-weight: 300;
color: #fff;
}

.services p {
padding-bottom: 2rem;
text-align: center !important;
color: #fff;
font-family: source sans pro;
}

.services h4 {
text-align: center !important;
color: #fff;
font-weight: 300;
}

.circle-wrapper {
position: relative;
height: 15rem;
width: 15rem;
margin: 1rem;
margin-top: 3rem;
background-color: #799647;
border-radius: 50%;
}

.service-text {
padding: 4rem;
}

.service-box img {
width: auto;
height: 10rem;
padding-bottom: 1.5rem;
padding-left: 3rem;
}

.highlight {
background-color: #e6e6e6;
color: #fff;
max-width: 20rem;
margin: 0 auto;
margin-bottom: 1.5rem;
}

@media only screen and (max-width: 1150px) {
.service-text {
    padding: 2rem;
}

.services-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
}

@media only screen and (max-width: 1100px) {
.service-box {
    width: 36%;
}
}

.service-wrap .fal {
font-size: 3rem;
font-weight: 300;
padding-top: 3rem;
}

.service-wrap h4 {
padding-bottom: 2rem;
font-size: 2.3rem;
letter-spacing: normal;
text-align: center !important;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
font-style: normal;
}

.service-wrap {
width: 33%;
margin: 0%;
vertical-align: top;
display: inline-block;
text-align: center;
overflow: hidden;
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}

.service-text {
height: auto;
}

.service-wrap * {
color: #fff;
}

.LayoutPage .wrap {
padding-top: 5rem;
}

.service {
padding-top: 5rem !important;
}

.overlay {
padding: 17rem 13rem;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}

.service-wrap:nth-child(1) {
background-image: url("https://www.erfator.com/wp-content/uploads/2020/06/Scandinavian-XPO_liten.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.service-wrap:nth-child(2) {
background-image: url("https://www.erfator.com/wp-content/uploads/2019/10/Skolpaviljong-R%C3%B6dabergsskolan.jpg");
background-position: 30% center;
background-size: cover;
background-repeat: no-repeat;
}

.service-wrap:nth-child(3) {
background-image: url("https://www.erfator.com/wp-content/uploads/2019/09/B%C3%A5tvrak-Skeppsholmen.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}

.service-wrap:hover h4 {
transform: translateY(-2rem);
text-decoration: none !important;
}

.service-wrap:hover {
text-decoration: none !important;
}

@media only screen and (max-width: 1440px) {
.overlay {
    padding: 14rem 5rem;
}
}

@media only screen and (max-width: 1140px) {
.services .service-wrap {
    width: 100%;
}

.services .service-wrap {
    background-size: 100% auto !important;
    background-position: center center !important;
    margin: 2% 0 0 0;
}

.overlay {
    padding: 9rem 5rem;
}

.services .service-text {
    height: 100%;
}
}

@media only screen and (max-width: 580px) {
.overlay {
    padding: 0rem 5rem;
}
.service-wrap h5 {
    font-size: 2rem;
}

.LayoutPage .wrap {
    padding-top: 1rem;
}

.services h3 {
    padding-bottom: 1rem;
}
.services .fal {
    font-size: 2rem;
    padding: 1rem;
}

.services .service-wrap {
    margin: 5% 0 0 0;
}

.service-s .btn {
    width: 90%;
    margin: 0 auto;
}
}

@media only screen and (max-width: 370px) {
.service-text h3 {
    font-size: 3rem;
    padding-top: 1rem;
}
.overlay {
    padding: 0rem 3rem;
}
} */

/* Startsida: Referensprojekt
========================================================================== */
.references-section .section-block-wrapper {
    max-width: unset !important;
}

.references-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.reference-item {
    position: relative;
    width: 31.333%;
    margin: 1%;
    padding: 2rem 0;
    transition: .3s ease;
    overflow: hidden;
}

.reference-item a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    min-height: 30rem;
}

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

.LayoutPage .block-object .reference-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@supports (object-fit: cover) {
    .LayoutPage .block-object .reference-item img {
        position: relative;
        transform: none;
        top: unset;
        left: unset;
        object-fit: cover;
        object-position: center;
        height: 100% !important;
        width: 100% !important;
    }
}

.reference-text-wrapper {
    z-index: 1;
    position: relative;
    width: 97%;
    min-height: 14rem;
    bottom: 3.5rem;
    padding: 1rem;
    margin: 2rem 0;
    transform: translateY(17rem);
    border-top-right-radius: 0.5rem;
    background-color: rgba(17, 17, 17, 0.89);
    transition: all 0.3s ease;
}

.reference-item:hover .reference-text-wrapper {
    bottom: 0;
    transform: translateY(0);
}

.reference-text-wrapper * {
    color: #FFF;
}

.reference-item a:hover {
    text-decoration: none;
}

.reference-text-wrapper h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding: 0;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    word-break: break-word;
    overflow: hidden;
}

.reference-item:hover .reference-text-wrapper h4 {
    -webkit-line-clamp: 3;
}

.reference-text-wrapper p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 0;
    overflow: hidden;
}

@media only screen and (max-width:1024px) {
    .references-section .reference-item {
        width: 100%;
        margin: 1rem 0;
    }
}

/* Startsida: Nyheter
========================================================================== */
.news-grid {
    display: flex;
    flex-wrap: wrap;
}

.news-item {
    width: 31.33%;
    margin: 1%;
    text-align: center;
    background-color: #f2f2f2;
    text-decoration: none !important;
    -moz-transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    -moz-transform: scale(0.97);
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
}

/* Video för nyhetsinlägg */
.news-item-video {
    position: relative;
    width: 100%;
    padding-top: 66.66%;
}

.news-item-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: unset;
}

/* Bild */
.news-item-image {
    position: relative;
    padding-top: 66.67%;
    overflow: hidden;
}

.LayoutPage .news-item-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

/* Nyhetstext */
.news-item-details {
    padding: 30px 20px 20px 20px;
    text-align: left;
}

/* TITLE */
.news-item-details h3 {
    font-size: 19px !important;
    line-height: 1.4em;
    text-transform: none;
    padding-bottom: 15px;
    font-weight: 600;
    padding-top: 0 !important;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
}

/* DATE  */
.news-item-details h4 {
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #858585;
}

/* DESCRIPTION  */
.news-item-details p {
    color: #504f4f;
    font-size: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.news-item-details a {
    text-decoration: none !important;
    font-size: 14px;
}

/* LÄS MER */
.news-item-link {
    text-align: left;
    padding-left: 25px;
    color: #000;
    line-height: 60px;
    font-size: 14px;
}

.fab.fa-linkedin {
    font-size: 18px;
    padding-right: 5px;
}


/* HOVER EFFECT */
.news-item:hover {
    background-color: #ff671f;
    -moz-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
    color: #fff !important;
}

.news-item:hover * {
    color: #fff;
}

.news-item:hover .news-item-link {
    color: #fff;
    text-decoration: underline !important;
}

.news-item:hover .news-item-details p {
    color: #fff !important;
}

.news-item:hover .news-item-details h4 {
    color: #fff !important;
}

.news-item-details h4:hover {
    color: #fff !important;
}

#seeLess,
#seeMore {
    display: inline-block;
    margin: 0 15px;
}

.btn-news {
    text-align: center;
    padding-top: 2em;
}

#news-grid .news-row {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .news-item {
        width: 46%;
    }
}

@media only screen and (max-width: 969px) {
    .news-item {
        width: 100%;
        margin: 0;
        margin-bottom: 40px;
    }
}

/* Instagram Section 
========================================================================== */

.instagram-section .section-block {
    background-color: #111;
    padding-top: 7rem;
    padding-bottom: 2rem;
}

.instagram-section h2 {
    text-align: left !important;
    color: #fff;
}

.instagram-wrapper {
    overflow: hidden;
}

/* ==========================================================================
Undersidor - gäller alla undersidor
========================================================================== */
.SubPage .page-title-wrap,
.SubPage .top-section {
    display: none;
}

.SubPage nav.mainmenu a {
    color: #fff;
}

.SubPage header.scrolled nav.mainmenu a {
    color: #000;
}

/* Header för undersidor
========================================================================== */
.subpage-header {
    background-image: url(/assets/images/Bild-Fasad_subpage.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-color: rgba(51, 51, 51, 0.6);
    background-position: bottom;
}

.subpage-header .section-block {
    background-color: rgba(51, 51, 51, 0.6);
}

.subpage-header h1 {
    color: #fff;
    padding: 0;
    line-height: 1;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
}

.SubPage .subpage-header .section-block {
    padding: 15rem 2rem;
    background-color: rgba(51, 51, 51, 0.6);
}

.EditMode .subpage-header {
    padding-top: 20rem;
}

/* Breadcrumbs
========================================================================== */
ul.breadcrumb {
    padding: 1rem 0rem;
    list-style: none;
    margin: 2rem 0;
    transition: 0.4s ease-in-out;
    padding-top: 0;
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline-block;
    background-color: #f8f8f8;
    border-top: 2px solid #fc681f;
    padding: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
}

ul.breadcrumb li.img-first {
    background-color: white;
    border: none;
    padding: 0;
    width: 8rem;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
    padding: 1rem;
    color: black;
    content: "\f061";
    font-family: "Font Awesome 5 Pro";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #333;
    text-decoration: none;
    font-weight: 300;
}

ul.breadcrumb li a.active {
    color: black;

    font-weight: bold;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: inherit;
    text-decoration: underline;
}

iframe {
    max-width: 100%;
}

@media only screen and (max-width: 768px) {
    ul.breadcrumb li.img-first {
        display: block;
        margin-bottom: 1rem;
    }

    ul.breadcrumb {
        margin-top: -6rem;
    }
}

@media only screen and (max-width: 760px) {
    ul.breadcrumb li.img-first {
        display: block;
        margin-bottom: 1rem;
    }

    ul.breadcrumb {
        margin-top: -8rem;
    }
}

@media only screen and (max-width: 550px) {
    ul.breadcrumb li a {
        font-size: 1.2rem !important;
    }

    ul.breadcrumb li.img-first {
        max-width: 5rem;
    }

    ul.breadcrumb {
        margin-top: -7rem;
    }

    .subpage-header h1 {
        font-size: 3.3rem;
    }
}

@media only screen and (max-width: 320px) {
    .subpage-header h1 {
        font-size: 2.7rem;
    }
}

/* Sidonavigering
========================================================================== */
.LayoutPage .index-section .col-0 {
    width: 30rem;
    padding: 0;
    position: sticky;
    top: 10rem;
}

.LayoutPage .index-section .col-1 {
    width: calc(100% - 30rem);
    padding-left: 5rem;
}

.text-block * {
    text-align: left !important;
}

/* Page Navigation */
.page-navigation {
    width: 100%;
    background-color: #333;
}

/* titel i menyn */
.page-navigation-title {
    font-size: 3rem;
    color: #fff;
    padding: 0 2rem;
    font-weight: 600;
    text-transform: uppercase;
}

.page-navigation-title .fad {
    display: none;
}

.page-nav-header {
    background-color: #e55d1c;
    margin-left: -2rem;
    margin-right: -1rem;
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
}

.project-info img {
    display: none;
}

.fad {
    font-size: 0;
    color: #fff;
    margin-right: 1rem;
}

.fad::before,
.fad::after {
    font-size: 3rem;
}

.page-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-navigation .pagemenu-item {
    position: relative;
    padding: 0;
    line-height: 1;
}

.pagemenu-link {
    display: block;
    padding: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.pagemenu-link:hover {
    background-color: #e55d1c;
    text-decoration: none;
}

.pagemenu-link.active {
    text-decoration: underline;
    font-weight: 600;
    background-color: #e55d1c;
}

.pagemenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    width: 4rem;
    height: 4rem;
    border: none;
    cursor: pointer;
}

.pagemenu .about {
    padding: 0.5rem 2rem;
}

.pagemenu.about li {
    line-height: 1.5;
    font-size: 1.4rem;
}

.pagemenu li a {
    color: white;
}

.pagemenu-toggle:hover {
    background-color: #cfcfcf;
}

.pagemenu-toggle::after {
    display: inline-block;
    position: absolute;
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size: 1.4rem;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.pagemenu-toggle.button-clicked::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.page-navigation .pagemenu-submenu {
    background-color: #f2f2f2;
    padding: 1rem 0;
}

.pagemenu-submenu {
    display: none;
}

.page-navigation .pagemenu-subpage-item {
    padding: 0;
    line-height: 1;
}

.pagemenu-submenu-link {
    padding: 1rem 2rem 1rem 5rem;
    display: block;
    font-size: 1.4rem;
    line-height: 1.4;
}

.pagemenu-subpage-item.active .pagemenu-submenu-link {
    color: #a161bf;
}

@media only screen and (max-width: 1000px) {
    .LayoutPage .index-section .col-0 {
        width: 100%;
        position: relative;
        top: auto;
    }

    .LayoutPage .index-section .col-1 {
        width: 100%;
        padding-left: 0;
    }

    .page-nav-header {
        margin-left: -1rem;
    }

    .page-navigation {
        margin-bottom: 5rem;
    }
}

/* ======================================================================
Undersida: Om oss
========================================================================== */

.sub-about .section-split .section-block {
    padding-left: 0;

    padding-top: 5rem;
}

.sub-about .right .section-block {
    padding-top: 8rem;
    padding-right: 0;
    padding-bottom: 0;
}

.sub-about .left .section-block {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 7rem;
}

.fad .fa-person-dolly-empty {
    display: none;
}

.sub-about .page-navigation {
    display: flex;
}

.sub-about .page-navigation ul {
    display: flex;
}

.sub-about .pagemenu-link {
    line-height: 2;
}

.page-navigation .col-1 {
    width: 50%;
    margin: 2%;
}

/* ======================================================================
Undersida: Om oss / Vision & affärside
========================================================================== */

.sub-vision .split-content {
    background-color: #333;
    width: 50%;
}

.grayscale {
    filter: grayscale(100%);
}

/* Så att split-wrappers går ut i kanten */
.top-header .section-block {
    padding-right: 0 !important;
}

.sub-vision .right .section-block {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 7rem !important;
}

.sub-vision .left .section-block {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 7rem;
}

.sub-vision .left .section-block-wrapper,
.sub-vision .right .section-block-wrapper {
    max-width: none;
}

.sub-vision .split-image {
    width: 50%;
}

.right .split-content {
    width: 43.5%;
}

.right .split-image {
    width: 56.5%;
}

.sub-vision .split-content {
    background-color: #fff;
}

@media only screen and (max-width: 1000px) {
    .sub-vision .split-content {
        width: 100%;
        padding-top: 3rem;
    }

    .sub-vision .split-image {
        width: 100%;
    }
}

@media only screen and (max-width: 1000px) {

    .sub-vision .right .section-block,
    .sub-vision .left .section-block {
        padding-top: 0rem !important;
    }

    .sub-sustainable .right .section-block {
        padding-top: 6rem !important;
    }
}

@media only screen and (max-width: 550px) {
    .sub-vision .right .section-block {
        padding-top: 3rem !important;
    }

    .sub-sustainable .right .section-block {
        padding-top: 4rem !important;
    }
}

/* ======================================================================
Undersida: Cookie/integritetspolicy
========================================================================== */

.sub-policy .news-page .split-wrapper {
    display: block;
    padding: 4rem;
}

.sub-project .split-content {
    padding: 4rem;
}

/* ======================================================================
Undersida: Historik
========================================================================== */

/* Tidslinje
========================================================================== */

.timeline {
    overflow: hidden;
}

.timeline-wrapper {
    position: relative;
    margin-top: 0rem;
    background-color: #fff;
}

.timeline-wrapper h3 {
    line-height: 1.5;
    letter-spacing: 0;
    font-size: 6rem;
}

.timeline-wrapper h2 {
    font-size: 2rem;
    color: black !important;
    letter-spacing: normal;
    font-weight: 300;
    font-family: museo-sans;
    padding-bottom: 0.5rem !important;
}

.timeline-wrapper::before {
    content: "";
    position: absolute;
    width: 2px;
    background-color: #111;
    top: 0;
    bottom: 0;
    left: 50%;
    border-radius: 40px;
}

.timeline-item:before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;

    background: #ff671f;
    position: absolute;
    left: 49.3%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-shadow: 0 0 0 4px #ffffff;
    box-shadow: 0 0 0 4px #ffffff;
    z-index: 1;
}

.timeline-item {
    margin-bottom: 1.6rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    flex-direction: row;
}

.timeline-text,
.timeline-image {
    width: 49%;
    box-sizing: border-box;
}

.timeline-text {
    padding-left: 7rem;
}

.timeline-item:first-child {
    padding-top: 3rem;
}

.timeline-text h3 {
    padding-top: 0;
    font-size: 3rem;
}

.text-label {
    font-family: museo-sans;
    font-size: 2rem;
    text-transform: uppercase;
}

.timeline-text p a:hover {
    text-decoration: underline !important;
    color: #fc903c !important;
}

.item-right {
    order: 1;
    justify-content: flex-end;
    padding-left: 15rem;
}

.item-left {
    padding-right: 15rem;
}

.item-right .timeline-text {
    padding-right: 5rem;
    padding-left: 0;
}

.timeline-item .timeline-image img {
    max-width: 35rem !important;
}

.timeline-item .timeline-image {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    display: none;
    align-items: center;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 1050px) {
    .timeline-text {
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .item-left {
        padding-right: 0;
    }

    .item-right {
        padding-left: 0;
    }

    .process h2 {
        padding-bottom: 0;
    }

    .timeline-text,
    .timeline-image {
        width: 100%;
    }

    .timeline-wrapper::before,
    .timeline-text:before {
        left: 0;
    }

    .timeline-item {
        left: 0;
    }

    .timeline-item:before {
        left: -1rem;
    }

    .timeline-item {
        border-bottom: 1px dotted #a6c7c8;
        padding-left: 2rem;
    }

    .item-right .timeline-text {
        padding-right: 0;
    }

    .timeline-text {
        padding-left: orem;
    }

    .timeline-text h2 {
        font-size: 1.8rem;
    }

    .timeline-text h3 {
        font-size: 2.5rem;
    }

    .timeline-text p {
        padding-bottom: 4rem;
    }

    .timeline-item .timeline-image {
        justify-content: center;
    }
}

/* ======================================================================
Undersida: Tjänster
========================================================================== */

/* box i topp med information */
.top-wrapper {
    padding: 10rem;
    padding-bottom: 15rem;
    background-color: #333;
}

.top-wrapper * {
    color: #fff;
}

/* Boxar med ikoner för deras tjänster */

.services-section .section-block {
    padding-bottom: 10rem !important;
}

.service-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: -12rem;
    position: relative;
    overflow: hidden;
    padding-bottom: 10rem;
}

.service {
    display: flex;
    width: 30%;
    margin: 0 2rem;
    padding-top: 7rem;
    position: relative;
    transition: all 0.5s ease;
}

.service .service-text {
    padding: 0rem;
}

.service-link {
    width: 100%;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;

    background-color: #fff;

    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.service[aria-hidden="false"] .service-link,
.service-link:hover {
    background-color: #444;
    transition: all 0.5s ease;
}

.service[aria-hidden="false"] .service-link *:not(.service-icon),
.service-link:hover *:not(.service-icon) {
    color: #fff;
    transition: all 0.55s ease;
}

.service-link:hover {
    text-decoration: none;
}

.service-icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    height: 20rem;
    margin: -8rem 0 3rem;
    z-index: 1;
    background-color: #f8f8f8;
    position: relative;
    border-radius: 50%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.service-icon {
    font-size: 8rem;
    color: #fc681f;
}

.service-title {
    font-weight: 700;
    font-size: 2.5rem;
    color: #fc681f;
    text-transform: none;
}

.service .btn-wrapper {
    margin-top: 2rem;
}

.services-section ul.breadcrumb li {
    padding: 0.6rem;
    margin: 1% 0.5%;
    text-transform: none;
}

@media screen and (max-width: 1190px) {
    .service {
        width: 42%;
    }

    .service-wrapper {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 760px) {
    .service {
        width: 100%;
        margin-bottom: 2rem;
    }

    .top-wrapper {
        padding: 2rem;
    }

    .service-wrapper {
        margin-top: 0;
    }
}

/* Parallax nr 2
========================================================================== */

.parallax-2 {
    background-image: url(/assets/images/Varatjanster.jpg);
}

.parallax-3 {
    background-image: url(/assets/images/Erfatorkontor1.jpg);
}

/* ======================================================================
Undersida: Erfator akademin
========================================================================== */

.sub-academy .service.big {
    width: 80%;
}

.sub-academy .service-wrapper {
    margin-top: -5rem;
}

.sub-academy .btn-link {
    color: #ff671f;
}

.sub-academy .service img {
    padding: 3rem;
}

.sub-academy .service-link {
    background-color: #333;
}

.sub-academy .service * {
    color: #fff;
}

.sub-academy .service-icon {
    padding: 2rem 2rem;
}

@media screen and (max-width: 760px) {
    .sub-academy .service.big {
        width: 100%;
        margin: 0;
    }
}

/* ======================================================================
Undersida: Erfator IF
========================================================================== */

.case-block .split-content {
    background: #000;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.case-block .split-content * {
    color: #fff;
}

.case-study-section {
    overflow: hidden;
}

.split-imageblock {
    width: 50%;
    padding: 0;
    margin: -2rem 0;
    border-radius: 5px;
}

@media only screen and (max-width: 1080px) {
    .case-block .split-content {
        padding: 7rem 5rem 7rem 5rem;
        width: 100%;
    }

    .split-imageblock {
        padding: 0rem 0;
    }

    .split-imageblock {
        width: 100% !important;
    }
}

.case-item {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.case-image {
    border-radius: 5px;
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.case-textblock {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4rem;
    width: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

.case-title {
    font-size: 1.8rem;
    line-height: 1;
    padding: 0;
    color: #fff;
}

.case-study-section .slick-list,
.case-study-section .slick-track {
    height: 100%;
}

.case-study-section .slick-prev {
    left: auto;
    right: 6rem;
    top: auto;
    bottom: 3rem;
    z-index: 1;
}

.case-study-section .slick-next {
    left: auto;
    right: 3rem;
    top: auto;
    bottom: 3rem;
    z-index: 1;
}

/* Våra aktiviteter
========================================================================== */
.acitivites-split p {
    color: #333 !important;
}

/* ======================================================================
Undersida: Bygg & Fastighet (gäller för deras tre huvudgrupper av tjänster: bygg & fastighet, 
infrastuktur & installation & energi.
========================================================================== */
/* litet textblock */
.text-block {
    max-width: 80rem;
}

.left-block * {
    text-align: left !important;
}

.welcome .section-block {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.LayoutPage .intro-section .section-block {
    padding-top: 0;
    background-image: linear-gradient(to top, #fff, #fff);
    background-size: 100% 5rem;
    background-position: center top;
    background-repeat: no-repeat;
}

.service-split .split-content {
    padding: 15rem 10rem 5rem 0;
}

.service-split .split-text {
    max-width: 80rem;
}

.service-split .ingress {
    margin-bottom: 1rem;
}

.service-split * {
    color: #fff;
}

.service-split .split-content {
    background-color: transparent;
}

.intro-section {
    background-color: #333 !important;
}

/* Youtube section
========================================================================== */
.youtube-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.youtube-item {
    width: 45%;
    margin: 1%;
}

@media only screen and (max-width: 680px) {
    .youtube-item {
        width: 100%;
    }
}


/* Review section
========================================================================== */

.review-section {
    overflow: hidden;
}

.review-section .section-block {
    z-index: 1;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

.review-section .section-block::before {
    z-index: -1;
    position: absolute;
    content: "";
    display: block;
    width: 30rem;
    height: 30rem;
    top: -10rem;
    left: 5rem;
    background-image: url(/assets/images/quote-sign-orange.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.review-section .section-block::after {
    z-index: -1;
    position: absolute;
    content: "";
    display: block;
    width: 30rem;
    height: 30rem;
    bottom: -10rem;
    right: 5rem;
    background-image: url(/assets/images/quote-sign-orange.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.5;
}

/* logo bilde3r */
.LayoutPage .review-section .block-object img {
    max-width: 60% !important;
}

.review-section .service-icon-wrap {
    width: 15rem;
    height: 15rem;
    margin: 0 auto;
    margin-bottom: 3rem;
    background-color: #fff;
}

.review-section .col-wrapper {
    padding: 7rem 0;
}

.review-section h3 {
    padding: 0;
}

.review-wrapper {
    margin-top: 7.5rem;
}

.review {
    background-color: transparent;
    height: auto !important;
    align-self: stretch;
    padding: 0 10rem 7rem 0;
    margin-right: 3rem;
    position: relative;
    z-index: 1;
}

.review-section .normaltext-type {
    text-align: left !important;
    margin-right: auto;
    max-width: none;
}

.review-section h2 {
    padding-bottom: 1.5rem;
}

.review-text {
    padding-bottom: 4rem;
}

.review a.arrow-link {
    margin-top: 2rem;
    padding-bottom: 3rem;
}

.review-person {
    font-family: "Martel Sans", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.3;
    position: absolute;
}

/* Slick settings  */

.slick-list.draggable {
    overflow: visible;
}

.slick-track {
    display: flex !important;
}

.slick-prev,
.slick-next {
    top: -10.5rem;
    width: 4rem;
    height: 4rem;
    border: 1px solid #ff671f;
    border-radius: 5rem;
}

.slick-prev {
    left: auto;
    right: 8rem;
}

.slick-next {
    right: 3rem;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
    font-family: "Font Awesome 5 Pro";
}

.slick-prev::before {
    content: "\f104";
}

.slick-next::before {
    content: "\f105";
}

.instagram-section .section-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media only screen and (max-width: 1024px) {

    .slick-prev,
    .slick-next {
        top: -5rem;
    }

    .slick-prev {
        left: auto;
        right: 7rem;
    }

    .slick-next {
        right: 2rem;
    }
}

@media only screen and (max-width: 768px) {
    .review {
        padding: 0 5rem 3rem 0;
        margin-right: 3rem;
    }
}

@media only screen and (max-width: 1000px) {
    .service-split {
        flex-direction: column-reverse;
    }

    .service-split .split-content {
        width: 100%;
        padding: 7.5rem 0 0;
    }

    .service-split .split-image {
        width: 100%;
    }
}

/* ======================================================================
Undersida: recensioner samlingssida
========================================================================== */

.sub-review .text-block {
    margin: 0;
}

.sub-review .LayoutPage .block-object img {
    display: inline-block;
    max-width: 70% !important;
}

.review-normal * {
    color: #fff;
}

.review-normal-wrap {
    margin-top: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.review-normal {
    width: calc((100% / 2) - 4rem);
    border: 1px solid #eee;
    padding: 20px;
    background-color: #333;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 5%;
}

.review-normal .service-icon-wrap {
    background-color: #fff;
}

.review-normal.big {
    width: calc((100% / 1) - 62px);
    margin-top: 10rem;
}

.review-normal.big .italic {
    max-width: 80rem;
    margin: 0 auto;
}

.review-normal .italic {
    font-style: italic;
    text-align: center;
}

.review-normal p:last-of-type {
    text-align: center;
    display: inline;
    width: 80%;
    margin: 0 auto;
    font-family: "mueseo-sans", sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    margin-top: 20px;
}

@media only screen and (max-width: 1100px) {
    .review-wrap {
        flex-wrap: wrap;
    }

    .review-normal {
        width: calc((100%) - 62px);
        margin-bottom: 17%;
    }
}

@media only screen and (max-width: 750px) {
    .review-normal {
        width: 100%;
        margin: 0;
        margin-bottom: 17%;
    }
}

@media only screen and (max-width: 630px) {
    .text-block * {
        text-align: left !important;
    }

    .references p,
    .references {
        text-align: left !important;
    }

    .review p:first-of-type {
        text-align: left !important;
    }
}

/* ======================================================================
Undersida: Referenser ( - NY SIDA )
========================================================================== */
.section-references h3 {
    color: #ff671f;
    padding-top: 10rem;
    padding-left: 5rem;
}

.section-references h3::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 10rem;
    margin-left: 2rem;
    margin-bottom: 0.15em;
    height: 0.1em;
    vertical-align: middle;
    border-bottom: 1px solid #111;
}

.section-references .references-wrapper {
    padding-left: 5rem;
}

.section-references .reference-item {
    width: 23%;
}

.section-references .reference-item a {
    min-height: 25rem;
}

@media only screen and (max-width:1300px) {
    .section-references .reference-item {
        width: 30.333%;
    }
}

@media only screen and (max-width:820px) {
    .section-references .reference-item {
        width: 48%;
    }
}

@media only screen and (max-width:550px) {
    .section-references h3 {
        padding-left: 0;
    }

    .section-references h3::after {
        display: none;
    }

    .section-references .references-wrapper {
        padding-left: 0;
    }

    .section-references .reference-item {
        width: 100%;
        margin: 1rem 0;
    }
}

/* Tidigare stil för referensprojekt, kanske används på fler ställen så sparar koden!

.sub-project .LayoutPage .index-section .col-0 {
position: static;
}

.sub-project .text-block {
max-width: 100rem;
height: 20rem;
}

.sub-project h3::after {
border-bottom: 1px solid #111;
content: "";
display: inline-block;
height: 0.1em;
position: relative;
vertical-align: middle;
width: 10rem;
margin-bottom: 0.15em;
margin-left: 2rem;
}

.sub-project .service-wrap {
width: 33%;
margin-bottom: 5rem;
}

.sub-project .service-text {
padding-top: 10rem;
}

.sub-project h3 {
text-align: left !important;
}

.sub-project .service-wrap .fal {
padding-top: 0;
margin-bottom: 3rem;
}

.sub-project .service-wrap .overlay {
padding: 0rem;
}

.sub-project h3::after {
border-bottom: 1px solid #111;
content: "";
display: inline-block;
height: 0.1em;
position: relative;
vertical-align: middle;
width: 10rem;
margin-bottom: 0.15em;
margin-left: 2rem;
}

.sub-project .service-wrap {
width: 33%;
margin-bottom: 5rem;
}

.sub-project .service-text {
padding-top: 10rem;
}

.sub-project h3 {
text-align: left !important;
}

.sub-project .service-wrap .fal {
padding-top: 0;
margin-bottom: 3rem;
}

.sub-project .service-wrap .overlay {
padding: 0rem;
}

.gallery-wrapper {
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 rem 0;
}

.gallery-item {
width: 99%;
margin: 1%;
border-radius: 2px;
overflow: hidden;
}

h3.finished {
padding-top: 7rem;
}

@media only screen and (min-width: 1200px) {
.gallery-item.lg-w-25 {
    width: 23%;
}

.gallery-item.lg-w-33 {
    width: 31.333%;
}

.gallery-item.lg-w-50 {
    width: 48%;
}

.gallery-item.lg-w-66 {
    width:64.66%;
}

.gallery-item.lg-w-100 {
    width: 100%;
}
}

.gallery-link {
display: flex;
justify-content: flex-start;
align-items: flex-end;
position: relative;
z-index: 1;
overflow: hidden;
padding: 17rem 1rem 2rem 0rem;

height: 100%;
}

.finished .gallery-link {
padding: 4rem 1rem 2rem 0rem;
}

.finished .gallery-text-wrapper {
transform: translateY(17rem);
}

.gallery-link:hover {
text-decoration: none;
}

.gallery-image-wrapper {
position: absolute;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
}

.gallery-image-wrapper .bg-color {
background-color: #ff671f;
}

.gallery-image-wrapper::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
bottom: 0;
transition: all 0.3s ease;
}

.gallery-link:hover .gallery-image-wrapper::after {
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}

.gallery-image {
width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}

.gallery-text-wrapper {
padding: 0 1rem;
width: 100%;
max-width: 40rem;
position: relative;
background-color: rgba(17, 17, 17, 0.89);
transform: translateY(15rem);
transition: all 0.3s ease;
min-height: 20rem;
border-top-right-radius: 0.5rem;
}

.gallery-link:hover .gallery-text-wrapper {
transform: translateY(0);
transition: all 0.3s ease;
}

.gallery-title {
font-size: 1.8rem;
font-weight: 600;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
word-break: break-word;
hyphens: auto;
padding-top: 2.5rem;
}

.gallery-title.small {
font-size: 1.5rem;
}

.gallery-item p {
color: #fff;
min-height: 12rem;
}

@media only screen and (max-width: 780px) {
.gallery-item.md-w-50 {
    width: 48%;
}

.gallery-item.md-w-100 {
    width: 100%;
}
}

@media only screen and (max-width: 696px) {
.gallery-wrapper {
    margin: 1rem 0 0;
}

.gallery-item {
    width: 100% !important;
    margin: 0;
}

.finished .gallery-text-wrapper {
    transform: translateY(16rem);
}

.gallery-text-wrapper {
    transform: translateY(5rem);
} 
.sub-project h3 {
    padding-top: 4rem;
    padding-bottom: 1rem;
}

.sub-project h3::after {
    width: 7rem;
}
}

@media screen and (max-width: 480px) {
.gallery-item {
    padding: 2rem 1.5rem;
}
}

@media screen and (max-width: 320px) {
.sub-project h3::after {
    width: 0;
}
} */

/* ======================================================================
Undersida: för enskilt projekt, samlingskod
========================================================================== */
.sub-project-info .subpage-header {
    display: none;
}

.sub-project-info header.scrolled .header-logo a {
    background-image: url("/assets/images/Logo_CMYK.png");
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    transition: all 500ms linear;
    width: 23rem;
    position: absolute;
}

.sub-project-info header .header-logo a {
    height: 8rem;
    background-image: url("/assets/images/Logo_CMYK.png");
    background-size: auto 4.2rem;
    background-repeat: no-repeat;
}

/* Mini breadcrumb */
.sub-project-info ul.breadcrumb {
    margin-top: 0;
    margin-left: -4rem;
}

.sub-project-info ul.breadcrumb li {
    padding: 1.4rem;
}

.sub-project-info .text-block {
    height: auto;
}

.sub-project-info h3 {
    padding-top: 2rem;
}

.sub-project-info nav.mainmenu li a {
    color: black;
}

/*
.project-info {
padding: 1.5rem;
}
*/

.project-info {
    padding: 1.5rem;
    background-color: #fff !important;
    border-left: 2px solid #333333;
    border-right: 2px solid #333333;
    border-bottom: 2px solid #333333;
}

.project-info * {
    color: #333333;
}

@media only screen and (max-width: 980px) {
    .sub-project-info ul.breadcrumb {
        margin-top: 1rem;
        margin-left: 0rem;
    }

    .sub-project-info .pagemenu .has-links,
    .sub-project-info .page-navigation ul {
        display: none;
        margin-bottom: 2rem;
    }

    .sub-project-info hr {
        display: none;
    }

    .sub-project-info header .header-logo a {
        margin-top: -0.5rem;
        margin-left: -3rem;
    }
}

/* ======================================================================
Undersida: Kontakt
========================================================================== */

.sub-contact .top-section {
    display: none;
}

.sub-contact h1 {
    font-size: 3.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Kontakt boxar */
.varde-wrap {
    display: flex;
    flex-wrap: wrap;
}

.services-box {
    width: 48%;
    margin: 2%;
    margin-left: 0%;
    transition: 0.2s ease-in-out;
    align-items: center;
    background-color: #f8f8f8;
    padding: 6rem;
}

.services-icon {
    display: none;
}

/* 
Kontakta oss formulär över karta
========================================================================== */

.contact .section-block {
    padding-top: 0;
}

.contact .col-1 {
    margin-top: -8rem;
    padding-left: 6rem !important;
}

.contact em {
    color: #ff671f;
}

.contact .col-1 .normaltext-type {
    text-align: left;
}

.contact .col-0 {
    background-color: #fff;
    padding: 4rem !important;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    margin-top: -30rem;
    z-index: 5;
    position: relative;
}

.contact h2 {
    text-align: left;
}

.contact p {
    padding-right: 5rem;
}

/* Contact form styling */
.contact .section-block .Contact .ContactForm div {
    width: 100%;
    margin-bottom: 20px;
}

.contact .section-block .Contact .ContactForm div.ContactFormMessage p,
.contact .section-block .Contact .ContactForm .ContactFormEmail p,
.contact .section-block .Contact .ContactForm .ContactFormField p,
.contact .section-block .Contact .ContactForm .ContactFormName p {
    color: #000;
    text-align: left !important;
}

.contact .section-block .Contact .ContactForm input.text,
.contact .section-block .Contact .ContactForm textarea.textmessage {
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0 !important;
    padding: 22.5px 20px !important;
    border-radius: 0px;
    font-weight: 400;
    color: #000;
}

.contact .section-block .Contact .ContactForm div.ContactFormMessage {
    position: relative;
    padding-top: 0;
}

.contact .section-block .Contact .ContactForm textarea.textmessage {
    height: 15rem;
    padding: 2rem 0px;
}

.contact .Contact .ContactForm input.ContactSubmit {
    box-shadow: none;
    background-color: #f46d20;
    border: 2px solid #f46d20;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    padding: 15px 15px;
    width: 100% !important;
    border-radius: 0rem;
}

.contact .Contact .ContactForm input.ContactSubmit:hover {
    box-shadow: none;
    background-color: transparent;
    color: #f46d20 !important;
    border: 2px solid #f46d20;
    font-size: 13px;
    padding: 15px 15px;
    width: 100% !important;
}

.LayoutPage .layout-2 .form-part textarea.textmessage,
.LayoutPage .layout-2 .form-part input.text,
.LayoutPage .layout-5 .col-1 .form-part textarea.textmessage,
.LayoutPage .layout-5 .col-1 .form-part input.text,
.LayoutPage .layout-6 .col-0 .form-part textarea.textmessage,
.LayoutPage .layout-6 .col-0 .form-part input.text {
    width: 100%;
}

.contact ::placeholder {
    font-family: "Poppins", sans-serif;
    color: #696969;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 1px;
}

.contact strong {
    color: #000;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media only screen and (max-width: 768px) {
    .contact .col-block {
        width: 100%;
    }

    .contact .section-block {
        padding: 3rem;
    }

    .contact .col-1 {
        margin-top: 0rem;
    }
}

@media only screen and (max-width: 980px) {
    .contact .col-0 {
        padding: 3rem !important;
        margin-bottom: 3rem;
    }

    .contact .col-1 * {
        text-align: left;
    }

    .contact .col-1 {
        padding-top: 3rem;
        padding-left: 4rem !important;
    }

    .contact h2 {
        padding-top: 4rem;
        text-align: center;
    }
}

@media only screen and (max-width: 768px) {

    .contact .section-block .Contact .ContactForm input.text,
    .contact .section-block .Contact .ContactForm textarea.textmessage {
        padding: 2.5rem 0px;
    }

    .contact .col-0 {
        width: 100% !important;
        margin-top: 2rem;
        padding: 2rem;
    }

    .contact .col-1 {
        width: 100% !important;
        padding-bottom: 5rem !important;
    }

    .contact .section-block {
        background-size: 100% 10rem;
    }

    .contact .section-block-wrapper {
        display: flex;
        flex-direction: column-reverse;
    }

    .contact p {
        padding-right: 0rem;
    }
}

@media only screen and (max-width: 480px) {
    .contact .col-0 {
        padding: 3rem 3rem !important;
        margin-bottom: 3rem;
    }

    .contact .col-1 * {
        text-align: left;
    }

    .contact a {
        display: inline-block;
        padding-bottom: 2rem;
    }

    .contact a,
    .contact p {
        font-size: 1.6rem;
    }

    .contact a {
        line-height: 1.2;
    }

    .contact h5 {
        text-align: left !important;
        padding-bottom: 0.5rem;
        padding-top: 2rem;
    }

    .contact h2 {
        padding-top: 5rem;
        padding-bottom: 1rem;
    }

    .contact .Contact .ContactForm input.ContactSubmit {
        font-size: 1.4rem;
    }

    .contact .Contact .ContactForm p {
        font-size: 1.4rem;
    }

    .LayoutPage .Contact {
        padding: 2rem !important;
    }

    .LayoutPage .contact .section-block {
        padding: 1rem !important;
    }
}

@media only screen and (max-width: 980px) {
    .services-box {
        width: 100%;
        padding: 4rem;
    }
}

/* ==========================================================================
Nyheter, enskilda nyheters sida - gemensam style
========================================================================== */

.news-block {
    text-align: center;
    max-width: 70rem;
    margin: 0 auto;
}

.news-block h1 {
    font-size: 3.5rem;
    text-align: center;
    line-height: 1.2;
}

.news-block * {
    color: #fff;
}

.news-page .split-wrapper {
    background-color: #f8f8f8;
    padding: 2rem;
}

.news-top {
    margin-top: -25rem;
}

.news-page .split-content {
    background-color: transparent;
    padding: 5rem;
}

.news-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 3rem;
}

.news-gallery div {
    margin: 1%;
    width: 46%;
}

.photo-by {
    z-index: 1;
    position: relative;
    padding: 1rem;
    margin-top: -4.2rem;
    font-size: 1.3rem;
    background: #FFF;
}

@media only screen and (max-width: 1000px) {
    .news-page .split-content {
        padding: 0rem;
    }

    .news-page .split-image {
        padding-bottom: 2rem;
    }

    .news-gallery div {
        width: 100%;
    }
}

@media only screen and (max-width: 980px) {
    .news-top {
        margin-top: -20rem;
    }

    .news-block h1 {
        font-size: 2.5rem;
    }
}

/* ==========================================================================
Fler pågående/avslutade projekt
========================================================================== */

.sub-more .split-wrapper {
    max-width: 90rem;
    margin: 0 auto;
}

iframe {
    margin-top: 3rem;
}

/* ==========================================================================
Medarbetare
========================================================================== */
/* Vi som jobbar */
.feature-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 7rem;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20.3333%;
    margin: 2%;
}

.two {
    align-items: center;
    justify-content: center;
}

.small-heading {
    padding-bottom: 1rem;
    text-transform: none;
    font-size: 2rem;
    letter-spacing: normal;
}

.feature h2 {
    font-size: 2rem;
    padding-bottom: 1rem;
}

.feature a {
    line-height: 1.5;
}

.feature-image {
    width: 25rem;
    height: 25rem;
}

.feature-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

.feature-textblock {
    /*border-bottom: 1px solid rgba(126, 126, 126, 0.411);*/
    padding-bottom: 2rem;
    margin-top: 2rem;
    text-align: center !important;
}

.feature-textblock p {
    text-align: center !important;
}

.feature h4 {
    font-size: 2.1rem;
    font-weight: 400;
    color: #cbbc8d;
}

.feature .higlight-number {
    font-size: 9rem;
    margin-top: -12rem;
    padding-bottom: 0;
    color: #cbbc8d;
    text-shadow: 0px 1rem 2rem rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1180px) {
    .feature {
        width: 29%;
    }
}

@media only screen and (max-width: 980px) {
    .feature {
        width: 45%;
        margin-bottom: 6%;
    }

    .feature-image {
        width: 20rem;
        height: 20rem;
    }
}

@media only screen and (max-width: 550px) {
    .feature {
        width: 100%;
        margin: 0;
        margin-bottom: 13%;
    }

    .feature-image {
        width: 18rem;
        height: 18rem;
    }

    .feature h2 {
        text-align: center !important;
    }
}

/* ==========================================================================
Footer
========================================================================== */
.footer {
    background-image: url(/assets/images/footer-tegel-2000.jpg);

    object-position: cover;
    color: #fff;
    z-index: 1;
    position: relative;
    padding: 0;
}

.footer .container {
    padding: 10rem 0rem 0;
    max-width: 160rem;
}

.footer .fas {
    color: #ff671f;
    margin-right: 0.5rem;
}

/* Top logo med steck i footer */

/* ==========================================================================
Horizontal rule med bild
========================================================================== */

.hr-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
    max-width: 100%;
    padding-bottom: 5rem;
}

.hr-line {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid white;
    margin: 0 3rem;
}

.hr-img {
    width: 60rem;
    object-fit: cover;
}

@media only screen and (max-width: 696px) {
    .hr-line {
        height: 1px;
        width: 100%;
        border-bottom: 1px solid white;
        margin: 0 0rem;
    }

    .hr-wrapper {
        max-width: 100%;
    }
}

.footer img {
    width: 90% !important;
}

.footer .container {
    padding: 10rem 4rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(51, 41, 41, 0.7)), linear-gradient(to top, #423a3a, #f2f2f2);
    background-size: 100%, 100% auto;
    background-position: center top, center 220rem;
    background-repeat: no-repeat;
    background-color: transparent;
    max-width: none;
}

.footer p,
.footer a {
    text-align: left;
    font-size: 1.6rem;
    color: inherit;
    color: #fff;
}

.footer-container {
    display: flex;
    flex-direction: column;
    padding: 2rem 0 0;
    position: relative;
}

.space {
    margin-right: 3rem;
    text-decoration: none !important;
}

/* FOOTER MENU */

.footer-nav {
    width: 100%;
    margin-bottom: 10rem;
    padding: 0rem 2rem;
}

.footer-menu-wrapper {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding-inline-start: 0;
    justify-content: space-evenly;
}

.footer-menu {
    text-align: left;
    width: 30%;
    margin: 2%;
}

.footer-heading {
    font-family: "museo-sans", sans-serif;
    font-size: 2rem;
    text-transform: normal;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
}

/* FOOTER SUBMENU */

.footer-submenu {
    padding-inline-start: 0;
    list-style-type: none;
}

.footer-submenu li {
    text-align: left;
}

.footer-menu-link {
    font-size: 1.6rem;
    line-height: 2em !important;
}

.footer-menu-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* FOOTER certification LINKS */
.certification-list {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin-top: 1.5rem;
}

.certification-list img {
    width: 80% !important;
    padding: 0.5rem;
    /*background-color: #fff;*/
    display: flex;
}

.footer-subheading {
    text-align: left;
    margin-top: 2rem;
    padding-bottom: 0rem;
}

.footer h5 {
    text-align: left;
    font-size: 1.7rem;
}

.footer .show-mobile {
    display: none;
}

/* FOOTER SOCIAL LINKS */
.footer .social-list {
    display: flex;
    list-style: none;
}

.footer .social {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0;

    width: 4rem;
    height: 4rem;
    margin-right: 1.2rem;
    padding: 0;

    border-radius: 0rem;
    background-color: #ff671f;
    color: #fff;
}

.footer .social:hover {
    background-color: transparent;
    color: #fff;
    border: 1px solid white;
    text-decoration: none;
}

.footer .social::before {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 1.7rem;

    position: relative;
    top: 1px;
}

.contacts-icon::before {
    display: inline-block;
    font-family: "Font Awesome 5 Pro";
    font-weight: 800;
    font-size: inherit;
    vertical-align: middle;
    color: #ff671f;
    width: 2em;
    margin-right: 0.5rem;
    font-size: 1.5rem;

    text-align: left;
    border-radius: 50%;
}

.contacts-icon.adress::before {
    content: "\f3c5";
}

.contacts-icon.phone::before {
    content: "\f879";
}

.contacts-icon.work::before {
    content: "\f0c0";
}

.contacts-icon.mobile::before {
    content: "\f3cd";
}

.contacts-icon.mail::before {
    content: "\f0e0";
}

.social-facebook::before {
    content: "\f39e";
}

.social-linkedin::before {
    content: "\f0e1";
}

.social-instagram::before {
    content: "\f16d";
}

.social-youtube::before {
    content: "\f167";
}

/* Footer Bottom */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.47);
    margin: 0 auto;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    flex-direction: row;
    line-height: 1rem;
}

.footer-bottom p,
.footer-bottom a {
    font-size: 1.3rem;
}

/* WebbEss Stamp  */
.webbess-stamp {
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 1.3rem;
    font-weight: normal;
}

.webbess-stamp img {
    width: 3rem !important;
    margin-left: 1rem;
    filter: invert();
}

@media only screen and (max-width: 1150px) {
    .certification-list img {
        width: 90% !important;
    }
}

@media only screen and (max-width: 1024px) {
    .footer .container {
        padding: 0rem 2rem;
    }

    .footer-container {
        flex-wrap: wrap;
    }

    .footer-menu-wrapper {
        flex-wrap: wrap;
    }

    .footer-menu {
        width: 25%;
    }

    .footer .show-mobile {
        display: block;
        max-width: 95%;
        margin: 1rem 0;
    }
}

@media only screen and (max-width: 1050px) {
    .footer-menu {
        width: 45%;
        margin-bottom: 3rem;
    }

    .footer-nav {
        margin-bottom: 0;
    }

    .footer-bottom {
        padding: 2rem 4rem;
    }

    .footer-menu-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .certification-list img {
        width: 60% !important;
    }
}

@media only screen and (max-width: 650px) {
    .footer-menu {
        width: 100%;
        margin: 2% 2% 2rem 2%;
    }

    .certification-list img {
        width: 70% !important;
    }
}

@media only screen and (max-width:400px) {
    .certification-list {
        flex-wrap: wrap;
    }

    .certification-list a {
        max-width: 20rem;
    }
}