.top-block { display: none; }

.body { display: flex; align-items: center; justify-content: center; min-height: 800px; overflow: hidden; background-image: url(../img/about-bg.jpg); background-size: cover; position: relative; padding-top: 100px; padding-bottom: 100px; font-family: 'Exo-2', sans-serif; font-weight: 400; }
      
.container { opacity: 0; margin: auto; width: 600px; height: 600px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border: 2px solid #fcb315; display: flex; align-items: center; justify-content: center; animation-delay: 1s; animation-name: container; animation-duration: .5s; transform-origin: 50% 50%; position: relative;  animation-fill-mode: forwards;}

@keyframes container {
  0% { transform: scale(1.2); opacity: 0; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) ; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -ms-transform: scale(1) ; -o-transform: scale(1) ; }
}

.container-inner { height: 450px; width: 450px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; box-sizing: border-box; border: 2px solid #fcb315; position: relative; animation-name: inner; animation-duration: 1s; }

.top-element { position: absolute; display: flex; align-items: flex-start; justify-content: flex-start; width: 50%; height: 50%; transform-origin: 100% 100%; animation-name: top-element; animation-duration: 3s; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); }

.bottom-element { position: absolute; display: flex; width: 50%; height: 50%; transform-origin: 0 0; animation-name: bot-element; animation-duration: 3s; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: flex-end; transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); }

.bottom-element img { animation-name: bottom-element-img; animation-duration: 3s; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); }

.top-element img { animation-name: top-element-img; animation-duration: 3s; transform: rotate(10deg); -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); }

.top-element-inner,
.bottom-element-inner { position: relative; height: 100px; width: 100px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: #fcb315; margin: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px 0 #fcb315; }

.bottom-element-inner { margin-bottom: 30px; margin-right: 30px; width: 75px; height: 75px; }

@keyframes top-element {
  0% {
    transform: rotate(-10deg)	;
    -webkit-transform: rotate(-10deg)	;
    -moz-transform: rotate(-10deg)	;
    -ms-transform: rotate(-10deg)	;
    -o-transform: rotate(-10deg)	;
    opacity: 0;
}
  100% {
    transform: rotate(350deg)	;
    -webkit-transform: rotate(350deg)	;
    -moz-transform: rotate(350deg)	;
    -ms-transform: rotate(350deg)	;
    -o-transform: rotate(350deg)	;
    opacity: 1;
}
}

@keyframes top-element-img {
  0% {
    transform: rotate(10deg)	;
    -webkit-transform: rotate(10deg)	;
    -moz-transform: rotate(10deg)	;
    -ms-transform: rotate(10deg)	;
    -o-transform: rotate(10deg)	;
}
  100% {
    transform: rotate(-350deg)	;
    -webkit-transform: rotate(-350deg)	;
    -moz-transform: rotate(-350deg)	;
    -ms-transform: rotate(-350deg)	;
    -o-transform: rotate(-350deg)	;
}
}



@keyframes bot-element {
  0% {
    transform: rotate(-10deg)	;
    -webkit-transform: rotate(-10deg)	;
    -moz-transform: rotate(-10deg)	;
    -ms-transform: rotate(-10deg)	;
    -o-transform: rotate(-10deg)	;
    opacity: 0;
}
  100% {
    transform: rotate(350deg)	;
    -webkit-transform: rotate(350deg)	;
    -moz-transform: rotate(350deg)	;
    -ms-transform: rotate(350deg)	;
    -o-transform: rotate(350deg)	;
    opacity: 1;
}
}

@keyframes bottom-element-img {
  0% {
    transform: rotate(10deg)	;
    -webkit-transform: rotate(10deg)	;
    -moz-transform: rotate(10deg)	;
    -ms-transform: rotate(10deg)	;
    -o-transform: rotate(10deg)	;
}
  100% {
    transform: rotate(-350deg)	;
    -webkit-transform: rotate(-350deg)	;
    -moz-transform: rotate(-350deg)	;
    -ms-transform: rotate(-350deg)	;
    -o-transform: rotate(-350deg)	;
}
}

@keyframes inner {

  0% {
    transform: scale(.6);
    opacity: 0;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    -ms-transform: scale(.6);
    -o-transform: scale(.6);
  }

  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }

}


.container-first,
.container-second,
.container-third { position: absolute; width: 50%; height: 50%; }

