﻿.wrapper1{
  background:rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color:white;
    font-weight:bold;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    position: fixed;
}

@-webkit-keyframes LotusAnitmation {
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(0,-100px);
    }
}

@-webkit-keyframes Lotus1Anitmation {
    0%{
        background-image:url(../images/loader/Lotus-Brown-1.png)
    }
    50%{
        background-image:url(../images/loader/Lotus-Pink-1.png)
    }
    90%{
        background-image:url(../images/loader/Lotus-White-1.png)
    }
}

@-webkit-keyframes Lotus2Anitmation {
    0%{
        background-image:url(../images/loader/Lotus-Brown-2.png)
    }
    50%{
        background-image:url(../images/loader/Lotus-Pink-2.png)
    }
    90%{
        background-image:url(../images/loader/Lotus-White-2.png)
    }
}

@-webkit-keyframes Lotus3Anitmation {
    0%{
        background-image:url(../images/loader/Lotus-Brown-3.png)
    }
    50%{
        background-image:url(../images/loader/Lotus-Pink-3.png)
    }
    90%{
        background-image:url(../images/loader/Lotus-White-3.png)
    }
}

@-webkit-keyframes Lotus4Anitmation {
    0%{
        background-image:url(../images/loader/Lotus-Brown-4.png)
    }
    50%{
        background-image:url(../images/loader/Lotus-Pink-4.png)
    }
    90%{
        background-image:url(../images/loader/Lotus-White-4.png)
    }
}

@-webkit-keyframes Lotus5Anitmation {
    0%{
        background-image:url(../images/loader/Lotus-Brown-5.png)
    }
    50%{
        background-image:url(../images/loader/Lotus-Pink-5.png)
    }
    90%{
        background-image:url(../images/loader/Lotus-White-5.png)
    }
}

.wrapper {
    margin-top:100px;
    text-align: justify;
    text-align:center;
    animation:LotusAnitmation 2s ease-in-out alternate infinite both;
}

.wrapper .Lotus1{
    background-image:url(../images/loader/Lotus-Pink-1.png);
    width:12%;
    height:200px;
    background-repeat:no-repeat;
    display: inline-block; 
    margin-right:-140px;
    margin-bottom:-180px;
    animation:Lotus1Anitmation 5s normal infinite both;
}

.wrapper .Lotus2{  
    background-image:url(../images/loader/Lotus-Pink-2.png);
    width:10%;
    height:200px;
    background-repeat:no-repeat;
    display: inline-block; 
    margin-bottom:-70px;
    animation:Lotus2Anitmation 5s normal infinite both;
}

.wrapper .Lotus3{
    background-image:url(../images/loader/Lotus-Pink-3.png);
    width:25%;
    height:350px;
    background-repeat:no-repeat;
    display: inline-block; 
    margin-bottom:-30px;
    animation:Lotus3Anitmation 5s normal infinite both;
}

.wrapper .Lotus4{
    background-image:url(../images/loader/Lotus-Pink-4.png);
    width:11%;
    height:200px;
    background-repeat:no-repeat;
    display: inline-block; 
    margin-bottom:-70px;
    margin-left:-115px;
    animation:Lotus4Anitmation 5s normal infinite both;
}

.wrapper .Lotus5{
    background-image:url(../images/loader/Lotus-Pink-5.png);
     width:12%;
    height:200px;
    background-repeat:no-repeat;
    display: inline-block; 
    margin-left:-120px;
    margin-bottom:-180px;
    animation:Lotus5Anitmation 5s normal infinite both;
}