/* ------------------------------------------------------------ container setup ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* the body affects all elements inside of it */
body {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Lato", "Open Sans", Arial, Helvetica, sans-serif;
	font-weight: 900;
	text-align: center;
	overflow: hidden;
	background-image: url("/memory/assets/match-learn-sales/img/background.jpg");
	background-position: center;
	background-size:cover;
	background-repeat:no-repeat;
}

/* contains all game elements */
#game-container {
	width: 1200px;
	height: 785px;
	position: relative;
	text-align: center;
}

/* sound and restart */
#toggle-sound svg,
#restart-button svg {
	fill: #fff;
	margin: 1vh;
  	width: 5vh;
  	min-width: 30px;
}

#iziigame-link a {
    display: none;
}

/* the title of the game */
#title {
	height: 200px;
	background-image: url("/memory/assets/match-learn-sales/img/title.png");
	background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
	margin: auto;
	margin-top: 10px;
}


/* the intro container */
#intro-container {
	width: 880px;
    height: 260px;
    z-index: 1000;
    position: relative;
    
    margin: auto;
   
}

#intro-description-1 {
	font-size: 3em;
    padding: 0px 50px;
    margin: auto;
    margin-top: 50px;
    color: white;
}


#intro-button,
#back-button,
#go-back-to-board {
    font-size: 1.8em;
    margin: 1em auto 0.5em;
    padding: 0.3em 0.8em;
    border: 0;
   
    cursor: pointer;
    background-color: #e5258e;
      box-shadow: 0px 3px 6px #0000006b;
    color: white;
    position: relative;
    width: max-content;
}

#back-button {
	margin: -250px auto;
	display: none;
	z-index: 100;
}


#go-back-to-board {
	display: none;
}

.game-finished #go-back-to-board {
    display: block;
    font-size: 1em;
    animation-name: pulsingGrowing;
    animation-delay: 3s;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
    animation-iteration-count: infinite;
}




/* the board container */
#board-container {
	width: 1100px;
	height: 400px;

	margin: 20px auto;

	position: relative;

	animation-name: showGame;
	animation-duration: 1s;
	animation-timing-function: ease-in;
}


/* the prize container */
#prize-container {
	position: absolute;
	font-size: 3em;
	line-height: 66px;
    font-weight: normal;
       border-radius: 8px;
	width: 56%;
    top: 200px;
    left: 23%;
	padding: 15px;
	color: white;
	display: none;
	opacity: 0;
	z-index: 5;
}

.prize-image {
	background-image: url("/memory/assets/match-learn-sales/img/prize-image.png");
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
	height: 134px;
	display:none;
}

.prize-header {
	color: white;
}

.prize-name {
	color: white;
	display: block;
}
.prize-name-value {
    margin: 0;
    padding: 0;
	line-height: 1;
	display: inline-block;
}

.prize-name-points {
    font-weight: bold;
	font-size: 1.5em;
	color: white;
	display: inline-block;
	margin: 5px auto 10px 20px;
}

.prize-points-description{
	font-size: 0.6em;
	color: #fbad18;
	display: block;
}

.prize-description {
	display: none;
}




/* reveals the prize container at the end */
.game-finished #prize-container {
	animation-name: showLastScreen;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
	animation-fill-mode: forwards;
	display: block;
}

.game-finished #back-button {
	animation-name: showLastScreen;
	animation-duration: 1.5s;
	animation-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.850);
	animation-fill-mode: forwards;
	display: block;
}

.game-over-lose .prize-name {
	color: white;
    font-size: 0.8em;
    line-height: 30px;
}

.game-over-lose .prize-points-description {
	font-size: 0.6em;
    color: #fbad18;
	display: block;
}

.game-over-lose #back-button {
	display: block;
}





/* ------------------------------------------------------------ end of container setup ------------------------------------------------------------ */









/* ------------------------------------------------------------ shared item info ------------------------------------------------------------ */
.small {
	width: 111px;
	height: 150px;
}

.medium {
	width: 138px;
	height: 195px;
}

.large {
	width: 170px;
	height: 240px;
}


.card {
	cursor: pointer;
	position: absolute;
    box-shadow: 3px 3px 10px #000000;
	transition: all;
	transition: cubic-bezier(0.25, 0.45, 0.45, 1.0) 0.5s;
	-webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	visibility:visible;
	backface-visibility: hidden;
}

.front {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
}

.layout-1 {
    display: flex;
	align-items: center;
}

.left-content {
    margin-right: 40px;
}

.right-content {
    text-align: left;
    font-size: 20px;
    font-weight: normal;
}

#modal-body {
    padding: 20px;
}

.card-title {
	font-size: 30px;
    font-weight: 900;
    padding: 0 0 0.5rem 0;
    margin-top: auto;
}


.back {
	transform: rotateY(360deg);
	background-size: cover;
	background-position: center;
	background-image: url("/memory/assets/match-learn-sales/img/back-card.png");
}
#card-image-0, #card-image-1, #card-image-2, #card-image-3, #card-image-4,#card-image-5 {
	width: 240px;
    height: 260px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.front-0 {
	background-image: url("/memory/assets/match-learn-sales/img/1.png");
}

.front-1 {
	background-image: url("/memory/assets/match-learn-sales/img/2.png");
}

.front-2 {
	background-image: url("/memory/assets/match-learn-sales/img/3.png");
}

.front-3 {
	background-image: url("/memory/assets/match-learn-sales/img/4.png");
}

.front-4 {
	background-image: url("/memory/assets/match-learn-sales/img/5.png");
}

.front-5 {
	background-image: url("/memory/assets/match-learn-sales/img/6.png");
}

