/* Gridtec AB */

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

:root {
	--primary-color: #1c5271;
	--secondary-color: #262727;
	--tertiary-color: #b1cd43;
}

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

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

@media only screen and (hover:none) {

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

html {
	font-size: 62.5%;
}

#aspnetForm {
	height: auto;
}

body {
	background-position: center center;
	overflow-x: hidden !important;
	font-family: 'Open Sans', sans-serif;
}

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

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

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

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

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

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

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


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

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

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

.display-none {
	display: none;
}

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

/* ==========================================================================
    Colors
========================================================================== */

.primary-color {
	color: #1c5271;
}

.secondary-color {
	color: #262727;
}

.tertiary-color {
	color: #b1cd43;
}


.green .section-block {
	background-color: #262727;
}

.gradient-white-lightblue .section-block {
	background-image: linear-gradient(to bottom, #FFFF 50%, #dfe6ea 50%);
}

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

.btn {
	max-width: 50rem;
	width: auto;
	box-sizing: border-box;
	padding: 1.4rem 3rem;
	border-radius: 3rem;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.3rem;
	letter-spacing: .1em;
	line-height: 1em;
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
	display: inline-block;
}

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

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

.btn-white,
.btn-white:hover {
	background-color: #FFF;
	border-color: #FFF;
	color: #333;
}

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

.btn-primary,
.btn-primary:hover {
	background-color: #1c5271;
	border-color: #1c5271;
	color: #ffffff;
}

.btn-secondary,
.btn-secondary:hover {
	background-color: #b1cd43;
	border-color: #b1cd43;
	color: #FFFFFF;
}

/* Button with arrow */

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

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

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

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

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

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

}

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

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

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

@media screen and (max-width: 1200px) {
	.btn {
		letter-spacing: .05em;
	}
}

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

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

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

a,
li {
	line-height: inherit;
	font-size: inherit;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

p a {
	text-decoration: underline;
	color: inherit;
	text-decoration-color: #1c5271;
	position: relative;
	z-index: 0;
}

p a::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0px;
	background-color: #1c5271;
	z-index: -1;
	opacity: 0;
	transform-origin: bottom;
	transition: all .1s ease;
}

p a:hover::after {
	opacity: 1;
	background-color: rgba(232, 110, 28, 0.32);
	transform-origin: bottom;
	transition: all .1s ease;
}

a:hover {
	text-decoration: underline;
	color: inherit;
	text-decoration-color: #1c5271;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Nunito', sans-serif;
	font-weight: 300;
	letter-spacing: 0px;
	line-height: 1.4em;
	color: #262727;
	text-transform: normal;
}


h1 {
	font-size: 5rem;
}

h2,
h2.text-label+h3 {
	font-size: 3rem;
}

h3 {
	font-size: 2.5rem;
}

h4 {
	font-size: 1.8rem;
}

.lead {
	font-size: 1.25em;
}

.text-label {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: .2em;
	padding-bottom: 1em;
}

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

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

.text-block-center{
	max-width: 80rem;
	margin: auto;
}

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

	h2 {
		font-size: 3rem;
	}

	h3 {
		font-size: 2.5rem;
	}

	h4 {
		font-size: 2rem;
	}
}

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

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

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

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

.split-content {
	width: 50%;
	padding: 10rem 7rem 10rem 0;
	text-align: left;
	position: relative;
}

.split-wrapper.reverse .split-content {
	padding: 10rem 0 10rem 7rem;
}

.split-content.bg-white {
	background-color: #FFF;
	box-shadow: 0 1rem 1.5rem rgba(0, 40, 21, 0.1);
	border-radius: 5px;
}


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

.split-image img {
	position: absolute;

	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;

	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: unset !important;
}

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

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

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

	.split-wrapper.reverse .split-content {
		padding: 7rem 0 7rem 4rem;
	}
}

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

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

	.split-content {
		width: 100%;
		max-width: 60rem;
		padding: 7.5rem 0 5rem;
	}

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

/* Bakgrundsbild
========================================================================== */
.bg-image {
    position: relative;
}

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



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

/* HEADER BAR */

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

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

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

header.scrolled,
.SubPage header {
	background-color: #FFF;
	transition: all 500ms linear;
}

/* HEADER LOGO */

header .header-logo {
	width: 15rem;
	line-height: 8rem;
	padding: 0;
	margin-right: 5rem;
	display: block;
	float: left;
	transition: all 500ms linear;
}

/* MAIN MENU */

nav.mainmenu ul.TemplateMenu>li {
	line-height: auto;
	height: auto;
	transition: all 500ms linear;
}

