@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,400i,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700&display=swap');




/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                                   VARIABLER                                  */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */




/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                                   CSS RESET                                  */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}


mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                               GENERELLA REGLER                               */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */




/*                                      Text                                    */
/* ============================================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', serif;
	color: #212B35;
	font-weight: 400;
}

.xxl {
	font-size: 122px;
	line-height: 114px;
	margin-bottom: 36px;
}

.xl {
	font-size: 81px;
	line-height: 84px;
	margin-bottom: 36px;
}

h1 {
	font-size: 54px;
	line-height: 66px;
	margin-bottom: 36px;
}

h2 {
	font-size: 36px;
	line-height: 48px;
	margin-bottom: 24px;
}

h3 {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 24px;
}

h4 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 24px;
}

h5 {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 12px;
}

h6 {
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 12px;
}

p {
	font-size: 16px;
	line-height: 24px;
	font-family: 'Open Sans', sans-serif;
	color: #212B35;
	margin-bottom: 36px;
	font-weight: 400;
}

/* ingress */
.lead {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 36px;
}

/* Fångar upp text som hamnat utanför p-tagg */
div {
	font-size: 16px;
	line-height: 24px;
	font-family: 'Open Sans', sans-serif;
	color: #212B35;
}



/* Padda */
@media (max-width: 1023px) {

	.xxl {
		font-size: 68px;
		line-height: 72px;
		margin-bottom: 36px;
	}

	.xl {
		font-size: 54px;
		line-height: 54px;
		margin-bottom: 36px;
	}

	h1 {
		font-size: 45px;
		line-height: 60px;
		margin-bottom: 36px;
	}

	h2 {
		font-size: 36px;
		line-height: 48px;
		margin-bottom: 24px;
	}

	h3 {
		font-size: 24px;
		line-height: 30px;
		margin-bottom: 24px;
	}

	h4 {
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 18px;
	}

	h5 {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 12px;
	}

	h6 {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 12px;
	}

	p {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 36px;
	}

	.lead {
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 36px;
	}

}

/* Mobil */
@media (max-width: 767px) {

	.xxl {
		font-size: 45px;
		line-height: 48px;
		margin-bottom: 24px;
	}

	.xl {
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 24px;
	}

	h1 {
		font-size: 30px;
		line-height: 42px;
		margin-bottom: 24px;
	}

	h2 {
		font-size: 24px;
		line-height: 30px;
		margin-bottom: 18px;
	}

	h3 {
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 18px;
	}

	h4 {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 18px;
	}

	h5 {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 12px;
	}

	h6 {
		font-size: 12px;
		line-height: 18px;
		margin-bottom: 12px;
	}

	p {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 36px;
	}

	.lead {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 36px;
	}

	/* Långa ord i mobil radbryter */
	h1, h2, h3 {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}


ul, ol {
	list-style-position: inside;
}


* {
	word-wrap: break-word;
}


/* Streck efter rubrik */

/*
h1::before,
h2::before {
	content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 40px;
    left: 0;
    background: #aa2337;
    height: 2px;
}

h1::before {
    bottom: -24px;
}

h2::before {
    bottom: -18px;
}
*/

/*                                      Länkar                                  */
/* ============================================================================ */


a,
a:link,
a:visited {
	color: #aa2337;
	text-decoration: none;
}

/* Hover på länkar gör dem lite mörkare */
a:hover {
  text-decoration: none;
  filter: brightness(76%);
}


/* Alla klickade länkar blir mörkare och nerpressade 1px */
a:active {
  filter: brightness(52%);
  position: relative;
  top: 1px;
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
}

@media (min-width: 768px) {
	.wap-section-anchor {
		top: -146px;
	}
}



/*                                     Knappar                                  */
/* ============================================================================ */

/* Grundstil för knappar */
.btn {
	min-height: 48px;
	padding:12px 0;
	display: inline-block;

	text-transform: uppercase;

	font-weight: 700;
	font-size: 16px;
	line-height: 24px;

	text-align: center;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	    touch-action: manipulation;
	cursor: pointer;
	background-image: none;
	border: 0;
	white-space: nowrap;
	border-radius: 0px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	white-space: normal;
/*	border: 1px solid #212B35; */
	border-bottom: 3px solid #aa2337;
}

/* Ikon */
.btn .fa {
	font-weight: 700;
	margin-left: 12px;
	position: relative;
	bottom: 1px;
	color: #000;
}

/* CTA-knapp */
.atf-1 a.btn-primary, 
.atf-2 a.btn-primary {
    background: none;
}

/* Primär knapp */
a.btn-primary {
	color: #000;
	background: none;
}

/* Sekundär knapp */
a.btn-default {
	color: #000;
	background: none;
}

/* Tertiär knapp */
a.btn-text {
	color: #000;
}


/* Mobil */

/*
@media (max-width: 767px) {
	.btn {
		width: 100%;
	}
}
*/

/* Hover */


a.btn:hover {
/*	filter: brightness(82%); */
	filter: none;
	border-bottom: 6px solid #aa2337;
    padding-bottom: 9px;
}

a.btn:active {
/*	filter: brightness(64%); */
	filter: none;
}


/*                                      Bilder                                  */
/* ============================================================================ */


.image {
	text-align: left;
}

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


img {
  vertical-align: middle;
  
}

/* Alla innehållsbilder förutom logotyper och sektionen med små logotyper */
.container img {
    
}

/* Alla innehållsvideos */
.container video {
	
}

/* Bilder och videos i puffar */
.feature-3 .container img,
.puff .container img,
.feature-3 .container video,
.puff .container video {
	
}



/* Fast höjd på innehållsbilder */
/* ---------------------------- */

/* Sektioner med stora bilder */

/*
.deliverable-1 .container img,
.deliverable-1 .container img,
.images-1 .container img   {
	height: 600px;
	object-fit: cover;
	width: 100%
}
*/

/* Sektioner med mindre bilder */

/*
.body-text-1 .container img,
.cta-1 .container img,
.cta-2 .container img,
.atf-8 .container img,
.testimonial-1 .container img,
.feature-1.container img,
.feature-2 .container img   {
	height: 400px;
	object-fit: cover;
	width: 100%
}
*/


/* Bakgrundsbilder sektion */
/* ---------------------------- */

section .wap-media-bg img {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

section > .wap-media-bg .wap-media-bg-frame img, 
section > .wap-media-bg .wap-media-bg-frame video {
    min-height: 100.1%;
    min-width: 100.1%;
}

/* Vissa sektioner växer dynamiskt vid användning och bakgrunderna bör därför vara position top så att de inte hoppar */
.feature-1 > .wap-media-bg .wap-media-bg-frame img,
.feature-1 > .wap-media-bg .wap-media-bg-frame video,
.feature-2 > .wap-media-bg .wap-media-bg-frame img,
.feature-2 > .wap-media-bg .wap-media-bg-frame video,
.faq-section > .wap-media-bg .wap-media-bg-frame img,
.faq-section > .wap-media-bg .wap-media-bg-frame video,
.form-section > .wap-media-bg .wap-media-bg-frame img,
.form-section > .wap-media-bg .wap-media-bg-frame video {
	object-position: top;
}

/*                                    Scroll                                    */
/* ============================================================================ */

/* Vissa element har en scrollbar om de tex växer för mycket i höjd. Denna scrollbar vill man styla till något snyggare än den inbyggda. Skriv inte över den generella scrollbaren */

/* firefox */
.dropdown-menu,
.affix {
	scrollbar-color: rgba(0,0,0,0.4) #fff; 
	scrollbar-width: thin;
}


/* IE */
.dropdown-menu,
.affix {
  scrollbar-base-color: pink;
  scrollbar-face-color: #eee;
  scrollbar-3dlight-color: #eee;
  scrollbar-highlight-color: #eee;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #eee;
  scrollbar-shadow-color: #fff;
  scrollbar-dark-shadow-color: #fff;
}

/* Webkit - Chrome */
.dropdown-menu::-webkit-scrollbar ,
.affix::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track ,
.affix::-webkit-scrollbar-track {
    border-radius: 10px;
	border: solid 3px transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb,
.affix::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover,
.affix::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.8);
}

/*                                    Struktur                                  */
/* ============================================================================ */


section {
	padding: 72px 0;
/*	border-bottom: 1px solid rgba(0,0,0,0.12); */
}

.container, .container-fluid {
	width:1272px;
	margin-left: auto;
	margin-right: auto;
	padding:0;
	position: relative;
}


/* Från padda upp till brytpunkt för desktop */
@media (max-width: 1409px) {
	.container, .container-fluid	{
		width:auto;
		margin: 0 60px;
	}
}

/* Padda */
@media (max-width: 1023px) {
		SECTION { padding: 60px 0; }
		.container, .container-fluid	 {
			width:auto;
			margin: 0 48px;
		}
}

/* Mobil */
@media (max-width: 767px) {
	SECTION { padding: 48px 0; }
	.container, .container-fluid {
		width:auto;
		margin: 0 30px;
	}
}


/*                         Standardinnehåll i sektioner                         */
/* ============================================================================ */


/* Sektioner vars innehåll har mindre bredd - VIKTIGT att lägga in sektionerna i regeln under också */
/* ------------------------------------------------------------------------------------------------ */
.readable-content-width,
.atf-1 .row > div,
.atf-2 .row > div,
.documents-1 .row, 
.faq-1 .row, 
.form-section .row,
.pageheader-2 .text,
.sectionheader-2 .text,
.subsection-2 .text,
.subsection-3 .text,
.cta-3 .row > div,
.deliverable-1 .text,
.atf-5 .row > div,
.deliverable-2 .text,
.feature-3 .container > div:first-child > div,
.puff .container > .row:first-child,
.logos-card .container, 
.atf-logo-cards .container,
.testimonial-1 .text,
.testimonial-3 .text,
.price-7 .container > .row:first-child,
.page-footer-1 .footer-last,
.page-footer-3 .footer-last {
	width: 850px; /* Man kan använda max-width men innehåll som inte fyller ut kommer då ha mindre bredd. Med denna lösning behöver vi använda nedan regel för att sätta dessa till 100% vid en specifik brytpunkt */
	margin: 0 auto; /* Centrerar */
	float:none;
}

/* 	Vid en specifik brytpunkt så blir de smalare innehållet fullbredd */
@media (max-width: 963px) {
	.readable-content-width,
	.atf-1 .row > div,
	.atf-2 .row > div,
	.documents-1 .row, 
	.faq-1 .row, 
	.form-section .row,
	.pageheader-2 .text,
	.sectionheader-2 .text,
	.subsection-2 .text,
	.subsection-3 .text,
	.cta-3 .row > div,
	.deliverable-1 .text,
	.atf-5 .row > div,
	.deliverable-2 .text,
	.feature-3 .container > div:first-child > div,
	.puff .container > .row:first-child,
	.logos-card .container, 
	.atf-logo-cards .container,
	.testimonial-1 .text,
	.testimonial-3 .text,
	.price-7 .container > .row:first-child,
	.page-footer-1 .footer-last,
	.page-footer-3 .footer-last {
		width: 100%;
	}
}


	
/* Sektioner som är mindre bredd och ligger på en platta */
/* ----------------------------------------------------- */
.background-plate,
.form-section .container .row:last-child,
.documents-1 .row,
.faq-1 .row {
	max-width: calc(850px + 72px);
    background: #FFF;
    padding: 36px;
    border-radius: 0px;
	margin: 0 auto;
}

/* Mindre padding i mobil */
@media (max-width: 767px) {
	.background-plate,
	.form-section .container .row:last-child,
	.documents-1 .row,
	.faq-1 .row	{
		padding: 24px;
		/* Plattan går hela vägen ut i kanten med nedan regler. Observera att man behöver lägga på extra marginal på sektioner som har text ovanför plattan. Tex formulär
		padding: 48px 30px;
		border-radius: 0px;
		margin: -48px -30px;  */
	}
}

/* Text som ligger innan sektioner med platta har extra hög marginal för att ta ut minus-marginalen från plattan i mobil 
@media (max-width: 767px) {
	.form-section .container > .row:first-child :last-child {
		margin-bottom: calc(30px + 48px);
	}	
}
*/

	
/* Sektioner med centrerad text  */
.centered-text,
.pageheader-2 .text,
.sectionheader-2 .text,
.subsection-2 .text,
.subsection-3 .text,
.cta-3 .row > div,
.deliverable-1 .text,
.atf-5 .row > div,
.deliverable-2 .text,
.feature-3 .container > div:first-child > div,
.puff .container > .row:first-child,
.logos-card .container, 
.atf-logo-cards .container,
.testimonial-1 .text,
.testimonial-3 .text,
.price-7 .container > .row:first-child,
.page-footer-1 .footer-last,
.page-footer-3 .footer-last,
.form-section .row:first-child {
	text-align: center;
}

/* Text med marginal under - Tex rubriker till puffar, kontaktformulär etc */
.feature-3 .container > div:first-child > div,
.puff .container > .row:first-child :last-child,
.price-7 .container > .row:first-child :last-child,
.testimonial-3 .text,
.form-section .container > .row:first-child :last-child,
.logos-card .container :last-child, 
.atf-logo-cards .container :last-child,
.deliverable-2 .text {
	margin-bottom: 60px;
}

@media (max-width: 767px) {
	.feature-3 .container > div:first-child > div,
	.puff .container > .row:first-child :last-child,
	.price-7 .container > .row:first-child :last-child,
	.testimonial-3 .text,
	.form-section .container > .row:first-child :last-child,
	.logos-card .container :last-child, 
	.atf-logo-cards .container :last-child,
	.deliverable-2 .text {
		margin-bottom: 36px;
	}
}


/* Den här regeln gör så att det sista elementet i valda sektioner inte har någon marginal. */
.pageheader-2 .text > :last-child,
.sectionheader-2 .text > :last-child,
.subsection-2 .text > :last-child,
.subsection-3 .text > :last-child,
.deliverable-2 .text > :last-child,
.body-text-1 .text > :last-child,
.body-text-1 figcaption > :last-child,
.atf-5 .row > div > :last-child,
.tab-pane-text > :last-child,
.card-container .card-item .card .content :last-child
{
	margin-bottom: 0 !important; /* Måste vara important för att den skriver över RTE-regler */
}


/* Punkt och sifferlistor i RTE */
.rte-text ol, .rte-text ul,
.pageheader-2 ol, .pageheader-2 ul,
.atf-1 ol, .atf-1 ul,
.atf-2 ol, .atf-2 ul,
.sectionheader-2 ol, .sectionheader-2 ul,
.subsection-2 ol, .subsection-2 ul,
.subsection-3 ol, .subsection-3 ul,
.deliverable-1 ol, .deliverable-1 ul,
.deliverable-2 ol, .deliverable-2 ul,
.body-text-1 ol, .body-text-1 ul,
.cta-1 ol, .cta-1 ul,
.cta-2 ol, .cta-2 ul,
.body-text-9 ol, .body-text-9 ul,
.body-text-10 ol, .body-text-10 ul,
.feature-3 ol, .feature-3 ul,
.puff ol, .puff ul,
.atf-logo-cards ol, .atf-logo-cards ul,
.logo-cards ol, .logo-cards ul,
.atf-8 ol, .atf-8 ul,
.testimonial-1 ol, .testimonial-1 ul,
.testimonial-3 ol, .testimonial-3 ul,
.price-7 ol, .price-7 ul,
.feature-1 .row > div:last-child ol, .feature-1 .row > div:last-child ul,
.feature-2 .row > div:last-child ol, .feature-2 .row > div:last-child ul,
.component__faq_answer ol, .component__faq_answer ul,
.document-list-intro ol, .document-list-intro ul,
.documents-1 .row > div:last-child ol, .documents-1 .row > div:last-child ul,
.form-section .row:first-child ol, .form-section .row:first-child ul,
.page-footer .header ol, .page-footer .header ul,
.page-footer .footer-last ol, .page-footer .footer-last ul,
.page-footer-social-media .footer-2 > div:first-child ol, .page-footer-social-media .footer-2 > div:first-child ul,
.blog-post-text ol, .blog-post-text ul {
	list-style-position: outside;
    margin-left: 30px;
    margin-bottom: 36px;
	text-align: left; /* Punktlistor ser inte bra ut centrerade */
}


/*                                     Cards                                    */
/* ============================================================================ */


.card-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}


