*body { 
  margin: 0;
}
body, html { 
  overflow: hidden;  
}

* {
  cursor: none;
}

.cursor{  
  cursor: none; 
  width: 150px;
  height: 150px;
  position: fixed; 
  pointer-events: none;
  display: none; 
  z-index: 9999999;
  transition: transform 0.5s ease; 
  transform: translate(-50%, -50%); 
  overflow: show; 
  background-image: url('../img/landing/default-mouse.svg');
}
.cursor.hover{ 
  background-image: url('../img/landing/action_mouse.svg');
}


/********************************************Card Back  ********************************************/

.spin_circle {
  -webkit-transform:rotate(-360deg) !important;
  -webkit-transition-duration: 0.3s;  
}
.b_animm, .b_anim, .b_anim3 {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 99;

}

.b_animm {
  width: 100px;
  height: 100px;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
}
.b_anim {
  width: 175px;
  height: 175px;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);

}
.b_anim3 {
  width: 250px;
  height: 250px;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);

}

.back_square1 {
  background: #fa9803;  
  z-index: 999;
  animation: b_animm 0.6s alternate ease-in;
  display: block;
  position: absolute;
  left: 50%;
  top: 12%;
  
 
}

.back_square2 {
  
  background: #fe6517;
  z-index: 99;
  animation: b_anim 0.8s alternate ease-in;
  display: block;
  position: absolute;
  left: 50%;
  top: 7%;
}

.back_square3 { 
  background: #ffbb03;
  z-index: 9;
  animation: b_anim3 1s alternate ease-in;
  display: block;
  position: absolute;
  left: 50%;
  top: 5%;
  
}
@keyframes b_animm {
  0%   {transform: scale(.8,.8);}
  100% {transform: scale(16,16);}
}
@keyframes b_anim {
  0%   {transform: scale(.8,.8);}
  100% {transform: scale(16,16);}
}
@keyframes b_anim3 {
  0%   {transform: scale(.8,.8);}
  100% {transform: scale(16,16);}
}



/***************************************************************about page Start *****************************************/

.gree_bg { background: #00A587;}

.magician_element { z-index: 99; position: fixed; width: 78vw; height: 60vh; left: 0; right: 11vw; top: 5%;}
.magician_element img { width: 100%; margin:0 auto;}
.magician_element .animation2, .magician_element .animation1{ width: 100vw; height: 100vh; margin: 0 auto;}

.topblue_squre { position: fixed;display: flex; padding:0 2vw; align-items: center; text-align: center; justify-content: space-between; left: 8vw; width: 84vw; height: 8vh; background: #3eabff;}
.lt_squre { position: fixed; left: 0; top: 0; width: 8vw; height: 15vh; background: #F29DBB;}
.rt_squre { position: fixed; right: 0; top: 0; width: 8vw; height: 15vh; background: #F29DBB; }
.lb_squre { position: fixed; left: 0; bottom: 0; width: 8vw; height: 15vh; background: #e8502e;z-index: 999;}
.rb_squre { position: fixed; right: 0; bottom: 0; width: 8vw; height: 15vh; background: #e8502e; z-index: 999;}
.topblue_squre .moon { width: 5vw; height: 5vh; position: fixed; left: 9vw;}
.topblue_squre .stars  { width: 40vw; position: fixed; left: 30vw; right: 30vw;}
.topblue_squre .squre  { width: 5vw; height: 5vh; position: fixed; right: 9vw;}

/********************************* Playing Cards  ***************************************/

.card_layer { width: 1200px; height: 1200px; z-index: 9999; top: 200px; position: absolute; left: 6%; border-radius: 100%; display: inline-flex;  background: #000;}

/********************************* pink strip ******************************************/
.about_page .pink_strip { background: #F29DBB; border: solid 1px #000; position: absolute; top: 7.8vh; left: 6vw; right: 6vw; height: 4.3vh;}


.left_dice, .right_dice { width: 8vw; position: fixed; top: 4vh; z-index: 999;}
.left_dice { left: 15vw;}
.right_dice { right: 15vw;}

/********************************* magic strick *******************************/

.left_magicstick { position: fixed; left: 0.5vw; bottom: 28vh;  animation-iteration-count: infinite; animation-duration: 3s; animation-name: magic_stick;}
.right_magicstick { position: fixed; right: 0.5vw; bottom: 28vh; animation-iteration-count: infinite; animation-duration: 3s; animation-name: magic_stick;}
.left_magicstick #l_magicmstick, .right_magicstick #r_magicmstick { width: 5.2vw;} 
.left_magicstick #l_magicmstick { transform: scaleX(-1);}

/* .cards .five {
  animation-name: anim-eight;
} */
@keyframes magic_stick {
  from {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: translate(5px,5px) rotate(15deg);
  }
  to {
    transform: translate(0) rotate(0deg);
  }
}


/*********************************** Magic stick bg  **************************/

.left_magstk_bg #left_bg { width: 6.8vw; z-index: 99; position: fixed; top:15vh; left: 0; z-index: -1;}
.right_magstk_bg #right_bg { width: 6.8vw; z-index: 99; position: fixed; top:15vh; right: 0; z-index: -1; transform: scaleX(-1);}
.left_magstk_bg #left_bg .st0, .right_magstk_bg #right_bg .st0{fill:url(#SVGID_1_);}
.left_magstk_bg #left_bg .st1, .right_magstk_bg #right_bg .st1{fill:#02A587;}
.wave_effect { animation: wave 3s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 3s ease -1.25s infinite;
  opacity: 1;}
@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
@keyframes swell {
  0%,
	100% {
    transform: translate3d(0, -25px, 0);
  }
  50% {
    transform: translate3d(0, 5px, 0);
  }
}

/**********************************Stairs  ************************************/

.left_stairs {width: 6.8vw; z-index: 99; position: fixed; bottom:15vh; left: 0; margin-bottom: -1px; }
.right_stairs {width: 6.8vw; z-index: 99; position: fixed; bottom:15vh; right:0; margin-bottom: -1px;transform: scaleX(-1); }


.left_stairs #steps {
  font-size: 0;
  position: absolute;
  bottom:0;
  white-space: nowrap;
  animation: steps 1s linear infinite;
  z-index: -1;
}

@keyframes steps {
  100% {
    transform: translatex(-25px) translatey(-20px);
  }
}

.left_stairs #steps div {
  width: 25px;
  height: 100px;
  background-color:#f49dc1;
  display: inline-block;
  margin: 0;
}

.left_stairs #steps div:first-child {
  transform: translateY(20px);
}

.left_stairs #steps div:nth-child(2) {
  transform: translateY(40px);
}

.left_stairs #steps div:nth-child(3) {
  transform: translateY(60px);
}

.left_stairs #steps div:nth-child(4) {
  transform: translateY(80px);
}

.left_stairs #steps div:last-child {
  transform: translateY(100px);
}



.right_stairs #steps {
  font-size: 0;
  position: absolute;
  bottom:0;
  white-space: nowrap;
  animation: steps 1s linear infinite;
  z-index: -1;
}

