.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transition: 1.5s all ease;
  -o-transition: 1.5s all ease;
  -moz-transition: 1.5s all ease;
  transition: 1.5s all ease;
  overflow: hidden;
  opacity: 0.4;
}

.lines.animated {
  opacity: 1;
}

.line-container {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 5px;
}

.animated-line {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  width: 150px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  -webkit-animation: moveLine 3s linear infinite;
     -moz-animation: moveLine 3s linear infinite;
          animation: moveLine 3s linear infinite;
}

@-webkit-keyframes moveLine {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@-moz-keyframes moveLine {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes moveLine {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@media (max-width: 767px) {
  @-webkit-keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
  @-moz-keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
  @keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
}

.line-container:nth-child(1) {
  position: absolute;
  top: 21%;
  left: 0;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
          transform: rotate(90deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(1) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(1) {
    top: 15%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(1) {
    top: 30%;
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(1) {
    top: 35%;
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(1) {
    top: 40%;
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(1) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(1) {
    display: none;
  }
}

.line-container:nth-child(2) {
  position: absolute;
  top: 21%;
  left: 4.5%;
  -webkit-transform: rotate(75deg);
     -moz-transform: rotate(75deg);
      -ms-transform: rotate(75deg);
       -o-transform: rotate(75deg);
          transform: rotate(75deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(2) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(2) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(2) {
    top: 30%;
    -webkit-transform: rotate(78deg);
       -moz-transform: rotate(78deg);
        -ms-transform: rotate(78deg);
         -o-transform: rotate(78deg);
            transform: rotate(78deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(2) {
    top: 35%;
    -webkit-transform: rotate(81deg);
       -moz-transform: rotate(81deg);
        -ms-transform: rotate(81deg);
         -o-transform: rotate(81deg);
            transform: rotate(81deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(2) {
    top: 40%;
    -webkit-transform: rotate(84deg);
       -moz-transform: rotate(84deg);
        -ms-transform: rotate(84deg);
         -o-transform: rotate(84deg);
            transform: rotate(84deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(2) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(2) {
    display: none;
  }
}

.line-container:nth-child(3) {
  position: absolute;
  top: 21%;
  right: 4.5%;
  -webkit-transform: rotate(105deg);
     -moz-transform: rotate(105deg);
      -ms-transform: rotate(105deg);
       -o-transform: rotate(105deg);
          transform: rotate(105deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(3) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(3) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(3) {
    top: 30%;
    -webkit-transform: rotate(102deg);
       -moz-transform: rotate(102deg);
        -ms-transform: rotate(102deg);
         -o-transform: rotate(102deg);
            transform: rotate(102deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(3) {
    top: 35%;
    -webkit-transform: rotate(99deg);
       -moz-transform: rotate(99deg);
        -ms-transform: rotate(99deg);
         -o-transform: rotate(99deg);
            transform: rotate(99deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(3) {
    top: 40%;
    -webkit-transform: rotate(96deg);
       -moz-transform: rotate(96deg);
        -ms-transform: rotate(96deg);
         -o-transform: rotate(96deg);
            transform: rotate(96deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(3) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(3) {
    display: none;
  }
}

.line-container:nth-child(4) {
  position: absolute;
  top: 21%;
  left: 9.5%;
  -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
       -o-transform: rotate(60deg);
          transform: rotate(60deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(4) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(4) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(4) {
    top: 30%;
    -webkit-transform: rotate(65deg);
       -moz-transform: rotate(65deg);
        -ms-transform: rotate(65deg);
         -o-transform: rotate(65deg);
            transform: rotate(65deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(4) {
    top: 35%;
    -webkit-transform: rotate(72deg);
       -moz-transform: rotate(72deg);
        -ms-transform: rotate(72deg);
         -o-transform: rotate(72deg);
            transform: rotate(72deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(4) {
    top: 40%;
    -webkit-transform: rotate(78deg);
       -moz-transform: rotate(78deg);
        -ms-transform: rotate(78deg);
         -o-transform: rotate(78deg);
            transform: rotate(78deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(4) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(4) {
    display: none;
  }
}

.line-container:nth-child(5) {
  position: absolute;
  top: 21%;
  right: 9.5%;
  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
       -o-transform: rotate(120deg);
          transform: rotate(120deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(5) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(5) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(5) {
    top: 30%;
    -webkit-transform: rotate(115deg);
       -moz-transform: rotate(115deg);
        -ms-transform: rotate(115deg);
         -o-transform: rotate(115deg);
            transform: rotate(115deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(5) {
    top: 35%;
    -webkit-transform: rotate(108deg);
       -moz-transform: rotate(108deg);
        -ms-transform: rotate(108deg);
         -o-transform: rotate(108deg);
            transform: rotate(108deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(5) {
    top: 40%;
    -webkit-transform: rotate(102deg);
       -moz-transform: rotate(102deg);
        -ms-transform: rotate(102deg);
         -o-transform: rotate(102deg);
            transform: rotate(102deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(5) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(5) {
    display: none;
  }
}

.line-container:nth-child(6) {
  position: absolute;
  top: 21%;
  left: 15.8%;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(6) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(6) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(6) {
    top: 30%;
    -webkit-transform: rotate(52deg);
       -moz-transform: rotate(52deg);
        -ms-transform: rotate(52deg);
         -o-transform: rotate(52deg);
            transform: rotate(52deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(6) {
    top: 35%;
    -webkit-transform: rotate(62deg);
       -moz-transform: rotate(62deg);
        -ms-transform: rotate(62deg);
         -o-transform: rotate(62deg);
            transform: rotate(62deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(6) {
    top: 40%;
    -webkit-transform: rotate(70deg);
       -moz-transform: rotate(70deg);
        -ms-transform: rotate(70deg);
         -o-transform: rotate(70deg);
            transform: rotate(70deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(6) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(6) {
    display: none;
  }
}

.line-container:nth-child(7) {
  position: absolute;
  top: 21%;
  right: 15.8%;
  -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
       -o-transform: rotate(135deg);
          transform: rotate(135deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(7) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(7) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(7) {
    top: 30%;
    -webkit-transform: rotate(128deg);
       -moz-transform: rotate(128deg);
        -ms-transform: rotate(128deg);
         -o-transform: rotate(128deg);
            transform: rotate(128deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(7) {
    top: 35%;
    -webkit-transform: rotate(118deg);
       -moz-transform: rotate(118deg);
        -ms-transform: rotate(118deg);
         -o-transform: rotate(118deg);
            transform: rotate(118deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(7) {
    top: 40%;
    -webkit-transform: rotate(110deg);
       -moz-transform: rotate(110deg);
        -ms-transform: rotate(110deg);
         -o-transform: rotate(110deg);
            transform: rotate(110deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(7) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(7) {
    display: none;
  }
}

.line-container:nth-child(8) {
  position: absolute;
  top: 21%;
  left: 25%;
  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(8) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(8) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(8) {
    top: 30%;
    -webkit-transform: rotate(39deg);
       -moz-transform: rotate(39deg);
        -ms-transform: rotate(39deg);
         -o-transform: rotate(39deg);
            transform: rotate(39deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(8) {
    top: 35%;
    -webkit-transform: rotate(50deg);
       -moz-transform: rotate(50deg);
        -ms-transform: rotate(50deg);
         -o-transform: rotate(50deg);
            transform: rotate(50deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(8) {
    top: 40%;
    -webkit-transform: rotate(59deg);
       -moz-transform: rotate(59deg);
        -ms-transform: rotate(59deg);
         -o-transform: rotate(59deg);
            transform: rotate(59deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(8) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(8) {
    display: none;
  }
}

.line-container:nth-child(9) {
  position: absolute;
  top: 21%;
  right: 25%;
  -webkit-transform: rotate(150deg);
     -moz-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
       -o-transform: rotate(150deg);
          transform: rotate(150deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(9) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(9) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(9) {
    top: 30%;
    -webkit-transform: rotate(141deg);
       -moz-transform: rotate(141deg);
        -ms-transform: rotate(141deg);
         -o-transform: rotate(141deg);
            transform: rotate(141deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(9) {
    top: 35%;
    -webkit-transform: rotate(130deg);
       -moz-transform: rotate(130deg);
        -ms-transform: rotate(130deg);
         -o-transform: rotate(130deg);
            transform: rotate(130deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(9) {
    top: 40%;
    -webkit-transform: rotate(121deg);
       -moz-transform: rotate(121deg);
        -ms-transform: rotate(121deg);
         -o-transform: rotate(121deg);
            transform: rotate(121deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(9) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(9) {
    display: none;
  }
}

.line-container:nth-child(10) {
  position: absolute;
  top: 21%;
  left: 48.5%;
  -webkit-transform: rotate(15deg);
     -moz-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
       -o-transform: rotate(15deg);
          transform: rotate(15deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(10) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(10) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(10) {
    top: 30%;
    -webkit-transform: rotate(22deg);
       -moz-transform: rotate(22deg);
        -ms-transform: rotate(22deg);
         -o-transform: rotate(22deg);
            transform: rotate(22deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(10) {
    top: 35%;
    left: 43%;
    -webkit-transform: rotate(34deg);
       -moz-transform: rotate(34deg);
        -ms-transform: rotate(34deg);
         -o-transform: rotate(34deg);
            transform: rotate(34deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(10) {
    top: 40%;
    left: 36%;
    -webkit-transform: rotate(49deg);
       -moz-transform: rotate(49deg);
        -ms-transform: rotate(49deg);
         -o-transform: rotate(49deg);
            transform: rotate(49deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(10) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(10) {
    display: none;
  }
}

.line-container:nth-child(10) .animated-line {
  -webkit-animation-delay: 0.5s;
     -moz-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.line-container:nth-child(11) {
  position: absolute;
  top: 21%;
  right: 48.5%;
  -webkit-transform: rotate(165deg);
     -moz-transform: rotate(165deg);
      -ms-transform: rotate(165deg);
       -o-transform: rotate(165deg);
          transform: rotate(165deg);
}

@media (max-width: 1679px) {
  .line-container:nth-child(11) {
    top: 10%;
  }
}

@media (max-width: 1279px) {
  .line-container:nth-child(11) {
    top: 18%;
  }
}

@media (max-width: 1023px) {
  .line-container:nth-child(11) {
    top: 30%;
    -webkit-transform: rotate(158deg);
       -moz-transform: rotate(158deg);
        -ms-transform: rotate(158deg);
         -o-transform: rotate(158deg);
            transform: rotate(158deg);
  }
}

@media (max-width: 990px) {
  .line-container:nth-child(11) {
    top: 35%;
    right: 43%;
    -webkit-transform: rotate(146deg);
       -moz-transform: rotate(146deg);
        -ms-transform: rotate(146deg);
         -o-transform: rotate(146deg);
            transform: rotate(146deg);
  }
}

@media (max-width: 767px) {
  .line-container:nth-child(11) {
    top: 40%;
    right: 36%;
    -webkit-transform: rotate(131deg);
       -moz-transform: rotate(131deg);
        -ms-transform: rotate(131deg);
         -o-transform: rotate(131deg);
            transform: rotate(131deg);
  }
}

@media (max-width: 479px) {
  .line-container:nth-child(11) {
    top: 36%;
  }
}

@media (max-width: 374px) {
  .line-container:nth-child(11) {
    display: none;
  }
}

.line-container:nth-child(11) .animated-line {
  -webkit-animation-delay: 0.5s;
     -moz-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@keyframes moveLine {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@media (max-width: 767px) {
  @-webkit-keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
  @-moz-keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
  @keyframes moveLine {
    0% {
      left: -60%;
    }
    100% {
      left: 100%;
    }
  }
}