.flipcards {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
}
.flipbigtxt {
  position: absolute;
  top: 21%;
  left: 14.9%;
  font-size: 40px;
  font-family: sans-serif;
  font-weight: 900;
}

.flipsmalltext {
  position: absolute;
  top: 43%;
  font-size: 20px;
  left: 13.4%;
  width: 30%;
  line-height: 30px;
  font-family: 'Rubik', sans-serif;
}


.flipbutt {
  position: absolute;
  top: 79%;
  left: 13.4%;
}

.flipbutt button {
  border: 2px solid white;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  padding: 16px;
  background-color: transparent;
  color: white;
  transition: 0.45s;
}

.flipbutt button img {
  margin: -3px;
  transition: 0.45s;
  filter: invert(98%) sepia(99%) saturate(3%) hue-rotate(252deg) brightness(107%) contrast(100%);
}

.flipbutt button:hover{
  background-color: white;
  color: black;
}
.flipbutt button:hover img{
  filter: none;
}
.flipcardss {
  width: 40%;
  height: 50%;
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 90px 90px 90px 90px;
  overflow: hidden;
  position: relative;
  top: 17.9%;
  right: -19.9%;
}

.scene {
  width: 140px;
  height: 80px;
  perspective: 5000px;
  overflow: hidden;
}

.cardFlip {
  width: 100%;
  height: 100%;
  position: relative;
  /* left: 16%; */
  transition: transform 1s;
  transform-style: preserve-3d;
}

.cardface {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
}

.cardface--front {
  background: #333;
  background-size: auto 50px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.cardface--back {
  background: #333;
  transform: rotateY(180deg);
  background-size: auto 55px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.card.is-flipped {
  transform: rotateY(180deg);
}

.card1 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/angular.png);
}

.card1 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/reactjs.png);
}

.card2 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/.net.png);
}

.card2 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/node.svg);
}

.card3 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/flutter_logo.png);
}

.card3 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/android_studio_logo.svg);
}

.card4 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/js_logo.svg);
}

.card4 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/python.png);
}

.card5 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/css_logo.svg);
}

.card5 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/bootstrap.png);
}

.card6 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/development/s.png);
}

.card6 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/development/wordpress.png);
  background-size: 120px auto;
}

.card7 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/adobe_xd_logo.svg);
}

.card7 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/illustrator_logo.svg);
}

.card8 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/photoshop.png);
}

.card8 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/swift_logo.svg);
  background-size: 120px auto;
}

.card9 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/after-effects.png);
}

.card9 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/corel-draw.png);
}

.card10 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/sublime_logo.svg);
}

.card10 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/github_logo.svg);
  background-size: 120px auto;
}

.card11 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/php.png);
}

.card11 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/docker.png);
}

.card12 .cardface--front {
  background-image: url(https://onerooftech.com/assets/img/html-5.png);
}

.card12 .cardface--back {
  background-image: url(https://onerooftech.com/assets/img/sass.png);
}