.animeddie0, .animeddie1, .animeddie2
{
    position:relative;
    z-index: 10;
}

.animeddie0 img
{
    position:                  absolute;
    top:                       240px;
    left:                      280px;
    height:                    150px;
    width:                     90px !important;
    animation-name:            eddieJiggleVertical0, eddieJiggleHorizontal0;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:       normal;
    animation-duration:        750ms,3s;
}

.animeddie1 img
{
    position:                  absolute;
    top:                       80px;
    left:                      270px;
    height:                    300px;
    width:                     180px !important;
    animation-name:            eddieJiggleVertical1, eddieJiggleHorizontal1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:       normal;
    animation-duration:        750ms,3s;
}

.animeddie2 img
{
    position:                  absolute;
    top:                       200px;
    left:                      295px;
    height:                    200px;
    width:                     120px !important;
    animation-name:            eddieJiggleVertical2, eddieJiggleHorizontal2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction:       normal;
    animation-duration:        750ms,3s;
}

.animeddievideo
{
    position:relative;
    height:404px;
}

.animeddievideo video
{
    position:absolute;
    left: 0px;
    width: 720px !important;
    border-radius: 3px;
}

.animeddieoverlay, .animeddiecaption
{
    position:   absolute;
    left:       0px;
    top:        0px;
    padding:    10px;
    filter:     drop-shadow(2px 2px 1px black);
    text-align: left;
    color:      white;
}

.animeddieoverlay
{
    font-size:  x-large;
}

.animeddiecaption
{
    font-style: italic;
    font-size:  small;
}

@keyframes eddieJiggleVertical0
{
    0%
    {
        top: 230px;
    }
    50%
    {
        top: 240px;
    }
    100%
    {
        top: 230px;
    }
}

@keyframes eddieJiggleHorizontal0
{
    0%
    {
        transform: translateX(0px) rotate(0deg);
    }
    25%
    {
        transform: translateX(-5px) rotate(3deg);
    }
    75%
    {
        transform: translateX(5px) rotate(-3deg);
    }
    100%
    {
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes eddieJiggleVertical1
{
    0%
    {
        top: 50px;
    }
    50%
    {
        top: 80px;
    }
    100%
    {
        top: 50px;
    }
}

@keyframes eddieJiggleHorizontal1
{
    0%
    {
        transform: translateX(0px) rotate(0deg);
    }
    25%
    {
        transform: translateX(-10px) rotate(3deg);
    }
    75%
    {
        transform: translateX(10px) rotate(-3deg);
    }
    100%
    {
        transform: translateX(0px) rotate(0deg);
    }
}
@keyframes eddieJiggleVertical2
{
    0%
    {
        top: 180px;
    }
    50%
    {
        top: 200px;
    }
    100%
    {
        top: 180px;
    }
}

@keyframes eddieJiggleHorizontal2
{
    0%
    {
        transform: translateX(0px) rotate(0deg);
    }
    25%
    {
        transform: translateX(-8px) rotate(3deg);
    }
    75%
    {
        transform: translateX(8px) rotate(-3deg);
    }
    100%
    {
        transform: translateX(0px) rotate(0deg);
    }
}

.animcarousel
{
    position:relative;
    height:404px;
}

.animcarousel img
{
    position:absolute;
    left:0;
    width: 500px !important;
    animation-name: carouselFadeInOut12;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

.animcarousel video.animswap
{
    position:absolute;
    left: 0px;
    width: 720px !important;
    border-radius: 3px;
    animation-name: carouselFadeInOut3;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 18s;
}

/*
n = number of images:
a = presentation time for one image
b = duration for cross fading

animation-duration t=(a+b)*n
animation-delay d = t/n = a+b

keyframe percentages:
k1 = 0
k2 = a/t*100
k3 = (a+b)/t*100 = 1/n*100
k4 = 100-(b/t*100)
k5 = 100

 n = 12
 a = 1
 b = 0.5
 t = 18
 d = 1.5
k1 = 0
k2 = 5.56
k3 = 8.34
k4 = 97.22
k5 = 100

 n = 3
 a = 5.8
 b = 0.2
 t = 18
 d = 6
k1 = 0
k2 = 32.22
k3 = 33.33
k4 = 98.89
k5 = 100
*/

@keyframes carouselFadeInOut12
{
    0%
    {
        opacity:1;
    }
    5.56%
    {
        opacity:1;
    }
    8.34%
    {
        opacity:0;
    }
    97.22%
    {
        opacity:0;
    }
    100%
    {
        opacity:1;
    }
}

.animcarousel img:nth-of-type(1)
{
    animation-delay: 16.5s;
}
.animcarousel img:nth-of-type(2)
{
    animation-delay: 15s;
}
.animcarousel img:nth-of-type(3)
{
    animation-delay: 13.5s;
}
.animcarousel img:nth-of-type(4)
{
    animation-delay: 12s;
}
.animcarousel img:nth-of-type(5)
{
    animation-delay: 10.5s;
}
.animcarousel img:nth-of-type(6)
{
    animation-delay: 9s;
}
.animcarousel img:nth-of-type(7)
{
    animation-delay: 7.5s;
}
.animcarousel img:nth-of-type(8)
{
    animation-delay: 6s;
}
.animcarousel img:nth-of-type(9)
{
    animation-delay: 4.5s;
}
.animcarousel img:nth-of-type(10)
{
    animation-delay: 3s;
}
.animcarousel img:nth-of-type(11)
{
    animation-delay: 1.5s;
}
.animcarousel img:nth-of-type(12)
{
    animation-delay: 0s;
}

@keyframes carouselFadeInOut3
{
    0%
    {
        opacity:1;
    }
    32.22%
    {
        opacity:1;
    }
    33.33%
    {
        opacity:0;
    }
    98.89%
    {
        opacity:0;
    }
    100%
    {
        opacity:1;
    }
}

.animcarousel video:nth-of-type(1)
{
    animation-delay: 12s;
}
.animcarousel video:nth-of-type(2)
{
    animation-delay: 6s;
}
.animcarousel video:nth-of-type(3)
{
    animation-delay: 0s;
}

.animcontainer
{
    position: relative;
}