#preloader{
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #fff;
    position: fixed;
    text-align: center;
    z-index: 9999999912;
}
#preloader span {
  	display: block;
  	font-family: 'Raleway', sans-serif;
  	text-transform: uppercase;
  	/*letter-spacing: 0.2em;*/
}
.preloader-container {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.item {
    width: 50px;
    height: 50px;
    position: absolute;
}
.item-1 {
    top: 0;
    left: 0;
    z-index: 1;
    animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-2 {
    top: 0;
    right: 0;
    animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-3 {
    bottom: 0;
    right: 0;
    z-index: 1;
    animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-4 {
    bottom: 0;
    left: 0;
    animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}
@keyframes item-1_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, 50px)} 
  50% {transform: translate(50px, 50px)} 
  75% {transform: translate(50px, 0)} 
}
@keyframes item-2_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(-50px, 0)} 
  50% {transform: translate(-50px, 50px)} 
  75% {transform: translate(0, 50px)} 
}
@keyframes item-3_move {
  0%, 100% {transform: translate(0, 0)} 
  25% {transform: translate(0, -50px)} 
  50% {transform: translate(-50px, -50px)} 
  75% {transform: translate(-50px, 0)} 
}
@keyframes item-4_move {
0%, 100% {transform: translate(0, 0)} 
25% {transform: translate(50px, 0)} 
50% {transform: translate(50px, -50px)} 
75% {transform: translate(0, -50px)} 
}