.tabs {
  list-style: none;
  display: inline-block;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.article {
  background: #f9f9ff;
}

.tabs:after {
  content: "";
  display: table;
  clear: both;
}

.tabs input[type=radio] {
  display: none;
}

.tabs label {
  display: inline-block;
  min-width: 25%;
  flex: 1 1 25%;
  color: #ccc;
  text-align: center;
  cursor: pointer; /* Safari 3.1 to 6.0 */
  transition: all 0.5s;
}

.tabs label span {
  display: none;
  font-size: 1rem;
}

.tabs label:hover {
  color: #ecba44;
}
.tabs label:hover .icon {
  border-color: #ecba44;
  background-position: center;
  background-size: cover;
}

.tab__content {
  display: none;
  text-align: center;
  width: 80%;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #f9f9ff;
  margin-top: 2rem;
}

.tab__content * {
  animation: scale 0.2s ease-in-out;
}

@keyframes scale {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    transform: scale(1.01);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tabs [id^=tab]:checked + label {
  background: #f9f9ff;
  color: #dde7f0;
}

.tabs [id^=tab]:checked + label i {
  border-color: #dde7f0;
  background-position: center;
  background-size: cover;
}

#tab1:checked ~ #tab__content--1, #tab2:checked ~ #tab__content--2,
#tab3:checked ~ #tab__content--3,
#tab4:checked ~ #tab__content--4 {
  display: block;
}

@media (min-width: 768px) {
  .tabs label span {
    display: block;
  }
}
.icon {
  margin-top: 1rem;
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 100%;
  border: 2px solid #CACFD6;
  background-size: 100px 50px;
  box-sizing: border-box;
}

.email-cal {
  background: white url("../assets/img/portfolio/item1.png");
  background-position: center;
  background-size: cover;
}

.snapshot {
  background: white url("../assets/img/portfolio/item2.png");
  background-size: cover;
  background-position: center;
}/*# sourceMappingURL=tab-menu.css.map */