:root {
    --max-width: 1440px;

    --color_primary: #191919;
    --color_secondary: #ffffff;
    --background_light_primary: #F5F5F5;
    --background_light_secondary: #ffffff;
    --background_blue_primary: #0D4A6D;
    --background_blue_primary_accent: #063149;
    --background_blue_secondary: #239FE5;
    --background_blue_secondary_accent: #1e90d2;

    /* products */
    --color_dali_visualizer: #005f9f;
	--color_historian: #de197f;
	--color_historian-accent: #de197f19;
	--color_dynamics: #0095C7;
	--color_dynamics-accent: #0095C719;
	--color_vector_graphics:#158e30;
	--color_vector_graphics-accent:#158e3019;
	--color_traffic_management_system:#f2b416;
	--color_traffic_management_system-accent:#f2b41619;
    --color_cargo_system:#29325b;
	--color_cargo_system-accent:#1e2542;
	--color_fire_visualizer:#c94421;
	--color_fire_visualizer-accent:#c9442119;
	--color_knx_visualizer: #b01b23;
	--color_knx_visualizer-accent: #b01b2319;
	--color_connected:#831f82;
	--color_connected-accent:#831f81d8;
    --color_security_visualizer: #ED6C23;
    --color_alla_produkter: #0D4A6D;
    --color_alla_produkter_accent: #063149;
    --color_trebor_grey: #333333;
    --color_trebor_grey_accent: #000000;
}


#_oss_container{
    display: none !important;
}

