@charset "utf-8";
/* CSS Document */

/* -----------------------------------------
 *  Fonts                      
 * ----------------------------------------- */
@font-face {
	font-family: "CaviarDreams";
	src: url("../fonts/CaviarDreams.ttf");	
}

@font-face {
	font-family: "FreeUniversal";
	src: url("../fonts/FreeUniversal-Regular.ttf");	
}

@font-face {
	font-family: "Roboto";
	src=: url("../fonts/Roboto/Roboto-Regular.ttf");
}

/* -----------------------------------------
 *  Geral                     
 * ----------------------------------------- */
* {
	margin: 0;
	padding: 0;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	line-height: 1.2em;
	box-sizing: border-box;
	font-family: "FreeUniversal";
}

h1 {
	font-size: 2em;
	margin-bottom: 1em;
}

body {
}

a {
	text-decoration: none;
}

/* -----------------------------------------
 *  Flexbox e Cubos                      
 * ----------------------------------------- */
.flex-container {
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
}

.flex-container-v {
	display: flex;
	justify-content: space-around;
	flex-flow: column wrap;
}

.header {
	position: fixed;
}

.header p {
	-webkit-transform: scale(1);
	transform: scale(1);
	animation: zoom-in-out 2s infinite linear;
	display: inline-block;
	margin-left: -10px;
}

.cubo {
	position: relative;
	padding: 1em;
	margin-left: 5%;
	width: 65%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-ms-transform: translateZ(-450px);
	-webkit-transform: translateZ(-550px);
	transform: translateZ(-450px);
	-webkit-transition: transform 0.75s;
	transition: transform 0.75s;
}

/* Faces do Cubo */
.pergunta {
	display: flex;
	flex-direction: column;
	position: absolute;
	
	border: 2px solid #099;
	padding: 1em;
	min-height: 100%;
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(197,232,231,1) 62%, rgba(84,193,191,1) 100%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(197,232,231,1) 62%, rgba(84,193,191,1) 100%);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(197,232,231,1) 62%, rgba(84,193,191,1) 100%);
	background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(197,232,231,1) 62%, rgba(84,193,191,1) 100%);
}

.pergunta p {
	align-self: flex-start;	
	max-width: 90%;
	font-size: 1.4em;
	font-weight: bold;
	margin: .5em .6em 1.5em .6em;
	padding: .1em;
}

.pergunta ul {
	display: flex;
	flex-direction: column;
	list-style: none;
}

.respostas li {
	max-width: 100%;
	align-self: flex-start;
	margin: .8em 0 0 .25em;
	transition: ease 0.3s;
}

.respostas a, .respostas a:visited {
	padding: 1em;
	color: #fff;
}