@keyframes steps {
  100% {
    transform: translatex(-25px) translatey(-20px);
  }
}

.right_stairs #steps div {
  width: 25px;
  height: 100px;
  background-color:#f49dc1;
  display: inline-block;
  margin: 0;
}

.right_stairs #steps div:first-child {
  transform: translateY(20px);
}

.right_stairs #steps div:nth-child(2) {
  transform: translateY(40px);
}

.right_stairs #steps div:nth-child(3) {
  transform: translateY(60px);
}

.right_stairs #steps div:nth-child(4) {
  transform: translateY(80px);
}

.right_stairs #steps div:last-child {
  transform: translateY(100px);
}


/********************************* ranbow ring *******************************/
.ranbow_ring {width: 28vw; margin: 0 auto; z-index: -1;  position: fixed; top: 47%; left: 50%; transform:translate(-50%, -50%);}


/********************************* sun element *******************************/
.sun_elment { width: 15vw; position: fixed; z-index: -1; top: 29%; left: 50%; transform:translate(-50%, -50%);}

#ranbow_ring .st0{fill:#F15C29;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}
#ranbow_ring .st1{fill:#FDB813;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}
#ranbow_ring .st2{fill:#F49DC1;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}

#l_magicmstick .st0, #r_magicmstick .st0{fill:#FFFFFF;stroke:#1D1D1B;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#l_magicmstick 	.st1, #r_magicmstick .st1{fill:#1D1D1B;stroke:#1D1D1B;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#l_magicmstick 	.st2, #r_magicmstick .st2{fill:#F08616;stroke:#FFFFFF;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

/********************************* poll support  *******************************/
.leftpoll_suport { width: 5vw; z-index: 9; position: fixed; top:7.8vh; left: 15.7vw;}
.rightpoll_suport { width: 5vw; z-index: 9; position: fixed; top:7.8vh; right: 15.7vw; transform: scaleX(-1);}

/********************************* left poll  *******************************/
.left_poll #left_poll { width: 13vw; z-index: 9; position: fixed; top:7.8vh; left: 4vw;}
.right_poll #right_poll { width: 13vw; z-index: 9; position: fixed; top:7.8vh; right: 4vw;}