* {
    caret-color: transparent;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* core shared ------------------------------------------ */
html, body, nav, footer, video, ul {
    width: 100%;
    height: auto;
}
nav, footer {
    background-color: var(--background_blue_primary);
    color: var(--color_secondary);
}

body {
    margin: 0;
    padding: 0;
}
body.no_scroll {
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    body {
        padding-left: 8px;
        padding-right: 8px;
        margin-top: 80px;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 768px) {
    nav.desktop {
        display: none;
    }
    nav.mobile {
        display: block;
    }
}
@media screen and (min-width: 768px) {
    nav.desktop {
        display: block;
    }
    nav.mobile {
        display: none;
    }
}

/* nav mobile */
nav.mobile {
    --hanburger-line-height: 4px;
    --nav-height: 60px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 100;
    padding: 15px 20px;

}
nav.mobile .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

nav.mobile .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

nav.mobile .logo img {
    height: 20px;
    width: auto;
    z-index: 102;
    -webkit-filter: invert(0);
            filter: invert(0);
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
nav.mobile.active .logo img {
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-filter: invert(1);
            filter: invert(1);
}

nav.mobile .menu {
    z-index: 101;
    position: fixed;
    top: -200%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245,245,245,1);  
    -webkit-transition: all 0.4s ease-out;  
    -o-transition: all 0.4s ease-out;  
    transition: all 0.4s ease-out;
}
nav.mobile .menu.open {
    top: 0;
}

nav.mobile .menu.open .menu_background {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(245,245,245,1);
    /* box-shadow: 0px 0px 50px 0px rgba(245,245,245,0.5); */
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
nav.mobile .menu_inner {
    height: 100%;
    overflow: scroll;
}
nav.mobile .menu_content {
    /* height: 200vh; */
    margin-top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 25px;
    padding-bottom: 10vh;
    color: #191919;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

nav.mobile .menu .menu_item h3 {
    margin-bottom: 5px;
    margin-top: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
nav.mobile .menu .menu_item h3 img {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    margin-left: 5px;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
nav.mobile .menu .menu_item h3 img.active {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
nav.mobile .menu .menu_item > a > h4 {
    margin-top: 0;
    margin-bottom: 10px;
}
nav.mobile .menu .menu_item > a:first-child > h4 {
    margin-top: 16px;
}
nav.mobile .menu .menu_item ul {
    max-height: 600px;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    row-gap: 0px;
}
nav.mobile .menu .menu_item.active ul {
    max-height: 0px;
    -webkit-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}
nav.mobile .menu .menu_item ul > li {
    width: 100%;
}
nav.mobile .menu .menu_item ul > li h4 {
    margin: 0;
    margin-top: 10px;
    padding-left: 10px;
} 


.hamburger {
    z-index: 102;
    height: 30px;
    width: 30px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(var(--hanburger-line-height) *2);
}
.hamburger__line {
    height: var(--hanburger-line-height);
    width: 100%;
    background-color: #fff;
    -webkit-transform: rotate(0deg) translate(0px, 0px);
        -ms-transform: rotate(0deg) translate(0px, 0px);
            transform: rotate(0deg) translate(0px, 0px); 
    -webkit-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease;

}
.hamburger.active .hamburger__line {
    background-color: black;
}
.hamburger.active .hamburger__line:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(calc(var(--hanburger-line-height) + 1px), var(--hanburger-line-height));
        -ms-transform: rotate(45deg) translate(calc(var(--hanburger-line-height) + 1px), var(--hanburger-line-height));
            transform: rotate(45deg) translate(calc(var(--hanburger-line-height) + 1px), var(--hanburger-line-height)); 
}
.hamburger.active .hamburger__line:nth-child(2) {
    -webkit-transform: rotate(-45deg) translate(var(--hanburger-line-height), calc(var(--hanburger-line-height) * -1));
        -ms-transform: rotate(-45deg) translate(var(--hanburger-line-height), calc(var(--hanburger-line-height) * -1));
            transform: rotate(-45deg) translate(var(--hanburger-line-height), calc(var(--hanburger-line-height) * -1)); 
    /* box-shadow: 0 0 13px 0px rgb(0 0 0 / 50%); */

}



/* nav ------------------------------------------ */
/* changes to core */
nav.desktop > .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 10px 10px;
}
nav.desktop .nav__menu .container {
    padding-top: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


/* custom */
nav.desktop .nav__menu {
    position: fixed;
    top: -100%;
    left: 0px;
    width: 100%;    
    height: 0%;
    background-color: rgba(245,245,245,1);
    opacity: 0;
    z-index: -1;
    -webkit-transition: transform 500ms ease-out;
    -o-transition: transform 500ms ease-out;
    transition: transform 500ms ease-out;
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}
nav.desktop .nav__menu.open {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

    height: 100%;
    top: 0;
    z-index: 200;
}
nav.desktop .nav__menu .menu {
    margin-right: 100px;
}
nav.desktop .nav__menu__logo {
    z-index: 205;
}

nav.desktop .menu__button {
    cursor: pointer;
    color: transparent;
    z-index: 105;
    -webkit-transform: scale(0.75);
        -ms-transform: scale(0.75);
            transform: scale(0.75);
}
nav.desktop .menu__button.active:hover {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
}
nav.desktop .menu__button:hover .menu__button__line:nth-child(2) {
    width: 20px;
}
nav.desktop .menu__button__line {
    width: 25px;
    height: 3px;
    background-color: var(--color_secondary);
    margin: 5px 0;
}
nav.desktop .menu__button.active .menu__button__line {
    background-color: black;
}
nav.desktop .menu__button.active .menu__button__line:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(3px, 8px);
        -ms-transform: rotate(45deg) translate(3px, 8px);
            transform: rotate(45deg) translate(3px, 8px);
}
nav.desktop .menu__button.active .menu__button__line:nth-child(2) {
    width: 0px;
}
nav.desktop .menu__button.active .menu__button__line:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(3px, -8px);
        -ms-transform: rotate(-45deg) translate(3px, -8px);
            transform: rotate(-45deg) translate(3px, -8px);
}

nav.desktop .nav__menu .submenu {
    width: 0;
    height: 400px;
    overflow: hidden;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
nav.desktop .menu > h3 {
    margin-top: 10px;
}
nav.desktop .menu > a > h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}
nav.desktop .nav__menu .submenu.open {
    width: 300px;
    overflow: visible;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
.nav__menu__subtitle {
    border-left: 5px solid transparent;
    padding: 5px 12px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--color_primary);
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.nav__menu__subtitle:hover {
    background-position: left;
    color: var(--color_secondary);
}

.nav__menu__subtitle.active {
    background-position: left;
    color: var(--color_secondary);
}

footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 200;
    height: auto;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
@media (min-width: 768px) {
    footer .container {
        width: 50%;
    }
    footer ul {
        padding-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        /* align-items: center; */
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        row-gap: 20px;
    }
    footer li {
    }
    footer .wrapper {
        padding-top: 40px;
        padding-bottom: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: center;
    }
    footer .wrapper p {
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    footer ul {
        padding-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        row-gap: 20px;
    }
    footer li {
        width: 50vw;
    }
    footer .wrapper {
        padding-top: 40px;
        padding-bottom: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: center;
    }
    footer .wrapper p {
        margin-top: 0;
    }
}
footer.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

/* animations for a elements */
/* animate_underline */
a.animate_underline {
    display: block;
    position: relative;
	overflow: hidden;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
a.animate_underline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 101%;
	height: 1.3px;
	background-color: white;
	-webkit-transition: opacity 300ms, -webkit-transform 300ms;
	transition: opacity 300ms, -webkit-transform 300ms;
	-o-transition: opacity 300ms, transform 300ms;
	transition: opacity 300ms, transform 300ms;
	transition: opacity 300ms, transform 300ms, -webkit-transform 300ms;
	-webkit-transform: translate3d(-101%, 0, 0);
	        transform: translate3d(-101%, 0, 0);
}
a.animate_underline.dark::after {
	background-color: black;
}
a.animate_underline:hover::after,
a.animate_underline:focus::after{
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

a, a:hover, a:active, a:visited {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    display: inline-block;
}

/* custom classes */
.floating_background_img_0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -o-object-fit: cover;
       object-fit: cover;
}
.floating_background_img_1 {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 750px;
    z-index: -1;
    -o-object-fit: cover;
       object-fit: cover;
}

.floating_background_gradient_0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(245,245,245);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(245,245,245,1)), to(rgba(245,245,245,0)));
    background: -o-linear-gradient(bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);
    background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#f5f5f5",GradientType=1);
    background-size: cover;
    background-position: center;
}
.floating_background_gradient_1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(245,245,245);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(245,245,245,1)), color-stop(10%, rgba(245,245,245,0)));
    background: -o-linear-gradient(bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 10%);
    background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 10%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#f5f5f5",GradientType=1);
    background-size: cover;
    background-position: center;
}
.floating_background_gradient_2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(245,245,245);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(245,245,245,1)), color-stop(80%, rgba(245,245,245,0.5)));
    background: -o-linear-gradient(bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,0.5) 80%);
    background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0.5) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f5f5f5",endColorstr="#f5f5f5",GradientType=1);
    background-size: cover;
    background-position: center;
}

/* overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
}
.overlay__content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* button */
.button__group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    gap: 1.8rem;
}
@media (max-width: 768px) {
    .button__group {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: 1rem;
    }
}
button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 180px;
    padding: 12px 20px;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-weight: var(--font_weight_medium);
    text-rendering: auto;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 100;
    color: var(--color_secondary);
}
button.primary {
    color: var(--color_secondary);
    background-color: var(--background_blue_primary);
}
button.primary:hover {
    background-color: var(--background_blue_secondary);
}
button.primary:active {}
button.secondary {
    color: var(--color_secondary);
    background-color: var(--background_blue_secondary);
}
button.secondary:hover {
    /* background-color: var(--background_blue_secondary_accent); */
}
button.secondary:active {}

button.thick {
    min-width: none;
    padding: 15px 40px;
}

/* animations */
/* grow */
button.animate_grow:hover {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
}
button.animate_grow:active {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}
/* wide */
button.animate_wide:hover {
    min-width: 280px;
}
button.animate_wide:active {
    min-width: 250px;
}
/* underline */
button.animate_underline:hover {
    text-decoration: underline;
}
/* up */
button.animate_up:hover {
    -webkit-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
            transform: translateY(-1px);
}
button.animate_up:active {
    -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
            transform: translateY(1px);
}
/* inset shadow left to right */
button.animate_inset_shadow:hover {
    -webkit-box-shadow: 300px 0 0 0 rgba(0,0,0,0.10) inset;
            box-shadow: 300px 0 0 0 rgba(0,0,0,0.10) inset;
}
/* animate arrow */
button.gray {
    background-color: rgb(197, 197, 197, 0.8);
    color: var(--color_secondary);
}
button.gray:hover {
    background-color: var(--background_blue_secondary);
    opacity: 1; 
}
/* animate icon */
button.animate_icon img {
    width: 40px;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
button.animate_icon div {
    -webkit-transform: translate(22px, 0);
        -ms-transform: translate(22px, 0);
            transform: translate(22px, 0);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    font-weight: inherit;
    letter-spacing: inherit;
}

button.animate_icon:hover img {
    opacity: 1;
}
button.animate_icon:hover div {
    -webkit-transform: translate(2px, 0);
        -ms-transform: translate(2px, 0);
            transform: translate(2px, 0);
}



.index_call_to_action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 10px;
}

.customer_logos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    background: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 5px;
    gap: 10px;
}
.customer_logos img {
    height: 50px;
    width: 92px;
}

