/* LaboTest AB */

/* Typsnitt */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* Animationer */
@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

/* ==========================================================================
Generellt
========================================================================== */
:root {
	/* 	Layout  */
	--col-padding: 3rem;
	--menu-height: 7.2rem;
	--menu-height-scrolled: 7.2rem;
	--section-width: 130rem;

	/* 	Colors */
	--primary-color: 15, 190, 124;
	--primary-light-color: 225, 247, 239;
	--primary-dark-color: 24, 146, 97;
	--secondary-color: 207, 210, 215;

	--black-color: 17, 17, 17;
	--gray-color: 220, 220, 220;
	--gray-dark-color: 69, 69, 69;
	--gray-light-color: 242, 242, 242;
	--white-color: 255, 255, 255;

	/* 	Typography */
	--base-size: 1.7rem;

	/* 	Mobile nav */
	--activate-mobile-menu: 1000;
	--mobile-menu-height: 7rem;
	--mobile-menu-bg: var(--white-color);
	--menu-color: rgb(var(--black-color));
}

/* Layout
========================================================================== */
.section-wrapper {
	background-color: rgb(var(--white-color));
}

.section-block {
	padding: 12rem 5rem;
}

.section-block-wrapper {
	max-width: var(--section-width);
}

.mw-none .section-block-wrapper {
	max-width: none;
}

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

/* Paddings */
.p-2 .section-block,
.p-2:not(.section-wrapper) {
	padding: 2rem;
}

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

.pb-0,
.pb-0 .section-block {
	padding-bottom: 0;
}

.pb-2 .section-block,
.pb-2:not(.section-wrapper) {
	padding-bottom: 2rem;
}

.pb-4 .section-block,
.pb-4:not(.section-wrapper) {
	padding-bottom: 4rem;
}

.pt-0{
	padding-top: 0;
}
.pt-2 .section-block,
.pt-2:not(.section-wrapper) {
	padding-top: 2rem;
}
.py-2 .section-block,
.py-2:not(.section-wrapper) {
	padding-top: 4rem;
	padding-bottom: 4rem;
}
.pl-3{
	padding-left: 3rem;
}
.mb-2 {
	margin-bottom: 2rem;
}
.mb-5 {
	margin-bottom: 5rem;
}
.mt-1 {
	margin-top: 1rem;
}
.mt-3 {
	margin-top: 3rem;
}
.mt-5 {
	margin-top: 5rem;
}
.mr-2{
	margin-right: 2rem;
}

/* Bredder */
.mw-none .section-block-wrapper {
	max-width: none;
}

@media only screen and (max-width: 1024px) {
	.section-block {
		padding: 8rem 3rem;
	}
}

@media only screen and (max-width: 580px) {
	.section-block {
		padding: 5rem 2rem;
	}
}

/* Text och typsnitt
========================================================================== */
body {
	font-family: 'Manrope', sans-serif;
	color: rgb(var(--gray-dark-color));
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: inherit;
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: normal;
	text-transform: none;
}

/* Rubriker */
.text-label {
	font-size: 1.7rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding-bottom: 1rem;
	font-weight: 500;
	color: rgb(var(--primary-color));
}

.section-title {
	font-size: 4.4rem;
	font-weight: 600;
	padding-bottom: 2rem;
	line-height: 1.3;
}

.small-title {
	font-size: 2.5rem;
	font-weight: 500;
	line-height: 1.3;
	padding-bottom: 1rem;
}

.ingress {
	font-size: 2rem;
	line-height: 1.7;
	color: rgb(var(--primary-color));
	font-weight: 500;
	max-width: 80rem;
}

/* Brodtext och lankar */
p,
li {
	font-weight: 300;
	color: rgb(var(--gray-dark-color));
}

p {
	padding: 0 0 1.2em;
}

a {
	font-size: inherit;
	font-weight: inherit;
	text-decoration: underline;
	color: inherit;
}

a:hover {
	text-decoration: none;
}

/* Ovriga klasser */
.text-block {
	max-width: 70rem;
}

.text-block-center {
	max-width: 90rem;
	margin-left: auto;
	margin-right: auto;
}

.text-bold {
	font-weight: 600;
}

.text-center {
	text-align: center;
}

.text-small {
	font-size: 1.4rem;
}

/* Listor */
.no-markers {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.number-list li::marker{
	color: rgb(var(--primary-color));
	font-weight: 600;
}

/* List-check */
.list-check {
    padding: 0;
    list-style: none;
}

.list-check li::before {
    content: '\f00c';
    position: relative;
    padding: 0 1rem 0 0;
    top: -2px;
    font-weight: 700;
    font-size: 1.3rem;
	color: rgb(var(--primary-color));
    font-family: 'Font Awesome 5 Pro';
}

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

	.section-title {
		font-size: 3.8rem;
	}

	.heading,
	.text-label {
		font-size: 1.8rem;
	}
}