#left_poll .st0{fill:#010101;}
#left_poll .st1{fill:#010101;stroke:#14191A;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st2{fill:#F6851F;}
#left_poll .st3{fill:#FFFFFF;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st4{fill:#010101;stroke:#010101;stroke-width:1.0668;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st5{fill:#F29EBB;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st6{fill:#F6851F;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}
#left_poll .st7{fill:none;stroke:#010101;stroke-width:1.0668;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st8{fill:#010101;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#left_poll .st9{fill:#FFFFFF;stroke:#14191A;stroke-width:1.6003;stroke-miterlimit:10;}
#left_poll .st10{fill:none;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

/********************************* end left poll  *******************************/

/********************************* right poll *******************************/

#right_poll .st0{fill:#010101;}
#right_poll .st1{fill:#010101;stroke:#14191A;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st2{fill:#F6851F;}
#right_poll .st3{fill:#FFFFFF;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st4{fill:#010101;stroke:#010101;stroke-width:1.0668;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st5{fill:#F29EBB;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st6{fill:#F6851F;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}
#right_poll .st7{fill:none;stroke:#010101;stroke-width:1.0668;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st8{fill:#010101;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st9{fill:#FFFFFF;stroke:#14191A;stroke-width:1.6003;stroke-miterlimit:10;}
#right_poll .st10{fill:none;stroke:#010101;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#right_poll .st11{fill:url(#r_poll1);}
#right_poll .st12{fill:url(#r_poll1);}
#right_poll .st13{fill:url(#r_poll1);stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}

/********************************* curtains *******************************/

.left_curtain { width: 15vw; position: fixed; top:8vh; left: 18vw; z-index: -1;}
.right_curtain { width: 15vw; position: fixed; top:8vh; right: 18vw; z-index: -1;}

/********************************* lions *******************************/
.left_lion, .right_lion { position: fixed; width: 25vw; z-index: 999;}
.left_lion { left: 1vw; bottom: 0.4vh; }
.right_lion { right: 1vw; bottom: 0.4vh;}


/********************************* fire element *******************************/
.left_fireelmnt, .right_fireelmnt { position: fixed; width: 15vw; height: 30vh; z-index: 999;}
.left_fireelmnt { left: 25vw; bottom: -10px; }
.right_fireelmnt { right: 25vw; bottom: -10px; transform: scaleX(-1);}
.left_fireelmnt img, .right_fireelmnt img { width: 11vw; height: auto;    transform: rotate(90deg);}
/* 
#left_fireelmnt .st0, #right_fireelmnt .st0{fill:#EF4035;stroke:#010101;stroke-width:1.6003;stroke-miterlimit:10;}
#left_fireelmnt .st1, #right_fireelmnt .st1{fill:#F5831F;stroke:#010101;stroke-width:1.6003;stroke-miterlimit:10;}
#left_fireelmnt .st2, #right_fireelmnt .st2{fill:#FDB814;stroke:#010101;stroke-width:1.6003;stroke-miterlimit:10;}
#left_fireelmnt .st3, #right_fireelmnt .st3{fill:#DCC845;stroke:#010101;stroke-width:1.6003;stroke-miterlimit:10;} */

/********************************* cloud bg *******************************/

.left_cloudbg, .right_cloudbg {position: fixed; left: 14vw; bottom: -2vh;  width: 30vw; z-index: -1;}
.right_cloudbg { right: 14vw; bottom: -2vh; left: auto;  animation: right_slide 3s linear infinite;}
.right_cloudbg img {transform: scaleX(-1);}
.left_cloudbg { background-image: url('../img/about/backcloud-bg.svg'); right: 14vw; bottom: -2vh; left: 14vw;  animation: left_slide 3s linear infinite;}
.right_cloudbg { right: 14vw; bottom: -2vh; left: auto;}


@keyframes left_slide {
  100% {
    transform: translatex(-40px) translatey(-45px);
  }
  
  
}
@keyframes right_slide {
  100% {
    transform: translatex(40px) translatey(-45px);
  }
}