nav.mainmenu {
	text-align: left;
}

nav.mainmenu a {
	font-family: inherit;
	font-weight: 600;
	font-size: 1.4rem;
	line-height: 8rem;
	color: #333;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 0 1rem;
	transition: all 500ms linear;
}

@media screen and (max-width: 1200px) {
	nav.mainmenu a {
		letter-spacing: .05em;
	}
}

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

nav.mainmenu li:hover a,
nav.mainmenu li.active a {
	color: #b1cd43 !important;
	text-decoration: none;
}

header .mobile-menu span {
	height: 2px;
	width: 100%;
	background: #333;
	border-radius: 0px;
	margin-bottom: 7px;
	display: none;
}

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

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

nav.mainmenu .btn {
	line-height: 1 !important;
	padding: 1.6rem 4rem;
	font-size: 1.4rem;
	text-transform: uppercase;
	color: #fff;
}

nav.mainmenu .btn:hover {
	color: #FFF !important;
}

/* Media query for only showing scrolled effect above 981px */
@media only screen and (min-width: 981px) {
	header.scrolled {
		height: 8rem;
		transition: all 500ms linear;
	}

	header.scrolled nav.mainmenu ul.TemplateMenu>li {
		line-height: 8rem;
		transition: all 500ms linear;
	}

	header.scrolled nav.mainmenu a {
		color: #333;
		line-height: 8rem;
		transition: all 500ms linear;
	}

}

/* MOBILE MENU */

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

	header {
		height: 6rem;
		width: 100vw !important;
	}


	header .header-logo {
		width: 10rem;
		padding: 0;
		line-height: 6rem;
		float: left;
		left: 0;
	}


	/* Hamburgarmeny – Den är default svart, men för att ändra färg eller ikon använd koden nedan.*/
	.openmenu {
		width: 60px;
		height: 60px;
		right: 0;
		top: 0;
		padding: 20px 17px;
	}

	nav.mainmenu {
		text-align: left;
		box-shadow: none;
		width: 100vw;
	}

	nav.mainmenu .Padding {
		border-top: none !important;
	}

	nav.mainmenu li a {
		font-size: 1.6rem;
		border-bottom: none;
		margin: 2rem 0;
		color: #333 !important;
		line-height: 5rem;
	}

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

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

	.openmenu {
		background-image: none;
	}

	.closemenu {
		background-image: none;
	}

	.closemenu::before,
	.closemenu::after {
		width: 24px;
		height: 2px;
		top: 12px;
		content: '';
		position: absolute;
		display: block;
		background-color: #333;
	}

	.closemenu::before {
		transform: rotate(45deg);
	}

	.closemenu::after {
		transform: rotate(-45deg);
	}

	header .mobile-menu span {
		display: block;
	}

}


/* CTA Button */

.cta-menu {
	float: right;
	display: flex;
	align-items: center;
	height: 8rem;
	line-height: 8rem;
	transition: all 300ms linear;
}

.cta-menu .btn {
	padding: 1rem 2rem;
	height: 4rem;
}


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

	.cta-menu {
		position: relative;
		right: 2rem;
		height: 6rem;
		line-height: 6rem;
	}

	.cta-menu .btn {
		font-size: 1.2rem;
		padding: 1rem 2rem;
	}
}

.btn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	width: 4rem;
	height: 4rem;
	margin-right: 1.2rem;
	letter-spacing: unset;
	padding: 0;
	border: none;
	border-radius: 2rem;
	background-color: #dfe6ea;
	color: #1c5271;
}

.btn-cta:hover {
	background-color: #d3d7c1;
	border: none;
	color: #1c5271;
	text-decoration: none;
}

.btn-cta::before {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 700;
	font-size: 1.7rem;
	display: inline-block;
	position: relative;
	top: 1px;
}

.btn-cta::after {
	display: none;
}

.btn-social::before {
	font-family: 'Font Awesome 5 Brands';
	font-weight: 400;
}

.btn-social::after {
	display: none;
}


.icon-facebook::before {
	content: '\f39e';
}

.icon-map::before {
	content: '\f276';
}

.icon-instagram::before {
	content: '\f16d';
}

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


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

.top-section {
	display: none;
}

.topsection {
	display: block;
}

.EditMode .topsection {
	padding-top: 40rem;
}

.topsection.section-wrapper {
	background-color: #fff;
}

.LayoutPage .topsection .section-block {
	padding: 0;
	background-color: transparent;
	position: relative;
	z-index: 1;
}

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