@media only screen and (max-width: 600px) {
	.section-title {
		font-size: 3.3rem;
	}

	.page-heading {
		font-size: 3.3rem;
	}

	.ingress {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	.text-label {
		font-size: 1.6rem;
	}
}

@media only screen and (max-width: 450px) {
	.section-title {
		font-size: 3rem;
	}

	.small-title {
		font-size: 1.8rem;
		line-height: 1.4;
	}
}

/* Knappar och speciella lankar
========================================================================== */
.btn-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2rem;
}

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

/* PDF */
.pdf-wrapper>* {
	display: block;
	width: 100%;
	padding: 0;
}

/* Knappar */
.btn {
	display: inline-block;
	width: auto;
	max-width: 50rem;
	font-size: 1.3rem;
	font-weight: 600;
	padding: 1.9rem 3rem;
	border-radius: .6rem;
	letter-spacing: 0.2rem;
	line-height: 1em;
	text-align: center;
	transition: all .4s ease;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.btn-primary-filled,
.ContactSubmit {
	color: rgb(var(--white-color));
	border: 2px solid rgb(var(--primary-color));
	background-color: rgb(var(--primary-color));
}

.btn-primary-filled:hover,
.ContactSubmit:hover,
.ContactSubmit:focus {
	border: 2px solid rgb(var(--primary-color));
	background-color: transparent;
	color: rgb(var(--primary-color));
}

.btn-white-filled {
	color: rgb(var(--black-color));
	border: 2px solid rgb(var(--white-color));
	background-color: rgb(var(--white-color));
}

.btn-white-filled:hover {
	border: 2px solid rgb(var(--white-color));
	background-color: transparent;
	color: rgb(var(--white-color));
}

/* Arrow link */
.arrow-link {
	font-size: var(--base-size);
	padding-right: 1rem;
	color: rgb(var(--gray-dark-color));
}

.arrow-link::after {
	display: inline-block;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 700;
	content: '\f061';
	margin-left: 0.8rem;
	text-decoration: none;
	transition: all 200ms linear;
	transform: translateX(1rem);
}

.arrow-link:hover::after {
	transform: translateX(1.5rem);
}

.down-arrow-after:after {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 700;
	content: '\f078';
	margin-left: 0.8rem;
	text-decoration: none;
	display: inline-block;
	transform: translateX(1rem);
}

.down-arrow-before:before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 700;
	content: '\f078';
	margin-left: 0.8rem;
	text-decoration: none;
	display: inline-block;
	transform: translateX(1rem);
}

/* Cirkelikon */
.circle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	margin: .5rem;
	font-size: 0;
	color: rgb(var(--primary-color));
	text-decoration: none;
	border-radius: 50%;
	border: 1px solid rgb(var(--primary-color));
	background-color: rgb(var(--white-color));
	transition: .3s ease;
}

.circle-icon:hover {
	color: rgb(var(--white-color));
	background-color: rgb(var(--primary-color));
}

.circle-icon i:before,
.circle-icon em:before {
	font-size: 1.4rem;
}

@media only screen and (max-width: 480px) {
	.btn {
		display: block;
		width: 100%;
		padding: 1.5rem 3rem;
	}
}

/* Farger
========================================================================== */
/* Bakgrunder */
.bg-primary {
	background-color: rgb(var(--primary-color));
}

.bg-primary-light {
	background-color: rgb(var(--primary-light-color));
}

.bg-gray-dark {
	background-color: rgb(var(--gray-dark-color));
}

.bg-gray {
	background-color: rgb(var(--gray-color));
}

.bg-gray-light {
	background-color: rgb(var(--gray-light-color));
}

.bg-black {
	background-color: rgb(var(--black-color), .8);
}

.bg-white {
	background-color: rgb(var(--white-color));
}

.bg-white-light {
	background-color: rgb(var(--white-color), .5);
}

/* Text */
.text-primary {
	color: rgb(var(--primary-color));
}

.text-white {
	color: rgb(var(--white-color));
}

/* Grafiska element
========================================================================== */
.border-bottom-gray {
	border-bottom: 1px solid rgb(var(--black-color), .5);
}
/* Box shadow */
.box-shadow {
    box-shadow: 0 1rem 3rem rgba(var(--black-color), .1);
}

/* Bakgrundsbild / videos
========================================================================== */
.bg-image,
.bg-video {
    position: relative;
    overflow: hidden;
}

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

/* Video */
.bg-video-wrapper video {
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%);
}

/* Object fit */
.image-wrapper .of-contain {
	object-fit: contain;
}

