/*EXAPANDING CONATINER*/

.expand {
    animation-name: expand;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    opacity:0;
}

@keyframes expand {
    0% {
        width: 0;
        opacity: 0;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

/*SLIDING IN FROM VARIOUS POSITIONS*/

.slide-in-left {
left:-100%;
animation: slideBackground-left 0.75s forwards;
-webkit-animation: slideBackground-left 0.75s forwards; /* Safari and Chrome */
-moz-animation: slideBackground-left 0.75s forwards; /* Firefox */
-o-animation: slideBackground-left 0.75s forwards; /* Opera */
} 

.slide-in-top {
top:-100%;
animation: slideBackground-top 0.75s forwards;
-webkit-animation: slideBackground-top 0.75s forwards; /* Safari and Chrome */
-moz-animation: slideBackground-top 0.75s forwards; /* Firefox */
-o-animation: slideBackground-top 0.75s forwards; /* Opera */
} 

.slide-in-bottom {
bottom:-100%;
animation:slideBackground-bottom 0.75s forwards;
-webkit-animation: slideBackground-bottom 0.75s forwards; /* Safari and Chrome */
-moz-animation: slideBackground-bottom 0.75s forwards; /* Firefox */
-o-animation: slideBackground-bottom 0.75s forwards; /* Opera */
}

.slide-in-bottom-right45 {
right:-100%;
bottom:-100%;
animation:slideBackground-bottom-right45 0.75s forwards;
-webkit-animation: slideBackground-bottom-right45 0.75s forwards; /* Safari and Chrome */
-moz-animation: slideBackground-bottom-right45 0.75s forwards; /* Firefox */
-o-animation: slideBackground-bottom-right45 0.75s forwards; /* Opera */
}


.slide-in-right {
right:-100%;
animation:slideBackground-right 0.75s forwards;
-webkit-animation: slideBackground-right 0.75s forwards; /* Safari and Chrome */
-moz-animation: slideBackground-right 0.75s forwards; /* Firefox */
-o-animation: slideBackground-right 0.75s forwards; /* Opera */
}





@keyframes slideBackground-top {
        to {
            top: 0;
        }
    }

@keyframes slideBackground-right {
        to {
            right: 0;
        }
    }

@keyframes slideBackground-bottom {
        to {
            bottom: 0;
        }
    }
    
    @keyframes slideBackground-left {
        to {
            left: 0;
        }
    }

@keyframes slideBackground-bottom-right45 {
        to {
            bottom: 0;
            right: 0;
        }
    }