@font-face {
	font-family: 'Gill Sans MT Pro Bold';
	src: url('./assets/fonts/GillSansMTPro-Bold.otf') format('opentype');
}

body {
	height: 100dvh;
	width: 100vw;
	background-image: url(./assets/background-auth.png);
	background-size: cover;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.main-container-image {
	max-width: calc(100vh * (59 / 41));
	/* max-height: calc(100vw * (41 / 59)); */
	aspect-ratio: 59 / 41;
	background-color: #fff;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: relative;
}

#main-background {
	margin: 0 !important;
	background-image: url(./assets/background-auth.png) !important;
}

#content {
	overflow: hidden !important;
}

#main-background.main-questions {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: cover !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;
	background-position: top !important;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);
		overflow: auto !important;
		height: 100dvh;
		position: relative;

		.question-screen {
			width: 100%;
			gap: 0px;
			overflow: auto;

			.question-header {
				width: 100%;
				padding: 0;
				justify-content: center;
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					width: 15%;
				}

				h2 {
					max-width: 80%;
					font-family: 'Gill Sans MT Pro Book';
				}
			}

			.question-description {
				text-align: center;
				max-width: 75%;
				margin-top: 0;
			}

			.question-content {
				margin-top: 20px;
				width: 70%;

				.btn-group {
					gap: 0.3rem;
					align-items: center;

					.answer-btn {
						width: 262px;
					}
				}
			}

			footer {
				background-color: transparent !important;
				position: relative;
				bottom: 5%;
				padding-bottom: 50px;
				p {
					font-size: 10px;
				}
			}
		}
	}
}

#main-background.main-info {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: 100% !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);
		overflow: auto !important;
		height: 100dvh;

		.info-screen {
			width: 80%;
			margin: 0 auto;
			overflow: auto;
			max-height: calc(100% - 90px);
			height: 100%;
			justify-content: flex-start;

			footer {
				bottom: 0%;
				position: relative;
				margin-top: 30px;
				padding-bottom: 100px;
				background-color: transparent;
				.footer-content {
					background-color: transparent;
				}
			}
		}
	}
}

#main-background.main-changed {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: cover !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;
	background-position: top !important;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);
		overflow: auto !important;
		height: 100dvh;

		.result-container {
			padding: 0;
			justify-content: flex-start;
			padding-top: 50px;
			width: 80%;
			margin: 0 auto;

			.result-header {
				h2 {
					font-size: 18px;
					font-family: 'Gill Sans MT Pro Bold';
				}
			}
		}

		footer {
			bottom: 0%;
			position: relative;
			background-color: transparent;
			padding-bottom: 100px;
			.footer-content {
				background-color: transparent;
			}
		}
	}
}

#main-background.main-instructions {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: cover !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;
	background-position: top !important;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);
		overflow: auto !important;
		height: 100dvh;

		.result-container {
			padding: 0;
			overflow: auto;
			justify-content: flex-start;
			padding-top: 50px;
			width: 80%;
			max-height: calc(100% - 16px);
			margin: 0 auto;
		}

		footer {
			bottom: 0%;
			position: relative;
			padding-bottom: 100px;
			margin-top: 30px;
			background-color: transparent;
			.footer-content {
				background-color: transparent;
			}
		}
	}
}

#main-background.main-current {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: cover !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;
	background-position: top !important;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);
		overflow: auto !important;
		height: 100dvh;

		.result-container {
			padding: 0;
			overflow: auto;
			justify-content: flex-start;
			padding-top: 50px;
			width: 80%;
			max-height: calc(100% - 16px);
			margin: 0 auto;
		}

		footer {
			bottom: 0%;
			position: relative;
			padding-bottom: 100px;
			margin-top: 30px;
			background-color: transparent;
			.footer-content {
				background-color: transparent;
			}
		}
	}
}

#main-background.main-result {
	background-image: url(./assets/background-side-menu.png) !important;
	background-size: 100% !important;
	height: calc(100dvh - 62px);
	align-items: flex-start;
	overflow: hidden;

	#content {
		min-width: calc(100% * 0.545);
		max-width: calc(100% * 0.645);
		background-color: #fff;
		height: 100dvh;
		box-shadow: -8px 0 15px rgba(0, 0, 0, 0.15),
			8px 0 15px rgba(0, 0, 0, 0.15);

		.result-container {
			padding: 0;
			justify-content: flex-start;
			padding-top: 10px;
			padding-bottom: 100px;
			width: 90%;
			max-height: 100%;
			margin: 0 auto;
			overflow: auto;

			.description {
				padding-bottom: 0;
			}

			.result-header {
				h2 {
					font-family: 'Gill Sans MT Pro Book';
					font-size: 15px;

					strong {
						font-family: 'Gill Sans MT Pro Bold';
						font-size: 16px;
					}
				}
			}

			.description-button {
				font-size: 14px;
				font-family: 'Gill Sans MT Pro Bold';
				.comming {
					font-size: 16px;
				}
			}
		}

		footer {
			bottom: 13%;
			position: relative;
			margin-top: 40px;
			padding-bottom: 20px;
			background-color: transparent;
			.footer-content {
				background-color: transparent;

				#reference-footer {
					font-size: 10px;
				}
			}
		}
	}
}

