#frame {
	font-family: roboto, noto, helvetica, arial, sans-serif;
	text-rendering: optimizeLegibility;
	font-weight: 400;
	font-style: normal;
}
input:focus, a:focus, input[type="range"]:focus::-webkit-slider-thumb {
	outline: 5px solid rgb(255,204,71);
}
#frame {
  /*   position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  overflow-x: hidden;
}
.blue-bg {
  background: url('images/quiz-bg-2.jpg') no-repeat center center;
  background-size: cover;
}
.yellow-bg {
  background: url('images/quiz-bg-3.jpg') no-repeat center center;
  background-size: cover;
}
.start-bg {
  background: url('images/quiz-bg-3.jpg') no-repeat center center;
  background-size: cover;
}

@keyframes gradientMove {
  0% {
	background-position: 0% 0%;
  }
  33% {
	background-position: 100% 0%;
   }
  66% {
	background-position: 100% 100%;
   }	
  100% {
	background-position: 0% 100%;
   }
}
#corner-image {
  width: 27.5vw;
  height: 27.5vw;
  top: -5vw;
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
}
.corner-image-left {
  left: -5vw;
}
.corner-image-right {
  right: -5vw;
  width: 35vw !important;
  height: 35vw !important;
}
#corner-image img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}
#progress-bar-frame {
	width: 40vw;
	position: absolute;
	top: 0;
	right: 0;
	padding: 3rem 4rem;
}
#progress-bar {
	width: 100%;
	background-color: white;
	padding: 5px;
	border-radius: 10px;
}
#progress-bar-fill {
	display: inline-block;
	position: relative;
	top: 2px;
	height: 22px;
	background-color: rgb(227,8,19);;
	border-radius: 8px;
	transition: width 500ms ease-in-out;
}
#progress-bar-label {
	position: relative;
	top: -3px;
	padding: 0.3vw;
	font-size: 1.25vw;
}
#question-frame {
	position: relative;
	width: 70%;
	margin: 12.5% 12.5% 0 12.5%;
	background: rgba(255,255,255,0.8);
	padding: 2.5% 2.5% 2.5% 2.5%;
	border-radius: 2.5vw;
}
#question p {
	font-size: 2.25vw;
	font-weight: 600;
	text-align: center;
}
#slider {
	width: 100%;
}
#slider input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  margin: 2rem auto 1rem auto;
  outline: 0;
  z-index: 100;
}
#slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: rgb(227,8,19);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid white;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
#slider input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
  border: 2px solid rgb(227,8,19);
}
#slider input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.6);
}
#slider-labels {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#min-label {
	display: inline-block;
	max-width: 20vw;
	font-size: 1.5vw;
	text-align: left;
}
#max-label {
	display: inline-block;
	max-width: 20vw;
	font-size: 1.5vw;
	text-align: right;
}
#branding {
	position: absolute;
	left: 0;
	bottom: 0;
}
#branding img {
	max-width: 12.5vw;
	height: auto;
	margin: 0 0 1rem 1em;
}
#nav-buttons {
	width: 100%;
	padding: 2rem 0;
	text-align: center;
}
#nav-buttons input[type="button"] {
	background:  rgb(227,8,19);
	color: white;
	font-size: 1.75vw;
	font-weight: bold;
	border: 0;
	padding: 0.5rem 1rem;
	border-radius: 10px;
	margin: 0 1rem;
}
#reset-button {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 2rem;
}
#reset-button input[type="button"] {
	background:  white;
	color: rgb(227,8,19);
	font-size: 1.75vw;
	font-weight: normal;
	border: 1px solid rgb(227,8,19);
	padding: 0.5rem 1rem;
	border-radius: 10px;
	margin: 0;
}	
#language-toggle {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 2rem;
	z-index: 1000;
}
#language-toggle input[type="button"]  {
	background:  white;
	color: rgb(227,8,19);
	font-size: 1.75vw;
	font-weight: normal;
	border: 1px solid rgb(227,8,19);
	padding: 0.5rem 1rem;
	border-radius: 10px;
	margin: 0;
}	
#results-frame {
	display: none;
	position: relative;
	width: 57.5%;
	margin: 5% 5% 2.5% 5%;	
	background: rgba(255,255,255,0.8);
	padding: 2.5% 2.5% 2.5% 2.5%;
	border-radius: 2.5vw;
}
#results-frame p, #results-frame li, #results-sidebar p {
	font-size: 1.5vw;
	line-height: 1.4;
	padding: 0;
	margin: 0;
}
#results-frame p, #results-frame ul {
	margin-bottom: 1vw;
}

#results-frame p:last-child {
	margin-bottom: 0;
}

#results-frame h2 {
	font-size: 2.5vw;
	padding: 0.5vw 0;
	margin: 0 0 0.5vw 0;
	font-weight: 600;
	color: rgb(277,8,19);
}
#results-testimonial { /* actually link to rintor */
	display: none;
	position: relative;
	width: 57.5%;
	margin: 2.5% 5% 5% 5%;	
