* {vertical-align: baseline;font-weight: inherit;font-family: inherit;font-style: inherit;font-size: 100%;border: 0 none;outline: 0;padding: 0;margin: 0; box-sizing: border-box;}
:root{
  --color-main: #0976B5;
  --color-main-faint: #e9f3f8;
  --color-main-dark:#075684;;
  --color-bg: #FFF;
  --color-secondary: #fdf001;
  --color-accent: #E30613;
  --color-text: #212121;
  --color-text-heading: #212121;
  --color-text-inv: #FFFFFF;
  --color-text-faint: #a59eb5;
  --font-heading: 'Scope One';
  --font-normal: 'Cairo';
  --font-accent: 'Slabo 27px';
  --radius: 5px;
  --color-blue-gradient: linear-gradient(176deg, var(--color-main-dark), var(--color-main));
  --color-gray-gradient: linear-gradient(-45deg, #ededed00,#edededFF);
}
@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Regular.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: 'Scope One';
  src: url('/fonts/ScopeOne-Regular.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}
body{
  font-family: var(--font-normal), sans-serif;
  font-size: 16px;
  margin: 0;
  line-height: 1.4;
  color: var(--color-text);
  background-color: #f0f0f0;
  background-image: url("/images/hoffman.png");
}
a{text-decoration: none; color: var(--color-main-dark);}
h1,h2,h3{font-family: var(--font-heading), sans-serif;
  margin-bottom: 6px;
  color: var(--color-main-dark);
}
small{font-size: 12px;}
strong{font-weight: bold;}
h1{font-size: 1.3em; line-height: 1;} 
h2{font-size: 1.1em; line-height: 1;} 
h3{font-size: 1em; line-height: 1;} 
#container{max-width: 1100px; margin: 0;border: 5px solid var(--color-main);
  padding: 10px;
  background-color: #FAFCFD;
  /*border-top: none;
border-bottom: none;*/
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows:40px auto;
  grid-template-areas:
    "expressen"
    "header"
    "annonsmarkning"
    "nyhet"
    "intro"
    "profiler"
    "alternativ"
    "resultat"
    "texter"
    "footer";
  overflow: hidden;
  position: absolute;
  z-index: -2;
}
#expressen {grid-area: expressen;}
#header {grid-area: header;}
#annonsmarkning{grid-area: annonsmarkning}
#nyhet{grid-area:nyhet}
#intro {grid-area: intro;}
#profiler {grid-area: profiler; margin: 20px 0;}

#alternativ {grid-area: alternativ;}
#resultat {grid-area: resultat;}
#texter {grid-area: texter;}
#footer{grid-area: footer;}
#header{background-color: var(--color-main); 
  color: var(--color-text-inv); 
  margin: 20px -20px 0px -20px;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 1.3em;
  font-family: var(--font-normal);
  overflow: visible;
}
#annonsmarkning{
  text-align: center;
  font-size: 10px;
  padding: 2px;
  background-color: var(--color-main-faint);
  margin: 0px -20px 0px -20px;
  text-transform: uppercase;
  color:#666;
}
#nyhet{
  margin: 0px 0px 20px 0px;
  text-align: center;
  background-color: rgba(227,6,19,0.03);
  border: 2px dotted var(--color-accent);
  padding: 3px 5px;
}
#profilbox{display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 20px 0;
  text-align: left;}
#profilbox div {
  flex-basis: 45%;
  border-radius: var(--radius);
  text-align: center;
  background-color: #FFF;
  box-shadow: 0px 2px 10px #0976B522;
  font-size: 15px;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  padding: 10px 20px;
}
#profilbox div:hover{cursor: pointer;}
#menu{list-style: none; display: flex; justify-content: space-between;}
#menu li{text-transform: uppercase; font-size: 14px;}
#menu a {color: inherit;}
#footer{background-color: var(--color-main);
  color: var(--color-text-inv);
  margin: -20px;
  margin-top: 20px;
  padding: 20px;
  font-size: 14px;
  display: flex;
}
#footer h3{font-size: 16px; color: #FFF;}
#footer{display: flex; justify-content: space-between; gap:50px}
#footer a{color:var(--color-secondary)}
#footer_ansvarig{display: flex; gap:10px; flex-direction: column;}
#footer_ansvarig img{
  width: 98px;height: 98px;
  border-radius: 50%; 
  border:2px solid #FFFFFF; 
  box-shadow: rgba(50, 50, 93, 0.8) 0px 2px 5px -1px, rgba(0, 0, 0, 0.8) 0px 1px 3px -1px;
}
#ingress{margin-top: 1em;}
#ingress p{margin-bottom: 1em;}
#mform{display: flex;
  flex-direction: column;
  row-gap: 30px;}
