/*
=========================================================
BOX NAVIGATION CSS
=========================================================
 * Innehåller styling för en sidas byline
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/

/*
---------------------------------------------------------
FORMATMALLAR
--------------------------------------------------------- */

.lp-box-navigation-wrapper li a {
  -webkit-box-align: start;
  align-items: flex-start;
  color: #222;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex !important;
  -ms-flex-align: start;
  font-size: 1.7rem;
  font-weight: 600;
  text-decoration: none;
}

.lp-box-navigation-wrapper li p.normal {
  font-size: 1.4rem;
  line-height: 1.7;
}

/*
---------------------------------------------------------
LAYOUT
--------------------------------------------------------- */

.lp-box-navigation {
  margin: 4rem 0 6rem;
  position: relative;
}

.lp-box-navigation-wrapper {
  display: flex;
  padding: 4rem 0;

  flex-wrap: wrap;
}

.lp-box-navigation-wrapper:before {
  background: rgba(253, 200, 0, 0.2);
  content: '';
  display: block;
  height: 100%;
  left: -95px;
  position: absolute;
  right: 0;
  top: 0;
  width: 1360px;
  z-index: 0;
}

.lp-box-navigation-wrapper li {
  border-right: 1px solid rgba(151, 151, 151, 0.25);
  border-top: 1px solid rgba(151, 151, 151, 0.25);
  box-sizing: border-box;
  padding: 2rem;
  width: 33.33%;
  z-index: 1;
}

.lp-box-navigation-wrapper li:nth-child(1),
.lp-box-navigation-wrapper li:nth-child(2),
.lp-box-navigation-wrapper li:nth-child(3) {
  border-top: none;
}

.lp-box-navigation__list-item:nth-child(3n + 3) {
  border-right: none;
}

.lp-box-navigation-wrapper li:nth-child(3n + 1) {
  padding-left: 0;
}

.lp-box-navigation-wrapper li:nth-child(3n + 3) {
  padding-right: 0;
}

.lp-box-navigation-wrapper .lp-box-navigation__list-item--tablet-filler {
  display: none;
}


/*
---------------------------------------------------------
IKON
--------------------------------------------------------- */

.lp-box-navigation-wrapper li a:before {
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%2020%2020\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23222\'%3E%3Cg%20%20id%3D%22Design%22%3E%3Cg%20id%3D%22Nystart-2019-v2%22%20transform%3D%22translate(-1039%20-2017)%22%3E%3Cg%20id%3D%22St%C3%A5ndpunkter%22%20transform%3D%22translate(213%201739)%22%3E%3Cg%20id%3D%22viktig-fr%C3%A5ga%22%20transform%3D%22translate(801%2093)%22%3E%3Cpath%20d%3D%22M35%20185c-5.518%200-10%204.482-10%2010s4.482%2010%2010%2010%2010-4.482%2010-10-4.482-10-10-10zm0%20.87a9.124%209.124%200%200%201%209.13%209.13%209.124%209.124%200%200%201-9.13%209.13%209.124%209.124%200%200%201-9.13-9.13%209.124%209.124%200%200%201%209.13-9.13zm-1.345%204.334a.508.508%200%200%200-.054.013.437.437%200%200%200-.217.747L37.417%20195l-4.035%204.035a.44.44%200%200%200%200%20.625.44.44%200%200%200%20.625%200l4.348-4.347a.434.434%200%200%200%200-.625l-4.348-4.348a.436.436%200%200%200-.353-.136z%22%20id%3D%22Shape%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  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');
  background-repeat: no-repeat;
  content: '';
  display: inline-block;
  height: 24px;
  margin-left: -3px;
  margin-right: 10px;
  margin-top: 2px;
  width: 24px;

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

/*
---------------------------------------------------------
HOVER
--------------------------------------------------------- */

.lp-box-navigation-wrapper .lp-box-navigation-clickable-area {
  background: transparent;
  border-radius: 4px;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

.lp-box-navigation-wrapper .lp-box-navigation-clickable-area:hover {
  background: #fff;
  margin: -2rem;
  padding: 2rem;
}