@charset "utf-8";
/* Experimental*/

/* Error */




      .logoX-containerx{
        position: relative;
        margin-top: 125px;
      }

      .reflection {
        background: linear-gradient(to bottom, rgba(225,236,239,1) 0%, rgba(225,236,239,0.69) 31%, rgba(225,236,239,0.66) 34%, rgba(241,243,245,0.55) 45%, rgba(241,243,245,0.5) 50%, rgba(241,243,245,0) 100%);
        height: 100px;
        width: 240px;
        border-radius: 15px;
        margin: 0 auto;
      }

      .logoX {
        margin: 0 auto;
        display: block;
      }

      .back {
        width: 240px;
        height: 240px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left:-120px;
      }

      .logoX, .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }

      .logoX--ani {
        -webkit-animation: logoXAni 1s ease-in-out alternate;
        animation: logoXAni 1s ease-in-out alternate;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
        animation-delay: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }

      @-webkit-keyframes logoXAni {
        from {
          -webkit-transform: rotateY(0deg);
          -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          -webkit-transform: rotateY(-180deg);
        }
      }

      @keyframes logoXAni {
        from {
          transform: rotateY(0deg);
          animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          transform: rotateY(-180deg);
        }
      }

      .back--ani {
        -webkit-animation: BackAni 1s ease-in-out alternate;
        animation: BackAni 1s ease-in-out alternate;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
        animation-delay: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      }

      @-webkit-keyframes BackAni {
        from {
          -webkit-transform: rotateY(-180deg);
          -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          -webkit-transform: rotateY(0deg);
        }
      }

      @keyframes BackAni {
        from {
          transform: rotateY(-180deg);
          animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          transform: rotateY(0deg);
        }
      }

      .reflection--ani {
        -webkit-animation: ReflecAni 1s ease-in-out alternate;
        animation: ReflecAni 1s ease-in-out alternate;
        -webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
        animation-delay: 0.5s;
      }

      @-webkit-keyframes ReflecAni {
        from {
          -webkit-transform: rotateY(0deg);
          -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          -webkit-transform: rotateY(-180deg);
        }
      }

      @keyframes ReflecAni {
        from {
          transform: rotateY(0deg);
          animation-timing-function: cubic-bezier(.4, 0, .2, 1);
        }
        to {
          transform: rotateY(-180deg);
        }
      }

      .gradient {
        background: radial-gradient(ellipse farthest-side at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(241,243,245,1) 45%, rgba(241,243,245,1) 50%, rgba(241,243,245,1) 52%, rgba(241,243,245,1) 100%);
        position: absolute;
        margin: 0 auto;
        width: 100%;
        height: 450px;
        /*top: 180px;*/
      }