content:"";
display:block;
width: 100%;
height: 100%;
background-image: url('../img/multi-gradient.webp');
background-repeat: no-repeat;
background-size: cover;
animation:rotateOne 7s steps(1000, end) infinite;
overflow: hidden;
}
section.content {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100vh;
}
section.content article {
display: block;
max-width: 650px;
margin: 50px auto;
}
section.content article h1 {
margin-bottom: 0;
font-size: 2em;
}
section.content article p {
font-size:1em;
line-height: 1.35em;
}
@keyframes rotateOne {
100% {
transform:rotate(720deg);
}
}
i.mask {
position: relative;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
margin: -100% 0 0 0;
background-image: url('../img/mask.svg');
background-repeat: no-repeat;
background-position: center center;
cursor:none;
animation:rotateTwo 7s steps(1000, end) 1;
animation-fill-mode:forwards;
overflow: hidden;
}
i.slogan {
position: fixed;
top: 280px;
left: calc(50% – 256px);
right: auto;
z-index: 3;
display: block;
width: 516px;
height: 100px;
border: none;
background-image: url('../img/slogan.svg');
background-size: cover;
background-position: center center;
animation:fadeInSlogan 5s steps(1000, end) 1;
animation-fill-mode:forwards;
transition-delay:10s;
zoom: 70%;
}
@keyframes fadeInSlogan {
0% {
opacity:0;
}
100% {
opacity:100%;
}
}
.hidden {
display:none;
}
@keyframes rotateTwo {
0% {
background-size: 100% 100%;
transform:rotate(0deg);
}
100% {
background-size: 145% 145%;
transform:rotate(360deg);
}
}
i.radialGradient {
position: relative;
top:0;
left:0;
z-index: 3;
display: block;
width: 100%;
height: 100%;
margin: 0;
animation:radialGradient 10s steps(1000, end) 1;
animation-fill-mode:forwards;
background: -moz-radial-gradient(center, ellipse cover,
rgba(255,255,255,0) 82%, rgba(255,255,255,1) 95%, rgba(255,255,255,1) 100%);
/* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,
rgba(255,255,255,0) 82%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,
rgba(255,255,255,0) 82%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
i.fadeIn {
position: fixed;
top: calc(50% – 160px);
left: calc(50% – 160px);
z-index: 3;
width: 320px;
height: 320px;
}
i.logo {
position: relative;
z-index: 4;
top: 0;
left: 0;
display: block;
width: 80%;
height: 80%;
margin: 10%;
background-image: url('../img/logo-sqr.svg');
background-size:80px 80px;
background-position: center center;
background-repeat: no-repeat;
transition-delay:6s;
animation:scaleIn 7s steps(1000, end) 1;
animation-fill-mode:forwards;
}
i.button {
position: fixed;
bottom: 20%;
left: calc(50% – 69px);
padding: 8px 15px;
border: 2px solid #4d897c;
border-radius: 5px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #4d897c;
animation:buttonFadeIn 3s steps(1000, end) 1;
animation-fill-mode:forwards;
transition-delay:10s;
}
i.button:hover,i.button:target {
position: fixed;
bottom: 20%;
left: calc(50% – 69px);
padding: 8px 15px;
background:#4d897c;
border: 2px solid #4d897c;
border-radius: 5px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #fff;
}
@keyframes buttonFadeIn {
0% {
opacity: 0;
cursor:none;
}
100% {