/*********************************** Floor  *******************************/
.about_floorbg {position: fixed; left: 0; right: 0; bottom: -5vh;  width: 100vw; z-index:99;}
.about_floorbg .st0{fill:#88D4EC;stroke:#211A15;stroke-width:1.6003;stroke-miterlimit:10;}
.about_floorbg .st1{fill:#FFFFFF;stroke:#1D1D1B;stroke-width:1.6003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.mboileabout_floorbg { display: none;}


.cards_outer { position: fixed; left: 10%; right: 10%; margin: 0 auto; z-index: 9999; height: 100%;}
.cards {
  position: relative;
  width: 8vw;
  height: 50vh;
  margin: 0 auto;
  display: block;
  z-index: 9999999;
}
.cards .card img { max-width: 100%;}
.cards .p_card {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  
}
.cards .p_card.changed { z-index: 99999999;}
.cards .p_card .outer {
  width: 100%;
  display: block;
  height: 40%;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
}



.cards .p_card .front, .cards .p_card .back {
position: absolute;
backface-visibility: hidden;
} 
.cards .p_card .back { z-index: 99999999999;}
/* .cards .p_card:hover {transform: rotateY(180deg);} */
.cards .p_card img { max-width: 100%;}

.back {
transform: rotateY(180deg);
}
.p_card.one {
  -webkit-animation: slide-one 1.2s forwards; 
  animation: slide-one 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-one  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 3vh;}
}
/* Standard syntax */
@keyframes slide-one  {
     0%   { transform:rotate(0deg); left:0; top: 0px;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 3vh;}
}
.p_card.two {
  -webkit-animation: slide-two 1.2s forwards; 
  animation: slide-two 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-two  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-15vw; top:10vh;}
}
/* Standard syntax */
@keyframes slide-two  {
     0%   { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-15vw; top: 10vh;}
}
.p_card.three {
  -webkit-animation: slide-three 1.2s forwards; 
  animation: slide-three 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-three  {
    0% { transform:rotate(0deg); left:0;  top: 0px;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
}
/* Standard syntax */
@keyframes slide-three  {
     0%   { transform:rotate(0deg); left:0;  top: 0px;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(-32deg); left:-22.5vw; top: 18.5vh;}
}
.p_card.four {
  -webkit-animation: slide-four 1.2s forwards; 
  animation: slide-four 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-four  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(20deg); left:7vw; top: 3vh;}
}
/* Standard syntax */
@keyframes slide-four  {
     0%   { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(20deg); left:7vw; top: 3vh;}
}
.p_card.five {
  -webkit-animation: slide-five 1.2s forwards; 
  animation: slide-five 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-five  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(25deg); left:15vw; top: 10vh;}
}
/* Standard syntax */
@keyframes slide-five  {
     0%   { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(25deg); left:15vw; top: 10vh;}
}
.p_card.six {
  -webkit-animation: slide-six 1s forwards; 
  animation: slide-six 1s forwards;
}
/* Safari */
@-webkit-keyframes slide-six  {
    0% { transform:rotate(0deg); left:0; top: 0;;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(32deg); left:22.5vw; top: 18.5vh;}
}
/* Standard syntax */
@keyframes slide-six  {
     0%   { transform:rotate(0deg); left:0; top: 0;;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(32deg);  left:22.5vw; top: 18.5vh;}
}

.p_card:hover .outer {
  transform: rotateY(180deg);
}
.p_card.changed .outer {
  position: relative;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

}

.p_card.changed .outer {
  -moz-transform: rotateY(-180deg) scale(2.5);
  -ms-transform: rotateY(-180deg) scale(2.5);
  -webkit-transform: rotateY(-180deg) scale(2.5);
  transform: rotateY(-180deg) scale(2.5);
  
}


.p_card.changed.one {-webkit-animation: center-slide-one 1s forwards; 
  animation: center-slide-one 1s forwards;}
@-webkit-keyframes center-slide-one  {
  0% {transform:rotate(-20deg); left:-7vw; top: 3vh;}
  100% { transform:rotate(0deg); left:0vw; top:30vh;}
}
/* Standard syntax */
@keyframes center-slide-one  {
  0% {transform:rotate(-20deg); left:-7vw; top: 3vh;}
  100% { transform:rotate(0deg); left:0vw; top: 30vh;}
}

.p_card.changed.two {-webkit-animation: center-slide-two 1s forwards; 
  animation: center-slide-two 1s forwards;}
@-webkit-keyframes center-slide-two  {
  0% {transform:rotate(-25deg); left:-15vw; top: 10vh;}
  100% { transform:rotate(0deg); left:0vw; top:30vh;}
}
/* Standard syntax */
@keyframes center-slide-two  {
  0% {transform:rotate(-25deg); left:-15vw; top: 10vh;}
  100% { transform:rotate(0deg); left:0vw; top: 30vh;}
}

