@font-face {
	font-family: GothamBold;
	src: url(NotoSans-Black.ttf);
}

@font-face {
	font-family: GothamSemi;
	src: url(EastmanCondensedMedium.ttf);
}

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	font-family: GothamSemi;

}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	background-image: url(../img/bg1.jpg) !important;
	background-color: #FA568F;
	background-size: cover !important;
	background-position: center;
	width: 100%;
	min-height: 100vh;
	height: 100vh;
	max-height: 100vh;
}

.container {
	/*display: flex;*/
	/*flex-flow: column wrap;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*margin-top: 20px;*/
	/*margin-left: 20px;*/
	/*padding: 20px;*/
	padding-bottom: 0px !important;
}

#logo{
	position: absolute;
	top: 10% !important;
	left: 50% !important;
	transform: translateX(-50%);
}

#voltar{
	display: inline-block;
	padding: 15px;
	border-radius: 2vw;
	color: #011453;
	background: white;
	font-size: 1.5vw;
	position: absolute;
	top: 1vw;
	margin: 3.5vw auto;
	left: 2vw;
}

p{
	margin: 0;
}

h1 {
	font-weight: 300;
	font-family: GothamBold;
	line-height: 100%;
	color: white;
}

.show {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Score Panel */

.score-panel {
	position: fixed;
	width: 100%;
	bottom: 2vh;
	left: 0;
	display: flex;
	flex-flow: row wrap;
	text-align: left;
	/*background: #fff;*/
	padding: 15px;
	padding-bottom: 9px;
	border-top-right-radius: 10px;
}

.stars {
	padding: 0;
	margin-top: -5px !important;
}

.stars li {
	list-style: none;
	display: inline-block;
}

.fa-star {
	color: #ccc;
}

.fa-star.shine {
	color: #ffde00;
}

.score-panel .restart {
	float: right;
	cursor: pointer;
	margin-top: -5px !important;
}

#div_timer{
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 100vh;
	padding: 3vw;
}

.timer{
	color: white;
	font-size: 3vw;
	text-align: left;
}

.moves{
	position: absolute;
	bottom: 0;
	right: 2.5vw;
	color: white;
	margin: 3.5vw auto;
	line-height: 3vw;
}

.counter{
	font-size: 3vw;
}

.stars,
.moves,
.timer {
	/*margin: 0 15px;*/
}

.moves, .timer{
	font-family: GothamBold;
	line-height: 100%;
}

/* Deck + Cards */

.deck {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: calc(75vw);
	max-width: 100%;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	/*background: rgba(255, 255, 255, 0.8);*/
	/*background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);*/
	/*padding: 10px;*/
	border-radius: 11%;
	box-sizing: border-box;
	/*box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);*/
}

@media all and (max-width: 768px) {

	.deck {
		width: calc(96vw);
		height: calc(96vw);
	}

}

.deck .card {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(30%);
	/*background: #2f2951;*/
	/*background: #2e3d49;*/
	font-size: 0;
	overflow: hidden;
	color: white;
	cursor: pointer;
	border-radius: 11%;
	box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
	margin: 1%;
}

.card img{
	max-width: 0;
	max-height: 0;
}

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

.deck .card.open {
	transform: rotateY(0);
	box-shadow: 0px 0px 20px #8e51a8;
	/*background: #02b3e4;*/
    /*background: #e40046;*/
    cursor: default;
	animation-name: flipInY;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
}

.deck .card.close {
	transform: rotateY(0);
	animation-name: inversoFlipInY;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-duration: .75s;
}

.deck .card.show {
	font-size: 32px;
}

.deck .card.show img, .deck .card.match img {
	max-width: 100%;
	max-height: 100%;
}

.deck .card.show img.f, .deck .card.match img.f {
	max-width: 0;
	max-height: 0;
}

.deck .card.match {
	cursor: default;
	box-shadow: 0px 0px 20px #A2D45E;
	/*background: #02ccba;*/
    /*background: #e40046;*/
    font-size: 32px;
	animation-name: rubberBand;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	animation-duration: .75s;
}

.deck .card.unmatched {
	animation-name: pulse;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	animation-duration: .75s;
	box-shadow: 0px 0px 20px #e2043b;
	/*background: #e2043b;*/
    /*background: #e40046;*/
}

.deck .card.disabled {
	pointer-events: none;
}

/* Congrats Popup */

#congrats-popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.7);
	visibility: hidden;
	opacity: 0;
	font-family: GothamBold;
}

#congrats-popup .popup {
	background: white;
	margin: 20px;
	padding: 40px;
	border-radius: 10px;
	text-align: center;
}

#congrats-popup h2 {
	margin: 0;
}

#congrats-popup .summary {
	margin: 40px 0;
	font-size: 1.25rem;
}

#play-again {
	background-color: #2e3d49;
	font-size: 1.25rem;
	color: white;
	padding: 20px 20px 10px 20px;
	border-radius: 10px;
	border: none;
	font-family: GothamBold;
	line-height: 100%;

}

#play-again:hover {
	background-color: #02ccba;
	cursor: pointer;
}

/* Responsive */

@media only screen and (min-width: 768px) {

	.deck {
		/*padding: 20px;*/
	}

	.deck .card {
		width: 30%;
		margin: 1%;
	}

}


/* Animations */

@keyframes inversoFlipInY {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, 20deg);
		animation-timing-function: ease-in;
	}

	60% {
		transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
		opacity: 1;
	}

	80% {
		transform: perspective(400px) rotate3d(0, 1, 0, 5deg);
	}

	to {
		transform: perspective(400px);
	}
}

@keyframes flipInY {
	from {
		transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
		animation-timing-function: ease-in;
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
		animation-timing-function: ease-in;
	}

	60% {
		transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
		opacity: 1;
	}

	80% {
		transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
	}

	to {
		transform: perspective(400px);
	}
}

@keyframes rubberBand {
	from {
		transform: scale3d(1, 1, 1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, .95, 1);
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1);
	}

	50% {
		transform: scale3d(1.2, 1.2, 1.2) ;
		animation-timing-function: ease-in;
	}

	to {
		transform: scale3d(1, 1, 1);
	}
}

#avancar{
	text-align: center;
	width: 100%;
}

form label{
	color: #fff;
	text-align: left;
	font-size: 3vw;
}

form input[type=text], form input[type=email], form input[type=tel], form input[type=number]{
	width: 100%;
	font-size: 2.5vw;
	padding: 1.5vw;
	background: rgba(255, 255, 255, 1);
	border: none;
	border-radius: 0 0 2.5vw 0;
	margin-bottom: 2vw;
	color: black;
	line-height: 100% !important;
}