:root {
  --jhBrown: rgb(39, 35, 36);
  --jhBrownOpacity: rgba(35, 31, 32, 0.4);
  --jhOffWhite: rgb(254, 255, 253);
  --jhWhite: rgb(255, 255, 255);
  --jhPink: rgba(134, 96, 146, 1);
  --jhPinkOpacity: rgba(134, 96, 146, 0.4);
  --jhDebugframe: rgba(255, 0, 0, 0);
  font-size: calc(12px + 0.7vw);
  --jhContrastColor: rgb(247, 148, 29);
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v7/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2) format('woff2');
  font-display: swap;
}

.phone:before {
  content: "\1F4DE"
}

.mail:before {
  content: "\2709"
}


body {
  background-color: var(--jhOffWhite);
  color: var(--jhBrown);
  font-family: 'Noto Sans', sans-serif;
}
img {
  border:1px solid var(--jhBrown);
}

header img {
  border:none;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1.7rem;
  margin-bottom:0;
  margin-top:0;
}

p {
  margin-top:0;

}
nav.jhNormalMargin {
  font-size: 1.3rem;
  text-align: right;
  margin-top: 0;
}

nav a:before {
  content: " – ";
  color:inherit;
}
nav a:hover:before {
  color:var(--jhBrown);
}

nav a:first-child:before {
  content: "";
}

a {
  color:var(--jhBrown);
  text-decoration: none;
  border:solid 1px transparent;
  border-width:0 1px 0 1px;
  transition: 0.3s;
}
a:hover {
  text-decoration: none;
}

a:active {
  transition:none;
  color: var(--jhOffWhite);
}

a:hover {
  background: var(--jhContrastColor);
}
#jhIngress {
  text-align: center;
  font-size: 130%;
  border: solid 1px var(--jhContrastColor);
  border-width: 1px 0;
}

.front #jhIngress {
  padding-top:1em;
}
.front .jhTjenester h1 {
  font-size:1.2rem;
}

#jhQuote {
  text-align: center;
  font-size: 1.3rem;
}

#jhQuote {
  margin-top: 10vw;
  margin-bottom: 10vw;
  font-style: italic;
  border: solid 1px var(--jhContrastColor);
  border-width: 1px 0;
  padding: 1vw;
}

#jhQuote:after {
  # content: "\00BB";
}

#jhQuote:before {
  # content: "\00AB";
  content: "–"
}

.jhNormalSection {
  position: relative;
  top: 0;
  left: 0;
  margin: 10%;
}

.jhNormalMargin {
  margin: 1% 10%;
}

hr {
  border: solid 1px var(--jhBrownOpacity);
  margin: 10%;
}

sub {
  display: block;
}

.front header img {
  max-width: 500px;
  width: 50%;
}

.notFront header img {
  width: 150px;
}

.notFront header {
  margin-top: 0;
}

.notFront header h1 {
  text-align: center;
  font-size:3rem;
  border-bottom: solid 1px var(--jhContrastColor);
  margin-bottom:3%;
}

.notFront h2 {
  margin-top:10%;
}

.notFront header .grid {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 5%;
  vertical-align: bottom;
}

.priser .prisGrid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 3%;
  justify-content: bottom
  ;
}

.priser .prisGrid h1 {
  text-align: right;
  padding:0 0 10% 0;
  margin:0;
}
.priser .prisGrid p {
  padding-top:2%;
}

#annonse .annonsegrid{
  display:grid;
  grid-template-columns: 20% 75%;
  grid-gap:5%;
}
.annonsegrid adresse dl {
  margin:0;
}
.annonsegrid adresse img {
  max-height: 10em;
  transition: 0.3s;
  position: relative;
  top: 0;
  left: 0;
  border:none;
}
.annonsegrid adresse img:hover {
  box-shadow: 0 0 20px -10px var(--jhContrastColor);
  background:none;
  position:relative;
  top:1px;
  left:1px;
}
.annonsegrid adresse  a:hover {
  background:none;}

.annonsegrid adresse dt {
  font-weight: 600;
}
.annonsegrid adresse dd {
  padding-bottom: 1rem;
  margin-left:10%;
}
.annonselisting {
  display:grid;
  grid-template-columns: 30% 67%;
  grid-gap: 3%;
  padding:1%;
  margin-bottom:5%;
  margin:-1% -1% 5% -1%;
}
.annonselisting img{
  width:100%;
  position:relative;
  top:0.5em;
}
.annonselisting h3 {
  margin:0;
}
.front header {
  text-align: center;
}

header a:hover {
  background: none;
}

header a:hover {
  color:var(--jhContrastColor);
}
.article #jhIngress {
  margin: 0;
}

.article #bodytext img {
  float: left;
  max-width: 50%;
  width:50%;
  margin-right:3%;
  margin-bottom:3%;
}
.article #bodytext img.right {
  float:right;
  margin-left:3%;
  margin-right:0;
}

#jhTjenester {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 2%;
}  

#jhTjenester>* {
  overflow: hidden;
  padding:1%;
}

#aboutus img {
  width: 100%;
  max-width: 150px;
}

#aboutus h1 {
  margin: 0;
  padding:0;
  font-size:1rem;
}
#aboutus p {
  margin: 0;
  padding: 0;
}
#aboutus article {
  padding-bottom: 5%;
}



#aboutus {
  display: grid;
  grid-template-columns: 48% 48%;
  grid-gap: 4%;
  padding-top: 5%;
  margin-top: 5%;
  overflow:hidden;
}

#aboutus article {
  display: grid;
  grid-template-columns: 29% 69%;
  grid-gap: 2%;
}

.kontakt img {
  max-width: 100%
}

.kontakt address {
  font-size: calc(8px + 0.7vw);
}

.kontaktInfo {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-gap: 5%;
  padding:2%;
}

q {
  font-size: 1.3rem;
  font-style: oblique;
  color:var(--jhContrastColor);
  padding: 3% 0;
  display:block;
}

footer {
  text-align: center;
  margin-top: 10% !important;
  padding: 1%;
  border-top:1px solid var(--jhContrastColor);
}

.blog p a {
  border-bottom: dotted 1px var(--jhContrastColor);
}
.blog p a:hover {
  border:solid 1px var(--jhContrastColor);
}

@media only screen and (max-width:609px) {
  a:active {
    color:var(--jhContrastColor);
  }
  body {
    margin: 1% 3%;
  }
  .priser .grid, #jhTjenester, #aboutus, .priser .grid, .twoGrid {
    display: block;
  }
  .front #jhIngress {
    padding-bottom:3%;
  }
  a:hover {
    background:none;
  }
  #aboutus article #jhTjenester .grid, .priser .grid>* {
    padding: 5% 0;
  }
  p, h1 {
    margin: 0;
  }
  .jhNormalMargin {
    margin: 2%;
  }
  .notfront header .grid {
    display: grid;
  }
  .article #bodytext img {
    width:100%;
    max-width:100%;
  }
}