#card-image-0 {
	background-image: url("/memory/assets/match-learn-sales/img/1-popup.png");
}

#card-image-1 {
	background-image: url("/memory/assets/match-learn-sales/img/2-popup.png");
}

#card-image-2 {
	background-image: url("/memory/assets/match-learn-sales/img/3-popup.png");
}

#card-image-3 {
	background-image: url("/memory/assets/match-learn-sales/img/4-popup.png");
}

#card-image-4 {
	background-image: url("/memory/assets/match-learn-sales/img/5-popup.png");
}

#card-image-5 {
	background-image: url("/memory/assets/match-learn-sales/img/6-popup.png");
}

.game-finished .holder {
	cursor: pointer;
	margin-top: 70px;
}

.holder {
	position: relative;
	display: inline-block;

	margin: 10px 10px 10px 10px;

	transform: translateY(0px) translateX(0px);

	transition: all;

	transition: cubic-bezier(0.25, 0.45, 0.45, 1.0) 0.5s;
}

.game-finished .holder:hover {
    transform: scale(1.15);
}

.matched {
	pointer-events: none;

	cursor: none;

	animation-name: lockIn;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.78, -0.550, 0.265, 1.5);
	animation-fill-mode: forwards;
}
/* ------------------------------------------------------------ end of shared item info ------------------------------------------------------------ */


/* ------------------------------------------------------------ specific item info ------------------------------------------------------------ */
#card-collections {
	height: 0px;
}

.collections {
	top: 350px;

	position: relative;

	display: none;

	z-index: 4;

	margin: 10px 10px 10px 10px;
}


#collection-0 {
	background-image: url("/memory/assets/match-learn-sales/img/1.png");
}

#collection-1 {
	background-image: url("/memory/assets/match-learn-sales/img/2.png");
}

#collection-2 {
	background-image: url("/memory/assets/match-learn-sales/img/3.png");
}

#collection-3 {
	background-image: url("/memory/assets/match-learn-sales/img/4.png");
}

#collection-4 {
	background-image: url("/memory/assets/match-learn-sales/img/5.png");
}

#collection-5 {
	background-image: url("/memory/assets/match-learn-sales/img/6.png");
}


#modal-content {
	background-color: white;
    color: #000000;
    animation: bounceIn 1s forwards;
    box-shadow: 0px 3px 15px #000000fa;
    border: 3px solid #6982df;
    border-radius: 8px;
    margin-top: 155px;
}


#modal-close-btn:hover {
    color: #009FC7;
}

#modal-close-btn {
    color: white;
    z-index: 99999;
    border-radius: 50px;
    box-shadow: 0px 0px 10px black;
    padding: 0px 12px 4px 12px;
    margin: -40px;
    background-color: #262626;
    border: 3px solid #ffffff;
}


.display_board #cardHolder-6.holder, .display_board #cardHolder-7.holder, .display_board #cardHolder-8.holder, .display_board #cardHolder-9.holder, .display_board #cardHolder-10.holder, .display_board #cardHolder-11.holder {
    display: none;
}


/* ----------------------------------------------------------- animations ------------------------------------------------------------ */

/* ------------- event listeners ------------- */

.hide {
	display: none !important;
}
.getRidOfCards {
	animation-name: cardVanish;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

/* ------- on click events ------- */

/* keyframes */

/* move screen elements */
/* shows the game */



@keyframes lockIn {
	0% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
	100% {
		transform: scale(0.7);
		box-shadow: 0 0 30px 0px rgb(213 188 99 / 85%);
	}
}

@keyframes cardPopUp {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes showGame {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



@keyframes cardVanish {
	0% {
		opacity: 1;
		transform: rotateY(0deg);
	}
	100% {
		opacity: 0;
		transform: rotateY(180deg);
	}
}



/* shows the last screen */
@keyframes showLastScreen{
	from {
		opacity: 0;
		transform: scale(0.95, 0.95);
	}
	to {
		opacity: 1;
		transform: scale(1.2, 1.2);
	}
}

@keyframes bounceIn {
   0% { 
      opacity: 0; 
      transform: scale(.3);
   }
   50% { 
      opacity: 1;
      transform: scale(1.05);
   }
   70% {
      transform: scale(.9);
   }
   100% {
      transform: scale(1);
   }
}

@keyframes pulsingGrowing{
	0% {
    	box-shadow: 0px 0px 10px darkgreen;
		transform: scale(1)
	}
	50% {
		box-shadow: 0px 0px 30px black;
		transform: scale(1.2)
	}
	100% {
		box-shadow: 0px 0px 10px darkgreen;
	}

}

/* ------------------------------------------------------------ end of animations ------------------------------------------------------------ */

/* ------------------------------------------------------------ start of peak performance preloader  ------------------------------------------------------- */



#game-loader-wrapper .game-loader-background,
#mission-loader-wrapper .mission-loader-background {
  background-size: cover;
  background-position: center;

}

@media screen and (orientation: portrait) {
    #game-loader-wrapper .game-loader-background,
    #mission-loader-wrapper .mission-loader-background {
        background-image: url("/memory/assets/match-learn-sales/img/preloader-custom-background-portrait.jpg");
    }
}


@media screen and (aspect-ratio: 1/1) {
    #game-loader-wrapper .game-loader-background,
    #mission-loader-wrapper .mission-loader-background {
        background-image: url("/memory/assets/match-learn-sales/img/preloader-custom-background-portrait.jpg");
    }
}

#game-loader, 
#mission-loader,
#game-loader::before, 
#mission-loader::before,
#game-loader::after, 
#mission-loader::after {
	border-top-color: #009FC7;
}