/*--------------------------------------------------------------
	Media
--------------------------------------------------------------*/

.background-image {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
	position: relative;
}

.transparent-background {
	background-color: transparent !important;
}

img.tiny,
svg.tiny,
img.small,
svg.small,
img.medium,
svg.medium,
img.large,
svg.large {
	width: 100%;
}

img.tiny,
svg.tiny {
	max-width: 50px;
}

img.small,
svg.small {
	max-width: 100px;
}

img.medium,
svg.medium {
	max-width: 200px;
}

@media only screen and (min-width: 600px) {
	img.medium,
	svg.medium {
		max-width: 250px;
	}

	img.large,
	svg.large {
		max-width: 600px;
	}
}

i.material-icons.tiny {
	font-size: 25px;
	width: 25px;
	position: relative;
	bottom: -5px;
}

i.material-icons.small {
	font-size: 50px;
	position: relative;
}

i.material-icons.medium {
	font-size: 75px;
	position: relative;
}

i.material-icons.large {
	font-size: 150px;
	position: relative;
}

.tiny-round-image {
	height: 100px;
	width: 100px;
	border-radius: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
}

.small-round-image {
	height: 150px;
	width: 150px;
	border-radius: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
}

.medium-round-image {
	height: 200px;
	width: 200px;
	border-radius: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
}

.large-round-image {
	height: 400px;
	width: 400px;
	border-radius: 100%;
	display: block;
	background-size: cover;
	background-position: center center;
}




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


/*
.height-100 {
	height: 100%;
}

.width-100 {
	width: 100%;
}
*/

/*.min-height-300 {
	min-height: 300px;
}
*/
/*
.position-absolute {
	position: absolute;
}*/

/*.absolute-100-100 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.expand {
	height: 100%;
}
*/




/*--------------------------------------------------------------
	Layout - height and width
--------------------------------------------------------------*/

.narrow {
	max-width: 768px;
	margin: auto;
}

.fullscreen {
	width: 100%;
	min-height: 100vh;
}

.min-height-75vh {
	width: 100%;
	min-height: 75vh;
}

.strict-fullscreen {
	width: 100%;
	height: 100vh;
}

.height-100 {
	height: 100% !important;
}

.height-100vh {
	height: 100vh !important;
}

.min-height-100 {
	min-height: 100% !important;
}

.min-height-100vh {
	min-height: 100vh !important;
}

.width-100 {
	width: 100% !important;
}

.width-100vh {
	width: 100vh !important;
}

.min-height-160 {
	min-height: 160px !important;
}

.min-height-320 {
	min-height: 320px !important;
}

.min-height-640 {
	min-height: 640px !important;
}

@media only screen and (min-width: 600px) {
	.narrow-tablet {
		max-width: 768px;
		margin: auto;
	}

	.fullscreen-tablet {
		width: 100%;
		min-height: 100vh;
	}

	.strict-fullscreen-tablet {
		width: 100%;
		height: 100vh;
	}

	.height-100-tablet {
		height: 100% !important;
	}

	.height-100vh-tablet {
		height: 100vh !important;
	}

	.min-height-100-tablet {
		min-height: 100% !important;
	}

	.min-height-100vh-tablet {
		min-height: 100vh !important;
	}

	.width-100-tablet {
		width: 100% !important;
	}

	.width-100vh-tablet {
		width: 100vh !important;
	}

	.min-height-160-tablet {
		min-height: 160px !important;
	}

	.min-height-320-tablet {
		min-height: 320px !important;
	}

	.min-height-640-tablet {
		min-height: 640px !important;
	}
}

