.panel {
        display: inline-block;
        width: 292px;
        height: 292px;
        position: relative;
        font-size: .8em;

        -webkit-perspective: 600px;
        -moz-perspective: 600px;
                        perspective: 600px;
    }
    /* -- make sure to declare a default for every property that you want animated -- */
    /* -- general styles, including Y axis rotation -- */
    .panel .front {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        width: inherit;
        height: inherit;
        text-align: center;

        -webkit-transform: rotateX(0deg) rotateY(0deg);
             -moz-transform: rotateX(0deg) rotateY(0deg);
                        transform: rotateX(0deg) rotateY(0deg);

        -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
                        transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
             -moz-backface-visibility: hidden;
                        backface-visibility: hidden;

        /* -- transition is the magic sauce for animation -- */
        -webkit-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
    }
    .panel .front img{
        width: 100%;
    }
    .panel .back img{
        width: 100%;
    }
    .panel.flip .front {
        z-index: 900;

        -webkit-transform: rotateY(180deg);
             -moz-transform: rotateY(180deg);
                        transform: rotateY(180deg);
    }

    .panel .back {
        float: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 800;
        width: inherit;
        height: inherit;

        -webkit-transform: rotateY(-180deg);
             -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
                        transform: rotateY(-179deg);

        -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
                        transform-style: preserve-3d;

        -webkit-backface-visibility: hidden;
             -moz-backface-visibility: hidden;
                        backface-visibility: hidden;

        /* -- transition is the magic sauce for animation -- */
        -webkit-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
    }

    .panel.flip .back {
        z-index: 1000;

        -webkit-transform: rotateX(0deg) rotateY(0deg);
             -moz-transform: rotateX(0deg) rotateY(0deg);
                        transform: rotateX(0deg) rotateY(0deg);
    }

    /* -- X axis rotation for click panel -- */
    .click .front {
        cursor: pointer;
        -webkit-transform: rotateX(0deg);
             -moz-transform: rotateX(0deg);
                        transform: rotateX(0deg);
    }
    .click.flip .front {
        -webkit-transform: rotateX(180deg);
             -moz-transform: rotateX(180deg);
                        transform: rotateX(180deg);
    }
    .click .back {
        cursor: pointer;
        -webkit-transform: rotateX(-180deg);
             -moz-transform: rotateX(-180deg);
                        transform: rotateX(-180deg);
    }
    .click.flip .back {
        -webkit-transform: rotateX(0deg);
             -moz-transform: rotateX(0deg);
                        transform: rotateX(0deg);
    }

  /* -- contact panel -- */
  .contact {
    width: 290px;
    height: 240px;
  }

    /* -- diagonal axis rotation -- */
    .diagonal .front {
        -webkit-transform: rotate3d(45,45,0,0deg);
             -moz-transform: rotate3d(45,45,0,0deg);
                        transform: rotate3d(45,45,0,0deg);
    }
    .diagonal .front:hover {
        /* for the patient :) */
        -webkit-transition-duration: 10s;
             -moz-transition-duration: 10s;
                        transition-duration: 10s;

        -webkit-transform: rotate3d(45,45,0,-36deg);
             -moz-transform: rotate3d(45,45,0,-36deg);
                        transform: rotate3d(45,45,0,-36deg);
    }

    .diagonal.flip .front,
    .diagonal.flip .front:hover {
        -webkit-transform: rotate3d(-45,-45,0,150deg);
             -moz-transform: rotate3d(-45,-45,0,150deg);
                        transform: rotate3d(-45,-45,0,150deg);

        -webkit-transition: all .4s ease-in-out;
                        transition: all .4s ease-in-out;
    }

    .diagonal .front .message {
      opacity: 0;
        font-size: 1.4em;
    }
    .diagonal .front:hover .message {
        opacity: .4;
        -webkit-transition-duration: 12s;
             -moz-transition-duration: 12s;
                        transition-duration: 12s;

        -webkit-transition-delay: 4s;
             -moz-transition-delay: 4s;
                        transition-delay: 4s;

        -webkit-transform: translateX(-30px) translateZ(40px) scale(1.4);
             -moz-transform: translateX(-30px) translateZ(40px) scale(1.4);
                        transform: translateX(-30px) translateZ(40px) scale(1.4);
    }
    .diagonal.flip .front .message {
        -webkit-transition-duration: 1s;
                        transition-duration: 1s;
      -webkit-transform: translateZ(0px) scale(.5);
                      transform: translateZ(0px) scale(.5);
    }

    .diagonal .back {
        -webkit-transform: rotate3d(45,45,0,-180deg);
             -moz-transform: rotate3d(45,45,0,-180deg);
                        transform: rotate3d(45,45,0,-180deg);
    }
    .diagonal.flip .back {
        -webkit-transform: rotate3d(45,45,0,-30deg);
             -moz-transform: rotate3d(45,45,0,-30deg);
                        transform: rotate3d(45,45,0,-30deg);
    }

  /* -- swing like a gate -- */
  .swing .front,
  .swing .back {
    width: 140px;
    -webkit-backface-visibility: visible;
             -moz-backface-visibility: visible;
                        backface-visibility: visible;

    -webkit-transition-duration: 1s;
             -moz-transition-duration: 1s;
                        transition-duration: 1s;

    -webkit-transform-origin: 170px 0;
             -moz-transform-origin: 170px 0;
                        transform-origin: 170px 0;
  }
  .swing .front {
    -webkit-transform: rotateY(0deg);
             -moz-transform: rotateY(0deg);
                        transform: rotateY(0deg);
  }
  .swing .back {
    background-color: #555; /* hiding this side, so get darker */
    -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
             -moz-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
  }

  .swing.flip .front {
    background-color: #222; /* hiding this side, so get darker */
    -webkit-transform: rotateY(180deg);
             -moz-transform: rotateY(180deg);
  }
  .swing.flip .back {
    background-color: #80888f;
    -webkit-transform: rotateY(0deg) translateX(198px) translateZ(2px);
             -moz-transform: rotateY(0deg) translateX(198px) translateZ(2px);
  }


    /* -- cosmetics -- */
    .panel .pad {padding: 0 15px; }
    .panel.flip .action {display: none; }
    .block ol li {text-align: left; margin: 0 0 0 28px; }
    .block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
    .block:hover .action {opacity: .7; }
    .circle div {border-radius: 100px; }
    .circle div h2 {padding-top: 3em; text-align: center; }


@media screen and (min-width: 768px) and (max-width: 1024px) {
}