.p_card.changed.three {
  -webkit-animation: center-slide-three 1s forwards; 
  animation: center-slide-three 1s forwards;
}
/* Safari */
@-webkit-keyframes center-slide-three  {
    0% { transform:rotate(-32deg);  left:-22.5vw; top: 18.5vh;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(0deg); left:0vw;  top: 30vh;}
}
/* Standard syntax */
@keyframes center-slide-three  {
     0%   { transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}


.p_card.changed.four {
  -webkit-animation: center-slide-four 1s forwards; 
  animation: center-slide-four 1s forwards;
}
/* Safari */
@-webkit-keyframes center-slide-four  {
    0% { transform:rotate(20deg); left:7vw; top: 3vh;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}
/* Standard syntax */
@keyframes center-slide-four  {
     0%   { transform:rotate(20deg); left:7vw; top: 3vh;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}
.p_card.changed.five {
  -webkit-animation: center-slide-five 1s forwards; 
  animation: center-slide-five 1s forwards;
}
/* Safari */
@-webkit-keyframes center-slide-five  {
    0% { transform:rotate(25deg); left:15vw; top: 10vh;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}
/* Standard syntax */
@keyframes center-slide-five  {
     0%   { transform:rotate(25deg); left:15vw; top: 10vh;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}
.p_card.changed.six {
  -webkit-animation: center-slide-six 1s forwards; 
  animation: center-slide-six 1s forwards;
}
/* Safari */
@-webkit-keyframes center-slide-six  {
    0% { transform:rotate(32deg); left:22.5vw; top: 18.5vh;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(0deg); left:0; top: 30vh;}
}
/* Standard syntax */
@keyframes center-slide-six  {
     0%   { transform:rotate(32deg); left:22.5vw; top: 18.5vh;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(0deg);  left:0; top: 30vh;}
}







/*********************************Cards fold  **********************/
.card_fold .p_card .outer:hover {
  transform:none;
}
.cards.card_fold {
  position: relative;
  width: 8vw;
  height: 44vh;
  margin: 0 auto;
  display: block;
  z-index: 999;
}
.card_fold .p_card.one {
  -webkit-animation: fold-slide-one 1s forwards; 
  animation: fold-slide-one 1s forwards;
}
/* Safari */
@-webkit-keyframes fold-slide-one  {
    0% {transform:rotate(-20deg); left:-7vw; top: 3vh;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}
/* Standard syntax */
@keyframes fold-slide-one  {
     0%   { transform:rotate(-20deg); left:-7vw; top: 3vh;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}


.card_fold .p_card.two {
  -webkit-animation: fold-slide-two 1s forwards; 
  animation: fold-slide-two 1s forwards;
}
/* Safari */
@-webkit-keyframes fold-slide-two  {
    0% { transform:rotate(-25deg); left:-15vw; top:10vh;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(0deg); left:0; top:0;}
}
/* Standard syntax */
@keyframes fold-slide-two  {
     0%   {transform:rotate(-25deg); left:-15vw; top:10vh;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}


.card_fold .p_card.three {
  -webkit-animation: fold-slide-three 1s forwards; 
  animation: fold-slide-three 1s forwards;
}
/* Safari */
@-webkit-keyframes fold-slide-three  {
    0% { transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(0deg); left:0;  top:0;}
}
/* Standard syntax */
@keyframes fold-slide-three  {
     0%   {transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
    /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}


.card_fold .p_card.four {
  -webkit-animation: fold-slide-four 1s forwards; 
  animation: fold-slide-four 1s forwards;
}
/* Safari */
@-webkit-keyframes fold-slide-four  {
    0% { transform:rotate(20deg); left:7vw; top: 3vh;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(0); left:0; top:0;}
}
/* Standard syntax */
@keyframes fold-slide-four  {
     0%   { transform:rotate(20deg); left:7vw; top: 3vh;}
    /* 50%  { transform:rotate(2deg); left:100px} */
    100% { transform:rotate(0eg); left:0; top: 0;}
}


.card_fold .p_card.five {
  -webkit-animation: fold-slide-five 1s forwards; 
  animation: fold-slide-five 1s forwards;
}
/* Safari */
@-webkit-keyframes fold-slide-five  {
    0% { transform:rotate(25deg); left:15vw; top: 10vh;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}
/* Standard syntax */
@keyframes fold-slide-five  {
     0%   {transform:rotate(25deg); left:15vw; top: 10vh;}
    /* 50%  { transform:rotate(2deg); left:200px} */
    100% { transform:rotate(0deg); left:0; top:0;}
}



.card_fold .p_card.six {
  -webkit-animation: fold-slide-six 1s forwards; 
  animation: fold-slide-six 1s forwards;
}

/* Safari */
@-webkit-keyframes fold-slide-six  {
    0% { transform:rotate(32deg); left:22.5vw; top: 18.5vh;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(0deg); left:0; top: 0;}
}
/* Standard syntax */
@keyframes fold-slide-six  {
     0%   { transform:rotate(32deg); left:22.5vw; top: 18.5vh;}
    /* 50%  { transform:rotate(2deg); left:300px} */
    100% { transform:rotate(0deg);  left:0; top:0;}
}



/* .no_effect .changed {
  position: absolute;
  margin: 0 auto;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -moz-transform: rotateY(180deg) scale(2);
  -ms-transform: rotateY(180deg) scale(2);
  -webkit-transform: rotateY(180deg) scale(2);
  transform: rotateY(180deg) scale(2);
  left: 50%;
  top: 50%;
  transform: rotate(20deg) !important;} */


  #l-r_slide {
    position: relative;
    width: 45vw;
    height: 230px;
    overflow: hidden;
    z-index:9999;
    margin: 8rem auto 0;
  }
  #l-r_slide .card_img { display: flex; justify-content:space-around;}
  #l-r_slide .card_img img { width: 10vw; height: auto; margin-top: 0; transform: rotate(270deg);}
  .box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 45vw;
  }
  #left_card {top: 0px;
    left: -45vw;}
    #right_card{right: -45vw;}
    #right_card.leftslide { top: 0px;
    right:0vw;}

    .r_toleftslide {top: 0px;
      left: -45vw;}

    .l_torightslide { top: 0px;
      border: solid;
      right: -45vw !important; left: auto !important;}


  /* .left_card {top: 0px;
    left: -60vw;}
  .right_card { top: 0px;
    right: -60vw;} */

  /* #first {
    top: 0px;
    left: -60vw;
  }
  #second {
    top: 0px;
    left: -60vw;
  }
  #third {
    top: 0px;
    left: -60vw;
  }
  #four {
    top: 0px;
    right: -60vw;
  }
  #five {
    top: 0px;
    right: -60vw;
  }
  #six {
    top: 0px;
    right: -60vw;
  } */
  #slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
  }
  /* #slide {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
  } */
  .move-to-right {
    transform: translateX(45vw);
    -moz-transform: translateX(45vw);
    -webkit-transform: translateX(45vw);
  }
  .move-to-left {
    transform: translateX(-45vw);
    -moz-transform: translateX(-45vw);
    -webkit-transform: translate(-45vw);
  }

  .move-to-right.l_torightslide {
    transform: translateX(90vw) !important;
    -moz-transform: translateX(90vw) !important;
    -webkit-transform: translateX(90vw) !important;
  }

  .move-to-left.r_toleftslide {
    transform: translateX(-90vw) !important;
    -moz-transform: translateX(-90vw) !important;
    -webkit-transform: translateX(-90vw) !important;
  }


  /* .move-to-reset{ transform: translateX(-130vw);
    -moz-transform: translateX(-130vw);
    -webkit-transform: translate(-130vw);}

.slideone{transform: translateX(0vw);
  -moz-transform: translateX(0vw);
  -webkit-transform: translate(0vw);} */
  /* .move-to-second {
    transform: translateX(60vw);
    -moz-transform: translateX(60vw);
    -webkit-transform: translateX(60vw);
  }
  .move-to-third {
    transform: translateX(60vw);
    -moz-transform: translateX(60vw);
    -webkit-transform: translateX(60vw);
  }

  .move-to-four {
    transform: translateX(60vw);
    -moz-transform: translateX(60vw);
    -webkit-transform: translateX(60vw);
  }
  .move-to-five {
    transform: translateX(60vw);
    -moz-transform: translateX(60vw);
    -webkit-transform: translateX(60vw);
  }
  .move-to-six {
    transform: translateX(60vw);
    -moz-transform: translateX(60vw);
    -webkit-transform: translateX(60vw);
  } */
  


/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) 
and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  .about_floorbg { bottom: 0;}
  .magician_element { top: auto; bottom: 23%;}
  .left_fireelmnt, .right_fireelmnt { height: auto; width: auto; bottom: 0;}
  .left_poll #left_poll, .right_poll #right_poll { width: 19vw;}
  .left_fireelmnt  {left: 30vw;}
  .right_fireelmnt{right: 30vw;}
  .left_lion, .right_lion { width: 30vw;}
  .left_fireelmnt img, .right_fireelmnt img  {width: 15vw;}
  .cards { width: 10vw;}

  .sun_elment { width: 30vw; top: 35%;} 
  .ranbow_ring { width: 45vw; top: 45%;}
  .magician_element { width: 100vw; top:5vh;}
  .left_lion, .right_lion { width: 40vw;}
  .magician_element .animation2, .magician_element .animation1 { width: 120vw; margin-left: -10vw;}
.about_floorbg { display:none;}
.mboileabout_floorbg { position:fixed; left:0; right:0; bottom:-20vh; z-index:99; display:block; width:116vw; margin-left:-8vw;}
.left_fireelmnt, .right_fireelmnt { height: auto;}
.left_fireelmnt { left: 40%; bottom: 3vh;}
.right_fireelmnt { right: 40%; bottom: 3vh;}
.leftpoll_suport, .rightpoll_suport { width: 15vw;}
.leftpoll_suport { left: 4vw;}
.rightpoll_suport { right: 4vw;}
.left_curtain, .right_curtain { width: 30vw;}
.left_stairs, .right_stairs { bottom: 25vh;}
.left_magicstick #l_magicmstick, .right_magicstick #r_magicmstick { width: 16vw;}
.right_magicstick, .left_magicstick { bottom: 40vh;}
.left_magstk_bg #left_bg, .right_magstk_bg #right_bg { width: 20vw;}
.left_poll #left_poll, .right_poll #right_poll { width: 25vw;}
.left_cloudbg { bottom:50vh; left: 20vw; width: 40vw;}
.right_cloudbg { bottom:50vh; right: 20vw; width: 40vw;}
.cards { width: 15vw; height: 20vh; top: 20vh;}
.cards_outer { left: 0; right: 0;}
.cards .p_card img { max-width: 68%;}
.cards .p_card .outer { text-align: center;}
.about_page .pink_strip { height: 3vh;}
.left_dice, .right_dice { width: 18vw; top: 5vh;}
.p_card.one {
  -webkit-animation: slide-one 1.2s forwards; 
  animation: slide-one 1.2s forwards;
}
.topblue_squre { width: 100vw; left: 0;}
.left_stairs #steps div, .right_stairs #steps div { border: solid #f49dc1;}
.topblue_squre .stars { width: 60vw; left: 20vw;}

/* Safari */
@-webkit-keyframes slide-one  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 15vh;}
}
/* Standard syntax */
@keyframes slide-one  {
     0%   { transform:rotate(0deg); left:0; top: 0px;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 15vh;}
}


.p_card.two {
  -webkit-animation: slide-two 1.2s forwards; 
  animation: slide-two 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-two  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-16vw; top:17.3vh;}
}
/* Standard syntax */
@keyframes slide-two  {
     0%   { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-16vw; top: 17.3vh;}
}

/* Safari */
@-webkit-keyframes slide-three  {
  0% { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
}
/* Standard syntax */
@keyframes slide-three  {
   0%   { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-25vw; top: 20vh;}
}
.p_card.four {
-webkit-animation: slide-four 1.2s forwards; 
animation: slide-four 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-four  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:7vw; top: 15vh;}
}
/* Standard syntax */
@keyframes slide-four  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:7vw; top:15vh;}
}
.p_card.five {
-webkit-animation: slide-five 1.2s forwards; 
animation: slide-five 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-five  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:16vw; top: 17.3vh;}
}
/* Standard syntax */
@keyframes slide-five  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:16vw; top: 17.3vh;}
}
.p_card.six {
-webkit-animation: slide-six 1s forwards; 
animation: slide-six 1s forwards;
}
/* Safari */
@-webkit-keyframes slide-six  {
  0% { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg); left:25vw; top: 20vh;}
}
/* Standard syntax */
@keyframes slide-six  {
   0%   { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg);  left:25vw; top: 20vh;}
}




}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width:1180px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .about_floorbg { bottom: 0;}
  .magician_element { top: auto; bottom: 37%;}
  .left_fireelmnt, .right_fireelmnt { height: auto; width: auto; bottom: 0;}
  .left_poll #left_poll, .right_poll #right_poll { width: 20vw;}
  .left_fireelmnt  {left: 30vw;}
  .right_fireelmnt{right: 30vw;}
  .left_lion, .right_lion { width: 30vw;}
  .left_fireelmnt img, .right_fireelmnt img  {width: 15vw;}
  .cards { width: 10vw;}
  .left_curtain, .right_curtain { width: 18vw;}

