@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebasneue_bold-webfont.eot');
    src: url('../fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('../fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue_bold-webfont.svg#RalewayThin') format('svg');
    font-weight: normal;
    font-style: normal;
}
.load-wrapper {
    height:150px;
    width:150px;
    position: absolute;
    text-align: center;
    color:#000;
    z-index: 1000;
}
.loading {
    font-family:HelveticaNeue-CondensedBold, Bebas, Helvetica, Arial, sans-serif;
    font-size:14px;
    text-transform: uppercase;
    font-weight: normal;
}
.animation-block {
    position: relative;
    height:60px;
    width:60px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}
.bar1 {
    width:40px;
    height:40px;
  
    top:0px;
    position: absolute;
    left:10px;
    -webkit-animation: bar1 1.5s linear infinite;
    -moz-animation: bar1 1.5s linear infinite;
    animation: bar1 1.5s linear infinite;
}
.bar2 {
    width:40px;
    height:40px;
 
    top:0px;
    position: absolute;
    left:10px;
    -webkit-animation: bar2 1.5s linear infinite;
    -moz-animation: bar2 1.5s linear infinite;
    animation: bar2 1.5s linear infinite;
}
.bar3 {
    width:40px;
    height:40px;

    top:0px;
    position:absolute;
    left:10px;
    -webkit-animation: bar3 1.5s linear infinite;
    -moz-animation: bar3 1.5s linear infinite;
    animation: bar3 1.5s linear infinite;
}
.bar1 .bar {
    width:40px;
    height:8px;
    background:#000;
    position:absolute;
    top:0px;
    left:0px;
    -webkit-animation: barSpin 1.9s linear infinite;
    -moz-animation: barSpin 1.9s linear infinite;
    animation: barSpin 1.9s linear infinite;
}
.bar2 .bar {
    width:25px;
    height:3px;
    background:#000;
    position:absolute;
    top:0px;
    left:0px;
    -webkit-animation: barSpin 2.5s linear infinite;
    -moz-animation: barSpin 2.5s linear infinite;
    animation: barSpin 2.5s linear infinite;
}

.bar3 .bar {
    width:30px;
    height:2px;
    background:#000;
    position:absolute;
    top:0px;
    left:0px;
    -webkit-animation: barSpin 1.5s linear infinite;
    -moz-animation: barSpin 1.5s linear infinite;
    animation: barSpin 1.5s linear infinite;  
}

@-webkit-keyframes bar1 {
        0% {
            -webkit-transform: rotateZ(0deg);
                }
        15% {
            -webkit-transform: rotateZ(30deg);
                }
        60% {
            -webkit-transform: rotateZ(230deg);
        }
        70% {
            -webkit-transform: rotateZ(300deg);
                }

        100% {
            -webkit-transform: rotateZ(360deg);
                }
}
@-webkit-keyframes bar2 {
        0% {
            -webkit-transform: rotateZ(50deg);
                }

        70% {
            -webkit-transform: rotateZ(340deg);
                }
        90% {
            -webkit-transform: rotateZ(390deg);
        }

        100% {
            -webkit-transform: rotateZ(410deg);
                }
}
@-webkit-keyframes bar3 {
        0% {
            -webkit-transform: rotateZ(30deg);
                }
        85% {
            -webkit-transform: rotateZ(350deg);
                }
        90% {
            -webkit-transform: rotateZ(370deg);
            }

        100% {
            -webkit-transform: rotateZ(390deg);
                }
}
@-webkit-keyframes barSpin {
        0% {
            -webkit-transform: rotateX(0deg);
                }
        50% {
            -webkit-transform: rotateX(150deg);
                }
        100% {
            -webkit-transform: rotateX(0deg);
                }
}
@-moz-keyframes bar1 {
        0% {
            -moz-transform: rotateZ(0deg);
                }
        15% {
            -moz-transform: rotateZ(30deg);
                }
        60% {
            -moz-transform: rotateZ(230deg);
        }
        70% {
            -moz-transform: rotateZ(300deg);
                }

        100% {
            -moz-transform: rotateZ(360deg);
                }
}
@-moz-keyframes bar2 {
        0% {
            -moz-transform: rotateZ(50deg);
                }

        70% {
            -moz-transform: rotateZ(340deg);
                }
        90% {
            -moz-transform: rotateZ(390deg);
        }

        100% {
            -moz-transform: rotateZ(410deg);
                }
}
@-moz-keyframes bar3 {
        0% {
            -moz-transform: rotateZ(30deg);
                }
        85% {
            -moz-transform: rotateZ(350deg);
                }
        90% {
            -moz-transform: rotateZ(370deg);
            }

        100% {
            -moz-transform: rotateZ(390deg);
                }
}
@-moz-keyframes barSpin {
        0% {
            -moz-transform: rotateX(0deg);
                }
        50% {
            -moz-transform: rotateX(150deg);
                }
        100% {
            -moz-transform: rotateX(0deg);
                }
}
@keyframes bar1 {
        0% {
            transform: rotateZ(0deg);
                }
        15% {
            transform: rotateZ(30deg);
                }
        60% {
            transform: rotateZ(230deg);
        }
        70% {
            transform: rotateZ(300deg);
                }

        100% {
            transform: rotateZ(360deg);
                }
}
@keyframes bar2 {
        0% {
            transform: rotateZ(50deg);
                }

        70% {
            transform: rotateZ(340deg);
                }
        90% {
            transform: rotateZ(390deg);
        }

        100% {
            transform: rotateZ(410deg);
                }
}
@keyframes bar3 {
        0% {
            transform: rotateZ(30deg);
                }
        85% {
            transform: rotateZ(350deg);
                }
        90% {
            transform: rotateZ(370deg);
            }

        100% {
            transform: rotateZ(390deg);
                }
}
@keyframes barSpin {
        0% {
            transform: rotateX(0deg);
                }
        50% {
            transform: rotateX(150deg);
                }
        100% {
            transform: rotateX(0deg);
                }
}



