@charset "utf-8";
/* CSS Document */
/*adapted from https://css3playground.com/3d-flip-cards/ */

  .panel {
    float: left;
	width:100%;
	height: 225px;
    position: relative;
    -webkit-perspective: 600px;
            perspective: 600px;
  }
  /* -- make sure to declare a default for every property that you want animated -- */
  /* -- general styles, including Y axis rotation -- */
  
@media (max-width: 670px) {
.panel {
    float: left;
	width:100%;
	height: 350px;	
	}
}

@media (max-width: 550px) {
.panel {
    float: left;
	width:100%;
	height: 275px;	
	}
}

.panel .front {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: inherit;
    height: inherit;
    border: 1px solid #ccc;
    background: #ffffff;
    /*text-align: center;
    box-shadow: 0 1px 5px rgba(0,0,0,0.9);*/

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

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

    -webkit-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 .front {
    z-index: 900;
    border-color: #eee;
    background-color: #2E5A93;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    cursor: pointer;
    -webkit-transform: rotateY(179deg);
            transform: rotateY(179deg);
  }

  .panel .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
    border: 1px solid #ccc;
    background-color:#2E5A93;
	color:#fff;
	cursor: pointer;  
    /*text-shadow: 1px 1px 1px rgba(0,0,0,0.6);*/

    -webkit-transform: rotateY(-179deg);
            transform: rotateY(-179deg);

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

    -webkit-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;
    background: #2E5A93;

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

    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
  }

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