.panel {
			float: left;
			/*width: 200px;
			height: 200px;*/
			position: relative;
			
			-webkit-perspective: 600px;
			-moz-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;
			background-color: #F0F0F0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: auto;
			left: 0;
			z-index: 900;
			width: 100%;
			height: 100%;

			-webkit-transform: rotateX(0deg) rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateX(0deg) rotateY(0deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		.panel.flip .front, .panel:hover .front, .panel:focus .front, .panel:focus-within .front {
			z-index: 900;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}

		.front:focus {
			z-index: 900;
			-webkit-transform: rotateY(180deg);
			-moz-transform: rotateY(180deg);
		}

		.dark_blue a:focus .a_hover_color {
			outline: 2px solid #4d4d4d;
		}

		.dark_blue a:focus {
			outline: none;
		}

		.panel .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: inherite; 
			
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			-moz-transform: rotateY(-180deg);
			-moz-transform-style: preserve-3d;
			-moz-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			-o-transition: all .4s ease-in-out;
			-ms-transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
		}
		
		.panel.flip .back, .panel:hover .back, .panel:focus .back {
			z-index: 1000;

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

		.front:focus ~ .back {
			z-index: 1000;

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

 
		
		
		/* -- 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; }