/*
=========================================================
DECORATIONS CSS
=========================================================
 * Innehåller styling av dekorationer
 *
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


/*
---------------------------------------------------------
BILDPUFFAR
--------------------------------------------------------- */

.lp-boxes {
  display: flex;
  margin: 3rem -1.5rem 2rem;

  flex-wrap: wrap;
}

.lp-boxes > div {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0 0 3rem;
  min-width: 250px;
  padding: 0 1.5rem;
  width: 25%;

  flex: 1 1 auto;
}

.lp-boxes .sv-image-portlet {
  /* fix för IE11 */
  flex: 0 0 auto;
}

.lp-boxes > .sv-layout > .sv-text-portlet,
.lp-boxes > .sv-layout > .sv-layout {
  background: #eee;
  height: 100%;
  padding: 2rem;
}

.lp-boxes h2.subheading {
  margin: 0 !important;
}

.lp-boxes h2.subheading a {
  align-items: center;
  box-sizing: border-box;
  color: #000;
  display: flex;
  -ms-flex-align: center;
  font-size: 2.2rem;
}

/*
---------------------------------------------------------
PUFF
--------------------------------------------------------- */

.lp-box {
  background-color: #f5f4f1;
  border-radius: 6px;
  margin-bottom: 3rem;
  padding: 30px 30px;
}

/*
---------------------------------------------------------
Dekoration: Etikett h2 underrubrik
--------------------------------------------------------- */

.lp-puff-headline {
  border-bottom: 1px solid #dedede;
  margin: 0 0 1.5rem;
  position: relative;
}

.lp-puff-headline h2 {
  border-bottom: 4px solid rgba(253, 200, 0, 1);
  display: inline-block!important;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.37;
  margin: 0 9.5rem -0.1rem 0 !important;
  padding: 1.1rem 1rem 0.6rem 0;
}

/*
---------------------------------------------------------
Dekoration: Informationssruta
--------------------------------------------------------- */

.lp-box-information {
  background-color: rgba(253, 200, 0, 0.1);
  border-left: 5px solid rgba(253, 200, 0, 1);
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  margin: 3rem 0;
  padding: 3rem 3rem 1rem;
}

.lp-box-information h2,
.lp-box-information h2.subheading {
  color: #454444;
  font-family: 'Open Sans',Arial,Helvetica, sans-serif !important;
  font-size: 1.8rem;
  font-weight: bold;
}

.lp-box-information a > img.sv-linkicon {
  display: none;
}

/*
---------------------------------------------------------
Dekoration: Artikellista
--------------------------------------------------------- */

.lp-article-list {
  border: 1px solid #d7d6d2;
  border-radius: 4px;
  margin-bottom: 4rem;
}

.lp-article-list ul {
  padding: 1rem;
}

.lp-article-list .sv-archive-portlet + .sv-archive-portlet ul {
  padding-top: 0;
}

.lp-article-list li {
  border-radius: 4px;
  line-height: 1.3;
  margin: 0 0 2rem;
  padding: 0.8rem 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.lp-article-list li:after {
  background: #ccc;
  bottom: -1rem;
  content: '';
  display: block;
  height: 1px;
  margin-left: -1rem;
  position: absolute;
  width: 100%;
}

.lp-article-list li:hover {
  background-color: rgba(253, 200, 0, 0.4);
}

.lp-article-list li:last-child {
  margin-bottom: 0;
}

.lp-article-list li:last-child:after {
  content: none;
}

.lp-article-list .sv-archive-portlet + .sv-archive-portlet li:first-child {
  margin-top: 1rem;
}

.lp-article-list .sv-archive-portlet + .sv-archive-portlet li:first-child:before {
  background: #ccc;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  top: -1rem;
  width: 100%;
}

/*--- Formatmallar ---*/

.lp-article-list h3 a span {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
}

.lp-article-list .sv-archive-portlet ul li:hover h3 a {
  text-decoration: none;
}

.lp-article-list h2,
.lp-article-list h3 {
  display: block;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.lp-article-list li > span {
  display: inline-block;
  margin: 0 0 0.8rem;
}

.lp-article-list .normal {
  font-size: 1.5rem;
}

.lp-article-list .sv-text-portlet a {
  align-items: center;
  border-top: 1px solid #ccc;
  display: flex;
  padding: 2rem;
  text-decoration: none;
}

.lp-article-list .sv-text-portlet a:hover {
  background-color: rgba(253, 200, 0, 0.4);
  text-decoration: underline;
}

.lp-article-list .sv-text-portlet .sv-text-portlet-content a::before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2032%2032\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23222\'%3E%3Cpath%20%20d%3D%22M16%203C8.832%203%203%208.832%203%2016s5.832%2013%2013%2013%2013-5.832%2013-13S23.168%203%2016%203zm0%202c6.086%200%2011%204.914%2011%2011s-4.914%2011-11%2011S5%2022.086%205%2016%209.914%205%2016%205zm-1.781%204.281L12.78%2010.72%2018.062%2016l-5.28%205.281%201.437%201.438%206-6%20.687-.719-.687-.719z%22%2F%3E%3C%2Fsvg%3E') !important;
  height: 24px;
  width: 24px;
}

.lp-article-list .sv-text-portlet p.normal {
  margin-bottom: 0;
}

.lp-article-list .small + .small:before {
  content: '|';
  margin: 0 0.5rem 0 0;
}