html,body{
    
    width: 100%;
    height: 100%;
    margin:0;
    padding: 0;
}


.human__begin-head {
    position: absolute;
    height: 100%;
    width:100%;
    z-index: 9;
    text-align: center;
}
.human__end-head {
    position: absolute;
    height: 100%;
    width:100%;
    z-index:14;
    text-align: center;
}

.human__end-head img{
    height: 100%;
}

.human__end-mouth {
    position: absolute;
    height: 100%;
    width:100%;
    z-index:20;
    text-align: center;
}

.human__end-mouth img{
    height: 100%;
    margin-top: px;
}


.human__end-body {
    position: absolute;
    height: 100%;
    width:100%;
    z-index: 4;
    text-align: center;
}

.human__end-body img{
    height: 100%;
}

.human__begin-head img{
    height: 100%;
}

.human__begin-body {
    position: absolute;
    height: 100%;
    width:100%;
    z-index: 3;
    
    text-align: center;
}

.human__begin-body img{
    height: 100%;
}

.human__container {
    width: auto;
    margin: auto;
    
    position: relative;
    
    height: 120vw;
}

.human__begin {
    position: absolute;
    height: 100%;
    width:100%;
    
    z-index: 8;
}

.human__end {
    position: absolute;
    height: 100%;
    width:100%;
    
    z-index:18;
}

.human__begin-mouth {
    position: absolute;
    height: 100%;
    width:100%;
    
    z-index: 99;
    
    text-align: center;
}

.human__end-body{
    transition: all .5s ease-in-out;
}

.state-begin .human__end-body{
    opacity: 0;
}
.state-begin .human__end-head{
    display:none;
}
.state-begin .human__end-mouth{
    display:none;
}

.state-end .human__end-body{
    opacity:1;
}
.state-end .human__begin-body{
    opacity: 0;
}

.state-begin .human__begin-body{
    opacity: 1;
}

.human__begin-body{
    transition: all .2s ease-in-out;
}
.state-end .human__begin-head{
    display:none;
}
.state-end .human__begin-mouth{
    display:none;
}

.anim__container {
    
    padding-top:120vw;     
    height: 120vw;
    overflow: hidden;
}

.human__items {
    position: absolute;
    bottom: 0px;
    left: 24%;
    width:55.5%;
    
    z-index: 99;
}

.human__item {
    position: absolute;
    height: 100%;
    width: 50%;
    bottom: 100vw;
    left: 23%;
    
    transform: scale(1,1)
}

.bread {
    z-index: 14;
    position: absolute;
}

.bread-1{
    width: 29vw;
    left: 18vw;
    top: -76vw;
}

.bread-1-anim{
    animation: bread-1-anim forwards 3s;

}


@keyframes bread-1-anim {
    0%{}
    100%{
        top: 26vw;
        left: 39vw;
        transform: scale(0.30) rotate(30deg);
    }

}

.bread-2 {
    
    width: 14vw;
    left: 61vw;
    top: -70vw;
    
}

.bread-2-anim{
    animation: bread-2-anim 2s forwards ease-in;


}

@keyframes bread-2-anim {
    0%{}
    100%{
        top: 26vw;
        left: 40vw;
        
        transform: scale(0.45) rotate(360deg);
    }
}

.bread-3 {
    
    width: 30vw;
    left: 16vw;
    top: -54vw;
    height: 80vw;
    overflow: hidden;
    
}

.bread-3-anim{
    animation: bread-3-anim 2s forwards ease-in;

}

@keyframes bread-3-anim {
    0%{}
    100%{
        top: 45vw;
        left: 50vw;
        
        height: .5vw;
        
        transform: scale(0.61) rotate(20deg);
    }
}

.bread-4 {
    width:  14vw;
    left: 43vw;
    top: -30vw;
    
}

.bread-4-anim{
    animation: bread-4-anim 2s forwards ease-in;


}


@keyframes bread-4-anim {
    0%{}
    100%{
        top: 30vw;
        left: 41.5vw;
        
        transform: scale(0.44) rotate(70deg);
    }
}

.bread-5 {
    width: 16vw;
    left: 46vw;
    top: -45vw;
}

.bread-5-anim{
    animation: bread-5-anim 1.6s forwards ease-in;


}

@keyframes bread-5-anim {
    0%{}
    100%{
        top: 40vw;
        left: 38vw;
        
        transform: scale(0.34) rotate(70deg);
    }
}

.bread-6 {
    width: 12vw;
    left: 60vw;
    top: -18vw;
    
    transform: rotate(38deg);
    
    
}

.bread-6-anim{
    animation: bread-6-anim 1.4s forwards ease-in;

}


@keyframes bread-6-anim {
    0%{}
    100%{
        top: 25vw;
        left: 37vw;
        
        transform: scale(0.24) rotate(0deg);
    }
}

.bread-7 {
    width: 12vw;
    left: 70vw;
    top: -45vw;
    
    
}

.bread-7-anim{
    animation: bread-7-anim 2s forwards ease-in;

}

@keyframes bread-7-anim {
    0%{}
    100%{
        top: 25vw;
        left: 37vw;
        
        transform: scale(0.16) rotate(360deg);
    }
}
.vvv {
    width: 100%;
    position: absolute;
    height: 2px;
    top :195vw;
}