.container {
      width: 100%;
      margin: 0 auto;
      margin-left:-20px;
      clear:both;
    }

    .container ul  {
      padding: 0;
      margin: 0;
    }
    .container ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }

    .container ul li  {
      position: relative;
      /*overflow: hidden;*/
      border-radius: 15px;
      list-style: none;
      float: left;
      padding: 0;
      -webkit-perspective: 500px;
      -moz-perspective: 500px;
      perspective: 500px;
      margin-bottom: 20px;
      margin-left: 20px;
      width: 300px;
      height: 225px;
      -ms-overflow:hidden;
      will-change: transform;
    }
    /*.container ul li .animation-box {*/
        /*overflow:hidden;*/
        /*position:relative;*/
        /*display:block;*/
        /*height:100%;*/
        /*-webkit-transform-style: flat;*/
        /*-moz-transform-style: flat;*/
        /*-ms-transform-style: flat;*/
        /*transform-style: flat;*/
    /*}*/
    .container ul li  a {
      display: inline-block;
      vertical-align: top;
      text-decoration: none;
      border-radius: 4px;
    }
    .container ul li  h3 {
      margin: 0;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
    }
    .container ul li  p {
      font-size: 12px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
    }
    .container ul li .normal {
      width: 100%;
      height: 100%;
      background-color: #ecf0f1;
      background-size:cover;
      color: rgba(52, 73, 94, 0.6);
      text-align: center;
      font-size: 50px;
      line-height: 180px;
        border-radius:15px;
    }
    .container ul li .normal .subtitle {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        background: rgba(46,60,155,0.6);
        color: #fff;
        padding: 6px;
        padding-left: 25px;
        font-size: 16px;
        font-family: 'Lato';
        line-height: 25px;
        font-weight: 100;
        border-radius: 0px 0px 15px 15px;
        text-align: left;
    }

    .container ul li .normal svg {
      pointer-events: none;
      width: 50px;
    }
    .container ul li .normal svg path {
      fill: rgba(52, 73, 94, 0.2);
    }
    .container ul li  .info {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 15px;
      pointer-events: none;
      -webkit-transform: rotate3d(1, 0, 0, 90deg);
      -moz-transform: rotate3d(1, 0, 0, 90deg);
      transform: rotate3d(1, 0, 0, 90deg);
      background: url('../img/background-hover.png')no-repeat;
      background-position: 0px;
      background-size: cover;
      display: block;;
      color: #fff;
      padding: 30px;
      padding-left: 25px;
      font-size: 16px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        
    }
    .container ul li .info h3 {
        font-size: 19px;
        font-family: 'Ubuntu';
        margin-bottom: 0.5em;
        font-weight: 300;
        line-height: 1;
    }
    .container ul li .info span {
        font-weight:200;
    }

    .in-top .info {
      -webkit-transform-origin: 50% 0%;
      -webkit-animation: in-top 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 50% 0%;
      -moz-animation: in-top 300ms ease 0ms 1 forwards;
      transform-origin: 50% 0%;
      animation: in-top 300ms ease 0ms 1 forwards;
    }

    .in-right .info {
      -webkit-transform-origin: 100% 0%;
      -webkit-animation: in-right 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 100% 0%;
      -moz-animation: in-right 300ms ease 0ms 1 forwards;
      transform-origin: 100% 0%;
      animation: in-right 300ms ease 0ms 1 forwards;
    }

    .in-bottom .info {
      -webkit-transform-origin: 50% 100%;
      -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 50% 100%;
      -moz-animation: in-bottom 300ms ease 0ms 1 forwards;
      transform-origin: 50% 100%;
      animation: in-bottom 300ms ease 0ms 1 forwards;
    }

    .in-left .info {
      -webkit-transform-origin: 0% 0%;
      -webkit-animation: in-left 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 0% 0%;
      -moz-animation: in-left 300ms ease 0ms 1 forwards;
      transform-origin: 0% 0%;
      animation: in-left 300ms ease 0ms 1 forwards;
    }

    .out-top .info {
      -webkit-transform-origin: 50% 0%;
      -webkit-animation: out-top 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 50% 0%;
      -moz-animation: out-top 300ms ease 0ms 1 forwards;
      transform-origin: 50% 0%;
      animation: out-top 300ms ease 0ms 1 forwards;
    }

    .out-right .info {
      -webkit-transform-origin: 100% 50%;
      -webkit-animation: out-right 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 100% 50%;
      -moz-animation: out-right 300ms ease 0ms 1 forwards;
      -ms-transform-origin: 100% 50%;
      -ms-animation: out-right 300ms ease 0ms 1 forwards;
      transform-origin: 100% 50%;
      animation: out-right 300ms ease 0ms 1 forwards;
    }

    .out-bottom .info {
      -webkit-transform-origin: 50% 100%;
      -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 50% 100%;
      -moz-animation: out-bottom 300ms ease 0ms 1 forwards;
      transform-origin: 50% 100%;
      animation: out-bottom 300ms ease 0ms 1 forwards;
      -ms-transform-origin: 50% 100%;
      -ms-animation: out-bottom 300ms ease 0ms 1 forwards;

    }

    .out-left .info {
      -webkit-transform-origin: 0% 0%;
      -webkit-animation: out-left 300ms ease 0ms 1 forwards;
      -moz-transform-origin: 0% 0%;
      -moz-animation: out-left 300ms ease 0ms 1 forwards;
      -ms-transform-origin: 0% 50%;
      -ms-animation: out-left 300ms ease 0ms 1 forwards;
      transform-origin: 0% 0%;
      animation: out-left 300ms ease 0ms 1 forwards;
    }

    @-webkit-keyframes in-top {
      from {-webkit-transform: rotate3d(-1, 0, 0, 90deg);}
      to {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-webkit-keyframes in-right {
      from {-webkit-transform: rotate3d(0, -1, 0, 90deg);}
      to {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-webkit-keyframes in-bottom {
      from {-webkit-transform: rotate3d(1, 0, 0, 90deg);}
      to {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-webkit-keyframes in-left {
      from {-webkit-transform: rotate3d(0, 1, 0, 90deg);}
      to {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-webkit-keyframes out-top {
      from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
      to {-webkit-transform: rotate3d(-1, 0, 0, 120deg);}
    }
    @-webkit-keyframes out-right {
      from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
      to {-webkit-transform: rotate3d(0, -1, 0, 120deg);}
    }
    @-webkit-keyframes out-bottom {
      from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
      to {-webkit-transform: rotate3d(1, 0, 0, 110deg);}
    }
    @-webkit-keyframes out-left {
      from {-webkit-transform: rotate3d(0, 0, 0, 0deg);}
      to {-webkit-transform: rotate3d(0, 1, 0, 120deg);}
    }


    @-moz-keyframes in-top {
      from {-moz-transform: rotate3d(-1, 0, 0, 90deg);}
      to {-moz-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-moz-keyframes in-right {
      from {-moz-transform: rotate3d(0, -1, 0, 90deg);}
      to {-moz-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-moz-keyframes in-bottom {
      from {-moz-transform: rotate3d(1, 0, 0, 90deg);}
      to {-moz-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-moz-keyframes in-left {
      from {-moz-transform: rotate3d(0, 1, 0, 90deg);}
      to {-moz-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @-moz-keyframes out-top {
      from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
      to {-moz-transform: rotate3d(-1, 0, 0, 120deg);}
    }
    @-moz-keyframes out-right {
      from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
      to {-moz-transform: rotate3d(0, -1, 0, 120deg);}
    }
    @-moz-keyframes out-bottom {
      from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
      to {-moz-transform: rotate3d(1, 0, 0, 110deg);}
    }
    @-moz-keyframes out-left {
      from {-moz-transform: rotate3d(0, 0, 0, 0deg);}
      to {-moz-transform: rotate3d(0, 1, 0, 120deg);}
    }

    @keyframes in-top {
      from {transform: rotate3d(-1, 0, 0, 90deg);}
      to {transform: rotate3d(0, 0, 0, 0deg);}
      from {-ms-transform: rotate3d(-1, 0, 0, 90deg);}
      to {-ms-transform: rotate3d(0, 0, 0, 0deg);}

    }
    @keyframes in-right {
        from {transform: rotate3d(0, -1, 0, 90deg);}
        to {transform: rotate3d(0, 0, 0, 0deg);}
        from {-ms-transform: rotate3d(0, -1, 0, 90deg);}
        to {-ms-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @keyframes in-bottom {
      from {transform: rotate3d(1, 0, 0, 90deg);}
      to {transform: rotate3d(0, 0, 0, 0deg);}
      from {-ms-transform: rotate3d(1, 0, 0, 90deg);}
      to {-ms-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @keyframes in-left {
      from {transform: rotate3d(0, 1, 0, 90deg);}
      to {transform: rotate3d(0, 0, 0, 0deg);}
      from {-ms-transform: rotate3d(0, 1, 0, 90deg);}
      to {-ms-transform: rotate3d(0, 0, 0, 0deg);}
    }
    @keyframes out-top {
      from {transform: rotate3d(0, 0, 0, 0deg);}
      to {transform: rotate3d(-1, 0, 0, 120deg);}
      from {-ms-transform: rotate3d(0, 0, 0, 0deg);}
      to {-ms-transform: rotate3d(-1, 0, 0, 120deg);}
    }
    @keyframes out-right {
      from {transform: rotate3d(0, 0, 0, 0deg);}
      to {transform: rotate3d(0, -1, 0, 120deg);}
      from {-ms-transform: rotateY(0deg);}
      to {-ms-transform: rotateY(-120deg);}
    }
    @keyframes out-bottom {
      from {transform: rotate3d(0, 0, 0, 0deg);}
      to {transform: rotate3d(1, 0, 0, 110deg);}
      from {-ms-transform: rotate3d(0, 0, 0, 0deg);}
      to {-ms-transform: rotate3d(1, 0, 0, 110deg);}
    }
    @keyframes out-left {
      from {transform: rotate3d(0, 0, 0, 0deg);}
      to {transform: rotate3d(0, 1, 0, 120deg);}
      from {-ms-transform: rotateY(0deg);}
      to {-ms-transform: rotateY(120deg);}
    }