html {
  background-color: #f0f0f0;
}
body {
  color: #999999;
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
}
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}
.btn {
  background-color: white;
  border: 1px solid #cccccc;
  color: #696969;
  font-size:1rem;
  padding: 0.5rem;
  text-transform: uppercase;
  cursor:pointer;
  
}
.btn--block {
  display: block;
  width: 100%;
  
}
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
 
}
.cards__item {
  display: flex;
  padding: 1rem;
  
  
}
/*@media (max-width: 801px) {
  .cards__item {
    width: 100%;
  }
}*/

@media (min-width: 835px) {
  .cards__item {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .cards__item {
    width: 25%;
  }
}
.cards__item_2 {
  display: flex;
  padding: 1rem;
}
/*@media (max-width: 801px) {
  .cards__item_2 {
    width: 100%;
  }
}*/
@media (min-width: 835px) {
  .cards__item_2 {
    width:100%;
  }
}
@media (min-width: 1024px) {
  .cards__item_2 {
    width: 33.333%;
  }
}
.cards__item_history {
  display: flex;
 
}
/*@media (max-width: 801px) {
  .cards__item_history {
    width: 100%;
  }
}*/

@media (max-width: 834px) {
  .cards__item_history {
    width: 100%;
 
  }
}
@media (min-width: 835px) {
  .cards__item_history {
    width: 50%;
  }
}


.card {
  background-color: white;
  border-radius: 0.25rem;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
}
.card:hover .card__image {
  -webkit-filter: contrast(100%);
          filter: contrast(100%);
}
.card:click .card__image {
  -webkit-filter: contrast(100%);
          filter: contrast(100%);
}
.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
  
}
.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  -webkit-filter: contrast(70%);
          filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91), -webkit-filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.card__image::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
@media (min-width: 40rem) {
  .card__image::before {
    padding-top: 66.6%;
  }
}
.card__image--2_1 {
  background-image: url("../2_1/01.jpg");
  text-indent:-9999px;
}
.card__image--2_2 {
  background-image: url("../2_2/01.jpg");
}
.card__image--3 {
  background-image: url("../3/01.jpg");
}
.card__image--4 {
  background-image: url("../4/01.jpg");
  text-indent:-9999px;
}
.card__image--5 {
  background-image: url("../5/01.jpg");
  text-indent:-9999px;
}
.card__image--6 {
  background-image: url("../6/01.jpg");
}
.card__image--kompakt {
  background-image: url("../pics/kompakt.jpg");
}
.card__image--rauk_ub {
  background-image: url("../raukrum/01.JPG");
  text-indent:-9999px;
}
.card__image--rauk_mt {
  background-image: url("../raukrum_med_toa/01.jpg");
}
.card__image--abisko {
  background-image: url("../abisko/01.jpg");
  text-indent:-9999px;
}
.card__image--history {
  background-image: url("../pics/history.jpg");
  text-indent:-9999px;
}
.card__title {
  color: #696969;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  /*text-transform: uppercase;*/
}
.card__text {
  flex: 1 1 auto;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  text-align: left;
  
}

.collapsible-faq {
  background-color: #5DB3E6;
  color: white;
  cursor: pointer;
  padding: 1.5rem;
  width: 80%;
  margin-right:10%;
  margin-left: 10%;

  text-align: left;
  outline: none;
  font-size: 1.1rem;
}

.active, .collapsible-faq:hover {
  background-color: #055ea8; 
}

.content-faq {
  padding: 0 4rem;
  font-size: 15px;
 
  text-align: left;
  margin-right:10%;
  margin-left: 10%;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  
}