/* Safari */
@-webkit-keyframes slide-one  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(-2deg); left:-100px} */
  100% { transform:rotate(-20deg); left:-7vw; top: 3vh;}
}
/* Standard syntax */
@keyframes slide-one  {
   0%   { transform:rotate(0deg); left:0; top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-100px} */
  100% { transform:rotate(-20deg); left:-6vw; top: 8vh;}
}


/* Safari */
@-webkit-keyframes slide-two  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(-2deg); left:-200px} */
  100% { transform:rotate(-25deg); left:-15vw; top:13vh;}
}
/* Standard syntax */
@keyframes slide-two  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(-2deg); left:-200px} */
  100% { transform:rotate(-25deg); left:-15vw; top: 13vh;}
}


/* Safari */
@-webkit-keyframes slide-three  {
  0% { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-23vw;  top: 18.5vh;}
}
/* Standard syntax */
@keyframes slide-three  {
   0%   { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-23vw; top: 18.5vh;}
}

/* Safari */
@-webkit-keyframes slide-four  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:6vw; top: 7vh;}
}
/* Standard syntax */
@keyframes slide-four  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:6vw; top: 7vh;}
}


/* Safari */
@-webkit-keyframes slide-five  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:15vw; top: 12vh;}
}
/* Standard syntax */
@keyframes slide-five  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:15vw; top: 12vh;}
}

