@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Lato:100,400|Roboto:100,400|Exo+2|Raleway:100,400|Montserrat:400, 700');


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
}

body{
	width: 800px;
	margin: 0 auto;
	font-family: 'Exo 2';
	min-height: 100vh;
}

b, strong{
	font-weight: 700 !important;
}

p{
	margin: 1.5em 0;
}

h1, h2, h3{
	font-family: 'Exo 2';
	color: #650000;
}

h1{
	margin: 0 0 1em 0;
}

a{
	color: #650000;
}

ul{
	list-style-position: inside;
}

table{
	overflow: auto !important;
}

.button{
  display: block;
  padding: 1em 2em;
  color: white;
  background-image: linear-gradient(#971926, #650000);
  background-color: #650000;
  text-decoration: none;
  margin: 0 auto;
  width: 120px;
  box-shadow: 0px 6px 0px 0px #a70000;
}

.button:active{
  position: relative;
  top: 1px;
  box-shadow: 0px 4px 0px 0px #a70000;
}

.sitewrapper{
	background-color: #fff8e7;
	border: 1px solid #650000;
}

.logo{
	display: block;
	width: 100%;
	height: 130px;
	background-image: url(images/header2.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.navigation{
	display: block;
	text-align: center;
	user-select: none;
	margin: 0.3em;
	cursor: default; !important;
}

.bestilling{
	display: block;
	text-align: center;
}

.navigation a, .bestilling a{
	display: inline-block;
	text-decoration: none;
	color: #650000;
	padding: 0.2em 0.8em;
	margin: 0.2em;
	border-style: double;
	transition: 0.3s;
	font-size: 0.8em;
}

.navigation a:first-child{
	margin-left: 0;
}

.navigation a:last-child{
	margin-right: 0;
}

.navigation a:hover{
	background-color: #650000;
	color: white;
	border-color: #650000;
}

.slideshow{
	margin-top: 0.5em;
	background: url(images/ssi1.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 400px;
}

.pagewrapper{
	padding: 0 16px 1em 16px;
	font-family: Raleway;
}

.pagewrapper h1{
	text-align: center;
	color: #650000;
}

.pagewrapper > p{
	text-align: justify;
}

.honeycombs{
	display: block;
	overflow: auto;
}

.honeycomb{
	display: block;
	float: left;
}

.honeycomb:not(:last-child){
	margin-right: 82px;
}

.honeycomb > h3{
	color: #650000;
	width: 200px;
	word-wrap: break-word;
	word-break: break-word;
	text-align: center;
	margin: 0.5em 0;
}

.honeycomb > .image{
	display: block;
	margin: 0 auto;
	width: 152px;
	height: 180px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.3s;
}

.honeycomb > .image:hover{
	opacity: 0.8;
}

.recipes{
	text-align: center;
	overflow: auto;
}

.recipes .recipe{
	display: block;
	width: 351px;
	min-height: 400px;
	margin-bottom: 1em;
	padding: 1em;
	border: 2px dotted #aa1515;
	overflow-y: auto;
	text-decoration: none;
	float: left;
	margin: 0em 1em 1em 1em;
	transition: 0.5s;
}

.recipes .recipe:hover{
	background-color: #fff1d0;
}

.recipe h2{
	min-height: 60px;
	text-align: center;
}

.recipes .recipe .img{
	margin: 0 auto;
	height: 280px;
}

.recipe .categories{
	padding: 0;
	margin: 0;
	text-align: left;
	font-family: Roboto;
	color: #650000;
	font-size: 0.8em;
	display: block;
	font-weight: 100;
}

.recipe .images{
	display: block;
	width: 200px;
	float: left;
}

.recipe .img{
	display: block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	width: 200px;
	height: 380px;
	margin: 0 0.9em 0.9em 0;
	position: relative;
}

.recipe .thumbs{
	display: block;
	width: 200px;
	margin-bottom: 1em;
}

.recipe .thumb{
	display: block;
	width: 64px;
	height: 64px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	float: left;
}

.recipe .thumb:not(:last-child){
	margin: 0 0.2em 0.2em 0;
}


.recipe .thumb:nth-child(3n){
	margin-right: 0;	
}

.recipe h2{
	color: #650000;
	margin-bottom: 1em;
}

.recipe .ingredientsheader{
	font-weight: 700;
	color: #650000;
	display: block;
}

.recipe p{
	display: block;
	margin: 0;
	text-align: left;
	width: 200px;
	white-space: pre-line;
	text-align: left;
}

.recipe .description{
	margin-top: 0;
	margin-bottom: 1em;
	width: 510px;
	text-align: left;
	float: right;
}

.cform .row{
  min-height: 30px;
}

.cform .row:not(:last-child){
  margin-bottom: 0.6em;
}

.cform label{
  display: inline-block;
  min-width: 200px;
}

.cform .company{
  float: right;
  width: 128px;
  margin-right: 1em;
}

.cform .company p{
  display: block;
  margin-top: 1em;
  white-space: pre-line;
  font-size: 0.8em;
  text-align: right;
  margin-right: 1em;
}

.cform .logo{
  display: block;
  background-image: url(/assets/images/favicon.png);
  background-size: contain;
  width: 128px;
  height: 128px;
}


.cform input{
  padding: 0.4em;
  border: none;
  outline: none;
  background-color: transparent;
  border-bottom: 1px solid #000;
}

.cform textarea{
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0.5em;
  border: 1px solid #650000;
  resize: none;
  width: 390px !important;
  height: 120px;
}

table.products{
  border-collapse: collapse;
  table-layout: fixed;
}

table.products input{
  width: 100%;
  border-bottom: none;
}

table.products th{
  border: 1px solid #000;
}

table.products tbody tr td{
  border: 1px solid #000;
  padding-left: 0.3em;
}

.print{
  margin-top: 1em;
}

.notice{
	display: block;
	border: 2px dotted #650000;
	color: #650000;
	padding: 1em;
}

@media print{
  .print{
    display: none;
  }
}

.menu{
	display: none;
}

.footer{
	background: url(images/footer.png) no-repeat;
	width: 100%;
	padding: 0.5em;
	display: block;
	background-position: center;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
	color: white;
}

::selection {
	background-color: #650000 !important; /* WebKit/Blink Browsers */
	color: white;
}
::-moz-selection {
	background-color: #650000 !important; /* Gecko Browsers */
	color: white;
}

@media(max-width: 967px){
	.honeycomb{
		float: none;
		text-align: center;
		margin: 0 auto;
		margin-right: 0 !important;
		margin-bottom: 1em;
	}

	.honeycomb h3{
		margin: 0 auto;
	}
}

@media(max-width:1024px){
	body{
		width: 100%;
	}

	*{
		max-width: 100% !important;
	}

	.honeycomb:not(:last-child){
		margin-right: 158px;
	}

	.slideshow{
		height: 300px;
	}

	.navigation{
		display: block;
	}

	.product .header{
		justify-content: center;
		align-items: center;
	}

	.recipes{
		width: 766px;
		margin: 0 auto;
	}

	.recipe{
		margin: 1em !important;
	}

	.recipe .images{
		margin: 0 auto !important;
		float: none !important;
	}

	.recipe .thumbs{
		display: inline-block;
	}

	.recipe p{
		text-align: left !important;
		width: 100% !important;
		float: none !important;
	}

	.recipe h2 + div + p{
		width: 490px !important;
	}

	.contact{
		width: 800px;
		margin: 0 auto;
	}
}

@media(max-width: 1023px){
	.recipe h2 + div + p{
		width: 100% !important;
	}
}

@media(max-width: 820px){
	.product, .recipe, .categories li{
		float: none !important;
		margin: 1em auto !important;
	}


}

@media(min-width: 421px){
	.navigation{
		display: block !important;
	}
}

@media(max-width:420px){
	body{
		width: 100%;
	}

	.box{
		margin: 0.2em !important;
	}

	.pagewrapper{
		padding: 1em;
	}

	.bestilling a{
		max-width: 100%;
	}

	.contact{
		width: 100%;
		text-align: center;
	}

	.contact .box{
		float: none !important;
		width: 300px !important;
	}

	.menu{
		cursor: pointer;
		display: block;
		margin: 0 0.3em;
		padding: 0.4em 1em;
		color: #650000;
		max-width: 100%;
		margin-top: 0.5em;
		text-align: center;
		border: 3px double #650000;
	}

	.menu:hover{
		background-color: #650000;
		color: white;
	}

	.navigation{
		display: none;
		overflow: hidden;
	}

	.navigation a{
		display: block;
		max-width: 100%;
		text-align: center;
		margin-right: 0;
		margin-left: 0;
	}

	.slideshow{
		height: 200px;
	}

	h1{
		font-size: 1em !important;
	}

	.recipe{
		margin: 1em 0 !important;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	body{
		display: block;
	}

	.products{
		display: block !important;
	}
}