:root {--farve1:#48b749;--farve2:#fddd01;--farve3:#97d9ff;}

.header, .footer {box-shadow: 0 0 20px rgba(0,0,0,.2);background-color: var(--farve1);}
body {margin:0;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
.content {max-width: 800px; margin: 0px auto 30px auto; padding: 30px; border-radius: 5px;}
.footer {padding: 20px 0;text-align: center;;color: white !important;}
iframe {width: 100%;}
a {color: var(--farve1);}

.input {border: 0px solid black; border-radius: 5px; height: 30px; text-align: center; font-size: 16px; width: 60px;background-color: var(--farve1); color: white;}
.submit {width: 80px; background-color: var(--farve2);}
.beregner {line-height: 40px;text-align: center;}


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


.webshop img {max-width: 200px; max-height: 50px; padding: 20px; margin: auto; display: block;}
.webshop a > div {margin: 20px 0;clear:both;box-shadow: 0 0px 5px 0px lightgrey;border-radius: 10px;}
.webshop a > div div div:nth-child(1) {width: 35%; float: left;display: flex; align-items: center; justify-content: center; min-height: 80px;}
.webshop a > div div div:nth-child(2) {width: 65%; float: right;}
.webshop a > div div div:nth-child(3) {clear:both;}
.webshopknap {background-color: var(--farve1); padding: 5px 10px; border-radius: 0px 0px 10px 10px; color: white; text-align: center;}
.webshopknap span {color: white;text-decoration:none;}
.webshop a {text-decoration:none;}
.webshop a > div:hover {box-shadow: 0 0px 5px 0px var(--farve1);}
.webshopbokstekst {color: black;display: flex; align-items: center; justify-content: center; min-height: 80px;line-height: 1.4;}

.webshoptabel {max-width: 600px;margin: 20px auto;}
.webshoptabel table {border-collapse: collapse;width: 100%;}
.webshoptabel table a {color: black; text-decoration: none;}
.webshoptabel table tr:hover {box-shadow: 0 0px 5px 0px var(--farve1);}
.webshoptabel table td {border: 1px solid #ddd;padding: 5px;text-align: center;vertical-align: middle;}
.webshoptabel table td span {background-color: var(--farve1); border-radius: 5px;color: white !important; padding: 2px 20px;}
.webshoptabel table th {background-color: var(--farve2); padding: 10px 0;color: white;border: none; text-align: center;}
.webshoptabel table tr {cursor: pointer;height: 40px;}
.webshoptabel table img {max-width: 100px;max-height: 29px;}
.webshoptabeltop {background-color: var(--farve1); padding: 10px 0;color: white; text-align: center;}


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

.box {float: left; width: 23%; margin: 1%; box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2); height: 260px; border-radius: 5px;text-align: center;}
.box img {max-width:150px;max-height:150px;border:0;display: block; margin-left: auto; margin-right: auto;padding: 5px;}
.box div:nth-child(2) {height: 65px;overflow:hidden;padding: 0 3%;}
.box div:nth-child(2) span {font-weight: bold;color: black;margin: 0 !important;line-height: 1;}
.box div:nth-child(3) {background-color: var(--farve1); padding: 9px 0; border-radius: 0px 0px 0px 5px; width: 50%; margin-right: auto;float: left;}
.box div:nth-child(3) span {font-weight: bold;color:#fff;margin: 0 !important;}
.box div:nth-child(4) {background-color: var(--farve2); padding: 9px 0; border-radius: 0px 0px 5px 0px; width: 50%; margin-left: auto;}
.box div:nth-child(4) span {font-weight: bold;color:#fff;margin: 0 !important;}
.box:hover {box-shadow: 0 0px 5px 0px var(--farve1);}

.badge {color: white; padding: 3px 10px; background-color: #523e37; border-radius: 5px; font-size: 25px; float: right; margin-right: -10px; margin-top: 10px;}

.banneroverskrift {background-color: var(--farve1);text-align: center; padding: 6px 9px; color: #ffffff; font-size: 30px; font-weight: 800; letter-spacing: -0.26px; border-radius: 5px; margin: 70px 0% 0% 0%;}
.bannerbox {margin: 1%;float: left;}
.bannerbox:hover {transform: scale(1.01); transition: transform .2s;}
.row3 {width:31%;}
.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;}
.bannertekst {background-color: var(--farve2);position: absolute; bottom: 5px; text-align: center; padding: 6px 9px; left: 0; color: #ffffff; 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;}

.site-title {text-align: center;padding: 20px;}
.site-title a {color: #fff;font-size: 42px;font-weight: bold;text-decoration: none;}
.site-title img {width: 80px;vertical-align: middle;margin: 0 20px;}

@charset "UTF-8";:root {--star-size: 60px;--star-color: #000;--star-background: var(--farve1);}
.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;}

.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;}
.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;}
.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;}
.punkter div div span:nth-child(1) {color: white; padding: 0 7px; background-color: var(--farve1); 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;}
.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;}
.tips div div span:nth-child(1) {color: white; padding: 0 10px; background-color: var(--farve1); border-radius: 50%; font-size: 30px; float: left; margin-left: -30px; margin-top: -30px;}

.lds div {width: 20%; float: left;}
.lds p {text-align: center; margin-top: -20px;}
.lds img {max-width: 100%;}

.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(--farve1); 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);}

.pristabel {max-width: 700px;margin: 40px auto;}
.pristabel table {border-collapse: collapse;width: 100%;}
.pristabel table a {color: black; text-decoration: none;}
.pristabel table tr:hover {background-color: #ddd;}
.pristabel table td {border: 1px solid #ddd;padding: 5px;text-align: center;vertical-align: middle;}
.pristabel table td span {background-color: var(--farve1); border-radius: 5px;color: white !important; padding: 2px 20px;}
.pristabel table th {background-color: var(--farve2); padding: 10px 0;color: white;border: none; text-align: center;}
.pristabel table tr {cursor: pointer;height: 40px;}
.pristabel table img {max-width: 100px;max-height: 29px;}
.pristabel .detaljer {font-family: auto; margin: 5px 0 15px 0;}


.sh {margin: 40px auto;}
.sh2 {max-width: 500px;margin: 40px auto;}

.sh table {border-collapse: collapse;width: 100%;}
.sh table a {color: black; text-decoration: none;}
.sh table tr:nth-child(odd){background-color: #f2f2f2;}
.sh table tr:hover {background-color: #ddd;}
.sh table td {border: 1px solid #ddd;padding: 5px;text-align: center;vertical-align: middle;}
.sh table td span {background-color: var(--farve1); border-radius: 5px;color: white !important; padding: 2px 20px;}
.sh table th {background-color: var(--farve2); padding: 10px 0;color: white;border: none; text-align: center;}
.sh table tr {cursor: pointer;height: 40px;}
.sh table img {max-width: 100px;max-height: 29px;}
.sh div:first-child {background-color: var(--farve1); padding: 10px 0;color: white; text-align: center;}
.sh .detaljer {font-family: auto; margin: 5px 0 15px 0;}
.sh-linktekst {color: #405a59;cursor: pointer;text-decoration: underline;}


.menu {background-color: var(--farve2);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(--farve1);cursor: pointer;}
@media (max-width: 500px){.menu {display: none;}}

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





@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;}
.site-title a {font-size: 23px;}
.site-title img {width: 35px;}
.box {width: 46%; margin: 2%;height: 250px;}
.box img {max-width:100%;padding: 0px;}
.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%;}
.webshop img {max-width: 250px; max-height: 80px;float: none;}
.webshop a > div div div:nth-child(1) {width: 100%;}
.webshop a > div div div:nth-child(2) {width: 100%;}
.webshopbokstekst {min-height: 10px;}
.tips > div {width: 100%;}
.valg > div {width: 100%;}
.valg div div div {margin: 30px 0;}
iframe {max-height: 200px !important;margin-bottom: 20px;max-width:100%;}
}

@media (max-width: 500px){
.content {padding: 10px;margin: 0px;}
.pristabel table img {max-width: 70px;}
.pristabel {margin: 40px 0px;}
.pristabel table td {padding: 0px;}
.pristabel table td span {padding: 2px 5px;}
.sh1 table img {max-width: 70px;}
.sh1 {margin: 40px 0px;}
.sh1 table td {padding: 0px;}
.sh1 table td span {padding: 2px 5px;}
}

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



@media (max-width: 100px){
table > tbody > tr > th:nth-child(4) {display: none;}
table > tbody > tr > td:nth-child(4) {display: none;}
}