/* Safari */
@-webkit-keyframes slide-six  {
  0% { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg); left:23vw; top: 18vh;}
}
/* Standard syntax */
@keyframes slide-six  {
   0%   { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg);  left:23vw; top: 18vh;}
}





}


@media screen and (max-width: 600px) { 

  .sun_elment { width: 30vw; top: 35%;} 
  .ranbow_ring { width: 45vw; top: 45%;}
  .magician_element { width: 100vw; top:auto;}
  .left_lion, .right_lion { width: 40vw;}
  .magician_element .animation2, .magician_element .animation1 { width: 120vw; margin-left: -10vw;}
.about_floorbg { display:none;}
.mboileabout_floorbg { position:fixed; left:0; right:0; bottom:-5vh; z-index:99; display:block; width:116vw; margin-left:-8vw;}
.left_fireelmnt, .right_fireelmnt { height: auto;}
.left_fireelmnt { left: 40%; bottom: 3vh;}
.right_fireelmnt { right: 40%; bottom: 3vh;}
.leftpoll_suport, .rightpoll_suport { width: 15vw;}
.leftpoll_suport { left: 5vw;}
.rightpoll_suport { right: 5vw;}
.left_curtain, .right_curtain { width: 32vw;}
.left_stairs, .right_stairs { bottom: 20vh;}
.left_magicstick #l_magicmstick, .right_magicstick #r_magicmstick { width: 16vw;}
.right_magicstick, .left_magicstick { bottom: 40vh;}
.left_magstk_bg #left_bg, .right_magstk_bg #right_bg { width: 20vw;}
.left_poll #left_poll, .right_poll #right_poll { width: 25vw;}
.left_cloudbg { bottom:40vh; left: 20vw; width: 40vw;}
.right_cloudbg { bottom:50vh; right: 20vw; width: 40vw;}
.cards { width: 15vw; height: 20vh; top: 20vh;}
.cards_outer { left: 0; right: 0;}
.cards .p_card img { max-width: 68%;}
.cards .p_card .outer { text-align: center;}
.about_page .pink_strip { height: 3vh;}
.left_dice, .right_dice { width: 18vw; top: 5vh;}
.p_card.one {
  -webkit-animation: slide-one 1.2s forwards; 
  animation: slide-one 1.2s forwards;
}
.topblue_squre { width: 100vw; left: 0;}
.left_stairs #steps div, .right_stairs #steps div { border: solid #f49dc1;}
.topblue_squre .stars { width: 60vw; left: 20vw;}

/* Safari */
@-webkit-keyframes slide-one  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 15.5vh;}
}
/* Standard syntax */
@keyframes slide-one  {
     0%   { transform:rotate(0deg); left:0; top: 0px;}
    /* 50%  { transform:rotate(-2deg); left:-100px} */
    100% { transform:rotate(-20deg); left:-7vw; top: 15.5vh;}
}


