/*
=========================================================
STARTPAGE CSS
=========================================================
 * Innehåller styling specifik för webbplatsens startsida
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
SPECIALLÖSNINGAR PÅ STARTSIDA
--------------------------------------------------------- */

.lp-startpage {
  /* sätt regler här */
}



.lp-startpage-boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -1.5rem;

  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.lp-startpage-boxes > div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 300px;
  padding: 1rem;
  width: 50%;

  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.lp-startpage-boxes > div > div {
  background: #f8f9fc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  height: 100%;
  padding: 1.7rem;

  -webkit-box-pack: justify;
  justify-content: space-between;
}

.lp-startpage-boxes .lp-publicservice-box > div {
  background: #ecf0f6;
}

.lp-startpage-boxes h2.subheading {
  border-bottom: 2px solid #006eab;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}


/*
---------------------------------------------------------
FÄRGBLOCK
--------------------------------------------------------- */

.lp-color-block {
  background-color: #ecf0f6;
  /* background-image: url('/images/18.32ba3d2416a8d035914e4a2/1567690838242/loven_ljusare.png'), url('/images/18.32ba3d2416a8d035914e4a2/1567690838242/loven_ljusare.png'); */
  background-position: 0 0, 100% 100%;
  background-repeat: no-repeat;
  margin: 1.5rem 0 1.5rem;
  padding: 1.5rem 0;
}

.lp-color-block .lp-startpage-boxes > div > div {
  background: #fff;
}

.lp-color-block .lp-startpage-boxes > div > div > .sv-text-portlet:last-child {
  border-top: 1px solid #ecf0f6;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.lp-color-block .lp-startpage-boxes > div > div > .sv-text-portlet:last-child p.normal a {
  -webkit-box-align: center;
  align-items: center;
  color: #006eab;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: end;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  width: 100%;

  -webkit-box-pack: end;
  justify-content: flex-end;
}

.lp-color-block .lp-startpage-boxes > div > div > .sv-text-portlet:last-child p.normal a:hover {
  text-decoration: underline;
}

.lp-color-block .lp-startpage-boxes > div > div > .sv-text-portlet:last-child p.normal a::after {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2022%2023\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23006eab\'%3E%3Cg%20%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22Start%22%20transform%3D%22translate(-433%20-742)%22%3E%3Cg%20id%3D%22Fill-1%22%20transform%3D%22translate(215%20708)%22%3E%3Cpath%20d%3D%22M229%2034.83c-6.065%200-11%204.92-11%2010.968%200%206.046%204.935%2010.966%2011%2010.966s11-4.92%2011-10.966c0-6.047-4.935-10.967-11-10.967zm0%201.688c5.15%200%209.308%204.146%209.308%209.28%200%205.134-4.158%209.28-9.308%209.28-5.15%200-9.308-4.146-9.308-9.28%200-5.134%204.158-9.28%209.308-9.28zm.608%203.875l-1.216%201.187%203.384%203.374h-8.7v1.687h8.7l-3.384%203.375%201.216%201.186%205.42-5.404-5.42-5.405z%22%20id%3D%22Shape%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  content: '';
  display: inline-block;
  height: 2rem;
  margin: 0 0 0 0.8rem;
  width: 2rem;
}

.lp-color-block .lp-startpage-boxes > div > div > .sv-text-portlet p.normal {
  margin-bottom: 0;
}

/* evenemang */

.lp-color-block .lp-startpage-boxes > div:last-child h2.subheading {
  border-color: #006eab;
}

.lp-color-block .lp-startpage-boxes > div:last-child > div > .sv-text-portlet:last-child p.normal a {
  color: #006eab;
}

.lp-color-block .lp-startpage-boxes > div:last-child > div > .sv-text-portlet:last-child p.normal a::after {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2022%2023\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23725c19\'%3E%3Cg%20%20id%3D%22Page-1%22%3E%3Cg%20id%3D%22Start%22%20transform%3D%22translate(-433%20-742)%22%3E%3Cg%20id%3D%22Fill-1%22%20transform%3D%22translate(215%20708)%22%3E%3Cpath%20d%3D%22M229%2034.83c-6.065%200-11%204.92-11%2010.968%200%206.046%204.935%2010.966%2011%2010.966s11-4.92%2011-10.966c0-6.047-4.935-10.967-11-10.967zm0%201.688c5.15%200%209.308%204.146%209.308%209.28%200%205.134-4.158%209.28-9.308%209.28-5.15%200-9.308-4.146-9.308-9.28%200-5.134%204.158-9.28%209.308-9.28zm.608%203.875l-1.216%201.187%203.384%203.374h-8.7v1.687h8.7l-3.384%203.375%201.216%201.186%205.42-5.404-5.42-5.405z%22%20id%3D%22Shape%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}


/*
---------------------------------------------------------
Startsidans nyheter/driftmeddelanden
--------------------------------------------------------- */

/* nyheter */

.lp-news-list a.normal {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
}

.lp-news-list .small + .small:before {
  border-left: 1px solid rgb(119, 119, 119);
  content: '';
  display: inline-block;
  height: 14px;
  margin-bottom: -0.2rem;
  margin-left: 0.5rem;
  padding-left: 0.8rem;
}

/* driftmeddelanden */

.lp-service-news {
  margin: 0 0 1rem;
}

.lp-service-news li {
  -webkit-box-align: center;
  align-items: center;
  background: #ecf0f6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  padding: 1rem;
}

.lp-service-news .sv-channel-item .small {
  line-height: 1;
}

.lp-service-news .sv-channel-item .small:after {
  border-left: 1px solid #777;
  content: 'Driftstörning';
  display: inline-block;
  margin-left: 0.8rem;
  padding-left: 0.8rem;
}

.lp-service-news .sv-channel-item a.normal {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin: 0;
}

.lp-service-news .lp-icon-wrapper {
  -webkit-box-align: center;
  align-items: center;
  background: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  padding-right: 2rem;
}

.lp-service-news  .lp-icon {
  color: #c67401;
  font-size: 4rem;
}


.lp-service-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}


/*
---------------------------------------------------------
HERO
--------------------------------------------------------- */

.lp-hero {
  background-color: #f5f5f5;
  background-position: 50% 0;
  height: 43vh;
  margin-top: 0rem;
}


/*
---------------------------------------------------------
STARTSIDESPUFFAR
--------------------------------------------------------- */

.lp-startboxes {
  -webkit-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  margin: -13% -1.5rem 0.5rem;
}

.lp-startboxes > div {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 0 0 1rem;
  min-width: 250px;
  padding: 0 0 0 1.5rem;
  width: 25%;
	
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}



.lp-startboxes .sv-text-portlet-content {
  background-color: #006eab;
  /* background-image: url('/images/18.32ba3d2416a8d0359141a20f/1574255124095/loven.png'); */
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 50%;
  min-height: 108px;
  padding: 1.5rem;
   
}

.lp-startboxes h2.subheading {
  margin: 0;
}

.lp-startboxes h2.subheading br {
  display: none;
}


.lp-startboxes h2.subheading a {
  color: #fff;
  display: block;
  padding-right: 3.2rem;
}

.lp-startboxes h2.subheading a:focus {
   text-decoration: underline;
}

.lp-startboxes h2.subheading a:hover {
   text-decoration: underline;
}

.lp-startboxes h2.subheading a:after {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2022%2023\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23fff\'%3E%3Cg%20%20transform%3D%22translate(-433%20-742)%22%3E%3Cpath%20d%3D%22M229%2034.83c-6.065%200-11%204.92-11%2010.968%200%206.046%204.935%2010.966%2011%2010.966s11-4.92%2011-10.966c0-6.047-4.935-10.967-11-10.967zm0%201.688c5.15%200%209.308%204.146%209.308%209.28%200%205.134-4.158%209.28-9.308%209.28-5.15%200-9.308-4.146-9.308-9.28%200-5.134%204.158-9.28%209.308-9.28zm.608%203.875l-1.216%201.187%203.384%203.374h-8.7v1.687h8.7l-3.384%203.375%201.216%201.186%205.42-5.404-5.42-5.405z%22%20transform%3D%22translate(215%20708)%22%20id%3D%22Fill-1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  background-size: 2.2rem 2.2rem;
  content: '';
  display: inline-block;
  height: 2.2rem;
  margin-left: 1rem;
  margin-right: -3.3rem;
  width: 2.2rem;
}

.lp-startboxes p.normal {
  color: #fff;
  margin: 1rem 0 0;
}

/* Stor mittenpuff */

.lp-startboxes > div:nth-child(2) {
  width: 40%;
}

.lp-startboxes > div:nth-child(2) .sv-text-portlet-content {
  padding: 2.8rem;
}

.lp-startboxes > div:nth-child(2) h2.subheading {
  font-size: 3.8rem;
}

.lp-startboxes > div:nth-child(2) h2.subheading a:after {
  background-size: 3rem 3rem;
  height: 3rem;
  width: 3rem;
}

.lp-startboxes > div:nth-child(2) p.normal {
  font-size: 1.6rem;
}


.lp-startpage-boxes > div > div {
  padding: 1rem;
}


/*
---------------------------------------------------------
Medborgarservice startsida
--------------------------------------------------------- */

/* Ikon */

.lp-switch-box {
  -webkit-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  margin-top: 2rem;
}

.lp-switch-box p.normal {
  margin: 0;
}

.lp-switch-box p.preamble {
  font-size: 3.6rem;
  line-height: 1;
  margin: 0;
}

.lp-switch-box p.preamble a {
  -webkit-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  margin: 0;
  text-decoration: none;
}

.lp-switch-box p.preamble a:after {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2050%2050\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23000\'%3E%3Cpath%20%20d%3D%22M19.875%208.313l-2.844%202.843L30.906%2025%2017.031%2038.875l2.813%202.813%2015.281-15.282L36.563%2025l-1.438-1.406z%22%2F%3E%3C%2Fsvg%3E');
  background-size: 1.5rem 1.5rem;
  content: '';
  display: inline-block;
  height: 1.5rem;
  margin: 0 0 0 0.5rem;
  width: 1.5rem;
}


