/*--------------------------------------------------------------
	Layout general
--------------------------------------------------------------*/

.main-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
	align-items: baseline;

	/* Dra bort höjden på sidfoten (står i negativa pixlar). Ser till så att sidfoten alltid hamnar längst ner även om main-content inte fyller höjden. */

	min-height: calc(100% - 352px);
}

.main-content > div {
	width: 100%;
}

.section,
.hero,
.pagetitle {
	width: 100%;
	/*height: auto;*/
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	position: relative;
	padding: 40px 0 0 0;
}

.section.first,
.hero.first,
.pagetitle.first {
	padding: 100px 0 0 0;
}

.child-menu.first {
	margin-top: 60px;
}

.section.same {
	padding: 0 0 0 0;
}

.section.fullscreen {
	min-height: 100vh;
	height: 1px; /* IE 11 måste ha någon form av height för att align items center ska fungera. */
}

@media only screen and (min-width: 1024px) {
	.section,
	.hero {
		padding: 80px 0 20px 0;
	}

	.pagetitle {
		padding: 40px 0 0 0;
	}

	.section.first,
	.hero.first {
		padding: 180px 0 40px 0;
	}

	.pagetitle.first {
		padding: 140px 0 0 0;
	}

	.child-menu.first {
		margin-top: 80px;
	}

	.section.same {
		padding: 0 0 40px 0;
	}	
}

/* En kolumn i en full ska inte ha sin default padding top och padding bottom i en hero, men den ska ha sin default padding på sidorna */
.hero .full > div {
	padding-top: 0;
	padding-bottom: 20px;
}

.arrow-down {
	display: none;
}

@media only screen and (min-width: 600px) {
	.arrow-down {
		display: flex;
	    position: absolute;
	    width: 100%;
	    bottom: 0;
	    left: 0;
	    cursor: pointer;
	    z-index: 4;
	    line-height: 1;
	    text-align: center;
	}

	.arrow-down:after {
		display: inline-flex;
		content: '\f107';
	    font-family: 'FontAwesome';
	    font-size: 72px;
	    width: 100%;
	    text-align: center;
	}	
}




/*--------------------------------------------------------------
	Grid
--------------------------------------------------------------*/

.grid,
.inner-grid,
.full,
.inner-full {
	width: 100%;
	/*height: 100%;*/
	position: relative;
	z-index: 2;
	margin: 0 auto;
	display: flex;
	/*flex-flow: row;*/
	flex-wrap: wrap;
	/*justify-content: flex-start;*/
	/*overflow: hidden;*/
}

.grid {
	max-width: 1400px;
}

.inner-grid {
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-right: -20px;
}

.full .inner-grid {
	margin-bottom: -20px;
}