.parallax {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.parallax .section-block {
    min-height: 40rem;
    background-color: rgb(var(--black-color), .4)
}

@media only screen and (hover:none) {
    .parallax {
        background-attachment: scroll;
        background-position: center center;
    }
}

/* Cards
========================================================================== */
.cards-wrapper {
	display: flex;
	flex-wrap: wrap;
}

/* Card grow */
.cards-grow .card-item {
	display: flex;
	flex-direction: column;
}

.cards-grow .card-body {
	flex-grow: 1;
}

/* Specifika bredder */
.cards-wrapper.w-20 .card-item {
	width: calc((100% / 5) - 2rem);
	margin: 1rem;
}
.cards-wrapper.w-33 .card-item {
	width: calc((100% / 3) - 2rem);
	margin: 1rem;
}

.cards-wrapper.w-25 .card-item {
	width: calc((100% / 4) - 2rem);
	margin: 1rem;
}


@media only screen and (max-width: 1300px) {
	/* Bredder */
	.cards-wrapper.w-25 .card-item {
		width: calc((100% / 3) - 2rem);
		margin: 1rem;
	}
}
@media only screen and (max-width: 1200px) {
	/* Bredder */
	.cards-wrapper.w-20 .card-item {
		width: calc((100% / 4) - 2rem);
		margin: 1rem;
	}
}

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

	/* Bredder */
	.cards-wrapper.w-25 .card-item {
		width: calc((100% / 2) - 2rem);
		margin: 1rem;
	}
	.cards-wrapper.w-20 .card-item {
		width: calc((100% / 2) - 2rem);
		margin: 1rem;
	}
}

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

	/* Bredder */
	.cards-wrapper.w-25 .card-item {
		width: 100%;
		margin: 1rem 0;
	}
	.cards-wrapper.w-20 .card-item {
		width: calc((100% / 1) - 2rem);
		margin: 1rem;
	}
}

.card-3-1 .image-wrapper {
	height: 30rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Card 3-2 */
.card-3-2 .card-item {
    overflow: hidden;
}

.card-3-2.image-wrapper {
	height: 20rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-3-2 .product-links a {
	width: 100%;
}

.card-3-2 a {
	text-decoration: none;
}

/* Cards 11 */
.cards-11 .image-wrapper {
	height: 40rem;
}

.cards-11 .text-wrapper {
	padding: 3rem 0;
}

.cards-11 .small-title {
	font-weight: 300;
	padding-bottom: 0;
}

.cards-11 .title {
	font-weight: 400;
	padding: 1rem 0;
}

.cards-11 a {
	display: block;
	padding-bottom: .3rem;
	font-size: 1.4rem;
}

.cards-11 em,
.cards-11 i {
	margin-right: 1rem;
	color: rgb(var(--primary-color));
}

.cards-11 .socials-wrapper {
	margin-top: 1rem;
}

.cards-11 .socials-wrapper a {
	display: inline-block;
}

/* Split wrapper
========================================================================== */
.split-wrapper {
	display: flex;
	flex-wrap: wrap;
}

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

.split-content {
	width: 50%;
	padding: 6rem 9rem;
}

.split-content.pt-0 {
	padding-top: 0 ;
}

.split-content-sm-p{
	padding: 2rem !important;
}

.split-content .split-text {
	align-self: center;
}

.split-image {
	width: 50%;
}

.small-split .split-content {
	order: 0;
	padding: 0 2rem;
}

.small-split .split-image {
	max-width: 30rem;
	order: 1;
	align-self: center;
}

/* Centrera content */
.split-wrapper .align-center {
	align-self: center;
}

/* Speciella paddings */
.split-wrapper .pl-0 {
	padding-left: 0;
}

.split-wrapper .pr-0 {
	padding-right: 0;
}

/* Speciella bredder */
.split-wrapper .w-60 {
	width: 60%;
}

.split-wrapper .w-40 {
	width: 40%;
}
.split-wrapper .w-70 {
	width: 70%;
}

.split-wrapper .w-30 {
	width: 30%;
}


@media screen and (max-width: 1470px) {
	.split-content {
		padding: 8rem 5rem;
	}
}


@media screen and (max-width: 1100px) {
	.split-wrapper .w-70,
	.split-wrapper .w-60,
	.split-wrapper .w-40,
	.split-wrapper .w-30 {
		width: 100%;
	}

	.split-content,
	.split-content.p-2 {
		width: 100%;
		padding: 5rem;
	}

	.split-image {
		width: 100%;
		min-height: 20rem;
	}
	.split-content.pt-0 {
	padding-top: 4rem ;
}
}

@media screen and (max-width: 580px) {
	.split-wrapper {
		background: transparent;
	}

	.split-content {
		padding: 2rem;
	}
}

/* Modal som öppnas automatiskt
========================================================================== */
body:not(.EditMode) .section-auto-modal {
	display: none;
	z-index: 9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(var(--black-color), .7);
}

body:not(.EditMode) .section-auto-modal .section-block {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(100% - 4rem);
	max-width: 85rem;
	max-height: 80vh;
	padding: 3rem;
	border-radius: 0;
	overflow: auto;
	background-color: white;
	/*background-image: url(/assets/images/gothenburg.jpg);*/
	background-size: cover;
	transform: translate(-50%, -50%);
}

.section-auto-modal .close-modal {
	position: absolute;
	top: 1rem;
	right: 2rem;
	font-size: 3rem;
	cursor: pointer;
	color: black;
}

@media only screen and (max-width: 450px) {
	body:not(.EditMode) .section-auto-modal .section-block {
		padding: 3rem 2rem;
	}
}

/* Popup-notis
========================================================================== */
.popup-wrapper {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	max-width: calc(100vw - 2rem);
	width: 100%;
	z-index: 10;
}

.sv.popup-wrapper,
.en.popup-wrapper {
	display: none;
}

body:not(.en) .sv.popup-wrapper {
	display: block;
}

body.en .en.popup-wrapper {
	display: block;
}

.popup-wrapper h3 {
	text-transform: none;
	text-align: left;
	font-weight: 600;
	color: rgb(var(--white-color));
	padding-top: 0;
	font-size: 3.2rem;
	line-height: 1.3;
	letter-spacing: normal;
	padding-bottom: 2rem;
	margin-bottom: 0;
}

.popup-wrapper h3:before {
	display: none;
}

/* Knappen */
#popup-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	width: 5rem;
	height: 5rem;
	background: rgb(var(--secondary-color));
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 .1rem 3rem rgba(var(--black-color), 0.2);
	transition: .25s ease;
}

#popup-btn:hover {
	transform: scale(1.05);
}