/* generic animations ------------------------------------------*/
.toggle_images_on_hover {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.toggle_images_on_hover:hover {}
.toggle_images_on_hover:active {
    -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
            transform: scale(0.95);
}
.toggle_images_on_hover img {
    -webkit-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    transition: opacity 0.4s ease-out;
}
.toggle_images_on_hover img:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.toggle_images_on_hover:hover img:nth-child(1) {
    opacity: 1;
}
.toggle_images_on_hover:hover img:nth-child(2) {
    opacity: 0;
}

.active_projects {}
.active_projects p.large {
    padding-left: 18px;
}
.active_projects li {
    min-width: 270px;
    height: 180px;
}
.active_projects li:first-child {
    
}
.active_projects li:last-child {
    margin-right: 20px;
}
.active_projects li:hover {
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
}
.active_projects li > a {
    width: inherit;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;
    -webkit-backdrop-filter: grayscale(30%) blur(0px) brightness(1.1) contrast(0.5);
            backdrop-filter: grayscale(30%) blur(0px) brightness(1.1) contrast(0.5);
}
.active_projects li > a:hover {
    -webkit-backdrop-filter: grayscale(10%) blur(2px) brightness(1) contrast(0.5);
            backdrop-filter: grayscale(10%) blur(2px) brightness(1) contrast(0.5);
}
.active_projects li > a p {
    padding: 8px 24px;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    margin-bottom: 0;
    min-width: 270px;
    text-align: center;

}
.active_projects li > a:hover p {
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    background-color: #239FE5;
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}
.active_projects li > a:active p {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

/* horizontal scroll */
.horizontal_scroll {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-left: 8px;
}
.horizontal_scroll::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.horizontal_scroll::-webkit-scrollbar {
	height: 8px;
	background-color: #F5F5F5;
}

.horizontal_scroll::-webkit-scrollbar-thumb {
	background-color: rgb(101, 101, 101);
}


.services_info {
    margin: 0 auto;
    width: 95%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-item-align: baseline;
        align-self: baseline;
    justify-self: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background: rgba(245,245,245,0.9);
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 25px 40px;
}
.services_info button {
    -webkit-transform: translateX(110px);
        -ms-transform: translateX(110px);
            transform: translateX(110px);
}
@media (max-width: 768px) {
    .services_info {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        row-gap: 20px;
        padding: 15px 20px;
    }
    .services_info button {
        -webkit-transform: translateX(0px);
            -ms-transform: translateX(0px);
                transform: translateX(0px);
    }
}
    


.products {}
.products ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: center;
    gap: 20px;
}
.products li {
    width: 142px;
    height: 200px;
    text-align: center;
}
.products .product {
    margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
    .products ul {
        gap: 20px;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
    }
    .products li {
        width: 100px;
        height: 150px;
    }  
    .products li p {
        font-size: 12px;
    }   
    .products .product {
        margin-bottom: 0px;
    }  
}

.products li:hover .product {
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
}
.products li:active .product {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

/* signal counter */
.signal_counter {
    width: 100%;
    background-color: white;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    border: 1px solid #eee;
    padding: 20px;
    text-align: center;
}
.signal_counter div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.signal_count {
    font-family: monospace;
}

@media screen and (max-width: 768px) {
    .signal_counter h2:first-child {
        font-size: 1rem;
    }
    .signal_counter h2 {
        margin-top: 0;
    }
    .signal_counter p {
        font-size:  0.8rem;
        margin-top: 0;
    }
}

@media screen and (min-width: 768px) {
    .signal_counter h2 {
        margin-top: 0;
    }
    .signal_counter p {
        font-size:  0.8rem;
        margin-top: 0;
    }
}

/* video ------------------------------------------ */
.index .video, .index .video .overlay {
    max-height: 800px !important;
}
.video {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}
.video > div {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.video h3 {
    color: var(--color_secondary);
}

@media screen and (max-width: 768px) {
    .video h3 {
       font-size: 1.5rem;
       margin-top: 5px;
    }
}
.video .overlay {
    max-height: 500px;
}
.video .overlay__content > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.video video, .video img {
    -webkit-filter: grayscale(5%) brightness(1.1) contrast(0.5);
            filter: grayscale(5%) brightness(1.1) contrast(0.5);
}
/* .video:hover video, .video:hover img {
    -webkit-filter: grayscale(5%) blur(2px) brightness(1.1) contrast(0.5);
            filter: grayscale(5%) blur(2px) brightness(1.1) contrast(0.5);
} */
.video img {
    width: 100%;
    height: auto;
}


/* info boxes */
.info_boxes {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.info_box_0, .info_box_1, .info_box_2, .info_box_3, .info_box_4, .info_box_5 {
    background-color: white;
    padding: 60px;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    border: 1px solid #eee;
}

.info_box_2 {
    padding: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.info_box_3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    row-gap: 10px;
    padding: 10px;
    padding-bottom: 20px;
    text-align: center;
}
.info_box_3 img {
    width: 110%;
    height: 250px;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transform: translateX(5%);
        -ms-transform: translateX(5%);
            transform: translateX(5%);
}

.info_box_3 img:hover {

}
.info_box_3 img.center {
    -webkit-transform: translateX(-0%);
        -ms-transform: translateX(-0%);
            transform: translateX(-0%);
}
.info_box_3 img.left {
    -webkit-transform: translateX(-5%);
        -ms-transform: translateX(-5%);
            transform: translateX(-5%);
}

@media screen and (max-width: 1000px) {
    .info_box_3 img, .info_box_3 img.left, .info_box_3 img.center {
        width: 100%;
        -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
                transform: translateX(0%);
    }
}

.info_box_3 img.high {
    height: 400px;
}
.info_box_3 img.medium {
    height: 300px;
}
.info_box_3 p {
    padding: 0px 8px;
}

.img_box_0, .img_box_1 {
    
}
.img_box_0 img, .img_box_1 img {
    width: 100%;
    height: auto;
    max-height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

@media screen and (max-width: 768px) {
    .info_boxes {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 10px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .info_boxes p {
        font-size: 0.9rem;
    }

    .info_box_0, .info_box_1 {
        padding: 30px;
    }
    .info_box_1 {
       
    }
    .img_box_0 {
        padding: 20px;
        -webkit-transform: translateY(-30px);
            -ms-transform: translateY(-30px);
                transform: translateY(-30px);
    }
    .img_box_1 {
        padding: 10px;
        -webkit-transform: translateY(30px);
            -ms-transform: translateY(30px);
                transform: translateY(30px);
    }
}

.info_box_4 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
}
.info_box_4 div {
}
.info_box_4 .images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    min-width: 20%;
    max-width: 50%;
}
.info_box_4 > img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    max-width: 20%;
}
.info_box_4 .images > img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    max-width: 50%;
}
@media screen and (max-width: 768px) {
    .info_box_4 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 20px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 20px;
    }
    .info_box_4 .images {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 20px 1fr;
        grid-template-columns: 1fr 1fr;
        -webkit-column-gap: 20px;
           -moz-column-gap: 20px;
                column-gap: 20px;
        row-gap: 20px;
        min-width: 100%;

    }
    .info_box_4 > img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        max-width: 80%;
    }
    .info_box_4 .images > img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        max-width: 80%;
    }

    
    .info_box_5 {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-column-gap: 40px;
           -moz-column-gap: 40px;
                column-gap: 40px;
    }
    .info_box_5 div {
    }
    .info_box_5 .images {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-column-gap: 20px;
           -moz-column-gap: 20px;
                column-gap: 20px;
        min-width: 20%;
        max-width: 50%;
        div.item {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
img {
    width: 100px;
    height: 100px;
    background-color: grey;
}
.caption {
    display: block;
}
    }
    .info_box_5 > img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        max-width: 20%;
    }
    .info_box_5 .images > img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        max-width: 50%;
    }
    @media screen and (max-width: 768px) {
        .info_box_5 {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
            row-gap: 20px;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            padding: 20px;
        }
        .info_box_5 .images {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr 20px 1fr;
            grid-template-columns: 1fr 1fr;
            -webkit-column-gap: 20px;
               -moz-column-gap: 20px;
                    column-gap: 20px;
            row-gap: 20px;
            min-width: 100%;
    
        }
        .info_box_5 > img {
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            max-width: 80%;
        }
        .info_box_5 .images > img {
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            max-width: 80%;
        }
        /* om-oss */
        body.om-oss .video h3 {
            font-size: medium !important;
        }
        body.om-oss .video img {
            -o-object-fit: cover !important;
               object-fit: cover !important;
        }
    }