/*                Avstånd mellan kort                 */
/* -------------------------------------------------- */

.card-container .card-item { 
	position: relative; 
	padding: calc(24px / 2); 
} 

.card-container { 
	position: relative; 
	margin: calc(-24px / 2); /* Samma värde som padding ovan ska vara minus här */
}


/* Cards som ligger många i bredd har mindre avstånd */
@media (min-width: 1409px) {
	.card-container-5 .card-item,
	.card-container-6 .card-item{ padding: calc(24px / 4); }
	.card-container-5,
	.card-container-6	{ margin: calc(-24px / 4); }
}

/*                    Antal i bredd                   */
/* -------------------------------------------------- */

/* Desktop */
.card-container-1 .card-item,
.card-container-2 .card-item { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.card-container-3 .card-item { -webkit-flex: 0 0 33.33333333%;	flex: 0 0 33.33333333%; max-width: 33.33333333%; }
.card-container-4 .card-item { -webkit-flex: 0 0 25%;	flex: 0 0 25%; max-width: 25%;}
.card-container-5 .card-item { -webkit-flex: 0 0 20%;	flex: 0 0 20%; max-width: 20%;}
.card-container-6 .card-item { -webkit-flex: 0 0 16.66666667%;	flex: 0 0 16.66666667%;  max-width: 16.66666667%;}

/* Liten skärm */
@media (max-width: 1409px) {
	.card-container-5 .card-item { -webkit-flex: 0 0 33.33333333%;	flex: 0 0 33.33333333%; max-width: 33.33333333%;}
	.card-container-6 .card-item { -webkit-flex: 0 0 33.33333333%;	flex: 0 0 33.33333333%;  max-width: 33.33333333%;}
}

/* Padda */
@media (max-width: 1023px) {
	.card-container-1 .card-item,
	.card-container-2 .card-item,
	.card-container-3 .card-item,
	.card-container-4 .card-item,
	.card-container-5 .card-item,
	.card-container-6 .card-item,
	.card-container-7 .card-item,
	.card-container-8 .card-item,
	.card-container-9 .card-item { -webkit-flex: 0 0 50%;	flex: 0 0 50%; max-width: 50%; }
}

/* Mobil */
@media (max-width: 767px) {
	.card-container .card-item,
	.card-container-1 .card-item,
	.card-container-2 .card-item,
	.card-container-3 .card-item,
	.card-container-4 .card-item,
	.card-container-5 .card-item,
	.card-container-6 .card-item,
	.card-container-7 .card-item,
	.card-container-8 .card-item,
	.card-container-9 .card-item {
		-webkit-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/*                       Bilder                       */
/* -------------------------------------------------- */
.card-container .card-item .card .figure {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
/*	background-color: lightgray; */
	position: relative;
	border-radius: 0px 0px 0 0; /* Runda hörn på bildens övre del */
	max-width: 100%;
}

.card-container .card-item .card .figure img {
    min-height: 100%;
    min-width: 100%;
    max-height: auto;
    overflow: visible;
    object-fit: cover;
}

/* I IE så läggs dessa regler till för att bilder inte ska strechas */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.card-container .card-item .card .figure img {
		max-height: none;
	}
}

/* Bildens höjd */
.card-container-1 .card-item .card .figure,
.card-container-2 .card-item .card .figure,
.card-container-3 .card-item .card .figure,
.card-container-4 .card-item .card .figure,
.card-container-5 .card-item .card .figure,
.card-container-6 .card-item .card .figure,
.card-container-7 .card-item .card .figure,
.card-container-8 .card-item .card .figure,
.card-container-9 .card-item .card .figure { 
	padding-top: 45%; /* Öka för att göra bilder högre - Procent ser till att ytan skalas proportionerligt baserat på bredd */ 
	width: 100%;
}

/* Bilder som visas i sin helhet */
.card-container .card-item .card .image-contain {
    min-height: auto;
    min-width: auto;
    max-height: auto;
    overflow: visible;
    object-fit: contain;
    padding: 36px 36px 0 36px;
}

/*                      Ett kort                      */
/* -------------------------------------------------- */

/* Kort är en vit platta */
.card-container .card-item .card {
	border: 0;
	text-align: center;
	border-radius: 0px;
	background: #fff;
	padding: 0;
	position: relative;
	margin:0;
	height: 100%;
	display: -webkit-flex;
	-webkit-flex-flow: column wrap;
	-webkit-justify-content: space-between;
	display: flex;
	flex-flow: column wrap;
	justify-content:space-between;
}


/* Marginaler till innehåll */
.card-container .card-item .card .content { padding: 36px; padding-top: 24px; }
.card-container .card-item .card .button { padding: 36px; }
.puff-no-image .card-container .card-item .card .content { padding: 36px; }


@media (min-width: 1409px) {
	.card-container-5 .card-item .card .content,
	.card-container-6 .card-item .card .content { padding: 24px; padding-bottom: 36px; }
	.card-container-5 .card-item .card .button,
	.card-container-6 .card-item .card .button { padding: 24px; }
}

@media (max-width: 767px) {
	.card-container .card-item .card .content { padding: 24px; padding-bottom: 36px; }
	.card-container .card-item .card .button { padding: 24px; }
	.puff-no-image .card-container .card-item .card .content { padding: 24px; }
}


/* Innehåll */
.card-container .card-item .card .content { 
	-webkit-flex: auto; 
	flex: auto; 
	max-width: 100%; 
}

/* Knapp */
.card-container .card-item .card .button { 
	-webkit-flex: 0 0 auto; 
	flex: 0 0 auto;
	padding-top:0;	
}

.card-container .card-item .card .button .btn { white-space: normal; }



/*                                    Formulär                                  */
/* ============================================================================ */


/*                Generell stil på fält               */
/* -------------------------------------------------- */

/* Vanliga fält */
.form-control {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px;
	background-color: #EFEFEF;
	background-image: none;
	border: 0;
	border-radius: 0px;
}

/* Höga fält */
textarea.form-control {
	min-height: 156px;
	height: auto;
	padding: 12px 12px;
	resize: vertical;
}

/* Marginal under fält */
.form-row {
	margin-bottom: 12px;
}

/* Text i fält */
.form-control,
textarea.form-control {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #212B35;
	position: relative;
}

/* Placeholder - textfärg opacitet 50% */
.form-control::-moz-placeholder {
	color: #212B35;
	opacity: 0.5;
}
/* IE kan inte ha opacitet utan måste ha en bestämd färg */
.form-control:-ms-input-placeholder {
	color: #808080;
}


.form-control::-webkit-input-placeholder {
	color: #212B35;
	opacity: 0.5;
}

/* Labels */
.control-label {
	font-weight: 800;
	display: block;
	margin-bottom: 6px;
	margin-top: 18px;
}

.form-section .container .row form :first-child .control-label {
	margin-top: 0;
}

/* Hjälptext */
.help-block {
	color: #6C7378;
	font-style: italic;
	margin-bottom: 6px;
	margin-top: -6px;
}



/*                   Specifika fält                   */
/* -------------------------------------------------- */


/* Datum */
input[type="date"] {
	max-width: 260px;
}

/* Tid */
input[type="time"] {
	max-width: 120px;
}

/* Färgväljare */
input[type="color"] {
	max-width: 60px;
	padding: 0;
	position: relative;
	background-color: none;
}

/*
input[type="color"]:before {
    content: "\f1fb";
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: rgba(255,255,255,0.5);
    font: normal normal normal 18px/48px FontAwesome;
	z-index: 1;
}
*/

input[type="color"]::-webkit-color-swatch {
	border: 0;
	height: 100%;
	position: absolute;
	width: 100%;
	border-radius: 0px;
	top: 0px;
	left: 0px;
}

/* Dropdown */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}


select:not([multiple]) {
	background-image: url("../../mind_applications/SSL2/templates/T1/images/arrow.png");
	background-position: right 18px center;
    background-repeat: no-repeat;
    background-size: 10px;
}


/* Multiselect */
select[multiple="multiple"] {
	min-height: 156px;
	padding: 12px 0;
}

/* Style av multiselect i IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { select[multiple="multiple"] { padding: 12px; } }

/* Style av multiselect i mobil så */
@media (max-width: 767px) {select[multiple="multiple"] { min-height: auto; padding-left: 12px; }}

select[multiple] option {
	padding: 6px 36px 6px 12px;
}

select[multiple] option:checked,
select[multiple] option:checked:hover {
    color: #fff;
	-webkit-text-fill-color: #fff;
    background: #aa2337 linear-gradient(0deg, #aa2337 0%, #aa2337 100%);
}

select[multiple] option:hover {
    background: #EFEFEF linear-gradient(0deg, #EFEFEF 0%, #EFEFEF 100%);
	filter:brightness(94%);
}


select[multiple]::-webkit-scrollbar {
    width: 6px;
}

select[multiple]::-webkit-scrollbar-track {
    border-radius: 10px;
	border: solid 3px transparent;
}

select[multiple]::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.4);
    border-radius: 10px;
}

