body{
  margin:0;
  color:;
  overflow:hidden;
  font:300 16px/18px Roboto, sans-serif;
  background:url(bng.jpg) #031b21 no-repeat center fixed;
  background-size:cover;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.profile-card-wrap .content:before,
.profile-card-wrap .link-info .photo:after{
  content:'';
  position:absolute;
}
.profile-card-wrap{
  top:50%;
  left:60%;
  perspective:1000px;
  position:absolute;
  margin-left:-250px;
  margin-top:-137.5px;
}
.profile-card-wrap .content{
  top:0%;
  left:7%;
  width:500px;
  height:290px;
  padding:30px;
  position:relative;
  backface-visibility:hidden;
  background:#d9d9d9;
  border-radius:25px;
   box-shadow:1 2px 3px #626262;
  transform:rotateY(540deg);
  transition:all 0.5s ease-in-out 0s;
}
.profile-card-wrap .content:before{
  width:148px;
  height:205px;
  top:13%;
  left:14%;
  font-size:18px;
  padding:1.5rem;
  margin:0 1rem 1rem;
  border-radius:25px;
   box-shadow:1 2px 4px #626262;
  line-height:24px;
  background:#d9d9d9;
  content:attr(data-text);
  backface-visibility:visible;
  transform:rotateY(-540deg) scale(1);
  transition:all 0.5s ease-in-out 0s;
  text-shadow:1px 1px 0 rgba(255,255,255,.45);
}
.profile-card-wrap .content .title{
  font-size:24px;
  font-weight:500;
  margin-bottom:30px;
}
.profile-card-wrap .content p{
  margin:0;
  max-width:190px;
  line-height:20px;
  text-align:center;
  margin-bottom:5px;
}
.profile-card-wrap .link-info{
  top:50%;
  right:35px;
  width:180px;
  height:180px;
  margin-top:-90px;
  position:absolute;
}
.profile-card-wrap .link-info .social{
  top:50%;
  right:50%;
  z-index:1;
  width:35px;
  height:35px;
  position:absolute;
  margin-top:-17.5px;
  margin-right:-17.5px;
}
.profile-card-wrap .link-info .social .link{
  color:#fff;
  width:35px;
  height:35px;
  transform:none;
  line-height:33px;
  text-align:center;
  position:absolute;
  border-radius:50%;
  border:2px solid #444;
  box-shadow:0 3px 4px rgba(47,66,81,.75);
  transition:all .3s cubic-bezier(0.680, 1.550, 0.265, 1);
}
.profile-card-wrap .link-info .social .oc{
  background:#FF5722;
  border-color:#fff;
}
.profile-card-wrap .link-info .social .tw{
  background:#29a9e1;
  border-color:#2a7a9b;
}
.profile-card-wrap .link-info .social .cp{
  background:#fff;
  color:#000000;
  border-color:#474848;
}
.profile-card-wrap .link-info .social .gh{
  background:#000000;
  color:#fff;
  border-color:#474848;
}
.profile-card-wrap .link-info .social .pi{
  background:#cd2129;
  border-color:#942825;
}
.profile-card-wrap .link-info .social .li{
  background:#117bb8;
  border-color:#1c5d7d;
}
.profile-card-wrap .link-info .social .yt{
  background:#cb312e;
  border-color:#933532;
}
.profile-card-wrap .link-info .social .gp{
  background:#df4b38;
  border-color:#974336;
}

.profile-card-wrap .link-info .photo{
  z-index:2;
  width:inherit;
  height:inherit;
  overflow:hidden;
  position:relative;
  border-radius:50%;
  border:5px solid #d9d9d9;
  transform:scale(.6);
  background:url(20221205_174402.jpg) #fff no-repeat center / cover;
  box-shadow:0 0 2px, 0 5px 5px rgba(47,66,81,75);
  transition:transform .5s ease-in-out 0s;
}
.profile-card-wrap .link-info .photo:after{
  width:170px;
  height:170px;
  border-radius:inherit;
  background:rgba(54,106,157,.2);
}

.profile-card-wrap .check{display:none}
.profile-card-wrap .toggle{
  top:81%;
  z-index:5;
  right:105px;
  width:40px;
  height:40px;
  
  cursor:pointer;
  font-size:28px;
  line-height:40px;
  text-align:center;
  margin-top:-15px;
  border-radius:50%;
  position:absolute;
  color:#fff;
  background:#F44336;
  -webkit-user-select:none;
  box-shadow:0 4px 4px #333;
  transition: all 0.3s ease-in-out 0s;
}
.profile-card-wrap .check:checked + .toggle{
  top:98%;
  color:#fff;
  background:#850E35;
  
  transform:rotate(135deg);
  box-shadow:1px -2px 2px #333;
  transition: all 0.3s ease-in-out 0s;
}
.profile-card-wrap .check:checked + .toggle + .content{
  transform:rotateX(0);
}
.profile-card-wrap .check:checked + .toggle + .content:before{
  backface-visibility:hidden;
  transform:rotateX(-180deg) scale(0);
}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link{
  transform:none;
}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(1){transform:translate(30px,-120px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(2){transform:translate(80px,-100px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(3){transform:translate(115px,-55px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(4){transform:translate(125px,0)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(5){transform:translate(115px,55px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(6){transform:translate(80px,100px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .link:nth-child(7){transform:translate(30px,120px)}
.profile-card-wrap .check:checked + .toggle + .content + .link-info .photo{
  transform:scale(1);
  
  animation:bounceIn 0.8s;
}

@keyframes bounceIn{
  
  0%,20%,40%,60%,80%,100%{animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000)}
  0%{opacity:0;transform:scale3d(.3,.3,.3)}
  10%{transform:scale3d(1.1,1.1,1.1)}
  40%{transform:scale3d(.9,.9,.9)}
  60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}
  80%{transform:scale3d(.97,.97,.97)}
  100%{opacity:1;transform:scale3d(1,1,1)}
}