.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #2c3e50;
  color: #fff;
  font-family: 'Open Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.edges {
  position: absolute;
  z-index: 10;
  width: 160px;
  height: 160px;
  top: 120px;
  left: 120px;
}
.edges .edge {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.edges .edge.t {
  top: 0;
  left: 0;
  border-width: 80px 80px 0 80px;
  border-color: #3F91C7 transparent transparent transparent;
  -webkit-animation: edge-t 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: edge-t 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.edges .edge.l {
  top: 0;
  left: 0;
  border-width: 80px 0 80px 80px;
  border-color: transparent transparent transparent #3289C3;
  -webkit-animation: edge-l 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: edge-l 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.edges .edge.r {
  top: 0;
  right: 0;
  border-width: 80px 80px 80px 0;
  border-color: transparent #2B82BB transparent transparent;
  -webkit-animation: edge-r 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: edge-r 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.edges .edge.b {
  bottom: 0;
  right: 0;
  border-width: 0 80px 80px 80px;
  border-color: transparent transparent #2578AE transparent;
  -webkit-animation: edge-b 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: edge-b 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}

@-webkit-keyframes edge-t {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-180px);
            transform: translateY(-180px);
  }
}

@keyframes edge-t {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-180px);
            transform: translateY(-180px);
  }
}
@-webkit-keyframes edge-l {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
}
@keyframes edge-l {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }
}
@-webkit-keyframes edge-r {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}
@keyframes edge-r {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateX(180px);
            transform: translateX(180px);
  }
}
@-webkit-keyframes edge-b {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(180px);
            transform: translateY(180px);
  }
}
@keyframes edge-b {
  0%, 20% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(180px);
            transform: translateY(180px);
  }
}
.elements {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 185px;
  left: 185px;
}
.elements .square {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 5px;
  left: 5px;
}
.elements .square.small {
  width: 10px;
  height: 10px;
  top: 10px;
  left: 10px;
}
.elements .square.big {
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}
.elements .square.c1 {
  background: #f39c12;
}
.elements .square.c2 {
  background: #e67e22;
}
.elements .square.c3 {
  background: #1abc9c;
}
.elements .square1 {
  -webkit-animation: square1 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square1 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square2 {
  -webkit-animation: square2 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square2 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square3 {
  -webkit-animation: square3 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square3 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square4 {
  -webkit-animation: square4 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square4 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square5 {
  -webkit-animation: square5 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square5 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square6 {
  -webkit-animation: square6 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square6 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square7 {
  -webkit-animation: square7 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square7 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .square8 {
  -webkit-animation: square8 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: square8 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle {
  position: absolute;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-style: solid;
  border-width: 4px;
  top: 5px;
  left: 5px;
}
.elements .circle.small {
  width: 10px;
  height: 10px;
  border-width: 2px;
  top: 10px;
  left: 10px;
}
.elements .circle.big {
  width: 30px;
  height: 30px;
  border-width: 8px;
  top: 0;
  left: 0;
}
.elements .circle.c1 {
  border-color: #f39c12;
}
.elements .circle.c2 {
  border-color: #e67e22;
}
.elements .circle.c3 {
  border-color: #1abc9c;
}
.elements .circle1 {
  -webkit-animation: circle1 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle1 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle2 {
  -webkit-animation: circle2 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle2 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle3 {
  -webkit-animation: circle3 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle3 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle4 {
  -webkit-animation: circle4 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle4 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle5 {
  -webkit-animation: circle5 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle5 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle6 {
  -webkit-animation: circle6 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle6 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle7 {
  -webkit-animation: circle7 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle7 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}
.elements .circle8 {
  -webkit-animation: circle8 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
          animation: circle8 1.5s cubic-bezier(0.19, 0.69, 0.4, 1) infinite alternate;
}

@-webkit-keyframes square1 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(66px, 78px) rotate(110deg);
            transform: scale(1) translate(66px, 78px) rotate(110deg);
  }
}

@keyframes square1 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(66px, 78px) rotate(110deg);
            transform: scale(1) translate(66px, 78px) rotate(110deg);
  }
}
@-webkit-keyframes square2 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(46px, -141px) rotate(163deg);
            transform: scale(1) translate(46px, -141px) rotate(163deg);
  }
}
@keyframes square2 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(46px, -141px) rotate(163deg);
            transform: scale(1) translate(46px, -141px) rotate(163deg);
  }
}
@-webkit-keyframes square3 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(131px, -117px) rotate(126deg);
            transform: scale(1) translate(131px, -117px) rotate(126deg);
  }
}
@keyframes square3 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(131px, -117px) rotate(126deg);
            transform: scale(1) translate(131px, -117px) rotate(126deg);
  }
}
@-webkit-keyframes square4 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(91px, -94px) rotate(122deg);
            transform: scale(1) translate(91px, -94px) rotate(122deg);
  }
}
@keyframes square4 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(91px, -94px) rotate(122deg);
            transform: scale(1) translate(91px, -94px) rotate(122deg);
  }
}
@-webkit-keyframes square5 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(131px, -10px) rotate(111deg);
            transform: scale(1) translate(131px, -10px) rotate(111deg);
  }
}
@keyframes square5 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(131px, -10px) rotate(111deg);
            transform: scale(1) translate(131px, -10px) rotate(111deg);
  }
}
@-webkit-keyframes square6 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-94px, -66px) rotate(125deg);
            transform: scale(1) translate(-94px, -66px) rotate(125deg);
  }
}
@keyframes square6 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-94px, -66px) rotate(125deg);
            transform: scale(1) translate(-94px, -66px) rotate(125deg);
  }
}
@-webkit-keyframes square7 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-102px, 50px) rotate(139deg);
            transform: scale(1) translate(-102px, 50px) rotate(139deg);
  }
}
@keyframes square7 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-102px, 50px) rotate(139deg);
            transform: scale(1) translate(-102px, 50px) rotate(139deg);
  }
}
@-webkit-keyframes square8 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-62px, 20px) rotate(118deg);
            transform: scale(1) translate(-62px, 20px) rotate(118deg);
  }
}
@keyframes square8 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0) rotate(0);
            transform: scale(0) translate(0) rotate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-62px, 20px) rotate(118deg);
            transform: scale(1) translate(-62px, 20px) rotate(118deg);
  }
}
@-webkit-keyframes circle1 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(13px, -113px);
            transform: scale(1) translate(13px, -113px);
  }
}
@keyframes circle1 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(13px, -113px);
            transform: scale(1) translate(13px, -113px);
  }
}
@-webkit-keyframes circle2 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(29px, -71px);
            transform: scale(1) translate(29px, -71px);
  }
}
@keyframes circle2 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(29px, -71px);
            transform: scale(1) translate(29px, -71px);
  }
}
@-webkit-keyframes circle3 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(1px, -72px);
            transform: scale(1) translate(1px, -72px);
  }
}
@keyframes circle3 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(1px, -72px);
            transform: scale(1) translate(1px, -72px);
  }
}
@-webkit-keyframes circle4 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-62px, 132px);
            transform: scale(1) translate(-62px, 132px);
  }
}
@keyframes circle4 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(-62px, 132px);
            transform: scale(1) translate(-62px, 132px);
  }
}
@-webkit-keyframes circle5 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(18px, 86px);
            transform: scale(1) translate(18px, 86px);
  }
}
@keyframes circle5 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(18px, 86px);
            transform: scale(1) translate(18px, 86px);
  }
}
@-webkit-keyframes circle6 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(62px, 15px);
            transform: scale(1) translate(62px, 15px);
  }
}
@keyframes circle6 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(62px, 15px);
            transform: scale(1) translate(62px, 15px);
  }
}
@-webkit-keyframes circle7 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(74px, -25px);
            transform: scale(1) translate(74px, -25px);
  }
}
@keyframes circle7 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(74px, -25px);
            transform: scale(1) translate(74px, -25px);
  }
}
@-webkit-keyframes circle8 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(95px, -45px);
            transform: scale(1) translate(95px, -45px);
  }
}
@keyframes circle8 {
  0%, 20% {
    -webkit-transform: scale(0) translate(0);
            transform: scale(0) translate(0);
  }
  100% {
    -webkit-transform: scale(1) translate(95px, -45px);
            transform: scale(1) translate(95px, -45px);
  }
}