@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

:root {--color1:#001202;--color2:#fddd0d;--color3:#f9a704;}

body { font-family: Exo, Arial, Helvetica, sans-serif; }

main { max-width: 1000px; margin: 0px auto 30px auto; border-radius: 5px; padding: 10px; color: black; }

.intro { margin-top: 20px; margin-bottom: 20px; }

.company { background-color: white; padding: 10px; margin: 20px 0; border-radius: 10px; }

.company .name {font-size: 30px; font-weight: bold;}
.company .description {margin: 10px 0;}
.company .url {}




.header, .footer {box-shadow: 0 0 20px rgba(0,0,0,.2);background-color: var(--color1);}
body {margin:0;background-color: var(--color2);}
.content {max-width: 1000px; margin: 0px auto 30px auto;border-radius: 5px;padding: 10px;}
.footer {padding: 20px 0;text-align: center;color: white !important;}
iframe {width: 100%;}
a {color: var(--color3);text-decoration: none;}

@charset "UTF-8";:root {--star-size: 60px;--star-color: black;--star-background: var(--color1);}
.Stars {--percent: calc(var(--rating) / 5 * 100%);display: inline-block;font-size: 22px;font-family: Times;line-height: 1;}
.Stars::before {content: '\2605\2605\2605\2605\2605';letter-spacing: 3px;background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

ul {list-style: none;}
ul li::before {content: "👉";display: inline-block;margin-right: 0.5rem;}

.enheds {font-style: normal;}

.topfoto {float: right; width: 300px; max-width: 40%;margin: 10px;}

.menu {background-color: var(--color2);text-align: center;padding: 10px;}
.menu span {padding: 10px 20px;font-weight: bold;color: white;}
.menu a {color: white !important; text-decoration: none;}
.menu span:hover {background-color: var(--color1);cursor: pointer;}
@media (max-width: 500px){.menu {display: none;}}

.navlinks a {background-color: white;padding: 6px 9px;color: black;font-weight: 800;border-radius: 5px;line-height: 40px; text-decoration: none;white-space: nowrap;}
.navcat {background-color: var(--color3) !important;}

.bannerheadline {background-color: var(--color1);text-align: center; padding: 6px 9px; color: white; font-size: 30px; font-weight: 800; letter-spacing: -0.26px; border-radius: 5px; margin: 70px 0% 0% 0%;}
.bannerbox {margin: 1%; float: left; padding: 0 1%; background-color: white; border-radius: 5px;}
.bannerbox:hover {transform: scale(1.01); transition: transform .2s;}
.row3 {width:29%;}
.row2 {width:47.5%;}
.row1 {width:98%;}
.bannerbox a {display: block; width: 100%; cursor: pointer; background-repeat: no-repeat; padding-bottom: 67%; position: relative; background-position: 50%; background-size: contain; background-color: #fff; overflow: hidden;}
.bannertext {background-color: var(--color3);position: absolute; bottom: 5px; text-align: center; padding: 6px 9px; right: 0; color: white; font-size: 20px; font-weight: 800; letter-spacing: -0.26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;border-radius: 5px;}

.shoplogo1 img {filter: blur(25px);}
.shoplogo2 img {filter: blur(10px);}
.cheap {display:none;}
.cheapoverlay span {background-color: var(--color1) !important;}

.webshops img {max-width: 200px; max-height: 50px; padding: 20px; margin: auto; display: block;}
.webshops > div {margin: 20px 0;clear:both;padding: 15px;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;min-height: 90px;}
.webshops > div div:nth-child(1) {width: 35%; float: left;}
.webshops > div div:nth-child(2) {width: 65%; float: right;}
.webshops > div div:nth-child(3) {clear:both;}
.webshops > div, .tips div, .valg div > div, .punkter div > div, .anmeldelser div div {transition: transform .2s;}
.webshops > div:hover, .tips div:hover, .valg div > div:hover, .punkter div > div:hover, .anmeldelser div div:hover {transform: scale(1.02);}


@media (max-width: 800px){
.webshops img {float: none;margin: 0 auto 20px auto; display: block;}
.webshops > div div:nth-child(1) {width: 100%;}
.webshops > div div:nth-child(2) {width: 100%;}
}

/********** Pop up **********/
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.modal-content {
	background-color: var(--color1);
	margin: 15% auto;
	padding: 1% 3%;
	width: 650px;
	max-width: 90%;
	color: white;
	border-radius: 10px;
	text-align: center;
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.modal-content h1 {
	font-size: 35px;
}

.form-control {
	display: block;
	width: 100%;
	height: 40px;
	padding: 0px 15px;
	font-size: 16px;
	line-height: 1.42857;
	border-radius: 6px;
	border: none;
	margin-bottom: 10px;
	text-align: center;
	background-color: transparent;
	border: 2px solid white;
	color: white;
}

::placeholder { 
	color: white;
	opacity: 1;
}

.errorbox {
	display: none;
	margin: 0;
	height: 20px;
	color: #ff0000;
}

.btn-signup {
	background-color: var(--color3);
	border-radius: 6px;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 10px;
	width: 100%;
	height: 40px;
	margin: auto;
	border: none;
}

.redirect-disclaimer {
	font-size: 10px;
}

.guest {
	font-size:12px;
	color: white;
}

/********** Overlay **********/
.wrapper {
	position: relative;
}

.overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.overlay div {
	text-align: center;
}

.overlay div div {
	display: inline-block;
	position: relative;
	padding: 10px 32px;
	background-color: var(--color3);
	top: 218px;
	color: white;
	border-radius: 10px;
	box-shadow: 0px 0px 69px 25px var(--color1);
}

.overlay:hover, .btn-signup:hover, .guest:hover {
	cursor:pointer;
}

/********** Responsive **********/
@media (max-width: 800px){
	iframe {max-height: 200px !important;margin-bottom: 20px;max-width:100%;}
	.Stars::before {letter-spacing: 0px; }
}

@media (max-width: 500px){
	.sh1 {margin: 40px 0px;}
	.sh1 table img {max-width: 70px;}
	.sh1 table td {padding: 0px;}
	.sh1 table td span {padding: 2px 5px;}
	.sh table {font-size: 16px;}
	.enheds {display: none;}
}

@media (max-width: 400px){
	.sh1 table th:nth-child(4) {font-size:12px;}
}


/********** Filter **********/
.hide {display:none;}
.hidegranit {display:none;}

.filter {
    margin: 15px -5px;
	overflow: hidden;
}

.filter .tophelptext {
	display: none;
	font-size: 18px;
    text-align: center;
    padding: 5px;
}

.filter .title {
	width: 14%;
    background-color: var(--color2);
    color: white;
    cursor: auto;
    text-align: right;
    float: left;
    padding: 1.8% 1% 1.5% 0px;
}

.filter .buttonshelptext {
	width: 85%;
	float: left;
}

.filter .buttons {
	width: 100%;
}

.filter .buttons > div {
    width: 19%;
    height: 40px;
    margin: 0.5%;
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    color: black;
    text-align: center;
    float: left;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    line-height: 20px;
	word-wrap: break-word;
}

.filter .buttons > div:hover {
    background-color: var(--color3);
	color: white;
}

.filter .buttons > div.active {
background-color: var(--color3);
color: white;
}

.filter .buttons div div {
	font-size: 12px;
    height: 15px;
    background-color: var(--color1);
    line-height: 15px;
    border-radius: 3px;
    margin-top: -15px;
    color: white;
    width: 65px;
}

.filter .helptext div {
    margin: 5px 0.5%;
    border-radius: 5px;
    width: 99%;
    font-size: 14px;
    color: white;
	font-style: italic;
}

.hidemore {
   	display: none !important;
}

.filter .buttons .empty {
	background-color: var(--color1);
    color: white;
    cursor: auto;
}

.filter .buttons .empty:hover {
    background-color: var(--color1);
}

.hideme {display: none !important;}


@media (max-width: 800px){
.filter .buttons > div {height: 50px;}
}

@media (max-width: 600px){
.filter .tophelptext {display: block;}
.filter .title {display: none;}
.filter .buttonshelptext {width: 100%;}
.filter .buttons > div span:nth-of-type(1) {display: none !important;}
.liters .buttons > div {font-size: 18px !important;}
}

@media (min-width: 601px){
.filter .buttons > div span:nth-of-type(2) {display: none !important;}
}


/********** Filter2 **********/
@media (max-width: 600px){.filter2 .buttons > div {width: 49%;}}

/********** Filter3 **********/
@media (max-width: 600px){.filter3 .buttons > div {width: 32.3%;}}

/********** Filter4 **********/
@media (max-width: 600px){.filter4 .buttons > div {width: 24%;}}

/********** Filter5 **********/
@media (max-width: 600px){.filter5 .buttons > div {width: 19%;}}
@media (max-width: 400px){.filter5 .buttons > div {font-size: 14px;}}

/********** Filter6 **********/
@media (min-width: 600px){.filter6 .buttons > div:nth-child(4) {clear: both;}}
@media (max-width: 600px){.filter6 .buttons > div {width: 32.3%;}}

/********** Filter7 **********/
@media (min-width: 600px){.filter7 .buttons > div:nth-child(5) {clear: both;}}
@media (max-width: 600px){.filter7 .buttons > div {width: 24%;}}

/********** Filter8 **********/
@media (min-width: 600px){.filter8 .buttons > div:nth-child(5) {clear: both;}}
@media (max-width: 600px){.filter8 .buttons > div {width: 24%;}}

/********** Filter9 **********/
@media (min-width: 600px){.filter9 .buttons > div:nth-child(6) {clear: both;}}
@media (max-width: 600px){.filter9 .buttons > div {width: 19%;}}
@media (max-width: 400px){.filter9 .buttons > div {font-size: 14px;}}

/********** Filter10 **********/
@media (max-width: 600px){.filter10 .buttons > div {width: 19%;}}
@media (max-width: 400px){.filter10 .buttons > div {font-size: 14px;}}








/********** Header **********/
.header {overflow: auto;padding: 10px;}
.header .box {max-width:1000px;margin-left: auto; margin-right: auto;color: white;}
.header .left {width:20%;float: left;font-size: 35px;text-align: left;}
.header .center {width:60%;float: left;font-size: 30px;text-align: center;line-height: 40px;}
.header .right {width:20%;float: left;font-size: 18px;text-align: right;}
.header .right span {color: var(--color3);}
.header .name {color: var(--color3); font-size: 20px; line-height: 40px;}



@media (max-width: 800px){
.header .left {width: 100%;text-align: center;padding: 5px 0;}
.header .center {width: 100%;padding: 5px 0;display:none;}
.header .right {width: 100%;text-align: center;padding:5px 0;display:none;}
.header .right br {display:none;}
.header .name {font-size: 20px;line-height: 20px;}
}

@media (max-width: 500px){
.header .left {width: 100%;}
.header .center {width: 100%;}
.header .right {width: 100%;}
}



/********** Pricelist **********/
.pricelistheadline {margin-top: 20px; color: white; font-size: 18px; min-height: 25px; text-align: center;}
.pricelistheadline .text div:nth-child(1) {float: right;}
.pricelistheadline .text div:nth-child(2) {float: left;}

.pricelist {min-height: 800px;}

.pricelist .price {background-color: white; height: 40px; line-height: 40px; width: 100%;border-radius:5px;cursor: pointer;text-align: center; font-size: 18px;margin: 10px 0;color: black;}
.pricelist .price div {float:left;max-height: 50px; overflow: hidden;}
.pricelist .price:nth-child(1) {background-color: var(--color3);color: white;cursor: auto;font-weight: bold;}
.pricelist .price:nth-child(1) div:nth-child(1) {display: block;}
.pricelist .price div:nth-child(1) {display: flex; height: 40px;}
.pricelist .price img {max-width: 65%; max-height: 35px;margin: auto;font-size: 10px;}

.units {font-style: normal;}

@media (max-width: 800px){
.pricelistheadline {min-height: 42px;}
.pricelistheadline .text div:nth-child(1) {float: none;}
.pricelistheadline .text div:nth-child(2) {float: none;}
}

@media (max-width: 500px){
.pricelist .price div {font-size:15px;}
.pricelist .price img {max-width: 90%;}
.units {display: none;}
}

@media (max-width: 380px){
.pricelist .price div {font-size:13px;}
}



/********** Pricelist variabel **********/
.variabel .price div:nth-child(1) {width:18%;}
.variabel .price div:nth-child(2) {width:14%;}
.variabel .price div:nth-child(3) {width:14%;}
.variabel .price div:nth-child(4) {width:15%;}
.variabel .price div:nth-child(5) {width:15%;}
.variabel .price div:nth-child(6) {width:17%;background-color: var(--color3); color: white;}
.variabel .price div:nth-child(7) {width:7%;}

@media (max-width: 1000px){
.variabel .price div:nth-child(1) {width:20%;}
.variabel .price div:nth-child(2) {display:none;}
.variabel .price div:nth-child(3) {width:17%;}
.variabel .price div:nth-child(4) {width:17%;}
.variabel .price div:nth-child(5) {width:17%;}
.variabel .price div:nth-child(6) {width:19%;}
.variabel .price div:nth-child(7) {width:10%;}
}

@media (max-width: 700px){
.variabel .price div:nth-child(1) {width:22%;}
.variabel .price div:nth-child(2) {display:none;}
.variabel .price div:nth-child(3) {display:none;}
.variabel .price div:nth-child(4) {width:21%;}
.variabel .price div:nth-child(5) {width:21%;}
.variabel .price div:nth-child(6) {width:26%;}
.variabel .price div:nth-child(7) {width:10%;}
}

@media (max-width: 500px){
.variabel .price div:nth-child(1) {width:22%;}
.variabel .price div:nth-child(2) {display:none;}
.variabel .price div:nth-child(3) {display:none;}
.variabel .price div:nth-child(4) {width:22%;}
.variabel .price div:nth-child(5) {width:26%;}
.variabel .price div:nth-child(6) {width:20%;}
.variabel .price div:nth-child(7) {width:10%;}
.variabel .price:nth-child(1) div:nth-child(6) {font-size:12px;}
}





/********** Pricelist variabelvariant **********/
.variabelvariant .price div:nth-child(1) {width:16%;}
.variabelvariant .price div:nth-child(2) {width:12%;}
.variabelvariant .price div:nth-child(3) {width:12%;}
.variabelvariant .price div:nth-child(4) {width:12%;}
.variabelvariant .price div:nth-child(5) {width:13%;}
.variabelvariant .price div:nth-child(6) {width:13%;}
.variabelvariant .price div:nth-child(7) {width:16%;background-color: var(--color3); color: white;}
.variabelvariant .price div:nth-child(8) {width:6%;}

@media (max-width: 1000px){
.variabelvariant .price div:nth-child(1) {width:20%;}
.variabelvariant .price div:nth-child(2) {display:none;}
.variabelvariant .price div:nth-child(3) {display:none;}
.variabelvariant .price div:nth-child(4) {width:17%;}
.variabelvariant .price div:nth-child(5) {width:17%;}
.variabelvariant .price div:nth-child(6) {width:17%;}
.variabelvariant .price div:nth-child(7) {width:19%;}
.variabelvariant .price div:nth-child(8) {width:10%;}
}

@media (max-width: 700px){
.variabelvariant .price div:nth-child(1) {width:22%;}
.variabelvariant .price div:nth-child(2) {display:none;}
.variabelvariant .price div:nth-child(3) {display:none;}
.variabelvariant .price div:nth-child(4) {display:none;}
.variabelvariant .price div:nth-child(5) {width:21%;}
.variabelvariant .price div:nth-child(6) {width:21%;}
.variabelvariant .price div:nth-child(7) {width:26%;}
.variabelvariant .price div:nth-child(8) {width:10%;}
}

@media (max-width: 500px){
.variabelvariant .price div:nth-child(1) {width:22%;}
.variabelvariant .price div:nth-child(2) {display:none;}
.variabelvariant .price div:nth-child(3) {display:none;}
.variabelvariant .price div:nth-child(4) {display:none;}
.variabelvariant .price div:nth-child(5) {width:22%;}
.variabelvariant .price div:nth-child(6) {width:26%;}
.variabelvariant .price div:nth-child(7) {width:20%;}
.variabelvariant .price div:nth-child(8) {width:10%;}
.variabelvariant .price:nth-child(1) div:nth-child(7) {font-size:12px;}
}





/********** Pricelist fast **********/
.pricelistfastheadline {max-width: 600px;margin: 20px auto 0 auto;}
.fast {max-width: 600px;margin: auto;}
.fast .price div:nth-child(1) {width:35%;}
.fast .price div:nth-child(2) {width:25%;}
.fast .price div:nth-child(3) {width:25%;background-color: var(--color3); color: white;}
.fast .price div:nth-child(4) {width:15%;}

@media (max-width: 800px){
}

@media (max-width: 500px){
}

@media (max-width: 380px){
}




/********** Pricelist omregnet **********/
.pricelistomregnetheadline {max-width: 600px;margin: 20px auto 0 auto;}
.omregnet {max-width: 600px;margin: auto;}
.omregnet .price div:nth-child(1) {width:50%;}
.omregnet .price div:nth-child(2) {width:35%;background-color: var(--color3); color: white;}
.omregnet .price div:nth-child(3) {width:15%;}

.pricelistomregnetheadline .text div:nth-child(2) {display: none;}

@media (max-width: 800px){
.pricelistomregnetheadline .text div:nth-child(2) {display: block;}
}

@media (max-width: 500px){
.omregnet .price span {padding: 2px 10px;}
.omregnet .price img {max-width: 90%;}
}

@media (max-width: 380px){
}





/********** Navigation **********/
.navigation {
	margin: 25px auto;
}

.navigationbox {
    background-color: white;
    height: 120px;
    color: black;
	border-radius: 5px;
	margin: 15px 0;
}

.navigationbox .info {
	width: 75%;
    float: left;
}

.navigationbox .infobox {
	padding: 10px 15px;
}

.navigationbox .title {
	font-weight: bold;
    font-size: 22px;
}

.navigationbox .description {
	
}

.navigationbox .image {
	width: 25%;
	height: 120px;
    float: left;
	display: flex;
	position: relative;
}

.navigationbox .image div {
	bottom: 0;
    position: absolute;
    right: 0;
    padding: 5px 10px;
    background-color: var(--color3);
    border-radius: 5px 0px 5px 0px;
    color: white;
	opacity: 0.8;
}

.navigationbox img {
	max-width: 95%;
    max-height: 100%;
	margin: auto;
}

@media (max-width: 700px){
.navigationbox, .navigationbox .image {height: 150px;}
}

@media (max-width: 600px){
.navigationbox, .navigationbox .image {height: 170px;}
}

@media (max-width: 400px){
.navigationbox, .navigationbox .image {height: 200px;}
}



/********** Spin text **********/

.overskrift {text-align: center;margin-top: 70px;margin-bottom: 30px;}
.overskrift span {font-size: 25px; font-weight: 700;}

.anmeldelser > div:nth-child(1) {width: 60%; float:left;}
.anmeldelser > div:nth-child(2) {width: 35%;float:right;}
.anmeldelser > div:nth-child(3) {clear:both;}
.anmeldelser div div {background-color: white; padding: 20px 15px; margin: 15px;border-radius: 10px;box-shadow: 0 0px 5px 0px lightgrey;text-align: center;color: black;}
.anmeldelser div div div {margin: 0 10px;box-shadow: none; padding: 0;}
.anmeldelser div div p {margin: 5px 0;font-style: italic;}

.webshops img {max-width: 200px; max-height: 50px; padding: 20px; margin: auto; display: block;}
.webshops > div {margin: 20px 0;clear:both;padding: 15px;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;background-color: white; color: black;}
.webshops > div div:nth-child(1) {width: 35%; float: left;}
.webshops > div div:nth-child(2) {width: 65%; float: right;}
.webshops > div div:nth-child(3) {clear:both;}

.punkter > div {width: 100%;}
.punkter div div {margin: 30px 0;padding: 15px;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;background-color: white; color: black;}
.punkter div div span:nth-child(1) {color: white; padding: 0 7px; background-color: var(--color3); border-radius: 50%; font-size: 30px; float: left; margin-left: -30px; margin-top: -30px;}

.valg > div {width: 50%; float: left;}
.valg div div div {margin: 30px;padding: 15px;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;background-color: white; color: black;}
.valg div:nth-child(2) div span:nth-child(1) {color: white; padding: 0 7px; background-color: orange; border-radius: 50%; font-size: 30px; float: left; margin-left: -30px; margin-top: -30px;}
.valg div:nth-child(1) div span:nth-child(1) {color: white; padding: 0 7px; background-color: dodgerblue; border-radius: 50%; font-size: 30px; float: left; margin-left: -30px; margin-top: -30px;}
.valg p {text-align: center; font-size: 20px; font-weight: 600;}
.valg div:nth-child(2) p {color: orange;}
.valg div:nth-child(1) p {color: dodgerblue;}

.tips > div {width: 33%; float: left;}
.tips div div {margin: 15px;padding: 15px;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;background-color: white; color: black;}
.tips div div span:nth-child(1) {color: white; padding: 0 10px; background-color: var(--color3); border-radius: 50%; font-size: 30px; float: left; margin-left: -30px; margin-top: -30px;}

.kort img {width: 300px; border-radius: 10px; float: left; margin: 0 20px 0 0;}
.banner {max-width: 100%;}

.egenskaber {max-width: 100%;}
.egenskaber p {margin: 30px 0;line-height: 25px;}
.egenskaber span {margin: 5px;}
.egenskaber span:before {content: '✓'; margin: 3px; color: white; padding: 2px 5px; background-color: var(--color3); border-radius: 50%;}

.webshops > div, .tips div, .valg div > div, .punkter div > div, .anmeldelser div div {transition: transform .2s;}
.webshops > div:hover, .tips div:hover, .valg div > div:hover, .punkter div > div:hover, .anmeldelser div div:hover {transform: scale(1.02);}

@media (max-width: 767px){
.punkter div div span:nth-child(1) {margin-left: -20px; margin-top: -40px;}
.valg div:nth-child(1) div span:nth-child(1) {margin-left: -20px; margin-top: -40px;}
.valg div:nth-child(2) div span:nth-child(1) {margin-left: -20px; margin-top: -40px;}
.anmeldelser > div:nth-child(1) {width: 95%;}
.anmeldelser > div:nth-child(2) {width: 100%;}
.anmeldelser div div {margin: 15px 0;}
.kort img {float: none;margin: 0 auto 20px auto; display: block;}
.webshops img {float: none;margin: 0 auto 20px auto; display: block;}
.webshops > div div:nth-child(1) {width: 100%;}
.webshops > div div:nth-child(2) {width: 100%;}
.tips > div {width: 100%;}
.valg > div {width: 100%;}
.valg div div div {margin: 30px 0;}
}