.p_card.two {
  -webkit-animation: slide-two 1.2s forwards; 
  animation: slide-two 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-two  {
    0% { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-16vw; top:17.3vh;}
}
/* Standard syntax */
@keyframes slide-two  {
     0%   { transform:rotate(0deg); left:0; top: 0;}
    /* 50%  { transform:rotate(-2deg); left:-200px} */
    100% { transform:rotate(-25deg); left:-16vw; top: 17.3vh;}
}

/* Safari */
@-webkit-keyframes slide-three  {
  0% { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-22.5vw;  top: 18.5vh;}
}
/* Standard syntax */
@keyframes slide-three  {
   0%   { transform:rotate(0deg); left:0;  top: 0px;}
  /* 50%  { transform:rotate(-2deg); left:-345px; top: 95px;} */
  100% { transform:rotate(-32deg); left:-25vw; top: 20vh;}
}
.p_card.four {
-webkit-animation: slide-four 1.2s forwards; 
animation: slide-four 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-four  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:7vw; top: 15.5vh;}
}
/* Standard syntax */
@keyframes slide-four  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:100px} */
  100% { transform:rotate(20deg); left:7vw; top:15.5vh;}
}
.p_card.five {
-webkit-animation: slide-five 1.2s forwards; 
animation: slide-five 1.2s forwards;
}
/* Safari */
@-webkit-keyframes slide-five  {
  0% { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:16vw; top: 17.3vh;}
}
/* Standard syntax */
@keyframes slide-five  {
   0%   { transform:rotate(0deg); left:0; top: 0;}
  /* 50%  { transform:rotate(2deg); left:200px} */
  100% { transform:rotate(25deg); left:16vw; top: 17.3vh;}
}
.p_card.six {
-webkit-animation: slide-six 1s forwards; 
animation: slide-six 1s forwards;
}
/* Safari */
@-webkit-keyframes slide-six  {
  0% { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg); left:25vw; top: 20vh;}
}
/* Standard syntax */
@keyframes slide-six  {
   0%   { transform:rotate(0deg); left:0; top: 0;;}
  /* 50%  { transform:rotate(2deg); left:300px} */
  100% { transform:rotate(32deg);  left:25vw; top: 20vh;}
}



}