.animatieContainer{
    width: 100%;
    text-align: center;
}
.animatieWrap{
    display: inline-block;
    width: 600px;
    height: 500px;
    overflow: hidden;
    position: relative;
    font-family: helvetica;
    background: url(images/bg.jpg);
}
.animatieWrap h2{
    font-size: 40px;
    position: absolute;
    margin-top:25px;
    margin-left:20px;
    font-weight: normal;
    line-height: 35px;
    transition:margin 0.5s ease-in;
}
.animatieWrap h2.hide{
    margin-left:-150px;
}
.animatieWrap .stap{
    position: absolute;
    color:#fff;
    font-size: 40px;
    font-weight: bold;
    transition: all 0.5s ease;
}
.animatieWrap .stap.hide{
    opacity: 0;
}
.animatieWrap .stap.N1{
    width: 135px;
    height: 65px;
    z-index: 10;
    position: absolute;
    background: url(images/stap1.png);
    margin-left:300px;
    margin-top:30px;
}
.animatieWrap .stap.N1 span{
    line-height: 65px;
    margin-left:22px;
    float:left;
}

.animatieWrap p{
    position: absolute;
    font-size: 18px;    
    transition: all 0.5s ease;
}
.animatieWrap p.hide{
    opacity: 0;
}

.animatieWrap p.stap1{
    margin-left:440px;
    margin-top:35px;
}
.animatieWrap .card1{
    z-index: 5;
    position: absolute;
    height: 84px;
    width: 90px;
    background: url(images/card1.png);
    transition: all 0.5s ease;
}
.animatieWrap .card1.hide{
    opacity: 0;  
}
.animatieWrap .card1.N1{
    margin-left:340px;
    margin-top:50px;
    transform:rotate(-45deg);
}
.animatieWrap .card1.N1.N2{
    margin-top:75px;
    margin-left:345px;
    transform:rotate(-20deg);
}
.animatieWrap .card1.N1.N3{
    margin-top:95px;
    margin-left:325px;
    transform:rotate(-0deg);
}
.animatieWrap p.stap2{
    margin-left:465px;
    margin-top:125px;
}
.animatieWrap .stap.N2{
    width: 135px;
    height: 65px;
    z-index: 10;
    position: absolute;
    background: url(images/stap1.png);
    margin-left:380px;
    margin-top:220px;
    transform:rotate(-45deg); 
}
.animatieWrap .stap.N2 span{
    line-height: 65px;
    margin-left:22px;
    float:left;
     transform:rotate(45deg);
}
.animatieWrap .printer{
    background: url(images/printer.png);
    width: 152px;
    height: 132px;
    position: absolute;
    margin-left:410px;
    margin-top:285px;
    z-index: 15;
    transition: all 0.5s ease;
    animation: wiggle 1s ease 2s alternate; 
}
.animatieWrap .printer.hide{
    margin-left: 600px;
}
@keyframes wiggle
{
    0%   {transform:rotate(0deg);}
    20%  {transform:rotate(3deg);}
    40%  {transform:rotate(0deg);}
    80% {transform:rotate(3deg);}
    100% {transform:rotate(0deg);}
}
.animatieWrap p.stap3{
    margin-left:375px;
    margin-top:435px;
}
.animatieWrap .stap.N3{
    width: 73px;
    height: 76px;
    z-index: 10;
    position: absolute;
    background: url(images/stap3.png);
    margin-left:290px;
    margin-top:360px;
}
.animatieWrap .stap.N3 span{
    margin-top:10px;
    margin-left:22px;
    float:left;
}
.animatieWrap .card2{
    width: 118px;
    height: 85px;
    position: absolute;
    background: url(images/card2.png);
    margin-top:330px;
    margin-left:200px;
    z-index: 15;
    transition: all 0.5s ease;
}
.animatieWrap .card2.hide{
    margin-top: 500px;
}
.animatieWrap .stap.N4{
    width: 121px;
    height: 66px;
    z-index: 10;
    position: absolute;
    background: url(images/stap4.png);
    margin-left:70px;
    margin-top:310px;
}
.animatieWrap .stap.N4 span{
    line-height: 66px;
    margin-left:75px;
    float:left;
}
.animatieWrap p.stap4{
    margin-left:20px;
    margin-top:355px;
}
.animatieWrap .perforator{
    background: url(images/perforator.png);
    width: 109px;
    height: 82px;
    position: absolute;
    margin-left:10px;
    margin-top:255px;
    z-index: 15;
    transition: all 0.5s ease;
}
.animatieWrap .perforator.hide{
    margin-left:-110px;
}
.animatieWrap .stap.N5{
    width: 121px;
    height: 66px;
    z-index: 10;
    position: absolute;
    background: url(images/stap4.png);
    margin-left:40px;
    margin-top:130px;
}
.animatieWrap .stap.N5 span{
    line-height: 66px;
    margin-left:75px;
    float:left;
}
.animatieWrap p.stap5{
    margin-left:10px;
    margin-top:173px;
}
.animatieWrap .hand{
    background: url(images/hand.png);
    width: 150px;
    height: 113px;
    position: absolute;
    margin-left:273px;
    margin-top:140px;
    transition: all 0.5s ease;
    z-index: 2;
}
.animatieWrap .hand.hide{
    transform:scale(4);
    opacity: 0;
}
.animatieWrap .resultaat{
    background: url(images/resultaat.png);
    width: 148px;
    height: 191px;
    position: absolute;
    margin-left:190px;
    margin-top:174px;
    z-index: 1;
    transition: all 0.5s ease; 
}
.animatieWrap .resultaat.hide{
    opacity: 0;
    margin-top:-191px;
}