#popup-btn em {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	color: #272526;
	transition: .25s ease;
}

.sponsor-wrapper{
	max-width: 15rem;
	margin: auto;
	padding-bottom: 2rem;

}
/* Visa oppningsikonen*/
.popup-wrapper #popup-btn .open-notis {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

/* Dolj oppningsikonen*/
.popup-wrapper.opened #popup-btn .open-notis {
	visibility: hidden;
	opacity: 0;
	transform: scale(0);
}

/* Visa stangikonen */
.popup-wrapper.opened #popup-btn .close-notis {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

/* Dolj stangikonen */
.popup-wrapper #popup-btn .close-notis {
	visibility: hidden;
	opacity: 0;
	transform: scale(0);
}

/* Notisen */
.popup-notis {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 4rem;
	right: 2rem;
	max-width: 25rem;
	width: 100%;
	overflow: hidden;
	padding: 4rem 2rem;
	border-radius: 0;
	background: rgb(var(--white-color));
	box-shadow: 0 .1rem 3rem rgba(var(--black-color), 0.1);
	transition: .5s ease;
}

/* visa popup-notisen */
.popup-wrapper.opened .popup-notis {
	visibility: visible;
	opacity: 1;
	bottom: 7rem;
}

.popup-notis em {
	position: absolute;
	top: 1.5rem;
	right: 2rem;
	font-size: 1.9rem;
	color: rgb(var(--black-color));
	cursor: pointer;
}

.popup-notis .popup-title {
	font-size: 2rem;
	padding: 0 0 2rem;
}

.popup-notis p {
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 300;
	text-align: left;
	padding-bottom: 1.5rem;
}

.popup-notis a {
	display: block;
	line-height: 1.8;
	color: rgb(var(--primary-color));
	border: 1px solid rgb(var(--primary-color));
	text-align: center;
	padding: .5rem;
	font-size: 1.3rem;
	border-radius: .6rem;
	text-decoration: none;
	margin-bottom: .5rem;
	font-weight: 400;
	-moz-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

.popup-notis a:hover {
	color: rgb(var(--white-color));
	background: rgb(var(--primary-color));
	border-color: rgb(var(--primary-color));
	text-decoration: none;
}

.popup-notis a:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width:500px) {
	.popup-notis {
		right: 0;
		width: calc(100% - 2rem);
	}
}

/* Header / Navigation
========================================================================== */
header {
	box-shadow: 0 0.1rem 1rem rgba(var(--black-color), 0.1);
}

header .container {
	padding: 0 2rem;
	max-width: 170rem;
	margin: 0 auto;
}

/* Logo */
.header-logo {
	margin: 0 auto 0 0;
	width: 15rem;
}

.header-logo img {
	padding: 1.5rem 0;
}

/* Nav */
.TemplateMenu a {
	font-weight: 500;
	font-size: 1.5rem;
}

.TemplateMenu>li>a:hover {
	color: rgb(var(--primary-color));
}

/* Dropdown */
header:not(.mobile-menu) .TemplateMenu ul {
	width: 25rem;
	box-shadow: 0 .2rem 2rem rgb(var(--primary-dark-color), .25);
}

.TemplateMenu ul a {
	line-height: 1.8;
	margin-bottom: 1rem;
	padding: .5rem 2rem;
}

