body, html { margin: 0; padding: 0; text-align: center; background: #f3fff7 }
.xerox_wrapper, .xerox_wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.xerox_wrapper { margin: auto; width: 300px; height: 250px; overflow: hidden; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(bg.jpg) left top no-repeat #FFF }
.xerox_inner_wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; display: block }
.xerox_inner_wrapper section { display: block; position: absolute }
.xerox_inner_wrapper img { position: absolute; z-index: 2; opacity: 0 }
#xerox_wt_layer { background: url(white-bg.png); height: 100%; width: 900px; left: -110px; -webkit-animation: wt_bg 10s; animation: wt_bg 10s; z-index: 1 }
#xerox_logo, #xerox_logo_2 { top: 10px; left: 15px; z-index: 2; -webkit-animation: screen_1 10s; animation: screen_1 10s}
#xerox_logo_2 {-webkit-animation: screen_2 10s; animation: screen_2 10s}
#readmore, #tp_7, #tp_hd, #tp_hd_2, #tp_text_2_content, #tp_text_2_hd, .tp_text { top: 66px; left: 15px; font: 20px/23px Roboto; text-align: left; z-index: 2; opacity: 0 }
#tp_hd, #tp_hd_2 { -webkit-animation: screen_1 10s; animation: screen_1 10s; text-transform: uppercase; font-size: 15px; border-bottom: 1px #000 solid}
.tp_text { -webkit-animation: screen_1 10s; animation: screen_1 10s; top: 99px; font-weight: 700 }
#tp_hd_2 { -webkit-animation: screen_2 10s; animation: screen_2 10s}
#tp_text_2_hd { -webkit-animation: screen_2 10s; animation: screen_2 10s; top: 102px; font-weight:700; width:180px }
#tp_text_2_content { -webkit-animation: screen_2 10s; animation: screen_2 10s; top: 150px; font-size: 12px; line-height: 14px; width:180px }
#readmore { -webkit-animation: readmore 10s; animation: readmore 10s; position: absolute; top: 203px }
.wrapperBtn { position: absolute; background: 0 0; padding: 0; margin: 0; width: 100%; height: 100%; border: 1px solid #000; top: 0; left: 0; cursor: pointer; z-index: 10 }
@-webkit-keyframes screen_1 {
0% {opacity:1}
15%, 50% {left:15px}
60% {left:-435px}
100% {opacity:1;left:-435px}
}
@-moz-keyframes screen_1 {
0% {opacity:1}
15%, 50% {left:15px}
60% {left:-435px}
100% {opacity:1;left:-435px}
}
@keyframes screen_1 {
0% {opacity:1}
15%, 50% {left:15px}
60% {left:-435px}
100% {opacity:1;left:-435px}
}
@-webkit-keyframes screen_2 {
0%, 49.5% {opacity:0}
50.5% {opacity:1;left:325px}
60% {left:15px}
100% {opacity:1;left:15px}
}
@-moz-keyframes screen_2 {
0%, 49.5% {opacity:0}
50.5% {opacity:1;left:325px}
60% {left:15px}
100% {opacity:1;left:15px}
}
@keyframes screen_2 {
0%, 49.5% {opacity:0}
50.5% {opacity:1;left:325px}
60% {left:15px}
100% {opacity:1;left:15px}
}
@-webkit-keyframes readmore {
0%, 70% {opacity:0}
100%, 75% {opacity:1}
}
@-moz-keyframes readmore {
0%, 70% {opacity:0}
100%, 75% {opacity:1}
}
@keyframes readmore {
0%, 70% {opacity:0}
100%, 75% {opacity:1}
}
@-webkit-keyframes wt_bg {
0%, 5% {left:-20px}
10%, 50.2% {left:-110px}
100%, 60.2% {left:-545px}
}
@-moz-keyframes wt_bg {
0%, 5% {left:-20px}
10%, 50.2% {left:-110px}
100%, 60.2% {left:-545px}
}
@keyframes wt_bg {
0%, 5% {left:-20px}
10%, 50.2% {left:-110px}
100%, 60.2% {left:-545px}
}
.stopAnimation, .stopAnimation * { animation-play-state: paused!important; -webkit-animation-play-state: paused!important; opacity: 1!important }