#visafler{font-weight: bold; color: var(--color-main);}
#visafler:hover{cursor: pointer;}
#visafler::after{
  content: '';
  width: 14px;
  height: 14px;
  margin-left: 5px;
  background-image: url('images/arrow.svg');
  background-size: contain;
  margin-bottom: -2px;
  position: static;
  display: inline-block;
  transform: rotate(90deg);
}
.rotated::after {
  transform: rotate(-90deg) !important;
}
#expressen{display: flex; justify-content: space-between; align-items: center;}
#expressen img:last-child{/*margin-top: -10px*/}
#fleralternativ{display: flex;
  flex-direction: column;
  row-gap: 30px; display: none;}
.checklist{list-style: none; margin-left: 1.5em;}   
.checklist li{margin-bottom: 6px;}
.checklist li::before {content: '\2714\0020'; color: var(--color-main-dark);
  display: inline-block; width: 1.5em;
  margin-left: -1.5em;
}

label{font-weight: bold;}
/*CHECKBOX*/
input[type="checkbox"] {-webkit-appearance: none; appearance: none;background-color: #fff;margin: 0;
  font: inherit;
  color: #FFF;
  width: 1.5em;
  height: 1.5em;
  border: 0.1em solid var(--color-main);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}
input[type="checkbox"]::before {
  content: "";
  width: 1em;
  height: 1em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-main-dark);
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
#kryssrutor{display: flex; flex-direction: column;}
#kryssrutor > div {flex-basis: 30%;}
#kryssrutor > div > div {display: flex;margin: 6px 0;}
#kryssrutor > #kr_malgrupp{flex-basis:35%;}
#kryssrutor > #kr_nat{flex-basis:15%;}
#kryssrutor > #kr_hast{flex-basis:20%;}
#kryssrutor label{font-weight: normal; margin-left: 15px; line-height: 1.5em;}
.besok_btn{width: 150px;
  height: 60px;
  background-color: var(--color-accent);
  color: #FFF;
  border-radius: 30px;
  display: block;
  line-height: 60px;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  margin: auto;
  font-size: 1.3em;
}
@media (min-width:840px){    
  #kryssrutor{flex-direction: row; flex-wrap: nowrap;column-gap: 20px;}
}