/* CTA  */
.header-cta-wrapper {
	display: none;
	justify-content: flex-end;
	align-items: center;
	padding: 0;
	margin: 0 0 0 1rem;
	list-style: none;
}

body:not(.en) .sv.header-cta-wrapper {
	display: flex;
}

body.en .en.header-cta-wrapper {
	display: flex;
}

.header-cta-wrapper li {
	margin: 0 1rem;
}

.header-cta-wrapper .btn {
	min-width: unset;
    width: auto;
    padding: 1.2rem 1.4rem;
    font-size: 1.4rem;
}

.header-cta-wrapper .lang .btn {
    padding: 5px;
    width: unset;
}

.header-cta-wrapper .lang img {
	max-width: 3rem;
}

/* Mobilmeny */
.mobile-menu .container {
	height: var(--mobile-menu-height);
}

.mobile-menu .hamburger {
	margin: 0 -1rem 0 1rem;
}

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

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

	/* Header CTA */
	.header-cta-wrapper li {
		margin: 0 .5rem;
	}

	.header-cta-wrapper .btn {
		padding: 1.2rem 1rem;
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
		white-space: nowrap;
	}

	/* Mobilmeny */
	.mobile-menu .hamburger {
		margin: 0 -1rem 0 0;
	}
}

/* ==========================================================================
Startsida
========================================================================== */

/* Fixerad video
========================================================================== */
.fixed-video {
	z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%);
}

.EditMode .fixed-video {
	position: relative;
	height: auto;
	z-index: 1;
}


/* Top-section
========================================================================== */
.top-section {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: calc(105vh - var(--menu-height));
	padding: 9rem 2rem 3rem;
	background-color: rgb(var(--black-color), .5);
}

.EditMode .top-section {
	margin-top: 0;
}

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

.top-section .section-block-wrapper {
	width: 100%;
	max-width: 85rem;
	margin: 0;
}

.top-section h1,
.top-section h2 {
	color: rgb(var(--white-color));
	padding: 0;
	line-height: 1.4;
	text-shadow: none;
	font-weight: 300;
}

.top-section h1 {
	font-size: 5rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	padding-bottom: 2rem;
}

.top-section strong {
	color: rgb(var(--primary-color));
}

.top-section p {
	color: rgb(var(--white-color));
	font-weight: 300;
	max-width: 80rem;
}

.top-section .btn-wrapper {
	margin-top: 1rem;
    justify-content: center;
}

.top-section .btn-wrapper a {
	margin: 1rem;
}

@media only screen and (max-width:1450px) {
	.top-section .section-block-wrapper {
		max-width: 60rem;
	}

	.top-section h1 {
		font-size: 3.5rem;
	}
	.top-section .btn-wrapper  {
		display: flex;
		flex-direction: row;
	}
	.top-section .btn-wrapper a  {
		margin-bottom: 1rem;
	}
}

@media only screen and (max-width:600px) {
	.top-section {
		padding: 2rem;
	}

	.top-section .btn {
		display: block;
		margin: 1rem 0 !important;
		max-width: 100%;
	}
}

@media only screen and (max-width: 550px) {
	.top-section {
		background-color: rgba(var(--black-color), 0.7);
	}

	.top-section h1 {
		font-size: 3rem;
	}
}

@media only screen and (max-width:340px) {
	.top-section h1 {
		font-size: 2.4rem;
	}
}

.gift-wrapper{
	max-width: 100rem;
	margin: auto;
	box-shadow: 0 .1rem 3rem rgba(var(--black-color), 0.2);
	padding: 2rem;
	border-radius: 1rem;
}

/* Produkter och tjanster
========================================================================== */
.products .section-block {
	position: relative;
}

/*.products .section-block {
	background: linear-gradient(to top, rgb(var(--gray-light-color)) 0%, rgb(var(--white-color)) 40%);
} */

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

.products .split-text {
	max-width: 53rem;
}

.products .btn:first-child {
	margin-right: 2rem;
}

.products .split-content {
	width: 50%;
	padding-left: 0;
	padding-right: 0;
}

.products .split-image {
	width: 50%;
}

.products .split-image img {
	object-fit: contain;
}

.products .content-logo {
	max-width: 20rem;
	padding: 0 0 0 4rem;
	align-self: center;
}

.produkt-knapp a{
	margin-right: 2rem;
}
@media only screen and (max-width:1080px) {
	.products .split-image {
		width: 100%;
		order: 1;
	}

	.products .split-content {
		width: 100%;
		order: 0;
		padding-top: 0;
	}

	.products .split-text {
		max-width: 70rem;
	}
}

@media only screen and (max-width: 700px) {
	.products .split-content {
		flex-wrap: wrap;
		justify-content: center;
	}

	.products .content-logo {
		max-width: 15rem;
		padding: 3rem 0;
	}
}

@media only screen and (max-width: 523px) {
	.produkt-knapp a{
		margin-right: 0rem;
		margin-bottom: 1rem;
		width: 100%;
	}
}

