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;
}
@font-face {
font-family: "proxima_nova";
src: url("proxima_nova_bold-webfont.woff") format("woff"), url("../fonts/proxima_nova_bold-webfont.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "proxima_nova";
src: url("proxima_nova_light-webfont.woff") format("woff"), url("../fonts/proxima_nova_light-webfont.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
body {
margin: 0;
color: #333;
background: #fff;
font: 16px/1.2 "Abril Fatface", cursive;
-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%;
}
.animate-block2 ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 300px;
height: 250px;
margin: 0 auto;
overflow: hidden;
position: relative;
vertical-align: top;
display: inline-block;
}
#ad {
width: 100%;
height: 100%;
position: absolute;
text-decoration: none;
pointer-events: none;
}
.bg-animate {
top: -41px;
left: -47px;
min-width: 575px;
position: relative;
-webkit-animation: move-top-bg 10.3s linear infinite;
animation: move-top-bg 10.3s linear infinite;
}
.text-animate {
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
overflow: hidden;
position: absolute;
background: #212121;
-webkit-transform: translateX(-119px);
-ms-transform: translateX(-119px);
transform: translateX(-119px);
-webkit-animation: move-left-bg 10.3s ease-out infinite;
animation: move-left-bg 10.3s ease-out infinite;
}
.animate-block-holder:before,
.animate-block-holder:after {
left: 46%;
width: 25px;
height: 2px;
content: "";
bottom: 41.2%;
position: absolute;
}
.animate-block-holder:before {
background: #f63;
-webkit-animation: fade-out-devider 10.3s ease-in infinite;
animation: fade-out-devider 10.3s ease-in infinite;
}
.animate-block-holder:after {
background: #212121;
-webkit-animation: fade-in-devider 10.3s ease-out infinite;
animation: fade-in-devider 10.3s ease-out infinite;
}
.animate-block1 {
top: 45%;
left: 52%;
color: #fff;
font-size: 66px;
overflow: hidden;
line-height: 58px;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.animate-block1 span {
top: 0;
position: relative;
display: inline-block;
}
.animate-block1 .in {
opacity: .25;
-webkit-animation: letter-fade-in 10.3s cubic-bezier(0, 0, .01, 1) infinite;
animation: letter-fade-in 10.3s cubic-bezier(0, 0, .01, 1) infinite;
}
.animate-block1 .out {
-webkit-animation: letter-fade-out 10.3s cubic-bezier(.38, .03, 1, .5) infinite;
animation: letter-fade-out 10.3s cubic-bezier(.38, .03, 1, .5) infinite;
}
.animate-block2 {
right: 0;
width: 181px;
height: 100%;
font-size: 18px;
line-height: 16px;
position: absolute;
text-transform: uppercase;
padding: 40px 20px 10px 32px;
}
.animate-block2 ul {
margin-bottom: 32px;
font: 300 12px/11px "proxima_nova", sans-serif;
}
.animate-block2 li {
display: block;
padding-left: 8px;
position: relative;
}
.animate-block2 li:not(:last-child) {
margin-bottom: 12px;
}
.animate-block2 li:before {
left: 0;
top: 6px;
width: 2px;
height: 2px;
content: "";
position: absolute;
background: #cd562f;
}
.animate-block2 li:first-child {
-webkit-animation: first-point 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
animation: first-point 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
}
.animate-block2 li:last-child {
-webkit-animation: last-point 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
animation: last-point 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
}
.title {
display: block;
position: relative;
margin-bottom: 13px;
-webkit-animation: move-title-in 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
animation: move-title-in 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
}
.separator {
left: 3px;
width: 18px;
height: 2px;
position: relative;
background: #fff;
margin-bottom: 21px;
vertical-align: top;
display: inline-block;
-webkit-animation: grow-separator 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
animation: grow-separator 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
}
.btn {
z-index: 1;
padding: 0;
height: 33px;
border: none;
min-width: 113px;
overflow: hidden;
position: relative;
letter-spacing: -.05em;
background: transparent;
text-transform: uppercase;
font: 800 10px "proxima_nova", sans-serif;
}
.btn:before {
left: 0;
top: 100%;
width: 100%;
z-index: -1;
content: "";
height: 100%;
position: absolute;
background: #f63;
-webkit-transition: top .3s linear;
transition: top .3s linear;
-webkit-animation: btn-bg 10.3s linear infinite;
animation: btn-bg 10.3s linear infinite;
}
.btn:hover:before {
top: 0;
}
.btn:hover .vertical-bd:before,
.btn:hover .vertical-bd:after,
.btn:hover .horizontal-bd:before,
.btn:hover .horizontal-bd:after {
background: #f63;
}
.btn .vertical-bd:before,
.btn .vertical-bd:after,
.btn .horizontal-bd:before,
.btn .horizontal-bd:after {
content: "";
position: absolute;
background: #f06132;
-webkit-transition: background .2s linear;
transition: background .2s linear;
}
.btn .vertical-bd:before,
.btn .vertical-bd:after {
top: 0;
width: 1px;
height: 100%;
}
.btn .vertical-bd:before {
left: 0;
-webkit-animation: move-vertical-left 10.3s linear infinite;
animation: move-vertical-left 10.3s linear infinite;
}
.btn .vertical-bd:after {
right: 0;
-webkit-animation: move-vertical-right 10.3s linear infinite;
animation: move-vertical-right 10.3s linear infinite;
}
.btn .horizontal-bd:before,
.btn .horizontal-bd:after {
left: 0;
width: 100%;
height: 1px;
}
.btn .horizontal-bd:before {
top: 0;
-webkit-animation: move-horizontal-top 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
animation: move-horizontal-top 10.3s cubic-bezier(.39, .58, .57, 1) infinite;
}
.btn .horizontal-bd:after {
bottom: 0;
-webkit-animation: move-horizontal-bottom 10.3s linear infinite;
animation: move-horizontal-bottom 10.3s linear infinite;
}
.btn .text-holder {
display: inline-block;
-webkit-animation: fade-in-btn-text 10.3s linear infinite;
animation: fade-in-btn-text 10.3s linear infinite;
}
@-webkit-keyframes move-top-bg {
0%,
19.4174% {
-webkit-transform: translateY(0) rotate(.0001deg);
transform: translateY(0) rotate(.0001deg);
}
100% {
-webkit-transform: translateY(-107px) rotate(.0001deg);
transform: translateY(-107px) rotate(.0001deg);
}
}
@keyframes move-top-bg {
0%,
19.4174% {
-webkit-transform: translateY(0) rotate(.0001deg);
transform: translateY(0) rotate(.0001deg);
}
100% {
-webkit-transform: translateY(-107px) rotate(.0001deg);
transform: translateY(-107px) rotate(.0001deg);
}
}
@-webkit-keyframes move-left-bg {
0%,
19.4174% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
26.5048%,
100% {
-webkit-transform: translateX(-119px);
transform: translateX(-119px);
}
}
@keyframes move-left-bg {
0%,
19.4174% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
26.5048%,
100% {
-webkit-transform: translateX(-119px);
transform: translateX(-119px);
}
}
@-webkit-keyframes fade-out-devider {
0%,
14.5631% {
width: 25px;
}
21.6504%,
100% {
width: 0;
}
}
@keyframes fade-out-devider {
0%,
14.5631% {
width: 25px;
}
21.6504%,
100% {
width: 0;
}
}
@-webkit-keyframes fade-in-devider {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
5.5339%,
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes fade-in-devider {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
5.5339%,
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes letter-fade-in {
0% {
opacity: .25;
-webkit-transform: translateY(52px);
transform: translateY(52px);
}
2.6213%,
100% {
opacity: 1;
}
9.7087%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes letter-fade-in {
0% {
opacity: .25;
-webkit-transform: translateY(52px);
transform: translateY(52px);
}
2.6213%,
100% {
opacity: 1;
}
9.7087%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes letter-fade-out {
0%,
14.5631% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
21.6504%,
100% {
-webkit-transform: translateY(-55px);
transform: translateY(-55px);
}
}
@keyframes letter-fade-out {
0%,
14.5631% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
21.6504%,
100% {
-webkit-transform: translateY(-55px);
transform: translateY(-55px);
}
}
@-webkit-keyframes first-point {
0%,
26.1135% {
opacity: 0;
right: 161px;
}
26.2135% {
opacity: 1;
right: 161px;
}
34.6601%,
100% {
right: 0;
opacity: 1;
}
}
@keyframes first-point {
0%,
26.1135% {
opacity: 0;
right: 161px;
}
26.2135% {
opacity: 1;
right: 161px;
}
34.6601%,
100% {
right: 0;
opacity: 1;
}
}
@-webkit-keyframes last-point {
0%,
29.997% {
opacity: 0;
right: 162px;
}
30.097% {
opacity: 1;
right: 162px;
}
38.8349%,
100% {
right: 0;
opacity: 1;
}
}
@keyframes last-point {
0%,
29.997% {
opacity: 0;
right: 162px;
}
30.097% {
opacity: 1;
right: 162px;
}
38.8349%,
100% {
right: 0;
opacity: 1;
}
}
@-webkit-keyframes move-title-in {
0%,
21.9388% {
opacity: 0;
right: 216px;
}
22.0388% {
opacity: 1;
right: 216px;
}
35.631%,
100% {
right: 0;
opacity: 1;
}
}
@keyframes move-title-in {
0%,
21.9388% {
opacity: 0;
right: 216px;
}
22.0388% {
opacity: 1;
right: 216px;
}
35.631%,
100% {
right: 0;
opacity: 1;
}
}
@-webkit-keyframes grow-separator {
0%,
25.9223% {
width: 0;
}
33.3097%,
100% {
width: 18px;
}
}
@keyframes grow-separator {
0%,
25.9223% {
width: 0;
}
33.3097%,
100% {
width: 18px;
}
}
@-webkit-keyframes btn-bg {
0%,
39.7058% {
background: transparent;
}
39.8058%,
100% {
background: #f63;
}
}
@keyframes btn-bg {
0%,
39.7058% {
background: transparent;
}
39.8058%,
100% {
background: #f63;
}
}
@-webkit-keyframes move-vertical-left {
0%,
35.2427% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
37.6699%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes move-vertical-left {
0%,
35.2427% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
37.6699%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes move-vertical-right {
0%,
30.2912% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
32.7184%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes move-vertical-right {
0%,
30.2912% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
32.7184%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes move-horizontal-top {
0%,
37.6699% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
40.1941%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes move-horizontal-top {
0%,
37.6699% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
40.1941%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes move-horizontal-bottom {
0%,
32.7184% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
35.2427%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes move-horizontal-bottom {
0%,
32.7184% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
35.2427%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes fade-in-btn-text {
0%,
39.8058% {
opacity: 0;
-webkit-transform: translateY(9px);
transform: translateY(9px);
}
45.3398%,
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fade-in-btn-text {
0%,
39.8058% {
opacity: 0;
-webkit-transform: translateY(9px);
transform: translateY(9px);
}
45.3398%,
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}