#preloader { 
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
z-index: 99;
height: 100%;
}
.signal {
border:3px solid #8f8072;
border-radius:0px;
height:30px;
left:50%;
opacity:0;
position:absolute;
top:50%;
margin:-15px 0 0 -15px;
width:30px;
animation: pulsate 1s ease-out;
animation-iteration-count:infinite;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes pulsate {
0% {
transform:scale(.1);
-webkit-transform:scale(.1);
opacity: 0.0;
}
50% {
opacity:1;
}
100% {
transform:scale(1.2);
-webkit-transform:scale(1.2);
opacity:0;
}
}
@keyframes pulsate {
0% {
transform:scale(.1);
-webkit-transform:scale(.1);
opacity: 0.0;
}
50% {
opacity:1;
}
100% {
transform:scale(1.2);
-webkit-transform:scale(1.2);
opacity:0;
}
}
.ip-header {
position: fixed;
top: 0;
z-index: 100;
height: 480px;
width: 100%;
height: 100%;
background: #f1f1f1;
}
.ip-header h1 {
margin: 0;
}
.ip-logo,
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}
.ip-logo {
top: 10%;
height: 100%;
-webkit-transform: translate3d(0,25%,0);
transform: translate3d(0,25%,0);
}
.ip-logo img{	
max-width:80px;
}
.ip-loader {
bottom: 30%;
}
.ip-header .ip-inner {
display: block;
margin: 0 auto;
text-align:center;
}
.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #d5d5d5;
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #8f8072;
}  .loading .ip-logo,
.loading .ip-loader {
opacity: 1;
-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}
.loading .ip-loader {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); }
} .loaded .ip-logo,
.loaded .ip-loader {
opacity: 1;
}
.loaded .ip-logo {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedLogo {
to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}
@keyframes animLoadedLogo {
to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}
.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}
@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
} .loaded .ip-logo svg path {
-webkit-transition: all 0.5s ease 0.3s;
transition: all 0.5s ease 0.3s;
fill: #fff;
} .loaded .ip-header {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
} .layout-switch .ip-header {
position: absolute;
} .no-js .ip-header {
position: relative;
min-height: 0px;
}
.no-js .ip-header .ip-logo {
margin-top: 20px;
height: 180px;
opacity: 1;
-webkit-transform: none;
transform: none;
}
.no-js .ip-header .ip-logo svg path {
fill: #fff;
}