/* CSS Document */

div.survey {
	margin-bottom: 250px;
}

div.survey .screen {
    max-width: 860px;
    margin: 0 auto;
    background: rgb(40 57 57 / 50%);
    padding: 15px 55px 40px;
    border-radius: 20px;
	min-height: 440px;
	position: relative;
	height: calc(100% + 80px);
}

/* TYPOGRAPHY */

div.survey h2,
div.survey h3 {
	color: white;
	font-family: museo, sans-serif;
	font-size: 36px;
	padding: 0.5em 0 0.25em;
	margin: 20px 0 0 0;
}

div.survey h3 {
	font-size: 24px;	
}

div.survey p {
	font-size: 20px;
	color: antiquewhite;
}

div.survey {
	color: white;	
}

div.survey ol {
	margin: 0.4em 0 1em 0;	
	font-size: 18px;
}

div.survey ol li {
	font-weight: 900;	
}

/* UI */

.screen-metric .btn-next {
	opacity: 0;
	transition: 0.3s all;
	pointer-events: none;
}

.screen-metric.complete .btn-next {
	opacity: 1;	
	pointer-events: auto;
}

.survey button {
	background: rgba(255,255,255,0.15);
	padding: 13px 20px;
	border-radius: 5px;
	border: none;
	color: white;
	align-items: center;
	font-size: 16px;
    font-family: 'Fira Sans';
	flex: 1;
	display: flex;
	justify-content: center;
	max-height: 43px;
	transition: 0.3s all;	
	cursor: pointer;
	max-width: 140px;
}

.survey.lock button, .survey.lock .ui {
	pointer-events: none;
	display: none;
}

.survey button:hover {
	background: rgba(255,255,255,0.12) !important;
	color: #fac100;
}

.survey .choices button:hover {
	background: rgba(255,255,255,0.22) !important;
	color: #fac100;
	font-weight: bold;
}

.survey button:hover {
	background: rgba(255,255,255,0.12) !important;
}

.survey .choices button {
	font-size: 21px;
	height: 52px;
	max-height: 52px;
	max-width: unset;
}

.survey .choices button.selected,
.survey .choices button.selected:hover {
	background: #fac100 !important;
    color: black;	
}

.survey .ui {
    display: flex;
    gap: 15px;
    margin: 40px -50px 30px -55px;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 50px 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
	min-height: 60px;
}

.survey .screen:first-of-type .ui {
	justify-content: center;	
}

.survey .ui button {
	background: rgba(255,255,255,0.06);
}

ul.choices {
	display: flex;
	justify-content: center;
	padding: 0;
	column-gap: 10px;
	margin: 30px 0 0 0;
}

.survey .range-inputs .range {
    display: flex;
    justify-content: space-between;
    width: 100%;	
	margin: 13px 0 0 0;
	font-size: 15px;
	color: rgba(255,255,150,0.70);
}

.survey .range-inputs .range label {
	width: 20%;	
}

.survey .range-inputs .range label {
	text-align: center;
}

/* Additional text etc */

div#survey_info {
	display: flex;
	justify-content: space-between;
	margin: 50px auto 12px;
	padding: 0 25px;
	width: 100%;
	max-width: 860px;
}

div#survey_info h2 {
	color: rgba(255,255,255,0.6);
	text-align: center;
	font-family: "museo", sans-serif;
	font-size: 18px !important;
	justify-content: flex-start;
	display: flex;
	font-weight: 500;
	margin: 0;
}

div#survey_info h3 {
	text-align: center;
	color: rgba(255,193,0,0.6);
	font-size: 16px;
	font-family: 'museo-sans', sans-serif;
	margin: 0;
	justify-content: flex-end;
	display: flex;
}


/* SLIDE animation */

.screen.anim {
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}	

.screen.anim.out.left {
	animation-name: anim-out-left;
}

.screen.anim.out.right {
	animation-name: anim-out-right;
}

.screen.anim.in.left {
	animation-name: anim-in-from-left;
}

.screen.anim.in.right {
	animation-name: anim-in-from-right;
}

@keyframes anim-out-left {
	0% {
		transform: none;
		opacity: 1;
	}
	100% {
		transform: translateX(-200px);
		opacity: 0;
	}
}

@keyframes anim-out-right {
	0% {
		transform: none;
		opacity: 1;
	}
	100% {
		transform: translateX(200px);
		opacity: 0;
	}
}

@keyframes anim-in-from-left {
	0% {
		transform: translateX(-200px);
		opacity: 0;
	}
	100% {
		transform: none;
		opacity: 1;
	}
}

@keyframes anim-in-from-right {
	0% {
		transform: translateX(100px);
		opacity: 0;
	}
	100% {
		transform: none;	
		opacity: 1;
	}
}