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

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

#pagina {
	display: none;
}

body {
	margin: 0px;
	background-image: url("../images/footer_bg_skewed.png");
	background-repeat: no-repeat;
	background-position: center 110%;
	background-color: #efe8e4;
}

.logo {
	position: fixed;
	top: 20px;
	right: 20px;
	height: 132px;
	width: 120px;
}

.portrait_centered {
	position: fixed;
	bottom: 60px;
	left: 50%;
	margin-left: -130px;
	width: 260px;
}

.code {
	text-align: center;
	margin-top: 300px;
}

.input {
	display: inline-block;
	width: 300px;
	font-family: "Poppins-Bold";
	font-size: 40px;
	background: #ffffff;
	border: 3px solid #d0b7a6;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	outline: none;
	text-transform: uppercase;
}

.button {
	transition: 0.2s;
}

.button:hover {
	cursor: hand;
	cursor: pointer;
	filter: brightness(110%);
	transition: 0.2s;
}

.button:active {
	cursor: hand;
	cursor: pointer;
	filter: brightness(90%);
	transition: 0.2s;
}

.button2 {
	transition: 0.2s;
}

.button2:hover {
	cursor: hand;
	cursor: pointer;
	filter: brightness(130%);
	transition: 0.2s;
}

.button2:active {
	cursor: hand;
	cursor: pointer;
	filter: brightness(90%);
	transition: 0.2s;
}

.button_inactive {
	filter: brightness(50%);
	transition: 0.2s;
}

.button_highlight {
	filter: brightness(150%);
	transition: 0.2s;
}

.button_space_40 {
	margin-top: 40px;
}

.characters {
	width: 75%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
}

.char {
	text-align: center;
}

.char_img {
	height: 100px;
	width: 100px;
}

.code_input {
	width: 80px;
	height: 100px;
	display: inline-block;
	font-family: "Poppins-Bold";
	font-size: 40px;
	background: #ffffff;
	border: 1px solid #d0b7a6;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	outline: none;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.arrow {
	align-self: flex-start;
	margin-left: -130px;
	font-family: "Poppins-Bold";
	font-size: 14px;
	text-align: right;
	padding-top: 20px;
}

.arrow2 {
	align-self: flex-start;
	margin-left: 0px;
	font-family: "Poppins-Bold";
	font-size: 14px;
	text-align: right;
	padding-top: 20px;
}

.arrow2_1 {
	align-self: flex-start;
	margin-left: -200px;
	font-family: "Poppins-Bold";
	font-size: 14px;
	text-align: right;
	padding-top: 40px;
}

.arrow3 {
	align-self: flex-start;
	font-family: "Poppins-Bold";
	font-size: 14px;
	text-align: right;
}

.arrow_text {
	text-align: center;
}

.submit_button {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: row;
}

.img_slide {
	opacity: 0;
	transition: 0.5s;
	margin-top: 50px;
}

.button_right_bottom {
	position: fixed;
	right: 40px;
	opacity: 0;
	transition: 0.5s;
	bottom: 50px;
}

.text {
	opacity: 0;
	transition: 0.5s;
	width: 900px;
	margin-top: 50px;
	padding-left: 100px;
	padding-right: 100px;
	font-family: "Poppins-Regular";
	font-size: 18px;
	border-left: 3px solid #f29868;
	border-right: 3px solid #f29868;
}

.text2 {
	border-left: none;
	border-right: none;
}

.title {
	font-family: "Poppins-Bold";
	margin-bottom: 30px;
}

