.quest-main-image-container {
  overflow: hidden;
  position: relative;
}

.quest-main-image-container img {
  width: 100%;
}

.quest-header {
	background-color: #ef7d74;
	color: white;
	padding: 20px 0;
}

.quest-header-top {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20px;
}

.quest-txt {
	padding-bottom: 8px;
}

.quest-magic-photo {
  border-radius: 5px;
  left: 59.8%;
  position: absolute;
  top: 23.8%;
  width: 6.8% !important;
}

a.button-rounded.font-panton.quest-button {
	background-color: white;
	color: #ef7d74;
	border-radius: 5px;
	transition: .3s ease-in-out;
	text-transform: uppercase;
	border: none;
	font-size: 14px;
}

a.button-rounded.font-panton.quest-button:hover {
	background-color: white;
	color: #ef7d74;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

a.button-rounded.font-panton.quest-lang {
	background-size: 35px auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: transparent;
	width: 35px;
	border-color: transparent;
	border-radius: 5px;
	transition: .3s ease-in-out;
}

a.button-rounded.font-panton.quest-lang:hover {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

.language-ua {
	background-image: url("/wp-content/uploads/2023/09/ua.png");
}

.language-en {
	background-image: url("/wp-content/uploads/2023/09/en.png");
}

.quest-login {
	display: flex;
	flex-direction: column;
}

.quest-login input {
	padding: 10px;
	border: 1px solid var(--color-grey);
	border-radius: 3px;
	width: 100%;
	max-width: 350px;
}

.btn-quest {
	padding: 10px 15px;
	border: 1px solid var(--color-grey);
	border-radius: 3px;
	width: 100%;
	max-width: 350px;
	background-color: white;
	color: #ef7d74;
	transition: .3s ease-in-out;
	font-size: 14px;
	text-transform: uppercase;
}

.btn-quest:hover {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

.quest-info {
	display: flex;
	justify-content: center;
}

.quest-info p {
	padding-right: 12px;
	padding-top: 5px;
	font-weight: bold;
}

.btn-logout {
	padding: 10px;
	background-image: url("/wp-content/uploads/2023/09/exit.png");
	background-size: 20px auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-color: transparent;
	width: 30px;
	border-color: transparent;
	cursor: pointer;
	transition: .3s ease-in-out;
}

.btn-logout:hover {
	opacity: 0.8;
}


.quest-calendar {
	background-color: #ef7d74;
	padding: 20px 0 30px;
}

.quest-calendar a {
	display: inline-block;
	padding: 5px 7px;
	background-color: white;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-right: 8px;
	transition: .3s ease-in-out;
	color: #ef7d74;
}

.quest-calendar a.current-day {
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

.quest-calendar a:hover {
    filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
	opacity: 1;
}

.quest-calendar span {
	display: inline-block;
	padding: 5px 7px;
	background-color: var(--color-grey);
	color: #9b9b94;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-right: 8px;
}

.quest-question {
	background-color: #ef7d74;
	color: white;
	padding-bottom: 20px;
}

.quest-question .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.quest-question-txt {
	font-size: 20px;
	text-align: center;
	padding-bottom: 10px;
}

.quest-question input {
	padding: 10px;
	border: 1px solid var(--color-grey);
	border-radius: 3px;
	width: 100%;
	max-width: 350px;
	margin-bottom: 10px;
}

.btn-question {
	padding: 10px 15px;
	border: 1px solid var(--color-grey);
	border-radius: 3px;
	background-color: white;
	color: #ef7d74;
	width: 100%;
	max-width: 350px;
	transition: .3s ease-in-out;
	text-transform: uppercase;
	font-size: 14px;
	text-align: center;
}

.btn-question:hover {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

.question-answer {
	padding: 20px 0;
}

.quest-answer-in {
  display: flex;
  align-items: center;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 130px;
  padding: 20px;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.8);
}

.quest-answer-in p {
	padding: 0 15px;
}

.quest-answer-in img {
	width: 140px;
}

.wrong-answered {
	padding-top: 15px;
}

.movie {
	margin-top: -2px;
}

.quest-top-head {
	font-size: 20px;
	padding-bottom: 10px;
	text-align: center;
}

.quest-top p:not(:first-child) {
	display: block;
	margin: 15px auto;
	padding: 20px;
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
	border-radius: 20px;
	background-color: white;
	position: relative;
	max-width: 500px;
}

.quest-bonus-image {
	width: 50px;
	position: absolute;
	top: 5px;
	right: 10px;
}

#quest-rules {
	max-width: 700px;
	border-radius: 10px;
}

#quest-congratulations {
  border-radius: 10px;
  padding: 15px;
}

.quest-countdown {
	font-size: 20px;
	padding: 20px 0 0;
	text-align: center;
	text-transform: uppercase;
}

.quest-question .donate-buttons {
  padding: 0;
  border: none;
}

.quest-question .donate-in button:hover {
  background: #fff;
  color: #ef7d74;
  filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

@media (min-width: 600px) {
  .quest-login {
	 justify-content: center;
	 flex-direction: row;
   }
	
	.quest-login p  {
		min-width: 30%;
	}
	
   .quest-txt {
	  text-align: center;
    }
	
	.quest-login p:not(:last-child) {
	  margin-right: 20px;
	}
	
	.quest-answer-in {
		max-width: 600px;
		min-width: 500px;
	}
	
	.quest-answer-in p {
	    padding: 0 20px;
	}
	
	.quest-answer-in img {
		width: 200px;
	}
	
	.quest-guess {
		display: flex;
		flex-direction: row;

	}
	
	.quest-question input {
		margin-bottom: 0;
		margin-right: 10px;
		min-width: 350px;
	}
	
	.question-answer .container {
		display: flex;
		justify-content: center;
	}
	
	.quest-top-head {
		padding-bottom: 25px;
	}
	
	.quest-top p:not(:first-child) {
		margin: 20px auto;
	}
}

@media (min-width: 900px) {
  .quest-login p  {
	 min-width: 200px;
  }
	.quest-calendar .container {
		display: flex;
		justify-content: center;
	}
	.question-answer {
		margin-top: -138px;
		padding-bottom: 40px;
	}
	
	.quest-countdown {
		font-size: 30px;
		padding: 35px 0 0;
		text-align: center;
	}
}


@media (max-width: 768px)  {
  .quest-main-image-container img {
    margin-left: -40vw;
    width: 180vw;
  }
  .quest-main-image-container img.book {
    margin-left: -70vw;
    width: 240vw;
  }
  .quest-calendar .container {
    overflow-x: auto;
    white-space: nowrap;
  }
  .quest-magic-photo {
    left: 116%;
    top: 22.8%;
    width: 16.8% !important;
  }
}