@media only screen and (min-width: 1024px) {
	.narrow-desktop {
		max-width: 768px;
		margin: auto;
	}

	.fullscreen-desktop {
		width: 100%;
		min-height: 100vh;
	}

	.strict-fullscreen-desktop {
		width: 100%;
		height: 100vh;
	}

	.height-100-desktop {
		height: 100% !important;
	}

	.height-100vh-desktop {
		height: 100vh !important;
	}

	.min-height-100-desktop {
		min-height: 100% !important;
	}

	.min-height-100vh-desktop {
		min-height: 100vh !important;
	}

	.width-100-desktop {
		width: 100% !important;
	}

	.width-100vh-desktop {
		width: 100vh !important;
	}

	.min-height-160-desktop {
		min-height: 160px !important;
	}

	.min-height-320-desktop {
		min-height: 320px !important;
	}

	.min-height-640-desktop {
		min-height: 640px !important;
	}
}

@media only screen and (min-width: 1366px) {
	.narrow-bigdesktop {
		max-width: 768px;
		margin: auto;
	}

	.fullscreen-bigdesktop {
		width: 100%;
		min-height: 100vh;
	}

	.strict-fullscreen-bigdesktop {
		width: 100%;
		height: 100vh;
	}

	.height-100-bigdesktop {
		height: 100% !important;
	}

	.height-100vh-bigdesktop {
		height: 100vh !important;
	}

	.min-height-100-bigdesktop {
		min-height: 100% !important;
	}

	.min-height-100vh-bigdesktop {
		min-height: 100vh !important;
	}

	.width-100-bigdesktop {
		width: 100% !important;
	}

	.width-100vh-bigdesktop {
		width: 100vh !important;
	}

	.min-height-160-bigdesktop {
		min-height: 160px !important;
	}

	.min-height-320-bigdesktop {
		min-height: 320px !important;
	}

	.min-height-640-bigdesktop {
		min-height: 640px !important;
	}
}

@media only screen and (max-width: 599px) {
	.narrow-mobile {
		max-width: 768px;
		margin: auto;
	}

	.fullscreen-mobile {
		width: 100%;
		min-height: 100vh;
	}

	.strict-fullscreen-mobile {
		width: 100%;
		height: 100vh;
	}

	.height-100-mobile {
		height: 100% !important;
	}

	.height-100vh-mobile {
		height: 100vh !important;
	}

	.min-height-100-mobile {
		min-height: 100% !important;
	}

	.min-height-100vh-mobile {
		min-height: 100vh !important;
	}

	.width-100-mobile {
		width: 100% !important;
	}

	.width-100vh-mobile {
		width: 100vh !important;
	}

	.min-height-160-mobile {
		min-height: 160px !important;
	}

	.min-height-320-mobile {
		min-height: 320px !important;
	}

	.min-height-640-mobile {
		min-height: 640px !important;
	}
}




/*--------------------------------------------------------------
	Layout - position
--------------------------------------------------------------*/

.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important; 
}

@media only screen and (min-width: 600px) {
	.position-relative-tablet {
		position: relative !important;
	}

	.position-absolute-tablet {
		position: absolute !important; 
	}	
}

@media only screen and (min-width: 1024px) {
	.position-relative-desktop {
		position: relative !important;
	}

	.position-absolute-desktop {
		position: absolute !important; 
	}	
}

@media only screen and (min-width: 1366px) {
	.position-relative-bigdesktop {
		position: relative !important;
	}

	.position-absolute-bigdesktop {
		position: absolute !important; 
	}	
}

@media only screen and (max-width: 599px) {
	.position-relative-mobile {
		position: relative !important;
	}

	.position-absolute-mobile {
		position: absolute !important; 
	}	
}




/*--------------------------------------------------------------
	Layout - border, border radius
--------------------------------------------------------------*/

.small-radius {
	border-radius: 10px;
}

.big-radius {
	border-radius: 40px;
}

@media only screen and (min-width: 600px) {
	.small-radius {
		border-radius: 20px;
	}

	.big-radius {
		border-radius: 80px;
	}
}

.small-border {
	border: solid 2px;
}

.big-border {
	border: solid 5px;
}




/*--------------------------------------------------------------
	Layout - box
--------------------------------------------------------------*/

.small-box,
.big-box {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	width: 100%;
	align-items: flex-start;
}