/* Om oss
========================================================================== */
.section-about .section-block {
	padding: 12rem 0;
}

.section-about .section-block-wrapper {
	max-width: none;
}
/* Seminarium
========================================================================== */
.section-seminar .col-0{
	max-width: 80rem;
	margin: auto;
		background-color: rgb(var(--gray-light-color));
		padding: 4rem;
		border-radius: 2rem;
}
/* Sektion CTA
========================================================================== */
.section-cta {
    background-image: url('/assets/images/service-maskin-2000px.jpg');
}

.cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.cta-wrapper .text-block {
    max-width: 65rem;
}

.cta-wrapper .btn-wrapper {
    margin-top: 0;
}

@media only screen and (max-width: 1000px) {
    .cta-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cta-wrapper .btn-wrapper {
        margin-top: 2rem;
    }
}

/* CTA-sektion på produktundersidorna
========================================================================== */
.cta-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.cta-wrapper .text-block {
    max-width: 65rem;
}

.cta-wrapper .btn-wrapper {
    margin-top: 0;
}

@media only screen and (max-width: 1000px) {
    .cta-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

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

/* Cookiebot
========================================================================== */
body #CybotCookiebotDialogPoweredbyCybot svg {
	height: 1em;
}

/* ==========================================================================
 Undersidor
========================================================================== */

/* Hero
========================================================================== */
.hero {
    display: flex;
    align-items: flex-end;
    min-height: 50vh;
    padding-top: var(--menu-height);
    margin-top: calc(-1 * var(--menu-height));
    background-color: rgb(var(--black-color), .5);
}

.hero .section-block {
    width: 100%;
    padding-bottom: 5rem;
}

.hero .section-block-wrapper {
    width: 100%;
}

.hero .section-title {
	padding: 0 0 1rem;
	margin: 0 0 1rem;
    font-size: 4.5rem;
    color: rgb(var(--white-color));
    border-bottom: 2px solid rgb(var(--primary-color));
}

.hero p {
    font-size: 1.7rem;
    color: rgb(var(--white-color));
}


@media only screen and (max-width: 580px) {
    .hero {
        min-height: 40rem;
    }

    .hero .section-title {
        font-size: 3rem;
    }

    .hero p {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
 Undersida: Om oss
========================================================================== */
.image-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
}

.image-item {
	width: 31%;
	margin: 1%;
	padding: 2rem;
	background-color: rgb(var(--white-color));
	text-align: center;
	display: flex;
	justify-content: center;
}

.image-item.big-image {
	width: 48%;
}


.image-item img {
	max-height: 20rem;
	align-self: center;
}

@media only screen and (max-width: 510px) {
	.image-items-wrapper {
		margin-top: 2rem;
	}

	.image-item,.image-item.big-image {
		width: 100%;
		margin: 0 0 2rem 0;
	}
}


/* ==========================================================================
Undersida: Produkt- och tjanster Landningssida
========================================================================== */

.product.hero {
    display: flex;
    align-items: flex-end;
    max-height: 40vh;
    padding-top: var(--menu-height);
    margin-top: calc(-1 * var(--menu-height));
    background: rgb(var(--gray-dark-color));
}

.product.hero .section-block {
    width: 100%;
    padding-bottom: 5rem;
}

.product.hero .section-title {
    padding: 0 0 1rem;
    margin: 0 0 1rem;
    font-size: 4.5rem;
    color: rgb(var(--white-color));
    border-bottom: 2px solid rgb(var(--primary-color));
}

.product.hero p {
    font-size: 2rem;
    color: rgb(var(--white-color));
}

@media only screen and (max-width: 580px) {
    .product.hero {
        min-height: 40rem;
    }

    .product.hero .section-title {
        font-size: 3rem;
    }

    .product.hero p {
        font-size: 1.6rem;
    }
}
/* Hero Info
========================================================================== */
.hero-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Breadcrums */
.breadcrumbs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 5px;
}

.hero-info .breadcrumbs:nth-child(1) {
    margin-right: 1rem;
}

.breadcrumbs li {
    font-size: 1.3rem;
}

.breadcrumbs li:not(:last-child)::after {
    content: '/';
    padding: 0 1rem;
    color: rgb(var(--white-color));
}