.box {
	width: 100%;
	height: calc(100% - 140px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 70px;
	margin-bottom: 70px;
}

.width {
	width: 40px;
}

.width2 {
	width: 150px;
}

.part1 {
	width: 500px;
	height: 100%;
	background: url('../images/bg_tiles.png') no-repeat;
	background-size: cover;
}

.part2 {
	height: 100%;
	width: calc(100% - 730px);
}

.tiles {
	height: calc(100% - 44px);
	margin-top: 14px;
	margin-bottom: 18px;
	padding: 6px;
	padding-right: 18px;
	display: flex;
	flex-flow: row wrap;
	justify-content: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 6px;
	grid-row-gap: 6px;
	grid-template-rows: auto;
}

.tile {
	position: relative;
	font-family: "Poppins-Bold";
	font-size: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tile1 {
	background: #f29868;
}

.tile2 {
	background: #ffffff;
}

.box_info {
	opacity: 0;
	margin-top: 50px;
	background: #d0b7a6;
	width: calc(100% - 60px);
	padding: 20px;
	transition: 0.5s;
}

.box_info_title {
	display: inline-block;
	font-family: "Poppins-Bold";
	font-size: 80px;
	line-height: 60px;
	width: 80px;
	text-align: center;
	margin-right: 20px;
}

.box_info_question {
	display: inline-block;
	width: calc(100% - 120px);
	font-family: "Poppins-Bold";
	font-size: 22px;
	line-height: 30px;
	margin-right: 20px;
	vertical-align: top;
}

.box_info_portrait {
	width: 210px;
	margin-right: 20px;
	display: inline-block;
}

.box_info_input1 {
	width: calc(100% - 230px);
	display: inline-block;
	vertical-align: top;
}

.box_info_input1 > textarea {
	width: 100%;
	height: 160px;
	background: #ffffff;
	border: none;
	outline: none;
	font-family: "Poppins-Regular";
	font-size: 14px;
	padding: 10px;
}

.box_info_input1 > input {
	width: 100%;
	background: #ffffff;
	border: none;
	outline: none;
	font-family: "Poppins-Regular";
	font-size: 14px;
	padding: 11px;
}

.box_button {
	width: 100%;
	text-align: right;
}

.space_between10 {
	display: inline-block;
	height: 10px;
	width: calc(100%);
}

.tile_tb {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-family: "Poppins-Bold";
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
}

.textarea2 {
	width: 100%;
	height: 100px;
	background: #ffffff;
	border: none;
	outline: none;
	font-family: "Poppins-Regular";
	font-size: 14px;
	padding: 10px;
	box-shadow: 2px 2px #000000;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.textarea2_p {
	position: relative;
}

.textarea3 {
	position: relative;
	width: calc(100% - 20px);
	height: 50px;
	font-style: italic;
	background: #ffffff;
	color: #777777;
	border: none;
	outline: none;
	font-family: "Poppins-Regular";
	font-size: 12px;
	padding: 10px;
	box-shadow: 2px 2px #000000;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.textarea2_p:after, .textarea3:after {
    content:'';
    position: absolute;
    left: -25px;
    top: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #ffffff;
    border-left: 25px solid transparent;
    border-right: 0px solid transparent;
}

.era2_input {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.input_wrong {
	background: #F5847C;
}

.input_good {
	background: #B2DCB4;
}

.user1 {
	vertical-align: middle;
	display: inline-block;
	width: calc(100% - 130px);
	padding: 20px;
	padding-left: 0px;
	padding-right: 10px;
	text-align: center;
	font-family: "Poppins-Bold";
	font-size: 15px;
	line-height: 18px;
}

.dd_box {
	height: 70px;
	width: calc(100% - 2px);
	background: #e8dcd6;
	border: 1px solid #9f8478;
}

.popup {
	display: none;
	position: fixed;
	top: 30;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-family: "Poppins-Regular";
	font-size: 15px;
	background: #bf0a0a;
	color: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 0px 3px #ffffff;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

.popup2 {
	display: none;
	position: fixed;
	top: 30;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-family: "Poppins-Regular";
	font-size: 15px;
	background: #26a616;
	color: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 0px 3px #ffffff;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

.box {
	width: 100%;
	height: calc(100% - 40px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.part1 {
	width: 350px;
}

.part2 {
	width: calc(100% - 630px);
}

.tile {
	font-size: 50px;
}

.star {
	display: inline-block;
}

.popup_background {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 999;
	opacity: 0.5;
	background: #000000;
	top: 0;
	left: 0;
}

.block_screen_background {
	display: none;
	position: fixed;
	height: 100%;
	width: 100%;
	z-index: 1000;
	opacity: 0.7;
	background: #000000;
	top: 0;
	left: 0;
}

.block_screen_text {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 50%; right: 50%;
	transform: translate(50%,-50%);
}

.timer {
	position: absolute;
	bottom: 10px;
	right: 50%;
	transform: translate(50%, -50%);
	background: #f07e42;
	padding: 4px;
	width: 56px;
	text-align: center;
	font-family: "Poppins-Bold";
	font-size: 15px;
	box-shadow: 1px 2px 0px #000000;
}

.box_info2 {
	display: flex;
	flex-direction: row;
}

.left {
	display: inline-block;
	width: 260px;
	vertical-align: middle;
}

.right {
	display: inline-block;
	width: calc(100% - 260px);
	vertical-align: middle;
}

.textbubble {
	background: #ffffff;
	padding: 25px;
	border-radius: 20px;
	box-shadow: 1px 2px #000000;
	text-align: left;
	margin-left: 40px;
	position: relative;
}

.textbubble:after {
    content: "";
    position: absolute;
    width: 0; 
    height: 0; 
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right:40px solid #ffffff; 
    top: 80;
    left: -40px;
}

.hover {
	width: 2.3vw;
	cursor: hand;
	cursor: pointer;
}

.transform1 {
	transition: 0.5s;
	transform: rotatey(-90deg);
}

.transform2 {
	transition: 0.5s;
	transform: rotatey(0deg);
}