/* STARTPAGE CUSTOM START - FELESTAD EDIT OF F�RSVARSMAKTEN.SE STYLE IMAGE-WRAPPERS
------------------------------------------------------------------------------------------------------------ */

/* NEW STYLE START*/
#h1StartpageHeader {
display:none;
}

.page-default .startpage-image {
	margin-bottom: 22px
}

#startpage_list .row-line {
	margin-bottom: 30px;
}
#startpage_list .row-line li {
  background: #fff;
  overflow: hidden;
}

.product-buttons .button-info, .product-buttons .buy-button {
	display:none !important;
}
.startpage-product-item {
	padding:15px;
}

#startpage_list .row-line .custom-item-link {
  overflow: hidden;
  position: relative;
}
#startpage_list .row-line .custom-item-text {
  display:block;
  z-index:99;
  color:#fff;
}
#startpage_list .row-line .custom-item-text h2::after {
  background-image: url("https://www.sweco.se/Static/Builds/img/angle-right-dark.svg");
  background-size: contain;
  content: "";
  display: block;
  height: 11px;
  position: absolute;
  right: 20px;
  top: 17px;
  width: 7px;
}
#startpage_list .row-line li h2 {
	padding: 15px;
  	font-size: 14px;
  	margin: 0;
  	background: #fff;
  	font-family: SwecoSans;
      position: relative;
}
#startpage_list .row-line li a img {
	transform: scale(1);
    transition: .2s ease-in-out;
}
#startpage_list .row-line li a img:hover {
	transform: scale(1.05);
  transition: .2s ease-in-out;
}

#startpage_list .li-group-1 a img {
  	transition: transform .325s ease-out;
}
#startpage_list .li-group-1:hover a img {
  	transform: scale(1.05);
}

#startpage_list h2 {
	text-transform: none !important;
}
.custom-item-image {
  	width: 100%
  }

@media only screen and (max-width: 63em) and (min-width: 0) {
	.custom-item-image {
  	width: 100%
  }
  #startpage_list ul li {
    width:100% !important;
    margin:0 0 30px 0 !important;
  }
}
/* NEW STYLE END*/
.green-arrow {
  fill: red; 
  display: none;
}

.halftext-bottomleft p {
  transition: all 375ms ease-out;
  opacity: 0;
  color: #333;
  height: 0px;
  font-size: 18px;
}
.halftext-bottomleft {
  transition: all 375ms ease-out;
  transform: translateY(0px);
  position: absolute;
  bottom: 0;
  left: 25px;
}
.halftext-bottomleft h1 {
  transition: all 375ms ease-out;
  margin-bottom: 20px;
  color: #333;
}
.halftext-topright {
  transition: all 375ms ease-out;
  opacity: 0;
  position: absolute;
  top: 0;
  right: -22.5px;
}
  .halftext-bottomleft h1:after {
    -webkit-transition: all 375ms ease-out .15s;
    -ms-transition: all 375ms ease-out .15s;
    transition: all 375ms ease-out .15s;
    content: ' ';
    width: 0px;
    position: absolute;
    background: #448C37;
    top: 45px;
    left: 0;
    min-height: 6px;
    height: .421rem;
  }
.thirdwidth-wrapper-sp {
  position: relative;
  transition: all .35s ease-out;
  cursor: pointer;
  float: left;
  width: 33.333%;
  max-width: 33.333%;
  min-height: 440px;
}
  .thirdwidth-wrapper-sp:hover > .halftext-bottomleft h1 {
    color: #333 !important;
  }
  .thirdwidth-wrapper-sp:hover > .halftext-bottomleft h1:after {
    width: 3.2rem;
  } 
  .thirdwidth-wrapper-sp:hover > .halftext-topright {
    opacity: 1;
  }
  .thirdwidth-wrapper-sp:hover > .halftext-bottomleft {
    transform: translateY(-61px); 
  }
  .thirdwidth-wrapper-sp:hover > .halftext-bottomleft p {
    opacity: 1;
    height: auto;
  }
  .thirdwidth-wrapper-sp:hover > .halftext-topright figure {
    transform: scale(1);
  }

/*
.halftext-topright svg {
  -webkit-transition: fill .15s;
  -ms-transition: fill .15s;
  transition: fill .15s;
  height: 1.5rem;
  width: 1.5rem;
  transform: scale(1.3);
}
.halftext-topright figure {
  transition: all .375s ease-out;
  fill: #FFF;
  border: 1px solid #FFF;
  height: 4rem;
  border-radius: 50%;
  width: 4rem;
  transform: scale(.75);
  padding: 18px 0px 0px 17.5px;
  display: block;
  background: rgba(0, 0, 0, .35); 
}
*/

  #startpage_list .price-standard:after, .category-page-wrapper ul li:after {
    content: ' ';
    position: relative;
    display: block;
    margin: 0 auto;
    background: #393e40;
    min-width: 1.8rem;
    width: 1.3rem;
    min-height: 5px;
  }
#startpage_list .li-group-1 a img {
  transition: transform .325s ease-out;
}
  #startpage_list .li-group-1:hover a img {
    transform: scale(1.05);
  }
.category-page-wrapper ul li {
  margin-bottom: 1%; 
}
.sp-bigwrapper, .sp-bigwrapper-double {
  display: none;
}

.fullwidth-wrapper-sp {
  width: 100%;
  max-width: 100% !important;
  background: transparent;
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
}
.halfwidth-wrapper-sp {
  position: relative;
  float: left;
  width: 50%;
  max-width: 50%;
  min-height: 440px;
}
.thirdwidth-wrapper-sp:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all .15s ease-in;
  top: 0;
  left: 0;
  z-index: 0;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

  #third-1:before {
    background: url('../images/sp/1.png') 0 0 repeat;
  }
  #third-2:before {
    background: url('../images/sp/2.png') 0 0 repeat;
  }
  #third-3:before {
    background: url('../images/sp/3.png') 0 0 repeat;
  }
  #third-4:before {
    background: url('../images/sp/4.png') 0 0 repeat;
  }
  #third-5:before {
    background: url('../images/sp/5.png') 0 0 repeat;
  }
  #third-6:before {
    background: url('../images/sp/6.png') 0 0 repeat;
  }

/*
  .thirdwidth-wrapper-sp:hover::before, .thirdwidth-wrapper-sp:hover:before {
    -webkit-filter: grayscale(100%) brightness(85%); 
    -webkit-filter: grayscale(100%) brightness(85%);
    -moz-filter: grayscale(100%) brightness(85%);
    -ms-filter: grayscale(100%) brightness(85%);
    -o-filter: grayscale(100%) brightness(85%);
    filter: grayscale(100%) brightness(85%);
    filter: gray; /* IE 6-9 */

@media only screen and (max-width: 901px) and (min-width: 0) {
  .halfwidth-wrapper-sp, .thirdwidth-wrapper-sp {
    width: 100% !important; 
    max-width: 100% !important;
  }
}

@media only screen and (max-width: 901px) and (min-width: 0) {
  .halfwidth-wrapper-sp, .thirdwidth-wrapper-sp {
    width: 100% !important; 
    max-width: 100% !important;
  }
}

/* STARTPAGE CUSTOM END
------------------------------------------------------------------------------------------------------------ */