/* Global
–––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
	font-family: 'Arial Rounded MT Bold';
	src: url('../fonts/Arial-Rounded-Bold.eot');
	src: url('../fonts/Arial-Rounded-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/Arial-Rounded-Bold.woff') format('woff'),
	url('../fonts/Arial-Rounded-Bold.ttf')  format('truetype');
	font-weight: normal;
	font-style: normal; 

}



/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	font-size: 62.5%; }
	body {
		font-size: 1.6rem; 
		line-height: 1.5;
		font-family: Arial, sans-serif;
		color: #222222; 
		text-align: left;
		-webkit-font-smoothing: antialiased;
		font-synthesis: none;
		text-rendering: optimizeLegibility;
	}

	body.seafoam-overhaul { /* color: #425E5E; background-color: #D9E7E7; */ color: #597474; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1 { 
	font-size: clamp(3.5rem, 3vw, 7rem); 
	line-height: 1.3;
	font-family: 'Arial Rounded MT Bold', 'Outfit', Arial, sans-serif; ;
	margin: 4vw 0 1vw 0;
	font-weight: 600;
	letter-spacing: -0.1rem;
}
h2 { 
	font-size: clamp(2.5rem, 1.7vw, 4rem);
	line-height: 1.2;
	letter-spacing: 0rem;
	font-family: 'Arial Rounded MT Bold', 'Outfit', Arial, sans-serif; 
	font-weight: 600;
	margin: 3vw 0 3vw 0;
	letter-spacing: -0.04rem;

} 

p {
	font-size: clamp(1.7rem, 1.3vw, 2.4rem); /* 1.2vw blir som 16px */
	line-height: 1.5;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: #222222;
	transition: color 0.25s ease;
	-webkit-transition: color 0.25s ease;
	-moz-transition: color 0.25s ease;
	-o-transition: color 0.25s ease;
	text-decoration: underline;
}
a:hover {
	color: #4D6666;
}


/* structure
–––––––––––––––––––––––––––––––––––––––––––– */
.wrapper {
	margin: 2vw 20vw 10vw 20vw;
}
@media (max-width: 640px) { /*mobile */
	.wrapper {
		margin: 10vw 6vw 10vw 6vw;
	}
}

.hero { text-align: center; padding-bottom: 4vw; }
.hero img { margin-top: clamp(4rem, 2vw, 8rem); }
.hero h1 { 	
	font-size: clamp(2.8rem, 3vw, 6rem); 
	margin-top: -10vw;
	color: #597474;
}


/* import page
–––––––––––––––––––––––––––––––––––––––––––– */

.import {
	width: 50vw;
	text-align: center;
	margin: 10vw auto;
}

@media (max-width: 640px) { /*mobile */
	.import {
		width: 90%;
	}
}

.import .appicon {
	margin-bottom: clamp(5rem, 4vw, 10rem);
	width: clamp(15rem, 15vw, 80rem);
	height: clamp(15rem, 15vw, 80rem);
}

/* flippo carousel
–––––––––––––––––––––––––––––––––––––––––––– */

.carousel { 
	background-color: #fff;
}


.card { 
	border-radius: 2.5vw;
	margin: 1vw;
	padding: 2vw 2vw;
	color: #121212;
	font-size: clamp(1.2rem, 2vw, 3rem);
	/*font-size: min(max(20px, 40rem), 1.5vw); */
	line-height: 1.2;
	width: 12vw;
	height: 14vw;
	float: left;
	overflow: hidden;
	font-family: 'Arial Rounded MT Bold', 'Outfit', 'Urbanist', 'Varela Round', sans-serif;
	font-weight: 600;
}

.seafoam { background-color: #D9E7E7; color: #597474; }
.cream { background-color: #F9E4D5; color: #846C5C; }
.pig { background-color: #F2E1E5; color: #905366; }
.slate { background-color: #D9DFE7; color: #596774; }



/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
	display: inline-block;
	height: auto;
	width: auto;
	padding-top: clamp(1.5rem, 1vw, 3rem); 
	padding-bottom: clamp(1.5rem, 1vw, 3rem); 
	padding-right: clamp(6rem, 3vw, 10rem); 
	padding-left: clamp(6rem, 3vw, 10rem); 
	margin: 1rem; 
	color: #fff;
	text-align: center;
	font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
	font-size: clamp(1.6rem, 1.2vw, 3rem); 
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border-radius: clamp(1.6rem, 1.4vw, 4rem); 
	border: 0px solid #3C9650;
	cursor: pointer;
	box-sizing: border-box;
	transition: transform, color, background-color 0.25s ease;
	-webkit-transition: transform, color, background-color 0.25s ease;
	-moz-transition: transform, color, background-color 0.25s ease;
	-o-transition: transform, color, background-color 0.25s ease;
	background-color: #222222;
	vertical-align: middle;
}

.button:hover {
	color: #FFF;
	background-color: #597474;
}

.button:active {
	color: #FFF;
	background-color: #222;
	transform: scale(0.98);
}

.button img {
	margin-right: 2rem;
	vertical-align: middle;
	width: 24px;
	height: 24px;

}

@media (max-width: 640px) { /*mobile */
	.button {
		width: 100%;
		margin: 0 auto;
	}
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}