@media only screen and (min-width: 600px) {
	.grid {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.one-full,
.one-half,
.one-half-tablet,
.one-half-desktop,
.one-half-bigdesktop,
.one-third,
.one-third-tablet,
.one-third-desktop,
.one-third-bigdesktop,
.one-fourth,
.one-fourth-tablet,
.one-fourth-desktop,
.one-fourth-bigdesktop,
.one-fifth,
.one-fifth-tablet,
.one-fifth-desktop,
.one-fifth-bigdesktop,
.one-sixth,
.one-sixth-tablet,
.one-sixth-desktop,
.one-sixth-bigdesktop,
.two-third,
.two-third-tablet,
.two-third-desktop,
.two-third-bigdesktop,
.three-fourth,
.three-fourth-tablet,
.three-fourth-desktop,
.three-fourth-bigdesktop {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.grid .one-full,
.grid .one-half,
.grid .one-half-tablet,
.grid .one-half-desktop,
.grid .one-half-bigdesktop,
.grid .one-third,
.grid .one-third-tablet,
.grid .one-third-desktop,
.grid .one-third-bigdesktop,
.grid .one-fourth,
.grid .one-fourth-tablet,
.grid .one-fourth-desktop,
.grid .one-fourth-bigdesktop,
.grid .one-fifth,
.grid .one-fifth-tablet,
.grid .one-fifth-desktop,
.grid .one-fifth-bigdesktop,
.grid .one-sixth,
.grid .one-sixth-tablet,
.grid .one-sixth-desktop,
.grid .one-sixth-bigdesktop,
.grid .two-third,
.grid .two-third-tablet,
.grid .two-third-desktop,
.grid .two-third-bigdesktop,
.grid .three-fourth,
.grid .three-fourth-tablet,
.grid .three-fourth-desktop,
.grid .three-fourth-bigdesktop,
.inner-grid .one-full,
.inner-grid .one-half,
.inner-grid .one-half-tablet,
.inner-grid .one-half-desktop,
.inner-grid .one-half-bigdesktop,
.inner-grid .one-third,
.inner-grid .one-third-tablet,
.inner-grid .one-third-desktop,
.inner-grid .one-third-bigdesktop,
.inner-grid .one-fourth,
.inner-grid .one-fourth-tablet,
.inner-grid .one-fourth-desktop,
.inner-grid .one-fourth-bigdesktop,
.inner-grid .one-fifth,
.inner-grid .one-fifth-tablet,
.inner-grid .one-fifth-desktop,
.inner-grid .one-fifth-bigdesktop,
.inner-grid .one-sixth,
.inner-grid .one-sixth-tablet,
.inner-grid .one-sixth-desktop,
.inner-grid .one-sixth-bigdesktop,
.inner-grid .two-third,
.inner-grid .two-third-tablet,
.inner-grid .two-third-desktop,
.inner-grid .two-third-bigdesktop,
.inner-grid .three-fourth,
.inner-grid .three-fourth-tablet,
.inner-grid .three-fourth-desktop,
.inner-grid .three-fourth-bigdesktop  {
	margin-bottom: 20px;
	padding: 0 20px;
}

.grid .one-full > div,
.grid .one-half > div,
.grid .one-half-tablet > div,
.grid .one-half-desktop > div,
.grid .one-half-bigdesktop > div,
.grid .one-third > div,
.grid .one-third-tablet > div,
.grid .one-third-desktop > div,
.grid .one-third-bigdesktop > div,
.grid .one-fourth > div,
.grid .one-fourth-tablet > div,
.grid .one-fourth-desktop > div,
.grid .one-fourth-bigdesktop > div,
.grid .one-fifth > div,
.grid .one-fifth-tablet > div,
.grid .one-fifth-desktop > div,
.grid .one-fifth-bigdesktop > div,
.grid .one-sixth > div,
.grid .one-sixth-tablet > div,
.grid .one-sixth-desktop > div,
.grid .one-sixth-bigdesktop > div,
.grid .two-third > div,
.grid .two-third-tablet > div,
.grid .two-third-desktop > div,
.grid .two-third-bigdesktop > div,
.grid .three-fourth > div,
.grid .three-fourth-tablet > div,
.grid .three-fourth-desktop > div,
.grid .three-fourth-bigdesktop > div,
.inner-grid .one-full > div,
.inner-grid .one-half > div,
.inner-grid .one-half-tablet > div,
.inner-grid .one-half-desktop > div,
.inner-grid .one-half-bigdesktop > div,
.inner-grid .one-third > div,
.inner-grid .one-third-tablet > div,
.inner-grid .one-third-desktop > div,
.inner-grid .one-third-bigdesktop > div,
.inner-grid .one-fourth > div,
.inner-grid .one-fourth-tablet > div,
.inner-grid .one-fourth-desktop > div,
.inner-grid .one-fourth-bigdesktop > div,
.inner-grid .one-fifth > div,
.inner-grid .one-fifth-tablet > div,
.inner-grid .one-fifth-desktop > div,
.inner-grid .one-fifth-bigdesktop > div,
.inner-grid .one-sixth > div,
.inner-grid .one-sixth-tablet > div,
.inner-grid .one-sixth-desktop > div,
.inner-grid .one-sixth-bigdesktop > div,
.inner-grid .two-third > div,
.inner-grid .two-third-tablet > div,
.inner-grid .two-third-desktop > div,
.inner-grid .two-third-bigdesktop > div,
.inner-grid .three-fourth > div,
.inner-grid .three-fourth-tablet > div,
.inner-grid .three-fourth-desktop > div,
.inner-grid .three-fourth-bigdesktop > div,
.full > .one-full > div,
.full > .one-half > div,
.full > .one-half-tablet > div,
.full > .one-half-desktop > div,
.full > .one-half-bigdesktop > div,
.full > .one-third > div,
.full > .one-third-tablet > div,
.full > .one-third-desktop > div,
.full > .one-third-bigdesktop > div,
.full > .one-fourth > div,
.full > .one-fourth-tablet > div,
.full > .one-fourth-desktop > div,
.full > .one-fourth-bigdesktop > div,
.full > .one-fifth > div,
.full > .one-fifth-tablet > div,
.full > .one-fifth-desktop > div,
.full > .one-fifth-bigdesktop > div,
.full > .one-sixth > div,
.full > .one-sixth-tablet > div,
.full > .one-sixth-desktop > div,
.full > .one-sixth-bigdesktop > div,
.full > .two-third > div,
.full > .two-third-tablet > div,
.full > .two-third-desktop > div,
.full > .two-third-bigdesktop > div,
.full > .three-fourth > div,
.full > .three-fourth-tablet > div,
.full > .three-fourth-desktop > div,
.full > .three-fourth-bigdesktop > div  {
	width: 100%;
	/*display: flex;*/
	/*flex-wrap: wrap;*/
	/*align-items: baseline;*/
}

.full > .one-full,
.full > .one-half,
.full > .one-half-tablet,
.full > .one-half-desktop,
.full > .one-half-bigdesktop,
.full > .one-third,
.full > .one-third-tablet,
.full > .one-third-desktop,
.full > .one-third-bigdesktop,
.full > .one-fourth,
.full > .one-fourth-tablet,
.full > .one-fourth-desktop,
.full > .one-fourth-bigdesktop,
.full > .one-fifth,
.full > .one-fifth-tablet,
.full > .one-fifth-desktop,
.full > .one-fifth-bigdesktop,
.full > .one-sixth,
.full > .one-sixth-tablet,
.full > .one-sixth-desktop,
.full > .one-sixth-bigdesktop,
.full > .two-third,
.full > .two-third-tablet,
.full > .two-third-desktop,
.full > .two-third-bigdesktop,
.full > .three-fourth,
.full > .three-fourth-tablet,
.full > .three-fourth-desktop,
.full > .three-fourth-bigdesktop  {
	padding: 20px;
	padding-top: 40px;
}

.one-full,
.one-half-tablet,
.one-half-desktop,
.one-half-bigdesktop,
.one-third-tablet,
.one-third-desktop,
.one-third-bigdesktop,
.one-fourth-desktop,
.one-fourth-bigdesktop,
.one-fifth-desktop,
.one-fifth-bigdesktop,
.one-sixth-desktop,
.one-sixth-bigdesktop,
.two-third-tablet,
.two-third-desktop,
.two-third-bigdesktop,
.three-fourth-tablet,
.three-fourth-desktop,
.three-fourth-bigdesktop {
	width: 100%;
}

.one-half,
.one-fourth-tablet,
.one-fifth-tablet {
	width: 50%;
}

.one-third,
.one-sixth-tablet {
	width: 33.33%;
}

.one-fourth {
	width: 25%;
}

.one-fifth {
	width: 20%;
}

.one-sixth {
	width: 16.66%;
}

.two-third {
	width: 66.66%;
}

.three-fourth {
	width: 75%;
}

@media only screen and (min-width: 600px) {
	.one-fourth-desktop {
		width: 50%;
	}

	.one-sixth-desktop {
		width: 33.33%;
	}

	.one-full-tablet {
		width: 100%;
	}

	.one-half-tablet {
		width: 50%;
	}

	.one-third-tablet {
		width: 33.33%;
	}

	.two-third-tablet {
		width: 66.66%;
	}

	.three-fourth-tablet {
		width: 75%;
	}

	.full > .one-full,
	.full > .one-half,
	.full > .one-half-tablet,
	.full > .one-half-desktop,
	.full > .one-half-bigdesktop,
	.full > .one-third,
	.full > .one-third-tablet,
	.full > .one-third-desktop,
	.full > .one-third-bigdesktop,
	.full > .one-fourth,
	.full > .one-fourth-tablet,
	.full > .one-fourth-desktop,
	.full > .one-fourth-bigdesktop,
	.full > .one-fifth,
	.full > .one-fifth-tablet,
	.full > .one-fifth-desktop,
	.full > .one-fifth-bigdesktop,
	.full > .one-sixth,
	.full > .one-sixth-tablet,
	.full > .one-sixth-desktop,
	.full > .one-sixth-bigdesktop,
	.full > .two-third,
	.full > .two-third-tablet,
	.full > .two-third-desktop,
	.full > .two-third-bigdesktop,
	.full > .three-fourth,
	.full > .three-fourth-tablet,
	.full > .three-fourth-desktop,
	.full > .three-fourth-bigdesktop  {
		padding: 40px;
		padding-top: 60px;
	}
}

@media only screen and (min-width: 1024px) {
	.one-half-desktop {
		width: 50%;
	}

	.one-third-desktop {
		width: 33.33%;
	}

	.one-fourth-desktop {
		width: 25%;
	}

	.one-fifth-desktop {
		width: 20%;
	}

	.one-sixth-desktop {
		width: 16.66%;
	}

	.two-third-desktop {
		width: 66.66%;
	}

	.three-fourth-desktop {
		width: 75%;
	}

	.full > .one-full,
	.full > .one-half,
	.full > .one-half-tablet,
	.full > .one-half-desktop,
	.full > .one-half-bigdesktop,
	.full > .one-third,
	.full > .one-third-tablet,
	.full > .one-third-desktop,
	.full > .one-third-bigdesktop,
	.full > .one-fourth,
	.full > .one-fourth-tablet,
	.full > .one-fourth-desktop,
	.full > .one-fourth-bigdesktop,
	.full > .two-third,
	.full > .two-third-tablet,
	.full > .two-third-desktop,
	.full > .two-third-bigdesktop,
	.full > .three-fourth,
	.full > .three-fourth-tablet,
	.full > .three-fourth-desktop,
	.full > .three-fourth-bigdesktop  {
		padding: 80px;
		padding-top: 100px;
	}

	.full > .one-fifth,
	.full > .one-fifth-tablet,
	.full > .one-fifth-desktop,
	.full > .one-fifth-bigdesktop,
	.full > .one-sixth,
	.full > .one-sixth-tablet,
	.full > .one-sixth-desktop,
	.full > .one-sixth-bigdesktop {
		padding: 40px;
		padding-top: 60px;
	}
}

@media only screen and (min-width: 1366px) {
	.one-half-bigdesktop {
		width: 50%;
	}

	.one-third-bigdesktop {
		width: 33.33%;
	}

	.one-fourth-bigdesktop {
		width: 25%;
	}

	.one-fifth-bigdesktop {
		width: 20%;
	}

	.one-sixth-bigdesktop {
		width: 16.66%;
	}

	.two-third-bigdesktop {
		width: 66.66%;
	}

	.three-fourth-bigdesktop {
		width: 75%;
	}
}

@media only screen and (min-width: 1920px) {
	.full > .one-full,
	.full > .one-half,
	.full > .one-half-tablet,
	.full > .one-half-desktop,
	.full > .one-half-bigdesktop,
	.full > .one-third,
	.full > .one-third-tablet,
	.full > .one-third-desktop,
	.full > .one-third-bigdesktop,
	.full > .one-fourth,
	.full > .one-fourth-tablet,
	.full > .one-fourth-desktop,
	.full > .one-fourth-bigdesktop,
	.full > .two-third,
	.full > .two-third-tablet,
	.full > .two-third-desktop,
	.full > .two-third-bigdesktop,
	.full > .three-fourth,
	.full > .three-fourth-tablet,
	.full > .three-fourth-desktop,
	.full > .three-fourth-bigdesktop  {
		padding: 80px;
		/*padding: 160px*/
		padding-top: 180px;
	}

	.full > .one-fifth,
	.full > .one-fifth-tablet,
	.full > .one-fifth-desktop,
	.full > .one-fifth-bigdesktop,
	.full > .one-sixth,
	.full > .one-sixth-tablet,
	.full > .one-sixth-desktop,
	.full > .one-sixth-bigdesktop {
		padding: 80px;
		padding-top: 100px;
	}
}

@media only screen and (min-width: 2560px) {
	.full > .one-full,
	.full > .one-half,
	.full > .one-half-tablet,
	.full > .one-half-desktop,
	.full > .one-half-bigdesktop,
	.full > .one-third,
	.full > .one-third-tablet,
	.full > .one-third-desktop,
	.full > .one-third-bigdesktop,
	.full > .one-fourth,
	.full > .one-fourth-tablet,
	.full > .one-fourth-desktop,
	.full > .one-fourth-bigdesktop,
	.full > .two-third,
	.full > .two-third-tablet,
	.full > .two-third-desktop,
	.full > .two-third-bigdesktop,
	.full > .three-fourth,
	.full > .three-fourth-tablet,
	.full > .three-fourth-desktop,
	.full > .three-fourth-bigdesktop  {
		padding: 240px;
		padding-top: 260px;
	}

	.full > .one-fifth,
	.full > .one-fifth-tablet,
	.full > .one-fifth-desktop,
	.full > .one-fifth-bigdesktop,
	.full > .one-sixth,
	.full > .one-sixth-tablet,
	.full > .one-sixth-desktop,
	.full > .one-sixth-bigdesktop {
		padding: 160px;
		padding-top: 180px;
	}
}