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

:root {--largura-img:140px; --altura-img:280px; --margem-direita:12px; --margem-baixo:15px;}

#mais{display: none}

body {
  font-family: Open Sans;
  font-size: 1.2rem;
  background: #fff;
  color: #fff;
}

.foto{
	width: 120px;
	border: 2px solid;
	border-color: #181818;
	transition: all 3s ease;
}

.center_cartas{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	display: flex;
	padding-bottom: 30px;
}

.horizontal{flex-direction: row;}

.quebra{flex-wrap: wrap;}

.lado{float: left;}

.input{
	width: 320px;
	font-weight: 500;
	background-color: #fff;
	font-size: 1.2rem
}

.input::placeholder{	
	color: #181818;
}

.input_email{
	width: 320px;
	font-weight: 500;
	background-color: #D9D9D9;
	border: none;
	color: #181818;
	font-size: 1.2rem
}

.input_email::placeholder{	
	color: #181818;
}

.txt_cartas{
	font-family: "Ubuntu", sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	text-align: center;
}

.input_atena{
	background-color: #AFAFAF;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;	
}

.input_persefone{
	background-color: #213b5c;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_demeter{
	background-color: #4b8f2b;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_afrodite{
	background-color: #C886B7;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_artemis{
	background-color: #422259;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_hera{
	background-color: #E3BE17;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	font-size: 1rem;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_hestia{
	background-color: #AE0F0F;
	width: var(--largura-img);
	height: var(--altura-img);
	float: none;
	font-size: 1rem;
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_resultado{
	background-color: #2b2b2b;
	width: 100px;
	font-size: 1rem;
	color: #fff;
	float: left;
}

.input_resultado2{
	/*background-color: #2B2B2B;*/
	width: 100px;
	font-size: 1rem;
	font-weight: 400;
	color: #181818;
	float: left;
}

.t_resultado{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	align-items: center;
	justify-content: center;
	display: flex;
	margin-top: 40px;
	font-weight: 500;
	color: #fff;	
	font-size: 1rem;
}

.tabela_deusa{	
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 30px;
	font-weight: 400;
	font-size: 1.2rem;
	color: #181818;
	text-align: left;	
}

.box{
	font-weight: 300;
	color: #000;
	font-size: 1.2rem;
	float: right;
	margin: 5px;
	background-color: #FAFAFA;
}


.borda{	
	border: 0;
	box-shadow: 0;
	outline: 0;	
	background: transparent;
	font-family: "Ubuntu", sans-serif;
	font-weight: 500;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
	text-align: center;
	font-size: 1rem;
	/*width: 100%;*/
}

.borda2{	
	border: none;
	font-weight: 500;
	color: #181818;
	text-align: center;
	font-family: "Ubuntu", sans-serif;
	font-size: 1rem;
}

/* Efeito imagens */


.vencedora {
      transform: scale(1.15); /* 10% maior */
	/*width: 140px;*/
      filter: saturate(1);    /* saturação normal */
    }
    .perdedora {
      transform: scale(0.9); /* 10% menor */
      filter: saturate(0.2); /* 80% menos saturada */
    }

.ferido{
	transform: scale(0.7); /* 10% maior */
	filter: saturate(1);
   /* filter: sepia(3) saturate(0) hue-rotate(-2deg);	*/
}