@font-face {
  font-family: 'GOTHICB';
  src: url('../fonts/GOTHICB.eot');
  src: url('../fonts/GOTHICB.eot') format('embedded-opentype'),
       url('../fonts/GOTHICB.woff2') format('woff2'),
       url('../fonts/GOTHICB.woff') format('woff'),
       url('../fonts/GOTHICB.ttf') format('truetype'),
       url('../fonts/GOTHICB.svg#GOTHICB') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'BrignolaPUAScript';
    src: url('../fonts/BrignolaPUAScript.eot');
    src: url('../fonts/BrignolaPUAScript.eot') format('embedded-opentype'),
         url('../fonts/BrignolaPUAScript.woff2') format('woff2'),
         url('../fonts/BrignolaPUAScript.woff') format('woff'),
         url('../fonts/BrignolaPUAScript.ttf') format('truetype'),
         url('../fonts/BrignolaPUAScript.svg#BrignolaPUAScript') format('svg');
}

.holiPageDiv{
    font-family: 'GOTHICB', 'san-serif';
    position: relative;
    width: 600px;
    margin: 0 auto;
    overflow-x: hidden;
    line-height: 1.5;
    height: 100%;
    background-color: #fff;

}
.backgroundImage{display: block;margin: 0 auto; width: 100%;position: absolute;left: 0;right:0;z-index: 3}
.holiPageDiv .playArea{z-index: 999;background: none;padding: 1rem 0;width: 600px;}
.holiPageDiv .playArea h4{line-height: 1.4; font-size: 120%}
.holiPageDiv .holi_home{width: 85%;display: block;margin: 0 auto;}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.holiPageDiv .titlenameRep{width: 35%;display: block;margin: -10% auto 0%;}
.holiPageDiv .clickTitle{border-top: 1px solid #474945; width: 80%; margin: 0 auto;}
.holiPageDiv .videoElement{
    width: 77%;
    margin: 0 auto;
    position: relative;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
    padding-top: 20%;
    outline: none;
    border: 1px solid #fff;
}
.republicDayParentDiv{position: absolute;;width: 100%;height: 100%;}

.holiPageDiv .userName{
  font-size: 45px;
  font-weight: 600;
  text-transform: inherit;
  line-height: 1.3;
  color: #f350ac;
  font-family: 'BrignolaPUAScript', 'san-serif';
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
.holiPageDiv .playArea h4{
    color: #474945;
    padding: 0 !important;
}
.holiPageDiv .playArea .custName{
  font-size:40px;font-weight: 600;
  text-transform: inherit;;line-height: 1;
  font-family: 'BrignolaPUAScript', 'san-serif';
  animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate; color: #f350ac;
}
.holiPageDiv .fromtext{color:#474945;opacity: 0.7}
@keyframes bop {
  0% {
    transform: scale(0.4);
  }
  50%,
  100% {
    transform: scale(1);
  }
}
.holiPageDiv .subtext span{color: #ffc038;}
.holiPageDiv .fromUser{width: 18%;margin: 0 auto;display: block;}
.holiPageDiv .fromUser img{max-width: 100%;display: block;}

.holiPageDiv .greetingLoaderImage{width: 60%;margin: 2rem auto;}
.republicDay_img_loader .greetingLoaderImagechakra{position: absolute;top: 27%;left: 31%;width: 55px;}

.mainTitle{color:#474945;margin: 0;padding: 0;}
.holiPageDiv .secondMessage{color:#474945;}
.holiPageDiv .greetingLoader{padding: 0% 0 0;}
/* Animation to the loaded page */

 .holiPageDiv .refresh span{font-family: 'FontAwesome'; top: 2px;font-size: 31px;}

 /* .holiPageDiv .centerCont {
     margin: 0;
     position: absolute;
     top: 61%;
     left: 50%;
     -ms-transform: translate(-50%, -61%);
     transform: translate(-50%, -61%);
     width: 80%;
     padding: 0;
     z-index: 3;
 } */
.holiPageDiv .shrBoxList li.shareText{width: 50%;position: relative;left: 5%;;}
.holiPageDiv .shrBoxList li{width: 14%;color:#474945;}
.holiPageDiv .shrBoxList li a{color:#474945;}
.holiPageDiv .shrBoxList li a:hover{color:#474945;}
.holiPageDiv .bgSectCont{z-index: 3;position: absolute;;top: 1%;left: 0;right: 0;margin: 0 auto;width: 100%;text-align: center;}
.holiPageDiv .fortImage{position: relative;top:0;margin: 0 auto 0; left: 0; right: 0;z-index: 2;display: block;padding-top: 15%;}
.holiPageDiv .topOrangeBar{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fd9a3e+0,ffffff+36&1+0,0+100 */
background: -moz-linear-gradient(-45deg,  rgba(253,154,62,1) 0%, rgba(255,255,255,0.64) 36%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(253,154,62,1) 0%,rgba(255,255,255,0.64) 36%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(253,154,62,1) 0%,rgba(255,255,255,0.64) 36%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd9a3e', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    display: block;
    position: absolute;
    top: 0;
    height: 40%;
    z-index: 3;
    width: 100%;
}
.holiPageDiv .productDisplay{position: relative;z-index: 3}
.holiPageDiv .header{z-index: 99;width: 100%;padding-top: 0;}
.holiPageDiv .header .saregamaLogo,
.holiPageDiv .header .rpsgLogo{padding: 10px;}
.holiPageDiv .userNameArea{width: 100%;margin: 0 auto;text-align: center;margin-top: 15%;position: absolute;z-index: 4;}
.holiPageDiv .diwali-name{width: 70%;text-align: center;margin: 15px auto 0;}
.holiPageDiv .setName{position: absolute;bottom: 5%;z-index: 99;width: 100%;margin: 0 auto;text-align: center;}
.holiPageDiv .setName .mainImage{margin-bottom: 2rem;}
.holiPageDiv .textEntry{background: none;border-color: #474945;}
.holiPageDiv .textInfo{color: #474945; display: block; text-align: center; border-top: 1px solid #f350ac;font-family: inherit;padding: 5px 0 10px;width: 80%;font-size: 90%}
.holiPageDiv .inputBtn{background-color: #474945; color:#ffffff;font-weight: 600;}
.holiPageDiv .republicTxt{width: 50%;display: block;margin: 7% auto 0;}
.holiPageDiv .centerBlock{position: absolute;right: 5px;bottom: 40px;}
.holiPageDiv .inputField{background: none;color: #474945;}
.holiPageDiv .inputField::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
}
.holiPageDiv .formSubArea{background: none;border-color: #474945;}

.holiPageDiv .inputField::-webkit-input-placeholder{ /* Edge */
    color: #474945;
}
.holiPageDiv .inputField:-ms-input-placeholder{ /* Internet Explorer */
    color: #474945;
}
.holiPageDiv .inputField::placeholder{
    color: #474945;
}
.holiPageDiv .shareClose{left: 18% ;color: #474945;}


.holiPageDiv .carvaanLogo{position: absolute;right: 0;padding: 0;bottom: 5px;z-index: 4}

@media screen and (min-width: 1100px) and (max-width: 2600px){
  .holiPageDiv .centerCont{
    width: 90%;
      top: 55%;
      -ms-transform: translate(-50%, -55%);
      transform: translate(-50%, -55%);
  }
  .holiPageDiv .fortImage{padding-top: 2%}
  .holiPageDiv .userNameArea{margin-top: 6%}
  .holiPageDiv{width: 470px}
  .holiPageDiv .playArea{width: 100%;max-width: 460px}
  .holiPageDiv .textEntry,
  .holiPageDiv .formSubArea{width: 70%;}
  .holiPageDiv .textInfo{width: 35%;}
  .holiPageDiv .userName{font-size: 35px}
  .holiPageDiv .refresh span { top: -11px;}
  .holiPageDiv .shareClose { left: 8%; }
  .holiPageDiv .centerBlock { bottom: 10px; }
}

@media screen and (min-width: 320px) and (max-width: 359px){
    .holiPageDiv .greetingLoaderImage{width: 75%;}
    .holiPageDiv .playArea h4{line-height: 1.4;}
    .holiPageDiv{width: 100%;background: #d7d4da;}
    .holiPageDiv .header{padding: 0;}
    .holiPageDiv .header .saregamaLogo, .holiPageDiv .header .rpsgLogo{padding: 5px;}
    .holiPageDiv .userName{font-size: 280%;}
    .holiPageDiv .fromUser{width: 35%;}
    .holiPageDiv .centerBlock,
    .holiPageDiv .textEntry,
    .holiPageDiv .formSubArea,
    .holiPageDiv .textInfo{width: 55%;height: 45px;}

    .holiPageDiv .formSubArea{float: right;margin-right: 10%; width: 70%;}
    .holiPageDiv .shrBoxList li a{font-size: 20px;top: 10px;}
    .holiPageDiv .shareClose{left: 2% ;top: 26%;}
    .holiPageDiv .inputField{width: 75%;height: 45px;line-height: 32px;font-size: 14px;}
    .holiPageDiv .centerBlock{bottom: 5px;}
    .holiPageDiv .shrBoxList li.shareText{top: 10px;}
    .holiPageDiv .videoElement{
      width: 90%;
      padding-top: 27%;
    }
    .holiPageDiv .userNameArea{margin-top: 10%;}
}

@media screen and (min-width: 360px) and (max-width: 767px){
    .holiPageDiv .playArea{width: 100%;padding: 0;}
    .holiPageDiv .playArea h4{line-height: 1.4;padding: 0 !important;}
    .holiPageDiv .greetingLoaderImage{width: 75%;}
    .holiPageDiv{width: 100%;}
    .holiPageDiv .header{padding: 0;}
    .holiPageDiv .header .saregamaLogo,
    .holiPageDiv .header .rpsgLogo{padding: 5px;}
    .holiPageDiv .userName{font-size: 280%;}
    .holiPageDiv .subtext{font-size: 16px;}
    .holiPageDiv .fromUser{width: 35%;}
    .holiPageDiv .textInfo{width: 50%;}
    .holiPageDiv .centerBlock,
    .holiPageDiv .textEntry,
    .holiPageDiv .formSubArea{width: 75%;height: 45px;}
    .holiPageDiv .formSubArea{float: right;margin-right: 12%;width: 65%;}
    .holiPageDiv .shrBoxList li a{font-size: 20px;top: 13px;}
    .holiPageDiv .shareClose{left: 6% ;top: 26%;}
    .holiPageDiv .inputField{width: 75%;height: 45px;line-height: 32px;font-size: 14px;}
    .holiPageDiv .centerBlock{bottom: 5px;}
    .holiPageDiv .shrBoxList li.shareText{top: 10px;}
    .holiPageDiv .fortImage{padding-top: 20%}
    .holiPageDiv .videoElement{
      width: 95%;
      padding-top: 30%;
    }
    .holiPageDiv .userNameArea{margin-top: 10%;}
    .holiPageDiv .holi_home{width: 100%;}
    .holiPageDiv .titlenameRep{
      width: 55%;
    }
}
@media screen and (min-width: 240px) and (max-width: 320px){
  .holiPageDiv .centerCont {
    position: relative;
      top: 0;
      left: 0;
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    .holiPageDiv .playArea{width: 100%;}
}