.lp-contact-iconwrapper {
  -webkit-box-align: center;
  align-items: center;
  background: #006eab;
  border-radius: 50%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  height: 10rem;
  margin: 0 2rem 0 0;
  width: 10rem;

  -webkit-box-pack: center;
  justify-content: center;
}

.lp-contact-iconwrapper .lp-icon {
  font-size: 2em;
}


/* Meny */

.lp-publicservice-box .lp-quick-links {
  margin-top: 1rem;
  padding-top: 1rem;
  position: relative;
}

.lp-publicservice-box .lp-quick-links:before {
  border-top: 1px solid #ecf0f6;
  content: '';
  left: 1rem;
  position: absolute;
  right: 1rem;
  top: 0rem;
}


.lp-publicservice-box .lp-quick-links .lp-icon-wrapper {
  -webkit-box-align: center;
  align-items: center;
  background-color: #006eab;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  height: 5rem;
  margin: 0 1rem 0 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 5rem;

  -webkit-box-pack: center;
  justify-content: center;
}

.lp-publicservice-box .lp-quick-links a:hover .lp-icon-wrapper {
  background-color: #006eab;
}

.lp-publicservice-box .lp-quick-links .lp-icon {
  color: #fff;
  margin: 0;
}

.lp-publicservice-box .lp-quick-links a:hover .lp-icon {
  color: #fff;
}