select[multiple]::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.8);
}

/* Checkbox */
.form-check {
	margin-top: 18px;
}

.form-check label {
	min-height: 24px;
    margin-bottom: 12px;
    display: block;
    padding-left: 36px;
    position: relative;
}

.form-check label input {
	-webkit-appearance: none;
    background-color: #EFEFEF;
    border: 0;
    height: 24px;
    width: 24px;
    border-radius: 0px;
    display: inline-block;
    margin: 0;
    position: absolute;
    left: 0;
}

.form-check label input:active, .form-check label input:checked:active {
	filter: brightness(76%);
}

.form-check label input:checked {
	background-color: #aa2337;
	color: #fff;
}

.form-check label input:checked:after {
	content: '\f00c';
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #fff;
    font: normal normal normal 14px/24px FontAwesome;
}

/* Radiobuttons */
.form-check .radio label input {
    border-radius: 50px;
}

.form-check .radio label input:checked:after {
	content: ' ';
    width: 8px;
    height: 8px;
    border-radius: 50px;
    position: absolute;
    top: 8px;
    left: 8px;
    background: #fff;
}

/* Filuppladdning */
.qq-uploader .btn {
	color: #000;
	padding-left: 0;
}

.qq-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    clear: both;
    background: #EFEFEF;
    border-radius: 0px;
}

.qq-upload-list li {
    background-color: #EFEFEF !important; /* Måste skriva över publika regler */
    color: #212B35 !important;
    border-bottom: 0 !important;
	padding: 12px;
	font-weight: 400;
}

.qq-upload-list li > div {
	white-space: nowrap; /* Ingen text radbryter */
    overflow: hidden; 
}

.qq-upload-list li .qq-upload-file { /* Filnamn */
	width: 60%;
    padding-right: 16px;
	font-weight: 400 ;
} 
.qq-upload-list li .qq-upload-status-text {width: 20%;} /* Klar / Laddar upp */
.qq-upload-list li .qq-upload-size { width: 16%;} /* Antal MB */

.qq-progress-bar-container-selector {
	width: 100% ;
}

@media (max-width: 767px) {

	.qq-upload-list li.qq-upload-success :nth-child(1),
	.qq-upload-list li.qq-upload-success :nth-child(2),
	.qq-upload-list li.qq-upload-success :nth-child(3)	{
		width: 100%;
		display: block;
		text-align: left;
	}

}
.qq-upload-list li div.qq-progress-bar {
    border-right: 0;
}
.qq-upload-list li div.qq-progress-bar, .qq-upload-list li.qq-upload-processing {
    background: #EFEFEF;
	filter: brightness(88%);
}

.qq-upload-list li div.qq-upload-status-text, .qq-upload-list li div.qq-upload-file-selector {
    vertical-align: middle;
}

.qq-upload-size {
    position: relative;
    right: 0;
    top: 0;
    vertical-align: middle;
    display: inline-block;
}


/* Disabled */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #D1D1D1;
  opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}




/*                  Hovers, fokus etc                 */
/* -------------------------------------------------- */

/* Hover */
input:hover,
textarea:hover,
select:hover {
    filter: brightness(94%);
}

/* Ingen hover eller fokus på låst fält */
input[readonly]:hover,
input[readonly]:focus {
    filter: brightness(100%);
}

/* Focus - Markör i fält etc */
input:focus,
textarea:focus,
select:focus  {
	background-color: #EFEFEF ;
    filter: brightness(88%);
	outline: none;
	border: 0;
	box-shadow: none;
}

/* Fokus på kryssad checkbox */
.form-check label input:checked:focus {
	background-color: #aa2337 ;
	filter: brightness(88%);
}




/*          Feedback, meddelanden, errors etc         */
/* -------------------------------------------------- */

/* Meddelanden */
.message { margin-bottom: 24px;  }
.message.success { color: green; }
.message.error { color: red;}
.parsley-errors-list { 
	margin: 6px 0; 
	padding: 0; 
	list-style-type: none; 
	font-size: 16px; 
	line-height: 24; 
	opacity: 0; 
}
.parsley-errors-list.filled { opacity: 1; }

/* Error */
.req-error {
	background-color: #FFDFDF;
}

/* Success */
input.success,
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
	background-color: #E9FFDF;
	}



/*                        Övrigt                      */
/* -------------------------------------------------- */

/* Screen-reader only - Döljer labels när de inte ska synas men de syns ändå för screen-readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}



/*                                    Animering                                 */
/* ============================================================================ */

/* Sätter animering på allt */
* { transition: all 200ms ease-out; }

/* Förutom body för att sidan inte ska hoppa när man laddar in sidan */
body { transition: none; }

/* Animering specifikt för pilarna i FAQ */
.faq-section i:before,
.faq-section i:after {
	transition: all 200ms ease-out, transform 50ms;
}

/* Animering av pilar i header */
.caret:before,
.caret:after {
	transition: all 200ms ease-out;
}

/* Animering av hamburgarmenyn i mobil */
.icon-bar {
	transition: all 200ms ease-out, transform 200ms;
}

/* Stänger av animering för element som är font-awesome för annars animeras de med en delay */
i,
.caret {
	transition: none; 
}

/* Sekundärmeny behöver ha dessa regler för att animera ikoner */
.secondary-menu i {
	transition: all 200ms ease-out;
}

/* Inga animationer i edit-mode */
.edit-mode * { transition: none; }


/*                                      Annat                                   */
/* ============================================================================ */

/* Rensar upp tomma element */
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty,
p:empty {
	display: none;
}

/*                       Cursors                      */
/* -------------------------------------------------- */

/* Handpekare på rätt ställen */
a[href],
input[type='submit'],
input[type='image'],
input[type='color'],
.checkbox > label,
input[type='checkbox'],
input[type='radio'],
.radio > label,
label[for],
select,
button,
.pointer,
[onclick] {
       cursor: pointer;
}

/* Låsta fält ska ej ha text-input-pekare */
input[readonly='readonly'] {
	cursor: default;
}


/* Regler för uppvisning som behövs för att allting ska lira */
.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

@-ms-viewport {
  width: device-width;
}

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

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

/* Float clear */
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}



/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                                   SEKTIONER                                  */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */




/*                                    Headers                                   */
/* ============================================================================ */

.menu-1 {
	border-top: 4px solid #aa2337;
}

@media (min-width: 1023px) {
	.menu-1 .caret {
		display: none;
	}
}

.menu-1,
.menu-2,
.menu-3,
.menu-4,
.menu-5,
.menu-6,
.menu-7 {
	padding: 0;
	background-color: #fff;
}

.menu-1,
.menu-2,
.menu-3,
.menu-6,
.menu-7 {
	min-height: 72px;
}


.menu-1,
.menu-2,
.menu-4,
.menu-6,
.menu-7 {
	text-transform: uppercase;
}

.menu-1 .dropdown-menu a,
.menu-2 .dropdown-menu a,
.menu-4 .dropdown-menu a,
.menu-5 .dropdown-menu a,
.menu-6 .dropdown-menu a,
.menu-7 .dropdown-menu a {
	text-transform: none;
	font-weight: 600;
}



/* ------ Fixed header ------ */
@media (min-width: 767px) {
	.menu-1.affix .secondary-menu,
	.menu-6.affix .secondary-menu {
		display: none;
	}

	.affix {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 500;
		max-height: 100vh;
	}

	.menu-1.affix, .menu-2.affix, .menu-3.affix, .menu-6.affix {
		min-height: 72px;
		border-bottom: 1px solid rgba(0,0,0,0.06);
	}

	.affix .logo-container {
			height: 72px;
			min-height: 72px;
		}

	.affix .logo {
		max-height: 48px;
		max-width: 150px;
	}
}

/* Affix meny i padda behöver få en scrollbar om den växer i höjd */
@media (max-width: 1023px) { .affix {overflow: auto;} }

