/* Banner Image Flip */
@-webkit-keyframes move1 {
0% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
60% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
100% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
}
@-moz-keyframes move1 {
0% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
60% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
100% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
}
@-o-keyframes move1 {
0% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
60% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
100% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
}
@keyframes move1 {
0% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
60% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
100% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
}
@-webkit-keyframes move2 {
0% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
20% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
40% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
100% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@-moz-keyframes move2 {
0% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
20% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
40% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
100% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@-o-keyframes move2 {
0% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
20% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
40% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
100% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes move2 {
0% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
20% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
40% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
100% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes move2 {
0% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
10% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
20% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
40% {
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
}
50% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
100% {
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.image-wrapper { position: relative; }
.image-wrapper img{
transform: rotate3d(0, 1, 0, 0deg);
opacity: 1;
-webkit-animation: move1 10s infinite; /* Safari 4+ */
-moz-animation: move1 10s infinite; /* Fx 5+ */
-o-animation: move1 10s infinite; /* Opera 12+ */
animation: move1 10s infinite; /* IE 10+, Fx 29+ */
}
.image-wrapper:after {
content: '';
position: absolute;
width: 806px;
max-width: 100%;
height: 718px;
left: 13.1%;
right: auto;
top: 0;
display: inline-block;
background: url(../images/img2.png) no-repeat;
background-size: 100% auto;
transform: rotate3d(0, 1, 0, 90deg);
opacity: 0;
-webkit-animation: move2 10s infinite; /* Safari 4+ */
-moz-animation: move2 10s infinite; /* Fx 5+ */
-o-animation: move2 10s infinite; /* Opera 12+ */
animation: move2 10s infinite; /* IE 10+, Fx 29+ */
}
@media( max-width: 1600px ){
.image-wrapper:after {
left: 0;
}
}