.breadcrumbs a {
    font-size: inherit;
    text-decoration: none;
    color: rgb(var(--white-color));
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.hero-info .breadcrumbs:nth-child(1) li:last-child a:not(.clickable) {
    pointer-events: none;
}

@media only screen and (max-width: 580px) {
    .breadcrumbs {
        width: 100%;
    }

    .breadcrumbs:first-child {
        margin-bottom: 2rem;
    }

    .breadcrumbs li {
        font-size: 1.2rem;
    }
    
    .breadcrumbs li:not(:last-child)::after {
        padding: 0 5px;
    }

    .breadcrumbs:first-child li:not(:last-child) {
        display: flex;
        width: 18%;
    }
    
    .breadcrumbs:first-child li:not(:last-child) a {
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
}


/* Sub-navigering
========================================================================== */
.section-product-nav  {
    z-index: 2;
    position: sticky;
    top: var(--menu-height);
    overflow: auto;
    white-space: nowrap;
}


.section-product-nav .sub-menu {
	list-style: none;
	display: flex;
	flex-wrap: nowrap !important;
	flex-direction: row;
	padding: 0;
	margin: 0;
	background: rgb(var(--primary-color));
}

.section-product-nav .sub-menu a {
	display: block;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 3;
	text-decoration: none;
	color: rgb(var(--white-color));
	padding: 1rem 2rem;
	transition: 0.2s ease-in-out;
}

.section-product-nav .sub-menu a:hover,
.section-product-nav .sub-menu-active {
	background-color: rgb(var(--primary-dark-color));
}



/* Produktfiltrering
========================================================================== */
.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
	background-color: rgb(var(--gray-light-color));
}

.filter-buttons li {
	width: calc(100% / 6);
}

.filter-link {
	display: flex;
	height: 100%;
	flex-direction: column;
	text-decoration: none;
	text-align: center;
	padding: 1rem 2rem;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 2;
	transition: all .3s ease;
}

.filter-link:hover {
	background-color: rgb(var(--gray-color));
	transition: all .3s ease;
}

.filter-link.active-link {
	background-color: rgb(var(--primary-color));
	color: rgb(var(--white-color));
}

.filter-link img {
	max-height: 10rem;
	min-height: 10rem;
	align-self: center;
}

@media only screen and (max-width: 1080px) {
	.filter-buttons li {
		width: calc(100% / 3);
	}
}

@media only screen and (max-width: 700px) {
	.filter-buttons li {
		width: calc(100% / 2);
	}
}

@media only screen and (max-width: 500px) {
	.filter-buttons li {
		width: 100%;
	}
}


/* Produktsplittar
========================================================================== */
.product-split {
	background-color: rgb(var(--white-color));
	box-shadow: 0 0 3rem rgb(var(--black-color), .1);
	margin: 0 0 3rem;
}

.product-split .split-content {
	padding: 4rem 3rem 6rem;
	flex-direction: column;
	justify-content: space-between;
}

.product-split .arrow-link {
	width: 100%;
	padding: 1.5rem;
	border: 1px solid rgb(var(--gray-color));
}

@media only screen and (max-width: 1100px) {
	.product-split .split-image img {
		display: block;
		max-height: 30rem;
		margin: 0 auto;
	}
}

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

/* Sub-navigering
========================================================================== */
.sub-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 0;
	margin: 0 0 2rem 0;
	background: rgb(var(--primary-color));
}

.sub-menu a {
	display: block;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 3;
	text-decoration: none;
	color: rgb(var(--white-color));
	padding: 1rem 2rem;
	transition: 0.2s ease-in-out;
}

.sub-menu a:hover,
.sub-menu-active {
	background-color: rgb(var(--primary-dark-color));
}

@media only screen and (max-width: 680px) {
	.sub-menu {
		flex-direction: column;
	}
}


/* ==========================================================================
Undersida: Temperaturskap
========================================================================== */
.product-links {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	width: 100%;
	overflow: hidden;
	margin-top: auto;
}

.product-links a {
	padding: .5rem;
	width: 50%;
	background-color: rgb(var(--gray-color));
	color: rgb(var(--gray-dark-color));
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .1rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	line-height: 4rem;
	text-decoration: none;
	align-self: center;
	transition: 0.2s ease-in-out;
}

.product-links a:hover {
	background-color: rgb(var(--primary-color));
	color: rgb(var(--white-color));
}

.product-links a:first-child {
	background-color: rgb(248, 248, 248);
}

.product-links a:first-child:hover {
	background-color: rgb(var(--gray-dark-color));
}

.product-links a.link-full {
	width: 100%;
}

.product-links .modal-button {
	cursor: pointer;
}

/* ==========================================================================
Undersida: vibrationsstyrsystem
========================================================================== */
/* Gallery for product */
.products-gallery {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto;
}

.products-gallery-item {
	width: calc(100% / 2 - 2rem);
	margin: 1rem;
}

.products-gallery.w-33 .products-gallery-item,
.product-items-wrapper.w-33 .product-item {
	width: calc(100% / 3 - 2rem);
	margin: 1rem;
}

@media only screen and (max-width:740px) {
	.products-gallery-item {
		width: 100%;
		margin: 0 0 2rem 0;
	}
}

