@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
.navratriPage{
  position: relative;
  width: 45%;
  margin: 0 auto;
}
.navratriPageDiv{position: relative;
    background-image: url('../images/navratri/strip.png?v=5');
    background-repeat: repeat-y;
    background-size: contain;
}
.navratriPage .playArea{z-index: 999;background: #fefefc;}
.navratriPage .dandiyaLoaderImage{width: 30%;}

.navratriPage .userName{font-family: 'Libre Baskerville', serif; color:#c3242b;font-size: 40px;font-weight: 100;text-transform: uppercase;}
.navratriPage .fromUser{width: 18%;margin: 0 auto;display: block;}
.navratriPage .fromUser img{max-width: 100%;display: block;;}

.playArea h4{padding: 50px 0 10px;}
.navratriPage .shareClose{color: #ffe457;}
.navratriPage .formSubArea{width: 45%;}

.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);
  }
}
.shrBoxList li.shareText{width: 50%;position: relative;left: 5%;;}
.shrBoxList li{width: 14%;}
.navratriPage .mainImage{z-index: 1;position: relative;}
.navratriPage .header{top: 0;z-index: 99;width: 100%;}
.navratriPage .header .saregamaLogo, .navratriPage .header .rpsgLogo{padding: 8px;}
.navratriPage .userNameArea{z-index: 99;width: 100%;margin: 0 auto;text-align: center;}
.navratriPage .setName{position: absolute;bottom: 3%;z-index: 99;width: 100%;margin: 0 auto;text-align: center;}
.navratriPage .textEntry{background: transparent;border-color: #feeacb;}
.navratriPage .inputField, .navratriPage .textInfo{color: #feeacb;}
.navratriPage ::-webkit-input-placeholder { /* Edge */
    color: #feeacb;
}
.navratriPage :-ms-input-placeholder { /* Internet Explorer */
    color: #feeacb;
}
.navratriPage ::placeholder {
    color: #feeacb;
}
.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: 9s;
    animation-iteration-count: infinite;
    /* linear | ease | ease-in | ease-out | ease-in-out */
    animation-timing-function: linear;
}

.animated {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-30px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@media screen and (min-width: 320px) and (max-width: 359px){
    .dandiyaLoader{padding: 15% 0 0;}
    .playArea h4{line-height: 1.4;margin-top: 10%;}
    .navratriPage .dandiyaLoaderImage{width: 75%;}
    .navratriPage{
        width: 100%;
        background-image: url('../images/navratri/strip.png?v=5');
        background-repeat: repeat-y;
        background-size: contain;
    }
    .navratriPage .header{padding: 0;}
    .navratriPage .header .saregamaLogo, .navratriPage .header .rpsgLogo{padding: 5px;}
    .navratriPage .mainImage img{padding-top: 4%;}
    .navratriPage  .userName{font-size: 170%;}
    .navratriPage  .fromUser{width: 35%;}
    .buyNowArea{width: 30%;}
    .centerBlock, .textEntry, .formSubArea, .textInfo{width: 75%;height: 32px;}
    .navratriPage .inputBtn{top: 0px;right: 0px;}
    .navratriPage .setName{bottom: 6%;}
    /*.bgSectCont{padding-bottom: 10px;}*/

    .navratriPage .formSubArea{float: right;margin-right: 10%;border-color: #feeacb;width: 70%;}
    .shrBoxList li a{font-size: 20px;top: 7px;}
    .shareClose{left: 2% ;top: 26%;color: #feeacb;}
    .inputField{width: 75%;height: 32px;line-height: 32px;font-size: 12px;}
}

@media screen and (min-width: 360px) and (max-width: 767px){
    #winHeight{position: relative;}
    .dandiyaLoader{padding: 15% 0 0;}
    .playArea h4{line-height: 1.4;margin-top: 10%;}
    .navratriPage .dandiyaLoaderImage{width: 75%;}
    .navratriPage{
        width: 100%;
        background-image: url('../images/navratri/strip.png?v=5');
        background-repeat: repeat-y;
        background-size: contain;
    }
    .navratriPage .header{padding: 0;}
    .navratriPage .header .saregamaLogo, .navratriPage .header .rpsgLogo{padding: 5px;}
    .navratriPage .mainImage img{padding-top: 0%;}
    .navratriPage .userName{font-size: 200%;line-height: 1.2;}
    .navratriPage .fromUser{width: 35%;}
    .navratriPage .inputBtn{top: 0px;right: 0px;}
    .navratriPage .setName{bottom: 4%;width: 80%;}
    .buyNowArea{width: 30%;}
    .textInfo{width: 85%;}
    .centerBlock, .textEntry, .formSubArea{width: 75%;height: 32px;}
    /*.bgSectCont{padding-bottom: 20px;}*/

    .navratriPage .formSubArea{float: right;margin-right: 12%;border-color: #feeacb;width: 65%;}
    .shrBoxList li a{font-size: 20px;top: 7px;}
    .shareClose{left: 3% ;top: 26%;color: #feeacb;}
    .refresh span{font-size: 34px;}
    .inputField{width: 75%;height: 32px;line-height: 32px;font-size: 12px;}
}