:root {
--anim-duration: 5s;
--anim-func: ease-in;
}
.preloader {
position: fixed;
top: 0;
z-index: 101;
width: 100%;
height: 100vh;
background-color: #fff;
display: none;
justify-content: center;
align-items: center;
opacity: 1;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: opacity;
}
.preloader svg {
display: block;
}
.preloader.active {
display: flex;
}
.preloader.hidden {
display: none;
}
.preloader__content {
width: 100%;
}
.preloader__img {
position: relative;
width: 100%;
height: 13.6vw;
margin-bottom: 34vh;
}
.preloader__img img {
height: 100%;
}
.preloader__logo {
position: absolute;
width: 180px;
height: 44px;
top: 25px;
left: 45px;
opacity: 0;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: scale-down-center;
}
.preloader__logo--img {
position: absolute;
top: 0;
left: 0;
height: 100%;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: scale-logo;
}
.preloader__logo--word {
position: absolute;
top: 7px;
right: 0;
height: 66%;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: logo-word;
}
.f1, .f2, .f3, .f4, .f5, .f6 {
height: 100%;
position: absolute;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
opacity: 0;
}
.f1 {
left: 36%;
animation-name: third-left;
}
.f2 {
left: 38%;
animation-name: second-left;
}
.f3 {
left: 43%;
animation-name: first-left;
}
.f4 {
right: 48%;
animation-name: first-right;
}
.f5 {
right: 43%;
animation-name: second-right;
}
.f6 {
right: 36%;
animation-name: third-right;
}
.preloader__title {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.preloader__title span {
position: absolute;
width: 100%;
top: 54%;
left: 50%;
transform: translateX(-50%);
font-family: "EmonaCond", serif;
font-weight: 400;
font-size: 47px;
line-height: 56px;
text-align: center;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #222222;
}
.preloader__title--one {
max-width: 100%;
opacity: 0;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: first-word;
}
.preloader__title--two {
max-width: 490px;
animation-duration: var(--anim-duration);
animation-timing-function: var(--anim-func);
animation-name: second-word;
opacity: 0;
} @keyframes first-left {
0% {
left: 40%;
opacity: 1;
}
30% {
left: 43%;
opacity: 1;
}
50% {
left: 43%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes first-right {
0% {
right: 40%;
opacity: 1;
}
30% {
right: 48%;
opacity: 1;
}
50% {
right: 48%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes second-left {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 38%;
opacity: 1;
}
50% {
left: 38%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes second-right {
0% {
right: 10%;
opacity: 1;
}
30% {
right: 43%;
opacity: 1;
}
50% {
right: 43%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes third-left {
0% {
left: -10%;
opacity: 1;
}
30% {
left: 36%;
opacity: 1;
}
50% {
left: 36%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes third-right {
0% {
right: -10%;
opacity: 0;
}
30% {
right: 36%;
opacity: 1;
}
50% {
right: 36%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes first-word {
0% {
opacity: 1;
}
20% {
opacity: 0;
}
}
@keyframes second-word {
0% {
opacity: 0;
}
20% {
opacity: 1;
left: 50%;
top: 50%;
transform: translateX(-50%);
}
40% {
opacity: 1;
left: 50%;
top: 50%;
transform: translateX(-50%);
}
60% {
transform: translateX(0);
top: 0;
left: 0;
opacity: 0;
}
}
@keyframes scale-down-center {
40% {
width: 227px;
height: 233px;
top: 36%;
left: 44%;
opacity: 0;
}
60% {
opacity: 1;
top: 36%;
left: 44%;
width: 227px;
height: 233px;
}
70% {
opacity: 1;
top: 36%;
left: 44%;
width: 227px;
height: 233px;
}
90% {
opacity: 1;
top: 25px;
left: 45px;
width: 180px;
height: 44px;
}
100% {
top: 25px;
left: 45px;
width: 180px;
height: 44px;
opacity: 0;  
}
}
@keyframes scale-logo {
40% {
top: -60%;
transform: scale(2.2);
}
60% {
transform: scale(1);
top: 0;
}
70% {
transform: scale(1);
}
90% {
transform: scale(1);
left: 0;
}
100% {
transform: scale(1);
left: 0;
}
}
@keyframes logo-word {
0% {
top: 85%;
}
70% {
top: 85%;
}
90% {
top: 7px;
}
100% {
top: 7px;
}
}
@keyframes opacity {
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media screen and (max-width: 768px) {
.preloader__img {
height: 27.5vw;
margin-bottom: 15.5vh;
}
.preloader__title span {
font-size: 5.8vw;
line-height: 40px;
}
.preloader__logo {
top: 25px;
left: 11px;
width: 129px;
height: 32px;
}
@keyframes scale-down-center {
40% {
width: 115px;
height: 125px;
top: 47%;
left: 34%;
opacity: 0;
}
60% {
opacity: 1;
width: 115px;
height: 125px;
top: 47%;
left: 34%;
}
70% {
opacity: 1;
width: 115px;
height: 125px;
top: 47%;
left: 34%;
}
90% {
opacity: 1;
top: 25px;
left: 11px;
width: 129px;
height: 32px;
}
100% {
top: 25px;
left: 11px;
width: 129px;
height: 32px;
opacity: 0;  
}
}
@keyframes first-left {
0% {
left: 23%;
opacity: 1;
}
30% {
left: 38%;
opacity: 1;
}
50% {
left: 38%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes first-right {
0% {
right: 40%;
opacity: 1;
}
30% {
right: 43%;
opacity: 1;
}
50% {
right: 43%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes second-left {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 29%;
opacity: 1;
}
50% {
left: 29%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes second-right {
0% {
right: 10%;
opacity: 1;
}
30% {
right: 34%;
opacity: 1;
}
50% {
right: 34%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes third-left {
0% {
left: -10%;
opacity: 1;
}
30% {
left: 25%;
opacity: 1;
}
50% {
left: 25%;
opacity: 1;
}
60% {
opacity: 0;
}
}
@keyframes third-right {
0% {
right: -10%;
opacity: 0;
}
30% {
right: 20%;
opacity: 1;
}
50% {
right: 20%;
opacity: 1;
}
60% {
opacity: 0;
}
}
}