.respostas img {
	max-width: 4em;
	vertical-align: middle;
  background-color: #2D908D;
	box-shadow: 0 0 10px #08DAD5;
	position: relative;
	z-index: 2;
	cursor: pointer;
	
	-webkit-transition-property: color;
  transition-property: background;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.bg-img-hover {
	background: #1D6D6B !important;
}

.bg-errada {
	vertical-align: middle;
	background: #FF2D2D;
}

.bg-correta {
	vertical-align: middle;
	background: #00cc66;
}

.descritor:before {
	content: "";
	position: absolute;
	bottom: 98%;
	left: 5%;
	border: .5em solid #EFFB58;
	z-index: 1;
	border-color: transparent transparent rgb(240,251,88) transparent;
}

.descritor {
	z-index: 3;
	padding: 8px;
	margin-right: auto;
	display: none;
	position: relative;
	border-radius: .6em;
	transform: translate(0, -100%);
	transition: transform .5s ease-out;
	box-shadow: 0 0 .3em;
	background: #EFFB58;
	background: -ms-linear-gradient(top, rgba(240,251,88,1) 0%, rgba(235,141,26,1) 100%);
	background: -moz-linear-gradient(top, rgba(240,251,88,1) 0%, rgba(235,141,26,1) 100%);
	background: -webkit-linear-gradient(top, rgba(240,251,88,1) 0%, rgba(235,141,26,1) 100%);
	background: linear-gradient(top, rgba(240,251,88,1) 0%, rgba(235,141,26,1) 100%);
}

.ajuda {
	background: #f8f8f8;
	align-self: flex-end;
	box-shadow: inset 0 0 10px;
	border-radius: .4em;
	width: 20%;
	margin: 1em;
	padding: 1em;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-around;
	min-width: 5%;
}

.cubo section {
	min-width: 400px;
}

.ajuda a, .ajuda a:visited {
	margin: 1em;
	padding: .75em .5em;
	color: #000;
}

.ajuda .pular a:before { border-color: #F7EF29; }
.ajuda .pular a { background-color: #F7EF29; }

.ajuda .especialistas a:before { border-color: #a8c093; }
.ajuda .especialistas a { background-color: #a8c093; }

.ajuda .universitarios a:before { border-color: #9f9eb5; }
.ajuda .universitarios a { background-color: #9f9eb5; }

.ajuda .comunidade a:before { border-color: #F72D7E; }
.ajuda .comunidade a { background-color: #F72D7E; }

.ajuda > div {
	transition: all 0.3s ease-in-out;
}


#modal-1 a {
	float: left;
	padding: .8em 1em;
	background-color: #eee;
	border: 2px outset #a37445;
	color: #333;
	margin: 2em;
}

#modal-1 a:hover {
	cursor: pointer;
	border-color: #7a5734;
	background-color: #F2F2F2;
}

.carta {
	border: 10px double #fff;
	border-radius: 6px;
	width: 130px;
	height: 170px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	background-color: #1C617F;
	transform: translate(50%, 50%);
	transition: all .8s ease-in, opacity .1s ease-in;
	opacity: 0;
	margin: 4em 2em;
}

.carta > div {
	position: absolute;
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	
	display: flex;
	align-items: center;
}

.carta .frente {
	height:100%;
	width: 100%;
}

.carta .frente img {
	width: 100%;
	align-self: center;
}

.carta .verso img {
	width: 100%;
}

.carta .verso {
	transform: rotateY(180deg);
	padding: 10%;
	height: 100%;
	align-self: center;
}

.blocked:hover {
	cursor: url(../img/icons/no.png), url(../img/icons/no.png), auto;
}

#especialista-1, #especialista-2, #especialista-3 {
	padding: 1em 2em;
	box-shadow: inset 0 0 30px #4E361D;
	background-color: #b7834e;
	margin: 2em;
}

.flex-container .ico64-executive {
	position: absolute;
}

.to-right {
	opacity: 0;
	vertical-align: middle;
	transition: all 1s ease;
}

.to-right img {
	width: 100px;
	vertical-align: middle;
	background-color: #4DA29C;
  border: 6px double #fff;
	border-radius: 6px;
	margin-left: -10px;
}

.ico64-executive:after {
	content: "";
	border: 10px solid;
	right: -7px;
	top: 4px;
	border-radius: 2px;
	position: absolute;
	border-color: transparent #fff transparent transparent;
	opacity: 0;
	transition: all .3s ease;
	transition-delay: .65s;
}

.show:after {
	opacity: 1;
}

#placas-1, #placas-2, #placas-3, #placas-4 {
	margin: 0 1em 1em 1em;
}

.placa {
	width: 20%;
	border: 1px solid #eee;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: all 0.85s ease-in-out;
}

.placa > div { 
	-webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	display: flex;
	align-items: center;
}

.placa[data-genero=m] .frente {
	background-color: #292865;
}

.placa[data-genero=f] .frente {
	background-color: #981111;
}

.placa img {
	width: 50%;
	margin: 0 auto;
	padding: 1em 0;
}

.placa .verso {
	transform: rotateY(180deg);
	position: absolute;
	background-color: #941C69;
	top:0;
}

.modal {
	z-index: -1;
	padding: 1em;
	/*background-color: #e74c3c;*/
	background: rgba(204, 146, 87, 1);
	border: 3px solid #8e663c;
	box-shadow: 0 0 10px #ECECEC;
	transform: scale(3);
	opacity: 0;
	top: 0;
	transition: all .3s ease-in-out;
	position: fixed;
	color: #fff;
}

.modal h2 {
	font-size: 1.6em;
	text-align: center;
	padding-bottom: .3em;
	margin-bottom: 1em;
	border-bottom: 1px solid #333;
}

.stats {
	text-align: center;
}

.stats div {
	color: #F8F8F8;
	font-weight: bold;
	display: inline-block;
	padding: .4em .5em;
	border-bottom: 2px solid;
	border-radius: 1em;
	margin: 0 .5em;
	opacity: 0;
	transition: opacity 2s ease-in-out 2s;
}

.mask {
	z-index: -1;
	position: absolute;
	left:0;
	top: 0;
	/*background: rgba(143,27,15,0.8);*/
	background: rgba(204, 146, 87, 0.8);
}

.zoom-in {
	opacity: 1;
	z-index: 99;
}


/* -----------------------------------------
 *  Controles                      
 * ----------------------------------------- */
#proximo {
	display: none;
}

#cheat {
	position: absolute;
	padding: .5em;
	margin: .5em;
	bottom: 0;
	right: 0;
	color: #fcfcfc;
	background: rgba(0,0,0,0.3);
	border-radius: .25em;
	transition: all ease-in 0.1s;
	display:none;
}

#cheat:hover {
	color: fff;
	background: rgba(0,0,0,0.8);
}

.prox {
	opacity: 0;
}

.gameover {
	box-sizing: content-box;
	font-weight: bold;
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: scale(8);
	-webkit-transform: scale(8) translate(0%, 100%);
	transform: scale(8) translate(0%, 100%);
	opacity: 0;
	z-index: -1;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s;
	color: #AA0004;
	display: none;
	background: #fefefe;
	border: 4px solid #ccc;
	box-shadow: 0 0 20px #333;
	padding: 2em 4em;
	border-radius: 10px;
}

.gameover div {
	display: block;
	margin: 2em;
	padding: 2em;
	text-align: center;
}

.gameover a {
	width: 64px;
	height: 64px;
}

.gamewin h1 {
	text-align: center;	
}

.gamewin {
	box-sizing: content-box;
	font-weight: bold;
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: scale(8);
	-webkit-transform: scale(8) translate(0%, 100%);
	transform: scale(8) translate(0%, 100%);
	opacity: 0;
	z-index: -1;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s;
	color: #AA0004;
	display: none;
	background: #fefefe;
	border: 4px solid #ccc;
	box-shadow: 0 0 20px #333;
	padding: 2em 4em;
	border-radius: 10px;
}

.gamewin div {
	display: block;
	margin: 2em;
	padding: 2em;
	text-align: center;
}

@media (max-width: 900px) {
	.cubo {
		margin-top: 5%;
		width: 100%;
	}
	
	.ajuda {
		margin-top: 40%;
		width: 100%;
	}
}