/*-------ANIMATION IMAGE-------*/

div.photo {width: 100%; height: 450px; position: relative;}
div.photo span.left {
    position: absolute; top: 70px; left: 7.0%; width: 33%; max-width: 430px; height:300px;
    background-image:url('../images/img/topleft.jpg'); background-position: right top; background-size:auto 300px;background-repeat: no-repeat;
}
div.photo span.left a.tl1 {margin-top: 158px;}
div.photo span.left a.tl1,div.photo span.left a.tl2,div.photo span.left a.tl3 { display: block; color:rgba(255,255,255,0.98); font-size: 1.04em; font-weight:bold; line-height: 24px; padding:5px 15px; text-shadow:1px 1px 7px rgba(0,0,0,0.70); font-family: Arial;}
div.photo span.left a.tl1:hover,div.photo span.left a.tl2:hover,div.photo span.left a.tl3:hover {color:crimson;}

div.photo img.right {position: absolute; top: 95px; right: 23%; width: 25%; max-width: 130px;}

div.photo span.fade {width:100%; position: absolute; top:0; left: 0;display: block;height: 450px; background-position: top center;}

.fade1 {
background-image: url('../images/img/aroma6.jpg');
animation: fadeIn1 25s ease 0s infinite normal;
}
@keyframes fadeIn1 {
    0%,100% { opacity:1;}
}
.fade2 {
background-image: url('../images/img/aroma4.jpg');
animation: fadeIn2 25s ease 0s infinite normal;
}

@keyframes fadeIn2 {
    0%,20% { opacity:0;}
    35%,51% { opacity:1;} 
    70%,100% { opacity:0;}
}

.fade3 {
background-image: url('../images/img/aroma5.jpg');
animation: fadeIn3 25s ease 0s infinite normal;
}
@keyframes fadeIn3 {
    0%,45% { opacity:0;}
    60%,85% { opacity:1;}
    100% { opacity:0;}
}