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

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

html {
  scroll-behavior: smooth;
}

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

#mais{display: none}


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

.img{
	border: 2px solid #181818;
	/*border-radius: 6px 6px 6px 6px;	*/
}

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

.horizontal{
	flex-direction: row;
}

.quebra{
	flex-wrap: wrap;
}

.lado{
	float: left;
}

.input{
	width: 320px;
	font-weight: 400;
	font-size: 1.2rem;
}

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

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

.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_zeus{
	background-color: #12CEE4;
	width: var(--largura-img);
	height: var(--altura-img);	
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_poseidon{
	background-color: #000080;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: 15px;
	border-radius: 6px 6px 6px 6px;
}

.input_hades{
	background-color: #272222;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_apolo{
	background-color: #fdc61e;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_hermes{
	background-color: #A2A2A2;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_ares{
	background-color: #B10000;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;
}

.input_hefesto{
	background-color: #DB8819;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	margin-right: var(--margem-direita);
	margin-bottom: var(--margem-baixo);
	border-radius: 6px 6px 6px 6px;	
}

.input_dionisio{
	background-color: #8A00D5;
	width: var(--largura-img);
	height: var(--altura-img);
	float: left;
	border-radius: 6px 6px 6px 6px;
}

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

.input_resultado2{
	width: 100px;
	font-weight: 600; 
	font-size: 1rem;
	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: 400;
	color: #fff;
	font-size: 1rem;
}

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


.tabela_deuses{	
	margin-left: auto;
	margin-right: auto;
	padding-top: 30px;
	padding-bottom: 40px;
	font-weight: 400; 
	color: #181818;
	text-align: left;	
}

.txt_aviso{
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	font-weight: 400;
	font-size: 1rem; 
	color: #181818;
	text-align: center;
	margin-bottom: 2rem;
}

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

.borda2{	
	border: none;	
	font-family: "Ubuntu", sans-serif; 
	color: #181818;
	text-align: center;
	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);	*/
}