/*	
	======================================================================

	public/elliptical-tactics/main.css

	======================================================================
*/


		#elliptical-tactics {

			text-align: center;
			font-family: Montserrat, Arial, Helvetica, sans-serif;
		}

		.flip-card {
			margin: 50px auto 100px auto;
		  background-color: transparent;
		  width: 500px;
		  height: 300px;
		  border: 1px solid #f1f1f1;
		  border-radius: 15px;
		  perspective: 1000px;
		  cursor: pointer;
		}

		.flip-card-inner {
		  position: relative;
		  width: 100%;
		  height: 100%;
		  text-align: center;
		  transition: transform 0.8s;
		  transform-style: preserve-3d;
		}

		/* Do an horizontal flip when you move the mouse over the flip box container */
		.flip-card-flipped .flip-card-inner {
		  transform: rotateY(180deg);
		}

		/* Position the front and back side */
		.flip-card-front, .flip-card-back {
		  position: absolute;
			z-index: 100;
		  width: 100%;
		  height: 100%;
		  -webkit-backface-visibility: hidden; /* Safari */
		  backface-visibility: hidden;
		}

		.flip-card-front {

		  background-color: #DDD;
		  color: black;
		  border: 1px black solid;
		  border-radius: 15px;
		}

		.flip-card-back {

		  background-color: white;
		  color: white;
		  transform: rotateY(180deg);
		  border: 1px #888 solid;
		  border-radius: 15px;
		}

		.tactic_title {

			position: absolute;
			width: 400px;
			left: 50px;
			font-size: 20px;
			font-weight: 600;
			margin: 0 auto;
		}

		#tactic_solo_title {
	
			top: 50%;
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		#tactic_dual_title {
	
			bottom: 150px;
		}

		#tactic_text {

			position: absolute;
			top: 170px;
			left: 50px;
			width: 400px;
			font-size: 16px;
		}

		#card_back {

			margin-top: 30px;
			margin-left: 5px;
		}
	
		.click_prompt {
	
			position: absolute;
			top: -20px;
			left: -30px;
			z-index: 1000;
			display: none;
		}

		.click_prompt_fade_in_out {
	
			-webkit-animation: click_prompt_fade_in_out_keyframes 5s linear forwards;
			animation: click_prompt_fade_in_out_keyframes 5s linear forwards;
		}

		@-webkit-keyframes click_prompt_fade_in_out_keyframes {

			   0% { opacity: 0; }
			  10% { opacity: 1; }
			  90% { opacity: 1; }
			 100% { opacity: 0; }
		}

		@keyframes click_prompt_fade_in_out_keyframes {

			   0% { opacity: 0; }
			  10% { opacity: 1; }
			  90% { opacity: 1; }
			 100% { opacity: 0; }
		}

/*
	@media only screen and (max-width: 700px) {
	
		.image_frame_right {
	
			float: none !important;
			margin: 20px auto !important;
			text-align: center;
		}
	}

*/