.mavel-boto {
	position: absolute;
	width: 44%;
	height: 70%;
	left: 3%;
	top: 9%;
	cursor: pointer;
}

.mavel-boto1 {
	position: absolute;
	width: 44%;
	height: 70%;
	left: 51%;
	top: 9%;
	cursor: pointer;
}

.email {
	color: #fff;
	font-size: 20px;
}

.cerrar-sesion {
	justify-content: center !important;
	display: none !important;
}

.cerrar-session-web {
	width: 200px !important;
	height: auto !important;
	display: block;
}

.login-container {
	background-image: url(./assets/background-auth.png);
	background-size: 100%;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding-top: 100px;
	align-items: center;
	flex-direction: column;

	@media (max-height: 625px) {
		padding-top: 20px;
	}

	.title {
		max-width: 619px;
		margin: 0;
		color: #0076aa;
		font-weight: 700;
		font-family: 'Gill Sans MT Pro Bold';
		font-size: 28px;
		text-align: center;
	}

	.mc-donald-2024 {
		margin-top: 30px;
		color: #0076aa;
		font-size: 30px;
		text-align: center;
		font-family: 'Gill Sans MT Pro Medium';
	}

	.welcome {
		max-width: 433px;
		width: 100%;
		border-bottom: 1px solid #6a6d71;

		p {
			color: #fa8600;
			font-weight: 700;
			text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
				2px 2px 0 #fff;

			font-size: 39px;
			text-align: center;
			margin: 0;
		}
	}

	.label-text {
		color: #6a6d71;
		font-family: 'Gill Sans MT Pro Medium';
		font-weight: normal;
		margin-top: 30px;
		font-size: 16px;
		margin: 0;
	}

	input {
		height: 39px;
		width: 100%;
		max-width: 416px;
		outline: none;
		font-size: 24px;
		font-family: 'Gill Sans MT Pro Medium';
		font-weight: 400;
		padding: 0 10px;
		border-radius: 3px;
		border: 1px solid #6a6d71;

		&:focus,
		&:focus-visible,
		&:focus-within {
			outline: none;
		}
	}

	.iniciar-sesion {
		width: 461px;
		height: 68px;
		object-fit: contain;
		margin-top: 15px;
	}

	footer {
		background-color: transparent;
	    bottom: 0 !important;
		position: relative;
		

		.footer-content {
			background: transparent;
		}
	}
}

@media (max-width: 375px) {
	.login-container {
		footer {
			.footer-content {
				p {
					font-size: 10px;
				}
			}
		}
	}
}

@media (max-width: 1366px) and (max-height: 625px) {
	.login-container {
		footer {
			.footer-content {
				p {
					font-size: 10px;
				}
			}
		}
	}
}

.down-botton {
	position: absolute;
	z-index: 1;
	width: 50px;
	height: 50px;
	right: 5%;
	bottom: 15%;
	animation: salto 2s ease-in-out infinite;
	display: none;
}

