@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
.card-wrapper {
  max-width: 1500px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 50px auto 100px auto;
  width: 100%;
}

.card {
  float: left;
  padding: 1rem 0.5rem;
  min-width: 400px;
}

.card .wrapper {
  background-color: #fff;
  min-height: 540px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}
.card .wrapper:hover .data {
  transform: translateY(0) !important;
}
.card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}
.card .data .content {
  padding: 1.5em;
  position: relative;
  z-index: 1;
  background-color: #fff;
  box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}
.card .data .content .date {
  color: gray;
}
.card .data .content .card-title {
  margin-top: 10px;
  color: gray;
}
.card .data .content .text {
  margin-top: 20px;
  color: gray;
  width: 100%;
  height: 100%;
}
.card .menu-button {
  position: absolute;
  z-index: 999;
  top: 18px;
  right: 16px;
  width: 30px;
  text-align: center;
  cursor: pointer;
}
.card .menu-button span {
  width: 6px;
  height: 6px;
  background-color: gray;
  color: gray;
  position: relative;
  display: inline-block;
  border-radius: 20%;
}
.card .menu-button span::after, .card .menu-button span::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: currentColor;
  position: absolute;
  border-radius: 20%;
}
.card .menu-button span::before {
  left: -12px;
}
.card .menu-button span::after {
  right: -12px;
}
.card input[type=checkbox] {
  display: none;
}
.card input[type=checkbox]:checked + .menu-content {
  transform: translateY(-60px);
}
.card .menu-content {
  margin: 0;
  padding: 0;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  transition: transform 0.3s;
  transform: translateY(0);
  list-style-type: none;
}
.card .menu-content::before, .card .menu-content::after {
  content: "";
  display: table;
}
.card .menu-content::after {
  clear: both;
}
.card .menu-content li {
  width: 25%;
  float: left;
  background-color: #333;
  height: 60px;
  position: relative;
}
.card .menu-content i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}
.card .menu-content span {
  top: -10px;
}
.card .menu-content a {
  color: #fff;
}

@media screen and (max-width: 480px) and (min-width: 361px) {
  .card {
    min-width: 350px;
  }

  .card .wrapper {
    min-height: 470px;
  }
}

@media screen and (max-width: 360px) {
  .card {
    min-width: 250px;
  }

  .card .wrapper {
    min-height: 330px;
  }

  .card .data .content .card-title {
    font-size: 20px;
  }

  .card .data .content .text {
    font-size: 10px;
  }
}

/*-----------------------------*/

.card1 .wrapper {
  background: url(../img/ProjektCover/Website_WT.jpg) 30% 1%/cover no-repeat;
}

.card2 .wrapper {
  background: url(../img/ProjektCover/Prog3.jpg) 30% 1%/cover no-repeat;
}

.card3 .wrapper {
  background: url(../img/ProjektCover/WebProgGo.jpg) 30% 1%/cover no-repeat;
}

.card4 .wrapper {
  background: url(../img/ProjektCover/GamesEng.jpg) 30% 1%/cover no-repeat;
}

.card5 .wrapper {
  background: url(../img/ProjektCover/AndrApp.jpg) 30% 1%/cover no-repeat;
}

.card6 .wrapper {
  background: url(../img/ProjektCover/DIO.jpg) 30% 1%/cover no-repeat;
}

.card7 .wrapper {
  background: url(../img/ProjektCover/WebProg.jpg) 30% 1%/cover no-repeat;
}

/*-----------------------------*/

.card101 .wrapper {
  background: url(../img/ProjektCover/Film.jpg) 30% 1%/cover no-repeat;
}

.card102 .wrapper {
  background: url(../img/ProjektCover/CD.jpg) 30% 1%/cover no-repeat;
}

.card103 .wrapper {
  background: url(../img/ProjektCover/3DMod.jpg) 30% 1%/cover no-repeat;
}

.card104 .wrapper {
  background: url(../img/ProjektCover/MG3.jpg) 30% 1%/cover no-repeat;
}/*# sourceMappingURL=card.css.map */

.card105 .wrapper {
  background: url(../img/ProjektCover/3DAnim.jpg) 30% 1%/cover no-repeat;
}

.card106 .wrapper {
  background: url(../img/ProjektCover/Fotos.jpg) 30% 1%/cover no-repeat;
}

.card107 .wrapper {
  background: url(../img/ProjektCover/GrafikdesignAR.jpg) 30% 1%/cover no-repeat;
}

.card108 .wrapper {
  background: url(../img/ProjektCover/MG1.jpg) 30% 1%/cover no-repeat;
}

.card109 .wrapper {
  background: url(../img/ProjektCover/PM_MCI.jpg) 30% 1%/cover no-repeat;
}

.card110 .wrapper {
  background: url(../img/ProjektCover/Film_PW.jpg) 30% 1%/cover no-repeat;
}

.card111 .wrapper {
  background: url(../img/ProjektCover/Werbefilm.jpg) 30% 1%/cover no-repeat;
}

.card112 .wrapper {
  background: url(../img/ProjektCover/AE_Anim.jpg) 30% 1%/cover no-repeat;
}

.card113 .wrapper {
  background: url(../img/ProjektCover/Sounddesign.jpg) 30% 1%/cover no-repeat;
}