.small-box {
	padding: 10px 10px 0 10px;
}

.big-box {
	padding: 20px 20px 0 20px;
}

.full .small-box,
.full .big-box {
	margin-bottom: 0;
}

@media only screen and (min-width: 600px) {
	.small-box {
		padding: 20px 20px 0 20px;
	}

	.big-box {
		padding: 40px 40px 20px 40px;
	}
}




/*--------------------------------------------------------------
	Layout - order
--------------------------------------------------------------*/

.order-1 {
	order: 1;
}

.order-2 {
	order: 2;
}

.order-3 {
	order: 3;
}

.order-4 {
	order: 4;
}

.order-5 {
	order: 5;
}

.order-6 {
	order: 6;
}

.order-7 {
	order: 7;
}

.order-8 {
	order: 8;
}

@media only screen and (min-width: 600px) {
	.order-1-tablet {
		order: 1;
	}

	.order-2-tablet {
		order: 2;
	}

	.order-3-tablet {
		order: 3;
	}

	.order-4-tablet {
		order: 4;
	}

	.order-5-tablet {
		order: 5;
	}

	.order-6-tablet {
		order: 6;
	}

	.order-7-tablet {
		order: 7;
	}

	.order-8-tablet {
		order: 8;
	}
}

@media only screen and (min-width: 1024px) {
	.order-1-desktop {
		order: 1;
	}

	.order-2-desktop {
		order: 2;
	}

	.order-3-desktop {
		order: 3;
	}

	.order-4-desktop {
		order: 4;
	}

	.order-5-desktop {
		order: 5;
	}

	.order-6-desktop {
		order: 6;
	}

	.order-7-desktop {
		order: 7;
	}

	.order-8-desktop {
		order: 8;
	}
}

@media only screen and (min-width: 1366px) {
	.order-1-bigdesktop {
		order: 1;
	}

	.order-2-bigdesktop {
		order: 2;
	}

	.order-3-bigdesktop {
		order: 3;
	}

	.order-4-bigdesktop {
		order: 4;
	}

	.order-5-bigdesktop {
		order: 5;
	}

	.order-6-bigdesktop {
		order: 6;
	}

	.order-7-bigdesktop {
		order: 7;
	}

	.order-8-bigdesktop {
		order: 8;
	}
}

@media only screen and (max-width: 599px) {
	.order-1-mobile {
		order: 1;
	}

	.order-2-mobile {
		order: 2;
	}

	.order-3-mobile {
		order: 3;
	}

	.order-4-mobile {
		order: 4;
	}

	.order-5-mobile {
		order: 5;
	}

	.order-6-mobile {
		order: 6;
	}

	.order-7-mobile {
		order: 7;
	}

	.order-8-mobile {
		order: 8;
	}
}




/*--------------------------------------------------------------
	Typography
--------------------------------------------------------------*/

.column-count-2 {
	column-count: 2;
	column-gap: 20px
}

.column-count-3 {
	column-count: 3;
	column-gap: 20px
}

.column-count-4 {
	column-count: 4;
	column-gap: 20px
}

@media only screen and (min-width: 600px) {
	.column-count-2-tablet {
		column-count: 2;
		column-gap: 40px
	}

	.column-count-3-tablet {
		column-count: 3;
		column-gap: 40px
	}

	.column-count-4-tablet {
		column-count: 4;
		column-gap: 40px
	}
}

@media only screen and (min-width: 1024px) {
	.column-count-2-desktop {
		column-count: 2;
		column-gap: 40px
	}

	.column-count-3-desktop {
		column-count: 3;
		column-gap: 40px
	}

	.column-count-4-desktop {
		column-count: 4;
		column-gap: 40px
	}
}

@media only screen and (min-width: 1366px) {
	.column-count-2-bigdesktop {
		column-count: 2;
		column-gap: 40px
	}

	.column-count-3-bigdesktop {
		column-count: 3;
		column-gap: 40px
	}

	.column-count-4-bigdesktop {
		column-count: 4;
		column-gap: 40px
	}
}