/* om-oss */
body.om-oss .video h3 {
    font-size: medium !important;
    }
body.om-oss .video img {
    -o-object-fit: cover !important;
        object-fit: cover !important;
    }
}


/* Landningssidor */
.slim{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            /* align-items: center; */
}

/* kontakt */
body.kontakt .img_box_0 img {
    max-height: 40vh;
}
.contact_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; 
    gap: 20px;
    padding: 20px;
    background-color: white;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
}
.contact_list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}
.contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-self: flex-start;
    gap: 20px;
    padding: 40px 0;
}
.contact img {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    -webkit-filter: grayscale(90%);
            filter: grayscale(90%);
    -webkit-transition: -webkit-filter 0.3s;
    transition: -webkit-filter 0.3s;
    -o-transition: filter 0.3s;
    transition: filter 0.3s;
    transition: filter 0.3s, -webkit-filter 0.3s;
}
.contact:hover img {
    -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
}
.contact > div {
    padding: 5px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: space-between;
        -ms-flex-align: space-between;
            align-items: space-between;
    border-left: 5px solid #ccc;
    -webkit-transition: border-left 0.3s;
    -o-transition: border-left 0.3s;
    transition: border-left 0.3s;
}
.contact:hover > div {
    border-left: 5px solid var(--background_blue_primary);
}
.contact p {
    font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
    .contact_list {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 20px;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .contact {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 20px;
        padding: 40px 0;
    }
    .contact img {
        height: auto;
        width: 70%;
    }
    .contact > div {
        padding: 5px 20px;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        row-gap: 20px;
    }
    .contact p {
        font-size: 1rem;
    }
}

/* produktsida */

body.produktsida .hero {
    padding-left: 10px;
}

body.produktsida .hero h1 {
    margin-top: 20px;
    margin-bottom: 40px;
}

.produktsida_lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 70px 1fr 70px 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -webkit-column-gap: 70px;
       -moz-column-gap: 70px;
            column-gap: 70px;
}
.produktsida_lists ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 30px;
}
.produktsida_lists ul li {

}

@media screen and (max-width: 1000px) {
    .produktsida_lists {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
}

.used_produktsida {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: baseline;
        -ms-flex-pack: baseline;
            justify-content: baseline;
    background: rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 15px;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 10px;
}

.more_produktsida {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: baseline;
        -ms-flex-pack: baseline;
            justify-content: baseline;
    padding-top: 20px;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 10px;
}

.produktsida_info_box {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: white;
    padding: 40px;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    border: 1px solid #eee;
}
.produktsida_info_box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.produktsida_info_box li {
    width: 50%;
    padding: 20px 0;
}
.produktsida_info_box img {
    max-width: 80%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .produktsida_info_box {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .produktsida_info_box h1 {
        font-size: 1.5rem;
    }
    .produktsida_info_box li {
        width: 100%;
        padding: 10px 0;
    }
    .produktsida_info_box img {
        max-width: 100%;
        height: auto;
        -o-object-fit: cover;
           object-fit: cover;
        margin: 0 auto;
    }
}

/* projekt */
body.projekt .hero {
    padding-left: 10px;
}

body.projekt .hero h1 {
    margin-top: 20px;
    margin-bottom: 40px;
}

.projekt_lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 70px 1fr 70px 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -webkit-column-gap: 70px;
       -moz-column-gap: 70px;
            column-gap: 70px;
}
.projekt_lists ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 30px;
}
.projekt_lists ul li {

}

@media screen and (max-width: 1000px) {
    .projekt_lists {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 50px;
    }
}

.used_products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: baseline;
        -ms-flex-pack: baseline;
            justify-content: baseline;
    background: rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 15px;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 10px;
}

.more_projects {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: baseline;
        -ms-flex-pack: baseline;
            justify-content: baseline;
    padding-top: 20px;
    -webkit-column-gap: 30px;
       -moz-column-gap: 30px;
            column-gap: 30px;
    row-gap: 10px;
}