.topsection .section-block::after {
	content: '';
	display: block;
	position: absolute;
	width: 90%;
	height: 100%;
	top: 0;
	background-color: #dfe6ea;
	z-index: -1;
	pointer-events: none;
	border-bottom-right-radius: 1rem;
}

.topsection .split-wrapper {
	min-height: 90vh;
}

.topsection .split-image {
	position: relative;
	width: 50%;
	max-height: 80vh;
	border-radius: 0 0 0 8rem;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.topsection .split-text {
	max-width: 65rem;
}

.topsection .split-content {
	display: flex;
	justify-content: center;
	width: 50%;
	padding: 6rem 5rem 6rem;
	align-self: center;
}

.topsection h1 {
	font-size: 5rem;
	font-weight: 300;
	letter-spacing: 1px;
	color: #262727;
	padding: 0 0 2rem;
	line-height: 1.2em;
	text-shadow: none;
}

.topsection p {
	color: #333;
	font-size: 2rem;
	line-height: 1.5;
}


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

	.topsection .section-block::after {
		width: calc(100vw - 2rem);
	}

	.topsection .split-image {
		width: calc(100% - 5rem);
		margin: 0 0 8rem auto;
		border-radius: 5rem 0 0 5rem;
	}

	.topsection .split-content {
		width: 100%;
		max-width: 75rem;
		padding: 15rem 5rem 5rem;
	}

	.topsection h1 {
		font-size: 4rem;
	}
}

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

	.topsection .section-block::after {
		width: calc(100vw - 1rem);
	}

	.topsection .split-content {
		padding: 15rem 3rem 5rem 2rem;
	}

	.topsection .split-image {
		width: calc(100% - 2rem);
		border-radius: 2rem 0 0 2rem;
	}

	.topsection .split-image::after {
		width: 5rem;
		height: 5rem;
		bottom: 1rem;
		left: 1rem;
	}

	.topsection h1 {
		font-size: 3rem;
	}

	.topsection p {
		font-size: 1.4rem;
	}
}

.topsection video {
	position: relative;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* Funktion: Scroll down
========================================================================== */
@-moz-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-moz-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	60% {
		-moz-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@-webkit-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	60% {
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-moz-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	60% {
		-moz-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		-webkit-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}

.arrow-scroll {
	width: 5rem;
	height: 5rem;
	background-color: #1c5271;
	position: absolute;
	bottom: 2rem;
	left: calc(90% - 5rem);
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	transition: all .2s ease;
}

.arrow-scroll a {
	display: block;
	padding: 1.5rem;
}

.arrow-icon {
	width: 2rem;
	height: 2rem;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
	background-size: contain;
}

.bounce {
	-moz-animation: bounce 2.5s infinite;
	-webkit-animation: bounce 2.5s infinite;
	animation: bounce 2.5s infinite;
}

@media only screen and (max-width: 630px) {
	.arrow-scroll {
		display: none;
	}
}

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

/* Parallax
========================================================================== */
.parallax-section {
	padding: 0 5rem;
}

.parallax-section .section-block {
	padding: 0;
	background-image: url(/assets/images/gridtec-hybridbil-elektronisk-laddning-2000px.jpg);
	background-attachment: fixed;
	background-size: cover;
}

.parallax-section .section-block-wrapper {
	background-color: rgba(50, 54, 53, 0.7);
	position: relative;
	border-radius: 0 1rem 1rem 0;
	padding: 0 5rem 10rem;
	max-width: none;
}

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

	.parallax-section {
		padding: 0 2rem;
	}

	.parallax-section .section-block-wrapper {
		padding: 0 2rem 10rem;
	}
}

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

	.parallax-section {
		padding: 0;
	}

	.parallax-section .section-block-wrapper {
		padding: 0 2rem 7.5rem;
	}
}

/* Tjänster
========================================================================== */
.service-section .section-block {
	padding: 0 5rem;
}

.service-wrapper {
	position: relative;
	top: -5rem;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 150rem;
	margin: 0 auto;
}

.service {
	width: calc(100% / 4 - 1rem);
	padding: 0 3rem 2rem;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	background-color: #dfe6ea;
	border-radius: 8px;
	transition: all .25s ease;
	box-shadow: 0 1rem 2rem rgb(25 77 107 / 14%);
}

.service-icon-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 3rem;
	padding: 3rem 2rem 2rem;
	z-index: 1;
	position: relative;
	border-radius: 0 0 1rem 1rem;
	background-color: #1c5271;
}

.service-icon {
	font-size: 3rem;
	color: #b1cd43;
}

.service-title {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1.2em;
	color: #262727;
}

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

.service .btn {
	color: #333;
	padding: 1.6rem;
}