@media (min-width: 1024px) {
	.menu-1.affix .navbar-collapse,
	.menu-6.affix .navbar-collapse	{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.menu-1.affix .primary-menu {
		margin-bottom: 0;
		margin-top: 0;
	}
}

/* ------ Flex som bara används i desktop för att hantera fall där menyval radbryter ------ */
@media (min-width: 1024px) {

	.navbar > .container {
		display: flex;
		flex-direction: row;
	}

	.navbar-header {
		flex : 0 0 180px;
	}

	.navbar-collapse {
		flex : 1 0 0;
	}

	.navbar-collapse > ul,
	.navbar-right > ul	{
		flex-flow: wrap;
		display: flex;
		justify-content: flex-end;
	}

	.menu-2 .navbar-form {
		order: 3;
		display: flex;
		align-items: center;
	}

	.menu-2 .primary-menu > li {
		margin-bottom: 3px;
		margin-top: 3px;
	}

	.menu-2 .navbar-collapse {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

}


/* ------ Logotyp ------ */
.navbar-header {
	float:left;
}

.logo-container {
    height: 100%;
	min-height: 96px;
    width: 220px;
    display: flex;
    align-items: center;
    position: relative;
	margin-bottom: 0;
}

.logo {
	/* Sätt maxhöjd och maxbredd på logotyp. Den kommer alltid vara centrerad och vänsterställd */
	max-height: 60px;
	max-width: 220px;

	background-repeat: no-repeat;
	background-position: center left;
	background-size: contain;

	width: 100%;
	height: 100%;
	text-indent: -1000px;
	overflow: hidden;
	display: block;
}

@media (max-width: 1023px) {
	.logo {
		max-height: 48px;
		max-width: 150px;
	}
}


/* ------ Högerdelen av headers ------ */
.navbar-right {
	float: right;
}

.nav, .dropdown-menu {
	list-style: none;
}

.nav > li {
	 float: left;
}


/* Huvudmeny */
.primary-menu > li, .menu-5 .nav > li   {
	margin-left: 0px;
}
.primary-menu.navbar-right {
	margin-right: -18px;
}


.primary-menu > li > a {
	font-size: 16px;
	line-height: 30px;
	padding: 0 18px;
	color: #212B35;
	font-weight: 700;
	letter-spacing: 1px;
}


/* Sekundärmeny */
.secondary-menu > li {
	margin-left: 0px;
}
.secondary-menu.navbar-right {
	margin-right: -15px;
}

.secondary-menu > li > a,
.secondary-menu > li > span {
	display: block;
	padding: 0 12px;
}

.secondary-menu a, .secondary-menu span, .menu-4 .nav a, .menu-4 .nav span {
	font-size: 12px;
	line-height: 24px;
	color: #6C7378;
	Font-weight: 600;
	letter-spacing: 1px;
}

.menu-4 .nav span {
	float: left;
}

.secondary-menu .fa, .menu-4 .fa {
	font-size: 16px;
	color: #6C7378;
	font-weight: 700;
	position: relative;
	bottom:-2px;
}


/* Dubblett av sekundärmeny av någon anledning */
.navbar .visible-xs {
	display: none;
}


/* Undermeny */
.menu-5 .nav a {
	color: #212B35;
}


/* Sekundärmeny i tablet och mobil */
@media screen and (max-width: 1023px) {

	.menu-4 .dropdown .caret {
		position: static;
	}

	.menu-4 .dropdown-menu {
		transform: translateY(-12px);
		visibility: hidden;
		opacity: 0;
		background: #fff;
		padding: 18px 24px;
		min-width: 200px;
		max-width: 400px;
		position: absolute;
		margin-top: 12px;
		margin-left: -12px;
		border-radius: 0px;
		z-index: 2;
		text-align: left;
	}

}


/* ------ Hovers, dropdown, etc ------ */

/* Aktiv */

.primary-menu .active > a,
.menu-5 .active > a {
	color: #aa2337;
}

.primary-menu .active > a > .caret::before,
.primary-menu .active > a > .caret::after,
.menu-5 .active > a > .caret::before,
.menu-5 .active > a > .caret::after {
	background-color: #aa2337;
}

/* Hover */

@media (min-width: 1023px) {
 .primary-menu > li:hover > a,
 .primary-menu > li .dropdown-menu a:hover,
 .menu-4 li > a:hover,
 .menu-4 li > a:hover > .fa,
 .menu-5 .nav > li:hover > a,
 .menu-5 .nav > li .dropdown-menu a:hover,
 .secondary-menu li:hover > a,
 .secondary-menu li .dropdown-menu a:hover,
 .secondary-menu li:hover > a > .fa  {
	color: #aa2337;
	filter: brightness(100%);
 }

 .primary-menu > li:hover .caret::before,
 .primary-menu > li:hover .caret::after,
 .menu-5 .nav > li:hover .caret::before,
 .menu-5 .nav > li:hover .caret::after,
 .secondary-menu li:hover .caret::before,
 .secondary-menu li:hover .caret::after {
	background-color: #aa2337;
 }

 /*
 .primary-menu .nav > li:hover .caret::before,
 .primary-menu .nav > li:hover .caret::after,
 .menu-4 li > a:hover,
 .menu-5 li > a:hover,
 .secondary-menu li > a:hover  {
 	background-color: #aa2337;
 }
 */

}

/* Dropdown */

/* Pil */
/* Stora pilar */
.caret {
	display: inline-block;
	position: relative;
	vertical-align: text-top;
	width: 15px;
	height: 22px;
	margin: 0 0 0 0;
	padding: 6px 0 0 6px;
}
.caret:before,
.caret:after  {
	content: "";
	position: absolute;
	width: 3px;
	height: 8px;
	border-radius: 2px;
}
.caret:before { transform: translate(2px) rotate(45deg); background-color: #212B35;	}
.caret:after { transform: translate(-2px) rotate(-45deg); background-color: #212B35;	 }

/* Små pilar */
.secondary-menu .caret {
	width: 15px;
	height: 20px;
	padding: 3px 0 0 6px;
}
.secondary-menu .caret:before,
.secondary-menu .caret:after  {
	content: "";
	position: absolute;
	width: 2px;
	height: 6px;
	border-radius: 2px;
}
.secondary-menu .caret:before { transform: translate(2px) rotate(45deg); background-color: #6C7378;	}
.secondary-menu .caret:after { transform: translate(-2px) rotate(-45deg); background-color: #6C7378;	 }

/* plus/minus design of caret when menu open is in collapsed/mobile mode */
.collapse.in .caret,
.collapse.in .secondary-menu .caret{
	cursor: pointer;
	right: -12px; top: 0;
	position: absolute;
	margin: 0	;
	height: 100%;
	width: 44px;
}
.collapse.in .caret:before,
.collapse.in .caret:after {
	content: '';
	height: 3px;
	right: 12px;
	position: absolute;
	top: 18px;
	width: 20px;

}
.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after {
	content: '';
	height: 3px;
	right: 12px;
	position: absolute;
	top: 16px;
	width: 16px;

}
.collapse.in .caret:before,
.collapse.in .active > * > .caret:before,
.collapse.in .secondary-menu .caret:before { transform: rotate(180deg); }
.collapse.in .caret:after,
.collapse.in .active > * >.caret:after,
.collapse.in .secondary-menu .caret:after { transform: rotate(90deg); transform-origin: center; }


.collapse.in .open > * > .caret:before,
.collapse.in .open > * >.caret:after,
.collapse.in .secondary-menu .open > * > .caret:before,
.collapse.in .secondary-menu .open > * >.caret:after { transform: rotate(0deg); }

/* colors */
.collapse.in .caret:before,
.collapse.in .caret:after,
.collapse.in .active > * > .caret:before,
.collapse.in .active > * >.caret:after,
.collapse.in li:hover .caret:before,
.collapse.in li:hover .caret:after { background: #212B35; }

.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after,
.collapse.in .secondary-menu .active > * > .caret:before,
.collapse.in .secondary-menu .active > * > .caret:after,
.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after { background: #6C7378; }

@media (min-width: 1023px) {
	.dropdown-menu {
		transform: translateY(-12px);
		visibility: hidden;
		opacity: 0;
	}
}

@media (max-width: 1023px) {
	.dropdown-menu {
		display: none;
	}
}

.dropdown-menu {
	background: #fff;
	padding: 18px 24px;
	min-width: 200px;
	max-width: 400px;
	position: absolute;
	margin-top: 12px;
	margin-left: -8px;
	border-radius: 0px;
	z-index: 2;
	box-shadow: ;
	border: 1px solid rgba(0,0,0,0.06);
}

/* Maxhöjd för dropdown i desktop */
@media (min-width: 1023px) {.dropdown-menu {
		max-height: 80vh;
		overflow-y: auto;
		transition: all 200ms ease-out 0.250s !important; /* Sista parametern är delay. Important behövs för att den behöver skriva över och fungera även i edit-mode */
	}
}

.edit-mode .dropdown-menu {
	overflow: inherit;
}


.menu-4 .secondary-menu .dropdown-menu,
.menu-6 .secondary-menu .dropdown-menu {
	right: 0;
	min-width: 100px;
}

.dropdown-menu::before {
	content: " ";
    height: 18px;
    width: calc(100% + 48px);
    margin-left: -24px;
    display: block;
    background: transparent;
    margin-top: -36px;
    margin-bottom: 18px;
	background: none;
}

.dropdown-menu > li > a {
	font-size: 16px;
	color: #212B35;
	font-weight: 400;
	padding: 6px 0;
	display: block;
}



/* Sekundärmenydropdown */
.secondary-menu .dropdown-menu {
  margin-top: 6px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.secondary-menu .dropdown-menu > li > a {
	font-size: 12px;
	color: #6C7378;
	padding: 6px 0;
	line-height: 18px;
	text-transform: uppercase;
}

.secondary-menu .dropdown-menu::before {
    margin-top: -30px;
    margin-bottom: 12px;
}


/* Hover dropdown */
@media (min-width: 1023px) {
	.dropdown:hover > .dropdown-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0%);
		transition: all 200ms ease-out 0s !important; /* Dropdown har en delay när de försvinner efter hover. Detta ser till att de inte är någon delay när man fäller ut dropdown */
	}
}


/* klicka ut dropdown */
.open > .dropdown-menu {
	display: block;
}

.navbar-toggle { display: none; }

@media (max-width: 1023px) {

	.menu-1,
	.menu-2,
	.menu-6,
  .menu-7 {
		height: auto;
	}



	/* Hamburgare ihopfälld */
	.navbar-toggle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-top: 0;
		margin-bottom: 0;
		padding: 12px;
		margin-right: -12px;
		background-color: transparent;
		background-image: none;
		border: 0;
		display: block;
		outline: none;
	}

	.navbar-toggle .sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	.navbar-toggle .icon-bar {
		display: block;
		width: 24px;
		height: 4px;
		margin-bottom: 4px;
	}

	.navbar-toggle .icon-bar:last-child {
		margin-bottom: 0;
	}

	.navbar-toggle .icon-bar {
		background-color: #212B35;
	}

	.navbar-toggle::after {
		clear:both;
	}

	/* Hamburgare utfälld */

	.navbar-toggle .icon-bar {

	}

	.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
		transform: translate(0, 6px) rotate(45deg);
	}

	.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3)	{
		transform: translate(0, -2px) rotate(-45deg);
	}

	.navbar-toggle:not(.collapsed) .icon-bar:last-child {
		display: none;
	}

	/* ---- */

	.navbar {
		float: none;
	}

	.nav>li {
		position: relative;
		display: block;
		float: none;
	}

	.primary-menu {
		margin-top: 12px;
	}



	.collapse {
		display: none;
		visibility: hidden;
	}

	.collapsing {
		display: block;
		opacity: 0;

	}

	.collapse.in {
		display: block;
		clear: both;
		/* overflow: hidden; */ 
		visibility: visible;
		opacity: 1;
	}

	.navbar-right {
		float: none;
		display: block;
	}

	.logo-container {
		height: 72px;
		min-height: 72px;
	}



	.menu-1,
	.menu-2,
	.menu-3,
	.menu-6,
  .menu-7 {
		min-height: 72px;
	}

	.navbar-header {
		float: none;
		position: relative;
	}

	.navbar .visible-xs {
		display: block;
	}

	.nav li {
		margin-left: 0;
	}

	.navbar .hidden-xs {
		display: none;
	}

	.caret {
		right: 6px;
		position: absolute;
	}

	.menu-5 .caret {
		right: auto;
		position: inherit;
	}

	/* Dropdown */
	.dropdown-menu {
		padding: 0;
		min-width: 100%;
		max-width: auto;
		position: relative;
		margin-top: 0;
		margin-left: 0px;
		background: transparent;
		margin-bottom: 0px;
	}
	.dropdown-menu::before {
		display: none;
	}

	.secondary-menu .dropdown-menu {
		margin-top: 0;
		padding-top: 6px;
		padding-bottom: 0;
	}


/* Caret i mobil */

.collapse.in .caret,
.collapse.in .secondary-menu .caret{
    cursor: pointer;
    right: calc(48px - 12px);
    top: 0;
    position: absolute;
    margin: 0;
    height: 100%;
    width: 54px;
    padding: 0;
}
.collapse.in .caret:before,
.collapse.in .caret:after {
    content: '';
    height: 3px;
    right: calc(50% - 10px);
    position: absolute;
    top: calc(50% - 2px);
    width: 20px;
}
.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after {
  content: '';
  height: 3px;
  right: calc(50% - 8px);
  position: absolute;
  top: calc(50% - 2px);
  width: 16px;
}
.collapse.in .caret:before,
.collapse.in .active > * > .caret:before,
.collapse.in .secondary-menu .caret:before { transform: rotate(180deg); }
.collapse.in .caret:after,
.collapse.in .active > * >.caret:after,
.collapse.in .secondary-menu .caret:after { transform: rotate(90deg); transform-origin: center; }
/* .collapse.in li:hover .caret:before,
.collapse.in li:hover .caret:after, */
.collapse.in .open > * > .caret:before,
.collapse.in .open > * >.caret:after,
.collapse.in .secondary-menu .open > * > .caret:before,
.collapse.in .secondary-menu .open > * >.caret:after { transform: rotate(0deg); }
/* colors */
.collapse.in .caret:before,
.collapse.in .caret:after,
.collapse.in .active > * > .caret:before,
.collapse.in .active > * >.caret:after,
.collapse.in li:hover .caret:before,
.collapse.in li:hover .caret:after { background: #212B35; }
.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after,
.collapse.in .secondary-menu .active > * > .caret:before,
.collapse.in .secondary-menu .active > * > .caret:after,
.collapse.in .secondary-menu .caret:before,
.collapse.in .secondary-menu .caret:after { background: #6C7378; }

}

@media (max-width: 767px) {
  .collapse.in .caret,
  .collapse.in .secondary-menu .caret{
      cursor: pointer;
      right: calc(30px - 12px);
      top: 0;
      position: absolute;
      margin: 0;
      height: 100%;
      width: 54px;
      padding: 0;
  }
}

/* Gör så att alla menyvalsbehållare går ut i kanten i padda och mobil. Och att alla menyval är inskjutna rätt avstånd */

@media (max-width: 1023px) {

  /* Minus marginal på huvud- och sekundärmeny */
	.primary-menu.navbar-right {
		margin-left: -48px;
		margin-right: -48px;

	}

	.secondary-menu.navbar-right {
		margin-left: -48px;
		margin-right: -48px;
	}


  /* Inskjutna menyval */
	.nav>li>a {
		position: relative;
		display: block;
		padding: 12px calc(48px + 30px) 12px 48px;
	}

	.nav.secondary-menu > li > a,
	.nav.secondary-menu > li > span	{
		padding: 12px calc(48px + 30px) 12px 48px;
	}


   /* Inskjutna dropdowns menyval */
  .secondary-menu .dropdown-menu > li > a {
	  padding: 12px calc(48px + 18px);
  }

	.dropdown-menu > li > a {
	  padding: 12px calc(48px + 18px);
  }


}

@media (max-width: 767px) {

  /* Minus marginal på huvud- och sekundärmeny */
	.primary-menu.navbar-right {
		margin-left: -30px;
		margin-right: -30px;
	}

	.secondary-menu.navbar-right {
		margin-left: -30px;
		margin-right: -30px;
	}


  /* Inskjutna menyval */
	.nav>li>a {
		position: relative;
		display: block;
		padding: 12px calc(30px + 30px) 12px 30px;
	}

	.nav.secondary-menu > li > a,
	.nav.secondary-menu > li > span	{
		padding: 12px calc(30px + 30px) 12px 30px;
	}


   /* Inskjutna dropdowns menyval */
  .secondary-menu .dropdown-menu > li > a {
	  padding: 12px calc(30px + 18px);
  }

	.dropdown-menu > li > a {
	  padding: 12px calc(30px + 18px);
  }

}

/* Avstånd mellan menyval skalas ner i liten desktop */
@media (min-width: 1023px) and (max-width: 1290px) {
	.primary-menu > li > a { padding: 0 12px; }
}



/*                       Header med sekundärmeny (menu-1)                       */
/* ---------------------------------------------------------------------------- */


.menu-1 .primary-menu {
	margin-bottom:18px;
	margin-top: 33px;
}

.menu-1 .secondary-menu {
	margin-bottom: 12px;
	margin-top: 12px;
	min-height: 12px;
	min-width: 1px;
}



/*                            Header med CTA (menu-2)                           */
/* ---------------------------------------------------------------------------- */

.menu-2 .navbar-form {
	flex: 0 0 auto;
}

.menu-2 .btn-primary {
	margin-left: 36px;
}

@media (max-width: 1023px) {

	.menu-2 .navbar-right > .btn {
		float: none;
		display: block;
		position: absolute;
		right: 48px;
		top: 12px;
	}

	.menu-2 .btn-primary {
		margin: 0;
	}

	.menu-2 .primary-menu {
		margin-bottom: 12px;
	}

	.menu-2 .container {
		display: flex;
		flex-direction: column;
	}

	.menu-2 .container > div:first-child {order: 1;}
	.menu-2 .container > div:nth-child(2) {order: 3;}
	.menu-2 .container > div:last-child {order: 2;}

}

@media (max-width: 767px) {

	.menu-2 .navbar-right > .btn {
		position: relative;
		right: 0;
		top: 0;
	}

	.menu-2 .btn-primary {
		margin: 0 0 24px 0;
	}

}


/*                   Header med telefon och hitta hit (menu-6)                  */
/* ---------------------------------------------------------------------------- */

.menu-6 .primary-menu {
	/* margin-bottom:0; */  /* NOTE: Move to mobille */
}

.menu-6 .navbar-right li > span {
	display: block;
}


/*                     Header med bara sekundärmeny (menu-4)                    */
/* ---------------------------------------------------------------------------- */


.menu-4 .secondary-menu > li > a, 
.menu-4 .secondary-menu > li > span {
    display: block;
    padding: 0 12px;
}

.menu-4 .container {
	min-height: 36px;
	padding: 4px;
}

.menu-4 .nav {
	margin-right: -15px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.menu-4 .nav > :last-child > a {
		padding: 0 0 0 16px;
	}
}

.menu-4 .nav > li {
	display: inline-block;
}

.menu-4 .nav > li > span {
	display: block;
	margin-left: 0;
}


.menu-4 .nav > li > a {
    position: relative;
    display: block;
}

.menu-4 .container > .pull-right {
		margin-top: 2px;
	}

.menu-4 .container > .pull-right ul > li span	{
	float: none;
}

@media (max-width: 767px) {

	.menu-4 .container {
		text-align: center;
	}

	.menu-4 .container > .pull-right {
		display: inline-block;
		float: none;
	}

	.menu-4 .nav {
		margin-right: 0px;
	}

}

/*                      Header med bara undermeny (menu-5)                      */
/* ---------------------------------------------------------------------------- */


.menu-5 {
	min-height: 48px;
}

.menu-5 .nav {
	float: right;
	display: block;
	margin: 12px -18px -0px 0;
	text-align: right;
	width: 100%;
}

.menu-5 .nav > li {
	display: inline-block;
	margin-bottom: 12px;
	float: none;
	text-align: left;
}

.menu-5 .nav > li > a {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 0 18px;
	line-height: 24px;
	height:24px;
}

.menu-5 .dropdown-menu {
	margin-top: 6px;
}


.menu-5 .caret {
	width: 15px;
	height: 22px;
	padding: 9px 0 0 6px;
}

.menu-5 .caret:after {
    transform: translate(-2px) rotate(-45deg);
}
.menu-5 .caret:before, .menu-5 .caret:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 6px;
    border-radius: 2px;
}


@media (max-width: 767px) {

	.menu-6 .primary-menu {
		margin-bottom: 0;
	}

	.menu-5 {
		display: none;
	}

}

/* Avstånd mellan menyval skalas ner i liten desktop */
@media (min-width: 1023px) and (max-width: 1290px) {
	.menu-5 .nav > li > a { padding: 0 12px; }
}


/*                      Header med bara meny (menu-7)                      */
/* ---------------------------------------------------------------------------- */


@media (max-width: 1023px) {
  .menu-7 .navbar-header {
    height: 72px;
  }
}

@media (min-width: 1023px) {
  .menu-7 .navbar-header {
    display: none;
  }

  .menu-7 .primary-menu.navbar-right{
    justify-content: center;
    padding: 21px 0;
  }

  .menu-7 .navbar-right{
    width: 100%;
  }


}



/*                                 Above the fold                               */
/* ============================================================================ */



@media (max-width: 767px) {
	.atf-1 > .wap-media-bg .wap-media-bg-frame img, 
	.atf-1 > .wap-media-bg .wap-media-bg-frame video,
	.atf-2 > .wap-media-bg .wap-media-bg-frame img, 
	.atf-2 > .wap-media-bg .wap-media-bg-frame video	{
		min-height: 175%;
		min-width: 175%;
	}		
}

.atf-1, 
.atf-2 {
	height: 675px;
	background-color: #000;
}

.atf h1,
.atf h2,
.atf h3,
.atf h4,
.atf h5,
.atf h6,
.atf p,
.atf span {
	color: #fff;
}

.atf-1 .container, 
.atf-2 .container {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.atf-1 .row > div {
	float: left;
}

.atf-2 .row > div {
	margin: 0 auto;
	float:none;
}


/* Knapparna */
.atf-1 .btn-primary, 
.atf-2 .btn-primary {
	margin-right:30px;
	color: #fff;
}

.atf-1 .btn, 
.atf-2 .btn {
	margin-bottom: 12px;
	color: #fff;
}

.atf-1 .btn .fa, 
.atf-2 .btn .fa {
	color: #fff;
}

.atf-1 .row > div > div:last-child,
.atf-2 .row > div > div:last-child {
	margin-bottom: -12px;
}


/* Ifall webbläsarfönstret är väldigt lågt */
@media (max-height: 800px) {
	.atf-1, .atf-2 {
		height: auto;
	}

	.atf-1 .container,
	.atf-2 .container {
		top: 0;
		transform: none;
	}
}

@media (max-width: 1300px) {
	.atf-1 .row > div,
	.atf-2 .row > div {
		max-width: 60%;
	}
}


/* Padda */
@media (max-width: 1023px) {
	.atf-1,
	.atf-2 {
	/*	height: 924px; */
	}
	
	.atf-1 .row > div,
	.atf-2 .row > div {
		max-width: 60%;
	}
	
}



/* Mobil */
@media (max-width: 767px) {

	.atf-1 .row > div,
	.atf-2 .row > div {
		max-width: 100%;
	}

	.atf-1, .atf-2 {
		height: auto;
	}

	.atf-1 .container,
	.atf-2 .container {
		top: 0;
		transform: none;
	}

	.atf-1 .btn,
	.atf-2 .btn {
		margin-bottom:12px;
	}
	/*
	.atf-1 .row > div, .atf-2 .row > div {
		width: 80%;
		padding: 24px;
		background: white;
		margin: -24px;
		border-radius: 24px;
	}
	*/
	
	/* Sätter bakgrunden till en inline-bild i mobil*/
	.atf .wap-media-bg {
		position: relative;
		height: 350px;
		margin-bottom: 24px;
	}
	
	.atf .wap-media-bg img {
		top: 75%;
	}

	
	.atf .wap-tinter {
		background: none !important; /* Skriver över inline-regler som sätter tint på bilden eftersom bilden nu inte ligger bakom texten */
	}
	
	.atf {
		padding-top: 0;
	}
	
}

/* Mindre mobil */
@media (max-width: 425px) {
	.atf .wap-media-bg {
		height: 200px;
	}
	.atf .wap-media-bg img {
		top: 75%;
	}
}

/* Mindre mobil */
@media (max-width: 400px) {
	.atf .wap-media-bg {
		height: 200px;
	}
}



/* Bildens position */
@media (max-width: 1024px) { .atf .wap-media-bg img {object-position: 64%;} }
@media (max-width: 767px) { .atf .wap-media-bg img {object-position: 200%;} }
@media (max-width: 740px) { .atf .wap-media-bg img {object-position: 180%;} }
@media (max-width: 700px) { .atf .wap-media-bg img {object-position: 150%;} }
@media (max-width: 650px) { .atf .wap-media-bg img {object-position: 130%;} }
@media (max-width: 600px) { .atf .wap-media-bg img {object-position: 120%;} }
@media (max-width: 550px) { .atf .wap-media-bg img {object-position: 110%;} }
@media (max-width: 500px) { .atf .wap-media-bg img {object-position: 100%;} }
@media (max-width: 425px) { .atf .wap-media-bg img {object-position: 187%;} }
@media (max-width: 400px) { .atf .wap-media-bg img {object-position: 150%;} }
@media (max-width: 375px) { .atf .wap-media-bg img {object-position: 137%;} }
@media (max-width: 320px) { .atf .wap-media-bg img {object-position: 112%;} }
@media (max-width: 280px) { .atf .wap-media-bg img {object-position: 90%;} }

/*                     Above the fold vänsterställd (atf-1)                     */
/* ---------------------------------------------------------------------------- */


/*                       Above the fold centrerad (atf-2)                       */
/* ---------------------------------------------------------------------------- */


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



/*                                      Text                                    */
/* ============================================================================ */





/*                  Text H1 en kolumn centrerad (pageheader-2)                  */
/* ---------------------------------------------------------------------------- */


/*                 Text H2 en kolumn centrerad (sectionheader-2)                */
/* ---------------------------------------------------------------------------- */


/*                  Text H3 en kolumn centrerad (subsection-2)                  */
/* ---------------------------------------------------------------------------- */


/*                      Text RTE en kolumn (subsection-3)                       */
/* ---------------------------------------------------------------------------- */


/*                 Text H2 3 ikoner och knapp centrerad (cta-3)                 */
/* ---------------------------------------------------------------------------- */


.cta-3 ul {
	list-style: none;
}

.cta-3 ul {
	margin-bottom: 24px;
    margin-left: -12px;
    margin-right: -12px;
}


.cta-3 ul li {
	margin-left: 12px;
	margin-right: 12px;
	margin-bottom: 12px;
}

.cta-3 ul li, .cta-3 ul span, .cta-3 ul .fa  {
	display: inline-block;
}

.cta-3 ul .fa  {
	position: absolute;
    margin-top: 4px;
	width: 18px;
	text-align: center;
}


.cta-3 ul li > span {
	margin-bottom: 0;
    text-align: left;
    margin-left: 24px;
}

.cta-3 ul li p {
	margin-bottom: 0;
}



/*             Text H2 och bild en kolumn centrerad (deliverable-1)             */
/* ---------------------------------------------------------------------------- */


/*           Text H2 och bild en kolumn vänsterställd (deliverable-2)           */
/* ---------------------------------------------------------------------------- */


/*                   Text bara bild fullbredd (deliverable-2)                   */
/* ---------------------------------------------------------------------------- */


/*                      Text 2 kolumner 60/40 (body-text-1)                     */
/* ---------------------------------------------------------------------------- */

.body-text-1 .main {
	width: calc(67% - 120px);
	float: left;
}
/* Minskar mellanrummet i något mindre desktop */
@media (max-width: 1250px) {.body-text-1 .main {width: calc(67% - (120px / 2));}}

.body-text-1 .side {
	width: 33%;
	float: right;
}

.body-text-1 figcaption {
	text-align: left;
}

/* Sätter margin-top det första elementet i text under bild. Finns ingen text så finns ingen marginal */
.body-text-1 figcaption :first-child {
    margin-top: 30px;
}

@media (max-width: 1023px) {
	.body-text-1 .main,
	.body-text-1 .side {width: 100%;}
	.body-text-1 .main {margin-bottom:48px;}
}



/*                                     50/50                                    */
/* ============================================================================ */

.cta-1 .container .row,
.cta-2 .container .row,
.body-text-9 .container .row,
.body-text-10 .container .row {
	display: flex;
}

/* Regler för alla text och bild-divar */
.cta-1 .container .row > div,
.cta-2 .container .row > div,
.body-text-9 .container .row > div,
.body-text-10 .container .row > div {
	display: flex;
	justify-content: center;
	position: relative;
}

/* Bilder vänster i mobil */
@media (max-width: 1023px) {
	.cta-1 .container .row > div,
	.cta-2 .container .row > div,
	.body-text-9 .container .row > div,
	.body-text-10 .container .row > div {
		justify-content: left;
	}
}

/* Text till vänster*/
.cta-1 .text,
.body-text-10 .text {
    flex-direction: column;
	padding-right: 120px;
	right: 40%;
	width: 60%;
}

/* Text till höger*/
.cta-2 .text,
.body-text-9 .text {
    flex-direction: column;
	padding-left: 120px;
	width: 60%;
}

/* Bildfix för IE */
.cta-1 figure,
.body-text-10 figure,
.cta-2 figure,
.body-text-9 figure{
  min-width: 100px;
}

/* Bild till höger */
.cta-1 .image,
.body-text-10 .image {
    align-items: center;
	left: 60%;
	width: 40%;
}

/* Bild till vänster */
.cta-2 .image,
.body-text-9 .image {
    align-items: center;
	width: 40%;
}

/* Lite mindre mellanrum */
@media (max-width: 1250px) {

	.cta-1 .text,
	.body-text-10 .text {
		padding-right: calc(120px /2);
	}

	.cta-2 .text,
	.body-text-9 .text {
		padding-left: calc(120px /2);
	}

}


/* I mobil och padda så stackas allt */
@media (max-width: 1023px) {

	.cta-1 .container .row,
	.cta-2 .container .row,
	.body-text-9 .container .row,
	.body-text-10 .container .row {
		flex-direction: column;
	}

	.cta-1 .text,
	.body-text-10 .text,
	.cta-2 .text,
	.body-text-9 .text,
	.cta-1 .image,
	.body-text-10 .image,
	.cta-2 .image,
	.body-text-9 .image {
		width: 100%;
		left: 0;
		right: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.cta-1 .image,
	.body-text-10 .image,
	.cta-2 .image,
	.body-text-9 .image {
		margin-bottom: 24px;
	}

}


/* Den här regeln gör så att det sista elementet i valda sektioner inte har någon marginal. */
.body-text-9 .text :last-child,
.body-text-10 .text :last-child
 {
	margin-bottom: 0;
}


/*                 50/50 text med knapp bild till höger (cta-1)                 */
/* ---------------------------------------------------------------------------- */


/*                50/50 text med knapp bild till vänster (cta-2)                */
/* ---------------------------------------------------------------------------- */


/*                   50/50 text bild till höger (body-text-9)                   */
/* ---------------------------------------------------------------------------- */


/*                  50/50 text bild till vänster (body-text-10)                 */
/* ---------------------------------------------------------------------------- */


/*                                     Puffar                                   */
/* ============================================================================ */


/*                Puffar 3 med textkolumn H2 ovanför (feature-3)                */
/* ---------------------------------------------------------------------------- */


.feature-3 .btn {
    min-height: 24px;
    color: #aa2337;
    background: none;
}

.feature-3 .card-container .card-item .card .figure > .editable,
.feature-3 .card-container .card-item .card .figure > video,
.feature-3 .card-container .card-item .card .figure > img {
    border-radius: 0px 0px 0 0;
	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    float: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

/*                   Puffar med bild, rubrik och knapp (puff)                   */
/* ---------------------------------------------------------------------------- */


/*                            Puffar med bild (puff)                            */
/* ---------------------------------------------------------------------------- */


/*                          Puffar med bara text (puff)                         */
/* ---------------------------------------------------------------------------- */



/*                              Logotyper (logos-card)                          */
/* ============================================================================ */


.logos-card.wap-library-coreBootstrap3 .card-container,
.atf-logo-cards .card-container  {
	position: relative;
	margin: 0 -18px;
	padding: 0;
	justify-content: center;
	align-items: center;
	}



.logos-card.wap-library-coreBootstrap3 .card-item,
.atf-logo-cards .card-item { 
	position: relative; 
	padding: 18px; /* Detta gånger 2 är avstånd mellan bilder */
}

.logos-card.wap-library-coreBootstrap3 .card-item,
.atf-logo-cards .card-item  { 
	-webkit-flex: 0 0 auto; 
	flex: 0 0 auto; 
}

/* Max storlekar på bilder */
.logos-card.wap-library-coreBootstrap3 .card-item img,
.atf-logo-cards .card-item img,
.atf-logo-cards .card-item video {
    max-width: 150px; 
	max-height: 102px;
}


@media (max-width: 1023px) {
	.logos-card.wap-library-coreBootstrap3 .card-logo img,
	.atf-logo-cards .card-logo img,
	.atf-logo-cards .card-logo video	{ max-height: 102px; }
}

@media (max-width: 767px) {
	.logos-card.wap-library-coreBootstrap3 .card-logo img,
	.atf-logo-cards .card-logo img,
	.atf-logo-cards .card-logo video { max-height: 102px; }
}



/*                                 Testimonials                                 */
/* ============================================================================ */



/*                    Testimonial bild till vänster (atf-8)                     */
/* ---------------------------------------------------------------------------- */


.atf-8 .container .row {
	display: flex;
}

/* Regler för alla text och bild-divar */
.atf-8 .container .row > div {
	display: flex;
	justify-content: center;
	position: relative;
}

/* Text till höger */
.atf-8 .text {
    flex-direction: column;
	padding-left: 120px;
}


/* Bild till vänster */
.atf-8 .image-container {
    align-items: center;
	max-width: 400px;
    flex: 1 0 400px;
}


/* Bild */
.atf-8 .image img,
.atf-8 .image video {
	max-width: 100%;
	max-height: 100%;
}

.atf-8 .image {
	z-index: 1;
}

/* Lite mindre mellanrum */
@media (max-width: 1250px) { .atf-8 .text { padding-left: calc(120px /2); } }


/* I mobil och padda så stackas allt */
@media (max-width: 1023px) {

	.atf-8 .container .row {
		flex-direction: column;
		text-align: center;
	}

	.atf-8 .text,
	.atf-8 .image	{
		left: 0;
		right: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.atf-8 .image-container {
		margin-bottom: 24px;
		flex: 1 0 100%;
		max-width: 100%;
	}

	.atf-8 .image {
		text-align: center;
		max-width: 400px;
	}

}


/* Ordnar så det går att editera bilden */
.atf-8 .image figure > span,
.testimonial-1 .image > span {
    position: absolute !important; /* Måste vara important för att skriva över edit-regler */
    top: 0;
    top: 0;
    width: 100%;
    height: 100%;
}




/*                   Testimonial bild ovanför (testimonial-1)                   */
/* ---------------------------------------------------------------------------- */

.testimonial-1 .container .row > div:first-child {
	z-index: 1;
	position: relative;
}


.testimonial-1 .image-container {
	text-align: center;
	margin-bottom: 36px;
}

.testimonial-1 .image {
	max-width: 400px;
	margin: 0 auto;
}

/* Bild */
.testimonial-1 .image img {
	max-width: 100%;
	max-height: 100%;
}



/*                   Testimonial 3 citat (testimonial-3)                   */
/* ---------------------------------------------------------------------------- */



/* Element i ett kort */
.testimonial-3 .testimonial-content .flex-item {
    -webkit-flex: 1 0 100%;
    flex: 1 0 100%;
    padding: 32px;
	word-wrap: break-word;
	position: relative;
}

.testimonial-3 img, 
.testimonial-3 video {
/*	position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;*/
    float: none;
    /*width: 100%;
    max-width: 100%;*/
    height: 100%;
    max-height: 100%;
    overflow: hidden;
/*    min-height: 100%;
    min-width: 100%;*/
    max-height: auto;
    overflow: visible;
    object-fit: contain;
}

.testimonial-3 .image {
	text-align: center;
    position: relative;
    height: 72px;
    max-width: 100%;
    margin: 0 auto;
	margin-bottom: 12px
}

.testimonial-3 .card-container .card-item .card .content-top {
    -webkit-flex: auto;
    flex: auto;
	padding: 36px;
	align-self: flex-top;
	width: 100%;
}

.testimonial-3 .card-container .card-item .card .content-bottom {
	padding: 36px;
	align-self: flex-end;
	width: 100%;
}

.testimonial-3 .card-container .card-item .card .content-bottom cite {
	display: block;
}

@media (max-width: 767px) {
	.testimonial-3 .card-container .card-item .card .content-top { padding: 24px; }
	.testimonial-3 .card-container .card-item .card .content-bottom { padding: 24px; }
}


/*                     Jämförelsetabell (deliverable-3)                     */
/* ============================================================================ */

.deliverable-3 p,
.deliverable-3 h1,
.deliverable-3 h2,
.deliverable-3 h3,
.deliverable-3 h4,
.deliverable-3 h5,
.deliverable-3 h6 {
	margin-bottom: 0;
	display: inline-block;
}


/* Visar och döljer tabell och kort */
.deliverable-3 .container.hidden-xs { display: block; }
.deliverable-3 .container.visible-xs { display: none; }

@media screen and (max-width: 1023px) {
	.deliverable-3 .container.hidden-xs { display: none; }
	.deliverable-3 .container.visible-xs { display: block; }
}

.deliverable-3 .fa-2x,
.deliverable-3 .fa-3x {
	font-size: 24px;
}

.deliverable-3 th > div {
    height: 180px;
}

@media screen and (max-width: 1200px) {
	.deliverable-3 th > div { height: 150px; }
}

@media screen and (max-width: 1023px) {
	.deliverable-3 th > div { height: 444px; }
}

@media (max-width: 900px) {
	.deliverable-3 th > div { height: 372px; }
}

@media (max-width: 767px) {
	.deliverable-3 th > div { height: 390px; }
}

@media (max-width: 600px) {
	.deliverable-3 th > div { height: 294px; }
}

@media (max-width: 480px) {
	.deliverable-3 th > div { height: 228px; }
}

@media (max-width: 320px) {
	.deliverable-3 th > div { height: 138px; }
}

.deliverable-3 th img {
    min-height: 100%;
    min-width: 100%;
    max-height: auto;
    overflow: visible;
    object-fit: cover;
}

.deliverable-3 .container {
	background: none;
}

.deliverable-3 tr {
	height: 60px;
}

.deliverable-3 tfoot tr {
	height: auto;
}

.deliverable-3 tfoot tr td {
	padding: 0 24px;
}

.deliverable-3 tfoot tr .btn {
	margin: 36px 0;
}

/* Mindre marginal i mobil */
@media (max-width: 767px) {.deliverable-3 tfoot tr .btn { margin: 24px 0; }}

.deliverable-3 table tbody tr:nth-child(even)  {
	background: #EFEFEF;
}

.deliverable-3 tbody {
	background: #fff;
}

.deliverable-3 tfoot td {
	background: #fff;
}

/* Runda hörn */
.deliverable-3 tfoot td:first-child { border-radius: 0 0 0 0px; }
.deliverable-3 tfoot td:last-child { border-radius: 0 0 0px 0; }
.deliverable-3 tbody > tr:first-child td:first-child{ border-radius: 0px 0 0 0; }

.deliverable-3 table {
	border-spacing: 0px;
	border-collapse: separate;
	table-layout: fixed;
	width: 100%;
}

.deliverable-3 td, .chart-table th { padding: 12px; vertical-align: middle; text-align: center;  }
.deliverable-3 tbody td.feature-desc { padding: 12px 12px 12px 24px; }
.deliverable-3 tbody tr td:last-child { padding: 12px 24px 12px 12px; }


.deliverable-3 thead th { background-color: transparent; vertical-align: top; }

.deliverable-3 thead { text-align: center; }
.deliverable-3 tbody { text-align: left; background: #fff; }
.deliverable-3 .description-row td { text-align: left; background-color: #fff; }
.deliverable-3 .description-row:not(.active) { display: none; }
.deliverable-3 ._feature-trigger { cursor: pointer; }
.deliverable-3 .description-label { float: right; text-align: right; font-weight: 700; }
.deliverable-3 tbody i { display: block;  line-height: 1;}
.deliverable-3 .has-more-info .fa { color: #989898; display: none; }
.deliverable-3 .fa-info-circle, .chart-table .fa-chevron-up { float: right; width: 16px; height: 16px; margin-right: -20px; }

@media screen and (min-width: 1024px) {
	.deliverable-3 th:not(:first-child) { position: relative; }
}

/* Kort i padda och mobil */
.deliverable-3 .container.visible-xs > table {
	margin-bottom: 24px;
}

.deliverable-3 .container.visible-xs > table:last-child {
	margin-bottom: 0;
}

.deliverable-3 .container.visible-xs > table img {
	width: 100%;
	border-radius: 0px 0px 0 0;
}

.deliverable-3 .container.visible-xs .description-label {
	float: left;
	text-align: left;
}


/* Runda hörn */
.deliverable-3 .container.visible-xs tfoot td:first-child { 0; }
.deliverable-3 .container.visible-xs tfoot td:last-child { border-radius: 0; }
.deliverable-3 .container.visible-xs tbody > tr:first-child td:first-child{ border-radius: 0; }

.deliverable-3 .container.visible-xs tfoot td:last-child { border-radius: 0 0 0px 0px; }



/*                            Prisjämförelse (price-7)                          */
/* ============================================================================ */

/* Padding till innehåll */
.price-7 .card-container .card-item .card { padding: 36px; }
@media screen and (max-width: 767px) {.price-7 .card-container .card-item .card { padding: 24px; }}

.price-7 .card-container .card-item .card .content-top { padding-bottom: 6px; }
.price-7 .card-container .card-item .card .content { padding: 0 0 36px 0; }
.price-7 .card-container .card-item .card .button { padding: 0;}

/* Titel */
.price-7 .content-top {
	text-transform: uppercase;
	font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Primärt kort */
.price-7 .card-container .card-item.primary .card {
/*	background: #aa2337;
	color: #fff; */
	border: 3px solid #aa2337;
	padding: 33px;
}

/*
.price-7 .primary .content-top,
.price-7 .primary .content,
.price-7 .primary .content .price,
.price-7 .primary .content p {
	color: #fff;
}

.price-7 .primary .btn {
	background: #fff;
	color: #000;
}
*/


/*                                  Tabbväljare                                 */
/* ============================================================================ */

/* Stil på listor */
.feature-1 .tab-pane-text ul,
.tab-pane-text ol {
  margin-bottom: 36px;
}

/* Bakgrund är positionerad top för dessa sektioner då den kan ändra höjd dynamiskt och en hoppig vertikalt centrerad bakgrund blir inte snyggt */

.feature-section .wap-media-bg .wap-media-bg-frame img, .feature-section .wap-media-bg .wap-media-bg-frame video {
    object-position: top;
}


/* Accordion i mobil */
.feature-section .collapse { display: none; }
.feature-section .collapsing { display: block; opacity: 0;  }
.feature-section .collapse.in { display: block; opacity: 1; }

.feature-section a[data-toggle=collapse]:not(.collapsed) {
	color: #fff;
	background: #aa2337;
	font-weight: 700;
	}

.feature-section li[role="tabpanel"] {
	padding: 24px;
}


.feature-section .hidden-xs {
	display: block;
}

.feature-section .visible-xs {
	display: none;
}

@media screen and (max-width: 767px) {
	.feature-section .hidden-xs {
		display: none;
	}

	.feature-section .visible-xs {
		display: block;
	}
}



/* Meny - text */
.feature-section .icon {
	float: left;
	line-height: 1;
	margin-bottom: 0;
	margin-right: 12px;
	padding-top: 6px;
	}

/* Meny - Meny */
.feature-section .nav {
	background: #fff;
	border-radius: 0px;
}

.feature-1 .nav-pills > li,
.feature-2 .nav-pills > li {
	float: none;
	position: relative;
	cursor: pointer;
}

.feature-1 .nav-pills > li > a,
.feature-2 .nav-pills > li > a {
	color: #212B35;
	display: block;
	background: #fff;
	border-radius: 0px;
}

.feature-1 .row > div:first-child ul.nav li > a {
	padding: 12px 60px 12px 24px;
}

.feature-2 .row > div:first-child ul.nav li > a {
	padding: 12px 24px 12px 60px;
}

.feature-1 ul a:hover,
.feature-2 ul a:hover {
	filter: brightness(88%);
}

.feature-1 .row > div:first-child ul a:active,
.feature-2 .row > div:first-child ul a:active {
	filter: brightness(76%);
}

.feature-1 .row > div:first-child ul .active a,
.feature-2 .row > div:first-child ul .active a {
	color: #fff;
	background: #aa2337;
	font-weight: 700;
}


.feature-1 .row > div:first-child ul .active a:focus,
.feature-2 .row > div:first-child ul .active a:focus {
	filter: brightness(100%);
}


/* Pilarna */
.feature-section .nav-stacked li .fa-arrow-right:before {
    content: "\f054";
}

.feature-section .nav-stacked li .fa-arrow-left:before {
    content: "\f053";
}


.feature-section .nav-stacked li .arrow-left,
.feature-section .nav-stacked li .arrow-right {
	position: absolute;
	display: none;
	line-height: inherit;
	font-size: 14px;
	top: 50%;
	transform: translateY(-50%);
	}

.feature-section .nav-stacked li .arrow-left {
	left: 24px;
	right: auto;
	text-align: right;
	}
.feature-section .nav-stacked li .arrow-right {
	left: auto;
	right: 24px;
	text-align: left;
	}

.feature-section .nav-stacked li.active .arrow-left,
.feature-section .nav-stacked li.active .arrow-right { display: block; }


/* Innehåll */
.feature-1 .tab-content > .tab-pane,
.feature-2 .tab-content > .tab-pane {
    display: none;
}

.feature-1 .tab-content > .tab-pane figure,
.feature-2 .tab-content > .tab-pane figure {
	text-align: left;
}


.feature-1 .tab-content > .active,
.feature-2 .tab-content > .active {
    display: block;
}

.feature-section .tab-pane img+p { margin-top: 1rem; }
.feature-section .tab-pane figure img { margin-bottom: 24px; }




/*                     Tabbväljare meny vänster (feature-1)                     */
/* ---------------------------------------------------------------------------- */


.feature-1 .row > div:first-child {
	width: 35%;
	float: left;
}

.feature-1 .row > div:last-child {
	width: 65%;
	float: left;
	padding-left: 120px;
	margin-left:0;
}


/*                      Tabbväljare meny höger (feature-2)                      */
/* ---------------------------------------------------------------------------- */


.feature-2 .row > div:first-child {
	width: 35%;
	float: right;
	left: auto;
}

.feature-2 .row > div:last-child {
	width: 65%;
	float: left;
	padding-right: 120px;
	margin-left:0;
	right: auto;
}


/* Responsiva regler för alla tabbväljare */

@media (max-width: 1023px) {

	.feature-2 .row > div:first-child {
		width: 50%;
		padding-left: 24px;
	}

	.feature-2 .row > div:last-child {
		width: 50%;
		padding-right: 24px;
	}

		.feature-1 .row > div:first-child {
		width: 50%;
		padding-right: 24px;
	}

	.feature-1 .row > div:last-child {
		width: 50%;
		padding-left: 24px;
	}

}

@media (max-width: 767px) {

	.feature-1 .row > div:first-child,
	.feature-2 .row > div:first-child,
	.feature-1 .row > div:last-child,
	.feature-2 .row > div:last-child	{
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.feature-1 .nav-pills > li > a,
	.feature-2 .nav-pills > li > a 	{
		padding: 12px 54px 12px 24px;
	}

}


/* Mobil */

.feature-section .nav-pills > li > figure {
  margin-bottom: 24px;
}

.feature-section .nav-pills > li > :last-child > :last-child {
  margin-bottom: 0;
}


.feature-section a[data-toggle=collapse]:not(.collapsed):before {
    border-right: 3px solid #fff;
    content: '';
    display: block;
    height: 15px;
    margin-top: -7px;
    margin-right: 30px;
    position: absolute;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 10px;
    top: 50%;
    width: 0;
}

.feature-section a.collapsed:before, .feature-section a.collapsed:after {
    border-right: 3px solid;
    content: '';
    display: block;
    height: 15px;
    margin-top: -7px;
    margin-right: 30px;
    position: absolute;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 10px;
    top: 50%;
    width: 0;
}

.feature-section a.collapsed:after {
    margin-top: -7px;
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}





/*                                  FAQ (faq-1)                                 */
/* ============================================================================ */



ul.component__faq h2 {
	font-size: 20px;
	line-height: 30px;
	padding: 0;
}

ul.component__faq .component__faq_answer, ul.component__faq .component__faq_question {
	margin-left: 30px;
}

ul.component__faq {
	list-style: none;
	position: relative;
}

ul.component__faq > li {
	padding: 15px 0 !important; /* Måste skriva över regler från utanför denna css */
	position: relative;
}


/* ingen margin på sista li */
ul.component__faq > :last-child {
	margin-bottom: 0;
}

ul.component__faq .component__faq_answer > :last-child {
	margin-bottom: 0;
}

ul.component__faq .component__faq_answer {
/*	margin-bottom: 36px; */
}



/* Stil av pilar */
ul.component__faq > li i:before,
ul.component__faq > li i:after  {
	content: "";
	position: absolute;
	width: 3px;
	height: 10px;
	border-radius: 2px;

}


/* position av de 2 strecken så de blir en pil */
ul.component__faq li input[type=checkbox]:checked ~ i:before { transform: translate(0, 3px) rotate(45deg); background-color: #6C7378;	}
ul.component__faq li input[type=checkbox]:checked ~ i:after { transform: translate(0, -3px) rotate(-45deg); background-color: #6C7378;	 }

/* utfälld pil */
ul.component__faq li input[type=checkbox] ~ i:before { transform: translate(3px, 0) rotate(45deg); 	background-color: #aa2337;  }
ul.component__faq li input[type=checkbox] ~ i:after { transform: translate(-3px, 0) rotate(-45deg); background-color: #aa2337;	 }

/* position av pil */
ul.component__faq > li i {
	position: absolute;
	left: 6px;
	transform: translate(0, 10px);
}

/* gör checkboxen till hela fältet så man alltid trycker på den */
ul.component__faq > li input[type=checkbox] {	position: absolute; cursor: pointer; height: 100%; max-height: 60px; width:100%;	z-index: 1; opacity:0; top: 0; }


/* Ihopfällt svar */
ul.component__faq > li input[type=checkbox]:checked ~ .component__faq_answer {
	padding: 0rem;
	margin-top: 0;
	max-height: 0;
	display: none;
	transform: translate(0, 50%);
	margin-bottom: 0;
}

/* Utfällt svar */
ul.component__faq > li input[type=checkbox] ~ .component__faq_answer {
	display: block;
}

/* Utfälld fråga */
ul.component__faq li input[type=checkbox] ~ .component__faq_question {
	color:#aa2337;
	margin-bottom: 18px;
}

/* Ihopfälld fråga */
ul.component__faq > li input[type=checkbox]:checked ~ .component__faq_question {
	background: none;
	color:#212B35;
	margin-bottom: 0;
}

ul.component__faq li {
}


/* Hover */
ul.component__faq > li:hover input[type=checkbox]:checked ~ .component__faq_question {
	color: #aa2337;
}


ul.component__faq > li:hover input[type=checkbox]:checked ~ i:before,
ul.component__faq > li:hover input[type=checkbox]:checked ~ i:after {
	background-color: #aa2337;
}



/* FIX för edit-mode */
.edit-mode ul.component__faq li input[type=checkbox] {	width: 50px; left: -30px; right:auto;}

@media (max-width: 767px) {
	ul.component__faq h2 {
		font-size: 16px;
		line-height: 24px;
		padding: 0;
	}
	ul.component__faq li i {
		position: absolute;
		left: 0px;
		transform: translate(0, 7px);
	}

	ul.component__faq .component__faq_answer, ul.component__faq .component__faq_question {
		margin-left: 18px;
	}

	/* FIX för edit-mode */
	.edit-mode ul.component__faq li input[type=checkbox] {	width: 40px; left: -30px; }

}


/*                             Dokument (documents-1)                           */
/* ============================================================================ */


.documents-1 figure {
	text-align: center;
}

.documents-1 .row > div:first-child {
	width: 66.666666%;
	float: left;
	padding-right: 120px;
}

/* Lite mindre mellanrum */
@media (max-width: 1250px) {

	.documents-1 .row > div:first-child {
		padding-right: calc(120px /2);
	}

}

.documents-1 .row div:first-child > ul li {
    margin-bottom: 12px ;
    position: relative;
}

.documents-1  .icon {
    padding-right: 12px;
}

.documents-1 .row > div:last-child {
	width: 33.333333%;
	float: left;
}

.documents-1 .row > div:last-child figure img { margin-bottom: 24px; }

.documents-1 .file-extension {
	color: #6C7378;
}

@media (max-width: 767px) {

	.documents-1 .row > div:first-child {
		width: 100%;
		float: left;
		margin-bottom: 36px;
		padding-right: 0;
	}

	.documents-1 .row > div:last-child {
		width: 100%;
		float: left;
	}
}




/*                            Formulär (form-section)                           */
/* ============================================================================ */



/* Knapp */
.form-row.form-row-send { margin: 0; }
.btn-form-send { width: auto; }

@media (max-width: 767px) { .btn-form-send { width: 100%; } }




/*                                     Footers                                  */
/* ============================================================================ */


.page-footer a:hover {
	color: #aa2337;
}

.page-footer ul.list-unstyled {
	list-style: none;
}

.page-footer-3 ul li a, .page-footer-social-media ul li a, .page-footer-1 ul li a{
	color: #212B35;
}


/* Vit färg på svart bg */
.page-footer {
	background-color: #000;
}

.page-footer ul li > a,
.page-footer a,
.page-footer div,
.page-footer p {
	color: #fff;
}



/*                       Footer 5 kolumner (page-footer-1)                      */
/* ---------------------------------------------------------------------------- */


.page-footer-1 .footer-menu {
	width: unset;
	float: none;
	margin: -18px;
	margin-bottom: 24px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}

.page-footer-1 .footer-last {
    display: block;
}


.page-footer-1 .footer-column {
	float: left;
	padding: 18px;
    width: 20%;
}

.page-footer-1 .header {
	margin-bottom: 30px;
}

.page-footer-1 .footer-menu li {
	margin-bottom: 12px;
}


/* Mellansteg som har 3 kolumner med 2 under
@media (max-width: 1409px) {
	.page-footer-1 .footer-column {
		width: 33.33333333%;
		text-align: center;
	}
} */

@media (max-width: 1023px) {
	.page-footer-1 .footer-column {
		width: 50%;
		text-align: center;
	}
}

@media (max-width: 767px) {

	.page-footer-1 .footer-column {
		width: 100%;
		text-align: center;
	}

}


/*                  Footer 3 kolumner och bild (page-footer-3)                  */
/* ---------------------------------------------------------------------------- */

.page-footer-3 .footer-menu {
	width: unset;
	float: none;
	margin: -18px;
	margin-bottom: 24px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}

.page-footer-3 .footer-img {
	margin-bottom: 36px;
	text-align: center;
}

.page-footer-3 .footer-last {
    display: block;
}

@media (max-width: 963px) { .page-footer-3 .footer-last  { width: 100%;} }

.page-footer-3 .footer-column {
	float: left;
	padding: 18px;
    width: 33.33333333%;
}

.page-footer-3 .header {
	margin-bottom: 30px;
}

.page-footer-3 .footer-menu li {
	margin-bottom: 12px;
}

@media (max-width: 767px) {

	.page-footer-3 .footer-column {
		text-align: center;
	}

}


@media (max-width: 875px) {

	.page-footer-3 .footer-column {
		width: 100%;
		text-align: center;
	}

}


/*            Footer logotyp, 4 kolumner och 5 ikoner (page-footer-social-media)           */
/* ---------------------------------------------------------------------------- */


/* ------ Logotypen ------ */
.page-footer-social-media .container > .row > div:first-child {
	width: 33.333333%;
	float: left;
}

.page-footer-social-media .container > .row > div:first-child img {
	max-width: 250px;
	max-height: 96px;
	width: auto;
}

/* ------ Allt annat ------ */

/* Wrapper för meny, copyright och ikoner */
.page-footer-social-media .container > .row > div:last-child {
	width: 66.666666%;
	float: left;
}

/* Wrapper för bara 4 menykolumner */
.page-footer-social-media .container > .row > div:last-child > div:first-child {
	margin: -18px;
	margin-bottom: 24px;
}

/* Wrapper som innehåller 2 menykolumner */
.page-footer-social-media .container > .row > div:last-child > .row.footer-1 > div {
	width: 50%;
	float: left;
}

/* Div som innehåller en kolumn med menyval */
.page-footer-social-media .container > .row > div:last-child > .row > div > .row > div {
	width: 50%;
	float: left;
	padding: 18px;
}

.page-footer-social-media .container > .row > div:last-child > .row > div > .row > div .header {
	margin-bottom: 30px;
}

.page-footer-social-media .container > .row > div:last-child > .row > div > .row > div li {
	margin-bottom: 12px;
}


/* Copyright-text */
.page-footer-social-media .footer-2 > div:first-child {
	width: 50%;
	float: left;
	padding-right: 24px;
}

/* Ikoner */
.page-footer-social-media .footer-2 > div:last-child {
	width: 50%;
	text-align: left;
	float: left;
}

.page-footer-social-media .footer-2 > div:last-child a {
	color: #6C7378;
}

.page-footer-social-media .footer-2 > div:last-child a:hover {
	color: #aa2337;
}


.page-footer-social-media.wap-library-coreBootstrap3 .card-item .wap-icon {
    text-align: center;
}
.page-footer-social-media .footer-2 > div:last-child .fa {
    font-size: 30px;
	width: 30px;
	margin-bottom: 24px;
	text-align: center;
}

.page-footer-social-media .footer-2 > div:last-child .card-container {
    margin-bottom: -24px;
	display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.page-footer-social-media .footer-2 > div:last-child .card-item {
	flex: 0;
}

.page-footer-social-media .card-item { padding: 0 12px !important;} /* Important måste finns för att skriva över inline-css */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.page-footer-social-media .card-item { padding: 0 24px !important;}}


@media (max-width: 1409px) {

	/* ------ Logotypen ------ */
	.page-footer-social-media .container > .row > div:first-child {
		width: 100%;
		float: left;
		margin-bottom: 64px;
		text-align: center;
	}

	/* Wrapper för meny, copyright och ikoner */
	.page-footer-social-media .container > .row > div:last-child {
		width: 100%;
		float: left;
	}
}


@media (max-width: 1023px) {

	/* ------ Logotypen ------ */
	.page-footer-social-media .container > .row > div:first-child {
		width: 100%;
		float: left;
		margin-bottom: 64px;
		text-align: center;
	}
	/* Wrapper som innehåller 2 menykolumner */
	.page-footer-social-media .container > .row > div:last-child > .row.footer-1 > div {
		width: 100%;
		float: left;
	}

	/* Div som innehåller en kolumn med menyval */
	.page-footer-social-media .container > .row > div:last-child > .row > div > .row > div {
		text-align: center;
	}

	/* Wrapper för meny, copyright och ikoner */
	.page-footer-social-media .container > .row > div:last-child {
		width: 100%;
		float: left;
	}

	/* Copyright-text */
	.page-footer-social-media .footer-2 > div:first-child {
		width: 100%;
		float: left;
		padding-right: 0;
		text-align: center;
		margin-bottom: 36px;
	}

	/* Ikoner */
	.page-footer-social-media .footer-2 > div:last-child {
		width: 100%;
		text-align: center;
		float: left;
	}

	.page-footer-social-media .footer-2 > div:last-child .card-container {
		justify-content: center;
	}

}


@media (max-width: 767px) {

	/* Div som innehåller en kolumn med menyval */
	.page-footer-social-media .container > .row > div:last-child > .row > div > .row > div {
		width: 100%;
	}

}


/*                           Frikod (Anpassad för google maps)                  */
/* ============================================================================ */

.contentFrikod {
  position: relative;
  height: 650px;
  width: 100%;
  padding-bottom: 50%;
}

.contentFrikod iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/*                                     Blogg                                    */
/* ============================================================================ */

.blogg .main  {
	width: calc(75% - 120px);
	float: left;
}

/* Minskar mellanrummet i något mindre desktop */
@media (max-width: 1250px) {.blogg .main {width: calc(75% - (120px / 2));}}

.blogg .side {
	width: 25%;
	float: right;
}


@media (max-width: 1023px) {
	.blogg .main,
	.blogg .side {width: 100%;}
	.blogg .main {margin-bottom:0px;}
}

.blogg .btn {
  width: 100%;
}

.blog-post {
  margin-bottom: 96px;
}

/* Blog post header */

.blog-post-header {
    margin-bottom: 48px;
}

.blogg .blog-post-header a {
  color: #212B35;
}

.blog-post-author,
.blog-post-date,
.blog-post-tags {
  display: inline-block;
  margin-right: 24px;
}


.blog-post-tags .blog-post-tag {
  margin-right: 12px;
} 


/* blog post */

.blog-post-image {
    margin-bottom: 36px;
}

.blogg .blog-post-text > :last-child {
	margin-bottom: 0 !important;
}

/* Blog side */

.blogg .side {
    padding: 36px;
}

.blog-side-post {
  margin-bottom: 24px;
}

.blog-side-post span {
  display: block;
}

.blogg .side a {
    font-weight: 700;
}

.blogg .side {
    position: relative;
    background-color: #FFF;
    min-height: 175px;
    min-width: 200px;
    border-radius: 0px;
}

.blogg .side aside > :last-child {
	margin-bottom: 0 !important;
}


.blogg .image {
    text-align: left;
}


/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                                     PRINT                                    */
/*                         CSS från bootstrap för print                         */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */


@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}






/* ============================================================================ */
/* ============================================================================ */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/*                            SPECIFIKA WEBBLÄSARE                              */
/*                                                                              */
/*                                                                              */
/*                                                                              */
/* ============================================================================ */
/* ============================================================================ */


/* INTERNET EXPLORER */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .cta-1 .container .row > div,
  .cta-2 .container .row > div,
  .body-text-9 .container .row > div,
  .body-text-10 .container .row > div {
      height: 100%;
  }

section > .wap-media-bg .wap-media-bg-frame img, 
section > .wap-media-bg .wap-media-bg-frame video {
    max-height: none !important;
}
  
  .wap-copyright img, .wap-copyright video {
    max-height: 100%;
  }

  .deliverable-3 th > div {
    min-height: auto;
  }
  .card-container .card-item .card .figure {
    overflow: hidden;
  }

  .deliverable-3 th > div {
    overflow: hidden;
  }

  .atf-8 .text,
  .atf-8 .image {
    min-width: 100px; 
  }

 a:hover {
  text-decoration: none;
  }

/*
  .btn:hover::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	  border-radius: 0px;
    background-color: rgba(0, 0, 0, .24);
  }
  
  */
  
  /* Headers */
	.navbar-collapse { width: 100%;}	
  
}

/* EDGE */

@supports (-ms-ime-align: auto) {

section > .wap-media-bg .wap-media-bg-frame img, 
section > .wap-media-bg .wap-media-bg-frame video {
    max-height: none !important;
}
  
  .wap-copyright img, .wap-copyright video {
    max-height: 100% !important;
  }

.deliverable-3 th > div {
    min-height: auto;
  }
  .card-container .card-item .card .figure {
    overflow: hidden;
  }

  .deliverable-3 th > div {
    overflow: hidden;
  }
}