/*RESULTAT*/
#resultat{display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; margin: 30px 0;}
#resultat .produkt{border-radius: var(--radius);
  margin: 20px 0;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
  background-color: #FFF;
  padding: 10px;
  text-align: center;
  position: relative;
}
#resultat h2{margin-bottom:15px}
#resultat .produkt .nolink{color: var(--color-text-faint)}
#resultat .produkt .nolink .checklist li::before {color: var(--color-text-faint);}
.stickers {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: -30px;
  right: 0px;
}
.maroon {
  background-color: var(--color-main-dark);
  color: #FFF;
}
@media (min-width: 769px) {
  .sticker {
    width: 160px;
  }
}
.sticker {
  border-top-left-radius: 10px;
  width: 140px;
  display: inline-block;
  font-size: 0.8em;
  border-top-right-radius: 10px;
  height: 30px;
  padding: 7px;
  font-weight: bold;
}
.prod_main{display: flex;flex-direction: column;row-gap: 10px; align-items: stretch; justify-content: flex-start; row-gap: 20px}
.prod_main img{max-height: 50px;max-width: 120px;}
.surf .pris{font-weight: bold; color: var(--color-text-faint);}
.surf .pris.rabatterad-text{ color: var(--color-accent);padding-left: 16px;}
.surf .pris.rabatterad-text a{ color: inherit}
.pris.pris-text{color:  var(--color-main-dark)}
.surf{flex-basis: 30%; font-size: 2em; font-weight: bold; line-height: 16px;
  display: flex; justify-content: space-evenly;color: #777;
  padding: 10px 0;
  background-color: #F6F6F6;
  border: 1px solid #EEE;
}
.surf > div{flex-basis: 33%;}
.operatorer .surf > div{
  flex-basis: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.surf > div > small{text-align: left;}
.surf .teknik {flex-basis: 20% !important}
.surf .amne{text-transform: uppercase; font-size: 14px; line-height: 10px;}
.plus{text-align: left;}
.logga{min-width: 150px; flex-basis: 30%;}
.visamer{min-width: 150px; flex-basis: 30%;}

.operatorsinfo{display:flex; flex-direction: column;}
.oldpris{text-decoration: line-through; color: var(--color-text-faint);font-size: 14px; line-height: 10px;margin-right: 22px;}
.gruppris{color: var(--color-text-faint);font-size: 14px; line-height: 10px;margin-right: 22px;}
/*Tooltip:*/
.tooltip {
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  font-weight: bold;
  color: #FFF;
  line-height: 12px;
  font-size: 12px;
  background-color: var(--color-main);
  font-family: var(--font-accent);
  margin-top: -10px;
  padding-top: 2px;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.bg {
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  height:30px; width:30px;
  border-radius: 0px;
  background-color: #FFF;
  /*border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #444;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
  font-family: var(--font-normal);
  position: absolute;
  z-index: 50;
  top: 20px;
  right: -25px;
  line-height: 1.4;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext,.tooltip:focus .tooltiptext,.tooltip:active .tooltiptext {
  visibility: visible;
}

/*EXTRA INFO*/
.extrainfo{display:flex; flex-direction: column; align-items: stretch; 
  text-align: left; 
  font-size: 0.8em;
  margin-top: 10px;

}
.extrainfo > .extradiv > section {
  display: flex;
  align-items: baseline;
  margin-bottom: 5px;
}
.extrainfo > .extradiv > section > * {
  padding: 0;
  margin: 0;
}
.extrainfo > .extradiv > section > span {
  flex-basis: 100%;
  border-bottom: 2px dotted #999;
}
.extrainfo h3{font-size: 15px;margin-top: 10px}
h4,h5{white-space:nowrap;}
h5{text-transform: uppercase; font-weight: bold;}
.special {
  background-color: var(--color-main-faint);
  padding: 10px;
  font-weight: bold;
  margin-top: 10px;
  color: var(--color-main-dark);
  font-style: italic;
  border-radius: 4px;
}
/*VANLIGA FRÅGOR*/
#vanligafragor{/*max-width: 900px;*/}
#faq{display: flex; flex-direction: column;}
#faq .fos{
  padding-top: 20px;
  display: flex; 
  flex-direction: column;
}
.fos .fosbild {display: none;}

#faq h3{font-size: 1.4em;}
#faqindex{list-style-position: inside;}
#faq ul{padding-left: 2em;}
.indexfraga{border-bottom: 2px dotted var(--color-text-faint);padding: 10px 0;}
.indexfraga::marker{margin: 15px; font-family: var(--font-heading); color: var(--color-main-dark); font-weight: bold;}
.indexfraga a{color: var(--color-text-heading);}
#vanligafragor h4{font-weight: bold;}
#vanligafragor p, #vanligafragor ul{margin-bottom:1em}
.hidemob{display: none;}

@media (min-width:840px){
  #footer_ansvarig{flex-direction: row;}
  #container{margin: 0 auto;
    display: grid;
    padding: 20px;
    grid-template-columns: 0.38fr 0.62fr;
    grid-template-rows: 40px auto;
    grid-template-areas: 
      "expressen expressen"
      "header header"
      "annonsmarkning annonsmarkning"
      "nyhet nyhet"
      "intro profiler"
      "intro alternativ"
      "resultat resultat"
      "texter texter"
      "footer footer";
    left: calc(50% - 550px);
  }
  #intro{border-right: 1px dashed var(--color-main); margin-right: 20px}
  #alternativ {}

  h1{font-size: 1.8rem;line-height:120%}
  h2{font-size: 1.5rem;  line-height: 32px;}

  /*RESULTATLISTA*/
  .prod_main{flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}

  .pris{}
  .surf{flex-basis: 35%; line-height: 16px; background-color: unset; border: unset;}
  .surf .amne{text-transform: uppercase; font-size: 14px; line-height: 10px;}
  .plus{flex-basis: 35%; display: unset; padding-left: 20px}
  .logga{ flex-basis: 15%; min-width: 120px;text-align: left;}
  .visamer{ flex-basis: 15%;min-width: 150px;}
  .extrainfo{flex-direction: row; justify-content: space-between; align-items: flex-start;
    column-gap: 30px; max-height: 140px}
  .extrainfo > .extradiv{flex-basis: 25%;}
  .hidedesktop{display: none;}
  .hidemob{display: unset;}
  .semerinfo{font-size: 0.8em;}
  .semerinfo::before{
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('/images/arrow.svg');
    background-size: contain;
    position: static;
    display: inline-block;
    transform: rotate(90deg);
  }

  /*VANLIGA FRÅGOR*/
  #vissteduatt .fos, #faq .fos{
    font-size: 1.3em;
    /*line-height: 200%;*/
    padding-top: 20px;
    display: grid; 
    grid-template-columns: 270px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas: 
      "bild fraga"
      "bild svar";
  }
  .fos .fraga {grid-area: fraga;}
  .fos .svar {grid-area: svar;}
  .fos .fosbild {grid-area: bild; display: unset;}
  #faq .fos:nth-child(even){
    grid-template-columns: 1fr 270px;
    grid-template-areas: 
      "fraga bild"
      "svar bild";
  }

}
.extrainfo, .operatorsinfo, .pilner2{display: none;}

