*{box-sizing: border-box;}

img{ max-width: 100%; max-height: 100%;}
.top-content{ float: left; width: 100%;}
body{font-size: 17px;}

.survey-card-bg{ width: 100%; height: 9.000em; float: left; border-radius: 0.188em; padding: 0.80em 1.563em 1.563em 1.563em; margin-bottom: 0.875em;  position: relative;
                 overflow: hidden;}
.survey-card-bg-1 {background:#FF4E4E;}
.survey-card-bg-2 {background:#D1408D;}
.survey-card-bg-3 {background:#FF9B4F;}

.survey-card-heading{color: #fff; font-size: 0.940em; width: 100%; float: left; text-align: center; position: relative; transition: 0.5s; height: 1.35em}
.survey-card-heading span.survey-type {font-weight: bold; }
.get-cashback-amt-inner{display: table-cell; width: 50%; padding-top: 20px; position: relative;}
.cash-amt-sign{font-size: 3.63em; color: #fff; float: left; width: 100%;}
.cash-deatils{display: inline-block; width: 100%; font-size: 0.875em; color: #fff; padding-top: 1.25em; line-height: normal}
.cashback-img{display: inline-block; color: #fff}
.cashback-img img{width:2.94em}
.cashback-txt{font-size: 1em;  display: inline-block; margin-left: 0px; color: #fff;}
.take-survey-button-inner{ width: 50%; display: table-cell;      vertical-align: middle; }
.take-survey-btn{background: #fff; color: #212121; width:10.20em; font-size: 0.625em; border: 1px solid #fff; border-radius: 0.125em; float: right;height: 2.75em; padding: 0px; 
                 line-height: 2.75em;  padding-bottom: 2px;}
.cash-back-surevy-outer {
    display: table;
    width: 100%;
    vertical-align: middle;
    padding-top: 0.313em 
}
.take-survey-btn:hover, .take-survey-btn:focus{background: #fff; color:#212121;}

.survey-card-bg .ripple_effect {
    background-color: #9ba0b0;
}

.survey-card-bg .ripple_effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(4);
    animation: ripple_effect 1s linear;
    top:0px;
    /*  width: 50% !important;
      left: 0 !important;*/
}

.surveyComplete .cashback-img img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.5s ease;
}
@keyframes ripple_effect {
    from{
        transform: scale(0);
        opacity: 1;

    }
    to {
        transform: scale(4);
        opacity: 1;
    }
}

.smile-icn{
    text-align: center;
    width: 100%;
    margin-bottom: -10px;
    /*    animation: smileicn_effect 0.8s linear; 
        animation-delay: 0.5s;
         animation-delay: 0.8s;
         opacity: 0;*/
    transform: translateY(00px);
    opacity: 0;
    transition:all 0.3s ease-in-out 1.1s;
    animation: smileicn_effect 0.5s linear;
    animation-delay:1.7s;

}
.survey-card-bg.active .smile-icn{transform: translateY(0) ; opacity: 1;}


.smile-icn img{ width: 2.500em; } 

.survey-complete-smiles {
    float: right;
    width: 7.5em;
    position: relative;
}

.smile-txt{width: 100%;text-align: center; transform: translateY(30px);opacity: 0;transition:all 0.3s ease-in-out 0.6s; }

.survey-card-bg.active .smile-txt{transform: translateY(0);opacity: 1;}

.smile-txt img{width: 6.875em;}
.smile-txt.quet-txt img{width: 8.875em;}
/*@keyframes smile_effect {
    from{
          transform: translateY(20px);
          opacity: 0;

    }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}*/

@keyframes smileicn_effect {
    0%{
        transform: translateY(0);

    }
    50% {
        transform: translateY(-20px);

    }
    100%{
        transform: translateY(0);
    }
}


.page-cover-card {
    float: left;
    width: 100%;
    padding:0px 10px 10px;
    overflow-x: hidden;
}

.survey-card-header{background:#FF4E4E ; width: 100%; padding: 1.063em; float: left; margin-bottom: 1.3em; height: 3.000em; position: relative;}
.surevy-card-back-arrow img { width: 1.5em;}
.surevy-card-back-arrow  {float: left; position: absolute; margin-top: -3px; z-index: 9;}
.header-txt-heading{float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1.188em; color: #fff;     margin-top: -3px;}
.survey-top-text{font-size: 0.875em; width: 100%; text-align: center; padding-bottom: 1.375em; color: #000; float: left; line-height: 1.2em;}
.ripple_effect_complete {
    background: #9ba0b0;
    top: 0 !important;
    left: 0 !important;
    position: absolute;
    width: 100% !important;
    height: 100% !important;
}

.smile-icn-complete{
    text-align: center;
    width: 100%;
    margin-bottom: -10px;
    opacity: 1;
}
.smile-icn-complete img {
    width: 2.500em;
} 

body.survey-card-full-view .page-cover {
    padding: 0px;
}

/* survey Complete Card css */

.earn-txt {

    font-size: 0.875em;
    display: inline-block;
    margin-left: 0px;
    color: #fff;
    width: 100%;
    line-height: normal;

}
.roundbg{
    height: 15.000em;
    width: 15.000em;
    float: left;
    position: relative;
    margin-top: -7.500em;
    margin-left: -7.813em;
    border-radius: 50%;
    padding-top: 7.500em;
    padding-left: 7.813em;
    box-shadow: 0px 3px 4px 3px rgba(85, 89, 103, 0.48)

}



.survey-card-type2 {

    width: 100%;
    height: 9.000em;
    float: left;
    border-radius: 0.188em;
    /*padding: 0.80em 1.563em 1.563em 1.563em;*/
    margin-bottom: 0.875em;
    position: relative;
    overflow: hidden;

}

.animation_bg .ripple_effect {

    position: absolute;
    border-radius: 50%;
    transform: scale(4);
    animation: ripple_effect 1s linear;
    top: 0px;
    /*    width: 50% !important;
        left: 0 !important;*/

}

.survey-card-type2.active .ripple_effect{background: #6A707E;}
.survey-card-type2.active .ripple_effect_complete{background: #6A707E;}
.emoji-type img {
    width: 2.063em;
}
.card-emoji-txt {

    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    font-size: 0.750em;
    color: #fff;
    font-weight: bold;

}
.card-emoji-icn{display: inline-block; width: 100%; text-align: center;}
.emoji-type{
    display: inline-block;
    width: 4.375em; 
    text-align: center;
    margin-top: 22px;
    margin-left: 10px;
}
.survey-complete-status {
    display: table-cell;
    text-align: center;
    position: relative;
    padding: 5px 10px;
    height: 100%;
    vertical-align: middle;
}
.survey-msg-txt{display: block; font-size: 0.938em; text-align: center; color: #fff; line-height: normal;}
.payback-point{font-size: 2.188em; font-weight: bold; line-height: normal;}
.paybck-point-txt{font-size: 1.063em}
.payback-earned-txt{color: rgba(255,255,255,0.5); font-size: 0.688em; line-height: normal;}
.surevy-staus-txt-outer{
    display: table;
    width: calc(100% - 7.188em);
    height: 100%
}
.survey-round-bg-qualified{background: #46E0BC; }
.survey-round-bg-disqualified{background:#FF6666; }
.survey-round-bg-quit{background: #fecd49}
.qualified-txt-color{color:#46E0BC;}
.disqualified-txt-color{color:#FF6666;}
.quit-txt-color{color:#fecd49;}

.survey-card-shape {
    width: 9.5em;
    position: relative;
    height: 9.00em;
    float: left;

    border-radius: 0.188em 0 0 0.188em
}
.qualified-shape {
    background: url(../../images/card-green.png)no-repeat 0 0 ;
    background-size: 100% 100%;
    border-right:  1px solid rgba(0, 0, 0, 0);
    
}
.disqualified-shape {
    background: url(../../images/card-red.png)no-repeat  0 0;
    background-size: 100% 100%;
    border: 0px;
    border-right:  1px solid rgba(0, 0, 0, 0);
}
.quit-shape {
    background: url(../../images/card-yellow.png)no-repeat  0 0;
    background-size: 100% 100%;
    border: 0px;
    border-right:  1px solid rgba(0, 0, 0, 0);

}

.survey-card-shape-paytm{
    width: 10.50em;
    position: relative;
    height: 10.5em;
    float: left;
    background-size: 100% 100% !important;
    border-radius: 0.188em 0 0 0.188em;
}

.paybacktxt-amt-card-four {

    font-size: 2.188em;
    font-weight: bold;
    line-height: normal;
    color: #fff

}

.payback-earn-card-4 {

    float: left;
    width: 100%;
    text-align: center;
    font-size: 0.750em;
    color: #fff;
    margin-top: -4px;

}
.payback-earn-card4{
    float: left;
    width: 100%;
    text-align: center;
    font-size: 0.750em;
    color: #fff;
    line-height: normal;
}
.card4-paypoint-txt {

    float: left;
    width: 6em;
    text-align: center;
    margin-top: 5px;
    margin-left: 8px;

}
.survey-complete-msg-card-four{
    position: absolute; 
    text-align: right;
    color:#fff;
    width: 100%;
    /*width: 100%;*/
    /*float: right;*/
    padding: 5px 0.938em 5px 0;
    display: table-cell;
    vertical-align: middle;
    right:0px;
}

.survey-status-heading {

    font-size: 1.250em;
    float: right;
    width: 100%;
    line-height: normal;

}
.card-four-msg-txt{font-size: 0.813em; float: right; text-align: right; margin-top: 5px; line-height: normal;}
.card-four-survey-msg-outer {

    display: table;
    height: 5.625em;
    position: absolute;
    width: calc(100% - 7.7em);
    right: 0px;
    float: right;

}
.card-four-emoji img {
    width: 2.500em;
    display: inline-block
}
.card-four-emoji-txt{font-size: 1.063em; display: inline-block; font-weight: bold}
.survey-cardfour-emoji-status {

    position: absolute;
    bottom: 14px;
    left: 3em;

}
body.survey-card-full-view .top-content {
    align-items: flex-start;
}
.surveyListContainer {
    width: 100%;
}


/* card thee css */

.survey-emoji-payback-outer {position: relative; padding-top: 0.625em;}
.survey-cardthree-emoji-txt{padding-left: 15px; float: left;}
.survey-cardtheree-emoji img{
    width: 2.500em;
}
.survey-cardthee-status-txt {
    font-size: 0.875em;
    font-weight: bold;
    display: inline;
    margin-left: 6px
}

.survey-cashabck-bg-txt{
    background: #46E0BC;
    /*width: 8.625em;*/
    float: right;
    padding: 4px 7px 4px 7px;
    border-radius: 0.188em 0 0 0.188em;
    color: #fff;
}
.survey-cardtheree-emoji{display: inline-block;}
.earn-point-txt-card3 {
    font-size: 2.188em;
    display: inline-block;
    font-weight: bold;
    margin-right:3px;
    line-height: normal;
}
.eran-paybak-txt-card3 {
    display: inline-block;
    font-size: 0.750em;
}
.earn-card3 {
    display: block;
    line-height: normal;
}
.survey-emoji-payback-outer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.survey-complete-txt-card3 {
    position: relative;
    text-align: center;
    padding: 15px;
    color: #fff;
}
.comlete-status-heading-card3 {
    display: block;
    width: 100%;
    line-height: normal;
    font-size: 1.250em;
}
.complete-status-txt-card3{
    display: block;
    width: 100%;
    line-height: normal;
    font-size: 0.875em;
    padding-top: 4px;
}
.survey-emoji-payback-outer.flexcenter {
    justify-content: center;
    margin-bottom: 5px;
}
.flexcenter .survey-cardthree-emoji-txt{padding-left: 0px;}
.qualified-br-top{border-top: 0.125em solid #46E0BC}
.disqualified-br-top{border-top: 0.125em solid #FF6666}
.quit-br-top{border-top: 0.125em solid #fecd49}

.eran-point-txt-paytm{ display: inline-block;  position: relative; top: -0.375em;}

/* survey card fullview */
.survey-complete-card-full-view{
    height: calc(100vh - 6.25em);
}
.card-txt-emoji-outer .survey-complete-smiles{width: 100%}
.card-txt-emoji-outer .get-cashback-amt-inner{width: 100%; display: inline-block; text-align: center; padding-top: 0px;}
.card-txt-emoji-outer .survey-card-heading{width: 100%; padding-top: 0.813em;}
.card-txt-emoji-outer{ 
    display:flex; 
    width: 100%; 
    height: 100%; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column;
}
.card-txt-emoji-outer .get-cashback-amt-inner{line-height: normal;}
.card-txt-emoji-outer .cash-amt-sign {line-height: normal; padding-top: 0.20em;}
.card-txt-emoji-outer .cash-deatils {padding-top: 0px;}

.survey-complete-card-full-view .roundbg {position: absolute; left: 0; top: 0;}
.survey-complete-card-full-view  .surevy-staus-txt-outer{width: 100%;}
.survey-complete-card-full-view .survey-complete-status {padding: 5px 1.875em}
.survey-complete-card-full-view  .card-txt-outer {
    padding-top: 0.938em;
}
.survey-complete-card-full-view .eran-point-txt{padding-bottom: 0.188em;}
.survey-complete-card-full-view .survey-emoji-payback-outer{width: 100%; display: inline-block;}
.survey-complete-card-full-view .survey-cardthree-emoji-txt {width: 100%; text-align: center; padding-left: 0px;}
.survey-complete-card-full-view .survey-cashabck-bg-txt{float: none; display: inline-block; text-align: left}
.survey-complete-card-full-view  .survey-cashabck-bg-txt-outer {
    float: left;
    width: 100%;
    text-align: center;
    padding-top: 1.438em;
}
.survey-complete-card-full-view .survey-complete-txt-card3{padding: 1.438em; }
.survey-card3-fullview {

    display: flex;
    height: 100%;
    justify-items: center;
    justify-content: center;
    flex-direction: column;

}
.survey-card3-fullview .survey-emoji-payback-outer{padding-top: 0px;}


.survey-complete-card-full-view .survey-complete-msg-card-four{ 
    text-align: center;
    width: 100%;
    padding: 2.500em 2.063em 0;
    display: inline-block;
}
.survey-complete-card-full-view .card-four-survey-msg-outer {

    width: 100%;
    position: inherit;
    text-align: center;
    float: left;

}
.survey-complete-card-full-view  .card-four-msg-txt{ text-align: center; width: 100%;}
.survey-complete-card-full-view  .survey-cardfour-emoji-status {

    right: 2.063em;
    top: 7.4375em;
    left: initial;
    text-align: center;
    margin: 0 auto;
    width: 9.375em;
    bottom: inherit;
}
.qualified-shape-outer {

    display: flex;
    align-items: center;
    height: auto;
    float: left;
    width: 100%;
    position: relative;

}

.survey-card-shape-big{
    background-size: auto;
    width: 15.625em;
    position: relative;
    height: 13.563em;
    float: left;
    background-size: cover !important;
    border-radius: 0.188em 0 0 0.188em;
}

.qualified-shape-big{
    background: url(../../images/card-green-big.png)no-repeat top left;
    background-size: 100% 100%;
    border-right:  1px solid rgba(0, 0, 0, 0);
}


.disqualified-shape-big{
    background: url(../../images/card-red-big.png) no-repeat top left;
      background-size: 100% 100%;
      border-right:  1px solid rgba(0, 0, 0, 0);
}
.quit-shape-big{
    background: url(../../images/card-yellow-big.png) no-repeat top left;
      background-size: 100% 100%;
      border-right:  1px solid rgba(0, 0, 0, 0);
}

.survey-complete-card-full-view .card4-paypoint-txt {margin-left: 2.500em; width: 5.9em; margin-top: 1.875em; }
.card-with-paytm .cash-deatils{padding-top: 0px;}
.survey-complete-card-full-view.card-with-paytm .card4-paypoint-txt{width: 6.9em; margin-left: 1em}
.card-with-paytm .payback-earn-card4 {
    margin-top: 0.313em;
}

.survey-with-paytm-img .qualified-shape {
    width: 10.50em;
}
.survey-with-paytm-img .disqualified-shape  {
    width: 10.50em;
}
.survey-with-paytm-img .quit-shape {
    width: 10.50em;
}
.survey-with-paytm-img .cash-deatils{padding-top: 0px;}
.survey-with-paytm-img .card4-paypoint-txt{ width: 6.9em}
.survey-with-paytm-img .payback-earn-card4{padding-top: 0.313em;}
.survey-with-paytm-img .survey-cardfour-emoji-status{left:4.3em}
.survey-with-paytm-img .card-four-survey-msg-outer{width: calc(100% - 8.9em);}
.survey-complete-card-full-view .survey-cardtheree-emoji img {width: 3.750em;}
.survey-complete-card-full-view .survey-cardthee-status-txt {font-size: 1.313em;}
.survey-complete-card-full-view .survey-cashabck-bg-txt{border-radius: 0.188em; padding: 1px 7px 1px 7px; }
.survey-complete-card-full-view .smile-icn img {
    width: 3.000em;
}
.survey-complete-card-full-view .smile-txt img {
    width: 8.313em;
}


/* animation code */

.card-animation.surveyComplete.active .roundbg{animation: grow 1.7s ease forwards;}

@keyframes grow {
    from { width: 0; height:0 }
    to { width: 15.000em; height:15.000em;}
}


.card-animation.surveyComplete.active .emoji-type{
    position:relative;
    bottom:-20px;
    opacity:0;
    animation:slide 0.4s forwards; 
    animation-delay: 1.7s;
}

@-webkit-keyframes slide {
    100% { bottom: 0;opacity:1; }
}

@keyframes slide {
    100% { bottom: 0;opacity:1; }
}

.card-animation.surveyComplete.active .survey-card-shape{animation: shapequalifiedd 1.2s ease forwards;}

@keyframes shapequalifiedd {
    from { width: 0;height: 0em; background-size :0 0 }
    to { width:9.5em; height: 9.00em; background-size:100% 100%}
}

.card-animation.surveyComplete.active .card4-paypoint-txt{
    position:relative;
    bottom:-20px;
    opacity:0;
    animation:slideup 0.4s forwards; 
    animation-delay: 1.3s;
}

@-webkit-keyframes slideup {
    100% { bottom: 0;opacity:1; }
}

@keyframes slideup {
    100% { bottom: 0;opacity:1; }
}

.card-animation.surveyComplete.active .survey-cardfour-emoji-status{
    /*position:relative;*/
    margin-left:-20px;
    opacity:0;
    animation:slideleft 0.4s forwards; 
    animation-delay: 1.5s;
}

@-webkit-keyframes slideleft {
    100% { margin-left: 0;opacity:1; }
}

@keyframes slideleft {
    100% { margin-left: 0;opacity:1; }
}


.card-animation.surveyComplete.active.survey-with-paytm-img .survey-card-shape-paytm  {animation: pytmShape 1.2s ease forwards;}

@keyframes pytmShape {
    from { width: 0;height: 0em; background-size :0 0; }
    to { width:10.50em; height:10.5em; background-size :100% 100%; }
}


.card-animation.surveyComplete.active .survey-cardtheree-emoji{
    position: relative;
    left:-20px;
    opacity:0;
    animation:slidecard3left 0.4s forwards; 
    animation-delay: 0.5s;
}

@-webkit-keyframes slidecard3left {
    100% { left: 0;opacity:1; }
}

@keyframes slidecard3left {
    100% { left: 0;opacity:1; }
}

.card-animation.surveyComplete.active .survey-cardthee-status-txt{ 
    position: relative;
    left:-20px;
    opacity:0;
    animation:slidecardleft 0.4s forwards; 
    animation-delay: 0.7s;
}

@-webkit-keyframes slidecardleft {
    100% { left: 0;opacity:1; }
}

@keyframes slidecardleft {
    100% { left: 0;opacity:1; }
}

.card-animation.surveyComplete.active .survey-cashabck-bg-txt{
    position: relative;
    right:-20px;
    opacity:0;
    animation:slideright 0.4s forwards; 
    animation-delay: 0.7s;
}
@-webkit-keyframes slideright {
    100% { right: 0;opacity:1; }
}

@keyframes slideright {
    100% { right: 0;opacity:1; }
}

.card-animation.surveyComplete.active .earn-point-txt-card3{
    position: relative;
    right:-20px;
    opacity:0;
    animation:slideright 0.4s forwards; 
    animation-delay: 0.78s;
}
.card-animation.surveyComplete.active eran-paybak-txt-card3{
    position: relative;
    right:-20px;
    opacity:0;
    animation:slideright 0.4s forwards; 
    animation-delay: 0.80s;
}

/* animation card */

.card-animation.survey-complete-card-full-view.active .survey-card-shape-big{animation: shapeBigcard 1.2s ease forwards;

}

@keyframes shapeBigcard {
    from { width: 0;height: 0em;}
    to { width:15.625em; height: 13.563em;}
}
/*.qualified-shape-outer{ height: 13.563em;}*/


.card-animation.survey-complete-card-full-view.active  .survey-cardfour-emoji-status{
    padding-right: 25px;
    opacity:0;
    animation:slideleftbig 0.4s forwards; 
    animation-delay: 1.5s;
}

@-webkit-keyframes slideleftbig {
    100% { padding-right: 0; opacity:1; }
}

@keyframes slideleftbig {
    100% { padding-right: 0; opacity:1; }
}

.card-animation.survey-complete-card-full-view.active .card4-paypoint-txt{
    position:relative;
    bottom:-20px;
    opacity:0;
    animation:slideup 0.4s forwards; 
    animation-delay: 1.3s;
}