.welcome-text {
	color: white;
	padding-top: 7%;
	text-align: center;
}

.header-questions {
	color: white;
	padding-top: 10%;
	text-align: center;
}

.question-container {
	width: 60%;
	margin: 20px;
}

.answers-container {
	width: 40%;
	margin: 20px;
	align-content: center;
}
div[class^="container-question"] {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Inicia carta */
body {
	background: #323641;
}

.letter-image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.animated-mail {
	position: absolute;
	height: 150px;
	width: 200px;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	transition: .4s;
	
	.body {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 100px 200px;
		border-color: transparent transparent #e95f55 transparent;
		z-index: 2;
	}
	
	.top-fold {
		position: absolute;
		top: 50px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 100px 0 100px;
		-webkit-transform-origin: 50% 0%;
		-webkit-transition: transform .4s .4s, z-index .2s .4s;
		-moz-transform-origin: 50% 0%;
		-moz-transition: transform .4s .4s, z-index .2s .4s;
		transform-origin: 50% 0%;
		transition: transform .4s .4s, z-index .2s .4s;
		border-color: #cf4a43 transparent transparent transparent;
		z-index: 2;
	}
	
	.back-fold {
		position: absolute;
		bottom: 0;
		width: 200px;
		height: 100px;
		background: #cf4a43;
		z-index: 0;
	}
	
	.left-fold {
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 50px 0 50px 100px;
		border-color: transparent transparent transparent #e15349;
		z-index: 2;
	}
	
	.letter {
		left: 20px;
		bottom: 0px;
		position: absolute;
		width: 160px;
		height: 60px;
		background: white;
		z-index: 1;
		overflow: hidden;
		-webkit-transition: .4s .2s;
		-moz-transition: .4s .2s;
		transition: .4s .2s;
		
		.letter-border {
			height: 10px;
			width: 100%;
      background: repeating-linear-gradient(
        -45deg,
        #cb5a5e,
        #cb5a5e 8px,
        transparent 8px,
        transparent 18px
      );
		}
		
		.letter-title {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 40%;
			background: #cb5a5e;
		}
		.letter-context {
			margin-top: 10px;
			margin-left: 5px;
			height: 10px;
			width: 20%;
			background: #cb5a5e;
		}
		
		.letter-stamp {
			margin-top: 30px;
			margin-left: 120px;
			border-radius: 100%;
			height: 30px;
			width: 30px;
			background: #cb5a5e;
			opacity: 0.3;
		}
	}
}

.shadow {
	position: absolute;
	top: 200px;
	left: 50%;
	width: 400px;
	height: 30px;
	transition: .4s;
	transform: translateX(-50%);
	-webkit-transition: .4s;
	-webkit-transform: translateX(-50%);
	-moz-transition: .4s;
	-moz-transform: translateX(-50%);
	
	border-radius: 100%;
	background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}

	.letter-image:hover {
		.animated-mail {
			transform: translateY(50px);
			-webkit-transform: translateY(50px);
			-moz-transform: translateY(50px);
		}
		
		.animated-mail .top-fold {
			transition: transform .4s, z-index .2s;
			transform: rotateX(180deg);
			-webkit-transition: transform .4s, z-index .2s;
			-webkit-transform: rotateX(180deg);
			-moz-transition: transform .4s, z-index .2s;
			-moz-transform: rotateX(180deg);
			z-index: 0;
		}
		
		.animated-mail .letter {
			height: 180px;
		}
		
		.shadow {
			width: 250px;
		}
	}

	
.container-question input[type="radio"] {
	display: none;
}

/* Style the labels as custom buttons */
.container-question label {
	display: inline-block;
	padding: 10px 20px;
	margin: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
	background-color: #aaa;
	color: #333;
	transition: all 0.3s ease;
}

/* Style for checked state */
.container-question input[type="radio"]:checked + label {
	background-color: #5c6da1;
	color: white;
	border-color: #53769b;
}

/* Hover effect */
.container-question label:hover {
	background-color: #d1d1d1;
}

/* Hover effect for checked state */
.container-question input[type="radio"]:checked + label:hover {
	background-color: #7d89ac;
	border-color: #00264e;
}


/* Desvanece inicio y entra preguntas */
@keyframes slideOut {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%); /* Moves to the right */
	}
  }
  
  .disappearing-div {
	animation: slideOut 0.7s forwards;
  }
  

  @keyframes fadeIn {
	0% {
	  opacity: 0; /* At the start, fully transparent */
	}
	100% {
	  opacity: 1; /* At the end, fully opaque */
	}
  }

  .appearing-div {
	opacity: 0; /* Start invisible */
	animation: fadeIn 2s forwards; /* Apply the animation */
  }


.button {
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	background-color: #344F9F;
	border: 1px solid #2b4184;
}
.button:hover {
	background-color: #3f5fbf;
}
#submit {
	text-align: center;
}
#submit.hidden {
	opacity: 0;
	pointer-events: none; /* Prevent interaction when hidden */
}

/* Red bar */
#errorBar {
	background-color: #f44336; /* Red background for errors */
	color: white;
	padding: 15px;
	position: fixed; /* Or absolute, depending on placement */
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 1000; /* Ensure it appears above other content */
	transition: opacity 0.5s ease-in-out; /* Smooth fade effect */
}
#errorBar.hidden {
	opacity: 0;
	pointer-events: none; /* Prevent interaction when hidden */
}
#errorBar button {
	background-color: #fff;
	color: #f44336;
	border: none;
	padding: 8px 15px;
	margin-left: 10px;
	cursor: pointer;
}

/* Basic styling for the modal and its content */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	text-align: center;
}
.close-button {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.close-button:hover,
.close-button:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
#confirmOkButton {
	background-color: #344F9F;
	border: 1px solid #2b4184;
	cursor: pointer;
	color: white;
	height: 40px;
	margin: 20px 20px 0 20px;
}
#confirmOkButton:hover {
	background-color: #78c176;
	border: 1px solid green;
}
#confirmCancelButton {
	height: 40px;
	margin: 0 20px 20px 20px;
}
.red-white {
	background: repeating-linear-gradient( -45deg, #cb5a5e, #cb5a5e 15px, transparent 15px, transparent 40px )
}


/* HTML: <div class="loader"></div> */
.loader {
	width: calc(80px / cos(45deg));
	height: 14px;
	background: repeating-linear-gradient(-45deg,#cb5a5e 0 15px,#0000 0 20px) left/200% 100%;
	animation: l3 30s infinite linear;
  }
  @keyframes l3 {
	  100% {background-position:right}
  }