/* NAV */
nav.navigation ol, nav.navigation ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  font-size: 14px;
  height: 40px;
  font-weight: bold;
}
nav.navigation{
  position:relative;
  height:40px;
  z-index:2;
}
ul.nav-menu{
  padding-left:10px;
}
ul.nav-menu li{box-sizing: border-box;border-bottom: 2px solid var(--color-main);transition: all 0.2s;}
ul.nav-menu li a{
  height:40px;
  line-height:40px;
  padding:0;
  color:#EEE;
  text-decoration:none;
  -webkit-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition: all 0.5s;
}
ul.nav-menu li:hover{
  border-bottom: 2px solid var(--color-accent);

}
ul.nav-menu li a:hover{
  color:#FFF;
}
.nav-toggle{
  display:none;

  position:absolute;
  top:0;
  right:0;
  width:40px;
  height:40px;
  background-color:var(--color-main-dark);
  cursor:pointer;
}
span.icon-bar{
  position:absolute;
  right:7px;
  display:block;
  width:26px;
  height:2px;
  background-color:#ffffff;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.icon-bar:nth-child(1){
  top:12px;
}
.icon-bar:nth-child(2){
  top:19px;
}
.icon-bar:nth-child(3){
  top:26px;
}
.nav-overlay{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:rgba(0,0,0,0.5);
  z-index:1;
  opacity:0;
  visibility:hidden;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.nav-overlay.active{
  opacity:1;
  visibility:visible;
}

/* ICON BARS ANIMATION */

.nav-toggle.active .icon-bar:nth-child(1){
  top:19px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.nav-toggle.active .icon-bar:nth-child(2){
  width:0;
}
.nav-toggle.active .icon-bar:nth-child(3){
  top:19px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* MEDIAQUERIES */

@media screen and (max-width:768px){
  #header{padding: 0 10px;}
  #footer{  flex-direction: column;}
  nav.navigation ol, nav.navigation ul{height: 0;}
  ul.nav-menu{
    position:absolute;
    top:40px;
    width:100%;
    height:0;
    padding:0;
    overflow:hidden;
  }
  ul.nav-menu.active{
    height:auto;
    display: block;
  }
  ul.nav-menu li{
    width:100%;
    display: block;
    background-color: var(--color-main-dark);
    border-bottom: 1px solid var(--color-main);
    border-left: 3px solid var(--color-main-dark);
    padding: 0 10px;

  }
  ul.nav-menu li:hover{
    border-left: 3px solid #FFF;
    border-bottom: 1px solid var(--color-main);}
  ul.nav-menu li a{
    display: block;
    width:100%;
    padding:0;
    text-align:left;
  }
  ul.nav-menu li a:hover{
    color:#FFF;

  }
  .nav-toggle{
    display:block;
  }
}
.fade-in {
  opacity: 1;
  animation: fade 0.5s linear;
}


@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
@media screen and (min-width:840px){
  .nav-overlay.active{
    visibility:hidden;
    opacity:0;
  }
}
#profiler{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#profiler img{
  height:32px;
}
#profiler div{
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column; 
  text-align: center; 
  flex-basis: 48%;
  background-color: var(--color-main-faint);
  border: 1px solid var(--color-main-faint);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 10px 20px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
  transition: all 0.2s linear;
}
#profiler div:hover{
  /*border: 1px solid var(--color-main);*/
}
#profiler a{color: var(--color-text)}
#profiler div:hover a{color: var(--color-accent)}
#profiler .gradient-border {
  --border-width: 3px;
  border-radius: 3px;
  overflow: visible;
  position: relative;
}
#profiler div.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  z-index: -1;
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  background: linear-gradient(40deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0, #5ff281,#abf25f,#f2cb5f, #f25f61,#f25fd0,#a65ff2 ,#5f86f2 );
  background-size: 400% 400%;
  background-position: 0 100%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 2s linear infinite;
}
.special.blackweek {
  border: 7px solid #fff;
  border-image: repeating-linear-gradient( -45deg, #000, #111 10px, #C70512 10px, var(--color-accent) 20px ) 7;
  background-color:#000;
  color:var(--color-secondary) !important;
}
.special.blackweek a {
  color:var(--color-secondary) !important;
}
h1 em{
  background-color:#000; color: var(--color-secondary); padding:0 5px; line-height: 150%;
  font-style: normal;
  border-radius: 0.2em;
  position: relative;
  transform: skewX(-10deg);
  display: inline-block;
  font-size: 0.8em; font-weight: bold;
  font-family: var(--font-normal);
}
@keyframes moveGradient {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 100% 0%;
  }
  }
  @media screen and (min-width:768px){
    #profiler{flex-wrap: nowrap; height: 104px}
    #profiler div{flex-basis: 25%; padding: 10px 20px;}
  }