/* reset hubspot styles, remove if necessary */
.page-hero {position: relative; background: #E4EBEE;}
.page-hero .tab {position: relative;}

/* hide content, will be shown during animation */
.page-hero .content-wrap {
    opacity: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 0.7s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

/**********************************************/
/* RG Human grid styles                       */
/**********************************************/

#rg-human-grid {
    width: 100%;
    margin: auto;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

#rg-human-grid-container {
    width: 100%;
    height: 100%;
    left: 50%;
    position: absolute;
}

#rg-human-grid-container:after {
    content: "";
    display: block;
    clear: both;
}

#rg-human-grid .col {
    float: left;
    width: 70px;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    
    -webkit-animation-name: cols;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);

    animation-name: cols;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);

    will-change: transform, filter, opacity;
}

#rg-human-grid .col .stripe {
    width: 100%;
    height: 150%;
    min-height: 1500px;

    -webkit-animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);

    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);

    will-change: transform;    
}

#rg-human-grid-container.large .col .stripe {
    /* update image path to reflect hubspot's url */
    background: url('http://www.rewardgateway.com/hubfs/human_grid.jpg') repeat-y left top;
    background-size: 2520px auto;
}

#rg-human-grid-container.small .col .stripe {
    /* update image path to reflect hubspot's url */
    background: url('http://www.rewardgateway.com/hubfs/human_grid_small.jpg') repeat-y left top;
    background-size: 1050px auto;
}



/* css clases to animate column stripes */
#rg-human-grid .col .stripe.animation1 {
    -webkit-animation-name: stripes1;
    -webkit-transform: translate(0, 0px);
    
    animation-name: stripes1;
    transform: translate(0, 0px);
}

#rg-human-grid .col .stripe.animation2 {
    -webkit-animation-name: stripes2;
    -webkit-transform: translate(0, 0);

    animation-name: stripes2;
    transform: translate(0, 0);
}

#rg-human-grid .col .stripe.animation3 {
    -webkit-animation-name: stripes3;
    -webkit-transform: translate(0, 0);

    animation-name: stripes3;
    transform: translate(0, 0);
}

#rg-human-grid .col .stripe.animation4 {
    -webkit-animation-name: stripes4;
    -webkit-transform: translate(0, 0);

    animation-name: stripes4;
    transform: translate(0, 0);
}

#rg-human-grid .col .stripe.animation5 {
    -webkit-animation-name: stripes5;
    -webkit-transform: translate(0, 0);

    animation-name: stripes5;
    transform: translate(0, 0);
}

#rg-human-grid .col .stripe.animation6 {
    -webkit-animation-name: stripes6;
    -webkit-transform: translate(0, -350px);

    animation-name: stripes6;
    transform: translate(0, -350px);
}

#rg-human-grid .col .stripe.animation7 {
    -webkit-animation-name: stripes7;
    -webkit-transform: translate(0, -350px);

    animation-name: stripes7;
    transform: translate(0, -350px);
}

#rg-human-grid .col .stripe.animation8 {
    -webkit-animation-name: stripes8;
    -webkit-transform: translate(0, -350px);

    animation-name: stripes8;
    transform: translate(0, -350px);
}

#rg-human-grid .col .stripe.animation9 {
    -webkit-animation-name: stripes9;
    -webkit-transform: translate(0, -350px);

    animation-name: stripes9;
    transform: translate(0, -350px);
}

#rg-human-grid .col .stripe.animation10 {
    -webkit-animation-name: stripes10;
    -webkit-transform: translate(0, -350px);

    animation-name: stripes10;
    transform: translate(0, -350px);
}



/* columns appearing animation */
@keyframes cols {
    100% {
        transform: translate(0,0) scale(1);
        opacity:1;
    }
}
@-webkit-keyframes cols {
    100% {
        -webkit-transform: translate(0,0) scale(1);
        opacity:1;
    }
}


/* stripes moving animations */
@keyframes stripes1 {
    0%   {transform: translate(0,    0px);}
    100% {transform: translate(0,  -70px);}
}
@-webkit-keyframes stripes1 {
    0%   {-webkit-transform: translate(0,    0px);}
    100% {-webkit-transform: translate(0,  -70px);}
}


@keyframes stripes2 {
    0%   {transform: translate(0,    0px);}
    100% {transform: translate(0, -140px);}
}
@-webkit-keyframes stripes2 {
    0%   {-webkit-transform: translate(0,    0px);}
    100% {-webkit-transform: translate(0, -140px);}
}


@keyframes stripes3 {
    0%   {transform: translate(0,    0px);}
    100% {transform: translate(0, -210px);}
}
@-webkit-keyframes stripes3 {
    0%   {-webkit-transform: translate(0,    0px);}
    100% {-webkit-transform: translate(0, -210px);}
}


@keyframes stripes4 {
    0%   {transform: translate(0,    0px);}
    100% {transform: translate(0, -280px);}
}
@-webkit-keyframes stripes4 {
    0%   {-webkit-transform: translate(0,    0px);}
    100% {-webkit-transform: translate(0, -280px);}
}


@keyframes stripes5 {
    0%   {transform: translate(0,    0px);}
    100% {transform: translate(0, -350px);}
}
@-webkit-keyframes stripes5 {
    0%   {-webkit-transform: translate(0,    0px);}
    100% {-webkit-transform: translate(0, -350px);}
}


@keyframes stripes6 {
    0%   {transform: translate(0, -350px);}
    100% {transform: translate(0,    0px);}
}
@-webkit-keyframes stripes6 {
    0%   {-webkit-transform: translate(0, -350px);}
    100% {-webkit-transform: translate(0,    0px);}
}


@keyframes stripes7 {
    0%   {transform: translate(0, -350px);}
    100% {transform: translate(0,  -70px);}
}
@-webkit-keyframes stripes7 {
    0%   {-webkit-transform: translate(0, -350px);}
    100% {-webkit-transform: translate(0,  -70px);}
}


@keyframes stripes8 {
    0%   {transform: translate(0, -350px);}
    100% {transform: translate(0, -140px);}
}
@-webkit-keyframes stripes8 {
    0%   {-webkit-transform: translate(0, -350px);}
    100% {-webkit-transform: translate(0, -140px);}
}


@keyframes stripes9 {
    0%   {transform: translate(0, -350px);}
    100% {transform: translate(0, -210px);}
}
@-webkit-keyframes stripes9 {
    0%   {-webkit-transform: translate(0, -350px);}
    100% {-webkit-transform: translate(0, -210px);}
}


@keyframes stripes10 {
    0%   {transform: translate(0, -350px);}
    100% {transform: translate(0, -280px);}
}
@-webkit-keyframes stripes10 {
    0%   {-webkit-transform: translate(0, -350px);}
    100% {-webkit-transform: translate(0, -280px);}
}