#custom_animation {
  margin: 0 auto;
  position: relative;
  width: 920px; }
  @media (max-width: 1024px) {
    #custom_animation {
      max-width: 100%;
      margin: 40px 0px; } }
  @media (max-width: 767px) {
    #custom_animation {
      margin: 20px 0px; } }
  #custom_animation .line {
    height: 138px; }
    @media (max-width: 920px) {
      #custom_animation .line {
        height: auto; } }
    #custom_animation .line.main-animation-container {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: nowrap; }
      #custom_animation .line.main-animation-container img {
        transition: all ease-in-out 0.9s; }
      #custom_animation .line.main-animation-container #energies {
        opacity: 1;
        left: 0;
        position: relative;
        width: 404px; }
        @media (max-width: 920px) {
          #custom_animation .line.main-animation-container #energies {
            width: 43.913%; } }
        #custom_animation .line.main-animation-container #energies.animate {
          left: -600px;
          opacity: 0; }
      #custom_animation .line.main-animation-container #middle {
        margin: 0 10px 0 17px;
        height: 89px;
        position: absolute;
        opacity: 1;
        left: 404px; }
        @media (max-width: 920px) {
          #custom_animation .line.main-animation-container #middle {
            width: 9.014%;
            left: calc(50% - 4.507%);
            margin: 0; } }
        #custom_animation .line.main-animation-container #middle.animate {
          opacity: 0; }
      #custom_animation .line.main-animation-container #eoden {
        position: absolute;
        left: 513px;
        width: 260px;
        opacity: 1; }
        @media (max-width: 920px) {
          #custom_animation .line.main-animation-container #eoden {
            left: calc(50% + 9.014%);
            width: 28.261%; } }
        #custom_animation .line.main-animation-container #eoden.animate {
          left: 1000px;
          opacity: 0; }
    #custom_animation .line.third-animation-container {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all ease-in-out 0.9s;
      padding: 0px 16px;
      position: absolute;
      top: 0;
      opacity: 0;
      margin-top: -10px; }
      @media (max-width: 920px) {
        #custom_animation .line.third-animation-container {
          margin-top: 0px; } }
      #custom_animation .line.third-animation-container:before, #custom_animation .line.third-animation-container:after {
        content: "";
        position: absolute;
        height: 100%;
        width: 400px;
        background: #fff;
        transition: all ease-in-out 0.9s; }
        @media (max-width: 920px) {
          #custom_animation .line.third-animation-container:before, #custom_animation .line.third-animation-container:after {
            height: 110%;
            width: 43.478%; } }
      #custom_animation .line.third-animation-container:before {
        left: 0; }
      #custom_animation .line.third-animation-container:after {
        right: 0; }
      #custom_animation .line.third-animation-container.animate {
        opacity: 1; }
        #custom_animation .line.third-animation-container.animate:before, #custom_animation .line.third-animation-container.animate:after {
          width: 0; }
    #custom_animation .line.second-animation-container {
      width: 100%;
      display: flex;
      padding: 0px 16px;
      justify-content: center;
      align-items: center;
      opacity: 1;
      transition: all ease-in-out 0.9s;
      position: absolute;
      top: 0; }
      #custom_animation .line.second-animation-container #flag-container {
        transition-property: width, top, left, height;
        transition-duration: 0.9s;
        transition-timing-function: ease-in-out;
        position: absolute;
        top: 0;
        left: 20px;
        z-index: 2;
        width: 94px;
        height: 90px; }
        #custom_animation .line.second-animation-container #flag-container #flag {
          transition-property: background-color, top, height, width;
          transition-duration: 0.9s;
          transition-timing-function: ease-in-out;
          position: relative;
          opacity: 0;
          top: 20px;
          position: relative;
          opacity: 0;
          width: 102px;
          height: 87px;
          left: -3px; }
        @media (max-width: 920px) {
          #custom_animation .line.second-animation-container #flag-container {
            left: 2.174%;
            width: 10.217%;
            height: auto; }
            #custom_animation .line.second-animation-container #flag-container #flag {
              height: auto;
              top: 7px; } }
      #custom_animation .line.second-animation-container .middle {
        transition: all ease-in-out 0.9s;
        max-height: 101px;
        width: 102px;
        background-color: #fff;
        margin-left: 3px;
        position: relative;
        top: -10px;
        z-index: 1;
        opacity: 0; }
        @media (max-width: 920px) {
          #custom_animation .line.second-animation-container .middle {
            width: 11.30%;
            height: auto;
            margin-left: 2px;
            top: 0px; } }
      #custom_animation .line.second-animation-container.first-show {
        opacity: 1; }
        @media (max-width: 920px) {
          #custom_animation .line.second-animation-container.first-show #flag-container {
            height: auto; } }
        #custom_animation .line.second-animation-container.first-show #flag-container #flag {
          opacity: 1; }
      #custom_animation .line.second-animation-container.animate #flag-container {
        overflow: hidden;
        display: flex;
        justify-content: center;
        left: 453px;
        height: 40px;
        width: 18px;
        top: 68px; }
        #custom_animation .line.second-animation-container.animate #flag-container #flag {
          max-width: 90px;
          width: 90px;
          top: 0px; }
        @media (max-width: 920px) {
          #custom_animation .line.second-animation-container.animate #flag-container {
            top: calc(120% - 49.277%);
            /*49.277%;*/
            left: 49.239%;
            width: 1.957%;
            height: 28.985%; }
            #custom_animation .line.second-animation-container.animate #flag-container #flag {
              height: 110%;
              /*50px;*/
              top: 0px;
              /*-10px;*/ } }
      #custom_animation .line.second-animation-container.animate .middle {
        opacity: 1; }

/*# sourceMappingURL=custom-animation.css.map */