@media only screen and (max-width:550px) {
	.products-gallery.w-33 .products-gallery-item {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* ==========================================================================
Undersida: accelerometer
========================================================================== */

/* Subnavigering
========================================================================== */
.sub-header {
	background-color: rgb(var(--primary-color));
	overflow: auto;
	white-space: nowrap;
}

.sub-header {
	padding: 1rem;
}

.sub-header ul {
	list-style-type: none;
	padding-left: 0;
}

.sub-header li {
	padding: 0 1.5rem;
	color: rgb(var(--white-color));
	display: inline-block;
}

.sub-header li a {
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 400;
}

.sub-header li .tag.tag-picked {
	background-color: rgb(var(--primary-dark-color));
}

/* ==========================================================================
 Undersida: Kontakta oss
========================================================================== */

/* Kontaktintroduktion & formular
========================================================================== */
.contact-form .section-block {
	padding-top: 5rem;
}

.contact-form .col-0 {
	position: relative;
	z-index: 5;
	display: flex;
	width: 55%;
	padding: 5rem;
}

.contact-form .col-1 {
	z-index: 1;
	display: flex;
	padding: 5rem 4rem;
	width: 45%;
	background: rgb(var(--primary-color));
	height: 100%;
}

.contact-form .col-1 * {
	color: rgb(var(--white-color));
}

@media only screen and (max-width: 1100px) {
	.contact-form .section-block-wrapper {
		flex-direction: column;
	}

	.contact-form .col-block {
		width: 100%;
	}

	.contact-form .col-0 {
		padding: 5rem 0;
	}
}

@media only screen and (max-width: 510px) {
	.contact-form .col-1 {
		padding: 4rem 2rem;
	}
}

/* ==========================================================================
Undersida: Boka Service
========================================================================== */

.section-service .col-1{
	background: white;
	padding: 4rem;
	border-radius: 2rem;
}
.ContactForm p {
    padding-left: 1rem;
    color: rgb(var(--primary-color));
    line-height: 1.8;
    font-weight: 600;
    font-size: 1.5rem;
}

.ContactForm input[type="text"],
.ContactForm textarea,
.ContactForm input[type="email"]:not(.illegal),
.ContactForm input[type="tel"]:not(.illegal) {
    border: 1px solid rgb(var(--gray-dark-color));
    border-radius: 10px;
}

.ContactSubmit {
	display: inline-block;
	width: auto;
	font-size: 1.3rem;
	font-weight: 400;
	padding: 1.9rem 4rem;
	border-radius: .6rem;
	letter-spacing: 0.3rem;
	line-height: 1em;
	text-align: center;
	transition: all .4s ease;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	width: 100%;
}

/* ==========================================================================
Section: Nyhetsbrev
========================================================================== */
.section-news .col-0{
	max-width: 80rem;
	margin: auto;
	background-color: rgb(var(--gray-light-color));
	padding: 4rem;
	border-radius: 2rem;
	
}
/* ==========================================================================
Footer
========================================================================== */
.footer {
	background-color: rgb(var(--white-color));
	padding: 0 5rem;
}

.footer-container {
	max-width: var(--section-width);
	margin: 0 auto;
	padding-top: 7rem;
}

.footer-logo-wrapper {
	width: 25rem;
	margin: 0 auto 2rem;
}

.footer-logo {
	width: 100%;
}

.adress-footer {
	margin: auto;
	text-align: center;
	margin-bottom: 2rem;
}

.adress-footer p {
	font-size: 1.65rem;
}

/* Footer top */
.footer-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 0 5rem;
	border-bottom: 1px solid rgb(var(--primary-color));
}

.footer-top .footer-submenu li {
	font-size: 1.5rem;
}

.footer-menu {
	margin: 0 0 2.5rem;
}

.footer-menu-large {
	width: 30%;
}

.footer-heading {
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .1em;
	padding-bottom: 1rem;
	color: rgb(var(--primary-color));
}

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

.footer a {
	text-decoration: none;
	line-height: 2em;
}

.footer a:hover {
	text-decoration: underline;
}

.pdf:before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 700;
	content: '\f1c1';
	margin-right: 0.8rem;
	text-decoration: none;
	display: inline-block;
}

/* Footer bottom */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	padding: 1.5rem 0;
	line-height: 1rem;
}

.footer-bottom p,
.footer-bottom span {
	font-size: 1.2rem;
}

.footer-links{
	display: flex;
	flex-direction: row;
}
.footer-links div{
margin-right: 4rem;
}

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

.webbess-stamp img {
	width: 3rem;
	margin-left: 1rem;
}


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

	.footer-logo-wrapper {
		margin: 0 0 2rem 0;
	}
	.adress-footer{
		text-align: left;
	}

	/* Footer top */
	.footer-menu {
		width: 48%;
	}

	.footer-menu-large {
		width: 100%;
	}

	.footer-menu-large p {
		max-width: 55rem;
	}
}

@media only screen and (max-width: 750px) {
	/* Footer top */
	.footer-menu,
	.footer-menu-large {
		width: 100%;
	}
}

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