.projekt_info_box {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: white;
    padding: 40px;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    border: 1px solid #eee;
}
.projekt_info_box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.projekt_info_box li {
    width: 50%;
    padding: 20px 0;
}
.projekt_info_box img {
    max-width: 80%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .projekt_info_box {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .projekt_info_box h1 {
        font-size: 1.5rem;
    }
    .projekt_info_box li {
        width: 100%;
        padding: 10px 0;
    }
    .projekt_info_box img {
        max-width: 100%;
        height: auto;
        -o-object-fit: cover;
           object-fit: cover;
        margin: 0 auto;
    }
}

/* produkt */
body.produkt {
    background-color: #F5F5F5;
}
body.produkt .hero {
    height: 500px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}
body.produkt .hero img {
    display: none;
}

@media screen and (max-width: 768px) {
    body.produkt .floating_background_img_1 {
        display: none;
    }
    body.produkt .hero {
        padding-bottom: 40px;
        padding-left: 10px;
        height: auto;
    }
    body.produkt .hero img {
        display: block;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: auto;
    }
}

.product_info_box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;    
    gap: 10px;
}
.product_info_box li {
    width: calc(50% - 5px);
    background-color: white;
    padding: 20px 10px;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
@media screen and (max-width: 768px) {
    .product_info_box li {
        width: 100%;
        text-align: center;
    }
}

/* blogg */
body.blogg .hero {
    text-align: center;
}

.blog_meny {
    padding: 8px 20px;
    background: white;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
    max-width: 25%;
}
@media screen and (max-width: 768px) {
    .blog_meny {
        max-width: 100%;
    }
    body.blogg .hero h2 {
        word-break: break-all;
    }
}
.blog_meny p {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    cursor: pointer;
}
.blog_meny p img {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.blog_meny.active p img {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.blog_meny div {
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.blog_meny.active div {
    max-height: 1000px;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
    .blog_meny.active div {
        max-height: 400px;
        overflow-y: auto;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
}

.blog_post {
    width: 50vw;
    padding: 30px;
    background-color: white;
    -webkit-box-shadow: 0 0 30px rgb(0 0 0 / 8%);
            box-shadow: 0 0 30px rgb(0 0 0 / 8%);
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.blog_post img {
    width: 100%;
    max-height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
    margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
    .blog_post {
        width: 100%;
        padding: 20px;
    }
    .blog_post img {
        width: 100%;
        max-height: 400px;
        -o-object-fit: cover;
           object-fit: cover;
        margin-bottom: 20px;
    }
}


/* video ------------------------------------------ */
.index .video, .index .video .overlay {
    /* max-height: 800px !important; */
}
.video {
    width: 100%;
    overflow: hidden;
}
.video > div {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.video h3 {
    color: var(--color_secondary);
}
@media screen and (max-width: 768px) {
    .video h3 {
       width: -webkit-max-content;
       width: -moz-max-content;
       width: max-content;
    }
    body.produkt .video h3 {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
     }
}
.video .overlay {

}
.video .overlay__content > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.video video, .video img {
    -webkit-filter: grayscale(5%) brightness(1.1) contrast(0.5);
            filter: grayscale(5%) brightness(1.1) contrast(0.5);
}
/* .video:hover video, .video:hover img {
    -webkit-filter: grayscale(5%) blur(2px) brightness(1.1) contrast(0.5);
            filter: grayscale(5%) blur(2px) brightness(1.1) contrast(0.5);
} */
.video img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
}




body.produkt .customer_logos {
    margin-bottom: 40px;
}

body.index .video h3 {
    font-size: medium;
}




.bg_projects_friends {
    background-image: url("../assets/projekt/aktuella/projekt-friends.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_sveavagen {
    background-image: url("../assets/projekt/aktuella/projekt-sveavagen.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_akademiska {
    background-image: url("../assets/projekt/aktuella/projekt-akademiska.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_vasterbotten {
    background-image: url("../assets/projekt/aktuella/projekt-vasterbotten.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_masterhuset {
    background-image: url("../assets/projekt/aktuella/projekt-masterhuset.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_stockholms-hamnar {
    background-image: url("../assets/projekt/aktuella/projekt-sthlm-hamn.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_region-ostergotland {
    background-image: url("../assets/projekt/aktuella/projekt-region-ostergotland.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_grow {
    background-image: url("../assets/projekt/aktuella/projekt-grow.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_locum {
    background-image: url("../assets/projekt/aktuella/projekt-locum.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg_projects_akademiska {
    background-image: url("../assets/projekt/aktuella/projekt-akademiska.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* colors */
.color_connected {
    color: var(--color_connected);
}
.color_dali_visualizer {
    color: var(--color_dali_visualizer);
}
.color_blue {
    color: var(--background_blue_primary);
}
.color_dynamics {
    color: var(--color_dynamics);
}
.color_vector_graphics {
    color: var(--color_vector_graphics);
}
.color_historian {
    color: var(--color_historian);
}
.color_fire_visualizer {
    color: var(--color_fire_visualizer);
}
.color_knx_visualizer {
    color: var(--color_knx_visualizer);
}
.color_traffic_management_system {
    color: var(--color_traffic_management_system);
}
.color_cargo_system {
    color: var(--color_cargo_system);
}
.color_security_visualizer {
    color: var(--color_security_visualizer);
}
.color_alla_produkter{
    color: var(--color_alla_produkter)
}

/* background colors */
.bg_connected {
    background-color: var(--color_connected);
}
.bg_dali_visualizer {
    background-color: var(--color_dali_visualizer);
}
.bg_dynamics {
    background-color: var(--color_dynamics);
}
.bg_dali_visualizer {
    background-color: var(--color_dali_visualizer);
}
.bg_vector_graphics {
    background-color: var(--color_vector_graphics);
}
.bg_historian {
    background-color: var(--color_historian);
}
.bg_fire_visualizer {
    background-color: var(--color_fire_visualizer);
}
.bg_knx_visualizer {
    background-color: var(--color_knx_visualizer);
}
.bg_traffic_management_system {
    background-color: var(--color_traffic_management_system);
}
.bg_cargo_system {
    background-color: var(--color_cargo_system);
}
.bg_security_visualizer {
    background-color: var(--color_security_visualizer);
}
.bg_alla_produkter {
    background-color: var(--color_alla_produkter);
}


/* box shadows */
.box_shadow_connected_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_connected);
            box-shadow: -8px -8px 0px 0px var(--color_connected);
}
.box_shadow_connected_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_connected);
            box-shadow: 8px -8px 0px 0px var(--color_connected);
}

.box_shadow_blue_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--background_blue_primary);
            box-shadow: -8px -8px 0px 0px var(--background_blue_primary);
}
.box_shadow_blue_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--background_blue_primary);
            box-shadow: 8px -8px 0px 0px var(--background_blue_primary);
}

.box_shadow_dali_visualizer_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_dali_visualizer);
            box-shadow: -8px -8px 0px 0px var(--color_dali_visualizer);
}
.box_shadow_dali_visualizer_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_dali_visualizer);
            box-shadow: 8px -8px 0px 0px var(--color_dali_visualizer);
}

.box_shadow_dynamics_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_dynamics);
            box-shadow: -8px -8px 0px 0px var(--color_dynamics);
}
.box_shadow_dynamics_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_dynamics);
            box-shadow: 8px -8px 0px 0px var(--color_dynamics);
}

.box_shadow_vector_graphics_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_vector_graphics);
            box-shadow: -8px -8px 0px 0px var(--color_vector_graphics);
}
.box_shadow_vector_graphics_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_vector_graphics);
            box-shadow: 8px -8px 0px 0px var(--color_vector_graphics);
}

