/*
 * Styles for the Score Panel
 */


.score-panel:after {
	  content: "";
	  display: block;
	  clear: both; }
	  
.scores-container .stars {
	margin: 0;
	padding: 0;
	display: inline-block;
}

.scores-container .stars li {
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 0;
}
.scores-container .stars li:last-child {
	padding-right: 10px;
}
.scores-container .stars .fa-star {
	color: #FFD700;
}
.scores-container .moves, .scores-container .timer {
	display: inline-block;
	margin: 0;
}



@-webkit-keyframes move-up {
  0% {
    top: 25px;
    opacity: 1; }

  100% {
    top: -50px;
    opacity: 0; } }
@-moz-keyframes move-up {
  0% {
    top: 25px;
    opacity: 1; }

  100% {
    top: -50px;
    opacity: 0; } }
@keyframes move-up {
  0% {
    top: 25px;
    opacity: 1; }

  100% {
    top: -50px;
    opacity: 0; } }

.heading:after {
	  content: "";
	  display: block;
	  clear: both; }
.scores-container {
  align-items: center;
  text-align: center; 
  display: inline-block;
  width: 100%;

}

.score-container, .best-container {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 60px;
  background: #bbada0;
  padding: 15px 20px;
  font-size: 25px;
  line-height: 47px;
  font-weight: bold;
  border-radius: 3px;
  color: white;
  margin-top: 8px;
  text-align: center; }
  .score-container:after, .best-container:after {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #eee4da; }
  .score-container .score-addition, .best-container .score-addition {
    position: absolute;
    right: 30px;
    color: red;
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    color: rgba(119, 110, 101, 0.9);
    z-index: 100;
    -webkit-animation: move-up 600ms ease-in;
    -moz-animation: move-up 600ms ease-in;
    animation: move-up 600ms ease-in;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both; }

.score-container:after {
  content: "Score"; }

.best-container:after {
  content: "Best"; }



@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }
@-moz-keyframes fade-in {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }
@keyframes fade-in {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

	@-webkit-keyframes pop-in-big {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 30px; } }
	@-moz-keyframes pop-in-big {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 30px; } }
	@keyframes pop-in-big {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 30px; } }
	@-webkit-keyframes pop-in-small {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 10px; } }
	@-moz-keyframes pop-in-small {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 10px; } }
	@keyframes pop-in-small {
	  0% {
	    -webkit-transform: scale(0) translateZ(0);
	    -moz-transform: scale(0) translateZ(0);
	    transform: scale(0) translateZ(0);
	    opacity: 0;
	    margin-top: -40px; }

	  100% {
	    -webkit-transform: scale(1) translateZ(0);
	    -moz-transform: scale(1) translateZ(0);
	    transform: scale(1) translateZ(0);
	    opacity: 1;
	    margin-top: 10px; } }
/*	
	.app-notice {
	  position: relative;
	  -webkit-animation: pop-in-big 700ms ease 2s both;
	  -moz-animation: pop-in-big 700ms ease 2s both;
	  animation: pop-in-big 700ms ease 2s both;
	  background: #edc53f;
	  color: white;
	  padding: 10px;
	  margin-top: 30px;
	  height: auto;
	  box-sizing: border-box;
	  border-radius: 3px; }
	  .app-notice:after {
	    content: "";
	    display: block;
	    clear: both; }
	  .app-notice .notice-close-button {
	    float: right;
	    font-weight: bold;
		font-size: 25px;
	    cursor: pointer;
	    margin-left: 10px;
	    opacity: 0.7; }
	  .app-notice p {
	    margin-bottom: 0; }
	  .app-notice, .app-notice p {
	    line-height: 20px; }
	  .app-notice a {
	    color: white; }
	  @media screen and (max-width: 520px) {
	    .app-notice {
	      -webkit-animation: pop-in-small 700ms ease 2s both;
	      -moz-animation: pop-in-small 700ms ease 2s both;
	      animation: pop-in-small 700ms ease 2s both;
	
	      } }
*/		  
		  
	  	.game-notice {
	  	  position: relative;
	  	  -webkit-animation: pop-in-big 700ms ease 2s both;
	  	  -moz-animation: pop-in-big 700ms ease 2s both;
	  	  animation: pop-in-big 700ms ease 2s both;
	  	  background: #edc53f;
	  	  color: white;
	  	  padding: 10px;
	  	  margin-top: 30px;
	  	  height: auto;
	  	  box-sizing: border-box;
	  	  border-radius: 3px; }
	  	  .game-notice:after {
	  	    content: "";
	  	    display: block;
	  	    clear: both; }
	  	  .game-notice .notice-close-button {
	  	    float: right;
	  	    font-weight: bold;
	  		font-size: 25px;
	  	    cursor: pointer;
	  	    margin-left: 10px;
	  	    opacity: 0.7; }
	  	  .game-notice p {
	  	    margin-bottom: 0; }
	  	  .game-notice, .game-notice p {
	  	    line-height: 20px; }
	  	  .game-notice a {
	  	    color: white; }
	  	  @media screen and (max-width: 520px) {
	  	    .game-notice {
	  	      -webkit-animation: pop-in-small 700ms ease 2s both;
	  	      -moz-animation: pop-in-small 700ms ease 2s both;
	  	      animation: pop-in-small 700ms ease 2s both;
	
	  	      } }		
	
			  .game-actions {
			  	display: inline-block;
			  	width: 100%;
			  	margin-top: 20px;
			  }
			  .game-actions .end {
			  	float: left;
			  	cursor: pointer;
			  	margin-left: 15px;
			  }
			  .game-actions .end a:hover,
			  .game-actions a.restart-button:hover {
			  	color: inherit;
			  }
			  .game-actions .restart-button {  
			  float: right;
			  cursor: pointer;
			  margin-right: 15px;
			  }