.sjs-default{
  position: relative;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: height .2s ease-out, opacity .2s ease-out .2s;
}
[data-sjsel]{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform .2s ease-out;
}

#sortable {
  margin: 0 10%;
}

#sortable > div {
  background: #ffffff;
  border-radius: 8%;
  color: #ffffff;
}

.card {
  background: #f7f7f7;
  border-radius: 14px;
  padding: 5%;
}



.card_picture_wrapper{
  position: relative;
}

.card__picture{
  width: 100%;
}

.card_pictrue_icon_box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.card_picture_icon {
  width: 30%;
}

.card_picture_icon_text {
  color: #fff;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  padding: 2% 0;
}

.card-infos {
  color: #777;
  padding: 5%;
  background:white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.card-infos .card__text{
  line-height: 26px;
}

/* .card .card__title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
} */





@media screen and (max-width: 1920px) {
  .card_picture_icon_text {
    font-size: 30px;
  }
}

@media screen and (max-width: 1680px) {
  .card_picture_icon_text {
    font-size: 28px;
  }
}

@media screen and (max-width: 1440px) {
  .card_picture_icon_text {
    font-size: 26px;
  }
}

@media screen and (max-width: 1200px) {
  .card_picture_icon_text {
    font-size: 24px;
  }
}

@media screen and (max-width: 980px) {
  .card_picture_icon_text {
    font-size: 20px;
  }
}

@media screen and (max-width: 720px) {
  .card_picture_icon_text {
    font-size: 16px;
  }
}