.box_shadow_alla_produkter_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_alla_produkter);
            box-shadow: -8px -8px 0px 0px var(--color_alla_produkter);
}
.box_shadow_alla_produkter_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_alla_produkter);
            box-shadow: 8px -8px 0px 0px var(--color_alla_produkter);
}

.box_shadow_historian_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_historian);
            box-shadow: -8px -8px 0px 0px var(--color_historian);
}
.box_shadow_historian_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_historian);
            box-shadow: 8px -8px 0px 0px var(--color_historian);
}

.box_shadow_fire_visualizer_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_fire_visualizer);
            box-shadow: -8px -8px 0px 0px var(--color_fire_visualizer);
}
.box_shadow_fire_visualizer_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_fire_visualizer);
            box-shadow: 8px -8px 0px 0px var(--color_fire_visualizer);
}

.box_shadow_knx_visualizer_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_knx_visualizer);
            box-shadow: -8px -8px 0px 0px var(--color_knx_visualizer);
}
.box_shadow_knx_visualizer_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_knx_visualizer);
            box-shadow: 8px -8px 0px 0px var(--color_knx_visualizer);
}

.box_shadow_traffic_management_system_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_traffic_management_system);
            box-shadow: -8px -8px 0px 0px var(--color_traffic_management_system);
}
.box_shadow_traffic_management_system_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_traffic_management_system);
            box-shadow: 8px -8px 0px 0px var(--color_traffic_management_system);
}

.box_shadow_cargo_system_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_cargo_system);
            box-shadow: -8px -8px 0px 0px var(--color_cargo-system);
}
.box_shadow_cargo-system_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_cargo-system);
            box-shadow: 8px -8px 0px 0px var(--color_cargo-system);
}

.box_shadow_security_visualizer_left {
    -webkit-box-shadow: -8px -8px 0px 0px var(--color_security_visualizer);
            box-shadow: -8px -8px 0px 0px var(--color_security_visualizer);
}
.box_shadow_security_visualizer_right {
    -webkit-box-shadow: 8px -8px 0px 0px var(--color_security_visualizer);
            box-shadow: 8px -8px 0px 0px var(--color_security_visualizer);
}


/* products */
.product_connected {
    background-color: var(--color_connected);
}
.connected_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_connected) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_connected))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_connected) 50%) right;
    background-size: 200%;
    border-left: 5px solid var(--color_connected) !important;
}
.product_dali_visualizer {
    background-color: var(--color_dali_visualizer);
}
.dali_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_dali_visualizer) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_dali_visualizer))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_dali_visualizer) 50%) right;
    background-size: 200%;    
    border-left: 5px solid var(--color_dali_visualizer) !important;
}
.product_dynamics {
    background-color: #239FE5;
}
.dynamics_nav {
    background: -o-linear-gradient(right, transparent 50%, #239FE5 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, #239FE5)) right;
    background: linear-gradient(to left, transparent 50%, #239FE5 50%) right;
    background-size: 200%;    
    border-left: 5px solid #239FE5 !important;
}
.product_tfv {
    background-color: var(--color_fire_visualizer);
}
.tfv_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_fire_visualizer) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_fire_visualizer))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_fire_visualizer) 50%) right;
    background-size: 200%;    
    border-left: 5px solid var(--color_fire_visualizer) !important;
}
.product_historian {
    background-color: var(--color_historian);
}
.historian_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_historian) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_historian))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_historian) 50%) right;
    background-size: 200%;    
    border-left: 5px solid var(--color_historian) !important;
}
.product_knx_visualizer {
    background-color: var(--color_knx_visualizer);
}
.knx_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_knx_visualizer) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_knx_visualizer))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_knx_visualizer) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--color_knx_visualizer) !important;  
}
.product_tms {
    background-color: var(--color_traffic_management_system);
}
.tms_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_traffic_management_system) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_traffic_management_system))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_traffic_management_system) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--color_traffic_management_system) !important;
}
.product_cargo {
    background-color: var(--color_cargo_system);
}
.cargo_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--cargo_system) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_cargo_system))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_cargo_system) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--color_cargo_system) !important;
}
.product_vector_graphics {
    background-color: green;
}


