@import url('https://fonts.googleapis.com/css?family=Exo:700');
@import url('https://fonts.googleapis.com/css?family=Abel');
.bodypoint {

  -webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
}

.title h1{
  font-size:50px;
  font-family: 'Exo', sans-serif;
}
.card1 {
  text-align:center;
  position: absolute;
  left: 100px;
  width: 300px;
  height: 300px;
  margin-top: 125px;
  margin-bottom: 10px;
  background: linear-gradient(#E8A82E, rgb(227,144,91));
  transition:.6s;
  
  transform: rotatex(37deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0,0,0, 0.5);
}
.card1:hover{
  transform: rotatex(0deg);
  transform: rotatez(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card1 img{
  transform: translateY(15px);
  width:200px;
  height:200px;
}
h3{
  font-size:25px;
  font-family: 'Abel', sans-serif;
  color:rgb(255,255,255);
  text-shadow: 0 0 2px rgb(255,255,255);
  transform: translatey(10px);
}
.ctn-invite{
  
  font-family: 'Abel', sans-serif;
  transform: translatex(12px);
}


.card2 {
  text-align:center;
  position: absolute;
  left: 520px;
  width: 300px;
  height: 300px;
  margin-top: 125px;
  margin-bottom: 10px;
  background: linear-gradient(rgb(52 87 152),rgb(21 11 58));
  animation: animate 1s linear infinite;
  transition:.6s;
  
  transform: rotatex(37deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card2:hover{
   transform: rotatex(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card2 img{
  transform: translateY(15px);
  width:200px;
  height:200px;
}
.card3 {
  text-align:center;
  position: absolute;
  left: 960px;
  width: 300px;
  height: 300px;
  margin-top: 125px;
  margin-bottom: 10px;
  background: linear-gradient(#FC4E65, #b33939);
  transition:.6s;
  
  transform: rotatex(37deg) translatey(-200px) translatez(-100px);
  box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);
}
.card3:hover{
   transform: rotatex(0deg);
  transition:.6s;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}
.card3 img{
  transform: translateY(15px);
  width:200px;
  height:200px;
}
.head-info {
    overflow: hidden;
}
/**/
img.strong-image{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    object-fit:cover;
}
@media only screen and (max-width: 480px) {
    .card1 {
        position: relative;
        left: 30px;
        width: 80%;
        margin-top: 50px;
        transform: rotatex( 25deg );
    }
    .card2 {
        position: relative;
        left: 30px;
        width: 80%;
        margin-top: 50px;
        transform: rotatex( 25deg );
    }
    .card3 {
        position: relative;
        left: 30px;
        width: 80%;
        margin-top: 50px;
        transform: rotatex( 25deg );
    }
}