@keyframes salto {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-20px);
	}
	50% {
		transform: translateY(0);
	}
	70% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@media (max-width: 1024px) {
	.email {
		display: none;
	}

	.cerrar-sesion {
		justify-content: center !important;
		display: flex !important;
	}

	.cerrar-session-web {
		display: none;
	}

	#content {
		overflow: hidden !important;
	}

	.main-container-image {
		max-height: 100%;
	}

	.down-botton {
		display: block;
	}

	#main-background {
		background-image: url(./assets/background-main.png) !important;

		.home-screen {
			justify-content: flex-start;
			padding: 0;

			footer {
				bottom: 8%;
			}
		}
	}

	#main-background.main-questions {
		background-image: url('./assets/background-question.png') !important;

		#content {
			min-width: 100%;
			max-width: 100%;

			.question-screen {
				width: 100%;

				.question-header {
					padding: 10px 0 0 0;
					align-items: center;
					display: flex;
					flex-direction: column;
					max-width: 100%;

					img {
						width: 15%;
					}

					h2 {
						font-size: 13px;
						max-width: 90%;
					}

					.question-description {
						max-width: 90%;
						text-align: center;
					}
				}

				.question-content {
					width: 95%;

					.btn-group {
						gap: 0.3rem;
					}
				}

				footer {
					.footer-content {
						background-color: transparent;
					}
				}
			}
		}
	}

	#main-background.main-info {
		background-image: url('./assets/background-question.png') !important;

		#content {
			height: 100%;
			min-width: 100%;
			max-width: 100%;

			.info-screen {
				padding: 0;
				overflow: auto;
				justify-content: flex-start;
				padding-top: 50px;
				width: 95%;
				max-height: 100%;

				footer {
					bottom: 0%;
					position: relative;
					margin-top: 30px;
					background-color: transparent;
					padding-bottom: 0;

					.footer-content {
						background-color: transparent;
					}
				}
			}
		}
	}

	#main-background.main-changed {
		background-image: url('./assets/background-question.png') !important;

		#content {
			width: 100%;
			min-width: 100%;
			max-width: 100%;
			overflow: auto;
			max-height: 100dvh;

			.result-container {
				padding: 0;
				justify-content: flex-start;
				padding-top: 50px;
				width: 80%;
			}

			footer {
				position: relative;
				bottom: 0%;
				padding-bottom: 70px;

				.footer-content {
					background-color: transparent;
				}
			}
		}
	}

	#main-background.main-instructions {
		background-image: url('./assets/background-question.png') !important;

		#content {
			min-width: 100%;
			max-width: 100%;

			.result-container {
				padding: 0;
				overflow: auto;
				justify-content: flex-start;
				padding-top: 50px;
				width: 95%;
				max-height: 100dvh;

				.instructions-references {
					padding-left: 20px;
				}
			}

			footer {
				.footer-content {
					background-color: transparent;
				}
			}
		}
	}

	#main-background.main-current {
		background-image: url('./assets/background-question.png') !important;
		.result-container {
			padding: 0;
			overflow: auto;
			justify-content: flex-start;
			padding-top: 50px;
			width: 95%;
			max-height: calc(100dvh - 190px);
		}

		footer {
			.footer-content {
				background-color: transparent;
			}
		}
	}

	#main-background.main-result {
		background-image: url('./assets/background-question.png') !important;
		.result-container {
			padding: 0;
			overflow: auto;
			justify-content: flex-start;
			padding-top: 50px;
			padding-bottom: 50px;
			width: 95%;
			max-height: calc(100dvh - 190px);
		}

		footer {
			.footer-content {
				background-color: transparent;
			}
		}
	}

	.footer-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		padding: 5px 5px;
		font-size: 10px;
		text-align: center;
		background: #00000080;
		font-weight: 700;
	}

	.home-screen h1 {
		font-size: 1.5rem;
	}

	.home-screen p {
		font-size: 1.5rem;
	}

	.side-menu {
		background-size: cover;
		height: calc(100dvh - 91px);

		.menu-container {
			min-width: 100%;
			max-width: 100%;
			padding-left: 10px;
			padding-right: 10px;

			.footer-content {
				background-color: transparent;
			}
		}
	}

	.login-container {
		background-size: cover;
	}
}

@media (max-height: 625px) {
	.down-botton {
		display: block;
	}

	.login-container {
		footer {
			bottom: 13%;
		}
	}

	#main-background.main-info {
		#content {
			max-height: calc(100% + 30px);

			.info-screen {
				margin-top: 30px;

				footer {
					padding-bottom: 30px;
				}
			}
		}
	}
}

@media (max-width: 540px) {
	.login-container {
		background-size: cover;
		padding-top: 50px;

		.title {
			max-width: 90%;
			font-size: 14px;
		}

		.mc-donald-2024 {
			font-size: 18px;
		}

		.welcome {
			width: 90%;

			p {
				font-size: 30px;
			}
		}

		input {
			max-width: 90%;
		}

		footer {
			bottom: 16%;
		}
	}
}

@media (min-width: 768px) and (min-width: 1367px) {
	#main-background.main-info {
		.info-screen {
			padding: 0;
			overflow: hidden;
			justify-content: flex-start;
			padding-top: 50px;
		}
	}

	#main-background.main-changed {
		.result-container {
			padding: 0;
			overflow: hidden;
			justify-content: flex-start;
			padding-top: 50px;
		}
	}

	#main-background.main-instructions {
		.result-container {
			padding: 0;
			overflow: hidden;
			justify-content: flex-start;
			padding-top: 50px;
		}
	}

	#main-background.main-current {
		.result-container {
			padding: 0;
			overflow: hidden;
			justify-content: flex-start;
			padding-top: 50px;
		}
	}

	#main-background.main-result {
		.result-container {
			padding: 0;
			overflow: hidden;
			justify-content: flex-start;
			padding-top: 20px;
			padding-bottom: 50px;
		}
	}

	#main-background.main-questions {
		background-image: url(./assets/background-side-menu.png) !important;
		background-size: 100% !important;
		height: calc(100dvh - 62px);
		align-items: flex-start;

		.question-screen {
			width: 89%;
			gap: 20px;

			.question-header {
				width: 100%;
				padding: 0;
				justify-content: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				max-width: 49.4dvw;

				img {
					width: 15%;
				}
			}

			.question-description {
				text-align: center;
				max-width: 90%;
			}

			.question-content {
				width: 70%;

				.btn-group {
					gap: 0.3rem;

					.answer-btn {
						height: 89%;
					}
				}
			}

			footer {
				background-color: transparent !important;
				position: absolute;
				bottom: 8%;
			}
		}
	}

	.login-container {
		footer {
			bottom: 15%;
		}
	}
}