﻿.animated-airplane,
.animation-container
{
    width:100%;
    overflow:hidden;
    position:relative;
    float:left;
    clear:both;

    &:before{
	    content: "";
	    display: block;
	    padding-top: 50%; 	/* initial ratio of 2:1*/
    }

    .cloud
    {
        background:url(https://cdn.prijsvrij.nl/upload/images/icon/wait/cloud.svg) no-repeat;
        background-size:cover;
        bottom:8%;
        right:-20%;
        position:absolute;
        z-index:3;
        width:26%;
        height:33%;
        .animation( cloud-move 5s infinite linear );

        &.top
        {
            bottom:auto;
            top:18%;
            z-index:1;
            .animation( cloud-move 5s 2s infinite linear );
            width:18%;
            height:23%;
        }
    }

    .airplane
    {
		@pv-waitanimation-airplane();
    }

    .object
    {
        position:absolute;
        z-index:4;
        right:-10px;
        top:10%;
        font-size:14px;
        width:100%;
        word-break:keep-all;
        white-space:nowrap;

        &.move-rl
        {
            .animation( object-move-rl 10s infinite linear );
        }

        &.move-lr
        {
            .animation( object-move-lr 10s infinite linear );
        }

        &.bottom
        {
            top:auto;
            bottom:11%;
        }
    }

	@pv-waitanimation();

}

@media (max-width: 767px) 
{
    .action .animated-airplane
    {
        width:100%;
        margin: -25px 0 0 0;
		@pv-media-mobile-action-animatedairplane();

        .airplane { top:20%; }

        .object.bottom
        {
            bottom:13%;
        }

    }
}

@media (max-width: 979px) 
{
    .action .animated-airplane
    {

		@pv-media-tablet-action-animatedplane();
    }
}