/* 	background: rgba(255,255,255,0.8);
	padding: 2.5% 2.5% 2.5% 2.5%;
	border-radius: 2.5vw; */
}
#results-sidebar p {
	font-size: 1.5vw;
	font-style: italic;
	line-height: 1.4;
	padding: 0;
	margin: 0;
}
#results-sidebar { /* actually testimonial quote */
	display: none;
	width: 27.5%;
	margin: 25% 5% 5% 0%;
	background: rgba(255,255,255,0.8);
	border-radius: 2.5vw;
	padding: 2.5% 2.5% 2.5% 2.5%;
	position: absolute;
	top: 0;
	right: 0;
}
#results-testimonial p {
	font-size: 1.5vw;
	margin: 0;
	padding: 0;
}
#results-testimonial p a {
	padding: 2%;
	background: rgb(227,8,19);
	border-radius: 2.5vw;
	color: white;
}
#results-qr-code {
	display: block;
	padding: 0;
	margin-top: 1vw;
	text-align: center;
}

#results-qr-code img {
	padding: 1.5vw;
	background: white;
	margin: 0 auto;
	border-radius: 1vw;
}

/* responsive styles */

@media (max-width: 992px) {
	#frame {
		height: auto;
	}
	
	#progress-bar-label,
	#min-label,
	#max-label {
		font-size: 0.9rem;
	}
	
	#nav-buttons input[type="button"],
	#reset-button input[type="button"],
	#language-toggle input[type="button"],
	#results-frame h2 {
		font-size: 1rem;
	}
	
	#results-sidebar p, 
	#results-testimonial p, 
	#question p, 
	#results-frame p, 
	#results-frame li, 
	#results-sidebar p {
		font-size: 1rem;
	}
	
	#progress-bar-frame {
		width: 100%;
		position: relative;
		padding: 3rem 1.5rem 0 1.5rem;
	}
	#progress-bar-fill {
		top: 3px;
	}
	
	#question-frame {
		width: calc(80% - 1rem);
	}
	
	#results-frame {
		width: 90%;
		margin-top: 8rem;
	}

	#results-testimonial {
		width: 90%;
		margin-top: 5%;
	}
	
	#results-sidebar {
		width: 90%;
		margin-bottom: 0;
	}
	
	#results-sidebar p {
		font-size: 0.9rem;
	}
	#reset-button {
		position: static;
		margin: 2rem 1rem;
	}
	
	#results-testimonial {
		padding: 2%;
		background: rgb(227,8,19);
		border-radius: 2.5vw;
		color: white !important;
	}

	#language-toggle {
		position: static;
		margin: 2rem 1rem;
	}
	.start-bg:not(.yellow-bg) #language-toggle, .blue-bg #language-toggle {
		text-align: right;
	}
}