.justify-text {
	text-align: justify;
    text-justify: inter-word;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
	font-family: 'Lora', serif;
}

.underline {
	text-decoration: underline; 
}

.capitalize {
	text-transform: capitalize;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.thin-text {
	font-weight: 200;
}

.small-text {
	font-size: 14px;
}

.big-text {
	font-size: 24px;
}

@media only screen and (min-width: 600px) {
	.big-text {
		font-size: 36px;
	}
}

.break-word {
	overflow-wrap: break-word;
 	word-wrap: break-word;
 	word-break: break-word;

 	/* Lägger till bindestreck (stöds ej i chrome) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.nowrap {
	white-space: nowrap;
}

.text-align-left {
	text-align: left !important;
}

.text-align-right {
	text-align: right !important;
}

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

@media only screen and (min-width: 600px) {
	.text-align-left-tablet {
		text-align: left !important;
	}	

	.text-align-right-tablet {
		text-align: right !important;
	}

	.text-align-center-tablet,
	.text-align-center-tablet a {
		text-align: center !important;
	}
}

@media only screen and (min-width: 1024px) {
	.text-align-left-desktop {
		text-align: left !important;
	}

	.text-align-right-desktop {
		text-align: right !important;
	}

	.text-align-center-desktop,
	.text-align-center-desktop a {
		text-align: center !important;
	}	
}

@media only screen and (min-width: 1366px) {
	.text-align-left-bigdesktop {
		text-align: left !important;
	}

	.text-align-right-bigdesktop {
		text-align: right !important;
	}

	.text-align-center-bigdesktop,
	.text-align-center-bigdesktop a {
		text-align: center !important;
	}	
}

@media only screen and (max-width: 599px) {
	.text-align-left-mobile {
		text-align: left !important;
	}

	.text-align-right-mobile {
		text-align: right !important;
	}

	.text-align-center-mobile,
	.text-align-center-mobile a {
		text-align: center !important;
	}	
}




/*--------------------------------------------------------------
	Effects
--------------------------------------------------------------*/

.dark-filter,
.light-filter {
	position: relative;
}

.dark-filter::after,
.light-filter::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 0;
}

.filter-child {
	position: relative;
	z-index: 1;
}

.box-shadow {
	box-shadow: 0 4px 40px rgba(0, 0, 0, .1);
}




/*--------------------------------------------------------------
	Margins and paddings
--------------------------------------------------------------*/

.no-margin {
	margin: 0 !important;
}

.no-margin-top {
	margin-top: 0 !important;
}

.no-margin-right {
	margin-right: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.no-margin-left {
	margin-left: 0 !important;
}

.no-padding {
	padding: 0 !important;
}

.no-padding-top {
	padding-top: 0 !important;
}

.no-padding-right {
	padding-right: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

.no-padding-left {
	padding-left: 0 !important;
}

@media only screen and (min-width: 600px) {
	.no-margin-tablet {
		margin: 0 !important;
	}

	.no-margin-top-tablet {
		margin-top: 0 !important;
	}

	.no-margin-right-tablet {
		margin-right: 0 !important;
	}

	.no-margin-bottom-tablet {
		margin-bottom: 0 !important;
	}

	.no-margin-left-tablet {
		margin-left: 0 !important;
	}

	.no-padding-tablet {
		padding: 0 !important;
	}

	.no-padding-top-tablet {
		padding-top: 0 !important;
	}

	.no-padding-right-tablet {
		padding-right: 0 !important;
	}

	.no-padding-bottom-tablet {
		padding-bottom: 0 !important;
	}

	.no-padding-left-tablet {
		padding-left: 0 !important;
	}
}

@media only screen and (min-width: 1024px) {
	.no-margin-desktop {
		margin: 0 !important;
	}

	.no-margin-top-desktop {
		margin-top: 0 !important;
	}

	.no-margin-right-desktop {
		margin-right: 0 !important;
	}

	.no-margin-bottom-desktop {
		margin-bottom: 0 !important;
	}

	.no-margin-left-desktop {
		margin-left: 0 !important;
	}

	.no-padding-desktop {
		padding: 0 !important;
	}

	.no-padding-top-desktop {
		padding-top: 0 !important;
	}

	.no-padding-right-desktop {
		padding-right: 0 !important;
	}

	.no-padding-bottom-desktop {
		padding-bottom: 0 !important;
	}

	.no-padding-left-desktop {
		padding-left: 0 !important;
	}
}




/*--------------------------------------------------------------
	Flexbox
--------------------------------------------------------------*/

.flex {
	display: flex;
	flex-wrap: wrap;
}

/* Dessa tre används om du tex har två .one-full flex kolumner ligger i en .one-half och vill att tex den nedre .one-full ska ta upp så mycket plats som är kvar så att båda .one-half blir lika höga. Sjukt smidigt!!! parent ska ha .flex-column och den child som ska fylla ut ska ha .flex-auto. Se kontakt-template som exempel */
.flex-column {
	flex-direction: column;
}

.flex-none {
	flex: none;
}

.flex-auto {
	flex: auto;
} 

.justify-content-start {
	justify-content: flex-start !important;
}

.justify-content-end {
	justify-content: flex-end !important;
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-around {
	justify-content: space-around !important;
}

.justify-content-between {
	justify-content: space-between !important;
}

.align-items-start {
	align-items: flex-start !important;
}

.align-items-end {
	align-items: flex-end !important;
}

.align-items-center {
	align-items: center !important;
}

.align-items-stretch {
	align-items: stretch !important;
}

.align-items-baseline {
	align-items: baseline !important;
}

@media only screen and (min-width: 600px) {

	.justify-content-start-tablet {
		justify-content: flex-start !important;
	}

	.justify-content-end-tablet {
		justify-content: flex-end !important;
	}

	.justify-content-center-tablet {
		justify-content: center !important;
	}

	.justify-content-around-tablet {
		justify-content: space-around !important;
	}

	.justify-content-between-tablet {
		justify-content: space-between !important;
	}

	.align-items-start-tablet {
		align-items: flex-start !important;
	}

	.align-items-end-tablet {
		align-items: flex-end !important;
	}

	.align-items-center-tablet {
		align-items: center !important;
	}

	.align-items-stretch-tablet {
		align-items: stretch !important;
	}	
}

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

	.justify-content-start-desktop {
		justify-content: flex-start !important;
	}

	.justify-content-end-desktop {
		justify-content: flex-end !important;
	}

	.justify-content-center-desktop {
		justify-content: center !important;
	}

	.justify-content-around-desktop {
		justify-content: space-around !important;
	}

	.justify-content-between-desktop {
		justify-content: space-between !important;
	}

	.align-items-start-desktop {
		align-items: flex-start !important;
	}

	.align-items-end-desktop {
		align-items: flex-end !important;
	}

	.align-items-center-desktop {
		align-items: center !important;
	}	

	.align-items-stretch-desktop {
		align-items: stretch !important;
	}
}




/*--------------------------------------------------------------
	Display
--------------------------------------------------------------*/

.mobile-only,
.visible-mobile {
	display: flex;
}

.hide-mobile,
.tablet-only,
.desktop-only,
.visible-tablet,
.visible-desktop {
	display: none;
}

@media only screen and (min-width: 600px) {
	.mobile-only {
		display: none;
	}

	.hide-mobile {
		display: flex;
	}

	.tablet-only {
		display: flex;
	}

	.visible-tablet {
		display: flex;
	}

	.hide-tablet {
		display: none;
	}
}

@media only screen and (min-width: 1024px) {
	.tablet-only {
		display: none;
	}

	.desktop-only {
		display: flex;
	}

	.visible-desktop {
		display: flex;
	}

	.hide-desktop {
		display: none;
	}
}