html {
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow: hidden;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
max-height: 1000000px;
}
body {
margin: 0;
color: #fff;
background: #fff;
font: 16px/1.2 "Raleway", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
background-color: transparent;
}
a:active, a:hover {
outline: 0;
color: #39f;
text-decoration: none;
}
b, strong {
font-weight: bold;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
button {
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-webkit-border-radius: 0;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
img {
border: 0;
height: auto;
max-width: 100%;
}
#wrapper {
width: 300px;
height: 250px;
margin: 0 auto;
overflow: hidden;
position: relative;
vertical-align: top;
display: inline-block;
background: -webkit-linear-gradient(top, #ff6000 4%, #ff2e21 100%);
background: linear-gradient(to bottom, #ff6000 4%, #ff2e21 100%);
}
#ad {
width: 100%;
height: 100%;
color: inherit;
position: absolute;
text-decoration: none;
pointer-events: none;
}
.animate-text1 {
top: -30px;
left: -19px;
opacity: .1;
font-size: 180px;
font-weight: 900;
position: absolute;
font-style: italic;
line-height: 157px;
text-transform: uppercase;
-webkit-animation: move-bg 5.57s linear infinite;
animation: move-bg 5.57s linear infinite;
}
.animate-block {
top: 49px;
right: 28px;
width: 156px;
height: 98px;
overflow: hidden;
font-weight: 700;
position: absolute;
font-style: italic;
padding-bottom: 18px;
text-transform: uppercase;
-webkit-animation: show-text 5.57s cubic-bezier(0, .75, .57, 1) infinite;
animation: show-text 5.57s cubic-bezier(0, .75, .57, 1) infinite;
}
.animate-block div {
font-size: 46px;
font-weight: 900;
line-height: 40px;
}
.animate-block-text {
right: 0;
position: absolute;
}
.description {
bottom: 0;
right: 4px;
font-size: 11px;
position: absolute;
white-space: nowrap;
display: inline-block;
-webkit-animation: move-text 5.57s cubic-bezier(.16, .71, .71, 1.04) infinite;
animation: move-text 5.57s cubic-bezier(.16, .71, .71, 1.04) infinite;
}
.flying-shoe {
top: 36px;
left: 4px;
width: 167px;
position: absolute;
-webkit-animation: shoe-pos 5.57s cubic-bezier(0, .75, .57, 1) infinite;
animation: shoe-pos 5.57s cubic-bezier(0, .75, .57, 1) infinite;
}
.flying-shoe .flying-shoe-holder {
-webkit-animation: shoe-races 5.57s linear infinite;
animation: shoe-races 5.57s linear infinite;
}
.flying-shoe img {
-webkit-animation: shoe-rotation 5.57s linear infinite;
animation: shoe-rotation 5.57s linear infinite;
}
.btn-holder {
left: 50%;
bottom: 18px;
position: absolute;
letter-spacing: .06em;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.btn {
box-shadow: 0 13px 14px 0 rgba(51, 0, 0, .48);
width: 169px;
height: 37px;
border: none;
font-size: 13px;
background: #300;
font-weight: 700;
border-radius: 5em;
text-transform: uppercase;
-webkit-animation: btn-pos-grow 5.57s cubic-bezier(0, .75, .57, 1) infinite;
animation: btn-pos-grow 5.57s cubic-bezier(0, .75, .57, 1) infinite;
}
.btn span {
position: relative;
-webkit-animation: btn-text-fade-in 5.57s cubic-bezier(0, .75, .57, 1) infinite;
animation: btn-text-fade-in 5.57s cubic-bezier(0, .75, .57, 1) infinite;
}
@-webkit-keyframes move-bg {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
}
@keyframes move-bg {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(-150px);
transform: translateX(-150px);
}
}
@-webkit-keyframes show-text {
0%,
1.9497% {
width: 0;
}
10.9515%,
100% {
width: 156px;
}
}
@keyframes show-text {
0%,
1.9497% {
width: 0;
}
10.9515%,
100% {
width: 156px;
}
}
@-webkit-keyframes move-text {
0%,
11.3105% {
-webkit-transform: translateX(-160px);
transform: translateX(-160px);
}
23.3393%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes move-text {
0%,
11.3105% {
-webkit-transform: translateX(-160px);
transform: translateX(-160px);
}
23.3393%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes shoe-pos {
0% {
-webkit-transform: translate(280px, 6px);
transform: translate(280px, 6px);
}
17.9533%,
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes shoe-pos {
0% {
-webkit-transform: translate(280px, 6px);
transform: translate(280px, 6px);
}
17.9533%,
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes shoe-races {
0%,
17.9533%,
94.614% {
-webkit-transform: translateY(0) rotate(.0001deg);
transform: translateY(0) rotate(.0001deg);
}
58.7073% {
-webkit-transform: translateY(4px) rotate(.0001deg);
transform: translateY(4px) rotate(.0001deg);
}
100% {
-webkit-transform: translateY(1px) rotate(.0001deg);
transform: translateY(1px) rotate(.0001deg);
}
}
@keyframes shoe-races {
0%,
17.9533%,
94.614% {
-webkit-transform: translateY(0) rotate(.0001deg);
transform: translateY(0) rotate(.0001deg);
}
58.7073% {
-webkit-transform: translateY(4px) rotate(.0001deg);
transform: translateY(4px) rotate(.0001deg);
}
100% {
-webkit-transform: translateY(1px) rotate(.0001deg);
transform: translateY(1px) rotate(.0001deg);
}
}
@-webkit-keyframes shoe-rotation {
0%,
5.2245% {
-webkit-transform: rotate(23deg);
transform: rotate(23deg);
}
17.9533%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shoe-rotation {
0%,
5.2245% {
-webkit-transform: rotate(23deg);
transform: rotate(23deg);
}
17.9533%,
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes btn-pos-grow {
0%,
16.1579% {
width: 37px;
-webkit-transform: translateY(55px) rotate(.00001deg);
transform: translateY(55px) rotate(.00001deg);
}
20.2872% {
width: 37px;
-webkit-transform: translateY(0) rotate(.00001deg);
transform: translateY(0) rotate(.00001deg);
}
35.9066%,
100% {
width: 169px;
-webkit-transform: translateY(0) rotate(.00001deg);
transform: translateY(0) rotate(.00001deg);
}
}
@keyframes btn-pos-grow {
0%,
16.1579% {
width: 37px;
-webkit-transform: translateY(55px) rotate(.00001deg);
transform: translateY(55px) rotate(.00001deg);
}
20.2872% {
width: 37px;
-webkit-transform: translateY(0) rotate(.00001deg);
transform: translateY(0) rotate(.00001deg);
}
35.9066%,
100% {
width: 169px;
-webkit-transform: translateY(0) rotate(.00001deg);
transform: translateY(0) rotate(.00001deg);
}
}
@-webkit-keyframes btn-text-fade-in {
0%,
26.9299% {
opacity: 0;
}
41.8312%,
100% {
opacity: 1;
}
}
@keyframes btn-text-fade-in {
0%,
26.9299% {
opacity: 0;
}
41.8312%,
100% {
opacity: 1;
}
}