@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic);
.wrapper {
    width: 500px;
    margin: 0 auto; }
.wrapper h1 {
    text-align: center;
    color: #34495e; }

.preloader {
    position: relative;
    height: 8px;
    width: 100%; }
.preloader .line {
    position: absolute;
    height: 8px;
    width: 100%; }
.preloader .line.blue:before {
    position: absolute;
    content: "";
    left: 0;
    height: 8px;
    background-color: #2980b9;
    -webkit-animation: line-left 2500ms linear 0ms infinite;
    animation: line-left 2500ms linear 0ms infinite; }
.preloader .line.blue:after {
    position: absolute;
    content: "";
    right: 0;
    height: 8px;
    background-color: #2980b9;
    -webkit-animation: line-right 2500ms linear 0ms infinite;
    animation: line-right 2500ms linear 0ms infinite; }
.preloader .line.green:before {
    position: absolute;
    content: "";
    left: 0;
    height: 8px;
    background-color: #27ae60;
    -webkit-animation: line-left 2500ms linear 625ms infinite;
    animation: line-left 2500ms linear 625ms infinite; }
.preloader .line.green:after {
    position: absolute;
    content: "";
    right: 0;
    height: 8px;
    background-color: #27ae60;
    -webkit-animation: line-right 2500ms linear 625ms infinite;
    animation: line-right 2500ms linear 625ms infinite; }
.preloader .line.orange:before {
    position: absolute;
    content: "";
    left: 0;
    height: 8px;
    background-color: #e67e22;
    -webkit-animation: line-left 2500ms linear 1250ms infinite;
    animation: line-left 2500ms linear 1250ms infinite; }
.preloader .line.orange:after {
    position: absolute;
    content: "";
    right: 0;
    height: 8px;
    background-color: #e67e22;
    -webkit-animation: line-right 2500ms linear 1250ms infinite;
    animation: line-right 2500ms linear 1250ms infinite; }
.preloader .line.red:before {
    position: absolute;
    content: "";
    left: 0;
    height: 8px;
    background-color: #e74c3c;
    -webkit-animation: line-left 2500ms linear 1875ms infinite;
    animation: line-left 2500ms linear 1875ms infinite; }
.preloader .line.red:after {
    position: absolute;
    content: "";
    right: 0;
    height: 8px;
    background-color: #e74c3c;
    -webkit-animation: line-right 2500ms linear 1875ms infinite;
    animation: line-right 2500ms linear 1875ms infinite; }

@-webkit-keyframes line-right {
    0% {
        width: 0;
        margin-right: 50%; }

    25% {
        width: 35%;
        margin-right: 15%; }

    50% {
        width: 15%;
        margin-right: 0; }

    75% {
        width: 0;
        margin-right: 0; } }

@-moz-keyframes line-right {
    0% {
        width: 0;
        margin-right: 50%; }

    25% {
        width: 35%;
        margin-right: 15%; }

    50% {
        width: 15%;
        margin-right: 0; }

    75% {
        width: 0;
        margin-right: 0; } }

@-ms-keyframes line-right {
    0% {
        width: 0;
        margin-right: 50%; }

    25% {
        width: 35%;
        margin-right: 15%; }

    50% {
        width: 15%;
        margin-right: 0; }

    75% {
        width: 0;
        margin-right: 0; } }

@keyframes line-right {
    0% {
        width: 0;
        margin-right: 50%; }

    25% {
        width: 35%;
        margin-right: 15%; }

    50% {
        width: 15%;
        margin-right: 0; }

    75% {
        width: 0;
        margin-right: 0; } }

@-webkit-keyframes line-left {
    0% {
        width: 0;
        margin-left: 50%; }

    25% {
        width: 35%;
        margin-left: 15%; }

    50% {
        width: 15%;
        margin-left: 0; }

    75% {
        width: 0;
        margin-left: 0; } }

@-moz-keyframes line-left {
    0% {
        width: 0;
        margin-left: 50%; }

    25% {
        width: 35%;
        margin-left: 15%; }

    50% {
        width: 15%;
        margin-left: 0; }

    75% {
        width: 0;
        margin-left: 0; } }

@-ms-keyframes line-left {
    0% {
        width: 0;
        margin-left: 50%; }

    25% {
        width: 35%;
        margin-left: 15%; }

    50% {
        width: 15%;
        margin-left: 0; }

    75% {
        width: 0;
        margin-left: 0; } }

@keyframes line-left {
    0% {
        width: 0;
        margin-left: 50%; }

    25% {
        width: 35%;
        margin-left: 15%; }

    50% {
        width: 15%;
        margin-left: 0; }

    75% {
        width: 0;
        margin-left: 0; } }