.logo{
	max-width: 20rem;
	margin: auto;
	margin-bottom: 2rem;
}

@media screen and (max-width: 1200px) {
	.service {
		width: calc(100% / 2 - 1rem);
		margin: 0 0 2rem;
	}
}

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

/* Nyheter
========================================================================== */
.news-section {
	overflow: hidden;
}

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

.full-width-textblock {
	max-width: 160rem;
	padding: 0 5rem 5rem;
}

.full-width-textblock .text-wrapper {
	max-width: 60rem;
	width: 100%;
}

.full-width-textblock * {
	text-align: left!important;
}

.full-width-textblock h3 { 
	padding-bottom: 0;
}

.scroll-wrapper {
	max-width: 160rem;
	width: 100%;
	padding: 0 5rem;
	overflow-x: visible;
}

.scroll-card {
	margin: 0 3rem 2rem 0;
	border-radius: 8px;
	box-shadow: 0 1rem 2rem rgb(25 77 107 / 14%);
}

.scroll-card:last-child {
	margin-right: 0;
}

.scroll-text-wrapper {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
	padding: 3rem 2rem;
}

/* .scroll-card h3 {
	font-size: 2.1rem;
	font-weight: 700;
	margin-bottom: 1rem;
} */

.scroll-card p {
	font-size: 1.4rem;
}

.scroll-card-info {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ababab;
	margin-top: 1.5rem;
	padding: 1.5rem 0 0;
}

.scroll-card-date {
	color: #ababab;
	font-size: 1.4rem;
}

.scroll-card-link {
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #ababab;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
}

.scroll-card-link:hover {
	text-decoration: none;
}

.scroll-card-link::after {
    display: inline-block;
    content: '\2023';
    margin-left: 1rem;
    transition: all .4s ease;
}

.scroll-card-link:hover::after {
    transform: translateX(1rem);
    transition: all .4s ease;
}

/* Slick settings */
.slick-list.draggable {
    overflow: visible;
}

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

.slick-slide {
	height: inherit !important;
}

.slick-prev, 
.slick-next {
    top: -7.5rem;
    width: 4rem;
    height: 4rem;
    border: 1px solid #2D6C8F;
    background-color: #2D6C8F;
    border-radius: 4rem;
}

.slick-prev:hover, 
.slick-next:hover {
    border: 1px solid #b1cd43;
    background-color: #b1cd43;
}

.slick-prev:focus, 
.slick-next:focus {
	border: 1px solid #b1cd43;
    background-color: #b1cd43;
}

.slick-prev.slick-disabled, 
.slick-next.slick-disabled {
	opacity: .5;
}

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

.slick-next {
	right: 8rem;
}

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

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

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

@media only screen and (max-width: 1200px) {
	.scroll-card {
		margin: 0 1rem 2rem 0;
	}
}

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

	.scroll-wrapper {
		padding: 0 2rem;
	}
}

@media only screen and (max-width: 800px) {
	.slick-prev, .slick-next {
		top: -4rem;
	}
	
	.slick-prev {
		right: 5rem;
	}

	.slick-next {
		right: 0;
	}
}

/* Kunder
========================================================================== */
.customers-wrapper {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.section-customers .image-wrapper {
	margin: 2rem;
    max-width: 15rem;
}

.section-customers img.stokab {
    max-height: 6rem;
}

@media only screen and (max-width:500px) {
	.customers-wrapper {
		flex-direction: column;
	}
}

/* contact section
========================================================================== */
.contact-section {
	overflow: hidden;
}

.contact-section .section-block {
	position: relative;
	z-index: 1;
	padding-bottom: 10rem;
	border-left: 5rem solid #FFF;
}

.contact-section .section-block::after {
	position: absolute;
	z-index: -1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	right: 0;
	bottom: 0;
	background-color: #dfe6ea;
	pointer-events: none;
	border-top-left-radius: 1rem;
}

.contact-section h3 {
	padding: 0;
}

@media only screen and (max-width: 1024px) {
	.contact-section .section-block {
		border-left: 2rem solid #FFF;
	}
}

@media only screen and (max-width: 550px) {
	.contact-section .section-block {
		border-left: 1rem solid #FFF;
		padding-top: 7.5rem;
	}
}

/* Simple Contact Option
========================================================================== */

.simple-contact-option-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	margin: 5rem auto 0;
	background-color: #FFF;
	border-radius: 2px;
	box-shadow: 0 1rem 2rem rgb(25 77 107 / 14%);
}

.simple-contact-option {
	width: 33.333%;
	text-align: left;
}