.animatieWrap .eind{
    width: 600px;
    height: 500px;
    position: absolute;
    float:left;
    background: #f3f3f4;
    z-index: 100;
    transition: all 0.5s ease; 
}
.animatieWrap .eind.hide{
    opacity: 0;
}
.animatieWrap .eind h3{
    width: 100%;
    text-align: center;
    margin-top:60px;
    font-size: 35px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.animatieWrap .eind p.wens, .animatieWrap .eind p.visite, .animatieWrap .eind p.naam{
    font-size: 25px;
    float:left;
    margin:0px;
    text-align: center;
    width: 25%;
}
.animatieWrap .eind p.wens{
    margin-left:12.5%;
    color:#f05355;
}
.animatieWrap .eind p.visite{
    margin-left:37.5%; 
    color:#13a89e;
}
.animatieWrap .eind p.naam{
    margin-left:62.5%;
    color:#00aeef;   
}
.animatieWrap .eind .card{
    width: 100px;
    height: 65px;
    position: absolute;
    border-radius:3px;
    overflow: hidden;
}
.animatieWrap .eind .card.wens.hide{
    margin-left: -100px;
}
.animatieWrap .eind .card.wens{
    background: url(images/bloemkaart_vrolijk_pasen.jpg) #ed1c24 no-repeat;
    background-size: 100%;
    margin-top:80px;
    margin-left:100px;
    transition: all 0.5s ease; 
}
.animatieWrap .eind .card.visite{
    background: url(images/bloemkaart_de_bloem.jpg) #90d3d7 no-repeat;
    background-size: 100%;
    margin-top:80px;
    margin-left:250px;
    transition: all 0.5s ease; 
}
.animatieWrap .eind .card.visite.hide{
    margin-top: -200px;
}
.animatieWrap .eind .card.naam{
    background: url(images/bloemkaart_tuincentrum.jpg) #25aae1 no-repeat;
    background-size: 100%;
    margin-top:80px;
    margin-left:400px;
    transition: all 0.5s ease; 
}
.animatieWrap .eind .card.naam.hide{
    margin-left:700px;
}