@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
.janmashtamiPage{
    font-family: 'Segoe UI', san-serif;
    position: relative;
    background: #fff;
    width: 600px;
    margin: 0 auto;
    overflow-x: hidden;
    line-height: 1.5;
}
.janmashtamiPageDiv{position: relative;}

.janmashtamiPageDiv div#fall-container {
  height: 90%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  perspective-origin: center;
}
.janmashtamiPageDiv #leaf2 {
  position: absolute;
  width: 15%;
  transform: rotate(40deg);
  animation:  fall 18s linear infinite;
  top: 0%;
  left: 0;
  cursor: pointer;
  z-index: 3
}

@keyframes fall {
	20% {  -webkit-filter: drop-shadow(0px 60px 40px rgba(0,0,0,0)); }
	100% {top: 70%; left: 50%;transform: rotate(-40deg);
		-webkit-filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));width: 35%;; }
}
.krishnaView{
  position: relative;
  margin: 0 auto;
  left: 0;
  right:0;
  top:0
}
.janmashtamiPageDiv .logoView{
  width: 80%;
  margin: 8% auto;
  display: block;
}

.janmashtamiPage .playArea{z-index: 999;background: #55ccd9;padding: 2rem 0;width: 600px;}
.janmashtamiPage .playArea h4{line-height: 1.4; color:#010d5b;font-family: 'Courgette', cursive; font-size: 17px;margin-top: 5%}
.janmashtamiPage .inde-name{width: 50%;margin: 0rem auto;animation: bop 6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;}
.janmashtamiPage .janmashtami-strip{
    width: 40%;
    margin: 1rem auto;
}

.janmashtamiParentDiv{position: relative;width: 600px;overflow: hidden;}
.janmashtamiPage .userName{font-size: 45px;font-weight: 600;text-transform: uppercase;color: #fff;line-height: 1.3;}
.janmashtamiPage .subtext span{color: #ffc038;}
.janmashtamiPage .fromUser{width: 18%;margin: 0 auto;display: block;}
.janmashtamiPage .fromUser img{max-width: 100%;display: block;}

.janmashtami_img_loader{position: relative;}
.janmashtamiPage .greetingLoaderImage{width: 80%;margin: 0rem auto;}
.greetingLoaderImage__1{
    position: absolute;
    bottom: 25%;
    right: 30.7%;
    width: 24.5%;
    z-index: 99;
}

.greetingLoaderImage__2{
    position: absolute;
    bottom: 32.6%;
    left: 31.4%;
    width: 12.3%;
    z-index: 99;
}
.greetingLoaderImage__3{
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    width: 65%;
    text-align: center;
    margin: 0 auto;
    display: none;
}
.janmashtami_img_loader a{
    cursor: url("../images/janmashtami/fluet.png"), url("../images/janmashtami/fluet.cur"), default;
}

.position-absolute{position: absolute;z-index: 99;opacity: 0.6;}
.feather_01{
    top: 18%;
    left: -38%;
    width: 70%;
    opacity: 0.5;
}
.feather_02{
    top: 17%;
    right: 8%;
    width: 25%;
}
.feather_03{
    top: 40%;
    right: -5%;
    width: 42%;
}
.userName{
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
@keyframes bop {
  0% {
    transform: scale(0.4);
  }
  50%,
  100% {
    transform: scale(1);
  }
}
@keyframes music-1 {
   0% {
      transform: translateY(18px);
      left: 18%;
   }
   100% {
     left: 20%;
      transform: translateY(1px);
   }
}
@keyframes music-2 {
   0% {
      transform: translateY(18px);
      right: 8%;
   }
   100% {
     right: 5%;
      transform: translateY(1px);
   }
}
@keyframes music-3 {
   0% {
      transform: translateY(18px);
      left: 8%;
   }
   100% {
     left: 10%;
      transform: translateY(1px);
   }
}
@keyframes music-4 {
   0% {
      transform: translateY(18px);
      right: 12%;
   }
   100% {
     right: 15%;
      transform: translateY(1px);
   }
}
.shrBoxList li.shareText{width: 50%;position: relative;left: 5%;color: #fff;}
.shrBoxList li{width: 14%;}
.janmashtamiPage .bgSectCont{z-index: 1;position: absolute;top: 5px;left: 0;right: 0;margin: 0 auto;width: 100%;text-align: center;}
.janmashtamiPage .header{z-index: 99;width: 100%;padding-top: 0;}
.janmashtamiPage .header .saregamaLogo,
.janmashtamiPage .header .rpsgLogo{padding: 10px;}
.janmashtamiPage .userNameArea{width: 100%;margin: 0 auto;text-align: center;}
.janmashtamiPage .title{
    width: 75%;
    text-align: center;
    margin: 2% auto;
    animation: run;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
.janmashtamiPage .diwali-name{width: 70%;text-align: center;margin: 15px auto 0;}
.janmashtamiPage .setName{position: absolute;bottom: 5%;z-index: 99;width: 100%;margin: 0 auto;text-align: center;}
.janmashtamiPage .setName .mainImage{margin-bottom: 1rem;}
.janmashtamiPage .textEntry{background: transparent;border-color: #fff;}
.janmashtamiPage .textInfo{color: #fff;}
.janmashtamiPage .inputBtn{background-color: #ee3623;color: #fff;font-weight: 500;}
.janmashtamiPage .centerBlock{position: absolute;right: 5px;bottom: 40px;}
.janmashtamiPage .inputField::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
}
.janmashtamiPage .formSubArea{background-color: transparent;border-color: #fff;}

.janmashtamiPage .inputField::-webkit-input-placeholder{ /* Edge */
    color: #fff;
}
.janmashtamiPage .inputField:-ms-input-placeholder{ /* Internet Explorer */
    color: #fff;
}
.janmashtamiPage .inputField::placeholder, .janmashtamiPage .inputField, .janmashtamiPage .shrBoxList li a{
    color: #fff;
}
.lineAnimation{overflow: hidden;}

.lineAnimation span{
    position: absolute;
    display: block;
}
.lineAnimation span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #feeacb);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
.lineAnimation span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #feeacb);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
.lineAnimation span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #feeacb);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}
.lineAnimation span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #feeacb);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}
@keyframes spinning {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.spin {
    animation-name: spinning;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: linear;
}
@keyframes run{
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
.janmashtamiPage .carvaanLogo{position: absolute;right: 0;padding: 8px 0;bottom: 0;}
i {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.8);
  position: absolute;
  transition: all 0.4s ease-in-out;
  transform: rotate(15deg);
  animation: shine;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
i:after, i:before {
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(to left, transparent, white, transparent);
  left: -34px;
  top: calc(50% - 1px);
  width: 80px;
  height: 2px;
}
i:before {
  width: 2px;
  height: 80px;
  left: calc(50% - 1px);
  top: -34px;
  background-image: linear-gradient(to bottom, transparent, white, transparent);
}

@keyframes shine {
  0% {
    transform: scale(0.1) rotate(-200deg);
  }
  55% {
    transform: scale(1.2) rotate(180deg);
  }
  100% {
    transform: scale(0.1) rotate(-200deg);
  }
}
.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }
}
.refresh span{color: #fff;}

@media screen and (min-width: 320px) and (max-width: 359px){
    .greetingLoader{padding: 1% 0 0;}
    .janmashtamiPageDiv{
        position: relative;
        min-height: 100vh;
        background-image: url('../images/janmashtami/patch.jpg?v=2');
        background-size: contain;
        background-position: bottom;
    }
    .janmashtamiParentDiv{width: 100%;height: 100vh;}
    .janmashtamiPage .greetingLoaderImage{width: 90%;}
    .greetingLoaderImage__1{position: absolute;bottom: 25%;right: 28%;width: 28%;z-index: 99;}
    .greetingLoaderImage__2{position: absolute;bottom: 32.3%;left: 29%;width: 14%;z-index: 99;}
    .playArea h4{line-height: 1.4;}
    .janmashtamiPage{width: 100%;background: #d7d4da;}
    .janmashtamiPage .header{padding: 0;}
    .janmashtamiPage .header .saregamaLogo, .janmashtamiPage .header .rpsgLogo{padding: 5px;}
    .userNameArea{margin-top: 3%;}
    .janmashtamiPage  .userName{font-size: 170%;}
    .janmashtamiPage  .fromUser{width: 35%;}
    .janmashtamiPage .janmashtami-strip{width: 35%;display: block;margin: 0 auto;}
    .janmashtamiPage .janmashtami-name{width: 40%;margin: 0 auto;}
    .buyNowArea{width: 30%;}
    .centerBlock, .textEntry, .formSubArea, .textInfo{width: 75%;height: 45px;}
    .janmashtamiPage .inputBtn{}
    .janmashtamiPage .setName{bottom: 8%;}
    .bgSectCont{padding-bottom: 10px;}

    .formSubArea{float: right;margin-right: 10%;border-color: #fff;width: 70%;}
    .shrBoxList li a{font-size: 20px;top: 10px;color:#fff;}
    .shareClose{left: 5% ;top: 26%;color: #a18d66;}
    .inputField{width: 75%;height: 45px;line-height: 32px;font-size: 14px;color: #fff;}
    .inputField::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #fff;
    }
    .janmashtamiPage .centerBlock{bottom: 5px;}
    .shrBoxList li.shareText{top: 10px;}
}

@media screen and (min-width: 360px) and (max-width: 767px){

  .janmashtamiPageDiv #leaf2 {width: 25%;transform: rotate(40deg);}

  @keyframes fall {
    20% {  -webkit-filter: drop-shadow(0px 60px 40px rgba(0,0,0,0)); }
    100% {top: 60%; left: 40%;transform: rotate(-40deg);
      -webkit-filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.6));width: 45%; }
  }
  .janmashtamiPageDiv .logoView{width: 90%}

    .greetingLoader{padding: 1% 0 0;}
    .janmashtamiPage .playArea{width: 100%;padding: 0;}
    .playArea h4{line-height: 1.4;}
    .janmashtamiPageDiv{
        position: relative;
        min-height: 100vh;
        background-image: url('../images/janmashtami/patch.jpg?v=2');
        background-size: contain;
        background-position: bottom;
    }
    .janmashtamiParentDiv{width: 100%;height: 100vh;}
    .janmashtamiPage .greetingLoaderImage{width: 90%;}
    .greetingLoaderImage__1{position: absolute;bottom: 25%;right: 28%;width: 28%;z-index: 99;}
    .greetingLoaderImage__2{position: absolute;bottom: 32.3%;left: 29%;width: 14%;z-index: 99;}
    .janmashtamiPage .janmashtami-strip{width: 40%;display: block;margin: 0 auto;}
    .janmashtamiPage .janmashtami-name{width: 50%;margin: 1rem auto;}
    .janmashtamiPage{width: 100%;background: #d7d4da;}
    .janmashtamiPage .header{padding: 0;}
    .janmashtamiPage .header .saregamaLogo, .janmashtamiPage .header .rpsgLogo{padding: 5px;}
    .userNameArea{margin-top: 3%;}
    .janmashtamiPage .userName{font-size: 200%;}
    .janmashtamiPage .subtext{font-size: 16px;}
    .janmashtamiPage .fromUser{width: 35%;}
    .janmashtamiPage .inputBtn{}
    .janmashtamiPage .setName{bottom: 10%;}
    .buyNowArea{width: 30%;}
    .textInfo{width: 80%;}
    .centerBlock, .textEntry, .formSubArea{width: 75%;height: 45px;}
    .bgSectCont{padding-bottom: 20px;}
    .formSubArea{float: right;margin-right: 12%;border-color: #fff;width: 65%;}
    .shrBoxList li a{font-size: 20px;top: 13px;color:#fff;}
    .shareClose{left: 7% ;top: 26%;color: #a18d66;}
    .refresh span{font-size: 34px;}
    .inputField{width: 75%;height: 45px;line-height: 32px;font-size: 14px; color:#fff;}
    .inputField::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #fff;
    }
    .janmashtamiPage .centerBlock{bottom: 5px;}
    .shrBoxList li.shareText{top: 10px;}
}
@media screen and (min-width: 360px) and (max-width: 380px){
    .janmashtamiPageDiv{
        position: relative;
        min-height: 100vh;
        background-image: url('../images/janmashtami/patch.jpg?v=2');
        background-size: contain;
        background-position: bottom;
    }
    .janmashtamiPage .janmashtami-name {
        width: 40%;
    }
    .janmashtamiPage .rakhi {
        width: 65%;
    }
}