.element-inner { width: 30px; height: 30px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background-color: #fcb315; margin: 73px; position: relative; box-shadow: 0 0 15px 0 #fcb315; }

.container-first { left: 0; top: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform-origin: 100% 100%; animation-name: elem-1; animation-duration: 2s; }

.container-first p { animation-fill-mode: forwards; transform: scale(0) rotate(45deg); color: #fff; transform: rotate(45deg); right: 100%; top: -185%; position: absolute; animation-name: pp-1; animation-duration: 3s; -webkit-transform: scale(0) rotate(45deg); -moz-transform: scale(0) rotate(45deg); -ms-transform: scale(0) rotate(45deg); -o-transform: scale(0) rotate(45deg); color:#fcb315; font-size: 18px; text-transform: uppercase; font-family: Exo-2, sans-serif; }

.container-second p { animation-fill-mode: forwards; transform: scale(0); left: 160%; top: -20%; position: absolute; animation-name: pp-2; animation-duration: 3s; color:#fcb315; font-size: 18px; text-transform: uppercase; font-family: Exo-2, sans-serif; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }

.container-third p { animation-fill-mode: forwards; transform: scale(0) ; color: #fff; position: absolute; left: 130%; top: 40%; animation-name: pp-2; animation-duration: 3s; color:#fcb315; font-size: 18px; text-transform: uppercase; font-family: Exo-2, sans-serif; -webkit-transform: scale(0) ; -moz-transform: scale(0) ; -ms-transform: scale(0) ; -o-transform: scale(0) ; }

@keyframes pp-2 {
  0% { opacity: 0; }
  75% { opacity: 0; transform: scale(2) ; -webkit-transform: scale(2) ; -moz-transform: scale(2) ; -ms-transform: scale(2) ; -o-transform: scale(2) ; }
  100% { opacity: 1; transform: scale(1) ; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -ms-transform: scale(1) ; -o-transform: scale(1) ; }
}

@keyframes pp-1 {
  0% { opacity: 0; }
  75% { opacity: 0; transform: scale(2)  rotate(45deg); -webkit-transform: scale(2)  rotate(45deg); -moz-transform: scale(2)  rotate(45deg); -ms-transform: scale(2)  rotate(45deg); -o-transform: scale(2)  rotate(45deg); }
  100% { opacity: 1; transform: scale(1) rotate(45deg); -webkit-transform: scale(1) rotate(45deg); -moz-transform: scale(1) rotate(45deg); -ms-transform: scale(1) rotate(45deg); -o-transform: scale(1) rotate(45deg); }
}

.container-second { right: 0; top: 0; transform-origin: 0 100%; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); display: flex; justify-content: flex-end; animation-name: elem-2; animation-duration: 2s; }

.container-third { bottom: 0; right: 0; display: flex; align-items: flex-end; justify-content: flex-end; animation-name: elem-2; animation-duration: 2s; transform-origin: 0 0; }

@keyframes elem-1 {
  0% {
    transform: rotate(-45deg)	;
    -webkit-transform: rotate(-45deg)	;
    -moz-transform: rotate(-45deg)	;
    -ms-transform: rotate(-45deg)	;
    -o-transform: rotate(-45deg)	;
  }
  100% {
    transform: rotate(-405deg)	;
    -webkit-transform: rotate(-405deg)	;
    -moz-transform: rotate(-405deg)	;
    -ms-transform: rotate(-405deg)	;
    -o-transform: rotate(-405deg)	;
  }
}

@keyframes elem-2 {
  0% {
    transform: rotate(0)	;
    -webkit-transform: rotate(0)	;
    -moz-transform: rotate(0)	;
    -ms-transform: rotate(0)	;
    -o-transform: rotate(0)	;
  }
  100% {
    transform: rotate(-360deg)	;
    -webkit-transform: rotate(-360deg)	;
    -moz-transform: rotate(-360deg)	;
    -ms-transform: rotate(-360deg)	;
    -o-transform: rotate(-360deg)	;
  }
}

.text-container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; position: absolute; animation-duration: 4s; animation-name: text; }

.text-container p:first-child,
.text-container p:nth-child(2),
.text-container p:nth-child(3) { transform-origin: 50% 50%; transform: scale(0); font-size: 136px; color: #fff; font-weight: bold; text-transform: uppercase; font-family: 'Exo-2-extra-light', sans-serif; font-weight: 300; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }

.text-container p:first-child { animation-fill-mode: forwards; animation-name: p-header-1; animation-delay: 3.5s; animation-duration: 1.5s; }

.text-container p:nth-child(2) { animation-fill-mode: forwards; animation-name: p-header-1; animation-delay: 4s; animation-duration: 1.5s; }

.text-container p:nth-child(3) { animation-fill-mode: forwards; animation-name: p-header-1; animation-delay: 4.5s; animation-duration: 1.5s; }

@keyframes p-header-1 {
  0% { transform: scale(2) ; -webkit-transform: scale(2) ; -moz-transform: scale(2) ; -ms-transform: scale(2) ; -o-transform: scale(2) ; }
  100% { transform: scale(1) ; -webkit-transform: scale(1) ; -moz-transform: scale(1) ; -ms-transform: scale(1) ; -o-transform: scale(1) ; }
}

.text-container p:last-child { animation-fill-mode: forwards; animation-name: p-header-1; animation-delay: 3s; animation-duration: 1s;  transform: scale(0); width: 100%; font-size: 38px; color: #fff; text-transform: uppercase; text-align: center; font-family: 'Exo-2-extra-light', sans-serif; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }


@keyframes text {
  0% {
    transform:scale(0) ;
    -webkit-transform:scale(0) ;
    -moz-transform:scale(0) ;
    -ms-transform:scale(0) ;
    -o-transform:scale(0) ;
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform:scale(1) ;
    -webkit-transform:scale(1) ;
    -moz-transform:scale(1) ;
    -ms-transform:scale(1) ;
    -o-transform:scale(1) ;
  }
}

.body>p { color: #fff; font-size: 18px; position: absolute; }

.body>p:first-child { opacity: 0; text-align: right; width: 250px; top: 200px; left: 200px; animation-name: p-1; animation-duration: 2s; z-index: 3; animation-delay: 2.5s; animation-fill-mode: forwards; animation-timing-function: ease; }

.body>p:nth-child(2) { opacity: 0; width: 250px; bottom: 200px; right: 200px; animation-name: p-2; animation-duration: 2s; z-index: 3; animation-delay: 2.5s;  animation-fill-mode: forwards; animation-timing-function: ease;  }

@keyframes p-1 {
  0% {
    transform: translateX(-100%)	;
    -webkit-transform: translateX(-100%)	;
    -moz-transform: translateX(-100%)	;
    -ms-transform: translateX(-100%)	;
    -o-transform: translateX(-100%)	;
    opacity: 0;
}
  100% {
    transform: translateX(0)	;
    -webkit-transform: translateX(0)	;
    -moz-transform: translateX(0)	;
    -ms-transform: translateX(0)	;
    -o-transform: translateX(0)	;
    opacity: 1;
}
}

@keyframes p-2 {
  0% {
    transform: translateX(100%)	;
    -webkit-transform: translateX(100%)	;
    -moz-transform: translateX(100%)	;
    -ms-transform: translateX(100%)	;
    -o-transform: translateX(100%)	;
    opacity: 0;
  }
  100% {
    transform: translateX(0)	;
    -webkit-transform: translateX(0)	;
    -moz-transform: translateX(0)	;
    -ms-transform: translateX(0)	;
    -o-transform: translateX(0)	;
    opacity: 1;
  }
}


@media screen and (max-width: 425px) {

  .body>p:first-child {
    display: none;
  }

  .body>p:nth-child(2) {
    display: none;
  }

  .container-third p {
    left: 27%;
    top: 105%;
    font-size: 13px;
  }

  .container-second p {
    left: 53%;
    top: -94%;
    font-size: 13px;
  }

  .container-first p {
    right: -128%;
    top: -77%;
    font-size: 13px;
  }

  .body {
    min-height: 570px;
    padding-top: 150px;
  }

  .body .container {
    width: 300px;
    height: 300px;
  }
    .element-inner {
      margin: 27px;
    }
    .container-inner {
      width: 200px;
      height: 200px;
    }
      .top-element-inner {
        height: 40px;
        width: 40px;
        margin: 8px;
      }
        .top-element-inner img {
          width: 20px;
        }
      .bottom-element-inner {
        width: 30px;
        height: 30px;
        margin: 14px;
      }
        .bottom-element-inner img {
          width: 10px;
        }
    .text-container p:first-child,
    .text-container p:nth-child(2),
    .text-container p:nth-child(3) {
      font-size: 50px;
    }
    .text-container p:last-child {
      font-size: 25px;
    }
}