.container {
	height: calc(100vh - 70px);
}

.btn {
	color: #333;
	background-color: #ddd;
}

/*			Intro			*/
	.loading-icon {
		height: 100px;
		width: 100px;

		margin: 0 auto;
		text-align: center;
	}

	.loading-icon img {
		height: 100%;
		width: 100%;
	}
/**********************************/

/*			Card Flip Animation			*/
	.card {
		position: absolute;

		perspective: 1000px;
		-webkit-perspective: 1000px;
	}

	.card img {
		pointer-events: none;
	}

	.card * {
		user-select: none;
	}

	.top-card {
		z-index: 10;
		cursor: pointer;
	}

	.card-inner {
		width: 100%;
		height: 100%;
		position: absolute;

		transition: 0.6s;
		-webkit-transition: 0.6s;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
	}


	.card.flip>.card-inner {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}

	.card-inner > div {
		position: absolute;
		width: 100%;
		height: 100%;

		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	.card-back {
		z-index: 2;
		background-color: #FFFFFF;

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

	.card-front {
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}
/**********************************/

/*			Card Swipe Animation 			*/
	.deck .card.card_finished {
		-webkit-transform-origin: 50% 300%;
		transform-origin: 50% 300%;
	}

	.deck .card.card_finished_right {
		animation: cardSwipeRight 0.5s forwards;
		-webkit-animation: cardSwipeRight 0.5s forwards;
	}
		@keyframes cardSwipeRight {
			to {
				opacity: 0;
				-webkit-transform: rotate3d(0,0,1,20deg);
				transform: rotate3d(0,0,1,20deg);
			}
		}

		@-webkit-keyframes cardSwipeRight {
			to {
				opacity: 0;
				-webkit-transform: rotate3d(0,0,1,20deg);
				transform: rotate3d(0,0,1,20deg);
			}
		}

	.deck .card.card_finished_left {
		animation: cardSwipeLeft 0.5s forwards;
		-webkit-animation: cardSwipeLeft 0.5s forwards;
	}
		@keyframes cardSwipeLeft {
			to {
				opacity: 0;
				-webkit-transform: rotate3d(0,0,1,-20deg);
				transform: rotate3d(0,0,1,-20deg);
			}
		}

		@-webkit-keyframes cardSwipeLeft {
			to {
				opacity: 0;
				-webkit-transform: rotate3d(0,0,1,-20deg);
				transform: rotate3d(0,0,1,-20deg);
			}
		}
/**********************************/


/*			Card Style				*/
	.game {
		position: relative;
	}

	.deck {
		margin: 0 auto;
	}

	.deck, .card, .trivia-card {
		width: 344px;	/*Because of border*/
		height: 480px; /*Because of border*/
	}

	.card-inner > div { /* card-front, card-back*/
		border-radius: 17px;
		border: 2px solid #777;

		text-align: center;
	}

	.card-footer {
		position: absolute;
		bottom: 0;
		border: none !important;
	}

  /*game-card-front and trivia*/
  .inner-border-design {
    position: relative;
    width: calc(100% - 20px);
    height: calc(100% - 20px);

    margin: 10px;
    padding: 10px;

    border: 6px solid #AEDDF5;
    border-radius: 10px;
  }

  .hmmrd-footer {
    font-size: 18px;
    color: #D1D1D1;
  }

	/**************************/

  /* Trivia Card */
    .trivia-card {
      position: absolute;
      top: 0;
      /*left: -40px;*/
      z-index: 20;

      color: white;
    }

    .trivia-card .card-front, .trivia-card .card-back{
      background-color: #777;
      border: none;
    }

    .trivia-title  {
      margin-top: 20px;
    }

    .trivia-subtitle {
      font-size: 20px;
      margin-bottom: 30px;
    }
    .trivia-body {
      font-size: 18px;
    }
    .trivia-footer {
      width: calc(100% - 20px);
      text-align: center;
      margin-bottom: 5px;
    }
  /**************************/

	/*			Card Front 				*/
		.game-card .card-front {
			background-color: #FFFFFF;
			color: #494949;
		}

		.card-header {
			margin-top: 20px;
		}

			.card-title {
				font-size: 36px;
				margin-bottom: 0px;
			}

		.card-body {
			margin: 30px 20px 0;
			font-size: 18px;
		}

		.card-front-footer {
			width: calc(100% - 20px);
			margin-bottom: 5px;

			text-align: center;
		}
			.drink-symbol {
				height: 50px;
				margin-bottom: 15px;
			}
				.drink-symbol img {
					height: 100%;
					content: url('img/drink_icon.png');
				}
			.nodrink-symbol {
				height: 70px;
				margin-bottom: 15px;
			}
				.nodrink-symbol img {
					height: 100%;
					content: url('img/nodrink_icon.png');
				}
	/**************************/

	/*			Card Back 				*/
		.game-card .card-back {
			background-color: #5ebceb;
		}

		.card-back-img-cont {
			position: absolute;
			height: 100%;
			width: 100%;

      border-radius: 15px;
      border: 10px solid white;
		}

		.card-back-img {
			height: 100%;
			width: 100%;
		}

		.card-back-footer {
			height: 50px;
			width: calc(100% - 58px);
			margin-left: 29px;
			margin-right: 29px;
			margin-bottom: 20px;
		}

		.card-back-footer img {
			position: absolute;
			height: 100%;
		}
	/**************************/

	@media screen and (max-height: 700px) {
		.deck, .card, .trivia-card {
			width: 240px;
			height: 360px;
		}

		/*  Card Front    */
			.card-front, .trivia-card > div > div { 
				padding: 5px;
			}

			.card-front-inner {
				padding: 5px;
				border: 8px solid white;
			}

      .inner-border-design {
        position: relative;
        width: calc(100% - 10px);
        height: calc(100% - 10px);

        margin: 5px;
        padding: 5px;

        border: 6px solid #AEDDF5;
        border-radius: 10px;
      }

			.card-header {
				margin-top: 10px;
			}

      .card-title {
        font-size: 22px;
      }

      .drink-symbol {
        height: 40px;
      }

      .nodrink-symbol {
        height: 56px;
      }

			.card-body {
        margin: 20px 10px 0;
				font-size: 14px;
			}

      .card-front-footer {
        width: calc(100% - 10px);
      }

      .hmmrd-footer{
        font-size: 12px;
      }

		/******************/

		/*  Card Back     */
      .card-back-footer {
        width: calc(100% - 48px);
        margin-left: 24px;
        margin-right: 24px;
      }
		/******************/

    /*  Trivia Card */
      .trivia-title {
        margin-top: 10px;
      }
      .trivia-subtitle{
        font-size: 16px;
        margin-bottom: 20px;
      }
      .trivia-body {
        font-size: 14px;
      }
      .trivi
    /*****************/
	}

/**********************************/

/*		  	Controls 			*/
	.controls-container {
		width: 100%;
		text-align: center;

		margin-top: 20px;
	}

	.controls-container .btn {
		min-width: 110px;
	}

  .trivia-cycle-btn {
  }
/**********************************/