.preeloader {
background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
height: 100%;
position: fixed;
width: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
.preeloader img,.preeloader svg {max-width: 150px;}
.preloader-spinner {
-webkit-animation: 1s ease-out 0s normal none infinite running pulsate;
animation: 1s ease-out 0s normal none infinite running pulsate;
border: 5px solid #292929;
border-radius: 40px;
display: block;
height: 40px;
left: 50%;
margin: -20px 0 0 -20px;
opacity: 0;
position: fixed;
top: 50%;
width: 40px;
z-index: 10;
}
@-webkit-keyframes pulsate {
0% {
opacity: 0;
-webkit-transform: scale(0.1);
transform: scale(0.1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes pulsate {
0% {
opacity: 0;
-webkit-transform: scale(0.1);
transform: scale(0.1);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
} .loader-warp {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 4px;
}
.loader-span {
position: relative;
top: 0.63em;  
display: inline-block;
text-transform: uppercase;  
opacity: 0;
transform: rotateX(-90deg);
}
.loader-span.let1 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.2s;
}
.loader-span.let2 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.3s;
}
.loader-span.let3 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.4s;
}
.loader-span.let4 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.5s;
}
.loader-span.let5 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.6s;
}
.loader-span.let6 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.7s;
}
.loader-span.let7 {
animation: drop 1.2s ease-in-out infinite;
animation-delay: 1.8s;
}
@keyframes drop {
10% {
opacity: 0.5;
}
20% {
opacity: 1;
top: 3.78em;
transform: rotateX(-360deg);
}
80% {
opacity: 1;
top: 3.78em;
transform: rotateX(-360deg);
}
90% {
opacity: 0.5;
}
100% {
opacity: 0;
top: 6.94em
}
} .loading-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100%;
height: 100px;
line-height: 100px;
}
.loading-text span {
display: inline-block;
margin: 0 5px;
}
.loading-text span:nth-child(1) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0s infinite linear alternate;
animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1s infinite linear alternate;
animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
animation: blur-text 1.5s 1.2s infinite linear alternate;
}
@-webkit-keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
@keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
} .portfolio.type-portfolio {
margin-bottom: 50px;
}
.portfolio.type-portfolio .post-details {
padding: 30px;
border: 2px solid #e1e6ff;
} .scrolltotop {
background: #ffffff;
border-radius: 50%;
bottom: 20px;
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
color: #0045ff;
display: none;
font-size: 24px;
height: 60px;
padding-top: 17px;
position: fixed;
right: 20px;
text-align: center;
width: 60px;
z-index: 99;
}
.scrolltotop:hover,
.scrolltotop:focus {
background: #ffffff none repeat scroll 0 0;
color: #0045ff;
}