.vector_graphics_nav {
    background: -o-linear-gradient(right, transparent 50%, green 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, green)) right;
    background: linear-gradient(to left, transparent 50%, green 50%) right;
    background-size: 200%;  
    border-left: 5px solid green !important;
}
.product_alla_produkter {
    background-color: #0D4A6D;
}
.alla_produkter_nav {
    background: -o-linear-gradient(right, transparent 50%, #0D4A6D 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, #0D4A6D)) right;
    background: linear-gradient(to left, transparent 50%, #0D4A6D 50%) right;
    background-size: 200%;  
    border-left: 5px solid #0D4A6D !important;
}

.product_security_visualizer {
    background-color: var(--color_security_visualizer);
}
.security_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_security_visualizer) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_security_visualizer))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_security_visualizer) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--color_security_visualizer) !important;
}
.show_all_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--color_primary) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--color_primary))) right;
    background: linear-gradient(to left, transparent 50%, var(--color_primary) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--color_primary) !important;
}
.primary_nav {
    background: -o-linear-gradient(right, transparent 50%, var(--background_blue_primary) 50%) right;
    background: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, var(--background_blue_primary))) right;
    background: linear-gradient(to left, transparent 50%, var(--background_blue_primary) 50%) right;
    background-size: 200%;  
    border-left: 5px solid var(--background_blue_primary) !important;
}

/* onload animations */
.fade_up {
    opacity: 0;
    -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
            transform: translateY(50px);
}
.fade_up.active {
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}


/* produkt swosh */
.swosh_wrapper {
    position: fixed;
    top: 15vh;
    right: 0;
    z-index: 199;
}
@media screen and (max-width: 768px) {
    .swosh_wrapper {
        display: none !important;
    }
}
.swosh {
}
.swosh_item {
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 220px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 40px;
    padding-top: 16px;
    padding-bottom: 15px;
}
.swosh_item h6 {
    color: var(--color_secondary);
}

/* ================================
   DOWNLOAD PAGE (dl.trebor.se)
   ================================ */
.dl-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 20px;
}
.dl-search {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 30px;
    outline: none;
    background: white;
}
.dl-search:focus {
    border-color: #0a8f8f;
}
.dl-search::placeholder {
    color: #aaa;
}
.dl-folder {
    margin-bottom: 30px;
}
.dl-folder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 2px solid #0a8f8f;
    margin-bottom: 2px;
    cursor: pointer;
    user-select: none;
}
.dl-folder-header:hover {
    opacity: 0.8;
}
.dl-folder-icon {
    width: 20px;
    height: 20px;
}
.dl-folder-name {
    font-size: 15px;
    font-weight: 600;
    color: #0f1b2d;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.dl-folder-count {
    font-size: 12px;
    color: #8a99aa;
    margin-left: auto;
}
.dl-folder-chevron {
    color: #8a99aa;
    font-size: 12px;
    transition: transform 0.2s;
}
.dl-folder.collapsed .dl-folder-chevron {
    transform: rotate(-90deg);
}
.dl-folder.collapsed .dl-table {
    display: none;
}
.dl-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 0 20px rgb(0 0 0 / 5%);
}
.dl-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #8a99aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    user-select: none;
    background: #fafbfc;
}
.dl-table th:hover {
    color: #0a8f8f;
}
.dl-table th .sort-arrow {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.4;
}
.dl-table th.active .sort-arrow {
    opacity: 1;
    color: #0a8f8f;
}
.dl-table td {
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.dl-table tr:hover {
    background: #f8fafb;
}
.dl-table tr:last-child td {
    border-bottom: none;
}
.dl-filename {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dl-filename img {
    width: 28px;
    height: auto;
}
.dl-filename a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
}
.dl-filename a:hover {
    color: #0a8f8f;
}
.dl-size, .dl-date {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
}
.dl-download {
    text-align: center;
}
.dl-download a {
    color: #0a8f8f;
    text-decoration: none;
    font-size: 16px;
}
.dl-download a:hover {
    color: #087070;
}
.dl-empty {
    text-align: center;
    padding: 40px;
    color: #8a99aa;
    font-size: 14px;
}
.dl-loading {
    text-align: center;
    padding: 60px;
    color: #8a99aa;
    font-size: 14px;
}
@media screen and (max-width: 600px) {
    .dl-date { display: none; }
    .dl-table th:nth-child(3),
    .dl-table td:nth-child(3) { display: none; }
    .dl-table th:nth-child(4),
    .dl-table td:nth-child(4) { display: none; }
}