.simple-contact-option:nth-child(1),
.simple-contact-option:nth-child(2),
.simple-contact-option:nth-child(3) {
	border-bottom: 1px solid #eaeaea;
}

.simple-contact-option-link {
	position: relative;
	display: block;
	height: 100%;
	transition: all .3s ease;
	padding: 3rem 2rem 3rem 8rem;
}

a.simple-contact-option-link:hover {
	text-decoration: none;
	background-color: #f2f2f2;
	transition: all .3s ease;
}

.contact-icon {
	display: flex;
	justify-content: center;
	width: 5rem;
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	color: #b1cd43;
}

.simple-contact-text {
	font-style: normal;
	line-height: 1.5;
}

.simple-contact-title {
	font-size: 1.3rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1;
	color: #1c5271;
}

.simple-contact-card address {
	font-style: normal;
	margin-top: 1rem;
}

.simple-contact-link {
	position: relative;
	display: inline-block;
	margin-right: 1.5rem
}

@media screen and (max-width: 1200px) {
	.simple-contact-option {
		width: 50%;
	}

	.simple-contact-option:nth-child(4) {
		border-bottom: 1px solid #eaeaea;
	}
}

@media only screen and (max-width: 700px) {
	.simple-contact-option {
		width: 100%;
	}

	.simple-contact-option:nth-child(5) {
		border-bottom: 1px solid #eaeaea;
	}
}

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

/* Hero
========================================================================== */
.LayoutPage .hero {
	display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50rem;
    text-align: center;
    background-image: url(/assets/images/handslag-2000px.jpg);
background-size: cover;
background-position: center;
}

.hero h1 {
	color: #FFF;
}

/* ==========================================================================
Undersida: Bli var partner
========================================================================== */
.SubPage .LayoutPage .section-partner-form .section-block {
	padding-top: 50px;
}

.section-partner-form .section-block-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1200px;
}

.section-partner-form .layout-2 .col-1 {
    position: relative;
    max-width: 450px;
    padding: 3rem;
    margin-top: -120px;
    background: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,.2); 
}

.LayoutPage .Contact .ContactForm div {
	width: 100%;
}

.Contact .ContactForm div.ContactFormMessage p,
.Contact .ContactForm .ContactFormEmail p,
.Contact .ContactForm .ContactFormField p,
.Contact .ContactForm .ContactFormName p, 
.LayoutPage .Contact .ContactForm div.ContactFormMessage p {
	color: #333;
}

.LayoutPage .Contact .ContactForm div.ContactFormMessage {
	position: static;
	width: 100%;
}

.LayoutPage .Contact .ContactForm input.text {
	height: 39px !important;
	border-radius: 5px;
} 

.LayoutPage .Contact .ContactForm textarea.textmessage {
    height: 150px;
	border-radius: 5px;
}

.LayoutPage .Contact .ContactForm input.ContactSubmit {
	width: 100% !important;
	background-color: #1c5271
}

.logo-wrapper{
	max-width: 20rem;
	margin-bottom: 2rem;
}

@media only screen and (max-width: 980px) {
	.section-partner-form .layout-2 .col-0 {
		width: 100%;
	}
	
	.section-partner-form .layout-2 .col-1 {
		width: 100%;
		margin: 5rem 0 0;
	}
}

@media only screen and (max-width: 480px) {
	.section-partner-form .layout-2 .col-1 {
		padding: 20px !important;
	} 
}

/* ==========================================================================
Footer
========================================================================== */
.footer {
	background-color: #dfe6ea;
	padding: 0;
	color: #333;
	z-index: 1;
	position: relative;
	border-left: 5rem solid #FFF;
}

@media only screen and (max-width: 1024px) {
	.footer {
		border-left: 2rem solid #FFF;
	}
}

@media only screen and (max-width: 550px) {
	.footer {
		border-left: 1rem solid #FFF;
	}
}

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

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

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

.footer-logo {
	position: relative;
	width: 15rem;
	margin: 0;
}



/* Footer Bottom */

.footer-bottom {
	border-top: 1px solid #262727;
	margin: 0 auto;
	width: 100%;
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

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

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

a.webbess-stamp{
	text-decoration: none;
} 
@media only screen and (max-width: 1024px) {

	.footer .container {
		padding: 0rem 2rem 0;
	}

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



}

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

	.footer .container {
		padding: 0 2rem;
	}

	.footer-menu {
		width: 100%;
		margin-bottom: 3rem;
	}

	.footer-bottom {
		flex-direction: column;
	}

	.footer-bottom div:first-child {
		margin-bottom: 3rem;
	}

}